@lobehub/chat 1.76.1 → 1.77.1

package/locales/zh-CN/models.json

@@ -221,6 +221,9 @@
   "Pro/deepseek-ai/DeepSeek-V3": {
     "description": "DeepSeek-V3 是一款拥有 6710 亿参数的混合专家（MoE）语言模型，采用多头潜在注意力（MLA）和 DeepSeekMoE 架构，结合无辅助损失的负载平衡策略，优化推理和训练效率。通过在 14.8 万亿高质量tokens上预训练，并进行监督微调和强化学习，DeepSeek-V3 在性能上超越其他开源模型，接近领先闭源模型。"
   },
+  "Pro/deepseek-ai/DeepSeek-V3-1226": {
+    "description": "DeepSeek-V3 是一款拥有 6710 亿参数的混合专家（MoE）语言模型，采用多头潜在注意力（MLA）和 DeepSeekMoE 架构，结合无辅助损失的负载平衡策略，优化推理和训练效率。通过在 14.8 万亿高质量tokens上预训练，并进行监督微调和强化学习，DeepSeek-V3 在性能上超越其他开源模型，接近领先闭源模型。"
+  },
   "QwQ-32B-Preview": {
     "description": "Qwen QwQ 是由 Qwen 团队开发的实验研究模型，专注于提升AI推理能力。"
   },
@@ -743,6 +746,9 @@
   "deepseek-v3": {
     "description": "DeepSeek-V3 是一个强大的专家混合（MoE）语言模型，拥有总计 6710 亿参数，每个 token 激活 370 亿参数。"
   },
+  "deepseek-v3-0324": {
+    "description": "DeepSeek-V3-0324 为671B 参数 MoE 模型，在编程与技术能力、上下文理解与长文本处理等方面优势突出。"
+  },
   "deepseek/deepseek-chat": {
     "description": "融合通用与代码能力的全新开源模型, 不仅保留了原有 Chat 模型的通用对话能力和 Coder 模型的强大代码处理能力，还更好地对齐了人类偏好。此外，DeepSeek-V2.5 在写作任务、指令跟随等多个方面也实现了大幅提升。"
   },
@@ -845,9 +851,6 @@
   "gemini-1.0-pro-latest": {
     "description": "Gemini 1.0 Pro 是Google的高性能AI模型，专为广泛任务扩展而设计。"
   },
-  "gemini-1.5-flash": {
-    "description": "Gemini 1.5 Flash 是Google最新的多模态AI模型，具备快速处理能力，支持文本、图像和视频输入，适用于多种任务的高效扩展。"
-  },
   "gemini-1.5-flash-001": {
     "description": "Gemini 1.5 Flash 001 是一款高效的多模态模型，支持广泛应用的扩展。"
   },
@@ -902,9 +905,6 @@
   "gemini-2.0-flash-lite-001": {
     "description": "Gemini 2.0 Flash 模型变体，针对成本效益和低延迟等目标进行了优化。"
   },
-  "gemini-2.0-flash-lite-preview-02-05": {
-    "description": "一个 Gemini 2.0 Flash 模型，针对成本效益和低延迟等目标进行了优化。"
-  },
   "gemini-2.0-flash-thinking-exp-01-21": {
     "description": "Gemini 2.0 Flash Thinking Exp 是 Google 的实验性多模态推理AI模型，能对复杂问题进行推理，拥有新的思维能力。"
   },
@@ -1083,7 +1083,7 @@
     "description": "GPT-4o-mini 实时版本，支持音频和文本实时输入输出"
   },
   "gpt-4o-mini-tts": {
-    "description": "GPT-4o mini TTS 是基于 GPT-4o mini 的文本转语音模型，提供高品质的语音生成，同时降低成本。"
+    "description": "GPT-4o mini TTS 是一个基于 GPT-4o mini 构建的文本转语音模型，这是一种快速且强大的语言模型。使用它可以将文本转换为自然听起来的语音文本。最大输入标记数为 2000。"
   },
   "gpt-4o-realtime-preview": {
     "description": "GPT-4o 实时版本，支持音频和文本实时输入输出"
@@ -1718,6 +1718,9 @@
   "qwen2.5-math-7b-instruct": {
     "description": "Qwen-Math 模型具有强大的数学解题能力。"
   },
+  "qwen2.5-omni-7b": {
+    "description": "Qwen-Omni 系列模型支持输入多种模态的数据，包括视频、音频、图片、文本，并输出音频与文本。"
+  },
   "qwen2.5-vl-32b-instruct": {
     "description": "Qwen2.5-VL 系列模型提升了模型的智能水平、实用性和适用性，使其在自然对话、内容创作、专业知识服务及代码开发等场景中表现更优。32B 版本使用了强化学习技术优化模型，与 Qwen2.5 VL 系列的其它模型相比，提供了更符合人类偏好的输出风格、复杂数学问题的推理能力，以及图像细粒度理解与推理能力。"
   },

package/locales/zh-CN/setting.json

@@ -346,6 +346,33 @@
     },
     "title": "主题设置"
   },
