map-client-vue

gavin/map-client-vue

Fork 0

RSS Feed

v2.0.0 298b5aa931

迭代过程只关注功能实现，代码冗余，结构不合理。重构。 Stable

gavin released this 2025-10-16 12:45:12 +08:00 | 3 commits to main since this release

重构时间: 2025-10-16

Phase 1: 核心服务拆分 (Day 1-2) ✅ 已完成

✅ Step 1: 创建服务目录结构 /web/src/services/chat/
✅ Step 2: 提取 MessageService - 消息 CRUD 操作（20+ 方法）
✅ Step 3: 提取 ConversationService - 对话管理（10+ 方法）
✅ Step 4: 创建统一日志系统 Logger (支持日志级别、命名空间、格式化)
✅ Step 5: 创建错误处理体系 AppError (ValidationError, NetworkError, APIError, ServiceError, StorageError + ErrorHandler)
✅ Step 6: 提取 StreamProcessor - 流式响应处理（性能监控、批量输出、工具集成）
✅ Step 7: 提取 ToolExecutor - 工具调用执行（递归调用链、错误处理）
✅ Step 8: 创建 ChatOrchestrator - 协调所有服务（话题管理、消息管理、流式发送、持久化 + togglePin/Favorite/Archive）
✅ Step 9: 更新 chatStore 使用新服务（已完成：chatService → chatOrchestrator）
⏸️ Step 10: 测试验证，确保无功能回归

✅ Phase 1 重构完成！旧的 chatService.ts (1147行) 已完全被新架构替代。

服务架构总结：

ChatOrchestrator (协调器)
├── MessageService (消息 CRUD)
├── ConversationService (对话管理)
├── StreamProcessor (流式处理)
└── ToolExecutor (工具执行)

工具层：
├── Logger (统一日志)
└── AppError + ErrorHandler (错误处理)

┌─────────────────────────────────────────────────────────┐
│                    用户界面层 (UI)                        │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐ │
│  │ 聊天视图 │  │ 设置视图 │  │ 模型管理 │  │ MCP管理  │ │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘ │
└─────────────────────────────────────────────────────────┘
                        ↓ ↑
┌─────────────────────────────────────────────────────────┐
│                 状态管理层 (Pinia Stores)                 │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐               │
│  │chatStore │  │modelStore│  │ mcpStore │               │
│  └──────────┘  └──────────┘  └──────────┘               │
└─────────────────────────────────────────────────────────┘
                        ↓ ↑
┌─────────────────────────────────────────────────────────┐
│                  业务服务层 (Services)                    │
│  ┌─────────────────────────────────────────────────────┐│
│  │           ChatOrchestrator (协调器)                  ││
│  │  ┌────────────┐ ���────────────┐ ┌────────────┐      ││
│  │  │  Message   │ │Conversation│ │   Stream   │      ││
│  │  │  Service   │ │  Service   │ │ Processor  │      ││
│  │  └────────────┘ └────────────┘ └────────────┘      ││
│  │  ┌────────────┐                                     ││
│  │  │   Tool     │                                     ││
│  │  │ Executor   │                                     ││
│  │  └────────────┘                                     ││
│  └─────────────────────────────────────────────────────┘│
│  ┌──────────────┐  ┌──────────────┐                    │
│  │ModelService  │  │MCPClientSvc  │                    │
│  │  Manager     │  │              │                    │
│  └──────────────┘  └──────────────┘                    │
└─────────────────────────────────────────────────────────┘
                        ↓ ↑
┌─────────────────────────────────────────────────────────┐
│                   工具层 (Utils)                          │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
│  │  Logger  │  │  Error   │  │Validation│              │
│  │          │  │ Handler  │  │          │              │
│  └──────────┘  └──────────┘  └──────────┘              │
└─────────────────────────────────────────────────────────┘
                        ↓ ↑
┌─────────────────────────────────────────────────────────┐
│                 数据持久化层 (Storage)                    │
│  ┌──────────┐  ┌──────────┐                             │
│  │localStorage│  │IndexedDB │  (未来)                   │
│  └──────────┘  └──────────┘                             │
└─────────────────────────────────────────────────────────┘
                        ↓ ↑
┌─────────────────────────────────────────────────────────┐
│                  后端服务 (Node.js)                       │
│  ┌──────────┐  ┌──────────┐                             │
│  │LLMService│  │MCPManager│                             │
│  └──────────┘  └──────────┘                             │
└─────────────────────────────────────────────────────────┘
                        ↓ ↑
┌────────────────────────────────────────────────���────────┐
│              外部服务 (External APIs)                     │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐              │
│  │阿里通义  │  │ 火山方舟 │  │MCP Servers│              │
│  └──────────┘  └──────────┘  └──────────┘              │
└─────────────────────────────────────────────────────────┘

发送消息流程

用户输入消息
    ↓
ChatLayout 组件触发事件
    ↓
chatStore.sendMessage()
    ↓
ChatOrchestrator.sendMessageStream()
    ↓
1. MessageService 创建用户消息
2. 更新话题信息
3. 持久化到 localStorage
    ↓
