feat(game): 优化界面组件

- 在国际化文件中添加钱包流水相关翻译项
- 在用户个人资料页面添加复制邀请链接功能
- 优化桌面端动物组件的视觉效果和动画参数
- 添加虚拟滚动功能到财务记录标签页提升性能
- 为桌面端控制面板添加投注数量调节按钮
- 更新消息模态框为通知列表和详情展示
- 在头部余额显示旁添加充值图标入口

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

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import streakBg from '@/assets/game/pc-streak.webp'
 import down5Animation from '@/assets/lottie/down5.json'
 import diamond from '@/assets/system/diamond.webp'
 import fire from '@/assets/system/fire.webp'
@@ -12,6 +13,7 @@ import { SmartImage } from '@/components/smart-image.tsx'
 import { DesktopCountdown } from '@/features/game/components/desktop/desktop-countdown.tsx'
 import { DesktopTitle } from '@/features/game/components/desktop/desktop-title.tsx'
 import { useGameStatusVm } from '@/features/game/hooks/use-game-status-vm.ts'
+
 export function DesktopStatusLine() {
   const { t } = useTranslation()
   const {
@@ -23,9 +25,11 @@ export function DesktopStatusLine() {
     phaseToneClassName,
     roundId,
     streakLabel,
+    streakValue,
   } = useGameStatusVm()
   const [remainingMs, setRemainingMs] = useState(countdownMs)
   const showWarningCountdown = remainingMs <= 5000 && remainingMs > 0
+  const showStreakLimitOnly = typeof streakValue === 'number' && streakValue > 1
   const countdownClassName = useMemo(
     () =>
       showWarningCountdown
@@ -44,45 +48,59 @@ export function DesktopStatusLine() {
         {/* 状态栏左侧 */}
         <div
           className={
-            'relative h-full flex-1 flex items-center justify-center gap-design-50'
+            'relative h-full flex-1 flex items-center justify-center gap-design-50 overflow-visible'
           }
         >
-          {/*<div className={'flex-1 absolute z-10 -right-20 -top-6 w-full !h-design-105'} style={{*/}
-          {/*    backgroundImage: `url(${streakBg})`,*/}
-          {/*    backgroundSize: '100% 110%',*/}
-          {/*    backgroundRepeat: 'no-repeat',*/}
-          {/*}} >*/}
-          {/*</div>*/}
-
-          <div className={'text-[#CBD3D5] font-bold'}>
-            {t('gameDesktop.status.odds')}:{' '}
-            <span className={'text-[#E3D171]'}>{oddsLabel}</span>
-          </div>
-          <div
-            className={
-              'flex items-center gap-design-5 text-[#CBD3D5] font-bold'
-            }
-          >
-            <SmartImage
-              className={'w-design-37 h-design-47'}
-              alt={'fire'}
-              src={fire}
+          {showStreakLimitOnly && (
+            <div
+              className={
+                'pointer-events-none absolute z-0 bg-center bg-no-repeat'
+              }
+              style={{
+                top: 'calc(var(--design-unit)*-14)',
+                right: 'calc(var(--design-unit)*-190)',
+                bottom: 'calc(var(--design-unit)*-1)',
+                left: 0,
+                backgroundImage: `url(${streakBg})`,
+                backgroundPosition: 'center',
+                backgroundSize: '113% 150%',
+              }}
             />
-            <div>
-              {t('gameDesktop.status.streak')}:{' '}
-              <span
+          )}
+
+          {!showStreakLimitOnly && (
+            <>
+              <div className={'text-[#CBD3D5] font-bold'}>
+                {t('gameDesktop.status.odds')}:{' '}
+                <span className={'text-[#E3D171]'}>{oddsLabel}</span>
+              </div>
+              <div
                 className={
-                  'bg-gradient-to-b from-[#EBA661] to-[#FCC785] bg-clip-text text-transparent'
+                  'flex items-center gap-design-5 text-[#CBD3D5] font-bold'
                 }
               >
-                {streakLabel}
-              </span>
-            </div>
-          </div>
+                <SmartImage
+                  className={'w-design-37 h-design-47'}
+                  alt={'fire'}
+                  src={fire}
+                />
+                <div>
+                  {t('gameDesktop.status.streak')}:{' '}
+                  <span
+                    className={
+                      'bg-gradient-to-b from-[#EBA661] to-[#FCC785] bg-clip-text text-transparent'
+                    }
+                  >
+                    {streakLabel}
+                  </span>
+                </div>
+              </div>
+            </>
+          )}
 
           <div
             className={
-              'flex items-center gap-design-5 text-[#CBD3D5] font-bold'
+              'relative z-20 flex items-center gap-design-5 text-[#CBD3D5] font-bold'
             }
           >
             <SmartImage