提交 2f212ff3 作者: 方治民

feat: 添加清理缓存示例

上级 8b4e19c3
<script setup lang="ts"> <script setup lang="ts">
import * as Pages from '@/utils/pages' import * as Pages from '@/utils/pages'
import { convertKB } from '@/utils'
import { calculateCacheSize, cleanCache } from '@/components/CacheImage/index'
interface Item { interface Item {
name: string name: string
icon: string icon: string
page: string page?: string
type?: 'link' | 'bottom' type?: 'link' | 'bottom'
animationType?: Pages.AnimationType animationType?: Pages.AnimationType
explain?: string
before?: () => void before?: () => void
event?: () => void event?: () => void
} }
...@@ -68,6 +71,38 @@ ...@@ -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 @@ ...@@ -83,6 +118,24 @@
Pages.to(item.page, item.animationType) 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> </script>
<template> <template>
...@@ -103,6 +156,7 @@ ...@@ -103,6 +156,7 @@
<Icon :class="[`icon-${item.icon}`]" size="48" /> <Icon :class="[`icon-${item.icon}`]" size="48" />
<text>{{ item.name }}</text> <text>{{ item.name }}</text>
</view> </view>
<text class="fui-text__explain text-#999" v-if="item.explain">{{ item.explain }}</text>
</fui-list-cell> </fui-list-cell>
</view> </view>
</scroll-view> </scroll-view>
......
...@@ -60,3 +60,18 @@ export function withInstall<T>(component: T, alias?: string) { ...@@ -60,3 +60,18 @@ export function withInstall<T>(component: T, alias?: string) {
} }
return component as T & Plugin 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] }
}
...@@ -18,6 +18,7 @@ const ICONS = [ ...@@ -18,6 +18,7 @@ const ICONS = [
'emojione:cowboy-hat-face', 'emojione:cowboy-hat-face',
'twemoji:laptop', 'twemoji:laptop',
'vscode-icons:file-type-pdf2', 'vscode-icons:file-type-pdf2',
'fxemoji:clockwiserightwardsleftwardscirclearrows',
] ]
export default defineConfig({ export default defineConfig({
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论