From 2a76f1d722790fba9de770f4bc8920ead91a8136 Mon Sep 17 00:00:00 2001
From: JiaJun <2394389886@qq.com>
Date: Fri, 17 Jul 2026 17:26:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(game):=20=E6=B7=BB=E5=8A=A0=E9=92=B1?=
 =?UTF-8?q?=E5=8C=85=E4=BD=99=E9=A2=9D=E5=88=B7=E6=96=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在桌面端和移动端头部组件中添加余额刷新按钮
- 实现 useWalletBalanceRefresh 钩子用于余额刷新逻辑
- 添加刷新图标并集成到钻石币显示区域
- 支持多语言本地化包括英语、印尼语、马来语和中文
- 优化消息广播组件的动画过渡效果
- 添加防重复提交机制避免并发刷新请求
- 集成加载状态显示和错误处理通知功能
---
 src/components/message-broadcast.tsx          |  7 ++-
 .../components/desktop/desktop-header.tsx     | 40 ++++++++++++-----
 .../game/components/mobile/mobile-header.tsx  | 44 +++++++++++++-----
 src/hooks/use-wallet-balance-refresh.ts       | 45 +++++++++++++++++++
 src/locales/en-US.ts                          |  1 +
 src/locales/id-ID.ts                          |  1 +
 src/locales/ms-MY.ts                          |  1 +
 src/locales/zh-CN.ts                          |  1 +
 8 files changed, 117 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/use-wallet-balance-refresh.ts

