更新动态获取图片api

src/api/image/index.ts

@@ -10,10 +10,10 @@ export function getImagePages(params?: QueryPgaes): AxiosPromise<ImagePageResult
   });
 }
 
-export function getImageCategory(params: QueryCategory): AxiosPromise<ImageCategoryResult> {
+export function getImageCategory(params?: QueryCategory): AxiosPromise<ImageCategoryResult> {
   return request({
     url: 'api/image/category',
     method: 'get',
-    params,
+    params
   });
 }

src/api/image/types.ts

@@ -53,5 +53,5 @@ export interface ImagePageResult {
 export interface ImageCategoryResult {
   code: number
   msg: string
-  data: ImagePage
+  data: ImageHits[]
 }

src/configs/images.ts

@@ -261,23 +261,23 @@ 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'},
-  {id: 1, name: '时尚', type: 'fashion'},
-  {id: 2, name: '自然', type: 'nature'},
-  {id: 3, name: '科学', type: 'science'},
-  {id: 4, name: '教育', type: 'education'},
-  {id: 5, name: '情感', type: 'feelings'},
-  {id: 6, name: '健康', type: 'health'},
-  {id: 7, name: '人物', type: 'people'},
-  {id: 8, name: '宗教', type: 'religion'},
-  {id: 9, name: '场所', type: 'places'},
-  {id: 9, name: '动物', type: 'animals'},
-  {id: 9, name: '工业', type: 'industry'},
-  {id: 9, name: '计算机', type: 'computer'},
-  {id: 9, name: '食品', type: 'food'},
-  {id: 9, name: '体育', type: 'sports'},
-  {id: 9, name: '交通', type: 'transportation'},
-  {id: 9, name: '旅游', type: 'travel'},
-  {id: 9, name: '建筑', type: 'buildings'},
-  {id: 9, name: '商业', type: 'business'},
+  {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: 8, name: '宗教', type: 'religion', 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: []},
 ]

src/store/modules/main.ts

@@ -2,9 +2,10 @@ import { Object as FabricObject } from 'fabric'
 import { customAlphabet } from 'nanoid'
 import { defineStore } from 'pinia'
 import { SYS_FONTS } from '@/configs/fonts'
+import { ImageCategoryInfo } from '@/configs/images'
 import { getSupportFonts } from '@/utils/fonts'
 import { CanvasElement } from '@/types/canvas'
-import { RightStates, PointElement, ImageCategory } from '@/types/elements'
+import { RightStates, PointElement, ImageCategoryData } from '@/types/elements'
 import { ExportTypes, PoolType, SystemFont } from '@/types/common'
 import useCanvas from '@/views/Canvas/useCanvas'
 
@@ -15,7 +16,8 @@ export interface MainState {
   clonedObject: FabricObject | undefined
   currentPoint: PointElement | null
   rightState: RightStates
-  imageCategory: ImageCategory[]
+  imageCategoryType: string[]
+  imageCategoryData: ImageCategoryData[]
   activeElementIdList: string[]
   handleElementId: string
   sizeMode: number
@@ -44,7 +46,8 @@ export const useMainStore = defineStore('main', {
     leavedObject: undefined,
     currentPoint: null,
     rightState: RightStates.ELEMENT_WORKER,
-    imageCategory: [],
+    imageCategoryType: [],
+    imageCategoryData: ImageCategoryInfo,
     activeElementIdList: [], // 被选中的元素ID集合，包含 handleElementId
     handleElementId: '', // 正在操作的元素ID
     sizeMode: 0,  // 模板样式

src/types/elements.ts

@@ -1,4 +1,4 @@
-import { ImagePage } from "@/api/image/types"
+import { ImageHits } from "@/api/image/types"
 export const enum ElementNames {
   TEXTBOX = 'textbox',
   TEXT = 'text',
@@ -221,7 +221,9 @@ export const enum LayerCommand {
   BOTTOM = 'bottom',
 }
 
-export interface ImageCategory {
+export interface ImageCategoryData {
+  id: number
   type: string
-  data: ImagePage
+  name: string
+  data: ImageHits[]
 }

src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
-    <div v-for="item in ImageCategoryInfo">
+  <div class="category-container" ref="containerRef" @scroll="onContainerScroll">
+    <div v-for="item in imageCategoryData" >
       <el-row class="category-tip">
-        <el-col :span="4" class="category-name">{{ item.name }}</el-col>
-        <el-col :span="5" class="category-name">
-          <el-button type="text">
+        <el-col :span="5" class="category-name">{{ item.name }}</el-col>
+        <el-col :span="7" class="category-name">
+          <el-button text>
             全部<IconRight/>
           </el-button>
         </el-col>
@@ -20,24 +20,55 @@
 import { onMounted, ref } from 'vue'
 import { ImageCategoryInfo } from '@/configs/images'
 import { getImageCategory } from '@/api/image'
-import { useMainStore } from '@/store';
-import { storeToRefs } from 'pinia';
+import { useMainStore } from '@/store'
+import { storeToRefs } from 'pinia'
 const mainStore = useMainStore()
-const { imageCategory } = storeToRefs(mainStore)
-const getImageCategoryData = () => {
-  ImageCategoryInfo.forEach(async (item) => {
-    const res = await getImageCategory({t: item.type})
-    imageCategory.value.push({
-      type: item.type,
-      data: res.data.data
-    })
-  })
+const { imageCategoryType, imageCategoryData } = storeToRefs(mainStore)
+
+const containerRef = ref<HTMLDivElement>();
+
+const getImageCategoryData = 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)
+  }
 }
 
-onMounted(() => {
-  if (!imageCategory.value) {
-    getImageCategoryData()
+const getContainScroll = () => {
+  let startIndex = 0, endIndex = 2
+  if (!containerRef.value) 
+  return {
+    startIndex,
+    endIndex
+  }
+  const scrollTop = containerRef.value.scrollTop;
+  const containerHeight = containerRef.value.clientHeight;
+  const itemHeight = 182;
+  startIndex = Math.floor(scrollTop / itemHeight);
+  endIndex = Math.ceil((scrollTop + containerHeight) / itemHeight);
+  return {
+    startIndex,
+    endIndex
+  }
+}
+
+const onContainerScroll = async () => {
+  const { startIndex, endIndex } = getContainScroll()
+  for (let i = startIndex; i < endIndex; i++) {
+    const item = ImageCategoryInfo[i]
+    if (!item) return
+    if (!imageCategoryType.value.includes(item.type)) {
+      imageCategoryType.value.push(item.type)
+      await getImageCategoryData(item.type)
+    }
   }
+  // console.log('categoryVisible:', categoryVisible.value)
+}
+
+onMounted(() => {
+  // containerRef.value.addEventListener('scroll', onContainerScroll)
+  if (!containerRef.value) return
+  onContainerScroll()
 })
 
 </script>
@@ -53,4 +84,8 @@ onMounted(() => {
 .category-box {
   height: 150px;
 }
+.category-container {
+  overflow-y: scroll;
+  height: 100vh;
+}
 </style>