+  "storage": {
+    "actions": {
+      "export": {
+        "button": "导出",
+        "exportType": {
+          "agent": "导出助手设定",
+          "agentWithMessage": "导出助手和消息",
+          "all": "导出全局设置和所有助手数据",
+          "allAgent": "导出所有助手设定",
+          "allAgentWithMessage": "导出所有助手和消息",
+          "globalSetting": "导出全局设置"
+        },
+        "title": "导出数据"
+      },
+      "import": {
+        "button": "导入",
+        "title": "导入数据"
+      },
+      "title": "高级操作"
+    },
+    "desc": "当前浏览器中的存储用量",
+    "embeddings": {
+      "used": "向量存储"
+    },
+    "title": "数据存储",
+    "used": "存储用量"
+  },
   "submitAgentModal": {
     "button": "提交助手",
     "identifier": "identifier 助手标识符",
@@ -439,6 +466,7 @@
     "hotkey": "快捷键",
     "llm": "语言模型",
     "provider": "AI 服务商",
+    "storage": "数据存储",
     "sync": "云端同步",
     "system-agent": "系统助手",
     "tts": "语音服务"

package/locales/zh-TW/common.json

@@ -183,7 +183,7 @@
   },
   "fullscreen": "全螢幕模式",
   "historyRange": "歷史範圍",
-  "import": "匯入設定",
+  "importData": "匯入資料",
   "importModal": {
     "error": {
       "desc": "非常抱歉，資料匯入過程發生異常。請嘗試重新匯入，或 <1>提交問題</1>，我們將會第一時間幫你排查問題。",
@@ -205,7 +205,8 @@
       "sessions": "助手",
       "skips": "重複跳過",
       "topics": "話題",
-      "type": "資料類型"
+      "type": "資料類型",
+      "update": "記錄更新"
     },
     "title": "匯入資料",
     "uploading": {
@@ -214,6 +215,16 @@
       "speed": "上傳速度"
     }
   },
+  "importPreview": {
+    "confirmImport": "確認導入",
+    "tables": {
+      "count": "記錄數",
+      "name": "表名"
+    },
+    "title": "導入數據預覽",
+    "totalRecords": "總計將導入 {{count}} 條記錄",
+    "totalTables": "{{count}} 個表"
+  },
   "information": "社群與資訊",
   "installPWA": "安裝瀏覽器應用 (PWA)",
   "lang": {

package/locales/zh-TW/error.json

@@ -16,6 +16,16 @@
     "detail": "錯誤詳情",
     "title": "請求失敗"
   },
