更新逻辑，缓存

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();