158 lines
6.0 KiB
Plaintext
158 lines
6.0 KiB
Plaintext
|
%% =============================================================================
|
|||
|
|
%% 增量设计：坐席端布局优化 v2.0 — 时序图
|
|||
|
|
%% =============================================================================
|
|||
|
|
%% 创建日期：2026-07-11
|
|||
|
|
%% 包含 3 个关键流程的时序图
|
|||
|
|
%% =============================================================================
|
|||
|
|
|
|||
|
|
%% ====== 时序图 1：回复建议区交互流程 ======
|
|||
|
|
sequenceDiagram
|
|||
|
|
autonumber
|
|||
|
|
participant User as 坐席
|
|||
|
|
participant ChatArea as ChatArea
|
|||
|
|
participant RSA as ReplySuggestArea
|
|||
|
|
participant ARB as AiRecommendBar
|
|||
|
|
participant QRB as QuickReplyBar
|
|||
|
|
participant CS as ConversationStore
|
|||
|
|
participant RB as ReplyBox
|
|||
|
|
participant API as Wingman API
|
|||
|
|
|
|||
|
|
Note over User, API: 场景：坐席选中会话 → 查看 AI 推荐 → 采纳填入输入框 → 发送
|
|||
|
|
|
|||
|
|
User->>ChatArea: 选中会话
|
|||
|
|
ChatArea->>CS: selectConversation(id)
|
|||
|
|
CS->>API: generateDraft(convId)
|
|||
|
|
API-->>CS: DraftResult {content, confidence, reasoning}
|
|||
|
|
CS->>CS: aiDrafts.set(convId, draft)
|
|||
|
|
CS-->>ChatArea: currentConversationId 更新
|
|||
|
|
|
|||
|
|
ChatArea->>RSA: render (conversationId)
|
|||
|
|
RSA->>ARB: :recommendations = loadFromStore()
|
|||
|
|
ARB->>CS: 读取 aiDrafts.get(convId)
|
|||
|
|
CS-->>ARB: Set~DraftResult~
|
|||
|
|
ARB-->>User: 横向展示 1-3 条 AI 推荐卡片
|
|||
|
|
|
|||
|
|
Note over User, ARB: 坐席点击某条推荐
|
|||
|
|
|
|||
|
|
User->>ARB: 点击推荐卡片 #1
|
|||
|
|
ARB->>CS: pendingReplyText = recommendation.content
|
|||
|
|
ARB->>RSA: emit('select', content)
|
|||
|
|
RSA->>ChatArea: emit('select', content)
|
|||
|
|
|
|||
|
|
Note over CS, RB: pendingReplyText 变化触发 ReplyBox watch
|
|||
|
|
|
|||
|
|
CS-->>RB: watch(pendingReplyText) 触发
|
|||
|
|
RB->>RB: inputText = pendingReplyText
|
|||
|
|
RB->>RB: pendingReplyText = '' (清空)
|
|||
|
|
RB-->>User: 输入框显示推荐内容，光标聚焦
|
|||
|
|
|
|||
|
|
Note over User, RB: 坐席可编辑后发送
|
|||
|
|
|
|||
|
|
User->>RB: 按 Enter 发送
|
|||
|
|
RB->>RB: handleSend()
|
|||
|
|
RB->>ChatArea: emit('send', content)
|
|||
|
|
ChatArea->>CS: sendReply(content, replyToId?)
|
|||
|
|
CS->>API: sendMessage(convId, content)
|
|||
|
|
API-->>CS: Message 对象
|
|||
|
|
CS-->>ChatArea: messages.push(newMsg)
|
|||
|
|
ChatArea-->>User: 消息列表刷新，显示新消息
|
|||
|
|
|
|||
|
|
Note over User, QRB: 场景：坐席使用快速回复
|
|||
|
|
|
|||
|
|
User->>QRB: 点击 L1 分类 chip（如"账号"）
|
|||
|
|
QRB->>QRB: navState.l1Index = index
|
|||
|
|
QRB-->>User: 横向展示 L2 条目预览
|
|||
|
|
User->>QRB: 点击条目"密码重置指引"
|
|||
|
|
QRB->>CS: pendingReplyText = template.content
|
|||
|
|
CS-->>RB: watch 触发，填入输入框
|
|||
|
|
RB-->>User: 输入框显示快速回复内容
|
|||
|
|
|
|||
|
|
|
|||
|
|
%% ====== 时序图 2：右栏模式切换流程 ======
|
|||
|
|
sequenceDiagram
|
|||
|
|
autonumber
|
|||
|
|
participant User as 坐席
|
|||
|
|
participant PMT as PanelModeToggle
|
|||
|
|
participant AAP as AiAssistantPanel
|
|||
|
|
participant WS as Workspace
|
|||
|
|
participant CS as ConversationStore
|
|||
|
|
participant DOM as DOM/CSS
|
|||
|
|
|
|||
|
|
Note over User, DOM: 场景：坐席点击右栏放大/缩小开关
|
|||
|
|
|
|||
|
|
User->>PMT: 点击开关按钮
|
|||
|
|
PMT->>AAP: emit('toggle')
|
|||
|
|
AAP->>WS: emit('toggle')
|
|||
|
|
|
|||
|
|
alt 当前为 normal 模式 (260px)
|
|||
|
|
WS->>CS: setPanelMode('expanded')
|
|||
|
|
CS-->>WS: panelMode = 'expanded'
|
|||
|
|
WS->>WS: rightSidebarRef.style.width = 'var(--assistant-panel-expanded)'
|
|||
|
|
WS->>DOM: CSS transition: width 260px → 560px (0.3s)
|
|||
|
|
DOM-->>User: 右栏平滑放大到 560px
|
|||
|
|
Note over WS, DOM: 中栏 flex:1 自动缩小，min-width: 400px 保底
|
|||
|
|
else 当前为 expanded 模式 (560px)
|
|||
|
|
WS->>CS: setPanelMode('normal')
|
|||
|
|
CS-->>WS: panelMode = 'normal'
|
|||
|
|
WS->>WS: rightSidebarRef.style.width = 'var(--assistant-panel-width)'
|
|||
|
|
WS->>DOM: CSS transition: width 560px → 260px (0.3s)
|
|||
|
|
DOM-->>User: 右栏平滑缩小到 260px
|
|||
|
|
Note over WS, DOM: 中栏 flex:1 自动扩大
|
|||
|
|
end
|
|||
|
|
|
|||
|
|
Note over User, DOM: 拖拽手柄在放大模式下仍然可用
|
|||
|
|
Note over WS, DOM: 拖拽范围：200px ~ 560px（上限已调整）
|
|||
|
|
|
|||
|
|
|
|||
|
|
%% ====== 时序图 3：功能迁移流程（开发过程） ======
|
|||
|
|
sequenceDiagram
|
|||
|
|
autonumber
|
|||
|
|
participant Dev as 开发过程
|
|||
|
|
participant Old as 旧组件
|
|||
|
|
participant New as 新组件
|
|||
|
|
participant ChatArea as ChatArea
|
|||
|
|
participant AAP as AiAssistantPanel
|
|||
|
|
participant Store as ConversationStore
|
|||
|
|
|
|||
|
|
Note over Dev, Store: Phase 1 — 清理重复（T02）
|
|||
|
|
|
|||
|
|
Dev->>Old: 删除 AiRecommendInline.vue
|
|||
|
|
Dev->>ChatArea: 移除 import AiRecommendInline
|
|||
|
|
Dev->>Old: 删除 AiSuggestReply.vue
|
|||
|
|
Dev->>AAP: 移除 import AiSuggestReply
|
|||
|
|
|
|||
|
|
Note over Dev: 移除右栏已迁移功能
|
|||
|
|
|
|||
|
|
Dev->>AAP: 移除 Wingman 触发按钮组
|
|||
|
|
Dev->>AAP: 移除 AI 推荐区（AiSuggestReply 引用）
|
|||
|
|
Dev->>AAP: 移除快速回复区（QuickReplyPanel 引用）
|
|||
|
|
Note over AAP: AiAssistantPanel 仅保留容器骨架 + 标注区
|
|||
|
|
|
|||
|
|
Note over Dev, Store: Phase 3 — 中栏建设（T03）
|
|||
|
|
|
|||
|
|
Dev->>New: 创建 ReplySuggestArea.vue
|
|||
|
|
Dev->>New: 创建 AiRecommendBar.vue
|
|||
|
|
Note over New, Store: AiRecommendBar 从 ConversationStore.aiDrafts 加载数据
|
|||
|
|
Dev->>New: 创建 QuickReplyBar.vue
|
|||
|
|
Note over New, Store: QuickReplyBar 从 QuickReplyStore 加载模板
|
|||
|
|
Dev->>ChatArea: 在消息列表与 ReplyBox 之间插入 ReplySuggestArea
|
|||
|
|
Dev->>New: ReplyBox 工具栏重构为左右分区
|
|||
|
|
|
|||
|
|
Note over Dev, Store: Phase 4 — 右栏建设（T04）
|
|||
|
|
|
|||
|
|
Dev->>New: 创建 AiTrainingPanel.vue (Tab 容器)
|
|||
|
|
Dev->>New: 创建 SmartTagEditor.vue
|
|||
|
|
Note over New, Store: SmartTagEditor 从 AAP 迁出标签逻辑
|
|||
|
|
Dev->>New: 创建 QualityFeedback.vue
|
|||
|
|
Dev->>New: 创建 KnowledgeContribute.vue
|
|||
|
|
Dev->>New: 创建 PanelModeToggle.vue
|
|||
|
|
Dev->>AAP: AiAssistantPanel 承载 PanelModeToggle + AiTrainingPanel
|
|||
|
|
Dev->>Store: ConversationStore 新增 panelMode 状态
|
|||
|
|
|
|||
|
|
Note over Dev, Store: Phase 5 — 联调测试（T05）
|
|||
|
|
|
|||
|
|
Dev->>ChatArea: 验证 ReplySuggestArea ↔ ReplyBox 联动
|
|||
|
|
Dev->>ChatArea: 验证消息区高度 ≥ 400px (1080p)
|
|||
|
|
Dev->>AAP: 验证模式切换 + Tab 切换
|
|||
|
|
Dev->>Store: 验证 pendingReplyText 全链路通信
|