diff --git a/src/components/message-broadcast.tsx b/src/components/message-broadcast.tsx
index 72c2f02..6eb4f4a 100644
--- a/src/components/message-broadcast.tsx
+++ b/src/components/message-broadcast.tsx
@@ -120,7 +120,7 @@ export function MessageBroadcast({
           src={broadcast}
         />
         <div className="relative h-design-16 min-w-0 flex-1 overflow-hidden md:h-design-28">
-          <AnimatePresence>
+          <AnimatePresence mode="wait">
             {activeBroadcast ? (
               <motion.div
                 aria-label={activeBroadcastLabel}
@@ -136,7 +136,10 @@ export function MessageBroadcast({
                     ? { opacity: 1 }
                     : { opacity: 1, x: '-108%' }
                 }
-                exit={{ opacity: 0 }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, ease: 'easeOut' },
+                }}
                 transition={{
                   duration: prefersReducedMotion
                     ? 0.18
diff --git a/src/features/game/components/desktop/desktop-header.tsx b/src/features/game/components/desktop/desktop-header.tsx
index f912f18..7e693c8 100644
--- a/src/features/game/components/desktop/desktop-header.tsx
+++ b/src/features/game/components/desktop/desktop-header.tsx
@@ -3,6 +3,7 @@ import {
   Mail,
   Maximize,
   Minimize,
+  RefreshCw,
   UserKey,
   UserRoundPlus,
   Volume2,
@@ -17,6 +18,8 @@ import diamond from '@/assets/system/diamond.webp'
 import logo from '@/assets/system/logo.webp'
 import { SmartImage } from '@/components/smart-image.tsx'
 import { useHeaderClockLabel, useHeaderVm } from '@/hooks/use-header-vm'
+import { useWalletBalanceRefresh } from '@/hooks/use-wallet-balance-refresh'
+import { cn } from '@/lib/utils'
 import { useModalStore } from '@/store'
 
 function HeaderClock() {
@@ -60,6 +63,8 @@ function SignalBars({
 export function DesktopHeader() {
   const { t } = useTranslation()
   const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const { isRefreshingBalance, refreshWalletBalance } =
+    useWalletBalanceRefresh()
   const {
     authStatus,
     currentLanguageLabel,
@@ -217,10 +222,7 @@ export function DesktopHeader() {
               </div>
             </button>
 
-            <button
-              type="button"
-              className="group relative flex items-center justify-center transition-transform duration-150"
-            >
+            <div className="group relative flex items-center justify-center">
               <SmartImage
                 src={diamond}
                 alt="diamond"
@@ -234,14 +236,32 @@ export function DesktopHeader() {
               >
                 <div className="truncate">{currentUser?.coin || '--'}</div>
 
-                <SmartImage
+                <button
+                  type="button"
+                  aria-label={t('commonUi.actions.refreshBalance')}
+                  title={t('commonUi.actions.refreshBalance')}
+                  disabled={isRefreshingBalance}
+                  onClick={() => void refreshWalletBalance()}
+                  className="flex h-design-24 w-design-24 shrink-0 cursor-pointer items-center justify-center rounded-[3px] text-[#8DE4EA] transition-colors hover:bg-white/10 disabled:cursor-wait disabled:opacity-65"
+                >
+                  <RefreshCw
+                    aria-hidden="true"
+                    className={cn(
+                      'h-design-16 w-design-16',
+                      isRefreshingBalance && 'animate-spin',
+                    )}
+                  />
+                </button>
+
+                <button
+                  type="button"
                   onClick={onOpenProcedures}
-                  className={'w-design-24 h-design-24 cursor-pointer'}
-                  alt={'add'}
-                  src={add}
-                />
+                  className="h-design-24 w-design-24 shrink-0 cursor-pointer"
+                >
+                  <SmartImage className="h-full w-full" alt="add" src={add} />
+                </button>
               </div>
-            </button>
+            </div>
           </div>
         ) : (
           <div
diff --git a/src/features/game/components/mobile/mobile-header.tsx b/src/features/game/components/mobile/mobile-header.tsx
index 30fa7fe..bfc2b8d 100644
--- a/src/features/game/components/mobile/mobile-header.tsx
+++ b/src/features/game/components/mobile/mobile-header.tsx
@@ -1,6 +1,7 @@
 import {
   Info,
   Mail,
+  RefreshCw,
   UserKey,
   UserRoundPlus,
   Volume2,
@@ -15,6 +16,7 @@ import diamond from '@/assets/system/diamond.webp'
 import logo from '@/assets/system/logo.webp'
 import { SmartImage } from '@/components/smart-image.tsx'
 import { useHeaderClockLabel, useHeaderVm } from '@/hooks/use-header-vm'
+import { useWalletBalanceRefresh } from '@/hooks/use-wallet-balance-refresh'
 import { cn } from '@/lib/utils'
 import { useModalStore } from '@/store'
 
@@ -68,6 +70,8 @@ function SignalBars({
 export function MobileHeader() {
   const { t } = useTranslation()
   const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const { isRefreshingBalance, refreshWalletBalance } =
+    useWalletBalanceRefresh()
   const {
     authStatus,
     currentLanguageLabel,
@@ -133,11 +137,7 @@ export function MobileHeader() {
               </div>
             </button>
 
-            <button
-              type="button"
-              onClick={onOpenProcedures}
-              className="group relative flex min-w-0 items-center justify-center transition-transform duration-150 hover:-translate-y-[1px] active:translate-y-[1px]"
-            >
+            <div className="group relative flex min-w-0 items-center justify-center">
               <SmartImage
                 src={diamond}
                 alt="diamond"
@@ -150,14 +150,36 @@ export function MobileHeader() {
                 <span className="min-w-0 truncate">
                   {currentUser?.coin || '--'}
                 </span>
-                <SmartImage
-                  src={add}
-                  alt="add"
-                  priority
+                <button
+                  type="button"
+                  aria-label={t('commonUi.actions.refreshBalance')}
+                  title={t('commonUi.actions.refreshBalance')}
+                  disabled={isRefreshingBalance}
+                  onClick={() => void refreshWalletBalance()}
+                  className="flex h-design-13 w-design-13 shrink-0 cursor-pointer items-center justify-center text-[#8DE4EA] disabled:cursor-wait disabled:opacity-65"
+                >
+                  <RefreshCw
+                    aria-hidden="true"
+                    className={cn(
+                      'h-design-9 w-design-9',
+                      isRefreshingBalance && 'animate-spin',
+                    )}
+                  />
+                </button>
+                <button
+                  type="button"
+                  onClick={onOpenProcedures}
                   className="h-design-13 w-design-13 shrink-0 cursor-pointer"
-                />
+                >
+                  <SmartImage
+                    src={add}
+                    alt="add"
+                    priority
+                    className="h-full w-full"
+                  />
+                </button>
               </div>
-            </button>
+            </div>
           </div>
         ) : (
           <div className="flex h-full shrink-0 items-center justify-end gap-design-8 px-design-9">
diff --git a/src/hooks/use-wallet-balance-refresh.ts b/src/hooks/use-wallet-balance-refresh.ts
new file mode 100644
index 0000000..b8d5bd7
--- /dev/null
+++ b/src/hooks/use-wallet-balance-refresh.ts
@@ -0,0 +1,45 @@
+import { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getCurrentUserProfile } from '@/api'
+import { notify } from '@/lib/notify'
+import { useAuthStore } from '@/store'
+
+export function useWalletBalanceRefresh() {
+  const { t } = useTranslation()
+  const setCurrentUser = useAuthStore((state) => state.setCurrentUser)
+  const [isRefreshingBalance, setIsRefreshingBalance] = useState(false)
+  const refreshPromiseRef = useRef<Promise<void> | null>(null)
+
+  const refreshWalletBalance = useCallback(() => {
+    if (refreshPromiseRef.current) {
+      return refreshPromiseRef.current
+    }
+
+    setIsRefreshingBalance(true)
+
+    const refreshPromise = getCurrentUserProfile()
+      .then((currentUser) => {
+        setCurrentUser(currentUser)
+      })
+      .catch((error: unknown) => {
+        notify.error(
+          error instanceof Error
+            ? error.message
+            : t('commonUi.toast.requestFailed'),
+        )
+      })
+      .finally(() => {
+        refreshPromiseRef.current = null
+        setIsRefreshingBalance(false)
+      })
+
+    refreshPromiseRef.current = refreshPromise
+
+    return refreshPromise
+  }, [setCurrentUser, t])
+
+  return {
+    isRefreshingBalance,
+    refreshWalletBalance,
+  }
+}
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index d25973d..97c86f3 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -479,6 +479,7 @@ export default {
   },
   commonUi: {
     actions: {
+      refreshBalance: 'Refresh balance',
       submitting: TEXT_SUBMITTING,
     },
     dialog: {
diff --git a/src/locales/id-ID.ts b/src/locales/id-ID.ts
index a920692..77c7c44 100644
--- a/src/locales/id-ID.ts
+++ b/src/locales/id-ID.ts
@@ -478,6 +478,7 @@ export default {
   },
   commonUi: {
     actions: {
+      refreshBalance: 'Segarkan saldo',
       submitting: TEXT_SUBMITTING,
     },
     dialog: {
diff --git a/src/locales/ms-MY.ts b/src/locales/ms-MY.ts
index b651815..7d4f64a 100644
--- a/src/locales/ms-MY.ts
+++ b/src/locales/ms-MY.ts
@@ -481,6 +481,7 @@ export default {
   },
   commonUi: {
     actions: {
+      refreshBalance: 'Segarkan baki',
       submitting: TEXT_SUBMITTING,
     },
     dialog: {
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index a4a17c5..ed04774 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -462,6 +462,7 @@ export default {
   },
   commonUi: {
     actions: {
+      refreshBalance: '刷新余额',
       submitting: TEXT_SUBMITTING,
     },
     dialog: {