@yss123/cage-cli 0.1.0 → 0.3.0

package/graph-ui/graph-relations.js

@@ -0,0 +1,171 @@
+/**
+ * 将每种本体连线翻译为中文原因、用途、方向与证据，供 CLI 和浏览器详情复用。
+ * 解释基于投影端点及已抽取属性，分别标注显式声明、规则推导与文本匹配。
+ * 不求值 handler、映射或审批条件；存在连线只代表对应声明关系，不证明某次操作已发生。
+ */
+import { kindLabels, nodeLabel } from './graph-model.js';
+/**
+ * 按真实关系种类解释连线，补充声明来源和证据强度。
+ * @param edge 已投影且两端有效的边。
+ * @param model 展示图，提供端点和辅助声明。
+ * @param labels 中文名称覆盖。
+ * @returns 中文解释；只读元数据，不执行审批、映射、查询或业务命令。
+ */
+export function explainEdge(edge, model, labels = {}) {
+    const from = model.nodes.find((n) => n.key === edge.from);
+    const to = model.nodes.find((n) => n.key === edge.to);
+    const a = nodeLabel(from, labels), b = nodeLabel(to, labels);
+    const field = to.id.slice(to.id.indexOf('.') + 1);
+    const resource = (id) => labels[`resource:${id}`] ?? id;
+    const result = (label, category, why, purpose, evidence, source = from) => ({
+        label,
+        category,
+        why,
+        purpose,
+        evidence,
+        source,
+        basis: edge.derived || (edge.kind === 'uses' && ['事件载荷', '出站映射'].includes(edge.as ?? ''))
+            ? 'inferred'
+            : edge.kind === 'uses' && edge.as === '查询'
+                ? 'text-match'
+                : 'declared',
+        direction: `“${a}” → “${b}”：${label}。`,
+    });
+    switch (edge.kind) {
+        case 'contains':
+            return result('包含业务阶段', '业务流程', `“${a}”声明了“${b}”阶段。`, '组织完整业务过程；阶段本身不执行命令。', [`${from.id}.stages → ${to.id}`]);
+        case 'implements':
+            return result('阶段实现', '实现依据', `“${a}”引用“${b}”作为实现。`, '从业务阶段追到实际声明；引用顺序不表示执行顺序。', [`${from.id}.action / details → ${to.id}`]);
+        case 'follows': {
+            const mode = { manual: '人工下一步', automatic: '自动触发', wait: '等待后继续' }[edge.mode ?? 'manual'];
+            return result(edge.label ?? mode, mode, `“${a}” → “${b}”：${edge.label}（${mode}）。`, edge.mode === 'automatic' ? '检查实际触发链是否存在；映射条件、事务和权限仍以引用的实现为准。' : '这是业务规格中的后续步骤，不会自动调度目标操作。', [`${from.attrs.process}.transitions`, `mode: ${edge.mode}`]);
+        }
+        case 'relates':
+            return result(edge.label ?? '关联业务对象', '业务关联', `“${a}”关联“${b}”：${edge.label}。`, '展示这个环节涉及的业务对象；数据引用、读取和写入由对应实现决定。', [edge.via ?? `${from.id}.subject`]);
+        case 'field':
+            return result(to.attrs.virtual ? '声明关联字段' : '包含字段', '数据结构', `“${a}”的字段声明中包含“${b}”。`, to.attrs.virtual
+                ? '这是 fields 中的集合关系，不占主表列；点击它指向目标的连线，查看关系基数、存储和读写方式。'
+                : '说明业务对象由哪些数据组成；调整字段时，可以继续沿线查看受影响的查询、审批和事件。', [`${from.id}.fields.${field}`]);
+        case 'refs': {
+            if (edge.cardinality === 'one-to-many')
+                return result('一对多 1:N', '反向关联 · 只读', `“${a}”使用 hasMany 反查“${b}”，对应外键是 ${to.id}.${edge.mappedBy}。`, '按需分页列出属于当前对象的子对象，不新建列或中间表。改变归属要执行子对象的命令；读取同时受两侧权限和范围约束。', [`${from.id}: hasMany(${JSON.stringify(to.id)}, { mappedBy: ${JSON.stringify(edge.mappedBy)} })`]);
+            if (edge.cardinality === 'many-to-many')
+                return result('多对多 N:M', '集合关联 · 自动中间表', `“${a}”声明 manyToMany：一个所属对象可以关联多个“${b}”，同一个目标也可被多个所属对象关联。`, '框架生成中间表、同租户外键和组合唯一约束；所属对象的命令用 ID 数组替换关联，与主记录共同提交。解绑不删除目标，读取通过独立分页接口。', [`${from.id}: manyToMany(${JSON.stringify(to.id)})`, `自动中间表：${from.attrs.through}`]);
+            return result(edge.cardinality === 'one-to-one' ? '一对一 1:1' : '多对一 N:1', '数据关联', `“${a}”声明为引用“${b}”的字段，保存所关联对象的标识。`, edge.cardinality === 'one-to-one'
+                ? '租户内的唯一约束保证同一目标最多被这一字段引用一次；可选字段允许没有关联，并不要求双方一定存在。'
+                : `多个所属对象可以引用同一${kindLabels[to.kind]}。字段保存外键；具体查询仍受数据范围约束，这条线本身不执行查询。`, [`${from.id}: ref(${JSON.stringify(to.id)})${edge.cardinality === 'one-to-one' ? '.unique()' : ''}`]);
+        }
+        case 'ownership':
+            return result(`拥有${kindLabels[to.kind]}`, '标识归属 · 推导', `“${b}”的标识位于“${from.id}.”之下，投影据此将它归入“${a}”。`, '帮助整理同一业务对象的命令、状态和能力点。这是标识推导的归属，不是抽取器声明的依赖，也不会触发命令。', [`${to.id} → 所属聚合 ${from.id}`]);
+        case 'transition': {
+            const command = model.nodes.find((n) => n.kind === 'command' && n.id === edge.via);
+            const name = nodeLabel(command, labels);
+            const stays = edge.from === edge.to;
+            return result(stays ? '保持状态' : '迁移状态', '状态变化', `“${name}”声明${stays ? `在“${a}”状态执行后保持原状态` : `从“${a}”进入“${b}”`}。`, `用于检查业务生命周期是否完整。只有命令通过权限、约束并成功提交，${stays ? '操作才生效' : '状态才改变'}。`, [
+                `命令：${command.id}`,
+                `from: ${JSON.stringify(command.attrs.from)}`,
+                `to: ${JSON.stringify(command.attrs.to)}`,
+            ], command);
+        }
+        case 'reads':
+        case 'queries':
+            return result('读取数据', '读取依赖', `“${a}”在 reads 中声明读取“${b}”${edge.alias ? `，使用别名 ${edge.alias}` : ''}。`, '明确可读取的业务对象，并让影响分析找到依赖方；实际读取通过安全视图，受权限和数据范围约束。箭头指向数据来源，不表示先执行它。', [`${from.id}.reads${edge.alias ? `.${edge.alias}` : ''} → ${to.id}`]);
+        case 'emits':
+            return result('产生事件', '事件协作', `“${a}”的 emits 中声明了“${b}”事件。`, '命令成功执行时按声明生成事件，连接后续反应、审批或外部同步；事务失败时不能当作已经发生。', [`${from.id}.emits → ${to.id}`]);
+        case 'uses': {
+            const as = edge.as ?? '';
+            if (as === '可路由字段')
+                return result('允许审批读取', '审批可用字段', `“${a}”把“${b}”列入 routable，允许该字段作为审批流程变量。`, '明确审批可以拿到哪些业务数据。这里只表示允许使用；是否真的参与分支或审批选人，要查看审批路由的字段关系。', [`${from.id}.routable 包含 ${field}`]);
+            if (as === '路由条件') {
+                // fieldsUsed 同时包含 when 条件和 deptLeader 选人字段，不能一律解释成条件判断。
+                const nodes = from.attrs.nodes;
+                const conditions = nodes.filter((n) => n.kind === 'when' && n.cond.field === field);
+                const steps = nodes
+                    .flatMap((n) => (n.kind !== 'when' ? [n] : n.steps))
+                    .filter((s) => (s.approver ?? s.handoff)?.kind === 'deptLeader' && (s.approver ?? s.handoff)?.field === field);
+                const operators = {
+                    gt: '大于',
+                    gte: '大于等于',
+                    lt: '小于',
+                    lte: '小于等于',
+                    eq: '等于',
+                    ne: '不等于',
+                    in: '属于',
+                };
+                const reasons = [
+                    ...steps.map((s) => `“${s.title}”步骤根据“${b}”找到对应部门的负责人`),
+                    ...conditions.map((n) => `当“${b}”${operators[n.cond.op]} ${JSON.stringify(n.cond.value)} 时，加入${n.steps.map((s) => `“${s.title}”`).join('、')}步骤`),
+                ];
+                return result(steps.length && conditions.length ? '选人和分支依据' : steps.length ? '确定审批人' : '判断审批分支', '审批路由依赖', `${reasons.join('；')}。`, '字段值会影响审批人或需要经过的审批步骤；修改字段含义时，应一起检查这些路由配置。', [
+                    ...steps.map((s) => `${s.title}: approver.deptLeader(${JSON.stringify(field)})`),
+                    ...conditions.map((n) => `when(${n.cond.op}(${JSON.stringify(field)}, ${JSON.stringify(n.cond.value)}))`),
+                ]);
+            }
+            if (as === '事件载荷')
+                return result('携带字段', '事件数据依赖', `“${a}”的默认事件载荷按同名字段从业务对象取“${b}”。`, '订阅方可以用事件中的这份数据处理后续业务；字段变更需要检查事件及订阅方的数据约定。箭头指向载荷的数据来源。', [`事件 ${from.id} 的同名字段 ${field} ← ${to.id}`]);
+            if (as === '查询')
+                return result('查询使用字段', '查询字段线索', `抽取器在“${a}”的 SQL 或查询构造函数文本中匹配到了“${b}”的字段名。`, '提供检查查询依赖的线索。这里基于字段名文本匹配，可能匹配到注释或同名内容；实际筛选、分组或计算用途请核对查询声明。', [`${from.id}: SQL / build 文本匹配 ${field}`]);
+            if (as === '出站映射')
+                return result('映射外发字段', '外部同步数据', `“${a}”的 fields 声明包含“${b}”对应的字段名；抽取器将它关联到发出事件的聚合中同名字段。`, '用于核对外发字段范围和字段变更的同步影响；具体取值及转换由事件载荷与 map 函数决定。', [`${from.id}.fields 包含 ${field}`, `同名聚合字段：${to.id}`]);
+            if (as.startsWith('约束 ')) {
+                const rule = as.slice(3);
+                const purpose = rule.startsWith('ceiling(')
+                    ? `用于校验“${b}”是否超出调用人的审批额度。`
+                    : rule.startsWith('sod.notSameAs(')
+                        ? `用于校验调用人与“${b}”记录的人不同，避免同一人完成需要分离的职责。`
+                        : `该约束读取“${b}”执行命令前的业务检查；字段变更时应一起复核约束。`;
+                return result('执行约束检查', '命令校验依赖', `“${a}”声明的约束 ${rule} 使用“${b}”。`, purpose, [
+                    `${from.id}.constraints → ${rule}`,
+                    `约束 fields 包含 ${field}`,
+                ]);
+            }
+            return result('使用字段', '字段依赖', `“${a}”声明使用“${b}”。`, '用于追踪字段变更的影响范围。', [
+                as || edge.kind,
+            ]);
+        }
+        case 'cancels':
+            return result('取消审批', '流程取消', `“${b}”在 cancelOn 中声明了“${a}”事件。`, '事件发生后取消该单据仍在进行的审批；不会启动新流程，也不替代释放资源等业务反应。', [`${to.id}.cancelOn 包含 ${from.id}`], to);
+        case 'triggers': {
+            const label = to.kind === 'approval' ? '启动审批' : to.kind === 'outbound' ? '触发外部同步' : '触发反应';
+            return result(label, '事件触发', `“${b}”订阅“${a}”作为${to.kind === 'approval' ? '启动' : '触发'}事件。`, to.kind === 'approval'
+                ? '事件发生后启动对应审批流程，生成流程中的审批任务。'
+                : to.kind === 'outbound'
+                    ? '事件发生后由 worker 处理外部推送，失败按投递策略重试。'
+                    : `事件发生后执行订阅的反应${to.attrs.tx === 'same' ? '，该反应与原命令处于同一事务' : '；执行方式由反应的事务声明决定'}。`, [`${to.id}.${to.kind === 'approval' ? 'start' : 'event'} → ${from.id}`], to);
+        }
+        case 'targets': {
+            if (to.kind === 'connector')
+                return result('调用外部系统', '连接器调用', `“${a}”声明通过“${b}”执行操作 ${labels[`operation:${from.attrs.operation}`] ?? from.attrs.operation}。`, '由连接器统一处理地址与字段白名单、密钥、限流和超时，让外部同步保持可管控。', [`${from.id}.connector → ${to.id}`, `operation: ${from.attrs.operation}`]);
+            if (from.kind === 'outbound')
+                return result('成功后回写', '同步成功回调', `“${a}”的 onSuccess 绑定“${b}”。`, '外部操作成功后调用该命令，将返回结果按映射写回业务；失败时不执行成功回写。', [`${from.id}.onSuccess → ${to.id}`]);
+            if (from.kind === 'inbound')
+                return result('回调转为命令', '外部回调', `“${a}”将接收的外部回调映射到“${b}”。`, '外部回调通过验签和数据校验后，使用业务命令处理，统一遵守状态和业务约束。', [`${from.id}.command → ${to.id}`]);
+            const resources = [
+                edge.acquires ? `获取“${resource(edge.acquires)}”` : '',
+                edge.releases ? `释放“${resource(edge.releases)}”` : '',
+            ].filter(Boolean);
+            const collection = from.attrs.collection;
+            const execution = [
+                from.attrs.tx === 'same' ? '同一事务，任意一项失败共同回滚' : '异步投递',
+                from.attrs.order !== null && from.attrs.order !== undefined ? `步骤顺序 ${from.attrs.order}` : '',
+                collection ? `最多 ${collection.maxItems} 项，按 ${collection.orderBy} 排序，串行调用` : '',
+            ].filter(Boolean);
+            return result('调用业务命令', '反应调用', `“${a}”把事件映射后交给“${b}”处理。`, `将后续业务操作交给受约束的命令执行。${execution.join('；')}。${resources.length ? `此声明还标记${resources.join('、')}，用于检查资源获取与释放是否成对。` : ''}`, [`${from.id}.command → ${to.id}`, ...execution, ...resources]);
+        }
+        case 'binds': {
+            if (from.kind === 'route')
+                return result('定义审批步骤', '流程配置', `“${a}”与“${b}”使用同一流程标识 ${from.attrs.process}。`, '这份路由定义流程里的审批步骤、选人方式和条件分支，供代码内审批引擎使用。', [`process: ${from.attrs.process}`]);
+            const approved = from.attrs.onApproved === to.id;
+            const rejected = from.attrs.onRejected === to.id;
+            const returned = from.attrs.onReturned === to.id;
+            const outcome = approved && rejected ? '结束' : approved ? '通过' : returned ? '退回修改' : '驳回';
+            return result(`${outcome}后执行`, '审批结论回写', `“${a}”${outcome}时绑定执行“${b}”。`, '将审批结论交给业务命令推进单据状态，并统一执行权限和业务约束。', [
+                approved ? `${from.id}.onApproved → ${to.id}` : '',
+                rejected ? `${from.id}.onRejected → ${to.id}` : '',
+                returned ? `${from.id}.onReturned → ${to.id}` : '',
+            ].filter(Boolean));
+        }
+        case 'calls':
+            return result('允许调用命令', '任务调用范围', `“${a}”在 calls 中声明可以调用“${b}”。`, '明确任务能执行哪些业务写入，并支持影响分析。每次任务是否实际调用该命令，取决于 run 中的业务逻辑。', [`${from.id}.calls → ${to.id}`]);
+    }
+}

