From 3c7a4a74ede231ba54a8dac313001d8d56b55484 Mon Sep 17 00:00:00 2001
From: Nevermore <15972699417@163.com>
Date: Fri, 1 Dec 2023 15:58:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=85=A8=E9=83=A8=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/image/types.ts                        |   4 +-
 src/configs/images.ts                         |  32 ++--
 .../ImageComponents/ImageCategory.vue         | 167 +++++++++++-------
 .../CanvasMenu/components/MaterialPool.vue    |   5 +-
 4 files changed, 123 insertions(+), 85 deletions(-)

diff --git a/src/api/image/types.ts b/src/api/image/types.ts
index 2a8627c7..29130179 100644
--- a/src/api/image/types.ts
+++ b/src/api/image/types.ts
@@ -1,5 +1,5 @@
 export interface QueryPgaes {
-  q: string
+  t: string
   page: number
 }
 
@@ -47,7 +47,7 @@ export interface ImagePage {
 export interface ImagePageResult {
   code: number
   msg: string
-  data: ImagePage
+  data: ImageHit[]
 }
 
 export interface ImageCategoryResult {
diff --git a/src/configs/images.ts b/src/configs/images.ts
index c98d4516..a3de219a 100644
--- a/src/configs/images.ts
+++ b/src/configs/images.ts
@@ -262,21 +262,19 @@ export const EmbossMatrix =  [ 1,  1, 1,  1, 0.7, -1, -1,  -1, -1 ]
 // places, animals, industry, computer, food, sports, transportation, travel, buildings, business, music
 export const ImageCategoryInfo = [
   {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: []},
+  {id: 1, name: '自然', type: 'nature', category: [], total: []},
+  {id: 2, name: '科学', type: 'science', category: [], total: []},
+  {id: 3, name: '教育', type: 'education', category: [], total: []},
+  {id: 4, name: '情感', type: 'feelings', category: [], total: []},
+  {id: 5, name: '健康', type: 'health', category: [], total: []},
+  {id: 6, name: '场所', type: 'places', category: [], total: []},
+  {id: 7, name: '动物', type: 'animals', category: [], total: []},
+  {id: 8, name: '工业', type: 'industry', category: [], total: []},
+  {id: 9, name: '计算机', type: 'computer', category: [], total: []},
+  {id: 10, name: '食品', type: 'food', category: [], total: []},
+  {id: 11, name: '体育', type: 'sports', category: [], total: []},
+  {id: 12, name: '交通', type: 'transportation', category: [], total: []},
+  {id: 13, name: '旅游', type: 'travel', category: [], total: []},
+  {id: 14, name: '建筑', type: 'buildings', category: [], total: []},
+  {id: 15, name: '商业', type: 'business', category: [], total: []},
 ]
\ No newline at end of file
diff --git a/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue b/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue
index 67700c48..4c17a556 100644
--- a/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue
+++ b/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue
@@ -1,38 +1,42 @@
 <template>
-  <div class="category-container" ref="containerRef" @scroll="onContainerScroll">
-    <div v-for="item in imageCategoryData" v-show="categoryRef === 'all' || categoryRef === item.type">
-      <el-row class="category-tip mt-5" v-if="categoryRef === 'all'">
-        <el-col :span="5" class="category-name">
-          <el-tag>{{ item.name }}</el-tag>
-        </el-col>
-        <el-col :span="7" class="category-name">
-          <el-button text @click="showTotal(item.type)">全部<IconRight/></el-button>
-        </el-col>
-      </el-row>
-      <el-row class="category-tip mt-5" v-else>
-        <el-col :span="7" class="category-name">
-          <el-button text @click="hideTotal()"><IconLeft/>{{ item.name }}</el-button>
+  <div>
+    <div class="category-container" ref="categoryRef" @scroll="onCategoryScroll" v-if="typeRef === 'all'">
+      <div v-for="item in imageCategoryData">
+        <el-row class="col-tip mt-5" >
+          <el-col :span="5" class="col-name">
+            <el-tag>{{ item.name }}</el-tag>
+          </el-col>
+          <el-col :span="7" class="col-name">
+            <el-button text @click="showTotal(item.type)">全部<IconRight/></el-button>
+          </el-col>
+        </el-row>
+        <el-row class="category-box mt-5" v-loading="item.category.length === 0">
+          <div class="box-image" :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.category">
+            <img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
+          </div>
+        </el-row>
+      </div>
+    </div>
+    <div class="category-container" ref="totalRef" @scroll="onTotalScroll" v-else>
+      <el-row class="col-tip mt-5">
+        <el-col :span="7" class="col-name">
+          <el-button text @click="hideTotal()"><IconLeft/>{{ categoryData.name }}</el-button>
         </el-col>
       </el-row>
-      <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">
+      <el-row class="total-box mt-5" v-loading="categoryData.total.length === 0">
+        <div class="box-image" v-for="(img, index) in categoryData.total" :style="{justifyContent: index % 2 === 0 ? 'flex-start' : 'flex-end'}">
           <img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
         </div>
       </el-row>
     </div>
-    <el-row class="category-bottom">到底了~</el-row>
+    <el-row class="image-bottom">到底了~</el-row>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed } from 'vue'
 import { debounce, throttle } from 'lodash'
-import { getImageCategory } from '@/api/image'
+import { getImageCategory, getImagePages } from '@/api/image'
 import { ImageHit } from '@/api/image/types'
 import { useMainStore } from '@/store'
 import { storeToRefs } from 'pinia'
@@ -41,26 +45,36 @@ const mainStore = useMainStore()
 const { imageCategoryType, imageCategoryData } = storeToRefs(mainStore)
 const { createImageElement } = useHandleCreate()
 
-const containerRef = ref<HTMLDivElement>();
-const containerTop = ref(0)
-const categoryRef = ref('all')
+const categoryRef = ref<HTMLDivElement>();
+const totalRef = ref<HTMLDivElement>();
+const categoryTop = ref(0)
+const typeRef = ref('all')
+const categoryData = computed(() => {
+  return imageCategoryData.value.filter(ele => ele.type === typeRef.value)[0]
+})
+const getImageCategoryData = throttle( async (t: string) => {
+  const res = await getImageCategory({t})
+  if (res && res.data.code === 200) {
+    imageCategoryData.value.filter(item => item.type === t).map(ele => ele.category = res.data.data.slice(0, 2))
+  }
+}, 100, { leading: true, trailing: false  })
 
-const getImageCategoryData = debounce( async (type: string) => {
-  const res = await getImageCategory({t: type})
+const getImagePageData = throttle( async (t: string, page: 1) => {
+  const res = await getImagePages({t, page})
   if (res && res.data.code === 200) {
-    imageCategoryData.value.filter(item => item.type === type).map(ele => ele.category = res.data.data.slice(0, 2))
+    imageCategoryData.value.filter(item => item.type === t).map(ele => ele.total = res.data.data)
   }
-}, 300, { trailing: true })
+}, 100, { leading: true, trailing: false })
 
 const getContainScroll = () => {
   let startIndex = 0, endIndex = 2
-  if (!containerRef.value) 
+  if (!categoryRef.value) 
   return {
     startIndex,
     endIndex
   }
-  const scrollTop = containerRef.value.scrollTop;
-  const containerHeight = containerRef.value.clientHeight;
+  const scrollTop = categoryRef.value.scrollTop;
+  const containerHeight = categoryRef.value.clientHeight;
   const itemHeight = 132;
   startIndex = Math.floor(scrollTop / itemHeight);
   endIndex = Math.ceil((scrollTop + containerHeight) / itemHeight);
@@ -70,7 +84,7 @@ const getContainScroll = () => {
   }
 }
 
-const onContainerScroll = async () => {
+const onCategoryScroll = async () => {
   const { startIndex, endIndex } = getContainScroll()
   for (let i = startIndex; i < endIndex; i++) {
     const item = imageCategoryData.value[i]
@@ -85,18 +99,32 @@ const onContainerScroll = async () => {
   }
 }
 
-const showTotal = (type: string) => {
-  if (!containerRef.value) return
-  containerTop.value = containerRef.value.scrollTop
-  categoryRef.value = type
-  console.log('show-containerTop.value:', containerTop.value)
+const onTotalScroll = async () => {
+  const { startIndex, endIndex } = getContainScroll()
+  for (let i = startIndex; i < endIndex; 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)
+    // }
+  }
+}
+
+const showTotal = async (type: string) => {
+  if (!categoryRef.value) return
+  categoryTop.value = categoryRef.value.scrollTop
+  typeRef.value = type
+  await getImagePageData(type, 1)
 }
 
 const hideTotal = () => {
-  categoryRef.value = 'all'
-  if (!containerRef.value) return
-  console.log('hide-containerTop.value:', containerTop.value)
-  containerRef.value.scrollTo({top: containerTop.value, behavior: 'smooth'})
+  typeRef.value = 'all'
+  if (!categoryRef.value) return
+  categoryRef.value.scrollTo({top: categoryTop.value, behavior: 'smooth'})
 }
 
 const createImage = (item: ImageHit) => {
@@ -104,18 +132,18 @@ const createImage = (item: ImageHit) => {
 }
 
 onMounted(() => {
-  if (!containerRef.value) return
-  onContainerScroll()
+  if (!categoryRef.value) return
+  onCategoryScroll()
 })
 
 </script>
 
 <style lang="scss" scoped>
-.category-tip {
+.col-tip {
   justify-content: space-between;
   align-items: center;
 }
-.category-name {
+.col-name {
   text-align: center;
 }
 .mt-5 {
@@ -126,29 +154,42 @@ onMounted(() => {
   flex-wrap: nowrap;
   overflow: hidden;
   height: 100px;
-}
-.box-image {
-  display: flex;
-  align-items: center;
-  padding: 0 2px;
-  &:first-child {
-    justify-content: flex-start;
-  }
-  &:last-child {
-    justify-content: flex-end;
-  }
-  img {
-    max-width: 100%;
-    cursor: pointer;
+  .box-image {
+    display: flex;
+    align-items: center;
+    padding: 0 2px;
+    &:first-child {
+      justify-content: flex-start;
+    }
+    &:last-child {
+      justify-content: flex-end;
+    }
+    img {
+      max-width: 100%;
+      cursor: pointer;
+    }
   }
-  
 }
+
 .category-container {
   overflow-y: scroll;
   height: 100vh;
   align-items: center;
 }
-.category-bottom {
+.total-box {
+  align-items: center;
+  height: 100px;
+  .box-image {
+    width: 50%;
+    height: 120px;
+    overflow: hidden;
+    display: flex;
+    img {
+      max-width: 100%;
+    }
+  }
+}
+.image-bottom {
   justify-content: center;
   padding-top: 20px;
   margin-bottom: 130px;
diff --git a/src/views/Editor/CanvasMenu/components/MaterialPool.vue b/src/views/Editor/CanvasMenu/components/MaterialPool.vue
index 9da82c7a..bf1cd9ba 100644
--- a/src/views/Editor/CanvasMenu/components/MaterialPool.vue
+++ b/src/views/Editor/CanvasMenu/components/MaterialPool.vue
@@ -15,7 +15,7 @@
       </el-col>
     </el-row>
     <div>
-    <el-tabs v-model="activeMaterial" class="layout-tabs">
+    <el-tabs v-model="activeMaterial" class="layout-tabs material-tab">
       <el-tab-pane label="推荐素材" name="data">
         <LinePool @select="(line: LinePoolItem) => drawLine(line)"/>
         <PathPool @select="(path: PathPoolItem) => drawPath(path)"/>
@@ -112,8 +112,7 @@ const drawMaterial = async (files: File[]) => {
   justify-content: space-around;
   width: 100%;
 }
-
-.el-tabs .el-tabs__content {
+.material-tab .el-tabs__content {
   height: 100vh;
   overflow-y: scroll;
 }