From 49ef6eedb8dcb061f6a2ca4fc6621d91d542667c Mon Sep 17 00:00:00 2001
From: cheng <545895878@qq.com>
Date: Mon, 20 Jul 2026 23:25:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(game):=20=E6=96=B0=E5=A2=9E=E9=85=92?=
 =?UTF-8?q?=E6=A1=8C=E5=B0=8F=E6=B8=B8=E6=88=8F=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=9B=BE=E6=A0=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加了完整的酒桌小游戏页面，包含数字炸弹、猜拳大战、骰子大话和命运转盘四个游戏
- 实现了成就徽章组件的图标路径判断逻辑，支持图片和文字图标的动态切换
- 更新了饮酒分类常量中的白酒图标为酒杯样式，并修改成就图标为SVG路径
- 重构了动态卡片组件中的分类表情符号显示方式，支持SVG图标渲染
- 添加了游戏页面的路由配置和完整的交互功能实现
---
 common/constants.js             |    4 +-
 components/AchievementBadge.vue |   13 +-
 components/FeedCard.vue         |   17 +-
 pages.json                      |    7 +
 pages/games/games.vue           | 1282 +++++++++++++++++++++++++++++++
 pages/login/login.vue           |    4 +
 pages/profile/profile.vue       |   55 +-
 7 files changed, 1361 insertions(+), 21 deletions(-)
 create mode 100644 pages/games/games.vue

