246 lines
5.6 KiB
Markdown
246 lines
5.6 KiB
Markdown
# FRONTEND_UI_AUDIT_2026-06-16
|
||
|
||
状态词: 本地审计完成（代码审计 + 浏览器视觉审计 + 基础门禁验证）
|
||
真相源: `docs/CURRENT_STATE.md`
|
||
适用范围: T12 用户端 Web 自助 MVP + `/dashboard` 管理后台 UI
|
||
|
||
---
|
||
|
||
## 1. 审计目标
|
||
|
||
本次审计聚焦以下问题：
|
||
|
||
- UI 设计是否专业
|
||
- 是否存在明显 AI 模板痕迹
|
||
- 是否达到大厂级产品设计能力
|
||
- 前端是否遵循行业最佳实践
|
||
- 用户体验是否足以支持真实付费转化
|
||
|
||
---
|
||
|
||
## 2. 审计方法与证据
|
||
|
||
### 2.1 代码审计
|
||
|
||
关键文件：
|
||
|
||
- `admin/routes/web_public.py`
|
||
- `admin/routes/ui.py`
|
||
- `admin/routes/notifications.py`
|
||
- `admin/static/dashboard.html`
|
||
- `admin/static/dashboard.js`
|
||
|
||
代码结构证据：
|
||
|
||
- `admin/routes/web_public.py`：11 处 `<!doctype html>`、43 处 `style=`、3 处 `<script>`
|
||
- `admin/routes/notifications.py`：3 处 `<!doctype html>`、17 处 `style=`
|
||
- 前端页面主要由 Python 内联 HTML + inline style/script 拼接生成，缺少 design system / 组件层 / token 层。
|
||
|
||
### 2.2 实测页面
|
||
|
||
已在本地服务 `http://127.0.0.1:18081` 实际打开并审查：
|
||
|
||
- `/`
|
||
- `/pricing`
|
||
- `/checkout/standard`
|
||
- `/dashboard`
|
||
|
||
### 2.3 测试证据
|
||
|
||
命令：
|
||
`. .venv/bin/activate && python -m pytest admin/tests/test_web_public.py admin/tests/test_admin_ui_pages.py -q`
|
||
|
||
结果：
|
||
`13 passed, 2 warnings in 1.59s`
|
||
|
||
### 2.4 真实运行缺口证据
|
||
|
||
`POST /api/public/orders` 在本地真实运行返回 500。
|
||
|
||
根因日志：
|
||
|
||
- `MissingEncryptionKey`
|
||
- `GAOKAO_ORDERS_FERNET_KEY 未设置`
|
||
|
||
结论：测试通过 ≠ 用户真实下单可用。
|
||
|
||
---
|
||
|
||
## 3. 总体结论
|
||
|
||
### 3.1 用户端 Web 自助前端
|
||
|
||
结论: 未达到上线质量
|
||
|
||
判断：
|
||
|
||
- UI 专业度: 未达到
|
||
- 去 AI 痕迹: 未达到
|
||
- 大厂级产品化: 未达到
|
||
- 前端最佳实践: 条件达到
|
||
- 用户体验: 未达到
|
||
|
||
### 3.2 管理后台前端
|
||
|
||
结论: 未达到专业后台标准
|
||
|
||
判断：
|
||
|
||
- 仍偏开发者自检页 / 最小仪表盘
|
||
- 技术细节暴露严重
|
||
- 数据可视化与空状态设计不足
|
||
- 不符合大厂后台的导航、权限、状态、信息层级标准
|
||
|
||
---
|
||
|
||
## 4. 关键问题清单
|
||
|
||
### P0 / Blocker
|
||
|
||
1. 用户端页面暴露工程/开发术语
|
||
|
||
- 证据:
|
||
- `Mock 支付沙箱`
|
||
- `支付接入建设中`
|
||
- `最小 Web 自助闭环`
|
||
- 影响:
|
||
- 直接破坏真实用户信任，尤其在高考付费场景下属于转化阻断。
|
||
|
||
2. 真实下单闭环在当前运行环境中失败
|
||
|
||
- 证据:
|
||
- `POST /api/public/orders` → 500
|
||
- 根因: `GAOKAO_ORDERS_FERNET_KEY` 缺失
|
||
- 影响:
|
||
- 前端结账页无法完成真实主链路验收。
|
||
|
||
3. 首页 / 定价页缺少付费教育产品必需的信任构建模块
|
||
|
||
- 缺失:
|
||
- 品牌识别
|
||
- 专家背书
|
||
- 服务保障
|
||
- 用户案例/社会证明
|
||
- FAQ / 联系方式 / 转化引导
|
||
- 影响:
|
||
- 用户愿意付费的信任链不成立。
|
||
|
||
### P1 / High
|
||
|
||
4. 首页结构明显模板化，AI 痕迹重
|
||
|
||
- 深色 hero + 三卡 + 白底圆角 section，是高度通用 SaaS 模板。
|
||
- “当前自助流程建设重点”像内部研发 TODO，不像用户价值说明。
|
||
|
||
5. 定价页商业信息密度严重不足
|
||
|
||
- 三档卡片只有标题+价格+按钮
|
||
- 无功能对比、无推荐档、无适用人群、无交付说明
|
||
- 99 元主推档没有视觉强调
|
||
|
||
6. 结账页是开发表单，不是商业结账页
|
||
|
||
- 无订单摘要
|
||
- 无支付方式选择
|
||
- 无信任锚点/保障信息
|
||
- 无更完整状态反馈（loading / success / recoverable error）
|
||
|
||
7. 管理后台暴露技术细节
|
||
|
||
- 证据:
|
||
- `最小仪表盘`
|
||
- `接口: /api/stats/dashboard`
|
||
- `admin_users 总数`
|
||
- 影响:
|
||
- 页面像开发者工具，不像业务后台。
|
||
|
||
### P2 / Medium
|
||
|
||
8. 前端缺少统一 design system
|
||
|
||
- 无共享 token / 组件库 / 统一交互模式
|
||
- inline style 多，后续一致性难以保证
|
||
|
||
9. Portal 向导页与状态页仍偏系统页
|
||
|
||
- 虽然功能路径存在，但视觉和产品语义仍缺少打磨
|
||
- 更像“内部系统流程页”，不是付费服务体验页
|
||
|
||
10. 可维护性不足
|
||
|
||
- 内联 HTML / style / script 导致页面迭代成本高
|
||
- 不利于后续去 AI 痕迹与大厂化设计统一落地
|
||
|
||
---
|
||
|
||
## 5. 页面级判定
|
||
|
||
### `/` 首页
|
||
|
||
结论: 粗糙待重构
|
||
|
||
主要问题：
|
||
|
||
- AI 模板感强
|
||
- C 端/B 端入口混线
|
||
- 缺少商业化首页必备信任模块
|
||
- 信息架构像介绍一个开发项目，而不是销售一个教育服务
|
||
|
||
### `/pricing` 定价页
|
||
|
||
结论: 粗糙待重构
|
||
|
||
主要问题：
|
||
|
||
- 直接暴露 `Mock 支付沙箱` / `支付接入建设中`
|
||
- 套餐卡没有功能清单与推荐策略
|
||
- 商业转化设计不足
|
||
|
||
### `/checkout/standard` 结账页
|
||
|
||
结论: 条件达标（仅表单可用），不具备商业结账页质量
|
||
|
||
主要问题：
|
||
|
||
- 可提交最小表单，但产品化/支付转化设计不足
|
||
- 无订单摘要、无信任设计、无支付认知引导
|
||
- 真实接口当前还被配置缺口阻断
|
||
|
||
### `/dashboard` 管理后台
|
||
|
||
结论: 粗糙待重构
|
||
|
||
主要问题：
|
||
|
||
- 技术细节直出
|
||
- 登录与业务看板混在一起
|
||
- 图表空状态设计和数据语义都不专业
|
||
|
||
---
|
||
|
||
## 6. 建议的整改策略
|
||
|
||
优先顺序：
|
||
|
||
1. 先修 P0（去开发文案 + 真实下单闭环约束 + 用户信任链）
|
||
2. 再修 P1（首页/定价/结账三页产品化重构）
|
||
3. 最后修 P2（统一 design system + dashboard 专业化）
|
||
|
||
首批必须先动的 3 个页面：
|
||
|
||
1. `/pricing`
|
||
2. `/checkout/standard`
|
||
3. `/`
|
||
|
||
后台 `/dashboard` 排在第二批，因为当前商业转化损失主要发生在用户端链路。
|
||
|
||
---
|
||
|
||
## 7. 关联执行板
|
||
|
||
执行真相请看：
|
||
|
||
- `docs/FRONTEND_UI_EXECUTION_BOARD_2026-06-16.md`
|
||
|
||
本报告负责解释问题；执行板负责推动整改。
|