+
+
+
+
+
+
+```
+
+**样式说明**：
+- `.drag-region` / `.no-drag` 复用 `src/styles/index.css` 中已有定义。
+- `bg-background` / `text-muted-foreground` 等 Token 若 zn-ai 未定义，可替换为具体色值（如 `bg-white`、`text-[#525866]`），保持视觉一致即可。
+
+### 2.10 Layout 重写
+
+**重写文件**：`src/components/Layout/index.vue`
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**注意**：`src/main.ts` 中删除 `HeaderBar` 和 `DragRegion` 的全局注册。
+
+### 2.11 Icon 体系迁移：iconify → @lucide/vue
+
+**依赖变更**：
+```bash
+# 安装
+pnpm add @lucide/vue
+
+# 卸载（确认项目内无其他 iconify 引用后执行）
+pnpm remove @iconify/vue @iconify-json/material-symbols
+```
+
+**图标映射关系**：
+
+| 功能 | 原 iconify icon | lucide-vue 替代 |
+|------|-----------------|-----------------|
+| 最小化 | `material-symbols:check-indeterminate-small` | `Minus` |
+| 最大化 | `material-symbols:chrome-maximize-outline-sharp` | `Square` |
+| 恢复 | `material-symbols:chrome-restore-outline-sharp` | `Copy` |
+| 关闭 | `material-symbols:close` | `X` |
+
+**类型声明清理**：
+删除 `global.d.ts` 中 `@iconify/vue` 的 `declare module` 段落（约第 230-240 行）。
+
+---
+
+## 3. 改造清单（Task Breakdown）
+
+### Task 1：主进程窗口配置重写
+- **文件**：`electron/service/window-service/index.ts`
+- **内容**：
+ 1. 引入 `isMac` / `isWindows` 平台判断。
+ 2. 重写 `SHARED_WINDOW_OPTIONS` 的 `frame`、`titleBarStyle`、`trafficLightPosition`。
+ 3. 移除 `trafficLightPosition: { x: -100, y: -100 }`。
+- **验收标准**：
+ - macOS 窗口出现原生 traffic lights。
+ - Windows 窗口无原生标题栏。
+ - Linux 窗口保留原生标题栏。
+
+### Task 2：新增 IPC Handlers（对齐 ClawX）
+- **新建文件**：`electron/ipc/window-handlers.ts`（或写入现有 ipc 文件）
+- **内容**：
+ 1. 使用 `ipcMain.handle` 注册 `window:minimize`、`window:maximize`、`window:close`、`window:isMaximized`。
+ 2. 在 `electron/wins/index.ts` 或 `electron/main.ts` 中引入并调用 `registerWindowHandlers(mainWindow)`。
+- **验收标准**：
+ - 通过 DevTools Console 测试 `await window.api.windowIsMaximized()` 返回布尔值。
+ - `windowMinimize` / `windowMaximize` / `windowClose` 调用后窗口行为正确。
+
+### Task 3：Preload 重写
+- **文件**：`electron/preload/index.ts`
+- **内容**：
+ 1. 移除旧的 `minimizeWindow`、`maximizeWindow`、`closeWindow`、`onWindowMaximized`、`isWindowMaximized`。
+ 2. 新增 `platform`、`windowMinimize`、`windowMaximize`、`windowClose`、`windowIsMaximized`。
+ 3. 同步更新 `global.d.ts` 中的 `WindowApi` 类型定义。
+- **验收标准**：
+ - 渲染进程 TypeScript 无报错。
+ - `window.api.platform` 能正确读取当前平台。
+
+### Task 4：前端组件废弃与重建
+- **废弃文件**：
+ - `src/components/HeaderBar/index.vue`（删除）
+ - `src/components/DragRegion/index.vue`（删除）
+ - `src/hooks/useWinManager.ts`（删除）
+- **新建文件**：
+ - `src/components/layout/TitleBar/index.vue`（对齐 ClawX `TitleBar.tsx`）
+- **重写文件**：
+ - `src/components/Layout/index.vue`（改用 `TitleBar`，Linux 下隐藏）
+ - `src/main.ts`（移除 `HeaderBar` / `DragRegion` 全局注册）
+- **验收标准**：
+ - macOS 仅显示顶部 40px 拖拽区域，无自定义按钮。
+ - Windows 显示自定义最小化/最大化/关闭按钮，功能正常。
+ - Linux 不渲染任何自定义标题栏元素。
+
+### Task 5：依赖清理
+- **文件**：`package.json`、`global.d.ts`
+- **内容**：
+ 1. 安装 `@lucide/vue`。
+ 2. 卸载 `@iconify/vue` 和 `@iconify-json/material-symbols`。
+ 3. 删除 `global.d.ts` 中 `@iconify/vue` 的类型声明。
+- **验收标准**：
+ - `pnpm install` 后无 iconify 包残留。
+ - 项目编译通过。
+
+### Task 6：跨平台回归测试
+- **内容**：
+ 1. **macOS**：验证 traffic lights 位置、拖拽行为、窗口最大化/恢复、关闭。
+ 2. **Windows**：验证自定义按钮 hover 样式、最大化/恢复状态切换、最小化到任务栏、关闭。
+ 3. **Linux**：验证原生边框存在、无自定义标题栏残留、窗口操作正常。
+
+---
+
+## 4. 工作量评估（Sub Agent 分配）
+
+本任务涉及 **Electron 主进程**、**前端组件重建**、**跨平台回归** 三个独立领域，推荐由 **3 个 Sub Agent** 并行/串行完成：
+
+### Agent 1：Electron 主进程专家
+- **职责**：Task 1 + Task 2 + Task 3
+- **技能要求**：熟悉 Electron BrowserWindow 选项、IPC `handle/invoke` 模式、preload 安全模型。
+- **预计耗时**：2～3 小时
+- **产出**：`window-service` + `ipc-handlers` + `preload` 的改造 PR。
+
+### Agent 2：Vue 前端组件专家
+- **职责**：Task 4 + Task 5
+- **技能要求**：熟悉 Vue 3、组件重构、Tailwind CSS、依赖清理。
+- **预计耗时**：2～4 小时
+- **产出**：`TitleBar` / `Layout` 重建 PR + 依赖清理补丁。
+
+### Agent 3：跨平台测试与集成专家
+- **职责**：Task 6（回归测试）+ 边缘情况修复
+- **技能要求**：能在 macOS / Windows / Linux 环境下运行 Electron 应用，熟悉 frameless 窗口陷阱。
+- **预计耗时**：2～4 小时（取决于平台覆盖度）
+- **产出**：测试报告 + 对 Agent 1/2 PR 的修复补丁。
+
+---
+
+## 5. 风险与注意事项
+
+1. **macOS traffic light 位置**：`hiddenInset` 默认内边距可能因 Electron 版本略有差异，建议通过 `trafficLightPosition` 微调至 `{x: 16, y: 16}`（与 ClawX 一致）。
+2. **Linux 原生边框与主题**：若 zn-ai 深色模式下 Linux 原生标题栏颜色不匹配，可后续通过 GTK 主题或 `darkTheme` 选项优化，但不在本次核心迁移范围内。
+3. **Windows 最大化白边**：`frame: false` 的窗口在 Windows 最大化时可能出现 1px 白边。ClawX 未做特殊处理，可后续按需优化。
+4. **关闭行为一致性**：zn-ai 主窗口关闭逻辑原会根据 `MINIMIZE_TO_TRAY` 配置决定 `hide()` 或 `close()`。改造后 `window:close` 直接调用 `mainWindow.close()`，若需保留托盘最小化逻辑，可在 `window:close` handler 中判断 `MINIMIZE_TO_TRAY` 并调用 `mainWindow.hide()` 阻止默认关闭。
+5. **旧常量清理**：若 `IPC_EVENTS` 中 `WINDOW_MINIMIZE` / `WINDOW_MAXIMIZE` / `WINDOW_CLOSE` / `IS_WINDOW_MAXIMIZED` 被其他未发现的模块引用，删除后会导致编译失败。建议在删除前用全局搜索再次确认。
+
+---
+
+## 6. 参考资料
+
+- ClawX 主窗口创建：`ClawX/electron/main/index.ts`
+- ClawX TitleBar 组件：`ClawX/src/components/layout/TitleBar.tsx`
+- ClawX 窗口 IPC：`ClawX/electron/main/ipc-handlers.ts`（`registerWindowHandlers`）
+- zn-ai 现有窗口服务：`zn-ai/electron/service/window-service/index.ts`
+- zn-ai 现有 HeaderBar：`zn-ai/src/components/HeaderBar/index.vue`
diff --git a/electron/ipc/window-handlers.ts b/electron/ipc/window-handlers.ts
new file mode 100644
index 0000000..8b17e82
--- /dev/null
+++ b/electron/ipc/window-handlers.ts
@@ -0,0 +1,23 @@
+import { ipcMain, BrowserWindow } from 'electron';
+
+export function registerWindowHandlers(mainWindow: BrowserWindow): void {
+ ipcMain.handle('window:minimize', () => {
+ mainWindow.minimize();
+ });
+
+ ipcMain.handle('window:maximize', () => {
+ if (mainWindow.isMaximized()) {
+ mainWindow.unmaximize();
+ } else {
+ mainWindow.maximize();
+ }
+ });
+
+ ipcMain.handle('window:close', () => {
+ mainWindow.close();
+ });
+
+ ipcMain.handle('window:isMaximized', () => {
+ return mainWindow.isMaximized();
+ });
+}
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index d03aa57..cf02fd3 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -8,11 +8,13 @@ const api: WindowApi = {
open: (url: string) => ipcRenderer.invoke('external-open', url)
},
- closeWindow: () => ipcRenderer.send(IPC_EVENTS.WINDOW_CLOSE),
- minimizeWindow: () => ipcRenderer.send(IPC_EVENTS.WINDOW_MINIMIZE),
- maximizeWindow: () => ipcRenderer.send(IPC_EVENTS.WINDOW_MAXIMIZE),
- onWindowMaximized: (callback: (isMaximized: boolean) => void) => ipcRenderer.on(IPC_EVENTS.WINDOW_MAXIMIZE + 'back', (_, isMaximized) => callback(isMaximized)),
- isWindowMaximized: () => ipcRenderer.invoke(IPC_EVENTS.IS_WINDOW_MAXIMIZED),
+ platform: process.platform,
+
+ windowMinimize: () => ipcRenderer.invoke('window:minimize'),
+ windowMaximize: () => ipcRenderer.invoke('window:maximize'),
+ windowClose: () => ipcRenderer.invoke('window:close'),
+ windowIsMaximized: () => ipcRenderer.invoke('window:isMaximized'),
+
viewIsReady: () => ipcRenderer.send(IPC_EVENTS.RENDERER_IS_READY),
app: {
diff --git a/electron/service/window-service/index.ts b/electron/service/window-service/index.ts
index 2038361..83beeec 100644
--- a/electron/service/window-service/index.ts
+++ b/electron/service/window-service/index.ts
@@ -2,7 +2,6 @@ import type { WindowNames } from '@lib/types'
import { CONFIG_KEYS, IPC_EVENTS, WINDOW_NAMES } from '@lib/constants'
import { BrowserWindow, BrowserWindowConstructorOptions, ipcMain, IpcMainInvokeEvent, type IpcMainEvent } from 'electron'
-import { debounce } from '@lib/utils'
import { createLogo } from '@electron/utils'
import logManager from '@electron/service/logger'
@@ -26,10 +25,14 @@ interface SizeOptions {
minHeight?: number; // 窗口最小高度，可选
}
+const isMac = process.platform === 'darwin';
+const isWindows = process.platform === 'win32';
+const useCustomTitleBar = isWindows;
+
const SHARED_WINDOW_OPTIONS = {
- frame: false,
- titleBarStyle: 'hidden',
- trafficLightPosition: { x: -100, y: -100 },
+ frame: isMac || !useCustomTitleBar,
+ titleBarStyle: isMac ? 'hiddenInset' : useCustomTitleBar ? 'hidden' : 'default',
+ trafficLightPosition: isMac ? { x: 16, y: 16 } : undefined,
show: false,
title: 'NIANXX',
darkTheme: themeManager.isDark,
@@ -71,29 +74,6 @@ class WindowService {
}
private _setupIpcEvents() {
- const handleCloseWindow = (e: IpcMainEvent) => {
- const target = BrowserWindow.fromWebContents(e.sender);
- const winName = this.getName(target);
-
- this.close(target, this._isReallyClose(winName));
- }
-
- const handleMinimizeWindow = (e: IpcMainEvent) => {
- BrowserWindow.fromWebContents(e.sender)?.minimize();
- }
-
- const handleMaximizeWindow = (e: IpcMainEvent) => {
- this.toggleMax(BrowserWindow.fromWebContents(e.sender));
- }
-
- const handleIsWindowMaximized = (e: IpcMainInvokeEvent) => {
- return BrowserWindow.fromWebContents(e.sender)?.isMaximized() ?? false;
- }
-
- ipcMain.on(IPC_EVENTS.WINDOW_CLOSE, handleCloseWindow);
- ipcMain.on(IPC_EVENTS.WINDOW_MINIMIZE, handleMinimizeWindow);
- ipcMain.on(IPC_EVENTS.WINDOW_MAXIMIZE, handleMaximizeWindow);
- ipcMain.handle(IPC_EVENTS.IS_WINDOW_MAXIMIZED, handleIsWindowMaximized);
ipcMain.handle(IPC_EVENTS.APP_LOAD_PAGE, (e: IpcMainInvokeEvent, page: string) => {
const win = BrowserWindow.fromWebContents(e.sender);
if (win) this._loadPage(win, page);
@@ -139,17 +119,13 @@ class WindowService {
}
private _setupWinLifecycle(window: BrowserWindow, name: WindowNames) {
- const updateWinStatus = debounce(() => !window?.isDestroyed()
- && window?.webContents?.send(IPC_EVENTS.WINDOW_MAXIMIZE + 'back', window?.isMaximized()), 80);
window.once('closed', () => {
this._winStates[name].onClosed.forEach(callback => callback(window));
window?.destroy();
- window?.removeListener('resize', updateWinStatus);
this._winStates[name].instance = void 0;
this._winStates[name].isHidden = false;
logManager.info(`Window closed: ${name}`);
});
- window.on('resize', updateWinStatus)
return this;
}
diff --git a/electron/wins/index.ts b/electron/wins/index.ts
index 7528d8b..9538c98 100644
--- a/electron/wins/index.ts
+++ b/electron/wins/index.ts
@@ -7,6 +7,7 @@ import { logManager } from '@electron/service/logger'
import { configManager } from '@electron/service/config-service'
import { trayManager } from '@electron/service/tray-service'
import { TabManager } from '@service/tab-manager'
+import { registerWindowHandlers } from '@electron/ipc/window-handlers'
const handleTray = (minimizeToTray: boolean) => {
if (minimizeToTray) {
@@ -109,6 +110,7 @@ export function setupMainWindow() {
handleTray(minimizeToTray);
registerMenus(mainWindow);
+ registerWindowHandlers(mainWindow);
const tabManager = new TabManager(mainWindow)
tabManager.enable()
diff --git a/global.d.ts b/global.d.ts
index b554a07..ffa0e73 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -127,12 +127,12 @@ declare global {
external: {
open: (url: string) => Promise
-
- _hidden
-
-
-
-
-
diff --git a/src/components/HeaderBar/index.vue b/src/components/HeaderBar/index.vue
deleted file mode 100644
index 9391a91..0000000
--- a/src/components/HeaderBar/index.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-
-
+
+
+
+
diff --git a/src/components/Layout/index.vue b/src/components/Layout/index.vue
index d5cd6f1..7fcd79a 100644
--- a/src/components/Layout/index.vue
+++ b/src/components/Layout/index.vue
@@ -1,24 +1,29 @@
+
+
+
+
+
-
-
+
+
-
+
\ No newline at end of file
+
diff --git a/src/hooks/useWinManager.ts b/src/hooks/useWinManager.ts
deleted file mode 100644
index 5d67d6d..0000000
--- a/src/hooks/useWinManager.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export function useWinManager() {
- const isMaximized = ref(false)
-
- function closeWindow() {
- window.api.closeWindow();
- }
-
- function minimizeWindow() {
- window.api.minimizeWindow();
- }
-
- function maximizeWindow() {
- window.api.maximizeWindow();
- }
-
- onMounted(async () => {
- await nextTick();
- window.api.viewIsReady();
- isMaximized.value = await window.api.isWindowMaximized();
- window.api.onWindowMaximized((_isMaximized: boolean) => isMaximized.value = _isMaximized);
- })
-
- return {
- isMaximized,
- closeWindow,
- minimizeWindow,
- maximizeWindow
- }
-};
-
-export default useWinManager;
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index ee4ce55..041a188 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -2,10 +2,6 @@
export enum IPC_EVENTS {
EXTERNAL_OPEN = 'external-open',
- WINDOW_MINIMIZE = 'window-minimize',
- WINDOW_MAXIMIZE = 'window-maximize',
- WINDOW_CLOSE = 'window-close',
- IS_WINDOW_MAXIMIZED = 'is-window-maximized',
APP_SET_FRAMELESS = 'app:set-frameless',
APP_LOAD_PAGE = 'app:load-page',
TAB_CREATE = 'tab:create',
diff --git a/src/main.ts b/src/main.ts
index 8399cbf..4795631 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,13 +17,9 @@ import "./styles/index.css";
import 'element-plus/dist/index.css'
// 引入全局组件
-import HeaderBar from '@components/HeaderBar/index.vue'
-import DragRegion from '@components/DragRegion/index.vue'
import Layout from '@components/Layout/index.vue'
const components: Plugin = (app) => {
- app.component('HeaderBar', HeaderBar);
- app.component('DragRegion', DragRegion);
app.component('Layout', Layout);
}
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 5358055..c88a8fc 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,30 +1,26 @@
-
-
-
-
-
+
+
- 
+
- 
+
-
+
- 
-
+
- ![]()
+ ![]()
@@ -60,7 +56,7 @@
@@ -81,7 +77,7 @@
-->
- {{ t('login.title') }}
+
+
+
-
+ {{ t('login.title') }}
{{ t('login.subtitle') }}
{{ t('login.username') }}
- {{ t('login.password') }}
-
+