fix(case): AI 用例详情弹窗深浅色主题可读性

为 append-to-body 详情弹窗增加独立样式，修复标题、标签与描述列表在浅色/服务器环境下的对比度。 Co-authored-by: Cursor <cursoragent@cursor.com>
fix(layout): 左侧菜单栏支持纵向滚动
2026-05-18 17:05:45 +08:00 · 2026-05-18 16:55:56 +08:00 · 2026-05-18 16:50:27 +08:00 · 2026-05-18 16:33:35 +08:00 · 2026-05-18 16:18:40 +08:00 · 2026-05-18 11:28:55 +08:00
57 changed files with 17402 additions and 602 deletions
--- a/.plan/MEVsZvRZopyrJGc3cNsiN.md
+++ b/.plan/MEVsZvRZopyrJGc3cNsiN.md
@@ -40,8 +40,8 @@
   - `src/api/dataFactoryApi.js`
 2. 统一复用 `src/utils/request.js`。
 3. 尽量映射到 REST 风格路径，例如：
-   - `/api/v1/projects/{projectId}/cases`
-   - `/api/v1/projects/{projectId}/plans`
+   - `/api/v1/projects/{projectId}/case`
+   - `/api/v1/projects/{projectId}/plan`
   - `/api/v1/projects/{projectId}/reports`
   - `/api/v1/projects/{projectId}/data/*`
 4. 对分页、详情、创建、更新、执行、导出等接口做最小可用封装。
--- a/.plan/fsKfEW4Z6YGlqrLCshlxS.md
+++ b/.plan/fsKfEW4Z6YGlqrLCshlxS.md
@@ -0,0 +1,165 @@
+# 执行计划：用例管理与模块管理改造
+
+## 目标
+根据后端 `Case 与 Module` 接口文档，改造前端接口调用与用例管理页面：
+- 用例管理页面包含两个表格：模块列表、用例列表。
+- 模块支持查询、新增、删除，并展示模块字段与搜索条件。
+- 用例列表支持项目名称、用例标题模糊搜索、优先级、是否自动化、标签等条件。
+- 用例列表展示项目名称、用例编号、用例标题、优先级、类型、状态、是否实现自动化、标签等字段。
+
+## 已定位文件
+- `src/api/caseApi.js`
+  - 已有 `module/tree/create/update/delete` 与 `case/list/detail/create/update/delete` 封装。
+  - 当前部分参数仍使用旧字段：`project_id`、`case_id` 等，需要调整为文档里的 camelCase 参数。
+- `src/components/TestPlatform/Case/CaseList.vue`
+  - 当前只有一个用例表格。
+  - 当前搜索条件只有项目ID、关键词、优先级。
+  - 当前缺少分页状态定义与模块管理区。
+- `src/components/TestPlatform/Case/CaseEditor.vue`
+  - 当前表单字段使用 `case_type` 等后端返回字段，提交时需要按文档转为 `caseType`、`moduleId`、`caseKey`、`isAuto` 等。
+- `src/router/index.js`
+  - 用例相关路由已存在，无需新增路由。
+
+## 改造步骤
+
+### 1. 调整接口封装 `src/api/caseApi.js`
+- 保留已有函数名，降低页面调用改动成本。
+- `getCaseList(projectId, params)` 改为请求参数包含：
+  - `projectId`
+  - `pageNo`
+  - `pageSize`
+  - `projectName`
+  - `moduleId`
+  - `keyword`
+  - `priority`
+  - `caseType`
+  - `status`
+  - `isAuto`
+  - `tag`
+- `getCaseDetail(projectId, caseId)` 改为传 `caseId`，必要时兼容 `projectId`。
+- `createCase(projectId, data)` 改为提交 `projectId`，不再提交 `project_id`。
+- `updateCase(projectId, caseId, data)` 改为提交 `caseId`，不再提交 `id/project_id` 旧字段。
+- `deleteCase(projectId, caseId)` 改为提交 `{ caseId }`，必要时保留 `projectId` 不影响后端。
+- 模块接口保持：
+  - `getModuleTree(params)` -> `/module/tree`
+  - `createModule(data)` -> `/module/create`
+  - `deleteModule(data)` -> `/module/delete`
+  - 删除模块调用传 `{ moduleId }`。
+
+### 2. 改造 `CaseList.vue` 页面布局
+- 在同一个页面内使用两个 `page-section`：
+  1. `模块列表`
+  2. `用例列表`
+- 模块列表区：
+  - 搜索条件：`projectId`、`parentId`。
+  - 按钮：查询、新增模块。
+  - 表格字段：
+    - 模块ID：`id`
+    - 项目ID：`project_id`
+    - 父模块ID：`parent_id`
+    - 模块名称：`name`
+    - 排序：`sort_order`
+    - 路径：`path`
+    - 创建时间：`created_time`
+    - 更新时间：`updated_time`
+    - 操作：删除
+  - 新增模块弹窗字段：
+    - `projectId` 必填
+    - `name` 必填
+    - `parentId`
+    - `sortOrder`
+    - `path`
+  - 删除模块调用 `deleteModule({ moduleId: row.id })`。
+
+### 3. 改造用例列表搜索条件
+- 搜索表单字段：
+  - `projectId`
+  - `projectName`
+  - `keyword`（用例标题模糊搜索）
+  - `priority`
+  - `caseType`
+  - `status`
+  - `isAuto`
+  - `tag`
+- 查询时传入分页：`pageNo`、`pageSize`。
+- 查询成功后兼容读取：`data.list || data.items || []`，`data.total || list.length`。
+
+### 4. 改造用例列表表格字段展示
+- 表格字段：
+  - 项目名称：`project_name`
+  - 用例编号：`case_key`
+  - 用例标题：`title`
+  - 优先级：`priority`，格式化为 `P0/P1/P2/P3`
+  - 类型：`case_type`，格式化为 `功能/性能/安全/接口`
+  - 状态：`status`，格式化为 `正常/已废弃/评审中`
+  - 是否实现自动化：`is_auto`，格式化为 `已实现/未实现`
+  - 标签：`tags`，数组使用 `el-tag` 展示，字符串兜底直接展示
+  - 操作：编辑、评审、删除
+- 删除用例调用 `deleteCase(projectId, row.id)`。
+
+### 5. 补齐分页与交互逻辑
+- `CaseList.vue` 增加：
+  - `pageNo`
+  - `pageSize`
+  - `total`
+  - `moduleLoading`
+  - `moduleData`
+  - `moduleQueryForm`
+  - `moduleDialogVisible`
+  - `moduleSubmitting`
+  - `moduleForm`
+  - `moduleRules`
+- 增加方法：
+  - `fetchModuleList`
+  - `openModuleCreate`
+  - `resetModuleForm`
+  - `submitModuleCreate`
+  - `removeModule`
+  - `handleSizeChange`
+  - `handleCurrentChange`
+  - `formatPriority`
+  - `formatCaseType`
+  - `formatStatus`
+  - `formatIsAuto`
+  - `formatTags`
+
+### 6. 调整 `CaseEditor.vue` 提交字段
+- 详情加载：兼容后端 snake_case 返回字段，映射到表单：
+  - `module_id` -> `moduleId`
+  - `case_key` -> `caseKey`
+  - `case_type` -> `caseType`
+  - `is_auto` -> `isAuto`
+- 表单补充字段：
+  - 模块ID
+  - 用例编号
+  - 状态
+  - 是否自动化
+- 保存前构造 payload：
+  - `projectId`
+  - `moduleId`
+  - `caseKey`
+  - `title`
+  - `preconditions`
+  - `steps`
+  - `priority`
+  - `caseType`
+  - `tags`
+  - `status`
+  - `isAuto`
+- 新增调用 `createCase(projectId, payload)`。
+- 编辑调用 `updateCase(projectId, caseId, payload)`。
+
+### 7. 验证
+- 优先运行：`npm run build`。
+- 如构建耗时或环境缺依赖，至少做静态检查：确认 Vue 模板字段、方法引用、导入函数均存在。
+
+## 预期改动范围
+- 修改：`src/api/caseApi.js`
+- 修改：`src/components/TestPlatform/Case/CaseList.vue`
+- 修改：`src/components/TestPlatform/Case/CaseEditor.vue`
+- 不新增路由，不新增依赖。
+
+## 风险与兼容处理
+- 后端返回字段是 snake_case，前端提交字段是 camelCase，需要在编辑页做映射。
+- 若后端仍兼容旧字段，当前改造会优先使用新文档字段；删除/详情可保留少量兼容参数但不依赖旧字段。
+- 模块树接口可能返回树形结构，但当前需求是模块列表 table；表格直接展示返回 list，不做树形展开，除非后续明确需要树表。
--- a/Jenkins.txt
+++ b/Jenkins.txt
@@ -23,7 +23,7 @@ pipeline {
        DEPLOY_PORT = '22'
        DEPLOY_USER = 'user'
        CONTAINER_NAME = 'effekt-interface-frontend'
-        HOST_PORT = '8881'
+        HOST_PORT = '5010'
        CONTAINER_PORT = '80'
    }

--- a/index.html
+++ b/index.html
@@ -3,20 +3,40 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>造数管理系统</title>
+    <title>效能平台</title>
+    <link rel="stylesheet" href="https://unpkg.com/wangeditor@4.7.15/dist/css/style.css" />
    <style>
-      body{
+      html {
+        height: 100%;
+      }
+      body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
+        background: #070b16;
+        color: #dbeafe;
      }
-      html{
-        height: 100%;
+      body.theme-light {
+        background: #eef4ff;
+        color: #1f2937;
      }
    </style>
+    <script>
+      (function () {
+        var theme = 'dark';
+        try {
+          theme = localStorage.getItem('uiTheme') || 'dark';
+        } catch (e) {}
+        document.documentElement.className = theme === 'light' ? 'theme-light' : 'theme-dark';
+        document.addEventListener('DOMContentLoaded', function () {
+          document.body.classList.remove('theme-dark', 'theme-light');
+          document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark');
+        });
+      })();
+    </script>
  </head>
-  <body>
+  <body class="theme-dark">
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,10 +1,24 @@
+# 发版后避免浏览器长期使用旧 index 引用旧 js/css
 server {
    listen 80;
    server_name localhost;

+    client_max_body_size 100m;
+
    root /usr/share/nginx/html;
    index index.html;

+    location = /index.html {
+        add_header Cache-Control "no-store, no-cache, must-revalidate, max-age=0" always;
+        add_header Pragma "no-cache" always;
+    }
+
+    location ^~ /static/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable" always;
+        access_log off;
+    }
+
    location /it/api/ {
        proxy_pass http://172.18.0.1:5010;
        proxy_set_header Host $host;
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,13 +9,15 @@
      "version": "1.0.0",
      "dependencies": {
        "axios": "^0.19.2",
+        "echarts": "^4.9.0",
        "element-ui": "^2.13.1",
        "npm": "^6.14.5",
        "to": "^0.2.9",
        "update": "^0.7.4",
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
-        "vuex": "^3.3.0"
+        "vuex": "^3.3.0",
+        "wangeditor": "^4.7.15"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
@@ -59,6 +61,27 @@
        "npm": ">= 3.0.0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.29.2.tgz",
+      "integrity": "sha512-Lc94FOD5+0aXhdb0Tdg3RUtqT6yWbI/BbFWvlaSJ3gAb9Ks+99nHRDKADVqC37er4eCB0fHyWT+y+K3QOvJKbw==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js-pure": "^3.48.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@types/q": {
      "version": "1.5.2",
      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -113,15 +136,20 @@
      }
    },
    "node_modules/ajv": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
-        "co": "^4.6.0",
-        "fast-deep-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.3.0"
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
    "node_modules/ajv-keywords": {
@@ -5480,6 +5508,17 @@
      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
      "hasInstallScript": true
    },
+    "node_modules/core-js-pure": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.49.0.tgz",
+      "integrity": "sha512-XM4RFka59xATyJv/cS3O3Kml72hQXUeGRuuTmMYFxwzc9/7C8OYTaIR/Ji+Yt8DXzsFLNhat15cE/JP15HrCgw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/core-util-is": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -7465,6 +7504,15 @@
        "stream-shift": "^1.0.0"
      }
    },
+    "node_modules/echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "zrender": "4.3.2"
+      }
+    },
    "node_modules/ee-first": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8673,10 +8721,11 @@
      }
    },
    "node_modules/fast-deep-equal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
-      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
-      "dev": true
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/fast-json-stable-stringify": {
      "version": "2.1.0",
@@ -8778,30 +8827,6 @@
        "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
      }
    },
-    "node_modules/file-loader/node_modules/ajv": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
-      "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/file-loader/node_modules/fast-deep-equal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-      "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
-      "dev": true
-    },
-    "node_modules/file-loader/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
    "node_modules/file-loader/node_modules/schema-utils": {
      "version": "0.4.7",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -11214,10 +11239,11 @@
      "dev": true
    },
    "node_modules/json-schema-traverse": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
-      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
-      "dev": true
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
    },
    "node_modules/json-stable-stringify-without-jsonify": {
      "version": "1.0.1",
@@ -19350,30 +19376,6 @@
        "node": ">= 4"
      }
    },
-    "node_modules/postcss-loader/node_modules/ajv": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
-      "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/postcss-loader/node_modules/fast-deep-equal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-      "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
-      "dev": true
-    },
-    "node_modules/postcss-loader/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
    "node_modules/postcss-loader/node_modules/schema-utils": {
      "version": "0.4.7",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -22537,6 +22539,33 @@
        "node": ">= 4.3 < 5.0.0 || >= 5.10"
      }
    },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+      "integrity": "sha512-Ajr4IcMXq/2QmMkEmSvxqfLN5zGmJ92gHXAeOXq1OekoH2rfDNsgdDoL2f7QaRCy7G/E6TpxBVdRuNraMztGHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "co": "^4.6.0",
+        "fast-deep-equal": "^1.0.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.3.0"
+      }
+    },
+    "node_modules/schema-utils/node_modules/fast-deep-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "integrity": "sha512-fueX787WZKCV0Is4/T2cyAdM4+x1S3MXXOAhavE1ys/W42SHAPacLTQhucja22QBYrfGw50M2sRiXPtTGv9Ymw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+      "integrity": "sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -24311,6 +24340,12 @@
      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
      "dev": true
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
    "node_modules/tty-browserify": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@@ -24393,36 +24428,12 @@
        "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0"
      }
    },
-    "node_modules/uglifyjs-webpack-plugin/node_modules/ajv": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
-      "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
    "node_modules/uglifyjs-webpack-plugin/node_modules/commander": {
      "version": "2.13.0",
      "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
      "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==",
      "dev": true
    },
-    "node_modules/uglifyjs-webpack-plugin/node_modules/fast-deep-equal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-      "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
-      "dev": true
-    },
-    "node_modules/uglifyjs-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
    "node_modules/uglifyjs-webpack-plugin/node_modules/schema-utils": {
      "version": "0.4.7",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
@@ -25361,6 +25372,17 @@
        "vue": "^2.0.0"
      }
    },
+    "node_modules/wangeditor": {
+      "version": "4.7.15",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      }
+    },
    "node_modules/warning-symbol": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/warning-symbol/-/warning-symbol-0.1.0.tgz",
@@ -25764,24 +25786,6 @@
        "source-map": "~0.6.1"
      }
    },
-    "node_modules/webpack/node_modules/ajv": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
-      "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/webpack/node_modules/fast-deep-equal": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-      "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
-      "dev": true
-    },
    "node_modules/webpack/node_modules/has-flag": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -25791,12 +25795,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/webpack/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
    "node_modules/webpack/node_modules/source-map": {
      "version": "0.5.7",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -26137,6 +26135,12 @@
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
      "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==",
+      "license": "BSD-3-Clause"
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -11,13 +11,15 @@
  },
  "dependencies": {
    "axios": "^0.19.2",
+    "echarts": "^4.9.0",
    "element-ui": "^2.13.1",
    "npm": "^6.14.5",
    "to": "^0.2.9",
    "update": "^0.7.4",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
-    "vuex": "^3.3.0"
+    "vuex": "^3.3.0",
+    "wangeditor": "^4.7.15"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,11 +5,12 @@
 </template>

 <script>
-import { getRoleList } from '@/api/rbacApi'
+import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'

 export default {
  name: 'App',
  mounted() {
+    this.applyTheme()
    const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
    const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
    if (authUser) {
@@ -20,14 +21,18 @@ export default {
    }
  },
  methods: {
+    applyTheme() {
+      const theme = localStorage.getItem('uiTheme') || 'dark'
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
+    },
    loadUserMenus(authUser) {
      const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
      if (!roleId) {
        return
      }
      getRoleList({ roleId }).then(res => {
-        const menus = res && Array.isArray(res.data) ? res.data : []
-        this.$store.commit('SetUserMenus', menus)
+        this.$store.commit('SetUserMenus', parseMenusFromRoleListResponse(res))
      }).catch(() => {})
    }
  }
@@ -35,7 +40,465 @@ export default {
 </script>

 <style>
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #070b16;
+  color: #dbeafe;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
+}
+
 #app{
  height: 100%;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button,
+.el-button,
+.el-link,
+.el-menu-item,
+.el-submenu__title {
+  cursor: pointer;
+}
+
+.el-card {
+  border-color: rgba(148, 163, 184, 0.2);
+  background: #111827;
+  color: #e5e7eb;
+}
+
+.el-table,
+.el-table__expanded-cell {
+  background-color: #111827 !important;
+  color: #e5e7eb !important;
+}
+
+.el-table th,
+.el-table tr,
+.el-table td {
+  background-color: #111827 !important;
+  color: #e5e7eb !important;
+}
+
+.el-table th,
+.el-table thead,
+.el-table__header-wrapper th,
+.el-table__fixed-header-wrapper th {
+  background: #1f2937 !important;
+  color: #f8fafc !important;
+  font-weight: 700;
+}
+
+.el-table .cell,
+.el-table th > .cell,
+.el-table__body-wrapper,
+.el-table__fixed-body-wrapper {
+  color: inherit !important;
+}
+
+.el-table td,
+.el-table th.is-leaf {
+  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
+}
+
+.el-table--border,
+.el-table--group,
+.el-table--border td,
+.el-table--border th,
+.el-table__fixed-right-patch {
+  border-color: rgba(148, 163, 184, 0.18) !important;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #162033 !important;
+  color: #e5e7eb !important;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td,
+.el-table__body tr.hover-row > td,
+.el-table__body tr.hover-row.current-row > td,
+.el-table__body tr.hover-row.el-table__row--striped > td,
+.el-table__body tr.hover-row.el-table__row--striped.current-row > td {
+  background-color: #233149 !important;
+  color: #f8fafc !important;
+}
+
+.el-table__body tr.current-row > td,
+.el-table__body tr.current-row:hover > td {
+  background-color: rgba(56, 189, 248, 0.16) !important;
+  color: #f8fafc !important;
+}
+
+.el-table__fixed,
+.el-table__fixed-right,
+.el-table__fixed::before,
+.el-table__fixed-right::before {
+  background-color: #111827 !important;
+}
+
+.el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+  background-color: rgba(148, 163, 184, 0.18) !important;
+}
+
+.el-form-item__label,
+.el-checkbox,
+.el-radio,
+.el-dialog__body,
+.el-pagination,
+.el-pagination button,
+.el-pagination span:not([class*=suffix]),
+.el-select-dropdown__item,
+.el-dropdown-menu__item {
+  color: #dbeafe;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-select .el-input__inner,
+.el-date-editor .el-input__inner {
+  background-color: #0f172a;
+  border-color: rgba(148, 163, 184, 0.28);
+  color: #f8fafc;
+}
+
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: #64748b;
+}
+
+.el-input__inner:hover,
+.el-textarea__inner:hover,
+.el-input__inner:focus,
+.el-textarea__inner:focus {
+  border-color: #38bdf8;
+}
+
+.el-dialog,
+.el-drawer,
+.el-message-box {
+  background: #111827;
+  color: #e5e7eb;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+}
+
+.el-dialog__title,
+.el-message-box__title {
+  color: #f8fafc;
+}
+
+.el-dialog__header,
+.el-dialog__footer,
+.el-message-box__header,
+.el-message-box__content {
+  border-color: rgba(148, 163, 184, 0.16);
+}
+
+.el-select-dropdown,
+.el-dropdown-menu,
+.el-picker-panel {
+  background: #111827;
+  border-color: rgba(148, 163, 184, 0.22);
+  color: #e5e7eb;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover,
+.el-dropdown-menu__item:hover {
+  background-color: #1e293b;
+  color: #f8fafc;
+}
+
+.el-select-dropdown__item.selected {
+  color: #38bdf8;
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next,
+.el-pager li {
+  background: #111827;
+  color: #dbeafe;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.el-pager li.active {
+  color: #38bdf8;
+  border-color: rgba(56, 189, 248, 0.5);
+}
+
+.el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
+  border-color: rgba(56, 189, 248, 0.28);
+  background: rgba(56, 189, 248, 0.12);
+  color: #bae6fd;
+}
+
+.el-tag.el-tag--success {
+  border-color: rgba(103, 194, 58, 0.45);
+  background: rgba(103, 194, 58, 0.16);
+  color: #86efac;
+}
+
+.el-tag.el-tag--warning {
+  border-color: rgba(230, 162, 60, 0.45);
+  background: rgba(230, 162, 60, 0.16);
+  color: #fcd34d;
+}
+
+.el-tag.el-tag--danger {
+  border-color: rgba(245, 108, 108, 0.45);
+  background: rgba(245, 108, 108, 0.16);
+  color: #fca5a5;
+}
+
+.el-tag.el-tag--info {
+  border-color: rgba(148, 163, 184, 0.35);
+  background: rgba(148, 163, 184, 0.14);
+  color: #cbd5e1;
+}
+
+.el-card__header {
+  background: #162033;
+  border-bottom-color: rgba(148, 163, 184, 0.18);
+  color: #f8fafc;
+}
+
+.el-tabs__item {
+  color: #cbd5e1;
+}
+
+.el-tabs__item:hover,
+.el-tabs__item.is-active {
+  color: #38bdf8;
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: rgba(148, 163, 184, 0.18);
+}
+
+.el-popover,
+.el-tooltip__popper.is-light {
+  background: #111827;
+  border-color: rgba(148, 163, 184, 0.22);
+  color: #e5e7eb;
+}
+
+.el-tree,
+.el-tree-node__content {
+  background: transparent;
+  color: #e5e7eb;
+}
+
+.el-tree-node__content:hover,
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #1e293b;
+  color: #f8fafc;
+}
+
+.el-loading-mask {
+  background-color: rgba(15, 23, 42, 0.72);
+}
+
+body.theme-light {
+  background: #eef4ff;
+  color: #1f2937;
+}
+
+body.theme-light .el-card {
+  border-color: #dbe5f3;
+  background: #ffffff;
+  color: #1f2937;
+  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
+}
+
+body.theme-light .el-table,
+body.theme-light .el-table__expanded-cell {
+  background-color: #ffffff !important;
+  color: #1f2937 !important;
+}
+
+body.theme-light .el-table th,
+body.theme-light .el-table tr,
+body.theme-light .el-table td {
+  background-color: #ffffff !important;
+  color: #1f2937 !important;
+}
+
+body.theme-light .el-table th,
+body.theme-light .el-table thead,
+body.theme-light .el-table__header-wrapper th,
+body.theme-light .el-table__fixed-header-wrapper th {
+  background: #f1f6ff !important;
+  color: #0f172a !important;
+}
+
+body.theme-light .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #f8fbff !important;
+  color: #1f2937 !important;
+}
+
+body.theme-light .el-table--enable-row-hover .el-table__body tr:hover > td,
+body.theme-light .el-table__body tr.hover-row > td,
+body.theme-light .el-table__body tr.hover-row.current-row > td,
+body.theme-light .el-table__body tr.hover-row.el-table__row--striped > td,
+body.theme-light .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
+  background-color: #eaf2ff !important;
+  color: #0f172a !important;
+}
+
+body.theme-light .el-table__body tr.current-row > td,
+body.theme-light .el-table__body tr.current-row:hover > td {
+  background-color: #dbeafe !important;
+  color: #0f172a !important;
+}
+
+body.theme-light .el-table td,
+body.theme-light .el-table th.is-leaf,
+body.theme-light .el-table--border,
+body.theme-light .el-table--group,
+body.theme-light .el-table--border td,
+body.theme-light .el-table--border th,
+body.theme-light .el-table__fixed-right-patch {
+  border-color: #e2e8f0 !important;
+}
+
+body.theme-light .el-table__fixed,
+body.theme-light .el-table__fixed-right,
+body.theme-light .el-table__fixed::before,
+body.theme-light .el-table__fixed-right::before {
+  background-color: #ffffff !important;
+}
+
+body.theme-light .el-table::before,
+body.theme-light .el-table--group::after,
+body.theme-light .el-table--border::after {
+  background-color: #e2e8f0 !important;
+}
+
+body.theme-light .el-form-item__label,
+body.theme-light .el-checkbox,
+body.theme-light .el-radio,
+body.theme-light .el-dialog__body,
+body.theme-light .el-pagination,
+body.theme-light .el-pagination button,
+body.theme-light .el-pagination span:not([class*=suffix]),
+body.theme-light .el-select-dropdown__item,
+body.theme-light .el-dropdown-menu__item {
+  color: #334155;
+}
+
+body.theme-light .el-input__inner,
+body.theme-light .el-textarea__inner,
+body.theme-light .el-select .el-input__inner,
+body.theme-light .el-date-editor .el-input__inner {
+  background-color: #ffffff;
+  border-color: #d8e1ef;
+  color: #0f172a;
+}
+
+body.theme-light .el-input__inner::placeholder,
+body.theme-light .el-textarea__inner::placeholder {
+  color: #94a3b8;
+}
+
+body.theme-light .el-dialog,
+body.theme-light .el-drawer,
+body.theme-light .el-message-box,
+body.theme-light .el-select-dropdown,
+body.theme-light .el-dropdown-menu,
+body.theme-light .el-picker-panel,
+body.theme-light .el-popover,
+body.theme-light .el-tooltip__popper.is-light {
+  background: #ffffff;
+  border-color: #dbe5f3;
+  color: #1f2937;
+}
+
+body.theme-light .el-dialog__title,
+body.theme-light .el-message-box__title,
+body.theme-light .el-card__header {
+  color: #0f172a;
+}
+
+body.theme-light .el-card__header {
+  background: #f8fbff;
+  border-bottom-color: #e2e8f0;
+}
+
+body.theme-light .el-select-dropdown__item.hover,
+body.theme-light .el-select-dropdown__item:hover,
+body.theme-light .el-dropdown-menu__item:hover,
+body.theme-light .el-tree-node__content:hover,
+body.theme-light .el-tree-node:focus > .el-tree-node__content {
+  background-color: #eaf2ff;
+  color: #0f172a;
+}
+
+body.theme-light .el-pagination .btn-prev,
+body.theme-light .el-pagination .btn-next,
+body.theme-light .el-pager li {
+  background: #ffffff;
+  color: #334155;
+  border-color: #e2e8f0;
+}
+
+body.theme-light .el-tabs__item {
+  color: #64748b;
+}
+
+body.theme-light .el-tabs__item:hover,
+body.theme-light .el-tabs__item.is-active,
+body.theme-light .el-select-dropdown__item.selected,
+body.theme-light .el-pager li.active {
+  color: #2563eb;
+}
+
+body.theme-light .el-tabs__nav-wrap::after {
+  background-color: #e2e8f0;
+}
+
+body.theme-light .el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+body.theme-light .el-tag.el-tag--success {
+  border-color: #e1f3d8;
+  background: #f0f9eb;
+  color: #67c23a;
+}
+
+body.theme-light .el-tag.el-tag--warning {
+  border-color: #faecd8;
+  background: #fdf6ec;
+  color: #e6a23c;
+}
+
+body.theme-light .el-tag.el-tag--danger {
+  border-color: #fde2e2;
+  background: #fef0f0;
+  color: #f56c6c;
+}
+
+body.theme-light .el-tag.el-tag--info {
+  border-color: #e9e9eb;
+  background: #f4f4f5;
+  color: #909399;
+}
+
+body.theme-light .el-tree,
+body.theme-light .el-tree-node__content {
+  color: #334155;
+}
+
+body.theme-light .el-loading-mask {
+  background-color: rgba(248, 250, 252, 0.72);
 }
 </style>
--- a/src/api/CreateDtapi.js
+++ b/src/api/CreateDtapi.js
@@ -49,7 +49,7 @@ export function ItApiDelete(data) {
 //对方法的请求参数进行新增获取修改
 export function DataAdd(data) {
  return request({
-    url: '/create/data/info/add',
+    url: '/data-tools/db-builder/info/add',
    method: 'post',
    data
  })
@@ -58,7 +58,7 @@ export function DataAdd(data) {
 //刪除造数基本信息
 export function DataDelete(data) {
  return request({
-    url: '/create/data/detail/delete',
+    url: '/data-tools/db-builder/detail/delete',
    method: 'post',
    data
  })
@@ -67,7 +67,7 @@ export function DataDelete(data) {
 //接口请求参数列表页查询
 export function DataQuery(data) {
  return request({
-    url: '/create/data/info/page',
+    url: '/data-tools/db-builder/info/page',
    method: 'post',
    data
  })
@@ -76,7 +76,7 @@ export function DataQuery(data) {
 //返回待编辑造数请求信息 (详情页)
 export function DataAdvance(data) {
  return request({
-    url: '/create/data/info/getAdvance',
+    url: '/data-tools/db-builder/info/getAdvance',
    method: 'post',
    data
  })
@@ -103,7 +103,7 @@ export function getGitPull(data) {
 //刪除造数请求参数信息
 export function InfoDelete(data) {
  return request({
-    url: '/create/data/info/delete',
+    url: '/data-tools/db-builder/info/delete',
    method: 'post',
    data
  })
@@ -112,7 +112,7 @@ export function InfoDelete(data) {
 //列表查询造数请求参数信息
 export function InfoQuery(data) {
  return request({
-    url: '/create/data/detail/page',
+    url: '/data-tools/db-builder/detail/page',
    method: 'post',
    data
  })
@@ -121,7 +121,7 @@ export function InfoQuery(data) {
 //查找出全部的可用方法与描述进行录库
 export function InfoScrapy(data) {
  return request({
-    url: '/create/data/detail/scrapy',
+    url: '/data-tools/db-builder/detail/scrapy',
    method: 'post',
    data
  })
@@ -130,7 +130,7 @@ export function InfoScrapy(data) {
 //运行造数
 export function RunCreateData(data) {
  return request({
-    url: '/create/data/run',
+    url: '/data-tools/db-builder/run',
    method: 'post',
    data
  })
@@ -140,7 +140,7 @@ export function RunCreateData(data) {
 //造数结果列表页查询
 export function ResultQuery(data) {
  return request({
-    url: '/create/data/result/page',
+    url: '/data-tools/db-builder/result/page',
    method: 'post',
    data
  })
@@ -149,7 +149,7 @@ export function ResultQuery(data) {
 //返回待编辑造数结果 (详情页)
 export function ResultAdvance(data) {
  return request({
-    url: '/create/data/result/getAdvance',
+    url: '/data-tools/db-builder/result/getAdvance',
    method: 'post',
    data
  })
@@ -177,7 +177,7 @@ export function DictQuery(data) {
 //抓取入库
 export function ScrapyDetail(data) {
  return request({
-    url: '/create/data/detail/scrapy',
+    url: '/data-tools/db-builder/detail/scrapy',
    method: 'post',
    data
  })
--- a/src/api/automationApi.js
+++ b/src/api/automationApi.js
@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+
+/** POST /automation/plan/run — 文档字段为 camelCase */
+export function runAutomationPlan(data) {
+  return request({
+    url: '/automation/plan/run',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+/** POST /automation/case/run */
+export function runAutomationCase(data) {
+  return request({
+    url: '/automation/case/run',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+/** GET /automation/execution/list */
+export function getAutomationExecutionList(params) {
+  return request({
+    url: '/automation/execution/list',
+    method: 'get',
+    params: params || {}
+  })
+}
+
+/** GET /automation/execution/detail */
+export function getAutomationExecutionDetail(executionId) {
+  return request({
+    url: '/automation/execution/detail',
+    method: 'get',
+    params: { executionId }
+  })
+}
+
+/** GET /automation/execution/case/list */
+export function getAutomationExecutionCaseList(params) {
+  return request({
+    url: '/automation/execution/case/list',
+    method: 'get',
+    params: params || {}
+  })
+}
+
+/** POST /automation/execution/poll — body 可选 { executionId }，不传则轮询所有待执行任务 */
+export function postAutomationExecutionPoll(data) {
+  return request({
+    url: '/automation/execution/poll',
+    method: 'post',
+    data: data || {}
+  })
+}
--- a/src/api/bugApi.js
+++ b/src/api/bugApi.js
@@ -0,0 +1,80 @@
+import request from '@/utils/request'
+
+export function getBugList(params) {
+  return request({
+    url: '/bug/list',
+    method: 'get',
+    params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
+  })
+}
+
+export function getBugDetail(bugId) {
+  return request({
+    url: '/bug/detail',
+    method: 'get',
+    params: {
+      bugId,
+      id: bugId
+    }
+  })
+}
+
+export function createBug(data) {
+  return request({
+    url: '/bug/create',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+export function updateBug(data) {
+  return request({
+    url: '/bug/update',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+export function deleteBug(data) {
+  return request({
+    url: '/bug/delete',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+export function addBugComment(data) {
+  return request({
+    url: '/bug/comment/add',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+/** Bug 操作历史：POST /bug/history/add */
+export function addBugHistory(data) {
+  return request({
+    url: '/bug/history/add',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+export function getBugStats(params) {
+  return request({
+    url: '/bug/stats',
+    method: 'get',
+    params: params || {}
+  })
+}
+
+/** 复现步骤截图：POST /bug/upload，表单字段 file；成功返回 data.url */
+export function uploadBugStepImage(file) {
+  const formData = new FormData()
+  formData.append('file', file)
+  return request({
+    url: '/bug/upload',
+    method: 'post',
+    data: formData
+  })
+}
--- a/src/api/caseApi.js
+++ b/src/api/caseApi.js
@@ -33,10 +33,14 @@ export function deleteModule(data) {
 }

 export function getCaseList(projectId, params) {
+  const query = Object.assign({}, params || {})
+  if (projectId !== undefined && projectId !== null && projectId !== '') {
+    query.projectId = projectId
+  }
  return request({
    url: '/case/list',
    method: 'get',
-    params: Object.assign({ project_id: projectId }, params || {})
+    params: query
  })
 }

@@ -45,8 +49,8 @@ export function getCaseDetail(projectId, caseId) {
    url: '/case/detail',
    method: 'get',
    params: {
-      project_id: projectId,
-      id: caseId
+      projectId,
+      caseId
    }
  })
 }
@@ -55,7 +59,7 @@ export function createCase(projectId, data) {
  return request({
    url: '/case/create',
    method: 'post',
-    data: Object.assign({ project_id: projectId }, data)
+    data: Object.assign({ projectId }, data)
  })
 }

@@ -63,7 +67,7 @@ export function updateCase(projectId, caseId, data) {
  return request({
    url: '/case/update',
    method: 'post',
-    data: Object.assign({ project_id: projectId, id: caseId }, data)
+    data: Object.assign({ projectId, caseId }, data)
  })
 }

@@ -72,12 +76,38 @@ export function deleteCase(projectId, caseId) {
    url: '/case/delete',
    method: 'post',
    data: {
-      project_id: projectId,
-      id: caseId
+      projectId,
+      caseId
    }
  })
 }

+/** 恢复状态为 0 的用例为正常（1），POST body: { caseIds: number[] } */
+export function restoreCases(caseIds) {
+  const raw = Array.isArray(caseIds) ? caseIds : [caseIds]
+  const caseIdsNorm = raw
+    .map(id => Number(id))
+    .filter(id => Number.isFinite(id) && id > 0)
+  return request({
+    url: '/case/restore',
+    method: 'post',
+    data: { caseIds: caseIdsNorm }
+  })
+}
+
+/**
+ * 根据手工用例生成 UI / 接口自动化脚本（字段均为驼峰）。
+ * 典型 body：projectId, caseId, automationType, prompt, caseKey, moduleName, productName,
+ * projectName, steps, expectedResults
+ */
+export function generateCaseAutomation(data) {
+  return request({
+    url: '/case/generate-automation',
+    method: 'post',
+    data
+  })
+}
+
 export function createCaseSnapshot(projectId, caseId) {
  return request({
    url: '/case/snapshot/create',
@@ -120,3 +150,24 @@ export function getCaseReviewList(projectId, params) {
    params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
  })
 }
+
+// 用例导入
+export function downloadCaseImportTemplate() {
+  return request({
+    url: '/import/template',
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+export function importCaseExcel(projectId, file) {
+  const formData = new FormData()
+  // 后端从 request.form.get('projectId') 读取
+  formData.append('projectId', projectId)
+  formData.append('file', file)
+  return request({
+    url: '/case/import',
+    method: 'post',
+    data: formData
+  })
+}
--- a/src/api/documentApi.js
+++ b/src/api/documentApi.js
@@ -0,0 +1,107 @@
+import request from '@/utils/request'
+
+/** 文档列表 */
+export function getDocumentList(params) {
+  return request({
+    url: '/document/list',
+    method: 'get',
+    params
+  })
+}
+
+/** 文档详情 */
+export function getDocumentDetail(params) {
+  return request({
+    url: '/document/detail',
+    method: 'get',
+    params
+  })
+}
+
+/** 上传 PDF（multipart，单文件一次请求） */
+export function uploadDocumentPdf({ file, productId, projectId, createdBy }) {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('productId', productId)
+  formData.append('projectId', projectId)
+  if (createdBy != null && createdBy !== '') {
+    formData.append('createdBy', createdBy)
+  }
+  return request({
+    url: '/document/upload',
+    method: 'post',
+    data: formData
+  })
+}
+
+/** 创建文档 */
+export function createDocument(data) {
+  return request({
+    url: '/document/create',
+    method: 'post',
+    data
+  })
+}
+
+/** 更新文档 */
+export function updateDocument(data) {
+  return request({
+    url: '/document/update',
+    method: 'post',
+    data
+  })
+}
+
+/** 删除文档 */
+export function deleteDocument(data) {
+  return request({
+    url: '/document/delete',
+    method: 'post',
+    data
+  })
+}
+
+/** 刷新飞书文档 */
+export function refreshDocument(data) {
+  return request({
+    url: '/document/refresh',
+    method: 'post',
+    data
+  })
+}
+
+/** 生成测试用例（预览） */
+export function generateDocumentCases(data) {
+  return request({
+    url: '/document/generate-cases',
+    method: 'post',
+    data
+  })
+}
+
+/** 模块匹配 */
+export function matchDocumentModules(data) {
+  return request({
+    url: '/document/match-modules',
+    method: 'post',
+    data
+  })
+}
+
+/** 导入测试用例 */
+export function importDocumentCases(data) {
+  return request({
+    url: '/document/import-cases',
+    method: 'post',
+    data
+  })
+}
+
+/** 批量创建模块 */
+export function batchCreateDocumentModules(data) {
+  return request({
+    url: '/document/batch-create-modules',
+    method: 'post',
+    data
+  })
+}
--- a/src/api/planApi.js
+++ b/src/api/planApi.js
@@ -24,13 +24,13 @@ export function updatePlan(projectId, planId, data) {
  })
 }

-export function deletePlan(projectId, planId) {
+/** POST /plan/delete，body 传 planId */
+export function deletePlan(planId) {
  return request({
    url: '/plan/delete',
    method: 'post',
    data: {
-      project_id: projectId,
-      id: planId
+      planId
    }
  })
 }
--- a/src/api/projectApi.js
+++ b/src/api/projectApi.js
@@ -89,3 +89,53 @@ export function deleteEnvironment(data) {
    data
  })
 }
+
+/** 项目 Webhook 配置 */
+export function getProjectHookList(params) {
+  return request({
+    url: '/project/hook/list',
+    method: 'get',
+    params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
+  })
+}
+
+export function getProjectHookDetail(hookId) {
+  return request({
+    url: '/project/hook/detail',
+    method: 'get',
+    params: { hookId }
+  })
+}
+
+export function createProjectHook(data) {
+  return request({
+    url: '/project/hook/create',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+export function updateProjectHook(data) {
+  return request({
+    url: '/project/hook/update',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+export function deleteProjectHook(data) {
+  return request({
+    url: '/project/hook/delete',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+/** 按项目发送 Webhook 测试/通知消息 */
+export function sendProjectHookMessage(data) {
+  return request({
+    url: '/project/hook/send',
+    method: 'post',
+    data: data || {}
+  })
+}
--- a/src/api/rbacApi.js
+++ b/src/api/rbacApi.js
@@ -8,6 +8,21 @@ export function getRoleList(params) {
  })
 }

+/** 从 /role/list 响应中取出菜单树（兼容多种 data 形态） */
+export function parseMenusFromRoleListResponse(res) {
+  if (!res) return []
+  const raw = res.data !== undefined ? res.data : res
+  if (Array.isArray(raw)) return raw
+  if (raw && typeof raw === 'object') {
+    if (Array.isArray(raw.menus)) return raw.menus
+    if (Array.isArray(raw.menuList)) return raw.menuList
+    if (Array.isArray(raw.list)) return raw.list
+    if (Array.isArray(raw.items)) return raw.items
+    if (Array.isArray(raw.records)) return raw.records
+  }
+  return []
+}
+
 export function getRolePageList(params) {
  return request({
    url: '/role/page/list',
@@ -167,3 +182,55 @@ export function deleteMenu(data) {
    data
  })
 }
+
+export function getPermissionList(params) {
+  return request({
+    url: '/permission/list',
+    method: 'get',
+    params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
+  })
+}
+
+export function getPermissionDetail(permissionId) {
+  return request({
+    url: '/permission/detail',
+    method: 'get',
+    params: {
+      permission_id: permissionId,
+      permissionId: permissionId,
+      id: permissionId
+    }
+  })
+}
+
+export function createPermission(data) {
+  return request({
+    url: '/permission/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updatePermission(data) {
+  return request({
+    url: '/permission/update',
+    method: 'post',
+    data
+  })
+}
+
+export function deletePermission(data) {
+  return request({
+    url: '/permission/delete',
+    method: 'post',
+    data
+  })
+}
+
+export function assignRolePermissions(data) {
+  return request({
+    url: '/role/permission/assign',
+    method: 'post',
+    data
+  })
+}
--- a/src/api/reportApi.js
+++ b/src/api/reportApi.js
@@ -1,28 +1,37 @@
 import request from '@/utils/request'

-export function getReportList(projectId, params) {
+export function getReportList(params) {
  return request({
    url: '/report/list',
    method: 'get',
-    params: Object.assign({ project_id: projectId, pageNo: 1, pageSize: 10 }, params || {})
+    params: Object.assign({ pageNo: 1, pageSize: 20 }, params || {})
  })
 }

-export function generateReport(projectId, data) {
+export function generateReport(data) {
  return request({
    url: '/report/generate',
    method: 'post',
-    data: Object.assign({ project_id: projectId }, data)
+    data: data || {}
  })
 }

-export function getReportDetail(projectId, reportId) {
+export function getReportDetail(reportId, projectId) {
  return request({
    url: '/report/detail',
    method: 'get',
-    params: {
-      project_id: projectId,
-      id: reportId
-    }
+    params: Object.assign(
+      {
+        reportId: reportId,
+        report_id: reportId,
+        id: reportId
+      },
+      projectId
+        ? {
+            projectId: projectId,
+            project_id: projectId
+          }
+        : {}
+    )
  })
 }
--- a/src/api/skillRuleApi.js
+++ b/src/api/skillRuleApi.js
@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+/** Skill */
+export function getSkillList(params) {
+  return request({ url: '/skill/list', method: 'get', params: params || {} })
+}
+
+export function getSkillDetail(skillId) {
+  return request({ url: '/skill/detail', method: 'get', params: { skillId } })
+}
+
+export function createSkill(data) {
+  return request({ url: '/skill/create', method: 'post', data })
+}
+
+export function updateSkill(data) {
+  return request({ url: '/skill/update', method: 'post', data })
+}
+
+export function deleteSkill(skillId) {
+  return request({ url: '/skill/delete', method: 'post', data: { skillId } })
+}
+
+/** Business rule */
+export function getBusinessRuleList(params) {
+  return request({ url: '/business-rule/list', method: 'get', params: params || {} })
+}
+
+export function getBusinessRuleDetail(ruleId) {
+  return request({ url: '/business-rule/detail', method: 'get', params: { ruleId } })
+}
+
+export function createBusinessRule(data) {
+  return request({ url: '/business-rule/create', method: 'post', data })
+}
+
+export function updateBusinessRule(data) {
+  return request({ url: '/business-rule/update', method: 'post', data })
+}
+
+export function deleteBusinessRule(ruleId) {
+  return request({ url: '/business-rule/delete', method: 'post', data: { ruleId } })
+}
--- a/src/components/Bug/BugDetail.vue
+++ b/src/components/Bug/BugDetail.vue
--- a/src/components/Bug/BugEditor.vue
+++ b/src/components/Bug/BugEditor.vue
@@ -0,0 +1,815 @@
+<template>
+  <div class="page-wrap">
+    <page-section :title="isCreate ? '新建 Bug' : '编辑 Bug'">
+      <template slot="extra">
+        <el-button size="small" @click="goBack">返回</el-button>
+      </template>
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" size="small" class="bug-form">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model.trim="form.title" maxlength="200" show-word-limit placeholder="Bug 标题" />
+        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item label="产品" prop="productId">
+              <el-select v-model="form.productId" filterable placeholder="请选择产品" style="width: 100%;" @change="onProductChange" @focus="loadProductOptions">
+                <el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="项目" prop="projectId">
+              <el-select v-model="form.projectId" filterable placeholder="请选择项目" style="width: 100%;" :disabled="!form.productId" @change="onProjectChange">
+                <el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="模块" prop="moduleId">
+              <el-select v-model="form.moduleId" filterable placeholder="请选择模块" style="width: 100%;" :disabled="!form.projectId">
+                <el-option v-for="m in flatModules" :key="m.id" :label="m.name" :value="m.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item label="类型" prop="bugType">
+              <el-select v-model="form.bugType" placeholder="类型" style="width: 100%;">
+                <el-option v-for="(label, key) in bugTypeOptions" :key="key" :label="label" :value="Number(key)" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="严重程度" prop="severity">
+              <el-select v-model="form.severity" placeholder="严重程度" style="width: 100%;">
+                <el-option v-for="(label, key) in severityOptions" :key="key" :label="label" :value="Number(key)" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="优先级" prop="priority">
+              <el-select v-model="form.priority" placeholder="优先级" style="width: 100%;">
+                <el-option v-for="(label, key) in priorityOptions" :key="key" :label="label" :value="Number(key)" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item label="复现率" prop="reproduceRate">
+              <el-select v-model="form.reproduceRate" placeholder="请选择复现率" style="width: 100%;">
+                <el-option v-for="(label, key) in reproduceRateOptions" :key="key" :label="label" :value="Number(key)" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col v-if="!isCreate" :span="8">
+            <el-form-item label="状态">
+              <el-select v-model="form.status" clearable placeholder="状态" style="width: 100%;">
+                <el-option v-for="(label, key) in statusOptions" :key="key" :label="label" :value="Number(key)" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="isCreate ? 12 : 8">
+            <el-form-item label="创建人" prop="reporterId">
+              <el-input
+                v-if="isCreate"
+                class="bug-creator-readonly"
+                :value="defaultCreatorDisplayName"
+                readonly
+                placeholder="当前登录用户"
+                style="width: 100%;" />
+              <el-select
+                v-else
+                ref="reporterSelect"
+                v-model="form.reporterId"
+                filterable
+                placeholder="请先选择项目"
+                style="width: 100%;"
+                popper-class="bug-editor-reporter-members"
+                :disabled="!form.projectId"
+                @visible-change="onReporterDropdownVisible">
+                <el-option v-for="u in reporterMemberOptions" :key="'r-' + u.id" :label="u.name" :value="u.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="isCreate ? 12 : 8">
+            <el-form-item label="当前指派" prop="assigneeId">
+              <el-select
+                ref="assigneeSelect"
+                v-model="form.assigneeId"
+                filterable
+                placeholder="请选择当前指派"
+                style="width: 100%;"
+                popper-class="bug-editor-assignee-members"
+                :disabled="!form.projectId"
+                @visible-change="onAssigneeDropdownVisible">
+                <el-option v-for="u in assigneeMemberOptions" :key="'a-' + u.id" :label="u.name" :value="u.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16">
+          <el-col :span="8">
+            <el-form-item label="环境">
+              <el-input v-model.trim="form.environment" maxlength="64" placeholder="如 st / pre" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联用例">
+              <el-input v-model="form.caseId" placeholder="选填，用例 ID" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="关联计划">
+              <el-input v-model="form.planId" placeholder="选填，计划 ID" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="复现步骤">
+          <bug-steps-rich-editor :key="stepsEditorKey" v-model="form.steps" />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="goBack">取消</el-button>
+          <el-button type="primary" :loading="saving" @click="submit">{{ isCreate ? '创建' : '保存' }}</el-button>
+        </el-form-item>
+      </el-form>
+    </page-section>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import BugStepsRichEditor from '@/components/Bug/BugStepsRichEditor.vue'
+import { getBugDetail, createBug, updateBug } from '@/api/bugApi'
+import { recordBugHistory, recordBugEditDiff, buildBugEditBaseline } from '@/utils/bugHistory'
+import { legacyStepsToEditorHtml, BUG_STEPS_DEFAULT_HTML } from '@/utils/bugStepsFormat'
+import { getProductList } from '@/api/productApi'
+import { getProjectList, getProjectMembers } from '@/api/projectApi'
+import { getModuleTree } from '@/api/caseApi'
+import { BUG_TYPE_MAP, SEVERITY_MAP, PRIORITY_MAP, STATUS_MAP, REPRODUCE_RATE_MAP } from '@/utils/bugMaps'
+
+export default {
+  name: 'BugEditor',
+  components: { PageSection, BugStepsRichEditor },
+  data() {
+    return {
+      saving: false,
+      bugId: '',
+      /** 新建页复制带入后递增，用于富文本编辑器 key 强制刷新 */
+      editorNonce: 0,
+      productOptions: [],
+      projectOptions: [],
+      moduleTree: [],
+      memberPageSize: 10,
+      reporterMemberOptions: [],
+      reporterMemberPageNo: 0,
+      reporterMemberNoMore: false,
+      reporterMemberLoading: false,
+      assigneeMemberOptions: [],
+      assigneeMemberPageNo: 0,
+      assigneeMemberNoMore: false,
+      assigneeMemberLoading: false,
+      assigneeExtraLabel: '',
+      editBaseline: null,
+      form: {
+        title: '',
+        bugType: 1,
+        severity: 2,
+        priority: 2,
+        status: '',
+        productId: '',
+        projectId: '',
+        moduleId: '',
+        caseId: '',
+        planId: '',
+        environment: '',
+        steps: BUG_STEPS_DEFAULT_HTML,
+        reporterId: '',
+        assigneeId: '',
+        reproduceRate: 1
+      },
+      rules: {
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        reproduceRate: [{ required: true, message: '请选择复现率', trigger: 'change' }],
+        productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
+        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
+        moduleId: [{ required: true, message: '请选择模块', trigger: 'change' }],
+        assigneeId: [{ required: true, message: '请选择当前指派', trigger: 'change' }],
+        reporterId: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              if (this.isCreate) {
+                const uid = this.defaultReporterId()
+                if (uid === '' || uid === undefined || uid === null) {
+                  callback(new Error('未获取到当前登录用户，请重新登录'))
+                } else {
+                  callback()
+                }
+                return
+              }
+              if (value === '' || value === undefined || value === null) {
+                callback(new Error('请选择创建人'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'change'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    isCreate() {
+      return (this.$route.path || '').indexOf('/bug/create') !== -1
+    },
+    bugTypeOptions() {
+      return BUG_TYPE_MAP
+    },
+    severityOptions() {
+      return SEVERITY_MAP
+    },
+    priorityOptions() {
+      return PRIORITY_MAP
+    },
+    statusOptions() {
+      return STATUS_MAP
+    },
+    reproduceRateOptions() {
+      return REPRODUCE_RATE_MAP
+    },
+    flatModules() {
+      const out = []
+      const walk = (nodes, prefix) => {
+        ;(nodes || []).forEach(n => {
+          const name = prefix ? `${prefix} / ${n.name}` : n.name
+          out.push({ id: n.id, name })
+          const ch = n.children || n.child_list || n.childList || []
+          if (ch.length) walk(ch, name)
+        })
+      }
+      walk(this.moduleTree, '')
+      return out
+    },
+    stepsEditorKey() {
+      if (this.isCreate) {
+        return 'create-' + String(this.editorNonce)
+      }
+      return 'edit-' + String(this.bugId || '0')
+    },
+    currentUser() {
+      return this.$store.state.currentUser
+    },
+    /** 新建页展示：优先 real_name（接口字段），与 store 中 realName 一致 */
+    defaultCreatorDisplayName() {
+      const u = this.currentUser
+      if (!u) return '-'
+      return u.real_name || u.realName || u.username || '-'
+    }
+  },
+  watch: {
+    '$route.query.bugId'(v) {
+      this.bugId = v || ''
+      if (!this.isCreate) this.loadDetail()
+    },
+    isCreate(val) {
+      if (val) {
+        if (this.$route.query.copyFrom) return
+        this.form.steps = BUG_STEPS_DEFAULT_HTML
+        this.form.reporterId = this.defaultReporterId()
+        this.form.reproduceRate = 1
+        this.form.assigneeId = ''
+        this.assigneeExtraLabel = ''
+        this.resetReporterMembers()
+        this.resetAssigneeMembers()
+      }
+    },
+    '$route.query.copyFrom': {
+      handler(v) {
+        if (!this.isCreate || !v) return
+        this.loadProductOptions().then(() => this.applyCopyFromDetail(v))
+      },
+      immediate: true
+    }
+  },
+  destroyed() {
+    this.unbindReporterMemberScroll()
+    this.unbindAssigneeMemberScroll()
+  },
+  methods: {
+    defaultReporterId() {
+      const u = this.currentUser
+      return u && u.id != null && u.id !== '' ? u.id : ''
+    },
+    mapMemberRows(list) {
+      const arr = Array.isArray(list) ? list : []
+      return arr
+        .map(item => ({
+          id: item.user_id || item.userId || item.id,
+          name:
+            item.real_name ||
+            item.realName ||
+            item.username ||
+            item.name ||
+            item.user_name ||
+            String(item.user_id || item.id)
+        }))
+        .filter(u => u.id !== undefined && u.id !== null)
+    },
+    ensureCurrentUserInMemberOptions(opts) {
+      const u = this.currentUser
+      if (!u || u.id == null || u.id === '') return opts || []
+      const list = opts || []
+      if (list.some(m => String(m.id) === String(u.id))) return list
+      const label = u.realName || u.username || '当前用户'
+      return [{ id: u.id, name: label }, ...list]
+    },
+    applyDefaultReporterIfNeeded() {
+      if (!this.isCreate) return
+      const uid = this.defaultReporterId()
+      const inList = id =>
+        id !== '' && id !== undefined && id !== null &&
+        this.reporterMemberOptions.some(m => String(m.id) === String(id))
+      if (!uid) return
+      if (!this.form.reporterId || !inList(this.form.reporterId)) {
+        if (inList(uid)) this.form.reporterId = uid
+      }
+    },
+    mergeMemberById(existing, incoming) {
+      const base = (existing || []).slice()
+      const seen = new Set(base.map(x => String(x.id)))
+      ;(incoming || []).forEach(x => {
+        if (x.id === undefined || x.id === null) return
+        const k = String(x.id)
+        if (!seen.has(k)) {
+          seen.add(k)
+          base.push(x)
+        }
+      })
+      return base
+    },
+    resetReporterMembers() {
+      this.reporterMemberOptions = []
+      this.reporterMemberPageNo = 0
+      this.reporterMemberNoMore = false
+    },
+    resetAssigneeMembers() {
+      this.assigneeMemberOptions = []
+      this.assigneeMemberPageNo = 0
+      this.assigneeMemberNoMore = false
+    },
+    fetchReporterMemberPage(append) {
+      const pid = this.form.projectId
+      if (!pid || this.reporterMemberLoading) return Promise.resolve()
+      if (append && this.reporterMemberNoMore) return Promise.resolve()
+      const nextPage = append ? this.reporterMemberPageNo + 1 : 1
+      if (!append) {
+        this.resetReporterMembers()
+      }
+      this.reporterMemberLoading = true
+      return getProjectMembers(pid, { pageNo: nextPage, pageSize: this.memberPageSize })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const raw = data.items || data.list || data.data || []
+          const rows = this.mapMemberRows(Array.isArray(raw) ? raw : [])
+          if (append) {
+            this.reporterMemberOptions = this.mergeMemberById(this.reporterMemberOptions, rows)
+          } else {
+            this.reporterMemberOptions = this.ensureCurrentUserInMemberOptions(rows)
+          }
+          this.reporterMemberPageNo = nextPage
+          this.reporterMemberNoMore = rows.length < this.memberPageSize
+        })
+        .catch(() => {
+          if (!append) {
+            this.reporterMemberOptions = this.ensureCurrentUserInMemberOptions([])
+          }
+          this.reporterMemberNoMore = true
+        })
+        .finally(() => {
+          this.reporterMemberLoading = false
+        })
+        .then(() => {
+          this.applyDefaultReporterIfNeeded()
+        })
+    },
+    fetchAssigneeMemberPage(append) {
+      const pid = this.form.projectId
+      if (!pid || this.assigneeMemberLoading) return Promise.resolve()
+      if (append && this.assigneeMemberNoMore) return Promise.resolve()
+      const nextPage = append ? this.assigneeMemberPageNo + 1 : 1
+      if (!append) {
+        this.resetAssigneeMembers()
+      }
+      this.assigneeMemberLoading = true
+      return getProjectMembers(pid, { pageNo: nextPage, pageSize: this.memberPageSize })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const raw = data.items || data.list || data.data || []
+          const rows = this.mapMemberRows(Array.isArray(raw) ? raw : [])
+          if (append) {
+            this.assigneeMemberOptions = this.mergeMemberById(this.assigneeMemberOptions, rows)
+          } else {
+            this.assigneeMemberOptions = rows.slice()
+          }
+          this.assigneeMemberPageNo = nextPage
+          this.assigneeMemberNoMore = rows.length < this.memberPageSize
+          this.ensureAssigneeInOptions()
+        })
+        .catch(() => {
+          if (!append) this.assigneeMemberOptions = []
+          this.assigneeMemberNoMore = true
+        })
+        .finally(() => {
+          this.assigneeMemberLoading = false
+        })
+    },
+    ensureAssigneeInOptions() {
+      const id = this.form.assigneeId
+      if (id === '' || id === undefined || id === null) return
+      if (this.assigneeMemberOptions.some(m => String(m.id) === String(id))) return
+      const name = this.assigneeExtraLabel || `用户 ${id}`
+      this.assigneeMemberOptions = [{ id, name }, ...this.assigneeMemberOptions]
+    },
+    getMemberDropdownScrollWrap(popperClass) {
+      const pop = document.querySelector(`.${popperClass}`)
+      if (!pop) return null
+      return pop.querySelector('.el-select-dropdown__wrap') || pop.querySelector('.el-scrollbar__wrap')
+    },
+    unbindReporterMemberScroll() {
+      if (this._reporterScrollEl && this._reporterScrollHandler) {
+        this._reporterScrollEl.removeEventListener('scroll', this._reporterScrollHandler)
+      }
+      this._reporterScrollEl = null
+      this._reporterScrollHandler = null
+    },
+    unbindAssigneeMemberScroll() {
+      if (this._assigneeScrollEl && this._assigneeScrollHandler) {
+        this._assigneeScrollEl.removeEventListener('scroll', this._assigneeScrollHandler)
+      }
+      this._assigneeScrollEl = null
+      this._assigneeScrollHandler = null
+    },
+    bindReporterMemberScroll() {
+      this.unbindReporterMemberScroll()
+      this.$nextTick(() => {
+        const el = this.getMemberDropdownScrollWrap('bug-editor-reporter-members')
+        if (!el) return
+        this._reporterScrollEl = el
+        this._reporterScrollHandler = this.onReporterMemberDropdownScroll.bind(this)
+        el.addEventListener('scroll', this._reporterScrollHandler, { passive: true })
+      })
+    },
+    bindAssigneeMemberScroll() {
+      this.unbindAssigneeMemberScroll()
+      this.$nextTick(() => {
+        const el = this.getMemberDropdownScrollWrap('bug-editor-assignee-members')
+        if (!el) return
+        this._assigneeScrollEl = el
+        this._assigneeScrollHandler = this.onAssigneeMemberDropdownScroll.bind(this)
+        el.addEventListener('scroll', this._assigneeScrollHandler, { passive: true })
+      })
+    },
+    onReporterMemberDropdownScroll(e) {
+      const el = e.target
+      if (this.reporterMemberLoading || this.reporterMemberNoMore) return
+      if (el.scrollHeight - el.scrollTop - el.clientHeight < 40) {
+        this.fetchReporterMemberPage(true)
+      }
+    },
+    onAssigneeMemberDropdownScroll(e) {
+      const el = e.target
+      if (this.assigneeMemberLoading || this.assigneeMemberNoMore) return
+      if (el.scrollHeight - el.scrollTop - el.clientHeight < 40) {
+        this.fetchAssigneeMemberPage(true)
+      }
+    },
+    onReporterDropdownVisible(visible) {
+      if (!visible) {
+        this.unbindReporterMemberScroll()
+        return
+      }
+      if (!this.form.projectId) return
+      const load = !this.reporterMemberOptions.length
+        ? this.fetchReporterMemberPage(false)
+        : Promise.resolve()
+      load.finally(() => {
+        this.$nextTick(() => this.bindReporterMemberScroll())
+      })
+    },
+    onAssigneeDropdownVisible(visible) {
+      if (!visible) {
+        this.unbindAssigneeMemberScroll()
+        return
+      }
+      if (!this.form.projectId) return
+      const load = !this.assigneeMemberOptions.length
+        ? this.fetchAssigneeMemberPage(false)
+        : Promise.resolve()
+      load.finally(() => {
+        this.$nextTick(() => this.bindAssigneeMemberScroll())
+      })
+    },
+    loadProjectMembersForForm(projectId) {
+      if (!projectId) {
+        this.resetReporterMembers()
+        this.resetAssigneeMembers()
+        return Promise.resolve()
+      }
+      if (this.isCreate) {
+        this.resetReporterMembers()
+        return this.fetchAssigneeMemberPage(false)
+      }
+      return Promise.all([
+        this.fetchReporterMemberPage(false),
+        this.fetchAssigneeMemberPage(false)
+      ])
+    },
+    loadProductOptions() {
+      if (this.productOptions.length) return Promise.resolve()
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => { this.productOptions = [] })
+    },
+    loadProjects(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => { this.projectOptions = [] })
+    },
+    loadModules(projectId) {
+      if (!projectId) {
+        this.moduleTree = []
+        return Promise.resolve()
+      }
+      return getModuleTree({ projectId, pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.moduleTree = data.list || data.items || []
+      }).catch(() => { this.moduleTree = [] })
+    },
+    onProductChange(val) {
+      this.form.projectId = ''
+      this.form.moduleId = ''
+      this.form.assigneeId = ''
+      this.form.reporterId = this.defaultReporterId()
+      this.moduleTree = []
+      this.assigneeExtraLabel = ''
+      this.resetReporterMembers()
+      this.resetAssigneeMembers()
+      this.loadProjects(val)
+    },
+    onProjectChange(val) {
+      this.form.moduleId = ''
+      this.form.assigneeId = ''
+      this.assigneeExtraLabel = ''
+      this.loadModules(val)
+      this.loadProjectMembersForForm(val)
+    },
+    applyCopyTitle(raw) {
+      const t = String(raw || '').trim()
+      const suffix = '（复制）'
+      if (!t) return suffix
+      if (t.indexOf(suffix) !== -1) {
+        return t.length > 200 ? t.slice(0, 200) : t
+      }
+      const combined = t + suffix
+      if (combined.length <= 200) return combined
+      return t.slice(0, Math.max(0, 200 - suffix.length)) + suffix
+    },
+    applyCopyFromDetail(sourceBugId) {
+      const sid = String(sourceBugId || '').trim()
+      if (!sid) return Promise.resolve()
+      return getBugDetail(sid)
+        .then(res => {
+          const d = (res && res.data) || res || {}
+          this.assigneeExtraLabel =
+            d.assignee_real_name ||
+            d.assigneeRealName ||
+            d.assignee_name ||
+            d.assigneeName ||
+            d.assignee_username ||
+            d.assigneeUsername ||
+            ''
+          const rawSteps =
+            d.steps || d.reproduce_steps || d.reproduceSteps || d.reproduction_steps || d.reproductionSteps || ''
+          this.form = {
+            title: this.applyCopyTitle(d.title || ''),
+            bugType: d.bug_type != null ? d.bug_type : d.bugType != null ? d.bugType : 1,
+            severity: d.severity != null ? d.severity : 2,
+            priority: d.priority != null ? d.priority : 2,
+            status: '',
+            productId: d.product_id || d.productId || '',
+            projectId: d.project_id || d.projectId || '',
+            moduleId: d.module_id || d.moduleId || '',
+            caseId: d.case_id != null && d.case_id !== '' ? d.case_id : d.caseId != null && d.caseId !== '' ? d.caseId : '',
+            planId: d.plan_id != null && d.plan_id !== '' ? d.plan_id : d.planId != null && d.planId !== '' ? d.planId : '',
+            environment: d.environment || '',
+            steps: legacyStepsToEditorHtml(rawSteps),
+            reporterId: this.defaultReporterId(),
+            assigneeId: d.assignee_id || d.assigneeId || '',
+            reproduceRate:
+              d.reproduce_rate != null && d.reproduce_rate !== ''
+                ? Number(d.reproduce_rate)
+                : d.reproduceRate != null && d.reproduceRate !== ''
+                  ? Number(d.reproduceRate)
+                  : 1
+          }
+          if (this.form.productId) this.loadProjects(this.form.productId)
+          if (this.form.projectId) {
+            this.loadModules(this.form.projectId)
+            this.loadProjectMembersForForm(this.form.projectId)
+          }
+          this.editorNonce = (this.editorNonce || 0) + 1
+          this.bugId = ''
+          this.editBaseline = null
+          this.$nextTick(() => {
+            if (this.$refs.formRef) this.$refs.formRef.clearValidate()
+          })
+          this.$message.success('已带入原 Bug 内容，请确认后创建')
+        })
+        .then(() => this.$router.replace({ path: '/bug/create', query: {} }).catch(() => {}))
+        .catch(() => {
+          this.$message.error('复制失败：无法加载原 Bug 详情')
+        })
+    },
+    loadDetail() {
+      if (!this.bugId) return
+      getBugDetail(this.bugId).then(res => {
+        const d = (res && res.data) || res || {}
+        this.assigneeExtraLabel =
+          d.assignee_real_name ||
+          d.assigneeRealName ||
+          d.assignee_name ||
+          d.assigneeName ||
+          d.assignee_username ||
+          d.assigneeUsername ||
+          ''
+        const rawSteps =
+          d.steps || d.reproduce_steps || d.reproduceSteps || d.reproduction_steps || d.reproductionSteps || ''
+        this.form = {
+          title: d.title || '',
+          bugType: d.bug_type != null ? d.bug_type : (d.bugType != null ? d.bugType : 1),
+          severity: d.severity != null ? d.severity : 2,
+          priority: d.priority != null ? d.priority : 2,
+          status: d.status != null ? d.status : '',
+          productId: d.product_id || d.productId || '',
+          projectId: d.project_id || d.projectId || '',
+          moduleId: d.module_id || d.moduleId || '',
+          caseId: d.case_id || d.caseId || '',
+          planId: d.plan_id || d.planId || '',
+          environment: d.environment || '',
+          steps: legacyStepsToEditorHtml(rawSteps),
+          reporterId:
+            d.reporter_id ||
+            d.reporterId ||
+            d.creator_id ||
+            d.creatorId ||
+            d.created_by ||
+            d.createdBy ||
+            '',
+          assigneeId: d.assignee_id || d.assigneeId || '',
+          reproduceRate:
+            d.reproduce_rate != null && d.reproduce_rate !== ''
+              ? Number(d.reproduce_rate)
+              : d.reproduceRate != null && d.reproduceRate !== ''
+                ? Number(d.reproduceRate)
+                : 1
+        }
+        if (this.form.productId) this.loadProjects(this.form.productId)
+        if (this.form.projectId) {
+          this.loadModules(this.form.projectId)
+          this.loadProjectMembersForForm(this.form.projectId)
+        }
+        this.$nextTick(() => {
+          this.editBaseline = buildBugEditBaseline(this.form)
+        })
+      }).catch(() => {})
+    },
+    clean(obj) {
+      const o = {}
+      Object.keys(obj).forEach(k => {
+        const v = obj[k]
+        if (v !== '' && v !== undefined && v !== null) o[k] = v
+      })
+      return o
+    },
+    submit() {
+      this.$refs.formRef.validate(valid => {
+        if (!valid) return
+        this.saving = true
+        if (this.isCreate) {
+          const payload = this.clean({
+            title: this.form.title,
+            bugType: this.form.bugType,
+            severity: this.form.severity,
+            priority: this.form.priority,
+            productId: this.form.productId,
+            projectId: this.form.projectId,
+            moduleId: this.form.moduleId,
+            caseId: this.form.caseId,
+            planId: this.form.planId,
+            environment: this.form.environment,
+            steps: this.form.steps,
+            reporterId: this.form.reporterId,
+            assigneeId: this.form.assigneeId,
+            reproduceRate: this.form.reproduceRate
+          })
+          payload.description = ''
+          createBug(payload).then(res => {
+            const data = (res && res.data) || {}
+            this.$message.success('创建成功')
+            const id = data.id
+            if (id) {
+              recordBugHistory(this.$store, {
+                bugId: id,
+                fieldName: 'create',
+                oldValue: '',
+                newValue: '1'
+              })
+              this.$router.replace({ path: '/bug/detail', query: { bugId: id } })
+            } else {
+              this.$router.push({ path: '/bug/list' })
+            }
+          }).finally(() => { this.saving = false })
+        } else {
+          const payload = this.clean({
+            bugId: Number(this.bugId),
+            id: Number(this.bugId),
+            title: this.form.title,
+            bugType: this.form.bugType,
+            severity: this.form.severity,
+            priority: this.form.priority,
+            status: this.form.status,
+            reporterId: this.form.reporterId,
+            assigneeId: this.form.assigneeId,
+            moduleId: this.form.moduleId,
+            caseId: this.form.caseId,
+            planId: this.form.planId,
+            environment: this.form.environment,
+            steps: this.form.steps,
+            reproduceRate: this.form.reproduceRate
+          })
+          payload.description = ''
+          updateBug(payload)
+            .then(() =>
+              recordBugEditDiff(
+                this.$store,
+                Number(this.bugId),
+                this.editBaseline,
+                buildBugEditBaseline(this.form)
+              )
+            )
+            .then(() => {
+              this.$message.success('保存成功')
+              this.$router.push({ path: '/bug/detail', query: { bugId: this.bugId } })
+            })
+            .finally(() => {
+              this.saving = false
+            })
+        }
+      })
+    },
+    goBack() {
+      if (this.isCreate) {
+        this.$router.push({ path: '/bug/list' })
+      } else {
+        this.$router.push({ path: '/bug/detail', query: { bugId: this.bugId } })
+      }
+    }
+  },
+  created() {
+    this.bugId = this.$route.query.bugId || ''
+    if (this.isCreate) {
+      this.form.reporterId = this.defaultReporterId()
+    }
+    if (!this.isCreate) {
+      this.loadProductOptions().then(() => this.loadDetail())
+    } else if (!this.$route.query.copyFrom) {
+      this.loadProductOptions()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+.bug-form {
+  max-width: 960px;
+}
+
+.bug-creator-readonly >>> .el-input__inner {
+  cursor: default;
+  color: #606266;
+  background-color: #f5f7fa;
+}
+</style>
--- a/src/components/Bug/BugList.vue
+++ b/src/components/Bug/BugList.vue
@@ -0,0 +1,721 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="Bug 列表">
+      <template slot="extra">
+        <el-button type="primary" size="small" @click="goCreate">新建 Bug</el-button>
+      </template>
+      <el-form :inline="true" size="small" class="filter-form" @submit.native.prevent>
+        <el-form-item label="产品">
+          <el-select
+            v-model="queryForm.productId"
+            filterable
+            clearable
+            placeholder="产品"
+            style="width: 200px;"
+            @change="onProductChange"
+            @focus="loadProductOptions">
+            <el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目">
+          <el-select
+            v-model="queryForm.projectId"
+            filterable
+            clearable
+            placeholder="项目"
+            style="width: 200px;"
+            :disabled="!queryForm.productId"
+            @change="onProjectChange">
+            <el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模块">
+          <el-select v-model="queryForm.moduleId" filterable clearable placeholder="模块" style="width: 180px;" :disabled="!queryForm.projectId">
+            <el-option v-for="m in flatModules" :key="m.id" :label="m.name" :value="m.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="当前指派">
+          <el-select v-model="queryForm.assigneeId" filterable clearable placeholder="当前指派" style="width: 140px;" :disabled="!queryForm.projectId">
+            <el-option v-for="u in memberOptions" :key="'a-' + u.id" :label="u.name" :value="u.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="queryForm.status" clearable placeholder="全部" style="width: 120px;">
+            <el-option v-for="(label, key) in statusOptions" :key="key" :label="label" :value="Number(key)" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建人">
+          <el-select v-model="queryForm.reporterId" filterable clearable placeholder="创建人" style="width: 140px;" :disabled="!queryForm.projectId">
+            <el-option v-for="u in memberOptions" :key="'r-' + u.id" :label="u.name" :value="u.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="more-filter-item">
+          <el-popover v-model="moreFilterVisible" placement="bottom-start" width="560" trigger="click">
+            <div class="more-filter-wrap">
+              <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
+                <el-form-item label="类型">
+                  <el-select v-model="queryForm.bugType" clearable placeholder="全部" style="width: 180px;">
+                    <el-option v-for="(label, key) in bugTypeOptions" :key="key" :label="label" :value="Number(key)" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="严重程度">
+                  <el-select v-model="queryForm.severity" clearable placeholder="全部" style="width: 180px;">
+                    <el-option v-for="(label, key) in severityOptions" :key="key" :label="label" :value="Number(key)" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="优先级">
+                  <el-select v-model="queryForm.priority" clearable placeholder="全部" style="width: 180px;">
+                    <el-option v-for="(label, key) in priorityOptions" :key="key" :label="label" :value="Number(key)" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="解决人">
+                  <el-select
+                    v-model="queryForm.resolvedBy"
+                    filterable
+                    clearable
+                    placeholder="全部"
+                    style="width: 180px;"
+                    :disabled="!queryForm.projectId">
+                    <el-option v-for="u in memberOptions" :key="'rb-' + u.id" :label="u.name" :value="u.id" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="复现率">
+                  <el-select v-model="queryForm.reproduceRate" clearable placeholder="全部" style="width: 180px;">
+                    <el-option v-for="(label, key) in reproduceRateOptions" :key="'rr-' + key" :label="label" :value="Number(key)" />
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="关键词">
+                  <el-input v-model.trim="queryForm.keyword" clearable placeholder="标题/描述" style="width: 180px;" @keyup.enter.native="applyMoreFilters" />
+                </el-form-item>
+              </el-form>
+              <div class="more-filter-footer">
+                <el-button size="small" @click="moreFilterVisible = false">取消</el-button>
+                <el-button type="primary" size="small" @click="applyMoreFilters">搜索</el-button>
+              </div>
+            </div>
+            <el-button slot="reference" size="small">更多筛选</el-button>
+          </el-popover>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="resetQuery">重置</el-button>
+        </el-form-item>
+        <el-form-item class="bug-column-setting-item">
+          <div class="bug-table-toolbar-actions">
+            <el-button size="small" @click="fillCreatedByMe">由我创建的</el-button>
+            <el-button size="small" @click="fillAssignedToMe">指派给我的</el-button>
+            <el-popover v-model="columnSettingVisible" placement="bottom-end" width="300" trigger="click">
+              <div class="column-setting-wrap">
+                <div class="column-setting-title">自定义列表展示字段</div>
+                <el-checkbox-group v-model="selectedBugColumnKeys" @change="handleBugColumnSelectionChange">
+                  <el-checkbox v-for="item in allBugColumns" :key="item.key" :label="item.key">{{ item.label }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <el-button slot="reference" size="small">自定义列表展示字段</el-button>
+            </el-popover>
+          </div>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loading" :data="tableData" border class="bug-table">
+        <el-table-column
+          v-for="column in visibleBugColumns"
+          :key="column.key"
+          :label="column.label"
+          :min-width="column.minWidth"
+          :width="column.width"
+          :show-overflow-tooltip="column.key === 'title' || column.key === 'solution' || column.key === 'bugKey' || column.key === 'creator' || column.key === 'assignee' || column.key === 'resolvedBy' || column.key === 'reproduceRate'">
+          <template slot-scope="scope">
+            <template v-if="column.key === 'bugType'">
+              <el-tag size="mini" :type="bugTypeTagType(scope.row.bug_type || scope.row.bugType)">{{ formatBugType(scope.row.bug_type || scope.row.bugType) }}</el-tag>
+            </template>
+            <template v-else-if="column.key === 'severity'">
+              <el-tag size="mini" :type="severityTagType(scope.row.severity)">{{ formatSeverity(scope.row.severity) }}</el-tag>
+            </template>
+            <template v-else-if="column.key === 'priority'">
+              <el-tag size="mini" :type="priorityTagType(scope.row.priority)">{{ formatPriority(scope.row.priority) }}</el-tag>
+            </template>
+            <template v-else-if="column.key === 'status'">
+              <el-tag size="mini" :type="statusTagType(scope.row.status)">{{ formatStatus(scope.row.status) }}</el-tag>
+            </template>
+            <template v-else>
+              {{ formatBugListCell(column.key, scope.row) }}
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="260" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="goDetail(scope.row)">详情</el-button>
+            <el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
+            <el-button type="text" @click="copyBug(scope.row)">复制</el-button>
+            <el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pager">
+        <el-pagination
+          :current-page="pageNo"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" />
+      </div>
+    </page-section>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getBugList, deleteBug } from '@/api/bugApi'
+import { recordBugHistory } from '@/utils/bugHistory'
+import { getProductList } from '@/api/productApi'
+import { getProjectList, getProjectMembers } from '@/api/projectApi'
+import { getModuleTree } from '@/api/caseApi'
+import {
+  BUG_TYPE_MAP,
+  SEVERITY_MAP,
+  PRIORITY_MAP,
+  STATUS_MAP,
+  REPRODUCE_RATE_MAP,
+  formatBugType,
+  formatSeverity,
+  formatPriority,
+  formatStatus,
+  formatReproduceRate,
+  statusTagType,
+  severityTagType,
+  priorityTagType,
+  bugTypeTagType
+} from '@/utils/bugMaps'
+import {
+  readLastProductProjectCache,
+  saveLastProductProjectCache,
+  pickIdFromOptions
+} from '@/utils/lastProductProjectCache'
+
+/** 与 BugDetail 解决弹窗 solutionOptions 的 value 一致，用于列表展示 */
+const BUG_SOLUTION_LABEL_MAP = {
+  by_design: '设计如此',
+  duplicate_bug: '重复Bug',
+  external_reason: '外部原因',
+  solution_resolved: '已解决',
+  cannot_reproduce: '无法重现',
+  deferred: '延期处理',
+  wont_fix: '不予解决'
+}
+
+export default {
+  name: 'BugList',
+  components: { PageSection },
+  data() {
+    return {
+      columnSettingVisible: false,
+      moreFilterVisible: false,
+      loading: false,
+      productOptions: [],
+      projectOptions: [],
+      moduleTree: [],
+      memberOptions: [],
+      assigneeMap: {},
+      queryForm: {
+        productId: '',
+        projectId: '',
+        moduleId: '',
+        bugType: '',
+        severity: '',
+        priority: '',
+        status: '',
+        assigneeId: '',
+        reporterId: '',
+        resolvedBy: '',
+        reproduceRate: '',
+        keyword: ''
+      },
+      allBugColumns: [
+        { key: 'bugKey', label: '编号', width: 120 },
+        { key: 'title', label: '标题', minWidth: 200 },
+        { key: 'status', label: '状态', width: 100 },
+        { key: 'assignee', label: '当前指派', width: 110 },
+        { key: 'creator', label: '创建人', width: 110 },
+        { key: 'resolvedBy', label: '解决人', width: 110 },
+        { key: 'reproduceRate', label: '复现率', width: 100 },
+        { key: 'solution', label: '解决方案', minWidth: 120 },
+        { key: 'createdTime', label: '创建时间', width: 170 },
+        { key: 'bugType', label: '类型', width: 100 },
+        { key: 'severity', label: '严重程度', width: 100 },
+        { key: 'priority', label: '优先级', width: 80 }
+      ],
+      selectedBugColumnKeys: ['bugKey', 'title', 'status', 'assignee', 'creator', 'solution', 'createdTime'],
+      pageNo: 1,
+      pageSize: 20,
+      total: 0,
+      tableData: []
+    }
+  },
+  computed: {
+    bugTypeOptions() {
+      return BUG_TYPE_MAP
+    },
+    severityOptions() {
+      return SEVERITY_MAP
+    },
+    priorityOptions() {
+      return PRIORITY_MAP
+    },
+    statusOptions() {
+      return STATUS_MAP
+    },
+    flatModules() {
+      const out = []
+      const walk = (nodes, prefix) => {
+        ;(nodes || []).forEach(n => {
+          const name = prefix ? `${prefix} / ${n.name}` : n.name
+          out.push({ id: n.id, name })
+          const ch = n.children || n.child_list || n.childList || []
+          if (ch.length) walk(ch, name)
+        })
+      }
+      walk(this.moduleTree, '')
+      return out
+    },
+    currentUser() {
+      return this.$store.state.currentUser
+    },
+    visibleBugColumns() {
+      return this.allBugColumns.filter(item => this.selectedBugColumnKeys.includes(item.key))
+    },
+    reproduceRateOptions() {
+      return REPRODUCE_RATE_MAP
+    }
+  },
+  methods: {
+    formatBugType,
+    formatSeverity,
+    formatPriority,
+    formatStatus,
+    formatReproduceRate,
+    statusTagType,
+    severityTagType,
+    priorityTagType,
+    bugTypeTagType,
+    loadProductOptions() {
+      if (this.productOptions.length) return Promise.resolve()
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => { this.productOptions = [] })
+    },
+    restoreBugListFromCache() {
+      const cached = readLastProductProjectCache()
+      const q = this.$route.query || {}
+      const fromAssignDeepLink = q.assignToMe === '1' || q.assignToMe === 'true'
+      let pid = cached && cached.productId
+      let projId = cached && cached.projectId
+      if (fromAssignDeepLink) {
+        if (q.productId !== undefined && q.productId !== null && String(q.productId).trim() !== '') {
+          pid = q.productId
+        }
+        if (q.projectId !== undefined && q.projectId !== null && String(q.projectId).trim() !== '') {
+          projId = q.projectId
+        }
+      }
+      if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
+        return Promise.resolve()
+      }
+      const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
+      if (!hasProduct) return Promise.resolve()
+      this.queryForm.productId = pickIdFromOptions(this.productOptions, pid)
+      return this.loadProjects(this.queryForm.productId).then(() => {
+        const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
+        if (!hasProject) return
+        this.queryForm.projectId = pickIdFromOptions(this.projectOptions, projId)
+        return Promise.all([
+          this.loadModules(this.queryForm.projectId),
+          this.loadMembers(this.queryForm.projectId)
+        ])
+      })
+    },
+    loadProjects(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => { this.projectOptions = [] })
+    },
+    loadModules(projectId) {
+      if (!projectId) {
+        this.moduleTree = []
+        return Promise.resolve()
+      }
+      return getModuleTree({ projectId, pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.moduleTree = data.list || data.items || []
+      }).catch(() => { this.moduleTree = [] })
+    },
+    loadMembers(projectId) {
+      if (!projectId) {
+        this.memberOptions = []
+        this.assigneeMap = {}
+        return Promise.resolve()
+      }
+      return getProjectMembers(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.items || data.list || data.data || data || []
+        const arr = Array.isArray(list) ? list : []
+        this.memberOptions = arr.map(item => ({
+          id: item.user_id || item.userId || item.id,
+          name:
+            item.real_name ||
+            item.realName ||
+            item.username ||
+            item.name ||
+            item.user_name ||
+            String(item.user_id || item.id)
+        })).filter(u => u.id !== undefined && u.id !== null)
+        this.assigneeMap = this.memberOptions.reduce((m, u) => { m[u.id] = u.name; return m }, {})
+      }).catch(() => {
+        this.memberOptions = []
+        this.assigneeMap = {}
+      })
+    },
+    rebuildAssigneeMap() {
+      this.assigneeMap = (this.memberOptions || []).reduce((m, u) => {
+        m[u.id] = u.name
+        return m
+      }, {})
+    },
+    mergeCurrentUserIntoMemberOptionsIfNeeded() {
+      const u = this.currentUser
+      if (!u || u.id == null || u.id === '') return
+      const id = u.id
+      if ((this.memberOptions || []).some(m => String(m.id) === String(id))) return
+      const name = u.realName || u.username || '当前用户'
+      this.memberOptions = [{ id, name }, ...(this.memberOptions || [])]
+      this.rebuildAssigneeMap()
+    },
+    fillCreatedByMe() {
+      const u = this.currentUser
+      const uid = u && u.id != null && u.id !== '' ? u.id : null
+      if (uid == null) {
+        this.$message.warning('请先登录')
+        return
+      }
+      if (!this.queryForm.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      this.mergeCurrentUserIntoMemberOptionsIfNeeded()
+      this.queryForm.reporterId = uid
+      this.pageNo = 1
+      this.fetchList()
+    },
+    fillAssignedToMe() {
+      const u = this.currentUser
+      const uid = u && u.id != null && u.id !== '' ? u.id : null
+      if (uid == null) {
+        this.$message.warning('请先登录')
+        return
+      }
+      if (!this.queryForm.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      this.mergeCurrentUserIntoMemberOptionsIfNeeded()
+      this.queryForm.assigneeId = uid
+      this.pageNo = 1
+      this.fetchList()
+    },
+    onProductChange(val) {
+      this.queryForm.projectId = ''
+      this.queryForm.moduleId = ''
+      this.queryForm.assigneeId = ''
+      this.queryForm.reporterId = ''
+      this.moduleTree = []
+      this.memberOptions = []
+      this.loadProjects(val)
+    },
+    onProjectChange(val) {
+      this.queryForm.moduleId = ''
+      this.queryForm.assigneeId = ''
+      this.queryForm.reporterId = ''
+      this.queryForm.resolvedBy = ''
+      this.loadModules(val)
+      this.loadMembers(val)
+      if (val) {
+        saveLastProductProjectCache(this.queryForm.productId, val)
+      }
+    },
+    cleanParams(obj) {
+      return Object.keys(obj).reduce((acc, k) => {
+        const v = obj[k]
+        if (v !== '' && v !== undefined && v !== null) acc[k] = v
+        return acc
+      }, {})
+    },
+    fetchList() {
+      this.loading = true
+      const params = this.cleanParams({
+        productId: this.queryForm.productId,
+        projectId: this.queryForm.projectId,
+        moduleId: this.queryForm.moduleId,
+        bugType: this.queryForm.bugType,
+        severity: this.queryForm.severity,
+        priority: this.queryForm.priority,
+        status: this.queryForm.status,
+        assigneeId: this.queryForm.assigneeId,
+        reporterId: this.queryForm.reporterId,
+        resolvedBy: this.queryForm.resolvedBy,
+        reproduceRate: this.queryForm.reproduceRate,
+        keyword: this.queryForm.keyword,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      })
+      getBugList(params).then(res => {
+        const data = (res && res.data) || res || {}
+        this.tableData = data.list || data.items || []
+        this.total = Number(data.total || 0)
+      }).catch(() => {
+        this.tableData = []
+        this.total = 0
+      }).finally(() => { this.loading = false })
+    },
+    handleSearch() {
+      this.pageNo = 1
+      saveLastProductProjectCache(this.queryForm.productId, this.queryForm.projectId)
+      this.fetchList()
+    },
+    applyMoreFilters() {
+      this.moreFilterVisible = false
+      this.pageNo = 1
+      saveLastProductProjectCache(this.queryForm.productId, this.queryForm.projectId)
+      this.fetchList()
+    },
+    resetQuery() {
+      this.moreFilterVisible = false
+      this.queryForm = {
+        productId: '',
+        projectId: '',
+        moduleId: '',
+        bugType: '',
+        severity: '',
+        priority: '',
+        status: '',
+        assigneeId: '',
+        reporterId: '',
+        resolvedBy: '',
+        reproduceRate: '',
+        keyword: ''
+      }
+      this.projectOptions = []
+      this.moduleTree = []
+      this.memberOptions = []
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleSizeChange(s) {
+      this.pageSize = s
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleCurrentChange(p) {
+      this.pageNo = p
+      this.fetchList()
+    },
+    assigneeLabel(row) {
+      const name = row.assignee_name || row.assigneeName
+      if (name) return name
+      const id = row.assignee_id || row.assigneeId
+      if (this.assigneeMap[id]) return this.assigneeMap[id]
+      if (id !== undefined && id !== null && id !== '') return String(id)
+      return '-'
+    },
+    solutionLabel(row) {
+      const d = row || {}
+      const name = d.solution_name || d.solutionName || d.solution_label || d.solutionLabel
+      if (name) return name
+      const code = String(d.solution_type || d.solutionType || d.solution_code || d.solutionCode || '').trim()
+      if (code && BUG_SOLUTION_LABEL_MAP[code]) return BUG_SOLUTION_LABEL_MAP[code]
+      const sol = d.solution
+      if (sol != null && sol !== '') {
+        const s = String(sol).trim()
+        if (BUG_SOLUTION_LABEL_MAP[s]) return BUG_SOLUTION_LABEL_MAP[s]
+        return s
+      }
+      if (code) return code
+      return '-'
+    },
+    formatBugListCell(key, row) {
+      if (key === 'bugKey') return row.bug_key || row.bugKey || ''
+      if (key === 'title') return row.title || ''
+      if (key === 'assignee') return this.assigneeLabel(row)
+      if (key === 'creator') return this.creatorLabel(row)
+      if (key === 'solution') return this.solutionLabel(row)
+      if (key === 'createdTime') return this.formatTime(row.created_time || row.createdTime)
+      if (key === 'resolvedBy') return this.resolvedByLabel(row)
+      if (key === 'reproduceRate') {
+        return this.formatReproduceRate(row.reproduce_rate != null ? row.reproduce_rate : row.reproduceRate)
+      }
+      return ''
+    },
+    resolvedByLabel(row) {
+      const d = row || {}
+      const name =
+        d.resolved_by_name ||
+        d.resolvedByName ||
+        d.resolver_name ||
+        d.resolverName ||
+        ''
+      const id = d.resolved_by != null && d.resolved_by !== '' ? d.resolved_by : d.resolvedBy
+      if (name) return name
+      if (id !== undefined && id !== null && id !== '') {
+        if (this.assigneeMap[id]) return this.assigneeMap[id]
+        return String(id)
+      }
+      return '-'
+    },
+    handleBugColumnSelectionChange(value) {
+      if (!value || value.length === 0) {
+        this.$message.warning('至少保留一个展示字段')
+        this.selectedBugColumnKeys = ['bugKey', 'title']
+      }
+    },
+    creatorLabel(row) {
+      const d = row || {}
+      const name =
+        d.reporter_real_name ||
+        d.reporterRealName ||
+        d.reporter_name ||
+        d.reporterName ||
+        d.creator_real_name ||
+        d.creatorRealName ||
+        d.creator_name ||
+        d.creatorName ||
+        ''
+      const id = d.reporter_id || d.reporterId || d.creator_id || d.creatorId || d.created_by || d.createdBy
+      if (name) return name
+      if (id !== undefined && id !== null && id !== '') return String(id)
+      return '-'
+    },
+    formatTime(v) {
+      if (!v) return '-'
+      return String(v).replace('T', ' ').slice(0, 19)
+    },
+    goCreate() {
+      this.$router.push({ path: '/bug/create' })
+    },
+    goDetail(row) {
+      this.$router.push({ path: '/bug/detail', query: { bugId: row.id } })
+    },
+    goEdit(row) {
+      this.$router.push({ path: '/bug/edit', query: { bugId: row.id } })
+    },
+    copyBug(row) {
+      const id = row && (row.id != null ? row.id : row.bugId)
+      if (id === undefined || id === null || id === '') {
+        this.$message.warning('无法复制：缺少 Bug ID')
+        return
+      }
+      this.$router.push({ path: '/bug/create', query: { copyFrom: String(id) } })
+    },
+    handleDelete(row) {
+      this.$confirm('确认删除该 Bug？', '提示', { type: 'warning' }).then(() => {
+        const bid = row.id
+        recordBugHistory(this.$store, {
+          bugId: bid,
+          fieldName: 'delete',
+          oldValue: '0',
+          newValue: '1'
+        })
+          .then(() => deleteBug({ bugId: bid, id: bid }))
+          .then(() => {
+            this.$message.success('已删除')
+            this.fetchList()
+          })
+          .catch(() => {})
+      }).catch(() => {})
+    }
+  },
+  created() {
+    this.loadProductOptions()
+      .then(() => this.restoreBugListFromCache())
+      .then(() => {
+        const q = this.$route.query || {}
+        if (q.assignToMe !== '1' && q.assignToMe !== 'true') return
+        const u = this.currentUser
+        const uid = u && u.id != null && u.id !== '' ? u.id : null
+        if (uid == null) {
+          this.$message.warning('请先登录')
+          return
+        }
+        if (!this.queryForm.projectId) {
+          this.$message.warning('请先在列表中选择产品、项目，或从首页在已选过产品/项目时再次进入')
+          return
+        }
+        this.mergeCurrentUserIntoMemberOptionsIfNeeded()
+        this.queryForm.assigneeId = uid
+        this.pageNo = 1
+      })
+      .finally(() => this.fetchList())
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+.filter-form {
+  margin-bottom: 4px;
+}
+
+.filter-form::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+.bug-table-toolbar-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bug-table {
+  margin-top: 8px;
+}
+.pager {
+  margin-top: 16px;
+  text-align: right;
+}
+
+.more-filter-wrap {
+  padding: 4px 0;
+}
+
+.more-filter-footer {
+  border-top: 1px solid #ebeef5;
+  text-align: right;
+  padding-top: 10px;
+}
+
+.bug-column-setting-item {
+  float: right;
+  margin-right: 0 !important;
+}
+
+.column-setting-wrap {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.column-setting-title {
+  color: #606266;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+</style>
--- a/src/components/Bug/BugStats.vue
+++ b/src/components/Bug/BugStats.vue
@@ -0,0 +1,701 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="Bug 统计">
+      <el-form :inline="true" size="small" class="filter-bar" @submit.native.prevent>
+        <el-form-item label="产品">
+          <el-select
+            v-model="query.productId"
+            filterable
+            clearable
+            placeholder="请选择产品"
+            style="width: 220px;"
+            @change="onProductChange"
+            @focus="loadProductOptions">
+            <el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目">
+          <el-select
+            v-model="query.projectId"
+            filterable
+            clearable
+            placeholder="请选择项目"
+            style="width: 220px;"
+            :disabled="!query.productId"
+            @change="onProjectChange">
+            <el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+        </el-form-item>
+      </el-form>
+
+      <div v-loading="loading" class="stats-body">
+        <el-row :gutter="16" class="stat-row">
+          <el-col v-for="card in summaryCardsRow1" :key="card.key" :span="6">
+            <div class="stat-card" :class="card.tone">
+              <div class="stat-label">{{ card.label }}</div>
+              <div class="stat-value">{{ card.value }}</div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="16" class="stat-row">
+          <el-col v-for="card in summaryCardsRow2" :key="card.key" :span="8">
+            <div class="stat-card" :class="card.tone">
+              <div class="stat-label">{{ card.label }}</div>
+              <div class="stat-value">{{ card.value }}</div>
+            </div>
+          </el-col>
+        </el-row>
+
+        <div class="report-section">
+          <el-row :gutter="16">
+            <el-col :span="5" class="report-sidebar">
+              <div class="sidebar-title">请选择报表类型</div>
+              <el-checkbox-group v-model="selectedReportKeys" class="report-check-list">
+                <div v-for="opt in reportTypeDefs" :key="opt.key" class="report-check-row">
+                  <el-checkbox :label="opt.key">{{ opt.label }}</el-checkbox>
+                </div>
+              </el-checkbox-group>
+              <div class="sidebar-actions">
+                <el-button type="text" size="small" @click="selectAllReportTypes">全选</el-button>
+                <el-button type="text" size="small" @click="clearReportTypes">清空</el-button>
+              </div>
+              <el-button type="primary" size="small" class="btn-generate" @click="applyReport">生成报表</el-button>
+            </el-col>
+            <el-col :span="19" class="report-main">
+              <p class="report-hint">
+                报表数据来自当前「产品 / 项目」下接口返回的统计；与 Bug 列表使用相同筛选维度。未返回的维度将显示「暂无数据」。
+              </p>
+              <el-radio-group v-model="chartType" size="small" class="chart-type-bar" @change="onChartTypeChange">
+                <el-radio-button label="default">默认</el-radio-button>
+                <el-radio-button label="pie">饼图</el-radio-button>
+                <el-radio-button label="bar">柱状图</el-radio-button>
+                <el-radio-button label="line">折线图</el-radio-button>
+              </el-radio-group>
+
+              <template v-if="appliedReportKeys.length">
+                <el-tabs v-model="activeTabKey" class="report-tabs" @tab-click="onReportTabClick">
+                  <el-tab-pane
+                    v-for="key in appliedReportKeys"
+                    :key="'tab-' + key"
+                    :name="key"
+                    :label="reportLabel(key)">
+                  </el-tab-pane>
+                </el-tabs>
+                <div v-if="activeTabKey" class="report-pane-title">{{ reportLabel(activeTabKey) }}</div>
+                <el-row :gutter="12" class="report-pane-body">
+                  <template v-if="chartType === 'default'">
+                    <el-col :span="24">
+                      <p class="default-mode-tip">以下为明细数据；切换到饼图 / 柱状图 / 折线图可同时查看图表与表格。</p>
+                      <el-table :data="activeDetailRows" border size="small" class="detail-table" max-height="420">
+                        <el-table-column prop="name" label="条目" min-width="120" show-overflow-tooltip />
+                        <el-table-column prop="value" label="值" width="90" align="right" />
+                        <el-table-column prop="percent" label="百分比" width="100" align="right" />
+                      </el-table>
+                    </el-col>
+                  </template>
+                  <template v-else>
+                    <el-col :span="14">
+                      <div ref="chartRef" class="chart-box"></div>
+                    </el-col>
+                    <el-col :span="10">
+                      <el-table :data="activeDetailRows" border size="small" class="detail-table" max-height="380">
+                        <el-table-column prop="name" label="条目" min-width="120" show-overflow-tooltip />
+                        <el-table-column prop="value" label="值" width="90" align="right" />
+                        <el-table-column prop="percent" label="百分比" width="100" align="right" />
+                      </el-table>
+                    </el-col>
+                  </template>
+                </el-row>
+              </template>
+              <div v-else class="report-empty">请勾选报表类型后点击「生成报表」</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </page-section>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getBugStats } from '@/api/bugApi'
+import { getProductList } from '@/api/productApi'
+import { getProjectList } from '@/api/projectApi'
+import {
+  readLastProductProjectCache,
+  saveLastProductProjectCache,
+  pickIdFromOptions
+} from '@/utils/lastProductProjectCache'
+import { STATUS_MAP } from '@/utils/bugMaps'
+
+const SOLUTION_LABEL_MAP = {
+  by_design: '设计如此',
+  duplicate_bug: '重复Bug',
+  external_reason: '外部原因',
+  solution_resolved: '已解决',
+  cannot_reproduce: '无法重现',
+  deferred: '延期处理',
+  wont_fix: '不予解决'
+}
+
+/** 不含：按严重程度、按优先级、按类型 */
+const REPORT_TYPE_DEFS = [
+  { key: 'iteration', label: '迭代Bug数量' },
+  { key: 'version', label: '版本Bug数量' },
+  { key: 'module', label: '模块Bug数量' },
+  { key: 'daily_new', label: '每天新增Bug数' },
+  { key: 'daily_resolved', label: '每天解决Bug数' },
+  { key: 'daily_closed', label: '每天关闭的Bug数' },
+  { key: 'by_reporter', label: '每人提交的Bug数' },
+  { key: 'by_resolver', label: '每人解决的Bug数' },
+  { key: 'by_closer', label: '每人关闭的Bug数' },
+  { key: 'solution', label: '按Bug解决方案统计' },
+  { key: 'status', label: '按Bug状态统计' },
+  { key: 'activation', label: '按Bug激活次数统计' },
+  { key: 'by_assignee', label: '按指派给统计' }
+]
+
+function firstNonEmptyObject(stats, paths) {
+  const s = stats || {}
+  for (let i = 0; i < paths.length; i++) {
+    const p = paths[i]
+    const v = p.split('.').reduce((o, k) => (o != null && o[k] !== undefined ? o[k] : undefined), s)
+    if (v && typeof v === 'object' && !Array.isArray(v) && Object.keys(v).length) return v
+  }
+  return null
+}
+
+function firstDefined(stats, paths) {
+  const s = stats || {}
+  for (let i = 0; i < paths.length; i++) {
+    const p = paths[i]
+    const v = p.split('.').reduce((o, k) => (o != null && o[k] !== undefined ? o[k] : undefined), s)
+    if (v !== undefined && v !== null) return v
+  }
+  return null
+}
+
+function normalizeTimeSeries(raw) {
+  if (!raw) return { categories: [], values: [] }
+  if (Array.isArray(raw)) {
+    const categories = raw.map(
+      item => String(item.date || item.day || item.label || item.name || item.stat_date || '-')
+    )
+    const values = raw.map(item => {
+      const v =
+        item.count !== undefined && item.count !== null && item.count !== ''
+          ? item.count
+          : item.value !== undefined && item.value !== null && item.value !== ''
+            ? item.value
+            : item.total !== undefined && item.total !== null && item.total !== ''
+              ? item.total
+              : item.num
+      return Number(v) || 0
+    })
+    return { categories, values }
+  }
+  if (typeof raw === 'object') {
+    const keys = Object.keys(raw).sort()
+    return {
+      categories: keys,
+      values: keys.map(k => Number(raw[k]) || 0)
+    }
+  }
+  return { categories: [], values: [] }
+}
+
+function mapObjectRows(obj, labelResolver) {
+  if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return { categories: [], values: [] }
+  const keys = Object.keys(obj)
+  const categories = keys.map(k => (labelResolver ? labelResolver(k, obj[k]) : String(k)))
+  const values = keys.map(k => Number(obj[k]) || 0)
+  return { categories, values }
+}
+
+export default {
+  name: 'BugStats',
+  components: { PageSection },
+  data() {
+    return {
+      loading: false,
+      productOptions: [],
+      projectOptions: [],
+      query: {
+        productId: '',
+        projectId: ''
+      },
+      stats: {},
+      reportTypeDefs: REPORT_TYPE_DEFS,
+      selectedReportKeys: ['by_resolver'],
+      appliedReportKeys: [],
+      activeTabKey: '',
+      chartType: 'line',
+      chartInstance: null,
+      _resizeHandler: null
+    }
+  },
+  computed: {
+    summaryCardsRow1() {
+      const s = this.stats || {}
+      const pick = (a, b, def) => {
+        const v = a !== undefined && a !== null ? a : b
+        return v !== undefined && v !== null ? v : def
+      }
+      return [
+        { key: 'total', label: '总数', value: pick(s.total, s.total_count, 0), tone: 'tone-default' },
+        { key: 'new', label: '新建', value: pick(s.new, s.new_count, 0), tone: 'tone-info' },
+        { key: 'pending', label: '待处理', value: pick(s.pending, s.pending_count, 0), tone: 'tone-warn' },
+        { key: 'in_progress', label: '进行中', value: pick(s.in_progress, s.inProgress, 0), tone: 'tone-primary' }
+      ]
+    },
+    summaryCardsRow2() {
+      const s = this.stats || {}
+      const pick = (a, b, def) => {
+        const v = a !== undefined && a !== null ? a : b
+        return v !== undefined && v !== null ? v : def
+      }
+      return [
+        { key: 'resolved', label: '已解决', value: pick(s.resolved, s.resolved_count, 0), tone: 'tone-success' },
+        { key: 'closed', label: '已关闭', value: pick(s.closed, s.closed_count, 0), tone: 'tone-muted' },
+        { key: 'rejected', label: '已拒绝', value: pick(s.rejected, s.rejected_count, 0), tone: 'tone-danger' }
+      ]
+    },
+    activeDetailRows() {
+      const { categories, values } = this.getSeriesForKey(this.activeTabKey)
+      return this.buildDetailRows(categories, values)
+    }
+  },
+  watch: {
+    stats() {
+      if (this.appliedReportKeys.length) {
+        this.$nextTick(() => this.renderChart())
+      }
+    }
+  },
+  beforeDestroy() {
+    this.disposeChart()
+    if (this._resizeHandler) {
+      window.removeEventListener('resize', this._resizeHandler)
+    }
+  },
+  methods: {
+    reportLabel(key) {
+      const row = this.reportTypeDefs.find(r => r.key === key)
+      return row ? row.label : key
+    },
+    selectAllReportTypes() {
+      this.selectedReportKeys = this.reportTypeDefs.map(r => r.key)
+    },
+    clearReportTypes() {
+      this.selectedReportKeys = []
+    },
+    applyReport() {
+      if (!this.selectedReportKeys.length) {
+        this.$message.warning('请至少选择一种报表类型')
+        return
+      }
+      this.appliedReportKeys = [...this.selectedReportKeys]
+      this.activeTabKey = this.appliedReportKeys[0]
+      this.$nextTick(() => this.renderChart())
+    },
+    onChartTypeChange() {
+      this.$nextTick(() => this.renderChart())
+    },
+    onReportTabClick() {
+      this.$nextTick(() => this.renderChart())
+    },
+    buildDetailRows(categories, values) {
+      const total = (values || []).reduce((a, b) => a + (Number(b) || 0), 0)
+      const t = total > 0 ? total : 1
+      return (categories || []).map((name, i) => {
+        const v = Number(values[i]) || 0
+        return {
+          name: name || '-',
+          value: v,
+          percent: `${((v / t) * 100).toFixed(2)}%`
+        }
+      })
+    },
+    getSeriesForKey(key) {
+      const s = this.stats || {}
+      switch (key) {
+        case 'iteration': {
+          const o = firstNonEmptyObject(s, [
+            'by_iteration',
+            'iteration_bugs',
+            'iteration_stats',
+            'iterationStats',
+            'bugs_by_iteration'
+          ])
+          return mapObjectRows(o, k => k)
+        }
+        case 'version': {
+          const o = firstNonEmptyObject(s, ['by_version', 'version_bugs', 'version_stats', 'bugs_by_version'])
+          return mapObjectRows(o, k => k)
+        }
+        case 'module': {
+          const o = firstNonEmptyObject(s, ['by_module', 'module_bugs', 'module_stats', 'bugs_by_module'])
+          return mapObjectRows(o, k => k)
+        }
+        case 'daily_new': {
+          const raw = firstDefined(s, ['daily_new', 'dailyNew', 'new_by_day', 'bugs_new_daily', 'newDaily'])
+          return normalizeTimeSeries(raw)
+        }
+        case 'daily_resolved': {
+          const raw = firstDefined(s, ['daily_resolved', 'dailyResolved', 'resolved_by_day', 'bugs_resolved_daily'])
+          return normalizeTimeSeries(raw)
+        }
+        case 'daily_closed': {
+          const raw = firstDefined(s, ['daily_closed', 'dailyClosed', 'closed_by_day', 'bugs_closed_daily'])
+          return normalizeTimeSeries(raw)
+        }
+        case 'by_reporter': {
+          const o = firstNonEmptyObject(s, [
+            'by_reporter',
+            'byReporter',
+            'reporter_stats',
+            'submit_by_user',
+            'bugs_by_creator'
+          ])
+          return mapObjectRows(o, k => k)
+        }
+        case 'by_resolver': {
+          const o = firstNonEmptyObject(s, [
+            'by_resolver',
+            'byResolver',
+            'resolved_by_user',
+            'resolver_stats',
+            'bugs_by_resolver'
+          ])
+          return mapObjectRows(o, k => k)
+        }
+        case 'by_closer': {
+          const o = firstNonEmptyObject(s, ['by_closer', 'byCloser', 'closed_by_user', 'closer_stats'])
+          return mapObjectRows(o, k => k)
+        }
+        case 'solution': {
+          const o = firstNonEmptyObject(s, ['by_solution', 'bySolution', 'solution_stats'])
+          return mapObjectRows(o, k => SOLUTION_LABEL_MAP[k] || k)
+        }
+        case 'status': {
+          const o = firstNonEmptyObject(s, ['by_status', 'byStatus', 'status_stats'])
+          return mapObjectRows(o, k => STATUS_MAP[Number(k)] != null ? STATUS_MAP[Number(k)] : STATUS_MAP[k] || k)
+        }
+        case 'activation': {
+          const o = firstNonEmptyObject(s, ['by_activation', 'byActivation', 'activation_stats'])
+          return mapObjectRows(o, k => k)
+        }
+        case 'by_assignee': {
+          const o = firstNonEmptyObject(s, ['by_assignee', 'byAssignee', 'assignee_stats', 'bugs_by_assignee'])
+          return mapObjectRows(o, k => k)
+        }
+        default:
+          return { categories: [], values: [] }
+      }
+    },
+    disposeChart() {
+      if (this.chartInstance) {
+        try {
+          this.chartInstance.dispose()
+        } catch (e) {}
+        this.chartInstance = null
+      }
+    },
+    renderChart() {
+      this.disposeChart()
+      if (!this.appliedReportKeys.length || this.chartType === 'default') return
+      const el = this.$refs.chartRef
+      if (!el) return
+      const { categories, values } = this.getSeriesForKey(this.activeTabKey)
+      if (!categories.length) {
+        this.chartInstance = echarts.init(el)
+        this.chartInstance.setOption({
+          title: {
+            text: '暂无数据',
+            left: 'center',
+            top: 'middle',
+            textStyle: { color: '#909399', fontSize: 14 }
+          }
+        })
+        this.bindResize()
+        return
+      }
+      this.chartInstance = echarts.init(el)
+      const isLine = this.chartType === 'line'
+      const baseSeries = {
+        name: this.reportLabel(this.activeTabKey),
+        data: values,
+        type: this.chartType === 'pie' ? 'pie' : this.chartType === 'bar' ? 'bar' : 'line',
+        smooth: isLine,
+        areaStyle: isLine ? { opacity: 0.12 } : undefined
+      }
+      let option
+      if (this.chartType === 'pie') {
+        option = {
+          color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9b59b6', '#3498db'],
+          tooltip: { trigger: 'item' },
+          legend: { bottom: 0, type: 'scroll' },
+          series: [
+            {
+              type: 'pie',
+              radius: ['36%', '62%'],
+              center: ['50%', '46%'],
+              data: categories.map((name, i) => ({ name, value: values[i] })),
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0,0,0,0.15)'
+                }
+              }
+            }
+          ]
+        }
+      } else {
+        option = {
+          color: ['#409EFF'],
+          tooltip: { trigger: 'axis' },
+          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+          xAxis: {
+            type: 'category',
+            data: categories,
+            axisLabel: { rotate: categories.some(c => String(c).length > 6) ? 35 : 0, interval: 0 }
+          },
+          yAxis: { type: 'value', minInterval: 1 },
+          series: [Object.assign({}, baseSeries, this.chartType === 'bar' ? { barMaxWidth: 48 } : {})]
+        }
+      }
+      this.chartInstance.setOption(option)
+      this.bindResize()
+    },
+    bindResize() {
+      if (!this._resizeHandler) {
+        this._resizeHandler = () => {
+          if (this.chartInstance) this.chartInstance.resize()
+        }
+        window.addEventListener('resize', this._resizeHandler)
+      } else if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    },
+    loadProductOptions() {
+      if (this.productOptions.length) return Promise.resolve()
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.productOptions = []
+      })
+    },
+    loadProjects(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.projectOptions = []
+      })
+    },
+    restoreSharedProductProjectCache() {
+      const cached = readLastProductProjectCache()
+      if (!cached) return Promise.resolve()
+      const { productId: pid, projectId: projId } = cached
+      if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
+        return Promise.resolve()
+      }
+      const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
+      if (!hasProduct) return Promise.resolve()
+      this.query.productId = pickIdFromOptions(this.productOptions, pid)
+      return this.loadProjects(this.query.productId).then(() => {
+        const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
+        if (!hasProject) return
+        this.query.projectId = pickIdFromOptions(this.projectOptions, projId)
+      })
+    },
+    onProductChange(val) {
+      this.query.projectId = ''
+      this.projectOptions = []
+      this.loadProjects(val)
+    },
+    onProjectChange(val) {
+      if (val) {
+        saveLastProductProjectCache(this.query.productId, val)
+      }
+    },
+    handleSearch() {
+      saveLastProductProjectCache(this.query.productId, this.query.projectId)
+      this.fetchStats()
+    },
+    fetchStats() {
+      this.loading = true
+      const params = {}
+      if (this.query.productId !== '' && this.query.productId != null) params.productId = this.query.productId
+      if (this.query.projectId !== '' && this.query.projectId != null) params.projectId = this.query.projectId
+      getBugStats(params)
+        .then(res => {
+          this.stats = (res && res.data) || res || {}
+        })
+        .catch(() => {
+          this.stats = {}
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }
+  },
+  created() {
+    this.loadProductOptions()
+      .then(() => this.restoreSharedProductProjectCache())
+      .finally(() => this.fetchStats())
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+.filter-bar {
+  margin-bottom: 8px;
+}
+.stats-body {
+  min-height: 120px;
+}
+.stat-row {
+  margin-bottom: 8px;
+}
+.stat-card {
+  border-radius: 10px;
+  padding: 16px 18px;
+  margin-bottom: 16px;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+.stat-label {
+  font-size: 13px;
+  color: #909399;
+}
+.stat-value {
+  margin-top: 8px;
+  font-size: 26px;
+  font-weight: 600;
+  color: #303133;
+}
+.tone-primary .stat-value {
+  color: #409eff;
+}
+.tone-success .stat-value {
+  color: #67c23a;
+}
+.tone-warn .stat-value {
+  color: #e6a23c;
+}
+.tone-danger .stat-value {
+  color: #f56c6c;
+}
+.tone-info .stat-value {
+  color: #909399;
+}
+.tone-muted .stat-value {
+  color: #606266;
+}
+
+.report-section {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #ebeef5;
+}
+.report-sidebar {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 14px 12px;
+  background: #fafbfc;
+}
+.sidebar-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #303133;
+  margin-bottom: 10px;
+}
+.report-check-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 420px;
+  overflow-y: auto;
+}
+.report-check-row {
+  line-height: 1.5;
+}
+.sidebar-actions {
+  margin-top: 10px;
+  margin-bottom: 8px;
+}
+.btn-generate {
+  width: 100%;
+}
+.report-main {
+  min-height: 420px;
+}
+.report-hint {
+  font-size: 12px;
+  color: #909399;
+  margin: 0 0 10px;
+  line-height: 1.5;
+}
+.chart-type-bar {
+  margin-bottom: 12px;
+}
+.report-tabs {
+  margin-top: 4px;
+}
+.report-pane-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 10px;
+}
+.default-mode-tip {
+  font-size: 12px;
+  color: #909399;
+  margin: 0 0 8px;
+}
+.report-pane-body {
+  align-items: stretch;
+}
+.chart-box {
+  height: 380px;
+  width: 100%;
+}
+.chart-placeholder {
+  height: 380px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  font-size: 13px;
+  padding: 16px;
+  text-align: center;
+  border: 1px dashed #dcdfe6;
+  border-radius: 6px;
+  background: #fafafa;
+}
+.detail-table {
+  width: 100%;
+}
+.report-empty {
+  padding: 48px 16px;
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+  border: 1px dashed #e4e7ed;
+  border-radius: 8px;
+}
+</style>
--- a/src/components/Bug/BugStepsRichEditor.vue
+++ b/src/components/Bug/BugStepsRichEditor.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="bug-steps-rich-wrap">
+    <div ref="editorHost" class="bug-steps-rich-host"></div>
+  </div>
+</template>
+
+<script>
+// 使用已打包的 min，避免 babel-loader 读 wangeditor 内 .babelrc 导致构建失败
+import E from 'wangeditor/dist/wangEditor.min.js'
+import { uploadBugStepImage } from '@/api/bugApi'
+import {
+  parseBugUploadFileUrl,
+  normalizeUploadPathSlashes,
+  rewriteBugImageUrlForAccess
+} from '@/utils/bugStepsFormat'
+
+const EMPTY_HTML = '<p><br></p>'
+
+function normalizeHtmlForCompare(html) {
+  const h = (html || '').trim()
+  if (!h || h === EMPTY_HTML || h === '<p><br/></p>') return ''
+  return h
+}
+
+export default {
+  name: 'BugStepsRichEditor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入复现步骤，工具栏可插入图片，支持粘贴截图'
+    },
+    height: {
+      type: Number,
+      default: 360
+    }
+  },
+  data() {
+    return {
+      editor: null,
+      syncing: false,
+      _pasteImgHostEl: null,
+      _pasteImgHandlerBound: null
+    }
+  },
+  watch: {
+    value(val) {
+      this.syncFromParent(val)
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initEditor()
+    })
+  },
+  beforeDestroy() {
+    this.teardownPasteImageUpload()
+    if (this.editor) {
+      try {
+        this.editor.destroy()
+      } catch (e) { /* ignore */ }
+      this.editor = null
+    }
+  },
+  methods: {
+    syncFromParent(val) {
+      if (!this.editor) return
+      const cur = normalizeHtmlForCompare(this.editor.txt.html())
+      const next = normalizeHtmlForCompare(val)
+      if (cur === next) return
+      this.syncing = true
+      this.editor.txt.html(next ? val : EMPTY_HTML)
+      this.$nextTick(() => {
+        this.syncing = false
+      })
+    },
+    initEditor() {
+      if (!this.$refs.editorHost || this.editor) return
+      const EditorCtor = E && E.default ? E.default : E
+      const editor = new EditorCtor(this.$refs.editorHost)
+      // 必须低于 Element UI 下拉面板的 z-index（约 2000+），否则模块等 el-select 会被富文本盖住
+      editor.config.zIndex = 500
+      editor.config.placeholder = this.placeholder
+      editor.config.height = this.height
+      if (editor.config.menus && editor.config.menus.indexOf('video') !== -1) {
+        editor.config.menus = editor.config.menus.filter(function (m) {
+          return m !== 'video'
+        })
+      }
+      const self = this
+      editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+        if (!resultFiles || !resultFiles.length) return
+        resultFiles.reduce(function (chain, file) {
+          return chain.then(function () {
+            return uploadBugStepImage(file).then(function (res) {
+              const raw = normalizeUploadPathSlashes(parseBugUploadFileUrl(res))
+              if (!raw) {
+                self.$message.error('上传成功但未返回图片地址')
+                return
+              }
+              const url = rewriteBugImageUrlForAccess(raw)
+              insertImgFn(url)
+            })
+          })
+        }, Promise.resolve()).catch(function () {
+          self.$message.error('图片上传失败')
+        })
+      }
+      editor.config.onchange = function (html) {
+        if (self.syncing) return
+        const h = html || ''
+        if (normalizeHtmlForCompare(h) === '') {
+          self.$emit('input', '')
+        } else {
+          self.$emit('input', h)
+        }
+      }
+      editor.create()
+      this.editor = editor
+      const initial = this.value && this.value.trim() ? this.value : EMPTY_HTML
+      editor.txt.html(initial)
+      this.bindPasteImageUpload(editor)
+    },
+    teardownPasteImageUpload() {
+      if (this._pasteImgHostEl && this._pasteImgHandlerBound) {
+        this._pasteImgHostEl.removeEventListener('paste', this._pasteImgHandlerBound, true)
+      }
+      this._pasteImgHostEl = null
+      this._pasteImgHandlerBound = null
+    },
+    /** 粘贴截图走 /bug/upload，与工具栏插入图片一致 */
+    bindPasteImageUpload(editor) {
+      this.teardownPasteImageUpload()
+      const el = editor.$textElem && editor.$textElem[0]
+      if (!el) return
+      const self = this
+      this._pasteImgHostEl = el
+      this._pasteImgHandlerBound = function (e) {
+        const cd = e.clipboardData
+        if (!cd) return
+        let file = null
+        if (cd.items && cd.items.length) {
+          for (let i = 0; i < cd.items.length; i++) {
+            const it = cd.items[i]
+            if (it.kind === 'file' && it.type && it.type.indexOf('image/') === 0) {
+              file = it.getAsFile()
+              if (file) break
+            }
+          }
+        }
+        if (!file && cd.files && cd.files.length) {
+          for (let i = 0; i < cd.files.length; i++) {
+            const f = cd.files[i]
+            if (f && f.type && f.type.indexOf('image/') === 0) {
+              file = f
+              break
+            }
+          }
+        }
+        if (!file) return
+        e.preventDefault()
+        e.stopPropagation()
+        uploadBugStepImage(file)
+          .then(function (res) {
+            const raw = normalizeUploadPathSlashes(parseBugUploadFileUrl(res))
+            if (!raw) {
+              self.$message.error('上传成功但未返回图片地址')
+              return
+            }
+            const url = rewriteBugImageUrlForAccess(raw)
+            const imgHtml = '<img src="' + url + '" style="max-width:100%;"/>'
+            let inserted = false
+            if (editor.cmd && typeof editor.cmd.do === 'function') {
+              try {
+                editor.cmd.do('insertHTML', imgHtml)
+                inserted = true
+              } catch (e1) {
+                try {
+                  editor.cmd.do('insertHtml', imgHtml)
+                  inserted = true
+                } catch (e2) { /* ignore */ }
+              }
+            }
+            if (!inserted) self.$message.error('插入图片失败')
+          })
+          .catch(function () {
+            self.$message.error('图片上传失败')
+          })
+      }
+      el.addEventListener('paste', this._pasteImgHandlerBound, true)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bug-steps-rich-wrap {
+  width: 100%;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+.bug-steps-rich-host {
+  text-align: left;
+}
+</style>
--- a/src/components/CreateData/CreateDataInfo.vue
+++ b/src/components/CreateData/CreateDataInfo.vue
@@ -128,7 +128,7 @@ export default {
        ItApiCreate(this.form).then(res => {
          if (res && res.success === true) {
            this.$message({type: 'success', message: this.form.sqlId ? '修改成功' : '新增成功'})
-            this.$router.push({path: '/create/data'})
+            this.$router.push({path: '/data-tools/db-builder'})
          } else {
            this.$message({type: 'error', message: res.message || '保存失败'})
          }
@@ -138,7 +138,7 @@ export default {
      })
    },
    goBack() {
-      this.$router.push({path: '/create/data'})
+      this.$router.push({path: '/data-tools/db-builder'})
    }
  },
  created() {
--- a/src/components/EffektHome.vue
+++ b/src/components/EffektHome.vue
@@ -1,24 +1,61 @@
 <template>
  <div class="effekt-home">
-    <el-card shadow="never">
-      <div class="home-content">
-        <p class="home-desc">这里汇总各项目常用环境地址和文档链接，方便快速进入。</p>
-        <div
-          v-for="project in projectLinks"
-          :key="project.name"
-          class="project-block">
-          <div class="project-title">{{ project.name }}</div>
-          <div class="project-links">
-            <div v-for="item in project.links" :key="item.name" class="link-item">
-              <span class="link-label">{{ item.name }}：</span>
-              <el-link
-                :href="item.url"
-                target="_blank"
-                type="primary"
-                class="doc-link">
-                {{ item.url }}
-              </el-link>
+    <el-row :gutter="20" class="top-row">
+      <el-col :xs="24" :md="10">
+        <el-card shadow="never" class="greet-card">
+          <div class="greet-line">{{ greetingPrefix }}{{ greetingTime }}</div>
+          <div class="greet-date">{{ todayText }}</div>
+          <div v-if="currentUser" class="greet-progress">
+            <span class="greet-progress-label">待处理进度</span>
+            <el-progress :percentage="100" :stroke-width="10" status="success" />
+            <span class="greet-progress-tip">已完成 100%</span>
+          </div>
+          <div v-else class="greet-login-tip">
+            <el-link type="primary" @click="goLogin">登录后查看个人工作台</el-link>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :md="14">
+        <el-card shadow="never" class="work-card">
+          <div class="work-card-title">今天剩余工作总计</div>
+          <div class="work-stats">
+            <div class="work-stat">
+              <div class="work-stat-value">{{ formatCount(workCountOpportunity) }}</div>
+              <div class="work-stat-label">我的机会</div>
            </div>
+            <div class="work-stat work-stat--click" @click="goMyBugs">
+              <div class="work-stat-value">{{ formatCount(workCountBug) }}</div>
+              <div class="work-stat-label">我的 BUG</div>
+              <div class="work-stat-hint">点击查看指派给我</div>
+            </div>
+            <div class="work-stat work-stat--click" @click="goMyPlans">
+              <div class="work-stat-value">{{ formatCount(workCountPlan) }}</div>
+              <div class="work-stat-label">我的计划</div>
+              <div class="work-stat-hint">点击查看我负责的</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card shadow="never" class="links-card">
+      <div class="links-card-title">环境与文档</div>
+      <p class="home-desc">这里汇总各项目常用环境地址和文档链接，方便快速进入。</p>
+      <div
+        v-for="project in projectLinks"
+        :key="project.name"
+        class="project-block">
+        <div class="project-title">{{ project.name }}</div>
+        <div class="project-links">
+          <div v-for="item in project.links" :key="item.name" class="link-item">
+            <span class="link-label">{{ item.name }}：</span>
+            <el-link
+              :href="item.url"
+              target="_blank"
+              type="primary"
+              class="doc-link">
+              {{ item.url }}
+            </el-link>
          </div>
        </div>
      </div>
@@ -27,10 +64,17 @@
 </template>

 <script>
+import { getBugList } from '@/api/bugApi'
+import { getPlanList } from '@/api/planApi'
+import { readLastProductProjectCache } from '@/utils/lastProductProjectCache'
+
 export default {
  name: 'EffektHome',
  data() {
    return {
+      workCountOpportunity: null,
+      workCountBug: null,
+      workCountPlan: null,
      projectLinks: [
        {
          name: '智慧运营',
@@ -40,7 +84,7 @@ export default {
            { name: '需求文档', url: 'https://vcncbabzm4lv.feishu.cn/wiki/UsvzwMzV0i7Lrgk9VIhc2XgJn6e?fromScene=spaceOverview' },
            { name: '资源连接地址(包含数据库连接，jenkins配置，git仓库，日志查询，xxjob等)', url: 'https://vcncbabzm4lv.feishu.cn/wiki/ZKmown7QuiXtwTkONhUcagpQnWh' },
            { name: '领星地址', url: 'https://envision.lingxing.com/erp/home' },
-            { name: '禅道地址', url: 'http://39.170.26.156:8888/my.html' },
+            { name: '禅道地址', url: 'http://39.170.26.156:8888/my.html' }
          ]
        },
        {
@@ -50,18 +94,293 @@ export default {
            { name: 'web的C端测试环境地址', url: 'https://joyhub-website-frontend-test.best-envision.com/' },
            { name: '接口开发地址', url: 'https://joyhub-website-manager-api-test.best-envision.com/doc.html#/home' },
            { name: '资源连接地址', url: 'https://vcncbabzm4lv.feishu.cn/wiki/PXTmw6BBviMjNDkKCxCcewD7nMd' },
-            { name: '禅道地址', url: 'http://192.168.16.4:8956/index.php?m=my&f=index' },
+            { name: '禅道地址', url: 'http://192.168.16.4:8956/index.php?m=my&f=index' }
          ]
        }
      ]
    }
+  },
+  computed: {
+    currentUser() {
+      return this.$store.state.currentUser
+    },
+    greetingPrefix() {
+      const u = this.currentUser
+      if (!u) return ''
+      const name = u.realName || u.username || ''
+      return name ? `${name}，` : ''
+    },
+    greetingTime() {
+      const h = new Date().getHours()
+      if (h < 12) return '上午好！'
+      if (h < 18) return '下午好！'
+      return '晚上好！'
+    },
+    todayText() {
+      const d = new Date()
+      const y = d.getFullYear()
+      const m = String(d.getMonth() + 1).padStart(2, '0')
+      const day = String(d.getDate()).padStart(2, '0')
+      return `${y}年${m}月${day}日`
+    }
+  },
+  mounted() {
+    this.refreshWorkCounts()
+  },
+  methods: {
+    formatCount(n) {
+      if (n === null || n === undefined || Number.isNaN(Number(n))) return '—'
+      return String(n)
+    },
+    goLogin() {
+      this.$router.push({ name: 'login' })
+    },
+    goMyBugs() {
+      if (!this.currentUser) {
+        this.$message.warning('请先登录')
+        this.goLogin()
+        return
+      }
+      const c = readLastProductProjectCache()
+      const q = { assignToMe: '1' }
+      if (c && c.productId !== undefined && c.productId !== null && String(c.productId).trim() !== '') {
+        q.productId = String(c.productId)
+      }
+      if (c && c.projectId !== undefined && c.projectId !== null && String(c.projectId).trim() !== '') {
+        q.projectId = String(c.projectId)
+      }
+      this.$router.push({ path: '/bug/list', query: q })
+    },
+    goMyPlans() {
+      if (!this.currentUser) {
+        this.$message.warning('请先登录')
+        this.goLogin()
+        return
+      }
+      const c = readLastProductProjectCache()
+      const q = { planOwnerSelf: '1' }
+      if (c && c.productId !== undefined && c.productId !== null && String(c.productId).trim() !== '') {
+        q.productId = String(c.productId)
+      }
+      if (c && c.projectId !== undefined && c.projectId !== null && String(c.projectId).trim() !== '') {
+        q.projectId = String(c.projectId)
+      }
+      this.$router.push({ path: '/test-platform/plan', query: q })
+    },
+    refreshWorkCounts() {
+      const u = this.currentUser
+      const c = readLastProductProjectCache()
+      this.workCountOpportunity = null
+      this.workCountBug = null
+      this.workCountPlan = null
+      if (!u || u.id == null || u.id === '' || !c || !c.projectId) {
+        return
+      }
+      getBugList({
+        productId: c.productId,
+        projectId: c.projectId,
+        assigneeId: u.id,
+        pageNo: 1,
+        pageSize: 1
+      })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          this.workCountBug = Number(data.total != null ? data.total : 0)
+        })
+        .catch(() => {
+          this.workCountBug = null
+        })
+      getPlanList(c.projectId, {
+        owner_id: u.id,
+        owner: u.id,
+        pageNo: 1,
+        pageSize: 1
+      })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          this.workCountPlan = Number(data.total != null ? data.total : 0)
+        })
+        .catch(() => {
+          this.workCountPlan = null
+        })
+    }
  }
 }
 </script>

 <style scoped>
 .effekt-home {
-  padding: 20px;
+  max-width: 1240px;
+  margin: 0 auto;
+}
+
+.top-row {
+  margin-bottom: 20px;
+}
+
+.greet-card,
+.work-card,
+.links-card {
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 18px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+  background: #111827;
+}
+
+.greet-card,
+.work-card {
+  min-height: 174px;
+}
+
+.greet-card {
+  position: relative;
+  background: radial-gradient(circle at 88% 16%, rgba(103, 232, 249, 0.28), transparent 28%), linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(15, 23, 42, 0.96) 62%, rgba(8, 13, 27, 0.98) 100%);
+  color: #fff;
+  border-color: rgba(103, 232, 249, 0.22);
+}
+
+.greet-card:after {
+  content: '';
+  position: absolute;
+  right: -44px;
+  bottom: -54px;
+  width: 170px;
+  height: 170px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(56, 189, 248, 0.26), transparent 68%);
+}
+
+.greet-card >>> .el-card__body,
+.work-card >>> .el-card__body,
+.links-card >>> .el-card__body {
+  padding: 24px;
+  position: relative;
+  z-index: 1;
+}
+
+.greet-line {
+  font-size: 24px;
+  font-weight: 800;
+  color: #f8fbff;
+  margin-bottom: 8px;
+  letter-spacing: 0.2px;
+}
+
+.greet-date {
+  color: #bae6fd;
+  font-size: 13px;
+  margin-bottom: 22px;
+}
+
+.greet-progress-label {
+  font-size: 12px;
+  color: rgba(224, 242, 254, 0.9);
+  display: block;
+  margin-bottom: 8px;
+}
+
+.greet-progress >>> .el-progress-bar__outer {
+  background-color: rgba(15, 23, 42, 0.68);
+}
+
+.greet-progress >>> .el-progress-bar__inner {
+  background: linear-gradient(90deg, #22d3ee 0%, #6366f1 100%);
+}
+
+.greet-progress-tip {
+  font-size: 12px;
+  color: #a7f3d0;
+  margin-top: 8px;
+  display: block;
+}
+
+.greet-login-tip {
+  margin-top: 8px;
+}
+
+.greet-login-tip >>> .el-link.el-link--primary {
+  color: #67e8f9;
+  font-weight: 700;
+}
+
+.work-card-title,
+.links-card-title {
+  position: relative;
+  font-size: 16px;
+  font-weight: 800;
+  color: #e0f2fe;
+  margin-bottom: 18px;
+  padding-left: 12px;
+  letter-spacing: 0.3px;
+}
+
+.work-card-title:before,
+.links-card-title:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 3px;
+  width: 4px;
+  height: 16px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #67e8f9 0%, #6366f1 100%);
+  box-shadow: 0 0 14px rgba(103, 232, 249, 0.55);
+}
+
+.work-stats {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 14px;
+}
+
+.work-stat {
+  flex: 1;
+  min-width: 126px;
+  text-align: left;
+  padding: 18px;
+  border-radius: 16px;
+  background: #162033;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  cursor: default;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
+}
+
+.work-stat--click {
+  cursor: pointer;
+}
+
+.work-stat--click:hover {
+  border-color: rgba(56, 189, 248, 0.52);
+  background: #1e293b;
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.14), 0 18px 34px rgba(0, 0, 0, 0.24);
+  transform: translateY(-2px);
+}
+
+.work-stat-value {
+  font-size: 32px;
+  font-weight: 900;
+  color: #67e8f9;
+  line-height: 1.1;
+  text-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
+}
+
+.work-stat-label {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #dbeafe;
+  font-weight: 700;
+}
+
+.work-stat-hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #8fb3d9;
+}
+
+.links-card {
+  background: #111827;
 }

 .home-content {
@@ -70,24 +389,28 @@ export default {
 }

 .home-desc {
-  margin: 0 0 16px;
-  color: #606266;
+  margin: 0 0 18px;
+  color: #94a3b8;
+  font-size: 13px;
 }

 .project-block {
-  padding: 16px 0;
-  border-bottom: 1px solid #ebeef5;
+  padding: 18px;
+  margin-bottom: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 16px;
+  background: #162033;
 }

 .project-block:last-child {
-  border-bottom: none;
+  margin-bottom: 0;
 }

 .project-title {
  margin-bottom: 12px;
  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
+  font-weight: 800;
+  color: #e0f2fe;
 }

 .link-item {
@@ -97,12 +420,95 @@ export default {
  line-height: 22px;
 }

+.link-item:last-child {
+  margin-bottom: 0;
+}
+
 .link-label {
-  min-width: 140px;
-  color: #606266;
+  min-width: 150px;
+  color: #b7c9df;
+  font-weight: 700;
 }

 .doc-link {
  word-break: break-all;
 }
+
+.doc-link >>> span {
+  color: #67e8f9;
+}
+
+body.theme-light .greet-card,
+body.theme-light .work-card,
+body.theme-light .links-card {
+  background: #ffffff;
+  border-color: #dbe5f3;
+  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.08);
+}
+
+body.theme-light .greet-card {
+  background: radial-gradient(circle at 88% 16%, rgba(96, 165, 250, 0.24), transparent 28%), linear-gradient(135deg, #2563eb 0%, #3b82f6 58%, #60a5fa 100%);
+  color: #ffffff;
+  border-color: rgba(96, 165, 250, 0.42);
+}
+
+body.theme-light .greet-card:after {
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.26), transparent 68%);
+}
+
+body.theme-light .greet-date,
+body.theme-light .greet-progress-label {
+  color: rgba(239, 246, 255, 0.92);
+}
+
+body.theme-light .greet-progress >>> .el-progress-bar__outer {
+  background-color: rgba(255, 255, 255, 0.28);
+}
+
+body.theme-light .greet-login-tip >>> .el-link.el-link--primary {
+  color: #ffffff;
+}
+
+body.theme-light .work-card-title,
+body.theme-light .links-card-title,
+body.theme-light .project-title {
+  color: #0f172a;
+}
+
+body.theme-light .work-card-title:before,
+body.theme-light .links-card-title:before {
+  background: linear-gradient(180deg, #2563eb 0%, #38bdf8 100%);
+  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
+}
+
+body.theme-light .work-stat,
+body.theme-light .project-block {
+  background: #f8fbff;
+  border-color: #e2e8f0;
+}
+
+body.theme-light .work-stat--click:hover {
+  background: #eef6ff;
+  border-color: #bfdbfe;
+  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
+}
+
+body.theme-light .work-stat-value {
+  color: #2563eb;
+  text-shadow: none;
+}
+
+body.theme-light .work-stat-label,
+body.theme-light .link-label {
+  color: #334155;
+}
+
+body.theme-light .work-stat-hint,
+body.theme-light .home-desc {
+  color: #64748b;
+}
+
+body.theme-light .doc-link >>> span {
+  color: #2563eb;
+}
 </style>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,14 +1,22 @@
 <template>
-  <div class="auto-test-main" style="height: 100%">
-    <el-container style="height: 100%">
-      <div class="aside" style="height: 100%">
+  <div class="auto-test-main" :class="themeClass">
+    <el-container class="app-shell">
+      <aside class="aside" :class="{ 'aside--collapse': isCollapse }">
+        <div class="brand-panel">
+          <div class="brand-mark">效</div>
+          <div v-show="!isCollapse" class="brand-copy">
+            <div class="brand-name">{{ systemName }}</div>
+            <div class="brand-subtitle">Quality Workspace</div>
+          </div>
+        </div>
+        <div class="aside-menu-scroll">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
-          background-color="#545c64"
-          text-color="#fff"
-          active-text-color="#ffd04b"
+          :background-color="menuBackgroundColor"
+          :text-color="menuTextColor"
+          :active-text-color="menuActiveTextColor"
          :router="true">
          <template v-for="menu in displayMenus">
            <el-submenu v-if="menu.children && menu.children.length > 0" :index="menuIndex(menu)" :key="'sub-' + menuKey(menu)">
@@ -41,19 +49,25 @@
            </el-menu-item>
          </template>
        </el-menu>
-      </div>
-      <el-container>
-        <el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)">
+        </div>
+      </aside>
+      <el-container class="workspace-shell">
+        <el-header class="header">
          <div class="header-left">
-            <div class="header-icon">
-              <i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
-              <i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
-            </div>
+            <button class="header-icon" type="button" @click="setCollapse">
+              <i v-if="isCollapse" class="el-icon-s-unfold"></i>
+              <i v-else class="el-icon-s-fold"></i>
+            </button>
            <div class="system-name">
              <span>{{ systemName }}</span>
+              <small>测试协作与效能管理平台</small>
            </div>
          </div>
          <div class="header-user">
+            <button class="theme-switch" type="button" @click="toggleTheme">
+              <i :class="themeIcon"></i>
+              <span>{{ themeLabel }}</span>
+            </button>
            <el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
              <span class="user-name-dropdown">
                {{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -65,7 +79,7 @@
            <span v-else class="login-label" @click="goLogin">登录</span>
          </div>
        </el-header>
-        <el-main>
+        <el-main class="main-canvas">
          <router-view class="main-form" name="Manage"></router-view>
        </el-main>
      </el-container>
@@ -79,9 +93,13 @@ export default {
  data() {
    return {
      isCollapse: false,
-      systemName: '效能平台'
+      systemName: '效能平台',
+      uiTheme: localStorage.getItem('uiTheme') || 'dark'
    }
  },
+  mounted() {
+    this.applyTheme()
+  },
  computed: {
    currentUser() {
      return this.$store.state.currentUser
@@ -90,19 +108,55 @@ export default {
      return this.$store.state.userMenus || []
    },
    displayMenus() {
+      const homeMenu = { name: '首页', path: '/effekt', icon: 'el-icon-house', children: [] }
      if (!this.userMenus.length) {
-        return [{ name: '首页', path: '/effekt', icon: 'el-icon-house', children: [] }]
+        return [homeMenu]
      }
-      return this.filterMenus(this.userMenus)
+      const filteredMenus = this.filterMenus(this.userMenus)
+      const menus = this.renameTestPlatformToCycle(filteredMenus)
+      const sorted = this.sortMenusByProductOrder(menus)
+      const withSkillMenu = this.injectBusinessSkillConfigMenu(sorted)
+      const hasHome = withSkillMenu.some(menu => menu.path === '/effekt' || menu.name === '首页')
+      if (hasHome) {
+        return withSkillMenu
+      }
+      return [homeMenu, ...withSkillMenu]
    },
    displayName() {
      if (!this.currentUser) {
        return ''
      }
      return this.currentUser.username || this.currentUser.realName || '未命名用户'
+    },
+    themeClass() {
+      return this.uiTheme === 'light' ? 'theme-shell-light' : 'theme-shell-dark'
+    },
+    themeLabel() {
+      return this.uiTheme === 'light' ? '深色' : '浅色'
+    },
+    themeIcon() {
+      return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
+    },
+    menuBackgroundColor() {
+      return this.uiTheme === 'light' ? '#ffffff' : '#07111f'
+    },
+    menuTextColor() {
+      return this.uiTheme === 'light' ? '#64748b' : '#93a9c7'
+    },
+    menuActiveTextColor() {
+      return this.uiTheme === 'light' ? '#ffffff' : '#e0f2fe'
    }
  },
  methods: {
+    applyTheme() {
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
+    },
+    toggleTheme() {
+      this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem('uiTheme', this.uiTheme)
+      this.applyTheme()
+    },
    setCollapse() {
      this.isCollapse = !this.isCollapse
    },
@@ -117,21 +171,49 @@ export default {
    },
    menuPath(item) {
      const pathMap = {
-        '/system/role': '/system/roles',
-        '/system/user': '/system/users',
-        '/system/menu': '/system/menus'
+        '/system/role': '/system/role',
+        '/system/user': '/system/user',
+        '/system/menu': '/system/menu',
+        '/system/permission': '/system/permission',
+        '/test-platform/skill-rules': '/test-platform/skill-rules',
+        '/bug': '/bug/list',
+        '/bug/list': '/bug/list',
+        '/bug/detail': '/bug/detail',
+        '/bug/create': '/bug/create',
+        '/bug/edit': '/bug/edit',
+        '/bug/stats': '/bug/stats'
      }
      return pathMap[item.path] || item.path || '/effekt'
    },
    menuIcon(item) {
+      const path = String(item.path || '')
+      const pathIconMap = {
+        '/bug': 'el-icon-s-claim',
+        '/bug/create': 'el-icon-document-add',
+        '/bug/list': 'el-icon-document',
+        '/bug/stats': 'el-icon-data-line',
+        '/bug/detail': 'el-icon-view',
+        '/bug/edit': 'el-icon-edit-outline'
+      }
+      if (path && pathIconMap[path]) {
+        return pathIconMap[path]
+      }
      // 按照原来的静态菜单名称映射图标
      const nameIconMap = {
        '首页': 'el-icon-house',
        '测试协作工作台': 'el-icon-s-operation',
        '测试平台': 'el-icon-s-platform',
+        '用例周期': 'el-icon-s-platform',
+        'Bug管理': 'el-icon-s-claim',
+        '新建 Bug': 'el-icon-document-add',
+        '创建Bug': 'el-icon-document-add',
+        '创建 Bug': 'el-icon-document-add',
+        'Bug 列表': 'el-icon-document',
+        'Bug 统计': 'el-icon-data-line',
        '产品管理': 'el-icon-box',
        '项目管理': 'el-icon-s-management',
        '用例管理': 'el-icon-document',
+        '业务技能配置': 'el-icon-collection',
        '测试计划': 'el-icon-date',
        '测试报告': 'el-icon-data-line',
        '测试工具': 'el-icon-s-tools',
@@ -150,7 +232,10 @@ export default {
        peoples: 'el-icon-user-solid',
        user: 'el-icon-user',
        lock: 'el-icon-lock',
-        menu: 'el-icon-menu'
+        menu: 'el-icon-menu',
+        warning: 'el-icon-warning-outline',
+        edit: 'el-icon-edit',
+        document: 'el-icon-document'
      }

      // 优先级：先匹配名称，再匹配接口中指定的 icon，最后返回默认图标 el-icon-menu
@@ -170,10 +255,117 @@ export default {
        return !!item.path && !!this.menuPath(item)
      })
    },
+    renameTestPlatformToCycle(menus) {
+      return (menus || []).map(item => {
+        const name = item.name === '测试平台' ? '用例周期' : item.name
+        const children = item.children && item.children.length
+          ? this.renameTestPlatformToCycle(item.children)
+          : item.children
+        return Object.assign({}, item, { name, children })
+      })
+    },
+    /**
+     * 在「用例周期」分组下、「用例管理」上方插入「业务技能配置」（与后端菜单并存时去重）。
+     */
+    injectBusinessSkillConfigMenu(menus) {
+      const INJECT_PATH = '/test-platform/skill-rules'
+      const INJECT_KEY = '__inject_business_skill__'
+      const makeItem = () => ({
+        name: '业务技能配置',
+        path: INJECT_PATH,
+        icon: 'el-icon-collection',
+        menuId: INJECT_KEY,
+        id: INJECT_KEY,
+        visible: 1,
+        status: 1,
+        children: []
+      })
+      const hasInjected = list =>
+        (list || []).some(c => c.path === INJECT_PATH || c.menuId === INJECT_KEY || c.id === INJECT_KEY)
+      const mergeCycleChildren = children => {
+        if (!children || !children.length) return children || []
+        if (hasInjected(children)) {
+          return children.map(c =>
+            c.children && c.children.length
+              ? Object.assign({}, c, { children: this.injectBusinessSkillConfigMenu(c.children) })
+              : c
+          )
+        }
+        const next = children.map(c =>
+          c.children && c.children.length
+            ? Object.assign({}, c, { children: this.injectBusinessSkillConfigMenu(c.children) })
+            : c
+        )
+        const idx = next.findIndex(c => {
+          const p = String(c.path || '')
+          return p === '/test-platform/case' || c.name === '用例管理'
+        })
+        if (idx >= 0) {
+          next.splice(idx, 0, makeItem())
+        } else {
+          next.unshift(makeItem())
+        }
+        return next
+      }
+      return (menus || []).map(item => {
+        if (item.name === '用例周期' && item.children && item.children.length) {
+          return Object.assign({}, item, { children: mergeCycleChildren(item.children.slice()) })
+        }
+        if (item.children && item.children.length) {
+          return Object.assign({}, item, { children: this.injectBusinessSkillConfigMenu(item.children) })
+        }
+        return item
+      })
+    },
+    /** 左侧栏顶级顺序：首页 → 用例周期 → Bug管理 → 造数 → 系统管理 → 其它 */
+    representativeMenuPath(menu) {
+      const direct = String((menu && menu.path) || '').trim()
+      if (direct) return direct
+      const walk = m => {
+        const q = String((m && m.path) || '').trim()
+        if (q) return q
+        const ch = (m && m.children) || []
+        for (let i = 0; i < ch.length; i++) {
+          const r = walk(ch[i])
+          if (r) return r
+        }
+        return ''
+      }
+      return walk(menu)
+    },
+    menuSortWeight(menu) {
+      const p = this.representativeMenuPath(menu)
+      const n = String((menu && menu.name) || '').trim()
+      if (p === '/effekt' || n === '首页') return 0
+      if (p.indexOf('/test-platform') === 0 || n === '用例周期' || n === '测试平台') return 10
+      if (p.indexOf('/bug') === 0 || n === 'Bug管理' || n.indexOf('Bug') === 0) return 20
+      if (
+        p.indexOf('/create') === 0 ||
+        p.indexOf('/data-tools') === 0 ||
+        /造数|造数工具|造数工厂|数据库造数/.test(n)
+      ) {
+        return 30
+      }
+      if (p.indexOf('/system') === 0 || n === '系统管理') return 40
+      return 50
+    },
+    sortMenusByProductOrder(menus) {
+      const arr = menus || []
+      return arr
+        .map((m, i) => ({ m, i }))
+        .sort((a, b) => {
+          const wa = this.menuSortWeight(a.m)
+          const wb = this.menuSortWeight(b.m)
+          if (wa !== wb) return wa - wb
+          return a.i - b.i
+        })
+        .map(x => x.m)
+    },
    handleUserCommand(command) {
      if (command === 'logout') {
        localStorage.removeItem('authUser')
        localStorage.removeItem('accessToken')
+        localStorage.removeItem('refreshToken')
        localStorage.removeItem('userMenus')
        this.$store.commit('ClearCurrentUser')
        this.$message.success('已退出登录')
@@ -186,49 +378,386 @@ export default {

 <style scoped>
 .auto-test-main {
-  height: 100%;
+  height: 100vh;
  padding: 0;
  margin: 0;
+  overflow: hidden;
+  background: #070b16;
+}
+
+.app-shell {
+  height: 100vh;
+  min-width: 1100px;
+  overflow: hidden;
+  background: radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.22), transparent 30%), #070b16;
+}
+
+.aside {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(180deg, #07111f 0%, #081426 46%, #050914 100%);
+  box-shadow: 12px 0 38px rgba(0, 0, 0, 0.42), inset -1px 0 0 rgba(56, 189, 248, 0.14);
+  transition: width 0.25s ease;
+}
+
+.aside-menu-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.aside-menu-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.aside-menu-scroll::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: rgba(148, 163, 184, 0.35);
+}
+
+.aside-menu-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.aside--collapse .brand-panel {
+  justify-content: center;
+  padding: 18px 8px;
+}
+
+.brand-panel {
+  flex-shrink: 0;
+  height: 72px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 18px;
+  color: #e0f2fe;
+  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.96) 100%);
+  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
+}
+
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+  text-align: center;
+  border-radius: 12px;
+  font-size: 17px;
+  font-weight: 800;
+  color: #06111f;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 0 22px rgba(56, 189, 248, 0.48), 0 12px 30px rgba(99, 102, 241, 0.25);
+}
+
+.brand-name {
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 20px;
+  letter-spacing: 0.6px;
+}
+
+.brand-subtitle {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #67e8f9;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
 }

 .el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  /*min-height: 400px;*/
-}
-
-.header {
-  height: 60px;
-  line-height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.el-header {
-  padding: 0 20px 0 0;
+  width: 220px;
 }

 .el-menu-vertical-demo {
-  height: 100%;
+  border-right: none;
+}
+
+.el-menu-vertical-demo >>> .el-menu-item,
+.el-menu-vertical-demo >>> .el-submenu__title {
+  height: 48px;
+  line-height: 48px;
+  margin: 4px 10px;
+  border-radius: 13px;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.el-menu-vertical-demo >>> .el-menu-item.is-active {
+  color: #e0f2fe !important;
+  background: linear-gradient(135deg, rgba(14, 165, 233, 0.95) 0%, rgba(79, 70, 229, 0.95) 100%) !important;
+  box-shadow: 0 0 24px rgba(56, 189, 248, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.el-menu-vertical-demo >>> .el-menu-item:hover,
+.el-menu-vertical-demo >>> .el-submenu__title:hover {
+  background: rgba(14, 165, 233, 0.12) !important;
+  color: #e0f2fe !important;
+}
+
+.workspace-shell {
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.header {
+  height: 64px !important;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px 0 18px !important;
+  background: rgba(8, 14, 30, 0.88);
+  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
+  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(16px);
 }

 .header-left {
  display: flex;
  align-items: center;
+  gap: 14px;
 }

 .header-icon {
-  padding-left: 15px;
-  padding-right: 15px;
+  width: 38px;
+  height: 38px;
+  border: 1px solid rgba(56, 189, 248, 0.28);
+  border-radius: 12px;
+  color: #7dd3fc;
+  background: rgba(14, 165, 233, 0.1);
+  font-size: 18px;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.header-icon:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
+  transform: translateY(-1px);
+}
+
+.system-name span {
+  display: block;
+  font-size: 17px;
+  line-height: 22px;
+  font-weight: 800;
+  color: #e0f2fe;
+}
+
+.system-name small {
+  display: block;
+  margin-top: 2px;
+  font-size: 12px;
+  color: #7dd3fc;
 }

 .header-user {
-  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #c4d7f2;
  font-size: 14px;
 }

-.login-label {
-  color: #409EFF;
+.theme-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
+  background: rgba(15, 23, 42, 0.86);
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.theme-switch:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
+  transform: translateY(-1px);
+}
+
+.user-name-dropdown {
+  display: inline-flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.86);
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
  cursor: pointer;
 }
+
+.login-label {
+  color: #67e8f9;
+  cursor: pointer;
+}
+
+.main-canvas {
+  height: calc(100vh - 64px);
+  padding: 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: radial-gradient(circle at 82% 14%, rgba(34, 211, 238, 0.14), transparent 24%), linear-gradient(135deg, #08111f 0%, #0b1020 45%, #070b16 100%);
+}
+
+.main-form {
+  min-height: calc(100vh - 104px);
+}
+
+.theme-shell-light.auto-test-main {
+  background: #eef4ff;
+}
+
+.theme-shell-light .app-shell {
+  background: radial-gradient(circle at 18% 8%, rgba(59, 130, 246, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
+}
+
+.theme-shell-light .aside {
+  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 48%, #eaf2ff 100%);
+  box-shadow: 10px 0 30px rgba(37, 99, 235, 0.12), inset -1px 0 0 #dbe5f3;
+}
+
+.theme-shell-light .brand-panel {
+  color: #0f172a;
+  background: linear-gradient(135deg, #ffffff 0%, #eaf2ff 100%);
+  border-bottom-color: #dbe5f3;
+}
+
+.theme-shell-light .brand-mark {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
+}
+
+.theme-shell-light .brand-subtitle {
+  color: #2563eb;
+}
+
+.theme-shell-light .el-menu-vertical-demo {
+  background: #f4f8ff !important;
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu,
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu--inline {
+  background: #f4f8ff !important;
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item,
+.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title {
+  background: transparent !important;
+  color: #64748b !important;
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item.is-active {
+  color: #ffffff !important;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important;
+  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
+}
+
+.theme-shell-light .el-menu-vertical-demo >>> .el-menu-item:hover,
+.theme-shell-light .el-menu-vertical-demo >>> .el-submenu__title:hover {
+  background: #eaf2ff !important;
+  color: #1d4ed8 !important;
+}
+
+.theme-shell-light .header {
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom-color: #dbe5f3;
+  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
+}
+
+.theme-shell-light .header-icon,
+.theme-shell-light .theme-switch,
+.theme-shell-light .user-name-dropdown {
+  color: #1d4ed8;
+  background: #f8fbff;
+  border-color: #dbe5f3;
+}
+
+.theme-shell-light .header-icon:hover,
+.theme-shell-light .theme-switch:hover {
+  background: #eaf2ff;
+  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
+}
+
+.theme-shell-light .system-name span {
+  color: #0f172a;
+}
+
+.theme-shell-light .system-name small,
+.theme-shell-light .login-label {
+  color: #2563eb;
+}
+
+.theme-shell-light .header-user {
+  color: #334155;
+}
+
+.theme-shell-light .main-canvas,
+.theme-shell-light .main-form {
+  background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
+}
+
+/* 深色壳下内容区兜底：避免旧缓存 bundle 未加载 App.vue 全局样式时出现白卡片/白分页 */
+.theme-shell-dark >>> .page-section.el-card {
+  background: #111827;
+  border-color: rgba(148, 163, 184, 0.2);
+  color: #e5e7eb;
+}
+
+.theme-shell-dark >>> .page-section .el-card__header {
+  background: #162033;
+  border-bottom-color: rgba(148, 163, 184, 0.18);
+  color: #f8fafc;
+}
+
+.theme-shell-dark >>> .page-section .el-table,
+.theme-shell-dark >>> .page-section .el-table__expanded-cell,
+.theme-shell-dark >>> .page-section .el-table th,
+.theme-shell-dark >>> .page-section .el-table tr,
+.theme-shell-dark >>> .page-section .el-table td {
+  background-color: #111827 !important;
+  color: #e5e7eb !important;
+}
+
+.theme-shell-dark >>> .page-section .el-table th,
+.theme-shell-dark >>> .page-section .el-table thead th {
+  background: #1f2937 !important;
+  color: #f8fafc !important;
+}
+
+.theme-shell-dark >>> .page-section .el-form-item__label {
+  color: #dbeafe;
+}
+
+.theme-shell-dark >>> .page-section .el-input__inner,
+.theme-shell-dark >>> .page-section .el-textarea__inner,
+.theme-shell-dark >>> .page-section .el-select .el-input__inner {
+  background-color: #0f172a;
+  border-color: rgba(148, 163, 184, 0.28);
+  color: #f8fafc;
+}
+
+.theme-shell-dark >>> .page-section .el-pagination,
+.theme-shell-dark >>> .page-section .el-pagination button,
+.theme-shell-dark >>> .page-section .el-pagination span:not([class*=suffix]) {
+  color: #dbeafe;
+}
+
+.theme-shell-dark >>> .page-section .el-pagination .btn-prev,
+.theme-shell-dark >>> .page-section .el-pagination .btn-next,
+.theme-shell-dark >>> .page-section .el-pager li {
+  background: #111827;
+  color: #dbeafe;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
 </style>
--- a/src/components/System/MenuManage.vue
+++ b/src/components/System/MenuManage.vue
@@ -2,6 +2,8 @@
  <div class="page-wrap">
    <page-section title="菜单管理">
      <template slot="extra">
+        <el-button size="small" :loading="initPermissionMenuLoading" @click="initPermissionMenu">初始化权限管理菜单</el-button>
+        <el-button size="small" :loading="initBugMenuLoading" @click="initBugManagementMenu">初始化 Bug 管理菜单</el-button>
        <el-button type="primary" size="small" @click="openCreate(0)">新建菜单</el-button>
      </template>
      <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
@@ -163,6 +165,8 @@ export default {
    return {
      loading: false,
      submitting: false,
+      initPermissionMenuLoading: false,
+      initBugMenuLoading: false,
      dialogVisible: false,
      dialogMode: 'create',
      queryForm: {
@@ -307,6 +311,179 @@ export default {
          this.fetchTree()
        })
      }).catch(() => {})
+    },
+    initPermissionMenu() {
+      this.initPermissionMenuLoading = true
+      getMenuTree({}).then(res => {
+        const data = res && res.data ? res.data : res || []
+        const tree = Array.isArray(data) ? data : (data.list || data.items || [])
+        const flattened = []
+        this.flattenMenus(tree, flattened)
+
+        let systemMenu = flattened.find(item => {
+          const path = item.path || ''
+          const name = item.name || ''
+          return path === '/system' || name === '系统管理'
+        })
+        const hasPermissionMenu = flattened.some(item => (item.path || '') === '/system/permission')
+
+        const createPermissionChild = parentId => {
+          if (hasPermissionMenu) {
+            this.$message.success('权限管理菜单已存在')
+            return Promise.resolve()
+          }
+          return createMenu({
+            parentId: Number(parentId || 0),
+            name: '权限管理',
+            code: 'system_permission_manage',
+            type: 2,
+            path: '/system/permission',
+            component: '@/components/System/PermissionManage',
+            icon: 'lock',
+            permissionCode: 'permission:list',
+            sort: 40,
+            visible: 1,
+            status: 1
+          })
+        }
+
+        if (systemMenu) {
+          return createPermissionChild(systemMenu.id || systemMenu.menuId)
+        }
+
+        return createMenu({
+          parentId: 0,
+          name: '系统管理',
+          code: 'system_manage',
+          type: 1,
+          path: '/system',
+          component: '',
+          icon: 'setting',
+          permissionCode: '',
+          sort: 90,
+          visible: 1,
+          status: 1
+        }).then(createRes => {
+          const created = (createRes && createRes.data) || {}
+          const parentId = created.id || created.menuId
+          if (parentId) {
+            return createPermissionChild(parentId)
+          }
+          // 如果接口不返回id，则重新拉取菜单树定位系统管理菜单
+          return getMenuTree({}).then(latestRes => {
+            const latestData = latestRes && latestRes.data ? latestRes.data : latestRes || []
+            const latestTree = Array.isArray(latestData) ? latestData : (latestData.list || latestData.items || [])
+            const latestFlattened = []
+            this.flattenMenus(latestTree, latestFlattened)
+            const latestSystem = latestFlattened.find(item => (item.path || '') === '/system' || (item.name || '') === '系统管理')
+            return createPermissionChild(latestSystem ? (latestSystem.id || latestSystem.menuId) : 0)
+          })
+        })
+      }).then(() => {
+        this.$message.success('权限管理菜单初始化完成')
+        this.fetchTree()
+      }).catch(() => {
+        this.$message.error('初始化权限管理菜单失败')
+      }).finally(() => {
+        this.initPermissionMenuLoading = false
+      })
+    },
+    initBugManagementMenu() {
+      this.initBugMenuLoading = true
+      getMenuTree({}).then(res => {
+        const data = res && res.data ? res.data : res || []
+        const tree = Array.isArray(data) ? data : (data.list || data.items || [])
+        const flattened = []
+        this.flattenMenus(tree, flattened)
+        const hasBugMenu = flattened.some(item => String(item.path || '').indexOf('/bug') === 0)
+        if (hasBugMenu) {
+          this.$message.success('Bug 管理菜单已存在')
+          return Promise.resolve()
+        }
+        return createMenu({
+          parentId: 0,
+          name: 'Bug管理',
+          code: 'bug_manage_root',
+          type: 1,
+          path: '/bug',
+          component: '',
+          icon: 'el-icon-s-claim',
+          permissionCode: '',
+          sort: 88,
+          visible: 1,
+          status: 1
+        }).then(parentRes => {
+          const created = (parentRes && parentRes.data) || {}
+          let parentId = created.id || created.menuId
+          const resolveParentId = () => {
+            if (parentId) return Promise.resolve(parentId)
+            return getMenuTree({}).then(latestRes => {
+              const latestData = latestRes && latestRes.data ? latestRes.data : latestRes || []
+              const latestTree = Array.isArray(latestData) ? latestData : (latestData.list || latestData.items || [])
+              const flat = []
+              this.flattenMenus(latestTree, flat)
+              const p = flat.find(item => (item.path || '') === '/bug' || (item.code || '') === 'bug_manage_root')
+              return p ? (p.id || p.menuId) : 0
+            })
+          }
+          return resolveParentId().then(pid => {
+            if (!pid) {
+              return Promise.reject(new Error('未获取到 Bug 管理父菜单 ID'))
+            }
+            const children = [
+              {
+                name: '新建 Bug',
+                code: 'bug_create',
+                path: '/bug/create',
+                component: '@/components/Bug/BugEditor',
+                permissionCode: 'bug:create',
+                sort: 5,
+                icon: 'el-icon-document-add'
+              },
+              {
+                name: 'Bug 列表',
+                code: 'bug_list',
+                path: '/bug/list',
+                component: '@/components/Bug/BugList',
+                permissionCode: 'bug:list',
+                sort: 10,
+                icon: 'el-icon-document'
+              },
+              {
+                name: 'Bug 统计',
+                code: 'bug_stats',
+                path: '/bug/stats',
+                component: '@/components/Bug/BugStats',
+                permissionCode: 'bug:stats',
+                sort: 20,
+                icon: 'el-icon-data-line'
+              }
+            ]
+            return children.reduce((chain, c) => {
+              return chain.then(() => createMenu({
+                parentId: Number(pid),
+                name: c.name,
+                code: c.code,
+                type: 2,
+                path: c.path,
+                component: c.component,
+                icon: c.icon,
+                permissionCode: c.permissionCode,
+                sort: c.sort,
+                visible: 1,
+                status: 1
+              }))
+            }, Promise.resolve())
+          })
+        })
+      }).then(() => {
+        this.$message.success('Bug 管理菜单初始化完成')
+        this.fetchTree()
+      }).catch(() => {
+        this.$message.error('初始化 Bug 管理菜单失败')
+      }).finally(() => {
+        this.initBugMenuLoading = false
+      })
    }
  },
  created() {
--- a/src/components/System/PermissionManage.vue
+++ b/src/components/System/PermissionManage.vue
@@ -0,0 +1,464 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="权限管理">
+      <template slot="extra">
+        <el-button type="primary" size="small" @click="openCreate">新建权限</el-button>
+      </template>
+
+      <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
+        <el-form-item label="关键词">
+          <el-input
+            v-model.trim="queryForm.keyword"
+            placeholder="权限名称"
+            clearable
+            @keyup.enter.native="handleSearch">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="模块">
+          <el-input
+            v-model.trim="queryForm.module"
+            placeholder="模块"
+            clearable
+            @keyup.enter.native="handleSearch">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="queryForm.status" clearable placeholder="全部状态">
+            <el-option label="启用" :value="1"></el-option>
+            <el-option label="禁用" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button @click="resetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%; margin-top: 16px;">
+        <el-table-column prop="code" label="权限编码" min-width="180"></el-table-column>
+        <el-table-column prop="name" label="权限名称" min-width="160"></el-table-column>
+        <el-table-column prop="module" label="模块" min-width="120"></el-table-column>
+        <el-table-column prop="action" label="操作类型" min-width="120"></el-table-column>
+        <el-table-column prop="description" label="描述" min-width="220" show-overflow-tooltip></el-table-column>
+        <el-table-column label="状态" width="100">
+          <template slot-scope="scope">{{ formatStatus(scope.row.status) }}</template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="170">
+          <template slot-scope="scope">{{ formatDateTime(scope.row.created_time || scope.row.createdTime) }}</template>
+        </el-table-column>
+        <el-table-column label="已有角色" min-width="180">
+          <template slot-scope="scope">
+            <div v-if="getRolesForRow(scope.row).length" class="role-tag-wrap">
+              <el-tag
+                v-for="role in getRolesForRow(scope.row)"
+                :key="`${scope.row.id || scope.row.permission_id || ''}-${role.id}`"
+                size="mini">
+                {{ role.name || role.role_name || role.roleName || role.id || '-' }}
+              </el-tag>
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="openAssignRoles(scope.row)">权限分配</el-button>
+            <el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
+            <el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 16px; text-align: right;">
+        <el-pagination
+          :current-page="pageNo"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </page-section>
+
+    <el-dialog :title="dialogMode === 'create' ? '新建权限' : '编辑权限'" :visible.sync="dialogVisible" width="560px" @close="resetDialogForm">
+      <el-form ref="permissionForm" :model="permissionForm" :rules="permissionRules" label-width="94px" size="small">
+        <el-form-item label="权限编码" prop="code">
+          <el-input
+            v-model.trim="permissionForm.code"
+            maxlength="64"
+            placeholder="请输入权限编码"
+            :disabled="dialogMode === 'edit'">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="权限名称" prop="name">
+          <el-input v-model.trim="permissionForm.name" maxlength="64" placeholder="请输入权限名称"></el-input>
+        </el-form-item>
+        <el-form-item label="模块" prop="module">
+          <el-input v-model.trim="permissionForm.module" maxlength="64" placeholder="请输入模块名"></el-input>
+        </el-form-item>
+        <el-form-item label="操作类型" prop="action">
+          <el-input v-model.trim="permissionForm.action" maxlength="64" placeholder="请输入操作类型"></el-input>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="permissionForm.status" placeholder="请选择状态" style="width: 100%;">
+            <el-option label="启用" :value="1"></el-option>
+            <el-option label="禁用" :value="0"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input
+            v-model.trim="permissionForm.description"
+            type="textarea"
+            :rows="4"
+            maxlength="255"
+            show-word-limit
+            placeholder="请输入描述">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="submitting" @click="submitForm">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog title="分配权限到角色" :visible.sync="assignDialogVisible" width="520px" @close="resetAssignDialog">
+      <el-form label-width="90px" size="small">
+        <el-form-item label="权限">
+          <el-input :value="assignPermissionName" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="角色选择">
+          <el-select
+            v-model="selectedRoleIds"
+            multiple
+            filterable
+            clearable
+            placeholder="请选择角色"
+            style="width: 100%;">
+            <el-option
+              v-for="item in roleOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="assignDialogVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="assignSubmitting" @click="submitAssignRoles">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { assignRolePermissions, createPermission, deletePermission, getPermissionDetail, getPermissionList, getRolePageList, updatePermission } from '@/api/rbacApi'
+
+const getDefaultForm = () => ({
+  id: undefined,
+  code: '',
+  name: '',
+  module: '',
+  action: '',
+  description: '',
+  status: 1
+})
+
+export default {
+  name: 'PermissionManage',
+  components: { PageSection },
+  data() {
+    return {
+      loading: false,
+      submitting: false,
+      assignSubmitting: false,
+      dialogVisible: false,
+      assignDialogVisible: false,
+      dialogMode: 'create',
+      queryForm: {
+        keyword: '',
+        module: '',
+        status: ''
+      },
+      pageNo: 1,
+      pageSize: 20,
+      total: 0,
+      tableData: [],
+      roleOptions: [],
+      assignPermissionId: undefined,
+      assignPermissionName: '',
+      selectedRoleIds: [],
+      permissionForm: getDefaultForm(),
+      permissionRules: {
+        code: [{ required: true, message: '请输入权限编码', trigger: 'blur' }],
+        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    fetchList() {
+      this.loading = true
+      getPermissionList({
+        keyword: this.queryForm.keyword,
+        module: this.queryForm.module,
+        status: this.queryForm.status,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.tableData = data.list || data.items || data.data || []
+        this.total = Number(data.total || data.totalCount || this.tableData.length || 0)
+      }).catch(() => {
+        this.tableData = []
+        this.total = 0
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    handleSearch() {
+      this.pageNo = 1
+      this.fetchList()
+    },
+    resetSearch() {
+      this.queryForm = {
+        keyword: '',
+        module: '',
+        status: ''
+      }
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleCurrentChange(val) {
+      this.pageNo = val
+      this.fetchList()
+    },
+    openCreate() {
+      this.dialogMode = 'create'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.permissionForm = getDefaultForm()
+        if (this.$refs.permissionForm) {
+          this.$refs.permissionForm.clearValidate()
+        }
+      })
+    },
+    openEdit(row) {
+      const permissionId = row.permissionId || row.permission_id || row.id
+      this.dialogMode = 'edit'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.permissionForm = Object.assign(getDefaultForm(), row, { id: permissionId })
+        if (this.$refs.permissionForm) {
+          this.$refs.permissionForm.clearValidate()
+        }
+      })
+      if (!permissionId) return
+      getPermissionDetail(permissionId).then(res => {
+        const data = (res && res.data) || res || {}
+        this.permissionForm = Object.assign(getDefaultForm(), data, {
+          id: data.id || data.permissionId || data.permission_id || permissionId
+        })
+      }).catch(() => {})
+    },
+    openAssignRoles(row) {
+      const permissionId = row.permissionId || row.permission_id || row.id
+      if (!permissionId) return
+      this.assignPermissionId = permissionId
+      this.assignPermissionName = row.name || row.code || `权限#${permissionId}`
+      const roles = this.getRolesForRow(row)
+      this.selectedRoleIds = roles
+        .map(r => this.normalizeRoleId(r.id !== undefined && r.id !== null ? r.id : r.roleId))
+        .filter(id => id !== null && id !== undefined)
+      this.assignDialogVisible = true
+      this.fetchRoleOptions().then(() => {
+        const optionIdSet = new Set(this.roleOptions.map(o => this.normalizeRoleId(o.id)))
+        roles.forEach(r => {
+          const rawId = r.id !== undefined && r.id !== null ? r.id : r.roleId
+          const nid = this.normalizeRoleId(rawId)
+          if (nid === null || nid === undefined) return
+          if (!optionIdSet.has(nid)) {
+            this.roleOptions.push({
+              id: nid,
+              name: r.name || r.role_name || r.roleName || String(rawId)
+            })
+            optionIdSet.add(nid)
+          }
+        })
+        this.$nextTick(() => {
+          this.selectedRoleIds = roles
+            .map(r => this.normalizeRoleId(r.id !== undefined && r.id !== null ? r.id : r.roleId))
+            .filter(id => id !== null && id !== undefined)
+        })
+      })
+    },
+    normalizeRoleId(id) {
+      if (id === undefined || id === null || id === '') return null
+      const n = Number(id)
+      return Number.isFinite(n) && String(id) === String(n) ? n : id
+    },
+    fetchRoleOptions() {
+      return getRolePageList({ pageNo: 1, pageSize: 9999 }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || data.data || []
+        this.roleOptions = (Array.isArray(list) ? list : []).map(item => ({
+          id: this.normalizeRoleId(item.id !== undefined && item.id !== null ? item.id : item.roleId),
+          name: item.name || item.code || `角色${item.id || item.roleId}`
+        })).filter(item => item.id !== undefined && item.id !== null)
+      }).catch(() => {
+        this.roleOptions = []
+      })
+    },
+    resetAssignDialog() {
+      this.assignSubmitting = false
+      this.assignPermissionId = undefined
+      this.assignPermissionName = ''
+      this.selectedRoleIds = []
+    },
+    submitAssignRoles() {
+      if (!this.assignPermissionId) return
+      if (!this.selectedRoleIds.length) {
+        this.$message.warning('请至少选择一个角色')
+        return
+      }
+      const permissionId = Number(this.assignPermissionId)
+      if (Number.isNaN(permissionId)) {
+        this.$message.warning('权限 ID 无效')
+        return
+      }
+      const roleIds = Array.from(new Set(
+        (this.selectedRoleIds || []).map(id => Number(id)).filter(id => !Number.isNaN(id))
+      ))
+      if (!roleIds.length) {
+        this.$message.warning('请至少选择一个有效角色')
+        return
+      }
+      this.assignSubmitting = true
+      assignRolePermissions({
+        roleIds,
+        permissionId
+      }).then(res => {
+        if (res && res.code && res.code !== 20000) {
+          this.$message.error((res && res.message) || '权限分配失败')
+          return
+        }
+        const data = (res && res.data) || {}
+        const assignedCount = data.id
+        if (assignedCount !== undefined && assignedCount !== null && assignedCount !== '') {
+          this.$message.success(`权限分配成功，本次处理角色数：${assignedCount}`)
+        } else {
+          this.$message.success((res && res.message) || '权限分配成功')
+        }
+        this.assignDialogVisible = false
+        this.fetchList()
+      }).finally(() => {
+        this.assignSubmitting = false
+      })
+    },
+    getRolesForRow(row) {
+      if (!row) return []
+      const roles = row.roles
+      return Array.isArray(roles) ? roles : []
+    },
+    resetDialogForm() {
+      this.permissionForm = getDefaultForm()
+      this.submitting = false
+      this.$nextTick(() => {
+        if (this.$refs.permissionForm) {
+          this.$refs.permissionForm.resetFields()
+        }
+      })
+    },
+    submitForm() {
+      this.$refs.permissionForm.validate(valid => {
+        if (!valid) {
+          return
+        }
+        this.submitting = true
+        const basePayload = {
+          code: this.permissionForm.code,
+          name: this.permissionForm.name,
+          module: this.permissionForm.module,
+          action: this.permissionForm.action,
+          description: this.permissionForm.description,
+          status: Number(this.permissionForm.status)
+        }
+        const payload = this.dialogMode === 'create'
+          ? basePayload
+          : Object.assign({
+            id: this.permissionForm.id,
+            permissionId: this.permissionForm.id,
+            permission_id: this.permissionForm.id
+          }, basePayload)
+        const request = this.dialogMode === 'create'
+          ? createPermission(payload)
+          : updatePermission(payload)
+        request.then(res => {
+          if (res && res.code && res.code !== 20000) {
+            this.$message.error((res && res.message) || (this.dialogMode === 'create' ? '权限创建失败' : '权限更新失败'))
+            return
+          }
+          this.$message.success((res && res.message) || (this.dialogMode === 'create' ? '权限创建成功' : '权限更新成功'))
+          this.dialogVisible = false
+          this.pageNo = 1
+          this.fetchList()
+        }).finally(() => {
+          this.submitting = false
+        })
+      })
+    },
+    handleDelete(row) {
+      const permissionId = row.permissionId || row.permission_id || row.id
+      if (!permissionId) return
+      this.$confirm('确认删除该权限吗？', '提示', { type: 'warning' }).then(() => {
+        return deletePermission({
+          id: permissionId,
+          permissionId: permissionId,
+          permission_id: permissionId
+        }).then(res => {
+          if (res && res.code && res.code !== 20000) {
+            this.$message.error((res && res.message) || '权限删除失败')
+            return
+          }
+          this.$message.success((res && res.message) || '权限删除成功')
+          if (this.tableData.length === 1 && this.pageNo > 1) {
+            this.pageNo = this.pageNo - 1
+          }
+          this.fetchList()
+        })
+      }).catch(() => {})
+    },
+    formatStatus(value) {
+      return Number(value) === 0 ? '禁用' : '启用'
+    },
+    formatDateTime(value) {
+      if (!value) return '-'
+      return String(value).replace('T', ' ').slice(0, 19)
+    }
+  },
+  created() {
+    this.fetchList()
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+
+.role-tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  line-height: 1.4;
+}
+</style>
--- a/src/components/System/UserManage.vue
+++ b/src/components/System/UserManage.vue
@@ -125,7 +125,7 @@

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import { assignUserRoles, createUser, deleteUser, getRoleList, getUserList, getUserRoleList, updateUser } from '@/api/rbacApi'
+import { assignUserRoles, createUser, deleteUser, getRolePageList, getUserList, getUserRoleList, updateUser } from '@/api/rbacApi'

 const getDefaultForm = () => ({
  userId: undefined,
@@ -191,11 +191,11 @@ export default {
      })
    },
    fetchRoleOptions() {
-      return getRoleList({ pageNo: 1, pageSize: 9999 }).then(res => {
+      return getRolePageList({ pageNo: 1, pageSize: 9999 }).then(res => {
        const data = res && res.data ? res.data : res || {}
-        const list = data.items || data.list || data.data || []
+        const list = data.list || data.items || data.data || []
        this.roleOptions = list.map(item => ({
-          id: item.id || item.roleId,
+          id: item.id,
          name: item.name
        }))
      }).catch(() => {
@@ -255,9 +255,11 @@ export default {
      this.assignUserId = row.userId || row.id
      this.assignUserName = row.username
      this.assignDialogVisible = true
-      Promise.all([this.fetchRoleOptions(), getUserRoleList(this.assignUserId)]).then(([, res]) => {
+      this.fetchRoleOptions()
+      getUserRoleList(this.assignUserId).then(res => {
        const data = res && res.data ? res.data : res || {}
-        this.selectedRoleIds = data.roleIds || data.role_ids || []
+        const roleIds = data.roleIds || data.role_ids || []
+        this.selectedRoleIds = roleIds.map(id => Number(id))
      }).catch(() => {
        this.selectedRoleIds = []
      })
--- a/src/components/TestPlatform/Case/CaseEditor.vue
+++ b/src/components/TestPlatform/Case/CaseEditor.vue
@@ -2,8 +2,44 @@
  <div class="page-wrap">
    <page-section :title="form.id ? '编辑用例' : '新建用例'">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 200px;"></el-input>
+        <el-form-item label="产品" prop="productId">
+          <el-select
+            v-model="form.productId"
+            filterable
+            clearable
+            placeholder="请选择产品"
+            style="width: 360px;"
+            @change="handleProductChange"
+            @focus="loadProductOptions">
+            <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目" prop="projectId">
+          <el-select
+            v-model="form.projectId"
+            filterable
+            clearable
+            placeholder="请选择项目"
+            style="width: 360px;"
+            :disabled="!form.productId"
+            @change="handleProjectChange">
+            <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="模块" prop="moduleId">
+          <el-select
+            v-model="form.moduleId"
+            filterable
+            clearable
+            placeholder="请选择模块"
+            style="width: 360px;"
+            :disabled="!form.projectId"
+            @focus="loadModuleOptions">
+            <el-option v-for="item in moduleOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.id" label="用例编号">
+          <el-input v-model="form.caseKey" placeholder="不填则由后端自动生成"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
@@ -11,9 +47,12 @@
        <el-form-item label="前置条件">
          <el-input v-model="form.preconditions" type="textarea" :rows="3"></el-input>
        </el-form-item>
-        <el-form-item label="步骤(JSON)" prop="steps">
+        <el-form-item label="步骤">
          <el-input v-model="stepsText" type="textarea" :rows="10"></el-input>
        </el-form-item>
+        <el-form-item label="预期结果">
+          <el-input v-model="expectedResultText" type="textarea" :rows="3" placeholder="请输入预期结果"></el-input>
+        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="form.priority">
            <el-option label="P0" :value="0"></el-option>
@@ -23,19 +62,32 @@
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
-          <el-select v-model="form.case_type">
+          <el-select v-model="form.caseType">
            <el-option label="功能" :value="1"></el-option>
            <el-option label="性能" :value="2"></el-option>
            <el-option label="安全" :value="3"></el-option>
            <el-option label="接口" :value="4"></el-option>
          </el-select>
        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="form.status">
+            <el-option label="正常" :value="1"></el-option>
+            <el-option label="已废弃" :value="2"></el-option>
+            <el-option label="评审中" :value="3"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否自动化">
+          <el-select v-model="form.isAuto">
+            <el-option label="未实现" :value="0"></el-option>
+            <el-option label="已实现" :value="1"></el-option>
+          </el-select>
+        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="tagsText" placeholder="多个标签用逗号分隔"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="saving" @click="submitForm">保存</el-button>
-          <el-button @click="$router.push('/test-platform/cases')">返回</el-button>
+          <el-button @click="backList">返回</el-button>
        </el-form-item>
      </el-form>
    </page-section>
@@ -44,7 +96,9 @@

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import { createCase, getCaseDetail, updateCase } from '@/api/caseApi'
+import { createCase, getCaseDetail, getModuleTree, updateCase } from '@/api/caseApi'
+import { getProductList } from '@/api/productApi'
+import { getProjectDetail, getProjectList } from '@/api/projectApi'

 export default {
  name: 'CaseEditor',
@@ -52,59 +106,205 @@ export default {
  data() {
    return {
      saving: false,
-      projectId: this.$route.query.projectId || 1,
+      productOptions: [],
+      projectOptions: [],
+      moduleOptions: [],
      form: {
+        productId: this.$route.query.productId ? Number(this.$route.query.productId) : '',
+        projectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
        id: '',
+        moduleId: '',
+        caseKey: '',
        title: '',
        preconditions: '',
        steps: [],
        priority: 2,
-        case_type: 1,
-        tags: []
+        caseType: 1,
+        tags: [],
+        status: 1,
+        isAuto: 0
      },
-      stepsText: '[]',
+      stepsText: '',
+      expectedResultText: '',
      tagsText: '',
      rules: {
+        productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
+        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
+        moduleId: [{ required: true, message: '请选择模块', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
-        steps: [{ required: true, message: '请输入步骤', trigger: 'change' }]
+        // 步骤为文本输入，不做 JSON 校验；是否为空在 submitForm 里校验
      }
    }
  },
  methods: {
+    loadProductOptions() {
+      if (this.productOptions && this.productOptions.length > 0) {
+        return Promise.resolve()
+      }
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.productOptions = []
+      })
+    },
+    loadProjectOptions() {
+      if (!this.form.productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId: this.form.productId }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.projectOptions = []
+      })
+    },
+    loadModuleOptions() {
+      if (!this.form.projectId) {
+        this.moduleOptions = []
+        return Promise.resolve()
+      }
+      return getModuleTree({ projectId: this.form.projectId }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || []
+        this.moduleOptions = Array.isArray(list) ? list : []
+      }).catch(() => {
+        this.moduleOptions = []
+      })
+    },
+    handleProductChange() {
+      this.form.projectId = ''
+      this.form.moduleId = ''
+      this.projectOptions = []
+      this.moduleOptions = []
+      this.loadProjectOptions()
+    },
+    handleProjectChange() {
+      this.form.moduleId = ''
+      this.moduleOptions = []
+      this.loadModuleOptions()
+    },
    fetchDetail() {
      const caseId = this.$route.query.caseId
      if (!caseId) {
        return
      }
-      getCaseDetail(this.projectId, caseId).then(res => {
+      getCaseDetail(this.form.projectId, caseId).then(res => {
        const data = (res && res.data) || res || {}
-        this.form = Object.assign({}, this.form, data)
-        this.stepsText = JSON.stringify(data.steps || [], null, 2)
-        this.tagsText = (data.tags || []).join(',')
+        this.form = Object.assign({}, this.form, {
+          id: data.id || caseId,
+          moduleId: data.moduleId || data.module_id || '',
+          caseKey: data.caseKey || data.case_key || '',
+          title: data.title || '',
+          preconditions: data.preconditions || '',
+          steps: data.steps || [],
+          priority: data.priority !== undefined ? data.priority : 2,
+          caseType: data.caseType || data.case_type || 1,
+          tags: data.tags || [],
+          status: data.status || 1,
+          isAuto: data.isAuto !== undefined ? data.isAuto : (data.is_auto !== undefined ? data.is_auto : 0)
+        })
+        this.stepsText = this.formatStepsToText(this.form.steps || [])
+        this.expectedResultText = data.expectedResults || data.expected_results || this.extractExpectedResultFromSteps(this.form.steps || [])
+        this.tagsText = Array.isArray(this.form.tags) ? this.form.tags.join(',') : (this.form.tags || '')
+        if (this.form.projectId) {
+          this.loadModuleOptions()
+        }
      })
    },
    submitForm() {
-      try {
-        this.form.steps = JSON.parse(this.stepsText || '[]')
-      } catch (e) {
-        this.$message({ type: 'error', message: '步骤 JSON 格式错误' })
+      const expectedResult = (this.expectedResultText || '').trim()
+      const stepsText = String(this.stepsText || '').trim()
+
+      if (!stepsText) {
+        this.$message({ type: 'error', message: '请输入步骤' })
        return
      }
-      this.form.tags = this.tagsText ? this.tagsText.split(',').map(item => item.trim()).filter(Boolean) : []
+      const tags = this.tagsText ? this.tagsText.split(',').map(item => item.trim()).filter(Boolean) : []
+      const payload = this.cleanParams({
+        projectId: this.form.projectId,
+        moduleId: this.form.moduleId,
+        caseKey: this.form.caseKey,
+        title: this.form.title,
+        preconditions: this.form.preconditions,
+        steps: stepsText,
+        expectedResults: expectedResult,
+        priority: this.form.priority,
+        caseType: this.form.caseType,
+        tags,
+        status: this.form.status,
+        isAuto: this.form.isAuto
+      })
      this.saving = true
-      const request = this.form.id || this.$route.query.caseId
-        ? updateCase(this.projectId, this.form.id || this.$route.query.caseId, this.form)
-        : createCase(this.projectId, this.form)
+      const caseId = this.form.id || this.$route.query.caseId
+      const request = caseId ? updateCase(this.form.projectId, caseId, payload) : createCase(this.form.projectId, payload)
      request.then(() => {
        this.$message({ type: 'success', message: '保存成功' })
-        this.$router.push({ path: '/test-platform/cases', query: { projectId: this.projectId } })
+        this.backList()
      }).finally(() => {
        this.saving = false
      })
+    },
+    cleanParams(params) {
+      return Object.keys(params).reduce((result, key) => {
+        if (params[key] !== '' && params[key] !== undefined && params[key] !== null) {
+          result[key] = params[key]
+        }
+        return result
+      }, {})
+    },
+    formatStepsToText(steps) {
+      if (typeof steps === 'string') return steps
+      if (!Array.isArray(steps)) return ''
+      return steps
+        .map(item => {
+          if (item === null || item === undefined) return ''
+          if (typeof item === 'string') return item
+          return item.action || item.step || item.description || item.text || item.content || ''
+        })
+        .filter(Boolean)
+        .join('\n')
+    },
+    extractExpectedResultFromSteps(steps) {
+      if (!Array.isArray(steps) || steps.length === 0) return ''
+      const first = steps[0]
+      if (first && typeof first === 'object') {
+        return first.expected || first.expected_result || first.expectedResult || ''
+      }
+      return ''
+    },
+    backList() {
+      this.$router.push({
+        path: '/test-platform/case',
+        query: {
+          productId: this.form.productId || undefined,
+          projectId: this.form.projectId || undefined,
+          tab: 'cases'
+        }
+      })
    }
  },
  created() {
-    this.fetchDetail()
+    this.loadProductOptions().then(() => {
+      if (this.form.projectId && !this.form.productId) {
+        return getProjectDetail(this.form.projectId).then(res => {
+          const data = res && res.data ? res.data : res || {}
+          const pid = data.productId || data.product_id || ''
+          if (pid) {
+            this.form.productId = pid
+          }
+        }).catch(() => {})
+      }
+    }).then(() => {
+      return this.loadProjectOptions()
+    }).then(() => {
+      if (this.form.projectId) {
+        return this.loadModuleOptions()
+      }
+    }).finally(() => {
+      this.fetchDetail()
+    })
  }
 }
 </script>
--- a/src/components/TestPlatform/Case/CaseList.vue
+++ b/src/components/TestPlatform/Case/CaseList.vue
--- a/src/components/TestPlatform/Case/DocumentSourcePanel.vue
+++ b/src/components/TestPlatform/Case/DocumentSourcePanel.vue
@@ -0,0 +1,999 @@
+<template>
+  <div class="document-source-panel">
+    <div v-if="!compact" class="document-source-main">
+    <div class="document-source-head">
+      <span class="document-source-title">文档源</span>
+      <span class="document-source-hint">PRD / 飞书</span>
+    </div>
+
+    <el-form :inline="true" size="mini" class="document-source-filters" @submit.native.prevent>
+      <el-form-item label="类型">
+        <el-select v-model="docQuery.type" clearable placeholder="全部" style="width: 88px;">
+          <el-option label="PDF" :value="1"></el-option>
+          <el-option label="飞书" :value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="docQuery.status" clearable placeholder="全部" style="width: 100px;">
+          <el-option label="待解析" :value="0"></el-option>
+          <el-option label="已解析" :value="1"></el-option>
+          <el-option label="已生成用例" :value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="关键词">
+        <el-input
+          v-model="docQuery.keyword"
+          clearable
+          placeholder="来源"
+          style="width: 120px;"
+          @keyup.enter.native="handleDocSearch">
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :disabled="!projectId" @click="handleDocSearch">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" :disabled="!projectId" @click="openCreateDialog">新建</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" :disabled="!projectId" @click="openBatchModuleDialog">批量建模块</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      ref="docTable"
+      v-loading="docLoading"
+      :data="docTableData"
+      border
+      size="small"
+      :height="tableHeight"
+      highlight-current-row
+      class="document-source-table"
+      :empty-text="projectId ? '暂无文档' : '请先选择项目'"
+      @row-click="handleDocRowClick">
+      <el-table-column prop="id" label="ID" width="56"></el-table-column>
+      <el-table-column label="类型" width="72">
+        <template slot-scope="scope">
+          <el-tag size="mini" :type="scope.row.type === 2 ? 'warning' : 'info'">{{ formatDocType(scope.row.type) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="88">
+        <template slot-scope="scope">
+          <el-tag size="mini" :type="docStatusTagType(scope.row.status)">{{ formatDocStatus(scope.row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="来源" min-width="100" show-overflow-tooltip>
+        <template slot-scope="scope">{{ scope.row.source }}</template>
+      </el-table-column>
+      <el-table-column prop="updated_time" label="更新时间" width="136" show-overflow-tooltip></el-table-column>
+      <el-table-column label="操作" width="120" fixed="right">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click.stop="openDetail(scope.row)">详情</el-button>
+          <el-dropdown trigger="click" @command="cmd => handleDocCommand(cmd, scope.row)">
+            <el-button type="text" size="mini">更多</el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-if="scope.row.type === 2" command="refresh">刷新飞书</el-dropdown-item>
+              <el-dropdown-item command="generate">生成用例</el-dropdown-item>
+              <el-dropdown-item command="edit">编辑</el-dropdown-item>
+              <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="document-source-pagination">
+      <el-pagination
+        small
+        layout="total, prev, pager, next"
+        :current-page="docPageNo"
+        :page-size="docPageSize"
+        :total="docTotal"
+        @current-change="handleDocPageChange">
+      </el-pagination>
+    </div>
+    </div>
+
+    <!-- 详情 -->
+    <el-drawer title="文档详情" :visible.sync="detailVisible" direction="rtl" size="480px" append-to-body>
+      <div v-loading="detailLoading" class="document-detail-body">
+        <template v-if="detailRecord">
+          <el-descriptions :column="1" size="small" border>
+            <el-descriptions-item label="ID">{{ detailRecord.id }}</el-descriptions-item>
+            <el-descriptions-item label="类型">{{ formatDocType(detailRecord.type) }}</el-descriptions-item>
+            <el-descriptions-item label="状态">{{ formatDocStatus(detailRecord.status) }}</el-descriptions-item>
+            <el-descriptions-item label="来源">{{ detailRecord.source }}</el-descriptions-item>
+            <el-descriptions-item label="版本">{{ detailRecord.version }}</el-descriptions-item>
+            <el-descriptions-item label="AI 模型">{{ detailRecord.ai_model || '—' }}</el-descriptions-item>
+            <el-descriptions-item label="创建时间">{{ detailRecord.created_time }}</el-descriptions-item>
+            <el-descriptions-item label="更新时间">{{ detailRecord.updated_time }}</el-descriptions-item>
+          </el-descriptions>
+          <div class="document-detail-content-label">内容</div>
+          <el-input v-model="detailContentDisplay" type="textarea" :rows="14" readonly></el-input>
+        </template>
+      </div>
+    </el-drawer>
+
+    <!-- 新建 -->
+    <el-dialog title="新建文档" :visible.sync="createVisible" width="560px" append-to-body @close="resetCreateForm">
+      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="96px" size="small">
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="createForm.type" style="width: 100%;" @change="onCreateTypeChange">
+            <el-option label="PDF" :value="1"></el-option>
+            <el-option label="飞书链接" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+
+        <template v-if="createForm.type === 1">
+          <el-form-item label="PDF 上传">
+            <div class="pdf-upload-row">
+              <el-button size="small" type="primary" plain :disabled="!projectId" @click="triggerPdfMultiSelect">选择 PDF（可多选）</el-button>
+              <span class="pdf-upload-hint">每个文件将单独请求上传接口</span>
+            </div>
+            <input
+              ref="pdfMultiInput"
+              type="file"
+              class="hidden-pdf-input"
+              multiple
+              accept=".pdf,application/pdf"
+              @change="onPdfMultiInputChange">
+            <ul v-if="pdfPendingFiles.length" class="pdf-pending-list">
+              <li v-for="(f, idx) in pdfPendingFiles" :key="idx + f.name + f.size" class="pdf-pending-item">
+                <span class="pdf-pending-name">{{ f.name }}</span>
+                <span class="pdf-pending-size">（{{ formatFileSize(f.size) }}）</span>
+                <el-button type="text" size="mini" @click="removePdfPending(idx)">移除</el-button>
+              </li>
+            </ul>
+            <p v-else class="pdf-upload-empty">未选择文件</p>
+          </el-form-item>
+        </template>
+
+        <template v-else>
+          <el-form-item label="来源" prop="source">
+            <el-input v-model="createForm.source" placeholder="飞书文档链接"></el-input>
+          </el-form-item>
+          <el-form-item label="内容">
+            <el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="可选"></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="createVisible = false">取消</el-button>
+        <template v-if="createForm.type === 1">
+          <el-button
+            type="primary"
+            size="small"
+            :loading="pdfUploading"
+            :disabled="!pdfPendingFiles.length || !projectId"
+            @click="submitAllPdfUploads">
+            上传全部
+          </el-button>
+        </template>
+        <el-button v-else type="primary" size="small" :loading="createSubmitting" @click="submitCreate">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 编辑 -->
+    <el-dialog title="编辑文档" :visible.sync="editVisible" width="520px" append-to-body @close="resetEditForm">
+      <el-form ref="editFormRef" :model="editForm" label-width="96px" size="small">
+        <el-form-item label="类型">
+          <el-select v-model="editForm.type" style="width: 100%;">
+            <el-option label="PDF" :value="1"></el-option>
+            <el-option label="飞书链接" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="来源">
+          <el-input v-model="editForm.source"></el-input>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input v-model="editForm.content" type="textarea" :rows="5"></el-input>
+        </el-form-item>
+        <el-form-item label="AI 模型">
+          <el-input v-model="editForm.ai_model" placeholder="可选"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="editVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="editSubmitting" @click="submitEdit">保存</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 生成 / 匹配 / 导入 -->
+    <el-drawer
+      title="从文档生成用例"
+      :visible.sync="generateVisible"
+      direction="rtl"
+      size="640px"
+      append-to-body
+      @close="resetGenerateState">
+      <div v-if="activeDocument" class="generate-drawer-head">
+        <el-tag size="small">文档 #{{ activeDocument.id }}</el-tag>
+        <span class="generate-drawer-source">{{ activeDocument.source }}</span>
+      </div>
+      <el-form :inline="true" size="small" class="generate-form">
+        <el-form-item label="默认优先级">
+          <el-select v-model="genForm.priority" style="width: 100px;">
+            <el-option label="P0" :value="1"></el-option>
+            <el-option label="P1" :value="2"></el-option>
+            <el-option label="P2" :value="3"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用例类型">
+          <el-input-number v-model="genForm.caseType" :min="1" :max="99" size="small"></el-input-number>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :loading="generateLoading" @click="runGenerate">生成预览</el-button>
+          <el-button :loading="matchLoading" :disabled="!previewCases.length" @click="runMatch">匹配模块</el-button>
+          <el-button type="success" :loading="importLoading" :disabled="!previewCases.length" @click="runImport">导入选中</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="previewCases" border size="small" max-height="420">
+        <el-table-column width="48">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.selected"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="标题" min-width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column label="模块" width="120">
+          <template slot-scope="scope">
+            <span>{{ scope.row.module_name || '—' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="模块ID" width="88">
+          <template slot-scope="scope">
+            <el-input v-model.number="scope.row.module_id" size="mini" placeholder="必填"></el-input>
+          </template>
+        </el-table-column>
+      </el-table>
+      <p v-if="previewTotal" class="generate-total-hint">共 {{ previewTotal }} 条预览（导入前请为每行填写模块ID）</p>
+    </el-drawer>
+
+    <!-- 批量建模块 -->
+    <el-dialog title="批量创建模块" :visible.sync="batchModuleVisible" width="480px" append-to-body>
+      <p class="batch-module-tip">每行一个模块名称，将创建在当前项目下。</p>
+      <el-input v-model="batchModuleText" type="textarea" :rows="8" placeholder="例如：用户管理&#10;订单中心"></el-input>
+      <span slot="footer">
+        <el-button size="small" @click="batchModuleVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="batchModuleSubmitting" @click="submitBatchModules">创建</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import {
+  getDocumentList,
+  getDocumentDetail,
+  uploadDocumentPdf,
+  createDocument,
+  updateDocument,
+  deleteDocument,
+  refreshDocument,
+  generateDocumentCases,
+  matchDocumentModules,
+  importDocumentCases,
+  batchCreateDocumentModules
+} from '@/api/documentApi'
+
+export default {
+  name: 'DocumentSourcePanel',
+  props: {
+    productId: {
+      type: [Number, String],
+      default: ''
+    },
+    projectId: {
+      type: [Number, String],
+      default: ''
+    },
+    /** 文档列表表格高度（独立 Tab 可传更大值） */
+    tableHeight: {
+      type: [Number, String],
+      default: 360
+    },
+    /** 仅保留新建/编辑等弹窗，不展示列表与筛选；不自动请求文档列表 */
+    compact: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      docQuery: {
+        type: '',
+        status: '',
+        keyword: ''
+      },
+      docPageNo: 1,
+      docPageSize: 10,
+      docTotal: 0,
+      docTableData: [],
+      docLoading: false,
+      detailVisible: false,
+      detailLoading: false,
+      detailRecord: null,
+      createVisible: false,
+      createSubmitting: false,
+      pdfUploading: false,
+      pdfPendingFiles: [],
+      createForm: {
+        type: 1,
+        source: '',
+        content: ''
+      },
+      createRules: {
+        source: [{ required: true, message: '请输入飞书链接', trigger: 'blur' }]
+      },
+      editVisible: false,
+      editSubmitting: false,
+      editForm: {
+        documentId: null,
+        type: 1,
+        source: '',
+        content: '',
+        ai_model: ''
+      },
+      generateVisible: false,
+      generateLoading: false,
+      matchLoading: false,
+      importLoading: false,
+      activeDocument: null,
+      genForm: {
+        priority: 2,
+        caseType: 1
+      },
+      previewCases: [],
+      previewTotal: 0,
+      batchModuleVisible: false,
+      batchModuleText: '',
+      batchModuleSubmitting: false
+    }
+  },
+  computed: {
+    ...mapState(['currentUser']),
+    detailContentDisplay() {
+      if (!this.detailRecord) return ''
+      return this.detailRecord.content || ''
+    }
+  },
+  watch: {
+    projectId: {
+      immediate: true,
+      handler(val) {
+        this.docPageNo = 1
+        if (this.compact) {
+          if (!val) {
+            this.docTableData = []
+            this.docTotal = 0
+          }
+          return
+        }
+        if (val) {
+          this.fetchDocuments()
+        } else {
+          this.docTableData = []
+          this.docTotal = 0
+        }
+      }
+    }
+  },
+  methods: {
+    formatDocType(type) {
+      if (type === 2) return '飞书'
+      if (type === 1) return 'PDF'
+      return '—'
+    },
+    formatDocStatus(status) {
+      const map = { 0: '待解析', 1: '已解析', 2: '已生成用例' }
+      return map[status] !== undefined ? map[status] : '—'
+    },
+    docStatusTagType(status) {
+      if (status === 0) return 'info'
+      if (status === 1) return 'success'
+      if (status === 2) return 'warning'
+      return ''
+    },
+    cleanParams(obj) {
+      return Object.keys(obj || {}).reduce((acc, key) => {
+        const v = obj[key]
+        if (v !== '' && v !== undefined && v !== null) {
+          acc[key] = v
+        }
+        return acc
+      }, {})
+    },
+    fetchDocuments() {
+      if (!this.projectId) {
+        this.docTableData = []
+        this.docTotal = 0
+        return
+      }
+      this.docLoading = true
+      const params = this.cleanParams({
+        productId: this.productId || undefined,
+        projectId: this.projectId,
+        type: this.docQuery.type,
+        status: this.docQuery.status,
+        keyword: this.docQuery.keyword,
+        pageNo: this.docPageNo,
+        pageSize: this.docPageSize
+      })
+      getDocumentList(params)
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.list || data.items || []
+          this.docTableData = Array.isArray(list) ? list : []
+          this.docTotal = Number(data.total || 0)
+        })
+        .catch(() => {
+          this.docTableData = []
+          this.docTotal = 0
+        })
+        .finally(() => {
+          this.docLoading = false
+        })
+    },
+    handleDocSearch() {
+      this.docPageNo = 1
+      this.fetchDocuments()
+    },
+    handleDocPageChange(p) {
+      this.docPageNo = p
+      this.fetchDocuments()
+    },
+    handleDocRowClick(row) {
+      if (this.compact || !this.$refs.docTable) return
+      if (this.$refs.docTable.setCurrentRow) {
+        this.$refs.docTable.setCurrentRow(row)
+      }
+    },
+    syncDocumentListAfterMutation() {
+      if (this.compact) {
+        this.$emit('document-changed')
+      } else {
+        this.fetchDocuments()
+      }
+    },
+    openDetail(row) {
+      this.detailVisible = true
+      this.detailRecord = Object.assign({}, row)
+      this.detailLoading = true
+      getDocumentDetail({ documentId: row.id })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          this.detailRecord = data
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.detailLoading = false
+        })
+    },
+    openCreateDialog() {
+      if (!this.productId || !this.projectId) {
+        this.$message.warning('请先选择产品与项目')
+        return
+      }
+      this.createForm = {
+        type: 1,
+        source: '',
+        content: ''
+      }
+      this.pdfPendingFiles = []
+      this.createVisible = true
+      this.$nextTick(() => {
+        this.$refs.createFormRef && this.$refs.createFormRef.clearValidate()
+      })
+    },
+    resetCreateForm() {
+      this.createForm = { type: 1, source: '', content: '' }
+      this.pdfPendingFiles = []
+      if (this.$refs.pdfMultiInput) {
+        this.$refs.pdfMultiInput.value = ''
+      }
+    },
+    onCreateTypeChange() {
+      this.pdfPendingFiles = []
+      if (this.$refs.pdfMultiInput) {
+        this.$refs.pdfMultiInput.value = ''
+      }
+      this.$nextTick(() => {
+        this.$refs.createFormRef && this.$refs.createFormRef.clearValidate()
+      })
+    },
+    triggerPdfMultiSelect() {
+      this.$refs.pdfMultiInput && this.$refs.pdfMultiInput.click()
+    },
+    onPdfMultiInputChange(e) {
+      const input = e && e.target
+      const picked = input && input.files ? Array.from(input.files) : []
+      if (input) {
+        input.value = ''
+      }
+      const pdfs = picked.filter(f => {
+        const name = String(f.name || '').toLowerCase()
+        return name.endsWith('.pdf') || f.type === 'application/pdf'
+      })
+      if (picked.length && pdfs.length < picked.length) {
+        this.$message.warning('已忽略非 PDF 文件')
+      }
+      const seen = new Set(this.pdfPendingFiles.map(x => `${x.name}_${x.size}`))
+      pdfs.forEach(f => {
+        const key = `${f.name}_${f.size}`
+        if (!seen.has(key)) {
+          seen.add(key)
+          this.pdfPendingFiles.push(f)
+        }
+      })
+    },
+    removePdfPending(index) {
+      this.pdfPendingFiles.splice(index, 1)
+    },
+    formatFileSize(bytes) {
+      const n = Number(bytes)
+      if (!Number.isFinite(n) || n < 0) return '—'
+      if (n < 1024) return `${n} B`
+      if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`
+      return `${(n / 1024 / 1024).toFixed(1)} MB`
+    },
+    async submitAllPdfUploads() {
+      if (!this.productId || !this.projectId) {
+        this.$message.warning('请先选择产品与项目')
+        return
+      }
+      const files = this.pdfPendingFiles.slice()
+      if (!files.length) {
+        this.$message.warning('请先选择 PDF 文件')
+        return
+      }
+      const productId = Number(this.productId)
+      const projectId = Number(this.projectId)
+      const createdBy = this.currentUser && this.currentUser.id ? this.currentUser.id : undefined
+      this.pdfUploading = true
+      const failed = []
+      let ok = 0
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        try {
+          await uploadDocumentPdf({ file, productId, projectId, createdBy })
+          ok += 1
+        } catch (e) {
+          failed.push(file)
+        }
+      }
+      this.pdfUploading = false
+      this.pdfPendingFiles = failed
+      if (ok) {
+        this.syncDocumentListAfterMutation()
+      }
+      if (ok && !failed.length) {
+        this.$message.success(`已上传 ${ok} 个 PDF`)
+        this.createVisible = false
+      } else if (ok && failed.length) {
+        this.$message.warning(`成功 ${ok} 个，失败 ${failed.length} 个；失败项仍留在列表中，可修正后重试`)
+      } else {
+        this.$message.error('上传失败，请检查网络或文件后重试')
+      }
+    },
+    submitCreate() {
+      if (this.createForm.type === 1) {
+        this.$message.info('PDF 请使用「选择 PDF」并点击「上传全部」')
+        return
+      }
+      this.$refs.createFormRef.validate(valid => {
+        if (!valid) return
+        this.createSubmitting = true
+        const payload = {
+          productId: Number(this.productId),
+          projectId: Number(this.projectId),
+          type: this.createForm.type,
+          source: this.createForm.source,
+          content: this.createForm.content || undefined
+        }
+        if (this.currentUser && this.currentUser.id) {
+          payload.createdBy = this.currentUser.id
+        }
+        createDocument(payload)
+          .then(() => {
+            this.$message.success('创建成功')
+            this.createVisible = false
+            this.syncDocumentListAfterMutation()
+          })
+          .finally(() => {
+            this.createSubmitting = false
+          })
+      })
+    },
+    handleDocCommand(cmd, row) {
+      if (cmd === 'refresh') {
+        this.doRefresh(row)
+      } else if (cmd === 'generate') {
+        this.openGenerate(row)
+      } else if (cmd === 'edit') {
+        this.openEdit(row)
+      } else if (cmd === 'delete') {
+        this.doDelete(row)
+      }
+    },
+    doRefresh(row) {
+      this.$confirm('确认从飞书重新拉取内容？', '提示', { type: 'warning' })
+        .then(() => {
+          return refreshDocument({ documentId: row.id })
+        })
+        .then(() => {
+          this.$message.success('已刷新')
+          this.fetchDocuments()
+        })
+        .catch(() => {})
+    },
+    doDelete(row) {
+      this.$confirm('确认删除该文档？', '提示', { type: 'warning' })
+        .then(() => {
+          return deleteDocument({ documentId: row.id })
+        })
+        .then(() => {
+          this.$message.success('已删除')
+          this.fetchDocuments()
+        })
+        .catch(() => {})
+    },
+    openEdit(row) {
+      this.editForm = {
+        documentId: row.id,
+        type: row.type,
+        source: row.source || '',
+        content: row.content || '',
+        ai_model: row.ai_model || ''
+      }
+      this.editVisible = true
+    },
+    resetEditForm() {
+      this.editForm = { documentId: null, type: 1, source: '', content: '', ai_model: '' }
+    },
+    submitEdit() {
+      if (!this.editForm.documentId) return
+      this.editSubmitting = true
+      updateDocument({
+        documentId: this.editForm.documentId,
+        type: this.editForm.type,
+        source: this.editForm.source,
+        content: this.editForm.content,
+        ai_model: this.editForm.ai_model || undefined
+      })
+        .then(() => {
+          this.$message.success('保存成功')
+          this.editVisible = false
+          this.fetchDocuments()
+        })
+        .finally(() => {
+          this.editSubmitting = false
+        })
+    },
+    openGenerate(row) {
+      this.activeDocument = row
+      this.previewCases = []
+      this.previewTotal = 0
+      this.genForm = { priority: 2, caseType: 1 }
+      this.generateVisible = true
+    },
+    resetGenerateState() {
+      this.activeDocument = null
+      this.previewCases = []
+      this.previewTotal = 0
+    },
+    runGenerate() {
+      if (!this.activeDocument || !this.projectId) return
+      this.generateLoading = true
+      generateDocumentCases({
+        documentIds: [this.activeDocument.id],
+        projectId: Number(this.projectId),
+        priority: this.genForm.priority,
+        caseType: this.genForm.caseType,
+        tags: ['AI生成']
+      })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.cases || []
+          this.previewTotal = Number(data.total || list.length || 0)
+          this.previewCases = list.map(item =>
+            Object.assign({}, item, {
+              selected: true,
+              module_id: item.module_id != null && item.module_id !== '' ? Number(item.module_id) : null,
+              module_name: item.module_name || ''
+            })
+          )
+          if (!this.previewCases.length) {
+            this.$message.info('未返回预览用例')
+          }
+        })
+        .finally(() => {
+          this.generateLoading = false
+        })
+    },
+    runMatch() {
+      if (!this.activeDocument || !this.previewCases.length) return
+      this.matchLoading = true
+      const casesPayload = this.previewCases.map(c => ({
+        title: c.title,
+        precondition: c.precondition,
+        steps: c.steps,
+        expected_result: c.expected_result,
+        priority: c.priority,
+        case_type: c.case_type,
+        tags: c.tags,
+        module_name: c.module_name,
+        module_id: c.module_id
+      }))
+      matchDocumentModules({
+        documentId: this.activeDocument.id,
+        cases: casesPayload
+      })
+        .then(res => {
+          const data = (res && res.data) || res || []
+          const arr = Array.isArray(data) ? data : []
+          const byTitle = {}
+          arr.forEach(row => {
+            if (row && row.title) byTitle[row.title] = row
+          })
+          this.previewCases = this.previewCases.map(row => {
+            const m = byTitle[row.title]
+            if (m) {
+              return Object.assign({}, row, {
+                module_name: m.module_name != null ? m.module_name : row.module_name,
+                module_id: m.module_id != null ? Number(m.module_id) : row.module_id
+              })
+            }
+            return row
+          })
+          this.$message.success('匹配完成')
+        })
+        .finally(() => {
+          this.matchLoading = false
+        })
+    },
+    runImport() {
+      if (!this.activeDocument || !this.currentUser || !this.currentUser.id) {
+        this.$message.warning('未获取到当前用户，请重新登录')
+        return
+      }
+      const selected = this.previewCases.filter(c => c.selected)
+      if (!selected.length) {
+        this.$message.warning('请至少选择一条用例')
+        return
+      }
+      for (let i = 0; i < selected.length; i++) {
+        const c = selected[i]
+        if (!c.module_id && c.module_id !== 0) {
+          this.$message.warning(`请填写模块ID：${c.title || ''}`)
+          return
+        }
+        if (!c.title || !c.steps) {
+          this.$message.warning('标题与步骤为必填')
+          return
+        }
+      }
+      const cases = selected.map(c => ({
+        selected: true,
+        module_id: Number(c.module_id),
+        title: c.title,
+        precondition: c.precondition || '',
+        steps: c.steps,
+        expected_result: c.expected_result || '',
+        priority: c.priority != null ? Number(c.priority) : 2,
+        case_type: c.case_type != null ? Number(c.case_type) : 1,
+        tags: Array.isArray(c.tags) ? c.tags : ['AI生成']
+      }))
+      this.$confirm(
+        '请确认已完成对预览用例的审核。导入选中行后将写入正式用例列表，是否继续？',
+        '确认导入',
+        { type: 'warning', confirmButtonText: '确认导入' }
+      )
+        .then(() => {
+          this.importLoading = true
+          return importDocumentCases({
+            documentId: this.activeDocument.id,
+            userId: this.currentUser.id,
+            cases
+          })
+        })
+        .then(res => {
+          if (!res) return
+          const data = (res && res.data) || res || {}
+          const n = data.successCount != null ? data.successCount : cases.length
+          this.$message.success(`导入成功 ${n} 条`)
+          this.generateVisible = false
+          this.$emit('refresh-cases')
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.importLoading = false
+        })
+    },
+    openBatchModuleDialog() {
+      if (!this.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      this.batchModuleText = ''
+      this.batchModuleVisible = true
+    },
+    submitBatchModules() {
+      const lines = String(this.batchModuleText || '')
+        .split(/\r?\n/)
+        .map(s => s.trim())
+        .filter(Boolean)
+      if (!lines.length) {
+        this.$message.warning('请输入至少一个模块名称')
+        return
+      }
+      this.batchModuleSubmitting = true
+      batchCreateDocumentModules({
+        projectId: Number(this.projectId),
+        moduleNames: lines
+      })
+        .then(() => {
+          this.$message.success('模块创建成功')
+          this.batchModuleVisible = false
+          this.$emit('refresh-modules')
+        })
+        .finally(() => {
+          this.batchModuleSubmitting = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.document-source-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.document-source-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0 2px 8px;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 8px;
+}
+
+.document-source-title {
+  font-weight: 600;
+  color: #303133;
+  font-size: 14px;
+}
+
+.document-source-hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.document-source-filters {
+  margin-bottom: 4px;
+}
+
+.document-source-filters /deep/ .el-form-item {
+  margin-bottom: 6px;
+}
+
+.document-source-table {
+  flex: 1;
+  min-height: 0;
+}
+
+.document-source-table /deep/ .el-table__body tr.current-row > td {
+  background-color: #ecf5ff !important;
+}
+
+.document-source-pagination {
+  margin-top: 8px;
+  text-align: right;
+}
+
+.document-detail-body {
+  padding: 0 4px 16px;
+}
+
+.document-detail-content-label {
+  margin: 12px 0 6px;
+  font-weight: 600;
+  color: #606266;
+}
+
+.generate-drawer-head {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.generate-drawer-source {
+  font-size: 12px;
+  color: #606266;
+  word-break: break-all;
+}
+
+.generate-form {
+  margin-bottom: 12px;
+}
+
+.generate-total-hint {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.batch-module-tip {
+  font-size: 13px;
+  color: #606266;
+  margin: 0 0 8px;
+}
+
+.hidden-pdf-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.pdf-upload-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.pdf-upload-hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.pdf-upload-empty {
+  margin: 0;
+  font-size: 12px;
+  color: #c0c4cc;
+}
+
+.pdf-pending-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 200px;
+  overflow: auto;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.pdf-pending-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  font-size: 13px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.pdf-pending-item:last-child {
+  border-bottom: none;
+}
+
+.pdf-pending-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #303133;
+}
+
+.pdf-pending-size {
+  color: #909399;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+</style>
--- a/src/components/TestPlatform/DataFactory/BuilderEditor.vue
+++ b/src/components/TestPlatform/DataFactory/BuilderEditor.vue
@@ -66,7 +66,7 @@ export default {
      this.saving = true
      createBuilder(this.projectId, Object.assign({}, this.form, { definition, input_schema })).then(() => {
        this.$message({ type: 'success', message: '造数器保存成功' })
-        this.$router.push({ path: '/test-platform/data-factory/builders', query: { projectId: this.projectId } })
+        this.$router.push({ path: '/data-tools/factory/builders', query: { projectId: this.projectId } })
      }).finally(() => {
        this.saving = false
      })
--- a/src/components/TestPlatform/DataFactory/BuilderList.vue
+++ b/src/components/TestPlatform/DataFactory/BuilderList.vue
@@ -72,13 +72,13 @@ export default {
      })
    },
    goEditor(row) {
-      this.$router.push({ path: '/test-platform/data-factory/editor', query: { projectId: this.projectId, builderId: row && row.id } })
+      this.$router.push({ path: '/data-tools/factory/editor', query: { projectId: this.projectId, builderId: row && row.id } })
    },
    goTasks() {
-      this.$router.push({ path: '/test-platform/data-factory/tasks', query: { projectId: this.projectId } })
+      this.$router.push({ path: '/data-tools/factory/task', query: { projectId: this.projectId } })
    },
    goMock() {
-      this.$router.push({ path: '/test-platform/data-factory/mock', query: { projectId: this.projectId } })
+      this.$router.push({ path: '/data-tools/factory/mock', query: { projectId: this.projectId } })
    },
    execute(row) {
      executeBuilder(this.projectId, row.id, { params: { count: 1 }, async: true }).then(() => {
--- a/src/components/TestPlatform/Plan/PlanAutomationExecutionList.vue
+++ b/src/components/TestPlatform/Plan/PlanAutomationExecutionList.vue
@@ -0,0 +1,379 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="自动化执行结果">
+      <div class="filter-toolbar">
+        <el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
+          <el-form-item label="产品">
+            <el-input :value="productName" disabled style="width: 200px;" />
+          </el-form-item>
+          <el-form-item label="项目">
+            <el-input :value="projectName" disabled style="width: 200px;" />
+          </el-form-item>
+          <el-form-item label="计划">
+            <el-input :value="planNameDisplay" disabled style="width: 220px;" />
+          </el-form-item>
+        </el-form>
+        <div class="filter-toolbar-actions">
+          <el-button size="small" @click="goBackToRun">返回执行</el-button>
+          <el-button size="small" @click="goPlanList">返回计划</el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="rows" border style="margin-top: 12px;">
+        <el-table-column label="执行单号" min-width="180" show-overflow-tooltip>
+          <template slot-scope="scope">{{ scope.row.execution_no || scope.row.executionNo || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="110">
+          <template slot-scope="scope">
+            <el-tag size="mini" :type="mainStatusTag(scope.row.status)">{{ mainStatusLabel(scope.row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="环境" width="100">
+          <template slot-scope="scope">{{ scope.row.env_code || scope.row.envCode || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="总数" width="72">
+          <template slot-scope="scope">{{ scope.row.total_count != null ? scope.row.total_count : scope.row.totalCount }}</template>
+        </el-table-column>
+        <el-table-column label="通过" width="72">
+          <template slot-scope="scope">{{ scope.row.passed_count != null ? scope.row.passed_count : scope.row.passedCount }}</template>
+        </el-table-column>
+        <el-table-column label="失败" width="72">
+          <template slot-scope="scope">{{ scope.row.failed_count != null ? scope.row.failed_count : scope.row.failedCount }}</template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="160">
+          <template slot-scope="scope">{{ scope.row.created_time || scope.row.createdTime || '-' }}</template>
+        </el-table-column>
+        <el-table-column label="执行详情" width="100" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="goToExecutionDetail(scope.row)">查看详情</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="报告" width="100" align="center">
+          <template slot-scope="scope">
+            <el-link
+              v-if="getReportUrl(scope.row)"
+              :href="getReportUrl(scope.row)"
+              target="_blank"
+              type="primary">
+              打开
+            </el-link>
+            <span v-else-if="isReportLoading(scope.row)" class="report-loading">
+              <i class="el-icon-loading"></i>
+            </span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="pager"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="pageNo"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange" />
+    </page-section>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getAutomationExecutionList, postAutomationExecutionPoll } from '@/api/automationApi'
+
+const MAIN_STATUS_LABELS = {
+  0: '待触发',
+  1: '触发中',
+  2: '排队中',
+  3: '执行中',
+  4: '成功',
+  5: '失败',
+  6: '已取消',
+  7: '触发失败',
+  8: '回调异常'
+}
+
+/** 终态：一般不再有报告 URL 更新 */
+const TERMINAL = new Set([4, 5, 6, 7, 8])
+/** 无报告也可停止加载 */
+const TERMINAL_NO_REPORT_EXPECTED = new Set([6, 7, 8])
+
+const POLL_MS = 5000
+
+export default {
+  name: 'PlanAutomationExecutionList',
+  components: { PageSection },
+  data() {
+    return {
+      projectId: this.$route.query.projectId || '',
+      planId: this.$route.query.planId || '',
+      loading: false,
+      rows: [],
+      pageNo: 1,
+      pageSize: 20,
+      total: 0,
+      pollTimer: null,
+      /** executionId -> 本轮 poll 请求中 */
+      pollInflight: {}
+    }
+  },
+  computed: {
+    productName() {
+      return this.$route.query.productName || ''
+    },
+    projectName() {
+      return this.$route.query.projectName || ''
+    },
+    planNameDisplay() {
+      return this.$route.query.planName || ''
+    }
+  },
+  watch: {
+    '$route.query': {
+      handler() {
+        this.projectId = this.$route.query.projectId || ''
+        this.planId = this.$route.query.planId || ''
+        this.pageNo = 1
+        this.stopPoll()
+        this.fetchList()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.fetchList()
+  },
+  beforeDestroy() {
+    this.stopPoll()
+  },
+  methods: {
+    getReportUrl(row) {
+      if (!row) return ''
+      const u = row.report_url || row.reportUrl
+      return u && String(u).trim() ? String(u).trim() : ''
+    },
+    rowExecutionId(row) {
+      if (!row) return null
+      const id = row.id != null ? row.id : row.execution_id || row.executionId
+      return id != null && id !== '' ? Number(id) : null
+    },
+    rowStatusNum(row) {
+      const s = row && row.status
+      const n = Number(s)
+      return Number.isFinite(n) ? n : -1
+    },
+    /** 仍可能通过 poll 拿到报告地址 */
+    needsReportPoll(row) {
+      if (this.getReportUrl(row)) return false
+      const st = this.rowStatusNum(row)
+      if (TERMINAL_NO_REPORT_EXPECTED.has(st)) return false
+      return true
+    },
+    /** 轮询未停且该行仍可能出报告时，报告列持续显示加载（含两次 poll 间隔） */
+    isReportLoading(row) {
+      if (this.getReportUrl(row)) return false
+      if (!this.needsReportPoll(row)) return false
+      return this.pollTimer != null || !!this.pollInflight[this.rowExecutionId(row)]
+    },
+    mainStatusLabel(s) {
+      return MAIN_STATUS_LABELS[s] != null ? MAIN_STATUS_LABELS[s] : s == null ? '-' : String(s)
+    },
+    mainStatusTag(s) {
+      const map = { 0: 'info', 1: 'warning', 2: 'warning', 3: 'primary', 4: 'success', 5: 'danger', 6: 'info', 7: 'danger', 8: 'danger' }
+      return map[s] || 'info'
+    },
+    mergePollIntoRow(executionId, d) {
+      if (!d || typeof d !== 'object') return
+      const idx = this.rows.findIndex(r => this.rowExecutionId(r) === executionId)
+      if (idx < 0) return
+      const row = this.rows[idx]
+      const next = Object.assign({}, row)
+      const pick = (snake, camel) => {
+        if (d[snake] !== undefined && d[snake] !== null && d[snake] !== '') next[snake] = d[snake]
+        if (d[camel] !== undefined && d[camel] !== null && d[camel] !== '') next[camel] = d[camel]
+      }
+      if (d.status !== undefined && d.status !== null) next.status = d.status
+      pick('report_url', 'reportUrl')
+      pick('console_url', 'consoleUrl')
+      pick('jenkins_build_url', 'jenkinsBuildUrl')
+      pick('jenkins_build_number', 'jenkinsBuildNumber')
+      pick('end_time', 'endTime')
+      if (d.duration_seconds != null || d.durationSeconds != null) {
+        next.duration_seconds = d.duration_seconds != null ? d.duration_seconds : d.durationSeconds
+      }
+      this.$set(this.rows, idx, next)
+    },
+    pollOne(executionId) {
+      if (executionId == null || Number.isNaN(executionId)) return Promise.resolve()
+      this.$set(this.pollInflight, executionId, true)
+      return postAutomationExecutionPoll({ executionId })
+        .then(res => {
+          if (!res || res.code !== 20000) return
+          const d = res.data
+          if (!d || typeof d !== 'object') return
+          const rid = d.id != null ? Number(d.id) : executionId
+          this.mergePollIntoRow(rid, d)
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.$delete(this.pollInflight, executionId)
+        })
+    },
+    runPollTick() {
+      const targets = this.rows
+        .map(r => this.rowExecutionId(r))
+        .filter(id => id != null && !Number.isNaN(id))
+        .filter(id => {
+          const row = this.rows.find(x => this.rowExecutionId(x) === id)
+          return row && this.needsReportPoll(row)
+        })
+      if (!targets.length) {
+        this.stopPoll()
+        return
+      }
+      targets.forEach(id => {
+        if (this.pollInflight[id]) return
+        this.pollOne(id)
+      })
+    },
+    startPoll() {
+      this.stopPoll()
+      this.runPollTick()
+      this.pollTimer = window.setInterval(() => this.runPollTick(), POLL_MS)
+    },
+    stopPoll() {
+      if (this.pollTimer != null) {
+        clearInterval(this.pollTimer)
+        this.pollTimer = null
+      }
+    },
+    fetchList() {
+      const pid = this.planId
+      const projId = this.projectId
+      if (!pid || !projId) {
+        this.rows = []
+        this.total = 0
+        this.stopPoll()
+        return
+      }
+      this.stopPoll()
+      this.loading = true
+      getAutomationExecutionList({
+        planId: Number(pid),
+        projectId: Number(projId),
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.list || data.items || []
+          this.rows = Array.isArray(list) ? list.map(x => Object.assign({}, x)) : []
+          this.total = Number(data.total != null ? data.total : this.rows.length)
+          this.$nextTick(() => {
+            const any = this.rows.some(r => this.needsReportPoll(r))
+            if (any) this.startPoll()
+          })
+        })
+        .catch(() => {
+          this.rows = []
+          this.total = 0
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handlePageChange(page) {
+      this.pageNo = page
+      this.fetchList()
+    },
+    automationRunQuery() {
+      const q = this.$route.query || {}
+      return {
+        productId: q.productId || undefined,
+        productName: q.productName || '',
+        projectId: this.projectId || undefined,
+        projectName: q.projectName || '',
+        planId: this.planId || undefined,
+        planName: q.planName || '',
+        environmentId: q.environmentId || undefined,
+        jenkinsUrl: q.jenkinsUrl || undefined
+      }
+    },
+    goBackToRun() {
+      this.stopPoll()
+      this.$router.push({
+        path: '/test-platform/plan/automation',
+        query: this.automationRunQuery()
+      })
+    },
+    /** 进入与执行后相同的计划自动化执行详情页（主单 + 执行明细） */
+    goToExecutionDetail(row) {
+      const id = this.rowExecutionId(row)
+      if (id == null || Number.isNaN(id)) {
+        this.$message.warning('缺少执行单 ID')
+        return
+      }
+      this.stopPoll()
+      this.$router.push({
+        path: '/test-platform/plan/automation',
+        query: Object.assign({}, this.automationRunQuery(), { executionId: id })
+      })
+    },
+    goPlanList() {
+      this.stopPoll()
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.$route.query.productId || undefined,
+          projectId: this.projectId || undefined
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+
+.filter-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.filter-toolbar-form {
+  flex: 1;
+  min-width: 0;
+}
+
+.filter-toolbar-actions {
+  flex-shrink: 0;
+  padding-top: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pager {
+  margin-top: 16px;
+  text-align: right;
+}
+
+.report-loading {
+  color: #409eff;
+  font-size: 16px;
+}
+</style>
--- a/src/components/TestPlatform/Plan/PlanAutomationRun.vue
+++ b/src/components/TestPlatform/Plan/PlanAutomationRun.vue
@@ -0,0 +1,842 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="计划自动化执行">
+      <div class="filter-toolbar">
+        <el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
+          <el-form-item label="产品">
+            <el-input :value="productName" disabled style="width: 200px;" />
+          </el-form-item>
+          <el-form-item label="项目">
+            <el-input :value="projectName" disabled style="width: 200px;" />
+          </el-form-item>
+          <el-form-item label="计划">
+            <div class="plan-title-row">
+              <el-input :value="planNameDisplay" disabled class="plan-name-input" />
+              <template v-if="planJenkinsUrl">
+                <span class="plan-jenkins-sep">·</span>
+                <el-link
+                  :href="planJenkinsUrl"
+                  :title="planJenkinsUrl"
+                  target="_blank"
+                  type="primary"
+                  class="plan-jenkins-link">
+                  自动化执行 Jenkins
+                </el-link>
+              </template>
+            </div>
+          </el-form-item>
+        </el-form>
+        <div class="filter-toolbar-actions">
+          <el-button size="small" @click="goExecutionResultList">执行结果列表</el-button>
+          <el-button size="small" @click="goBack">返回</el-button>
+        </div>
+      </div>
+
+      <el-card v-if="!executionId" class="run-card" shadow="never">
+        <el-form ref="runFormRef" :model="runForm" :rules="runRules" label-width="108px" size="small">
+          <el-form-item label="执行环境" prop="envCode">
+            <el-select v-model="runForm.envCode" placeholder="请选择环境编码" filterable style="width: 280px;">
+              <el-option
+                v-for="opt in envOptions"
+                :key="'env-' + opt.value"
+                :label="opt.label"
+                :value="opt.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="执行模式">
+            <el-radio-group v-model="runForm.runMode">
+              <el-radio :label="1">串行</el-radio>
+              <el-radio :label="2">并行</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="计划轮次">
+            <el-input-number v-model="runForm.roundNo" :min="1" :step="1" controls-position="right" placeholder="可选" />
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model.trim="runForm.remark" maxlength="200" show-word-limit style="width: 420px;" placeholder="可选" />
+          </el-form-item>
+        </el-form>
+
+        <div class="table-toolbar">
+          <span class="hint">勾选后点击「执行已选用例」将传 caseIds；翻页会保留已勾选项。不勾选可「执行计划内全部自动化用例」。</span>
+          <el-button size="small" :loading="casesLoading" @click="refreshPlanCaseList">刷新用例列表</el-button>
+        </div>
+
+        <el-table
+          ref="caseTable"
+          v-loading="casesLoading"
+          :data="planCaseRows"
+          border
+          row-key="planCaseId"
+          @selection-change="onSelectionChange">
+          <el-table-column type="selection" width="48" :reserve-selection="true" />
+          <el-table-column prop="caseKey" label="用例编号" min-width="120" />
+          <el-table-column prop="caseTitle" label="用例名称" min-width="200" />
+          <el-table-column label="自动化" width="88">
+            <template slot-scope="scope">{{ formatAuto(scope.row) }}</template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          class="plan-case-pager"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="planCasePageNo"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="planCasePageSize"
+          :total="planCaseTotal"
+          @size-change="handlePlanCaseSizeChange"
+          @current-change="handlePlanCaseCurrentChange" />
+
+        <div class="run-actions">
+          <el-button type="primary" :loading="runSubmitting" @click="submitRun(true)">执行计划内全部自动化用例</el-button>
+          <el-button type="success" :loading="runSubmitting" :disabled="!selectedRows.length" @click="submitRun(false)">
+            执行已选用例（{{ selectedRows.length }}）
+          </el-button>
+        </div>
+      </el-card>
+
+      <template v-else>
+        <el-card class="exec-card" shadow="never">
+          <div class="exec-head">
+            <div>
+              <span class="exec-no">{{ executionSummary.execution_no || executionSummary.executionNo || '-' }}</span>
+              <el-tag size="small" class="exec-tag" :type="mainStatusTag(executionSummary.status)">
+                {{ mainStatusLabel(executionSummary.status) }}
+              </el-tag>
+            </div>
+            <div class="exec-actions">
+              <el-button size="small" :loading="detailLoading" @click="refreshExecution">刷新</el-button>
+              <el-button size="small" @click="resetRunAnother">再跑一轮</el-button>
+            </div>
+          </div>
+          <div class="exec-desc">
+            <el-row :gutter="12" type="flex" class="exec-desc-row">
+              <el-col :span="12">
+                <div class="exec-desc-item"><span class="exec-desc-label">环境</span>{{ executionSummary.env_code || executionSummary.envCode || '-' }}</div>
+              </el-col>
+              <el-col :span="12">
+                <div class="exec-desc-item"><span class="exec-desc-label">模式</span>{{ (executionSummary.run_mode || executionSummary.runMode) === 2 ? '并行' : '串行' }}</div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="12" type="flex" class="exec-desc-row">
+              <el-col :span="12">
+                <div class="exec-desc-item"><span class="exec-desc-label">总数</span>{{ pickCount(executionSummary, 'total_count', 'totalCount') }}</div>
+              </el-col>
+              <el-col :span="12">
+                <div class="exec-desc-item">
+                  <span class="exec-desc-label">通过 / 失败</span>
+                  {{ pickCount(executionSummary, 'passed_count', 'passedCount') }} /
+                  {{ pickCount(executionSummary, 'failed_count', 'failedCount') }}
+                </div>
+              </el-col>
+            </el-row>
+            <div class="exec-desc-item exec-desc-block">
+              <span class="exec-desc-label">Jenkins</span>
+              <el-link v-if="jenkinsLink" :href="jenkinsLink" target="_blank" type="primary">{{ jenkinsLink }}</el-link>
+              <span v-else>-</span>
+            </div>
+            <div class="exec-desc-item exec-desc-block">
+              <span class="exec-desc-label">控制台</span>
+              <el-link v-if="consoleLink" :href="consoleLink" target="_blank" type="primary">打开</el-link>
+              <span v-else>-</span>
+            </div>
+            <div class="exec-desc-item exec-desc-block">
+              <span class="exec-desc-label">报告</span>
+              <el-link v-if="reportLink" :href="reportLink" target="_blank" type="primary">打开</el-link>
+              <span v-else>-</span>
+            </div>
+          </div>
+          <div v-if="polling" class="poll-hint">执行中，每 5 秒自动刷新状态…</div>
+        </el-card>
+
+        <el-card class="case-list-card" shadow="never">
+          <div slot="header" class="card-header">执行明细</div>
+          <el-table v-loading="caseListLoading" :data="executionCaseRows" border max-height="420">
+            <el-table-column prop="run_order" label="#" width="56">
+              <template slot-scope="scope">{{ scope.row.run_order != null ? scope.row.run_order : scope.row.runOrder }}</template>
+            </el-table-column>
+            <el-table-column prop="case_key" label="编号" min-width="100">
+              <template slot-scope="scope">{{ scope.row.case_key || scope.row.caseKey }}</template>
+            </el-table-column>
+            <el-table-column prop="case_title" label="标题" min-width="160">
+              <template slot-scope="scope">{{ scope.row.case_title || scope.row.caseTitle }}</template>
+            </el-table-column>
+            <el-table-column label="状态" width="100">
+              <template slot-scope="scope">
+                <el-tag size="mini" :type="caseStatusTag(scope.row.status)">{{ caseStatusLabel(scope.row.status) }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="result_message" label="结果" min-width="120" show-overflow-tooltip>
+              <template slot-scope="scope">{{ scope.row.result_message || scope.row.resultMessage || '-' }}</template>
+            </el-table-column>
+            <el-table-column label="耗时(s)" width="88">
+              <template slot-scope="scope">{{ scope.row.duration_seconds != null ? scope.row.duration_seconds : scope.row.durationSeconds }}</template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            class="case-pager"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :page-sizes="[20, 50, 100, 200]"
+            :page-size="casePageSize"
+            :current-page="casePageNo"
+            :total="caseListTotal"
+            @size-change="handleCaseListSizeChange"
+            @current-change="handleCasePageChange" />
+        </el-card>
+      </template>
+    </page-section>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getPlanCaseList } from '@/api/planApi'
+import { getProjectEnvironments } from '@/api/projectApi'
+import {
+  getAutomationExecutionCaseList,
+  getAutomationExecutionDetail,
+  postAutomationExecutionPoll,
+  runAutomationPlan
+} from '@/api/automationApi'
+
+const MAIN_STATUS_LABELS = {
+  0: '待触发',
+  1: '触发中',
+  2: '排队中',
+  3: '执行中',
+  4: '成功',
+  5: '失败',
+  6: '已取消',
+  7: '触发失败',
+  8: '回调异常'
+}
+
+const CASE_STATUS_LABELS = {
+  0: '待执行',
+  1: '执行中',
+  2: '通过',
+  3: '失败',
+  4: '阻塞',
+  5: '跳过',
+  6: '未找到',
+  7: '已取消'
+}
+
+/** 主单终态：文档 4~8 */
+const MAIN_TERMINAL = new Set([4, 5, 6, 7, 8])
+
+function pickEnvCode(item) {
+  if (!item) return ''
+  const c = item.code || item.env_code || item.envCode
+  if (c != null && String(c).trim() !== '') return String(c).trim()
+  const name = (item.name || '').trim()
+  if (name) return name
+  if (item.id != null) return String(item.id)
+  return ''
+}
+
+export default {
+  name: 'PlanAutomationRun',
+  components: { PageSection },
+  data() {
+    return {
+      projectId: this.$route.query.projectId || '',
+      planId: this.$route.query.planId || '',
+      routeEnvId: this.$route.query.environmentId || '',
+      casesLoading: false,
+      planCaseRows: [],
+      planCasePageNo: 1,
+      planCasePageSize: 10,
+      planCaseTotal: 0,
+      selectedRows: [],
+      envOptions: [],
+      runForm: {
+        envCode: '',
+        runMode: 1,
+        roundNo: null,
+        remark: ''
+      },
+      runRules: {
+        envCode: [{ required: true, message: '请选择执行环境', trigger: 'change' }]
+      },
+      runSubmitting: false,
+      executionId: null,
+      executionSummary: {},
+      executionCaseRows: [],
+      caseListLoading: false,
+      caseListTotal: 0,
+      casePageNo: 1,
+      casePageSize: 50,
+      detailLoading: false,
+      pollTimer: null,
+      polling: false
+    }
+  },
+  computed: {
+    productName() {
+      return this.$route.query.productName || ''
+    },
+    projectName() {
+      return this.$route.query.projectName || ''
+    },
+    planNameDisplay() {
+      return this.$route.query.planName || ''
+    },
+    /** 与计划列表入口一致，由路由 query 传入（计划级 jenkins_url） */
+    planJenkinsUrl() {
+      const q = this.$route.query || {}
+      const raw = q.jenkinsUrl != null && String(q.jenkinsUrl).trim() !== '' ? q.jenkinsUrl : q.jenkins_url
+      if (raw == null || String(raw).trim() === '') return ''
+      return String(raw).trim()
+    },
+    jenkinsLink() {
+      const e = this.executionSummary
+      return e.jenkins_build_url || e.jenkinsBuildUrl || ''
+    },
+    consoleLink() {
+      const e = this.executionSummary
+      return e.console_url || e.consoleUrl || ''
+    },
+    reportLink() {
+      const e = this.executionSummary
+      return e.report_url || e.reportUrl || ''
+    }
+  },
+  watch: {
+    '$route.query': {
+      handler() {
+        this.projectId = this.$route.query.projectId || ''
+        this.planId = this.$route.query.planId || ''
+        this.routeEnvId = this.$route.query.environmentId || ''
+        this.applyRouteExecutionContext()
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.bootstrap()
+  },
+  beforeDestroy() {
+    this.stopPolling()
+  },
+  methods: {
+    /** 兼容下划线 / 驼峰；0 为有效计数（Vue2 模板不支持 ??） */
+    pickCount(row, snakeKey, camelKey) {
+      const o = row || {}
+      const a = o[snakeKey]
+      if (a != null && a !== '') return a
+      const b = o[camelKey]
+      if (b != null && b !== '') return b
+      return '-'
+    },
+    parseRouteExecutionId() {
+      const q = this.$route.query || {}
+      const raw = q.executionId != null && q.executionId !== '' ? q.executionId : q.execution_id
+      if (raw === '' || raw === undefined || raw === null) return null
+      const n = Number(raw)
+      return Number.isNaN(n) ? null : n
+    },
+    /** 与路由同步：带 executionId 则进入执行详情；去掉则回到选例执行 */
+    applyRouteExecutionContext() {
+      const exId = this.parseRouteExecutionId()
+      if (exId != null) {
+        if (this.executionId !== exId) {
+          this.stopPolling()
+          this.executionId = exId
+          this.loadEnvironments().then(() => this.applyDefaultEnvFromRoute())
+          return this.refreshExecution().then(() => this.startPollingIfNeeded())
+        }
+        return Promise.resolve()
+      }
+      if (this.executionId != null) {
+        this.resetRunAnother()
+      }
+      return Promise.resolve()
+    },
+    syncRouteExecutionId(id) {
+      if (id == null) return
+      const q = Object.assign({}, this.$route.query || {}, { executionId: id })
+      this.$router.replace({ path: '/test-platform/plan/automation', query: q }).catch(() => {})
+    },
+    bootstrap() {
+      const exId = this.parseRouteExecutionId()
+      if (exId != null) {
+        this.executionId = exId
+        this.loadEnvironments().then(() => {
+          this.applyDefaultEnvFromRoute()
+        })
+        return this.refreshExecution().then(() => this.startPollingIfNeeded())
+      }
+      this.executionId = null
+      return this.loadEnvironments().then(() => {
+        this.applyDefaultEnvFromRoute()
+        this.fetchPlanCases()
+      })
+    },
+    loadEnvironments() {
+      const pid = Number(this.projectId)
+      if (!pid || Number.isNaN(pid)) {
+        this.envOptions = []
+        return Promise.resolve()
+      }
+      return getProjectEnvironments(pid, { pageNo: 1, pageSize: 1000 })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.items || data.list || data.data || []
+          this.envOptions = (Array.isArray(list) ? list : []).map(item => {
+            const value = pickEnvCode(item)
+            const labelName = (item.name || value || '').trim() || value
+            return {
+              value,
+              label: value && labelName !== value ? `${labelName}（${value}）` : labelName,
+              raw: item
+            }
+          }).filter(o => o.value)
+        })
+        .catch(() => {
+          this.envOptions = []
+        })
+    },
+    applyDefaultEnvFromRoute() {
+      const eid = this.routeEnvId
+      if (!eid || !this.envOptions.length) return
+      const found = this.envOptions.find(
+        o => o.raw && String(o.raw.id) === String(eid)
+      )
+      if (found && found.value) {
+        this.runForm.envCode = found.value
+      }
+    },
+    fetchPlanCases() {
+      if (!this.planId || !this.projectId) {
+        this.planCaseRows = []
+        this.planCaseTotal = 0
+        return
+      }
+      this.casesLoading = true
+      getPlanCaseList(this.projectId, this.planId, {
+        pageNo: this.planCasePageNo,
+        pageSize: this.planCasePageSize
+      })
+        .then(listRes => {
+          const data = (listRes && listRes.data) || listRes || {}
+          const list = data.list || data.items || []
+          this.planCaseTotal = Number(data.total != null ? data.total : (Array.isArray(list) ? list.length : 0))
+          this.planCaseRows = (Array.isArray(list) ? list : []).map(item => ({
+            planCaseId: item.id,
+            caseId: item.case_id != null ? item.case_id : item.caseId,
+            caseKey: item.case_key || item.caseKey || '',
+            caseTitle: item.case_title || item.caseTitle || item.title || '',
+            isAuto: item.is_auto != null ? item.is_auto : item.isAuto
+          }))
+        })
+        .catch(() => {
+          this.planCaseRows = []
+          this.planCaseTotal = 0
+        })
+        .finally(() => {
+          this.casesLoading = false
+        })
+    },
+    refreshPlanCaseList() {
+      this.planCasePageNo = 1
+      this.fetchPlanCases()
+    },
+    handlePlanCaseSizeChange(size) {
+      this.planCasePageSize = size
+      this.planCasePageNo = 1
+      this.fetchPlanCases()
+    },
+    handlePlanCaseCurrentChange(page) {
+      this.planCasePageNo = page
+      this.fetchPlanCases()
+    },
+    onSelectionChange(rows) {
+      this.selectedRows = rows || []
+    },
+    formatAuto(row) {
+      const v = row && row.isAuto
+      if (v === 1 || v === true || v === '1') return '是'
+      if (v === 0 || v === false || v === '0') return '否'
+      return '-'
+    },
+    submitRun(runAll) {
+      if (!this.$refs.runFormRef) return
+      this.$refs.runFormRef.validate(valid => {
+        if (!valid) return
+        const planId = Number(this.planId)
+        if (!planId || Number.isNaN(planId)) {
+          this.$message.warning('计划 ID 无效')
+          return
+        }
+        if (!runAll && (!this.selectedRows || !this.selectedRows.length)) {
+          this.$message.warning('请先勾选要执行的用例')
+          return
+        }
+        const payload = {
+          planId,
+          envCode: this.runForm.envCode,
+          runMode: this.runForm.runMode || 1
+        }
+        const rn = this.runForm.roundNo
+        if (rn != null && rn !== '' && !Number.isNaN(Number(rn))) {
+          payload.roundNo = Number(rn)
+        }
+        if (this.runForm.remark) {
+          payload.remark = this.runForm.remark
+        }
+        if (!runAll) {
+          const ids = this.selectedRows.map(r => Number(r.caseId)).filter(id => !Number.isNaN(id))
+          if (!ids.length) {
+            this.$message.warning('勾选用例缺少 caseId')
+            return
+          }
+          payload.caseIds = ids
+        }
+        this.runSubmitting = true
+        runAutomationPlan(payload)
+          .then(res => {
+            const body = (res && res.data) || res || {}
+            const id = body.id
+            if (id == null) {
+              this.$message.error('未返回 execution id')
+              return
+            }
+            this.$message.success((res && res.msg) || (res && res.message) || '已提交自动化执行')
+            this.executionId = id
+            this.executionSummary = body
+            this.casePageNo = 1
+            this.refreshExecution().then(() => {
+              this.startPollingIfNeeded()
+              this.syncRouteExecutionId(id)
+            })
+          })
+          .catch(() => {})
+          .finally(() => {
+            this.runSubmitting = false
+          })
+      })
+    },
+    refreshExecution() {
+      if (!this.executionId) return Promise.resolve()
+      this.detailLoading = true
+      const d1 = getAutomationExecutionDetail(this.executionId)
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          this.executionSummary = data && typeof data === 'object' ? data : {}
+        })
+        .catch(() => {})
+      const d2 = this.loadExecutionCasePage()
+      return Promise.all([d1, d2]).finally(() => {
+        this.detailLoading = false
+      })
+    },
+    loadExecutionCasePage() {
+      if (!this.executionId) return Promise.resolve()
+      this.caseListLoading = true
+      return getAutomationExecutionCaseList({
+        executionId: this.executionId,
+        pageNo: this.casePageNo,
+        pageSize: this.casePageSize
+      })
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.list || data.items || []
+          this.executionCaseRows = Array.isArray(list) ? list : []
+          this.caseListTotal = Number(data.total != null ? data.total : this.executionCaseRows.length)
+        })
+        .catch(() => {
+          this.executionCaseRows = []
+          this.caseListTotal = 0
+        })
+        .finally(() => {
+          this.caseListLoading = false
+        })
+    },
+    handleCasePageChange(p) {
+      this.casePageNo = p
+      this.loadExecutionCasePage()
+    },
+    handleCaseListSizeChange(size) {
+      this.casePageSize = size
+      this.casePageNo = 1
+      this.loadExecutionCasePage()
+    },
+    mainStatusLabel(s) {
+      return MAIN_STATUS_LABELS[s] != null ? MAIN_STATUS_LABELS[s] : s == null ? '-' : String(s)
+    },
+    mainStatusTag(s) {
+      const map = { 0: 'info', 1: 'warning', 2: 'warning', 3: 'primary', 4: 'success', 5: 'danger', 6: 'info', 7: 'danger', 8: 'danger' }
+      return map[s] || 'info'
+    },
+    caseStatusLabel(s) {
+      return CASE_STATUS_LABELS[s] != null ? CASE_STATUS_LABELS[s] : s == null ? '-' : String(s)
+    },
+    caseStatusTag(s) {
+      const map = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger', 4: 'warning', 5: 'info', 6: 'info', 7: 'info' }
+      return map[s] || 'info'
+    },
+    isTerminalMainStatus(s) {
+      return s != null && MAIN_TERMINAL.has(Number(s))
+    },
+    /** 与执行结果列表页 poll 一致：合并返回字段到主单摘要 */
+    mergePollIntoExecutionSummary(d) {
+      if (!d || typeof d !== 'object') return
+      const next = Object.assign({}, this.executionSummary)
+      if (d.status !== undefined && d.status !== null) next.status = d.status
+      const setUrlPair = (snake, camel) => {
+        if (d[snake] != null && String(d[snake]).trim() !== '') next[snake] = d[snake]
+        if (d[camel] != null && String(d[camel]).trim() !== '') next[camel] = d[camel]
+      }
+      setUrlPair('report_url', 'reportUrl')
+      setUrlPair('console_url', 'consoleUrl')
+      setUrlPair('jenkins_build_url', 'jenkinsBuildUrl')
+      if (d.jenkins_build_number != null || d.jenkinsBuildNumber != null) {
+        const n = d.jenkins_build_number != null ? d.jenkins_build_number : d.jenkinsBuildNumber
+        next.jenkins_build_number = n
+        next.jenkinsBuildNumber = n
+      }
+      if (d.end_time != null && String(d.end_time).trim() !== '') next.end_time = d.end_time
+      if (d.endTime != null && String(d.endTime).trim() !== '') next.endTime = d.endTime
+      if (d.duration_seconds != null || d.durationSeconds != null) {
+        const sec = d.duration_seconds != null ? d.duration_seconds : d.durationSeconds
+        next.duration_seconds = sec
+        next.durationSeconds = sec
+      }
+      if (d.id != null) next.id = d.id
+      this.executionSummary = next
+    },
+    /** 仅轮询 poll 更新主单；不轮询执行明细列表（与执行结果列表页一致） */
+    startPollingIfNeeded() {
+      this.stopPolling()
+      const s = this.executionSummary && this.executionSummary.status
+      if (this.isTerminalMainStatus(s)) {
+        this.polling = false
+        return
+      }
+      if (!this.executionId) {
+        this.polling = false
+        return
+      }
+      this.polling = true
+      const tick = () => {
+        postAutomationExecutionPoll({ executionId: this.executionId })
+          .then(res => {
+            if (!res || res.code !== 20000) return
+            const d = res.data
+            if (!d || typeof d !== 'object') return
+            this.mergePollIntoExecutionSummary(d)
+            if (this.isTerminalMainStatus(this.executionSummary.status)) {
+              this.stopPolling()
+              this.loadExecutionCasePage()
+            }
+          })
+          .catch(() => {})
+      }
+      tick()
+      this.pollTimer = window.setInterval(tick, 5000)
+    },
+    stopPolling() {
+      if (this.pollTimer != null) {
+        clearInterval(this.pollTimer)
+        this.pollTimer = null
+      }
+      this.polling = false
+    },
+    resetRunAnother() {
+      this.stopPolling()
+      this.executionId = null
+      this.executionSummary = {}
+      this.executionCaseRows = []
+      this.caseListTotal = 0
+      this.casePageNo = 1
+      this.planCasePageNo = 1
+      if (this.$refs.caseTable) {
+        this.$refs.caseTable.clearSelection()
+      }
+      this.selectedRows = []
+      const q = Object.assign({}, this.$route.query || {})
+      delete q.executionId
+      delete q.execution_id
+      this.$router.replace({ path: '/test-platform/plan/automation', query: q }).catch(() => {})
+      this.fetchPlanCases()
+    },
+    goExecutionResultList() {
+      const q = this.$route.query || {}
+      this.$router.push({
+        path: '/test-platform/plan/automation/executions',
+        query: {
+          productId: q.productId || undefined,
+          productName: q.productName || '',
+          projectId: this.projectId || undefined,
+          projectName: q.projectName || '',
+          planId: this.planId || undefined,
+          planName: this.planNameDisplay || q.planName || '',
+          environmentId: q.environmentId || undefined,
+          jenkinsUrl: q.jenkinsUrl || undefined
+        }
+      })
+    },
+    goBack() {
+      this.stopPolling()
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.$route.query.productId || undefined,
+          projectId: this.projectId || undefined
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+
+.filter-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.filter-toolbar-form {
+  flex: 1;
+  min-width: 0;
+}
+
+.plan-title-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 560px;
+}
+
+.plan-name-input {
+  width: 220px;
+  flex-shrink: 0;
+}
+
+.plan-jenkins-sep {
+  color: #c0c4cc;
+  user-select: none;
+}
+
+.plan-jenkins-link {
+  flex-shrink: 0;
+}
+
+.filter-toolbar-actions {
+  flex-shrink: 0;
+  padding-top: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.run-card,
+.exec-card,
+.case-list-card {
+  margin-top: 12px;
+}
+
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 12px 0 8px;
+  gap: 12px;
+}
+
+.hint {
+  font-size: 12px;
+  color: #909399;
+}
+
+.run-actions {
+  margin-top: 16px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.exec-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.exec-no {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.exec-tag {
+  vertical-align: middle;
+}
+
+.exec-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.exec-desc {
+  margin-top: 8px;
+  padding: 12px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fafafa;
+}
+
+.exec-desc-row {
+  margin-bottom: 8px;
+}
+
+.exec-desc-item {
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.6;
+}
+
+.exec-desc-block {
+  margin-top: 6px;
+}
+
+.exec-desc-label {
+  display: inline-block;
+  min-width: 88px;
+  margin-right: 8px;
+  color: #909399;
+  font-weight: 500;
+}
+
+.poll-hint {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.card-header {
+  font-weight: 600;
+}
+
+.plan-case-pager {
+  margin-top: 12px;
+  text-align: right;
+}
+
+.case-pager {
+  margin-top: 12px;
+  text-align: right;
+}
+</style>
--- a/src/components/TestPlatform/Plan/PlanBuilder.vue
+++ b/src/components/TestPlatform/Plan/PlanBuilder.vue
@@ -1,26 +1,114 @@
 <template>
  <div class="page-wrap">
-    <page-section title="计划构建">
-      <el-form :model="form" label-width="120px" size="small">
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 200px;"></el-input>
+    <page-section :title="isEditMode ? '编辑计划' : '计划构建'">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="200px" size="small">
+        <el-form-item label="产品名称" prop="productId">
+          <el-select
+            v-model="form.productId"
+            filterable
+            clearable
+            placeholder="请选择产品"
+            style="width: 360px;"
+            @change="handleProductChange"
+            @focus="loadProductOptions">
+            <el-option
+              v-for="item in productOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
        </el-form-item>
-        <el-form-item label="计划名称">
+        <el-form-item label="项目名称" prop="projectId">
+          <el-select
+            v-model="form.projectId"
+            filterable
+            clearable
+            placeholder="请选择项目"
+            style="width: 360px;"
+            :disabled="!form.productId"
+            @change="handleProjectChange">
+            <el-option
+              v-for="item in projectOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计划名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
-        <el-form-item label="版本">
+        <el-form-item label="版本" prop="version">
          <el-input v-model="form.version"></el-input>
        </el-form-item>
-        <el-form-item label="负责人ID">
-          <el-input v-model="form.owner_id"></el-input>
+        <el-form-item label="负责人" prop="owner_id">
+          <el-select
+            v-model="form.owner_id"
+            filterable
+            clearable
+            placeholder="请选择负责人"
+            style="width: 360px;"
+            :disabled="!form.projectId">
+            <el-option
+              v-for="item in ownerOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
        </el-form-item>
-        <el-form-item label="环境ID">
-          <el-input v-model="form.environment_id"></el-input>
+        <el-form-item label="环境名称" prop="environment_id">
+          <el-select
+            v-model="form.environment_id"
+            filterable
+            clearable
+            placeholder="请选择环境"
+            style="width: 360px;"
+            :disabled="!form.projectId">
+            <el-option
+              v-for="item in environmentOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否自动化测试计划" prop="isAuto">
+          <el-select v-model.number="form.isAuto" placeholder="请选择" style="width: 200px;">
+            <el-option :value="0" label="否" />
+            <el-option :value="1" label="是" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间" prop="start_time">
+          <el-date-picker
+            v-model="form.start_time"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择开始时间"
+            style="width: 360px;">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间" prop="end_time">
+          <el-date-picker
+            v-model="form.end_time"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择结束时间"
+            style="width: 360px;">
+          </el-date-picker>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="4"></el-input>
        </el-form-item>
+        <el-form-item label="自动化执行 Jenkins URL">
+          <el-input
+            v-model.trim="form.jenkins_url"
+            maxlength="512"
+            show-word-limit
+            placeholder="选填，自动化触发时使用的 Jenkins 地址"
+            style="width: 480px;" />
+        </el-form-item>
        <el-form-item>
+          <el-button @click="goBack">返回</el-button>
          <el-button type="primary" :loading="saving" @click="submitForm">保存计划</el-button>
        </el-form-item>
      </el-form>
@@ -30,34 +118,279 @@

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import { createPlan } from '@/api/planApi'
+import { createPlan, getPlanDetail, updatePlan } from '@/api/planApi'
+import { getProductList } from '@/api/productApi'
+import { getProjectDetail, getProjectEnvironments, getProjectList, getProjectMembers } from '@/api/projectApi'

 export default {
  name: 'PlanBuilder',
-  components: { PageSection },
+  components: {PageSection},
  data() {
    return {
      saving: false,
-      projectId: this.$route.query.projectId || 1,
+      planId: this.$route.query.planId || '',
+      productOptions: [],
+      projectOptions: [],
+      ownerOptions: [],
+      environmentOptions: [],
      form: {
+        productId: '',
+        projectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
        name: '',
        version: '',
        owner_id: '',
        environment_id: '',
-        description: ''
+        start_time: '',
+        end_time: '',
+        description: '',
+        jenkins_url: '',
+        /** 是否自动化测试计划：0 否，1 是，提交字段名 isAuto */
+        isAuto: 0
+      },
+      rules: {
+        productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
+        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
+        name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
+        version: [{ required: true, message: '请输入版本', trigger: 'blur' }],
+        owner_id: [{ required: true, message: '请选择负责人', trigger: 'change' }],
+        environment_id: [{ required: true, message: '请选择环境', trigger: 'change' }],
+        start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
+        end_time: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
      }
    }
  },
-  methods: {
-    submitForm() {
-      this.saving = true
-      createPlan(this.projectId, this.form).then(() => {
-        this.$message({ type: 'success', message: '计划创建成功' })
-        this.$router.push({ path: '/test-platform/plans', query: { projectId: this.projectId } })
-      }).finally(() => {
-        this.saving = false
-      })
+  computed: {
+    isEditMode() {
+      return !!this.planId
    }
+  },
+  methods: {
+    loadProductOptions() {
+      if (this.productOptions && this.productOptions.length > 0) {
+        return Promise.resolve()
+      }
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.productOptions = []
+      })
+    },
+    loadProjectOptionsByProduct(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.projectOptions = []
+      })
+    },
+    loadProjectMeta(projectId) {
+      if (!projectId) {
+        this.ownerOptions = []
+        this.environmentOptions = []
+        return Promise.resolve()
+      }
+      const memberReq = getProjectMembers(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.items || data.list || data.data || data || []
+        this.ownerOptions = (Array.isArray(list) ? list : []).map(item => ({
+          id: item.user_id || item.userId || item.id,
+          name:
+            item.real_name ||
+            item.realName ||
+            item.username ||
+            item.name ||
+            item.user_name ||
+            `用户${item.user_id || item.id}`
+        })).filter(item => item.id !== undefined && item.id !== null && item.id !== '')
+      }).catch(() => {
+        this.ownerOptions = []
+      })
+      const envReq = getProjectEnvironments(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.items || data.list || data.data || data || []
+        this.environmentOptions = (Array.isArray(list) ? list : []).map(item => ({
+          id: item.id,
+          name: item.name
+        }))
+      }).catch(() => {
+        this.environmentOptions = []
+      })
+      return Promise.all([memberReq, envReq])
+    },
+    handleProductChange() {
+      this.form.projectId = ''
+      this.form.owner_id = ''
+      this.form.environment_id = ''
+      this.projectOptions = []
+      this.ownerOptions = []
+      this.environmentOptions = []
+      this.loadProjectOptionsByProduct(this.form.productId)
+    },
+    handleProjectChange() {
+      this.form.owner_id = ''
+      this.form.environment_id = ''
+      this.ownerOptions = []
+      this.environmentOptions = []
+      this.loadProjectMeta(this.form.projectId)
+    },
+    goBack() {
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.form.productId || undefined,
+          projectId: this.form.projectId || undefined
+        }
+      })
+    },
+    submitForm() {
+      this.$refs.formRef.validate(valid => {
+        if (!valid) {
+          return
+        }
+        const projectId = this.form.projectId
+        const payload = {
+          name: this.form.name,
+          version: this.form.version,
+          owner_id: this.form.owner_id,
+          environment_id: this.form.environment_id,
+          start_time: this.form.start_time,
+          end_time: this.form.end_time,
+          description: this.form.description
+        }
+        payload.jenkins_url = (this.form.jenkins_url || '').trim()
+        payload.isAuto = this.form.isAuto === 1 ? 1 : 0
+        this.saving = true
+        const request = this.isEditMode
+          ? updatePlan(projectId, this.planId, payload)
+          : createPlan(projectId, payload)
+        request.then(() => {
+          this.$message({ type: 'success', message: this.isEditMode ? '计划更新成功' : '计划创建成功' })
+          this.$router.push({
+            path: '/test-platform/plan',
+            query: {
+              productId: this.form.productId || undefined,
+              projectId: projectId || undefined
+            }
+          })
+        }).finally(() => {
+          this.saving = false
+        })
+      })
+    },
+    /** 与 PlanList 列表行一致，兼容详情接口多种时间字段名 */
+    pickPlanDetailStartRaw(plan) {
+      if (!plan) return ''
+      return (
+        plan.start_date ||
+        plan.startDate ||
+        plan.start_time ||
+        plan.startTime ||
+        plan.begin_time ||
+        plan.beginTime ||
+        plan.planned_start_time ||
+        plan.plannedStartTime ||
+        ''
+      )
+    },
+    pickPlanDetailEndRaw(plan) {
+      if (!plan) return ''
+      return (
+        plan.end_date ||
+        plan.endDate ||
+        plan.end_time ||
+        plan.endTime ||
+        plan.finish_time ||
+        plan.finishTime ||
+        plan.planned_end_time ||
+        plan.plannedEndTime ||
+        ''
+      )
+    },
+    /** 将接口返回的时间戳 / ISO 串等转为 date-picker 的 value-format 字符串 */
+    toDatePickerValue(value) {
+      if (value === undefined || value === null || value === '') return ''
+      if (typeof value === 'number' || (typeof value === 'string' && /^\d+$/.test(value.trim()))) {
+        const raw = Number(value)
+        if (Number.isNaN(raw) || raw <= 0) return ''
+        const ms = raw < 1000000000000 ? raw * 1000 : raw
+        const d = new Date(ms)
+        if (Number.isNaN(d.getTime())) return ''
+        const pad = n => String(n).padStart(2, '0')
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+      }
+      const s = String(value).trim()
+      if (!s) return ''
+      let normalized = s
+      if (s.includes('T')) {
+        normalized = s.replace('T', ' ').replace(/\.\d+/, '').replace(/Z$/i, '').trim()
+      }
+      if (normalized.length >= 19) {
+        return normalized.slice(0, 19)
+      }
+      if (/^\d{4}-\d{2}-\d{2}$/.test(normalized)) {
+        return `${normalized} 00:00:00`
+      }
+      const parsed = new Date(s)
+      if (!Number.isNaN(parsed.getTime())) {
+        const pad = n => String(n).padStart(2, '0')
+        return `${parsed.getFullYear()}-${pad(parsed.getMonth() + 1)}-${pad(parsed.getDate())} ${pad(parsed.getHours())}:${pad(parsed.getMinutes())}:${pad(parsed.getSeconds())}`
+      }
+      return normalized
+    },
+    unwrapPlanDetailPayload(res) {
+      const raw = (res && res.data) || res || {}
+      const inner = raw.plan || raw.detail
+      if (inner && typeof inner === 'object') {
+        return Object.assign({}, raw, inner)
+      }
+      return raw
+    },
+    loadPlanDetail() {
+      if (!this.isEditMode || !this.form.projectId) {
+        return Promise.resolve()
+      }
+      return getPlanDetail(this.form.projectId, this.planId).then(res => {
+        const data = this.unwrapPlanDetailPayload(res)
+        this.form.name = data.name || ''
+        this.form.version = data.version || ''
+        this.form.owner_id = data.owner_id || data.ownerId || ''
+        this.form.environment_id = data.environment_id || data.environmentId || ''
+        this.form.start_time = this.toDatePickerValue(this.pickPlanDetailStartRaw(data))
+        this.form.end_time = this.toDatePickerValue(this.pickPlanDetailEndRaw(data))
+        this.form.description = data.description || ''
+        this.form.jenkins_url = data.jenkins_url || data.jenkinsUrl || ''
+        const autoRaw = data.isAuto !== undefined && data.isAuto !== null ? data.isAuto : data.is_auto
+        this.form.isAuto =
+          autoRaw === true || autoRaw === 1 || autoRaw === '1' ? 1 : 0
+      }).catch(() => {})
+    },
+    initByRouteProject() {
+      if (!this.form.projectId) {
+        return Promise.resolve()
+      }
+      return getProjectDetail(this.form.projectId).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        const productId = data.productId || data.product_id || ''
+        if (productId) {
+          this.form.productId = productId
+          return this.loadProjectOptionsByProduct(productId)
+        }
+      }).catch(() => {})
+    }
+  },
+  created() {
+    this.loadProductOptions().then(() => this.initByRouteProject()).finally(() => {
+      if (this.form.projectId) {
+        this.loadProjectMeta(this.form.projectId).then(() => {
+          this.loadPlanDetail()
+        })
+      }
+    })
  }
 }
 </script>
--- a/src/components/TestPlatform/Plan/PlanCaseAdd.vue
+++ b/src/components/TestPlatform/Plan/PlanCaseAdd.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="关联用例">
+      <el-form :inline="true" size="small" @submit.native.prevent>
+        <el-form-item label="产品名称">
+          <el-input :value="productName" disabled style="width: 220px;"></el-input>
+        </el-form-item>
+        <el-form-item label="项目名称">
+          <el-input :value="projectName" disabled style="width: 220px;"></el-input>
+        </el-form-item>
+        <el-form-item label="计划名称">
+          <el-input :value="planName" disabled style="width: 220px;"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div class="query-toolbar">
+        <el-form :inline="true" :model="queryForm" size="small" class="query-toolbar-form" @submit.native.prevent>
+          <el-form-item label="用例名称">
+            <el-input v-model="queryForm.keyword" clearable style="width: 180px;"></el-input>
+          </el-form-item>
+          <el-form-item label="模块名称">
+            <el-input v-model="queryForm.moduleName" clearable style="width: 160px;"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="fetchCases">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="query-toolbar-actions">
+          <el-button size="small" @click="goBack">返回</el-button>
+          <el-button type="primary" size="small" :loading="submitting" @click="submitAssociate">关联用例</el-button>
+        </div>
+      </div>
+
+      <el-table
+        ref="caseTable"
+        v-loading="loading"
+        :data="tableData"
+        border
+        style="margin-top: 12px;"
+        @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="52"></el-table-column>
+        <el-table-column label="模块名称" min-width="160">
+          <template slot-scope="scope">{{ scope.row.module_name || '-' }}</template>
+        </el-table-column>
+        <el-table-column prop="case_key" label="用例编号" min-width="130"></el-table-column>
+        <el-table-column prop="title" label="用例名称" min-width="220"></el-table-column>
+        <el-table-column label="优先级" width="90">
+          <template slot-scope="scope">{{ formatPriority(scope.row.priority) }}</template>
+        </el-table-column>
+        <el-table-column label="是否已关联计划" width="130">
+          <template slot-scope="scope">
+            <el-tag size="mini" :type="isCaseAssociated(scope.row.id) ? 'success' : 'info'">
+              {{ isCaseAssociated(scope.row.id) ? '已关联' : '未关联' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div style="margin-top: 16px; text-align: right;">
+        <el-pagination
+          :current-page="pageNo"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange">
+        </el-pagination>
+      </div>
+    </page-section>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getCaseList } from '@/api/caseApi'
+import { addPlanCases, getPlanCaseList, getPlanDetail } from '@/api/planApi'
+
+export default {
+  name: 'PlanCaseAdd',
+  components: { PageSection },
+  data() {
+    return {
+      loading: false,
+      submitting: false,
+      pageNo: 1,
+      pageSize: 20,
+      total: 0,
+      tableData: [],
+      selectedRows: [],
+      associatedCaseIdMap: {},
+      /** 自动化测试计划（is_auto=1）：用例列表只按是否实现自动化过滤，不按评审通过状态过滤 */
+      planIsAutomation: false,
+      queryForm: {
+        keyword: '',
+        moduleName: ''
+      },
+      ownerId: this.$route.query.ownerId || ''
+    }
+  },
+  computed: {
+    projectId() {
+      return this.$route.query.projectId || ''
+    },
+    planId() {
+      return this.$route.query.planId || ''
+    },
+    productName() {
+      return this.$route.query.productName || ''
+    },
+    projectName() {
+      return this.$route.query.projectName || ''
+    },
+    planName() {
+      return this.$route.query.planName || ''
+    }
+  },
+  methods: {
+    loadAssociatedCaseIds() {
+      if (!this.projectId || !this.planId) {
+        this.associatedCaseIdMap = {}
+        return Promise.resolve()
+      }
+      return getPlanCaseList(this.projectId, this.planId, {
+        pageNo: 1,
+        pageSize: 2000
+      }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || []
+        this.associatedCaseIdMap = (Array.isArray(list) ? list : []).reduce((map, item) => {
+          const caseId = item.case_id || item.caseId || (item.case && item.case.id) || (item.case && item.case.case_id)
+          if (caseId !== undefined && caseId !== null && caseId !== '') {
+            map[caseId] = true
+          }
+          return map
+        }, {})
+      }).catch(() => {
+        this.associatedCaseIdMap = {}
+      })
+    },
+    fetchCases() {
+      if (!this.projectId) {
+        this.tableData = []
+        this.total = 0
+        return
+      }
+      this.loading = true
+      const params = {
+        keyword: this.queryForm.keyword || undefined,
+        module_name: this.queryForm.moduleName || undefined,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      }
+      if (this.planIsAutomation) {
+        params.isAuto = 1
+      } else {
+        params.status = 4
+      }
+      Promise.all([this.loadAssociatedCaseIds(), getCaseList(this.projectId, params)]).then(([, res]) => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || []
+        this.tableData = Array.isArray(list) ? list : []
+        this.total = Number(data.total || this.tableData.length || 0)
+        this.$nextTick(() => {
+          this.$refs.caseTable && this.$refs.caseTable.clearSelection()
+        })
+        this.selectedRows = []
+      }).catch(() => {
+        this.tableData = []
+        this.total = 0
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    isCaseAssociated(caseId) {
+      return !!this.associatedCaseIdMap[caseId]
+    },
+    /** 拉计划详情：负责人 + 是否自动化测试计划（关联用例列表筛选依赖） */
+    loadPlanContext() {
+      if (!this.projectId || !this.planId) {
+        return Promise.resolve()
+      }
+      return getPlanDetail(this.projectId, this.planId).then(res => {
+        const raw = (res && res.data) || res || {}
+        const inner = raw.plan || raw.detail
+        const data = inner && typeof inner === 'object' ? Object.assign({}, raw, inner) : raw
+        if (!this.ownerId) {
+          this.ownerId = data.owner_id || data.ownerId || ''
+        }
+        const autoRaw = data.isAuto !== undefined && data.isAuto !== null ? data.isAuto : data.is_auto
+        this.planIsAutomation = autoRaw === 1 || autoRaw === true || autoRaw === '1'
+      }).catch(() => {})
+    },
+    handleSelectionChange(rows) {
+      this.selectedRows = rows || []
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchCases()
+    },
+    handleCurrentChange(page) {
+      this.pageNo = page
+      this.fetchCases()
+    },
+    formatPriority(value) {
+      const map = { 0: 'P0', 1: 'P1', 2: 'P2', 3: 'P3' }
+      return map[value] || value
+    },
+    submitAssociate() {
+      if (!this.planId) {
+        this.$message.warning('缺少计划ID')
+        return
+      }
+      if (!this.ownerId) {
+        this.$message.warning('缺少负责人信息，无法关联')
+        return
+      }
+      const caseIds = this.selectedRows.map(item => item.id).filter(Boolean)
+      if (caseIds.length === 0) {
+        this.$message.warning('请先选择要关联的用例')
+        return
+      }
+      this.submitting = true
+      addPlanCases(this.projectId, this.planId, {
+        planId: Number(this.planId),
+        caseIds,
+        assigneeId: Number(this.ownerId),
+        roundNo: 1
+      }).then(() => {
+        this.$message.success('关联用例成功')
+        this.goBack()
+      }).finally(() => {
+        this.submitting = false
+      })
+    },
+    goBack() {
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.$route.query.productId || undefined,
+          projectId: this.projectId || undefined
+        }
+      })
+    }
+  },
+  created() {
+    this.loadPlanContext().finally(() => {
+      this.fetchCases()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+
+.query-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.query-toolbar-form {
+  flex: 1;
+  min-width: 0;
+}
+
+.query-toolbar-actions {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 4px;
+}
+</style>
--- a/src/components/TestPlatform/Plan/PlanExecute.vue
+++ b/src/components/TestPlatform/Plan/PlanExecute.vue
@@ -1,108 +1,253 @@
 <template>
  <div class="page-wrap">
    <page-section title="计划执行">
-      <el-form :inline="true" size="small" @submit.native.prevent>
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 120px;"></el-input>
-        </el-form-item>
-        <el-form-item label="计划ID">
-          <el-input v-model="planId" style="width: 120px;"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="fetchDetail">刷新</el-button>
-        </el-form-item>
-      </el-form>
-      <key-value-descriptions :items="summaryItems"></key-value-descriptions>
-      <el-divider></el-divider>
-      <el-form :model="executeForm" label-width="120px" size="small">
-        <el-form-item label="计划用例ID">
-          <el-input v-model="executeForm.planCaseId"></el-input>
-        </el-form-item>
-        <el-form-item label="执行状态">
-          <el-select v-model="executeForm.status">
-            <el-option label="通过" :value="1"></el-option>
-            <el-option label="失败" :value="2"></el-option>
-            <el-option label="阻塞" :value="3"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="实际结果">
-          <el-input v-model="executeForm.actual_result" type="textarea" :rows="4"></el-input>
-        </el-form-item>
-        <el-form-item label="缺陷链接">
-          <el-input v-model="defectLinksText" placeholder="多个缺陷号用逗号分隔"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" :loading="submitting" @click="submitExecute">提交执行</el-button>
-        </el-form-item>
-      </el-form>
+      <div class="filter-toolbar">
+        <el-form :inline="true" size="small" class="filter-toolbar-form" @submit.native.prevent>
+          <el-form-item label="产品名称">
+            <el-input :value="productName" disabled style="width: 220px;"></el-input>
+          </el-form-item>
+          <el-form-item label="项目名称">
+            <el-input :value="projectName" disabled style="width: 220px;"></el-input>
+          </el-form-item>
+          <el-form-item label="计划名称">
+            <el-input :value="planNameDisplay" disabled style="width: 240px;"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="fetchPlanCases">刷新</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="filter-toolbar-actions">
+          <el-button size="small" @click="goBack">返回</el-button>
+        </div>
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="planCaseTableData"
+        border
+        style="margin-top: 12px;">
+        <el-table-column prop="planCaseId" label="计划用例ID" width="120"></el-table-column>
+        <el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
+        <el-table-column label="模块路径" min-width="200" show-overflow-tooltip>
+          <template slot-scope="scope">{{ scope.row.modulePath || '—' }}</template>
+        </el-table-column>
+        <el-table-column label="模块名称" min-width="140" show-overflow-tooltip>
+          <template slot-scope="scope">{{ scope.row.moduleName || '—' }}</template>
+        </el-table-column>
+        <el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
+        <el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
+        <el-table-column label="执行状态" width="110">
+          <template slot-scope="scope">
+            <el-tag size="mini" :type="formatExecuteStatusTag(scope.row.status)">{{ scope.row.statusLabel }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" @click="openExecuteDialog(scope.row)">执行</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        style="margin-top: 12px; text-align: right;"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="pageNo"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange">
+      </el-pagination>
+
+      <el-dialog
+        title=""
+        :visible.sync="executeDialogVisible"
+        width="760px">
+        <div class="detail-title">{{ selectedPlanCase ? (selectedPlanCase.caseTitle || selectedPlanCase.title || selectedPlanCase.caseKey || selectedPlanCase.caseId) : '' }}</div>
+        <div class="detail-section">
+          <div class="detail-section-title">前置条件</div>
+          <div class="detail-text">{{ caseDetail.preconditions || '-' }}</div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">执行步骤</div>
+          <div class="detail-text">{{ formatSteps(caseDetail.steps) || '-' }}</div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">预期结果</div>
+          <div class="detail-text">{{ caseDetail.expected_results || caseDetail.expectedResults || '-' }}</div>
+        </div>
+        <div class="detail-section">
+          <div class="detail-section-title">执行结果</div>
+          <el-input
+            v-model="executeResultText"
+            type="textarea"
+            :rows="3"
+            placeholder="失败或阻塞时必填">
+          </el-input>
+        </div>
+        <span slot="footer">
+          <el-button @click="executeDialogVisible = false">取消</el-button>
+          <el-button type="success" :loading="submitting" @click="submitExecute(1)">通过</el-button>
+          <el-button type="danger" :loading="submitting" @click="submitExecute(2)">失败</el-button>
+          <el-button type="warning" :loading="submitting" @click="submitExecute(3)">阻塞</el-button>
+        </span>
+      </el-dialog>
    </page-section>
  </div>
 </template>

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import KeyValueDescriptions from '@/components/TestPlatform/common/KeyValueDescriptions'
-import { executePlanCase, getPlanDetail } from '@/api/planApi'
+import { getCaseDetail } from '@/api/caseApi'
+import { executePlanCase, getPlanCaseList } from '@/api/planApi'

 export default {
  name: 'PlanExecute',
-  components: { PageSection, KeyValueDescriptions },
+  components: { PageSection },
  data() {
    return {
-      projectId: this.$route.query.projectId || 1,
+      projectId: this.$route.query.projectId || '',
      planId: this.$route.query.planId || '',
-      detail: {},
+      loading: false,
+      planCaseTableData: [],
+      total: 0,
+      selectedPlanCase: null,
+      caseDetail: {},
+      executeDialogVisible: false,
      submitting: false,
-      defectLinksText: '',
-      executeForm: {
-        planCaseId: '',
-        status: 1,
-        actual_result: ''
-      }
+      executeResultText: '',
+      pageNo: 1,
+      pageSize: 10
    }
  },
  computed: {
-    summaryItems() {
-      return [
-        { label: '计划ID', value: this.detail.id },
-        { label: '计划名称', value: this.detail.name },
-        { label: '总用例数', value: this.detail.total_cases },
-        { label: '已完成', value: this.detail.completed },
-        { label: '通过率', value: this.detail.pass_rate }
-      ]
+    productName() {
+      return this.$route.query.productName || ''
+    },
+    projectName() {
+      return this.$route.query.projectName || ''
+    },
+    planNameDisplay() {
+      return this.$route.query.planName || ''
    }
  },
  methods: {
-    fetchDetail() {
-      if (!this.planId) {
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchPlanCases()
+    },
+    handleCurrentChange(page) {
+      this.pageNo = page
+      this.fetchPlanCases()
+    },
+    fetchPlanCases() {
+      if (!this.planId || !this.projectId) {
+        this.planCaseTableData = []
+        this.total = 0
+        this.selectedPlanCase = null
+        this.caseDetail = {}
        return
      }
-      getPlanDetail(this.projectId, this.planId).then(res => {
-        this.detail = (res && res.data) || res || {}
+      this.loading = true
+      getPlanCaseList(this.projectId, this.planId, { pageNo: this.pageNo, pageSize: this.pageSize })
+        .then(listRes => {
+          const data = (listRes && listRes.data) || listRes || {}
+          const list = data.list || data.items || []
+          this.total = Number(data.total != null ? data.total : (Array.isArray(list) ? list.length : 0))
+          this.planCaseTableData = (Array.isArray(list) ? list : []).map(item => ({
+            planCaseId: item.id,
+            caseId: item.case_id || item.caseId,
+            status: item.status,
+            statusLabel: this.formatExecuteStatus(item.status),
+            actualResult: item.actual_result || item.actualResult || '',
+            caseKey: item.case_key || item.caseKey || '',
+            modulePath: item.module_path || item.modulePath || '',
+            moduleName: item.module_name || item.moduleName || '',
+            caseTitle: item.case_title || item.caseTitle || item.title || '',
+            title: item.title || item.case_title || item.caseTitle || ''
+          }))
+        })
+        .catch(() => {
+          this.planCaseTableData = []
+          this.total = 0
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    openExecuteDialog(row) {
+      if (!row) return
+      this.selectedPlanCase = row
+      this.executeResultText = ''
+      if (!row.caseId) {
+        this.caseDetail = {}
+        this.executeDialogVisible = true
+        return
+      }
+      getCaseDetail(this.projectId, row.caseId).then(res => {
+        const data = (res && res.data) || res || {}
+        this.caseDetail = data
+        this.executeDialogVisible = true
      }).catch(() => {
-        this.detail = {}
+        this.caseDetail = {}
+        this.executeDialogVisible = true
      })
    },
-    submitExecute() {
-      if (!this.executeForm.planCaseId) {
-        this.$message({ type: 'warning', message: '请输入计划用例ID' })
+    submitExecute(status) {
+      if (!this.selectedPlanCase || !this.selectedPlanCase.planCaseId) {
+        this.$message({ type: 'warning', message: '请先选择要执行的用例' })
+        return
+      }
+      if ((status === 2 || status === 3) && !String(this.executeResultText || '').trim()) {
+        this.$message({ type: 'warning', message: '失败或阻塞时请填写执行结果' })
        return
      }
      this.submitting = true
-      executePlanCase(this.projectId, this.planId, this.executeForm.planCaseId, {
-        status: this.executeForm.status,
-        actual_result: this.executeForm.actual_result,
-        defect_links: this.defectLinksText ? this.defectLinksText.split(',').map(item => item.trim()).filter(Boolean) : [],
+      executePlanCase(this.projectId, this.planId, this.selectedPlanCase.planCaseId, {
+        status,
+        actualResult: this.executeResultText,
+        defectLinks: [],
        attachments: []
      }).then(() => {
        this.$message({ type: 'success', message: '执行结果已提交' })
+        this.executeDialogVisible = false
+        this.fetchPlanCases()
      }).finally(() => {
        this.submitting = false
      })
+    },
+    formatSteps(steps) {
+      if (!steps) return ''
+      if (typeof steps === 'string') return steps
+      if (Array.isArray(steps)) {
+        return steps.map(item => {
+          if (typeof item === 'string') return item
+          return item.action || item.step || item.text || item.content || ''
+        }).filter(Boolean).join('\n')
+      }
+      return String(steps)
+    },
+    formatExecuteStatus(status) {
+      const map = { 0: '待执行', 1: '通过', 2: '失败', 3: '阻塞' }
+      return map[status] || status
+    },
+    formatExecuteStatusTag(status) {
+      const map = { 0: 'info', 1: 'success', 2: 'danger', 3: 'warning' }
+      return map[status] || 'info'
+    },
+    goBack() {
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.$route.query.productId || undefined,
+          projectId: this.projectId || undefined
+        }
+      })
    }
  },
  created() {
-    this.fetchDetail()
+    this.fetchPlanCases()
  }
 }
 </script>
@@ -111,4 +256,54 @@ export default {
 .page-wrap {
  padding: 20px;
 }
+
+.filter-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.filter-toolbar-form {
+  flex: 1;
+  min-width: 0;
+}
+
+.filter-toolbar-actions {
+  flex-shrink: 0;
+  padding-top: 4px;
+}
+
+.detail-panel {
+  margin-top: 16px;
+}
+
+.detail-title {
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #303133;
+  font-size: 18px;
+  line-height: 1.4;
+}
+
+.detail-text {
+  white-space: pre-wrap;
+  color: #606266;
+  line-height: 1.5;
+}
+
+.detail-section {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+}
+
+.detail-section-title {
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
 </style>
--- a/src/components/TestPlatform/Plan/PlanList.vue
+++ b/src/components/TestPlatform/Plan/PlanList.vue
@@ -4,37 +4,168 @@
      <template slot="extra">
        <el-button type="primary" size="small" @click="goBuilder()">新建计划</el-button>
      </template>
-      <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 120px;"></el-input>
+      <el-form :inline="true" size="small" @submit.native.prevent>
+        <el-form-item label="产品名称">
+          <el-select
+            v-model="selectedProductId"
+            filterable
+            clearable
+            placeholder="请选择产品"
+            style="width: 220px;"
+            @change="handleProductChange"
+            @focus="loadProductOptions">
+            <el-option
+              v-for="item in productOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
        </el-form-item>
-        <el-form-item label="关键词">
-          <el-input v-model="queryForm.keyword" clearable></el-input>
+        <el-form-item label="项目名称">
+          <el-select
+            v-model="selectedProjectId"
+            filterable
+            clearable
+            placeholder="请选择项目"
+            style="width: 240px;"
+            :disabled="!selectedProductId"
+            @change="handleProjectChange">
+            <el-option
+              v-for="item in projectOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-form :inline="true" :model="queryForm" size="small" style="margin-top: 8px;" @submit.native.prevent>
+        <el-form-item label="计划名称">
+          <el-input v-model="queryForm.planName" clearable style="width: 180px;"></el-input>
        </el-form-item>
        <el-form-item label="状态">
-          <el-select v-model="queryForm.status" clearable>
+          <el-select v-model="queryForm.status" clearable style="width: 120px;">
            <el-option label="草稿" :value="0"></el-option>
            <el-option label="进行中" :value="1"></el-option>
            <el-option label="已完成" :value="2"></el-option>
            <el-option label="已归档" :value="3"></el-option>
+            <el-option label="已通过" :value="4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="版本">
+          <el-input v-model="queryForm.version" clearable style="width: 140px;"></el-input>
+        </el-form-item>
+        <el-form-item label="负责人">
+          <el-select
+            v-model="queryForm.owner"
+            filterable
+            clearable
+            placeholder="请选择负责人"
+            style="width: 180px;"
+            :disabled="!selectedProjectId">
+            <el-option v-for="u in ownerMemberOptions" :key="'plan-owner-' + u.id" :label="u.name" :value="u.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
-          <el-button type="primary" @click="fetchList">查询</el-button>
+          <el-button type="primary" :disabled="!selectedProjectId" @click="fetchList">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="tableData" border style="margin-top: 16px;">
        <el-table-column prop="name" label="计划名称" min-width="180"></el-table-column>
-        <el-table-column prop="version" label="版本" width="120"></el-table-column>
-        <el-table-column prop="owner_id" label="负责人" width="120"></el-table-column>
-        <el-table-column prop="status" label="状态" width="100"></el-table-column>
-        <el-table-column label="操作" width="260">
+        <el-table-column label="是否自动化测试" width="140">
+          <template slot-scope="scope">{{ formatPlanIsAuto(scope.row) }}</template>
+        </el-table-column>
+        <el-table-column label="开始时间" min-width="170">
+          <template slot-scope="scope">{{ formatDateTime(getStartTimeValue(scope.row)) }}</template>
+        </el-table-column>
+        <el-table-column label="结束时间" min-width="170">
+          <template slot-scope="scope">{{ formatDateTime(getEndTimeValue(scope.row)) }}</template>
+        </el-table-column>
+        <el-table-column label="负责人" width="140">
+          <template slot-scope="scope">{{ formatOwner(scope.row) }}</template>
+        </el-table-column>
+        <el-table-column label="环境" width="160">
+          <template slot-scope="scope">{{ formatEnvironment(scope.row) }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="110">
+          <template slot-scope="scope">{{ formatStatus(scope.row.status) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="660">
          <template slot-scope="scope">
-            <el-button type="text" @click="goExecute(scope.row)">执行</el-button>
+            <el-button type="text" @click="goEdit(scope.row)">编辑</el-button>
+            <el-button type="text" @click="goAssociateCases(scope.row)">关联用例</el-button>
+            <el-button v-if="!isPlanAutomation(scope.row)" type="text" @click="goExecute(scope.row)">执行</el-button>
            <el-button type="text" @click="goProgress(scope.row)">进度</el-button>
+            <el-button type="text" @click="openHookSendDialog(scope.row)">发送消息</el-button>
+            <el-button v-if="isPlanAutomation(scope.row)" type="text" @click="runAutoCases(scope.row)">执行自动化用例</el-button>
+            <el-button type="text" class="danger-text" @click="confirmDeletePlan(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
+      <el-dialog
+        title="发送消息"
+        :visible.sync="hookSendDialogVisible"
+        width="600px"
+        append-to-body
+        @close="resetHookSendForm">
+        <el-form ref="hookSendFormRef" :model="hookSendForm" label-width="108px" size="small">
+          <el-form-item label="计划">
+            <el-input :value="hookSendPlanName" disabled />
+          </el-form-item>
+          <el-form-item label="消息标题">
+            <el-input :value="hookSendPreviewTitle" disabled />
+          </el-form-item>
+          <el-form-item label="消息正文" prop="content">
+            <el-input
+              v-model.trim="hookSendForm.content"
+              type="textarea"
+              :rows="5"
+              maxlength="4000"
+              show-word-limit
+              placeholder="默认含待执行说明与计划执行链接，可自行修改" />
+          </el-form-item>
+          <el-form-item label="消息类型">
+            <el-select
+              v-model="hookSendForm.hookType"
+              clearable
+              placeholder="不选则加载全部类型下的配置"
+              style="width: 100%;"
+              @change="onHookSendTypeChange">
+              <el-option label="飞书" :value="1" />
+              <el-option label="钉钉" :value="2" />
+              <el-option label="企微" :value="3" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="Webhook 配置">
+            <el-select
+              v-model="hookSendForm.hookId"
+              filterable
+              clearable
+              :loading="hookSendHookListLoading"
+              placeholder="选择当前项目、当前类型下的配置；不选则按类型发全部（未选类型则发全部 Hook）"
+              style="width: 100%;">
+              <el-option
+                v-for="h in hookSendHookOptions"
+                :key="'hook-opt-' + h.id"
+                :label="formatHookSendOptionLabel(h)"
+                :value="h.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="@ 真实姓名" prop="realName">
+            <el-input v-model.trim="hookSendForm.realName" maxlength="64" placeholder="默认计划负责人，可改" />
+          </el-form-item>
+        </el-form>
+        <div v-if="hookSendResultLines.length" class="hook-send-result">
+          <div class="hook-send-result-title">发送结果</div>
+          <div v-for="(line, idx) in hookSendResultLines" :key="'hr-' + idx" class="hook-send-result-line">{{ line }}</div>
+        </div>
+        <span slot="footer">
+          <el-button size="small" @click="hookSendDialogVisible = false">取消</el-button>
+          <el-button type="primary" size="small" :loading="hookSendSubmitting" @click="submitHookSend">发送</el-button>
+        </span>
+      </el-dialog>
      <div style="margin-top: 16px; text-align: right;">
        <el-pagination
          :current-page="pageNo"
@@ -52,49 +183,747 @@

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import { getPlanList } from '@/api/planApi'
+import { deletePlan, getPlanList } from '@/api/planApi'
+import { getProductList } from '@/api/productApi'
+import {
+  getProjectDetail,
+  getProjectEnvironments,
+  getProjectHookList,
+  getProjectList,
+  getProjectMembers,
+  sendProjectHookMessage
+} from '@/api/projectApi'
+import {
+  readLastProductProjectCache,
+  saveLastProductProjectCache,
+  pickIdFromOptions
+} from '@/utils/lastProductProjectCache'

 export default {
  name: 'PlanList',
  components: { PageSection },
+  computed: {
+    hookSendPreviewTitle() {
+      const row = this.hookSendPlanRow
+      if (!row) return ''
+      return (row.name || '').trim() || this.hookSendPlanName || '测试计划'
+    }
+  },
  data() {
    return {
      loading: false,
-      projectId: this.$route.query.projectId || 1,
+      projectId: this.$route.query.projectId || '',
+      selectedProductId: '',
+      selectedProjectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
+      productOptions: [],
+      projectOptions: [],
+      ownerMap: {},
+      /** 负责人筛选下拉（label 优先 real_name，与 ownerMap 同源） */
+      ownerMemberOptions: [],
+      environmentMap: {},
      queryForm: {
-        keyword: '',
-        status: ''
+        planName: '',
+        status: '',
+        version: '',
+        owner: ''
      },
      pageNo: 1,
      pageSize: 10,
      total: 0,
-      tableData: []
+      tableData: [],
+      hookSendDialogVisible: false,
+      hookSendSubmitting: false,
+      hookSendPlanName: '',
+      /** 当前要推送机器人消息的计划行 */
+      hookSendPlanRow: null,
+      hookSendHookOptions: [],
+      hookSendHookListLoading: false,
+      hookSendForm: {
+        hookType: '',
+        hookId: '',
+        content: '',
+        realName: ''
+      },
+      hookSendResultLines: []
    }
  },
+  beforeRouteLeave(to, from, next) {
+    this.savePageCache()
+    next()
+  },
  methods: {
+    getCacheKey() {
+      return 'test-platform-plan-list-cache'
+    },
+    savePageCache() {
+      const cache = {
+        projectId: this.projectId,
+        selectedProductId: this.selectedProductId,
+        selectedProjectId: this.selectedProjectId,
+        productOptions: this.productOptions,
+        projectOptions: this.projectOptions,
+        ownerMap: this.ownerMap,
+        ownerMemberOptions: this.ownerMemberOptions,
+        environmentMap: this.environmentMap,
+        queryForm: this.queryForm,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        total: this.total,
+        tableData: this.tableData
+      }
+      window.sessionStorage.setItem(this.getCacheKey(), JSON.stringify(cache))
+    },
+    restorePageCache() {
+      const raw = window.sessionStorage.getItem(this.getCacheKey())
+      if (!raw) return false
+      try {
+        const cache = JSON.parse(raw)
+        this.projectId = cache.projectId || ''
+        this.selectedProductId = cache.selectedProductId || ''
+        this.selectedProjectId = cache.selectedProjectId || ''
+        this.productOptions = cache.productOptions || []
+        this.projectOptions = cache.projectOptions || []
+        this.ownerMap = cache.ownerMap || {}
+        this.ownerMemberOptions = Array.isArray(cache.ownerMemberOptions) ? cache.ownerMemberOptions : []
+        if (!this.ownerMemberOptions.length && this.ownerMap && Object.keys(this.ownerMap).length) {
+          this.ownerMemberOptions = Object.keys(this.ownerMap).map(k => ({
+            id: /^\d+$/.test(String(k)) ? Number(k) : k,
+            name: this.ownerMap[k]
+          }))
+        }
+        this.environmentMap = cache.environmentMap || {}
+        this.queryForm = cache.queryForm || {
+          planName: '',
+          status: '',
+          version: '',
+          owner: ''
+        }
+        this.syncOwnerFilterWithMemberOptions()
+        this.pageNo = Number(cache.pageNo || 1)
+        this.pageSize = Number(cache.pageSize || 10)
+        this.total = Number(cache.total || 0)
+        this.tableData = Array.isArray(cache.tableData) ? cache.tableData : []
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    loadProductOptions() {
+      if (this.productOptions && this.productOptions.length > 0) {
+        return Promise.resolve()
+      }
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.productOptions = []
+      })
+    },
+    loadProjectOptionsByProduct(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.projectOptions = []
+      })
+    },
+    handleProductChange(val) {
+      this.selectedProjectId = ''
+      this.projectId = ''
+      this.queryForm.owner = ''
+      this.ownerMap = {}
+      this.ownerMemberOptions = []
+      this.tableData = []
+      this.total = 0
+      this.loadProjectOptionsByProduct(val)
+    },
+    handleProjectChange(val) {
+      this.selectedProjectId = val || ''
+      this.projectId = val || ''
+      this.pageNo = 1
+      this.queryForm.owner = ''
+      this.ownerMap = {}
+      this.ownerMemberOptions = []
+      this.environmentMap = {}
+      if (!val) {
+        this.tableData = []
+        this.total = 0
+        return
+      }
+      saveLastProductProjectCache(this.selectedProductId, val)
+      this.loadProjectMetaMaps(val).finally(() => {
+        this.fetchList()
+      })
+    },
+    restoreSharedProductProjectCache() {
+      const cached = readLastProductProjectCache()
+      const q = this.$route.query || {}
+      const fromPlanSelf = q.planOwnerSelf === '1' || q.planOwnerSelf === 'true'
+      let pid = cached && cached.productId
+      let projId = cached && cached.projectId
+      if (fromPlanSelf) {
+        if (q.productId !== undefined && q.productId !== null && String(q.productId).trim() !== '') {
+          pid = q.productId
+        }
+        if (q.projectId !== undefined && q.projectId !== null && String(q.projectId).trim() !== '') {
+          projId = q.projectId
+        }
+      }
+      if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
+        return Promise.resolve()
+      }
+      const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
+      if (!hasProduct) return Promise.resolve()
+      this.selectedProductId = pickIdFromOptions(this.productOptions, pid)
+      return this.loadProjectOptionsByProduct(this.selectedProductId).then(() => {
+        const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
+        if (!hasProject) return
+        const picked = pickIdFromOptions(this.projectOptions, projId)
+        this.selectedProjectId = picked
+        this.projectId = picked
+      })
+    },
+    mergeCurrentUserIntoOwnerMemberOptionsIfNeeded() {
+      const u = this.$store.state.currentUser
+      if (!u || u.id == null || u.id === '') return
+      const id = u.id
+      if ((this.ownerMemberOptions || []).some(m => String(m.id) === String(id))) return
+      const name = u.realName || u.username || '当前用户'
+      this.ownerMemberOptions = [{ id, name }, ...(this.ownerMemberOptions || [])]
+      this.ownerMap = Object.assign({}, this.ownerMap, { [id]: name })
+    },
+    applyPlanOwnerSelfFromRoute() {
+      const q = this.$route.query || {}
+      if (q.planOwnerSelf !== '1' && q.planOwnerSelf !== 'true') return
+      const u = this.$store.state.currentUser
+      const uid = u && u.id != null && u.id !== '' ? u.id : null
+      if (uid == null) {
+        this.$message.warning('请先登录')
+        return
+      }
+      if (!this.selectedProjectId) {
+        this.$message.warning('请先选择项目，或从首页在已选过产品/项目时进入')
+        return
+      }
+      this.mergeCurrentUserIntoOwnerMemberOptionsIfNeeded()
+      this.queryForm.owner = uid
+      this.pageNo = 1
+    },
+    /** 负责人筛选值为成员 id；若不在当前项目成员列表中则清空（避免缓存里旧姓名或无效 id） */
+    syncOwnerFilterWithMemberOptions() {
+      const cur = this.queryForm.owner
+      if (cur === '' || cur === undefined || cur === null) return
+      const idSet = new Set(this.ownerMemberOptions.map(u => String(u.id)))
+      if (!idSet.has(String(cur))) {
+        this.queryForm.owner = ''
+      }
+    },
+    loadProjectMetaMaps(projectId) {
+      if (!projectId) {
+        this.ownerMap = {}
+        this.ownerMemberOptions = []
+        this.environmentMap = {}
+        return Promise.resolve()
+      }
+      const memberReq = getProjectMembers(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.items || data.list || data.data || data || []
+        const arr = Array.isArray(list) ? list : []
+        this.ownerMemberOptions = arr
+          .map(item => {
+            const id = item.user_id || item.userId || item.id
+            const name =
+              item.real_name ||
+              item.realName ||
+              item.username ||
+              item.name ||
+              item.user_name ||
+              (id !== undefined && id !== null ? String(id) : '')
+            return { id, name }
+          })
+          .filter(u => u.id !== undefined && u.id !== null && u.id !== '')
+        this.ownerMap = this.ownerMemberOptions.reduce((map, u) => {
+          map[u.id] = u.name || String(u.id)
+          return map
+        }, {})
+        this.syncOwnerFilterWithMemberOptions()
+      }).catch(() => {
+        this.ownerMap = {}
+        this.ownerMemberOptions = []
+      })
+      const envReq = getProjectEnvironments(projectId, { pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.items || data.list || data.data || data || []
+        this.environmentMap = (Array.isArray(list) ? list : []).reduce((map, item) => {
+          if (item.id !== undefined && item.id !== null && item.id !== '') {
+            map[item.id] = item.name || String(item.id)
+          }
+          return map
+        }, {})
+      }).catch(() => {
+        this.environmentMap = {}
+      })
+      return Promise.all([memberReq, envReq])
+    },
    fetchList() {
+      if (!this.projectId) {
+        this.tableData = []
+        this.total = 0
+        return
+      }
      this.loading = true
-      getPlanList(this.projectId, this.queryForm).then(res => {
+      const params = this.cleanParams({
+        planName: this.queryForm.planName,
+        keyword: this.queryForm.planName,
+        status: this.queryForm.status,
+        version: this.queryForm.version,
+        owner: this.queryForm.owner,
+        owner_id: this.queryForm.owner,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      })
+      getPlanList(this.projectId, params).then(res => {
        const data = (res && res.data) || res || {}
        this.tableData = data.items || data.list || []
+        this.total = Number(data.total || this.tableData.length || 0)
+        this.savePageCache()
      }).catch(() => {
        this.tableData = []
+        this.total = 0
+        this.savePageCache()
      }).finally(() => {
        this.loading = false
      })
    },
+    cleanParams(params) {
+      return Object.keys(params).reduce((result, key) => {
+        if (params[key] !== '' && params[key] !== undefined && params[key] !== null) {
+          result[key] = params[key]
+        }
+        return result
+      }, {})
+    },
+    resetQuery() {
+      this.queryForm = {
+        planName: '',
+        status: '',
+        version: '',
+        owner: ''
+      }
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleCurrentChange(page) {
+      this.pageNo = page
+      this.fetchList()
+    },
    goBuilder() {
-      this.$router.push({ path: '/test-platform/plans/builder', query: { projectId: this.projectId } })
+      this.$router.push({ path: '/test-platform/plan/builder', query: { projectId: this.projectId } })
+    },
+    goEdit(row) {
+      this.$router.push({
+        path: '/test-platform/plan/builder',
+        query: {
+          projectId: this.projectId,
+          planId: row.id
+        }
+      })
+    },
+    confirmDeletePlan(row) {
+      if (!row || row.id == null) {
+        this.$message.warning('缺少计划信息')
+        return
+      }
+      if (!this.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      const name = (row.name || '').trim() || `计划 #${row.id}`
+      this.$confirm(`确定删除计划「${name}」吗？删除后不可恢复。`, '删除确认', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => deletePlan(row.id))
+        .then(() => {
+          this.$message.success('删除成功')
+          this.fetchList()
+        })
+        .catch(() => {})
+    },
+    goAssociateCases(row) {
+      const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
+      const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
+      this.$router.push({
+        path: '/test-platform/plan/case/add',
+        query: {
+          productId: this.selectedProductId || undefined,
+          productName: (product && product.name) || '',
+          projectId: this.projectId || undefined,
+          projectName: (project && project.name) || '',
+          planId: row.id,
+          planName: row.name || '',
+          ownerId: row.owner_id || row.ownerId || undefined
+        }
+      })
    },
    goExecute(row) {
-      this.$router.push({ path: '/test-platform/plans/execute', query: { projectId: this.projectId, planId: row.id } })
+      const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
+      const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
+      this.$router.push({
+        path: '/test-platform/plan/execute',
+        query: {
+          productId: this.selectedProductId || undefined,
+          productName: (product && product.name) || '',
+          projectId: this.projectId,
+          projectName: (project && project.name) || '',
+          planId: row.id,
+          planName: row.name || ''
+        }
+      })
+    },
+    openHookSendDialog(row) {
+      if (!this.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      const name = (row && row.name) || ''
+      this.hookSendPlanName = name || `计划 #${row && row.id != null ? row.id : ''}`
+      this.hookSendPlanRow = row || null
+      const defaultContent = this.buildPlanExecuteMessageBody(row)
+      const defaultReal = this.getPlanOwnerRealName(row)
+      this.hookSendForm = {
+        hookType: '',
+        hookId: '',
+        content: defaultContent,
+        realName: defaultReal
+      }
+      this.hookSendHookOptions = []
+      this.hookSendResultLines = []
+      this.hookSendDialogVisible = true
+      this.loadHookSendOptions()
+      this.$nextTick(() => {
+        if (this.$refs.hookSendFormRef) {
+          this.$refs.hookSendFormRef.clearValidate()
+        }
+      })
+    },
+    resetHookSendForm() {
+      this.hookSendSubmitting = false
+      this.hookSendPlanName = ''
+      this.hookSendPlanRow = null
+      this.hookSendHookOptions = []
+      this.hookSendForm = {
+        hookType: '',
+        hookId: '',
+        content: '',
+        realName: ''
+      }
+      this.hookSendResultLines = []
+      this.$nextTick(() => {
+        if (this.$refs.hookSendFormRef) {
+          this.$refs.hookSendFormRef.resetFields()
+        }
+      })
+    },
+    /** 与「执行」入口一致的计划执行页链接（绝对地址，便于 IM 中点击） */
+    buildPlanExecuteUrl(row) {
+      if (!row || row.id == null) return ''
+      const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
+      const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
+      const loc = this.$router.resolve({
+        path: '/test-platform/plan/execute',
+        query: {
+          productId: this.selectedProductId || undefined,
+          productName: (product && product.name) || '',
+          projectId: this.projectId,
+          projectName: (project && project.name) || '',
+          planId: row.id,
+          planName: row.name || ''
+        }
+      })
+      const href = (loc && loc.href) || ''
+      if (!href) return ''
+      if (/^https?:\/\//i.test(href)) return href
+      const origin = typeof window !== 'undefined' && window.location ? window.location.origin : ''
+      return origin + (href.charAt(0) === '/' ? href : `/${href}`)
+    },
+    buildPlanExecuteMessageBody(row) {
+      const url = this.buildPlanExecuteUrl(row)
+      if (!url) return '你有一条测试计划待执行：'
+      return `你有一条测试计划待执行：\n${url}`
+    },
+    /** 计划负责人展示名（优先真实姓名类字段，用于 @） */
+    getPlanOwnerRealName(row) {
+      if (!row) return ''
+      const oid = row.owner_id != null ? row.owner_id : row.ownerId
+      const fromMap = oid != null && oid !== '' ? this.ownerMap[oid] : ''
+      const s = (
+        row.owner_real_name ||
+        row.ownerRealName ||
+        row.owner_name ||
+        row.ownerName ||
+        fromMap ||
+        ''
+      ).trim()
+      return s
+    },
+    onHookSendTypeChange() {
+      this.hookSendForm.hookId = ''
+      this.loadHookSendOptions()
+    },
+    loadHookSendOptions() {
+      const pid = Number(this.projectId)
+      if (!pid || Number.isNaN(pid)) {
+        this.hookSendHookOptions = []
+        return
+      }
+      const params = { projectId: pid, pageNo: 1, pageSize: 500 }
+      const ht = this.hookSendForm.hookType
+      if (ht === 1 || ht === 2 || ht === 3) {
+        params.hookType = ht
+      }
+      this.hookSendHookListLoading = true
+      getProjectHookList(params)
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.list || data.items || []
+          this.hookSendHookOptions = Array.isArray(list) ? list : []
+        })
+        .catch(() => {
+          this.hookSendHookOptions = []
+        })
+        .finally(() => {
+          this.hookSendHookListLoading = false
+        })
+    },
+    formatHookSendOptionLabel(item) {
+      if (!item) return ''
+      const typeName = item.hook_type_name || this.hookTypeSendLabel(item.hook_type != null ? item.hook_type : item.hookType)
+      const desc = (item.description || '').trim()
+      const url = String(item.webhook_url || item.webhookUrl || '').trim()
+      const shortUrl = url.length > 42 ? `${url.slice(0, 42)}…` : url
+      if (desc) return `${desc}（${typeName} #${item.id}）`
+      if (shortUrl) return `${shortUrl}（${typeName} #${item.id}）`
+      return `${typeName} #${item.id}`
+    },
+    hookTypeSendLabel(type) {
+      const map = { 1: '飞书', 2: '钉钉', 3: '企微' }
+      return map[Number(type)] || String(type || '-')
+    },
+    submitHookSend() {
+      const row = this.hookSendPlanRow
+      if (!row || row.id == null) {
+        this.$message.warning('缺少计划信息')
+        return
+      }
+      const pid = Number(this.projectId)
+      if (!pid || Number.isNaN(pid)) {
+        this.$message.warning('项目 ID 无效')
+        return
+      }
+      const title = (this.hookSendPreviewTitle || '').trim() || '测试计划'
+      const content = (this.hookSendForm.content || '').trim()
+      if (!content) {
+        this.$message.warning('消息正文不能为空')
+        return
+      }
+      if (content === '你有一条测试计划待执行：') {
+        this.$message.warning('无法生成计划执行链接，请检查项目与计划')
+        return
+      }
+      const payload = {
+        projectId: pid,
+        title,
+        content
+      }
+      const rn = (this.hookSendForm.realName || '').trim()
+      if (rn) payload.realName = rn
+      const hid = this.hookSendForm.hookId
+      if (hid !== '' && hid !== null && hid !== undefined) {
+        const n = Number(hid)
+        if (!Number.isNaN(n)) {
+          payload.hookId = n
+          const found = (this.hookSendHookOptions || []).find(h => String(h.id) === String(hid))
+          const fht = found && (found.hook_type != null ? found.hook_type : found.hookType)
+          if (fht === 1 || fht === 2 || fht === 3) {
+            payload.hookType = fht
+          }
+        }
+      } else {
+        const ht = this.hookSendForm.hookType
+        if (ht === 1 || ht === 2 || ht === 3) {
+          payload.hookType = ht
+        }
+      }
+      this.hookSendSubmitting = true
+      this.hookSendResultLines = []
+      sendProjectHookMessage(payload)
+        .then(res => {
+          const msg = (res && res.message) || ''
+          if (res && res.code === 20000) {
+            const list = res.data
+            const lines = []
+            if (Array.isArray(list)) {
+              list.forEach(item => {
+                const hid = item.hook_id != null ? item.hook_id : item.hookId
+                const htype = item.hook_type != null ? item.hook_type : item.hookType
+                const ok = item.success === true || item.success === 1
+                lines.push(
+                  `Hook #${hid}（${this.hookTypeSendLabel(htype)}）：${ok ? '成功' : '失败'}`
+                )
+              })
+            }
+            this.hookSendResultLines = lines
+            this.$message.success(msg || '已提交发送')
+            return
+          }
+          this.$message.error(msg || '发送失败')
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.hookSendSubmitting = false
+        })
+    },
+    runAutoCases(row) {
+      if (!row || row.id == null) {
+        this.$message.warning('缺少计划信息')
+        return
+      }
+      if (!this.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
+      const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
+      const jenkinsUrl = (row.jenkins_url || row.jenkinsUrl || '').trim()
+      this.$router.push({
+        path: '/test-platform/plan/automation',
+        query: {
+          productId: this.selectedProductId || undefined,
+          productName: (product && product.name) || '',
+          projectId: this.projectId,
+          projectName: (project && project.name) || '',
+          planId: row.id,
+          planName: row.name || '',
+          environmentId: row.environment_id != null ? row.environment_id : row.environmentId,
+          jenkinsUrl: jenkinsUrl || undefined
+        }
+      })
    },
    goProgress(row) {
-      this.$router.push({ path: '/test-platform/plans/progress', query: { projectId: this.projectId, planId: row.id } })
+      const project = (this.projectOptions || []).find(item => String(item.id) === String(this.projectId))
+      const product = (this.productOptions || []).find(item => String(item.id) === String(this.selectedProductId))
+      this.$router.push({
+        path: '/test-platform/plan/progress',
+        query: {
+          productId: this.selectedProductId || undefined,
+          productName: (product && product.name) || '',
+          projectId: this.projectId || undefined,
+          projectName: (project && project.name) || '',
+          planId: row.id,
+          planName: row.name || ''
+        }
+      })
+    },
+    formatPlanIsAuto(row) {
+      if (!row) return '-'
+      const v = row.isAuto !== undefined && row.isAuto !== null ? row.isAuto : row.is_auto
+      if (v === 1 || v === true || v === '1') return '是'
+      if (v === 0 || v === false || v === '0') return '否'
+      return '-'
+    },
+    /** 列表 is_auto === 1：自动化测试计划，只展示「执行自动化用例」 */
+    isPlanAutomation(row) {
+      if (!row) return false
+      const v = row.isAuto !== undefined && row.isAuto !== null ? row.isAuto : row.is_auto
+      return v === 1 || v === true || v === '1'
+    },
+    formatStatus(value) {
+      const map = { 0: '草稿', 1: '进行中', 2: '已完成', 3: '已归档', 4: '已通过' }
+      return map[value] || value
+    },
+    formatOwner(row) {
+      const ownerId = row.owner_id || row.ownerId
+      return row.owner_name || row.ownerName || row.username || row.owner || this.ownerMap[ownerId] || ownerId || '-'
+    },
+    formatEnvironment(row) {
+      const envId = row.environment_id || row.environmentId
+      return row.environment_name || row.environmentName || row.env_name || row.environment || this.environmentMap[envId] || envId || '-'
+    },
+    getStartTimeValue(row) {
+      if (!row) return ''
+      return row.start_date || row.startDate || row.start_time || row.startTime || row.begin_time || row.beginTime || row.planned_start_time || row.plannedStartTime || ''
+    },
+    getEndTimeValue(row) {
+      if (!row) return ''
+      return row.end_date || row.endDate || row.end_time || row.endTime || row.finish_time || row.finishTime || row.planned_end_time || row.plannedEndTime || ''
+    },
+    formatDateTime(value) {
+      if (!value) return '-'
+      if (typeof value === 'number' || /^\d+$/.test(String(value))) {
+        const raw = Number(value)
+        if (!Number.isNaN(raw) && raw > 0) {
+          const ms = raw < 1000000000000 ? raw * 1000 : raw
+          const date = new Date(ms)
+          if (!Number.isNaN(date.getTime())) {
+            const pad = n => String(n).padStart(2, '0')
+            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
+          }
+        }
+      }
+      return String(value).replace('T', ' ').slice(0, 19)
    }
  },
  created() {
-    this.fetchList()
+    const planOwnerSelf = this.$route.query.planOwnerSelf === '1' || this.$route.query.planOwnerSelf === 'true'
+    if (planOwnerSelf) {
+      try {
+        window.sessionStorage.removeItem(this.getCacheKey())
+      } catch (e) {}
+    }
+    // 若存在缓存（通常是从二级页返回），直接恢复，不自动刷新数据
+    if (this.restorePageCache()) {
+      if (planOwnerSelf && this.selectedProjectId) {
+        this.$nextTick(() => {
+          this.loadProjectMetaMaps(this.selectedProjectId).finally(() => {
+            this.applyPlanOwnerSelfFromRoute()
+            this.fetchList()
+          })
+        })
+      }
+      return
+    }
+    this.loadProductOptions().then(() => {
+      if (this.selectedProjectId) {
+        return getProjectDetail(this.selectedProjectId).then(res => {
+          const data = res && res.data ? res.data : res || {}
+          const productId = data.productId || data.product_id || ''
+          if (productId) {
+            this.selectedProductId = productId
+            return this.loadProjectOptionsByProduct(productId)
+          }
+        }).catch(() => {})
+      }
+      return this.restoreSharedProductProjectCache()
+    }).finally(() => {
+      if (this.selectedProjectId) {
+        this.projectId = this.selectedProjectId
+        this.loadProjectMetaMaps(this.selectedProjectId).finally(() => {
+          this.applyPlanOwnerSelfFromRoute()
+          this.fetchList()
+        })
+      }
+    })
  }
 }
 </script>
@@ -103,4 +932,31 @@ export default {
 .page-wrap {
  padding: 20px;
 }
+
+.danger-text {
+  color: #f56c6c;
+}
+
+.danger-text:hover {
+  color: #f78989;
+}
+
+.hook-send-result {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #606266;
+}
+
+.hook-send-result-title {
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: #303133;
+}
+
+.hook-send-result-line {
+  line-height: 1.6;
+}
 </style>
--- a/src/components/TestPlatform/Plan/PlanProgress.vue
+++ b/src/components/TestPlatform/Plan/PlanProgress.vue
@@ -1,67 +1,300 @@
 <template>
  <div class="page-wrap">
    <page-section title="计划进度">
-      <el-form :inline="true" size="small">
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 120px;"></el-input>
+      <el-form :inline="true" size="small" @submit.native.prevent>
+        <el-form-item label="产品名称">
+          <el-input :value="productName" disabled style="width: 220px;"></el-input>
        </el-form-item>
-        <el-form-item label="计划ID">
-          <el-input v-model="planId" style="width: 120px;"></el-input>
+        <el-form-item label="项目名称">
+          <el-input :value="projectName" disabled style="width: 220px;"></el-input>
+        </el-form-item>
+        <el-form-item label="计划名称">
+          <el-input :value="planNameDisplay" disabled style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item>
-          <el-button type="primary" @click="fetchProgress">刷新</el-button>
+          <el-button type="primary" @click="fetchProgressBoard">刷新看板</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
-      <el-row :gutter="16">
-        <el-col :span="8">
-          <page-section title="轮次汇总">
-            <json-viewer :value="progress.round_summary || []"></json-viewer>
-          </page-section>
+
+      <el-row :gutter="16" class="metric-row">
+        <el-col :span="6">
+          <div class="metric-card">
+            <div class="metric-label">总用例数</div>
+            <div class="metric-value">{{ summary.total }}</div>
+          </div>
        </el-col>
-        <el-col :span="8">
-          <page-section title="人员负载">
-            <json-viewer :value="progress.assignee_load || []"></json-viewer>
-          </page-section>
+        <el-col :span="6">
+          <div class="metric-card">
+            <div class="metric-label">待执行</div>
+            <div class="metric-value warning">{{ summary.pending }}</div>
+          </div>
        </el-col>
-        <el-col :span="8">
-          <page-section title="每日趋势">
-            <json-viewer :value="progress.daily_trend || []"></json-viewer>
-          </page-section>
+        <el-col :span="6">
+          <div class="metric-card">
+            <div class="metric-label">已执行</div>
+            <div class="metric-value success">{{ summary.executed }}</div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div class="metric-card">
+            <div class="metric-label">完成率</div>
+            <div class="metric-value primary">{{ summary.progressPercent }}%</div>
+          </div>
        </el-col>
      </el-row>
+
+      <el-row :gutter="16">
+        <el-col :span="8">
+          <div class="board-card">
+            <div class="board-title">执行完成度</div>
+            <div class="dashboard-wrap">
+              <el-progress
+                type="dashboard"
+                :percentage="summary.progressPercent"
+                :color="progressColor">
+              </el-progress>
+              <div class="dashboard-desc">已执行 {{ summary.executed }} / {{ summary.total }}</div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="16">
+          <div class="board-card">
+            <div class="board-title">状态分布</div>
+            <div v-for="item in statusBarData" :key="item.key" class="status-bar-row">
+              <div class="status-label">
+                <el-tag size="mini" :type="item.tag">{{ item.label }}</el-tag>
+              </div>
+              <div class="status-bar-track">
+                <div class="status-bar-fill" :style="{ width: item.percent + '%', background: item.color }"></div>
+              </div>
+              <div class="status-value">{{ item.count }}（{{ item.percent }}%）</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <div class="board-card" style="margin-top: 16px;">
+        <div class="board-title">用例状态看板明细</div>
+        <el-table v-loading="loading" :data="displayRows" border style="margin-top: 10px;">
+          <el-table-column label="模块" min-width="160">
+            <template slot-scope="scope">{{ formatModuleName(scope.row) }}</template>
+          </el-table-column>
+          <el-table-column prop="caseKey" label="用例编号" min-width="120"></el-table-column>
+          <el-table-column prop="caseTitle" label="用例名称" min-width="220"></el-table-column>
+          <el-table-column label="自动化执行 Jenkins URL" min-width="180" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-link v-if="scope.row.jenkinsUrl" :href="scope.row.jenkinsUrl" target="_blank" type="primary">打开</el-link>
+              <span v-else>-</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="120">
+            <template slot-scope="scope">
+              <el-tag size="mini" :type="statusTagType(scope.row.statusCode)">{{ statusLabel(scope.row.statusCode) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="actualResult" label="执行结果" min-width="180"></el-table-column>
+        </el-table>
+        <el-pagination
+          style="margin-top: 12px; text-align: right;"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="pageNo"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          :total="caseListTotal"
+          @size-change="handleCaseListSizeChange"
+          @current-change="handleCaseListPageChange">
+        </el-pagination>
+      </div>
    </page-section>
  </div>
 </template>

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
-import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
-import { getPlanProgress } from '@/api/planApi'
+import { getPlanCaseList, getPlanProgress } from '@/api/planApi'

 export default {
  name: 'PlanProgress',
-  components: { PageSection, JsonViewer },
+  components: { PageSection },
  data() {
    return {
-      projectId: this.$route.query.projectId || 1,
+      loading: false,
+      projectId: this.$route.query.projectId || '',
      planId: this.$route.query.planId || '',
-      progress: {}
+      progress: {},
+      planCaseTableData: [],
+      caseListTotal: 0,
+      pageNo: 1,
+      pageSize: 10
+    }
+  },
+  computed: {
+    productName() {
+      return this.$route.query.productName || ''
+    },
+    projectName() {
+      return this.$route.query.projectName || ''
+    },
+    planNameDisplay() {
+      return this.$route.query.planName || ''
+    },
+    summary() {
+      const statusCount = this.statusCountMap
+      const progressTotal = this.toNumber(this.progress.total_cases || this.progress.total || 0)
+      const total = progressTotal || this.caseListTotal || 0
+      const pending = this.toNumber(statusCount[0])
+      const executed = Math.max(0, total - pending)
+      const progressPercent = total > 0 ? Math.round((executed / total) * 100) : 0
+      return { total, pending, executed, progressPercent }
+    },
+    /** 顶部看板统计以 getPlanProgress 为准，不能按当前页用例行数聚合 */
+    statusCountMap() {
+      const map = {}
+      const fromProgress = this.progress.status_count || this.progress.statusCount || {}
+      if (fromProgress && typeof fromProgress === 'object' && Object.keys(fromProgress).length > 0) {
+        Object.keys(fromProgress).forEach(key => {
+          map[this.toNumber(key)] = this.toNumber(fromProgress[key])
+        })
+        return map
+      }
+      this.planCaseTableData.forEach(item => {
+        const key = this.toNumber(item.statusCode)
+        map[key] = (map[key] || 0) + 1
+      })
+      return map
+    },
+    statusBarData() {
+      const total = this.summary.total || 1
+      const statuses = [
+        { key: 0, label: '待执行', tag: 'info', color: '#909399' },
+        { key: 1, label: '通过', tag: 'success', color: '#67c23a' },
+        { key: 2, label: '失败', tag: 'danger', color: '#f56c6c' },
+        { key: 3, label: '阻塞', tag: 'warning', color: '#e6a23c' }
+      ]
+      return statuses.map(item => {
+        const count = this.toNumber(this.statusCountMap[item.key] || 0)
+        const percent = Math.round((count / total) * 100)
+        return Object.assign({}, item, { count, percent })
+      })
+    },
+    progressColor() {
+      const value = this.summary.progressPercent
+      if (value >= 80) return '#67c23a'
+      if (value >= 50) return '#409eff'
+      if (value >= 30) return '#e6a23c'
+      return '#f56c6c'
+    },
+    displayRows() {
+      return this.planCaseTableData
    }
  },
  methods: {
-    fetchProgress() {
-      if (!this.planId) {
+    handleCaseListSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchProgressBoard()
+    },
+    handleCaseListPageChange(page) {
+      this.pageNo = page
+      this.fetchProgressBoard()
+    },
+    fetchProgressBoard() {
+      if (!this.planId || !this.projectId) {
+        this.progress = {}
+        this.planCaseTableData = []
+        this.caseListTotal = 0
        return
      }
-      getPlanProgress(this.projectId, this.planId).then(res => {
-        this.progress = (res && res.data) || res || {}
-      }).catch(() => {
-        this.progress = {}
+      this.loading = true
+      Promise.all([
+        getPlanProgress(this.projectId, this.planId),
+        getPlanCaseList(this.projectId, this.planId, { pageNo: this.pageNo, pageSize: this.pageSize })
+      ])
+        .then(([progressRes, listRes]) => {
+          this.progress = (progressRes && progressRes.data) || progressRes || {}
+          const listData = (listRes && listRes.data) || listRes || {}
+          const list = listData.list || listData.items || listData.data || []
+          this.caseListTotal = Number(
+            listData.total != null ? listData.total : Array.isArray(list) ? list.length : 0
+          )
+          this.planCaseTableData = (Array.isArray(list) ? list : []).map(item => ({
+            id: item.id,
+            caseId: item.case_id || item.caseId,
+            moduleName: item.module_name || item.moduleName || '',
+            moduleId: item.module_id || item.moduleId || '',
+            caseKey: item.case_key || item.caseKey || '',
+            caseTitle: item.case_title || item.caseTitle || item.title || '',
+            title: item.title || item.case_title || item.caseTitle || '',
+            statusCode: this.toNumber(item.status),
+            actualResult: item.actual_result || item.actualResult || '',
+            jenkinsUrl: item.jenkins_url || item.jenkinsUrl || ''
+          }))
+        })
+        .catch(() => {
+          this.progress = {}
+          this.planCaseTableData = []
+          this.caseListTotal = 0
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    toNumber(value) {
+      const num = Number(value)
+      return Number.isFinite(num) ? num : 0
+    },
+    statusLabel(status) {
+      const map = { 0: '待执行', 1: '通过', 2: '失败', 3: '阻塞' }
+      return map[this.toNumber(status)] || '未知'
+    },
+    statusTagType(status) {
+      const map = { 0: 'info', 1: 'success', 2: 'danger', 3: 'warning' }
+      return map[this.toNumber(status)] || 'info'
+    },
+    formatModuleName(row) {
+      if (!row) return '-'
+      if (row.moduleName) return row.moduleName
+      return '-'
+    },
+    goBack() {
+      this.$router.push({
+        path: '/test-platform/plan',
+        query: {
+          productId: this.$route.query.productId || undefined,
+          projectId: this.projectId || undefined
+        }
      })
+    },
+    normalizeRouteQuery() {
+      if (!this.projectId && this.$route.query.project_id) {
+        this.projectId = this.$route.query.project_id
+      }
+      if (!this.planId && this.$route.query.id) {
+        this.planId = this.$route.query.id
+      }
    }
  },
  created() {
-    this.fetchProgress()
+    this.normalizeRouteQuery()
+    this.fetchProgressBoard()
+  },
+  watch: {
+    '$route.query.planId'(val) {
+      if (val !== undefined) {
+        this.planId = val
+        this.fetchProgressBoard()
+      }
+    },
+    '$route.query.projectId'(val) {
+      if (val !== undefined) {
+        this.projectId = val
+        this.fetchProgressBoard()
+      }
+    }
  }
 }
 </script>
@@ -69,5 +302,99 @@ export default {
 <style scoped>
 .page-wrap {
  padding: 20px;
+  background: #f7f8fa;
+}
+
+.metric-row {
+  margin-bottom: 16px;
+}
+
+.metric-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  padding: 14px 16px;
+  min-height: 84px;
+  box-shadow: 0 4px 10px rgba(31, 45, 61, 0.06);
+}
+
+.metric-label {
+  color: #909399;
+  font-size: 13px;
+}
+
+.metric-value {
+  margin-top: 8px;
+  color: #303133;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.metric-value.success {
+  color: #67c23a;
+}
+
+.metric-value.warning {
+  color: #e6a23c;
+}
+
+.metric-value.primary {
+  color: #409eff;
+}
+
+.board-card {
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid #ebeef5;
+  padding: 16px;
+  box-shadow: 0 6px 14px rgba(31, 45, 61, 0.08);
+}
+
+.board-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.dashboard-wrap {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.dashboard-desc {
+  color: #606266;
+  margin-top: 8px;
+}
+
+.status-bar-row {
+  display: flex;
+  align-items: center;
+  margin-top: 14px;
+}
+
+.status-label {
+  width: 72px;
+}
+
+.status-bar-track {
+  flex: 1;
+  height: 10px;
+  border-radius: 10px;
+  background: #f1f2f4;
+  overflow: hidden;
+}
+
+.status-bar-fill {
+  height: 100%;
+  border-radius: 10px;
+  transition: width 0.3s ease;
+}
+
+.status-value {
+  width: 110px;
+  text-align: right;
+  color: #606266;
+  font-size: 12px;
 }
 </style>
--- a/src/components/TestPlatform/Project/ProjectList.vue
+++ b/src/components/TestPlatform/Project/ProjectList.vue
@@ -148,7 +148,7 @@ export default {
      this.fetchList()
    },
    goSettings(row) {
-      this.$router.push({ path: '/test-platform/projects/settings', query: { projectId: row.id } })
+      this.$router.push({ path: '/test-platform/project/setting', query: { projectId: row.id } })
    },
    fetchProductOptions() {
      return getProductList({
--- a/src/components/TestPlatform/Project/ProjectSettings.vue
+++ b/src/components/TestPlatform/Project/ProjectSettings.vue
@@ -1,15 +1,19 @@
 <template>
  <div class="page-wrap">
    <page-section title="项目设置">
-      <el-tabs value="members">
+      <template slot="extra">
+        <el-button size="small" @click="goBackToList">返回</el-button>
+      </template>
+      <el-tabs v-model="activeTab">
        <el-tab-pane label="项目成员" name="members">
          <div class="toolbar-wrap">
            <el-button type="primary" size="small" @click="openMemberDialog">新增成员</el-button>
          </div>
          <el-table :data="members" border>
-            <el-table-column prop="user_id" label="用户ID"></el-table-column>
-            <el-table-column prop="role" label="角色"></el-table-column>
-            <el-table-column prop="joined_at" label="加入时间"></el-table-column>
+            <el-table-column prop="project_name" label="项目名称"></el-table-column>
+            <el-table-column prop="username" label="用户名"></el-table-column>
+            <el-table-column prop="role_name" label="角色"></el-table-column>
+            <el-table-column prop="joined_time" label="加入时间"></el-table-column>
          </el-table>
          <div style="margin-top: 16px; text-align: right;">
            <el-pagination
@@ -47,16 +51,84 @@
            </el-pagination>
          </div>
        </el-tab-pane>
+        <el-tab-pane label="Hook 配置" name="hooks">
+          <div class="toolbar-wrap hook-toolbar">
+            <div class="hook-toolbar-left">
+              <el-select
+                v-model="hookTypeFilter"
+                clearable
+                placeholder="Hook 类型"
+                size="small"
+                style="width: 140px;"
+                @change="onHookTypeFilterChange">
+                <el-option label="飞书" :value="1" />
+                <el-option label="钉钉" :value="2" />
+                <el-option label="企微" :value="3" />
+              </el-select>
+            </div>
+            <el-button type="primary" size="small" @click="openHookDialog('create')">新增 Hook</el-button>
+          </div>
+          <el-table v-loading="hookLoading" :data="hooks" border>
+            <el-table-column prop="hook_type_name" label="类型" width="100">
+              <template slot-scope="scope">{{ scope.row.hook_type_name || hookTypeLabel(scope.row.hook_type) }}</template>
+            </el-table-column>
+            <el-table-column label="Webhook" min-width="220" show-overflow-tooltip>
+              <template slot-scope="scope">{{ scope.row.webhook_url || scope.row.webhookUrl || '-' }}</template>
+            </el-table-column>
+            <el-table-column label="启用" width="80">
+              <template slot-scope="scope">
+                <el-tag size="mini" :type="(scope.row.enabled === 1 || scope.row.enabled === true) ? 'success' : 'info'">
+                  {{ (scope.row.enabled === 1 || scope.row.enabled === true) ? '启用' : '禁用' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column prop="description" label="描述" min-width="140" show-overflow-tooltip />
+            <el-table-column label="创建时间" width="170">
+              <template slot-scope="scope">{{ scope.row.created_time || scope.row.createdTime || '-' }}</template>
+            </el-table-column>
+            <el-table-column label="操作" width="140" fixed="right">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="openHookDialog('edit', scope.row)">编辑</el-button>
+                <el-button type="text" size="small" style="color: #f56c6c;" @click="handleHookDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div style="margin-top: 16px; text-align: right;">
+            <el-pagination
+              :current-page="hookPageNo"
+              :page-size="hookPageSize"
+              :page-sizes="[10, 20, 50, 100]"
+              :total="hookTotal"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleHookSizeChange"
+              @current-change="handleHookCurrentChange">
+            </el-pagination>
+          </div>
+        </el-tab-pane>
      </el-tabs>
    </page-section>

    <el-dialog title="新增成员" :visible.sync="memberDialogVisible" width="520px" @close="resetMemberForm">
      <el-form ref="memberForm" :model="memberForm" :rules="memberRules" label-width="94px" size="small">
-        <el-form-item label="用户ID" prop="user_id">
-          <el-input v-model.trim="memberForm.user_id" maxlength="64" placeholder="请输入用户ID"></el-input>
-        </el-form-item>
-        <el-form-item label="角色" prop="role">
-          <el-input v-model.trim="memberForm.role" maxlength="64" placeholder="请输入角色"></el-input>
+        <el-form-item label="选择用户" prop="user_ids">
+          <el-select
+            v-model="memberForm.user_ids"
+            multiple
+            filterable
+            placeholder="请选择用户"
+            style="width: 100%;"
+            @focus="loadUserOptions">
+            <el-option
+              v-for="item in userOptions"
+              :key="item.id"
+              :label="item.username + (item.real_name ? ' (' + item.real_name + ')' : '')"
+              :value="item.id">
+            </el-option>
+            <el-option v-if="userHasMore" disabled style="text-align: center;">
+              <span v-if="userLoading">加载中...</span>
+              <span v-else @click.stop="loadMoreUsers">加载更多</span>
+            </el-option>
+          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
@@ -79,17 +151,62 @@
        <el-button type="primary" size="small" :loading="environmentSubmitting" @click="submitEnvironment">确定</el-button>
      </span>
    </el-dialog>
+
+    <el-dialog
+      :title="hookDialogMode === 'create' ? '新增 Hook' : '编辑 Hook'"
+      :visible.sync="hookDialogVisible"
+      width="560px"
+      @close="resetHookForm">
+      <el-form ref="hookFormRef" :model="hookForm" :rules="hookRules" label-width="100px" size="small">
+        <el-form-item label="Hook 类型" prop="hookType">
+          <el-select v-model="hookForm.hookType" placeholder="请选择" style="width: 100%;" :disabled="hookDialogMode === 'edit'">
+            <el-option label="飞书" :value="1" />
+            <el-option label="钉钉" :value="2" />
+            <el-option label="企微" :value="3" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Webhook" prop="webhookUrl">
+          <el-input v-model.trim="hookForm.webhookUrl" type="textarea" :rows="2" placeholder="Webhook 地址" />
+        </el-form-item>
+        <el-form-item label="签名密钥" prop="secret">
+          <el-input v-model.trim="hookForm.secret" show-password placeholder="可选，飞书/钉钉等签名校验用" />
+        </el-form-item>
+        <el-form-item label="启用" prop="enabled">
+          <el-switch v-model="hookForm.enabled" :active-value="1" :inactive-value="0" />
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model.trim="hookForm.description" maxlength="200" show-word-limit placeholder="说明用途" />
+        </el-form-item>
+        <el-form-item label="扩展配置" prop="configText">
+          <el-input v-model.trim="hookForm.configText" type="textarea" :rows="4" placeholder='JSON，默认 {}' />
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="hookDialogVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="hookSubmitting" @click="submitHook">确定</el-button>
+      </span>
+    </el-dialog>
  </div>
 </template>

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
 import JsonViewer from '@/components/TestPlatform/common/JsonViewer'
-import { createEnvironment, createProjectMember, getProjectEnvironments, getProjectMembers } from '@/api/projectApi'
+import {
+  createEnvironment,
+  createProjectMember,
+  createProjectHook,
+  deleteProjectHook,
+  getProjectEnvironments,
+  getProjectHookDetail,
+  getProjectHookList,
+  getProjectMembers,
+  updateProjectHook
+} from '@/api/projectApi'
+import { getUserList } from '@/api/rbacApi'

 const getDefaultMemberForm = () => ({
-  user_id: '',
-  role: ''
+  user_ids: []
 })

 const getDefaultEnvironmentForm = () => ({
@@ -97,11 +214,22 @@ const getDefaultEnvironmentForm = () => ({
  variablesText: '{}'
 })

+const getDefaultHookForm = () => ({
+  hookId: null,
+  hookType: 1,
+  webhookUrl: '',
+  secret: '',
+  enabled: 1,
+  description: '',
+  configText: '{}'
+})
+
 export default {
  name: 'ProjectSettings',
  components: { PageSection, JsonViewer },
  data() {
    return {
+      activeTab: 'members',
      memberPageNo: 1,
      memberPageSize: 10,
      memberTotal: 0,
@@ -117,19 +245,240 @@ export default {
      memberForm: getDefaultMemberForm(),
      environmentForm: getDefaultEnvironmentForm(),
      memberRules: {
-        user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
-        role: [{ required: true, message: '请输入角色', trigger: 'blur' }]
+        user_ids: [{ required: true, message: '请选择用户', trigger: 'change' }]
      },
      environmentRules: {
        name: [{ required: true, message: '请输入环境名称', trigger: 'blur' }],
        variablesText: [{ required: true, message: '请输入变量JSON', trigger: 'blur' }]
+      },
+      userOptions: [],
+      userLoading: false,
+      userPageNo: 1,
+      userPageSize: 10,
+      userTotal: 0,
+      userHasMore: false,
+      hooks: [],
+      hookPageNo: 1,
+      hookPageSize: 10,
+      hookTotal: 0,
+      hookLoading: false,
+      hookTypeFilter: '',
+      hookDialogVisible: false,
+      hookDialogMode: 'create',
+      hookSubmitting: false,
+      hookForm: getDefaultHookForm(),
+      hookRules: {
+        hookType: [{ required: true, message: '请选择类型', trigger: 'change' }],
+        webhookUrl: [{ required: true, message: '请输入 Webhook 地址', trigger: 'blur' }],
+        configText: [
+          {
+            validator: (rule, value, callback) => {
+              const s = (value || '').trim()
+              if (!s) {
+                callback()
+                return
+              }
+              try {
+                JSON.parse(s)
+                callback()
+              } catch (e) {
+                callback(new Error('扩展配置须为合法 JSON'))
+              }
+            },
+            trigger: 'blur'
+          }
+        ]
      }
    }
  },
  methods: {
+    goBackToList() {
+      this.$router.push({ path: '/test-platform/project' })
+    },
    getProjectId() {
      return this.$route.query.projectId || 1
    },
+    hookTypeLabel(type) {
+      const map = { 1: '飞书', 2: '钉钉', 3: '企微' }
+      return map[Number(type)] || type || '-'
+    },
+    onHookTypeFilterChange() {
+      this.hookPageNo = 1
+      this.fetchHooks()
+    },
+    fetchHooks() {
+      const projectId = this.getProjectId()
+      this.hookLoading = true
+      const params = {
+        projectId,
+        pageNo: this.hookPageNo,
+        pageSize: this.hookPageSize
+      }
+      if (this.hookTypeFilter !== '' && this.hookTypeFilter !== null && this.hookTypeFilter !== undefined) {
+        params.hookType = this.hookTypeFilter
+      }
+      getProjectHookList(params)
+        .then(res => {
+          const data = (res && res.data) || res || {}
+          const list = data.list || data.items || []
+          this.hooks = Array.isArray(list) ? list : []
+          this.hookTotal = Number(data.total != null ? data.total : this.hooks.length)
+        })
+        .catch(() => {
+          this.hooks = []
+          this.hookTotal = 0
+        })
+        .finally(() => {
+          this.hookLoading = false
+        })
+    },
+    openHookDialog(mode, row) {
+      this.hookDialogMode = mode
+      if (mode === 'create') {
+        this.hookForm = getDefaultHookForm()
+        this.hookDialogVisible = true
+        this.$nextTick(() => {
+          if (this.$refs.hookFormRef) this.$refs.hookFormRef.clearValidate()
+        })
+        return
+      }
+      const id = row && (row.id != null ? row.id : row.hookId)
+      if (id == null) {
+        this.$message.warning('缺少 Hook ID')
+        return
+      }
+      getProjectHookDetail(id)
+        .then(res => {
+          const d = (res && res.data) || res || {}
+          const cfg = d.config
+          let configText = '{}'
+          if (cfg != null && typeof cfg === 'object') {
+            try {
+              configText = JSON.stringify(cfg, null, 0)
+            } catch (e) {
+              configText = '{}'
+            }
+          } else if (typeof cfg === 'string' && cfg.trim()) {
+            configText = cfg.trim()
+          }
+          this.hookForm = {
+            hookId: d.id,
+            hookType: d.hook_type != null ? d.hook_type : d.hookType,
+            webhookUrl: d.webhook_url || d.webhookUrl || '',
+            secret: d.secret != null ? String(d.secret) : '',
+            enabled: d.enabled === 0 || d.enabled === false ? 0 : 1,
+            description: d.description || '',
+            configText
+          }
+          this.hookDialogVisible = true
+          this.$nextTick(() => {
+            if (this.$refs.hookFormRef) this.$refs.hookFormRef.clearValidate()
+          })
+        })
+        .catch(() => {})
+    },
+    resetHookForm() {
+      this.hookForm = getDefaultHookForm()
+      this.hookSubmitting = false
+      this.$nextTick(() => {
+        if (this.$refs.hookFormRef) this.$refs.hookFormRef.resetFields()
+      })
+    },
+    submitHook() {
+      this.$refs.hookFormRef.validate(valid => {
+        if (!valid) return
+        let config = {}
+        const ct = (this.hookForm.configText || '').trim()
+        if (ct) {
+          try {
+            config = JSON.parse(ct)
+          } catch (e) {
+            this.$message.error('扩展配置 JSON 无效')
+            return
+          }
+        }
+        this.hookSubmitting = true
+        const done = () => {
+          this.hookDialogVisible = false
+          this.hookPageNo = 1
+          this.fetchHooks()
+        }
+        if (this.hookDialogMode === 'create') {
+          createProjectHook({
+            projectId: Number(this.getProjectId()),
+            hookType: this.hookForm.hookType,
+            webhookUrl: this.hookForm.webhookUrl,
+            secret: this.hookForm.secret || undefined,
+            enabled: this.hookForm.enabled,
+            description: this.hookForm.description || undefined,
+            config
+          })
+            .then(res => {
+              if (res && res.code === 20000) {
+                this.$message.success((res && res.message) || '创建成功')
+                done()
+              } else {
+                this.$message.error((res && res.message) || '创建失败')
+              }
+            })
+            .finally(() => {
+              this.hookSubmitting = false
+            })
+          return
+        }
+        const payload = {
+          hookId: this.hookForm.hookId,
+          hookType: this.hookForm.hookType,
+          webhookUrl: this.hookForm.webhookUrl,
+          enabled: this.hookForm.enabled,
+          description: this.hookForm.description || undefined,
+          config
+        }
+        if (String(this.hookForm.secret || '').trim() !== '') {
+          payload.secret = this.hookForm.secret
+        }
+        updateProjectHook(payload)
+          .then(res => {
+            if (res && res.code === 20000) {
+              this.$message.success((res && res.message) || '更新成功')
+              done()
+            } else {
+              this.$message.error((res && res.message) || '更新失败')
+            }
+          })
+          .finally(() => {
+            this.hookSubmitting = false
+          })
+      })
+    },
+    handleHookDelete(row) {
+      const id = row && (row.id != null ? row.id : row.hookId)
+      if (id == null) {
+        this.$message.warning('缺少 Hook ID')
+        return
+      }
+      this.$confirm('确认删除该 Hook 配置？', '提示', { type: 'warning' })
+        .then(() => deleteProjectHook({ hookId: id }))
+        .then(res => {
+          if (res && res.code === 20000) {
+            this.$message.success((res && res.message) || '已删除')
+            this.hookPageNo = 1
+            this.fetchHooks()
+          } else {
+            this.$message.error((res && res.message) || '删除失败')
+          }
+        })
+        .catch(() => {})
+    },
+    handleHookSizeChange(val) {
+      this.hookPageSize = val
+      this.hookPageNo = 1
+      this.fetchHooks()
+    },
+    handleHookCurrentChange(val) {
+      this.hookPageNo = val
+      this.fetchHooks()
+    },
    fetchData() {
      const projectId = this.getProjectId()
      getProjectMembers(projectId, {
@@ -157,6 +506,9 @@ export default {
    },
    openMemberDialog() {
      this.memberDialogVisible = true
+      this.userOptions = []
+      this.userPageNo = 1
+      this.userHasMore = false
      this.$nextTick(() => {
        this.memberForm = getDefaultMemberForm()
        if (this.$refs.memberForm) {
@@ -167,19 +519,59 @@ export default {
    resetMemberForm() {
      this.memberForm = getDefaultMemberForm()
      this.memberSubmitting = false
+      this.userOptions = []
+      this.userPageNo = 1
+      this.userHasMore = false
      this.$nextTick(() => {
        if (this.$refs.memberForm) {
          this.$refs.memberForm.resetFields()
        }
      })
    },
+    loadMoreUsers() {
+      if (this.userHasMore && !this.userLoading) {
+        this.userPageNo++
+        this.loadUserOptions()
+      }
+    },
+    loadUserOptions() {
+      this.userLoading = true
+      getUserList({
+        pageNo: this.userPageNo,
+        pageSize: this.userPageSize,
+        keyword: '',
+        status: 1
+      }).then(res => {
+        const data = res && res.data ? res.data : res || {}
+        const list = data.list || data.items || data.data || []
+        this.userTotal = data.total || data.totalCount || 0
+        if (this.userPageNo === 1) {
+          this.userOptions = list
+        } else {
+          this.userOptions = [...this.userOptions, ...list]
+        }
+        this.userHasMore = this.userOptions.length < this.userTotal
+      }).catch(() => {
+        this.userOptions = []
+        this.userHasMore = false
+      }).finally(() => {
+        this.userLoading = false
+      })
+    },
    submitMember() {
      this.$refs.memberForm.validate(valid => {
        if (!valid) {
          return
        }
+        if (!this.memberForm.user_ids || this.memberForm.user_ids.length === 0) {
+          this.$message.error('请选择用户')
+          return
+        }
        this.memberSubmitting = true
-        createProjectMember(Object.assign({ project_id: this.getProjectId() }, this.memberForm)).then(res => {
+        createProjectMember({
+          project_id: this.getProjectId(),
+          user_ids: this.memberForm.user_ids
+        }).then(res => {
          const message = (res && res.message) || ''
          if (res && res.code === 20000) {
            this.$message.success(message || '成员新增成功')
@@ -265,6 +657,7 @@ export default {
  },
  created() {
    this.fetchData()
+    this.fetchHooks()
  }
 }
 </script>
@@ -278,4 +671,16 @@ export default {
  margin-bottom: 16px;
  text-align: right;
 }
+
+.hook-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.hook-toolbar-left {
+  text-align: left;
+}
 </style>
--- a/src/components/TestPlatform/Report/ReportList.vue
+++ b/src/components/TestPlatform/Report/ReportList.vue
@@ -4,24 +4,76 @@
      <template slot="extra">
        <el-button type="primary" size="small" :loading="generating" @click="handleGenerate">生成报告</el-button>
      </template>
-      <el-form :inline="true" :model="queryForm" size="small">
-        <el-form-item label="项目ID">
-          <el-input v-model="projectId" style="width: 120px;"></el-input>
+      <el-form :inline="true" :model="queryForm" size="small" @submit.native.prevent>
+        <el-form-item label="产品名称">
+          <el-select
+            v-model="selectedProductId"
+            filterable
+            clearable
+            placeholder="请选择产品"
+            style="width: 220px;"
+            @change="handleProductChange"
+            @focus="loadProductOptions">
+            <el-option
+              v-for="item in productOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
        </el-form-item>
-        <el-form-item label="计划ID">
-          <el-input v-model="queryForm.plan_id" style="width: 120px;"></el-input>
+        <el-form-item label="项目名称">
+          <el-select
+            v-model="selectedProjectId"
+            filterable
+            clearable
+            placeholder="请选择项目"
+            style="width: 240px;"
+            :disabled="!selectedProductId"
+            @change="handleProjectChange">
+            <el-option
+              v-for="item in projectOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="计划名称">
+          <el-select
+            v-model="queryForm.plan_id"
+            filterable
+            clearable
+            placeholder="请选择计划"
+            style="width: 260px;"
+            :disabled="!selectedProjectId"
+            @focus="loadPlanOptions">
+            <el-option
+              v-for="item in planOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id" />
+          </el-select>
        </el-form-item>
        <el-form-item>
-          <el-button type="primary" @click="fetchList">查询</el-button>
+          <el-button type="primary" :disabled="!selectedProjectId" @click="fetchList">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="tableData" border style="margin-top: 16px;">
        <el-table-column prop="name" label="报告名称" min-width="180"></el-table-column>
-        <el-table-column prop="report_type" label="类型" width="120"></el-table-column>
-        <el-table-column prop="generated_at" label="生成时间" min-width="160"></el-table-column>
+        <el-table-column label="计划名称" min-width="180">
+          <template slot-scope="scope">{{ formatPlanName(scope.row) }}</template>
+        </el-table-column>
+        <el-table-column label="类型" width="120">
+          <template slot-scope="scope">{{ formatReportType(scope.row.report_type || scope.row.type) }}</template>
+        </el-table-column>
+        <el-table-column label="生成时间" min-width="180">
+          <template slot-scope="scope">{{ formatDateTime(scope.row.generated_time || scope.row.generated_at || scope.row.created_at || scope.row.create_time) }}</template>
+        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
-            <el-button type="text" @click="goViewer(scope.row)">查看</el-button>
+            <el-button type="text" @click="goViewer(scope.row)">查看链接</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -42,7 +94,15 @@

 <script>
 import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getPlanList } from '@/api/planApi'
+import { getProductList } from '@/api/productApi'
+import { getProjectDetail, getProjectList } from '@/api/projectApi'
 import { generateReport, getReportList } from '@/api/reportApi'
+import {
+  readLastProductProjectCache,
+  saveLastProductProjectCache,
+  pickIdFromOptions
+} from '@/utils/lastProductProjectCache'

 export default {
  name: 'ReportList',
@@ -51,48 +111,276 @@ export default {
    return {
      loading: false,
      generating: false,
-      projectId: this.$route.query.projectId || 1,
+      projectId: this.$route.query.projectId || '',
+      selectedProductId: '',
+      selectedProjectId: this.$route.query.projectId ? Number(this.$route.query.projectId) : '',
+      productOptions: [],
+      projectOptions: [],
+      planOptions: [],
      queryForm: {
        plan_id: this.$route.query.planId || ''
      },
-      tableData: []
+      tableData: [],
+      pageNo: 1,
+      pageSize: 10,
+      total: 0
    }
  },
+  beforeRouteLeave(to, from, next) {
+    this.savePageCache()
+    next()
+  },
  methods: {
+    getCacheKey() {
+      return 'test-platform-report-list-cache'
+    },
+    savePageCache() {
+      const cache = {
+        projectId: this.projectId,
+        selectedProductId: this.selectedProductId,
+        selectedProjectId: this.selectedProjectId,
+        productOptions: this.productOptions,
+        projectOptions: this.projectOptions,
+        planOptions: this.planOptions,
+        queryForm: this.queryForm,
+        tableData: this.tableData,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        total: this.total
+      }
+      window.sessionStorage.setItem(this.getCacheKey(), JSON.stringify(cache))
+    },
+    restorePageCache() {
+      const raw = window.sessionStorage.getItem(this.getCacheKey())
+      if (!raw) return false
+      try {
+        const cache = JSON.parse(raw)
+        this.projectId = cache.projectId || ''
+        this.selectedProductId = cache.selectedProductId || ''
+        this.selectedProjectId = cache.selectedProjectId || ''
+        this.productOptions = cache.productOptions || []
+        this.projectOptions = cache.projectOptions || []
+        this.planOptions = cache.planOptions || []
+        this.queryForm = cache.queryForm || { plan_id: '' }
+        this.tableData = cache.tableData || []
+        this.pageNo = Number(cache.pageNo || 1)
+        this.pageSize = Number(cache.pageSize || 10)
+        this.total = Number(cache.total || 0)
+        return true
+      } catch (e) {
+        return false
+      }
+    },
+    loadProductOptions() {
+      if (this.productOptions && this.productOptions.length > 0) {
+        return Promise.resolve()
+      }
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.productOptions = []
+      })
+    },
+    loadProjectOptionsByProduct(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.projectOptions = []
+      })
+    },
+    loadPlanOptions() {
+      if (!this.selectedProjectId) {
+        this.planOptions = []
+        return Promise.resolve()
+      }
+      return getPlanList(this.selectedProjectId, { pageNo: 1, pageSize: 1000 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.planOptions = data.items || data.list || data.data || []
+      }).catch(() => {
+        this.planOptions = []
+      })
+    },
+    handleProductChange(val) {
+      this.selectedProjectId = ''
+      this.projectId = ''
+      this.queryForm.plan_id = ''
+      this.projectOptions = []
+      this.planOptions = []
+      this.tableData = []
+      this.total = 0
+      this.loadProjectOptionsByProduct(val)
+    },
+    handleProjectChange(val) {
+      this.selectedProjectId = val || ''
+      this.projectId = val || ''
+      this.queryForm.plan_id = ''
+      this.planOptions = []
+      this.pageNo = 1
+      if (!val) {
+        this.tableData = []
+        this.total = 0
+        return
+      }
+      saveLastProductProjectCache(this.selectedProductId, val)
+      this.loadPlanOptions().finally(() => {
+        this.fetchList()
+      })
+    },
+    restoreSharedProductProjectCache() {
+      const cached = readLastProductProjectCache()
+      if (!cached) return Promise.resolve()
+      const { productId: pid, projectId: projId } = cached
+      if (pid === '' || pid === undefined || pid === null || projId === '' || projId === undefined || projId === null) {
+        return Promise.resolve()
+      }
+      const hasProduct = (this.productOptions || []).some(p => String(p.id) === String(pid))
+      if (!hasProduct) return Promise.resolve()
+      this.selectedProductId = pickIdFromOptions(this.productOptions, pid)
+      return this.loadProjectOptionsByProduct(this.selectedProductId).then(() => {
+        const hasProject = (this.projectOptions || []).some(p => String(p.id) === String(projId))
+        if (!hasProject) return
+        const picked = pickIdFromOptions(this.projectOptions, projId)
+        this.selectedProjectId = picked
+        this.projectId = picked
+      })
+    },
    fetchList() {
+      if (!this.projectId) {
+        this.tableData = []
+        this.total = 0
+        return
+      }
      this.loading = true
-      getReportList(this.projectId, Object.assign({}, this.queryForm, {
+      getReportList(Object.assign({}, this.queryForm, {
+        product_id: this.selectedProductId || undefined,
+        project_id: this.projectId || undefined,
+        plan_id: this.queryForm.plan_id || undefined,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })).then(res => {
        const data = (res && res.data) || res || {}
        this.tableData = data.items || data.list || data.data || []
        this.total = data.total || data.totalCount || this.tableData.length
+        this.savePageCache()
      }).catch(() => {
        this.tableData = []
        this.total = 0
+        this.savePageCache()
      }).finally(() => {
        this.loading = false
      })
    },
    handleGenerate() {
      if (!this.queryForm.plan_id) {
-        this.$message({ type: 'warning', message: '请先输入计划ID' })
+        this.$message({ type: 'warning', message: '请先选择计划名称' })
+        return
+      }
+      if (!this.projectId) {
+        this.$message({ type: 'warning', message: '请先选择项目名称' })
        return
      }
      this.generating = true
-      generateReport(this.projectId, { plan_id: this.queryForm.plan_id }).then(() => {
+      generateReport({
+        planId: this.queryForm.plan_id,
+        plan_id: this.queryForm.plan_id
+      }).then(() => {
        this.$message({ type: 'success', message: '报告生成任务已提交' })
+        this.fetchList()
      }).finally(() => {
        this.generating = false
      })
    },
    goViewer(row) {
-      this.$router.push({ path: '/test-platform/reports/viewer', query: { projectId: this.projectId, reportId: row.id } })
+      const type = String(row.report_type || row.type || '').toLowerCase()
+      const isAuto = type.indexOf('auto') > -1 || type.indexOf('automation') > -1 || type.indexOf('自动') > -1 || Number(row.report_type || row.type) === 2
+      if (isAuto) {
+        const externalUrl = row.external_url || row.externalUrl || row.report_url || row.reportUrl || 'https://example.com/automation-report'
+        window.open(externalUrl, '_blank')
+        this.$message.info('自动化报告外部链接暂未实现，先跳转占位链接')
+        return
+      }
+      this.$router.push({
+        path: '/test-platform/report/viewer',
+        query: {
+          projectId: this.projectId,
+          reportId: row.id
+        }
+      })
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNo = 1
+      this.fetchList()
+    },
+    handleCurrentChange(page) {
+      this.pageNo = page
+      this.fetchList()
+    },
+    resetQuery() {
+      this.queryForm.plan_id = ''
+      this.pageNo = 1
+      this.fetchList()
+    },
+    formatDateTime(value) {
+      if (!value) return '-'
+      return String(value).replace('T', ' ').slice(0, 19)
+    },
+    formatPlanName(row) {
+      if (!row) return '-'
+      const directName = row.plan_name || row.planName || row.name || ''
+      if (directName) return directName
+      const planId = row.plan_id || row.planId
+      if (!planId) return '-'
+      const matched = (this.planOptions || []).find(item => String(item.id) === String(planId))
+      return (matched && matched.name) || String(planId)
+    },
+    formatReportType(value) {
+      const map = {
+        manual: '手工',
+        auto: '自动化',
+        automation: '自动化',
+        1: '手工',
+        2: '自动化'
+      }
+      return map[value] || value || '-'
+    },
+    initByRouteProject() {
+      if (!this.selectedProjectId) return Promise.resolve()
+      return getProjectDetail(this.selectedProjectId).then(res => {
+        const data = (res && res.data) || res || {}
+        const productId = data.productId || data.product_id || ''
+        if (productId) {
+          this.selectedProductId = productId
+          return this.loadProjectOptionsByProduct(productId)
+        }
+      }).catch(() => {})
    }
  },
  created() {
-    this.fetchList()
+    if (this.restorePageCache()) {
+      return
+    }
+    this.loadProductOptions()
+      .then(() => {
+        if (this.selectedProjectId) {
+          return this.initByRouteProject()
+        }
+        return this.restoreSharedProductProjectCache()
+      })
+      .finally(() => {
+        if (this.selectedProjectId) {
+          this.projectId = this.selectedProjectId
+          this.loadPlanOptions().finally(() => {
+            this.fetchList()
+          })
+        }
+      })
  }
 }
 </script>
--- a/src/components/TestPlatform/Report/ReportViewer.vue
+++ b/src/components/TestPlatform/Report/ReportViewer.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="page-wrap">
    <page-section title="报告查看">
+      <div style="margin-bottom: 12px;">
+        <el-button size="small" @click="goBack">返回</el-button>
+      </div>
      <el-alert
        v-if="!report.content"
        title="当前无可展示内容，待后端返回 report.content HTML"
@@ -35,11 +38,19 @@ export default {
      if (!this.reportId) {
        return
      }
-      getReportDetail(this.projectId, this.reportId).then(res => {
+      getReportDetail(this.reportId, this.projectId).then(res => {
        this.report = (res && res.data) || res || {}
      }).catch(() => {
        this.report = {}
      })
+    },
+    goBack() {
+      this.$router.push({
+        path: '/test-platform/report',
+        query: {
+          projectId: this.projectId || undefined
+        }
+      })
    }
  },
  created() {
--- a/src/components/TestPlatform/SkillRule/BusinessSkillRuleConfig.vue
+++ b/src/components/TestPlatform/SkillRule/BusinessSkillRuleConfig.vue
@@ -0,0 +1,820 @@
+<template>
+  <div class="page-wrap">
+    <page-section title="业务技能配置">
+      <el-form :inline="true" size="small" class="filter-bar" @submit.native.prevent>
+        <el-form-item label="产品">
+          <el-select
+            v-model="selectedProductId"
+            filterable
+            clearable
+            placeholder="请选择产品"
+            style="width: 200px;"
+            @change="handleProductChange"
+            @focus="loadProductOptions">
+            <el-option v-for="p in productOptions" :key="p.id" :label="p.name" :value="p.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目">
+          <el-select
+            v-model="selectedProjectId"
+            filterable
+            clearable
+            placeholder="请选择项目"
+            style="width: 220px;"
+            :disabled="!selectedProductId"
+            @change="handleProjectChange">
+            <el-option v-for="p in projectOptions" :key="p.id" :label="p.name" :value="p.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <el-tabs v-model="configActiveTab" class="skill-rule-tabs" style="margin-top: 8px;" @tab-click="onConfigTabClick">
+        <el-tab-pane label="Skills 配置" name="skills">
+          <el-form :inline="true" size="small" class="toolbar-form" @submit.native.prevent>
+            <el-form-item label="模块">
+              <el-select v-model="skillQuery.moduleId" clearable filterable placeholder="全部" style="width: 180px;" :disabled="!projectId">
+                <el-option v-for="m in flatModuleOptions" :key="m.id" :label="m.name" :value="m.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="关键字">
+              <el-input v-model="skillQuery.keyword" clearable style="width: 160px;" @keyup.enter.native="fetchSkillList" />
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="skillQuery.status" clearable placeholder="全部" style="width: 100px;">
+                <el-option v-for="o in statusOptions" :key="'s-' + o.value" :label="o.label" :value="o.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="类型">
+              <el-select v-model="skillQuery.skillType" clearable placeholder="全部" style="width: 130px;">
+                <el-option v-for="o in skillTypeOptions" :key="'t-' + o.value" :label="o.label" :value="o.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="风险">
+              <el-select v-model="skillQuery.riskLevel" clearable placeholder="全部" style="width: 100px;">
+                <el-option v-for="o in riskLevelOptions" :key="'r-' + o.value" :label="o.label" :value="o.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" :disabled="!projectId" @click="skillPageNo = 1; fetchSkillList()">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="small" @click="resetSkillQuery">重置</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="small" plain :disabled="!projectId" @click="openSkillCreate">新建 Skill</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table v-loading="skillLoading" :data="skillList" border size="small" style="margin-top: 8px;">
+            <el-table-column prop="id" label="ID" width="72" />
+            <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="code" label="编码" min-width="120" show-overflow-tooltip />
+            <el-table-column label="类型" width="100">
+              <template slot-scope="scope">{{ formatSkillType(scope.row.skill_type) }}</template>
+            </el-table-column>
+            <el-table-column label="风险" width="88">
+              <template slot-scope="scope">{{ formatRiskLevel(scope.row.risk_level) }}</template>
+            </el-table-column>
+            <el-table-column label="状态" width="88">
+              <template slot-scope="scope">{{ formatConfigStatus(scope.row.status) }}</template>
+            </el-table-column>
+            <el-table-column label="标签" min-width="120" show-overflow-tooltip>
+              <template slot-scope="scope">{{ formatTagsCol(scope.row.tags) }}</template>
+            </el-table-column>
+            <el-table-column prop="updated_time" label="更新时间" min-width="150" show-overflow-tooltip />
+            <el-table-column label="操作" width="140" fixed="right">
+              <template slot-scope="scope">
+                <el-button type="text" @click="openSkillEdit(scope.row)">编辑</el-button>
+                <el-button type="text" style="color: #F56C6C;" @click="removeSkill(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pager-wrap">
+            <el-pagination
+              :current-page="skillPageNo"
+              :page-size="skillPageSize"
+              :page-sizes="[10, 20, 50]"
+              :total="skillTotal"
+              layout="total, sizes, prev, pager, next"
+              @size-change="onSkillSize"
+              @current-change="onSkillPage" />
+          </div>
+        </el-tab-pane>
+
+        <el-tab-pane label="业务规则配置" name="rules">
+          <el-form :inline="true" size="small" class="toolbar-form" @submit.native.prevent>
+            <el-form-item label="模块">
+              <el-select v-model="ruleQuery.moduleId" clearable filterable placeholder="全部" style="width: 180px;" :disabled="!projectId">
+                <el-option v-for="m in flatModuleOptions" :key="'r-' + m.id" :label="m.name" :value="m.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="关键字">
+              <el-input v-model="ruleQuery.keyword" clearable style="width: 160px;" @keyup.enter.native="fetchRuleList" />
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="ruleQuery.status" clearable placeholder="全部" style="width: 100px;">
+                <el-option v-for="o in statusOptions" :key="'rs-' + o.value" :label="o.label" :value="o.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="优先级">
+              <el-select v-model="ruleQuery.priority" clearable placeholder="全部" style="width: 100px;">
+                <el-option v-for="o in priorityOptions" :key="'p-' + o.value" :label="o.label" :value="o.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" :disabled="!projectId" @click="rulePageNo = 1; fetchRuleList()">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="small" @click="resetRuleQuery">重置</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="small" plain :disabled="!projectId" @click="openRuleCreate">新建规则</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table v-loading="ruleLoading" :data="ruleList" border size="small" style="margin-top: 8px;">
+            <el-table-column prop="id" label="ID" width="72" />
+            <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
+            <el-table-column prop="rule_code" label="规则编码" min-width="120" show-overflow-tooltip />
+            <el-table-column label="优先级" width="100">
+              <template slot-scope="scope">{{ formatPriority(scope.row.priority) }}</template>
+            </el-table-column>
+            <el-table-column label="状态" width="88">
+              <template slot-scope="scope">{{ formatConfigStatus(scope.row.status) }}</template>
+            </el-table-column>
+            <el-table-column label="标签" min-width="120" show-overflow-tooltip>
+              <template slot-scope="scope">{{ formatTagsCol(scope.row.tags) }}</template>
+            </el-table-column>
+            <el-table-column prop="updated_time" label="更新时间" min-width="150" show-overflow-tooltip />
+            <el-table-column label="操作" width="140" fixed="right">
+              <template slot-scope="scope">
+                <el-button type="text" @click="openRuleEdit(scope.row)">编辑</el-button>
+                <el-button type="text" style="color: #F56C6C;" @click="removeRule(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pager-wrap">
+            <el-pagination
+              :current-page="rulePageNo"
+              :page-size="rulePageSize"
+              :page-sizes="[10, 20, 50]"
+              :total="ruleTotal"
+              layout="total, sizes, prev, pager, next"
+              @size-change="onRuleSize"
+              @current-change="onRulePage" />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </page-section>
+
+    <el-dialog :title="skillDialogMode === 'create' ? '新建 Skill' : '编辑 Skill'" :visible.sync="skillDialogVisible" width="720px" @close="resetSkillForm">
+      <el-form ref="skillFormRef" :model="skillForm" :rules="skillFormActiveRules" label-width="120px" size="small">
+        <el-form-item label="模块" prop="moduleId">
+          <el-select v-model="skillForm.moduleId" clearable filterable placeholder="可选" style="width: 100%;" :disabled="!projectId">
+            <el-option v-for="m in flatModuleOptions" :key="'sf-' + m.id" :label="m.name" :value="m.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="skillForm.name" />
+        </el-form-item>
+        <template v-if="skillDialogMode === 'edit'">
+          <el-form-item label="编码">
+            <el-input v-model="skillForm.code" disabled placeholder="创建后不可修改" />
+          </el-form-item>
+          <el-form-item label="触发条件" prop="triggerCondition">
+            <el-input v-model="skillForm.triggerCondition" type="textarea" :rows="2" />
+          </el-form-item>
+          <el-form-item label="推理路径">
+            <el-input v-model="skillForm.reasoningPath" type="textarea" :rows="2" />
+          </el-form-item>
+          <el-form-item label="输出规范">
+            <el-input v-model="skillForm.outputSpec" type="textarea" :rows="2" />
+          </el-form-item>
+        </template>
+        <el-form-item label="描述">
+          <el-input v-model="skillForm.description" type="textarea" :rows="2" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select v-model="skillForm.skillType" style="width: 100%;">
+            <el-option v-for="o in skillTypeOptions" :key="'sfo-' + o.value" :label="o.label" :value="o.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="风险等级">
+          <el-select v-model="skillForm.riskLevel" style="width: 100%;">
+            <el-option v-for="o in riskLevelOptions" :key="'sfr-' + o.value" :label="o.label" :value="o.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="skillForm.status" style="width: 100%;">
+            <el-option v-for="o in statusOptions" :key="'sfs-' + o.value" :label="o.label" :value="o.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-select v-model="skillForm.tags" multiple filterable allow-create default-first-option placeholder="输入后回车可新增" style="width: 100%;" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="skillDialogVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="skillSubmitting" @click="submitSkill">保存</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog :title="ruleDialogMode === 'create' ? '新建业务规则' : '编辑业务规则'" :visible.sync="ruleDialogVisible" width="720px" @close="resetRuleForm">
+      <el-form ref="ruleFormRef" :model="ruleForm" :rules="ruleRules" label-width="120px" size="small">
+        <el-form-item label="模块" prop="moduleId">
+          <el-select v-model="ruleForm.moduleId" clearable filterable placeholder="可选" style="width: 100%;" :disabled="!projectId">
+            <el-option v-for="m in flatModuleOptions" :key="'rf-' + m.id" :label="m.name" :value="m.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="ruleForm.name" />
+        </el-form-item>
+        <el-form-item v-if="ruleDialogMode === 'edit'" label="规则编码">
+          <el-input v-model="ruleForm.ruleCode" disabled placeholder="由系统分配" />
+        </el-form-item>
+        <el-form-item label="规则内容" prop="ruleContent">
+          <el-input v-model="ruleForm.ruleContent" type="textarea" :rows="3" />
+        </el-form-item>
+        <el-form-item label="适用场景">
+          <el-input v-model="ruleForm.applicableScene" type="textarea" :rows="2" />
+        </el-form-item>
+        <el-form-item label="示例">
+          <el-input v-model="ruleForm.example" type="textarea" :rows="2" />
+        </el-form-item>
+        <el-form-item label="优先级">
+          <el-select v-model="ruleForm.priority" style="width: 100%;">
+            <el-option v-for="o in priorityOptions" :key="'rfo-' + o.value" :label="o.label" :value="o.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="ruleForm.status" style="width: 100%;">
+            <el-option v-for="o in statusOptions" :key="'rfs-' + o.value" :label="o.label" :value="o.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-select v-model="ruleForm.tags" multiple filterable allow-create default-first-option placeholder="输入后回车可新增" style="width: 100%;" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button size="small" @click="ruleDialogVisible = false">取消</el-button>
+        <el-button type="primary" size="small" :loading="ruleSubmitting" @click="submitRule">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import PageSection from '@/components/TestPlatform/common/PageSection'
+import { getModuleTree } from '@/api/caseApi'
+import {
+  createSkill,
+  createBusinessRule,
+  deleteSkill,
+  deleteBusinessRule,
+  getSkillDetail,
+  getSkillList,
+  getBusinessRuleDetail,
+  getBusinessRuleList,
+  updateSkill,
+  updateBusinessRule
+} from '@/api/skillRuleApi'
+import { getProductList } from '@/api/productApi'
+import { getProjectList } from '@/api/projectApi'
+import {
+  readLastProductProjectCache,
+  saveLastProductProjectCache,
+  pickIdFromOptions
+} from '@/utils/lastProductProjectCache'
+
+export default {
+  name: 'BusinessSkillRuleConfig',
+  components: { PageSection },
+  data() {
+    const routeTab = this.$route.query && this.$route.query.tab
+    const initialTab =
+      routeTab === 'rules' || routeTab === 'business-rules' ? 'rules' : 'skills'
+    return {
+      configActiveTab: initialTab,
+      selectedProductId: '',
+      selectedProjectId: '',
+      productOptions: [],
+      projectOptions: [],
+      moduleTree: [],
+      skillQuery: { moduleId: '', keyword: '', status: '', skillType: '', riskLevel: '' },
+      skillPageNo: 1,
+      skillPageSize: 20,
+      skillList: [],
+      skillTotal: 0,
+      skillLoading: false,
+      skillDialogVisible: false,
+      skillDialogMode: 'create',
+      skillSubmitting: false,
+      skillForm: {},
+      ruleQuery: { moduleId: '', keyword: '', status: '', priority: '' },
+      rulePageNo: 1,
+      rulePageSize: 20,
+      ruleList: [],
+      ruleTotal: 0,
+      ruleLoading: false,
+      ruleDialogVisible: false,
+      ruleDialogMode: 'create',
+      ruleSubmitting: false,
+      ruleForm: {},
+      ruleRules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        ruleContent: [{ required: true, message: '请输入规则内容', trigger: 'blur' }]
+      },
+      statusOptions: [
+        { value: 1, label: '启用' },
+        { value: 2, label: '停用' },
+        { value: 3, label: '草稿' }
+      ],
+      skillTypeOptions: [
+        { value: 1, label: '通用测试策略' },
+        { value: 2, label: '历史缺陷模式' },
+        { value: 3, label: '边界场景' },
+        { value: 4, label: '接口测试' },
+        { value: 5, label: 'UI 测试' },
+        { value: 6, label: '性能测试' },
+        { value: 7, label: '安全测试' },
+        { value: 8, label: '数据一致性' },
+        { value: 9, label: '并发/幂等' },
+        { value: 99, label: '其他' }
+      ],
+      riskLevelOptions: [
+        { value: 0, label: '高风险' },
+        { value: 1, label: '中高风险' },
+        { value: 2, label: '中风险' },
+        { value: 3, label: '低风险' }
+      ],
+      priorityOptions: [
+        { value: 0, label: '高优先级' },
+        { value: 1, label: '中高优先级' },
+        { value: 2, label: '中优先级' },
+        { value: 3, label: '低优先级' }
+      ]
+    }
+  },
+  computed: {
+    projectId() {
+      return this.selectedProjectId || ''
+    },
+    flatModuleOptions() {
+      const out = []
+      const walk = (list, prefix) => {
+        ;(list || []).forEach(item => {
+          const name = prefix ? `${prefix} / ${item.name}` : item.name
+          out.push({ id: item.id, name })
+          const ch = item.children || item.child_list || item.childList || []
+          if (Array.isArray(ch) && ch.length) walk(ch, name)
+        })
+      }
+      walk(this.moduleTree, '')
+      return out
+    },
+    skillFormActiveRules() {
+      if (this.skillDialogMode === 'create') {
+        return {
+          name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+        }
+      }
+      return {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        triggerCondition: [{ required: true, message: '请输入触发条件', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    '$route.query.tab'(val) {
+      const next = val === 'rules' || val === 'business-rules' ? 'rules' : 'skills'
+      if (this.configActiveTab !== next) {
+        this.configActiveTab = next
+      }
+      if (!this.projectId) return
+      if (next === 'rules') this.fetchRuleList()
+      else this.fetchSkillList()
+    }
+  },
+  created() {
+    this.resetSkillFormModel()
+    this.resetRuleFormModel()
+    this.bootstrap()
+  },
+  methods: {
+    cleanParams(obj) {
+      const r = {}
+      Object.keys(obj || {}).forEach(k => {
+        const v = obj[k]
+        if (v !== '' && v !== undefined && v !== null) r[k] = v
+      })
+      return r
+    },
+    /** 新建 Skill 时后端要求 code 唯一，由前端自动生成 */
+    generateAutoSkillCode() {
+      const t = Date.now()
+      const r = Math.random().toString(36).slice(2, 10).toUpperCase()
+      return `SKILL_AUTO_${t}_${r}`
+    },
+    onConfigTabClick(tab) {
+      const name = tab && tab.name
+      const q = Object.assign({}, this.$route.query || {})
+      if (name === 'rules') {
+        q.tab = 'rules'
+      } else {
+        delete q.tab
+      }
+      const prev = JSON.stringify(this.$route.query || {})
+      const next = JSON.stringify(q)
+      if (prev !== next) {
+        this.$router.replace({ path: this.$route.path, query: q }).catch(() => {})
+      }
+    },
+    formatTagsCol(tags) {
+      if (Array.isArray(tags)) return tags.join('、')
+      return tags || '—'
+    },
+    formatSkillType(v) {
+      const o = this.skillTypeOptions.find(x => x.value === v)
+      return o ? o.label : (v === undefined || v === null ? '—' : v)
+    },
+    formatRiskLevel(v) {
+      const o = this.riskLevelOptions.find(x => x.value === v)
+      return o ? o.label : (v === undefined || v === null ? '—' : v)
+    },
+    formatPriority(v) {
+      const o = this.priorityOptions.find(x => x.value === v)
+      return o ? o.label : (v === undefined || v === null ? '—' : v)
+    },
+    formatConfigStatus(v) {
+      const o = this.statusOptions.find(x => x.value === v)
+      return o ? o.label : (v === undefined || v === null ? '—' : v)
+    },
+    resetSkillFormModel() {
+      this.skillForm = {
+        skillId: null,
+        moduleId: '',
+        name: '',
+        code: '',
+        description: '',
+        triggerCondition: '',
+        reasoningPath: '',
+        outputSpec: '',
+        skillType: 1,
+        riskLevel: 2,
+        tags: [],
+        status: 1
+      }
+    },
+    resetRuleFormModel() {
+      this.ruleForm = {
+        ruleId: null,
+        moduleId: '',
+        name: '',
+        ruleCode: '',
+        ruleContent: '',
+        applicableScene: '',
+        example: '',
+        priority: 2,
+        tags: [],
+        status: 1
+      }
+    },
+    bootstrap() {
+      this.loadProductOptions().then(() => {
+        const routePid = this.$route.query.productId ? Number(this.$route.query.productId) : ''
+        const routeProj = this.$route.query.projectId ? Number(this.$route.query.projectId) : ''
+        if (routePid) {
+          this.selectedProductId = routePid
+          return this.loadProjectOptions(routePid).then(() => {
+            if (routeProj) this.selectedProjectId = pickIdFromOptions(this.projectOptions, routeProj)
+          })
+        }
+        const cached = readLastProductProjectCache()
+        if (cached && cached.productId != null && cached.projectId != null) {
+          this.selectedProductId = pickIdFromOptions(this.productOptions, cached.productId)
+          return this.loadProjectOptions(this.selectedProductId).then(() => {
+            this.selectedProjectId = pickIdFromOptions(this.projectOptions, cached.projectId)
+          })
+        }
+        return Promise.resolve()
+      }).then(() => {
+        if (this.projectId) {
+          this.loadModuleTree()
+          if (this.configActiveTab === 'rules') this.fetchRuleList()
+          else this.fetchSkillList()
+        }
+      })
+    },
+    loadProductOptions() {
+      if (this.productOptions.length) return Promise.resolve()
+      return getProductList({ pageNo: 1, pageSize: 1000, status: 1 }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.productOptions = data.items || data.list || data.data || []
+      }).catch(() => { this.productOptions = [] })
+    },
+    loadProjectOptions(productId) {
+      if (!productId) {
+        this.projectOptions = []
+        return Promise.resolve()
+      }
+      return getProjectList({ pageNo: 1, pageSize: 1000, status: 1, productId }).then(res => {
+        const data = (res && res.data) || res || {}
+        this.projectOptions = data.items || data.list || data.data || []
+      }).catch(() => { this.projectOptions = [] })
+    },
+    loadModuleTree() {
+      if (!this.projectId) {
+        this.moduleTree = []
+        return
+      }
+      getModuleTree({ projectId: this.projectId }).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || []
+        this.moduleTree = Array.isArray(list) ? list : []
+      }).catch(() => { this.moduleTree = [] })
+    },
+    handleProductChange() {
+      this.selectedProjectId = ''
+      this.projectOptions = []
+      this.moduleTree = []
+      this.skillList = []
+      this.ruleList = []
+      this.skillTotal = 0
+      this.ruleTotal = 0
+      this.loadProjectOptions(this.selectedProductId)
+    },
+    handleProjectChange() {
+      if (this.selectedProductId && this.selectedProjectId) {
+        saveLastProductProjectCache(this.selectedProductId, this.selectedProjectId)
+      }
+      this.skillPageNo = 1
+      this.rulePageNo = 1
+      this.loadModuleTree()
+      if (this.projectId) {
+        if (this.configActiveTab === 'rules') this.fetchRuleList()
+        else this.fetchSkillList()
+      } else {
+        this.skillList = []
+        this.ruleList = []
+        this.skillTotal = 0
+        this.ruleTotal = 0
+      }
+    },
+    resetSkillQuery() {
+      this.skillQuery = { moduleId: '', keyword: '', status: '', skillType: '', riskLevel: '' }
+      this.skillPageNo = 1
+      this.fetchSkillList()
+    },
+    resetRuleQuery() {
+      this.ruleQuery = { moduleId: '', keyword: '', status: '', priority: '' }
+      this.rulePageNo = 1
+      this.fetchRuleList()
+    },
+    fetchSkillList() {
+      if (!this.projectId) return
+      this.skillLoading = true
+      const params = this.cleanParams(Object.assign({}, this.skillQuery, {
+        pageNo: this.skillPageNo,
+        pageSize: this.skillPageSize,
+        projectId: this.projectId
+      }))
+      getSkillList(params).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || []
+        this.skillList = Array.isArray(list) ? list : []
+        this.skillTotal = Number(data.total || 0)
+      }).catch(() => {
+        this.skillList = []
+        this.skillTotal = 0
+      }).finally(() => { this.skillLoading = false })
+    },
+    fetchRuleList() {
+      if (!this.projectId) return
+      this.ruleLoading = true
+      const params = this.cleanParams(Object.assign({}, this.ruleQuery, {
+        pageNo: this.rulePageNo,
+        pageSize: this.rulePageSize,
+        projectId: this.projectId
+      }))
+      getBusinessRuleList(params).then(res => {
+        const data = (res && res.data) || res || {}
+        const list = data.list || data.items || []
+        this.ruleList = Array.isArray(list) ? list : []
+        this.ruleTotal = Number(data.total || 0)
+      }).catch(() => {
+        this.ruleList = []
+        this.ruleTotal = 0
+      }).finally(() => { this.ruleLoading = false })
+    },
+    onSkillSize(s) {
+      this.skillPageSize = s
+      this.skillPageNo = 1
+      this.fetchSkillList()
+    },
+    onSkillPage(p) {
+      this.skillPageNo = p
+      this.fetchSkillList()
+    },
+    onRuleSize(s) {
+      this.rulePageSize = s
+      this.rulePageNo = 1
+      this.fetchRuleList()
+    },
+    onRulePage(p) {
+      this.rulePageNo = p
+      this.fetchRuleList()
+    },
+    openSkillCreate() {
+      if (!this.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      this.skillDialogMode = 'create'
+      this.resetSkillFormModel()
+      this.skillDialogVisible = true
+      this.$nextTick(() => this.$refs.skillFormRef && this.$refs.skillFormRef.clearValidate())
+    },
+    openSkillEdit(row) {
+      if (!row || !row.id) return
+      getSkillDetail(row.id).then(res => {
+        const d = (res && res.data) || res || {}
+        this.skillDialogMode = 'edit'
+        this.skillForm = {
+          skillId: d.id,
+          moduleId: d.module_id != null && d.module_id !== '' ? d.module_id : '',
+          name: d.name || '',
+          code: d.code || '',
+          description: d.description || '',
+          triggerCondition: d.trigger_condition || '',
+          reasoningPath: d.reasoning_path || '',
+          outputSpec: d.output_spec || '',
+          skillType: d.skill_type !== undefined ? d.skill_type : 1,
+          riskLevel: d.risk_level !== undefined ? d.risk_level : 2,
+          tags: Array.isArray(d.tags) ? d.tags.slice() : [],
+          status: d.status !== undefined ? d.status : 1
+        }
+        this.skillDialogVisible = true
+        this.$nextTick(() => this.$refs.skillFormRef && this.$refs.skillFormRef.clearValidate())
+      })
+    },
+    resetSkillForm() {
+      this.resetSkillFormModel()
+    },
+    submitSkill() {
+      const form = this.$refs.skillFormRef
+      if (!form) return
+      form.validate(valid => {
+        if (!valid) return
+        const tags = Array.isArray(this.skillForm.tags) ? this.skillForm.tags.filter(Boolean) : []
+        this.skillSubmitting = true
+        const done = () => { this.skillSubmitting = false }
+        if (this.skillDialogMode === 'create') {
+          createSkill(this.cleanParams({
+            projectId: this.projectId,
+            moduleId: this.skillForm.moduleId || undefined,
+            name: this.skillForm.name,
+            code: this.generateAutoSkillCode(),
+            description: this.skillForm.description || undefined,
+            triggerCondition: '由系统自动创建，可在编辑中完善。',
+            skillType: this.skillForm.skillType,
+            riskLevel: this.skillForm.riskLevel,
+            tags,
+            status: this.skillForm.status
+          })).then(() => {
+            this.$message.success('创建成功')
+            this.skillDialogVisible = false
+            this.fetchSkillList()
+          }).finally(done)
+        } else {
+          updateSkill(this.cleanParams({
+            skillId: this.skillForm.skillId,
+            name: this.skillForm.name,
+            description: this.skillForm.description || undefined,
+            triggerCondition: this.skillForm.triggerCondition,
+            reasoningPath: this.skillForm.reasoningPath || undefined,
+            outputSpec: this.skillForm.outputSpec || undefined,
+            skillType: this.skillForm.skillType,
+            riskLevel: this.skillForm.riskLevel,
+            tags,
+            status: this.skillForm.status
+          })).then(() => {
+            this.$message.success('保存成功')
+            this.skillDialogVisible = false
+            this.fetchSkillList()
+          }).finally(done)
+        }
+      })
+    },
+    removeSkill(row) {
+      this.$confirm('确认删除该 Skill？', '提示', { type: 'warning' }).then(() => {
+        deleteSkill(row.id).then(() => {
+          this.$message.success('已删除')
+          this.fetchSkillList()
+        })
+      }).catch(() => {})
+    },
+    openRuleCreate() {
+      if (!this.projectId) {
+        this.$message.warning('请先选择项目')
+        return
+      }
+      this.ruleDialogMode = 'create'
+      this.resetRuleFormModel()
+      this.ruleDialogVisible = true
+      this.$nextTick(() => this.$refs.ruleFormRef && this.$refs.ruleFormRef.clearValidate())
+    },
+    openRuleEdit(row) {
+      if (!row || !row.id) return
+      getBusinessRuleDetail(row.id).then(res => {
+        const d = (res && res.data) || res || {}
+        this.ruleDialogMode = 'edit'
+        this.ruleForm = {
+          ruleId: d.id,
+          moduleId: d.module_id != null && d.module_id !== '' ? d.module_id : '',
+          name: d.name || '',
+          ruleCode: d.rule_code || '',
+          ruleContent: d.rule_content || '',
+          applicableScene: d.applicable_scene || '',
+          example: d.example || '',
+          priority: d.priority !== undefined ? d.priority : 2,
+          tags: Array.isArray(d.tags) ? d.tags.slice() : [],
+          status: d.status !== undefined ? d.status : 1
+        }
+        this.ruleDialogVisible = true
+        this.$nextTick(() => this.$refs.ruleFormRef && this.$refs.ruleFormRef.clearValidate())
+      })
+    },
+    resetRuleForm() {
+      this.resetRuleFormModel()
+    },
+    submitRule() {
+      const form = this.$refs.ruleFormRef
+      if (!form) return
+      form.validate(valid => {
+        if (!valid) return
+        const tags = Array.isArray(this.ruleForm.tags) ? this.ruleForm.tags.filter(Boolean) : []
+        this.ruleSubmitting = true
+        const done = () => { this.ruleSubmitting = false }
+        if (this.ruleDialogMode === 'create') {
+          createBusinessRule(this.cleanParams({
+            projectId: this.projectId,
+            moduleId: this.ruleForm.moduleId || undefined,
+            name: this.ruleForm.name,
+            ruleContent: this.ruleForm.ruleContent,
+            applicableScene: this.ruleForm.applicableScene || undefined,
+            example: this.ruleForm.example || undefined,
+            priority: this.ruleForm.priority,
+            tags,
+            status: this.ruleForm.status
+          })).then(() => {
+            this.$message.success('创建成功')
+            this.ruleDialogVisible = false
+            this.fetchRuleList()
+          }).finally(done)
+        } else {
+          updateBusinessRule(this.cleanParams({
+            ruleId: this.ruleForm.ruleId,
+            name: this.ruleForm.name,
+            ruleContent: this.ruleForm.ruleContent,
+            applicableScene: this.ruleForm.applicableScene || undefined,
+            example: this.ruleForm.example || undefined,
+            priority: this.ruleForm.priority,
+            tags,
+            status: this.ruleForm.status
+          })).then(() => {
+            this.$message.success('保存成功')
+            this.ruleDialogVisible = false
+            this.fetchRuleList()
+          }).finally(done)
+        }
+      })
+    },
+    removeRule(row) {
+      this.$confirm('确认删除该业务规则？', '提示', { type: 'warning' }).then(() => {
+        deleteBusinessRule(row.id).then(() => {
+          this.$message.success('已删除')
+          this.fetchRuleList()
+        })
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page-wrap {
+  padding: 20px;
+}
+.filter-bar {
+  margin-bottom: 8px;
+}
+.toolbar-form {
+  margin-top: 0;
+}
+.pager-wrap {
+  margin-top: 12px;
+  text-align: right;
+}
+
+.skill-rule-tabs /deep/ .el-tabs__header {
+  margin-bottom: 12px;
+}
+</style>
--- a/src/components/User/Login.vue
+++ b/src/components/User/Login.vue
@@ -1,14 +1,24 @@
 <template>
-  <div id="backgroud">
+  <div id="backgroud" :class="themeClass">
+    <button class="login-theme-switch" type="button" @click="toggleTheme">
+      <i :class="themeIcon"></i>
+      <span>{{ themeLabel }}</span>
+    </button>
+    <div class="login-hero">
+      <div class="login-brand-mark">效</div>
+      <h1>效能平台</h1>
+      <p>统一管理测试协作、缺陷跟踪、用例周期与数据工具。</p>
+    </div>
    <div class="content_right">
      <div class="login-body-title">
-        <h2>登录</h2>
+        <h2>欢迎登录</h2>
+        <p>Quality Workspace</p>
      </div>
      <div class="messge">
        <span>{{ msg }}</span>
      </div>
      <div class="cr_top">
-        <div class="ct_input" style="height: 60px;width: 254px">
+        <div class="ct_input">
          <span class="ct-img-yhm">&nbsp;</span>
          <input
            id="username"
@@ -23,7 +33,7 @@
            placeholder="用户名"
            @keyup.enter="handleLogin">
        </div>
-        <div class="ct_input" style="height:60px;width: 254px">
+        <div class="ct_input">
          <span class="ct_img_mm">&nbsp;</span>
          <input
            id="password"
@@ -49,7 +59,7 @@

 <script>
 import { Login } from '@/api/Userapi'
-import { getRoleList } from '@/api/rbacApi'
+import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'

 export default {
  name: 'Login',
@@ -57,10 +67,34 @@ export default {
    return {
      msg: '',
      username: '',
-      password: ''
+      password: '',
+      uiTheme: localStorage.getItem('uiTheme') || 'dark'
    }
  },
+  computed: {
+    themeClass() {
+      return this.uiTheme === 'light' ? 'theme-login-light' : 'theme-login-dark'
+    },
+    themeLabel() {
+      return this.uiTheme === 'light' ? '深色' : '浅色'
+    },
+    themeIcon() {
+      return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
+    }
+  },
+  mounted() {
+    this.applyTheme()
+  },
  methods: {
+    applyTheme() {
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
+    },
+    toggleTheme() {
+      this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem('uiTheme', this.uiTheme)
+      this.applyTheme()
+    },
    handleLogin() {
      if (!this.username || !this.password) {
        this.msg = 'username、password 为必传参数'
@@ -92,6 +126,12 @@ export default {
          } else {
            localStorage.removeItem('accessToken')
          }
+          const rt = data.refresh_token || data.refreshToken
+          if (rt) {
+            localStorage.setItem('refreshToken', rt)
+          } else {
+            localStorage.removeItem('refreshToken')
+          }
          this.$store.commit('SetCurrentUser', user)
          this.$store.commit('SetRole', user.roleIds)
          this.$store.commit('SetUserMenus', [])
@@ -110,8 +150,7 @@ export default {
        return
      }
      getRoleList({ roleId }).then(res => {
-        const menus = res && Array.isArray(res.data) ? res.data : []
-        this.$store.commit('SetUserMenus', menus)
+        this.$store.commit('SetUserMenus', parseMenusFromRoleListResponse(res))
      }).catch(() => {})
    }
  }
@@ -121,67 +160,147 @@ export default {
 <style scoped>
@import "../../assets/css/Form.css";

-.content_right {
-  padding: 20px 0;
-  background: #fff;
-  color: #333;
-  border-radius: 3px;
-  border-color: rgba(250, 255, 251, .8);
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  outline: 0;
-  width: 300px;
-  height: 300px;
+#backgroud {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 80px;
+  background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
+  overflow: hidden;
+}
+
+.login-hero {
+  width: 420px;
+  color: #f8fbff;
+}
+
+.login-brand-mark {
+  width: 56px;
+  height: 56px;
+  line-height: 56px;
  text-align: center;
+  border-radius: 18px;
+  font-size: 28px;
+  font-weight: 900;
+  color: #06111f;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
+}
+
+.login-hero h1 {
+  margin: 24px 0 14px;
+  font-size: 42px;
+  line-height: 1.15;
+  letter-spacing: 1px;
+  text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
+}
+
+.login-hero p {
+  margin: 0;
+  color: #9fb8d4;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.login-theme-switch {
+  position: fixed;
+  right: 28px;
+  top: 24px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
+  background: rgba(15, 23, 42, 0.78);
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.login-theme-switch:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
+  transform: translateY(-1px);
+}
+
+.content_right {
+  padding: 34px 36px 30px;
+  background: rgba(15, 23, 42, 0.78);
+  color: #dbeafe;
+  border-radius: 24px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  position: static;
+  width: 330px;
+  min-height: 340px;
+  text-align: center;
+  backdrop-filter: blur(18px);
+}
+
+.login-body-title h2 {
+  font-size: 26px;
+  color: #e0f2fe;
+  margin-bottom: 8px;
+}
+
+.login-body-title p {
+  color: #67e8f9;
+  font-size: 13px;
+  letter-spacing: 0.8px;
 }

 .cr_top .ct_input {
  position: relative;
+  height: 48px;
+  width: 100%;
+  margin-bottom: 16px;
 }

 .account-oprate .regist-btn {
  float: right;
  font-size: 14px;
-  color: #333;
+  color: #67e8f9;
+  text-decoration: none;
+}
+
+.account-oprate .regist-btn:hover {
+  color: #bae6fd;
 }

 .messge {
  font-size: 12px;
-  margin-top: 10px;
-  height: 20px;
+  margin-top: 14px;
+  height: 22px;
  text-align: left;
-  padding-left: 24px;
-  color: #D60909;
+  color: #f87171;
 }

 .content_right .cr_top {
  position: relative;
-  margin: 0 23px 0;
+  margin: 0;
 }

 .content_right .input_text {
-  margin-bottom: 18px;
-  background: #fff;
+  background: rgba(8, 18, 36, 0.86);
 }

 .account-oprate {
-  width: 252px;
-  margin-left: 24px;
+  width: 100%;
 }

 .ct_img_mm,
 .ct-img-yhm {
  position: absolute;
-  top: 14px;
-  left: 8px;
+  top: 16px;
+  left: 14px;
  width: 16px;
  height: 16px;
  background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
+  opacity: 0.82;
+  filter: invert(78%) sepia(37%) saturate(773%) hue-rotate(153deg) brightness(103%) contrast(93%);
 }

 .ct-img-yhm {
@@ -190,39 +309,52 @@ export default {

 .input_text {
  display: inline-block;
-  width: 224px;
-  height: 24px;
-  padding: 8px 0 8px 28px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  padding: 0 14px 0 42px;
  font-size: 14px;
-  color: #000;
-  border: 1px solid #ccc;
-  border-radius: 3px;
+  color: #e0f2fe;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  border-radius: 14px;
  vertical-align: middle;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }

-.input_text:hover {
-  border-color: rgba(82, 168, 236, .8);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
+.input_text::placeholder {
+  color: #6f8baa;
+}
+
+.input_text:hover,
+.input_text:focus {
+  border-color: rgba(103, 232, 249, 0.72);
+  background: rgba(8, 18, 36, 0.96);
+  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12), 0 0 20px rgba(56, 189, 248, 0.14);
  outline: 0;
 }

 .btn_login:hover {
-  background-color: #3e82dc;
+  background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
 }

 .btn_login {
  text-align: center;
  box-sizing: border-box;
-  width: 254px;
-  height: 37px;
+  width: 100%;
+  height: 46px;
  font-size: 16px;
  cursor: pointer;
-  border-radius: 3px;
-  color: #fff;
-  border: 1px solid #4591f5;
-  background-color: #4591f5;
-  margin-bottom: 14px;
+  border-radius: 14px;
+  color: #06111f;
+  border: 1px solid rgba(103, 232, 249, 0.68);
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  margin-bottom: 16px;
  -webkit-appearance: none;
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+  font-weight: 800;
 }

 button,
@@ -268,4 +400,95 @@ ul {
  padding: 0;
  font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
 }
+
+.theme-login-light#backgroud {
+  background: radial-gradient(circle at 15% 18%, rgba(59, 130, 246, 0.14), transparent 26%), radial-gradient(circle at 82% 22%, rgba(14, 165, 233, 0.12), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef4ff 48%, #eaf2ff 100%);
+}
+
+.theme-login-light .login-theme-switch {
+  color: #1d4ed8;
+  background: rgba(255, 255, 255, 0.9);
+  border-color: #dbe5f3;
+  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
+}
+
+.theme-login-light .login-theme-switch:hover {
+  background: #eaf2ff;
+  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
+}
+
+.theme-login-light .login-hero {
+  color: #0f172a;
+}
+
+.theme-login-light .login-brand-mark {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+  box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24);
+}
+
+.theme-login-light .login-hero h1 {
+  text-shadow: none;
+}
+
+.theme-login-light .login-hero p {
+  color: #64748b;
+}
+
+.theme-login-light .content_right {
+  background: rgba(255, 255, 255, 0.9);
+  color: #334155;
+  border-color: #dbe5f3;
+  box-shadow: 0 24px 70px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+}
+
+.theme-login-light .login-body-title h2 {
+  color: #0f172a;
+}
+
+.theme-login-light .login-body-title p,
+.theme-login-light .account-oprate .regist-btn {
+  color: #2563eb;
+}
+
+.theme-login-light .account-oprate .regist-btn:hover {
+  color: #1d4ed8;
+}
+
+.theme-login-light .content_right .input_text {
+  background: #ffffff;
+}
+
+.theme-login-light .input_text {
+  color: #0f172a;
+  border-color: #d8e1ef;
+}
+
+.theme-login-light .input_text::placeholder {
+  color: #94a3b8;
+}
+
+.theme-login-light .input_text:hover,
+.theme-login-light .input_text:focus {
+  border-color: #60a5fa;
+  background: #ffffff;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
+}
+
+.theme-login-light .ct_img_mm,
+.theme-login-light .ct-img-yhm {
+  opacity: 0.72;
+  filter: none;
+}
+
+.theme-login-light .btn_login {
+  color: #ffffff;
+  border-color: #2563eb;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+}
+
+.theme-login-light .btn_login:hover {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
+}
 </style>
--- a/src/components/User/Register.vue
+++ b/src/components/User/Register.vue
@@ -1,10 +1,27 @@
 <template>
-  <div id="backgroud">
-    <div class="register-head" style="padding-top: 20px"></div>
+  <div id="backgroud" :class="themeClass">
+    <button class="register-theme-switch" type="button" @click="toggleTheme">
+      <i :class="themeIcon"></i>
+      <span>{{ themeLabel }}</span>
+    </button>
+    <div class="register-hero">
+      <div class="register-brand-mark">效</div>
+      <h1>效能平台</h1>
+      <p>创建账号后即可进入统一测试协作、用例管理与质量工作台。</p>
+      <div class="register-feature-list">
+        <span>测试协作</span>
+        <span>用例管理</span>
+        <span>质量工作台</span>
+      </div>
+    </div>
    <div class="model">
-      <div class="location-title"><h1>注册</h1></div>
+      <div class="location-title">
+        <span class="register-card-kicker">Create Account</span>
+        <h1>创建账号</h1>
+        <p>注册后开启你的质量效能工作区</p>
+      </div>

-      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
+      <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-position="top" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="ruleForm.username" type="text" placeholder="用户名" autocomplete="off"></el-input>
        </el-form-item>
@@ -77,10 +94,34 @@ export default {
        username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
        password: [{ required: true, validator: validatePass, trigger: 'blur' }],
        checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
-      }
+      },
+      uiTheme: localStorage.getItem('uiTheme') || 'dark'
    }
  },
+  computed: {
+    themeClass() {
+      return this.uiTheme === 'light' ? 'theme-register-light' : 'theme-register-dark'
+    },
+    themeLabel() {
+      return this.uiTheme === 'light' ? '深色' : '浅色'
+    },
+    themeIcon() {
+      return this.uiTheme === 'light' ? 'el-icon-moon' : 'el-icon-sunny'
+    }
+  },
+  mounted() {
+    this.applyTheme()
+  },
  methods: {
+    applyTheme() {
+      document.body.classList.remove('theme-dark', 'theme-light')
+      document.body.classList.add(this.uiTheme === 'light' ? 'theme-light' : 'theme-dark')
+    },
+    toggleTheme() {
+      this.uiTheme = this.uiTheme === 'light' ? 'dark' : 'light'
+      localStorage.setItem('uiTheme', this.uiTheme)
+      this.applyTheme()
+    },
    open(message) {
      this.$alert(message, '提示', {
        confirmButtonText: '确定'
@@ -116,35 +157,349 @@ export default {
 }
 </script>

-<style>
-@import "../../assets/css/Form.css";
+<style scoped>
+#backgroud {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 72px;
+  width: 100vw;
+  min-height: 100vh;
+  padding: 72px 48px;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+#backgroud.theme-register-dark {
+  background: radial-gradient(circle at 15% 18%, rgba(34, 211, 238, 0.22), transparent 26%), radial-gradient(circle at 82% 22%, rgba(99, 102, 241, 0.24), transparent 30%), linear-gradient(135deg, #050914 0%, #08111f 46%, #0f172a 100%);
+}
+
+#backgroud.theme-register-light {
+  background: radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.14), transparent 28%), radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 30%), linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #eaf2ff 100%);
+}
+
+.register-hero {
+  flex: 0 0 420px;
+  max-width: 420px;
+  color: #f8fbff;
+}
+
+.register-brand-mark {
+  width: 56px;
+  height: 56px;
+  line-height: 56px;
+  text-align: center;
+  border-radius: 18px;
+  font-size: 28px;
+  font-weight: 900;
+  color: #06111f;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 0 34px rgba(56, 189, 248, 0.48), 0 22px 48px rgba(99, 102, 241, 0.28);
+}
+
+.register-hero h1 {
+  margin: 24px 0 14px;
+  font-size: 42px;
+  line-height: 1.15;
+  letter-spacing: 1px;
+  text-shadow: 0 0 26px rgba(103, 232, 249, 0.22);
+}
+
+.register-hero p {
+  margin: 0;
+  color: #9fb8d4;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.register-feature-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 28px;
+}
+
+.register-feature-list span {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 999px;
+  color: #bae6fd;
+  background: rgba(56, 189, 248, 0.12);
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.register-theme-switch {
+  position: fixed;
+  right: 28px;
+  top: 24px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  color: #dbeafe;
+  background: rgba(15, 23, 42, 0.78);
+  cursor: pointer;
+  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.register-theme-switch:hover {
+  background: rgba(14, 165, 233, 0.18);
+  box-shadow: 0 0 18px rgba(56, 189, 248, 0.18);
+  transform: translateY(-1px);
+}
+
+.model {
+  position: relative;
+  flex: 0 0 420px;
+  width: 420px;
+  min-height: auto;
+  height: auto;
+  margin: 0;
+  padding: 34px 36px 30px;
+  border-radius: 24px;
+  text-align: left;
+  background: rgba(15, 23, 42, 0.82);
+  color: #dbeafe;
+  border: 1px solid rgba(56, 189, 248, 0.22);
+  box-shadow: 0 0 42px rgba(56, 189, 248, 0.12), 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(18px);
+}

 .location-title {
  text-align: center;
+  margin-bottom: 22px;
+}
+
+.register-card-kicker {
+  display: inline-flex;
+  margin-bottom: 10px;
+  color: #67e8f9;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1.6px;
+  text-transform: uppercase;
+}
+
+.location-title h1 {
+  margin: 0 0 8px;
+  font-size: 28px;
+  color: #e0f2fe;
+}
+
+.location-title p {
+  margin: 0;
+  color: #9fb8d4;
+  font-size: 13px;
+  letter-spacing: 0.4px;
 }

 .register-head {
  position: absolute;
 }

-.el-input {
-  float: left;
-  width: 80%;
+.demo-ruleForm {
+  width: 100%;
 }

-.register-actions .el-form-item__content {
+.demo-ruleForm >>> .el-form-item {
+  margin-bottom: 15px;
+}
+
+.el-input {
+  float: none;
+  width: 100%;
+}
+
+.model >>> .el-form-item__label {
+  padding: 0 0 7px;
+  color: #cbd5e1;
+  line-height: 1.2;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.model >>> .el-input__inner {
+  height: 44px;
+  background: rgba(8, 18, 36, 0.86);
+  border-color: rgba(56, 189, 248, 0.22);
+  color: #f8fafc;
+  border-radius: 14px;
+}
+
+.model >>> .el-input__inner:hover,
+.model >>> .el-input__inner:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
+}
+
+.register-actions {
+  margin-top: 4px;
+  margin-bottom: 0 !important;
+}
+
+.register-actions >>> .el-form-item__content {
  display: flex;
  flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
+  margin-left: 0 !important;
 }

-.login-link-wrap {
+.enter-btn {
  width: 100%;
-  margin-top: 8px;
-  text-align: right;
+  height: 46px;
+  border: 1px solid rgba(103, 232, 249, 0.68);
+  border-radius: 14px;
+  color: #06111f;
+  font-weight: 800;
+  background: linear-gradient(135deg, #67e8f9 0%, #38bdf8 45%, #6366f1 100%);
+  box-shadow: 0 16px 34px rgba(59, 130, 246, 0.25);
+  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.enter-btn:hover {
+  background: linear-gradient(135deg, #22d3ee 0%, #4f46e5 100%);
+  transform: translateY(-1px);
+  box-shadow: 0 0 26px rgba(56, 189, 248, 0.32), 0 16px 30px rgba(79, 70, 229, 0.24);
 }

 .login-link-btn {
+  align-self: flex-end;
  padding-right: 0;
+  margin-top: 10px;
+  color: #67e8f9;
+}
+
+.theme-register-light .register-hero {
+  color: #10233f;
+}
+
+.theme-register-light .register-brand-mark {
+  color: #ffffff;
+  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
+  box-shadow: 0 20px 48px rgba(37, 99, 235, 0.2);
+}
+
+.theme-register-light .register-hero h1 {
+  color: #0f172a;
+  text-shadow: none;
+}
+
+.theme-register-light .register-hero p {
+  color: #475569;
+}
+
+.theme-register-light .register-feature-list span {
+  color: #1d4ed8;
+  background: rgba(37, 99, 235, 0.08);
+  border-color: rgba(37, 99, 235, 0.16);
+  box-shadow: none;
+}
+
+.theme-register-light .register-theme-switch {
+  color: #1d4ed8;
+  background: rgba(255, 255, 255, 0.86);
+  border-color: rgba(37, 99, 235, 0.18);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+}
+
+.theme-register-light .register-theme-switch:hover {
+  background: #eff6ff;
+  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.14);
+}
+
+.theme-register-light .model {
+  background: rgba(255, 255, 255, 0.94);
+  color: #1e293b;
+  border-color: rgba(37, 99, 235, 0.14);
+  box-shadow: 0 28px 70px rgba(37, 99, 235, 0.14);
+}
+
+.theme-register-light .register-card-kicker {
+  color: #2563eb;
+}
+
+.theme-register-light .location-title h1 {
+  color: #0f172a;
+}
+
+.theme-register-light .location-title p {
+  color: #64748b;
+}
+
+.theme-register-light .model >>> .el-form-item__label {
+  color: #334155;
+}
+
+.theme-register-light .model >>> .el-input__inner {
+  background: #ffffff;
+  border-color: #dbe7f6;
+  color: #0f172a;
+}
+
+.theme-register-light .model >>> .el-input__inner:hover,
+.theme-register-light .model >>> .el-input__inner:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}
+
+.theme-register-light .enter-btn {
+  color: #ffffff;
+  border-color: #2563eb;
+  background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
+}
+
+.theme-register-light .enter-btn:hover {
+  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
+}
+
+.theme-register-light .login-link-btn {
+  color: #2563eb;
+}
+
+@media (max-width: 1080px) {
+  #backgroud {
+    gap: 40px;
+    padding: 72px 28px 36px;
+  }
+
+  .register-hero {
+    flex-basis: 360px;
+    max-width: 360px;
+  }
+}
+
+@media (max-width: 920px) {
+  #backgroud {
+    flex-direction: column;
+    gap: 28px;
+    padding: 80px 18px 28px;
+  }
+
+  .register-hero,
+  .model {
+    flex: none;
+    width: 100%;
+    max-width: 430px;
+  }
+
+  .register-hero {
+    text-align: center;
+  }
+
+  .register-brand-mark,
+  .register-feature-list {
+    margin-left: auto;
+    margin-right: auto;
+    justify-content: center;
+  }
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,14 @@ import ElementUI from 'element-ui';
 import store from '@/vuex/store'
 import 'element-ui/lib/theme-chalk/index.css';
 import axios from 'axios'
+
+function applyInitialTheme() {
+  const theme = localStorage.getItem('uiTheme') || 'dark'
+  document.body.classList.remove('theme-dark', 'theme-light')
+  document.body.classList.add(theme === 'light' ? 'theme-light' : 'theme-dark')
+}
+applyInitialTheme()
+
 Vue.use(ElementUI);
 Vue.prototype.$axios = axios

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,7 +34,7 @@ export default new Router({
          }
        },
        {
-          path: '/create/data',
+          path: '/data-tools/db-builder',
          name: 'CreateManage',
          components: {
            Manage: (resolve) => require(['@/components/CreateData/CreateManage'], resolve)
@@ -69,144 +69,218 @@ export default new Router({
          }
        },
        {
-          path: '/test-platform/projects',
+          path: '/test-platform/project',
          name: 'ProjectList',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectList'], resolve)
          }
        },
        {
-          path: '/test-platform/products',
+          path: '/test-platform/product',
          name: 'ProductList',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Product/ProductList'], resolve)
          }
        },
        {
-          path: '/test-platform/projects/detail',
+          path: '/test-platform/project/detail',
          name: 'ProjectDetail',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectDetail'], resolve)
          }
        },
        {
-          path: '/test-platform/projects/settings',
+          path: '/test-platform/project/setting',
          name: 'ProjectSettings',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Project/ProjectSettings'], resolve)
          }
        },
        {
-          path: '/test-platform/cases',
+          path: '/test-platform/skill-rules',
+          name: 'BusinessSkillRuleConfig',
+          components: {
+            Manage: (resolve) => require(['@/components/TestPlatform/SkillRule/BusinessSkillRuleConfig'], resolve)
+          }
+        },
+        {
+          path: '/test-platform/case',
          name: 'CaseList',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseList'], resolve)
          }
        },
        {
-          path: '/test-platform/cases/editor',
+          path: '/test-platform/case/editor',
          name: 'CaseEditor',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseEditor'], resolve)
          }
        },
        {
-          path: '/test-platform/cases/review',
+          path: '/test-platform/case/review',
          name: 'CaseReview',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Case/CaseReview'], resolve)
          }
        },
        {
-          path: '/test-platform/plans',
+          path: '/test-platform/plan',
          name: 'PlanList',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanList'], resolve)
          }
        },
        {
-          path: '/test-platform/plans/builder',
+          path: '/test-platform/plan/builder',
          name: 'PlanBuilder',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanBuilder'], resolve)
          }
        },
        {
-          path: '/test-platform/plans/execute',
+          path: '/test-platform/plan/execute',
          name: 'PlanExecute',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanExecute'], resolve)
          }
        },
        {
-          path: '/test-platform/plans/progress',
+          path: '/test-platform/plan/automation',
+          name: 'PlanAutomationRun',
+          components: {
+            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanAutomationRun'], resolve)
+          }
+        },
+        {
+          path: '/test-platform/plan/automation/executions',
+          name: 'PlanAutomationExecutionList',
+          components: {
+            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanAutomationExecutionList'], resolve)
+          }
+        },
+        {
+          path: '/test-platform/plan/progress',
          name: 'PlanProgress',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanProgress'], resolve)
          }
        },
        {
-          path: '/test-platform/reports',
+          path: '/test-platform/plan/case/add',
+          name: 'PlanCaseAdd',
+          components: {
+            Manage: (resolve) => require(['@/components/TestPlatform/Plan/PlanCaseAdd'], resolve)
+          }
+        },
+        {
+          path: '/test-platform/report',
          name: 'ReportList',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Report/ReportList'], resolve)
          }
        },
        {
-          path: '/test-platform/reports/viewer',
+          path: '/test-platform/report/viewer',
          name: 'ReportViewer',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/Report/ReportViewer'], resolve)
          }
        },
        {
-          path: '/test-platform/data-factory/builders',
+          path: '/bug',
+          redirect: '/bug/list'
+        },
+        {
+          path: '/bug/list',
+          name: 'BugList',
+          components: {
+            Manage: (resolve) => require(['@/components/Bug/BugList'], resolve)
+          }
+        },
+        {
+          path: '/bug/detail',
+          name: 'BugDetail',
+          components: {
+            Manage: (resolve) => require(['@/components/Bug/BugDetail'], resolve)
+          }
+        },
+        {
+          path: '/bug/create',
+          name: 'BugCreate',
+          components: {
+            Manage: (resolve) => require(['@/components/Bug/BugEditor'], resolve)
+          }
+        },
+        {
+          path: '/bug/edit',
+          name: 'BugEdit',
+          components: {
+            Manage: (resolve) => require(['@/components/Bug/BugEditor'], resolve)
+          }
+        },
+        {
+          path: '/bug/stats',
+          name: 'BugStats',
+          components: {
+            Manage: (resolve) => require(['@/components/Bug/BugStats'], resolve)
+          }
+        },
+        {
+          path: '/data-tools/factory',
          name: 'BuilderList',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/BuilderList'], resolve)
          }
        },
        {
-          path: '/test-platform/data-factory/editor',
+          path: '/data-tools/factory/editor',
          name: 'BuilderEditor',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/BuilderEditor'], resolve)
          }
        },
        {
-          path: '/test-platform/data-factory/tasks',
+          path: '/data-tools/factory/task',
          name: 'TaskHistory',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/TaskHistory'], resolve)
          }
        },
        {
-          path: '/test-platform/data-factory/mock',
+          path: '/data-tools/factory/mock',
          name: 'MockService',
          components: {
            Manage: (resolve) => require(['@/components/TestPlatform/DataFactory/MockService'], resolve)
          }
        },
        {
-          path: '/system/roles',
+          path: '/system/role',
          name: 'RoleManage',
          components: {
            Manage: (resolve) => require(['@/components/System/RoleManage'], resolve)
          }
        },
        {
-          path: '/system/users',
+          path: '/system/user',
          name: 'UserManage',
          components: {
            Manage: (resolve) => require(['@/components/System/UserManage'], resolve)
          }
        },
        {
-          path: '/system/menus',
+          path: '/system/menu',
          name: 'MenuManage',
          components: {
            Manage: (resolve) => require(['@/components/System/MenuManage'], resolve)
          }
+        },
+        {
+          path: '/system/permission',
+          name: 'PermissionManage',
+          components: {
+            Manage: (resolve) => require(['@/components/System/PermissionManage'], resolve)
+          }
        }
      ]
    }
--- a/src/utils/authToken.js
+++ b/src/utils/authToken.js
@@ -0,0 +1,58 @@
+import axios from 'axios'
+
+/** 与 request 实例一致，避免走带拦截器的 axios 造成循环 */
+const REFRESH_URL = '/it/api/auth/refresh'
+
+let inflightRefresh = null
+
+/**
+ * 静默续期：POST /auth/refresh（仅当业务接口返回 code 451 时由 request 响应拦截器调用）
+ * body 优先 refreshToken，否则传 accessToken；成功 code=20000 且 data.token
+ * @returns {Promise<boolean>}
+ */
+export function tryRefreshAccessToken() {
+  if (inflightRefresh) {
+    return inflightRefresh
+  }
+  const refreshToken = localStorage.getItem('refreshToken')
+  const accessToken = localStorage.getItem('accessToken')
+  if (!refreshToken && !accessToken) {
+    return Promise.resolve(false)
+  }
+  inflightRefresh = axios({
+    method: 'post',
+    url: REFRESH_URL,
+    timeout: 30000,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(accessToken ? { accessToken } : {})
+    },
+    data: refreshToken ? { refreshToken } : accessToken ? { accessToken } : {}
+  })
+    .then(res => {
+      const body = res && res.data
+      if (!body || body.code !== 20000) {
+        return false
+      }
+      const d = body.data || {}
+      const token = d.token || body.token
+      if (token) {
+        localStorage.setItem('accessToken', token)
+      }
+      const rt = d.refresh_token || d.refreshToken
+      if (rt) {
+        localStorage.setItem('refreshToken', rt)
+      }
+      return !!token
+    })
+    .catch(() => false)
+    .finally(() => {
+      inflightRefresh = null
+    })
+  return inflightRefresh
+}
+
+export function clearTokenStorage() {
+  localStorage.removeItem('accessToken')
+  localStorage.removeItem('refreshToken')
+}
--- a/src/utils/bugHistory.js
+++ b/src/utils/bugHistory.js
@@ -0,0 +1,73 @@
+import { addBugHistory } from '@/api/bugApi'
+
+/** 将任意值转为接口可接受的字符串（空用 ''） */
+export function toHistoryValue(v) {
+  if (v === undefined || v === null) return ''
+  if (typeof v === 'object') {
+    try {
+      return JSON.stringify(v)
+    } catch (e) {
+      return String(v)
+    }
+  }
+  return String(v)
+}
+
+/**
+ * 写入 Bug 操作历史（POST /bug/history/add）
+ * 失败不抛错、不阻断主流程，仅静默忽略（可后续接日志）
+ */
+export function recordBugHistory(store, { bugId, fieldName, oldValue, newValue, operatorId }) {
+  if (!bugId || !fieldName) return Promise.resolve()
+  const uid =
+    operatorId !== undefined && operatorId !== null && operatorId !== ''
+      ? operatorId
+      : store && store.state && store.state.currentUser && store.state.currentUser.id
+  if (uid === undefined || uid === null || uid === '') return Promise.resolve()
+  return addBugHistory({
+    bugId: Number(bugId),
+    fieldName: String(fieldName),
+    oldValue: toHistoryValue(oldValue),
+    newValue: toHistoryValue(newValue),
+    operatorId: Number(uid)
+  }).catch(() => {})
+}
+
+/** 编辑页：与接口 fieldName 对齐的表单字段（用于对比写历史） */
+export const BUG_EDIT_HISTORY_FIELDS = [
+  { formKey: 'title', fieldName: 'title' },
+  { formKey: 'bugType', fieldName: 'bug_type' },
+  { formKey: 'severity', fieldName: 'severity' },
+  { formKey: 'priority', fieldName: 'priority' },
+  { formKey: 'status', fieldName: 'status' },
+  { formKey: 'reporterId', fieldName: 'reporter_id' },
+  { formKey: 'assigneeId', fieldName: 'assignee_id' },
+  { formKey: 'moduleId', fieldName: 'module_id' },
+  { formKey: 'caseId', fieldName: 'case_id' },
+  { formKey: 'planId', fieldName: 'plan_id' },
+  { formKey: 'environment', fieldName: 'environment' },
+  { formKey: 'steps', fieldName: 'steps' },
+  { formKey: 'reproduceRate', fieldName: 'reproduce_rate' }
+]
+
+export function buildBugEditBaseline(form) {
+  const f = form || {}
+  const o = {}
+  BUG_EDIT_HISTORY_FIELDS.forEach(({ formKey }) => {
+    o[formKey] = f[formKey]
+  })
+  return o
+}
+
+/** 对比编辑前后并逐字段写历史（仅变更字段） */
+export function recordBugEditDiff(store, bugId, baseline, current) {
+  if (!bugId || !baseline || !current) return Promise.resolve()
+  const tasks = []
+  BUG_EDIT_HISTORY_FIELDS.forEach(({ formKey, fieldName }) => {
+    const ov = baseline[formKey]
+    const nv = current[formKey]
+    if (toHistoryValue(ov) === toHistoryValue(nv)) return
+    tasks.push(recordBugHistory(store, { bugId, fieldName, oldValue: ov, newValue: nv }))
+  })
+  return Promise.all(tasks)
+}
--- a/src/utils/bugHistoryDisplay.js
+++ b/src/utils/bugHistoryDisplay.js
@@ -0,0 +1,163 @@
+import {
+  STATUS_MAP,
+  PRIORITY_MAP,
+  SEVERITY_MAP,
+  BUG_TYPE_MAP,
+  formatBugType,
+  formatReproduceRate
+} from '@/utils/bugMaps'
+
+/** 历史记录 field_name / fieldName → 中文 */
+const FIELD_NAME_CN = {
+  status: '状态',
+  assignee_id: '当前指派',
+  reporter_id: '创建人',
+  module_id: '模块',
+  product_id: '产品',
+  project_id: '项目',
+  priority: '优先级',
+  severity: '严重程度',
+  bug_type: '类型',
+  title: '标题',
+  environment: '环境',
+  case_id: '关联用例',
+  plan_id: '关联计划',
+  steps: '复现步骤',
+  solution: '解决方案',
+  resolve_version: '解决版本',
+  resolve_comment: '解决备注',
+  comment: '备注',
+  create: '创建',
+  delete: '删除',
+  description: '描述',
+  user_id: '用户',
+  is_auto: '自动化',
+  reproduce_rate: '复现率',
+  resolved_by: '解决人'
+}
+
+const SOLUTION_CN = {
+  by_design: '设计如此',
+  duplicate_bug: '重复Bug',
+  external_reason: '外部原因',
+  solution_resolved: '已解决',
+  cannot_reproduce: '无法重现',
+  deferred: '延期处理',
+  wont_fix: '不予解决'
+}
+
+const RESOLVE_VERSION_CN = {
+  trunk: '主干',
+  current_sprint: '当前迭代',
+  next: '下一版本'
+}
+
+function stripHtmlBrief(html, maxLen) {
+  if (html == null || html === '') return ''
+  const text = String(html)
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+  if (!text) return '（富文本）'
+  if (maxLen && text.length > maxLen) return text.slice(0, maxLen) + '…'
+  return text
+}
+
+function toSnakeFieldKey(name) {
+  const s = String(name || '').trim()
+  if (!s) return ''
+  return s
+    .replace(/([a-z\d])([A-Z])/g, '$1_$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
+    .toLowerCase()
+    .replace(/^_+/, '')
+    .replace(/_+/g, '_')
+}
+
+/** 与 BUG_EDIT_HISTORY_FIELDS / 接口 fieldName 对齐的 snake_case key */
+export function normalizeBugHistoryFieldKey(name) {
+  const snake = toSnakeFieldKey(name)
+  if (!snake) return ''
+  const compact = snake.replace(/_/g, '')
+  const alias = {
+    assigneeid: 'assignee_id',
+    reporterid: 'reporter_id',
+    moduleid: 'module_id',
+    productid: 'product_id',
+    projectid: 'project_id',
+    caseid: 'case_id',
+    planid: 'plan_id',
+    bugtype: 'bug_type',
+    reproducerate: 'reproduce_rate',
+    resolvedby: 'resolved_by',
+    userid: 'user_id',
+    isauto: 'is_auto',
+    resolveversion: 'resolve_version',
+    resolvecomment: 'resolve_comment',
+    oldvalue: 'old_value',
+    newvalue: 'new_value',
+    fieldname: 'field_name'
+  }
+  return alias[compact] || snake
+}
+
+export function formatBugHistoryFieldName(name) {
+  const k = normalizeBugHistoryFieldKey(name)
+  if (!k) return '-'
+  return FIELD_NAME_CN[k] || String(name || '').trim() || '-'
+}
+
+/**
+ * 按字段将历史 old/new 转为中文展示（未知枚举则原样返回）
+ */
+export function formatBugHistoryCellValue(fieldName, value) {
+  const fn = normalizeBugHistoryFieldKey(fieldName)
+  const raw = value
+  if (raw === undefined || raw === null || raw === '') return '（空）'
+
+  const s = String(raw).trim()
+
+  switch (fn) {
+    case 'status':
+      return STATUS_MAP[Number(s)] != null ? STATUS_MAP[Number(s)] : s
+    case 'priority':
+      return PRIORITY_MAP[Number(s)] != null ? PRIORITY_MAP[Number(s)] : s
+    case 'severity':
+      return SEVERITY_MAP[Number(s)] != null ? SEVERITY_MAP[Number(s)] : s
+    case 'bug_type':
+      return BUG_TYPE_MAP[Number(s)] != null ? BUG_TYPE_MAP[Number(s)] : formatBugType(Number(s))
+    case 'solution':
+      return SOLUTION_CN[s] || s
+    case 'resolve_version':
+      return RESOLVE_VERSION_CN[s] || s
+    case 'resolve_comment':
+    case 'comment':
+      return stripHtmlBrief(raw, 160)
+    case 'create':
+    case 'delete':
+      if (s === '0' || s === '1') return s === '1' ? '是' : '否'
+      return s
+    case 'steps':
+      return stripHtmlBrief(raw, 120)
+    case 'reproduce_rate':
+      return formatReproduceRate(s)
+    case 'resolved_by':
+      return s
+    default:
+      return s
+  }
+}
+
+/** 解决弹窗历史列表用：单行描述 */
+export function formatBugHistoryLineText(h) {
+  const fn = h.field_name || h.fieldName || ''
+  var ov = h.old_value
+  if (ov === undefined || ov === null) ov = h.oldValue
+  var nv = h.new_value
+  if (nv === undefined || nv === null) nv = h.newValue
+  const op = h.operator_id || h.operatorId || h.operator_name || h.operatorName || ''
+  const label = formatBugHistoryFieldName(fn)
+  const o = formatBugHistoryCellValue(fn, ov)
+  const n = formatBugHistoryCellValue(fn, nv)
+  return `${label}：${o} → ${n}（操作人 ${op}）`
+}
--- a/src/utils/bugMaps.js
+++ b/src/utils/bugMaps.js
@@ -0,0 +1,143 @@
+/** Bug 枚举与展示（与接口一致：bug_type 1–11） */
+
+export const BUG_TYPE_MAP = {
+  1: '功能缺陷',
+  2: 'UI问题',
+  3: '性能问题',
+  4: '安全漏洞',
+  5: '兼容性问题',
+  6: '前端bug',
+  7: '后端bug',
+  8: '配置问题',
+  9: '产品设计缺陷',
+  10: '产品优化',
+  11: '其他'
+}
+
+export const SEVERITY_MAP = {
+  1: '致命',
+  2: '严重',
+  3: '中等',
+  4: '轻微'
+}
+
+export const PRIORITY_MAP = {
+  1: '高',
+  2: '中',
+  3: '低'
+}
+
+/** 复现概率 / 复现率（与接口 reproduceRate 一致） */
+export const REPRODUCE_RATE_MAP = {
+  1: '必现',
+  2: '偶现',
+  3: '仅一次',
+  4: '难重现'
+}
+
+export function formatReproduceRate(v) {
+  const n = Number(v)
+  if (Number.isNaN(n)) return v === undefined || v === null || v === '' ? '-' : String(v)
+  return REPRODUCE_RATE_MAP[n] != null ? REPRODUCE_RATE_MAP[n] : String(v)
+}
+
+export const STATUS_MAP = {
+  0: '新建',
+  1: '待处理',
+  2: '进行中',
+  3: '已解决',
+  4: '已关闭',
+  5: '已拒绝'
+}
+
+/** 已解决状态值（与接口一致） */
+export const BUG_STATUS_RESOLVED = 3
+
+/** 已关闭 */
+export const BUG_STATUS_CLOSED = 4
+
+/** 待处理（重新打开目标状态） */
+export const BUG_STATUS_PENDING = 1
+
+/** 已拒绝 */
+export const BUG_STATUS_REJECTED = 5
+
+/**
+ * 主流程下一状态：新建→待处理→进行中→已解决→已关闭；已拒绝→待处理。
+ * 已关闭、未知状态无下一档。
+ */
+export function getBugStatusNextTransition(status) {
+  const s = Number(status)
+  if (Number.isNaN(s)) return null
+  const nextMap = {
+    0: 1,
+    1: 2,
+    2: 3,
+    3: 4,
+    5: 1
+  }
+  const next = nextMap[s]
+  if (next === undefined) return null
+  const label = STATUS_MAP[next]
+  if (label == null) return null
+  return { nextStatus: next, nextLabel: label }
+}
+
+export function formatBugType(v) {
+  return BUG_TYPE_MAP[v] != null ? BUG_TYPE_MAP[v] : v
+}
+
+export function formatSeverity(v) {
+  return SEVERITY_MAP[v] != null ? SEVERITY_MAP[v] : v
+}
+
+export function formatPriority(v) {
+  return PRIORITY_MAP[v] != null ? PRIORITY_MAP[v] : v
+}
+
+export function formatStatus(v) {
+  return STATUS_MAP[v] != null ? STATUS_MAP[v] : v
+}
+
+/** ElementUI el-tag type */
+export function statusTagType(status) {
+  const map = {
+    0: 'info',
+    1: 'warning',
+    2: 'primary',
+    3: 'success',
+    4: 'info',
+    5: 'danger'
+  }
+  return map[Number(status)] || 'info'
+}
+
+/** 详情页等：状态角标独立配色（class 名） */
+export function statusBadgeClass(status) {
+  const map = {
+    0: 'bug-status-new',
+    1: 'bug-status-pending',
+    2: 'bug-status-progress',
+    3: 'bug-status-resolved',
+    4: 'bug-status-closed',
+    5: 'bug-status-rejected'
+  }
+  return map[Number(status)] != null ? map[Number(status)] : 'bug-status-unknown'
+}
+
+export function severityTagType(severity) {
+  const map = { 1: 'danger', 2: 'warning', 3: '', 4: 'info' }
+  return map[Number(severity)] || 'info'
+}
+
+export function priorityTagType(priority) {
+  const map = { 1: 'danger', 2: 'warning', 3: 'success' }
+  return map[Number(priority)] || 'info'
+}
+
+export function bugTypeTagType(bugType) {
+  const n = Number(bugType)
+  if (!n || n < 1) return ''
+  const cycle = ['', 'success', 'warning', 'danger', 'info']
+  return cycle[(n - 1) % cycle.length]
+}
--- a/src/utils/bugStepsFormat.js
+++ b/src/utils/bugStepsFormat.js
@@ -0,0 +1,192 @@
+/** 复现步骤中的截图：存 Markdown 图片语法，详情页安全渲染 */
+
+/** Markdown 图片：允许 ] 与 ( 之间有空格，与部分编辑器行为一致 */
+export function getBugStepImageMarkdownRegex() {
+  return /!\[[^\]]*\]\s*\(\s*((?:https?:\/\/|\/)[^)\s]+)\s*\)/gi
+}
+
+/** 新建 / 无复现步骤数据时，富文本编辑器内的默认骨架 */
+export const BUG_STEPS_DEFAULT_HTML =
+  '<p>复现步骤：</p>' +
+  '<p><br></p>' +
+  '<p><br></p>' +
+  '<p>实际结果：</p>' +
+  '<p><br></p>' +
+  '<p><br></p>' +
+  '<p>预期结果：</p>' +
+  '<p><br></p>'
+
+export function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/** 用于 HTML 属性（如 img src） */
+export function escapeHtmlAttr(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+}
+
+/**
+ * 上传文件路径中的反斜杠统一为 /
+ * @param {string} url
+ */
+export function normalizeUploadPathSlashes(url) {
+  return String(url || '').trim().replace(/\\/g, '/')
+}
+
+/**
+ * 静态资源（Bug 上传图）访问根，不含末尾 /
+ * - 开发环境默认 http://localhost:8881（与后端文件服务常见端口一致）
+ * - 可在 index.html 里设置 window.__BUG_UPLOAD_ORIGIN__ 覆盖
+ * - 打包时可配置 VUE_APP_BUG_UPLOAD_ORIGIN（需在 webpack DefinePlugin 中注入）
+ */
+export function getBugUploadStaticOrigin() {
+  if (typeof window !== 'undefined' && window.__BUG_UPLOAD_ORIGIN__) {
+    return String(window.__BUG_UPLOAD_ORIGIN__).replace(/\/$/, '')
+  }
+  try {
+    if (typeof process !== 'undefined' && process.env && process.env.VUE_APP_BUG_UPLOAD_ORIGIN) {
+      return String(process.env.VUE_APP_BUG_UPLOAD_ORIGIN).replace(/\/$/, '')
+    }
+  } catch (e) { /* ignore */ }
+  try {
+    if (typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development') {
+      return 'http://localhost:8881'
+    }
+  } catch (e2) { /* ignore */ }
+  return ''
+}
+
+/**
+ * 浏览器实际加载图片用的地址：/uploads/... 在开发环境走 8881 端口
+ * 存库仍可为接口返回的完整 URL，仅展示/预览时改写
+ */
+export function rewriteBugImageUrlForAccess(url) {
+  const u = normalizeUploadPathSlashes(url)
+  if (!u) return ''
+  const staticOrigin = getBugUploadStaticOrigin()
+  let path = ''
+  if (/^https?:\/\//i.test(u)) {
+    const dbl = u.indexOf('//')
+    const pathStart = u.indexOf('/', dbl >= 0 ? dbl + 2 : 0)
+    path = pathStart >= 0 ? u.slice(pathStart) : '/'
+  } else if (u.startsWith('/')) {
+    path = u
+  } else {
+    return u
+  }
+  path = normalizeUploadPathSlashes(path)
+  if (staticOrigin && path.indexOf('/uploads/') === 0) {
+    return staticOrigin + path
+  }
+  if (/^https?:\/\//i.test(u)) return u
+  return resolveUploadPublicUrl(path)
+}
+
+/** 相对路径补全为当前站点 origin（无专用静态域时） */
+export function resolveUploadPublicUrl(url) {
+  const u = String(url || '').trim()
+  if (!u) return ''
+  if (/^https?:\/\//i.test(u)) return u
+  if (u.startsWith('//')) return `${window.location.protocol}${u}`
+  if (u.startsWith('/')) return `${window.location.origin}${u}`
+  return u
+}
+
+/**
+ * 解析 POST /bug/upload 成功响应（与接口一致：{ code, message, data: { url } }）
+ */
+export function parseBugUploadFileUrl(res) {
+  if (!res) return ''
+  const inner = res.data
+  if (inner && typeof inner === 'object' && inner.url != null && inner.url !== '') {
+    return String(inner.url).trim()
+  }
+  if (typeof inner === 'string' && (inner.startsWith('http') || inner.startsWith('/'))) {
+    return inner.trim()
+  }
+  if (typeof res === 'string' && (res.startsWith('http') || res.startsWith('/'))) {
+    return res.trim()
+  }
+  if (res.url != null && res.url !== '') {
+    return String(res.url).trim()
+  }
+  const legacy =
+    (inner && inner.fileUrl) ||
+    (inner && inner.file_url) ||
+    (inner && inner.path) ||
+    (inner && typeof inner.data === 'object' && inner.data && inner.data.url) ||
+    ''
+  return legacy ? String(legacy).trim() : ''
+}
+
+/**
+ * 将步骤文本转为可展示的 HTML（仅把 Markdown 图片转为 img，其余转义）
+ */
+export function formatBugStepsToHtml(raw) {
+  const s = String(raw || '')
+  const re = getBugStepImageMarkdownRegex()
+  let out = ''
+  let last = 0
+  let m
+  re.lastIndex = 0
+  while ((m = re.exec(s)) !== null) {
+    out += escapeHtml(s.slice(last, m.index)).replace(/\n/g, '<br>')
+    const rawUrl = normalizeUploadPathSlashes(m[1])
+    const displaySrc = rewriteBugImageUrlForAccess(rawUrl)
+    if (displaySrc && (/^https?:\/\//i.test(displaySrc) || displaySrc.startsWith('/'))) {
+      out += `<img class="bug-step-img" src="${escapeHtmlAttr(displaySrc)}" alt="截图" />`
+    } else {
+      out += escapeHtml(m[0])
+    }
+    last = m.index + m[0].length
+  }
+  out += escapeHtml(s.slice(last)).replace(/\n/g, '<br>')
+  return out
+}
+
+/** 判断是否为富文本 HTML（与旧版纯文本 / Markdown 区分） */
+export function isStepsLikelyHtml(s) {
+  return /<\s*(p|div|br|img|span|ul|ol|li|h[1-6]|table|strong|em)\b/i.test(String(s || '').trim())
+}
+
+/** 将 HTML 中 img 的 src 改写为可访问地址（开发环境 /uploads → 8881） */
+export function rewriteImgSrcsInHtml(html) {
+  return String(html || '').replace(/(<img\b[^>]*\bsrc\s*=\s*)(["'])([^"']*)\2/gi, function (_m, pre, q, src) {
+    const fixed = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(src))
+    return pre + q + escapeHtmlAttr(fixed) + q
+  })
+}
+
+/**
+ * 旧数据（纯文本 / Markdown 图片）转为 wangEditor 可用的 HTML
+ */
+export function legacyStepsToEditorHtml(raw) {
+  const s = String(raw || '')
+  if (!s.trim()) return BUG_STEPS_DEFAULT_HTML
+  if (isStepsLikelyHtml(s)) return rewriteImgSrcsInHtml(s)
+  const re = getBugStepImageMarkdownRegex()
+  let out = ''
+  let last = 0
+  let m
+  re.lastIndex = 0
+  while ((m = re.exec(s)) !== null) {
+    const text = s.slice(last, m.index)
+    if (text) {
+      out += '<p>' + escapeHtml(text).replace(/\n/g, '<br/>') + '</p>'
+    }
+    const src = rewriteBugImageUrlForAccess(normalizeUploadPathSlashes(m[1]))
+    out += '<p><img src="' + escapeHtmlAttr(src) + '" style="max-width:100%;"/></p>'
+    last = m.index + m[0].length
+  }
+  const tail = s.slice(last)
+  if (tail) {
+    out += '<p>' + escapeHtml(tail).replace(/\n/g, '<br/>') + '</p>'
+  }
+  return out || BUG_STEPS_DEFAULT_HTML
+}
--- a/src/utils/lastProductProjectCache.js
+++ b/src/utils/lastProductProjectCache.js
@@ -0,0 +1,39 @@
+/**
+ * 全局「最近选择的产品 + 项目」缓存（localStorage），供 Bug 列表、用例、计划、报告等共用。
+ * 兼容旧 key：effekt_bug_list_last_product_project
+ */
+export const LAST_PRODUCT_PROJECT_CACHE_KEY = 'effekt_last_product_project'
+
+const LEGACY_BUG_LIST_CACHE_KEY = 'effekt_bug_list_last_product_project'
+
+export function readLastProductProjectCache() {
+  try {
+    let raw = localStorage.getItem(LAST_PRODUCT_PROJECT_CACHE_KEY)
+    if (!raw) raw = localStorage.getItem(LEGACY_BUG_LIST_CACHE_KEY)
+    if (!raw) return null
+    const o = JSON.parse(raw)
+    if (!o || typeof o !== 'object') return null
+    return { productId: o.productId, projectId: o.projectId }
+  } catch (e) {
+    return null
+  }
+}
+
+export function saveLastProductProjectCache(productId, projectId) {
+  if (productId === '' || productId === undefined || productId === null) return
+  if (projectId === '' || projectId === undefined || projectId === null) return
+  try {
+    const payload = JSON.stringify({ productId, projectId })
+    localStorage.setItem(LAST_PRODUCT_PROJECT_CACHE_KEY, payload)
+    if (localStorage.getItem(LEGACY_BUG_LIST_CACHE_KEY)) {
+      localStorage.removeItem(LEGACY_BUG_LIST_CACHE_KEY)
+    }
+  } catch (e) {
+    // quota / 隐私模式等忽略
+  }
+}
+
+export function pickIdFromOptions(options, rawId) {
+  const row = (options || []).find(p => String(p.id) === String(rawId))
+  return row ? row.id : rawId
+}
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,15 +1,65 @@
 import axios from 'axios'
-import { Message } from 'element-ui';
+import { Message } from 'element-ui'
 import router from '../router/index'
-const service = axios.create({
-  // baseURL: 'http://10.250.0.252:5010', // api 的 base_url
-  // baseURL: '', // api 的 base_url
-  baseURL: '/it/api', // api 的 base_url
+import store from '@/vuex/store'
+import { clearTokenStorage, tryRefreshAccessToken } from './authToken'

-  timeout: 90000 // request timeout
+const service = axios.create({
+  baseURL: '/it/api',
+  timeout: 90000
 })

-// 请求拦截  设置统一header
+function pushLoginExpired(message) {
+  clearTokenStorage()
+  localStorage.removeItem('authUser')
+  localStorage.removeItem('userMenus')
+  store.commit('ClearCurrentUser')
+  router.push({ name: 'login' })
+  Message.error(message || '登录已失效，请重新登录')
+}
+
+function apiCode(data) {
+  if (!data || data.code === undefined || data.code === null) return null
+  const n = Number(data.code)
+  return Number.isFinite(n) ? n : null
+}
+
+function isMissingToken(data) {
+  return apiCode(data) === 40001
+}
+
+/** 仅 451：token 无效或已过期，走静默续期并重试一次 */
+function isTokenExpiredRefreshable(data) {
+  return apiCode(data) === 451
+}
+
+function isForbiddenApi(data) {
+  return apiCode(data) === 40003
+}
+
+/** @param {{ config: object, data?: object }} ctx */
+function handleTokenExpiredRefreshAndRetry(ctx) {
+  const cfg = (ctx && ctx.config) || {}
+  const pdata = (ctx && ctx.data) || {}
+  if (cfg.__retriedTokenRefresh) {
+    pushLoginExpired(pdata.message || 'token无效或已过期！')
+    return Promise.reject(new Error('token无效或已过期'))
+  }
+  return tryRefreshAccessToken().then(ok => {
+    if (!ok) {
+      pushLoginExpired(pdata.message || 'token无效或已过期！')
+      return Promise.reject(new Error('token无效或已过期'))
+    }
+    const nextCfg = Object.assign({}, cfg, { __retriedTokenRefresh: true })
+    nextCfg.headers = Object.assign({}, nextCfg.headers || {})
+    const newAt = localStorage.getItem('accessToken')
+    if (newAt) {
+      nextCfg.headers.accessToken = newAt
+    }
+    return service.request(nextCfg)
+  })
+}
+
 service.interceptors.request.use(
  config => {
    const accessToken = localStorage.getItem('accessToken')
@@ -18,25 +68,60 @@ service.interceptors.request.use(
    }
    return config
  },
-  error => {
-    return Promise.reject(error)
-  }
+  error => Promise.reject(error)
 )

-// 响应拦截  401 token过期处理
 service.interceptors.response.use(
  response => {
-    if(response.data.code===500){
-      Message.error("服务异常")
-    }else if(response.data.code===451){
-      router.push({name:'login'})
+    const data = response && response.data ? response.data : {}
+    if (data && data.code === 500) {
+      Message.error('服务异常')
+      return Promise.reject(new Error(data.message || '服务异常'))
    }
-    else {
-      return response.data
+    if (data && isMissingToken(data)) {
+      pushLoginExpired(data.message || '缺少token！')
+      return Promise.reject(new Error(data.message || '缺少token'))
    }
+    if (data && isTokenExpiredRefreshable(data)) {
+      return handleTokenExpiredRefreshAndRetry({ config: response.config, data })
+    }
+    if (data && isForbiddenApi(data)) {
+      Message.error(data.message || '无权限访问该接口！')
+      return Promise.reject(new Error(data.message || '无权限访问该接口'))
+    }
+    if (data && data.success === false) {
+      Message.error(data.message || '请求失败')
+      return Promise.reject(new Error(data.message || '请求失败'))
+    }
+    if (data && data.code !== undefined && data.code !== 20000) {
+      Message.error(data.message || '请求失败')
+      return Promise.reject(new Error(data.message || '请求失败'))
+    }
+    return response.data
  },
  error => {
-    // 错误提醒
+    const res = error && error.response
+    const data = res && res.data ? res.data : null
+    if (data && isMissingToken(data) && error.config) {
+      pushLoginExpired(data.message || '缺少token！')
+      return Promise.reject(new Error(data.message || '缺少token'))
+    }
+    if (data && isTokenExpiredRefreshable(data) && error.config && !error.config.__retriedTokenRefresh) {
+      return handleTokenExpiredRefreshAndRetry({ config: error.config, data })
+    }
+    if (data && isForbiddenApi(data)) {
+      Message.error(data.message || '无权限访问该接口！')
+      return Promise.reject(error)
+    }
+    if (data && typeof data === 'object') {
+      if (data.success === false) {
+        Message.error(data.message || '请求失败')
+      } else if (data.code && data.code !== 20000 && data.message) {
+        Message.error(data.message || '请求失败')
+      }
+    } else if (error && error.message) {
+      Message.error(error.message)
+    }
    return Promise.reject(error)
  }
 )
Author	SHA1	Message	Date
qiaoxinjiu	793a8e1b84	fix(case): AI 用例详情弹窗深浅色主题可读性为 append-to-body 详情弹窗增加独立样式，修复标题、标签与描述列表在浅色/服务器环境下的对比度。 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 17:05:45 +08:00
qiaoxinjiu	971967b791	fix(layout): 左侧菜单栏支持纵向滚动菜单项过多时可在侧栏内滚动查看，品牌区保持固定。 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 16:55:56 +08:00
qiaoxinjiu	5cafab7534	fix(case): 用例管理 Tab、自动化弹窗与日期筛选主题样式 - Tab 未选中项在深色/浅色下可读性修复 - 生成自动化用例弹窗独立深色样式（append-to-body） - 创建时间日期范围与主题一致 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 16:50:27 +08:00
qiaoxinjiu	f7cdff31ba	fix(ui): 主题与脑图浅色适配、标签配色及静态资源缓存 - 浅色模式下用例脑图区域改为浅色样式 - 恢复 el-tag 按 success/warning/info 等类型的颜色 - 启动时应用主题，Home 内容区深色样式兜底 - nginx 禁止缓存 index.html，hash 静态资源长期缓存 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 16:33:35 +08:00
qiaoxinjiu	3b359a7fd5	feat(ui): 全局深色主题与登录注册页样式优化 - App 全局主题变量与 Element 组件暗色适配 - 首页、测试平台布局与主题切换 - 登录/注册页改版并支持明暗主题切换 - 用例列表等页面样式与主题保持一致 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 16:18:40 +08:00
qiaoxinjiu	f05cf53b85	chore(nginx): 提高上传请求体大小上限至 100m 支持文档等大文件上传场景。 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 11:28:55 +08:00
qiaoxinjiu	238f7bb4ad	Merge branch 'master' into 2026-04-29-nrc4	2026-05-18 10:02:50 +08:00
qiaoxinjiu	dca942bc8f	feat(test-platform): AI生成用例、业务技能配置与计划执行优化 - 用例管理增加 AI 生成用例 Tab、文档来源与技能/规则多选生成 - 新增业务技能与业务规则配置页及 API - 计划执行列表展示模块路径与名称，移除 Jenkins URL 列 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-18 10:01:35 +08:00
qiaoxinjiu	8a47183662	Merge pull request 'feat(plan): 计划自动化执行、结果列表与鉴权请求优化' (#2 ) from 2026-04-29-nrc4 into master Reviewed-on: #2	2026-05-11 14:29:28 +08:00
qiaoxinjiu	6e9673f7dd	feat(plan): 计划自动化执行、结果列表与鉴权请求优化 - 新增 automationApi、PlanAutomationRun、PlanAutomationExecutionList - 计划构建/列表/执行/进度等接入自动化与路由 - request 与 authToken 处理 token 刷新与错误码 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-11 14:27:55 +08:00
qiaoxinjiu	1af15cca29	Merge pull request '2026-04-29-nrc4' (#1 ) from 2026-04-29-nrc4 into master Reviewed-on: #1	2026-05-08 11:29:01 +08:00
qiaoxinjiu	33753361b0	chore: simplify nginx.conf (revert cache blocks); index.html 效能平台 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-08 11:22:59 +08:00
qiaoxinjiu	0ea5a1286e	chore(html): update document title to 效能平台 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-08 11:03:49 +08:00
qiaoxinjiu	52b0c2cafb	chore(nginx): disable cache for index.html, long-cache hashed static assets Co-authored-by: Cursor <cursoragent@cursor.com>	2026-05-08 11:00:02 +08:00
qiaoxinjiu	6b67a5baf5	更新Jenkins配置	2026-05-07 19:50:57 +08:00
qiaoxinjiu	f8211673ee	功能更新：新增Bug管理模块，完善用户角色分配，优化项目设置	2026-05-07 19:43:05 +08:00
qiaoxinjiu	916248483c	refactor: update case API to use camelCase for parameters and add import/export functionality for case templates	2026-04-29 17:14:31 +08:00