docs(frontend): 严格评审版 - 功能流程完整性/UI交互/行业对标

新发现致命问题： 1. 复核结果页是死胡同（无返回首页/无保存分享） 2. 定价页结账页无返回首页链接 3. 无全局导航栏（全站孤岛） 4. 业务流程断点多（无法回退查看） 5. 订单报告管理缺失 6. 表单交互不完整（无即时校验） 7. 响应式不完整 8. 状态完整性严重不足修订评分：整体 5.7/10（远低于生产级标准 8.5）三阶段优化方案： - 第一阶段（1周）：修复致命缺陷 → 可用 - 第二阶段（2周）：补齐核心功能 → 行业基础线 - 第三阶段（3-4周）：产品化提升 → 生产级标准
2026-06-26 14:06:01 +08:00
parent a88bfa3185
commit 388ecb7ed0
1 changed files with 308 additions and 346 deletions
--- a/docs/FRONTEND_PRODUCTION_ASSESSMENT_AND_OPTIMIZATION_PLAN_2026-06-26.md
+++ b/docs/FRONTEND_PRODUCTION_ASSESSMENT_AND_OPTIMIZATION_PLAN_2026-06-26.md
@@ -1,463 +1,425 @@
-# 高考志愿填报系统前端生产级评估与优化方案
+# 高考志愿填报系统前端严格评审与优化方案（v2）

-**评估日期**: 2026-06-26
-**评估范围**: 所有用户端页面
-**评估方法**: 真实浏览器预览 + 代码架构审计 + 视觉分析
+**评审日期**: 2026-06-26  
+**评审方法**: 功能流程审计 + UI交互深度审计 + 真实浏览器预览  
+**评审标准**: 生产级标准（≥8.5/10）

 ---

-## 一、逐页评分汇总
+## 一、致命问题清单（新增）

-| 页面                                       | 信息架构 | 交互完整性 | 视觉一致性 | 状态完整性 | 响应式 | 可访问性 | 总评   |
-| ------------------------------------------ | -------- | ---------- | ---------- | ---------- | ------ | -------- | ------ |
-| **首页** `/`                               | 7/10     | 6/10       | 7/10       | 5/10       | 6/10   | 7/10     | 6.5/10 |
-| **复核结果页** `/review/start`             | 8/10     | 7/10       | 7/10       | 6/10       | 7/10   | 7/10     | 7.0/10 |
-| **定价页** `/pricing`                      | 9/10     | 8/10       | 9/10       | 8/10       | 8/10   | 8/10     | 8.5/10 |
-| **结账页** `/checkout/standard`            | 9/10     | 8/10       | 9/10       | 8/10       | 8/10   | 8/10     | 8.5/10 |
-| **Portal 状态页** `/portal/{token}/status` | 7/10     | 6/10       | 7/10       | 5/10       | 6/10   | 7/10     | 6.5/10 |
-| **Portal 资料页** `/portal/{token}/info`   | 7/10     | 6/10       | 7/10       | 5/10       | 6/10   | 7/10     | 6.5/10 |
-| **隐私政策** `/privacy`                    | 8/10     | 7/10       | 7/10       | 7/10       | 7/10   | 8/10     | 7.5/10 |
-| **服务条款** `/service-terms`              | 8/10     | 7/10       | 7/10       | 7/10       | 7/10   | 8/10     | 7.5/10 |
-| **删除申请** `/deletion-policy`            | 7/10     | 6/10       | 6/10       | 6/10       | 6/10   | 7/10     | 6.5/10 |
+### 问题 1：复核结果页是死胡同 🔴 P0

-**整体平均**: 7.2/10 — **未达到生产级标准（需 ≥8.5/10）**
+**发现**：
+
+- ❌ 无返回首页导航
+- ❌ 无"稍后再看/保存草稿"选项
+- ❌ 无分享/打印/保存PDF功能
+- ❌ 用户无法与家人商量（缺少分享机制）
+
+**影响**：
+
+- 用户看完结果后无法回头
+- 家长/学生需要商量时只能截图
+- 无法保存结果供后续对比
+
+**根因**：页面设计只考虑线性推进，没考虑犹豫决策、家庭协作场景

 ---

-## 二、核心问题清单（按优先级）
+### 问题 2：定价页和结账页无返回首页链接 🔴 P0

-### P0 — 必须立即修复（阻塞上线）
+**发现**：

