Add coursework test scripts and reports

.gitignore

@@ -15,3 +15,4 @@ Thumbs.db
 
 coverage/
 .nyc_output/
+.codex-run/

README.md

@@ -1,47 +1,117 @@
 # ServicePilot
 
-ServicePilot is a commercial customer ticketing and SLA management practice project for comprehensive testing coursework.
+ServicePilot 是“智能客户工单与 SLA 履约管理平台”综合测试实践项目，包含 PRD、测试计划、测试报告、前端 Angular 应用和后端 Node.js/TypeScript/Express 服务。
 
-## Structure
+## 1. 项目结构
 
 ```text
 ServicePilot/
+├─ docs/                  # PRD、测试计划、测试报告、Parse Schema 文档
 ├─ project/
-│  ├─ backend/
-│  └─ frontend/
-├─ tests/
-│  ├─ unit_tests/
-│  ├─ api_tests/
-│  ├─ auto_tests/
-│  └─ performance_tests/
-├─ docs/
-└─ personal_reports/
+│  ├─ backend/            # Node.js + TypeScript + Express
+│  └─ frontend/           # Angular + GSAP + React 组件
+├─ tests/                 # 测试资料目录
+└─ personal_reports/      # 个人报告目录
 ```
 
-## Backend
+## 2. 后端启动
 
-Tech stack: Node.js, TypeScript, Express, Parse, Jest, Supertest.
+Windows PowerShell 如遇到 `npm.ps1` 执行策略限制，请使用 `npm.cmd`。
 
-```bash
-cd project/backend
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd install
 copy .env.example .env
-npm run dev
+npm.cmd run dev
 ```
 
-Health check:
+后端默认地址：
 
 ```text
-GET http://localhost:3000/api/health
+http://localhost:3000
 ```
 
-## Frontend
+健康检查：
 
-Tech stack: Angular, TypeScript, GSAP, React components, ECharts.
+```text
+http://localhost:3000/api/health
+```
+
+## 3. 前端启动
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+npm.cmd install
+npm.cmd start -- --host 127.0.0.1 --port 4201
+```
+
+前端访问地址：
+
+```text
+http://127.0.0.1:4201
+```
+
+常用页面：
+
+```text
+http://127.0.0.1:4201/dashboard
+http://127.0.0.1:4201/login
+http://127.0.0.1:4201/tickets
+http://127.0.0.1:4201/sla
+http://127.0.0.1:4201/knowledge
+http://127.0.0.1:4201/files
+http://127.0.0.1:4201/reviews
+http://127.0.0.1:4201/test-plan
+```
+
+## 4. 测试与构建
+
+后端自动化测试：
+
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd test
+```
 
-```bash
-cd project/frontend
-npm start
+后端构建：
+
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd run build
 ```
 
-Angular is the main application framework. React is reserved for local interactive components such as image preview and star rating.
+前端构建：
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+npm.cmd run build
+```
+
+构建产物静态预览：
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+D:\nodejs\node.exe scripts\static-preview.cjs
+```
+
+静态预览地址：
+
+```text
+http://127.0.0.1:4301/dashboard
+```
+
+## 5. 文档
+
+重点文档：
+
+```text
+docs/02_综合测试计划.md
+docs/15_自动化测试分层与大厂UI对标方案.md
+docs/16_综合测试执行报告.md
+```
+
+## 6. 环境说明
+
+后端 `.env` 需要配置 Parse / Back4App 参数。仓库只提交 `.env.example`，不会提交真实密钥。
 
+如果只是查看前端页面样式，可先启动前端；如果需要登录、工单查询、数据库 CRUD，需要先启动后端并正确配置 `.env`。

build_test_docs_utf8.py

@@ -0,0 +1,225 @@
+# -*- coding: utf-8 -*-
+from pathlib import Path
+
+from docx import Document
+from docx.enum.table import WD_CELL_VERTICAL_ALIGNMENT, WD_TABLE_ALIGNMENT
+from docx.enum.text import WD_ALIGN_PARAGRAPH
+from docx.oxml import OxmlElement
+from docx.oxml.ns import qn
+from docx.shared import Inches, Pt, RGBColor
+
+
+ROOT = Path(__file__).resolve().parent
+PLAN_DOCX = ROOT / "0235711-王刚-综合测试计划.docx"
+REPORT_DOCX = ROOT / "0235711-王刚-综合测试报告.docx"
+AUTO_ARTIFACTS = ROOT / "tests" / "auto_tests" / "artifacts"
+
+
+def format_run(run, font="宋体", size=10.5, bold=False, color=None):
+    run.font.name = font
+    run._element.rPr.rFonts.set(qn("w:eastAsia"), font)
+    run.font.size = Pt(size)
+    run.bold = bold
+    if color:
+        run.font.color.rgb = RGBColor(*color)
+
+
+def setup_doc(title, subtitle):
+    doc = Document()
+    section = doc.sections[0]
+    section.top_margin = Inches(0.8)
+    section.bottom_margin = Inches(0.8)
+    section.left_margin = Inches(0.85)
+    section.right_margin = Inches(0.85)
+    doc.styles["Normal"].font.name = "宋体"
+    doc.styles["Normal"]._element.rPr.rFonts.set(qn("w:eastAsia"), "宋体")
+    doc.styles["Normal"].font.size = Pt(10.5)
+
+    p = doc.add_paragraph()
+    p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r = p.add_run(title)
+    format_run(r, "微软雅黑", 20, True, (17, 24, 39))
+
+    p = doc.add_paragraph()
+    p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r = p.add_run(subtitle)
+    format_run(r, "微软雅黑", 11, False, (82, 96, 113))
+    doc.add_paragraph("")
+    return doc
+
+
+def h1(doc, text):
+    p = doc.add_paragraph()
+    p.paragraph_format.space_before = Pt(10)
+    p.paragraph_format.space_after = Pt(6)
+    r = p.add_run(text)
+    format_run(r, "微软雅黑", 15, True, (23, 78, 166))
+
+
+def h2(doc, text):
+    p = doc.add_paragraph()
+    p.paragraph_format.space_before = Pt(7)
+    p.paragraph_format.space_after = Pt(4)
+    r = p.add_run(text)
+    format_run(r, "微软雅黑", 12, True, (17, 24, 39))
+
+
+def body(doc, text):
+    p = doc.add_paragraph(text)
+    p.paragraph_format.first_line_indent = Pt(21)
+    p.paragraph_format.line_spacing = 1.25
+    p.paragraph_format.space_after = Pt(4)
+    for r in p.runs:
+        format_run(r)
+
+
+def border(cell):
+    tc_pr = cell._tc.get_or_add_tcPr()
+    borders = tc_pr.first_child_found_in("w:tcBorders")
+    if borders is None:
+        borders = OxmlElement("w:tcBorders")
+        tc_pr.append(borders)
+    for edge in ("top", "left", "bottom", "right"):
+        element = borders.find(qn(f"w:{edge}"))
+        if element is None:
+            element = OxmlElement(f"w:{edge}")
+            borders.append(element)
+        element.set(qn("w:val"), "single")
+        element.set(qn("w:sz"), "6")
+        element.set(qn("w:space"), "0")
+        element.set(qn("w:color"), "D8DEE8")
+
+
+def shade(cell, fill):
+    tc_pr = cell._tc.get_or_add_tcPr()
+    shd = OxmlElement("w:shd")
+    shd.set(qn("w:fill"), fill)
+    tc_pr.append(shd)
+
+
+def cell_text(cell, text, bold=False, color=None):
+    cell.text = ""
+    p = cell.paragraphs[0]
+    p.alignment = WD_ALIGN_PARAGRAPH.CENTER if len(str(text)) <= 12 else WD_ALIGN_PARAGRAPH.LEFT
+    r = p.add_run(str(text))
+    format_run(r, size=9.5, bold=bold, color=color)
+    cell.vertical_alignment = WD_CELL_VERTICAL_ALIGNMENT.CENTER
+    border(cell)
+
+
+def table(doc, headers, rows):
+    t = doc.add_table(rows=1, cols=len(headers))
+    t.alignment = WD_TABLE_ALIGNMENT.CENTER
+    t.autofit = True
+    for i, header in enumerate(headers):
+        shade(t.rows[0].cells[i], "EAF1FF")
+        cell_text(t.rows[0].cells[i], header, True, (23, 78, 166))
+    for row in rows:
+        cells = t.add_row().cells
+        for i, val in enumerate(row):
+            cell_text(cells[i], val)
+    doc.add_paragraph("")
+
+
+def caption(doc, text):
+    p = doc.add_paragraph()
+    p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+    r = p.add_run(text)
+    format_run(r, size=9, color=(82, 96, 113))
+
+
+def picture(doc, filename, text):
+    path = AUTO_ARTIFACTS / filename
+    if path.exists():
+        p = doc.add_paragraph()
+        p.alignment = WD_ALIGN_PARAGRAPH.CENTER
+        p.add_run().add_picture(str(path), width=Inches(6.1))
+        caption(doc, text)
+
+
+def build_plan():
+    doc = setup_doc("0235711-王刚-综合测试计划", "ServicePilot 智能客户工单与 SLA 履约管理平台")
+    h1(doc, "一、测试范围")
+    body(doc, "本项目测试对象包括前端 Angular 页面、后端 Node.js + TypeScript + Express 接口、Parse 数据权限、工单管理、SLA 管理、知识库、附件管理、满意度评价和数据看板。")
+    table(doc, ["测试类型", "目录", "工具", "数量目标", "覆盖范围"], [
+        ["单元测试", "tests/unit_tests", "Jest", "26 条", "状态流转、权限、SLA、附件规则"],
+        ["接口测试", "tests/api_tests", "Jest + Supertest", "5 条", "health、Parse 配置、404 契约"],
+        ["自动化测试", "tests/auto_tests", "Playwright CLI", "7 条", "七个前端关键页面"],
+        ["性能测试", "tests/performance_tests", "Locust", "2 个脚本", "后端接口、前端页面"],
+    ])
+    h1(doc, "二、四类测试计划")
+    h2(doc, "1. 单元测试计划")
+    body(doc, "单元测试重点验证业务规则函数，不依赖浏览器和真实数据库。要求核心规则通过率达到 100%，整体通过率不低于 95%。")
+    h2(doc, "2. 接口测试计划")
+    body(doc, "接口测试重点验证 Express API 的响应状态、返回结构、错误处理和敏感字段保护。")
+    h2(doc, "3. 自动化测试计划")
+    body(doc, "自动化测试使用 Playwright CLI 打开构建后的前端页面，检查 HTTP 状态并保存页面截图。")
+    h2(doc, "4. 性能测试计划")
+    body(doc, "性能测试使用 Locust 对后端接口和前端页面进行并发访问，观察平均响应时间、P95、错误率和服务稳定性。")
+    h1(doc, "三、验收标准")
+    table(doc, ["指标", "标准"], [
+        ["单元测试通过率", ">= 95%，核心业务规则 100%"],
+        ["接口测试通过率", ">= 95%"],
+        ["自动化测试通过率", "100%"],
+        ["性能测试错误率", "< 1%"],
+        ["阻塞/严重缺陷", "0 个"],
+    ])
+    doc.save(PLAN_DOCX)
+
+
+def build_report():
+    doc = setup_doc("0235711-王刚-综合测试报告", "按作业要求分为单元测试、接口测试、自动化测试、性能测试四部分")
+    h1(doc, "一、测试执行汇总")
+    table(doc, ["测试类型", "脚本目录", "执行数量", "通过数量", "结论"], [
+        ["单元测试", "tests/unit_tests", "26", "26", "通过"],
+        ["接口测试", "tests/api_tests", "5", "5", "通过"],
+        ["自动化测试", "tests/auto_tests", "7", "7", "通过"],
+        ["性能测试", "tests/performance_tests", "2 个 Locust 脚本", "待执行", "脚本已补充"],
+    ])
+    h1(doc, "二、单元测试结果")
+    body(doc, "执行 tests/unit_tests/run_unit_tests.ps1，调用后端 Jest 测试 quality-rules.spec.ts。结果为 1 个测试套件通过，26 条用例全部通过，通过率 100%。")
+    table(doc, ["模块", "测试点", "结果"], [
+        ["工单状态", "合法流转、非法流转、关闭状态处理", "通过"],
+        ["权限隔离", "客户、客服、技术支持、管理员读取权限", "通过"],
+        ["SLA", "截止时间、预警、超时判断", "通过"],
+        ["附件", "类型限制、空文件、大小限制", "通过"],
+    ])
+    h1(doc, "三、接口测试结果")
+    body(doc, "执行 tests/api_tests/run_api_tests.ps1，调用 Jest + Supertest 测试 health.spec.ts 和 api-contract.spec.ts。结果为 2 个测试套件通过，5 条接口用例全部通过。")
+    table(doc, ["接口", "测试内容", "结果"], [
+        ["GET /api/health", "服务健康检查", "通过"],
+        ["GET /api/config/parse", "公开配置结构", "通过"],
+        ["GET /api/config/parse", "敏感字段不暴露", "通过"],
+        ["GET /api/unknown-resource", "404 契约", "通过"],
+        ["POST /api/ghost", "404 消息包含方法和路径", "通过"],
+    ])
+    h1(doc, "四、自动化测试结果")
+    body(doc, "执行 tests/auto_tests/run_auto_tests.ps1，使用 Playwright CLI 对前端七个关键页面进行访问验证并保存截图。结果为 7 条自动化流程全部通过。")
+    table(doc, ["编号", "页面", "结果"], [
+        ["AUTO-001", "/dashboard", "PASS"],
+        ["AUTO-002", "/tickets", "PASS"],
+        ["AUTO-003", "/sla", "PASS"],
+        ["AUTO-004", "/knowledge", "PASS"],
+        ["AUTO-005", "/files", "PASS"],
+        ["AUTO-006", "/reviews", "PASS"],
+        ["AUTO-007", "/test-plan", "PASS"],
+    ])
+    picture(doc, "AUTO-001-dashboard.png", "图 1 自动化测试截图：工作台页面")
+    picture(doc, "AUTO-002-tickets.png", "图 2 自动化测试截图：工单管理页面")
+    picture(doc, "AUTO-003-sla.png", "图 3 自动化测试截图：SLA 管理页面")
+    h1(doc, "五、性能测试脚本说明")
+    body(doc, "性能测试目录已补充 Locust 脚本，包括 locustfile_backend.py 和 locustfile_frontend.py。由于当前机器未检测到 Locust 命令，本次未生成真实性能报告；安装 Locust 后可运行 run_backend_performance.ps1 和 run_frontend_performance.ps1 生成 HTML 报告。")
+    table(doc, ["脚本", "测试目标", "默认并发配置"], [
+        ["locustfile_backend.py", "后端 health、Parse 配置、404 契约", "30 用户，启动速率 5，持续 3 分钟"],
+        ["locustfile_frontend.py", "前端 dashboard、tickets、sla、knowledge、files、reviews、test-plan", "30 用户，启动速率 5，持续 3 分钟"],
+    ])
+    h1(doc, "六、缺陷与结论")
+    body(doc, "本次补充后，测试脚本目录已经符合课程作业结构要求：unit_tests、api_tests、auto_tests、performance_tests 均有对应脚本和说明。已执行的单元测试、接口测试、自动化测试通过率均为 100%；性能测试脚本已具备，待安装 Locust 后执行。")
+    doc.save(REPORT_DOCX)
+
+
+if __name__ == "__main__":
+    build_plan()
+    build_report()
+    print(PLAN_DOCX)
+    print(REPORT_DOCX)

docs/02_综合测试计划.md

@@ -52,6 +52,20 @@
 
 测试总量目标：不少于 **112 条/项**。
 
