feat(game): 优化界面组件

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

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

@@ -298,9 +298,9 @@ export function DesktopAnimal({
               isMarqueeActive &&
                 'border-[rgba(121,255,250,1)] shadow-[0_0_calc(var(--design-unit)*18)_rgba(85,255,247,0.98),0_0_calc(var(--design-unit)*34)_rgba(39,245,255,0.88),inset_0_0_calc(var(--design-unit)*26)_rgba(112,255,248,0.34)]',
               isRevealRunning &&
-                'border-[rgba(104,255,249,0.9)] shadow-[0_0_calc(var(--design-unit)*12)_rgba(68,244,255,0.68),0_0_calc(var(--design-unit)*26)_rgba(37,214,255,0.42),inset_0_0_calc(var(--design-unit)*18)_rgba(115,255,247,0.24)] brightness-125 saturate-150',
+                'border-[rgba(104,255,249,0.76)] shadow-[0_0_calc(var(--design-unit)*10)_rgba(68,244,255,0.46),0_0_calc(var(--design-unit)*22)_rgba(37,214,255,0.28),inset_0_0_calc(var(--design-unit)*16)_rgba(115,255,247,0.18)] brightness-115 saturate-125',
               isRevealWinner &&
-                'shadow-[0_0_calc(var(--design-unit)*14)_rgba(81,248,255,0.72),0_0_calc(var(--design-unit)*24)_rgba(30,199,255,0.42),inset_0_0_calc(var(--design-unit)*18)_rgba(125,255,249,0.34)] brightness-125 saturate-150',
+                'border-[rgba(121,255,250,0.72)] shadow-[0_0_calc(var(--design-unit)*12)_rgba(81,248,255,0.54),0_0_calc(var(--design-unit)*22)_rgba(30,199,255,0.32),inset_0_0_calc(var(--design-unit)*18)_rgba(125,255,249,0.24)] brightness-110 saturate-120',
               showCellWarning &&
                 'border-[rgba(255,92,92,1)] shadow-[0_0_calc(var(--design-unit)*18)_rgba(255,88,88,0.56),0_0_calc(var(--design-unit)*28)_rgba(255,44,44,0.32),inset_0_0_calc(var(--design-unit)*18)_rgba(255,126,126,0.3)]',
               !showStandbyState && !hasPlacedSelection && 'opacity-95',
@@ -341,9 +341,9 @@ export function DesktopAnimal({
                 isMarqueeActive &&
                   'bg-[radial-gradient(circle_at_center,rgba(129,255,250,0.48)_0%,rgba(94,255,247,0.18)_38%,rgba(43,236,255,0.08)_56%,transparent_76%)] opacity-100 shadow-[0_0_calc(var(--design-unit)*12)_rgba(119,255,249,0.98),0_0_calc(var(--design-unit)*28)_rgba(53,246,255,0.9),0_0_calc(var(--design-unit)*44)_rgba(37,241,255,0.58),inset_0_0_calc(var(--design-unit)*20)_rgba(163,255,250,0.52)]',
                 isRevealRunning &&
-                  'bg-[radial-gradient(circle_at_center,rgba(128,255,250,0.5)_0%,rgba(77,244,255,0.24)_40%,rgba(27,183,255,0.1)_68%,transparent_88%)] opacity-100 shadow-[0_0_calc(var(--design-unit)*16)_rgba(95,249,255,0.72),inset_0_0_calc(var(--design-unit)*22)_rgba(151,255,250,0.4)]',
+                  'bg-[radial-gradient(circle_at_center,rgba(128,255,250,0.36)_0%,rgba(77,244,255,0.16)_40%,rgba(27,183,255,0.07)_68%,transparent_88%)] opacity-100 shadow-[0_0_calc(var(--design-unit)*12)_rgba(95,249,255,0.46),inset_0_0_calc(var(--design-unit)*18)_rgba(151,255,250,0.24)]',
                 isRevealWinner &&
-                  'bg-[radial-gradient(circle_at_center,rgba(128,255,250,0.5)_0%,rgba(67,226,255,0.24)_38%,rgba(25,131,255,0.1)_58%,transparent_76%)] opacity-100 shadow-[0_0_calc(var(--design-unit)*14)_rgba(92,248,255,0.58),inset_0_0_calc(var(--design-unit)*20)_rgba(126,255,250,0.4)]',
+                  'bg-[radial-gradient(circle_at_center,rgba(128,255,250,0.34)_0%,rgba(67,226,255,0.16)_38%,rgba(25,131,255,0.07)_58%,transparent_76%)] opacity-100 shadow-[0_0_calc(var(--design-unit)*12)_rgba(92,248,255,0.42),inset_0_0_calc(var(--design-unit)*18)_rgba(126,255,250,0.24)]',
                 showCellWarning &&
                   'bg-[radial-gradient(circle_at_center,rgba(255,106,106,0.34)_0%,rgba(255,58,58,0.18)_42%,rgba(108,0,0,0.2)_78%,transparent_100%)] opacity-100',
               )}
@@ -360,9 +360,9 @@ export function DesktopAnimal({
               className={cn(
                 'absolute left-[1.5%] right-[1.5%] top-[2.9%] bottom-[2.9%] z-10 overflow-hidden rounded-[calc(var(--design-unit)*14)]',
                 isRevealRunning &&
-                  'brightness-125 saturate-150 drop-shadow-[0_0_calc(var(--design-unit)*10)_rgba(101,250,255,0.62)]',
+                  'brightness-115 saturate-125 drop-shadow-[0_0_calc(var(--design-unit)*8)_rgba(101,250,255,0.42)]',
                 isRevealWinner &&
-                  'brightness-140 saturate-150 drop-shadow-[0_0_calc(var(--design-unit)*12)_rgba(106,250,255,0.72)]',
+                  'brightness-110 saturate-120 drop-shadow-[0_0_calc(var(--design-unit)*9)_rgba(106,250,255,0.44)]',
                 imageClassName,
               )}
               imgClassName="object-fill"
@@ -452,7 +452,7 @@ export function DesktopAnimal({
         </div>
       ) : null}
 
-      {showStopOverlay ? (
+      {showStopOverlay && !hostingFlag ? (
         <div
           aria-hidden="true"
           className="absolute inset-0 z-50 flex items-center justify-center bg-[rgba(2,8,14,0.72)] px-design-24 backdrop-blur-[2px]"
@@ -469,22 +469,50 @@ export function DesktopAnimal({
       ) : null}
 
       {hostingFlag ? (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-[rgba(2,8,14,0.72)] px-design-24 backdrop-blur-[2px]">
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center gap-design-22 bg-[rgba(2,8,14,0.6)] px-design-24 backdrop-blur-[1px]">
+          {showStopOverlay ? (
+            <SmartImage
+              src={stopImageSrc}
+              alt="stop betting"
+              priority
+              showSkeleton={false}
+              className="h-design-170 w-design-520 max-w-[72%] overflow-visible"
+              imgClassName="object-contain drop-shadow-[0_0_calc(var(--design-unit)*22)_rgba(60,235,255,0.28)]"
+            />
+          ) : null}
           <SmartBackground
             src={hostingBg}
+            size="100% 100%"
+            repeat="no-repeat"
+            position="center"
             className="h-design-350 w-design-930 flex flex-col items-center justify-center"
           >
-            <div className={'flex flex-col gap-design-40 items-center'}>
+            <div className={'flex flex-col gap-design-44 items-center'}>
               <div className={'flex items-center gap-design-20'}>
-                <SmartImage
-                  src={refreshIcon}
-                  alt="refreshIcon"
-                  priority
-                  showSkeleton={false}
-                  className="h-design-40 w-design-40"
-                  imgClassName="object-contain drop-shadow-[0_0_calc(var(--design-unit)*22)_rgba(60,235,255,0.28)]"
-                />
-                <div className={'text-design-20 text-[#ffffff] font-bold'}>
+                <motion.span
+                  aria-hidden="true"
+                  animate={prefersReducedMotion ? undefined : { rotate: 360 }}
+                  transition={{
+                    duration: 1.4,
+                    ease: 'linear',
+                    repeat: Number.POSITIVE_INFINITY,
+                  }}
+                  className="flex h-design-48 w-design-48 items-center justify-center"
+                >
+                  <SmartImage
+                    src={refreshIcon}
+                    alt=""
+                    priority
+                    showSkeleton={false}
+                    className="h-design-40 w-design-40"
+                    imgClassName="object-contain drop-shadow-[0_0_calc(var(--design-unit)*22)_rgba(60,235,255,0.36)]"
+                  />
+                </motion.span>
+                <div
+                  className={
+                    'text-design-22 text-[#ffffff] font-bold [text-shadow:0_0_calc(var(--design-unit)*12)_rgba(76,236,255,0.45)]'
+                  }
+                >
                   {t('game.autoSpin.runningRounds', {
                     count: completedAutoHostingRounds,
                   })}
@@ -495,7 +523,10 @@ export function DesktopAnimal({
                 type="button"
                 onClick={stopHosting}
                 src={hostingBtn}
-                className="h-design-80 w-design-170 flex cursor-pointer flex-col items-center justify-center transition-transform hover:-translate-y-[1px] active:translate-y-0"
+                size="100% 100%"
+                repeat="no-repeat"
+                position="center"
+                className="h-design-70 w-design-220 flex cursor-pointer items-center justify-center pb-design-4 text-design-24 font-bold text-[#EFFFFF] [text-shadow:0_1px_0_rgba(255,255,255,0.18),0_0_calc(var(--design-unit)*10)_rgba(46,220,255,0.5)] transition-transform hover:-translate-y-[1px] active:translate-y-0"
               >
                 {t('game.actions.stopAuto')}
               </SmartBackground>

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

@@ -24,6 +24,7 @@ export function DesktopControl() {
     acceptingBets,
     actionsEnabled,
     canClear,
+    canDecreaseBetQuantity,
     chips,
     confirmLabel,
     confirmState,
@@ -32,9 +33,11 @@ export function DesktopControl() {
     onChipSelect,
     onConfirm,
     onClearSelections,
+    onDecreaseBetQuantity,
+    onIncreaseBetQuantity,
     onOpenAutoSetting,
     onRepeatSelections,
-    selectedChipAmountLabel,
+    selectedBetQuantityLabel,
     selectedChipId,
     selectedCountLabel,
     totalBetAmountLabel,
@@ -297,21 +300,43 @@ export function DesktopControl() {
             'flex h-design-50 shrink-0 items-center rounded-md bg-[#091118] box-border px-design-2 py-design-3'
           }
         >
-          <SmartImage
-            src={add}
-            alt={`add`}
-            className={'w-design-40 h-design-40'}
-          />
+          <button
+            type="button"
+            disabled={!acceptingBets || !canDecreaseBetQuantity}
+            onClick={onDecreaseBetQuantity}
+            className={cn(
+              'flex h-design-40 w-design-40 shrink-0 items-center justify-center',
+              acceptingBets && canDecreaseBetQuantity
+                ? 'cursor-pointer'
+                : 'cursor-not-allowed opacity-50',
+            )}
+          >
+            <SmartImage
+              src={add}
+              alt={`add`}
+              className={'w-design-40 h-design-40'}
+            />
+          </button>
           <div
             className={'w-design-80 h-full flex items-center justify-center'}
           >
-            {selectedChipAmountLabel}
+            {selectedBetQuantityLabel}
           </div>
-          <SmartImage
-            src={reduce}
-            alt={`reduce`}
-            className={'w-design-40 h-design-40'}
-          />
+          <button
+            type="button"
+            disabled={!acceptingBets}
+            onClick={onIncreaseBetQuantity}
+            className={cn(
+              'flex h-design-40 w-design-40 shrink-0 items-center justify-center',
+              acceptingBets ? 'cursor-pointer' : 'cursor-not-allowed',
+            )}
+          >
+            <SmartImage
+              src={reduce}
+              alt={`reduce`}
+              className={'w-design-40 h-design-40'}
+            />
+          </button>
         </div>
       </SmartBackground>
       <SmartBackground

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

@@ -3,12 +3,14 @@ import {
   Mail,
   Maximize,
   Minimize,
+  Plus,
   UserKey,
   UserRoundPlus,
   Volume2,
   VolumeX,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import add from '@/assets/game/add.webp'
 import avatar from '@/assets/system/avatar.webp'
 import diamond from '@/assets/system/diamond.webp'
 import logo from '@/assets/system/logo.webp'
@@ -205,10 +207,19 @@ export function DesktopHeader() {
               />
               <div
                 className={
-                  'common-neon-inset text-design-16 !py-design-20 box-border flex h-design-36 w-design-180 items-center justify-end transition-[opacity,transform] duration-150 group-hover:opacity-90 group-active:scale-[0.98]'
+                  'common-neon-inset text-design-16 !py-design-20 !pr-design-14 box-border flex h-design-36 w-design-180 items-center justify-end gap-design-8 transition-[opacity,transform] duration-150 group-hover:opacity-90 group-active:scale-[0.98]'
                 }
               >
-                {currentUser?.coin || '--'}
+                <span className="truncate">{currentUser?.coin || '--'}</span>
+                <div className={'common-neon-inset !p-design-3'}>
+                  <Plus
+                    aria-hidden="true"
+                    className="shrink-0"
+                    color="#57B8BF"
+                    size={18}
+                    strokeWidth={2.5}
+                  />
+                </div>
               </div>
             </button>
           </div>

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