feat: 新增 CacheIamge 组件

src/components/CacheImage/index.vue

+<script setup lang="ts">
+    import md5 from 'crypto-js/md5'
+
+    const props = defineProps({
+        width: {
+            type: [String, Number],
+            default: '320',
+        },
+        height: {
+            type: [String, Number],
+            default: '240',
+        },
+        radius: {
+            type: [String, Number],
+            default: 0,
+        },
+        mode: {
+            type: String,
+            default: 'scaleToFill',
+        },
+        src: {
+            type: String,
+            required: true,
+        },
+    })
+
+    const src = ref()
+    const hashCacheKey = ref()
+    onMounted(async () => {
+        // 尝试缓存图片，如果失败则使用原始图片
+        await tryCache()
+    })
+
+    async function tryCache() {
+        let url = props.src
+
+        // #ifdef APP-PLUS
+        const hash = md5(url).toString()
+        hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
+        if (uni.getStorageSync(hashCacheKey.value)) {
+            console.log('CacheImage cache hit')
+            url = uni.getStorageSync(hashCacheKey.value)
+        } else {
+            console.log('CacheImage cache miss')
+            try {
+                const res = await uni.downloadFile({ url })
+                if (res.statusCode === 200) {
+                    const { savedFilePath } = await new Promise<UniApp.SaveFileSuccess>((resolve, reject) => {
+                        uni.saveFile({
+                            tempFilePath: res.tempFilePath,
+                            success: (res) => resolve(res),
+                            fail: (err) => reject(err),
+                        })
+                    })
+                    url = `${savedFilePath}`
+
+                    // 缓存图片本地地址
+                    uni.setStorageSync(hashCacheKey.value, url)
+                }
+            } catch (e) {
+                console.error(e)
+            }
+        }
+        console.log(props.src, '=>', url, hash, hashCacheKey.value)
+        // #endif
+
+        src.value = url
+    }
+
+    const hasError = ref(false)
+    function onError() {
+        if (hasError.value) {
+            return
+        }
+
+        hasError.value = true
+        src.value = props.src
+        // 清除缓存
+        hashCacheKey.value && uni.removeStorageSync(hashCacheKey.value)
+        console.warn('CacheImage cache error')
+    }
+</script>
+
+<template>
+    <fui-lazyload
+        :mode="props.mode"
+        :width="props.width"
+        :height="props.height"
+        :radius="props.radius"
+        :src="src"
+        @error="onError"
+    />
+</template>

types/components.d.ts

@@ -9,6 +9,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    CacheImage: typeof import('./../src/components/CacheImage/index.vue')['default']
     Empty: typeof import('./../src/components/Empty/index.vue')['default']
     FDragItem: typeof import('./../src/components/FirstUI/fui-drag/f-drag-item.vue')['default']
     FIndexListItem: typeof import('./../src/components/FirstUI/fui-index-list/f-index-list-item.vue')['default']