图_14前端交互与状态流
原生 Excalidraw 可编辑画布，基于 SuperMew-0.1.0。请使用 Obsidian 的 Excalidraw 视图打开。
所属模块： M1 前端交互。总图与详图使用相同模块编号；画布右侧也包含以下读图说明。
组件与状态
- Vue 组件展示登录、聊天、历史、文档与证据；Pinia 四个 store 持有前端状态。
问答流程
- 登录 token → Bearer 请求；本地 session_id → 提交 message。
- 按 SSE 事件更新发起会话的消息、进度、Trace 和 HITL 提示。
- 切换会话不改变原请求数组；停止使用 AbortController。
文档与边界
- 管理员上传后轮询 job，完成再刷新文档列表。
- 上传轮询在面板关闭后继续；删除轮询在组件卸载时停止。
- 前端不做 RAG 路由，也不承担服务器权限判断。
源码对应
frontend/src/App.vuefrontend/src/stores/chat.tsfrontend/src/stores/documents.ts
Excalidraw Data
Text Elements
14 前端组件、状态与事件消费 ^66115780
M1 负责展示与交互；不执行 RAG 路由，权限仍由 M2 在服务器判断。 ^751caae5
M1 前端交互 · 对应总图 01 ^76c2a3f1
组件层 · Vue 3 ^4e8b589e
AuthPanel / Sidebar 登录、导航、主题切换 ^656a07c0
ChatArea / ChatInput / MessageItem MessageContent / References Trace / KnowledgeContextPanel ^60c02533
HistorySidebar / Documents DocumentSettings / UploadSection DocumentItem / 删除进度 ^59f204cd
状态层 · Pinia 四个 store ^fbf2c135
auth.ts token / 用户 / 登录状态 ^f2ec3080
sessions.ts 历史列表 / 侧栏 ^6b10f3e7
chat.ts 按会话消息 / 流 / HITL ^2113f783
documents.ts 文件 / 列表 / job 轮询 ^dc84a9da
问答链路 · POST fetch + ReadableStream ^16610d60
登录 token → Bearer 本地创建 session_id 追加用户与占位 AI 消息 ^d4590e62
POST /chat/stream 缓冲网络分片 → 按双换行解析 ^61880470
按事件更新原请求消息数组 content / rag_step / trace hitl_request / title / error ^9c7f09fe
DONE 继续读取到 EOF；切换会话不改事件归属；AbortController 用于停止；单前端仅一个生成请求。 ^beffb7ac
管理员文档链路 · HTTP 与轮询 ^01d376c4
选择文件 → 上传异步接口 获得 job_id ^d07bd05f
轮询 upload/delete job 显示步骤、百分比与错误 ^e0a2fef8
completed → 停止轮询 刷新文档列表 ^4afaa669
上传轮询在面板关闭后继续；删除轮询在组件卸载时停止。退出账号重置本地认证与会话状态。 ^2090f044
读图说明 · M1 前端交互 ^5e4cea5c
组件与状态 ^164643e1
• Vue 组件展示登录、聊天、历史、文档与证据； Pinia 四个 store 持有前端状态。 ^00f96bfe
问答流程 ^d68d5dad
• 登录 token → Bearer 请求；本地 session_id → 提交 message。 ^013b30ab
• 按 SSE 事件更新发起会话的消息、进度、Trace 和 HITL 提示。 ^d37b01b7
• 切换会话不改变原请求数组；停止使用 AbortController。 ^76149d9d
文档与边界 ^d24b04a9
• 管理员上传后轮询 job，完成再刷新文档列表。 ^096bf32a
• 上传轮询在面板关闭后继续；删除轮询在组件卸 载时停止。 ^446ad719
• 前端不做 RAG 路由，也不承担服务器权限判断 。 ^7abe1986
Element Links
76c2a3f1: [[图_1项目设计]]
%%
Drawing
1 | N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANqg8CEAHYALAA4ArAEYADCwDMqyLGP4YqMOkYBzdarICGZW5BAINlahIER4YPysdvbk/DDYvoIIjskgPv58duxg+PQA1jAAwvSY9PjGAMSoAEa4VjA2qk3oqKW+JZyMuFU1dYj1AGYW4+jjqKrj2JiYAMqQ |
%%
