feat(config): i18n support for port numbers

This commit is contained in:
kunish 2023-09-23 02:13:17 +08:00
parent 21d479a1df
commit 07d3e7fdce
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
4 changed files with 12 additions and 8 deletions

View File

@ -103,4 +103,5 @@ export default {
interfaceName: 'Interface Name', interfaceName: 'Interface Name',
en: 'English', en: 'English',
zh: 'Chinese', zh: 'Chinese',
port: '{{ name }} Port',
} }

View File

@ -20,6 +20,8 @@ export const [locale, setLocale] = makePersisted(
export const [I18nProvider, useMaybeI18n] = createContextProvider< export const [I18nProvider, useMaybeI18n] = createContextProvider<
[i18n.Translator<Dict>], [i18n.Translator<Dict>],
{ locale: LANG } { locale: LANG }
>((props) => [i18n.translator(() => i18n.flatten(dict[props.locale]))]) >((props) => [
i18n.translator(() => i18n.flatten(dict[props.locale]), i18n.resolveTemplate),
])
export const useI18n = () => useMaybeI18n()! export const useI18n = () => useMaybeI18n()!

View File

@ -105,4 +105,5 @@ export default {
interfaceName: '接口名称', interfaceName: '接口名称',
en: '英文', en: '英文',
zh: '中文', zh: '中文',
port: '{{ name }} 端口',
} satisfies Dict } satisfies Dict

View File

@ -116,13 +116,13 @@ const ConfigForm = () => {
const portList = [ const portList = [
{ {
label: 'HTTP Port', label: () => t('port', { name: 'HTTP' }),
key: 'port', key: 'port',
onChange: (e: Event & { target: HTMLInputElement }) => onChange: (e: Event & { target: HTMLInputElement }) =>
void updateBackendConfigAPI('port', Number(e.target.value), refetch), void updateBackendConfigAPI('port', Number(e.target.value), refetch),
}, },
{ {
label: 'Socks Port', label: () => t('port', { name: 'Socks' }),
key: 'socks-port', key: 'socks-port',
onChange: (e: Event & { target: HTMLInputElement }) => onChange: (e: Event & { target: HTMLInputElement }) =>
void updateBackendConfigAPI( void updateBackendConfigAPI(
@ -132,7 +132,7 @@ const ConfigForm = () => {
), ),
}, },
{ {
label: 'Redir Port', label: () => t('port', { name: 'Redir' }),
key: 'redir-port', key: 'redir-port',
onChange: (e: Event & { target: HTMLInputElement }) => onChange: (e: Event & { target: HTMLInputElement }) =>
void updateBackendConfigAPI( void updateBackendConfigAPI(
@ -142,7 +142,7 @@ const ConfigForm = () => {
), ),
}, },
{ {
label: 'TProxy Port', label: () => t('port', { name: 'TProxy' }),
key: 'tproxy-port', key: 'tproxy-port',
onChange: (e: Event & { target: HTMLInputElement }) => onChange: (e: Event & { target: HTMLInputElement }) =>
void updateBackendConfigAPI( void updateBackendConfigAPI(
@ -152,7 +152,7 @@ const ConfigForm = () => {
), ),
}, },
{ {
label: 'Mixed Port', label: () => t('port', { name: 'Mixed' }),
key: 'mixed-port', key: 'mixed-port',
onChange: (e: Event & { target: HTMLInputElement }) => onChange: (e: Event & { target: HTMLInputElement }) =>
void updateBackendConfigAPI( void updateBackendConfigAPI(
@ -197,7 +197,7 @@ const ConfigForm = () => {
{(item) => ( {(item) => (
<div class="form-control"> <div class="form-control">
<label for={item.key} class="label"> <label for={item.key} class="label">
<span class="label-text">{item.label}</span> <span class="label-text">{item.label()}</span>
</label> </label>
<input <input
@ -205,7 +205,7 @@ const ConfigForm = () => {
name={item.key} name={item.key}
type="number" type="number"
class="input input-bordered" class="input input-bordered"
placeholder={item.label} placeholder={item.label()}
onChange={item.onChange} onChange={item.onChange}
/> />
</div> </div>