graphics

src/http.ts

@@ -26,6 +26,9 @@ axios.interceptors.response.use(
       return;
     }
     if (response) {
+      if (response.status == undefined) {
+        return response;
+      }
       return response.data;
     }
     return;

src/views/components/Graphics.vue

@@ -18,38 +18,49 @@
         </div>
       </div>
       <div class="list" :class="groupType ? 'two-list' : ''">
-        <t-collapse v-model:value="activedPanel">
+        <t-collapse v-model:value="activedPanel" @change="onChangeGroupPanel">
           <t-collapse-panel
             :value="item.name"
             :header="item.name"
             v-for="item in subGroups"
             :key="item.name"
           >
-            <div
-              class="graphic"
-              v-for="elem in item.list"
-              :draggable="!groupType || groupType >= 10"
-              @dragstart="dragStart($event, elem)"
-              @drag="drag($event, elem)"
-              @dragend="dragEnd()"
-              @click.stop="dragStart($event, elem)"
-              @dblclick.stop="open(elem)"
-            >
-              <t-image v-if="elem.image" :src="elem.image" fit="cover" />
-              <div class="svg-box" v-else-if="elem.svg" v-html="elem.svg" />
-              <svg v-else class="l-icon" aria-hidden="true">
-                <use :xlink:href="'#' + elem.icon"></use>
-              </svg>
-              <p :title="elem.name">{{ elem.name }}</p>
-              <div class="price" v-if="elem.price > 0">￥{{ elem.price }}</div>
-            </div>
-            <div
-              v-if="!item.list || !item.list.length"
-              class="gray center"
-              style="white-space: nowrap; margin-left: 32px"
-            >
-              暂无数据，待更新
+            <div v-if="item.loading">
+              <t-loading
+                text="加载中..."
+                size="small"
+                style="margin-left: 32px; margin-bottom: 4px"
+              />
             </div>
+            <template v-else>
+              <div
+                class="graphic"
+                v-for="elem in item.list"
+                :draggable="!groupType || groupType >= 10"
+                @dragstart="dragStart($event, elem)"
+                @drag="drag($event, elem)"
+                @dragend="dragEnd()"
+                @click.stop="dragStart($event, elem)"
+                @dblclick.stop="open(elem)"
+              >
+                <t-image v-if="elem.image" :src="elem.image" />
+                <div class="svg-box" v-else-if="elem.svg" v-html="elem.svg" />
+                <svg v-else class="l-icon" aria-hidden="true">
+                  <use :xlink:href="'#' + elem.icon"></use>
+                </svg>
+                <p :title="elem.name">{{ elem.name }}</p>
+                <div class="price" v-if="elem.price > 0">
+                  ￥{{ elem.price }}
+                </div>
+              </div>
+              <div
+                v-if="!item.list || !item.list.length"
+                class="gray center"
+                style="white-space: nowrap; margin-left: 32px"
+              >
+                暂无数据，待更新
+              </div>
+            </template>
           </t-collapse-panel>
         </t-collapse>
       </div>
@@ -59,6 +70,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import axios from 'axios';
 
 import { cases, shapes, charts, formComponents } from '@/services/defaults';
@@ -70,6 +82,8 @@ import { deepClone } from '@meta2d/core';
 import { isGif } from '@/services/utils';
 import { autoSave, delAttrs } from '@/services/common';
 
+const router = useRouter();
+
 const activedGroup = ref('图形');
 
 const groups = reactive([
@@ -130,6 +144,7 @@ const groupChange = async (name: string) => {
     case '场景':
       groupType.value = 1;
       subGroups.value = cases;
+      subGroups.value[0].loading = true;
       if (!templates[name + cases[0].name]) {
         templates[name + cases[0].name] = await getCaseProjects(
           name,
@@ -137,10 +152,12 @@ const groupChange = async (name: string) => {
         );
       }
       subGroups.value[0].list = templates[name + cases[0].name];
+      subGroups.value[0].loading = false;
       break;
     case '模板':
       groupType.value = 2;
       subGroups.value = cases;
+      subGroups.value[0].loading = true;
       if (!templates[name + cases[0].name]) {
         templates[name + cases[0].name] = await getCaseProjects(
           name,
@@ -148,6 +165,7 @@ const groupChange = async (name: string) => {
         );
       }
       subGroups.value[0].list = templates[name + cases[0].name];
+      subGroups.value[0].loading = false;
       break;
     case '图表':
       subGroups.value = charts;
@@ -330,6 +348,12 @@ const dragend = (event: any) => {
 
 const open = async (item: any) => {
   autoSave();
+  router.push({
+    path: '/',
+    query: {
+      r: Date.now() + '',
+    },
+  });
 
   const ret: any = await getLe5leV(item._id || item.id);
   for (const k of delAttrs) {
@@ -338,6 +362,33 @@ const open = async (item: any) => {
   meta2d.open(ret);
 };
 
+const onChangeGroupPanel = async (val: string[]) => {
+  if (groupType.value > 0 && groupType.value < 10 && val?.length) {
+    for (const name of val) {
+      if (
+        !templates[activedGroup.value + name] ||
+        !templates[activedGroup.value + name].length
+      ) {
+        for (const item of subGroups.value) {
+          if (item.name === name) {
+            item.loading = true;
+          }
+        }
+        templates[activedGroup.value + name] = await getCaseProjects(
+          activedGroup.value,
+          name
+        );
+        for (const item of subGroups.value) {
+          if (item.name === name) {
+            item.list = templates[activedGroup.value + name];
+            item.loading = false;
+          }
+        }
+      }
+    }
+  }
+};
+
 onMounted(() => {
   groupChange('场景');
   document.addEventListener('dragstart', dragstart, false);
@@ -500,7 +551,7 @@ onUnmounted(() => {
 
     .two-list {
       :deep(.t-collapse-panel__content) {
-        padding: 8px;
+        padding: 0 8px;
         grid-template-columns: 116px 116px;
       }
       .graphic {