# 菜单数据修复与登出功能优化设计文档 **日期**: 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)