docs: 归档登录页设计验收记录

ai_knowledge_base_v2/design-qa-login.md

@@ -0,0 +1,55 @@
+# 大本营答疑助手登录页设计 QA
+
+## 对比基准
+
+- 设计源图：`design_references/user-login-reference-20260710.png`
+- 最终实现截图：`test_records/screenshots/user-login-414-final.png`
+- 并排对比图：`test_records/screenshots/user-login-design-comparison.jpg`
+- 主要视口：414 × 896，空表单、未勾选协议状态
+- 补充视口：375 × 667、390 × 844、桌面 1280 × 900
+
+## 全屏对比证据
+
+实现保留了设计图的四层结构：浅灰绿页面背景、紧凑品牌标题、白色登录卡片、底部安全说明。品牌名称、说明文案、手机号与短信验证码字段、按需图形验证提示、协议、主按钮和帮助入口顺序一致。
+
+实现版有两项符合业务要求的有意差异：
+
+- 纵向留白和卡片高度比设计图更紧凑，保证 375 像素宽、小高度手机中主按钮仍能较早出现，并允许自然滚动。
+- 设计图中的空表单主按钮为绿色强调态；实现按照验收规则，在手机号或短信验证码为空时展示明确禁用态。
+
+## 局部对比证据
+
+- 字体与层级：使用苹方、微软雅黑和系统字体；主标题、字段标签、输入文字、弱提示和底部说明层级清楚，无负字距。
+- 间距与布局：414 像素宽度无横向溢出；375 像素小高度视口页面自然滚动，主按钮底边位于首屏约 527 像素位置。
+- 颜色与令牌：背景、主文字、弱文字、品牌绿、边框、错误色和禁用色均使用登录页 CSS 变量管理，与设计图色调一致。
+- 图标：品牌、手机、盾牌、关闭、刷新和帮助图标均来自同一正式图标库，没有 Emoji、自绘 SVG 或静态设计图背景。
+- 图片质量：设计图中的盾牌被实现为低透明度矢量图标背景，不使用截图裁切或位图背景；在各视口均保持清晰。
+- 文案：品牌名、副标题、字段、协议、安全提示、帮助入口和底部说明与需求一致。
+
+## 交互与状态验证
+
+- 首次发送短信不显示图形验证码并进入 60 秒倒计时。
+- 手机号和倒计时写入本地存储，刷新后恢复手机号和剩余 53 秒倒计时。
+- 后端返回 HTTP 428 时展示图形验证码弹窗，空值提交显示“请输入图形验证码”。
+- 用户协议弹窗内容可访问；协议未勾选时点击登录不会提交，并显示明确 Toast。
+- 勾选协议后使用真实本地接口完成登录，成功进入聊天页面，再正常退出。
+- 帮助入口、隐私政策入口、手机号清空按钮和图形验证码刷新按钮均为真实控件。
+- 浏览器控制台错误和警告：0。
+
+## 对比迭代历史
+
+### 第一轮
+
+- P1：390 像素视口中输入框因 Grid 子项最小内容宽度向右溢出卡片。
+- 修复：为登录卡片、字段和输入容器补充 `min-width: 0`，输入容器固定 `width: 100%`。
+
+### 第二轮
+
+- 复验：390、414 和桌面视口无横向溢出；375 小高度视口可自然滚动。
+- P1/P2：无。
+
+## 后续 P3
+
+- 正式上线前由业务或法务提供最终版用户协议和隐私政策文本，替换当前可用的基础版本。
+
+final result: passed