fix(knowledge): v0.13.9 笔记编辑跳顶与画布接线修复批

Author: Aparencia

app/src/components/CanvasNodeQuestion.tsx

@@ -11,9 +11,21 @@ import { memo } from "react";
 import { Handle, Position, useStore, type Node, type NodeProps } from "@xyflow/react";
 import type { CanvasNodeData } from "../utils/canvasElements";
 import { CANVAS_BBOX } from "../utils/layoutRadial";
+import { nodeTypeColor, nodeTypeLabel, type KnowledgeNodeType } from "../types/knowledge";
 
 export type QuestionRfNode = Node<CanvasNodeData, "question">;
 
+/** 节点类型图标（与 chip 同源） */
+const typeIcon: Record<KnowledgeNodeType, string> = {
+  question: "❓",
+  scenario: "🎯",
+  domain_entry: "📂",
+};
+
+/** v0.13.9：四边 Handle 统一样式（透明化——连线只反映既有关系，用户不能画线） */
+const hiddenHandle: React.CSSProperties = { opacity: 0, width: 2, height: 2 };
+
+
 /** 标题最多 2 行省略（内容为问题文本，宽 220px 下 2 行足够） */
 const clamp2: React.CSSProperties = {
   display: "-webkit-box",
@@ -45,14 +57,29 @@ export default memo(function CanvasNodeQuestion({ data, selected }: NodeProps<Qu
         padding: 8,
       }}
     >
-      {/* 隐式 Handle：连线只反映既有关系，用户不能手动画线 */}
-      <Handle type="target" position={Position.Top} style={{ opacity: 0, width: 2, height: 2 }} />
-      <Handle type="source" position={Position.Bottom} style={{ opacity: 0, width: 2, height: 2 }} />
+      {/* v0.13.9：四边 Handle——接线方向随源/目标相对方位动态选择
+          （resolveEdgeHandles）；透明化——连线只反映既有关系，用户不能画线 */}
+      <Handle type="target" id="target-top" position={Position.Top} style={hiddenHandle} />
+      <Handle type="target" id="target-bottom" position={Position.Bottom} style={hiddenHandle} />
+      <Handle type="target" id="target-left" position={Position.Left} style={hiddenHandle} />
+      <Handle type="target" id="target-right" position={Position.Right} style={hiddenHandle} />
+      <Handle type="source" id="source-top" position={Position.Top} style={hiddenHandle} />
+      <Handle type="source" id="source-bottom" position={Position.Bottom} style={hiddenHandle} />
+      <Handle type="source" id="source-left" position={Position.Left} style={hiddenHandle} />
+      <Handle type="source" id="source-right" position={Position.Right} style={hiddenHandle} />
 
       {full ? (
         <>
           <div style={{ display: "flex", gap: 6, alignItems: "flex-start", fontSize: 13, fontWeight: 500, color: "#374151" }}>
-            <span style={{ fontSize: 14, flexShrink: 0 }}>❓</span>
+            {/* v0.13.9：类型 chip（此前统一 ❓ 无法区分问题/场景/领域入口） */}
+            {data.nodeType && (
+              <span
+                data-testid={`canvas-node-type-${data.entityId}`}
+                style={{ fontSize: 10, borderRadius: 8, padding: "0 5px", lineHeight: 1.7, whiteSpace: "nowrap", background: "#f9fafb", color: nodeTypeColor[data.nodeType], border: `1px solid ${nodeTypeColor[data.nodeType]}33` }}
+              >
+                {typeIcon[data.nodeType]} {nodeTypeLabel[data.nodeType]}
+              </span>
+            )}
             <span style={clamp2}>{data.title}</span>
           </div>
           {data.badges.length > 0 && (

app/src/components/CanvasNodes.test.tsx

@@ -29,7 +29,7 @@ import CanvasNodeModel from "./CanvasNodeModel";
 function data(partial: Partial<CanvasNodeData>): CanvasNodeData {
   return {
     kind: "question", entityId: 1, title: "", subtitle: null, badges: [],
-    statusText: null, statusColor: null, refCount: 0, ...partial,
+    statusText: null, statusColor: null, refCount: 0, nodeType: null, ...partial,
   };
 }
 
@@ -59,6 +59,27 @@ describe("画布节点缩放分级", () => {
     expect(screen.getByText(/2 条笔记/)).toBeTruthy();
   });
 
+  it("v0.13.9 类型 chip：问题/场景/领域入口分类渲染（full 模式）", () => {
+    // Arrange + Act
+    zoomValue = 1;
+    render(<CanvasNodeQuestion {...qp(data({ entityId: 7, title: "色彩理论", nodeType: "domain_entry" }))} />);
+    render(<CanvasNodeQuestion {...qp(data({ entityId: 8, title: "完成通勤妆", nodeType: "scenario" }))} />);
+    render(<CanvasNodeQuestion {...qp(data({ entityId: 9, title: "如何练好化妆", nodeType: "question" }))} />);
+    // Assert：chip 文本 = 图标 + 类型名
+    expect(screen.getByTestId("canvas-node-type-7").textContent).toBe("📂 领域入口");
+    expect(screen.getByTestId("canvas-node-type-8").textContent).toBe("🎯 场景");
+    expect(screen.getByTestId("canvas-node-type-9").textContent).toBe("❓ 问题");
+  });
+
+  it("v0.13.9 类型 chip 仅 full 模式显示（titleOnly 保持简洁）", () => {
+    // Arrange + Act
+    zoomValue = 0.5;
+    render(<CanvasNodeQuestion {...qp(data({ entityId: 7, title: "色彩理论", nodeType: "domain_entry" }))} />);
+    // Assert：chip 不渲染，标题保留
+    expect(screen.queryByTestId("canvas-node-type-7")).toBeNull();
+    expect(screen.getByText("色彩理论")).toBeTruthy();
+  });
+
   it("zoom 0.4~0.7：仅标题（徽标/计数隐藏）", () => {
     // Arrange + Act
     zoomValue = 0.5;

app/src/components/KnowledgeCanvasView.test.tsx

@@ -65,6 +65,7 @@ const links: KnowledgeLink[] = [];
 function renderView(overrides: {
   nodes?: KnowledgeNode[];
   coreQuestion?: string | null;
+  systemName?: string | null;
   onSelectItem?: (kind: string, id: number) => void;
   onGoBack?: () => void;
   onPositionsSaved?: (updates: { nodeId: number; x: number; y: number }[]) => void;
@@ -76,6 +77,7 @@ function renderView(overrides: {
     <KnowledgeCanvasView
       systemId={5}
       coreQuestion={overrides.coreQuestion ?? null}
+      systemName={overrides.systemName ?? null}
       nodes={overrides.nodes ?? makeNodes()}
       concepts={concepts}
       models={models}
@@ -251,7 +253,35 @@ describe("KnowledgeCanvasView 画布", () => {
     const [, args] = batchCalls()[0];
     const positions = args.positions as { nodeId: number; x: number; y: number }[];
     expect(rounded(positions.find((p) => p.nodeId === 1)!)).toEqual({ x: -110, y: -260 });
-    expect(rounded(positions.find((p) => p.nodeId === 2)!)).toEqual({ x: -110, y: -460 });
+    // v0.13.9：RING_STEP 200→160 → 环 2 半径 420→380 → 子节点上移 40px
+    expect(rounded(positions.find((p) => p.nodeId === 2)!)).toEqual({ x: -110, y: -420 });
+  });
+
+  it("v0.13.9 领域体系：无核心问题但有体系名 → 圆心体系名卡 + 根节点虚线边", async () => {
+    // Arrange：领域体系（coreQuestion null）+ systemName 非空
+    renderView({ systemName: "大学规划" });
+    // Assert：core 卡标题=体系名、副标=领域体系；仅根节点（node1）连虚线边
+    await waitFor(() => expect(rfNode("core")).toBeTruthy());
+    await waitFor(() => expect(batchCalls()).toHaveLength(1));
+    const core = rfNode("core") as unknown as { data: { title: string; subtitle: string } };
+    expect(core.data.title).toBe("大学规划");
+    expect(core.data.subtitle).toBe("领域体系");
+    const edges = latestRf().edges as { id: string; source: string; target: string; style?: { strokeDasharray?: string } }[];
+    const coreEdges = edges.filter((e) => e.source === "core");
+    expect(coreEdges).toHaveLength(1); // node1 根；node2 是子不连根卡
+    expect(coreEdges[0]).toMatchObject({ id: "e:core:1", target: "q:1" });
+    expect(coreEdges[0].style?.strokeDasharray).toBe("5 4");
+  });
+
+  it("v0.13.9 接线动态化：edges 携带按相对方位计算的 sourceHandle/targetHandle", async () => {
+    // Arrange：已存位置（q:1 左上角 (10,20)、q:2 (30,40)——q:2 在 q:1 右下方）
+    renderView({ nodes: makeNodes(true) });
+    await waitFor(() => expect(rfProps.length).toBeGreaterThan(0));
+    // Assert：中心差 dx=20, dy=20（|dx|==|dy| → 垂直接入 source-bottom/target-top）
+    const edges = latestRf().edges as { id: string; sourceHandle?: string; targetHandle?: string }[];
+    const e = edges.find((x) => x.id === "e:1:2")!;
+    expect(e.sourceHandle).toBe("source-bottom");
+    expect(e.targetHandle).toBe("target-top");
   });
 
   it("返回按钮 → onGoBack（切回树视图）", async () => {

app/src/components/KnowledgeCanvasView.tsx

@@ -11,17 +11,17 @@
  * @ai-context: 视口经 knowledge_canvas_states 持久化——切回画布 setViewport 恢复
  *              （§4.5；无记录时 fitView 按内容兜底）。
  */
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import {
-  Background, BackgroundVariant, Controls, MiniMap, Panel, ReactFlow, ReactFlowProvider,
+  Background, BackgroundVariant, Controls, Handle, MiniMap, Panel, Position, ReactFlow, ReactFlowProvider,
   useEdgesState, useNodesState, useReactFlow,
   type Edge, type Node, type NodeProps, type OnMoveEnd, type Viewport,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import type { KnowledgeConcept, KnowledgeLink, KnowledgeModel, KnowledgeNode, CanvasNodePosition } from "../types/knowledge";
 import {
-  buildCanvasElements, canvasKey, entityIdFromKey,
+  buildCanvasElements, canvasKey, entityIdFromKey, resolveEdgeHandles,
   type CanvasNodeData, type CanvasSelectKind,
 } from "../utils/canvasElements";
 import { CANVAS_BBOX, layoutRadial, type CanvasLayoutItem, type CanvasPoint } from "../utils/layoutRadial";
@@ -33,6 +33,8 @@ interface Props {
   systemId: number;
   /** 体系核心问题——存在时画布圆心渲染核心问题卡（布局圆心被虚拟核心占用） */
   coreQuestion: string | null;
+  /** v0.13.9：体系名——coreQuestion 为空（领域体系）时圆心渲染体系名卡 */
+  systemName: string | null;
   nodes: KnowledgeNode[];
   concepts: KnowledgeConcept[];
   models: KnowledgeModel[];
@@ -76,13 +78,21 @@ export default function KnowledgeCanvasView(props: Props) {
 }
 
 function CanvasFlow({
-  systemId, coreQuestion, nodes, concepts, models, links, selectedKey, onSelectItem, onPositionsSaved, onGoBack,
+  systemId, coreQuestion, systemName, nodes, concepts, models, links, selectedKey, onSelectItem, onPositionsSaved, onGoBack,
 }: Props) {
   const [rfNodes, setRfNodes, onNodesChange] = useNodesState<Node<CanvasNodeData>>([]);
   const [rfEdges, setRfEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const [status, setStatus] = useState("");
   const { fitView, setViewport } = useReactFlow();
 
+  // v0.13.9：体系根卡（全局=核心问题 / 领域=体系名）——null 时不渲染圆心卡
+  // （防御：无核心问题也无体系名的异常态保持旧行为，不凭空造根）
+  const rootCard = useMemo<{ title: string; subtitle: string } | null>(() => {
+    if (coreQuestion) return { title: coreQuestion, subtitle: "核心问题" };
+    if (systemName) return { title: systemName, subtitle: "领域体系" };
+    return null;
+  }, [coreQuestion, systemName]);
+
   // useReactFlow 返回值身份可能随渲染变化——ref 捕获避免恢复 effect 依赖抖动
   // （依赖 fitView/setViewport 身份变化会反复触发恢复循环）
   const rfApi = useRef({ fitView, setViewport });
@@ -181,22 +191,12 @@ function CanvasFlow({
         .catch((e) => setStatus(`布局初始化失败: ${e}`));
     }
 
-    const { nodes: rfn, edges } = buildCanvasElements({ nodes, concepts, models, links, positions, selectedKey });
-    const extras: Node<CanvasNodeData>[] = [];
-    if (coreQuestion) {
-      extras.push({
-        id: "core",
-        type: "core",
-        position: { x: -120, y: -40 },
-        draggable: false,
-        selectable: false,
-        focusable: false,
-        data: { kind: "question", entityId: 0, title: coreQuestion, subtitle: null, badges: [], statusText: null, statusColor: null, refCount: 0 },
-      });
-    }
-    setRfNodes([...rfn, ...extras]);
+    const { nodes: rfn, edges } = buildCanvasElements({ nodes, concepts, models, links, positions, selectedKey, rootCard });
+    // v0.13.9：rootCard 由 buildCanvasElements 统一产出（含 core 卡 + 根节点虚线边）——
+    // 初始布局与「自动排列」同路径，杜绝双份逻辑漂移（此前 autoLayout 漏加 core 卡）
+    setRfNodes(rfn);
     setRfEdges(edges);
-  }, [systemId, coreQuestion, nodes, concepts, models, links, selectedKey, setRfNodes, setRfEdges]);
+  }, [systemId, rootCard, nodes, concepts, models, links, selectedKey, setRfNodes, setRfEdges]);
 
   // 视口恢复（§4.5）：已存 → setViewport；未存 → fitView 按内容兜底
   useEffect(() => {
@@ -248,7 +248,7 @@ function CanvasFlow({
       ...concepts.map((c) => ({ key: canvasKey("concept", c.id), kind: "concept" as const, parentKey: null })),
       ...models.map((m) => ({ key: canvasKey("model", m.id), kind: "model" as const, parentKey: null })),
     ];
-    const layout = layoutRadial({ hasCore: coreQuestion != null, items: layoutItems });
+    const layout = layoutRadial({ hasCore: rootCard != null, items: layoutItems });
     const positions = new Map<string, CanvasPoint>();
     const persist: { nodeId: number; x: number; y: number }[] = [];
     for (const n of nodes) {
@@ -263,7 +263,7 @@ function CanvasFlow({
     for (const m of models) {
       positions.set(canvasKey("model", m.id), toTopLeft(layout.get(canvasKey("model", m.id)) ?? { x: 0, y: 0 }, CANVAS_BBOX.model));
     }
-    const { nodes: rfn, edges } = buildCanvasElements({ nodes, concepts, models, links, positions, selectedKey });
+    const { nodes: rfn, edges } = buildCanvasElements({ nodes, concepts, models, links, positions, selectedKey, rootCard });
     setRfNodes(rfn);
     setRfEdges(edges);
     void invoke("batch_initialize_canvas_positions", { systemId, positions: persist })
@@ -272,6 +272,20 @@ function CanvasFlow({
     void fitView({ padding: 0.15 });
   };
 
+  // v0.13.9：接线方向动态化——按源/目标当前中心相对方位选 Handle（拖拽后随
+  // rfNodes 位置重算；纯函数 resolveEdgeHandles 可单测）。解决接线位置固定：
+  // 移动节点后边始终从同一侧接入，产生大量回字形折角。
+  const smartEdges = useMemo(() => {
+    const centerOf = (id: string): CanvasPoint => {
+      const n = rfNodes.find((x) => x.id === id);
+      const p = n?.position ?? { x: 0, y: 0 };
+      // core 卡无固定尺寸（maxWidth 240，标题 1-2 行）——按布局假定尺寸估算中心
+      const bbox = n?.type === "core" ? { w: 240, h: 80 } : CANVAS_BBOX[n?.data.kind ?? "question"];
+      return { x: p.x + bbox.w / 2, y: p.y + bbox.h / 2 };
+    };
+    return rfEdges.map((e) => ({ ...e, ...resolveEdgeHandles(centerOf(e.source), centerOf(e.target)) }));
+  }, [rfNodes, rfEdges]);
+
   return (
     <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
       {/* 顶部：返回树视图（§4.5 内嵌切换——标签页栏「画布」项与这里互通） */}
@@ -286,7 +300,7 @@ function CanvasFlow({
       <div style={{ flex: 1, minHeight: 0 }}>
         <ReactFlow
           nodes={rfNodes}
-          edges={rfEdges}
+          edges={smartEdges}
           nodeTypes={nodeTypes}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
@@ -330,14 +344,19 @@ function CanvasFlow({
   );
 }
 
-/** 核心问题节点（虚拟中心——不可拖/不可选，仅展示体系核心问题） */
+/** 体系根卡（虚拟中心——不可拖/不可选，仅展示体系根：全局=核心问题，领域=体系名） */
 function CanvasCoreNode({ data }: NodeProps<Node<CanvasNodeData, "core">>) {
   return (
     <div
       data-testid="canvas-core"
       style={{ maxWidth: 240, borderRadius: 10, padding: "10px 14px", background: "#0f766e", color: "#fff", border: "1px solid #0f766e", boxShadow: "0 2px 8px rgba(15,118,110,0.25)" }}
     >
-      <div style={{ fontSize: 11, opacity: 0.85 }}>核心问题</div>
+      {/* v0.13.9：四边 source Handle——根节点虚线边接线方向随相对方位动态选择 */}
+      <Handle type="source" id="source-top" position={Position.Top} style={{ opacity: 0, width: 2, height: 2 }} />
+      <Handle type="source" id="source-bottom" position={Position.Bottom} style={{ opacity: 0, width: 2, height: 2 }} />
+      <Handle type="source" id="source-left" position={Position.Left} style={{ opacity: 0, width: 2, height: 2 }} />
+      <Handle type="source" id="source-right" position={Position.Right} style={{ opacity: 0, width: 2, height: 2 }} />
+      <div style={{ fontSize: 11, opacity: 0.85 }}>{data.subtitle ?? "体系"}</div>
       <div style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>{data.title}</div>
     </div>
   );

app/src/components/KnowledgeTreeView.test.tsx

@@ -68,6 +68,29 @@ describe("KnowledgeTreeView 问题树", () => {
     expect(screen.getByTestId("node-type-3").textContent).toBe("领域入口");
   });
 
+  it("v0.13.9 层级缩进：子节点 paddingLeft 随 depth 递增（16px/层），引导线渲染", async () => {
+    // Arrange + Act：node1 根（depth 0）、node2 是 node1 子（depth 1）、node3 根（depth 0）
+    renderTree();
+    await screen.findByTestId("node-1");
+    // Assert：仅子节点多缩进 16px；根节点不受影响
+    expect(screen.getByTestId("node-1").style.paddingLeft).toBe("8px");
+    expect(screen.getByTestId("node-2").style.paddingLeft).toBe("24px");
+    expect(screen.getByTestId("node-3").style.paddingLeft).toBe("8px");
+    // 引导线：子节点行有水平短线
+    expect(screen.getByTestId("node-guide-2")).toBeTruthy();
+    expect(screen.queryByTestId("node-guide-3")).toBeNull(); // 根节点无引导线
+  });
+
+  it("v0.13.9 折叠后引导线随子树隐藏", async () => {
+    // Arrange + Act
+    renderTree();
+    await screen.findByTestId("node-guide-2");
+    fireEvent.click(screen.getByTestId("node-toggle-1"));
+    // Assert：子树（含引导线）整体不渲染
+    expect(screen.queryByTestId("node-2")).toBeNull();
+    expect(screen.queryByTestId("node-guide-2")).toBeNull();
+  });
+
   it("节点选中回调：点击节点 → onSelectNode 携带 id", async () => {
     const onSelectNode = vi.fn();
     renderTree(onSelectNode);