4. MessageService 创建助手消息占位符
    ↓
5. StreamProcessor.processStream()
   ├─ 准备工具列表（如有 MCP）
   ├─ 准备上下文消息（限制 20 条）
   ├─ 选择服务和模型
   └─ 执行流式请求
    ↓
6. 流式响应 onChunk 回调
   └─ MessageService.appendMessageContent()
   └─ 触发 UI 更新
    ↓
7. 检查是否有工具调用
   └─ 是: ToolExecutor.executeToolCalls()
        ├─ 执行每个工具
        ├─ 收集工具结果
        └─ 发送结果给 AI（递归）
   └─ 否: 完成
    ↓
8. 更新消息状态为 'success'
9. 更新话题最后消息
10. 持久化
    ↓
UI 展示最终消息

核心服务

1. ChatOrchestrator（聊天协调器）

职责：

统一对外接口
协调各服务完成业务流程
管理话题和对话
处理持久化

核心方法：

class ChatOrchestrator {
  // 话题管理
  createTopic(name: string, options?: CreateTopicOptions): Topic
  getTopics(filter?: TopicFilter): Topic[]
  updateTopic(topicId: string, updates: Partial<Topic>): boolean
  deleteTopic(topicId: string): boolean
  
  // 消息管理
  getMessages(topicId: string): Message[]
  deleteMessage(topicId: string, messageId: string): boolean
  
  // 发送消息
  sendMessageStream(
    options: SendMessageOptions,
    onChunk: (event: StreamEvent) => void,
    mcpServerId?: string,
    signal?: AbortSignal
  ): Promise<void>
  
  // 重新生成
  regenerateMessage(topicId: string, messageId: string): Promise<Message>
  
  // 持久化
  private saveTopics(): void
  private loadTopics(): void
  private saveConversations(): void
  private loadConversations(): void
}

2. MessageService（消息服务）

职责：

消息 CRUD
消息状态管理
消息查询和过滤

核心方法：

class MessageService {
  createMessage(conversationId: string, options: CreateMessageOptions): Message
  getMessages(conversationId: string): Message[]
  getMessagesByTopicId(topicId: string): Message[]
  updateMessage(conversationId: string, messageId: string, options: UpdateMessageOptions): boolean
  updateMessageStatus(conversationId: string, messageId: string, status: MessageStatus): boolean
  appendMessageContent(conversationId: string, messageId: string, content: string): boolean
  deleteMessage(conversationId: string, messageId: string): boolean
  deleteMessagesAfter(conversationId: string, messageId: string): boolean
  getSuccessMessages(conversationId: string): Message[]
  getRecentSuccessMessages(conversationId: string, limit: number): Message[]
}

3. ConversationService（对话服务）

职责：

对话创建、读取、删除
对话元数据管理
对话与话题的关联

核心方法：

class ConversationService {
  createConversation(options: CreateConversationOptions): Conversation
  getConversation(conversationId: string): Conversation | undefined
  getConversationByTopicId(topicId: string): Conversation | undefined
  deleteConversation(conversationId: string): boolean
  deleteConversationByTopicId(topicId: string): boolean
  updateMetadata(conversationId: string, metadata: Partial<Conversation['metadata']>): boolean
  clearMessages(conversationId: string): boolean
}

4. StreamProcessor（流式处理器）

职责：

处理流式响应
性能监控
批量输出
工具集成

核心方法：

class StreamProcessor {
  async processStream(options: StreamOptions): Promise<StreamResult>
  
  private prepareTools(mcpServerId?: string): Promise<{ tools: any[], mcpServerName: string }>
  private prepareMessages(conversation: Conversation, tools: any[], mcpServerName: string): any[]
  private selectServiceAndModel(requestedModel?: string): { service: any, selectedModel: string }
  private executeStream(...): Promise<StreamResult>
}

特性：

上下文限制：最近 20 条消息
批量输出：每 3 个字符一次（增强流式效果）
性能监控：首字延迟、总耗时、chunk 数
工具集成：自动注入系统提示词

5. ToolExecutor（工具执行器）

职责：

解析工具调用请求
执行 MCP 工具
处理工具结果
支持递归工具链

核心方法：

class ToolExecutor {
  async executeToolCalls(options: ToolCallOptions): Promise<void>
  
  private executeTools(toolCalls: any[], mcpServerId: string, onChunk: Function): Promise<ToolCallResult[]>
  private executeSingleTool(toolCall: any, mcpServerId: string, onChunk: Function): Promise<ToolCallResult>
  private sendToolResultsToAI(...): Promise<void>
  private buildMessagesWithToolResults(...): any[]
}

Downloads

3 Releases 4 Tags

迭代过程只关注功能实现，代码冗余，结构不合理。重构。 Stable

Phase 1: 核心服务拆分 (Day 1-2) ✅ 已完成

发送消息流程

核心服务

1. ChatOrchestrator（聊天协调器）

2. MessageService（消息服务）

3. ConversationService（对话服务）

4. StreamProcessor（流式处理器）

5. ToolExecutor（工具执行器）