feat(game): 添加桌面和移动设备的状态栏功能

- 添加 FORCE_DESKTOP_STREAK_EFFECT_PREVIEW 和 FORCE_MOBILE_STREAK_EFFECT_PREVIEW 常量用于预览
- 在桌面状态栏中实现连击效果显示逻辑
- 在移动状态栏中实现不同的背景图像和布局样式
- 为移动设备添加火焰图标和连击计数显示
- 更新移动设备状态栏的列布局和间距配置
- 使用条件渲染来切换不同的背景和字体样式

src/features/game/components/desktop/desktop-status.tsx

@@ -17,6 +17,8 @@ import { DesktopCountdown } from '@/features/game/components/desktop/desktop-cou
 import { useGameStatusVm } from '@/hooks/use-game-status-vm.ts'
 import { cn } from '@/lib/utils.ts'
 
+const FORCE_DESKTOP_STREAK_EFFECT_PREVIEW = true
+
 export function DesktopStatusLine() {
   const { t } = useTranslation()
   const prefersReducedMotion = useReducedMotion()
@@ -32,7 +34,9 @@ export function DesktopStatusLine() {
   } = useGameStatusVm()
   const [remainingMs, setRemainingMs] = useState(countdownMs)
   const showWarningCountdown = remainingMs <= 5000 && remainingMs > 0
-  const showStreakLimitOnly = typeof streakValue === 'number' && streakValue > 1
+  const showStreakLimitOnly =
+    FORCE_DESKTOP_STREAK_EFFECT_PREVIEW ||
+    (typeof streakValue === 'number' && streakValue > 1)
   const countdownClassName = useMemo(
     () =>
       showWarningCountdown

src/features/game/components/mobile/mobile-status.tsx

@@ -15,6 +15,8 @@ import { DesktopCountdown } from '@/features/game/components/desktop/desktop-cou
 import { useGameStatusVm } from '@/hooks/use-game-status-vm.ts'
 import { cn } from '@/lib/utils.ts'
 
+const FORCE_MOBILE_STREAK_EFFECT_PREVIEW = true
+
 function isIosDevice() {
   if (typeof navigator === 'undefined') {
     return false
@@ -160,23 +162,32 @@ export function MobileStatusLine() {
 export function MobileStatusMetrics() {
   const { t } = useTranslation()
   const { limitLabel, oddsLabel, streakLabel, streakValue } = useGameStatusVm()
-  const showStreakLimitOnly = typeof streakValue === 'number' && streakValue > 1
+  const showStreakLimitOnly =
+    FORCE_MOBILE_STREAK_EFFECT_PREVIEW ||
+    (typeof streakValue === 'number' && streakValue > 1)
 
   return (
     <SmartBackground
-      src={statusLine}
-      size="100% 100%"
-      className="relative grid h-design-26 w-full grid-cols-3 items-center overflow-visible bg-center bg-no-repeat px-design-3 font-bold leading-none text-[#CBD3D5]"
-      style={{ fontSize: 'calc(var(--design-unit) * 5.5)' }}
+      src={showStreakLimitOnly ? streakBg : statusLine}
+      size={showStreakLimitOnly ? '106% 126%' : '100% 100%'}
+      className={cn(
+        'relative grid h-design-26 w-full items-center overflow-visible bg-center bg-no-repeat px-design-3 font-bold leading-none text-[#CBD3D5]',
+        showStreakLimitOnly
+          ? 'grid-cols-2 text-design-7'
+          : 'grid-cols-3 text-[calc(var(--design-unit)*5.5)]',
+      )}
     >
       {showStreakLimitOnly ? (
-        <div
-          className="pointer-events-none absolute bottom-[calc(var(--design-unit)*-5)] left-0 right-[33.333%] top-[calc(var(--design-unit)*-6)] z-0 bg-center bg-no-repeat opacity-95"
-          style={{
-            backgroundImage: `url(${streakBg})`,
-            backgroundSize: '120% 150%',
-          }}
-        />
+        <div className="relative z-10 flex min-w-0 items-center justify-center gap-design-2 whitespace-nowrap [text-shadow:0_0_calc(var(--design-unit)*3)_#000,0_calc(var(--design-unit)*1)_calc(var(--design-unit)*1)_#000]">
+          <SmartImage
+            className="h-design-10 w-design-8"
+            alt="fire"
+            src={fire}
+          />
+          <span>{t('gameDesktop.status.streak')}:</span>
+          {/*<span className="bg-gradient-to-b from-[#FF9C36] to-[#FF9C36] bg-clip-text text-transparent">*/}
+          <span className="text-[#FF9C36]">{streakLabel}</span>
+        </div>
       ) : (
         <>
           <div className="relative z-10 flex min-w-0 items-center justify-center whitespace-nowrap">
@@ -196,7 +207,14 @@ export function MobileStatusMetrics() {
           </div>
         </>
       )}
-      <div className="relative z-10 col-start-3 flex min-w-0 items-center justify-center gap-design-1 whitespace-nowrap">
+      <div
+        className={cn(
+          'relative z-10 flex min-w-0 items-center justify-center whitespace-nowrap',
+          showStreakLimitOnly
+            ? 'col-start-2 gap-design-2 [text-shadow:0_0_calc(var(--design-unit)*3)_#000,0_calc(var(--design-unit)*1)_calc(var(--design-unit)*1)_#000]'
+            : 'col-start-3 gap-design-1',
+        )}
+      >
         <SmartImage className="h-design-8 w-design-6" alt="lock" src={lock} />
         <span>{t('gameDesktop.status.limit')}:</span>
         <SmartImage