diff --git a/common/constants.js b/common/constants.js
index f78ad5a..532d584 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -2,7 +2,7 @@
 
 // 酒类分类
 export const DRINK_CATEGORIES = [
-  { id: 'baijiu', name: '白酒', emoji: '⚱️', icon: '/static/icons/baijiu.svg', defaultDegree: 52 },
+  { id: 'baijiu', name: '白酒', emoji: '🥃', icon: '/static/icons/baijiu.svg', defaultDegree: 52 },
   { id: 'beer', name: '啤酒', emoji: '🍺', defaultDegree: 5 },
   { id: 'wine', name: '红酒', emoji: '🍷', defaultDegree: 13 },
   { id: 'whisky', name: '洋酒', emoji: '🥂', defaultDegree: 40 },
@@ -176,7 +176,7 @@ export const ACHIEVEMENTS = [
     id: 'baijiu_master',
     name: '白酒达人',
     desc: '白酒累计打卡20次',
-    icon: '⚱️',
+    icon: '/static/icons/baijiu.svg',
     condition: { type: 'category_records', category: 'baijiu', value: 20 }
   },
   {
diff --git a/components/AchievementBadge.vue b/components/AchievementBadge.vue
index 89b0e62..a584999 100644
--- a/components/AchievementBadge.vue
+++ b/components/AchievementBadge.vue
@@ -5,7 +5,8 @@
     @click="$emit('click')"
   >
     <view class="badge-icon-wrap">
-      <text class="badge-icon">{{ achievement.icon }}</text>
+      <image v-if="isIconPath(achievement.icon)" :src="achievement.icon" class="badge-icon-img" mode="aspectFit"></image>
+      <text v-else class="badge-icon">{{ achievement.icon }}</text>
       <view v-if="!achievement.unlocked" class="badge-lock">
         <text class="badge-lock-icon">🔒</text>
       </view>
@@ -15,11 +16,14 @@
 </template>
 
 <script>
+import { isIconPath } from '../common/utils'
+
 export default {
   props: {
     achievement: { type: Object, required: true }
   },
-  emits: ['click']
+  emits: ['click'],
+  methods: { isIconPath }
 }
 </script>
 
@@ -74,6 +78,11 @@ export default {
   font-size: 48rpx;
 }
 
+.badge-icon-img {
+  width: 52rpx;
+  height: 52rpx;
+}
+
 .badge-lock {
   position: absolute;
   bottom: -4rpx;
diff --git a/components/FeedCard.vue b/components/FeedCard.vue
index 2a6f70e..4abc60d 100644
--- a/components/FeedCard.vue
+++ b/components/FeedCard.vue
@@ -20,7 +20,8 @@
     <!-- 饮酒标签 -->
     <view class="feed-drinks" v-if="feed.drinks && feed.drinks.length">
       <view class="feed-drink-tag" v-for="(d, i) in feed.drinks" :key="i">
-        <text class="feed-drink-emoji">{{ categoryEmoji(d.category) }}</text>
+        <image v-if="isIconPath(getCatIcon(d.category))" :src="getCatIcon(d.category)" class="feed-drink-icon-img" mode="aspectFit"></image>
+        <text v-else class="feed-drink-emoji">{{ getCatIcon(d.category) }}</text>
         <text class="feed-drink-name">{{ d.name }} {{ d.amount }}</text>
       </view>
     </view>
@@ -60,16 +61,16 @@
 </template>
 
 <script>
+import { getCatIcon, isIconPath } from '../common/utils'
+
 export default {
   name: 'FeedCard',
   props: {
     feed: { type: Object, default: () => ({}) }
   },
   methods: {
-    categoryEmoji(cat) {
-      const map = { baijiu: '🏺', beer: '🍺', wine: '🍷', whisky: '🥃', huangjiu: '🫖', sake: '🍶', fruit: '🍹', cocktail: '🍸' }
-      return map[cat] || '🍻'
-    },
+    getCatIcon,
+    isIconPath,
     feelingLabel(f) {
       const map = { sober: '😌 清醒', buzzed: '😊 微醺', tipsy: '😄 小醉', drunk: '🥴 喝多了' }
       return map[f] || '🍻 喝了点'
@@ -163,6 +164,12 @@ export default {
   font-size: $fs-sm;
 }
 
+.feed-drink-icon-img {
+  width: 32rpx;
+  height: 32rpx;
+  flex-shrink: 0;
+}
+
 .feed-drink-name {
   font-size: $fs-xs;
   color: $text-secondary;
diff --git a/pages.json b/pages.json
index 200a098..62b0ef7 100644
--- a/pages.json
+++ b/pages.json
@@ -90,6 +90,13 @@
 				"navigationStyle": "custom",
 				"navigationBarTitleText": ""
 			}
+		},
+		{
+			"path": "pages/games/games",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": ""
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/games/games.vue b/pages/games/games.vue
new file mode 100644
index 0000000..1aaf537
--- /dev/null
+++ b/pages/games/games.vue
@@ -0,0 +1,1282 @@
+<template>
+  <view :class="themeClass" class="page-container games-page">
+    <!-- 顶部导航 -->
+    <view class="games-nav" :style="{ paddingTop: navPaddingTop }">
+      <view class="nav-back" @click="goBack">
+        <text class="nav-back-icon">‹</text>
+      </view>
+      <text class="nav-title">{{ currentGame === 'hub' ? '酒桌小游戏' : gameMeta[currentGame].name }}</text>
+      <view class="nav-placeholder"></view>
+    </view>
+
+    <!-- ===== 游戏大厅 ===== -->
+    <view v-if="currentGame === 'hub'" class="game-hub">
+      <view class="hub-header">
+        <text class="hub-deco">🎲</text>
+        <view class="hub-title-wrap">
+          <text class="hub-title">今晚喝不喝？</text>
+          <text class="hub-sub">游戏说了算 · 愿赌服输</text>
+        </view>
+      </view>
+      <view class="hub-grid">
+        <view
+          class="hub-card"
+          v-for="(g, i) in gameList"
+          :key="g.id"
+          :class="'hub-card-' + g.id"
+          :style="'animation-delay:' + (i * 0.08) + 's'"
+          @click="enterGame(g.id)"
+        >
+          <view class="hub-card-glow"></view>
+          <text class="hub-card-emoji">{{ g.emoji }}</text>
+          <text class="hub-card-name">{{ g.name }}</text>
+          <text class="hub-card-desc">{{ g.desc }}</text>
+          <view class="hub-card-players">
+            <text>{{ g.players }}</text>
+          </view>
+        </view>
+      </view>
+      <view class="hub-tip">
+        <text class="hub-tip-icon">🍺</text>
+        <text class="hub-tip-text">小酌怡情，微醺即止，酒后不开车</text>
+      </view>
+    </view>
+
+    <!-- ===== 数字炸弹 ===== -->
+    <view v-if="currentGame === 'bomb'" class="game-stage">
+      <view class="bomb-arena">
+        <view class="bomb-range-card" :class="{ 'bomb-boom': bombBoom }">
+          <text class="bomb-emoji">{{ bombBoom ? '💥' : '💣' }}</text>
+          <view class="bomb-range-row">
+            <text class="bomb-num text-num">{{ bombMin }}</text>
+            <view class="bomb-fuse">
+              <view class="bomb-fuse-line" :style="{ width: bombFuseWidth }"></view>
+            </view>
+            <text class="bomb-num text-num">{{ bombMax }}</text>
+          </view>
+          <text class="bomb-hint">{{ bombBoom ? 'boom！踩中炸弹了！' : '在范围内猜一个数字，踩中就喝' }}</text>
+        </view>
+
+        <view v-if="bombBoom" class="result-banner result-drink">
+          <text class="result-emoji">🍻</text>
+          <text class="result-text">喝酒！一杯闷！</text>
+        </view>
+        <view v-else-if="bombSafe" class="result-banner result-safe">
+          <text class="result-emoji">😎</text>
+          <text class="result-text">安全过关，下一位！</text>
+        </view>
+
+        <view class="bomb-history" v-if="bombGuesses.length">
+          <view class="bomb-guess-tag" v-for="(g, i) in bombGuesses" :key="i" :class="g.dir === 'high' ? 'tag-high' : 'tag-low'">
+            <text>{{ g.val }} {{ g.dir === 'high' ? '↓' : '↑' }}</text>
+          </view>
+        </view>
+
+        <view class="bomb-input-area" v-if="!bombBoom && !bombSafe">
+          <input
+            class="bomb-input text-num"
+            type="number"
+            v-model="bombInput"
+            :placeholder="bombMin + ' ~ ' + bombMax"
+            confirm-type="done"
+            @confirm="bombGuess"
+          />
+          <view class="btn-amber bomb-go-btn" @click="bombGuess">
+            <text>拆弹</text>
+          </view>
+        </view>
+
+        <view class="game-actions" v-if="bombBoom || bombSafe">
+          <view class="btn-amber game-restart-btn" @click="bombReset">
+            <text>再来一轮</text>
+          </view>
+        </view>
+      </view>
+      <view class="game-rule-card">
+        <text class="rule-title">📖 玩法</text>
+        <text class="rule-text">系统随机埋一个 1~100 的数字炸弹，轮流猜数，范围不断缩小，踩中炸弹的人喝酒。范围越小心跳越快…</text>
+      </view>
+    </view>
+
+    <!-- ===== 猜拳大战 ===== -->
+    <view v-if="currentGame === 'rps'" class="game-stage">
+      <view class="rps-arena">
+        <view class="rps-score-row">
+          <view class="rps-score-item">
+            <text class="rps-score-label">你</text>
+            <text class="rps-score-num text-num">{{ rpsWin }}</text>
+          </view>
+          <text class="rps-vs">VS</text>
+          <view class="rps-score-item">
+            <text class="rps-score-label">酒神AI</text>
+            <text class="rps-score-num text-num">{{ rpsLose }}</text>
+          </view>
+        </view>
+
+        <view class="rps-battle">
+          <view class="rps-hand rps-hand-left" :class="{ 'hand-shake': rpsShaking, 'hand-reveal': !rpsShaking && rpsRound > 0 }">
+            <text class="rps-hand-emoji">{{ rpsShaking ? '✊' : rpsPlayerHand }}</text>
+          </view>
+          <view class="rps-clash" v-if="rpsResult">
+            <text class="rps-clash-text">{{ rpsResult === 'win' ? '⚡' : rpsResult === 'lose' ? '💫' : '🤝' }}</text>
+          </view>
+          <view class="rps-hand rps-hand-right" :class="{ 'hand-shake': rpsShaking, 'hand-reveal': !rpsShaking && rpsRound > 0 }">
+            <text class="rps-hand-emoji">{{ rpsShaking ? '✊' : rpsAiHand }}</text>
+          </view>
+        </view>
+
+        <view v-if="rpsResult === 'lose'" class="result-banner result-drink">
+          <text class="result-emoji">🍺</text>
+          <text class="result-text">输了！喝酒！</text>
+        </view>
+        <view v-else-if="rpsResult === 'win'" class="result-banner result-safe">
+          <text class="result-emoji">🎉</text>
+          <text class="result-text">赢了！对方喝！</text>
+        </view>
+        <view v-else-if="rpsResult === 'draw'" class="result-banner result-draw">
+          <text class="result-emoji">🔄</text>
+          <text class="result-text">平局，再来！</text>
+        </view>
+
+        <view class="rps-picker" v-if="!rpsShaking">
+          <view
+            class="rps-choice"
+            v-for="c in rpsChoices"
+            :key="c.key"
+            :class="{ 'choice-active': rpsLastPick === c.key }"
+            @click="rpsPlay(c.key)"
+          >
+            <text class="rps-choice-emoji">{{ c.emoji }}</text>
+            <text class="rps-choice-name">{{ c.name }}</text>
+          </view>
+        </view>
+        <view class="rps-countdown" v-else>
+          <text class="rps-countdown-text">{{ rpsCountdown }}</text>
+        </view>
+      </view>
+      <view class="game-rule-card">
+        <text class="rule-title">📖 玩法</text>
+        <text class="rule-text">和酒神AI猜拳，三局定胜负？不存在的——输一局喝一杯，赢一局对方喝，平局一起抿一口。</text>
+      </view>
+    </view>
+
+    <!-- ===== 骰子大话 ===== -->
+    <view v-if="currentGame === 'dice'" class="game-stage">
+      <view class="dice-arena">
+        <view class="dice-cup" :class="{ 'cup-shaking': diceShaking }" @click="diceRoll">
+          <view class="dice-pair">
+            <view class="die" :class="{ 'die-rolling': diceShaking }">
+              <text class="die-face">{{ diceShaking ? '?' : diceFaces[diceA] }}</text>
+            </view>
+            <view class="die die-2" :class="{ 'die-rolling': diceShaking }">
+              <text class="die-face">{{ diceShaking ? '?' : diceFaces[diceB] }}</text>
+            </view>
+          </view>
+          <text class="dice-sum text-num" v-if="!diceShaking && diceRound > 0">{{ diceA + diceB }}</text>
+        </view>
+
+        <view v-if="diceRule && !diceShaking" class="dice-rule-result" :class="diceRule.type === 'drink' ? 'result-drink' : diceRule.type === 'safe' ? 'result-safe' : 'result-fun'">
+          <text class="dice-rule-emoji">{{ diceRule.emoji }}</text>
+          <view class="dice-rule-text-wrap">
+            <text class="dice-rule-name">{{ diceRule.name }}</text>
+            <text class="dice-rule-desc">{{ diceRule.desc }}</text>
+          </view>
+        </view>
+
+        <view class="dice-history" v-if="diceHistory.length">
+          <view class="dice-history-item" v-for="(h, i) in diceHistory" :key="i">
+            <text class="dice-history-val text-num">{{ h.a }}+{{ h.b }}</text>
+            <text class="dice-history-rule">{{ h.rule }}</text>
+          </view>
+        </view>
+
+        <view class="btn-amber dice-roll-btn" @click="diceRoll" :class="{ 'btn-disabled': diceShaking }">
+          <text>{{ diceShaking ? '摇骰中…' : '🎲 摇骰子' }}</text>
+        </view>
+      </view>
+      <view class="game-rule-card">
+        <text class="rule-title">📖 玩法</text>
+        <text class="rule-text">轮流摇两颗骰子：豹子全桌敬你一杯；7点安全过关；双数你喝一杯；单数指定一人喝；点数≤4 干杯！</text>
+      </view>
+    </view>
+
+    <!-- ===== 命运转盘（老虎机式） ===== -->
+    <view v-if="currentGame === 'wheel'" class="game-stage">
+      <view class="wheel-arena">
+        <view class="slot-machine">
+          <view class="slot-glow" :class="{ 'slot-glow-on': wheelSpinning }"></view>
+          <view class="slot-window">
+            <view class="slot-strip" :style="{ transform: 'translateY(' + slotOffset + 'rpx)', transition: slotTransition }">
+              <view
+                class="slot-item"
+                v-for="(s, i) in slotStrip"
+                :key="i"
+                :class="{ 'slot-item-active': !wheelSpinning && wheelResult && i === slotTarget }"
+              >
+                <text class="slot-item-emoji">{{ s.emoji }}</text>
+                <text class="slot-item-label">{{ s.label }}</text>
+              </view>
+            </view>
+            <view class="slot-mask-top"></view>
+            <view class="slot-mask-bottom"></view>
+            <view class="slot-indicator">
+              <text class="slot-ind-arrow">▶</text>
+              <text class="slot-ind-arrow slot-ind-arrow-r">◀</text>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="wheelResult && !wheelSpinning" class="result-banner" :class="wheelResult.type === 'drink' ? 'result-drink' : wheelResult.type === 'safe' ? 'result-safe' : 'result-fun'">
+          <text class="result-emoji">{{ wheelResult.emoji }}</text>
+          <text class="result-text">{{ wheelResult.label }}！愿赌服输！</text>
+        </view>
+
+        <view class="btn-amber slot-spin-btn" :class="{ 'btn-disabled': wheelSpinning }" @click="wheelSpin">
+          <text>{{ wheelSpinning ? '命运转动中…' : '🎰 转一转' }}</text>
+        </view>
+      </view>
+      <view class="game-rule-card">
+        <text class="rule-title">📖 玩法</text>
+        <text class="rule-text">点击按钮转动命运滚轮，停下来时中间高亮的那格就是你的命运，不许耍赖！</text>
+      </view>
+    </view>
+
+    <!-- 返回大厅浮动按钮 -->
+    <view v-if="currentGame !== 'hub'" class="back-hub-btn" @click="currentGame = 'hub'">
+      <text>🏠 返回大厅</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import themeMixin from '../../common/theme-mixin'
+
+export default {
+  mixins: [themeMixin],
+  data() {
+    let navPaddingTop = '20px'
+    try {
+      const menuBtn = uni.getMenuButtonBoundingClientRect()
+      navPaddingTop = menuBtn.top + 'px'
+    } catch (e) {}
+    return {
+      navPaddingTop,
+      currentGame: 'hub',
+      gameList: [
+        { id: 'bomb', emoji: '💣', name: '数字炸弹', desc: '猜中即喝，心跳加速', players: '2人+' },
+        { id: 'rps', emoji: '✊', name: '猜拳大战', desc: '挑战酒神AI，输了干杯', players: '1人+' },
+        { id: 'dice', emoji: '🎲', name: '骰子大话', desc: '豹子通杀，七点保命', players: '2人+' },
+        { id: 'wheel', emoji: '🎡', name: '命运转盘', desc: '转到什么喝什么', players: '3人+' }
+      ],
+      gameMeta: {
+        bomb: { name: '💣 数字炸弹' },
+        rps: { name: '✊ 猜拳大战' },
+        dice: { name: '🎲 骰子大话' },
+        wheel: { name: '🎡 命运转盘' }
+      },
+      // --- 数字炸弹 ---
+      bombTarget: 0,
+      bombMin: 1,
+      bombMax: 100,
+      bombInput: '',
+      bombGuesses: [],
+      bombBoom: false,
+      bombSafe: false,
+      // --- 猜拳 ---
+      rpsChoices: [
+        { key: 'rock', emoji: '✊', name: '石头' },
+        { key: 'scissors', emoji: '✌️', name: '剪刀' },
+        { key: 'paper', emoji: '🖐', name: '布' }
+      ],
+      rpsPlayerHand: '❔',
+      rpsAiHand: '❔',
+      rpsShaking: false,
+      rpsCountdown: 3,
+      rpsResult: '',
+      rpsWin: 0,
+      rpsLose: 0,
+      rpsRound: 0,
+      rpsLastPick: '',
+      rpsTimer: null,
+      // --- 骰子 ---
+      diceFaces: ['', '⚀', '⚁', '⚂', '⚃', '⚄', '⚅'],
+      diceA: 1,
+      diceB: 1,
+      diceShaking: false,
+      diceRound: 0,
+      diceRule: null,
+      diceHistory: [],
+      // --- 转盘（老虎机式） ---
+      wheelSegments: [
+        { label: '喝一杯', emoji: '🍺', type: 'drink' },
+        { label: '真心话', emoji: '💬', type: 'fun' },
+        { label: '免一杯', emoji: '🛡️', type: 'safe' },
+        { label: '大冒险', emoji: '🔥', type: 'fun' },
+        { label: '干一杯', emoji: '🥂', type: 'drink' },
+        { label: '指定喝', emoji: '👉', type: 'drink' },
+        { label: '表演节目', emoji: '🎤', type: 'fun' },
+        { label: '双倍快乐', emoji: '🍻', type: 'drink' }
+      ],
+      slotOffset: -120,
+      slotTransition: 'none',
+      slotTarget: -1,
+      wheelSpinning: false,
+      wheelResult: null
+    }
+  },
+  computed: {
+    bombFuseWidth() {
+      const range = this.bombMax - this.bombMin
+      const pct = Math.max(8, Math.min(100, range))
+      return pct + '%'
+    },
+    // 老虎机滚动条：重复4轮方便滚动动画
+    slotStrip() {
+      const arr = []
+      for (let r = 0; r < 4; r++) {
+        this.wheelSegments.forEach(s => arr.push(s))
+      }
+      return arr
+    }
+  },
+  onLoad() {
+    this.bombReset()
+  },
+  onUnload() {
+    if (this.rpsTimer) clearInterval(this.rpsTimer)
+  },
+  onShareAppMessage() {
+    return {
+      title: '酒桌小游戏 - 今晚谁喝？来 battle！',
+      path: '/pages/games/games'
+    }
+  },
+  methods: {
+    goBack() {
+      if (this.currentGame !== 'hub') {
+        this.currentGame = 'hub'
+      } else {
+        uni.navigateBack({ delta: 1 })
+      }
+    },
+    enterGame(id) {
+      this.currentGame = id
+      if (id === 'bomb') this.bombReset()
+      if (id === 'rps') this.rpsResetRound()
+      if (id === 'dice') { this.diceRule = null; this.diceHistory = []; this.diceRound = 0 }
+      if (id === 'wheel') { this.wheelResult = null }
+    },
+
+    /* ========== 数字炸弹 ========== */
+    bombReset() {
+      this.bombTarget = Math.floor(Math.random() * 100) + 1
+      this.bombMin = 1
+      this.bombMax = 100
+      this.bombInput = ''
+      this.bombGuesses = []
+      this.bombBoom = false
+      this.bombSafe = false
+    },
+    bombGuess() {
+      const val = parseInt(this.bombInput)
+      if (isNaN(val) || val < this.bombMin || val > this.bombMax) {
+        uni.showToast({ title: `请输入 ${this.bombMin}~${this.bombMax} 的数字`, icon: 'none' })
+        return
+      }
+      if (val === this.bombTarget) {
+        this.bombBoom = true
+        uni.vibrateShort({ type: 'heavy' })
+        return
+      }
+      this.bombGuesses.push({ val, dir: val > this.bombTarget ? 'high' : 'low' })
+      if (val > this.bombTarget) {
+        this.bombMax = val - 1
+      } else {
+        this.bombMin = val + 1
+      }
+      this.bombInput = ''
+      uni.vibrateShort({ type: 'light' })
+      // 范围缩到1时安全过关
+      if (this.bombMin === this.bombMax && this.bombMin !== this.bombTarget) {
+        this.bombSafe = true
+      }
+    },
+
+    /* ========== 猜拳大战 ========== */
+    rpsResetRound() {
+      this.rpsPlayerHand = '❔'
+      this.rpsAiHand = '❔'
+      this.rpsResult = ''
+      this.rpsShaking = false
+    },
+    rpsPlay(key) {
+      if (this.rpsShaking) return
+      this.rpsLastPick = key
+      this.rpsResult = ''
+      this.rpsShaking = true
+      this.rpsCountdown = 3
+      this.rpsRound++
+      uni.vibrateShort({ type: 'light' })
+
+      this.rpsTimer = setInterval(() => {
+        this.rpsCountdown--
+        if (this.rpsCountdown <= 0) {
+          clearInterval(this.rpsTimer)
+          this.rpsTimer = null
+          this.rpsReveal(key)
+        }
+      }, 500)
+    },
+    rpsReveal(playerKey) {
+      const keys = ['rock', 'scissors', 'paper']
+      const emojis = { rock: '✊', scissors: '✌️', paper: '🖐' }
+      const aiKey = keys[Math.floor(Math.random() * 3)]
+      this.rpsPlayerHand = emojis[playerKey]
+      this.rpsAiHand = emojis[aiKey]
+      this.rpsShaking = false
+
+      if (playerKey === aiKey) {
+        this.rpsResult = 'draw'
+      } else if (
+        (playerKey === 'rock' && aiKey === 'scissors') ||
+        (playerKey === 'scissors' && aiKey === 'paper') ||
+        (playerKey === 'paper' && aiKey === 'rock')
+      ) {
+        this.rpsResult = 'win'
+        this.rpsWin++
+      } else {
+        this.rpsResult = 'lose'
+        this.rpsLose++
+        uni.vibrateShort({ type: 'heavy' })
+      }
+    },
+
+    /* ========== 骰子大话 ========== */
+    diceRoll() {
+      if (this.diceShaking) return
+      this.diceShaking = true
+      this.diceRule = null
+      this.diceRound++
+      uni.vibrateShort({ type: 'medium' })
+
+      // 摇动期间快速随机跳面
+      const flicker = setInterval(() => {
+        this.diceA = Math.floor(Math.random() * 6) + 1
+        this.diceB = Math.floor(Math.random() * 6) + 1
+      }, 80)
+
+      setTimeout(() => {
+        clearInterval(flicker)
+        this.diceA = Math.floor(Math.random() * 6) + 1
+        this.diceB = Math.floor(Math.random() * 6) + 1
+        this.diceShaking = false
+        this.diceApplyRule()
+        uni.vibrateShort({ type: 'heavy' })
+      }, 1200)
+    },
+    diceApplyRule() {
+      const sum = this.diceA + this.diceB
+      let rule
+      if (this.diceA === this.diceB) {
+        rule = { emoji: '👑', name: '豹子！', desc: '天选之人！全桌敬你一杯', type: 'safe' }
+      } else if (sum === 7) {
+        rule = { emoji: '🛡️', name: '七点保命', desc: '幸运7！安全过关', type: 'safe' }
+      } else if (sum <= 4) {
+        rule = { emoji: '💀', name: '天崩开局', desc: '点数太小，直接干杯！', type: 'drink' }
+      } else if (sum % 2 === 0) {
+        rule = { emoji: '🍺', name: '双数喝一杯', desc: '愿赌服输，一杯下肚', type: 'drink' }
+      } else {
+        rule = { emoji: '👉', name: '单数点名', desc: '指定一人喝一杯，就你了！', type: 'fun' }
+      }
+      this.diceRule = rule
+      this.diceHistory.unshift({ a: this.diceA, b: this.diceB, rule: rule.name })
+      if (this.diceHistory.length > 5) this.diceHistory.pop()
+    },
+
+    /* ========== 命运转盘（老虎机式） ========== */
+    wheelSpin() {
+      if (this.wheelSpinning) return
+      this.wheelSpinning = true
+      this.wheelResult = null
+      this.slotTarget = -1
+      uni.vibrateShort({ type: 'medium' })
+
+      const count = this.wheelSegments.length
+      const segH = 120 // 每格高度 rpx
+      const targetIndex = Math.floor(Math.random() * count)
+      // 目标位置在第3轮（索引 2*count + targetIndex）
+      const target = count * 2 + targetIndex
+      this.slotTarget = target
+
+      // 先瞬间回到起始位
+      this.slotTransition = 'none'
+      this.slotOffset = -segH // 显示第2个在中间
+
+      setTimeout(() => {
+        // 滚动到目标，中间项对齐窗口中心
+        this.slotTransition = 'transform 3s cubic-bezier(0.12, 0.75, 0.18, 1)'
+        this.slotOffset = -(target * segH) + segH // 让 target 居中（窗口显示3格，中间格偏移=1格）
+      }, 50)
+
+      setTimeout(() => {
+        this.wheelSpinning = false
+        this.wheelResult = this.wheelSegments[targetIndex]
+        uni.vibrateShort({ type: 'heavy' })
+      }, 3200)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.games-page {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
+}
+
+/* === 顶部导航 === */
+.games-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 $sp-lg;
+  height: 88rpx;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: $bg-base;
+}
+
+.nav-back {
+  width: 64rpx; height: 64rpx;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  background: $bg-elevated;
+  transition: transform $duration-fast $ease-out;
+  &:active { transform: scale(0.88); }
+}
+
+.nav-back-icon {
+  font-size: 44rpx;
+  color: $text-primary;
+  font-weight: $fw-bold;
+  margin-top: -6rpx;
+}
+
+.nav-title {
+  font-size: $fs-lg;
+  font-weight: $fw-bold;
+  color: $text-primary;
+}
+
+.nav-placeholder { width: 64rpx; }
+
+/* === 游戏大厅 === */
+.game-hub {
+  padding: $sp-xl $sp-lg 0;
+}
+
+.hub-header {
+  display: flex;
+  align-items: center;
+  gap: $sp-lg;
+  margin-bottom: $sp-xl;
+}
+
+.hub-deco {
+  font-size: 88rpx;
+  animation: hub-float 3s ease-in-out infinite;
+}
+
+@keyframes hub-float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-12rpx) rotate(8deg); }
+}
+
+.hub-title {
+  display: block;
+  font-size: $fs-2xl;
+  font-weight: $fw-black;
+  color: $text-primary;
+  letter-spacing: -1rpx;
+}
+
+.hub-sub {
+  display: block;
+  font-size: $fs-sm;
+  color: $text-tertiary;
+  margin-top: 8rpx;
+}
+
+.hub-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $sp-md;
+}
+
+.hub-card {
+  position: relative;
+  padding: $sp-xl $sp-lg;
+  border-radius: $radius-xl;
+  background: $bg-card;
+  border: 1rpx solid var(--border-faint, rgba(255,255,255,0.08));
+  overflow: hidden;
+  animation: card-enter 0.5s $ease-out both;
+  transition: transform $duration-fast $ease-out, box-shadow $duration-fast $ease-out;
+
+  &:active {
+    transform: scale(0.95);
+    box-shadow: $shadow-amber;
+  }
+}
+
+@keyframes card-enter {
+  from { opacity: 0; transform: translateY(40rpx) scale(0.92); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.hub-card-glow {
+  position: absolute;
+  width: 180rpx; height: 180rpx;
+  top: -60rpx; right: -60rpx;
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.hub-card-bomb .hub-card-glow { background: radial-gradient(circle, rgba(255,107,107,0.14) 0%, transparent 70%); }
+.hub-card-rps .hub-card-glow { background: radial-gradient(circle, rgba(232,168,56,0.14) 0%, transparent 70%); }
+.hub-card-dice .hub-card-glow { background: radial-gradient(circle, rgba(94,198,160,0.14) 0%, transparent 70%); }
+.hub-card-wheel .hub-card-glow { background: radial-gradient(circle, rgba(139,133,184,0.16) 0%, transparent 70%); }
+
+.hub-card-emoji {
+  display: block;
+  font-size: 72rpx;
+  margin-bottom: $sp-md;
+}
+
+.hub-card-name {
+  display: block;
+  font-size: $fs-lg;
+  font-weight: $fw-bold;
+  color: $text-primary;
+  margin-bottom: 8rpx;
+}
+
+.hub-card-desc {
+  display: block;
+  font-size: $fs-xs;
+  color: $text-tertiary;
+  line-height: $lh-normal;
+}
+
+.hub-card-players {
+  display: inline-flex;
+  margin-top: $sp-md;
+  padding: 4rpx 16rpx;
+  border-radius: $radius-full;
+  background: $bg-elevated;
+  text {
+    font-size: 18rpx;
+    color: $text-secondary;
+  }
+}
+
+.hub-tip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-sm;
+  margin-top: $sp-2xl;
+  padding: $sp-md;
+  border-radius: $radius-lg;
+  background: rgba(232,168,56,0.06);
+  border: 1rpx dashed var(--border-dashed, rgba(255,255,255,0.12));
+}
+
+.hub-tip-icon { font-size: 28rpx; }
+.hub-tip-text { font-size: $fs-xs; color: $text-tertiary; }
+
+/* === 游戏舞台通用 === */
+.game-stage {
+  padding: $sp-xl $sp-lg 0;
+  animation: stage-in 0.4s $ease-out both;
+}
+
+@keyframes stage-in {
+  from { opacity: 0; transform: translateY(30rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.game-rule-card {
+  margin-top: $sp-xl;
+  padding: $sp-lg;
+  border-radius: $radius-lg;
+  background: $bg-card;
+  border: 1rpx solid var(--border-faint, rgba(255,255,255,0.08));
+}
+
+.rule-title {
+  display: block;
+  font-size: $fs-sm;
+  font-weight: $fw-bold;
+  color: $text-secondary;
+  margin-bottom: $sp-sm;
+}
+
+.rule-text {
+  font-size: $fs-xs;
+  color: $text-tertiary;
+  line-height: $lh-loose;
+}
+
+.result-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-sm;
+  padding: $sp-lg;
+  border-radius: $radius-lg;
+  margin-top: $sp-lg;
+  animation: result-pop 0.4s $ease-bounce both;
+
+  &.result-drink {
+    background: linear-gradient(135deg, rgba(255,107,107,0.14), rgba(232,168,56,0.10));
+    border: 1rpx solid rgba(255,107,107,0.25);
+  }
+  &.result-safe {
+    background: linear-gradient(135deg, rgba(94,198,160,0.14), rgba(94,198,160,0.05));
+    border: 1rpx solid rgba(94,198,160,0.25);
+  }
+  &.result-fun {
+    background: linear-gradient(135deg, rgba(139,133,184,0.16), rgba(139,133,184,0.05));
+    border: 1rpx solid rgba(139,133,184,0.28);
+  }
+  &.result-draw {
+    background: $bg-elevated;
+    border: 1rpx solid var(--border-subtle, rgba(255,255,255,0.10));
+  }
+}
+
+@keyframes result-pop {
+  from { opacity: 0; transform: scale(0.7); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.result-emoji { font-size: 44rpx; }
+.result-text { font-size: $fs-lg; font-weight: $fw-bold; color: $text-primary; }
+
+.game-actions {
+  display: flex;
+  justify-content: center;
+  margin-top: $sp-xl;
+}
+
+.game-restart-btn {
+  min-width: 320rpx;
+  text-align: center;
+}
+
+.btn-amber {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $sp-md $sp-xl;
+  border-radius: $radius-full;
+  background: linear-gradient(135deg, var(--amber, #E8A838), var(--amber-deep, #C47F17));
+  box-shadow: var(--shadow-amber, 0 8rpx 32rpx rgba(232,168,56,0.25));
+  transition: transform $duration-fast $ease-out, opacity $duration-fast;
+  text { color: var(--text-on-amber, #0B0B14); font-size: $fs-base; font-weight: $fw-bold; }
+  &:active { transform: scale(0.94); }
+  &.btn-disabled { opacity: 0.5; pointer-events: none; }
+}
+
+/* === 数字炸弹 === */
+.bomb-arena { padding-top: $sp-md; }
+
+.bomb-range-card {
+  text-align: center;
+  padding: $sp-2xl $sp-xl;
+  border-radius: $radius-xl;
+  background: $bg-card;
+  border: 1rpx solid var(--border-faint, rgba(255,255,255,0.08));
+  transition: all $duration-base;
+
+  &.bomb-boom {
+    border-color: rgba(255,107,107,0.4);
+    background: linear-gradient(160deg, rgba(255,107,107,0.10), $bg-card);
+    animation: boom-shake 0.5s ease-out;
+  }
+}
+
+@keyframes boom-shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-14rpx) rotate(-1deg); }
+  40% { transform: translateX(12rpx) rotate(1deg); }
+  60% { transform: translateX(-8rpx); }
+  80% { transform: translateX(6rpx); }
+}
+
+.bomb-emoji {
+  display: block;
+  font-size: 96rpx;
+  margin-bottom: $sp-lg;
+  animation: bomb-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes bomb-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.12); }
+}
+
+.bomb-range-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-lg;
+}
+
+.bomb-num {
+  font-size: $fs-hero;
+  font-weight: $fw-black;
+  color: $text-primary;
+  line-height: 1;
+}
+
+.bomb-fuse {
+  width: 160rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: $bg-elevated;
+  overflow: hidden;
+}
+
+.bomb-fuse-line {
+  height: 100%;
+  border-radius: 4rpx;
+  background: linear-gradient(90deg, var(--mint, #5EC6A0), var(--amber, #E8A838), var(--coral, #FF6B6B));
+  transition: width 0.4s $ease-out;
+}
+
+.bomb-hint {
+  display: block;
+  margin-top: $sp-lg;
+  font-size: $fs-sm;
+  color: $text-tertiary;
+}
+
+.bomb-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $sp-sm;
+  margin-top: $sp-lg;
+  justify-content: center;
+}
+
+.bomb-guess-tag {
+  padding: 8rpx 20rpx;
+  border-radius: $radius-full;
+  animation: tag-in 0.3s $ease-bounce both;
+  text { font-size: $fs-sm; font-weight: $fw-medium; }
+  &.tag-high {
+    background: rgba(255,107,107,0.12);
+    text { color: var(--coral, #FF6B6B); }
+  }
+  &.tag-low {
+    background: rgba(94,198,160,0.12);
+    text { color: var(--mint, #5EC6A0); }
+  }
+}
+
+@keyframes tag-in {
+  from { opacity: 0; transform: scale(0.5); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.bomb-input-area {
+  display: flex;
+  gap: $sp-md;
+  margin-top: $sp-xl;
+}
+
+.bomb-input {
+  flex: 1;
+  height: 96rpx;
+  padding: 0 $sp-xl;
+  border-radius: $radius-full;
+  background: var(--bg-input, rgba(255,255,255,0.08));
+  border: 1rpx solid var(--border-subtle, rgba(255,255,255,0.10));
+  color: $text-primary;
+  font-size: $fs-xl;
+  text-align: center;
+  font-weight: $fw-bold;
+}
+
+.bomb-go-btn {
+  min-width: 180rpx;
+  height: 96rpx;
+}
+
+/* === 猜拳大战 === */
+.rps-arena { padding-top: $sp-md; }
+
+.rps-score-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-xl;
+  margin-bottom: $sp-xl;
+}
+
+.rps-score-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rpx;
+}
+
+.rps-score-label { font-size: $fs-xs; color: $text-tertiary; }
+.rps-score-num { font-size: $fs-2xl; font-weight: $fw-black; color: $amber; }
+.rps-vs { font-size: $fs-sm; font-weight: $fw-black; color: $text-tertiary; letter-spacing: 2rpx; }
+
+.rps-battle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-xl;
+  padding: $sp-xl 0;
+}
+
+.rps-hand {
+  width: 180rpx; height: 180rpx;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  background: $bg-card;
+  border: 2rpx solid var(--border-faint, rgba(255,255,255,0.08));
+  box-shadow: $shadow-md;
+}
+
+.rps-hand-emoji { font-size: 80rpx; }
+
+.hand-shake {
+  animation: hand-shake 0.5s ease-in-out infinite;
+}
+
+@keyframes hand-shake {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-20rpx) rotate(-6deg); }
+  75% { transform: translateY(10rpx) rotate(4deg); }
+}
+
+.hand-reveal {
+  animation: hand-pop 0.35s $ease-bounce both;
+}
+
+@keyframes hand-pop {
+  from { transform: scale(0.6) rotate(-10deg); }
+  to { transform: scale(1) rotate(0deg); }
+}
+
+.rps-clash-text { font-size: 56rpx; animation: clash-flash 0.6s ease-out both; }
+
+@keyframes clash-flash {
+  0% { opacity: 0; transform: scale(2.4); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+.rps-picker {
+  display: flex;
+  justify-content: center;
+  gap: $sp-lg;
+  margin-top: $sp-lg;
+}
+
+.rps-choice {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $sp-sm;
+  padding: $sp-lg $sp-xl;
+  border-radius: $radius-xl;
+  background: $bg-card;
+  border: 2rpx solid var(--border-faint, rgba(255,255,255,0.08));
+  transition: all $duration-fast $ease-out;
+
+  &:active { transform: scale(0.9); }
+  &.choice-active {
+    border-color: rgba(232,168,56,0.5);
+    background: rgba(232,168,56,0.08);
+    box-shadow: var(--shadow-amber, 0 8rpx 32rpx rgba(232,168,56,0.25));
+  }
+}
+
+.rps-choice-emoji { font-size: 56rpx; }
+.rps-choice-name { font-size: $fs-xs; color: $text-secondary; font-weight: $fw-medium; }
+
+.rps-countdown {
+  display: flex;
+  justify-content: center;
+  margin-top: $sp-lg;
+}
+
+.rps-countdown-text {
+  font-size: $fs-hero;
+  font-weight: $fw-black;
+  color: $amber;
+  animation: count-zoom 0.5s $ease-out both;
+}
+
+@keyframes count-zoom {
+  from { opacity: 0; transform: scale(1.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* === 骰子大话 === */
+.dice-arena {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: $sp-md;
+}
+
+.dice-cup {
+  position: relative;
+  width: 400rpx; height: 320rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-lg;
+  border-radius: $radius-xl;
+  background: $bg-card;
+  border: 1rpx solid var(--border-faint, rgba(255,255,255,0.08));
+  box-shadow: $shadow-md;
+  transition: box-shadow $duration-base;
+
+  &.cup-shaking {
+    animation: cup-shake 0.15s linear infinite;
+    box-shadow: var(--shadow-amber, 0 8rpx 32rpx rgba(232,168,56,0.25));
+  }
+}
+
+@keyframes cup-shake {
+  0%, 100% { transform: rotate(0deg) translateX(0); }
+  25% { transform: rotate(-2deg) translateX(-6rpx); }
+  75% { transform: rotate(2deg) translateX(6rpx); }
+}
+
+.dice-pair {
+  display: flex;
+  gap: $sp-lg;
+}
+
+.die {
+  width: 120rpx; height: 120rpx;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: $radius-md;
+  background: $bg-elevated;
+  border: 2rpx solid var(--border-subtle, rgba(255,255,255,0.10));
+  transition: transform $duration-base $ease-bounce;
+
+  &.die-rolling { animation: die-spin 0.3s linear infinite; }
+}
+
+@keyframes die-spin {
+  0% { transform: rotate(0deg) scale(1); }
+  50% { transform: rotate(180deg) scale(0.85); }
+  100% { transform: rotate(360deg) scale(1); }
+}
+
+.die-face { font-size: 72rpx; color: $text-primary; }
+
+.dice-sum {
+  font-size: $fs-2xl;
+  font-weight: $fw-black;
+  color: $amber;
+}
+
+.dice-rule-result {
+  display: flex;
+  align-items: center;
+  gap: $sp-md;
+  width: 100%;
+  margin-top: $sp-lg;
+  padding: $sp-lg;
+  border-radius: $radius-lg;
+  animation: result-pop 0.4s $ease-bounce both;
+
+  &.result-drink {
+    background: linear-gradient(135deg, rgba(255,107,107,0.12), rgba(255,107,107,0.04));
+    border: 1rpx solid rgba(255,107,107,0.22);
+  }
+  &.result-safe {
+    background: linear-gradient(135deg, rgba(94,198,160,0.12), rgba(94,198,160,0.04));
+    border: 1rpx solid rgba(94,198,160,0.22);
+  }
+  &.result-fun {
+    background: linear-gradient(135deg, rgba(139,133,184,0.14), rgba(139,133,184,0.04));
+    border: 1rpx solid rgba(139,133,184,0.24);
+  }
+}
+
+.dice-rule-emoji { font-size: 48rpx; }
+.dice-rule-name { display: block; font-size: $fs-base; font-weight: $fw-bold; color: $text-primary; }
+.dice-rule-desc { display: block; font-size: $fs-xs; color: $text-tertiary; margin-top: 4rpx; }
+
+.dice-history {
+  display: flex;
+  gap: $sp-sm;
+  margin-top: $sp-lg;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.dice-history-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 6rpx 16rpx;
+  border-radius: $radius-full;
+  background: $bg-elevated;
+}
+
+.dice-history-val { font-size: $fs-xs; font-weight: $fw-bold; color: $text-secondary; }
+.dice-history-rule { font-size: 18rpx; color: $text-tertiary; }
+
+.dice-roll-btn {
+  margin-top: $sp-xl;
+  min-width: 360rpx;
+  height: 96rpx;
+}
+
+/* === 命运转盘（老虎机） === */
+.wheel-arena {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: $sp-md;
+}
+
+.slot-machine {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.slot-glow {
+  position: absolute;
+  top: -30rpx; left: 50%;
+  transform: translateX(-50%);
+  width: 480rpx; height: 480rpx;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(232,168,56,0.10) 0%, transparent 70%);
+  pointer-events: none;
+  opacity: 0.5;
+  transition: opacity $duration-base;
+
+  &.slot-glow-on {
+    opacity: 1;
+    animation: glow-pulse 0.8s ease-in-out infinite;
+  }
+}
+
+@keyframes glow-pulse {
+  0%, 100% { transform: translateX(-50%) scale(1); }
+  50% { transform: translateX(-50%) scale(1.08); }
+}
+
+.slot-window {
+  position: relative;
+  width: 520rpx;
+  height: 360rpx;
+  border-radius: $radius-xl;
+  background: $bg-card;
+  border: 2rpx solid var(--border-subtle, rgba(255,255,255,0.10));
+  box-shadow: $shadow-lg;
+  overflow: hidden;
+}
+
+.slot-strip {
+  position: absolute;
+  left: 0; right: 0;
+  top: 0;
+  will-change: transform;
+}
+
+.slot-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $sp-md;
+  height: 120rpx;
+  border-bottom: 1rpx solid var(--border-micro, rgba(255,255,255,0.05));
+  transition: background $duration-base;
+
+  &.slot-item-active {
+    background: rgba(232,168,56,0.10);
+  }
+}
+
+.slot-item-emoji { font-size: 44rpx; }
+.slot-item-label { font-size: $fs-base; font-weight: $fw-bold; color: $text-primary; }
+
+.slot-mask-top, .slot-mask-bottom {
+  position: absolute;
+  left: 0; right: 0;
+  height: 120rpx;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.slot-mask-top {
+  top: 0;
+  background: linear-gradient(to bottom, var(--bg-card, #1A1A28) 20%, transparent);
+  opacity: 0.85;
+}
+
+.slot-mask-bottom {
+  bottom: 0;
+  background: linear-gradient(to top, var(--bg-card, #1A1A28) 20%, transparent);
+  opacity: 0.85;
+}
+
+.slot-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0; right: 0;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  padding: 0 $sp-sm;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.slot-ind-arrow {
+  font-size: 28rpx;
+  color: var(--amber, #E8A838);
+  text-shadow: 0 0 12rpx rgba(232,168,56,0.6);
+}
+
+.slot-spin-btn {
+  margin-top: $sp-xl;
+  min-width: 360rpx;
+  height: 96rpx;
+}
+
+/* === 返回大厅按钮 === */
+.back-hub-btn {
+  position: fixed;
+  bottom: calc(env(safe-area-inset-bottom) + 48rpx);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: $sp-md $sp-2xl;
+  border-radius: $radius-full;
+  background: $bg-elevated;
+  border: 1rpx solid var(--border-subtle, rgba(255,255,255,0.10));
+  box-shadow: $shadow-md;
+  z-index: 60;
+  transition: transform $duration-fast $ease-out;
+  &:active { transform: translateX(-50%) scale(0.92); }
+  text { font-size: $fs-sm; font-weight: $fw-medium; color: $text-secondary; }
+}
+</style>
diff --git a/pages/login/login.vue b/pages/login/login.vue
index aba5cb1..b9b352b 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -142,6 +142,10 @@ export default {
         uni.showToast({ title: '请先同意用户协议和隐私政策', icon: 'none', duration: 2000 })
         return
       }
+      if (!this.nickname.trim()) {
+        uni.showToast({ title: '请先填写昵称', icon: 'none', duration: 2000 })
+        return
+      }
       this.loginLoading = true
       try {
         // 1. 获取微信登录 code
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index f27b275..b6d080a 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -78,7 +78,8 @@
       <view class="persona-glow"></view>
       <view class="persona-content">
         <view class="persona-header">
-          <text class="persona-emoji">{{ personaEmoji }}</text>
+          <image v-if="isIconPath(personaEmoji)" :src="personaEmoji" class="persona-icon-img" mode="aspectFit"></image>
+          <text v-else class="persona-emoji">{{ personaEmoji }}</text>
           <view class="persona-text">
             <text class="persona-title">{{ personaTitle }}</text>
             <text class="persona-desc">{{ personaDesc }}</text>
@@ -118,17 +119,17 @@
 
     <!-- 操作入口 -->
     <view class="actions-section">
-      <!-- 酒友圈 -->
-      <view class="action-card" @click="goCircle">
-        <view class="action-icon-wrap action-icon-circle">
-          <text class="action-icon">🍻</text>
+      <!-- 酒桌小游戏 -->
+      <view class="action-card" @click="goGames">
+        <view class="action-icon-wrap action-icon-games">
+          <text class="action-icon">🎲</text>
         </view>
         <view class="action-text">
           <view class="action-title-row">
-            <text class="action-title">酒友圈</text>
-            <view class="action-new-tag">NEW</view>
+            <text class="action-title">酒桌小游戏</text>
+            <view class="action-hot-tag">HOT</view>
           </view>
-          <text class="action-desc">看看酒友们今晚都在喝什么</text>
+          <text class="action-desc">数字炸弹·猜拳·骰子·转盘，今晚谁喝？</text>
         </view>
         <text class="action-arrow">›</text>
       </view>
@@ -148,7 +149,8 @@
     <view v-if="showDetail" class="detail-overlay" @click="showDetail = false">
       <view class="detail-card" @click.stop>
         <view class="detail-icon-ring" :class="detailAchievement.unlocked ? 'ring-unlocked' : 'ring-locked'">
-          <text class="detail-emoji">{{ detailAchievement.icon }}</text>
+          <image v-if="isIconPath(detailAchievement.icon)" :src="detailAchievement.icon" class="detail-icon-img" mode="aspectFit"></image>
+          <text v-else class="detail-emoji">{{ detailAchievement.icon }}</text>
         </view>
         <text class="detail-name">{{ detailAchievement.name }}</text>
         <text class="detail-desc">{{ detailAchievement.desc }}</text>
@@ -164,7 +166,7 @@
 <script>
 import AchievementBadge from '../../components/AchievementBadge.vue'
 import client, { clearAuth } from '../../common/api'
-import { checkAchievements } from '../../common/utils'
+import { checkAchievements, getCatIcon, isIconPath } from '../../common/utils'
 import { ACHIEVEMENTS, DRINK_CATEGORIES } from '../../common/constants'
 import themeMixin from '../../common/theme-mixin'
 
@@ -217,8 +219,8 @@ export default {
     },
     personaEmoji() {
       const fav = this.stats.favCategory
-      const map = { baijiu: '⚱️', beer: '🍺', wine: '🍷', whisky: '🥂', huangjiu: '🫖', sake: '🍶', fruit: '🍹', cocktail: '🍸' }
-      return map[fav] || '🍻'
+      if (fav) return getCatIcon(fav)
+      return '🍻'
     },
     personaTitle() {
       const fav = this.stats.favCategory
@@ -261,6 +263,7 @@ export default {
     }
   },
   methods: {
+    isIconPath,
     // 构建分享名片的 query 参数（携带公开档案数据）
     buildShareQuery() {
       const parts = [`nick=${encodeURIComponent(this.user.nickname || '酒友')}`]
@@ -351,6 +354,9 @@ export default {
     goCircle() {
       uni.switchTab({ url: '/pages/circle/circle' })
     },
+    goGames() {
+      uni.navigateTo({ url: '/pages/games/games' })
+    },
     goHome() {
       uni.switchTab({ url: '/pages/index/index' })
     },
@@ -541,6 +547,7 @@ export default {
   background: rgba(232,168,56,0.10);
   border: 1rpx solid rgba(232,168,56,0.20);
   border-radius: $radius-full;
+  margin-left: 20rpx;
 }
 
 .hero-level-text {
@@ -720,6 +727,12 @@ export default {
   font-size: 56rpx;
 }
 
+.persona-icon-img {
+  width: 64rpx;
+  height: 64rpx;
+  flex-shrink: 0;
+}
+
 .persona-text {
   display: flex;
   flex-direction: column;
@@ -838,6 +851,10 @@ export default {
   background: rgba(139,133,184,0.12);
 }
 
+.action-icon-games {
+  background: rgba(232,168,56,0.12);
+}
+
 .action-icon-timeline {
   background: rgba(94,198,160,0.12);
 }
@@ -872,6 +889,15 @@ export default {
   border-radius: $radius-full;
 }
 
+.action-hot-tag {
+  font-size: 18rpx;
+  font-weight: $fw-bold;
+  color: #fff;
+  background: linear-gradient(135deg, $coral, #e04848);
+  padding: 2rpx 10rpx;
+  border-radius: $radius-full;
+}
+
 .action-desc {
   display: block;
   font-size: $fs-xs;
@@ -955,6 +981,11 @@ export default {
   font-size: 64rpx;
 }
 
+.detail-icon-img {
+  width: 72rpx;
+  height: 72rpx;
+}
+
 .detail-name {
   display: block;
   font-size: $fs-xl;