204 lines
7.1 KiB
Markdown
204 lines
7.1 KiB
Markdown
|
# TraceStudio 第一阶段开发完成总结
|
|||
|
|
|
|||
|
|
## ✅ 已完成的功能
|
|||
|
|
|
|||
|
|
### 前端 (Web)
|
|||
|
|
|
|||
|
|
#### 1. 智能算子侧边栏 (NodePalette)
|
|||
|
|
- ✅ **搜索置顶**：固定在顶部的搜索框，支持实时过滤
|
|||
|
|
- ✅ **即时过滤**：输入关键词立即过滤算子列表
|
|||
|
|
- ✅ **分类折叠**：算子按 Loaders、Transforms、Filters、Visualizers 分组
|
|||
|
|
- ✅ **跨组搜索**：搜索结果可跨类别显示
|
|||
|
|
- ✅ **拖拽反馈**：拖拽时的视觉反馈和状态指示
|
|||
|
|
- ✅ **图标标识**：每种类别都有独特的 emoji 图标
|
|||
|
|
- ✅ **预览徽章**：支持预览的节点显示 ⚡ 标识
|
|||
|
|
|
|||
|
|
#### 2. 全局控制顶栏 (HeaderBar)
|
|||
|
|
- ✅ **运行按钮**：大型、醒目的主操作按钮，支持运行/停止切换
|
|||
|
|
- ✅ **状态指示器**：实时显示系统状态（运行中/空闲）
|
|||
|
|
- ✅ **状态灯动画**：运行时带呼吸动画的绿色指示灯
|
|||
|
|
- ✅ **图统计**：实时显示节点数和连接数
|
|||
|
|
- ✅ **采样率控制**：1%/10%/25%/100% 四档采样率选择
|
|||
|
|
- ✅ **时间窗口**：可配置的数据时间范围
|
|||
|
|
- ✅ **视图切换**：快速切换左右侧面板的显示/隐藏
|
|||
|
|
- ✅ **语言切换**：中文/英文界面切换
|
|||
|
|
- ✅ **设置入口**：访问全局设置的快捷按钮
|
|||
|
|
|
|||
|
|
#### 3. 响应式画布与侧板 (Workspace & Inspector)
|
|||
|
|
- ✅ **React Flow 集成**：完整的节点编辑器功能
|
|||
|
|
- ✅ **空状态提示**：画布为空时的引导界面
|
|||
|
|
- ✅ **节点拖拽**：从侧边栏拖拽算子到画布
|
|||
|
|
- ✅ **节点选择**：点击节点查看属性
|
|||
|
|
- ✅ **属性编辑**：在右侧面板编辑节点参数
|
|||
|
|
- ✅ **概览面板**：未选中节点时显示工作流统计
|
|||
|
|
- ✅ **数据预览**：支持运行节点预览输出数据
|
|||
|
|
- ✅ **小地图**：画布全局视图导航
|
|||
|
|
- ✅ **缩放控制**：内置的缩放和适应视图控件
|
|||
|
|
- ✅ **响应式布局**：侧边栏可折叠，画布自适应
|
|||
|
|
|
|||
|
|
#### 4. 设置模态框 (SettingsModal)
|
|||
|
|
- ✅ **语言设置**：切换界面语言
|
|||
|
|
- ✅ **关于信息**：显示版本和项目信息
|
|||
|
|
- ✅ **优雅动画**：淡入和滑动动画效果
|
|||
|
|
|
|||
|
|
### 后端 (Server)
|
|||
|
|
|
|||
|
|
#### 1. 基础 API 结构
|
|||
|
|
- ✅ **FastAPI 框架**：现代化的 Python Web 框架
|
|||
|
|
- ✅ **CORS 配置**：支持跨域请求
|
|||
|
|
- ✅ **自动文档**：访问 `/docs` 查看 Swagger UI
|
|||
|
|
|
|||
|
|
#### 2. 核心端点
|
|||
|
|
- ✅ **GET /plugins**：返回所有可用算子的元数据
|
|||
|
|
- ✅ **POST /node/preview**：预览节点输出（模拟数据）
|
|||
|
|
- ✅ **POST /graph/execute**：执行计算图（占位实现）
|
|||
|
|
|
|||
|
|
#### 3. 测试数据
|
|||
|
|
- ✅ **8 种算子类型**：覆盖 Loaders、Transforms、Filters、Visualizers
|
|||
|
|
- ✅ **参数模式**：每个算子都有详细的参数定义
|
|||
|
|
- ✅ **模拟预览数据**：CSV 和 Transform 节点的示例输出
|
|||
|
|
|
|||
|
|
## 🎨 设计特色
|
|||
|
|
|
|||
|
|
### ComfyUI 风格体现
|
|||
|
|
1. **节点即视觉**：所有数据流通过节点连线可见化
|
|||
|
|
2. **原子化算子**：每个节点职责单一，易于组合
|
|||
|
|
3. **实时反馈**：运行时的动画和状态变化
|
|||
|
|
4. **深色工业风**：保护视力的深色配色方案
|
|||
|
|
5. **搜索优先**：快速定位需要的算子
|
|||
|
|
|
|||
|
|
### 交互细节
|
|||
|
|
- 🎯 **Hover 效果**：所有交互元素都有悬停反馈
|
|||
|
|
- 🎨 **渐变按钮**：主要操作使用渐变色突出
|
|||
|
|
- ✨ **平滑动画**：0.15-0.3s 的过渡动画
|
|||
|
|
- 📊 **信息密度**：在紧凑空间内展示最大信息量
|
|||
|
|
- 🔍 **清晰层次**：通过颜色、大小、间距区分重要性
|
|||
|
|
|
|||
|
|
## 📁 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
TraceStudio/
|
|||
|
|
├── web/ # React 前端
|
|||
|
|
│ ├── src/
|
|||
|
|
│ │ ├── components/
|
|||
|
|
│ │ │ ├── AppShell.tsx ✅ 主布局容器
|
|||
|
|
│ │ │ ├── HeaderBar.tsx ✅ 全局控制栏
|
|||
|
|
│ │ │ ├── NodePalette.tsx ✅ 算子侧边栏
|
|||
|
|
│ │ │ ├── Workspace.tsx ✅ 画布编辑器
|
|||
|
|
│ │ │ ├── Inspector.tsx ✅ 属性检查器
|
|||
|
|
│ │ │ └── SettingsModal.tsx ✅ 设置弹窗
|
|||
|
|
│ │ ├── stores/
|
|||
|
|
│ │ │ └── useStore.ts ✅ Zustand 状态管理
|
|||
|
|
│ │ ├── utils/
|
|||
|
|
│ │ └── i18n.ts ✅ 国际化支持
|
|||
|
|
│ └── package.json
|
|||
|
|
│
|
|||
|
|
└── server/ # Python 后端
|
|||
|
|
├── main.py ✅ FastAPI 入口
|
|||
|
|
├── requirements.txt ✅ 依赖列表
|
|||
|
|
└── README.md ✅ 后端文档
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🚀 启动指南
|
|||
|
|
|
|||
|
|
### 1. 启动后端服务
|
|||
|
|
|
|||
|
|
```powershell
|
|||
|
|
# 进入 server 目录
|
|||
|
|
cd server
|
|||
|
|
|
|||
|
|
# 创建虚拟环境（可选）
|
|||
|
|
conda create -n tracestudio python=3.11
|
|||
|
|
conda activate tracestudio
|
|||
|
|
|
|||
|
|
# 安装依赖
|
|||
|
|
pip install -r requirements.txt
|
|||
|
|
|
|||
|
|
# 启动服务
|
|||
|
|
python main.py
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
后端将在 `http://127.0.0.1:8000` 启动。
|
|||
|
|
|
|||
|
|
### 2. 启动前端开发服务器
|
|||
|
|
|
|||
|
|
```powershell
|
|||
|
|
# 进入 web 目录
|
|||
|
|
cd web
|
|||
|
|
|
|||
|
|
# 安装依赖（首次运行）
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 启动开发服务器
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
前端将在 `http://localhost:5173` 启动（Vite 默认端口）。
|
|||
|
|
|
|||
|
|
### 3. 验证功能
|
|||
|
|
|
|||
|
|
1. **打开浏览器**访问前端地址
|
|||
|
|
2. **查看算子面板**：左侧应显示 8 种算子
|
|||
|
|
3. **搜索测试**：在搜索框输入 "CSV" 应过滤显示相关节点
|
|||
|
|
4. **拖拽节点**：将 "CSV 数据加载器" 拖到画布
|
|||
|
|
5. **查看属性**：点击节点，右侧显示属性面板
|
|||
|
|
6. **运行预览**：点击 "运行预览" 按钮查看模拟数据
|
|||
|
|
|
|||
|
|
## 📊 测试用例
|
|||
|
|
|
|||
|
|
### 前端测试
|
|||
|
|
- [ ] 搜索功能：输入关键词能正确过滤
|
|||
|
|
- [ ] 节点拖拽：能从侧边栏拖拽到画布
|
|||
|
|
- [ ] 节点选择：点击节点能显示属性
|
|||
|
|
- [ ] 属性编辑：修改属性值能实时更新
|
|||
|
|
- [ ] 视图切换：左右面板能正常折叠/展开
|
|||
|
|
- [ ] 语言切换：中英文能正确切换
|
|||
|
|
- [ ] 运行按钮：点击能切换运行状态
|
|||
|
|
|
|||
|
|
### 后端测试
|
|||
|
|
- [ ] API 可访问：`http://127.0.0.1:8000` 返回成功
|
|||
|
|
- [ ] 插件列表：`GET /plugins` 返回 8 种算子
|
|||
|
|
- [ ] 预览功能：`POST /node/preview` 返回模拟数据
|
|||
|
|
- [ ] API 文档：`http://127.0.0.1:8000/docs` 可访问
|
|||
|
|
|
|||
|
|
## 🎯 下一阶段计划
|
|||
|
|
|
|||
|
|
### 第二阶段：数据流引擎
|
|||
|
|
1. 实现节点之间的数据传递
|
|||
|
|
2. DAG 拓扑排序和执行顺序
|
|||
|
|
3. 粗细线策略（采样/全量）
|
|||
|
|
4. 缓存系统
|
|||
|
|
|
|||
|
|
### 第三阶段：Unreal Insights 集成
|
|||
|
|
1. utrace 文件解析
|
|||
|
|
2. 真实数据加载
|
|||
|
|
3. 性能数据处理
|
|||
|
|
4. 可视化图表
|
|||
|
|
|
|||
|
|
### 第四阶段：高级功能
|
|||
|
|
1. 工作流保存/加载（.tsflow）
|
|||
|
|
2. 自定义节点支持
|
|||
|
|
3. Python 脚本节点
|
|||
|
|
4. 用户目录管理
|
|||
|
|
|
|||
|
|
## 💡 技术亮点
|
|||
|
|
|
|||
|
|
1. **TypeScript + React**：类型安全的前端开发
|
|||
|
|
2. **Zustand**：轻量级状态管理
|
|||
|
|
3. **React Flow**：专业的节点编辑器
|
|||
|
|
4. **FastAPI**：现代 Python Web 框架
|
|||
|
|
5. **响应式设计**：适配不同屏幕尺寸
|
|||
|
|
6. **ComfyUI 范式**：遵循成熟的节点编辑器设计模式
|
|||
|
|
|
|||
|
|
## 🙏 参考资料
|
|||
|
|
|
|||
|
|
- [ComfyUI](https://github.com/comfyanonymous/ComfyUI) - 节点编辑器设计理念
|
|||
|
|
- [React Flow](https://reactflow.dev/) - 节点图库
|
|||
|
|
- [FastAPI](https://fastapi.tiangolo.com/) - Python Web 框架
|
|||
|
|
- [Unreal Insights](https://docs.unrealengine.com/en-US/unreal-insights/) - 性能分析工具
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**开发状态**：第一阶段 ✅ 完成
|
|||
|
|
**下一步**：启动前后端服务，进行功能验证测试
|