三面拆分⑫:UI 打磨 —— 补 10 枚缺失图标,蓝图改因果链,台账收成一个模块

图标注册表缺 arrow-left-right/columns/table/tag 等 10 名,用到即渲染成空 SVG —— 补齐;
蓝图四库改真箭头相连的因果链节点卡(卡即入口,删重复的入库段);
驾驶舱终态分布改五色堆叠条;运营数据收成左轨一枚「台账」,域下沉为 2-3 字短名页签
(受理→寻源→定价→议价→替代→共享,按流程序),进模块自动落首域。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/features/gov-blueprint/internal/panel.tsx

@@ -9,7 +9,8 @@
  * 这里**不出现任何运行态数字**(在跑几单、30 天起单数、死信数)。
  * 设计者看的是定义完不完整,不是今天忙不忙 —— 混进运行数字,这页就退化成第二个驾驶舱。
  */
-import { Clear, Entry, Kpi, Sec, Todo } from '@web-shared/gov/primitives.tsx';
+import { Ico } from '@web-shared/Ico.tsx';
+import { Clear, Sec, Todo } from '@web-shared/gov/primitives.tsx';
 import type { Nav } from '@web-shared/gov/gov-route.ts';
 import {
   useGovActivities,
@@ -58,38 +59,67 @@ export function BlueprintHome({ nav }: HomeProps) {
 
   const gaps = draftBad.length + missingActivities.length + uncalled.length;
 
-  // 因果链那句话写在区说明里(ZM.blueprint.desc),此处不重复 —— 直接上四库读数
+  // 因果链是这一屏的主角:四库以真箭头相连 —— 箭头编码的是真实依赖
+  // (流程包引用活动、活动调工具、活动物化数据),节点卡即入口,点卡即入库。
   return (
     <>
-      <div className="g-kpis">
-        <Kpi
-          ico="workflow"
-          tone="brand"
-          label="流程包 · 战略"
-          value={packages.length}
-          sub={`草稿 ${drafts.length} · 未闭合 ${draftBad.length}`}
-        />
-        <Kpi
-          ico="boxes"
-          tone="auto"
-          label="活动 · 方法"
-          value={activities.length}
-          sub="一个活动 = 一个任务的定义"
-        />
-        <Kpi
-          ico="wrench"
-          tone="collab"
-          label="工具 · 能力"
-          value={toolRows.length}
-          sub={`读类 ${toolRows.filter((t) => t.effect === 'read').length} · 写类 ${toolRows.filter((t) => t.effect === 'write').length}`}
-        />
-        <Kpi
-          ico="database"
-          tone="ok"
-          label="数据域 · 对象"
-          value={domains.length}
-          sub={`${objectRows.length} 个对象 · 发布即在运营中心长出台账位`}
-        />
+      <div className="g-chain">
+        <button className="g-chain-node t-brand" onClick={() => nav.jump('workflows', 'pkgs')}>
+          <span className="g-chain-k">
+            <span className="ic">
+              <Ico name="workflow" s={13} />
+            </span>
+            战略 · 流程包
+          </span>
+          <span className="g-chain-v">{packages.length}</span>
+          <span className="g-chain-h">
+            企业以哪些流转运转 —— 草稿 {drafts.length} · 未闭合 {draftBad.length}
+          </span>
+        </button>
+        <span className="g-chain-arr">
+          <Ico name="chevron-right" s={15} />
+        </span>
+        <button className="g-chain-node t-auto" onClick={() => nav.jump('library', 'shelf')}>
+          <span className="g-chain-k">
+            <span className="ic">
+              <Ico name="boxes" s={13} />
+            </span>
+            方法 · 活动库
+          </span>
+          <span className="g-chain-v">{activities.length}</span>
+          <span className="g-chain-h">每件事怎么干 —— 一个活动 = 一个任务的定义</span>
+        </button>
+        <span className="g-chain-arr">
+          <Ico name="chevron-right" s={15} />
+        </span>
+        <button className="g-chain-node t-collab" onClick={() => nav.jump('tools', 'catalog')}>
+          <span className="g-chain-k">
+            <span className="ic">
+              <Ico name="wrench" s={13} />
+            </span>
+            能力 · 工具箱
+          </span>
+          <span className="g-chain-v">{toolRows.length}</span>
+          <span className="g-chain-h">
+            系统能对世界做什么 —— 读类 {toolRows.filter((t) => t.effect === 'read').length} · 写类{' '}
+            {toolRows.filter((t) => t.effect === 'write').length}
+          </span>
+        </button>
+        <span className="g-chain-arr">
+          <Ico name="chevron-right" s={15} />
+        </span>
+        <button className="g-chain-node t-ok" onClick={() => nav.jump('data', 'domains')}>
+          <span className="g-chain-k">
+            <span className="ic">
+              <Ico name="database" s={13} />
+            </span>
+            对象 · 数据域
+          </span>
+          <span className="g-chain-v">{domains.length}</span>
+          <span className="g-chain-h">
+            企业运营什么 —— {objectRows.length} 个对象,发布即入运营台账
+          </span>
+        </button>
       </div>
 
       <Sec ico="flag" title="待补清单" extra="定义上的缺口聚在这里,点进即改 —— 不散落在四库">
@@ -144,34 +174,6 @@ export function BlueprintHome({ nav }: HomeProps) {
         )}
       </Sec>
 
-      <Sec ico="route" title="从这里进四库" extra="每库一页:定义在库里改,缺口在上面看">
-        <div className="g-entries">
-          <Entry
-            ico="workflow"
-            title="流程包 · 企业以哪些流转运转"
-            desc="五要素编排、版本谱系、边映射校验;调起规则也在本区"
-            onClick={() => nav.jump('workflows', 'pkgs')}
-          />
-          <Entry
-            ico="boxes"
-            title="活动库 · 每件事怎么干"
-            desc="已安装活动的资产货架:契约面、范式、两条版本序列"
-            onClick={() => nav.jump('library', 'shelf')}
-          />
-          <Entry
-            ico="wrench"
-            title="工具箱 · 系统能对世界做什么"
-            desc="读类过程中自由调用,写类只登记动作意向、放行后落地"
-            onClick={() => nav.jump('tools', 'catalog')}
-          />
-          <Entry
-            ico="database"
-            title="数据域 · 企业运营什么"
-            desc="域与对象的结构定义;行数据在运营中心的台账看"
-            onClick={() => nav.jump('data', 'domains')}
-          />
-        </div>
-      </Sec>
     </>
   );
 }