-#### P0-1 代码架构问题（技术债务）
+- 定价页返回首页链接数：0
+- 结账页返回首页链接数：0

-**问题**：3501 行单文件渲染所有页面，维护性极差
+**影响**：

- **证据**：`admin/routes/web_public.py` 3501 行，15 个 `<!doctype html` 页面全部在此文件
- **影响**：任何改动都需要在超大文件中定位，团队协作困难，代码审查成本高
- **根因**：Python f-string HTML 直接写在路由函数中，没有模板引擎、没有组件化
-
-**问题**：31 处 inline style，CSS 未统一成 design system
-
- **证据**：`grep -c "style=" admin/routes/web_public.py` 返回 31
- **影响**：样式分散在 15 个页面中，维护困难，一致性差
- **根因**：缺乏统一的 CSS 规范，每次改动都新增 inline style
-
-**问题**：`portal-ui.css` 仅 139 行，设计系统不完整
-
- **证据**：`wc -l admin/static/portal-ui.css` 返回 139
- **影响**：大量样式仍写在页面级 inline，无法复用
- **根因**：未建立真正的 design token 系统
-
-#### P0-2 状态完整性缺失
-
-**问题**：loading/empty/error/skeleton 状态不完整
-
- **证据**：`grep -c "loading\|empty\|error-state\|skeleton" admin/routes/web_public.py` 返回 8（分布在 15 个页面中）
- **影响**：用户在等待/出错时看到空白页或无反馈
- **根因**：只做了 happy path，没有考虑真实使用中的异常情况
-
-#### P0-3 真实前置条件缺失
-
-**问题**：Portal 无法创建订单（缺少 Fernet key）
-
- **证据**：审计时尝试创建订单失败，返回 "环境变量 GAOKAO_ORDERS_FERNET_KEY 未设置"
- **影响**：完整业务流程无法验证，Portal 页面无法真实使用
- **根因**：真实环境配置缺失，本地开发环境未配置完整
+- 用户进入定价/结账后无法回到首页重新评估
+- 只能依赖浏览器后退按钮
+- 违反基础导航规范

 ---

-### P1 — 本周补齐（影响体验）
+### 问题 3：无全局导航栏 🔴 P0

-#### P1-1 首页仍像 demo（用户反馈）
+**发现**：

-**问题**：用户认为首页改动仍是 demo 级别
+- 全站导航栏数量：0
+- 所有页面都是孤岛，无法在页面间跳转

- **证据**：用户明确反馈 "前端还是 demo"
- **具体表现**：
-  - 表单区虽然做了 P0/P1 改动，但整体仍像"说明书"
-  - 缺少高信任证据带（社会证明、数据背书）
-  - 业务流程入口不够显眼
- **根因**：只改了文案和结构，没有建立真正的"产品感"
+**影响**：

-#### P1-2 响应式不完整
-
-**问题**：移动端体验只是缩小，不是真正适配
-
- **证据**：部分页面缺少移动端专属样式
- **影响**：学生/家长在手机上使用体验差
- **根因**：CSS 中缺乏 `@media (max-width: 980px)` 规则
-
-#### P1-3 表单交互不专业
-
-**问题**：缺少即时校验、明确错误提示、可恢复机制
-
- **证据**：表单字段没有实时校验反馈
- **影响**：用户提交后才发现错误，体验差
- **根因**：后端渲染 HTML，前端没有 JavaScript 校验层
+- 用户无法快速回到首页
+- 无法在不同功能模块间切换
+- 不符合Web基础可用性标准

 ---

-### P2 — 长期优化（提升质量）
+### 问题 4：业务流程断点多 🔴 P0

-#### P2-1 JavaScript 交互层缺失
+**发现**：

-**问题**：仅 3 处 `<script>`，前端没有真正的交互层
+- 复核 → 补信息 → 无法回到复核结果
+- 交付后无下一步引导
+- 用户在流程中容易迷失

- **证据**：`grep -c "<script" admin/routes/web_public.py` 返回 3
- **影响**：所有交互都依赖后端，无法提供即时反馈
- **根因**：纯后端渲染架构，未建立前端 JavaScript 组件
+**影响**：

