修复 AGC 模板库筛选与卡片状态的表现缺陷

- 模板库筛选区改用共享筛选条与标签 chip：选中为实心品牌填充 + 反白文字，未选为浅底描边
- 未选中悬停不再借用品牌色（品牌色专属已选中），状态阶梯固定为静止 / 悬停 / 按下 / 选中
- 新增 getPlatformCategoryChipClassName 收敛筛选 chip 类名口径，模板库、资源画布、参考图弹窗与平台 Web 端共用
- PlatformSegmentedTabs 增加 accent 选中口径，与筛选 chip 共用 --platform-chip-* 语义色
- 修复卡片文字区按 grid auto 行排版导致的标题 / 简介 / 标签被裁：行高契约拆为分项常量，文字区固定 174
- 修复忙状态下动作行塞入第三个元素导致的按钮文案换行顶出卡片：忙状态写在触发它的按钮上
- 修复经典滚动条占宽导致的卡片区横向滚动条：按竖滚动条预留列宽后再算列宽行高
- 焦点环由 15% 透明度改为实心色并用 outline 绘制，选中项聚焦不再被状态投影盖掉
- 封面加载失败改为隐藏图片留中性底色，不再出现浏览器裂图图标
- 补充状态对比度、行高契约、滚动条预留、封面兜底与忙状态文案的回归测试
- 同步技术方案、踩坑记录与决策记录的口径

packages/shared/src/components/PlatformResourceFilterBar.tsx

@@ -1,6 +1,7 @@
 import { Search, Tag } from 'lucide-react';
 import type { Ref } from 'react';
 
+import { getPlatformCategoryChipClassName } from './platformCategoryChipModel';
 import { PlatformSegmentedTabs } from './PlatformSegmentedTabs';
 
 export type PlatformResourceFilterOption<TId extends string = string> = {
@@ -53,15 +54,6 @@ export type PlatformResourceFilterBarProps<TId extends string = string> =
       onToggleTag: (tag: string) => void;
     });
 
-function tagChipClassName(active: boolean) {
-  return [
-    'platform-category-chip gap-1.5 px-2.5 text-xs font-bold',
-    active ? 'platform-category-chip--active' : null,
-  ]
-    .filter(Boolean)
-    .join(' ');
-}
-
 /**
  * 资源搜索 + 功能分类 + 标签的筛选条。
  *
@@ -115,6 +107,9 @@ export function PlatformResourceFilterBar<TId extends string = string>({
         frame="bare"
         surface="transparent"
         size="sm"
+        // 选中项与下面的标签 chip 用同一套实心口径：筛选条里「哪个条件在生效」
+        // 只允许一种视觉语言。
+        tone="accent"
         className="platform-theme platform-theme--light min-w-0 flex-none"
       />
       {tagOptions.length > 0 ? (
@@ -130,7 +125,7 @@ export function PlatformResourceFilterBar<TId extends string = string>({
                 key={option.tag}
                 type="button"
                 aria-pressed={active}
-                className={tagChipClassName(active)}
+                className={getPlatformCategoryChipClassName(active)}
                 // 类型上 `tagItems` 必然带 `onToggleTag`；这一层兜底是给不带类型检查的
                 // 调用方（JS / 动态构造的 props）：没有处理函数就不该渲染成可点按钮。
                 disabled={!onToggleTag}
@@ -138,7 +133,12 @@ export function PlatformResourceFilterBar<TId extends string = string>({
               >
                 <Tag className="h-3 w-3" aria-hidden="true" />
                 <span>{option.tag}</span>
-                <span aria-hidden="true">{option.assetCount}</span>
+                <span
+                  className="platform-category-chip__count"
+                  aria-hidden="true"
+                >
+                  {option.assetCount}
+                </span>
               </button>
             );
           })}

packages/shared/src/components/PlatformSegmentedTabs.tsx

@@ -19,6 +19,7 @@ export type PlatformSegmentedTabsTone =
   | 'neutral'
   | 'warm'
   | 'rose'
+  | 'accent'
   | 'underline';
 export type PlatformSegmentedTabsFrame = 'panel' | 'bare';
 export type PlatformSegmentedTabsSemantics = 'segment' | 'tabs';
@@ -127,6 +128,12 @@ const PLATFORM_SEGMENTED_TABS_TONE_CLASS: Record<
       'border border-[#ff7890] bg-[linear-gradient(180deg,#ff7890_0%,#ff4f6a_100%)] text-white shadow-[0_8px_18px_rgba(244,63,94,0.16)]',
     idle: 'border border-[var(--platform-subpanel-border)] bg-white/76 text-[var(--platform-text-strong)] hover:border-[var(--platform-surface-hover-border)] hover:bg-white',
   },
+  // 与筛选 chip 的选中态共用同一组语义色：实心填充 + 反白文字。
+  // 未选中的悬停只加淡暖底 + 加深文字，不换成品牌色 —— 品牌色是「已选中」专用的。
+  accent: {
+    active: 'platform-segmented-tabs__item--solid',
+    idle: 'text-[var(--platform-text-base)] hover:bg-[var(--platform-warm-bg)] hover:text-[var(--platform-text-strong)]',
+  },
   underline: {
     active: 'text-[var(--platform-text-strong)]',
     idle: 'text-[var(--platform-text-muted)] hover:text-[var(--platform-text-base)]',

packages/shared/src/components/index.ts

@@ -17,6 +17,7 @@ export type {
 export { PlatformBackActionButton } from './PlatformBackActionButton';
 export type { PlatformBadgeProps, PlatformBadgeTone } from './PlatformBadge';
 export { PlatformBadge } from './PlatformBadge';
+export { getPlatformCategoryChipClassName } from './platformCategoryChipModel';
 export type {
   PlatformEmptyStateProps,
   PlatformEmptyStateSize,

packages/shared/src/components/platformCategoryChipModel.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+
+import { getPlatformCategoryChipClassName } from './platformCategoryChipModel';
+
+describe('getPlatformCategoryChipClassName', () => {
+  it('returns the shared chip chrome and only marks the active state when selected', () => {
+    const idle = getPlatformCategoryChipClassName(false);
+    expect(idle).toContain('platform-category-chip');
+    expect(idle).not.toContain('platform-category-chip--active');
+
+    const active = getPlatformCategoryChipClassName(true);
+    expect(active).toContain('platform-category-chip');
+    expect(active).toContain('platform-category-chip--active');
+  });
+});

packages/shared/src/components/platformCategoryChipModel.ts

@@ -0,0 +1,15 @@
+/**
+ * 分类 / 标签 chip 的类名口径。
+ *
+ * `platform-category-chip` 的公共表现（高度、圆角、hover、focus ring）挂在共享样式表里，
+ * 这里只负责「选中态」这一处分支，让资源画布、参考图弹窗、模板库这些宿主共用同一份定义，
+ * 不再各抄一遍类名字符串。
+ */
+export function getPlatformCategoryChipClassName(active: boolean): string {
+  return [
+    'platform-category-chip gap-1.5 px-2.5 text-xs font-bold',
+    active ? 'platform-category-chip--active' : null,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}

packages/shared/src/components/styles.css

@@ -540,7 +540,7 @@
   justify-content: center;
   border: 1px solid var(--platform-subpanel-border);
   border-radius: 0.78rem;
-  background: rgba(255, 255, 255, 0.04);
+  background: var(--platform-chip-idle-fill, rgba(255, 253, 250, 0.72));
   color: var(--platform-text-base);
   padding: 0 0.92rem;
   font-size: 0.88rem;
@@ -548,10 +548,59 @@
   white-space: nowrap;
 }
 