package/graph-ui/graph-search.js

@@ -0,0 +1,98 @@
+/**
+ * 不依赖模型的本体名称检索，供 CLI、agent 上下文和浏览器筛选共用。
+ * 归一化标识与文案，按完整命中或英文词、相邻中文片段计算权重，并返回命中字段。
+ * 结果是稳定排序的候选；不进行语义推理，无法保证理解否定、业务同义词或任意自然语言要求。
+ */
+// 轻量、可解释的名称检索；不调用模型，不把关键词匹配描述成“理解任意需求”。
+// 中文用相邻双字作为线索，让“采购单取消”能匹配“取消采购单”，同时返回命中依据。
+import { kindLabels, nodeLabel } from './graph-model.js';
+/**
+ * 统一全半角、大小写与首尾空白后进行词法比较，不改变输出中的原始标识。
+ */
+const normalize = (value) => value.normalize('NFKC').toLowerCase().trim();
+/**
+ * 拆出英文标识词及连续中文的相邻双字片段，并稳定去重。
+ * @param query 已归一化查询。
+ * @returns 匹配词列表；单汉字单独保留，不执行分词模型。
+ */
+function searchTerms(query) {
+    const terms = query.match(/[a-z0-9_$.:/-]+/g) ?? [];
+    for (const segment of query.match(/[\p{Script=Han}]+/gu) ?? []) {
+        const chars = [...segment];
+        if (chars.length === 1)
+            terms.push(segment);
+        else
+            for (let i = 0; i < chars.length - 1; i++)
+                terms.push(chars[i] + chars[i + 1]);
+    }
+    return [...new Set(terms)];
+}
+/**
+ * 对 key、ID、中文文案、原描述及所属对象分别评分，取最高单字段得分。
+ * @param node 待匹配节点。
+ * @param query 用户输入。
+ * @param labels 显示覆盖。
+ * @param descriptions 声明原始描述。
+ * @returns 有依据的候选或 undefined；所有命中字段仍保留，不把分数当业务证明。
+ */
+function matchNode(node, query, labels, descriptions) {
+    const normalized = normalize(query);
+    if (!normalized)
+        return;
+    const terms = searchTerms(normalized);
+    const ownerId = ['field', 'state', 'command', 'capability', 'entry'].includes(node.kind)
+        ? node.id.split('.')[0]
+        : undefined;
+    const fields = [
+        ['key', node.key, 18],
+        ['id', node.id, 16],
+        ['label', nodeLabel(node, labels), 12],
+        ['description', descriptions[node.key] ?? String(node.attrs.description ?? ''), 10],
+        ['owner', ownerId ? (labels[`aggregate:${ownerId}`] ?? ownerId) : '', 2],
+    ];
+    const matches = [];
+    let score = 0;
+    for (const [field, value, weight] of fields) {
+        const text = normalize(value);
+        if (!text)
+            continue;
+        const exact = text === normalized;
+        const whole = text.includes(normalized);
+        const found = terms.filter((term) => text.includes(term));
+        if (!exact && !whole && found.length === 0)
+            continue;
+        const points = exact ? weight * 100 : whole ? weight * 30 : weight * found.length;
+        score = Math.max(score, points);
+        matches.push({ field, value, terms: exact || whole ? [query.trim()] : found });
+    }
+    if (!matches.length)
+        return;
+    return { key: node.key, id: node.id, kind: node.kind, label: nodeLabel(node, labels), score, matches };
+}
+/** 排序稳定，结果携带命中字段；多个候选不静默合成一个“正确需求”。 */
+/**
+ * 按可选类型筛选并稳定排序名称候选。
+ * @param model 展示图。
+ * @param query 关键词。
+ * @param labels 中文覆盖。
+ * @param options 类型范围及原始描述。
+ * @returns 完整候选数组，调用方负责 limit 和截断提示。
+ */
+export function searchGraphNodes(model, query, labels = {}, options = {}) {
+    return model.nodes
+        .filter((node) => !options.kind || node.kind === options.kind)
+        .map((node) => matchNode(node, query, labels, options.descriptions ?? {}))
+        .filter((hit) => !!hit)
+        .sort((a, b) => b.score - a.score || a.key.localeCompare(b.key));
+}
+/** 画布的筛选与搜索下拉共用同一匹配规则，保留按节点类型查找的用法。 */
+/**
+ * 供画布筛选复用名称匹配，并额外允许按中文类型名称筛选。
+ * @param node 展示节点。
+ * @param query 筛选文字。
+ * @param labels 中文映射。
+ * @returns 是否命中；空查询可匹配类型名称，不修改图。
+ */
+export function matchesNode(node, query, labels) {
+    return !!matchNode(node, query, labels, {}) || normalize(kindLabels[node.kind]).includes(normalize(query));
+}

