支持多语言英文

src/pages/crontab/viewCreateModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import {
   Modal,
@@ -17,11 +18,11 @@ import get from 'lodash/get';
 import { CrontabStatus } from './type';
 
 const PROPERTIES = [
-  { name: '命令', value: 'command' },
-  { name: '名称', value: 'name' },
-  { name: '定时规则', value: 'schedule' },
-  { name: '状态', value: 'status' },
-  { name: '标签', value: 'labels' },
+  { name: intl.get('命令'), value: 'command' },
+  { name: intl.get('名称'), value: 'name' },
+  { name: intl.get('定时规则'), value: 'schedule' },
+  { name: intl.get('状态'), value: 'status' },
+  { name: intl.get('标签'), value: 'labels' },
 ];
 
 const EOperation: any = {
@@ -31,10 +32,10 @@ const EOperation: any = {
   Nin: 'select',
 };
 const OPERATIONS = [
-  { name: '包含', value: 'Reg' },
-  { name: '不包含', value: 'NotReg' },
-  { name: '属于', value: 'In', type: 'select' },
-  { name: '不属于', value: 'Nin', type: 'select' },
+  { name: intl.get('包含'), value: 'Reg' },
+  { name: intl.get('不包含'), value: 'NotReg' },
+  { name: intl.get('属于'), value: 'In', type: 'select' },
+  { name: intl.get('不属于'), value: 'Nin', type: 'select' },
   // { name: '等于', value: 'Eq' },
   // { name: '不等于', value: 'Ne' },
   // { name: '为空', value: 'IsNull' },
@@ -42,15 +43,15 @@ const OPERATIONS = [
 ];
 
 const SORTTYPES = [
-  { name: '顺序', value: 'ASC' },
-  { name: '倒序', value: 'DESC' },
+  { name: intl.get('顺序'), value: 'ASC' },
+  { name: intl.get('倒序'), value: 'DESC' },
 ];
 
 const STATUS_MAP = {
   status: [
-    { name: '运行中', value: CrontabStatus.running },
-    { name: '空闲中', value: CrontabStatus.idle },
-    { name: '已禁用', value: CrontabStatus.disabled },
+    { name: intl.get('运行中'), value: CrontabStatus.running },
+    { name: intl.get('空闲中'), value: CrontabStatus.idle },
+    { name: intl.get('已禁用'), value: CrontabStatus.disabled },
   ],
 };
 
@@ -137,7 +138,11 @@ const ViewCreateModal = ({
 
   const statusElement = (property: keyof typeof STATUS_MAP) => {
     return (
-      <Select mode="tags" allowClear placeholder="输入后回车增加自定义选项">
+      <Select
+        mode="tags"
+        allowClear
+        placeholder={intl.get('输入后回车增加自定义选项')}
+      >
         {STATUS_MAP[property]?.map((x) => (
           <Select.Option key={x.name} value={x.value}>
             {x.name}
@@ -149,7 +154,7 @@ const ViewCreateModal = ({
 
   return (
     <Modal
-      title={view ? '编辑视图' : '新建视图'}
+      title={view ? intl.get('编辑视图') : intl.get('创建视图')}
       open={visible}
       forceRender
       width={580}
@@ -171,10 +176,10 @@ const ViewCreateModal = ({
       <Form form={form} layout="vertical" name="env_modal">
         <Form.Item
           name="name"
-          label="视图名称"
-          rules={[{ required: true, message: '请输入视图名称' }]}
+          label={intl.get('视图名称')}
+          rules={[{ required: true, message: intl.get('请输入视图名称') }]}
         >
-          <Input placeholder="请输入视图名称" />
+          <Input placeholder={intl.get('请输入视图名称')} />
         </Form.Item>
         <Form.List name="filters">
           {(fields, { add, remove }) => (
@@ -223,7 +228,7 @@ const ViewCreateModal = ({
               <div>
                 {fields.map(({ key, name, ...restField }) => (
                   <Form.Item
-                    label={name === 0 ? '筛选条件' : ''}
+                    label={name === 0 ? intl.get('筛选条件') : ''}
                     key={key}
                     style={{ marginBottom: 0 }}
                     required
@@ -250,13 +255,15 @@ const ViewCreateModal = ({
                       <Form.Item
                         {...restField}
                         name={[name, 'value']}
-                        rules={[{ required: true, message: '请输入内容' }]}
+                        rules={[
+                          { required: true, message: intl.get('请输入内容') },
+                        ]}
                       >
                         {EOperation[filtersValue?.[name]['operation']] ===
                         'select' ? (
                           statusElement(filtersValue?.[name]['property'])
                         ) : (
-                          <Input placeholder="请输入内容" />
+                          <Input placeholder={intl.get('请输入内容')} />
                         )}
                       </Form.Item>
                       {name !== 0 && (
@@ -272,7 +279,7 @@ const ViewCreateModal = ({
                     }
                   >
                     <PlusOutlined />
-                    新增筛选条件
+                    {intl.get('新增筛选条件')}
                   </a>
                 </Form.Item>
               </div>
@@ -320,7 +327,7 @@ const ViewCreateModal = ({
               <div>
                 {fields.map(({ key, name, ...restField }) => (
                   <Form.Item
-                    label={name === 0 ? '排序方式' : ''}
+                    label={name === 0 ? intl.get('排序方式') : ''}
                     key={key}
                     style={{ marginBottom: 0 }}
                     className="filter-item"
@@ -347,7 +354,7 @@ const ViewCreateModal = ({
                 <Form.Item>
                   <a onClick={() => add({ property: 'command', type: 'ASC' })}>
                     <PlusOutlined />
-                    新增排序方式
+                    {intl.get('新增排序方式')}
                   </a>
                 </Form.Item>
               </div>