@lobehub/chat 0.126.5 → 0.127.1

package/locales/pt-BR/common.json

@@ -103,6 +103,7 @@
     "bedrock": "AWS Bedrock",
     "google": "Google",
     "moonshot": "Moonshot IA",
+    "ollama": "Ollama",
     "oneapi": "One API",
     "openai": "OpenAI",
     "zhipu": "Zhipu AI"

package/locales/pt-BR/error.json

@@ -42,10 +42,12 @@
     "InvalidBedrockCredentials": "Credenciais Bedrock inválidas, por favor, verifique AccessKeyId/SecretAccessKey e tente novamente",
     "InvalidGoogleAPIKey": "Chave de API Google incorreta ou vazia, por favor, verifique a chave de API Google e tente novamente",
     "InvalidMoonshotAPIKey": "A chave da API Moonshot AI está incorreta ou vazia. Por favor, verifique a chave da API Moonshot e tente novamente.",
+    "InvalidOllamaArgs": "Configuração Ollama inválida, verifique a configuração do Ollama e tente novamente",
     "InvalidZhipuAPIKey": "Chave de API Zhipu incorreta ou vazia, por favor, verifique a chave de API Zhipu e tente novamente",
     "LocationNotSupportError": "Desculpe, sua localização atual não suporta este serviço de modelo, pode ser devido a restrições geográficas ou serviço não disponível. Por favor, verifique se a localização atual suporta o uso deste serviço ou tente usar outras informações de localização.",
     "MoonshotBizError": "O serviço Moonshot na face oculta da lua encontrou um erro. Por favor, verifique as informações abaixo ou tente novamente.",
     "NoOpenAIAPIKey": "A chave de API do OpenAI está em branco. Adicione uma chave de API personalizada do OpenAI",
+    "OllamaBizError": "Erro de negócio ao solicitar o serviço Ollama, verifique as informações a seguir ou tente novamente",
     "OpenAIBizError": "Erro ao solicitar o serviço OpenAI. Verifique ou tente novamente com base nas informações abaixo",
     "PluginApiNotFound": "Desculpe, o API especificado não existe no manifesto do plugin. Verifique se o método de solicitação corresponde ao API do manifesto do plugin",
     "PluginApiParamsError": "Desculpe, a validação dos parâmetros de entrada da solicitação do plugin falhou. Verifique se os parâmetros de entrada correspondem às informações de descrição do API",

package/locales/pt-BR/setting.json

@@ -84,6 +84,22 @@
         "title": "Chave da API"
       }
     },
