支持多语言英文

src/pages/script/editModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState, useRef } from 'react';
 import { Drawer, Button, Tabs, Badge, Select, TreeSelect } from 'antd';
 import { request } from '@/utils/http';
@@ -161,7 +162,7 @@ const EditModal = ({
             value={selectedKey}
             dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
             treeData={treeData}
-            placeholder="请选择脚本文件"
+            placeholder={intl.get('请选择脚本文件')}
             fieldNames={{ value: 'key', label: 'title' }}
             showSearch
             onSelect={onSelect}
@@ -183,7 +184,7 @@ const EditModal = ({
             style={{ marginRight: 8 }}
             onClick={isRunning ? stop : run}
           >
-            {isRunning ? '停止' : '运行'}
+            {isRunning ? intl.get('停止') : intl.get('运行')}
           </Button>
           <Button
             type="primary"
@@ -192,7 +193,7 @@ const EditModal = ({
               setLog('');
             }}
           >
-            清空日志
+            {intl.get('清空日志')}
           </Button>
           <Button
             type="primary"
@@ -201,7 +202,7 @@ const EditModal = ({
               setSettingModalVisible(true);
             }}
           >
-            设置
+            {intl.get('设置')}
           </Button>
           <Button
             type="primary"
@@ -210,7 +211,7 @@ const EditModal = ({
               setSaveModalVisible(true);
             }}
           >
-            保存
+            {intl.get('保存')}
           </Button>
           <Button
             type="primary"
@@ -220,7 +221,7 @@ const EditModal = ({
               handleCancel();
             }}
           >
-            退出
+            {intl.get('退出')}
           </Button>
         </>
       }

src/pages/script/editNameModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import {
   Modal,
@@ -47,7 +48,9 @@ const EditScriptNameModal = ({
       .post(`${config.apiPrefix}scripts`, formData)
       .then(({ code, data }) => {
         if (code === 200) {
-          message.success(directory ? '新建文件夹成功' : '新建文件成功');
+          message.success(
+            directory ? intl.get('创建文件夹成功') : intl.get('创建文件成功'),
+          );
           const key = path ? `${path}/` : '';
           const filename = file ? file.name : inputFilename;
           handleCancel({
@@ -96,7 +99,7 @@ const EditScriptNameModal = ({
 
   return (
     <Modal
-      title="新建"
+      title={intl.get('创建')}
       open={visible}
       forceRender
       centered
@@ -117,58 +120,60 @@ const EditScriptNameModal = ({
       <Form form={form} layout="vertical" name="edit_name_modal">
         <Form.Item
           name="type"
-          label="类型"
+          label={intl.get('类型')}
           rules={[{ required: true }]}
           initialValue={'blank'}
         >
           <Radio.Group onChange={typeChange}>
-            <Radio value="blank">空文件</Radio>
-            <Radio value="upload">本地文件</Radio>
-            <Radio value="directory">文件夹</Radio>
+            <Radio value="blank">{intl.get('空文件')}</Radio>
+            <Radio value="upload">{intl.get('本地文件')}</Radio>
+            <Radio value="directory">{intl.get('文件夹')}</Radio>
           </Radio.Group>
         </Form.Item>
         {type === 'blank' && (
           <Form.Item
             name="filename"
-            label="文件名"
+            label={intl.get('文件名')}
             rules={[
-              { required: true, message: '请输入文件名' },
+              { required: true, message: intl.get('请输入文件名') },
               {
                 validator: (_, value) =>
                   value.includes('/')
-                    ? Promise.reject(new Error('文件名不能包含斜杠'))
+                    ? Promise.reject(new Error(intl.get('文件名不能包含斜杠')))
                     : Promise.resolve(),
               },
             ]}
           >
-            <Input placeholder="请输入文件名" />
+            <Input placeholder={intl.get('请输入文件名')} />
           </Form.Item>
         )}
         {type === 'directory' && (
           <Form.Item
             name="directory"
-            label="文件夹名"
-            rules={[{ required: true, message: '请输入文件夹名' }]}
+            label={intl.get('文件夹名')}
+            rules={[{ required: true, message: intl.get('请输入文件夹名') }]}
           >
-            <Input placeholder="请输入文件夹名" />
+            <Input placeholder={intl.get('请输入文件夹名')} />
           </Form.Item>
         )}
-        <Form.Item label="父目录" name="path">
+        <Form.Item label={intl.get('父目录')} name="path">
           <TreeSelect
             allowClear
             treeData={dirs}
             fieldNames={{ value: 'key', label: 'title' }}
-            placeholder="请选择父目录"
+            placeholder={intl.get('请选择父目录')}
             treeDefaultExpandAll
           />
         </Form.Item>
         {type === 'upload' && (
-          <Form.Item label="文件" name="file">
+          <Form.Item label={intl.get('文件')} name="file">
             <Upload.Dragger beforeUpload={beforeUpload} maxCount={1}>
               <p className="ant-upload-drag-icon">
                 <UploadOutlined />
               </p>
-              <p className="ant-upload-text">点击或者拖拽文件到此区域上传</p>
+              <p className="ant-upload-text">
+                {intl.get('点击或者拖拽文件到此区域上传')}
+              </p>
             </Upload.Dragger>
           </Form.Item>
         )}

src/pages/script/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import { useState, useEffect, useCallback, Key, useRef } from 'react';
 import {
   TreeSelect,
@@ -55,7 +56,7 @@ const LangMap: any = {
 const Script = () => {
   const { headerStyle, isPhone, theme, socketMessage } =
     useOutletContext<SharedContext>();
-  const [value, setValue] = useState('请选择脚本文件');
+  const [value, setValue] = useState(intl.get('请选择脚本文件'));
   const [select, setSelect] = useState<string>('');
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -128,7 +129,7 @@ const Script = () => {
     }
 
     if (node.type === 'directory') {
-      setValue('请选择脚本文件');
+      setValue(intl.get('请选择脚本文件'));
       return;
     }
 
@@ -146,7 +147,7 @@ const Script = () => {
       if (content !== value) {
         Modal.confirm({
           title: `确认离开`,
-          content: <>当前修改未保存，确定离开吗</>,
+          content: <>{intl.get('当前修改未保存，确定离开吗')}</>,
           onOk() {
             onSelect(keys[0], e.node);
             setIsEditing(false);
@@ -209,11 +210,11 @@ const Script = () => {
       title: `确认保存`,
       content: (
         <>
-          确认保存文件
+          {intl.get('确认保存文件')}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {currentNode.title}
           </Text>{' '}
-          ，保存后不可恢复
+          {intl.get('，保存后不可恢复')}
         </>
       ),
       onOk() {
@@ -249,12 +250,13 @@ const Script = () => {
       title: `确认删除`,
       content: (
         <>
-          确认删除
+          {intl.get('确认删除')}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {select}
           </Text>
-          文件{currentNode.type === 'directory' ? '夹及其子文件' : ''}
-          ，删除后不可恢复
+          {intl.get('文件')}
+          {currentNode.type === 'directory' ? intl.get('夹及其子文件') : ''}
+          {intl.get('，删除后不可恢复')}
         </>
       ),
       onOk() {
@@ -358,7 +360,7 @@ const Script = () => {
   const initState = () => {
     setSelect('');
     setCurrentNode(null);
-    setValue('请选择脚本文件');
+    setValue(intl.get('请选择脚本文件'));
   };
 
   useEffect(() => {
@@ -406,8 +408,8 @@ const Script = () => {
   const menu: MenuProps = isEditing
     ? {
         items: [
-          { label: '保存', key: 'save', icon: <PlusOutlined /> },
-          { label: '退出编辑', key: 'exit', icon: <EditOutlined /> },
+          { label: intl.get('保存'), key: 'save', icon: <PlusOutlined /> },
+          { label: intl.get('退出编辑'), key: 'exit', icon: <EditOutlined /> },
         ],
         onClick: ({ key, domEvent }) => {
           domEvent.stopPropagation();
@@ -416,21 +418,21 @@ const Script = () => {
       }
     : {
         items: [
-          { label: '新建', key: 'add', icon: <PlusOutlined /> },
+          { label: intl.get('创建'), key: 'add', icon: <PlusOutlined /> },
           {
-            label: '编辑',
+            label: intl.get('编辑'),
             key: 'edit',
             icon: <EditOutlined />,
             disabled: !select,
           },
           {
-            label: '重命名',
+            label: intl.get('重命名'),
             key: 'rename',
             icon: <IconFont type="ql-icon-rename" />,
             disabled: !select,
           },
           {
-            label: '删除',
+            label: intl.get('删除'),
             key: 'delete',
             icon: <DeleteOutlined />,
             disabled: !select,
@@ -456,7 +458,7 @@ const Script = () => {
                 value={select}
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={data}
-                placeholder="请选择脚本"
+                placeholder={intl.get('请选择脚本')}
                 fieldNames={{ value: 'key' }}
                 treeNodeFilterProp="title"
                 showSearch
@@ -470,21 +472,21 @@ const Script = () => {
           : isEditing
           ? [
               <Button type="primary" onClick={saveFile}>
-                保存
+                {intl.get('保存')}
               </Button>,
               <Button type="primary" onClick={cancelEdit}>
-                退出编辑
+                {intl.get('退出编辑')}
               </Button>,
             ]
           : [
-              <Tooltip title="新建">
+              <Tooltip title={intl.get('创建')}>
                 <Button
                   type="primary"
                   onClick={addFile}
                   icon={<PlusOutlined />}
                 />
               </Tooltip>,
-              <Tooltip title="编辑">
+              <Tooltip title={intl.get('编辑')}>
                 <Button
                   disabled={!select}
                   type="primary"
@@ -492,7 +494,7 @@ const Script = () => {
                   icon={<EditOutlined />}
                 />
               </Tooltip>,
-              <Tooltip title="重命名">
+              <Tooltip title={intl.get('重命名')}>
                 <Button
                   disabled={!select}
                   type="primary"
@@ -500,7 +502,7 @@ const Script = () => {
                   icon={<IconFont type="ql-icon-rename" />}
                 />
               </Tooltip>,
-              <Tooltip title="删除">
+              <Tooltip title={intl.get('删除')}>
                 <Button
                   type="primary"
                   disabled={!select}
@@ -514,7 +516,7 @@ const Script = () => {
                   setIsLogModalVisible(true);
                 }}
               >
-                调试
+                {intl.get('调试')}
               </Button>,
             ]
       }
@@ -532,7 +534,7 @@ const Script = () => {
                   <Input.Search
                     className={styles['left-tree-search']}
                     onChange={onSearch}
-                    placeholder="请输入脚本名"
+                    placeholder={intl.get('请输入脚本名')}
                     allowClear
                   ></Input.Search>
                   <div className={styles['left-tree-scroller']} ref={treeDom}>
@@ -560,7 +562,7 @@ const Script = () => {
                   }}
                 >
                   <Empty
-                    description="暂无脚本"
+                    description={intl.get('暂无脚本')}
                     image={Empty.PRESENTED_IMAGE_SIMPLE}
                   />
                 </div>

src/pages/script/renameModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form } from 'antd';
 import { request } from '@/utils/http';
@@ -43,7 +44,7 @@ const RenameModal = ({
 
   return (
     <Modal
-      title="重命名"
+      title={intl.get('重命名')}
       open={visible}
       forceRender
       centered
@@ -64,9 +65,9 @@ const RenameModal = ({
       <Form form={form} layout="vertical" name="edit_name_modal">
         <Form.Item
           name="name"
-          rules={[{ required: true, message: '请输入新名称' }]}
+          rules={[{ required: true, message: intl.get('请输入新名称') }]}
         >
-          <Input placeholder="请输入新名称" />
+          <Input placeholder={intl.get('请输入新名称')} />
         </Form.Item>
       </Form>
     </Modal>

src/pages/script/saveModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form } from 'antd';
 import { request } from '@/utils/http';
@@ -36,7 +37,7 @@ const SaveModal = ({
 
   return (
     <Modal
-      title="保存文件"
+      title={intl.get('保存文件')}
       open={visible}
       forceRender
       centered
@@ -62,13 +63,13 @@ const SaveModal = ({
       >
         <Form.Item
           name="filename"
-          label="文件名"
-          rules={[{ required: true, message: '请输入文件名' }]}
+          label={intl.get('文件名')}
+          rules={[{ required: true, message: intl.get('请输入文件名') }]}
         >
-          <Input placeholder="请输入文件名" />
+          <Input placeholder={intl.get('请输入文件名')} />
         </Form.Item>
-        <Form.Item name="path" label="保存目录">
-          <Input placeholder="请输入保存目录，默认scripts目录" />
+        <Form.Item name="path" label={intl.get('保存目录')}>
+          <Input placeholder={intl.get('请输入保存目录，默认scripts目录')} />
         </Form.Item>
       </Form>
     </Modal>

src/pages/script/setting.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form } from 'antd';
 import { request } from '@/utils/http';
@@ -36,7 +37,7 @@ const SettingModal = ({
 
   return (
     <Modal
-      title="运行设置"
+      title={intl.get('运行设置')}
       open={visible}
       forceRender
       centered
@@ -50,10 +51,10 @@ const SettingModal = ({
       >
         <Form.Item
           name="filename"
-          label="待开发"
-          rules={[{ required: true, message: '待开发' }]}
+          label={intl.get('待开发')}
+          rules={[{ required: true, message: intl.get('待开发') }]}
         >
-          <Input placeholder="待开发" />
+          <Input placeholder={intl.get('待开发')} />
         </Form.Item>
       </Form>
     </Modal>