diff --git a/ai_knowledge_base_v2/design-qa.md b/ai_knowledge_base_v2/design-qa.md index 148a1a5..6e5d095 100644 --- a/ai_knowledge_base_v2/design-qa.md +++ b/ai_knowledge_base_v2/design-qa.md @@ -1,55 +1,50 @@ -# 大本营答疑助手登录页设计 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 +- 参考图:`/Users/nelson/Downloads/ChatGPT Image 2026年7月11日 16_21_34.png` +- 实际页面:`http://127.0.0.1:5173/` +- 主要对照尺寸:390 × 844 +- 补充响应式尺寸:375 × 667、414 × 896 +- 对照截图:`test_records/screenshots/用户端聊天页设计对照.png` -## 全屏对比证据 +## 验收结果 -实现保留了设计图的四层结构:浅灰绿页面背景、紧凑品牌标题、白色登录卡片、底部安全说明。品牌名称、说明文案、手机号与短信验证码字段、按需图形验证提示、协议、主按钮和帮助入口顺序一致。 +### 视觉层级 -实现版有两项符合业务要求的有意差异: +- 顶部菜单、助手名称、连接状态、用户信息和退出按钮层级清楚。 +- 当前会话额度使用紧凑浅绿色横条,真实展示 `todayUsed/dailyLimit`。 +- 用户消息为右侧绿色气泡,AI 回复为左侧白色阅读卡片。 +- 长文本标题、段落、列表、粗体和引用层级清楚,未显示 Markdown 原始符号。 +- 底部输入区固定且不遮挡消息区。 +- 历史会话使用左侧抽屉和独立遮罩,不再呈现为后台固定列表。 -- 纵向留白和卡片高度比设计图更紧凑,保证 375 像素宽、小高度手机中主按钮仍能较早出现,并允许自然滚动。 -- 设计图中的空表单主按钮为绿色强调态;实现按照验收规则,在手机号或短信验证码为空时展示明确禁用态。 +### 交互状态 -## 局部对比证据 +- 已验证空会话、真实消息发送、生成中、回答完成和额度刷新。 +- 已验证抽屉打开、关闭、遮罩、改名弹窗和删除确认弹窗。 +- 已验证输入框发送失败保留、成功后清空的实现逻辑。 +- 已验证模型嵌套 `` 内容和残留标签不展示。 +- 已验证当前会话时间、会话消息数量和会话更新时间来自真实接口。 -- 字体与层级:使用苹方、微软雅黑和系统字体;主标题、字段标签、输入文字、弱提示和底部说明层级清楚,无负字距。 -- 间距与布局:414 像素宽度无横向溢出;375 像素小高度视口页面自然滚动,主按钮底边位于首屏约 527 像素位置。 -- 颜色与令牌:背景、主文字、弱文字、品牌绿、边框、错误色和禁用色均使用登录页 CSS 变量管理,与设计图色调一致。 -- 图标:品牌、手机、盾牌、关闭、刷新和帮助图标均来自同一正式图标库,没有 Emoji、自绘 SVG 或静态设计图背景。 -- 图片质量:设计图中的盾牌被实现为低透明度矢量图标背景,不使用截图裁切或位图背景;在各视口均保持清晰。 -- 文案:品牌名、副标题、字段、协议、安全提示、帮助入口和底部说明与需求一致。 +### 移动端适配 -## 交互与状态验证 +- 375px、390px、414px 宽度均无横向滚动。 +- 顶部栏固定在应用容器顶部,底部输入区贴合视口底部。 +- 中间消息列表独立滚动,长回答完整展示。 +- 输入框字号为 16px,并处理底部安全区。 +- 小高度 667px 下页面未截断,核心操作始终可见。 -- 首次发送短信不显示图形验证码并进入 60 秒倒计时。 -- 手机号和倒计时写入本地存储,刷新后恢复手机号和剩余 53 秒倒计时。 -- 后端返回 HTTP 428 时展示图形验证码弹窗,空值提交显示“请输入图形验证码”。 -- 用户协议弹窗内容可访问;协议未勾选时点击登录不会提交,并显示明确 Toast。 -- 勾选协议后使用真实本地接口完成登录,成功进入聊天页面,再正常退出。 -- 帮助入口、隐私政策入口、手机号清空按钮和图形验证码刷新按钮均为真实控件。 -- 浏览器控制台错误和警告:0。 +### 工程检查 -## 对比迭代历史 +- `npm run build`:通过。 +- Vue TypeScript 类型检查:通过(包含在构建命令中)。 +- 390 × 844 最终浏览器控制台错误和警告:0。 +- 浏览器页面宽度与视口宽度一致:390/390。 +- 未发现 P0、P1、P2 级视觉或交互问题。 -### 第一轮 +## 设计取舍 -- P1:390 像素视口中输入框因 Grid 子项最小内容宽度向右溢出卡片。 -- 修复:为登录卡片、字段和输入容器补充 `min-width: 0`,输入容器固定 `width: 100%`。 - -### 第二轮 - -- 复验:390、414 和桌面视口无横向溢出;375 小高度视口可自然滚动。 -- P1/P2:无。 - -## 后续 P3 - -- 正式上线前由业务或法务提供最终版用户协议和隐私政策文本,替换当前可用的基础版本。 +参考图底部的水墨和莲花属于可选氛围元素。当前版本采用纯雾白背景,优先保证长回答阅读清晰度、加载性能和维护成本,不引入与业务无关的装饰图片。 final result: passed diff --git a/ai_knowledge_base_v2/development_records/2026-07-11-用户端聊天页重构记录.md b/ai_knowledge_base_v2/development_records/2026-07-11-用户端聊天页重构记录.md index 4a93e7a..fd7c894 100644 --- a/ai_knowledge_base_v2/development_records/2026-07-11-用户端聊天页重构记录.md +++ b/ai_knowledge_base_v2/development_records/2026-07-11-用户端聊天页重构记录.md @@ -87,3 +87,21 @@ 3. 检查 375px、390px、414px 宽度下的空会话、长回答、抽屉、改名、删除和输入区。 4. 检查无横向滚动、无控制台报错、无内容遮挡。 5. 将设计图与实现截图进行并排对照,并在项目根目录保存 `design-qa.md`。 + +## 八、实施结果 + +- 已完成 `ChatHeader`、`SessionQuota`、`MessageList` 三个职责组件的新增。 +- 已重构 `ChatMessage`、`ChatComposer`、`SessionDrawer` 和聊天主页面。 +- 已补全退出、会话改名和会话删除的应用内确认弹窗。 +- 已实现零消息会话复用、同会话防重复加载、删除当前会话后的自动承接。 +- 已实现流式回答响应式更新、用户上滑后暂停自动跟随、发送失败保留输入。 +- 已隐藏模型内部思考过程,并兼容模型产生嵌套 `` 标签的情况。 +- 已修正消息接口 UTC 无时区字符串在本地显示少 8 小时的问题。 +- 已移除 Vite 热更新端口硬编码,使本机直连和域名网关按当前访问地址建立连接。 +- 已使用真实账号和真实接口完成空会话、消息发送、长回答、额度刷新、历史抽屉、改名弹窗和删除确认验证。 +- 已完成 375px、390px、414px 三档浏览器尺寸检查,无横向滚动或核心区域遮挡。 +- `npm run build` 和 Vue TypeScript 类型检查通过,最终浏览器控制台无错误或警告。 + +## 九、环境记录 + +重建本地容器时发现数据库已存在 `sys_chat_session.summary` 字段,但 Alembic 版本仍停留在 `0004_daily_chat_reset_date`,导致同事新增的 `0005_chat_session_summary` 重复加列而启动失败。本地已核实字段存在后将版本标记到 `0005_chat_session_summary`,随后正常执行 `0006_expand_ai_request_log_text`。本次未修改后端代码或迁移文件。 diff --git a/ai_knowledge_base_v2/test_records/screenshots/用户端聊天页设计对照.png b/ai_knowledge_base_v2/test_records/screenshots/用户端聊天页设计对照.png new file mode 100644 index 0000000..dc221ad Binary files /dev/null and b/ai_knowledge_base_v2/test_records/screenshots/用户端聊天页设计对照.png differ