+  "import": {
+    "importConfigFile": {
+      "description": "出錯原因: {{reason}}",
+      "title": "匯入失敗"
+    },
+    "incompatible": {
+      "description": "該檔案由更高版本匯出，請嘗試升級到最新版本後再重新匯入",
+      "title": "當前應用不支援匯入該檔案"
+    }
+  },
   "loginRequired": {
     "desc": "即將自動跳轉到登入頁面",
     "title": "請登入後使用該功能"

package/locales/zh-TW/models.json

@@ -221,6 +221,9 @@
   "Pro/deepseek-ai/DeepSeek-V3": {
     "description": "DeepSeek-V3 是一款擁有 6710 億參數的混合專家（MoE）語言模型，採用多頭潛在注意力（MLA）和 DeepSeekMoE 架構，結合無輔助損失的負載平衡策略，優化推理和訓練效率。透過在 14.8 萬億高質量tokens上預訓練，並進行監督微調和強化學習，DeepSeek-V3 在性能上超越其他開源模型，接近領先閉源模型。"
   },
+  "Pro/deepseek-ai/DeepSeek-V3-1226": {
+    "description": "DeepSeek-V3 是一款擁有 6710 億參數的混合專家（MoE）語言模型，採用多頭潛在注意力（MLA）和 DeepSeekMoE 架構，結合無輔助損失的負載平衡策略，優化推理和訓練效率。透過在 14.8 萬兆高品質 tokens 上預訓練，並進行監督微調和強化學習，DeepSeek-V3 在性能上超越其他開源模型，接近領先的閉源模型。"
+  },
   "QwQ-32B-Preview": {
     "description": "QwQ-32B-Preview 是一款獨具創新的自然語言處理模型，能夠高效處理複雜的對話生成與上下文理解任務。"
   },
@@ -743,6 +746,9 @@
   "deepseek-v3": {
     "description": "DeepSeek-V3 為杭州深度求索人工智能基礎技術研究有限公司自研的 MoE 模型，其多項評測成績突出，在主流榜單中位列開源模型榜首。V3 相較 V2.5 模型生成速度實現 3 倍提升，為用戶帶來更加迅速流暢的使用體驗。"
   },
+  "deepseek-v3-0324": {
+    "description": "DeepSeek-V3-0324 為 671B 參數的 MoE 模型，在程式設計與技術能力、上下文理解與長文本處理等方面優勢突出。"
+  },
   "deepseek/deepseek-chat": {
     "description": "融合通用與代碼能力的全新開源模型，不僅保留了原有 Chat 模型的通用對話能力和 Coder 模型的強大代碼處理能力，還更好地對齊了人類偏好。此外，DeepSeek-V2.5 在寫作任務、指令跟隨等多個方面也實現了大幅提升。"
   },
@@ -845,9 +851,6 @@
   "gemini-1.0-pro-latest": {
     "description": "Gemini 1.0 Pro 是 Google 的高性能 AI 模型，專為廣泛任務擴展而設計。"
   },
-  "gemini-1.5-flash": {
-    "description": "Gemini 1.5 Flash 是 Google 最新的多模態 AI 模型，具備快速處理能力，支持文本、圖像和視頻輸入，適用於多種任務的高效擴展。"
-  },
   "gemini-1.5-flash-001": {
     "description": "Gemini 1.5 Flash 001 是一款高效的多模態模型，支持廣泛應用的擴展。"
   },
@@ -902,9 +905,6 @@
   "gemini-2.0-flash-lite-001": {
     "description": "Gemini 2.0 Flash 模型變體，針對成本效益和低延遲等目標進行了優化。"
   },
-  "gemini-2.0-flash-lite-preview-02-05": {
-    "description": "一個 Gemini 2.0 Flash 模型，針對成本效益和低延遲等目標進行了優化。"
-  },
   "gemini-2.0-flash-thinking-exp-01-21": {
     "description": "Gemini 2.0 Flash Exp 是 Google 最新的實驗性多模態AI模型，擁有下一代特性，卓越的速度，原生工具調用以及多模態生成。"
   },
@@ -1718,6 +1718,9 @@
   "qwen2.5-math-7b-instruct": {
     "description": "Qwen-Math模型具有強大的數學解題能力。"
   },
+  "qwen2.5-omni-7b": {
+    "description": "Qwen-Omni 系列模型支援輸入多種模態的數據，包括視頻、音頻、圖片、文本，並輸出音頻與文本。"
+  },
   "qwen2.5-vl-32b-instruct": {
     "description": "Qwen2.5-VL 系列模型提升了模型的智能水準、實用性和適用性，使其在自然對話、內容創作、專業知識服務及程式碼開發等場景中表現更優。32B 版本使用了強化學習技術優化模型，與 Qwen2.5 VL 系列的其他模型相比，提供了更符合人類偏好的輸出風格、複雜數學問題的推理能力，以及影像細粒度理解與推理能力。"
   },

package/locales/zh-TW/setting.json

@@ -346,6 +346,33 @@
     },
     "title": "主題設定"
   },
