@lobehub/chat 1.77.11 → 1.77.12

package/locales/ja-JP/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B)は、基本的な指示処理能力を提供し、軽量アプリケーションに適しています。"
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27Bは、Googleのオープンソース言語モデルで、効率と性能の面で新たな基準を打ち立てました。"
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turboは、さまざまなテキスト生成と理解タスクに適しており、現在はgpt-3.5-turbo-0125を指しています。"
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "QVQモデルはQwenチームによって開発された実験的研究モデルで、視覚推論能力の向上に特化しており、特に数学推論の分野で優れた性能を発揮。"
   },
+  "qvq-max-latest": {
+    "description": "通義千問QVQ視覚推論モデルは、視覚入力と思考連鎖出力をサポートし、数学、プログラミング、視覚分析、創作、一般的なタスクにおいてより強力な能力を発揮します。"
+  },
   "qwen-coder-plus-latest": {
     "description": "通義千問コードモデル。"
   },

package/locales/ko-KR/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "모든 단축키 사용 설명을 확인합니다.",
     "title": "단축키 도움말 열기"
   },
+  "openSettings": {
+    "desc": "앱 설정 페이지 열기",
+    "title": "앱 설정"
+  },
   "regenerateMessage": {
     "desc": "마지막 메시지를 다시 생성합니다",
     "title": "메시지 다시 생성"

package/locales/ko-KR/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B)는 기본적인 지시 처리 능력을 제공하며, 경량 애플리케이션에 적합합니다."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B는 구글의 오픈 소스 언어 모델로, 효율성과 성능 면에서 새로운 기준을 세웠습니다."
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo는 다양한 텍스트 생성 및 이해 작업에 적합하며, 현재 gpt-3.5-turbo-0125를 가리킵니다."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "QVQ 모델은 Qwen 팀이 개발한 실험적 연구 모델로, 시각적 추론 능력 향상에 중점을 두고 있으며, 특히 수학적 추론 분야에서 두드러진 성과를 보입니다."
   },
+  "qvq-max-latest": {
+    "description": "통의천문 QVQ 비주얼 추론 모델로, 비주얼 입력과 사고 체인 출력을 지원하며, 수학, 프로그래밍, 비주얼 분석, 창작 및 일반 작업에서 더 강력한 능력을 보여줍니다."
+  },
   "qwen-coder-plus-latest": {
     "description": "통의 천문 코드 모델입니다."
   },

package/locales/nl-NL/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "Bekijk de gebruiksaanwijzing voor alle sneltoetsen",
     "title": "Open sneltoets hulp"
   },
+  "openSettings": {
+    "desc": "Open de applicatie-instellingenpagina",
+    "title": "Applicatie-instellingen"
+  },
   "regenerateMessage": {
     "desc": "Genereer het laatste bericht opnieuw",
     "title": "Genereer bericht opnieuw"

package/locales/nl-NL/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) biedt basis instructieverwerkingscapaciteiten, geschikt voor lichte toepassingen."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B is een open-source taalmodel van Google dat nieuwe normen heeft gesteld op het gebied van efficiëntie en prestaties."
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo, geschikt voor verschillende tekstgeneratie- en begrijptaken, wijst momenteel naar gpt-3.5-turbo-0125."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "Het QVQ-model is een experimenteel onderzoeksmodel ontwikkeld door het Qwen-team, gericht op het verbeteren van visuele redeneervaardigheden, vooral in het domein van wiskundige redenering."
   },
+  "qvq-max-latest": {
+    "description": "De QVQ visuele redeneermodel van Tongyi Qianwen ondersteunt visuele invoer en output van denkprocessen, en heeft betere prestaties getoond in wiskunde, programmeren, visuele analyse, creatie en algemene taken."
+  },
   "qwen-coder-plus-latest": {
     "description": "Tongyi Qianwen code model."
   },

package/locales/pl-PL/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "Zobacz wszystkie instrukcje dotyczące skrótów klawiszowych",
     "title": "Otwórz pomoc dotyczącą skrótów klawiszowych"
   },
