JiaJun/36-character-flower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 替换 AUTH_INVALID_TOKEN_CODE 为 AUTH_RELOGIN_REQUIRED_CODES 数组支持多种错误码
- 实现 hasClearableSessionState 和 hasRecordedUnauthorizedSession 函数优化会话清理逻辑
- 添加 clearQueryCache 选项控制查询缓存清理行为
- 修复马来西亚手机号正则验证模式导致的用户名验证问题
- 更新 API 错误消息处理优先级，优先使用服务端返回的消息
- 添加服务器消息检查函数 hasServerMessage 避免重复错误提示
- 在登录表单中实现密码可见性切换功能
- 添加密码可见性国际化文案支持
- 实现页面历史记录抽屉组件和相关动效
- 优化模态框背景遮罩样式和键盘事件处理
- 调整多个组件的 z-index 层级避免显示冲突
This commit is contained in:
JiaJun
2026-06-01 17:46:01 +08:00
parent 87e8aca97d
commit 72b6de499e
51 changed files with 3812 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/features/auth/api/auth-api.ts
View File

@@ -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,
})
}

40
src/features/auth/components/desktop-auth-form-parts.tsx
View File

@@ -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,
}: {

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

@@ -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]"

8
src/features/auth/components/desktop-login-form.tsx
View File

@@ -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)
setModalOpen('desktopRegister', true)
openExclusiveModal('desktopRegister')
}
return (
@@ -39,7 +38,6 @@ export function DesktopLoginForm({ onSuccess }: DesktopLoginFormProps) {
onSubmit={onSubmit}
onSwitchToRegister={handleSwitchToRegister}
onUsernameChange={usernameField.field.onChange}
submitError={submitError}
/>
)
}

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

@@ -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]"

8
src/features/auth/components/desktop-register-form.tsx
View File

@@ -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)
setModalOpen('desktopLogin', true)
openExclusiveModal('desktopLogin')
}
return (
@@ -53,7 +52,6 @@ export function DesktopRegisterForm({ onSuccess }: DesktopRegisterFormProps) {
onSubmit={onSubmit}
onSwitchToLogin={handleSwitchToLogin}
onUsernameChange={usernameField.field.onChange}
submitError={submitError}
/>
)
}

20
src/features/auth/hooks/auth-error-key.ts
View File

@@ -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'
}

3
src/features/auth/schema/auth-schema.ts
View File

@@ -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()

4
src/features/game/api/game-api.ts
View File

@@ -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,
})
}

47
src/features/game/api/period-history-api.ts Normal file
View File

@@ -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>,
)
}

8
src/features/game/components/desktop/desktop-animal-overlay.tsx
View File

@@ -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}

17
src/features/game/components/desktop/desktop-control.tsx
View File

@@ -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}

9
src/features/game/components/desktop/desktop-status.tsx
View File

@@ -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={
'pointer-events-none absolute z-0 bg-center bg-no-repeat'
}
className={'pointer-events-none absolute 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

34
src/features/game/components/desktop/desktop-title.tsx
View File

@@ -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}

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

@@ -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 ||

113
src/features/game/components/shared/period-history-list.tsx Normal file
View File

@@ -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>
)
}

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

@@ -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,
)}

10
src/features/game/entry/entry-page.tsx
View File

@@ -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,

4
src/features/game/entry/pc-entry.tsx
View File

@@ -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 />
</>
)
}

12
src/features/game/hooks/use-animal-vm.ts
View File

@@ -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,
}

9
src/features/game/hooks/use-app-language.ts
View File

@@ -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],
)

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

@@ -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],

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

@@ -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],

33
src/features/game/hooks/use-game-realtime-sync.ts
View File

@@ -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])
}

73
src/features/game/hooks/use-period-history-vm.ts Normal file
View File

@@ -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,
}
}

1
src/features/game/modal/desktop/desktop-login-modal.tsx
View File

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

181
src/features/game/modal/desktop/desktop-period-history-drawer.tsx Normal file
View File

@@ -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>
)
}

1
src/features/game/modal/desktop/desktop-register-modal.tsx
View File

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