Expand PPT slide section layout details

docs/17_PPT汇报大纲与页面设计.md

@@ -545,3 +545,314 @@ ServicePilot 智能客户工单与 SLA 履约管理平台
 ### 5. GSAP 动画如何体现？
 
 GSAP 用于工作台、页面列表、卡片进入和页面过渡等前端交互动效，使系统不是静态页面，而是具备更好的前端体验和动效实现。
+
+## 八、逐页板块级制作清单
+
+本节用于真正制作 PPT 时对照使用。每一页按“标题区、主体区、图表区、证据区、讲述区”拆分，明确每个板块应该放什么内容，避免只停留在大纲层面。
+
+## 第 1 页封面：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 主标题区 | 页面中上部，占 35% 高度 | `ServicePilot 智能客户工单与 SLA 履约管理平台` | 字号 34-36，深蓝色，加粗，居中 |
+| 副标题区 | 主标题下方 | `综合测试实践汇报` | 字号 22-24，青蓝色，居中 |
+| 信息区 | 页面左下角 | 课程名称、姓名、学号、班级、日期 | 4-5 行信息，字号 13-15 |
+| 技术标签区 | 页面右下角 | `Angular`、`GSAP`、`React`、`Express`、`Parse`、`Jest`、`Playwright`、`Locust` | 用小标签样式展示，每个标签同宽 |
+| 背景图片区 | 全页底层 | 工作台或工单页面截图，透明度 10%-15% | 不影响标题识别 |
+
+### 本页正文建议
+
+不放长段文字，只保留项目名、汇报主题和个人信息。
+
+### 本页讲述重点
+
+一句话开场：本次汇报围绕 ServicePilot 平台，重点说明系统实现、综合测试设计和最终测试结果。
+
+## 第 2 页目录：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `汇报目录` | 左对齐，字号 26 |
+| 目录编号区 | 左侧 20% 宽度 | 01、02、03、04、05 | 纵向排列，使用圆形编号 |
+| 目录内容区 | 中间 55% 宽度 | 项目概述、技术架构、测试计划、测试结果、总结反思 | 每项 1 行主标题 + 1 行关键词 |
+| 关键词区 | 右侧 25% 宽度 | `业务闭环`、`技术落地`、`四类测试`、`结果证据`、`质量评估` | 使用浅色卡片 |
+
+### 本页正文建议
+
+1. 项目背景与系统概述  
+2. 技术架构与功能模块  
+3. 综合测试计划  
+4. 四类测试执行结果  
+5. 测试结论与反思
+
+### 本页讲述重点
+
+告诉老师这次不是只展示项目页面，而是重点展示软件测试过程和测试证据。
+
+## 第 3 页项目背景：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `项目背景与选题说明` | 左对齐，保持统一标题样式 |
+| 痛点卡片区 | 左侧 45% | 三张卡片：工单处理不透明、SLA 超时难预警、服务质量难量化 | 每张卡片含图标、标题、1 句说明 |
+| 解决方案区 | 右侧 45% | ServicePilot 提供工单、SLA、知识库、评价、看板能力 | 使用产品能力列表 |
+| 选题价值区 | 页面底部 | `业务链路完整、角色权限清晰、测试点丰富，适合作为综合测试项目` | 用醒目的结论条展示 |
+
+### 痛点卡片内容
+
+| 痛点 | 说明 |
+|---|---|
+| 工单处理不透明 | 客户不知道问题处理进度，客服难以追踪责任人 |
+| SLA 超时难预警 | 响应和处理时限缺少系统化监控 |
+| 服务质量难量化 | 缺少满意度、处理时长、超时率等质量指标 |
+
+### 本页讲述重点
+
+说明选题具备真实商业背景，且具有状态流转、权限控制、时间规则、文件校验、页面流程和性能指标等可测试点。
+
+## 第 4 页业务目标：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `系统业务目标` | 标题下方加一句摘要 |
+| 业务流程区 | 页面中部横向 | 客户提交 → 客服分派 → 技术处理 → SLA 监控 → 工单关闭 → 满意度评价 | 使用 6 个流程节点和箭头 |
+| 测试关注点区 | 每个流程节点下方 | 状态、权限、时限、告警、评价、统计 | 小号标签 |
+| 目标总结区 | 页面底部 | `形成服务请求从提交到复盘的完整闭环` | 结论卡片 |
+
+### 流程节点内容
+
+| 流程节点 | 业务说明 | 对应测试点 |
+|---|---|---|
+| 客户提交 | 创建问题工单 | 新增工单、字段校验 |
+| 客服分派 | 初步分类并指派处理人 | 权限隔离、状态变化 |
+| 技术处理 | 处理问题并更新进展 | 工单流转规则 |
+| SLA 监控 | 判断预警和超时 | SLA 时间规则 |
+| 工单关闭 | 问题处理完成 | 关闭状态不可重开 |
+| 满意度评价 | 客户反馈服务质量 | 星级评价、反馈统计 |
+
+### 本页讲述重点
+
+把业务流程和测试点连起来，说明后面四类测试都是围绕这个闭环展开。
+
+## 第 5 页功能模块：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `系统功能模块` | 标题旁可放 `8 个核心模块` 标签 |
+| 模块矩阵区 | 左侧 60% | 2 行 4 列模块卡片 | 每张卡片包括模块名、图标、2 个关键词 |
+| 页面截图区 | 右侧 40% | 工作台、工单管理、SLA 页面截图缩略图 | 三张截图纵向叠放，带简短标题 |
+| 模块结论区 | 底部 | `功能模块覆盖 PRD 核心业务范围` | 用浅蓝背景条 |
+
+### 模块卡片内容
+
+| 模块 | 卡片关键词 |
+|---|---|
+| 登录模块 | 用户登录、角色进入 |
+| 工作台 | 指标总览、风险概览 |
+| 工单管理 | 查询、新增、编辑、流转 |
+| SLA 管理 | 规则、预警、超时 |
+| 知识库 | 问题沉淀、方案复用 |
+| 附件管理 | 上传、预览、类型校验 |
+| 满意度评价 | 星级、反馈、统计 |
+| 测试计划 | 测试范围、验收标准 |
+
+### 本页讲述重点
+
+说明系统不是只做一个测试页面，而是完成了多个业务模块，后续测试覆盖这些核心模块。
+
+## 第 6 页技术架构：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `技术架构与技术栈落地` | 标题下写 `对照作业技术栈要求` |
+| 架构图区 | 页面中部 65% | 浏览器 → Angular 前端 → Express 后端 → Parse 数据库 | 使用分层架构图 |
+| 技术落地区 | 右侧 35% | Angular、GSAP、React、Node.js、TS、Express、Parse 的落点说明 | 用表格或列表 |
+| 验收对照区 | 底部 | `指定技术栈均已在项目中落地` | 绿色通过条 |
+
+### 架构图节点内容
+
+| 层级 | 放置文字 |
+|---|---|
+| 用户层 | 浏览器访问系统页面 |
+| 前端层 | Angular + TypeScript 页面与路由 |
+| 动效层 | GSAP 卡片、列表、页面过渡动画 |
+| React 组件层 | 图片预览、星级评价 |
+| 后端层 | Node.js + Express API |
+| 数据层 | Parse / Back4App 数据存储和权限隔离 |
+| 测试层 | Jest、Supertest、Playwright、Locust |
+
+### 本页讲述重点
+
+重点说明“老师要求的技术栈不是写在文档里，而是在具体模块中实现了”。
+
+## 第 7 页测试总体计划：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `综合测试总体计划` | 标题右侧放 `四类测试` 标签 |
+| 四象限区 | 页面中部 | 单元测试、接口测试、自动化测试、性能测试 | 四个象限分别写范围、工具、标准 |
+| 测试目录区 | 页面底部 | `tests/unit_tests`、`tests/api_tests`、`tests/auto_tests`、`tests/performance_tests` | 用代码样式展示 |
+| 验收标准区 | 右下角 | 通过率、错误率、P95、截图生成 | 小型标准卡片 |
+
+### 四象限具体内容
+
+| 测试类型 | 范围 | 工具 | 标准 |
+|---|---|---|---|
+| 单元测试 | 工单规则、权限、SLA、附件 | Jest | 核心规则 100% 通过 |
+| 接口测试 | health、Parse 配置、404 | Jest + Supertest | 状态码和结构正确 |
+| 自动化测试 | 7 个前端页面 | Playwright | 页面 200、截图生成 |
+| 性能测试 | 后端接口、前端页面 | Locust | 失败率 < 1%、P95 < 1000ms |
+
+### 本页讲述重点
+
+强调测试结果按课程要求的四类测试汇报，不按网站模块散乱展开。
+
+## 第 8 页单元测试：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `单元测试设计与结果` | 标题下写测试对象：后端核心业务规则 |
+| 测试覆盖表 | 左侧 60% | 工单状态、权限隔离、SLA、附件规则 | 表格展示用例数量和结果 |
+| 结果数字卡 | 右上 40% | `26/26 PASS`、`通过率 100%` | 大字号绿色数字 |
+| 证据路径区 | 右下 40% | `run_unit_tests.ps1`、`unit_test_log.txt`、`unit_test_summary.txt` | 用代码块或文件清单 |
+
+### 页面可放正文
+
+单元测试主要验证不依赖页面和数据库的核心业务规则，包括工单状态流转是否合法、不同角色是否只能访问授权数据、SLA 是否能够正确判断正常/预警/超时状态，以及附件类型和大小是否符合规则。
+
+### 本页讲述重点
+
+说明单元测试解决的是“规则对不对”，是后续接口和页面测试的基础。
+
+## 第 9 页接口测试：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `接口测试设计与结果` | 标题下写测试对象：Express API 契约 |
+| 接口表格区 | 左侧 65% | 5 条接口用例 | 表格列为接口、测试点、期望、结果 |
+| 结果卡片区 | 右上 35% | `5/5 PASS`、`2 个测试套件通过` | 绿色结果卡 |
+| 安全说明区 | 右下 35% | Parse 配置接口不暴露 masterKey/restApiKey | 用警示/安全图标 |
+| 证据路径区 | 底部 | `run_api_tests.ps1`、`api_test_log.txt` | 小号代码路径 |
+
+### 页面可放正文
+
+接口测试覆盖服务健康检查、Parse 前端配置、敏感字段保护和 404 错误契约，验证后端接口能够稳定返回符合约定的状态码和响应结构。
+
+### 本页讲述重点
+
+强调接口测试不仅验证 200 成功，也验证错误接口和敏感字段不暴露。
+
+## 第 10 页自动化测试：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `自动化测试设计与结果` | 标题下写工具：Playwright |
+| 流程表区 | 左侧 50% | AUTO-001 到 AUTO-007 | 显示页面、验证点、结果 |
+| 截图证据区 | 右侧 50% | 工作台截图、工单管理截图、SLA 截图 | 2-3 张截图，带页签标题 |
+| 结果条区 | 底部 | `7 个页面全部通过，截图全部生成` | 绿色通过横条 |
+| 证据路径区 | 底部小字 | `tests/auto_tests/artifacts/*.png` | 放在结果条下方 |
+
+### 页面可放正文
+
+自动化测试使用 Playwright CLI 访问前端关键路由，验证页面 HTTP 状态为 200，并为每个页面生成截图，作为前端页面可访问性的测试证据。
+
+### 本页讲述重点
+
+说明自动化测试有真实浏览器访问和截图证据，不是人工截图拼出来的。
+
+## 第 11 页性能测试设计：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `性能测试设计` | 标题下写工具：Locust |
+| 压测配置卡 | 左侧 35% | 30 用户、5 用户/秒、3 分钟 | 三个大数字卡 |
+| 后端场景区 | 中上 65% | health、config、404 三类接口 | 小型接口列表 |
+| 前端场景区 | 中下 65% | 7 个前端页面 | 页面列表或路由标签 |
+| 指标标准区 | 底部 | 错误率 < 1%、P95 < 1000ms、服务不崩溃 | 三个标准卡片 |
+
+### 页面可放正文
+
+性能测试分为后端接口压测和前端页面压测两组。后端侧重点是 API 响应稳定性，前端侧重点是关键页面在并发访问下的响应情况。
+
+### 本页讲述重点
+
+说明性能测试已经安装 Locust 并真实执行，后续结果来自 CSV 和 HTML 报告。
+
+## 第 12 页性能测试结果：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `性能测试结果` | 标题右侧放 `Locust 实测` 标签 |
+| 后端结果卡 | 左上 | `2656 请求`、`0 失败`、`P95 4ms` | 深蓝 + 绿色数字 |
+| 前端结果卡 | 右上 | `24311 请求`、`0 失败`、`P95 9ms` | 深蓝 + 绿色数字 |
+| 结果表格区 | 页面中部 | 请求总数、失败数、平均响应、P95、吞吐量 | 两行对比表 |
+| 图表区 | 页面下部 | 平均响应时间柱状图、P95 柱状图 | 后端/前端对比 |
+| 证据区 | 右下角 | HTML 报告、CSV 明细、summary 文件 | 文件清单 |
+
+### 页面可放正文
+
+后端接口压测共 2656 次请求，失败 0 次，平均响应时间 2.77ms，P95 为 4ms。前端页面压测共 24311 次请求，失败 0 次，平均响应时间 4.29ms，P95 为 9ms，两组结果均满足验收标准。
+
+### 本页讲述重点
+
+突出“0 失败”和“P95 远低于 1000ms”，这是性能测试结论的核心。
+
+## 第 13 页测试结论：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `测试结论与质量评估` | 标题下写：四类测试均通过 |
+| 总览表区 | 左侧 60% | 单元、接口、自动化、性能四类结果 | 表格展示数量和结论 |
+| 质量结论区 | 右上 40% | `综合测试通过` | 大号绿色徽章 |
+| 证据矩阵区 | 右下 40% | 脚本、日志、截图、HTML、CSV、Word | 6 个小图标 |
+| 结论条区 | 底部 | `系统满足课程综合测试验收要求` | 深蓝底白字 |
+
+### 页面可放正文
+
+本项目四类测试均已完成并通过。单元测试验证核心业务规则，接口测试验证后端 API 契约，自动化测试验证前端关键页面，性能测试验证并发访问稳定性。测试证据包括脚本、日志、截图、HTML 报告、CSV 明细和 Word 报告。
+
+### 本页讲述重点
+
+用这一页收束测试结果，说明质量结论来自多类测试证据，不是主观评价。
+
+## 第 14 页总结反思：板块设计
+
+| 板块 | 位置 | 放置内容 | 设计要求 |
+|---|---|---|---|
+| 页面标题区 | 顶部 | `总结与反思` | 标题保持简洁 |
+| 收获区 | 左侧 50% | 完成项目闭环、掌握技术栈、建立测试分层意识、沉淀证据 | 4 条要点 |
+| 不足区 | 右上 50% | 性能规模有限、异常场景可增加、CI 未接入 | 3 条要点 |
+| 后续优化区 | 右下 50% | 扩大压测规模、补充越权/异常测试、接入自动化流水线 | 3 条要点 |
+| 结束语区 | 底部 | `谢谢老师，请批评指正` | 居中，字号 22 |
+
+### 页面可放正文
+
+本次大作业完成了从商业选题、PRD、数据库设计、系统实现、测试计划、测试执行到报告沉淀的完整流程。后续可以继续增强异常测试、权限越权测试、多租户隔离测试和 CI 自动化测试能力。
+
+### 本页讲述重点
+
+总结不要只说完成项目，要强调完成了软件测试的计划、执行、证据和质量评估闭环。
+
+## 九、PPT制作时的素材清单
+
+| 素材类型 | 建议来源 | 用途 |
+|---|---|---|
+| 系统截图 | `tests/auto_tests/artifacts/` | 第 5 页、第 10 页 |
+| 自动化测试结果 | `tests/auto_tests/reports/auto_test_summary.txt` | 第 10 页 |
+| 单元测试结果 | `tests/unit_tests/reports/unit_test_summary.txt` | 第 8 页 |
+| 接口测试结果 | `tests/api_tests/reports/api_test_summary.txt` | 第 9 页 |
+| 性能测试结果 | `tests/performance_tests/性能测试报告.md` | 第 11 页、第 12 页 |
+| Locust HTML 报告 | `tests/performance_tests/reports/*.html` | 第 12 页证据 |
+| 综合测试报告 | `0235711-王刚-综合测试报告.docx` | 第 13 页证据 |
+
+## 十、每类页面推荐版式
+
+| 页面类型 | 适用页 | 推荐版式 |
+|---|---|---|
+| 封面页 | 第 1 页 | 大标题 + 项目信息 + 技术标签 |
+| 目录页 | 第 2 页 | 编号导航 + 关键词卡片 |
+| 背景说明页 | 第 3-4 页 | 左右分栏 + 流程图 |
+| 系统展示页 | 第 5-6 页 | 模块矩阵 + 截图/架构图 |
+| 测试计划页 | 第 7 页 | 四象限矩阵 |
+| 测试结果页 | 第 8-12 页 | 结果卡片 + 表格 + 证据路径 |
+| 总结页 | 第 13-14 页 | 总览表 + 结论徽章 + 反思列表 |