search graphics

src/services/png.ts

@@ -2,8 +2,6 @@ import axios from '@/http';
 import { parseSvg } from '@meta2d/svg';
 import { cdn } from './api';
 
-const baseurl = import.meta.env.VITE_BASEURL || '/';
-
 export function filename(str: string) {
   const i = str.lastIndexOf('.');
   return str.substring(0, i);
@@ -42,56 +40,9 @@ export async function getFolders(name: string, isSvg?: boolean) {
   return results;
 }
 
-export async function getFiles(folder: string) {
-  if (folder[folder.length - 1] !== '/') {
-    folder += '/';
-  }
-  const files = (await axios.get(folder)) as any[];
-  if (!files || !files.map) {
-    return [];
-  }
-  return files.map((f) => {
-    let fname = filename(f.name);
-    return {
-      name: globalThis.fileJson
-        ? globalThis.fileJson[fname]
-          ? globalThis.fileJson[fname]
-          : fname
-        : fname,
-      pinyin: globalThis.fileJson ? fname : null,
-      image: cdn + folder + f.name,
-    };
-  });
-}
-
 export async function makeSvg(elem: any) {
   const svgDom: string = await axios.get(elem.image);
   let _svgDom = svgDom.replaceAll('#333;', '#fff;');
   elem.svg = _svgDom;
   elem.data = parseSvg(_svgDom);
 }
-
-export async function getIcons(folder: string) {
-  const files = (await axios.get(folder)) as any[];
-  return await Promise.all(files.map((f) => svgToPens(f, folder)));
-}
-
-async function svgToPens(f: any, folder: string) {
-  const _name = filename(f.name);
-  const name = globalThis.fileJson
-    ? globalThis.fileJson[_name]
-      ? globalThis.fileJson[_name]
-      : _name
-    : _name;
-  const image = cdn + folder + f.name;
-  const svgDom: string = await axios.get(image);
-  let _svgDom = svgDom.replace('stroke:#333;', 'stroke:#bdc7db;');
-  const data = parseSvg(_svgDom);
-  return {
-    name,
-    pinyin: globalThis.fileJson ? _name : null,
-    componentDatas: data,
-    svg: _svgDom,
-    component: true,
-  };
-}

src/views/components/Graphics.vue

@@ -48,7 +48,6 @@
           <t-collapse
             v-if="groupType < 2"
             v-model="activedPanels[activedGroup]"
-            @change="onChangeGroupPanel"
           >
             <t-collapse-panel
               :value="item.name"
@@ -118,8 +117,8 @@
               </template>
               <div
                 v-if="!item.list || !item.list.length"
-                class="gray center"
-                style="white-space: nowrap; margin-left: 32px"
+                class="gray"
+                style="white-space: nowrap; margin-left: 34px"
               >
                 暂无数据
               </div>
@@ -248,14 +247,14 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref, shallowRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { MessagePlugin } from 'tdesign-vue-next';
 import axios from 'axios';
 
 import { cases, shapes, formComponents } from '@/services/defaults';
 import { charts } from '@/services/echarts';
-import { getFolders, getFiles, makeSvg } from '@/services/png';
+import { getFolders, makeSvg } from '@/services/png';
 import { getComponentsList, getLe5leV, updateCollection } from '@/services/api';
 import { convertPen } from '@/services/upgrade';
 import { deepClone } from '@meta2d/core';
@@ -313,15 +312,15 @@ const groups = reactive([
     key: '',
   },
 ]);
-const subGroups = ref<any[]>([]);
+const subGroups = shallowRef<any[]>([]);
 const groupType = ref(0);
 const activedPanels = reactive<any>({});
 
-const caseCaches = ref<any[]>([]);
-const templates = ref([]);
-const materials = ref([]);
-const pngs = ref([]);
-const icons = ref([]);
+const caseCaches = [];
+const templates = [];
+const materials = [];
+// 数量太大，禁用响应式
+const pngs = [];
 
 let dropped = false;
 const chargeDialog = reactive<any>({});
