diff --git a/.gitignore b/.gitignore index 35fa4b0..bcf6260 100644 --- a/.gitignore +++ b/.gitignore @@ -164,8 +164,5 @@ nbdist/ # trae .trae/ -# docs -docs/ - # git worktrees .worktrees/ \ No newline at end of file diff --git a/docs/superpowers/specs/2026-04-15-menu-and-logout-fix-design.md b/docs/superpowers/specs/2026-04-15-menu-and-logout-fix-design.md new file mode 100644 index 0000000..fe3f4e1 --- /dev/null +++ b/docs/superpowers/specs/2026-04-15-menu-and-logout-fix-design.md @@ -0,0 +1,376 @@ +# 菜单数据修复与登出功能优化设计文档 + +**日期**: 2026-04-15 +**作者**: 张翔 +**版本**: 1.0 + +## 1. 背景与问题 + +### 1.1 问题背景 + +在User Journey测试过程中，发现了以下两个主要问题： + +1. **系统配置菜单缺失**: 测试脚本无法找到"系统配置"菜单，导致测试失败 +2. **登出功能测试失败**: 测试脚本报告"登出功能缺失"，但实际上登出功能已经在前端实现 + +### 1.2 问题根因分析 + +#### 1.2.1 系统配置菜单缺失 + +**根本原因**: 数据库中的菜单数据都是测试数据，没有实际的业务菜单 + +**数据库现状**: +```sql +SELECT id, menu_name, parent_id, order_num, menu_type, component FROM sys_menu; +``` + +结果： +``` + id | menu_name | parent_id | order_num | menu_type | component +----+-------------------------+-----------+-----------+-----------+----------- + 1 | 测试菜单_1774884610 | 0 | 1 | M | + 2 | 测试菜单_1774885290 | 0 | 1 | M | + 3 | 回归测试菜单_1774885909 | 0 | 1 | M | + 4 | 回归测试菜单_1774885952 | 0 | 1 | M | + 5 | 回归测试菜单_1774885984 | 0 | 1 | M | + 6 | 回归测试菜单_1774886603 | 0 | 1 | M | + 7 | 回归测试菜单_1774886605 | 0 | 1 | M | +``` + +**影响**: +- 前端无法显示正确的业务菜单 +- 测试脚本无法找到"系统配置"等业务菜单 +- 用户体验极差，无法使用系统功能 + +#### 1.2.2 登出功能测试失败 + +**根本原因**: 测试脚本的选择器没有正确匹配到下拉菜单中的"退出登录"按钮 + +**前端实现现状**: +```vue + + + {{ username }} + + + +``` + +**测试脚本选择器**: +```javascript +const logoutSelectors = [ + 'button:has-text("退出")', + 'button:has-text("登出")', + 'a:has-text("退出")', + 'a:has-text("登出")', + '[data-action="logout"]', + '.logout-button' +]; +``` + +**问题**: 选择器没有匹配到`el-dropdown-item`元素 + +**影响**: +- 测试报告显示"登出功能缺失" +- 实际上登出功能已经实现，只是测试脚本不准确 + +## 2. 解决方案设计 + +### 2.1 方案概述 + +采用**数据库菜单数据修复 + 测试脚本优化**的方案，解决根本问题并提高测试准确性。 + +### 2.2 数据库菜单数据修复 + +#### 2.2.1 菜单数据结构设计 + +基于前端路由配置，设计以下菜单结构： + +**一级菜单**: +1. 系统管理 (System Management) +2. 系统监控 (System Monitor) +3. 审计日志 (Audit Log) + +**二级菜单**: +- 系统管理下： + - 用户管理 + - 角色管理 + - 菜单管理 + - 参数配置 + - 字典管理 +- 系统监控下： + - 文件管理 + - 通知公告 +- 审计日志下： + - 登录日志 + - 操作日志 + - 异常日志 + +#### 2.2.2 数据库表结构 + +```sql +CREATE TABLE IF NOT EXISTS sys_menu ( + id BIGSERIAL PRIMARY KEY, + menu_name VARCHAR(50) NOT NULL, + parent_id BIGINT DEFAULT 0, + order_num INT DEFAULT 0, + menu_type CHAR(1) DEFAULT 'M', -- M: 目录, C: 菜单, F: 按钮 + component VARCHAR(200), + perms VARCHAR(100), + icon VARCHAR(100), + status INT DEFAULT 1, + visible INT DEFAULT 1, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + deleted_at TIMESTAMP +); +``` + +#### 2.2.3 菜单数据插入 + +```sql +-- 清理测试数据 +DELETE FROM sys_menu WHERE menu_name LIKE '%测试%' OR menu_name LIKE '%回归%'; + +-- 插入一级菜单 +INSERT INTO sys_menu (menu_name, parent_id, order_num, menu_type, icon, status) VALUES +('系统管理', 0, 1, 'M', 'Setting', 1), +('系统监控', 0, 2, 'M', 'Monitor', 1), +('审计日志', 0, 3, 'M', 'Document', 1); + +-- 插入二级菜单 +INSERT INTO sys_menu (menu_name, parent_id, order_num, menu_type, component, perms, icon, status) VALUES +-- 系统管理下的菜单 +('用户管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理'), 1, 'C', 'system/user/index', 'system:user:list', 'User', 1), +('角色管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理'), 2, 'C', 'system/role/index', 'system:role:list', 'UserFilled', 1), +('菜单管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理'), 3, 'C', 'system/menu/index', 'system:menu:list', 'Menu', 1), +('参数配置', (SELECT id FROM sys_menu WHERE menu_name = '系统管理'), 4, 'C', 'system/config/index', 'system:config:list', 'Tools', 1), +('字典管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理'), 5, 'C', 'system/dict/index', 'system:dict:list', 'Collection', 1), + +-- 系统监控下的菜单 +('文件管理', (SELECT id FROM sys_menu WHERE menu_name = '系统监控'), 1, 'C', 'system/file/index', 'system:file:list', 'Folder', 1), +('通知公告', (SELECT id FROM sys_menu WHERE menu_name = '系统监控'), 2, 'C', 'system/notice/index', 'system:notice:list', 'Bell', 1), + +-- 审计日志下的菜单 +('登录日志', (SELECT id FROM sys_menu WHERE menu_name = '审计日志'), 1, 'C', 'audit/login/index', 'audit:login:list', 'Document', 1), +('操作日志', (SELECT id FROM sys_menu WHERE menu_name = '审计日志'), 2, 'C', 'audit/operation/index', 'audit:operation:list', 'Document', 1), +('异常日志', (SELECT id FROM sys_menu WHERE menu_name = '审计日志'), 3, 'C', 'audit/exception/index', 'audit:exception:list', 'Warning', 1); +``` + +### 2.3 测试脚本优化 + +#### 2.3.1 登出功能测试优化 + +**问题**: 当前选择器无法匹配Element Plus的下拉菜单项 + +**解决方案**: 更新选择器以匹配Element Plus的下拉菜单结构 + +```javascript +const logoutSelectors = [ + // Element Plus下拉菜单项 + '.el-dropdown-menu__item:has-text("退出登录")', + '.el-dropdown-menu__item:has-text("退出")', + '.el-dropdown-menu__item:has-text("登出")', + + // 通用选择器 + 'button:has-text("退出")', + 'button:has-text("登出")', + 'a:has-text("退出")', + 'a:has-text("登出")', + '[data-action="logout"]', + '.logout-button' +]; +``` + +#### 2.3.2 系统配置菜单测试优化 + +**问题**: 当前选择器无法匹配实际的菜单文本 + +**解决方案**: 更新选择器以匹配实际的菜单结构 + +```javascript +const configMenuSelectors = [ + // Element Plus菜单项 + '.el-menu-item:has-text("参数配置")', + '.el-menu-item:has-text("系统配置")', + '.el-menu-item:has-text("配置管理")', + + // 通用选择器 + 'text=参数配置', + 'text=系统配置', + 'text=配置管理', + '[data-menu="config"]', + 'a[href*="config"]' +]; +``` + +### 2.4 扩展测试覆盖 + +#### 2.4.1 新增测试用例 + +1. **菜单管理功能测试** + - 测试菜单的增删改查 + - 测试菜单树的显示 + - 测试菜单权限控制 + +2. **参数配置功能测试** + - 测试参数的增删改查 + - 测试参数的缓存机制 + - 测试参数的导入导出 + +3. **字典管理功能测试** + - 测试字典的增删改查 + - 测试字典项的管理 + - 测试字典的缓存机制 + +#### 2.4.2 测试数据管理 + +建立测试数据管理机制，确保测试数据的独立性和可重复性： + +```javascript +class TestDataManager { + async setupTestData() { + // 创建测试用户 + // 创建测试角色 + // 创建测试菜单 + } + + async cleanupTestData() { + // 清理测试用户 + // 清理测试角色 + // 清理测试菜单 + } +} +``` + +## 3. 实施步骤 + +### 3.1 数据库菜单数据修复 + +1. **清理测试数据** + - 删除所有测试菜单数据 + - 确保数据库干净 + +2. **插入业务菜单数据** + - 按照设计的菜单结构插入数据 + - 确保菜单层级关系正确 + +3. **验证菜单数据** + - 查询菜单数据确认正确性 + - 测试前端菜单显示 + +### 3.2 测试脚本优化 + +1. **更新登出功能测试** + - 修改选择器以匹配Element Plus下拉菜单 + - 增加等待时间确保下拉菜单展开 + +2. **更新系统配置菜单测试** + - 修改选择器以匹配实际菜单文本 + - 增加菜单导航的容错处理 + +3. **扩展测试覆盖** + - 编写菜单管理测试用例 + - 编写参数配置测试用例 + - 编写字典管理测试用例 + +### 3.3 验证与测试 + +1. **单元测试** + - 测试菜单数据的正确性 + - 测试前端菜单组件 + +2. **集成测试** + - 测试前后端菜单数据交互 + - 测试菜单权限控制 + +3. **端到端测试** + - 运行完整的User Journey测试 + - 验证所有测试用例通过 + +## 4. 测试策略 + +### 4.1 测试层次 + +1. **单元测试**: 测试菜单组件和数据转换逻辑 +2. **集成测试**: 测试前后端菜单数据交互 +3. **端到端测试**: 测试完整的用户操作流程 + +### 4.2 测试数据 + +1. **测试用户**: 使用admin/admin123进行测试 +2. **测试菜单**: 使用实际业务菜单数据 +3. **测试环境**: 使用开发环境数据库 + +### 4.3 测试工具 + +1. **Playwright**: 用于端到端测试 +2. **Vitest**: 用于单元测试 +3. **PostgreSQL**: 用于数据库验证 + +## 5. 风险评估 + +### 5.1 技术风险 + +| 风险项 | 影响程度 | 发生概率 | 缓解措施 | +|--------|----------|----------|----------| +| 菜单数据插入失败 | 高 | 低 | 使用事务确保数据一致性 | +| 前端菜单显示异常 | 中 | 中 | 充分测试菜单组件 | +| 测试脚本不稳定 | 中 | 中 | 增加重试机制和等待时间 | + +### 5.2 业务风险 + +| 风险项 | 影响程度 | 发生概率 | 缓解措施 | +|--------|----------|----------|----------| +| 菜单权限配置错误 | 高 | 低 | 严格按照权限设计配置 | +| 用户体验不佳 | 中 | 低 | 进行用户验收测试 | + +## 6. 验收标准 + +### 6.1 功能验收 + +- [ ] 数据库菜单数据正确插入 +- [ ] 前端菜单正确显示 +- [ ] 登出功能测试通过 +- [ ] 系统配置菜单测试通过 +- [ ] 所有User Journey测试通过率≥90% + +### 6.2 质量验收 + +- [ ] 代码通过ESLint检查 +- [ ] 单元测试覆盖率≥80% +- [ ] 无严重Bug +- [ ] 性能指标达标 + +## 7. 后续优化 + +### 7.1 短期优化 + +1. 完善菜单权限控制 +2. 优化菜单加载性能 +3. 增加菜单缓存机制 + +### 7.2 长期优化 + +1. 实现菜单的动态配置 +2. 支持菜单的导入导出 +3. 建立菜单变更审计日志 + +## 8. 参考资料 + +- [Element Plus Menu组件文档](https://element-plus.org/zh-CN/component/menu.html) +- [Element Plus Dropdown组件文档](https://element-plus.org/zh-CN/component/dropdown.html) +- [Vue Router官方文档](https://router.vuejs.org/zh/) +- [Playwright最佳实践](https://playwright.dev/docs/best-practices)