From 3ca4d488d62c5e06ffea0a04ecfde19e9a5b3bce Mon Sep 17 00:00:00 2001 From: Winme Date: Thu, 6 Feb 2020 17:08:44 +0800 Subject: [PATCH] chore: add documentation page UI --- src/assets/menu/documentation.svg | 1 + src/locales/en-US/documentation/index.ts | 22 ++++++ src/locales/en-US/index.ts | 4 +- src/locales/en-US/user/title.ts | 1 + src/locales/zh-CN/documentation/index.ts | 20 ++++++ src/locales/zh-CN/index.ts | 4 +- src/locales/zh-CN/user/title.ts | 1 + src/mock/user/menu.mock.ts | 14 +++- src/pages/dashboard/overview.tsx | 2 +- src/pages/dashboard/timeLine.tsx | 2 +- src/pages/doucumentation/index.tsx | 88 ++++++++++++++++++++++++ src/pages/layout/customIcon.tsx | 3 + src/pages/layout/index.less | 12 +++- src/routes/index.tsx | 8 +++ 14 files changed, 175 insertions(+), 7 deletions(-) create mode 100644 src/assets/menu/documentation.svg create mode 100644 src/locales/en-US/documentation/index.ts create mode 100644 src/locales/zh-CN/documentation/index.ts create mode 100644 src/pages/doucumentation/index.tsx diff --git a/src/assets/menu/documentation.svg b/src/assets/menu/documentation.svg new file mode 100644 index 0000000..4d3393b --- /dev/null +++ b/src/assets/menu/documentation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/locales/en-US/documentation/index.ts b/src/locales/en-US/documentation/index.ts new file mode 100644 index 0000000..97f0752 --- /dev/null +++ b/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' +} diff --git a/src/locales/en-US/index.ts b/src/locales/en-US/index.ts index 93e5d6d..2ee5057 100644 --- a/src/locales/en-US/index.ts +++ b/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 diff --git a/src/locales/en-US/user/title.ts b/src/locales/en-US/user/title.ts index 2dcf952..bf711ca 100644 --- a/src/locales/en-US/user/title.ts +++ b/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', diff --git a/src/locales/zh-CN/documentation/index.ts b/src/locales/zh-CN/documentation/index.ts new file mode 100644 index 0000000..e3a932c --- /dev/null +++ b/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': '国际化' +} diff --git a/src/locales/zh-CN/index.ts b/src/locales/zh-CN/index.ts index 3a52753..c971050 100644 --- a/src/locales/zh-CN/index.ts +++ b/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 diff --git a/src/locales/zh-CN/user/title.ts b/src/locales/zh-CN/user/title.ts index 74a4177..8d5f64f 100644 --- a/src/locales/zh-CN/user/title.ts +++ b/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': '按钮权限', diff --git a/src/mock/user/menu.mock.ts b/src/mock/user/menu.mock.ts index 7ac76ee..025593f 100644 --- a/src/mock/user/menu.mock.ts +++ b/src/mock/user/menu.mock.ts @@ -12,6 +12,16 @@ const mockMenuList: MenuList = [ key: '0', path: '/dashboard' }, + { + name: 'documentation', + label: { + zh_CN: '文档', + en_US: 'Documentation' + }, + icon: 'documentation', + key: '1', + path: '/documentation' + }, { name: 'guide', label: { @@ -19,7 +29,7 @@ const mockMenuList: MenuList = [ 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: [ { diff --git a/src/pages/dashboard/overview.tsx b/src/pages/dashboard/overview.tsx index 45b5879..fb40826 100644 --- a/src/pages/dashboard/overview.tsx +++ b/src/pages/dashboard/overview.tsx @@ -109,7 +109,7 @@ const Overview: FC = () => { }, []) return ( - + { }, []) return ( - + diff --git a/src/pages/doucumentation/index.tsx b/src/pages/doucumentation/index.tsx new file mode 100644 index 0000000..98b3337 --- /dev/null +++ b/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 =
2333
+ +const DocumentationPage: FC = () => { + return ( +
+ + + <LocaleFormatter id="app.documentation.introduction.title" /> + + + + + + <LocaleFormatter id="app.documentation.catalogue.title" /> + + + + + + + + + <LocaleFormatter id="app.documentation.catalogue.list.layout" /> + + {div} + + <LocaleFormatter id="app.documentation.catalogue.list.routes" /> + + {div} + + <LocaleFormatter id="app.documentation.catalogue.list.request" /> + + {div} + + <LocaleFormatter id="app.documentation.catalogue.list.theme" /> + + {div} + + <LocaleFormatter id="app.documentation.catalogue.list.typescript" /> + + {div} + + <LocaleFormatter id="app.documentation.catalogue.list.international" /> + + {div} + +
+ ) +} + +export default DocumentationPage diff --git a/src/pages/layout/customIcon.tsx b/src/pages/layout/customIcon.tsx index 92492c0..2c98080 100644 --- a/src/pages/layout/customIcon.tsx +++ b/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 => { com = } else if (type === 'account') { com = + } else if (type === 'documentation') { + com = } else { com = } diff --git a/src/pages/layout/index.less b/src/pages/layout/index.less index 290e765..1108707 100644 --- a/src/pages/layout/index.less +++ b/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 { diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 57e5fa0..07f7eb0 100644 --- a/src/routes/index.tsx +++ b/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,