bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/admin-center/system-settings/clear-cache.vue
+546
View File
@@ -0,0 +1,546 @@
<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>