feat(knowledge): v0.13.8 画布前端辐射布局与画布视图

- 依赖：@xyflow/react@12.11.3（React Flow 节点式无限画布）
- layoutRadial：BFS 辐射布局纯函数（8 golden 单测）——核心/首根圆心、
  ring+200px、父角度扇区 spread=60°/(子数+1)、碰撞外推、golden angle 兜底
- canvasElements：实体→RF 元素纯转换（q/c/m 前缀 key、parent_id→smoothstep 边、
  links→概念/模型徽标 + 引用计数同树视图口径）
- 三自定义节点：缩放分级（>0.7 全文 / 0.4-0.7 仅标题 / <0.4 缩略卡）
- KnowledgeCanvasView：拖拽/视口防抖保存、切回 setViewport 恢复、首次缺位
  批量初始化、自动排列覆盖；KnowledgePage「画布」标签 + 树视图浮钮双入口

Author: Aparencia

app/package-lock.json

@@ -14,6 +14,7 @@
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.7.2",
     "@types/katex": "^0.16.8",
+    "@xyflow/react": "^12.11.3",
     "katex": "^0.18.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

app/package.json

@@ -0,0 +1,64 @@
+/**
+ * CanvasNodeConcept — 画布概念节点（v0.13.8 §4.2）。
+ *
+ * @ai-context: 浮动参照（§五 兼容）——概念节点在画布只做展示与选中联动，
+ *              新建/编辑概念仍走「概念」标签页（画布无编辑入口，§九 不做清单）。
+ *              展示：概念名 + 本质摘要 1 行 + 状态指示（核心/关注/已归档）。
+ * @ai-context: 缩放分级（§七）——与问题节点同口径；概念无父关系，无 Handle
+ *              （连线只反映问题树 parent_id，§二.4）。
+ */
+import { memo } from "react";
+import { useStore, type Node, type NodeProps } from "@xyflow/react";
+import type { CanvasNodeData } from "../utils/canvasElements";
+import { CANVAS_BBOX } from "../utils/layoutRadial";
+
+export type ConceptRfNode = Node<CanvasNodeData, "concept">;
+
+export default memo(function CanvasNodeConcept({ data, selected }: NodeProps<ConceptRfNode>) {
+  const zoom = useStore((s) => s.transform[2]);
+  const full = zoom > 0.7;
+  const titleOnly = zoom >= 0.4;
+
+  return (
+    <div
+      data-testid={`canvas-node-c-${data.entityId}`}
+      style={{
+        width: CANVAS_BBOX.concept.w,
+        borderRadius: 8,
+        border: selected ? "2px solid #14b8a6" : "1px solid #e5e7eb",
+        background: selected ? "#f0fdfa" : "#ffffff",
+        boxShadow: "0 1px 4px rgba(0,0,0,0.08)",
+        padding: 8,
+      }}
+    >
+      {full ? (
+        <>
+          <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 13, fontWeight: 500, color: "#374151" }}>
+            <span>🧬</span>
+            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{data.title}</span>
+          </div>
+          {data.subtitle && (
+            <div style={{ fontSize: 11, color: "#6b7280", marginTop: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              本质：{data.subtitle}
+            </div>
+          )}
+          {data.statusText && (
+            <div style={{ fontSize: 10, color: data.statusColor ?? "#6b7280", marginTop: 4 }}>
+              ● {data.statusText}
+            </div>
+          )}
+        </>
+      ) : titleOnly ? (
+        <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 12, color: "#374151" }}>
+          <span>🧬</span>
+          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{data.title}</span>
+        </div>
+      ) : (
+        <div style={{ display: "flex", gap: 4, alignItems: "center", fontSize: 11, color: "#4b5563" }}>
+          <span>🧬</span>
+          <span>{data.title.slice(0, 4)}{data.title.length > 4 ? "…" : ""}</span>
+        </div>
+      )}
+    </div>
+  );
+});