mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat(i18n): add more i18n resources
This commit is contained in:
parent
508e19a247
commit
b3172da302
@ -72,32 +72,32 @@ export const Header = () => {
|
||||
const navs = () => [
|
||||
{
|
||||
href: '/overview',
|
||||
name: t('navs.overview'),
|
||||
name: t('overview'),
|
||||
icon: <IconHome />,
|
||||
},
|
||||
{
|
||||
href: '/proxies',
|
||||
name: t('navs.proxies'),
|
||||
name: t('proxies'),
|
||||
icon: <IconGlobe />,
|
||||
},
|
||||
{
|
||||
href: '/rules',
|
||||
name: t('navs.rules'),
|
||||
name: t('rules'),
|
||||
icon: <IconRuler />,
|
||||
},
|
||||
{
|
||||
href: '/conns',
|
||||
name: t('navs.connections'),
|
||||
name: t('connections'),
|
||||
icon: <IconNetwork />,
|
||||
},
|
||||
{
|
||||
href: '/logs',
|
||||
name: t('navs.logs'),
|
||||
name: t('logs'),
|
||||
icon: <IconFileStack />,
|
||||
},
|
||||
{
|
||||
href: '/config',
|
||||
name: t('navs.config'),
|
||||
name: t('config'),
|
||||
icon: <IconSettings />,
|
||||
},
|
||||
]
|
||||
|
@ -4,48 +4,70 @@ import { ParentComponent, createEffect, createSignal } from 'solid-js'
|
||||
|
||||
const dict = {
|
||||
'en-US': {
|
||||
navs: {
|
||||
overview: 'Overview',
|
||||
proxies: 'Proxies',
|
||||
rules: 'Rules',
|
||||
connections: 'Connections',
|
||||
logs: 'Logs',
|
||||
config: 'Config',
|
||||
},
|
||||
stats: {
|
||||
upload: 'Upload',
|
||||
download: 'Download',
|
||||
uploadTotal: 'Upload Total',
|
||||
downloadTotal: 'Download Total',
|
||||
activeConnections: 'Active Connections',
|
||||
memoryUsage: 'Memory Usage',
|
||||
},
|
||||
proxies: {
|
||||
proxies: 'Proxies',
|
||||
proxyProvider: 'Proxy Provider',
|
||||
},
|
||||
overview: 'Overview',
|
||||
proxies: 'Proxies',
|
||||
rules: 'Rules',
|
||||
connections: 'Connections',
|
||||
logs: 'Logs',
|
||||
config: 'Config',
|
||||
upload: 'Upload',
|
||||
download: 'Download',
|
||||
uploadTotal: 'Upload Total',
|
||||
downloadTotal: 'Download Total',
|
||||
activeConnections: 'Active Connections',
|
||||
memoryUsage: 'Memory Usage',
|
||||
traffic: 'Traffic',
|
||||
memory: 'Memory',
|
||||
down: 'Down',
|
||||
up: 'Up',
|
||||
proxyProviders: 'Proxy Providers',
|
||||
ruleProviders: 'Rule Providers',
|
||||
search: 'Search',
|
||||
type: 'Type',
|
||||
name: 'Name',
|
||||
process: 'Process',
|
||||
host: 'Host',
|
||||
chains: 'Chains',
|
||||
dlSpeed: 'DL Speed',
|
||||
ulSpeed: 'UL Speed',
|
||||
dl: 'DL',
|
||||
ul: 'UL',
|
||||
source: 'Source',
|
||||
destination: 'Destination',
|
||||
close: 'Close',
|
||||
},
|
||||
'zh-Hans': {
|
||||
navs: {
|
||||
overview: '概览',
|
||||
proxies: '代理',
|
||||
rules: '规则',
|
||||
connections: '连接',
|
||||
logs: '日志',
|
||||
config: '配置',
|
||||
},
|
||||
stats: {
|
||||
upload: '上传',
|
||||
download: '下载',
|
||||
uploadTotal: '上传总量',
|
||||
downloadTotal: '下载总量',
|
||||
activeConnections: '活动连接',
|
||||
memoryUsage: '内存使用情况',
|
||||
},
|
||||
proxies: {
|
||||
proxies: '代理节点组',
|
||||
proxyProvider: '代理提供商',
|
||||
},
|
||||
overview: '概览',
|
||||
proxies: '代理',
|
||||
rules: '规则',
|
||||
connections: '连接',
|
||||
logs: '日志',
|
||||
config: '配置',
|
||||
upload: '上传',
|
||||
download: '下载',
|
||||
uploadTotal: '上传总量',
|
||||
downloadTotal: '下载总量',
|
||||
activeConnections: '活动连接',
|
||||
memoryUsage: '内存使用情况',
|
||||
traffic: '流量',
|
||||
memory: '内存',
|
||||
down: '下载',
|
||||
up: '上传',
|
||||
proxyProviders: '代理提供者',
|
||||
ruleProviders: '规则提供者',
|
||||
search: '搜索',
|
||||
type: '类型',
|
||||
name: '名字',
|
||||
process: '进程',
|
||||
host: '主机',
|
||||
chains: '链路',
|
||||
dlSpeed: '下载速度',
|
||||
ulSpeed: '上传速度',
|
||||
dl: '下载量',
|
||||
ul: '上传量',
|
||||
source: '源地址',
|
||||
destination: '目标地址',
|
||||
close: '关闭',
|
||||
},
|
||||
}
|
||||
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||
import { useI18n } from '@solid-primitives/i18n'
|
||||
import { makePersisted } from '@solid-primitives/storage'
|
||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||
import {
|
||||
@ -39,6 +40,7 @@ const initColumnVisibility = {
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [t] = useI18n()
|
||||
const [columnVisibility, setColumnVisibility] = makePersisted(
|
||||
createSignal<ColumnVisibility>(initColumnVisibility),
|
||||
{
|
||||
@ -239,12 +241,14 @@ export default () => {
|
||||
<div class="flex w-full">
|
||||
<input
|
||||
class="input input-primary mr-4 w-40 flex-1"
|
||||
placeholder="Search"
|
||||
placeholder={t('search')}
|
||||
onInput={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
|
||||
<label for="connection-modal" class="btn btn-circle">
|
||||
<IconSettings />
|
||||
</label>
|
||||
|
||||
<ConnectionsModal
|
||||
order={columnOrder()}
|
||||
visible={columnVisibility()}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { createEventSignal } from '@solid-primitives/event-listener'
|
||||
import { useI18n } from '@solid-primitives/i18n'
|
||||
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||||
import {
|
||||
ColumnDef,
|
||||
@ -13,6 +14,7 @@ import { Log } from '~/types'
|
||||
type LogWithSeq = Log & { seq: number }
|
||||
|
||||
export default () => {
|
||||
const [t] = useI18n()
|
||||
let seq = 0
|
||||
const [search, setSearch] = createSignal('')
|
||||
const [logs, setLogs] = createSignal<LogWithSeq[]>([])
|
||||
@ -68,7 +70,7 @@ export default () => {
|
||||
<div class="flex flex-col gap-4">
|
||||
<input
|
||||
class="input input-primary"
|
||||
placeholder="Search"
|
||||
placeholder={t('search')}
|
||||
onInput={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
|
||||
|
@ -18,37 +18,6 @@ import type { Connection } from '~/types'
|
||||
|
||||
const CHART_MAX_XAXIS = 10
|
||||
|
||||
const defaultChartOptions: ApexOptions = {
|
||||
chart: {
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
animations: { easing: 'linear' },
|
||||
},
|
||||
noData: { text: 'Loading...' },
|
||||
legend: {
|
||||
fontSize: '14px',
|
||||
labels: { colors: 'gray' },
|
||||
itemMargin: { horizontal: 64 },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
grid: { yaxis: { lines: { show: false } } },
|
||||
stroke: { curve: 'smooth' },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: {
|
||||
range: CHART_MAX_XAXIS,
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: 'gray' },
|
||||
formatter(val) {
|
||||
return byteSize(val).toString()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
|
||||
<div class="stat flex-1">
|
||||
<div class="stat-title text-secondary-content">{props.label}</div>
|
||||
@ -60,6 +29,7 @@ const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
|
||||
|
||||
export default () => {
|
||||
const [t] = useI18n()
|
||||
|
||||
const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
|
||||
[],
|
||||
)
|
||||
@ -99,18 +69,53 @@ export default () => {
|
||||
}
|
||||
})
|
||||
|
||||
const defaultChartOptions: ApexOptions = {
|
||||
chart: {
|
||||
toolbar: { show: false },
|
||||
zoom: { enabled: false },
|
||||
animations: { easing: 'linear' },
|
||||
},
|
||||
noData: { text: 'Loading...' },
|
||||
legend: {
|
||||
fontSize: '14px',
|
||||
labels: { colors: 'gray' },
|
||||
itemMargin: { horizontal: 64 },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
grid: { yaxis: { lines: { show: false } } },
|
||||
stroke: { curve: 'smooth' },
|
||||
tooltip: { enabled: false },
|
||||
xaxis: {
|
||||
range: CHART_MAX_XAXIS,
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: 'gray' },
|
||||
formatter(val) {
|
||||
return byteSize(val).toString()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const trafficChartOptions = createMemo<ApexOptions>(() => ({
|
||||
title: { text: 'Traffic', align: 'center', style: { color: 'gray' } },
|
||||
title: {
|
||||
text: t('traffic'),
|
||||
align: 'center',
|
||||
style: { color: 'gray' },
|
||||
},
|
||||
...defaultChartOptions,
|
||||
}))
|
||||
|
||||
const trafficChartSeries = createMemo(() => [
|
||||
{
|
||||
name: 'Down',
|
||||
name: t('down'),
|
||||
data: traffics().map((t) => t.down),
|
||||
},
|
||||
{
|
||||
name: 'Up',
|
||||
name: t('up'),
|
||||
data: traffics().map((t) => t.up),
|
||||
},
|
||||
])
|
||||
@ -138,16 +143,15 @@ export default () => {
|
||||
})
|
||||
|
||||
const memoryChartOptions = createMemo<ApexOptions>(() => ({
|
||||
title: { text: 'Memory', align: 'center', style: { color: 'gray' } },
|
||||
title: {
|
||||
text: t('memory'),
|
||||
align: 'center',
|
||||
style: { color: 'gray' },
|
||||
},
|
||||
...defaultChartOptions,
|
||||
}))
|
||||
|
||||
const memoryChartSeries = createMemo(() => [
|
||||
{
|
||||
name: 'memory',
|
||||
data: memories(),
|
||||
},
|
||||
])
|
||||
const memoryChartSeries = createMemo(() => [{ data: memories() }])
|
||||
|
||||
const connectionsWS = createReconnectingWS(
|
||||
`${wsEndpointURL()}/connections?token=${secret()}`,
|
||||
@ -172,27 +176,27 @@ export default () => {
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="stats stats-vertical w-full bg-primary shadow lg:stats-horizontal lg:flex">
|
||||
<TrafficWidget label={t('stats.upload')}>
|
||||
<TrafficWidget label={t('upload')}>
|
||||
{byteSize(traffic()?.up || 0).toString()}/s
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('stats.download')}>
|
||||
<TrafficWidget label={t('download')}>
|
||||
{byteSize(traffic()?.down || 0).toString()}/s
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('stats.uploadTotal')}>
|
||||
<TrafficWidget label={t('uploadTotal')}>
|
||||
{byteSize(connection()?.uploadTotal || 0).toString()}
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('stats.downloadTotal')}>
|
||||
<TrafficWidget label={t('downloadTotal')}>
|
||||
{byteSize(connection()?.downloadTotal || 0).toString()}
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('stats.activeConnections')}>
|
||||
<TrafficWidget label={t('activeConnections')}>
|
||||
{connection()?.connections.length || 0}
|
||||
</TrafficWidget>
|
||||
|
||||
<TrafficWidget label={t('stats.memoryUsage')}>
|
||||
<TrafficWidget label={t('memoryUsage')}>
|
||||
{byteSize(memory() || 0).toString()}
|
||||
</TrafficWidget>
|
||||
</div>
|
||||
|
@ -62,9 +62,9 @@ export default () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('proxies.proxies')}</h1>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('proxies')}</h1>
|
||||
|
||||
<ForTwoLine
|
||||
subChild={proxies().map((proxy) => {
|
||||
@ -119,68 +119,75 @@ export default () => {
|
||||
</div>
|
||||
|
||||
<Show when={proxyProviders().length > 0}>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('proxies.proxyProvider')}</h1>
|
||||
<div>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('proxyProviders')}</h1>
|
||||
|
||||
<ForTwoLine
|
||||
subChild={proxyProviders().map((proxyProvider) => {
|
||||
const title = (
|
||||
<>
|
||||
<div class="mr-10 flex items-center justify-between">
|
||||
<span>{proxyProvider.name}</span>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-circle btn-sm mr-2"
|
||||
onClick={(e) =>
|
||||
onUpdateProviderClick(e, proxyProvider.name)
|
||||
}
|
||||
>
|
||||
<IconReload />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
<ForTwoLine
|
||||
subChild={proxyProviders().map((proxyProvider) => {
|
||||
const title = (
|
||||
<>
|
||||
<div class="mr-10 flex items-center justify-between">
|
||||
<span>{proxyProvider.name}</span>
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-circle btn-sm mr-2"
|
||||
onClick={(e) =>
|
||||
onUpdateProviderClick(e, proxyProvider.name)
|
||||
}
|
||||
>
|
||||
<IconReload />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-circle btn-sm"
|
||||
onClick={(e) =>
|
||||
onHealthCheckClick(e, proxyProvider.name)
|
||||
}
|
||||
>
|
||||
<IconBrandSpeedtest />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: Updated{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
</div>
|
||||
<Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
|
||||
<ProxyNodeDots
|
||||
proxyNameList={
|
||||
proxyProvider.proxies.map((i) => i.name) ?? []
|
||||
}
|
||||
<SubscriptionInfo
|
||||
subscriptionInfo={proxyProvider.subscriptionInfo}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
const content = (
|
||||
<ProxyCardGroups
|
||||
proxies={proxyProvider.proxies.map((i) => i.name)}
|
||||
/>
|
||||
)
|
||||
<div class="text-sm text-slate-500">
|
||||
{proxyProvider.vehicleType} :: Updated{' '}
|
||||
{formatTimeFromNow(proxyProvider.updatedAt)}
|
||||
</div>
|
||||
<Show
|
||||
when={!collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||
>
|
||||
<ProxyNodeDots
|
||||
proxyNameList={
|
||||
proxyProvider.proxies.map((i) => i.name) ?? []
|
||||
}
|
||||
/>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||
title={title}
|
||||
content={content}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMap({
|
||||
...collapsedMap(),
|
||||
[`provider-${proxyProvider.name}`]: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
/>
|
||||
const content = (
|
||||
<ProxyCardGroups
|
||||
proxies={proxyProvider.proxies.map((i) => i.name)}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
|
||||
title={title}
|
||||
content={content}
|
||||
onCollapse={(val) =>
|
||||
setCollapsedMap({
|
||||
...collapsedMap(),
|
||||
[`provider-${proxyProvider.name}`]: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
|
@ -1,9 +1,11 @@
|
||||
import { useI18n } from '@solid-primitives/i18n'
|
||||
import InfiniteScroll from 'solid-infinite-scroll'
|
||||
import { For, createMemo, createSignal, onMount } from 'solid-js'
|
||||
import { useRequest } from '~/signals'
|
||||
import type { Rule, RuleProvider } from '~/types'
|
||||
|
||||
export default () => {
|
||||
const [t] = useI18n()
|
||||
const request = useRequest()
|
||||
const [maxRuleRender, setMaxRuleRender] = createSignal(100)
|
||||
const [rules, setRules] = createSignal<Rule[]>([])
|
||||
@ -27,7 +29,7 @@ export default () => {
|
||||
return (
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<h1 class="pb-4 text-lg font-semibold">Rules</h1>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('rules')}</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
||||
<InfiniteScroll
|
||||
@ -48,7 +50,7 @@ export default () => {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="pb-4 text-lg font-semibold">Rules Providers</h1>
|
||||
<h1 class="pb-4 text-lg font-semibold">{t('ruleProviders')}</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
|
||||
<For each={rulesProviders()}>
|
||||
|
Loading…
Reference in New Issue
Block a user