+    "Ollama": {
+      "checker": {
+        "desc": "Verifique se o endereço do proxy está preenchido corretamente"
+      },
+      "customModelName": {
+        "desc": "Adicione modelos personalizados, separados por vírgula (,) se forem vários modelos",
+        "placeholder": "vicuna,llava,codellama,llama2:13b-text",
+        "title": "Nome do modelo personalizado"
+      },
+      "endpoint": {
+        "desc": "Insira o endereço do proxy da interface Ollama. Deixe em branco se não for especificado localmente",
+        "placeholder": "http://127.0.0.1:11434/v1",
+        "title": "Endereço do proxy da interface"
+      },
+      "title": "Ollama"
+    },
     "OpenAI": {
       "azureApiVersion": {
         "desc": "Versão da API Azure, no formato YYYY-MM-DD. Consulte a [última versão](https://learn.microsoft.com/pt-br/azure/ai-services/openai/reference#chat-completions)",

package/locales/ru-RU/common.json

@@ -103,6 +103,7 @@
     "bedrock": "AWS Bedrock",
     "google": "Google",
     "moonshot": "Искусственный интеллект Moonshot",
+    "ollama": "Оллама",
     "oneapi": "One API",
     "openai": "OpenAI",
     "zhipu": "Zhipu AI"

package/locales/ru-RU/error.json

@@ -42,10 +42,12 @@
     "InvalidBedrockCredentials": "Аутентификация Bedrock не прошла, пожалуйста, проверьте AccessKeyId/SecretAccessKey и повторите попытку",
     "InvalidGoogleAPIKey": "Неверный или пустой ключ API Google, пожалуйста, проверьте ключ API Google и повторите попытку",
     "InvalidMoonshotAPIKey": "Moonshot AI API Key неверный или пустой, пожалуйста, проверьте ключ API Moonshot и повторите попытку",
+    "InvalidOllamaArgs": "Неверная конфигурация Ollama, пожалуйста, проверьте конфигурацию Ollama и повторите попытку",
     "InvalidZhipuAPIKey": "Неверный или пустой ключ API Zhipu, пожалуйста, проверьте ключ API Zhipu и повторите попытку",
     "LocationNotSupportError": "Извините, ваше текущее местоположение не поддерживает эту службу модели, возможно из-за ограничений региона или недоступности службы. Пожалуйста, убедитесь, что текущее местоположение поддерживает использование этой службы, или попробуйте использовать другую информацию о местоположении.",
     "MoonshotBizError": "请求月球暗面服务出错，请根据以下信息排查或重试",
     "NoOpenAIAPIKey": "Ключ OpenAI API пуст, пожалуйста, добавьте свой собственный ключ OpenAI API",
+    "OllamaBizError": "Ошибка обращения к сервису Ollama, пожалуйста, проверьте следующую информацию или повторите попытку",
     "OpenAIBizError": "Ошибка запроса службы OpenAI. Устраните неполадку или повторите попытку, основываясь на следующей информации.",
     "PluginApiNotFound": "К сожалению, API не существует в манифесте плагина. Пожалуйста, проверьте, соответствует ли ваш метод запроса API манифеста плагина",
     "PluginApiParamsError": "К сожалению, проверка входных параметров для запроса плагина не удалась. Пожалуйста, проверьте, соответствуют ли входные параметры описанию API",

package/locales/ru-RU/setting.json

@@ -84,6 +84,22 @@
         "title": "Ключ API"
       }
     },
+    "Ollama": {
+      "checker": {
+        "desc": "Проверьте правильность заполнения адреса прокси"
+      },
+      "customModelName": {
+        "desc": "Добавьте пользовательскую модель, разделяя их запятыми (,)",
+        "placeholder": "викунья,льама,кодельльама,льама2:13b-текст",
+        "title": "Имя пользовательской модели"
+      },
+      "endpoint": {
+        "desc": "Введите адрес прокси-сервера Ollama, оставьте пустым, если не указано локально",
+        "placeholder": "http://127.0.0.1:11434/v1",
+        "title": "Адрес прокси-сервера"
+      },
+      "title": "Ollama"
+    },
     "OpenAI": {
       "azureApiVersion": {
         "desc": "Версия API Azure, следуйте формату ГГГГ-ММ-ДД, см. [последнюю версию](https://learn.microsoft.com/ru-ru/azure/ai-services/openai/reference#chat-completions)",

package/locales/tr-TR/common.json

@@ -103,6 +103,7 @@
     "bedrock": "AWS Bedrock",
     "google": "Google",
     "moonshot": "Moonshot AI",
+    "ollama": "Ollama",
     "oneapi": "One API",
     "openai": "OpenAI",
     "zhipu": "Zhipu AI"

package/locales/tr-TR/error.json

@@ -42,10 +42,12 @@
     "InvalidBedrockCredentials": "Bedrock kimlik doğrulaması geçersiz, lütfen AccessKeyId/SecretAccessKey bilgilerinizi kontrol edip tekrar deneyin",
     "InvalidGoogleAPIKey": "Google API Anahtarı yanlış veya boş, lütfen Google API Anahtarınızı kontrol edip tekrar deneyin",
     "InvalidMoonshotAPIKey": "Geçersiz veya boş Moonshot AI API Anahtarı, lütfen Moonshot API Anahtarınızı kontrol edip tekrar deneyin",
+    "InvalidOllamaArgs": "Ollama yapılandırması yanlış, lütfen Ollama yapılandırmasını kontrol edip tekrar deneyin",
     "InvalidZhipuAPIKey": "Zhipu API Anahtarı yanlış veya boş, lütfen Zhipu API Anahtarınızı kontrol edip tekrar deneyin",
     "LocationNotSupportError": "Üzgünüz, bulunduğunuz konum bu model hizmetini desteklemiyor, muhtemelen bölge kısıtlamaları veya hizmetin henüz açılmamış olması nedeniyle. Lütfen mevcut konumun bu hizmeti kullanmaya uygun olup olmadığını doğrulayın veya başka bir konum bilgisi kullanmayı deneyin.",
     "MoonshotBizError": "Moonshot hizmetinde bir hata oluştu, lütfen aşağıdaki bilgilere göre sorunu giderin veya tekrar deneyin",
     "NoOpenAIAPIKey": "OpenAI API Anahtarı boş, lütfen özel bir OpenAI API Anahtarı ekleyin",
+    "OllamaBizError": "Ollama servisine yapılan istekte hata oluştu, lütfen aşağıdaki bilgilere göre sorunu gidermeye çalışın veya tekrar deneyin",
     "OpenAIBizError": "OpenAI hizmeti talep ederken hata oluştu. Aşağıdaki bilgilere dayanarak sorun giderin veya tekrar deneyin.",
     "PluginApiNotFound": "Üzgünüm, eklentinin bildiriminde API mevcut değil. Lütfen istek yönteminizin eklenti bildirim API'sı ile eşleşip eşleşmediğini kontrol edin",
     "PluginApiParamsError": "Üzgünüm, eklenti isteği için giriş parametre doğrulaması başarısız oldu. Lütfen giriş parametrelerinin API açıklamasıyla eşleşip eşleşmediğini kontrol edin",

package/locales/tr-TR/setting.json

@@ -84,6 +84,22 @@
         "title": "API 密钥"
       }
     },
