From c50e3367926fd43eaa4b472538f02f467c2ea6cc Mon Sep 17 00:00:00 2001
From: zizi <ChocoBunrpd@catlover.com>
Date: Tue, 16 Jun 2026 10:24:13 +0000
Subject: [PATCH] =?UTF-8?q?feat(studio):=20feed=20=E5=8D=96=E7=9B=B8?=
 =?UTF-8?q?=E6=89=93=E7=A3=A8=E2=80=94=E2=80=94=E4=BA=92=E5=8A=A8=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=8E=BB=E7=92=83=E8=B4=A8=E6=84=9F=20+=20=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=B0=81=E9=9D=A2"=E6=97=A0=E5=9B=BE=E4=B9=9F?=
 =?UTF-8?q?=E5=A5=BD=E7=9C=8B"(=E8=AF=84=E5=AE=A1=20V-1/V-2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- V-1 互动按钮(InteractBar):深蓝实底 rgba(16,21,34,.6)→半透白 rgba(255,255,255,.10)+backdrop-filter blur(8px)+box-shadow,抖音式悬浮玻璃;图标/计数/点赞态行为不变
- V-2 卡片封面(GameCard+新增 utils/coverGradient.ts):纯确定性 FNV-1a hash→5套渐变主题(青绿/森系/青紫/暖/冷)+3套装饰,无封面卡按 title 分化渐变+柔光点+波形(无图也好看);真实封面优先逻辑不变
- verify:vue-tsc 类型门逮修一处真类型问题(computed 早返回{});build双绿;真机 :4173 CDP 实算样式(bg rgba(255,255,255,.1)/blur8)+截图(9卡按title渐变各异)双证
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 game-studio/src/components/GameCard.vue    |  80 +++++++++++++-
 game-studio/src/components/InteractBar.vue |  12 ++-
 game-studio/src/utils/coverGradient.ts     | 120 +++++++++++++++++++++
 3 files changed, 205 insertions(+), 7 deletions(-)
 create mode 100644 game-studio/src/utils/coverGradient.ts

diff --git a/game-studio/src/components/GameCard.vue b/game-studio/src/components/GameCard.vue
index 83d71b92..3b7ab0e1 100644
--- a/game-studio/src/components/GameCard.vue
+++ b/game-studio/src/components/GameCard.vue
@@ -7,6 +7,7 @@
  */
 import { computed } from 'vue'
 import type { FeedCard } from '../api/types'
