支持多语言英文

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