-#### P2-2 可访问性基础门槛不足
-
-**问题**：键盘焦点、对比度、语义标签不完整
-
- **影响**：视障用户、键盘操作用户无法正常使用
- **根因**：未系统性地进行可访问性审计
-
-#### P2-3 性能未优化
-
-**问题**：HTML 内联过多，CSS 未压缩，未考虑懒加载
-
- **影响**：页面加载慢，用户体验差
- **根因**：未建立前端性能优化流程
+- 用户不知道自己在哪个阶段
+- 无法回退查看之前的信息
+- 完整业务流程不连贯

 ---

-## 三、系统性生产级优化方案
+### 问题 5：订单和报告管理缺失 🟡 P1

-### A) 信息架构与业务流程梳理
+**发现**：

-#### A-1 当前业务流程（需优化）
+- 订单历史入口：1（极少）
+- 报告列表入口：1（极少）
+
+**影响**：
+
+- 用户无法查看历史订单
+- 无法对比多份报告
+- 多次付费用户无法管理自己的订单
+
+---
+
+### 问题 6：表单交互不完整 🟡 P1
+
+**发现**：
+
+- HTML5 校验属性：15（分散在多个表单）
+- JavaScript 校验函数：2（极少）
+- 前端交互函数：12（少量）
+
+**影响**：
+
+- 用户提交后才发现错误
+- 无即时校验反馈
+- 错误提示不够友好
+
+---
+
+### 问题 7：响应式不完整 🟡 P1
+
+**发现**：
+
+- @media 规则（web_public.py）：7
+- portal-ui.css @media：0
+
+**影响**：
+
+- 移动端只是缩小，不是真正适配
+- 关键CTA在手机上可能不可点击
+- 学生/家长在手机上使用体验差
+
+---
+
+### 问题 8：状态完整性严重不足 🔴 P0
+
+**发现**：
+
+- Loading 相关：16（分散在15个页面，平均每页1个）
+- 空状态文案：15（同样分散）
+- 实际可用的状态组件：极少
+
+**影响**：
+
+- 用户等待时看到空白页
+- 出错时无友好提示
+- 无数据时无引导
+
+---
+
+## 二、功能流程完整性审计（新增）
+
+### 当前业务流程图（严重断点）

 ```
-首页 → 复核结果 → [分支]
-                ├─ 补齐基础信息 → Portal 资料页
-                ├─ 查看冲稳保建议 → （缺失）
-                └─ 进入完整规划（付费） → 定价页 → 结账页 → Portal 状态页 → Portal 资料页 → 交付
-```
-
-#### A-2 理想业务流程（目标）
-
-```
-首页（两条主路径）
-  ├─ 路径 A：免费复核
-  │   └─ 首页表单提交 → 复核结果页 → 补齐信息 → Portal 资料页 → 提交 → 等待复核 → 复核结果通知 → 决策点
-  │       ├─ 继续免费咨询 → Portal 状态页（沟通记录）
-  │       └─ 进入付费规划 → 定价页 → 结账页 → Portal 资料页 → 提交完整资料 → 生成方案 → 报告交付
+首页
+  ├─ 路径A：免费复核
+  │   └─ 首页表单 → 复核结果页
+  │       ├─ [补齐基础信息] → Portal 资料页
+  │       │   └─ ❌ 无返回路径
+  │       ├─ [查看冲稳保建议] → ❌ 目标页面不明确
+  │       └─ [进入完整规划（付费）] → 定价页
+  │           └─ ❌ 无返回首页链接
  │
-  └─ 路径 B：直接付费规划
-      └─ 定价页 → 结账页 → Portal 资料页 → 提交完整资料 → 生成方案 → 报告交付
+  └─ 路径B：直接付费
+      └─ 定价页 → 结账页
+          └─ ❌ 无返回首页链接

-关键改进点：
-1. 首页明确两条主路径（免费复核 / 直接付费），不分流
-2. 复核结果后必须明确下一步（补信息/付费/看建议）
-3. Portal 状态页必须显示进度条 + 下一步引导
-4. 报告交付后必须有"下一步行动"（下载/分享/继续规划）
+缺失环节：
+❌ 复核结果无法保存/分享
+❌ 无法查看历史订单
+❌ 无法对比多份报告
+❌ 交付后无下一步引导
+❌ Portal无法回到首页
 ```

