From ffae1e583b1f5662b01dd99b8134c518e29147b2 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Sun, 3 Aug 2025 01:58:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(layout):=20=E8=B0=83=E6=95=B4=E4=BE=A7?=
 =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=AE=BD=E5=BA=A6=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91=E8=80=85=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整侧边栏展开/折叠宽度，适应更多显示器
- 优化开发者工具，在新窗口中打开，解决部分显示器兼容性问题
- 添加浅色模式下侧边栏和菜单的背景色样式
---
 frontend/dist-electron/main.js        |  3 ++-
 frontend/electron/main.ts             |  3 ++-
 frontend/src/components/AppLayout.vue | 16 +++++++++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/dist-electron/main.js b/frontend/dist-electron/main.js
index dc5cf77..8c7c8ae 100644
--- a/frontend/dist-electron/main.js
+++ b/frontend/dist-electron/main.js
@@ -69,7 +69,8 @@ function createWindow() {
 // 处理开发者工具请求
 electron_1.ipcMain.handle('open-dev-tools', () => {
     if (mainWindow) {
-        mainWindow.webContents.openDevTools();
+        // 在新窗口中打开开发者工具
+        mainWindow.webContents.openDevTools({ mode: 'undocked' });
     }
 });
 electron_1.app.whenReady().then(createWindow);
diff --git a/frontend/electron/main.ts b/frontend/electron/main.ts
index 3455fe3..47e4375 100644
--- a/frontend/electron/main.ts
+++ b/frontend/electron/main.ts
@@ -39,7 +39,8 @@ function createWindow() {
 // 处理开发者工具请求
 ipcMain.handle('open-dev-tools', () => {
     if (mainWindow) {
-        mainWindow.webContents.openDevTools()
+        // 在新窗口中打开开发者工具
+        mainWindow.webContents.openDevTools({ mode: 'undocked' })
     }
 })
 
diff --git a/frontend/src/components/AppLayout.vue b/frontend/src/components/AppLayout.vue
index 1890ef0..b9495f1 100644
--- a/frontend/src/components/AppLayout.vue
+++ b/frontend/src/components/AppLayout.vue
@@ -6,8 +6,8 @@
       collapsible
       :theme="isDark ? 'dark' : 'light'"
       style="height: 100vh; position: fixed; left: 0; top: 0; z-index: 100"
-      :width="240"
-      :collapsed-width="80"
+      :width="180"
+      :collapsed-width="60"
     >
       <div class="sider-content">
         <!-- Logo区域 - 点击切换展开/折叠 -->
@@ -70,7 +70,7 @@
 
     <a-layout
       :style="{
-        marginLeft: collapsed ? '80px' : '240px',
+        marginLeft: collapsed ? '60px' : '180px',
         height: '100vh',
         transition: 'margin-left 0.2s',
       }"
@@ -203,6 +203,16 @@ const handleMenuClick = (path: string) => {
   color: rgba(0, 0, 0, 0.88);
 }
 
+/* 浅色模式下的侧边栏背景色 */
+:deep(.ant-layout-sider-light) {
+  background: #f5f5f5 !important;
+}
+
+/* 浅色模式下的菜单背景色 */
+:deep(.ant-layout-sider-light .ant-menu-light) {
+  background: #f5f5f5 !important;
+}
+
 :deep(.ant-layout-sider) {
   position: relative;
 }