f

src/components/Upload/UploadFile.jsx

+import React, { useState } from 'react';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
+import Upload from './Upload';
+
+export default (props) => {
+  const { value, onChange } = props;
+  const { t } = useTranslation();
+
+  const [loading, setLoading] = useState(false);
+
+  const UploadButton = (props) => (
+    <div style={{ textAlign: 'center' }}>
+      {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>{t('authentication.uploadText')}</div>
+    </div>
+  );
+
+  const handleChange = info => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
+    }
+    if (info.file.status === 'error') {
+      setLoading(false);
+      return;
+    }
+
+    if (info.file.status === 'done') {
+      setLoading(false);
+      const { url, fileType } = info.file.response;
+    }
+  };
+
+  return (
+    <Upload
+      accept=".pdf"
+      onChange={handleChange}
+    >
+      {value ? '' : <UploadButton loading={loading} />}
+    </Upload>
+  )
+}

src/layouts/AuthLayout/components/Header/Language.jsx

 import { Select } from "antd";
 import React, { useMemo } from "react";
-import { useModel } from "@/store";
+// import { useModel } from "@/store";
+import i18n from '@/locale/config'
+
+let defaultLang = navigator.language;
+if (defaultLang.indexOf('zh') == 0) {
+  if (defaultLang == 'zh-CN' || defaultLang == 'zh') {
+    defaultLang = 'zh';
+  } else {
+    defaultLang = 'zht';
+  }
+} else {
+  defaultLang = 'en';
+}
+
 export default (props) => {
   const { style } = props;
 
   const styles = useMemo(() => {
     return { ...style, width: 120 };
   }, []);
+
+
   console.log(styles)
-  const { lang } = useModel("language");
+
   const language = [
-    { label: "中文简体", value: "zh-CN" },
-    { label: "中文繁体", value: "zh-Tw" },
-    { label: "英文", value: "en-Us" },
+    { label: "中文简体", value: "zh" },
+    { label: "中文繁体", value: "zht" },
+    { label: "英文", value: "en" },
   ];
-  return <Select defaultValue={lang} style={styles} options={language} />;
+
+  const onChange = (v) => {
+    i18n.changeLanguage(v);
+  }
+
+  return <Select defaultValue={defaultLang} style={styles} options={language} onChange={onChange} />;
 };

src/locale/config.js

     },
 };
 
