feat(config): i18n support for port numbers

src/i18n/en.ts

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

src/i18n/index.tsx

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

src/i18n/zh.ts

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

src/pages/Config.tsx

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