设计一个公司知识库问答页面

题目：用 Vue 做一个公司知识库问答页面，你会怎么设计？

1. 明确用户、知识范围、文件类型、访问权限，以及是否要引用来源。
2. 前端处理上传和索引状态、会话、流式消息、停止、失败重试和引用跳转。
3. 后端负责认证、文档权限过滤、检索、模型与工具调用、密钥和限流。
4. 区分上传成功与索引完成；检索为空、引用失效、部分失败都有明确反馈。
5. 检索材料和答案都不能越权；输出按不可信内容处理。
6. 验证正常问题、无答案、长文本、断流、取消、切换会话、恶意内容和越权查询。
7. 观察首个内容到达耗时、完成耗时、失败率、回答依据和成本。

知识库问答包含权限检索、生成、流式展示、引用、会话持久化和失败恢复多个系统。先定义目标用户、资料范围、更新频率、延迟与预算；再把前端会话状态机与服务端检索生成链路分开，明确每个事件和数据归属。可信来源与权限校验不是可选的展示功能。

一条完整链路：验证登录 → 校验会话权限 → 创建消息与 generationId → 检索授权资料并重排 → 发送引用与增量事件 → 前端按协议解码分帧 → 更新对应消息 → 完成后保存最终状态。中途失败保留已显示文本并标未完成；停止向上游传播取消；重新生成创建新版本，不能把两次回答拼接。

验收覆盖空检索、权限变化、半截 UTF-8、断网重连、重复事件、恶意 Markdown、长会话和并发会话。关键指标包括引用支撑率、首事件延迟、完整完成率和预算，而不只看打字是否流畅。

我会先明确知识来自哪里、哪些用户可见、更新频率和引用要求。后端负责文件抽取、切分和索引，上传成功不等于可检索，前端展示解析中、索引中、可用或失败。提问时后端按当前用户权限检索相关片段，必要时重排，再把材料提供给模型；回答事件包含消息标识、增量和引用元数据。

前端分别管理会话、消息和请求，按协议解析增量，支持停止、重试、历史分页和原文定位。用户切换会话或重新生成时，旧请求不能修改新消息。无资料时明确提示未找到依据；断流保留部分内容并显示中断，不能冒充完整成功。引用要能定位真实文档及片段，也要重新校验访问权限。

密钥、限流、额度与实际权限在服务端；模型返回的 Markdown 和链接按不可信内容渲染。最后用正常、无答案、长文档、取消、断流、越权和恶意材料测试，并记录首个有效内容耗时、完成耗时、失败率、引用支持率和成本。这样回答既覆盖 AI 链路，也能说明前端真正需要完成的交互和稳定性。

“接个聊天接口”只是其中一环。面试时把状态、异常、权限和验证讲清，比罗列框架名字更能说明实际能力。