架构重构样式系统：采用 Windows 11 Fluent Design 规范

2026-04-18 18:55:06 +08:00
parent cf1070a279
commit 20b065af5b
15 changed files with 1031 additions and 701 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -16,8 +16,10 @@ iFlow 设置编辑器是一个基于 Electron + Vue 3 的桌面应用程序，
 | concurrently | ^8.2.2 | 并发执行工具 |
 | electron-builder | ^24.13.3 | 应用打包工具 |
 | vitest | ^4.1.4 | 单元测试框架 |
-| @vue/test-utils | ^2.5.0 | Vue 组件测试工具 |
-| happy-dom | Latest | 浏览器环境模拟 |
+| @vue/test-utils | ^2.4.6 | Vue 组件测试工具 |
+| happy-dom | ^20.9.0 | 浏览器环境模拟 |
+| vue-i18n | ^9.14.5 | 国际化支持 |
+| less | ^4.6.4 | CSS 预处理器 |

 ## 项目结构

@@ -28,10 +30,11 @@ iflow-settings-editor/
 ├── index.html           # HTML 入口
 ├── package.json         # 项目配置
 ├── vite.config.js       # Vite 配置
-├── vitest.config.js      # Vitest 测试配置
+├── vitest.config.js     # Vitest 测试配置
 ├── src/
 │   ├── main.js         # Vue 入口
-│   ├── components/     # 可复用组件
+│   ├── App.vue          # 根组件
+│   ├── components/      # 可复用组件
 │   │   ├── ApiProfileDialog.vue
 │   │   ├── Footer.vue
 │   │   ├── InputDialog.vue
@@ -39,12 +42,16 @@ iflow-settings-editor/
 │   │   ├── ServerPanel.vue
 │   │   ├── SideBar.vue
 │   │   └── TitleBar.vue
-│   ├── views/         # 页面视图组件
+│   ├── views/           # 页面视图组件
 │   │   ├── ApiConfig.vue
 │   │   ├── GeneralSettings.vue
 │   │   └── McpServers.vue
-│   └── styles/        # 全局样式
-│       └── global.less
+│   ├── styles/          # 全局样式
+│   │   └── global.less
+│   └── locales/         # 国际化资源
+│       ├── index.js
+│       ├── en-US.js
+│       └── ja-JP.js
 ├── build/               # 构建资源 (图标等)
 ├── dist/                # Vite 构建输出
 ├── release/             # 打包输出目录
@@ -84,7 +91,10 @@ window.electronAPI = {
  // 托盘事件监听
  onApiProfileSwitched: (callback) => {
    ipcRenderer.on('api-profile-switched', (event, profileName) => callback(profileName))
-  }
+  },
+
+  // 语言切换通知
+  notifyLanguageChanged: () => ipcRenderer.send('language-changed')
 }
 ```

@@ -103,7 +113,7 @@ window.electronAPI = {
 - 双击托盘图标显示主窗口

 ### API 配置切换
- 支持多环境配置: 默认配置、开发环境、预发布环境、生产环境
+- 支持多环境配置: 默认配置，开发环境、预发布环境、生产环境
 - 配置文件管理: 支持创建、编辑、复制、删除、重命名
 - 单独保存每个环境的 API 配置到 `apiProfiles` 对象
 - 切换配置时直接应用新配置，无需确认
@@ -125,17 +135,17 @@ npm run build:win32      # 构建 Windows x86 安装包
 npm run build:win-portable  # 构建可移植版本
 npm run build:win-installer  # 构建 NSIS 安装包
 npm run dist             # 完整构建和打包
-npm run test            # 运行所有测试（监听模式）
-npm run test:run        # 运行测试一次
+npm run test             # 运行所有测试（监听模式）
+npm run test:run         # 运行测试一次
 npm run test:ui          # 运行测试 UI 界面
-npm run test:coverage   # 生成测试覆盖率报告
+npm run test:coverage    # 生成测试覆盖率报告
 ```

 ## 功能模块

 ### 1. 常规设置 (General)
 - **语言**: zh-CN / en-US / ja-JP
- **主题**: Xcode / Dark / Light / Solarized Dark
+- **主题**: Xcode / Dark / Solarized Dark
 - **启动动画**: 已显示 / 未显示
 - **检查点保存**: 启用 / 禁用

@@ -210,7 +220,59 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc
 - `currentApiProfile`: 'default'
 - `mcpServers`: {}

