refactor(layout): 调整侧边栏宽度并优化开发者工具

- 调整侧边栏展开/折叠宽度，适应更多显示器
- 优化开发者工具，在新窗口中打开，解决部分显示器兼容性问题
- 添加浅色模式下侧边栏和菜单的背景色样式

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);

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' })
     }
 })
 

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"
+      :width="180"
-      :collapsed-width="80"
+      :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;
 }