更新全部图片

dromara · Dec 1, 2023 · 2f74bb6 · 2f74bb6
1 parent 91926a8
commit 2f74bb6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 17 deletions.
diff --git a/src/api/image/types.ts b/src/api/image/types.ts
@@ -13,7 +13,7 @@ export enum ImageType {
   vector,
 }
 
-export interface ImageHits {
+export interface ImageHit {
   id: number
   pageURL: string
   type: ImageType
@@ -41,7 +41,7 @@ export interface ImageHits {
 export interface ImagePage {
   total: number
   totalHits: number
-  hits: ImageHits[]
+  hits: ImageHit[]
 }
 
 export interface ImagePageResult {
@@ -53,5 +53,5 @@ export interface ImagePageResult {
 export interface ImageCategoryResult {
   code: number
   msg: string
-  data: ImageHits[]
+  data: ImageHit[]
 }
diff --git a/src/types/elements.ts b/src/types/elements.ts
@@ -1,4 +1,5 @@
-import { ImageHits } from "@/api/image/types"
+import { ImageHit } from "@/api/image/types"
+
 export const enum ElementNames {
   TEXTBOX = 'textbox',
   TEXT = 'text',
@@ -225,5 +226,5 @@ export interface ImageCategoryData {
   id: number
   type: string
   name: string
-  data: ImageHits[]
+  data: ImageHit[]
 }
diff --git a/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue b/src/views/Editor/CanvasMenu/components/ImageComponents/ImageCategory.vue
@@ -1,17 +1,22 @@
 <template>
   <div class="category-container" ref="containerRef" @scroll="onContainerScroll">
-    <div v-for="item in imageCategoryData" >
-      <el-row class="category-tip mt-5">
-        <el-col :span="5" class="category-name">{{ item.name }}</el-col>
+    <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>
-            全部<IconRight/>
-          </el-button>
+          <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 <= 150 ? img.previewWidth / img.previewHeight * 150 : img.previewWidth) + 'px'}" v-for="img in item.data" class="box-image">
-          <img :src="img.previewURL" :alt="img.tags">
+        <div :style="{width: (img.previewHeight <= 120 ? img.previewWidth / img.previewHeight * 120 : img.previewWidth) + 'px'}" v-for="img in item.data" class="box-image">
+          <img :src="img.previewURL" :alt="img.tags" @click="createImage(img)">
         </div>
       </el-row>
     </div>
@@ -23,12 +28,17 @@
 import { onMounted, ref } from 'vue'
 import { ImageCategoryInfo } from '@/configs/images'
 import { getImageCategory } from '@/api/image'
+import { ImageHit } from '@/api/image/types'
 import { useMainStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import useHandleCreate from '@/hooks/useHandleCreate'
 const mainStore = useMainStore()
 const { imageCategoryType, imageCategoryData } = storeToRefs(mainStore)
+const { createImageElement } = useHandleCreate()
 
 const containerRef = ref<HTMLDivElement>();
+const containerTop = ref(0)
+const categoryRef = ref('all')
 
 const getImageCategoryData = async (type: string) => {
   const res = await getImageCategory({t: type})
@@ -65,11 +75,27 @@ const onContainerScroll = async () => {
       await getImageCategoryData(item.type)
     }
   }
-  // console.log('categoryVisible:', categoryVisible.value)
+}
+
+const showTotal = (type: string) => {
+  if (!containerRef.value) return
+  containerTop.value = containerRef.value.scrollTop
+  categoryRef.value = type
+  console.log('show-containerTop.value:', containerTop.value)
+}
+
+const hideTotal = () => {
+  categoryRef.value = 'all'
+  if (!containerRef.value) return
+  console.log('hide-containerTop.value:', containerTop.value)
+  containerRef.value.scrollTo({top: containerTop.value, behavior: 'smooth'})
+}
+
+const createImage = (item: ImageHit) => {
+  createImageElement(item.largeImageURL)
 }
 
 onMounted(() => {
-  // containerRef.value.addEventListener('scroll', onContainerScroll)
   if (!containerRef.value) return
   onContainerScroll()
 })

diff --git a/vite.config.ts b/vite.config.ts
@@ -19,8 +19,8 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
       port: 5173,
       proxy: {
         '/api': {
-          target: 'https://yft.design',
-          // target: 'http://localhost:9292',
+          // target: 'https://yft.design',
+          target: 'http://localhost:9292',
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp('^'), ''),
         },