package/graph-ui/index.html

@@ -1,4 +1,6 @@
 <!doctype html>
+<!-- 本地本体探索器的静态骨架，由 graph 服务提供并由 app.js 填充。
+  ID 是脚本绑定契约；本页不嵌入领域执行代码，业务地图与完整本体共用导航和检查结果。 -->
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
@@ -10,6 +12,7 @@
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='10' fill='%232d665a'/%3E%3Cpath d='M11 12h18v16H11zm0 8h18m-9-8v16' stroke='%23fff' fill='none' stroke-width='2'/%3E%3C/svg%3E"
     />
     <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="/business.css" />
   </head>
   <body>
     <div class="app-shell">
@@ -19,7 +22,7 @@
           ><strong>CAGE<span>ATLAS</span></strong></a
         >
         <div class="breadcrumb">
-          <span>开发者工作台</span><b>/</b><span id="project-name">正在读取项目</span>
+          <span>业务探索工作台</span><b>/</b><span id="project-name">正在读取项目</span>
         </div>
         <span class="local-badge"><i></i>本地声明</span>
         <button
@@ -32,10 +35,13 @@
         </button>
       </header>
 
+      <!-- 对象/板块导航与类型筛选由当前视图重建，移动端展开状态由按钮的 aria-expanded 同步。 -->
       <aside class="sidebar" id="sidebar">
         <div class="section-label">项目工作区 <span>01</span></div>
         <div class="nav-active"><span class="nav-symbol">◇</span> 本体图谱 <span class="nav-dot"></span></div>
