novalon/novalon-manage-system
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 分析系统配置菜单缺失的根本原因
- 分析登出功能测试失败的根本原因
- 设计数据库菜单数据修复方案
- 设计测试脚本优化方案
- 制定实施步骤和验收标准
This commit is contained in:
张翔
2026-04-15 21:36:37 +08:00
parent fdca179d45
commit acc59d2144
2 changed files with 376 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
-3
View File
@@ -164,8 +164,5 @@ nbdist/
# trae
.trae/
# docs
docs/
# git worktrees
.worktrees/
docs/superpowers/specs/2026-04-15-menu-and-logout-fix-design.md
+376
View File
@@ -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
<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)