feat: i18n support

web/default/public/locales/en/translation.json

@@ -303,5 +303,40 @@
       "amount": "Amount",
       "time": "Time"
     }
+  },
+  "user": {
+    "edit": {
+      "title": "Update User Information",
+      "username": "Username",
+      "username_placeholder": "Please enter new username",
+      "password": "Password",
+      "password_placeholder": "Please enter new password, minimum 8 characters",
+      "display_name": "Display Name",
+      "display_name_placeholder": "Please enter new display name",
+      "group": "Group",
+      "group_placeholder": "Please select group",
+      "group_addition": "Please edit group multipliers in system settings to add new group:",
+      "quota": "Remaining Quota",
+      "quota_placeholder": "Please enter new remaining quota",
+      "github_id": "Linked GitHub Account",
+      "github_id_placeholder": "Read-only, user must link through personal settings page, cannot be modified directly",
+      "wechat_id": "Linked WeChat Account",
+      "wechat_id_placeholder": "Read-only, user must link through personal settings page, cannot be modified directly",
+      "email": "Linked Email Account",
+      "email_placeholder": "Read-only, user must link through personal settings page, cannot be modified directly",
+      "buttons": {
+        "submit": "Submit",
+        "cancel": "Cancel"
+      }
+    },
+    "messages": {
+      "update_success": "User information updated successfully!"
+    },
+    "add": {
+      "title": "Create New User Account"
+    },
+    "messages": {
+      "create_success": "User account created successfully!"
+    }
   }
 }

web/default/public/locales/zh/translation.json

@@ -303,5 +303,40 @@
       "amount": "数量",
       "time": "时间"
     }
+  },
+  "user": {
+    "edit": {
+      "title": "更新用户信息",
+      "username": "用户名",
+      "username_placeholder": "请输入新的用户名",
+      "password": "密码",
+      "password_placeholder": "请输入新的密码，最短 8 位",
+      "display_name": "显示名称",
+      "display_name_placeholder": "请输入新的显示名称",
+      "group": "分组",
+      "group_placeholder": "请选择分组",
+      "group_addition": "请在系统设置页面编辑分组倍率以添加新的分组：",
+      "quota": "剩余额度",
+      "quota_placeholder": "请输入新的剩余额度",
+      "github_id": "已绑定的 GitHub 账户",
+      "github_id_placeholder": "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改",
+      "wechat_id": "已绑定的微信账户",
+      "wechat_id_placeholder": "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改",
+      "email": "已绑定的邮箱账户",
+      "email_placeholder": "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改",
+      "buttons": {
+        "submit": "提交",
+        "cancel": "取消"
+      }
+    },
+    "messages": {
+      "update_success": "用户信息更新成功！"
+    },
+    "add": {
+      "title": "创建新用户账户"
+    },
+    "messages": {
+      "create_success": "用户账户创建成功！"
+    }
   }
 }