+/* 状态阶梯（三个状态必须一眼分得开）：
+   静止 = 浅底 + 中性描边；悬停 = 中性加描边 + 极淡暖底 + 常规文字（**不能**用品牌色，
+   否则一颗未选中的 chip 悬停起来就像已选中，等于把「选中」这个强状态用掉了）；
+   按下 = 再压一层；选中 = 实心品牌填充 + 反白文字，是唯一的强状态。 */
+.platform-category-chip:not(.platform-category-chip--active):hover {
+  border-color: var(--platform-surface-hover-border, rgba(204, 117, 76, 0.42));
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+  color: var(--platform-text-strong);
+}
+
+.platform-category-chip:not(.platform-category-chip--active):active {
+  border-color: var(--platform-warm-border, rgba(204, 117, 76, 0.28));
+  background: var(--platform-warm-bg, rgba(234, 204, 179, 0.32));
+}
+
 .platform-category-chip--active {
-  border-color: var(--platform-cool-border);
-  background: var(--platform-cool-bg);
-  color: var(--platform-cool-text);
+  border-color: var(--platform-chip-active-border, #7d3719);
+  background: var(
+    --platform-chip-active-fill,
+    linear-gradient(135deg, #b3542f, #8f3f22)
+  );
+  color: var(--platform-chip-active-text, #fffaf5);
+  box-shadow: var(
+    --platform-chip-active-shadow,
+    0 6px 14px rgba(150, 71, 39, 0.24)
+  );
+}
+
+/* chip 里的计数（标签命中数量）：次要信息，比标签文字轻一档；
+   选中态跟着标签文字一起变白，不参与不透明度衰减，避免落在 AA 以下。 */
+.platform-category-chip__count {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--platform-text-soft);
+}
+
+.platform-category-chip--active .platform-category-chip__count {
+  color: inherit;
+}
+
+/* 分段页签的「实心选中」项：与筛选 chip 共用同一组语义色，
+   避免两处各写一套「选中长什么样」。 */
+.platform-segmented-tabs__item--solid {
+  border-color: var(--platform-chip-active-border, #7d3719);
+  background: var(
+    --platform-chip-active-fill,
+    linear-gradient(135deg, #b3542f, #8f3f22)
+  );
+  color: var(--platform-chip-active-text, #fffaf5);
+  box-shadow: var(
+    --platform-chip-active-shadow,
+    0 6px 14px rgba(150, 71, 39, 0.24)
+  );
 }
 
 .platform-category-sort-button {
@@ -586,8 +635,11 @@
 .platform-category-filter-button:focus-visible,
 .platform-category-chip:focus-visible,
 .platform-category-sort-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+  /* 焦点环用 outline 而不是 box-shadow：选中态自己带 box-shadow（实心 chip 的投影），
+     用 box-shadow 画环会被状态投影覆盖，选中的 chip 就完全没有焦点提示。outline 不参与
+     box-shadow 的层叠，也不会撑开布局（offset 2px 落在元素外），选中态自己的投影照旧。 */
+  outline: 2px solid var(--platform-input-focus-ring);
+  outline-offset: 2px;
 }
 
 .platform-navigable-list-item {

packages/shared/src/theme.css

@@ -75,6 +75,15 @@
   --platform-cool-border: rgba(199, 117, 76, 0.24);
   --platform-cool-bg: rgba(238, 208, 183, 0.26);
   --platform-cool-text: #b76038;
+  /* 筛选 chip 的两态：未选是浅底描边，选中是**实心填充**。选中填充必须深到
+     白字仍过 WCAG AA，并且与未选底色的对比 ≥ 3:1 —— 否则「选中 / 未选中」
+     在米色页面上肉眼分不出来（旧口径两态对比只有 1.09:1）。
+     口径由 apps/ai-game-creator-shell/tests/workbenchThemeContrast.test.ts 钉住。 */
+  --platform-chip-idle-fill: rgba(255, 253, 250, 0.72);
+  --platform-chip-active-fill: linear-gradient(135deg, #b3542f, #8f3f22);
+  --platform-chip-active-border: #7d3719;
+  --platform-chip-active-text: #fffaf5;
+  --platform-chip-active-shadow: 0 6px 14px rgba(150, 71, 39, 0.24);
   --platform-neutral-border: rgba(226, 203, 184, 0.44);
   --platform-neutral-bg: rgba(255, 253, 250, 0.7);
   --platform-neutral-text: #7b6150;
@@ -150,7 +159,10 @@
   --platform-input-fill: rgba(255, 253, 250, 0.94);
   --platform-input-fill-focus: rgba(255, 254, 252, 0.96);
   --platform-input-highlight: rgba(255, 255, 255, 0.9);
-  --platform-input-focus-ring: rgba(204, 117, 76, 0.15);
+  /* 焦点环必须**看得见**：原来 15% 透明度合成到页面底色后只有 1.17:1，键盘用户
+     根本看不到焦点在哪。改成实心品牌色，对页面底色 4.3:1（≥ WCAG 非文本对比 3:1），
+     由 tests/workbenchThemeContrast.test.ts 钉住。 */
+  --platform-input-focus-ring: #b6623f;
   --platform-nav-item-text: #80695a;
   --platform-nav-item-text-active: #3d1f10;
   --platform-nav-item-hover-fill: rgba(253, 248, 243, 0.94);
@@ -343,6 +355,14 @@
   --platform-cool-border: rgba(103, 232, 249, 0.22);
   --platform-cool-bg: rgba(8, 145, 178, 0.14);
   --platform-cool-text: rgb(236 254 255);
+  /* 同浅色主题：选中态是实心填充。深色皮肤里「填充比底色更亮」才是可分辨的选中，
+     所以这里用亮靛蓝填充 + 深色文字，同时在渐变两端都满足
+     「文字 ≥ 4.5:1」「与未选底色 ≥ 3:1」。 */
+  --platform-chip-idle-fill: rgba(255, 255, 255, 0.05);
+  --platform-chip-active-fill: linear-gradient(135deg, #9fb0ff, #7b8cff);
+  --platform-chip-active-border: #b7c4ff;
+  --platform-chip-active-text: #0b1030;
+  --platform-chip-active-shadow: 0 8px 18px rgba(77, 92, 245, 0.32);
   --platform-neutral-border: rgba(255, 255, 255, 0.08);
   --platform-neutral-bg: rgba(255, 255, 255, 0.05);
   --platform-neutral-text: rgb(228 228 231);
@@ -414,7 +434,8 @@
   --platform-input-fill: rgba(255, 255, 255, 0.05);
   --platform-input-fill-focus: rgba(255, 255, 255, 0.08);
   --platform-input-highlight: rgba(255, 255, 255, 0.06);
-  --platform-input-focus-ring: rgba(91, 108, 255, 0.22);
+  /* 同浅色主题：深色皮肤用亮靛蓝焦点环，对深色底色 6.5:1。 */
+  --platform-input-focus-ring: #9fb0ff;
   --platform-nav-item-text: rgb(161 161 170);
   --platform-nav-item-text-active: rgb(238 248 255);
   --platform-nav-item-hover-fill: rgba(91, 108, 255, 0.08);