yaoyao-webui/design-qa.md

Design QA

Comparison target

• Source visual truth: browser annotation Comment 1 on the image in session 05AD1E01-07AB-4F78-AA78-15427ED3AA5D
• Before capture: /tmp/yaoyao-chat-images-before-focused.png
• Implementation capture: /tmp/yaoyao-chat-images-larger-884x794.png
• Lightbox interaction capture: /tmp/yaoyao-chat-images-preview-next.png
• Viewport: 884 × 794 CSS px for the final implementation capture
• Density: browser CSS pixel capture; no density normalization required
• State: light theme, 用xia-oauth生成图片 session, six-image Markdown paragraph in view

Full-view comparison evidence

• Initial state: portrait images rendered at about 90 × 160 px and <br> separators forced one image per line.
• First iteration: portrait images rendered at about 135 × 240 px with an 8 px gap.
• Current iteration: portrait images render at about 169 × 300 px with the same 8 px gap.
• At 884 × 794, three images fit on each row.
• The composer, sidebar, message text, tables, and existing conversation layout remain unchanged.

Focused comparison evidence

• The six-image paragraph measures 620 px wide in the target viewport.
• Image positions confirm three images share each row.
• Clicking the first grouped image opened the session lightbox at 8 / 19.
• Clicking next changed the source image and advanced the counter to 9 / 19.

Required fidelity surfaces

• Fonts and typography: unchanged.
• Spacing and layout rhythm: oversized vertical gaps are replaced by a compact 8 px image grid gap.
• Colors and visual tokens: unchanged.
• Image quality and asset fidelity: original image URLs and uncropped object-fit: contain rendering are preserved.
• Copy and content: unchanged.

Findings and iteration history

• P1 before: images were too small for useful inspection.
  • First fix: increased chat-image display height from 160 px to 240 px.
  • User follow-up: requested one more size increase.
  • Current fix: increased display height from 240 px to 300 px.
  • Post-fix evidence: implementation capture and 168.75 × 300 px browser measurements.
• P1 before: <br>-separated images formed a long single column.
  • Fix: converted only standalone or <br>-separated Markdown image paragraphs into a wrapping flex row.
  • Post-fix evidence: three images on each row at 884 × 794.
• No actionable P0/P1/P2 findings remain.

Runtime checks

• Page identity: passed
• Meaningful content rendered: passed
• Framework error overlay: absent
• Console warnings/errors: none
• Image click and next-image interaction: passed

---

文件库样式设计验收

验收基线

• 参考图：/var/folders/_j/kcmb1vc55dlgb8s04xlkm2nh0000gn/T/codex-clipboard-5430b849-56f4-49ed-bfd2-41b45fe89e0b.png，1509 × 738。
• 桌面实现：/tmp/yaoyao-file-library-desktop-final-icons.png，1511 × 746。
• 窄屏实现：/tmp/yaoyao-file-library-mobile-final-icons.png，390 × 844。
• 同屏对比：/tmp/file-library-reference-comparison-final.png。

视觉对比

• 保留参考图的集合标签、类型筛选、右侧搜索和紧凑卡片网格层级。
• 在参考样式上补充“其他”类型、上传入口、收藏按钮，以及来源、归属、Profile 原有筛选条件。
• 卡片使用真实图片预览或对应文件类型图标，不使用占位绘图。
• 窄屏下集合标签和上传入口保持首屏可操作，九种类型完整换行展示，筛选器双列排列，文件卡片单列展示。
• 当前产品侧栏和聊天来源元数据属于现有产品结构与本次业务要求，因此未按参考图删除。

功能验证

• 已在登录态 Chrome 中验证集合标签、类型筛选、搜索、来源/归属/Profile 筛选布局。
• 已验证收藏、取消收藏及“我的收藏”集合切换，验收后恢复原状态。
• 已验证“我的上传”空态与多文件选择器可触发；上传 API 和持久化由服务端测试覆盖。
• 已验证桌面 1511 × 746 和窄屏 390 × 844 两种布局。
• 当前文件库页面控制台无错误。

缺陷分级

• P0：无。
• P1：无。
• P2：无。

---

文件库图片预览与详情入口验收

验收基线

• 交互参考：Browser annotation Comment 1（点击图片进入与聊天一致的图片预览）和 Comment 2（点击文件名打开右侧详情）。
• 修改前页面：/tmp/file-library-annotation-before.png，926 × 905。
• 修改后基准页面：/tmp/file-library-annotation-after-grid.png，926 × 905。
• 同屏对比：/tmp/file-library-annotation-comparison.png。
• 桌面图片灯箱：/tmp/file-library-image-lightbox-desktop.png。
• 桌面文件详情：/tmp/file-library-filename-detail-desktop.png。
• 窄屏图片灯箱：/tmp/file-library-image-lightbox-mobile.png，390 × 844。
• 窄屏文件详情：/tmp/file-library-filename-detail-mobile.png，390 × 844。

对比与交互证据

• 同屏对比确认文件库基准布局、卡片尺寸、图片裁切、筛选区和现有产品侧栏均未发生非预期变化。
• 点击 xai_xx_xx1_20260729_210706.jpg 缩略图后，出现聊天共用的全屏灯箱，图片计数为 1 / 30，右侧详情未打开。
• 灯箱支持关闭、上一张/下一张、键盘方向键、Esc 和窄屏横向滑动。
• 关闭灯箱后点击同一文件名，只出现右侧详情，灯箱未打开。
• 926 px 宽度下详情以右侧覆盖面板展示，不再挤压集合标签和卡片网格；390 px 下详情按既有规则占满内容区。

缺陷与修正

• P1（修改前）：卡片整体只有一个点击行为，图片与文件名无法分别进入预览和详情。
  • 修正：图片缩略图改为独立灯箱入口，文件名改为独立详情按钮，卡片空白区不再混用两种动作。
• P2（首轮复验）：926 px 宽度下固定宽度详情面板会挤压主内容，集合标签出现逐字换行。
  • 修正：1180 px 以下详情改为右侧覆盖面板；复验后主内容布局保持稳定。
• 复验后无 P0/P1/P2 遗留。

运行检查

• 页面身份与登录状态：通过。
• 页面非空、无框架错误遮罩：通过。
• 图片灯箱与文件名详情互斥：通过。
• 桌面 926 × 905 与窄屏 390 × 844：通过。
• 浏览器控制台警告/错误：0。
• 前端定向测试与生产构建：通过。

final result: passed