95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
|
import React, {useEffect, useMemo} from 'react'
|
||
|
|
import '@douyinfe/semi-ui/react19-adapter'
|
||
|
|
import {LocaleProvider, Notification, Toast} from '@douyinfe/semi-ui'
|
||
|
|
import {HashRouter} from 'react-router-dom'
|
||
|
|
import {IntlProvider} from 'react-intl'
|
||
|
|
import {localeConfig} from '@/locales'
|
||
|
|
import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN'
|
||
|
|
import enUS from '@douyinfe/semi-ui/lib/es/locale/source/en_US'
|
||
|
|
import {Locale} from '@douyinfe/semi-ui/lib/es/locale/interface'
|
||
|
|
import useGlobalStore from '@/stores'
|
||
|
|
import useLocalStore from '@/stores/local'
|
||
|
|
import RenderRouter from '@/router'
|
||
|
|
import {NoticeReactProps} from '@douyinfe/semi-ui/lib/es/notification'
|
||
|
|
import {ToastReactProps} from '@douyinfe/semi-ui/lib/es/toast'
|
||
|
|
import sse from '@/sse'
|
||
|
|
|
||
|
|
const App = () => {
|
||
|
|
const { isDark, locale } = useLocalStore(state => state)
|
||
|
|
const { setConnected } = useGlobalStore(state => state)
|
||
|
|
|
||
|
|
const onNotify = (e: MessageEvent) => {
|
||
|
|
const opts = {
|
||
|
|
...JSON.parse(e.data)
|
||
|
|
} as NoticeReactProps
|
||
|
|
if (opts.duration === -1) {
|
||
|
|
opts.duration = 0
|
||
|
|
}
|
||
|
|
Notification.addNotice(opts)
|
||
|
|
}
|
||
|
|
const onToast = (e: MessageEvent) => {
|
||
|
|
const opts = {
|
||
|
|
...JSON.parse(e.data)
|
||
|
|
} as ToastReactProps
|
||
|
|
Toast.create(opts)
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (sse.readyState === EventSource.OPEN) {
|
||
|
|
setConnected(true)
|
||
|
|
}
|
||
|
|
sse.onopen = () => {
|
||
|
|
console.log('sse connected')
|
||
|
|
setConnected(true)
|
||
|
|
}
|
||
|
|
sse.onmessage = e => {
|
||
|
|
console.log('message: ', e)
|
||
|
|
}
|
||
|
|
sse.onerror = e => {
|
||
|
|
console.log('sse error', e)
|
||
|
|
setConnected(false)
|
||
|
|
// sse.close()
|
||
|
|
}
|
||
|
|
sse.addEventListener('notify', onNotify)
|
||
|
|
sse.addEventListener('toast', onToast)
|
||
|
|
return () => {
|
||
|
|
console.log('sse close')
|
||
|
|
sse.onopen = null
|
||
|
|
sse.onmessage = null
|
||
|
|
sse.onerror = null
|
||
|
|
sse.removeEventListener('notify', onNotify)
|
||
|
|
sse.removeEventListener('toast', onToast)
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const getLocale = useMemo(() => {
|
||
|
|
switch (locale) {
|
||
|
|
case 'en-US':
|
||
|
|
return enUS
|
||
|
|
case 'zh-CN':
|
||
|
|
return zhCN
|
||
|
|
default:
|
||
|
|
return {} as Locale
|
||
|
|
}
|
||
|
|
}, [locale])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isDark) {
|
||
|
|
document.body.setAttribute('theme-mode', 'dark')
|
||
|
|
} else {
|
||
|
|
document.body.removeAttribute('theme-mode')
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<LocaleProvider locale={getLocale}>
|
||
|
|
<IntlProvider locale={locale} messages={localeConfig[locale]}>
|
||
|
|
<HashRouter>
|
||
|
|
<RenderRouter />
|
||
|
|
</HashRouter>
|
||
|
|
</IntlProvider>
|
||
|
|
</LocaleProvider>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export default App
|