XuJiacheng
282f7268ed
- 新增统一项目列表Redis键和迁移工具 - 实现GET /api/projects端点获取项目列表 - 实现POST /api/projects/migrate端点支持数据迁移 - 更新前端ProjectSelector组件使用真实项目数据 - 扩展projectStore状态管理 - 更新相关文档和OpenSpec规范 - 添加测试用例验证新功能
3.6 KiB
3.6 KiB
构建完整的项目界面实施计划
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. 实施步骤
- 修改App.vue，实现基本布局结构
- 创建项目选择组件
- 创建控制台组件
- 创建调试区域组件
- 创建主页面组件，整合所有模块
- 更新路由配置
- 实现样式设计
- 实现交互功能
- 测试和优化
该计划将确保项目界面按照样品图所示效果构建，同时实现所有核心功能模块。