-        <div class="sidebar-heading">业务对象 <span id="aggregate-total"></span></div>
+        <div class="sidebar-heading">
+          <span id="objects-heading-label">业务板块</span><span id="aggregate-total"></span>
+        </div>
         <div id="aggregate-list" class="aggregate-list"></div>
         <div class="sidebar-heading" id="types-heading">
           节点类型 <button id="reset-types" class="text-button">重置</button>
@@ -61,12 +67,12 @@
         >
       </aside>
 
-      <main class="main">
+      <main class="main business-page" id="main">
         <section class="page-heading">
           <div>
             <div class="eyebrow">业务关系探索</div>
-            <h1>本体图谱<span class="version-tag">v0.1</span></h1>
-            <p>从声明出发，看见业务如何连接。</p>
+            <h1 id="page-title">业务地图</h1>
+            <p id="page-description">先理解业务，再沿流程找到实现。</p>
           </div>
           <div class="heading-actions">
             <button id="download" class="button secondary"><span>↓</span> 导出 JSON</button
@@ -77,15 +83,17 @@
         <section class="overview" aria-label="图谱统计">
           <div class="overview-item">
             <span class="metric-icon aggregate-icon">◇</span>
-            <div><small>业务对象</small><strong id="metric-aggregates">—</strong></div>
+            <div>
+              <small id="metric-first-label">业务板块</small><strong id="metric-aggregates">—</strong>
+            </div>
           </div>
           <div class="overview-item">
             <span class="metric-icon node-icon">⠿</span>
