chore: add documentation page UI

src/locales/en-US/documentation/index.ts

@@ -0,0 +1,22 @@
+export const en_US_documentation = {
+  'app.documentation.introduction.title': 'Introduction',
+  'app.documentation.introduction.description': `
+    react-antd-admin is an enterprise - level background management system template based on react and ant-design.
+    Use the latest React Hooks API instead of the traditional class API,
+    Typescript was also used to standardize code readability and maintainability, enhancing development efficiency,
+    Use redux as the global state management library.
+    This project allows you to quickly develop a new project template and remove some of the code according to your needs. 
+    If you don't have a need to use templates,
+    This project will also be a good resource for learning react and typescript.
+    In addition, if you think this project is worth optimizing or modifying, 
+    please feel free to ask, my contact information will be shown at the bottom of the article.
+  `,
+  'app.documentation.catalogue.title': 'Catalogue',
+  'app.documentation.catalogue.description': 'Click the catalogue to quickly reach the specified content',
+  'app.documentation.catalogue.list.layout': 'Layout',
+  'app.documentation.catalogue.list.routes': 'Routes',
+  'app.documentation.catalogue.list.request': 'HTTP Request',
+  'app.documentation.catalogue.list.theme': 'Theme',
+  'app.documentation.catalogue.list.typescript': 'Typescript',
+  'app.documentation.catalogue.list.international': 'International'
+}

src/locales/en-US/index.ts

@@ -6,6 +6,7 @@ import { enUS_globalTips } from './global/tips'
 import { enUS_permissionRole } from './permission/role'
 import { enUS_dashboard } from './dashboard'
 import { enUS_guide } from './guide'