-#### A-3 页面信息层级统一规范
-
-每页必须遵循：
+### 理想业务流程（行业最佳实践）

 ```
-顶部：eyebrow（小标签） → 主标题（H1） → 副标题（一句话价值）
-中部：核心内容区（卡片/表单/流程）
-底部：信任建设区（隐私/保障/删除入口） + 主 CTA
+首页（全局导航栏：首页 | 我的订单 | 帮助中心）
+  ├─ 路径A：免费复核
+  │   └─ 首页表单 → 复核结果页
+  │       ├─ [保存结果] → 生成唯一链接（可分享给家人）
+  │       ├─ [补齐基础信息] → Portal 资料页
+  │       │   └─ 提交 → 复核结果更新 → 返回查看
+  │       ├─ [查看冲稳保建议] → 冲稳保详情页
+  │       │   └─ 返回复核结果
+  │       └─ [进入完整规划（付费）] → 定价页
+  │           └─ 返回首页/返回复核结果
+  │
+  └─ 路径B：直接付费
+      └─ 定价页 → 结账页 → 支付
+          └─ Portal 资料页 → 提交完整资料
+              └─ 状态追踪页（进度条：资料提交→处理中→已交付）
+                  └─ 报告页 → [下载/分享/打印]
+                      └─ 下一步：继续规划/分享给老师
+
+新增功能：
+✅ 全局导航栏
+✅ 复核结果保存/分享
+✅ 订单历史管理
+✅ 报告列表与对比
+✅ 交付后下一步引导
+✅ 状态进度条
 ```

 ---

-### B) 交互设计规范
+## 三、UI交互体验深度评审（新增）

-#### B-1 状态完整性标准
+### 评审维度：信息架构

-每个关键组件必须包含：
+| 项目         | 当前状态   | 行业标准            | 差距    |
+| ------------ | ---------- | ------------------- | ------- |
+| 全局导航     | ❌ 无      | ✅ 必须             | 🔴 致命 |
+| 面包屑导航   | ❌ 无      | ✅ 必须（深层页面） | 🔴 致命 |
+| 页面标题层级 | ✅ 有H1/H2 | ✅ 清晰             | 🟢 合格 |
+| 功能模块分类 | ⚠️ 隐式    | ✅ 显式分类         | 🟡 改进 |

- **默认态**：用户首次看到的状态
- **loading**：数据加载时的骨架屏/skeleton
- **empty**：无数据时的空状态（带引导）
- **error**：出错时的友好提示（可恢复）
- **success**：成功后的反馈（带下一步）
- **disabled**：不可操作时的视觉降级
+### 评审维度：交互路径

-**验证方法**：对每个页面运行 `状态机检查表`
+| 项目         | 当前状态        | 行业标准          | 差距    |
+| ------------ | --------------- | ----------------- | ------- |
+| 返回首页     | ❌ 多数页面缺失 | ✅ 每页必有       | 🔴 致命 |
+| 返回上一级   | ❌ 缺失         | ✅ 深层页面必有   | 🔴 致命 |
+| 暂缓决策选项 | ❌ 无           | ✅ 高客单价必须有 | 🔴 致命 |
+| 保存/分享    | ❌ 无           | ✅ 结果页必须有   | 🔴 致命 |

-#### B-2 表单交互规范
+### 评审维度：状态设计

- **即时校验**：字段失焦时立即校验，不用等提交
- **明确错误提示**：错误文案必须是用户能理解的，不暴露技术细节
- **可恢复**：提交失败后，用户已填内容不能丢失
- **进度提示**：多步表单必须显示进度条（Step 1/4）
+| 项目        | 当前状态 | 行业标准                | 差距    |
+| ----------- | -------- | ----------------------- | ------- |
+| Loading状态 | ⚠️ 极少  | ✅ 每个异步操作必有     | 🔴 严重 |
+| Empty状态   | ⚠️ 极少  | ✅ 每个数据展示区必有   | 🔴 严重 |
+| Error状态   | ⚠️ 极少  | ✅ 每个可能失败的点必有 | 🔴 严重 |
+| Success状态 | ⚠️ 极少  | ✅ 每个关键操作必有     | 🔴 严重 |

-#### B-3 反馈机制规范
+### 评审维度：表单体验

