feat: 对话功能开发

src/renderer/App.vue

@@ -146,6 +146,10 @@ async function startService() {
     isServiceRunning.value = info.running;
     // 更新 baseUrl 供 http 层使用
     if (info.url) window.__opencodeBaseUrl = info.url;
+    // 服务启动成功后，初始化 SSE 连接
+    if (info.running) {
+      appStore.initSSE();
+    }
   } catch (err) {
     console.error('启动服务失败:', err);
   }

src/renderer/main.js

@@ -18,7 +18,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 // 注册自定义图标组件
 app.component('AppIcon', AppIcon);
 app.component('LucideIcon', LucideIcon);
-app.use(createPinia());
+
+const pinia = createPinia();
+app.use(pinia);
 app.use(router);
 app.use(ElementPlus);
 

src/renderer/stores/app.js

@@ -1,13 +1,138 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { sseManager } from '@/http/sse.js';
 
 export const useAppStore = defineStore('app', () => {
   const title = ref('智聚超脑');
   const collapsed = ref(false);
 
+  // SSE 相关状态
+  const sseConnected = ref(false);
+  const currentSessionEvents = ref([]);
+  const assistantMessageIds = ref(new Set());
+
   function toggleSidebar() {
     collapsed.value = !collapsed.value;
   }
 
-  return { title, collapsed, toggleSidebar };
+  /**
+   * 初始化 SSE 连接
+   * 在连接 OpenCode 成功后调用
+   */
+  function initSSE() {
+    if (sseConnected.value) {
+      console.log('[AppStore] SSE 已连接，跳过初始化');
+      return;
+    }
+
+    console.log('[AppStore] 初始化 SSE 连接...');
+
+    // 监听连接状态
+    sseManager.on('sse.error', () => {
+      sseConnected.value = false;
+    });
+
+    // 监听消息部分更新事件
+    sseManager.on('message.part.updated', (data) => {
+      const props = data.properties || {};
+      const part = props.part;
+      if (!part || part.type !== 'text') return;
+
+      currentSessionEvents.value.push({
+        type: 'message.part.updated',
+        data: props,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 监听消息更新事件
+    sseManager.on('message.updated', (data) => {
+      const props = data.properties || {};
+      const info = props.info;
+      if (info && info.role === 'assistant') {
+        assistantMessageIds.value.add(info.id);
+      }
+
+      currentSessionEvents.value.push({
+        type: 'message.updated',
+        data: props,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 监听会话空闲事件
+    sseManager.on('session.idle', (data) => {
+      const props = data.properties || {};
+      currentSessionEvents.value.push({
+        type: 'session.idle',
+        data: props,
+        timestamp: Date.now(),
+      });
+    });
+
+    // 建立连接
+    sseManager.connect();
+    sseConnected.value = true;
+  }
+
+  /**
+   * 关闭 SSE 连接
+   */
+  function closeSSE() {
+    sseManager.disconnect();
+    sseConnected.value = false;
+  }
+
+  /**
+   * 重新连接 SSE
+   */
+  function reconnectSSE() {
+    sseManager.reconnect();
+    sseConnected.value = true;
+  }
+
+  /**
+   * 清空当前会话的事件
+   */
+  function clearSessionEvents() {
+    currentSessionEvents.value = [];
+  }
+
+  /**
+   * 检查消息 ID 是否是助手消息
+   */
+  function isAssistantMessage(messageId) {
+    return assistantMessageIds.value.has(messageId);
+  }
+
+  /**
+   * 添加助手消息 ID
+   */
+  function addAssistantMessageId(messageId) {
+    assistantMessageIds.value.add(messageId);
+  }
+
+  /**
+   * 清空助手消息 ID 集合
+   */
+  function clearAssistantMessageIds() {
+    assistantMessageIds.value.clear();
+  }
+
+  return {
+    title,
+    collapsed,
+    toggleSidebar,
+    // SSE
+    sseConnected,
+    currentSessionEvents,
+    assistantMessageIds,
+    initSSE,
+    closeSSE,
+    reconnectSSE,
+    clearSessionEvents,
+    isAssistantMessage,
+    addAssistantMessageId,
+    clearAssistantMessageIds,
+  };
 });

src/renderer/views/chat/ChatView.vue

@@ -47,17 +47,19 @@ import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { ChatDotRound, ArrowRight, ArrowDown } from '@element-plus/icons-vue';
-import { createEventSource } from '@/http/api.js';
+import { useAppStore } from '@/stores/app.js';
+import { sseManager } from '@/http/sse.js';
 import axios from 'axios';
 
 const route = useRoute();
+const appStore = useAppStore();
 const isSending = ref(false);
 const inputText = ref('');
 const messages = ref([]);
 const messagesRef = ref(null);
 const currentSessionId = ref(null);
-const assistantMessageIds = new Set();
-let eventSource = null;
+const localAssistantMessageIds = new Set();
+let unsubscribeCallbacks = [];
 
 // 从路由参数中获取 sessionId
 const routeSessionId = computed(() => route.query.sessionId);
@@ -73,7 +75,8 @@ async function loadHistoryMessages(sessionId) {
 
     // 清空当前消息
     messages.value = [];
-    assistantMessageIds.clear();
+    localAssistantMessageIds.clear();
+    appStore.clearAssistantMessageIds();
 
     // 处理历史消息
     messagesData.forEach((item) => {
@@ -116,7 +119,8 @@ async function loadHistoryMessages(sessionId) {
 
         // 记录 assistant 消息 ID
         if (info.role === 'assistant') {
-          assistantMessageIds.add(info.id);
+          localAssistantMessageIds.add(info.id);
+          appStore.addAssistantMessageId(info.id);
         }
       }
     });
@@ -136,9 +140,9 @@ watch(
     if (newSessionId) {
       currentSessionId.value = newSessionId;
       loadHistoryMessages(newSessionId);
-      // 确保 SSE 连接已建立（如果之前断开）
-      if (!eventSource) {
-        connectSSE();
+      // 确保 SSE 连接已建立
+      if (!appStore.sseConnected) {
+        appStore.initSSE();
       }
     }
   },
@@ -163,51 +167,56 @@ function upsertAssistantBubble(msgId, text) {
   scrollToBottom();
 }
 
-function connectSSE() {
-  if (eventSource) {
-    eventSource.close();
-    eventSource = null;
-  }
-  console.log('[connectSSE] 建立 SSE 连接...');
-  eventSource = createEventSource();
-
-  eventSource.onmessage = (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      // 打印所有 SSE 事件，便于调试事件结构
-      console.log('[SSE]', data.type, JSON.stringify(data));
+/**
+ * 注册 SSE 事件监听器
+ */
+function registerSSEListeners() {
+  // 监听消息部分更新事件
+  const unsubscribePartUpdated = sseManager.on('message.part.updated', (data) => {
     const props = data.properties || {};
-
-      if (data.type === 'message.part.updated') {
     const part = props.part;
     if (!part || part.type !== 'text') return;
     if (part.sessionID !== currentSessionId.value) return;
     // 通过 messageID 前缀区分用户/助手消息：只渲染 assistant 消息的 part
-        // assistant 消息的 messageID 会在 message.updated 事件中记录，用 assistantMessageIds 集合过滤
-        if (!assistantMessageIds.has(part.messageID)) return;
+    // assistant 消息的 messageID 会在 message.updated 事件中记录，用 localAssistantMessageIds 集合过滤
+    if (!localAssistantMessageIds.has(part.messageID) && !appStore.isAssistantMessage(part.messageID)) return;
     upsertAssistantBubble(part.messageID, part.text || '');
-      }
+  });
 
-      if (data.type === 'message.updated') {
+  // 监听消息更新事件
+  const unsubscribeMessageUpdated = sseManager.on('message.updated', (data) => {
+    const props = data.properties || {};
     const info = props.info;
     // 记录 assistant 消息的 ID，供 message.part.updated 过滤使用
     if (info && info.role === 'assistant' && info.sessionID === currentSessionId.value) {
-          assistantMessageIds.add(info.id);
-        }
+      localAssistantMessageIds.add(info.id);
+      appStore.addAssistantMessageId(info.id);
     }
+  });
 
-      if (data.type === 'session.idle') {
+  // 监听会话空闲事件
+  const unsubscribeSessionIdle = sseManager.on('session.idle', (data) => {
+    const props = data.properties || {};
     // session.idle 表示 AI 响应已全部完成，重置发送状态
     if (props.sessionID === currentSessionId.value) {
       isSending.value = false;
     }
-      }
-    } catch (_) {}
-  };
+  });
 
-  eventSource.onerror = () => {
-    isSending.value = false;
-  };
+  // 保存取消订阅函数
+  unsubscribeCallbacks.push(unsubscribePartUpdated, unsubscribeMessageUpdated, unsubscribeSessionIdle);
+}
+
+/**
+ * 注销 SSE 事件监听器
+ */
+function unregisterSSEListeners() {
+  unsubscribeCallbacks.forEach((unsubscribe) => {
+    if (typeof unsubscribe === 'function') {
+      unsubscribe();
+    }
+  });
+  unsubscribeCallbacks = [];
 }
 
 async function send() {
@@ -240,12 +249,17 @@ async function send() {
 }
 
 onMounted(() => {
-  // 组件挂载时建立 SSE 连接
-  connectSSE();
+  // 组件挂载时注册 SSE 监听器
+  registerSSEListeners();
+  // 确保全局 SSE 连接已建立
+  if (!appStore.sseConnected) {
+    appStore.initSSE();
+  }
 });
 
 onUnmounted(() => {
-  if (eventSource) eventSource.close();
+  // 组件卸载时注销 SSE 监听器
+  unregisterSSEListeners();
 });
 </script>