graphics

package.json

@@ -19,7 +19,7 @@
     "localforage": "^1.10.0",
     "monaco-editor": "^0.38.0",
     "qrcode": "^1.5.3",
-    "tdesign-vue-next": "^1.3.5",
+    "tdesign-vue-next": "^1.3.7",
     "vue": "^3.3.2",
     "vue-router": "^4.2.0"
   },

pnpm-lock.yaml

@@ -33,8 +33,8 @@ dependencies:
     specifier: ^1.5.3
     version: 1.5.3
   tdesign-vue-next:
-    specifier: ^1.3.5
-    version: 1.3.5(vue@3.3.4)
+    specifier: ^1.3.7
+    version: 1.3.7(vue@3.3.4)
   vue:
     specifier: ^3.3.2
     version: 3.3.4
@@ -1947,8 +1947,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /tdesign-vue-next@1.3.5(vue@3.3.4):
-    resolution: {integrity: sha512-kAhWq/Rzke9HmEpvAWTXiJ38cSPd+3wgyzjQ2CbWg27MqLZD3SE+ZZcWRBANrh6ilTV40ewUiUjgwGEwGYIxVA==}
+  /tdesign-vue-next@1.3.7(vue@3.3.4):
+    resolution: {integrity: sha512-AMo4TQmlfqDHq/pvvMvzthEG37yCZrbdm/2XJanYFs+2g1foO2a1NyKSFccm0SdslaWFJj3hQFYsBBr/IlMUUg==}
     peerDependencies:
       vue: '>=3.1.0'
     dependencies:

src/views/components/Graphics.vue

@@ -191,7 +191,12 @@ import axios from 'axios';
 
 import { cases, shapes, charts, formComponents } from '@/services/defaults';
 import { getFolders, getFiles, getIcons } from '@/services/png';
-import { getComponents, getComponentsList, getLe5leV } from '@/services/api';
+import {
+  getComponents,
+  getComponentsList,
+  getLe5leV,
+  updateCollection,
+} from '@/services/api';
 import { convertPen } from '@/services/upgrade';
 import { deepClone } from '@meta2d/core';
 import { isGif } from '@/services/utils';
@@ -365,6 +370,7 @@ const getPrivateGroups = async () => {
       query: {
         type: `le5leV-components`,
       },
+      sort: { createdAt: 1 },
     },
     config
   );
@@ -631,9 +637,15 @@ const onKeyHeader = (text: string, event: any) => {
   }
 };
 
+// 我的组件右键菜单
 const contextmenu = reactive<any>({
   visible: false,
   style: {},
+  // 子分类
+  group: undefined,
+  // 组件图纸
+  component: undefined,
+  // 右键二级子菜单
   subMenus: [],
 });
 const contextmenuDom = ref<any>(null);
@@ -678,9 +690,10 @@ const onContextMenu = async (e: MouseEvent, group: string, item: any) => {
 const delDialog = reactive<any>({});
 
 const onMenu = async (val: string) => {
+  const id = contextmenu.component._id || contextmenu.component.id;
+
   switch (val) {
     case 'edit':
-      const id = contextmenu.component._id || contextmenu.component.id;
       autoSave();
       router.push({
         path: '/',
@@ -695,12 +708,81 @@ const onMenu = async (val: string) => {
     case 'del':
       delDialog.show = true;
       break;
+    default:
+      if (val.indexOf('move:')) {
+        return;
+      }
+
+      val = val.replace('move:', '');
+      const group = contextmenu.subMenus.find(
+        (element: any) => element.name === val
+      );
+      if (!group) {
+        return;
+      }
+      // 前端: 添加组件到目标文件夹
+      group.list.push(contextmenu.component);
+      // 前端：从源文件夹移出组件
+      contextmenu.group.list.forEach((item: any, index: number, arr: any[]) => {
+        if (id === item._id || id === item.id) {
+          arr.splice(index, 1);
+        }
+      });
+
+      // 更新后端组件信息
+      let ret = await updateCollection('le5leV-components', {
+        _id: id,
+        folder: val === '我的组件' ? '' : val,
+      });
+      if (!ret) {
+        return;
+      }
+
+      // 更新后端源文件夹列表
+      if (contextmenu.group.name !== '我的组件') {
+        await axios.post('/api/data/folders/update', {
+          _id: contextmenu.group._id || contextmenu.group.id,
+          list: contextmenu.group.list,
+        });
+      }
+
+      // 更新后端目标文件夹列表
+      if (group.name !== '我的组件') {
+        await axios.post('/api/data/folders/update', {
+          _id: group._id || group.id,
+          list: group.list,
+        });
+      }
+      break;
   }
 
   contextmenu.visible = false;
 };
 
-const delComponet = () => {
+const delComponet = async () => {
+  const id = contextmenu.component._id || contextmenu.component.id;
+  const ret = await axios.post(`/api/data/le5leV-components/delete`, {
+    id,
+  });
+  if (!ret) {
+    return;
+  }
+
+  // 前端：从源文件夹移出组件
+  contextmenu.group.list.forEach((item: any, index: number, arr: any[]) => {
+    if (id === item._id || id === item.id) {
+      arr.splice(index, 1);
+    }
+  });
+
+  // 更新后端源文件夹列表
+  if (contextmenu.group.name !== '我的组件') {
+    await axios.post('/api/data/folders/update', {
+      _id: contextmenu.group._id || contextmenu.group.id,
+      list: contextmenu.group.list,
+    });
+  }
+
   delDialog.show = false;
 };