@@ -338,13 +337,12 @@ const groupChange = async (name: string) => {
   groupType.value = 0;
   switch (name) {
     case '场景':
-      groupType.value = 1;
-      if (!caseCaches.value.length) {
+      if (!caseCaches.length) {
         loading.value = true;
-        caseCaches.value = await getCaseProjects(name);
+        caseCaches.push(...(await getCaseProjects(name)));
         for (const group of cases) {
           group.list = [];
-          for (const item of caseCaches.value) {
+          for (const item of caseCaches) {
             if (item.case === group.name) {
               group.list.push(item);
             }
@@ -352,15 +350,17 @@ const groupChange = async (name: string) => {
         }
         loading.value = false;
       }
+
+      groupType.value = 1;
       subGroups.value = cases;
 
       break;
     case '模板':
-      groupType.value = 2;
-      if (!templates.value.length) {
-        templates.value = await getCaseProjects(name);
+      if (!templates.length) {
+        templates.push(...(await getCaseProjects(name)));
       }
-      subGroups.value = templates.value;
+      groupType.value = 2;
+      subGroups.value = templates;
       break;
     case '图表':
       subGroups.value = charts;
@@ -370,21 +370,17 @@ const groupChange = async (name: string) => {
       break;
     case '素材':
       groupType.value = 2;
-      if (!materials.value.length) {
-        materials.value = await getFiles('material/');
+      if (!materials.length) {
+        materials.push(...(await getFolders('material')));
       }
-      subGroups.value = materials.value;
+      subGroups.value = materials;
       break;
     case '图元':
-      subGroups.value = [];
-      if (!pngs.value.length) {
-        pngs.value = await getFolders('png');
+      if (!pngs.length) {
+        pngs.push(...(await getFolders('png')));
+        pngs.push(...(await getFolders('svg', true)));
       }
-      subGroups.value.push(...pngs.value);
-      if (!icons.value.length) {
-        icons.value = await getFolders('svg', true);
-      }
-      subGroups.value.push(...icons.value);
+      subGroups.value = pngs;
       break;
     case '图形':
       subGroups.value = shapes;
@@ -392,7 +388,7 @@ const groupChange = async (name: string) => {
     case '我的':
       subGroups.value = await getPrivateGroups();
       groupType.value = 1;
-      onChangeGroupPanel([subGroups.value[0].name]);
+      await getPrivateGraphics();
       break;
   }
 
@@ -598,68 +594,58 @@ const open = async (item: any) => {
   meta2d.open(ret);
 };
 
-const onChangeGroupPanel = async (val: string[]) => {
-  if (val?.length) {
-    for (const name of val) {
-      switch (activedGroup.value) {
-        case '我的':
-          for (const item of subGroups.value) {
-            if (!item.list.length) {
-              item.loading = true;
-              if (item.name === '我的组件') {
-                const data = {
-                  query: { folder: '' },
-                  projection: {
-                    image: 1,
-                    _id: 1,
-                    name: 1,
-                    component: 1,
-                  },
-                };
-                const config = {
-                  params: {
-                    current: 1,
-                    pageSize: 1000,
-                  },
-                };
-                const res: any = await getComponentsList(data, config);
-                if (res?.list) {
-                  item.list = res.list;
-                }
-              } else if (item.name === '3D') {
-                const data = {
-                  projection: {
-                    image: 1,
-                    _id: 1,
-                    name: 1,
-                  },
-                };
-                const config = {
-                  params: {
-                    current: 1,
-                    pageSize: 1000,
-                  },
-                };
-                const res: any = await axios.post(
-                  '/api/data/le5le3d/list',
-                  data,
-                  config
-                );
-                if (res?.list) {
-                  for (const item of res.list) {
-                    item['3d'] = true;
-                    item['draggable'] = true;
-                  }
-                  item.list = res.list;
-                }
-
-                // initMeta3d();
-              }
-              item.loading = false;
-            }
+const getPrivateGraphics = async () => {
+  for (const item of subGroups.value) {
+    if (!item.list.length) {
+      item.loading = true;
+      if (item.name === '我的组件') {
+        const data = {
+          query: { folder: '' },
+          projection: {
+            image: 1,
+            _id: 1,
+            name: 1,
+            component: 1,
+          },
+        };
+        const config = {
+          params: {
+            current: 1,
+            pageSize: 1000,
+          },
+        };
+        const res: any = await getComponentsList(data, config);
+        if (res?.list) {
+          item.list = res.list;
+        }
+      } else if (item.name === '3D') {
+        const data = {
+          projection: {
+            image: 1,
+            _id: 1,
+            name: 1,
+          },
+        };
+        const config = {
+          params: {
+            current: 1,
+            pageSize: 1000,
+          },
+        };
+        const res: any = await axios.post(
+          '/api/data/le5le3d/list',
+          data,
+          config
+        );
+        if (res?.list) {
+          for (const item of res.list) {
+            item['3d'] = true;
+            item['draggable'] = true;
           }
-          break;
+          item.list = res.list;
+        }
       }
+      item.loading = false;
     }
   }
 };
@@ -925,28 +911,36 @@ const onSearch = () => {
 const searchGraphics = async () => {
   switch (activedGroup.value) {
     case '场景':
+      subGroups.value = [];
       if (search.value) {
         activedPanels[activedGroup.value] = [];
         for (const item of cases) {
           activedPanels[activedGroup.value].push(item.name);
         }
       }
-      for (const item of caseCaches.value) {
+      for (const item of caseCaches) {
         if (search.value) {
           item.visible = searchObjectPinyin(item, 'name', search.value);
         } else {
           item.visible = true;
         }
       }
+      setTimeout(() => {
+        subGroups.value = cases;
+      });
       break;
     case '模板':
-      for (const item of templates.value) {
+      subGroups.value = [];
+      for (const item of templates) {
         if (search.value) {
           item.visible = searchObjectPinyin(item, 'name', search.value);
         } else {
           item.visible = true;
         }
       }
+      setTimeout(() => {
+        subGroups.value = templates;
+      });
       break;
     case '图表':
       subGroups.value = [];
@@ -970,7 +964,6 @@ const searchGraphics = async () => {
       setTimeout(() => {
         subGroups.value = charts;
       });
-
       break;
     case '控件':
       subGroups.value = [];
@@ -997,13 +990,17 @@ const searchGraphics = async () => {
 
       break;
     case '素材':
-      for (const item of materials.value) {
+      subGroups.value = [];
+      for (const item of materials) {
         if (search.value) {
           item.visible = searchObjectPinyin(item, 'name', search.value);
         } else {
           item.visible = true;
         }
       }
+      setTimeout(() => {
+        subGroups.value = materials;
+      });
       break;
     case '图元':
       if (search.value) {
@@ -1012,22 +1009,19 @@ const searchGraphics = async () => {
           activedPanels[activedGroup.value].push(group.name);
         }
       }
-
-      for (const item of pngs.value) {
-        if (search.value) {
-          item.visible = searchObjectPinyin(item, 'name', search.value);
-        } else {
-          item.visible = true;
-        }
-      }
-
-      for (const item of icons.value) {
-        if (search.value) {
-          item.visible = searchObjectPinyin(item, 'name', search.value);
-        } else {
-          item.visible = true;
+      subGroups.value = [];
+      for (const item of pngs) {
+        for (const icon of item.list) {
+          if (search.value) {
+            icon.visible = searchObjectPinyin(icon, 'name', search.value);
+          } else {
+            icon.visible = true;
+          }
         }
       }
+      setTimeout(() => {
+        subGroups.value = pngs;
+      });
       break;
     case '图形':
       subGroups.value = [];
@@ -1054,6 +1048,15 @@ const searchGraphics = async () => {
 
       break;
     case '我的':
+      for (const item of subGroups.value) {
+        for (const elem of item.list) {
+          if (search.value) {
+            elem.visible = searchObjectPinyin(elem, 'name', search.value);
+          } else {
+            elem.visible = true;
+          }
+        }
+      }
       break;
   }
 };
@@ -1074,7 +1077,6 @@ const onFold = () => {
 };
 
 const loadImage = (elem: any) => {
-  console.log(elem.isSvg, elem);
   if (elem.isSvg) {
     makeSvg(elem);
   }