# 前端组件化 Phase 3 – 聊天区实时化

## 阶段目标
1. 将 legacy `static/app.js` 中的聊天逻辑迁移到 Vue/Pinia，覆盖历史记录、实时消息、输入/工具/上传等能力。
2. 建立统一的状态/通知体系（用量、资源、toast/confirm），为后续样式统一和其它页面迁移打基础。

## 交付进度

### Step 1 – 历史消息
- `useChatStore` 加载 `/api/conversations/<id>/messages` 并在 ChatArea 显示历史记录，支持错误提示/滚动。

### Step 2 – 实时通信 + 输入区 + 快捷菜单
- `useConnectionStore` 接入 `socket.io-client`，`useChatStore` 监听 `ai_message_start`/`thinking_*`/`text_*`/`ai_message_end`/工具事件并渲染流式内容。
- ChatArea 输入区支持 Ctrl+Enter 发送、停止按钮、快捷菜单（上传 & 工具开关），操作成功/失败都通过 toast 提示。

### Step 3 – Token/资源面板 + 工具卡片/Markdown
- `useResourceStore` + `TokenDrawer` 负责 Token/Quota/容器/存储可视化并定时轮询。
- MarkdownBlock 结合 `marked + prismjs` 渲染聊天内容/思考流，代码块支持高亮与复制。
- 工具事件在消息下方以卡片展示状态/提示/结果，彻底脱离 legacy DOM。
- `useToolStore` 管理 `/api/tool-settings`，QuickMenu UI 与上传入口迁至 Vue。
- 新的 `useUiStore` + `ToastStack/ConfirmDialog` 提供全局通知/确认，旧版 alert/confirm 正逐步替换。

## 下一阶段计划
1. **工具卡片增强**：支持命令输出、文件 diff、错误详情等，匹配 legacy Tool UI。
2. **提示体系统一**：将所有 `pushToast`/`confirmAction` 调用迁到 Pinia store，统一文案与样式。
3. **右侧聚焦/个性化面板**：组件化 Focus Files 与 Personalization Drawer，与新聊天区联动。
4. **样式统一**：整理 CSS/变量，让 Token Drawer、聊天气泡、工具卡片等跟 legacy 视觉一致，避免层级堆叠。
5. **其它交互**：如滚动锁、终端入口、工具提示等，让新版 UI 完全覆盖旧版功能。

完成上述步骤后即可进入 Phase 4，重点处理聚焦面板、个性化设置、全局主题与其它页面。