更新逻辑，缓存

src/components/CacheManager.vue

@@ -92,22 +92,22 @@ export default {
     },
     async refreshCaches() {
       if (!this.serviceWorkerActive) return;
-      
+
       this.loading = true;
       this.message = '';
       this.caches = [];
-      
+
       try {
         // 获取所有缓存名称
         const cacheNames = await this.sendMessageToSW({ type: 'CACHE_KEYS' });
-        
+
         // 获取每个缓存的内容
         for (const cacheName of cacheNames.cacheNames) {
-          const cacheContent = await this.sendMessageToSW({ 
-            type: 'CACHE_CONTENT', 
-            cacheName 
+          const cacheContent = await this.sendMessageToSW({
+            type: 'CACHE_CONTENT',
+            cacheName
           });
-          
+
           this.caches.push({
             name: cacheName,
             urls: cacheContent.urls || []
@@ -122,11 +122,11 @@ export default {
     async clearCache(cacheName) {
       this.loading = true;
       try {
-        const result = await this.sendMessageToSW({ 
-          type: 'CLEAR_CACHE', 
-          cacheName 
+        const result = await this.sendMessageToSW({
+          type: 'CLEAR_CACHE',
+          cacheName
         });
-        
+
         if (result.success) {
           this.showMessage(`已清除缓存: ${this.formatCacheName(cacheName)}`, 'success');
           await this.refreshCaches();
@@ -142,12 +142,12 @@ export default {
     async clearUrl(cacheName, url) {
       this.loading = true;
       try {
-        const result = await this.sendMessageToSW({ 
-          type: 'CLEAR_URL', 
+        const result = await this.sendMessageToSW({
+          type: 'CLEAR_URL',
           cacheName,
-          url 
+          url
         });
-        
+
         if (result.success) {
           this.showMessage(`已从缓存中删除: ${this.getFileName(url)}`, 'success');
           await this.refreshCaches();
@@ -164,11 +164,11 @@ export default {
       if (!confirm('确定要清除所有缓存吗？这可能会导致应用需要重新下载资源。')) {
         return;
       }
-      
+
       this.loading = true;
       try {
         const result = await this.sendMessageToSW({ type: 'CLEAR_ALL_CACHES' });
-        
+
         if (result.success) {
           this.showMessage('已清除所有缓存', 'success');
           await this.refreshCaches();
@@ -187,14 +187,14 @@ export default {
           reject(new Error('Service Worker 未控制页面'));
           return;
         }
-        
+
         const messageChannel = new MessageChannel();
         messageChannel.port1.onmessage = (event) => {
           resolve(event.data);
         };
-        
+
         navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
-        
+
         // 设置超时
         setTimeout(() => {
           reject(new Error('Service Worker 响应超时'));
@@ -218,14 +218,15 @@ export default {
         const urlObj = new URL(url);
         const pathParts = urlObj.pathname.split('/');
         return pathParts[pathParts.length - 1] || urlObj.hostname;
-      } catch (e) {
+      } catch (error) {
+        console.error('获取文件名失败:', error);
         return url;
       }
     },
     showMessage(message, type = 'info') {
       this.message = message;
       this.messageType = type;
-      
+
       // 5秒后自动清除消息
       setTimeout(() => {
         if (this.message === message) {
@@ -235,4 +236,4 @@ export default {
     }
   }
 }
-</script> 
+</script>

src/components/settings/cards/RandomPickerSettingsCard.vue

@@ -1,117 +0,0 @@
-<template>
-  <v-card border class="mb-4">
-    <v-card-title class="d-flex align-center">
-      <v-icon icon="mdi-account-question" class="mr-2" />
-      随机点名设置
-    </v-card-title>
-
-    <v-card-text>
-      <v-switch
-        v-model="randomPickerEnabled"
-        label="启用随机点名功能"
-        color="primary"
-        hide-details
-        class="mb-4"
-      />
-      
-      <v-switch
-        v-model="randomPickerAnimation"
-        label="启用随机点名动画效果"
-        color="primary"
-        hide-details
-        class="mb-4"
-        :disabled="!randomPickerEnabled"
-      />
-      
-      <v-slider
-        v-model="defaultCount"
-        label="默认抽取人数"
-        min="1"
-        max="10"
-        step="1"
-        thumb-label
-        :disabled="!randomPickerEnabled"
-        class="mb-4"
-      />
-      
-      <v-divider class="my-4" />
-      
-      <div class="text-subtitle-1 mb-2">学生过滤设置</div>
-      
-      <v-switch
-        v-model="excludeAbsent"
-        label="排除请假学生"
-        color="primary"
-        hide-details
-        class="mb-2"
-        :disabled="!randomPickerEnabled"
-      />
-      
-      <v-switch
-        v-model="excludeLate"
-        label="排除迟到学生"
-        color="primary"
-        hide-details
-        class="mb-2"
-        :disabled="!randomPickerEnabled"
-      />
-      
-      <v-switch
-        v-model="excludeExcluded"
-        label="排除不参与学生"
-        color="primary"
-        hide-details
-        class="mb-2"
-        :disabled="!randomPickerEnabled"
-      />
-      
-      <v-alert
-        v-if="randomPickerEnabled"
-        type="info"
-        variant="tonal"
-        class="mt-4"
-        density="compact"
-      >
-        随机点名功能将在主页显示一个按钮，点击后可以随机抽取学生。
-      </v-alert>
-    </v-card-text>
-  </v-card>
-</template>
-
-<script>
-import { getSetting, setSetting } from '@/utils/settings';
-
-export default {
-  name: 'RandomPickerSettingsCard',
-  data() {
-    return {
-      randomPickerEnabled: getSetting('randomPicker.enabled'),
-      randomPickerAnimation: getSetting('randomPicker.animation'),
-      defaultCount: getSetting('randomPicker.defaultCount'),
-      excludeAbsent: getSetting('randomPicker.excludeAbsent'),
-      excludeLate: getSetting('randomPicker.excludeLate'),
-      excludeExcluded: getSetting('randomPicker.excludeExcluded')
-    };
-  },
-  watch: {
-    randomPickerEnabled(newValue) {
-      setSetting('randomPicker.enabled', newValue);
-    },
-    randomPickerAnimation(newValue) {
-      setSetting('randomPicker.animation', newValue);
-    },
-    defaultCount(newValue) {
-      setSetting('randomPicker.defaultCount', newValue);
-    },
-    excludeAbsent(newValue) {
-      setSetting('randomPicker.excludeAbsent', newValue);
-    },
-    excludeLate(newValue) {
-      setSetting('randomPicker.excludeLate', newValue);
-    },
-    excludeExcluded(newValue) {
-      setSetting('randomPicker.excludeExcluded', newValue);
-    }
-  }
-};
-</script> 

src/pages/CacheManagement.vue

@@ -2,8 +2,51 @@
   <v-container>
     <v-row>
       <v-col cols="12">
-        <h1 class="text-h4 mb-4">缓存管理</h1>
-        <p class="mb-6">在这里您可以查看和管理应用的缓存文件。清除缓存可能会导致应用需要重新下载资源。</p>
+        <div class="d-flex align-center mb-6">
+          <v-icon size="x-large" color="primary" class="mr-3">mdi-database-cog-outline</v-icon>
+          <div>
+            <h1 class="text-h4 ">缓存管理</h1>
+            <div class="text-subtitle-1 text-grey">管理应用的本地缓存资源</div>
+          </div>
+        </div>
+        
+        <v-card class="mb-6" variant="tonal" color="info" density="compact">
+          <v-card-text class="d-flex align-center">
+            <v-icon color="info" class="mr-2">mdi-information-outline</v-icon>
+            <span>在这里您可以查看和管理应用的缓存文件。清除缓存可能会导致应用需要重新下载资源，但有助于解决某些显示问题。</span>
+          </v-card-text>
+        </v-card>
+        
+        <v-row>
+          <v-col cols="12" md="8">
+            <v-card class="mb-4" variant="tonal">
+              <v-card-text>
+                <div class="d-flex align-center mb-2">
+                  <v-icon color="primary" class="mr-2">mdi-information</v-icon>
+                  <span class="text-h6">什么是缓存？</span>
+                </div>
+                <p>缓存是浏览器在本地存储的网站资源副本，如图片、脚本和样式表等。这些缓存可以加快页面加载速度，减少数据使用，并在离线时提供基本功能。</p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <v-col cols="12" md="4">
+            <v-card class="mb-4" variant="tonal">
+              <v-card-text>
+                <div class="d-flex align-center mb-2">
+                  <v-icon color="warning" class="mr-2">mdi-lightbulb-outline</v-icon>
+                  <span class="text-h6">何时清除缓存？</span>
+                </div>
+                <ul class="pl-4">
+                  <li>应用显示过时的内容</li>
+                  <li>界面出现异常</li>
+                  <li>应用功能不正常</li>
+                </ul>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+        
         <CacheManager />
       </v-col>
     </v-row>
@@ -17,6 +60,9 @@ export default {
   name: 'CacheManagementPage',
   components: {
     CacheManager
+  },
+  metaInfo: {
+    title: '缓存管理'
   }
 }
 </script> 

src/pages/settings.vue

@@ -134,7 +134,7 @@
         <v-col cols="12">
           <echo-chamber-card border />
         </v-col>
-        
+
         <!-- 关于卡片 -->
         <v-col cols="12">
           <about-card />
@@ -156,12 +156,10 @@
           </v-card>
         </v-col>
 
-        <v-col cols="12" md="6">
-          <random-picker-settings-card />
-        </v-col>
+
       </v-row>
     </v-container>
-    
+
     <!-- 消息记录组件 -->
     <message-log ref="messageLog" />
   </div>
@@ -189,7 +187,6 @@ import AboutCard from '@/components/settings/AboutCard.vue';
 import '../styles/settings.scss';
 import dataProvider from '@/utils/dataProvider';
 import SettingsExplorer from '@/components/settings/SettingsExplorer.vue';
-import RandomPickerSettingsCard from '@/components/settings/cards/RandomPickerSettingsCard.vue';
 
 export default {
   name: 'Settings',
@@ -205,8 +202,7 @@ export default {
     DataProviderSettingsCard,
     ThemeSettingsCard,
     EchoChamberCard,
-    SettingsExplorer,
-    RandomPickerSettingsCard
+    SettingsExplorer
   },
   setup() {
     const { mobile } = useDisplay();