feat: ThumbnailPreview 组件默认使用 CacheImage 组件来实现图片缓存

src/components/CacheImage/index.vue

@@ -18,6 +18,10 @@
             type: String,
             default: 'scaleToFill',
         },
+        background: {
+            type: String,
+            default: '#F7F7F7',
+        },
         src: {
             type: String,
             required: true,
@@ -38,10 +42,10 @@
         const hash = md5(url).toString()
         hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
         if (uni.getStorageSync(hashCacheKey.value)) {
-            console.log('CacheImage cache hit')
+            console.debug('CacheImage cache hit')
             url = uni.getStorageSync(hashCacheKey.value)
         } else {
-            console.log('CacheImage cache miss')
+            console.debug('CacheImage cache miss')
             try {
                 const res = await uni.downloadFile({ url })
                 if (res.statusCode === 200) {
@@ -61,7 +65,7 @@
                 console.error(e)
             }
         }
-        console.log(props.src, '=>', url, hash, hashCacheKey.value)
+        console.debug(props.src, '=>', url, hash, hashCacheKey.value)
         // #endif
 
         src.value = url
@@ -87,7 +91,10 @@
         :width="props.width"
         :height="props.height"
         :radius="props.radius"
+        :background="props.background"
         :src="src"
         @error="onError"
-    />
+    >
+        <slot></slot>
+    </fui-lazyload>
 </template>

src/components/ThumbnailPreview/index.vue

 <script lang="ts" setup>
     import type { PropType } from 'vue'
+    import md5 from 'crypto-js/md5'
     import { nanoid } from 'nanoid'
     import { getPoster, isImage, isVideo } from './utils'
+    import CacheImage from '@/components/CacheImage/index.vue'
 
     type Asset = Recordable & { url: string }
     const props = defineProps({
@@ -35,7 +37,17 @@
     // 预览图片
     const preview = (index: number) => {
         uni.previewImage({
-            urls: images.value.map((item) => item.url),
+            urls: images.value.map((item) => {
+                // #ifdef APP-PLUS
+                const hash = md5(item.url).toString()
+                const key = `G_CACHE_IMAGE_${hash}`
+                if (uni.getStorageSync(key)) {
+                    return uni.getStorageSync(key)
+                }
+                // #endif
+
+                return item.url
+            }),
             current: index,
         })
     }
@@ -67,7 +79,7 @@
 <template>
     <view class="preview-wrap">
         <!-- 视频预览 -->
-        <fui-lazyload
+        <CacheImage
             class="preview-video"
             :background="props.background"
             :mode="props.mode"
@@ -82,10 +94,10 @@
             <view class="icon-wrap" :style="{ width: props.width, height: props.height }">
                 <fui-icon class="video-play-icon" name="suspend" size="40" color="#fff" />
             </view>
-        </fui-lazyload>
+        </CacheImage>
 
         <!-- 图片预览 -->
-        <fui-lazyload
+        <CacheImage
             class="preview-image"
             :background="props.background"
             :mode="props.mode"