Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-24 09:45:35 +08:00
Code Issues Projects Releases Wiki Activity

refactor(i18n): add i18n context provider

Browse Source
This commit is contained in:
kunish 2023-09-23 01:46:42 +08:00
parent e4a324625f
commit 81bab5d0ab
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
3 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/App.tsx
View File

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

9
src/main.tsx
View File

@ -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')!,
) )

8
src/pages/Logs.tsx
View File

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