node-resource-utils 0.0.0-stage → 1.1.7

package/resources/src/app/(admin)/graph/page.tsx

@@ -0,0 +1,1224 @@
+'use client';
+
+import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import {
+  Alert, App, Button, Card, Col, Collapse, DatePicker, Divider, Empty, Form,
+  Input, InputNumber, Row, Select, Space, Spin, Switch, Tag, Typography,
+} from 'antd';
+import {
+  ApartmentOutlined, DeleteOutlined, DisconnectOutlined, PlusOutlined, ReloadOutlined,
+  SaveOutlined, UndoOutlined,
+} from '@ant-design/icons';
+import dayjs, { type Dayjs } from 'dayjs';
+import OntologyGraph from '@/components/OntologyGraph';
+import { fs, MILITARY } from '@/lib/theme';
+
+/**
+ * 知识图谱页 —— 带编辑能力（图谱操作直接落库）。
+ *
+ * ★ 差异化亮点：不只"画出来"，还能"改进去"。
+ *
+ * 三个设计要点（都是踩过的坑）：
+ *   1. 分层布局而不是力导：力导会把节点撒成一盘沙，看不出结构。
+ *   2. 浅色底 + 深色字：深色底会让节点文字完全读不出来。
+ *   3. 边标签只在悬停/选中时显示：几十条边都挂标签会糊成一片。
+ *
+ * ★ 视图与字段都不在这里写死（曾经写死过，踩过坑）：
+ *   以前这里有一行 const VIEW = 'org'，页面永远请求 view=org。
+ *   换成请销假本体（views[0].id = 'leave'）后，页面立刻报
+ *   「图谱视图 org 不存在。可用视图：leave」，整页只剩红色错误横幅。
+ *   现在改为：首次请求不传 view，由服务端取 ontology.views[0]；
+ *   返回把 views 渲染成下拉；节点标题字段也用服务端下发的 titleField。
+ *
+ * ★ 详情面板 = schema 驱动的表单（2026-10 改造）：
+ *   以前只有「名称」一个输入框，类型 / 附加 / 状态 / 职位 / 备注 全是只读文本。
+ *   现在字段列表由 /api/graph/node?detail=1 下发（服务端从 schema.prisma 反推）：
+ *     text → Input，长文本 → TextArea，数字 → InputNumber，
+ *     布尔 → Switch，日期 → DatePicker，枚举 → Select，外键 → 可搜索 Select。
+ *   换句话说：**图上/提示里给人看的字段，都能在这里改**，保存即写库。
+ *   保存成功后重新拉图，并让刚改的节点在图里闪几秒（见 OntologyGraph 的 flash）。
+ */
+
+interface GNode {
+  /** 图内唯一键 `entity:dbId`（边靠它连节点） */
+  id: string;
+  /** 数据库主键，写操作用它；老接口可能没返回，兜底从 id 里截 */
+  dbId?: string;
+  label: string;
+  entity: string;
+  color: string;
+  borderColor?: string;
+  subtitle: string;
+  link?: string;
+}
+interface GEdge {
+  source: string;
+  target: string;
+  label: string;
+  relation: string;
+}
+interface DeleteImpact {
+  entity: string;
+  model: string;
+  title: string;
+  soft: boolean;
+  actions: { kind: 'delete' | 'nullify'; model: string; label: string; field: string; count: number }[];
+  deleteCount: number;
+  nullifyCount: number;
+}
+
+type FieldKind = 'text' | 'longtext' | 'number' | 'boolean' | 'datetime' | 'enum' | 'fk';
+
+interface FieldOption {
+  label: string;
+  value: string | number;
+}
+
+interface FieldMeta {
+  name: string;
+  label: string;
+  kind: FieldKind;
+  prismaType: string;
+  required: boolean;
+  nullable: boolean;
+  unique: boolean;
+  primary?: boolean;
+  options?: FieldOption[];
+  refModel?: string;
+  hint?: string;
+}
+
+interface NodeDetail {
+  entity: { id: string; label: string; model: string; titleField: string; subtitleFields: string[] };
+  /** 「类型」下拉的候选（ontology 里的全部本体） */
+  entities: { id: string; label: string; model: string }[];
+  fields: FieldMeta[];
+  values: Record<string, unknown>;
+  refs: Record<string, FieldOption[]>;
+  title: string;
+}
+
+/** 二次确认里展示"会影响什么" */
+function ImpactList({ impact }: { impact: DeleteImpact }) {
+  if (impact.soft) {
+    return (
+      <div style={{ fontSize: fs(13), color: MILITARY.textSecondary }}>
+        该模型采用软删除：记录保留用于审计，图谱中不再显示，不会改动其他数据。
+      </div>
+    );
+  }
+  if (!impact.actions.length) {
+    return (
+      <div style={{ fontSize: fs(13), color: MILITARY.textSecondary }}>
+        没有其他数据引用它，可以直接删除。
+      </div>
+    );
+  }
+  return (
+    <div style={{ fontSize: fs(13) }}>
+      <div style={{ color: MILITARY.error, marginBottom: 8 }}>以下数据会被一并处理，且不可撤销：</div>
+      <ul style={{ margin: 0, paddingLeft: 18, lineHeight: 1.9 }}>
+        {impact.actions.map((a) => (
+          <li key={`${a.kind}-${a.model}-${a.field}`}>
+            {a.kind === 'delete' ? (
+              <>
+                删除 <b>{a.label}</b> {a.count} 条（必填外键，无法保留）
+              </>
+            ) : (
+              <>
+                把 <b>{a.label}.{a.field}</b> 置空 {a.count} 条（解除关联，数据保留）
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+interface GraphData {
+  view: { id: string; label: string };
+  /** 服务端下发的可选视图（ontology.views），前端不硬编码 */
+  views: { label: string; value: string }[];
+  nodes: GNode[];
+  edges: GEdge[];
+  truncated: boolean;
+  entities: { id: string; label: string; color: string; layer?: number; titleField: string }[];
+}
+
+/**
+ * 业务记录 → 图谱关联（/api/graph/focus 的返回）。
+ *
+ * /graph?src=FitnessRecord:clx123 就是靠它定位的：
+ *   mode=single → 只有一个节点，直接打开右侧详情面板；
+ *   mode=multi  → 一簇节点，跳转后高亮簇内连线。
+ */
+interface FocusInfo {
+  source: { model: string; dbId: string };
+  entity: { id: string; label: string };
+  title: string;
+  view: { id: string; label: string };
+  mode: 'single' | 'multi';
+  center: string;
+  nodes: {
+    id: string;
+    dbId: string;
+    entity: string;
+    entityLabel: string;
+    label: string;
+    subtitle: string;
+    role: string;
+  }[];
+  edges: { source: string; target: string; label: string; relation: string }[];
+  summary: string;
+  backLink: string | null;
+  url: string;
+}
+
+/* ------------------------- 表单值 ↔ 接口值 的转换 ------------------------- */
+
+/** 表单里的值（日期是 dayjs）→ 可以放进 JSON 的值 */
+function serialize(field: FieldMeta, v: unknown): unknown {
+  if (v === undefined || v === null || v === '') {
+    return field.kind === 'text' || field.kind === 'longtext' ? (v ?? null) : null;
+  }
+  switch (field.kind) {
+    case 'datetime': {
+      const d = dayjs.isDayjs(v) ? (v as Dayjs) : dayjs(String(v));
+      return d.isValid() ? d.toISOString() : null;
+    }
+    case 'number':
+      return typeof v === 'number' ? v : Number(v);
+    case 'boolean':
+      return Boolean(v);
+    default:
+      return v;
+  }
+}
+
+function sameValue(a: unknown, b: unknown) {
+  const na = a === undefined ? null : a;
+  const nb = b === undefined ? null : b;
+  if (na === null || nb === null) return na === nb;
+  return String(na) === String(nb);
+}
+
+/** 详情 → 表单初值 */
+function toFormValues(detail: NodeDetail): Record<string, unknown> {
+  const out: Record<string, unknown> = { __entity: detail.entity.id };
+  for (const f of detail.fields) {
+    const v = detail.values[f.name];
+    out[f.name] =
+      f.kind === 'datetime'
+        ? v
+          ? dayjs(String(v))
+          : null
+        : f.kind === 'boolean'
+          ? Boolean(v)
+          : (v ?? undefined);
+  }
+  return out;
+}
+
+/** 只取"有值"的字段：迁移本体时不要用空值覆盖目标表的继承值 */
+function nonEmptyPayload(detail: NodeDetail, raw: Record<string, unknown>) {
+  const out: Record<string, unknown> = {};
+  for (const f of detail.fields) {
+    const v = raw[f.name];
+    if (v === undefined || v === null) continue;
+    if (typeof v === 'string' && v.trim() === '') continue;
+    out[f.name] = serialize(f, v);
+  }
+  return out;
+}
+
+/** 和加载时的值比对，只提交真正改过的字段（审计日志才不会一片噪声） */
+function diffPayload(detail: NodeDetail, raw: Record<string, unknown>) {
+  const out: Record<string, unknown> = {};
+  for (const f of detail.fields) {
+    const now = serialize(f, raw[f.name]);
+    const before = serialize(f, detail.values[f.name]);
+    if (!sameValue(now, before)) out[f.name] = now;
+  }
+  return out;
+}
+
+function GraphPageInner() {
+  const { message, modal } = App.useApp();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  /** /graph?src=<模型名>:<记录id> —— 业务列表「关联」按钮带过来的定位参数 */
+  const srcParam = searchParams.get('src') ?? '';
+  const [data, setData] = useState<GraphData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [viewId, setViewId] = useState<string | null>(null);
+  const [active, setActive] = useState<GNode | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [form] = Form.useForm();
+  const [adding, setAdding] = useState(false);
+  /** 新增节点后定位到它（服务端 center 参数，格式 entity:dbId） */
+  const [centered, setCentered] = useState<string | null>(null);
+  /** 已折叠的部门节点：点击节点是"选中"，折叠由右侧面板的按钮控制 */
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+
+  /** 关联聚焦：从业务列表跳进来时高亮的那一簇实体 */
+  const [focusInfo, setFocusInfo] = useState<FocusInfo | null>(null);
+  const [focusLoading, setFocusLoading] = useState(false);
+  const [focusErr, setFocusErr] = useState<string | null>(null);
+  const appliedSrc = useRef('');
+
+  /** 节点详情（字段元数据 + 当前值） */
+  const [detail, setDetail] = useState<NodeDetail | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [detailErr, setDetailErr] = useState<string | null>(null);
+  /** 保存后自增，强制重新拉一次详情（节点还在，只是值变了） */
+  const [detailNonce, setDetailNonce] = useState(0);
+  /** 保存成功 → 图上闪几秒 */
+  const [flash, setFlash] = useState<{ id: string; nonce: number } | null>(null);
+  const [savedAt, setSavedAt] = useState<string | null>(null);
+  /** 「更多字段」是否展开（受控：换节点时收起，切类型时自动展开） */
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  const load = useCallback(async (view?: string, center?: string, depth = 2) => {
+    setLoading(true);
+    setErr(null);
+    try {
+      // 不传 view 时服务端自动用 ontology.views[0] —— 换业务本体后页面仍然能开
+      const qs = new URLSearchParams({ depth: String(depth) });
+      if (view) qs.set('view', view);
+      if (center) qs.set('center', center);
+      const r = await fetch(`/api/graph?${qs.toString()}`);
+      const j = (await r.json()) as { code: number; data?: GraphData; message?: string };
+      // 注意：脚手架 ok() 的成功码是 0，不是 200
+      if (j.code === 0 && j.data) {
+        setData(j.data);
+        setViewId(j.data.view.id);
+        setCentered(center ?? null);
+        return j.data;
+      }
+      setErr(j.message || '加载失败');
+      return null;
+    } catch (e) {
+      setErr(String(e));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // 带 src 参数时交给下面的「关联聚焦」effect 拉图 —— 否则会先画一遍全图再跳到局部
+    if (srcParam) return;
+    void load();
+  }, [load, srcParam]);
+
+  /**
+   * 关联聚焦：把 `模型名:记录id` 交给服务端推导成图谱里的一簇实体。
+   *
+   * 位置逻辑全在服务端（src/lib/graph-focus.ts）：
+   *   单一实体 → 只给 center，页面接着打开节点详情；
+   *   多个实体 → 给 center + 节点/边集合，图里高亮这一簇、压暗其余。
+   */
+  useEffect(() => {
+    if (!srcParam) {
+      if (appliedSrc.current) {
+        appliedSrc.current = '';
+        setFocusInfo(null);
+        setFocusErr(null);
+      }
+      return;
+    }
+    if (appliedSrc.current === srcParam) return;
+    appliedSrc.current = srcParam;
+
+    let dead = false;
+    setFocusLoading(true);
+    setFocusErr(null);
+    void (async () => {
+      try {
+        const r = await fetch(`/api/graph/focus?src=${encodeURIComponent(srcParam)}`);
+        const j = (await r.json()) as { code: number; message?: string; data?: FocusInfo };
+        if (dead) return;
+        if (j.code !== 0 || !j.data) {
+          setFocusErr(j.message || '关联解析失败');
+          return;
+        }
+        const info = j.data;
+        setFocusInfo(info);
+        // 单实体：只画这一个节点（展开反向关系会得到几十条记录，扇成一团反而看不清）；
+        // 多实体：center + depth=2 带上上下文，再由 focus 高亮这一簇。
+        const fresh = await load(info.view.id, info.center, info.mode === 'single' ? 0 : 2);
+        if (dead) return;
+        if (info.mode === 'single') {
+          const n = fresh?.nodes.find((x) => x.id === info.center);
+          if (n) setActive(n);
+        } else {
+          setActive(null);
+        }
+      } catch (e) {
+        if (!dead) setFocusErr(String(e));
+      } finally {
+        if (!dead) setFocusLoading(false);
+      }
+    })();
+    return () => {
+      dead = true;
+    };
+  }, [srcParam, load]);
+
+  /** 退出聚焦：回到整张视图 */
+  const clearFocus = useCallback(() => {
+    appliedSrc.current = '';
+    setFocusInfo(null);
+    setFocusErr(null);
+    setActive(null);
+    router.replace('/graph');
+    void load(viewId ?? undefined);
+  }, [router, load, viewId]);
+
+  /* --------------------------- 详情加载 --------------------------- */
+
+  const fetchDetail = useCallback(
+    async (entity: string, id?: string): Promise<NodeDetail | null> => {
+      const qs = new URLSearchParams({ entity });
+      if (id) {
+        qs.set('id', id);
+        qs.set('detail', '1');
+      } else {
+        qs.set('meta', '1');
+      }
+      const r = await fetch(`/api/graph/node?${qs.toString()}`);
+      const j = (await r.json()) as { code: number; data?: NodeDetail; message?: string };
+      if (j.code === 0 && j.data) return j.data;
+      throw new Error(j.message || '加载节点详情失败');
+    },
+    []
+  );
+
+  const activeKey = active?.id ?? null;
+
+  useEffect(() => {
+    if (!active) {
+      setDetail(null);
+      setDetailErr(null);
+      return;
+    }
+    let dead = false;
+    setDetailLoading(true);
+    setDetailErr(null);
+    const nid = active.dbId ?? (active.id.includes(':') ? active.id.slice(active.id.indexOf(':') + 1) : active.id);
+    fetchDetail(active.entity, nid)
+      .then((d) => {
+        if (!dead) setDetail(d);
+      })
+      .catch((e: unknown) => {
+        if (!dead) {
+          setDetail(null);
+          setDetailErr(e instanceof Error ? e.message : String(e));
+        }
+      })
+      .finally(() => {
+        if (!dead) setDetailLoading(false);
+      });
+    return () => {
+      dead = true;
+    };
+    // activeKey 变化（换节点）或 detailNonce 变化（保存后刷新）都要重拉
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeKey, detailNonce, fetchDetail]);
+
+  /** 详情变化 → 重建表单（setFieldsValue 要和 Form.Item 的挂载同步，交给 effect 最稳） */
+  useEffect(() => {
+    // ⚠️ detail 为空时**不要**碰 form：那时面板没渲染，Form 实例处于"未连接"状态，
+    //    resetFields 会在控制台刷 "Instance created by useForm is not connected to any Form element"。
+    if (!detail) return;
+    form.resetFields();
+    form.setFieldsValue(toFormValues(detail));
+  }, [detail, form]);
+
+  /** 本体 → 标题字段由服务端下发（曾经在这里维护 TITLE_FIELD 映射，换本体就漏） */
+  const titleFieldOf = (entity: string) =>
+    data?.entities.find((e) => e.id === entity)?.titleField;
+
+  /**
+   * 数据库主键。
+   * ⚠️ 节点的 id 是 `entity:dbId`（图内唯一键，ECharts 的边靠它连），
+   *    直接拿它去调 PATCH/DELETE 会 findUnique 不到 → 全部 404
+   *    （"保存失败 / 删除失败"就是这么来的）。写操作必须用 dbId。
+   */
+  const dbIdOf = (n: GNode) =>
+    n.dbId ?? (n.id.includes(':') ? n.id.slice(n.id.indexOf(':') + 1) : n.id);
+
+  /** 保存后统一收尾：重新拉图 → 关掉/更新选中 → 触发高亮 */
+  const refreshAfterSave = async (entityId: string, nodeId: string, center?: string) => {
+    const key = `${entityId}:${nodeId}`;
+    const fresh = await load(viewId ?? undefined, center ?? centered ?? undefined);
+    const node = fresh?.nodes.find((n) => n.id === key) ?? null;
+    if (node) setActive(node);
+    setFlash({ id: key, nonce: Date.now() });
+    setSavedAt(dayjs().format('HH:mm:ss'));
+    setDetailNonce((n) => n + 1);
+  };
+
+  /* --------------------------- 保存 --------------------------- */
+
+  const save = async () => {
+    if (!active || !detail) return;
+    const raw = form.getFieldsValue(true) as Record<string, unknown>;
+    const targetEntity = detail.entity.id;
+
+    // 类型变了 = 换表，这不是一次 update，必须先让用户看清代价
+    if (targetEntity !== active.entity) {
+      await confirmMove(raw);
+      return;
+    }
+
+    const payload = diffPayload(detail, raw);
+    if (!Object.keys(payload).length) {
+      message.info('没有检测到改动');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const r = await fetch('/api/graph/node', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entity: active.entity, id: dbIdOf(active), data: payload }),
+      });
+      const j = (await r.json()) as { code: number; message?: string; data?: { changed?: string[] } };
+      if (j.code === 0) {
+        const n = j.data?.changed?.length ?? 0;
+        message.success(`已保存到数据库（${n} 个字段）`);
+        await refreshAfterSave(active.entity, dbIdOf(active));
+      } else {
+        message.error(j.message || '保存失败');
+      }
+    } catch (e) {
+      message.error(`保存失败：${String(e)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /**
+   * 变更节点类型。
+   * 服务端会：目标本体建一条新记录（同名字段自动继承）→ 清掉旧记录。
+   * 清旧记录时可选外键会被置空、必填外键会连带删除依赖行，
+   * 所以这里复用"删除影响预览"接口，先把代价摆给用户看。
+   */
+  const confirmMove = async (raw: Record<string, unknown>) => {
+    if (!active || !detail) return;
+    const entity = active.entity;
+    const id = dbIdOf(active);
+    const target = detail.entity;
+    const payload = nonEmptyPayload(detail, raw);
+
+    let impact: DeleteImpact | null = null;
+    try {
+      const r = await fetch(
+        `/api/graph/node?entity=${encodeURIComponent(entity)}&id=${encodeURIComponent(id)}`
+      );
+      const j = (await r.json()) as { code: number; data?: DeleteImpact };
+      if (j.code === 0 && j.data) impact = j.data;
+    } catch {
+      // 拿不到影响就退化成纯文字确认，不阻塞流程
+    }
+
+    modal.confirm({
+      title: `把「${active.label}」变更为「${target.label}」？`,
+      width: 520,
+      okText: '迁移并保存',
+      cancelText: '取消',
+      content: (
+        <div>
+          <div style={{ fontSize: fs(13), marginBottom: 10, color: MILITARY.textSecondary }}>
+            节点类型对应的是数据库里的一张表，所以这不是改字段，而是
+            <b>在「{target.label}」里新建一条记录、再删掉原来那条</b>。
+            同名字段会自动带过去，目标本体的必填字段先用占位值补齐，保存后可继续在这里完善。
+          </div>
+          {impact && <ImpactList impact={impact} />}
+        </div>
+      ),
+      onOk: async () => {
+        setSaving(true);
+        try {
+          const r = await fetch('/api/graph/node/move', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fromEntity: entity, id, toEntity: target.id, data: payload }),
+          });
+          const j = (await r.json()) as {
+            code: number;
+            message?: string;
+            data?: { id: string; entity: string };
+          };
+          if (j.code === 0 && j.data) {
+            message.success(`已变更为「${target.label}」`);
+            // 新节点可能落在当前视图之外，用 center 定位过去，避免"改完找不到了"
+            await refreshAfterSave(j.data.entity, j.data.id, `${j.data.entity}:${j.data.id}`);
+          } else {
+            message.error(j.message || '变更类型失败');
+          }
+        } catch (e) {
+          message.error(`变更类型失败：${String(e)}`);
+        } finally {
+          setSaving(false);
+        }
+      },
+    });
+  };
+
+  /** 切换"类型"下拉 → 换成目标本体的字段表，并把同名且有值的输入带过去 */
+  const onEntityChange = async (next: string) => {
+    if (!detail || !active) return;
+    const raw = form.getFieldsValue(true) as Record<string, unknown>;
+    try {
+      // 切回原类型时不能再拿"空表单"当字段表 —— 直接把真实值重新拉一遍，
+      // 否则用户会看到一堆本该有值的字段变成空白。
+      const backToSelf = next === active.entity;
+      const meta = await fetchDetail(next, backToSelf ? dbIdOf(active) : undefined);
+      if (!meta) return;
+      if (backToSelf) {
+        setDetail(meta);
+        return;
+      }
+      const carry: Record<string, unknown> = {};
+      for (const f of meta.fields) {
+        // 唯一列（编码/账号）不继承：两个表各自唯一，复制过去十有八九撞约束
+        if (f.unique) continue;
+        const v = raw[f.name];
+        if (v === undefined || v === null) continue;
+        if (typeof v === 'string' && v.trim() === '') continue;
+        carry[f.name] = v;
+      }
+      setDetail({ ...meta, values: carry });
+    } catch (e) {
+      message.error(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const doRemove = async () => {
+    if (!active) return;
+    setSaving(true);
+    try {
+      const r = await fetch('/api/graph/node', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entity: active.entity, id: dbIdOf(active) }),
+      });
+      const j = (await r.json()) as {
+        code: number;
+        message?: string;
+        data?: { deleted?: number; nullified?: number; soft?: boolean };
+      };
+      if (j.code === 0) {
+        const d = j.data ?? {};
+        message.success(
+          d.soft
+            ? '已删除（软删，记录保留用于审计）'
+            : `已删除，连带清理 ${d.deleted ?? 1} 条、置空 ${d.nullified ?? 0} 处引用`
+        );
+        setActive(null);
+        setFlash(null);
+        setSavedAt(null);
+        await load(viewId ?? undefined);
+      } else {
+        message.error(j.message || '删除失败');
+      }
+    } catch (e) {
+      message.error(`删除失败：${String(e)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /**
+   * 删除前先问服务端"会影响什么"，再用 Modal 二次确认。
+   * 删除会连带改数据（可选外键置空、必填外键删除），这一步是给用户看清代价。
+   */
+  const confirmRemove = async () => {
+    if (!active) return;
+    const entity = active.entity;
+    const id = dbIdOf(active);
+    try {
+      const r = await fetch(`/api/graph/node?entity=${encodeURIComponent(entity)}&id=${encodeURIComponent(id)}`);
+      const j = (await r.json()) as { code: number; message?: string; data?: DeleteImpact };
+      if (j.code !== 0 || !j.data) {
+        message.error(j.message || '无法获取删除影响');
+        return;
+      }
+      const impact = j.data;
+      modal.confirm({
+        title: `确认删除「${impact.title}」？`,
+        width: 480,
+        okText: '确认删除',
+        okButtonProps: { danger: true },
+        cancelText: '取消',
+        content: <ImpactList impact={impact} />,
+        onOk: () => doRemove(),
+      });
+    } catch (e) {
+      message.error(`无法获取删除影响：${String(e)}`);
+    }
+  };
+
+  const addNode = async (values: Record<string, string>) => {
+    const entity = values.entity;
+    const titleField = titleFieldOf(entity);
+    const payload: Record<string, unknown> = {};
+    if (titleField && values.label) payload[titleField] = values.label;
+
+    setSaving(true);
+    try {
+      const r = await fetch('/api/graph/node', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ entity, data: payload }),
+      });
+      const j = (await r.json()) as { code: number; message?: string; data?: { id?: string } };
+      if (j.code === 0) {
+        const newId = j.data?.id;
+        message.success('已新增节点，可在右侧补全其余字段');
+        setAdding(false);
+        // 新节点通常没有关联，默认视图可能取不到它 —— 用 center 定位过去
+        const key = newId ? `${entity}:${newId}` : undefined;
+        const fresh = await load(viewId ?? undefined, key);
+        const node = key ? fresh?.nodes.find((n) => n.id === key) : undefined;
+        if (node) {
+          setActive(node);
+          setFlash({ id: node.id, nonce: Date.now() });
+        }
+      } else {
+        message.error(j.message || '新增失败');
+      }
+    } catch (e) {
+      message.error(`新增失败：${String(e)}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /* --------------------------- 字段控件 --------------------------- */
+
+  const renderField = (f: FieldMeta) => {
+    let control: React.ReactNode;
+    switch (f.kind) {
+      case 'longtext':
+        control = (
+          <Input.TextArea
+            rows={3}
+            maxLength={500}
+            placeholder={f.hint || `请输入${f.label}`}
+            style={{ fontSize: fs(13) }}
+          />
+        );
+        break;
+      case 'number':
+        control = <InputNumber style={{ width: '100%' }} placeholder={f.hint || '数字'} />;
+        break;
+      case 'boolean':
+        control = <Switch checkedChildren="是" unCheckedChildren="否" />;
+        break;
+      case 'datetime':
+        control = (
+          <DatePicker
+            style={{ width: '100%' }}
+            showTime={{ format: 'HH:mm' }}
+            format="YYYY-MM-DD HH:mm"
+            placeholder={f.hint || '选择时间'}
+          />
+        );
+        break;
+      case 'enum':
+        control = (
+          <Select
+            allowClear={f.nullable}
+            placeholder={f.hint || `选择${f.label}`}
+            options={(f.options ?? []).map((o) => ({ label: String(o.label), value: o.value }))}
+          />
+        );
+        break;
+      case 'fk':
+        control = (
+          <Select
+            allowClear
+            showSearch
+            optionFilterProp="label"
+            placeholder={`选择${f.label}`}
+            options={(detail?.refs[f.name] ?? []).map((o) => ({ label: o.label, value: o.value }))}
+          />
+        );
+        break;
+      default:
+        control = <Input maxLength={200} allowClear placeholder={f.hint || `请输入${f.label}`} />;
+    }
+
+    return (
+      <Form.Item
+        key={f.name}
+        name={f.name}
+        label={
+          <span style={{ fontSize: fs(12.5) }}>
+            {f.label}
+            <span style={{ marginLeft: 6, fontSize: fs(11), color: MILITARY.textMuted }}>
+              {f.name}
+              {f.required ? ' *' : ''}
+            </span>
+          </span>
+        }
+        valuePropName={f.kind === 'boolean' ? 'checked' : undefined}
+        rules={
+          f.required && f.kind !== 'boolean'
+            ? [{ required: true, message: `请填写${f.label}` }]
+            : undefined
+        }
+        style={{ marginBottom: 12 }}
+      >
+        {control}
+      </Form.Item>
+    );
+  };
+
+  const primaryFields = detail?.fields.filter((f) => f.primary) ?? [];
+  const otherFields = detail?.fields.filter((f) => !f.primary) ?? [];
+  const moved = !!detail && !!active && detail.entity.id !== active.entity;
+
+  // 换节点 → 收起"更多字段"；切类型 → 展开（目标本体的必填项多半在里面，藏着会让人找不到）
+  useEffect(() => {
+    setMoreOpen(false);
+  }, [activeKey]);
+
+  useEffect(() => {
+    if (moved) setMoreOpen(true);
+  }, [moved]);
+
+  return (
+    <div style={{ padding: 16 }}>
+      {/* 页头：和 AI 中心、工作台同一套「小标题 + 主标题 + 说明」节奏 */}
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+          <span style={{ width: 6, height: 6, background: MILITARY.accent, display: 'inline-block' }} />
+          <span style={{ fontSize: fs(10.5), letterSpacing: 3, color: MILITARY.textMuted, fontWeight: 600 }}>
+            KNOWLEDGE GRAPH
+          </span>
+        </div>
+        <div style={{ fontSize: fs(20), fontWeight: 700, color: MILITARY.text, marginTop: 4 }}>
+          <ApartmentOutlined style={{ color: MILITARY.primary, marginRight: 8, fontSize: fs(18) }} />
+          知识图谱
+        </div>
+        <div style={{ fontSize: fs(12.5), color: MILITARY.textMuted, marginTop: 4 }}>
+          按本体分层展示业务对象之间的关系。点击节点可修改它的全部字段（含类型与附加信息），修改直接写入数据库。
+        </div>
+      </div>
+
+      {err && (
+        <Alert
+          type="error"
+          showIcon
+          style={{ marginBottom: 12 }}
+          title="图谱加载失败"
+          description={err}
+        />
+      )}
+
+      {focusLoading && !focusInfo && (
+        <div
+          style={{
+            marginBottom: 12,
+            padding: '10px 14px',
+            border: `1px solid ${MILITARY.border}`,
+            borderRadius: 10,
+            background: MILITARY.paper,
+            fontSize: fs(12.5),
+            color: MILITARY.textSecondary,
+          }}
+        >
+          <Spin size="small" /> <span style={{ marginLeft: 8 }}>正在解析这条业务记录与图谱的关联…</span>
+        </div>
+      )}
+
+      {focusErr && (
+        <Alert
+          type="warning"
+          showIcon
+          style={{ marginBottom: 12 }}
+          title="无法定位到图谱节点"
+          description={focusErr}
+        />
+      )}
+
+      {/* 关联横幅：从业务列表点「关联」跳过来时，先说清"这一跳连着什么" */}
+      {focusInfo && (
+        <div
+          style={{
+            marginBottom: 12,
+            padding: '12px 14px',
+            border: `1px solid ${MILITARY.border}`,
+            borderRadius: 10,
+            background: MILITARY.paper,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+            <span style={{ width: 3, height: 14, background: MILITARY.accent, display: 'inline-block' }} />
+            <Tag
+              style={{
+                background: MILITARY.soft,
+                color: MILITARY.primaryDark,
+                borderColor: MILITARY.softStrong,
+                marginInlineEnd: 0,
+              }}
+            >
+              {focusInfo.entity.label}
+            </Tag>
+            <span style={{ fontSize: fs(11), letterSpacing: 2, color: MILITARY.textMuted, fontWeight: 600 }}>
+              LINKED FROM BUSINESS DATA
+            </span>
+            <span style={{ flex: 1 }} />
+            {focusInfo.backLink && (
+              <Button size="small" href={focusInfo.backLink}>
+                去业务记录
+              </Button>
+            )}
+            {focusInfo.mode === 'single' && (
+              <Button
+                size="small"
+                onClick={() => void load(focusInfo.view.id, focusInfo.center, 2)}
+              >
+                展开关联关系
+              </Button>
+            )}
+            <Button size="small" icon={<DisconnectOutlined />} onClick={clearFocus}>
+              退出聚焦
+            </Button>
+          </div>
+
+          <div style={{ fontSize: fs(13), color: MILITARY.text, marginTop: 8 }}>{focusInfo.summary}</div>
+
+          <Space wrap size={[6, 6]} style={{ marginTop: 8 }}>
+            {focusInfo.nodes.map((n) => (
+              <Tag
+                key={n.id}
+                style={
+                  n.id === focusInfo.center
+                    ? {
+                        background: MILITARY.softStrong,
+                        color: MILITARY.primaryDark,
+                        borderColor: MILITARY.primary,
+                      }
+                    : {
+                        background: MILITARY.card,
+                        color: MILITARY.textSecondary,
+                        borderColor: MILITARY.border,
+                      }
+                }
+              >
+                {n.label}
+                <span style={{ color: MILITARY.textMuted, marginLeft: 6 }}>{n.role}</span>
+              </Tag>
+            ))}
+          </Space>
+
+          <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginTop: 8 }}>
+            {focusInfo.mode === 'multi'
+              ? `已高亮这 ${focusInfo.nodes.length} 个实体之间的 ${focusInfo.edges.length} 条连接线，其余节点压暗保留上下文`
+              : '该记录在图谱中只对应 1 个节点，已直接打开右侧节点详情'}
+          </div>
+        </div>
+      )}
+
+      <Row gutter={16}>
+        <Col xs={24} xl={active || adding ? 15 : 24}>
+          <Card
+            title={data?.view.label ?? '关系图'}
+            extra={
+              <Space>
+                {(data?.views.length ?? 0) > 1 && (
+                  <Select
+                    size="small"
+                    style={{ minWidth: 150 }}
+                    value={viewId ?? undefined}
+                    options={data?.views}
+                    onChange={(v) => void load(v)}
+                  />
+                )}
+                <Button size="small" icon={<PlusOutlined />} onClick={() => setAdding((v) => !v)}>
+                  新增节点
+                </Button>
+                {centered && !focusInfo && (
+                  <Space size={4}>
+                    <Tag color="gold">已定位到新节点</Tag>
+                    <Button size="small" onClick={() => void load(viewId ?? undefined)}>
+                      返回全图
+                    </Button>
+                  </Space>
+                )}
+                <Button
+                  size="small"
+                  icon={<ReloadOutlined />}
+                  loading={loading}
+                  onClick={() => void load(viewId ?? undefined)}
+                >
+                  刷新
+                </Button>
+              </Space>
+            }
+          >
+            {data ? (
+              <>
+                <OntologyGraph
+                  nodes={data.nodes}
+                  edges={data.edges}
+                  entities={data.entities}
+                  loading={loading}
+                  activeId={active?.id ?? null}
+                  onNodeClick={(n) => setActive(n)}
+                  collapsed={collapsed}
+                  height={560}
+                  flash={flash}
+                  focus={
+                    focusInfo && focusInfo.mode === 'multi'
+                      ? {
+                          nodes: focusInfo.nodes.map((n) => n.id),
+                          edges: focusInfo.edges.map((e) => ({ source: e.source, target: e.target })),
+                        }
+                      : null
+                  }
+                />
+                {data.truncated && (
+                  <Alert
+                    type="warning"
+                    showIcon
+                    style={{ marginTop: 10 }}
+                    title="节点过多已截断"
+                    description="为保证渲染性能，最多展示 120 个节点。"
+                  />
+                )}
+              </>
+            ) : (
+              <OntologyGraph nodes={[]} edges={[]} entities={[]} loading={loading} />
+            )}
+          </Card>
+        </Col>
+
+        {(active || adding) && (
+          <Col xs={24} xl={9}>
+            {adding && (
+              <Card title="新增节点" style={{ marginBottom: 16 }}>
+                <Form layout="vertical" onFinish={addNode}>
+                  <Form.Item name="entity" label="本体类型" rules={[{ required: true }]}>
+                    <Select
+                      placeholder="选择本体"
+                      options={(data?.entities ?? []).map((e) => ({ label: e.label, value: e.id }))}
+                    />
+                  </Form.Item>
+                  <Form.Item name="label" label="名称" rules={[{ required: true, message: '请填写名称' }]}>
+                    <Input placeholder="例如：技术部 / 张三" maxLength={30} />
+                  </Form.Item>
+                  <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginBottom: 10 }}>
+                    其余必填字段会先用占位值补齐，创建后在详情面板里逐项改掉即可。
+                  </div>
+                  <Space>
+                    <Button type="primary" htmlType="submit" loading={saving} icon={<SaveOutlined />}>
+                      新增
+                    </Button>
+                    <Button onClick={() => setAdding(false)}>取消</Button>
+                  </Space>
+                </Form>
+              </Card>
+            )}
+
+            {active && (
+              <Card
+                title="节点详情"
+                extra={
+                  <Space size={6}>
+                    {savedAt && <Tag color="success">已保存 {savedAt}</Tag>}
+                    <Tag
+                      style={{
+                        background: MILITARY.soft,
+                        color: MILITARY.primaryDark,
+                        borderColor: MILITARY.softStrong,
+                      }}
+                    >
+                      {detail?.entity.label ??
+                        data?.entities.find((e) => e.id === active.entity)?.label ??
+                        active.entity}
+                    </Tag>
+                  </Space>
+                }
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
+                  <span style={{ fontSize: fs(12), color: MILITARY.textMuted }}>节点 ID</span>
+                  <Typography.Text code copyable style={{ fontSize: fs(11) }}>
+                    {dbIdOf(active)}
+                  </Typography.Text>
+                </div>
+
+                <Divider style={{ margin: '4px 0 12px' }}>可编辑内容（保存后写入数据库）</Divider>
+
+                {detailErr && (
+                  <Alert type="error" showIcon style={{ marginBottom: 10 }} title={detailErr} />
+                )}
+
+                {detailLoading && !detail ? (
+                  <div style={{ padding: '24px 0', textAlign: 'center' }}>
+                    <Spin size="small" />
+                    <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginTop: 8 }}>
+                      正在读取字段…
+                    </div>
+                  </div>
+                ) : detail ? (
+                  <>
+                    <Form form={form} layout="vertical" size="small" disabled={detailLoading}>
+                      <Form.Item
+                        name="__entity"
+                        label={
+                          <span style={{ fontSize: fs(12.5) }}>
+                            类型
+                            <span style={{ marginLeft: 6, fontSize: fs(11), color: MILITARY.textMuted }}>
+                              节点所属本体
+                            </span>
+                          </span>
+                        }
+                        style={{ marginBottom: 12 }}
+                      >
+                        <Select
+                          options={detail.entities.map((e) => ({
+                            label: e.label,
+                            value: e.id,
+                          }))}
+                          onChange={(v: string) => void onEntityChange(v)}
+                        />
+                      </Form.Item>
+
+                      {moved && (
+                        <Alert
+                          type="warning"
+                          showIcon
+                          style={{ marginBottom: 12 }}
+                          title="保存时会迁移到另一个本体"
+                          description="类型对应数据库表，保存后会在目标本体新建记录并清掉原记录。同名字段自动带过去，但唯一字段（编码/工号等）需要你重新填一个不重复的值。"
+                        />
+                      )}
+
+                      {primaryFields.map(renderField)}
+
+                      {otherFields.length > 0 && (
+                        <Collapse
+                          ghost
+                          size="small"
+                          style={{ marginBottom: 4 }}
+                          activeKey={moreOpen ? ['more'] : []}
+                          onChange={(k) => {
+                            const keys = Array.isArray(k) ? k : [k];
+                            setMoreOpen(keys.includes('more'));
+                          }}
+                          items={[
+                            {
+                              key: 'more',
+                              label: (
+                                <span style={{ fontSize: fs(12.5), color: MILITARY.textSecondary }}>
+                                  更多字段（{otherFields.length}）
+                                </span>
+                              ),
+                              children: <div>{otherFields.map(renderField)}</div>,
+                            },
+                          ]}
+                        />
+                      )}
+
+                      {!detail.fields.length && (
+                        <Empty
+                          image={Empty.PRESENTED_IMAGE_SIMPLE}
+                          description={
+                            <span style={{ fontSize: fs(12.5), color: MILITARY.textMuted }}>
+                              该模型没有可编辑字段（可能全是主键/审计列）
+                            </span>
+                          }
+                        />
+                      )}
+                    </Form>
+
+                    <Space wrap style={{ marginTop: 12 }}>
+                      <Button
+                        type="primary"
+                        icon={<SaveOutlined />}
+                        loading={saving}
+                        onClick={() => void save()}
+                        disabled={detailLoading}
+                      >
+                        {moved ? '迁移并保存' : '保存'}
+                      </Button>
+                      <Button
+                        icon={<UndoOutlined />}
+                        disabled={detailLoading || saving}
+                        onClick={() => {
+                          form.resetFields();
+                          form.setFieldsValue(toFormValues(detail));
+                        }}
+                      >
+                        撤销改动
+                      </Button>
+                      {active.entity === 'department' && (
+                        <Button
+                          onClick={() =>
+                            setCollapsed((prev) => {
+                              const next = new Set(prev);
+                              if (next.has(active.id)) next.delete(active.id);
+                              else next.add(active.id);
+                              return next;
+                            })
+                          }
+                        >
+                          {collapsed.has(active.id) ? '展开下属' : '折叠下属'}
+                        </Button>
+                      )}
+                      <Button
+                        danger
+                        icon={<DeleteOutlined />}
+                        loading={saving}
+                        onClick={() => void confirmRemove()}
+                      >
+                        删除
+                      </Button>
+                      <Button onClick={() => setActive(null)}>关闭</Button>
+                    </Space>
+
+                    {active.link && (
+                      <div style={{ marginTop: 12 }}>
+                        <Typography.Link href={active.link} target="_blank">
+                          去业务页面查看 →
+                        </Typography.Link>
+                      </div>
+                    )}
+                  </>
+                ) : null}
+              </Card>
+            )}
+          </Col>
+        )}
+      </Row>
+    </div>
+  );
+}
+
+/**
+ * useSearchParams 需要 Suspense 边界（否则构建期静态预渲染会直接报错）。
+ * 页面主体是 GraphPageInner，这一层只负责边界，不持有任何状态。
+ */
+export default function GraphPage() {
+  return (
+    <Suspense
+      fallback={
+        <div style={{ padding: 24, fontSize: fs(12.5), color: MILITARY.textMuted }}>
+          <Spin size="small" /> 正在加载知识图谱…
+        </div>
+      }
+    >
+      <GraphPageInner />
+    </Suspense>
+  );
+}