流程卡与活动卡按管理系统风重做:着色图标 · 状态胶囊 · 计量块

上一稿的两段式卡(头行 + 竖线分格)信息没错,视觉是素坯 —— 没有身份色、
没有状态语义色、数字排一排像表格,整片看过去是灰的。按管理后台的规格重做:

  · **头行**:40px 着色图标定身份(流程靛 · 活动青 · 审批琥珀)+ 名/标识 +
    **状态胶囊**(圆点 + 词:生效/上架走绿,下线/停用是灰,下线的图标同步转灰);
  · **计量块**:浅底圆角小块、数上名下 —— 边闭合不全那格整块点红,不只字红;
  · 活动卡的业务分类并进副标行(`rfq-intake · 统一报价`)—— 分类是唯一的一维,
    不值一枚独立签;
  · 卡 12px 圆角软影,悬停抬升;幽灵卡同尺寸虚线位。
  · 计量字号 14px、卡最小宽 288 —— 「14/14」实测不再截断(scrollWidth 核过)。

中途试过一版「图纸风」(流程画几何缩略、活动画芯片、审批画比较器),
用户明确不要:**这是管理系统,不做电路隐喻** —— 图形三件连同珊格纸整体撤除,
只留这一套管理系统语言。

交互不变:整卡可点、⋯ 菜单(编辑/删除)、就地改名、幽灵卡新建/装入,全部复核过。
五闸绿。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

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

@@ -65,15 +65,17 @@ export function LibraryHome({ nav }: HomeProps) {
                 <div key={a.activityId} className={'g-fcard' + (a.enabled ? '' : ' off')}>
                   <button className="hit" aria-label={`打开 ${a.name}`} onClick={() => nav.push({ k: 'act', id: a.activityId })} />
                   <div className="hd">
-                    <span className="ico">
-                      <Ico name="boxes" s={15} />
+                    <span className="ico teal">
+                      <Ico name="boxes" s={17} />
                     </span>
                     <div className="ttl">
                       <b>{a.name}</b>
-                      <em>{a.activityId}</em>
+                      {/* 标识与业务分类同一行副标 —— 分类是活动库唯一的一维,不值一枚独立签 */}
+                      <em>
+                        {a.activityId} · {a.category}
+                      </em>
                     </div>
-                    <span className="tag">{a.category}</span>
-                    <span className={'stx' + (a.enabled ? ' on' : '')}>{a.enabled ? '已上架' : '已停用'}</span>
+                    <span className={'pill' + (a.enabled ? ' on' : '')}>{a.enabled ? '已上架' : '已停用'}</span>
                   </div>
                   <div className="plate">
                     <span>
@@ -164,8 +166,8 @@ function ApprovalTemplates({ data }: { data: GovApprovalTemplates['templates'] }
         {data.map((t) => (
           <div key={t.id} className="g-fcard">
             <div className="hd">
-              <span className="ico apr">
-                <Ico name="shield-check" s={15} />
+              <span className="ico amber">
+                <Ico name="shield-check" s={17} />
               </span>
               <div className="ttl">
                 <b>{t.name}</b>

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

@@ -268,7 +268,7 @@ function FlowShelf({ nav }: { nav: Nav }) {
               <button className="hit" aria-label={`打开 ${shown.name}`} onClick={() => nav.push({ k: 'pkg', id: f.id })} />
               <div className="hd">
                 <span className="ico">
-                  <Ico name="workflow" s={15} />
+                  <Ico name="workflow" s={17} />
                 </span>
                 <div className="ttl">
                   {renaming === f.id ? (
@@ -291,7 +291,7 @@ function FlowShelf({ nav }: { nav: Nav }) {
                   )}
                   <em>{f.id}</em>
                 </div>
-                <span className={'stx' + (f.active === undefined ? '' : ' on')}>
+                <span className={'pill' + (f.active === undefined ? '' : ' on')}>
                   {f.active === undefined ? '已下线' : `生效 v${f.active.version}`}
                 </span>
                 <button
@@ -306,7 +306,7 @@ function FlowShelf({ nav }: { nav: Nav }) {
                   <Ico name="more-horizontal" s={14} />
                 </button>
               </div>
-              {/* 数据板:四格等宽、竖线分隔 —— 一行说完这条流有多大、闭合没有 */}
+              {/* 计量块:一排说完这条流有多大、闭合没有 */}
               <div className="plate">
                 <span>
                   <b>{c.activity}</b>