feat: 加载历史记录

src/renderer/App.vue

@@ -36,12 +36,26 @@
           <div
             v-for="(item, index) in historyItems"
             :key="index"
-            class="flex items-center w-[216px] h-[37px] justify-between rounded-[10px] pl-3 pr-[132px] mx-auto text-gray-500 hover:bg-gray-50 hover:text-gray-700 cursor-pointer transition-all duration-200"
+            class="flex items-center w-[216px] h-[37px] justify-between rounded-[10px] pl-3 pr-3 mx-auto text-gray-500 hover:bg-gray-50 hover:text-gray-700 cursor-pointer transition-all duration-200"
+            @click="onHistoryClick(item)"
+            :title="item.name"
           >
-            <span class="text-sm font-medium whitespace-nowrap truncate">{{ item.name }}</span>
+            <span class="text-sm font-medium whitespace-nowrap truncate flex-1">{{ item.name }}</span>
           </div>
         </nav>
 
+        <!-- 服务状态栏 -->
+        <div class="flex items-center justify-between px-3 py-2 border-t border-gray-200">
+          <div class="flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full" :class="isServiceRunning ? 'bg-green-500' : 'bg-gray-400'" />
+            <span class="text-xs text-gray-600">
+              {{ isServiceRunning ? '服务运行中' : '服务未启动' }}
+            </span>
+          </div>
+          <el-button v-if="!isServiceRunning" size="small" type="primary" @click="startService"> 启动 </el-button>
+          <el-button v-else size="small" type="danger" plain @click="stopService"> 停止 </el-button>
+        </div>
+
         <!-- 用户区域 -->
         <div class="flex items-center justify-between p-3 border-t border-gray-200">
           <div class="flex items-center">
@@ -74,11 +88,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useAppStore } from '@/stores/app';
 import { House, Monitor, Expand, Fold, ChatDotRound, Search, Collection, Clock } from '@element-plus/icons-vue';
 import router from '@/router';
+import axios from 'axios';
 
 const route = useRoute();
 const appStore = useAppStore();
@@ -90,5 +105,110 @@ const menus = ref([
   { name: '发现设备', index: '/bonjour', icon: 'server' },
 ]);
 
-const historyItems = ref([{ name: '历史记录示例 1' }, { name: '历史记录示例 2' }, { name: '历史记录示例 3' }]);
+const historyItems = ref([]);
+const isServiceRunning = ref(false);
+let checkInterval = null;
+
+// 查询历史会话列表
+async function loadHistorySessions() {
+  console.log('[loadHistorySessions] 开始加载历史会话...');
+  try {
+    const baseUrl = window.__opencodeBaseUrl || 'http://127.0.0.1:4096';
+    console.log('[loadHistorySessions] baseUrl:', baseUrl);
+    const response = await axios.get(`${baseUrl}/session`);
+    console.log('[loadHistorySessions] 响应数据:', response.data);
+    const sessions = response.data || [];
+    console.log('[loadHistorySessions] 会话数量:', sessions.length);
+    // 将会话列表转换为历史记录格式
+    historyItems.value = sessions.map((session) => ({
+      id: session.id,
+      name: session.title || `会话 ${session.slug || session.id.slice(0, 8)}...`,
+      slug: session.slug,
+      created: session.time?.created,
+      updated: session.time?.updated,
+    }));
+    console.log('[loadHistorySessions] 转换后的历史记录:', historyItems.value);
+  } catch (err) {
+    console.error('[loadHistorySessions] 加载历史会话失败:', err);
+  }
+}
+
+// 点击历史会话，跳转到对话页面并加载该会话
+function onHistoryClick(item) {
+  router.push({
+    path: '/chat',
+    query: { sessionId: item.id },
+  });
+}
+
+// 启动服务
+async function startService() {
+  try {
+    const info = await window.opencode.start();
+    isServiceRunning.value = info.running;
+    // 更新 baseUrl 供 http 层使用
+    if (info.url) window.__opencodeBaseUrl = info.url;
+  } catch (err) {
+    console.error('启动服务失败:', err);
+  }
+}
+
+// 停止服务
+async function stopService() {
+  try {
+    await window.opencode.stop();
+    isServiceRunning.value = false;
+    historyItems.value = [];
+  } catch (err) {
+    console.error('停止服务失败:', err);
+  }
+}
+
+// 检查服务状态
+async function checkServiceStatus() {
+  try {
+    console.log('[checkServiceStatus] 检查服务状态...');
+    const info = await window.opencode?.info();
+    console.log('[checkServiceStatus] 服务信息:', info);
+    const isRunning = info?.running || false;
+
+    // 更新服务状态
+    isServiceRunning.value = isRunning;
+
+    if (isRunning) {
+      // 服务运行中，更新 baseUrl 并加载历史记录
+      if (info?.url) {
+        window.__opencodeBaseUrl = info.url;
+        console.log('[checkServiceStatus] 更新 baseUrl:', info.url);
+      }
+      // 如果历史记录为空，则加载
+      if (historyItems.value.length === 0) {
+        console.log('[checkServiceStatus] 服务运行中，加载历史记录');
+        loadHistorySessions();
+      }
+    } else {
+      // 服务未运行，清空历史记录
+      console.log('[checkServiceStatus] 服务未运行，清空历史记录');
+      historyItems.value = [];
+    }
+  } catch (err) {
+    console.error('[checkServiceStatus] 获取服务状态失败:', err);
+    // 获取状态失败，视为服务断开
+    isServiceRunning.value = false;
+    historyItems.value = [];
+  }
+}
+
+onMounted(() => {
+  // 初始检查
+  checkServiceStatus();
+  // 定期检查服务状态（每2秒）
+  checkInterval = setInterval(checkServiceStatus, 2000);
+});
+
+onUnmounted(() => {
+  if (checkInterval) {
+    clearInterval(checkInterval);
+  }
+});
 </script>