+    "Ollama": {
+      "checker": {
+        "desc": "Proxy adresinin doğru şekilde doldurulup doldurulmadığını test edin"
+      },
+      "customModelName": {
+        "desc": "Özel model ekleyin, birden fazla model virgül (,) ile ayrılır",
+        "placeholder": "vicuna,llama,codellama,llama2:13b-text",
+        "title": "Özel Model Adı"
+      },
+      "endpoint": {
+        "desc": "Ollama arayüzü proxy adresini girin, yerel olarak özel bir adres belirtilmemişse boş bırakın",
+        "placeholder": "http://127.0.0.1:11434/v1",
+        "title": "Proxy Adresi"
+      },
+      "title": "Ollama"
+    },
     "OpenAI": {
       "azureApiVersion": {
         "desc": "Azure için API sürümü, YYYY-MM-DD formatını takip eder, [en son sürümü kontrol edin](https://learn.microsoft.com/en-us/azure/ai-services/openai/reference#chat-completions)",

package/locales/vi-VN/common.json

@@ -103,6 +103,7 @@
     "bedrock": "AWS Bedrock",
     "google": "Google",
     "moonshot": "Moonshot AI",
+    "ollama": "Ollama",
     "oneapi": "One API",
     "openai": "OpenAI",
     "zhipu": "Zhipu AI"

package/locales/vi-VN/error.json

@@ -42,10 +42,12 @@
     "InvalidBedrockCredentials": "Xác thực Bedrock không thành công, vui lòng kiểm tra AccessKeyId/SecretAccessKey và thử lại",
     "InvalidGoogleAPIKey": "Khóa API Google không chính xác hoặc trống, vui lòng kiểm tra lại Khóa API Google và thử lại",
     "InvalidMoonshotAPIKey": "Khóa API Moonshot AI không hợp lệ hoặc trống, vui lòng kiểm tra lại Khóa API Moonshot và thử lại",
+    "InvalidOllamaArgs": "Cấu hình Ollama không hợp lệ, vui lòng kiểm tra lại cấu hình Ollama và thử lại",
     "InvalidZhipuAPIKey": "Khóa API Zhipu không chính xác hoặc trống, vui lòng kiểm tra lại Khóa API Zhipu và thử lại",
     "LocationNotSupportError": "Xin lỗi, vị trí của bạn không hỗ trợ dịch vụ mô hình này, có thể do hạn chế vùng miền hoặc dịch vụ chưa được mở. Vui lòng xác nhận xem vị trí hiện tại có hỗ trợ sử dụng dịch vụ này không, hoặc thử sử dụng thông tin vị trí khác.",
     "MoonshotBizError": "Yêu cầu dịch vụ Mặt Trăng Tối gặp sự cố, vui lòng kiểm tra thông tin dưới đây hoặc thử lại",
     "NoOpenAIAPIKey": "Khóa API OpenAI trống, vui lòng thêm Khóa API OpenAI tùy chỉnh",
+    "OllamaBizError": "Yêu cầu dịch vụ Ollama gặp lỗi, vui lòng kiểm tra thông tin dưới đây hoặc thử lại",
     "OpenAIBizError": "Yêu cầu dịch vụ OpenAI gặp lỗi, vui lòng xác minh hoặc thử lại dựa trên thông tin dưới đây",
     "PluginApiNotFound": "Xin lỗi, không có API nào trong tệp mô tả plugin, vui lòng kiểm tra phương thức yêu cầu của bạn có khớp với API mô tả plugin không",
     "PluginApiParamsError": "Xin lỗi, kiểm tra tham số đầu vào yêu cầu của plugin không thông qua, vui lòng kiểm tra tham số đầu vào có khớp với thông tin mô tả API không",

package/locales/vi-VN/setting.json

@@ -84,6 +84,22 @@
         "title": "Khóa API"
       }
     },
