更新图片api防抖

dromara · Dec 1, 2023 · 518c624 · 518c624
1 parent 2f74bb6
commit 518c624
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/src/configs/images.ts b/src/configs/images.ts
@@ -261,22 +261,22 @@ export const EmbossMatrix =  [ 1,  1, 1,  1, 0.7, -1, -1,  -1, -1 ]
 // backgrounds, fashion, nature, science, education, feelings, health, people, religion, 
 // places, animals, industry, computer, food, sports, transportation, travel, buildings, business, music
 export const ImageCategoryInfo = [
-  {id: 0, name: '背景', type: 'backgrounds', data: []},
-  {id: 1, name: '时尚', type: 'fashion', data: []},
-  {id: 2, name: '自然', type: 'nature', data: []},
-  {id: 3, name: '科学', type: 'science', data: []},
-  {id: 4, name: '教育', type: 'education', data: []},
-  {id: 5, name: '情感', type: 'feelings', data: []},
-  {id: 6, name: '健康', type: 'health', data: []},
-  {id: 7, name: '人物', type: 'people', data: []},
-  {id: 9, name: '场所', type: 'places', data: []},
-  {id: 10, name: '动物', type: 'animals', data: []},
-  {id: 11, name: '工业', type: 'industry', data: []},
-  {id: 12, name: '计算机', type: 'computer', data: []},
-  {id: 13, name: '食品', type: 'food', data: []},
-  {id: 14, name: '体育', type: 'sports', data: []},
-  {id: 15, name: '交通', type: 'transportation', data: []},
-  {id: 16, name: '旅游', type: 'travel', data: []},
-  {id: 17, name: '建筑', type: 'buildings', data: []},
-  {id: 18, name: '商业', type: 'business', data: []},
+  {id: 0, name: '背景', type: 'backgrounds', category: [], total: []},
+  {id: 1, name: '时尚', type: 'fashion', category: [], total: []},
+  {id: 2, name: '自然', type: 'nature', category: [], total: []},
+  {id: 3, name: '科学', type: 'science', category: [], total: []},
+  {id: 4, name: '教育', type: 'education', category: [], total: []},
+  {id: 5, name: '情感', type: 'feelings', category: [], total: []},
+  {id: 6, name: '健康', type: 'health', category: [], total: []},
+  {id: 7, name: '人物', type: 'people', category: [], total: []},
+  {id: 9, name: '场所', type: 'places', category: [], total: []},
+  {id: 10, name: '动物', type: 'animals', category: [], total: []},
+  {id: 11, name: '工业', type: 'industry', category: [], total: []},
+  {id: 12, name: '计算机', type: 'computer', category: [], total: []},
+  {id: 13, name: '食品', type: 'food', category: [], total: []},
+  {id: 14, name: '体育', type: 'sports', category: [], total: []},
+  {id: 15, name: '交通', type: 'transportation', category: [], total: []},
+  {id: 16, name: '旅游', type: 'travel', category: [], total: []},
+  {id: 17, name: '建筑', type: 'buildings', category: [], total: []},
+  {id: 18, name: '商业', type: 'business', category: [], total: []},
 ]
diff --git a/src/types/elements.ts b/src/types/elements.ts
@@ -226,5 +226,6 @@ export interface ImageCategoryData {
   id: number
   type: string
   name: string
-  data: ImageHit[]
+  category: ImageHit[]
+  total: ImageHit[]
 }
diff --git a/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue b/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue
@@ -14,8 +14,13 @@
           <el-button text @click="hideTotal()"><IconLeft/>{{ item.name }}</el-button>
         </el-col>
       </el-row>
-      <el-row class="category-box mt-5" v-loading="item.data.length === 0">
-        <div :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.data" class="box-image">
+      <el-row class="category-box mt-5" v-loading="item.category.length === 0" v-if="categoryRef === 'all'">
+        <div :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.category" class="box-image">
+          <img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
+        </div>
+      </el-row>
+      <el-row class="category-box mt-5" v-loading="item.total.length === 0" v-else>
+        <div :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.total" class="box-image">
           <img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
         </div>
       </el-row>
@@ -26,7 +31,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { ImageCategoryInfo } from '@/configs/images'
+import { debounce, throttle } from 'lodash'
 import { getImageCategory } from '@/api/image'
 import { ImageHit } from '@/api/image/types'
 import { useMainStore } from '@/store'
@@ -40,12 +45,12 @@ const containerRef = ref<HTMLDivElement>();
 const containerTop = ref(0)
 const categoryRef = ref('all')
 
-const getImageCategoryData = async (type: string) => {
+const getImageCategoryData = debounce( async (type: string) => {
   const res = await getImageCategory({t: type})
   if (res && res.data.code === 200) {
-    imageCategoryData.value.filter(item => item.type === type).map(ele => ele.data = res.data.data.slice(0, 2))
+    imageCategoryData.value.filter(item => item.type === type).map(ele => ele.category = res.data.data.slice(0, 2))
   }
-}
+}, 300, { trailing: true })
 
 const getContainScroll = () => {
   let startIndex = 0, endIndex = 2
@@ -68,12 +73,15 @@ const getContainScroll = () => {
 const onContainerScroll = async () => {
   const { startIndex, endIndex } = getContainScroll()
   for (let i = startIndex; i < endIndex; i++) {
-    const item = ImageCategoryInfo[i]
+    const item = imageCategoryData.value[i]
     if (!item) return
     if (!imageCategoryType.value.includes(item.type)) {
       imageCategoryType.value.push(item.type)
       await getImageCategoryData(item.type)
     }
+    if (item.category.length === 0) {
+      await getImageCategoryData(item.type)
+    }
   }
 }