+  "storage": {
+    "actions": {
+      "export": {
+        "button": "匯出",
+        "exportType": {
+          "agent": "匯出助手設定",
+          "agentWithMessage": "匯出助手和訊息",
+          "all": "匯出全域設定和所有助手資料",
+          "allAgent": "匯出所有助手設定",
+          "allAgentWithMessage": "匯出所有助手和訊息",
+          "globalSetting": "匯出全域設定"
+        },
+        "title": "匯出資料"
+      },
+      "import": {
+        "button": "匯入",
+        "title": "匯入資料"
+      },
+      "title": "進階操作"
+    },
+    "desc": "當前瀏覽器中的儲存用量",
+    "embeddings": {
+      "used": "向量儲存"
+    },
+    "title": "資料儲存",
+    "used": "儲存用量"
+  },
   "submitAgentModal": {
     "button": "提交助手",
     "identifier": "助手標識符",
@@ -439,6 +466,7 @@
     "hotkey": "快速鍵",
     "llm": "語言模型",
     "provider": "AI 服務商",
+    "storage": "資料儲存",
     "sync": "雲端同步",
     "system-agent": "系統助手",
     "tts": "語音服務"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.76.1",
+  "version": "1.77.1",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/[variants]/(main)/(mobile)/me/data/features/Category.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import Cell, { CellProps } from '@/components/Cell';
 import DataImporter from '@/features/DataImporter';
-import { configService } from '@/services/config';
+import { configService } from '@/services/export/_deprecated';
 
 const Category = memo(() => {
   const { t } = useTranslation('common');
@@ -38,7 +38,7 @@ const Category = memo(() => {
     },
     {
       key: 'import',
-      label: <DataImporter>{t('import')}</DataImporter>,
+      label: <DataImporter>{t('importData')}</DataImporter>,
     },
   ];
 

package/src/app/[variants]/(main)/chat/features/Migration/UpgradeButton.tsx

@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { configService } from '@/services/config';
+import { ClientService } from '@/services/import/_deprecated';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 
@@ -31,6 +31,7 @@ const UpgradeButton = memo<UpgradeButtonProps>(
       try {
         setUpgradeStatus(UpgradeStatus.UPGRADING);
 
+        const configService = new ClientService();
         await configService.importConfigState({
           exportType: 'sessions',
           state: state,

package/src/app/[variants]/(main)/settings/common/features/Common.tsx

@@ -9,12 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { useSyncSettings } from '@/app/[variants]/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
-import { useChatStore } from '@/store/chat';
-import { useFileStore } from '@/store/file';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';
-import { useSessionStore } from '@/store/session';
-import { useToolStore } from '@/store/tool';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
 
@@ -26,16 +22,6 @@ const Common = memo(() => {
 
   const showAccessCodeConfig = useServerConfigStore(serverConfigSelectors.enabledAccessCode);
 
-  const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
-    s.clearSessions,
-    s.clearSessionGroups,
-  ]);
-  const [clearTopics, clearAllMessages] = useChatStore((s) => [
-    s.removeAllTopics,
-    s.clearAllMessages,
-  ]);
-  const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
-  const removeAllPlugins = useToolStore((s) => s.removeAllPlugins);
   const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
   const [setSettings, resetSettings] = useUserStore((s) => [s.setSettings, s.resetSettings]);
 
@@ -54,26 +40,6 @@ const Common = memo(() => {
     });
   }, []);
 
-  const handleClear = useCallback(() => {
-    modal.confirm({
-      centered: true,
-      okButtonProps: {
-        danger: true,
-      },
-      onOk: async () => {
-        await clearSessions();
-        await removeAllPlugins();
-        await clearTopics();
-        await removeAllFiles();
-        await clearAllMessages();
-        await clearSessionGroups();
-
-        message.success(t('danger.clear.success'));
-      },
-      title: t('danger.clear.confirm'),
-    });
-  }, []);
-
   const system: SettingItemGroup = {
     children: [
       {
@@ -98,16 +64,6 @@ const Common = memo(() => {
         label: t('danger.reset.title'),
         minWidth: undefined,
       },
-      {
-        children: (
-          <Button danger onClick={handleClear} type="primary">
-            {t('danger.clear.action')}
-          </Button>
-        ),
-        desc: t('danger.clear.desc'),
-        label: t('danger.clear.title'),
-        minWidth: undefined,
-      },
     ],
     title: t('settingSystem.title'),
   };

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -1,6 +1,16 @@
 import { Icon } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { Bot, Brain, Cloudy, Info, KeyboardIcon, Mic2, Settings2, Sparkles } from 'lucide-react';
+import {
+  Bot,
+  Brain,
+  Cloudy,
+  Database,
+  Info,
+  KeyboardIcon,
+  Mic2,
+  Settings2,
+  Sparkles,
+} from 'lucide-react';
 import Link from 'next/link';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -30,14 +40,15 @@ export const useCategory = () => {
           ),
         },
         {
-          icon: <Icon icon={Sparkles} />,
-          key: SettingsTabs.SystemAgent,
+          icon: <Icon icon={Bot} />,
+          key: SettingsTabs.Agent,
           label: (
-            <Link href={'/settings/system-agent'} onClick={(e) => e.preventDefault()}>
-              {t('tab.system-agent')}
+            <Link href={'/settings/agent'} onClick={(e) => e.preventDefault()}>
+              {t('tab.agent')}
             </Link>
           ),
         },
+        // TODO: remove in V2
         enableWebrtc && {
           icon: <Icon icon={Cloudy} />,
           key: SettingsTabs.Sync,
@@ -52,6 +63,18 @@ export const useCategory = () => {
             </Link>
           ),
         },
+        !mobile && {
+          icon: <Icon icon={KeyboardIcon} />,
+          key: SettingsTabs.Hotkey,
+          label: (
+            <Link href={'/settings/hotkey'} onClick={(e) => e.preventDefault()}>
+              {t('tab.hotkey')}
+            </Link>
+          ),
+        },
+        {
+          type: 'divider',
+        },
         showLLM &&
           // TODO: Remove /llm when v2.0
           (isDeprecatedEdition
@@ -84,20 +107,23 @@ export const useCategory = () => {
           ),
         },
         {
-          icon: <Icon icon={Bot} />,
-          key: SettingsTabs.Agent,
+          icon: <Icon icon={Sparkles} />,
+          key: SettingsTabs.SystemAgent,
           label: (
-            <Link href={'/settings/agent'} onClick={(e) => e.preventDefault()}>
-              {t('tab.agent')}
+            <Link href={'/settings/system-agent'} onClick={(e) => e.preventDefault()}>
+              {t('tab.system-agent')}
             </Link>
           ),
         },
-        !mobile && {
-          icon: <Icon icon={KeyboardIcon} />,
-          key: SettingsTabs.Hotkey,
+        {
+          type: 'divider',
+        },
+        {
+          icon: <Icon icon={Database} />,
+          key: SettingsTabs.Storage,
           label: (
-            <Link href={'/settings/hotkey'} onClick={(e) => e.preventDefault()}>
-              {t('tab.hotkey')}
+            <Link href={'/settings/storage'} onClick={(e) => e.preventDefault()}>
+              {t('tab.storage')}
             </Link>
           ),
         },

package/src/app/[variants]/(main)/settings/storage/Advanced.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { Form, Icon, type ItemGroup } from '@lobehub/ui';
+import { App, Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { HardDriveDownload, HardDriveUpload } from 'lucide-react';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { FORM_STYLE } from '@/const/layoutTokens';
+import DataImporter from '@/features/DataImporter';
+import { configService } from '@/services/config';
+import { useChatStore } from '@/store/chat';
+import { useFileStore } from '@/store/file';
+import { useSessionStore } from '@/store/session';
+import { useToolStore } from '@/store/tool';
+import { useUserStore } from '@/store/user';
+import { settingsSelectors } from '@/store/user/selectors';
+
+const AdvancedActions = () => {
+  const { t } = useTranslation('setting');
+  const [form] = Form.useForm();
+  const { message, modal } = App.useApp();
+  const [clearSessions, clearSessionGroups] = useSessionStore((s) => [
+    s.clearSessions,
+    s.clearSessionGroups,
+  ]);
+  const [clearTopics, clearAllMessages] = useChatStore((s) => [
+    s.removeAllTopics,
+    s.clearAllMessages,
+  ]);
+  const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
+  const removeAllPlugins = useToolStore((s) => s.removeAllPlugins);
+  const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
+
+  const handleClear = useCallback(() => {
+    modal.confirm({
+      centered: true,
+      okButtonProps: {
+        danger: true,
+      },
+      onOk: async () => {
+        await clearSessions();
+        await removeAllPlugins();
+        await clearTopics();
+        await removeAllFiles();
+        await clearAllMessages();
+        await clearSessionGroups();
+
+        message.success(t('danger.clear.success'));
+      },
+      title: t('danger.clear.confirm'),
+    });
+  }, []);
+
+  const system: ItemGroup = {
+    children: [
+      {
+        children: (
+          <DataImporter>
+            <Button icon={<Icon icon={HardDriveDownload} />}>
+              {t('storage.actions.import.button')}
+            </Button>
+          </DataImporter>
+        ),
+        label: t('storage.actions.import.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Button
+            icon={<Icon icon={HardDriveUpload} />}
+            onClick={() => {
+              configService.exportAll();
+            }}
+          >
+            {t('storage.actions.export.button')}
+          </Button>
+        ),
+        label: t('storage.actions.export.title'),
+        minWidth: undefined,
+      },
+      {
+        children: (
+          <Button danger onClick={handleClear} type="primary">
+            {t('danger.clear.action')}
+          </Button>
+        ),
+        desc: t('danger.clear.desc'),
+        label: t('danger.clear.title'),
+        minWidth: undefined,
+      },
+    ],
+    title: t('storage.actions.title'),
+  };
+  return (
+    <Form
+      form={form}
+      initialValues={settings}
+      items={[system]}
+      itemsType={'group'}
+      variant={'pure'}
+      {...FORM_STYLE}
+    />
+  );
+};
+
+export default AdvancedActions;

package/src/app/[variants]/(main)/settings/storage/IndexedDBStorage.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import { DatabaseIcon } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+import useSWR from 'swr';
+
+import GroupIcon from '@/components/GroupIcon';
+import IndexCard from '@/components/IndexCard';
+import ProgressItem from '@/components/ProgressItem';
+import { formatSize } from '@/utils/format';
+
+const IndexedDBStorage = memo(() => {
+  const { t } = useTranslation('setting');
+  const { data, isLoading } = useSWR('fetch-client-usage', async () => {
+    const estimate = await navigator.storage.estimate();
+    const quota = estimate.quota || 0;
+    const usage = estimate.usage || 0;
+
+    const percent = (usage / quota) * 100;
+
+    return { percent: percent < 1 ? 1 : percent, total: quota, used: usage };
+  });
+
+  return (
+    <IndexCard
+      desc={t('storage.desc', { day: 15 })}
+      icon={<GroupIcon icon={DatabaseIcon} />}
+      padding={0}
+      title={t('storage.title')}
+    >
+      {isLoading ? (
+        <Flexbox padding={16}>
+          <Skeleton active paragraph={{ rows: 1, width: '100%' }} title={false} />
+          <Skeleton.Button active style={{ height: 48, width: '100%' }} />
+        </Flexbox>
+      ) : (
+        <Flexbox gap={16} paddingBlock={16}>
+          <ProgressItem
+            percent={data?.percent || 0}
+            title={t('storage.used')}
+            usage={{
+              total: data ? formatSize(data.total) : '-',
+              used: data ? formatSize(data.used) : '-',
+            }}
+          />
+        </Flexbox>
+      )}
+    </IndexCard>
+  );
+});
+
+export default IndexedDBStorage;

package/src/app/[variants]/(main)/settings/storage/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { isServerMode } from '@/const/version';
+
+import Advanced from './Advanced';
+import IndexedDBStorage from './IndexedDBStorage';
+
+const StorageEstimate = () => {
+  return (
+    <>
+      {!isServerMode && <IndexedDBStorage />}
+      <Advanced />
+    </>
+  );
+};
+
+export default StorageEstimate;

package/src/components/GroupIcon/index.tsx

@@ -0,0 +1,25 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { LucideIcon } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  icon: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 8px;
+    background: ${token.colorBgElevated};
+  `,
+}));
+
+const GroupIcon = memo<{ icon: LucideIcon }>(({ icon }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Center className={styles.icon} flex={'none'} height={40} width={40}>
+      <Icon icon={icon} size={{ fontSize: 24 }} />
+    </Center>
+  );
+});
+
+export default GroupIcon;