+let defaultLang = navigator.language;
+if (defaultLang.indexOf('zh') == 0) {
+    if (defaultLang == 'zh-CN' || defaultLang == 'zh') {
+        defaultLang = 'zh';
+    } else {
+        defaultLang = 'zht';
+    }
+} else {
+    defaultLang = 'en';
+}
+
 i18n.use(initReactI18next).init({
     resources,
     // 默认语言  zh/en/zht  中文/英文/繁体
-    lng: 'en',
+    lng: defaultLang,
     interpolation: {
         escapeValue: false,
     },

src/locale/en.json

 {
   "language": "Language",
-  "switch": "Switch"
+  "switch": "Switch",
+  "accountmanagement": {
+    "title": "asdbasdfa"
+  },
+  "authentication": {
+    "title": "Real name authentication process",
+    "stepsTitle1": "Fill in the basic information of the enterprise",
+    "stepsTitle2": "Fill in the information of the company's directors",
+    "stepsTitle3": "Fill in the information of the beneficial owner of the enterprise",
+    "stepsTitle4": "Face recognition",
+    "stepsTitle5": "Confirm submission"
+  }
 }

src/locale/zh.json

 {
   "language": "语言",
-  "switch": "选择"
+  "switch": "选择",
+  "accountmanagement": {
+    "title": "qqq"
+  },
+  "authentication": {
+    "titleLeft": "实名认证流程",
+    "titleRight": "填写企业基础信息",
+    "stepsTitle1": "填写企业基础信息",
+    "stepsTitle2": "填写企业董事信息",
+    "stepsTitle3": "填写企业受益所有人信息",
+    "stepsTitle4": "人脸识别",
+    "stepsTitle5": "确认提交",
+
+    "rightTopSubTitle": "信息驳回",
+    "rightTopText": "基础信息：（1）请提供最新版公司商业登记证影印件； （2）请提供最新版NAR1文件，需彩色版本原件，如没有彩色版本原件，请补充缴费小票或收据",
+    "subTitleRight": "请上传如下文件",
+    "uploadText": "选择文件上传",
+    "uploadTitle1": "公司注册证书",
+    "uploadTitle2": "公司商业登记证",
+    "uploadTitle3": "NNC1/最新NAR1",
+    "uploadTitle4": "其他附件(选填,如变更文件等)",
+    "uploadPromptText1": "1.照片彩色、清晰、完整",
+    "uploadPromptText2": "2.支持PDF、JPG、JPEG、PNG、ZIP、RAR、XLSX、XLS格式",
+    "uploadPromptText3": "3.多份文件请打包压缩上传，文件大小不超过20MB",
+    "uploadPromptTextII4": "请上传彩色原件照片或扫描件，如五色彩版请补充缴费小票或收据",
+    "uploadPromptTextIII4": "4.若注册时间至今大于一年请提供最新的NAR1文件",
+    "uploadBtnText": "查看示例",
+    "enterpriseTypeRadio1": "私人股份有限公司",
+    "enterpriseTypeRadio2": "公众股份有限公司",
+    "enterpriseTypeRadio3": "有股本的公共无限公司",
+    "enterpriseTypeRadio4": "有股本的私人无限公司",
+    "formRightSelect1": "中国香港(地区)",
+    "formRightSelectPlaceholder1": "州/State/Province/Region",
+    "formRightSelectPlaceholderII1": "国家/地区",
+    "formRightInputPlaceholder2": "市/City",
+    "formRightInputPlaceholder3": "具体地址（如区、街道、建筑、门牌号）/Address Line",
+    "formRightInputPlaceholder4": "邮政编码/Postal Code",
+    "formRightInputPlaceholder5": "请选择雇员人数",
+    "formRightInputPlaceholder6": "请选择经营场所类型",
+    "formRightLabel1": "企业类型",
+    "formRightLabel2": "商业登记号码",
+    "formRightLabel3": "注册地址",
+    "formRightLabel4": "实际经营地址",
+    "formRightLabel5": "雇员人数",
+    "formRightLabel6": "经营场所类型",
+    "foundationInfoNextBtn": "下一步",
+
+    "subTitleRight2": "您的身份为",
+    "directorInfoRadioValue1": "企业董事",
+    "directorInfoRadioText1": "您本人为该企业的负责人，能够代表企业行驶职权",
+    "directorInfoRadioValue2": "被授权人",
+    "directorInfoRadioText2": "您本人被企业授权，能够代表企业处理事务",
+    "directorInfoLabel1": "国家",
+    "directorInfoLabel2": "证件类型",
+    "directorInfoSelectValue1": "中国大陆",
+    "directorInfoRadioValue": "身份证",
+    "directorInfoTitle": "请用手机扫描二维码拍摄上传",
+    "directorInfoContent1": "1.请用手机扫描二维码，或用手机打开分享链接，拍照上传证件照片",
+    "directorInfoContent2": "2.拍照上传图片保持清晰可见、完整，照片需要包含证件四角，无反光",
+    "directorInfoContent3": "3.如需修改上传图片，请重新扫描上传或重新打开分享链接",
+    "directorInfoContent4": "4.请拍摄证件原件，翻拍电子屏幕上的证件照片无发通过审核",
+    "directorInfoSubTitle1": "身份证人像面照片",
+    "directorInfoSubTitle2": "身份证国徽面照片",
+    "directorInfoIDCardRightText": "请用手机扫描二维码拍照上传",
+    "directorInfoLabel3": "中文姓名",
+    "directorInfoLabel4": "证件号码",
+    "directorInfoInputPlaceholder1": "请输入董事姓氏",
+    "directorInfoInputPlaceholder2": "请输入董事名称",
+    "directorInfoInputPlaceholder3": "请输入董事证件号码",
+    "directorInfoOtherDirectors": "其他董事"
+  }
 }

src/main.jsx

 import enUS from "antd/es/locale/en_US";
 import "moment/dist/locale/zh-cn";
 
+import "@/locale/config";
+
 ReactDOM.createRoot(document.getElementById("root")).render(
   <ConfigProvider locale={zhCN} >
     <Provider>

src/pages/accountmanagement/index.jsx

 import React from "react";
+import { Divider, Card, Steps } from "antd";
+import Page from "@/components/Page";
+// import i18n from "@/locale/config";
+import { useTranslation } from 'react-i18next';
+import "./style.less";
+
 export default (props) => {
-  return <div>11111111</div>;
+
+  const { t } = useTranslation();
+
+  return (
+    <Page title={t('accountmanagement.title')}>
+      <Card bordered={false}>
+        <div className="accountmanagement-box">
+          <div className="accountmanagement-left">
+            <Steps
+              progressDot
+              current={1}
+              direction="vertical"
+              items={[
+                {
+                  title: '确认账户需求',
+                },
+                {
+                  title: 'Finished'
+                },
+                {
+                  title: 'In Progress',
+                  description: 'This is a description. This is a description.',
+                },
+                {
+                  title: 'Waiting',
+                  description: 'This is a description.',
+                },
+                {
+                  title: 'Waiting',
+                  description: 'This is a description.',
+                },
+              ]}
+            />
+          </div>
+          <div style={{ flex: 1.5 }}>22</div>
+        </div>
+      </Card>
+    </Page>
+  )
 };
-                                               
 
 
 
 
 
 
-              
+

src/pages/accountmanagement/style.less

+.accountmanagement-box {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  .accountmanagement-left {
+    flex: 0.5;
+  }
+}

src/pages/accountsettings/index.jsx

 import React from 'react'
 export default (props) => {
-return (
-<div></div>
-)
+  return (
+    <div></div>
+  )
 }

src/pages/authentication/components/DirectorInfo.jsx

+import React from "react";
+import { Divider, Card, Steps, Button, Radio, Form, Input, Row, Col, Select, Image } from "antd";
+import { useTranslation } from 'react-i18next';
+import "../style.less";
+
+export default (props) => {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+
+  const onFinish = () => {
+
+  };
+
+  const url = "data:image/png;base64,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"
+
+  return (
+    <>
+      <div style={{ fontSize: '24px', fontWeight: '400' }}>{t('authentication.stepsTitle2')}</div>
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={onFinish}
+      >
+        <Card bordered={false} style={{ width: '900px', marginBottom: '24px' }}>
+          {/* 您的身份为 */}
+          <div style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.subTitleRight2')}</div>
+          <Form.Item>
+            <div style={{ marginBottom: '24px' }}>
+              <Radio style={{ fontSize: '16px' }}>{t('authentication.directorInfoRadioValue1')}</Radio>
+              <div>{t('authentication.directorInfoRadioText1')}</div>
+            </div>
+            <div style={{ marginBottom: '24px' }}>
+              <Radio style={{ fontSize: '16px' }}>{t('authentication.directorInfoRadioValue2')}</Radio>
+              <div>{t('authentication.directorInfoRadioText2')}</div>
+            </div>
+          </Form.Item>
+          {/* 企业董事 */}
+          <div style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.directorInfoRadioValue1')}</div>
+          <Form.Item label={t('authentication.directorInfoLabel1')}>
+            <Select defaultValue={t('authentication.directorInfoSelectValue1')}>
+              <Select.Option>{t('authentication.directorInfoSelectValue1')}</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item label={t('authentication.directorInfoLabel2')}>
+            <Radio style={{ fontSize: '16px' }}>{t('authentication.directorInfoRadioValue')}</Radio>
+          </Form.Item>
+          {/* 企业董事 */}
+          <div style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.directorInfoRadioValue1')}</div>
+          <Form.Item>
+            <div>{t('authentication.directorInfoContent1')}</div>
+            <div>{t('authentication.directorInfoContent2')}</div>
+            <div>{t('authentication.directorInfoContent3')}</div>
+            <div style={{ color: 'red' }}>{t('authentication.directorInfoContent4')}</div>
+            <Button type="link" style={{ padding: '4px 0' }}>{t('authentication.uploadBtnText')}</Button>
+          </Form.Item>
+          <Form.Item>
+            <div className="directorInfo-img-box">
+              <div style={{ fontSize: '16px' }}>{t('authentication.directorInfoSubTitle1')}</div>
+              <div>
+                <Image width={100} height={100} fallback={url} style={{ backgroundColor: '#00FA9A', opacity: '0.3' }} />
+                <div className="directorInfo-img-right-text">{t('authentication.directorInfoIDCardRightText')}</div>
+              </div>
+              <div style={{ marginTop: '24px', fontSize: '16px' }}>{t('authentication.directorInfoSubTitle2')}</div>
+              <div>
+                <Image width={100} height={100} fallback={url} style={{ backgroundColor: '#00FA9A', opacity: '0.3' }} />
+                <div className="directorInfo-img-right-text">{t('authentication.directorInfoIDCardRightText')}</div>
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item label={t('authentication.directorInfoLabel3')}>
+            <Input.Group>
+              <Row>
+                <Col span={8}>
+                  <Input placeholder={t('authentication.directorInfoInputPlaceholder1')} size="large" />
+                </Col>
+                <Col span={8} style={{ marginLeft: '36px' }}>
+                  <Input placeholder={t('authentication.directorInfoInputPlaceholder2')} size="large" />
+                </Col>
+              </Row>
+            </Input.Group>
+          </Form.Item>
+          <Form.Item label={t('authentication.directorInfoLabel4')} wrapperCol={{ span: 17 }}>
+            <Input placeholder={t('authentication.directorInfoInputPlaceholder3')} size="large" />
+          </Form.Item>
+          {/* 其他董事 */}
+          <div style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.directorInfoOtherDirectors')}</div>
+        </Card>
+
+      </Form>
+    </>
+  )
+}

src/pages/authentication/components/FoundationInfo.jsx

+import React from "react";
+import { Divider, Card, Steps, Button, Radio, Form, Input, Row, Col, Select } from "antd";
+import UploadFile from "@/components/Upload/UploadFile";
+import { useTranslation } from 'react-i18next';
+import "../style.less";
+
+export default (props) => {
+  const { index, setIndex } = props;
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  const onFinish = () => {
+
+  };
+
+  const onNext = () => {
+    setIndex(index + 1)
+  }
+
+  return (
+    <>
+      <div style={{ fontSize: '24px', fontWeight: '400' }}>{t('authentication.titleRight')}</div>
+      <Card bordered={false} style={{ width: '900px', marginBottom: '24px' }}>
+        <div style={{ color: 'red', fontWeight: '600' }}>{t('authentication.rightTopSubTitle')}</div>
+        <div style={{ color: '#bfbfbf' }}>{t('authentication.rightTopText')}</div>
+      </Card>
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={onFinish}
+      >
+        <Card bordered={false} style={{ width: '900px', marginBottom: '24px' }}>
+          <Form.Item>
+            <div style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.subTitleRight')}</div>
+            <div style={{ marginTop: '40px', fontSize: '16px' }}>{t('authentication.uploadTitle1')}</div>
+            <div style={{ display: 'flex', alignItem: 'stretch' }}>
+              <div className="authentication-right-upload-box">
+                <UploadFile />
+              </div>
+              <div style={{ flex: 1.2 }}>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText1')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText2')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText3')}</div>
+                <Button type="link">{t('authentication.uploadBtnText')}</Button>
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item>
+            <div style={{ marginTop: '40px', fontSize: '16px' }}>{t('authentication.uploadTitle2')}</div>
+            <div style={{ display: 'flex', alignItem: 'stretch' }}>
+              <div className="authentication-right-upload-box">
+                <UploadFile />
+              </div>
+              <div style={{ flex: 1.2 }}>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText1')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText2')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText3')}</div>
+                <div style={{ padding: '0 15px', fontWeight: '600' }}>4.{t('authentication.uploadPromptTextII4')}</div>
+                <Button type="link">{t('authentication.uploadBtnText')}</Button>
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item>
+            <div style={{ marginTop: '40px', fontSize: '16px' }}>{t('authentication.uploadTitle3')}</div>
+            <div style={{ display: 'flex', alignItem: 'stretch' }}>
+              <div className="authentication-right-upload-box">
+                <UploadFile />
+              </div>
+              <div style={{ flex: 1.2 }}>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText1')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText2')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText3')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptTextIII4')}</div>
+                <div style={{ padding: '0 15px', fontWeight: '600' }}>5.{t('authentication.uploadPromptTextII4')}</div>
+                <Button type="link">{t('authentication.uploadBtnText')}</Button>
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item>
+            <div style={{ marginTop: '40px', fontSize: '16px' }}>{t('authentication.uploadTitle4')}</div>
+            <div style={{ display: 'flex', alignItem: 'stretch' }}>
+              <div className="authentication-right-upload-box">
+                <UploadFile />
+              </div>
+              <div style={{ flex: 1.2 }}>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText1')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText2')}</div>
+                <div style={{ padding: '0 15px' }}>{t('authentication.uploadPromptText3')}</div>
+                <Button type="link">{t('authentication.uploadBtnText')}</Button>
+              </div>
+            </div>
+          </Form.Item>
+        </Card>
+        <Card bordered={false} style={{ width: '900px', marginBottom: '24px' }}>
+          <Form.Item label={t('authentication.formRightLabel1')}>
+            <Radio style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.enterpriseTypeRadio1')}</Radio>
+            <Radio style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.enterpriseTypeRadio2')}</Radio>
+            <Radio style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.enterpriseTypeRadio3')}</Radio>
+            <Radio style={{ fontSize: '16px', fontWeight: '600' }}>{t('authentication.enterpriseTypeRadio4')}</Radio>
+          </Form.Item>
+          <Form.Item label={t('authentication.formRightLabel2')}>
+            <Input.Group>
+              <Row>
+                <Col span={8}>
+                  <Input placeholder="12345678" size="large" />
+                </Col>
+                <Col span={4}><Input placeholder="000" size="large" /></Col>
+              </Row>
+            </Input.Group>
+          </Form.Item>
+
+
+          <Form.Item label={t('authentication.formRightLabel3')} wrapperCol={{ span: 8 }}>
+            <Select defaultValue={t('authentication.formRightSelect1')}>
+            </Select>
+          </Form.Item>
+
+          <Form.Item>
+            <Select placeholder={t('authentication.formRightSelectPlaceholder1')}>
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Input placeholder={t('authentication.formRightInputPlaceholder2')} />
+          </Form.Item>
+          <Form.Item>
+            <Input placeholder={t('authentication.formRightInputPlaceholder3')} />
+          </Form.Item>
+          <Form.Item>
+            <Input placeholder={t('authentication.formRightInputPlaceholder4')} />
+          </Form.Item>
+          <Form.Item label={t('authentication.formRightLabel4')} wrapperCol={{ span: 8 }}>
+            <Select defaultValue={t('authentication.formRightSelectPlaceholderII1')}>
+            </Select>
+          </Form.Item>
+
+          <Form.Item>
+            <Select placeholder={t('authentication.formRightSelectPlaceholder1')}>
+            </Select>
+          </Form.Item>
+          <Form.Item>
+            <Input placeholder={t('authentication.formRightInputPlaceholder2')} />
+          </Form.Item>
+          <Form.Item>
+            <Input placeholder={t('authentication.formRightInputPlaceholder3')} />
+          </Form.Item>
+          <Form.Item>
+            <Input placeholder={t('authentication.formRightInputPlaceholder4')} />
+          </Form.Item>
+
+          <Form.Item label={t('authentication.formRightLabel5')}>
+            <Select placeholder={t('authentication.formRightInputPlaceholder5')}>
+            </Select>
+          </Form.Item>
+          <Form.Item label={t('authentication.formRightLabel6')}>
+            <Select placeholder={t('authentication.formRightInputPlaceholder6')}>
+            </Select>
+          </Form.Item>
+          <Button type="primary" onClick={onNext} >{t('authentication.foundationInfoNextBtn')}</Button>
+        </Card>
+      </Form>
+    </>
+  )
+}