-### 8. 测试框架 (Vitest)
+## 设计系统
+
+### Windows UI Kit - Fluent Design
+
+本项目采用 Windows 11 Fluent Design 设计规范，实现统一的视觉效果。
+
+#### 主题变量
+
+**Light 模式：**
+```css
+:root {
+  --bg-primary: rgba(243, 243, 243, 0.85);
+  --bg-secondary: rgba(255, 255, 255, 0.70);
+  --bg-tertiary: #ebebeb;
+  --bg-elevated: rgba(255, 255, 255, 0.95);
+  --text-primary: #1a1a1a;
+  --text-secondary: #5d5d5d;
+  --accent: #0078d4;
+  --accent-hover: #106ebe;
+  --border: #e0e0e0;
+  --control-fill: rgba(249, 249, 249, 0.85);
+}
+```
+
+**Dark 模式：**
+```css
+.dark {
+  --bg-primary: #1f1f1f;
+  --bg-secondary: #2d2d2d;
+  --text-primary: #ffffff;
+  --accent: #60cdff;
+  --control-fill: #333333;
+}
+```
+
+**Solarized Dark 模式：**
+```css
+.solarized-dark {
+  --bg-primary: #002b36;
+  --bg-secondary: #073642;
+  --text-primary: #839496;
+  --accent: #268bd2;
+}
+```
+
+#### 设计原则
+- **Mica -inspired 层次感**: 使用半透明背景和分层深度
+- **圆角系统**: 4px / 6px / 8px / 12px 四级圆角
+- **阴影层次**: sm / md / lg / xl 四级阴影
+- **过渡动画**: 0.1s-0.2s 流畅曲线
+- **Segoe UI Variable 字体**: Windows 11 原生字体
+
+## 测试框架 (Vitest)

 **测试配置**：
 - 使用 Vitest 作为测试运行器
@@ -225,45 +287,23 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc
 ```
 src/
 ├── components/
-│   ├── Footer.test.js      # Footer 组件测试 (5 个测试)
-│   ├── SideBar.test.js     # 侧边栏测试 (10 个测试)
-│   └── TitleBar.test.js     # 标题栏测试 (8 个测试)
+│   ├── Footer.test.js      # Footer 组件测试
+│   ├── SideBar.test.js      # 侧边栏测试
+│   └── TitleBar.test.js     # 标题栏测试
 └── views/
-    ├── ApiConfig.test.js        # API 配置测试 (15 个测试)
-    ├── GeneralSettings.test.js   # 常规设置测试 (8 个测试)
-    └── McpServers.test.js       # MCP 服务器测试 (12 个测试)
+    ├── ApiConfig.test.js        # API 配置测试
+    ├── GeneralSettings.test.js   # 常规设置测试
+    └── McpServers.test.js       # MCP 服务器测试
 ```

-**测试覆盖范围**：
- **视图组件**：
-  - GeneralSettings - 常规设置页面
-  - ApiConfig - API 配置管理
-  - McpServers - MCP 服务器管理
- **UI 组件**：
-  - Footer - 状态栏
-  - TitleBar - 窗口标题栏
-  - SideBar - 侧边导航栏
-
 **测试命令**：
 ```bash
 npm run test            # 运行所有测试（监听模式）
-npm run test:run        # 运行测试一次
-npm run test:ui          # 运行测试 UI 界面 (http://localhost:51204/__vitest__/)
-npm run test:coverage   # 生成测试覆盖率报告
+npm run test:run       # 运行测试一次
+npm run test:ui        # 运行测试 UI 界面 (http://localhost:5174/__vitest__/)
+npm run test:coverage  # 生成测试覆盖率报告
 ```

-**测试统计**：
- 总测试文件：6 个
- 总测试用例：58 个
- 测试执行时间：约 5-6 秒
- 覆盖率：可查看 HTML 报告
-
-**测试策略**：
- 使用 mock 函数模拟外部 API（如 `window.electronAPI`）
- 测试组件渲染、事件触发、状态管理
- 验证用户交互流程
- 测试边界情况和错误处理
-
 ## 开发注意事项

 1. **修改检测**: 通过 `watch(settings, () => { modified.value = true }, { deep: true })` 深度监听
@@ -275,6 +315,7 @@ npm run test:coverage   # 生成测试覆盖率报告
 7. **序列化问题**: IPC 通信使用 `JSON.parse(JSON.stringify())` 避免 Vue 响应式代理问题
 8. **默认值处理**: 加载配置时检查 `undefined` 并应用默认值，防止界面显示异常
 9. **托盘切换事件**: 监听 `onApiProfileSwitched` 处理托盘发起的配置切换
+10. **样式系统**: 使用 Windows UI Kit 设计系统，所有变量在 `global.less` 中定义

 ## 图标使用

@@ -311,19 +352,12 @@ import { Save, Config, Key, Server, Globe, Setting, Add, Edit, Delete, Exchange,
 - MCP 服务器编辑使用侧边面板 (从右侧滑入)
 - API 配置编辑使用模态对话框

-### 主题变量
-```css
-:root {
-  --bg-primary: #f8fafc;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #f1f5f9;
-  --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-tertiary: #94a3b8;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
-  --border: #e2e8f0;
-  --success: #10b981;
-  --danger: #ef4444;
-}
-```
+## 版本历史
+
+| 版本 | 日期 | 主要变更 |
+|------|------|----------|
+| 1.6.0 | 2026-04-18 | 架构：重构样式系统，采用 Windows 11 Fluent Design 规范 |
+| 1.5.1 | 2026-04-17 | 新增系统托盘功能，托盘快速切换 API 配置 |
+| 1.5.0 | 2026-04-16 | 新增自定义消息对话框，API 配置重命名 |
+| 1.4.0 | 2026-04-14 | 新增多环境配置文件管理 |
+| 1.0.0 | 2026-04-14 | 项目初始化 |