+  "openSettings": {
+    "desc": "Otwórz stronę ustawień aplikacji",
+    "title": "Ustawienia aplikacji"
+  },
   "regenerateMessage": {
     "desc": "Ponownie wygeneruj ostatnią wiadomość",
     "title": "Ponownie wygeneruj wiadomość"

package/locales/pl-PL/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) oferuje podstawowe możliwości przetwarzania poleceń, idealne do lekkich aplikacji."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B to otwarty model językowy stworzony przez Google, który ustanowił nowe standardy w zakresie wydajności i efektywności."
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo, odpowiedni do różnych zadań generowania i rozumienia tekstu, obecnie wskazuje na gpt-3.5-turbo-0125."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "Model QVQ jest eksperymentalnym modelem badawczym opracowanym przez zespół Qwen, skoncentrowanym na zwiększeniu zdolności w zakresie rozumowania wizualnego, szczególnie w dziedzinie rozumowania matematycznego."
   },
+  "qvq-max-latest": {
+    "description": "Model wnioskowania wizualnego QVQ, wspierający wejścia wizualne oraz wyjścia w postaci łańcucha myślowego, wykazuje silniejsze zdolności w matematyce, programowaniu, analizie wizualnej, twórczości oraz w zadaniach ogólnych."
+  },
   "qwen-coder-plus-latest": {
     "description": "Model kodowania Qwen, oparty na ogólnym zrozumieniu."
   },

package/locales/pt-BR/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "Ver as instruções de uso de todos os atalhos",
     "title": "Abrir ajuda de atalhos"
   },
+  "openSettings": {
+    "desc": "Abra a página de configurações do aplicativo",
+    "title": "Configurações do Aplicativo"
+  },
   "regenerateMessage": {
     "desc": "Regenerar a última mensagem",
     "title": "Regenerar mensagem"

package/locales/pt-BR/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) oferece capacidade básica de processamento de instruções, adequada para aplicações leves."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B é um modelo de linguagem de código aberto do Google, que estabelece novos padrões em eficiência e desempenho."
+  },
   "gpt-3.5-turbo": {
     "description": "O GPT 3.5 Turbo é adequado para uma variedade de tarefas de geração e compreensão de texto, atualmente apontando para gpt-3.5-turbo-0125."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "O modelo QVQ é um modelo de pesquisa experimental desenvolvido pela equipe Qwen, focado em melhorar a capacidade de raciocínio visual, especialmente na área de raciocínio matemático."
   },
+  "qvq-max-latest": {
+    "description": "O modelo de raciocínio visual QVQ, da Tongyi Qianwen, suporta entrada visual e saída de cadeia de pensamento, demonstrando habilidades superiores em matemática, programação, análise visual, criação e tarefas gerais."
+  },
   "qwen-coder-plus-latest": {
     "description": "Modelo de código Qwen."
   },

package/locales/ru-RU/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "Просмотреть инструкции по использованию всех горячих клавиш",
     "title": "Открыть справку по горячим клавишам"
   },
+  "openSettings": {
+    "desc": "Открыть страницу настроек приложения",
+    "title": "Настройки приложения"
+  },
   "regenerateMessage": {
     "desc": "Сгенерировать последнее сообщение заново",
     "title": "Перегенерировать сообщение"

package/locales/ru-RU/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) предлагает базовые возможности обработки команд, подходящие для легковесных приложений."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B — это открытая языковая модель от Google, которая установила новые стандарты в области эффективности и производительности."
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo подходит для различных задач генерации и понимания текста, в настоящее время ссылается на gpt-3.5-turbo-0125."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "Модель QVQ, разработанная командой Qwen, является экспериментальной исследовательской моделью, сосредоточенной на повышении визуальных способностей рассуждения, особенно в области математического рассуждения."
   },
+  "qvq-max-latest": {
+    "description": "Модель визуального вывода QVQ от Tongyi Qianwen поддерживает визуальный ввод и вывод цепочек мышления, демонстрируя более высокие способности в математике, программировании, визуальном анализе, творчестве и общих задачах."
+  },
   "qwen-coder-plus-latest": {
     "description": "Модель кода Tongyi Qianwen."
   },

package/locales/tr-TR/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "Tüm kısayol tuşlarının kullanım talimatlarını görüntüle",
     "title": "Kısayol Yardımını Aç"
   },
