feat(collapse): 主干/全部视图切换 + 节点分级折叠 (Step 1)

nieao · claude · nieao · commit 6af8fa6a3e46 · 2026-05-03T17:56:48.000+08:00
借鉴 GoJS SubGraphExpander + Workflowy zoom-in + cytoscape expand-collapse
社区方案. 按节点类型分 3 级:
  L0 主干: GOAL / ENTITY / SYNTHESIS / CONCLUSION / 文件 / 笔记
  L1 支撑: ROLE / AGENT
  L2 衍生: 反驳 ChallengeNode / 拆解 ontology 子节点 / challengeGroup / decomposeGroup

Store:
  - collapseMode: 'full' (默认兼容老行为) | 'minimal' (仅主干)
  - expandedSourceIds: 用户展开本支的源节点 ids (Step 2 用)
  - pinnedNodeIds: 用户 pin 的节点 ids, minimal 模式强制显示 (选项 A)

KnowledgeCanvas 渲染前 useMemo:
  按 type/variant 算 level → minimal 模式给 L1/L2 打 hidden=true
  expandedSourceIds 命中放过, pinnedNodeIds 命中放过

SaveExportToolbar 加 CollapseModeSwitch: 主干 / 全部 分段按钮,
全部时显示当前已展开的本支数 + pinned 数, 给 user 状态可见性。

