gym-manage/docs/superpowers/specs/2026-04-15-menu-and-logout-fix-design.md

菜单数据修复与登出功能优化设计文档

日期: 2026-04-15
作者: 张翔
版本: 1.0

1. 背景与问题

1.1 问题背景

在User Journey测试过程中，发现了以下两个主要问题：

1. 系统配置菜单缺失: 测试脚本无法找到"系统配置"菜单，导致测试失败
2. 登出功能测试失败: 测试脚本报告"登出功能缺失"，但实际上登出功能已经在前端实现

1.2 问题根因分析

1.2.1 系统配置菜单缺失

根本原因: 数据库中的菜单数据都是测试数据，没有实际的业务菜单

数据库现状:

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 登出功能测试失败

根本原因: 测试脚本的选择器没有正确匹配到下拉菜单中的"退出登录"按钮

前端实现现状:

<el-dropdown @command="handleCommand">
  <el-avatar :size="32">
    {{ username }}
  </el-avatar>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item command="profile">
        个人中心
      </el-dropdown-item>
      <el-dropdown-item
        command="logout"
        divided
      >
        退出登录
      </el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

测试脚本选择器:

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 数据库表结构

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 菜单数据插入

-- 清理测试数据
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的下拉菜单结构

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 系统配置菜单测试优化

问题: 当前选择器无法匹配实际的菜单文本

解决方案: 更新选择器以匹配实际的菜单结构

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 测试数据管理

建立测试数据管理机制，确保测试数据的独立性和可重复性：

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组件文档
• Element Plus Dropdown组件文档
• Vue Router官方文档
• Playwright最佳实践