feat: 添加系统设置页面，集成应用更新和缓存管理功能，优化用户体验

src/views/system-settings/index.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import { alertController, toastController } from "@ionic/vue";
+import { checkbox, close, information, languageOutline, refresh } from "ionicons/icons";
+
+const { cacheSize, calculateCacheSize, clearCache } = useCacheSize();
+const { isChecking, checkForUpdate } = useAppUpdate();
+
+function handleClearCache() {
+  clearCache();
+  calculateCacheSize();
+  toastController.create({
+    message: "缓存已清除",
+    duration: 2000,
+    icon: checkbox,
+    position: "bottom",
+    color: "success",
+  }).then(toast => toast.present());
+}
+
+async function handleCheckUpdate() {
+  try {
+    const result = await checkForUpdate();
+
+    if (result.hasUpdate) {
+      const alert = await alertController.create({
+        header: "发现新版本",
+        message: `当前版本: ${result.currentVersion}\n最新版本: ${result.latestVersion || "新版本"}`,
+        buttons: [
+          {
+            text: "取消",
+            role: "cancel",
+          },
+          {
+            text: "立即更新",
+            handler: () => {
+              window.location.reload();
+            },
+          },
+        ],
+      });
+      await alert.present();
+    }
+    else {
+      const toast = await toastController.create({
+        message: "已是最新版本",
+        duration: 2000,
+        icon: checkbox,
+        position: "bottom",
+        color: "success",
+      });
+      await toast.present();
+    }
+  }
+  catch (error) {
+    const toast = await toastController.create({
+      message: "检查更新失败",
+      duration: 2000,
+      position: "bottom",
+      color: "danger",
+    });
+    await toast.present();
+  }
+}
+
+onMounted(() => {
+  calculateCacheSize();
+});
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" />
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-list lines="full">
+        <ion-list-header>
+          <ion-label>设置</ion-label>
+        </ion-list-header>
+        <ion-item button>
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="icon">
+                <ion-icon :icon="languageOutline" class="text-lg" />
+              </div>
+              <div class="text-sm font-semibold">
+                语言
+              </div>
+            </div>
+            <div class="end">
+              简体中文
+            </div>
+          </div>
+        </ion-item>
+        <ion-item button>
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="icon">
+                <ion-icon :icon="information" class="text-lg" />
+              </div>
+              <div class="text-sm font-semibold">
+                关于我们
+              </div>
+            </div>
+          </div>
+        </ion-item>
+        <ion-item button @click="handleClearCache">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="icon">
+                <ion-icon :icon="close" class="text-lg" />
+              </div>
+              <div class="text-sm font-semibold">
+                清除缓存
+              </div>
+            </div>
+            <div class="end">
+              {{ cacheSize }}
+            </div>
+          </div>
+        </ion-item>
+        <ion-item button @click="handleCheckUpdate">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="icon">
+                <ion-icon :icon="refresh" class="text-lg" :class="{ 'animate-spin': isChecking }" />
+              </div>
+              <div class="text-sm font-semibold">
+                检查更新
+              </div>
+            </div>
+          </div>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+ion-item {
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 6px;
+  --padding-bottom: 6px;
+  border-radius: 0.25rem;
+}
+
+.end {
+  @apply text-sm text-gray-500;
+}
+
+.icon {
+  @apply bg-[#1c1c1c] text-white;
+}
+
+.icon {
+  @apply rounded-lg p-2 w-7 h-7 flex items-center justify-center;
+}
+</style>

src/views/user/components/user-info.vue

@@ -6,14 +6,14 @@ const { user } = useAuth();
 
 <template>
   <div class="user-info-container">
-    <div class="user-info">
+    <div class="user-info" @click="$router.push('/user/settings')">
       <ui-avatar class="size-18" />
       <div>
         <div class="user-name">
           {{ user?.email }}
         </div>
-        <div class="user-uid mt-2 text-sm text-text-100">
-          UID: 95223143 <ion-icon :icon="copyOutline" />
+        <div class="user-uid mt-1 text-xs text-text-100">
+          UID: 95223143
         </div>
       </div>
     </div>

src/views/user/index.vue

@@ -31,7 +31,7 @@ async function handleRefresh(event: RefresherCustomEvent) {
           <ion-button fill="clear">
             <ion-icon slot="icon-only" :icon="notificationsOutline" />
           </ion-button>
-          <ion-button fill="clear" router-link="/user/settings">
+          <ion-button fill="clear" router-link="/system-settings">
             <ion-icon slot="icon-only" :icon="settingsOutline" />
           </ion-button>
         </div>