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

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

.trae/documents/BLS Project Console 系统功能优化与修复.md

@@ -0,0 +1,211 @@
+# BLS Project Console 系统功能优化与修复计划
+
+## 📋 任务概述
+
+完成界面显示修复、Redis数据结构重构、相关代码修改、文档更新和测试验证。
+
+## 🔍 当前问题分析
+
+### 1. 界面显示问题
+
+- **ProjectSelector.vue** (第54-97行) 包含硬编码的6个测试假数据
+- 没有从Redis读取真实项目心跳数据
+- 界面展示的是静态测试数据，而非真实有效的项目
+
+### 2. Redis数据结构问题
+
+- 当前使用分散的键：`{projectName}_项目心跳`
+- 每个项目的心跳数据独立存储，难以统一管理
+- 缺少统一的项目列表查询机制
+
+### 3. 后端API现状
+
+- **logs.js** 和 **commands.js** 都从 `{projectName}_项目心跳` 读取数据
+- **redisKeys.js** 定义了 `projectHeartbeatKey(projectName)` 函数
+- 缺少获取所有项目列表的API端点
+
+### 4. 测试缺失
+
+- 项目中没有测试文件
+- 缺少单元测试和集成测试
+
+## 🎯 实施计划
+
+### 阶段1：Redis数据结构重构
+
+#### 1.1 新增Redis键定义
+
+- 在 `redisKeys.js` 中添加 `projectsListKey()` 函数
+- 定义统一的项目列表键：`项目心跳`
+
+#### 1.2 创建数据迁移工具
+
+- 创建 `src/backend/services/migrateHeartbeatData.js`
+- 实现从分散键到统一列表的迁移逻辑
+- 确保数据完整性和一致性
+
+#### 1.3 更新心跳数据结构
+
+- 新结构：`[{ "apiBaseUrl": "...", "lastActiveAt": 1234567890, "projectName": "..." }]`
+- 每个对象包含：API地址、最新心跳时间、项目名称
+
+### 阶段2：后端API开发
+
+#### 2.1 创建项目列表API
+
+- 在 `src/backend/routes/` 下创建 `projects.js`
+- 实现 `GET /api/projects` 端点
+- 从Redis读取项目列表并返回
+
+#### 2.2 更新现有API
+
+- 修改 `logs.js` 以兼容新的数据结构
+- 修改 `commands.js` 以兼容新的数据结构
+- 保持向后兼容性
+
+#### 2.3 添加数据迁移端点
+
+- 实现 `POST /api/projects/migrate` 端点
+- 支持手动触发数据迁移
+
+### 阶段3：前端代码修改
+
+#### 3.1 更新ProjectSelector组件
+
+- 移除硬编码的测试数据（第54-97行）
+- 从 `/api/projects` 获取真实项目列表
+- 实现数据加载状态和错误处理
+
+#### 3.2 更新projectStore
+
+- 扩展状态管理以支持项目列表
+- 添加项目列表的响应式状态
+
+#### 3.3 更新LogView和CommandView
+
+- 连接到真实API端点
+- 实现日志和命令的真实功能
+- 添加错误处理和用户反馈
+
+#### 3.4 更新App.vue
+
+- 修正健康检查端点（从3000改为3001）
+- 确保服务状态监控正常工作
+
+### 阶段4：文档更新
+
+#### 4.1 更新技术文档
+
+- 创建或更新 `docs/redis-data-structure.md`
+- 详细说明新的Redis数据结构设计
+- 提供数据迁移指南
+
+#### 4.2 更新OpenSpec规范
+
+- 更新 `openspec/specs/logging/spec.md`
+- 更新 `openspec/specs/command/spec.md`
+- 更新 `openspec/specs/redis-connection/spec.md`
+- 添加项目列表相关需求
+
+#### 4.3 创建OpenSpec变更提案
+
+- 创建 `openspec/changes/refactor-project-heartbeat/`
+- 编写 `proposal.md`、`tasks.md` 和规范增量
+
+### 阶段5：测试开发
+
+#### 5.1 单元测试
+
+- 创建 `src/backend/services/__tests__/migrateHeartbeatData.test.js`
+- 测试数据迁移功能
+- 测试Redis键操作
+
+#### 5.2 集成测试
+
+- 创建 `src/backend/routes/__tests__/projects.test.js`
+- 测试项目列表API
+- 测试数据迁移API
+
+#### 5.3 前端测试
+
+- 创建 `src/frontend/components/__tests__/ProjectSelector.test.js`
+- 测试组件渲染和交互
+
+#### 5.4 性能测试
+
+- 测试不同项目数量下的性能
+- 测试不同心跳频率下的性能
+
+### 阶段6：代码质量与验证
+
+#### 6.1 代码规范检查
+
+- 运行 ESLint 检查
+- 运行 Prettier 格式化
+- 确保符合项目代码规范
+
+#### 6.2 功能验证
+
+- 验证项目选择功能正常
+- 验证日志读取功能正常
+- 验证命令发送功能正常
+
+#### 6.3 性能验证
+
+- 测试大量项目场景
+- 测试高频心跳场景
+- 优化性能瓶颈
+
+## 📁 文件修改清单
+
+### 新增文件
+
+- `src/backend/services/migrateHeartbeatData.js` - 数据迁移工具
+- `src/backend/routes/projects.js` - 项目列表API
+- `src/backend/services/__tests__/migrateHeartbeatData.test.js` - 迁移测试
+- `src/backend/routes/__tests__/projects.test.js` - API测试
+- `src/frontend/components/__tests__/ProjectSelector.test.js` - 组件测试
+- `docs/redis-data-structure.md` - 数据结构文档
+- `openspec/changes/refactor-project-heartbeat/proposal.md` - 变更提案
+- `openspec/changes/refactor-project-heartbeat/tasks.md` - 任务清单
+- `openspec/changes/refactor-project-heartbeat/specs/` - 规范增量
+
+### 修改文件
+
+- `src/backend/services/redisKeys.js` - 添加项目列表键
+- `src/backend/routes/logs.js` - 更新心跳读取逻辑
+- `src/backend/routes/commands.js` - 更新心跳读取逻辑
+- `src/backend/server.js` - 注册项目列表路由
+- `src/frontend/components/ProjectSelector.vue` - 移除假数据，连接API
+- `src/frontend/store/projectStore.js` - 扩展状态管理
+- `src/frontend/views/LogView.vue` - 连接真实API
+- `src/frontend/views/CommandView.vue` - 连接真实API
+- `src/frontend/App.vue` - 修正健康检查端点
+- `openspec/specs/logging/spec.md` - 更新规范
+- `openspec/specs/command/spec.md` - 更新规范
+- `openspec/specs/redis-connection/spec.md` - 更新规范
+
+## ⚠️ 风险与注意事项
+
+1. **数据迁移风险**：确保迁移过程中数据不丢失
+2. **向后兼容性**：保持现有API的兼容性
+3. **性能影响**：大量项目时需要优化查询性能
+4. **测试覆盖**：确保所有修改都有对应的测试
+
+## ✅ 验收标准
+
+1. ✅ 界面只展示真实有效的项目数据
+2. ✅ Redis数据结构统一为项目列表
+3. ✅ 所有相关代码与新数据结构兼容
+4. ✅ 文档和规范已更新
+5. ✅ 所有测试通过
+6. ✅ 代码符合项目规范
+7. ✅ 性能满足要求
+
+## 📊 预期成果
+
+- 修复界面显示问题，移除测试假数据
+- 统一Redis数据结构，提高可维护性
+- 完善测试覆盖，提高代码质量
+- 更新文档和规范，保持一致性
+- 提供完整的变更记录和测试报告

