feat:我的资源

src/router/index.ts

@@ -5,7 +5,7 @@ const routes = [
   { path: '/preview', component: () => import('@/views/Preview.vue') },
 ];
 
-console.log(import.meta.env.BASE_URL, import.meta.env);
+// console.log(import.meta.env.BASE_URL, import.meta.env);
 
 const router = createRouter({
   history: createWebHistory(

src/services/common.ts

@@ -128,7 +128,6 @@ export const save = async (
     let blob: Blob;
     try {
       blob = dataURLtoBlob(meta2d.activeToPng(0) + '');
-      console.log('blob', blob);
     } catch (e) {
       MessagePlugin.error(
         '无法下载，宽度不合法，可能没有选中画笔/选中画笔大小超出浏览器最大限制'

src/services/png.ts

@@ -44,7 +44,6 @@ export async function getFolders(name: string, isSvg?: boolean) {
 
     results.push({ name, list });
   }
-
   return results;
 }
 

src/styles/tdesign.css

@@ -385,8 +385,8 @@
 
     &.t-is-checked {
       border-color: var(--color-border-input);
-      background-color: var(--color-border-input);
-      color: var(--td-text-color-primary) !important;
+      /* background-color: var(--color-border-input); */
+      /* color: var(--td-text-color-primary) !important; */
     }
   }
 }

src/styles/var.css

@@ -63,7 +63,7 @@
     var(--td-font-family);
   --td-border-level-1-color: var(--color-background-input);
   --td-text-color-placeholder: var(--color-desc);
-  --td-brand-color: var(--color-primary);
+  --td-brand-color: var(--color-primary-hover);
   --td-bg-color-component: var(--color-border-input);
   --td-brand-color-light: var(--color-border-input);
   --td-mask-disabled: var(--color-background);

src/views/components/FileProps.vue

@@ -259,7 +259,7 @@ import { loadCss } from '@meta2d/core';
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
 };
-const updataData = { directory: '/项目' };
+const updataData = { directory: '/大屏/未分类' };
 
 const { assets } = useAssets();
 

src/views/components/Graphics.vue

@@ -1,26 +1,14 @@
 <template>
   <div class="graphics">
-    <div class="input-search">
-      <div class="btn">
-        <t-icon name="search" />
-      </div>
-      <t-input
-        v-model="search"
-        @change="onSearch"
-        @enter="onSearch"
-        placeholder="搜索"
-      />
-
-      <div class="ml-16">
-        <t-tooltip content="展开/折叠">
-          <t-icon
-            name="menu-fold"
-            class="hover"
-            style="font-size: 16px"
-            @click="onFold"
-          />
-        </t-tooltip>
-      </div>
+    <div class="group-asset">
+      <t-radio-group
+        v-model="activeAssets"
+        @change="assetsChange"
+        variant="primary-filled"
+      >
+        <t-radio-button value="system">系统资源</t-radio-button>
+        <t-radio-button value="user">我的资源</t-radio-button>
+      </t-radio-group>
     </div>
     <div class="groups-panel">
       <div class="groups">
@@ -34,11 +22,36 @@
         </div>
       </div>
       <div class="list" :class="groupType ? 'two-columns' : ''">
+        <div class="input-search">
+          <div class="btn">
+            <t-icon name="search" />
+          </div>
+          <t-input
+            v-model="search"
+            @change="onSearch"
+            @enter="onSearch"
+            placeholder="搜索"
+          />
+
+          <div class="ml-16">
+            <t-tooltip content="展开/折叠">
+              <t-icon
+                name="menu-fold"
+                class="hover"
+                style="font-size: 16px"
+                @click="onFold"
+              />
+            </t-tooltip>
+          </div>
+        </div>
         <div v-if="loading" class="center mt-16">
           <t-loading text="加载中..." size="small" :indicator="false" />
         </div>
         <template v-else>
-          <div v-if="activedGroup === '我的'" class="px-16 mt-12 mb-8 ml-4">
+          <div
+            v-if="activedGroup === '组件' || activedGroup === '图片'"
+            class="px-16 mt-12 mb-8 ml-4"
+          >
             <a @click="onCreateFolder">+ 新建文件夹</a>
           </div>
           <t-collapse v-model="activedPanels[activedGroup]">
@@ -67,11 +80,19 @@
               <template #headerRightContent>
                 <t-space size="small" @click.stop tabindex="0">
                   <t-upload
-                    v-if="item.canEdited || item.name === '我的组件'"
+                    v-if="
+                      item.canEdited ||
+                      (activedGroup === '组件' && item.name === '我的组件')
+                    "
                     action="/api/image/upload"
-                    accept="image/*"
+                    :accept="activedGroup === '组件' ? '.svg' : 'image/*'"
                     :headers="headers"
-                    :data="updataData"
+                    :data="{
+                      directory:
+                        activedGroup === '图片'
+                          ? `/大屏/${item.name}`
+                          : '/大屏/未分类',
+                    }"
                     :auto-upload="true"
                     :upload-all-files-in-one-request="false"
                     :before-upload="beforeUpload"
@@ -148,12 +169,17 @@
       :style="contextmenu.style"
       @blur="hideContextmenu"
     >
-      <t-menu class="context-menu" @change="onMenu" expandType="popup" v-model="contextmenu.activeValue">
+      <t-menu
+        class="context-menu"
+        @change="onMenu"
+        expandType="popup"
+        v-model="contextmenu.activeValue"
+      >
         <t-submenu
           value="move"
           title="移动到"
           v-if="contextmenu.subMenus.length"
-          :disabled="contextmenu.component['3d']"
+          :disabled="contextmenu.component['3d'] || activedGroup === '图片'"
         >
           <t-menu-item
             v-for="subMenu in contextmenu.subMenus"
@@ -162,7 +188,7 @@
             {{ subMenu.name }}
           </t-menu-item>
         </t-submenu>
-        <t-menu-item value="edit" :disabled="!contextmenu.component.component || contextmenu.component.image.endsWith('.svg')">
+        <t-menu-item value="edit" :disabled="activedGroup === '图片'">
           编辑
         </t-menu-item>
         <t-menu-item value="del" :disabled="contextmenu.component['3d']">
@@ -237,6 +263,7 @@ import { charts } from '@/services/echarts';
 import { getFolders, makeSvg } from '@/services/png';
 import {
   addCollection,
+  delImage,
   getComponentsList,
   getLe5leV,
   updateCollection,
@@ -247,7 +274,7 @@ import { autoSave, delAttrs } from '@/services/common';
 import { debounce, throttle } from '@/services/debouce';
 import { searchObjectPinyin } from '@/services/pinyin';
 import { getCookie } from '@/services/cookie';
-import { parseSvg } from '@meta2d/svg'
+import { parseSvg } from '@meta2d/svg';
 import WechatPay from './WechatPay.vue';
 import { filename } from '@/services/file';
 import { useUser } from '@/services/user';
@@ -257,11 +284,12 @@ const { user } = useUser();
 const router = useRouter();
 
 const activedGroup = ref('');
-
-const groups = reactive([
+const activeAssets = ref('system');
+let groups = reactive([]);
+const systemGroups = [
   {
     icon: 'desktop',
-    name: '场景',
+    name: '方案',
     key: '',
     class: 'tow',
   },
@@ -295,18 +323,50 @@ const groups = reactive([
     name: '图形',
     key: 'shape',
   },
+  // {
+  //   icon: 'app',
+  //   name: '我的',
+  //   key: '',
+  // },
+];
+const userGroups = [
+  {
+    icon: 'desktop',
+    name: '方案',
+    key: '',
+    class: 'tow',
+  },
+  {
+    icon: 'root-list',
+    name: '模板',
+    key: '',
+  },
   {
     icon: 'app',
-    name: '我的',
+    name: '组件',
+    key: 'chart',
+  },
+  {
+    icon: 'image',
+    name: '图片',
     key: '',
   },
-]);
+  {
+    icon: 'control-platform',
+    name: '3D',
+    key: '',
+  },
+];
+
+groups = systemGroups;
 const subGroups = ref<any[]>([]);
 const groupType = ref(0);
 const activedPanels = reactive<any>({});
 
 const caseCaches = [];
 const templateCaches = [];
+const userCaseCaches = [];
+const userTemplateCaches = [];
 const materials = [];
 const pngs = [];
 
@@ -323,54 +383,109 @@ const loading = ref(false);
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
 };
-const updataData = { directory: '/项目' };
+const updataData = { directory: '/大屏/未分类' };
+let lastName = '方案';
+let userLastName = '方案';
+const assetsChange = (value) => {
+  if (value === 'system') {
+    groups = systemGroups;
+    activedGroup.value = lastName;
+  } else if (value === 'user') {
+    groups = userGroups;
+    activedGroup.value = userLastName;
+  }
+  groupChange(activedGroup.value);
+};
 
 const groupChange = async (name: string) => {
   activedGroup.value = name;
   groupType.value = 0;
   switch (name) {
-    case '场景':
-      if (!caseCaches.length) {
-        loading.value = true;
-        caseCaches.push(...(await getCaseProjects(name)));
-        for (const group of cases) {
-          group.list = [];
-          for (const item of caseCaches) {
-            if (item.case === group.name) {
-              group.list.push(item);
+    case '方案':
+      if (activeAssets.value === 'system') {
+        if (!caseCaches.length) {
+          loading.value = true;
+          caseCaches.push(...(await getCaseProjects(name)));
+          for (const group of cases) {
+            group.list = [];
+            for (const item of caseCaches) {
+              if (item.case === group.name) {
+                group.list.push(item);
+              }
             }
           }
+          loading.value = false;
         }
-        loading.value = false;
-      }
-
-      groupType.value = 1;
-      subGroups.value = cases;
 
+        groupType.value = 1;
+        subGroups.value = cases;
+        lastName = name;
+      } else {
+        if (!userCaseCaches.length) {
+          loading.value = true;
+          userCaseCaches.push(...(await getCaseProjects('我的方案')));
+          for (const group of cases) {
+            group.list = [];
+            for (const item of userCaseCaches) {
+              if (item.case === group.name) {
+                group.list.push(item);
+              }
+            }
+          }
+          loading.value = false;
+        }
+        groupType.value = 1;
+        //TODO 场景选择
+        subGroups.value = cases;
+        userLastName = name;
+      }
       break;
     case '模板':
-      if (!templateCaches.length) {
-        loading.value = true;
-        templateCaches.push(...(await getCaseProjects(name)));
-        for (const group of templates) {
-          group.list = [];
-          for (const item of templateCaches) {
-            if (item.case === group.name) {
-              group.list.push(item);
+      if (activeAssets.value === 'system') {
+        if (!templateCaches.length) {
+          loading.value = true;
+          templateCaches.push(...(await getCaseProjects(name)));
+          for (const group of templates) {
+            group.list = [];
+            for (const item of templateCaches) {
+              if (item.case === group.name) {
+                group.list.push(item);
+              }
             }
           }
+          loading.value = false;
         }
-        loading.value = false;
-      }
 
-      groupType.value = 1;
-      subGroups.value = templates;
+        groupType.value = 1;
+        subGroups.value = templates;
+        lastName = name;
+      } else {
+        if (!userTemplateCaches.length) {
+          loading.value = true;
+          userTemplateCaches.push(...(await getCaseProjects('我的模版')));
+          for (const group of templates) {
+            group.list = [];
+            for (const item of userTemplateCaches) {
+              if (item.case === group.name) {
+                group.list.push(item);
+              }
+            }
+          }
+          loading.value = false;
+        }
+
+        groupType.value = 1;
+        subGroups.value = templates;
+        userLastName = name;
+      }
       break;
     case '图表':
       subGroups.value = charts;
+      lastName = name;
       break;
     case '控件':
       subGroups.value = formComponents;
+      lastName = name;
       break;
     case '素材':
       groupType.value = 1;
@@ -380,6 +495,7 @@ const groupChange = async (name: string) => {
         loading.value = false;
       }
       subGroups.value = materials;
+      lastName = name;
       break;
     case '图元':
       if (!pngs.length) {
@@ -389,14 +505,39 @@ const groupChange = async (name: string) => {
         loading.value = false;
       }
       subGroups.value = pngs;
+      lastName = name;
       break;
     case '图形':
       subGroups.value = shapes;
+      userLastName = name;
+      break;
+    // case '我的':
+    //   subGroups.value = await getPrivateGroups();
+    //   groupType.value = 1;
+    //   await getPrivateGraphics();
+    //   break;
+    case '组件':
+      subGroups.value = await getUserComponents();
+      groupType.value = 1;
+      await getPrivateGraphics();
+      userLastName = name;
+      break;
+    case '图片':
+      loading.value = true;
+      subGroups.value = await getImageList();
+      loading.value = false;
+      userLastName = name;
       break;
-    case '我的':
-      subGroups.value = await getPrivateGroups();
+    case '3D':
+      subGroups.value = [
+        {
+          name: '3D',
+          list: [],
+        },
+      ];
       groupType.value = 1;
       await getPrivateGraphics();
+      userLastName = name;
       break;
   }
 
@@ -410,6 +551,53 @@ const groupChange = async (name: string) => {
   searchGraphics();
 };
 
+const getImageList = async () => {
+  let ret: { list: any[] } = await axios.post('/api/directory/list', {
+    fullpath: '/大屏',
+  });
+  if (!ret) {
+    return [];
+  }
+  let list = [];
+  for (let i of ret.list) {
+    if (i.fullpath.indexOf('缩略图') === -1) {
+      list.push(i);
+    }
+  }
+  return await Promise.all(
+    list.map(async (item) => {
+      let secondDir = item.fullpath.split('/');
+      const _ret: { list: any[]; total: number } = await axios.post(
+        '/api/file/list',
+        {
+          type: '图片',
+          directory: item.fullpath,
+        },
+        {
+          params: {
+            current: 1,
+            pageSize: 100,
+          },
+        }
+      );
+      let list = _ret.list.map((_item) => {
+        return {
+          image: _item.filename,
+          visible: true,
+          folder: item.fullpath,
+          _id: item._id,
+        };
+      });
+      return {
+        name: secondDir[2],
+        _id: item._id,
+        canEdited: secondDir[2] !== '未分类',
+        list: list,
+      };
+    })
+  );
+};
+
 const getCaseProjects = async (name: string, current = 1, pageSize = 1000) => {
   const query: any = { tags: name };
 
@@ -494,6 +682,46 @@ const getPrivateGroups = async () => {
   return list;
 };
 
+const getUserComponents = async () => {
+  const list = [
+    {
+      name: '我的组件',
+      list: [],
+    },
+  ];
+  const config = {
+    params: {
+      current: 1,
+      pageSize: 1000,
+    },
+  };
+  let ret: any = await axios.post(
+    '/api/data/folders/list',
+    {
+      projection: {
+        image: 1,
+        _id: 1,
+        name: 1,
+        list: 1,
+      },
+      query: {
+        type: `le5leV-components`,
+      },
+      sort: { createdAt: 1 },
+    },
+    config
+  );
+  if (!ret) {
+    ret = { list: [] };
+  }
+
+  for (const item of ret.list) {
+    item.canEdited = true;
+  }
+  list.push(...ret.list);
+  return list;
+};
+
 const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
   event.stopPropagation();
   if (!item) {
@@ -507,7 +735,7 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
   const id = item._id || item.id;
   let isAsync: boolean;
   if (item.draggable === false) {
-    // 场景
+    //方案
     data = item.data || item;
   } else if (item['3d']) {
     data = {
@@ -714,26 +942,47 @@ const createFoder = async () => {
     MessagePlugin.error('已经存在相同名称文件夹');
     return;
   }
-
-  if (editedFolder.value._id) {
-    const ret: any = await axios.post('/api/data/folders/update', {
-      _id: editedFolder.value._id,
-      name: editedFolder.value.label,
-    });
-    if (ret) {
-      editedFolder.value.name = editedFolder.value.label;
-      editedFolder.value.edited = false;
+  if (activedGroup.value === '组件') {
+    if (editedFolder.value._id) {
+      const ret: any = await axios.post('/api/data/folders/update', {
+        _id: editedFolder.value._id,
+        name: editedFolder.value.label,
+      });
+      if (ret) {
+        editedFolder.value.name = editedFolder.value.label;
+        editedFolder.value.edited = false;
+      }
+    } else {
+      const ret: any = await axios.post('/api/data/folders/add', {
+        name: editedFolder.value.label,
+        type: 'le5leV-components',
+        list: [],
+      });
+      if (ret) {
+        editedFolder.value.name = editedFolder.value.label;
+        editedFolder.value._id = ret._id;
+        editedFolder.value.edited = false;
+      }
     }
-  } else {
-    const ret: any = await axios.post('/api/data/folders/add', {
-      name: editedFolder.value.label,
-      type: 'le5leV-components',
-      list: [],
-    });
-    if (ret) {
-      editedFolder.value.name = editedFolder.value.label;
-      editedFolder.value._id = ret._id;
-      editedFolder.value.edited = false;
+  } else if (activedGroup.value === '图片') {
+    if (editedFolder.value._id) {
+      const ret: any = await axios.post('/api/directory/update', {
+        oldFullpath: '/大屏/' + editedFolder.value.oldLabel,
+        newFullpath: '/大屏/' + editedFolder.value.label,
+      });
+      if (ret) {
+        editedFolder.value.name = editedFolder.value.label;
+        editedFolder.value.edited = false;
+      }
+    } else {
+      const ret: any = await axios.post('/api/directory/add', {
+        fullpath: '/大屏/' + editedFolder.value.label,
+      });
+      if (ret) {
+        editedFolder.value.name = editedFolder.value.label;
+        editedFolder.value._id = ret._id || ret.id;
+        editedFolder.value.edited = false;
+      }
     }
   }
 };
@@ -741,6 +990,7 @@ const createFoder = async () => {
 const onEditHeader = (item: any) => {
   item.label = item.name;
   item.edited = true;
+  item.oldLabel = item.name;
   editedFolder.value = item;
 };
 
@@ -766,7 +1016,11 @@ const onContextMenu = async (e: MouseEvent, group: any, item: any) => {
   e.preventDefault();
   e.stopPropagation();
 
-  if (activedGroup.value !== '我的') {
+  if (
+    activedGroup.value !== '组件' &&
+    activedGroup.value !== '图片' &&
+    activedGroup.value !== '3D'
+  ) {
     return;
   }
 
@@ -801,7 +1055,7 @@ const onContextMenu = async (e: MouseEvent, group: any, item: any) => {
 };
 
 const delDialog = reactive<any>({
-  contextmenuObj:{}
+  contextmenuObj: {},
 });
 const onMenu = async (val: string) => {
   const id = contextmenu.component._id || contextmenu.component.id;
@@ -822,7 +1076,7 @@ const onMenu = async (val: string) => {
             r: Date.now() + '',
           },
         });
-      } else {
+      } else if (contextmenu.component['3d']) {
         let url = 'https://3d.le5le.com/?id=';
         if (window.url3D) {
           url = window.url3D;
@@ -833,7 +1087,7 @@ const onMenu = async (val: string) => {
       break;
     case 'del':
       delDialog.show = true;
-      Object.assign(delDialog.contextmenuObj, contextmenu)
+      Object.assign(delDialog.contextmenuObj, contextmenu);
       break;
     default:
       if (val.indexOf('move:')) {
@@ -882,7 +1136,7 @@ const onMenu = async (val: string) => {
       }
       break;
   }
-  contextmenu.activeValue = 0
+  contextmenu.activeValue = 0;
 };
 
 const hideContextmenu = () => {
@@ -891,32 +1145,55 @@ const hideContextmenu = () => {
 
 const delComponent = async () => {
   // const id = contextmenu.component._id || contextmenu.component.id;
-  const id = delDialog.contextmenuObj.component._id || delDialog.contextmenuObj.component.id;
-  try {
-    await axios.post(`/api/data/le5leV-components/delete`, {
-      id
-    });
-  }catch (e){
-    console.log(e)
-    return
-  }
-  // 前端：从源文件夹移出组件
-  delDialog.contextmenuObj.group.list.forEach((item: any, index: number, arr: any[]) => {
-    if (id === item._id || id === item.id) {
-      arr.splice(index, 1);
+  if (activedGroup.value === '组件') {
+    const id =
+      delDialog.contextmenuObj.component._id ||
+      delDialog.contextmenuObj.component.id;
+    try {
+      await axios.post(`/api/data/le5leV-components/delete`, {
+        id,
+      });
+    } catch (e) {
+      console.error(e);
+      return;
     }
-  });
+    // 前端：从源文件夹移出组件
+    delDialog.contextmenuObj.group.list.forEach(
+      (item: any, index: number, arr: any[]) => {
+        if (id === item._id || id === item.id) {
+          arr.splice(index, 1);
+        }
+      }
+    );
 
-  // 更新后端源文件夹列表
-  if (delDialog.contextmenuObj.group.name !== '我的组件') {
-    await axios.post('/api/data/folders/update', {
-      _id: delDialog.contextmenuObj.group._id ||delDialog.contextmenuObj.group.id,
-      list: delDialog.contextmenuObj.group.list,
+    // 更新后端源文件夹列表
+    if (delDialog.contextmenuObj.group.name !== '我的组件') {
+      await axios.post('/api/data/folders/update', {
+        _id:
+          delDialog.contextmenuObj.group._id ||
+          delDialog.contextmenuObj.group.id,
+        list: delDialog.contextmenuObj.group.list,
+      });
+    }
+  } else {
+    const id =
+      delDialog.contextmenuObj.component._id ||
+      delDialog.contextmenuObj.component.id;
+    delDialog.contextmenuObj.group.list.forEach(
+      (item: any, index: number, arr: any[]) => {
+        if (id === item._id || id === item.id) {
+          arr.splice(index, 1);
+        }
+      }
+    );
+    await axios.post(`/api/files/delete`, {
+      filenames: [delDialog.contextmenuObj.component.image],
+      physically: false,
     });
   }
-
   delDialog.show = false;
-  delDialog.contextmenuObj = {}
+  delDialog.contextmenuObj = {};
+
   MessagePlugin.success('删除成功');
 };
 
@@ -1025,50 +1302,61 @@ const beforeUpload = (file: any) => {
 };
 
 /*
-* @description 根据上传的文件处理为meta2d能够识别的内容
-* */
-function processFileObj(fileObj,c) {
+ * @description 根据上传的文件处理为meta2d能够识别的内容
+ * */
+function processFileObj(fileObj, c) {
   return new Promise((resolve) => {
-    if(fileObj.name.endsWith('.svg')){
-      let fileReader = new FileReader()
-      fileReader.readAsText(fileObj.raw)
-      fileReader.onload = async ()=>{
-        let svgText = fileReader.result
-        c.componentDatas = parseSvg(svgText as string)
-        c.component = true
-        resolve(c)
-      }
-    }else {
+    if (fileObj.name.endsWith('.svg')) {
+      let fileReader = new FileReader();
+      fileReader.readAsText(fileObj.raw);
+      fileReader.onload = async () => {
+        let svgText = fileReader.result;
+        c.componentDatas = parseSvg(svgText as string);
+        c.component = true;
+        resolve(c);
+      };
+    } else {
       // 除了svg 其他一律按照图片处理，这样是否会有问题？
-     resolve(c)
+      resolve(c);
     }
-  })
+  });
 }
 
 const fileSuccessed = async (content: any) => {
-  const c: any = {
-    name: filename(content.file.name),
-    image: content.response.url,
-    folder: uploadGroup.name === '我的组件' ? '' : uploadGroup.name,
-  };
-  let rst = await processFileObj({raw: content.file.raw,name:content.file.name},c)
-  const ret: any = await addCollection('le5leV-components', rst);
-  c._id = ret._id || ret.id;
-  if (ret && uploadGroup.name !== '我的组件') {
-    if (!uploadGroup.list) {
-      uploadGroup.list = [];
-    }
+  if (activedGroup.value === '组件') {
+    const c: any = {
+      name: filename(content.file.name),
+      image: content.response.url,
+      folder: uploadGroup.name === '我的组件' ? '' : uploadGroup.name,
+    };
+    let rst = await processFileObj(
+      { raw: content.file.raw, name: content.file.name },
+      c
+    );
+    const ret: any = await addCollection('le5leV-components', rst);
+    c._id = ret._id || ret.id;
+    if (ret && uploadGroup.name !== '我的组件') {
+      if (!uploadGroup.list) {
+        uploadGroup.list = [];
+      }
 
-    uploadGroup.list.push(c);
-    await axios.post('/api/data/folders/update', {
-      _id: uploadGroup._id || uploadGroup.id,
-      list: uploadGroup.list,
-    });
-  } else {
-    if (!uploadGroup.list) {
-      uploadGroup.list = [];
+      uploadGroup.list.push(c);
+      await axios.post('/api/data/folders/update', {
+        _id: uploadGroup._id || uploadGroup.id,
+        list: uploadGroup.list,
+      });
+    } else {
+      if (!uploadGroup.list) {
+        uploadGroup.list = [];
+      }
+      uploadGroup.list.push(c);
     }
-    uploadGroup.list.push(c);
+  } else if (activedGroup.value === '图片') {
+    uploadGroup.list.push({
+      image: content.response.filename,
+      visible: true,
+      folder: content.response.metadata.directory,
+    });
   }
   MessagePlugin.success('上传成功');
 };
@@ -1080,9 +1368,16 @@ const delFolder = async (item: any) => {
   }
 
   const id = item._id || item.id;
-  const ret: any = await axios.post('/api/data/folders/delete', {
-    id,
-  });
+  let ret: any;
+  if (activedGroup.value === '组件') {
+    ret = await axios.post('/api/data/folders/delete', {
+      id,
+    });
+  } else if (activedGroup.value === '图片') {
+    ret = await axios.post('/api/directory/delete', {
+      fullpaths: [`/大屏/${item.name}`],
+    });
+  }
   if (ret) {
     const i = subGroups.value.findIndex(
       (elem: any) => id === elem._id || id === elem.id
@@ -1092,7 +1387,7 @@ const delFolder = async (item: any) => {
 };
 
 onMounted(() => {
-  groupChange('场景');
+  groupChange('方案');
   document.addEventListener('dragstart', dragstart, false);
   document.addEventListener('dragend', dragend, false);
 
@@ -1114,11 +1409,12 @@ onUnmounted(() => {
   flex-direction: column;
   background-color: var(--color-background);
   z-index: 3;
-  .input-search {
-    flex-shrink: 0;
+  .group-asset {
     height: 40px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
   }
-
   .groups-panel {
     display: grid;
     grid-template-columns: 50px 1fr;
@@ -1158,8 +1454,20 @@ onUnmounted(() => {
       overflow-y: auto;
       max-height: calc(100vh - 100px);
       background-color: var(--color-background-active);
-      padding-top: 8px;
-
+      /* padding-top: 8px; */
+      .input-search {
+        flex-shrink: 0;
+        height: 40px;
+        position: sticky;
+        top: 0px;
+        z-index: 10;
+        .btn {
+          background: #fff0;
+          .t-icon {
+            background: #fff0;
+          }
+        }
+      }
       * {
         background-color: var(--color-background-active);
       }

src/views/components/PenProps.vue

@@ -1092,7 +1092,7 @@ const { user } = useUser();
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
 };
-const updataData = { directory: '/项目' };
+const updataData = { directory: '/大屏/未分类' };
 
 const uploadRef = ref();