文档 更新：补充测试框架和相关文档

AGENTS.md

@@ -15,6 +15,9 @@ iFlow 设置编辑器是一个基于 Electron + Vue 3 的桌面应用程序，
 | @vitejs/plugin-vue | ^6.0.6 | Vue 插件 |
 | concurrently | ^8.2.2 | 并发执行工具 |
 | electron-builder | ^24.13.3 | 应用打包工具 |
+| vitest | ^4.1.4 | 单元测试框架 |
+| @vue/test-utils | ^2.5.0 | Vue 组件测试工具 |
+| happy-dom | Latest | 浏览器环境模拟 |
 
 ## 项目结构
 
@@ -25,9 +28,23 @@ iflow-settings-editor/
 ├── index.html           # HTML 入口
 ├── package.json         # 项目配置
 ├── vite.config.js       # Vite 配置
+├── vitest.config.js      # Vitest 测试配置
 ├── src/
 │   ├── main.js         # Vue 入口
-│   └── App.vue         # 主组件 (所有业务逻辑、UI 组件)
+│   ├── components/     # 可复用组件
+│   │   ├── ApiProfileDialog.vue
+│   │   ├── Footer.vue
+│   │   ├── InputDialog.vue
+│   │   ├── MessageDialog.vue
+│   │   ├── ServerPanel.vue
+│   │   ├── SideBar.vue
+│   │   └── TitleBar.vue
+│   ├── views/         # 页面视图组件
+│   │   ├── ApiConfig.vue
+│   │   ├── GeneralSettings.vue
+│   │   └── McpServers.vue
+│   └── styles/        # 全局样式
+│       └── global.less
 ├── build/               # 构建资源 (图标等)
 ├── dist/                # Vite 构建输出
 ├── release/             # 打包输出目录
@@ -108,6 +125,10 @@ 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:ui          # 运行测试 UI 界面
+npm run test:coverage   # 生成测试覆盖率报告
 ```
 
 ## 功能模块
@@ -189,6 +210,60 @@ const API_FIELDS = ['selectedAuthType', 'apiKey', 'baseUrl', 'modelName', 'searc
 - `currentApiProfile`: 'default'
 - `mcpServers`: {}
 
+### 8. 测试框架 (Vitest)
+
+**测试配置**：
+- 使用 Vitest 作为测试运行器
+- 使用 `@vue/test-utils` 进行 Vue 组件测试
+- 使用 `happy-dom` 作为浏览器环境模拟
+- 配置文件：`vitest.config.js`
+- 全局变量启用：`globals: true`
+- 覆盖率工具：`v8`
+- 覆盖率报告格式：text、json、html
+
+**测试文件结构**：
+```
+src/
+├── components/
+│   ├── Footer.test.js      # Footer 组件测试 (5 个测试)
+│   ├── SideBar.test.js     # 侧边栏测试 (10 个测试)
+│   └── TitleBar.test.js     # 标题栏测试 (8 个测试)
+└── views/
+    ├── ApiConfig.test.js        # API 配置测试 (15 个测试)
+    ├── GeneralSettings.test.js   # 常规设置测试 (8 个测试)
+    └── McpServers.test.js       # MCP 服务器测试 (12 个测试)
+```
+
+**测试覆盖范围**：
+- **视图组件**：
+  - 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   # 生成测试覆盖率报告
+```
+
+**测试统计**：
+- 总测试文件：6 个
+- 总测试用例：58 个
+- 测试执行时间：约 5-6 秒
+- 覆盖率：可查看 HTML 报告
+
+**测试策略**：
+- 使用 mock 函数模拟外部 API（如 `window.electronAPI`）
+- 测试组件渲染、事件触发、状态管理
+- 验证用户交互流程
+- 测试边界情况和错误处理
+
 ## 开发注意事项
 
 1. **修改检测**: 通过 `watch(settings, () => { modified.value = true }, { deep: true })` 深度监听
@@ -251,4 +326,4 @@ import { Save, Config, Key, Server, Globe, Setting, Add, Edit, Delete, Exchange,
   --success: #10b981;
   --danger: #ef4444;
 }
-```
+```