fix(auth): 解决认证错误处理和会话管理问题

- 替换 AUTH_INVALID_TOKEN_CODE 为 AUTH_RELOGIN_REQUIRED_CODES 数组支持多种错误码
- 实现 hasClearableSessionState 和 hasRecordedUnauthorizedSession 函数优化会话清理逻辑
- 添加 clearQueryCache 选项控制查询缓存清理行为
- 修复马来西亚手机号正则验证模式导致的用户名验证问题
- 更新 API 错误消息处理优先级，优先使用服务端返回的消息
- 添加服务器消息检查函数 hasServerMessage 避免重复错误提示
- 在登录表单中实现密码可见性切换功能
- 添加密码可见性国际化文案支持
- 实现页面历史记录抽屉组件和相关动效
- 优化模态框背景遮罩样式和键盘事件处理
- 调整多个组件的 z-index 层级避免显示冲突

AGENTS.md

@@ -1,7 +1,7 @@
 <!-- gitnexus:start -->
 # GitNexus — Code Intelligence
 
-This project is indexed by GitNexus as **36-character-flower** (2566 symbols, 4898 relationships, 220 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
+This project is indexed by GitNexus as **36-character-flower** (2639 symbols, 5033 relationships, 226 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
 
 > If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first.
 

CLAUDE.md

@@ -1,7 +1,7 @@
 <!-- gitnexus:start -->
 # GitNexus — Code Intelligence
 
-This project is indexed by GitNexus as **36-character-flower** (2566 symbols, 4898 relationships, 220 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
+This project is indexed by GitNexus as **36-character-flower** (2639 symbols, 5033 relationships, 226 execution flows). Use the GitNexus MCP tools to understand code, assess impact, and navigate safely.
 
 > If any GitNexus tool warns the index is stale, run `npx gitnexus analyze` in terminal first.
 

src/components/app-boot-resource-gate.tsx

@@ -95,7 +95,7 @@ function AppLoadingOverlay({ progress }: { progress: number }) {
       role="status"
       aria-live="polite"
       aria-label="Loading"
-      className="fixed inset-0 z-[9999] flex items-center justify-center overflow-hidden bg-[#020913] text-[#D5FBFF]"
+      className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-[#020913] text-[#D5FBFF]"
     >
       <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_38%,rgba(35,221,255,0.18),transparent_30%),linear-gradient(180deg,#061827_0%,#020913_54%,#01050C_100%)]" />
       <div className="boot-grid absolute inset-0 opacity-50" />

src/components/center-modal.tsx

@@ -1,10 +1,11 @@
-import { type ReactNode, useEffect } from 'react'
+import { type ReactNode, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import modalBg from '@/assets/system/modal-bg.webp'
 import modalClose from '@/assets/system/modal-close.webp'
 import modalNormalBg from '@/assets/system/modal-normal-bg.png'
 import { SmartBackground } from '@/components/smart-background.tsx'
+import { acquireBodyScrollLock } from '@/lib/dom/body-scroll-lock'
 import { cn } from '@/lib/utils'
 
 interface CenterModalProps {
@@ -16,6 +17,7 @@ interface CenterModalProps {
   isNormalBg?: boolean
   children?: ReactNode
   className?: string
+  backdropClassName?: string
 }
 
 const MODAL_HEADER_HEIGHT = 'calc(100% * 80 / 700)'
@@ -30,44 +32,49 @@ export function CenterModal({
   isNormalBg = false,
   children,
   className,
+  backdropClassName,
 }: CenterModalProps) {
   const { t } = useTranslation()
+  const onCloseRef = useRef(onClose)
   const handleClose = () => {
     onClose?.()
   }
 
+  useEffect(() => {
+    onCloseRef.current = onClose
+  }, [onClose])
+
   useEffect(() => {
     if (!open || typeof document === 'undefined') {
       return
     }
 
-    const previousOverflow = document.body.style.overflow
+    const releaseBodyScrollLock = acquireBodyScrollLock()
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        onClose?.()
+        onCloseRef.current?.()
       }
     }
 
-    document.body.style.overflow = 'hidden'
+    window.addEventListener('keydown', handleKeyDown)
-
-    if (onClose) {
-      window.addEventListener('keydown', handleKeyDown)
-    }
 
     return () => {
-      document.body.style.overflow = previousOverflow
+      releaseBodyScrollLock()
-      if (onClose) {
+      window.removeEventListener('keydown', handleKeyDown)
-        window.removeEventListener('keydown', handleKeyDown)
-      }
     }
-  }, [open, onClose])
+  }, [open])
 
   if (!open || typeof document === 'undefined') {
     return null
   }
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/72 backdrop-blur-sm">
+    <div
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center bg-slate-950/72 backdrop-blur-sm',
+        backdropClassName,
+      )}
+    >
       <SmartBackground
         role="dialog"
         aria-modal="true"

src/components/fullscreen-lottie-overlay.tsx

@@ -8,13 +8,13 @@ import { type ReactNode, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import type { FullscreenLottieSource } from '@/components/fullscreen-lottie-overlay.types.ts'
 import { LottiePlayer } from '@/components/lottie-player.tsx'
+import { acquireBodyScrollLock } from '@/lib/dom/body-scroll-lock'
 import { cn } from '@/lib/utils'
 
 interface FullscreenLottieOverlayProps {
   open: boolean
   source: FullscreenLottieSource | null
   animationKey?: string
-  zIndex?: number
   renderer?: RendererType
   loop?: boolean | number
   autoplay?: boolean
@@ -38,7 +38,6 @@ export function FullscreenLottieOverlay({
   open,
   source,
   animationKey,
-  zIndex = 80,
   renderer = 'svg',
   loop,
   autoplay,
@@ -58,12 +57,7 @@ export function FullscreenLottieOverlay({
       return
     }
 
-    const previousOverflow = document.body.style.overflow
+    return acquireBodyScrollLock()
-    document.body.style.overflow = 'hidden'
-
-    return () => {
-      document.body.style.overflow = previousOverflow
-    }
   }, [lockBodyScroll, open])
 
   if (!open || !source || typeof document === 'undefined') {
@@ -75,10 +69,9 @@ export function FullscreenLottieOverlay({
   return createPortal(
     <div
       className={cn(
-        'fixed inset-0 flex items-center justify-center overflow-hidden',
+        'fixed inset-0 z-40 flex items-center justify-center overflow-hidden',
         backdropClassName,
       )}
-      style={{ zIndex }}
     >
       <button
         type="button"

src/components/ui/notification-alert.tsx

@@ -111,7 +111,7 @@ export function AppNotificationAlert() {
   } as const
 
   return createPortal(
-    <div className="pointer-events-none fixed inset-x-0 top-[calc(var(--design-unit)*52)] z-[10000] flex justify-center px-4">
+    <div className="pointer-events-none fixed inset-x-0 top-[calc(var(--design-unit)*52)] z-50 flex justify-center px-4">
       <motion.div
         key={activeDialog.id}
         initial="hidden"

src/constants/auth.ts

@@ -13,6 +13,13 @@ export const AUTH_ENDPOINTS = {
 /** @description 后端返回该 code 表示登录态 token 无效或已过期。 */
 export const AUTH_INVALID_TOKEN_CODE = 1101
 
+/** @description 后端返回这些 code 时需要清空当前状态并触发用户重新登录。 */
+export const AUTH_RELOGIN_REQUIRED_CODES: readonly number[] = [
+  AUTH_INVALID_TOKEN_CODE,
+  1103,
+  303,
+]
+
 /** @description 获取接口鉴权 auth-token 时使用的接口地址。 */
 export const AUTH_TOKEN_ENDPOINT = 'api/v1/authToken'
 

src/constants/game.ts

@@ -148,6 +148,7 @@ export const GAME_API_ENDPOINTS = {
   noticeConfirm: 'api/notice/noticeConfirm',
   noticeDetail: 'api/notice/noticeDetail',
   noticeList: 'api/notice/noticeList',
+  periodHistory: 'api/game/periodHistory',
   placeBet: 'api/game/placeBet',
   roundFeed: 'game/round-feed',
 } as const

src/constants/system.ts

@@ -52,7 +52,7 @@ export const DESKTOP_LAYOUT_MIN_WIDTH_PX = 1024
 export const SUPPORTED_LANGUAGES = ['zh-CN', 'en-US', 'ms-MY', 'id-ID'] as const
 
 /** @description 应用无法解析用户语言时使用的默认语言。 */
-export const DEFAULT_APP_LANGUAGE = 'zh-CN'
+export const DEFAULT_APP_LANGUAGE = 'en-US'
 
 /** @description 语言切换面板展示的语言选项配置。 */
 export const LANGUAGE_OPTIONS: Array<{
@@ -112,6 +112,7 @@ export const MODAL_KEYS = [
   'desktopAutoSetting',
   'desktopProcedures',
   'desktopWithdrawTopup',
+  'desktopPeriodHistory',
 ] as const
 
 /** @description 全局弹窗默认可见状态。 */
@@ -125,4 +126,5 @@ export const INITIAL_MODAL_VISIBILITY = {
   desktopAutoSetting: false,
   desktopProcedures: false,
   desktopWithdrawTopup: false,
+  desktopPeriodHistory: false,
 } as const

src/features/auth/api/auth-api.ts

@@ -36,7 +36,12 @@ function unwrapEnvelope<T>(
 
   throw new ApiError({
     data: response,
-    message: fallbackErrorKey,
+    message:
+      typeof response.msg === 'string' && response.msg.length > 0
+        ? response.msg
+        : typeof response.message === 'string' && response.message.length > 0
+          ? response.message
+          : fallbackErrorKey,
   })
 }
 

src/features/auth/components/desktop-auth-form-parts.tsx

@@ -1,7 +1,9 @@
-import type { ReactNode } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { type ComponentProps, type ReactNode, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import rightImg from '@/assets/system/right.webp'
 import { SmartImage } from '@/components/smart-image.tsx'
+import { Input } from '@/components/ui/input.tsx'
 import { cn } from '@/lib/utils'
 
 export function DesktopAuthFieldRow({
@@ -67,6 +69,42 @@ export function DesktopAuthFooterLinks({
   )
 }
 
+type DesktopAuthPasswordInputProps = Omit<ComponentProps<'input'>, 'type'>
+
+export function DesktopAuthPasswordInput({
+  className,
+  ...props
+}: DesktopAuthPasswordInputProps) {
+  const { t } = useTranslation()
+  const [isVisible, setIsVisible] = useState(false)
+
+  return (
+    <div className="relative">
+      <Input
+        {...props}
+        type={isVisible ? 'text' : 'password'}
+        className={cn('auth-password-input pr-design-52', className)}
+      />
+      <button
+        type="button"
+        aria-label={t(
+          isVisible
+            ? 'auth.common.passwordVisibility.hide'
+            : 'auth.common.passwordVisibility.show',
+        )}
+        onClick={() => setIsVisible((value) => !value)}
+        className="absolute right-design-12 top-1/2 flex h-design-34 w-design-34 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md text-[#A9E8EA] transition-colors duration-200 ease-out hover:text-[#F2FFFF] focus-visible:outline-none focus-visible:ring-[calc(var(--design-unit)*1.5)] focus-visible:ring-[rgba(110,255,255,0.4)]"
+      >
+        {isVisible ? (
+          <EyeOff aria-hidden="true" className="h-design-22 w-design-22" />
+        ) : (
+          <Eye aria-hidden="true" className="h-design-22 w-design-22" />
+        )}
+      </button>
+    </div>
+  )
+}
+
 export function DesktopAuthSubmitError({
   message,
 }: {

src/features/auth/components/desktop-login-form-view.tsx

@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/input.tsx'
 import {
   DesktopAuthFieldRow,
   DesktopAuthInputError,
-  DesktopAuthSubmitError,
+  DesktopAuthPasswordInput,
 } from './desktop-auth-form-parts'
 
 interface DesktopLoginFormViewProps {
@@ -20,7 +20,6 @@ interface DesktopLoginFormViewProps {
   onSwitchToRegister: () => void
   onUsernameChange: (value: string) => void
   password: string
-  submitError?: string | null
   username: string
 }
 
@@ -32,7 +31,6 @@ export function DesktopLoginFormView({
   onSwitchToRegister,
   onUsernameChange,
   password,
-  submitError,
   username,
 }: DesktopLoginFormViewProps) {
   const { t } = useTranslation()
@@ -89,10 +87,9 @@ export function DesktopLoginFormView({
           </DesktopAuthFieldRow>
 
           <DesktopAuthFieldRow label={t('auth.login.fields.password.label')}>
-            <Input
+            <DesktopAuthPasswordInput
               id="desktop-login-password"
               name="password"
-              type="password"
               autoComplete="current-password"
               value={password}
               onChange={(event) => onPasswordChange(event.target.value)}
@@ -116,9 +113,6 @@ export function DesktopLoginFormView({
           </DesktopAuthFieldRow>
 
           <div className="mt-auto flex flex-col gap-design-18">
-            <DesktopAuthSubmitError
-              message={submitError ? t(submitError) : undefined}
-            />
             <motion.div
               whileTap={prefersReducedMotion ? undefined : { scale: 0.98 }}
               className="flex items-center justify-center gap-design-12 text-center text-design-20 text-[#6DB5B9]"

src/features/auth/components/desktop-login-form.tsx

@@ -8,10 +8,10 @@ interface DesktopLoginFormProps {
 }
 
 export function DesktopLoginForm({ onSuccess }: DesktopLoginFormProps) {
-  const { form, isSubmitting, onSubmit, submitError } = useLoginForm({
+  const { form, isSubmitting, onSubmit } = useLoginForm({
     onSuccess,
   })
-  const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const openExclusiveModal = useModalStore((state) => state.openExclusiveModal)
   const usernameField = useController({
     control: form.control,
     name: 'username',
@@ -22,8 +22,7 @@ export function DesktopLoginForm({ onSuccess }: DesktopLoginFormProps) {
   })
 
   function handleSwitchToRegister() {
-    setModalOpen('desktopLogin', false)
+    openExclusiveModal('desktopRegister')
-    setModalOpen('desktopRegister', true)
   }
 
   return (
@@ -39,7 +38,6 @@ export function DesktopLoginForm({ onSuccess }: DesktopLoginFormProps) {
       onSubmit={onSubmit}
       onSwitchToRegister={handleSwitchToRegister}
       onUsernameChange={usernameField.field.onChange}
-      submitError={submitError}
     />
   )
 }

src/features/auth/components/desktop-register-form-view.tsx

@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/input.tsx'
 import {
   DesktopAuthFieldRow,
   DesktopAuthInputError,
-  DesktopAuthSubmitError,
+  DesktopAuthPasswordInput,
 } from './desktop-auth-form-parts'
 
 interface DesktopRegisterFormViewProps {
@@ -26,7 +26,6 @@ interface DesktopRegisterFormViewProps {
   onUsernameChange: (value: string) => void
   password: string
   confirmPassword: string
-  submitError?: string | null
   username: string
 }
 
@@ -42,7 +41,6 @@ export function DesktopRegisterFormView({
   onSwitchToLogin,
   onUsernameChange,
   password,
-  submitError,
   username,
 }: DesktopRegisterFormViewProps) {
   const { t } = useTranslation()
@@ -99,10 +97,9 @@ export function DesktopRegisterFormView({
           </DesktopAuthFieldRow>
 
           <DesktopAuthFieldRow label={t('auth.register.fields.password.label')}>
-            <Input
+            <DesktopAuthPasswordInput
               id="desktop-register-password"
               name="password"
-              type="password"
               autoComplete="new-password"
               value={password}
               onChange={(event) => onPasswordChange(event.target.value)}
@@ -128,10 +125,9 @@ export function DesktopRegisterFormView({
           <DesktopAuthFieldRow
             label={t('auth.register.fields.confirmPassword.label')}
           >
-            <Input
+            <DesktopAuthPasswordInput
               id="desktop-register-confirm-password"
               name="confirmPassword"
-              type="password"
               autoComplete="new-password"
               value={confirmPassword}
               onChange={(event) => onConfirmPasswordChange(event.target.value)}
@@ -191,10 +187,6 @@ export function DesktopRegisterFormView({
           </DesktopAuthFieldRow>
 
           <div className="mt-auto flex flex-col">
-            <DesktopAuthSubmitError
-              message={submitError ? t(submitError) : undefined}
-            />
-
             <motion.div
               whileTap={prefersReducedMotion ? undefined : { scale: 0.98 }}
               className="flex items-center justify-center gap-design-12 text-center text-design-20 text-[#6DB5B9]"

src/features/auth/components/desktop-register-form.tsx

@@ -8,10 +8,10 @@ interface DesktopRegisterFormProps {
 }
 
 export function DesktopRegisterForm({ onSuccess }: DesktopRegisterFormProps) {
-  const { form, isSubmitting, onSubmit, submitError } = useRegisterForm({
+  const { form, isSubmitting, onSubmit } = useRegisterForm({
     onSuccess,
   })
-  const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const openExclusiveModal = useModalStore((state) => state.openExclusiveModal)
   const usernameField = useController({
     control: form.control,
     name: 'username',
@@ -30,8 +30,7 @@ export function DesktopRegisterForm({ onSuccess }: DesktopRegisterFormProps) {
   })
 
   function handleSwitchToLogin() {
-    setModalOpen('desktopRegister', false)
+    openExclusiveModal('desktopLogin')
-    setModalOpen('desktopLogin', true)
   }
 
   return (
@@ -53,7 +52,6 @@ export function DesktopRegisterForm({ onSuccess }: DesktopRegisterFormProps) {
       onSubmit={onSubmit}
       onSwitchToLogin={handleSwitchToLogin}
       onUsernameChange={usernameField.field.onChange}
-      submitError={submitError}
     />
   )
 }

src/features/auth/hooks/auth-error-key.ts

@@ -13,6 +13,22 @@ function fallbackKeyByContext(context: AuthSubmitContext) {
     : 'auth.register.errors.submitFailed'
 }
 
+function hasServerMessage(error: ApiError) {
+  if (!error.data || typeof error.data !== 'object') {
+    return false
+  }
+
+  const data = error.data
+  const serverMessage =
+    'msg' in data && typeof data.msg === 'string'
+      ? data.msg
+      : 'message' in data && typeof data.message === 'string'
+        ? data.message
+        : null
+
+  return Boolean(serverMessage && serverMessage === error.message)
+}
+
 export function toAuthSubmitErrorKey(
   error: unknown,
   context: AuthSubmitContext,
@@ -28,6 +44,10 @@ export function toAuthSubmitErrorKey(
       return error.message
     }
 
+    if (hasServerMessage(error)) {
+      return error.message
+    }
+
     if (error.status === 408) {
       return 'auth.errors.timeout'
     }

src/features/auth/schema/auth-schema.ts

@@ -1,12 +1,9 @@
 import { z } from 'zod'
 
-const malaysiaMobilePhonePattern = /^60\d{1,9}$/
-
 const usernameSchema = z
   .string()
   .trim()
   .min(1, 'auth.validation.username.required')
-  .regex(malaysiaMobilePhonePattern, 'auth.validation.username.invalidPhone')
 
 const passwordSchema = z
   .string()

src/features/game/api/game-api.ts

@@ -60,7 +60,9 @@ function unwrapGameEnvelope<T>(
     message:
       typeof response.msg === 'string' && response.msg.length > 0
         ? response.msg
-        : fallbackMessage,
+        : typeof response.message === 'string' && response.message.length > 0
+          ? response.message
+          : fallbackMessage,
   })
 }
 

src/features/game/api/period-history-api.ts

@@ -0,0 +1,47 @@
+import { GAME_API_ENDPOINTS } from '@/constants'
+import { api } from '@/lib/api/api-client'
+import { ApiError } from '@/lib/api/api-error'
+import type { ApiResponse } from '@/type'
+
+export interface GamePeriodHistoryItemDto {
+  open_time: number
+  period_no: string
+  result_number: number
+}
+
+interface GamePeriodHistoryDto {
+  list: GamePeriodHistoryItemDto[]
+}
+
+function unwrapPeriodHistoryEnvelope(
+  response: ApiResponse<GamePeriodHistoryDto>,
+) {
+  if (response.code === 1) {
+    return response.data
+  }
+
+  throw new ApiError({
+    data: response,
+    message:
+      typeof response.msg === 'string' && response.msg.length > 0
+        ? response.msg
+        : typeof response.message === 'string' && response.message.length > 0
+          ? response.message
+          : 'Failed to load period history',
+  })
+}
+
+export async function getGamePeriodHistory(params: { limit?: number } = {}) {
+  const response = await api.get<GamePeriodHistoryDto>(
+    GAME_API_ENDPOINTS.periodHistory,
+    {
+      searchParams: {
+        limit: String(params.limit ?? 30),
+      },
+    },
+  )
+
+  return unwrapPeriodHistoryEnvelope(
+    response as ApiResponse<GamePeriodHistoryDto>,
+  )
+}

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

@@ -346,7 +346,7 @@ export function DesktopAnimalOverlay({
     return (
       <div
         className={cn(
-          'absolute inset-0 z-50 flex items-center justify-center overflow-hidden bg-[rgba(2,8,14,0.72)] px-design-24 backdrop-blur-[2px] transition-opacity duration-300',
+          'absolute inset-0 z-40 flex items-center justify-center overflow-hidden bg-[rgba(2,8,14,0.72)] px-design-24 backdrop-blur-[2px] transition-opacity duration-300',
           isRewardFadingOut && 'pointer-events-none opacity-0',
         )}
       >
@@ -399,14 +399,14 @@ export function DesktopAnimalOverlay({
     return (
       <div
         aria-hidden="true"
-        className="absolute inset-0 z-50 bg-[rgba(2,8,14,0.72)] backdrop-blur-[2px]"
+        className="absolute inset-0 z-40 bg-[rgba(2,8,14,0.72)] backdrop-blur-[2px]"
       />
     )
   }
 
   if (hostingFlag) {
     return (
-      <div className="absolute inset-0 z-50 flex flex-col items-center justify-center gap-design-22 bg-[rgba(2,8,14,0.38)] px-design-24 backdrop-blur-[1px]">
+      <div className="absolute inset-0 z-40 flex flex-col items-center justify-center gap-design-22 bg-[rgba(2,8,14,0.38)] px-design-24 backdrop-blur-[1px]">
         {showStopOverlay ? (
           <div className="relative h-design-170 w-design-520 max-w-[72%] overflow-visible">
             <SmartImage
@@ -477,7 +477,7 @@ export function DesktopAnimalOverlay({
 
   if (showStopOverlay) {
     return (
-      <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-40 flex items-center justify-center bg-[rgba(2,8,14,0.72)] px-design-24 backdrop-blur-[2px]">
         <div className="flex max-w-[88%] flex-col items-center justify-center gap-design-18">
           <StopBetSummary
             items={stopBetItems}

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

@@ -18,8 +18,11 @@ import { SmartImage } from '@/components/smart-image.tsx'
 import { ACTION_OPTIONS } from '@/constants'
 import { useGameControlVm } from '@/features/game/hooks/use-game-control-vm.ts'
 import { cn } from '@/lib/utils'
+import { useModalStore } from '@/store'
+
 export function DesktopControl() {
   const { t } = useTranslation()
+  const setModalOpen = useModalStore((state) => state.setModalOpen)
   const {
     acceptingBets,
     actionsEnabled,
@@ -112,10 +115,14 @@ export function DesktopControl() {
       }
     >
       <SmartBackground
+        as="button"
+        type="button"
         src={leftBottomBg}
         size="100% 100%"
+        onClick={() => setModalOpen('desktopPeriodHistory', true)}
+        aria-label={t('gameDesktop.periodHistory.title')}
         className={
-          'flex flex-col items-center gap-1 justify-center h-full w-design-110 shrink-0 bg-center bg-no-repeat'
+          'flex flex-col items-center gap-1 justify-center h-full w-design-110 shrink-0 cursor-pointer bg-center bg-no-repeat transition-[filter] duration-200 hover:brightness-125 focus-visible:ring-2 focus-visible:ring-[#4FEAFF]'
         }
       >
         <div className={'flex flex-col items-center justify-center'}>
@@ -254,7 +261,7 @@ export function DesktopControl() {
                         }
                   }
                   transition={{ type: 'spring', stiffness: 380, damping: 24 }}
-                  className={'relative z-[1]'}
+                  className={'relative z-10'}
                 >
                   <motion.img
                     src={chip.src}
@@ -267,12 +274,12 @@ export function DesktopControl() {
                       src={chipLock}
                       alt="chip-locked"
                       draggable={false}
-                      className="pointer-events-none absolute left-1/2 top-1/2 z-[12] h-design-54 w-design-54 -translate-x-1/2 -translate-y-1/2 object-contain"
+                      className="pointer-events-none absolute left-1/2 top-1/2 z-40 h-design-54 w-design-54 -translate-x-1/2 -translate-y-1/2 object-contain"
                     />
                   )}
                   <span
                     className={
-                      'pointer-events-none absolute inset-x-0 top-1/2 z-[8] -translate-y-[calc(50%-1*var(--design-unit))] text-center text-design-16 font-black leading-none tracking-[0.06em] text-[rgba(96,54,0,0.85)] blur-[1px]'
+                      'pointer-events-none absolute inset-x-0 top-1/2 z-20 -translate-y-[calc(50%-1*var(--design-unit))] text-center text-design-16 font-black leading-none tracking-[0.06em] text-[rgba(96,54,0,0.85)] blur-[1px]'
                     }
                   >
                     {chip.valueLabel}
@@ -286,7 +293,7 @@ export function DesktopControl() {
                   </span>
                   <span
                     className={
-                      'pointer-events-none absolute inset-x-0 top-1/2 z-[11] -translate-y-1/2 text-center text-design-16 font-black leading-none tracking-[0.06em] text-white [text-shadow:0_1px_0_rgba(255,255,255,0.6),0_2px_4px_rgba(0,0,0,0.72),0_0_10px_rgba(255,255,255,0.22)]'
+                      'pointer-events-none absolute inset-x-0 top-1/2 z-30 -translate-y-1/2 text-center text-design-16 font-black leading-none tracking-[0.06em] text-white [text-shadow:0_1px_0_rgba(255,255,255,0.6),0_2px_4px_rgba(0,0,0,0.72),0_0_10px_rgba(255,255,255,0.22)]'
                     }
                   >
                     {chip.valueLabel}

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

@@ -44,7 +44,6 @@ export function DesktopStatusLine() {
     <div className={'relative w-full flex flex-col text-design-22'}>
       {/*<div*/}
       {/*    className={*/}
-      {/*        'absolute top-design-75 left-1/2 -translate-x-1/2 -z-10 w-full px-design-16'*/}
       {/*    }*/}
       {/*>*/}
       {/*    <DesktopTitle />*/}
@@ -66,9 +65,7 @@ export function DesktopStatusLine() {
         >
           {showStreakLimitOnly && (
             <div
-              className={
+              className={'pointer-events-none absolute bg-center bg-no-repeat'}
-                'pointer-events-none absolute z-0 bg-center bg-no-repeat'
-              }
               style={{
                 top: 'calc(var(--design-unit)*-14)',
                 right: 'calc(var(--design-unit)*-190)',
@@ -138,7 +135,7 @@ export function DesktopStatusLine() {
         <div className="relative z-20  flex h-[105px] w-design-360 items-center justify-center">
           <SmartBackground
             src={statusCenter}
-            className="pointer-events-none absolute inset-0 z-0 bg-no-repeat bg-center bg-contain transition-opacity duration-500 ease-out"
+            className="pointer-events-none absolute inset-0 bg-no-repeat bg-center bg-contain transition-opacity duration-500 ease-out"
             size="contain"
             style={{
               opacity: showWarningCountdown ? 0.18 : 1,
@@ -146,7 +143,7 @@ export function DesktopStatusLine() {
             }}
           />
           <div
-            className="pointer-events-none absolute inset-0 z-0 overflow-visible transition-all duration-500 ease-out"
+            className="pointer-events-none absolute inset-0 overflow-visible transition-all duration-500 ease-out"
             style={{
               opacity: showWarningCountdown ? 1 : 0,
               transform: showWarningCountdown

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

@@ -2,6 +2,30 @@ import broadcast from '@/assets/system/broadcast.webp'
 import { SmartImage } from '@/components/smart-image.tsx'
 import { useGameSessionStore } from '@/store/game'
 
+const winAmountFormatter = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 6,
+})
+
+function maskParticipantLabel(value: number | string) {
+  const label = String(value).trim()
+
+  if (label.length <= 1) {
+    return '*'
+  }
+
+  const visibleLength = Math.ceil(label.length / 2)
+
+  return `${label.slice(0, visibleLength)}${'*'.repeat(
+    label.length - visibleLength,
+  )}`
+}
+
+function formatWinAmount(value: string) {
+  const amount = Number(value)
+
+  return Number.isFinite(amount) ? winAmountFormatter.format(amount) : value
+}
+
 export function DesktopTitle() {
   const jackpotBroadcasts = useGameSessionStore(
     (state) => state.jackpotBroadcasts,
@@ -10,7 +34,9 @@ export function DesktopTitle() {
     jackpotBroadcasts.length > 0
       ? jackpotBroadcasts.map((broadcast) => ({
           id: broadcast.id,
-          message: broadcast.message,
+          message: `Player ${maskParticipantLabel(
+            broadcast.userId,
+          )} won ${formatWinAmount(broadcast.totalWin)}`,
         }))
       : [{ id: 'empty', message: '' }]
   const marqueeTitles =
@@ -31,12 +57,14 @@ export function DesktopTitle() {
       <div className="relative h-design-28 min-w-0 flex-1 overflow-hidden">
         <div
           className={
-            jackpotBroadcasts.length > 0 ? 'desktop-title-vertical-marquee' : ''
+            jackpotBroadcasts.length > 0
+              ? 'desktop-title-horizontal-marquee'
+              : ''
           }
         >
           {marqueeTitles.map((title) => (
             <div
-              className="flex h-design-28 items-center whitespace-nowrap !text-[#FF970F]"
+              className="flex h-design-28 shrink-0 items-center whitespace-nowrap !text-[#FF970F]"
               key={title.id}
             >
               {title.message}

src/features/game/components/shared/entry-notice-gate-modal.tsx

@@ -16,6 +16,7 @@ import {
 import { getNoticeList } from '@/features/game/api'
 import { cn } from '@/lib/utils'
 import { useAuthStore } from '@/store/auth'
+import { useModalStore } from '@/store/modal'
 
 function getLastConfirmedAt(storageKey: string) {
   if (typeof localStorage === 'undefined') {
@@ -41,12 +42,21 @@ export function EntryNoticeGateModal() {
   const authIsHydrated = useAuthStore((state) => state.isHydrated)
   const accessToken = useAuthStore((state) => state.accessToken)
   const currentUserId = useAuthStore((state) => state.currentUser?.id)
+  const lastUnauthorizedAt = useAuthStore((state) => state.lastUnauthorizedAt)
+  const isDesktopLoginOpen = useModalStore((state) => state.modals.desktopLogin)
+  const isDesktopRegisterOpen = useModalStore(
+    (state) => state.modals.desktopRegister,
+  )
   const [hasEntered, setHasEntered] = useState(false)
   const [hasAgreed, setHasAgreed] = useState(false)
   const [shouldGateEntry, setShouldGateEntry] = useState(false)
 
   const hasStoredLoginInfo =
     authStatus === 'authenticated' && Boolean(accessToken)
+  const isReloginRequired =
+    authStatus === 'anonymous' && Boolean(lastUnauthorizedAt)
+  const isAuthModalOpen = isDesktopLoginOpen || isDesktopRegisterOpen
+  const shouldSuppressEntryGate = isReloginRequired || isAuthModalOpen
   const confirmedAtStorageKey = `${ENTRY_NOTICE_LAST_CONFIRMED_AT_KEY}:${
     currentUserId ?? 'authenticated'
   }`
@@ -60,7 +70,7 @@ export function EntryNoticeGateModal() {
     setHasAgreed(false)
 
     if (!hasStoredLoginInfo) {
-      setShouldGateEntry(true)
+      setShouldGateEntry(!shouldSuppressEntryGate)
 
       return
     }
@@ -71,12 +81,17 @@ export function EntryNoticeGateModal() {
       !lastConfirmedAt ||
         Date.now() - lastConfirmedAt >= ENTRY_NOTICE_CONFIRM_INTERVAL_MS,
     )
-  }, [authIsHydrated, confirmedAtStorageKey, hasStoredLoginInfo])
+  }, [
+    authIsHydrated,
+    confirmedAtStorageKey,
+    hasStoredLoginInfo,
+    shouldSuppressEntryGate,
+  ])
 
   const noticeListQuery = useQuery({
     queryKey: ['game', 'entry-notice-list'],
     queryFn: () => getNoticeList({ page: 1, pageSize: 20 }),
-    enabled: authIsHydrated && shouldGateEntry,
+    enabled: authIsHydrated && shouldGateEntry && !shouldSuppressEntryGate,
     staleTime: 0,
   })
 
@@ -91,6 +106,7 @@ export function EntryNoticeGateModal() {
   const shouldShowModal =
     authIsHydrated &&
     shouldGateEntry &&
+    !shouldSuppressEntryGate &&
     !hasEntered &&
     (noticeListQuery.isPending ||
       noticeListQuery.isError ||

src/features/game/components/shared/period-history-list.tsx

@@ -0,0 +1,113 @@
+import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
+import type { PeriodHistoryDisplayItem } from '@/features/game/hooks/use-period-history-vm'
+import { cn } from '@/lib/utils'
+
+interface PeriodHistoryListLabels {
+  empty: string
+  failed: string
+  loading: string
+  retry: string
+}
+
+interface PeriodHistoryListProps {
+  className?: string
+  isError: boolean
+  isLoading: boolean
+  items: PeriodHistoryDisplayItem[]
+  labels: PeriodHistoryListLabels
+  onRetry: () => void
+}
+
+export function PeriodHistoryList({
+  className,
+  isError,
+  isLoading,
+  items,
+  labels,
+  onRetry,
+}: PeriodHistoryListProps) {
+  if (isLoading) {
+    return (
+      <DataLoadingIndicator label={labels.loading} className="min-h-full" />
+    )
+  }
+
+  if (isError) {
+    return (
+      <div className="flex min-h-full flex-col items-center justify-center gap-design-16 text-design-18 text-[#8DBCC2]">
+        <span>{labels.failed}</span>
+        <button
+          type="button"
+          className="cursor-pointer rounded-[calc(var(--design-unit)*5)] border border-[rgba(85,236,255,0.48)] px-design-20 py-design-8 text-design-16 text-[#D5FBFF] transition-colors duration-200 hover:bg-[rgba(85,236,255,0.12)]"
+          onClick={onRetry}
+        >
+          {labels.retry}
+        </button>
+      </div>
+    )
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="flex min-h-full items-center justify-center text-design-18 text-[#8DBCC2]">
+        {labels.empty}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('grid grid-cols-4 gap-design-16', className)}>
+      {items.map((item) => (
+        <div
+          key={`${item.periodNo}-${item.openTime}`}
+          className="relative grid h-design-70 min-w-0 grid-cols-[minmax(calc(var(--design-unit)*70),1fr)_auto_auto] items-center gap-design-12 overflow-hidden rounded-[calc(var(--design-unit)*5)] border border-[rgba(92,221,242,0.38)] bg-[linear-gradient(180deg,rgba(9,28,43,0.9),rgba(4,15,26,0.92))] px-design-10 shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(70,221,255,0.12),0_0_calc(var(--design-unit)*8)_rgba(53,212,255,0.08)]"
+          title={item.periodNo}
+        >
+          <span className="min-w-0 truncate text-design-16 font-semibold text-white">
+            {item.displayPeriodNo}
+          </span>
+          <span
+            className={cn(
+              'relative flex h-design-50 w-design-58 shrink-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] text-design-30 font-black leading-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:h-design-13 before:w-design-13 before:rounded-tl-[calc(var(--design-unit)*6)] before:border-l before:border-t after:pointer-events-none after:absolute after:right-0 after:top-0 after:h-design-13 after:w-design-13 after:rounded-tr-[calc(var(--design-unit)*6)] after:border-r after:border-t',
+              item.isOdd
+                ? 'bg-[rgba(54,5,15,0.5)] text-[#FF3959] shadow-[0_0_calc(var(--design-unit)*12)_rgba(255,55,81,0.2),inset_0_0_calc(var(--design-unit)*10)_rgba(255,55,81,0.12)] before:border-[rgba(255,55,81,0.86)] after:border-[rgba(255,55,81,0.86)]'
+                : 'bg-[rgba(9,28,75,0.56)] text-[#4B91FF] shadow-[0_0_calc(var(--design-unit)*12)_rgba(69,137,255,0.22),inset_0_0_calc(var(--design-unit)*10)_rgba(69,137,255,0.16)] before:border-[rgba(69,137,255,0.9)] after:border-[rgba(69,137,255,0.9)]',
+            )}
+          >
+            <span
+              aria-hidden="true"
+              className={cn(
+                'pointer-events-none absolute bottom-0 left-0 h-design-13 w-design-13 rounded-bl-[calc(var(--design-unit)*6)] border-b border-l',
+                item.isOdd
+                  ? 'border-[rgba(255,55,81,0.86)]'
+                  : 'border-[rgba(69,137,255,0.9)]',
+              )}
+            />
+            <span
+              aria-hidden="true"
+              className={cn(
+                'pointer-events-none absolute bottom-0 right-0 h-design-13 w-design-13 rounded-br-[calc(var(--design-unit)*6)] border-b border-r',
+                item.isOdd
+                  ? 'border-[rgba(255,55,81,0.86)]'
+                  : 'border-[rgba(69,137,255,0.9)]',
+              )}
+            />
+            {item.displayResultNumber}
+          </span>
+          <span className="flex h-design-50 w-design-72 shrink-0 items-center justify-end overflow-hidden">
+            {item.image ? (
+              <img
+                src={item.image}
+                alt={item.displayResultNumber}
+                draggable={false}
+                className="h-full w-auto max-w-none shrink-0 object-contain"
+              />
+            ) : (
+              <span className="text-design-13 text-[#668C92]">--</span>
+            )}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}

src/features/game/components/shared/round-betting-start-alert.tsx

@@ -52,7 +52,7 @@ export function RoundBettingStartAlert({
         <motion.div
           aria-live="polite"
           className={cn(
-            'pointer-events-none left-1/2 top-1/2 z-50 w-[min(calc(var(--design-unit)*560),88vw)] -translate-x-1/2 -translate-y-1/2',
+            'pointer-events-none left-1/2 top-1/2 z-30 w-[min(calc(var(--design-unit)*560),88vw)] -translate-x-1/2 -translate-y-1/2',
             placement === 'fixed' ? 'fixed' : 'absolute',
             className,
           )}

src/features/game/entry/entry-page.tsx

@@ -19,6 +19,9 @@ export function EntryPage() {
   const syncConnection = useGameSessionStore((state) => state.syncConnection)
   const setCurrentUser = useAuthStore((state) => state.setCurrentUser)
   const authStatus = useAuthStore((state) => state.status)
+  const lastUnauthorizedAt = useAuthStore((state) => state.lastUnauthorizedAt)
+  const isReloginRequired =
+    authStatus === 'anonymous' && Boolean(lastUnauthorizedAt)
 
   const [isHydrating, setIsHydrating] = useState(true)
   const [isMobile, setIsMobile] = useState(() => {
@@ -35,6 +38,12 @@ export function EntryPage() {
   })
 
   useEffect(() => {
+    if (isReloginRequired) {
+      setIsHydrating(false)
+
+      return
+    }
+
     let cancelled = false
 
     void getGameLobbyInit()
@@ -115,6 +124,7 @@ export function EntryPage() {
     authStatus,
     hydrateRound,
     hydrateSession,
+    isReloginRequired,
     selectChip,
     setCurrentUser,
     syncConnection,

src/features/game/entry/pc-entry.tsx

@@ -8,6 +8,7 @@ import DesktopAutoSettingModal from '@/features/game/modal/desktop/desktop-auto-
 import DesktopLanguageModal from '@/features/game/modal/desktop/desktop-language-modal.tsx'
 import DesktopLoginModal from '@/features/game/modal/desktop/desktop-login-modal.tsx'
 import DesktopNoticeModal from '@/features/game/modal/desktop/desktop-notice-modal.tsx'
+import { DesktopPeriodHistoryDrawer } from '@/features/game/modal/desktop/desktop-period-history-drawer.tsx'
 import DesktopProceduresModal from '@/features/game/modal/desktop/desktop-procedures-modal.tsx'
 import DesktopRegisterModal from '@/features/game/modal/desktop/desktop-register-modal.tsx'
 import DesktopRulesModal from '@/features/game/modal/desktop/desktop-rules-modal.tsx'
@@ -20,6 +21,7 @@ export function PcEntry() {
   return (
     <>
       <DesktopHeader />
+
       <div
         className={'mx-auto my-design-10 w-[calc(100%-40*var(--design-unit))]'}
       >
@@ -68,6 +70,8 @@ export function PcEntry() {
       <DesktopWithdrawTopupModal />
       {/* 强制弹窗 */}
       <EntryNoticeGateModal />
+      {/* 历史开奖信息弹窗 */}
+      <DesktopPeriodHistoryDrawer />
     </>
   )
 }

src/features/game/hooks/use-animal-vm.ts

@@ -52,6 +52,10 @@ export function useAnimalVm(
   const markSoundPlaybackUnlocked = useAudioStore(
     (state) => state.markSoundPlaybackUnlocked,
   )
+  const isLoginModalOpen = useModalStore((state) => state.modals.desktopLogin)
+  const isRegisterModalOpen = useModalStore(
+    (state) => state.modals.desktopRegister,
+  )
   const setModalOpen = useModalStore((state) => state.setModalOpen)
   const activeChipId = useGameRoundStore((state) => state.activeChipId)
   const activeBetQuantity = useGameRoundStore(
@@ -114,6 +118,8 @@ export function useAnimalVm(
     shouldConnectRealtime &&
     (connection.status === 'connecting' || connection.status === 'reconnecting')
   const showStandbyState = !shouldConnectRealtime || !isRealtimeConnected
+  const isAuthModalOpen = isLoginModalOpen || isRegisterModalOpen
+  const shouldAnimateStandby = showStandbyState && !isAuthModalOpen
   const hasSubmittedCurrentRound =
     Boolean(roundId) && currentUser?.lastBetPeriodNo === roundId
   const lockInteraction =
@@ -140,7 +146,7 @@ export function useAnimalVm(
   }, [cellWarning])
 
   useEffect(() => {
-    if (!showStandbyState) {
+    if (!shouldAnimateStandby) {
       setMarqueeId(null)
       return
     }
@@ -159,7 +165,7 @@ export function useAnimalVm(
     return () => {
       window.clearTimeout(timerId)
     }
-  }, [animalIds, showStandbyState])
+  }, [animalIds, shouldAnimateStandby])
 
   const handleStart = () => {
     if (authStatus !== 'authenticated') {
@@ -223,7 +229,7 @@ export function useAnimalVm(
     handleStart,
     isRealtimeConnecting,
     lockInteraction,
-    marqueeId,
+    marqueeId: shouldAnimateStandby ? marqueeId : null,
     selectionByCell,
     showStandbyState,
   }

src/features/game/hooks/use-app-language.ts

@@ -1,7 +1,11 @@
 import { useLocation } from '@tanstack/react-router'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { LANGUAGE_OPTIONS, SUPPORTED_LANGUAGES } from '@/constants'
+import {
+  DEFAULT_APP_LANGUAGE,
+  LANGUAGE_OPTIONS,
+  SUPPORTED_LANGUAGES,
+} from '@/constants'
 import type { AppLanguage } from '@/i18n'
 
 const languagePrefixPattern = new RegExp(
@@ -22,11 +26,12 @@ export function useAppLanguage() {
 
   const currentLanguage = (i18n.resolvedLanguage ??
     i18n.language ??
-    'zh-CN') as AppLanguage
+    DEFAULT_APP_LANGUAGE) as AppLanguage
 
   const currentLanguageOption = useMemo(
     () =>
       LANGUAGE_OPTIONS.find((option) => option.code === currentLanguage) ??
+      LANGUAGE_OPTIONS.find((option) => option.code === DEFAULT_APP_LANGUAGE) ??
       LANGUAGE_OPTIONS[0],
     [currentLanguage],
   )

src/features/game/hooks/use-deposit-tier-list.ts

@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
+import { DEFAULT_APP_LANGUAGE } from '@/constants'
 import { getDepositTierList } from '@/features/game/api'
 
 export function useDepositTierList() {
   const { i18n } = useTranslation()
-  const language = i18n.resolvedLanguage ?? i18n.language ?? 'zh-CN'
+  const language =
+    i18n.resolvedLanguage ?? i18n.language ?? DEFAULT_APP_LANGUAGE
 
   return useQuery({
     queryKey: ['finance', 'deposit-tier-list', language],

src/features/game/hooks/use-deposit-withdraw-config.ts

@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
+import { DEFAULT_APP_LANGUAGE } from '@/constants'
 import { getDepositWithdrawConfig } from '@/features/game/api'
 
 export function useDepositWithdrawConfig() {
   const { i18n } = useTranslation()
-  const language = i18n.resolvedLanguage ?? i18n.language ?? 'zh-CN'
+  const language =
+    i18n.resolvedLanguage ?? i18n.language ?? DEFAULT_APP_LANGUAGE
 
   return useQuery({
     queryKey: ['finance', 'deposit-withdraw-config', language],

src/features/game/hooks/use-game-realtime-sync.ts

@@ -678,10 +678,13 @@ function applyRealtimeMessage(message: GameSocketMessage) {
 export function useGameRealtimeSync() {
   const accessToken = useAuthStore((state) => state.accessToken)
   const authStatus = useAuthStore((state) => state.status)
+  const lastUnauthorizedAt = useAuthStore((state) => state.lastUnauthorizedAt)
   const shouldConnectRealtime = useGameSessionStore(
     (state) => state.shouldConnectRealtime,
   )
   const socketClientRef = useRef<GameSocketClient | null>(null)
+  const isReloginRequired =
+    authStatus === 'anonymous' && Boolean(lastUnauthorizedAt)
 
   useEffect(() => {
     if (sharedSocketDisconnectTimerId !== null) {
@@ -689,6 +692,26 @@ export function useGameRealtimeSync() {
       sharedSocketDisconnectTimerId = null
     }
 
+    if (isReloginRequired) {
+      sharedSocketClient?.disconnect()
+      sharedSocketClient = null
+      sharedSocketKey = null
+      socketClientRef.current = null
+
+      const gameSession = useGameSessionStore.getState()
+
+      gameSession.resetRealtimeConnectionRequest()
+      gameSession.syncConnection({
+        lastError: null,
+        latencyMs: null,
+        reconnectAttempt: 0,
+        status: 'disconnected',
+        transport: 'offline',
+      })
+
+      return
+    }
+
     if (
       !shouldConnectRealtime ||
       authStatus !== 'authenticated' ||
@@ -810,10 +833,14 @@ export function useGameRealtimeSync() {
       }, SOCKET_DISCONNECT_DELAY_MS)
       socketClientRef.current = sharedSocketClient
     }
-  }, [accessToken, authStatus, shouldConnectRealtime])
+  }, [accessToken, authStatus, isReloginRequired, shouldConnectRealtime])
 
   useEffect(() => {
-    if (!shouldConnectRealtime || authStatus !== 'authenticated') {
+    if (
+      isReloginRequired ||
+      !shouldConnectRealtime ||
+      authStatus !== 'authenticated'
+    ) {
       return
     }
 
@@ -869,5 +896,5 @@ export function useGameRealtimeSync() {
       cancelled = true
       window.clearInterval(intervalId)
     }
-  }, [authStatus, shouldConnectRealtime])
+  }, [authStatus, isReloginRequired, shouldConnectRealtime])
 }

src/features/game/hooks/use-period-history-vm.ts

@@ -0,0 +1,73 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+
+import {
+  type GamePeriodHistoryItemDto,
+  getGamePeriodHistory,
+} from '@/features/game/api/period-history-api'
+import { FLOWER_IMAGE_BY_ID } from '@/features/game/shared'
+
+export const DEFAULT_PERIOD_HISTORY_LIMIT = 36
+
+export interface PeriodHistoryDisplayItem {
+  displayPeriodNo: string
+  displayResultNumber: string
+  image: string
+  isOdd: boolean
+  openTime: number
+  periodNo: string
+  resultNumber: number
+}
+
+function formatPeriodNo(periodNo: string) {
+  const [, timeSegment] = periodNo.split('-')
+
+  return timeSegment && timeSegment.length <= 8 ? timeSegment : periodNo
+}
+
+function formatResultNumber(number: number) {
+  return String(number).padStart(2, '0')
+}
+
+export function toPeriodHistoryDisplayItem(
+  item: GamePeriodHistoryItemDto,
+): PeriodHistoryDisplayItem {
+  return {
+    displayPeriodNo: formatPeriodNo(item.period_no),
+    displayResultNumber: formatResultNumber(item.result_number),
+    image: FLOWER_IMAGE_BY_ID[item.result_number]?.animalUrl ?? '',
+    isOdd: item.result_number % 2 === 1,
+    openTime: item.open_time,
+    periodNo: item.period_no,
+    resultNumber: item.result_number,
+  }
+}
+
+export function usePeriodHistoryVm({
+  enabled,
+  limit = DEFAULT_PERIOD_HISTORY_LIMIT,
+}: {
+  enabled: boolean
+  limit?: number
+}) {
+  const query = useQuery({
+    queryKey: ['game', 'period-history', limit],
+    enabled,
+    queryFn: () => getGamePeriodHistory({ limit }),
+    refetchOnMount: 'always',
+    staleTime: 0,
+  })
+
+  const items = useMemo(
+    () =>
+      (query.data?.list ?? []).map((item) => toPeriodHistoryDisplayItem(item)),
+    [query.data?.list],
+  )
+
+  return {
+    isError: query.isError,
+    isLoading: query.isLoading,
+    items,
+    refetch: query.refetch,
+  }
+}

src/features/game/modal/desktop/desktop-login-modal.tsx

@@ -21,6 +21,7 @@ function DesktopLoginModal() {
       }
       titleAlign="center"
       className={'w-design-980 h-design-540'}
+      backdropClassName="backdrop-blur-none"
     >
       <DesktopLoginForm onSuccess={handleSubmit} />
     </CenterModal>

src/features/game/modal/desktop/desktop-period-history-drawer.tsx

@@ -0,0 +1,181 @@
+import { X } from 'lucide-react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PeriodHistoryList } from '@/features/game/components/shared/period-history-list'
+import {
+  DEFAULT_PERIOD_HISTORY_LIMIT,
+  type PeriodHistoryDisplayItem,
+  usePeriodHistoryVm,
+} from '@/features/game/hooks/use-period-history-vm'
+import { useModalStore } from '@/store'
+
+const OVERLAY_EASE = [0.16, 1, 0.3, 1] as const
+const DRAWER_TRANSITION = {
+  type: 'tween',
+  duration: 0.34,
+  ease: OVERLAY_EASE,
+} as const
+
+interface PeriodHistoryDrawerLabels {
+  close: string
+  empty: string
+  failed: string
+  loading: string
+  retry: string
+  title: string
+}
+
+interface DesktopPeriodHistoryDrawerViewProps {
+  isError: boolean
+  isLoading: boolean
+  items: PeriodHistoryDisplayItem[]
+  labels: PeriodHistoryDrawerLabels
+  onClose: () => void
+  onRetry: () => void
+  open: boolean
+}
+
+export function DesktopPeriodHistoryDrawer() {
+  const { t } = useTranslation()
+  const open = useModalStore((state) => state.modals.desktopPeriodHistory)
+  const setModalOpen = useModalStore((state) => state.setModalOpen)
+  const vm = usePeriodHistoryVm({
+    enabled: open,
+    limit: DEFAULT_PERIOD_HISTORY_LIMIT,
+  })
+  const handleClose = () => {
+    setModalOpen('desktopPeriodHistory', false)
+  }
+
+  return (
+    <DesktopPeriodHistoryDrawerView
+      open={open}
+      items={vm.items}
+      isLoading={vm.isLoading}
+      isError={vm.isError}
+      labels={{
+        close: t('gameDesktop.periodHistory.close'),
+        empty: t('gameDesktop.periodHistory.empty'),
+        failed: t('gameDesktop.periodHistory.failed'),
+        loading: t('gameDesktop.periodHistory.loading'),
+        retry: t('gameDesktop.periodHistory.retry'),
+        title: t('gameDesktop.periodHistory.title'),
+      }}
+      onClose={handleClose}
+      onRetry={() => void vm.refetch()}
+    />
+  )
+}
+
+export function DesktopPeriodHistoryDrawerView({
+  isError,
+  isLoading,
+  items,
+  labels,
+  onClose,
+  onRetry,
+  open,
+}: DesktopPeriodHistoryDrawerViewProps) {
+  const prefersReducedMotion = useReducedMotion()
+  const [isDrawerAnimating, setIsDrawerAnimating] = useState(false)
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          <motion.button
+            type="button"
+            aria-label={labels.close}
+            className="fixed left-0 right-0 top-0 bottom-[calc(var(--design-unit)*150)] z-30 cursor-default bg-black/48"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              duration: prefersReducedMotion ? 0.12 : 0.26,
+              ease: OVERLAY_EASE,
+            }}
+            onClick={onClose}
+          />
+          <motion.aside
+            role="dialog"
+            aria-modal="true"
+            aria-label={labels.title}
+            className="fixed left-0 top-design-16 bottom-[calc(var(--design-unit)*150)] z-40 flex w-design-1120 max-w-[calc(100vw-var(--design-unit)*24)] origin-left flex-col overflow-hidden rounded-r-[calc(var(--design-unit)*10)] border border-[rgba(81,230,255,0.62)] bg-[linear-gradient(180deg,rgba(6,19,32,0.98),rgba(3,12,22,0.96))] text-[#D5FBFF] shadow-[0_0_calc(var(--design-unit)*18)_rgba(39,216,255,0.28),0_0_calc(var(--design-unit)*54)_rgba(39,216,255,0.16),inset_0_0_calc(var(--design-unit)*18)_rgba(74,224,255,0.16)]"
+            initial={
+              prefersReducedMotion
+                ? { opacity: 0 }
+                : { x: '-100%', opacity: 0.98 }
+            }
+            animate={
+              prefersReducedMotion ? { opacity: 1 } : { x: 0, opacity: 1 }
+            }
+            exit={
+              prefersReducedMotion
+                ? { opacity: 0 }
+                : { x: '-100%', opacity: 0.98 }
+            }
+            transition={
+              prefersReducedMotion ? { duration: 0.12 } : DRAWER_TRANSITION
+            }
+            onAnimationStart={() => setIsDrawerAnimating(true)}
+            onAnimationComplete={() => setIsDrawerAnimating(false)}
+            style={
+              isDrawerAnimating
+                ? { willChange: 'transform, opacity' }
+                : undefined
+            }
+          >
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-x-design-8 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(80,241,255,0.96),transparent)]"
+            />
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute bottom-0 left-0 h-design-28 w-design-28 border-b-2 border-l-2 border-[#28E6FF]"
+            />
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute bottom-0 right-0 h-design-28 w-design-28 border-b-2 border-r-2 border-[#28E6FF]"
+            />
+            <div className="relative flex h-design-78 shrink-0 items-center justify-between border-b border-[rgba(80,224,255,0.38)] px-design-42">
+              <h2 className="text-design-28 font-bold leading-none text-white [text-shadow:0_0_calc(var(--design-unit)*10)_rgba(156,244,255,0.42)]">
+                {labels.title}
+              </h2>
+              <button
+                type="button"
+                aria-label={labels.close}
+                className="flex h-design-42 w-design-42 cursor-pointer items-center justify-center text-[#C8F7FF] transition-colors duration-200 hover:text-white focus-visible:ring-2 focus-visible:ring-[#4FEAFF]"
+                onClick={onClose}
+              >
+                <X size={32} strokeWidth={2.1} />
+              </button>
+            </div>
+            <motion.div
+              className="history-scroll-hidden min-h-0 flex-1 overflow-y-auto px-design-34 py-design-26"
+              initial={
+                prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 8 }
+              }
+              animate={
+                prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
+              }
+              transition={
+                prefersReducedMotion
+                  ? { duration: 0.12 }
+                  : { duration: 0.22, delay: 0.08, ease: OVERLAY_EASE }
+              }
+            >
+              <PeriodHistoryList
+                items={items}
+                isLoading={isLoading}
+                isError={isError}
+                labels={labels}
+                onRetry={onRetry}
+              />
+            </motion.div>
+          </motion.aside>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

src/features/game/modal/desktop/desktop-register-modal.tsx

@@ -23,6 +23,7 @@ function DesktopRegisterModal() {
       }
       titleAlign="center"
       className={'w-design-980 h-design-840'}
+      backdropClassName="backdrop-blur-none"
     >
       <DesktopRegisterForm onSuccess={handleSubmit} />
     </CenterModal>

src/i18n/index.ts

@@ -17,41 +17,6 @@ export function isSupportedLanguage(
   return SUPPORTED_LANGUAGES.includes(value as AppLanguage)
 }
 
-/** @description 从浏览器设置中推断最匹配的语言。 */
-function detectBrowserLanguage() {
-  if (typeof navigator === 'undefined') {
-    return DEFAULT_APP_LANGUAGE
-  }
-
-  const browserLanguages = [...navigator.languages, navigator.language]
-
-  for (const language of browserLanguages) {
-    if (isSupportedLanguage(language)) {
-      return language
-    }
-
-    const normalizedLanguage = language.toLowerCase()
-
-    if (normalizedLanguage.startsWith('zh')) {
-      return 'zh-CN'
-    }
-
-    if (normalizedLanguage.startsWith('en')) {
-      return 'en-US'
-    }
-
-    if (normalizedLanguage.startsWith('ms')) {
-      return 'ms-MY'
-    }
-
-    if (normalizedLanguage.startsWith('id')) {
-      return 'id-ID'
-    }
-  }
-
-  return DEFAULT_APP_LANGUAGE
-}
-
 /** @description 获取应用启动时应使用的初始语言。 */
 function getInitialLanguage() {
   const persistedLanguage = getStoredAppLanguage()
@@ -60,7 +25,7 @@ function getInitialLanguage() {
     return persistedLanguage
   }
 
-  return detectBrowserLanguage()
+  return DEFAULT_APP_LANGUAGE
 }
 
 /** @description 暴露当前应用应优先使用的语言。 */

src/lib/api/api-client.ts

@@ -2,9 +2,9 @@ import ky, { HTTPError, type Options, TimeoutError } from 'ky'
 import {
   ACCESS_TOKEN_REFRESH_SKEW_MS,
   API_ERROR_MESSAGES,
-  AUTH_INVALID_TOKEN_CODE,
   AUTH_REFRESH_ATTEMPTED_CONTEXT_KEY,
   AUTH_REFRESH_ENDPOINT,
+  AUTH_RELOGIN_REQUIRED_CODES,
   AUTH_SKIP_REFRESH_CONTEXT_KEY,
   AUTH_TOKEN_CACHE_SKEW_MS,
   AUTH_TOKEN_ENDPOINT,
@@ -210,7 +210,10 @@ function getApiEnvelopeMessage(response: ApiResponse<unknown>) {
 }
 
 function assertValidAuthEnvelope(data: unknown) {
-  if (!isApiEnvelope(data) || data.code !== AUTH_INVALID_TOKEN_CODE) {
+  if (
+    !isApiEnvelope(data) ||
+    !AUTH_RELOGIN_REQUIRED_CODES.includes(data.code)
+  ) {
     return
   }
 

src/lib/auth/auth-session.ts

@@ -20,6 +20,7 @@ const LOGIN_PROMPT_DEDUP_MS = 1200
 
 interface ClearAuthenticatedSessionOptions {
   clearBrowserStorage?: boolean
+  clearQueryCache?: boolean
 }
 
 interface UnauthorizedSessionOptions extends ClearAuthenticatedSessionOptions {
@@ -37,6 +38,26 @@ function clearBrowserStorageData() {
   }
 }
 
+function hasClearableSessionState() {
+  const snapshot = useAuthStore.getState()
+
+  return Boolean(
+    snapshot.status !== 'anonymous' ||
+      snapshot.accessToken ||
+      snapshot.refreshToken ||
+      snapshot.currentUser ||
+      snapshot.apiAuthToken ||
+      snapshot.apiAuthTokenExpiresAt ||
+      snapshot.apiAuthServerTime,
+  )
+}
+
+function hasRecordedUnauthorizedSession() {
+  const snapshot = useAuthStore.getState()
+
+  return snapshot.status === 'anonymous' && Boolean(snapshot.lastUnauthorizedAt)
+}
+
 export function registerCurrentUserInitializer(
   initializer: CurrentUserInitializer | null,
 ) {
@@ -57,11 +78,19 @@ export function isAuthenticated() {
 
 export function clearAuthenticatedSession({
   clearBrowserStorage = true,
+  clearQueryCache = true,
 }: ClearAuthenticatedSessionOptions = {}) {
-  useAuthStore.getState().markUnauthorized()
+  const alreadyUnauthorized = hasRecordedUnauthorizedSession()
-  queryClient.clear()
 
-  if (clearBrowserStorage) {
+  if (!alreadyUnauthorized) {
+    useAuthStore.getState().markUnauthorized()
+  }
+
+  if (clearQueryCache && !alreadyUnauthorized) {
+    queryClient.clear()
+  }
+
+  if (clearBrowserStorage && !alreadyUnauthorized) {
     clearBrowserStorageData()
   }
 }
@@ -71,12 +100,21 @@ export function handleUnauthorizedSession({
   openLoginModal = false,
   showLoginRequiredToast = false,
 }: UnauthorizedSessionOptions = {}) {
-  clearAuthenticatedSession({ clearBrowserStorage })
+  clearAuthenticatedSession({
+    clearBrowserStorage,
+    clearQueryCache: hasClearableSessionState(),
+  })
 
   if (!openLoginModal && !showLoginRequiredToast) {
     return
   }
 
+  const modalStore = openLoginModal ? useModalStore.getState() : null
+
+  if (modalStore?.modals.desktopLogin) {
+    return
+  }
+
   const now = Date.now()
   const shouldPrompt = now - lastLoginPromptAt > LOGIN_PROMPT_DEDUP_MS
 
@@ -91,10 +129,7 @@ export function handleUnauthorizedSession({
   }
 
   if (openLoginModal) {
-    const modalStore = useModalStore.getState()
+    modalStore?.openExclusiveModal('desktopLogin')
-
-    modalStore.closeAllModals()
-    modalStore.setModalOpen('desktopLogin', true)
   }
 }
 

src/lib/dom/body-scroll-lock.ts

@@ -0,0 +1,24 @@
+let lockCount = 0
+let previousBodyOverflow: string | null = null
+
+export function acquireBodyScrollLock() {
+  if (typeof document === 'undefined') {
+    return () => undefined
+  }
+
+  if (lockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+
+  lockCount += 1
+
+  return () => {
+    lockCount = Math.max(0, lockCount - 1)
+
+    if (lockCount === 0) {
+      document.body.style.overflow = previousBodyOverflow ?? ''
+      previousBodyOverflow = null
+    }
+  }
+}

src/locales/en-US/common.ts

@@ -284,6 +284,10 @@ export default {
       actions: {
         submitting: 'Submitting...',
       },
+      passwordVisibility: {
+        hide: 'Hide password',
+        show: 'Show password',
+      },
     },
     login: {
       actions: {
@@ -450,6 +454,14 @@ export default {
       loading: 'Loading...',
       settled: 'Settled',
     },
+    periodHistory: {
+      title: 'Draw Result History',
+      close: 'Close draw result history',
+      empty: 'No draw results yet',
+      failed: 'Failed to load draw results',
+      loading: 'Loading...',
+      retry: 'Retry',
+    },
     topup: {
       title: 'Top-up Config',
       platformCoinLabel: 'Platform Coin',

src/locales/id-ID/common.ts

@@ -284,6 +284,10 @@ export default {
       actions: {
         submitting: 'Mengirim...',
       },
+      passwordVisibility: {
+        hide: 'Sembunyikan kata sandi',
+        show: 'Tampilkan kata sandi',
+      },
     },
     login: {
       actions: {
@@ -450,6 +454,14 @@ export default {
       loading: 'Memuat...',
       settled: 'Selesai',
     },
+    periodHistory: {
+      title: 'Riwayat Hasil Undian',
+      close: 'Tutup riwayat hasil undian',
+      empty: 'Belum ada hasil undian',
+      failed: 'Gagal memuat hasil undian',
+      loading: 'Memuat...',
+      retry: 'Coba lagi',
+    },
     topup: {
       title: 'Konfigurasi Isi Ulang',
       platformCoinLabel: 'Koin Platform',

src/locales/ms-MY/common.ts

@@ -289,6 +289,10 @@ export default {
       actions: {
         submitting: 'Menghantar...',
       },
+      passwordVisibility: {
+        hide: 'Sembunyikan kata laluan',
+        show: 'Tunjukkan kata laluan',
+      },
     },
     login: {
       actions: {
@@ -455,6 +459,14 @@ export default {
       loading: 'Memuatkan...',
       settled: 'Selesai',
     },
+    periodHistory: {
+      title: 'Sejarah Keputusan Cabutan',
+      close: 'Tutup sejarah keputusan cabutan',
+      empty: 'Belum ada keputusan cabutan',
+      failed: 'Gagal memuatkan keputusan cabutan',
+      loading: 'Memuatkan...',
+      retry: 'Cuba lagi',
+    },
     topup: {
       title: 'Konfigurasi Tambah Nilai',
       platformCoinLabel: 'Syiling Platform',

src/locales/zh-CN/common.ts

@@ -272,6 +272,10 @@ export default {
       actions: {
         submitting: '提交中...',
       },
+      passwordVisibility: {
+        hide: '隐藏密码',
+        show: '显示密码',
+      },
     },
     login: {
       actions: {
@@ -436,6 +440,14 @@ export default {
       loading: '加载中...',
       settled: '已结算',
     },
+    periodHistory: {
+      title: '开奖结果历史',
+      close: '关闭开奖结果历史',
+      empty: '暂无开奖结果',
+      failed: '开奖结果加载失败',
+      loading: '加载中...',
+      retry: '重试',
+    },
     topup: {
       title: '充值配置',
       platformCoinLabel: '平台币',

src/store/auth/auth-store.ts

@@ -128,6 +128,7 @@ export const useAuthStore = create<AuthState>()(
           accessTokenExpiresAt: null,
           status: 'authenticated',
           isHydrated: true,
+          lastUnauthorizedAt: null,
         })
       },
       setCurrentUser: (currentUser) => {
@@ -149,6 +150,7 @@ export const useAuthStore = create<AuthState>()(
           refreshToken,
           status: 'authenticated',
           isHydrated: true,
+          lastUnauthorizedAt: null,
         })
       },
       updateTokens: ({ accessToken, accessTokenExpiresAt, refreshToken }) => {
@@ -159,6 +161,7 @@ export const useAuthStore = create<AuthState>()(
           refreshToken: refreshToken ?? state.refreshToken,
           status: 'authenticated',
           isHydrated: true,
+          lastUnauthorizedAt: null,
         }))
       },
       finishHydration: () => {
@@ -180,6 +183,7 @@ export const useAuthStore = create<AuthState>()(
           ...initialPersistedState,
           status: 'anonymous',
           isHydrated: true,
+          lastUnauthorizedAt: null,
         })
       },
       markUnauthorized: () => {

src/store/modal/modal-store.ts

@@ -12,6 +12,7 @@ export interface ModalStoreState {
   modals: ModalVisibilityMap
   withdrawTopupType: WithdrawTopupType
   closeAllModals: () => void
+  openExclusiveModal: (key: ModalKey) => void
   setModalOpen: (key: ModalKey, open: boolean) => void
   setWithdrawTopupType: (type: WithdrawTopupType) => void
 }
@@ -22,6 +23,14 @@ export const useModalStore = create<ModalStoreState>()((set) => ({
   closeAllModals: () => {
     set({ modals: INITIAL_MODAL_VISIBILITY })
   },
+  openExclusiveModal: (key) => {
+    set({
+      modals: {
+        ...INITIAL_MODAL_VISIBILITY,
+        [key]: true,
+      },
+    })
+  },
   setModalOpen: (key, open) => {
     set((state) => ({
       modals: {

src/style/index.css

@@ -194,6 +194,19 @@
 }
 
 @layer utilities {
+  .auth-password-input::-ms-clear,
+  .auth-password-input::-ms-reveal {
+    display: none;
+  }
+
+  .auth-password-input::-webkit-caps-lock-indicator,
+  .auth-password-input::-webkit-contacts-auto-fill-button,
+  .auth-password-input::-webkit-credentials-auto-fill-button {
+    display: none;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
   .common-neon-inset {
     border: 1px solid rgba(128, 223, 231, 0.65);
     border-radius: 5px;
@@ -512,20 +525,21 @@
     display: none;
   }
 
-  .desktop-title-vertical-marquee {
+  .desktop-title-horizontal-marquee {
     display: flex;
-    flex-direction: column;
+    width: max-content;
-    animation: desktop-title-marquee-y 7s linear infinite;
+    gap: calc(var(--design-unit) * 80);
+    animation: desktop-title-marquee-x 16s linear infinite;
     will-change: transform;
   }
 
-  @keyframes desktop-title-marquee-y {
+  @keyframes desktop-title-marquee-x {
     from {
-      transform: translateY(0);
+      transform: translateX(0);
     }
 
     to {
-      transform: translateY(-50%);
+      transform: translateX(-50%);
     }
   }