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>