feat(game): 优化界面组件

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

src/features/game/hooks/use-wallet-records-vm.ts

@@ -0,0 +1,106 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { getWalletRecordList } from '@/features/game/api'
+
+const WALLET_RECORD_PAGE_SIZE = 20
+const WALLET_RECORD_TYPE = 'payout'
+
+function formatWalletAmount(value: string, locale: string) {
+  const numberValue = Number(value)
+
+  if (!Number.isFinite(numberValue)) {
+    return value || '--'
+  }
+
+  return new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 4,
+  }).format(numberValue)
+}
+
+function formatWalletRecordTime(value: number | string | null) {
+  if (value === null || value === '') {
+    return '--'
+  }
+
+  const numericValue = Number(value)
+  const timestamp =
+    Number.isFinite(numericValue) && numericValue > 0
+      ? numericValue < 10_000_000_000
+        ? numericValue * 1000
+        : numericValue
+      : value
+  const formatted = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
+
+  return formatted === 'Invalid Date' ? String(value) : formatted
+}
+
+export function useWalletRecordsVm({ enabled }: { enabled: boolean }) {
+  const { i18n, t } = useTranslation()
+  const locale = i18n.resolvedLanguage ?? i18n.language ?? 'en-US'
+
+  const query = useInfiniteQuery({
+    queryKey: ['finance', 'wallet-record-list', WALLET_RECORD_TYPE],
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) =>
+      getWalletRecordList({
+        page: pageParam,
+        pageSize: WALLET_RECORD_PAGE_SIZE,
+        type: WALLET_RECORD_TYPE,
+      }),
+    enabled,
+    getNextPageParam: (lastPage) => {
+      const nextPage = lastPage.pagination.page + 1
+      const loadedCount =
+        lastPage.pagination.page * lastPage.pagination.page_size
+
+      return loadedCount < lastPage.pagination.total ? nextPage : undefined
+    },
+  })
+
+  const lastPage = query.data?.pages.at(-1)
+  const total = lastPage?.pagination.total ?? 0
+  const loadedPage = lastPage?.pagination.page ?? 1
+
+  const items = useMemo(
+    () =>
+      (query.data?.pages ?? []).flatMap((page) =>
+        page.list.map((item, index) => ({
+          amountLabel: formatWalletAmount(item.amount, locale),
+          balanceAfterLabel: formatWalletAmount(item.balanceAfter, locale),
+          balanceBeforeLabel: formatWalletAmount(item.balanceBefore, locale),
+          id: item.id || `${page.pagination.page}-${index}`,
+          remarkLabel: item.remark || '--',
+          timeLabel: formatWalletRecordTime(item.createdAt),
+          typeLabel: item.type || WALLET_RECORD_TYPE,
+        })),
+      ),
+    [locale, query.data?.pages],
+  )
+
+  return {
+    emptyText: t('game.modals.userInfo.walletRecords.empty'),
+    fetchNextPage: query.fetchNextPage,
+    hasNextPage: query.hasNextPage,
+    headers: {
+      amount: t('game.modals.userInfo.walletRecords.amount'),
+      balanceAfter: t('game.modals.userInfo.walletRecords.balanceAfter'),
+      balanceBefore: t('game.modals.userInfo.walletRecords.balanceBefore'),
+      remark: t('game.modals.userInfo.walletRecords.remark'),
+      time: t('game.modals.userInfo.walletRecords.time'),
+      type: t('game.modals.userInfo.walletRecords.type'),
+    },
+    isError: query.isError,
+    isFetchingNextPage: query.isFetchingNextPage,
+    isLoading: query.isLoading,
+    items,
+    loadFailedText: t('game.modals.userInfo.walletRecords.loadFailed'),
+    loadingText: t('game.modals.userInfo.walletRecords.loading'),
+    pageLabel: t('game.modals.userInfo.walletRecords.page', {
+      page: loadedPage,
+      total,
+    }),
+  }
+}