MVP底座⑦:活动库卡片化 —— 六槽位卡

卡上只报查得到的事实(范式/分类/包版本/资产生效版/上架):
清单里没有「实现到没到位」的可靠依据,不在卡上编一个章 —— 槽位状态记在 debt.md。

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

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

@@ -5,7 +5,8 @@
  * DOM 结构、类名(`g-*` + 色调 `t-*`)与文案原样保留,mock 常量换成服务端投影(README 平移规则 1/2/4)。
  * 区首页只负责导航,治理动作一律落在下钻详情页的**就地确认带**(影响预览三必答)。
  */
-import { Card, Chip, Clear, Entry, NList, NRow, Note, PageHead, QueryGate, St } from '@web-shared/gov/primitives.tsx';
+import { Ico } from '@web-shared/Ico.tsx';
+import { Card, Chip, Clear, Entry, Note, PageHead, QueryGate, St } from '@web-shared/gov/primitives.tsx';
 import { PARA } from '@web-shared/gov/tone.ts';
 import type { Nav } from '@web-shared/gov/gov-route.ts';
 import {
@@ -24,32 +25,51 @@ export function LibraryHome({ nav }: HomeProps) {
         <Note>
           活动是任务的<b>定义</b>:编排引用一个活动,运行时就长出一个任务。业务分类 × 活动类型两维平级;
           每活动两条版本序列——包版本走安装两审,资产版本走进化管线。
+          <b>审批点与网关不在这里</b>:它们是流程层的系统内置要素,零开发、不入库。
         </Note>
-      <NList>
+        {activities.length === 0 ? (
+          <Clear>货架是空的 —— 装一个活动进来,编排里才引用得到它。</Clear>
+        ) : (
+          <div className="g-shelf">
             {activities.map((a) => {
-          const effective = a.assetVersions.filter((v) => v.effective);
+              const para = PARA[a.paradigm];
+              const latest = a.packageVersions[a.packageVersions.length - 1];
+              const effective = a.assetVersions.filter((v) => v.effective).length;
               return (
-            <NRow
+                <button
                   key={a.activityId}
-              tone={PARA[a.paradigm].tone}
-              ico={PARA[a.paradigm].ico}
-              title={a.name}
-              sub={`${a.activityId} · ${a.category}`}
-              cols={[
-                { k: '类型', v: PARA[a.paradigm].label },
-                { k: '包版本', v: <span className="g-mono">{a.packageVersions.map((p) => p.version).join(', ')}</span> },
-                { k: '资产生效版', v: <span className="g-mono">{effective.length}</span> },
-              ]}
-              right={
-                <St tone={a.enabled ? 'ok' : 'mute'} ico={a.enabled ? 'circle-check' : 'power'}>
-                  {a.enabled ? '已启用' : '已停用'}
-                </St>
-              }
+                  className={'g-tile t-' + para.tone}
                   onClick={() => nav.push({ k: 'act', id: a.activityId })}
-            />
+                >
+                  <span className="g-tile-h">
+                    <span className="g-tile-i">
+                      <Ico name={para.ico} s={16} />
+                    </span>
+                    <span className="g-tile-t">
+                      <b>{a.name}</b>
+                      <em>{a.activityId}</em>
+                    </span>
+                    <Chip tone={para.tone}>{para.label}</Chip>
+                  </span>
+                  <span className="g-tile-m">
+                    <Chip ico="boxes">{a.category}</Chip>
+                    <Chip ico="git-commit">包 v{latest?.version ?? '—'}</Chip>
+                  </span>
+                  <span className="g-tile-f">
+                    {/*
+                      只报查得到的事实:资产生效版数与上架状态。
+                      「实现到没到位」这一层,清单里没有可靠依据 —— 不在卡上编一个章。
+                    */}
+                    <St tone={a.enabled ? 'ok' : 'mute'} ico={a.enabled ? 'circle-check' : 'power'}>
+                      {a.enabled ? '已上架' : '已停用'}
+                    </St>
+                    <span className="r">资产生效 {effective}</span>
+                  </span>
+                </button>
               );
             })}
-      </NList>
+          </div>
+        )}
       </>
     </QueryGate>
   );