chat-mobile-session-fix.md 2.06 KB

PLAN: Chat 页面移动端适配 + Session 历史加载修复

目标

将 aichat.html 改为继承 base.html,实现移动端响应式布局,并验证 Session 历史加载功能。

涉及文件

  • templates/aichat.html — 重写为继承 base.html
  • app.py — 无需修改(API 路由已正确)

数据流

GET /chat → render aichat.html (extends base.html)
  → JS 加载 /api/conversations → 渲染 sidebar
  → 点击 session → /api/conversations/{id}/messages → 渲染对话
  → 发送消息 → SSE /api/conversations/{id}/stream → 流式显示

现状分析

  1. aichat.html 是独立 HTML,未继承 base.html,缺少:
    • 顶部导航栏(topbar + ☰ 抽屉菜单)
    • 移动端响应式布局(base.html 已有 @media 断点)
    • 账号切换控件
  2. Session 侧栏始终显示(暗色主题,260px),移动端无切换机制
  3. loadMessages API 工作正常:/api/conversations/{id}/messages 返回 {ok, data: [{id, role, content, created_at}]},与 renderMsg() 的解析逻辑匹配
  4. selectConversation 确实调用了 loadMessages(line 167),切换后应显示历史

变更方案

  1. aichat.html 重写为 {% extends "base.html" %}
  2. CSS 保留暗色主题(与 base.html 白色主题分离)
  3. Session 侧栏:桌面端(≥768px)固定在左侧 260px;移动端(
  4. 主聊天区域在桌面端 flex-1,移动端全宽
  5. JS 逻辑保留原有的 loadMessages/selectConversation/sendMessage/SSE,不做变更

验收标准(Sprint Contract)

  • [ ] TC1: /chat 页面返回 200,HTML 包含 base.html 的 topbar + ☰ 菜单
  • [ ] TC2: 桌面端布局(≥768px 视口):左侧 session 侧栏 + 右侧聊天区,侧栏可见
  • [ ] TC3: 移动端(
  • [ ] TC4: loadMessages API 调用正确,返回的消息数据渲染为聊天气泡
  • [ ] TC5: JS 无转义错误(Jinja2 模板检查)
  • [ ] TC6: 全站 smoketest:/, /chat, /articles, /learn 均返回 200