.trae/documents/plan_20260110_062839.md

@@ -3,11 +3,13 @@
 ## 1. 整体布局设计
 
 ### 1.1 修改App.vue布局
+
 - 实现左侧选择区域与右侧调试区域的双栏布局
 - 添加响应式设计，在移动端自动隐藏左侧选择区域
 - 实现左侧选择区域的折叠/展开功能
 
 ### 1.2 响应式设计实现
+
 - 使用CSS Media Queries实现响应式布局
 - PC端：左侧选择区域固定宽度，右侧调试区域自适应
 - 移动端：左侧选择区域转为下拉选择器，右侧内容区域占满屏幕宽度
@@ -15,6 +17,7 @@
 ## 2. 项目选择模块
 
 ### 2.1 创建项目选择组件
+
 - 组件位置：`src/frontend/components/ProjectSelector.vue`
 - 功能：
   - 项目列表展示
@@ -23,6 +26,7 @@
   - 项目选择功能
 
 ### 2.2 项目数据模型
+
 ```javascript
 {
   id: string,
@@ -36,6 +40,7 @@
 ## 3. 控制台区域
 
 ### 3.1 创建控制台组件
+
 - 组件位置：`src/frontend/components/Console.vue`
 - 功能：
   - 命令输入框
@@ -45,9 +50,11 @@
   - 自动滚动到最新日志
 
 ### 3.2 控制台日志管理
+
 - 实现日志记录上限控制，最多保存1000条记录
 - 达到上限时自动删除最旧的记录
 - 日志数据模型：
+
 ```javascript
 {
   id: string,
@@ -60,6 +67,7 @@
 ## 4. 调试区域管理
 
 ### 4.1 创建调试区域组件
+
 - 组件位置：`src/frontend/components/DebugArea.vue`
 - 功能：
   - 调试信息展示
@@ -67,6 +75,7 @@
   - 调试信息导出功能
 
 ### 4.2 调试信息数据模型
+
 ```javascript
 {
   id: string,
@@ -81,6 +90,7 @@
 ## 5. 主页面整合
 
 ### 5.1 创建主页面组件
+
 - 组件位置：`src/frontend/views/MainView.vue`
 - 功能：
   - 整合项目选择模块、控制台区域、调试区域
@@ -88,17 +98,20 @@
   - 管理全局状态
 
 ### 5.2 更新路由配置
+
 - 将主页面设置为默认路由
 - 保持原有的日志和命令路由，或整合到主页面中
 
 ## 6. 样式设计
 
 ### 6.1 全局样式
+
 - 设计统一的颜色方案
 - 定义统一的字体和间距
 - 实现主题切换功能（可选）
 
 ### 6.2 组件样式
+
 - 为每个组件设计符合样品图的样式
 - 实现悬停效果和过渡动画
 - 确保移动端样式适配
@@ -106,16 +119,19 @@
 ## 7. 交互功能
 
 ### 7.1 项目选择交互
+
 - 点击项目列表项选择项目
 - 选择项目后更新控制台和调试区域的内容
 - 支持多选项目（可选）
 
 ### 7.2 控制台交互
+
 - 输入命令后按Enter键发送
 - 支持命令历史记录
 - 支持日志复制功能
 
 ### 7.3 调试区域交互
+
 - 点击筛选条件展开/折叠筛选选项
 - 支持调试信息的排序和分组
 - 实现调试信息的详情查看
@@ -123,11 +139,13 @@
 ## 8. 测试与优化
 
 ### 8.1 功能测试
+
 - 测试各模块的基本功能
 - 测试响应式设计
 - 测试日志管理功能
 
 ### 8.2 性能优化
+
 - 优化长列表渲染性能
 - 优化日志滚动性能
 - 减少不必要的重新渲染
@@ -144,4 +162,4 @@
 8. 实现交互功能
 9. 测试和优化
 
-该计划将确保项目界面按照样品图所示效果构建，同时实现所有核心功能模块。
+该计划将确保项目界面按照样品图所示效果构建，同时实现所有核心功能模块。

.trae/documents/完善前后端Node.js控制台项目的基础架构.md

@@ -3,11 +3,13 @@
 ## 1. 项目初始化
 
 ### 1.1 创建核心配置文件
+
 - **package.json**: 初始化项目配置，包含项目基本信息、依赖管理、脚本命令等
 - **vite.config.js**: 配置Vite打包工具，支持前后端分离开发
 - **.gitignore**: 配置Git忽略文件，避免提交不必要的文件
 
 ### 1.2 安装核心依赖
+
 - **前端依赖**: Vue 3.x、Vue Router、Axios等
 - **后端依赖**: Express、Redis客户端、Cors等
 - **开发依赖**: Vite、ESLint、Prettier等
@@ -15,6 +17,7 @@
 ## 2. 完善OpenSpec模块
 
 ### 2.1 更新openspec/project.md
+
 - 详细描述项目目的和目标
 - 明确技术栈：Vue 3.x、Node.js、Vite、Redis
 - 定义代码风格、架构模式、测试策略和Git工作流
@@ -22,12 +25,14 @@
 - 文档外部依赖
 
 ### 2.2 创建规格文档
+
 - 在openspec/specs/目录下创建核心能力规格
   - **logging/spec.md**: 日志读取和展示功能规格
   - **command/spec.md**: 控制台指令发送功能规格
   - **redis-connection/spec.md**: Redis连接管理规格
 
 ### 2.3 创建设计文档
+
 - 在openspec/specs/目录下为每个核心能力创建设计文档
   - **logging/design.md**: 日志功能技术设计
   - **command/design.md**: 指令功能技术设计
@@ -36,39 +41,48 @@
 ## 3. 编写README.md
 
 ### 3.1 项目概述
+
 - 项目名称、描述和主要功能
 - 技术栈和架构说明
 
 ### 3.2 快速开始
+
 - 环境要求
 - 安装和运行步骤
 
 ### 3.3 项目结构
+
 - 目录结构说明
 - 核心文件功能介绍
 
 ### 3.4 功能模块
+
 - 日志记录展示功能
 - 控制台指令发送功能
 
 ### 3.5 开发指南
+
 - 代码风格规范
 - 开发流程
 - 测试指南
 
 ### 3.6 部署说明
+
 - 生产环境部署步骤
 - 配置说明
 
 ## 4. 编写框架约束文件
 
 ### 4.1 ESLint配置
+
 - **.eslintrc.js**: 配置代码质量检查规则
 
 ### 4.2 Prettier配置
+
 - **.prettierrc**: 配置代码格式化规则
 
 ### 4.3 编辑器配置
+
 - **.vscode/settings.json**: VS Code编辑器配置
 
 ## 5. 目录结构规划
@@ -126,4 +140,4 @@ Web_BLS_ProjectConsole/
 7. 创建编辑器配置文件
 8. 创建基本目录结构
 
-这个计划将为项目搭建一个完整的基础架构，包括文档、配置和依赖管理，为后续实现具体功能做好准备。
+这个计划将为项目搭建一个完整的基础架构，包括文档、配置和依赖管理，为后续实现具体功能做好准备。