feat: 添加清理缓存示例

src/pages/example/index.vue

 <script setup lang="ts">
     import * as Pages from '@/utils/pages'
+    import { convertKB } from '@/utils'
+    import { calculateCacheSize, cleanCache } from '@/components/CacheImage/index'
 
     interface Item {
         name: string
         icon: string
-        page: string
+        page?: string
         type?: 'link' | 'bottom'
         animationType?: Pages.AnimationType
+        explain?: string
         before?: () => void
         event?: () => void
     }
@@ -68,6 +71,38 @@
                     }
                 },
             },
+            {
+                name: '清理缓存',
+                icon: 'fxemoji-clockwiserightwardsleftwardscirclearrows',
+                type: 'bottom',
+                explain: '',
+                event() {
+                    if (!this.explain) {
+                        Message.toast('无需清理 ~')
+                        return
+                    }
+
+                    Message.confirm('确认清除缓存?', '温馨提示').then(async (confirm) => {
+                        if (confirm) {
+                            Message.loading('清理中...')
+
+                            try {
+                                // 清理缓存
+                                await cleanCache()
+
+                                // 重新计算
+                                calculateCache()
+                            } finally {
+                                // 延迟提示
+                                setTimeout(() => {
+                                    Message.toast('缓存清除成功')
+                                    Message.hideLoading()
+                                }, 500)
+                            }
+                        }
+                    })
+                },
+            },
         ],
     })
 
@@ -83,6 +118,24 @@
 
         Pages.to(item.page, item.animationType)
     }
+
+    /**
+     * 计算缓存
+     */
+    function calculateCache() {
+        // 重新计算
+        const cacheIamgeSizeTotal = calculateCacheSize()
+        const { size: currentStorageSize, unit: currentStorageSizeUnit } = convertKB(cacheIamgeSizeTotal / 1024)
+
+        // 更新视图
+        data.items.find((item) => item.name === '清理缓存').explain =
+            Number(currentStorageSize) === 0 ? '' : `${currentStorageSize}${currentStorageSizeUnit}`
+    }
+
+    onShow(() => {
+        // 计算缓存
+        calculateCache()
+    })
 </script>
 
 <template>
@@ -103,6 +156,7 @@
                         <Icon :class="[`icon-${item.icon}`]" size="48" />
                         <text>{{ item.name }}</text>
                     </view>
+                    <text class="fui-text__explain text-#999" v-if="item.explain">{{ item.explain }}</text>
                 </fui-list-cell>
             </view>
         </scroll-view>

src/utils/index.ts

@@ -60,3 +60,18 @@ export function withInstall<T>(component: T, alias?: string) {
     }
     return component as T & Plugin
 }
+
+// 将 KB 转换为其他单位
+export function convertKB(kb: number) {
+    const bytes = kb * 1024
+    const units = ['B', 'KB', 'MB', 'GB', 'TB']
+    let size = bytes
+    let unitIndex = 0
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024
+        unitIndex++
+    }
+
+    return { size: size.toFixed(2), unit: units[unitIndex] }
+}

unocss.config.ts

@@ -18,6 +18,7 @@ const ICONS = [
     'emojione:cowboy-hat-face',
     'twemoji:laptop',
     'vscode-icons:file-type-pdf2',
+    'fxemoji:clockwiserightwardsleftwardscirclearrows',
 ]
 
 export default defineConfig({