+import { en_US_documentation } from './documentation'
 
 const en_US = {
   ...enUS_account,
@@ -15,7 +16,8 @@ const en_US = {
   ...enUS_globalTips,
   ...enUS_permissionRole,
   ...enUS_dashboard,
-  ...enUS_guide
+  ...enUS_guide,
+  ...en_US_documentation
 }
 
 export default en_US

src/locales/en-US/user/title.ts

@@ -1,6 +1,7 @@
 export const enUS_title = {
   'title.login': 'Login',
   'title.dashboard': 'Dashboard',
+  'title.documentation': 'Documentation',
   'title.guide': 'Guide',
   'title.permission.route': 'Route Permission',
   'title.permission.button': 'Button Permission',

src/locales/zh-CN/documentation/index.ts

@@ -0,0 +1,20 @@
+export const zhCN_documentation = {
+  'app.documentation.introduction.title': '介绍',
+  'app.documentation.introduction.description': `
+    react-antd-admin是一个基于react和ant-design开发的企业级中后台管理系统模板。
+    使用了最新的React Hooks API代替了传统的class API，
+    并且使用了typescript来规范代码的可读性和维护性，增强开发效率，
+    使用redux作为全局的状态管理库。
+    此项目可以你的新项目模板快速开发，根据自己的需求删除掉部分代码。如果你没有使用模板的需求，
+    此项目也会是一个学习react和typescript的好的资料。
+    此外，如果你觉得此项目有值得优化或修改的地方，也欢迎提出，我的联系方式将会显示在文章底部。
+  `,
+  'app.documentation.catalogue.title': '目录',
+  'app.documentation.catalogue.description': '点击目录到达指定内容',
+  'app.documentation.catalogue.list.layout': '布局',
+  'app.documentation.catalogue.list.routes': '路由',
+  'app.documentation.catalogue.list.request': '网络请求',
+  'app.documentation.catalogue.list.theme': '主题',
+  'app.documentation.catalogue.list.typescript': 'Typescript',
+  'app.documentation.catalogue.list.international': '国际化'
+}

src/locales/zh-CN/index.ts

@@ -6,6 +6,7 @@ import { zhCN_globalTips } from './global/tips'
 import { zhCN_permissionRole } from './permission/role'
 import { zhCN_dashboard } from './dashboard'
 import { zhCN_guide } from './guide'
+import { zhCN_documentation } from './documentation'
 
 const zh_CN = {
   ...zhCN_account,
@@ -15,7 +16,8 @@ const zh_CN = {
   ...zhCN_globalTips,
   ...zhCN_permissionRole,
   ...zhCN_dashboard,
-  ...zhCN_guide
+  ...zhCN_guide,
+  ...zhCN_documentation
 }
 
 export default zh_CN

src/locales/zh-CN/user/title.ts

@@ -1,6 +1,7 @@
 export const zhCN_title = {
   'title.login': '登录',
   'title.dashboard': '首页',
+  'title.documentation': '文档',
   'title.guide': '引导页',
   'title.permission.route': '路由权限',
   'title.permission.button': '按钮权限',

src/mock/user/menu.mock.ts

@@ -12,14 +12,24 @@ const mockMenuList: MenuList = [
     key: '0',
     path: '/dashboard'
   },
+  {
+    name: 'documentation',
+    label: {
+      zh_CN: '文档',
+      en_US: 'Documentation'
+    },
+    icon: 'documentation',
+    key: '1',
+    path: '/documentation'
+  },
   {
     name: 'guide',
     label: {
       zh_CN: '引导',
       en_US: 'Guide'
     },
     icon: 'guide',
-    key: '1',
+    key: '2',
     path: '/guide'
   },
   {
@@ -29,7 +39,7 @@ const mockMenuList: MenuList = [
       en_US: 'Permission'
     },
     icon: 'permission',
-    key: '2',
+    key: '3',
     path: '/permission',
     children: [
       {

src/pages/dashboard/overview.tsx

@@ -109,7 +109,7 @@ const Overview: FC = () => {
   }, [])
 
   return (
-    <Row gutter={[20, 20]}>
+    <Row gutter={[12, 12]}>
       <ColCard
         loading={loading}
         metaName={formatMessage({ id: 'app.dashboard.overview.totalSales' })}

src/pages/dashboard/timeLine.tsx

@@ -48,7 +48,7 @@ const TimeLine: FC = () => {
   }, [])
 
   return (
-    <Card loading={loading} style={{ marginTop: 20 }}>
+    <Card loading={loading} style={{ marginTop: 12 }}>
       <ResponsiveContainer height={400}>
         <LineChart data={data} syncId="anyId">
           <CartesianGrid strokeDasharray="3 3" />

src/pages/doucumentation/index.tsx

@@ -0,0 +1,88 @@
+import React, { FC } from 'react'
+import { Typography } from 'antd'
+
+const { Title, Paragraph } = Typography
+import { LocaleFormatter } from '~/locales'
+
+const div = <div style={{ height: 200 }}>2333</div>
+
+const DocumentationPage: FC = () => {
+  return (
+    <div>
+      <Typography>
+        <Title>
+          <LocaleFormatter id="app.documentation.introduction.title" />
+        </Title>
+        <Paragraph>
+          <LocaleFormatter id="app.documentation.introduction.description" />
+        </Paragraph>
+        <Title>
+          <LocaleFormatter id="app.documentation.catalogue.title" />
+        </Title>
+        <Paragraph>
+          <LocaleFormatter id="app.documentation.catalogue.description" />
+        </Paragraph>
+        <Paragraph>
+          <ul>
+            <li>
+              <a href="#layout">
+                <LocaleFormatter id="app.documentation.catalogue.list.layout" />
+              </a>
+            </li>
+            <li>
+              <a href="#routes">
+                <LocaleFormatter id="app.documentation.catalogue.list.routes" />
+              </a>
+            </li>
+            <li>
+              <a href="#request">
+                <LocaleFormatter id="app.documentation.catalogue.list.request" />
+              </a>
+            </li>
+            <li>
+              <a href="#theme">
+                <LocaleFormatter id="app.documentation.catalogue.list.theme" />
+              </a>
+            </li>
+            <li>
+              <a href="#typescript">
+                <LocaleFormatter id="app.documentation.catalogue.list.typescript" />
+              </a>
+            </li>
+            <li>
+              <a href="#international">
+                <LocaleFormatter id="app.documentation.catalogue.list.international" />
+              </a>
+            </li>
+          </ul>
+        </Paragraph>
+        <Title id="layout" level={2}>
+          <LocaleFormatter id="app.documentation.catalogue.list.layout" />
+        </Title>
+        <Paragraph>{div}</Paragraph>
+        <Title id="routes" level={2}>
+          <LocaleFormatter id="app.documentation.catalogue.list.routes" />
+        </Title>
+        <Paragraph>{div}</Paragraph>
+        <Title id="request" level={2}>
+          <LocaleFormatter id="app.documentation.catalogue.list.request" />
+        </Title>
+        <Paragraph>{div}</Paragraph>
+        <Title id="theme" level={2}>
+          <LocaleFormatter id="app.documentation.catalogue.list.theme" />
+        </Title>
+        <Paragraph>{div}</Paragraph>
+        <Title id="typescript" level={2}>
+          <LocaleFormatter id="app.documentation.catalogue.list.typescript" />
+        </Title>
+        <Paragraph>{div}</Paragraph>
+        <Title id="international" level={2}>
+          <LocaleFormatter id="app.documentation.catalogue.list.international" />
+        </Title>
+        <Paragraph>{div}</Paragraph>
+      </Typography>
+    </div>
+  )
+}
+
+export default DocumentationPage

src/pages/layout/customIcon.tsx

@@ -3,6 +3,7 @@ import { ReactComponent as GuideSvg } from '~/assets/menu/guide.svg'
 import { ReactComponent as PermissionSvg } from '~/assets/menu/permission.svg'
 import { ReactComponent as DashboardSvg } from '~/assets/menu/dashboard.svg'
 import { ReactComponent as AccountSvg } from '~/assets/menu/account.svg'
+import { ReactComponent as DocumentationSvg } from '~/assets/menu/documentation.svg'
 
 interface Props {
   type: string
@@ -19,6 +20,8 @@ export const CustomIcon: FC<Props> = props => {
     com = <DashboardSvg />
   } else if (type === 'account') {
     com = <AccountSvg />
+  } else if (type === 'documentation') {
+    com = <DocumentationSvg />
   } else {
     com = <GuideSvg />
   }

src/pages/layout/index.less

@@ -34,10 +34,20 @@
     > :nth-child(2) {
       flex: auto;
       overflow-y: auto;
-      padding: 20px;
+      padding: 12px;
       box-sizing: border-box;
       // background-color: #292a2d !important;
       background-color: #1f1f1f !important;
+      .ant-form,
+      .ant-table-wrapper {
+        border: 6px solid rgb(41, 42, 45);
+        box-sizing: border-box;
+        padding: 6px;
+      }
+
+      .ant-form {
+        margin-bottom: 12px;
+      }
     }
   }
   .actions {

src/routes/index.tsx

@@ -4,6 +4,7 @@ import RenderRoutes, { RouteProps } from './config'
 import Dashboard from '~/pages/dashboard'
 import { Redirect } from 'react-router-dom'
 const NotFound = lazy(() => import(/* webpackChunkName: "404'"*/ '~/pages/404'))
+const Documentation = lazy(() => import(/* webpackChunkName: "404'"*/ '~/pages/doucumentation'))
 const Guide = lazy(() => import(/* webpackChunkName: "guide'"*/ '~/pages/guide'))
 const RoutePermission = lazy(() => import(/* webpackChunkName: "route-permission"*/ '~/pages/permission/route'))
 const ButtonPermission = lazy(() => import(/* webpackChunkName: "button-permission"*/ '~/pages/permission/button'))
@@ -27,6 +28,13 @@ const routerTree: RouteProps[] = [
       titleId: 'title.dashboard'
     }
   },
+  {
+    path: '/documentation',
+    component: Documentation,
+    meta: {
+      titleId: 'title.documentation'
+    }
+  },
   {
     path: '/guide',
     exact: true,