From 9f0e0dd73cf122b50e4c8fd2fc6ff02f4106472a Mon Sep 17 00:00:00 2001
From: ShawnPhang <palxiao@vip.qq.com>
Date: Wed, 4 Oct 2023 00:25:09 +0800
Subject: [PATCH] perf: load images

---
 src/assets/styles/main.less                       |  2 +-
 src/common/hooks/dragHelper.ts                    |  4 ++--
 .../modules/panel/wrap/BgImgListWrap.vue          |  4 ++--
 .../modules/panel/wrap/CompListWrap.vue           |  8 ++++----
 .../modules/panel/wrap/GraphListWrap.vue          |  8 ++++----
 .../modules/panel/wrap/components/photoList.vue   | 15 ++++++++-------
 6 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/assets/styles/main.less b/src/assets/styles/main.less
index 57ae0e5..44da0ef 100644
--- a/src/assets/styles/main.less
+++ b/src/assets/styles/main.less
@@ -105,5 +105,5 @@ p {
   pointer-events: none;
 }
 .hide {
-  opacity: 0;
+  opacity: 0 !important;
 }
diff --git a/src/common/hooks/dragHelper.ts b/src/common/hooks/dragHelper.ts
index 88d6e3b..f6568e6 100644
--- a/src/common/hooks/dragHelper.ts
+++ b/src/common/hooks/dragHelper.ts
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2023-07-10 14:58:48
  * @Description: 拖拽优化
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-11 11:10:03
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-04 00:14:19
  */
 import store from '@/store'
 export default class dragHelper {
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index e2300e2..5f4240c 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/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-03 18:53:02
+ * @LastEditTime: 2023-10-04 00:21:34
 -->
 <template>
   <div class="wrap">
@@ -13,7 +13,7 @@
     <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>
-          <el-image class="list__img" :src="item.thumb" fit="cover" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)"></el-image>
+          <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>
       </div>
       <div v-show="loading" class="loading"><i class="el-icon-loading"></i> 拼命加载中</div>
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 928d9e2..f9c16ed 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表，主要用于文字组合列表
- * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-09-01 14:14:27
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-04 00:23:04
 -->
 <template>
   <div class="wrap">
@@ -24,7 +24,7 @@
         <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)">
-            <el-image class="list__img-thumb" :src="item.cover" fit="contain"></el-image>
+            <el-image class="list__img-thumb" :src="item.cover" fit="contain" lazy loading="lazy"></el-image>
           </div>
         </div>
       </div>
@@ -35,7 +35,7 @@
       <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)"> -->
-          <el-image class="list__img" :src="item.cover" fit="contain"> </el-image>
+          <el-image class="list__img" :src="item.cover" fit="contain" lazy loading="lazy" />
           <!-- </edit-model> -->
         </div>
       </el-space>
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 618e29d..35b1f68 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -2,8 +2,8 @@
  * @Author: ShawnPhang
  * @Date: 2021-08-27 15:16:07
  * @Description: 素材列表
- * @LastEditors: rayadaschn 115447518+rayadaschn@users.noreply.github.com
- * @LastEditTime: 2023-09-01 14:18:30
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-04 00:23:52
 -->
 <template>
   <div class="wrap">
@@ -23,7 +23,7 @@
         <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)">
-            <el-image class="list__img-thumb" :src="item.thumb" fit="contain"></el-image>
+            <el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
           </div>
         </div>
       </div>
@@ -33,7 +33,7 @@
       <span class="types__header-back" @click="back"><i class="iconfont icon-right"></i>{{ currentCategory.name }}</span>
       <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"></el-image>
+          <el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
         </div>
       </el-space>
       <div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
diff --git a/src/components/modules/panel/wrap/components/photoList.vue b/src/components/modules/panel/wrap/components/photoList.vue
index af6797f..5c43ebc 100644
--- a/src/components/modules/panel/wrap/components/photoList.vue
+++ b/src/components/modules/panel/wrap/components/photoList.vue
@@ -2,21 +2,21 @@
  * @Author: ShawnPhang
  * @Date: 2022-02-23 15:48:52
  * @Description: 图片列表组件 Bookshelf Layout 
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-17 15:20:25
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-10-04 00:20:31
 -->
 <template>
   <ul ref="listRef" class="img-list-wrap" style="overflow: auto" @scroll="scrollEvent($event)">
     <div class="list">
-      <div v-for="(item, i) in list" :key="i + 'i'" :style="{ width: item.listWidth + 'px' }" class="list__img" 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' }" class="list__img transparent-bg" 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" />
+          <!-- <img class="img" :src="item.thumb || item.cover || item.url" /> -->
+          <el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
         </edit-model>
         <template v-else>
-          <img class="img" :src="item.thumb || item.cover || item.url" />
+          <el-image class="img" :src="item.thumb || item.url" lazy loading="lazy" />
         </template>
-        <!-- <el-image :src="item.thumb || item.url" fit="cover"></el-image> -->
       </div>
     </div>
     <div v-if="!isDone" v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
@@ -178,6 +178,7 @@ export default defineComponent({
 }
 .img {
   transform-origin: center;
+  display: block;
   width: 100%;
   height: 100%;
 }
@@ -185,7 +186,7 @@ export default defineComponent({
   position: relative;
   padding: 4px 0 0 14px;
   &__img {
-    background: #f1f2f4;
+    // background: #f1f2f4;
     display: inline-block;
     cursor: pointer;
     margin: 0 6px 2px 0;