支持多语言英文

src/pages/subscription/modal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useCallback, useEffect, useState } from 'react';
 import {
   Modal,
@@ -50,7 +51,9 @@ const SubscriptionModal = ({
         payload,
       );
       if (code === 200) {
-        message.success(subscription ? '更新订阅成功' : '新建订阅成功');
+        message.success(
+          subscription ? intl.get('更新订阅成功') : intl.get('创建订阅成功'),
+        );
         handleCancel(data);
       }
       setLoading(false);
@@ -141,7 +144,7 @@ const SubscriptionModal = ({
     return (
       <Input.Group compact>
         <InputNumber
-          addonBefore="每"
+          addonBefore={intl.get('每')}
           precision={0}
           min={1}
           value={intervalNumber}
@@ -149,10 +152,10 @@ const SubscriptionModal = ({
           onChange={numberChange}
         />
         <Select value={intervalType} onChange={intervalTypeChange}>
-          <Option value="days">天</Option>
-          <Option value="hours">时</Option>
-          <Option value="minutes">分</Option>
-          <Option value="seconds">秒</Option>
+          <Option value="days">{intl.get('天')}</Option>
+          <Option value="hours">{intl.get('时')}</Option>
+          <Option value="minutes">{intl.get('分')}</Option>
+          <Option value="seconds">{intl.get('秒')}</Option>
         </Select>
       </Input.Group>
     );
@@ -170,31 +173,31 @@ const SubscriptionModal = ({
     return type === 'ssh-key' ? (
       <Form.Item
         name={['pull_option', 'private_key']}
-        label="私钥"
+        label={intl.get('私钥')}
         rules={[{ required: true }]}
       >
         <Input.TextArea
           rows={4}
           autoSize={{ minRows: 1, maxRows: 6 }}
-          placeholder="请输入私钥"
+          placeholder={intl.get('请输入私钥')}
         />
       </Form.Item>
     ) : (
       <>
         <Form.Item
           name={['pull_option', 'username']}
-          label="用户名"
+          label={intl.get('用户名')}
           rules={[{ required: true }]}
         >
-          <Input placeholder="请输入认证用户名" />
+          <Input placeholder={intl.get('请输入认证用户名')} />
         </Form.Item>
         <Form.Item
           name={['pull_option', 'password']}
-          tooltip="Github已不支持密码认证，请使用Token方式"
-          label="密码/Token"
+          tooltip={intl.get('Github已不支持密码认证，请使用Token方式')}
+          label={intl.get('密码/Token')}
           rules={[{ required: true }]}
         >
-          <Input placeholder="请输入密码或者Token" />
+          <Input placeholder={intl.get('请输入密码或者Token')} />
         </Form.Item>
       </>
     );
@@ -274,7 +277,7 @@ const SubscriptionModal = ({
 
   return (
     <Modal
-      title={subscription ? '编辑订阅' : '新建订阅'}
+      title={subscription ? intl.get('编辑订阅') : intl.get('创建订阅')}
       open={visible}
       forceRender
       centered
@@ -293,27 +296,31 @@ const SubscriptionModal = ({
       confirmLoading={loading}
     >
       <Form form={form} name="form_in_modal" layout="vertical">
-        <Form.Item name="name" label="名称" rules={[{ required: true }]}>
+        <Form.Item
+          name="name"
+          label={intl.get('名称')}
+          rules={[{ required: true }]}
+        >
           <Input
-            placeholder="支持拷贝 ql repo/raw 命令，粘贴导入"
+            placeholder={intl.get('支持拷贝 ql repo/raw 命令，粘贴导入')}
             onPaste={onNamePaste}
           />
         </Form.Item>
         <Form.Item
           name="type"
-          label="类型"
+          label={intl.get('类型')}
           rules={[{ required: true }]}
           initialValue={'public-repo'}
         >
           <Radio.Group onChange={typeChange}>
-            <Radio value="public-repo">公开仓库</Radio>
-            <Radio value="private-repo">私有仓库</Radio>
-            <Radio value="file">单文件</Radio>
+            <Radio value="public-repo">{intl.get('公开仓库')}</Radio>
+            <Radio value="private-repo">{intl.get('私有仓库')}</Radio>
+            <Radio value="file">{intl.get('单文件')}</Radio>
           </Radio.Group>
         </Form.Item>
         <Form.Item
           name="url"
-          label="链接"
+          label={intl.get('链接')}
           rules={[
             { required: true },
             { pattern: type === 'file' ? fileUrlRegx : repoUrlRegx },
@@ -322,15 +329,15 @@ const SubscriptionModal = ({
           <Input.TextArea
             rows={4}
             autoSize={true}
-            placeholder="请输入订阅链接"
+            placeholder={intl.get('请输入订阅链接')}
             onPaste={onUrlChange}
             onChange={onUrlChange}
           />
         </Form.Item>
         {type !== 'file' && (
-          <Form.Item name="branch" label="分支">
+          <Form.Item name="branch" label={intl.get('分支')}>
             <Input
-              placeholder="请输入分支"
+              placeholder={intl.get('请输入分支')}
               onPaste={onBranchChange}
               onChange={onBranchChange}
             />
@@ -338,23 +345,23 @@ const SubscriptionModal = ({
         )}
         <Form.Item
           name="alias"
-          label="唯一值"
+          label={intl.get('唯一值')}
           rules={[{ required: true, message: '' }]}
-          tooltip="唯一值用于日志目录和私钥别名"
+          tooltip={intl.get('唯一值用于日志目录和私钥别名')}
         >
-          <Input placeholder="自动生成" disabled />
+          <Input placeholder={intl.get('自动生成')} disabled />
         </Form.Item>
         {type === 'private-repo' && (
           <>
             <Form.Item
               name="pull_type"
-              label="拉取方式"
+              label={intl.get('拉取方式')}
               initialValue={'ssh-key'}
               rules={[{ required: true }]}
             >
               <Radio.Group onChange={pullTypeChange}>
-                <Radio value="ssh-key">私钥</Radio>
-                <Radio value="user-pwd">用户名密码/Token</Radio>
+                <Radio value="ssh-key">{intl.get('私钥')}</Radio>
+                <Radio value="user-pwd">{intl.get('用户名密码/Token')}</Radio>
               </Radio.Group>
             </Form.Item>
             <PullOptions type={pullType} />
@@ -362,7 +369,7 @@ const SubscriptionModal = ({
         )}
         <Form.Item
           name="schedule_type"
-          label="定时类型"
+          label={intl.get('定时类型')}
           initialValue={'crontab'}
           rules={[{ required: true }]}
         >
@@ -373,7 +380,7 @@ const SubscriptionModal = ({
         </Form.Item>
         <Form.Item
           name={scheduleType === 'crontab' ? 'schedule' : 'interval_schedule'}
-          label="定时规则"
+          label={intl.get('定时规则')}
           rules={[
             { required: true },
             {
@@ -394,79 +401,93 @@ const SubscriptionModal = ({
           {scheduleType === 'interval' ? (
             <IntervalSelect />
           ) : (
-            <Input placeholder="秒(可选) 分 时 天 月 周" />
+            <Input placeholder={intl.get('秒(可选) 分 时 天 月 周')} />
           )}
         </Form.Item>
         {type !== 'file' && (
           <>
             <Form.Item
               name="whitelist"
-              label="白名单"
-              tooltip="多个关键词竖线分割，支持正则表达式"
+              label={intl.get('白名单')}
+              tooltip={intl.get('多个关键词竖线分割，支持正则表达式')}
             >
               <Input.TextArea
                 rows={4}
                 autoSize={true}
-                placeholder="请输入脚本筛选白名单关键词，多个关键词竖线分割"
+                placeholder={intl.get(
+                  '请输入脚本筛选白名单关键词，多个关键词竖线分割',
+                )}
               />
             </Form.Item>
             <Form.Item
               name="blacklist"
-              label="黑名单"
-              tooltip="多个关键词竖线分割，支持正则表达式"
+              label={intl.get('黑名单')}
+              tooltip={intl.get('多个关键词竖线分割，支持正则表达式')}
             >
               <Input.TextArea
                 rows={4}
                 autoSize={true}
-                placeholder="请输入脚本筛选黑名单关键词，多个关键词竖线分割"
+                placeholder={intl.get(
+                  '请输入脚本筛选黑名单关键词，多个关键词竖线分割',
+                )}
               />
             </Form.Item>
             <Form.Item
               name="dependences"
-              label="依赖文件"
-              tooltip="多个关键词竖线分割，支持正则表达式"
+              label={intl.get('依赖文件')}
+              tooltip={intl.get('多个关键词竖线分割，支持正则表达式')}
             >
               <Input.TextArea
                 rows={4}
                 autoSize={true}
-                placeholder="请输入脚本依赖文件关键词，多个关键词竖线分割"
+                placeholder={intl.get(
+                  '请输入脚本依赖文件关键词，多个关键词竖线分割',
+                )}
               />
             </Form.Item>
             <Form.Item
               name="extensions"
-              label="文件后缀"
-              tooltip="仓库需要拉取的文件后缀，多个后缀空格分隔，默认使用配置文件中的RepoFileExtensions"
+              label={intl.get('文件后缀')}
+              tooltip={intl.get(
+                '仓库需要拉取的文件后缀，多个后缀空格分隔，默认使用配置文件中的RepoFileExtensions',
+              )}
             >
-              <Input placeholder="请输入文件后缀" />
+              <Input placeholder={intl.get('请输入文件后缀')} />
             </Form.Item>
             <Form.Item
               name="sub_before"
-              label="执行前"
-              tooltip="运行订阅前执行的命令，比如 cp/mv/python3 xxx.py/node xxx.js"
+              label={intl.get('执行前')}
+              tooltip={intl.get(
+                '运行订阅前执行的命令，比如 cp/mv/python3 xxx.py/node xxx.js',
+              )}
             >
               <Input.TextArea
                 rows={4}
                 autoSize={true}
-                placeholder="请输入运行订阅前要执行的命令"
+                placeholder={intl.get('请输入运行订阅前要执行的命令')}
               />
             </Form.Item>
             <Form.Item
               name="sub_after"
-              label="执行后"
-              tooltip="运行订阅后执行的命令，比如 cp/mv/python3 xxx.py/node xxx.js"
+              label={intl.get('执行后')}
+              tooltip={intl.get(
+                '运行订阅后执行的命令，比如 cp/mv/python3 xxx.py/node xxx.js',
+              )}
             >
               <Input.TextArea
                 rows={4}
                 autoSize={true}
-                placeholder="请输入运行订阅后要执行的命令"
+                placeholder={intl.get('请输入运行订阅后要执行的命令')}
               />
             </Form.Item>
           </>
         )}
         <Form.Item
           name="proxy"
-          label="代理"
-          tooltip="公开仓库支持HTTP/SOCK5代理，私有仓库支持SOCK5代理"
+          label={intl.get('代理')}
+          tooltip={intl.get(
+            '公开仓库支持HTTP/SOCK5代理，私有仓库支持SOCK5代理',
+          )}
         >
           <Input
             placeholder={
@@ -479,7 +500,7 @@ const SubscriptionModal = ({
         <Form.Item style={{ marginBottom: 0 }} className="inline-form-item">
           <Form.Item
             name="autoAddCron"
-            label="自动添加任务"
+            label={intl.get('自动添加任务')}
             valuePropName="checked"
             initialValue={true}
           >
@@ -487,7 +508,7 @@ const SubscriptionModal = ({
           </Form.Item>
           <Form.Item
             name="autoDelCron"
-            label="自动删除任务"
+            label={intl.get('自动删除任务')}
             valuePropName="checked"
             initialValue={true}
           >