= ({ message, description }) => {
10 | return (
11 |
12 |
13 |
14 | );
15 | };
16 |
17 | export default SuspendFallbackLoading;
18 |
--------------------------------------------------------------------------------
/src/layout/tagView/index.tsx:
--------------------------------------------------------------------------------
1 | import { Tabs } from 'antd';
2 | import { observer } from 'mobx-react-lite';
3 | import { FC, useCallback, useEffect } from 'react';
4 | import { useLocation, useNavigate } from 'react-router-dom';
5 |
6 | import { tagsViewStore } from '@/stores/tags-view';
7 | import { userStore } from '@/stores/user';
8 |
9 | import TagsViewAction from './tagViewAction';
10 |
11 | const { TabPane } = Tabs;
12 |
13 | const TagsView: FC = () => {
14 | const { tags, activeTagId } = tagsViewStore;
15 | const { locale, routeList } = userStore;
16 | const navigate = useNavigate();
17 | const location = useLocation();
18 |
19 | // onClick tag
20 | const onChange = (key: string) => {
21 | const tag = tags.find(tag => tag.id === key);
22 | if (tag) {
23 | setCurrentTag(tag.id);
24 | navigate(tag.path);
25 | }
26 | };
27 |
28 | // onRemove tag
29 | const onClose = (targetKey: string) => {
30 | tagsViewStore.removeTag(targetKey);
31 | };
32 |
33 | const setCurrentTag = useCallback(
34 | (id?: string) => {
35 | const tag = tags.find(item => {
36 | if (id) {
37 | return item.id === id;
38 | } else {
39 | return item.path === location.pathname;
40 | }
41 | });
42 |
43 | if (tag) {
44 | tagsViewStore.setActiveTag(tag.id);
45 | }
46 | },
47 | [location.pathname, tags]
48 | );
49 |
50 | useEffect(() => {
51 | if (routeList.length) {
52 | const menu = routeList.find(m => m.key === location.pathname);
53 | if (menu) {
54 | // Initializes dashboard page.
55 | const dashboard = routeList[0];
56 | tagsViewStore.addTag({
57 | path: dashboard.key,
58 | title: dashboard.meta?.title || '',
59 | id: dashboard.key,
60 | closable: false
61 | });
62 | // Initializes the tag generated for the current page
63 | // Duplicate tag will be ignored in redux.
64 | tagsViewStore.addTag({
65 | path: menu.key,
66 | title: menu.meta?.title || '',
67 | id: menu.key,
68 | closable: true
69 | });
70 | }
71 | }
72 | }, [location.pathname, routeList]);
73 |
74 | //fix: remove tab route back auto
75 | useEffect(() => {
76 | if (tags && activeTagId) {
77 | const target = tags.find(e => e.id === activeTagId);
78 | if (target) {
79 | navigate(target.path);
80 | } else {
81 | setCurrentTag(tags[1].id);
82 | }
83 | }
84 | }, [tags, activeTagId, navigate, setCurrentTag]);
85 |
86 | return (
87 |
88 | action === 'remove' && onClose(targetKey as string)}
95 | tabBarExtraContent={}
96 | >
97 | {tags.map(tag => (
98 |
102 | {tag.title[locale]}
103 |
104 | }
105 | closable={tag.closable}
106 | />
107 | ))}
108 |
109 |
110 | );
111 | };
112 |
113 | export default observer(TagsView);
114 |
--------------------------------------------------------------------------------
/src/layout/tagView/tagViewAction.tsx:
--------------------------------------------------------------------------------
1 | import { SettingOutlined } from '@ant-design/icons';
2 | import { Dropdown, Menu } from 'antd';
3 | import type { DropDownProps } from 'antd/lib/dropdown/dropdown';
4 | import { observer } from 'mobx-react-lite';
5 | import { FC } from 'react';
6 |
7 | import { LocaleFormatter } from '@/locales';
8 | import { tagsViewStore } from '@/stores/tags-view';
9 |
10 | interface TagsViewActionProps extends Partial {
11 | activeTagId: string;
12 | }
13 |
14 | const TagsViewAction: FC = props => {
15 | const { activeTagId } = props;
16 | return (
17 |
21 | tagsViewStore.removeTag(activeTagId)}>
22 |
23 |
24 | tagsViewStore.removeOtherTag()}>
25 |
26 |
27 | tagsViewStore.removeAllTag()}>
28 |
29 |
30 |
31 | tagsViewStore.removeAllTag()}>
32 |
33 |
34 |
35 | }
36 | >
37 | {props.children ?? }
38 |
39 | );
40 | };
41 |
42 | export default observer(TagsViewAction);
43 |
--------------------------------------------------------------------------------
/src/locales/en-US/account/index.ts:
--------------------------------------------------------------------------------
1 | export const enUS_account = {
2 | 'app.settings.menuMap.basic': 'Basic Settings',
3 | 'app.settings.menuMap.security': 'Security Settings',
4 | 'app.settings.menuMap.binding': 'Account Binding',
5 | 'app.settings.menuMap.notification': 'New Message Notification',
6 | 'app.settings.basic.avatar': 'Avatar',
7 | 'app.settings.basic.change-avatar': 'Change avatar',
8 | 'app.settings.basic.email': 'Email',
9 | 'app.settings.basic.email-message': 'Please input your email!',
10 | 'app.settings.basic.nickname': 'Nickname',
11 | 'app.settings.basic.nickname-message': 'Please input your Nickname!',
12 | 'app.settings.basic.profile': 'Personal profile',
13 | 'app.settings.basic.profile-message': 'Please input your personal profile!',
14 | 'app.settings.basic.profile-placeholder': 'Brief introduction to yourself',
15 | 'app.settings.basic.country': 'Country/Region',
16 | 'app.settings.basic.country-message': 'Please input your country!',
17 | 'app.settings.basic.geographic': 'Province or city',
18 | 'app.settings.basic.geographic-message': 'Please input your geographic info!',
19 | 'app.settings.basic.address': 'Street Address',
20 | 'app.settings.basic.address-message': 'Please input your address!',
21 | 'app.settings.basic.phone': 'Phone Number',
22 | 'app.settings.basic.phone-message': 'Please input your phone!',
23 | 'app.settings.basic.update': 'Update Information',
24 | 'app.settings.security.strong': 'Strong',
25 | 'app.settings.security.medium': 'Medium',
26 | 'app.settings.security.weak': 'Weak',
27 | 'app.settings.security.password': 'Account Password',
28 | 'app.settings.security.password-description': 'Current password strength',
29 | 'app.settings.security.phone': 'Security Phone',
30 | 'app.settings.security.phone-description': 'Bound phone',
31 | 'app.settings.security.question': 'Security Question',
32 | 'app.settings.security.question-description':
33 | 'The security question is not set, and the security policy can effectively protect the account security',
34 | 'app.settings.security.email': 'Backup Email',
35 | 'app.settings.security.email-description': 'Bound Email',
36 | 'app.settings.security.mfa': 'MFA Device',
37 | 'app.settings.security.mfa-description': 'Unbound MFA device, after binding, can be confirmed twice',
38 | 'app.settings.security.modify': 'Modify',
39 | 'app.settings.security.set': 'Set',
40 | 'app.settings.security.bind': 'Bind',
41 | 'app.settings.binding.taobao': 'Binding Taobao',
42 | 'app.settings.binding.taobao-description': 'Currently unbound Taobao account',
43 | 'app.settings.binding.alipay': 'Binding Alipay',
44 | 'app.settings.binding.alipay-description': 'Currently unbound Alipay account',
45 | 'app.settings.binding.dingding': 'Binding DingTalk',
46 | 'app.settings.binding.dingding-description': 'Currently unbound DingTalk account',
47 | 'app.settings.binding.bind': 'Bind',
48 | 'app.settings.notification.password': 'Account Password',
49 | 'app.settings.notification.password-description':
50 | 'Messages from other users will be notified in the form of a station letter',
51 | 'app.settings.notification.messages': 'System Messages',
52 | 'app.settings.notification.messages-description': 'System messages will be notified in the form of a station letter',
53 | 'app.settings.notification.todo': 'To-do Notification',
54 | 'app.settings.notification.todo-description':
55 | 'The to-do list will be notified in the form of a letter from the station',
56 | 'app.settings.open': 'Open',
57 | 'app.settings.close': 'Close'
58 | };
59 |
--------------------------------------------------------------------------------
/src/locales/en-US/dashboard/index.ts:
--------------------------------------------------------------------------------
1 | export const enUS_dashboard = {
2 | 'app.dashboard.overview.totalSales': 'Total Sales',
3 | 'app.dashboard.overview.visits': 'Visits',
4 | 'app.dashboard.overview.payments': 'Payments',
5 | 'app.dashboard.overview.operationalEffect': 'Operational Effect',
6 | 'app.dashboard.overview.wowChange': 'WoW Change',
7 | 'app.dashboard.overview.dodChange': 'DoD Change',
8 | 'app.dashboard.overview.dailySales': 'Daily Sales',
9 | 'app.dashboard.overview.visits.dailyVisits': 'Daily Visits',
10 | 'app.dashboard.overview.conversionRate': 'Conversion Rate',
11 | 'app.dashboard.salePercent.proportionOfSales': 'The Proportion Of Sales',
12 | 'app.dashboard.salePercent.all': 'All',
13 | 'app.dashboard.salePercent.online': 'Online',
14 | 'app.dashboard.salePercent.offline': 'Offline',
15 | 'app.dashboard.timeline.traffic': 'Traffic',
16 | 'app.dashboard.timeline.payments': 'Payments'
17 | };
18 |
--------------------------------------------------------------------------------
/src/locales/en-US/documentation/index.ts:
--------------------------------------------------------------------------------
1 | export const en_US_documentation = {
2 | 'app.documentation.introduction.title': 'Introduction',
3 | 'app.documentation.introduction.description': `
4 | react-antd-admin is an enterprise - level background management system template based on react and ant-design.
5 | Use the latest React Hooks API instead of the traditional class API,
6 | Typescript was also used to standardize code readability and maintainability, enhancing development efficiency,
7 | Use redux as the global state management library.
8 | This project allows you to quickly develop a new project template and remove some of the code according to your needs.
9 | If you don't have a need to use templates,
10 | This project will also be a good resource for learning react and typescript.
11 | In addition, if you think this project is worth optimizing or modifying,
12 | please feel free to ask, my contact information will be shown at the bottom of the article.
13 | `,
14 | 'app.documentation.catalogue.title': 'Catalogue',
15 | 'app.documentation.catalogue.description': 'Click the catalogue to quickly reach the specified content',
16 | 'app.documentation.catalogue.list.layout': 'Layout',
17 | 'app.documentation.catalogue.list.routes': 'Routes',
18 | 'app.documentation.catalogue.list.request': 'HTTP Request',
19 | 'app.documentation.catalogue.list.theme': 'Theme',
20 | 'app.documentation.catalogue.list.typescript': 'Typescript',
21 | 'app.documentation.catalogue.list.international': 'International'
22 | };
23 |
--------------------------------------------------------------------------------
/src/locales/en-US/global/tips.ts:
--------------------------------------------------------------------------------
1 | export const enUS_globalTips = {
2 | 'gloabal.tips.notfound': 'Sorry, the page you visited does not exist.',
3 | 'gloabal.tips.unauthorized': 'Sorry, you are not authorized to access this page.',
4 | 'gloabal.tips.loginResult': 'When you see this page, it means you are logged in.',
5 | 'gloabal.tips.goToLogin': 'Go To Login',
6 | 'gloabal.tips.username': 'Username',
7 | 'gloabal.tips.password': 'Password',
8 | 'gloabal.tips.login': 'Login',
9 | 'gloabal.tips.backHome': 'Back Home',
10 | 'gloabal.tips.operation': 'Operation',
11 | 'gloabal.tips.authorize': 'Authorize',
12 | 'gloabal.tips.delete': 'Delete',
13 | 'gloabal.tips.create': 'Create',
14 | 'gloabal.tips.modify': 'Modify',
15 | 'gloabal.tips.search': 'Search',
16 | 'gloabal.tips.reset': 'Reset',
17 | 'gloabal.tips.deleteConfirm': 'Do you Want to delete these items?'
18 | };
19 |
--------------------------------------------------------------------------------
/src/locales/en-US/guide/index.ts:
--------------------------------------------------------------------------------
1 | export const enUS_guide = {
2 | 'app.guide.guideIntro': `The guide page is useful for
3 | some people who entered the
4 | project for the first time.
5 | You can briefly introduce
6 | the features of the project.
7 | Demo is based on`,
8 | 'app.guide.showGuide': 'Show Guide',
9 | 'app.guide.driverjs.closeBtnText': 'Close',
10 | 'app.guide.driverjs.prevBtnText': 'Previous',
11 | 'app.guide.driverjs.nextBtnText': 'Next',
12 | 'app.guide.driverjs.doneBtnText': 'Done',
13 | 'app.guide.driverStep.sidebarTrigger.title': 'Sidebar Trigger',
14 | 'app.guide.driverStep.sidebarTrigger.description': 'Open and close the Sidebar',
15 | 'app.guide.driverStep.notices.title': 'Notices',
16 | 'app.guide.driverStep.notices.description': 'All notification messages were be displayed here',
17 | 'app.guide.driverStep.switchLanguages.title': 'Switch Languages',
18 | 'app.guide.driverStep.switchLanguages.description': 'You can click here to switch languages',
19 | 'app.guide.driverStep.pageTabs.title': 'Page Tabs',
20 | 'app.guide.driverStep.pageTabs.description': 'The history of the page you visited will be displayed here',
21 | 'app.guide.driverStep.pageTabsActions.title': 'Page Tabs Actions',
22 | 'app.guide.driverStep.pageTabsActions.description': 'Click here to do some quick operations to the Page Tabs',
23 | 'app.guide.driverStep.switchTheme.title': 'Switch Theme',
24 | 'app.guide.driverStep.switchTheme.description': 'Click here to switch system theme color'
25 | };
26 |
--------------------------------------------------------------------------------
/src/locales/en-US/index.ts:
--------------------------------------------------------------------------------
1 | import { enUS_account } from './account';
2 | import { enUS_dashboard } from './dashboard';
3 | import { en_US_documentation } from './documentation';
4 | import { enUS_globalTips } from './global/tips';
5 | import { enUS_guide } from './guide';
6 | import { enUS_permissionRole } from './permission/role';
7 | import { enUS_avatorDropMenu } from './user/avatorDropMenu';
8 | import { enUS_tagsViewDropMenu } from './user/tagsViewDropMenu';
9 | import { enUS_title } from './user/title';
10 |
11 | const en_US = {
12 | ...enUS_account,
13 | ...enUS_avatorDropMenu,
14 | ...enUS_tagsViewDropMenu,
15 | ...enUS_title,
16 | ...enUS_globalTips,
17 | ...enUS_permissionRole,
18 | ...enUS_dashboard,
19 | ...enUS_guide,
20 | ...en_US_documentation
21 | };
22 |
23 | export default en_US;
24 |
--------------------------------------------------------------------------------
/src/locales/en-US/permission/role.ts:
--------------------------------------------------------------------------------
1 | export const enUS_permissionRole = {
2 | 'app.permission.role.name': 'Role Name',
3 | 'app.permission.role.code': 'Role Code',
4 | 'app.permission.role.status': 'Status',
5 | 'app.permission.role.status.all': 'All',
6 | 'app.permission.role.status.enabled': 'Enabled',
7 | 'app.permission.role.status.disabled': 'Disabled',
8 | 'app.permission.role.nameRequired': 'Please input the role name',
9 | 'app.permission.role.codeRequired': 'Please input the role code',
10 | 'app.permission.role.statusRequired': 'Please select the enabled status'
11 | };
12 |
--------------------------------------------------------------------------------
/src/locales/en-US/user/avatorDropMenu.ts:
--------------------------------------------------------------------------------
1 | export const enUS_avatorDropMenu = {
2 | 'header.avator.account': 'Account',
3 | 'header.avator.logout': 'Logout',
4 | 'global.theme.switchTheme': 'Switch Theme',
5 | 'global.theme.switchingTheme': 'Switching Theme...',
6 | 'global.theme.switchThemeDone': 'Update theme successfully!',
7 | 'global.theme.switchThemeFail': 'Update theme fail'
8 | };
9 |
--------------------------------------------------------------------------------
/src/locales/en-US/user/tagsViewDropMenu.ts:
--------------------------------------------------------------------------------
1 | export const enUS_tagsViewDropMenu = {
2 | 'tagsView.operation.closeCurrent': 'Close Current',
3 | 'tagsView.operation.closeOther': 'Close Other',
4 | 'tagsView.operation.closeAll': 'Close All',
5 | 'tagsView.operation.dashboard': 'Dashboard'
6 | };
7 |
--------------------------------------------------------------------------------
/src/locales/en-US/user/title.ts:
--------------------------------------------------------------------------------
1 | export const enUS_title = {
2 | 'title.login': 'Login',
3 | 'title.dashboard': 'Dashboard',
4 | 'title.documentation': 'Documentation',
5 | 'title.guide': 'Guide',
6 | 'title.permission.route': 'Route Permission',
7 | 'title.permission.button': 'Button Permission',
8 | 'title.permission.config': 'Permission Config',
9 | 'title.account': 'Account',
10 | 'title.notFount': '404'
11 | };
12 |
--------------------------------------------------------------------------------
/src/locales/index.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
3 |
4 | import en_US from './en-US';
5 | import zh_CN from './zh-CN';
6 |
7 | export const localeConfig = {
8 | zh_CN: zh_CN,
9 | en_US: en_US
10 | };
11 |
12 | type Id = keyof typeof en_US;
13 |
14 | interface Props extends MessageDescriptor {
15 | id: Id;
16 | }
17 |
18 | export const LocaleFormatter: FC = ({ ...props }) => {
19 | const notChildProps = { ...props, children: undefined };
20 | return ;
21 | };
22 |
23 | type FormatMessageProps = (descriptor: Props) => string;
24 |
25 | export const useLocale = () => {
26 | const { formatMessage: _formatMessage, ...rest } = useIntl();
27 | const formatMessage: FormatMessageProps = _formatMessage;
28 | return {
29 | ...rest,
30 | formatMessage
31 | };
32 | };
33 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/account/index.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_account = {
2 | 'app.settings.menuMap.basic': '基本设置',
3 | 'app.settings.menuMap.security': '安全设置',
4 | 'app.settings.menuMap.binding': '账号绑定',
5 | 'app.settings.menuMap.notification': '新消息通知',
6 | 'app.settings.basic.avatar': '头像',
7 | 'app.settings.basic.change-avatar': '更换头像',
8 | 'app.settings.basic.email': '邮箱',
9 | 'app.settings.basic.email-message': '请输入您的邮箱!',
10 | 'app.settings.basic.nickname': '昵称',
11 | 'app.settings.basic.nickname-message': '请输入您的昵称!',
12 | 'app.settings.basic.profile': '个人简介',
13 | 'app.settings.basic.profile-message': '请输入个人简介!',
14 | 'app.settings.basic.profile-placeholder': '个人简介',
15 | 'app.settings.basic.country': '国家/地区',
16 | 'app.settings.basic.country-message': '请输入您的国家或地区!',
17 | 'app.settings.basic.geographic': '所在省市',
18 | 'app.settings.basic.geographic-message': '请输入您的所在省市!',
19 | 'app.settings.basic.address': '街道地址',
20 | 'app.settings.basic.address-message': '请输入您的街道地址!',
21 | 'app.settings.basic.phone': '联系电话',
22 | 'app.settings.basic.phone-message': '请输入您的联系电话!',
23 | 'app.settings.basic.update': '更新基本信息',
24 | 'app.settings.security.strong': '强',
25 | 'app.settings.security.medium': '中',
26 | 'app.settings.security.weak': '弱',
27 | 'app.settings.security.password': '账户密码',
28 | 'app.settings.security.password-description': '当前密码强度',
29 | 'app.settings.security.phone': '密保手机',
30 | 'app.settings.security.phone-description': '已绑定手机',
31 | 'app.settings.security.question': '密保问题',
32 | 'app.settings.security.question-description': '未设置密保问题，密保问题可有效保护账户安全',
33 | 'app.settings.security.email': '备用邮箱',
34 | 'app.settings.security.email-description': '已绑定邮箱',
35 | 'app.settings.security.mfa': 'MFA 设备',
36 | 'app.settings.security.mfa-description': '未绑定 MFA 设备，绑定后，可以进行二次确认',
37 | 'app.settings.security.modify': '修改',
38 | 'app.settings.security.set': '设置',
39 | 'app.settings.security.bind': '绑定',
40 | 'app.settings.binding.taobao': '绑定淘宝',
41 | 'app.settings.binding.taobao-description': '当前未绑定淘宝账号',
42 | 'app.settings.binding.alipay': '绑定支付宝',
43 | 'app.settings.binding.alipay-description': '当前未绑定支付宝账号',
44 | 'app.settings.binding.dingding': '绑定钉钉',
45 | 'app.settings.binding.dingding-description': '当前未绑定钉钉账号',
46 | 'app.settings.binding.bind': '绑定',
47 | 'app.settings.notification.password': '账户密码',
48 | 'app.settings.notification.password-description': '其他用户的消息将以站内信的形式通知',
49 | 'app.settings.notification.messages': '系统消息',
50 | 'app.settings.notification.messages-description': '系统消息将以站内信的形式通知',
51 | 'app.settings.notification.todo': '待办任务',
52 | 'app.settings.notification.todo-description': '待办任务将以站内信的形式通知',
53 | 'app.settings.open': '开',
54 | 'app.settings.close': '关'
55 | };
56 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/dashboard/index.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_dashboard = {
2 | 'app.dashboard.overview.totalSales': '总销售额',
3 | 'app.dashboard.overview.visits': '访问量',
4 | 'app.dashboard.overview.payments': '支付笔数',
5 | 'app.dashboard.overview.operationalEffect': '运营活动效果',
6 | 'app.dashboard.overview.wowChange': '周同比',
7 | 'app.dashboard.overview.dodChange': '日同比',
8 | 'app.dashboard.overview.dailySales': '日销售额',
9 | 'app.dashboard.overview.visits.dailyVisits': '日访问量',
10 | 'app.dashboard.overview.conversionRate': '转化率',
11 | 'app.dashboard.salePercent.proportionOfSales': '销售额类别占比',
12 | 'app.dashboard.salePercent.all': '全部',
13 | 'app.dashboard.salePercent.online': '线上',
14 | 'app.dashboard.salePercent.offline': '线下',
15 | 'app.dashboard.timeline.traffic': '客流量',
16 | 'app.dashboard.timeline.payments': '支付笔数'
17 | };
18 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/documentation/index.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_documentation = {
2 | 'app.documentation.introduction.title': '介绍',
3 | 'app.documentation.introduction.description': `
4 | react-antd-admin是一个基于react和ant-design开发的企业级中后台管理系统模板。
5 | 使用了最新的React Hooks API代替了传统的class API，
6 | 并且使用了typescript来规范代码的可读性和维护性，增强开发效率，
7 | 使用redux作为全局的状态管理库。
8 | 此项目可以你的新项目模板快速开发，根据自己的需求删除掉部分代码。如果你没有使用模板的需求，
9 | 此项目也会是一个学习react和typescript的好的资料。
10 | 此外，如果你觉得此项目有值得优化或修改的地方，也欢迎提出，我的联系方式将会显示在文章底部。
11 | `,
12 | 'app.documentation.catalogue.title': '目录',
13 | 'app.documentation.catalogue.description': '点击目录到达指定内容',
14 | 'app.documentation.catalogue.list.layout': '布局',
15 | 'app.documentation.catalogue.list.routes': '路由',
16 | 'app.documentation.catalogue.list.request': '网络请求',
17 | 'app.documentation.catalogue.list.theme': '主题',
18 | 'app.documentation.catalogue.list.typescript': 'Typescript',
19 | 'app.documentation.catalogue.list.international': '国际化'
20 | };
21 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/global/tips.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_globalTips = {
2 | 'gloabal.tips.notfound': '对不起，您访问的页面不存在。',
3 | 'gloabal.tips.unauthorized': '对不起，您没有权限访问此页。',
4 | 'gloabal.tips.loginResult': '看到此页面代表您已登录。',
5 | 'gloabal.tips.goToLogin': '去登录',
6 | 'gloabal.tips.login': '登录',
7 | 'gloabal.tips.username': '用户名',
8 | 'gloabal.tips.password': '密码',
9 | 'gloabal.tips.rememberUser': '记住用户',
10 | 'gloabal.tips.backHome': '返回首页',
11 | 'gloabal.tips.operation': '操作',
12 | 'gloabal.tips.authorize': '授权',
13 | 'gloabal.tips.delete': '删除',
14 | 'gloabal.tips.create': '新建',
15 | 'gloabal.tips.modify': '修改',
16 | 'gloabal.tips.search': '搜索',
17 | 'gloabal.tips.reset': '重置',
18 | 'gloabal.tips.deleteConfirm': '确定要删除此条数据吗？'
19 | };
20 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/guide/index.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_guide = {
2 | 'app.guide.guideIntro': `引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于`,
3 | 'app.guide.showGuide': '打开引导',
4 | 'app.guide.driverjs.closeBtnText': '关闭',
5 | 'app.guide.driverjs.prevBtnText': '上一步',
6 | 'app.guide.driverjs.nextBtnText': '下一步',
7 | 'app.guide.driverjs.doneBtnText': '完成',
8 | 'app.guide.driverStep.sidebarTrigger.title': 'Siderbar开关',
9 | 'app.guide.driverStep.sidebarTrigger.description': '打开和关闭Siderbar',
10 | 'app.guide.driverStep.notices.title': '通知中心',
11 | 'app.guide.driverStep.notices.description': '所有通知消息都会显示在这里',
12 | 'app.guide.driverStep.switchLanguages.title': '切换语言',
13 | 'app.guide.driverStep.switchLanguages.description': '你可以点击这里来切换语言',
14 | 'app.guide.driverStep.pageTabs.title': '页面标签',
15 | 'app.guide.driverStep.pageTabs.description': '你的浏览历史会在这里集中显示',
16 | 'app.guide.driverStep.pageTabsActions.title': '标签操作栏',
17 | 'app.guide.driverStep.pageTabsActions.description': '点击这里可以对页面标签做一些快捷操作',
18 | 'app.guide.driverStep.switchTheme.title': '切换主题',
19 | 'app.guide.driverStep.switchTheme.description': '点击这里切换系统主题颜色'
20 | };
21 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/index.ts:
--------------------------------------------------------------------------------
1 | import { zhCN_account } from './account';
2 | import { zhCN_dashboard } from './dashboard';
3 | import { zhCN_documentation } from './documentation';
4 | import { zhCN_globalTips } from './global/tips';
5 | import { zhCN_guide } from './guide';
6 | import { zhCN_permissionRole } from './permission/role';
7 | import { zhCN_avatorDropMenu } from './user/avatorDropMenu';
8 | import { zhCN_tagsViewDropMenu } from './user/tagsViewDropMenu';
9 | import { zhCN_title } from './user/title';
10 |
11 | const zh_CN = {
12 | ...zhCN_account,
13 | ...zhCN_avatorDropMenu,
14 | ...zhCN_tagsViewDropMenu,
15 | ...zhCN_title,
16 | ...zhCN_globalTips,
17 | ...zhCN_permissionRole,
18 | ...zhCN_dashboard,
19 | ...zhCN_guide,
20 | ...zhCN_documentation
21 | };
22 |
23 | export default zh_CN;
24 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/permission/role.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_permissionRole = {
2 | 'app.permission.role.name': '角色名称',
3 | 'app.permission.role.code': '角色编码',
4 | 'app.permission.role.status': '状态',
5 | 'app.permission.role.status.all': '全部',
6 | 'app.permission.role.status.enabled': '启用',
7 | 'app.permission.role.status.disabled': '禁用',
8 | 'app.permission.role.nameRequired': '请输入角色名称',
9 | 'app.permission.role.codeRequired': '请输入角色编码',
10 | 'app.permission.role.statusRequired': '请选择角色启用状态'
11 | };
12 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/user/avatorDropMenu.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_avatorDropMenu = {
2 | 'header.avator.account': '个人设置',
3 | 'header.avator.logout': '退出登录',
4 | 'global.theme.switchTheme': '切换主题',
5 | 'global.theme.switchingTheme': '切换主题中...',
6 | 'global.theme.switchThemeDone': '主题更新成功',
7 | 'global.theme.switchThemeFail': '主题更新失败'
8 | };
9 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/user/tagsViewDropMenu.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_tagsViewDropMenu = {
2 | 'tagsView.operation.closeCurrent': '关闭当前',
3 | 'tagsView.operation.closeOther': '关闭其他',
4 | 'tagsView.operation.closeAll': '关闭全部',
5 | 'tagsView.operation.dashboard': '首页'
6 | };
7 |
--------------------------------------------------------------------------------
/src/locales/zh-CN/user/title.ts:
--------------------------------------------------------------------------------
1 | export const zhCN_title = {
2 | 'title.login': '登录',
3 | 'title.dashboard': '首页',
4 | 'title.documentation': '文档',
5 | 'title.guide': '引导页',
6 | 'title.permission.route': '路由权限',
7 | 'title.permission.button': '按钮权限',
8 | 'title.permission.config': '权限配置',
9 | 'title.account': '个人设置',
10 | 'title.notFount': '404'
11 | };
12 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import 'virtual:windi.css';
2 | import 'virtual:windi-devtools';
3 | import 'antd/dist/antd.less';
4 | import 'antd/lib/style/index.css';
5 | import './styles/index.less';
6 |
7 | import ReactDOM from 'react-dom';
8 |
9 | import App from './App';
10 | // import {RootStoreContext,} from '@/stores'
11 |
12 | ReactDOM.render(, document.getElementById('root'));
13 |
--------------------------------------------------------------------------------
/src/routes/config.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { useIntl } from 'react-intl';
3 | import { RouteProps } from 'react-router';
4 |
5 | import PrivateRoute from './pravateRoute';
6 |
7 | export interface WrapperRouteProps extends RouteProps {
8 | /** document title locale id */
9 | titleId: string;
10 | /** authorization？ */
11 | auth?: boolean;
12 | }
13 |
14 | const WrapperRouteComponent: FC = ({ titleId, auth, ...props }) => {
15 | const { formatMessage } = useIntl();
16 | const WitchRoute = auth ? : props.element;
17 | if (titleId) {
18 | requestIdleCallback(() => {
19 | document.title = formatMessage({
20 | id: titleId
21 | });
22 | });
23 | }
24 | return WitchRoute || null;
25 | };
26 |
27 | export default WrapperRouteComponent;
28 |
--------------------------------------------------------------------------------
/src/routes/generator-router.tsx:
--------------------------------------------------------------------------------
1 | import { Result } from 'antd';
2 |
3 | import { NotFound } from '@/routes';
4 | import WrapperRouteComponent from '@/routes/config';
5 | import { constantRouterComponents } from '@/routes/modules';
6 | import RouteView from '@/routes/routeView';
7 | import { isExternal } from '@/utils/validate';
8 |
9 | import { MenuItem } from './types';
10 |
11 | export function filterAsyncRoute(routes: API.Menu[], parentRoute: API.Menu | null, lastKeyPath: string[] = []) {
12 | return (
13 | routes
14 | // eslint-disable-next-line
15 | .filter(item => item.type !== 2 && item.isShow && item.parentId == parentRoute?.id)
16 | .map(item => {
17 | const { router, viewPath, name, icon, keepalive } = item;
18 | let fullPath = '';
19 | const pathPrefix = lastKeyPath.slice(-1)[0] || '';
20 | if (/http(s)?:/.test(router)) {
21 | fullPath = router;
22 | } else {
23 | fullPath = router.startsWith('/') ? router : '/' + router;
24 | fullPath = router.startsWith(pathPrefix) ? fullPath : pathPrefix + fullPath;
25 | fullPath = [...new Set(fullPath.split('/'))].join('/');
26 | }
27 | let realRoutePath = router;
28 | if (parentRoute) {
29 | if (fullPath.startsWith(parentRoute?.router)) {
30 | realRoutePath = fullPath.split(parentRoute.router)[1];
31 | } else if (!isExternal(parentRoute.router) && !isExternal(router)) {
32 | realRoutePath = router;
33 | }
34 | }
35 | realRoutePath = realRoutePath.startsWith('/') ? realRoutePath.slice(1) : realRoutePath;
36 | const route: MenuItem = {
37 | path: realRoutePath,
38 | key: fullPath,
39 | keyPath: lastKeyPath.concat(fullPath),
40 | // name: toHump(viewPath),
41 | meta: {
42 | title: {
43 | zh_CN: name,
44 | en_US: name
45 | },
46 | icon: icon,
47 | noCache: !keepalive
48 | }
49 | };
50 |
51 | if (item.type === 0) {
52 | // 如果是目录
53 | const children = filterAsyncRoute(routes, item, route.keyPath);
54 | if (children?.length) {
55 | route.element = } auth={true} titleId="title.dashboard" />;
56 | route.children = children;
57 | } else {
58 | route.element = (
59 |
64 | );
65 | }
66 | return route;
67 | } else if (item.type === 1) {
68 | // 如果是页面
69 | const Component = constantRouterComponents[viewPath.replace('.vue', '')] || NotFound;
70 | route.element = } auth={true} titleId="title.dashboard" />;
71 | return route;
72 | }
73 | return undefined;
74 | })
75 | .filter((item): item is MenuItem => !!item)
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { cloneDeep } from 'lodash';
2 | import { observer } from 'mobx-react-lite';
3 | import { FC, lazy, Suspense, useEffect, useMemo } from 'react';
4 | import type { RouteObject } from 'react-router';
5 | import { useLocation, useNavigate, useRoutes } from 'react-router-dom';
6 |
7 | import LayoutPage from '@/layout';
8 | import { SuspendFallbackLoading } from '@/layout/suspendFallbackLoading';
9 | import type { MenuList } from '@/routes/types';
10 | import { userStore } from '@/stores/user';
11 |
12 | import WrapperRouteComponent from './config';
13 |
14 | export const NotFound = lazy(() => import('@/views/error/404'));
15 | const LoginPage = lazy(() => import('@/views/login'));
16 | const Dashboard = lazy(() => import('@/views/dashboard'));
17 |
18 | const defaultRouteList: RouteObject[] = [
19 | {
20 | path: 'login',
21 | element: } titleId="title.login" />
22 | },
23 | {
24 | path: '/',
25 | element: } titleId="" />,
26 | children: []
27 | }
28 | ];
29 |
30 | /**
31 | * @description 默认的菜单项
32 | */
33 | export const defaultMenuRoutes: MenuList = [
34 | {
35 | path: '/dashboard',
36 | key: '/dashboard',
37 | element: } titleId="title.dashboard" />,
38 | meta: {
39 | title: {
40 | zh_CN: '首页',
41 | en_US: 'dashboard'
42 | }
43 | }
44 | }
45 | ];
46 |
47 | const errorPages = [
48 | {
49 | path: '*',
50 | element: } titleId="title.notFount" />
51 | }
52 | ];
53 |
54 | const DynamicRouter: FC = () => {
55 | const { token, menuList = [] } = userStore;
56 | const navigate = useNavigate();
57 | const { pathname, state } = useLocation();
58 |
59 | useEffect(() => {
60 | console.log('logged', !!token, state);
61 | if (!token && pathname !== '/login') {
62 | return navigate({ pathname: 'login' }, { replace: true, state: { from: pathname } });
63 | }
64 |
65 | if (token) {
66 | !menuList.length && userStore.afterLogin();
67 | if (pathname === '/login') {
68 | navigate({ pathname: '/' }, { replace: true });
69 | }
70 | }
71 | }, [menuList, token, navigate, pathname, state]);
72 |
73 | const newRoutes = useMemo(() => {
74 | const routes = cloneDeep(defaultRouteList);
75 | const layoutRoute = routes.find(item => item.path === '/')?.children;
76 | layoutRoute?.push(...cloneDeep([...defaultMenuRoutes, ...menuList]), ...errorPages);
77 | return routes;
78 | }, [menuList]);
79 |
80 | return ;
81 | };
82 |
83 | interface RenderRouterProps {
84 | routerList: RouteObject[];
85 | }
86 |
87 | const RenderRouter: FC = ({ routerList }) => {
88 | console.log('routerList', routerList);
89 | const element = useRoutes(routerList);
90 | return }>{element};
91 | };
92 |
93 | export default observer(DynamicRouter);
94 |
--------------------------------------------------------------------------------
/src/routes/modules/index.ts:
--------------------------------------------------------------------------------
1 | export const constantRouterComponents = {} as any;
2 |
3 | // auto load
4 | const modulesFiles = import.meta.globEager('./**/*.ts');
5 |
6 | Object.keys(modulesFiles).forEach(path => {
7 | if (path.startsWith('./index.')) return;
8 | const value = modulesFiles[path].default;
9 |
10 | // mouted
11 | Object.keys(value).forEach(ele => {
12 | constantRouterComponents[ele] = value[ele];
13 | });
14 | });
15 |
16 | console.log('constantRouterComponents', constantRouterComponents);
17 |
--------------------------------------------------------------------------------
/src/routes/modules/system.ts:
--------------------------------------------------------------------------------
1 | import { lazy } from 'react';
2 |
3 | /**
4 | * system module
5 | */
6 | export default {
7 | 'views/system/permission/user': lazy(() => import('@/views/system/permission/user')),
8 | 'views/system/permission/menu': lazy(() => import('@/views/system/permission/menu')),
9 | 'views/system/permission/role': lazy(() => import('@/views/system/permission/role')),
10 | 'views/system/monitor/req-log': lazy(() => import('@/views/system/monitor/req-log')),
11 | 'views/system/monitor/online': lazy(() => import('@/views/system/monitor/online')),
12 | 'views/system/monitor/serve': lazy(() => import('@/views/system/monitor/serve')),
13 | 'views/system/monitor/login-log': lazy(() => import('@/views/system/monitor/login-log')),
14 | 'views/system/schedule/task': lazy(() => import('@/views/system/schedule/task')),
15 | 'views/system/schedule/log': lazy(() => import('@/views/system/schedule/log'))
16 | };
17 |
--------------------------------------------------------------------------------
/src/routes/pravateRoute.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Result } from 'antd';
2 | import { FC } from 'react';
3 | import { useLocation } from 'react-router';
4 | import { RouteProps, useNavigate } from 'react-router-dom';
5 |
6 | import { useLocale } from '@/locales';
7 | import { userStore } from '@/stores/user';
8 |
9 | const PrivateRoute: FC = props => {
10 | const { token } = userStore;
11 | const navigate = useNavigate();
12 | const { formatMessage } = useLocale();
13 | const { pathname } = useLocation();
14 |
15 | return token ? (
16 | props.element || null
17 | ) : (
18 | navigate({ pathname: 'login' }, { replace: true, state: { from: pathname } })}
26 | >
27 | {formatMessage({ id: 'gloabal.tips.goToLogin' })}
28 |
29 | }
30 | />
31 | );
32 | };
33 |
34 | export default PrivateRoute;
35 |
--------------------------------------------------------------------------------
/src/routes/routeView.tsx:
--------------------------------------------------------------------------------
1 | import { FC, Suspense } from 'react';
2 | import { Outlet } from 'react-router';
3 |
4 | import SuspendFallbackLoading from '@/layout/suspendFallbackLoading';
5 |
6 | export const RouteView: FC = () => {
7 | return (
8 |
14 | }
15 | >
16 |
17 |
18 | );
19 | };
20 |
21 | export default RouteView;
22 |
--------------------------------------------------------------------------------
/src/routes/types.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react';
2 | // interface MenuItem {
3 | // /** menu item name */
4 | // name: string;
5 | // /** menu labels */
6 | // label: {
7 | // zh_CN: string;
8 | // en_US: string;
9 | // };
10 | // /** 图标名称
11 | // *
12 | // * 子子菜单不需要图标
13 | // */
14 | // icon?: string;
15 | // /** 菜单id */
16 | // key: string;
17 | // /** 菜单路由 */
18 | // path: string;
19 | // /** 子菜单 */
20 | // children?: MenuItem[];
21 | // }
22 |
23 | export type MenuChild = Omit;
24 |
25 | export type MenuList = MenuItem[];
26 | export interface MenuItem {
27 | path: string;
28 | /** 菜单唯一的key */
29 | key: string;
30 | name?: string;
31 | keyPath?: string[];
32 | auth?: boolean;
33 | redirect?: string;
34 | element?: ReactNode;
35 | alwaysShow?: boolean;
36 | children?: MenuItem[];
37 | meta?: {
38 | hidden?: boolean;
39 | title: {
40 | zh_CN: string;
41 | en_US: string;
42 | };
43 | icon?: string;
44 | noCache?: boolean;
45 | };
46 | }
47 |
--------------------------------------------------------------------------------
/src/stores/index.ts:
--------------------------------------------------------------------------------
1 | import { createContext, useContext } from 'react';
2 |
3 | import { tagsViewStore } from './tags-view';
4 | import { userStore } from './user';
5 | import { wsStore } from './ws';
6 |
7 | export const stores = { userStore, wsStore, tagsViewStore };
8 |
9 | export const RootStoreContext = createContext(stores);
10 |
11 | export const useStores = () => useContext(RootStoreContext);
12 |
--------------------------------------------------------------------------------
/src/stores/tags-view.ts:
--------------------------------------------------------------------------------
1 | import { makeAutoObservable } from 'mobx';
2 |
3 | export type TagItem = {
4 | id: string;
5 |
6 | title:
7 | | {
8 | zh_CN: string;
9 | en_US: string;
10 | }
11 | | string;
12 |
13 | /** tag's route path */
14 | path: string;
15 |
16 | /** can be closed ? */
17 | closable: boolean;
18 | };
19 |
20 | export const tagsViewStore = makeAutoObservable({
21 | activeTagId: '' as TagItem['id'],
22 | tags: [] as TagItem[],
23 | setActiveTag(activeTagId: string) {
24 | this.activeTagId = activeTagId;
25 | },
26 | addTag(tagItem: TagItem) {
27 | if (!this.tags.find(tag => tag.id === tagItem.id)) {
28 | this.tags.push(tagItem);
29 | }
30 |
31 | this.activeTagId = tagItem.id;
32 | },
33 | removeTag(targetKey: string) {
34 | // dashboard cloud't be closed
35 | if (targetKey === this.tags[0].id) {
36 | return;
37 | }
38 |
39 | const activeTagId = this.activeTagId;
40 | const currentIndex = this.tags.findIndex(n => n.id === targetKey);
41 | const lastIndex = currentIndex - 1;
42 | this.tags.splice(currentIndex, 1);
43 |
44 | if (this.tags.length && activeTagId === targetKey) {
45 | if (lastIndex >= 0) {
46 | this.activeTagId = this.tags[lastIndex].id;
47 | } else {
48 | this.activeTagId = this.tags[0].id;
49 | }
50 | }
51 | },
52 | removeAllTag() {
53 | this.activeTagId = this.tags[0].id;
54 | this.tags = [this.tags[0]];
55 | },
56 | removeOtherTag() {
57 | const activeTag = this.tags.find(tag => tag.id === this.activeTagId);
58 | const activeIsDashboard = activeTag!.id === this.tags[0].id;
59 |
60 | this.tags = activeIsDashboard ? [this.tags[0]] : [this.tags[0], activeTag!];
61 | }
62 | });
63 |
64 | export default tagsViewStore;
65 |
--------------------------------------------------------------------------------
/src/stores/user.ts:
--------------------------------------------------------------------------------
1 | import { makeAutoObservable, runInAction } from 'mobx';
2 |
3 | import { getInfo, logout, permmenu } from '@/api/account';
4 | import { login } from '@/api/login';
5 | import { ACCESS_TOKEN_KEY, LOCALE } from '@/enums/cacheEnum';
6 | import { defaultMenuRoutes } from '@/routes';
7 | import { filterAsyncRoute } from '@/routes/generator-router';
8 | import type { MenuChild } from '@/routes/types';
9 | import { wsStore } from '@/stores/ws';
10 | import { flatArrayObject } from '@/utils';
11 | import { Storage } from '@/utils/Storage';
12 |
13 | const device = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent) ? 'MOBILE' : 'DESKTOP';
14 |
15 | export const userStore = makeAutoObservable({
16 | token: Storage.get(ACCESS_TOKEN_KEY, null),
17 | userInfo: {},
18 | collapsed: device !== 'DESKTOP',
19 | device: device as 'MOBILE' | 'DESKTOP',
20 | locale: Storage.get(LOCALE, 'zh_CN'),
21 | // locale: (localStorage.getItem('locale')! || 'zh_CN') as Locale,
22 | name: 'amdin',
23 | avatar: '',
24 | perms: [] as string[],
25 | menus: [] as MenuChild[],
26 | routeList: [] as MenuChild[],
27 | menuList: [] as MenuChild[],
28 | // 清空token及用户信息
29 | resetToken() {
30 | this.avatar = this.token = this.name = '';
31 | this.perms = [];
32 | this.menus = [];
33 | this.userInfo = {};
34 | Storage.clear();
35 | },
36 | setLocale(locale) {
37 | this.locale = locale;
38 | Storage.set(LOCALE, locale);
39 | },
40 | // 登录成功保存token
41 | setToken(token: string) {
42 | this.token = token ?? '';
43 | const ex = 7 * 24 * 60 * 60 * 1000;
44 | Storage.set(ACCESS_TOKEN_KEY, this.token, ex);
45 | },
46 | generateRoutes(menus: API.Menu[]) {
47 | // 后端路由json进行转换成真正的router map
48 | const routeList = filterAsyncRoute(menus, null);
49 | // 404 route must be end
50 | // routeList.push(NotFoundRouter)
51 | const defaultRoutes = flatArrayObject(defaultMenuRoutes, ['children']);
52 | const asyncRoutes = flatArrayObject(routeList, ['children']);
53 | // 获取数据后，将赋值操作放到 runInAction 中
54 | runInAction(() => {
55 | this.routeList = [...defaultRoutes, ...asyncRoutes];
56 | this.menuList = [...defaultMenuRoutes, ...routeList];
57 | });
58 | },
59 | // 登录
60 | async login(params: API.LoginParams) {
61 | try {
62 | const { data } = await login(params);
63 | this.setToken(data.token);
64 | return this.afterLogin();
65 | } catch (error) {
66 | return Promise.reject(error);
67 | }
68 | },
69 | async afterLogin() {
70 | try {
71 | const [userInfo, { perms, menus }] = await Promise.all([getInfo(), permmenu()]);
72 | runInAction(() => {
73 | this.perms = perms;
74 | this.name = userInfo.name;
75 | this.avatar = userInfo.headImg;
76 | this.userInfo = userInfo;
77 | });
78 |
79 | this.generateRoutes(menus);
80 | // 生成路由
81 | // const routes = generatorDynamicRouter(menus);
82 | // this.menus = routes;
83 | wsStore.initSocket();
84 | // router.push('/sys/permission/role')
85 | return { menus, perms, userInfo };
86 | } catch (error) {
87 | console.log(error);
88 | // return this.logout();
89 | }
90 | },
91 | // 登出
92 | async logout() {
93 | await logout();
94 | wsStore.closeSocket();
95 | this.resetToken();
96 | }
97 | });
98 |
99 | export default userStore;
100 |
--------------------------------------------------------------------------------
/src/stores/ws.ts:
--------------------------------------------------------------------------------
1 | import { Modal } from 'antd';
2 | import { makeAutoObservable } from 'mobx';
3 |
4 | import { EVENT_KICK } from '@/core/socket/event-type';
5 | import type { SocketIOWrapperType, SocketStatusType } from '@/core/socket/socket-io';
6 | import { SocketIOWrapper, SocketStatus } from '@/core/socket/socket-io';
7 | import { userStore } from '@/stores/user';
8 |
9 | export const wsStore = makeAutoObservable({
10 | // socket wrapper 实例
11 | client: null as SocketIOWrapperType | null,
12 | // socket 连接状态
13 | status: SocketStatus.CLOSE as SocketStatusType,
14 | setClient(client: SocketIOWrapperType | null) {
15 | this.client = client as any;
16 | },
17 | setStatus(status: SocketStatusType) {
18 | if (this.status === status) {
19 | return;
20 | }
21 | this.status = status;
22 | },
23 | // 初始化Socket
24 | initSocket() {
25 | // check is init
26 | if (this.client?.isConnected?.()) {
27 | return;
28 | }
29 | const ws = new SocketIOWrapper();
30 | ws.subscribe(EVENT_KICK, async data => {
31 | // reset token
32 | userStore.resetToken();
33 | Modal.warning({
34 | title: '警告',
35 | content: `您已被管理员${data.operater}踢下线！`,
36 | centered: true,
37 | okText: '重新登录',
38 | onOk() {
39 | // 刷新页面
40 | window.location.reload();
41 | }
42 | });
43 | });
44 | this.setClient(ws);
45 | },
46 |
47 | // 关闭Socket连接
48 | closeSocket() {
49 | this.client?.close?.();
50 | this.setClient(null);
51 | }
52 | });
53 |
54 | export default wsStore;
55 |
--------------------------------------------------------------------------------
/src/styles/antd.reset.less:
--------------------------------------------------------------------------------
1 | // body {
2 | // .ant-message {
3 | // z-index: 999999;
4 | // }
5 |
6 | // span.anticon:not(.app-iconify) {
7 | // vertical-align: 0.125em !important;
8 | // }
9 | // }
10 |
11 | // .ant-image-preview-root img {
12 | // display: unset;
13 | // }
14 |
--------------------------------------------------------------------------------
/src/styles/index.less:
--------------------------------------------------------------------------------
1 | @import './main.less';
2 |
3 | @import './antd.reset.less';
4 |
--------------------------------------------------------------------------------
/src/styles/main.less:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #root,
4 | #root > * {
5 | height: 100%;
6 | }
7 |
8 | body {
9 | font-size: 14px;
10 | color: #333 !important;
11 | }
12 | iframe {
13 | display: none;
14 | }
15 |
16 | a {
17 | text-decoration: underline;
18 | cursor: pointer;
19 | }
20 |
21 | #searchForm > .ant-row > .ant-row.ant-form-item {
22 | width: 100%;
23 | text-align: right;
24 | padding-right: 12px;
25 | .ant-col {
26 | flex: 1;
27 | max-width: 100%;
28 | width: 100%;
29 | .ant-btn:first-child {
30 | margin-right: 10px;
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/utils/Storage.ts:
--------------------------------------------------------------------------------
1 | // 默认缓存期限为7天
2 | const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
3 |
4 | /**
5 | * 创建本地缓存对象
6 | * @param {string=} prefixKey -
7 | * @param {Object} [storage=localStorage] - sessionStorage | localStorage
8 | */
9 | export const createStorage = ({ prefixKey = '', storage = localStorage } = {}) => {
10 | /**
11 | * 本地缓存类
12 | * @class Storage
13 | */
14 | const Storage = class {
15 | private storage = storage;
16 | private prefixKey?: string = prefixKey;
17 |
18 | private getKey(key: string) {
19 | return `${this.prefixKey}${key}`.toUpperCase();
20 | }
21 |
22 | /**
23 | * @description 设置缓存
24 | * @param {string} key 缓存键
25 | * @param {*} value 缓存值
26 | * @param expire
27 | */
28 | set(key: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
29 | const stringData = JSON.stringify({
30 | value,
31 | expire: expire !== null ? new Date().getTime() + expire * 1000 : null
32 | });
33 | this.storage.setItem(this.getKey(key), stringData);
34 | }
35 |
36 | /**
37 | * 读取缓存
38 | * @param {string} key 缓存键
39 | * @param {*=} def 默认值
40 | */
41 | get(key: string, def: any = null): T {
42 | const item = this.storage.getItem(this.getKey(key));
43 | if (item) {
44 | try {
45 | const data = JSON.parse(item);
46 | const { value, expire } = data;
47 | // 在有效期内直接返回
48 | if (expire === null || expire >= Date.now()) {
49 | return value;
50 | }
51 | this.remove(this.getKey(key));
52 | } catch (e) {
53 | return def;
54 | }
55 | }
56 | return def;
57 | }
58 |
59 | /**
60 | * 从缓存删除某项
61 | * @param {string} key
62 | */
63 | remove(key: string) {
64 | console.log(key, '搜索');
65 | this.storage.removeItem(this.getKey(key));
66 | }
67 |
68 | /**
69 | * 清空所有缓存
70 | * @memberOf Cache
71 | */
72 | clear(): void {
73 | this.storage.clear();
74 | }
75 |
76 | /**
77 | * 设置cookie
78 | * @param {string} name cookie 名称
79 | * @param {*} value cookie 值
80 | * @param {number=} expire 过期时间
81 | * 如果过期时间为设置，默认关闭浏览器自动删除
82 | * @example
83 | */
84 | setCookie(name: string, value: any, expire: number | null = DEFAULT_CACHE_TIME) {
85 | document.cookie = `${this.getKey(name)}=${value}; Max-Age=${expire}`;
86 | }
87 |
88 | /**
89 | * 根据名字获取cookie值
90 | * @param name
91 | */
92 | getCookie(name: string): string {
93 | const cookieArr = document.cookie.split('; ');
94 | for (let i = 0, length = cookieArr.length; i < length; i++) {
95 | const kv = cookieArr[i].split('=');
96 | if (kv[0] === this.getKey(name)) {
97 | return kv[1];
98 | }
99 | }
100 | return '';
101 | }
102 |
103 | /**
104 | * 根据名字删除指定的cookie
105 | * @param {string} key
106 | */
107 | removeCookie(key: string) {
108 | this.setCookie(key, 1, -1);
109 | }
110 |
111 | /**
112 | * 清空cookie，使所有cookie失效
113 | */
114 | clearCookie(): void {
115 | const keys = document.cookie.match(/[^ =;]+(?==)/g);
116 | if (keys) {
117 | for (let i = keys.length; i--; ) {
118 | document.cookie = keys[i] + '=0;expire=' + new Date(0).toUTCString();
119 | }
120 | }
121 | }
122 | };
123 | return new Storage();
124 | };
125 |
126 | export const Storage = createStorage();
127 |
128 | export default Storage;
129 |
--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * / _ - 转换成驼峰并将pages替换成空字符串
3 | * @param {*} name name
4 | */
5 | export function toHump(name: string) {
6 | return name
7 | .replace(/[-/_](\w)/g, function (all, letter) {
8 | return letter.toUpperCase();
9 | })
10 | .replace('views', '');
11 | }
12 |
13 | /**
14 | * 将数组对象磨平
15 | * @param menuList
16 | * @param arr
17 | * @returns
18 | */
19 | export const flatArrayObject = (list: any[], keys: string[], arr: T[] = []): T[] => {
20 | list.forEach(item => {
21 | keys.forEach(key => {
22 | if (Array.isArray(item[key])) {
23 | flatArrayObject(item[key], keys, arr);
24 | } else {
25 | arr.push({ ...item });
26 | }
27 | });
28 | });
29 | return arr;
30 | };
31 |
--------------------------------------------------------------------------------
/src/utils/is/index.ts:
--------------------------------------------------------------------------------
1 | const toString = Object.prototype.toString;
2 |
3 | export function is(val: unknown, type: string) {
4 | return toString.call(val) === `[object ${type}]`;
5 | }
6 |
7 | export function isDef(val?: T): val is T {
8 | return typeof val !== 'undefined';
9 | }
10 |
11 | export function isUnDef(val?: T): val is T {
12 | return !isDef(val);
13 | }
14 |
15 | export function isObject(val: any): val is Record {
16 | return val !== null && is(val, 'Object');
17 | }
18 |
19 | export function isEmpty(val: T): val is T {
20 | if (isArray(val) || isString(val)) {
21 | return val.length === 0;
22 | }
23 |
24 | if (val instanceof Map || val instanceof Set) {
25 | return val.size === 0;
26 | }
27 |
28 | if (isObject(val)) {
29 | return Object.keys(val).length === 0;
30 | }
31 |
32 | return false;
33 | }
34 |
35 | export function isDate(val: unknown): val is Date {
36 | return is(val, 'Date');
37 | }
38 |
39 | export function isNull(val: unknown): val is null {
40 | return val === null;
41 | }
42 |
43 | export function isNullAndUnDef(val: unknown): val is null | undefined {
44 | return isUnDef(val) && isNull(val);
45 | }
46 |
47 | export function isNullOrUnDef(val: unknown): val is null | undefined {
48 | return isUnDef(val) || isNull(val);
49 | }
50 |
51 | export function isNumber(val: unknown): val is number {
52 | return is(val, 'Number');
53 | }
54 |
55 | export function isPromise(val: unknown): val is Promise {
56 | return is(val, 'Promise') && isObject(val) && isFunction(val.then) && isFunction(val.catch);
57 | }
58 |
59 | export function isString(val: unknown): val is string {
60 | return is(val, 'String');
61 | }
62 |
63 | export function isFunction(val: unknown): val is Function {
64 | return typeof val === 'function';
65 | }
66 |
67 | export function isBoolean(val: unknown): val is boolean {
68 | return is(val, 'Boolean');
69 | }
70 |
71 | export function isRegExp(val: unknown): val is RegExp {
72 | return is(val, 'RegExp');
73 | }
74 |
75 | export function isArray(val: any): val is Array {
76 | return val && Array.isArray(val);
77 | }
78 |
79 | export function isWindow(val: any): val is Window {
80 | return typeof window !== 'undefined' && is(val, 'Window');
81 | }
82 |
83 | export function isElement(val: unknown): val is Element {
84 | return isObject(val) && !!val.tagName;
85 | }
86 |
87 | export function isMap(val: unknown): val is Map {
88 | return is(val, 'Map');
89 | }
90 |
91 | export const isServer = typeof window === 'undefined';
92 |
93 | export const isClient = !isServer;
94 |
95 | export function isUrl(path: string): boolean {
96 | const reg =
97 | /(((^https?:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
98 | return reg.test(path);
99 | }
100 |
--------------------------------------------------------------------------------
/src/utils/request.ts:
--------------------------------------------------------------------------------
1 | import { message as $message } from 'antd';
2 | import axios, { AxiosRequestConfig } from 'axios';
3 |
4 | import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';
5 | import { userStore } from '@/stores/user';
6 | import { Storage } from '@/utils/Storage';
7 | // import {ExclamationCircleOutlined} from '@ant-design/icons'
8 |
9 | export interface RequestOptions {
10 | /** 当前接口权限, 不需要鉴权的接口请忽略， 格式：sys:user:add */
11 | permCode?: string;
12 | /** 是否直接获取data，而忽略message等 */
13 | isGetDataDirectly?: boolean;
14 | /** 请求成功是提示信息 */
15 | successMsg?: string;
16 | /** 请求失败是提示信息 */
17 | errorMsg?: string;
18 | /** 是否mock数据请求 */
19 | isMock?: boolean;
20 | }
21 |
22 | const UNKNOWN_ERROR = '未知错误，请重试';
23 |
24 | /** 真实请求的路径前缀 */
25 | const baseApiUrl = import.meta.env.VITE_BASE_API;
26 | /** mock请求路径前缀 */
27 | const baseMockUrl = import.meta.env.VITE_MOCK_API;
28 |
29 | const service = axios.create({
30 | // baseURL: baseApiUrl,
31 | timeout: 6000
32 | });
33 |
34 | service.interceptors.request.use(
35 | config => {
36 | const token = Storage.get(ACCESS_TOKEN_KEY);
37 | if (token && config.headers) {
38 | // 请求头token信息，请根据实际情况进行修改
39 | config.headers['Authorization'] = token;
40 | }
41 | return config;
42 | },
43 | error => {
44 | Promise.reject(error);
45 | }
46 | );
47 |
48 | service.interceptors.response.use(
49 | response => {
50 | const res = response.data;
51 |
52 | // if the custom code is not 200, it is judged as an error.
53 | if (res.code !== 200) {
54 | $message.error(res.message || UNKNOWN_ERROR);
55 |
56 | // Illegal token
57 | if (res.code === 11001 || res.code === 11002) {
58 | window.localStorage.clear();
59 | window.location.reload();
60 | // to re-login
61 | // Modal.confirm({
62 | // title: '警告',
63 | // content: res.message || '账号异常，您可以取消停留在该页上，或重新登录',
64 | // okText: '重新登录',
65 | // cancelText: '取消',
66 | // onOk: () => {
67 | // localStorage.clear();
68 | // window.location.reload();
69 | // }
70 | // });
71 | }
72 |
73 | // throw other
74 | const error = new Error(res.message || UNKNOWN_ERROR) as Error & { code: any };
75 | error.code = res.code;
76 | return Promise.reject(error);
77 | } else {
78 | return res;
79 | }
80 | },
81 | error => {
82 | // 处理 422 或者 500 的错误异常提示
83 | const errMsg = error?.response?.data?.message ?? UNKNOWN_ERROR;
84 | $message.error(errMsg);
85 | error.message = errMsg;
86 | return Promise.reject(error);
87 | }
88 | );
89 |
90 | export type Response = {
91 | code: number;
92 | message: string;
93 | data: T;
94 | };
95 |
96 | export type BaseResponse = Promise>;
97 |
98 | /**
99 | *
100 | * @param method - request methods
101 | * @param url - request url
102 | * @param data - request data or params
103 | */
104 | export const request = async (config: AxiosRequestConfig, options: RequestOptions = {}): Promise => {
105 | try {
106 | const { successMsg, errorMsg, permCode, isMock, isGetDataDirectly = true } = options;
107 | // 如果当前是需要鉴权的接口 并且没有权限的话 则终止请求发起
108 | if (permCode && !userStore.perms.includes(permCode)) {
109 | return $message.error('你没有访问该接口的权限，请联系管理员！');
110 | }
111 | const fullUrl = `${(isMock ? baseMockUrl : baseApiUrl) + config.url}`;
112 | config.url = fullUrl.replace(/(?(initialState: T): [T, (state: Partial) => void] {
4 | const [state, setState] = useState(initialState);
5 | const setMergedState = (newState: Partial) => setState(prevState => Object.assign({}, prevState, newState));
6 | return [state, setMergedState];
7 | }
8 |
--------------------------------------------------------------------------------
/src/utils/validate.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @param {string} path
3 | * @returns {Boolean}
4 | */
5 | export function isExternal(path: string) {
6 | return /^(https?:|mailto:|tel:)/.test(path);
7 | }
8 |
--------------------------------------------------------------------------------
/src/views/dashboard/index.less:
--------------------------------------------------------------------------------
1 | .overview {
2 | .ant-card-body {
3 | padding: 20px 24px 8px !important;
4 | }
5 | > * {
6 | box-sizing: border-box;
7 | }
8 | &-header {
9 | position: relative;
10 | width: 100%;
11 | overflow: hidden;
12 | &-meta {
13 | height: 22px;
14 | font-size: 14px;
15 | line-height: 22px;
16 | }
17 | &-count {
18 | height: 38px;
19 | margin-top: 4px;
20 | margin-bottom: 0;
21 | overflow: hidden;
22 | font-size: 30px;
23 | line-height: 38px;
24 | white-space: nowrap;
25 | text-overflow: ellipsis;
26 | word-break: break-all;
27 | }
28 | &-action {
29 | position: absolute;
30 | top: 4px;
31 | right: 0;
32 | line-height: 1;
33 | cursor: pointer;
34 | }
35 | }
36 |
37 | &-body {
38 | height: 46px;
39 | margin-bottom: 12px;
40 | position: relative;
41 | }
42 |
43 | &-footer {
44 | margin-top: 8px;
45 | padding-top: 9px;
46 | border-top: 1px solid #292a2d;
47 | }
48 | }
49 |
50 | .trend {
51 | position: absolute;
52 | bottom: 0;
53 | left: 0;
54 | width: 100%;
55 | &-item {
56 | display: inline-block;
57 | font-size: 14px;
58 | line-height: 22px;
59 | &:first-child {
60 | margin-right: 16px;
61 | }
62 | svg {
63 | vertical-align: middle;
64 | }
65 | > * {
66 | margin-right: 8px;
67 | &:nth-child(2) {
68 | color: rgba(0, 0, 0, 0.85);
69 | }
70 | }
71 | }
72 | }
73 |
74 | .field {
75 | font-size: 14px;
76 | line-height: 22px;
77 | // &-label {
78 | // }
79 | &-number {
80 | margin-left: 8px;
81 | color: rgba(0, 0, 0, 0.85);
82 | }
83 | }
84 |
85 | .salePercent {
86 | .ant-list-item {
87 | padding: 8px 12px !important;
88 | > * {
89 | margin: 0 4px;
90 | }
91 | }
92 | }
93 |
94 | .customTooltip {
95 | transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s,
96 | top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
97 | background-color: rgba(256, 2560, 256, 0.9);
98 | box-shadow: rgb(174, 174, 174) 0px 0px 10px;
99 | border-radius: 3px;
100 | color: rgb(87, 87, 87);
101 | font-size: 12px;
102 | line-height: 20px;
103 | padding: 10px 10px 6px;
104 | &-titile {
105 | margin-bottom: 4px;
106 | }
107 | &-content {
108 | margin: 0px;
109 | list-style-type: none;
110 | padding: 0px;
111 | > li {
112 | margin-bottom: 4px;
113 | }
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/views/dashboard/index.tsx:
--------------------------------------------------------------------------------
1 | import './index.less';
2 |
3 | import { FC, useEffect, useState } from 'react';
4 |
5 | import Overview from './overview';
6 | import SalePercent from './salePercent';
7 | import TimeLine from './timeLine';
8 |
9 | const DashBoardPage: FC = () => {
10 | const [loading, setLoading] = useState(true);
11 |
12 | // mock timer to mimic dashboard data loading
13 | useEffect(() => {
14 | const timer = setTimeout(() => {
15 | setLoading(undefined as any);
16 | }, 2000);
17 | return () => {
18 | clearTimeout(timer);
19 | };
20 | }, []);
21 | return (
22 |
23 |
24 |
25 |
26 |
27 | );
28 | };
29 |
30 | export default DashBoardPage;
31 |
--------------------------------------------------------------------------------
/src/views/dashboard/timeLine.tsx:
--------------------------------------------------------------------------------
1 | import { Badge, Card } from 'antd';
2 | import moment from 'moment';
3 | import { FC } from 'react';
4 | import { Brush, CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
5 |
6 | import { LocaleFormatter } from '@/locales';
7 |
8 | const data = new Array(20).fill(null).map((_, index) => ({
9 | name: moment()
10 | .add(index * 30, 'minute')
11 | .format('HH:mm'),
12 | traffic: Math.floor(Math.random() * 120 + 1),
13 | payments: Math.floor(Math.random() * 120 + 1)
14 | }));
15 |
16 | const CustomTooltip: FC = ({ active, payload, label }) => {
17 | if (active) {
18 | const { value: value1, stroke: stroke1 } = payload[0];
19 | const { value: value2, stroke: stroke2 } = payload[1];
20 | return (
21 |
22 |
{label}
23 |
24 | -
25 |
26 | {value1}
27 |
28 | -
29 |
30 | {value2}
31 |
32 |
33 |
2333
;
9 |
10 | const DocumentationPage: FC = () => {
11 | return (
12 |
13 |
14 |
15 | <LocaleFormatter id="app.documentation.introduction.title" />
16 |
17 |
18 |
19 |
20 |
21 | <LocaleFormatter id="app.documentation.catalogue.title" />
22 |
23 |
24 |
25 |
26 |
27 |
59 |
60 |
61 | <LocaleFormatter id="app.documentation.catalogue.list.layout" />
62 |
63 | {div}
64 |
65 | <LocaleFormatter id="app.documentation.catalogue.list.routes" />
66 |
67 | {div}
68 |
69 | <LocaleFormatter id="app.documentation.catalogue.list.request" />
70 |
71 | {div}
72 |
73 | <LocaleFormatter id="app.documentation.catalogue.list.theme" />
74 |
75 | {div}
76 |
77 | <LocaleFormatter id="app.documentation.catalogue.list.typescript" />
78 |
79 | {div}
80 |
81 | <LocaleFormatter id="app.documentation.catalogue.list.international" />
82 |
83 | {div}
84 |
85 |
服务监控
;
2 |
3 | export default Serve;
4 |
--------------------------------------------------------------------------------
/src/views/system/permission/role/index.tsx:
--------------------------------------------------------------------------------
1 | import type { ActionType, ProColumns } from '@ant-design/pro-table';
2 | import ProTable from '@ant-design/pro-table';
3 | import { Button, Popconfirm } from 'antd';
4 | import { useRef, useState } from 'react';
5 |
6 | import { getRoleList } from '@/api/system/role';
7 | import { deleteRole } from '@/api/system/role';
8 |
9 | import { OperateFormModal } from './components/OperateFormModal';
10 |
11 | type TableListItem = API.RoleListResultItem;
12 |
13 | export const SystemPermissionRole = () => {
14 | const actionRef = useRef();
15 |
16 | const [modalVisible, setModalVisible] = useState(false);
17 | const [currentRow, setCurrentRow] = useState(undefined);
18 |
19 | const refreshTable = () => {
20 | actionRef?.current?.reload();
21 | };
22 |
23 | const handleModalOnCancel = () => {
24 | setCurrentRow(undefined);
25 | setModalVisible(false);
26 | };
27 |
28 | const handleModalOnSuccess = () => {
29 | handleModalOnCancel();
30 | refreshTable();
31 | };
32 |
33 | /**
34 | * @description 表格删除行
35 | */
36 | const delRowConfirm = (record: API.RoleListResultItem) => {
37 | deleteRole({ roleIds: [record.id] }).finally(actionRef?.current?.reload);
38 | };
39 |
40 | const columns: ProColumns[] = [
41 | {
42 | title: '#',
43 | width: 60,
44 | dataIndex: 'id'
45 | },
46 | {
47 | title: '名称',
48 | dataIndex: 'name',
49 | width: 200,
50 | align: 'center'
51 | },
52 | {
53 | title: '标识',
54 | dataIndex: 'label',
55 | width: 200,
56 | align: 'center'
57 | },
58 | {
59 | title: '备注',
60 | dataIndex: 'remark',
61 | align: 'center',
62 | width: 180,
63 | ellipsis: true
64 | },
65 | {
66 | title: '创建时间',
67 | dataIndex: 'createdAt',
68 | width: 180,
69 | align: 'center'
70 | },
71 | {
72 | title: '更新时间',
73 | dataIndex: 'updatedAt',
74 | width: 180,
75 | align: 'center'
76 | },
77 | {
78 | title: '操作',
79 | width: 120,
80 | key: 'option',
81 | valueType: 'option',
82 | fixed: 'right',
83 | align: 'center',
84 | render: (_, record) => [
85 | ,
95 | delRowConfirm(record)}>
96 | 删除
97 |
98 | ]
99 | }
100 | ];
101 |
102 | return (
103 | <>
104 |
105 | actionRef={actionRef}
106 | columns={columns}
107 | rowKey="id"
108 | scroll={{ x: 1300 }}
109 | pagination={{
110 | showQuickJumper: true
111 | }}
112 | toolbar={{
113 | title: '角色管理'
114 | }}
115 | search={false}
116 | dateFormatter="string"
117 | headerTitle={
118 |
127 | }
128 | request={async params => {
129 | // 表单搜索项会从 params 传入，传递给后端接口。
130 | const list = await getRoleList({ limit: params.pageSize, page: params.current });
131 | return {
132 | data: list,
133 | success: true
134 | };
135 | }}
136 | />
137 |
143 |
144 | );
145 | };
146 |
147 | export default SystemPermissionRole;
148 |
--------------------------------------------------------------------------------
/src/views/system/permission/user/columns.tsx:
--------------------------------------------------------------------------------
1 | import type { ProColumns } from '@ant-design/pro-table';
2 | import { Avatar, Space, Tag } from 'antd';
3 |
4 | export type TableListItem = API.UserListPageResultItem;
5 | export type ColumnItem = ProColumns;
6 |
7 | export const baseColumns: ColumnItem[] = [
8 | {
9 | title: '头像',
10 | width: 80,
11 | dataIndex: 'headImg',
12 | render: (_, record) =>
13 | },
14 | {
15 | title: '姓名',
16 | width: 120,
17 | dataIndex: 'name',
18 | align: 'center'
19 | },
20 | {
21 | title: '用户名',
22 | width: 120,
23 | align: 'center',
24 | dataIndex: 'username'
25 | },
26 | {
27 | title: '所在部门',
28 | dataIndex: 'departmentName',
29 | align: 'center',
30 | width: 180
31 | },
32 | {
33 | title: '所属角色',
34 | dataIndex: 'roleNames',
35 | align: 'center',
36 | width: 220,
37 | render: (_, record) => (
38 |
39 | {record.roleNames.map(item => (
40 |
41 | {item}
42 |
43 | ))}
44 |
45 | )
46 | },
47 | {
48 | title: '呢称',
49 | width: 120,
50 | align: 'center',
51 | dataIndex: 'nickName'
52 | },
53 | {
54 | title: '邮箱',
55 | width: 120,
56 | align: 'center',
57 | dataIndex: 'email'
58 | },
59 | {
60 | title: '手机',
61 | width: 120,
62 | align: 'center',
63 | dataIndex: 'phone'
64 | },
65 | {
66 | title: '备注',
67 | width: 120,
68 | align: 'center',
69 | dataIndex: 'remark'
70 | },
71 | {
72 | title: '状态',
73 | dataIndex: 'status',
74 | width: 100,
75 | render: (_, record) => {
76 | const isEnable = record.status === 1;
77 | return {isEnable ? '启用' : '禁用'};
78 | }
79 | }
80 | ];
81 |
--------------------------------------------------------------------------------
/src/views/system/permission/user/components/OperateDeptFormModal.tsx:
--------------------------------------------------------------------------------
1 | import { ModalForm, ProFormDigit, ProFormText } from '@ant-design/pro-form';
2 | import { Form, FormInstance, message, TreeSelect } from 'antd';
3 | import { DataNode } from 'antd/lib/tree';
4 | import React, { useEffect, useRef } from 'react';
5 |
6 | import { createDept, getDeptInfo, updateDept } from '@/api/system/dept';
7 |
8 | type FormDetail = API.CreateDeptParams & API.UpdateDeptParams;
9 |
10 | interface OperateUserFormModalProps {
11 | visible: boolean;
12 | deptTree: DataNode[];
13 | currentDept?: DataNode | undefined;
14 | onCancel: () => void;
15 | onSuccess: () => void;
16 | }
17 |
18 | export const OperateDeptFormModal: React.FC = props => {
19 | const { currentDept, deptTree, onCancel, onSuccess, visible } = props;
20 | const formRef = useRef>();
21 |
22 | useEffect(() => {
23 | const fetchDeptInfo = async () => {
24 | if (currentDept?.key && Number.isInteger(currentDept.key)) {
25 | const { department } = await getDeptInfo({ departmentId: currentDept.key });
26 | formRef.current?.setFieldsValue({
27 | parentId: department.parentId ?? -1,
28 | name: department.name,
29 | orderNum: department.orderNum
30 | });
31 | }
32 | };
33 | if (visible) {
34 | fetchDeptInfo();
35 | }
36 | }, [currentDept, visible]);
37 |
38 | return (
39 |
40 | formRef={formRef}
41 | title={`${currentDept?.key ? '编辑' : '新增'}部门`}
42 | visible={visible}
43 | modalProps={{ onCancel }}
44 | onFinish={async values => {
45 | if (currentDept?.key && Number.isInteger(currentDept.key)) {
46 | const params = {
47 | ...values,
48 | id: currentDept?.key
49 | };
50 | const data = await updateDept(params);
51 | console.log(data, values);
52 | message.success('修改部门成功');
53 | } else {
54 | const data = await createDept(values);
55 | console.log(data, values);
56 | message.success('新增部门成功');
57 | }
58 | formRef.current?.resetFields();
59 | onSuccess();
60 | return true;
61 | }}
62 | >
63 |
69 |
70 |
77 |
78 |
79 |
80 | );
81 | };
82 |
83 | export default OperateDeptFormModal;
84 |
--------------------------------------------------------------------------------
/src/views/system/permission/user/components/deptTreePanel.module.less:
--------------------------------------------------------------------------------
1 | .dept-tree-panel-container {
2 | .header {
3 | display: flex;
4 | justify-content: space-between;
5 | .title {
6 | font-size: 14px;
7 | font-weight: 500;
8 | }
9 | .operate-wrapper {
10 | display: flex;
11 | .tool-item {
12 | padding: 2px 4px;
13 | cursor: pointer;
14 | }
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/views/system/schedule/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Result } from 'antd';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import { useLocale } from '@/locales';
5 |
6 | const NotFoundPage: React.FC<{}> = () => {
7 | const navigate = useNavigate();
8 | const { formatMessage } = useLocale();
9 | return (
10 | navigate('/')}>
15 | 任务调度页面
16 |
17 | }
18 | >
19 | );
20 | };
21 |
22 | export default NotFoundPage;
23 |
--------------------------------------------------------------------------------
/src/views/system/schedule/log/index.tsx:
--------------------------------------------------------------------------------
1 | import type { ActionType, ProColumns } from '@ant-design/pro-table';
2 | import ProTable from '@ant-design/pro-table';
3 | import { Tag } from 'antd';
4 | import { useRef } from 'react';
5 |
6 | import { getTaskLogList } from '@/api/system/log';
7 |
8 | type TableListItem = API.TaskLogListItemResult;
9 |
10 | const getStatusType = (status: number) => {
11 | switch (status) {
12 | case 0:
13 | return 'danger';
14 | case 1:
15 | return 'success';
16 | }
17 | };
18 |
19 | const getStatusTip = (status: number) => {
20 | switch (status) {
21 | case 0:
22 | return '失败';
23 | case 1:
24 | return '成功';
25 | }
26 | };
27 |
28 | const getConsumeTimeType = (time: number) => {
29 | if (time <= 20) {
30 | return 'success';
31 | } else if (time <= 40) {
32 | return 'warning';
33 | } else {
34 | return 'error';
35 | }
36 | };
37 |
38 | export const SystemScheduleTaskLog = () => {
39 | const actionRef = useRef();
40 |
41 | const columns: ProColumns[] = [
42 | {
43 | title: '#',
44 | dataIndex: 'id',
45 | width: 80,
46 | align: 'center'
47 | },
48 | {
49 | title: '任务编号',
50 | dataIndex: 'taskId',
51 | align: 'center',
52 | width: 100
53 | },
54 | {
55 | title: '任务名称',
56 | dataIndex: 'name',
57 | align: 'center',
58 | ellipsis: true,
59 | width: 200
60 | },
61 | {
62 | title: '异常信息',
63 | dataIndex: 'detail',
64 | align: 'center',
65 | width: 150
66 | },
67 | {
68 | title: '耗时',
69 | dataIndex: 'consumeTime',
70 | align: 'center',
71 | width: 120,
72 | render: (_, { consumeTime }) => {consumeTime + 'ms'}
73 | },
74 | {
75 | title: '状态',
76 | dataIndex: 'status',
77 | align: 'center',
78 | width: 100,
79 | render: (_, { status }) => {getStatusTip(status)}
80 | },
81 | {
82 | title: '执行时间',
83 | dataIndex: 'createdAt',
84 | align: 'center',
85 | width: 220
86 | }
87 | ];
88 |
89 | return (
90 |
91 | actionRef={actionRef}
92 | columns={columns}
93 | request={async params => {
94 | // 表单搜索项会从 params 传入，传递给后端接口。
95 | const { list, pagination } = await getTaskLogList({ limit: params.pageSize, page: params.current });
96 | return {
97 | data: list,
98 | success: true,
99 | total: pagination?.total
100 | };
101 | }}
102 | sticky={true}
103 | rowKey="id"
104 | scroll={{ x: 1300, y: 500 }}
105 | pagination={{
106 | showQuickJumper: true
107 | }}
108 | search={false}
109 | dateFormatter="string"
110 | />
111 | );
112 | };
113 |
114 | export default SystemScheduleTaskLog;
115 |
--------------------------------------------------------------------------------
/src/views/system/schedule/task/index.tsx:
--------------------------------------------------------------------------------
1 | export const Task = () => 任务调度
;
2 |
3 | export default Task;
4 |
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | plugins: ['stylelint-order'],
4 | customSyntax: 'postcss-html',
5 | extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
6 | rules: {
7 | 'selector-class-pattern': null,
8 | 'selector-pseudo-class-no-unknown': [
9 | true,
10 | {
11 | ignorePseudoClasses: ['global']
12 | }
13 | ],
14 | 'selector-pseudo-element-no-unknown': [
15 | true,
16 | {
17 | ignorePseudoElements: ['v-deep']
18 | }
19 | ],
20 | 'at-rule-no-unknown': [
21 | true,
22 | {
23 | ignoreAtRules: [
24 | 'tailwind',
25 | 'apply',
26 | 'variants',
27 | 'responsive',
28 | 'screen',
29 | 'function',
30 | 'if',
31 | 'each',
32 | 'include',
33 | 'mixin'
34 | ]
35 | }
36 | ],
37 | 'no-empty-source': null,
38 | 'named-grid-areas-no-invalid': null,
39 | 'unicode-bom': 'never',
40 | 'no-descending-specificity': null,
41 | 'font-family-no-missing-generic-family-keyword': null,
42 | 'declaration-colon-space-after': 'always-single-line',
43 | 'declaration-colon-space-before': 'never',
44 | // 'declaration-block-trailing-semicolon': 'always',
45 | 'rule-empty-line-before': [
46 | 'always',
47 | {
48 | ignore: ['after-comment', 'first-nested']
49 | }
50 | ],
51 | 'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
52 | 'order/order': [
53 | [
54 | 'dollar-variables',
55 | 'custom-properties',
56 | 'at-rules',
57 | 'declarations',
58 | {
59 | type: 'at-rule',
60 | name: 'supports'
61 | },
62 | {
63 | type: 'at-rule',
64 | name: 'media'
65 | },
66 | 'rules'
67 | ],
68 | { severity: 'warning' }
69 | ]
70 | },
71 | ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
72 | overrides: [
73 | {
74 | files: ['*.vue', '**/*.vue', '*.html', '**/*.html'],
75 | extends: ['stylelint-config-recommended', 'stylelint-config-html'],
76 | rules: {
77 | 'keyframes-name-pattern': null,
78 | 'selector-pseudo-class-no-unknown': [
79 | true,
80 | {
81 | ignorePseudoClasses: ['deep', 'global']
82 | }
83 | ],
84 | 'selector-pseudo-element-no-unknown': [
85 | true,
86 | {
87 | ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted']
88 | }
89 | ]
90 | }
91 | }
92 | ]
93 | };
94 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "strict": true,
7 | "noLib": false,
8 | "forceConsistentCasingInFileNames": true,
9 | "allowSyntheticDefaultImports": true,
10 | "strictFunctionTypes": false,
11 | "jsx": "preserve",
12 | "baseUrl": ".",
13 | "allowJs": true,
14 | "sourceMap": true,
15 | "esModuleInterop": true,
16 | "resolveJsonModule": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "experimentalDecorators": true,
20 | "lib": [
21 | "dom",
22 | "esnext"
23 | ],
24 | "noImplicitAny": false,
25 | "skipLibCheck": true,
26 | "removeComments": true,
27 | "typeRoots": [
28 | "./node_modules/@types/",
29 | "./types",
30 | ],
31 | "paths": {
32 | "@/*": [
33 | "src/*"
34 | ]
35 | },
36 | },
37 | "include": [
38 | "src/**/*.ts",
39 | "src/**/*.d.ts",
40 | "src/**/*.tsx",
41 | "types/**/*.d.ts",
42 | "types/**/*.ts",
43 | "types/**/*.ts",
44 | "types/**/*.d.ts",
45 | "mock/**/*.ts",
46 | "vite.config.ts"
47 | ],
48 | "exclude": [
49 | "node_modules",
50 | "dist",
51 | "**/*.js"
52 | ]
53 | }
54 |
--------------------------------------------------------------------------------
/types/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | interface ImportMetaEnv {
4 | /** 网站标题 */
5 | readonly VITE_APP_TITLE: string;
6 | /** 网站部署的目录 */
7 | readonly VITE_BASE_URL: string;
8 | /** API 接口路径 */
9 | readonly VITE_BASE_API: string;
10 | /** socket 请求路径前缀 */
11 | readonly VITE_BASE_SOCKET_PATH: string;
12 | /** socket 命名空间 */
13 | readonly VITE_BASE_SOCKET_NSP: string;
14 | /** mock API 路径 */
15 | readonly VITE_MOCK_API: string;
16 | // 更多环境变量...
17 | }
18 |
19 | interface ImportMeta {
20 | readonly env: ImportMetaEnv;
21 | }
22 |
--------------------------------------------------------------------------------
/types/global.d.ts:
--------------------------------------------------------------------------------
1 | declare global {
2 | const __APP_INFO__: {
3 | pkg: {
4 | name: string;
5 | version: string;
6 | dependencies: Recordable;
7 | devDependencies: Recordable;
8 | };
9 | lastBuildTime: string;
10 | };
11 | // declare interface Window {
12 | // // Global vue app instance
13 | // __APP__: App;
14 | // }
15 |
16 | export type Writable = {
17 | -readonly [P in keyof T]: T[P];
18 | };
19 |
20 | declare type Key = number | string;
21 | declare type Nullable = T | null;
22 | declare type NonNullable = T extends null | undefined ? never : T;
23 | declare type Recordable = Record;
24 | declare type ReadonlyRecordable = {
25 | readonly [key: string]: T;
26 | };
27 | declare type Indexable = {
28 | [key: string]: T;
29 | };
30 | declare type DeepPartial = {
31 | [P in keyof T]?: DeepPartial;
32 | };
33 |
34 | declare type TimeoutHandle = ReturnType;
35 | declare type IntervalHandle = ReturnType;
36 |
37 | declare interface ChangeEvent extends Event {
38 | target: HTMLInputElement;
39 | }
40 |
41 | declare interface WheelEvent {
42 | path?: EventTarget[];
43 | }
44 |
45 | declare function parseInt(s: string | number, radix?: number): number;
46 |
47 | declare function parseFloat(string: string | number): number;
48 | }
49 |
50 | export {};
51 |
--------------------------------------------------------------------------------
/types/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 | declare module '*.svg' {
4 | import * as React from 'react';
5 | export const ReactComponent: React.FunctionComponent & { title?: string }>;
6 | const src: string;
7 | export default src;
8 | }
9 |
10 | declare module '@emotion/core/jsx-runtime';
11 | declare interface Window {
12 | __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
13 | }
14 |
15 | declare interface ObjectConstructor {
16 | keys(o: T): (keyof T)[];
17 | }
18 |
19 | declare module '*.module.css' {
20 | const classes: { [key: string]: string };
21 | export default classes;
22 | }
23 |
24 | declare module '*.module.scss' {
25 | const classes: { [key: string]: string };
26 | export default classes;
27 | }
28 |
29 | declare module '*.module.sass' {
30 | const classes: { [key: string]: string };
31 | export default classes;
32 | }
33 |
34 | declare module '*.module.less' {
35 | const classes: { [key: string]: string };
36 | export default classes;
37 | }
38 |
39 | declare module '*.module.styl' {
40 | const classes: { [key: string]: string };
41 | export default classes;
42 | }
43 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import legacy from '@vitejs/plugin-legacy';
2 | import react from '@vitejs/plugin-react';
3 | import path from 'path';
4 | import { type ConfigEnv, type UserConfig, loadEnv } from 'vite';
5 | import vitePluginImp from 'vite-plugin-imp';
6 | import { viteMockServe } from 'vite-plugin-mock';
7 | import svgrPlugin from 'vite-plugin-svgr';
8 | import WindiCSS from 'vite-plugin-windicss';
9 |
10 | const CWD = process.cwd();
11 |
12 | // https://vitejs.dev/config/
13 | export default ({ command, mode }: ConfigEnv): UserConfig => {
14 | // 环境变量
15 | const { VITE_BASE_URL, VITE_DROP_CONSOLE } = loadEnv(mode, CWD);
16 |
17 | const isBuild = command === 'build';
18 | console.log('当前执行环境：', isBuild);
19 | return {
20 | base: VITE_BASE_URL,
21 | resolve: {
22 | alias: [
23 | {
24 | find: '@',
25 | replacement: path.resolve(__dirname, 'src')
26 | },
27 | {
28 | find: '~antd',
29 | replacement: path.resolve(__dirname, 'node_modules/antd')
30 | }
31 | ]
32 | },
33 | server: {
34 | port: 8889,
35 | proxy: {
36 | '/api': {
37 | target: `http://175.24.200.3:7001`,
38 | // changeOrigin: true,
39 | rewrite: path => path.replace(/^\/api/, '')
40 | },
41 | '/ws-api': {
42 | target: 'ws://175.24.200.3:7002',
43 | changeOrigin: true, //是否允许跨域
44 | ws: true
45 | }
46 | }
47 | },
48 | css: {
49 | preprocessorOptions: {
50 | less: {
51 | javascriptEnabled: true,
52 | modifyVars: { '@primary-color': '#13c2c2' }
53 | }
54 | // ....
55 | }
56 | },
57 | plugins: [
58 | WindiCSS(),
59 | legacy({
60 | targets: ['ie >= 11'],
61 | additionalLegacyPolyfills: ['regenerator-runtime/runtime']
62 | }),
63 | react({
64 | jsxImportSource: '@emotion/react',
65 | babel: {
66 | plugins: ['@emotion/babel-plugin']
67 | }
68 | }),
69 | viteMockServe({
70 | ignore: /^_/,
71 | mockPath: 'mock',
72 | localEnabled: !isBuild,
73 | prodEnabled: isBuild,
74 | logger: true,
75 | injectCode: `
76 | import { setupProdMockServer } from '../mock/_createProductionServer';
77 |
78 | setupProdMockServer();
79 | `
80 | }),
81 | vitePluginImp({
82 | libList: [
83 | // {
84 | // libName: 'antd',
85 | // style: name => `antd/es/${name}/style/index.css`,
86 | // },
87 | {
88 | libName: 'lodash',
89 | libDirectory: '',
90 | camel2DashComponentName: false,
91 | style: () => {
92 | return false;
93 | }
94 | }
95 | ]
96 | }),
97 | svgrPlugin({
98 | svgrOptions: {
99 | icon: true
100 | // ...svgr options (https://react-svgr.com/docs/options/)
101 | }
102 | })
103 | ],
104 | build: {
105 | terserOptions: {
106 | compress: {
107 | keep_infinity: true,
108 | drop_console: !!VITE_DROP_CONSOLE
109 | }
110 | }
111 | }
112 | };
113 | };
114 |
--------------------------------------------------------------------------------
/windi.config.ts:
--------------------------------------------------------------------------------
1 | // @ts-check - enable TS check for js file
2 | import { defineConfig } from 'vite-plugin-windicss';
3 |
4 | export default defineConfig({
5 | darkMode: 'class', // or 'media'
6 | theme: {
7 | extend: {
8 | screens: {
9 | sm: '640px',
10 | md: '768px',
11 | lg: '1024px',
12 | xl: '1280px',
13 | '2xl': '1536px'
14 | }
15 | }
16 | }
17 | });
18 |
--------------------------------------------------------------------------------
66 | 
67 | 
}
74 | />
75 |