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

src/composables/useCacheSize.ts

@@ -0,0 +1,122 @@
+/**
+ * 获取应用缓存大小的组合式函数
+ */
+export function useCacheSize() {
+  const cacheSize = ref<string>("计算中...");
+  const isLoading = ref(false);
+
+  /**
+   * 计算当前应用使用的缓存大小
+   */
+  async function calculateCacheSize() {
+    isLoading.value = true;
+    try {
+      if ("storage" in navigator && "estimate" in navigator.storage) {
+        // 使用 Storage API 获取精确的存储使用量
+        const estimate = await navigator.storage.estimate();
+        const usageInMB = ((estimate.usage || 0) / (1024 * 1024)).toFixed(2);
+        cacheSize.value = `${usageInMB} MB`;
+      }
+      else {
+        // 降级方案：计算 localStorage 大小
+        let totalSize = 0;
+        for (const key in localStorage) {
+          if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
+            totalSize += localStorage[key].length + key.length;
+          }
+        }
+        const sizeInKB = (totalSize / 1024).toFixed(2);
+        cacheSize.value = `${sizeInKB} KB (仅 localStorage)`;
+      }
+    }
+    catch (error) {
+      console.error("计算缓存大小失败:", error);
+      cacheSize.value = "未知";
+    }
+    finally {
+      isLoading.value = false;
+    }
+  }
+
+  /**
+   * 获取缓存大小的原始字节数
+   */
+  async function getCacheSizeInBytes(): Promise<number> {
+    try {
+      if ("storage" in navigator && "estimate" in navigator.storage) {
+        const estimate = await navigator.storage.estimate();
+        return estimate.usage || 0;
+      }
+      else {
+        let totalSize = 0;
+        for (const key in localStorage) {
+          if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
+            totalSize += localStorage[key].length + key.length;
+          }
+        }
+        return totalSize;
+      }
+    }
+    catch (error) {
+      console.error("获取缓存大小失败:", error);
+      return 0;
+    }
+  }
+
+  /**
+   * 清除应用缓存
+   */
+  async function clearCache(): Promise<void> {
+    isLoading.value = true;
+    try {
+      // 清除 localStorage
+      localStorage.clear();
+
+      // 清除 sessionStorage
+      sessionStorage.clear();
+
+      // 清除 Cache API 缓存
+      if ("caches" in window) {
+        const cacheNames = await caches.keys();
+        await Promise.all(
+          cacheNames.map(cacheName => caches.delete(cacheName)),
+        );
+      }
+
+      // 清除 IndexedDB（如果需要）
+      if ("indexedDB" in window) {
+        const databases = await indexedDB.databases();
+        await Promise.all(
+          databases.map((db) => {
+            if (db.name) {
+              return new Promise<void>((resolve, reject) => {
+                const request = indexedDB.deleteDatabase(db.name!);
+                request.onsuccess = () => resolve();
+                request.onerror = () => reject(request.error);
+              });
+            }
+            return Promise.resolve();
+          }),
+        );
+      }
+
+      // 重新计算缓存大小
+      await calculateCacheSize();
+    }
+    catch (error) {
+      console.error("清除缓存失败:", error);
+      throw error;
+    }
+    finally {
+      isLoading.value = false;
+    }
+  }
+
+  return {
+    cacheSize,
+    isLoading,
+    calculateCacheSize,
+    getCacheSizeInBytes,
+    clearCache,
+  };
+}