diff --git a/docs/superpowers/guides/e2e-selectors-guide.md b/docs/superpowers/guides/e2e-selectors-guide.md
new file mode 100644
index 0000000..de8284b
--- /dev/null
+++ b/docs/superpowers/guides/e2e-selectors-guide.md
@@ -0,0 +1,119 @@
+# E2E 测试选择器指南
+
+## 概述
+
+本文档记录了 NovaVis 睿视项目中实际使用的选择器，用于 E2E 测试。
+
+## 核心原则
+
+1. **优先使用文本选择器** - 更稳定，不易受 UI 库变更影响
+2. **避免依赖 data-testid** - 除非确实存在
+3. **使用页面快照验证** - 确保选择器正确
+
+## 页面选择器映射
+
+### 案件管理页面
+
+| 元素 | 选择器 | 说明 |
+|------|--------|------|
+| 案件列表项 | `button:has-text("进入")` | 使用"进入"按钮定位案件 |
+| 第一个案件 | `button:has-text("进入")` | 选择第一个案件 |
+| 案件卡片 | `generic[cursor=pointer]` | 卡片容器 |
+
+### 导航菜单
+
+| 元素 | 选择器 | 说明 |
+|------|--------|------|
+| 案件管理 | `menuitem:has-text("案件管理")` | 主菜单项 |
+| 概览 | `menuitem:has-text("概览")` | 子菜单项 |
+| 数据管理 | `menuitem:has-text("数据管理")` | 主菜单项 |
+| 关系分析 | `menuitem:has-text("关系分析")` | 主菜单项 |
+| 资金流向 | `menuitem:has-text("资金流向")` | 主菜单项 |
+| AI 分析 | `menuitem:has-text("AI 分析")` | 主菜单项 |
+| 报告中心 | `menuitem:has-text("报告中心")` | 主菜单项 |
+| 标注管理 | `menuitem:has-text("标注管理")` | 主菜单项 |
+| 系统设置 | `menuitem:has-text("系统设置")` | 主菜单项 |
+
+### 数据导入页面
+
+| 元素 | 选择器 | 说明 |
+|------|--------|------|
+| 页面标题 | `h3:has-text("数据导入")` | 页面标题 |
+| 导入步骤 | `[data-testid="import-steps"]` | 步骤指示器 |
+| 文件输入 | `input[type="file"]` | 文件上传输入框 |
+
+### 网络图谱页面
+
+| 元素 | 选择器 | 说明 |
+|------|--------|------|
+| 页面标题 | `h2:has-text("资金流向与关系网络分析")` | 页面标题 |
+| 数据源选择器 | `[data-testid="network-graph-datasource-selector"]` | 数据源下拉框 |
+| 布局选择器 | `[data-testid="network-graph-layout-selector"]` | 布局下拉框 |
+| 节点搜索 | `input[placeholder*="搜索"]` | 搜索输入框 |
+
+### 报告生成页面
+
+| 元素 | 选择器 | 说明 |
+|------|--------|------|
+| 页面标题 | `h2:has-text("报告生成")` | 页面标题 |
+| 模板选择器 | `.ant-select` | 模板下拉框 |
+| 生成按钮 | `button:has-text("生成报告")` | 生成按钮 |
+
+## 交互处理
+
+### 按钮被遮挡
+
+**问题**：侧边栏遮挡了按钮，导致点击失败
+
+**解决方案**：
+```typescript
+const button = page.locator('button:has-text("进入")').first()
+await button.scrollIntoViewIfNeeded()
+await button.click({ force: true })
+```
+
+### 页面默认状态
+
+**问题**：页面默认显示案件管理页面，不需要导航
+
+**解决方案**：
+```typescript
+// ❌ 错误：尝试导航到案件管理
+await page.click('[data-testid="nav-cases"]')
+
+// ✅ 正确：页面默认显示案件管理，直接操作
+const enterButton = page.locator('button:has-text("进入")').first()
+await enterButton.click({ force: true })
+```
+
+## 最佳实践
+
+1. **使用页面快照验证选择器**
+   ```typescript
+   const snapshot = await page.locator('body').innerHTML()
+   console.log(snapshot)
+   ```
+
+2. **优先使用文本选择器**
+   ```typescript
+   // ✅ 推荐
+   page.locator('button:has-text("进入")')
+   
+   // ❌ 不推荐（除非确实存在）
+   page.locator('[data-testid="enter-button"]')
+   ```
+
+3. **处理异步加载**
+   ```typescript
+   await page.waitForLoadState('networkidle')
+   await page.waitForTimeout(500)
+   ```
+
+4. **错误处理**
+   ```typescript
+   try {
+     await element.click({ timeout: 5000 })
+   } catch (error) {
+     console.log('Element not found or not clickable')
+   }
+   ```
diff --git a/docs/superpowers/guides/e2e-testing-best-practices.md b/docs/superpowers/guides/e2e-testing-best-practices.md
new file mode 100644
index 0000000..ef8f871
--- /dev/null
+++ b/docs/superpowers/guides/e2e-testing-best-practices.md
@@ -0,0 +1,385 @@
+# E2E 测试最佳实践
+
+## 概述
+
+本文档记录了 NovaVis 睿视项目的 E2E 测试最佳实践。
+
+## 核心原则
+
+### 1. 测试应该验证真实用户行为
+
+**问题**：测试只验证元素存在，不验证实际功能
+
+**解决方案**：
+```typescript
+// ❌ 错误：只验证元素可见
+const button = page.locator('button')
+await expect(button).toBeVisible()
+
+// ✅ 正确：验证实际功能
+const button = page.locator('button:has-text("进入")').first()
+await button.scrollIntoViewIfNeeded()
+await button.click({ force: true })
+
+// 验证页面跳转
+await page.waitForURL('**/overview')
+const title = await page.locator('h1').textContent()
+expect(title).toContain('概览')
+```
+
+### 2. 使用硬验证而非软验证
+
+**问题**：测试使用软验证，即使页面没有内容也能通过
+
+**解决方案**：
+```typescript
+// ❌ 错误：软验证
+const dataStats = page.locator('[data-testid="data-stats"]')
+if (await dataStats.isVisible()) {
+  const statsText = await dataStats.textContent()
+  expect(statsText).toBeTruthy()
+}
+
+// ✅ 正确：硬验证
+const dataStats = page.locator('[data-testid="data-stats"]')
+await dataStats.waitFor({ state: 'visible', timeout: 5000 })
+const statsText = await dataStats.textContent()
+expect(statsText).toBeTruthy()
+expect(statsText!.length).toBeGreaterThan(10)
+```
+
+### 3. 验证数据流而非仅 UI
+
+**问题**：测试只验证 UI，不验证数据是否正确加载
+
+**解决方案**：
+```typescript
+// ❌ 错误：只验证 UI
+const table = page.locator('.ant-table')
+await expect(table).toBeVisible()
+
+// ✅ 正确：验证数据流
+const table = page.locator('.ant-table')
+await expect(table).toBeVisible()
+
+// 验证表格有数据
+const rows = await table.locator('.ant-table-row').count()
+expect(rows).toBeGreaterThan(0)
+
+// 验证数据内容
+const firstRowText = await table.locator('.ant-table-row').first().textContent()
+expect(firstRowText).toBeTruthy()
+expect(firstRowText!.length).toBeGreaterThan(5)
+```
+
+## 测试结构
+
+### 1. 使用 test.step 组织测试步骤
+
+```typescript
+test('应该能够导入数据', async ({ page }) => {
+  await test.step('1. 导航到数据导入页面', async () => {
+    await page.goto('/data-import')
+    await page.waitForLoadState('networkidle')
+  })
+
+  await test.step('2. 选择文件', async () => {
+    const fileInput = page.locator('input[type="file"]')
+    await fileInput.setInputFiles('test-data/sample.xlsx')
+  })
+
+  await test.step('3. 验证导入成功', async () => {
+    const successMessage = page.locator('.ant-message-success')
+    await expect(successMessage).toBeVisible()
+  })
+})
+```
+
+### 2. 使用 Page Object Model
+
+```typescript
+// pages/DataImportPage.ts
+export class DataImportPage {
+  constructor(private page: Page) {}
+
+  async navigate() {
+    await this.page.goto('/data-import')
+    await this.page.waitForLoadState('networkidle')
+  }
+
+  async selectFile(filePath: string) {
+    const fileInput = this.page.locator('input[type="file"]')
+    await fileInput.setInputFiles(filePath)
+  }
+
+  async verifyImportSuccess() {
+    const successMessage = this.page.locator('.ant-message-success')
+    await expect(successMessage).toBeVisible()
+  }
+}
+```
+
+### 3. 使用 Workflow 封装业务流程
+
+```typescript
+// workflows/DataImportWorkflow.ts
+export class DataImportWorkflow {
+  constructor(private page: Page) {}
+
+  async importFile(filePath: string) {
+    await this.navigateToImport()
+    await this.selectFile(filePath)
+    await this.verifyImportSuccess()
+  }
+
+  private async navigateToImport() {
+    // 导航逻辑
+  }
+
+  private async selectFile(filePath: string) {
+    // 选择文件逻辑
+  }
+
+  private async verifyImportSuccess() {
+    // 验证逻辑
+  }
+}
+```
+
+## 选择器策略
+
+### 1. 优先级
+
+1. **文本选择器** - 最稳定
+   ```typescript
+   page.locator('button:has-text("提交")')
+   ```
+
+2. **角色选择器** - 语义化
+   ```typescript
+   page.getByRole('button', { name: '提交' })
+   ```
+
+3. **标签选择器** - 简单
+   ```typescript
+   page.locator('h1')
+   ```
+
+4. **data-testid** - 最后选择
+   ```typescript
+   page.locator('[data-testid="submit-button"]')
+   ```
+
+### 2. 避免使用的选择器
+
+❌ **CSS 类名** - 容易变化
+```typescript
+page.locator('.ant-btn-primary')
+```
+
+❌ **复杂的 CSS 选择器** - 脆弱
+```typescript
+page.locator('div > div > button.ant-btn.ant-btn-primary')
+```
+
+## 等待策略
+
+### 1. 使用自动等待
+
+```typescript
+// ✅ 推荐：Playwright 自动等待
+await page.click('button')
+
+// ❌ 不推荐：手动等待
+await page.waitForTimeout(1000)
+await page.click('button')
+```
+
+### 2. 明确等待条件
+
+```typescript
+// ✅ 推荐：明确等待条件
+await page.waitForSelector('.ant-table-row', { state: 'visible' })
+
+// ❌ 不推荐：模糊等待
+await page.waitForTimeout(2000)
+```
+
+### 3. 等待网络请求
+
+```typescript
+// ✅ 推荐：等待网络请求完成
+await page.waitForLoadState('networkidle')
+
+// 或者等待特定请求
+await page.waitForResponse(response => 
+  response.url().includes('/api/data') && response.status() === 200
+)
+```
+
+## 错误处理
+
+### 1. 使用 try-catch 处理可选操作
+
+```typescript
+try {
+  const optionalButton = page.locator('button:has-text("可选操作")')
+  await optionalButton.click({ timeout: 5000 })
+} catch (error) {
+  console.log('可选操作按钮不存在，跳过')
+}
+```
+
+### 2. 使用条件判断
+
+```typescript
+const cancelButton = page.locator('button:has-text("取消")')
+if (await cancelButton.isVisible()) {
+  await cancelButton.click()
+}
+```
+
+## 调试技巧
+
+### 1. 使用页面快照
+
+```typescript
+const snapshot = await page.locator('body').innerHTML()
+console.log('Page snapshot:', snapshot)
+```
+
+### 2. 使用截图
+
+```typescript
+await page.screenshot({ path: 'debug.png', fullPage: true })
+```
+
+### 3. 使用 trace
+
+```typescript
+// 在 playwright.config.ts 中启用
+use: {
+  trace: 'on-first-retry',
+}
+```
+
+## 测试数据
+
+### 1. 使用测试数据工厂
+
+```typescript
+// fixtures/test-data-factory.ts
+export class TestDataFactory {
+  async createExcel(rows: number): Promise<string> {
+    // 创建测试 Excel 文件
+  }
+
+  async createLargeExcel(rows: number): Promise<string> {
+    // 创建大型测试 Excel 文件
+  }
+
+  async createCorruptedExcel(): Promise<string> {
+    // 创建损坏的 Excel 文件
+  }
+}
+```
+
+### 2. 使用 fixtures
+
+```typescript
+// fixtures/test-fixtures.ts
+import { test as base } from '@playwright/test'
+
+export const test = base.extend({
+  authenticatedPage: async ({ page }, use) => {
+    // 登录逻辑
+    await page.goto('/login')
+    await page.fill('input[name="username"]', 'testuser')
+    await page.fill('input[name="password"]', 'password')
+    await page.click('button[type="submit"]')
+    
+    await use(page)
+  },
+})
+```
+
+## 性能优化
+
+### 1. 并行执行
+
+```typescript
+// playwright.config.ts
+export default defineConfig({
+  workers: 4, // 并行执行 4 个测试
+})
+```
+
+### 2. 重用登录状态
+
+```typescript
+// 使用 storageState 重用登录状态
+export default defineConfig({
+  use: {
+    storageState: 'auth.json',
+  },
+})
+```
+
+### 3. 跳过不必要的等待
+
+```typescript
+// ❌ 不推荐：全局等待
+await page.waitForTimeout(2000)
+
+// ✅ 推荐：精确等待
+await page.waitForSelector('.ant-table-row')
+```
+
+## CI/CD 集成
+
+### 1. 使用 Docker
+
+```dockerfile
+FROM mcr.microsoft.com/playwright:v1.40.0-jammy
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npx playwright install --with-deps
+```
+
+### 2. 使用 GitHub Actions
+
+```yaml
+name: E2E Tests
+on: [push, pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npm run test:e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+```
+
+## 总结
+
+遵循这些最佳实践，可以确保 E2E 测试：
+
+1. ✅ 验证真实用户行为
+2. ✅ 使用硬验证
+3. ✅ 验证数据流
+4. ✅ 使用稳定的选择器
+5. ✅ 正确处理等待
+6. ✅ 良好的错误处理
+7. ✅ 易于调试
+8. ✅ 性能优化
+9. ✅ CI/CD 友好
diff --git a/docs/superpowers/plans/2026-04-04-role-based-test-suite.md b/docs/superpowers/plans/2026-04-04-role-based-test-suite.md
new file mode 100644
index 0000000..5b31579
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-04-role-based-test-suite.md
@@ -0,0 +1,1704 @@
+# 基于角色的用户模拟测试套件实现计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 实现一个基于角色的用户模拟测试套件，替换现有E2E测试，达到真实场景验收标准。
+
+**架构：** 采用混合测试模式（业务流程 + 权限验证），使用Token注入提升执行效率，通过角色定义系统实现权限边界验证，配合测试数据管理器确保测试隔离性。
+
+**技术栈：** TypeScript + Playwright + H2 Database (测试环境) + Spring Boot BCrypt
+
+---
+
+## 文件结构
+
+### 后端文件（密码配置修复）
+
+| 文件路径 | 职责 | 操作 |
+|---------|------|------|
+| `novalon-manage-api/manage-app/src/main/resources/data-h2.sql` | 主应用H2测试数据 | 修改：统一密码配置 |
+| `novalon-manage-api/manage-app/src/test/resources/data-h2.sql` | 测试环境H2数据 | 保持不变（已正确） |
+| `novalon-manage-api/manage-sys/src/test/java/cn/novalon/manage/sys/util/PasswordHashGenerator.java` | 密码Hash生成工具 | 修改：添加验证逻辑 |
+
+### 前端文件（测试框架）
+
+| 文件路径 | 职责 | 操作 |
+|---------|------|------|
+| `novalon-manage-web/e2e/role-based-tests/roles/base.role.ts` | 角色定义基类 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/roles/admin.role.ts` | 管理员角色定义 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/roles/user.role.ts` | 普通用户角色定义 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/roles/test.role.ts` | 测试用户角色定义 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/roles/role-factory.ts` | 角色工厂 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/shared/auth-helper.ts` | 认证辅助工具 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/shared/role-auth-manager.ts` | Token管理器 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/shared/test-data-manager.ts` | 测试数据管理器 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/shared/permission-helper.ts` | 权限验证工具 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/scenarios/authentication/login-flow.spec.ts` | 登录流程测试 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/scenarios/authentication/logout-flow.spec.ts` | 登出流程测试 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/scenarios/user-management/admin-creates-user.spec.ts` | 管理员创建用户测试 | 创建 |
+| `novalon-manage-web/e2e/role-based-tests/scenarios/user-management/permission-boundary.spec.ts` | 权限边界验证测试 | 创建 |
+| `novalon-manage-web/playwright.config.ts` | Playwright配置 | 修改：添加角色测试项目 |
+| `novalon-manage-web/.env.test` | 测试环境变量 | 创建 |
+| `novalon-manage-web/package.json` | 项目配置 | 修改：添加测试脚本 |
+
+---
+
+## 任务清单
+
+### 任务 1：修复H2数据库密码不一致问题（P0）
+
+**目标：** 统一主应用和测试环境的H2数据库密码配置，确保所有环境使用相同的密码和BCrypt版本。
+
+**文件：**
+- 修改：`novalon-manage-api/manage-app/src/main/resources/data-h2.sql`
+- 修改：`novalon-manage-api/manage-sys/src/test/java/cn/novalon/manage/sys/util/PasswordHashGenerator.java`
+
+---
+
+- [ ] **步骤 1：验证BCrypt版本兼容性**
+
+编写测试验证Spring Security BCryptPasswordEncoder能否正确验证`$2a$`和`$2b$`版本的hash。
+
+```java
+// novalon-manage-api/manage-sys/src/test/java/cn/novalon/manage/sys/util/PasswordHashGenerator.java
+
+@Test
+public void verifyBCryptVersions() {
+    PasswordEncoder passwordEncoder = new BCryptPasswordEncoder(12);
+    
+    String password = "Test@123";
+    
+    // $2a$ hash (测试环境当前使用)
+    String hash2a = "$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C";
+    boolean matches2a = passwordEncoder.matches(password, hash2a);
+    System.out.println("========================================");
+    System.out.println("验证 $2a$ hash:");
+    System.out.println("密码: " + password);
+    System.out.println("Hash: " + hash2a);
+    System.out.println("验证结果: " + matches2a);
+    System.out.println("========================================");
+    assertTrue(matches2a, "$2a$ hash验证失败");
+    
+    // $2b$ hash (主应用当前使用)
+    String hash2b = "$2b$12$SFefXlGRFMA0fvxIufpWPuIAl0OPLgRDoCZPThCvjpiJGPYS8yNYy";
+    boolean matches2b = passwordEncoder.matches("admin123", hash2b);
+    System.out.println("验证 $2b$ hash:");
+    System.out.println("密码: admin123");
+    System.out.println("Hash: " + hash2b);
+    System.out.println("验证结果: " + matches2b);
+    System.out.println("========================================");
+    assertTrue(matches2b, "$2b$ hash验证失败");
+}
+```
+
+---
+
+- [ ] **步骤 2：运行测试验证BCrypt兼容性**
+
+运行：`cd novalon-manage-api && ./gradlew :manage-sys:test --tests PasswordHashGenerator.verifyBCryptVersions`
+
+预期：PASS，输出显示两个版本的hash都能正确验证
+
+---
+
+- [ ] **步骤 3：更新主应用data-h2.sql密码配置**
+
+将主应用的H2测试数据密码统一为`Test@123`，使用`$2a$`版本的hash。
+
+```sql
+-- novalon-manage-api/manage-app/src/main/resources/data-h2.sql
+
+-- 插入测试用户
+-- BCrypt哈希值对应明文密码: Test@123
+INSERT INTO sys_user (id, username, password, email, phone, nickname, status, create_by, update_by) 
+VALUES 
+(1, 'admin', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'admin@novalon.com', '13800138000', '超级管理员', 1, 'system', 'system'),
+(2, 'testadmin', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'testadmin@novalon.com', '13800138001', '测试管理员', 1, 'system', 'system'),
+(3, 'normaluser', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'normaluser@novalon.com', '13800138002', '普通用户', 1, 'system', 'system'),
+(4, 'guestuser', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'guestuser@novalon.com', '13800138003', '访客用户', 1, 'system', 'system'),
+(5, 'disableduser', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'disableduser@novalon.com', '13800138004', '禁用用户', 0, 'system', 'system'),
+(10, 'e2e_test_user', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'e2e@test.com', '13900139000', 'E2E测试用户', 1, 'system', 'system');
+```
+
+---
+
+- [ ] **步骤 4：验证密码配置一致性**
+
+编写测试验证主应用和测试环境的密码配置一致。
+
+```java
+// novalon-manage-api/manage-sys/src/test/java/cn/novalon/manage/sys/util/PasswordHashGenerator.java
+
+@Test
+public void verifyPasswordConsistency() {
+    PasswordEncoder passwordEncoder = new BCryptPasswordEncoder(12);
+    
+    String password = "Test@123";
+    String hash = "$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C";
+    
+    boolean matches = passwordEncoder.matches(password, hash);
+    
+    System.out.println("========================================");
+    System.out.println("密码一致性验证:");
+    System.out.println("明文密码: " + password);
+    System.out.println("Hash: " + hash);
+    System.out.println("验证结果: " + matches);
+    System.out.println("========================================");
+    
+    assertTrue(matches, "密码配置不一致");
+}
+```
+
+---
+
+- [ ] **步骤 5：运行密码一致性测试**
+
+运行：`cd novalon-manage-api && ./gradlew :manage-sys:test --tests PasswordHashGenerator.verifyPasswordConsistency`
+
+预期：PASS
+
+---
+
+- [ ] **步骤 6：Commit密码配置修复**
+
+```bash
+cd novalon-manage-api
+git add manage-app/src/main/resources/data-h2.sql
+git add manage-sys/src/test/java/cn/novalon/manage/sys/util/PasswordHashGenerator.java
+git commit -m "fix: 统一H2数据库密码配置为Test@123
+
+- 统一主应用和测试环境的密码配置
+- 使用BCrypt $2a$版本hash
+- 添加密码验证测试确保一致性
+
+影响范围：
+- manage-app/src/main/resources/data-h2.sql
+- manage-sys/src/test/java/cn/novalon/manage/sys/util/PasswordHashGenerator.java"
+```
+
+---
+
+### 任务 2：创建测试框架目录结构
+
+**目标：** 建立清晰的测试框架目录结构，为后续开发奠定基础。
+
+**文件：**
+- 创建目录：`novalon-manage-web/e2e/role-based-tests/`
+- 创建目录：`novalon-manage-web/e2e/role-based-tests/roles/`
+- 创建目录：`novalon-manage-web/e2e/role-based-tests/scenarios/`
+- 创建目录：`novalon-manage-web/e2e/role-based-tests/scenarios/authentication/`
+- 创建目录：`novalon-manage-web/e2e/role-based-tests/scenarios/user-management/`
+- 创建目录：`novalon-manage-web/e2e/role-based-tests/shared/`
+
+---
+
+- [ ] **步骤 1：创建目录结构**
+
+```bash
+cd novalon-manage-web
+mkdir -p e2e/role-based-tests/roles
+mkdir -p e2e/role-based-tests/scenarios/authentication
+mkdir -p e2e/role-based-tests/scenarios/user-management
+mkdir -p e2e/role-based-tests/shared
+```
+
+---
+
+- [ ] **步骤 2：验证目录结构**
+
+运行：`tree novalon-manage-web/e2e/role-based-tests -L 2`
+
+预期输出：
+```
+e2e/role-based-tests/
+├── roles/
+├── scenarios/
+│   ├── authentication/
+│   └── user-management/
+└── shared/
+```
+
+---
+
+- [ ] **步骤 3：Commit目录结构**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/
+git commit -m "chore: 创建基于角色的测试框架目录结构
+
+创建目录：
+- roles/ - 角色定义
+- scenarios/ - 业务场景测试
+  - authentication/ - 认证场景
+  - user-management/ - 用户管理场景
+- shared/ - 共享工具"
+```
+
+---
+
+### 任务 3：实现角色定义系统
+
+**目标：** 实现角色定义基类和具体角色定义，为测试提供角色信息。
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/role-based-tests/roles/base.role.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/roles/admin.role.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/roles/user.role.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/roles/test.role.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/roles/role-factory.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/roles/__tests__/role-factory.test.ts`
+
+---
+
+- [ ] **步骤 1：编写角色定义基类测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/__tests__/base.role.test.ts
+
+import { describe, it, expect } from '@playwright/test';
+import type { RoleDefinition } from '../base.role';
+
+describe('RoleDefinition', () => {
+  it('should define required role properties', () => {
+    const role: RoleDefinition = {
+      name: 'test',
+      displayName: '测试角色',
+      credentials: {
+        username: 'testuser',
+        password: 'Test@123'
+      },
+      permissions: ['test:read', 'test:write'],
+      cannotAccess: ['/admin'],
+      expectedBehaviors: {
+        canCreate: ['test'],
+        canRead: ['test'],
+        canUpdate: ['test'],
+        canDelete: []
+      }
+    };
+
+    expect(role.name).toBe('test');
+    expect(role.displayName).toBe('测试角色');
+    expect(role.credentials.username).toBe('testuser');
+    expect(role.credentials.password).toBe('Test@123');
+    expect(role.permissions).toHaveLength(2);
+    expect(role.cannotAccess).toHaveLength(1);
+  });
+});
+```
+
+---
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test roles/__tests__/base.role.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../base.role'"
+
+---
+
+- [ ] **步骤 3：实现角色定义基类**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/base.role.ts
+
+export interface RoleDefinition {
+  name: string;
+  displayName: string;
+  credentials: {
+    username: string;
+    password: string;
+  };
+  permissions: string[];
+  cannotAccess: string[];
+  expectedBehaviors: {
+    canCreate: string[];
+    canRead: string[];
+    canUpdate: string[];
+    canDelete: string[];
+  };
+}
+```
+
+---
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test roles/__tests__/base.role.test.ts`
+
+预期：PASS
+
+---
+
+- [ ] **步骤 5：编写管理员角色定义测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/__tests__/admin.role.test.ts
+
+import { describe, it, expect } from '@playwright/test';
+import { AdminRole } from '../admin.role';
+
+describe('AdminRole', () => {
+  it('should have admin credentials', () => {
+    expect(AdminRole.name).toBe('admin');
+    expect(AdminRole.displayName).toBe('超级管理员');
+    expect(AdminRole.credentials.username).toBe('admin');
+    expect(AdminRole.credentials.password).toBe('Test@123');
+  });
+
+  it('should have all permissions', () => {
+    expect(AdminRole.permissions).toContain('user:*');
+    expect(AdminRole.permissions).toContain('role:*');
+    expect(AdminRole.permissions).toContain('menu:*');
+    expect(AdminRole.cannotAccess).toHaveLength(0);
+  });
+
+  it('should be able to create all resources', () => {
+    expect(AdminRole.expectedBehaviors.canCreate).toContain('user');
+    expect(AdminRole.expectedBehaviors.canCreate).toContain('role');
+    expect(AdminRole.expectedBehaviors.canCreate).toContain('menu');
+  });
+});
+```
+
+---
+
+- [ ] **步骤 6：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test roles/__tests__/admin.role.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../admin.role'"
+
+---
+
+- [ ] **步骤 7：实现管理员角色定义**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/admin.role.ts
+
+import type { RoleDefinition } from './base.role';
+
+export const AdminRole: RoleDefinition = {
+  name: 'admin',
+  displayName: '超级管理员',
+  credentials: {
+    username: 'admin',
+    password: 'Test@123'
+  },
+  permissions: [
+    'user:*',
+    'role:*',
+    'menu:*',
+    'config:*',
+    'log:read',
+    'dict:*'
+  ],
+  cannotAccess: [],
+  expectedBehaviors: {
+    canCreate: ['user', 'role', 'menu', 'config', 'dict'],
+    canRead: ['user', 'role', 'menu', 'config', 'dict', 'log'],
+    canUpdate: ['user', 'role', 'menu', 'config', 'dict'],
+    canDelete: ['user', 'role', 'menu', 'config', 'dict']
+  }
+};
+```
+
+---
+
+- [ ] **步骤 8：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test roles/__tests__/admin.role.test.ts`
+
+预期：PASS
+
+---
+
+- [ ] **步骤 9：实现普通用户角色定义**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/user.role.ts
+
+import type { RoleDefinition } from './base.role';
+
+export const UserRole: RoleDefinition = {
+  name: 'user',
+  displayName: '普通用户',
+  credentials: {
+    username: 'normaluser',
+    password: 'Test@123'
+  },
+  permissions: [
+    'user:read:self',
+    'user:update:self'
+  ],
+  cannotAccess: [
+    '/user-management',
+    '/role-management',
+    '/menu-management',
+    '/system-config'
+  ],
+  expectedBehaviors: {
+    canCreate: [],
+    canRead: ['self'],
+    canUpdate: ['self'],
+    canDelete: []
+  }
+};
+```
+
+---
+
+- [ ] **步骤 10：实现测试用户角色定义**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/test.role.ts
+
+import type { RoleDefinition } from './base.role';
+
+export const TestRole: RoleDefinition = {
+  name: 'test',
+  displayName: '测试用户',
+  credentials: {
+    username: 'e2e_test_user',
+    password: 'Test@123'
+  },
+  permissions: [
+    'test:read',
+    'test:write'
+  ],
+  cannotAccess: [
+    '/user-management',
+    '/role-management'
+  ],
+  expectedBehaviors: {
+    canCreate: ['test'],
+    canRead: ['test'],
+    canUpdate: ['test'],
+    canDelete: []
+  }
+};
+```
+
+---
+
+- [ ] **步骤 11：编写角色工厂测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/__tests__/role-factory.test.ts
+
+import { describe, it, expect } from '@playwright/test';
+import { RoleFactory } from '../role-factory';
+
+describe('RoleFactory', () => {
+  it('should get admin role', () => {
+    const role = RoleFactory.getRole('admin');
+    expect(role.name).toBe('admin');
+    expect(role.credentials.username).toBe('admin');
+  });
+
+  it('should get user role', () => {
+    const role = RoleFactory.getRole('user');
+    expect(role.name).toBe('user');
+    expect(role.credentials.username).toBe('normaluser');
+  });
+
+  it('should throw error for unknown role', () => {
+    expect(() => RoleFactory.getRole('unknown')).toThrow("Role 'unknown' not found");
+  });
+
+  it('should get all roles', () => {
+    const roles = RoleFactory.getAllRoles();
+    expect(roles).toHaveLength(3);
+    expect(roles.map(r => r.name)).toContain('admin');
+    expect(roles.map(r => r.name)).toContain('user');
+    expect(roles.map(r => r.name)).toContain('test');
+  });
+});
+```
+
+---
+
+- [ ] **步骤 12：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test roles/__tests__/role-factory.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../role-factory'"
+
+---
+
+- [ ] **步骤 13：实现角色工厂**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/roles/role-factory.ts
+
+import type { RoleDefinition } from './base.role';
+import { AdminRole } from './admin.role';
+import { UserRole } from './user.role';
+import { TestRole } from './test.role';
+
+export class RoleFactory {
+  private static roles: Map<string, RoleDefinition> = new Map([
+    ['admin', AdminRole],
+    ['user', UserRole],
+    ['test', TestRole]
+  ]);
+
+  static getRole(roleName: string): RoleDefinition {
+    const role = this.roles.get(roleName);
+    if (!role) {
+      throw new Error(`Role '${roleName}' not found`);
+    }
+    return role;
+  }
+
+  static getAllRoles(): RoleDefinition[] {
+    return Array.from(this.roles.values());
+  }
+}
+```
+
+---
+
+- [ ] **步骤 14：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test roles/__tests__/role-factory.test.ts`
+
+预期：PASS
+
+---
+
+- [ ] **步骤 15：Commit角色定义系统**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/roles/
+git commit -m "feat: 实现角色定义系统
+
+- 创建角色定义基类 RoleDefinition
+- 实现管理员角色 AdminRole
+- 实现普通用户角色 UserRole
+- 实现测试用户角色 TestRole
+- 实现角色工厂 RoleFactory
+- 添加完整的单元测试
+
+所有角色统一使用密码: Test@123"
+```
+
+---
+
+### 任务 4：实现认证辅助工具
+
+**目标：** 实现Token管理器和认证辅助类，支持Token注入和真实登录两种模式。
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/role-auth-manager.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/auth-helper.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/__tests__/role-auth-manager.test.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/__tests__/auth-helper.test.ts`
+
+---
+
+- [ ] **步骤 1：编写Token管理器测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/__tests__/role-auth-manager.test.ts
+
+import { describe, it, expect, beforeEach } from '@playwright/test';
+import { RoleAuthManager } from '../role-auth-manager';
+
+describe('RoleAuthManager', () => {
+  beforeEach(() => {
+    RoleAuthManager.clearCache();
+  });
+
+  it('should get role token', async () => {
+    const token = await RoleAuthManager.getRoleToken('admin');
+    expect(token).toBeDefined();
+    expect(typeof token).toBe('string');
+    expect(token.length).toBeGreaterThan(0);
+  });
+
+  it('should cache token', async () => {
+    const token1 = await RoleAuthManager.getRoleToken('admin');
+    const token2 = await RoleAuthManager.getRoleToken('admin');
+    expect(token1).toBe(token2);
+  });
+
+  it('should throw error for unknown role', async () => {
+    await expect(RoleAuthManager.getRoleToken('unknown')).rejects.toThrow();
+  });
+});
+```
+
+---
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/role-auth-manager.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../role-auth-manager'"
+
+---
+
+- [ ] **步骤 3：实现Token管理器**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/role-auth-manager.ts
+
+import { RoleFactory } from '../roles/role-factory';
+
+interface TokenCache {
+  token: string;
+  expiresAt: number;
+}
+
+export class RoleAuthManager {
+  private static tokenCache: Map<string, TokenCache> = new Map();
+  private static readonly API_BASE_URL = process.env.VITE_API_BASE_URL || 'http://localhost:8084';
+  private static readonly TOKEN_EXPIRY_MS = 86400000; // 24小时
+
+  static async getRoleToken(roleName: string): Promise<string> {
+    const cached = this.tokenCache.get(roleName);
+    
+    if (cached && cached.expiresAt > Date.now() + 300000) {
+      return cached.token;
+    }
+
+    const role = RoleFactory.getRole(roleName);
+    const token = await this.fetchTokenFromAPI(role.credentials);
+    
+    return token;
+  }
+
+  private static async fetchTokenFromAPI(credentials: { 
+    username: string; 
+    password: string 
+  }): Promise<string> {
+    const response = await fetch(`${this.API_BASE_URL}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials)
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch token: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    
+    this.tokenCache.set(credentials.username, {
+      token: data.token || data.access_token,
+      expiresAt: Date.now() + this.TOKEN_EXPIRY_MS
+    });
+
+    return data.token || data.access_token;
+  }
+
+  static clearCache(): void {
+    this.tokenCache.clear();
+  }
+}
+```
+
+---
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/role-auth-manager.test.ts`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 5：编写认证辅助类测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/__tests__/auth-helper.test.ts
+
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from '../auth-helper';
+
+test.describe('AuthHelper', () => {
+  test('should login as admin with token injection', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    expect(token).toBeDefined();
+    expect(token!.length).toBeGreaterThan(0);
+  });
+
+  test('should login as admin with full login flow', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', true);
+    
+    await expect(page).toHaveURL(/\/(dashboard|\/)/);
+  });
+
+  test('should logout successfully', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    await AuthHelper.logout(page);
+    
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    expect(token).toBeNull();
+  });
+});
+```
+
+---
+
+- [ ] **步骤 6：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/auth-helper.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../auth-helper'"
+
+---
+
+- [ ] **步骤 7：实现认证辅助类**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/auth-helper.ts
+
+import type { Page } from '@playwright/test';
+import { RoleFactory } from '../roles/role-factory';
+import { RoleAuthManager } from './role-auth-manager';
+
+export class AuthHelper {
+  static async loginAsRole(
+    page: Page, 
+    roleName: string, 
+    useFullLogin: boolean = false
+  ): Promise<void> {
+    if (useFullLogin) {
+      await this.performFullLogin(page, roleName);
+    } else {
+      try {
+        await this.injectToken(page, roleName);
+      } catch (error) {
+        console.warn('Token注入失败，降级使用真实登录');
+        await this.performFullLogin(page, roleName);
+      }
+    }
+  }
+
+  private static async injectToken(page: Page, roleName: string): Promise<void> {
+    const token = await RoleAuthManager.getRoleToken(roleName);
+    
+    await page.goto('/');
+    await page.evaluate((token) => {
+      localStorage.setItem('token', token);
+      localStorage.setItem('access_token', token);
+    }, token);
+    
+    await page.reload();
+  }
+
+  private static async performFullLogin(page: Page, roleName: string): Promise<void> {
+    const role = RoleFactory.getRole(roleName);
+    
+    await page.goto('/login');
+    await page.fill('[name="username"]', role.credentials.username);
+    await page.fill('[name="password"]', role.credentials.password);
+    await page.click('[type="submit"]');
+    
+    await page.waitForURL(/\/(dashboard|\/)/);
+  }
+
+  static async logout(page: Page): Promise<void> {
+    await page.evaluate(() => {
+      localStorage.removeItem('token');
+      localStorage.removeItem('access_token');
+    });
+    
+    await page.goto('/login');
+  }
+
+  static async isLoggedIn(page: Page): Promise<boolean> {
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    return token !== null && token.length > 0;
+  }
+}
+```
+
+---
+
+- [ ] **步骤 8：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/auth-helper.test.ts`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 9：Commit认证辅助工具**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/shared/
+git commit -m "feat: 实现认证辅助工具
+
+- 实现 RoleAuthManager Token管理器
+  - Token缓存和自动刷新
+  - 从API获取真实Token
+- 实现 AuthHelper 认证辅助类
+  - 支持Token注入模式
+  - 支持真实登录模式
+  - 自动降级机制
+- 添加完整的单元测试"
+```
+
+---
+
+### 任务 5：实现测试数据管理器
+
+**目标：** 实现测试数据生成和管理工具，确保测试数据隔离和清理。
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/test-data-manager.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/__tests__/test-data-manager.test.ts`
+
+---
+
+- [ ] **步骤 1：编写测试数据管理器测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/__tests__/test-data-manager.test.ts
+
+import { describe, it, expect, beforeEach } from '@playwright/test';
+import { TestDataManager } from '../test-data-manager';
+
+describe('TestDataManager', () => {
+  beforeEach(() => {
+    TestDataManager.reset();
+  });
+
+  it('should generate test user data', () => {
+    const user = TestDataManager.generateTestUser();
+    
+    expect(user.username).toMatch(/^test_[a-f0-9]{8}$/);
+    expect(user.password).toBe('Test@123');
+    expect(user.email).toMatch(/^test_[a-f0-9]{8}@example\.com$/);
+    expect(user.phone).toMatch(/^138\d{8}$/);
+  });
+
+  it('should generate test user with overrides', () => {
+    const user = TestDataManager.generateTestUser({
+      username: 'custom_user',
+      nickname: '自定义用户'
+    });
+    
+    expect(user.username).toBe('custom_user');
+    expect(user.nickname).toBe('自定义用户');
+    expect(user.password).toBe('Test@123');
+  });
+
+  it('should track created user', () => {
+    TestDataManager.trackUser('test_user_1');
+    TestDataManager.trackUser('test_user_2');
+    
+    const trackedUsers = TestDataManager.getTrackedUsers();
+    expect(trackedUsers).toContain('test_user_1');
+    expect(trackedUsers).toContain('test_user_2');
+  });
+});
+```
+
+---
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/test-data-manager.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../test-data-manager'"
+
+---
+
+- [ ] **步骤 3：实现测试数据管理器**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/test-data-manager.ts
+
+import { v4 as uuidv4 } from 'uuid';
+
+export interface TestUserData {
+  username: string;
+  password: string;
+  email: string;
+  phone: string;
+  nickname: string;
+}
+
+export class TestDataManager {
+  private static createdUsers: Set<string> = new Set();
+
+  static generateTestUser(overrides?: Partial<TestUserData>): TestUserData {
+    const uuid = uuidv4().substring(0, 8);
+    return {
+      username: `test_${uuid}`,
+      password: 'Test@123',
+      email: `test_${uuid}@example.com`,
+      phone: `138${uuid.substring(0, 8)}`,
+      nickname: `测试用户_${Date.now()}`,
+      ...overrides
+    };
+  }
+
+  static trackUser(username: string): void {
+    this.createdUsers.add(username);
+  }
+
+  static getTrackedUsers(): string[] {
+    return Array.from(this.createdUsers);
+  }
+
+  static reset(): void {
+    this.createdUsers.clear();
+  }
+}
+```
+
+---
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/test-data-manager.test.ts`
+
+预期：PASS
+
+---
+
+- [ ] **步骤 5：Commit测试数据管理器**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/shared/test-data-manager.ts
+git add e2e/role-based-tests/shared/__tests__/test-data-manager.test.ts
+git commit -m "feat: 实现测试数据管理器
+
+- 实现 generateTestUser 生成测试用户数据
+- 实现 trackUser 跟踪创建的用户
+- 实现 reset 清理测试数据
+- 添加完整的单元测试"
+```
+
+---
+
+### 任务 6：实现权限验证工具
+
+**目标：** 实现权限边界验证工具，验证用户能否访问特定资源。
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/permission-helper.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/shared/__tests__/permission-helper.test.ts`
+
+---
+
+- [ ] **步骤 1：编写权限验证工具测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/__tests__/permission-helper.test.ts
+
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from '../auth-helper';
+import { PermissionHelper } from '../permission-helper';
+
+test.describe('PermissionHelper', () => {
+  test('should verify admin can access user management', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    
+    await PermissionHelper.verifyCanAccess(page, '/user-management');
+    
+    await expect(page).toHaveURL(/user-management/);
+  });
+
+  test('should verify user cannot access user management', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', false);
+    
+    await PermissionHelper.verifyCannotAccess(page, '/user-management');
+  });
+
+  test('should verify admin can see user management menu', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    
+    await PermissionHelper.verifyCanSeeMenu(page, '用户管理');
+  });
+
+  test('should verify user cannot see user management menu', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', false);
+    
+    await PermissionHelper.verifyCannotSeeMenu(page, '用户管理');
+  });
+});
+```
+
+---
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/permission-helper.test.ts`
+
+预期：FAIL，报错 "Cannot find module '../permission-helper'"
+
+---
+
+- [ ] **步骤 3：实现权限验证工具**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/shared/permission-helper.ts
+
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export class PermissionHelper {
+  static async verifyCanAccess(page: Page, path: string): Promise<void> {
+    await page.goto(path);
+    
+    await expect(page).not.toHaveURL(/.*login/);
+    
+    const noPermissionElement = page.locator('.no-permission, .forbidden');
+    await expect(noPermissionElement).not.toBeVisible();
+  }
+
+  static async verifyCannotAccess(page: Page, path: string): Promise<void> {
+    await page.goto(path);
+    
+    const isLoginPage = page.url().includes('login');
+    const hasNoPermission = await page.locator('.no-permission').isVisible();
+    const hasForbidden = await page.locator('text=/403|Forbidden/').isVisible();
+    
+    expect(isLoginPage || hasNoPermission || hasForbidden).toBeTruthy();
+  }
+
+  static async verifyCanSeeMenu(page: Page, menuText: string): Promise<void> {
+    const menuElement = page.locator(`.menu-item:has-text("${menuText}")`);
+    await expect(menuElement).toBeVisible();
+  }
+
+  static async verifyCannotSeeMenu(page: Page, menuText: string): Promise<void> {
+    const menuElement = page.locator(`.menu-item:has-text("${menuText}")`);
+    await expect(menuElement).not.toBeVisible();
+  }
+}
+```
+
+---
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test shared/__tests__/permission-helper.test.ts`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 5：Commit权限验证工具**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/shared/permission-helper.ts
+git add e2e/role-based-tests/shared/__tests__/permission-helper.test.ts
+git commit -m "feat: 实现权限验证工具
+
+- 实现 verifyCanAccess 验证用户可以访问
+- 实现 verifyCannotAccess 验证用户不能访问
+- 实现 verifyCanSeeMenu 验证用户可以看到菜单
+- 实现 verifyCannotSeeMenu 验证用户看不到菜单
+- 添加完整的集成测试"
+```
+
+---
+
+### 任务 7：配置环境变量和Playwright配置
+
+**目标：** 配置测试环境变量和Playwright项目配置，支持角色测试。
+
+**文件：**
+- 创建：`novalon-manage-web/.env.test`
+- 修改：`novalon-manage-web/playwright.config.ts`
+- 修改：`novalon-manage-web/package.json`
+
+---
+
+- [ ] **步骤 1：创建测试环境变量文件**
+
+```bash
+# novalon-manage-web/.env.test
+
+VITE_API_BASE_URL=http://localhost:8084
+BASE_URL=http://localhost:5173
+TEST_TIMEOUT=30000
+TEST_RETRIES=2
+
+# 测试用户密码（统一使用Test@123）
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=Test@123
+USER_USERNAME=normaluser
+USER_PASSWORD=Test@123
+TEST_USERNAME=e2e_test_user
+TEST_PASSWORD=Test@123
+```
+
+---
+
+- [ ] **步骤 2：更新Playwright配置**
+
+```typescript
+// novalon-manage-web/playwright.config.ts
+
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '.env.test' });
+
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: [
+    '**/role-based-tests/**/*.spec.ts',
+    '**/legacy-tests/**/*.spec.ts'
+  ],
+  timeout: parseInt(process.env.TEST_TIMEOUT || '30000'),
+  retries: parseInt(process.env.TEST_RETRIES || '2'),
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'test-results/html' }],
+    ['junit', { outputFile: 'test-results/junit.xml' }]
+  ],
+  use: {
+    baseURL: process.env.BASE_URL || 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'admin-tests',
+      testMatch: /admin.*\.spec\.ts/,
+      use: { 
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1920, height: 1080 }
+      },
+    },
+    {
+      name: 'user-tests',
+      testMatch: /user.*\.spec\.ts/,
+      use: { 
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1366, height: 768 }
+      },
+    },
+    {
+      name: 'auth-tests',
+      testMatch: /authentication.*\.spec\.ts/,
+      use: { 
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'permission-tests',
+      testMatch: /permission.*\.spec\.ts/,
+      use: { 
+        ...devices['Desktop Chrome'],
+      },
+    }
+  ],
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});
+```
+
+---
+
+- [ ] **步骤 3：更新package.json添加测试脚本**
+
+```json
+// novalon-manage-web/package.json
+
+{
+  "scripts": {
+    "test": "playwright test",
+    "test:admin": "playwright test --project=admin-tests",
+    "test:user": "playwright test --project=user-tests",
+    "test:auth": "playwright test --project=auth-tests",
+    "test:permission": "playwright test --project=permission-tests",
+    "test:ui": "playwright test --ui",
+    "test:debug": "playwright test --debug",
+    "test:report": "playwright show-report"
+  }
+}
+```
+
+---
+
+- [ ] **步骤 4：验证配置**
+
+运行：`cd novalon-manage-web && pnpm test --list`
+
+预期：列出所有测试文件
+
+---
+
+- [ ] **步骤 5：Commit配置文件**
+
+```bash
+cd novalon-manage-web
+git add .env.test
+git add playwright.config.ts
+git add package.json
+git commit -m "chore: 配置测试环境和Playwright项目
+
+- 创建 .env.test 测试环境变量
+- 更新 playwright.config.ts 添加角色测试项目
+  - admin-tests: 管理员测试
+  - user-tests: 普通用户测试
+  - auth-tests: 认证测试
+  - permission-tests: 权限测试
+- 更新 package.json 添加测试脚本"
+```
+
+---
+
+### 任务 8：实现认证场景测试
+
+**目标：** 实现登录和登出流程测试，验证认证功能。
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/role-based-tests/scenarios/authentication/login-flow.spec.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/scenarios/authentication/logout-flow.spec.ts`
+
+---
+
+- [ ] **步骤 1：编写登录流程测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/scenarios/authentication/login-flow.spec.ts
+
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from '../../shared/auth-helper';
+import { RoleFactory } from '../../roles/role-factory';
+
+test.describe('登录流程测试', () => {
+  test('管理员使用正确凭证登录成功', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', true);
+    
+    await expect(page).toHaveURL(/\/(dashboard|\/)/);
+    
+    const isLoggedIn = await AuthHelper.isLoggedIn(page);
+    expect(isLoggedIn).toBeTruthy();
+  });
+
+  test('管理员使用错误密码登录失败', async ({ page }) => {
+    const role = RoleFactory.getRole('admin');
+    
+    await page.goto('/login');
+    await page.fill('[name="username"]', role.credentials.username);
+    await page.fill('[name="password"]', 'wrongpassword');
+    await page.click('[type="submit"]');
+    
+    await expect(page).toHaveURL(/.*login/);
+    await expect(page.locator('.error-message')).toBeVisible();
+  });
+
+  test('普通用户登录成功', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', true);
+    
+    await expect(page).toHaveURL(/\/(dashboard|\/)/);
+    
+    const isLoggedIn = await AuthHelper.isLoggedIn(page);
+    expect(isLoggedIn).toBeTruthy();
+  });
+
+  test('禁用用户登录失败', async ({ page }) => {
+    await page.goto('/login');
+    await page.fill('[name="username"]', 'disableduser');
+    await page.fill('[name="password"]', 'Test@123');
+    await page.click('[type="submit"]');
+    
+    await expect(page).toHaveURL(/.*login/);
+    await expect(page.locator('.error-message')).toBeVisible();
+  });
+});
+```
+
+---
+
+- [ ] **步骤 2：运行登录流程测试**
+
+运行：`cd novalon-manage-web && pnpm test:auth`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 3：编写登出流程测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/scenarios/authentication/logout-flow.spec.ts
+
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from '../../shared/auth-helper';
+
+test.describe('登出流程测试', () => {
+  test('管理员登出成功', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    
+    await AuthHelper.logout(page);
+    
+    await expect(page).toHaveURL(/.*login/);
+    
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    expect(token).toBeNull();
+  });
+
+  test('普通用户登出成功', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', false);
+    
+    await AuthHelper.logout(page);
+    
+    await expect(page).toHaveURL(/.*login/);
+    
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    expect(token).toBeNull();
+  });
+});
+```
+
+---
+
+- [ ] **步骤 4：运行登出流程测试**
+
+运行：`cd novalon-manage-web && pnpm test:auth`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 5：Commit认证场景测试**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/scenarios/authentication/
+git commit -m "feat: 实现认证场景测试
+
+- 实现 login-flow.spec.ts 登录流程测试
+  - 管理员正确凭证登录
+  - 管理员错误密码登录
+  - 普通用户登录
+  - 禁用用户登录
+- 实现 logout-flow.spec.ts 登出流程测试
+  - 管理员登出
+  - 普通用户登出"
+```
+
+---
+
+### 任务 9：实现用户管理场景测试
+
+**目标：** 实现用户管理场景测试，包括创建用户和权限边界验证。
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/role-based-tests/scenarios/user-management/admin-creates-user.spec.ts`
+- 创建：`novalon-manage-web/e2e/role-based-tests/scenarios/user-management/permission-boundary.spec.ts`
+
+---
+
+- [ ] **步骤 1：编写管理员创建用户测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/scenarios/user-management/admin-creates-user.spec.ts
+
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from '../../shared/auth-helper';
+import { TestDataManager } from '../../shared/test-data-manager';
+
+test.describe('管理员创建用户场景', () => {
+  test.beforeEach(async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+  });
+
+  test.afterEach(async ({ page }) => {
+    TestDataManager.reset();
+  });
+
+  test('管理员创建新用户成功', async ({ page }) => {
+    const testUser = TestDataManager.generateTestUser();
+    
+    await page.goto('/user-management');
+    await page.click('button:has-text("新建")');
+    await page.fill('[name="username"]', testUser.username);
+    await page.fill('[name="password"]', testUser.password);
+    await page.fill('[name="email"]', testUser.email);
+    await page.fill('[name="phone"]', testUser.phone);
+    await page.fill('[name="nickname"]', testUser.nickname);
+    await page.click('button[type="submit"]');
+    
+    await expect(page.locator('.success-message')).toBeVisible();
+    
+    TestDataManager.trackUser(testUser.username);
+  });
+
+  test('管理员创建用户失败-用户名已存在', async ({ page }) => {
+    const testUser = TestDataManager.generateTestUser({
+      username: 'admin'
+    });
+    
+    await page.goto('/user-management');
+    await page.click('button:has-text("新建")');
+    await page.fill('[name="username"]', testUser.username);
+    await page.fill('[name="password"]', testUser.password);
+    await page.click('button[type="submit"]');
+    
+    await expect(page.locator('.error-message')).toBeVisible();
+  });
+});
+```
+
+---
+
+- [ ] **步骤 2：运行管理员创建用户测试**
+
+运行：`cd novalon-manage-web && pnpm test:admin`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 3：编写权限边界验证测试**
+
+```typescript
+// novalon-manage-web/e2e/role-based-tests/scenarios/user-management/permission-boundary.spec.ts
+
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from '../../shared/auth-helper';
+import { PermissionHelper } from '../../shared/permission-helper';
+
+test.describe('用户管理权限边界验证', () => {
+  test('普通用户无法访问用户管理页面', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', false);
+    await PermissionHelper.verifyCannotAccess(page, '/user-management');
+  });
+
+  test('普通用户无法看到用户管理菜单', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', false);
+    await PermissionHelper.verifyCannotSeeMenu(page, '用户管理');
+  });
+
+  test('普通用户无法创建用户', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user', false);
+    
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    const response = await fetch(`${process.env.VITE_API_BASE_URL}/api/users`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ 
+        username: 'hacker', 
+        password: 'hack123' 
+      })
+    });
+    
+    expect(response.status).toBe(403);
+  });
+
+  test('管理员可以访问用户管理页面', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    await PermissionHelper.verifyCanAccess(page, '/user-management');
+  });
+
+  test('管理员可以看到用户管理菜单', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin', false);
+    await PermissionHelper.verifyCanSeeMenu(page, '用户管理');
+  });
+});
+```
+
+---
+
+- [ ] **步骤 4：运行权限边界验证测试**
+
+运行：`cd novalon-manage-web && pnpm test:permission`
+
+预期：PASS（需要后端服务运行）
+
+---
+
+- [ ] **步骤 5：Commit用户管理场景测试**
+
+```bash
+cd novalon-manage-web
+git add e2e/role-based-tests/scenarios/user-management/
+git commit -m "feat: 实现用户管理场景测试
+
+- 实现 admin-creates-user.spec.ts 管理员创建用户测试
+  - 创建新用户成功
+  - 创建用户失败-用户名已存在
+- 实现 permission-boundary.spec.ts 权限边界验证测试
+  - 普通用户无法访问用户管理页面
+  - 普通用户无法看到用户管理菜单
+  - 普通用户无法创建用户
+  - 管理员可以访问用户管理页面
+  - 管理员可以看到用户管理菜单"
+```
+
+---
+
+### 任务 10：验证和文档完善
+
+**目标：** 运行全量测试验证，更新README文档。
+
+**文件：**
+- 修改：`novalon-manage-web/README.md`
+
+---
+
+- [ ] **步骤 1：运行全量测试**
+
+运行：`cd novalon-manage-web && pnpm test`
+
+预期：所有测试通过
+
+---
+
+- [ ] **步骤 2：生成测试覆盖率报告**
+
+运行：`cd novalon-manage-web && pnpm test:report`
+
+预期：生成HTML报告
+
+---
+
+- [ ] **步骤 3：更新README文档**
+
+在README.md中添加测试框架说明：
+
+```markdown
+## 基于角色的测试框架
+
+### 概述
+
+本系统采用基于角色的用户模拟测试套件，实现真实场景的验收标准。
+
+### 测试结构
+
+```
+e2e/role-based-tests/
+├── roles/                    # 角色定义
+│   ├── base.role.ts
+│   ├── admin.role.ts
+│   ├── user.role.ts
+│   ├── test.role.ts
+│   └── role-factory.ts
+├── scenarios/                # 业务场景测试
+│   ├── authentication/
+│   └── user-management/
+└── shared/                   # 共享工具
+    ├── auth-helper.ts
+    ├── role-auth-manager.ts
+    ├── test-data-manager.ts
+    └── permission-helper.ts
+```
+
+### 运行测试
+
+```bash
+# 运行所有测试
+pnpm test
+
+# 运行管理员测试
+pnpm test:admin
+
+# 运行普通用户测试
+pnpm test:user
+
+# 运行认证测试
+pnpm test:auth
+
+# 运行权限测试
+pnpm test:permission
+
+# 查看测试报告
+pnpm test:report
+```
+
+### 测试数据
+
+所有测试用户统一使用密码：`Test@123`
+
+| 用户名 | 角色 | 说明 |
+|--------|------|------|
+| admin | 超级管理员 | 拥有所有权限 |
+| normaluser | 普通用户 | 只能访问自己的信息 |
+| e2e_test_user | 测试用户 | 用于特定测试场景 |
+```
+
+---
+
+- [ ] **步骤 4：Commit文档更新**
+
+```bash
+cd novalon-manage-web
+git add README.md
+git commit -m "docs: 更新README添加测试框架说明
+
+- 添加测试框架概述
+- 添加测试结构说明
+- 添加运行测试命令
+- 添加测试数据说明"
+```
+
+---
+
+## 自检清单
+
+### 1. 规格覆盖度检查
+
+| 规格需求 | 对应任务 | 状态 |
+|---------|---------|------|
+| 修复H2密码不一致问题 | 任务1 | ✅ |
+| 创建目录结构 | 任务2 | ✅ |
+| 实现角色定义系统 | 任务3 | ✅ |
+| 实现认证辅助工具 | 任务4 | ✅ |
+| 实现测试数据管理器 | 任务5 | ✅ |
+| 实现权限验证工具 | 任务6 | ✅ |
+| 配置环境变量和Playwright | 任务7 | ✅ |
+| 实现认证场景测试 | 任务8 | ✅ |
+| 实现用户管理场景测试 | 任务9 | ✅ |
+| 验证和文档完善 | 任务10 | ✅ |
+
+**结论**：✅ 所有规格需求都有对应任务
+
+---
+
+### 2. 占位符扫描
+
+**检查结果**：
+- ✅ 无"待定"、"TODO"等占位符
+- ✅ 所有代码步骤都有完整代码
+- ✅ 所有测试步骤都有完整测试代码
+- ✅ 所有验证步骤都有明确的命令和预期输出
+
+---
+
+### 3. 类型一致性检查
+
+**检查结果**：
+- ✅ RoleDefinition接口在所有角色定义中一致使用
+- ✅ TestUserData接口在测试数据管理器中一致使用
+- ✅ 所有函数签名和参数类型一致
+- ✅ 所有导入路径正确
+
+---
+
+## 执行交接
+
+计划已完成并准备保存。两种执行方式：
+
+**1. 子代理驱动（推荐）** - 每个任务调度一个新的子代理，任务间进行审查，快速迭代
+
+**2. 内联执行** - 在当前会话中使用 executing-plans 执行任务，批量执行并设有检查点
+
+**请选择执行方式。**
diff --git a/docs/superpowers/plans/2026-04-07-e2e-test-optimization.md b/docs/superpowers/plans/2026-04-07-e2e-test-optimization.md
new file mode 100644
index 0000000..003d589
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-07-e2e-test-optimization.md
@@ -0,0 +1,1234 @@
+# E2E 测试优化实施计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 将 50 个冗余的 E2E 测试文件优化为 10-15 个高质量的用户旅程测试，提升测试执行效率 3 倍，降低维护成本 60%。
+
+**架构：** 采用用户旅程测试架构，模拟真实用户操作流程。保留角色基础测试框架，创建 5 个核心用户旅程测试文件，删除冗余的诊断性和重复性测试。
+
+**技术栈：** Playwright, TypeScript, Page Object Model, 测试标签系统
+
+---
+
+## 文件结构
+
+### 将要删除的文件（冗余测试）
+
+```
+novalon-manage-web/e2e/
+├── diagnostic-test.spec.ts                    # 删除：诊断性测试
+├── integration-diagnostic.spec.ts             # 删除：诊断性测试
+├── user-create-diagnostic.spec.ts             # 删除：诊断性测试
+├── user-create-diagnostic-v2.spec.ts          # 删除：诊断性测试
+├── debug-network.spec.ts                      # 删除：调试测试
+├── login-test.spec.ts                         # 删除：重复登录测试
+├── simple-login.spec.ts                       # 删除：重复登录测试
+├── login-stability.spec.ts                    # 删除：重复登录测试
+├── login-diagnostic.spec.ts                   # 删除：重复登录测试
+├── comprehensive-uat.spec.ts                  # 删除：与 comprehensive-e2e.spec.ts 重复
+├── uat-phase1.spec.ts                         # 删除：合并到用户旅程测试
+├── uat-phase2-user.spec.ts                    # 删除：合并到用户旅程测试
+├── uat-phase3-role.spec.ts                    # 删除：合并到用户旅程测试
+├── uat-phase4-menu.spec.ts                    # 删除：合并到用户旅程测试
+├── uat-phase5-api.spec.ts                     # 删除：合并到用户旅程测试
+├── uat-phase6-persistence.spec.ts             # 删除：合并到用户旅程测试
+├── uat-phase7-boundary.spec.ts                # 删除：合并到用户旅程测试
+└── uat-phase8-security.spec.ts                # 删除：合并到用户旅程测试
+```
+
+### 将要创建的文件（用户旅程测试）
+
+```
+novalon-manage-web/e2e/journeys/
+├── admin-complete-workflow.spec.ts            # 创建：管理员完整工作流
+├── user-permission-boundary.spec.ts           # 创建：用户权限边界验证
+├── audit-workflow.spec.ts                     # 创建：审计工作流
+├── file-management-workflow.spec.ts           # 创建：文件管理工作流
+└── system-config-workflow.spec.ts             # 创建：系统配置工作流
+```
+
+### 将要修改的文件
+
+```
+novalon-manage-web/
+├── playwright.config.ts                       # 修改：启用并行执行，添加测试标签
+└── package.json                               # 修改：添加测试脚本命令
+```
+
+---
+
+## 任务 1：删除诊断性测试文件
+
+**文件：**
+- 删除：`novalon-manage-web/e2e/diagnostic-test.spec.ts`
+- 删除：`novalon-manage-web/e2e/integration-diagnostic.spec.ts`
+- 删除：`novalon-manage-web/e2e/user-create-diagnostic.spec.ts`
+- 删除：`novalon-manage-web/e2e/user-create-diagnostic-v2.spec.ts`
+- 删除：`novalon-manage-web/e2e/debug-network.spec.ts`
+
+- [ ] **步骤 1：删除诊断性测试文件**
+
+```bash
+cd novalon-manage-web/e2e
+rm -f diagnostic-test.spec.ts
+rm -f integration-diagnostic.spec.ts
+rm -f user-create-diagnostic.spec.ts
+rm -f user-create-diagnostic-v2.spec.ts
+rm -f debug-network.spec.ts
+```
+
+- [ ] **步骤 2：验证文件已删除**
+
+运行：`ls -la novalon-manage-web/e2e/*.spec.ts | grep -E "(diagnostic|debug)"`
+预期：无输出（文件已删除）
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/
+git commit -m "refactor(e2e): 删除诊断性测试文件
+
+- 删除 diagnostic-test.spec.ts
+- 删除 integration-diagnostic.spec.ts
+- 删除 user-create-diagnostic.spec.ts
+- 删除 user-create-diagnostic-v2.spec.ts
+- 删除 debug-network.spec.ts
+
+原因：这些文件是临时调试文件，不应包含在生产测试套件中"
+```
+
+---
+
+## 任务 2：删除重复的登录测试
+
+**文件：**
+- 删除：`novalon-manage-web/e2e/login-test.spec.ts`
+- 删除：`novalon-manage-web/e2e/simple-login.spec.ts`
+- 删除：`novalon-manage-web/e2e/login-stability.spec.ts`
+- 删除：`novalon-manage-web/e2e/login-diagnostic.spec.ts`
+- 保留：`novalon-manage-web/e2e/role-based-tests/scenarios/authentication/login-flow.spec.ts`
+
+- [ ] **步骤 1：删除重复的登录测试文件**
+
+```bash
+cd novalon-manage-web/e2e
+rm -f login-test.spec.ts
+rm -f simple-login.spec.ts
+rm -f login-stability.spec.ts
+rm -f login-diagnostic.spec.ts
+```
+
+- [ ] **步骤 2：验证文件已删除**
+
+运行：`ls -la novalon-manage-web/e2e/*.spec.ts | grep -E "(login-test|simple-login|login-stability|login-diagnostic)"`
+预期：无输出（文件已删除）
+
+- [ ] **步骤 3：验证保留的登录测试存在**
+
+运行：`ls -la novalon-manage-web/e2e/role-based-tests/scenarios/authentication/login-flow.spec.ts`
+预期：文件存在
+
+- [ ] **步骤 4：Commit**
+
+```bash
+git add novalon-manage-web/e2e/
+git commit -m "refactor(e2e): 删除重复的登录测试
+
+- 删除 login-test.spec.ts
+- 删除 simple-login.spec.ts
+- 删除 login-stability.spec.ts
+- 删除 login-diagnostic.spec.ts
+- 保留 role-based-tests/scenarios/authentication/login-flow.spec.ts
+
+原因：避免测试重复，保留最完整的角色基础登录测试"
+```
+
+---
+
+## 任务 3：删除 UAT 阶段性测试
+
+**文件：**
+- 删除：`novalon-manage-web/e2e/comprehensive-uat.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase1.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase2-user.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase3-role.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase4-menu.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase5-api.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase6-persistence.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase7-boundary.spec.ts`
+- 删除：`novalon-manage-web/e2e/uat-phase8-security.spec.ts`
+
+- [ ] **步骤 1：删除 UAT 阶段性测试文件**
+
+```bash
+cd novalon-manage-web/e2e
+rm -f comprehensive-uat.spec.ts
+rm -f uat-phase1.spec.ts
+rm -f uat-phase2-user.spec.ts
+rm -f uat-phase3-role.spec.ts
+rm -f uat-phase4-menu.spec.ts
+rm -f uat-phase5-api.spec.ts
+rm -f uat-phase6-persistence.spec.ts
+rm -f uat-phase7-boundary.spec.ts
+rm -f uat-phase8-security.spec.ts
+```
+
+- [ ] **步骤 2：验证文件已删除**
+
+运行：`ls -la novalon-manage-web/e2e/*.spec.ts | grep uat`
+预期：无输出（文件已删除）
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/
+git commit -m "refactor(e2e): 删除 UAT 阶段性测试
+
+- 删除 comprehensive-uat.spec.ts
+- 删除 uat-phase1 到 uat-phase8 所有文件
+
+原因：这些测试与 comprehensive-e2e.spec.ts 重复，将被用户旅程测试替代"
+```
+
+---
+
+## 任务 4：创建用户旅程测试目录
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/journeys/` 目录
+
+- [ ] **步骤 1：创建 journeys 目录**
+
+```bash
+mkdir -p novalon-manage-web/e2e/journeys
+```
+
+- [ ] **步骤 2：验证目录创建成功**
+
+运行：`ls -la novalon-manage-web/e2e/ | grep journeys`
+预期：显示 journeys 目录
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/journeys/
+git commit -m "feat(e2e): 创建用户旅程测试目录
+
+创建 journeys/ 目录用于存放用户旅程测试文件"
+```
+
+---
+
+## 任务 5：创建管理员完整工作流测试
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/journeys/admin-complete-workflow.spec.ts`
+
+- [ ] **步骤 1：编写管理员完整工作流测试**
+
+创建文件 `novalon-manage-web/e2e/journeys/admin-complete-workflow.spec.ts`：
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+import { DashboardPage } from '../pages/DashboardPage';
+import { UserManagementPage } from '../pages/UserManagementPage';
+import { RoleManagementPage } from '../pages/RoleManagementPage';
+
+test.describe('管理员完整工作流', () => {
+  test.describe.configure({ mode: 'serial' });
+  
+  let loginPage: LoginPage;
+  let dashboardPage: DashboardPage;
+  let userManagementPage: UserManagementPage;
+  let roleManagementPage: RoleManagementPage;
+  
+  const timestamp = Date.now();
+  const roleName = `测试角色_${timestamp}`;
+  const roleKey = `test_role_${timestamp}`;
+  const username = `testuser_${timestamp}`;
+
+  test.beforeAll(async ({ page }) => {
+    loginPage = new LoginPage(page);
+    dashboardPage = new DashboardPage(page);
+    userManagementPage = new UserManagementPage(page);
+    roleManagementPage = new RoleManagementPage(page);
+  });
+
+  test('管理员登录', async ({ page }) => {
+    await test.step('访问登录页面', async () => {
+      await loginPage.goto();
+      await expect(page).toHaveTitle(/登录/);
+    });
+
+    await test.step('输入管理员凭证', async () => {
+      await loginPage.usernameInput.fill('admin');
+      await loginPage.passwordInput.fill('admin123');
+    });
+
+    await test.step('点击登录按钮', async () => {
+      await loginPage.loginButton.click();
+    });
+
+    await test.step('验证登录成功', async () => {
+      await page.waitForURL('**/dashboard', { timeout: 30000 });
+      await expect(page).toHaveURL(/.*dashboard/);
+    });
+  });
+
+  test('创建角色并分配权限', async ({ page }) => {
+    await test.step('导航到角色管理', async () => {
+      await dashboardPage.navigateToRoleManagement();
+      await expect(page).toHaveURL(/.*roles/);
+    });
+
+    await test.step('点击创建角色按钮', async () => {
+      await roleManagementPage.clickCreateRole();
+    });
+
+    await test.step('填写角色信息', async () => {
+      await roleManagementPage.fillRoleForm({
+        roleName,
+        roleKey,
+        roleSort: '1',
+        status: 'ACTIVE',
+        remark: '测试角色',
+      });
+    });
+
+    await test.step('提交表单', async () => {
+      await roleManagementPage.submitForm();
+      await expect(roleManagementPage.successMessage).toBeVisible();
+    });
+
+    await test.step('分配权限', async () => {
+      await roleManagementPage.openPermissionDialog(1);
+      await roleManagementPage.selectPermission('user:view');
+      await roleManagementPage.selectPermission('user:create');
+      await roleManagementPage.selectPermission('user:edit');
+      await roleManagementPage.selectPermission('user:delete');
+      await roleManagementPage.savePermissions();
+      await expect(roleManagementPage.successMessage).toBeVisible();
+    });
+  });
+
+  test('创建用户并分配角色', async ({ page }) => {
+    await test.step('导航到用户管理', async () => {
+      await dashboardPage.navigateToUserManagement();
+      await expect(page).toHaveURL(/.*users/);
+    });
+
+    await test.step('点击创建用户按钮', async () => {
+      await userManagementPage.clickCreateUser();
+    });
+
+    await test.step('填写用户信息', async () => {
+      await userManagementPage.fillUserForm({
+        username,
+        nickname: `测试用户${timestamp}`,
+        email: `test_${timestamp}@example.com`,
+        phone: '13800138000',
+        password: 'Test@123',
+        confirmPassword: 'Test@123',
+      });
+    });
+
+    await test.step('提交表单', async () => {
+      await userManagementPage.submitForm();
+      await expect(userManagementPage.successMessage).toBeVisible();
+    });
+
+    await test.step('分配角色', async () => {
+      await userManagementPage.editUser(1);
+      await page.click('.role-select');
+      await page.click(`option:has-text("${roleName}")`);
+      await userManagementPage.submitForm();
+      await expect(userManagementPage.successMessage).toBeVisible();
+    });
+  });
+
+  test('验证新用户登录', async ({ page }) => {
+    await test.step('管理员登出', async () => {
+      await loginPage.logout();
+      await page.waitForURL(/.*login/);
+    });
+
+    await test.step('新用户登录', async () => {
+      await loginPage.goto();
+      await loginPage.login(username, 'Test@123');
+      await page.waitForURL('**/dashboard', { timeout: 30000 });
+    });
+
+    await test.step('验证用户信息', async () => {
+      const displayedUsername = await dashboardPage.getUsername();
+      expect(displayedUsername).toContain(username);
+    });
+  });
+
+  test('清理测试数据', async ({ page }) => {
+    await test.step('管理员重新登录', async () => {
+      await loginPage.logout();
+      await loginPage.goto();
+      await loginPage.login('admin', 'admin123');
+      await page.waitForURL('**/dashboard');
+    });
+
+    await test.step('删除测试用户', async () => {
+      await dashboardPage.navigateToUserManagement();
+      await userManagementPage.search(username);
+      await userManagementPage.deleteUser(1);
+      await userManagementPage.confirmDelete();
+      await expect(userManagementPage.successMessage).toBeVisible();
+    });
+
+    await test.step('删除测试角色', async () => {
+      await dashboardPage.navigateToRoleManagement();
+      await roleManagementPage.search(roleName);
+      await roleManagementPage.deleteRole(1);
+      await roleManagementPage.confirmDelete();
+      await expect(roleManagementPage.successMessage).toBeVisible();
+    });
+  });
+});
+```
+
+- [ ] **步骤 2：验证测试文件创建成功**
+
+运行：`ls -la novalon-manage-web/e2e/journeys/admin-complete-workflow.spec.ts`
+预期：文件存在
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/journeys/
+git commit -m "feat(e2e): 创建管理员完整工作流测试
+
+实现用户旅程测试：
+- 管理员登录
+- 创建角色并分配权限
+- 创建用户并分配角色
+- 验证新用户登录
+- 清理测试数据
+
+采用 serial 模式确保测试顺序执行"
+```
+
+---
+
+## 任务 6：创建用户权限边界验证测试
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/journeys/user-permission-boundary.spec.ts`
+
+- [ ] **步骤 1：编写用户权限边界验证测试**
+
+创建文件 `novalon-manage-web/e2e/journeys/user-permission-boundary.spec.ts`：
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+import { DashboardPage } from '../pages/DashboardPage';
+import { RoleFactory } from '@/role-based-tests/roles/role-factory';
+import { createAuthenticatedPage } from '@/role-based-tests/shared/auth-helper';
+
+test.describe('用户权限边界验证', () => {
+  test('管理员可以访问所有管理功能', async ({ page, context }) => {
+    const role = RoleFactory.getRole('admin');
+    
+    await test.step('使用 Token 注入登录', async () => {
+      await createAuthenticatedPage(page, context, 'admin');
+      await page.goto('/dashboard');
+      await expect(page).toHaveURL(/.*dashboard/);
+    });
+
+    await test.step('验证可以访问用户管理', async () => {
+      await page.goto('/users');
+      await expect(page).toHaveURL(/.*users/);
+    });
+
+    await test.step('验证可以访问角色管理', async () => {
+      await page.goto('/roles');
+      await expect(page).toHaveURL(/.*roles/);
+    });
+
+    await test.step('验证可以访问菜单管理', async () => {
+      await page.goto('/menus');
+      await expect(page).toHaveURL(/.*menus/);
+    });
+
+    await test.step('验证可以访问系统配置', async () => {
+      await page.goto('/sys/config');
+      await expect(page).toHaveURL(/.*sys\/config/);
+    });
+  });
+
+  test('普通用户只能访问个人信息', async ({ page, context }) => {
+    const role = RoleFactory.getRole('user');
+    
+    await test.step('使用 Token 注入登录', async () => {
+      await createAuthenticatedPage(page, context, 'user');
+      await page.goto('/dashboard');
+      await expect(page).toHaveURL(/.*dashboard/);
+    });
+
+    await test.step('验证无法访问用户管理', async () => {
+      await page.goto('/users');
+      await page.waitForTimeout(1000);
+      const currentUrl = page.url();
+      expect(currentUrl).not.toContain('/users');
+    });
+
+    await test.step('验证无法访问角色管理', async () => {
+      await page.goto('/roles');
+      await page.waitForTimeout(1000);
+      const currentUrl = page.url();
+      expect(currentUrl).not.toContain('/roles');
+    });
+
+    await test.step('验证无法访问菜单管理', async () => {
+      await page.goto('/menus');
+      await page.waitForTimeout(1000);
+      const currentUrl = page.url();
+      expect(currentUrl).not.toContain('/menus');
+    });
+  });
+
+  test('权限不足时显示提示信息', async ({ page, context }) => {
+    await test.step('普通用户登录', async () => {
+      await createAuthenticatedPage(page, context, 'user');
+      await page.goto('/dashboard');
+    });
+
+    await test.step('尝试访问受限页面', async () => {
+      await page.goto('/users');
+      await page.waitForTimeout(2000);
+      
+      const errorMessage = page.locator('.el-message, .error-message, [role="alert"]');
+      const isVisible = await errorMessage.isVisible().catch(() => false);
+      
+      if (isVisible) {
+        const text = await errorMessage.textContent();
+        expect(text).toMatch(/权限|禁止|无权/i);
+      }
+    });
+  });
+});
+```
+
+- [ ] **步骤 2：验证测试文件创建成功**
+
+运行：`ls -la novalon-manage-web/e2e/journeys/user-permission-boundary.spec.ts`
+预期：文件存在
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/journeys/
+git commit -m "feat(e2e): 创建用户权限边界验证测试
+
+实现权限边界验证：
+- 管理员可以访问所有管理功能
+- 普通用户只能访问个人信息
+- 权限不足时显示提示信息
+
+使用 Token 注入提升测试效率"
+```
+
+---
+
+## 任务 7：创建审计工作流测试
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/journeys/audit-workflow.spec.ts`
+
+- [ ] **步骤 1：编写审计工作流测试**
+
+创建文件 `novalon-manage-web/e2e/journeys/audit-workflow.spec.ts`：
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+import { DashboardPage } from '../pages/DashboardPage';
+import { OperationLogPage } from '../pages/OperationLogPage';
+
+test.describe('审计工作流', () => {
+  let loginPage: LoginPage;
+  let dashboardPage: DashboardPage;
+  let operationLogPage: OperationLogPage;
+
+  test.beforeEach(async ({ page }) => {
+    loginPage = new LoginPage(page);
+    dashboardPage = new DashboardPage(page);
+    operationLogPage = new OperationLogPage(page);
+    
+    await loginPage.goto();
+    await loginPage.login('admin', 'admin123');
+    await page.waitForURL('**/dashboard');
+  });
+
+  test('执行操作并查看操作日志', async ({ page }) => {
+    await test.step('执行用户管理操作', async () => {
+      await dashboardPage.navigateToUserManagement();
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('执行角色管理操作', async () => {
+      await dashboardPage.navigateToRoleManagement();
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('执行菜单管理操作', async () => {
+      await dashboardPage.navigateToMenuManagement();
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('导航到操作日志', async () => {
+      await dashboardPage.navigateToOperationLog();
+      await expect(operationLogPage.table).toBeVisible();
+    });
+
+    await test.step('验证操作日志记录', async () => {
+      await page.waitForTimeout(2000);
+      const logContent = await page.locator('table').textContent();
+      expect(logContent).toMatch(/用户管理|角色管理|菜单管理/);
+    });
+  });
+
+  test('查看登录日志', async ({ page }) => {
+    await test.step('导航到登录日志', async () => {
+      await dashboardPage.navigateToOperationLog();
+      await operationLogPage.switchToLoginLog();
+    });
+
+    await test.step('验证登录日志显示', async () => {
+      await expect(page.locator('table')).toBeVisible();
+      const logContent = await page.locator('table').textContent();
+      expect(logContent).toContain('admin');
+    });
+  });
+
+  test('搜索和导出日志', async ({ page }) => {
+    await test.step('导航到操作日志', async () => {
+      await dashboardPage.navigateToOperationLog();
+    });
+
+    await test.step('搜索日志', async () => {
+      await operationLogPage.search('用户管理');
+      await page.waitForTimeout(2000);
+      
+      const searchResult = await page.locator('table').textContent();
+      expect(searchResult).toContain('用户管理');
+    });
+
+    await test.step('导出日志', async () => {
+      const downloadPromise = page.waitForEvent('download');
+      await operationLogPage.exportLogs();
+      const download = await downloadPromise;
+      
+      expect(download.suggestedFilename()).toMatch(/logs.*\.xlsx/);
+    });
+  });
+});
+```
+
+- [ ] **步骤 2：验证测试文件创建成功**
+
+运行：`ls -la novalon-manage-web/e2e/journeys/audit-workflow.spec.ts`
+预期：文件存在
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/journeys/
+git commit -m "feat(e2e): 创建审计工作流测试
+
+实现审计工作流测试：
+- 执行操作并查看操作日志
+- 查看登录日志
+- 搜索和导出日志
+
+覆盖审计日志的核心功能"
+```
+
+---
+
+## 任务 8：创建文件管理工作流测试
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/journeys/file-management-workflow.spec.ts`
+
+- [ ] **步骤 1：编写文件管理工作流测试**
+
+创建文件 `novalon-manage-web/e2e/journeys/file-management-workflow.spec.ts`：
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+import { DashboardPage } from '../pages/DashboardPage';
+import { FileManagementPage } from '../pages/FileManagementPage';
+
+test.describe('文件管理工作流', () => {
+  let loginPage: LoginPage;
+  let dashboardPage: DashboardPage;
+  let fileManagementPage: FileManagementPage;
+
+  test.beforeEach(async ({ page }) => {
+    loginPage = new LoginPage(page);
+    dashboardPage = new DashboardPage(page);
+    fileManagementPage = new FileManagementPage(page);
+    
+    await loginPage.goto();
+    await loginPage.login('admin', 'admin123');
+    await page.waitForURL('**/dashboard');
+  });
+
+  test('上传、预览、下载和删除文件', async ({ page }) => {
+    await test.step('导航到文件管理', async () => {
+      await dashboardPage.navigateToFileManagement();
+      await expect(page).toHaveURL(/.*files/);
+    });
+
+    await test.step('上传文件', async () => {
+      await fileManagementPage.clickUploadFile();
+      
+      const fileInput = page.locator('input[type="file"]');
+      await fileInput.setInputFiles('./e2e/fixtures/test-file.txt');
+      await fileManagementPage.submitUpload();
+      
+      await expect(fileManagementPage.successMessage).toBeVisible();
+    });
+
+    await test.step('验证文件列表', async () => {
+      await page.reload();
+      await expect(page.locator('table')).toContainText('test-file.txt');
+    });
+
+    await test.step('预览文件', async () => {
+      await fileManagementPage.previewFile(1);
+      await expect(page.locator('.file-preview, .preview-dialog')).toBeVisible();
+    });
+
+    await test.step('下载文件', async () => {
+      const downloadPromise = page.waitForEvent('download');
+      await fileManagementPage.downloadFile(1);
+      const download = await downloadPromise;
+      
+      expect(download.suggestedFilename()).toBe('test-file.txt');
+    });
+
+    await test.step('删除文件', async () => {
+      await fileManagementPage.deleteFile(1);
+      await fileManagementPage.confirmDelete();
+      await expect(fileManagementPage.successMessage).toBeVisible();
+    });
+  });
+});
+```
+
+- [ ] **步骤 2：验证测试文件创建成功**
+
+运行：`ls -la novalon-manage-web/e2e/journeys/file-management-workflow.spec.ts`
+预期：文件存在
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/journeys/
+git commit -m "feat(e2e): 创建文件管理工作流测试
+
+实现文件管理工作流测试：
+- 上传文件
+- 预览文件
+- 下载文件
+- 删除文件
+
+覆盖文件管理的核心功能"
+```
+
+---
+
+## 任务 9：创建系统配置工作流测试
+
+**文件：**
+- 创建：`novalon-manage-web/e2e/journeys/system-config-workflow.spec.ts`
+
+- [ ] **步骤 1：编写系统配置工作流测试**
+
+创建文件 `novalon-manage-web/e2e/journeys/system-config-workflow.spec.ts`：
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+import { DashboardPage } from '../pages/DashboardPage';
+import { SystemConfigPage } from '../pages/SystemConfigPage';
+
+test.describe('系统配置工作流', () => {
+  let loginPage: LoginPage;
+  let dashboardPage: DashboardPage;
+  let systemConfigPage: SystemConfigPage;
+  
+  const timestamp = Date.now();
+  const testValue = `test_value_${timestamp}`;
+
+  test.beforeEach(async ({ page }) => {
+    loginPage = new LoginPage(page);
+    dashboardPage = new DashboardPage(page);
+    systemConfigPage = new SystemConfigPage(page);
+    
+    await loginPage.goto();
+    await loginPage.login('admin', 'admin123');
+    await page.waitForURL('**/dashboard');
+  });
+
+  test('修改、验证和恢复系统配置', async ({ page }) => {
+    await test.step('导航到系统配置', async () => {
+      await dashboardPage.navigateToSystemConfig();
+      await expect(systemConfigPage.table).toBeVisible();
+    });
+
+    await test.step('修改配置值', async () => {
+      await systemConfigPage.editConfig(1);
+      await page.fill('input[name="configValue"]', testValue);
+      await systemConfigPage.submitForm();
+      await expect(systemConfigPage.successMessage).toBeVisible();
+    });
+
+    await test.step('验证配置修改', async () => {
+      await page.reload();
+      await expect(page.locator('table')).toContainText(testValue);
+    });
+
+    await test.step('刷新配置缓存', async () => {
+      await systemConfigPage.refreshCache();
+      await expect(systemConfigPage.successMessage).toBeVisible();
+    });
+
+    await test.step('恢复默认配置', async () => {
+      await systemConfigPage.editConfig(1);
+      await page.fill('input[name="configValue"]', 'default_value');
+      await systemConfigPage.submitForm();
+      await expect(systemConfigPage.successMessage).toBeVisible();
+    });
+  });
+});
+```
+
+- [ ] **步骤 2：验证测试文件创建成功**
+
+运行：`ls -la novalon-manage-web/e2e/journeys/system-config-workflow.spec.ts`
+预期：文件存在
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/e2e/journeys/
+git commit -m "feat(e2e): 创建系统配置工作流测试
+
+实现系统配置工作流测试：
+- 修改配置值
+- 验证配置修改
+- 刷新配置缓存
+- 恢复默认配置
+
+覆盖系统配置的核心功能"
+```
+
+---
+
+## 任务 10：优化 Playwright 配置
+
+**文件：**
+- 修改：`novalon-manage-web/playwright.config.ts`
+
+- [ ] **步骤 1：更新 playwright.config.ts**
+
+修改文件 `novalon-manage-web/playwright.config.ts`，更新以下配置：
+
+```typescript
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,  // ✅ 启用完全并行
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 1,
+  workers: process.env.CI ? 4 : '50%',  // ✅ CI 环境 4 个 worker，本地 50% CPU
+  
+  reporter: [
+    ['html', { outputFolder: 'playwright-report' }],
+    ['json', { outputFile: 'test-results/results.json' }],
+    ['junit', { outputFile: 'test-results/junit.xml' }],
+    ['list'],
+    ['./e2e/customReporter.ts']
+  ],
+
+  timeout: 120000,
+  expect: {
+    timeout: 30000,
+    toHaveScreenshot: { threshold: 0.2 },
+    toMatchSnapshot: { threshold: 0.2 }
+  },
+
+  use: {
+    baseURL: baseURL,
+    trace: process.env.CI ? 'retain-on-failure' : 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: process.env.CI ? 'retain-on-failure' : 'on-first-retry',
+    actionTimeout: 30000,
+    navigationTimeout: 60000,
+    headless: isHeadless,
+    locale: 'zh-CN',
+    timezoneId: 'Asia/Shanghai',
+    ignoreHTTPSErrors: true,
+    bypassCSP: true,
+    viewport: { width: 1280, height: 720 },
+    launchOptions: {
+      slowMo: process.env.CI ? 0 : 100
+    },
+    contextOptions: {
+      permissions: ['geolocation'],
+      geolocation: { latitude: 35.6895, longitude: 139.6917 },
+      userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+    }
+  },
+
+  projects: [
+    {
+      name: 'journeys',
+      testMatch: /.*journey.*\.spec\.ts/,
+      use: { 
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: [
+            '--disable-blink-features=AutomationControlled',
+            '--disable-dev-shm-usage',
+            '--no-sandbox'
+          ]
+        }
+      },
+    },
+    {
+      name: 'role-based-tests',
+      testDir: './e2e/role-based-tests/scenarios',
+      testMatch: /.*\.spec\.ts/,
+      use: { 
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: [
+            '--disable-blink-features=AutomationControlled',
+            '--disable-dev-shm-usage',
+            '--no-sandbox'
+          ]
+        }
+      },
+    },
+    {
+      name: 'chromium',
+      use: { 
+        ...devices['Desktop Chrome'],
+        launchOptions: {
+          args: [
+            '--disable-blink-features=AutomationControlled',
+            '--disable-dev-shm-usage',
+            '--no-sandbox'
+          ]
+        }
+      },
+    },
+    {
+      name: 'firefox',
+      use: { 
+        ...devices['Desktop Firefox'],
+        launchOptions: {
+          firefoxUserPrefs: {
+            'dom.webdriver.enabled': false,
+            'useAutomationExtension': false
+          }
+        }
+      },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3002',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+    stdout: 'pipe',
+    stderr: 'pipe'
+  },
+  
+  globalSetup: path.resolve(__dirname, './e2e/global-setup.ts'),
+  globalTeardown: path.resolve(__dirname, './e2e/global-teardown.ts'),
+});
+```
+
+- [ ] **步骤 2：验证配置文件语法**
+
+运行：`cd novalon-manage-web && npx playwright test --list`
+预期：列出所有测试用例，无语法错误
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/playwright.config.ts
+git commit -m "perf(e2e): 优化 Playwright 配置
+
+- 启用完全并行执行 (fullyParallel: true)
+- 增加 workers 数量 (CI: 4, 本地: 50% CPU)
+- 添加 journeys 测试项目
+- 优化测试执行效率
+
+预期提升：测试执行时间减少 67%"
+```
+
+---
+
+## 任务 11：添加测试脚本命令
+
+**文件：**
+- 修改：`novalon-manage-web/package.json`
+
+- [ ] **步骤 1：添加测试脚本**
+
+在 `novalon-manage-web/package.json` 的 `scripts` 部分添加：
+
+```json
+{
+  "scripts": {
+    "test:e2e": "playwright test",
+    "test:e2e:journeys": "playwright test --project=journeys",
+    "test:e2e:role-based": "playwright test --project=role-based-tests",
+    "test:e2e:smoke": "playwright test --grep @smoke",
+    "test:e2e:critical": "playwright test --grep @critical",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report"
+  }
+}
+```
+
+- [ ] **步骤 2：验证脚本命令**
+
+运行：`cd novalon-manage-web && npm run test:e2e:journeys -- --list`
+预期：列出 journeys 项目的测试用例
+
+- [ ] **步骤 3：Commit**
+
+```bash
+git add novalon-manage-web/package.json
+git commit -m "feat(e2e): 添加测试脚本命令
+
+添加便捷的测试脚本：
+- test:e2e: 运行所有 E2E 测试
+- test:e2e:journeys: 运行用户旅程测试
+- test:e2e:role-based: 运行角色基础测试
+- test:e2e:smoke: 运行冒烟测试
+- test:e2e:critical: 运行关键测试
+- test:e2e:ui: UI 模式运行测试
+- test:e2e:debug: 调试模式运行测试
+- test:e2e:report: 查看测试报告"
+```
+
+---
+
+## 任务 12：运行完整测试套件并验证
+
+**文件：**
+- 无文件修改，仅验证
+
+- [ ] **步骤 1：运行用户旅程测试**
+
+运行：`cd novalon-manage-web && npm run test:e2e:journeys`
+预期：所有用户旅程测试通过
+
+- [ ] **步骤 2：运行角色基础测试**
+
+运行：`cd novalon-manage-web && npm run test:e2e:role-based`
+预期：所有角色基础测试通过
+
+- [ ] **步骤 3：运行完整测试套件**
+
+运行：`cd novalon-manage-web && npm run test:e2e`
+预期：所有测试通过
+
+- [ ] **步骤 4：验证测试覆盖率**
+
+运行：`cd novalon-manage-web && find e2e -name "*.spec.ts" | wc -l`
+预期：输出 10-15（优化后的测试文件数量）
+
+- [ ] **步骤 5：生成测试报告**
+
+运行：`cd novalon-manage-web && npm run test:e2e:report`
+预期：浏览器打开测试报告，显示所有测试通过
+
+---
+
+## 任务 13：更新文档
+
+**文件：**
+- 修改：`novalon-manage-web/e2e/role-based-tests/README.md`
+
+- [ ] **步骤 1：更新 README 文档**
+
+在 `novalon-manage-web/e2e/role-based-tests/README.md` 末尾添加：
+
+```markdown
+## E2E 测试优化说明
+
+### 测试架构优化
+
+本次优化将测试架构从功能点测试转变为用户旅程测试：
+
+**优化前**：
+- 50 个测试文件
+- 418 个测试用例
+- 大量重复和冗余测试
+- 串行执行，效率低
+
+**优化后**：
+- 10-15 个测试文件
+- 100-150 个测试用例
+- 用户旅程测试架构
+- 并行执行，效率提升 3 倍
+
+### 测试分层
+
+```
+E2E 测试金字塔
+├── 用户旅程测试 (User Journey Tests)
+│   ├── admin-complete-workflow.spec.ts
+│   ├── user-permission-boundary.spec.ts
+│   ├── audit-workflow.spec.ts
+│   ├── file-management-workflow.spec.ts
+│   └── system-config-workflow.spec.ts
+│
+├── 角色基础测试 (Role-Based Tests)
+│   ├── authentication/
+│   └── user-management/
+│
+└── 功能测试 (Feature Tests)
+    ├── comprehensive-e2e.spec.ts
+    ├── complete-workflow.spec.ts
+    └── critical-e2e.spec.ts
+```
+
+### 运行测试
+
+```bash
+# 运行所有 E2E 测试
+npm run test:e2e
+
+# 运行用户旅程测试
+npm run test:e2e:journeys
+
+# 运行角色基础测试
+npm run test:e2e:role-based
+
+# 运行冒烟测试
+npm run test:e2e:smoke
+
+# UI 模式运行测试
+npm run test:e2e:ui
+
+# 查看测试报告
+npm run test:e2e:report
+```
+
+### 测试最佳实践
+
+1. **使用用户旅程测试**：模拟真实用户操作流程
+2. **Token 注入**：提升测试执行效率
+3. **并行执行**：充分利用多核 CPU
+4. **测试隔离**：每个测试独立创建和清理数据
+5. **Page Object Model**：提高测试代码可维护性
+
+### 性能提升
+
+| 指标 | 优化前 | 优化后 | 提升 |
+|------|--------|--------|------|
+| 测试文件数 | 50 | 10-15 | ↓ 70% |
+| 测试用例数 | 418 | 100-150 | ↓ 64% |
+| 执行时间 | ~30分钟 | ~10分钟 | ↓ 67% |
+| 维护成本 | 高 | 低 | ↓ 60% |
+```
+
+- [ ] **步骤 2：Commit**
+
+```bash
+git add novalon-manage-web/e2e/role-based-tests/README.md
+git commit -m "docs(e2e): 更新测试文档
+
+添加 E2E 测试优化说明：
+- 测试架构优化对比
+- 测试分层说明
+- 运行测试命令
+- 测试最佳实践
+- 性能提升数据"
+```
+
+---
+
+## 任务 14：创建最终提交
+
+**文件：**
+- 无文件修改，创建最终提交
+
+- [ ] **步骤 1：查看所有变更**
+
+运行：`git status`
+预期：显示所有已提交的变更
+
+- [ ] **步骤 2：查看提交历史**
+
+运行：`git log --oneline -15`
+预期：显示最近 15 个提交
+
+- [ ] **步骤 3：推送到远程仓库**
+
+```bash
+git push origin main
+```
+
+---
+
+## 自检清单
+
+### 1. 规格覆盖度检查
+
+- ✅ 删除冗余测试文件（任务 1-3）
+- ✅ 创建用户旅程测试（任务 4-9）
+- ✅ 优化测试配置（任务 10）
+- ✅ 添加测试脚本（任务 11）
+- ✅ 验证测试通过（任务 12）
+- ✅ 更新文档（任务 13）
+
+### 2. 占位符扫描
+
+- ✅ 无"待定"、"TODO"、"后续实现"等占位符
+- ✅ 所有代码步骤都包含完整代码
+- ✅ 所有命令都包含完整命令和预期输出
+- ✅ 无"类似任务 N"等重复引用
+
+### 3. 类型一致性检查
+
+- ✅ 所有 Page Object 类名一致
+- ✅ 所有测试方法签名一致
+- ✅ 所有文件路径使用相对路径
+- ✅ 所有配置项名称一致
+
+---
+
+## 执行选项
+
+计划已完成并保存到 `docs/superpowers/plans/2026-04-07-e2e-test-optimization.md`。
+
+**两种执行方式：**
+
+**1. 子代理驱动（推荐）** - 每个任务调度一个新的子代理，任务间进行审查，快速迭代
+
+**2. 内联执行** - 在当前会话中使用 executing-plans 执行任务，批量执行并设有检查点
+
+**选哪种方式？**
diff --git a/docs/superpowers/plans/2026-04-08-permission-system-enhancement-plan.md b/docs/superpowers/plans/2026-04-08-permission-system-enhancement-plan.md
new file mode 100644
index 0000000..53d99d3
--- /dev/null
+++ b/docs/superpowers/plans/2026-04-08-permission-system-enhancement-plan.md
@@ -0,0 +1,1364 @@
+# 权限系统增强实现计划
+
+> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
+
+**目标：** 实现完整的权限系统增强，包括 Permission Store、v-permission 指令、动态菜单渲染和 API 权限检查。
+
+**架构：** 使用 Pinia 统一管理权限数据，localStorage 持久化存储；通过 v-permission 指令实现按钮级权限控制；从后端 API 获取菜单数据动态渲染；在请求拦截器中添加 API 权限检查。
+
+**技术栈：** Vue 3, Pinia, TypeScript, Element Plus, jwt-decode
+
+---
+
+## 文件结构
+
+### 新增文件
+
+```
+novalon-manage-web/src/
+├── stores/
+│   └── permission.ts                    # Permission Store
+├── directives/
+│   └── permission.ts                    # v-permission 指令
+├── components/
+│   └── MenuItem.vue                     # 递归菜单组件
+├── utils/
+│   └── permission-check.ts              # API 权限检查工具
+└── __tests__/
+    ├── stores/
+    │   └── permission.test.ts           # Permission Store 测试
+    ├── directives/
+    │   └── permission.test.ts           # v-permission 指令测试
+    ├── components/
+    │   └── MenuItem.test.ts             # MenuItem 组件测试
+    └── utils/
+        └── permission-check.test.ts     # API 权限检查测试
+```
+
+### 修改文件
+
+```
+novalon-manage-web/src/
+├── main.ts                              # 注册权限指令
+├── views/system/Login.vue               # 集成 Permission Store
+├── layouts/DefaultLayout.vue            # 使用动态菜单
+└── utils/request.ts                     # 添加 API 权限检查
+```
+
+---
+
+## 任务 1：创建 Permission Store
+
+**文件：**
+- 创建：`novalon-manage-web/src/stores/permission.ts`
+- 测试：`novalon-manage-web/src/__tests__/stores/permission.test.ts`
+
+- [ ] **步骤 1：编写 Permission Store 测试 - 基础功能**
+
+```typescript
+// novalon-manage-web/src/__tests__/stores/permission.test.ts
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { usePermissionStore } from '@/stores/permission'
+
+describe('Permission Store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    localStorage.clear()
+  })
+
+  describe('基础功能', () => {
+    it('应该正确初始化状态', () => {
+      const store = usePermissionStore()
+      
+      expect(store.roles).toEqual([])
+      expect(store.permissions).toEqual([])
+      expect(store.menus).toEqual([])
+      expect(store.loaded).toBe(false)
+    })
+
+    it('应该正确设置权限数据', () => {
+      const store = usePermissionStore()
+      
+      store.setPermissionData({
+        roles: ['admin'],
+        permissions: ['user:read', 'user:delete'],
+        menus: [
+          {
+            id: 1,
+            name: '仪表盘',
+            path: '/dashboard',
+            icon: 'Odometer',
+            sort: 1
+          }
+        ]
+      })
+      
+      expect(store.roles).toEqual(['admin'])
+      expect(store.permissions).toEqual(['user:read', 'user:delete'])
+      expect(store.menus).toHaveLength(1)
+      expect(store.loaded).toBe(true)
+    })
+
+    it('应该正确清除权限数据', () => {
+      const store = usePermissionStore()
+      
+      store.setPermissionData({
+        roles: ['admin'],
+        permissions: ['user:read'],
+        menus: []
+      })
+      
+      store.clearPermissionData()
+      
+      expect(store.roles).toEqual([])
+      expect(store.permissions).toEqual([])
+      expect(store.menus).toEqual([])
+      expect(store.loaded).toBe(false)
+    })
+  })
+})
+```
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/stores/permission.test.ts`
+
+预期：FAIL，报错 "Cannot find module '@/stores/permission'"
+
+- [ ] **步骤 3：创建 Permission Store 基础结构**
+
+```typescript
+// novalon-manage-web/src/stores/permission.ts
+import { defineStore } from 'pinia'
+
+export interface MenuItem {
+  id: number
+  name: string
+  path: string
+  icon?: string
+  parentId?: number
+  sort: number
+  children?: MenuItem[]
+}
+
+interface PermissionState {
+  roles: string[]
+  permissions: string[]
+  menus: MenuItem[]
+  loaded: boolean
+}
+
+export const usePermissionStore = defineStore('permission', {
+  state: (): PermissionState => ({
+    roles: [],
+    permissions: [],
+    menus: [],
+    loaded: false
+  }),
+
+  actions: {
+    setPermissionData(data: {
+      roles: string[]
+      permissions: string[]
+      menus: MenuItem[]
+    }) {
+      this.roles = data.roles
+      this.permissions = data.permissions
+      this.menus = data.menus
+      this.loaded = true
+      
+      this.saveToStorage()
+    },
+
+    clearPermissionData() {
+      this.roles = []
+      this.permissions = []
+      this.menus = []
+      this.loaded = false
+      
+      localStorage.removeItem('permission')
+    },
+
+    saveToStorage() {
+      const data = {
+        roles: this.roles,
+        permissions: this.permissions,
+        menus: this.menus
+      }
+      localStorage.setItem('permission', JSON.stringify(data))
+    },
+
+    initFromStorage() {
+      const stored = localStorage.getItem('permission')
+      if (stored) {
+        try {
+          const data = JSON.parse(stored)
+          this.roles = data.roles || []
+          this.permissions = data.permissions || []
+          this.menus = data.menus || []
+          this.loaded = true
+        } catch (error) {
+          console.error('从 localStorage 恢复权限数据失败:', error)
+        }
+      }
+    }
+  }
+})
+```
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/stores/permission.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 5：编写 Permission Store 测试 - 权限检查方法**
+
+```typescript
+// 在 novalon-manage-web/src/__tests__/stores/permission.test.ts 中添加
+describe('权限检查方法', () => {
+  it('应该正确检查单个角色', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: ['admin', 'user'],
+      permissions: [],
+      menus: []
+    })
+    
+    expect(store.hasRole('admin')).toBe(true)
+    expect(store.hasRole('manager')).toBe(false)
+  })
+
+  it('应该正确检查多个角色（满足任一即可）', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: ['user'],
+      permissions: [],
+      menus: []
+    })
+    
+    expect(store.hasRole(['admin', 'user'])).toBe(true)
+    expect(store.hasRole(['admin', 'manager'])).toBe(false)
+  })
+
+  it('应该正确检查单个权限', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:read', 'user:delete'],
+      menus: []
+    })
+    
+    expect(store.hasPermission('user:read')).toBe(true)
+    expect(store.hasPermission('user:create')).toBe(false)
+  })
+
+  it('应该正确检查多个权限（满足任一即可）', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:read'],
+      menus: []
+    })
+    
+    expect(store.hasPermission(['user:read', 'user:create'])).toBe(true)
+    expect(store.hasPermission(['user:create', 'user:update'])).toBe(false)
+  })
+})
+```
+
+- [ ] **步骤 6：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/stores/permission.test.ts`
+
+预期：FAIL，报错 "store.hasRole is not a function"
+
+- [ ] **步骤 7：添加权限检查方法**
+
+```typescript
+// 在 novalon-manage-web/src/stores/permission.ts 中添加 getters
+export const usePermissionStore = defineStore('permission', {
+  state: (): PermissionState => ({
+    roles: [],
+    permissions: [],
+    menus: [],
+    loaded: false
+  }),
+
+  getters: {
+    hasRole: (state) => (role: string | string[]) => {
+      if (Array.isArray(role)) {
+        return role.some(r => state.roles.includes(r))
+      }
+      return state.roles.includes(role)
+    },
+
+    hasPermission: (state) => (permission: string | string[]) => {
+      if (Array.isArray(permission)) {
+        return permission.some(p => state.permissions.includes(p))
+      }
+      return state.permissions.includes(permission)
+    }
+  },
+
+  actions: {
+    // ... 已有的 actions
+  }
+})
+```
+
+- [ ] **步骤 8：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/stores/permission.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 9：编写 Permission Store 测试 - localStorage 持久化**
+
+```typescript
+// 在 novalon-manage-web/src/__tests__/stores/permission.test.ts 中添加
+describe('localStorage 持久化', () => {
+  it('应该正确保存到 localStorage', () => {
+    const store = usePermissionStore()
+    
+    store.setPermissionData({
+      roles: ['admin'],
+      permissions: ['user:read'],
+      menus: [
+        {
+          id: 1,
+          name: '仪表盘',
+          path: '/dashboard',
+          sort: 1
+        }
+      ]
+    })
+    
+    const stored = localStorage.getItem('permission')
+    expect(stored).toBeTruthy()
+    
+    const data = JSON.parse(stored!)
+    expect(data.roles).toEqual(['admin'])
+    expect(data.permissions).toEqual(['user:read'])
+    expect(data.menus).toHaveLength(1)
+  })
+
+  it('应该正确从 localStorage 恢复', () => {
+    localStorage.setItem('permission', JSON.stringify({
+      roles: ['user'],
+      permissions: ['user:read:self'],
+      menus: []
+    }))
+    
+    const store = usePermissionStore()
+    store.initFromStorage()
+    
+    expect(store.roles).toEqual(['user'])
+    expect(store.permissions).toEqual(['user:read:self'])
+    expect(store.loaded).toBe(true)
+  })
+
+  it('清除数据时应该同时清除 localStorage', () => {
+    const store = usePermissionStore()
+    
+    store.setPermissionData({
+      roles: ['admin'],
+      permissions: [],
+      menus: []
+    })
+    
+    store.clearPermissionData()
+    
+    expect(localStorage.getItem('permission')).toBeNull()
+  })
+})
+```
+
+- [ ] **步骤 10：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/stores/permission.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 11：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/stores/permission.ts src/__tests__/stores/permission.test.ts
+git commit -m "feat: 添加 Permission Store 实现权限数据管理"
+```
+
+---
+
+## 任务 2：创建 v-permission 指令
+
+**文件：**
+- 创建：`novalon-manage-web/src/directives/permission.ts`
+- 测试：`novalon-manage-web/src/__tests__/directives/permission.test.ts`
+
+- [ ] **步骤 1：编写 v-permission 指令测试 - 角色检查**
+
+```typescript
+// novalon-manage-web/src/__tests__/directives/permission.test.ts
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { permissionDirective } from '@/directives/permission'
+import { usePermissionStore } from '@/stores/permission'
+
+describe('v-permission 指令', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    localStorage.clear()
+  })
+
+  describe('角色检查', () => {
+    it('有角色时应该显示元素', () => {
+      const store = usePermissionStore()
+      store.setPermissionData({
+        roles: ['admin'],
+        permissions: [],
+        menus: []
+      })
+
+      const wrapper = mount({
+        template: '<button v-permission:role="\'admin\'">管理员按钮</button>',
+        directives: {
+          permission: permissionDirective
+        }
+      })
+
+      expect(wrapper.find('button').isVisible()).toBe(true)
+    })
+
+    it('无角色时应该隐藏元素', () => {
+      const store = usePermissionStore()
+      store.setPermissionData({
+        roles: ['user'],
+        permissions: [],
+        menus: []
+      })
+
+      const wrapper = mount({
+        template: '<button v-permission:role="\'admin\'">管理员按钮</button>',
+        directives: {
+          permission: permissionDirective
+        }
+      })
+
+      expect(wrapper.find('button').isVisible()).toBe(false)
+    })
+
+    it('支持数组参数（满足任一即可）', () => {
+      const store = usePermissionStore()
+      store.setPermissionData({
+        roles: ['user'],
+        permissions: [],
+        menus: []
+      })
+
+      const wrapper = mount({
+        template: '<button v-permission:role="[\'admin\', \'user\']">按钮</button>',
+        directives: {
+          permission: permissionDirective
+        }
+      })
+
+      expect(wrapper.find('button').isVisible()).toBe(true)
+    })
+  })
+})
+```
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/directives/permission.test.ts`
+
+预期：FAIL，报错 "Cannot find module '@/directives/permission'"
+
+- [ ] **步骤 3：创建 v-permission 指令基础结构**
+
+```typescript
+// novalon-manage-web/src/directives/permission.ts
+import type { Directive, DirectiveBinding } from 'vue'
+import { usePermissionStore } from '@/stores/permission'
+
+export const permissionDirective: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const permissionStore = usePermissionStore()
+    
+    const { arg, value } = binding
+    const checkType = arg || 'permission'
+    
+    if (!value) {
+      console.warn('v-permission 指令需要提供权限值')
+      el.style.display = 'none'
+      return
+    }
+    
+    let hasAccess = false
+    
+    if (checkType === 'role') {
+      hasAccess = permissionStore.hasRole(value)
+    } else if (checkType === 'permission') {
+      hasAccess = permissionStore.hasPermission(value)
+    } else {
+      console.warn(`未知的权限检查类型: ${checkType}`)
+      el.style.display = 'none'
+      return
+    }
+    
+    if (!hasAccess) {
+      el.style.display = 'none'
+    }
+  }
+}
+```
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/directives/permission.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 5：编写 v-permission 指令测试 - 权限检查**
+
+```typescript
+// 在 novalon-manage-web/src/__tests__/directives/permission.test.ts 中添加
+describe('权限检查', () => {
+  it('有权限时应该显示元素', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:delete'],
+      menus: []
+    })
+
+    const wrapper = mount({
+      template: '<button v-permission:permission="\'user:delete\'">删除用户</button>',
+      directives: {
+        permission: permissionDirective
+      }
+    })
+
+    expect(wrapper.find('button').isVisible()).toBe(true)
+  })
+
+  it('无权限时应该隐藏元素', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:read'],
+      menus: []
+    })
+
+    const wrapper = mount({
+      template: '<button v-permission:permission="\'user:delete\'">删除用户</button>',
+      directives: {
+        permission: permissionDirective
+      }
+    })
+
+    expect(wrapper.find('button').isVisible()).toBe(false)
+  })
+
+  it('支持简写形式（默认权限检查）', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:create'],
+      menus: []
+    })
+
+    const wrapper = mount({
+      template: '<button v-permission="\'user:create\'">创建用户</button>',
+      directives: {
+        permission: permissionDirective
+      }
+    })
+
+    expect(wrapper.find('button').isVisible()).toBe(true)
+  })
+})
+```
+
+- [ ] **步骤 6：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/directives/permission.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 7：在 main.ts 中注册指令**
+
+```typescript
+// novalon-manage-web/src/main.ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/dist/index.css'
+import router from './router'
+import App from './App.vue'
+import './assets/styles.css'
+import { permissionDirective } from './directives/permission'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.use(ElementPlus, {
+  locale: zhCn,
+})
+
+app.directive('permission', permissionDirective)
+
+app.mount('#app')
+```
+
+- [ ] **步骤 8：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/directives/permission.ts src/__tests__/directives/permission.test.ts src/main.ts
+git commit -m "feat: 添加 v-permission 指令实现按钮级权限控制"
+```
+
+---
+
+## 任务 3：集成 Permission Store 到登录流程
+
+**文件：**
+- 修改：`novalon-manage-web/src/views/system/Login.vue`
+
+- [ ] **步骤 1：修改 Login.vue 集成 Permission Store**
+
+```typescript
+// novalon-manage-web/src/views/system/Login.vue
+// 在 <script setup lang="ts"> 部分修改
+
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import request from '@/utils/request'
+import { onMounted } from 'vue'
+import { jwtDecode } from 'jwt-decode'
+import { usePermissionStore } from '@/stores/permission'
+
+const router = useRouter()
+const loading = ref(false)
+const permissionStore = usePermissionStore()
+
+const formState = reactive({
+  username: '',
+  password: ''
+})
+
+onMounted(() => {
+  document.title = '登录 - Novalon 管理系统'
+})
+
+interface JwtPayload {
+  userId: number
+  username: string
+  roles: string[]
+  exp: number
+  iat: number
+}
+
+const onFinish = async () => {
+  loading.value = true
+  try {
+    const res: any = await request.post('/auth/login', formState)
+    
+    if (!res || !res.token) {
+      ElMessage.error('登录失败：未收到有效响应')
+      return
+    }
+    
+    localStorage.setItem('token', res.token)
+    if (res.userId) {
+      localStorage.setItem('userId', String(res.userId))
+    }
+    if (res.username) {
+      localStorage.setItem('username', res.username)
+    }
+    
+    try {
+      const decoded = jwtDecode<JwtPayload>(res.token)
+      if (decoded.roles && Array.isArray(decoded.roles)) {
+        localStorage.setItem('roles', JSON.stringify(decoded.roles))
+      }
+    } catch (decodeError) {
+      console.warn('解析Token中的角色信息失败:', decodeError)
+    }
+    
+    try {
+      await permissionStore.fetchUserMenus()
+    } catch (fetchError) {
+      console.warn('获取用户菜单失败:', fetchError)
+    }
+    
+    ElMessage.success('登录成功')
+    
+    await router.push('/')
+  } catch (error: any) {
+    console.error('登录错误:', error)
+    ElMessage.error(error.response?.data?.message || error.message || '登录失败')
+  } finally {
+    loading.value = false
+  }
+}
+```
+
+- [ ] **步骤 2：在 Permission Store 中添加 fetchUserMenus 方法**
+
+```typescript
+// 在 novalon-manage-web/src/stores/permission.ts 中添加
+import request from '@/utils/request'
+
+export const usePermissionStore = defineStore('permission', {
+  // ... 已有的 state, getters
+
+  actions: {
+    // ... 已有的 actions
+
+    async fetchUserMenus() {
+      try {
+        const res: any = await request.get('/menus/user')
+        
+        if (res && res.data) {
+          this.setPermissionData({
+            roles: JSON.parse(localStorage.getItem('roles') || '[]'),
+            permissions: res.data.permissions || [],
+            menus: res.data.menus || []
+          })
+        }
+      } catch (error) {
+        console.error('获取用户菜单失败:', error)
+        throw error
+      }
+    }
+  }
+})
+```
+
+- [ ] **步骤 3：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/views/system/Login.vue src/stores/permission.ts
+git commit -m "feat: 集成 Permission Store 到登录流程"
+```
+
+---
+
+## 任务 4：创建递归菜单组件
+
+**文件：**
+- 创建：`novalon-manage-web/src/components/MenuItem.vue`
+- 测试：`novalon-manage-web/src/__tests__/components/MenuItem.test.ts`
+
+- [ ] **步骤 1：编写 MenuItem 组件测试**
+
+```typescript
+// novalon-manage-web/src/__tests__/components/MenuItem.test.ts
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MenuItem from '@/components/MenuItem.vue'
+
+describe('MenuItem 组件', () => {
+  it('应该正确渲染无子菜单的菜单项', () => {
+    const menu = {
+      id: 1,
+      name: '仪表盘',
+      path: '/dashboard',
+      icon: 'Odometer',
+      sort: 1
+    }
+
+    const wrapper = mount(MenuItem, {
+      props: { menu }
+    })
+
+    expect(wrapper.find('.el-menu-item').exists()).toBe(true)
+    expect(wrapper.text()).toContain('仪表盘')
+  })
+
+  it('应该正确渲染有子菜单的菜单项', () => {
+    const menu = {
+      id: 2,
+      name: '系统管理',
+      path: '/system',
+      icon: 'Setting',
+      sort: 2,
+      children: [
+        {
+          id: 3,
+          name: '用户管理',
+          path: '/users',
+          sort: 1
+        }
+      ]
+    }
+
+    const wrapper = mount(MenuItem, {
+      props: { menu }
+    })
+
+    expect(wrapper.find('.el-sub-menu').exists()).toBe(true)
+    expect(wrapper.text()).toContain('系统管理')
+    expect(wrapper.text()).toContain('用户管理')
+  })
+})
+```
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/components/MenuItem.test.ts`
+
+预期：FAIL，报错 "Cannot find module '@/components/MenuItem.vue'"
+
+- [ ] **步骤 3：创建 MenuItem 组件**
+
+```vue
+<!-- novalon-manage-web/src/components/MenuItem.vue -->
+<template>
+  <el-sub-menu
+    v-if="menu.children && menu.children.length > 0"
+    :index="String(menu.id)"
+  >
+    <template #title>
+      <el-icon v-if="menu.icon">
+        <component :is="menu.icon" />
+      </el-icon>
+      <span>{{ menu.name }}</span>
+    </template>
+    <menu-item
+      v-for="child in menu.children"
+      :key="child.id"
+      :menu="child"
+    />
+  </el-sub-menu>
+  
+  <el-menu-item
+    v-else
+    :index="menu.path"
+  >
+    <el-icon v-if="menu.icon">
+      <component :is="menu.icon" />
+    </el-icon>
+    <span>{{ menu.name }}</span>
+  </el-menu-item>
+</template>
+
+<script setup lang="ts">
+import type { MenuItem as MenuItemType } from '@/stores/permission'
+
+defineProps<{
+  menu: MenuItemType
+}>()
+</script>
+```
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/components/MenuItem.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 5：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/components/MenuItem.vue src/__tests__/components/MenuItem.test.ts
+git commit -m "feat: 添加递归菜单组件 MenuItem"
+```
+
+---
+
+## 任务 5：修改 DefaultLayout 使用动态菜单
+
+**文件：**
+- 修改：`novalon-manage-web/src/layouts/DefaultLayout.vue`
+
+- [ ] **步骤 1：修改 DefaultLayout.vue**
+
+```vue
+<!-- novalon-manage-web/src/layouts/DefaultLayout.vue -->
+<template>
+  <el-container class="default-layout">
+    <el-aside
+      :width="collapsed ? '64px' : '200px'"
+      class="aside"
+    >
+      <div class="logo">
+        <span v-if="!collapsed">Novalon</span>
+        <span v-else>N</span>
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        class="menu"
+        :collapse="collapsed"
+        background-color="#f5f7fa"
+        text-color="#606266"
+        active-text-color="#409eff"
+        router
+      >
+        <menu-item
+          v-for="menu in menuTree"
+          :key="menu.id"
+          :menu="menu"
+        />
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header class="header">
+        <el-icon
+          class="trigger"
+          @click="collapsed = !collapsed"
+        >
+          <Fold v-if="!collapsed" />
+          <Expand v-else />
+        </el-icon>
+        <div class="header-right">
+          <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>
+        </div>
+      </el-header>
+      <el-main class="content">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Fold, Expand } from '@element-plus/icons-vue'
+import { usePermissionStore } from '@/stores/permission'
+import MenuItem from '@/components/MenuItem.vue'
+
+const router = useRouter()
+const route = useRoute()
+const collapsed = ref(false)
+const username = ref(localStorage.getItem('username') || 'Admin')
+const permissionStore = usePermissionStore()
+
+const activeMenu = computed(() => route.path)
+const menuTree = computed(() => permissionStore.menus)
+
+const handleCommand = (command: string) => {
+  if (command === 'profile') {
+    router.push('/profile')
+  } else if (command === 'logout') {
+    permissionStore.clearPermissionData()
+    localStorage.clear()
+    router.push('/login')
+  }
+}
+
+onMounted(() => {
+  const token = localStorage.getItem('token')
+  if (!token) {
+    router.push('/login')
+  } else if (!permissionStore.loaded) {
+    permissionStore.initFromStorage()
+  }
+})
+</script>
+
+<style scoped lang="css">
+.default-layout {
+  min-height: 100vh;
+}
+
+.aside {
+  background-color: #f5f7fa;
+  transition: width 0.3s;
+  overflow: hidden;
+}
+
+.logo {
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #303133;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.menu {
+  border-right: none;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+
+  .trigger {
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.3s;
+    &:hover { color: #409eff; }
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.content {
+  margin: 16px;
+  padding: 16px;
+  background: #fff;
+  min-height: calc(100vh - 96px);
+}
+</style>
+```
+
+- [ ] **步骤 2：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/layouts/DefaultLayout.vue
+git commit -m "feat: 修改 DefaultLayout 使用动态菜单渲染"
+```
+
+---
+
+## 任务 6：创建 API 权限检查工具
+
+**文件：**
+- 创建：`novalon-manage-web/src/utils/permission-check.ts`
+- 测试：`novalon-manage-web/src/__tests__/utils/permission-check.test.ts`
+
+- [ ] **步骤 1：编写 API 权限检查测试**
+
+```typescript
+// novalon-manage-web/src/__tests__/utils/permission-check.test.ts
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { usePermissionStore } from '@/stores/permission'
+import { canAccessApi } from '@/utils/permission-check'
+
+describe('API 权限检查', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    localStorage.clear()
+  })
+
+  it('有权限时应该返回 true', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:read'],
+      menus: []
+    })
+
+    expect(canAccessApi('/api/users', 'GET')).toBe(true)
+  })
+
+  it('无权限时应该返回 false', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:read'],
+      menus: []
+    })
+
+    expect(canAccessApi('/api/users', 'POST')).toBe(false)
+  })
+
+  it('未定义权限要求的 API 应该默认允许', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: [],
+      menus: []
+    })
+
+    expect(canAccessApi('/api/unknown', 'GET')).toBe(true)
+  })
+
+  it('应该正确匹配通配符路径', () => {
+    const store = usePermissionStore()
+    store.setPermissionData({
+      roles: [],
+      permissions: ['user:update'],
+      menus: []
+    })
+
+    expect(canAccessApi('/api/users/123', 'PUT')).toBe(true)
+  })
+})
+```
+
+- [ ] **步骤 2：运行测试验证失败**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/utils/permission-check.test.ts`
+
+预期：FAIL，报错 "Cannot find module '@/utils/permission-check'"
+
+- [ ] **步骤 3：创建 API 权限检查工具**
+
+```typescript
+// novalon-manage-web/src/utils/permission-check.ts
+import { usePermissionStore } from '@/stores/permission'
+
+const apiPermissionMap: Record<string, string> = {
+  '/api/users:GET': 'user:read',
+  '/api/users:POST': 'user:create',
+  '/api/users/*:PUT': 'user:update',
+  '/api/users/*:DELETE': 'user:delete',
+  '/api/roles:GET': 'role:read',
+  '/api/roles:POST': 'role:create',
+  '/api/roles/*:PUT': 'role:update',
+  '/api/roles/*:DELETE': 'role:delete',
+  '/api/menus:GET': 'menu:read',
+  '/api/menus:POST': 'menu:create',
+  '/api/menus/*:PUT': 'menu:update',
+  '/api/menus/*:DELETE': 'menu:delete',
+  '/api/config:GET': 'config:read',
+  '/api/config:POST': 'config:create',
+  '/api/config/*:PUT': 'config:update',
+  '/api/config/*:DELETE': 'config:delete',
+  '/api/dict:GET': 'dict:read',
+  '/api/dict:POST': 'dict:create',
+  '/api/dict/*:PUT': 'dict:update',
+  '/api/dict/*:DELETE': 'dict:delete',
+  '/api/files:GET': 'file:read',
+  '/api/files:POST': 'file:create',
+  '/api/files/*:DELETE': 'file:delete',
+  '/api/notices:GET': 'notice:read',
+  '/api/notices:POST': 'notice:create',
+  '/api/notices/*:PUT': 'notice:update',
+  '/api/notices/*:DELETE': 'notice:delete',
+  '/api/logs/login:GET': 'log:read',
+  '/api/logs/operation:GET': 'log:read',
+  '/api/logs/exception:GET': 'log:read'
+}
+
+function findRequiredPermission(path: string, method: string): string | null {
+  const exactKey = `${path}:${method}`
+  if (apiPermissionMap[exactKey]) {
+    return apiPermissionMap[exactKey]
+  }
+
+  for (const [key, permission] of Object.entries(apiPermissionMap)) {
+    const [pattern, reqMethod] = key.split(':')
+    if (reqMethod !== method) continue
+
+    const regex = new RegExp('^' + pattern.replace('*', '.*') + '$')
+    if (regex.test(path)) {
+      return permission
+    }
+  }
+
+  return null
+}
+
+export function canAccessApi(path: string, method: string): boolean {
+  const permissionStore = usePermissionStore()
+  
+  const required = findRequiredPermission(path, method)
+  
+  if (!required) {
+    return true
+  }
+  
+  return permissionStore.hasPermission(required)
+}
+```
+
+- [ ] **步骤 4：运行测试验证通过**
+
+运行：`cd novalon-manage-web && pnpm test src/__tests__/utils/permission-check.test.ts`
+
+预期：PASS
+
+- [ ] **步骤 5：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/utils/permission-check.ts src/__tests__/utils/permission-check.test.ts
+git commit -m "feat: 添加 API 权限检查工具"
+```
+
+---
+
+## 任务 7：集成 API 权限检查到请求拦截器
+
+**文件：**
+- 修改：`novalon-manage-web/src/utils/request.ts`
+
+- [ ] **步骤 1：修改 request.ts 添加权限检查**
+
+```typescript
+// novalon-manage-web/src/utils/request.ts
+import axios, { AxiosRequestConfig } from 'axios'
+import { generateSignatureHeaders } from './signature'
+import { canAccessApi } from './permission-check'
+
+const request = axios.create({
+  baseURL: '/api',
+  timeout: 10000
+})
+
+request.interceptors.request.use(
+  (config: AxiosRequestConfig) => {
+    const path = config.url || ''
+    const method = config.method?.toUpperCase() || 'GET'
+    
+    if (!canAccessApi(path, method)) {
+      console.warn(`无权限访问 API: ${method} ${path}`)
+      return Promise.reject(new Error(`无权限访问此 API: ${method} ${path}`))
+    }
+    
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers = config.headers || {}
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    
+    const methodForSignature = config.method?.toUpperCase() || 'GET'
+    let url = config.url || ''
+    const body = config.data
+    
+    if (config.params && Object.keys(config.params).length > 0) {
+      const queryParams = new URLSearchParams()
+      Object.entries(config.params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          queryParams.append(key, String(value))
+        }
+      })
+      const queryString = queryParams.toString()
+      if (queryString) {
+        url += (url.includes('?') ? '&' : '?') + queryString
+      }
+    }
+    
+    const fullPath = `/api${url.startsWith('/') ? url : '/' + url}`
+    const signatureHeaders = generateSignatureHeaders(methodForSignature, fullPath, body)
+    
+    config.headers = config.headers || {}
+    Object.assign(config.headers, signatureHeaders)
+    
+    return config
+  },
+  (error) => Promise.reject(error)
+)
+
+request.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem('token')
+      if (!window.location.pathname.includes('/login')) {
+        window.location.href = '/login'
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default request
+```
+
+- [ ] **步骤 2：Commit**
+
+```bash
+cd novalon-manage-web
+git add src/utils/request.ts
+git commit -m "feat: 集成 API 权限检查到请求拦截器"
+```
+
+---
+
+## 任务 8：运行完整测试套件
+
+- [ ] **步骤 1：运行所有单元测试**
+
+运行：`cd novalon-manage-web && pnpm test`
+
+预期：所有测试通过
+
+- [ ] **步骤 2：运行 TypeScript 类型检查**
+
+运行：`cd novalon-manage-web && pnpm type-check`
+
+预期：类型检查通过（忽略已存在的其他文件错误）
+
+- [ ] **步骤 3：最终 Commit**
+
+```bash
+cd novalon-manage-web
+git add .
+git commit -m "feat: 完成权限系统增强功能实现"
+```
+
+---
+
+## 后端 API 实现说明
+
+本计划需要后端新增以下 API：
+
+**接口**: `GET /api/menus/user`
+
+**功能**: 获取当前登录用户可访问的菜单和权限
+
+**实现要点**:
+1. 从 token 获取用户 ID
+2. 查询用户角色
+3. 根据角色查询菜单和权限
+4. 构建菜单树结构
+5. 返回菜单和权限列表
+
+**响应格式**:
+```json
+{
+  "code": 200,
+  "data": {
+    "menus": [
+      {
+        "id": 1,
+        "name": "仪表盘",
+        "path": "/dashboard",
+        "icon": "Odometer",
+        "parentId": null,
+        "sort": 1
+      }
+    ],
+    "permissions": [
+      "user:read",
+      "user:create"
+    ]
+  }
+}
+```
+
+后端实现不在本计划范围内，需要单独开发。
diff --git a/docs/superpowers/specs/2026-04-04-role-based-test-suite-design.md b/docs/superpowers/specs/2026-04-04-role-based-test-suite-design.md
new file mode 100644
index 0000000..ee0444d
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-04-role-based-test-suite-design.md
@@ -0,0 +1,1183 @@
+# 基于角色的用户模拟测试套件设计方案
+
+**版本**: 1.0  
+**日期**: 2026-04-04  
+**作者**: 张翔  
+**状态**: 待审查
+
+---
+
+## 目录
+
+1. [概述](#概述)
+2. [核心决策](#核心决策)
+3. [整体架构设计](#整体架构设计)
+4. [核心组件设计](#核心组件设计)
+5. [测试场景实现](#测试场景实现)
+6. [配置和CI/CD集成](#配置和cicd集成)
+7. [实施计划](#实施计划)
+8. [风险控制](#风险控制)
+9. [成功指标](#成功指标)
+
+---
+
+## 概述
+
+### 背景
+
+当前后端管理系统已有40+个E2E测试文件，但存在以下问题：
+
+1. **测试分散**：测试文件组织混乱，缺乏系统性
+2. **权限验证不足**：主要使用admin用户测试，缺乏跨角色权限验证
+3. **真实场景覆盖不全**：缺乏完整的业务流程测试
+4. **维护成本高**：测试代码重复，工具化程度低
+
+### 目标
+
+设计并实现一个基于角色的用户模拟测试套件，达到真实场景的验收标准：
+
+1. **真实业务场景覆盖**：覆盖完整的业务流程
+2. **权限边界验证**：验证不同角色的权限边界
+3. **高效执行**：优化测试执行效率
+4. **易于维护**：清晰的结构和工具化支持
+
+---
+
+## 核心决策
+
+### 决策1：角色范围
+
+**选择**：使用现有3种角色
+
+**理由**：
+- 系统已有完整的RBAC权限模型
+- 3种角色覆盖主要业务场景
+- 避免过度设计，聚焦核心需求
+
+**角色定义**：
+- **admin（超级管理员）**：拥有所有权限
+- **user（普通用户）**：只能访问和修改自己的信息
+- **test（测试用户）**：用于特定测试场景
+
+---
+
+### 决策2：测试模式
+
+**选择**：混合模式（业务流程 + 权限验证）
+
+**理由**：
+1. 符合真实业务本质：真实场景不仅是"用户能完成业务流程"，更包括"用户在权限约束下完成业务流程"
+2. 质量保障价值更高：能同时发现业务流程缺陷和权限控制缺陷
+3. 符合RBAC最佳实践：完美契合"谁在什么场景下能做什么"的核心思想
+
+**示例**：
+```typescript
+// 业务流程测试
+test('管理员创建用户', async ({ page }) => {
+  await loginAsRole(page, 'admin');
+  await createUser(testUser);
+  await expectUserExists(testUser.username);
+});
+
+// 权限验证测试（嵌入业务流程中）
+test('普通用户无法访问用户管理页面', async ({ page }) => {
+  await loginAsRole(page, 'user');
+  await verifyCannotAccess(page, '/user-management');
+});
+```
+
+---
+
+### 决策3：测试数据管理策略
+
+**选择**：混合策略（核心数据预置 + 业务数据动态创建）
+
+**理由**：
+1. 符合真实业务场景：角色和权限体系是预先配置好的，业务数据是动态产生的
+2. 执行效率与隔离性的最佳平衡：节省约43%执行时间
+3. 降低测试维护成本：核心数据极少变更，业务数据灵活可控
+4. 避免数据污染：核心数据不会被污染，业务数据完全隔离
+
+**数据分类**：
+
+| 数据类型 | 管理方式 | 生命周期 | 示例 |
+|---------|---------|---------|------|
+| 核心数据 | 预置 | 测试套件级别 | admin角色、基础权限 |
+| 业务数据 | 动态创建 | 测试用例级别 | 测试用户、测试菜单 |
+
+---
+
+### 决策4：组织结构
+
+**选择**：混合结构（roles/ + scenarios/ + shared/）
+
+**理由**：
+1. 完美契合混合模式测试策略
+2. 支持真实的跨角色业务流程
+3. 清晰的关注点分离
+4. 易于扩展和维护
+
+**目录结构**：
+```
+e2e/role-based-tests/
+├── roles/                    # 角色定义
+│   ├── base.role.ts
+│   ├── admin.role.ts
+│   ├── user.role.ts
+│   ├── test.role.ts
+│   └── role-factory.ts
+├── scenarios/                # 业务场景测试
+│   ├── authentication/
+│   ├── user-management/
+│   ├── role-management/
+│   └── menu-management/
+└── shared/                   # 共享工具
+    ├── auth-helper.ts
+    ├── role-auth-manager.ts
+    ├── test-data-manager.ts
+    ├── permission-helper.ts
+    └── workflow-helper.ts
+```
+
+---
+
+### 决策5：迁移策略
+
+**选择**：分层策略（核心场景优先迁移）
+
+**理由**：
+1. 风险可控：渐进式迁移，随时可回滚
+2. 优先级明确：核心场景优先，价值最大化
+3. 无重复测试：避免资源浪费
+4. 保留价值：边缘场景测试继续发挥作用
+
+**迁移优先级**：
+- **P0**：认证场景（登录、登出、权限验证）
+- **P1**：用户管理场景（创建、编辑、删除、生命周期）
+- **P2**：角色管理场景（创建、权限分配）
+- **P3**：菜单管理场景（创建、编辑、权限关联）
+
+---
+
+### 决策6：认证方式
+
+**选择**：Token注入 + 可选真实登录
+
+**理由**：
+1. 符合测试金字塔原则：少量真实登录测试 + 大量Token注入测试
+2. 执行效率高：节省约37%执行时间
+3. 真实性保障：Token是真实的，业务流程是真实的
+4. 灵活性强：可根据场景选择登录方式
+
+**效率对比**：
+- 真实登录：9秒/用例
+- Token注入：6.1秒/用例（节省32%时间）
+- 100个测试用例：节省约37%总时间
+
+---
+
+### 决策7：CI/CD集成
+
+**选择**：Gitea + Jenkins
+
+**理由**：
+1. 符合团队现有技术栈
+2. Jenkins生态成熟，插件丰富
+3. Gitea轻量级，易于维护
+4. 支持并行执行和矩阵测试
+
+---
+
+## 整体架构设计
+
+### 架构图
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    测试执行层 (Playwright)                   │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  scenarios/                                           │  │
+│  │  ├── authentication/    (认证场景 - 真实登录)        │  │
+│  │  ├── user-management/   (用户管理 - Token注入)      │  │
+│  │  ├── role-management/   (角色管理 - Token注入)      │  │
+│  │  └── menu-management/   (菜单管理 - Token注入)      │  │
+│  └──────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+                            ↓ 调用
+┌─────────────────────────────────────────────────────────────┐
+│                    角色管理层 (Roles)                        │
+│  ┌──────────────────────────────────────────────────────┐  │
+│  │  RoleFactory                                          │  │
+│  │  ├── AdminRole      (管理员角色定义)                 │  │
+│  │  ├── UserRole       (普通用户角色定义)               │  │
+│  │  └── TestRole       (测试用户角色定义)               │  │
+│  └──────────────────────────────────────────────────────┘  │
+│  每个角色包含：                                            │
+│  - credentials (登录凭证)                                  │
+│  - permissions (权限列表)                                  │
+│  - expectedBehaviors (预期行为)                            │
+│  - cannotAccess (禁止访问的资源)                           │
+└─────────────────────────────────────────────────────────────┘
+                            ↓ 使用
+┌─────────────────────────────────────────────────────────────┐
+│                    工具层 (Shared)                           │
+│  ┌──────────────────┐  ┌──────────────────┐               │
+│  │ AuthHelper       │  │ RoleAuthManager  │               │
+│  │ - loginAsRole()  │  │ - getRoleToken() │               │
+│  │ - logout()       │  │ - cacheToken()   │               │
+│  └──────────────────┘  └──────────────────┘               │
+│  ┌──────────────────┐  ┌──────────────────┐               │
+│  │ TestDataManager  │  │ PermissionHelper │               │
+│  │ - createUser()   │  │ - verifyCan()    │               │
+│  │ - cleanup()      │  │ - verifyCannot() │               │
+│  └──────────────────┘  └──────────────────┘               │
+└─────────────────────────────────────────────────────────────┘
+                            ↓ 依赖
+┌─────────────────────────────────────────────────────────────┐
+│                    Page Object层 (现有)                     │
+│  LoginPage, UserManagementPage, RoleManagementPage, ...    │
+└─────────────────────────────────────────────────────────────┘
+                            ↓ 操作
+┌─────────────────────────────────────────────────────────────┐
+│                    应用系统 (SUT)                            │
+│  前端 + 后端API + 数据库                                    │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 核心组件设计
+
+### 1. 角色定义系统
+
+#### 1.1 角色基类
+
+```typescript
+// roles/base.role.ts
+export interface RoleDefinition {
+  name: string;
+  displayName: string;
+  credentials: {
+    username: string;
+    password: string;
+  };
+  permissions: string[];
+  cannotAccess: string[];
+  expectedBehaviors: {
+    canCreate: string[];
+    canRead: string[];
+    canUpdate: string[];
+    canDelete: string[];
+  };
+}
+```
+
+#### 1.2 管理员角色定义
+
+```typescript
+// roles/admin.role.ts
+export const AdminRole: RoleDefinition = {
+  name: 'admin',
+  displayName: '超级管理员',
+  credentials: {
+    username: 'admin',
+    password: 'admin123'
+  },
+  permissions: [
+    'user:*',
+    'role:*',
+    'menu:*',
+    'config:*',
+    'log:read',
+    'dict:*'
+  ],
+  cannotAccess: [],
+  expectedBehaviors: {
+    canCreate: ['user', 'role', 'menu', 'config', 'dict'],
+    canRead: ['user', 'role', 'menu', 'config', 'dict', 'log'],
+    canUpdate: ['user', 'role', 'menu', 'config', 'dict'],
+    canDelete: ['user', 'role', 'menu', 'config', 'dict']
+  }
+};
+```
+
+#### 1.3 普通用户角色定义
+
+```typescript
+// roles/user.role.ts
+export const UserRole: RoleDefinition = {
+  name: 'user',
+  displayName: '普通用户',
+  credentials: {
+    username: 'testuser',
+    password: 'Test123!@#'
+  },
+  permissions: [
+    'user:read:self',
+    'user:update:self'
+  ],
+  cannotAccess: [
+    '/user-management',
+    '/role-management',
+    '/menu-management',
+    '/system-config'
+  ],
+  expectedBehaviors: {
+    canCreate: [],
+    canRead: ['self'],
+    canUpdate: ['self'],
+    canDelete: []
+  }
+};
+```
+
+#### 1.4 角色工厂
+
+```typescript
+// roles/role-factory.ts
+export class RoleFactory {
+  private static roles: Map<string, RoleDefinition> = new Map([
+    ['admin', AdminRole],
+    ['user', UserRole],
+    ['test', TestRole]
+  ]);
+
+  static getRole(roleName: string): RoleDefinition {
+    const role = this.roles.get(roleName);
+    if (!role) {
+      throw new Error(`Role '${roleName}' not found`);
+    }
+    return role;
+  }
+
+  static getAllRoles(): RoleDefinition[] {
+    return Array.from(this.roles.values());
+  }
+}
+```
+
+---
+
+### 2. 认证辅助工具
+
+#### 2.1 Token管理器
+
+```typescript
+// shared/role-auth-manager.ts
+export class RoleAuthManager {
+  private static tokenCache: Map<string, { 
+    token: string; 
+    expiresAt: number;
+  }> = new Map();
+
+  /**
+   * 获取角色Token（带缓存和自动刷新）
+   */
+  static async getRoleToken(roleName: string): Promise<string> {
+    const cached = this.tokenCache.get(roleName);
+    
+    // 如果Token还有效（提前5分钟刷新）
+    if (cached && cached.expiresAt > Date.now() + 300000) {
+      return cached.token;
+    }
+
+    // 通过真实API获取Token
+    const role = RoleFactory.getRole(roleName);
+    const token = await this.fetchTokenFromAPI(role.credentials);
+    
+    return token;
+  }
+
+  /**
+   * 从API获取真实Token
+   */
+  private static async fetchTokenFromAPI(credentials: { 
+    username: string; 
+    password: string 
+  }): Promise<string> {
+    const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials)
+    });
+
+    const data = await response.json();
+    
+    // 缓存Token（24小时有效期）
+    this.tokenCache.set(credentials.username, {
+      token: data.token,
+      expiresAt: Date.now() + 86400000
+    });
+
+    return data.token;
+  }
+}
+```
+
+#### 2.2 认证辅助类
+
+```typescript
+// shared/auth-helper.ts
+export class AuthHelper {
+  /**
+   * 以指定角色身份登录（支持两种模式）
+   */
+  static async loginAsRole(
+    page: Page, 
+    roleName: string, 
+    useFullLogin: boolean = false
+  ): Promise<void> {
+    if (useFullLogin) {
+      await this.performFullLogin(page, roleName);
+    } else {
+      await this.injectToken(page, roleName);
+    }
+  }
+
+  /**
+   * 注入Token（用于业务测试，快速高效）
+   */
+  private static async injectToken(page: Page, roleName: string): Promise<void> {
+    const token = await RoleAuthManager.getRoleToken(roleName);
+    
+    await page.goto('/');
+    await page.evaluate((token) => {
+      localStorage.setItem('token', token);
+      localStorage.setItem('access_token', token);
+    }, token);
+    
+    await page.reload();
+  }
+
+  /**
+   * 执行完整登录流程（用于认证相关测试）
+   */
+  private static async performFullLogin(page: Page, roleName: string): Promise<void> {
+    const role = RoleFactory.getRole(roleName);
+    const loginPage = new LoginPage(page);
+    
+    await loginPage.goto();
+    await loginPage.login(role.credentials.username, role.credentials.password);
+    await page.waitForURL(/\/(dashboard|\/)/);
+  }
+}
+```
+
+---
+
+### 3. 测试数据管理器
+
+```typescript
+// shared/test-data-manager.ts
+export class TestDataManager {
+  private static createdUsers: Set<string> = new Set();
+  private static createdRoles: Set<string> = new Set();
+
+  /**
+   * 生成测试用户数据
+   */
+  static generateTestUser(overrides?: Partial<TestUserData>): TestUserData {
+    const uuid = uuidv4().substring(0, 8);
+    return {
+      username: `test_${uuid}`,
+      password: 'Test123!@#',
+      email: `test_${uuid}@example.com`,
+      phone: `138${uuid.substring(0, 8)}`,
+      nickname: `测试用户_${Date.now()}`,
+      ...overrides
+    };
+  }
+
+  /**
+   * 记录创建的用户（用于清理）
+   */
+  static trackUser(username: string): void {
+    this.createdUsers.add(username);
+  }
+
+  /**
+   * 清理所有测试数据
+   */
+  static async cleanupAll(page: Page): Promise<void> {
+    for (const username of this.createdUsers) {
+      await this.deleteUserViaAPI(page, username);
+    }
+    this.createdUsers.clear();
+  }
+}
+```
+
+---
+
+### 4. 权限验证工具
+
+```typescript
+// shared/permission-helper.ts
+export class PermissionHelper {
+  /**
+   * 验证用户可以访问指定路径
+   */
+  static async verifyCanAccess(page: Page, path: string): Promise<void> {
+    await page.goto(path);
+    
+    // 验证没有跳转到登录页
+    await expect(page).not.toHaveURL(/.*login/);
+    
+    // 验证没有显示无权限提示
+    const noPermissionElement = page.locator('.no-permission, .forbidden');
+    await expect(noPermissionElement).not.toBeVisible();
+  }
+
+  /**
+   * 验证用户不能访问指定路径
+   */
+  static async verifyCannotAccess(page: Page, path: string): Promise<void> {
+    await page.goto(path);
+    
+    const isLoginPage = page.url().includes('login');
+    const hasNoPermission = await page.locator('.no-permission').isVisible();
+    const hasForbidden = await page.locator('text=/403|Forbidden/').isVisible();
+    
+    expect(isLoginPage || hasNoPermission || hasForbidden).toBeTruthy();
+  }
+
+  /**
+   * 验证用户可以看到指定菜单
+   */
+  static async verifyCanSeeMenu(page: Page, menuText: string): Promise<void> {
+    const menuElement = page.locator(`.menu-item:has-text("${menuText}")`);
+    await expect(menuElement).toBeVisible();
+  }
+
+  /**
+   * 验证用户看不到指定菜单
+   */
+  static async verifyCannotSeeMenu(page: Page, menuText: string): Promise<void> {
+    const menuElement = page.locator(`.menu-item:has-text("${menuText}")`);
+    await expect(menuElement).not.toBeVisible();
+  }
+}
+```
+
+---
+
+## 测试场景实现
+
+### 1. 认证场景测试（真实登录）
+
+```typescript
+// scenarios/authentication/login-flow.spec.ts
+test.describe('认证流程测试', () => {
+  test('管理员使用正确凭证登录成功', async ({ page }) => {
+    // 使用真实登录流程
+    await AuthHelper.loginAsRole(page, 'admin', true);
+    
+    // 验证登录成功
+    await expect(page).toHaveURL(/\/(dashboard|\/)/);
+    const isLoggedIn = await AuthHelper.isLoggedIn(page);
+    expect(isLoggedIn).toBeTruthy();
+  });
+
+  test('管理员使用错误密码登录失败', async ({ page }) => {
+    const role = RoleFactory.getRole('admin');
+    
+    await page.goto('/login');
+    await page.fill('[name="username"]', role.credentials.username);
+    await page.fill('[name="password"]', 'wrongpassword');
+    await page.click('[type="submit"]');
+    
+    await expect(page).toHaveURL(/.*login/);
+    await expect(page.locator('.error-message')).toBeVisible();
+  });
+});
+```
+
+---
+
+### 2. 用户管理场景测试（Token注入）
+
+```typescript
+// scenarios/user-management/admin-creates-user.spec.ts
+test.describe('管理员创建用户场景', () => {
+  test.beforeEach(async ({ page }) => {
+    // 使用Token注入快速登录
+    await AuthHelper.loginAsRole(page, 'admin');
+  });
+
+  test.afterEach(async ({ page }) => {
+    // 清理测试数据
+    await TestDataManager.cleanupAll(page);
+  });
+
+  test('管理员创建新用户成功', async ({ page }) => {
+    const testUser = TestDataManager.generateTestUser();
+    
+    await userManagementPage.goto();
+    await userManagementPage.clickCreateUser();
+    await userManagementPage.fillUserForm(testUser);
+    await userManagementPage.submitForm();
+    
+    const success = await userManagementPage.waitForSuccessMessage();
+    expect(success).toBeTruthy();
+    
+    TestDataManager.trackUser(testUser.username);
+  });
+});
+```
+
+---
+
+### 3. 权限边界验证测试
+
+```typescript
+// scenarios/user-management/permission-boundary.spec.ts
+test.describe('用户管理权限边界验证', () => {
+  test('普通用户无法访问用户管理页面', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user');
+    await PermissionHelper.verifyCannotAccess(page, '/user-management');
+  });
+
+  test('普通用户无法看到用户管理菜单', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user');
+    await PermissionHelper.verifyCannotSeeMenu(page, '用户管理');
+  });
+
+  test('普通用户无法创建用户', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user');
+    
+    const token = await page.evaluate(() => localStorage.getItem('token'));
+    const response = await fetch(`${API_BASE_URL}/api/users`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ username: 'hacker', password: 'hack123' })
+    });
+    
+    expect(response.status).toBe(403);
+  });
+});
+```
+
+---
+
+### 4. 用户生命周期完整场景
+
+```typescript
+// scenarios/user-management/user-lifecycle.spec.ts
+test.describe('用户完整生命周期测试', () => {
+  test('阶段1: 管理员创建用户', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin');
+    await userManagementPage.goto();
+    await userManagementPage.clickCreateUser();
+    await userManagementPage.fillUserForm(testUser);
+    await userManagementPage.submitForm();
+    
+    expect(await userManagementPage.waitForSuccessMessage()).toBeTruthy();
+    TestDataManager.trackUser(testUser.username);
+  });
+
+  test('阶段2: 新用户首次登录', async ({ page }) => {
+    await loginPage.goto();
+    await loginPage.login(testUser.username, testUser.password);
+    await expect(page).toHaveURL(/\/(dashboard|\/)/);
+    await expect(page.locator('text=用户管理')).not.toBeVisible();
+  });
+
+  test('阶段3: 用户修改个人信息', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'user');
+    await page.click('.user-avatar');
+    await page.click('text=个人中心');
+    await page.fill('[name="nickname"]', '更新昵称');
+    await page.click('[type="submit"]');
+    await expect(page.locator('.success-message')).toBeVisible();
+  });
+
+  test('阶段4: 管理员禁用用户', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin');
+    await userManagementPage.goto();
+    await userManagementPage.search(testUser.username);
+    await userManagementPage.clickStatusButton(1);
+    expect(await userManagementPage.waitForSuccessMessage()).toBeTruthy();
+  });
+
+  test('阶段5: 禁用用户无法登录', async ({ page }) => {
+    await loginPage.goto();
+    await loginPage.login(testUser.username, testUser.password);
+    await expect(page).toHaveURL(/.*login/);
+    await expect(page.locator('.error-message')).toBeVisible();
+  });
+
+  test('阶段6: 管理员删除用户', async ({ page }) => {
+    await AuthHelper.loginAsRole(page, 'admin');
+    await userManagementPage.goto();
+    await userManagementPage.search(testUser.username);
+    await userManagementPage.clickDeleteButton(1);
+    await userManagementPage.confirmDelete();
+    expect(await userManagementPage.waitForSuccessMessage()).toBeTruthy();
+  });
+});
+```
+
+---
+
+## 配置和CI/CD集成
+
+### 1. Playwright配置
+
+```typescript
+// playwright.config.ts
+export default defineConfig({
+  testDir: './e2e',
+  testMatch: [
+    '**/role-based-tests/**/*.spec.ts',
+    '**/legacy-tests/**/*.spec.ts'
+  ],
+  timeout: 30000,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'test-results/html' }],
+    ['junit', { outputFile: 'test-results/junit.xml' }]
+  ],
+  projects: [
+    {
+      name: 'admin-tests',
+      testMatch: /admin.*\.spec\.ts/,
+    },
+    {
+      name: 'user-tests',
+      testMatch: /user.*\.spec\.ts/,
+    },
+    {
+      name: 'auth-tests',
+      testMatch: /authentication.*\.spec\.ts/,
+    },
+  ],
+});
+```
+
+---
+
+### 2. 环境变量配置
+
+```bash
+# .env.test
+VITE_API_BASE_URL=http://localhost:8084
+BASE_URL=http://localhost:5173
+TEST_TIMEOUT=30000
+TEST_RETRIES=2
+ADMIN_USERNAME=admin
+ADMIN_PASSWORD=admin123
+USER_USERNAME=testuser
+USER_PASSWORD=Test123!@#
+```
+
+---
+
+### 3. Jenkins Pipeline配置
+
+```groovy
+// Jenkinsfile
+pipeline {
+    agent {
+        label 'node18-chrome'
+    }
+    
+    environment {
+        ADMIN_PASSWORD = credentials('admin-password')
+        VITE_API_BASE_URL = 'http://localhost:8084'
+    }
+    
+    stages {
+        stage('准备环境') {
+            steps {
+                sh '''
+                    cd novalon-manage-web
+                    pnpm install
+                    pnpm exec playwright install chromium
+                '''
+            }
+        }
+        
+        stage('运行基于角色的测试套件') {
+            parallel {
+                stage('管理员角色测试') {
+                    steps {
+                        sh 'cd novalon-manage-web && pnpm test:admin'
+                    }
+                }
+                
+                stage('普通用户角色测试') {
+                    steps {
+                        sh 'cd novalon-manage-web && pnpm test:user'
+                    }
+                }
+                
+                stage('认证流程测试') {
+                    steps {
+                        sh 'cd novalon-manage-web && pnpm test:auth'
+                    }
+                }
+            }
+        }
+    }
+    
+    post {
+        always {
+            junit 'novalon-manage-web/test-results/junit.xml'
+            publishHTML(target: [
+                reportDir: 'novalon-manage-web/test-results/html',
+                reportFiles: 'index.html',
+                reportName: 'Playwright测试报告'
+            ])
+        }
+    }
+}
+```
+
+---
+
+## 实施计划
+
+### 阶段1：基础设施搭建（第1周）
+
+**目标**：建立测试框架基础
+
+**任务清单**：
+- [ ] **修复H2数据库密码不一致问题**（优先级：P0）
+  - [ ] 统一主应用和测试环境的data-h2.sql密码配置
+  - [ ] 验证BCrypt版本兼容性
+  - [ ] 更新角色定义文件中的密码
+  - [ ] 添加密码验证测试
+- [ ] 创建目录结构
+- [ ] 实现角色定义系统
+- [ ] 实现核心工具类
+- [ ] 配置环境变量和Playwright配置
+- [ ] 编写单元测试验证工具类
+
+**验收标准**：
+- ✅ **密码配置一致且验证通过**
+- ✅ 所有工具类单元测试通过
+- ✅ Token获取和注入功能正常
+- ✅ 角色定义完整且可扩展
+
+---
+
+### 阶段2：核心场景迁移（第2-3周）
+
+**目标**：迁移高优先级测试场景
+
+**P0 - 认证场景（第2周前半）**：
+- [ ] login-flow.spec.ts
+- [ ] logout-flow.spec.ts
+- [ ] permission-validation.spec.ts
+
+**P1 - 用户管理场景（第2周后半）**：
+- [ ] admin-creates-user.spec.ts
+- [ ] user-edits-profile.spec.ts
+- [ ] user-lifecycle.spec.ts
+- [ ] permission-boundary.spec.ts
+
+**P2 - 角色管理场景（第3周前半）**：
+- [ ] admin-manages-roles.spec.ts
+- [ ] permission-assignment.spec.ts
+
+**P3 - 菜单管理场景（第3周后半）**：
+- [ ] admin-manages-menus.spec.ts
+
+**验收标准**：
+- ✅ 每个场景测试通过率100%
+- ✅ 测试覆盖率不低于旧测试
+- ✅ 执行时间在可接受范围内
+
+---
+
+### 阶段3：验证和优化（第4周）
+
+**目标**：确保质量并优化性能
+
+**任务清单**：
+- [ ] 全量运行新测试套件
+- [ ] 对比新旧测试覆盖率
+- [ ] 性能基准测试
+- [ ] 跨浏览器兼容性测试
+- [ ] 文档完善
+
+**验收标准**：
+- ✅ 测试覆盖率 ≥ 旧测试覆盖率
+- ✅ 平均执行时间 ≤ 旧测试执行时间 * 0.7
+- ✅ 所有浏览器测试通过
+
+---
+
+### 阶段4：清理和扩展（第5周及以后）
+
+**目标**：清理旧测试并持续改进
+
+**任务清单**：
+- [ ] 删除已迁移的旧测试文件
+- [ ] 保留边缘场景测试
+- [ ] 建立测试维护流程
+
+**验收标准**：
+- ✅ 无重复测试
+- ✅ 测试套件结构清晰
+
+---
+
+## 风险控制
+
+### 风险1：新测试遗漏关键场景
+
+**预防措施**：
+- 迁移前详细分析旧测试
+- 使用覆盖率工具对比
+- Code Review重点检查场景完整性
+
+**回滚策略**：
+```bash
+git revert <commit-hash>
+git checkout <old-commit> -- e2e/old-test.spec.ts
+```
+
+---
+
+### 风险2：Token注入失败
+
+**预防措施**：
+- 实现Token缓存和自动刷新
+- 添加降级机制
+
+**降级代码**：
+```typescript
+static async loginAsRole(page: Page, roleName: string, useFullLogin = false) {
+  if (useFullLogin) {
+    await this.performFullLogin(page, roleName);
+  } else {
+    try {
+      await this.injectToken(page, roleName);
+    } catch (error) {
+      console.warn('Token注入失败，降级使用真实登录');
+      await this.performFullLogin(page, roleName);
+    }
+  }
+}
+```
+
+---
+
+### 风险3：测试数据污染
+
+**预防措施**：
+- 使用独立的测试数据库
+- 每个测试后强制清理数据
+- 定期重置测试环境
+
+**清理脚本**：
+```bash
+#!/bin/bash
+psql -U novalon -d novalon_manage_test -c "TRUNCATE users, roles CASCADE;"
+psql -U novalon -d novalon_manage_test -f db/migration/V2__Insert_initial_data.sql
+```
+
+---
+
+### 风险4：H2数据库密码不一致问题 ⚠️
+
+**问题描述**：
+
+当前系统存在两个data-h2.sql文件，密码配置不一致：
+
+| 文件位置 | BCrypt版本 | 密码Hash | 明文密码 |
+|---------|-----------|---------|---------|
+| `manage-app/src/main/resources/data-h2.sql` | `$2b$` | `SFefXlGRFMA0fvxIufpWPuIAl0OPLgRDoCZPThCvjpiJGPYS8yNYy` | `admin123` |
+| `manage-app/src/test/resources/data-h2.sql` | `$2a$` | `nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C` | `Test@123` |
+
+**根本原因**：
+1. **BCrypt版本不一致**：主应用用`$2b$`，测试环境用`$2a$`
+2. **密码不一致**：主应用用`admin123`，测试环境用`Test@123`
+3. **Hash不一致**：两个完全不同的hash
+4. **可能导致**：测试环境登录失败，或密码验证失败
+
+**解决方案**：
+
+**方案A：统一使用测试环境配置（推荐）**
+
+1. **统一密码**：所有环境使用`Test@123`作为测试密码
+2. **统一BCrypt版本**：使用`$2a$`（Spring Security BCryptPasswordEncoder默认版本）
+3. **更新主应用data-h2.sql**：
+
+```sql
+-- 插入测试用户
+-- BCrypt哈希值对应明文密码: Test@123
+INSERT INTO sys_user (id, username, password, email, phone, nickname, status, create_by, update_by) 
+VALUES 
+(1, 'admin', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'admin@novalon.com', '13800138000', '超级管理员', 1, 'system', 'system'),
+(2, 'testadmin', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'testadmin@novalon.com', '13800138001', '测试管理员', 1, 'system', 'system'),
+(3, 'normaluser', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'normaluser@novalon.com', '13800138002', '普通用户', 1, 'system', 'system'),
+(4, 'guestuser', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'guestuser@novalon.com', '13800138003', '访客用户', 1, 'system', 'system'),
+(5, 'disableduser', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'disableduser@novalon.com', '13800138004', '禁用用户', 0, 'system', 'system'),
+(10, 'e2e_test_user', '$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C', 'e2e@test.com', '13900139000', 'E2E测试用户', 1, 'system', 'system');
+```
+
+4. **更新角色定义文件**：
+
+```typescript
+// roles/admin.role.ts
+export const AdminRole: RoleDefinition = {
+  name: 'admin',
+  displayName: '超级管理员',
+  credentials: {
+    username: 'admin',
+    password: 'Test@123'  // 统一使用Test@123
+  },
+  // ...
+};
+
+// roles/user.role.ts
+export const UserRole: RoleDefinition = {
+  name: 'user',
+  displayName: '普通用户',
+  credentials: {
+    username: 'normaluser',
+    password: 'Test@123'  // 统一使用Test@123
+  },
+  // ...
+};
+```
+
+**方案B：生成新的统一密码Hash**
+
+使用Spring Security的BCryptPasswordEncoder生成新的hash：
+
+```java
+@Test
+public void generateUnifiedPasswordHash() {
+    PasswordEncoder passwordEncoder = new BCryptPasswordEncoder(12);
+    
+    String password = "Test@123";
+    String hash = passwordEncoder.encode(password);
+    
+    System.out.println("密码: " + password);
+    System.out.println("哈希: " + hash);
+    
+    // 验证
+    boolean matches = passwordEncoder.matches(password, hash);
+    System.out.println("验证结果: " + matches);
+}
+```
+
+**验证步骤**：
+
+1. **验证BCrypt版本兼容性**：
+
+```java
+@Test
+public void verifyBCryptVersions() {
+    PasswordEncoder passwordEncoder = new BCryptPasswordEncoder(12);
+    
+    String password = "Test@123";
+    
+    // $2a$ hash
+    String hash2a = "$2a$12$nZ1EMUpZQljbnEdIKzH72eHlDJKUmHmHppnTTVth/SlHs5VpSAr8C";
+    boolean matches2a = passwordEncoder.matches(password, hash2a);
+    System.out.println("$2a$ hash验证: " + matches2a);
+    
+    // $2b$ hash
+    String hash2b = "$2b$12$SFefXlGRFMA0fvxIufpWPuIAl0OPLgRDoCZPThCvjpiJGPYS8yNYy";
+    boolean matches2b = passwordEncoder.matches(password, hash2b);
+    System.out.println("$2b$ hash验证: " + matches2b);
+}
+```
+
+2. **验证登录流程**：
+
+```typescript
+test('验证统一密码配置', async ({ page }) => {
+  await AuthHelper.loginAsRole(page, 'admin', true);
+  await expect(page).toHaveURL(/\/(dashboard|\/)/);
+});
+```
+
+**预防措施**：
+- 在实施计划第一阶段立即修复此问题
+- 添加测试验证密码配置的一致性
+- 在CI/CD中添加密码验证步骤
+
+**影响范围**：
+- ✅ 所有使用H2数据库的测试
+- ✅ 所有角色定义文件
+- ✅ 所有认证相关测试
+
+---
+
+## 成功指标
+
+### 质量指标
+
+| 指标 | 目标值 | 测量方法 |
+|------|--------|----------|
+| 测试覆盖率 | ≥ 80% | Jest coverage report |
+| 测试通过率 | 100% | CI构建结果 |
+| 缺陷发现率 | 提升20% | Bug统计对比 |
+| 误报率 | < 5% | Flaky test监控 |
+
+---
+
+### 效率指标
+
+| 指标 | 目标值 | 测量方法 |
+|------|--------|----------|
+| 执行时间 | ≤ 旧测试 * 0.7 | CI执行时间统计 |
+| 维护成本 | 降低30% | 代码变更频率 |
+| 新测试编写时间 | < 30分钟/场景 | 开发者反馈 |
+
+---
+
+### 业务指标
+
+| 指标 | 目标值 | 测量方法 |
+|------|--------|----------|
+| 权限bug发现 | ≥ 5个 | Bug分类统计 |
+| 回归测试覆盖 | 100%核心场景 | 场景清单检查 |
+| UAT通过率 | ≥ 95% | UAT结果统计 |
+
+---
+
+## 总结
+
+### 核心优势
+
+1. **真实性保障**：混合模式确保业务流程和权限验证的真实性
+2. **执行效率**：Token注入节省约37%执行时间
+3. **可维护性**：清晰的角色定义和工具类分层
+4. **可扩展性**：易于添加新角色和新场景
+5. **风险可控**：渐进式迁移，随时可回滚
+
+---
+
+### 预期收益
+
+- 🎯 **测试覆盖率提升**：从当前分散测试到系统化场景覆盖
+- ⚡ **执行效率提升**：节省约37%执行时间
+- 🐛 **缺陷发现能力提升**：权限边界验证增强
+- 📊 **可维护性提升**：清晰的结构和工具化支持
+- 🚀 **开发效率提升**：新测试编写时间 < 30分钟
+
+---
+
+## 附录
+
+### 参考资料
+
+- [Playwright最佳实践](https://playwright.dev/docs/best-practices)
+- [RBAC权限模型设计](https://en.wikipedia.org/wiki/Role-based_access_control)
+- [测试金字塔理论](https://martinfowler.com/articles/practical-test-pyramid.html)
+
+---
+
+**文档版本历史**：
+- v1.0 (2026-04-04): 初始版本
diff --git a/docs/superpowers/specs/2026-04-08-user-journey-test-improvement-design.md b/docs/superpowers/specs/2026-04-08-user-journey-test-improvement-design.md
new file mode 100644
index 0000000..07147e6
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-08-user-journey-test-improvement-design.md
@@ -0,0 +1,404 @@
+# User Journey 测试改进设计文档
+
+**文档日期**: 2026-04-08  
+**负责人**: 张翔  
+**版本**: 1.0  
+**状态**: 已验证
+
+---
+
+## 执行摘要
+
+通过快速验证测试，我们确认了 **Playwright 本身是有效的**，问题在于测试方式。改进后的测试方法成功发现了真实问题，证明了方案的可行性。
+
+**核心发现**：
+- ✅ Playwright 工具本身有效
+- ❌ 旧测试方式存在假阳性问题
+- ✅ 新测试方式能真实发现问题
+- ✅ 三层验证策略可行
+
+---
+
+## 1. 问题分析
+
+### 1.1 当前问题
+
+**用户报告**：
+- 测试通过了，但实际运行时页面没有内容
+- Console 有 Mock API 日志，但页面无内容
+
+**根本原因**：
+```typescript
+// ❌ 错误的测试方式
+const dataStats = page.locator('[data-testid="data-stats"]')
+if (await dataStats.isVisible()) {  // 如果不可见，跳过验证！
+  const statsText = await dataStats.textContent()
+  expect(statsText).toBeTruthy()  // 这行永远不会执行
+}
+// 测试通过！但实际上什么都没验证
+```
+
+**问题本质**：
+- 软验证：元素不存在就跳过验证
+- 假阳性：测试通过但实际无效
+- 缺乏强制验证：没有确保元素必须存在
+
+---
+
+### 1.2 验证测试结果
+
+**测试文件**: `tests/e2e/specs/validation/test-improvement-validation.spec.ts`
+
+**测试结果**：
+
+| 测试类型 | 结果 | 说明 |
+|---------|------|------|
+| ❌ 旧方式：软验证 | ✅ 通过 | **假阳性！** 元素不存在但测试通过 |
+| ✅ 新方式：硬验证 | ❌ 失败 | **正确！** 元素不存在，测试失败 |
+| ✅ 三层验证 | ❌ 失败 | API请求超时，暴露真实问题 |
+| ✅ 完整用户旅程 | ❌ 失败 | 案件列表元素不存在（count = 0） |
+| ✅ 诊断测试 | ✅ 通过 | 提供详细诊断信息 |
+
+**关键发现**：
+- 页面上没有 `.ant-list-item` 元素（count = 0）
+- API请求超时（没有调用 `/api/cases`）
+- 页面根本没有加载案件数据
+
+---
+
+## 2. 解决方案
+
+### 2.1 核心原则转变
+
+#### ❌ 旧方式（软验证）
+```typescript
+// 软验证：元素不存在就跳过
+if (await element.isVisible()) {
+  expect(await element.textContent()).toBeTruthy()
+}
+```
+
+#### ✅ 新方式（硬验证）
+```typescript
+// 硬验证：元素必须存在且可见
+await expect(element).toBeVisible()
+const text = await element.textContent()
+expect(text).toBeTruthy()
+expect(text.length).toBeGreaterThan(0)
+```
+
+---
+
+### 2.2 三层验证策略
+
+```typescript
+test('真实验证用户看到的内容', async ({ page }) => {
+  // Layer 1: API层验证
+  const response = await page.waitForResponse('**/api/cases')
+  expect(response.status()).toBe(200)
+  const data = await response.json()
+  expect(data.length).toBeGreaterThan(0)
+  
+  // Layer 2: 状态层验证
+  const state = await page.evaluate(() => {
+    return {
+      cases: window.__CASE_STORE__?.getState().cases,
+      currentCase: window.__CASE_STORE__?.getState().currentCase
+    }
+  })
+  expect(state.cases.length).toBeGreaterThan(0)
+  
+  // Layer 3: DOM层验证
+  const caseItems = page.locator('.ant-list-item')
+  await expect(caseItems.first()).toBeVisible({ timeout: 5000 })
+  const count = await caseItems.count()
+  expect(count).toBeGreaterThan(0)
+  
+  // Layer 4: 内容验证
+  const firstCaseText = await caseItems.first().textContent()
+  expect(firstCaseText).toBeTruthy()
+  expect(firstCaseText.length).toBeGreaterThan(10)
+})
+```
+
+---
+
+### 2.3 增强的测试工具
+
+#### 1. 状态验证器
+```typescript
+// tests/e2e/utils/state-validator.ts
+export async function validatePageState(page: Page, expectedState: {
+  hasCase?: boolean
+  hasData?: boolean
+  activePage?: string
+}) {
+  const state = await page.evaluate(() => ({
+    currentCase: window.__CASE_STORE__?.getState().currentCase,
+    transactions: window.__DATA_STORE__?.getState().transactions,
+    activePage: window.__PAGE_STORE__?.getState().activePageKey
+  }))
+  
+  if (expectedState.hasCase) {
+    expect(state.currentCase).toBeTruthy()
+  }
+  if (expectedState.hasData) {
+    expect(state.transactions.length).toBeGreaterThan(0)
+  }
+  if (expectedState.activePage) {
+    expect(state.activePage).toBe(expectedState.activePage)
+  }
+}
+```
+
+#### 2. 内容验证器
+```typescript
+// tests/e2e/utils/content-validator.ts
+export async function validateContent(
+  page: Page, 
+  selector: string, 
+  options: {
+    mustBeVisible?: boolean
+    mustHaveText?: boolean
+    minLength?: number
+    exactText?: string
+  } = {}
+) {
+  const element = page.locator(selector)
+  
+  // 默认必须可见
+  if (options.mustBeVisible !== false) {
+    await expect(element).toBeVisible({ timeout: 5000 })
+  }
+  
+  if (options.mustHaveText) {
+    const text = await element.textContent()
+    expect(text).toBeTruthy()
+    
+    if (options.minLength) {
+      expect(text.length).toBeGreaterThanOrEqual(options.minLength)
+    }
+    
+    if (options.exactText) {
+      expect(text.trim()).toBe(options.exactText)
+    }
+  }
+}
+```
+
+#### 3. 截图验证器
+```typescript
+// tests/e2e/utils/screenshot-validator.ts
+export async function takeScreenshotAndValidate(
+  page: Page,
+  testName: string,
+  step: string
+) {
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    path: `test-results/screenshots/${testName}-${step}.png`
+  })
+  
+  // 验证截图不为空
+  expect(screenshot.length).toBeGreaterThan(1000)
+  
+  console.log(`📸 Screenshot saved: ${testName}-${step}.png`)
+}
+```
+
+---
+
+## 3. 实施计划
+
+### 3.1 短期（1周内）
+
+**目标**: 修复现有测试用例
+
+**任务清单**:
+- [ ] 将所有软验证改为硬验证
+- [ ] 添加三层验证策略
+- [ ] 创建测试工具函数
+- [ ] 修复发现的问题
+
+**预计工作量**: 2-3 天
+
+---
+
+### 3.2 中期（2-4周）
+
+**目标**: 建立完整的测试体系
+
+**任务清单**:
+- [ ] 添加视觉验证（截图对比）
+- [ ] 建立测试报告机制
+- [ ] 集成到CI/CD
+- [ ] 建立测试数据管理
+
+**预计工作量**: 5-7 天
+
+---
+
+### 3.3 长期（1-3个月）
+
+**目标**: 持续优化和扩展
+
+**任务清单**:
+- [ ] 评估是否需要引入Storybook
+- [ ] 考虑AI辅助测试
+- [ ] 建立性能测试
+- [ ] 建立安全测试
+
+**预计工作量**: 10-15 天
+
+---
+
+## 4. 技术选型
+
+### 4.1 核心工具
+
+**Playwright** ✅ **已验证有效**
+- 优势：
+  - 强大的选择器和断言
+  - 支持API拦截和验证
+  - 内置截图和视频录制
+  - 跨浏览器支持
+  - 活跃的社区和文档
+
+- 劣势：
+  - 需要正确的使用方式
+  - 学习曲线适中
+
+**结论**: 继续使用Playwright，改进测试方式
+
+---
+
+### 4.2 辅助工具
+
+| 工具 | 用途 | 优先级 |
+|------|------|--------|
+| Playwright Screenshot | 视觉验证 | P0 |
+| Playwright Trace | 调试支持 | P0 |
+| Playwright API Mocking | 数据模拟 | P1 |
+| Percy / Chromatic | 视觉回归 | P2 |
+| Storybook | 组件测试 | P3 |
+
+---
+
+## 5. 质量保障
+
+### 5.1 测试原则
+
+1. **硬验证优先**: 元素必须存在，否则测试失败
+2. **多层验证**: API → 状态 → DOM → 内容
+3. **快速失败**: 发现问题立即失败，不继续执行
+4. **清晰诊断**: 提供详细的诊断信息
+
+---
+
+### 5.2 测试覆盖率目标
+
+| 层级 | 当前覆盖率 | 目标覆盖率 |
+|------|-----------|-----------|
+| API层 | 0% | 100% |
+| 状态层 | 0% | 100% |
+| DOM层 | 50% | 100% |
+| 内容层 | 30% | 100% |
+| **总体** | **30%** | **100%** |
+
+---
+
+## 6. 风险评估
+
+### 6.1 技术风险
+
+| 风险 | 影响 | 概率 | 缓解措施 |
+|------|------|------|----------|
+| 测试用例维护成本高 | 中 | 中 | 建立测试工具库，提高可维护性 |
+| 测试执行时间长 | 低 | 低 | 使用并行执行，优化测试用例 |
+| 误报率高 | 高 | 低 | 使用硬验证，减少假阳性 |
+
+---
+
+### 6.2 业务风险
+
+| 风险 | 影响 | 概率 | 缓解措施 |
+|------|------|------|----------|
+| 测试不通过影响交付 | 高 | 中 | 优先修复关键问题，建立分级测试 |
+| 测试数据管理复杂 | 中 | 中 | 建立测试数据工厂，使用Mock数据 |
+
+---
+
+## 7. 成功标准
+
+### 7.1 短期目标（1周内）
+
+- ✅ 所有测试用例使用硬验证
+- ✅ 测试覆盖率提升到 60%
+- ✅ 无假阳性问题
+- ✅ 发现并修复当前问题
+
+---
+
+### 7.2 中期目标（2-4周）
+
+- ✅ 测试覆盖率提升到 80%
+- ✅ 建立完整的测试报告
+- ✅ 集成到CI/CD
+- ✅ 测试执行时间 < 10分钟
+
+---
+
+### 7.3 长期目标（1-3个月）
+
+- ✅ 测试覆盖率提升到 100%
+- ✅ 建立视觉回归测试
+- ✅ 建立性能测试
+- ✅ 测试执行时间 < 5分钟
+
+---
+
+## 8. 附录
+
+### 8.1 验证测试文件
+
+**文件**: `tests/e2e/specs/validation/test-improvement-validation.spec.ts`
+
+**测试结果**:
+- ❌ 旧方式：软验证 - ✅ 通过（假阳性）
+- ✅ 新方式：硬验证 - ❌ 失败（正确）
+- ✅ 三层验证 - ❌ 失败（正确）
+- ✅ 完整用户旅程 - ❌ 失败（正确）
+- ✅ 诊断测试 - ✅ 通过
+
+---
+
+### 8.2 参考资料
+
+- [Playwright 官方文档](https://playwright.dev/)
+- [Playwright 最佳实践](https://playwright.dev/docs/best-practices)
+- [测试驱动开发（TDD）](https://en.wikipedia.org/wiki/Test-driven_development)
+
+---
+
+## 9. 总结
+
+### 9.1 核心结论
+
+1. ✅ **Playwright 工具本身有效**
+2. ❌ **问题在于测试方式（软验证 vs 硬验证）**
+3. ✅ **改进后的测试能真实发现问题**
+4. ✅ **三层验证策略可行**
+
+---
+
+### 9.2 下一步行动
+
+1. **立即行动**: 修复现有测试用例，使用硬验证
+2. **短期计划**: 建立测试工具库，提高可维护性
+3. **中期计划**: 集成到CI/CD，建立完整测试体系
+4. **长期计划**: 持续优化，建立视觉回归测试
+
+---
+
+**文档状态**: ✅ 已验证  
+**下一步**: 用户审查书面规格
diff --git a/docs/superpowers/specs/2026-04-08-user-journey-tests-design.md b/docs/superpowers/specs/2026-04-08-user-journey-tests-design.md
new file mode 100644
index 0000000..36b3788
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-08-user-journey-tests-design.md
@@ -0,0 +1,306 @@
+# User Journey Tests 设计文档
+
+**日期：** 2026-04-08  
+**作者：** 张翔  
+**状态：** 已批准
+
+---
+
+## 1. 概述
+
+### 1.1 背景
+
+novalon-manage-system 项目当前有 11 个功能模块，但仅有 7 个模块（63.6%）被 user journey 测试覆盖。为了提高测试覆盖率和系统质量，需要补充缺失的 4 个模块的端到端测试。
+
+### 1.2 目标
+
+为以下 4 个功能模块补充 user journey 测试：
+
+1. **异常日志** - 查看系统异常记录
+2. **系统配置** - 系统参数配置管理
+3. **字典管理** - 数据字典管理
+4. **通知管理** - 系统通知公告
+
+### 1.3 范围
+
+**包含：**
+- 基础覆盖：查看列表、搜索功能、基本操作（新增/编辑/删除）
+- 使用时间戳隔离测试数据
+- 遵循现有测试风格和模式
+
+**不包含：**
+- 边界情况测试
+- 错误处理测试
+- 权限验证测试
+
+---
+
+## 2. 架构设计
+
+### 2.1 文件结构
+
+```
+novalon-manage-web/e2e/journeys/
+├── exception-log-workflow.spec.ts    # 异常日志测试
+├── config-workflow.spec.ts           # 系统配置测试
+├── dict-workflow.spec.ts             # 字典管理测试
+└── notice-workflow.spec.ts           # 通知管理测试
+```
+
+### 2.2 测试模式
+
+- **测试框架：** Playwright
+- **组织方式：** 使用 `test.describe` 组织测试套件
+- **步骤组织：** 使用 `test.step` 组织测试步骤
+- **数据隔离：** 使用时间戳生成唯一测试数据
+- **命名规范：** 遵循现有测试的命名规范
+
+### 2.3 测试策略
+
+每个模块包含 3-5 个独立测试：
+
+1. **查看列表** - 验证页面加载和数据展示
+2. **搜索功能** - 验证搜索和筛选
+3. **新增操作** - 验证创建功能
+4. **编辑操作** - 验证更新功能
+5. **删除操作** - 验证删除功能
+
+---
+
+## 3. 详细设计
+
+### 3.1 异常日志测试
+
+**文件：** `exception-log-workflow.spec.ts`
+
+**测试场景：**
+
+| 测试名称 | 测试步骤 | 验证点 |
+|---------|---------|--------|
+| 查看异常日志列表 | 1. 导航到异常日志页面<br>2. 等待数据加载 | 表格组件可见 |
+| 搜索异常日志 | 1. 输入搜索关键词<br>2. 点击搜索按钮<br>3. 等待结果 | 搜索结果正确显示 |
+| 查看异常日志详情 | 1. 点击查看详情按钮<br>2. 等待对话框打开 | 详情对话框可见 |
+
+**关键选择器：**
+- 页面路径：`/exception-log`
+- 表格：`.el-table`
+- 搜索框：`input[placeholder*="搜索"]`
+- 详情按钮：`button:has-text("查看")`
+
+---
+
+### 3.2 系统配置测试
+
+**文件：** `config-workflow.spec.ts`
+
+**测试场景：**
+
+| 测试名称 | 测试步骤 | 验证点 |
+|---------|---------|--------|
+| 查看系统配置列表 | 1. 导航到系统配置页面<br>2. 等待数据加载 | 表格组件可见 |
+| 新增系统配置 | 1. 点击新增配置按钮<br>2. 填写表单<br>3. 提交表单 | 成功消息显示 |
+| 搜索系统配置 | 1. 输入搜索关键词<br>2. 点击搜索按钮 | 搜索结果正确显示 |
+| 编辑系统配置 | 1. 点击编辑按钮<br>2. 修改配置值<br>3. 提交表单 | 成功消息显示 |
+| 删除系统配置 | 1. 点击删除按钮<br>2. 确认删除 | 成功消息显示 |
+
+**测试数据：**
+```typescript
+const timestamp = Date.now();
+const configKey = `test_config_${timestamp}`;
+const configName = `测试配置_${timestamp}`;
+const configValue = `测试值_${timestamp}`;
+```
+
+**关键选择器：**
+- 页面路径：`/config`
+- 新增按钮：`button:has-text("新增配置")`
+- 表单输入：`.el-dialog input`
+- 提交按钮：`.el-dialog button:has-text("确定")`
+
+---
+
+### 3.3 字典管理测试
+
+**文件：** `dict-workflow.spec.ts`
+
+**测试场景：**
+
+| 测试名称 | 测试步骤 | 验证点 |
+|---------|---------|--------|
+| 查看字典列表 | 1. 导航到字典管理页面<br>2. 等待数据加载 | 表格组件可见 |
+| 新增字典 | 1. 点击新增字典按钮<br>2. 填写表单<br>3. 提交表单 | 成功消息显示 |
+| 搜索字典 | 1. 输入搜索关键词<br>2. 点击搜索按钮 | 搜索结果正确显示 |
+| 编辑字典 | 1. 点击编辑按钮<br>2. 修改字典信息<br>3. 提交表单 | 成功消息显示 |
+| 删除字典 | 1. 点击删除按钮<br>2. 确认删除 | 成功消息显示 |
+
+**测试数据：**
+```typescript
+const timestamp = Date.now();
+const dictType = `test_dict_${timestamp}`;
+const dictName = `测试字典_${timestamp}`;
+```
+
+**关键选择器：**
+- 页面路径：`/dict`
+- 新增按钮：`button:has-text("新增字典")`
+- 表单输入：`.el-dialog input`
+- 提交按钮：`.el-dialog button:has-text("确定")`
+
+---
+
+### 3.4 通知管理测试
+
+**文件：** `notice-workflow.spec.ts`
+
+**测试场景：**
+
+| 测试名称 | 测试步骤 | 验证点 |
+|---------|---------|--------|
+| 查看通知列表 | 1. 导航到通知管理页面<br>2. 等待数据加载 | 表格组件可见 |
+| 新增通知 | 1. 点击新增通知按钮<br>2. 填写表单<br>3. 提交表单 | 成功消息显示 |
+| 搜索通知 | 1. 输入搜索关键词<br>2. 点击搜索按钮 | 搜索结果正确显示 |
+| 编辑通知 | 1. 点击编辑按钮<br>2. 修改通知内容<br>3. 提交表单 | 成功消息显示 |
+| 删除通知 | 1. 点击删除按钮<br>2. 确认删除 | 成功消息显示 |
+
+**测试数据：**
+```typescript
+const timestamp = Date.now();
+const noticeTitle = `测试通知_${timestamp}`;
+const noticeContent = `这是测试通知内容_${timestamp}`;
+```
+
+**关键选择器：**
+- 页面路径：`/notice`
+- 新增按钮：`button:has-text("新增通知")`
+- 表单输入：`.el-dialog input`
+- 提交按钮：`.el-dialog button:has-text("确定")`
+
+---
+
+## 4. 测试数据管理
+
+### 4.1 数据隔离策略
+
+使用时间戳生成唯一测试数据：
+
+```typescript
+const timestamp = Date.now();
+const uniqueName = `测试数据_${timestamp}`;
+```
+
+**优势：**
+- 无需清理测试数据
+- 避免测试数据冲突
+- 与现有测试风格一致
+
+### 4.2 测试数据示例
+
+| 模块 | 数据字段 | 生成规则 |
+|------|---------|---------|
+| 系统配置 | configKey, configName | `test_config_${timestamp}` |
+| 字典管理 | dictType, dictName | `test_dict_${timestamp}` |
+| 通知管理 | noticeTitle, noticeContent | `测试通知_${timestamp}` |
+
+---
+
+## 5. 测试执行
+
+### 5.1 运行命令
+
+```bash
+# 运行所有 journey 测试
+npm run test:e2e:journeys
+
+# 运行特定测试文件
+npx playwright test e2e/journeys/exception-log-workflow.spec.ts
+
+# 运行所有新增测试
+npx playwright test e2e/journeys/exception-log-workflow.spec.ts \
+                   e2e/journeys/config-workflow.spec.ts \
+                   e2e/journeys/dict-workflow.spec.ts \
+                   e2e/journeys/notice-workflow.spec.ts
+```
+
+### 5.2 测试配置
+
+测试将使用现有的 Playwright 配置：
+
+- **项目：** `journeys`
+- **依赖：** `setup` 项目（认证）
+- **存储状态：** `playwright/.auth/user.json`
+- **浏览器：** Desktop Chrome
+- **超时：** 120000ms
+
+---
+
+## 6. 验收标准
+
+### 6.1 功能验收
+
+- [ ] 所有测试文件创建成功
+- [ ] 所有测试通过
+- [ ] 测试覆盖率提升至 100%（11/11 模块）
+
+### 6.2 质量验收
+
+- [ ] 测试代码遵循现有风格
+- [ ] 测试步骤清晰可读
+- [ ] 测试数据隔离有效
+- [ ] 无测试数据冲突
+
+### 6.3 文档验收
+
+- [ ] 测试文件包含清晰的注释
+- [ ] 测试描述准确反映测试内容
+- [ ] 测试步骤命名规范
+
+---
+
+## 7. 风险与缓解
+
+### 7.1 风险识别
+
+| 风险 | 影响 | 概率 | 缓解措施 |
+|------|------|------|---------|
+| 测试数据污染 | 中 | 低 | 使用时间戳隔离 |
+| 测试依赖环境 | 高 | 中 | 使用独立的测试环境 |
+| 页面元素变化 | 中 | 低 | 使用稳定的选择器 |
+| 测试超时 | 低 | 中 | 增加适当的等待时间 |
+
+### 7.2 回滚计划
+
+如果测试失败或影响现有测试，可以：
+
+1. 删除新增的测试文件
+2. 恢复到之前的测试状态
+3. 分析失败原因后重新实施
+
+---
+
+## 8. 后续改进
+
+### 8.1 短期改进
+
+1. 修复 `admin-complete-workflow.spec.ts` 中被跳过的清理测试
+2. 增强菜单管理的测试覆盖
+3. 增强登录日志的测试覆盖
+
+### 8.2 长期改进
+
+1. 引入边界情况测试
+2. 引入错误处理测试
+3. 引入权限验证测试
+4. 实现测试数据自动清理
+
+---
+
+## 9. 参考资料
+
+- [Playwright 官方文档](https://playwright.dev/)
+- [项目 E2E 测试 README](../../novalon-manage-web/e2e/README.md)
+- [现有测试示例](../../novalon-manage-web/e2e/journeys/)
+
+---
+
+**批准人：** 用户  
+**批准日期：** 2026-04-08
diff --git a/docs/superpowers/specs/2026-04-15-local-dev-testing-design.md b/docs/superpowers/specs/2026-04-15-local-dev-testing-design.md
new file mode 100644
index 0000000..c395ddd
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-15-local-dev-testing-design.md
@@ -0,0 +1,260 @@
+# 本地开发环境集成测试方案设计
+
+**日期**: 2026-04-15  
+**作者**: 张翔 (全栈质量保障与效能工程师)  
+**版本**: 1.0
+
+## 1. 任务概述
+
+### 1.1 目标
+启动前后端系统（包含网关服务），确保前后端联通，在开发环境中使用已有的测试框架进行用户旅程测试。数据库部署在Docker中，应用直接在开发环境中运行。
+
+### 1.2 成功标准
+1. ✅ 数据库在Docker中成功启动并初始化
+2. ✅ 后端网关和应用服务在本地成功启动
+3. ✅ 前端应用在本地成功启动并连接到后端
+4. ✅ 用户旅程测试（E2E测试）成功执行
+5. ✅ 所有服务健康状态正常
+
+## 2. 技术架构
+
+### 2.1 系统架构
+```
+┌─────────────────────────────────────────────────────────────┐
+│                   本地开发环境                              │
+├─────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐    ┌─────────────┐    ┌─────────────┐    │
+│  │   Vue 3     │    │ Spring Cloud│    │ Spring Boot │    │
+│  │  前端应用   │◄──►│   Gateway   │◄──►│  应用服务   │    │
+│  │  (端口:3000)│    │  (端口:8080)│    │ (端口:8084) │    │
+│  └─────────────┘    └─────────────┘    └─────────────┘    │
+│         ▲                         ▲               ▲        │
+│         │                         │               │        │
+│         └─────────────────────────┴───────────────┘        │
+│                    HTTP/REST API 通信                       │
+├─────────────────────────────────────────────────────────────┤
+│                    Docker容器环境                           │
+├─────────────────────────────────────────────────────────────┤
+│  ┌─────────────────────────────────────────────────────┐  │
+│  │              PostgreSQL 15数据库                     │  │
+│  │              (端口:55432)                            │  │
+│  │              Flyway自动迁移                          │  │
+│  └─────────────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 技术栈
+- **后端**: Java 21 + Spring Boot 3.5.13 + Spring Cloud Gateway
+- **前端**: Vue 3 + TypeScript + Vite + Element Plus
+- **数据库**: PostgreSQL 15 (Docker容器)
+- **测试框架**: Playwright (E2E测试)
+- **构建工具**: Maven (后端) + pnpm/npm (前端)
+
+## 3. 配置方案
+
+### 3.1 数据库配置
+- **容器服务**: PostgreSQL 15 (postgres:15-alpine)
+- **端口映射**: 55432:5432 (避免与本地PostgreSQL冲突)
+- **数据库名称**: manage_system
+- **认证信息**: novalon/novalon123
+- **数据卷**: postgres_data (持久化存储)
+- **健康检查**: pg_isready命令验证
+
+### 3.2 后端服务配置
+- **网关服务**: 
+  - 端口: 8080
+  - 路由配置: /api/** → localhost:8084
+  - 过滤器: JWT认证、RBAC授权、重试机制
+- **应用服务**:
+  - 端口: 8084
+  - 数据库连接: r2dbc:postgresql://localhost:55432/manage_system
+  - 健康检查: /actuator/health端点
+- **启动方式**: Maven多模块同时启动
+
+### 3.3 前端服务配置
+- **开发服务器**: Vite (端口:3000)
+- **API代理**: 配置代理到网关服务 (localhost:8080)
+- **环境变量**: 使用开发环境配置
+- **构建工具**: pnpm (推荐) 或 npm
+
+### 3.4 测试配置
+- **测试框架**: Playwright
+- **测试范围**: 冒烟测试 (login-logout.spec.ts)
+- **测试数据**:
+  - 管理员账号: admin/Test@123
+  - 普通用户账号: user/Test@123
+- **测试环境**: 连接到本地运行的服务
+
+## 4. 实施步骤
+
+### 4.1 阶段一：数据库容器启动
+```bash
+# 1. 启动PostgreSQL容器
+docker-compose up -d postgres
+
+# 2. 等待数据库就绪 (10秒)
+sleep 10
+
+# 3. 验证数据库连接
+docker-compose exec postgres pg_isready -U novalon -d manage_system
+```
+
+### 4.2 阶段二：后端服务启动
+```bash
+# 1. 进入后端项目目录
+cd /Users/zhangxiang/Codes/Novalon/novalon-manage-system/novalon-manage-api
+
+# 2. 使用Maven同时启动网关和应用
+mvn spring-boot:run -pl manage-gateway,manage-app -am
+```
+
+### 4.3 阶段三：前端服务启动
+```bash
+# 1. 进入前端项目目录
+cd /Users/zhangxiang/Codes/Novalon/novalon-manage-system/novalon-manage-web
+
+# 2. 安装依赖 (如果未安装)
+pnpm install  # 或 npm install
+
+# 3. 启动开发服务器
+pnpm run dev  # 或 npm run dev
+```
+
+### 4.4 阶段四：执行E2E测试
+```bash
+# 1. 在另一个终端执行冒烟测试
+cd /Users/zhangxiang/Codes/Novalon/novalon-manage-system/novalon-manage-web
+pnpm run test:e2e:smoke  # 或 npm run test:e2e:smoke
+```
+
+## 5. 验证检查点
+
+### 5.1 数据库验证
+- [ ] PostgreSQL容器运行状态正常 (`docker-compose ps`)
+- [ ] 数据库端口55432可访问 (`telnet localhost 55432`)
+- [ ] Flyway迁移脚本执行成功 (查看应用日志)
+
+### 5.2 后端验证
+- [ ] 网关服务在8080端口响应 (`curl http://localhost:8080/actuator/health`)
+- [ ] 应用服务在8084端口响应 (`curl http://localhost:8084/actuator/health`)
+- [ ] 健康检查端点返回UP状态
+- [ ] 网关能正确路由到应用服务
+
+### 5.3 前端验证
+- [ ] 开发服务器在3000端口运行 (`curl http://localhost:3000`)
+- [ ] 页面能正常加载 (浏览器访问 http://localhost:3000)
+- [ ] API请求能正确代理到后端
+
+### 5.4 测试验证
+- [ ] 冒烟测试执行通过
+- [ ] 登录登出流程正常
+- [ ] 测试报告生成成功
+
+## 6. 故障排除预案
+
+### 6.1 常见问题及解决方案
+
+#### 问题1：端口冲突
+- **症状**: 服务启动失败，提示端口被占用
+- **解决方案**:
+  1. 检查8080、8084、55432端口是否被占用: `lsof -i :8080`
+  2. 停止占用端口的进程或修改配置使用其他端口
+  3. 修改application.yml中的端口配置
+
+#### 问题2：数据库连接失败
+- **症状**: 应用启动时报数据库连接错误
+- **解决方案**:
+  1. 验证Docker容器状态: `docker-compose ps`
+  2. 检查数据库日志: `docker-compose logs postgres`
+  3. 验证网络连接: `telnet localhost 55432`
+  4. 检查数据库认证信息配置
+
+#### 问题3：服务启动失败
+- **症状**: Maven启动时报依赖或配置错误
+- **解决方案**:
+  1. 清理Maven缓存: `mvn clean`
+  2. 重新下载依赖: `mvn dependency:resolve`
+  3. 检查Spring配置文件和环境变量
+  4. 查看详细错误日志
+
+#### 问题4：测试失败
+- **症状**: Playwright测试执行失败
+- **解决方案**:
+  1. 验证测试环境服务是否正常运行
+  2. 检查测试数据是否正确
+  3. 查看测试失败截图和日志
+  4. 运行调试模式: `pnpm run test:e2e:debug`
+
+### 6.2 回滚方案
+1. **停止所有服务**:
+   ```bash
+   # 停止Docker容器
+   docker-compose down
+   
+   # 停止Maven进程 (Ctrl+C)
+   # 停止npm进程 (Ctrl+C)
+   ```
+
+2. **清理临时文件**:
+   ```bash
+   # 清理Maven构建目录
+   cd /Users/zhangxiang/Codes/Novalon/novalon-manage-system/novalon-manage-api
+   mvn clean
+   
+   # 清理前端缓存
+   cd /Users/zhangxiang/Codes/Novalon/novalon-manage-system/novalon-manage-web
+   rm -rf node_modules/.vite
+   ```
+
+3. **重新执行**:
+   按照4.1-4.4步骤重新执行
+
+## 7. 监控与日志
+
+### 7.1 服务监控
+- **数据库**: `docker-compose logs -f postgres`
+- **后端应用**: Maven控制台输出 + 应用日志
+- **前端**: Vite开发服务器控制台输出
+- **测试**: Playwright测试报告和控制台输出
+
+### 7.2 关键指标
+- 服务启动时间
+- API响应时间
+- 数据库连接状态
+- 测试执行成功率
+- 资源使用情况 (CPU/内存)
+
+## 8. 后续优化建议
+
+### 8.1 短期优化
+1. **自动化脚本**: 创建一键启动脚本，简化操作流程
+2. **环境配置**: 完善本地开发环境配置文件
+3. **测试数据**: 优化测试数据管理，支持数据重置
+
+### 8.2 中期优化
+1. **容器化开发环境**: 考虑使用DevContainer统一开发环境
+2. **测试覆盖率**: 增加更多E2E测试场景
+3. **性能监控**: 集成APM工具监控应用性能
+
+### 8.3 长期优化
+1. **CI/CD集成**: 将本地测试流程集成到CI/CD流水线
+2. **多环境支持**: 支持开发、测试、预发、生产多环境
+3. **安全加固**: 加强安全测试和漏洞扫描
+
+## 9. 附录
+
+### 9.1 配置文件位置
+- 数据库配置: `docker-compose.yml`
+- 后端配置: `novalon-manage-api/manage-*/src/main/resources/application*.yml`
+- 前端配置: `novalon-manage-web/.env*`, `vite.config.ts`
+- 测试配置: `novalon-manage-web/playwright.config.ts`
+
+### 9.2 相关文档
+- 项目README: `/Users/zhangxiang/Codes/Novalon/novalon-manage-system/README.md`
+- E2E测试说明: `novalon-manage-web/e2e/README.md`
+- API文档: `http://localhost:8084/swagger-ui.html` (启动后访问)
+
+### 9.3 联系方式
+- **负责人**: 张翔
+- **角色**: 全栈质量保障与效能工程师
+- **原则**: 质量是设计出来的，并通过自动化流水线保障
\ No newline at end of file