wecom_it_smart_desk/docs/02-技术文档/技术架构/增量设计-布局优化v2-时序图.mermaid

%% =============================================================================
%% 增量设计：坐席端布局优化 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 全链路通信