Web_BLS_ProjectConsole/.trae/documents/plan_20260110_062839.md

构建完整的项目界面实施计划

1. 整体布局设计

1.1 修改App.vue布局

• 实现左侧选择区域与右侧调试区域的双栏布局
• 添加响应式设计，在移动端自动隐藏左侧选择区域
• 实现左侧选择区域的折叠/展开功能

1.2 响应式设计实现

• 使用CSS Media Queries实现响应式布局
• PC端：左侧选择区域固定宽度，右侧调试区域自适应
• 移动端：左侧选择区域转为下拉选择器，右侧内容区域占满屏幕宽度

2. 项目选择模块

2.1 创建项目选择组件

• 组件位置：src/frontend/components/ProjectSelector.vue
• 功能：
  • 项目列表展示
  • 项目类型筛选（后端项目/前端项目）
  • 项目搜索功能
  • 项目选择功能

2.2 项目数据模型

{
  id: string,
  name: string,
  type: string, // 'backend' | 'frontend'
  description: string,
  status: string // 'running' | 'stopped' | 'error'
}

3. 控制台区域

3.1 创建控制台组件

• 组件位置：src/frontend/components/Console.vue
• 功能：
  • 命令输入框
  • 日志显示区域
  • 日志级别筛选
  • 日志清理功能
  • 自动滚动到最新日志

3.2 控制台日志管理

• 实现日志记录上限控制，最多保存1000条记录
• 达到上限时自动删除最旧的记录
• 日志数据模型：

{
  id: string,
  timestamp: string,
  level: string, // 'info' | 'warn' | 'error' | 'debug'
  message: string
}

4. 调试区域管理

4.1 创建调试区域组件

• 组件位置：src/frontend/components/DebugArea.vue
• 功能：
  • 调试信息展示
  • 多条件筛选（时间范围、调试类型、项目名称等）
  • 调试信息导出功能

4.2 调试信息数据模型

{
  id: string,
  projectId: string,
  timestamp: string,
  type: string,
  content: string,
  metadata: object
}

5. 主页面整合

5.1 创建主页面组件

• 组件位置：src/frontend/views/MainView.vue
• 功能：
  • 整合项目选择模块、控制台区域、调试区域
  • 实现各模块间的通信
  • 管理全局状态

5.2 更新路由配置

• 将主页面设置为默认路由
• 保持原有的日志和命令路由，或整合到主页面中

6. 样式设计

6.1 全局样式

• 设计统一的颜色方案
• 定义统一的字体和间距
• 实现主题切换功能（可选）

6.2 组件样式

• 为每个组件设计符合样品图的样式
• 实现悬停效果和过渡动画
• 确保移动端样式适配

7. 交互功能

7.1 项目选择交互

• 点击项目列表项选择项目
• 选择项目后更新控制台和调试区域的内容
• 支持多选项目（可选）

7.2 控制台交互

• 输入命令后按Enter键发送
• 支持命令历史记录
• 支持日志复制功能

7.3 调试区域交互

• 点击筛选条件展开/折叠筛选选项
• 支持调试信息的排序和分组
• 实现调试信息的详情查看

8. 测试与优化

8.1 功能测试

• 测试各模块的基本功能
• 测试响应式设计
• 测试日志管理功能

8.2 性能优化

• 优化长列表渲染性能
• 优化日志滚动性能
• 减少不必要的重新渲染

9. 实施步骤

1. 修改App.vue，实现基本布局结构
2. 创建项目选择组件
3. 创建控制台组件
4. 创建调试区域组件
5. 创建主页面组件，整合所有模块
6. 更新路由配置
7. 实现样式设计
8. 实现交互功能
9. 测试和优化

该计划将确保项目界面按照样品图所示效果构建，同时实现所有核心功能模块。