diff --git a/src/main/index.ts b/src/main/index.ts index 953a657..071a1a0 100644 --- a/src/main/index.ts +++ b/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, }); diff --git a/src/main/preload.ts b/src/main/preload.ts index 0f8b982..85db819 100644 --- a/src/main/preload.ts +++ b/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) -}) \ No newline at end of file +}) + +// 暴露平台信息给渲染进程,用于平台特定样式控制 +contextBridge.exposeInMainWorld('platform', { + isMac: process.platform === 'darwin' +}) diff --git a/src/renderer/App.css b/src/renderer/App.css index 627bc03..5a37de2 100644 --- a/src/renderer/App.css +++ b/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; } -} \ No newline at end of file +} diff --git a/src/renderer/index.css b/src/renderer/index.css index a4e1d1e..3ec02d3 100644 --- a/src/renderer/index.css +++ b/src/renderer/index.css @@ -18,4 +18,13 @@ body { height: 100vh; display: flex; flex-direction: column; -} \ No newline at end of file +} + +/* 仅在 macOS 下为顶部预留交通灯空间 */ +/* 保持 mac 下与内容区域左对齐(不额外偏移) */ + +/* 在 macOS 下稍微增加 banner 高度,拉开与交通灯的垂直距离 */ +body.is-mac .app-header { + padding-top: 1.4rem; + padding-bottom: 1.4rem; +} diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx index c12f8c2..a6e435c 100644 --- a/src/renderer/main.tsx +++ b/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( -) \ No newline at end of file +)