feat(i18n): add more i18n resources

src/components/Header.tsx

@@ -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 />,
     },
   ]

src/i18n/index.tsx

@@ -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: '关闭',
   },
 }
 

src/pages/Connections.tsx

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

src/pages/Logs.tsx

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

src/pages/Overview.tsx

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

src/pages/Proxies.tsx

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

src/pages/Rules.tsx

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