- **即时反馈**：点击按钮后必须有 loading/success/error 反馈
- **下一步引导**：完成动作后，必须告诉用户下一步做什么
- **不打断流程**：关键动作后不能把用户丢在原地
+| 项目     | 当前状态    | 行业标准             | 差距    |
+| -------- | ----------- | -------------------- | ------- |
+| 即时校验 | ❌ 无       | ✅ 必须有            | 🔴 严重 |
+| 错误提示 | ⚠️ 后端返回 | ✅ 前端即时+友好文案 | 🟡 改进 |
+| 进度指示 | ❌ 无       | ✅ 多步表单必须有    | 🟡 改进 |
+| 自动保存 | ❌ 无       | ✅ 长表单必须有      | 🟡 改进 |
+
+### 评审维度：移动端适配
+
+| 项目       | 当前状态      | 行业标准          | 差距    |
+| ---------- | ------------- | ----------------- | ------- |
+| 响应式布局 | ⚠️ 少量@media | ✅ 完整移动端适配 | 🔴 严重 |
+| 触摸友好   | ⚠️ 未验证     | ✅ 大点击区       | 🟡 改进 |
+| 表单适配   | ⚠️ 未验证     | ✅ 移动端专用布局 | 🟡 改进 |

 ---

-### C) 视觉设计系统建议
+## 四、行业最佳实践对标（新增）

-#### C-1 Design Token 系统（必须建立）
+### 高考志愿填报类产品通用功能清单

-```css
-/* 颜色系统 */
--primary: #2d7cff; /* 主色-蓝色 */
--primary-hover: #276fe7;
--secondary: #8fb0df; /* 辅色-浅蓝 */
--accent: #f3d49f; /* 强调色-琥珀 */
--danger: #ff4757; /* 错误色 */
--success: #28a745; /* 成功色 */
--warning: #ffc107; /* 警告色 */
-
--bg-primary: #142235; /* 深蓝背景（hero） */
--bg-secondary: #f8fbff; /* 浅蓝背景（表单） */
--bg-card: #ffffff; /* 卡片背景 */
-
--text-primary: #172033; /* 主文本 */
--text-secondary: #8fb0df; /* 辅文本 */
--text-inverse: #ffffff; /* 反色文本 */
-
-/* 边框 */
--border: #dbe3f0;
--border-light: rgba(255, 255, 255, 0.18);
-
-/* 间距系统（8px rhythm） */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
-
-/* 圆角 */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
-
-/* 字体系统 */
--font-display: "PingFang SC", "Microsoft YaHei", sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "Courier New", monospace;
-
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-display: 36px;
--font-size-hero: 56px;
-```
-
-#### C-2 组件规范
-
-**按钮规范**：
-
-```css
-.btn-primary: 实心蓝，大点击区，hover 上浮 + 阴影
-.btn-secondary: 白底描边，hover 背景加深
-.btn-text: 无背景，下划线，hover 加粗
-.btn-disabled: 灰色降级，cursor: not-allowed
-```
-
-**输入框规范**：
-
-```css
-.input: 浅蓝背景，圆角 12px，focus 边框加粗
-.input-error: 边框变红，下方显示错误文案
-.input-disabled: 灰色背景，cursor: not-allowed
-```
-
-**卡片规范**：
-
-```css
-.card: 白底，圆角 18px，浅阴影
-.card-highlighted: 蓝色渐变描边 + 外发光（主推档）
-.card-hover: hover 时阴影加深 + 微上浮
-```
+| 功能模块     | 行业标准  | 当前实现    | 状态    |
+| ------------ | --------- | ----------- | ------- |
+| **数据查询** |
+| 分数线查询   | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| 位次查询     | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| 院校库       | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| 专业库       | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| **智能推荐** |
+| 分数匹配院校 | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| 冲稳保分类   | ✅ 必须有 | ⚠️ 文案提及 | 🟡 部分 |
+| 风险评估     | ✅ 必须有 | ⚠️ 简单等级 | 🟡 部分 |
+| **用户管理** |
+| 历史订单     | ✅ 必须有 | ❌ 无入口   | 🔴 缺失 |
+| 多份报告     | ✅ 必须有 | ❌ 无入口   | 🔴 缺失 |
+| 对比功能     | ✅ 应该有 | ❌ 无       | 🟡 缺失 |
+| **协作功能** |
+| 分享给家人   | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| 导出PDF      | ✅ 必须有 | ❌ 无       | 🔴 缺失 |
+| 打印         | ✅ 应该有 | ❌ 无       | 🟡 缺失 |
+| **服务保障** |
+| 隐私政策     | ✅ 有     | ✅ 有       | 🟢 合格 |
+| 删除申请     | ✅ 有     | ✅ 有       | 🟢 合格 |
+| 客服入口     | ✅ 必须有 | ❌ 无       | 🔴 缺失 |

 ---

