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

%% =============================================================================
%% 增量设计：坐席端布局优化 v2.0 — 类图
%% =============================================================================
%% 创建日期：2026-07-11
%% 技术栈：Vue 3 + Element Plus + TypeScript + Pinia + CSS Variables
%% =============================================================================

classDiagram
    %% ====== 容器/页面级组件 ======
    class Workspace {
        +Ref~boolean~ assistantVisible
        +Ref~PanelMode~ panelMode
        +Ref~HTMLElement~ leftSidebarRef
        +Ref~HTMLElement~ rightSidebarRef
        +startLeftResize(e: MouseEvent) void
        +startRightResize(e: MouseEvent) void
        +togglePanelMode() void
        +onMounted() void
    }

    class ChatArea {
        +Ref~Message~ replyToMessage
        +Ref~HTMLElement~ messageListRef
        +handleSend(content: string) void
        +handleReplyTo(message: Message) void
        +scrollToBottom() void
    }

    %% ====== 中栏新增组件 ======
    class ReplySuggestArea {
        +Props: conversationId: string
        +Emits: select(content: string)
        +Ref~string~ activeTab
        +loadRecommendations() void
    }

    class AiRecommendBar {
        +Props: recommendations: AiRecommendation[]
        +Props: loading: boolean
        +Emits: select(content: string)
        +Emits: refresh()
        +handleSelect(index: number) void
        +confidenceStyle: ComputedRef
    }

    class QuickReplyBar {
        +Props: templates: QuickReply[]
        +Emits: select(content: string)
        +Ref~QuickReplyNav~ navState
        +Ref~string~ searchQuery
        +selectTemplate(tpl: QuickReply) void
        +goBack() void
    }

    class ReplyBox {
        +Props: replyToMessage: Message
        +Emits: send(content: string)
        +Emits: cancelReply()
        +Ref~string~ inputText
        +Ref~number~ textareaHeight
        +handleSend() void
        +handleKeydown(event: KeyboardEvent) void
        +handleAiTool(action: AiToolAction) void
        +handleScreenshot() void
        +handlePaste(event: ClipboardEvent) void
    }

    %% ====== 右栏组件 ======
    class AiAssistantPanel {
        +Props: mode: PanelMode
        +Emits: toggle()
        +Ref~string~ conversationId
    }

    class AiTrainingPanel {
        +Props: conversationId: string
        +Ref~TrainingTab~ activeTab
        +resetForNewConversation() void
    }

    class PanelModeToggle {
        +Props: mode: PanelMode
        +Emits: toggle()
    }

    class SmartTagEditor {
        +Props: conversationId: string
        +Ref~ConversationTags~ currentTags
        +Ref~string[]~ suggestedTagList
        +Ref~boolean~ loadingTagSuggestions
        +handleSuggestTags() void
        +handleAddSuggestedTag(tag: string) void
        +handleRemoveTag(key: string) void
        +handleAddManualTag() void
        +loadCurrentTags() void
    }

    class QualityFeedback {
        +Props: conversationId: string
        +Ref~Annotation[]~ feedbackList
        +Ref~boolean~ loading
        +handleSubmit(messageId: string, feedback: AnnotationFeedback) void
        +loadAnnotations() void
    }

    class KnowledgeContribute {
        +Props: conversationId: string
        +Ref~ContributeForm~ contributeForm
        +Ref~boolean~ submitting
        +handleSubmit() void
        +resetForm() void
    }

    %% ====== 修改的现有组件 ======
    class UserInfoBar {
        +Props: conversation: Conversation
        +Props: availableAgents: AgentInfo[]
        +Props: canInviteCollaborator: boolean
        +Emits: assign, resolve, toggle-pin, toggle-todo, transfer, invite
        +Ref~boolean~ isExpanded
        +Ref~boolean~ showItLevelSelector
        +toggleExpand() void
        +resetForNewConversation() void
    }

    class TroubleshootBar {
        +Ref~boolean~ isFlowchartExpanded
        +Ref~boolean~ isIconBarCollapsed
        +Ref~TroubleshootingTemplate[]~ templates
        +toggleFlowchart() void
        +toggleCollapse() void
        +handleTemplateChange(templateId: string) void
        +handleStepClick(index: number) void
        +loadTemplates() void
    }

    %% ====== Store ======
    class ConversationStore {
        +Ref~string~ pendingReplyText
        +Ref~Map~ aiDrafts
        +Ref~PanelMode~ panelMode
        +Ref~string~ currentConversationId
        +Ref~Conversation~ currentConversation
        +Ref~Message[]~ messages
        +setPanelMode(mode: PanelMode) void
        +selectConversation(id: string) void
        +sendReply(content: string, replyToId?: string) void
    }

    class QuickReplyStore {
        +Ref~QuickReply[]~ templates
        +ComputedRef~templatesByCategory
        +ComputedRef~categories
        +fetchTemplates() void
    }

    %% ====== 类型定义 ======
    class PanelMode {
        <<enumeration>>
        normal
        expanded
    }

    class TrainingTab {
        <<enumeration>>
        smart-tag
        quality-feedback
        knowledge-contribute
    }

    class AiRecommendation {
        +string title
        +string content
        +number confidence
    }

    class ContributeForm {
        +string title
        +string problem
        +string solution
        +string category
    }

    class QuickReplyNav {
        +number l1Index
        +number l2Index
    }

    %% ====== 组合关系（contains/renders） ======
    Workspace *-- ChatArea : renders
    Workspace *-- AiAssistantPanel : renders
    ChatArea *-- UserInfoBar : contains
    ChatArea *-- TroubleshootBar : contains
    ChatArea *-- ReplySuggestArea : contains (新增)
    ChatArea *-- ReplyBox : contains

    ReplySuggestArea *-- AiRecommendBar : contains
    ReplySuggestArea *-- QuickReplyBar : contains

    AiAssistantPanel *-- PanelModeToggle : contains
    AiAssistantPanel *-- AiTrainingPanel : contains

    AiTrainingPanel *-- SmartTagEditor : tab 1
    AiTrainingPanel *-- QualityFeedback : tab 2
    AiTrainingPanel *-- KnowledgeContribute : tab 3

    %% ====== 依赖关系（uses） ======
    AiRecommendBar ..> ConversationStore : reads aiDrafts, writes pendingReplyText
    QuickReplyBar ..> ConversationStore : writes pendingReplyText
    QuickReplyBar ..> QuickReplyStore : reads templates
    ReplyBox ..> ConversationStore : reads/writes pendingReplyText
    SmartTagEditor ..> ConversationStore : reads currentConversation
    QualityFeedback ..> ConversationStore : reads messages
    Workspace ..> ConversationStore : reads/writes panelMode
    AiAssistantPanel ..> ConversationStore : reads currentConversationId

    %% ====== 类型引用 ======
    AiRecommendBar ..> AiRecommendation : uses
    KnowledgeContribute ..> ContributeForm : uses
    QuickReplyBar ..> QuickReplyNav : uses
    PanelModeToggle ..> PanelMode : uses
    AiTrainingPanel ..> TrainingTab : uses