+    "Ollama": {
+      "checker": {
+        "desc": "Kiểm tra xem địa chỉ proxy có được điền đúng không"
+      },
+      "customModelName": {
+        "desc": "Thêm mô hình tùy chỉnh, nhiều mô hình sử dụng dấu phẩy (,) để ngăn cách",
+        "placeholder": "vicuna,llava,codellama,llama2:13b-text",
+        "title": "Tên mô hình tùy chỉnh"
+      },
+      "endpoint": {
+        "desc": "Nhập địa chỉ proxy giao diện Ollama, để trống nếu không được chỉ định cụ thể",
+        "placeholder": "http://127.0.0.1:11434/v1",
+        "title": "Địa chỉ proxy giao diện"
+      },
+      "title": "Ollama"
+    },
     "OpenAI": {
       "azureApiVersion": {
         "desc": "Phiên bản API của Azure, theo định dạng YYYY-MM-DD, xem chi tiết tại [phiên bản mới nhất](https://learn.microsoft.com/zh-cn/azure/ai-services/openai/reference#chat-completions)",

package/locales/zh-CN/common.json

@@ -103,6 +103,7 @@
     "bedrock": "AWS Bedrock",
     "google": "Google",
     "moonshot": "Moonshot AI",
+    "ollama": "Ollama",
     "oneapi": "One API",
     "openai": "OpenAI",
     "zhipu": "智谱AI"

package/locales/zh-CN/error.json

@@ -59,6 +59,8 @@
     "BedrockBizError": "请求 Bedrock 服务出错，请根据以下信息排查或重试",
     "InvalidAzureAPIKey": "Azure API Key 不正确或为空，请检查 Azure API Key 后重试",
     "AzureBizError": "请求 Azure AI 服务出错，请根据以下信息排查或重试",
+    "InvalidOllamaArgs": "Ollama 配置不正确，请检查 Ollama 配置后重试",
+    "OllamaBizError": "请求 Ollama 服务出错，请根据以下信息排查或重试",
     "AgentRuntimeError": "Lobe 语言模型运行时执行出错，请根据以下信息排查或重试"
   },
   "stt": {

package/locales/zh-CN/setting.json

@@ -84,6 +84,22 @@
         "title": "API Key"
       }
     },