+  "openSettings": {
+    "desc": "Uygulama ayarları sayfasını aç",
+    "title": "Uygulama Ayarları"
+  },
   "regenerateMessage": {
     "desc": "Son mesajı yeniden oluştur",
     "title": "Mesajı yeniden oluştur"

package/locales/tr-TR/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B), temel talimat işleme yetenekleri sunar ve hafif uygulamalar için uygundur."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B, Google'ın verimlilik ve performans açısından yeni standartlar belirleyen açık kaynaklı bir dil modelidir."
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo, çeşitli metin üretimi ve anlama görevleri için uygundur, şu anda gpt-3.5-turbo-0125'e işaret ediyor."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "QVQ modeli, Qwen ekibi tarafından geliştirilen deneysel bir araştırma modelidir; görsel akıl yürütme yeteneğini artırmaya odaklanır, özellikle matematik akıl yürütme alanında."
   },
+  "qvq-max-latest": {
+    "description": "Tongyi Qianwen QVQ görsel akıl yürütme modeli, görsel girdi ve düşünce zinciri çıktısını destekler; matematik, programlama, görsel analiz, yaratıcılık ve genel görevlerde daha güçlü yetenekler sergilemektedir."
+  },
   "qwen-coder-plus-latest": {
     "description": "Tongyi Qianwen kod modeli."
   },

package/locales/vi-VN/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "Xem hướng dẫn sử dụng tất cả các phím tắt",
     "title": "Mở trợ giúp phím tắt"
   },
+  "openSettings": {
+    "desc": "Mở trang cài đặt ứng dụng",
+    "title": "Cài đặt ứng dụng"
+  },
   "regenerateMessage": {
     "desc": "Tạo lại tin nhắn cuối cùng",
     "title": "Tạo lại tin nhắn"

package/locales/vi-VN/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) cung cấp khả năng xử lý chỉ dẫn cơ bản, phù hợp cho các ứng dụng nhẹ."
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B là một mô hình ngôn ngữ mã nguồn mở của Google, thiết lập tiêu chuẩn mới về hiệu suất và hiệu quả."
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo, phù hợp cho nhiều nhiệm vụ sinh và hiểu văn bản, hiện tại trỏ đến gpt-3.5-turbo-0125."
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "Mô hình QVQ là mô hình nghiên cứu thử nghiệm do đội ngũ Qwen phát triển, tập trung vào việc nâng cao khả năng suy luận hình ảnh, đặc biệt trong lĩnh vực suy luận toán học."
   },
+  "qvq-max-latest": {
+    "description": "Mô hình suy luận thị giác QVQ của Tongyi Qianwen, hỗ trợ đầu vào thị giác và đầu ra chuỗi tư duy, thể hiện khả năng mạnh mẽ hơn trong toán học, lập trình, phân tích thị giác, sáng tạo và các nhiệm vụ chung."
+  },
   "qwen-coder-plus-latest": {
     "description": "Mô hình mã Qwen."
   },

package/locales/zh-CN/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "查看所有快捷键的使用说明",
     "title": "打开快捷键帮助"
   },
+  "openSettings": {
+    "desc": "打开应用设置页面",
+    "title": "应用设置"
+  },
   "regenerateMessage": {
     "desc": "重新生成最后一条消息",
     "title": "重新生成消息"

package/locales/zh-CN/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) 提供基本的指令处理能力，适合轻量级应用。"
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B 是谷歌的一款开源语言模型，以其在效率和性能方面设立了新的标准。"
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo，适用于各种文本生成和理解任务，Currently points to gpt-3.5-turbo-0125"
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "QVQ-72B-Preview 是由 Qwen 团队开发的实验性研究模型，专注于提升视觉推理能力。"
   },
+  "qvq-max-latest": {
+    "description": "通义千问QVQ视觉推理模型，支持视觉输入及思维链输出，在数学、编程、视觉分析、创作以及通用任务上都表现了更强的能力。"
+  },
   "qwen-coder-plus-latest": {
     "description": "通义千问代码模型。"
   },
