feat: i18n for conn table

src/components/Collpase.tsx

@@ -27,7 +27,7 @@ const Collapse: ParentComponent<Props> = (props) => {
     <div
       class={twMerge(
         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

src/components/ConnectionsModal.tsx

@@ -13,7 +13,7 @@ import {
   createSortable,
   useDragDropContext,
 } from '@thisbeyond/solid-dnd'
-import { For, createSignal } from 'solid-js'
+import { For, Show, createSignal } from 'solid-js'
 import { AccessorKey } from '~/config/enum'
 
 type ColumnVisibility = Partial<Record<AccessorKey, boolean>>
@@ -65,7 +65,7 @@ export default (props: {
         }}
       >
         <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
             type="checkbox"
             class="toggle"
@@ -99,7 +99,9 @@ export default (props: {
               </SortableProvider>
             </div>
             <DragOverlay>
-              <div class="sortable">{activeKey()}</div>
+              <Show when={activeKey()}>
+                <div class="sortable">{t(activeKey()!)}</div>
+              </Show>
             </DragOverlay>
           </DragDropProvider>
 

src/components/Header.tsx

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

src/config/enum.ts

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

src/i18n/dict.ts

@@ -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,
+}

src/i18n/en.ts

@@ -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',
+}

src/i18n/index.tsx

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

src/i18n/zh.ts

@@ -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: '重置',
+}

src/pages/Connections.tsx

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

src/pages/Overview.tsx

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

src/signals/proxies.ts

@@ -64,12 +64,18 @@ export function useProxies() {
   }
 
   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}`, {
       body: JSON.stringify({
         name: proxyName,
       }),
     })
-    await updateProxy()
+
+    proxyGroup.now = proxyName
+    setProxies(proxyGroupList)
+    updateProxy()
   }
 
   const delayTestByProxyGroupName = async (proxyGroupName: string) => {