feat: photo revision

src/components/modules/panel/wrap/BgImgListWrap.vue

@@ -3,7 +3,7 @@
  * @Date: 2021-08-27 15:16:07
  * @Description: 背景图
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 00:21:34
+ * @LastEditTime: 2023-10-04 21:25:54
 -->
 <template>
   <div class="wrap">
@@ -12,9 +12,9 @@
     </div>
     <ul v-if="showList" v-infinite-scroll="loadData" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
       <div class="list">
-        <el-tooltip v-for="(item, i) in bgList" :key="i + 'i'" :content="`<p style='max-width:140px;'><b>${item.description}</b></p><p>@${item.author}</p>`" offset="0" effect="light" placement="top-start" hide-after="0" :enterable="false" raw-content>
+        <imageTip v-for="(item, i) in bgList" :key="i + 'i'" :detail="item">
           <el-image class="list__img" :src="item.thumb" fit="cover" lazy loading="lazy" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
-        </el-tooltip>
+        </imageTip>
       </div>
       <div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
       <div v-show="loadDone" class="loading">全部加载完毕</div>

src/components/modules/panel/wrap/CompListWrap.vue

@@ -3,7 +3,7 @@
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表，主要用于文字组合列表
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 00:23:04
+ * @LastEditTime: 2023-10-04 12:34:13
 -->
 <template>
   <div class="wrap">
@@ -15,23 +15,18 @@
       </el-input>
     </div>
     <el-divider content-position="left">推荐组件</el-divider> -->
-    <div v-show="!currentCategory" class="content__wrap">
+    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
-      <div v-for="(t, ti) in types" :key="ti + 't'">
+      <template v-slot="{ index }">
-        <div v-if="showList[ti]?.length > 0" class="types__header" @click="selectTypes(t)">
-          <span style="flex: 1">{{ t.name }}</span>
-          <span class="types__header-more">全部<i class="iconfont icon-right"></i></span>
-        </div>
-        <div v-else class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
         <div class="list-wrap">
-          <div v-for="(item, i) in showList[ti]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+          <div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
             <el-image class="list__img-thumb" :src="item.cover" fit="contain" lazy loading="lazy"></el-image>
           </div>
         </div>
-      </div>
+      </template>
-    </div>
+    </classHeader>
 
     <ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-      <span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span>
+      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
       <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
         <div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
           <!-- <edit-model :isComp="true" @action="action($event, item, i)"> -->