@@ -1722,7 +1728,7 @@
     "description": "Qwen-Omni 系列模型支持输入多种模态的数据，包括视频、音频、图片、文本，并输出音频与文本。"
   },
   "qwen2.5-vl-32b-instruct": {
-    "description": "Qwen2.5-VL 系列模型提升了模型的智能水平、实用性和适用性，使其在自然对话、内容创作、专业知识服务及代码开发等场景中表现更优。32B 版本使用了强化学习技术优化模型，与 Qwen2.5 VL 系列的其它模型相比，提供了更符合人类偏好的输出风格、复杂数学问题的推理能力，以及图像细粒度理解与推理能力。"
+    "description": "Qwen2.5VL系列模型，在math和学科问题解答达到了接近Qwen2.5VL-72B的水平，回复风格面向人类偏好进行大幅调整，尤其是数学、逻辑推理、知识问答等客观类query，模型回复详实程度和格式清晰度明显改善。此版本为32B版本。"
   },
   "qwen2.5-vl-72b-instruct": {
     "description": "指令跟随、数学、解题、代码整体提升，万物识别能力提升，支持多样格式直接精准定位视觉元素，支持对长视频文件（最长10分钟）进行理解和秒级别的事件时刻定位，能理解时间先后和快慢，基于解析和定位能力支持操控OS或Mobile的Agent，关键信息抽取能力和Json格式输出能力强，此版本为72B版本，本系列能力最强的版本。"

package/locales/zh-TW/hotkey.json

@@ -15,6 +15,10 @@
     "desc": "查看所有快捷鍵的使用說明",
     "title": "打開快捷鍵幫助"
   },
