支持多语言英文

src/pages/dependence/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import {
   Button,
@@ -90,20 +91,22 @@ const Dependence = () => {
     useOutletContext<SharedContext>();
   const columns: any = [
     {
-      title: '序号',
-      width: 50,
+      title: intl.get('序号'),
+      width: 80,
       render: (text: string, record: any, index: number) => {
         return <span style={{ cursor: 'text' }}>{index + 1} </span>;
       },
     },
     {
-      title: '名称',
+      title: intl.get('名称'),
       dataIndex: 'name',
+      width: 120,
       key: 'name',
     },
     {
-      title: '状态',
+      title: intl.get('状态'),
       key: 'status',
+      width: 100,
       dataIndex: 'status',
       render: (text: string, record: any, index: number) => {
         return (
@@ -113,41 +116,45 @@ const Dependence = () => {
               icon={StatusMap[record.status].icon}
               style={{ marginRight: 0 }}
             >
-              {Status[record.status]}
+              {intl.get(Status[record.status])}
             </Tag>
           </Space>
         );
       },
     },
     {
-      title: '备注',
+      title: intl.get('备注'),
       dataIndex: 'remark',
+      width: 120,
       key: 'remark',
     },
     {
-      title: '更新时间',
+      title: intl.get('更新时间'),
       key: 'updatedAt',
       dataIndex: 'updatedAt',
+      width: 150,
       render: (text: string) => {
         return <span>{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>;
       },
     },
     {
-      title: '创建时间',
+      title: intl.get('创建时间'),
       key: 'createdAt',
       dataIndex: 'createdAt',
+      width: 150,
       render: (text: string) => {
         return <span>{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>;
       },
     },
     {
-      title: '操作',
+      title: intl.get('操作'),
       key: 'action',
+      width: 150,
       render: (text: string, record: any, index: number) => {
         const isPc = !isPhone;
         return (
           <Space size="middle">
-            <Tooltip title={isPc ? '日志' : ''}>
+            <Tooltip title={isPc ? intl.get('日志') : ''}>
               <a
                 onClick={() => {
                   setLogDependence({ ...record, timestamp: Date.now() });
@@ -159,17 +166,17 @@ const Dependence = () => {
             {record.status !== Status.安装中 &&
               record.status !== Status.删除中 && (
                 <>
-                  <Tooltip title={isPc ? '重新安装' : ''}>
+                  <Tooltip title={isPc ? intl.get('重新安装') : ''}>
                     <a onClick={() => reInstallDependence(record, index)}>
                       <BugOutlined />
                     </a>
                   </Tooltip>
-                  <Tooltip title={isPc ? '删除' : ''}>
+                  <Tooltip title={isPc ? intl.get('删除') : ''}>
                     <a onClick={() => deleteDependence(record, index)}>
                       <DeleteOutlined />
                     </a>
                   </Tooltip>
-                  <Tooltip title={isPc ? '强制删除' : ''}>
+                  <Tooltip title={isPc ? intl.get('强制删除') : ''}>
                     <a onClick={() => deleteDependence(record, index, true)}>
                       <DeleteFilled />
                     </a>
@@ -223,14 +230,14 @@ const Dependence = () => {
     force: boolean = false,
   ) => {
     Modal.confirm({
-      title: '确认删除',
+      title: intl.get('确认删除'),
       content: (
         <>
-          确认删除依赖{' '}
+          {intl.get('确认删除依赖')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -257,14 +264,14 @@ const Dependence = () => {
 
   const reInstallDependence = (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() {
@@ -314,8 +321,8 @@ const Dependence = () => {
   const delDependencies = (force: boolean) => {
     const forceUrl = force ? '/force' : '';
     Modal.confirm({
-      title: '确认删除',
-      content: <>确认删除选中的依赖吗</>,
+      title: intl.get('确认删除'),
+      content: <>{intl.get('确认删除选中的依赖吗')}</>,
       onOk() {
         request
           .delete(`${config.apiPrefix}dependencies${forceUrl}`, {
@@ -336,8 +343,8 @@ const Dependence = () => {
 
   const handlereInstallDependencies = () => {
     Modal.confirm({
-      title: '确认重新安装',
-      content: <>确认重新安装选中的依赖吗</>,
+      title: intl.get('确认重新安装'),
+      content: <>{intl.get('确认重新安装选中的依赖吗')}</>,
       onOk() {
         request
           .put(`${config.apiPrefix}dependencies/reinstall`, selectedRowIds)
@@ -454,17 +461,17 @@ const Dependence = () => {
   return (
     <PageContainer
       className="ql-container-wrapper dependence-wrapper ql-container-wrapper-has-tab"
-      title="依赖管理"
+      title={intl.get('依赖管理')}
       extra={[
         <Search
-          placeholder="请输入名称"
+          placeholder={intl.get('请输入名称')}
           style={{ width: 'auto' }}
           enterButton
           loading={loading}
           onSearch={onSearch}
         />,
         <Button key="2" type="primary" onClick={() => addDependence()}>
-          新建依赖
+          {intl.get('创建依赖')}
         </Button>,
       ]}
       header={{
@@ -499,25 +506,26 @@ const Dependence = () => {
               style={{ marginBottom: 5, marginLeft: 8 }}
               onClick={() => handlereInstallDependencies()}
             >
-              批量安装
+              {intl.get('批量安装')}
             </Button>
             <Button
               type="primary"
               style={{ marginBottom: 5, marginLeft: 8 }}
               onClick={() => delDependencies(false)}
             >
-              批量删除
+              {intl.get('批量删除')}
             </Button>
             <Button
               type="primary"
               style={{ marginBottom: 5, marginLeft: 8 }}
               onClick={() => delDependencies(true)}
             >
-              批量强制删除
+              {intl.get('批量强制删除')}
             </Button>
             <span style={{ marginLeft: 8 }}>
-              已选择
-              <a>{selectedRowIds?.length}</a>项
+              {intl.get('已选择')}
+              <a>{selectedRowIds?.length}</a>
+              {intl.get('项')}
             </span>
           </div>
         )}

src/pages/dependence/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';
@@ -38,7 +39,7 @@ const DependenceLogModal = ({
         {executing && <Loading3QuartersOutlined spin />}
         {!executing && <CheckCircleOutlined />}
         <span style={{ marginLeft: 5 }}>
-          日志 - {dependence && dependence.name}
+          {intl.get('日志 -')} {dependence && dependence.name}
         </span>{' '}
       </>
     );
@@ -130,7 +131,7 @@ const DependenceLogModal = ({
       onCancel={() => cancel()}
       footer={[
         <Button type="primary" onClick={footerClick} loading={removeLoading}>
-          {isRemoveFailed ? '强制删除' : '知道了'}
+          {isRemoveFailed ? intl.get('强制删除') : intl.get('知道了')}
         </Button>,
       ]}
     >

src/pages/dependence/modal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form, Radio, Select } from 'antd';
 import { request } from '@/utils/http';
@@ -66,7 +67,7 @@ const DependenceModal = ({
 
   return (
     <Modal
-      title={dependence ? '编辑依赖' : '新建依赖'}
+      title={dependence ? intl.get('编辑依赖') : intl.get('创建依赖')}
       open={visible}
       forceRender
       centered
@@ -92,7 +93,7 @@ const DependenceModal = ({
       >
         <Form.Item
           name="type"
-          label="依赖类型"
+          label={intl.get('依赖类型')}
           initialValue={DependenceTypes[defaultType as any]}
         >
           <Select>
@@ -106,23 +107,23 @@ const DependenceModal = ({
         {!dependence && (
           <Form.Item
             name="split"
-            label="自动拆分"
+            label={intl.get('自动拆分')}
             initialValue="0"
-            tooltip="多个依赖是否换行分割"
+            tooltip={intl.get('多个依赖是否换行分割')}
           >
             <Radio.Group>
-              <Radio value="1">是</Radio>
-              <Radio value="0">否</Radio>
+              <Radio value="1">{intl.get('是')}</Radio>
+              <Radio value="0">{intl.get('否')}</Radio>
             </Radio.Group>
           </Form.Item>
         )}
         <Form.Item
           name="name"
-          label="名称"
+          label={intl.get('名称')}
           rules={[
             {
               required: true,
-              message: '请输入依赖名称，支持指定版本',
+              message: intl.get('请输入依赖名称，支持指定版本'),
               whitespace: true,
             },
           ]}
@@ -130,11 +131,11 @@ const DependenceModal = ({
           <Input.TextArea
             rows={4}
             autoSize={true}
-            placeholder="请输入依赖名称"
+            placeholder={intl.get('请输入依赖名称')}
           />
         </Form.Item>
-        <Form.Item name="remark" label="备注">
-          <Input placeholder="请输入备注" />
+        <Form.Item name="remark" label={intl.get('备注')}>
+          <Input placeholder={intl.get('请输入备注')} />
         </Form.Item>
       </Form>
     </Modal>