110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import { observer } from 'mobx-react-lite'
|
||
import React, { useEffect, useState } from 'react'
|
||
import { Alert, ScrollView, Text, TouchableOpacity, View } from 'react-native'
|
||
|
||
import { videoUrlCache } from '@/utils/videoUrlCache'
|
||
|
||
interface CacheStats {
|
||
totalCount: number
|
||
expiredCount: number
|
||
validCount: number
|
||
cacheSize: string
|
||
}
|
||
|
||
const CacheManagementPage = observer(() => {
|
||
const [stats, setStats] = useState<CacheStats | null>(null)
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
|
||
const loadCacheStats = async () => {
|
||
try {
|
||
const cacheStats = await videoUrlCache.getStats()
|
||
setStats(cacheStats)
|
||
} catch (error) {
|
||
console.warn('获取缓存统计失败:', error)
|
||
}
|
||
}
|
||
|
||
const handleClearCache = () => {
|
||
Alert.alert('清理缓存', '确定要清理所有视频URL缓存吗？此操作无法撤销。', [
|
||
{ text: '取消', style: 'cancel' },
|
||
{
|
||
text: '确定',
|
||
style: 'destructive',
|
||
onPress: async () => {
|
||
setIsLoading(true)
|
||
try {
|
||
await videoUrlCache.clear()
|
||
await loadCacheStats()
|
||
Alert.alert('成功', '缓存已清理')
|
||
} catch (error) {
|
||
Alert.alert('失败', '清理缓存失败')
|
||
console.warn('清理缓存失败:', error)
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
},
|
||
},
|
||
])
|
||
}
|
||
|
||
useEffect(() => {
|
||
loadCacheStats()
|
||
}, [])
|
||
|
||
return (
|
||
<ScrollView className="flex-1 bg-gray-50 p-4">
|
||
<View className="mb-4 rounded-lg bg-white p-4">
|
||
<Text className="mb-4 text-lg font-semibold text-gray-800">视频URL缓存统计</Text>
|
||
|
||
{stats ? (
|
||
<View className="space-y-3">
|
||
<View className="flex-row justify-between">
|
||
<Text className="text-gray-600">总缓存数</Text>
|
||
<Text className="font-medium">{stats.totalCount}</Text>
|
||
</View>
|
||
|
||
<View className="flex-row justify-between">
|
||
<Text className="text-green-600">有效缓存</Text>
|
||
<Text className="font-medium text-green-600">{stats.validCount}</Text>
|
||
</View>
|
||
|
||
<View className="flex-row justify-between">
|
||
<Text className="text-red-600">过期缓存</Text>
|
||
<Text className="font-medium text-red-600">{stats.expiredCount}</Text>
|
||
</View>
|
||
|
||
<View className="flex-row justify-between">
|
||
<Text className="text-gray-600">缓存大小</Text>
|
||
<Text className="font-medium">{stats.cacheSize}</Text>
|
||
</View>
|
||
</View>
|
||
) : (
|
||
<Text className="text-gray-500">加载中...</Text>
|
||
)}
|
||
</View>
|
||
|
||
<View className="rounded-lg bg-white p-4">
|
||
<Text className="mb-4 text-lg font-semibold text-gray-800">缓存管理</Text>
|
||
|
||
<View className="space-y-3">
|
||
<TouchableOpacity className="rounded-lg bg-blue-500 px-4 py-3" onPress={loadCacheStats} disabled={isLoading}>
|
||
<Text className="text-center font-medium text-white">刷新统计</Text>
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity className="rounded-lg bg-red-500 px-4 py-3" onPress={handleClearCache} disabled={isLoading}>
|
||
<Text className="text-center font-medium text-white">清理所有缓存</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
|
||
<View className="mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-4">
|
||
<Text className="text-sm text-yellow-800">
|
||
💡 提示：缓存会自动清理过期数据，通常不需要手动清理。 缓存有效期为24小时，最多保存200条记录。
|
||
</Text>
|
||
</View>
|
||
</ScrollView>
|
||
)
|
||
})
|
||
|
||
export default CacheManagementPage
|