@@ -53,13 +48,14 @@ import { mapActions } from 'vuex'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
+
 const dragHelper = new DragHelper()
 let isDrag = false
 let startPoint = { x: 99999, y: 99999 }
 let tempDetail: any = null
 
 export default defineComponent({
-  // components: { ElDivider },
+  components: {},
   setup(props) {
     const state = reactive({
       loading: false,
@@ -75,7 +71,6 @@ export default defineComponent({
     onMounted(async () => {
       if (state.types.length <= 0) {
         const types = await api.material.getKinds({ type: 3 })
-        types.shift()
         state.types = types
         for (const iterator of types) {
           const { list } = await api.home.getCompList({
@@ -259,76 +254,9 @@ export default defineComponent({
   font-size: 14px;
   color: #999;
 }
-
-.types {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 10px 0 0 6px;
-  &__item {
-    position: relative;
-    width: 64px;
-    // height: 44px;
-    height: 64px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    font-weight: 600;
-    font-size: 13px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin: 8px 4px 0 4px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
-    opacity: 0.5;
-  }
-  &--select {
-    opacity: 1;
-  }
-  &__header {
-    user-select: none;
-    cursor: pointer;
-    margin-bottom: 12px;
-    font-size: 13px;
-    color: #333333;
-    display: flex;
-    align-items: center;
-    &-more {
-      display: flex;
-      align-items: center;
-      color: #a0a0a0;
-      font-size: 13px;
-    }
-    &-back {
-      cursor: pointer;
-      padding: 0 0 0 0.6rem;
-      display: flex;
-      align-items: center;
-      color: #333;
-      font-size: 16px;
-      height: 2.9rem;
-      position: absolute;
-      z-index: 2;
-      background: #ffffff;
-      width: 320px;
-      .icon-right {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
 .list-wrap {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1.8rem;
 }
-.content {
-  &__wrap {
-    padding: 0.5rem 1rem;
-    height: 100%;
-    overflow: auto;
-    padding-bottom: 100px;
-  }
-}
 </style>

src/components/modules/panel/wrap/GraphListWrap.vue

@@ -3,34 +3,30 @@
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 00:23:52
+ * @LastEditTime: 2023-10-04 12:34:27
 -->
 <template>
   <div class="wrap">
     <search-header v-model="searchKeyword" type="none" @change="searchChange" />
+    <div style="height: 0.5rem" />
     <!-- <div class="types">
       <div v-for="(t, ti) in types" :key="ti + 't'" :style="{ backgroundColor: colors[ti] }" :class="['types__item', { 'types--select': currentType === t.id }]" @click="selectType(t)"></div>
     </div> -->
     <!-- <div class="tags">
       <el-check-tag v-for="(t2, t2i) in sub" :key="t2i + 't2'" :checked="t2.id === currentCheck" class="tags__item" @click="tagsChange(t2.id)">{{ t2.name }}</el-check-tag>
     </div> -->
-    <div v-show="!currentCategory" class="content__wrap">
+    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
-      <div v-for="(t, ti) in types" :key="ti + 't'">
+      <template v-slot="{ index }">
-        <div v-if="showList[ti]?.length > 0" class="types__header" @click="selectTypes(t)">
-          <span style="flex: 1">{{ t.name }}</span>
-          <span class="types__header-more">全部<i class="iconfont icon-right"></i></span>
-        </div>
-        <div v-else class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
         <div class="list-wrap">
-          <div v-for="(item, i) in showList[ti]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+          <div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
             <el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
           </div>
         </div>
-      </div>
+      </template>
-    </div>
+    </classHeader>
 
     <ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-      <span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span>
+      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
       <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
         <div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
           <el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
@@ -50,11 +46,13 @@ import wSvg from '../../widgets/wSvg/wSvg.vue'
 import { mapActions, mapGetters } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
+
 let isDrag = false
 let startPoint = { x: 99999, y: 99999 }
 const dragHelper = new DragHelper()
 
 export default defineComponent({
+  components: {},
   props: ['active'],
   setup(props) {
     const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
@@ -76,7 +74,6 @@ export default defineComponent({
     onMounted(async () => {
       if (state.types.length <= 0) {
         const types = await api.material.getKinds({ type: 2 })
-        types.shift()
         state.types = types
         for (const iterator of types) {
           const { list } = await api.material.getList({
@@ -200,65 +197,6 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 }
-.types {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 10px 0 0 6px;
-  &__item {
-    position: relative;
-    width: 64px;
-    // height: 44px;
-    height: 64px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    font-weight: 600;
-    font-size: 13px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin: 8px 4px 0 4px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
-    opacity: 0.5;
-  }
-  &--select {
-    opacity: 1;
-  }
-  &__header {
-    user-select: none;
-    cursor: pointer;
-    margin-bottom: 12px;
-    font-size: 13px;
-    color: #333333;
-    display: flex;
-    align-items: center;
-    &-more {
-      display: flex;
-      align-items: center;
-      color: #a0a0a0;
-      font-size: 13px;
-    }
-    &-back {
-      cursor: pointer;
-      padding: 0 0 0 0.6rem;
-      display: flex;
-      align-items: center;
-      color: #333;
-      font-size: 16px;
-      height: 2.9rem;
-      position: absolute;
-      z-index: 2;
-      background: #ffffff;
-      width: 320px;
-      .icon-right {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
-
 .tags {
   padding: 20px 0 0 10px;
   &__item {
@@ -309,13 +247,4 @@ export default defineComponent({
   font-size: 14px;
   color: #999;
 }
-
-.content {
-  &__wrap {
-    padding: 1rem;
-    height: 100%;
-    overflow: auto;
-    padding-bottom: 100px;
-  }
-}
 </style>

src/components/modules/panel/wrap/PhotoListWrap.vue

@@ -1,80 +1,122 @@
 <!--
  * @Author: ShawnPhang
  * @Date: 2022-02-11 18:48:23
- * @Description:  
+ * @Description: 照片图库 Form:Unsplash无版权图片
- * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-01 14:18:14
+ * @LastEditTime: 2023-10-04 19:04:39
 -->
 <template>
   <div class="wrap">
     <search-header type="none" @change="searchChange" />
+    <div style="height: 0.5rem" />
+    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+      <template v-slot="{ index }">
+        <photo-list :isShort="true" :listData="showList[index]" @load="getDataList" @drag="dragStart($event, showList[index])" @select="selectImg($event, showList[index])" />
+      </template>
+    </classHeader>
+    <div v-if="currentCategory">
+      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+      <br /><br /><br />
+      <div style="margin: 0 1rem; height: 100vh">
         <photo-list :isDone="loadDone" :listData="recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
       </div>
+    </div>
+  </div>
 </template>
 
 <script>
 // 图片列表
 const NAME = 'img-list-wrap'
-
+import { toRefs, reactive, computed, onMounted } from 'vue'
 import wImage from '../../widgets/wImage/wImage.vue'
 import api from '@/api'
-import { mapActions, mapGetters } from 'vuex'
+import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
-// import imgList from './components/imgList.vue'
 
 export default {
   name: NAME,
-  // components: { imgList },
+  components: {},
   props: ['active'],
-  data() {
+  setup() {
-    return {
+    const store = useStore()
+    const state = reactive({
       recommendImgList: [],
-      // loading: false,
       loadDone: false,
       page: 0,
-    }
+      currentCategory: null,
-  },
+      types: [],
-  computed: {
+      showList: [],
-    ...mapGetters(['dPage']),
+    })
-  },
+    const dPage = computed(() => store.getters.dPage)
+    let loading = false
 
-  mounted() {
+    onMounted(async () => {
-    this.getDataList()
+      if (state.types.length <= 0) {
-  },
+        const types = await api.material.getKinds({ type: 4 })
-  methods: {
+        state.types = types
-    ...mapActions(['addWidget']),
+        for (const iterator of types) {
-    async getDataList() {
+          const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
-      if (this.loadDone || this.loading) {
+          state.showList.push(list)
-        return
         }
-      this.loading = true
+      }
-      this.page += 1
+    })
-      let { list = [], total } = await api.material.getImagesList({ page: this.page, pageSize: 30 })
+
-      list.length <= 0 ? (this.loadDone = true) : (this.recommendImgList = this.recommendImgList.concat(list))
+    const selectImg = async (index, list) => {
-      setTimeout(() => {
+      const item = list ? list[index] : state.recommendImgList[index]
-        this.loading = false
+      store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      }, 100)
-    },
-    async selectImg(index) {
-      const item = this.recommendImgList[index]
-      this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
       let setting = JSON.parse(JSON.stringify(wImage.setting))
       const img = await setImageData(item) // await getImage(item.url)
       setting.width = img.width
       setting.height = img.height // parseInt(100 / item.value.ratio, 10)
       setting.imgUrl = item.url
-      const { width: pW, height: pH } = this.dPage
+      const { width: pW, height: pH } = dPage
       setting.left = pW / 2 - img.width / 2
       setting.top = pH / 2 - img.height / 2
-      this.addWidget(setting)
+      store.dispatch('addWidget', setting)
-    },
+    }
-    dragStart(index) {
+
-      const item = this.recommendImgList[index]
+    const getDataList = async () => {
-      this.$store.commit('selectItem', { data: { value: item }, type: 'image' })
+      if (state.loadDone || loading) {
-    },
+        return
-    searchChange(e) {
+      }
+      loading = true
+      state.page += 1
+      let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory.id, page: state.page, pageSize: 30 })
+      list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
+      setTimeout(() => {
+        loading = false
+      }, 100)
+    }
+
+    const dragStart = (index, list) => {
+      const item = list ? list[index] : state.recommendImgList[index]
+      store.commit('selectItem', { data: { value: item }, type: 'image' })
+    }
+
+    const searchChange = (e) => {
       console.log(e)
-    },
+    }
+
+    const selectTypes = (item) => {
+      state.currentCategory = item
+      getDataList()
+    }
+    const back = () => {
+      state.currentCategory = null
+      state.page = 0
+      state.loadDone = false
+      state.recommendImgList = []
+    }
+
+    return {
+      ...toRefs(state),
+      selectImg,
+      getDataList,
+      dragStart,
+      searchChange,
+      selectTypes,
+      back,
+    }
   },
 }
 </script>

src/components/modules/panel/wrap/ToolsListWrap.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-11 18:48:23
  * @Description: 组件列表
- * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-01 14:17:46
+ * @LastEditTime: 2023-10-04 00:43:54
 -->
 <template>
   <div class="wrap">
@@ -55,11 +55,6 @@ export default {
       }
       this.loading = true
       this.page += 1
-      // let { list = [], total } = await api.material.getImagesList({ page: this.page, pageSize: 30 })
-      // list.length <= 0 ? (this.loadDone = true) : (this.recommendImgList = this.recommendImgList.concat(list))
-      // setTimeout(() => {
-      //   this.loading = false
-      // }, 100)
     },
     addQrcode() {
       this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择

src/components/modules/panel/wrap/UserWrap.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-13 22:18:35
  * @Description: 我的
- * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-01 14:17:23
+ * @LastEditTime: 2023-10-04 19:11:12
 -->
 <template>
   <div class="wrap">
@@ -11,13 +11,15 @@
       <el-tab-pane label="资源管理" name="pics"> </el-tab-pane>
       <el-tab-pane label="我的作品" name="design"> </el-tab-pane>
     </el-tabs>
-    <div v-show="tabActiveName === 'pics'" class="wrap">
+    <div v-show="tabActiveName === 'pics'">
       <uploader v-model="percent" class="upload" @done="uploadDone">
         <el-button class="upload-btn" plain>上传图片 <i class="iconfont icon-upload" /></el-button>
       </uploader>
       <el-button class="upload-btn upload-psd" plain type="primary" @click="openPSD">上传 PSD 模板</el-button>
+      <div style="margin: 1rem; height: 100vh">
         <photo-list ref="imgListRef" :edit="editOptions" :isDone="isDone" :listData="imgList" @load="load" @drag="dragStart" @select="selectImg" />
       </div>
+    </div>
     <div v-show="tabActiveName === 'design'" class="wrap">
       <ul ref="listRef" v-infinite-scroll="loadDesign" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
         <img-water-fall :listData="designList" @select="selectDesign" />

src/components/modules/panel/wrap/components/classHeader.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2023-10-04 02:04:04
+ * @Description: 列表分类头部
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-04 02:30:59
+-->
+<template>
+  <div v-if="!isBack" class="content__wrap">
+    <div v-for="(t, ti) in types" :key="ti + 't'">
+      <div class="types__header" @click="select(t)">
+        <span style="flex: 1">{{ t.name }}</span>
+        <span class="types__header-more">全部<i class="iconfont icon-right"></i></span>
+      </div>
+      <slot :index="ti" />
+    </div>
+  </div>
+  <span v-else class="types__header-back" @click="back">
+    <i class="iconfont icon-right"></i>
+    <slot />
+  </span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: ['types', 'isBack'],
+  emits: ['select', 'back'],
+  setup(props, { emit }) {
+    const select = (item: any) => {
+      emit('select', item)
+    }
+    const back = () => {
+      emit('back')
+    }
+    return { select, back }
+  },
+})
+</script>
+
+<style lang="less" scoped>
+.content {
+  &__wrap {
+    padding: 0.5rem 1rem;
+    height: 100%;
+    overflow: auto;
+    padding-bottom: 100px;
+  }
+}
+.types {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px 0 0 6px;
+  &__item {
+    position: relative;
+    width: 64px;
+    // height: 44px;
+    height: 64px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-weight: 600;
+    font-size: 13px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 8px 4px 0 4px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 25%);
+    opacity: 0.5;
+  }
+  &--select {
+    opacity: 1;
+  }
+  &__header {
+    user-select: none;
+    cursor: pointer;
+    margin-bottom: 12px;
+    font-size: 13px;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    &-more {
+      display: flex;
+      align-items: center;
+      color: #a0a0a0;
+      font-size: 13px;
+    }
+    &-back {
+      cursor: pointer;
+      padding: 0 0 0 0.6rem;
+      display: flex;
+      align-items: center;
+      color: #333;
+      font-size: 16px;
+      height: 2.9rem;
+      position: absolute;
+      z-index: 2;
+      background: #ffffff;
+      width: 320px;
+      .icon-right {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+</style>

src/components/modules/panel/wrap/components/imageTip.vue

@@ -0,0 +1,31 @@
+<!--
+ * @Author: ShawnPhang
+ * @Date: 2023-10-04 19:12:40
+ * @Description: 图片描述ToolTip
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-04 22:21:22
+-->
+<template>
+  <el-tooltip :offset="1" effect="light" placement="bottom-start" :hide-after="0" :enterable="false" raw-content>
+    <template #content>
+      <p style="max-width: 140px">
+        <b>{{ detail.description }}</b>
+      </p>
+      <p>@{{ detail.author }}</p>
+    </template>
+    <slot />
+  </el-tooltip>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    detail: {},
+  },
+  setup() {
+    return {}
+  },
+})
+</script>

src/components/modules/panel/wrap/components/photoList.vue

@@ -3,19 +3,24 @@
  * @Date: 2022-02-23 15:48:52
  * @Description: 图片列表组件 Bookshelf Layout 
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 00:20:31
+ * @LastEditTime: 2023-10-04 22:05:21
 -->
 <template>
-  <ul ref="listRef" class="img-list-wrap" style="overflow: auto" @scroll="scrollEvent($event)">
+  <ul ref="listRef" class="img-list-wrap" :style="{ paddingBottom: isShort ? '15px' : '200px' }" @scroll="scrollEvent($event)">
     <div class="list">
-      <div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px' }" class="list__img transparent-bg" draggable="false" @mousedown="dragStart($event, i)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="select(i)" @dragstart="dragStart($event, i)">
+      <div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px', marginRight: item.gap + 'px' }" class="list__img" draggable="false" @mousedown="dragStart($event, i)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="select(i)" @dragstart="dragStart($event, i)">
         <edit-model v-if="edit" :options="edit" :data="{ item, i }">
           <div v-if="item.isDelect" class="list__mask">已删除</div>
-          <!-- <img class="img" :src="item.thumb || item.cover || item.url" /> -->
+          <el-image class="img transparent-bg" :src="item.thumb || item.url" lazy loading="lazy" />
-          <el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
         </edit-model>
         <template v-else>
-          <el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
+          <imageTip :detail="item">
+            <el-image class="img" :src="item.thumb || item.url" :style="{ height: getInnerHeight(item) + 'px' }" lazy loading="lazy">
+              <template #placeholder>
+                <div :style="{ backgroundColor: item.color }" class="image-color" />
+              </template>
+            </el-image>
+          </imageTip>
         </template>
       </div>
     </div>
@@ -34,6 +39,9 @@ export default defineComponent({
     listData: {},
     edit: {},
     isDone: {},
+    isShort: {
+      default: false,
+    },
   },
   emits: ['load', 'drag', 'select'],
   setup(props, context) {
@@ -63,14 +71,15 @@ export default defineComponent({
     watch(
       () => props.listData,
       async (newList: any, oldList: any) => {
+        !oldList && (oldList = [])
         if (newList.length <= 0) {
           state.list.length = 0
           return
         }
         let list = newList.filter((v: any) => !newList.includes(v) || !oldList.includes(v)) // difference
         list = JSON.parse(JSON.stringify(list))
-        const limitWidth = (await getFatherWidth()) - 32 //  296 // 256
         const marginRight = 6 // 间距
+        const limitWidth = (await getFatherWidth()) - marginRight
         const standardHeight = 280 // 高度阈值
         const neatArr: any = [] // 整理后的数组
         function factory(cutArr: any) {
@@ -103,8 +112,9 @@ export default defineComponent({
           }
           const { list: newList, height }: any = await factory([list.shift()])
           neatArr.push(
-            newList.map((x: any) => {
+            newList.map((x: any, index) => {
               x.listWidth = (x.width / x.height) * height
+              x.gap = index !== newList.length - 1 ? marginRight : 0
               return x
             }),
           )
@@ -126,6 +136,7 @@ export default defineComponent({
     }
 
     function getRef() {
+      // 用于在组件外调用内部ref
       return state.listRef
     }
 
@@ -154,6 +165,9 @@ export default defineComponent({
         load()
       }
     }
+
+    const getInnerHeight = ({ height, listWidth, width }: any) => (height * listWidth) / width
+
     return {
       load,
       dragStart,
@@ -164,6 +178,7 @@ export default defineComponent({
       getRef,
       mouseup,
       mousemove,
+      getInnerHeight,
     }
   },
 })
@@ -172,9 +187,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .img-list-wrap {
   height: 100%;
-  margin-top: 14px;
+  overflow: auto;
-  // overflow-y: scroll;
-  padding-bottom: 200px;
 }
 .img {
   transform-origin: center;
@@ -182,14 +195,21 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 }
+.image-color {
+  width: 100%;
+  height: 100%;
+  animation: breathe 600ms ease-out infinite alternate;
+}
 .list {
   position: relative;
-  padding: 4px 0 0 14px;
+  // padding: 4px 0 0 14px;
+  padding: 4px 0 0 0;
   &__img {
     // background: #f1f2f4;
     display: inline-block;
     cursor: pointer;
-    margin: 0 6px 2px 0;
+    // margin: 0 6px 2px 0;
+    margin-bottom: 3px;
     border-radius: 2px;
     overflow: hidden;
     position: relative;
@@ -217,4 +237,13 @@ export default defineComponent({
   font-size: 14px;
   color: #999;
 }
+/* 呼吸效果 */
+@keyframes breathe {
+  0% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 </style>

src/components/modules/panel/wrap/components/searchHeader.vue

@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2022-01-27 11:05:48
  * @Description:  
- * @LastEditors: ShawnPhang <site: book.palxp.com>
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-06-29 16:50:02
+ * @LastEditTime: 2023-10-04 01:53:10
 -->
 <template>
   <div class="search__wrap">
@@ -19,7 +19,7 @@
     </el-dropdown>
     <span v-else style="width: 1rem"></span>
 
-    <el-input size="large" v-model="searchValue" placeholder="输入关键词搜索" class="input-with-select">
+    <el-input v-model="searchValue" size="large" placeholder="输入关键词搜索" class="input-with-select">
       <template #append>
         <el-button><i class="iconfont icon-search"></i></el-button>
       </template>
@@ -46,6 +46,7 @@ export default defineComponent({
 
     if (props.type != 'none') {
       api.home.getCategories({ type: 1 }).then((list: any) => {
+        list.unshift({ id: 0, name: '全部' })
         state.materialCates = list
         const { cate } = route.query
         cate && (state.currentIndex = cate)