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

**日期**: 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
<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>
```

**测试脚本选择器**:
```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)
