✨ Kreedzt - add i18n

package.json

@@ -11,6 +11,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@solid-primitives/i18n": "^1.2.4",
     "@solidjs/router": "^0.8.2",
     "@suid/icons-material": "^0.5.11",
     "@suid/material": "^0.11.1",

src/components/ActionItem/DetailAction.tsx

@@ -5,6 +5,7 @@ import { toast } from 'solid-toast';
 import { DisplayServerItem } from '../../share/types';
 import ModalContent from '../ModalContent/ModalContent';
 import { getMapNameByFullId, getServerJoinCmd } from '../../share/utils';
+import { useTranslate } from '../../hooks/useTranslate';
 
 interface DetailActionProps {
   open: Accessor<boolean>;
@@ -14,12 +15,13 @@ interface DetailActionProps {
 
 function DetailAction(props: DetailActionProps) {
   const { open, onClose, data } = props;
+  const t = useTranslate();
 
   const onJoinGame = async () => {
     try {
       console.log('joinCmd:', getServerJoinCmd(data()!));
       await shell.open(getServerJoinCmd(data()!));
-      toast.success('已发送命令请求，请检查 steam 是否被呼起', {
+      toast.success(t('message_join_game'), {
         position: 'top-right',
       });
     } catch (e) {
@@ -31,7 +33,7 @@ function DetailAction(props: DetailActionProps) {
     try {
       console.log('joinCmd:', getServerJoinCmd(data()!));
       await clipboard.writeText(getServerJoinCmd(data()!));
-      toast.success('已复制到剪贴板', {
+      toast.success(t('message_copy'), {
         position: 'top-right',
       });
     } catch (e) {
@@ -44,33 +46,47 @@ function DetailAction(props: DetailActionProps) {
       <ModalContent>
         <Show
           when={!!data()}
-          fallback={<Typography variant="h1">暂无内容</Typography>}
+          fallback={<Typography variant="h1">{t('empty')}</Typography>}
         >
-          <Typography variant="h5">名称：{data()!.name}</Typography>
-          <Typography variant="h5">描述：{data()!.comment}</Typography>
-          <Typography variant="h5">IP：{data()!.ipAddress}</Typography>
-          <Typography variant="h5">端口：{data()!.port}</Typography>
-          <Typography variant="h5">地区：{data()!.country}</Typography>
-          <Typography variant="h5">游戏版本：{data()!.version}</Typography>
-          <Typography variant="h5">
-            地图：{getMapNameByFullId(data()!.mapId)}
+          <Typography variant="h6">{t('column_server_name')}：</Typography>
+          <Typography variant="subtitle1">{data()!.name}</Typography>
+
+          <Typography variant="h6">{t('column_desc')}：</Typography>
+          <Typography variant="subtitle1">{data()!.comment}</Typography>
+
+          <Typography variant="h6">{t('column_ip')}：</Typography>
+          <Typography variant="subtitle1">{data()!.ipAddress}</Typography>
+
+          <Typography variant="h6">{t('column_port')}：</Typography>
+          <Typography variant="subtitle1">{data()!.port}</Typography>
+
+          <Typography variant="h6">{t('column_country')}：</Typography>
+          <Typography variant="subtitle1">{data()!.country}</Typography>
+
+          <Typography variant="h6">{t('column_game_version')}：</Typography>
+          <Typography variant="subtitle1">{data()!.version}</Typography>
+
+          <Typography variant="h6">{t('column_map')}：</Typography>
+          <Typography variant="subtitle1">
+            {getMapNameByFullId(data()!.mapId)}
           </Typography>
-          <Typography variant="h5">
-            玩家负载：
+
+          <Typography variant="h6">{t('column_player_load')}：</Typography>
+          <Typography variant="subtitle1">
             {data()!.currentPlayers} / {data()!.maxPlayers}
           </Typography>
 
           <div class="flex">
             <Button variant="contained" onClick={onJoinGame}>
-              加入游戏
+              {t('action_join_game')}
             </Button>
             <div class="ml-2">
               <Button
                 onClick={onCopyJoinCmd}
                 variant="contained"
                 color="warning"
               >
-                复制 steam 游戏启动连接
+                {t('action_copy_join_cmd')}
               </Button>
             </div>
           </div>

src/components/I18n/I18nProvider.tsx

@@ -0,0 +1,14 @@
+import { Component } from 'solid-js';
+import { createI18nContext, I18nContext } from '@solid-primitives/i18n';
+
+export const I18nProvider: Component<{
+  dict?: Record<string, Record<string, any>>;
+  locale?: string;
+  children?: any;
+}> = (props) => {
+  const value = createI18nContext(props.dict, props.locale);
+
+  return (
+    <I18nContext.Provider value={value}>{props.children}</I18nContext.Provider>
+  );
+};

src/components/ServerList/ServerList.tsx

@@ -13,6 +13,7 @@ import {
 import { Accessor, For, mapArray, Match, Show, Signal, Switch } from 'solid-js';
 import ActionList from './ActionList';
 import { IServerActionDefine } from './types';
+import { useTranslate } from '../../hooks/useTranslate';
 
 interface IServerListProps {
   data: Accessor<DisplayServerItem[]>;
@@ -24,6 +25,8 @@ interface IServerListProps {
 }
 
 function ServerList(props: IServerListProps) {
+  const t = useTranslate();
+
   const { data, pingLoading, latencyRecord, onPing, containerClass, actions } =
     props;
 
@@ -32,12 +35,12 @@ function ServerList(props: IServerListProps) {
       <Table stickyHeader>
         <TableHead>
           <TableRow>
-            <TableCell>服务器名称</TableCell>
-            <TableCell>IP</TableCell>
-            <TableCell>端口</TableCell>
-            <TableCell>玩家负载</TableCell>
-            <TableCell>延迟</TableCell>
-            <TableCell>操作</TableCell>
+            <TableCell>{t('column_server_name')}</TableCell>
+            <TableCell>{t('column_ip')}</TableCell>
+            <TableCell>{t('column_port')}</TableCell>
+            <TableCell>{t('column_player_load')}</TableCell>
+            <TableCell>{t('column_latency')}</TableCell>
+            <TableCell>{t('column_action')}</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -59,10 +62,10 @@ function ServerList(props: IServerListProps) {
                       <Match
                         when={latencyRecord()[server.ipAddress] === undefined}
                       >
-                        未测速
+                        {t('response_non_ping')}
                       </Match>
                       <Match when={latencyRecord()[server.ipAddress] === -1}>
-                        超时
+                        {t('response_timeout')}
                       </Match>
                     </Switch>
                   </Show>
@@ -73,7 +76,7 @@ function ServerList(props: IServerListProps) {
                     variant="text"
                     onClick={() => onPing(server)}
                   >
-                    测速
+                    {t('ping')}
                   </Button>
                   <Show when={!!actions}>
                     <ActionList actions={actions!} data={server} />

src/entries/about/About.tsx

@@ -3,8 +3,10 @@ import { getName, getVersion } from '@tauri-apps/api/app';
 import { open } from '@tauri-apps/api/shell';
 import { AUTHORS, SOURCE_CODE_URL } from '../../constants';
 import { createEffect, createSignal } from 'solid-js';
+import { useTranslate } from '../../hooks/useTranslate';
 
 function About() {
+  const t = useTranslate();
   const [appInfo, setAppInfo] = createSignal<{
     name: string;
     version: string;
@@ -38,23 +40,27 @@ function About() {
   return (
     <Box>
       <Box p={2}>
-        <Typography variant="h5">RWR 服务器状态检测</Typography>
+        <Typography variant="h5">{t('app_full_name')}</Typography>
       </Box>
 
       <Divider />
 
       <Box p={2}>
-        <Typography variant="subtitle1">应用名称: {appInfo()?.name}</Typography>
         <Typography variant="subtitle1">
-          应用版本: {appInfo()?.version}
+          {t('app_name')}: {appInfo()?.name}
         </Typography>
         <Typography variant="subtitle1">
-          源码地址:
+          {t('app_version')}: {appInfo()?.version}
+        </Typography>
+        <Typography variant="subtitle1">
+          {t('app_source_code')}:
           <Button variant="text" onClick={openSourceUrl}>
             rwr-server-ping
           </Button>
         </Typography>
-        <Typography variant="subtitle1">作者: {AUTHORS.join(',')}</Typography>
+        <Typography variant="subtitle1">
+          {t('app_authors')}: {AUTHORS.join(',')}
+        </Typography>
       </Box>
 
       <Divider />

src/entries/allList/AllList.tsx

@@ -8,8 +8,10 @@ import DetailAction from '../../components/ActionItem/DetailAction';
 import { DisplayServerItem } from '../../share/types';
 import { HomeContext } from '../../contexts/home';
 import { toast } from 'solid-toast';
+import { useTranslate } from '../../hooks/useTranslate';
 
 function AllList() {
+  const t = useTranslate();
   const homeContext = useContext(HomeContext);
 
   const {
@@ -26,15 +28,15 @@ function AllList() {
   const { show, ...elProps } = useDetailAction();
   const actions: IServerActionDefine[] = [
     {
-      title: '详情',
+      title: t('action_detail'),
       onClick: show,
     },
     {
-      title: '收藏',
+      title: t('action_add_to_favorite'),
       onClick: async (s: DisplayServerItem) => {
         try {
           await homeContext?.configStore.addFavorite(s);
-          toast.success('添加成功');
+          toast.success(t('message_add_success'));
         } catch (e: any) {
           toast.error(e.message);
         }
@@ -51,7 +53,7 @@ function AllList() {
       </Show>
       <div class="flex">
         <Button variant="contained" onClick={refreshList} disabled={loading()}>
-          刷新服务器列表
+          {t('refresh_server_list')}
         </Button>
         <div class="ml-2">
           <Button
@@ -60,7 +62,7 @@ function AllList() {
             onClick={pingList}
             disabled={pingListLoading()}
           >
-            一键测速
+            {t('quick_ping')}
           </Button>
         </div>
       </div>

src/entries/favoriteList/FavoriteList.tsx

@@ -3,14 +3,16 @@ import { Button, LinearProgress } from '@suid/material';
 import { useServerList } from '../../components/ServerList/useServerList';
 import ServerList from '../../components/ServerList/ServerList';
 import { HomeContext } from '../../contexts/home';
-import { DisplayServerItem } from "../../share/types";
-import { toast } from "solid-toast";
-import { IServerActionDefine } from "../../components/ServerList/types";
+import { DisplayServerItem } from '../../share/types';
+import { toast } from 'solid-toast';
+import { IServerActionDefine } from '../../components/ServerList/types';
 import { useDetailAction } from '../../components/ActionItem/useDetailAction';
-import DetailAction from "../../components/ActionItem/DetailAction";
+import DetailAction from '../../components/ActionItem/DetailAction';
+import { useTranslate } from '../../hooks/useTranslate';
 
 function FavoriteList() {
   const homeContext = useContext(HomeContext);
+  const t = useTranslate();
 
   const {
     loading,
@@ -31,15 +33,15 @@ function FavoriteList() {
   const { show, ...elProps } = useDetailAction();
   const actions: IServerActionDefine[] = [
     {
-      title: '详情',
+      title: t('action_detail'),
       onClick: show,
     },
     {
-      title: '移除',
+      title: t('action_remove'),
       onClick: async (s: DisplayServerItem) => {
         try {
           await homeContext?.configStore.removeFavorite(s);
-          toast.success('已移除');
+          toast.success(t('message_remove'));
           await refreshList();
         } catch (e: any) {
           toast.error(e.message);
@@ -57,7 +59,7 @@ function FavoriteList() {
       </Show>
       <div class="flex">
         <Button variant="contained" onClick={refreshList} disabled={loading()}>
-          刷新服务器列表
+          {t('refresh_server_list')}
         </Button>
         <div class="ml-2">
           <Button
@@ -66,7 +68,7 @@ function FavoriteList() {
             onClick={pingList}
             disabled={pingListLoading()}
           >
-            一键测速
+            {t('quick_ping')}
           </Button>
         </div>
       </div>