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

/**
 * feature `gov-activity` —— 活动库:两维分类 × 包版本 × 资产版本
 *
 * 自 `~/coding/JCAI_PRD/governance/_components/Governance.tsx` 平移:
 * 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 { PARA } from '@web-shared/gov/tone.ts';
import type { Nav } from '@web-shared/gov/gov-route.ts';
import {
  useGovActivities,
  useGovMemory,
} from '@web-shared/gov/gov-api.ts';

export type HomeProps = { tab: string; nav: Nav };

export function LibraryHome({ nav }: HomeProps) {
  const q = useGovActivities();
  const activities = q.data?.activities ?? [];
  return (
    <QueryGate query={q}>
    <>
      <Note>
        活动是任务的<b>定义</b>:编排引用一个活动,运行时就长出一个任务。业务分类 × 活动类型两维平级;
        每活动两条版本序列——包版本走安装两审,资产版本走进化管线。
      </Note>
      <NList>
        {activities.map((a) => {
          const effective = a.assetVersions.filter((v) => v.effective);
          return (
            <NRow
              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>
              }
              onClick={() => nav.push({ k: 'act', id: a.activityId })}
            />
          );
        })}
      </NList>
    </>
    </QueryGate>
  );
}

/* ---------------- ⑥ 工具管理 ---------------- */

export function ActPage({ id, nav }: { id: string; nav: Nav }) {
  const q = useGovActivities();
  const memory = useGovMemory(id);
  const a = (q.data?.activities ?? []).find((x) => x.activityId === id);
  if (a === undefined) return <Note>活动不存在。</Note>;
  return (
    <>
      <PageHead
        ico={PARA[a.paradigm].ico}
        tone={PARA[a.paradigm].tone}
        kicker={`活动 · ${a.activityId}`}
        title={a.name}
        chips={
          <>
            <Chip tone={PARA[a.paradigm].tone}>{PARA[a.paradigm].label}</Chip>
            <Chip ico="tag">{a.category}</Chip>
            <Chip tone={a.enabled ? 'ok' : 'mute'}>{a.enabled ? '已启用' : '已停用'}</Chip>
          </>
        }
        desc={PARA[a.paradigm].full + ' —— 活动是系统外开发、经此安装的外装件。'}
      />
      <Card ico="package" title="包版本 · 安装两审">
        <div className="g-rows">
          {a.packageVersions.map((p) => (
            <div key={p.version}>
              <em>v{p.version}</em>
              <b className="mono">
                {p.state} · {p.installedAt.slice(0, 16).replace('T', ' ')}
              </b>
            </div>
          ))}
        </div>
      </Card>
      <Card ico="trending-up" title="资产版本 · 进化管线">
        <div className="g-rows">
          {a.assetVersions.map((v, i) => (
            <div key={i}>
              <em>
                {v.kind} v{v.version}
              </em>
              <b className="mono">{v.effective ? '生效中' : '历史'}</b>
            </div>
          ))}
          {a.assetVersions.length === 0 && <Clear>尚无资产版本。</Clear>}
        </div>
      </Card>
      <Entry
        ico="layers"
        title="活动记忆"
        desc={`四层条目 · 当前 ${(memory.data?.entries ?? []).length} 条`}
        onClick={() => nav.jump('memory', 'layers')}
      />
    </>
  );
}