支持多语言英文

src/pages/subscription/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
@@ -64,7 +65,7 @@ const Subscription = () => {
 
   const columns: any = [
     {
-      title: '名称',
+      title: intl.get('名称'),
       dataIndex: 'name',
       key: 'name',
       width: 150,
@@ -74,7 +75,7 @@ const Subscription = () => {
       },
     },
     {
-      title: '链接',
+      title: intl.get('链接'),
       dataIndex: 'url',
       key: 'url',
       sorter: {
@@ -96,7 +97,7 @@ const Subscription = () => {
       },
     },
     {
-      title: '类型',
+      title: intl.get('类型'),
       dataIndex: 'type',
       key: 'type',
       width: 130,
@@ -105,7 +106,7 @@ const Subscription = () => {
       },
     },
     {
-      title: '分支',
+      title: intl.get('分支'),
       dataIndex: 'branch',
       key: 'branch',
       width: 130,
@@ -114,7 +115,7 @@ const Subscription = () => {
       },
     },
     {
-      title: '定时规则',
+      title: intl.get('定时规则'),
       width: 180,
       render: (text: string, record: any) => {
         if (record.schedule_type === 'interval') {
@@ -125,21 +126,21 @@ const Subscription = () => {
       },
     },
     {
-      title: '状态',
+      title: intl.get('状态'),
       key: 'status',
       dataIndex: 'status',
       width: 110,
       filters: [
         {
-          text: '运行中',
+          text: intl.get('运行中'),
           value: 0,
         },
         {
-          text: '空闲中',
+          text: intl.get('空闲中'),
           value: 1,
         },
         {
-          text: '已禁用',
+          text: intl.get('已禁用'),
           value: 2,
         },
       ],
@@ -157,7 +158,7 @@ const Subscription = () => {
             <>
               {record.status === SubscriptionStatus.idle && (
                 <Tag icon={<ClockCircleOutlined />} color="default">
-                  空闲中
+                  {intl.get('空闲中')}
                 </Tag>
               )}
               {record.status === SubscriptionStatus.running && (
@@ -165,7 +166,7 @@ const Subscription = () => {
                   icon={<Loading3QuartersOutlined spin />}
                   color="processing"
                 >
-                  运行中
+                  {intl.get('运行中')}
                 </Tag>
               )}
             </>
@@ -173,14 +174,14 @@ const Subscription = () => {
           {record.is_disabled === 1 &&
             record.status === SubscriptionStatus.idle && (
               <Tag icon={<CloseCircleOutlined />} color="error">
-                已禁用
+                {intl.get('已禁用')}
               </Tag>
             )}
         </>
       ),
     },
     {
-      title: '操作',
+      title: intl.get('操作'),
       key: 'action',
       width: 130,
       render: (text: string, record: any, index: number) => {
@@ -188,7 +189,7 @@ const Subscription = () => {
         return (
           <Space size="middle">
             {record.status === SubscriptionStatus.idle && (
-              <Tooltip title={isPc ? '运行' : ''}>
+              <Tooltip title={isPc ? intl.get('运行') : ''}>
                 <a
                   onClick={(e) => {
                     e.stopPropagation();
@@ -200,7 +201,7 @@ const Subscription = () => {
               </Tooltip>
             )}
             {record.status !== SubscriptionStatus.idle && (
-              <Tooltip title={isPc ? '停止' : ''}>
+              <Tooltip title={isPc ? intl.get('停止') : ''}>
                 <a
                   onClick={(e) => {
                     e.stopPropagation();
@@ -211,7 +212,7 @@ const Subscription = () => {
                 </a>
               </Tooltip>
             )}
-            <Tooltip title={isPc ? '日志' : ''}>
+            <Tooltip title={isPc ? intl.get('日志') : ''}>
               <a
                 onClick={(e) => {
                   e.stopPropagation();
@@ -242,14 +243,14 @@ const Subscription = () => {
 
   const runSubscription = (record: any, index: number) => {
     Modal.confirm({
-      title: '确认运行',
+      title: intl.get('确认运行'),
       content: (
         <>
-          确认运行定时任务{' '}
+          {intl.get('确认运行定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -277,14 +278,14 @@ const Subscription = () => {
 
   const stopSubsciption = (record: any, index: number) => {
     Modal.confirm({
-      title: '确认停止',
+      title: intl.get('确认停止'),
       content: (
         <>
-          确认停止定时任务{' '}
+          {intl.get('确认停止定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -336,14 +337,14 @@ const Subscription = () => {
 
   const delSubscription = (record: any, index: number) => {
     Modal.confirm({
-      title: '确认删除',
+      title: intl.get('确认删除'),
       content: (
         <>
-          确认删除定时订阅{' '}
+          {intl.get('确认删除定时订阅')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -369,15 +370,18 @@ const Subscription = () => {
 
   const enabledOrDisabledSubscription = (record: any, index: number) => {
     Modal.confirm({
-      title: `确认${record.is_disabled === 1 ? '启用' : '禁用'}`,
+      title: `确认${
+        record.is_disabled === 1 ? intl.get('启用') : intl.get('禁用')
+      }`,
       content: (
         <>
-          确认{record.is_disabled === 1 ? '启用' : '禁用'}
-          定时订阅{' '}
+          {intl.get('确认')}
+          {record.is_disabled === 1 ? intl.get('启用') : intl.get('禁用')}
+          {intl.get('定时订阅')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -418,9 +422,10 @@ const Subscription = () => {
       trigger={['click']}
       menu={{
         items: [
-          { label: '编辑', key: 'edit', icon: <EditOutlined /> },
+          { label: intl.get('编辑'), key: 'edit', icon: <EditOutlined /> },
           {
-            label: record.is_disabled === 1 ? '启用' : '禁用',
+            label:
+              record.is_disabled === 1 ? intl.get('启用') : intl.get('禁用'),
             key: 'enableOrDisable',
             icon:
               record.is_disabled === 1 ? (
@@ -429,7 +434,7 @@ const Subscription = () => {
                 <StopOutlined />
               ),
           },
-          { label: '删除', key: 'delete', icon: <DeleteOutlined /> },
+          { label: intl.get('删除'), key: 'delete', icon: <DeleteOutlined /> },
         ],
         onClick: ({ key, domEvent }) => {
           domEvent.stopPropagation();
@@ -531,10 +536,10 @@ const Subscription = () => {
   return (
     <PageContainer
       className="ql-container-wrapper subscriptiontab-wrapper"
-      title="订阅管理"
+      title={intl.get('订阅管理')}
       extra={[
         <Search
-          placeholder="请输入名称或者关键词"
+          placeholder={intl.get('请输入名称或者关键词')}
           style={{ width: 'auto' }}
           enterButton
           allowClear
@@ -542,7 +547,7 @@ const Subscription = () => {
           onSearch={onSearch}
         />,
         <Button key="2" type="primary" onClick={() => addSubscription()}>
-          新建订阅
+          {intl.get('创建订阅')}
         </Button>,
       ]}
       header={{

src/pages/subscription/logModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form, Statistic, Button } from 'antd';
 import { request } from '@/utils/http';
@@ -43,7 +44,7 @@ const SubscriptionLogModal = ({
           localStorage.getItem('logSubscription') === String(subscription.id)
         ) {
           const log = data as string;
-          setValue(log || '暂无日志');
+          setValue(log || intl.get('暂无日志'));
           setExecuting(log && !logEnded(log));
           if (log && !logEnded(log)) {
             setTimeout(() => {
@@ -106,7 +107,7 @@ const SubscriptionLogModal = ({
       onCancel={() => cancel()}
       footer={[
         <Button type="primary" onClick={() => cancel()}>
-          知道了
+          {intl.get('知道了')}
         </Button>,
       ]}
     >

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}
           >