模块 6Agent UX 与生成式 UI

Vue Agent 应用

前端拥有交互状态，不拥有后端事实

  • 后端 Run/Step/Tool 状态通过事件和快照同步
  • 前端拥有展开、选中、草稿和本地视图状态
  • 乐观状态必须可与服务端对账
  • 路由、刷新和多标签页恢复使用稳定 Run ID

按领域能力拆 Vue 模块

  • run：连接、事件 Reducer 和命令
  • conversation：消息与输入
  • tools：调用、审批和结果
  • artifacts：工作区、版本与 Diff
  • shared：协议 Schema、可访问组件和 Telemetry

Composable、Store 与组件的边界

  • 协议 Reducer 作为纯函数
  • 连接生命周期放 Composable
  • 跨页面 Run 状态进入 Store
  • 组件使用 props/emits 表达交互，不直接调用全局 Runtime

流式连接的完整生命周期

  • 建立连接、鉴权和恢复游标
  • 批量归并事件并更新 Store
  • AbortController、重连退避和页面卸载清理
  • 收到快照后与本地事件版本对账

关键组件按状态而非页面堆叠

  • RunStatus、MessageItem、ToolCall、ApprovalPanel
  • ArtifactWorkspace、EvidenceList 和 ErrorRecovery
  • 空、加载、部分、失败、过期和无权限状态
  • 键盘、焦点、读屏和响应式契约

浏览器端不持有高权限能力

  • 所有 Tool 执行和权限判断在服务端
  • 渲染 Markdown/HTML、链接和 Artifact 时净化
  • 审批命令携带 CSRF/幂等/状态版本保护
  • 日志和前端错误不泄露 Prompt、Token 与敏感结果

用录制协议驱动稳定测试

  • Reducer、格式化、权限显示和命令构造
  • 每种 Tool/审批/Artifact 状态
  • Fake Stream 的重复、乱序、断线和恢复
  • 真实用户旅程：发起、审批、取消、恢复、交付

前端也要可观测

  • 首个可见响应、事件到渲染延迟和长任务内存
  • DOM/消息虚拟化和 Markdown 性能
  • 前后端 Trace ID 关联
  • 交互失败、重连和用户放弃率