-            <div><small>声明节点</small><strong id="metric-nodes">—</strong></div>
+            <div><small id="metric-second-label">流程入口</small><strong id="metric-nodes">—</strong></div>
           </div>
           <div class="overview-item">
             <span class="metric-icon edge-icon">↗</span>
-            <div><small>声明关系</small><strong id="metric-edges">—</strong></div>
+            <div><small id="metric-third-label">业务对象</small><strong id="metric-edges">—</strong></div>
           </div>
           <div class="overview-health">
             <span id="health-dot" class="health-dot"></span>
@@ -94,12 +102,13 @@
           </div>
         </section>
 
-        <section class="explorer" aria-label="交互式本体图谱">
+        <!-- 三个视图共享工具条；business-view 承载流程，canvas 承载完整图和对象字段图。 -->
+        <section class="explorer business-mode" id="explorer" aria-label="交互式业务地图与本体图谱">
           <div class="graph-panel">
             <div class="graph-toolbar">
               <div class="tabs" role="group" aria-label="图谱视图">
-                <button data-mode="structure" class="active" aria-pressed="true">对象与字段</button
-                ><button data-mode="business" aria-pressed="false">业务流程</button
+                <button data-mode="business" class="active" aria-pressed="true">业务地图</button
+                ><button data-mode="structure" aria-pressed="false">对象与字段</button
                 ><button data-mode="all" aria-pressed="false">完整本体</button>
               </div>
               <div class="search-wrap">
