mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 17:25:34 +08:00
refactor(i18n): add i18n context provider
This commit is contained in:
parent
e4a324625f
commit
81bab5d0ab
55
src/App.tsx
55
src/App.tsx
@ -5,6 +5,7 @@ import { Toaster } from 'solid-toast'
|
|||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { Header } from '~/components'
|
import { Header } from '~/components'
|
||||||
import { ROUTES } from '~/constants'
|
import { ROUTES } from '~/constants'
|
||||||
|
import { I18nProvider, locale } from '~/i18n'
|
||||||
import {
|
import {
|
||||||
WsMsg,
|
WsMsg,
|
||||||
autoSwitchTheme,
|
autoSwitchTheme,
|
||||||
@ -59,36 +60,38 @@ export const App = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<I18nProvider locale={locale()}>
|
||||||
class={twMerge(
|
<div
|
||||||
'relative flex h-screen flex-col subpixel-antialiased p-safe',
|
class={twMerge(
|
||||||
useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
|
'relative flex h-screen flex-col subpixel-antialiased p-safe',
|
||||||
)}
|
useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
|
||||||
data-theme={curTheme()}
|
)}
|
||||||
>
|
data-theme={curTheme()}
|
||||||
<Header />
|
>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<div class="flex-1 overflow-y-auto p-2 sm:p-4">
|
||||||
|
<Routes>
|
||||||
|
<Show when={endpoint()}>
|
||||||
|
<Route path={ROUTES.Overview} component={Overview} />
|
||||||
|
<Route path={ROUTES.Proxies} component={Proxies} />
|
||||||
|
<Route path={ROUTES.Rules} component={Rules} />
|
||||||
|
<Route path={ROUTES.Conns} component={Connections} />
|
||||||
|
<Route path={ROUTES.Log} component={Logs} />
|
||||||
|
<Route path={ROUTES.Config} component={Config} />
|
||||||
|
<Route path="*" element={<Navigate href={ROUTES.Overview} />} />
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
|
||||||
|
</Routes>
|
||||||
|
|
||||||
<div class="flex-1 overflow-y-auto p-2 sm:p-4">
|
|
||||||
<Routes>
|
|
||||||
<Show when={endpoint()}>
|
<Show when={endpoint()}>
|
||||||
<Route path={ROUTES.Overview} component={Overview} />
|
<ProtectedResources />
|
||||||
<Route path={ROUTES.Proxies} component={Proxies} />
|
|
||||||
<Route path={ROUTES.Rules} component={Rules} />
|
|
||||||
<Route path={ROUTES.Conns} component={Connections} />
|
|
||||||
<Route path={ROUTES.Log} component={Logs} />
|
|
||||||
<Route path={ROUTES.Config} component={Config} />
|
|
||||||
<Route path="*" element={<Navigate href={ROUTES.Overview} />} />
|
|
||||||
</Show>
|
</Show>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
|
<Toaster position="bottom-center" />
|
||||||
</Routes>
|
|
||||||
|
|
||||||
<Show when={endpoint()}>
|
|
||||||
<ProtectedResources />
|
|
||||||
</Show>
|
|
||||||
</div>
|
</div>
|
||||||
|
</I18nProvider>
|
||||||
<Toaster position="bottom-center" />
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -7,17 +7,14 @@ import 'dayjs/locale/zh-cn'
|
|||||||
import relativeTime from 'dayjs/plugin/relativeTime'
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
import { render } from 'solid-js/web'
|
import { render } from 'solid-js/web'
|
||||||
import { App } from '~/App'
|
import { App } from '~/App'
|
||||||
import { I18nProvider, locale } from '~/i18n'
|
|
||||||
|
|
||||||
dayjs.extend(relativeTime)
|
dayjs.extend(relativeTime)
|
||||||
|
|
||||||
render(
|
render(
|
||||||
() => (
|
() => (
|
||||||
<I18nProvider locale={locale()}>
|
<Router source={hashIntegration()}>
|
||||||
<Router source={hashIntegration()}>
|
<App />
|
||||||
<App />
|
</Router>
|
||||||
</Router>
|
|
||||||
</I18nProvider>
|
|
||||||
),
|
),
|
||||||
document.getElementById('root')!,
|
document.getElementById('root')!,
|
||||||
)
|
)
|
||||||
|
@ -15,7 +15,7 @@ import {
|
|||||||
getFilteredRowModel,
|
getFilteredRowModel,
|
||||||
getSortedRowModel,
|
getSortedRowModel,
|
||||||
} from '@tanstack/solid-table'
|
} from '@tanstack/solid-table'
|
||||||
import { For, Index, createEffect, createMemo, createSignal } from 'solid-js'
|
import { For, Index, createEffect, createSignal } from 'solid-js'
|
||||||
import { twMerge } from 'tailwind-merge'
|
import { twMerge } from 'tailwind-merge'
|
||||||
import { Button, LogsSettingsModal } from '~/components'
|
import { Button, LogsSettingsModal } from '~/components'
|
||||||
import { LOG_LEVEL, MODAL } from '~/constants'
|
import { LOG_LEVEL, MODAL } from '~/constants'
|
||||||
@ -65,7 +65,7 @@ export default () => {
|
|||||||
storage: localStorage,
|
storage: localStorage,
|
||||||
})
|
})
|
||||||
|
|
||||||
const columns = createMemo<ColumnDef<LogWithSeq>[]>(() => [
|
const columns: ColumnDef<LogWithSeq>[] = [
|
||||||
{
|
{
|
||||||
header: t('sequence'),
|
header: t('sequence'),
|
||||||
accessorFn: (row) => row.seq,
|
accessorFn: (row) => row.seq,
|
||||||
@ -100,7 +100,7 @@ export default () => {
|
|||||||
header: t('payload'),
|
header: t('payload'),
|
||||||
accessorFn: (row) => row.payload,
|
accessorFn: (row) => row.payload,
|
||||||
},
|
},
|
||||||
])
|
]
|
||||||
|
|
||||||
const table = createSolidTable({
|
const table = createSolidTable({
|
||||||
filterFns: {
|
filterFns: {
|
||||||
@ -118,7 +118,7 @@ export default () => {
|
|||||||
return logs()
|
return logs()
|
||||||
},
|
},
|
||||||
sortDescFirst: true,
|
sortDescFirst: true,
|
||||||
columns: columns(),
|
columns,
|
||||||
onGlobalFilterChange: setGlobalFilter,
|
onGlobalFilterChange: setGlobalFilter,
|
||||||
onSortingChange: setSorting,
|
onSortingChange: setSorting,
|
||||||
globalFilterFn: fuzzyFilter,
|
globalFilterFn: fuzzyFilter,
|
||||||
|
Loading…
Reference in New Issue
Block a user