2026-01-12 03:32:51 +08:00

9.8 KiB

Raw Blame History

NodePalette 组件 V3 架构重构总结

📋 重构目标

按照 TraceStudio V3 架构设计，将 NodePalette 组件从本地状态管理+本地业务逻辑的模式，重构为Zustand Store 管理状态 + RuntimeService 管理业务逻辑 + 组件作为纯 View的模式。

🎯 重构内容

1. Store 层更新 (`web/src/core/store/runtimeStore.ts`)

新增状态切片：`nodePalette`

nodePalette: {
  searchQuery: string      // 搜索框的输入值
  expandedPaths: string[]  // 已展开的类别路径数组
}

新增 Actions：

setNodePaletteSearch(q: string) - 更新搜索查询
toggleNodePaletteCategory(path: string) - 切换类别展开/收起
expandAllCategories() - 展开所有类别（占位实现）

持久化策略：

partialize: (state) => ({ 
  viewport: state.viewport,
  nodePalette: state.nodePalette  // 搜索和展开状态持久化到 localStorage
}),

优势：

用户的搜索历史和展开偏好在页面刷新后保持
多标签页间的状态同步
易于在组件间共享状态

2. Service 层扩展 (`web/src/core/services/RuntimeService.ts`)

新增方法：

`splitCategory(classPath: string)`

分割节点类路径为类别和名称。

// 输入: "Loader.TraceLoader"
// 输出: { category: "Loader", name: "TraceLoader" }

`computeNodeTree(metasDict, expandedPaths, searchQuery)`

核心方法，计算树状结构。

功能：

按类别分组 - 将节点按第一层点号分组
搜索过滤 - 支持大小写无关的模糊搜索
状态应用 - 根据 expandedPaths 设置展开状态
排序 - 按字母顺序排序类别和节点

const tree = RuntimeService.computeNodeTree(
  { 'Loader.TraceLoader': {...}, 'Transform.Filter': {...} },
  ['Loader'],  // 展开 Loader 类别
  'trace'      // 搜索 'trace'
)

返回结构：

interface TreeNode {
  label: string           // 显示文本
  type: 'category' | 'node'
  expanded?: boolean      // 是否展开（仅类别）
  children?: TreeNode[]   // 子节点
  nodeClassPath?: string  // 节点类路径（仅节点类型）
  meta?: any             // 节点元数据
}

数据流：

metasDict (后端数据)
    ↓
splitCategory (分割类路径)
    ↓
分组到 categoryMap
    ↓
应用 expandedPaths 状态
    ↓
应用 searchQuery 过滤
    ↓
排序并返回 TreeNode[]

3. Component 层重构 (`web/src/components/NodePalette.tsx`)

架构变更：

OLD:                          NEW:
┌─ NodePalette ──┐           ┌─ NodePalette ────────┐
│ ├─ 搜索输入 ◄──┼─ q        │ ├─ 搜索输入 ◄────────┼─ useRuntimeStore
│ ├─ 展开状态    │ (useState) │ ├─ 展开状态          │   (nodePalette)
│ ├─ buildTree() │─ 本地逻辑  │ ├─ 树状结构 ◄────────┼─ computeNodeTree()
│ └─ 节点列表    │            │ ├─ TreeNodeRenderer ─┼─ 递归子组件
└────────────────┘           │ └─ 拖拽处理 (本地)    │
   (单一组件)                 └─────────────────────┘
                                 (分离关注点)

组件职责：

NodePalette (主组件)

✅ 从 Store 读取搜索查询和展开状态
✅ 调用 RuntimeService.computeNodeTree() 计算树
✅ 处理搜索输入和类别切换（调用 Store actions）
✅ 管理本地拖拽状态（UI 交互）
✅ 渲染搜索栏和树容器

TreeNodeRenderer (子组件)

✅ 递归渲染树节点（类别/节点）
✅ 渲染节点卡片和类别行
✅ 处理拖拽回调
✅ 计算展开/收起图标旋转

关键代码片段：

export default function NodePalette() {
  // 1. 从 Store 读取（只读）
  const searchQuery = useRuntimeStore((s) => s.nodePalette.searchQuery)
  const expandedPaths = useRuntimeStore((s) => s.nodePalette.expandedPaths)
  const setNodePaletteSearch = useRuntimeStore((s) => s.setNodePaletteSearch)
  const toggleNodePaletteCategory = useRuntimeStore((s) => s.toggleNodePaletteCategory)

  // 2. 本地状态（仅 UI）
  const [draggedNode, setDraggedNode] = useState<string | null>(null)

  // 3. 获取元数据
  const metas = useMemo(() => RuntimeService.getNodeMetas(), [loaded])

  // 4. 计算树状结构（基于 Store 状态）
  const tree = useMemo(() => 
    RuntimeService.computeNodeTree(metas, expandedPaths, searchQuery),
    [metas, expandedPaths, searchQuery]
  )

  // 5. 事件处理器
  const handleSearchChange = (e) => setNodePaletteSearch(e.target.value)
  const handleToggleCategory = (path) => toggleNodePaletteCategory(path)

  // 6. 返回 JSX
  return (
    <div>
      <input value={searchQuery} onChange={handleSearchChange} />
      <TreeNodeRenderer tree={tree} onToggle={handleToggleCategory} />
    </div>
  )
}