+    "Ollama": {
+      "checker": {
+        "desc": "测试代理地址是否正确填写"
+      },
+      "customModelName": {
+        "desc": "增加自定义模型，多个模型使用逗号（,）隔开",
+        "placeholder": "vicuna,llava,codellama,llama2:13b-text",
+        "title": "自定义模型名称"
+      },
+      "endpoint": {
+        "desc": "填入 Ollama 接口代理地址，本地未额外指定可留空",
+        "placeholder": "http://127.0.0.1:11434/v1",
+        "title": "接口代理地址"
+      },
+      "title": "Ollama"
+    },
     "OpenAI": {
       "azureApiVersion": {
         "desc": "Azure 的 API 版本，遵循 YYYY-MM-DD 格式，查阅[最新版本](https://learn.microsoft.com/zh-cn/azure/ai-services/openai/reference#chat-completions)",

package/locales/zh-TW/common.json

@@ -103,6 +103,7 @@
     "bedrock": "AWS Bedrock",
     "google": "Google",
     "moonshot": "Moonshot AI",
+    "ollama": "奧拉馬",
     "oneapi": "One API",
     "openai": "OpenAI",
     "zhipu": "智譜AI"

package/locales/zh-TW/error.json

@@ -42,10 +42,12 @@
     "InvalidBedrockCredentials": "Bedrock 驗證未通過，請檢查 AccessKeyId/SecretAccessKey 後重試",
     "InvalidGoogleAPIKey": "Google API Key 不正確或為空，請檢查 Google API Key 後重試",
     "InvalidMoonshotAPIKey": "Moonshot AI API 金鑰不正確或為空，請檢查 Moonshot API 金鑰後重試",
+    "InvalidOllamaArgs": "Ollama 配置不正確，請檢查 Ollama 配置後重試",
     "InvalidZhipuAPIKey": "Zhipu API Key 不正確或為空，請檢查 Zhipu API Key 後重試",
     "LocationNotSupportError": "很抱歉，你的所在位置不支持此模型服務，可能是由於地區限制或服務未開通。請確認當前位置是否支持使用此服務，或嘗試使用其他位置信息。",
     "MoonshotBizError": "請求月球背面服務出錯，請根據以下信息排查或重試",
     "NoOpenAIAPIKey": "OpenAI API 金鑰為空，請添加自訂 OpenAI API 金鑰",
+    "OllamaBizError": "請求 Ollama 服務出錯，請根據以下資訊排查或重試",
     "OpenAIBizError": "請求 OpenAI 服務出錯。請根據以下資訊進行排查或重試。",
     "PluginApiNotFound": "抱歉，外掛描述檔案中不存在該 API。請檢查您的請求方法與外掛清單 API 是否相符",
     "PluginApiParamsError": "抱歉，該外掛請求的輸入參數驗證失敗。請檢查輸入參數與 API 描述資訊是否相符",

package/locales/zh-TW/setting.json

@@ -84,6 +84,22 @@
         "title": "API 金鑰"
       }
     },