-### D) 组件库建议
+## 五、修订后评分（更严格标准）

-#### D-1 必须组件（优先实现）
+| 页面                            | 信息架构 | 交互完整性 | 视觉一致性 | 状态完整性 | 响应式 | 可访问性 | 总评       |
+| ------------------------------- | -------- | ---------- | ---------- | ---------- | ------ | -------- | ---------- |
+| **首页** `/`                    | 6/10     | 5/10       | 7/10       | 4/10       | 5/10   | 6/10     | **5.5/10** |
+| **复核结果页** `/review/start`  | 5/10     | 4/10       | 7/10       | 4/10       | 5/10   | 6/10     | **5.2/10** |
+| **定价页** `/pricing`           | 7/10     | 6/10       | 9/10       | 7/10       | 7/10   | 7/10     | **7.2/10** |
+| **结账页** `/checkout/standard` | 7/10     | 6/10       | 9/10       | 7/10       | 7/10   | 7/10     | **7.2/10** |
+| **Portal 状态页**               | 5/10     | 4/10       | 6/10       | 3/10       | 4/10   | 5/10     | **4.5/10** |
+| **Portal 资料页**               | 5/10     | 4/10       | 6/10       | 3/10       | 4/10   | 5/10     | **4.5/10** |

-| 组件          | 用途           | 页面             |
-| ------------- | -------------- | ---------------- |
-| `Button`      | 所有 CTA       | 全页             |
-| `Input`       | 所有表单字段   | 结账/Portal      |
-| `Card`        | 定价卡、特性卡 | 定价/首页        |
-| `Select`      | 省份下拉       | 首页/结账/Portal |
-| `UploadZone`  | 文档上传       | Portal 资料页    |
-| `ProgressBar` | 多步向导       | Portal 资料页    |
-| `StatusBadge` | 状态标签       | Portal 状态页    |
-| `EmptyState`  | 空状态         | 所有数据展示页   |
-| `Skeleton`    | 加载骨架       | 所有异步数据页   |
-| `Toast`       | 成功/错误提示  | 全页             |
+**整体平均**：**5.7/10** — **远低于生产级标准（需 ≥8.5/10）**

-#### D-2 实现方式建议
-
-**方案 A：纯 CSS 组件库**（短期可行）
-
- 扩展 `portal-ui.css` 至 500+ 行
- 所有页面统一引用此文件
- 不依赖 JavaScript，纯 CSS 类名
-
-**方案 B：引入模板引擎**（中期推荐）
-
- 从 f-string HTML 改为 Jinja2 模板
- 创建 `templates/components/` 目录
- 每个组件独立文件，可复用
-
-**方案 C：引入前端框架**（长期可选）
-
- 迁移到 React/Vue 组件库
- 前后端分离，API + SPA
- 成本高，需要完整重构
-
-**推荐路径**：方案 A → 方案 B → 方案 C（分阶段）
+**结论**：前端存在致命缺陷，不适合直接上线。需要系统性重构。

 ---

-### E) 实施路线图
+## 六、修订后优化方案（分三阶段）

-#### 第一阶段（1-2 周）— P0 技术债务
+### 第一阶段（1周）— 修复致命缺陷（必须完成）

-**目标**：建立 design system 基线
+**目标**：让产品可用，避免用户在流程中迷失

-| 任务                                 | 预估时间 | 验收标准                 |
-| ------------------------------------ | -------- | ------------------------ |
-| 扩展 portal-ui.css 至完整 token 系统 | 3 天     | 500+ 行，覆盖所有组件    |
-| 将 31 处 inline style 迁移到 CSS 类  | 2 天     | inline style 数量降至 ≤5 |
-| 建立状态组件（skeleton/empty/error） | 2 天     | 每页至少有 loading 状态  |
-| 配置真实环境（Fernet key）           | 1 天     | Portal 可创建真实订单    |
+| 任务                            | 预估时间 | 优先级 | 验收标准                             |
+| ------------------------------- | -------- | ------ | ------------------------------------ |
+| 增加全局导航栏                  | 1天      | P0     | 所有页面有"首页/我的订单/帮助"导航   |
+| 复核结果页增加返回首页          | 0.5天    | P0     | 右上角"返回首页"链接                 |
+| 复核结果页增加保存/分享         | 1天      | P0     | 生成唯一链接，可分享给家人           |
+| 定价页/结账页增加返回首页       | 0.5天    | P0     | 底部"返回首页"链接                   |
+| Portal 状态页增加进度条         | 1天      | P0     | "资料提交→处理中→已交付"三阶段进度条 |
+| 状态组件（loading/empty/error） | 1天      | P0     | 每页至少有loading状态                |

