feat: 重构项目心跳数据结构并实现项目列表API

- 新增统一项目列表Redis键和迁移工具
- 实现GET /api/projects端点获取项目列表
- 实现POST /api/projects/migrate端点支持数据迁移
- 更新前端ProjectSelector组件使用真实项目数据
- 扩展projectStore状态管理
- 更新相关文档和OpenSpec规范
- 添加测试用例验证新功能

src/frontend/views/LogView.vue

@@ -1,24 +1,76 @@
 <template>
   <div class="log-view">
-    <h2>日志记录</h2>
-    <div class="log-container">
+    <div class="log-header">
+      <h2>日志记录</h2>
       <div
-        v-if="logs.length === 0"
+        v-if="projectName"
+        class="project-info"
+      >
+        <span class="project-name">{{ projectName }}</span>
+        <span
+          v-if="projectStatus"
+          class="project-status"
+          :class="`status-${projectStatus}`"
+        >
+          {{ projectStatus === '在线' ? '在线' : '离线' }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      v-if="!projectName"
+      class="no-project"
+    >
+      <p>请先选择一个项目</p>
+    </div>
+
+    <div
+      v-else
+      class="log-container"
+    >
+      <div
+        v-if="loading"
+        class="loading-state"
+      >
+        <p>加载日志中...</p>
+      </div>
+      <div
+        v-else-if="error"
+        class="error-state"
+      >
+        <p>{{ error }}</p>
+      </div>
+      <div
+        v-else-if="logs.length === 0"
         class="empty-state"
       >
         <p>暂无日志记录</p>
       </div>
       <div
-        v-for="(log, index) in logs"
-        :key="index"
-        class="log-item"
+        v-else
+        class="log-list"
       >
-        <div class="log-header">
-          <span class="log-timestamp">{{ log.timestamp }}</span>
-          <span class="log-level">{{ log.level }}</span>
-        </div>
-        <div class="log-message">
-          {{ log.message }}
+        <div
+          v-for="(log, index) in logs"
+          :key="log.id || index"
+          class="log-item"
+          :class="`level-${log.level}`"
+        >
+          <div class="log-header">
+            <span class="log-timestamp">
+              {{ formatTimestamp(log.timestamp) }}
+            </span>
+            <span class="log-level">{{ log.level }}</span>
+          </div>
+          <div class="log-message">
+            {{ log.message }}
+          </div>
+          <div
+            v-if="log.metadata"
+            class="log-metadata"
+          >
+            <pre>{{ JSON.stringify(log.metadata, null, 2) }}</pre>
+          </div>
         </div>
       </div>
     </div>
@@ -26,66 +78,269 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+  projectName: {
+    type: String,
+    default: '',
+  },
+});
 
 const logs = ref([]);
+const loading = ref(false);
+const error = ref(null);
+const projectStatus = ref(null);
+let refreshInterval = null;
+
+const fetchLogs = async () => {
+  if (!props.projectName) {
+    logs.value = [];
+    projectStatus.value = null;
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const response = await axios.get(
+      `http://localhost:3001/api/logs?projectName=${encodeURIComponent(props.projectName)}`,
+    );
+    logs.value = response.data.logs || [];
+    projectStatus.value = response.data.projectStatus;
+  } catch (err) {
+    console.error('Failed to fetch logs:', err);
+    error.value = '获取日志失败';
+    logs.value = [];
+    projectStatus.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const formatTimestamp = (timestamp) => {
+  if (!timestamp) return '';
+  const date = new Date(timestamp);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+};
+
+watch(
+  () => props.projectName,
+  () => {
+    fetchLogs();
+  },
+);
+
+onMounted(() => {
+  if (props.projectName) {
+    fetchLogs();
+  }
+  refreshInterval = setInterval(fetchLogs, 5000);
+});
+
+onUnmounted(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+  }
+});
 </script>
 
 <style scoped>
 .log-view {
-  max-width: 1200px;
-  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1rem;
+  background-color: #1e1e1e;
+  box-sizing: border-box;
 }
 
-h2 {
+.log-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 1rem;
-  color: #333;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #3e3e42;
+}
+
+.log-header h2 {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #e0e0e0;
+  margin: 0;
+}
+
+.project-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.project-name {
+  font-size: 0.9rem;
+  color: #b0b0b0;
+}
+
+.project-status {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.status-在线 {
+  background-color: #1e3a2a;
+  color: #4ade80;
+}
+
+.status-离线 {
+  background-color: #3a1a1a;
+  color: #f87171;
+}
+
+.no-project {
+  text-align: center;
+  padding: 2rem;
+  color: #999;
 }
 
 .log-container {
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1rem;
-  max-height: 600px;
-  overflow-y: auto;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
+.loading-state,
+.error-state,
 .empty-state {
   text-align: center;
-  color: #666;
   padding: 2rem;
+  color: #999;
+}
+
+.error-state {
+  color: #ea4335;
+}
+
+.log-list {
+  flex: 1;
+  overflow-y: auto;
+  max-height: calc(100vh - 200px);
 }
 
 .log-item {
-  padding: 1rem;
-  border-bottom: 1px solid #eee;
+  padding: 0.8rem;
+  margin-bottom: 0.5rem;
+  background-color: #252526;
+  border: 1px solid #3e3e42;
+  border-radius: 4px;
+  border-left: 3px solid #999;
 }
 
-.log-item:last-child {
-  border-bottom: none;
+.log-item.level-info {
+  border-left-color: #4285f4;
+}
+
+.log-item.level-warn {
+  border-left-color: #fbbc05;
+}
+
+.log-item.level-error {
+  border-left-color: #ea4335;
+}
+
+.log-item.level-debug {
+  border-left-color: #999;
 }
 
 .log-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 0.5rem;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .log-timestamp {
-  color: #666;
+  color: #999;
 }
 
 .log-level {
   font-weight: bold;
   padding: 0.2rem 0.5rem;
   border-radius: 4px;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.log-item.level-info .log-level {
+  background-color: #1e3a5e;
+  color: #4285f4;
+}
+
+.log-item.level-warn .log-level {
+  background-color: #5e4e1e;
+  color: #fbbc05;
+}
+
+.log-item.level-error .log-level {
+  background-color: #5e1e1e;
+  color: #ea4335;
+}
+
+.log-item.level-debug .log-level {
+  background-color: #3e3e3e;
+  color: #999;
 }
 
 .log-message {
-  color: #333;
+  color: #e0e0e0;
   line-height: 1.5;
+  margin-bottom: 0.5rem;
+  word-wrap: break-word;
 }
-</style>
+
+.log-metadata {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background-color: #1e1e1e;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.log-metadata pre {
+  margin: 0;
+  font-size: 0.75rem;
+  color: #b0b0b0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.log-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.log-list::-webkit-scrollbar-track {
+  background: #252526;
+  border-radius: 4px;
+}
+
+.log-list::-webkit-scrollbar-thumb {
+  background: #3e3e42;
+  border-radius: 4px;
+}
+
+.log-list::-webkit-scrollbar-thumb:hover {
+  background: #4e4e52;
+}
+</style>