@@ -107,13 +116,14 @@
                 ><input
                   id="search"
                   type="search"
-                  placeholder="搜索中文名称或代码标识"
+                  placeholder="搜索业务、流程或代码标识"
                   aria-label="搜索节点"
                   autocomplete="off"
                 /><kbd>/</kbd>
                 <div id="search-results" class="search-results" hidden></div>
               </div>
             </div>
+            <div id="business-view" class="business-view" aria-label="业务板块与流程"></div>
             <div class="graph-subbar">
               <span
                 ><i class="tiny-dot"></i><strong id="view-title">全部业务</strong
@@ -150,6 +160,7 @@
                     <path d="M0 0L10 5L0 10z" fill="#357c6c" />
                   </marker>
                 </defs>
+                <!-- 脚本只变换 viewport 来实现平移和缩放，边先于节点绘制以保留节点命中面。 -->
                 <g id="viewport">
                   <g id="edges"></g>
                   <g id="nodes"></g>
@@ -180,11 +191,13 @@
           </div>
           <aside id="inspector" class="inspector" aria-label="节点与关系详情" aria-live="polite"></aside>
         </section>
+        <div id="business-health" class="business-health" aria-live="polite"></div>
         <footer class="page-footer">
           <span id="domain-path">packages/domain/src/index.ts</span><span>只读探索 · 不连接业务数据库</span>
         </footer>
       </main>
     </div>
