支持多语言英文

src/pages/404.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React from 'react';
 import { Button, Result, Typography } from 'antd';
 
@@ -9,7 +10,7 @@ const NotFound: React.FC = () => (
     title="404"
     extra={
       <Button type="primary">
-        <Link href="/">返回首页</Link>
+        <Link href="/">{intl.get('返回首页')}</Link>
       </Button>
     }
   />

src/pages/config/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal'
 import React, {
   PureComponent,
   Fragment,
@@ -93,7 +94,7 @@ const Config = () => {
           type="primary"
           onClick={updateConfig}
         >
-          保存
+          {intl.get('保存')}
         </Button>,
       ]}
       header={{

src/pages/crontab/detail.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   Modal,
@@ -38,11 +39,11 @@ const { Text } = Typography;
 const tabList = [
   {
     key: 'log',
-    tab: '日志',
+    tab: intl.get('日志'),
   },
   {
     key: 'script',
-    tab: '脚本',
+    tab: intl.get('脚本'),
   },
 ];
 const LangMap: any = {
@@ -181,11 +182,11 @@ const CronDetailModal = ({
       title: `确认保存`,
       content: (
         <>
-          确认保存文件
+          {intl.get('确认保存文件')}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {scriptInfo.filename}
           </Text>{' '}
-          ，保存后不可恢复
+          {intl.get('，保存后不可恢复')}
         </>
       ),
       onOk() {
@@ -217,14 +218,14 @@ const CronDetailModal = ({
 
   const runCron = () => {
     Modal.confirm({
-      title: '确认运行',
+      title: intl.get('确认运行'),
       content: (
         <>
-          确认运行定时任务{' '}
+          {intl.get('确认运行定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {currentCron.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -247,14 +248,14 @@ const CronDetailModal = ({
 
   const stopCron = () => {
     Modal.confirm({
-      title: '确认停止',
+      title: intl.get('确认停止'),
       content: (
         <>
-          确认停止定时任务{' '}
+          {intl.get('确认停止定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {currentCron.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -274,15 +275,18 @@ const CronDetailModal = ({
 
   const enabledOrDisabledCron = () => {
     Modal.confirm({
-      title: `确认${currentCron.isDisabled === 1 ? '启用' : '禁用'}`,
+      title: `确认${
+        currentCron.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')
+      }`,
       content: (
         <>
-          确认{currentCron.isDisabled === 1 ? '启用' : '禁用'}
-          定时任务{' '}
+          {intl.get('确认')}
+          {currentCron.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')}
+          {intl.get('定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {currentCron.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -310,15 +314,18 @@ const CronDetailModal = ({
 
   const pinOrUnPinCron = () => {
     Modal.confirm({
-      title: `确认${currentCron.isPinned === 1 ? '取消置顶' : '置顶'}`,
+      title: `确认${
+        currentCron.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')
+      }`,
       content: (
         <>
-          确认{currentCron.isPinned === 1 ? '取消置顶' : '置顶'}
-          定时任务{' '}
+          {intl.get('确认')}
+          {currentCron.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')}
+          {intl.get('定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {currentCron.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -378,7 +385,9 @@ const CronDetailModal = ({
           <div className="operations">
             <Tooltip
               title={
-                currentCron.status === CrontabStatus.idle ? '运行' : '停止'
+                currentCron.status === CrontabStatus.idle
+                  ? intl.get('运行')
+                  : intl.get('停止')
               }
             >
               <Button
@@ -396,7 +405,13 @@ const CronDetailModal = ({
                 }
               />
             </Tooltip>
-            <Tooltip title={currentCron.isDisabled === 1 ? '启用' : '禁用'}>
+            <Tooltip
+              title={
+                currentCron.isDisabled === 1
+                  ? intl.get('启用')
+                  : intl.get('禁用')
+              }
+            >
               <Button
                 type="link"
                 icon={
@@ -412,7 +427,13 @@ const CronDetailModal = ({
                 onClick={enabledOrDisabledCron}
               />
             </Tooltip>
-            <Tooltip title={currentCron.isPinned === 1 ? '取消置顶' : '置顶'}>
+            <Tooltip
+              title={
+                currentCron.isPinned === 1
+                  ? intl.get('取消置顶')
+                  : intl.get('置顶')
+              }
+            >
               <Button
                 type="link"
                 icon={
@@ -442,20 +463,20 @@ const CronDetailModal = ({
       <div className="card-wrapper">
         <Card>
           <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">任务</div>
+            <div className="cron-detail-info-title">{intl.get('任务')}</div>
             <div className="cron-detail-info-value">{currentCron.command}</div>
           </div>
         </Card>
         <Card style={{ marginTop: 10 }}>
           <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">状态</div>
+            <div className="cron-detail-info-title">{intl.get('状态')}</div>
             <div className="cron-detail-info-value">
               {(!currentCron.isDisabled ||
                 currentCron.status !== CrontabStatus.idle) && (
                 <>
                   {currentCron.status === CrontabStatus.idle && (
                     <Tag icon={<ClockCircleOutlined />} color="default">
-                      空闲中
+                      {intl.get('空闲中')}
                     </Tag>
                   )}
                   {currentCron.status === CrontabStatus.running && (
@@ -463,12 +484,12 @@ const CronDetailModal = ({
                       icon={<Loading3QuartersOutlined spin />}
                       color="processing"
                     >
-                      运行中
+                      {intl.get('运行中')}
                     </Tag>
                   )}
                   {currentCron.status === CrontabStatus.queued && (
                     <Tag icon={<FieldTimeOutlined />} color="default">
-                      队列中
+                      {intl.get('队列中')}
                     </Tag>
                   )}
                 </>
@@ -476,17 +497,19 @@ const CronDetailModal = ({
               {currentCron.isDisabled === 1 &&
                 currentCron.status === CrontabStatus.idle && (
                   <Tag icon={<CloseCircleOutlined />} color="error">
-                    已禁用
+                    {intl.get('已禁用')}
                   </Tag>
                 )}
             </div>
           </div>
           <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">定时</div>
+            <div className="cron-detail-info-title">{intl.get('定时')}</div>
             <div className="cron-detail-info-value">{currentCron.schedule}</div>
           </div>
           <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">最后运行时间</div>
+            <div className="cron-detail-info-title">
+              {intl.get('最后运行时间')}
+            </div>
             <div className="cron-detail-info-value">
               {currentCron.last_execution_time
                 ? new Date(currentCron.last_execution_time * 1000)
@@ -498,7 +521,9 @@ const CronDetailModal = ({
             </div>
           </div>
           <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">最后运行时长</div>
+            <div className="cron-detail-info-title">
+              {intl.get('最后运行时长')}
+            </div>
             <div className="cron-detail-info-value">
               {currentCron.last_running_time
                 ? diffTime(currentCron.last_running_time)
@@ -506,7 +531,9 @@ const CronDetailModal = ({
             </div>
           </div>
           <div className="cron-detail-info-item">
-            <div className="cron-detail-info-title">下次运行时间</div>
+            <div className="cron-detail-info-title">
+              {intl.get('下次运行时间')}
+            </div>
             <div className="cron-detail-info-value">
               {currentCron.nextRunTime &&
                 currentCron.nextRunTime
@@ -532,7 +559,7 @@ const CronDetailModal = ({
                   style={{ marginRight: 8 }}
                   onClick={saveFile}
                 >
-                  保存
+                  {intl.get('保存')}
                 </Button>
                 <Button
                   type="primary"

src/pages/crontab/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import {
   Button,
@@ -63,10 +64,10 @@ const Crontab = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
   const columns: ColumnProps<ICrontab>[] = [
     {
-      title: '名称',
+      title: intl.get('名称'),
       dataIndex: 'name',
       key: 'name',
-      width: 150,
+      width: 120,
       render: (text: string, record: any) => (
         <>
           <a
@@ -118,10 +119,10 @@ const Crontab = () => {
       },
     },
     {
-      title: '命令/脚本',
+      title: intl.get('命令/脚本'),
       dataIndex: 'command',
       key: 'command',
-      width: 300,
+      width: 240,
       render: (text, record) => {
         return (
           <Paragraph
@@ -146,19 +147,35 @@ const Crontab = () => {
       },
     },
     {
-      title: '定时规则',
+      title: intl.get('定时规则'),
       dataIndex: 'schedule',
       key: 'schedule',
-      width: 110,
+      width: 140,
       sorter: {
         compare: (a, b) => a.schedule.localeCompare(b.schedule),
       },
     },
     {
-      title: '最后运行时间',
+      title: intl.get('最后运行时长'),
+      width: 150,
+      dataIndex: 'last_running_time',
+      key: 'last_running_time',
+      sorter: {
+        compare: (a: any, b: any) => {
+          return a.last_running_time - b.last_running_time;
+        },
+      },
+      render: (text, record) => {
+        return record.last_running_time
+          ? diffTime(record.last_running_time)
+          : '-';
+      },
+    },
+    {
+      title: intl.get('最后运行时间'),
       dataIndex: 'last_execution_time',
       key: 'last_execution_time',
-      width: 150,
+      width: 120,
       sorter: {
         compare: (a, b) => {
           return (a.last_execution_time || 0) - (b.last_execution_time || 0);
@@ -184,24 +201,8 @@ const Crontab = () => {
       },
     },
     {
-      title: '最后运行时长',
+      title: intl.get('下次运行时间'),
       width: 120,
-      dataIndex: 'last_running_time',
-      key: 'last_running_time',
-      sorter: {
-        compare: (a: any, b: any) => {
-          return a.last_running_time - b.last_running_time;
-        },
-      },
-      render: (text, record) => {
-        return record.last_running_time
-          ? diffTime(record.last_running_time)
-          : '-';
-      },
-    },
-    {
-      title: '下次运行时间',
-      width: 150,
       sorter: {
         compare: (a: any, b: any) => {
           return a.nextRunTime - b.nextRunTime;
@@ -217,25 +218,25 @@ const Crontab = () => {
       },
     },
     {
-      title: '状态',
+      title: intl.get('状态'),
       key: 'status',
       dataIndex: 'status',
       width: 88,
       filters: [
         {
-          text: '运行中',
+          text: intl.get('运行中'),
           value: CrontabStatus.running,
         },
         {
-          text: '空闲中',
+          text: intl.get('空闲中'),
           value: CrontabStatus.idle,
         },
         {
-          text: '已禁用',
+          text: intl.get('已禁用'),
           value: CrontabStatus.disabled,
         },
         {
-          text: '队列中',
+          text: intl.get('队列中'),
           value: CrontabStatus.queued,
         },
       ],
@@ -245,7 +246,7 @@ const Crontab = () => {
             <>
               {record.status === CrontabStatus.idle && (
                 <Tag icon={<ClockCircleOutlined />} color="default">
-                  空闲中
+                  {intl.get('空闲中')}
                 </Tag>
               )}
               {record.status === CrontabStatus.running && (
@@ -253,26 +254,26 @@ const Crontab = () => {
                   icon={<Loading3QuartersOutlined spin />}
                   color="processing"
                 >
-                  运行中
+                  {intl.get('运行中')}
                 </Tag>
               )}
               {record.status === CrontabStatus.queued && (
                 <Tag icon={<FieldTimeOutlined />} color="default">
-                  队列中
+                  {intl.get('队列中')}
                 </Tag>
               )}
             </>
           )}
           {record.isDisabled === 1 && record.status === CrontabStatus.idle && (
             <Tag icon={<CloseCircleOutlined />} color="error">
-              已禁用
+              {intl.get('已禁用')}
             </Tag>
           )}
         </>
       ),
     },
     {
-      title: '操作',
+      title: intl.get('操作'),
       key: 'action',
       width: 130,
       render: (text, record, index) => {
@@ -280,7 +281,7 @@ const Crontab = () => {
         return (
           <Space size="middle">
             {record.status === CrontabStatus.idle && (
-              <Tooltip title={isPc ? '运行' : ''}>
+              <Tooltip title={isPc ? intl.get('运行') : ''}>
                 <a
                   onClick={(e) => {
                     e.stopPropagation();
@@ -292,7 +293,7 @@ const Crontab = () => {
               </Tooltip>
             )}
             {record.status !== CrontabStatus.idle && (
-              <Tooltip title={isPc ? '停止' : ''}>
+              <Tooltip title={isPc ? intl.get('停止') : ''}>
                 <a
                   onClick={(e) => {
                     e.stopPropagation();
@@ -303,7 +304,7 @@ const Crontab = () => {
                 </a>
               </Tooltip>
             )}
-            <Tooltip title={isPc ? '日志' : ''}>
+            <Tooltip title={isPc ? intl.get('日志') : ''}>
               <a
                 onClick={(e) => {
                   e.stopPropagation();
@@ -412,14 +413,14 @@ const Crontab = () => {
 
   const delCron = (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() {
@@ -445,14 +446,14 @@ const Crontab = () => {
 
   const runCron = (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() {
@@ -480,14 +481,14 @@ const Crontab = () => {
 
   const stopCron = (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() {
@@ -516,15 +517,18 @@ const Crontab = () => {
 
   const enabledOrDisabledCron = (record: any, index: number) => {
     Modal.confirm({
-      title: `确认${record.isDisabled === 1 ? '启用' : '禁用'}`,
+      title: `确认${
+        record.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')
+      }`,
       content: (
         <>
-          确认{record.isDisabled === 1 ? '启用' : '禁用'}
-          定时任务{' '}
+          {intl.get('确认')}
+          {record.isDisabled === 1 ? intl.get('启用') : intl.get('禁用')}
+          {intl.get('定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -558,15 +562,18 @@ const Crontab = () => {
 
   const pinOrUnPinCron = (record: any, index: number) => {
     Modal.confirm({
-      title: `确认${record.isPinned === 1 ? '取消置顶' : '置顶'}`,
+      title: `确认${
+        record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')
+      }`,
       content: (
         <>
-          确认{record.isPinned === 1 ? '取消置顶' : '置顶'}
-          定时任务{' '}
+          {intl.get('确认')}
+          {record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')}
+          {intl.get('定时任务')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -600,16 +607,16 @@ const Crontab = () => {
 
   const getMenuItems = (record: any) => {
     return [
-      { label: '编辑', key: 'edit', icon: <EditOutlined /> },
+      { label: intl.get('编辑'), key: 'edit', icon: <EditOutlined /> },
       {
-        label: record.isDisabled === 1 ? '启用' : '禁用',
+        label: record.isDisabled === 1 ? intl.get('启用') : intl.get('禁用'),
         key: 'enableOrDisable',
         icon:
           record.isDisabled === 1 ? <CheckCircleOutlined /> : <StopOutlined />,
       },
-      { label: '删除', key: 'delete', icon: <DeleteOutlined /> },
+      { label: intl.get('删除'), key: 'delete', icon: <DeleteOutlined /> },
       {
-        label: record.isPinned === 1 ? '取消置顶' : '置顶',
+        label: record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶'),
         key: 'pinOrUnPin',
         icon: record.isPinned === 1 ? <StopOutlined /> : <PushpinOutlined />,
       },
@@ -696,8 +703,8 @@ const Crontab = () => {
 
   const delCrons = () => {
     Modal.confirm({
-      title: '确认删除',
-      content: <>确认删除选中的定时任务吗</>,
+      title: intl.get('确认删除'),
+      content: <>{intl.get('确认删除选中的定时任务吗')}</>,
       onOk() {
         request
           .delete(`${config.apiPrefix}crons`, { data: selectedRowIds })
@@ -718,7 +725,13 @@ const Crontab = () => {
   const operateCrons = (operationStatus: number) => {
     Modal.confirm({
       title: `确认${OperationName[operationStatus]}`,
-      content: <>确认{OperationName[operationStatus]}选中的定时任务吗</>,
+      content: (
+        <>
+          {intl.get('确认')}
+          {OperationName[operationStatus]}
+          {intl.get('选中的定时任务吗')}
+        </>
+      ),
       onOk() {
         request
           .put(
@@ -821,12 +834,12 @@ const Crontab = () => {
         type: 'divider' as 'group',
       },
       {
-        label: '新建视图',
+        label: intl.get('创建视图'),
         key: 'new',
         icon: <PlusOutlined />,
       },
       {
-        label: '视图管理',
+        label: intl.get('视图管理'),
         key: 'manage',
         icon: <SettingOutlined />,
       },
@@ -840,7 +853,12 @@ const Crontab = () => {
       .then(({ code, data }) => {
         if (code === 200) {
           setCronViews(data);
-          const firstEnableView = data.filter((x) => !x.isDisabled);
+          const firstEnableView = data
+            .filter((x) => !x.isDisabled)
+            .map((x) => ({
+              ...x,
+              name: x.name === '全部任务' ? intl.get('全部任务') : x.name,
+            }));
           setEnabledCronViews(firstEnableView);
           setPageConf({
             page: 1,
@@ -873,10 +891,10 @@ const Crontab = () => {
   return (
     <PageContainer
       className="ql-container-wrapper crontab-wrapper ql-container-wrapper-has-tab"
-      title="定时任务"
+      title={intl.get('定时任务')}
       extra={[
         <Search
-          placeholder="请输入名称或者关键词"
+          placeholder={intl.get('请输入名称或者关键词')}
           style={{ width: 'auto' }}
           enterButton
           allowClear
@@ -886,7 +904,7 @@ const Crontab = () => {
           onSearch={onSearch}
         />,
         <Button key="2" type="primary" onClick={() => addCron()}>
-          新建任务
+          {intl.get('创建任务')}
         </Button>,
       ]}
       header={{
@@ -906,7 +924,7 @@ const Crontab = () => {
           >
             <div className={`view-more ${moreMenuActive ? 'active' : ''}`}>
               <Space>
-                更多
+                {intl.get('更多')}
                 <DownOutlined />
               </Space>
               <div className="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
@@ -929,56 +947,57 @@ const Crontab = () => {
               style={{ marginBottom: 5 }}
               onClick={delCrons}
             >
-              批量删除
+              {intl.get('批量删除')}
             </Button>
             <Button
               type="primary"
               onClick={() => operateCrons(0)}
               style={{ marginLeft: 8, marginBottom: 5 }}
             >
-              批量启用
+              {intl.get('批量启用')}
             </Button>
             <Button
               type="primary"
               onClick={() => operateCrons(1)}
               style={{ marginLeft: 8, marginRight: 8 }}
             >
-              批量禁用
+              {intl.get('批量禁用')}
             </Button>
             <Button
               type="primary"
               style={{ marginRight: 8 }}
               onClick={() => operateCrons(2)}
             >
-              批量运行
+              {intl.get('批量运行')}
             </Button>
             <Button type="primary" onClick={() => operateCrons(3)}>
-              批量停止
+              {intl.get('批量停止')}
             </Button>
             <Button
               type="primary"
               onClick={() => operateCrons(4)}
               style={{ marginLeft: 8, marginRight: 8 }}
             >
-              批量置顶
+              {intl.get('批量置顶')}
             </Button>
             <Button
               type="primary"
               onClick={() => operateCrons(5)}
               style={{ marginLeft: 8, marginRight: 8 }}
             >
-              批量取消置顶
+              {intl.get('批量取消置顶')}
             </Button>
             <Button
               type="primary"
               onClick={() => setIsLabelModalVisible(true)}
               style={{ marginLeft: 8, marginRight: 8 }}
             >
-              批量修改标签
+              {intl.get('批量修改标签')}
             </Button>
             <span style={{ marginLeft: 8 }}>
-              已选择
-              <a>{selectedRowIds?.length}</a>项
+              {intl.get('已选择')}
+              <a>{selectedRowIds?.length}</a>
+              {intl.get('项')}
             </span>
           </div>
         )}

src/pages/crontab/logModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useRef, useState } from 'react';
 import { Modal, message, Input, Form, Statistic, Button } from 'antd';
 import { request } from '@/utils/http';
@@ -44,7 +45,7 @@ const CronLogModal = ({
           data !== value
         ) {
           const log = data as string;
-          setValue(log || '暂无日志');
+          setValue(log || intl.get('暂无日志'));
           const hasNext = Boolean(
             log && !logEnded(log) && !log.includes('任务未运行'),
           );
@@ -131,7 +132,7 @@ const CronLogModal = ({
       onCancel={() => cancel()}
       footer={[
         <Button type="primary" onClick={() => cancel()}>
-          知道了
+          {intl.get('知道了')}
         </Button>,
       ]}
     >

src/pages/crontab/modal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form, Button } from 'antd';
 import { request } from '@/utils/http';
@@ -31,7 +32,9 @@ const CronModal = ({
       );
 
       if (code === 200) {
-        message.success(cron ? '更新任务成功' : '新建任务成功');
+        message.success(
+          cron ? intl.get('更新任务成功') : intl.get('创建任务成功'),
+        );
         handleCancel(data);
       }
       setLoading(false);
@@ -46,7 +49,7 @@ const CronModal = ({
 
   return (
     <Modal
-      title={cron ? '编辑任务' : '新建任务'}
+      title={cron ? intl.get('编辑任务') : intl.get('创建任务')}
       open={visible}
       forceRender
       centered
@@ -70,23 +73,25 @@ const CronModal = ({
         name="form_in_modal"
         initialValues={cron}
       >
-        <Form.Item name="name" label="名称">
-          <Input placeholder="请输入任务名称" />
+        <Form.Item name="name" label={intl.get('名称')}>
+          <Input placeholder={intl.get('请输入任务名称')} />
         </Form.Item>
         <Form.Item
           name="command"
-          label="命令/脚本"
+          label={intl.get('命令/脚本')}
           rules={[{ required: true, whitespace: true }]}
         >
           <Input.TextArea
             rows={4}
             autoSize={true}
-            placeholder="支持输入脚本路径/任意系统可执行命令/task 脚本路径"
+            placeholder={intl.get(
+              '支持输入脚本路径/任意系统可执行命令/task 脚本路径',
+            )}
           />
         </Form.Item>
         <Form.Item
           name="schedule"
-          label="定时规则"
+          label={intl.get('定时规则')}
           rules={[
             { required: true },
             {
@@ -100,9 +105,9 @@ const CronModal = ({
             },
           ]}
         >
-          <Input placeholder="秒(可选) 分 时 天 月 周" />
+          <Input placeholder={intl.get('秒(可选) 分 时 天 月 周')} />
         </Form.Item>
-        <Form.Item name="labels" label="标签">
+        <Form.Item name="labels" label={intl.get('标签')}>
           <EditableTagGroup />
         </Form.Item>
       </Form>
@@ -136,7 +141,9 @@ const CronLabelModal = ({
 
           if (code === 200) {
             message.success(
-              action === 'post' ? '添加Labels成功' : '删除Labels成功',
+              action === 'post'
+                ? intl.get('添加Labels成功')
+                : intl.get('删除Labels成功'),
             );
             handleCancel(true);
           }
@@ -155,18 +162,18 @@ const CronLabelModal = ({
   }, [ids, visible]);
 
   const buttons = [
-    <Button onClick={() => handleCancel(false)}>取消</Button>,
+    <Button onClick={() => handleCancel(false)}>{intl.get('取消')}</Button>,
     <Button type="primary" danger onClick={() => update('delete')}>
-      删除
+      {intl.get('删除')}
     </Button>,
     <Button type="primary" onClick={() => update('post')}>
-      添加
+      {intl.get('添加')}
     </Button>,
   ];
 
   return (
     <Modal
-      title="批量修改标签"
+      title={intl.get('批量修改标签')}
       open={visible}
       footer={buttons}
       centered
@@ -176,7 +183,7 @@ const CronLabelModal = ({
       confirmLoading={loading}
     >
       <Form form={form} layout="vertical" name="form_in_label_modal">
-        <Form.Item name="labels" label="标签">
+        <Form.Item name="labels" label={intl.get('标签')}>
           <EditableTagGroup />
         </Form.Item>
       </Form>

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>

src/pages/crontab/viewManageModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   Modal,
@@ -81,18 +82,18 @@ const ViewManageModal = ({
 
   const columns: any = [
     {
-      title: '名称',
+      title: intl.get('名称'),
       dataIndex: 'name',
       key: 'name',
     },
     {
-      title: '类型',
+      title: intl.get('类型'),
       dataIndex: 'type',
       key: 'type',
-      render: (v) => (v === 1 ? '系统' : '个人'),
+      render: (v) => (v === 1 ? intl.get('系统') : intl.get('个人')),
     },
     {
-      title: '显示',
+      title: intl.get('显示'),
       key: 'isDisabled',
       dataIndex: 'isDisabled',
       width: 100,
@@ -107,7 +108,7 @@ const ViewManageModal = ({
       },
     },
     {
-      title: '操作',
+      title: intl.get('操作'),
       key: 'action',
       width: 100,
       render: (text: string, record: any, index: number) => {
@@ -140,14 +141,14 @@ const ViewManageModal = ({
 
   const deleteView = (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() {
@@ -218,7 +219,7 @@ const ViewManageModal = ({
 
   return (
     <Modal
-      title="视图管理"
+      title={intl.get('视图管理')}
       open={visible}
       centered
       width={620}
@@ -243,7 +244,7 @@ const ViewManageModal = ({
             setIsCreateViewModalVisible(true);
           }}
         >
-          新建视图
+          {intl.get('创建视图')}
         </Button>
       </Space>
       <DndProvider backend={HTML5Backend}>

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>

src/pages/diff/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { PureComponent, useRef, useState, useEffect } from 'react';
 import { Button, message, Select, Form, Row, Col } from 'antd';
 import config from '@/utils/config';
@@ -93,7 +94,7 @@ const Diff = () => {
   return (
     <PageContainer
       className="ql-container-wrapper"
-      title="对比工具"
+      title={intl.get('对比工具')}
       loading={loading}
       header={{
         style: headerStyle,
@@ -101,14 +102,14 @@ const Diff = () => {
       extra={
         !isPhone && [
           <Button key="1" type="primary" onClick={updateConfig}>
-            保存
+            {intl.get('保存')}
           </Button>,
         ]
       }
     >
       <Row gutter={24} className="diff-switch-file">
         <Col span={12}>
-          <Form.Item label="源文件">
+          <Form.Item label={intl.get('源文件')}>
             <Select value={origin} onChange={originFileChange}>
               {files.map((x) => (
                 <Option key={x.value} value={x.value}>
@@ -119,7 +120,7 @@ const Diff = () => {
           </Form.Item>
         </Col>
         <Col span={12}>
-          <Form.Item label="当前文件">
+          <Form.Item label={intl.get('当前文件')}>
             <Select value={current} onChange={currentFileChange}>
               {files.map((x) => (
                 <Option key={x.value} value={x.value}>

src/pages/env/editNameModal.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';
@@ -39,7 +40,7 @@ const EditNameModal = ({
 
   return (
     <Modal
-      title="修改环境变量名称"
+      title={intl.get('修改环境变量名称')}
       open={visible}
       forceRender
       centered
@@ -60,9 +61,9 @@ const EditNameModal = ({
       <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/env/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal'
 import React, {
   useCallback,
   useRef,
@@ -70,20 +71,20 @@ const Env = () => {
   const { headerStyle, isPhone, theme } = useOutletContext<SharedContext>();
   const columns: any = [
     {
-      title: '序号',
-      width: 60,
+      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',
       key: 'name',
       sorter: (a: any, b: any) => a.name.localeCompare(b.name),
     },
     {
-      title: '值',
+      title: intl.get('值'),
       dataIndex: 'value',
       key: 'value',
       width: '35%',
@@ -99,7 +100,7 @@ const Env = () => {
       },
     },
     {
-      title: '备注',
+      title: intl.get('备注'),
       dataIndex: 'remarks',
       key: 'remarks',
       render: (text: string, record: any) => {
@@ -111,7 +112,7 @@ const Env = () => {
       },
     },
     {
-      title: '更新时间',
+      title: intl.get('更新时间'),
       dataIndex: 'timestamp',
       key: 'timestamp',
       width: 165,
@@ -145,17 +146,17 @@ const Env = () => {
       },
     },
     {
-      title: '状态',
+      title: intl.get('状态'),
       key: 'status',
       dataIndex: 'status',
-      width: 70,
+      width: 80,
       filters: [
         {
-          text: '已启用',
+          text: intl.get('已启用'),
           value: 0,
         },
         {
-          text: '已禁用',
+          text: intl.get('已禁用'),
           value: 1,
         },
       ],
@@ -164,28 +165,28 @@ const Env = () => {
         return (
           <Space size="middle" style={{ cursor: 'text' }}>
             <Tag color={StatusColor[record.status]} style={{ marginRight: 0 }}>
-              {Status[record.status]}
+              {intl.get(Status[record.status])}
             </Tag>
           </Space>
         );
       },
     },
     {
-      title: '操作',
+      title: intl.get('操作'),
       key: 'action',
       width: 120,
       render: (text: string, record: any, index: number) => {
         const isPc = !isPhone;
         return (
           <Space size="middle">
-            <Tooltip title={isPc ? '编辑' : ''}>
+            <Tooltip title={isPc ? intl.get('编辑') : ''}>
               <a onClick={() => editEnv(record, index)}>
                 <EditOutlined />
               </a>
             </Tooltip>
             <Tooltip
               title={
-                isPc ? (record.status === Status.已禁用 ? '启用' : '禁用') : ''
+                isPc ? (record.status === Status.已禁用 ? intl.get('启用') : intl.get('禁用')) : ''
               }
             >
               <a onClick={() => enabledOrDisabledEnv(record, index)}>
@@ -196,7 +197,7 @@ const Env = () => {
                 )}
               </a>
             </Tooltip>
-            <Tooltip title={isPc ? '删除' : ''}>
+            <Tooltip title={isPc ? intl.get('删除') : ''}>
               <a onClick={() => deleteEnv(record, index)}>
                 <DeleteOutlined />
               </a>
@@ -231,15 +232,15 @@ const Env = () => {
 
   const enabledOrDisabledEnv = (record: any, index: number) => {
     Modal.confirm({
-      title: `确认${record.status === Status.已禁用 ? '启用' : '禁用'}`,
+      title: `确认${record.status === Status.已禁用 ? intl.get('启用') : intl.get('禁用')}`,
       content: (
         <>
-          确认{record.status === Status.已禁用 ? '启用' : '禁用'}
+          {intl.get('确认')}{record.status === Status.已禁用 ? intl.get('启用') : intl.get('禁用')}
           Env{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.value}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -253,7 +254,7 @@ const Env = () => {
           .then(({ code, data }) => {
             if (code === 200) {
               message.success(
-                `${record.status === Status.已禁用 ? '启用' : '禁用'}成功`,
+                `${record.status === Status.已禁用 ? intl.get('启用') : intl.get('禁用')}成功`,
               );
               const newStatus =
                 record.status === Status.已禁用 ? Status.已启用 : Status.已禁用;
@@ -284,14 +285,14 @@ const Env = () => {
 
   const deleteEnv = (record: any, index: number) => {
     Modal.confirm({
-      title: '确认删除',
+      title: intl.get('确认删除'),
       content: (
         <>
-          确认删除变量{' '}
+          {intl.get('确认删除变量')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}: {record.value}
           </Text>{' '}
-          吗
+          {intl.get('吗')}
         </>
       ),
       onOk() {
@@ -412,8 +413,8 @@ const Env = () => {
 
   const delEnvs = () => {
     Modal.confirm({
-      title: '确认删除',
-      content: <>确认删除选中的变量吗</>,
+      title: intl.get('确认删除'),
+      content: <>{intl.get('确认删除选中的变量吗')}</>,
       onOk() {
         request
           .delete(`${config.apiPrefix}envs`, { data: selectedRowIds })
@@ -434,7 +435,7 @@ const Env = () => {
   const operateEnvs = (operationStatus: number) => {
     Modal.confirm({
       title: `确认${OperationName[operationStatus]}`,
-      content: <>确认{OperationName[operationStatus]}选中的变量吗</>,
+      content: <>{intl.get('确认')}{OperationName[operationStatus]}{intl.get('选中的变量吗')}</>,
       onOk() {
         request
           .put(
@@ -500,10 +501,10 @@ const Env = () => {
   return (
     <PageContainer
       className="ql-container-wrapper env-wrapper"
-      title="环境变量"
+      title={intl.get('环境变量')}
       extra={[
         <Search
-          placeholder="请输入名称/值/备注"
+          placeholder={intl.get('请输入名称/值/备注')}
           style={{ width: 'auto' }}
           enterButton
           loading={loading}
@@ -515,11 +516,11 @@ const Env = () => {
             icon={<UploadOutlined />}
             loading={importLoading}
           >
-            导入
+            {intl.get('导入')}
           </Button>
         </Upload>,
         <Button key="2" type="primary" onClick={() => addEnv()}>
-          新建变量
+          {intl.get('创建变量')}
         </Button>,
       ]}
       header={{
@@ -534,39 +535,39 @@ const Env = () => {
               style={{ marginBottom: 5 }}
               onClick={modifyName}
             >
-              批量修改变量名称
+              {intl.get('批量修改变量名称')}
             </Button>
             <Button
               type="primary"
               style={{ marginBottom: 5, marginLeft: 8 }}
               onClick={delEnvs}
             >
-              批量删除
+              {intl.get('批量删除')}
             </Button>
             <Button
               type="primary"
               onClick={() => exportEnvs()}
               style={{ marginLeft: 8, marginRight: 8 }}
             >
-              批量导出
+              {intl.get('批量导出')}
             </Button>
             <Button
               type="primary"
               onClick={() => operateEnvs(0)}
               style={{ marginLeft: 8, marginBottom: 5 }}
             >
-              批量启用
+              {intl.get('批量启用')}
             </Button>
             <Button
               type="primary"
               onClick={() => operateEnvs(1)}
               style={{ marginLeft: 8, marginRight: 8 }}
             >
-              批量禁用
+              {intl.get('批量禁用')}
             </Button>
             <span style={{ marginLeft: 8 }}>
-              已选择
-              <a>{selectedRowIds?.length}</a>项
+              {intl.get('已选择')}
+              <a>{selectedRowIds?.length}</a>{intl.get('项')}
             </span>
           </div>
         )}

src/pages/env/modal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal'
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form, Radio } from 'antd';
 import { request } from '@/utils/http';
@@ -43,7 +44,7 @@ const EnvModal = ({
       );
 
       if (code === 200) {
-        message.success(env ? '更新变量成功' : '新建变量成功');
+        message.success(env ? intl.get('更新变量成功') : intl.get('创建变量成功'));
         handleCancel(data);
       }
       setLoading(false);
@@ -58,7 +59,7 @@ const EnvModal = ({
 
   return (
     <Modal
-      title={env ? '编辑变量' : '新建变量'}
+      title={env ? intl.get('编辑变量') : intl.get('创建变量')}
       open={visible}
       forceRender
       centered
@@ -79,45 +80,45 @@ const EnvModal = ({
       <Form form={form} layout="vertical" name="env_modal" initialValues={env}>
         <Form.Item
           name="name"
-          label="名称"
+          label={intl.get('名称')}
           rules={[
-            { required: true, message: '请输入环境变量名称', whitespace: true },
+            { required: true, message: intl.get('请输入环境变量名称'), whitespace: true },
             {
               pattern: /^[a-zA-Z_][0-9a-zA-Z_]*$/,
-              message: '只能输入字母数字下划线，且不能以数字开头',
+              message: intl.get('只能输入字母数字下划线，且不能以数字开头'),
             },
           ]}
         >
-          <Input placeholder="请输入环境变量名称" />
+          <Input placeholder={intl.get('请输入环境变量名称')} />
         </Form.Item>
         {!env && (
           <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="value"
-          label="值"
+          label={intl.get('值')}
           rules={[
-            { required: true, message: '请输入环境变量值', whitespace: true },
+            { required: true, message: intl.get('请输入环境变量值'), whitespace: true },
           ]}
         >
           <Input.TextArea
             rows={4}
             autoSize={true}
-            placeholder="请输入环境变量值"
+            placeholder={intl.get('请输入环境变量值')}
           />
         </Form.Item>
-        <Form.Item name="remarks" label="备注">
-          <Input placeholder="请输入备注" />
+        <Form.Item name="remarks" label={intl.get('备注')}>
+          <Input placeholder={intl.get('请输入备注')} />
         </Form.Item>
       </Form>
     </Modal>

src/pages/error/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useState, useEffect, useRef } from 'react';
 import config from '@/utils/config';
 import { request } from '@/utils/http';
@@ -54,22 +55,24 @@ const Error = () => {
             type="error"
             message={
               <Typography.Title level={5} type="danger">
-                服务启动超时
+                {intl.get('服务启动超时')}
               </Typography.Title>
             }
             description={
               <Typography.Text type="danger">
-                <div>请先按如下方式修复：</div>
+                <div>{intl.get('请先按如下方式修复：')}</div>
                 <div>
                   1. 宿主机执行 docker run --rm -v
                   /var/run/docker.sock:/var/run/docker.sock
                   containrrr/watchtower -cR &lt;容器名&gt;
                 </div>
-                <div>2. 容器内执行 ql -l check、ql -l update</div>
+                <div>{intl.get('2. 容器内执行 ql -l check、ql -l update')}</div>
                 <div>
-                  3. 如果无法解决，容器内执行 pm2 logs，拷贝执行结果
+                  {intl.get(
+                    '3. 如果无法解决，容器内执行 pm2 logs，拷贝执行结果',
+                  )}
                   <Typography.Link href="https://github.com/whyour/qinglong/issues/new?assignees=&labels=&template=bug_report.yml">
-                    提交 issue
+                    {intl.get('提交 issue')}
                   </Typography.Link>
                 </div>
               </Typography.Text>
@@ -81,7 +84,7 @@ const Error = () => {
           </Typography.Paragraph>
         </div>
       ) : (
-        <PageLoading tip="启动中，请稍后..." />
+        <PageLoading tip={intl.get('启动中，请稍后...')} />
       )}
     </div>
   );

src/pages/initialization/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { Fragment, useEffect, useState } from 'react';
 import {
   Button,
@@ -70,15 +71,15 @@ const Initialization = () => {
 
   const steps = [
     {
-      title: '欢迎使用',
+      title: intl.get('欢迎使用'),
       content: (
         <div className={styles.top} style={{ marginTop: 30 }}>
           <div className={styles.header}>
-            <span className={styles.title}>欢迎使用青龙</span>
+            <span className={styles.title}>{intl.get('欢迎使用青龙')}</span>
             <span className={styles.desc}>
-              支持python3、javaScript、shell、typescript 的定时任务管理面板（A
-              timed task management panel that supports typescript, javaScript,
-              python3, and shell.）
+              {intl.get(
+                '支持python3、javascript、shell、typescript 的定时任务管理面板',
+              )}
             </span>
           </div>
           <div className={styles.action}>
@@ -88,42 +89,42 @@ const Initialization = () => {
                 next();
               }}
             >
-              开始安装
+              {intl.get('开始安装')}
             </Button>
           </div>
         </div>
       ),
     },
     {
-      title: '账户设置',
+      title: intl.get('账户设置'),
       content: (
         <Form onFinish={submitAccountSetting} layout="vertical">
           <Form.Item
-            label="用户名"
+            label={intl.get('用户名')}
             name="username"
             rules={[{ required: true }]}
             style={{ maxWidth: 350 }}
           >
-            <Input placeholder="用户名" />
+            <Input placeholder={intl.get('用户名')} />
           </Form.Item>
           <Form.Item
-            label="密码"
+            label={intl.get('密码')}
             name="password"
             rules={[
               { required: true },
               {
                 pattern: /^(?!admin$).*$/,
-                message: '密码不能为admin',
+                message: intl.get('密码不能为admin'),
               },
             ]}
             hasFeedback
             style={{ maxWidth: 350 }}
           >
-            <Input type="password" placeholder="密码" />
+            <Input type="password" placeholder={intl.get('密码')} />
           </Form.Item>
           <Form.Item
             name="confirm"
-            label="确认密码"
+            label={intl.get('确认密码')}
             dependencies={['password']}
             hasFeedback
             style={{ maxWidth: 350 }}
@@ -136,32 +137,34 @@ const Initialization = () => {
                   if (!value || getFieldValue('password') === value) {
                     return Promise.resolve();
                   }
-                  return Promise.reject(new Error('您输入的两个密码不匹配！'));
+                  return Promise.reject(
+                    new Error(intl.get('您输入的两个密码不匹配！')),
+                  );
                 },
               }),
             ]}
           >
-            <Input.Password placeholder="确认密码" />
+            <Input.Password placeholder={intl.get('确认密码')} />
           </Form.Item>
           <Button type="primary" htmlType="submit" loading={loading}>
-            提交
+            {intl.get('提交')}
           </Button>
         </Form>
       ),
     },
     {
-      title: '通知设置',
+      title: intl.get('通知设置'),
       content: (
         <Form onFinish={submitNotification} layout="vertical">
           <Form.Item
-            label="通知方式"
+            label={intl.get('通知方式')}
             name="type"
-            rules={[{ required: true, message: '请选择通知方式' }]}
+            rules={[{ required: true, message: intl.get('请选择通知方式') }]}
             style={{ maxWidth: 350 }}
           >
             <Select
               onChange={notificationModeChange}
-              placeholder="请选择通知方式"
+              placeholder={intl.get('请选择通知方式')}
             >
               {config.notificationModes
                 .filter((x) => x.value !== 'closed')
@@ -188,25 +191,25 @@ const Initialization = () => {
             </Form.Item>
           ))}
           <Button type="primary" htmlType="submit" loading={loading}>
-            保存
+            {intl.get('保存')}
           </Button>
           <Button type="link" htmlType="button" onClick={() => next()}>
-            跳过
+            {intl.get('跳过')}
           </Button>
         </Form>
       ),
     },
     {
-      title: '完成安装',
+      title: intl.get('完成安装'),
       content: (
         <div className={styles.top} style={{ marginTop: 80 }}>
           <div className={styles.header}>
-            <span className={styles.title}>恭喜安装完成！</span>
+            <span className={styles.title}>{intl.get('恭喜安装完成！')}</span>
             <Link href="https://github.com/whyour/qinglong" target="_blank">
               Github
             </Link>
             <Link href="https://t.me/jiao_long" target="_blank">
-              Telegram频道
+              {intl.get('Telegram频道')}
             </Link>
           </div>
           <div style={{ marginTop: 16 }}>
@@ -216,7 +219,7 @@ const Initialization = () => {
                 window.location.reload();
               }}
             >
-              去登录
+              {intl.get('去登录')}
             </Button>
           </div>
         </div>
@@ -233,7 +236,7 @@ const Initialization = () => {
             className={styles.logo}
             src="https://qn.whyour.cn/logo.png"
           />
-          <span className={styles.title}>初始化配置</span>
+          <span className={styles.title}>{intl.get('初始化配置')}</span>
         </div>
       </div>
       <div className={styles.main}>

src/pages/log/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal'
 import { useState, useEffect, useCallback, Key, useRef } from 'react';
 import {
   TreeSelect,
@@ -29,7 +30,7 @@ const { Text } = Typography;
 
 const Log = () => {
   const { headerStyle, isPhone, theme } = 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);
@@ -70,7 +71,7 @@ const Log = () => {
     }
 
     if (node.type === 'directory') {
-      setValue('请选择日志文件');
+      setValue(intl.get('请选择日志文件'));
       return;
     }
 
@@ -112,12 +113,12 @@ const Log = () => {
       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() {
@@ -160,7 +161,7 @@ const Log = () => {
   const initState = () => {
     setSelect('');
     setCurrentNode(null);
-    setValue('请选择脚本文件');
+    setValue(intl.get('请选择脚本文件'));
   };
 
   const onExpand = (expKeys: any) => {
@@ -191,7 +192,7 @@ const Log = () => {
                 value={select}
                 dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                 treeData={data}
-                placeholder="请选择日志"
+                placeholder={intl.get('请选择日志')}
                 fieldNames={{ value: 'key' }}
                 treeNodeFilterProp="title"
                 showSearch
@@ -200,7 +201,7 @@ const Log = () => {
               />,
             ]
           : [
-              <Tooltip title="删除">
+              <Tooltip title={intl.get('删除')}>
                 <Button
                   type="primary"
                   disabled={!select}
@@ -224,7 +225,7 @@ const Log = () => {
                   <Input.Search
                     className={styles['left-tree-search']}
                     onChange={onSearch}
-                    placeholder="请输入日志名"
+                    placeholder={intl.get('请输入日志名')}
                     allowClear
                   ></Input.Search>
                   <div className={styles['left-tree-scroller']} ref={treeDom}>
@@ -252,7 +253,7 @@ const Log = () => {
                   }}
                 >
                   <Empty
-                    description="暂无日志"
+                    description={intl.get('暂无日志')}
                     image={Empty.PRESENTED_IMAGE_SIMPLE}
                   />
                 </div>

src/pages/login/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { Fragment, useEffect, useState } from 'react';
 import {
   Button,
@@ -80,17 +81,29 @@ const Login = () => {
       } = data;
       localStorage.setItem(config.authKey, token);
       notification.success({
-        message: '登录成功！',
+        message: intl.get('登录成功！'),
         description: (
           <>
             <div>
-              上次登录时间：
+              {intl.get('上次登录时间：')}
               {lastlogon ? new Date(lastlogon).toLocaleString() : '-'}
             </div>
-            <div>上次登录地点：{lastaddr || '-'}</div>
-            <div>上次登录IP：{lastip || '-'}</div>
-            <div>上次登录设备：{platform || '-'}</div>
-            <div>上次登录状态：{retries > 0 ? `失败${retries}次` : '成功'}</div>
+            <div>
+              {intl.get('上次登录地点：')}
+              {lastaddr || '-'}
+            </div>
+            <div>
+              {intl.get('上次登录IP：')}
+              {lastip || '-'}
+            </div>
+            <div>
+              {intl.get('上次登录设备：')}
+              {platform || '-'}
+            </div>
+            <div>
+              {intl.get('上次登录状态：')}
+              {retries > 0 ? `失败${retries}次` : intl.get('成功')}
+            </div>
           </>
         ),
       });
@@ -136,7 +149,7 @@ const Login = () => {
             src="https://qn.whyour.cn/logo.png"
           />
           <span className={styles.title}>
-            {twoFactor ? '两步验证' : config.siteName}
+            {twoFactor ? intl.get('两步验证') : config.siteName}
           </span>
         </div>
       </div>
@@ -145,17 +158,17 @@ const Login = () => {
           <Form layout="vertical" onFinish={completeTowFactor}>
             <FormItem
               name="code"
-              label="验证码"
+              label={intl.get('验证码')}
               rules={[
                 {
                   pattern: /^[0-9]{6}$/,
-                  message: '验证码为6位数字',
+                  message: intl.get('验证码为6位数字'),
                 },
               ]}
               validateTrigger="onBlur"
             >
               <Input
-                placeholder="6位数字"
+                placeholder={intl.get('6位数字')}
                 onChange={codeInputChange}
                 autoFocus
                 autoComplete="off"
@@ -167,27 +180,27 @@ const Login = () => {
               style={{ width: '100%' }}
               loading={verifying}
             >
-              验证
+              {intl.get('验证')}
             </Button>
           </Form>
         ) : (
           <Form layout="vertical" onFinish={handleOk}>
-            <FormItem name="username" label="用户名" hasFeedback>
+            <FormItem name="username" label={intl.get('用户名')} hasFeedback>
               <Input
-                placeholder={`用户名${isDemoEnv ? ': admin' : ''}`}
+                placeholder={`${intl.get('用户名')}${isDemoEnv ? ': admin' : ''}`}
                 autoFocus
               />
             </FormItem>
-            <FormItem name="password" label="密码" hasFeedback>
+            <FormItem name="password" label={intl.get('密码')} hasFeedback>
               <Input
                 type="password"
-                placeholder={`密码${isDemoEnv ? ': 123' : ''}`}
+                placeholder={`${intl.get('密码')}${isDemoEnv ? ': 123' : ''}`}
               />
             </FormItem>
             <Row>
               {waitTime ? (
                 <Button type="primary" style={{ width: '100%' }} disabled>
-                  请
+                  {intl.get('请')}
                   <Countdown
                     valueStyle={{
                       color:
@@ -200,7 +213,7 @@ const Login = () => {
                     format="ss"
                     value={Date.now() + 1000 * waitTime}
                   />
-                  秒后重试
+                  {intl.get('秒后重试')}
                 </Button>
               ) : (
                 <Button
@@ -209,7 +222,7 @@ const Login = () => {
                   style={{ width: '100%' }}
                   loading={loading}
                 >
-                  登录
+                  {intl.get('登录')}
                 </Button>
               )}
             </Row>
@@ -220,7 +233,9 @@ const Login = () => {
         {twoFactor ? (
           <div style={{ paddingLeft: 20, position: 'relative' }}>
             <MobileOutlined style={{ position: 'absolute', left: 0, top: 4 }} />
-            在您的设备上打开两步验证应用程序以查看您的身份验证代码并验证您的身份。
+            {intl.get(
+              '在您的设备上打开两步验证应用程序以查看您的身份验证代码并验证您的身份。',
+            )}
           </div>
         ) : (
           ''

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>

src/pages/setting/about.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Typography, Input, Form, Button, message, Descriptions } from 'antd';
 import styles from './index.less';
@@ -20,27 +21,25 @@ const About = ({ systemInfo }: { systemInfo: SharedContext['systemInfo'] }) => {
         src="https://qn.whyour.cn/logo.png"
       />
       <div className={styles.right}>
-        <span className={styles.title}>青龙</span>
+        <span className={styles.title}>{intl.get('青龙')}</span>
         <span className={styles.desc}>
-          支持python3、javaScript、shell、typescript 的定时任务管理面板（A timed
-          task management panel that supports typescript, javaScript, python3,
-          and shell.）
+          {intl.get(
+            '支持python3、javascript、shell、typescript 的定时任务管理面板',
+          )}
         </span>
         <Descriptions>
-          <Descriptions.Item label="版本" span={3}>
-            {TVersion[systemInfo.branch]} v{systemInfo.version}
+          <Descriptions.Item label={intl.get('版本')} span={3}>
+            {intl.get(TVersion[systemInfo.branch])} v{systemInfo.version}
           </Descriptions.Item>
-          <Descriptions.Item label="更新时间" span={3}>
-            {dayjs(systemInfo.publishTime * 1000).format(
-              'YYYY-MM-DD HH:mm',
-            )}
+          <Descriptions.Item label={intl.get('更新时间')} span={3}>
+            {dayjs(systemInfo.publishTime * 1000).format('YYYY-MM-DD HH:mm')}
           </Descriptions.Item>
-          <Descriptions.Item label="更新日志" span={3}>
+          <Descriptions.Item label={intl.get('更新日志')} span={3}>
             <Link
               href={`https://qn.whyour.cn/version.yaml?t=${Date.now()}`}
               target="_blank"
             >
-              查看
+              {intl.get('查看')}
             </Link>
           </Descriptions.Item>
         </Descriptions>
@@ -57,13 +56,13 @@ const About = ({ systemInfo }: { systemInfo: SharedContext['systemInfo'] }) => {
             target="_blank"
             style={{ marginRight: 15 }}
           >
-            Telegram频道
+            {intl.get('Telegram频道')}
           </Link>
           <Link
             href="https://github.com/whyour/qinglong/issues"
             target="_blank"
           >
-            提交BUG
+            {intl.get('提交BUG')}
           </Link>
         </div>
       </div>

src/pages/setting/appModal.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Modal, message, Input, Form, Select } from 'antd';
 import { request } from '@/utils/http';
@@ -29,7 +30,9 @@ const AppModal = ({
       );
 
       if (code === 200) {
-        message.success(app ? '更新应用成功' : '新建应用成功');
+        message.success(
+          app ? intl.get('更新应用成功') : intl.get('创建应用成功'),
+        );
         handleCancel(data);
       }
       setLoading(false);
@@ -44,7 +47,7 @@ const AppModal = ({
 
   return (
     <Modal
-      title={app ? '编辑应用' : '新建应用'}
+      title={app ? intl.get('编辑应用') : intl.get('创建应用')}
       open={visible}
       forceRender
       centered
@@ -70,22 +73,26 @@ const AppModal = ({
       >
         <Form.Item
           name="name"
-          label="名称"
+          label={intl.get('名称')}
           rules={[
             {
               validator: (_, value) =>
                 ['system'].includes(value)
-                  ? Promise.reject(new Error('名称不能为保留关键字'))
+                  ? Promise.reject(new Error(intl.get('名称不能为保留关键字')))
                   : Promise.resolve(),
             },
           ]}
         >
-          <Input placeholder="请输入应用名称" />
+          <Input placeholder={intl.get('请输入应用名称')} />
         </Form.Item>
-        <Form.Item name="scopes" label="权限" rules={[{ required: true }]}>
+        <Form.Item
+          name="scopes"
+          label={intl.get('权限')}
+          rules={[{ required: true }]}
+        >
           <Select
             mode="multiple"
-            placeholder="请选择模块权限"
+            placeholder={intl.get('请选择模块权限')}
             allowClear
             style={{ width: '100%' }}
           >

src/pages/setting/checkUpdate.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState, useRef } from 'react';
 import { Statistic, Modal, Tag, Button, Spin, message } from 'antd';
 import { request } from '@/utils/http';
@@ -38,16 +39,17 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
   const showForceUpdateModal = (data: any) => {
     Modal.confirm({
       width: 500,
-      title: '更新',
+      title: intl.get('更新'),
       content: (
         <>
-          <div>已经是最新版了！</div>
+          <div>{intl.get('已经是最新版了！')}</div>
           <div style={{ fontSize: 12, fontWeight: 400, marginTop: 5 }}>
-            青龙 {data.lastVersion} 是目前检测到的最新可用版本了。
+            {intl.get('青龙')} {data.lastVersion}{' '}
+            {intl.get('是目前检测到的最新可用版本了。')}
           </div>
         </>
       ),
-      okText: '重新下载',
+      okText: intl.get('重新下载'),
       onOk() {
         showUpdatingModal();
         request
@@ -66,9 +68,10 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
       width: 500,
       title: (
         <>
-          <div>更新可用</div>
+          <div>{intl.get('更新可用')}</div>
           <div style={{ fontSize: 12, fontWeight: 400, marginTop: 5 }}>
-            新版本 {lastVersion} 可用，你使用的版本为 {systemInfo.version}。
+            {intl.get('新版本')} {lastVersion}{' '}
+            {intl.get('可用，你使用的版本为')} {systemInfo.version}。
           </div>
         </>
       ),
@@ -82,8 +85,8 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
           {lastLog}
         </pre>
       ),
-      okText: '下载更新',
-      cancelText: '以后再说',
+      okText: intl.get('下载更新'),
+      cancelText: intl.get('以后再说'),
       onOk() {
         showUpdatingModal();
         request
@@ -104,7 +107,7 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
       closable: false,
       keyboard: false,
       okButtonProps: { disabled: true },
-      title: '下载更新中...',
+      title: intl.get('下载更新中...'),
       centered: true,
       content: (
         <pre
@@ -123,10 +126,10 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
     Modal.confirm({
       width: 600,
       maskClosable: false,
-      title: '确认重启',
+      title: intl.get('确认重启'),
       centered: true,
-      content: '系统安装包下载成功，确认重启',
-      okText: '重启',
+      content: intl.get('系统安装包下载成功，确认重启'),
+      okText: intl.get('重启'),
       onOk() {
         request
           .put(`${config.apiPrefix}system/reload`, { type: 'system' })
@@ -134,13 +137,13 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
             message.success({
               content: (
                 <span>
-                  系统将在
+                  {intl.get('系统将在')}
                   <Countdown
                     className="inline-countdown"
                     format="ss"
                     value={Date.now() + 1000 * 30}
                   />
-                  秒后自动刷新
+                  {intl.get('秒后自动刷新')}
                 </span>
               ),
               duration: 30,
@@ -216,7 +219,7 @@ const CheckUpdate = ({ socketMessage, systemInfo }: any) => {
   return (
     <>
       <Button type="primary" onClick={checkUpgrade}>
-        检查更新
+        {intl.get('检查更新')}
       </Button>
     </>
   );

src/pages/setting/index.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useState, useEffect } from 'react';
 import {
   Button,
@@ -47,7 +48,7 @@ const Setting = () => {
   } = useOutletContext<SharedContext>();
   const columns = [
     {
-      title: '名称',
+      title: intl.get('名称'),
       dataIndex: 'name',
       key: 'name',
     },
@@ -68,7 +69,7 @@ const Setting = () => {
       },
     },
     {
-      title: '权限',
+      title: intl.get('权限'),
       dataIndex: 'scopes',
       key: 'scopes',
       width: '40%',
@@ -79,23 +80,23 @@ const Setting = () => {
       },
     },
     {
-      title: '操作',
+      title: intl.get('操作'),
       key: 'action',
       render: (text: string, record: any, index: number) => {
         const isPc = !isPhone;
         return (
           <Space size="middle" style={{ paddingLeft: 8 }}>
-            <Tooltip title={isPc ? '编辑' : ''}>
+            <Tooltip title={isPc ? intl.get('编辑') : ''}>
               <a onClick={() => editApp(record, index)}>
                 <EditOutlined />
               </a>
             </Tooltip>
-            <Tooltip title={isPc ? '重置secret' : ''}>
+            <Tooltip title={isPc ? intl.get('重置secret') : ''}>
               <a onClick={() => resetSecret(record, index)}>
                 <ReloadOutlined />
               </a>
             </Tooltip>
-            <Tooltip title={isPc ? '删除' : ''}>
+            <Tooltip title={isPc ? intl.get('删除') : ''}>
               <a onClick={() => deleteApp(record, index)}>
                 <DeleteOutlined />
               </a>
@@ -138,14 +139,14 @@ const Setting = () => {
 
   const deleteApp = (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() {
@@ -168,16 +169,18 @@ const Setting = () => {
 
   const resetSecret = (record: any, index: number) => {
     Modal.confirm({
-      title: '确认重置',
+      title: intl.get('确认重置'),
       content: (
         <>
-          确认重置应用{' '}
+          {intl.get('确认重置应用')}{' '}
           <Text style={{ wordBreak: 'break-all' }} type="warning">
             {record.name}
           </Text>{' '}
-          的Secret吗
+          {intl.get('的Secret吗')}
           <br />
-          <Text type="secondary">重置Secret会让当前应用所有token失效</Text>
+          <Text type="secondary">
+            {intl.get('重置Secret会让当前应用所有token失效')}
+          </Text>
         </>
       ),
       onOk() {
@@ -262,7 +265,7 @@ const Setting = () => {
   return (
     <PageContainer
       className="ql-container-wrapper ql-container-wrapper-has-tab ql-setting-container"
-      title="系统设置"
+      title={intl.get('系统设置')}
       header={{
         style: headerStyle,
       }}
@@ -270,7 +273,7 @@ const Setting = () => {
         tabActiveKey === 'app'
           ? [
               <Button key="2" type="primary" onClick={() => addApp()}>
-                新建应用
+                {intl.get('创建应用')}
               </Button>,
             ]
           : []
@@ -286,7 +289,7 @@ const Setting = () => {
             ? [
                 {
                   key: 'security',
-                  label: '安全设置',
+                  label: intl.get('安全设置'),
                   children: (
                     <SecuritySettings user={user} userChange={reloadUser} />
                   ),
@@ -295,7 +298,7 @@ const Setting = () => {
             : []),
           {
             key: 'app',
-            label: '应用设置',
+            label: intl.get('应用设置'),
             children: (
               <Table
                 columns={columns}
@@ -310,17 +313,17 @@ const Setting = () => {
           },
           {
             key: 'notification',
-            label: '通知设置',
+            label: intl.get('通知设置'),
             children: <NotificationSetting data={notificationInfo} />,
           },
           {
             key: 'login',
-            label: '登录日志',
+            label: intl.get('登录日志'),
             children: <LoginLog data={loginLogData} />,
           },
           {
             key: 'other',
-            label: '其他设置',
+            label: intl.get('其他设置'),
             children: (
               <Other
                 reloadTheme={reloadTheme}
@@ -331,7 +334,7 @@ const Setting = () => {
           },
           {
             key: 'about',
-            label: '关于',
+            label: intl.get('关于'),
             children: <About systemInfo={systemInfo} />,
           },
         ]}

src/pages/setting/loginLog.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Typography, Table, Tag, Button, Spin, message } from 'antd';
 import { request } from '@/utils/http';
@@ -17,45 +18,48 @@ enum LoginStatusColor {
 
 const columns = [
   {
-    title: '序号',
-    width: 50,
+    title: intl.get('序号'),
+    width: 40,
     render: (text: string, record: any, index: number) => {
       return index + 1;
     },
   },
   {
-    title: '登录时间',
+    title: intl.get('登录时间'),
     dataIndex: 'timestamp',
     key: 'timestamp',
+    width: 120,
     render: (text: string, record: any) => {
       return new Date(record.timestamp).toLocaleString();
     },
   },
   {
-    title: '登录地址',
+    title: intl.get('登录地址'),
     dataIndex: 'address',
+    width: 120,
     key: 'address',
   },
   {
-    title: '登录IP',
+    title: intl.get('登录IP'),
     dataIndex: 'ip',
+    width: 100,
     key: 'ip',
   },
   {
-    title: '登录设备',
+    title: intl.get('登录设备'),
     dataIndex: 'platform',
     key: 'platform',
     width: 80,
   },
   {
-    title: '登录状态',
+    title: intl.get('登录状态'),
     dataIndex: 'status',
     key: 'status',
     width: 80,
     render: (text: string, record: any) => {
       return (
         <Tag color={LoginStatusColor[record.status]} style={{ marginRight: 0 }}>
-          {LoginStatus[record.status]}
+          {intl.get(LoginStatus[record.status])}
         </Tag>
       );
     },

src/pages/setting/notification.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Typography, Input, Form, Button, Select, message } from 'antd';
 import { request } from '@/utils/http';
@@ -22,7 +23,9 @@ const NotificationSetting = ({ data }: any) => {
       .put(`${config.apiPrefix}user/notification`, values)
       .then(({ code, data }) => {
         if (code === 200) {
-          message.success(values.type ? '通知发送成功' : '通知关闭成功');
+          message.success(
+            values.type ? intl.get('通知发送成功') : intl.get('通知关闭成功'),
+          );
         }
       })
       .catch((error: any) => {
@@ -48,7 +51,7 @@ const NotificationSetting = ({ data }: any) => {
     <div>
       <Form onFinish={handleOk} form={form} layout="vertical">
         <Form.Item
-          label="通知方式"
+          label={intl.get('通知方式')}
           name="type"
           rules={[{ required: true }]}
           style={{ maxWidth: 400 }}
@@ -92,7 +95,7 @@ const NotificationSetting = ({ data }: any) => {
           </Form.Item>
         ))}
         <Button type="primary" htmlType="submit" disabled={loading}>
-          {loading ? '测试中...' : '保存'}
+          {loading ? intl.get('测试中...') : intl.get('保存')}
         </Button>
       </Form>
     </div>

src/pages/setting/other.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useState, useEffect, useRef } from 'react';
 import {
   Button,
@@ -22,9 +23,9 @@ import Countdown from 'antd/lib/statistic/Countdown';
 import useProgress from './progress';
 
 const optionsWithDisabled = [
-  { label: '亮色', value: 'light' },
-  { label: '暗色', value: 'dark' },
-  { label: '跟随系统', value: 'auto' },
+  { label: intl.get('亮色'), value: 'light' },
+  { label: intl.get('暗色'), value: 'dark' },
+  { label: intl.get('跟随系统'), value: 'auto' },
 ];
 
 const Other = ({
@@ -121,10 +122,10 @@ const Other = ({
     Modal.confirm({
       width: 600,
       maskClosable: false,
-      title: '确认重启',
+      title: intl.get('确认重启'),
       centered: true,
-      content: '备份数据上传成功，确认覆盖数据',
-      okText: '重启',
+      content: intl.get('备份数据上传成功，确认覆盖数据'),
+      okText: intl.get('重启'),
       onOk() {
         request
           .put(`${config.apiPrefix}system/reload`, { type: 'data' })
@@ -132,13 +133,13 @@ const Other = ({
             message.success({
               content: (
                 <span>
-                  系统将在
+                  {intl.get('系统将在')}
                   <Countdown
                     className="inline-countdown"
                     format="ss"
                     value={Date.now() + 1000 * 30}
                   />
-                  秒后自动刷新
+                  {intl.get('秒后自动刷新')}
                 </span>
               ),
               duration: 30,
@@ -160,7 +161,11 @@ const Other = ({
 
   return (
     <Form layout="vertical" form={form}>
-      <Form.Item label="主题设置" name="theme" initialValue={defaultTheme}>
+      <Form.Item
+        label={intl.get('主题设置')}
+        name="theme"
+        initialValue={defaultTheme}
+      >
         <Radio.Group
           options={optionsWithDisabled}
           onChange={themeChange}
@@ -170,15 +175,15 @@ const Other = ({
         />
       </Form.Item>
       <Form.Item
-        label="日志删除频率"
+        label={intl.get('日志删除频率')}
         name="frequency"
-        tooltip="每x天自动删除x天以前的日志"
+        tooltip={intl.get('每x天自动删除x天以前的日志')}
       >
         <Input.Group compact>
           <InputNumber
-            addonBefore="每"
-            addonAfter="天"
-            style={{ width: 142 }}
+            addonBefore={intl.get('每')}
+            addonAfter={intl.get('天')}
+            style={{ width: 180 }}
             min={0}
             value={systemConfig?.logRemoveFrequency}
             onChange={(value) => {
@@ -186,14 +191,14 @@ const Other = ({
             }}
           />
           <Button type="primary" onClick={updateSystemConfig}>
-            确认
+            {intl.get('确认')}
           </Button>
         </Input.Group>
       </Form.Item>
-      <Form.Item label="定时任务并发数" name="frequency">
+      <Form.Item label={intl.get('定时任务并发数')} name="frequency">
         <Input.Group compact>
           <InputNumber
-            style={{ width: 142 }}
+            style={{ width: 150 }}
             min={1}
             value={systemConfig?.cronConcurrency}
             onChange={(value) => {
@@ -201,13 +206,13 @@ const Other = ({
             }}
           />
           <Button type="primary" onClick={updateSystemConfig}>
-            确认
+            {intl.get('确认')}
           </Button>
         </Input.Group>
       </Form.Item>
-      <Form.Item label="数据备份还原" name="frequency">
+      <Form.Item label={intl.get('数据备份还原')} name="frequency">
         <Button type="primary" onClick={exportData} loading={exportLoading}>
-          {exportLoading ? '生成数据中...' : '备份'}
+          {exportLoading ? intl.get('生成数据中...') : intl.get('备份')}
         </Button>
         <Upload
           method="put"
@@ -228,11 +233,11 @@ const Other = ({
           }}
         >
           <Button icon={<UploadOutlined />} style={{ marginLeft: 8 }}>
-            还原数据
+            {intl.get('还原数据')}
           </Button>
         </Upload>
       </Form.Item>
-      <Form.Item label="检查更新" name="update">
+      <Form.Item label={intl.get('检查更新')} name="update">
         <CheckUpdate systemInfo={systemInfo} socketMessage={socketMessage} />
       </Form.Item>
     </Form>

src/pages/setting/security.tsx

@@ -1,3 +1,4 @@
+import intl from 'react-intl-universal';
 import React, { useEffect, useState } from 'react';
 import { Typography, Input, Form, Button, message, Avatar, Upload } from 'antd';
 import { request } from '@/utils/http';
@@ -110,8 +111,8 @@ const SecuritySettings = ({ user, userChange }: any) => {
     <>
       {twoFactorInfo ? (
         <div>
-          <Title level={5}>第一步</Title>
-          下载两步验证手机应用，比如 Google Authenticator 、
+          <Title level={5}>{intl.get('第一步')}</Title>
+          {intl.get('下载两步验证手机应用，比如 Google Authenticator 、')}
           <Link
             href="https://www.microsoft.com/en-us/security/mobile-authenticator-app"
             target="_blank"
@@ -137,9 +138,10 @@ const SecuritySettings = ({ user, userChange }: any) => {
             LastPass Authenticator
           </Link>
           <Title style={{ marginTop: 5 }} level={5}>
-            第二步
+            {intl.get('第二步')}
           </Title>
-          使用手机应用扫描二维码，或者输入秘钥 {twoFactorInfo?.secret}
+          {intl.get('使用手机应用扫描二维码，或者输入秘钥')}{' '}
+          {twoFactorInfo?.secret}
           <div style={{ marginTop: 10 }}>
             <QRCode
               style={{ border: '1px solid #21262d', borderRadius: 6 }}
@@ -149,9 +151,9 @@ const SecuritySettings = ({ user, userChange }: any) => {
             />
           </div>
           <Title style={{ marginTop: 5 }} level={5}>
-            第三步
+            {intl.get('第三步')}
           </Title>
-          输入手机应用上的6位数字
+          {intl.get('输入手机应用上的6位数字')}
           <Input
             style={{ margin: '10px 0 10px 0', display: 'block', maxWidth: 200 }}
             value={code}
@@ -159,7 +161,7 @@ const SecuritySettings = ({ user, userChange }: any) => {
             placeholder="123456"
           />
           <Button type="primary" loading={loading} onClick={completeTowFactor}>
-            完成设置
+            {intl.get('完成设置')}
           </Button>
         </div>
       ) : (
@@ -176,35 +178,35 @@ const SecuritySettings = ({ user, userChange }: any) => {
           paddingBottom: 4,
         }}
       >
-        修改用户名密码
+        {intl.get('修改用户名密码')}
       </div>
       <Form onFinish={handleOk} layout="vertical">
         <Form.Item
-          label="用户名"
+          label={intl.get('用户名')}
           name="username"
           rules={[{ required: true }]}
           hasFeedback
           style={{ maxWidth: 300 }}
         >
-          <Input placeholder="用户名" />
+          <Input placeholder={intl.get('用户名')} />
         </Form.Item>
         <Form.Item
-          label="密码"
+          label={intl.get('密码')}
           name="password"
           rules={[
             { required: true },
             {
               pattern: /^(?!admin$).*$/,
-              message: '密码不能为admin',
+              message: intl.get('密码不能为admin'),
             },
           ]}
           hasFeedback
           style={{ maxWidth: 300 }}
         >
-          <Input type="password" placeholder="密码" />
+          <Input type="password" placeholder={intl.get('密码')} />
         </Form.Item>
         <Button type="primary" htmlType="submit">
-          保存
+          {intl.get('保存')}
         </Button>
       </Form>
 
@@ -217,14 +219,14 @@ const SecuritySettings = ({ user, userChange }: any) => {
           marginTop: 16,
         }}
       >
-        两步验证
+        {intl.get('两步验证')}
       </div>
       <Button
         type="primary"
         danger={twoFactorActivated}
         onClick={activeOrDeactiveTwoFactor}
       >
-        {twoFactorActivated ? '禁用' : '启用'}
+        {twoFactorActivated ? intl.get('禁用') : intl.get('启用')}
       </Button>
 
       <div
@@ -236,7 +238,7 @@ const SecuritySettings = ({ user, userChange }: any) => {
           marginTop: 16,
         }}
       >
-        头像
+        {intl.get('头像')}
       </div>
       <Avatar size={128} shape="square" icon={<UserOutlined />} src={avatar} />
       <ImgCrop rotationSlider>
@@ -252,7 +254,7 @@ const SecuritySettings = ({ user, userChange }: any) => {
           }}
         >
           <Button icon={<UploadOutlined />} style={{ marginLeft: 8 }}>
-            更换头像
+            {intl.get('更换头像')}
           </Button>
         </Upload>
       </ImgCrop>

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