feat: 完成画布拖拽交互开发

src/editor/panels/material/index.vue

@@ -0,0 +1,44 @@
+<!-- 物料面板 -->
+<script setup lang="ts">
+import MaterialItem from '@/editor/panels/material/components/MaterialItem.vue'
+import { getMaterialGroups, getMaterialsByGroup } from '@/materials'
+
+defineOptions({
+  name: 'MaterialPanel',
+})
+
+const activeGroup = ref('info')
+
+const groups = getMaterialGroups()
+
+const currentMaterials = computed(() => {
+  return getMaterialsByGroup(activeGroup.value)
+})
+</script>
+
+<template>
+  <div class="flex">
+    <div class="w-12 border-r border-white/20">
+      <div
+        v-for="value in groups"
+        :key="value.key"
+        class="cursor-pointer flex flex-col items-center justify-center text-sm h-12"
+        :class="{ 'bg-white/10 text-white': activeGroup === value.key }"
+        @click="activeGroup = value.key"
+      >
+        <span><Icon :icon="value.icon" width="16" /></span>
+        <span>{{ value.name }}</span>
+      </div>
+    </div>
+    <div class="flex-1 p-2.5 overflow-auto">
+      <MaterialItem
+        class="mt-2.5"
+        v-for="item in currentMaterials"
+        :key="item.name"
+        :material="item"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>