+    <!-- 规则发现保留在独立对话框，不因主画布能显示就隐藏声明错误。 -->
     <dialog id="findings-dialog">
       <div class="dialog-heading">
         <h2>声明检查</h2>
@@ -192,6 +205,7 @@
       </div>
       <div id="findings-list"></div>
     </dialog>
+    <!-- 模块入口在 DOM 骨架之后加载，固定资源由 CLI 构建脚本输出到 graph-ui。 -->
     <script type="module" src="/app.js"></script>
   </body>
 </html>

package/graph-ui/model.js

@@ -1,86 +1,49 @@
+import { kindLabels } from './graph-model.js';
+export { nodeLabel, projectGraph, neighborhood, edgeLabels } from './graph-model.js';
+export { matchesNode } from './graph-search.js';
+/**
+ * 节点类型对应的中文标签、颜色、短字和布局列优先级；只影响图谱呈现。
+ */
 export const kinds = {
-    aggregate: { label: '业务对象', color: '#197c72', short: '表', column: 0 },
-    command: { label: '命令', color: '#547db2', short: '令', column: 1 },
-    event: { label: '事件', color: '#c08c36', short: '事', column: 2 },
-    reaction: { label: '反应', color: '#aa7288', short: '应', column: 3 },
-    query: { label: '查询', color: '#648c5b', short: '查', column: 1 },
-    approval: { label: '审批', color: '#9c739f', short: '审', column: 3 },
-    route: { label: '审批路由', color: '#9c739f', short: '路', column: 3 },
-    job: { label: '定时任务', color: '#7f82a0', short: '时', column: 0 },
-    connector: { label: '连接器', color: '#b57452', short: '连', column: 4 },
-    outbound: { label: '出站映射', color: '#b57452', short: '出', column: 3 },
-    inbound: { label: '入站回调', color: '#b57452', short: '入', column: 4 },
-    field: { label: '字段', color: '#67998f', short: '字', column: 1 },
-    state: { label: '状态', color: '#898b69', short: '态', column: 2 },
-    capability: { label: '能力点', color: '#81949f', short: '权', column: 1 },
-    entry: { label: '新建入口', color: '#89938e', short: '+', column: 0 },
+    aggregate: { label: kindLabels.aggregate, color: '#197c72', short: '表', column: 0 },
+    command: { label: kindLabels.command, color: '#547db2', short: '令', column: 1 },
+    event: { label: kindLabels.event, color: '#c08c36', short: '事', column: 2 },
+    reaction: { label: kindLabels.reaction, color: '#aa7288', short: '应', column: 3 },
+    query: { label: kindLabels.query, color: '#648c5b', short: '查', column: 1 },
+    approval: { label: kindLabels.approval, color: '#9c739f', short: '审', column: 3 },
+    route: { label: kindLabels.route, color: '#9c739f', short: '路', column: 3 },
+    job: { label: kindLabels.job, color: '#7f82a0', short: '时', column: 0 },
+    connector: { label: kindLabels.connector, color: '#b57452', short: '连', column: 4 },
+    outbound: { label: kindLabels.outbound, color: '#b57452', short: '出', column: 3 },
+    inbound: { label: kindLabels.inbound, color: '#b57452', short: '入', column: 4 },
+    field: { label: kindLabels.field, color: '#67998f', short: '字', column: 1 },
+    state: { label: kindLabels.state, color: '#898b69', short: '态', column: 2 },
+    capability: { label: kindLabels.capability, color: '#81949f', short: '权', column: 1 },
+    entry: { label: kindLabels.entry, color: '#89938e', short: '+', column: 0 },
+    process: { label: kindLabels.process, color: '#397a56', short: '流', column: 0 },
+    stage: { label: kindLabels.stage, color: '#648c5b', short: '段', column: 1 },
 };
