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

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

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

@@ -1,5 +1,11 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import diamondIcon from '@/assets/system/diamond.webp'
 import { SmartImage } from '@/components/smart-image'
+import { notify } from '@/lib/notify'
 import { cn } from '@/lib/utils'
+import { useAuthStore, useModalStore } from '@/store'
+import { useGameRoundStore, useGameSessionStore } from '@/store/game'
 
 const animalModules = import.meta.glob('../../../../assets/animal/*.webp', {
   eager: true,
@@ -18,6 +24,37 @@ const animalImageList = Object.entries(animalModules)
   .filter((item) => item.id > 0)
   .sort((left, right) => left.id - right.id)
 
+function getNextMarqueeId(currentId: number | null) {
+  if (animalImageList.length === 0) {
+    return null
+  }
+
+  if (animalImageList.length === 1) {
+    return animalImageList[0]?.id ?? null
+  }
+
+  let nextId = currentId
+
+  while (nextId === currentId) {
+    nextId =
+      animalImageList[Math.floor(Math.random() * animalImageList.length)]?.id ??
+      currentId
+  }
+
+  return nextId
+}
+
+function formatSelectedLog(
+  selectionByCell: Record<number, { amount: number; count: number }>,
+) {
+  return Object.entries(selectionByCell)
+    .map(([cellId, value]) => ({
+      字花: String(cellId).padStart(2, '0'),
+      筹码: value.amount,
+    }))
+    .sort((left, right) => Number(left.字花) - Number(right.字花))
+}
+
 interface DesktopAnimalProps {
   activeId?: number | null
   className?: string
@@ -33,40 +70,220 @@ export function DesktopAnimal({
   imageClassName,
   onSelect,
 }: DesktopAnimalProps) {
+  const { t } = useTranslation()
+  const authStatus = useAuthStore((state) => state.status)
+  const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const activeChipId = useGameRoundStore((state) => state.activeChipId)
+  const chips = useGameRoundStore((state) => state.chips)
+  const clearSelections = useGameRoundStore((state) => state.clearSelections)
+  const maxSelectionCount = useGameRoundStore(
+    (state) => state.maxSelectionCount,
+  )
+  const placeBet = useGameRoundStore((state) => state.placeBet)
+  const removeSelectionsForCell = useGameRoundStore(
+    (state) => state.removeSelectionsForCell,
+  )
+  const selections = useGameRoundStore((state) => state.selections)
+  const connection = useGameSessionStore((state) => state.connection)
+  const requestRealtimeConnection = useGameSessionStore(
+    (state) => state.requestRealtimeConnection,
+  )
+  const shouldConnectRealtime = useGameSessionStore(
+    (state) => state.shouldConnectRealtime,
+  )
+  const [marqueeId, setMarqueeId] = useState<number | null>(() =>
+    getNextMarqueeId(null),
+  )
+  const activeChip = useMemo(
+    () => chips.find((chip) => chip.id === activeChipId) ?? chips[0] ?? null,
+    [activeChipId, chips],
+  )
+  const selectionByCell = useMemo(() => {
+    return selections.reduce<Record<number, { amount: number; count: number }>>(
+      (accumulator, selection) => {
+        const current = accumulator[selection.cellId] ?? { amount: 0, count: 0 }
+
+        accumulator[selection.cellId] = {
+          amount: current.amount + selection.amount,
+          count: current.count + 1,
+        }
+
+        return accumulator
+      },
+      {},
+    )
+  }, [selections])
+
+  const isRealtimeConnected = connection.status === 'connected'
+  const isRealtimeConnecting =
+    shouldConnectRealtime &&
+    (connection.status === 'connecting' || connection.status === 'reconnecting')
+  const showStandbyState = !shouldConnectRealtime || !isRealtimeConnected
+  const lockInteraction = showStandbyState
+  const isSelectedCell = (animalId: number) =>
+    Boolean(selectionByCell[animalId])
+  const selectedCellCount = Object.keys(selectionByCell).length
+
+  const handleStart = () => {
+    if (authStatus !== 'authenticated') {
+      notify.warning(t('commonUi.toast.loginRequired'))
+      setModalOpen('desktopLogin', true)
+      return
+    }
+
+    clearSelections()
+    requestRealtimeConnection()
+  }
+
+  const handleSelect = (animalId: number) => {
+    if (showStandbyState) {
+      return
+    }
+
+    if (onSelect) {
+      onSelect(animalId)
+      return
+    }
+
+    if (isSelectedCell(animalId)) {
+      const nextSelectionByCell = { ...selectionByCell }
+      delete nextSelectionByCell[animalId]
+      console.log('已选', formatSelectedLog(nextSelectionByCell))
+      removeSelectionsForCell(animalId)
+      return
+    }
+
+    if (selectedCellCount >= maxSelectionCount) {
+      return
+    }
+
+    console.log(
+      '已选',
+      formatSelectedLog({
+        ...selectionByCell,
+        [animalId]: {
+          amount: activeChip?.amount ?? 0,
+          count: 1,
+        },
+      }),
+    )
+    placeBet(animalId)
+  }
+
+  useEffect(() => {
+    if (!showStandbyState) {
+      setMarqueeId(null)
+      return
+    }
+
+    setMarqueeId((currentId) => getNextMarqueeId(currentId))
+
+    let timerId = 0
+
+    const loop = () => {
+      setMarqueeId((currentId) => getNextMarqueeId(currentId))
+      timerId = window.setTimeout(loop, 180 + Math.floor(Math.random() * 220))
+    }
+
+    timerId = window.setTimeout(loop, 220)
+
+    return () => {
+      window.clearTimeout(timerId)
+    }
+  }, [showStandbyState])
+
   return (
     <section
       className={cn(
-        'grid w-full grid-cols-6 gap-design-5 common-neon-inset',
+        'relative grid w-full grid-cols-6 gap-design-5 overflow-hidden common-neon-inset',
         className,
       )}
     >
       {animalImageList.map((item) => {
-        const isActive = item.id === activeId
+        const selectionMeta = selectionByCell[item.id]
+        const hasPlacedSelection = Boolean(selectionMeta)
+        const isActive = item.id === activeId || hasPlacedSelection
+        const isMarqueeActive = showStandbyState && item.id === marqueeId
 
         return (
           <button
             key={item.id}
             type="button"
-            onClick={() => onSelect?.(item.id)}
+            disabled={lockInteraction}
+            onClick={() => handleSelect(item.id)}
             className={cn(
-              'flex flex-col items-center transition',
-              'cursor-pointer',
+              'relative flex flex-col items-center overflow-hidden rounded-[calc(var(--design-unit)*18)] border border-transparent transition-[transform,border-color,box-shadow,opacity] duration-150',
+              lockInteraction
+                ? 'cursor-not-allowed opacity-90'
+                : 'cursor-pointer hover:-translate-y-[1px]',
+              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)]',
               isActive &&
-                'border-[rgba(255,151,15,0.95)] shadow-[inset_0_0_16px_rgba(255,151,15,0.55)]',
+                'border-[rgba(255,187,61,1)] shadow-[0_0_calc(var(--design-unit)*18)_rgba(255,175,52,0.82),0_0_calc(var(--design-unit)*30)_rgba(255,151,15,0.46),inset_0_0_calc(var(--design-unit)*20)_rgba(255,177,70,0.58)]',
+              !showStandbyState && !hasPlacedSelection && 'opacity-95',
               itemClassName,
             )}
           >
+            <span
+              aria-hidden="true"
+              className={cn(
+                'pointer-events-none absolute inset-[calc(var(--design-unit)*2)] rounded-[calc(var(--design-unit)*15)] opacity-0 transition-opacity duration-150',
+                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)]',
+                isActive &&
+                  'bg-[radial-gradient(circle_at_center,rgba(255,207,116,0.42)_0%,rgba(255,181,61,0.16)_42%,transparent_74%)] opacity-100',
+              )}
+            />
+            {!showStandbyState && !hasPlacedSelection ? (
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-[calc(var(--design-unit)*2)] z-20 rounded-[calc(var(--design-unit)*15)] bg-[rgba(4,16,24,0.52)] shadow-[inset_0_0_calc(var(--design-unit)*20)_rgba(3,9,14,0.56)]"
+              />
+            ) : null}
             <SmartImage
               src={item.url}
               alt={`animal-${item.id}`}
               className={cn(
-                'h-design-112 w-design-223 rounded-2xl object-contain',
+                'relative z-10 h-design-112 w-design-223 rounded-2xl object-contain',
                 imageClassName,
               )}
             />
+            {hasPlacedSelection ? (
+              <span className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+                <span className="flex min-w-design-96 items-center justify-center gap-design-4 rounded-full border border-[rgba(162,242,255,0.48)] bg-[linear-gradient(180deg,rgba(7,23,34,0.88),rgba(5,14,22,0.96))] px-design-10 py-design-6 shadow-[0_0_calc(var(--design-unit)*18)_rgba(70,245,255,0.18)]">
+                  <SmartImage
+                    src={diamondIcon}
+                    alt="diamond"
+                    className="h-design-24 w-design-24 shrink-0 object-contain"
+                  />
+                  <span className="text-design-18 font-semibold leading-none tracking-[0.06em] text-[#D8FBFF]">
+                    {selectionMeta.amount}
+                  </span>
+                </span>
+              </span>
+            ) : null}
           </button>
         )
       })}
+
+      {showStandbyState ? (
+        <button
+          type="button"
+          onClick={handleStart}
+          className="absolute inset-0 z-10 flex cursor-pointer items-center justify-center bg-[rgba(3,13,20,0.62)]"
+        >
+          <div className="relative flex flex-col items-center gap-design-8 rounded-[calc(var(--design-unit)*20)] border border-[rgba(111,255,247,0.54)] bg-[linear-gradient(180deg,rgba(6,28,38,0.92),rgba(4,14,20,0.94))] px-design-28 py-design-16 text-center shadow-[0_0_calc(var(--design-unit)*16)_rgba(70,245,255,0.34),0_0_calc(var(--design-unit)*34)_rgba(19,210,232,0.22)] transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-[1px] hover:border-[rgba(141,255,250,0.8)] hover:shadow-[0_0_calc(var(--design-unit)*22)_rgba(88,247,255,0.48),0_0_calc(var(--design-unit)*42)_rgba(32,228,255,0.3)]">
+            <span className="text-design-14 uppercase tracking-[0.42em] text-[rgba(111,255,247,0.76)]">
+              {isRealtimeConnecting ? '' : t('gameDesktop.animal.tapToEnter')}
+            </span>
+            <span className="text-design-28 font-semibold tracking-[0.18em] text-[#D2FFFF]">
+              {isRealtimeConnecting
+                ? t('gameDesktop.animal.loading')
+                : t('gameDesktop.animal.getStart')}
+            </span>
+          </div>
+        </button>
+      ) : null}
     </section>
   )
 }