src/pages/authentication/index.jsx

+import React, { useState } from "react";
+import { Divider, Card, Steps, Button, Radio, Form, Input, Row, Col, Select } from "antd";
+import Page from "@/components/Page";
+import FoundationInfo from "./components/FoundationInfo";
+import DirectorInfo from "./components/DirectorInfo";
+import { useTranslation } from 'react-i18next';
+import "./style.less";
+
+export default (props) => {
+  const { t } = useTranslation();
+  const [index, setIndex] = useState(0);
+  return (
+    <Page>
+      <div className="authentication-box">
+        <div className="authentication-left">
+          <div style={{ fontSize: '24px', fontWeight: '400' }}>{t('authentication.titleLeft')}</div>
+          <Card bordered={false}>
+            <Steps
+              style={{ height: '360px' }}
+              progressDot
+              current={index}
+              direction="vertical"
+              items={[
+                {
+                  title: t('authentication.stepsTitle1'),
+                },
+                {
+                  title: t('authentication.stepsTitle2')
+                },
+                {
+                  title: t('authentication.stepsTitle3')
+                },
+                {
+                  title: t('authentication.stepsTitle4')
+                },
+                {
+                  title: t('authentication.stepsTitle5')
+                },
+              ]}
+            />
+          </Card>
+        </div>
+        <div style={{ flex: 1.5 }}>
+          {
+            index === 0 && (
+              <FoundationInfo index={index} setIndex={setIndex} />
+            )
+          },
+          {
+            index === 1 && (
+              <DirectorInfo />
+            )
+          }
+        </div>
+      </div>
+    </Page>
+  )
+}

