Merge branch 'main' of github.com:le5le-com/visualization-design

src/views/components/Graphics.vue

@@ -19,7 +19,12 @@
       </div>
       <div class="list" :class="showType === 1 ? 'two-list' : ''">
         <t-collapse v-model:value="panelValue">
-          <t-collapse-panel :value="item.name" :header="item.name" v-for="item in showList" :key="item.name">
+          <t-collapse-panel
+            :value="item.name"
+            :header="item.name"
+            v-for="item in showList"
+            :key="item.name"
+          >
             <div
               class="show-item"
               v-for="iItem in item.list"
@@ -44,56 +49,56 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import { shapeLib, chartLib, formLib } from "@/services/defaults";
-import { getPngFolders, getPngs } from "@/services/png";
-import { getIconFolders, getIcons } from "@/services/icons";
-import { getComponents, getComponentsList } from "@/services/api";
-import { convertPen } from "@/services/upgrade";
-import { deepClone } from "@meta2d/core";
-import { isGif } from "@/services/utils";
-
-const activeGroup = ref("图形");
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { shapeLib, chartLib, formLib } from '@/services/defaults';
+import { getPngFolders, getPngs } from '@/services/png';
+import { getIconFolders, getIcons } from '@/services/icons';
+import { getComponents, getComponentsList } from '@/services/api';
+import { convertPen } from '@/services/upgrade';
+import { deepClone } from '@meta2d/core';
+import { isGif } from '@/services/utils';
+
+const activeGroup = ref('图形');
 const groups = reactive([
   {
-    icon: "desktop",
-    name: "场景",
-    key: "",
+    icon: 'desktop',
+    name: '场景',
+    key: '',
   },
   {
-    icon: "root-list",
-    name: "模板",
-    key: "",
+    icon: 'root-list',
+    name: '模板',
+    key: '',
   },
   {
-    icon: "chart",
-    name: "图表",
-    key: "chart",
+    icon: 'chart',
+    name: '图表',
+    key: 'chart',
   },
   {
-    icon: "control-platform",
-    name: "控件",
-    key: "",
+    icon: 'control-platform',
+    name: '控件',
+    key: '',
   },
   {
-    icon: "image",
-    name: "素材",
-    key: "",
+    icon: 'image',
+    name: '素材',
+    key: '',
   },
   {
-    icon: "file-icon",
-    name: "图标",
-    key: "",
+    icon: 'file-icon',
+    name: '图标',
+    key: '',
   },
   {
-    icon: "chart-bubble",
-    name: "图形",
-    key: "shape",
+    icon: 'chart-bubble',
+    name: '图形',
+    key: 'shape',
   },
   {
-    icon: "app",
-    name: "我的",
-    key: "",
+    icon: 'app',
+    name: '我的',
+    key: '',
   },
 ]);
 
@@ -127,7 +132,7 @@ const getCommponentsLib = async () => {
   let list = [];
   for (let key in folderMap) {
     list.push({
-      name: key === "undefined" ? "未分类" : key,
+      name: key === 'undefined' ? '未分类' : key,
       show: true,
       list: folderMap[key],
     });
@@ -154,34 +159,35 @@ const groupChange = async (name: string) => {
   activeGroup.value = name;
   showType.value = 0;
   switch (name) {
-    case "场景":
+    case '场景':
       showList.value = [];
       break;
-    case "模板":
+    case '模板':
       showList.value = [];
       break;
-    case "图表":
+    case '图表':
       showList.value = chartLib;
       break;
-    case "控件":
+    case '控件':
       showList.value = formLib;
       break;
-    case "素材":
+    case '素材':
       if (materialLib.length === 0) {
         materialLib = await getMaterialLib();
       }
       showList.value = materialLib;
       break;
-    case "图标":
+    case '图标':
       if (iconsLib.length === 0) {
         iconsLib = await getIconsLib();
       }
       showList.value = iconsLib;
       break;
-    case "图形":
+    case '图形':
       showList.value = shapeLib;
+      panelValue.value = ['基本形状'];
       break;
-    case "我的":
+    case '我的':
       showList.value = await getCommponentsLib();
       showType.value = 1;
       break;
@@ -202,16 +208,16 @@ watch(
     if (newOpen.length === 0) {
       return;
     }
-    if (activeGroup.value === "素材") {
-      const data: any = materialLib.find(item => item.name === newOpen[0]);//  materialLib[newOpen[0]];
+    if (activeGroup.value === '素材') {
+      const data: any = materialLib.find((item) => item.name === newOpen[0]); //  materialLib[newOpen[0]];
       if (!data.list || data.list.length === 0) {
         data.list = await getPngs(
           globalThis.folderJson ? data.pinyin : data.name
         );
         showList.value = deepClone(materialLib);
       }
-    } else if (activeGroup.value === "图标") {
-      const data: any = iconsLib.find(item => item.name === newOpen[0]);// iconsLib[newOpen[0]];
+    } else if (activeGroup.value === '图标') {
+      const data: any = iconsLib.find((item) => item.name === newOpen[0]); // iconsLib[newOpen[0]];
       if (!data.list || data.list.length === 0) {
         data.list = await getIcons(
           globalThis.folderJson ? data.pinyin : data.name
@@ -240,8 +246,8 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
     const normalWidth = target.naturalWidth || target.width;
     const normalHeight = target.naturalHeight || target.height;
     const [name, lockedOnCombine] = isGif(item.image)
-      ? ["gif", 0]
-      : ["image", undefined];
+      ? ['gif', 0]
+      : ['image', undefined];
 
     data = {
       name,
@@ -263,7 +269,7 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
   }
   if (event instanceof DragEvent) {
     meta2d.canvas.addCaches = [];
-    event.dataTransfer?.setData("Meta2d", JSON.stringify(data));
+    event.dataTransfer?.setData('Meta2d', JSON.stringify(data));
   } else {
     if (!Array.isArray(data)) {
       data = deepClone([data]);
@@ -293,14 +299,14 @@ const getGraphics = async () => {
 };
 
 onMounted(() => {
-  groupChange("图形");
-  document.removeEventListener("dragstart", dragstart);
-  document.removeEventListener("dragend", dragend);
+  groupChange('图形');
+  document.removeEventListener('dragstart', dragstart);
+  document.removeEventListener('dragend', dragend);
 });
 
 onUnmounted(() => {
-  document.addEventListener("dragstart", dragstart, false);
-  document.addEventListener("dragend", dragend, false);
+  document.addEventListener('dragstart', dragstart, false);
+  document.addEventListener('dragend', dragend, false);
 });
 </script>
 <style lang="postcss" scoped>