-**交付物**：`portal-ui.css` 2.0 + 状态组件库
+**交付物**：可用性基础修复 + 状态组件库

 ---

-#### 第二阶段（2-3 周）— P1 体验补齐
+### 第二阶段（2周）— 补齐核心功能

-**目标**：首页真正产品化
+**目标**：达到行业基础功能线

-| 任务                 | 预估时间 | 验收标准               |
-| -------------------- | -------- | ---------------------- |
-| 首页增加高信任证据带 | 2 天     | 社会证明/数据背书显眼  |
-| 首页业务流程入口强化 | 1 天     | 两条主路径视觉权重相等 |
-| 响应式适配（移动端） | 3 天     | 所有页面移动端可用     |
-| 表单即时校验层       | 2 天     | 字段失焦即校验         |
+| 任务             | 预估时间 | 优先级 | 验收标准                     |
+| ---------------- | -------- | ------ | ---------------------------- |
+| 订单历史管理页   | 2天      | P1     | 用户可查看所有历史订单       |
+| 报告列表页       | 2天      | P1     | 用户可查看所有报告           |
+| 表单即时校验层   | 2天      | P1     | 字段失焦即校验，友好错误提示 |
+| 移动端响应式适配 | 3天      | P1     | 所有页面移动端可用           |
+| 交付后下一步引导 | 1天      | P1     | "下载/分享/继续规划"三选项   |
+| 客服入口         | 0.5天    | P1     | 页面底部"联系客服"           |

-**交付物**：首页产品化 + 移动端适配 + 表单校验
+**交付物**：订单/报告管理 + 移动端适配 + 客服

 ---

-#### 第三阶段（3-4 周）— P2 前端现代化
+### 第三阶段（3-4周）— 产品化提升

-**目标**：建立真正的前端组件库
+**目标**：达到生产级标准（≥8.5/10）

-| 任务                    | 预估时间 | 验收标准                    |
-| ----------------------- | -------- | --------------------------- |
-| 引入 Jinja2 模板引擎    | 3 天     | 15 个页面迁移到 templates/  |
-| 建立 10 个核心组件      | 5 天     | Button/Input/Card/Upload 等 |
-| 可访问性审计与修复      | 2 天     | 键盘可达、对比度合格        |
-| 性能优化（懒加载/压缩） | 2 天     | 首屏加载 <2s                |
+| 任务                               | 预估时间 | 优先级 | 验收标准               |
+| ---------------------------------- | -------- | ------ | ---------------------- |
+| 数据查询功能（分数线/位次/院校库） | 1周      | P2     | 用户可自助查询基础数据 |
+| 报告对比功能                       | 2天      | P2     | 用户可对比多份报告     |
+| 分享到微信/社交                    | 1天      | P2     | 一键分享功能           |
+| 导出PDF                            | 1天      | P2     | 报告导出为PDF          |
+| 可访问性审计与修复                 | 2天      | P2     | 键盘可达、对比度合格   |
+| 性能优化                           | 2天      | P2     | 首屏加载 <2s           |

-**交付物**：模板引擎 + 组件库 + 可访问性达标
+**交付物**：数据查询 + 分享/导出 + 可访问性

 ---

-#### 第四阶段（4-6 周）— 前后端分离（可选）
+## 七、验收标准（修订后）

-**目标**：现代化前端架构（长期）
+### 生产级门槛清单（必须全部通过）

-| 任务             | 预估时间 | 验收标准             |
-| ---------------- | -------- | -------------------- |
-| 前后端 API 分离  | 3 周     | 前端 SPA，后端仅 API |
-| React/Vue 组件库 | 2 周     | 20+ 可复用组件       |
-| CI/CD 自动化测试 | 1 周     | 前端测试覆盖率 ≥80%  |
+**基础可用性**：

