a6b34660ad
- 在AppBootResourceGate组件中集成react-i18next实现资源加载文本的国际化 - 修改DesktopAnimal组件中的loading dots key以提高渲染性能 - 在DesktopControl组件中添加useRef和useEffect钩子管理定时器清理逻辑 - 将DesktopTitle组件重构为MessageBroadcast组件并增强其响应式设计 - 更新DesktopSupportModal组件中的客户服务文本为国际化格式 - 在AuthSession模块中实现本地存储数据清理时保留关键偏好设置 - 调整多个游戏组件的样式类以改进移动端适配效果 - 移除未使用的桌面提取功能相关代码文件 - 更新GitNexus索引统计数据反映最新的代码变更
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { MobileCenterModal } from '@/components/mobile-center-modal.tsx'
|
|
import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
|
|
import { useModalStore } from '@/store'
|
|
|
|
const SUPPORT_CHAT_URL =
|
|
'https://tawk.to/chat/6a1d23d9e29f411c2ce86772/1jq0t82lu'
|
|
const IFRAME_READY_DELAY_MS = 2_000
|
|
|
|
function MobileSupportModal() {
|
|
const { t } = useTranslation()
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const readyTimerRef = useRef<number | null>(null)
|
|
const open = useModalStore((state) => state.modals.desktopSupport)
|
|
const setModalOpen = useModalStore((state) => state.setModalOpen)
|
|
|
|
const clearReadyTimer = useCallback(() => {
|
|
if (readyTimerRef.current === null) {
|
|
return
|
|
}
|
|
|
|
window.clearTimeout(readyTimerRef.current)
|
|
readyTimerRef.current = null
|
|
}, [])
|
|
|
|
const handleClose = () => {
|
|
setModalOpen('desktopSupport', false)
|
|
}
|
|
|
|
const handleLoaded = () => {
|
|
clearReadyTimer()
|
|
readyTimerRef.current = window.setTimeout(() => {
|
|
setIsLoading(false)
|
|
readyTimerRef.current = null
|
|
}, IFRAME_READY_DELAY_MS)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
clearReadyTimer()
|
|
setIsLoading(true)
|
|
}
|
|
|
|
return clearReadyTimer
|
|
}, [clearReadyTimer, open])
|
|
|
|
return (
|
|
<MobileCenterModal
|
|
open={open}
|
|
isNormalBg={true}
|
|
onClose={handleClose}
|
|
titleAlign="left"
|
|
title={
|
|
<div className="modal-title-glow text-design-16">
|
|
{t('commonUi.support.title')}
|
|
</div>
|
|
}
|
|
className="h-design-500"
|
|
>
|
|
<div className="h-full min-h-0 px-design-8 pb-design-10 pt-design-4">
|
|
<div className="relative h-full min-h-0 overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[#2A6D73] bg-[linear-gradient(180deg,rgba(5,22,31,0.98),rgba(2,10,17,0.98))] shadow-[inset_0_0_calc(var(--design-unit)*14)_rgba(88,205,218,0.13),0_0_calc(var(--design-unit)*10)_rgba(31,156,174,0.14)]">
|
|
{isLoading ? (
|
|
<div className="absolute inset-0 z-10 flex items-center justify-center bg-[radial-gradient(circle_at_center,rgba(20,92,105,0.38),rgba(2,10,17,0.98)_58%)]">
|
|
<DataLoadingIndicator
|
|
label={t('commonUi.support.connecting')}
|
|
className="text-design-12"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<iframe
|
|
title="customer-service-chat"
|
|
src={SUPPORT_CHAT_URL}
|
|
onLoad={handleLoaded}
|
|
className="h-full w-full bg-[linear-gradient(180deg,#061923,#020A11)]"
|
|
allow="microphone; camera; clipboard-read; clipboard-write"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</MobileCenterModal>
|
|
)
|
|
}
|
|
|
|
export default MobileSupportModal
|