mileage-bonus/prototype/design/verification.md

原型验证记录

设计参考：concept.png。浏览器实测：Chrome Browser 工具，桌面 1536×1024、手机 390×844。desktop.png、mobile.png 为浏览器截图，未采用外部 Playwright。已通过 view_image 检查概念图与桌面实现图。

设计对照

检查点	参考与实现	处理
导航与布局	左侧导航、顶部面包屑、主区四步流程	保留，手机切换顶部导航
配色	白色面板、冷灰背景、深蓝文字、青绿主色	保留
字体	中文无衬线、层次分明，统一表单字体	统一 CSS；桌面标题 34px、表格 13px
表格结构	六行车辆、完成率条、三态结果、详情入口	保留，修正生成图中 7980/8000 误标达标的示例
留白与密度	四项指标、宽表格	首轮桌面行距过大，已压缩为 12px 垂直 padding
状态与操作	主按钮开始试算、搜索与状态过滤	实现可交互状态、异常列表与追溯抽屉
响应式	桌面完整表格	手机指标两列、宽表局部横向滚动，无页面横向溢出

首屏文案对照：标题、副标题、四步流程、导航、主操作和指标名称保留。业务修订：演示目标改为项目已有的 3000/5000/6000 档位；缺失值显示“—”，不生成伪完成率；底部将“数据来源优先级”改为“数据来源”，避免误导为适用所有日期的简单优先级。新增模式切换、异常计数、快照/导出工具条为实际接口联调所需。Logo 使用清晰的活动线图标，未复制生成图中虚构品牌图形；去除没有登录支撑的“管理员”入口。实现遵循参考的主要布局、颜色和组件体系，这些有意差异不属于逐像素复刻。

功能检查

• npm run build 通过。
• 浏览器：搜索定位 DEMO-006，查看逐日依据；清空搜索并按达标筛选得到 3 条；演示试算成功；JSON 基本结构检查成功；API 健康检测成功。浏览器无 error 日志。
• API 集成：prototype/.venv/bin/python prototype/check_api.py 通过上传、开发代理、3720 km 试算、31 条日依据、重复请求同快照 ID、Excel 内容验证、缺里程异常与 409 拦截。
• 浏览器扩展自动上传被文件权限限制，未完成浏览器端文件选择到上传的端到端验证；文件上传 HTTP 路径已通过同一个 Vite 代理验证。用户手动选择文件不依赖自动化扩展的文件访问能力。
• 手机 390×844 已检查：26px 标题，页面宽度未溢出。

范围限制

奖金、结转、补发、最新业务算法迁移、审批、生产数据源拉取尚未实现。API 文档明确区分已实现接口与建议接口。快照选用状态仅在页面内存中保存，刷新后需重新选择导入文件；已有服务快照不删除。