Simon
63 lines
2.1 KiB
Plaintext
63 lines
2.1 KiB
Plaintext
sequenceDiagram
|
|
participant Browser as 坐席浏览器
|
|
participant App as Vue3 App
|
|
participant Store as Pinia Store
|
|
participant API as Backend API
|
|
participant DB as PostgreSQL
|
|
|
|
Note over Browser,App: 页面加载
|
|
|
|
Browser->>App: 挂载 Workspace.vue
|
|
App->>Store: 初始化 conversationStore
|
|
Store->>API: GET /api/conversations
|
|
API->>DB: SELECT * FROM conversations WHERE status IN ('queued','serving') ORDER BY ...
|
|
DB-->>API: 会话列表
|
|
API-->>Store: 会话数据
|
|
Store-->>App: 渲染会话列表
|
|
|
|
loop 每3秒 setInterval
|
|
App->>Store: pollConversations()
|
|
Store->>API: GET /api/conversations?page=1&page_size=50
|
|
API->>DB: SELECT ... (同上)
|
|
DB-->>API: 最新会话列表
|
|
API-->>Store: 最新数据
|
|
|
|
alt 数据有变化
|
|
Store->>Store: diff 比较，更新变化的会话
|
|
Store-->>App: 触发响应式更新
|
|
App->>App: 更新列表项标签/排序/未读数
|
|
else 数据无变化
|
|
Store-->>App: 无需更新
|
|
end
|
|
end
|
|
|
|
Note over App: 用户点击某个会话
|
|
|
|
App->>Store: selectConversation(id)
|
|
Store->>API: GET /api/conversations/{id}/messages?limit=50
|
|
API->>DB: SELECT * FROM messages WHERE conversation_id=... ORDER BY created_at
|
|
DB-->>API: 消息列表
|
|
API-->>Store: messages
|
|
Store-->>App: 渲染对话区
|
|
|
|
loop 选中会话的消息轮询
|
|
App->>Store: pollMessages(conv_id)
|
|
Store->>API: GET /api/conversations/{id}/messages?limit=20&before=latest_id
|
|
API->>DB: SELECT ... WHERE created_at > latest
|
|
DB-->>API: 新消息
|
|
API-->>Store: 新消息列表
|
|
alt 有新消息
|
|
Store->>Store: 追加消息到列表
|
|
Store-->>App: 滚动到底部，显示新消息
|
|
end
|
|
end
|
|
|
|
Note over App: 坐席发送回复
|
|
|
|
App->>Store: sendMessage(conv_id, content)
|
|
Store->>API: POST /api/conversations/{id}/messages {content}
|
|
API->>DB: INSERT INTO messages ...
|
|
API-->>Store: 发送的消息对象
|
|
Store->>Store: 追加到消息列表
|
|
Store-->>App: 显示在对话区
|