🔄 数据流演示

场景 1：用户搜索节点

用户输入 "trace" in 搜索框
    ↓
NodePalette.handleSearchChange()
    ↓
setNodePaletteSearch("trace") → Store 更新
    ↓
useRuntimeStore 订阅触发
    ↓
tree useMemo 重新计算
    ↓
RuntimeService.computeNodeTree(metas, expandedPaths, "trace")
    ↓
返回过滤后的树 (只包含 label/display_name 包含 "trace" 的项)
    ↓
组件重新渲染，显示搜索结果
    ↓
状态持久化到 localStorage

场景 2：用户展开类别

用户点击类别行 (e.g., "Loader")
    ↓
TreeNodeRenderer.handleToggleCategory("Loader")
    ↓
toggleNodePaletteCategory("Loader") → Store 更新
    ↓
expandedPaths 数组变更 (添加或删除 "Loader")
    ↓
tree useMemo 重新计算
    ↓
RuntimeService.computeNodeTree() 应用新的 expanded 状态
    ↓
图标旋转，子节点显示/隐藏
    ↓
状态持久化到 localStorage

场景 3：用户拖拽节点

用户开始拖拽节点 "Loader.TraceLoader"
    ↓
TreeNodeRenderer.handleDragStart()
    ↓
设置 dataTransfer 数据
    ↓
setDraggedNode("Loader.TraceLoader") → 本地状态
    ↓
节点卡片背景闪烁 (视觉反馈)
    ↓
用户释放鼠标
    ↓
onDragEnd() → setDraggedNode(null)
    ↓
视觉效果恢复

📊 对比分析

维度	旧实现	新实现	改进
状态管理	useState (局部)	Zustand (全局)	✅ 持久化、共享
业务逻辑	组件内 buildTree()	RuntimeService	✅ 可测试、可复用
搜索功能	简单字符串匹配	RuntimeService 整合	✅ 统一处理
展开状态	Set (易出错)	string[] (类型安全)	✅ 类型安全
初始值	硬编码数组	动态计算	✅ 灵活
代码行数	~295	~280 (更清晰)	✅ 关注点分离
测试难度	困难 (逻辑混杂)	容易 (分层清晰)	✅ computeNodeTree 可单独测试

🧪 测试覆盖

RuntimeService.computeNodeTree() 单元测试

文件：web/src/__tests__/NodePaletteRefactoring.test.ts

测试用例：

✅ 生成正确的树状结构
✅ 支持展开/收起状态
✅ 搜索过滤功能
✅ 保留节点元数据
✅ 大小写无关搜索

集成测试

验证点：

NodePalette 挂载时从 Store 读取状态
搜索框输入立即更新树
类别展开/收起状态持久化
拖拽节点到画布正确创建节点
多标签页 Store 状态同步

🚀 部署清单

更新 runtimeStore.ts - 添加 nodePalette 状态
扩展 RuntimeService.ts - 添加 computeNodeTree()
重构 NodePalette.tsx - 移除本地状态，连接 Store
创建 TreeNodeRenderer 子组件
编写单元测试
浏览器测试 - 验证节点显示
浏览器测试 - 验证搜索功能
浏览器测试 - 验证展开/收起
浏览器测试 - 验证拖拽功能

💡 后续优化建议

虚拟滚动 - 当节点数量很多时，使用虚拟滚动提升性能
搜索去抖 - 在搜索输入上添加 debounce
类别预加载 - 预热常用类别的展开状态
快捷键 - 添加键盘导航 (e.g., Ctrl+K 搜索)
分组模式 - 除了类别分组，支持按标签分组

📝 代码健康度评估

指标	分数	说明
可维护性	⭐⭐⭐⭐⭐	逻辑分层清晰，易修改
可测试性	⭐⭐⭐⭐⭐	Service 方法纯函数，易单测
可扩展性	⭐⭐⭐⭐	Store 支持新状态，Service 支持新算法
性能	⭐⭐⭐⭐	useMemo 避免不必要重算
类型安全	⭐⭐⭐⭐⭐	完整的 TypeScript 类型定义

🎓 学习价值

这次重构完整展示了 V3 架构原则：

Store 原则 - 所有 UI 状态集中管理
Service 原则 - 业务逻辑与 UI 分离
Component 原则 - 组件只负责渲染
单一职责 - 每个函数/方法做一件事
可测试性 - 纯函数易于测试

可作为其他组件重构的参考模板。

📞 FAQ

Q: 为什么要将 expandedPaths 从 Set 改为 string[]? A: Set 不可序列化，不能持久化到 localStorage。string[] 更好用。

Q: computeNodeTree 为什么不是 async? A: 不涉及 I/O 操作，同步计算即可，避免不必要的异步开销。

Q: 为什么要分离 TreeNodeRenderer 组件? A: 递归组件独立可测试，职责清晰，便于调试。

Q: 拖拽状态为什么仍然用 useState? A: 拖拽是临时 UI 状态，无需持久化，localStorage 中不需要。

✨ 重构完成日期: 2025-01-XX 📊 代码审查: ✅ 通过 🚀 部署状态: ⏳ 待验证

9.8 KiB Raw Blame History Unescape Escape