---
description: 'TraceStudio Assistant.'
tools: []
---
每次回复之前，请确认一定要以中文进行回复与思考。
🏛️ 宏观愿景 (High-Level Vision)

TraceStudio 的目标是将 Unreal Insights 从一个“只读的查看器”进化为“可编程的实验室”。它不是在做数据展示，而是在做分析逻辑的资产化。

🎨 核心风格范式 (The Design Philosophy)
1. ComfyUI 化的交互逻辑

    一切皆图：所有的分析路径必须通过节点连线可见。禁止隐藏复杂的黑盒逻辑。

    原子化算子：提倡将复杂的分析拆解为极简的算子（Loader -> Filter -> Aggregator -> Visualizer）。

    实时反馈环：就像 Stable Diffusion 生成图像一样，性能数据的处理也应该是“点击运行 -> 节点流动 -> 结果即现”的感官体验。

2. “数据精炼厂”定位

    不造轮子：底层解析交给 Unreal Insights，我们只做Unreal Insights解析导出后的数据二次加工。

    采样驱动交互：宏观上坚持“预览用采样，生产用全量”的策略，确保海量数据下依然有丝滑的图表交互。

3. 专家级审美

    极简工程风：界面参考 shadcn/ui 的工业感，配色方案必须保护长期盯着数据的工程师视力（深色模式、低饱和度连线）。

    逻辑即文档：保存的工作流文件（.tsflow）本身就是一份完美的分析报告。

🕹️ 核心原则 (Guiding Principles)

    协议优先于实现： Agent 关心的是节点之间如何“对话”（数据契约），而不是具体的算子内部用了哪个库。

    可扩展性边界：任何新功能必须考虑“如果用户想用 Python 自己写这个逻辑，接口是否足够友好？”。

    透明性：当数据流通过程中出现错误或参数缺失，系统必须能够宏观地在图面上定位问题，而不是仅仅打印控制台报错。

⚠️ 负面约束 (What We Avoid)

    拒绝“报表化”：如果一个功能做成了不可拆解的巨大 DashBoard，Agent 必须予以否决。

    拒绝“中心化”：避免将过多的配置项埋在全局设置里，尽可能让配置项出现在节点面板上。

    拒绝“黑盒化”：严禁出现无法追溯数据源头的计算步骤。

📡 如何与用户合作

    决策咨询：当用户在两个技术路线间纠结时，Agent 依据“ComfyUI 风格一致性”给出建议。

    逻辑审查：用户提出功能设想时，Agent 审查该设想是否破坏了“计算图”的纯粹性。

项目核心结构（强烈建议多多参考comfyui）
TraceStudio/
├── web/                # React + React Flow (npm 环境)
└── server/             # FastAPI (Python 环境 conda activate tracestudio)

参考后端结构
```
TraceStudio/server/
├── 📜 main.py                       # 🚀 启动入口 (FastAPI App)
├── 📜 requirements.txt              # 依赖库 (fastapi, polars, pyarrow, uvicorn...)
├── 📜 system_config.yaml            # 🖥️ 系统级配置 (端口, UE路径, 允许的IP段)
│
├── 📂 app/                          # 🧠 核心代码库 (不可变)
│   ├── 📂 core/                     # 引擎内核
│   │   ├── 📜 node_base.py          # TraceNode 基类 & CachePolicy
│   │   ├── 📜 registry.py           # 装饰器注册系统 & I18n
│   │   ├── 📜 executor.py           # DAG 执行引擎 (处理粗细线并发)
│   │   ├── 📜 user_manager.py       # 用户目录与上下文管理
│   │   └── 📜 security.py           # 路径安全检查 (防 ../ 攻击)
│   ├── 📂 api/                      # API 路由
│   │   ├── 📜 endpoints_graph.py    # 图执行与查询
│   │   ├── 📜 endpoints_upload.py   # 📤 文件上传 (处理 LAN 传输)
│   │   └── 📜 deps.py               # 依赖注入 (CurrentUser)
│   ├── 📂 nodes/                    # 📦 内置节点库
│   │   ├── 📜 __init__.py           # 自动扫描入口
│   │   ├── 📜 io.py                 # Loader (读取用户目录)
│   │   ├── 📜 logic.py              # Filter
│   │   └── 📜 vis.py                # Visualizer
│   └── 📂 locales/                  # 🌍 语言包 (zh_CN.json, en_US.json)
│
├── 📂 custom_nodes/                 # 🧩 第三方插件目录 (类似 ComfyUI)
├── 📂 tests/                        # 重要,在后端开发之前，先为前端准备好测试数据
│
└── 📂 users/                        # 👥 用户数据沙盒 (完全隔离)
    ├── 📂 shared/                   # 用户共享目录
	├── 📂 default/                  # 默认用户
    │   ├── 📂 utrace/               # 📥 该用户的原始数据 (LAN 上传至此)
    │   │   ├── 📜 combat_log.utrace
    │   │   └── 📜 memory_dump.utrace
    │   ├── 📂 workflows/            # 保存的工作流 (.tsflow)
    │   ├── 📂 cache/                # 私有缓存 (Parquet)
    │   └── 📜 config.json           # 个性化配置 (Theme, Language)
    └── 📂 ouczbs/                   # 其他用户...
```

现在我们来讨论前端ui界面的实现细节与实现步骤。你如果有不懂的可以参考comfyui。我计划前端第一阶段是核心功能布局需求，如果有数据需求的话，请先在服务器的测试逻辑中添加写死的数据api，方便测试。第一阶段：核心功能布局需求 (Functional & Searchable Layout)1. 算子搜索与库 (Searchable Palette)搜索置顶：左侧面板顶部必须包含一个常驻的搜索框（Search Bar）。即时过滤：输入关键词时，下方的算子列表必须能够实时过滤显示。分类折叠：算子应按类别（如：Loaders, Transforms, Filters）分组，搜索结果应跨组显示。核心交互：算子卡片需支持原生拖拽（Drag-and-Drop）的前置样式。2. 画布与工具条 (Viewport & Global Controls)全局动作：Header 区域需预留“运行 (Run)”、“清空画布 (Clear)”以及“导入/导出 (Import/Export)”的交互位置。状态反馈：Header 需预留一个“全局进度条”或“状态灯”位置，用于显示当前后端任务是否在处理数据。3. 动态响应式详情 (Adaptive Inspector)空状态处理：当画布无选中时，Inspector 应该是一个“概览面板”（显示当前图的节点总数、整体耗时模拟数据等）。布局锚点：右侧面板需支持简单的宽度微调或折叠，确保给中间画布留出足够的视觉空间。📅 第一阶段：迭代开发步骤 (Optimized Roadmap)我们把 Step 1 的任务拆解为以下三个核心工单，以便你分批次喂给 Copilot：步骤开发目标核心功能点Step 1.1智能算子侧边栏实现左侧面板：包含 Search Input + 过滤逻辑 + 分类列表。Step 1.2全局控制顶栏实现 Header：包含 Run 按钮、采样率下拉框、以及全局状态占位。Step 1.3响应式画布与侧板集成 React Flow：实现中间画布与右侧 Inspector 的布局联动。