node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/components/OntologyGraph.tsx

@@ -0,0 +1,1196 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Empty, Segmented, Space, Tooltip, Typography } from 'antd';
+import type { ECharts } from 'echarts/core';
+import EChart from '@/components/EChart';
+import { fs, MILITARY } from '@/lib/theme';
+import { useSkinInk } from '@/components/appearance/AppearanceProvider';
+
+/**
+ * 知识图谱渲染器（ECharts graph）。
+ *
+ * ## 设计要点（都是踩过坑之后的结论）
+ *
+ * 1. **默认分层布局**。按 ontology 里每个本体的 `layer` 从左到右分层排列，
+ *    同层节点按"最稀有邻居"聚簇后均匀分布 —— 同一父节点的子节点排在一起，
+ *    连线不互相穿插；一眼能看出"部门 → 员工 → 记录"的流向。
+ *
+ *    也提供力导布局（`segmented` 切换），但**不是** ECharts 自带的实时模拟，
+ *    而是"一次性算好坐标"的静态 FR（见 forceLayout 注释）：结果可复现、
+ *    不会因为 hover/setOption 重新散开，且画布宽度变化时会重新铺一遍而不是被裁掉。
+ *
+ * 2. **浅色底 + 深色字**。深色填充配深色文字，节点上的字根本读不出来。
+ *    填充色由 ontology 的 `color` 决定（约定用浅色），文字固定深色。
+ *
+ * 3. **边标签默认不显示**。几十条边都挂标签会糊成一片。
+ *    只在 hover / 选中某个节点时，才显示与它相连的边标签 ——
+ *    靠 series.emphasis.focus='adjacency' 实现，**不通过改 option 实现**。
+ *
+ *    ⚠️ 这里踩过一个坑：以前 hover 会 setState，进而重建 option、触发 setOption。
+ *    分层布局的节点有固定 x/y，看不出来；但**力导布局只要 setOption 就重跑模拟**，
+ *    鼠标一悬停整张图就重新散开，节点根本选不中。
+ *    现在 hover 完全不进 React 状态，选中高亮走 dispatchAction。
+ *
+ * 4. **节点可拖拽**，但那只是本地视图调整，不写库。
+ *    真正的增删改走右侧编辑面板（调用 /api/graph/node）。
+ *
+ * 5. **部门节点可折叠**。entity 为 'department' 的节点是"部门节点"，
+ *    点击它可折叠/展开其下属（相邻节点）。折叠时下属节点及其相连的边不渲染。
+ *
+ * 6. **双击锁定关联**（2026-10）。单击只是"打开详情 + 鼠标态高亮"（鼠标一走就恢复），
+ *    双击才把「该节点 + 直接邻居」钉住，簇外压暗；双击空白处或按 Esc 解锁。
+ *    锁定是**持续状态**，只能落到数据样式上（重建 option），不能靠 emphasis ——
+ *    ECharts 在 mouseout 时会自动 downplay，dispatchAction 保持不住。
+ *    坐标是预先算好的静态值，重建 option 不会让节点跑位。
+ */
+
+export interface GNode {
+  id: string;
+  label: string;
+  entity: string;
+  color: string;
+  borderColor?: string;
+  subtitle: string;
+  link?: string;
+}
+
+export interface GEdge {
+  source: string;
+  target: string;
+  label: string;
+  relation: string;
+}
+
+/**
+ * 图表实例的最小接口（只声明用到的几个方法）。
+ * 直接 Pick echarts 自己的类型，别手写结构类型 ——
+ * dispatchAction 的参数是 Payload，手写 `Record<string, unknown>` 会因逆变规则报错。
+ */
+type ChartLike = Pick<ECharts, 'dispatchAction' | 'getZr'>;
+
+export interface OntologyGraphProps {
+  nodes: GNode[];
+  edges: GEdge[];
+  entities: { id: string; label: string; color: string; layer?: number }[];
+  loading?: boolean;
+  height?: number;
+  onNodeClick?: (n: GNode) => void;
+  activeId?: string | null;
+  /** 已折叠的部门节点（受控）。不传则组件自己管 */
+  collapsed?: Set<string>;
+  /**
+   * 保存成功后闪一下的节点：`id` 是图内节点键（entity:dbId），
+   * `nonce` 让"同一个节点反复保存"也能重新触发（只比 id 的话第二次不会闪）。
+   */
+  flash?: { id: string; nonce: number } | null;
+  /**
+   * 聚焦簇（业务列表「关联」跳转来的时候用）：
+   *   nodes —— 要高亮的节点键（entity:dbId）
+   *   edges —— 要高亮的边（source/target 也是 entity:dbId，方向无所谓）
+   * 不在簇里的节点/边会被压暗，簇内的连线加粗 + 显示关系名。
+   *
+   * ★ 高亮走「重建 option」而不是 dispatchAction：
+   *   hover/选中才必须走 dispatchAction（见文件头注释），
+   *   而聚焦是一个**持续状态**，要同时改一批节点+边的样式，ECharts 没有对应的 action。
+   *   坐标是预先算好的（forceLayout 也是静态计算），重建 option 不会让图跑位。
+   */
+  focus?: { nodes: string[]; edges: { source: string; target: string }[] } | null;
+}
+
+/**
+ * 图谱坐标系统一用「隐藏笛卡尔坐标系」。
+ *
+ * ⚠️ 这里踩过一个坑，值得记住：
+ *   ECharts graph 默认的 view 坐标系会把**节点中心的包围盒整体缩放铺满** series 区域
+ *   （`echarts/lib/chart/graph/createView.js`：bbox.fromPoints → createViewCoordSysSimply）。
+ *   后果是最左/最右节点的中心被贴到画布边缘，符号一半在画布外 → 被裁掉半个字；
+ *   而且"把 x 往内收"（旧代码的 padX=170）会让包围盒更窄、缩放更大，**裁得更多**，
+ *   方向完全是反的。ECharts 6 也没有 `autoFit` 这个配置。
+ *
+ * 根治办法：挂一对隐藏的 value 轴（min/max 固定 0~100）+ grid，
+ * 坐标线性映射、绝不缩放；grid 的左右边距 60px / 上下 24px 大于节点半宽(52)/半高(18)，
+ * 所以轴值取边缘也不会被裁。
+ *
+ * 下面两个布局函数都返回 **0~100 的轴坐标**（不是像素）。
+ */
+
+/** grid 边距（px）：必须大于节点半宽 52 / 半高 18，否则边缘节点仍会被裁 */
+const GRID = { left: 60, right: 60, top: 24, bottom: 24 };
+
+/** 节点尺寸（与 series.symbolSize 保持一致） */
+const NODE_W = 104;
+const NODE_H = 36;
+/** 去重叠时的安全间距（含 6px 呼吸） */
+const SEP_W = NODE_W + 12;
+const SEP_H = NODE_H + 12;
+
+/**
+ * 像素 → 轴坐标（0~100）。
+ * ⚠️ 必须减去 grid 原点：grid 从 (GRID.left, GRID.top) 才开始，
+ * 不减的话整体会右移 60/画布宽 ≈ 6%，最右列直接越过轴上限 100 被裁掉（踩过）。
+ */
+function toAxis(px: number, py: number, gw: number, gh: number) {
+  return {
+    x: ((px - GRID.left) / gw) * 100,
+    y: ((py - GRID.top) / gh) * 100,
+  };
+}
+
+/**
+ * 分层布局：按 entity 的 layer 决定 x（列），同层内按"锚点聚簇"排序再分配 y（行）。
+ *
+ * 两个硬约束：
+ *   1. 行距至少 40px：一列 20 个节点时 560px 高度只够 25px/行，节点高 36px 必然叠在一起。
+ *      所以高度不够时由调用方把图表撑高（见 maxColCount / chartHeight）。
+ *   2. x 从"左边距 + 节点半宽"起算，保证最左节点的左边缘不出画布。
+ *
+ * ## 竖排顺序：最稀有邻居做锚点（降交叉的关键）
+ *
+ * 早期版本同层内直接按 label 排序，看起来"整齐"，连线却是一张网：
+ * 请销假图里 18 条请假记录按标题字典序散在右列，跟中列 8 个人的连线全部互相穿插。
+ *
+ * 第二版用标准 barycenter（邻居序号的平均值）仍不够 —— 真实业务图里几乎总有**枢纽**：
+ * 审批人一人连着十几条记录，无权重的平均值会把所有记录都拽到"枢纽们的平均位置"，
+ * 归属关系的排序信号被完全淹没。这与业务无关，任何"少量审批人 + 大量单据"的图都会这样。
+ *
+ * 所以现在做两处通用修正（只看图结构，不看任何业务字段）：
+ *   1. **锚点 = 最稀有的邻居**（度数最小者）。归属边在业务图里几乎总是"一对一/一对少"，
+ *      而审批、共享、关联这类边总是"一对多"——度数天然区分了两者，不需要任何业务语义。
+ *      同一父节点的子节点拿到同一个锚点序号，排序后自动聚成一簇，簇与簇不穿插。
+ *   2. **簇内按 label 排**，同样数据每次结果一模一样（截图、演示稳定）。
+ *
+ * 左→右一遍扫完即可（锚点都在左边的层，左边定了右边就定了）。
+ * 无邻居的节点保持原位（用自己当前序号当 bary 值），初值是 label 序。
+ */
+function layoutNodes(
+  nodes: GNode[],
+  entities: { id: string; layer?: number }[],
+  width: number,
+  height: number,
+  edges: GEdge[] = []
+) {
+  const layerOf = new Map<string, number>();
+  entities.forEach((e, i) => layerOf.set(e.id, e.layer ?? i));
+
+  const byLayer = new Map<number, GNode[]>();
+  for (const n of nodes) {
+    const l = layerOf.get(n.entity) ?? 99;
+    if (!byLayer.has(l)) byLayer.set(l, []);
+    byLayer.get(l)!.push(n);
+  }
+
+  const layers = [...byLayer.keys()].sort((a, b) => a - b);
+  const pos = new Map<string, { x: number; y: number }>();
+
+  // ── 层内顺序：label 初值 → 重心微调 ──────────────────────
+  const labelOf = new Map(nodes.map((n) => [n.id, n.label]));
+  const idxOf = new Map(nodes.map((n, i) => [n.id, i]));
+  // 无向邻接（和渲染层一致：同一条关系只算一次）
+  const nbrs: number[][] = nodes.map(() => []);
+  for (const e of edges) {
+    const a = idxOf.get(e.source);
+    const b = idxOf.get(e.target);
+    if (a === undefined || b === undefined || a === b) continue;
+    if (nbrs[a].includes(b)) continue;
+    nbrs[a].push(b);
+    nbrs[b].push(a);
+  }
+
+  // order[li] = 第 li 层的节点 id（层内有序）；rank = 当前列内序号
+  const rank = new Map<string, number>();
+  const order: string[][] = layers.map((l) => {
+    const ids = byLayer
+      .get(l)!
+      .map((n) => n.id)
+      .sort((a, b) => labelOf.get(a)!.localeCompare(labelOf.get(b)!, 'zh'));
+    ids.forEach((id, i) => rank.set(id, i));
+    return ids;
+  });
+
+  /** 节点 id 的锚点序号 = refLayer 里**度数最小**的邻居的序号；没有这种邻居就保持原序号 */
+  const baryOf = (id: string, refLayer: number) => {
+    const i = idxOf.get(id)!;
+    let best = -1;
+    for (const j of nbrs[i]) {
+      const nl = layerOf.get(nodes[j].entity) ?? 99;
+      if (nl !== refLayer) continue;
+      if (best < 0) {
+        best = j;
+        continue;
+      }
+      // 比度数 → 度数相同比 label（保证确定性，不依赖当前 rank 来回摆）
+      const d = nbrs[j].length - nbrs[best].length;
+      if (
+        d < 0 ||
+        (d === 0 &&
+          labelOf.get(nodes[j].id)!.localeCompare(labelOf.get(nodes[best].id)!, 'zh') < 0)
+      ) {
+        best = j;
+      }
+    }
+    return best < 0 ? rank.get(id)! : rank.get(nodes[best].id)!;
+  };
+  /**
+   * 把第 li 层按"锚点在 refLi 层的序号"重排（并列时按 label）。
+   * 锚点相同 = 同一父节点的子节点 → 排完自动聚成一簇，簇内不交叉。
+   */
+  const applyBary = (li: number, refLi: number) => {
+    const ids = order[li];
+    const refLayer = layers[refLi];
+    const keys = new Map(ids.map((id) => [id, baryOf(id, refLayer)]));
+    ids.sort((a, b) => {
+      const d = keys.get(a)! - keys.get(b)!;
+      return d !== 0 ? d : labelOf.get(a)!.localeCompare(labelOf.get(b)!, 'zh');
+    });
+    ids.forEach((id, i) => rank.set(id, i));
+  };
+  /**
+   * 只做左→右一遍：第 1 层定完 → 第 2 层跟着排 → ……
+   * （一遍就够：锚点全在左边的层，左边定了右边就定了。）
+   *
+   * 为什么不加右→左回扫：回扫会按"最稀有的子节点"重排父层 ——
+   * 子节点度数都差不多（并列比 label），父层的聚簇反而被打散。
+   */
+  for (let li = 1; li < order.length; li += 1) applyBary(li, li - 1);
+
+  const gw = Math.max(width - GRID.left - GRID.right, 200);
+  const gh = Math.max(height - GRID.top - GRID.bottom, 120);
+
+  // 列间距：给左右各留一个节点半宽，最左/最右节点都完整可见
+  const usableW = Math.max(gw - NODE_W, 1);
+  const stepX = usableW / Math.max(layers.length - 1, 1);
+
+  layers.forEach((layer, li) => {
+    const ids = order[li];
+    // 只有一列时居中（否则单节点/单层视图会贴在最左边，看着像被裁了）
+    const x = layers.length === 1 ? GRID.left + gw / 2 : GRID.left + NODE_W / 2 + li * stepX;
+    // 行距 = 可用高度 / 本列节点数；调用方保证 gh ≥ 节点数 × 40
+    const stepY = gh / Math.max(ids.length, 1);
+    ids.forEach((id, i) => {
+      pos.set(id, toAxis(x, GRID.top + stepY * (i + 0.5), gw, gh));
+    });
+  });
+  return pos;
+}
+
+/**
+ * 力导布局调参（按真实图谱反复调出来的，不要凭感觉改）
+ */
+const FORCE = {
+  /** 理想间距系数：k = 系数 × √(画布面积 / 节点数)，同时是相邻节点的自然间距 */
+  spacing: 1.2,
+  /** 迭代次数：300 次后位移已收敛到 1px 以内 */
+  iter: 300,
+  /** 向心力（力/px）：太小会让互不相连的几团越飘越远，太大则全挤到中心 */
+  gravity: 0.06,
+  /**
+   * 斥力作用距离（单位：k）。超过这个距离斥力迅速衰减 ——
+   * 这一步是**整张图不炸开的关键**（详见函数注释里的"爆炸"说明）。
+   */
+  reach: 3.2,
+};
+
+/**
+ * 力导布局：一次性算好坐标，之后就是静态的。
+ *
+ * 为什么不用 ECharts 自带的 `layout: 'force'`：
+ *   它是**实时模拟**，只要 setOption（切换模式、折叠、甚至 hover 改 option）
+ *   就会从随机初始位置重跑，节点会突然散开，鼠标根本追不上，更别说点选。
+ *
+ * ## 旧版为什么"乱"（以及这一版怎么改的）
+ *
+ * 旧版是"把节点撒在一个圆上 + 各向同性弹簧"，画出来是一团**竖着的毛球**：
+ *   1. 斥力 `R/d²` 衰减太快，只能在很近的距离起作用 → 整团被向心力压成一个点；
+ *   2. 弹簧原长写死 110px，比节点宽度 104px 只多 6px —— 相连的两个节点几乎贴在一起，
+ *      连线短得只剩一个线头，剩下的长线全部横穿整张图；
+ *   3. 向心力是常数，枢纽和叶子被同等拉向中心，中心区域密不透风。
+ *
+ * 第一次改成标准 FR（k²/d + d²/k）后反而更糟：FR 的斥力是**长程**的，
+ * 而真实图谱里常有互不相连的部分（角色节点一条边都没有，三个部门之间也没关系），
+ * 它们只有斥力、没有弹簧往回拉，会被一路推到几千像素外；
+ * 随后"等比缩放回画布"把整张图压十几倍，节点尺寸却是固定的 104×36，
+ * 缩完直接叠成一团，再去重叠就推成**一条条竖排的链**（实测坐标跑到 3768,2015）。
+ *
+ * 所以现在四步（全部确定性，同样数据每次画出来一模一样，截图/演示稳定）：
+ *   1. **确定性播种**：从度数最高的节点做 BFS，按层放同心椭圆 —— 枢纽天然在中心、
+ *      叶子在外圈，这正是力导收敛后最理想的结构，比随机撒点少绕很多弯路。
+ *   2. **短程斥力**：FR 的 k²/d 再乘 1/(1+(d/reach·k)²) —— 超过 3 个 k 就迅速衰减，
+ *      向心力重新占主导，整张图的尺度稳定在"塞得进画布"的量级。
+ *   3. **度数自适应边长**：两端度数越高、理想边长越长 —— 枢纽周围留白，
+ *      不再"十几个节点挤在中心、线从中心射向四周"。
+ *   4. **非等比回填 + 矩形去重叠**：x/y 各自缩放到贴边（差不超过 1.7 倍），
+ *      图形自然长成画布的形状；最后按 104×36 的矩形把残余重叠推开（矩形而不是圆）。
+ */
+function forceLayout(nodes: GNode[], edges: GEdge[], width: number, height: number) {
+  const n = nodes.length;
+  const out = new Map<string, { x: number; y: number }>();
+  if (!n) return out;
+
+  const gw = Math.max(width - GRID.left - GRID.right, 200);
+  const gh = Math.max(height - GRID.top - GRID.bottom, 120);
+  // 节点中心的可落点范围：先扣掉半个节点，边缘节点才不会被裁
+  const minX = GRID.left + NODE_W / 2;
+  const maxX = GRID.left + gw - NODE_W / 2;
+  const minY = GRID.top + NODE_H / 2;
+  const maxY = GRID.top + gh - NODE_H / 2;
+  const cx = (minX + maxX) / 2;
+  const cy = (minY + maxY) / 2;
+
+  // ── 邻接表（无向去重，和渲染层一样：同一对节点只算一条弹簧） ──
+  const idx = new Map(nodes.map((x, i) => [x.id, i]));
+  const adj: number[][] = nodes.map(() => []);
+  const links: [number, number][] = [];
+  for (const e of edges) {
+    const a = idx.get(e.source);
+    const b = idx.get(e.target);
+    if (a === undefined || b === undefined || a === b) continue;
+    if (adj[a].includes(b)) continue;
+    adj[a].push(b);
+    adj[b].push(a);
+    links.push([a, b]);
+  }
+  const deg = adj.map((l) => l.length);
+
+  // ── 1) 确定性播种：BFS 分层 → 同心椭圆 ──────────────────────
+  const root = deg.reduce((best, d, i) => (d > deg[best] ? i : best), 0);
+  const level = new Array<number>(n).fill(-1);
+  level[root] = 0;
+  let frontier = [root];
+  while (frontier.length) {
+    const next: number[] = [];
+    for (const u of frontier) {
+      for (const v of adj[u]) {
+        if (level[v] < 0) {
+          level[v] = level[u] + 1;
+          next.push(v);
+        }
+      }
+    }
+    frontier = next;
+  }
+  let maxLevel = 0;
+  for (const l of level) if (l > maxLevel) maxLevel = l;
+  // 孤立节点（没有边）挂到最外圈，否则会和中心节点抢位置
+  for (let i = 0; i < n; i += 1) if (level[i] < 0) level[i] = maxLevel + 1;
+
+  const outer = Math.max(maxLevel, 1);
+  const byLevel = new Map<number, number[]>();
+  for (let i = 0; i < n; i += 1) {
+    if (!byLevel.has(level[i])) byLevel.set(level[i], []);
+    byLevel.get(level[i])!.push(i);
+  }
+  const rx = (maxX - minX) * 0.42;
+  const ry = (maxY - minY) * 0.42;
+  const seedX = new Array<number>(n).fill(cx);
+  const seedY = new Array<number>(n).fill(cy);
+  byLevel.forEach((list, lv) => {
+    const r = Math.max(lv / outer, lv === 0 ? 0 : 0.4);
+    list.forEach((i, k) => {
+      // 每层角度错开 0.8 弧度，避免上下两层的节点排成一条竖线
+      const a = (k / list.length) * Math.PI * 2 + lv * 0.8 - Math.PI / 2;
+      seedX[i] = cx + Math.cos(a) * rx * r;
+      seedY[i] = cy + Math.sin(a) * ry * r;
+    });
+  });
+
+  // ── 2) FR 迭代（各向异性斥力 + 度数自适应边长的弹簧） ───────
+  const k = Math.max(Math.min(Math.sqrt((gw * gh) / n) * FORCE.spacing, 240), NODE_W + 30);
+  const k2 = k * k;
+  const px = seedX.map((x, i) => ({ x, y: seedY[i] }));
+  const dispX = new Array<number>(n).fill(0);
+  const dispY = new Array<number>(n).fill(0);
+
+  for (let iter = 0; iter < FORCE.iter; iter += 1) {
+    dispX.fill(0);
+    dispY.fill(0);
+
+    /**
+     * 斥力：FR 的 k²/d，但**乘一个距离衰减因子**。
+     *
+     * ⚠️ 这里是最关键的一处（踩过一个大坑）：纯 FR 的 k²/d 是长程力，
+     *   衰减极慢。真实图谱里常有互不相连的部分（本脚手架里"角色"节点就一条边都没有，
+     *   三个部门之间也没有关系），它们之间只有斥力、没有任何弹簧往回拉，
+     *   于是会被一路推出几千像素 —— 实测 26 个节点跑到 (3768, 2015)。
+     *   随后"等比缩放回画布"把整张图压缩十几倍，节点尺寸却是固定的 104×36，
+     *   缩完直接叠成一团，再由去重叠逻辑推成**一条条竖排的链**（正是截图里的鬼样子）。
+     *
+     *   所以斥力必须在 2~3 个 k 之外迅速衰减，让向心力重新占主导 ——
+     *   整张图的尺度因此稳定在"能塞进画布"的量级。
+     */
+    const reach2 = (FORCE.reach * k) * (FORCE.reach * k);
+    for (let i = 0; i < n; i += 1) {
+      for (let j = i + 1; j < n; j += 1) {
+        let dx = px[i].x - px[j].x;
+        let dy = px[i].y - px[j].y;
+        let d2 = dx * dx + dy * dy;
+        if (d2 < 1e-3) {
+          // 完全重合时按索引给一个确定方向；这里**不能用随机数**，
+          // 否则同一份数据每次布局结果都不一样（截图、演示全对不上）
+          dx = ((i * 37 + j * 17) % 7) - 3 || 0.5;
+          dy = ((i * 23 + j * 31) % 5) - 2 || 0.5;
+          d2 = dx * dx + dy * dy;
+        }
+        const d = Math.sqrt(d2);
+        const f = k2 / d / (1 + d2 / reach2);
+        const ux = (dx / d) * f;
+        const uy = (dy / d) * f;
+        dispX[i] += ux;
+        dispY[i] += uy;
+        dispX[j] -= ux;
+        dispY[j] -= uy;
+      }
+    }
+
+    // 引力：FR 的 d²/k；两端度数越高原长越长，给枢纽留出呼吸空间
+    for (const [a, b] of links) {
+      const dx = px[b].x - px[a].x;
+      const dy = px[b].y - px[a].y;
+      const d = Math.sqrt(dx * dx + dy * dy) || 0.01;
+      const rest = k * (1 + 0.18 * Math.min(deg[a] + deg[b], 8));
+      const f = (d * d) / rest;
+      const ux = (dx / d) * f;
+      const uy = (dy / d) * f;
+      dispX[a] += ux;
+      dispY[a] += uy;
+      dispX[b] -= ux;
+      dispY[b] -= uy;
+    }
+
+    // 向心力 + 积分（步长随温度线性收敛，最后 1px 左右，避免来回抖）
+    const maxStep = 40 * (1 - iter / FORCE.iter) + 1;
+    for (let i = 0; i < n; i += 1) {
+      dispX[i] += (cx - px[i].x) * FORCE.gravity;
+      dispY[i] += (cy - px[i].y) * FORCE.gravity;
+      const len = Math.sqrt(dispX[i] * dispX[i] + dispY[i] * dispY[i]);
+      if (len > 0) {
+        const s = Math.min(len, maxStep) / len;
+        px[i].x += dispX[i] * s;
+        px[i].y += dispY[i] * s;
+      }
+    }
+  }
+
+  // ── 3) 回填画布：分别缩放并居中 ───────────────────────────
+  let bx0 = Infinity;
+  let bx1 = -Infinity;
+  let by0 = Infinity;
+  let by1 = -Infinity;
+  for (const p of px) {
+    bx0 = Math.min(bx0, p.x);
+    bx1 = Math.max(bx1, p.x);
+    by0 = Math.min(by0, p.y);
+    by1 = Math.max(by1, p.y);
+  }
+  const spanX = Math.max(bx1 - bx0, 1);
+  const spanY = Math.max(by1 - by0, 1);
+
+  /**
+   * 回填用**非等比**缩放，理由：
+   *   等比缩放会被"短的那一边"卡住 —— 方图放进 780×512 的宽画布，只能按高度铺满，
+   *   左右各留 160px 空白，看上去就是"没用满画布"。
+   *   两个方向各自缩放到贴边，图形自然长成画布的形状（宽屏 → 横向舒展）。
+   *
+   * 但要防止把"一条长链"横着摊成梳子，所以两边缩放比最多差 1.7 倍。
+   */
+  const MAX_STRETCH = 1.7;
+  const fitX = (maxX - minX) / spanX;
+  const fitY = (maxY - minY) / spanY;
+  const base = Math.min(fitX, fitY, 1.35);
+  const scaleX = Math.min(fitX, base * MAX_STRETCH);
+  const scaleY = Math.min(fitY, base * MAX_STRETCH);
+
+  const pos = px.map((p) => ({
+    x: Math.max(minX, Math.min(maxX, cx + (p.x - (bx0 + bx1) / 2) * scaleX)),
+    y: Math.max(minY, Math.min(maxY, cy + (p.y - (by0 + by1) / 2) * scaleY)),
+  }));
+
+  // ── 4) 去矩形重叠（节点是 104×36 的横条，用矩形而不是圆判断）──
+  for (let pass = 0; pass < 120; pass += 1) {
+    let moved = false;
+    for (let i = 0; i < n; i += 1) {
+      for (let j = i + 1; j < n; j += 1) {
+        const dx = pos[j].x - pos[i].x;
+        const dy = pos[j].y - pos[i].y;
+        const ox = SEP_W - Math.abs(dx);
+        const oy = SEP_H - Math.abs(dy);
+        if (ox <= 0 || oy <= 0) continue;
+        moved = true;
+        if (ox < oy) {
+          const s = (dx >= 0 ? 1 : -1) * (ox / 2 + 0.5);
+          pos[i].x -= s;
+          pos[j].x += s;
+        } else {
+          const s = (dy >= 0 ? 1 : -1) * (oy / 2 + 0.5);
+          pos[i].y -= s;
+          pos[j].y += s;
+        }
+      }
+    }
+    for (const p of pos) {
+      p.x = Math.max(minX, Math.min(maxX, p.x));
+      p.y = Math.max(minY, Math.min(maxY, p.y));
+    }
+    if (!moved) break;
+  }
+
+  nodes.forEach((node, i) => out.set(node.id, toAxis(pos[i].x, pos[i].y, gw, gh)));
+  return out;
+}
+
+export default function OntologyGraph({
+  nodes,
+  edges,
+  entities,
+  loading,
+  height = 560,
+  onNodeClick,
+  activeId,
+  collapsed: collapsedProp,
+  flash,
+  focus,
+}: OntologyGraphProps) {
+  const [mode, setMode] = useState<'layered' | 'force'>('layered');
+  // 已折叠的部门节点 id 集合（受控时用外部状态）
+  const [innerCollapsed] = useState<Set<string>>(new Set());
+  const collapsed = collapsedProp ?? innerCollapsed;
+
+  /**
+   * 双击锁定的聚焦节点。
+   *
+   * 交互约定：
+   *   - 单击节点 = 打开右侧详情 + 临时高亮（hover 走 ECharts 的 emphasis，
+   *     鼠标离开就恢复 —— 这是 ECharts 自带行为，不归我们管）；
+   *   - 双击节点 = 把"该节点 + 它的直接邻居"**锁住**，簇外节点压暗，
+   *     鼠标怎么移动都不恢复；
+   *   - 双击空白处（或按 Esc）= 解锁。
+   *
+   * 为什么要单独存这个状态：emphasis 是"鼠标态"，ECharts 在 mouseout 时
+   * 会自动 downplay，没法靠 dispatchAction 长期保持。锁定必须落到数据样式上，
+   * 也就是重建一次 option。好在坐标是预先算好的（forceLayout 也是静态计算），
+   * 重建 option 不会让节点跑位，只是把样式换一套。
+   */
+  const [lockedId, setLockedId] = useState<string | null>(null);
+  /** 图表实例：只在"选中高亮"时用 dispatchAction，避免重建 option 让力导重新布局 */
+  const chartRef = useRef<ChartLike | null>(null);
+
+  /**
+   * 图表容器宽度：笛卡尔坐标系的轴坐标要按实际宽度换算成像素，
+   * 所以必须量真实宽度（以前写死 900，窄屏下坐标会全部溢出）。
+   */
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [wrapW, setWrapW] = useState(900);
+
+  useEffect(() => {
+    const el = wrapRef.current;
+    if (!el) return;
+    const measure = () => setWrapW(el.clientWidth || 900);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  /** 部门节点 id 集合（entity === 'department'） */
+  const departmentIds = useMemo(() => {
+    const s = new Set<string>();
+    for (const n of nodes) if (n.entity === 'department') s.add(n.id);
+    return s;
+  }, [nodes]);
+
+  /**
+   * 兜底去重：同一对节点、同一条关系只保留一条边。
+   *
+   * ⚠️ 这是踩过的坑，值得说清楚：
+   *   图谱引擎（api/graph/route.ts）的 BFS 会从关系两端各展开一次
+   *   （cur 是 from 时一次、是 to 时一次）。旧版引擎用**带方向**的键去重，
+   *   于是同一对节点上留下方向相反的两条边 —— ECharts 把同一对节点的多条 link
+   *   画成上下两条弧，看上去就是「同一条线画两遍」，页面上的「N 条关系」也翻倍
+   *   （实测 29 个节点 50 条边，实际只有 25 条关系）。
+   *
+   *   引擎已经改成无向键去重；渲染层再防一次，是因为「项目里留着旧引擎」太容易发生：
+   *   脚手架是按模板整份复制过去的，改过的引擎不会自动回流到已生成的项目。
+   *   去重键带上 relation，所以**两个不同关系连同一对节点**（如"所属部门"和"组织部门"）
+   *   仍然各画一条，不会被误合并。
+   */
+  const uniqueEdges = useMemo(() => {
+    const seen = new Set<string>();
+    const out: GEdge[] = [];
+    for (const e of edges) {
+      const [lo, hi] = e.source < e.target ? [e.source, e.target] : [e.target, e.source];
+      const k = `${e.relation ?? e.label}|${lo}|${hi}`;
+      if (seen.has(k)) continue;
+      seen.add(k);
+      out.push(e);
+    }
+    return out;
+  }, [edges]);
+
+  /**
+   * 每个部门节点的下属数量（相邻**节点**数，不是边数）。
+   * ⚠️ 曾经按边计数，而旧引擎对同一条关系会生成双向两条边，结果部门 "(16)" 是实际下属(8)的两倍。
+   */
+  const deptCounts = useMemo(() => {
+    const m = new Map<string, Set<string>>();
+    for (const id of departmentIds) m.set(id, new Set());
+    for (const e of uniqueEdges) {
+      if (departmentIds.has(e.source)) m.get(e.source)!.add(e.target);
+      if (departmentIds.has(e.target)) m.get(e.target)!.add(e.source);
+    }
+    return new Map([...m].map(([k, v]) => [k, v.size]));
+  }, [uniqueEdges, departmentIds]);
+
+  /** 计算实际要渲染的节点和边：折叠的部门节点，其相邻节点及相连边被排除 */
+  const { renderNodes, renderEdges } = useMemo(() => {
+    if (collapsed.size === 0) return { renderNodes: nodes, renderEdges: uniqueEdges };
+
+    // 需要隐藏的节点：所有"折叠部门节点的相邻节点"
+    const hidden = new Set<string>();
+    for (const depId of collapsed) {
+      for (const e of uniqueEdges) {
+        if (e.source === depId) hidden.add(e.target);
+        else if (e.target === depId) hidden.add(e.source);
+      }
+    }
+    // 部门节点本身始终显示，即使它被别的部门折叠
+    for (const id of departmentIds) hidden.delete(id);
+
+    const renderNodes = nodes.filter((n) => !hidden.has(n.id));
+    const renderEdges = uniqueEdges.filter(
+      (e) => !hidden.has(e.source) && !hidden.has(e.target)
+    );
+    return { renderNodes, renderEdges };
+  }, [nodes, uniqueEdges, collapsed, departmentIds]);
+
+  /**
+   * 锁定目标（数据刷新后节点可能被删/被折叠，这里做一次存在性校验，自动降级为"未锁定"）。
+   */
+  const locked = useMemo(
+    () => (lockedId && renderNodes.some((n) => n.id === lockedId) ? lockedId : null),
+    [lockedId, renderNodes]
+  );
+
+  /** 锁定节点的直接邻居（无向，和图上连线一致） */
+  const lockedNeighbors = useMemo(() => {
+    const s = new Set<string>();
+    if (!locked) return s;
+    for (const e of renderEdges) {
+      if (e.source === locked) s.add(e.target);
+      else if (e.target === locked) s.add(e.source);
+    }
+    return s;
+  }, [locked, renderEdges]);
+
+  /** 锁定节点名（提示文案用） */
+  const lockedLabel = useMemo(
+    () => renderNodes.find((n) => n.id === locked)?.label ?? '',
+    [locked, renderNodes]
+  );
+
+  /**
+   * 最大列的节点数 → 撑高图表。
+   * 一列 20 个节点时 560px 只够 25px/行，节点高 36px 必然互相压住；
+   * 保证每行至少 40px（height ≥ 节点数×40 + 上下边距）。
+   */
+  const maxColCount = useMemo(() => {
+    const layerOf = new Map(entities.map((e, i) => [e.id, e.layer ?? i] as const));
+    const counts = new Map<number, number>();
+    for (const n of renderNodes) {
+      const l = layerOf.get(n.entity) ?? 99;
+      counts.set(l, (counts.get(l) ?? 0) + 1);
+    }
+    return Math.max(0, ...counts.values());
+  }, [renderNodes, entities]);
+
+  /** 列数（分层布局用）：决定最小宽度 */
+  const layerCount = useMemo(() => {
+    const layerOf = new Map(entities.map((e, i) => [e.id, e.layer ?? i] as const));
+    const s = new Set<number>();
+    for (const n of renderNodes) s.add(layerOf.get(n.entity) ?? 99);
+    return Math.max(s.size, 1);
+  }, [renderNodes, entities]);
+
+  /**
+   * 最小图表宽度。
+   *
+   * 分层布局：节点是 104px 宽的方块，列间距至少 120px（104 + 16 间隙）。
+   *   画布不够宽时**不许把列挤到一起**（那会横向重叠），
+   *   而是把图表撑到最小宽度、外层出现横向滚动条 —— 图可以滚，不能糊。
+   *
+   * 力导布局：布局本身就是"按画布算坐标"，宽度变窄应该**重新铺一遍**，
+   *   而不是撑出一个 760px 的画布被外层裁掉。所以这里只留一个很低的兜底，
+   *   右侧详情面板展开时图会跟着收窄重排（以前是直接裁掉右半边）。
+   */
+  const MIN_COL_GAP = 120;
+  const minChartW =
+    mode === 'layered'
+      ? (layerCount - 1) * MIN_COL_GAP + NODE_W + GRID.left + GRID.right
+      : 360;
+  const chartW = Math.max(wrapW, minChartW);
+
+  /**
+   * 画布高度 —— 两种模式的算法必须分开，这里踩过坑：
+   *
+   *   分层布局：一列最多 maxColCount 个节点，每行至少 40px，否则节点纵向压在一起。
+   *
+   *   力导布局：**不能**跟着列数撑高。列数是分层布局的概念 —— 力导里"同一 layer"
+   *   的 20 个叶子根本不在同一列，照搬会把画布拉成 812×848 的竖条。
+   *   力导收敛出的是团状，在竖条里只能填满高度、横向留一大片空白，
+   *   看起来就是"一团竖着的毛球"（截图里的样子）。改成按**节点密度**定高：
+   *   每个节点至少留 FORCE_CELL 面积，不够就往下撑（外层有滚动条）。
+   */
+  const FORCE_CELL = (NODE_W + 40) * (NODE_H + 46);
+  const chartHeight =
+    mode === 'layered'
+      ? Math.max(height, maxColCount * 40 + GRID.top + GRID.bottom)
+      : Math.max(
+          height,
+          Math.min(
+            Math.ceil((renderNodes.length * FORCE_CELL) / Math.max(chartW, 1)),
+            // 上限 2.2 倍：再高就只是滚动了，不如让节点稍微挤一点
+            Math.round(height * 2.2)
+          )
+        );
+
+  /** canvas 不认 CSS 变量：ECharts 的颜色必须用当前皮肤的字面值 */
+  const ink = useSkinInk();
+
+  const option = useMemo(() => {
+    // 两种模式都是"算好坐标再画"：ECharts 只负责渲染，不负责跑模拟
+    const pos =
+      mode === 'layered'
+        ? layoutNodes(renderNodes, entities, chartW, chartHeight, renderEdges)
+        : forceLayout(renderNodes, renderEdges, chartW, chartHeight);
+    const entLabel = new Map(entities.map((e) => [e.id, e.label]));
+
+    /** 聚焦簇：节点集合 + 边集合（无向，source/target 反过来也算同一条） */
+    const focusNodes = focus?.nodes?.length ? new Set(focus.nodes) : null;
+    const focusEdgeKeys = focus?.edges?.length
+      ? new Set(focus.edges.flatMap((e) => [`${e.source}|${e.target}`, `${e.target}|${e.source}`]))
+      : null;
+    const curveness = mode === 'layered' ? 0.05 : 0.12;
+
+    /**
+     * 连线透明度按两端度数衰减（通用降噪，不看业务语义）：
+     *   审批人、共享分类这类枢纽动辄连着十几条边，全部同样清晰就会糊成一张网；
+     *   度数越高 → 线越淡，"谁归属谁"这种稀有边保持清晰，hover/锁定时再全部点亮。
+     */
+    const degMap = new Map<string, number>();
+    for (const e of renderEdges) {
+      degMap.set(e.source, (degMap.get(e.source) ?? 0) + 1);
+      degMap.set(e.target, (degMap.get(e.target) ?? 0) + 1);
+    }
+    const edgeOpacity = (s: string, t: string) =>
+      Math.max(0.22, Math.min(0.75, 1 / Math.sqrt(Math.max(degMap.get(s) ?? 1, degMap.get(t) ?? 1))));
+
+    return {
+      animationDuration: 400,
+      // 隐藏笛卡尔坐标系：坐标线性映射，不做"包围盒缩放铺满"（那会裁掉边缘节点）
+      xAxis: { type: 'value', min: 0, max: 100, show: false },
+      yAxis: { type: 'value', min: 0, max: 100, show: false },
+      grid: { left: GRID.left, right: GRID.right, top: GRID.top, bottom: GRID.bottom },
+      tooltip: {
+        confine: true,
+        backgroundColor: ink.card,
+        borderColor: ink.border,
+        textStyle: { color: ink.text, fontSize: 12 },
+        formatter: (p: unknown) => {
+          const d = (p as { dataType?: string; data?: Record<string, unknown> }).data;
+          if (!d) return '';
+          if (d.entity) {
+            const sub = d.subtitle
+              ? `<br/><span style="color:#86909c">${String(d.subtitle)}</span>`
+              : '';
+            const link = d.link
+              ? `<br/><a href="${String(d.link)}" style="color:${ink.primary}">打开详情 →</a>`
+              : '';
+            return `<b>${String(d.label ?? '')}</b><br/><span style="color:#86909c">${entLabel.get(String(d.entity)) ?? ''}</span>${sub}${link}`;
+          }
+          if (d.edgeLabel) return `关系：${String(d.edgeLabel)}`;
+          return '';
+        },
+      },
+      series: [
+        {
+          type: 'graph',
+          coordinateSystem: 'cartesian2d',
+          layout: 'none',
+          roam: true,
+          draggable: true,
+          /**
+           * 保存成功后的「闪一下」用 select 状态实现：
+           *   - 走 dispatchAction({type:'select'})，不重建 option（力导不会重排）
+           *   - emphasis 是悬停用的（focus:'adjacency' 会淡化其他节点），
+           *     拿它做"保存反馈"会一直保持，所以单开一个 select 样式
+           */
+          selectedMode: 'single',
+          select: {
+            itemStyle: {
+              borderColor: ink.primary,
+              borderWidth: 2.6,
+              shadowBlur: 16,
+              shadowColor: 'rgba(78,95,60,0.55)',
+            },
+            label: { fontWeight: 700, color: ink.text },
+          },
+          symbol: 'roundRect',
+          symbolSize: [104, 36],
+          label: {
+            show: true,
+            position: 'inside',
+            fontSize: 12,
+            fontWeight: 500,
+            // ★ 深色文字：节点填充是浅色，深字才看得清
+            color: '#1d2129',
+            overflow: 'truncate',
+            width: 96,
+          },
+          edgeSymbol: ['none', 'arrow'],
+          edgeSymbolSize: [0, 7],
+          lineStyle: {
+            color: ink.edge,
+            width: 1.1,
+            curveness: mode === 'layered' ? 0.05 : 0.12,
+            opacity: 0.9,
+          },
+          edgeLabel: {
+            fontSize: 10,
+            color: ink.text2,
+            backgroundColor: ink.card,
+            padding: [2, 4],
+            borderRadius: 3,
+            formatter: (p: unknown) =>
+              (p as { data?: { edgeLabel?: string } }).data?.edgeLabel ?? '',
+          },
+          emphasis: {
+            /**
+             * 锁定态自带领簇高亮，此时 hover 不该再 blur 别人 ——
+             * 否则鼠标扫过任何一个节点，锁定的那一簇会被一起压暗，看着像"锁没了"。
+             */
+            focus: locked ? 'none' : 'adjacency',
+            label: { fontSize: 12.5, fontWeight: 600, color: ink.text },
+            lineStyle: { width: 2.2, color: ink.primary, opacity: 1 },
+            edgeLabel: { show: !locked },
+          },
+          blur: {
+            itemStyle: { opacity: 0.22 },
+            label: { opacity: 0.22 },
+            lineStyle: { opacity: 0.1 },
+          },
+          data: renderNodes.map((n) => {
+            const p = pos.get(n.id);
+            // 部门节点显示下属数量：展开 `名称 (N)`，折叠 `名称 (+N)`
+            let name = n.label;
+            if (departmentIds.has(n.id)) {
+              const c = deptCounts.get(n.id) ?? 0;
+              name = collapsed.has(n.id) ? `${n.label} (+${c})` : `${n.label} (${c})`;
+            }
+            const inFocus = focusNodes ? focusNodes.has(n.id) : null;
+            /**
+             * 高亮来源有两个，取并集：
+             *   - 双击锁定：锁定节点 + 它的直接邻居；
+             *   - 业务聚焦（focus prop）：接口下发的一簇节点。
+             * 簇外节点压暗但不隐藏 —— 保留上下文，才知道这簇关联落在图上的哪一片。
+             */
+            const isLock = locked === n.id;
+            const isNear = locked ? lockedNeighbors.has(n.id) : false;
+            const hot = isLock || isNear || inFocus === true;
+            const dimmed = !hot && (locked !== null || inFocus !== null);
+            return {
+              id: n.id,
+              name,
+              // 笛卡尔坐标系用 value: [x, y]（0~100 轴坐标）
+              value: p ? [p.x, p.y] : undefined,
+              entity: n.entity,
+              subtitle: n.subtitle,
+              link: n.link,
+              itemStyle: {
+                color: n.color || '#f2f3f5',
+                borderColor: hot ? ink.primary : n.borderColor || ink.border,
+                borderWidth: isLock ? 2.8 : hot ? 2.2 : 1.2,
+                opacity: dimmed ? 0.2 : 1,
+                shadowBlur: isLock ? 14 : hot ? 9 : 4,
+                shadowColor: isLock
+                  ? 'rgba(78,95,60,0.45)'
+                  : hot
+                    ? 'rgba(78,95,60,0.3)'
+                    : 'rgba(0,0,0,0.06)',
+              },
+              label: dimmed
+                ? { color: '#9AA08E', opacity: 0.6 }
+                : isLock
+                  ? { fontWeight: 700 }
+                  : isNear
+                    ? { fontWeight: 600 }
+                    : undefined,
+            };
+          }),
+          links: renderEdges
+            .filter(
+              (e) =>
+                renderNodes.some((n) => n.id === e.source) &&
+                renderNodes.some((n) => n.id === e.target)
+            )
+            .map((e) => {
+              const on = focusEdgeKeys
+                ? focusEdgeKeys.has(`${e.source}|${e.target}`)
+                : false;
+              // 锁定态只高亮"从锁定节点射出去"的边，邻居之间的横线保持压暗
+              const touchLock = locked !== null && (e.source === locked || e.target === locked);
+              const hotEdge = touchLock || on;
+              const anyHighlight = locked !== null || focusEdgeKeys !== null;
+              return {
+                source: e.source,
+                target: e.target,
+                edgeLabel: e.label,
+                // 高亮时：簇外的线几乎透明，簇内的线加粗成主色并直接显示关系名
+                lineStyle: anyHighlight
+                  ? hotEdge
+                    ? { width: touchLock ? 2.4 : 2.6, color: ink.primary, opacity: 1, curveness }
+                    : { width: 1, opacity: 0.07, curveness }
+                  : { opacity: edgeOpacity(e.source, e.target), curveness },
+                label: hotEdge
+                  ? {
+                      show: true,
+                      formatter: () => e.label,
+                      fontSize: 10,
+                      color: ink.primaryDark,
+                      backgroundColor: ink.card,
+                      padding: [2, 4],
+                      borderRadius: 3,
+                    }
+                  : undefined,
+              };
+            }),
+        },
+      ],
+    };
+  }, [
+    renderNodes,
+    renderEdges,
+    entities,
+    mode,
+    departmentIds,
+    deptCounts,
+    collapsed,
+    focus,
+    locked,
+    lockedNeighbors,
+    // 坐标是按画布实际尺寸算的，尺寸变了必须重算（否则窄屏下所有节点挤在左上角）
+    chartW,
+    chartHeight,
+    // 换皮肤要换 canvas 颜色（ink 是字面色），必须重算 option
+    ink,
+  ]);
+
+  /**
+   * 选中节点的高亮：走 dispatchAction，而不是把 activeId 塞进 option。
+   * 力导布局下 setOption 会重跑模拟，节点会"跑掉"，选中体验极差。
+   *
+   * locked 进依赖是因为锁定会重建 option（样式换一套），重建后这层高亮会被清掉，
+   * 需要按当前 activeId 再打一次。锁定期间则不打 —— 那个高亮是鼠标态，和锁定态叠加会互相打架。
+   */
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    chart.dispatchAction({ type: 'downplay', seriesIndex: 0 });
+    if (!activeId || locked) return;
+    const idx = renderNodes.findIndex((n) => n.id === activeId);
+    if (idx >= 0) chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+  }, [activeId, renderNodes, locked]);
+
+  /**
+   * 「保存成功 → 节点闪几下」。
+   *
+   * 为什么要闪：保存后图会重新拉取、节点也会重排，用户很难一眼找到刚改的那个。
+   * 这里用 select 状态做 2 次脉冲，最后保持选中约 3 秒再解除 ——
+   * 整个过程只 dispatchAction，不改 option，所以力导布局不会重跑。
+   */
+  const flashedRef = useRef<string>('');
+  useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart || !flash) return;
+    const key = `${flash.id}|${flash.nonce}`;
+    if (flashedRef.current === key) return;
+    const idx = renderNodes.findIndex((n) => n.id === flash.id);
+    if (idx < 0) return;
+    flashedRef.current = key;
+
+    let dead = false;
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    const set = (on: boolean) =>
+      chart.dispatchAction({
+        type: on ? 'select' : 'unselect',
+        seriesIndex: 0,
+        dataIndex: idx,
+      });
+    const at = (ms: number, on: boolean) =>
+      timers.push(
+        setTimeout(() => {
+          if (!dead) set(on);
+        }, ms)
+      );
+
+    // 60ms：等 setOption 把新数据渲染完（reload 后 option 会整体替换，选中态会被重置）
+    at(60, true);
+    at(620, false);
+    at(900, true);
+    at(1460, false);
+    at(1740, true);
+    at(4200, false);
+
+    return () => {
+      dead = true;
+      timers.forEach(clearTimeout);
+    };
+  }, [flash, renderNodes]);
+
+  const handleClick = (params: unknown) => {
+    const p = params as { dataType?: string; data?: { id?: string } };
+    if (p.dataType !== 'node' || !p.data?.id) return;
+    const n = nodes.find((x) => x.id === p.data!.id);
+    // 点击统一是"选中"：部门节点也要能打开右侧面板（否则永远改不了/删不掉）
+    if (n) onNodeClick?.(n);
+  };
+
+  /**
+   * 双击节点 → 锁定「该节点 + 它的直接邻居」。
+   *
+   * 这里**不再**调 onNodeClick：双击之前浏览器已经派发过两次 click，
+   * 右侧面板早打开了，再调一次只是多打一遍详情接口。
+   * 再双击同一个节点视为解锁（省得非要去点空白）。
+   */
+  const handleDblClick = (params: unknown) => {
+    const p = params as { dataType?: string; data?: { id?: string } };
+    if (p.dataType !== 'node' || !p.data?.id) return;
+    const id = p.data.id;
+    setLockedId((cur) => (cur === id ? null : id));
+  };
+
+  /**
+   * 空白处双击 → 解锁。
+   *
+   * series 事件只对**图形元素**触发，点空白时 ECharts 根本不派发 click/dblclick，
+   * 所以必须挂到 zrender 那一层：`target` 为空就说明点在空白处。
+   */
+  const handleBlankDblClick = useCallback((e: unknown) => {
+    if ((e as { target?: unknown }).target) return; // 点在节点/边/标签上，交给 series 事件
+    setLockedId(null);
+  }, []);
+
+  // 锁定期间 Esc 也能解锁：双击空白不好找的时候有个后路
+  useEffect(() => {
+    if (!lockedId) return;
+    const onKey = (ev: KeyboardEvent) => {
+      if (ev.key === 'Escape') setLockedId(null);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [lockedId]);
+
+  /** 图表实例就绪/销毁：把 zrender 层的空白双击挂上 / 摘掉 */
+  const handleChart = useCallback(
+    (c: ChartLike | null) => {
+      const prev = chartRef.current;
+      // ★ 必须判空：实例 dispose 之后 getZr() 会返回 null
+      //   （直接 prev.getZr().off() 会抛 "Cannot read properties of null (reading 'off')"，
+      //    整个页面白屏，而且只在切换视图/重挂载时才复现）
+      const prevZr = prev?.getZr?.();
+      if (prevZr) prevZr.off('dblclick', handleBlankDblClick);
+      chartRef.current = c;
+      const nextZr = c?.getZr?.();
+      if (nextZr) nextZr.on('dblclick', handleBlankDblClick);
+    },
+    [handleBlankDblClick]
+  );
+
+  if (!nodes.length && !loading) {
+    return (
+      <Empty
+        description="没有图数据。请先在 src/lib/ontology.ts 里配好本体和关系，并补充演示数据。"
+        style={{ padding: 60 }}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          marginBottom: 8,
+          flexWrap: 'wrap',
+        }}
+      >
+        <Segmented
+          size="small"
+          value={mode}
+          onChange={(v) => setMode(v as 'layered' | 'force')}
+          options={[
+            { label: '分层布局', value: 'layered' },
+            { label: '力导布局', value: 'force' },
+          ]}
+        />
+        <Typography.Text type="secondary" style={{ fontSize: fs(12) }}>
+          {renderNodes.length} 个节点 · {renderEdges.length} 条关系
+          {focus?.nodes?.length ? ` · 已聚焦 ${focus.nodes.length} 个关联实体` : ''}
+          {locked ? (
+            <span style={{ color: MILITARY.primary, fontWeight: 600 }}>
+              {' · '}已锁定「{lockedLabel}」· 双击空白处或按 Esc 解锁
+            </span>
+          ) : (
+            ' · 双击节点锁定关联高亮 · 悬停查看详情 · 点击节点可编辑'
+          )}
+        </Typography.Text>
+        <span style={{ flex: 1 }} />
+        <Space size={6} wrap>
+          {entities.map((e) => (
+            <Tooltip
+              key={e.id}
+              title={`${e.label}（${nodes.filter((n) => n.entity === e.id).length} 个）`}
+            >
+              <span
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  fontSize: fs(12),
+                  color: '#1d2129',
+                  padding: '1px 8px',
+                  borderRadius: 10,
+                  border: '1px solid #e5e6eb',
+                  background: e.color,
+                }}
+              >
+                {e.label}
+              </span>
+            </Tooltip>
+          ))}
+        </Space>
+      </div>
+
+      <div
+        ref={wrapRef}
+        style={{
+          overflowX: 'auto',
+          border: `1px solid ${MILITARY.borderSoft}`,
+          borderRadius: 10,
+          background: MILITARY.paper,
+        }}
+      >
+        {/* 内层定宽：窄屏时图表保持最小宽度，由外层滚动，而不是把列挤变形 */}
+        <div style={{ width: chartW }}>
+          <EChart
+            option={option}
+            height={chartHeight}
+            loading={loading}
+            // 双击锁定：单击仍是"打开详情"，双击额外把这一簇钉住
+            onEvents={{ click: handleClick, dblclick: handleDblClick }}
+            onChart={handleChart}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}