+  "openSettings": {
+    "desc": "打開應用設定頁面",
+    "title": "應用設定"
+  },
   "regenerateMessage": {
     "desc": "重新生成最後一條消息",
     "title": "重新生成消息"

package/locales/zh-TW/models.json

@@ -1010,6 +1010,9 @@
   "google/gemma-2b-it": {
     "description": "Gemma Instruct (2B) 提供基本的指令處理能力，適合輕量級應用。"
   },
+  "google/gemma-3-27b-it": {
+    "description": "Gemma 3 27B 是谷歌的一款開源語言模型，以其在效率和性能方面設立了新的標準。"
+  },
   "gpt-3.5-turbo": {
     "description": "GPT 3.5 Turbo，適用於各種文本生成和理解任務，Currently points to gpt-3.5-turbo-0125"
   },
@@ -1592,6 +1595,9 @@
   "qvq-72b-preview": {
     "description": "QVQ模型是由 Qwen 團隊開發的實驗性研究模型，專注於提升視覺推理能力，尤其在數學推理領域。"
   },
+  "qvq-max-latest": {
+    "description": "通義千問QVQ視覺推理模型，支持視覺輸入及思維鏈輸出，在數學、程式設計、視覺分析、創作以及通用任務上都表現了更強的能力。"
+  },
   "qwen-coder-plus-latest": {
     "description": "通義千問代碼模型。"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.77.11",
+  "version": "1.77.12",
   "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/packages/electron-client-ipc/src/dispatch.ts

@@ -0,0 +1,29 @@
+import { DispatchInvoke } from './types';
+
+interface IElectronAPI {
+  invoke: DispatchInvoke;
+}
+
+declare global {
+  interface Window {
+    electronAPI: IElectronAPI;
+  }
+}
+
+/**
+ * client 端请求 sketch 端 event 数据的方法
+ */
+export const dispatch: DispatchInvoke = async (event, ...data) => {
+  if (!window.electronAPI || !window.electronAPI.invoke)
+    throw new Error(`electronAPI.invoke not found. Please expose \`ipcRenderer.invoke\` to \`window.electronAPI.invoke\` in the preload:
+
+import { contextBridge, ipcRenderer } from 'electron';
+
+const invoke = async (event, ...data) =>
+  ipcRenderer.invoke(event, ...data);
+
+contextBridge.exposeInMainWorld('electronAPI', { invoke });
+`);
+
+  return window.electronAPI.invoke(event, ...data);
+};

package/packages/electron-client-ipc/src/events/index.ts

@@ -1,10 +1,17 @@
-import { DevtoolsDispatchEvents } from './devtools';
+import { MenuDispatchEvents } from './menu';
+import { FilesSearchDispatchEvents } from './search';
+import { SystemDispatchEvents } from './system';
+import { WindowsDispatchEvents } from './windows';
 
 /**
  * renderer -> main dispatch events
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ClientDispatchEvents extends DevtoolsDispatchEvents {}
+export interface ClientDispatchEvents
+  extends WindowsDispatchEvents,
+    FilesSearchDispatchEvents,
+    SystemDispatchEvents,
+    MenuDispatchEvents {}
 
 export type ClientDispatchEventKey = keyof ClientDispatchEvents;
 

package/packages/electron-client-ipc/src/events/menu.ts

@@ -0,0 +1,5 @@
+export interface MenuDispatchEvents {
+  refreshAppMenu: () => { success: boolean };
+  setDevMenuVisibility: (visible: boolean) => { success: boolean };
+  showContextMenu: (type: string, data?: any) => { success: boolean };
+}

package/packages/electron-client-ipc/src/events/search.ts

@@ -0,0 +1,4 @@
+export interface FilesSearchDispatchEvents {
+  readFiles: (paths: string[]) => any[];
+  searchFiles: (query: string) => void;
+}

package/packages/electron-client-ipc/src/events/system.ts

@@ -0,0 +1,3 @@
+export interface SystemDispatchEvents {
+  checkSystemAccessibility: () => boolean | undefined;
+}

package/packages/electron-client-ipc/src/events/windows.ts

@@ -0,0 +1,8 @@
+export interface WindowsDispatchEvents {
+  /**
+   * open the LobeHub Devtools
+   */
+  openDevtools: () => void;
+
+  openSettingsWindow: (tab?: string) => void;
+}

package/packages/electron-client-ipc/src/index.ts

@@ -1,2 +1,3 @@
+export * from './dispatch';
 export * from './events';
 export * from './types';

package/scripts/migrateServerDB/index.ts

@@ -12,6 +12,7 @@ dotenv.config();
 
 const migrationsFolder = join(__dirname, '../../src/database/migrations');
 
+const isDesktop = process.env.NEXT_PUBLIC_IS_DESKTOP_APP === '1';
 const runMigrations = async () => {
   if (process.env.DATABASE_DRIVER === 'node') {
     await nodeMigrate(serverDB, { migrationsFolder });
@@ -27,7 +28,7 @@ const runMigrations = async () => {
 let connectionString = process.env.DATABASE_URL;
 
 // only migrate database if the connection string is available
-if (connectionString) {
+if (!isDesktop && connectionString) {
   // eslint-disable-next-line unicorn/prefer-top-level-await
   runMigrations().catch((err) => {
     console.error('❌ Database migrate failed:', err);
@@ -44,5 +45,5 @@ if (connectionString) {
     process.exit(1);
   });
 } else {
-  console.log('🟢 not find database env, migration skipped');
+  console.log('🟢 not find database env or in desktop mode, migration skipped');
 }

package/src/app/[variants]/(main)/(mobile)/me/(home)/__tests__/UserBanner.test.tsx

@@ -26,6 +26,7 @@ vi.mock('@/features/User/UserLoginOrSignup/Community', () => ({
 
 vi.mock('@/const/version', () => ({
   isDeprecatedEdition: false,
+  isDesktop: false,
 }));
 
 // 定义一个变量来存储 enableAuth 的值

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/TopActions.tsx

@@ -3,6 +3,7 @@ import { Compass, FolderClosed, MessageSquare } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
 import { useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
@@ -20,7 +21,7 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
   const { showMarket, enableKnowledgeBase } = useServerConfigStore(featureFlagsSelectors);
 
   return (
-    <>
+    <Flexbox gap={8}>
       <Link
         aria-label={t('tab.chat')}
         href={'/chat'}
@@ -59,7 +60,7 @@ const TopActions = memo<TopActionProps>(({ tab, isPinned }) => {
           />
         </Link>
       )}
-    </>
+    </Flexbox>
   );
 });
 

package/src/app/[variants]/(main)/_layout/Desktop/SideBar/index.tsx

@@ -4,10 +4,12 @@ import { SideNav } from '@lobehub/ui';
 import { parseAsBoolean, useQueryState } from 'nuqs';
 import { Suspense, memo } from 'react';
 
+import { isDesktop } from '@/const/version';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { electronStylish } from '@/styles/electron';
 
 import Avatar from './Avatar';
 import BottomActions from './BottomActions';
@@ -28,13 +30,30 @@ const Nav = memo(() => {
   return (
     !inZenMode && (
       <SideNav
-        avatar={<Avatar />}
-        bottomActions={<BottomActions />}
-        style={{ height: '100%', zIndex: 100 }}
+        avatar={
+          <div className={electronStylish.nodrag}>
+            <Avatar />
+          </div>
+        }
+        bottomActions={
+          <div className={electronStylish.nodrag}>
+            <BottomActions />
+          </div>
+        }
+        className={electronStylish.draggable}
+        style={{
+          height: '100%',
+          zIndex: 100,
+          ...(isDesktop
+            ? { background: 'transparent', borderInlineEnd: 0, paddingBlockStart: 8 }
+            : {}),
+        }}
         topActions={
           <Suspense>
-            <Top />
-            {showPinList && <PinList />}
+            <div className={electronStylish.nodrag}>
+              <Top />
+              {showPinList && <PinList />}
+            </div>
           </Suspense>
         }
       />

package/src/app/[variants]/(main)/_layout/Desktop/Titlebar.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { electronStylish } from '@/styles/electron';
+
+export const TITLE_BAR_HEIGHT = 36;
+
+const TitleBar = memo(() => {
+  return (
+    <Flexbox
+      align={'center'}
+      className={electronStylish.draggable}
+      height={TITLE_BAR_HEIGHT}
+      horizontal
+      justify={'space-between'}
+      paddingInline={12}
+      style={{ minHeight: TITLE_BAR_HEIGHT }}
+      width={'100%'}
+    >
+      <div />
+      <div>{/* TODO */}</div>
+      <div>{/* TODO */}</div>
+    </Flexbox>
+  );
+});
+
+export default TitleBar;

package/src/app/[variants]/(main)/_layout/Desktop/index.tsx

@@ -2,10 +2,12 @@
 
 import { useTheme } from 'antd-style';
 import dynamic from 'next/dynamic';
+import { usePathname } from 'next/navigation';
 import { PropsWithChildren, Suspense, memo } from 'react';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { Flexbox } from 'react-layout-kit';
 
+import { isDesktop } from '@/const/version';
 import { BANNER_HEIGHT } from '@/features/AlertBanner/CloudBanner';
 import HotkeyHelperPanel from '@/features/HotkeyHelperPanel';
 import { usePlatform } from '@/hooks/usePlatform';
@@ -14,19 +16,31 @@ import { HotkeyScopeEnum } from '@/types/hotkey';
 
 import RegisterHotkeys from './RegisterHotkeys';
 import SideBar from './SideBar';
+import TitleBar, { TITLE_BAR_HEIGHT } from './Titlebar';
 
 const CloudBanner = dynamic(() => import('@/features/AlertBanner/CloudBanner'));
 
 const Layout = memo<PropsWithChildren>(({ children }) => {
   const { isPWA } = usePlatform();
   const theme = useTheme();
+
+  const pathname = usePathname();
   const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
 
+  // setting page not show sidebar
+  const hideSideBar = isDesktop && pathname.startsWith('/settings');
   return (
     <HotkeysProvider initiallyActiveScopes={[HotkeyScopeEnum.Global]}>
+      {isDesktop && <TitleBar />}
       {showCloudPromotion && <CloudBanner />}
       <Flexbox
-        height={showCloudPromotion ? `calc(100% - ${BANNER_HEIGHT}px)` : '100%'}
+        height={
+          isDesktop
+            ? `calc(100% - ${TITLE_BAR_HEIGHT}px)`
+            : showCloudPromotion
+              ? `calc(100% - ${BANNER_HEIGHT}px)`
+              : '100%'
+        }
         horizontal
         style={{
           borderTop: isPWA ? `1px solid ${theme.colorBorder}` : undefined,
@@ -34,8 +48,23 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
         }}
         width={'100%'}
       >
-        <SideBar />
-        {children}
+        {!hideSideBar && <SideBar />}
+        {isDesktop ? (
+          <Flexbox
+            style={{
+              background: theme.colorBgLayout,
+              borderInlineStart: `1px solid ${theme.colorBorderSecondary}`,
+              borderStartStartRadius: !hideSideBar ? 12 : undefined,
+              borderTop: `1px solid ${theme.colorBorderSecondary}`,
+              overflow: 'hidden',
+            }}
+            width={'100%'}
+          >
+            {children}
+          </Flexbox>
+        ) : (
+          children
+        )}
       </Flexbox>
       <HotkeyHelperPanel />
       <Suspense>