546 lines
15 KiB
Vue
546 lines
15 KiB
Vue
<template>
|
||
<view class="clear-cache">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="nav-bar">
|
||
<view class="nav-back" @click="navigateBack">
|
||
<u-icon name="arrow-left" size="24" color="#606266"></u-icon>
|
||
</view>
|
||
<view class="nav-title">清理缓存</view>
|
||
<view class="nav-right">
|
||
<u-button type="primary" size="small" @click="clearAllCache" :disabled="isClearing">
|
||
{{ isClearing ? '清理中...' : '清理全部' }}
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 缓存概览 -->
|
||
<view class="cache-overview">
|
||
<view class="cache-card">
|
||
<view class="cache-title">
|
||
<u-icon name="folder-open" size="32" color="#606266" style="margin-right: 12rpx;"></u-icon>
|
||
<text class="title-text">系统缓存</text>
|
||
</view>
|
||
<view class="cache-size">
|
||
<text class="size-value">{{ totalCacheSize }}</text>
|
||
<text class="size-unit">MB</text>
|
||
</view>
|
||
<view class="cache-desc">上次清理时间: {{ lastClearTime }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 缓存详情列表 -->
|
||
<view class="cache-details">
|
||
<view class="section-header">
|
||
<text class="section-title">缓存详情</text>
|
||
<text class="section-hint">点击可清理对应缓存</text>
|
||
</view>
|
||
|
||
<u-list>
|
||
<u-list-item v-for="item in cacheItems" :key="item.type" :border="true">
|
||
<view class="cache-item" @click="clearSpecificCache(item.type)">
|
||
<view class="cache-item-left">
|
||
<u-icon :name="item.icon" size="32" color="#606266" style="margin-right: 12rpx;"></u-icon>
|
||
<view class="cache-item-info">
|
||
<view class="cache-item-name">{{ item.name }}</view>
|
||
<view class="cache-item-desc">{{ item.description }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="cache-item-right">
|
||
<text class="cache-item-size">{{ item.size }} MB</text>
|
||
<u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
|
||
</view>
|
||
</view>
|
||
</u-list-item>
|
||
</u-list>
|
||
</view>
|
||
|
||
<!-- 缓存清理提示 -->
|
||
<view class="cache-tips">
|
||
<u-icon name="information-circle" size="24" color="#909399" style="margin-right: 12rpx;"></u-icon>
|
||
<text class="tips-text">定期清理缓存可以提高系统运行速度，建议每周清理一次。</text>
|
||
</view>
|
||
|
||
<!-- 清理历史 -->
|
||
<view class="clear-history">
|
||
<view class="section-header">
|
||
<text class="section-title">清理历史</text>
|
||
<u-button type="text" @click="clearHistory">清空历史</u-button>
|
||
</view>
|
||
|
||
<u-list v-if="clearHistoryList.length > 0">
|
||
<u-list-item v-for="history in clearHistoryList" :key="history.id" :border="true">
|
||
<view class="history-item">
|
||
<view class="history-content">
|
||
<text class="history-action">{{ history.action }}</text>
|
||
<text class="history-size">清理了 {{ history.clearedSize }} MB</text>
|
||
</view>
|
||
<view class="history-time">{{ formatTime(history.timestamp) }}</view>
|
||
</view>
|
||
</u-list-item>
|
||
</u-list>
|
||
<u-empty v-else text="暂无清理记录"></u-empty>
|
||
</view>
|
||
|
||
<!-- 清理进度弹窗 -->
|
||
<u-popup v-model="showProgressModal" mode="center" :round="true" :closeable="false" :mask-close-able="false">
|
||
<view class="progress-modal-content">
|
||
<view class="progress-title">{{ clearingTitle }}</view>
|
||
<u-progress :percentage="clearProgress" :show-text="true" bar-height="10" active></u-progress>
|
||
<view class="progress-text">{{ clearProgressText }}</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 清理确认弹窗 -->
|
||
<u-popup v-model="showConfirmModal" mode="center" :round="true">
|
||
<view class="confirm-modal-content">
|
||
<view class="confirm-title">确认清理</view>
|
||
<view class="confirm-content">{{ confirmContent }}</view>
|
||
<view class="confirm-buttons">
|
||
<u-button @click="showConfirmModal = false" style="flex: 1; margin-right: 20rpx;">取消</u-button>
|
||
<u-button type="primary" @click="confirmClearCache" style="flex: 1;">确认清理</u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
isClearing: false,
|
||
clearProgress: 0,
|
||
clearProgressText: '',
|
||
clearingTitle: '',
|
||
showProgressModal: false,
|
||
showConfirmModal: false,
|
||
confirmContent: '',
|
||
cacheTypeToClear: '',
|
||
totalCacheSize: '246.8',
|
||
lastClearTime: '2023-08-01 10:30:00',
|
||
cacheItems: [
|
||
{
|
||
type: 'image',
|
||
name: '图片缓存',
|
||
description: '临时存储的图片文件',
|
||
size: '156.2',
|
||
icon: 'image',
|
||
color: '#409eff'
|
||
},
|
||
{
|
||
type: 'data',
|
||
name: '数据缓存',
|
||
description: 'API请求数据缓存',
|
||
size: '45.3',
|
||
icon: 'document-text',
|
||
color: '#67c23a'
|
||
},
|
||
{
|
||
type: 'temp',
|
||
name: '临时文件',
|
||
description: '系统临时生成的文件',
|
||
size: '28.7',
|
||
icon: 'file-temp',
|
||
color: '#faad14'
|
||
},
|
||
{
|
||
type: 'log',
|
||
name: '日志文件',
|
||
description: '系统运行日志',
|
||
size: '16.6',
|
||
icon: 'document-copy',
|
||
color: '#909399'
|
||
}
|
||
],
|
||
clearHistoryList: [
|
||
{
|
||
id: 1,
|
||
action: '清理全部缓存',
|
||
clearedSize: '128.5',
|
||
timestamp: 1690843200000
|
||
},
|
||
{
|
||
id: 2,
|
||
action: '清理图片缓存',
|
||
clearedSize: '89.2',
|
||
timestamp: 1690756800000
|
||
},
|
||
{
|
||
id: 3,
|
||
action: '清理日志文件',
|
||
clearedSize: '12.3',
|
||
timestamp: 1690670400000
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
navigateBack() {
|
||
uni.navigateBack()
|
||
},
|
||
formatTime(timestamp) {
|
||
const date = new Date(timestamp)
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
const hour = date.getHours().toString().padStart(2, '0')
|
||
const minute = date.getMinutes().toString().padStart(2, '0')
|
||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||
},
|
||
clearAllCache() {
|
||
this.showConfirmModal = true
|
||
this.confirmContent = '确定要清理全部缓存吗？这将释放所有缓存空间。'
|
||
this.cacheTypeToClear = 'all'
|
||
},
|
||
clearSpecificCache(type) {
|
||
this.showConfirmModal = true
|
||
const cacheItem = this.cacheItems.find(item => item.type === type)
|
||
this.confirmContent = `确定要清理${cacheItem.name}吗？这将释放 ${cacheItem.size} MB 的存储空间。`
|
||
this.cacheTypeToClear = type
|
||
},
|
||
confirmClearCache() {
|
||
this.showConfirmModal = false
|
||
this.isClearing = true
|
||
this.clearProgress = 0
|
||
this.showProgressModal = true
|
||
|
||
if (this.cacheTypeToClear === 'all') {
|
||
this.clearingTitle = '清理全部缓存'
|
||
this.clearProgressText = '准备清理...'
|
||
} else {
|
||
const cacheItem = this.cacheItems.find(item => item.type === this.cacheTypeToClear)
|
||
this.clearingTitle = `清理${cacheItem.name}`
|
||
this.clearProgressText = '准备清理...'
|
||
}
|
||
|
||
// 模拟清理进度
|
||
let progress = 0
|
||
const interval = setInterval(() => {
|
||
progress += 5
|
||
this.clearProgress = progress
|
||
|
||
if (progress <= 30) {
|
||
this.clearProgressText = '正在扫描文件...'
|
||
} else if (progress <= 60) {
|
||
this.clearProgressText = '正在清理缓存...'
|
||
} else if (progress <= 90) {
|
||
this.clearProgressText = '正在更新系统...'
|
||
} else {
|
||
this.clearProgressText = '清理完成！'
|
||
}
|
||
|
||
if (progress >= 100) {
|
||
clearInterval(interval)
|
||
setTimeout(() => {
|
||
this.isClearing = false
|
||
this.showProgressModal = false
|
||
|
||
// 更新缓存大小
|
||
if (this.cacheTypeToClear === 'all') {
|
||
this.totalCacheSize = '0.0'
|
||
this.cacheItems.forEach(item => {
|
||
item.size = '0.0'
|
||
})
|
||
} else {
|
||
const cacheItem = this.cacheItems.find(item => item.type === this.cacheTypeToClear)
|
||
const clearedSize = parseFloat(cacheItem.size)
|
||
cacheItem.size = '0.0'
|
||
this.totalCacheSize = (parseFloat(this.totalCacheSize) - clearedSize).toFixed(1)
|
||
}
|
||
|
||
// 更新最后清理时间
|
||
const now = new Date()
|
||
const year = now.getFullYear()
|
||
const month = (now.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = now.getDate().toString().padStart(2, '0')
|
||
const hour = now.getHours().toString().padStart(2, '0')
|
||
const minute = now.getMinutes().toString().padStart(2, '0')
|
||
const second = now.getSeconds().toString().padStart(2, '0')
|
||
this.lastClearTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`
|
||
|
||
// 添加到清理历史
|
||
this.addToClearHistory()
|
||
|
||
uni.showToast({
|
||
title: '缓存清理成功',
|
||
icon: 'success'
|
||
})
|
||
}, 1000)
|
||
}
|
||
}, 200)
|
||
},
|
||
addToClearHistory() {
|
||
let action, clearedSize
|
||
|
||
if (this.cacheTypeToClear === 'all') {
|
||
action = '清理全部缓存'
|
||
clearedSize = this.totalCacheSize
|
||
} else {
|
||
const cacheItem = this.cacheItems.find(item => item.type === this.cacheTypeToClear)
|
||
action = `清理${cacheItem.name}`
|
||
clearedSize = cacheItem.size
|
||
}
|
||
|
||
const newHistory = {
|
||
id: this.clearHistoryList.length + 1,
|
||
action: action,
|
||
clearedSize: clearedSize,
|
||
timestamp: Date.now()
|
||
}
|
||
|
||
this.clearHistoryList.unshift(newHistory)
|
||
},
|
||
clearHistory() {
|
||
uni.showModal({
|
||
title: '确认清空',
|
||
content: '确定要清空清理历史记录吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.clearHistoryList = []
|
||
uni.showToast({
|
||
title: '历史记录已清空',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.clear-cache {
|
||
padding-bottom: 20rpx;
|
||
background-color: #f5f5f5;
|
||
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
padding: 0 30rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.nav-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.cache-overview {
|
||
margin-top: 20rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.cache-card {
|
||
background: linear-gradient(135deg, #409eff, #67c23a);
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
|
||
.cache-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.title-text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.cache-size {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 5rpx;
|
||
margin-bottom: 15rpx;
|
||
|
||
.size-value {
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.size-unit {
|
||
font-size: 32rpx;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.cache-desc {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.cache-details {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.section-hint {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.cache-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
|
||
.cache-item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.cache-item-info {
|
||
.cache-item-name {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.cache-item-desc {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.cache-item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
|
||
.cache-item-size {
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cache-tips {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
margin: 20rpx;
|
||
padding: 20rpx;
|
||
background-color: #fdf6ec;
|
||
border-radius: 10rpx;
|
||
border-left: 4rpx solid #faad14;
|
||
|
||
.tips-text {
|
||
font-size: 28rpx;
|
||
color: #fa8c16;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.clear-history {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.history-item {
|
||
padding: 20rpx;
|
||
|
||
.history-content {
|
||
.history-action {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
display: block;
|
||
}
|
||
|
||
.history-size {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.history-time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 10rpx;
|
||
display: block;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-modal-content {
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
|
||
.progress-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.progress-text {
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.confirm-modal-content {
|
||
padding: 40rpx;
|
||
|
||
.confirm-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.confirm-content {
|
||
font-size: 30rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.confirm-buttons {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
</style> |