+### 2.1 自动化测试级别映射
+
+为对标标准软测大作业和行业测试分层，本项目将自动化测试分为以下级别：
+
+| 级别 | 对应测试层级 | 工具 | 项目模块 | 通过标准 |
+|---|---|---|---|---|
+| L1 小型测试 | 单元/组件测试 | Jest | 状态流转、权限、SLA、附件校验 | 通过率 ≥ 95%，核心规则 100% |
+| L2 中型测试 | 接口/组件集成测试 | Jest + Supertest | health、配置接口、404、核心 API 契约 | 通过率 ≥ 95% |
+| L3 大型测试 | 系统/UI 自动化测试 | Selenium 或 Playwright | 登录、创建工单、流转、附件、评价 | 6 条主流程 100% |
+| L4 验收测试 | 发布验收 | 手工测试 + 报告 | 发布门禁、缺陷等级、启动说明 | 阻塞/严重缺陷为 0 |
+| L5 非功能测试 | 性能测试 | Locust | 登录、列表、详情、创建、看板 | 错误率和 P95 满足标准 |
+
+当前已落地执行的自动化结果见 `16_综合测试执行报告.md`。
+
 ## 3. 测试环境
 
 | 类型 | 环境 |
@@ -342,4 +356,3 @@
 | UI 自动化 | 6 | 待填 | 待填 | 待填 | 待填 |
 | 手工功能测试 | 35 | 待填 | 待填 | 待填 | 待填 |
 | 合计 | 112 | 待填 | 待填 | 待填 | 待填 |
-

docs/15_自动化测试分层与大厂UI对标方案.md

@@ -0,0 +1,90 @@
+# ServicePilot 自动化测试分层与大厂 UI 对标方案
+
+## 1. 对标资料
+
+| 方向 | 来源 | 采用结论 |
+|---|---|---|
+| 测试级别 | ISTQB CTFL v4.0.1 Syllabus | 测试需要覆盖组件测试、集成测试、系统测试、验收测试；系统集成重点验证接口和外部系统协作，验收测试关注是否可发布。 |
+| 自动化比例 | Google Testing Blog - Just Say No to More End-to-End Tests | 采用测试金字塔思想：单元测试最多，接口/集成测试居中，端到端测试少量覆盖关键用户旅程。 |
+| UI 自动化实践 | Playwright Best Practices | UI 自动化应验证用户可见行为，测试之间保持隔离，减少对 CSS 类和内部实现的依赖。 |
+| 企业级 UI | Ant Design Design Values / Ant Motion | 企业应用 UI 需要清晰、高效、可控；动画应服务于交互反馈，而不是装饰。 |
+| 数据密集型表格 | Carbon Design System Data Table | 表格需要工具栏、搜索/筛选、批量操作、行 hover、明确行操作入口。 |
+| 数据表可扫描性 | Material Design Data Tables | 数据表应按行列组织信息，提供查询、排序、分页或过滤能力，帮助用户扫描并获得洞察。 |
+
+参考链接：
+
+1. https://istqb.org/wp-content/uploads/2024/11/ISTQB_CTFL_Syllabus_v4.0.1.pdf
+2. https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
+3. https://playwright.dev/docs/best-practices
+4. https://3x.ant.design/docs/spec/values
+5. https://motion.ant.design/language/principle
+6. https://carbondesignsystem.com/components/data-table/usage/
+7. https://m2.material.io/develop/web/components/data-tables
+
+## 2. 自动化测试分层
+
+| 层级 | 对标级别 | 项目落地 | 工具 | 数量目标 | 当前状态 |
+|---|---|---|---|---:|---|
+| L1 小型测试 | 组件/单元测试 | 工单状态机、权限判定、SLA 计算、附件校验 | Jest | 24 条以上 | 已落地 26 条业务规则测试 |
+| L2 中型测试 | 组件集成/接口测试 | Express health、404、Parse 配置契约 | Jest + Supertest | 12 条以上 | 已落地 5 条接口冒烟/契约测试 |
+| L3 大型测试 | 系统测试/UI 自动化 | 登录、创建工单、筛选、状态流转、附件预览、评价 | Selenium 或 Playwright | 6 条流程 | 已完成流程设计，待 WebDriver 环境执行 |
+| L4 验收测试 | 发布验收 | 发布门禁、缺陷等级、测试报告、启动说明 | 手工 + 报告 | 35 条手工项 | 已在测试计划中定义 |
+| L5 非功能测试 | 性能/稳定性 | 登录、工单列表、工单详情、创建工单、看板接口 | Locust | 5 个场景 | 已在测试计划中定义 |
+
+## 3. 当前已执行自动化命令
+
+后端单元与接口测试：
+
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd test
+```
+
+执行结果：
+
+| 指标 | 结果 |
+|---|---:|
+| Test Suites | 3 passed / 3 total |
+| Tests | 31 passed / 31 total |
+| Snapshots | 0 |
+| 结论 | 通过 |
+
+后端构建：
+
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd run build
+```
+
+结果：TypeScript 构建通过。
+
+前端构建：
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+npm.cmd run build
+```
+
+结果：Angular 构建通过。
+
+## 4. UI 对标整改点
+
+| 页面 | 对标问题 | 已整改方向 |
+|---|---|---|
+| 工作台 | 原页面偏展示型，信息密度不够 | 改为运营控制台，加入核心指标、业务覆盖矩阵、发布门禁和运营事件 |
+| 工单页 | 需要更像专业 SaaS 工作台 | 形成队列、详情、状态时间线、业务侧栏、CRUD、React 评价/预览组件 |
+| 导航 | 原导航缺少选中态和后台产品感 | 增加品牌块、模块选中态、紧凑后台导航 |
+| 测试计划覆盖 | 不应把测试计划硬塞进业务页 | 首页展示业务模块覆盖矩阵，测试计划独立页面承载测试资料 |
+
+## 5. UI 验收标准
+
+| 项目 | 标准 |
+|---|---|
+| 中文界面 | 所有业务页面主文案为中文 |
+| 信息层级 | 首屏能看到关键指标、风险状态和核心入口 |
+| 表格/列表 | 有标题、状态、负责人、入口或操作 |
+| 动画 | GSAP 用于页面入场、列表切换、状态时间线反馈 |
+| React 组件 | 图片预览与星级评分通过 Angular wrapper 嵌入 |
+| 响应式 | 1100px 以下主布局自动降为单列 |
+| 构建 | `npm.cmd run build` 通过 |
+

docs/16_综合测试执行报告.md

@@ -0,0 +1,176 @@
+# ServicePilot 综合测试执行报告
+
+## 1. 报告范围
+
+项目名称：ServicePilot 智能客户工单与 SLA 履约管理平台。
+
+本报告记录截至 2026-06-07 已完成的自动化测试、构建验证、UI 对标整改和待执行项。
+
+## 2. 测试环境
+
+| 类型 | 环境 |
+|---|---|
+| 操作系统 | Windows |
+| 后端 | Node.js + TypeScript + Express |
+| 前端 | Angular + TypeScript + GSAP + React 组件 |
+| 数据库 | Parse / Back4App |
+| 后端测试 | Jest + Supertest |
+| 前端构建 | Angular CLI |
+
+注意：在 Windows PowerShell 中如遇到 `npm.ps1` 执行策略限制，应使用 `npm.cmd`。
+
+## 3. 已执行测试结果
+
+### 3.1 后端自动化测试
+
+执行命令：
+
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd test
+```
+
+执行结果：
+
+| 测试套件 | 用例数 | 结果 |
+|---|---:|---|
+| `health.spec.ts` | 1 | 通过 |
+| `api-contract.spec.ts` | 4 | 通过 |
+| `quality-rules.spec.ts` | 26 | 通过 |
+| 合计 | 31 | 通过 |
+
+覆盖内容：
+
+| 模块 | 覆盖点 |
+|---|---|
+| 工单状态 | 待分派、处理中、待客户确认、已解决、已关闭、已取消之间的合法流转 |
+| 权限隔离 | 客户、客服、技术支持、管理员读取权限 |
+| SLA | 紧急/高优先级截止时间、正常、预警、超时 |
+| 附件 | 文件类型、空文件、大小限制 |
+| API 契约 | health、Parse 配置结构、404 响应 |
+
+结论：后端当前自动化测试通过率为 **100%**。
+
+### 3.2 后端构建
+
+执行命令：
+
+```powershell
+cd E:\软测\ServicePilot\project\backend
+npm.cmd run build
+```
+
+结果：通过。
+
+### 3.3 前端构建
+
+执行命令：
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+npm.cmd run build
+```
+
+结果：通过。
+
+### 3.4 浏览器页面验证
+
+验证方式：
+
+1. 执行 `npm.cmd run build` 生成前端产物。
+2. 使用 `project/frontend/scripts/static-preview.cjs` 启动静态预览。
+3. 使用 Playwright 打开本地页面并生成截图。
+
+路由检查：
+
+| 页面 | HTTP 状态 |
+|---|---:|
+| `/dashboard` | 200 |
+| `/tickets` | 200 |
+| `/sla` | 200 |
+| `/knowledge` | 200 |
+| `/files` | 200 |
+| `/reviews` | 200 |
+| `/test-plan` | 200 |
+
+截图文件：
+
+```text
+E:\软测\ServicePilot\.codex-run\screenshots\dashboard-fixed.png
+E:\软测\ServicePilot\.codex-run\screenshots\tickets.png
+E:\软测\ServicePilot\.codex-run\screenshots\sla-final.png
+E:\软测\ServicePilot\.codex-run\screenshots\knowledge-final.png
+E:\软测\ServicePilot\.codex-run\screenshots\files-final.png
+E:\软测\ServicePilot\.codex-run\screenshots\reviews-final.png
+```
+
+浏览器检查结论：
+
+| 页面 | 检查点 | 结果 |
+|---|---|---|
+| `/dashboard` | 指标、业务矩阵、发布门禁、导航选中态可见 | 通过 |
+| `/tickets` | 未登录空状态、筛选区、指标卡、业务侧栏可见 | 通过 |
+| `/sla` | SLA 指标、筛选栏、规则表、风险队列、测试边界侧栏可见 | 通过 |
+| `/knowledge` | 文章指标、检索栏、文章表、分类洞察侧栏可见 | 通过 |
+| `/files` | 附件指标、筛选栏、附件表、上传规则和 React 预览入口可见 | 通过 |
+| `/reviews` | 满意度指标、React 星级评分、评价规则、回访表可见 | 通过 |
+| 全局 | 无明显中文乱码、无首屏元素重叠、无大面积空白 | 通过 |
+
+## 4. UI 对标执行结果
+
+| 页面 | 验证点 | 结果 |
+|---|---|---|
+| `/dashboard` | 企业级运营控制台、指标卡、业务模块矩阵、发布门禁 | 已完成 |
+| `/tickets` | 工单队列、详情、筛选、状态流转、SLA 风险、React 组件 | 已完成 |
+| `/sla` | SLA 规则表、风险队列、筛选栏、测试边界侧栏 | 已完成 |
+| `/knowledge` | 知识库文章表、分类洞察、检索筛选、审核状态 | 已完成 |
+| `/files` | 附件表、审核状态、上传限制、React 图片预览 | 已完成 |
+| `/reviews` | React 星级评价、评价规则、客户回访队列 | 已完成 |
+| `/test-plan` | 测试计划页面 | 已完成 |
+
+## 5. 测试计划模块覆盖审计
+
+| 测试计划模块 | 页面/代码覆盖 | 当前状态 |
+|---|---|---|
+| 用户登录 | `/login` | 已覆盖 |
+| 工单管理 | `/tickets`、状态规则单元测试 | 已覆盖 |
+| SLA 管理 | `/sla`、SLA 规则单元测试 | 已覆盖 |
+| 知识库 | `/knowledge` | 已覆盖 |
+| 附件管理 | `/files`、附件校验单元测试 | 已覆盖 |
+| 满意度评价 | `/reviews`、React 星级组件 | 已覆盖 |
+| 数据看板 | `/dashboard` | 已覆盖 |
+
+## 6. 待执行测试项
+
+| 类型 | 数量 | 说明 |
+|---|---:|---|
+| UI 自动化 | 6 条 | 登录成功、登录失败、创建工单、客服分派、技术处理、客户确认评价 |
+| 性能测试 | 5 场景 | 登录、工单列表、工单详情、创建工单、看板查询 |
+| 手工功能测试 | 35 条 | 表单、筛选、权限菜单、附件、动画、React 组件 |
+
+这些项目已在 `02_综合测试计划.md` 中定义，后续需要在具备 Selenium/ChromeDriver 或 Playwright 环境后执行并填入最终统计。
+
+## 7. 缺陷记录
+
+| 编号 | 等级 | 问题 | 状态 |
+|---|---|---|---|
+| DEF-001 | 一般 | PowerShell 直接执行 `npm` 可能被执行策略拦截 | 已规避，启动命令改用 `npm.cmd` |
+| DEF-002 | 一般 | 原工作台页面偏展示型，不符合企业级后台信息密度 | 已修复 |
+
+当前阻塞缺陷：0。
+
+当前严重缺陷：0。
+
+## 8. 发布判断
+
+| 指标 | 标准 | 当前结果 |
+|---|---|---|
+| 后端自动化测试通过率 | >= 95% | 100% |
+| 后端构建 | 通过 | 通过 |
+| 前端构建 | 通过 | 通过 |
+| 浏览器页面检查 | 关键页面 200 且首屏可用 | 通过 |
+| 阻塞缺陷 | 0 | 0 |
+| 严重缺陷 | 0 | 0 |
+| UI 业务模块覆盖 | 覆盖测试计划核心模块 | 已覆盖 |
+
+阶段结论：当前项目达到课程展示和阶段验收条件；完整发布验收仍需补充 UI 自动化执行记录、性能测试报告和手工测试记录。

project/backend/src/services/quality-rules.ts

@@ -0,0 +1,97 @@
+export type TicketStatus = 'pending' | 'processing' | 'confirming' | 'resolved' | 'closed' | 'cancelled';
+export type UserRole = 'customer' | 'support' | 'engineer' | 'admin';
+export type Priority = 'low' | 'medium' | 'high' | 'urgent';
+
+const statusTransitions: Record<TicketStatus, TicketStatus[]> = {
+  pending: ['processing', 'cancelled'],
+  processing: ['confirming'],
+  confirming: ['processing', 'resolved'],
+  resolved: ['closed', 'processing'],
+  closed: [],
+  cancelled: []
+};
+
+const priorityResolveHours: Record<Priority, number> = {
+  low: 72,
+  medium: 48,
+  high: 24,
+  urgent: 4
+};
+
+export interface TicketAclInput {
+  creatorId: string;
+  ownerId?: string;
+  companyUserIds: string[];
+}
+
+export interface SlaInput {
+  priority: Priority;
+  createdAt: Date;
+  resolvedAt?: Date;
+  now: Date;
+}
+
+export interface FileInput {
+  name: string;
+  sizeMb: number;
+}
+
+export function canTransition(from: TicketStatus, to: TicketStatus): boolean {
+  return statusTransitions[from]?.includes(to) ?? false;
+}
+
+export function allowedNextStatuses(from: TicketStatus): TicketStatus[] {
+  return [...(statusTransitions[from] ?? [])];
+}
+
+export function canReadTicket(userId: string, role: UserRole, acl: TicketAclInput): boolean {
+  if (role === 'admin' || role === 'support') {
+    return true;
+  }
+
+  if (role === 'engineer') {
+    return acl.ownerId === userId;
+  }
+
+  return acl.creatorId === userId || acl.companyUserIds.includes(userId);
+}
+
+export function resolveDeadline(input: Pick<SlaInput, 'priority' | 'createdAt'>): Date {
+  return new Date(input.createdAt.getTime() + priorityResolveHours[input.priority] * 60 * 60 * 1000);
+}
+
+export function isSlaOverdue(input: SlaInput): boolean {
+  const deadline = resolveDeadline(input);
+  const compareTime = input.resolvedAt ?? input.now;
+  return compareTime.getTime() > deadline.getTime();
+}
+
+export function slaStatus(input: SlaInput): 'normal' | 'warning' | 'overdue' {
+  if (isSlaOverdue(input)) {
+    return 'overdue';
+  }
+
+  const deadline = resolveDeadline(input);
+  const total = deadline.getTime() - input.createdAt.getTime();
+  const remaining = deadline.getTime() - input.now.getTime();
+  return remaining / total <= 0.2 ? 'warning' : 'normal';
+}
+
+export function validateAttachment(file: FileInput): { valid: boolean; reason?: string } {
+  const ext = file.name.split('.').pop()?.toLowerCase();
+  const allowed = ['png', 'jpg', 'jpeg', 'pdf', 'log'];
+
+  if (!ext || !allowed.includes(ext)) {
+    return { valid: false, reason: 'UNSUPPORTED_TYPE' };
+  }
+
+  if (file.sizeMb <= 0) {
+    return { valid: false, reason: 'EMPTY_FILE' };
+  }
+
+  if (file.sizeMb > 10) {
+    return { valid: false, reason: 'FILE_TOO_LARGE' };
+  }
+
+  return { valid: true };
+}

project/backend/tests/api-contract.spec.ts

@@ -0,0 +1,36 @@
+import request from 'supertest';
+import { app } from '../src/app';
+
+describe('API contract smoke tests', () => {
+  it('returns JSON parse config shape', async () => {
+    const response = await request(app).get('/api/config/parse');
+
+    expect(response.status).toBe(200);
+    expect(response.body).toEqual({
+      appId: expect.any(String),
+      jsKey: expect.any(String),
+      serverUrl: expect.any(String)
+    });
+  });
+
+  it('does not expose Parse master key in public config', async () => {
+    const response = await request(app).get('/api/config/parse');
+
+    expect(response.body.masterKey).toBeUndefined();
+    expect(response.body.restApiKey).toBeUndefined();
+  });
+
+  it('returns 404 for unknown api route', async () => {
+    const response = await request(app).get('/api/unknown-resource');
+
+    expect(response.status).toBe(404);
+    expect(response.body.code).toBe('NOT_FOUND');
+  });
+
+  it('includes method and path in not found message', async () => {
+    const response = await request(app).post('/api/ghost');
+
+    expect(response.status).toBe(404);
+    expect(response.body.message).toContain('POST /api/ghost');
+  });
+});

project/backend/tests/quality-rules.spec.ts

@@ -0,0 +1,136 @@
+import {
+  allowedNextStatuses,
+  canReadTicket,
+  canTransition,
+  isSlaOverdue,
+  resolveDeadline,
+  slaStatus,
+  validateAttachment
+} from '../src/services/quality-rules';
+
+describe('ticket status rules', () => {
+  it('allows pending ticket to enter processing', () => {
+    expect(canTransition('pending', 'processing')).toBe(true);
+  });
+
+  it('allows pending ticket to be cancelled', () => {
+    expect(canTransition('pending', 'cancelled')).toBe(true);
+  });
+
+  it('rejects pending ticket resolved directly', () => {
+    expect(canTransition('pending', 'resolved')).toBe(false);
+  });
+
+  it('allows processing ticket to submit customer confirmation', () => {
+    expect(canTransition('processing', 'confirming')).toBe(true);
+  });
+
+  it('allows customer to return confirming ticket to processing', () => {
+    expect(canTransition('confirming', 'processing')).toBe(true);
+  });
+
+  it('allows customer to resolve confirming ticket', () => {
+    expect(canTransition('confirming', 'resolved')).toBe(true);
+  });
+
+  it('rejects closed ticket reopening through status machine', () => {
+    expect(canTransition('closed', 'processing')).toBe(false);
+  });
+
+  it('returns immutable next status list', () => {
+    const next = allowedNextStatuses('pending');
+    next.push('closed');
+    expect(allowedNextStatuses('pending')).toEqual(['processing', 'cancelled']);
+  });
+});
+
+describe('permission rules', () => {
+  const acl = {
+    creatorId: 'customer-1',
+    ownerId: 'engineer-1',
+    companyUserIds: ['customer-1', 'customer-2']
+  };
+
+  it('allows admin to read every ticket', () => {
+    expect(canReadTicket('admin-1', 'admin', acl)).toBe(true);
+  });
+
+  it('allows support to read every ticket', () => {
+    expect(canReadTicket('support-1', 'support', acl)).toBe(true);
+  });
+
+  it('allows ticket owner engineer to read assigned ticket', () => {
+    expect(canReadTicket('engineer-1', 'engineer', acl)).toBe(true);
+  });
+
+  it('rejects unrelated engineer', () => {
+    expect(canReadTicket('engineer-2', 'engineer', acl)).toBe(false);
+  });
+
+  it('allows creator customer to read own ticket', () => {
+    expect(canReadTicket('customer-1', 'customer', acl)).toBe(true);
+  });
+
+  it('allows same company customer to read company ticket', () => {
+    expect(canReadTicket('customer-2', 'customer', acl)).toBe(true);
+  });
+
+  it('rejects unrelated customer', () => {
+    expect(canReadTicket('customer-3', 'customer', acl)).toBe(false);
+  });
+});
+
+describe('SLA rules', () => {
+  const createdAt = new Date('2026-06-01T00:00:00.000Z');
+
+  it('calculates urgent deadline within 4 hours', () => {
+    expect(resolveDeadline({ priority: 'urgent', createdAt }).toISOString()).toBe('2026-06-01T04:00:00.000Z');
+  });
+
+  it('calculates high priority deadline within 24 hours', () => {
+    expect(resolveDeadline({ priority: 'high', createdAt }).toISOString()).toBe('2026-06-02T00:00:00.000Z');
+  });
+
+  it('marks unresolved ticket overdue after deadline', () => {
+    expect(isSlaOverdue({ priority: 'urgent', createdAt, now: new Date('2026-06-01T04:01:00.000Z') })).toBe(true);
+  });
+
+  it('keeps ticket normal before warning window', () => {
+    expect(slaStatus({ priority: 'high', createdAt, now: new Date('2026-06-01T12:00:00.000Z') })).toBe('normal');
+  });
+
+  it('marks ticket warning in last 20 percent time window', () => {
+    expect(slaStatus({ priority: 'high', createdAt, now: new Date('2026-06-01T20:00:00.000Z') })).toBe('warning');
+  });
+
+  it('marks ticket overdue when resolved after deadline', () => {
+    expect(isSlaOverdue({
+      priority: 'urgent',
+      createdAt,
+      now: new Date('2026-06-01T03:00:00.000Z'),
+      resolvedAt: new Date('2026-06-01T04:30:00.000Z')
+    })).toBe(true);
+  });
+});
+
+describe('attachment validation rules', () => {
+  it('accepts png attachment under 10MB', () => {
+    expect(validateAttachment({ name: 'error.png', sizeMb: 2 }).valid).toBe(true);
+  });
+
+  it('accepts log attachment under 10MB', () => {
+    expect(validateAttachment({ name: 'console.log', sizeMb: 0.5 }).valid).toBe(true);
+  });
+
+  it('rejects unsupported executable file', () => {
+    expect(validateAttachment({ name: 'tool.exe', sizeMb: 1 })).toEqual({ valid: false, reason: 'UNSUPPORTED_TYPE' });
+  });
+
+  it('rejects empty file', () => {
+    expect(validateAttachment({ name: 'empty.pdf', sizeMb: 0 })).toEqual({ valid: false, reason: 'EMPTY_FILE' });
+  });
+
+  it('rejects file larger than 10MB', () => {
+    expect(validateAttachment({ name: 'large.pdf', sizeMb: 10.1 })).toEqual({ valid: false, reason: 'FILE_TOO_LARGE' });
+  });
+});

project/frontend/scripts/static-preview.cjs

@@ -0,0 +1,26 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..', 'dist', 'frontend', 'browser');
+const port = Number(process.env.PORT || 4301);
+
+const types = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.ico': 'image/x-icon'
+};
+
+http.createServer((req, res) => {
+  const urlPath = decodeURIComponent((req.url || '/').split('?')[0]);
+  const candidate = path.join(root, urlPath === '/' ? 'index.html' : urlPath);
+  const safePath = candidate.startsWith(root) && fs.existsSync(candidate) && fs.statSync(candidate).isFile()
+    ? candidate
+    : path.join(root, 'index.html');
+
+  res.setHeader('Content-Type', types[path.extname(safePath)] || 'application/octet-stream');
+  fs.createReadStream(safePath).pipe(res);
+}).listen(port, '127.0.0.1', () => {
+  console.log(`Static preview ready: http://127.0.0.1:${port}`);
+});

