Files
gym-manage/docs/superpowers/plans/2026-04-15-menu-and-logout-fix-plan.md

22 KiB
Raw Permalink Blame History

菜单数据修复与登出功能优化实现计划

面向 AI 代理的工作者: 必需子技能:使用 superpowers:subagent-driven-development(推荐)或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框(- [ ])语法来跟踪进度。

目标: 修复数据库菜单数据,优化测试脚本,扩展测试覆盖范围,确保User Journey测试通过率≥90%

架构: 采用数据库菜单数据修复 + 测试脚本优化的方案。首先清理测试菜单数据,然后插入正确的业务菜单数据,接着优化测试脚本的选择器,最后扩展测试覆盖范围。

技术栈: PostgreSQL 15, Vue 3, Element Plus, Playwright, TypeScript


文件结构

数据库迁移文件

  • 创建: novalon-manage-api/manage-db/src/main/resources/db/migration/V14__Fix_menu_data.sql
    • 职责: 清理测试菜单数据,插入正确的业务菜单数据

测试脚本文件

  • 修改: novalon-manage-web/user-journey-test.js
    • 职责: 优化登出功能和系统配置菜单的测试选择器

新增测试用例文件

  • 创建: novalon-manage-web/e2e/menu-management.spec.ts

    • 职责: 测试菜单管理功能
  • 创建: novalon-manage-web/e2e/config-management.spec.ts

    • 职责: 测试参数配置功能
  • 创建: novalon-manage-web/e2e/dict-management.spec.ts

    • 职责: 测试字典管理功能

任务 1:数据库菜单数据修复

文件:

  • 创建:novalon-manage-api/manage-db/src/main/resources/db/migration/V14__Fix_menu_data.sql

  • 步骤 1:编写数据库迁移脚本

