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

## 1. 整体布局设计

### 1.1 修改App.vue布局

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

### 1.2 响应式设计实现

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

## 2. 项目选择模块

### 2.1 创建项目选择组件

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

### 2.2 项目数据模型

```javascript
{
  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条记录
- 达到上限时自动删除最旧的记录
- 日志数据模型：

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

## 4. 调试区域管理

### 4.1 创建调试区域组件

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

### 4.2 调试信息数据模型

```javascript
{
  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. 测试和优化

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