diff --git a/ai_knowledge_base_v2/apps/user-client/.env.example b/ai_knowledge_base_v2/apps/user-client/.env.example index 14ea4ad..caed085 100644 --- a/ai_knowledge_base_v2/apps/user-client/.env.example +++ b/ai_knowledge_base_v2/apps/user-client/.env.example @@ -1 +1,3 @@ VITE_API_BASE_URL=/api +# 可选:登录帮助弹窗展示的工作人员联系方式 +VITE_SUPPORT_CONTACT= diff --git a/ai_knowledge_base_v2/design-qa.md b/ai_knowledge_base_v2/design-qa.md new file mode 100644 index 0000000..148a1a5 --- /dev/null +++ b/ai_knowledge_base_v2/design-qa.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 diff --git a/ai_knowledge_base_v2/design_references/user-login-reference-20260710.png b/ai_knowledge_base_v2/design_references/user-login-reference-20260710.png new file mode 100644 index 0000000..6fd67f1 Binary files /dev/null and b/ai_knowledge_base_v2/design_references/user-login-reference-20260710.png differ diff --git a/ai_knowledge_base_v2/development_records/2026-07-10-user-login-redesign.md b/ai_knowledge_base_v2/development_records/2026-07-10-user-login-redesign.md index 0f03a8b..7508f5d 100644 --- a/ai_knowledge_base_v2/development_records/2026-07-10-user-login-redesign.md +++ b/ai_knowledge_base_v2/development_records/2026-07-10-user-login-redesign.md @@ -46,3 +46,23 @@ - 手机号、短信码、加载、网络、超时、错误、重复点击状态均有明确处理。 - 375、390、414 像素宽度及桌面端不横向溢出、不固定高度截断。 - 构建、类型检查、后端测试、接口兼容测试和设计 QA 全部通过。 + +## 实施结果 + +1. `808ba74`:短信发送协议向后兼容地支持可选图形验证码;首次发送直接执行,后续发送或风险状态返回 HTTP 428;后端测试增加到 9 项。 +2. `2e274de`:重构登录表单、主题样式和 API 错误;新增协议、隐私、帮助和通用弹窗;加入正式图标依赖;完成按手机号持久化倒计时。 +3. `fc8a593`:修复 390 像素视口输入容器横向溢出。 +4. `dc4b1bf`:持久化最近一次合法手机号,页面刷新后可立即恢复对应倒计时。 + +## 验证结论 + +- 375 × 667:无横向溢出,允许自然滚动,主按钮仍位于首屏范围内。 +- 390 × 844、414 × 896:登录结构完整,无重叠或截断。 +- 1280 × 900:主体宽度固定为 460 像素并水平居中。 +- 实测首次发送、倒计时、刷新恢复、按需图形验证、协议拦截、协议弹窗、帮助弹窗、真实登录和退出。 +- 浏览器控制台无错误或警告。 +- 设计 QA 报告:`design-qa.md`,最终结果为通过。 + +## 待业务确认 + +当前用户协议和隐私政策为可正常查看的基础版本。正式法律文本不属于代码推断范围,上线前应由业务或法务确认最终内容;替换文本不需要改变现有交互和接口。 diff --git a/ai_knowledge_base_v2/test_records/screenshots/user-login-414-final.png b/ai_knowledge_base_v2/test_records/screenshots/user-login-414-final.png new file mode 100644 index 0000000..e54778f Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/user-login-414-final.png differ diff --git a/ai_knowledge_base_v2/test_records/screenshots/user-login-design-comparison.jpg b/ai_knowledge_base_v2/test_records/screenshots/user-login-design-comparison.jpg new file mode 100644 index 0000000..6e977e3 Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/user-login-design-comparison.jpg differ