+    "Ollama": {
+      "checker": {
+        "desc": "檢查代理地址是否正確填寫"
+      },
+      "customModelName": {
+        "desc": "新增自定義模型，多個模型使用逗號（,）隔開",
+        "placeholder": "維庫納,利亞瓦,科迪拉瑪,拉瑪2:13b-文本",
+        "title": "自定義模型名稱"
+      },
+      "endpoint": {
+        "desc": "填入 Ollama 接口代理地址，本地未額外指定可留空",
+        "placeholder": "http://127.0.0.1:11434/v1",
+        "title": "接口代理地址"
+      },
+      "title": "Ollama"
+    },
     "OpenAI": {
       "azureApiVersion": {
         "desc": "Azure 的 API 版本，遵循 YYYY-MM-DD 格式，查閱[最新版本](https://learn.microsoft.com/zh-cn/azure/ai-services/openai/reference#chat-completions)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.126.5",
+  "version": "0.127.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/api/chat/[provider]/agentRuntime.ts

@@ -6,6 +6,7 @@ import {
   LobeBedrockAI,
   LobeGoogleAI,
   LobeMoonshotAI,
+  LobeOllamaAI,
   LobeOpenAI,
   LobeRuntimeAI,
   LobeZhipuAI,
@@ -66,6 +67,12 @@ class AgentRuntime {
 
       case ModelProvider.Bedrock: {
         runtimeModel = this.initBedrock(payload);
+        break;
+      }
+
+      case ModelProvider.Ollama: {
+        runtimeModel = this.initOllama(payload);
+        break;
       }
     }
 
@@ -138,6 +145,13 @@ class AgentRuntime {
 
     return new LobeBedrockAI({ accessKeyId, accessKeySecret, region });
   }
+
+  private static initOllama(payload: JWTPayload) {
+    const { OLLAMA_PROXY_URL } = getServerConfig();
+    const baseUrl = payload?.endpoint || OLLAMA_PROXY_URL;
+
+    return new LobeOllamaAI(baseUrl);
+  }
 }
 
 export default AgentRuntime;

package/src/app/api/config/route.ts

@@ -14,6 +14,7 @@ export const GET = async () => {
     ENABLED_AWS_BEDROCK,
     ENABLED_GOOGLE,
     ENABLE_OAUTH_SSO,
+    ENABLE_OLLAMA,
   } = getServerConfig();
 
   const config: GlobalServerConfig = {
@@ -23,6 +24,7 @@ export const GET = async () => {
       bedrock: { enabled: ENABLED_AWS_BEDROCK },
       google: { enabled: ENABLED_GOOGLE },
       moonshot: { enabled: ENABLED_MOONSHOT },
+      ollama: { enabled: ENABLE_OLLAMA },
       zhipu: { enabled: ENABLED_ZHIPU },
     },
   };

package/src/app/api/errorResponse.ts

@@ -37,6 +37,9 @@ const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
     case AgentRuntimeErrorType.MoonshotBizError: {
       return 476;
     }
+    case AgentRuntimeErrorType.OllamaBizError: {
+      return 478;
+    }
   }
   return errorType as number;
 };