src/pages/authentication/style.less

+.authentication-box {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  .authentication-left {
+    flex: 0.5;
+    margin-right: 36px;
+  }
+  .authentication-right-upload-box {
+    width: 200px;
+    height: 120px;
+    border-radius: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px dashed;
+    display: 1;
+    flex: 0.8;
+  }
+  .directorInfo-img-right-text {
+    font-size: 16px;
+    padding-left: 1em;
+    display: inline-block;
+  }
+  .directorInfo-img-box {
+    padding: 12px;
+    width: 600px;
+    background-color: #bfbfbf;
+  }
+}

src/routes/routes.jsx

 import AuthLayout from "@/layouts/AuthLayout";
 import Login from "@/pages/login";
 import Page404 from "@/pages/404";
+import Authentication from "@/pages/authentication";
 import HomePage from "@/pages/homepage";
 import AccountManagement from "@/pages/accountmanagement";
 import QuickPass from "@/pages/quickpass";
     // index: true,
     element: <Navigate to="/homepage" />,
   },
-
+  // 实名认证流程
+  {
+    path: "/authentication",
+    element: <Authentication />,
+    meta: {
+      title: "",
+      hideInMenu: true
+    },
+  },
   {
     path: "homepage",
     element: <HomePage />,
     element: <Outlet />,
     meta: {
       title: "量子卡",
-      icon: <CreditCardOutlined/>,
+      icon: <CreditCardOutlined />,
     },
     children: [
       {
         meta: {
           title: "量子额度卡",
         },
-      },  {
+      }, {
         path: "transactioninquiry",
         element: <TransactionInquiry />,
         meta: {
   },
 ];
 
-export function mergeAuthRoutes(r1, r2) {
+export function mergeAuthRoutes (r1, r2) {
   const r = r1.slice();
   const children = r1[0].children.slice();
   r[0].children = children.concat(r2);
 // 全部路由
 export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
 console.log(routes);
-function getPath(parent = "/", current = "") {
+function getPath (parent = "/", current = "") {
   if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
     return current;
   return `${parent}/${current}`.replace(/\/\//g, "/");