feat: i18n for conn table

This commit is contained in:
Zephyruso 2023-09-02 13:50:24 +08:00
parent 9d3706f390
commit 33fa191cfe
11 changed files with 138 additions and 110 deletions

View File

@ -27,7 +27,7 @@ const Collapse: ParentComponent<Props> = (props) => {
<div <div
class={twMerge( class={twMerge(
getCollapseClassName(), getCollapseClassName(),
'collapse collapse-arrow mb-2 overflow-visible border-secondary bg-base-200', 'collapse collapse-arrow mb-2 select-none overflow-visible border-secondary bg-base-200',
)} )}
> >
<div <div

View File

@ -13,7 +13,7 @@ import {
createSortable, createSortable,
useDragDropContext, useDragDropContext,
} from '@thisbeyond/solid-dnd' } from '@thisbeyond/solid-dnd'
import { For, createSignal } from 'solid-js' import { For, Show, createSignal } from 'solid-js'
import { AccessorKey } from '~/config/enum' import { AccessorKey } from '~/config/enum'
type ColumnVisibility = Partial<Record<AccessorKey, boolean>> type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
@ -65,7 +65,7 @@ export default (props: {
}} }}
> >
<div class="m-1 flex cursor-grab justify-between p-1"> <div class="m-1 flex cursor-grab justify-between p-1">
<span class="select-none">{key}</span> <span class="select-none">{t(key)}</span>
<input <input
type="checkbox" type="checkbox"
class="toggle" class="toggle"
@ -99,7 +99,9 @@ export default (props: {
</SortableProvider> </SortableProvider>
</div> </div>
<DragOverlay> <DragOverlay>
<div class="sortable">{activeKey()}</div> <Show when={activeKey()}>
<div class="sortable">{t(activeKey()!)}</div>
</Show>
</DragOverlay> </DragOverlay>
</DragDropProvider> </DragDropProvider>

View File

@ -14,6 +14,7 @@ import {
} from '@tabler/icons-solidjs' } from '@tabler/icons-solidjs'
import { For, ParentComponent, Show, createSignal } from 'solid-js' import { For, ParentComponent, Show, createSignal } from 'solid-js'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import { LANG } from '~/config/enum'
import { themes } from '~/constants' import { themes } from '~/constants'
import { setCurTheme, setSelectedEndpoint } from '~/signals' import { setCurTheme, setSelectedEndpoint } from '~/signals'
@ -171,7 +172,7 @@ export const Header = () => {
onClick={() => { onClick={() => {
const curLocale = locale() const curLocale = locale()
locale(curLocale === 'en-US' ? 'zh-Hans' : 'en-US') locale(curLocale === LANG.EN ? LANG.ZH : LANG.EN)
}} }}
> >
<IconLanguage /> <IconLanguage />

View File

@ -1,17 +1,17 @@
export enum AccessorKey { export enum AccessorKey {
Close = 'Close', Close = 'close',
ID = 'ID', ID = 'ID',
Type = 'Type', Type = 'type',
Process = 'Process', Process = 'process',
Host = 'Host', Host = 'host',
Rule = 'Rule', Rule = 'rules',
Chains = 'Chains', Chains = 'chains',
DlSpeed = 'DL Speed', DlSpeed = 'dlSpeed',
ULSpeed = 'UL Speed', ULSpeed = 'ulSpeed',
Download = 'DL', Download = 'dl',
Upload = 'UL', Upload = 'ul',
Source = 'Source', Source = 'source',
Destination = 'Destination', Destination = 'destination',
} }
export enum DELAY { export enum DELAY {
@ -24,3 +24,8 @@ export enum PROXIES_PREVIEW_TYPE {
DOTS = 'dots', DOTS = 'dots',
BAR = 'bar', BAR = 'bar',
} }
export enum LANG {
EN = 'en-US',
ZH = 'zh-CN',
}

8
src/i18n/dict.ts Normal file
View File

@ -0,0 +1,8 @@
import { LANG } from '~/config/enum'
import en from './en'
import zh from './zh'
export default {
[LANG.EN]: en,
[LANG.ZH]: zh,
}

36
src/i18n/en.ts Normal file
View File

@ -0,0 +1,36 @@
export default {
add: 'Add',
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',
ID: 'ID',
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',
reset: 'Reset',
}

View File

@ -1,84 +1,13 @@
import { I18nContext, createI18nContext, useI18n } from '@solid-primitives/i18n' import { I18nContext, createI18nContext, useI18n } from '@solid-primitives/i18n'
import { makePersisted } from '@solid-primitives/storage' import { makePersisted } from '@solid-primitives/storage'
import { ParentComponent, createEffect, createSignal } from 'solid-js' import { ParentComponent, createEffect, createSignal } from 'solid-js'
import { LANG } from '~/config/enum'
const dict = { import dict from './dict'
'en-US': {
add: 'Add',
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',
reset: 'Reset',
},
'zh-Hans': {
add: '添加',
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: '关闭',
reset: '重置',
},
}
const useLanguage = () => { const useLanguage = () => {
const [lang, setLang] = makePersisted( const [lang, setLang] = makePersisted(
createSignal( createSignal(
Reflect.has(dict, navigator.language) ? navigator.language : 'en-US', Reflect.has(dict, navigator.language) ? navigator.language : LANG.EN,
), ),
{ {
name: 'lang', name: 'lang',

36
src/i18n/zh.ts Normal file
View File

@ -0,0 +1,36 @@
export default {
add: '添加',
overview: '概览',
proxies: '代理',
rules: '规则',
connections: '连接',
logs: '日志',
config: '配置',
upload: '上传',
download: '下载',
uploadTotal: '上传总量',
downloadTotal: '下载总量',
activeConnections: '活动连接',
memoryUsage: '内存使用情况',
traffic: '流量',
memory: '内存',
down: '下载',
up: '上传',
proxyProviders: '代理提供者',
ruleProviders: '规则提供者',
search: '搜索',
ID: 'ID',
type: '类型',
name: '名字',
process: '进程',
host: '主机',
chains: '链路',
dlSpeed: '下载速度',
ulSpeed: '上传速度',
dl: '下载量',
ul: '上传量',
source: '源地址',
destination: '目标地址',
close: '关闭',
reset: '重置',
}

View File

@ -278,11 +278,13 @@ export default () => {
)} )}
onClick={header.column.getToggleSortingHandler()} onClick={header.column.getToggleSortingHandler()}
> >
{header.isPlaceholder {header.column.id === AccessorKey.Close ? (
? null flexRender(
: flexRender(
header.column.columnDef.header, header.column.columnDef.header,
header.getContext(), header.getContext(),
)
) : (
<span>{t(header.column.id)}</span>
)} )}
{{ {{
asc: <IconSortAscending />, asc: <IconSortAscending />,

View File

@ -201,13 +201,15 @@ export default () => {
</TrafficWidget> </TrafficWidget>
</div> </div>
<div class="mx-auto grid h-full w-full max-w-screen-xl grid-cols-1 gap-4"> <div class="flex flex-col sm:flex-row">
<div class="m-4 flex-1">
<SolidApexCharts <SolidApexCharts
type="area" type="area"
options={trafficChartOptions()} options={trafficChartOptions()}
series={trafficChartSeries()} series={trafficChartSeries()}
/> />
</div>
<div class="m-4 flex-1">
<SolidApexCharts <SolidApexCharts
type="line" type="line"
options={memoryChartOptions()} options={memoryChartOptions()}
@ -215,5 +217,6 @@ export default () => {
/> />
</div> </div>
</div> </div>
</div>
) )
} }

View File

@ -64,12 +64,18 @@ export function useProxies() {
} }
const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => { const setProxyGroupByProxyName = async (proxy: Proxy, proxyName: string) => {
const proxyGroupList = proxies().slice()
const proxyGroup = proxyGroupList.find((i) => i.name === proxy.name)!
await request.put(`proxies/${proxy.name}`, { await request.put(`proxies/${proxy.name}`, {
body: JSON.stringify({ body: JSON.stringify({
name: proxyName, name: proxyName,
}), }),
}) })
await updateProxy()
proxyGroup.now = proxyName
setProxies(proxyGroupList)
updateProxy()
} }
const delayTestByProxyGroupName = async (proxyGroupName: string) => { const delayTestByProxyGroupName = async (proxyGroupName: string) => {