Simon
facc04aa65
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交 （5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。 一、docs 结构整改（整改 #14） 根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入， 随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录 树并存于 docs/，共 791 文件、双分类体系冲突。 修复动作： - b2 同名异主题文件改名迁移保全 9 个 - C 类 39 个孤立文件按主题正确归类 - A/B1 类 222 个重复文件删除（新结构已有内容副本） - 9 个旧独有空目录删除 - 270 处内部引用按 verified 映射改写 - 整改记录 #14 登记于 04-运维文档/部署运维 结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。 残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。 二、compose 双目录对齐（消除踩坑 A） - docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist 改为 src/frontend-*/dist（h5 / agent / admin / terminal） - docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/ - 效果：本地 docker compose up 不再把根目录 stale dist 挂回， 与线上一致，分叉隐患消除（已 docker compose config 校验通过） 防复发铁律： - 重构须提交；仓库修复须 git stash -u 或先 commit - 新结构须 git add 并提交，避免再次 untracked 复活 - H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
151 lines
6.1 KiB
Markdown
151 lines
6.1 KiB
Markdown
# 任务说明书 — AI 回复打字机逐字显示效果
|
||
|
||
> **版本**: v1.0 | **日期**: 2026-07-25
|
||
|
||
---
|
||
|
||
## 📋 基本信息
|
||
|
||
| 项目 | 内容 |
|
||
|------|------|
|
||
| **任务名称** | AI 回复打字机逐字显示效果 |
|
||
| **任务ID** | #125 |
|
||
| **优先级** | 🟡 P2 |
|
||
| **类型** | 功能增强（UI 优化） |
|
||
| **状态** | ✅ 已完成 |
|
||
| **负责人** | Simon |
|
||
| **创建日期** | 2026-07-25 |
|
||
| **完成日期** | 2026-07-25 |
|
||
|
||
---
|
||
|
||
## 📥 输入项来源
|
||
|
||
### 产品需求
|
||
| 来源文档 | 相关章节 | 说明 |
|
||
|----------|----------|------|
|
||
| `01-产品文档/03-AI服务/PRD-REQ-AI-001-复杂场景与统一路由-v1.1.md` | 全文 | AI 对话链路中"逐字渲染"概念已提及，但前端未实际实现 |
|
||
| 需求评估结论（2026-07-25） | — | 纯 UI 优化，不涉及新功能/新页面/新 API，无需独立 PRD |
|
||
|
||
### 技术方案
|
||
| 来源文档 | 相关章节 | 说明 |
|
||
|----------|----------|------|
|
||
| `02-技术文档/实现配置/AI对话链路全栈改造实施计划-v1.0.md` | §5, §7 | 打字机流式渲染概念设计，v1.3 补充实际交付记录 |
|
||
| E2E 打字机验证报告（2026-07-08） | 全文 | 证实 WS 流式推送 343 chunk / 1469 字符，后端能力已就绪 |
|
||
|
||
### 原型设计
|
||
> 本次为纯渲染增强，不涉及新页面/新组件，无原型图。✅ 符合规范 §2.1 豁免条件。
|
||
|
||
### 需了解的现有代码（历史现状）
|
||
| 模块/文件 | 说明 | 需了解的内容 |
|
||
|-----------|------|-------------|
|
||
| `frontend-h5/src/components/chat/MessageBubble.vue` | H5 消息气泡组件 | 消息类型区分（ai/employee/agent/system），文本渲染路径（line 79/89） |
|
||
| `frontend-agent/src/components/chat/MessageBubble.vue` | 坐席端消息气泡组件 | 同上（sender_type 区分，line 53/113） |
|
||
| `frontend-h5/src/stores/conversation.ts` | H5 会话 Store | `streamingAiMessageId` 占位气泡状态，ai_reply 事件处理 |
|
||
| `frontend-agent/src/stores/conversation.ts` | 坐席端会话 Store | ai_thinking / new_message 事件处理 |
|
||
|
||
---
|
||
|
||
## 📤 输出成果要求
|
||
|
||
### 交付物清单
|
||
|
||
| # | 交付物 | 类型 | 说明 |
|
||
|---|--------|------|------|
|
||
| 1 | `frontend-h5/src/composables/useTypewriter.ts` | 代码（新建） | H5 端打字机组合式函数 |
|
||
| 2 | `frontend-agent/src/composables/useTypewriter.ts` | 代码（新建） | 坐席端打字机组合式函数 |
|
||
| 3 | `frontend-h5/src/components/chat/MessageBubble.vue` | 代码（修改） | 引入 useTypewriter，AI 消息 `msg.content` → `displayContent` + 闪烁光标 |
|
||
| 4 | `frontend-agent/src/components/chat/MessageBubble.vue` | 代码（修改） | 同上（`sender_type === 'ai'` 时启用） |
|
||
| 5 | `docs/00-版本迭代总览.md` | 文档（更新） | v1.2.1 → v1.2.2 |
|
||
| 6 | `docs/02-技术文档/实现配置/AI对话链路全栈改造实施计划-v1.0.md` | 文档（更新） | v1.3 补充打字机交付状态 |
|
||
| 7 | 本任务说明书 | 文档（新建） | — |
|
||
|
||
### 非目标（Non-goals）
|
||
- ❌ 不修改后端 WS 推送逻辑（流式 chunk 已就绪）
|
||
- ❌ 不为员工/坐席/系统消息添加动画
|
||
- ❌ 不添加点击跳过动画的交互（保留为后续迭代）
|
||
- ❌ 不修改消息去重逻辑
|
||
|
||
---
|
||
|
||
## 🔧 验证方式
|
||
|
||
### 功能验证
|
||
| 验证项 | 验证方法 | 结果 |
|
||
|--------|----------|------|
|
||
| AI 消息逐字显示 | 发送消息触发 AI 回复，观察气泡 | ✅ 文字逐字出现 |
|
||
| 闪烁光标 | 观察 AI 消息末尾 | ✅ `|` 光标 1s step-end 闪烁 |
|
||
| 长消息加速 | 发送复杂问题触发长回复（>300 字） | ✅ 前半逐字，后半批量 |
|
||
| 非 AI 消息不受影响 | 观察员工/坐席/系统消�� | ✅ 一次性完整显示 |
|
||
| "正在思考"占位不受影响 | 观察 AI 思考中的消息 | ✅ 脉冲动画不受干扰 |
|
||
| 本地 vite build | `npm run build` 无错误 | ✅ H5 3.75s / Agent 5.14s |
|
||
|
||
### 部署验证
|
||
| 验证项 | 方法 | 结果 |
|
||
|--------|------|------|
|
||
| H5 dist 含 typewriter 代码 | `grep typewriter-cursor` 生产 dist | ✅ `index-C8VRkrdB.css` |
|
||
| Agent dist 含 typewriter 代码 | `grep typewriter-cursor` 生产 dist | ✅ `Workspace-DFRCrrlx.css` + JS |
|
||
| nginx 服务正常 | `curl localhost/itdesk/` | ✅ 200 OK |
|
||
| 企微内实际可用 | `Ctrl+Shift+R` 强制刷新后验证 | ✅ 已确认 |
|
||
|
||
---
|
||
|
||
## ✅ 完成标准
|
||
|
||
### 验收条件
|
||
|
||
- [x] 代码合入（前端源文件已修改）
|
||
- [x] 本地编译通过（H5 + Agent）
|
||
- [x] 版本号更新（v1.2.1 → v1.2.2）
|
||
- [x] 相关文档已更新（版本总览 + 技术方案）
|
||
- [x] 生产部署已验证
|
||
- [x] 任务说明书已创建
|
||
|
||
---
|
||
|
||
## 📊 工作分解
|
||
|
||
| 子任务 | 负责人 | 预估工时 | 状态 |
|
||
|--------|--------|----------|------|
|
||
| 创建 useTypewriter composable（双端） | Simon | 0.5h | ✅ |
|
||
| 修改 MessageBubble.vue（双端） | Simon | 0.5h | ✅ |
|
||
| 本地编译验证 | Simon | 0.2h | ✅ |
|
||
| 打字机效果演示页 | Simon | 0.3h | ✅ |
|
||
| 需求评估 + 文档更新 | Simon | 0.3h | ✅ |
|
||
| 生产部署 + 验证 | Simon | 0.3h | ✅ |
|
||
|
||
---
|
||
|
||
## 📞 依赖与阻塞
|
||
|
||
### 前置依赖
|
||
| 依赖任务 | 依赖说明 | 状态 |
|
||
|----------|----------|------|
|
||
| REQ-AI-001 复杂场景与统一路由 | AI 对话链路基础设施（WS 流式推送） | ✅ 已完成 |
|
||
| WS ai_reply_chunk 流式推送 | 后端推送完整消息内容 | ✅ 已就绪（2026-07-08 E2E 验证通过） |
|
||
|
||
### 阻塞因素
|
||
> 无阻塞。
|
||
|
||
---
|
||
|
||
## 📈 变更记录
|
||
|
||
| 日期 | 变更内容 | 变更人 | 说明 |
|
||
|------|----------|--------|------|
|
||
| 2026-07-25 | 创建任务 | Simon | 初始版本，任务已完成 |
|
||
|
||
---
|
||
|
||
## 📎 附件
|
||
|
||
- 版本迭代总览：`docs/00-版本迭代总览.md`（v1.2.2 条目）
|
||
- 技术方案：`docs/02-技术文档/实现配置/AI对话链路全栈改造实施计划-v1.0.md`（v1.3 变更）
|
||
- E2E 验证：`docs/03-测试文档/02-E2E测试/方案A-消息发送延时-E2E验证报告-20260708.md`
|
||
- 演示页面：`docs/03-测试文档/02-E2E测试/e2e-screenshots/typewriter-demo.html`
|
||
- 源码：
|
||
- `frontend-h5/src/composables/useTypewriter.ts`
|
||
- `frontend-agent/src/composables/useTypewriter.ts`
|
||
- `frontend-h5/src/components/chat/MessageBubble.vue`
|
||
- `frontend-agent/src/components/chat/MessageBubble.vue`
|