From 6e0ab15e47bdd50e1453f4d942b683daf53ffd60 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 1 Mar 2022 16:39:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E8=A1=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=8D=A2=E6=88=90=E6=87=92=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                      |  3 ++-
 pnpm-lock.yaml                                    | 15 +++++++++++++++
 src/plugins/directives.ts                         |  6 ++++++
 src/utils/utils.ts                                |  2 +-
 .../ContentCharts/components/ItemBox/index.vue    | 10 ++--------
 .../ContentLayers/components/ListItem/index.vue   |  4 ++--
 src/views/project/items/components/Card/index.vue |  4 ++--
 src/views/project/mtTemplate/index.vue            |  4 ++--
 src/views/project/templateMarket/index.vue        |  4 ++--
 9 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index d4c9fdf2..2ac4a5fc 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "screenfull": "^6.0.0",
     "vue": "^3.2.16",
     "vue-i18n": "^9.2.0-beta.23",
-    "vue-router": "4.0.12"
+    "vue-router": "4.0.12",
+    "vue3-lazyload": "^0.2.5-beta"
   },
   "devDependencies": {
     "@types/node": "^16.11.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e7a1ed58..176c9291 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,7 @@ specifiers:
   vue-i18n: ^9.2.0-beta.23
   vue-router: 4.0.12
   vue-tsc: ^0.28.7
+  vue3-lazyload: ^0.2.5-beta
 
 dependencies:
   animate.css: r2.cnpmjs.org/animate.css/4.1.1
@@ -51,6 +52,7 @@ dependencies:
   vue: rg.cnpmjs.org/vue/3.2.24
   vue-i18n: rg.cnpmjs.org/vue-i18n/9.2.0-beta.23_vue@3.2.24
   vue-router: rg.cnpmjs.org/vue-router/4.0.12_vue@3.2.24
+  vue3-lazyload: registry.npmjs.org/vue3-lazyload/0.2.5-beta_e9ad48123e44f1efa3c90c8e8375ea6d
 
 devDependencies:
   '@types/node': rg.cnpmjs.org/@types/node/16.11.12
@@ -2341,6 +2343,19 @@ packages:
       vue: rg.cnpmjs.org/vue/3.2.24
     dev: false
 
+  registry.npmjs.org/vue3-lazyload/0.2.5-beta_e9ad48123e44f1efa3c90c8e8375ea6d:
+    resolution: {integrity: sha512-GVhJfL9Hcu+AvWsYmUwODivvt+gzpT0ztgAzZaUduoiTaGCv/qzhr0VwAQXfjGF3XFYFyOJsHlAi3/WE0P8XTQ==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.2.5-beta.tgz}
+    id: registry.npmjs.org/vue3-lazyload/0.2.5-beta
+    name: vue3-lazyload
+    version: 0.2.5-beta
+    peerDependencies:
+      '@vue/compiler-sfc': '>=3.0.0'
+      vue: '>=3.0.0'
+    dependencies:
+      '@vue/compiler-sfc': rg.cnpmjs.org/@vue/compiler-sfc/3.2.24
+      vue: rg.cnpmjs.org/vue/3.2.24
+    dev: false
+
   registry.npmjs.org/vueuc/0.4.26_vue@3.2.24:
     resolution: {integrity: sha512-IK6TV4468k7Hpj1SXXPYelT/aYqmfa/SYTLFospwJ/uMebRExS1fh5tx6ZT3fSA0OkmCOHmmi2OGke+eSseAgw==, registry: https://skimdb.npmjs.com/registry/, tarball: https://registry.npmjs.org/vueuc/-/vueuc-0.4.26.tgz}
     id: registry.npmjs.org/vueuc/0.4.26
diff --git a/src/plugins/directives.ts b/src/plugins/directives.ts
index c2078dfc..2b752aa6 100644
--- a/src/plugins/directives.ts
+++ b/src/plugins/directives.ts
@@ -1,4 +1,6 @@
 import { App } from 'vue';
+import VueLazyLoad from 'vue3-lazyload'
+import { requireErrorImg } from '@/utils'
 
 // import { x } from '@/directives';
 
@@ -7,5 +9,9 @@ import { App } from 'vue';
  * @param app
  */
 export function setupDirectives(app: App) {
+  // 图片懒加载
+  app.use(VueLazyLoad, {
+    error: requireErrorImg(),
+  })
   // app.directive('x', x);
 }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index f860df41..b61034c7 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -49,7 +49,7 @@ export const renderLang = (lang: string, set = {}, tag = 'span') => {
  * @param name
  * @returns url
  */
-export const requireFallbackImg = () => {
+export const requireErrorImg = () => {
   return Image_404
 }
 
diff --git a/src/views/chart/ContentCharts/components/ItemBox/index.vue b/src/views/chart/ContentCharts/components/ItemBox/index.vue
index 53e8ff02..6dfd0a3b 100644
--- a/src/views/chart/ContentCharts/components/ItemBox/index.vue
+++ b/src/views/chart/ContentCharts/components/ItemBox/index.vue
@@ -13,13 +13,7 @@
         <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
       </div>
       <div class="list-center go-flex-center">
-        <n-image
-          class="list-img"
-          object-fit="contain"
-          preview-disabled
-          :src="item.image"
-          :fallback-src="requireFallbackImg()"
-        />
+        <img class="list-img" v-lazy="item.image" alt="图表图片" />
       </div>
     </div>
   </div>
@@ -28,7 +22,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
-import { requireFallbackImg, componentInstall } from '@/utils'
+import { requireErrorImg, componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
 import omit from 'lodash/omit'
diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue
index 4c1990f3..962981c4 100644
--- a/src/views/chart/ContentLayers/components/ListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/ListItem/index.vue
@@ -9,7 +9,7 @@
         object-fit="contain"
         preview-disabled
         :src="image"
-        :fallback-src="requireFallbackImg()"
+        :fallback-src="requireErrorImg()"
       />
       <n-ellipsis>
         <n-text class="list-text">
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import { ref, toRefs, computed } from 'vue'
-import { requireFallbackImg } from '@/utils'
+import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 
diff --git a/src/views/project/items/components/Card/index.vue b/src/views/project/items/components/Card/index.vue
index a459faf2..af5a40cf 100644
--- a/src/views/project/items/components/Card/index.vue
+++ b/src/views/project/items/components/Card/index.vue
@@ -21,7 +21,7 @@
               requireUrl('project/moke-20211219181327.png')
             "
             :alt="cardData.title"
-            :fallback-src="requireFallbackImg()"
+            :fallback-src="requireErrorImg()"
           />
         </div>
       </div>
@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, PropType } from 'vue'
-import { renderIcon, renderLang,  requireFallbackImg } from '@/utils'
+import { renderIcon, renderLang,  requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/MacOsControlBtn'
 import { Chartype } from '../../index.d'
diff --git a/src/views/project/mtTemplate/index.vue b/src/views/project/mtTemplate/index.vue
index 0a8d35d4..c6942b86 100644
--- a/src/views/project/mtTemplate/index.vue
+++ b/src/views/project/mtTemplate/index.vue
@@ -5,7 +5,7 @@
         object-fit="contain"
         height="300"
         preview-disabled
-        :src="requireFallbackImg()"
+        :src="requireErrorImg()"
       />
       <n-h3>暂时还没有东西呢</n-h3>
     </n-space>
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { requireFallbackImg } from '@/utils'
+import { requireErrorImg } from '@/utils'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/project/templateMarket/index.vue b/src/views/project/templateMarket/index.vue
index f225a451..8f766f51 100644
--- a/src/views/project/templateMarket/index.vue
+++ b/src/views/project/templateMarket/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="go-project-template-market">
     <n-space vertical>
-      <n-image object-fit="contain" height="300" preview-disabled :src="requireFallbackImg()" />
+      <n-image object-fit="contain" height="300" preview-disabled :src="requireErrorImg()" />
       <n-h3>暂时还没有东西呢</n-h3>
     </n-space>
   </div>
 </template>
 
 <script setup lang="ts">
-import { requireFallbackImg } from '@/utils'
+import { requireErrorImg } from '@/utils'
 </script>
 
 <style lang="scss" scoped>