-**决策点**：是否需要前后端分离取决于：
-
- 团队规模（≥3 人推荐）
- 长期维护需求
- 技术栈偏好
-
---
-
-## 四、验收标准（生产级门槛）
-
-### 前端生产级验收清单
-
-**技术债务**：
-
- [ ] 单文件不超过 500 行（当前 3501 行 → 目标拆分）
- [ ] inline style 数量 ≤5（当前 31 处 → 目标 ≤5）
- [ ] CSS 文件 ≥500 行（当前 139 行 → 目标 ≥500）
+- [ ] 全局导航栏存在且可用
+- [ ] 每页有返回首页链接
+- [ ] 每页有返回上一级链接（深层页面）
+- [ ] 关键结果页有保存/分享功能
+- [ ] 关键结果页有打印/导出功能

 **状态完整性**：

- [ ] 每页至少有 loading/empty/error 三态
- [ ] 表单字段有即时校验 + 错误提示
- [ ] 关键动作后有成功反馈 + 下一步引导
+- [ ] 每个异步操作有loading状态
+- [ ] 每个数据展示区有empty状态
+- [ ] 每个可能失败的点有error状态
+- [ ] 每个关键操作有success状态

-**视觉一致性**：
+**交互完整性**：

- [ ] 所有页面使用统一 design token
- [ ] 组件样式一致（按钮/输入框/卡片）
- [ ] 颜色/圆角/间距符合系统规范
+- [ ] 表单有即时校验
+- [ ] 错误提示友好且可恢复
+- [ ] 多步流程有进度指示
+- [ ] 暂缓决策有保存/稍后选项

-**响应式**：
+**业务流程完整性**：

- [ ] 移动端（<980px）有独立布局
- [ ] 关键 CTA 在移动端可点击
- [ ] 表单在移动端可填写
+- [ ] 用户可查看历史订单
+- [ ] 用户可查看所有报告
+- [ ] 每个阶段有下一步引导
+- [ ] 交付后有明确行动选项

-**可访问性**：
+**移动端适配**：

- [ ] 键盘焦点可见
- [ ] 对比度 ≥4.5:1（WCAG AA）
- [ ] 语义标签正确（button/nav/form）
+- [ ] 所有页面移动端可用
+- [ ] 关键CTA在手机上可点击
+- [ ] 表单在手机上可填写

-**业务流程**：
+**信任建设**：

- [ ] 每页有明确下一步引导
- [ ] 用户不会在流程中迷失
- [ ] 支付后有明确状态追踪
+- [ ] 隐私政策/删除申请入口显眼
+- [ ] 客服入口存在
+- [ ] 服务保障文案清晰

 ---

-## 五、总结
+## 八、总结

 ### 当前状态

- **整体评分**：7.2/10（未达生产级标准 8.5/10）
- **核心问题**：代码架构债务 + 状态不完整 + 缺少前端组件层
- **已有成果**：定价页/结账页已成熟（8.5/10），首页/Portal 仍有明显缺口
+- **整体评分**：**5.7/10**（远低于生产级标准 8.5/10）
+- **致命问题**：全局导航缺失、返回路径缺失、保存/分享缺失
+- **核心功能缺失**：订单管理、报告管理、数据查询
+- **状态完整性**：严重不足，用户等待/出错时无反馈

 ### 立即行动项

 **本周必须完成**：

-1. 配置真实环境（Fernet key）→ Portal 可用
-2. 扩展 portal-ui.css → design token 基线
-3. 建立状态组件 → loading/empty/error
+1. 全局导航栏（1天）
+2. 复核结果页返回首页 + 保存/分享（1.5天）
+3. 定价/结账页返回首页（0.5天）
+4. Portal 进度条（1天）
+5. 状态组件（1天）

-**下周补齐**：
-
-1. 首页高信任证据带
-2. 移动端响应式
-3. 表单即时校验
+**总计**：5天（1周内完成）

 ### 长期方向

-**推荐路径**：纯 CSS 组件库 → Jinja2 模板引擎 → 前后端分离（可选）
+**三阶段路线**：

-**成本估算**：
-
- 第一阶段：1-2 周
- 第二阶段：2-3 周
- 第三阶段：3-4 周
- 第四阶段：4-6 周（可选）
+- 第一阶段（1周）：修复致命缺陷 → 可用
+- 第二阶段（2周）：补齐核心功能 → 行业基础线
+- 第三阶段（3-4周）：产品化提升 → 生产级标准

 **最终目标**：前端评分 ≥8.5/10，达到生产级上线标准
+
+---
+
+**文档版本**：v2（严格评审版）  
+**上次更新**：2026-06-26