package/src/app/chat/features/ChatHeader/SettingButton.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { SettingsTabs, SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/slices/common/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
@@ -22,7 +22,6 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
       onClick={() => {
         if (isInbox) {
           useGlobalStore.setState({
-            settingsTab: SettingsTabs.Agent,
             sidebarKey: SidebarTabKey.Setting,
           });
           router.push('/settings/agent');

package/src/app/settings/(desktop)/features/Header.tsx

@@ -2,17 +2,16 @@ import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(() => {
+const Header = memo(({ activeTab }: { activeTab: SettingsTabs }) => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
 
   return (
     <ChatHeader
       left={
         <div style={{ paddingLeft: 8 }}>
-          <ChatHeaderTitle title={t(`tab.${tab}`)} />
+          <ChatHeaderTitle title={t(`tab.${activeTab}`)} />
         </div>
       }
     />

package/src/app/settings/(desktop)/features/SideBar.tsx

@@ -0,0 +1,42 @@
+import { createStyles, useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SettingList, { SettingListProps } from '../../features/SettingList';
+import UpgradeAlert from '../../features/UpgradeAlert';
+
+const useStyles = createStyles(({ stylish, token, css }) => ({
+  body: stylish.noScrollbar,
+  container: css`
+    border-inline-end: 1px solid ${token.colorBorder};
+  `,
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    font-size: 20px;
+    font-weight: bold;
+  `,
+}));
+
+const SideBar = memo<SettingListProps>(({ activeTab }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('common');
+  const { mobile } = useResponsive();
+
+  return (
+    <Flexbox className={styles.container} width={280}>
+      <Flexbox className={styles.top} padding={16}>
+        {t('setting')}
+      </Flexbox>
+      <Flexbox gap={8} style={{ paddingInline: 8 }}>
+        <UpgradeAlert />
+        <SettingList activeTab={activeTab} mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default SideBar;

package/src/app/settings/(desktop)/index.tsx

@@ -4,17 +4,18 @@ import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
 import ResponsiveIndex from '@/components/ResponsiveIndex';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import Common from '../common';
 import { SettingsCommonProps } from '../common/Common';
-import Layout from './layout.desktop';
+import DesktopLayout from './layout.desktop';
 
 const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
 
 export default memo<SettingsCommonProps>((props) => (
   <ResponsiveIndex Mobile={Mobile}>
-    <Layout>
+    <DesktopLayout activeTab={SettingsTabs.Common}>
       <Common {...props} />
-    </Layout>
+    </DesktopLayout>
   </ResponsiveIndex>
 ));

package/src/app/settings/(desktop)/layout.desktop.tsx

@@ -1,23 +1,29 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
-import SideBar from '../features/SideBar';
 import Header from './features/Header';
+import SideBar from './features/SideBar';
 
-export default memo(({ children }: PropsWithChildren) => {
+export interface DesktopLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+
+const DesktopLayout = memo<DesktopLayoutProps>(({ children, activeTab }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Setting);
+
   return (
     <AppLayoutDesktop>
-      <SideBar />
+      <SideBar activeTab={activeTab} />
       <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
-        <Header />
+        <Header activeTab={activeTab} />
         <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
           <SafeSpacing />
           <Center gap={16} width={'100%'}>
@@ -28,3 +34,5 @@ export default memo(({ children }: PropsWithChildren) => {
     </AppLayoutDesktop>
   );
 });
+
+export default DesktopLayout;

package/src/app/settings/(desktop)/layout.responsive.tsx

@@ -1,16 +1,16 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { FC, PropsWithChildren, memo } from 'react';
+import { FC, memo } from 'react';
 
 import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
 
-import DesktopLayout from './layout.desktop';
+import DesktopLayout, { DesktopLayoutProps } from './layout.desktop';
 
 const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), { ssr: false }) as FC;
 
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+export default memo<DesktopLayoutProps>(({ children, activeTab }) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} activeTab={activeTab}>
     {children}
   </ResponsiveLayout>
 ));

package/src/app/settings/(mobile)/features/ExtraList.tsx

@@ -7,15 +7,17 @@ import { useTranslation } from 'react-i18next';
 import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-import Item from '../../features/SideBar/Item';
+import Item from '../../features/SettingList/Item';
 
-const ExtraList = memo(() => {
+interface ExtraListProps {
+  activeTab?: SettingsTabs;
+}
+const ExtraList = memo<ExtraListProps>(({ activeTab }) => {
   const { t } = useTranslation('common');
 
   const { importConfig } = useImportConfig();
-  const tab = useGlobalStore((s) => s.settingsTab);
   const { mobile } = useResponsive();
   const items = [
     {
@@ -59,7 +61,7 @@ const ExtraList = memo(() => {
       </Upload>
       {items.map(({ value, icon, label, onClick }) => (
         <div key={value} onClick={onClick}>
-          <Item active={mobile ? false : tab === value} icon={icon} label={label} />
+          <Item active={mobile ? false : activeTab === value} icon={icon} label={label} />
         </div>
       ))}
     </>

package/src/app/settings/(mobile)/features/Header/index.tsx

@@ -3,18 +3,21 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(() => {
+interface HeaderProps {
+  activeTab: SettingsTabs;
+}
+
+const Header = memo<HeaderProps>(({ activeTab }) => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
 
   const router = useRouter();
 
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle title={t(`tab.${tab}`)} />}
-      onBackClick={() => router.back()}
+      center={<MobileNavBarTitle title={t(`tab.${activeTab}`)} />}
+      onBackClick={() => router.push('/settings')}
       showBackButton
     />
   );

package/src/app/settings/(mobile)/index.tsx

@@ -1,3 +1 @@
-import Index from './mobile';
-
-export default () => <Index />;
+export { default } from './mobile';

package/src/app/settings/(mobile)/layout.mobile.tsx

@@ -1,18 +1,22 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
 import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
 
-export default memo(({ children }: PropsWithChildren) => {
+export interface SettingLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+export default memo(({ children, activeTab }: SettingLayoutProps) => {
   useSwitchSideBarOnInit(SidebarTabKey.Setting);
   return (
-    <AppLayoutMobile navBar={<Header />}>
+    <AppLayoutMobile navBar={<Header activeTab={activeTab} />}>
       <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
     </AppLayoutMobile>
   );