web/default/src/pages/User/AddUser.js

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, Form, Header, Segment } from 'semantic-ui-react';
 import { API, showError, showSuccess } from '../../helpers';
 
 const AddUser = () => {
+  const { t } = useTranslation();
   const originInputs = {
     username: '',
     display_name: '',
@@ -20,7 +22,7 @@ const AddUser = () => {
     const res = await API.post(`/api/user/`, inputs);
     const { success, message } = res.data;
     if (success) {
-      showSuccess('用户账户创建成功！');
+      showSuccess(t('user.messages.create_success'));
       setInputs(originInputs);
     } else {
       showError(message);
@@ -30,43 +32,43 @@ const AddUser = () => {
   return (
     <>
       <Segment>
-        <Header as="h3">创建新用户账户</Header>
+        <Header as='h3'>{t('user.add.title')}</Header>
-        <Form autoComplete="off">
+        <Form autoComplete='off'>
           <Form.Field>
             <Form.Input
-              label="用户名"
+              label={t('user.edit.username')}
-              name="username"
+              name='username'
-              placeholder={'请输入用户名'}
+              placeholder={t('user.edit.username_placeholder')}
               onChange={handleInputChange}
               value={username}
-              autoComplete="off"
+              autoComplete='off'
               required
             />
           </Form.Field>
           <Form.Field>
             <Form.Input
-              label="显示名称"
+              label={t('user.edit.display_name')}
-              name="display_name"
+              name='display_name'
-              placeholder={'请输入显示名称'}
+              placeholder={t('user.edit.display_name_placeholder')}
               onChange={handleInputChange}
               value={display_name}
-              autoComplete="off"
+              autoComplete='off'
             />
           </Form.Field>
           <Form.Field>
             <Form.Input
-              label="密码"
+              label={t('user.edit.password')}
-              name="password"
+              name='password'
               type={'password'}
-              placeholder={'请输入密码'}
+              placeholder={t('user.edit.password_placeholder')}
               onChange={handleInputChange}
               value={password}
-              autoComplete="off"
+              autoComplete='off'
               required
             />
           </Form.Field>
           <Button positive type={'submit'} onClick={submit}>
-            提交
+            {t('user.edit.buttons.submit')}
           </Button>
         </Form>
       </Segment>

web/default/src/pages/User/EditUser.js

@@ -1,10 +1,12 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, Form, Card } from 'semantic-ui-react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { API, showError, showSuccess } from '../../helpers';
 import { renderQuota, renderQuotaWithPrompt } from '../../helpers/render';
 
 const EditUser = () => {
+  const { t } = useTranslation();
   const params = useParams();
   const userId = params.id;
   const [loading, setLoading] = useState(true);
@@ -86,7 +88,7 @@ const EditUser = () => {
     }
     const { success, message } = res.data;
     if (success) {
-      showSuccess('用户信息更新成功！');
+      showSuccess(t('user.messages.update_success'));
     } else {
       showError(message);
     }
@@ -96,13 +98,13 @@ const EditUser = () => {
     <div className='dashboard-container'>
       <Card fluid className='chart-card'>
         <Card.Content>
-          <Card.Header className='header'>更新用户信息</Card.Header>
+          <Card.Header className='header'>{t('user.edit.title')}</Card.Header>
           <Form loading={loading} autoComplete='new-password'>
             <Form.Field>
               <Form.Input
-                label='用户名'
+                label={t('user.edit.username')}
                 name='username'
-                placeholder={'请输入新的用户名'}
+                placeholder={t('user.edit.username_placeholder')}
                 onChange={handleInputChange}
                 value={username}
                 autoComplete='new-password'
@@ -110,10 +112,10 @@ const EditUser = () => {
             </Form.Field>
             <Form.Field>
               <Form.Input
-                label='密码'
+                label={t('user.edit.password')}
                 name='password'
                 type={'password'}
-                placeholder={'请输入新的密码，最短 8 位'}
+                placeholder={t('user.edit.password_placeholder')}
                 onChange={handleInputChange}
                 value={password}
                 autoComplete='new-password'
@@ -121,9 +123,9 @@ const EditUser = () => {
             </Form.Field>
             <Form.Field>
               <Form.Input
-                label='显示名称'
+                label={t('user.edit.display_name')}
                 name='display_name'
-                placeholder={'请输入新的显示名称'}
+                placeholder={t('user.edit.display_name_placeholder')}
                 onChange={handleInputChange}
                 value={display_name}
                 autoComplete='new-password'
@@ -133,16 +135,14 @@ const EditUser = () => {
               <>
                 <Form.Field>
                   <Form.Dropdown
-                    label='分组'
+                    label={t('user.edit.group')}
-                    placeholder={'请选择分组'}
+                    placeholder={t('user.edit.group_placeholder')}
                     name='group'
                     fluid
                     search
                     selection
                     allowAdditions
-                    additionLabel={
+                    additionLabel={t('user.edit.group_addition')}
-                      '请在系统设置页面编辑分组倍率以添加新的分组：'
-                    }
                     onChange={handleInputChange}
                     value={inputs.group}
                     autoComplete='new-password'
@@ -151,9 +151,12 @@ const EditUser = () => {
                 </Form.Field>
                 <Form.Field>
                   <Form.Input
-                    label={`剩余额度${renderQuotaWithPrompt(quota)}`}
+                    label={`${t('user.edit.quota')}${renderQuotaWithPrompt(
+                      quota,
+                      t
+                    )}`}
                     name='quota'
-                    placeholder={'请输入新的剩余额度'}
+                    placeholder={t('user.edit.quota_placeholder')}
                     onChange={handleInputChange}
                     value={quota}
                     type={'number'}
@@ -164,37 +167,39 @@ const EditUser = () => {
             )}
             <Form.Field>
               <Form.Input
-                label='已绑定的 GitHub 账户'
+                label={t('user.edit.github_id')}
                 name='github_id'
                 value={github_id}
                 autoComplete='new-password'
-                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                placeholder={t('user.edit.github_id_placeholder')}
                 readOnly
               />
             </Form.Field>
             <Form.Field>
               <Form.Input
-                label='已绑定的微信账户'
+                label={t('user.edit.wechat_id')}
                 name='wechat_id'
                 value={wechat_id}
                 autoComplete='new-password'
-                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                placeholder={t('user.edit.wechat_id_placeholder')}
                 readOnly
               />
             </Form.Field>
             <Form.Field>
               <Form.Input
-                label='已绑定的邮箱账户'
+                label={t('user.edit.email')}
                 name='email'
                 value={email}
                 autoComplete='new-password'
-                placeholder='此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改'
+                placeholder={t('user.edit.email_placeholder')}
                 readOnly
               />
             </Form.Field>
-            <Button onClick={handleCancel}>取消</Button>
+            <Button onClick={handleCancel}>
+              {t('user.edit.buttons.cancel')}
+            </Button>
             <Button positive onClick={submit}>
-              提交
+              {t('user.edit.buttons.submit')}
             </Button>
           </Form>
         </Card.Content>