project/frontend/src/app/app.html

@@ -1,14 +1,17 @@
 <header class="app-header">
-  <a class="brand" routerLink="/dashboard">ServicePilot</a>
-  <nav>
-    <a routerLink="/dashboard">工作台</a>
-    <a routerLink="/tickets">工单管理</a>
-    <a routerLink="/sla">SLA 管理</a>
-    <a routerLink="/knowledge">知识库</a>
-    <a routerLink="/files">附件管理</a>
-    <a routerLink="/reviews">满意度</a>
-    <a routerLink="/test-plan">测试计划</a>
-    <a routerLink="/login">登录</a>
+  <a class="brand" routerLink="/dashboard">
+    <span>SP</span>
+    <strong>ServicePilot</strong>
+  </a>
+  <nav aria-label="主导航">
+    <a routerLink="/dashboard" routerLinkActive="is-active">工作台</a>
+    <a routerLink="/tickets" routerLinkActive="is-active">工单管理</a>
+    <a routerLink="/sla" routerLinkActive="is-active">SLA 管理</a>
+    <a routerLink="/knowledge" routerLinkActive="is-active">知识库</a>
+    <a routerLink="/files" routerLinkActive="is-active">附件管理</a>
+    <a routerLink="/reviews" routerLinkActive="is-active">满意度</a>
+    <a routerLink="/test-plan" routerLinkActive="is-active">测试计划</a>
+    <a routerLink="/login" routerLinkActive="is-active">登录</a>
   </nav>
 </header>
 

project/frontend/src/app/app.scss

@@ -1,48 +1,66 @@
 .app-header {
   align-items: center;
   backdrop-filter: blur(18px);
-  background: rgba(255, 255, 255, 0.82);
-  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
   display: flex;
-  gap: 28px;
+  gap: 24px;
   justify-content: space-between;
-  min-height: 64px;
-  padding: 0 28px;
+  min-height: 62px;
+  padding: 0 26px;
   position: sticky;
   top: 0;
   z-index: 20;
 }
 
 .brand {
-  color: #174ea6;
-  font-size: 18px;
-  font-weight: 900;
-  letter-spacing: 0.01em;
+  align-items: center;
+  color: #101828;
+  display: inline-flex;
+  gap: 10px;
   text-decoration: none;
 }
 
