feat(auth): 集成认证授权功能并优化API客户端

- 实现了完整的登录注册认证流程，包括密码验证和用户资料获取
- 集成了JWT令牌管理和自动刷新机制，支持设备ID生成和管理
- 添加了WebSocket连接配置和API基础URL环境变量设置
- 实现了API客户端的请求拦截器，包括令牌验证和错误处理逻辑
- 集成了MD5加密和认证令牌缓存机制，提升安全性
- 添加了多语言国际化支持，包括英语、中文、马来语和印尼语
- 实现了认证状态管理和本地存储持久化功能
- 添加了表单验证schema和错误处理机制，增强用户体验

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

@@ -1,9 +1,54 @@
+import { useVirtualizer } from '@tanstack/react-virtual'
+import { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import historyBg from '@/assets/system/history-bg.png'
 import { SmartBackground } from '@/components/smart-background.tsx'
 import { useGameHistoryVm } from '@/features/game/hooks/use-game-history-vm.ts'
 
 export function DesktopGameHistory() {
-  const { emptyText, isEmpty, items } = useGameHistoryVm()
+  const { t } = useTranslation()
+  const {
+    emptyText,
+    endText,
+    fetchNextPage,
+    hasNextPage,
+    isEmpty,
+    isFetchingNextPage,
+    isInitialLoading,
+    items,
+    loadingText,
+  } = useGameHistoryVm()
+  const parentRef = useRef<HTMLDivElement | null>(null)
+
+  const rowCount = hasNextPage ? items.length + 1 : items.length
+  const virtualizer = useVirtualizer({
+    count: rowCount,
+    estimateSize: () => 196,
+    getScrollElement: () => parentRef.current,
+    overscan: 4,
+  })
+
+  useEffect(() => {
+    const virtualItems = virtualizer.getVirtualItems()
+    const lastItem = virtualItems[virtualItems.length - 1]
+
+    if (
+      !lastItem ||
+      !hasNextPage ||
+      isFetchingNextPage ||
+      lastItem.index < items.length - 1
+    ) {
+      return
+    }
+
+    void fetchNextPage()
+  }, [
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    items.length,
+    virtualizer,
+  ])
 
   return (
     <SmartBackground
@@ -16,14 +61,23 @@ export function DesktopGameHistory() {
           'relative z-20 flex h-design-50 shrink-0 items-center justify-center text-design-30 text-[#D5FBFF]'
         }
       >
-        History
+        {t('gameDesktop.history.title')}
       </div>
       <div
+        ref={parentRef}
         className={
           'history-scroll-hidden z-10 flex min-h-0 flex-1 w-full flex-col gap-design-10 overflow-y-auto overflow-x-hidden px-design-20 py-design-20'
         }
       >
-        {isEmpty ? (
+        {isInitialLoading ? (
+          <div
+            className={
+              'flex w-full flex-1 items-center justify-center text-design-18 text-[#84A2A2]'
+            }
+          >
+            {loadingText}
+          </div>
+        ) : isEmpty ? (
           <div
             className={
               'flex w-full flex-1 items-center justify-center text-design-18 text-[#84A2A2]'
@@ -32,56 +86,98 @@ export function DesktopGameHistory() {
             {emptyText}
           </div>
         ) : (
-          items.map((item) => {
-            return (
-              <div
-                key={item.id}
-                className={
-                  'common-neon-inset flex w-full flex-col items-center !p-0 text-[#FFE375]'
-                }
-              >
+          <div
+            className="relative w-full"
+            style={{ height: `${virtualizer.getTotalSize()}px` }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const item = items[virtualRow.index]
+
+              return (
                 <div
-                  className={
-                    'common-neon-inset w-full !rounded-b-none text-center text-design-20'
-                  }
+                  key={item?.id ?? `loader-${virtualRow.index}`}
+                  className="absolute left-0 top-0 w-full"
+                  style={{ transform: `translateY(${virtualRow.start}px)` }}
                 >
-                  {item.statusLabel}
+                  {item ? (
+                    <div
+                      className={
+                        'common-neon-inset flex w-full flex-col items-center !p-0 text-[#FFE375]'
+                      }
+                    >
+                      <div
+                        className={
+                          'common-neon-inset w-full !rounded-b-none text-center text-design-20'
+                        }
+                      >
+                        {item.statusLabel}
+                      </div>
+                      <div
+                        className={
+                          'flex w-full flex-col gap-design-5 px-design-10 py-design-10 text-design-16'
+                        }
+                      >
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.orderNo')}:{' '}
+                          </span>
+                          <span className={'text-[#C0E7EB]'}>
+                            {item.orderNo}
+                          </span>
+                        </div>
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.roundId')}:{' '}
+                          </span>
+                          <span className={'text-[#C0E7EB]'}>
+                            {item.periodNo}
+                          </span>
+                        </div>
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.numbers')}:{' '}
+                          </span>
+                          <span>{item.numbersLabel}</span>
+                        </div>
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.settledAt')}:{' '}
+                          </span>
+                          <span>{item.createdAtLabel}</span>
+                        </div>
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.totalPoolAmount')}:{' '}
+                          </span>
+                          <span className={'text-[#FFE375]'}>
+                            {item.amountLabel}
+                          </span>
+                        </div>
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.winningResult')}:{' '}
+                          </span>
+                          <span className={'text-[#FF7575]'}>
+                            {item.resultNumberLabel}
+                          </span>
+                        </div>
+                        <div>
+                          <span className={'text-[#84A2A2]'}>
+                            {t('gameDesktop.history.payout')}:{' '}
+                          </span>
+                          <span>{item.winAmountLabel}</span>
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="flex h-[calc(var(--design-unit)*60)] items-center justify-center text-design-16 text-[#84A2A2]">
+                      {isFetchingNextPage ? loadingText : endText}
+                    </div>
+                  )}
                 </div>
-                <div
-                  className={
-                    'flex w-full flex-col gap-design-5 px-design-10 py-design-10 text-design-16'
-                  }
-                >
-                  <div>
-                    <span className={'text-[#84A2A2]'}>Round ID: </span>
-                    <span className={'text-[#C0E7EB]'}>{item.roundId}</span>
-                  </div>
-                  <div>
-                    <span className={'text-[#84A2A2]'}>Settled At: </span>
-                    <span>{item.settledAtLabel}</span>
-                  </div>
-                  <div>
-                    <span className={'text-[#84A2A2]'}>
-                      Total Pool Amount:{' '}
-                    </span>
-                    <span className={'text-[#FFE375]'}>
-                      {item.totalPoolAmountLabel}
-                    </span>
-                  </div>
-                  <div>
-                    <span className={'text-[#84A2A2]'}>Winning Result: </span>
-                    <span className={'text-[#FF7575]'}>
-                      {item.winningCellIdLabel}
-                    </span>
-                  </div>
-                  <div>
-                    <span className={'text-[#84A2A2]'}>Payout: </span>
-                    <span>{item.payoutMultiplierLabel}</span>
-                  </div>
-                </div>
-              </div>
-            )
-          })
+              )
+            })}
+          </div>
         )}
       </div>
     </SmartBackground>