Step 2 待做: ENTITY 节点点击展开本支 + 任意节点 pin 按钮。

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/components/canvas/KnowledgeCanvas.jsx b/src/components/canvas/KnowledgeCanvas.jsx
@@ -20,6 +20,7 @@ import ReactFlow, {
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 
+import useCanvasStore from '../../stores/useCanvasStore'
 import ConceptNode from './ConceptNode'
 import CategoryNode from './CategoryNode'
 import BookmarkNode from './BookmarkNode'
@@ -281,7 +282,12 @@ function KnowledgeCanvasInner({
   showMiniMap = true,
   children,
 }) {
-  // === 渲染前 sanitize: 检测 parentNode 引用不存在的节点 ===
+  // === 折叠分级 (subscribe store, 触发重渲) ===
+  const collapseMode = useCanvasStore((s) => s.collapseMode)
+  const expandedSourceIds = useCanvasStore((s) => s.expandedSourceIds)
+  const pinnedNodeIds = useCanvasStore((s) => s.pinnedNodeIds)
+
+  // === 渲染前 sanitize: 检测 parentNode 引用不存在的节点 + 折叠分级 ===
   // React Flow 11 在 child.parentNode 找不到时直接 throw "Parent node X not found"
   // 整个画布崩 (图 37)。
   //
@@ -292,16 +298,66 @@ function KnowledgeCanvasInner({
   const ORPHAN_FALLBACK_ID = '__orphan-fallback-root__'
   const nodes = useMemo(() => {
     const idSet = new Set(rawNodes.map((n) => n.id))
+    const expandedSet = new Set(expandedSourceIds || [])
+    const pinnedSet = new Set(pinnedNodeIds || [])
     let hasOrphan = false
+
+    // L0/L1/L2 节点级别判定
+    // L0 主干 = goal / 概念 ENTITY (顶层骨架) / synthesis / conclusion / 用户上传文件 / 普通笔记
+    // L1 支撑 = role / agent (对应 ENTITY 内部组件)
+    // L2 衍生 = challengeNode (反驳) / decompose 容器子节点
+    const getLevel = (n) => {
+      if (!n) return 'L0'
+      // 反驳节点
+      if (n.type === 'challengeNode') return 'L2'
+      // role / agent 节点
+      if (n.type === 'agentRoleNode') return 'L1'
+      // ontology role variant
+      if (n.type === 'ontologyNode' && n.data?.variant === 'role') return 'L1'
+      // 容器: challengeGroup / decomposeGroup 自身按 L2, 让 group 也跟着折
+      if (n.type === 'group' && (n.data?.isChallengeGroup || n.data?.isDecomposeGroup)) return 'L2'
+      // 拆解出来的子 ontology 节点 (parent 是 decomposeGroup)
+      if (n.type === 'ontologyNode' && n.parentNode) {
+        const parent = rawNodes.find((p) => p.id === n.parentNode)
+        if (parent?.data?.isDecomposeGroup) return 'L2'
+      }
+      // 其他都按 L0 (GOAL / ENTITY / SYNTHESIS / CONCLUSION / 文件 / 笔记 ...)
+      return 'L0'
+    }
+
+    // 是否显示一个 L1/L2 节点 (在 minimal 模式下)
+    const shouldShow = (n, level) => {
+      if (collapseMode !== 'minimal') return true  // full 模式都显示
+      if (level === 'L0') return true
+      if (pinnedSet.has(n.id)) return true  // pinned 强制显示
+      // 拿"源节点 id" — challenge / agent 等都有 source_node_id 或 parent_node 字段
+      const srcId = n.data?.source_node_id || n.data?.parent_node
+      if (srcId && expandedSet.has(srcId)) return true
+      // 容器节点: 看容器的 sourceNodeId / 是否有任何被展开的关联
+      if (n.type === 'group' && n.data?.sourceNodeId && expandedSet.has(n.data.sourceNodeId)) return true
+      return false
+    }
+
     const remapped = rawNodes.map((n) => {
+      const level = getLevel(n)
+      const visible = shouldShow(n, level)
+      let next = n
       if (n.parentNode && !idSet.has(n.parentNode)) {
         hasOrphan = true
-        return { ...n, parentNode: ORPHAN_FALLBACK_ID, extent: undefined }
+        next = { ...next, parentNode: ORPHAN_FALLBACK_ID, extent: undefined }
       }
-      return n
+      if (!visible) {
+        next = { ...next, hidden: true }
+      } else if (next === n && n.hidden === true) {
+        // 之前隐藏过, 现在该展示 → 显式取消 hidden
+        next = { ...next, hidden: false }
+      } else if (next !== n && n.hidden === true) {
+        next.hidden = false
+      }
+      return next
     })
+
     if (hasOrphan) {
-      // 透明大 group, 不显示边框 / 背景, 不阻挡交互, 让子节点用原相对坐标继续渲染
       remapped.unshift({
         id: ORPHAN_FALLBACK_ID,
         type: 'group',
@@ -315,10 +371,10 @@ function KnowledgeCanvasInner({
         },
         data: { isOrphanFallback: true },
       })
-      console.warn('[KnowledgeCanvas] 检测到孤儿子节点, 已挂 fallback root, 等 yjs sync 后实际 parent 到位会自动接管')
+      console.warn('[KnowledgeCanvas] 检测到孤儿子节点, 已挂 fallback root')
     }
     return remapped
-  }, [rawNodes])
+  }, [rawNodes, collapseMode, expandedSourceIds, pinnedNodeIds])
 
   const reactFlowInstance = useReactFlow()
   const reactFlowWrapper = useRef(null)
diff --git a/src/pages/panels/SaveExportToolbar.jsx b/src/pages/panels/SaveExportToolbar.jsx
@@ -392,6 +392,9 @@ function SaveExportToolbar({ canvasRef, nodes, edges, exportCanvasData, importCa
         />
       </div>
 
+      {/* 折叠分级开关 — 仅主干 / 显示全部 */}
+      <CollapseModeSwitch />
+
       {/* 横竖切换分段按钮 (像 iOS Segmented Control) */}
       <div
         className="flex rounded-lg overflow-hidden shadow-sm"
@@ -516,4 +519,65 @@ function SaveExportToolbar({ canvasRef, nodes, edges, exportCanvasData, importCa
   )
 }
 
+// === 折叠分级开关 — 仅主干 / 显示全部 ===
+// 选中"仅主干"时, ROLE/AGENT/反驳/拆解节点折叠, 只看 GOAL/ENTITY/SYNTHESIS/CONCLUSION 主干。
+// 用户可在 ENTITY 节点 click 单独展开本支, 或 pin 节点强制显示。
+function CollapseModeSwitch() {
+  const collapseMode = useCanvasStore((s) => s.collapseMode || 'full')
+  const setCollapseMode = useCanvasStore((s) => s.setCollapseMode)
+  const collapseAllSources = useCanvasStore((s) => s.collapseAllSources)
+  const expandedCount = useCanvasStore((s) => (s.expandedSourceIds || []).length)
+  const pinnedCount = useCanvasStore((s) => (s.pinnedNodeIds || []).length)
+
+  return (
+    <div
+      className="flex items-center rounded-lg overflow-hidden shadow-sm"
+      style={{ border: '1px solid var(--gray-100)', background: 'var(--white)' }}
+      title="折叠分级 — 仅主干视图减少视觉噪音"
+    >
+      <button
+        onClick={() => setCollapseMode('minimal')}
+        className="px-3 py-2 text-xs font-medium transition-colors duration-200"
+        style={{
+          background: collapseMode === 'minimal' ? 'var(--warm-bg)' : 'transparent',
+          color: collapseMode === 'minimal' ? 'var(--warm)' : 'var(--gray-700)',
+          borderRight: '1px solid var(--gray-100)',
+        }}
+        title="仅显示主干 (GOAL/ENTITY/SYNTHESIS/CONCLUSION), 其他折叠"
+      >
+        <span className="flex items-center gap-1">
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M7 12h10M10 18h4" />
+          </svg>
+          主干
+        </span>
+      </button>
+      <button
+        onClick={() => {
+          setCollapseMode('full')
+          collapseAllSources?.()
+        }}
+        className="px-3 py-2 text-xs font-medium transition-colors duration-200"
+        style={{
+          background: collapseMode === 'full' ? 'var(--warm-bg)' : 'transparent',
+          color: collapseMode === 'full' ? 'var(--warm)' : 'var(--gray-700)',
+        }}
+        title="显示全部节点"
+      >
+        <span className="flex items-center gap-1">
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 4h16v16H4z M4 10h16 M10 4v16" />
+          </svg>
+          全部
+          {collapseMode === 'minimal' && (expandedCount > 0 || pinnedCount > 0) && (
+            <span style={{ fontSize: 9, color: 'var(--accent)', marginLeft: 2 }}>
+              {expandedCount > 0 && `+${expandedCount}支`}{pinnedCount > 0 && ` ${pinnedCount}📌`}
+            </span>
+          )}
+        </span>
+      </button>
+    </div>
+  )
+}
+
 export default SaveExportToolbar
diff --git a/src/stores/useCanvasStore.js b/src/stores/useCanvasStore.js
@@ -192,6 +192,45 @@ const useCanvasStore = create(
       viewportCenter: { x: 400, y: 300 },
       viewportZoom: 1,
 
+      // === 折叠分级视图 (按节点类型分 L0/L1/L2) ===
+      // mode: 'minimal' = 仅主干 (L0 显示, L1/L2 折叠)
+      //       'full'    = 显示全部 (默认 ALETHEIA 老行为, 兼容)
+      // expandedSourceIds = 用户点击 ENTITY/源节点单独展开本支 (Set 持久不持久无所谓, 重启回 minimal 默认)
+      // pinnedNodeIds     = 用户 pin 的节点, 即使 minimal 模式也强制显示 (选项 A)
+      collapseMode:
+        (typeof localStorage !== 'undefined' && localStorage.getItem('know_canvas_collapse_mode')) || 'full',
+      expandedSourceIds: [],
+      pinnedNodeIds: [],
+
+      setCollapseMode: (mode) => {
+        const next = mode === 'minimal' ? 'minimal' : 'full'
+        try { localStorage.setItem('know_canvas_collapse_mode', next) } catch {}
+        set({ collapseMode: next })
+      },
+
+      // 切换某个 ENTITY/源节点的"展开本支"状态
+      toggleExpandSource: (sourceId) => {
+        if (!sourceId) return
+        set((state) => {
+          const arr = Array.isArray(state.expandedSourceIds) ? state.expandedSourceIds : []
+          const idx = arr.indexOf(sourceId)
+          if (idx >= 0) state.expandedSourceIds = arr.filter((id) => id !== sourceId)
+          else state.expandedSourceIds = [...arr, sourceId]
+        })
+      },
+      collapseAllSources: () => set({ expandedSourceIds: [] }),
+
+      // pin / unpin 一个节点 (强制显示, 不受 minimal 折叠规则约束)
+      togglePinNode: (nodeId) => {
+        if (!nodeId) return
+        set((state) => {
+          const arr = Array.isArray(state.pinnedNodeIds) ? state.pinnedNodeIds : []
+          const idx = arr.indexOf(nodeId)
+          if (idx >= 0) state.pinnedNodeIds = arr.filter((id) => id !== nodeId)
+          else state.pinnedNodeIds = [...arr, nodeId]
+        })
+      },
+
       // 更新视口中心（由画布组件在视口变化时调用）
       setViewportCenter: (center, zoom = 1) => {
         set({ viewportCenter: center, viewportZoom: zoom })
