fix(mac): 修复隐藏标题栏拖拽；标题与内容左对齐；增加 banner 高度以避让交通灯

src/main/index.ts

@@ -15,6 +15,7 @@ import {
 import { store } from "./store";
 
 let mainWindow: BrowserWindow | null = null;
+const isMac = process.platform === "darwin";
 
 function createWindow() {
   mainWindow = new BrowserWindow({
@@ -27,7 +28,8 @@ function createWindow() {
       contextIsolation: true,
       nodeIntegration: false,
     },
-    titleBarStyle: "hiddenInset",
+    // 使用 macOS 隐藏式标题栏，仅在 macOS 启用
+    ...(isMac ? { titleBarStyle: "hiddenInset" as const } : {}),
     autoHideMenuBar: true,
   });
 

src/main/preload.ts

@@ -13,4 +13,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
   selectConfigFile: () => ipcRenderer.invoke('selectConfigFile'),
   openConfigFolder: () => ipcRenderer.invoke('openConfigFolder'),
   openExternal: (url: string) => ipcRenderer.invoke('openExternal', url)
-})
+})
+
+// 暴露平台信息给渲染进程，用于平台特定样式控制
+contextBridge.exposeInMainWorld('platform', {
+  isMac: process.platform === 'darwin'
+})

src/renderer/App.css

@@ -12,6 +12,9 @@
   justify-content: space-between;
   align-items: center;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /* 允许作为 Electron 的拖拽区域（macOS 隐藏标题栏时生效） */
+  -webkit-app-region: drag;
+  user-select: none;
 }
 
 .app-header h1 {
@@ -22,6 +25,8 @@
 .header-actions {
   display: flex;
   gap: 1rem;
+  /* header 内的交互元素需要排除拖拽，否则无法点击 */
+  -webkit-app-region: no-drag;
 }
 
 .refresh-btn, .add-btn {
@@ -31,6 +36,8 @@
   cursor: pointer;
   font-size: 0.9rem;
   transition: all 0.2s;
+  /* 明确按钮不可拖拽，确保可点击 */
+  -webkit-app-region: no-drag;
 }
 
 .refresh-btn {
@@ -167,4 +174,4 @@
   to {
     opacity: 0;
   }
-}
+}

src/renderer/index.css

@@ -18,4 +18,13 @@ body {
   height: 100vh;
   display: flex;
   flex-direction: column;
-}
+}
+
+/* 仅在 macOS 下为顶部预留交通灯空间 */
+/* 保持 mac 下与内容区域左对齐（不额外偏移） */
+
+/* 在 macOS 下稍微增加 banner 高度，拉开与交通灯的垂直距离 */
+body.is-mac .app-header {
+  padding-top: 1.4rem;
+  padding-bottom: 1.4rem;
+}

src/renderer/main.tsx

@@ -3,8 +3,19 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
 
+declare global {
+  interface Window {
+    platform?: { isMac?: boolean }
+  }
+}
+
+// 根据平台添加 body class，便于平台特定样式
+if (window.platform?.isMac) {
+  document.body.classList.add('is-mac')
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+)