5dd4e31db4
- 实现了完整的登录注册认证流程，包括密码验证和用户资料获取 - 集成了JWT令牌管理和自动刷新机制，支持设备ID生成和管理 - 添加了WebSocket连接配置和API基础URL环境变量设置 - 实现了API客户端的请求拦截器，包括令牌验证和错误处理逻辑 - 集成了MD5加密和认证令牌缓存机制，提升安全性 - 添加了多语言国际化支持，包括英语、中文、马来语和印尼语 - 实现了认证状态管理和本地存储持久化功能 - 添加了表单验证schema和错误处理机制，增强用户体验
80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import lengthBlueBtn from '@/assets/system/length-blue-btn.webp'
|
|
import lengthGreenBtn from '@/assets/system/length-green-btn.webp'
|
|
import noticeBg from '@/assets/system/notice-bg.webp'
|
|
import { CenterModal } from '@/components/center-modal.tsx'
|
|
import { SmartBackground } from '@/components/smart-background.tsx'
|
|
import { SmartImage } from '@/components/smart-image.tsx'
|
|
import { useModalStore } from '@/store'
|
|
|
|
function DesktopNoticeModal() {
|
|
const { t } = useTranslation()
|
|
const open = useModalStore((state) => state.modals.desktopNotice)
|
|
const setModalOpen = useModalStore((state) => state.setModalOpen)
|
|
|
|
function handleSubmit() {
|
|
setModalOpen('desktopNotice', false)
|
|
}
|
|
|
|
return (
|
|
<CenterModal
|
|
open={open}
|
|
onClose={handleSubmit}
|
|
title={
|
|
<div className={'modal-title-glow text-design-26'}>
|
|
{t('game.modals.notice.title')}
|
|
</div>
|
|
}
|
|
isNormalBg={true}
|
|
titleAlign="left"
|
|
className={'w-design-1000 h-design-690'}
|
|
>
|
|
<div className={'flex flex-col h-full w-full p-design-10 gap-design-30'}>
|
|
<div
|
|
className={
|
|
'w-full h-design-440 overflow-y-auto flex flex-col gap-design-20 bg-[#000000]/50 p-design-10 rounded-md'
|
|
}
|
|
>
|
|
<SmartImage
|
|
className={'w-full h-design-300 shrink-0 rounded-md'}
|
|
imgClassName={'object-contain object-center'}
|
|
alt={'notice'}
|
|
src={noticeBg}
|
|
/>
|
|
|
|
<div className={'text-[#74B3BA] text-design-18 leading-[1.6]'}>
|
|
{t('game.modals.notice.content')}
|
|
</div>
|
|
</div>
|
|
<div className={'w-full flex justify-around'}>
|
|
<SmartBackground
|
|
src={lengthGreenBtn}
|
|
size="106% 108%"
|
|
repeat="no-repeat"
|
|
position="center"
|
|
className={
|
|
'w-design-270 h-design-72 pb-design-5 flex items-center justify-center text-design-20 font-bold'
|
|
}
|
|
>
|
|
{t('game.modals.notice.check')}
|
|
</SmartBackground>
|
|
|
|
<SmartBackground
|
|
src={lengthBlueBtn}
|
|
size="100% 90%"
|
|
repeat="no-repeat"
|
|
position="center"
|
|
className={
|
|
'w-design-270 h-design-72 pb-design-5 flex items-center justify-center text-design-20 font-bold'
|
|
}
|
|
>
|
|
{t('game.modals.notice.check')}
|
|
</SmartBackground>
|
|
</div>
|
|
</div>
|
|
</CenterModal>
|
|
)
|
|
}
|
|
|
|
export default DesktopNoticeModal
|