+import { resolveCoverStyle } from '../utils/coverGradient'
 
 const props = defineProps<{
   /** 游戏流卡片数据（严格贴契约 FeedCard） */
@@ -33,6 +34,26 @@ const hasCover = computed(() => {
   const url = props.card.coverUrl
   return !!url && !PLACEHOLDER_COVER_RE.test(url)
 })
+
+/**
+ * 无封面时的确定性渐变兜底样式（spec §3.3 V-2）：按 title（兜底 gameId）算稳定 hash，
+ * 取 ≥3 套青绿/青紫/暖色系渐变 + 柔光点 + 波形装饰之一，让无图卡也有辨识度、不千篇一律。
+ * 仅在 !hasCover 时计算并下发到 CSS 变量（有真封面时为 null，不渲染兜底装饰）。
+ */
+const coverFallback = computed(() => (hasCover.value ? null : resolveCoverStyle(props.card)))
+/** 兜底底纹的内联 CSS 变量（渐变/柔光色/波形色/柔光落位）；有真封面时返回空对象。 */
+const fallbackVars = computed<Record<string, string>>(() => {
+  const f = coverFallback.value
+  const vars: Record<string, string> = {}
+  if (!f) return vars
+  vars['--cover-grad'] = f.theme.gradient
+  vars['--cover-glow'] = f.theme.glow
+  vars['--cover-wave'] = f.theme.wave
+  vars['--cover-glow-top'] = f.decor.glowTop
+  vars['--cover-glow-right'] = f.decor.glowRight
+  // 波形相位不走 CSS 变量，改用模板上的 --wave{N} 类切换 clip-path（见 template :class）
+  return vars
+})
 </script>
 
 <template>
@@ -43,8 +64,15 @@ const hasCover = computed(() => {
       :style="{ backgroundImage: hasCover ? `url(${card.coverUrl})` : undefined }"
       @click="emit('play', { gameId: card.gameId, versionId: card.versionId })"
     >
-      <!-- 无封面（含 1×1 占位图）时的标题底纹兜底 -->
-      <div v-if="!hasCover" class="game-card__cover-fallback">{{ card.title }}</div>
+      <!-- 无封面（含 1×1 占位图）时的渐变底纹兜底：按 hash 选主题渐变 + 柔光点(::before) + 波形(::after) + 标题 -->
+      <div
+        v-if="!hasCover"
+        class="game-card__cover-fallback"
+        :class="`game-card__cover-fallback--wave${coverFallback?.decor.wavePhase ?? 0}`"
+        :style="fallbackVars"
+      >
+        <span class="game-card__cover-fallback-title">{{ card.title }}</span>
+      </div>
       <!-- 中央播放按钮 -->
       <div class="game-card__play">▶</div>
     </div>
@@ -82,6 +110,8 @@ const hasCover = computed(() => {
   overflow: hidden;
   cursor: pointer;
 }
+/* 无封面兜底底纹：渐变主题由 JS 按 hash 下发到 --cover-* 变量（多套青绿/青紫/暖色，见 utils/coverGradient.ts）。
+   背景=主题渐变；::before=右上柔光聚光点；::after=底部波形装饰；标题居中浮于装饰之上。 */
 .game-card__cover-fallback {
   position: absolute;
   inset: 0;
@@ -89,11 +119,53 @@ const hasCover = computed(() => {
   align-items: center;
   justify-content: center;
   padding: 24px;
+  overflow: hidden;
+  /* --cover-grad 由组件按 hash 注入；变量缺省时退回原中性渐变（健壮兜底） */
+  background: var(--cover-grad, linear-gradient(135deg, var(--panel), var(--panel-2)));
+}
+/* 右上柔光聚光点（对齐 demo .game-cover::before 的暖光球，落位由 --cover-glow-* 错开） */
+.game-card__cover-fallback::before {
+  content: '';
+  position: absolute;
+  top: var(--cover-glow-top, 18px);
+  right: var(--cover-glow-right, 28px);
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--cover-glow, rgba(49, 230, 255, 0.28));
+  box-shadow: 0 0 30px var(--cover-glow, rgba(49, 230, 255, 0.28));
+  pointer-events: none;
+}
+/* 底部波形装饰（对齐 demo .game-cover::after 的折线波纹，向下渐隐融入卡底；相位由变体类切换 clip-path） */
+.game-card__cover-fallback::after {
+  content: '';
+  position: absolute;
+  left: -8%;
+  right: -8%;
+  bottom: 0;
+  height: 54%;
+  background: linear-gradient(180deg, var(--cover-wave, rgba(49, 230, 255, 0.4)), rgba(9, 11, 21, 0.96));
+  clip-path: polygon(0 100%, 16% 40%, 27% 72%, 42% 25%, 58% 72%, 74% 36%, 100% 100%);
+  pointer-events: none;
+}
+/* 三套波形相位（错开峰谷，让相邻同主题卡也不雷同） */
+.game-card__cover-fallback--wave1::after {
+  clip-path: polygon(0 100%, 12% 56%, 30% 30%, 48% 66%, 63% 28%, 82% 60%, 100% 100%);
+}
+.game-card__cover-fallback--wave2::after {
+  clip-path: polygon(0 100%, 20% 34%, 36% 70%, 52% 38%, 68% 74%, 86% 42%, 100% 100%);
+}
+/* 兜底标题（浮于渐变与装饰之上） */
+.game-card__cover-fallback-title {
+  position: relative;
+  z-index: 1;
+  max-width: 100%;
   text-align: center;
   font-size: 18px;
   font-weight: 700;
-  color: var(--muted);
-  background: linear-gradient(135deg, var(--panel), var(--panel-2));
+  line-height: 1.35;
+  color: var(--ink);
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
 }
 /* 中央播放按钮 */
 .game-card__play {
diff --git a/game-studio/src/components/InteractBar.vue b/game-studio/src/components/InteractBar.vue
index 25e003f3..ed3a30bb 100644
--- a/game-studio/src/components/InteractBar.vue
+++ b/game-studio/src/components/InteractBar.vue
@@ -69,10 +69,16 @@ const emit = defineEmits<{ (e: 'interact', action: FeedAction): void }>()
   align-items: center;
   justify-content: center;
   font-size: 20px;
-  background: rgba(16, 21, 34, 0.6);
-  border: 1px solid var(--border);
+  /* 抖音式悬浮玻璃感（对齐 demo .feed-action i，spec §3.3 V-1）：
+     半透白底 + 半透白描边 + 轻投影，配 backdrop-filter 模糊出通透玻璃层次。 */
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
+  /* 模糊适度（8px）兼顾移动端性能；-webkit- 前缀兜底 iOS Safari/旧 WebView */
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
   border-radius: 50%;
-  transition: transform 0.1s ease, color 0.15s ease;
+  transition: transform 0.1s ease, color 0.15s ease, border-color 0.15s ease;
 }
 .interact-bar__item:active .interact-bar__icon {
   transform: scale(0.9);
diff --git a/game-studio/src/utils/coverGradient.ts b/game-studio/src/utils/coverGradient.ts
new file mode 100644
index 00000000..d97e86e7
--- /dev/null
+++ b/game-studio/src/utils/coverGradient.ts
@@ -0,0 +1,120 @@
+/**
+ * coverGradient —— feed 卡片「无封面也好看」的确定性渐变兜底工具（纯前端，零副作用）。
+ *
+ * 背景（spec §3.3 V-2）：真实生成多无缩略图，旧逻辑统一退「单渐变标题底纹」→ 千篇一律。
+ * demo `.game-cover` 的做法是按主题给 ≥3 套渐变 + 轻装饰（聚光点/波形），让无图卡也有辨识度。
+ * 本工具据卡片稳定标识（title 为主、gameId 兜底）算确定性 hash，从预置渐变/装饰集中取一套，
+ * 保证「同 title 永远同渐变」（spec 硬约束）、不同卡尽量错开，不引入随机性、不依赖任何运行时状态。
+ *
+ * 纯函数定位：只做字符串 → 主题映射，绝不发请求、不读 store、不碰 DOM。
+ * 真实封面（OSS http(s) 图）仍由组件优先用作背景，本兜底仅在无封面时启用。
+ */
+
+/**
+ * 单套封面主题：背景渐变 + 一个聚光点色（柔光装饰）+ 一个波形描边色（底部波纹装饰）。
+ * 三套覆盖 青绿 / 青紫 / 暖色 三个色系（对齐 demo `.game-cover` / `.ugc` / `.action` 三主题取向），
+ * 全部沿用 D4 暗色科技风、与 tokens.css 色板同源，保证整体观感统一。
+ */
+export interface CoverTheme {
+  /** 主背景渐变（CSS linear-gradient 字符串） */
+  gradient: string
+  /** 右上柔光聚光点颜色（rgba，含透明，叠 box-shadow 出光晕） */
+  glow: string
+  /** 底部波形装饰描边/填充色（rgba，向下渐隐融入卡底） */
+  wave: string
+}
+
+/**
+ * 预置主题集（≥3 套，覆盖青绿/青紫/暖三色系）。
+ * 顺序即 hash 取模索引顺序；后续可追加，不影响既有 title 的稳定性（hash 不变、集合扩容会重映射，
+ * 故扩容须谨慎——MVP 内固定为这 5 套，兼顾辨识度与统一感）。
+ */
+const COVER_THEMES: CoverTheme[] = [
+  // 0 · 青绿主调（demo 默认 .game-cover 取向：青 → 紫红 → 深底）
+  {
+    gradient: 'linear-gradient(160deg, #18384a 0%, #4c2344 56%, #121626 100%)',
+    glow: 'rgba(49, 230, 255, 0.30)', // cyan 柔光
+    wave: 'rgba(49, 230, 255, 0.42)',
+  },
+  // 1 · 青绿森系（demo .ugc 取向：墨绿 → 靛蓝 → 深底）
+  {
+    gradient: 'linear-gradient(160deg, #1b3d35 0%, #26315e 58%, #111620 100%)',
+    glow: 'rgba(124, 242, 164, 0.28)', // green 柔光
+    wave: 'rgba(124, 242, 164, 0.40)',
+  },
+  // 2 · 青紫主调（demo .action 取向：紫 → 青 → 深底）
+  {
+    gradient: 'linear-gradient(160deg, #2b1b4a 0%, #0e5360 58%, #121626 100%)',
+    glow: 'rgba(157, 124, 255, 0.30)', // violet 柔光
+    wave: 'rgba(49, 230, 255, 0.38)',
+  },
+  // 3 · 暖色主调（粉橙 → 紫 → 深底，补 demo 之外的暖色系，拉开多样性）
+  {
+    gradient: 'linear-gradient(160deg, #4a2330 0%, #3a2456 55%, #141324 100%)',
+    glow: 'rgba(255, 200, 87, 0.30)', // amber 柔光
+    wave: 'rgba(255, 102, 157, 0.40)', // pink 波形
+  },
+  // 4 · 冷青主调（青绿双调，整体偏冷亮，与 0/1 错开）
+  {
+    gradient: 'linear-gradient(160deg, #123a44 0%, #1d4a5e 52%, #0f1622 100%)',
+    glow: 'rgba(49, 230, 255, 0.26)',
+    wave: 'rgba(124, 242, 164, 0.38)',
+  },
+]
+
+/**
+ * 装饰朝向变体（柔光点落位 + 波形相位错开），让相邻卡即便同主题也有细微差异。
+ * 纯展示参数，组件据此摆放 ::before 聚光点与 ::after 波形 clip-path 的水平偏移。
+ */
+const DECOR_VARIANTS = [
+  { glowTop: '16px', glowRight: '20px', wavePhase: 0 },
+  { glowTop: '22px', glowRight: '64px', wavePhase: 1 },
+  { glowTop: '38px', glowRight: '28px', wavePhase: 2 },
+] as const
+
+export type CoverDecor = (typeof DECOR_VARIANTS)[number]
+
+/** 封面兜底样式解析结果：一套主题 + 一套装饰变体。 */
+export interface CoverStyle {
+  theme: CoverTheme
+  decor: CoverDecor
+}
+
+/**
+ * 32 位确定性字符串 hash（FNV-1a 变体）。
+ * 同输入恒同输出、跨端一致、无随机，用于把卡片标识稳定映射到主题/装饰索引。
+ * 返回非负整数。
+ */
+function hashString(input: string): number {
+  let h = 0x811c9dc5 // FNV offset basis
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i)
+    // FNV prime 乘法，用移位组合避免大数精度问题；最终用 >>> 0 收敛为 32 位无符号
+    h = (h + ((h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24))) >>> 0
+  }
+  return h >>> 0
+}
+
+/**
+ * 据卡片稳定标识解析无封面兜底的渐变主题 + 装饰变体。
+ *
+ * @param seed 卡片稳定标识：优先用 title（spec 硬约束「同 title 同渐变」），title 为空时退 gameId 字符串。
+ *             传入对象时取 title || String(gameId)，保证有可哈希种子、永不抛错。
+ * @returns 一套确定性的 { theme, decor }，供组件渲染兜底封面。
+ */
+export function resolveCoverStyle(seed: string | { title?: string; gameId?: number }): CoverStyle {
+  // 归一化种子：字符串直接用；对象优先 title，再退 gameId，最后退固定串兜底（确保非空、可哈希）
+  let key: string
+  if (typeof seed === 'string') {
+    key = seed
+  } else {
+    key = (seed.title && seed.title.trim()) || (seed.gameId != null ? `g${seed.gameId}` : '')
+  }
+  if (!key) key = 'zaomeng-fallback' // 极端兜底：无任何标识时给固定种子，避免 NaN/空哈希
+
+  const h = hashString(key)
+  // 主题与装饰用 hash 的不同位段取模，降低「主题相同则装饰也相同」的相关性
+  const theme = COVER_THEMES[h % COVER_THEMES.length]
+  const decor = DECOR_VARIANTS[(h >>> 8) % DECOR_VARIANTS.length]
+  return { theme, decor }
+}