+.brand span {
+  align-items: center;
+  background: #174ea6;
+  border-radius: 6px;
+  color: #fff;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 900;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+
+.brand strong {
+  font-size: 17px;
+}
+
 nav {
+  align-items: center;
   display: flex;
   flex-wrap: wrap;
-  gap: 18px;
+  gap: 4px;
 }
 
 nav a {
-  border-radius: 999px;
-  color: #4b5563;
+  border-radius: 6px;
+  color: #475467;
   font-size: 14px;
-  padding: 8px 10px;
+  font-weight: 700;
+  padding: 9px 11px;
   text-decoration: none;
-  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
 }
 
-nav a:hover {
+nav a:hover,
+nav a.is-active {
   background: #eef4ff;
   color: #174ea6;
-  transform: translateY(-1px);
 }
 
-@media (max-width: 760px) {
+@media (max-width: 860px) {
   .app-header {
     align-items: flex-start;
     flex-direction: column;

project/frontend/src/app/app.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
-import { RouterLink, RouterOutlet } from '@angular/router';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterLink, RouterOutlet],
+  imports: [RouterLink, RouterLinkActive, RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

project/frontend/src/app/features/dashboard/dashboard.component.html

@@ -1,13 +1,13 @@
 <main class="dashboard-shell">
-  <section class="dashboard-hero">
-    <p class="eyebrow">ServicePilot</p>
-    <h1>智能客户工单与 SLA 履约管理平台</h1>
-    <p class="summary">
-      面向企业客服和技术支持团队，集中管理客户工单、SLA 风险、知识库和综合测试结果。
-    </p>
-    <div class="hero-actions">
-      <a href="/tickets">进入工单工作台</a>
-      <a class="secondary" href="/test-plan">查看测试计划</a>
+  <section class="console-head">
+    <div>
+      <p class="eyebrow">ServicePilot / 运营控制台</p>
+      <h1>客户服务履约与测试质量总览</h1>
+      <span>面向客服主管、技术支持和测试负责人，集中观察工单风险、SLA 履约、自动化测试结果和发布门禁。</span>
+    </div>
+    <div class="head-actions">
+      <a routerLink="/tickets">处理工单</a>
+      <a class="secondary" routerLink="/test-plan">测试计划</a>
     </div>
   </section>
 
@@ -18,44 +18,63 @@
   </section>
 
   <section class="dashboard-grid">
-    <section class="module-section">
+    <section class="module-table">
       <div class="section-head">
-        <p>业务模块</p>
-        <h2>按 PRD 拆分的核心工作区</h2>
+        <div>
+          <p>业务覆盖矩阵</p>
+          <h2>测试计划要求的功能模块均有页面承载</h2>
+        </div>
+        <app-status-badge label="7 个模块" tone="success"></app-status-badge>
+      </div>
+
+      <div class="table-head">
+        <span>模块</span>
+        <span>负责人</span>
+        <span>状态</span>
+        <span>入口</span>
       </div>
 
-      <div class="module-grid" aria-label="业务模块">
-        @for (module of modules; track module.title) {
-          <a class="module-card" [href]="module.path">
-            <span>{{ module.title.slice(0, 2) }}</span>
+      @for (module of modules; track module.title) {
+        <article class="data-row">
+          <div>
             <strong>{{ module.title }}</strong>
             <small>{{ module.desc }}</small>
-          </a>
-        }
-      </div>
+          </div>
+          <span>{{ module.owner }}</span>
+          <app-status-badge [label]="module.health" [tone]="module.health === '在线' ? 'success' : 'warning'"></app-status-badge>
+          <a [routerLink]="module.path">打开</a>
+        </article>
+      }
     </section>
 
-    <aside class="ops-panel">
+    <aside class="quality-panel">
       <div class="section-head">
-        <p>运营动态</p>
-        <h2>今日处理节奏</h2>
+        <div>
+          <p>发布门禁</p>
+          <h2>自动化测试级别对标</h2>
+        </div>
       </div>
 
-      <article class="ops-card is-hot">
-        <span>09:30</span>
-        <strong>紧急工单进入 SLA 风险队列</strong>
-        <p>接口 500 问题距离解决时限还剩 35 分钟。</p>
-      </article>
-      <article class="ops-card">
-        <span>10:15</span>
-        <strong>知识库文章被引用</strong>
-        <p>“报表导出失败处理指南”已被技术支持引用到处理记录。</p>
-      </article>
-      <article class="ops-card">
-        <span>11:20</span>
-        <strong>测试计划已更新</strong>
-        <p>接口测试 42 条、UI 自动化 6 条流程已纳入发布标准。</p>
-      </article>
+      @for (gate of qualityGates; track gate.name) {
+        <article class="gate-row">
+          <div>
+            <strong>{{ gate.name }}</strong>
+            <small>目标：{{ gate.target }}</small>
+          </div>
+          <span>{{ gate.actual }}</span>
+          <app-status-badge [label]="gate.status" [tone]="gate.status === '通过' ? 'success' : 'warning'"></app-status-badge>
+        </article>
+      }
     </aside>
   </section>
+
+  <section class="incident-strip">
+    @for (item of incidents; track item.time) {
+      <article class="incident-card">
+        <span>{{ item.time }} / {{ item.level }}</span>
+        <strong>{{ item.title }}</strong>
+        <p>{{ item.detail }}</p>
+      </article>
+    }
+  </section>
 </main>

project/frontend/src/app/features/dashboard/dashboard.component.scss

@@ -1,37 +1,32 @@
 .dashboard-shell {
   display: grid;
-  gap: 22px;
+  gap: 18px;
   margin: 0 auto;
-  max-width: 1280px;
-  padding: 34px 24px 64px;
+  max-width: 1420px;
+  padding: 24px 24px 60px;
 }
 
-.dashboard-hero {
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 246, 255, 0.94)),
-    #fff;
-  border: 1px solid rgba(213, 224, 242, 0.95);
+.console-head,
+.module-table,
+.quality-panel,
+.incident-card {
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid #e3e8f0;
   border-radius: 8px;
-  box-shadow: 0 24px 60px rgba(28, 53, 96, 0.08);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
+}
+
+.console-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+}
+
+.console-head div:first-child,
+.section-head div {
   display: grid;
-  gap: 16px;
-  min-height: 280px;
-  overflow: hidden;
-  padding: 34px;
-  position: relative;
-}
-
-.dashboard-hero::after {
-  background:
-    repeating-linear-gradient(90deg, rgba(40, 100, 201, 0.08) 0 1px, transparent 1px 72px),
-    repeating-linear-gradient(0deg, rgba(40, 100, 201, 0.06) 0 1px, transparent 1px 72px);
-  content: "";
-  inset: auto 0 0 auto;
-  height: 170px;
-  opacity: 0.8;
-  pointer-events: none;
-  position: absolute;
-  width: 46%;
+  gap: 7px;
 }
 
 .eyebrow,
@@ -39,9 +34,7 @@
   color: #1f5fbf;
   font-size: 13px;
   font-weight: 900;
-  letter-spacing: 0.1em;
   margin: 0;
-  text-transform: uppercase;
 }
 
 h1,
@@ -52,163 +45,151 @@ p {
 
 h1 {
   color: #101828;
-  font-size: 48px;
-  letter-spacing: 0;
-  line-height: 1.12;
-  max-width: 780px;
+  font-size: 30px;
+  line-height: 1.18;
 }
 
-.summary {
-  color: #526071;
-  font-size: 17px;
-  line-height: 1.7;
-  max-width: 720px;
+h2 {
+  color: #111827;
+  font-size: 20px;
 }
 
-.hero-actions {
+.console-head span,
+small,
+.incident-card p {
+  color: #667085;
+  line-height: 1.55;
+}
+
+.head-actions {
   display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 8px;
+  gap: 10px;
 }
 
-.hero-actions a {
+.head-actions a,
+.data-row a {
   background: #174ea6;
   border-radius: 6px;
   color: #fff;
   font-weight: 800;
-  padding: 12px 16px;
+  padding: 10px 14px;
   text-decoration: none;
 }
 
-.hero-actions .secondary {
+.head-actions .secondary {
   background: #eaf1ff;
   color: #174ea6;
 }
 
 .metric-grid {
   display: grid;
-  gap: 16px;
+  gap: 14px;
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
 .dashboard-grid {
   align-items: start;
   display: grid;
-  gap: 22px;
-  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) 380px;
 }
 
-.module-section,
-.ops-panel {
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid #e4e9f2;
-  border-radius: 8px;
-  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.05);
+.module-table,
+.quality-panel {
   display: grid;
-  gap: 18px;
-  padding: 22px;
+  gap: 12px;
+  padding: 18px;
 }
 
-.section-head {
+.section-head,
+.data-row,
+.gate-row {
+  align-items: center;
   display: grid;
-  gap: 6px;
+  gap: 14px;
 }
 
-.section-head h2 {
-  color: #111827;
-  font-size: 22px;
+.section-head {
+  grid-template-columns: 1fr auto;
 }
 
-.module-grid {
-  display: grid;
-  gap: 14px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+.table-head,
+.data-row {
+  grid-template-columns: minmax(320px, 1fr) 110px 100px 76px;
 }
 
-.module-card {
-  background: #fff;
+.table-head {
+  background: #f8fafc;
   border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  color: inherit;
+  border-radius: 6px;
+  color: #475467;
   display: grid;
-  gap: 10px;
-  min-height: 148px;
-  padding: 18px;
-  text-decoration: none;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
+  font-size: 13px;
+  font-weight: 900;
+  padding: 10px 12px;
 }
 
-.module-card:hover {
-  border-color: #93c5fd;
-  box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
-  transform: translateY(-2px);
+.data-row,
+.gate-row {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 13px 12px;
 }
 
-.module-card span {
-  align-items: center;
-  background: #eef4ff;
-  border-radius: 8px;
-  color: #174ea6;
-  display: inline-flex;
-  font-weight: 900;
-  height: 38px;
-  justify-content: center;
-  width: 38px;
+.data-row div,
+.gate-row div {
+  display: grid;
+  gap: 5px;
 }
 
-.module-card strong {
-  color: #111827;
-  font-size: 19px;
+.data-row strong,
+.gate-row strong,
+.incident-card strong {
+  color: #101828;
 }
 
-.module-card small {
-  color: #667085;
-  font-size: 14px;
-  line-height: 1.55;
+.data-row > span,
+.gate-row > span {
+  color: #344054;
+  font-weight: 800;
 }
 
-.ops-panel {
-  align-content: start;
+.gate-row {
+  grid-template-columns: 1fr auto auto;
 }
 
-.ops-card {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+.incident-strip {
   display: grid;
-  gap: 8px;
-  padding: 15px;
+  gap: 14px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.ops-card.is-hot {
-  background: #fff7ed;
-  border-color: #fed7aa;
+.incident-card {
+  display: grid;
+  gap: 8px;
+  padding: 16px;
 }
 
-.ops-card span {
+.incident-card span {
   color: #1f5fbf;
   font-size: 13px;
   font-weight: 900;
 }
 
-.ops-card strong {
-  color: #111827;
-}
-
-.ops-card p {
-  color: #667085;
-  font-size: 14px;
-  line-height: 1.55;
-}
-
-@media (max-width: 980px) {
+@media (max-width: 1100px) {
   .metric-grid,
   .dashboard-grid,
-  .module-grid {
+  .incident-strip,
+  .table-head,
+  .data-row {
     grid-template-columns: 1fr;
   }
+}
 
-  h1 {
-    font-size: 36px;
+@media (max-width: 760px) {
+  .console-head,
+  .head-actions {
+    align-items: flex-start;
+    flex-direction: column;
   }
 }

project/frontend/src/app/features/dashboard/dashboard.component.ts

@@ -1,36 +1,52 @@
 import { AfterViewInit, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 import { gsap } from 'gsap';
 import { MetricCardComponent } from '../../shared/metric-card.component';
+import { StatusBadgeComponent } from '../../shared/status-badge.component';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [MetricCardComponent],
+  imports: [RouterLink, MetricCardComponent, StatusBadgeComponent],
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss'
 })
 export class DashboardComponent implements AfterViewInit {
   readonly metrics = [
-    { label: '待处理工单', value: '128', hint: '含待分派、处理中、待客户确认' },
-    { label: 'SLA 达标率', value: '96%', hint: '达到发布标准', tone: 'success' as const },
-    { label: '平均解决时长', value: '3.4 小时', hint: '较上周下降 12%' },
-    { label: '客户满意度', value: '4.7 分', hint: '低分评价 2 条待跟进' }
+    { label: '待处理工单', value: '128', hint: '待分派 32 / 处理中 71 / 待确认 25' },
+    { label: 'SLA 达标率', value: '96.4%', hint: '发布门禁要求 >= 95%', tone: 'success' as const },
+    { label: '自动化用例', value: '31 条', hint: '后端 Jest 已通过 31/31', tone: 'success' as const },
+    { label: '风险缺陷', value: '0 个', hint: '阻塞/严重缺陷均为 0', tone: 'success' as const }
   ];
 
   readonly modules = [
-    { title: '工单管理', desc: '覆盖创建、分派、处理、确认和关闭完整流程。', path: '/tickets' },
-    { title: 'SLA 管理', desc: '配置响应时限、解决时限并识别超时工单。', path: '/sla' },
-    { title: '测试计划', desc: '沉淀单元、接口、性能和 UI 自动化测试范围。', path: '/test-plan' },
-    { title: '知识库', desc: '维护常见问题和标准解决方案。', path: '/knowledge' }
+    { title: '工单管理', owner: '客服/技术', health: '在线', desc: '创建、查询、分派、处理、确认和关闭完整流程。', path: '/tickets' },
+    { title: 'SLA 管理', owner: '客服主管', health: '在线', desc: '配置响应时限、解决时限并识别超时工单。', path: '/sla' },
+    { title: '知识库', owner: '技术支持', health: '在线', desc: '维护常见问题、标准方案和工单引用。', path: '/knowledge' },
+    { title: '附件管理', owner: '客户/客服', health: '在线', desc: '截图、日志、PDF 附件预览和下载限制。', path: '/files' },
+    { title: '满意度', owner: '客户成功', health: '在线', desc: '客户评分、低分回访和重复评价拦截。', path: '/reviews' },
+    { title: '测试计划', owner: '测试负责人', health: '已归档', desc: '单元、接口、性能、UI 自动化和发布标准。', path: '/test-plan' }
+  ];
+
+  readonly qualityGates = [
+    { name: '单元测试', target: '>= 95%', actual: '100%', status: '通过' },
+    { name: '接口契约测试', target: '>= 95%', actual: '100%', status: '通过' },
+    { name: 'UI 自动化流程', target: '6 条', actual: '规划完成', status: '待执行' },
+    { name: '性能压测', target: '5 场景', actual: '计划完成', status: '待执行' }
+  ];
+
+  readonly incidents = [
+    { time: '09:30', level: '高', title: '紧急工单进入 SLA 风险池', detail: '接口 500 问题距离解决时限还剩 35 分钟。' },
+    { time: '10:15', level: '中', title: '知识库文章被引用', detail: '“报表导出失败处理指南”已被技术支持引用。' },
+    { time: '11:20', level: '低', title: '自动化测试结果更新', detail: '后端 31 条 Jest 用例通过，结果可写入测试报告。' }
   ];
 
   ngAfterViewInit(): void {
     const timeline = gsap.timeline({ defaults: { ease: 'power3.out' } });
 
     timeline
-      .fromTo('.dashboard-hero > *', { y: 28, opacity: 0 }, { y: 0, opacity: 1, duration: 0.62, stagger: 0.08 })
-      .fromTo('.metric-grid app-metric-card', { y: 18, opacity: 0, scale: 0.98 }, { y: 0, opacity: 1, scale: 1, duration: 0.42, stagger: 0.06 }, '-=0.22')
-      .fromTo('.module-card', { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.42, stagger: 0.06 }, '-=0.2')
-      .fromTo('.ops-card', { x: -18, opacity: 0 }, { x: 0, opacity: 1, duration: 0.36, stagger: 0.06 }, '-=0.16');
+      .from('.console-head > *', { y: 14, duration: 0.36, stagger: 0.04 })
+      .from('.metric-grid app-metric-card', { y: 10, scale: 0.98, duration: 0.28, stagger: 0.035 }, '-=0.16')
+      .from('.data-row, .gate-row, .incident-card', { y: 8, duration: 0.24, stagger: 0.025 }, '-=0.1');
   }
 }

project/frontend/src/app/features/files/files.component.html

@@ -1,36 +1,65 @@
 <main class="files-page">
-  <section class="hero">
+  <section class="page-head">
     <div>
-      <p>附件管理</p>
-      <h1>工单证据与问题截图中心</h1>
-      <span>覆盖测试计划中的上传、预览、下载、文件类型和大小限制，React 图片预览组件在此模块独立落地。</span>
+      <p>附件管理 / 工单证据</p>
+      <h1>问题截图、日志与 PDF 证据中心</h1>
+      <span>覆盖上传、预览、下载、文件类型、大小限制和业务归属校验；React 图片预览组件在此独立落地。</span>
     </div>
     <button type="button" (click)="previewOpen = true">打开 React 预览</button>
   </section>
 
-  <section class="limit-grid">
-    @for (item of limits; track item.label) {
-      <article>
-        <span>{{ item.label }}</span>
-        <strong>{{ item.value }}</strong>
-      </article>
+  <section class="metric-grid">
+    @for (metric of metrics; track metric.label) {
+      <app-metric-card [label]="metric.label" [value]="metric.value" [hint]="metric.hint" [tone]="metric.tone ?? 'default'"></app-metric-card>
     }
   </section>
 
-  <section class="file-board">
-    <div class="section-title">
-      <h2>附件列表</h2>
-      <span>用于手工测试和 UI 自动化断言：文件名、工单归属、大小、状态。</span>
-    </div>
-    @for (file of files; track file.name) {
-      <article>
+  <section class="toolbar">
+    <label>文件名<input placeholder="搜索附件名称或工单编号" /></label>
+    <label>类型<select><option>全部类型</option><option>PNG</option><option>JPG</option><option>PDF</option><option>LOG</option></select></label>
+    <label>状态<select><option>全部状态</option><option>可预览</option><option>可下载</option><option>待审核</option></select></label>
+    <button type="button">查询</button>
+  </section>
+
+  <section class="workspace">
+    <section class="panel file-panel">
+      <div class="panel-title">
         <div>
+          <p>附件列表</p>
+          <h2>工单附件表</h2>
+        </div>
+        <app-status-badge label="4 个文件" tone="success"></app-status-badge>
+      </div>
+      <div class="table-head">
+        <span>文件</span><span>工单</span><span>客户</span><span>类型</span><span>大小</span><span>状态</span><span>操作</span>
+      </div>
+      @for (file of files; track file.name) {
+        <article class="file-row">
           <strong>{{ file.name }}</strong>
-          <span>{{ file.ticketNo }} / {{ file.size }}</span>
+          <span>{{ file.ticketNo }}</span>
+          <span>{{ file.owner }}</span>
+          <span>{{ file.type }}</span>
+          <span>{{ file.size }}</span>
+          <app-status-badge [label]="file.status" [tone]="statusTone(file.status)"></app-status-badge>
+          <button type="button" (click)="previewOpen = true">查看</button>
+        </article>
+      }
+    </section>
+
+    <aside class="panel">
+      <div class="panel-title">
+        <div>
+          <p>上传规则</p>
+          <h2>测试边界</h2>
         </div>
-        <em>{{ file.status }}</em>
-      </article>
-    }
+      </div>
+      @for (rule of rules; track rule.label) {
+        <article class="rule-card">
+          <span>{{ rule.label }}</span>
+          <strong>{{ rule.value }}</strong>
+        </article>
+      }
+    </aside>
   </section>
 
   @if (previewOpen) {

project/frontend/src/app/features/files/files.component.scss

@@ -2,31 +2,32 @@
   display: grid;
   gap: 18px;
   margin: 0 auto;
-  max-width: 1180px;
-  padding: 24px;
+  max-width: 1420px;
+  padding: 24px 24px 60px;
 }
 
-.hero,
-.file-board,
-.preview,
-.limit-grid article {
+.page-head,
+.toolbar,
+.panel,
+.preview {
   background: #fff;
   border: 1px solid #e3e8f0;
   border-radius: 8px;
   box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
 }
 
-.hero {
+.page-head {
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding: 24px;
 }
 
-.hero div,
-.section-title {
+.page-head div,
+.panel-title div,
+.rule-card {
   display: grid;
-  gap: 8px;
+  gap: 7px;
 }
 
 p,
@@ -35,82 +36,143 @@ h2 {
   margin: 0;
 }
 
-.hero p {
-  color: #2563eb;
+.page-head p,
+.panel-title p,
+.rule-card span {
+  color: #1f5fbf;
   font-size: 13px;
-  font-weight: 800;
+  font-weight: 900;
 }
 
-.hero span,
-.section-title span,
-.file-board article span {
+h1 {
+  font-size: 30px;
+  line-height: 1.18;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+.page-head span {
   color: #667085;
+  line-height: 1.55;
 }
 
-.hero button {
-  background: #1f5fbf;
+button {
+  background: #174ea6;
   border: 0;
   border-radius: 6px;
   color: #fff;
   cursor: pointer;
   font-weight: 800;
-  padding: 11px 16px;
+  padding: 10px 14px;
 }
 
-.limit-grid {
+.metric-grid {
   display: grid;
   gap: 14px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.limit-grid article,
-.file-board {
+.toolbar {
+  align-items: end;
   display: grid;
-  gap: 12px;
-  padding: 18px;
+  gap: 14px;
+  grid-template-columns: minmax(260px, 1fr) 160px 160px auto;
+  padding: 16px;
 }
 
-.limit-grid span {
-  color: #667085;
+label {
+  color: #344054;
+  display: grid;
+  gap: 8px;
   font-size: 13px;
+  font-weight: 800;
 }
 
-.limit-grid strong {
-  font-size: 22px;
+input,
+select {
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  padding: 10px 12px;
 }
 
-.file-board article {
+.workspace {
+  align-items: start;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) 320px;
+}
+
+.panel {
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+}
+
+.panel-title {
   align-items: center;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
   display: flex;
   justify-content: space-between;
-  padding: 14px;
 }
 
-.file-board article div {
+.table-head,
+.file-row {
   display: grid;
-  gap: 6px;
+  gap: 12px;
+  grid-template-columns: minmax(240px, 1fr) 140px 140px 70px 80px 90px 70px;
+}
+
+.table-head {
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #475467;
+  font-size: 13px;
+  font-weight: 900;
+  padding: 10px 12px;
+}
+
+.file-row,
+.rule-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 13px 12px;
 }
 
-.file-board em {
-  color: #1d4ed8;
-  font-style: normal;
+.file-row {
+  align-items: center;
+}
+
+.file-row span {
+  color: #344054;
   font-weight: 800;
 }
 
+.rule-card strong {
+  color: #101828;
+  font-size: 20px;
+}
+
 .preview {
   padding: 16px;
 }
 
-@media (max-width: 820px) {
-  .hero,
-  .file-board article {
-    align-items: flex-start;
-    flex-direction: column;
+@media (max-width: 1120px) {
+  .metric-grid,
+  .toolbar,
+  .workspace,
+  .table-head,
+  .file-row {
+    grid-template-columns: 1fr;
   }
+}
 
-  .limit-grid {
-    grid-template-columns: 1fr;
+@media (max-width: 720px) {
+  .page-head,
+  .panel-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
   }
 }

project/frontend/src/app/features/files/files.component.ts

@@ -1,28 +1,56 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
+import { gsap } from 'gsap';
 import { ImagePreviewWrapperComponent } from '../../react-wrappers/image-preview-wrapper.component';
 import { PreviewImage } from '../../../react-components/ImagePreview';
+import { MetricCardComponent } from '../../shared/metric-card.component';
+import { StatusBadgeComponent } from '../../shared/status-badge.component';
 
 @Component({
   selector: 'app-files',
   standalone: true,
-  imports: [ImagePreviewWrapperComponent],
+  imports: [ImagePreviewWrapperComponent, MetricCardComponent, StatusBadgeComponent],
   templateUrl: './files.component.html',
   styleUrl: './files.component.scss'
 })
-export class FilesComponent {
+export class FilesComponent implements AfterViewInit {
   previewOpen = false;
-  readonly limits = [
-    { label: '允许类型', value: 'PNG / JPG / PDF / LOG' },
-    { label: '单文件大小', value: '<= 10MB' },
-    { label: '业务归属', value: '必须绑定工单' }
+
+  readonly metrics = [
+    { label: '附件总数', value: '86', hint: '截图 42 / PDF 18 / 日志 26' },
+    { label: '审核通过率', value: '97%', hint: '非法类型自动拦截', tone: 'success' as const },
+    { label: '待审核', value: '3', hint: '需客服确认业务归属', tone: 'warning' as const },
+    { label: '最大限制', value: '10MB', hint: 'PNG/JPG/PDF/LOG' }
   ];
+
   readonly files = [
-    { name: '登录失败截图.png', ticketNo: 'TK-20260601-108', size: '1.8MB', status: '可预览' },
-    { name: '接口响应日志.log', ticketNo: 'TK-20260601-214', size: '420KB', status: '可下载' },
-    { name: '月报导出异常.pdf', ticketNo: 'TK-20260601-332', size: '3.2MB', status: '待审核' }
+    { name: '登录失败截图.png', ticketNo: 'TK-20260601-108', owner: '华东云启科技', size: '1.8MB', type: 'PNG', status: '可预览' },
+    { name: '接口响应日志.log', ticketNo: 'TK-20260601-214', owner: '北辰制造', size: '420KB', type: 'LOG', status: '可下载' },
+    { name: '月报导出异常.pdf', ticketNo: 'TK-20260601-332', owner: '汇联数据服务', size: '3.2MB', type: 'PDF', status: '待审核' },
+    { name: '控制台报错截图.jpg', ticketNo: 'TK-20260601-417', owner: '华东云启科技', size: '980KB', type: 'JPG', status: '可预览' }
+  ];
+
+  readonly rules = [
+    { label: '类型限制', value: 'PNG / JPG / PDF / LOG' },
+    { label: '大小限制', value: '<= 10MB' },
+    { label: '业务归属', value: '必须绑定工单编号' }
   ];
+
   readonly images: PreviewImage[] = [
     { id: 'file-1', name: '登录失败截图.png', url: 'https://dummyimage.com/960x540/e5e7eb/111827&text=Login+Error' },
     { id: 'file-2', name: '导出异常截图.png', url: 'https://dummyimage.com/960x540/fef3c7/92400e&text=Export+Error' }
   ];
+
+  ngAfterViewInit(): void {
+    gsap.from('.file-row, .rule-card', { y: 8, duration: 0.24, stagger: 0.025, ease: 'power2.out' });
+  }
+
+  statusTone(status: string): 'default' | 'success' | 'warning' {
+    if (status === '待审核') {
+      return 'warning';
+    }
+    if (status === '可预览') {
+      return 'success';
+    }
+    return 'default';
+  }
 }

project/frontend/src/app/features/knowledge/knowledge.component.html

@@ -1,37 +1,65 @@
 <main class="knowledge-page">
-  <app-page-header
-    eyebrow="知识库"
-    title="常见问题与标准解决方案"
-    description="支持分类筛选、关键词搜索、文章维护，并可在工单处理时引用，减少重复沟通和处理时长。"
-    actionText="新增文章"
-  ></app-page-header>
+  <section class="page-head">
+    <div>
+      <p>知识库 / 方案运营</p>
+      <h1>常见问题与标准解决方案</h1>
+      <span>支持分类筛选、关键词搜索、文章审核和工单引用，减少重复沟通并提升解决效率。</span>
+    </div>
+    <button type="button">新增文章</button>
+  </section>
+
+  <section class="metric-grid">
+    @for (metric of metrics; track metric.label) {
+      <app-metric-card [label]="metric.label" [value]="metric.value" [hint]="metric.hint" [tone]="metric.tone ?? 'default'"></app-metric-card>
+    }
+  </section>
 
   <section class="toolbar">
-    <input placeholder="搜索文章标题、标签或问题关键词" />
-    <select>
-      <option>全部分类</option>
-      <option>软件问题</option>
-      <option>账号问题</option>
-      <option>数据问题</option>
-    </select>
-    <button type="button">新增文章</button>
+    <label>关键词<input placeholder="搜索标题、标签或问题现象" /></label>
+    <label>分类<select><option>全部分类</option><option>软件问题</option><option>账号问题</option><option>数据问题</option></select></label>
+    <label>可见范围<select><option>全部范围</option><option>客户可见</option><option>内部可见</option></select></label>
+    <button type="button">查询</button>
   </section>
 
-  <section class="article-grid">
-    @for (article of articles; track article.title) {
-      <article>
+  <section class="workspace">
+    <section class="panel article-panel">
+      <div class="panel-title">
         <div>
-          <span>{{ article.category }}</span>
+          <p>文章管理</p>
+          <h2>知识库文章表</h2>
+        </div>
+        <app-status-badge label="4 条示例" tone="success"></app-status-badge>
+      </div>
+      <div class="table-head">
+        <span>标题</span><span>分类</span><span>负责人</span><span>可见范围</span><span>引用</span><span>状态</span><span>更新</span>
+      </div>
+      @for (article of articles; track article.title) {
+        <article class="article-row">
           <strong>{{ article.title }}</strong>
+          <span>{{ article.category }}</span>
+          <span>{{ article.owner }}</span>
+          <app-status-badge [label]="article.visible" [tone]="visibleTone(article.visible)"></app-status-badge>
+          <span>{{ article.usage }} 次</span>
+          <app-status-badge [label]="article.status" [tone]="statusTone(article.status)"></app-status-badge>
+          <span>{{ article.updatedAt }}</span>
+        </article>
+      }
+    </section>
+
+    <aside class="panel">
+      <div class="panel-title">
+        <div>
+          <p>分类洞察</p>
+          <h2>高频问题分布</h2>
         </div>
-        <app-status-badge [label]="article.visible" [tone]="article.visible === '内部可见' ? 'warning' : 'success'"></app-status-badge>
-        <p>建议用于工单处理回复、客户自助查询和测试用例中的知识库引用场景。</p>
-        <footer>
-          @for (tag of article.tags; track tag) {
-            <em>{{ tag }}</em>
-          }
-        </footer>
-      </article>
-    }
+      </div>
+      @for (category of categories; track category.name) {
+        <article class="category-card">
+          <strong>{{ category.name }}</strong>
+          <span>{{ category.count }} 篇文章</span>
+          <em>{{ category.trend }}</em>
+        </article>
+      }
+    </aside>
   </section>
 </main>

project/frontend/src/app/features/knowledge/knowledge.component.scss

@@ -1,92 +1,178 @@
 .knowledge-page {
   display: grid;
-  gap: 22px;
+  gap: 18px;
   margin: 0 auto;
-  max-width: 1120px;
-  padding: 32px 24px 56px;
+  max-width: 1420px;
+  padding: 24px 24px 60px;
 }
 
+.page-head,
 .toolbar,
-article {
+.panel {
   background: #fff;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #e3e8f0;
   border-radius: 8px;
-  padding: 20px;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
+}
+
+.page-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+}
+
+.page-head div,
+.panel-title div {
+  display: grid;
+  gap: 7px;
 }
 
+p,
 h1,
-p {
+h2 {
   margin: 0;
 }
 
-article p {
-  color: #6b7280;
+.page-head p,
+.panel-title p {
+  color: #1f5fbf;
+  font-size: 13px;
+  font-weight: 900;
 }
 
-.toolbar {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: 1fr 180px 120px;
+h1 {
+  font-size: 30px;
+  line-height: 1.18;
 }
 
-input,
-select,
-button {
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  padding: 10px 12px;
+h2 {
+  font-size: 20px;
+}
+
+.page-head span,
+.category-card span {
+  color: #667085;
+  line-height: 1.55;
 }
 
 button {
-  background: #2864c9;
+  background: #174ea6;
   border: 0;
+  border-radius: 6px;
   color: #fff;
-  font-weight: 700;
+  cursor: pointer;
+  font-weight: 800;
+  padding: 10px 14px;
 }
 
-.article-grid {
+.metric-grid {
   display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-article {
+.toolbar {
+  align-items: end;
   display: grid;
-  gap: 16px;
+  gap: 14px;
+  grid-template-columns: minmax(260px, 1fr) 180px 180px auto;
+  padding: 16px;
 }
 
-article div {
+label {
+  color: #344054;
   display: grid;
   gap: 8px;
+  font-size: 13px;
+  font-weight: 800;
 }
 
-article span {
-  color: #2864c9;
-  font-size: 13px;
-  font-weight: 700;
+input,
+select {
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  padding: 10px 12px;
 }
 
-article strong {
-  font-size: 18px;
+.workspace {
+  align-items: start;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) 320px;
 }
 
-footer {
+.panel {
+  display: grid;
+  gap: 12px;
+  padding: 18px;
+}
+
+.panel-title {
+  align-items: center;
   display: flex;
+  justify-content: space-between;
+}
+
+.table-head,
+.article-row {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(260px, 1fr) 100px 90px 100px 80px 90px 100px;
+}
+
+.table-head {
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #475467;
+  font-size: 13px;
+  font-weight: 900;
+  padding: 10px 12px;
+}
+
+.article-row,
+.category-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 13px 12px;
+}
+
+.article-row {
+  align-items: center;
+}
+
+.article-row span {
+  color: #344054;
+  font-weight: 800;
+}
+
+.category-card {
+  display: grid;
   gap: 8px;
 }
 
-em {
-  background: #eff6ff;
-  border-radius: 999px;
-  color: #1d4ed8;
-  font-size: 12px;
+.category-card em {
+  color: #15803d;
   font-style: normal;
-  padding: 4px 8px;
+  font-weight: 900;
 }
 
-@media (max-width: 860px) {
+@media (max-width: 1120px) {
+  .metric-grid,
   .toolbar,
-  .article-grid {
+  .workspace,
+  .table-head,
+  .article-row {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 720px) {
+  .page-head,
+  .panel-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+  }
+}

project/frontend/src/app/features/knowledge/knowledge.component.ts

@@ -1,18 +1,45 @@
-import { Component } from '@angular/core';
-import { PageHeaderComponent } from '../../shared/page-header.component';
+import { AfterViewInit, Component } from '@angular/core';
+import { gsap } from 'gsap';
+import { MetricCardComponent } from '../../shared/metric-card.component';
 import { StatusBadgeComponent } from '../../shared/status-badge.component';
 
 @Component({
   selector: 'app-knowledge',
   standalone: true,
-  imports: [PageHeaderComponent, StatusBadgeComponent],
+  imports: [MetricCardComponent, StatusBadgeComponent],
   templateUrl: './knowledge.component.html',
   styleUrl: './knowledge.component.scss'
 })
-export class KnowledgeComponent {
+export class KnowledgeComponent implements AfterViewInit {
+  readonly metrics = [
+    { label: '已发布文章', value: '42', hint: '客户可见 31 / 内部可见 11', tone: 'success' as const },
+    { label: '本周引用', value: '128', hint: '工单回复引用次数' },
+    { label: '平均解决时长', value: '-18%', hint: '引用知识库后的处理效率' },
+    { label: '待审核文章', value: '5', hint: '需要技术负责人复核', tone: 'warning' as const }
+  ];
+
   readonly articles = [
-    { title: '报表导出失败处理指南', category: '数据问题', tags: ['报表', '导出'], visible: '客户可见' },
-    { title: '账号首次登录异常排查', category: '账号问题', tags: ['登录', '权限'], visible: '客户可见' },
-    { title: '接口 500 错误定位流程', category: '软件问题', tags: ['接口', '日志'], visible: '内部可见' }
+    { title: '报表导出失败处理指南', category: '数据问题', owner: '陈敏', visible: '客户可见', status: '已发布', usage: 36, updatedAt: '2026-06-01' },
+    { title: '账号首次登录异常排查', category: '账号问题', owner: '李航', visible: '客户可见', status: '已发布', usage: 24, updatedAt: '2026-05-29' },
+    { title: '接口 500 错误定位流程', category: '软件问题', owner: '王敏', visible: '内部可见', status: '已发布', usage: 19, updatedAt: '2026-05-28' },
+    { title: '客户数据同步延迟处理 SOP', category: '数据问题', owner: '陈敏', visible: '内部可见', status: '审核中', usage: 7, updatedAt: '2026-06-02' }
+  ];
+
+  readonly categories = [
+    { name: '软件问题', count: 18, trend: '+12%' },
+    { name: '账号问题', count: 9, trend: '+4%' },
+    { name: '数据问题', count: 15, trend: '+21%' }
   ];
+
+  ngAfterViewInit(): void {
+    gsap.from('.article-row, .category-card', { y: 8, duration: 0.24, stagger: 0.025, ease: 'power2.out' });
+  }
+
+  statusTone(status: string): 'success' | 'warning' {
+    return status === '已发布' ? 'success' : 'warning';
+  }
+
+  visibleTone(visible: string): 'success' | 'warning' {
+    return visible === '客户可见' ? 'success' : 'warning';
+  }
 }

project/frontend/src/app/features/reviews/reviews.component.html

@@ -1,40 +1,71 @@
 <main class="reviews-page">
-  <section class="hero">
+  <section class="page-head">
     <div>
-      <p>满意度评价</p>
-      <h1>客户确认与服务评分</h1>
-      <span>覆盖测试计划中的评分边界、重复评价、评价统计和 React 星级评分组件。</span>
+      <p>满意度评价 / 客户成功</p>
+      <h1>客户确认、评分与低分回访</h1>
+      <span>覆盖评分边界、重复评价、低分回访和满意度统计；React 星级评分组件作为核心交互组件落地。</span>
     </div>
+    <button type="button">导出评价</button>
   </section>
 
-  <section class="review-grid">
-    <article class="score-card">
-      <span>当前评价</span>
-      <app-rating-wrapper [(value)]="score"></app-rating-wrapper>
-      <textarea [(ngModel)]="comment" name="comment"></textarea>
-      <button type="button">提交评价</button>
-    </article>
+  <section class="metric-grid">
+    @for (metric of metrics; track metric.label) {
+      <app-metric-card [label]="metric.label" [value]="metric.value" [hint]="metric.hint" [tone]="metric.tone ?? 'default'"></app-metric-card>
+    }
+  </section>
+
+  <section class="workspace">
+    <section class="panel submit-panel">
+      <div class="panel-title">
+        <div>
+          <p>评价提交</p>
+          <h2>React 星级评分</h2>
+        </div>
+        <app-status-badge label="React 组件" tone="success"></app-status-badge>
+      </div>
+      <div class="rating-box">
+        <app-rating-wrapper [(value)]="score"></app-rating-wrapper>
+        <textarea [(ngModel)]="comment" name="comment"></textarea>
+        <button type="button">提交评价</button>
+      </div>
+    </section>
 
-    <article class="summary-card">
-      <span>评价标准</span>
-      <strong>1-5 分边界校验</strong>
-      <p>已解决工单才允许评价，同一客户同一工单只能评价一次，低分评价进入客服回访队列。</p>
-    </article>
+    <aside class="panel">
+      <div class="panel-title">
+        <div>
+          <p>测试边界</p>
+          <h2>评价规则</h2>
+        </div>
+      </div>
+      @for (rule of rules; track rule.title) {
+        <article class="rule-card">
+          <strong>{{ rule.title }}</strong>
+          <span>{{ rule.desc }}</span>
+        </article>
+      }
+    </aside>
   </section>
 
-  <section class="review-list">
-    <div class="section-title">
-      <h2>评价记录</h2>
-      <span>用于统计满意度均值、低分回访和重复评价拦截。</span>
+  <section class="panel review-panel">
+    <div class="panel-title">
+      <div>
+        <p>评价记录</p>
+        <h2>客户评价与回访队列</h2>
+      </div>
+      <app-status-badge label="4 条记录" tone="success"></app-status-badge>
+    </div>
+    <div class="table-head">
+      <span>工单</span><span>客户</span><span>负责人</span><span>评分</span><span>标签</span><span>状态</span><span>更新</span>
     </div>
     @for (review of reviews; track review.ticketNo) {
-      <article>
-        <div>
-          <strong>{{ review.ticketNo }}</strong>
-          <span>{{ review.customer }}</span>
-        </div>
+      <article class="review-row">
+        <strong>{{ review.ticketNo }}</strong>
+        <span>{{ review.customer }}</span>
+        <span>{{ review.owner }}</span>
         <em>{{ review.score }} 分</em>
-        <small>{{ review.tag }}</small>
+        <span>{{ review.tag }}</span>
+        <app-status-badge [label]="review.status" [tone]="statusTone(review.status)"></app-status-badge>
+        <span>{{ review.updatedAt }}</span>
       </article>
     }
   </section>

project/frontend/src/app/features/reviews/reviews.component.scss

@@ -2,27 +2,30 @@
   display: grid;
   gap: 18px;
   margin: 0 auto;
-  max-width: 1180px;
-  padding: 24px;
+  max-width: 1420px;
+  padding: 24px 24px 60px;
 }
 
-.hero,
-.score-card,
-.summary-card,
-.review-list {
+.page-head,
+.panel {
   background: #fff;
   border: 1px solid #e3e8f0;
   border-radius: 8px;
   box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
 }
 
-.hero,
-.score-card,
-.summary-card,
-.review-list {
+.page-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+}
+
+.page-head div,
+.panel-title div,
+.rule-card {
   display: grid;
-  gap: 14px;
-  padding: 22px;
+  gap: 7px;
 }
 
 p,
@@ -31,85 +34,130 @@ h2 {
   margin: 0;
 }
 
-.hero p {
-  color: #2563eb;
+.page-head p,
+.panel-title p {
+  color: #1f5fbf;
   font-size: 13px;
-  font-weight: 800;
+  font-weight: 900;
 }
 
-.hero span,
-.review-list span,
-.section-title span,
-.summary-card p {
-  color: #667085;
-  line-height: 1.6;
+h1 {
+  font-size: 30px;
+  line-height: 1.18;
 }
 
-.review-grid {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: 1fr 1fr;
+h2 {
+  font-size: 20px;
 }
 
-.score-card span,
-.summary-card span {
+.page-head span,
+.rule-card span {
   color: #667085;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-textarea {
-  border: 1px solid #d0d5dd;
-  border-radius: 6px;
-  min-height: 88px;
-  padding: 10px 12px;
-  resize: vertical;
+  line-height: 1.55;
 }
 
 button {
-  background: #1f5fbf;
+  background: #174ea6;
   border: 0;
   border-radius: 6px;
   color: #fff;
   cursor: pointer;
   font-weight: 800;
-  padding: 11px 16px;
-  width: fit-content;
+  padding: 10px 14px;
+}
+
+.metric-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.workspace {
+  align-items: start;
+  display: grid;
+  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) 320px;
+}
+
+.panel {
+  display: grid;
+  gap: 12px;
+  padding: 18px;
 }
 
-.review-list article {
+.panel-title {
   align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.rating-box {
+  align-items: start;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 220px minmax(0, 1fr) auto;
+}
+
+textarea {
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  min-height: 80px;
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.rule-card {
   border: 1px solid #e5e7eb;
   border-radius: 8px;
-  display: grid;
-  gap: 10px;
-  grid-template-columns: 1fr auto auto;
-  padding: 14px;
+  padding: 13px 12px;
 }
 
-.review-list article div,
-.section-title {
+.table-head,
+.review-row {
   display: grid;
-  gap: 6px;
+  gap: 12px;
+  grid-template-columns: 150px minmax(160px, 1fr) 90px 70px 100px 90px 100px;
 }
 
-.review-list em {
-  color: #1d4ed8;
-  font-style: normal;
+.table-head {
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #475467;
+  font-size: 13px;
   font-weight: 900;
+  padding: 10px 12px;
+}
+
+.review-row {
+  align-items: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 13px 12px;
 }
 
-.review-list small {
-  background: #eef2ff;
-  border-radius: 999px;
-  color: #3730a3;
+.review-row span,
+.review-row em {
+  color: #344054;
+  font-style: normal;
   font-weight: 800;
-  padding: 6px 10px;
 }
 
-@media (max-width: 820px) {
-  .review-grid,
-  .review-list article {
+@media (max-width: 1120px) {
+  .metric-grid,
+  .workspace,
+  .rating-box,
+  .table-head,
+  .review-row {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 720px) {
+  .page-head,
+  .panel-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+  }
+}

project/frontend/src/app/features/reviews/reviews.component.ts

@@ -1,20 +1,52 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { gsap } from 'gsap';
 import { RatingWrapperComponent } from '../../react-wrappers/rating-wrapper.component';
+import { MetricCardComponent } from '../../shared/metric-card.component';
+import { StatusBadgeComponent } from '../../shared/status-badge.component';
 
 @Component({
   selector: 'app-reviews',
   standalone: true,
-  imports: [FormsModule, RatingWrapperComponent],
+  imports: [FormsModule, RatingWrapperComponent, MetricCardComponent, StatusBadgeComponent],
   templateUrl: './reviews.component.html',
   styleUrl: './reviews.component.scss'
 })
-export class ReviewsComponent {
+export class ReviewsComponent implements AfterViewInit {
   score = 5;
   comment = '响应及时，解决方案清晰。';
+
+  readonly metrics = [
+    { label: '平均满意度', value: '4.7', hint: '近 30 天客户评价均值', tone: 'success' as const },
+    { label: '评价完成率', value: '82%', hint: '已解决工单触发评价' },
+    { label: '低分评价', value: '2', hint: '需要客户成功回访', tone: 'warning' as const },
+    { label: '重复评价拦截', value: '6', hint: '同一客户同一工单只允许一次' }
+  ];
+
   readonly reviews = [
-    { ticketNo: 'TK-20260601-108', customer: '华东云启科技', score: 5, tag: '已回访' },
-    { ticketNo: 'TK-20260601-214', customer: '北辰制造', score: 4, tag: '待跟进' },
-    { ticketNo: 'TK-20260601-332', customer: '汇联数据服务', score: 3, tag: '已升级' }
+    { ticketNo: 'TK-20260601-108', customer: '华东云启科技', owner: '陈敏', score: 5, tag: '已回访', status: '已关闭', updatedAt: '2026-06-01' },
+    { ticketNo: 'TK-20260601-214', customer: '北辰制造', owner: '李航', score: 4, tag: '待跟进', status: '待回访', updatedAt: '2026-06-02' },
+    { ticketNo: 'TK-20260601-332', customer: '汇联数据服务', owner: '王敏', score: 3, tag: '已升级', status: '跟进中', updatedAt: '2026-06-02' },
+    { ticketNo: 'TK-20260601-417', customer: '华东云启科技', owner: '陈敏', score: 5, tag: '无需回访', status: '已关闭', updatedAt: '2026-06-03' }
   ];
+
+  readonly rules = [
+    { title: '评分边界', desc: 'React 星级组件限制 1-5 分' },
+    { title: '评价条件', desc: '仅已解决工单允许提交评价' },
+    { title: '重复拦截', desc: '同一客户同一工单只保存一次评价' }
+  ];
+
+  ngAfterViewInit(): void {
+    gsap.from('.review-row, .rule-card', { y: 8, duration: 0.24, stagger: 0.025, ease: 'power2.out' });
+  }
+
+  statusTone(status: string): 'success' | 'warning' | 'default' {
+    if (status === '已关闭') {
+      return 'success';
+    }
+    if (status.includes('回访') || status === '跟进中') {
+      return 'warning';
+    }
+    return 'default';
+  }
 }

project/frontend/src/app/features/sla/sla.component.html

@@ -1,105 +1,86 @@
 <main class="sla-page">
-  <app-page-header
-    eyebrow="SLA 管理"
-    title="响应时限、解决时限与超时告警"
-    description="按照 PRD 配置不同优先级规则，并对超时工单进行统计、催办和发布前质量判断。"
-    actionText="新增 SLA 规则"
-  ></app-page-header>
-
-  <section class="cards">
-    <app-metric-card label="SLA 总达标率" value="96%" hint="发布标准要求核心功能通过率不低于 95%" tone="success"></app-metric-card>
-    <app-metric-card label="首次响应达标率" value="98%" hint="以首次客服/技术回复时间计算"></app-metric-card>
-    <app-metric-card label="解决时限达标率" value="94%" hint="低于总达标率，需要关注高优先级工单" tone="warning"></app-metric-card>
-    <app-metric-card label="超时工单数" value="2" hint="1 条已超时，1 条即将超时" tone="warning"></app-metric-card>
+  <section class="page-head">
+    <div>
+      <p>SLA 管理 / 履约规则</p>
+      <h1>响应时限、解决时限与超时告警</h1>
+      <span>按优先级配置 SLA 规则，集中监控超时风险，并为性能测试和发布门禁提供统计依据。</span>
+    </div>
+    <button type="button">新增规则</button>
   </section>
 
-  <section class="sla-grid">
-    <section class="panel">
-      <div class="panel-title">
-        <h2>SLA 规则配置</h2>
-        <span>按优先级定义响应和解决时限</span>
-      </div>
-      <table>
-        <thead>
-          <tr><th>优先级</th><th>首次响应</th><th>解决时限</th><th>告警提前量</th><th>状态</th></tr>
-        </thead>
-        <tbody>
-          @for (rule of rules; track rule.priority) {
-            <tr>
-              <td><strong>{{ rule.priority }}</strong></td>
-              <td>{{ rule.response }}</td>
-              <td>{{ rule.resolve }}</td>
-              <td>{{ rule.alert }}</td>
-              <td><app-status-badge label="启用" tone="success"></app-status-badge></td>
-            </tr>
-          }
-        </tbody>
-      </table>
-    </section>
+  <section class="metric-grid">
+    @for (metric of metrics; track metric.label) {
+      <app-metric-card [label]="metric.label" [value]="metric.value" [hint]="metric.hint" [tone]="metric.tone ?? 'default'"></app-metric-card>
+    }
+  </section>
 
-    <section class="panel rule-form">
-      <div class="panel-title">
-        <h2>规则编辑</h2>
-        <span>用于演示 PRD 中的新增/编辑表单</span>
-      </div>
-      <label>优先级<select><option>紧急</option><option>高</option><option>中</option><option>低</option></select></label>
-      <label>首次响应时限<input value="30 分钟" /></label>
-      <label>解决时限<input value="8 小时" /></label>
-      <label>告警提前量<input value="60 分钟" /></label>
-      <button type="button">保存规则</button>
-    </section>
+  <section class="toolbar">
+    <label>优先级<select><option>全部优先级</option><option>紧急</option><option>高</option><option>中</option><option>低</option></select></label>
+    <label>状态<select><option>全部状态</option><option>启用</option><option>停用</option></select></label>
+    <label>负责人<input value="客服主管" /></label>
+    <button type="button">查询</button>
   </section>
 
-  <section class="bottom-grid">
-    <section class="panel">
+  <section class="workspace">
+    <section class="panel rules-panel">
       <div class="panel-title">
-        <h2>超时风险队列</h2>
-        <span>客服负责人优先处理该列表</span>
+        <div>
+          <p>规则配置</p>
+          <h2>SLA 规则表</h2>
+        </div>
+        <app-status-badge label="4 条规则" tone="success"></app-status-badge>
       </div>
-      <div class="risk-list">
-        @for (item of overdue; track item.id) {
-          <article>
-            <div>
-              <strong>{{ item.title }}</strong>
-              <span>{{ item.id }} · 负责人：{{ item.owner }}</span>
-            </div>
-            <app-status-badge [label]="item.type" [tone]="badgeTone(item.type)"></app-status-badge>
-            <small>{{ item.delay }}</small>
-          </article>
-        }
+      <div class="table-head">
+        <span>优先级</span><span>首次响应</span><span>解决时限</span><span>告警</span><span>负责人</span><span>状态</span>
       </div>
+      @for (rule of rules; track rule.priority) {
+        <article class="sla-row">
+          <strong>{{ rule.priority }}</strong>
+          <span>{{ rule.response }}</span>
+          <span>{{ rule.resolve }}</span>
+          <span>{{ rule.alert }}</span>
+          <span>{{ rule.owner }}</span>
+          <app-status-badge [label]="rule.status" tone="success"></app-status-badge>
+        </article>
+      }
     </section>
 
-    <section class="panel">
+    <aside class="panel">
       <div class="panel-title">
-        <h2>近五日达标趋势</h2>
-        <span>用于测试统计展示和图表数据准确性</span>
-      </div>
-      <div class="trend-list">
-        @for (item of trend; track item.day) {
-          <div>
-            <span>{{ item.day }}</span>
-            <p><i [style.width.%]="item.rate"></i></p>
-            <strong>{{ item.rate }}%</strong>
-          </div>
-        }
+        <div>
+          <p>测试关注</p>
+          <h2>边界与门禁</h2>
+        </div>
       </div>
-    </section>
+      @for (gate of gates; track gate.name) {
+        <article class="gate-card">
+          <strong>{{ gate.name }}</strong>
+          <span>{{ gate.desc }}</span>
+          <app-status-badge [label]="gate.status" tone="success"></app-status-badge>
+        </article>
+      }
+    </aside>
+  </section>
 
-    <section class="panel">
-      <div class="panel-title">
-        <h2>处理人排行</h2>
-        <span>按处理量和 SLA 达标率评估服务质量</span>
+  <section class="panel risk-panel">
+    <div class="panel-title">
+      <div>
+        <p>风险队列</p>
+        <h2>超时与即将超时工单</h2>
       </div>
-      <div class="owner-list">
-        @for (owner of owners; track owner.name) {
-          <article>
-            <strong>{{ owner.name }}</strong>
-            <span>{{ owner.tickets }} 单</span>
-            <app-status-badge [label]="owner.rate" tone="success"></app-status-badge>
-          </article>
-        }
-      </div>
-    </section>
+      <button type="button">批量催办</button>
+    </div>
+    <div class="risk-grid">
+      @for (item of risks; track item.id) {
+        <article class="risk-card">
+          <div>
+            <strong>{{ item.title }}</strong>
+            <span>{{ item.id }} / {{ item.priority }} / 负责人：{{ item.owner }}</span>
+          </div>
+          <app-status-badge [label]="item.type" [tone]="riskTone(item.type)"></app-status-badge>
+          <em>{{ item.remain }}</em>
+        </article>
+      }
+    </div>
   </section>
 </main>

project/frontend/src/app/features/sla/sla.component.scss

@@ -1,201 +1,185 @@
 .sla-page {
   display: grid;
-  gap: 24px;
+  gap: 18px;
   margin: 0 auto;
-  max-width: 1280px;
-  padding: 34px 24px 64px;
+  max-width: 1420px;
+  padding: 24px 24px 60px;
 }
 
-.panel,
-.rule-form {
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid #e4e9f2;
+.page-head,
+.toolbar,
+.panel {
+  background: #fff;
+  border: 1px solid #e3e8f0;
   border-radius: 8px;
-  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.045);
-  padding: 22px;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
 }
 
-h1,
-h2 {
-  margin: 0;
+.page-head {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
 }
 
-.panel-title {
+.page-head div,
+.panel-title div,
+.gate-card,
+.risk-card div {
   display: grid;
-  gap: 6px;
-  margin-bottom: 14px;
+  gap: 7px;
 }
 
-.panel-title span {
-  color: #6b7280;
-  font-size: 14px;
+p,
+h1,
+h2 {
+  margin: 0;
 }
 
-.cards {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+.page-head p,
+.panel-title p {
+  color: #1f5fbf;
+  font-size: 13px;
+  font-weight: 900;
 }
 
-.sla-grid {
-  display: grid;
-  gap: 18px;
-  grid-template-columns: minmax(0, 1fr) 320px;
+h1 {
+  font-size: 30px;
+  line-height: 1.18;
 }
 
-table {
-  border-collapse: collapse;
-  margin-top: 14px;
-  width: 100%;
+h2 {
+  font-size: 20px;
 }
 
-th,
-td {
-  border-bottom: 1px solid #e5e7eb;
-  padding: 14px 12px;
-  text-align: left;
+.page-head span,
+.gate-card span,
+.risk-card span {
+  color: #667085;
+  line-height: 1.55;
 }
 
-th {
-  background: #f8fafc;
-  color: #475467;
-  font-size: 14px;
+button {
+  background: #174ea6;
+  border: 0;
+  border-radius: 6px;
+  color: #fff;
+  cursor: pointer;
   font-weight: 800;
+  padding: 10px 14px;
 }
 
-tbody tr {
-  transition: background 0.16s ease;
-}
-
-tbody tr:hover {
-  background: #f8fbff;
+.metric-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.rule-form {
-  align-content: start;
+.toolbar {
+  align-items: end;
   display: grid;
-  gap: 12px;
+  gap: 14px;
+  grid-template-columns: 180px 180px 1fr auto;
+  padding: 16px;
 }
 
 label {
-  color: #374151;
+  color: #344054;
   display: grid;
-  gap: 6px;
-  font-size: 14px;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 800;
 }
 
 input,
 select {
-  border: 1px solid #d1d5db;
+  border: 1px solid #d0d5dd;
   border-radius: 6px;
   padding: 10px 12px;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease;
-}
-
-input:focus,
-select:focus {
-  border-color: #93c5fd;
-  box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.25);
-}
-
-button {
-  background: #174ea6;
-  border: 0;
-  border-radius: 6px;
-  box-shadow: 0 10px 22px rgba(23, 78, 166, 0.16);
-  color: #fff;
-  cursor: pointer;
-  font-weight: 700;
-  padding: 11px 14px;
 }
 
-.bottom-grid {
+.workspace {
+  align-items: start;
   display: grid;
   gap: 18px;
-  grid-template-columns: 1.2fr 1fr 0.85fr;
+  grid-template-columns: minmax(0, 1fr) 340px;
 }
 
-.risk-list,
-.owner-list {
+.panel {
   display: grid;
-  gap: 10px;
+  gap: 12px;
+  padding: 18px;
 }
 
-.risk-list article,
-.owner-list article {
+.panel-title {
   align-items: center;
-  background: #fbfcff;
-  border: 1px solid #e4e9f2;
-  border-radius: 8px;
-  display: grid;
-  gap: 10px;
-  padding: 14px;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
-}
-
-.risk-list article:hover,
-.owner-list article:hover {
-  border-color: #bfd0ee;
-  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
-  transform: translateY(-1px);
-}
-
-.risk-list article {
-  grid-template-columns: 1fr auto auto;
+  display: flex;
+  justify-content: space-between;
 }
 
-.risk-list div {
+.table-head,
+.sla-row {
   display: grid;
-  gap: 6px;
+  gap: 12px;
+  grid-template-columns: 100px 120px 120px 130px 120px 90px;
 }
 
-.risk-list span,
-.risk-list small,
-.owner-list span {
-  color: #6b7280;
+.table-head {
+  background: #f8fafc;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  color: #475467;
+  font-size: 13px;
+  font-weight: 900;
+  padding: 10px 12px;
 }
 
-.trend-list {
-  display: grid;
-  gap: 12px;
+.sla-row,
+.gate-card,
+.risk-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 13px 12px;
 }
 
-.trend-list div {
+.sla-row {
   align-items: center;
-  display: grid;
-  gap: 10px;
-  grid-template-columns: 48px 1fr 48px;
 }
 
-.trend-list span,
-.trend-list strong {
-  color: #4b5563;
-  font-size: 13px;
+.sla-row span,
+.risk-card em {
+  color: #344054;
+  font-style: normal;
+  font-weight: 800;
 }
 
-.trend-list p {
-  background: #edf2f7;
-  border-radius: 999px;
-  height: 10px;
-  margin: 0;
-  overflow: hidden;
+.risk-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.trend-list i {
-  background: linear-gradient(90deg, #174ea6, #16a34a);
-  border-radius: inherit;
-  display: block;
-  height: 100%;
+.risk-card {
+  display: grid;
+  gap: 12px;
 }
 
-.owner-list article {
-  grid-template-columns: 1fr auto auto;
+@media (max-width: 1120px) {
+  .metric-grid,
+  .toolbar,
+  .workspace,
+  .risk-grid,
+  .table-head,
+  .sla-row {
+    grid-template-columns: 1fr;
+  }
 }
 
-@media (max-width: 760px) {
-  .cards,
-  .sla-grid,
-  .bottom-grid {
-    grid-template-columns: 1fr;
+@media (max-width: 720px) {
+  .page-head,
+  .panel-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
   }
 }

project/frontend/src/app/features/sla/sla.component.ts

@@ -1,43 +1,53 @@
-import { Component } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
+import { gsap } from 'gsap';
 import { MetricCardComponent } from '../../shared/metric-card.component';
-import { PageHeaderComponent } from '../../shared/page-header.component';
 import { StatusBadgeComponent } from '../../shared/status-badge.component';
 
 @Component({
   selector: 'app-sla',
   standalone: true,
-  imports: [MetricCardComponent, PageHeaderComponent, StatusBadgeComponent],
+  imports: [MetricCardComponent, StatusBadgeComponent],
   templateUrl: './sla.component.html',
   styleUrl: './sla.component.scss'
 })
-export class SlaComponent {
-  readonly rules = [
-    { priority: '紧急', response: '15 分钟', resolve: '4 小时', alert: '提前 30 分钟', status: '启用' },
-    { priority: '高', response: '30 分钟', resolve: '8 小时', alert: '提前 60 分钟', status: '启用' },
-    { priority: '中', response: '2 小时', resolve: '24 小时', alert: '提前 2 小时', status: '启用' },
-    { priority: '低', response: '4 小时', resolve: '48 小时', alert: '提前 4 小时', status: '启用' }
+export class SlaComponent implements AfterViewInit {
+  readonly metrics = [
+    { label: 'SLA 总达标率', value: '96.4%', hint: '发布门禁要求 >= 95%', tone: 'success' as const },
+    { label: '首次响应达标率', value: '98.1%', hint: '按首次客服/技术回复计算' },
+    { label: '解决时限达标率', value: '94.8%', hint: '高优先级工单需要关注', tone: 'warning' as const },
+    { label: '风险工单', value: '2', hint: '1 条超时，1 条即将超时', tone: 'warning' as const }
   ];
 
-  readonly overdue = [
-    { id: 'TK-20260531-014', title: '接口调用偶发 500 错误', type: '解决超时', owner: '李航', delay: '20 分钟' },
-    { id: 'TK-20260530-009', title: '数据同步任务延迟', type: '即将超时', owner: '陈敏', delay: '剩余 35 分钟' }
+  readonly rules = [
+    { priority: '紧急', response: '15 分钟', resolve: '4 小时', alert: '提前 30 分钟', owner: '客服主管', status: '启用' },
+    { priority: '高', response: '30 分钟', resolve: '8 小时', alert: '提前 60 分钟', owner: '客服主管', status: '启用' },
+    { priority: '中', response: '2 小时', resolve: '24 小时', alert: '提前 2 小时', owner: '技术主管', status: '启用' },
+    { priority: '低', response: '4 小时', resolve: '48 小时', alert: '提前 4 小时', owner: '技术主管', status: '启用' }
   ];
 
-  readonly trend = [
-    { day: '05-27', rate: 91 },
-    { day: '05-28', rate: 94 },
-    { day: '05-29', rate: 93 },
-    { day: '05-30', rate: 95 },
-    { day: '05-31', rate: 96 }
+  readonly risks = [
+    { id: 'TK-20260531-014', title: '接口调用偶发 500 错误', type: '解决超时', owner: '李航', remain: '超时 20 分钟', priority: '紧急' },
+    { id: 'TK-20260530-009', title: '数据同步任务延迟', type: '即将超时', owner: '陈敏', remain: '剩余 35 分钟', priority: '高' },
+    { id: 'TK-20260601-126', title: '月度报表导出缓慢', type: '观察中', owner: '王敏', remain: '剩余 6 小时', priority: '中' }
   ];
 
-  readonly owners = [
-    { name: '陈敏', tickets: 24, rate: '97%' },
-    { name: '李航', tickets: 19, rate: '94%' },
-    { name: '王敏', tickets: 17, rate: '96%' }
+  readonly gates = [
+    { name: '时限边界', status: '已覆盖', desc: '紧急 4 小时、高 8 小时、中 24 小时、低 48 小时' },
+    { name: '超时标记', status: '已覆盖', desc: '超时、即将超时、正常三类状态' },
+    { name: '达标率统计', status: '已覆盖', desc: '用于发布门禁和测试报告统计' }
   ];
 
-  badgeTone(type: string): 'warning' | 'danger' {
-    return type.includes('即将') ? 'warning' : 'danger';
+  ngAfterViewInit(): void {
+    gsap.from('.sla-row, .risk-card, .gate-card', { y: 8, duration: 0.24, stagger: 0.025, ease: 'power2.out' });
+  }
+
+  riskTone(type: string): 'default' | 'warning' | 'danger' {
+    if (type.includes('超时') && !type.includes('即将')) {
+      return 'danger';
+    }
+    if (type.includes('即将')) {
+      return 'warning';
+    }
+    return 'default';
   }
 }

tests/README.md

@@ -0,0 +1,108 @@
+# ServicePilot 测试脚本目录说明
+
+本目录按课程作业要求拆分为四类测试脚本：
+
+```text
+tests/
+├─ unit_tests/          # 单元测试脚本
+├─ api_tests/           # 接口测试脚本
+├─ auto_tests/          # 自动化测试脚本
+└─ performance_tests/   # Locust 性能测试脚本
+```
+
+## 1. 单元测试
+
+位置：`tests/unit_tests`
+
+覆盖内容：
+
+- 工单状态流转规则
+- 用户权限隔离规则
+- SLA 截止时间、预警、超时判断
+- 附件类型和大小校验
+
+运行命令：
+
+```powershell
+cd E:\软测\ServicePilot\tests\unit_tests
+powershell -ExecutionPolicy Bypass -File .\run_unit_tests.ps1
+```
+
+## 2. 接口测试
+
+位置：`tests/api_tests`
+
+覆盖内容：
+
+- `/api/health`
+- `/api/config/parse`
+- 404 错误响应
+- Parse 配置敏感字段不暴露
+
+运行命令：
+
+```powershell
+cd E:\软测\ServicePilot\tests\api_tests
+powershell -ExecutionPolicy Bypass -File .\run_api_tests.ps1
+```
+
+## 3. 自动化测试
+
+位置：`tests/auto_tests`
+
+覆盖内容：
+
+- dashboard
+- tickets
+- sla
+- knowledge
+- files
+- reviews
+- test-plan
+
+运行前先启动前端或静态预览：
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+npm.cmd run build
+D:\nodejs\node.exe scripts\static-preview.cjs
+```
+
+再执行：
+
+```powershell
+cd E:\软测\ServicePilot\tests\auto_tests
+powershell -ExecutionPolicy Bypass -File .\run_auto_tests.ps1
+```
+
+## 4. 性能测试
+
+位置：`tests/performance_tests`
+
+覆盖内容：
+
+- 后端健康检查接口
+- Parse 配置接口
+- 404 错误接口
+- 前端关键页面访问
+
+需要安装 Locust：
+
+```powershell
+pip install locust
+```
+
+运行后端接口性能测试：
+
+```powershell
+cd E:\软测\ServicePilot\tests\performance_tests
+powershell -ExecutionPolicy Bypass -File .\run_backend_performance.ps1
+```
+
+运行前端页面性能测试：
+
+```powershell
+cd E:\软测\ServicePilot\tests\performance_tests
+powershell -ExecutionPolicy Bypass -File .\run_frontend_performance.ps1
+```
+

tests/api_tests/README.md

@@ -0,0 +1,24 @@
+# 接口测试脚本
+
+## 测试目标
+
+验证后端 Express API 的基础契约、错误响应和公开配置安全性。
+
+## 用例范围
+
+| 接口 | 测试点 | 预期 |
+|---|---|---|
+| `GET /api/health` | 服务健康检查 | 200 |
+| `GET /api/config/parse` | 返回 Parse 前端配置结构 | 200 |
+| `GET /api/config/parse` | 不暴露 masterKey/restApiKey | 不存在敏感字段 |
+| `GET /api/unknown-resource` | 未知接口 | 404 |
+| `POST /api/ghost` | 404 消息包含方法与路径 | 404 |
+
+合计：5 条。
+
+## 运行命令
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_api_tests.ps1
+```
+

tests/api_tests/api-contract.api.spec.ts

@@ -0,0 +1,39 @@
+/*
+  接口测试脚本说明：
+  该文件对应 project/backend/tests/health.spec.ts 和 api-contract.spec.ts。
+  运行脚本 run_api_tests.ps1 会调用后端 Jest + Supertest 环境执行正式测试文件。
+*/
+
+import request from 'supertest';
+import { app } from '../../project/backend/src/app';
+
+describe('api: service health and config contract', () => {
+  it('returns service status', async () => {
+    const response = await request(app).get('/api/health');
+    expect(response.status).toBe(200);
+    expect(response.body.status).toBe('ok');
+  });
+
+  it('returns public parse config shape', async () => {
+    const response = await request(app).get('/api/config/parse');
+    expect(response.status).toBe(200);
+    expect(response.body).toEqual({
+      appId: expect.any(String),
+      jsKey: expect.any(String),
+      serverUrl: expect.any(String)
+    });
+  });
+
+  it('does not expose sensitive parse keys', async () => {
+    const response = await request(app).get('/api/config/parse');
+    expect(response.body.masterKey).toBeUndefined();
+    expect(response.body.restApiKey).toBeUndefined();
+  });
+
+  it('returns 404 for unknown api route', async () => {
+    const response = await request(app).get('/api/unknown-resource');
+    expect(response.status).toBe(404);
+    expect(response.body.code).toBe('NOT_FOUND');
+  });
+});
+

tests/api_tests/run_api_tests.ps1

@@ -0,0 +1,8 @@
+$ErrorActionPreference = "Stop"
+
+$projectRoot = Resolve-Path "$PSScriptRoot\..\.."
+$backendRoot = Join-Path $projectRoot "project\backend"
+
+Set-Location $backendRoot
+npm.cmd test -- tests/health.spec.ts tests/api-contract.spec.ts
+

tests/auto_tests/README.md

@@ -0,0 +1,39 @@
+# 自动化测试脚本
+
+## 测试目标
+
+使用 Playwright CLI 进行浏览器自动化测试，验证前端关键页面能够访问、页面标题存在、没有明显路由空白，并为每个页面保存截图。
+
+## 覆盖流程
+
+| 编号 | 页面 | 验证点 |
+|---|---|---|
+| AUTO-001 | `/dashboard` | 工作台标题与核心指标可见 |
+| AUTO-002 | `/tickets` | 工单管理工作台可见 |
+| AUTO-003 | `/sla` | SLA 管理页面可见 |
+| AUTO-004 | `/knowledge` | 知识库页面可见 |
+| AUTO-005 | `/files` | 附件管理页面可见 |
+| AUTO-006 | `/reviews` | 满意度评价页面可见 |
+| AUTO-007 | `/test-plan` | 测试计划页面可见 |
+
+## 运行命令
+
+先启动前端静态预览：
+
+```powershell
+cd E:\软测\ServicePilot\project\frontend
+npm.cmd run build
+D:\nodejs\node.exe scripts\static-preview.cjs
+```
+
+再运行：
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_auto_tests.ps1
+```
+
+截图输出目录：
+
+```text
+tests/auto_tests/artifacts/
+```

tests/auto_tests/artifacts/auto-test-result.json

@@ -0,0 +1,51 @@
+[
+    {
+        "id":  "AUTO-001",
+        "route":  "/dashboard",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-001-dashboard.png"
+    },
+    {
+        "id":  "AUTO-002",
+        "route":  "/tickets",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-002-tickets.png"
+    },
+    {
+        "id":  "AUTO-003",
+        "route":  "/sla",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-003-sla.png"
+    },
+    {
+        "id":  "AUTO-004",
+        "route":  "/knowledge",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-004-knowledge.png"
+    },
+    {
+        "id":  "AUTO-005",
+        "route":  "/files",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-005-files.png"
+    },
+    {
+        "id":  "AUTO-006",
+        "route":  "/reviews",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-006-reviews.png"
+    },
+    {
+        "id":  "AUTO-007",
+        "route":  "/test-plan",
+        "status":  200,
+        "result":  "PASS",
+        "screenshot":  "E:\\软测\\ServicePilot\\tests\\auto_tests\\artifacts\\AUTO-007-test-plan.png"
+    }
+]

tests/auto_tests/run_auto_tests.ps1

@@ -0,0 +1,7 @@
+param(
+  [string]$BaseUrl = "http://127.0.0.1:4301"
+)
+
+$ErrorActionPreference = "Stop"
+
+powershell -ExecutionPolicy Bypass -File "$PSScriptRoot\servicepilot-ui-flow.ps1" -BaseUrl $BaseUrl

tests/auto_tests/servicepilot-ui-flow.ps1

@@ -0,0 +1,58 @@
+param(
+  [string]$BaseUrl = "http://127.0.0.1:4301"
+)
+
+$ErrorActionPreference = "Stop"
+
+$artifactDir = Join-Path $PSScriptRoot "artifacts"
+New-Item -ItemType Directory -Path $artifactDir -Force | Out-Null
+
+$cases = @(
+  @{ Id = "AUTO-001"; Route = "/dashboard" },
+  @{ Id = "AUTO-002"; Route = "/tickets" },
+  @{ Id = "AUTO-003"; Route = "/sla" },
+  @{ Id = "AUTO-004"; Route = "/knowledge" },
+  @{ Id = "AUTO-005"; Route = "/files" },
+  @{ Id = "AUTO-006"; Route = "/reviews" },
+  @{ Id = "AUTO-007"; Route = "/test-plan" }
+)
+
+$results = @()
+
+foreach ($case in $cases) {
+  $url = "$BaseUrl$($case.Route)"
+  $response = Invoke-WebRequest -Uri $url -UseBasicParsing
+
+  if ($response.StatusCode -ne 200) {
+    throw "$($case.Id) $($case.Route) unexpected HTTP status: $($response.StatusCode)"
+  }
+
+  $safeName = $case.Route.TrimStart("/").Replace("/", "_")
+  if ([string]::IsNullOrWhiteSpace($safeName)) {
+    $safeName = "home"
+  }
+
+  $screenshot = Join-Path $artifactDir "$($case.Id)-$safeName.png"
+  npx.cmd --yes playwright screenshot --viewport-size=1440,1000 $url $screenshot | Out-Host
+
+  if (!(Test-Path $screenshot)) {
+    throw "$($case.Id) $($case.Route) screenshot was not created"
+  }
+
+  $fileInfo = Get-Item $screenshot
+  if ($fileInfo.Length -lt 10240) {
+    throw "$($case.Id) $($case.Route) screenshot file is too small"
+  }
+
+  $results += [pscustomobject]@{
+    id = $case.Id
+    route = $case.Route
+    status = $response.StatusCode
+    result = "PASS"
+    screenshot = $screenshot
+  }
+
+  Write-Host "$($case.Id) $($case.Route) PASS"
+}
+
+$results | ConvertTo-Json -Depth 4 | Set-Content -Path (Join-Path $artifactDir "auto-test-result.json") -Encoding UTF8

tests/performance_tests/README.md

@@ -0,0 +1,36 @@
+# 性能测试脚本
+
+## 测试目标
+
+使用 Locust 对后端接口和前端关键页面进行并发访问测试，验证系统在课程实践规模下的响应稳定性。
+
+## 测试脚本
+
+| 脚本 | 目标 | 默认 Host |
+|---|---|---|
+| `locustfile_backend.py` | 后端接口性能测试 | `http://localhost:3000` |
+| `locustfile_frontend.py` | 前端页面性能测试 | `http://127.0.0.1:4301` |
+
+## 运行命令
+
+后端性能测试：
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_backend_performance.ps1
+```
+
+前端性能测试：
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_frontend_performance.ps1
+```
+
+## 验收标准
+
+| 指标 | 标准 |
+|---|---|
+| 查询类平均响应时间 | < 500ms |
+| 查询类 P95 | < 1000ms |
+| 错误率 | < 1% |
+| 服务稳定性 | 压测期间不崩溃 |
+

tests/performance_tests/locustfile_backend.py

@@ -0,0 +1,30 @@
+from locust import HttpUser, between, task
+
+
+class ServicePilotBackendUser(HttpUser):
+    wait_time = between(1, 3)
+
+    @task(5)
+    def health_check(self):
+        with self.client.get("/api/health", name="API-健康检查", catch_response=True) as response:
+            if response.status_code == 200 and response.json().get("status") == "ok":
+                response.success()
+            else:
+                response.failure(f"unexpected health response: {response.status_code}")
+
+    @task(3)
+    def parse_config(self):
+        with self.client.get("/api/config/parse", name="API-Parse配置", catch_response=True) as response:
+            if response.status_code == 200 and "serverUrl" in response.text:
+                response.success()
+            else:
+                response.failure(f"unexpected config response: {response.status_code}")
+
+    @task(1)
+    def not_found_contract(self):
+        with self.client.get("/api/unknown-resource", name="API-404契约", catch_response=True) as response:
+            if response.status_code == 404:
+                response.success()
+            else:
+                response.failure(f"expected 404, got {response.status_code}")
+

tests/performance_tests/locustfile_frontend.py

@@ -0,0 +1,25 @@
+from locust import HttpUser, between, task
+
+
+class ServicePilotFrontendUser(HttpUser):
+    wait_time = between(1, 2)
+
+    pages = [
+        ("/dashboard", "页面-工作台"),
+        ("/tickets", "页面-工单管理"),
+        ("/sla", "页面-SLA管理"),
+        ("/knowledge", "页面-知识库"),
+        ("/files", "页面-附件管理"),
+        ("/reviews", "页面-满意度"),
+        ("/test-plan", "页面-测试计划"),
+    ]
+
+    @task
+    def visit_business_pages(self):
+        for path, name in self.pages:
+            with self.client.get(path, name=name, catch_response=True) as response:
+                if response.status_code == 200:
+                    response.success()
+                else:
+                    response.failure(f"{path} status={response.status_code}")
+

tests/performance_tests/run_backend_performance.ps1

@@ -0,0 +1,10 @@
+$ErrorActionPreference = "Stop"
+
+locust -f "$PSScriptRoot\locustfile_backend.py" `
+  --host "http://localhost:3000" `
+  --headless `
+  -u 30 `
+  -r 5 `
+  -t 3m `
+  --html "$PSScriptRoot\backend-performance-report.html"
+

tests/performance_tests/run_frontend_performance.ps1

@@ -0,0 +1,10 @@
+$ErrorActionPreference = "Stop"
+
+locust -f "$PSScriptRoot\locustfile_frontend.py" `
+  --host "http://127.0.0.1:4301" `
+  --headless `
+  -u 30 `
+  -r 5 `
+  -t 3m `
+  --html "$PSScriptRoot\frontend-performance-report.html"
+

tests/unit_tests/README.md

@@ -0,0 +1,23 @@
+# 单元测试脚本
+
+## 测试目标
+
+验证后端核心业务规则是否正确，重点覆盖不依赖浏览器和外部服务的小型测试。
+
+## 用例范围
+
+| 模块 | 测试点 | 用例数 |
+|---|---|---:|
+| 工单状态 | 合法流转、非法流转、关闭状态不可重开 | 8 |
+| 权限隔离 | 客户、客服、技术支持、管理员读取权限 | 7 |
+| SLA 规则 | 截止时间、正常、预警、超时 | 6 |
+| 附件规则 | 类型限制、大小限制、空文件 | 5 |
+
+合计：26 条。
+
+## 运行命令
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_unit_tests.ps1
+```
+

tests/unit_tests/quality-rules.unit.spec.ts

@@ -0,0 +1,74 @@
+/*
+  单元测试脚本说明：
+  该文件对应 project/backend/tests/quality-rules.spec.ts。
+  运行脚本 run_unit_tests.ps1 会调用后端 Jest 环境执行正式测试文件。
+*/
+
+import {
+  allowedNextStatuses,
+  canReadTicket,
+  canTransition,
+  isSlaOverdue,
+  resolveDeadline,
+  slaStatus,
+  validateAttachment
+} from '../../project/backend/src/services/quality-rules';
+
+describe('unit: ticket status rules', () => {
+  it('allows pending ticket to enter processing', () => {
+    expect(canTransition('pending', 'processing')).toBe(true);
+  });
+
+  it('rejects pending ticket resolved directly', () => {
+    expect(canTransition('pending', 'resolved')).toBe(false);
+  });
+
+  it('returns immutable next status list', () => {
+    const next = allowedNextStatuses('pending');
+    next.push('closed');
+    expect(allowedNextStatuses('pending')).toEqual(['processing', 'cancelled']);
+  });
+});
+
+describe('unit: permission rules', () => {
+  const acl = {
+    creatorId: 'customer-1',
+    ownerId: 'engineer-1',
+    companyUserIds: ['customer-1', 'customer-2']
+  };
+
+  it('allows admin to read every ticket', () => {
+    expect(canReadTicket('admin-1', 'admin', acl)).toBe(true);
+  });
+
+  it('rejects unrelated customer', () => {
+    expect(canReadTicket('customer-3', 'customer', acl)).toBe(false);
+  });
+});
+
+describe('unit: SLA rules', () => {
+  const createdAt = new Date('2026-06-01T00:00:00.000Z');
+
+  it('calculates urgent deadline within 4 hours', () => {
+    expect(resolveDeadline({ priority: 'urgent', createdAt }).toISOString()).toBe('2026-06-01T04:00:00.000Z');
+  });
+
+  it('marks ticket warning in last 20 percent time window', () => {
+    expect(slaStatus({ priority: 'high', createdAt, now: new Date('2026-06-01T20:00:00.000Z') })).toBe('warning');
+  });
+
+  it('marks unresolved ticket overdue after deadline', () => {
+    expect(isSlaOverdue({ priority: 'urgent', createdAt, now: new Date('2026-06-01T04:01:00.000Z') })).toBe(true);
+  });
+});
+
+describe('unit: attachment validation rules', () => {
+  it('accepts png attachment under 10MB', () => {
+    expect(validateAttachment({ name: 'error.png', sizeMb: 2 }).valid).toBe(true);
+  });
+
+  it('rejects unsupported executable file', () => {
+    expect(validateAttachment({ name: 'tool.exe', sizeMb: 1 })).toEqual({ valid: false, reason: 'UNSUPPORTED_TYPE' });
+  });
+});
+

tests/unit_tests/run_unit_tests.ps1

@@ -0,0 +1,8 @@
+$ErrorActionPreference = "Stop"
+
+$projectRoot = Resolve-Path "$PSScriptRoot\..\.."
+$backendRoot = Join-Path $projectRoot "project\backend"
+
+Set-Location $backendRoot
+npm.cmd test -- tests/quality-rules.spec.ts
+

tests/测试结果汇总.md

@@ -0,0 +1,120 @@
+# ServicePilot 四类测试结果汇总
+
+## 1. 单元测试结果
+
+测试目录：`tests/unit_tests`
+
+运行命令：
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_unit_tests.ps1
+```
+
+执行结果：
+
+| 指标 | 结果 |
+|---|---:|
+| 测试套件 | 1 passed / 1 total |
+| 测试用例 | 26 passed / 26 total |
+| 通过率 | 100% |
+| 结论 | 通过 |
+
+覆盖内容：
+
+- 工单状态流转
+- 用户权限隔离
+- SLA 截止时间、预警和超时
+- 附件类型与大小校验
+
+## 2. 接口测试结果
+
+测试目录：`tests/api_tests`
+
+运行命令：
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_api_tests.ps1
+```
+
+执行结果：
+
+| 指标 | 结果 |
+|---|---:|
+| 测试套件 | 2 passed / 2 total |
+| 测试用例 | 5 passed / 5 total |
+| 通过率 | 100% |
+| 结论 | 通过 |
+
+覆盖接口：
+
+- `GET /api/health`
+- `GET /api/config/parse`
+- `GET /api/unknown-resource`
+- `POST /api/ghost`
+
+## 3. 自动化测试结果
+
+测试目录：`tests/auto_tests`
+
+运行命令：
+
+```powershell
+powershell -ExecutionPolicy Bypass -File .\run_auto_tests.ps1
+```
+
+执行结果：
+
+| 指标 | 结果 |
+|---|---:|
+| 自动化流程 | 7 |
+| 通过流程 | 7 |
+| 失败流程 | 0 |
+| 通过率 | 100% |
+| 结论 | 通过 |
+
+覆盖页面：
+
+| 编号 | 页面 | 结果 |
+|---|---|---|
+| AUTO-001 | `/dashboard` | PASS |
+| AUTO-002 | `/tickets` | PASS |
+| AUTO-003 | `/sla` | PASS |
+| AUTO-004 | `/knowledge` | PASS |
+| AUTO-005 | `/files` | PASS |
+| AUTO-006 | `/reviews` | PASS |
+| AUTO-007 | `/test-plan` | PASS |
+
+截图和 JSON 结果：
+
+```text
+tests/auto_tests/artifacts/
+```
+
+## 4. 性能测试结果
+
+测试目录：`tests/performance_tests`
+
+脚本文件：
+
+- `locustfile_backend.py`
+- `locustfile_frontend.py`
+- `run_backend_performance.ps1`
+- `run_frontend_performance.ps1`
+
+当前状态：
+
+| 指标 | 结果 |
+|---|---|
+| Locust 脚本 | 已补充 |
+| 后端性能测试 | 待安装 Locust 后执行 |
+| 前端性能测试 | 待安装 Locust 后执行 |
+| HTML 报告 | 执行脚本后自动生成 |
+
+建议执行命令：
+
+```powershell
+pip install locust
+powershell -ExecutionPolicy Bypass -File .\run_backend_performance.ps1
+powershell -ExecutionPolicy Bypass -File .\run_frontend_performance.ps1
+```
+