-export const edgeLabels = {
-    transition: '状态迁移',
-    reads: '读取',
-    emits: '发出',
-    uses: '使用字段',
-    triggers: '触发',
-    targets: '调用目标',
-    queries: '查询',
-    refs: '引用',
-    calls: '调用',
-    binds: '审批绑定',
-    field: '声明字段',
-    ownership: '归属（视图推导）',
-};
-/** 中文用于展示，英文仍作为复制、搜索和查源码的稳定标识。
- * 没有配置业务名称的未知节点保留原标识，不能猜测业务含义后悄悄改名。 */
-export function nodeLabel(node, labels = {}) {
-    if (node.kind === 'entry')
-        return '新建入口';
-    return labels[node.key] || String(node.attrs.description || node.id);
-}
-export function matchesNode(node, query, labels) {
-    return `${nodeLabel(node, labels)} ${node.id} ${kinds[node.kind].label}`
-        .toLowerCase()
-        .includes(query.toLowerCase());
-}
-export function projectGraph(graph) {
-    const nodes = graph.nodes.map((n) => ({ ...n, key: `${n.kind}:${n.id}` }));
-    const edges = [];
-    // 节点身份包含 kind。能力点和命令可能同名，不能单用显示名作为 SVG 的主键。
-    const find = (id) => nodes.find((n) => n.id === id && n.kind !== 'capability') ?? nodes.find((n) => n.id === id);
-    for (const e of graph.edges) {
-        let from = find(e.from);
-        const to = find(e.to);
-        // [new] 是迁移的起点，并不属于声明状态；在视图中显式标为虚拟入口。
-        if (!from && e.kind === 'transition' && e.from.endsWith('.[new]')) {
-            from = { key: `entry:${e.from}`, id: e.from, kind: 'entry', hash: '', attrs: {} };
-            nodes.push(from);
-        }
-        if (from && to)
-            edges.push({ ...e, from: from.key, to: to.key, key: `edge:${edges.length}`, derived: false });
-    }
-    for (const n of nodes) {
-        if (!['command', 'state', 'capability', 'entry'].includes(n.kind))
-            continue;
-        const owner = nodes.find((a) => a.kind === 'aggregate' && n.id.startsWith(`${a.id}.`));
-        if (owner)
-            edges.push({ key: `owner:${n.key}`, kind: 'ownership', from: owner.key, to: n.key, derived: true });
-    }
-    return { nodes, edges };
-}
-export const isSystem = (n) => /^(User|Role|Dept)(\.|$)/.test(n.id);
-export function neighborhood(model, key) {
-    const connected = new Set([key]);
-    for (const e of model.edges) {
-        if (e.from === key)
-            connected.add(e.to);
-        if (e.to === key)
-            connected.add(e.from);
-    }
-    return connected;
-}
+/**
+ * 按组织聚合前缀识别默认隐藏对象，不是能力或租户授权判断。
+ */
+export const isSystem = (node) => /^(User|Role|Dept)(\.|$)/.test(node.id);
+/**
+ * 完整本体普通节点的固定宽度，单位为画布单位，与 edgePath 端点计算保持一致。
+ */
 export const NODE_WIDTH = 190;
+/**
+ * 完整本体普通节点高度，单位为画布单位；对象字段卡片使用独立动态高度。
+ */
 export const NODE_HEIGHT = 56;
 /** 按类型分组的平衡列 + 邻接排序。相同声明每次打开位置相同，没有持续运动的力导向
  * 动画；读长名称、比较刷新前后的关系时不会被随机布局打断。 */
+/**
+ * 按语义列与邻接平均纵坐标计算确定性位置，避免随机布局干扰阅读。
+ * @param nodes 可见节点，不修改原数组。
+ * @param edges 可见关系。
+ * @param focusKey 小于等于 12 节点时以该节点作为中间列。
+ * @returns 节点 key 到坐标映射；没有持续动画或 DOM 副作用。
+ */
 export function layoutGraph(nodes, edges, focusKey) {
     const positions = new Map();
     // 小范围聚焦按关系方向排布：依赖方在左、当前节点居中、目标在右。
@@ -123,6 +86,13 @@ export function layoutGraph(nodes, edges, focusKey) {
     }
     return positions;
 }
+/**
+ * 根据两个普通节点位置绘制曲线，同列及自环从侧面绕行。
+ * @param from 起点左上角。
+ * @param to 终点左上角。
+ * @param self 是否自环。
+ * @returns SVG d 属性，不绘制或修改节点。
+ */
 export function edgePath(from, to, self) {
     if (self)
         return `M${from.x + NODE_WIDTH - 25},${from.y} C${from.x + NODE_WIDTH + 50},${from.y - 65} ${from.x + NODE_WIDTH + 50},${from.y + 100} ${from.x + NODE_WIDTH - 25},${from.y + NODE_HEIGHT}`;