-- V14__Fix_menu_data.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, created_at, updated_at) VALUES
('系统管理', 0, 1, 'M', 'Setting', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('系统监控', 0, 2, 'M', 'Monitor', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('审计日志', 0, 3, 'M', 'Document', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

-- 插入二级菜单(系统管理下)
INSERT INTO sys_menu (menu_name, parent_id, order_num, menu_type, component, perms, icon, status, created_at, updated_at) VALUES
('用户管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理' AND parent_id = 0), 1, 'C', 'system/user/index', 'system:user:list', 'User', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('角色管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理' AND parent_id = 0), 2, 'C', 'system/role/index', 'system:role:list', 'UserFilled', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('菜单管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理' AND parent_id = 0), 3, 'C', 'system/menu/index', 'system:menu:list', 'Menu', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('参数配置', (SELECT id FROM sys_menu WHERE menu_name = '系统管理' AND parent_id = 0), 4, 'C', 'system/config/index', 'system:config:list', 'Tools', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('字典管理', (SELECT id FROM sys_menu WHERE menu_name = '系统管理' AND parent_id = 0), 5, 'C', 'system/dict/index', 'system:dict:list', 'Collection', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

-- 插入二级菜单(系统监控下)
INSERT INTO sys_menu (menu_name, parent_id, order_num, menu_type, component, perms, icon, status, created_at, updated_at) VALUES
('文件管理', (SELECT id FROM sys_menu WHERE menu_name = '系统监控' AND parent_id = 0), 1, 'C', 'system/file/index', 'system:file:list', 'Folder', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('通知公告', (SELECT id FROM sys_menu WHERE menu_name = '系统监控' AND parent_id = 0), 2, 'C', 'system/notice/index', 'system:notice:list', 'Bell', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

-- 插入二级菜单(审计日志下)
INSERT INTO sys_menu (menu_name, parent_id, order_num, menu_type, component, perms, icon, status, created_at, updated_at) VALUES
('登录日志', (SELECT id FROM sys_menu WHERE menu_name = '审计日志' AND parent_id = 0), 1, 'C', 'audit/login/index', 'audit:login:list', 'Document', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('操作日志', (SELECT id FROM sys_menu WHERE menu_name = '审计日志' AND parent_id = 0), 2, 'C', 'audit/operation/index', 'audit:operation:list', 'Document', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP),
('异常日志', (SELECT id FROM sys_menu WHERE menu_name = '审计日志' AND parent_id = 0), 3, 'C', 'audit/exception/index', 'audit:exception:list', 'Warning', 1, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);
  • 步骤 2:验证迁移脚本语法

运行:cat novalon-manage-api/manage-db/src/main/resources/db/migration/V14__Fix_menu_data.sql 预期:SQL脚本内容正确显示

  • 步骤 3:执行数据库迁移

运行:docker exec -i novalon-postgres psql -U novalon -d manage_system -f /docker-entrypoint-initdb.d/V14__Fix_menu_data.sql 预期:SQL脚本执行成功,无错误信息

  • 步骤 4:验证菜单数据

运行:docker exec -i novalon-postgres psql -U novalon -d manage_system -c "SELECT id, menu_name, parent_id, order_num, menu_type, component FROM sys_menu ORDER BY parent_id, order_num;" 预期:显示正确的菜单数据,包含3个一级菜单和11个二级菜单

  • 步骤 5Commit
git add novalon-manage-api/manage-db/src/main/resources/db/migration/V14__Fix_menu_data.sql
git commit -m "feat(db): 添加菜单数据修复迁移脚本

- 清理测试菜单数据
- 插入正确的业务菜单数据
- 包含3个一级菜单和11个二级菜单"

任务 2:优化登出功能测试

文件:

  • 修改:novalon-manage-web/user-journey-test.js:275-310

  • 步骤 1:更新登出功能测试选择器

// 阶段5: 登出流程测试
console.log('\n📋 阶段5: 登出流程测试');
console.log('=====================================');

try {
  // 首先点击用户头像以展开下拉菜单
  const avatarSelector = '.el-avatar';
  const avatarElement = page.locator(avatarSelector).first();
  
  if (await avatarElement.count() > 0) {
    await avatarElement.click();
    await page.waitForTimeout(500); // 等待下拉菜单展开
    
    // 然后点击退出登录按钮
    const logoutSelectors = [
      '.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'
    ];
    
    let loggedOut = false;
    for (const selector of logoutSelectors) {
      const element = page.locator(selector).first();
      if (await element.count() > 0) {
        await element.click();
        loggedOut = true;
        break;
      }
    }
    
    if (loggedOut) {
      await page.waitForTimeout(2000);
      const currentUrl = page.url();
      
      if (currentUrl.includes('login')) {
        await captureStep(page, '07-after-logout');
        logTest('登出成功', true);
      } else {
        throw new Error(`登出后未跳转到登录页,当前URL: ${currentUrl}`);
      }
    } else {
      throw new Error('未找到登出按钮');
    }
  } else {
    throw new Error('未找到用户头像');
  }
} catch (error) {
  logTest('登出成功', false, error.message);
}
  • 步骤 2:运行测试验证登出功能

运行:cd novalon-manage-web && node user-journey-test.js 预期:登出功能测试通过

  • 步骤 3Commit
git add novalon-manage-web/user-journey-test.js
git commit -m "test: 优化登出功能测试选择器

- 增加点击用户头像展开下拉菜单的步骤
- 更新选择器以匹配Element Plus下拉菜单项
- 提高测试稳定性"

任务 3:优化系统配置菜单测试

文件:

  • 修改:novalon-manage-web/user-journey-test.js:237-270

  • 步骤 1:更新系统配置菜单测试选择器

// ==================== 阶段4: 系统配置 ====================
console.log('\n📋 阶段4: 系统配置测试');
console.log('=====================================');

try {
  // 首先展开系统管理菜单(如果是折叠状态)
  const systemMenuSelector = '.el-sub-menu:has-text("系统管理")';
  const systemMenuElement = page.locator(systemMenuSelector).first();
  
  if (await systemMenuElement.count() > 0) {
    // 点击展开系统管理菜单
    await systemMenuElement.click();
    await page.waitForTimeout(500);
    
    // 然后点击参数配置菜单项
    const configMenuSelectors = [
      '.el-menu-item:has-text("参数配置")',
      '.el-menu-item:has-text("系统配置")',
      '.el-menu-item:has-text("配置管理")',
      'text=参数配置',
      'text=系统配置',
      'text=配置管理',
      '[data-menu="config"]',
      'a[href*="config"]'
    ];
    
    let navigated = false;
    for (const selector of configMenuSelectors) {
      const element = page.locator(selector).first();
      if (await element.count() > 0) {
        await element.click();
        navigated = true;
        break;
      }
    }
    
    if (navigated) {
      await page.waitForTimeout(1000);
      await captureStep(page, '06-system-config');
      logTest('导航到系统配置页面', true);
    } else {
      throw new Error('未找到系统配置菜单');
    }
  } else {
    throw new Error('未找到系统管理菜单');
  }
} catch (error) {
  logTest('导航到系统配置页面', false, error.message);
}
  • 步骤 2:运行测试验证系统配置菜单

运行:cd novalon-manage-web && node user-journey-test.js 预期:系统配置菜单测试通过

  • 步骤 3Commit
git add novalon-manage-web/user-journey-test.js
git commit -m "test: 优化系统配置菜单测试选择器

- 增加展开系统管理菜单的步骤
- 更新选择器以匹配实际的菜单文本
- 提高测试稳定性"

任务 4:创建菜单管理测试用例

文件:

  • 创建:novalon-manage-web/e2e/menu-management.spec.ts

  • 步骤 1:编写菜单管理测试用例

import { test, expect } from '@playwright/test';

test.describe('菜单管理功能测试', () => {
  let authToken: string;

  test.beforeAll(async ({ request }) => {
    const response = await request.post('http://localhost:8080/api/auth/login', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        username: 'admin',
        password: 'admin123'
      }
    });

    expect(response.status()).toBe(200);
    const data = await response.json();
    authToken = data.token;
  });

  test('菜单列表显示测试', async ({ page }) => {
    await test.step('导航到菜单管理页面', async () => {
      await page.goto('http://localhost:3002/login');
      
      const usernameInput = page.locator('input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]').first();
      const passwordInput = page.locator('input[type="password"]').first();
      const loginButton = page.locator('button:has-text("登录")').first();
      
      await usernameInput.fill('admin');
      await passwordInput.fill('admin123');
      await loginButton.click();
      
      await page.waitForTimeout(2000);
      
      // 点击系统管理菜单
      const systemMenu = page.locator('.el-sub-menu:has-text("系统管理")').first();
      if (await systemMenu.count() > 0) {
        await systemMenu.click();
        await page.waitForTimeout(500);
      }
      
      // 点击菜单管理
      const menuManagement = page.locator('.el-menu-item:has-text("菜单管理")').first();
      if (await menuManagement.count() > 0) {
        await menuManagement.click();
        await page.waitForTimeout(1000);
      }
    });

    await test.step('验证菜单列表显示', async () => {
      // 检查是否有菜单列表或表格
      const tableSelectors = [
        'table',
        '.el-table',
        '[class*="table"]',
        '.menu-list'
      ];
      
      let foundTable = false;
      for (const selector of tableSelectors) {
        const count = await page.locator(selector).count();
        if (count > 0) {
          foundTable = true;
          break;
        }
      }
      
      expect(foundTable).toBe(true);
    });
  });

  test('菜单树结构显示测试', async ({ page }) => {
    await test.step('验证菜单树结构', async () => {
      // 检查是否有树形结构
      const treeSelectors = [
        '.el-tree',
        '[class*="tree"]',
        '.menu-tree'
      ];
      
      let foundTree = false;
      for (const selector of treeSelectors) {
        const count = await page.locator(selector).count();
        if (count > 0) {
          foundTree = true;
          break;
        }
      }
      
      // 如果没有树形结构,检查表格是否支持展开
      if (!foundTree) {
        const expandButtons = page.locator('.el-table__expand-icon');
        const expandCount = await expandButtons.count();
        expect(expandCount).toBeGreaterThan(0);
      } else {
        expect(foundTree).toBe(true);
      }
    });
  });
});
  • 步骤 2:运行菜单管理测试

运行:cd novalon-manage-web && npx playwright test e2e/menu-management.spec.ts --reporter=list 预期:菜单管理测试通过

  • 步骤 3Commit
git add novalon-manage-web/e2e/menu-management.spec.ts
git commit -m "test: 添加菜单管理功能测试用例

- 测试菜单列表显示
- 测试菜单树结构显示
- 验证菜单管理的基本功能"

任务 5:创建参数配置测试用例

文件:

  • 创建:novalon-manage-web/e2e/config-management.spec.ts

  • 步骤 1:编写参数配置测试用例

import { test, expect } from '@playwright/test';

test.describe('参数配置功能测试', () => {
  let authToken: string;

  test.beforeAll(async ({ request }) => {
    const response = await request.post('http://localhost:8080/api/auth/login', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        username: 'admin',
        password: 'admin123'
      }
    });

    expect(response.status()).toBe(200);
    const data = await response.json();
    authToken = data.token;
  });

  test('参数配置列表显示测试', async ({ page }) => {
    await test.step('导航到参数配置页面', async () => {
      await page.goto('http://localhost:3002/login');
      
      const usernameInput = page.locator('input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]').first();
      const passwordInput = page.locator('input[type="password"]').first();
      const loginButton = page.locator('button:has-text("登录")').first();
      
      await usernameInput.fill('admin');
      await passwordInput.fill('admin123');
      await loginButton.click();
      
      await page.waitForTimeout(2000);
      
      // 点击系统管理菜单
      const systemMenu = page.locator('.el-sub-menu:has-text("系统管理")').first();
      if (await systemMenu.count() > 0) {
        await systemMenu.click();
        await page.waitForTimeout(500);
      }
      
      // 点击参数配置
      const configManagement = page.locator('.el-menu-item:has-text("参数配置")').first();
      if (await configManagement.count() > 0) {
        await configManagement.click();
        await page.waitForTimeout(1000);
      }
    });

    await test.step('验证参数配置列表显示', async () => {
      // 检查是否有参数配置列表或表格
      const tableSelectors = [
        'table',
        '.el-table',
        '[class*="table"]',
        '.config-list'
      ];
      
      let foundTable = false;
      for (const selector of tableSelectors) {
        const count = await page.locator(selector).count();
        if (count > 0) {
          foundTable = true;
          break;
        }
      }
      
      expect(foundTable).toBe(true);
    });
  });

  test('参数配置搜索功能测试', async ({ page }) => {
    await test.step('验证搜索功能', async () => {
      // 检查是否有搜索框
      const searchInput = page.locator('input[placeholder*="搜索"], input[placeholder*="查询"]').first();
      if (await searchInput.count() > 0) {
        await searchInput.fill('test');
        await page.waitForTimeout(500);
        
        // 检查是否有搜索按钮
        const searchButton = page.locator('button:has-text("搜索"), button:has-text("查询")').first();
        if (await searchButton.count() > 0) {
          await searchButton.click();
          await page.waitForTimeout(1000);
        }
      }
      
      // 验证搜索结果
      const table = page.locator('table, .el-table').first();
      expect(await table.count()).toBeGreaterThan(0);
    });
  });
});
  • 步骤 2:运行参数配置测试

运行:cd novalon-manage-web && npx playwright test e2e/config-management.spec.ts --reporter=list 预期:参数配置测试通过

  • 步骤 3Commit
git add novalon-manage-web/e2e/config-management.spec.ts
git commit -m "test: 添加参数配置功能测试用例

- 测试参数配置列表显示
- 测试参数配置搜索功能
- 验证参数配置的基本功能"

任务 6:创建字典管理测试用例

文件:

  • 创建:novalon-manage-web/e2e/dict-management.spec.ts

  • 步骤 1:编写字典管理测试用例

import { test, expect } from '@playwright/test';

test.describe('字典管理功能测试', () => {
  let authToken: string;

  test.beforeAll(async ({ request }) => {
    const response = await request.post('http://localhost:8080/api/auth/login', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        username: 'admin',
        password: 'admin123'
      }
    });

    expect(response.status()).toBe(200);
    const data = await response.json();
    authToken = data.token;
  });

  test('字典管理列表显示测试', async ({ page }) => {
    await test.step('导航到字典管理页面', async () => {
      await page.goto('http://localhost:3002/login');
      
      const usernameInput = page.locator('input[type="text"], input[placeholder*="用户名"], input[placeholder*="账号"]').first();
      const passwordInput = page.locator('input[type="password"]').first();
      const loginButton = page.locator('button:has-text("登录")').first();
      
      await usernameInput.fill('admin');
      await passwordInput.fill('admin123');
      await loginButton.click();
      
      await page.waitForTimeout(2000);
      
      // 点击系统管理菜单
      const systemMenu = page.locator('.el-sub-menu:has-text("系统管理")').first();
      if (await systemMenu.count() > 0) {
        await systemMenu.click();
        await page.waitForTimeout(500);
      }
      
      // 点击字典管理
      const dictManagement = page.locator('.el-menu-item:has-text("字典管理")').first();
      if (await dictManagement.count() > 0) {
        await dictManagement.click();
        await page.waitForTimeout(1000);
      }
    });

    await test.step('验证字典管理列表显示', async () => {
      // 检查是否有字典管理列表或表格
      const tableSelectors = [
        'table',
        '.el-table',
        '[class*="table"]',
        '.dict-list'
      ];
      
      let foundTable = false;
      for (const selector of tableSelectors) {
        const count = await page.locator(selector).count();
        if (count > 0) {
          foundTable = true;
          break;
        }
      }
      
      expect(foundTable).toBe(true);
    });
  });

  test('字典项管理功能测试', async ({ page }) => {
    await test.step('验证字典项管理功能', async () => {
      // 检查是否有字典项列表
      const dictItemSelectors = [
        '.dict-item-list',
        '[class*="dict-item"]',
        '.el-table'
      ];
      
      let foundDictItem = false;
      for (const selector of dictItemSelectors) {
        const count = await page.locator(selector).count();
        if (count > 0) {
          foundDictItem = true;
          break;
        }
      }
      
      // 如果没有单独的字典项列表,检查表格是否支持展开
      if (!foundDictItem) {
        const expandButtons = page.locator('.el-table__expand-icon');
        const expandCount = await expandButtons.count();
        expect(expandCount).toBeGreaterThanOrEqual(0);
      } else {
        expect(foundDictItem).toBe(true);
      }
    });
  });
});
  • 步骤 2:运行字典管理测试

运行:cd novalon-manage-web && npx playwright test e2e/dict-management.spec.ts --reporter=list 预期:字典管理测试通过

  • 步骤 3Commit
git add novalon-manage-web/e2e/dict-management.spec.ts
git commit -m "test: 添加字典管理功能测试用例

- 测试字典管理列表显示
- 测试字典项管理功能
- 验证字典管理的基本功能"

任务 7:运行完整测试验证

文件:

  • 无文件修改

  • 步骤 1:运行完整的User Journey测试

运行:cd novalon-manage-web && node user-journey-test.js 预期:所有测试通过,通过率≥90%

  • 步骤 2:运行新增的测试用例

运行:cd novalon-manage-web && npx playwright test e2e/menu-management.spec.ts e2e/config-management.spec.ts e2e/dict-management.spec.ts --reporter=list 预期:所有新增测试用例通过

  • 步骤 3:生成测试报告

运行:cd novalon-manage-web && npx playwright test --reporter=html 预期:生成HTML测试报告

  • 步骤 4:验证测试覆盖率

运行:cat /tmp/user-journey-report.json 预期:测试通过率≥90%


验收标准

功能验收

  • 数据库菜单数据正确插入
  • 前端菜单正确显示
  • 登出功能测试通过
  • 系统配置菜单测试通过
  • 所有User Journey测试通过率≥90%

质量验收

  • 代码通过ESLint检查
  • 单元测试覆盖率≥80%
  • 无严重Bug
  • 性能指标达标

风险评估

技术风险

  • 菜单数据插入失败: 使用事务确保数据一致性
  • 前端菜单显示异常: 充分测试菜单组件
  • 测试脚本不稳定: 增加重试机制和等待时间

业务风险

  • 菜单权限配置错误: 严格按照权限设计配置
  • 用户体验不佳: 进行用户验收测试