From 3ae8aa831c099ed8584dc0919534cc8ff4d5c273 Mon Sep 17 00:00:00 2001 From: kangod Date: Sun, 18 Feb 2024 10:19:37 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E7=94=A8=20eslint=20=E5=92=8C=20prett?= =?UTF-8?q?ier=20=E5=A4=84=E7=90=86=E5=85=A8=E9=83=A8=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E8=AF=AD=E6=B3=95=E5=92=8C=E6=A0=BC=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 18 +- src/_mock/_org.js | 14 +- src/_mock/_user.js | 64 +- src/_mock/assets.js | 908 +++++++------- src/_mock/utils.js | 10 +- src/api/apiClient.ts | 126 +- src/api/services/orgService.ts | 4 +- src/api/services/userService.ts | 24 +- src/components/animate/motion-container.tsx | 26 +- src/components/animate/motion-lazy.tsx | 12 +- src/components/animate/motion-viewport.tsx | 26 +- src/components/animate/types.ts | 28 +- src/components/animate/variants/action.ts | 4 +- src/components/animate/variants/background.ts | 170 +-- src/components/animate/variants/bounce.ts | 206 ++-- src/components/animate/variants/container.ts | 40 +- src/components/animate/variants/fade.ts | 246 ++-- src/components/animate/variants/flip.ts | 100 +- src/components/animate/variants/index.ts | 148 +-- src/components/animate/variants/path.ts | 14 +- src/components/animate/variants/rotate.ts | 58 +- src/components/animate/variants/scale.ts | 100 +- src/components/animate/variants/slide.ts | 122 +- src/components/animate/variants/transition.ts | 18 +- src/components/animate/variants/zoom.ts | 252 ++-- src/components/card/index.tsx | 56 +- src/components/chart/chart.tsx | 14 +- src/components/chart/styles.ts | 96 +- src/components/chart/useChart.ts | 370 +++--- src/components/editor/index.tsx | 56 +- src/components/editor/styles.ts | 328 ++--- src/components/editor/toolbar.tsx | 172 +-- src/components/icon/icon-button.tsx | 24 +- src/components/icon/iconify-icon.tsx | 28 +- src/components/icon/svg-icon.tsx | 60 +- src/components/loading/circle-loading.tsx | 10 +- src/components/loading/line-loading.tsx | 60 +- src/components/locale-picker/index.tsx | 40 +- src/components/logo/index.tsx | 16 +- src/components/markdown/index.tsx | 24 +- src/components/markdown/styles.ts | 272 ++--- src/components/progress-bar/index.tsx | 96 +- src/components/scroll-progress/index.tsx | 32 +- src/components/scrollbar/index.tsx | 10 +- src/components/upload/styles.ts | 36 +- src/components/upload/upload-avatar.tsx | 124 +- src/components/upload/upload-box.tsx | 28 +- src/components/upload/upload-illustration.tsx | 1050 ++++++++--------- src/components/upload/upload-list-item.tsx | 120 +- src/components/upload/upload.tsx | 60 +- src/components/upload/utils.ts | 196 +-- src/hooks/event/use-copy-to-clipboard.ts | 54 +- src/hooks/web/use-keepalive.ts | 240 ++-- src/http/axios/service.ts | 2 +- src/layouts/_common/account-dropdown.tsx | 120 +- src/layouts/_common/bread-crumb.tsx | 74 +- src/layouts/_common/header-simple.tsx | 12 +- src/layouts/_common/notice.tsx | 482 ++++---- src/layouts/_common/search-bar.tsx | 447 +++---- src/layouts/_common/setting-button.tsx | 767 ++++++------ src/layouts/dashboard/header.tsx | 145 +-- src/layouts/dashboard/index.tsx | 142 +-- src/layouts/dashboard/main.tsx | 58 +- src/layouts/dashboard/multi-tabs.tsx | 745 ++++++------ src/layouts/dashboard/nav-horizontal.tsx | 106 +- src/layouts/dashboard/nav.tsx | 260 ++-- src/layouts/simple/index.tsx | 28 +- src/locales/i18n.ts | 38 +- src/locales/lang/en_US/common.json | 34 +- src/locales/lang/en_US/home.json | 6 +- src/locales/lang/en_US/index.ts | 6 +- src/locales/lang/en_US/sys.json | 292 ++--- src/locales/lang/zh_CN/common.json | 34 +- src/locales/lang/zh_CN/home.json | 6 +- src/locales/lang/zh_CN/index.ts | 6 +- src/locales/lang/zh_CN/sys.json | 290 ++--- src/locales/useLocale.ts | 60 +- .../components/animate/control-panel.tsx | 70 +- src/pages/components/animate/index.tsx | 36 +- .../animate/views/background/container.tsx | 48 +- .../animate/views/background/index.tsx | 84 +- .../animate/views/background/toolbar.tsx | 12 +- .../animate/views/inview/container.tsx | 80 +- .../components/animate/views/inview/index.tsx | 196 +-- .../animate/views/inview/toolbar.tsx | 54 +- .../animate/views/scroll/container.tsx | 36 +- .../components/animate/views/scroll/index.tsx | 116 +- .../animate/views/scroll/toolbar.tsx | 12 +- src/pages/components/chart/index.tsx | 148 +-- .../components/chart/view/chart-area.tsx | 44 +- src/pages/components/chart/view/chart-bar.tsx | 42 +- .../chart/view/chart-column-Stacked.tsx | 78 +- .../chart/view/chart-column-multiple.tsx | 50 +- .../chart/view/chart-column-negative.tsx | 132 +-- .../chart/view/chart-column-single.tsx | 38 +- .../components/chart/view/chart-donut.tsx | 38 +- .../components/chart/view/chart-line.tsx | 32 +- .../components/chart/view/chart-mixed.tsx | 116 +- src/pages/components/chart/view/chart-pie.tsx | 52 +- .../components/chart/view/chart-radar.tsx | 66 +- .../components/chart/view/chart-radial.tsx | 54 +- src/pages/components/editor/index.tsx | 42 +- src/pages/components/icon/index.tsx | 132 ++- src/pages/components/markdown/index.tsx | 32 +- src/pages/components/multi-language/index.tsx | 61 +- src/pages/components/scroll/index.tsx | 10 +- .../scroll/views/scroll-bar/index.tsx | 56 +- .../scroll/views/scroll-progress/index.tsx | 44 +- src/pages/components/upload/index.tsx | 104 +- .../dashboard/analysis/analysis-card.tsx | 32 +- .../dashboard/analysis/analysis-news.tsx | 58 +- .../analysis/analysis-order-timeline.tsx | 124 +- .../dashboard/analysis/analysis-tasks.tsx | 82 +- .../analysis/analysis-traffic-card.tsx | 36 +- src/pages/dashboard/analysis/index.tsx | 304 ++--- .../dashboard/workbench/area-download.tsx | 102 +- src/pages/dashboard/workbench/banner-card.tsx | 478 ++++---- .../dashboard/workbench/carousel-card.tsx | 48 +- .../workbench/conversion_applications.tsx | 102 +- .../dashboard/workbench/current-download.tsx | 82 +- src/pages/dashboard/workbench/index.tsx | 136 +-- src/pages/dashboard/workbench/new-invoice.tsx | 192 +-- src/pages/dashboard/workbench/top-authors.tsx | 114 +- .../dashboard/workbench/top-installed.tsx | 146 +-- src/pages/dashboard/workbench/top-related.tsx | 170 +-- src/pages/dashboard/workbench/total-card.tsx | 130 +- src/pages/functions/clipboard/index.tsx | 50 +- src/pages/home/list.page.tsx | 4 +- src/pages/management/blog/index.tsx | 2 +- .../management/system/organization/index.tsx | 427 +++---- .../organization/organization-chart.tsx | 134 +-- .../system/permission/permission-modal.tsx | 168 +-- src/pages/management/system/role/index.tsx | 203 ++-- .../management/system/role/role-modal.tsx | 106 +- src/pages/management/system/user/index.tsx | 163 +-- .../management/user/account/general-tab.tsx | 190 +-- src/pages/management/user/account/index.tsx | 70 +- .../user/account/notifications-tab.tsx | 138 +-- .../management/user/account/security-tab.tsx | 80 +- .../user/profile/connections-tab.tsx | 204 ++-- src/pages/management/user/profile/index.tsx | 145 +-- .../management/user/profile/profile-tab.tsx | 690 +++++------ .../management/user/profile/projects-tab.tsx | 254 ++-- .../management/user/profile/teams-tab.tsx | 148 +-- src/pages/menu-level/menu-level-1a/index.tsx | 2 +- .../menu-level-1b/menu-level-2a/index.tsx | 2 +- .../menu-level-2b/menu-level-3a/index.tsx | 2 +- .../menu-level-2b/menu-level-3b/index.tsx | 2 +- src/pages/setting/menus/list.page.tsx | 6 +- src/pages/sys/error/Page403.tsx | 224 ++-- src/pages/sys/error/Page404.tsx | 210 ++-- src/pages/sys/error/Page500.tsx | 292 ++--- src/pages/sys/login/Login.tsx | 78 +- src/pages/sys/login/LoginForm.tsx | 245 ++-- src/pages/sys/login/MobileForm.tsx | 158 +-- src/pages/sys/login/QrCodeForm.tsx | 28 +- src/pages/sys/login/RegisterForm.tsx | 139 +-- src/pages/sys/login/ResetForm.tsx | 77 +- .../sys/login/components/ReturnButton.tsx | 20 +- .../login/providers/LoginStateProvider.tsx | 44 +- src/pages/sys/others/blank.tsx | 2 +- .../others/calendar/calendar-event-form.tsx | 271 +++-- .../sys/others/calendar/calendar-event.tsx | 30 +- .../sys/others/calendar/calendar-header.tsx | 176 +-- src/pages/sys/others/calendar/event-utils.ts | 108 +- src/pages/sys/others/calendar/index.tsx | 352 +++--- src/pages/sys/others/calendar/styles.ts | 252 ++-- src/pages/sys/others/iframe/external-link.tsx | 14 +- src/pages/sys/others/iframe/index.tsx | 12 +- src/pages/sys/others/kanban/demo.tsx | 277 ++--- src/pages/sys/others/kanban/index.tsx | 474 ++++---- src/pages/sys/others/kanban/kanban-column.tsx | 321 ++--- src/pages/sys/others/kanban/kanban-task.tsx | 288 ++--- src/pages/sys/others/kanban/task-detail.tsx | 252 ++-- src/pages/sys/others/kanban/task-utils.ts | 228 ++-- src/pages/sys/others/kanban/types.ts | 68 +- src/router/components/auth-guard.tsx | 24 +- src/router/hooks/use-flattened-routes.ts | 12 +- src/router/hooks/use-match-route-meta.tsx | 70 +- src/router/hooks/use-params.ts | 4 +- src/router/hooks/use-pathname.ts | 4 +- src/router/hooks/use-permission-routes.tsx | 157 +-- src/router/hooks/use-route-to-menu.tsx | 102 +- src/router/hooks/use-router.ts | 24 +- src/router/hooks/use-search-params.ts | 4 +- src/router/index.tsx | 37 +- src/router/routes/error-routes.tsx | 28 +- src/router/routes/menu-routes.tsx | 14 +- src/router/routes/modules/components.tsx | 116 +- src/router/routes/modules/dashboard.tsx | 54 +- src/router/routes/modules/errors.tsx | 76 +- src/router/routes/modules/functions.tsx | 46 +- src/router/routes/modules/management.tsx | 106 +- src/router/routes/modules/menulevel.tsx | 124 +- src/router/routes/modules/others.tsx | 189 +-- src/router/utils.ts | 50 +- src/services/menu.ts | 4 +- src/store/index.ts | 22 +- src/store/settingStore.ts | 54 +- src/store/userStore.ts | 100 +- src/theme/antd/components/rage.tsx | 20 +- src/theme/antd/components/tag.tsx | 44 +- src/theme/antd/index.tsx | 48 +- src/theme/antd/theme.ts | 80 +- src/theme/base.css | 134 +-- src/theme/global.css | 1 - src/theme/hooks/use-reponsive.ts | 44 +- src/theme/hooks/use-theme-token.ts | 4 +- src/utils/format-number.ts | 22 +- src/utils/highlight.ts | 10 +- src/utils/storage.ts | 26 +- src/utils/tree.ts | 8 +- types/api.ts | 6 +- types/entity.ts | 74 +- types/router.ts | 86 +- 215 files changed, 12640 insertions(+), 12239 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 38d5134..332ba59 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,15 +6,15 @@ import AntdConfig from '@/theme/antd'; import { MotionLazy } from './components/animate/motion-lazy'; function App() { - return ( - - - - - - - - ); + return ( + + + + + + + + ); } export default App; diff --git a/src/_mock/_org.js b/src/_mock/_org.js index fca05b3..32bd3d8 100644 --- a/src/_mock/_org.js +++ b/src/_mock/_org.js @@ -4,13 +4,13 @@ import { ORG_LIST } from '@/_mock/assets'; import { OrgApi } from '@/api/services/orgService'; const orgList = rest.get(`/api${OrgApi.Org}`, (req, res, ctx) => { - return res( - ctx.json({ - status: 0, - message: '', - data: ORG_LIST, - }), - ); + return res( + ctx.json({ + status: 0, + message: '', + data: ORG_LIST, + }), + ); }); export default [orgList]; diff --git a/src/_mock/_user.js b/src/_mock/_user.js index 57a2c18..b775e8e 100644 --- a/src/_mock/_user.js +++ b/src/_mock/_user.js @@ -6,45 +6,45 @@ import { UserApi } from '@/api/services/userService'; import { USER_LIST } from './assets'; const signIn = rest.post(`/api${UserApi.SignIn}`, async (req, res, ctx) => { - const { account, password } = await req.json(); + const { account, password } = await req.json(); - const user = USER_LIST.find((item) => item.account === account); + const user = USER_LIST.find((item) => item.account === account); + + if (!user || user.password !== password) { + return res( + ctx.json({ + status: 10001, + message: 'Incorrect account or password.', + }), + ); + } - if (!user || user.password !== password) { return res( - ctx.json({ - status: 10001, - message: 'Incorrect account or password.', - }), + ctx.json({ + status: 0, + message: '', + data: { + user, + accessToken: faker.string.uuid(), + refreshToken: faker.string.uuid(), + }, + }), ); - } - - return res( - ctx.json({ - status: 0, - message: '', - data: { - user, - accessToken: faker.string.uuid(), - refreshToken: faker.string.uuid(), - }, - }), - ); }); const userList = rest.get('/api/user', (req, res, ctx) => { - return res( - ctx.status(200), - ctx.delay(1000), - ctx.json( - Array.from({ length: 10 }).map(() => ({ - fullname: faker.person.fullName(), - email: faker.internet.email(), - avatar: faker.image.avatar(), - address: faker.location.streetAddress(), - })), - ), - ); + return res( + ctx.status(200), + ctx.delay(1000), + ctx.json( + Array.from({ length: 10 }).map(() => ({ + fullname: faker.person.fullName(), + email: faker.internet.email(), + avatar: faker.image.avatar(), + address: faker.location.streetAddress(), + })), + ), + ); }); export default [signIn, userList]; diff --git a/src/_mock/assets.js b/src/_mock/assets.js index 63a0d65..63519a3 100644 --- a/src/_mock/assets.js +++ b/src/_mock/assets.js @@ -6,491 +6,493 @@ import { BasicStatus, PermissionType } from '#/enum'; * Organization data mock */ export const ORG_LIST = [ - { - id: '1', - name: 'East China Branch', - status: 'enable', - desc: faker.lorem.words(), + { + id: '1', + name: 'East China Branch', + status: 'enable', + desc: faker.lorem.words(), + order: 1, + children: [ + { id: '1-1', name: 'R&D Department', status: 'disable', desc: '', order: 1 }, + { id: '1-2', name: 'Marketing Department', status: 'enable', desc: '', order: 2 }, + { id: '1-3', name: 'Finance Department', status: 'enable', desc: '', order: 3 }, + ], + }, + { + id: '2', + name: 'South China Branch', + status: 'enable', + desc: faker.lorem.words(), + order: 2, + children: [ + { id: '2-1', name: 'R&D Department', status: 'disable', desc: '', order: 1 }, + { id: '2-2', name: 'Marketing Department', status: 'enable', desc: '', order: 2 }, + { id: '2-3', name: 'Finance Department', status: 'enable', desc: '', order: 3 }, + ], + }, + { + id: '3', + name: 'Northwest Branch', + status: 'enable', + desc: faker.lorem.words(), + order: 3, + children: [ + { id: '3-1', name: 'R&D Department', status: 'disable', desc: '', order: 1 }, + { id: '3-2', name: 'Marketing Department', status: 'enable', desc: '', order: 2 }, + { id: '3-3', name: 'Finance Department', status: 'enable', desc: '', order: 3 }, + ], + }, +]; + +/** + * User permission mock + */ +const DASHBOARD_PERMISSION = { + id: '9100714781927703', + parentId: '', + label: 'sys.menu.dashboard', + name: 'Dashboard', + icon: 'ic-analysis', + type: PermissionType.CATALOGUE, + route: 'dashboard', order: 1, children: [ - { id: '1-1', name: 'R&D Department', status: 'disable', desc: '', order: 1 }, - { id: '1-2', name: 'Marketing Department', status: 'enable', desc: '', order: 2 }, - { id: '1-3', name: 'Finance Department', status: 'enable', desc: '', order: 3 }, + { + id: '8426999229400979', + parentId: '9100714781927703', + label: 'sys.menu.workbench', + name: 'Workbench', + type: PermissionType.MENU, + route: 'workbench', + component: '/dashboard/workbench/index.tsx', + }, + { + id: '9710971640510357', + parentId: '9100714781927703', + label: 'sys.menu.analysis', + name: 'Analysis', + type: PermissionType.MENU, + route: 'analysis', + component: '/dashboard/analysis/index.tsx', + }, ], - }, - { - id: '2', - name: 'South China Branch', - status: 'enable', - desc: faker.lorem.words(), +}; +const MANAGEMENT_PERMISSION = { + id: '0901673425580518', + parentId: '', + label: 'sys.menu.management', + name: 'Management', + icon: 'ic-management', + type: PermissionType.CATALOGUE, + route: 'management', order: 2, children: [ - { id: '2-1', name: 'R&D Department', status: 'disable', desc: '', order: 1 }, - { id: '2-2', name: 'Marketing Department', status: 'enable', desc: '', order: 2 }, - { id: '2-3', name: 'Finance Department', status: 'enable', desc: '', order: 3 }, + { + id: '2781684678535711', + parentId: '0901673425580518', + label: 'sys.menu.user.index', + name: 'User', + type: PermissionType.CATALOGUE, + route: 'user', + children: [ + { + id: '4754063958766648', + parentId: '2781684678535711', + label: 'sys.menu.user.profile', + name: 'Profile', + type: PermissionType.MENU, + route: 'profile', + component: '/management/user/profile/index.tsx', + }, + { + id: '2516598794787938', + parentId: '2781684678535711', + label: 'sys.menu.user.account', + name: 'Account', + type: PermissionType.MENU, + route: 'account', + component: '/management/user/account/index.tsx', + }, + ], + }, + { + id: '0249937641030250', + parentId: '0901673425580518', + label: 'sys.menu.system.index', + name: 'System', + type: PermissionType.CATALOGUE, + route: 'system', + children: [ + { + id: '1985890042972842', + parentId: '0249937641030250', + label: 'sys.menu.system.organization', + name: 'Organization', + type: PermissionType.MENU, + route: 'organization', + component: '/management/system/organization/index.tsx', + }, + { + id: '4359580910369984', + parentId: '0249937641030250', + label: 'sys.menu.system.permission', + name: 'Permission', + type: PermissionType.MENU, + route: 'permission', + component: '/management/system/permission/index.tsx', + }, + { + id: '1689241785490759', + parentId: '0249937641030250', + label: 'sys.menu.system.role', + name: 'Role', + type: PermissionType.MENU, + route: 'role', + component: '/management/system/role/index.tsx', + }, + { + id: '0157880245365433', + parentId: '0249937641030250', + label: 'sys.menu.system.user', + name: 'User', + type: PermissionType.MENU, + route: 'user', + component: '/management/system/user/index.tsx', + }, + ], + }, ], - }, - { - id: '3', - name: 'Northwest Branch', - status: 'enable', - desc: faker.lorem.words(), +}; +const COMPONENTS_PERMISSION = { + id: '2271615060673773', + parentId: '', + label: 'sys.menu.components', + name: 'Components', + icon: 'solar:widget-5-bold-duotone', + type: PermissionType.CATALOGUE, + route: 'components', order: 3, children: [ - { id: '3-1', name: 'R&D Department', status: 'disable', desc: '', order: 1 }, - { id: '3-2', name: 'Marketing Department', status: 'enable', desc: '', order: 2 }, - { id: '3-3', name: 'Finance Department', status: 'enable', desc: '', order: 3 }, + { + id: '2478488238255411', + parentId: '2271615060673773', + label: 'sys.menu.icon', + name: 'Icon', + type: PermissionType.MENU, + route: 'icon', + component: '/components/icon/index.tsx', + }, + { + id: '6755238352318767', + parentId: '2271615060673773', + label: 'sys.menu.animate', + name: 'Animate', + type: PermissionType.MENU, + route: 'animate', + component: '/components/animate/index.tsx', + }, + { + id: '9992476513546805', + parentId: '2271615060673773', + label: 'sys.menu.scroll', + name: 'Scroll', + type: PermissionType.MENU, + route: 'scroll', + component: '/components/scroll/index.tsx', + }, + { + id: '1755562695856395', + parentId: '2271615060673773', + label: 'sys.menu.markdown', + name: 'Markdown', + type: PermissionType.MENU, + route: 'markdown', + component: '/components/markdown/index.tsx', + }, + { + id: '2122547769468069', + parentId: '2271615060673773', + label: 'sys.menu.editor', + name: 'Editor', + type: PermissionType.MENU, + route: 'editor', + component: '/components/editor/index.tsx', + }, + { + id: '2501920741714350', + parentId: '2271615060673773', + label: 'sys.menu.i18n', + name: 'Multi Language', + type: PermissionType.MENU, + route: 'i18n', + component: '/components/multi-language/index.tsx', + }, + { + id: '2013577074467956', + parentId: '2271615060673773', + label: 'sys.menu.upload', + name: 'upload', + type: PermissionType.MENU, + route: 'Upload', + component: '/components/upload/index.tsx', + }, + { + id: '7749726274771764', + parentId: '2271615060673773', + label: 'sys.menu.chart', + name: 'Chart', + type: PermissionType.MENU, + route: 'chart', + component: '/components/chart/index.tsx', + }, ], - }, -]; - -/** - * User permission mock - */ -const DASHBOARD_PERMISSION = { - id: '9100714781927703', - parentId: '', - label: 'sys.menu.dashboard', - name: 'Dashboard', - icon: 'ic-analysis', - type: PermissionType.CATALOGUE, - route: 'dashboard', - order: 1, - children: [ - { - id: '8426999229400979', - parentId: '9100714781927703', - label: 'sys.menu.workbench', - name: 'Workbench', - type: PermissionType.MENU, - route: 'workbench', - component: '/dashboard/workbench/index.tsx', - }, - { - id: '9710971640510357', - parentId: '9100714781927703', - label: 'sys.menu.analysis', - name: 'Analysis', - type: PermissionType.MENU, - route: 'analysis', - component: '/dashboard/analysis/index.tsx', - }, - ], }; -const MANAGEMENT_PERMISSION = { - id: '0901673425580518', - parentId: '', - label: 'sys.menu.management', - name: 'Management', - icon: 'ic-management', - type: PermissionType.CATALOGUE, - route: 'management', - order: 2, - children: [ - { - id: '2781684678535711', - parentId: '0901673425580518', - label: 'sys.menu.user.index', - name: 'User', - type: PermissionType.CATALOGUE, - route: 'user', - children: [ +const FUNCTIONS_PERMISSION = { + id: '8132044808088488', + parentId: '', + label: 'sys.menu.functions', + name: 'functions', + icon: 'solar:plain-2-bold-duotone', + type: PermissionType.CATALOGUE, + route: 'functions', + order: 4, + children: [ { - id: '4754063958766648', - parentId: '2781684678535711', - label: 'sys.menu.user.profile', - name: 'Profile', - type: PermissionType.MENU, - route: 'profile', - component: '/management/user/profile/index.tsx', + id: '3667930780705750', + parentId: '8132044808088488', + label: 'sys.menu.clipboard', + name: 'Clipboard', + type: PermissionType.MENU, + route: 'clipboard', + component: '/functions/clipboard/index.tsx', }, + ], +}; +const MENU_LEVEL_PERMISSION = { + id: '0194818428516575', + parentId: '', + label: 'sys.menu.menulevel.index', + name: 'Menu Level', + icon: 'ic-menulevel', + type: PermissionType.CATALOGUE, + route: 'menu-level', + order: 5, + children: [ { - id: '2516598794787938', - parentId: '2781684678535711', - label: 'sys.menu.user.account', - name: 'Account', - type: PermissionType.MENU, - route: 'account', - component: '/management/user/account/index.tsx', + id: '0144431332471389', + parentId: '0194818428516575', + label: 'sys.menu.menulevel.1a', + name: 'Menu Level 1a', + type: PermissionType.MENU, + route: 'menu-level-1a', + component: '/menu-level/menu-level-1a/index.tsx', }, - ], - }, - { - id: '0249937641030250', - parentId: '0901673425580518', - label: 'sys.menu.system.index', - name: 'System', - type: PermissionType.CATALOGUE, - route: 'system', - children: [ { - id: '1985890042972842', - parentId: '0249937641030250', - label: 'sys.menu.system.organization', - name: 'Organization', - type: PermissionType.MENU, - route: 'organization', - component: '/management/system/organization/index.tsx', + id: '7572529636800586', + parentId: '0194818428516575', + label: 'sys.menu.menulevel.1b.index', + name: 'Menu Level 1b', + type: PermissionType.CATALOGUE, + route: 'menu-level-1b', + children: [ + { + id: '3653745576583237', + parentId: '7572529636800586', + label: 'sys.menu.menulevel.1b.2a', + name: 'Menu Level 2a', + type: PermissionType.MENU, + route: 'menu-level-2a', + component: '/menu-level/menu-level-1b/menu-level-2a/index.tsx', + }, + { + id: '4873136353891364', + parentId: '7572529636800586', + label: 'sys.menu.menulevel.1b.2b.index', + name: 'Menu Level 2b', + type: PermissionType.CATALOGUE, + route: 'menu-level-2b', + children: [ + { + id: '4233029726998055', + parentId: '4873136353891364', + label: 'sys.menu.menulevel.1b.2b.3a', + name: 'Menu Level 3a', + type: PermissionType.MENU, + route: 'menu-level-3a', + component: + '/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx', + }, + { + id: '3298034742548454', + parentId: '4873136353891364', + label: 'sys.menu.menulevel.1b.2b.3b', + name: 'Menu Level 3b', + type: PermissionType.MENU, + route: 'menu-level-3b', + component: + '/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx', + }, + ], + }, + ], }, + ], +}; +const ERRORS_PERMISSION = { + id: '9406067785553476', + parentId: '', + label: 'sys.menu.error.index', + name: 'Error', + icon: 'bxs:error-alt', + type: PermissionType.CATALOGUE, + route: 'error', + order: 6, + children: [ { - id: '4359580910369984', - parentId: '0249937641030250', - label: 'sys.menu.system.permission', - name: 'Permission', - type: PermissionType.MENU, - route: 'permission', - component: '/management/system/permission/index.tsx', + id: '8557056851997154', + parentId: '9406067785553476', + label: 'sys.menu.error.403', + name: '403', + type: PermissionType.MENU, + route: '403', + component: '/sys/error/Page403.tsx', }, { - id: '1689241785490759', - parentId: '0249937641030250', - label: 'sys.menu.system.role', - name: 'Role', - type: PermissionType.MENU, - route: 'role', - component: '/management/system/role/index.tsx', + id: '5095669208159005', + parentId: '9406067785553476', + label: 'sys.menu.error.404', + name: '404', + type: PermissionType.MENU, + route: '404', + component: '/sys/error/Page404.tsx', }, { - id: '0157880245365433', - parentId: '0249937641030250', - label: 'sys.menu.system.user', - name: 'User', - type: PermissionType.MENU, - route: 'user', - component: '/management/system/user/index.tsx', + id: '0225992135973772', + parentId: '9406067785553476', + label: 'sys.menu.error.500', + name: '500', + type: PermissionType.MENU, + route: '500', + component: '/sys/error/Page500.tsx', }, - ], - }, - ], + ], }; -const COMPONENTS_PERMISSION = { - id: '2271615060673773', - parentId: '', - label: 'sys.menu.components', - name: 'Components', - icon: 'solar:widget-5-bold-duotone', - type: PermissionType.CATALOGUE, - route: 'components', - order: 3, - children: [ - { - id: '2478488238255411', - parentId: '2271615060673773', - label: 'sys.menu.icon', - name: 'Icon', - type: PermissionType.MENU, - route: 'icon', - component: '/components/icon/index.tsx', - }, - { - id: '6755238352318767', - parentId: '2271615060673773', - label: 'sys.menu.animate', - name: 'Animate', - type: PermissionType.MENU, - route: 'animate', - component: '/components/animate/index.tsx', - }, - { - id: '9992476513546805', - parentId: '2271615060673773', - label: 'sys.menu.scroll', - name: 'Scroll', - type: PermissionType.MENU, - route: 'scroll', - component: '/components/scroll/index.tsx', - }, - { - id: '1755562695856395', - parentId: '2271615060673773', - label: 'sys.menu.markdown', - name: 'Markdown', - type: PermissionType.MENU, - route: 'markdown', - component: '/components/markdown/index.tsx', - }, - { - id: '2122547769468069', - parentId: '2271615060673773', - label: 'sys.menu.editor', - name: 'Editor', - type: PermissionType.MENU, - route: 'editor', - component: '/components/editor/index.tsx', - }, - { - id: '2501920741714350', - parentId: '2271615060673773', - label: 'sys.menu.i18n', - name: 'Multi Language', - type: PermissionType.MENU, - route: 'i18n', - component: '/components/multi-language/index.tsx', - }, +const OTHERS_PERMISSION = [ { - id: '2013577074467956', - parentId: '2271615060673773', - label: 'sys.menu.upload', - name: 'upload', - type: PermissionType.MENU, - route: 'Upload', - component: '/components/upload/index.tsx', + id: '3981225257359246', + parentId: '', + label: 'sys.menu.calendar', + name: 'Calendar', + icon: 'solar:calendar-bold-duotone', + type: PermissionType.MENU, + route: 'calendar', + component: '/sys/others/calendar/index.tsx', }, { - id: '7749726274771764', - parentId: '2271615060673773', - label: 'sys.menu.chart', - name: 'Chart', - type: PermissionType.MENU, - route: 'chart', - component: '/components/chart/index.tsx', + id: '3513985683886393', + parentId: '', + label: 'sys.menu.kanban', + name: 'kanban', + icon: 'solar:clipboard-bold-duotone', + type: PermissionType.MENU, + route: 'kanban', + component: '/sys/others/kanban/index.tsx', }, - ], -}; -const FUNCTIONS_PERMISSION = { - id: '8132044808088488', - parentId: '', - label: 'sys.menu.functions', - name: 'functions', - icon: 'solar:plain-2-bold-duotone', - type: PermissionType.CATALOGUE, - route: 'functions', - order: 4, - children: [ { - id: '3667930780705750', - parentId: '8132044808088488', - label: 'sys.menu.clipboard', - name: 'Clipboard', - type: PermissionType.MENU, - route: 'clipboard', - component: '/functions/clipboard/index.tsx', + id: '5455837930804461', + parentId: '', + label: 'sys.menu.disabled', + name: 'Disabled', + icon: 'ic_disabled', + type: PermissionType.MENU, + route: 'disabled', + status: BasicStatus.DISABLE, + component: '/sys/others/calendar/index.tsx', }, - ], -}; -const MENU_LEVEL_PERMISSION = { - id: '0194818428516575', - parentId: '', - label: 'sys.menu.menulevel.index', - name: 'Menu Level', - icon: 'ic-menulevel', - type: PermissionType.CATALOGUE, - route: 'menu-level', - order: 5, - children: [ { - id: '0144431332471389', - parentId: '0194818428516575', - label: 'sys.menu.menulevel.1a', - name: 'Menu Level 1a', - type: PermissionType.MENU, - route: 'menu-level-1a', - component: '/menu-level/menu-level-1a/index.tsx', + id: '7728048658221587', + parentId: '', + label: 'sys.menu.label', + name: 'Label', + icon: 'ic_label', + type: PermissionType.MENU, + route: 'label', + newFeature: true, + component: '/sys/others/blank.tsx', }, { - id: '7572529636800586', - parentId: '0194818428516575', - label: 'sys.menu.menulevel.1b.index', - name: 'Menu Level 1b', - type: PermissionType.CATALOGUE, - route: 'menu-level-1b', - children: [ - { - id: '3653745576583237', - parentId: '7572529636800586', - label: 'sys.menu.menulevel.1b.2a', - name: 'Menu Level 2a', - type: PermissionType.MENU, - route: 'menu-level-2a', - component: '/menu-level/menu-level-1b/menu-level-2a/index.tsx', - }, - { - id: '4873136353891364', - parentId: '7572529636800586', - label: 'sys.menu.menulevel.1b.2b.index', - name: 'Menu Level 2b', - type: PermissionType.CATALOGUE, - route: 'menu-level-2b', - children: [ + id: '5733704222120995', + parentId: '', + label: 'sys.menu.frame', + name: 'Frame', + icon: 'ic_external', + type: PermissionType.CATALOGUE, + route: 'frame', + children: [ { - id: '4233029726998055', - parentId: '4873136353891364', - label: 'sys.menu.menulevel.1b.2b.3a', - name: 'Menu Level 3a', - type: PermissionType.MENU, - route: 'menu-level-3a', - component: '/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx', + id: '9884486809510480', + parentId: '5733704222120995', + label: 'sys.menu.external_link', + name: 'External Link', + type: PermissionType.MENU, + route: 'external_link', + component: '/sys/others/iframe/external-link.tsx', + frameSrc: 'https://ant.design/', }, { - id: '3298034742548454', - parentId: '4873136353891364', - label: 'sys.menu.menulevel.1b.2b.3b', - name: 'Menu Level 3b', - type: PermissionType.MENU, - route: 'menu-level-3b', - component: '/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx', + id: '9299640886731819', + parentId: '5733704222120995', + label: 'sys.menu.iframe', + name: 'Iframe', + type: PermissionType.MENU, + route: 'frame', + component: '/sys/others/iframe/index.tsx', + frameSrc: 'https://ant.design/', }, - ], - }, - ], - }, - ], -}; -const ERRORS_PERMISSION = { - id: '9406067785553476', - parentId: '', - label: 'sys.menu.error.index', - name: 'Error', - icon: 'bxs:error-alt', - type: PermissionType.CATALOGUE, - route: 'error', - order: 6, - children: [ - { - id: '8557056851997154', - parentId: '9406067785553476', - label: 'sys.menu.error.403', - name: '403', - type: PermissionType.MENU, - route: '403', - component: '/sys/error/Page403.tsx', - }, - { - id: '5095669208159005', - parentId: '9406067785553476', - label: 'sys.menu.error.404', - name: '404', - type: PermissionType.MENU, - route: '404', - component: '/sys/error/Page404.tsx', + ], }, { - id: '0225992135973772', - parentId: '9406067785553476', - label: 'sys.menu.error.500', - name: '500', - type: PermissionType.MENU, - route: '500', - component: '/sys/error/Page500.tsx', - }, - ], -}; -const OTHERS_PERMISSION = [ - { - id: '3981225257359246', - parentId: '', - label: 'sys.menu.calendar', - name: 'Calendar', - icon: 'solar:calendar-bold-duotone', - type: PermissionType.MENU, - route: 'calendar', - component: '/sys/others/calendar/index.tsx', - }, - { - id: '3513985683886393', - parentId: '', - label: 'sys.menu.kanban', - name: 'kanban', - icon: 'solar:clipboard-bold-duotone', - type: PermissionType.MENU, - route: 'kanban', - component: '/sys/others/kanban/index.tsx', - }, - { - id: '5455837930804461', - parentId: '', - label: 'sys.menu.disabled', - name: 'Disabled', - icon: 'ic_disabled', - type: PermissionType.MENU, - route: 'disabled', - status: BasicStatus.DISABLE, - component: '/sys/others/calendar/index.tsx', - }, - { - id: '7728048658221587', - parentId: '', - label: 'sys.menu.label', - name: 'Label', - icon: 'ic_label', - type: PermissionType.MENU, - route: 'label', - newFeature: true, - component: '/sys/others/blank.tsx', - }, - { - id: '5733704222120995', - parentId: '', - label: 'sys.menu.frame', - name: 'Frame', - icon: 'ic_external', - type: PermissionType.CATALOGUE, - route: 'frame', - children: [ - { - id: '9884486809510480', - parentId: '5733704222120995', - label: 'sys.menu.external_link', - name: 'External Link', - type: PermissionType.MENU, - route: 'external_link', - component: '/sys/others/iframe/external-link.tsx', - frameSrc: 'https://ant.design/', - }, - { - id: '9299640886731819', - parentId: '5733704222120995', - label: 'sys.menu.iframe', - name: 'Iframe', + id: '0941594969900756', + parentId: '', + label: 'sys.menu.blank', + name: 'Disabled', + icon: 'ic_blank', type: PermissionType.MENU, - route: 'frame', - component: '/sys/others/iframe/index.tsx', - frameSrc: 'https://ant.design/', - }, - ], - }, - { - id: '0941594969900756', - parentId: '', - label: 'sys.menu.blank', - name: 'Disabled', - icon: 'ic_blank', - type: PermissionType.MENU, - route: 'blank', - component: '/sys/others/blank.tsx', - }, + route: 'blank', + component: '/sys/others/blank.tsx', + }, ]; export const PERMISSION_LIST = [ - DASHBOARD_PERMISSION, - MANAGEMENT_PERMISSION, - COMPONENTS_PERMISSION, - FUNCTIONS_PERMISSION, - MENU_LEVEL_PERMISSION, - ERRORS_PERMISSION, - ...OTHERS_PERMISSION, + DASHBOARD_PERMISSION, + MANAGEMENT_PERMISSION, + COMPONENTS_PERMISSION, + FUNCTIONS_PERMISSION, + MENU_LEVEL_PERMISSION, + ERRORS_PERMISSION, + ...OTHERS_PERMISSION, ]; /** * User role mock */ const ADMIN_ROLE = { - id: '4281707933534332', - name: 'Admin', - label: 'admin', - status: BasicStatus.ENABLE, - order: 1, - desc: 'Super Admin', - permission: PERMISSION_LIST, + id: '4281707933534332', + name: 'Admin', + label: 'admin', + status: BasicStatus.ENABLE, + order: 1, + desc: 'Super Admin', + permission: PERMISSION_LIST, }; const TEST_ROLE = { - id: '9931665660771476', - name: 'Test', - label: 'test', - status: BasicStatus.ENABLE, - order: 2, - desc: 'test', - permission: [DASHBOARD_PERMISSION, COMPONENTS_PERMISSION, FUNCTIONS_PERMISSION], + id: '9931665660771476', + name: 'Test', + label: 'test', + status: BasicStatus.ENABLE, + order: 2, + desc: 'test', + permission: [DASHBOARD_PERMISSION, COMPONENTS_PERMISSION, FUNCTIONS_PERMISSION], }; export const ROLE_LIST = [ADMIN_ROLE, TEST_ROLE]; @@ -498,25 +500,25 @@ export const ROLE_LIST = [ADMIN_ROLE, TEST_ROLE]; * User data mock */ export const DEFAULT_USER = { - id: faker.string.uuid(), - account: 'lamp', - email: faker.internet.email(), - avatar: faker.image.avatarLegacy(), - createdAt: faker.date.anytime(), - updatedAt: faker.date.recent(), - password: '123456', - role: ADMIN_ROLE, - permissions: ADMIN_ROLE.permission, + id: faker.string.uuid(), + account: 'lamp', + email: faker.internet.email(), + avatar: faker.image.avatarLegacy(), + createdAt: faker.date.anytime(), + updatedAt: faker.date.recent(), + password: '123456', + role: ADMIN_ROLE, + permissions: ADMIN_ROLE.permission, }; export const TEST_USER = { - id: faker.string.uuid(), - account: 'lamp_pt', - password: '123456', - email: faker.internet.email(), - avatar: faker.image.avatarLegacy(), - createdAt: faker.date.anytime(), - updatedAt: faker.date.recent(), - role: TEST_ROLE, - permissions: TEST_ROLE.permission, + id: faker.string.uuid(), + account: 'lamp_pt', + password: '123456', + email: faker.internet.email(), + avatar: faker.image.avatarLegacy(), + createdAt: faker.date.anytime(), + updatedAt: faker.date.recent(), + role: TEST_ROLE, + permissions: TEST_ROLE.permission, }; export const USER_LIST = [DEFAULT_USER, TEST_USER]; diff --git a/src/_mock/utils.js b/src/_mock/utils.js index 87ab52d..09e867e 100644 --- a/src/_mock/utils.js +++ b/src/_mock/utils.js @@ -1,9 +1,9 @@ import { faker } from '@faker-js/faker'; export const fakeAvatars = (count) => { - const result = []; - for (let index = 0; index < count; index += 1) { - result.push(faker.image.avatarLegacy()); - } - return result; + const result = []; + for (let index = 0; index < count; index += 1) { + result.push(faker.image.avatarLegacy()); + } + return result; }; diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts index 0f29603..30743f3 100644 --- a/src/api/apiClient.ts +++ b/src/api/apiClient.ts @@ -9,86 +9,86 @@ import { ResultEnum } from '#/enum'; // 创建 axios 实例 const axiosInstance = axios.create({ - baseURL: import.meta.env.VITE_APP_BASE_API as string, - timeout: 50000, - headers: { 'Content-Type': 'application/json;charset=utf-8' }, + baseURL: import.meta.env.VITE_APP_BASE_API as string, + timeout: 50000, + headers: { 'Content-Type': 'application/json;charset=utf-8' }, }); // 请求拦截 axiosInstance.interceptors.request.use( - (config) => { - // 在请求被发送之前做些什么 - config.headers.Authorization = 'Bearer Token'; - return config; - }, - (error) => { - // 请求错误时做些什么 - return Promise.reject(error); - }, + (config) => { + // 在请求被发送之前做些什么 + config.headers.Authorization = 'Bearer Token'; + return config; + }, + (error) => { + // 请求错误时做些什么 + return Promise.reject(error); + }, ); // 响应拦截 axiosInstance.interceptors.response.use( - (res: AxiosResponse) => { - if (!res.data) throw new Error(t('sys.api.apiRequestFailed')); + (res: AxiosResponse) => { + if (!res.data) throw new Error(t('sys.api.apiRequestFailed')); - const { status, data, message } = res.data; - // 业务请求成功 - const hasSuccess = data && Reflect.has(res.data, 'status') && status === ResultEnum.SUCCESS; - if (hasSuccess) { - return data; - } + const { status, data, message } = res.data; + // 业务请求成功 + const hasSuccess = data && Reflect.has(res.data, 'status') && status === ResultEnum.SUCCESS; + if (hasSuccess) { + return data; + } - // 业务请求错误 - throw new Error(message || t('sys.api.apiRequestFailed')); - }, - (error: AxiosError) => { - const { response, message } = error || {}; - let errMsg = ''; - try { - errMsg = response?.data?.message || message; - } catch (error) { - throw new Error(error as unknown as string); - } - // 对响应错误做点什么 - if (isEmpty(errMsg)) { - // checkStatus - // errMsg = checkStatus(response.data.status); - errMsg = t('sys.api.errorMessage'); - } - Message.error(errMsg); - return Promise.reject(error); - }, + // 业务请求错误 + throw new Error(message || t('sys.api.apiRequestFailed')); + }, + (error: AxiosError) => { + const { response, message } = error || {}; + let errMsg = ''; + try { + errMsg = response?.data?.message || message; + } catch (error) { + throw new Error(error as unknown as string); + } + // 对响应错误做点什么 + if (isEmpty(errMsg)) { + // checkStatus + // errMsg = checkStatus(response.data.status); + errMsg = t('sys.api.errorMessage'); + } + Message.error(errMsg); + return Promise.reject(error); + }, ); class APIClient { - get(config: AxiosRequestConfig): Promise { - return this.request({ ...config, method: 'GET' }); - } + get(config: AxiosRequestConfig): Promise { + return this.request({ ...config, method: 'GET' }); + } - post(config: AxiosRequestConfig): Promise { - return this.request({ ...config, method: 'POST' }); - } + post(config: AxiosRequestConfig): Promise { + return this.request({ ...config, method: 'POST' }); + } - put(config: AxiosRequestConfig): Promise { - return this.request({ ...config, method: 'PUT' }); - } + put(config: AxiosRequestConfig): Promise { + return this.request({ ...config, method: 'PUT' }); + } - delete(config: AxiosRequestConfig): Promise { - return this.request({ ...config, method: 'DELETE' }); - } + delete(config: AxiosRequestConfig): Promise { + return this.request({ ...config, method: 'DELETE' }); + } - request(config: AxiosRequestConfig): Promise { - return new Promise((resolve, reject) => { - axiosInstance - .request>(config) - .then((res: AxiosResponse) => { - resolve(res as unknown as Promise); - }) - .catch((e: Error | AxiosError) => { - reject(e); + request(config: AxiosRequestConfig): Promise { + return new Promise((resolve, reject) => { + axiosInstance + .request>(config) + .then((res: AxiosResponse) => { + resolve(res as unknown as Promise); + }) + .catch((e: Error | AxiosError) => { + reject(e); + }); }); - }); - } + } } export default new APIClient(); diff --git a/src/api/services/orgService.ts b/src/api/services/orgService.ts index 77263fb..6cb3fee 100644 --- a/src/api/services/orgService.ts +++ b/src/api/services/orgService.ts @@ -3,11 +3,11 @@ import apiClient from '../apiClient'; import { Organization } from '#/entity'; export enum OrgApi { - Org = '/org', + Org = '/org', } const getOrgList = () => apiClient.get({ url: OrgApi.Org }); export default { - getOrgList, + getOrgList, }; diff --git a/src/api/services/userService.ts b/src/api/services/userService.ts index 8586dc1..86aab08 100644 --- a/src/api/services/userService.ts +++ b/src/api/services/userService.ts @@ -3,21 +3,21 @@ import apiClient from '../apiClient'; import { UserInfo, UserToken } from '#/entity'; export interface SignInReq { - account: string; - password: string; + account: string; + password: string; } export interface SignUpReq extends SignInReq { - email: string; + email: string; } export type SignInRes = UserToken & { user: UserInfo }; export enum UserApi { - SignIn = '/auth/signin', - SignUp = '/auth/signup', - Logout = '/auth/logout', - Refresh = '/auth/refresh', - User = '/user', + SignIn = '/auth/signin', + SignUp = '/auth/signup', + Logout = '/auth/logout', + Refresh = '/auth/refresh', + User = '/user', } const signin = (data: SignInReq) => apiClient.post({ url: UserApi.SignIn, data }); @@ -26,8 +26,8 @@ const logout = () => apiClient.get({ url: UserApi.Logout }); const findById = (id: string) => apiClient.get({ url: `${UserApi.User}/${id}` }); export default { - signin, - signup, - findById, - logout, + signin, + signup, + findById, + logout, }; diff --git a/src/components/animate/motion-container.tsx b/src/components/animate/motion-container.tsx index e602413..fcae3eb 100644 --- a/src/components/animate/motion-container.tsx +++ b/src/components/animate/motion-container.tsx @@ -3,7 +3,7 @@ import { m, MotionProps } from 'framer-motion'; import { varContainer } from './variants/container'; interface Props extends MotionProps { - className?: string; + className?: string; } /** @@ -25,16 +25,16 @@ interface Props extends MotionProps { * /> */ export default function MotionContainer({ children, className }: Props) { - return ( - - {children} - - ); + return ( + + {children} + + ); } diff --git a/src/components/animate/motion-lazy.tsx b/src/components/animate/motion-lazy.tsx index e28642f..29da941 100644 --- a/src/components/animate/motion-lazy.tsx +++ b/src/components/animate/motion-lazy.tsx @@ -1,15 +1,15 @@ import { LazyMotion, m, domMax } from 'framer-motion'; type Props = { - children: React.ReactNode; + children: React.ReactNode; }; /** * [Reduce bundle size by lazy-loading a subset of Motion's features](https://www.framer.com/motion/lazy-motion/) */ export function MotionLazy({ children }: Props) { - return ( - - {children} - - ); + return ( + + {children} + + ); } diff --git a/src/components/animate/motion-viewport.tsx b/src/components/animate/motion-viewport.tsx index 51c146b..60e4ed4 100644 --- a/src/components/animate/motion-viewport.tsx +++ b/src/components/animate/motion-viewport.tsx @@ -3,7 +3,7 @@ import { MotionProps, m } from 'framer-motion'; import { varContainer } from './variants'; interface Props extends MotionProps { - className?: string; + className?: string; } /** * [whileInView: 元素可以在进出视口时设置动画](https://www.framer.com/motion/scroll-animations/#scroll-triggered-animations) @@ -13,16 +13,16 @@ interface Props extends MotionProps { * + once: 仅触发一次 */ export default function MotionViewport({ children, className, ...other }: Props) { - return ( - - {children} - - ); + return ( + + {children} + + ); } diff --git a/src/components/animate/types.ts b/src/components/animate/types.ts index 2b236c6..04cf673 100644 --- a/src/components/animate/types.ts +++ b/src/components/animate/types.ts @@ -1,26 +1,26 @@ export type VariantsType = { - durationIn?: number; - durationOut?: number; - easeIn?: []; - easeOut?: []; - distance?: number; + durationIn?: number; + durationOut?: number; + easeIn?: []; + easeOut?: []; + distance?: number; }; export type TranHoverType = { - duration?: number; - ease?: []; + duration?: number; + ease?: []; }; export type TranEnterType = { - durationIn?: number; - easeIn?: []; + durationIn?: number; + easeIn?: []; }; export type TranExitType = { - durationOut?: number; - easeOut?: []; + durationOut?: number; + easeOut?: []; }; export type BackgroundType = { - duration?: number; - ease?: []; - colors?: string[]; + duration?: number; + ease?: []; + colors?: string[]; }; diff --git a/src/components/animate/variants/action.ts b/src/components/animate/variants/action.ts index caee72a..3187518 100644 --- a/src/components/animate/variants/action.ts +++ b/src/components/animate/variants/action.ts @@ -4,6 +4,6 @@ * @param tap */ export const varHover = (hover = 1.09, tap = 0.97) => ({ - hover: { scale: hover }, - tap: { scale: tap }, + hover: { scale: hover }, + tap: { scale: tap }, }); diff --git a/src/components/animate/variants/background.ts b/src/components/animate/variants/background.ts index 9f2123c..cfc4b4c 100644 --- a/src/components/animate/variants/background.ts +++ b/src/components/animate/variants/background.ts @@ -1,103 +1,103 @@ import { BackgroundType } from '../types'; export const varBgColor = (props?: BackgroundType) => { - const colors = props?.colors || ['#19dcea', '#b22cff']; - const duration = props?.duration || 5; - const ease = props?.ease || 'linear'; + const colors = props?.colors || ['#19dcea', '#b22cff']; + const duration = props?.duration || 5; + const ease = props?.ease || 'linear'; - return { - animate: { - background: colors, - transition: { duration, ease }, - }, - }; + return { + animate: { + background: colors, + transition: { duration, ease }, + }, + }; }; // ---------------------------------------------------------------------- export const varBgKenburns = (props?: BackgroundType) => { - const duration = props?.duration || 5; - const ease = props?.ease || 'easeOut'; + const duration = props?.duration || 5; + const ease = props?.ease || 'easeOut'; - return { - top: { - animate: { - scale: [1, 1.25], - y: [0, -15], - transformOrigin: ['50% 16%', '50% top'], - transition: { duration, ease }, - }, - }, - bottom: { - animate: { - scale: [1, 1.25], - y: [0, 15], - transformOrigin: ['50% 84%', '50% bottom'], - transition: { duration, ease }, - }, - }, - left: { - animate: { - scale: [1, 1.25], - x: [0, 20], - y: [0, 15], - transformOrigin: ['16% 50%', '0% left'], - transition: { duration, ease }, - }, - }, - right: { - animate: { - scale: [1, 1.25], - x: [0, -20], - y: [0, -15], - transformOrigin: ['84% 50%', '0% right'], - transition: { duration, ease }, - }, - }, - }; + return { + top: { + animate: { + scale: [1, 1.25], + y: [0, -15], + transformOrigin: ['50% 16%', '50% top'], + transition: { duration, ease }, + }, + }, + bottom: { + animate: { + scale: [1, 1.25], + y: [0, 15], + transformOrigin: ['50% 84%', '50% bottom'], + transition: { duration, ease }, + }, + }, + left: { + animate: { + scale: [1, 1.25], + x: [0, 20], + y: [0, 15], + transformOrigin: ['16% 50%', '0% left'], + transition: { duration, ease }, + }, + }, + right: { + animate: { + scale: [1, 1.25], + x: [0, -20], + y: [0, -15], + transformOrigin: ['84% 50%', '0% right'], + transition: { duration, ease }, + }, + }, + }; }; // ---------------------------------------------------------------------- export const varBgPan = (props?: BackgroundType) => { - const colors = props?.colors || ['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab']; - const duration = props?.duration || 5; - const ease = props?.ease || 'linear'; + const colors = props?.colors || ['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab']; + const duration = props?.duration || 5; + const ease = props?.ease || 'linear'; - const gradient = (deg: number) => `linear-gradient(${deg}deg, ${colors})`; + const gradient = (deg: number) => `linear-gradient(${deg}deg, ${colors})`; - return { - top: { - animate: { - backgroundImage: [gradient(0), gradient(0)], - backgroundPosition: ['center 99%', 'center 1%'], - backgroundSize: ['100% 600%', '100% 600%'], - transition: { duration, ease }, - }, - }, - right: { - animate: { - backgroundPosition: ['1% center', '99% center'], - backgroundImage: [gradient(270), gradient(270)], - backgroundSize: ['600% 100%', '600% 100%'], - transition: { duration, ease }, - }, - }, - bottom: { - animate: { - backgroundImage: [gradient(0), gradient(0)], - backgroundPosition: ['center 1%', 'center 99%'], - backgroundSize: ['100% 600%', '100% 600%'], - transition: { duration, ease }, - }, - }, - left: { - animate: { - backgroundPosition: ['99% center', '1% center'], - backgroundImage: [gradient(270), gradient(270)], - backgroundSize: ['600% 100%', '600% 100%'], - transition: { duration, ease }, - }, - }, - }; + return { + top: { + animate: { + backgroundImage: [gradient(0), gradient(0)], + backgroundPosition: ['center 99%', 'center 1%'], + backgroundSize: ['100% 600%', '100% 600%'], + transition: { duration, ease }, + }, + }, + right: { + animate: { + backgroundPosition: ['1% center', '99% center'], + backgroundImage: [gradient(270), gradient(270)], + backgroundSize: ['600% 100%', '600% 100%'], + transition: { duration, ease }, + }, + }, + bottom: { + animate: { + backgroundImage: [gradient(0), gradient(0)], + backgroundPosition: ['center 1%', 'center 99%'], + backgroundSize: ['100% 600%', '100% 600%'], + transition: { duration, ease }, + }, + }, + left: { + animate: { + backgroundPosition: ['99% center', '1% center'], + backgroundImage: [gradient(270), gradient(270)], + backgroundSize: ['600% 100%', '600% 100%'], + transition: { duration, ease }, + }, + }, + }; }; diff --git a/src/components/animate/variants/bounce.ts b/src/components/animate/variants/bounce.ts index 880bad4..a75a604 100644 --- a/src/components/animate/variants/bounce.ts +++ b/src/components/animate/variants/bounce.ts @@ -3,109 +3,109 @@ import { VariantsType } from '../types'; import { varTranEnter, varTranExit } from './transition'; export const varBounce = (props?: VariantsType) => { - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - in: { - initial: {}, - animate: { - scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1], - opacity: [0, 1, 1, 1, 1, 1], - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scale: [0.9, 1.1, 0.3], - opacity: [1, 1, 0], - }, - }, - inUp: { - initial: {}, - animate: { - y: [720, -24, 12, -4, 0], - scaleY: [4, 0.9, 0.95, 0.985, 1], - opacity: [0, 1, 1, 1, 1], - transition: { ...varTranEnter({ durationIn, easeIn }) }, - }, - exit: { - y: [12, -24, 720], - scaleY: [0.985, 0.9, 3], - opacity: [1, 1, 0], - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inDown: { - initial: {}, - animate: { - y: [-720, 24, -12, 4, 0], - scaleY: [4, 0.9, 0.95, 0.985, 1], - opacity: [0, 1, 1, 1, 1], - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - y: [-12, 24, -720], - scaleY: [0.985, 0.9, 3], - opacity: [1, 1, 0], - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inLeft: { - initial: {}, - animate: { - x: [-720, 24, -12, 4, 0], - scaleX: [3, 1, 0.98, 0.995, 1], - opacity: [0, 1, 1, 1, 1], - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - x: [0, 24, -720], - scaleX: [1, 0.9, 2], - opacity: [1, 1, 0], - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inRight: { - initial: {}, - animate: { - x: [720, -24, 12, -4, 0], - scaleX: [3, 1, 0.98, 0.995, 1], - opacity: [0, 1, 1, 1, 1], - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - x: [0, -24, 720], - scaleX: [1, 0.9, 2], - opacity: [1, 1, 0], - transition: varTranExit({ durationOut, easeOut }), - }, - }, + return { + // IN + in: { + initial: {}, + animate: { + scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1], + opacity: [0, 1, 1, 1, 1, 1], + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scale: [0.9, 1.1, 0.3], + opacity: [1, 1, 0], + }, + }, + inUp: { + initial: {}, + animate: { + y: [720, -24, 12, -4, 0], + scaleY: [4, 0.9, 0.95, 0.985, 1], + opacity: [0, 1, 1, 1, 1], + transition: { ...varTranEnter({ durationIn, easeIn }) }, + }, + exit: { + y: [12, -24, 720], + scaleY: [0.985, 0.9, 3], + opacity: [1, 1, 0], + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inDown: { + initial: {}, + animate: { + y: [-720, 24, -12, 4, 0], + scaleY: [4, 0.9, 0.95, 0.985, 1], + opacity: [0, 1, 1, 1, 1], + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + y: [-12, 24, -720], + scaleY: [0.985, 0.9, 3], + opacity: [1, 1, 0], + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inLeft: { + initial: {}, + animate: { + x: [-720, 24, -12, 4, 0], + scaleX: [3, 1, 0.98, 0.995, 1], + opacity: [0, 1, 1, 1, 1], + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + x: [0, 24, -720], + scaleX: [1, 0.9, 2], + opacity: [1, 1, 0], + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inRight: { + initial: {}, + animate: { + x: [720, -24, 12, -4, 0], + scaleX: [3, 1, 0.98, 0.995, 1], + opacity: [0, 1, 1, 1, 1], + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + x: [0, -24, 720], + scaleX: [1, 0.9, 2], + opacity: [1, 1, 0], + transition: varTranExit({ durationOut, easeOut }), + }, + }, - // OUT - out: { - animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }, - }, - outUp: { - animate: { - y: [-12, 24, -720], - scaleY: [0.985, 0.9, 3], - opacity: [1, 1, 0], - }, - }, - outDown: { - animate: { - y: [12, -24, 720], - scaleY: [0.985, 0.9, 3], - opacity: [1, 1, 0], - }, - }, - outLeft: { - animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }, - }, - outRight: { - animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }, - }, - }; + // OUT + out: { + animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] }, + }, + outUp: { + animate: { + y: [-12, 24, -720], + scaleY: [0.985, 0.9, 3], + opacity: [1, 1, 0], + }, + }, + outDown: { + animate: { + y: [12, -24, 720], + scaleY: [0.985, 0.9, 3], + opacity: [1, 1, 0], + }, + }, + outLeft: { + animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }, + }, + outRight: { + animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] }, + }, + }; }; diff --git a/src/components/animate/variants/container.ts b/src/components/animate/variants/container.ts index 1ff849c..4764b21 100644 --- a/src/components/animate/variants/container.ts +++ b/src/components/animate/variants/container.ts @@ -1,26 +1,26 @@ export type Props = { - staggerIn?: number; - delayIn?: number; - staggerOut?: number; + staggerIn?: number; + delayIn?: number; + staggerOut?: number; }; export const varContainer = (props?: Props) => { - const staggerIn = props?.staggerIn || 0.05; - const delayIn = props?.staggerIn || 0.05; - const staggerOut = props?.staggerIn || 0.05; + const staggerIn = props?.staggerIn || 0.05; + const delayIn = props?.staggerIn || 0.05; + const staggerOut = props?.staggerIn || 0.05; - return { - animate: { - transition: { - staggerChildren: staggerIn, - delayChildren: delayIn, - }, - }, - exit: { - transition: { - staggerChildren: staggerOut, - staggerDirection: -1, - }, - }, - }; + return { + animate: { + transition: { + staggerChildren: staggerIn, + delayChildren: delayIn, + }, + }, + exit: { + transition: { + staggerChildren: staggerOut, + staggerDirection: -1, + }, + }, + }; }; diff --git a/src/components/animate/variants/fade.ts b/src/components/animate/variants/fade.ts index decd7f2..2921967 100644 --- a/src/components/animate/variants/fade.ts +++ b/src/components/animate/variants/fade.ts @@ -6,129 +6,129 @@ import { varTranEnter, varTranExit } from './transition'; // ---------------------------------------------------------------------- export const varFade = (props?: VariantsType) => { - const distance = props?.distance || 120; - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const distance = props?.distance || 120; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - in: { - initial: { opacity: 0 }, - animate: { opacity: 1, transition: varTranEnter }, - exit: { opacity: 0, transition: varTranExit }, - }, - inUp: { - initial: { y: distance, opacity: 0 }, - animate: { - y: 0, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - y: distance, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inDown: { - initial: { y: -distance, opacity: 0 }, - animate: { - y: 0, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - y: -distance, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inLeft: { - initial: { x: -distance, opacity: 0 }, - animate: { - x: 0, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - x: -distance, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inRight: { - initial: { x: distance, opacity: 0 }, - animate: { - x: 0, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - x: distance, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, + return { + // IN + in: { + initial: { opacity: 0 }, + animate: { opacity: 1, transition: varTranEnter }, + exit: { opacity: 0, transition: varTranExit }, + }, + inUp: { + initial: { y: distance, opacity: 0 }, + animate: { + y: 0, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + y: distance, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inDown: { + initial: { y: -distance, opacity: 0 }, + animate: { + y: 0, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + y: -distance, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inLeft: { + initial: { x: -distance, opacity: 0 }, + animate: { + x: 0, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + x: -distance, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inRight: { + initial: { x: distance, opacity: 0 }, + animate: { + x: 0, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + x: distance, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, - // OUT - out: { - initial: { opacity: 1 }, - animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) }, - exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) }, - }, - outUp: { - initial: { y: 0, opacity: 1 }, - animate: { - y: -distance, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - y: 0, - opacity: 1, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - outDown: { - initial: { y: 0, opacity: 1 }, - animate: { - y: distance, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - y: 0, - opacity: 1, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - outLeft: { - initial: { x: 0, opacity: 1 }, - animate: { - x: -distance, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - x: 0, - opacity: 1, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - outRight: { - initial: { x: 0, opacity: 1 }, - animate: { - x: distance, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - x: 0, - opacity: 1, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - }; + // OUT + out: { + initial: { opacity: 1 }, + animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) }, + exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) }, + }, + outUp: { + initial: { y: 0, opacity: 1 }, + animate: { + y: -distance, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + y: 0, + opacity: 1, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + outDown: { + initial: { y: 0, opacity: 1 }, + animate: { + y: distance, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + y: 0, + opacity: 1, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + outLeft: { + initial: { x: 0, opacity: 1 }, + animate: { + x: -distance, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + x: 0, + opacity: 1, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + outRight: { + initial: { x: 0, opacity: 1 }, + animate: { + x: distance, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + x: 0, + opacity: 1, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + }; }; diff --git a/src/components/animate/variants/flip.ts b/src/components/animate/variants/flip.ts index 98fc35d..6adcc04 100644 --- a/src/components/animate/variants/flip.ts +++ b/src/components/animate/variants/flip.ts @@ -6,56 +6,56 @@ import { varTranEnter, varTranExit } from './transition'; // ---------------------------------------------------------------------- export const varFlip = (props?: VariantsType) => { - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - inX: { - initial: { rotateX: -180, opacity: 0 }, - animate: { - rotateX: 0, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - rotateX: -180, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inY: { - initial: { rotateY: -180, opacity: 0 }, - animate: { - rotateY: 0, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - rotateY: -180, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, + return { + // IN + inX: { + initial: { rotateX: -180, opacity: 0 }, + animate: { + rotateX: 0, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + rotateX: -180, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inY: { + initial: { rotateY: -180, opacity: 0 }, + animate: { + rotateY: 0, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + rotateY: -180, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, - // OUT - outX: { - initial: { rotateX: 0, opacity: 1 }, - animate: { - rotateX: 70, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - outY: { - initial: { rotateY: 0, opacity: 1 }, - animate: { - rotateY: 70, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - }; + // OUT + outX: { + initial: { rotateX: 0, opacity: 1 }, + animate: { + rotateX: 70, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + outY: { + initial: { rotateY: 0, opacity: 1 }, + animate: { + rotateY: 70, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + }; }; diff --git a/src/components/animate/variants/index.ts b/src/components/animate/variants/index.ts index b3994f8..083fc54 100644 --- a/src/components/animate/variants/index.ts +++ b/src/components/animate/variants/index.ts @@ -21,78 +21,78 @@ export * from './transition'; export * from './zoom'; export function getVariant(variant = 'slideInUp') { - return { - // Slide - slideInUp: varSlide().inUp, - slideInDown: varSlide().inDown, - slideInLeft: varSlide().inLeft, - slideInRight: varSlide().inRight, - slideOutUp: varSlide().outUp, - slideOutDown: varSlide().outDown, - slideOutLeft: varSlide().outLeft, - slideOutRight: varSlide().outRight, - // Fade - fadeIn: varFade().in, - fadeInUp: varFade().inUp, - fadeInDown: varFade().inDown, - fadeInLeft: varFade().inLeft, - fadeInRight: varFade().inRight, - fadeOut: varFade().out, - fadeOutUp: varFade().outUp, - fadeOutDown: varFade().outDown, - fadeOutLeft: varFade().outLeft, - fadeOutRight: varFade().outRight, - // Zoom - zoomIn: varZoom({ distance: 80 }).in, - zoomInUp: varZoom({ distance: 80 }).inUp, - zoomInDown: varZoom({ distance: 80 }).inDown, - zoomInLeft: varZoom({ distance: 240 }).inLeft, - zoomInRight: varZoom({ distance: 240 }).inRight, - zoomOut: varZoom().out, - zoomOutLeft: varZoom().outLeft, - zoomOutRight: varZoom().outRight, - zoomOutUp: varZoom().outUp, - zoomOutDown: varZoom().outDown, - // Bounce - bounceIn: varBounce().in, - bounceInUp: varBounce().inUp, - bounceInDown: varBounce().inDown, - bounceInLeft: varBounce().inLeft, - bounceInRight: varBounce().inRight, - bounceOut: varBounce().out, - bounceOutUp: varBounce().outUp, - bounceOutDown: varBounce().outDown, - bounceOutLeft: varBounce().outLeft, - bounceOutRight: varBounce().outRight, - // Flip - flipInX: varFlip().inX, - flipInY: varFlip().inY, - flipOutX: varFlip().outX, - flipOutY: varFlip().outY, - // Scale - scaleInX: varScale().inX, - scaleInY: varScale().inY, - scaleOutX: varScale().outX, - scaleOutY: varScale().outY, - // Rotate - rotateIn: varRotate().in, - rotateOut: varRotate().out, - // Background - kenburnsTop: varBgKenburns().top, - kenburnsBottom: varBgKenburns().bottom, - kenburnsLeft: varBgKenburns().left, - kenburnsRight: varBgKenburns().right, - panTop: varBgPan().top, - panBottom: varBgPan().bottom, - panLeft: varBgPan().left, - panRight: varBgPan().right, - color2x: varBgColor(), - color3x: varBgColor({ colors: ['#19dcea', '#b22cff', '#ea2222'] }), - color4x: varBgColor({ - colors: ['#19dcea', '#b22cff', '#ea2222', '#f5be10'], - }), - color5x: varBgColor({ - colors: ['#19dcea', '#b22cff', '#ea2222', '#f5be10', '#3bd80d'], - }), - }[variant]; + return { + // Slide + slideInUp: varSlide().inUp, + slideInDown: varSlide().inDown, + slideInLeft: varSlide().inLeft, + slideInRight: varSlide().inRight, + slideOutUp: varSlide().outUp, + slideOutDown: varSlide().outDown, + slideOutLeft: varSlide().outLeft, + slideOutRight: varSlide().outRight, + // Fade + fadeIn: varFade().in, + fadeInUp: varFade().inUp, + fadeInDown: varFade().inDown, + fadeInLeft: varFade().inLeft, + fadeInRight: varFade().inRight, + fadeOut: varFade().out, + fadeOutUp: varFade().outUp, + fadeOutDown: varFade().outDown, + fadeOutLeft: varFade().outLeft, + fadeOutRight: varFade().outRight, + // Zoom + zoomIn: varZoom({ distance: 80 }).in, + zoomInUp: varZoom({ distance: 80 }).inUp, + zoomInDown: varZoom({ distance: 80 }).inDown, + zoomInLeft: varZoom({ distance: 240 }).inLeft, + zoomInRight: varZoom({ distance: 240 }).inRight, + zoomOut: varZoom().out, + zoomOutLeft: varZoom().outLeft, + zoomOutRight: varZoom().outRight, + zoomOutUp: varZoom().outUp, + zoomOutDown: varZoom().outDown, + // Bounce + bounceIn: varBounce().in, + bounceInUp: varBounce().inUp, + bounceInDown: varBounce().inDown, + bounceInLeft: varBounce().inLeft, + bounceInRight: varBounce().inRight, + bounceOut: varBounce().out, + bounceOutUp: varBounce().outUp, + bounceOutDown: varBounce().outDown, + bounceOutLeft: varBounce().outLeft, + bounceOutRight: varBounce().outRight, + // Flip + flipInX: varFlip().inX, + flipInY: varFlip().inY, + flipOutX: varFlip().outX, + flipOutY: varFlip().outY, + // Scale + scaleInX: varScale().inX, + scaleInY: varScale().inY, + scaleOutX: varScale().outX, + scaleOutY: varScale().outY, + // Rotate + rotateIn: varRotate().in, + rotateOut: varRotate().out, + // Background + kenburnsTop: varBgKenburns().top, + kenburnsBottom: varBgKenburns().bottom, + kenburnsLeft: varBgKenburns().left, + kenburnsRight: varBgKenburns().right, + panTop: varBgPan().top, + panBottom: varBgPan().bottom, + panLeft: varBgPan().left, + panRight: varBgPan().right, + color2x: varBgColor(), + color3x: varBgColor({ colors: ['#19dcea', '#b22cff', '#ea2222'] }), + color4x: varBgColor({ + colors: ['#19dcea', '#b22cff', '#ea2222', '#f5be10'], + }), + color5x: varBgColor({ + colors: ['#19dcea', '#b22cff', '#ea2222', '#f5be10', '#3bd80d'], + }), + }[variant]; } diff --git a/src/components/animate/variants/path.ts b/src/components/animate/variants/path.ts index a4bee2c..bf4fbb8 100644 --- a/src/components/animate/variants/path.ts +++ b/src/components/animate/variants/path.ts @@ -1,14 +1,14 @@ // ---------------------------------------------------------------------- export const TRANSITION = { - duration: 2, - ease: [0.43, 0.13, 0.23, 0.96], + duration: 2, + ease: [0.43, 0.13, 0.23, 0.96], }; export const varPath = { - animate: { - fillOpacity: [0, 0, 1], - pathLength: [1, 0.4, 0], - transition: TRANSITION, - }, + animate: { + fillOpacity: [0, 0, 1], + pathLength: [1, 0.4, 0], + transition: TRANSITION, + }, }; diff --git a/src/components/animate/variants/rotate.ts b/src/components/animate/variants/rotate.ts index 0b3fdfb..0f98300 100644 --- a/src/components/animate/variants/rotate.ts +++ b/src/components/animate/variants/rotate.ts @@ -6,35 +6,35 @@ import { varTranEnter, varTranExit } from './transition'; // ---------------------------------------------------------------------- export const varRotate = (props?: VariantsType) => { - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - in: { - initial: { opacity: 0, rotate: -360 }, - animate: { - opacity: 1, - rotate: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - opacity: 0, - rotate: -360, - transition: varTranExit({ durationOut, easeOut }), - }, - }, + return { + // IN + in: { + initial: { opacity: 0, rotate: -360 }, + animate: { + opacity: 1, + rotate: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + opacity: 0, + rotate: -360, + transition: varTranExit({ durationOut, easeOut }), + }, + }, - // OUT - out: { - initial: { opacity: 1, rotate: 0 }, - animate: { - opacity: 0, - rotate: -360, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - }; + // OUT + out: { + initial: { opacity: 1, rotate: 0 }, + animate: { + opacity: 0, + rotate: -360, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + }; }; diff --git a/src/components/animate/variants/scale.ts b/src/components/animate/variants/scale.ts index abee403..d7921f0 100644 --- a/src/components/animate/variants/scale.ts +++ b/src/components/animate/variants/scale.ts @@ -5,56 +5,56 @@ import { varTranEnter, varTranExit } from './transition'; // ---------------------------------------------------------------------- export const varScale = (props?: VariantsType) => { - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - inX: { - initial: { scaleX: 0, opacity: 0 }, - animate: { - scaleX: 1, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scaleX: 0, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inY: { - initial: { scaleY: 0, opacity: 0 }, - animate: { - scaleY: 1, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scaleY: 0, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, + return { + // IN + inX: { + initial: { scaleX: 0, opacity: 0 }, + animate: { + scaleX: 1, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scaleX: 0, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inY: { + initial: { scaleY: 0, opacity: 0 }, + animate: { + scaleY: 1, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scaleY: 0, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, - // OUT - outX: { - initial: { scaleX: 1, opacity: 1 }, - animate: { - scaleX: 0, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - outY: { - initial: { scaleY: 1, opacity: 1 }, - animate: { - scaleY: 0, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - }; + // OUT + outX: { + initial: { scaleX: 1, opacity: 1 }, + animate: { + scaleX: 0, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + outY: { + initial: { scaleY: 1, opacity: 1 }, + animate: { + scaleY: 0, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + }; }; diff --git a/src/components/animate/variants/slide.ts b/src/components/animate/variants/slide.ts index d9adacb..55161fd 100644 --- a/src/components/animate/variants/slide.ts +++ b/src/components/animate/variants/slide.ts @@ -6,67 +6,67 @@ import { varTranEnter, varTranExit } from './transition'; // ---------------------------------------------------------------------- export const varSlide = (props?: VariantsType) => { - const distance = props?.distance || 160; - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const distance = props?.distance || 160; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - inUp: { - initial: { y: distance }, - animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) }, - exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) }, - }, - inDown: { - initial: { y: -distance }, - animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) }, - exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) }, - }, - inLeft: { - initial: { x: -distance }, - animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) }, - exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) }, - }, - inRight: { - initial: { x: distance }, - animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) }, - exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) }, - }, + return { + // IN + inUp: { + initial: { y: distance }, + animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) }, + exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) }, + }, + inDown: { + initial: { y: -distance }, + animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) }, + exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) }, + }, + inLeft: { + initial: { x: -distance }, + animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) }, + exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) }, + }, + inRight: { + initial: { x: distance }, + animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) }, + exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) }, + }, - // OUT - outUp: { - initial: { y: 0 }, - animate: { - y: -distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) }, - }, - outDown: { - initial: { y: 0 }, - animate: { - y: distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) }, - }, - outLeft: { - initial: { x: 0 }, - animate: { - x: -distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) }, - }, - outRight: { - initial: { x: 0 }, - animate: { - x: distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) }, - }, - }; + // OUT + outUp: { + initial: { y: 0 }, + animate: { + y: -distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) }, + }, + outDown: { + initial: { y: 0 }, + animate: { + y: distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) }, + }, + outLeft: { + initial: { x: 0 }, + animate: { + x: -distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) }, + }, + outRight: { + initial: { x: 0 }, + animate: { + x: distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) }, + }, + }; }; diff --git a/src/components/animate/variants/transition.ts b/src/components/animate/variants/transition.ts index 7ed7081..2562f85 100644 --- a/src/components/animate/variants/transition.ts +++ b/src/components/animate/variants/transition.ts @@ -4,22 +4,22 @@ import { TranHoverType, TranEnterType, TranExitType } from '../types'; // A transition defines how values animate from one state to another. export const varTranHover = (props?: TranHoverType) => { - const duration = props?.duration || 0.32; - const ease = props?.ease || [0.43, 0.13, 0.23, 0.96]; + const duration = props?.duration || 0.32; + const ease = props?.ease || [0.43, 0.13, 0.23, 0.96]; - return { duration, ease }; + return { duration, ease }; }; export const varTranEnter = (props?: TranEnterType) => { - const duration = props?.durationIn || 0.64; - const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96]; + const duration = props?.durationIn || 0.64; + const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96]; - return { duration, ease }; + return { duration, ease }; }; export const varTranExit = (props?: TranExitType) => { - const duration = props?.durationOut || 0.48; - const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96]; + const duration = props?.durationOut || 0.48; + const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96]; - return { duration, ease }; + return { duration, ease }; }; diff --git a/src/components/animate/variants/zoom.ts b/src/components/animate/variants/zoom.ts index 86e078b..3f83855 100644 --- a/src/components/animate/variants/zoom.ts +++ b/src/components/animate/variants/zoom.ts @@ -6,132 +6,132 @@ import { varTranEnter, varTranExit } from './transition'; // ---------------------------------------------------------------------- export const varZoom = (props?: VariantsType) => { - const distance = props?.distance || 720; - const durationIn = props?.durationIn; - const durationOut = props?.durationOut; - const easeIn = props?.easeIn; - const easeOut = props?.easeOut; + const distance = props?.distance || 720; + const durationIn = props?.durationIn; + const durationOut = props?.durationOut; + const easeIn = props?.easeIn; + const easeOut = props?.easeOut; - return { - // IN - in: { - initial: { scale: 0, opacity: 0 }, - animate: { - scale: 1, - opacity: 1, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scale: 0, - opacity: 0, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inUp: { - initial: { scale: 0, opacity: 0, translateY: distance }, - animate: { - scale: 1, - opacity: 1, - translateY: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scale: 0, - opacity: 0, - translateY: distance, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inDown: { - initial: { scale: 0, opacity: 0, translateY: -distance }, - animate: { - scale: 1, - opacity: 1, - translateY: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scale: 0, - opacity: 0, - translateY: -distance, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inLeft: { - initial: { scale: 0, opacity: 0, translateX: -distance }, - animate: { - scale: 1, - opacity: 1, - translateX: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scale: 0, - opacity: 0, - translateX: -distance, - transition: varTranExit({ durationOut, easeOut }), - }, - }, - inRight: { - initial: { scale: 0, opacity: 0, translateX: distance }, - animate: { - scale: 1, - opacity: 1, - translateX: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - exit: { - scale: 0, - opacity: 0, - translateX: distance, - transition: varTranExit({ durationOut, easeOut }), - }, - }, + return { + // IN + in: { + initial: { scale: 0, opacity: 0 }, + animate: { + scale: 1, + opacity: 1, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scale: 0, + opacity: 0, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inUp: { + initial: { scale: 0, opacity: 0, translateY: distance }, + animate: { + scale: 1, + opacity: 1, + translateY: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scale: 0, + opacity: 0, + translateY: distance, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inDown: { + initial: { scale: 0, opacity: 0, translateY: -distance }, + animate: { + scale: 1, + opacity: 1, + translateY: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scale: 0, + opacity: 0, + translateY: -distance, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inLeft: { + initial: { scale: 0, opacity: 0, translateX: -distance }, + animate: { + scale: 1, + opacity: 1, + translateX: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scale: 0, + opacity: 0, + translateX: -distance, + transition: varTranExit({ durationOut, easeOut }), + }, + }, + inRight: { + initial: { scale: 0, opacity: 0, translateX: distance }, + animate: { + scale: 1, + opacity: 1, + translateX: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + exit: { + scale: 0, + opacity: 0, + translateX: distance, + transition: varTranExit({ durationOut, easeOut }), + }, + }, - // OUT - out: { - initial: { scale: 1, opacity: 1 }, - animate: { - scale: 0, - opacity: 0, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - outUp: { - initial: { scale: 1, opacity: 1 }, - animate: { - scale: 0, - opacity: 0, - translateY: -distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - outDown: { - initial: { scale: 1, opacity: 1 }, - animate: { - scale: 0, - opacity: 0, - translateY: distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - outLeft: { - initial: { scale: 1, opacity: 1 }, - animate: { - scale: 0, - opacity: 0, - translateX: -distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - outRight: { - initial: { scale: 1, opacity: 1 }, - animate: { - scale: 0, - opacity: 0, - translateX: distance, - transition: varTranEnter({ durationIn, easeIn }), - }, - }, - }; + // OUT + out: { + initial: { scale: 1, opacity: 1 }, + animate: { + scale: 0, + opacity: 0, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + outUp: { + initial: { scale: 1, opacity: 1 }, + animate: { + scale: 0, + opacity: 0, + translateY: -distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + outDown: { + initial: { scale: 1, opacity: 1 }, + animate: { + scale: 0, + opacity: 0, + translateY: distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + outLeft: { + initial: { scale: 1, opacity: 1 }, + animate: { + scale: 0, + opacity: 0, + translateX: -distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + outRight: { + initial: { scale: 1, opacity: 1 }, + animate: { + scale: 0, + opacity: 0, + translateX: distance, + transition: varTranEnter({ durationIn, easeIn }), + }, + }, + }; }; diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx index 130267e..9739fac 100644 --- a/src/components/card/index.tsx +++ b/src/components/card/index.tsx @@ -6,35 +6,35 @@ import { useThemeToken } from '@/theme/hooks'; import { ThemeMode } from '#/enum'; type Props = { - children?: ReactNode; - className?: string; - style?: CSSProperties; + children?: ReactNode; + className?: string; + style?: CSSProperties; }; export default function Card({ children, ...other }: Props) { - const { colorBgContainer } = useThemeToken(); - const { themeMode } = useSettings(); + const { colorBgContainer } = useThemeToken(); + const { themeMode } = useSettings(); - const boxShadow: { [key in ThemeMode]: string } = { - light: 'rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px', - dark: 'rgba(0, 0, 0, 0.2) 0px 0px 2px 0px, rgba(0, 0, 0, 0.12) 0px 12px 24px -4px', - }; - return ( -
- {children} -
- ); + const boxShadow: { [key in ThemeMode]: string } = { + light: 'rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px', + dark: 'rgba(0, 0, 0, 0.2) 0px 0px 2px 0px, rgba(0, 0, 0, 0.12) 0px 12px 24px -4px', + }; + return ( +
+ {children} +
+ ); } diff --git a/src/components/chart/chart.tsx b/src/components/chart/chart.tsx index c5fd5c6..71f5ece 100644 --- a/src/components/chart/chart.tsx +++ b/src/components/chart/chart.tsx @@ -9,13 +9,13 @@ import { StyledApexChart } from './styles'; import type { Props as ApexChartProps } from 'react-apexcharts'; function Chart(props: ApexChartProps) { - const { themeMode } = useSettings(); - const theme = useThemeToken(); - return ( - - - - ); + const { themeMode } = useSettings(); + const theme = useThemeToken(); + return ( + + + + ); } export default memo(Chart); diff --git a/src/components/chart/styles.ts b/src/components/chart/styles.ts index b59cba1..86d8fbc 100644 --- a/src/components/chart/styles.ts +++ b/src/components/chart/styles.ts @@ -5,54 +5,56 @@ import styled from 'styled-components'; import { ThemeMode } from '#/enum'; export const StyledApexChart = styled.div<{ $thememode: ThemeMode; $theme: GlobalToken }>` - .apexcharts-canvas { - /* TOOLTIP */ - .apexcharts-tooltip { - color: ${(props) => props.$theme.colorText}; - border-radius: 10px; - backdrop-filter: blur(6px); - background-color: ${(props) => Color(props.$theme.colorBgElevated).alpha(0.8).toString()}; - box-shadow: ${(props) => - props.$thememode === ThemeMode.Light - ? `rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px` - : `rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;`}; - .apexcharts-tooltip-title { - text-align: center; - font-weight: bold; - background-color: rgba(145, 158, 171, 0.08); - } - } + .apexcharts-canvas { + /* TOOLTIP */ + .apexcharts-tooltip { + color: ${(props) => props.$theme.colorText}; + border-radius: 10px; + backdrop-filter: blur(6px); + background-color: ${(props) => + Color(props.$theme.colorBgElevated).alpha(0.8).toString()}; + box-shadow: ${(props) => + props.$thememode === ThemeMode.Light + ? `rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px` + : `rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;`}; + .apexcharts-tooltip-title { + text-align: center; + font-weight: bold; + background-color: rgba(145, 158, 171, 0.08); + } + } - /* TOOLTIP X */ - .apexcharts-xaxistooltip { - color: ${(props) => props.$theme.colorText}; - border-radius: 10px; - backdrop-filter: blur(6px); - border-color: transparent; - box-shadow: ${(props) => - props.$thememode === ThemeMode.Light - ? `rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px` - : `rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;`}; - background-color: ${(props) => Color(props.$theme.colorBgElevated).alpha(0.8).toString()}; - &::before { - border-bottom-color: rgba(145, 158, 171, 0.24); - } - &::after { - border-bottom-color: rgba(255, 255, 255, 0.8); - } - } + /* TOOLTIP X */ + .apexcharts-xaxistooltip { + color: ${(props) => props.$theme.colorText}; + border-radius: 10px; + backdrop-filter: blur(6px); + border-color: transparent; + box-shadow: ${(props) => + props.$thememode === ThemeMode.Light + ? `rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px` + : `rgba(0, 0, 0, 0.24) 0px 0px 2px 0px, rgba(0, 0, 0, 0.24) -20px 20px 40px -4px;`}; + background-color: ${(props) => + Color(props.$theme.colorBgElevated).alpha(0.8).toString()}; + &::before { + border-bottom-color: rgba(145, 158, 171, 0.24); + } + &::after { + border-bottom-color: rgba(255, 255, 255, 0.8); + } + } - /* LEGEND */ - .apexcharts-legend { - padding: 0; - .apexcharts-legend-series { - display: inline-flex !important; - align-items: ecnter; - } - .apexcharts-legend-text { - line-height: 18px; - text-transform: capitalize; - } + /* LEGEND */ + .apexcharts-legend { + padding: 0; + .apexcharts-legend-series { + display: inline-flex !important; + align-items: ecnter; + } + .apexcharts-legend-text { + line-height: 18px; + text-transform: capitalize; + } + } } - } `; diff --git a/src/components/chart/useChart.ts b/src/components/chart/useChart.ts index 07d6367..ed91d8b 100644 --- a/src/components/chart/useChart.ts +++ b/src/components/chart/useChart.ts @@ -4,203 +4,203 @@ import { mergeDeepRight } from 'ramda'; import { useThemeToken } from '@/theme/hooks'; export default function useChart(options: ApexOptions) { - const theme = useThemeToken(); - - const LABEL_TOTAL = { - show: true, - label: 'Total', - color: theme.colorTextSecondary, - fontSize: theme.fontSizeHeading2, - lineHeight: theme.lineHeightHeading2, - }; - - const LABEL_VALUE = { - offsetY: 8, - color: theme.colorText, - fontSize: theme.fontSizeHeading3, - lineHeight: theme.lineHeightHeading3, - }; - - const baseOptions = { - // Colors - colors: [ - theme.colorPrimary, - theme.colorWarning, - theme.colorInfo, - theme.colorError, - theme.colorSuccess, - theme.colorWarningActive, - theme.colorSuccessActive, - theme.colorInfoActive, - theme.colorInfoText, - ], - - // Chart - chart: { - toolbar: { show: false }, - zoom: { enabled: false }, - foreColor: theme.colorTextDisabled, - fontFamily: theme.fontFamily, - }, - - // States - states: { - hover: { - filter: { - type: 'lighten', - value: 0.04, + const theme = useThemeToken(); + + const LABEL_TOTAL = { + show: true, + label: 'Total', + color: theme.colorTextSecondary, + fontSize: theme.fontSizeHeading2, + lineHeight: theme.lineHeightHeading2, + }; + + const LABEL_VALUE = { + offsetY: 8, + color: theme.colorText, + fontSize: theme.fontSizeHeading3, + lineHeight: theme.lineHeightHeading3, + }; + + const baseOptions = { + // Colors + colors: [ + theme.colorPrimary, + theme.colorWarning, + theme.colorInfo, + theme.colorError, + theme.colorSuccess, + theme.colorWarningActive, + theme.colorSuccessActive, + theme.colorInfoActive, + theme.colorInfoText, + ], + + // Chart + chart: { + toolbar: { show: false }, + zoom: { enabled: false }, + foreColor: theme.colorTextDisabled, + fontFamily: theme.fontFamily, }, - }, - active: { - filter: { - type: 'darken', - value: 0.88, + + // States + states: { + hover: { + filter: { + type: 'lighten', + value: 0.04, + }, + }, + active: { + filter: { + type: 'darken', + value: 0.88, + }, + }, }, - }, - }, - - // Fill - fill: { - opacity: 1, - gradient: { - type: 'vertical', - shadeIntensity: 0, - opacityFrom: 0.4, - opacityTo: 0, - stops: [0, 100], - }, - }, - - // Datalabels - dataLabels: { - enabled: false, - }, - - // Stroke - stroke: { - width: 3, - curve: 'smooth', - lineCap: 'round', - }, - - // Grid - grid: { - strokeDashArray: 3, - borderColor: theme.colorSplit, - xaxis: { - lines: { - show: false, + + // Fill + fill: { + opacity: 1, + gradient: { + type: 'vertical', + shadeIntensity: 0, + opacityFrom: 0.4, + opacityTo: 0, + stops: [0, 100], + }, }, - }, - }, - - // Xaxis - xaxis: { - axisBorder: { show: false }, - axisTicks: { show: false }, - }, - - // Markers - markers: { - size: 0, - }, - - // Tooltip - tooltip: { - theme: false, - x: { - show: true, - }, - }, - - // Legend - legend: { - show: true, - fontSize: 13, - position: 'top', - horizontalAlign: 'right', - markers: { - radius: 12, - }, - fontWeight: 500, - itemMargin: { - horizontal: 8, - }, - labels: { - colors: theme.colorText, - }, - }, - - // plotOptions - plotOptions: { - // Bar - bar: { - borderRadius: 4, - columnWidth: '28%', - borderRadiusApplication: 'end', - borderRadiusWhenStacked: 'last', - }, - - // Pie + Donut - pie: { - donut: { - labels: { - show: true, - value: LABEL_VALUE, - total: LABEL_TOTAL, - }, + + // Datalabels + dataLabels: { + enabled: false, }, - }, - // Radialbar - radialBar: { - track: { - strokeWidth: '100%', + // Stroke + stroke: { + width: 3, + curve: 'smooth', + lineCap: 'round', }, - dataLabels: { - value: LABEL_VALUE, - total: LABEL_TOTAL, + + // Grid + grid: { + strokeDashArray: 3, + borderColor: theme.colorSplit, + xaxis: { + lines: { + show: false, + }, + }, }, - }, - - // Radar - radar: { - polygons: { - fill: { colors: ['transparent'] }, - strokeColors: theme.colorSplit, - connectorColors: theme.colorSplit, + + // Xaxis + xaxis: { + axisBorder: { show: false }, + axisTicks: { show: false }, }, - }, - // polarArea - polarArea: { - rings: { - strokeColor: theme.colorSplit, + // Markers + markers: { + size: 0, }, - spokes: { - connectorColors: theme.colorSplit, + + // Tooltip + tooltip: { + theme: false, + x: { + show: true, + }, }, - }, - }, - - // Responsive - responsive: [ - { - // sm - breakpoint: theme.screenSM, - options: { - plotOptions: { bar: { columnWidth: '40%' } }, + + // Legend + legend: { + show: true, + fontSize: 13, + position: 'top', + horizontalAlign: 'right', + markers: { + radius: 12, + }, + fontWeight: 500, + itemMargin: { + horizontal: 8, + }, + labels: { + colors: theme.colorText, + }, }, - }, - { - // md - breakpoint: theme.screenMD, - options: { - plotOptions: { bar: { columnWidth: '32%' } }, + + // plotOptions + plotOptions: { + // Bar + bar: { + borderRadius: 4, + columnWidth: '28%', + borderRadiusApplication: 'end', + borderRadiusWhenStacked: 'last', + }, + + // Pie + Donut + pie: { + donut: { + labels: { + show: true, + value: LABEL_VALUE, + total: LABEL_TOTAL, + }, + }, + }, + + // Radialbar + radialBar: { + track: { + strokeWidth: '100%', + }, + dataLabels: { + value: LABEL_VALUE, + total: LABEL_TOTAL, + }, + }, + + // Radar + radar: { + polygons: { + fill: { colors: ['transparent'] }, + strokeColors: theme.colorSplit, + connectorColors: theme.colorSplit, + }, + }, + + // polarArea + polarArea: { + rings: { + strokeColor: theme.colorSplit, + }, + spokes: { + connectorColors: theme.colorSplit, + }, + }, }, - }, - ], - }; - return mergeDeepRight(baseOptions, options) as ApexOptions; + // Responsive + responsive: [ + { + // sm + breakpoint: theme.screenSM, + options: { + plotOptions: { bar: { columnWidth: '40%' } }, + }, + }, + { + // md + breakpoint: theme.screenMD, + options: { + plotOptions: { bar: { columnWidth: '32%' } }, + }, + }, + ], + }; + + return mergeDeepRight(baseOptions, options) as ApexOptions; } diff --git a/src/components/editor/index.tsx b/src/components/editor/index.tsx index 3e8f661..56b48ba 100644 --- a/src/components/editor/index.tsx +++ b/src/components/editor/index.tsx @@ -7,34 +7,34 @@ import { useThemeToken } from '@/theme/hooks'; import { StyledEditor } from './styles'; interface Props extends ReactQuillProps { - sample?: boolean; + sample?: boolean; } export default function Editor({ id = 'slash-quill', sample = false, ...other }: Props) { - const token = useThemeToken(); - const { themeMode } = useSettings(); - const modules = { - toolbar: { - container: `#${id}`, - }, - history: { - delay: 500, - maxStack: 100, - userOnly: true, - }, - syntax: true, - clipboard: { - matchVisual: false, - }, - }; - return ( - - - - - ); + const token = useThemeToken(); + const { themeMode } = useSettings(); + const modules = { + toolbar: { + container: `#${id}`, + }, + history: { + delay: 500, + maxStack: 100, + userOnly: true, + }, + syntax: true, + clipboard: { + matchVisual: false, + }, + }; + return ( + + + + + ); } diff --git a/src/components/editor/styles.ts b/src/components/editor/styles.ts index 241a764..22725c3 100644 --- a/src/components/editor/styles.ts +++ b/src/components/editor/styles.ts @@ -5,183 +5,183 @@ import { ThemeMode } from '#/enum'; type KeyofToken = keyof GlobalToken; const getHeadingStyle = (level: 1 | 2 | 3 | 4 | 5, token: GlobalToken) => { - const fontSizeHeading: KeyofToken = `fontSizeHeading${level}`; - const lineHeightHeading: KeyofToken = `lineHeightHeading${level}`; + const fontSizeHeading: KeyofToken = `fontSizeHeading${level}`; + const lineHeightHeading: KeyofToken = `lineHeightHeading${level}`; - return { - margin: 0, - color: token.colorTextHeading, - fontWeight: 800, - fontSize: token[fontSizeHeading], - lineHeight: token[lineHeightHeading], - }; + return { + margin: 0, + color: token.colorTextHeading, + fontWeight: 800, + fontSize: token[fontSizeHeading], + lineHeight: token[lineHeightHeading], + }; }; const StyledEditor = styled.div<{ $token: GlobalToken; $thememode: ThemeMode }>` - h1 { - ${(props) => getHeadingStyle(1, props.$token)}; - } - h2 { - ${(props) => getHeadingStyle(2, props.$token)}; - } - h3 { - ${(props) => getHeadingStyle(3, props.$token)}; - } - h4 { - ${(props) => getHeadingStyle(4, props.$token)}; - } - h5 { - ${(props) => getHeadingStyle(5, props.$token)}; - } - overflow: hidden; - position: relative; - border-radius: 8px; - border: 1px solid rgba(119, 145, 170, 0.2); - & .ql-container.ql-snow { - border: none; - line-height: 1.6; - font-weight: 400; - font-size: 0.875rem; - } - & .ql-editor { - min-height: 160px; - max-height: 640px; - background-color: rgba(145, 158, 171, 0.08); - &.ql-blank::before { - font-style: normal; - color: rgb(145, 158, 171); + h1 { + ${(props) => getHeadingStyle(1, props.$token)}; } - & pre.ql-syntax { - border-radius: 8px; - line-height: 1.57143; - font-size: 0.875rem; - font-family: 'Public Sans', sans-serif; - font-weight: 400; - padding: 16px; - border-radius: 8px; - background-color: rgb(22, 28, 36); + h2 { + ${(props) => getHeadingStyle(2, props.$token)}; + } + h3 { + ${(props) => getHeadingStyle(3, props.$token)}; + } + h4 { + ${(props) => getHeadingStyle(4, props.$token)}; + } + h5 { + ${(props) => getHeadingStyle(5, props.$token)}; + } + overflow: hidden; + position: relative; + border-radius: 8px; + border: 1px solid rgba(119, 145, 170, 0.2); + & .ql-container.ql-snow { + border: none; + line-height: 1.6; + font-weight: 400; + font-size: 0.875rem; + } + & .ql-editor { + min-height: 160px; + max-height: 640px; + background-color: rgba(145, 158, 171, 0.08); + &.ql-blank::before { + font-style: normal; + color: rgb(145, 158, 171); + } + & pre.ql-syntax { + border-radius: 8px; + line-height: 1.57143; + font-size: 0.875rem; + font-family: 'Public Sans', sans-serif; + font-weight: 400; + padding: 16px; + border-radius: 8px; + background-color: rgb(22, 28, 36); + } } - } `; const StyledToolbar = styled.div<{ $token: GlobalToken; $thememode: ThemeMode }>` - & .ql-snow.ql-toolbar button:hover .ql-fill, - .ql-snow .ql-toolbar button:hover .ql-fill, - .ql-snow.ql-toolbar button:focus .ql-fill, - .ql-snow .ql-toolbar button:focus .ql-fill, - .ql-snow.ql-toolbar button.ql-active .ql-fill, - .ql-snow .ql-toolbar button.ql-active .ql-fill, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, - .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, - .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, - .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { - fill: ${(props) => props.$token.colorPrimary}; - } - & .ql-snow.ql-toolbar button:hover, - .ql-snow .ql-toolbar button:hover, - .ql-snow.ql-toolbar button:focus, - .ql-snow .ql-toolbar button:focus, - .ql-snow.ql-toolbar button.ql-active, - .ql-snow .ql-toolbar button.ql-active, - .ql-snow.ql-toolbar .ql-picker-label:hover, - .ql-snow .ql-toolbar .ql-picker-label:hover, - .ql-snow.ql-toolbar .ql-picker-label.ql-active, - .ql-snow .ql-toolbar .ql-picker-label.ql-active, - .ql-snow.ql-toolbar .ql-picker-item:hover, - .ql-snow .ql-toolbar .ql-picker-item:hover, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected { - color: ${(props) => props.$token.colorPrimary}; - } - - & .ql-snow.ql-toolbar button:hover .ql-stroke, - .ql-snow .ql-toolbar button:hover .ql-stroke, - .ql-snow.ql-toolbar button:focus .ql-stroke, - .ql-snow .ql-toolbar button:focus .ql-stroke, - .ql-snow.ql-toolbar button.ql-active .ql-stroke, - .ql-snow .ql-toolbar button.ql-active .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, - .ql-snow.ql-toolbar button:hover .ql-stroke-miter, - .ql-snow .ql-toolbar button:hover .ql-stroke-miter, - .ql-snow.ql-toolbar button:focus .ql-stroke-miter, - .ql-snow .ql-toolbar button:focus .ql-stroke-miter, - .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, - .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, - .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, - .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { - stroke: ${(props) => props.$token.colorPrimary}; - } - - & .ql-stroke { - stroke: ${(props) => props.$token.colorTextBase}; - } - & .ql-fill, - .ql-stroke.ql-fill { - fill: ${(props) => props.$token.colorTextBase}; - } + & .ql-snow.ql-toolbar button:hover .ql-fill, + .ql-snow .ql-toolbar button:hover .ql-fill, + .ql-snow.ql-toolbar button:focus .ql-fill, + .ql-snow .ql-toolbar button:focus .ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { + fill: ${(props) => props.$token.colorPrimary}; + } + & .ql-snow.ql-toolbar button:hover, + .ql-snow .ql-toolbar button:hover, + .ql-snow.ql-toolbar button:focus, + .ql-snow .ql-toolbar button:focus, + .ql-snow.ql-toolbar button.ql-active, + .ql-snow .ql-toolbar button.ql-active, + .ql-snow.ql-toolbar .ql-picker-label:hover, + .ql-snow .ql-toolbar .ql-picker-label:hover, + .ql-snow.ql-toolbar .ql-picker-label.ql-active, + .ql-snow .ql-toolbar .ql-picker-label.ql-active, + .ql-snow.ql-toolbar .ql-picker-item:hover, + .ql-snow .ql-toolbar .ql-picker-item:hover, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected { + color: ${(props) => props.$token.colorPrimary}; + } - & .ql-toolbar.ql-snow { - border: none; - border-bottom: 1px solid rgba(119, 145, 170, 0.2); - // Button - & button { - padding: 0; - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; + & .ql-snow.ql-toolbar button:hover .ql-stroke, + .ql-snow .ql-toolbar button:hover .ql-stroke, + .ql-snow.ql-toolbar button:focus .ql-stroke, + .ql-snow .ql-toolbar button:focus .ql-stroke, + .ql-snow.ql-toolbar button.ql-active .ql-stroke, + .ql-snow .ql-toolbar button.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow.ql-toolbar button:hover .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover .ql-stroke-miter, + .ql-snow.ql-toolbar button:focus .ql-stroke-miter, + .ql-snow .ql-toolbar button:focus .ql-stroke-miter, + .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { + stroke: ${(props) => props.$token.colorPrimary}; } - & button svg, - span svg { - width: 20px; - height: 20px; + + & .ql-stroke { + stroke: ${(props) => props.$token.colorTextBase}; } - & .ql-picker-label { - border-radius: 4px; - border-color: transparent !important; - background-color: ${(props) => props.$token.colorBgContainerDisabled}; - color: ${(props) => props.$token.colorTextBase}; + & .ql-fill, + .ql-stroke.ql-fill { + fill: ${(props) => props.$token.colorTextBase}; } - & .ql-picker-options { - margin-top: 4px; - border: none; - max-height: 200px; - overflow: auto; - border-radius: 8px; - color: ${(props) => props.$token.colorTextBase}; - background-color: ${(props) => props.$token.colorBgContainer}; + + & .ql-toolbar.ql-snow { + border: none; + border-bottom: 1px solid rgba(119, 145, 170, 0.2); + // Button + & button { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + } + & button svg, + span svg { + width: 20px; + height: 20px; + } + & .ql-picker-label { + border-radius: 4px; + border-color: transparent !important; + background-color: ${(props) => props.$token.colorBgContainerDisabled}; + color: ${(props) => props.$token.colorTextBase}; + } + & .ql-picker-options { + margin-top: 4px; + border: none; + max-height: 200px; + overflow: auto; + border-radius: 8px; + color: ${(props) => props.$token.colorTextBase}; + background-color: ${(props) => props.$token.colorBgContainer}; + } } - } `; export { StyledEditor, StyledToolbar }; diff --git a/src/components/editor/toolbar.tsx b/src/components/editor/toolbar.tsx index 64a7140..0f4f2f9 100644 --- a/src/components/editor/toolbar.tsx +++ b/src/components/editor/toolbar.tsx @@ -6,104 +6,104 @@ import { StyledToolbar } from './styles'; const HEADINGS = ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6']; export const formats = [ - 'align', - 'background', - 'blockquote', - 'bold', - 'bullet', - 'code', - 'code-block', - 'color', - 'direction', - 'font', - 'formula', - 'header', - 'image', - 'indent', - 'italic', - 'link', - 'list', - 'script', - 'size', - 'strike', - 'table', - 'underline', - 'video', + 'align', + 'background', + 'blockquote', + 'bold', + 'bullet', + 'code', + 'code-block', + 'color', + 'direction', + 'font', + 'formula', + 'header', + 'image', + 'indent', + 'italic', + 'link', + 'list', + 'script', + 'size', + 'strike', + 'table', + 'underline', + 'video', ]; type EditorToolbarProps = { - id: string; - isSimple?: boolean; + id: string; + isSimple?: boolean; }; export default function Toolbar({ id, isSimple, ...other }: EditorToolbarProps) { - const token = useThemeToken(); - const { themeMode } = useSettings(); - return ( - -
-
- -
+ const token = useThemeToken(); + const { themeMode } = useSettings(); + return ( + +
+
+ +
-
-
+
+
- {!isSimple && ( -
- -
- )} + {!isSimple && ( +
+ +
+ )} -
-
+
+
- {!isSimple && ( -
-
- )} + {!isSimple && ( +
+
+ )} - {!isSimple && ( -
-
- )} + {!isSimple && ( +
+
+ )} -
-
-
-
+
+
-
- {!isSimple &&
-
- - ); +
+ {!isSimple &&
+
+ + ); } diff --git a/src/components/icon/icon-button.tsx b/src/components/icon/icon-button.tsx index 8cb7a24..4fa3664 100644 --- a/src/components/icon/icon-button.tsx +++ b/src/components/icon/icon-button.tsx @@ -2,18 +2,18 @@ import { ButtonProps } from 'antd'; import { CSSProperties, ReactNode } from 'react'; type Props = { - children: ReactNode; - className?: string; - style?: CSSProperties; + children: ReactNode; + className?: string; + style?: CSSProperties; } & ButtonProps; export default function IconButton({ children, className, style, onClick }: Props) { - return ( - - ); + return ( + + ); } diff --git a/src/components/icon/iconify-icon.tsx b/src/components/icon/iconify-icon.tsx index e6bc075..7f9ecf1 100644 --- a/src/components/icon/iconify-icon.tsx +++ b/src/components/icon/iconify-icon.tsx @@ -4,20 +4,26 @@ import styled from 'styled-components'; import type { IconProps } from '@iconify/react'; interface Props extends IconProps { - size?: IconProps['width']; + size?: IconProps['width']; } export default function Iconify({ icon, size = '1em', className = '', ...other }: Props) { - return ( - - - - ); + return ( + + + + ); } const StyledIconify = styled.div` - display: inline-flex; - vertical-align: middle; - svg { - display: inline-block; - } + display: inline-flex; + vertical-align: middle; + svg { + display: inline-block; + } `; diff --git a/src/components/icon/svg-icon.tsx b/src/components/icon/svg-icon.tsx index 2b5cfbc..c2ead23 100644 --- a/src/components/icon/svg-icon.tsx +++ b/src/components/icon/svg-icon.tsx @@ -1,38 +1,38 @@ import { CSSProperties } from 'react'; interface SvgIconProps { - prefix?: string; - icon: string; - color?: string; - size?: string | number; - className?: string; - style?: CSSProperties; + prefix?: string; + icon: string; + color?: string; + size?: string | number; + className?: string; + style?: CSSProperties; } export default function SvgIcon({ - icon, - prefix = 'icon', - color = 'currentColor', - size = '1em', - className = '', - style = {}, + icon, + prefix = 'icon', + color = 'currentColor', + size = '1em', + className = '', + style = {}, }: SvgIconProps) { - const symbolId = `#${prefix}-${icon}`; - const svgStyle: CSSProperties = { - verticalAlign: 'middle', - width: size, - height: size, - color, - ...style, - }; - return ( - - - - ); + const symbolId = `#${prefix}-${icon}`; + const svgStyle: CSSProperties = { + verticalAlign: 'middle', + width: size, + height: size, + color, + ...style, + }; + return ( + + + + ); } diff --git a/src/components/loading/circle-loading.tsx b/src/components/loading/circle-loading.tsx index a1dd839..2b21947 100644 --- a/src/components/loading/circle-loading.tsx +++ b/src/components/loading/circle-loading.tsx @@ -1,9 +1,9 @@ import { Spin } from 'antd'; export function CircleLoading() { - return ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/src/components/loading/line-loading.tsx b/src/components/loading/line-loading.tsx index 9fb2310..6caf862 100644 --- a/src/components/loading/line-loading.tsx +++ b/src/components/loading/line-loading.tsx @@ -5,37 +5,37 @@ import { useEffect, useState } from 'react'; import { useThemeToken } from '@/theme/hooks'; export function LineLoading() { - const { colorTextBase, colorBgContainerDisabled } = useThemeToken(); - const [percent, setPercent] = useState(10); - const [increasing, setIncreasing] = useState(true); + const { colorTextBase, colorBgContainerDisabled } = useThemeToken(); + const [percent, setPercent] = useState(10); + const [increasing, setIncreasing] = useState(true); - useEffect(() => { - const interval = setInterval(() => { - if (increasing) { - setPercent((prevPercent) => prevPercent + 20); - if (percent === 100) { - setIncreasing(false); - } - } else { - setPercent(0); - setIncreasing(true); - } - }, 50); + useEffect(() => { + const interval = setInterval(() => { + if (increasing) { + setPercent((prevPercent) => prevPercent + 20); + if (percent === 100) { + setIncreasing(false); + } + } else { + setPercent(0); + setIncreasing(true); + } + }, 50); - return () => { - clearInterval(interval); - }; - }, [percent, increasing]); + return () => { + clearInterval(interval); + }; + }, [percent, increasing]); - return ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/src/components/locale-picker/index.tsx b/src/components/locale-picker/index.tsx index f126692..865a4e9 100644 --- a/src/components/locale-picker/index.tsx +++ b/src/components/locale-picker/index.tsx @@ -13,26 +13,26 @@ type Locale = keyof typeof LocalEnum; * Locale Picker */ export default function LocalePicker() { - const { setLocale, locale } = useLocale(); + const { setLocale, locale } = useLocale(); - const localeList: MenuProps['items'] = Object.values(LANGUAGE_MAP).map((item) => { - return { - key: item.locale, - label: item.label, - icon: , - }; - }); + const localeList: MenuProps['items'] = Object.values(LANGUAGE_MAP).map((item) => { + return { + key: item.locale, + label: item.label, + icon: , + }; + }); - return ( - setLocale(e.key as Locale) }} - > - - - - - ); + return ( + setLocale(e.key as Locale) }} + > + + + + + ); } diff --git a/src/components/logo/index.tsx b/src/components/logo/index.tsx index 5bdf9e6..2e44452 100644 --- a/src/components/logo/index.tsx +++ b/src/components/logo/index.tsx @@ -3,15 +3,15 @@ import { NavLink } from 'react-router-dom'; import { useThemeToken } from '@/theme/hooks'; function Logo({ className = '' }: { className?: string }) { - const { colorPrimary } = useThemeToken(); + const { colorPrimary } = useThemeToken(); - return ( - - - - ); + return ( + + + + ); } export default Logo; diff --git a/src/components/markdown/index.tsx b/src/components/markdown/index.tsx index 4065458..7cc6481 100644 --- a/src/components/markdown/index.tsx +++ b/src/components/markdown/index.tsx @@ -13,16 +13,16 @@ import StyledMarkdown from './styles'; type Props = ReactMarkdownOptions; export default function Markdown({ children }: Props) { - const token = useThemeToken(); - const { themeMode } = useSettings(); - return ( - - - {children} - - - ); + const token = useThemeToken(); + const { themeMode } = useSettings(); + return ( + + + {children} + + + ); } diff --git a/src/components/markdown/styles.ts b/src/components/markdown/styles.ts index 32e2505..8f720a3 100644 --- a/src/components/markdown/styles.ts +++ b/src/components/markdown/styles.ts @@ -9,158 +9,158 @@ import { ThemeMode } from '#/enum'; type KeyofToken = keyof GlobalToken; const getHeadingStyle = (level: 1 | 2 | 3 | 4 | 5, token: GlobalToken) => { - const fontSizeHeading: KeyofToken = `fontSizeHeading${level}`; - const lineHeightHeading: KeyofToken = `lineHeightHeading${level}`; + const fontSizeHeading: KeyofToken = `fontSizeHeading${level}`; + const lineHeightHeading: KeyofToken = `lineHeightHeading${level}`; - return { - margin: 0, - color: token.colorTextHeading, - fontWeight: 800, - fontSize: token[fontSizeHeading], - lineHeight: token[lineHeightHeading], - }; + return { + margin: 0, + color: token.colorTextHeading, + fontWeight: 800, + fontSize: token[fontSizeHeading], + lineHeight: token[lineHeightHeading], + }; }; const StyledMarkdown = styled.div<{ $token: GlobalToken; $thememode: ThemeMode }>` - display: grid; - // Text - h1 { - ${(props) => getHeadingStyle(1, props.$token)}; - } - h2 { - ${(props) => getHeadingStyle(2, props.$token)}; - } - h3 { - ${(props) => getHeadingStyle(3, props.$token)}; - } - h4 { - ${(props) => getHeadingStyle(4, props.$token)}; - } - h5 { - ${(props) => getHeadingStyle(5, props.$token)}; - } - a { - color: ${(props) => props.$token.colorPrimary}; - } - img { - border-radius: 4px; - } - br { display: grid; - content: ''; - margin-top: 0.75em; - } - - // Divider - hr { - margin: 0; - border-width: 1; - border-style: solid; - } - - // List - ul, - ol { - margin: 0; - li { - line-height: 2; - display: flex; - align-items: center; + // Text + h1 { + ${(props) => getHeadingStyle(1, props.$token)}; } - } - - // Blockquote - blockquote { - line-height: 1.5; - font-size: 1.5em; - margin: 40px auto; - position: relative; - padding: 24px 24px 24px 64px; - border-radius: 16px; - background-color: #f4f6f8; - color: #637381; - p, - span { - margin-bottom: 0; - font-size: inherit; - font-family: inherit; + h2 { + ${(props) => getHeadingStyle(2, props.$token)}; } - &::before { - left: 16px; - top: -8px; - display: block; - font-size: 3em; - position: absolute; - content: '“'; + h3 { + ${(props) => getHeadingStyle(3, props.$token)}; + } + h4 { + ${(props) => getHeadingStyle(4, props.$token)}; + } + h5 { + ${(props) => getHeadingStyle(5, props.$token)}; + } + a { + color: ${(props) => props.$token.colorPrimary}; + } + img { + border-radius: 4px; + } + br { + display: grid; + content: ''; + margin-top: 0.75em; } - } - - // Code Block - pre, - pre > code { - font-size: 16px; - overflow-x: auto; - white-space: pre; - border-radius: 8px; - } - code { - font-size: 14px; - border-radius: 4px; - white-space: pre; - padding: 0px; - background-color: ${(props) => - props.$thememode === ThemeMode.Light ? '#161c24' : '#919eab29'}; - } - // Table - table { - width: 100%; - border-collapse: collapse; - border: 1px solid #919eab33; - th, - td { - padding: 8px; - border: 1px solid #919eab33; + // Divider + hr { + margin: 0; + border-width: 1; + border-style: solid; } - tbody tr:nth-of-type(odd) { - background-color: ${(props) => - props.$thememode === ThemeMode.Light ? '#f4f6f8' : '#919eab1f '}; + + // List + ul, + ol { + margin: 0; + li { + line-height: 2; + display: flex; + align-items: center; + } } - } - // Checkbox - input { - margin-right: 10px; - &[type='checkbox'] { - position: relative; - cursor: pointer; - &::before { - content: ''; - top: -2px; - left: -2px; - width: 17px; - height: 17px; - border-radius: 3px; - position: absolute; + // Blockquote + blockquote { + line-height: 1.5; + font-size: 1.5em; + margin: 40px auto; + position: relative; + padding: 24px 24px 24px 64px; + border-radius: 16px; background-color: #f4f6f8; - } - &:checked { + color: #637381; + p, + span { + margin-bottom: 0; + font-size: inherit; + font-family: inherit; + } &::before { - background-color: ${(props) => props.$token.colorPrimary}; + left: 16px; + top: -8px; + display: block; + font-size: 3em; + position: absolute; + content: '“'; } - &::after { - content: ''; - top: 1px; - left: 5px; - width: 4px; - height: 9px; - position: absolute; - transform: rotate(45deg); - border: solid white; - border-width: 0 2px 2px 0; + } + + // Code Block + pre, + pre > code { + font-size: 16px; + overflow-x: auto; + white-space: pre; + border-radius: 8px; + } + code { + font-size: 14px; + border-radius: 4px; + white-space: pre; + padding: 0px; + background-color: ${(props) => + props.$thememode === ThemeMode.Light ? '#161c24' : '#919eab29'}; + } + + // Table + table { + width: 100%; + border-collapse: collapse; + border: 1px solid #919eab33; + th, + td { + padding: 8px; + border: 1px solid #919eab33; + } + tbody tr:nth-of-type(odd) { + background-color: ${(props) => + props.$thememode === ThemeMode.Light ? '#f4f6f8' : '#919eab1f '}; + } + } + + // Checkbox + input { + margin-right: 10px; + &[type='checkbox'] { + position: relative; + cursor: pointer; + &::before { + content: ''; + top: -2px; + left: -2px; + width: 17px; + height: 17px; + border-radius: 3px; + position: absolute; + background-color: #f4f6f8; + } + &:checked { + &::before { + background-color: ${(props) => props.$token.colorPrimary}; + } + &::after { + content: ''; + top: 1px; + left: 5px; + width: 4px; + height: 9px; + position: absolute; + transform: rotate(45deg); + border: solid white; + border-width: 0 2px 2px 0; + } + } } - } } - } `; export default StyledMarkdown; diff --git a/src/components/progress-bar/index.tsx b/src/components/progress-bar/index.tsx index bb52e0c..4fbd702 100644 --- a/src/components/progress-bar/index.tsx +++ b/src/components/progress-bar/index.tsx @@ -6,53 +6,53 @@ import { usePathname } from '@/router/hooks'; import { useThemeToken } from '@/theme/hooks'; export default function ProgressBar() { - const pathname = usePathname(); - const { colorPrimary } = useThemeToken(); - - const [mounted, setMounted] = useState(false); - const [visible, setVisible] = useState(false); - - useEffect(() => { - setMounted(true); - }, []); - - useEffect(() => { - if (!visible) { - NProgress.configure({ - showSpinner: false, - }); - NProgress.start(); - changeNprogressBar(); - setVisible(true); - } - - if (visible) { - NProgress.done(); - setVisible(false); - } - - if (!visible && mounted) { - setVisible(false); - NProgress.done(); - } - - return () => { - NProgress.done(); + const pathname = usePathname(); + const { colorPrimary } = useThemeToken(); + + const [mounted, setMounted] = useState(false); + const [visible, setVisible] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + useEffect(() => { + if (!visible) { + NProgress.configure({ + showSpinner: false, + }); + NProgress.start(); + changeNprogressBar(); + setVisible(true); + } + + if (visible) { + NProgress.done(); + setVisible(false); + } + + if (!visible && mounted) { + setVisible(false); + NProgress.done(); + } + + return () => { + NProgress.done(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [pathname, mounted]); + + const changeNprogressBar = () => { + const nprogress = document.getElementById('nprogress'); + if (nprogress) { + const bar: HTMLElement = nprogress.querySelector('.bar')!; + const peg: HTMLElement = nprogress.querySelector('.peg')!; + + bar.style.background = colorPrimary; + bar.style.boxShadow = `0 0 2px ${colorPrimary}`; + + peg.style.boxShadow = `0 0 10px ${colorPrimary}, 0 0 5px ${colorPrimary}`; + } }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [pathname, mounted]); - - const changeNprogressBar = () => { - const nprogress = document.getElementById('nprogress'); - if (nprogress) { - const bar: HTMLElement = nprogress.querySelector('.bar')!; - const peg: HTMLElement = nprogress.querySelector('.peg')!; - - bar.style.background = colorPrimary; - bar.style.boxShadow = `0 0 2px ${colorPrimary}`; - - peg.style.boxShadow = `0 0 10px ${colorPrimary}, 0 0 5px ${colorPrimary}`; - } - }; - return null; + return null; } diff --git a/src/components/scroll-progress/index.tsx b/src/components/scroll-progress/index.tsx index 05f635d..55ed37d 100644 --- a/src/components/scroll-progress/index.tsx +++ b/src/components/scroll-progress/index.tsx @@ -4,28 +4,28 @@ import { CSSProperties } from 'react'; import { useThemeToken } from '@/theme/hooks'; interface Props extends HTMLMotionProps<'div'> { - color?: string; - scrollYProgress: MotionValue; - height?: number; + color?: string; + scrollYProgress: MotionValue; + height?: number; } /** * https://www.framer.com/motion/scroll-animations/##spring-smoothing */ export default function ScrollProgress({ scrollYProgress, height = 4, color, ...other }: Props) { - const scaleX = useSpring(scrollYProgress, { - stiffness: 100, - damping: 30, - restDelta: 0.001, - }); + const scaleX = useSpring(scrollYProgress, { + stiffness: 100, + damping: 30, + restDelta: 0.001, + }); - const { colorPrimary } = useThemeToken(); - const backgroundColor = color || colorPrimary; + const { colorPrimary } = useThemeToken(); + const backgroundColor = color || colorPrimary; - const style: CSSProperties = { - transformOrigin: '0%', - height, - backgroundColor, - }; + const style: CSSProperties = { + transformOrigin: '0%', + height, + backgroundColor, + }; - return ; + return ; } diff --git a/src/components/scrollbar/index.tsx b/src/components/scrollbar/index.tsx index 985f070..3199fe6 100644 --- a/src/components/scrollbar/index.tsx +++ b/src/components/scrollbar/index.tsx @@ -4,11 +4,11 @@ import SimpleBar, { type Props as SimplebarProps } from 'simplebar-react'; * https://www.npmjs.com/package/simplebar-react?activeTab=readme */ const Scrollbar = forwardRef(({ children, ...other }, ref) => { - return ( - - {children} - - ); + return ( + + {children} + + ); }); export default memo(Scrollbar); diff --git a/src/components/upload/styles.ts b/src/components/upload/styles.ts index 3e17fe9..cf2d93e 100644 --- a/src/components/upload/styles.ts +++ b/src/components/upload/styles.ts @@ -1,28 +1,28 @@ import styled from 'styled-components'; export const StyledUpload = styled.div<{ $thumbnail?: boolean }>` - .ant-upload { - border: none !important; - } - .ant-upload-list { - display: ${(props) => (props.$thumbnail ? 'flex' : 'block')}; - flex-wrap: wrap; - } + .ant-upload { + border: none !important; + } + .ant-upload-list { + display: ${(props) => (props.$thumbnail ? 'flex' : 'block')}; + flex-wrap: wrap; + } `; export const StyledUploadAvatar = styled.div` - transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - .ant-upload, - .ant-upload-select { - border: none !important; - } + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + .ant-upload, + .ant-upload-select { + border: none !important; + } `; export const StyledUploadBox = styled.div` - .ant-upload { - border: none !important; - } - .ant-upload-list { - display: none; - } + .ant-upload { + border: none !important; + } + .ant-upload-list { + display: none; + } `; diff --git a/src/components/upload/upload-avatar.tsx b/src/components/upload/upload-avatar.tsx index af2acdc..6712f8a 100644 --- a/src/components/upload/upload-avatar.tsx +++ b/src/components/upload/upload-avatar.tsx @@ -10,75 +10,75 @@ import { StyledUploadAvatar } from './styles'; import { beforeAvatarUpload, getBlobUrl } from './utils'; interface Props extends UploadProps { - defaultAvatar?: string; - helperText?: React.ReactElement | string; + defaultAvatar?: string; + helperText?: React.ReactElement | string; } export function UploadAvatar({ helperText, defaultAvatar = '', ...other }: Props) { - const [imageUrl, setImageUrl] = useState(defaultAvatar); + const [imageUrl, setImageUrl] = useState(defaultAvatar); - const [isHover, setIsHover] = useState(false); - const handelHover = (hover: boolean) => { - setIsHover(hover); - }; + const [isHover, setIsHover] = useState(false); + const handelHover = (hover: boolean) => { + setIsHover(hover); + }; - const handleChange: UploadProps['onChange'] = (info: UploadChangeParam) => { - if (info.file.status === 'uploading') { - return; - } - if (['done', 'error'].includes(info.file.status!)) { - // TODO: Get this url from response in real world. - setImageUrl(getBlobUrl(info.file.originFileObj!)); - } - }; + const handleChange: UploadProps['onChange'] = (info: UploadChangeParam) => { + if (info.file.status === 'uploading') { + return; + } + if (['done', 'error'].includes(info.file.status!)) { + // TODO: Get this url from response in real world. + setImageUrl(getBlobUrl(info.file.originFileObj!)); + } + }; - const renderPreview = ; + const renderPreview = ; - const renderPlaceholder = ( -
- -
Upload Photo
-
- ); + const renderPlaceholder = ( +
+ +
Upload Photo
+
+ ); - const renderContent = ( -
handelHover(true)} - onMouseLeave={() => handelHover(false)} - > - {imageUrl ? renderPreview : null} - {!imageUrl || isHover ? renderPlaceholder : null} -
- ); + const renderContent = ( +
handelHover(true)} + onMouseLeave={() => handelHover(false)} + > + {imageUrl ? renderPreview : null} + {!imageUrl || isHover ? renderPlaceholder : null} +
+ ); - const defaultHelperText = ( - - Allowed *.jpeg, *.jpg, *.png, *.gif -
max size of {fBytes(3145728)} - - ); - const renderHelpText =
{helperText || defaultHelperText}
; + const defaultHelperText = ( + + Allowed *.jpeg, *.jpg, *.png, *.gif +
max size of {fBytes(3145728)} + + ); + const renderHelpText =
{helperText || defaultHelperText}
; - return ( - - - {renderContent} - - {renderHelpText} - - ); + return ( + + + {renderContent} + + {renderHelpText} + + ); } diff --git a/src/components/upload/upload-box.tsx b/src/components/upload/upload-box.tsx index 10d54ca..ce97b8a 100644 --- a/src/components/upload/upload-box.tsx +++ b/src/components/upload/upload-box.tsx @@ -7,20 +7,20 @@ import { Iconify } from '../icon'; import { StyledUploadBox } from './styles'; interface Props extends UploadProps { - placeholder?: ReactElement; + placeholder?: ReactElement; } export function UploadBox({ placeholder, ...other }: Props) { - return ( - - -
- {placeholder || ( -
- -
- )} -
- - - ); + return ( + + +
+ {placeholder || ( +
+ +
+ )} +
+ + + ); } diff --git a/src/components/upload/upload-illustration.tsx b/src/components/upload/upload-illustration.tsx index 7204773..9766767 100644 --- a/src/components/upload/upload-illustration.tsx +++ b/src/components/upload/upload-illustration.tsx @@ -1,529 +1,529 @@ import { useThemeToken } from '@/theme/hooks'; export default function UploadIllustration() { - const { - colorPrimary: PRIMARY_MAIN, - colorPrimaryActive: PRIMARY_DARK, - colorPrimaryTextActive: PRIMARY_DARKER, - } = useThemeToken(); - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + const { + colorPrimary: PRIMARY_MAIN, + colorPrimaryActive: PRIMARY_DARK, + colorPrimaryTextActive: PRIMARY_DARKER, + } = useThemeToken(); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/upload/upload-list-item.tsx b/src/components/upload/upload-list-item.tsx index 7c59322..28a9f87 100644 --- a/src/components/upload/upload-list-item.tsx +++ b/src/components/upload/upload-list-item.tsx @@ -10,70 +10,70 @@ import { fBytes } from '@/utils/format-number'; import { getBlobUrl, getFileFormat, getFileThumb } from './utils'; type Props = { - file: Parameters['1']; - actions: Parameters['3']; - thumbnail?: boolean; + file: Parameters['1']; + actions: Parameters['3']; + thumbnail?: boolean; }; export default function UploadListItem({ file, actions, thumbnail = false }: Props) { - const { name, size } = file; - const thumb = getFileThumb(name); - const format = getFileFormat(name); - const [imgThumbUrl, setImgThumbUrl] = useState(''); + const { name, size } = file; + const thumb = getFileThumb(name); + const format = getFileFormat(name); + const [imgThumbUrl, setImgThumbUrl] = useState(''); - useEffect(() => { - // TODO: mock upload sucess, you should delete 'error' in the production environment - if (['done', 'error'].includes(file.status!) && format === 'img') { - setImgThumbUrl(getBlobUrl(file.originFileObj!)); - } - }, [file, format]); + useEffect(() => { + // TODO: mock upload sucess, you should delete 'error' in the production environment + if (['done', 'error'].includes(file.status!) && format === 'img') { + setImgThumbUrl(getBlobUrl(file.originFileObj!)); + } + }, [file, format]); - const closeButton = ( - - ); + const closeButton = ( + + ); - const thumbList = ( - - - {format === 'img' ? ( - - ) : ( - - )} - -
{closeButton}
- - ); - const cardList = ( - - {format === 'img' ? ( - - ) : ( - - )} -
- {name} - - {fBytes(size)} - -
- {closeButton} - - ); - return ( - - {thumbnail ? thumbList : cardList} - - ); + const thumbList = ( + + + {format === 'img' ? ( + + ) : ( + + )} + +
{closeButton}
+ + ); + const cardList = ( + + {format === 'img' ? ( + + ) : ( + + )} +
+ {name} + + {fBytes(size)} + +
+ {closeButton} + + ); + return ( + + {thumbnail ? thumbList : cardList} + + ); } diff --git a/src/components/upload/upload.tsx b/src/components/upload/upload.tsx index 86a1ec3..76c770e 100644 --- a/src/components/upload/upload.tsx +++ b/src/components/upload/upload.tsx @@ -13,39 +13,39 @@ const { Dragger } = AntdUpload; const { Text, Title } = Typography; interface Props extends UploadProps { - thumbnail?: boolean; + thumbnail?: boolean; } const itemRender: (thumbnail: boolean) => ItemRender = (thumbnail) => { - return function temp() { - // eslint-disable-next-line prefer-rest-params - const [, file, , actions] = arguments; - return ; - }; + return function temp() { + // eslint-disable-next-line prefer-rest-params + const [, file, , actions] = arguments; + return ; + }; }; export function Upload({ thumbnail = false, ...other }: Props) { - const { colorPrimary } = useThemeToken(); - return ( - - -
-

- -

- - - Drop or Select file - - - Drop files here or click - - browse - - thorough your machine - - -
- - - ); + const { colorPrimary } = useThemeToken(); + return ( + + +
+

+ +

+ + + Drop or Select file + + + Drop files here or click + + browse + + thorough your machine + + +
+ + + ); } diff --git a/src/components/upload/utils.ts b/src/components/upload/utils.ts index b917cd2..e90bc33 100644 --- a/src/components/upload/utils.ts +++ b/src/components/upload/utils.ts @@ -19,45 +19,45 @@ const FORMAT_VIDEO = ['m4v', 'avi', 'mpg', 'mp4', 'webm']; * @param fileName */ export function getFileFormat(fileName: string | undefined) { - let format; - switch (true) { - case FORMAT_PDF.includes(fileTypeByName(fileName)): - format = 'pdf'; - break; - case FORMAT_TEXT.includes(fileTypeByName(fileName)): - format = 'txt'; - break; - case FORMAT_PHOTOSHOP.includes(fileTypeByName(fileName)): - format = 'psd'; - break; - case FORMAT_WORD.includes(fileTypeByName(fileName)): - format = 'word'; - break; - case FORMAT_EXCEL.includes(fileTypeByName(fileName)): - format = 'excel'; - break; - case FORMAT_ZIP.includes(fileTypeByName(fileName)): - format = 'zip'; - break; - case FORMAT_ILLUSTRATOR.includes(fileTypeByName(fileName)): - format = 'ai'; - break; - case FORMAT_POWERPOINT.includes(fileTypeByName(fileName)): - format = 'ppt'; - break; - case FORMAT_AUDIO.includes(fileTypeByName(fileName)): - format = 'audio'; - break; - case FORMAT_IMG.includes(fileTypeByName(fileName)): - format = 'img'; - break; - case FORMAT_VIDEO.includes(fileTypeByName(fileName)): - format = 'video'; - break; - default: - format = fileTypeByName(fileName); - } - return format; + let format; + switch (true) { + case FORMAT_PDF.includes(fileTypeByName(fileName)): + format = 'pdf'; + break; + case FORMAT_TEXT.includes(fileTypeByName(fileName)): + format = 'txt'; + break; + case FORMAT_PHOTOSHOP.includes(fileTypeByName(fileName)): + format = 'psd'; + break; + case FORMAT_WORD.includes(fileTypeByName(fileName)): + format = 'word'; + break; + case FORMAT_EXCEL.includes(fileTypeByName(fileName)): + format = 'excel'; + break; + case FORMAT_ZIP.includes(fileTypeByName(fileName)): + format = 'zip'; + break; + case FORMAT_ILLUSTRATOR.includes(fileTypeByName(fileName)): + format = 'ai'; + break; + case FORMAT_POWERPOINT.includes(fileTypeByName(fileName)): + format = 'ppt'; + break; + case FORMAT_AUDIO.includes(fileTypeByName(fileName)): + format = 'audio'; + break; + case FORMAT_IMG.includes(fileTypeByName(fileName)): + format = 'img'; + break; + case FORMAT_VIDEO.includes(fileTypeByName(fileName)): + format = 'video'; + break; + default: + format = fileTypeByName(fileName); + } + return format; } /** @@ -65,75 +65,75 @@ export function getFileFormat(fileName: string | undefined) { * @param fileName */ export function getFileThumb(fileName: string | undefined) { - let thumb; - const format = getFileFormat(fileName); - switch (format) { - case 'txt': - thumb = 'ic_file_txt'; - break; - case 'zip': - thumb = 'ic_file_zip'; - break; - case 'audio': - thumb = 'ic_file_audio'; - break; - case 'video': - thumb = 'ic_file_video'; - break; - case 'word': - thumb = 'ic_file_word'; - break; - case 'excel': - thumb = 'ic_file_excel'; - break; - case 'ppt': - thumb = 'ic_file_ppt'; - break; - case 'pdf': - thumb = 'ic_file_pdf'; - break; - case 'psd': - thumb = 'ic_file_psd'; - break; - case 'ai': - thumb = 'ic_file_ai'; - break; - case 'img': - thumb = 'ic_file_img'; - break; - case 'folder': - thumb = 'ic_folder'; - break; - default: - thumb = 'ic_file'; - } - return thumb; + let thumb; + const format = getFileFormat(fileName); + switch (format) { + case 'txt': + thumb = 'ic_file_txt'; + break; + case 'zip': + thumb = 'ic_file_zip'; + break; + case 'audio': + thumb = 'ic_file_audio'; + break; + case 'video': + thumb = 'ic_file_video'; + break; + case 'word': + thumb = 'ic_file_word'; + break; + case 'excel': + thumb = 'ic_file_excel'; + break; + case 'ppt': + thumb = 'ic_file_ppt'; + break; + case 'pdf': + thumb = 'ic_file_pdf'; + break; + case 'psd': + thumb = 'ic_file_psd'; + break; + case 'ai': + thumb = 'ic_file_ai'; + break; + case 'img': + thumb = 'ic_file_img'; + break; + case 'folder': + thumb = 'ic_folder'; + break; + default: + thumb = 'ic_file'; + } + return thumb; } export function fileTypeByName(fileName = '') { - return (fileName && fileName.split('.').pop()) || 'folder'; + return (fileName && fileName.split('.').pop()) || 'folder'; } export function beforeAvatarUpload(file: RcFile) { - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; - if (!isJpgOrPng) { - message.error('You can only upload JPG/PNG file!'); - } - const isLt2M = file.size / 1024 / 1024 < 2; - if (!isLt2M) { - message.error('Image must smaller than 2MB!'); - } - return isJpgOrPng && isLt2M; + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; + if (!isJpgOrPng) { + message.error('You can only upload JPG/PNG file!'); + } + const isLt2M = file.size / 1024 / 1024 < 2; + if (!isLt2M) { + message.error('Image must smaller than 2MB!'); + } + return isJpgOrPng && isLt2M; } export function getBase64(img: RcFile, callback: (url: string) => void) { - const reader = new FileReader(); - reader.addEventListener('load', () => callback(reader.result as string)); - reader.readAsDataURL(img); + const reader = new FileReader(); + reader.addEventListener('load', () => callback(reader.result as string)); + reader.readAsDataURL(img); } export function getBlobUrl(imgFile: RcFile) { - const fileBlob = new Blob([imgFile]); - const thumbnailUrl = URL.createObjectURL(fileBlob); - return thumbnailUrl; + const fileBlob = new Blob([imgFile]); + const thumbnailUrl = URL.createObjectURL(fileBlob); + return thumbnailUrl; } diff --git a/src/hooks/event/use-copy-to-clipboard.ts b/src/hooks/event/use-copy-to-clipboard.ts index 648052c..03faca5 100644 --- a/src/hooks/event/use-copy-to-clipboard.ts +++ b/src/hooks/event/use-copy-to-clipboard.ts @@ -8,34 +8,34 @@ type CopiedValue = string | null; type CopyFn = (text: string) => Promise; type ReturnType = { - copyFn: CopyFn; - copiedText: CopiedValue; + copyFn: CopyFn; + copiedText: CopiedValue; }; export function useCopyToClipboard(): ReturnType { - const [copiedText, setCopiedText] = useState(null); - const { notification } = App.useApp(); - - const copyFn: CopyFn = async (text) => { - if (!navigator?.clipboard) { - console.warn('Clipboard not supported'); - return false; - } - - // Try to save to clipboard then save it in the state if worked - try { - await navigator.clipboard.writeText(text); - setCopiedText(text); - notification.success({ - message: 'Copied!', - }); - return true; - } catch (error) { - console.warn('Copy failed', error); - setCopiedText(null); - return false; - } - }; - - return { copiedText, copyFn }; + const [copiedText, setCopiedText] = useState(null); + const { notification } = App.useApp(); + + const copyFn: CopyFn = async (text) => { + if (!navigator?.clipboard) { + console.warn('Clipboard not supported'); + return false; + } + + // Try to save to clipboard then save it in the state if worked + try { + await navigator.clipboard.writeText(text); + setCopiedText(text); + notification.success({ + message: 'Copied!', + }); + return true; + } catch (error) { + console.warn('Copy failed', error); + setCopiedText(null); + return false; + } + }; + + return { copiedText, copyFn }; } diff --git a/src/hooks/web/use-keepalive.ts b/src/hooks/web/use-keepalive.ts index 481a811..2e1ebb5 100644 --- a/src/hooks/web/use-keepalive.ts +++ b/src/hooks/web/use-keepalive.ts @@ -5,131 +5,131 @@ import { useMatchRouteMeta, useRouter } from '@/router/hooks'; import { RouteMeta } from '#/router'; export type KeepAliveTab = RouteMeta & { - children: any; + children: any; }; export default function useKeepAlive() { - const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; - const { push } = useRouter(); - // tabs - const [tabs, setTabs] = useState([]); - - // active tab - const [activeTabRoutePath, setActiveTabRoutePath] = useState(); - - // current route meta - const currentRouteMeta = useMatchRouteMeta(); - - /** - * Close specified tab - */ - const closeTab = useCallback( - (path = activeTabRoutePath) => { - if (tabs.length === 1) return; - const deleteTabIndex = tabs.findIndex((item) => item.key === path); - if (deleteTabIndex > 0) { - push(tabs[deleteTabIndex - 1].key); - } else { - push(tabs[deleteTabIndex + 1].key); - } - - tabs.splice(deleteTabIndex, 1); - setTabs([...tabs]); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [activeTabRoutePath], - ); - - /** - * Close other tabs besides the specified tab - */ - const closeOthersTab = useCallback( - (path = activeTabRoutePath) => { - setTabs((prev) => prev.filter((item) => item.key === path)); - }, - [activeTabRoutePath], - ); - - /** - * Close all tabs then navigate to the home page - */ - const closeAll = useCallback(() => { - // setTabs([tabHomePage]); - setTabs([]); - push(HOMEPAGE); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [push]); - - /** - * Close all tabs in the left of specified tab - */ - const closeLeft = useCallback( - (path: string) => { - const currentTabIndex = tabs.findIndex((item) => item.key === path); - const newTabs = tabs.slice(currentTabIndex); - setTabs(newTabs); - push(path); - }, - [push, tabs], - ); - - /** - * Close all tabs in the right of specified tab - */ - const closeRight = useCallback( - (path: string) => { - const currentTabIndex = tabs.findIndex((item) => item.key === path); - const newTabs = tabs.slice(0, currentTabIndex + 1); - setTabs(newTabs); - push(path); - }, - [push, tabs], - ); - - /** - * Refresh specified tab - */ - const refreshTab = useCallback( - (path = activeTabRoutePath) => { - setTabs((prev) => { - const index = prev.findIndex((item) => item.key === path); - - if (index >= 0) { - prev[index].timeStamp = getKey(); + const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; + const { push } = useRouter(); + // tabs + const [tabs, setTabs] = useState([]); + + // active tab + const [activeTabRoutePath, setActiveTabRoutePath] = useState(); + + // current route meta + const currentRouteMeta = useMatchRouteMeta(); + + /** + * Close specified tab + */ + const closeTab = useCallback( + (path = activeTabRoutePath) => { + if (tabs.length === 1) return; + const deleteTabIndex = tabs.findIndex((item) => item.key === path); + if (deleteTabIndex > 0) { + push(tabs[deleteTabIndex - 1].key); + } else { + push(tabs[deleteTabIndex + 1].key); + } + + tabs.splice(deleteTabIndex, 1); + setTabs([...tabs]); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [activeTabRoutePath], + ); + + /** + * Close other tabs besides the specified tab + */ + const closeOthersTab = useCallback( + (path = activeTabRoutePath) => { + setTabs((prev) => prev.filter((item) => item.key === path)); + }, + [activeTabRoutePath], + ); + + /** + * Close all tabs then navigate to the home page + */ + const closeAll = useCallback(() => { + // setTabs([tabHomePage]); + setTabs([]); + push(HOMEPAGE); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [push]); + + /** + * Close all tabs in the left of specified tab + */ + const closeLeft = useCallback( + (path: string) => { + const currentTabIndex = tabs.findIndex((item) => item.key === path); + const newTabs = tabs.slice(currentTabIndex); + setTabs(newTabs); + push(path); + }, + [push, tabs], + ); + + /** + * Close all tabs in the right of specified tab + */ + const closeRight = useCallback( + (path: string) => { + const currentTabIndex = tabs.findIndex((item) => item.key === path); + const newTabs = tabs.slice(0, currentTabIndex + 1); + setTabs(newTabs); + push(path); + }, + [push, tabs], + ); + + /** + * Refresh specified tab + */ + const refreshTab = useCallback( + (path = activeTabRoutePath) => { + setTabs((prev) => { + const index = prev.findIndex((item) => item.key === path); + + if (index >= 0) { + prev[index].timeStamp = getKey(); + } + + return [...prev]; + }); + }, + [activeTabRoutePath], + ); + + useEffect(() => { + if (!currentRouteMeta) return; + const existed = tabs.find((item) => item.key === currentRouteMeta.key); + if (!existed) { + setTabs((prev) => [ + ...prev, + { ...currentRouteMeta, children: currentRouteMeta.outlet, timeStamp: getKey() }, + ]); } - return [...prev]; - }); - }, - [activeTabRoutePath], - ); - - useEffect(() => { - if (!currentRouteMeta) return; - const existed = tabs.find((item) => item.key === currentRouteMeta.key); - if (!existed) { - setTabs((prev) => [ - ...prev, - { ...currentRouteMeta, children: currentRouteMeta.outlet, timeStamp: getKey() }, - ]); - } - - setActiveTabRoutePath(currentRouteMeta.key); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentRouteMeta]); - - return { - tabs, - activeTabRoutePath, - setTabs, - closeTab, - closeOthersTab, - refreshTab, - closeAll, - closeLeft, - closeRight, - }; + setActiveTabRoutePath(currentRouteMeta.key); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentRouteMeta]); + + return { + tabs, + activeTabRoutePath, + setTabs, + closeTab, + closeOthersTab, + refreshTab, + closeAll, + closeLeft, + closeRight, + }; } function getKey() { - return new Date().getTime().toString(); + return new Date().getTime().toString(); } diff --git a/src/http/axios/service.ts b/src/http/axios/service.ts index 7bcbb39..95ace54 100644 --- a/src/http/axios/service.ts +++ b/src/http/axios/service.ts @@ -1,7 +1,7 @@ import axios from 'axios'; -import { globalError } from '@/utils/antd-extract'; import { useUserToken } from '@/store/userStore'; +import { globalError } from '@/utils/antd-extract'; // 刷新token的API调用 // const refreshTokenApi = async () => { diff --git a/src/layouts/_common/account-dropdown.tsx b/src/layouts/_common/account-dropdown.tsx index c0fd086..5a3c5b2 100644 --- a/src/layouts/_common/account-dropdown.tsx +++ b/src/layouts/_common/account-dropdown.tsx @@ -16,69 +16,69 @@ const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; * Account Dropdown */ export default function AccountDropdown() { - const { replace } = useRouter(); - const { account, email, avatar } = useUserInfo(); - const { clearUserInfoAndToken } = useUserActions(); - const { backToLogin } = useLoginStateContext(); - const { t } = useTranslation(); - const logout = () => { - try { - // todo const logoutMutation = useMutation(userService.logout); - // todo logoutMutation.mutateAsync(); - clearUserInfoAndToken(); - backToLogin(); - } catch (error) { - console.log(error); - } finally { - replace('/login'); - } - }; - const { colorBgElevated, borderRadiusLG, boxShadowSecondary } = useThemeToken(); + const { replace } = useRouter(); + const { account, email, avatar } = useUserInfo(); + const { clearUserInfoAndToken } = useUserActions(); + const { backToLogin } = useLoginStateContext(); + const { t } = useTranslation(); + const logout = () => { + try { + // todo const logoutMutation = useMutation(userService.logout); + // todo logoutMutation.mutateAsync(); + clearUserInfoAndToken(); + backToLogin(); + } catch (error) { + console.log(error); + } finally { + replace('/login'); + } + }; + const { colorBgElevated, borderRadiusLG, boxShadowSecondary } = useThemeToken(); - const contentStyle: React.CSSProperties = { - backgroundColor: colorBgElevated, - borderRadius: borderRadiusLG, - boxShadow: boxShadowSecondary, - }; + const contentStyle: React.CSSProperties = { + backgroundColor: colorBgElevated, + borderRadius: borderRadiusLG, + boxShadow: boxShadowSecondary, + }; - const menuStyle: React.CSSProperties = { - boxShadow: 'none', - }; + const menuStyle: React.CSSProperties = { + boxShadow: 'none', + }; - const dropdownRender: DropdownProps['dropdownRender'] = (menu) => ( -
-
-
{account}
-
{email}
-
- - {React.cloneElement(menu as React.ReactElement, { style: menuStyle })} -
- ); + const dropdownRender: DropdownProps['dropdownRender'] = (menu) => ( +
+
+
{account}
+
{email}
+
+ + {React.cloneElement(menu as React.ReactElement, { style: menuStyle })} +
+ ); - const items: MenuProps['items'] = [ - { label: {t('sys.menu.dashboard')}, key: '0' }, - { - label: {t('sys.menu.user.profile')}, - key: '1', - }, - { - label: {t('sys.menu.user.account')}, - key: '2', - }, - { type: 'divider' }, - { - label: , - key: '3', - onClick: logout, - }, - ]; + const items: MenuProps['items'] = [ + { label: {t('sys.menu.dashboard')}, key: '0' }, + { + label: {t('sys.menu.user.profile')}, + key: '1', + }, + { + label: {t('sys.menu.user.account')}, + key: '2', + }, + { type: 'divider' }, + { + label: , + key: '3', + onClick: logout, + }, + ]; - return ( - - - - - - ); + return ( + + + + + + ); } diff --git a/src/layouts/_common/bread-crumb.tsx b/src/layouts/_common/bread-crumb.tsx index c0d8ab5..4c6f207 100644 --- a/src/layouts/_common/bread-crumb.tsx +++ b/src/layouts/_common/bread-crumb.tsx @@ -13,41 +13,41 @@ import { AppRouteObject } from '#/router'; * 动态面包屑解决方案：https://github.com/MinjieChang/myblog/issues/29 */ export default function BreadCrumb() { - const { t } = useTranslation(); - const matches = useMatches(); - const [breadCrumbs, setBreadCrumbs] = useState([]); - - const flattenedRoutes = useFlattenedRoutes(); - const permissionRoutes = usePermissionRoutes(); - - useEffect(() => { - const menuRoutes = menuFilter(permissionRoutes); - const paths = matches.filter((item) => item.pathname !== '/').map((item) => item.pathname); - - const pathRouteMetas = flattenedRoutes.filter((item) => paths.indexOf(item.key) !== -1); - - let items: AppRouteObject[] | undefined = [...menuRoutes]; - const breadCrumbs = pathRouteMetas.map((routeMeta) => { - const { key, label } = routeMeta; - items = items! - .find((item) => item.meta?.key === key) - ?.children?.filter((item) => !item.meta?.hideMenu); - const result: ItemType = { - key, - title: t(label), - }; - if (items) { - result.menu = { - items: items.map((item) => ({ - key: item.meta?.key, - label: {t(item.meta!.label)}, - })), - }; - } - return result; - }); - setBreadCrumbs(breadCrumbs); - }, [matches, flattenedRoutes, t, permissionRoutes]); - - return ; + const { t } = useTranslation(); + const matches = useMatches(); + const [breadCrumbs, setBreadCrumbs] = useState([]); + + const flattenedRoutes = useFlattenedRoutes(); + const permissionRoutes = usePermissionRoutes(); + + useEffect(() => { + const menuRoutes = menuFilter(permissionRoutes); + const paths = matches.filter((item) => item.pathname !== '/').map((item) => item.pathname); + + const pathRouteMetas = flattenedRoutes.filter((item) => paths.indexOf(item.key) !== -1); + + let items: AppRouteObject[] | undefined = [...menuRoutes]; + const breadCrumbs = pathRouteMetas.map((routeMeta) => { + const { key, label } = routeMeta; + items = items! + .find((item) => item.meta?.key === key) + ?.children?.filter((item) => !item.meta?.hideMenu); + const result: ItemType = { + key, + title: t(label), + }; + if (items) { + result.menu = { + items: items.map((item) => ({ + key: item.meta?.key, + label: {t(item.meta!.label)}, + })), + }; + } + return result; + }); + setBreadCrumbs(breadCrumbs); + }, [matches, flattenedRoutes, t, permissionRoutes]); + + return ; } diff --git a/src/layouts/_common/header-simple.tsx b/src/layouts/_common/header-simple.tsx index 512cbfd..9004544 100644 --- a/src/layouts/_common/header-simple.tsx +++ b/src/layouts/_common/header-simple.tsx @@ -3,10 +3,10 @@ import Logo from '@/components/logo'; import SettingButton from './setting-button'; export default function HeaderSimple() { - return ( -
- - -
- ); + return ( +
+ + +
+ ); } diff --git a/src/layouts/_common/notice.tsx b/src/layouts/_common/notice.tsx index fdc646d..b1b15c8 100644 --- a/src/layouts/_common/notice.tsx +++ b/src/layouts/_common/notice.tsx @@ -10,260 +10,264 @@ import ProTag from '@/theme/antd/components/tag'; import { useThemeToken } from '@/theme/hooks'; export default function NoticeButton() { - const [drawerOpen, setDrawerOpen] = useState(false); - const themeToken = useThemeToken(); - const [count, setCount] = useState(4); + const [drawerOpen, setDrawerOpen] = useState(false); + const themeToken = useThemeToken(); + const [count, setCount] = useState(4); - const style: CSSProperties = { - backdropFilter: 'blur(20px)', - backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`, - backgroundRepeat: 'no-repeat, no-repeat', - backgroundColor: Color(themeToken.colorBgContainer).alpha(0.9).toString(), - backgroundPosition: 'right top, left bottom', - backgroundSize: '50, 50%', - }; - const bodyStyle: CSSProperties = { - padding: 0, - }; + const style: CSSProperties = { + backdropFilter: 'blur(20px)', + backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`, + backgroundRepeat: 'no-repeat, no-repeat', + backgroundColor: Color(themeToken.colorBgContainer).alpha(0.9).toString(), + backgroundPosition: 'right top, left bottom', + backgroundSize: '50, 50%', + }; + const bodyStyle: CSSProperties = { + padding: 0, + }; - return ( -
- setDrawerOpen(true)}> - - - - - setDrawerOpen(false)} - open={drawerOpen} - closable={false} - width={420} - bodyStyle={bodyStyle} - maskStyle={{ backgroundColor: 'transparent' }} - style={style} - extra={ - { - setCount(0); - setDrawerOpen(false); - }} - > - - - } - footer={ -
- View All -
- } - > - - -
- ); + return ( +
+ setDrawerOpen(true)}> + + + + + setDrawerOpen(false)} + open={drawerOpen} + closable={false} + width={420} + bodyStyle={bodyStyle} + maskStyle={{ backgroundColor: 'transparent' }} + style={style} + extra={ + { + setCount(0); + setDrawerOpen(false); + }} + > + + + } + footer={ +
+ View All +
+ } + > + + +
+ ); } function NoticeTab() { - const themeToken = useThemeToken(); - const tabChildren: ReactNode = ( -
-
- -
-
- {faker.person.fullName()} - sent you a frind request -
- about 1 hour ago -
- - - - -
-
-
+ const themeToken = useThemeToken(); + const tabChildren: ReactNode = ( +
+
+ +
+
+ {faker.person.fullName()} + sent you a frind request +
+ about 1 hour ago +
+ + + + +
+
+
-
- -
-
- {faker.person.fullName()} - added file to - File Manager -
- 5 hour ago -
-
- @{faker.person.fullName()} - {faker.lorem.lines(2)} +
+ +
+
+ {faker.person.fullName()} + added file to + File Manager +
+ 5 hour ago +
+
+ @{faker.person.fullName()} + {faker.lorem.lines(2)} +
+
+
+ + + +
+
-
-
- - - -
-
-
-
- -
-
- {faker.person.fullName()} - mentioned you in - Slash Admin -
- 1 days ago -
- - - -
-
-
+
+ +
+
+ {faker.person.fullName()} + mentioned you in + Slash Admin +
+ 1 days ago +
+ + + +
+
+
-
- -
-
- {faker.person.fullName()} - added file to - File Manager -
- 2 days ago -
- -
- Witout Me - 1.2GB·30 min ago +
+ +
+
+ {faker.person.fullName()} + added file to + File Manager +
+ 2 days ago +
+ +
+ Witout Me + 1.2GB·30 min ago +
+ +
+
- -
-
-
-
- -
-
- {faker.person.fullName()} - request a payment of - $3000 -
- 4 days ago -
- - - - -
-
-
+
+ +
+
+ {faker.person.fullName()} + request a payment of + $3000 +
+ 4 days ago +
+ + + + +
+
+
-
- - - -
-
- Your order is placed waiting for shipping -
- 4 days ago{' '} -
-
+
+ + + +
+
+ + Your order is placed waiting for shipping + +
+ 4 days ago{' '} +
+
-
- - - -
-
- You have new mail -
- 5 days ago{' '} -
-
+
+ + + +
+
+ You have new mail +
+ 5 days ago{' '} +
+
-
- - - -
-
- You have new message 5 unread message -
- 7 days ago -
-
+
+ + + +
+
+ You have new message 5 unread message +
+ 7 days ago +
+
-
- - - -
-
- Delivery processing your order is being shipped -
- 8 days ago{' '} -
-
-
- ); - const items: TabsProps['items'] = [ - { - key: '1', - label: ( -
- All - 22 -
- ), - children: tabChildren, - }, - { - key: '2', - label: ( -
- Unread - 12 +
+ + + +
+
+ + Delivery processing your order is being shipped + +
+ 8 days ago{' '} +
+
- ), - children: tabChildren, - }, - { - key: '3', - label: ( -
- Archived - 10 + ); + const items: TabsProps['items'] = [ + { + key: '1', + label: ( +
+ All + 22 +
+ ), + children: tabChildren, + }, + { + key: '2', + label: ( +
+ Unread + 12 +
+ ), + children: tabChildren, + }, + { + key: '3', + label: ( +
+ Archived + 10 +
+ ), + children: tabChildren, + }, + ]; + return ( +
+
- ), - children: tabChildren, - }, - ]; - return ( -
- -
- ); + ); } diff --git a/src/layouts/_common/search-bar.tsx b/src/layouts/_common/search-bar.tsx index 53eaf86..1ecb4d0 100644 --- a/src/layouts/_common/search-bar.tsx +++ b/src/layouts/_common/search-bar.tsx @@ -14,235 +14,238 @@ import ProTag from '@/theme/antd/components/tag'; import { useThemeToken } from '@/theme/hooks'; export default function SearchBar() { - const { t } = useTranslation(); - const { replace } = useRouter(); - const inputRef = useRef(null); - const listRef = useRef(null); - - const [search, toggle] = useBoolean(false); - const themeToken = useThemeToken(); - - const flattenedRoutes = useFlattenedRoutes(); - - const activeStyle: CSSProperties = { - border: `1px dashed ${themeToken.colorPrimary}`, - backgroundColor: `${Color(themeToken.colorPrimary).alpha(0.2).toString()}`, - }; - - const [searchQuery, setSearchQuery] = useState(''); - const [searchResult, setSearchResult] = useState(flattenedRoutes); - const [selectedItemIndex, setSelectedItemIndex] = useState(0); - - useEffect(() => { - const result = flattenedRoutes.filter( - (item) => - t(item.label).toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1 || - item.key.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1, - ); - setSearchResult(result); - setSelectedItemIndex(0); - }, [searchQuery, t, flattenedRoutes]); - - const handleMetaK = (event: KeyboardEvent) => { - if (event.metaKey && event.key === 'k') { - // https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey - handleOpen(); - } - }; - useEvent('keydown', handleMetaK); - - useKeyPressEvent('ArrowUp', (event) => { - if (!search) return; - event.preventDefault(); - let nextIndex = selectedItemIndex - 1; - if (nextIndex < 0) { - nextIndex = searchResult.length - 1; - } - setSelectedItemIndex(nextIndex); - scrollSelectedItemIntoView(nextIndex); - }); - - useKeyPressEvent('ArrowDown', (event) => { - if (!search) return; - event.preventDefault(); - let nextIndex = selectedItemIndex + 1; - if (nextIndex > searchResult.length - 1) { - nextIndex = 0; - } - setSelectedItemIndex(nextIndex); - scrollSelectedItemIntoView(nextIndex); - }); - - useKeyPressEvent('Enter', (event) => { - if (!search || searchResult.length === 0) return; - event.preventDefault(); - const selectItem = searchResult[selectedItemIndex].key; - if (selectItem) { - handleSelect(selectItem); - toggle(false); - } - }); - - useKeyPressEvent('Escape', () => { - handleCancel(); - }); - - const handleOpen = () => { - toggle(true); - setSearchQuery(''); - setSelectedItemIndex(0); - }; - const handleCancel = () => { - toggle(false); - }; - const handleAfterOpenChange = (open: boolean) => { - if (open) { - // auto focus - inputRef.current?.focus(); - } - }; - - const scrollSelectedItemIntoView = (index: number) => { - if (listRef.current) { - const selectedItem = listRef.current.children[index]; - selectedItem.scrollIntoView({ - behavior: 'smooth', - block: 'center', - }); - } - }; - - const handleHover = (index: number) => { - if (index === selectedItemIndex) return; - setSelectedItemIndex(index); - }; - - const handleSelect = (key: string) => { - replace(key); - handleCancel(); - }; - - return ( - <> -
- - - - ⌘K -
- setSearchQuery(e.target.value)} - placeholder="Search..." - bordered={false} - autoFocus - prefix={} - suffix={ - - Esc - - } - /> + const { t } = useTranslation(); + const { replace } = useRouter(); + const inputRef = useRef(null); + const listRef = useRef(null); + + const [search, toggle] = useBoolean(false); + const themeToken = useThemeToken(); + + const flattenedRoutes = useFlattenedRoutes(); + + const activeStyle: CSSProperties = { + border: `1px dashed ${themeToken.colorPrimary}`, + backgroundColor: `${Color(themeToken.colorPrimary).alpha(0.2).toString()}`, + }; + + const [searchQuery, setSearchQuery] = useState(''); + const [searchResult, setSearchResult] = useState(flattenedRoutes); + const [selectedItemIndex, setSelectedItemIndex] = useState(0); + + useEffect(() => { + const result = flattenedRoutes.filter( + (item) => + t(item.label).toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1 || + item.key.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1, + ); + setSearchResult(result); + setSelectedItemIndex(0); + }, [searchQuery, t, flattenedRoutes]); + + const handleMetaK = (event: KeyboardEvent) => { + if (event.metaKey && event.key === 'k') { + // https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey + handleOpen(); } - footer={ -
-
- ↑ - ↓ - to navigate -
-
- ↵ - to select -
-
- ESC - to close -
-
+ }; + useEvent('keydown', handleMetaK); + + useKeyPressEvent('ArrowUp', (event) => { + if (!search) return; + event.preventDefault(); + let nextIndex = selectedItemIndex - 1; + if (nextIndex < 0) { + nextIndex = searchResult.length - 1; + } + setSelectedItemIndex(nextIndex); + scrollSelectedItemIntoView(nextIndex); + }); + + useKeyPressEvent('ArrowDown', (event) => { + if (!search) return; + event.preventDefault(); + let nextIndex = selectedItemIndex + 1; + if (nextIndex > searchResult.length - 1) { + nextIndex = 0; + } + setSelectedItemIndex(nextIndex); + scrollSelectedItemIntoView(nextIndex); + }); + + useKeyPressEvent('Enter', (event) => { + if (!search || searchResult.length === 0) return; + event.preventDefault(); + const selectItem = searchResult[selectedItemIndex].key; + if (selectItem) { + handleSelect(selectItem); + toggle(false); + } + }); + + useKeyPressEvent('Escape', () => { + handleCancel(); + }); + + const handleOpen = () => { + toggle(true); + setSearchQuery(''); + setSelectedItemIndex(0); + }; + const handleCancel = () => { + toggle(false); + }; + const handleAfterOpenChange = (open: boolean) => { + if (open) { + // auto focus + inputRef.current?.focus(); } - > - {searchResult.length === 0 ? ( - - ) : ( - -
- {searchResult.map(({ key, label }, index) => { - const partsTitle = parse(t(label), match(t(label), searchQuery)); - const partsKey = parse(key, match(key, searchQuery)); - return ( - handleSelect(key)} - onMouseMove={() => handleHover(index)} - > -
-
-
- {partsTitle.map((item) => ( - { + if (listRef.current) { + const selectedItem = listRef.current.children[index]; + selectedItem.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }); + } + }; + + const handleHover = (index: number) => { + if (index === selectedItemIndex) return; + setSelectedItemIndex(index); + }; + + const handleSelect = (key: string) => { + replace(key); + handleCancel(); + }; + + return ( + <> +
+ + + + ⌘K +
+ setSearchQuery(e.target.value)} + placeholder="Search..." + bordered={false} + autoFocus + prefix={} + suffix={ + - {item.text} - - ))} + Esc + + } + /> + } + footer={ +
+
+ ↑ + ↓ + to navigate
-
- {partsKey.map((item) => ( - - {item.text} - - ))} +
+ ↵ + to select +
+
+ ESC + to close
-
- - ); - })} -
- - )} - - - ); + } + > + {searchResult.length === 0 ? ( + + ) : ( + +
+ {searchResult.map(({ key, label }, index) => { + const partsTitle = parse(t(label), match(t(label), searchQuery)); + const partsKey = parse(key, match(key, searchQuery)); + return ( + handleSelect(key)} + onMouseMove={() => handleHover(index)} + > +
+
+
+ {partsTitle.map((item) => ( + + {item.text} + + ))} +
+
+ {partsKey.map((item) => ( + + {item.text} + + ))} +
+
+
+ + ); + })} +
+ + )} + + + ); } const StyledListItemButton = styled.div<{ $themetoken: GlobalToken }>` - display: flex; - flex-direction: column; - cursor: pointer; - width: 100%; - padding: 8px 16px; - border-radius: 8px; - border-bottom: ${(props) => `1px dashed ${props.$themetoken.colorBorder}`}; - color: ${(props) => `${props.$themetoken.colorTextSecondary}`}; + display: flex; + flex-direction: column; + cursor: pointer; + width: 100%; + padding: 8px 16px; + border-radius: 8px; + border-bottom: ${(props) => `1px dashed ${props.$themetoken.colorBorder}`}; + color: ${(props) => `${props.$themetoken.colorTextSecondary}`}; `; diff --git a/src/layouts/_common/setting-button.tsx b/src/layouts/_common/setting-button.tsx index b439948..c23bf4d 100644 --- a/src/layouts/_common/setting-button.tsx +++ b/src/layouts/_common/setting-button.tsx @@ -1,8 +1,8 @@ import { - CloseOutlined, - LeftOutlined, - QuestionCircleOutlined, - RightOutlined, + CloseOutlined, + LeftOutlined, + QuestionCircleOutlined, + RightOutlined, } from '@ant-design/icons'; import { Button, Card, Drawer, Switch, Tooltip } from 'antd'; import Color from 'color'; @@ -25,380 +25,423 @@ import { ThemeColorPresets, ThemeLayout, ThemeMode } from '#/enum'; * App Setting */ export default function SettingButton() { - const [drawerOpen, setDrawerOpen] = useState(false); - const { colorPrimary, colorBgBase, colorTextSecondary, colorTextTertiary, colorBgContainer } = - useThemeToken(); + const [drawerOpen, setDrawerOpen] = useState(false); + const { colorPrimary, colorBgBase, colorTextSecondary, colorTextTertiary, colorBgContainer } = + useThemeToken(); - const settings = useSettings(); - const { themeMode, themeColorPresets, themeLayout, themeStretch, breadCrumb, multiTab } = - settings; - const { setSettings } = useSettingActions(); + const settings = useSettings(); + const { themeMode, themeColorPresets, themeLayout, themeStretch, breadCrumb, multiTab } = + settings; + const { setSettings } = useSettingActions(); - const setThemeMode = (themeMode: ThemeMode) => { - setSettings({ - ...settings, - themeMode, - }); - }; + const setThemeMode = (themeMode: ThemeMode) => { + setSettings({ + ...settings, + themeMode, + }); + }; - const setThemeColorPresets = (themeColorPresets: ThemeColorPresets) => { - setSettings({ - ...settings, - themeColorPresets, - }); - }; + const setThemeColorPresets = (themeColorPresets: ThemeColorPresets) => { + setSettings({ + ...settings, + themeColorPresets, + }); + }; - const setThemeLayout = (themeLayout: ThemeLayout) => { - setSettings({ - ...settings, - themeLayout, - }); - }; + const setThemeLayout = (themeLayout: ThemeLayout) => { + setSettings({ + ...settings, + themeLayout, + }); + }; - const setThemeStretch = (themeStretch: boolean) => { - setSettings({ - ...settings, - themeStretch, - }); - }; + const setThemeStretch = (themeStretch: boolean) => { + setSettings({ + ...settings, + themeStretch, + }); + }; - const setBreadCrumn = (checked: boolean) => { - setSettings({ - ...settings, - breadCrumb: checked, - }); - }; + const setBreadCrumn = (checked: boolean) => { + setSettings({ + ...settings, + breadCrumb: checked, + }); + }; - const setMultiTab = (checked: boolean) => { - setSettings({ - ...settings, - multiTab: checked, - }); - }; + const setMultiTab = (checked: boolean) => { + setSettings({ + ...settings, + multiTab: checked, + }); + }; - const style: CSSProperties = { - backdropFilter: 'blur(20px)', - backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`, - backgroundRepeat: 'no-repeat, no-repeat', - backgroundColor: Color(colorBgContainer).alpha(0.9).toString(), - backgroundPosition: 'right top, left bottom', - backgroundSize: '50, 50%', - }; - const bodyStyle: CSSProperties = { - padding: 0, - }; + const style: CSSProperties = { + backdropFilter: 'blur(20px)', + backgroundImage: `url("${CyanBlur}"), url("${RedBlur}")`, + backgroundRepeat: 'no-repeat, no-repeat', + backgroundColor: Color(colorBgContainer).alpha(0.9).toString(), + backgroundPosition: 'right top, left bottom', + backgroundSize: '50, 50%', + }; + const bodyStyle: CSSProperties = { + padding: 0, + }; - const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen); - const toggleFullScreen = () => { - if (screenfull.isEnabled) { - screenfull.toggle(); - setIsFullscreen(!isFullscreen); - } - }; + const [isFullscreen, setIsFullscreen] = useState(screenfull.isFullscreen); + const toggleFullScreen = () => { + if (screenfull.isEnabled) { + screenfull.toggle(); + setIsFullscreen(!isFullscreen); + } + }; - const layoutBackground = (layout: ThemeLayout) => - themeLayout === layout - ? `linear-gradient(135deg, ${colorBgBase} 0%, ${colorPrimary} 100%)` - : '#919eab'; + const layoutBackground = (layout: ThemeLayout) => + themeLayout === layout + ? `linear-gradient(135deg, ${colorBgBase} 0%, ${colorPrimary} 100%)` + : '#919eab'; - return ( - <> -
- setDrawerOpen(true)} - > - - - - -
- setDrawerOpen(false)} - open={drawerOpen} - closable={false} - width={280} - bodyStyle={bodyStyle} - maskStyle={{ backgroundColor: 'transparent' }} - style={style} - extra={ - setDrawerOpen(false)} className="h-9 w-9 hover:scale-105"> - - - } - footer={ - - } - > -
- {/* theme mode */} -
-
- Mode -
-
- setThemeMode(ThemeMode.Light)} - className="flex h-20 w-full cursor-pointer items-center justify-center" - > - - - setThemeMode(ThemeMode.Dark)} - className="flex h-20 w-full cursor-pointer items-center justify-center" - > - - + setDrawerOpen(true)} + > + + + +
-
+ setDrawerOpen(false)} + open={drawerOpen} + closable={false} + width={280} + bodyStyle={bodyStyle} + maskStyle={{ backgroundColor: 'transparent' }} + style={style} + extra={ + setDrawerOpen(false)} + className="h-9 w-9 hover:scale-105" + > + + + } + footer={ + + } + > +
+ {/* theme mode */} +
+
+ Mode +
+
+ setThemeMode(ThemeMode.Light)} + className="flex h-20 w-full cursor-pointer items-center justify-center" + > + + + setThemeMode(ThemeMode.Dark)} + className="flex h-20 w-full cursor-pointer items-center justify-center" + > + + +
+
- {/* theme layout */} -
-
- Layout -
-
- setThemeLayout(ThemeLayout.Vertical)} - className="h-14 cursor-pointer" - style={{ flexGrow: 1, flexShrink: 0 }} - bodyStyle={{ - padding: 0, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '100%', - }} - > -
-
-
-
-
-
-
-
- - setThemeLayout(ThemeLayout.Horizontal)} - className="h-14 cursor-pointer" - style={{ flexGrow: 1, flexShrink: 0 }} - bodyStyle={{ - padding: 0, - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - height: '100%', - }} - > -
-
-
-
-
-
-
-
- - setThemeLayout(ThemeLayout.Mini)} - className="h-14 cursor-pointer" - style={{ flexGrow: 1, flexShrink: 0 }} - bodyStyle={{ - padding: 0, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '100%', - }} - > -
-
-
-
-
-
-
-
- -
-
+ {/* theme layout */} +
+
+ Layout +
+
+ setThemeLayout(ThemeLayout.Vertical)} + className="h-14 cursor-pointer" + style={{ flexGrow: 1, flexShrink: 0 }} + bodyStyle={{ + padding: 0, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + }} + > +
+
+
+
+
+
+
+
+ + setThemeLayout(ThemeLayout.Horizontal)} + className="h-14 cursor-pointer" + style={{ flexGrow: 1, flexShrink: 0 }} + bodyStyle={{ + padding: 0, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + }} + > +
+
+
+
+
+
+
+
+ + setThemeLayout(ThemeLayout.Mini)} + className="h-14 cursor-pointer" + style={{ flexGrow: 1, flexShrink: 0 }} + bodyStyle={{ + padding: 0, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + }} + > +
+
+
+
+
+
+
+
+ +
+
- {/* theme stretch */} -
-
- Stretch - - - -
+ {/* theme stretch */} +
+
+ Stretch + + + +
- setThemeStretch(!themeStretch)} - className="flex h-20 w-full cursor-pointer items-center justify-center" - bodyStyle={{ - width: '50%', - padding: 0, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }} - > - {themeStretch ? ( -
- -
- -
- ) : ( -
- -
- -
- )} - -
+ setThemeStretch(!themeStretch)} + className="flex h-20 w-full cursor-pointer items-center justify-center" + bodyStyle={{ + width: '50%', + padding: 0, + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + }} + > + {themeStretch ? ( +
+ +
+ +
+ ) : ( +
+ +
+ +
+ )} + +
- {/* theme presets */} -
-
- Presets -
-
- {Object.entries(colorPrimarys).map(([preset, color]) => ( - setThemeColorPresets(preset as ThemeColorPresets)} - > -
- -
- - ))} -
-
+ {/* theme presets */} +
+
+ Presets +
+
+ {Object.entries(colorPrimarys).map(([preset, color]) => ( + + setThemeColorPresets(preset as ThemeColorPresets) + } + > +
+ +
+ + ))} +
+
- {/* Page config */} -
-
- Page -
-
-
-
BreadCrumb
- setBreadCrumn(checked)} - /> -
-
-
Multi Tab
- setMultiTab(checked)} - /> -
-
-
-
- - - ); + {/* Page config */} +
+
+ Page +
+
+
+
BreadCrumb
+ setBreadCrumn(checked)} + /> +
+
+
Multi Tab
+ setMultiTab(checked)} + /> +
+
+
+
+ + + ); } diff --git a/src/layouts/dashboard/header.tsx b/src/layouts/dashboard/header.tsx index 5ba9b7d..038c47f 100644 --- a/src/layouts/dashboard/header.tsx +++ b/src/layouts/dashboard/header.tsx @@ -20,80 +20,85 @@ import Nav from './nav'; import { ThemeLayout } from '#/enum'; type Props = { - className?: string; - offsetTop?: boolean; + className?: string; + offsetTop?: boolean; }; export default function Header({ className = '', offsetTop = false }: Props) { - const [drawerOpen, setDrawerOpen] = useState(false); - const { themeLayout, breadCrumb } = useSettings(); - const { colorBgElevated, colorBorder } = useThemeToken(); - const { screenMap } = useResponsive(); + const [drawerOpen, setDrawerOpen] = useState(false); + const { themeLayout, breadCrumb } = useSettings(); + const { colorBgElevated, colorBorder } = useThemeToken(); + const { screenMap } = useResponsive(); - const headerStyle: CSSProperties = { - position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'fixed', - borderBottom: - themeLayout === ThemeLayout.Horizontal - ? `1px dashed ${Color(colorBorder).alpha(0.6).toString()}` - : '', - backgroundColor: Color(colorBgElevated).alpha(1).toString(), - }; + const headerStyle: CSSProperties = { + position: themeLayout === ThemeLayout.Horizontal ? 'relative' : 'fixed', + borderBottom: + themeLayout === ThemeLayout.Horizontal + ? `1px dashed ${Color(colorBorder).alpha(0.6).toString()}` + : '', + backgroundColor: Color(colorBgElevated).alpha(1).toString(), + }; - if (themeLayout === ThemeLayout.Horizontal) { - headerStyle.width = '100vw'; - } else if (screenMap.md) { - headerStyle.right = '0px'; - headerStyle.left = 'auto'; - headerStyle.width = `calc(100% - ${ - themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH - }px)`; - } else { - headerStyle.width = '100vw'; - } + if (themeLayout === ThemeLayout.Horizontal) { + headerStyle.width = '100vw'; + } else if (screenMap.md) { + headerStyle.right = '0px'; + headerStyle.left = 'auto'; + headerStyle.width = `calc(100% - ${ + themeLayout === ThemeLayout.Vertical ? NAV_WIDTH : NAV_COLLAPSED_WIDTH + }px)`; + } else { + headerStyle.width = '100vw'; + } - return ( - <> -
-
-
- {themeLayout !== ThemeLayout.Horizontal ? ( - setDrawerOpen(true)} className="h-10 w-10 md:hidden"> - - - ) : ( - - )} -
{breadCrumb ? : null}
-
+ return ( + <> +
+
+
+ {themeLayout !== ThemeLayout.Horizontal ? ( + setDrawerOpen(true)} + className="h-10 w-10 md:hidden" + > + + + ) : ( + + )} +
{breadCrumb ? : null}
+
-
- - - window.open('https://github.com/d3george/slash-admin')}> - - - - - -
-
-
- setDrawerOpen(false)} - open={drawerOpen} - closeIcon={false} - headerStyle={{ display: 'none' }} - bodyStyle={{ padding: 0, overflow: 'hidden' }} - width="auto" - > -
+
+ setDrawerOpen(false)} + open={drawerOpen} + closeIcon={false} + headerStyle={{ display: 'none' }} + bodyStyle={{ padding: 0, overflow: 'hidden' }} + width="auto" + > +
+ ); } diff --git a/src/layouts/simple/index.tsx b/src/layouts/simple/index.tsx index 8742b7f..c65db1b 100644 --- a/src/layouts/simple/index.tsx +++ b/src/layouts/simple/index.tsx @@ -5,20 +5,20 @@ import { useThemeToken } from '@/theme/hooks'; import HeaderSimple from '../_common/header-simple'; type Props = { - children: React.ReactNode; + children: React.ReactNode; }; export default function SimpleLayout({ children }: Props) { - const { colorBgElevated, colorTextBase } = useThemeToken(); - return ( -
- - {children} -
- ); + const { colorBgElevated, colorTextBase } = useThemeToken(); + return ( +
+ + {children} +
+ ); } diff --git a/src/locales/i18n.ts b/src/locales/i18n.ts index 3ea8b06..32a88d3 100644 --- a/src/locales/i18n.ts +++ b/src/locales/i18n.ts @@ -11,25 +11,25 @@ import { LocalEnum, StorageEnum } from '#/enum'; const defaultLng = getStringItem(StorageEnum.I18N) || (LocalEnum.en_US as string); i18n - // detect user language - // learn more: https://github.com/i18next/i18next-browser-languageDetector - .use(LanguageDetector) - // pass the i18n instance to react-i18next. - .use(initReactI18next) - // init i18next - // for all options read: https://www.i18next.com/overview/configuration-options - .init({ - debug: true, - lng: defaultLng, // localstorage -> i18nextLng: en_US - fallbackLng: LocalEnum.en_US, - interpolation: { - escapeValue: false, // not needed for react as it escapes by default - }, - resources: { - en_US: { translation: en_US }, - zh_CN: { translation: zh_CN }, - }, - }); + // detect user language + // learn more: https://github.com/i18next/i18next-browser-languageDetector + .use(LanguageDetector) + // pass the i18n instance to react-i18next. + .use(initReactI18next) + // init i18next + // for all options read: https://www.i18next.com/overview/configuration-options + .init({ + debug: true, + lng: defaultLng, // localstorage -> i18nextLng: en_US + fallbackLng: LocalEnum.en_US, + interpolation: { + escapeValue: false, // not needed for react as it escapes by default + }, + resources: { + en_US: { translation: en_US }, + zh_CN: { translation: zh_CN }, + }, + }); export default i18n; export const { t } = i18n; diff --git a/src/locales/lang/en_US/common.json b/src/locales/lang/en_US/common.json index d21ce6c..c984357 100644 --- a/src/locales/lang/en_US/common.json +++ b/src/locales/lang/en_US/common.json @@ -1,22 +1,22 @@ { - "common": { - "okText": "OK", - "closeText": "Close", - "cancelText": "Cancel", - "loadingText": "Loading...", - "saveText": "Save", - "delText": "Delete", - "resetText": "Reset", - "searchText": "Search", - "queryText": "Search", + "common": { + "okText": "OK", + "closeText": "Close", + "cancelText": "Cancel", + "loadingText": "Loading...", + "saveText": "Save", + "delText": "Delete", + "resetText": "Reset", + "searchText": "Search", + "queryText": "Search", - "inputText": "Please enter", - "chooseText": "Please choose", + "inputText": "Please enter", + "chooseText": "Please choose", - "redo": "Refresh", - "back": "Back", + "redo": "Refresh", + "back": "Back", - "light": "Light", - "dark": "Dark" - } + "light": "Light", + "dark": "Dark" + } } diff --git a/src/locales/lang/en_US/home.json b/src/locales/lang/en_US/home.json index 6ce5f6c..9182470 100644 --- a/src/locales/lang/en_US/home.json +++ b/src/locales/lang/en_US/home.json @@ -1,5 +1,5 @@ { - "home": { - "menu": "home" - } + "home": { + "menu": "home" + } } diff --git a/src/locales/lang/en_US/index.ts b/src/locales/lang/en_US/index.ts index ec9ad89..4a7c37c 100644 --- a/src/locales/lang/en_US/index.ts +++ b/src/locales/lang/en_US/index.ts @@ -3,7 +3,7 @@ import home from './home.json'; import sys from './sys.json'; export default { - ...common, - ...sys, - ...home, + ...common, + ...sys, + ...home, }; diff --git a/src/locales/lang/en_US/sys.json b/src/locales/lang/en_US/sys.json index 5dc8bb3..5d50ec6 100644 --- a/src/locales/lang/en_US/sys.json +++ b/src/locales/lang/en_US/sys.json @@ -1,157 +1,157 @@ { - "sys": { - "api": { - "operationSuccess": "Operation Success", - "operationFailed": "Operation failed", - "errorTip": "Error Tip", - "successTip": "Success Tip", - "errorMessage": "The operation failed, the system is abnormal!", - "timeoutMessage": "Login timed out, please log in again!", - "apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!", - "apiRequestFailed": "The interface request failed, please try again later!", - "networkException": "network anomaly", - "networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal", + "sys": { + "api": { + "operationSuccess": "Operation Success", + "operationFailed": "Operation failed", + "errorTip": "Error Tip", + "successTip": "Success Tip", + "errorMessage": "The operation failed, the system is abnormal!", + "timeoutMessage": "Login timed out, please log in again!", + "apiTimeoutMessage": "The interface request timed out, please refresh the page and try again!", + "apiRequestFailed": "The interface request failed, please try again later!", + "networkException": "network anomaly", + "networkExceptionMsg": "Please check if your network connection is normal! The network is abnormal", - "errMsg401": "The user does not have permission (token, user name, password error)!", - "errMsg403": "The user is authorized, but access is forbidden!", - "errMsg404": "Network request error, the resource was not found!", - "errMsg405": "Network request error, request method not allowed!", - "errMsg408": "Network request timed out!", - "errMsg500": "Server error, please contact the administrator!", - "errMsg501": "The network is not implemented!", - "errMsg502": "Network Error!", - "errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!", - "errMsg504": "Network timeout!", - "errMsg505": "The http version does not support the request!" - }, - "login": { - "backSignIn": "Back sign in", - "mobileSignInFormTitle": "Mobile sign in", - "qrSignInFormTitle": "Qr code sign in", - "signInFormTitle": "Sign in", - "signUpFormTitle": "Sign up", - "forgetFormTitle": "Reset password", + "errMsg401": "The user does not have permission (token, user name, password error)!", + "errMsg403": "The user is authorized, but access is forbidden!", + "errMsg404": "Network request error, the resource was not found!", + "errMsg405": "Network request error, request method not allowed!", + "errMsg408": "Network request timed out!", + "errMsg500": "Server error, please contact the administrator!", + "errMsg501": "The network is not implemented!", + "errMsg502": "Network Error!", + "errMsg503": "The service is unavailable, the server is temporarily overloaded or maintained!", + "errMsg504": "Network timeout!", + "errMsg505": "The http version does not support the request!" + }, + "login": { + "backSignIn": "Back sign in", + "mobileSignInFormTitle": "Mobile sign in", + "qrSignInFormTitle": "Qr code sign in", + "signInFormTitle": "Sign in", + "signUpFormTitle": "Sign up", + "forgetFormTitle": "Reset password", - "signInPrimaryTitle": "Hi, Welcome Back", - "signInSecondTitle": "Backstage management system", - "signInTitle": "", - "signInDesc": "Enter your personal details and get started!", - "policy": "I agree to the xxx Privacy Policy", - "scanSign": "scanning the code to complete the login", - "forgetFormSecondTitle": "Please enter the email address associated with your account and We will email you a link to reset your password.", + "signInPrimaryTitle": "Hi, Welcome Back", + "signInSecondTitle": "Backstage management system", + "signInTitle": "", + "signInDesc": "Enter your personal details and get started!", + "policy": "I agree to the xxx Privacy Policy", + "scanSign": "scanning the code to complete the login", + "forgetFormSecondTitle": "Please enter the email address associated with your account and We will email you a link to reset your password.", - "loginButton": "Sign in", - "registerButton": "Sign up", - "rememberMe": "Remember me", - "forgetPassword": "Forget Password?", - "otherSignIn": "Sign in with", - "sendSmsButton": "Send SMS code", - "sendSmsText": "Reacquire in {{second}}s", - "sendEmailButton": "Send Email", + "loginButton": "Sign in", + "registerButton": "Sign up", + "rememberMe": "Remember me", + "forgetPassword": "Forget Password?", + "otherSignIn": "Sign in with", + "sendSmsButton": "Send SMS code", + "sendSmsText": "Reacquire in {{second}}s", + "sendEmailButton": "Send Email", - "loginSuccessTitle": "Login successful", - "loginSuccessDesc": "Welcome back", + "loginSuccessTitle": "Login successful", + "loginSuccessDesc": "Welcome back", - "accountPlaceholder": "Please input account", - "passwordPlaceholder": "Please input password", - "confirmPasswordPlaceholder": "Please input confirm password", - "emaildPlaceholder": "Please input email", - "smsPlaceholder": "Please input sms code", - "mobilePlaceholder": "Please input mobile", - "policyPlaceholder": "Register after checking", - "diffPwd": "The two passwords are inconsistent", + "accountPlaceholder": "Please input account", + "passwordPlaceholder": "Please input password", + "confirmPasswordPlaceholder": "Please input confirm password", + "emaildPlaceholder": "Please input email", + "smsPlaceholder": "Please input sms code", + "mobilePlaceholder": "Please input mobile", + "policyPlaceholder": "Register after checking", + "diffPwd": "The two passwords are inconsistent", - "account": "Account", - "password": "Password", - "confirmPassword": "Confirm Password", - "email": "Email", - "smsCode": "SMS code", - "mobile": "Mobile", + "account": "Account", + "password": "Password", + "confirmPassword": "Confirm Password", + "email": "Email", + "smsCode": "SMS code", + "mobile": "Mobile", - "registerAndAgree": "By signing up, I agree to", - "termsOfService": " Terms of service ", - "privacyPolicy": " Privacy policy ", - "logout": "Logout" - }, - "tab": { - "fullscreen": "FullScreen", - "refresh": "Refresh", - "close": "Close", - "closeOthers": "Close Others", - "closeAll": "Close All", - "closeLeft": "Close Left", - "closeRight": "Close Right" - }, - "menu": { - "dashboard": "Dashboard", - "workbench": "Workbench", - "analysis": "Analysis", - "management": "Management", - "user": { - "index": "User", - "profile": "Profile", - "account": "Account" - }, - "system": { - "index": "System", - "organization": "Organization", - "permission": "Permission", - "role": "Role", - "user": "User" - }, - "blog": "Blog", - "components": "Components", - "icon": "Icon", - "animate": "Animate", - "scroll": "Scroll", - "markdown": "Markdown", - "editor": "Editor", - "i18n": "Multi Language", - "upload": "Upload", - "chart": "Chart", - "functions": "Functions", - "clipboard": "Clipboard", - "menulevel": { - "index": "Menu Level", - "1a": "Menu Level 1a", - "1b": { - "index": "Menu Level 1b", - "2a": "Menu Level 2a", - "2b": { - "index": "Menu Level 2b", - "3a": "Menu Level 3a", - "3b": "Menu Level 3b" - } + "registerAndAgree": "By signing up, I agree to", + "termsOfService": " Terms of service ", + "privacyPolicy": " Privacy policy ", + "logout": "Logout" + }, + "tab": { + "fullscreen": "FullScreen", + "refresh": "Refresh", + "close": "Close", + "closeOthers": "Close Others", + "closeAll": "Close All", + "closeLeft": "Close Left", + "closeRight": "Close Right" + }, + "menu": { + "dashboard": "Dashboard", + "workbench": "Workbench", + "analysis": "Analysis", + "management": "Management", + "user": { + "index": "User", + "profile": "Profile", + "account": "Account" + }, + "system": { + "index": "System", + "organization": "Organization", + "permission": "Permission", + "role": "Role", + "user": "User" + }, + "blog": "Blog", + "components": "Components", + "icon": "Icon", + "animate": "Animate", + "scroll": "Scroll", + "markdown": "Markdown", + "editor": "Editor", + "i18n": "Multi Language", + "upload": "Upload", + "chart": "Chart", + "functions": "Functions", + "clipboard": "Clipboard", + "menulevel": { + "index": "Menu Level", + "1a": "Menu Level 1a", + "1b": { + "index": "Menu Level 1b", + "2a": "Menu Level 2a", + "2b": { + "index": "Menu Level 2b", + "3a": "Menu Level 3a", + "3b": "Menu Level 3b" + } + } + }, + "disabled": "Item Disabled", + "label": "Item Label", + "frame": "Item External", + "external_link": "External Link", + "iframe": "Iframe", + "blank": "Blank", + "calendar": "Calendar", + "kanban": "Kanban", + "error": { + "index": "Error Page", + "403": "403", + "404": "404", + "500": "500" + } + }, + "menu2": { + "setting": { + "index": "Setting", + "menu": "Menu", + "dictionary": "Dictionary", + "parameter": "Parameter" + }, + "org": { + "index": "Org", + "org": "Institution", + "station": "Station", + "user": "User" + } } - }, - "disabled": "Item Disabled", - "label": "Item Label", - "frame": "Item External", - "external_link": "External Link", - "iframe": "Iframe", - "blank": "Blank", - "calendar": "Calendar", - "kanban": "Kanban", - "error": { - "index": "Error Page", - "403": "403", - "404": "404", - "500": "500" - } - }, - "menu2": { - "setting": { - "index": "Setting", - "menu": "Menu", - "dictionary": "Dictionary", - "parameter": "Parameter" - }, - "org": { - "index": "Org", - "org": "Institution", - "station": "Station", - "user": "User" - } } - } } diff --git a/src/locales/lang/zh_CN/common.json b/src/locales/lang/zh_CN/common.json index 40f268f..b70ba77 100644 --- a/src/locales/lang/zh_CN/common.json +++ b/src/locales/lang/zh_CN/common.json @@ -1,22 +1,22 @@ { - "common": { - "okText": "确认", - "closeText": "关闭", - "cancelText": "取消", - "loadingText": "加载中...", - "saveText": "保存", - "delText": "删除", - "resetText": "重置", - "searchText": "搜索", - "queryText": "查询", + "common": { + "okText": "确认", + "closeText": "关闭", + "cancelText": "取消", + "loadingText": "加载中...", + "saveText": "保存", + "delText": "删除", + "resetText": "重置", + "searchText": "搜索", + "queryText": "查询", - "inputText": "请输入", - "chooseText": "请选择", + "inputText": "请输入", + "chooseText": "请选择", - "redo": "刷新", - "back": "返回", + "redo": "刷新", + "back": "返回", - "light": "亮色主题", - "dark": "黑暗主题" - } + "light": "亮色主题", + "dark": "黑暗主题" + } } diff --git a/src/locales/lang/zh_CN/home.json b/src/locales/lang/zh_CN/home.json index 6826f8b..69fee12 100644 --- a/src/locales/lang/zh_CN/home.json +++ b/src/locales/lang/zh_CN/home.json @@ -1,5 +1,5 @@ { - "home": { - "menu": "个人主页" - } + "home": { + "menu": "个人主页" + } } diff --git a/src/locales/lang/zh_CN/index.ts b/src/locales/lang/zh_CN/index.ts index ec9ad89..4a7c37c 100644 --- a/src/locales/lang/zh_CN/index.ts +++ b/src/locales/lang/zh_CN/index.ts @@ -3,7 +3,7 @@ import home from './home.json'; import sys from './sys.json'; export default { - ...common, - ...sys, - ...home, + ...common, + ...sys, + ...home, }; diff --git a/src/locales/lang/zh_CN/sys.json b/src/locales/lang/zh_CN/sys.json index 541887e..145be5a 100644 --- a/src/locales/lang/zh_CN/sys.json +++ b/src/locales/lang/zh_CN/sys.json @@ -1,156 +1,156 @@ { - "sys": { - "api": { - "operationSuccess": "操作成功", - "operationFailed": "操作失败", - "errorTip": "错误提示", - "successTip": "成功提示", - "errorMessage": "操作失败,系统异常!", - "timeoutMessage": "登录超时,请重新登录!", - "apiTimeoutMessage": "接口请求超时,请刷新页面重试!", - "apiRequestFailed": "请求出错，请稍候重试", - "networkException": "网络异常", - "networkExceptionMsg": "网络异常，请检查您的网络连接是否正常!", + "sys": { + "api": { + "operationSuccess": "操作成功", + "operationFailed": "操作失败", + "errorTip": "错误提示", + "successTip": "成功提示", + "errorMessage": "操作失败,系统异常!", + "timeoutMessage": "登录超时,请重新登录!", + "apiTimeoutMessage": "接口请求超时,请刷新页面重试!", + "apiRequestFailed": "请求出错，请稍候重试", + "networkException": "网络异常", + "networkExceptionMsg": "网络异常，请检查您的网络连接是否正常!", - "errMsg401": "用户没有权限（令牌、用户名、密码错误）!", - "errMsg403": "用户得到授权，但是访问是被禁止的。!", - "errMsg404": "网络请求错误,未找到该资源!", - "errMsg405": "网络请求错误,请求方法未允许!", - "errMsg408": "网络请求超时!", - "errMsg500": "服务器错误,请联系管理员!", - "errMsg501": "网络未实现!", - "errMsg502": "网络错误!", - "errMsg503": "服务不可用，服务器暂时过载或维护!", - "errMsg504": "网络超时!", - "errMsg505": "http版本不支持该请求!" - }, - "login": { - "backSignIn": "返回", - "signInFormTitle": "登录", - "mobileSignInFormTitle": "手机登录", - "qrSignInFormTitle": "二维码登录", - "signUpFormTitle": "注册", - "forgetFormTitle": "重置密码", + "errMsg401": "用户没有权限（令牌、用户名、密码错误）!", + "errMsg403": "用户得到授权，但是访问是被禁止的。!", + "errMsg404": "网络请求错误,未找到该资源!", + "errMsg405": "网络请求错误,请求方法未允许!", + "errMsg408": "网络请求超时!", + "errMsg500": "服务器错误,请联系管理员!", + "errMsg501": "网络未实现!", + "errMsg502": "网络错误!", + "errMsg503": "服务不可用，服务器暂时过载或维护!", + "errMsg504": "网络超时!", + "errMsg505": "http版本不支持该请求!" + }, + "login": { + "backSignIn": "返回", + "signInFormTitle": "登录", + "mobileSignInFormTitle": "手机登录", + "qrSignInFormTitle": "二维码登录", + "signUpFormTitle": "注册", + "forgetFormTitle": "重置密码", - "signInPrimaryTitle": "欢迎回来", - "signInSecondTitle": "开箱即用的中后台管理系统", - "signInDesc": "输入您的个人详细信息开始使用！", - "policy": "我同意xxx隐私政策", - "scanSign": "扫码后点击'确认'，即可完成登录", - "forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址，我们将通过电子邮件向您发送重置密码的链接。", + "signInPrimaryTitle": "欢迎回来", + "signInSecondTitle": "开箱即用的中后台管理系统", + "signInDesc": "输入您的个人详细信息开始使用！", + "policy": "我同意xxx隐私政策", + "scanSign": "扫码后点击'确认'，即可完成登录", + "forgetFormSecondTitle": "请输入与您的帐户关联的电子邮件地址，我们将通过电子邮件向您发送重置密码的链接。", - "loginButton": "登录", - "registerButton": "注册", - "rememberMe": "记住我", - "forgetPassword": "忘记密码?", - "otherSignIn": "其他登录方式", - "sendSmsButton": "发送验证码", - "sendSmsText": "{{second}}秒后重新获取", - "sendEmailButton": "发送邮件", + "loginButton": "登录", + "registerButton": "注册", + "rememberMe": "记住我", + "forgetPassword": "忘记密码?", + "otherSignIn": "其他登录方式", + "sendSmsButton": "发送验证码", + "sendSmsText": "{{second}}秒后重新获取", + "sendEmailButton": "发送邮件", - "loginSuccessTitle": "登录成功", - "loginSuccessDesc": "欢迎回来", + "loginSuccessTitle": "登录成功", + "loginSuccessDesc": "欢迎回来", - "accountPlaceholder": "请输入账号", - "passwordPlaceholder": "请输入密码", - "confirmPasswordPlaceholder": "请输入确认密码", - "emaildPlaceholder": "请输入邮箱", - "smsPlaceholder": "请输入验证码", - "mobilePlaceholder": "请输入手机号码", - "policyPlaceholder": "勾选后才能注册", - "diffPwd": "两次输入密码不一致", + "accountPlaceholder": "请输入账号", + "passwordPlaceholder": "请输入密码", + "confirmPasswordPlaceholder": "请输入确认密码", + "emaildPlaceholder": "请输入邮箱", + "smsPlaceholder": "请输入验证码", + "mobilePlaceholder": "请输入手机号码", + "policyPlaceholder": "勾选后才能注册", + "diffPwd": "两次输入密码不一致", - "account": "账号", - "password": "密码", - "confirmPassword": "确认密码", - "email": "邮箱", - "smsCode": "短信验证码", - "mobile": "手机号码", + "account": "账号", + "password": "密码", + "confirmPassword": "确认密码", + "email": "邮箱", + "smsCode": "短信验证码", + "mobile": "手机号码", - "registerAndAgree": "注册即我同意", - "termsOfService": " 服务条款 ", - "privacyPolicy": " 隐私政策 ", - "logout": "退出" - }, - "tab": { - "fullscreen": "内容全屏", - "refresh": "刷新", - "close": "关闭标签页", - "closeOthers": "关闭其它标签页", - "closeAll": "关闭所有标签页", - "closeLeft": "关闭左侧标签页", - "closeRight": "关闭右侧标签页" - }, - "menu": { - "dashboard": "仪表", - "workbench": "工作台", - "analysis": "分析", - "management": "管理", - "user": { - "index": "用户", - "profile": "个人资料", - "account": "账户" - }, - "system": { - "index": "系统", - "organization": "组织", - "permission": "权限", - "role": "角色", - "user": "用户" - }, - "blog": "博客", - "components": "组件", - "icon": "图标", - "animate": "动画", - "scroll": "滚动", - "markdown": "Markdown", - "editor": "富文本", - "i18n": "多语言", - "upload": "上传", - "chart": "图表", - "functions": "功能", - "clipboard": "剪贴板", - "menulevel": { - "index": "多级菜单", - "1a": "多级菜单 1a", - "1b": { - "index": "多级菜单 1b", - "2a": "多级菜单 2a", - "2b": { - "index": "多级菜单 2b", - "3a": "多级菜单 3a", - "3b": "多级菜单 3b" - } + "registerAndAgree": "注册即我同意", + "termsOfService": " 服务条款 ", + "privacyPolicy": " 隐私政策 ", + "logout": "退出" + }, + "tab": { + "fullscreen": "内容全屏", + "refresh": "刷新", + "close": "关闭标签页", + "closeOthers": "关闭其它标签页", + "closeAll": "关闭所有标签页", + "closeLeft": "关闭左侧标签页", + "closeRight": "关闭右侧标签页" + }, + "menu": { + "dashboard": "仪表", + "workbench": "工作台", + "analysis": "分析", + "management": "管理", + "user": { + "index": "用户", + "profile": "个人资料", + "account": "账户" + }, + "system": { + "index": "系统", + "organization": "组织", + "permission": "权限", + "role": "角色", + "user": "用户" + }, + "blog": "博客", + "components": "组件", + "icon": "图标", + "animate": "动画", + "scroll": "滚动", + "markdown": "Markdown", + "editor": "富文本", + "i18n": "多语言", + "upload": "上传", + "chart": "图表", + "functions": "功能", + "clipboard": "剪贴板", + "menulevel": { + "index": "多级菜单", + "1a": "多级菜单 1a", + "1b": { + "index": "多级菜单 1b", + "2a": "多级菜单 2a", + "2b": { + "index": "多级菜单 2b", + "3a": "多级菜单 3a", + "3b": "多级菜单 3b" + } + } + }, + "disabled": "项目禁用", + "label": "项目标签", + "frame": "项目外部链接", + "external_link": "外链", + "iframe": "内嵌", + "blank": "空白", + "calendar": "日历", + "kanban": "看板", + "error": { + "index": "异常页", + "403": "403", + "404": "404", + "500": "500" + } + }, + "menu2": { + "setting": { + "index": "系统设置", + "menu": "菜单管理", + "dictionary": "字典管理", + "parameter": "参数管理" + }, + "org": { + "index": "组织机构", + "org": "机构管理", + "station": "岗位管理", + "user": "用户管理" + } } - }, - "disabled": "项目禁用", - "label": "项目标签", - "frame": "项目外部链接", - "external_link": "外链", - "iframe": "内嵌", - "blank": "空白", - "calendar": "日历", - "kanban": "看板", - "error": { - "index": "异常页", - "403": "403", - "404": "404", - "500": "500" - } - }, - "menu2": { - "setting": { - "index": "系统设置", - "menu": "菜单管理", - "dictionary": "字典管理", - "parameter": "参数管理" - }, - "org": { - "index": "组织机构", - "org": "机构管理", - "station": "岗位管理", - "user": "用户管理" - } } - } } diff --git a/src/locales/useLocale.ts b/src/locales/useLocale.ts index 8abbbf2..ed62ee4 100644 --- a/src/locales/useLocale.ts +++ b/src/locales/useLocale.ts @@ -7,44 +7,44 @@ import type { Locale as AntdLocal } from 'antd/es/locale'; type Locale = keyof typeof LocalEnum; type Language = { - locale: keyof typeof LocalEnum; - icon: string; - label: string; - antdLocal: AntdLocal; + locale: keyof typeof LocalEnum; + icon: string; + label: string; + antdLocal: AntdLocal; }; export const LANGUAGE_MAP: Record = { - [LocalEnum.zh_CN]: { - locale: LocalEnum.zh_CN, - label: 'Chinese', - icon: 'ic-locale_zh_CN', - antdLocal: zh_CN, - }, - [LocalEnum.en_US]: { - locale: LocalEnum.en_US, - label: 'English', - icon: 'ic-locale_en_US', - antdLocal: en_US, - }, + [LocalEnum.zh_CN]: { + locale: LocalEnum.zh_CN, + label: 'Chinese', + icon: 'ic-locale_zh_CN', + antdLocal: zh_CN, + }, + [LocalEnum.en_US]: { + locale: LocalEnum.en_US, + label: 'English', + icon: 'ic-locale_en_US', + antdLocal: en_US, + }, }; export default function useLocale() { - const { i18n } = useTranslation(); + const { i18n } = useTranslation(); - /** - * localstorage -> i18nextLng change - */ - const setLocale = (locale: Locale) => { - i18n.changeLanguage(locale); - }; + /** + * localstorage -> i18nextLng change + */ + const setLocale = (locale: Locale) => { + i18n.changeLanguage(locale); + }; - const locale = (i18n.resolvedLanguage || LocalEnum.en_US) as Locale; + const locale = (i18n.resolvedLanguage || LocalEnum.en_US) as Locale; - const language = LANGUAGE_MAP[locale]; + const language = LANGUAGE_MAP[locale]; - return { - locale, - language, - setLocale, - }; + return { + locale, + language, + setLocale, + }; } diff --git a/src/pages/components/animate/control-panel.tsx b/src/pages/components/animate/control-panel.tsx index ea34d34..bba73d9 100644 --- a/src/pages/components/animate/control-panel.tsx +++ b/src/pages/components/animate/control-panel.tsx @@ -3,43 +3,43 @@ import { Card } from 'antd'; import { useThemeToken } from '@/theme/hooks'; type Props = { - variantKey: { - type: string; - values: string[]; - }[]; - selectedVariant: string; - onChangeVarient: (varient: string) => void; + variantKey: { + type: string; + values: string[]; + }[]; + selectedVariant: string; + onChangeVarient: (varient: string) => void; }; export default function ControlPanel({ variantKey, selectedVariant, onChangeVarient }: Props) { - const { colorPrimary, colorTextBase } = useThemeToken(); + const { colorPrimary, colorTextBase } = useThemeToken(); - const selectedStyle = (variantKey: string) => { - return variantKey === selectedVariant - ? { - backgroundColor: colorPrimary, - color: colorTextBase, - } - : {}; - }; - return ( - - {variantKey.map((item) => ( -
-
{item.type.toUpperCase()}
-
    - {item.values.map((item) => ( -
  • onChangeVarient(item)} - style={selectedStyle(item)} - > - {item} -
    • + const selectedStyle = (variantKey: string) => { + return variantKey === selectedVariant + ? { + backgroundColor: colorPrimary, + color: colorTextBase, + } + : {}; + }; + return ( + + {variantKey.map((item) => ( +
    +
    {item.type.toUpperCase()}
    +
      + {item.values.map((item) => ( +
    • onChangeVarient(item)} + style={selectedStyle(item)} + > + {item} +
      • + ))} +
    +
    ))} -
-
- ))} - - ); + + ); } diff --git a/src/pages/components/animate/index.tsx b/src/pages/components/animate/index.tsx index 1bdb6e1..727114b 100644 --- a/src/pages/components/animate/index.tsx +++ b/src/pages/components/animate/index.tsx @@ -7,23 +7,23 @@ import Inview from './views/inview'; import ScrollView from './views/scroll'; export default function AnimatePage() { - const { colorPrimary } = useThemeToken(); - const TABS: TabsProps['items'] = [ - { key: 'inview', label: 'In View', children: }, - { key: 'scroll', label: 'Scroll', children: }, - { key: 'background', label: 'Background', children: }, - ]; + const { colorPrimary } = useThemeToken(); + const TABS: TabsProps['items'] = [ + { key: 'inview', label: 'In View', children: }, + { key: 'scroll', label: 'Scroll', children: }, + { key: 'background', label: 'Background', children: }, + ]; - return ( - <> - - https://www.framer.com/motion/ - - - - ); + return ( + <> + + https://www.framer.com/motion/ + + + + ); } diff --git a/src/pages/components/animate/views/background/container.tsx b/src/pages/components/animate/views/background/container.tsx index 1c6ce52..976ba41 100644 --- a/src/pages/components/animate/views/background/container.tsx +++ b/src/pages/components/animate/views/background/container.tsx @@ -7,29 +7,33 @@ import { getVariant } from '@/components/animate/variants'; import { useThemeToken } from '@/theme/hooks'; type Props = { - variant: string; + variant: string; }; export default function ContainerView({ variant }: Props) { - const { colorBgLayout } = useThemeToken(); - const varients = useMemo(() => getVariant(variant), [variant]); - const isKenburns = variant.includes('kenburns'); + const { colorBgLayout } = useThemeToken(); + const varients = useMemo(() => getVariant(variant), [variant]); + const isKenburns = variant.includes('kenburns'); - useEffect(() => { - console.log(varients); - }); - return ( -
- - {isKenburns ? ( - - ) : ( - - )} - -
- ); + useEffect(() => { + console.log(varients); + }); + return ( +
+ + {isKenburns ? ( + + ) : ( + + )} + +
+ ); } diff --git a/src/pages/components/animate/views/background/index.tsx b/src/pages/components/animate/views/background/index.tsx index 63b0e06..bf4479c 100644 --- a/src/pages/components/animate/views/background/index.tsx +++ b/src/pages/components/animate/views/background/index.tsx @@ -7,49 +7,49 @@ import ContainerView from './container'; import Toolbar from './toolbar'; export default function BackgroundView() { - const defaultValue = useMemo(() => { - return { - selectedVariant: 'kenburnsTop', - }; - }, []); - const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant); + const defaultValue = useMemo(() => { + return { + selectedVariant: 'kenburnsTop', + }; + }, []); + const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant); - const onRefresh = () => { - setSelectedVariant(defaultValue.selectedVariant); - }; - return ( - - - - - - - - - - - - setSelectedVariant(varient)} - /> - - - - ); + const onRefresh = () => { + setSelectedVariant(defaultValue.selectedVariant); + }; + return ( + + + + + + + + + + + + setSelectedVariant(varient)} + /> + + + + ); } const variantKey = [ - { - type: 'kenburns', - values: ['kenburnsTop', 'kenburnsBottom', 'kenburnsLeft', 'kenburnsRight'], - }, - { - type: 'pan', - values: ['panTop', 'panBottom', 'panLeft', 'panRight'], - }, - { - type: 'color change', - values: ['color2x', 'color3x', 'color4x', 'color5x'], - }, + { + type: 'kenburns', + values: ['kenburnsTop', 'kenburnsBottom', 'kenburnsLeft', 'kenburnsRight'], + }, + { + type: 'pan', + values: ['panTop', 'panBottom', 'panLeft', 'panRight'], + }, + { + type: 'color change', + values: ['color2x', 'color3x', 'color4x', 'color5x'], + }, ]; diff --git a/src/pages/components/animate/views/background/toolbar.tsx b/src/pages/components/animate/views/background/toolbar.tsx index 30e8b2d..cf27214 100644 --- a/src/pages/components/animate/views/background/toolbar.tsx +++ b/src/pages/components/animate/views/background/toolbar.tsx @@ -1,12 +1,12 @@ import { ReloadOutlined } from '@ant-design/icons'; type Props = { - onRefresh: VoidFunction; + onRefresh: VoidFunction; }; export default function Toolbar({ onRefresh }: Props) { - return ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/src/pages/components/animate/views/inview/container.tsx b/src/pages/components/animate/views/inview/container.tsx index ecf805b..9b0b1a6 100644 --- a/src/pages/components/animate/views/inview/container.tsx +++ b/src/pages/components/animate/views/inview/container.tsx @@ -9,47 +9,47 @@ import { useThemeToken } from '@/theme/hooks'; const TEXT = 'SlashAdmin'; type Props = { - isText: boolean; - isMulti: boolean; - variant: string; + isText: boolean; + isMulti: boolean; + variant: string; }; export default function ContainerView({ isText, variant, isMulti }: Props) { - const { colorBgLayout } = useThemeToken(); - const varients = useMemo(() => getVariant(variant), [variant]); - const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]); + const { colorBgLayout } = useThemeToken(); + const varients = useMemo(() => getVariant(variant), [variant]); + const imgs = useMemo(() => (isMulti ? repeat(Cover3, 5) : [Cover3]), [isMulti]); - return ( -
- {isText ? ( - - {TEXT.split('').map((letter, index) => ( - - {letter} - - ))} - - ) : ( - - {imgs.map((img, index) => ( - - ))} - - )} -
- ); + return ( +
+ {isText ? ( + + {TEXT.split('').map((letter, index) => ( + + {letter} + + ))} + + ) : ( + + {imgs.map((img, index) => ( + + ))} + + )} +
+ ); } diff --git a/src/pages/components/animate/views/inview/index.tsx b/src/pages/components/animate/views/inview/index.tsx index 89c120c..8eba0a3 100644 --- a/src/pages/components/animate/views/inview/index.tsx +++ b/src/pages/components/animate/views/inview/index.tsx @@ -7,109 +7,109 @@ import ContainerView from './container'; import Toolbar from './toolbar'; const variantKey = [ - { - type: 'slide in', - values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'], - }, - { - type: 'slide out', - values: ['slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight'], - }, - { - type: 'fade in', - values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'], - }, - { - type: 'fade out', - values: ['fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight'], - }, - { - type: 'zoom in', - values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'], - }, - { - type: 'zoom out', - values: ['zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight'], - }, - { - type: 'bounce in', - values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'], - }, - { - type: 'bounce out', - values: ['bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight'], - }, - { - type: 'flip in', - values: ['flipInX', 'flipInY'], - }, - { - type: 'flip out', - values: ['flipOutX', 'flipOutY'], - }, - { - type: 'scale in', - values: ['scaleInX', 'scaleInY'], - }, - { - type: 'scale out', - values: ['scaleOutX', 'scaleOutY'], - }, - { - type: 'rotate in', - values: ['rotateIn'], - }, - { - type: 'rotate out', - values: ['rotateOut'], - }, + { + type: 'slide in', + values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'], + }, + { + type: 'slide out', + values: ['slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight'], + }, + { + type: 'fade in', + values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'], + }, + { + type: 'fade out', + values: ['fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight'], + }, + { + type: 'zoom in', + values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'], + }, + { + type: 'zoom out', + values: ['zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight'], + }, + { + type: 'bounce in', + values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'], + }, + { + type: 'bounce out', + values: ['bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight'], + }, + { + type: 'flip in', + values: ['flipInX', 'flipInY'], + }, + { + type: 'flip out', + values: ['flipOutX', 'flipOutY'], + }, + { + type: 'scale in', + values: ['scaleInX', 'scaleInY'], + }, + { + type: 'scale out', + values: ['scaleOutX', 'scaleOutY'], + }, + { + type: 'rotate in', + values: ['rotateIn'], + }, + { + type: 'rotate out', + values: ['rotateOut'], + }, ]; export default function Inview() { - const defaultValue = useMemo(() => { - return { - isText: false, - isMulti: false, - selectedVariant: 'slideInUp', - }; - }, []); + const defaultValue = useMemo(() => { + return { + isText: false, + isMulti: false, + selectedVariant: 'slideInUp', + }; + }, []); - const [isText, setIsText] = useState(defaultValue.isText); - const [isMulti, setIsMulti] = useState(defaultValue.isMulti); + const [isText, setIsText] = useState(defaultValue.isText); + const [isMulti, setIsMulti] = useState(defaultValue.isMulti); - const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant); + const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant); - const onRefresh = () => { - setIsText(defaultValue.isText); - setIsMulti(defaultValue.isMulti); - setSelectedVariant(defaultValue.selectedVariant); - }; + const onRefresh = () => { + setIsText(defaultValue.isText); + setIsMulti(defaultValue.isMulti); + setSelectedVariant(defaultValue.selectedVariant); + }; - return ( - - - - setIsText(!isText)} - isMulti={isMulti} - onChangeMulti={() => setIsMulti(!isMulti)} - onRefresh={onRefresh} - /> - - - - - - - - setSelectedVariant(varient)} - /> - - - - ); + return ( + + + + setIsText(!isText)} + isMulti={isMulti} + onChangeMulti={() => setIsMulti(!isMulti)} + onRefresh={onRefresh} + /> + + + + + + + + setSelectedVariant(varient)} + /> + + + + ); } diff --git a/src/pages/components/animate/views/inview/toolbar.tsx b/src/pages/components/animate/views/inview/toolbar.tsx index eaaa592..6b0e37f 100644 --- a/src/pages/components/animate/views/inview/toolbar.tsx +++ b/src/pages/components/animate/views/inview/toolbar.tsx @@ -2,34 +2,34 @@ import { ReloadOutlined } from '@ant-design/icons'; import { Switch } from 'antd'; type Props = { - isText: boolean; - isMulti: boolean; - onChnageText: (isText: boolean) => void; - onChangeMulti: (isMulti: boolean) => void; - onRefresh: VoidFunction; + isText: boolean; + isMulti: boolean; + onChnageText: (isText: boolean) => void; + onChangeMulti: (isMulti: boolean) => void; + onRefresh: VoidFunction; }; export default function Toolbar({ - isText, - isMulti, - onChnageText, - onChangeMulti, - onRefresh, + isText, + isMulti, + onChnageText, + onChangeMulti, + onRefresh, }: Props) { - return ( -
-
- - Text Object -
-
- {isText ? null : ( -
- - Multi Item -
- )} - -
-
- ); + return ( +
+
+ + Text Object +
+
+ {isText ? null : ( +
+ + Multi Item +
+ )} + +
+
+ ); } diff --git a/src/pages/components/animate/views/scroll/container.tsx b/src/pages/components/animate/views/scroll/container.tsx index 56c2626..8c7a036 100644 --- a/src/pages/components/animate/views/scroll/container.tsx +++ b/src/pages/components/animate/views/scroll/container.tsx @@ -6,25 +6,25 @@ import { getVariant } from '@/components/animate/variants'; import { useThemeToken } from '@/theme/hooks'; type Props = { - variant: string; + variant: string; }; export default function ContainerView({ variant }: Props) { - const { colorBgLayout } = useThemeToken(); - const varients = useMemo(() => getVariant(variant), [variant]); + const { colorBgLayout } = useThemeToken(); + const varients = useMemo(() => getVariant(variant), [variant]); - return ( -
- {[...Array(40)].map((_, index) => ( - - - Item {index + 1} - - - ))} -
- ); + return ( +
+ {[...Array(40)].map((_, index) => ( + + + Item {index + 1} + + + ))} +
+ ); } diff --git a/src/pages/components/animate/views/scroll/index.tsx b/src/pages/components/animate/views/scroll/index.tsx index a99de34..0100e0f 100644 --- a/src/pages/components/animate/views/scroll/index.tsx +++ b/src/pages/components/animate/views/scroll/index.tsx @@ -7,66 +7,66 @@ import ContainerView from './container'; import Toolbar from './toolbar'; export default function ScrollView() { - const defaultValue = useMemo(() => { - return { - selectedVariant: 'slideInUp', - }; - }, []); - const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant); + const defaultValue = useMemo(() => { + return { + selectedVariant: 'slideInUp', + }; + }, []); + const [selectedVariant, setSelectedVariant] = useState(defaultValue.selectedVariant); - const onRefresh = () => { - setSelectedVariant(defaultValue.selectedVariant); - }; - return ( - - - - - - - - - - - - setSelectedVariant(varient)} - /> - - - - ); + const onRefresh = () => { + setSelectedVariant(defaultValue.selectedVariant); + }; + return ( + + + + + + + + + + + + setSelectedVariant(varient)} + /> + + + + ); } const variantKey = [ - { - type: 'slide', - values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'], - }, - { - type: 'fade', - values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'], - }, - { - type: 'zoom', - values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'], - }, - { - type: 'bounce', - values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'], - }, - { - type: 'flip', - values: ['flipInX', 'flipInY'], - }, - { - type: 'scale', - values: ['scaleInX', 'scaleInY'], - }, - { - type: 'rotate', - values: ['rotateIn'], - }, + { + type: 'slide', + values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'], + }, + { + type: 'fade', + values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'], + }, + { + type: 'zoom', + values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'], + }, + { + type: 'bounce', + values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'], + }, + { + type: 'flip', + values: ['flipInX', 'flipInY'], + }, + { + type: 'scale', + values: ['scaleInX', 'scaleInY'], + }, + { + type: 'rotate', + values: ['rotateIn'], + }, ]; diff --git a/src/pages/components/animate/views/scroll/toolbar.tsx b/src/pages/components/animate/views/scroll/toolbar.tsx index 30e8b2d..cf27214 100644 --- a/src/pages/components/animate/views/scroll/toolbar.tsx +++ b/src/pages/components/animate/views/scroll/toolbar.tsx @@ -1,12 +1,12 @@ import { ReloadOutlined } from '@ant-design/icons'; type Props = { - onRefresh: VoidFunction; + onRefresh: VoidFunction; }; export default function Toolbar({ onRefresh }: Props) { - return ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/src/pages/components/chart/index.tsx b/src/pages/components/chart/index.tsx index 29f6633..9c6e8c5 100644 --- a/src/pages/components/chart/index.tsx +++ b/src/pages/components/chart/index.tsx @@ -16,84 +16,84 @@ import ChartRadar from './view/chart-radar'; import ChartRadial from './view/chart-radial'; export default function ChartPage() { - const { colorPrimary } = useThemeToken(); - return ( - <> - - https://apexcharts.com - + const { colorPrimary } = useThemeToken(); + return ( + <> + + https://apexcharts.com + - - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - ); + + + + + + + + + + + + + ); } diff --git a/src/pages/components/chart/view/chart-area.tsx b/src/pages/components/chart/view/chart-area.tsx index c759eaf..4bd9c82 100644 --- a/src/pages/components/chart/view/chart-area.tsx +++ b/src/pages/components/chart/view/chart-area.tsx @@ -2,29 +2,29 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; const series = [ - { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] }, - { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] }, + { name: 'series1', data: [31, 40, 28, 51, 42, 109, 100] }, + { name: 'series2', data: [11, 32, 45, 32, 34, 52, 41] }, ]; export default function ChartArea() { - const chartOptions = useChart({ - xaxis: { - type: 'datetime', - categories: [ - '2018-09-19T00:00:00.000Z', - '2018-09-19T01:30:00.000Z', - '2018-09-19T02:30:00.000Z', - '2018-09-19T03:30:00.000Z', - '2018-09-19T04:30:00.000Z', - '2018-09-19T05:30:00.000Z', - '2018-09-19T06:30:00.000Z', - ], - }, - tooltip: { - x: { - format: 'dd/MM/yy HH:mm', - }, - }, - }); + const chartOptions = useChart({ + xaxis: { + type: 'datetime', + categories: [ + '2018-09-19T00:00:00.000Z', + '2018-09-19T01:30:00.000Z', + '2018-09-19T02:30:00.000Z', + '2018-09-19T03:30:00.000Z', + '2018-09-19T04:30:00.000Z', + '2018-09-19T05:30:00.000Z', + '2018-09-19T06:30:00.000Z', + ], + }, + tooltip: { + x: { + format: 'dd/MM/yy HH:mm', + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-bar.tsx b/src/pages/components/chart/view/chart-bar.tsx index 1984107..d6b6eef 100644 --- a/src/pages/components/chart/view/chart-bar.tsx +++ b/src/pages/components/chart/view/chart-bar.tsx @@ -4,26 +4,26 @@ import useChart from '@/components/chart/useChart'; const series = [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]; export default function ChartBar() { - const chartOptions = useChart({ - stroke: { show: false }, - plotOptions: { - bar: { horizontal: true, barHeight: '30%' }, - }, - xaxis: { - categories: [ - 'Italy', - 'Japan', - 'China', - 'Canada', - 'France', - 'Germany', - 'South Korea', - 'Netherlands', - 'United States', - 'United Kingdom', - ], - }, - }); + const chartOptions = useChart({ + stroke: { show: false }, + plotOptions: { + bar: { horizontal: true, barHeight: '30%' }, + }, + xaxis: { + categories: [ + 'Italy', + 'Japan', + 'China', + 'Canada', + 'France', + 'Germany', + 'South Korea', + 'Netherlands', + 'United States', + 'United Kingdom', + ], + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-column-Stacked.tsx b/src/pages/components/chart/view/chart-column-Stacked.tsx index c3ab8ad..c6ad339 100644 --- a/src/pages/components/chart/view/chart-column-Stacked.tsx +++ b/src/pages/components/chart/view/chart-column-Stacked.tsx @@ -2,46 +2,46 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; const series = [ - { name: 'Product A', data: [44, 55, 41, 67, 22, 43] }, - { name: 'Product B', data: [13, 23, 20, 8, 13, 27] }, - { name: 'Product C', data: [11, 17, 15, 15, 21, 14] }, - { name: 'Product D', data: [21, 7, 25, 13, 22, 8] }, + { name: 'Product A', data: [44, 55, 41, 67, 22, 43] }, + { name: 'Product B', data: [13, 23, 20, 8, 13, 27] }, + { name: 'Product C', data: [11, 17, 15, 15, 21, 14] }, + { name: 'Product D', data: [21, 7, 25, 13, 22, 8] }, ]; export default function ChartColumnStacked() { - const chartOptions = useChart({ - chart: { - stacked: true, - zoom: { - enabled: true, - }, - }, - legend: { - itemMargin: { - vertical: 8, - }, - position: 'right', - offsetY: 20, - }, - plotOptions: { - bar: { - columnWidth: '16%', - }, - }, - stroke: { - show: false, - }, - xaxis: { - type: 'datetime', - categories: [ - '01/01/2011 GMT', - '01/02/2011 GMT', - '01/03/2011 GMT', - '01/04/2011 GMT', - '01/05/2011 GMT', - '01/06/2011 GMT', - ], - }, - }); + const chartOptions = useChart({ + chart: { + stacked: true, + zoom: { + enabled: true, + }, + }, + legend: { + itemMargin: { + vertical: 8, + }, + position: 'right', + offsetY: 20, + }, + plotOptions: { + bar: { + columnWidth: '16%', + }, + }, + stroke: { + show: false, + }, + xaxis: { + type: 'datetime', + categories: [ + '01/01/2011 GMT', + '01/02/2011 GMT', + '01/03/2011 GMT', + '01/04/2011 GMT', + '01/05/2011 GMT', + '01/06/2011 GMT', + ], + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-column-multiple.tsx b/src/pages/components/chart/view/chart-column-multiple.tsx index 01fe89a..50fd3e3 100644 --- a/src/pages/components/chart/view/chart-column-multiple.tsx +++ b/src/pages/components/chart/view/chart-column-multiple.tsx @@ -2,32 +2,32 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; const series = [ - { - name: 'Net Profit', - data: [44, 55, 57, 56, 61, 58, 63, 60, 66], - }, - { - name: 'Revenue', - data: [76, 85, 101, 98, 87, 105, 91, 114, 94], - }, -]; -export default function ChartColumnMultiple() { - const chartOptions = useChart({ - stroke: { - show: true, - width: 2, - colors: ['transparent'], - }, - xaxis: { - categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], + { + name: 'Net Profit', + data: [44, 55, 57, 56, 61, 58, 63, 60, 66], }, - tooltip: { - y: { - formatter: (value: number) => `$ ${value} thousands`, - }, + { + name: 'Revenue', + data: [76, 85, 101, 98, 87, 105, 91, 114, 94], }, - plotOptions: { bar: { columnWidth: '36%' } }, - }); +]; +export default function ChartColumnMultiple() { + const chartOptions = useChart({ + stroke: { + show: true, + width: 2, + colors: ['transparent'], + }, + xaxis: { + categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], + }, + tooltip: { + y: { + formatter: (value: number) => `$ ${value} thousands`, + }, + }, + plotOptions: { bar: { columnWidth: '36%' } }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-column-negative.tsx b/src/pages/components/chart/view/chart-column-negative.tsx index 637e372..a234cd8 100644 --- a/src/pages/components/chart/view/chart-column-negative.tsx +++ b/src/pages/components/chart/view/chart-column-negative.tsx @@ -3,74 +3,74 @@ import useChart from '@/components/chart/useChart'; import { useThemeToken } from '@/theme/hooks'; const series = [ - { - name: 'Cash Flow', - data: [ - 1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07, 5.8, 2, - 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6, -41.1, -39.6, - -37.6, -29.4, -21.4, -2.4, - ], - }, + { + name: 'Cash Flow', + data: [ + 1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07, + 5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6, + -41.1, -39.6, -37.6, -29.4, -21.4, -2.4, + ], + }, ]; export default function ChartColumnNegative() { - const theme = useThemeToken(); - const chartOptions = useChart({ - stroke: { show: false }, - yaxis: { - labels: { - formatter: (value: number) => `${value.toFixed(0)}%`, - }, - }, - xaxis: { - type: 'datetime', - categories: [ - '2011-01-01', - '2011-02-01', - '2011-03-01', - '2011-04-01', - '2011-05-01', - '2011-06-01', - '2011-07-01', - '2011-08-01', - '2011-09-01', - '2011-10-01', - '2011-11-01', - '2011-12-01', - '2012-01-01', - '2012-02-01', - '2012-03-01', - '2012-04-01', - '2012-05-01', - '2012-06-01', - '2012-07-01', - '2012-08-01', - '2012-09-01', - '2012-10-01', - '2012-11-01', - '2012-12-01', - '2013-01-01', - '2013-02-01', - '2013-03-01', - '2013-04-01', - '2013-05-01', - '2013-06-01', - '2013-07-01', - '2013-08-01', - '2013-09-01', - ], - }, - plotOptions: { - bar: { - columnWidth: '58%', - colors: { - ranges: [ - { from: -100, to: -46, color: theme.colorWarning }, - { from: -45, to: 0, color: theme.colorInfo }, - ], + const theme = useThemeToken(); + const chartOptions = useChart({ + stroke: { show: false }, + yaxis: { + labels: { + formatter: (value: number) => `${value.toFixed(0)}%`, + }, }, - }, - }, - }); + xaxis: { + type: 'datetime', + categories: [ + '2011-01-01', + '2011-02-01', + '2011-03-01', + '2011-04-01', + '2011-05-01', + '2011-06-01', + '2011-07-01', + '2011-08-01', + '2011-09-01', + '2011-10-01', + '2011-11-01', + '2011-12-01', + '2012-01-01', + '2012-02-01', + '2012-03-01', + '2012-04-01', + '2012-05-01', + '2012-06-01', + '2012-07-01', + '2012-08-01', + '2012-09-01', + '2012-10-01', + '2012-11-01', + '2012-12-01', + '2013-01-01', + '2013-02-01', + '2013-03-01', + '2013-04-01', + '2013-05-01', + '2013-06-01', + '2013-07-01', + '2013-08-01', + '2013-09-01', + ], + }, + plotOptions: { + bar: { + columnWidth: '58%', + colors: { + ranges: [ + { from: -100, to: -46, color: theme.colorWarning }, + { from: -45, to: 0, color: theme.colorInfo }, + ], + }, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-column-single.tsx b/src/pages/components/chart/view/chart-column-single.tsx index bd71d4e..5413d71 100644 --- a/src/pages/components/chart/view/chart-column-single.tsx +++ b/src/pages/components/chart/view/chart-column-single.tsx @@ -3,24 +3,24 @@ import useChart from '@/components/chart/useChart'; const series = [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }]; export default function ChartColumnSingle() { - const chartOptions = useChart({ - plotOptions: { - bar: { - columnWidth: '16%', - }, - }, - stroke: { - show: false, - }, - xaxis: { - categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], - }, - tooltip: { - y: { - formatter: (value: number) => `$ ${value} thousands`, - }, - }, - }); + const chartOptions = useChart({ + plotOptions: { + bar: { + columnWidth: '16%', + }, + }, + stroke: { + show: false, + }, + xaxis: { + categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], + }, + tooltip: { + y: { + formatter: (value: number) => `$ ${value} thousands`, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-donut.tsx b/src/pages/components/chart/view/chart-donut.tsx index aad488a..89f01ab 100644 --- a/src/pages/components/chart/view/chart-donut.tsx +++ b/src/pages/components/chart/view/chart-donut.tsx @@ -3,25 +3,25 @@ import useChart from '@/components/chart/useChart'; const series = [44, 55, 13, 43]; export default function ChartDonut() { - const chartOptions = useChart({ - labels: ['Apple', 'Mango', 'Orange', 'Watermelon'], - stroke: { - show: false, - }, - legend: { - horizontalAlign: 'center', - }, - tooltip: { - fillSeriesColor: false, - }, - plotOptions: { - pie: { - donut: { - size: '90%', + const chartOptions = useChart({ + labels: ['Apple', 'Mango', 'Orange', 'Watermelon'], + stroke: { + show: false, }, - }, - }, - }); + legend: { + horizontalAlign: 'center', + }, + tooltip: { + fillSeriesColor: false, + }, + plotOptions: { + pie: { + donut: { + size: '90%', + }, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-line.tsx b/src/pages/components/chart/view/chart-line.tsx index 1e1994a..173cb61 100644 --- a/src/pages/components/chart/view/chart-line.tsx +++ b/src/pages/components/chart/view/chart-line.tsx @@ -2,23 +2,23 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; const series = [ - { - name: 'Desktops', - data: [10, 41, 35, 51, 49, 62, 69, 91, 148], - }, + { + name: 'Desktops', + data: [10, 41, 35, 51, 49, 62, 69, 91, 148], + }, ]; export default function ChartLine() { - const chartOptions = useChart({ - xaxis: { - categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], - }, - tooltip: { - x: { - show: false, - }, - marker: { show: false }, - }, - }); + const chartOptions = useChart({ + xaxis: { + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], + }, + tooltip: { + x: { + show: false, + }, + marker: { show: false }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-mixed.tsx b/src/pages/components/chart/view/chart-mixed.tsx index 6d925ae..624f288 100644 --- a/src/pages/components/chart/view/chart-mixed.tsx +++ b/src/pages/components/chart/view/chart-mixed.tsx @@ -2,67 +2,67 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; const series = [ - { - name: 'Team A', - type: 'column', - data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30], - }, - { - name: 'Team B', - type: 'area', - data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43], - }, - { - name: 'Team C', - type: 'line', - data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39], - }, -]; - -export default function ChartMixed() { - const chartOptions = useChart({ - stroke: { - width: [0, 2, 3], - }, - plotOptions: { - bar: { columnWidth: '20%' }, + { + name: 'Team A', + type: 'column', + data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30], }, - fill: { - type: ['solid', 'gradient', 'solid'], + { + name: 'Team B', + type: 'area', + data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43], }, - labels: [ - '01/01/2003', - '02/01/2003', - '03/01/2003', - '04/01/2003', - '05/01/2003', - '06/01/2003', - '07/01/2003', - '08/01/2003', - '09/01/2003', - '10/01/2003', - '11/01/2003', - ], - xaxis: { - type: 'datetime', + { + name: 'Team C', + type: 'line', + data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39], }, - yaxis: { - title: { text: 'Points' }, - min: 0, - }, - tooltip: { - shared: true, - intersect: false, - y: { - formatter: (value: number) => { - if (typeof value !== 'undefined') { - return `${value.toFixed(0)} points`; - } - return value; +]; + +export default function ChartMixed() { + const chartOptions = useChart({ + stroke: { + width: [0, 2, 3], }, - }, - }, - }); + plotOptions: { + bar: { columnWidth: '20%' }, + }, + fill: { + type: ['solid', 'gradient', 'solid'], + }, + labels: [ + '01/01/2003', + '02/01/2003', + '03/01/2003', + '04/01/2003', + '05/01/2003', + '06/01/2003', + '07/01/2003', + '08/01/2003', + '09/01/2003', + '10/01/2003', + '11/01/2003', + ], + xaxis: { + type: 'datetime', + }, + yaxis: { + title: { text: 'Points' }, + min: 0, + }, + tooltip: { + shared: true, + intersect: false, + y: { + formatter: (value: number) => { + if (typeof value !== 'undefined') { + return `${value.toFixed(0)} points`; + } + return value; + }, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-pie.tsx b/src/pages/components/chart/view/chart-pie.tsx index ab8a7ac..5975609 100644 --- a/src/pages/components/chart/view/chart-pie.tsx +++ b/src/pages/components/chart/view/chart-pie.tsx @@ -3,33 +3,33 @@ import useChart from '@/components/chart/useChart'; const series = [44, 55, 13, 43]; export default function ChartPie() { - const chartOptions = useChart({ - labels: ['America', 'Asia', 'Europe', 'Africa'], - legend: { - horizontalAlign: 'center', - }, - stroke: { - show: false, - }, - dataLabels: { - enabled: true, - dropShadow: { - enabled: false, - }, - }, - tooltip: { - fillSeriesColor: false, - }, - plotOptions: { - pie: { - donut: { - labels: { + const chartOptions = useChart({ + labels: ['America', 'Asia', 'Europe', 'Africa'], + legend: { + horizontalAlign: 'center', + }, + stroke: { show: false, - }, }, - }, - }, - }); + dataLabels: { + enabled: true, + dropShadow: { + enabled: false, + }, + }, + tooltip: { + fillSeriesColor: false, + }, + plotOptions: { + pie: { + donut: { + labels: { + show: false, + }, + }, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-radar.tsx b/src/pages/components/chart/view/chart-radar.tsx index 78f84be..cba33ad 100644 --- a/src/pages/components/chart/view/chart-radar.tsx +++ b/src/pages/components/chart/view/chart-radar.tsx @@ -3,42 +3,42 @@ import useChart from '@/components/chart/useChart'; import { useThemeToken } from '@/theme/hooks'; const series = [ - { - name: 'Series 1', - data: [80, 50, 30, 40, 100, 20], - }, - { - name: 'Series 2', - data: [20, 30, 40, 80, 20, 80], - }, - { - name: 'Series 3', - data: [44, 76, 78, 13, 43, 10], - }, -]; -export default function ChartRadar() { - const { colorText } = useThemeToken(); - const chartOptions = useChart({ - stroke: { - width: 2, + { + name: 'Series 1', + data: [80, 50, 30, 40, 100, 20], }, - fill: { - opacity: 0.48, + { + name: 'Series 2', + data: [20, 30, 40, 80, 20, 80], }, - legend: { - floating: true, - position: 'bottom', - horizontalAlign: 'center', + { + name: 'Series 3', + data: [44, 76, 78, 13, 43, 10], }, - xaxis: { - categories: ['2011', '2012', '2013', '2014', '2015', '2016'], - labels: { - style: { - colors: [colorText, colorText, colorText, colorText, colorText, colorText], +]; +export default function ChartRadar() { + const { colorText } = useThemeToken(); + const chartOptions = useChart({ + stroke: { + width: 2, }, - }, - }, - }); + fill: { + opacity: 0.48, + }, + legend: { + floating: true, + position: 'bottom', + horizontalAlign: 'center', + }, + xaxis: { + categories: ['2011', '2012', '2013', '2014', '2015', '2016'], + labels: { + style: { + colors: [colorText, colorText, colorText, colorText, colorText, colorText], + }, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/chart/view/chart-radial.tsx b/src/pages/components/chart/view/chart-radial.tsx index 47aebfe..5324d4b 100644 --- a/src/pages/components/chart/view/chart-radial.tsx +++ b/src/pages/components/chart/view/chart-radial.tsx @@ -4,34 +4,34 @@ import { fNumber } from '@/utils/format-number'; const series = [44, 55]; export default function ChartRadial() { - const chartOptions = useChart({ - chart: { - sparkline: { - enabled: true, - }, - }, - labels: ['Apples', 'Oranges'], - legend: { - floating: true, - position: 'bottom', - horizontalAlign: 'center', - }, - plotOptions: { - radialBar: { - hollow: { - size: '68%', + const chartOptions = useChart({ + chart: { + sparkline: { + enabled: true, + }, }, - dataLabels: { - value: { - offsetY: 16, - }, - total: { - formatter: () => fNumber(2324), - }, + labels: ['Apples', 'Oranges'], + legend: { + floating: true, + position: 'bottom', + horizontalAlign: 'center', }, - }, - }, - }); + plotOptions: { + radialBar: { + hollow: { + size: '68%', + }, + dataLabels: { + value: { + offsetY: 16, + }, + total: { + formatter: () => fNumber(2324), + }, + }, + }, + }, + }); - return ; + return ; } diff --git a/src/pages/components/editor/index.tsx b/src/pages/components/editor/index.tsx index da8e08a..029c451 100644 --- a/src/pages/components/editor/index.tsx +++ b/src/pages/components/editor/index.tsx @@ -5,26 +5,26 @@ import Editor from '@/components/editor'; import { useThemeToken } from '@/theme/hooks'; export default function EditorPage() { - const [quillSimple, setQuillSimple] = useState(''); - const [quillFull, setQuillFull] = useState(''); - const { colorPrimary } = useThemeToken(); + const [quillSimple, setQuillSimple] = useState(''); + const [quillFull, setQuillFull] = useState(''); + const { colorPrimary } = useThemeToken(); - return ( - <> - - https://github.com/zenoamaro/react-quill - - - - -
- - - - - ); + return ( + <> + + https://github.com/zenoamaro/react-quill + + + + +
+ + + + + ); } diff --git a/src/pages/components/icon/index.tsx b/src/pages/components/icon/index.tsx index 71b4d66..94ca1e2 100644 --- a/src/pages/components/icon/index.tsx +++ b/src/pages/components/icon/index.tsx @@ -5,66 +5,86 @@ import { Iconify, SvgIcon } from '@/components/icon'; import { useThemeToken } from '@/theme/hooks'; export default function IconPage() { - const { colorPrimary, colorInfo, colorSuccess, colorWarning, colorError } = useThemeToken(); - return ( - - - For more info - - click here - + const { colorPrimary, colorInfo, colorSuccess, colorWarning, colorError } = useThemeToken(); + return ( + + + For more info + + click here + -

- {`import { StepBackwardOutlined } from '@ant-design/icons';`} - {` `} -

+

+ {`import { StepBackwardOutlined } from '@ant-design/icons';`} + {` `} +

-
- -
- - - Simply beautiful open source icons. For more info - - click here - +
+ +
+ + + Simply beautiful open source icons. For more info + + click here + -

- {` `} -

+

+ {` `} +

-
- - - - - -
- - - For more info - - click here - +
+ + + + + +
+ + + For more info + + click here + -

- {``} -

+

+ {``} +

-
- - - - - -
- - - ); +
+ + + + + +
+ + + ); } diff --git a/src/pages/components/markdown/index.tsx b/src/pages/components/markdown/index.tsx index 9256e61..04b11f7 100644 --- a/src/pages/components/markdown/index.tsx +++ b/src/pages/components/markdown/index.tsx @@ -67,20 +67,20 @@ ReactDOM.render( `; export default function MarkdownPage() { - const [content] = useState(TEXT); - const { colorPrimary } = useThemeToken(); - return ( - <> - - https://github.com/remarkjs/react-markdown - - - {content} - - - ); + const [content] = useState(TEXT); + const { colorPrimary } = useThemeToken(); + return ( + <> + + https://github.com/remarkjs/react-markdown + + + {content} + + + ); } diff --git a/src/pages/components/multi-language/index.tsx b/src/pages/components/multi-language/index.tsx index 634da2a..b5d93cd 100644 --- a/src/pages/components/multi-language/index.tsx +++ b/src/pages/components/multi-language/index.tsx @@ -7,37 +7,40 @@ import { useThemeToken } from '@/theme/hooks'; import { LocalEnum } from '#/enum'; export default function MultiLanguagePage() { - const { - setLocale, - locale, - language: { icon, label }, - } = useLocale(); + const { + setLocale, + locale, + language: { icon, label }, + } = useLocale(); - const { colorPrimary } = useThemeToken(); + const { colorPrimary } = useThemeToken(); - return ( - - - https://www.i18next.com - - - https://ant.design/docs/react/i18n-cn - - - setLocale(e.target.value)} value={locale}> - English - Chinese - + return ( + + + https://www.i18next.com + + + https://ant.design/docs/react/i18n-cn + + + setLocale(e.target.value)} value={locale}> + English + Chinese + -
- - {label} -
- +
+ + {label} +
+ - - - - - ); + + + + + ); } diff --git a/src/pages/components/scroll/index.tsx b/src/pages/components/scroll/index.tsx index 31f7a07..f54eae9 100644 --- a/src/pages/components/scroll/index.tsx +++ b/src/pages/components/scroll/index.tsx @@ -4,10 +4,10 @@ import ScrollbarView from './views/scroll-bar'; import ScrollProgressView from './views/scroll-progress'; export default function ScrollPage() { - const TABS: TabsProps['items'] = [ - { key: 'scrollbar', label: 'Scrollbar', children: }, - { key: 'scroll-progress', label: 'ScrollProgress', children: }, - ]; + const TABS: TabsProps['items'] = [ + { key: 'scrollbar', label: 'Scrollbar', children: }, + { key: 'scroll-progress', label: 'ScrollProgress', children: }, + ]; - return ; + return ; } diff --git a/src/pages/components/scroll/views/scroll-bar/index.tsx b/src/pages/components/scroll/views/scroll-bar/index.tsx index 0eef12a..df4d95b 100644 --- a/src/pages/components/scroll/views/scroll-bar/index.tsx +++ b/src/pages/components/scroll/views/scroll-bar/index.tsx @@ -6,32 +6,32 @@ import { useThemeToken } from '@/theme/hooks'; const TEXT = faker.lorem.paragraphs({ min: 20, max: 30 }); export default function ScrollbarView() { - const { colorPrimary } = useThemeToken(); - return ( - <> - - https://grsmto.github.io/simplebar/ - - - - -
- {TEXT} -
- - - - - -
{TEXT}
- - - - - - ); + const { colorPrimary } = useThemeToken(); + return ( + <> + + https://grsmto.github.io/simplebar/ + + + + +
+ {TEXT} +
+ + + + + +
{TEXT}
+ + + + + + ); } diff --git a/src/pages/components/scroll/views/scroll-progress/index.tsx b/src/pages/components/scroll/views/scroll-progress/index.tsx index d4aaae6..2376ad9 100644 --- a/src/pages/components/scroll/views/scroll-progress/index.tsx +++ b/src/pages/components/scroll/views/scroll-progress/index.tsx @@ -8,27 +8,27 @@ import { useThemeToken } from '@/theme/hooks'; const TEXT = faker.lorem.paragraphs({ min: 20, max: 30 }); export default function ScrollProgressView() { - const containerRef = useRef(null); - const containerScroll = useScroll({ container: containerRef }); + const containerRef = useRef(null); + const containerScroll = useScroll({ container: containerRef }); - const { colorPrimary } = useThemeToken(); - return ( - <> - - https://www.framer.com/motion/ - - - -
- {[...Array(4)].map((_, index) => ( -
{TEXT}
- ))} -
- - - ); + const { colorPrimary } = useThemeToken(); + return ( + <> + + https://www.framer.com/motion/ + + + +
+ {[...Array(4)].map((_, index) => ( +
{TEXT}
+ ))} +
+ + + ); } diff --git a/src/pages/components/upload/index.tsx b/src/pages/components/upload/index.tsx index 9791bfe..b348b11 100644 --- a/src/pages/components/upload/index.tsx +++ b/src/pages/components/upload/index.tsx @@ -5,61 +5,61 @@ import { Iconify } from '@/components/icon'; import { Upload, UploadAvatar, UploadBox } from '@/components/upload'; export default function UploadPage() { - const [thumbnail, setThumbnail] = useState(false); + const [thumbnail, setThumbnail] = useState(false); - const onChange = (checked: boolean) => { - setThumbnail(checked); - }; + const onChange = (checked: boolean) => { + setThumbnail(checked); + }; - const ThumbnailSwitch = ; + const ThumbnailSwitch = ; - const boxPlaceHolder = ( -
- - - Upload File - -
- ); - const UploadFileTab = ( - - - - - - - - - ); - const UploadAvatarTab = ( - - - - ); - const UploadBoxTab = ( - - - - - - - - - ); + const boxPlaceHolder = ( +
+ + + Upload File + +
+ ); + const UploadFileTab = ( + + + + + + + + + ); + const UploadAvatarTab = ( + + + + ); + const UploadBoxTab = ( + + + + + + + + + ); - const TABS: TabsProps['items'] = [ - { key: 'upload--file', label: 'Upload Single File', children: UploadFileTab }, - { key: 'upload-avatar', label: 'Upload Avatar', children: UploadAvatarTab }, - { key: 'upload-box', label: 'Upload Box', children: UploadBoxTab }, - ]; + const TABS: TabsProps['items'] = [ + { key: 'upload--file', label: 'Upload Single File', children: UploadFileTab }, + { key: 'upload-avatar', label: 'Upload Avatar', children: UploadAvatarTab }, + { key: 'upload-box', label: 'Upload Box', children: UploadBoxTab }, + ]; - return ; + return ; } diff --git a/src/pages/dashboard/analysis/analysis-card.tsx b/src/pages/dashboard/analysis/analysis-card.tsx index 7736ca6..a50614e 100644 --- a/src/pages/dashboard/analysis/analysis-card.tsx +++ b/src/pages/dashboard/analysis/analysis-card.tsx @@ -1,23 +1,23 @@ import { CSSProperties } from 'react'; type Props = { - cover: string; - subtitle: string; - title: string; - style?: CSSProperties; + cover: string; + subtitle: string; + title: string; + style?: CSSProperties; }; export default function AnalysisCard({ cover, subtitle, title, style }: Props) { - return ( -
- - {title} - {subtitle} -
- ); + return ( +
+ + {title} + {subtitle} +
+ ); } diff --git a/src/pages/dashboard/analysis/analysis-news.tsx b/src/pages/dashboard/analysis/analysis-news.tsx index c6b58d0..d1f3c9d 100644 --- a/src/pages/dashboard/analysis/analysis-news.tsx +++ b/src/pages/dashboard/analysis/analysis-news.tsx @@ -2,34 +2,36 @@ import { faker } from '@faker-js/faker'; import { List, Avatar } from 'antd'; const data = [ - { - title: faker.lorem.words(), - }, - { - title: faker.lorem.words(), - }, - { - title: faker.lorem.words(), - }, - { - title: faker.lorem.words(), - }, + { + title: faker.lorem.words(), + }, + { + title: faker.lorem.words(), + }, + { + title: faker.lorem.words(), + }, + { + title: faker.lorem.words(), + }, ]; export default function AnalysisNews() { - return ( - ( - - } - title={item.title} - description={faker.lorem.sentence()} - /> - - )} - /> - ); + return ( + ( + + + } + title={item.title} + description={faker.lorem.sentence()} + /> + + )} + /> + ); } diff --git a/src/pages/dashboard/analysis/analysis-order-timeline.tsx b/src/pages/dashboard/analysis/analysis-order-timeline.tsx index c8abe6b..a6be761 100644 --- a/src/pages/dashboard/analysis/analysis-order-timeline.tsx +++ b/src/pages/dashboard/analysis/analysis-order-timeline.tsx @@ -3,66 +3,66 @@ import { Timeline, Typography } from 'antd'; import { useThemeToken } from '@/theme/hooks'; export default function AnalysisOrderTimeline() { - const theme = useThemeToken(); - return ( - - 1983, orders,$4220 - - 08 Oct 2023 7:19 PM - -
- ), - }, - { - color: theme.colorPrimaryActive, - children: ( -
- 12 Invoices have been paid - - 07 Oct 2023 6:19 PM - -
- ), - }, - { - color: theme.colorInfo, - children: ( -
- Order #37745 from September - - 06 Oct 2023 5:19 PM - -
- ), - }, - { - color: theme.colorWarning, - children: ( -
- New order placed #XF-2356 - - 05 Oct 2023 4:19 PM - -
- ), - }, - { - color: theme.colorError, - children: ( -
- New order placed #XF-2346 - - 04 Oct 2023 3:19 PM - -
- ), - }, - ]} - /> - ); + const theme = useThemeToken(); + return ( + + 1983, orders,$4220 + + 08 Oct 2023 7:19 PM + +
+ ), + }, + { + color: theme.colorPrimaryActive, + children: ( +
+ 12 Invoices have been paid + + 07 Oct 2023 6:19 PM + +
+ ), + }, + { + color: theme.colorInfo, + children: ( +
+ Order #37745 from September + + 06 Oct 2023 5:19 PM + +
+ ), + }, + { + color: theme.colorWarning, + children: ( +
+ New order placed #XF-2356 + + 05 Oct 2023 4:19 PM + +
+ ), + }, + { + color: theme.colorError, + children: ( +
+ New order placed #XF-2346 + + 04 Oct 2023 3:19 PM + +
+ ), + }, + ]} + /> + ); } diff --git a/src/pages/dashboard/analysis/analysis-tasks.tsx b/src/pages/dashboard/analysis/analysis-tasks.tsx index e2f381d..947d8b9 100644 --- a/src/pages/dashboard/analysis/analysis-tasks.tsx +++ b/src/pages/dashboard/analysis/analysis-tasks.tsx @@ -4,45 +4,45 @@ import { List, Checkbox } from 'antd'; import { IconButton, Iconify } from '@/components/icon'; export default function AnalysisTasks() { - const data = [ - { - task: faker.lorem.words(), - checked: false, - }, - { - task: faker.lorem.words(), - checked: true, - }, - { - task: faker.lorem.words(), - checked: false, - }, - { - task: faker.lorem.words(), - checked: false, - }, - ]; - return ( - ( - - - , - ]} - > - { - item.checked = e.target.checked; - }} - > - {item.task} - - - )} - /> - ); + const data = [ + { + task: faker.lorem.words(), + checked: false, + }, + { + task: faker.lorem.words(), + checked: true, + }, + { + task: faker.lorem.words(), + checked: false, + }, + { + task: faker.lorem.words(), + checked: false, + }, + ]; + return ( + ( + + + , + ]} + > + { + item.checked = e.target.checked; + }} + > + {item.task} + + + )} + /> + ); } diff --git a/src/pages/dashboard/analysis/analysis-traffic-card.tsx b/src/pages/dashboard/analysis/analysis-traffic-card.tsx index e044c40..a295d20 100644 --- a/src/pages/dashboard/analysis/analysis-traffic-card.tsx +++ b/src/pages/dashboard/analysis/analysis-traffic-card.tsx @@ -3,25 +3,25 @@ import { ReactNode } from 'react'; import { useThemeToken } from '@/theme/hooks'; type Props = { - icon: ReactNode; - title: string; - subtitle: string; + icon: ReactNode; + title: string; + subtitle: string; }; export default function AnalysisTrafficCard({ icon, title, subtitle }: Props) { - const theme = useThemeToken(); - return ( -
-
{icon}
- {title} - - {subtitle} - -
- ); + const theme = useThemeToken(); + return ( +
+
{icon}
+ {title} + + {subtitle} + +
+ ); } diff --git a/src/pages/dashboard/analysis/index.tsx b/src/pages/dashboard/analysis/index.tsx index 84c6a61..d9506de 100644 --- a/src/pages/dashboard/analysis/index.tsx +++ b/src/pages/dashboard/analysis/index.tsx @@ -19,155 +19,177 @@ import AnalysisTasks from './analysis-tasks'; import AnalysisTrafficCard from './analysis-traffic-card'; function Analysis() { - const theme = useThemeToken(); - return ( - <> - Hi, Welcome back 👋 - - - - - - - - - - - - - - + const theme = useThemeToken(); + return ( + <> + Hi, Welcome back 👋 + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - - - - - - - + + + + + + } + title="1.95k" + subtitle="FaceBook" + /> + - - - - - - } - title="1.95k" - subtitle="FaceBook" - /> - + + + } + title="9.12k" + subtitle="Google" + /> + - - } - title="9.12k" - subtitle="Google" - /> - + + + } + title="6.98k" + subtitle="Linkedin" + /> + - - } - title="6.98k" - subtitle="Linkedin" - /> - + + + } + title="8.49k" + subtitle="Twitter" + /> + + + + - - } - title="8.49k" - subtitle="Twitter" - /> - + + + + + - - - - - - - - - - - ); + + ); } export default Analysis; diff --git a/src/pages/dashboard/workbench/area-download.tsx b/src/pages/dashboard/workbench/area-download.tsx index a7d00cc..f84e6de 100644 --- a/src/pages/dashboard/workbench/area-download.tsx +++ b/src/pages/dashboard/workbench/area-download.tsx @@ -6,60 +6,60 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; export default function AreaDownload() { - const [year, setYear] = useState('2023'); - const series: Record = { - '2022': [ - { name: 'China', data: [10, 41, 35, 51, 49, 61, 69, 91, 148, 35, 51] }, - { name: 'America', data: [10, 34, 13, 56, 77, 88, 99, 45, 13, 56, 77] }, - ], + const [year, setYear] = useState('2023'); + const series: Record = { + '2022': [ + { name: 'China', data: [10, 41, 35, 51, 49, 61, 69, 91, 148, 35, 51] }, + { name: 'America', data: [10, 34, 13, 56, 77, 88, 99, 45, 13, 56, 77] }, + ], - '2023': [ - { name: 'China', data: [51, 35, 41, 10, 91, 69, 62, 148, 91, 35, 51] }, - { name: 'America', data: [56, 13, 34, 10, 77, 99, 88, 45, 13, 56, 77] }, - ], - }; - return ( - -
- Area Installed - setYear(value)} + options={[ + { value: 2023, label: '2023' }, + { value: 2022, label: '2022' }, + ]} + /> +
+
+ +
+ + ); } function ChartArea({ series }: { series: ApexAxisChartSeries }) { - const chartOptions = useChart({ - xaxis: { - type: 'category', - categories: [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jut', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ], - }, - tooltip: {}, - }); + const chartOptions = useChart({ + xaxis: { + type: 'category', + categories: [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jut', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ], + }, + tooltip: {}, + }); - return ; + return ; } diff --git a/src/pages/dashboard/workbench/banner-card.tsx b/src/pages/dashboard/workbench/banner-card.tsx index cbcb8af..f5bd4be 100644 --- a/src/pages/dashboard/workbench/banner-card.tsx +++ b/src/pages/dashboard/workbench/banner-card.tsx @@ -6,250 +6,250 @@ import { useUserInfo } from '@/store/userStore'; import { useThemeToken } from '@/theme/hooks'; export default function BannerCard() { - const { account } = useUserInfo(); - const themeToken = useThemeToken(); + const { account } = useUserInfo(); + const themeToken = useThemeToken(); - const bg = `linear-gradient(135deg, ${Color(themeToken.colorPrimaryHover).alpha(0.2)}, ${Color( - themeToken.colorPrimary, - ).alpha(0.2)}) rgb(255, 255, 255)`; + const bg = `linear-gradient(135deg, ${Color(themeToken.colorPrimaryHover).alpha(0.2)}, ${Color( + themeToken.colorPrimary, + ).alpha(0.2)}) rgb(255, 255, 255)`; - return ( - - -
-

Welcome back 👋

-

{account}

-
-

- If you are going to use a passage of Lorem Ipsum, you need to be sure there is not - anything. -

- - + +
+

Welcome back 👋

+

{account}

+
+

+ If you are going to use a passage of Lorem Ipsum, you need to be sure there is + not anything. +

+ + - - - - - ); + + + + + ); } function BannerSvg() { - const { colorPrimary, colorPrimaryActive, colorPrimaryHover } = useThemeToken(); - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + const { colorPrimary, colorPrimaryActive, colorPrimaryHover } = useThemeToken(); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/pages/dashboard/workbench/carousel-card.tsx b/src/pages/dashboard/workbench/carousel-card.tsx index 1aa59cd..2e6a92a 100644 --- a/src/pages/dashboard/workbench/carousel-card.tsx +++ b/src/pages/dashboard/workbench/carousel-card.tsx @@ -1,28 +1,28 @@ import { Carousel } from 'antd'; export default function CarouselCard() { - const contentStyle: React.CSSProperties = { - margin: 0, - height: '160px', - color: '#000000', - lineHeight: '160px', - textAlign: 'center', - background: '#364d79', - }; - return ( - -
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
- - ); + const contentStyle: React.CSSProperties = { + margin: 0, + height: '160px', + color: '#000000', + lineHeight: '160px', + textAlign: 'center', + background: '#364d79', + }; + return ( + +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+ + ); } diff --git a/src/pages/dashboard/workbench/conversion_applications.tsx b/src/pages/dashboard/workbench/conversion_applications.tsx index b7ebaab..01a3140 100644 --- a/src/pages/dashboard/workbench/conversion_applications.tsx +++ b/src/pages/dashboard/workbench/conversion_applications.tsx @@ -4,62 +4,62 @@ import { Iconify } from '@/components/icon'; import { useThemeToken } from '@/theme/hooks'; export function Conversion() { - const { colorPrimaryActive, colorPrimaryBorder } = useThemeToken(); - return ( - - ); + const { colorPrimaryActive, colorPrimaryBorder } = useThemeToken(); + return ( + + ); } export function Applications() { - const { colorInfoActive, colorInfoBorder } = useThemeToken(); - return ( - - ); + const { colorInfoActive, colorInfoBorder } = useThemeToken(); + return ( + + ); } type Props = { - percent: number; - title: string; - subtitle: string; - iconify: string; - bg?: string; - strokeColor?: string; + percent: number; + title: string; + subtitle: string; + iconify: string; + bg?: string; + strokeColor?: string; }; function Basic({ percent, title, subtitle, iconify, bg, strokeColor }: Props) { - const { colorBgBase } = useThemeToken(); - const format = (val?: number) => {val}%; - return ( -
- -
- {title} - {subtitle} -
-
- -
-
- ); + const { colorBgBase } = useThemeToken(); + const format = (val?: number) => {val}%; + return ( +
+ +
+ {title} + {subtitle} +
+
+ +
+
+ ); } diff --git a/src/pages/dashboard/workbench/current-download.tsx b/src/pages/dashboard/workbench/current-download.tsx index 2198a9b..cd3876f 100644 --- a/src/pages/dashboard/workbench/current-download.tsx +++ b/src/pages/dashboard/workbench/current-download.tsx @@ -5,52 +5,52 @@ import Chart from '@/components/chart/chart'; import useChart from '@/components/chart/useChart'; export default function CurrentDownload() { - return ( - -
- Current Download -
-
- -
- - ); + return ( + +
+ Current Download +
+
+ +
+ + ); } const series = [44, 55, 13, 43]; function ChartDonut() { - const chartOptions = useChart({ - labels: ['Mac', 'Window', 'IOS', 'Android'], - stroke: { - show: false, - }, - legend: { - position: 'bottom', - horizontalAlign: 'center', - }, - tooltip: { - fillSeriesColor: false, - }, - chart: { - width: 240, - }, - plotOptions: { - pie: { - donut: { - size: '90%', - labels: { - total: { - fontSize: '12px', - }, - value: { - fontSize: '18px', - fontWeight: 700, + const chartOptions = useChart({ + labels: ['Mac', 'Window', 'IOS', 'Android'], + stroke: { + show: false, + }, + legend: { + position: 'bottom', + horizontalAlign: 'center', + }, + tooltip: { + fillSeriesColor: false, + }, + chart: { + width: 240, + }, + plotOptions: { + pie: { + donut: { + size: '90%', + labels: { + total: { + fontSize: '12px', + }, + value: { + fontSize: '18px', + fontWeight: 700, + }, + }, + }, }, - }, }, - }, - }, - }); + }); - return ; + return ; } diff --git a/src/pages/dashboard/workbench/index.tsx b/src/pages/dashboard/workbench/index.tsx index deb3e6c..0978790 100644 --- a/src/pages/dashboard/workbench/index.tsx +++ b/src/pages/dashboard/workbench/index.tsx @@ -11,81 +11,81 @@ import TopRelated from './top-related'; import TotalCard from './total-card'; function Workbench() { - return ( - <> - - - - - - - - - - - + return ( + <> + + + + + + + + + + + - - - - + + + + - - - + + + - - - - + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - + + + + - - - - - - ); + + + + + + ); } export default Workbench; diff --git a/src/pages/dashboard/workbench/new-invoice.tsx b/src/pages/dashboard/workbench/new-invoice.tsx index 1ebc0e8..4e30666 100644 --- a/src/pages/dashboard/workbench/new-invoice.tsx +++ b/src/pages/dashboard/workbench/new-invoice.tsx @@ -7,105 +7,105 @@ import Scrollbar from '@/components/scrollbar'; import ProTag from '@/theme/antd/components/tag'; interface DataType { - key: string; - id: string; - category: string; - price: string; - status: string; + key: string; + id: string; + category: string; + price: string; + status: string; } export default function NewInvoice() { - const columns: ColumnsType = [ - { - title: 'InvoiceId', - dataIndex: 'id', - key: 'id', - render: (text) => {text}, - }, - { - title: 'Category', - dataIndex: 'category', - key: 'category', - }, - { - title: 'Price', - dataIndex: 'price', - key: 'price', - render: (text) => {text}, - }, - { - title: 'Status', - key: 'status', - dataIndex: 'status', - render: (_status) => { - const status = _status as string; - let color = 'success'; - if (status === 'Progress') color = 'gold'; - if (status === 'Out of Date') color = 'red'; - return {status}; - }, - }, - { - title: 'Action', - key: 'action', - render: () => ( - - - - - - ), - }, - ]; + const columns: ColumnsType = [ + { + title: 'InvoiceId', + dataIndex: 'id', + key: 'id', + render: (text) => {text}, + }, + { + title: 'Category', + dataIndex: 'category', + key: 'category', + }, + { + title: 'Price', + dataIndex: 'price', + key: 'price', + render: (text) => {text}, + }, + { + title: 'Status', + key: 'status', + dataIndex: 'status', + render: (_status) => { + const status = _status as string; + let color = 'success'; + if (status === 'Progress') color = 'gold'; + if (status === 'Out of Date') color = 'red'; + return {status}; + }, + }, + { + title: 'Action', + key: 'action', + render: () => ( + + + + + + ), + }, + ]; - const data: DataType[] = [ - { - key: '1', - id: 'INV-1990', - category: 'Android', - price: '$83.74', - status: 'Paid', - }, - { - key: '2', - id: 'INV-1991', - category: 'Mac', - price: '$97.14', - status: 'Out of Date', - }, - { - key: '3', - id: 'INV-1992', - category: 'Windows', - price: '$68.71', - status: 'Progress', - }, - { - key: '4', - id: 'INV-1993', - category: 'Android', - price: '$85.21', - status: 'Paid', - }, - { - key: '5', - id: 'INV-1994', - category: 'Mac', - price: '$53.17', - status: 'Paid', - }, - ]; + const data: DataType[] = [ + { + key: '1', + id: 'INV-1990', + category: 'Android', + price: '$83.74', + status: 'Paid', + }, + { + key: '2', + id: 'INV-1991', + category: 'Mac', + price: '$97.14', + status: 'Out of Date', + }, + { + key: '3', + id: 'INV-1992', + category: 'Windows', + price: '$68.71', + status: 'Progress', + }, + { + key: '4', + id: 'INV-1993', + category: 'Android', + price: '$85.21', + status: 'Paid', + }, + { + key: '5', + id: 'INV-1994', + category: 'Mac', + price: '$53.17', + status: 'Paid', + }, + ]; - return ( - -
- New Invoice -
-
- - - - - - ); + return ( + +
+ New Invoice +
+
+ +
+ + + + ); } diff --git a/src/pages/dashboard/workbench/top-authors.tsx b/src/pages/dashboard/workbench/top-authors.tsx index c4bf84d..be2ee87 100644 --- a/src/pages/dashboard/workbench/top-authors.tsx +++ b/src/pages/dashboard/workbench/top-authors.tsx @@ -7,61 +7,63 @@ import { Iconify } from '@/components/icon'; import { useThemeToken } from '@/theme/hooks'; export default function TopAuthor() { - const themeToken = useThemeToken(); - const getTrophyIconColor = (index: number) => { - switch (index) { - case 1: - return { - color: themeToken.colorInfo, - bg: themeToken.colorInfoBgHover, - }; - case 2: { - return { - color: themeToken.colorError, - bg: themeToken.colorErrorBgHover, - }; - } - default: - return { - color: themeToken.colorPrimary, - bg: themeToken.colorPrimaryBgHover, - }; - } - }; - return ( - -
- Top Authors -
-
- {new Array(3).fill('').map((_, index) => ( -
- -
- {faker.person.fullName()} -
- - - {faker.number.float({ min: 3, max: 9, precision: 3 })}k - -
-
+ const themeToken = useThemeToken(); + const getTrophyIconColor = (index: number) => { + switch (index) { + case 1: + return { + color: themeToken.colorInfo, + bg: themeToken.colorInfoBgHover, + }; + case 2: { + return { + color: themeToken.colorError, + bg: themeToken.colorErrorBgHover, + }; + } + default: + return { + color: themeToken.colorPrimary, + bg: themeToken.colorPrimaryBgHover, + }; + } + }; + return ( + +
+ Top Authors +
+
+ {new Array(3).fill('').map((_, index) => ( +
+ +
+ {faker.person.fullName()} +
+ + + {faker.number.float({ min: 3, max: 9, precision: 3 })}k + +
+
-
- -
-
- ))} -
- - ); +
+ +
+
+ ))} +
+ + ); } diff --git a/src/pages/dashboard/workbench/top-installed.tsx b/src/pages/dashboard/workbench/top-installed.tsx index b9bb298..2d27555 100644 --- a/src/pages/dashboard/workbench/top-installed.tsx +++ b/src/pages/dashboard/workbench/top-installed.tsx @@ -5,85 +5,85 @@ import Card from '@/components/card'; import { Iconify } from '@/components/icon'; const dataSource = [ - { - country: 'Germany', - iconify: 'twemoji:flag-germany', - android: '9.91k', - windows: '1.95k', - ios: '1.95k', - }, - { - country: 'China', - iconify: 'twemoji:flag-china', - android: '1.95k', - windows: '9.25k', - ios: '7.95k', - }, - { - country: 'Australia', - iconify: 'twemoji:flag-australia', - android: '3.91k', - windows: '2.95k', - ios: '4.95k', - }, - { - country: 'France', - iconify: 'twemoji:flag-france', - android: '3.28k', - windows: '2.29k', - ios: '8.95k', - }, - { - country: 'USA', - iconify: 'twemoji:flag-united-states', - android: '8.81k', - windows: '7.05k', - ios: '4.35k', - }, + { + country: 'Germany', + iconify: 'twemoji:flag-germany', + android: '9.91k', + windows: '1.95k', + ios: '1.95k', + }, + { + country: 'China', + iconify: 'twemoji:flag-china', + android: '1.95k', + windows: '9.25k', + ios: '7.95k', + }, + { + country: 'Australia', + iconify: 'twemoji:flag-australia', + android: '3.91k', + windows: '2.95k', + ios: '4.95k', + }, + { + country: 'France', + iconify: 'twemoji:flag-france', + android: '3.28k', + windows: '2.29k', + ios: '8.95k', + }, + { + country: 'USA', + iconify: 'twemoji:flag-united-states', + android: '8.81k', + windows: '7.05k', + ios: '4.35k', + }, ]; const platformIcon = (platform: string) => { - let iconify: ReactNode; - if (platform === 'android') { - iconify = ; - } - if (platform === 'windows') { - iconify = ; - } - iconify = ; + let iconify: ReactNode; + if (platform === 'android') { + iconify = ; + } + if (platform === 'windows') { + iconify = ; + } + iconify = ; - return
{iconify}
; + return
{iconify}
; }; export default function TopInstalled() { - return ( - -
- Top Installed Countries -
-
- {dataSource.map((item) => ( -
- - {item.country} -
-
- {platformIcon('android')} - {item.android} -
+ return ( + +
+ Top Installed Countries +
+
+ {dataSource.map((item) => ( +
+ + {item.country} +
+
+ {platformIcon('android')} + {item.android} +
-
- {platformIcon('windows')} - {item.windows} -
+
+ {platformIcon('windows')} + {item.windows} +
-
- {platformIcon('ios')} - {item.ios} -
-
-
- ))} -
- - ); +
+ {platformIcon('ios')} + {item.ios} +
+
+
+ ))} +
+ + ); } diff --git a/src/pages/dashboard/workbench/top-related.tsx b/src/pages/dashboard/workbench/top-related.tsx index 6b95c79..d7ab56d 100644 --- a/src/pages/dashboard/workbench/top-related.tsx +++ b/src/pages/dashboard/workbench/top-related.tsx @@ -8,91 +8,95 @@ import ProTag from '@/theme/antd/components/tag'; import { useThemeToken } from '@/theme/hooks'; const dataSource = [ - { - logo: , - title: 'Chrome', - platform: 'Mac', - type: 'free', - star: 4, - reviews: '9.91k', - }, - { - logo: , - title: 'Drive', - platform: 'Mac', - type: 'free', - star: 3.5, - reviews: '1.95k', - }, - { - logo: , - title: 'Dropbox', - platform: 'Windows', - type: '$66.71', - star: 4.5, - reviews: '9.12k', - }, - { - logo: , - title: 'Slack', - platform: 'Mac', - type: 'free', - star: 3.5, - reviews: '6.98k', - }, - { - logo: , - title: 'Discord', - platform: 'Windows', - type: '$52.17', - star: 0.5, - reviews: '8.49k', - }, + { + logo: , + title: 'Chrome', + platform: 'Mac', + type: 'free', + star: 4, + reviews: '9.91k', + }, + { + logo: , + title: 'Drive', + platform: 'Mac', + type: 'free', + star: 3.5, + reviews: '1.95k', + }, + { + logo: , + title: 'Dropbox', + platform: 'Windows', + type: '$66.71', + star: 4.5, + reviews: '9.12k', + }, + { + logo: , + title: 'Slack', + platform: 'Mac', + type: 'free', + star: 3.5, + reviews: '6.98k', + }, + { + logo: , + title: 'Discord', + platform: 'Windows', + type: '$52.17', + star: 0.5, + reviews: '8.49k', + }, ]; export default function TopRelated() { - const themeToken = useThemeToken(); - return ( - -
- Top Related Applications -
-
- - {dataSource.map((item) => ( -
-
- {item.logo} -
+ const themeToken = useThemeToken(); + return ( + +
+ Top Related Applications +
+
+ + {dataSource.map((item) => ( +
+
+ {item.logo} +
-
- {item.title} -
- {item.platform === 'Mac' ? ( - - ) : ( - - )} - {item.platform} - {item.type} -
-
+
+ {item.title} +
+ {item.platform === 'Mac' ? ( + + ) : ( + + )} + {item.platform} + + {item.type} + +
+
-
- - {item.reviews}reviews -
-
- ))} - -
- - ); +
+ + + {item.reviews}reviews + +
+
+ ))} + +
+ + ); } diff --git a/src/pages/dashboard/workbench/total-card.tsx b/src/pages/dashboard/workbench/total-card.tsx index faeb3b7..c416715 100644 --- a/src/pages/dashboard/workbench/total-card.tsx +++ b/src/pages/dashboard/workbench/total-card.tsx @@ -4,76 +4,76 @@ import useChart from '@/components/chart/useChart'; import { SvgIcon } from '@/components/icon'; type Props = { - title: string; - increase: boolean; - percent: string; - count: string; - chartData: number[]; + title: string; + increase: boolean; + percent: string; + count: string; + chartData: number[]; }; export default function TotalCard({ title, increase, count, percent, chartData }: Props) { - return ( - -
-
{title}
-
- {increase ? ( - - ) : ( - - )} -
- {increase ? '+' : '-'} - {percent} -
-
-

{count}

-
+ return ( + +
+
{title}
+
+ {increase ? ( + + ) : ( + + )} +
+ {increase ? '+' : '-'} + {percent} +
+
+

{count}

+
- - - ); + + + ); } function ChartLine({ data }: { data: number[] }) { - const series = [ - { - name: '', - data, - }, - ]; - const chartOptions = useChart({ - tooltip: { - x: { - show: false, - }, - }, - xaxis: { - labels: { - show: false, - showDuplicates: false, - }, - tooltip: { - enabled: false, - }, - crosshairs: { - show: false, - }, - }, - yaxis: { - labels: { - show: false, - }, - tooltip: { - enabled: false, - }, - crosshairs: { - show: false, - }, - }, - grid: { - show: false, - }, - }); + const series = [ + { + name: '', + data, + }, + ]; + const chartOptions = useChart({ + tooltip: { + x: { + show: false, + }, + }, + xaxis: { + labels: { + show: false, + showDuplicates: false, + }, + tooltip: { + enabled: false, + }, + crosshairs: { + show: false, + }, + }, + yaxis: { + labels: { + show: false, + }, + tooltip: { + enabled: false, + }, + crosshairs: { + show: false, + }, + }, + grid: { + show: false, + }, + }); - return ; + return ; } diff --git a/src/pages/functions/clipboard/index.tsx b/src/pages/functions/clipboard/index.tsx index 5d25e29..063dba0 100644 --- a/src/pages/functions/clipboard/index.tsx +++ b/src/pages/functions/clipboard/index.tsx @@ -6,32 +6,32 @@ import { IconButton, Iconify } from '@/components/icon'; import { useCopyToClipboard } from '@/hooks/event/use-copy-to-clipboard'; export default function ClipboardPage() { - const { copyFn } = useCopyToClipboard(); + const { copyFn } = useCopyToClipboard(); - const [value, setValue] = useState('https://www.npmjs.com/package/'); + const [value, setValue] = useState('https://www.npmjs.com/package/'); - const textOnClick = faker.lorem.paragraphs({ min: 3, max: 5 }); + const textOnClick = faker.lorem.paragraphs({ min: 3, max: 5 }); - const handleChange = (e: ChangeEvent) => setValue(e.target.value); - const CopyButton = ( - - copyFn(value)}> - - - - ); - return ( - - - - ON CHANGE - - - - ON DOUBLE CLICK - copyFn(textOnClick)}>{textOnClick} - - - - ); + const handleChange = (e: ChangeEvent) => setValue(e.target.value); + const CopyButton = ( + + copyFn(value)}> + + + + ); + return ( + + + + ON CHANGE + + + + ON DOUBLE CLICK + copyFn(textOnClick)}>{textOnClick} + + + + ); } diff --git a/src/pages/home/list.page.tsx b/src/pages/home/list.page.tsx index 48bd772..277a085 100644 --- a/src/pages/home/list.page.tsx +++ b/src/pages/home/list.page.tsx @@ -1,5 +1,5 @@ -import { Avatar, Button, Divider, Tabs, TabsProps } from 'antd'; import { Column } from '@antv/g2plot'; +import { Avatar, Button, Divider, Tabs, TabsProps } from 'antd'; import { useEffect, useRef } from 'react'; const data = [ @@ -123,7 +123,7 @@ export default () => { return () => { stackedColumnPlot.destroy(); }; - }, [ref.current]); + }, []); // 标签切换 items const items: TabsProps['items'] = [ { diff --git a/src/pages/management/blog/index.tsx b/src/pages/management/blog/index.tsx index bd8bd49..e3838c0 100644 --- a/src/pages/management/blog/index.tsx +++ b/src/pages/management/blog/index.tsx @@ -1,5 +1,5 @@ function Blog() { - return
Blog
; + return
Blog
; } export default Blog; diff --git a/src/pages/management/system/organization/index.tsx b/src/pages/management/system/organization/index.tsx index 90dbc4e..41711f1 100644 --- a/src/pages/management/system/organization/index.tsx +++ b/src/pages/management/system/organization/index.tsx @@ -1,17 +1,17 @@ import { useQuery } from '@tanstack/react-query'; import { - Button, - Card, - Col, - Form, - Input, - InputNumber, - Modal, - Popconfirm, - Radio, - Row, - Select, - Space, + Button, + Card, + Col, + Form, + Input, + InputNumber, + Modal, + Popconfirm, + Radio, + Row, + Select, + Space, } from 'antd'; import Table, { ColumnsType } from 'antd/es/table'; import { TableRowSelection } from 'antd/es/table/interface'; @@ -28,203 +28,220 @@ import { Organization } from '#/entity'; type SearchFormFieldType = Pick; export default function OrganizationPage() { - const [searchForm] = Form.useForm(); - const [organizationModalPros, setOrganizationModalProps] = useState({ - formValue: { - id: '', - name: '', - status: 'enable', - }, - title: 'New', - show: false, - onOk: () => { - setOrganizationModalProps((prev) => ({ ...prev, show: false })); - }, - onCancel: () => { - setOrganizationModalProps((prev) => ({ ...prev, show: false })); - }, - }); - - const columns: ColumnsType = [ - { title: 'Name', dataIndex: 'name', width: 300 }, - { title: 'Order', dataIndex: 'order', align: 'center', width: 60 }, - { - title: 'Status', - dataIndex: 'status', - align: 'center', - width: 120, - render: (status) => ( - {status} - ), - }, - { title: 'Desc', dataIndex: 'desc', align: 'center', width: 300 }, - { - title: 'Action', - key: 'operation', - align: 'center', - width: 100, - render: (_, record) => ( -
- onEdit(record)}> - - - - - - - -
- ), - }, - ]; - - // rowSelection objects indicates the need for row selection - const rowSelection: TableRowSelection = { - onChange: (selectedRowKeys, selectedRows) => { - console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); - }, - onSelect: (record, selected, selectedRows) => { - console.log(record, selected, selectedRows); - }, - onSelectAll: (selected, selectedRows, changeRows) => { - console.log(selected, selectedRows, changeRows); - }, - }; - - const { data } = useQuery({ - queryKey: ['orgs'], - queryFn: orgService.getOrgList, - }); - - const onSearchFormReset = () => { - searchForm.resetFields(); - }; - - const onCreate = () => { - setOrganizationModalProps((prev) => ({ - ...prev, - show: true, - title: 'Create New', - formValue: { - ...prev.formValue, - id: '', - name: '', - order: 1, - desc: '', - status: 'enable', - }, - })); - }; - - const onEdit = (formValue: Organization) => { - setOrganizationModalProps((prev) => ({ - ...prev, - show: true, - title: 'Edit', - formValue, - })); - }; - - return ( - - -
- - - label="Name" name="name" className="!mb-0"> - - - - - label="Status" name="status" className="!mb-0"> - - - - -
- - -
- - - - - - - New - - } - > -
- - - - - - - - - ); + const [searchForm] = Form.useForm(); + const [organizationModalPros, setOrganizationModalProps] = useState({ + formValue: { + id: '', + name: '', + status: 'enable', + }, + title: 'New', + show: false, + onOk: () => { + setOrganizationModalProps((prev) => ({ ...prev, show: false })); + }, + onCancel: () => { + setOrganizationModalProps((prev) => ({ ...prev, show: false })); + }, + }); + + const columns: ColumnsType = [ + { title: 'Name', dataIndex: 'name', width: 300 }, + { title: 'Order', dataIndex: 'order', align: 'center', width: 60 }, + { + title: 'Status', + dataIndex: 'status', + align: 'center', + width: 120, + render: (status) => ( + {status} + ), + }, + { title: 'Desc', dataIndex: 'desc', align: 'center', width: 300 }, + { + title: 'Action', + key: 'operation', + align: 'center', + width: 100, + render: (_, record) => ( +
+ onEdit(record)}> + + + + + + + +
+ ), + }, + ]; + + // rowSelection objects indicates the need for row selection + const rowSelection: TableRowSelection = { + onChange: (selectedRowKeys, selectedRows) => { + console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + }, + onSelect: (record, selected, selectedRows) => { + console.log(record, selected, selectedRows); + }, + onSelectAll: (selected, selectedRows, changeRows) => { + console.log(selected, selectedRows, changeRows); + }, + }; + + const { data } = useQuery({ + queryKey: ['orgs'], + queryFn: orgService.getOrgList, + }); + + const onSearchFormReset = () => { + searchForm.resetFields(); + }; + + const onCreate = () => { + setOrganizationModalProps((prev) => ({ + ...prev, + show: true, + title: 'Create New', + formValue: { + ...prev.formValue, + id: '', + name: '', + order: 1, + desc: '', + status: 'enable', + }, + })); + }; + + const onEdit = (formValue: Organization) => { + setOrganizationModalProps((prev) => ({ + ...prev, + show: true, + title: 'Edit', + formValue, + })); + }; + + return ( + + +
+ + + + label="Name" + name="name" + className="!mb-0" + > + + + + + + label="Status" + name="status" + className="!mb-0" + > + + + + +
+ + +
+ + + + + + + New + + } + > +
+ + + + + + + + + ); } type OrganizationModalProps = { - formValue: Organization; - title: string; - show: boolean; - onOk: VoidFunction; - onCancel: VoidFunction; + formValue: Organization; + title: string; + show: boolean; + onOk: VoidFunction; + onCancel: VoidFunction; }; function OrganizationModal({ title, show, formValue, onOk, onCancel }: OrganizationModalProps) { - const [form] = Form.useForm(); - useEffect(() => { - form.setFieldsValue({ ...formValue }); - }, [formValue, form]); - return ( - -
- label="Name" name="name" required> - - - label="Order" name="order" required> - - - label="Status" name="status" required> - - Enable - Disable - - - label="Desc" name="desc"> - - - - - ); + const [form] = Form.useForm(); + useEffect(() => { + form.setFieldsValue({ ...formValue }); + }, [formValue, form]); + return ( + +
+ label="Name" name="name" required> + + + label="Order" name="order" required> + + + label="Status" name="status" required> + + Enable + Disable + + + label="Desc" name="desc"> + + + + + ); } diff --git a/src/pages/management/system/organization/organization-chart.tsx b/src/pages/management/system/organization/organization-chart.tsx index fbcff06..2d740ae 100644 --- a/src/pages/management/system/organization/organization-chart.tsx +++ b/src/pages/management/system/organization/organization-chart.tsx @@ -9,86 +9,88 @@ import { Organization } from '#/entity'; import { ThemeMode } from '#/enum'; type Props = { - organizations?: Organization[]; + organizations?: Organization[]; }; export default function OrganizationChart({ organizations = [] }: Props) { - const themeToken = useThemeToken(); - const { themeMode } = useSettings(); - return ( - + Root + + } > - Root - - } - > - {organizations.map((org) => ( - - ))} - - ); + {organizations.map((org) => ( + + ))} + + ); } type OrganizationChartTreeNodeProps = { - organization: Organization; + organization: Organization; }; function OrganizationChartTreeNode({ - organization: { name, children }, + organization: { name, children }, }: OrganizationChartTreeNodeProps) { - const themeToken = useThemeToken(); - const { themeMode } = useSettings(); + const themeToken = useThemeToken(); + const { themeMode } = useSettings(); - return ( - + {name} + + } > - {name} - - } - > - {children?.map((org) => ( - - ))} - - ); + {children?.map((org) => ( + + ))} + + ); } type StyledNodeProps = { - $textColor: string; - $backgroundColor: string; - $borderColor: string; + $textColor: string; + $backgroundColor: string; + $borderColor: string; }; const StyledNode = styled.div` - transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - overflow: hidden; - position: relative; - z-index: 0; - padding: 16px; - border-radius: 12px; - display: inline-flex; - text-transform: capitalize; - color: ${(props) => props.$textColor}; - background-color: ${(props) => props.$backgroundColor}; - border: 1px solid ${(props) => props.$borderColor}; + transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + overflow: hidden; + position: relative; + z-index: 0; + padding: 16px; + border-radius: 12px; + display: inline-flex; + text-transform: capitalize; + color: ${(props) => props.$textColor}; + background-color: ${(props) => props.$backgroundColor}; + border: 1px solid ${(props) => props.$borderColor}; `; diff --git a/src/pages/management/system/permission/permission-modal.tsx b/src/pages/management/system/permission/permission-modal.tsx index 5e1be16..39f909a 100644 --- a/src/pages/management/system/permission/permission-modal.tsx +++ b/src/pages/management/system/permission/permission-modal.tsx @@ -7,101 +7,105 @@ import { Permission } from '#/entity'; import { BasicStatus, PermissionType } from '#/enum'; export type PermissionModalProps = { - formValue: Permission; - title: string; - show: boolean; - onOk: VoidFunction; - onCancel: VoidFunction; + formValue: Permission; + title: string; + show: boolean; + onOk: VoidFunction; + onCancel: VoidFunction; }; export default function PermissionModal({ - title, - show, - formValue, - onOk, - onCancel, + title, + show, + formValue, + onOk, + onCancel, }: PermissionModalProps) { - const [form] = Form.useForm(); - const permissions = useUserPermission(); + const [form] = Form.useForm(); + const permissions = useUserPermission(); - useEffect(() => { - form.setFieldsValue({ ...formValue }); - }, [formValue, form]); + useEffect(() => { + form.setFieldsValue({ ...formValue }); + }, [formValue, form]); - return ( - -
- label="Type" name="type" required> - - CATALOGUE - MENU - - + return ( + + + label="Type" name="type" required> + + CATALOGUE + MENU + + - label="Name" name="name" required> - - + label="Name" name="name" required> + + - - label="Label" - name="label" - required - tooltip="internationalization config" - > - - + + label="Label" + name="label" + required + tooltip="internationalization config" + > + + - label="Parent" name="parentId" required> - - + label="Parent" name="parentId" required> + + - label="Route" name="route" required> - - + label="Route" name="route" required> + + - - label="Component" - name="component" - required={formValue.type === PermissionType.MENU} - > - - + + label="Component" + name="component" + required={formValue.type === PermissionType.MENU} + > + + - label="Icon" name="icon" tooltip="local icon should start with ic"> - - + + label="Icon" + name="icon" + tooltip="local icon should start with ic" + > + + - label="Hide" name="hide" tooltip="hide in menu"> - - Show - Hide - - + label="Hide" name="hide" tooltip="hide in menu"> + + Show + Hide + + - label="Order" name="order"> - - + label="Order" name="order"> + + - label="Status" name="status" required> - - Enable - Disable - - - - - ); + label="Status" name="status" required> + + Enable + Disable + + + + + ); } diff --git a/src/pages/management/system/role/index.tsx b/src/pages/management/system/role/index.tsx index f57fc6c..1efe7d8 100644 --- a/src/pages/management/system/role/index.tsx +++ b/src/pages/management/system/role/index.tsx @@ -14,107 +14,116 @@ import { BasicStatus } from '#/enum'; const ROLES: Role[] = ROLE_LIST; const DEFAULE_ROLE_VALUE: Role = { - id: '', - name: '', - label: '', - status: BasicStatus.ENABLE, - permission: [], + id: '', + name: '', + label: '', + status: BasicStatus.ENABLE, + permission: [], }; export default function RolePage() { - const [roleModalPros, setRoleModalProps] = useState({ - formValue: { ...DEFAULE_ROLE_VALUE }, - title: 'New', - show: false, - onOk: () => { - setRoleModalProps((prev) => ({ ...prev, show: false })); - }, - onCancel: () => { - setRoleModalProps((prev) => ({ ...prev, show: false })); - }, - }); - const columns: ColumnsType = [ - { - title: 'Name', - dataIndex: 'name', - width: 300, - }, - { - title: 'Label', - dataIndex: 'label', - }, - { title: 'Order', dataIndex: 'order', width: 60 }, - { - title: 'Status', - dataIndex: 'status', - align: 'center', - width: 120, - render: (status) => ( - - {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'} - - ), - }, - { title: 'Desc', dataIndex: 'desc' }, - { - title: 'Action', - key: 'operation', - align: 'center', - width: 100, - render: (_, record) => ( -
- onEdit(record)}> - - - - - - - -
- ), - }, - ]; + const [roleModalPros, setRoleModalProps] = useState({ + formValue: { ...DEFAULE_ROLE_VALUE }, + title: 'New', + show: false, + onOk: () => { + setRoleModalProps((prev) => ({ ...prev, show: false })); + }, + onCancel: () => { + setRoleModalProps((prev) => ({ ...prev, show: false })); + }, + }); + const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + width: 300, + }, + { + title: 'Label', + dataIndex: 'label', + }, + { title: 'Order', dataIndex: 'order', width: 60 }, + { + title: 'Status', + dataIndex: 'status', + align: 'center', + width: 120, + render: (status) => ( + + {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'} + + ), + }, + { title: 'Desc', dataIndex: 'desc' }, + { + title: 'Action', + key: 'operation', + align: 'center', + width: 100, + render: (_, record) => ( +
+ onEdit(record)}> + + + + + + + +
+ ), + }, + ]; - const onCreate = () => { - setRoleModalProps((prev) => ({ - ...prev, - show: true, - title: 'Create New', - formValue: { - ...prev.formValue, - ...DEFAULE_ROLE_VALUE, - }, - })); - }; + const onCreate = () => { + setRoleModalProps((prev) => ({ + ...prev, + show: true, + title: 'Create New', + formValue: { + ...prev.formValue, + ...DEFAULE_ROLE_VALUE, + }, + })); + }; - const onEdit = (formValue: Role) => { - setRoleModalProps((prev) => ({ - ...prev, - show: true, - title: 'Edit', - formValue, - })); - }; + const onEdit = (formValue: Role) => { + setRoleModalProps((prev) => ({ + ...prev, + show: true, + title: 'Edit', + formValue, + })); + }; - return ( - - New - - } - > -
+ return ( + + New + + } + > +
- - - ); + + + ); } diff --git a/src/pages/management/system/role/role-modal.tsx b/src/pages/management/system/role/role-modal.tsx index e205079..2c7dcff 100644 --- a/src/pages/management/system/role/role-modal.tsx +++ b/src/pages/management/system/role/role-modal.tsx @@ -8,67 +8,67 @@ import { Permission, Role } from '#/entity'; import { BasicStatus } from '#/enum'; export type RoleModalProps = { - formValue: Role; - title: string; - show: boolean; - onOk: VoidFunction; - onCancel: VoidFunction; + formValue: Role; + title: string; + show: boolean; + onOk: VoidFunction; + onCancel: VoidFunction; }; const PERMISSIONS: Permission[] = PERMISSION_LIST; export function RoleModal({ title, show, formValue, onOk, onCancel }: RoleModalProps) { - const [form] = Form.useForm(); + const [form] = Form.useForm(); - const flattenedPermissions = flattenTrees(formValue.permission); - const checkedKeys = flattenedPermissions.map((item) => item.id); - useEffect(() => { - form.setFieldsValue({ ...formValue }); - }, [formValue, form]); + const flattenedPermissions = flattenTrees(formValue.permission); + const checkedKeys = flattenedPermissions.map((item) => item.id); + useEffect(() => { + form.setFieldsValue({ ...formValue }); + }, [formValue, form]); - return ( - -
- label="Name" name="name" required> - - + return ( + + + label="Name" name="name" required> + + - label="Label" name="label" required> - - + label="Label" name="label" required> + + - label="Order" name="order"> - - + label="Order" name="order"> + + - label="Status" name="status" required> - - Enable - Disable - - + label="Status" name="status" required> + + Enable + Disable + + - label="Desc" name="desc"> - - + label="Desc" name="desc"> + + - label="Permission" name="permission"> - - - - - ); + label="Permission" name="permission"> + + + + + ); } diff --git a/src/pages/management/system/user/index.tsx b/src/pages/management/system/user/index.tsx index 9d9e4c0..067a0d8 100644 --- a/src/pages/management/system/user/index.tsx +++ b/src/pages/management/system/user/index.tsx @@ -12,83 +12,92 @@ import { BasicStatus } from '#/enum'; const USERS: UserInfo[] = USER_LIST; export default function RolePage() { - const { colorTextSecondary } = useThemeToken(); - const columns: ColumnsType = [ - { - title: 'Name', - dataIndex: 'name', - width: 300, - render: (_, record) => { - return ( -
- -
- {record.account} - - {record.email} - -
-
- ); - }, - }, - { - title: 'Role', - dataIndex: 'role', - align: 'center', - width: 120, - render: (role: Role) => {role.name}, - }, - { - title: 'Status', - dataIndex: 'status', - align: 'center', - width: 120, - render: (status) => ( - - {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'} - - ), - }, - { - title: 'Action', - key: 'operation', - align: 'center', - width: 100, - render: () => ( -
- {}}> - - - - - - - -
- ), - }, - ]; + const { colorTextSecondary } = useThemeToken(); + const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + width: 300, + render: (_, record) => { + return ( +
+ +
+ {record.account} + + {record.email} + +
+
+ ); + }, + }, + { + title: 'Role', + dataIndex: 'role', + align: 'center', + width: 120, + render: (role: Role) => {role.name}, + }, + { + title: 'Status', + dataIndex: 'status', + align: 'center', + width: 120, + render: (status) => ( + + {status === BasicStatus.DISABLE ? 'Disable' : 'Enable'} + + ), + }, + { + title: 'Action', + key: 'operation', + align: 'center', + width: 100, + render: () => ( +
+ {}}> + + + + + + + +
+ ), + }, + ]; - const onCreate = () => {}; + const onCreate = () => {}; - return ( - - New - - } - > -
- - ); + return ( + + New + + } + > +
+ + ); } diff --git a/src/pages/management/user/account/general-tab.tsx b/src/pages/management/user/account/general-tab.tsx index 30bcbc7..8fe61c4 100644 --- a/src/pages/management/user/account/general-tab.tsx +++ b/src/pages/management/user/account/general-tab.tsx @@ -6,107 +6,107 @@ import { UploadAvatar } from '@/components/upload'; import { useUserInfo } from '@/store/userStore'; type FieldType = { - name?: string; - email?: string; - phone?: string; - address?: string; - city?: string; - code?: string; - about: string; + name?: string; + email?: string; + phone?: string; + address?: string; + city?: string; + code?: string; + about: string; }; export default function GeneralTab() { - const { notification } = App.useApp(); - const { avatar, account, email } = useUserInfo(); - const initFormValues = { - name: account, - email, - phone: faker.phone.number(), - address: faker.location.county(), - city: faker.location.city(), - code: faker.location.zipCode(), - about: faker.lorem.paragraphs(), - }; - const handleClick = () => { - notification.success({ - message: 'Update success!', - duration: 3, - }); - }; - return ( - - - - + const { notification } = App.useApp(); + const { avatar, account, email } = useUserInfo(); + const initFormValues = { + name: account, + email, + phone: faker.phone.number(), + address: faker.location.county(), + city: faker.location.city(), + code: faker.location.zipCode(), + about: faker.lorem.paragraphs(), + }; + const handleClick = () => { + notification.success({ + message: 'Update success!', + duration: 3, + }); + }; + return ( + + + + - -
Public Profile
- - + +
Public Profile
+ + - - - - - -
- - - label="Account" name="name"> - - - - - label="Email" name="email"> - - - - + + + + + + + + + label="Account" name="name"> + + + + + label="Email" name="email"> + + + + - - - label="Phone" name="phone"> - - - - - label="Address" name="address"> - - - - + + + label="Phone" name="phone"> + + + + + label="Address" name="address"> + + + + - - - label="City" name="city"> - - - - - label="Code" name="code"> - - - - + + + label="City" name="city"> + + + + + label="Code" name="code"> + + + + - label="About" name="about"> - - + label="About" name="about"> + + -
- -
- - - - - ); +
+ +
+ + + + + ); } diff --git a/src/pages/management/user/account/index.tsx b/src/pages/management/user/account/index.tsx index 1345855..9e3bd68 100644 --- a/src/pages/management/user/account/index.tsx +++ b/src/pages/management/user/account/index.tsx @@ -7,40 +7,44 @@ import NotificationsTab from './notifications-tab'; import SecurityTab from './security-tab'; function UserAccount() { - const items: TabsProps['items'] = [ - { - key: '1', - label: ( -
- - General -
- ), - children: , - }, - { - key: '2', - label: ( -
- - Notifications -
- ), - children: , - }, - { - key: '3', - label: ( -
- - Security -
- ), - children: , - }, - ]; + const items: TabsProps['items'] = [ + { + key: '1', + label: ( +
+ + General +
+ ), + children: , + }, + { + key: '2', + label: ( +
+ + Notifications +
+ ), + children: , + }, + { + key: '3', + label: ( +
+ + Security +
+ ), + children: , + }, + ]; - return ; + return ; } export default UserAccount; diff --git a/src/pages/management/user/account/notifications-tab.tsx b/src/pages/management/user/account/notifications-tab.tsx index e2097a7..252c43a 100644 --- a/src/pages/management/user/account/notifications-tab.tsx +++ b/src/pages/management/user/account/notifications-tab.tsx @@ -4,75 +4,75 @@ import Card from '@/components/card'; import { useThemeToken } from '@/theme/hooks'; export default function NotificationsTab() { - const { notification } = App.useApp(); - const { colorBgContainerDisabled, colorTextSecondary } = useThemeToken(); - const handleClick = () => { - notification.success({ - message: 'Update success!', - duration: 3, - }); - }; - return ( - - - - Activity - - Donec mi odio, faucibus at, scelerisque quis - - - -
-
-
Email me when someone answers on my form
- -
-
-
Email me when someone comments onmy article
- -
-
-
Email me hen someone follows me
- -
-
- + const { notification } = App.useApp(); + const { colorBgContainerDisabled, colorTextSecondary } = useThemeToken(); + const handleClick = () => { + notification.success({ + message: 'Update success!', + duration: 3, + }); + }; + return ( + + + + Activity + + Donec mi odio, faucibus at, scelerisque quis + + + +
+
+
Email me when someone answers on my form
+ +
+
+
Email me when someone comments onmy article
+ +
+
+
Email me hen someone follows me
+ +
+
+ - - Applications - - Donec mi odio, faucibus at, scelerisque quis - - - -
-
-
News and announcements
- -
-
-
Weekly product updates
- -
-
-
Weekly blog digest
- -
-
- + + Applications + + Donec mi odio, faucibus at, scelerisque quis + + + +
+
+
News and announcements
+ +
+
+
Weekly product updates
+ +
+
+
Weekly blog digest
+ +
+
+ -
- -
- - - ); +
+ +
+ + + ); } diff --git a/src/pages/management/user/account/security-tab.tsx b/src/pages/management/user/account/security-tab.tsx index b346cf5..8496fde 100644 --- a/src/pages/management/user/account/security-tab.tsx +++ b/src/pages/management/user/account/security-tab.tsx @@ -3,49 +3,49 @@ import { App, Button, Form, Input } from 'antd'; import Card from '@/components/card'; type FieldType = { - oldPassword?: string; - newPassword?: string; - confirmPassword?: string; + oldPassword?: string; + newPassword?: string; + confirmPassword?: string; }; export default function SecurityTab() { - const { notification } = App.useApp(); - const initFormValues = { - oldPassword: '', - newPassword: '', - confirmPassword: '', - }; - const handleClick = () => { - notification.success({ - message: 'Update success!', - duration: 3, - }); - }; + const { notification } = App.useApp(); + const initFormValues = { + oldPassword: '', + newPassword: '', + confirmPassword: '', + }; + const handleClick = () => { + notification.success({ + message: 'Update success!', + duration: 3, + }); + }; - return ( - -
- label="Old Password" name="oldPassword"> - - + return ( + + + label="Old Password" name="oldPassword"> + + - label="New Password" name="newPassword"> - - + label="New Password" name="newPassword"> + + - label="Confirm New Password" name="confirmPassword"> - - - -
- -
- - ); + label="Confirm New Password" name="confirmPassword"> + + + +
+ +
+ + ); } diff --git a/src/pages/management/user/profile/connections-tab.tsx b/src/pages/management/user/profile/connections-tab.tsx index 2126560..b8c718a 100644 --- a/src/pages/management/user/profile/connections-tab.tsx +++ b/src/pages/management/user/profile/connections-tab.tsx @@ -6,110 +6,110 @@ import { Iconify } from '@/components/icon'; import ProTag from '@/theme/antd/components/tag'; export default function ConnectionsTab() { - const items = [ - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - title: 'UI Designer', - tags: ['Figma', 'Sketch'], - projects: '18', - tasks: '834', - connections: '129', - connected: true, - }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - title: 'Developer', - tags: ['Angular', 'React'], - projects: '118', - tasks: '2.32k', - connections: '1.29k', - connected: false, - }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - title: 'Developer', - tags: ['Html', 'React'], - projects: '32', - tasks: '1.25k', - connections: '890', - connected: false, - }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - title: 'UI/UX Designer', - tags: ['Figma', 'Sketch', 'Photoshop'], - projects: '86', - tasks: '12.4k', - connections: '890', - connected: false, - }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - title: 'Full Stack Developer', - tags: ['React', 'Html', 'Node.js'], - projects: '244', - tasks: '23.9k', - connections: '2.14k', - connected: true, - }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - title: 'SEO', - tags: ['Analysis', 'Writing'], - projects: '32', - tasks: '1.28k', - connections: '1.27k', - connected: false, - }, - ]; - return ( - - {items.map((item) => ( - - - + const items = [ + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + title: 'UI Designer', + tags: ['Figma', 'Sketch'], + projects: '18', + tasks: '834', + connections: '129', + connected: true, + }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + title: 'Developer', + tags: ['Angular', 'React'], + projects: '118', + tasks: '2.32k', + connections: '1.29k', + connected: false, + }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + title: 'Developer', + tags: ['Html', 'React'], + projects: '32', + tasks: '1.25k', + connections: '890', + connected: false, + }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + title: 'UI/UX Designer', + tags: ['Figma', 'Sketch', 'Photoshop'], + projects: '86', + tasks: '12.4k', + connections: '890', + connected: false, + }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + title: 'Full Stack Developer', + tags: ['React', 'Html', 'Node.js'], + projects: '244', + tasks: '23.9k', + connections: '2.14k', + connected: true, + }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + title: 'SEO', + tags: ['Analysis', 'Writing'], + projects: '32', + tasks: '1.28k', + connections: '1.27k', + connected: false, + }, + ]; + return ( + + {items.map((item) => ( + + + - {item.name} - {item.title} + {item.name} + {item.title} -
- {item.tags.map((tag) => ( - - {tag} - - ))} -
+
+ {item.tags.map((tag) => ( + + {tag} + + ))} +
-
-
- {item.projects} - Projects -
-
- {item.tasks} - Tasks -
-
- {item.connections} - Tasks -
-
+
+
+ {item.projects} + Projects +
+
+ {item.tasks} + Tasks +
+
+ {item.connections} + Tasks +
+
-
- -
- - - ))} - - ); +
+ +
+ + + ))} + + ); } diff --git a/src/pages/management/user/profile/index.tsx b/src/pages/management/user/profile/index.tsx index 85be742..737f148 100644 --- a/src/pages/management/user/profile/index.tsx +++ b/src/pages/management/user/profile/index.tsx @@ -12,77 +12,86 @@ import ProjectsTab from './projects-tab'; import TeamsTab from './teams-tab'; function UserProfile() { - const { avatar, account } = useUserInfo(); - const { colorTextBase } = useThemeToken(); - const [currentTabIndex, setcurrentTabIndex] = useState(0); + const { avatar, account } = useUserInfo(); + const { colorTextBase } = useThemeToken(); + const [currentTabIndex, setcurrentTabIndex] = useState(0); - const bgStyle: CSSProperties = { - background: `linear-gradient(rgba(0, 75, 80, 0.8), rgba(0, 75, 80, 0.8)) center center / cover no-repeat, url(${CoverImage})`, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center center', - }; + const bgStyle: CSSProperties = { + background: `linear-gradient(rgba(0, 75, 80, 0.8), rgba(0, 75, 80, 0.8)) center center / cover no-repeat, url(${CoverImage})`, + backgroundRepeat: 'no-repeat', + backgroundPosition: 'center center', + }; - const tabs = [ - { - icon: , - title: 'Profile', - content: , - }, - { - icon: , - title: 'Teams', - content: , - }, - { - icon: , - title: 'Projects', - content: , - }, - { - icon: , - title: 'Connections', - content: , - }, - ]; + const tabs = [ + { + icon: , + title: 'Profile', + content: , + }, + { + icon: , + title: 'Teams', + content: , + }, + { + icon: , + title: 'Projects', + content: , + }, + { + icon: , + title: 'Connections', + content: , + }, + ]; - return ( - <> - -
-
- -
- {account} - TS FullStack -
-
-
-
-
- {tabs.map((tab, index) => ( - - ))} -
-
- -
{tabs[currentTabIndex].content}
- - ); + return ( + <> + +
+
+ +
+ {account} + + TS FullStack + +
+
+
+
+
+ {tabs.map((tab, index) => ( + + ))} +
+
+ +
{tabs[currentTabIndex].content}
+ + ); } export default UserProfile; diff --git a/src/pages/management/user/profile/profile-tab.tsx b/src/pages/management/user/profile/profile-tab.tsx index faceda9..ef7651b 100644 --- a/src/pages/management/user/profile/profile-tab.tsx +++ b/src/pages/management/user/profile/profile-tab.tsx @@ -11,353 +11,383 @@ import ProTag from '@/theme/antd/components/tag'; import { useThemeToken } from '@/theme/hooks'; interface DataType { - key: string; - avatar: string; - name: string; - date: string; - leader: string; - team: string[]; - status: number; + key: string; + avatar: string; + name: string; + date: string; + leader: string; + team: string[]; + status: number; } export default function ProfileTab() { - const { account } = useUserInfo(); - const theme = useThemeToken(); - const AboutItems = [ - { icon: , label: 'Full Name', val: account }, - { icon: , label: 'Role', val: 'Developer' }, - { icon: , label: 'Country', val: 'USA' }, - { icon: , label: 'Language', val: 'English' }, - { icon: , label: 'Contact', val: '(123)456-7890' }, - { icon: , label: 'Email', val: account }, - ]; + const { account } = useUserInfo(); + const theme = useThemeToken(); + const AboutItems = [ + { icon: , label: 'Full Name', val: account }, + { + icon: , + label: 'Role', + val: 'Developer', + }, + { icon: , label: 'Country', val: 'USA' }, + { icon: , label: 'Language', val: 'English' }, + { + icon: , + label: 'Contact', + val: '(123)456-7890', + }, + { icon: , label: 'Email', val: account }, + ]; - const ConnectionsItems = [ - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - connections: `${faker.number.int(100)} Connections`, - connected: faker.datatype.boolean(), - }, + const ConnectionsItems = [ + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + connections: `${faker.number.int(100)} Connections`, + connected: faker.datatype.boolean(), + }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - connections: `${faker.number.int(100)} Connections`, - connected: faker.datatype.boolean(), - }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + connections: `${faker.number.int(100)} Connections`, + connected: faker.datatype.boolean(), + }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - connections: `${faker.number.int(100)} Connections`, - connected: faker.datatype.boolean(), - }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + connections: `${faker.number.int(100)} Connections`, + connected: faker.datatype.boolean(), + }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - connections: `${faker.number.int(100)} Connections`, - connected: faker.datatype.boolean(), - }, + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + connections: `${faker.number.int(100)} Connections`, + connected: faker.datatype.boolean(), + }, - { - avatar: faker.image.avatarLegacy(), - name: faker.person.fullName(), - connections: `${faker.number.int(100)} Connections`, - connected: faker.datatype.boolean(), - }, - ]; + { + avatar: faker.image.avatarLegacy(), + name: faker.person.fullName(), + connections: `${faker.number.int(100)} Connections`, + connected: faker.datatype.boolean(), + }, + ]; - const TeamItems = [ - { - avatar: , - name: 'React Developers', - members: `${faker.number.int(100)} Members`, - tag: Developer, - }, - { - avatar: , - name: 'UI Designer', - members: `${faker.number.int(100)} Members`, - tag: Designer, - }, - { - avatar: , - name: 'Test Team', - members: `${faker.number.int(100)} Members`, - tag: Test, - }, - { - avatar: , - name: 'Nest.js Developers', - members: `${faker.number.int(100)} Members`, - tag: Developer, - }, + const TeamItems = [ + { + avatar: , + name: 'React Developers', + members: `${faker.number.int(100)} Members`, + tag: Developer, + }, + { + avatar: , + name: 'UI Designer', + members: `${faker.number.int(100)} Members`, + tag: Designer, + }, + { + avatar: , + name: 'Test Team', + members: `${faker.number.int(100)} Members`, + tag: Test, + }, + { + avatar: , + name: 'Nest.js Developers', + members: `${faker.number.int(100)} Members`, + tag: Developer, + }, - { - avatar: , - name: 'Digital Marketing', - members: `${faker.number.int(100)} Members`, - tag: Marketing, - }, - ]; + { + avatar: , + name: 'Digital Marketing', + members: `${faker.number.int(100)} Members`, + tag: Marketing, + }, + ]; - const fakeProjectItems = () => { - const arr: DataType[] = []; - for (let i = 0; i <= 25; i += 1) { - arr.push({ - key: faker.string.uuid(), - avatar: faker.image.urlPicsumPhotos(), - name: faker.company.buzzPhrase(), - date: faker.date.past().toDateString(), - leader: faker.person.fullName(), - team: fakeAvatars(faker.number.int({ min: 2, max: 5 })), - status: faker.number.int({ min: 50, max: 99 }), - }); - } - return arr; - }; + const fakeProjectItems = () => { + const arr: DataType[] = []; + for (let i = 0; i <= 25; i += 1) { + arr.push({ + key: faker.string.uuid(), + avatar: faker.image.urlPicsumPhotos(), + name: faker.company.buzzPhrase(), + date: faker.date.past().toDateString(), + leader: faker.person.fullName(), + team: fakeAvatars(faker.number.int({ min: 2, max: 5 })), + status: faker.number.int({ min: 50, max: 99 }), + }); + } + return arr; + }; - const ProjectColumns: ColumnsType = [ - { - title: 'NAME', - dataIndex: 'name', - render: (_, record) => ( -
- -
- {record.name} - {record.date} -
-
- ), - }, - { - title: 'LEADER', - dataIndex: 'leader', - render: (val) => {val}, - }, - { - title: 'TEAM', - dataIndex: 'team', - render: (val: string[]) => ( - - {val.map((item, index) => ( - - ))} - - ), - }, - { - title: 'STATUS', - dataIndex: 'status', - render: (val) => ( - - ), - }, - { - title: 'ACTIONS', - dataIndex: 'action', - render: () => ( - - - - - - ), - }, - ]; + const ProjectColumns: ColumnsType = [ + { + title: 'NAME', + dataIndex: 'name', + render: (_, record) => ( +
+ +
+ {record.name} + {record.date} +
+
+ ), + }, + { + title: 'LEADER', + dataIndex: 'leader', + render: (val) => {val}, + }, + { + title: 'TEAM', + dataIndex: 'team', + render: (val: string[]) => ( + + {val.map((item, index) => ( + + ))} + + ), + }, + { + title: 'STATUS', + dataIndex: 'status', + render: (val) => ( + + ), + }, + { + title: 'ACTIONS', + dataIndex: 'action', + render: () => ( + + + + + + ), + }, + ]; - return ( - <> - - - -
- About - {faker.lorem.paragraph()} + return ( + <> + +
+ +
+ About + {faker.lorem.paragraph()} -
- {AboutItems.map((item, index) => ( -
-
{item.icon}
-
{item.label}:
-
{item.val}
-
- ))} -
-
- - +
+ {AboutItems.map((item, index) => ( +
+
{item.icon}
+
{item.label}:
+
{item.val}
+
+ ))} +
+ + + - - - Activity Timeline - -
- 8 Invoices have been paid -
Wednesday
-
- - Invoices have been paid to the company. - + + + Activity Timeline + +
+ + 8 Invoices have been paid + +
Wednesday
+
+ + Invoices have been paid to the company. + -
- - invoice.pdf -
- - ), - }, - { - color: theme.colorPrimaryActive, - children: ( -
-
- Create a new project for client 😎 -
April, 18
-
- - Invoices have been paid to the company. - -
- + + + invoice.pdf + +
+
+ ), + }, + { + color: theme.colorPrimaryActive, + children: ( +
+
+ + Create a new project for client 😎 + +
April, 18
+
+ + Invoices have been paid to the company. + +
+ + + {faker.person.fullName()} (client) + +
+
+ ), + }, + { + color: theme.colorInfo, + children: ( +
+
+ + Order #37745 from September + +
January, 10
+
+ + Invoices have been paid to the company. + +
+ ), + }, + { + color: theme.colorWarning, + children: ( +
+
+ + Public Meeting + +
September, 30
+
+
+ ), + }, + ]} /> - - {faker.person.fullName()} (client) - - - - ), - }, - { - color: theme.colorInfo, - children: ( -
-
- Order #37745 from September -
January, 10
-
- - Invoices have been paid to the company. - -
- ), - }, - { - color: theme.colorWarning, - children: ( -
-
- Public Meeting -
September, 30
-
-
- ), - }, - ]} - /> - - - - - - -
- Connections - - - -
-
- {ConnectionsItems.map((item, index) => ( -
- -
- {item.name} - {item.connections} -
-
- -
-
- ))} -
+ + + + + + +
+ Connections + + + +
+
+ {ConnectionsItems.map((item, index) => ( +
+ +
+ {item.name} + + {item.connections} + +
+
+ +
+
+ ))} +
-
- View all connections -
- - - - -
- Teams - - - -
-
- {TeamItems.map((item, index) => ( -
- {item.avatar} -
- {item.name} - {item.members} -
- {item.tag} -
- ))} -
+
+ View all connections +
+ + + + +
+ Teams + + + +
+
+ {TeamItems.map((item, index) => ( +
+ {item.avatar} +
+ {item.name} + + {item.members} + +
+ {item.tag} +
+ ))} +
-
- View all members -
- - - - - - - Projects -
- -
- - - - - - - ); +
+ View all members +
+ + + + + + + Projects +
+ +
+ + + + + + + ); } diff --git a/src/pages/management/user/profile/projects-tab.tsx b/src/pages/management/user/profile/projects-tab.tsx index a87ec76..fa891c5 100644 --- a/src/pages/management/user/profile/projects-tab.tsx +++ b/src/pages/management/user/profile/projects-tab.tsx @@ -8,134 +8,142 @@ import { IconButton, Iconify } from '@/components/icon'; import ProTag from '@/theme/antd/components/tag'; export default function ProjectsTab() { - const items = [ - { - icon: , - name: 'Admin Template', - client: faker.person.fullName(), - desc: 'Time is our most valuable asset, that is why we want to help you save it by creating…', - members: fakeAvatars(15), - startDate: dayjs(faker.date.past({ years: 1 })), - deadline: dayjs(faker.date.future({ years: 1 })), - messages: 236, - allHours: '98/135', - allTasks: faker.number.int({ min: 60, max: 99 }), - closedTasks: faker.number.int({ min: 30, max: 60 }), - }, - { - icon: , - name: 'App Design', - desc: 'App design combines the user interface (UI) and user experience (UX). ', - client: faker.person.fullName(), - members: fakeAvatars(27), - startDate: dayjs(faker.date.past({ years: 1 })), - deadline: dayjs(faker.date.future({ years: 1 })), - messages: 236, - allHours: '880/421', - allTasks: faker.number.int({ min: 60, max: 99 }), - closedTasks: faker.number.int({ min: 30, max: 60 }), - }, - { - icon: , - name: 'Figma Dashboard', - desc: 'Use this template to organize your design project. Some of the key features are… ', - client: faker.person.fullName(), - members: fakeAvatars(32), - startDate: dayjs(faker.date.past({ years: 1 })), - deadline: dayjs(faker.date.future({ years: 1 })), - messages: 236, - allHours: '1.2k/820', - allTasks: faker.number.int({ min: 60, max: 99 }), - closedTasks: faker.number.int({ min: 30, max: 60 }), - }, - { - icon: , - name: 'Create Website', - desc: 'Your domain name should reflect your products or services so that your... ', - client: faker.person.fullName(), - members: fakeAvatars(221), - startDate: dayjs(faker.date.past({ years: 1 })), - deadline: dayjs(faker.date.future({ years: 1 })), - messages: 236, - allHours: '142/420', - allTasks: faker.number.int({ min: 60, max: 99 }), - closedTasks: faker.number.int({ min: 30, max: 60 }), - }, - { - icon: , - name: 'Logo Design', - desc: 'Premium logo designs created by top logo designers. Create the branding of business. ', - client: faker.person.fullName(), - members: fakeAvatars(125), - startDate: dayjs(faker.date.past({ years: 1 })), - deadline: dayjs(faker.date.future({ years: 1 })), - messages: 232, - allHours: '580/445', - allTasks: faker.number.int({ min: 60, max: 99 }), - closedTasks: faker.number.int({ min: 30, max: 60 }), - }, - ]; - return ( - - {items.map((item) => ( - - -
- {item.icon} + const items = [ + { + icon: , + name: 'Admin Template', + client: faker.person.fullName(), + desc: 'Time is our most valuable asset, that is why we want to help you save it by creating…', + members: fakeAvatars(15), + startDate: dayjs(faker.date.past({ years: 1 })), + deadline: dayjs(faker.date.future({ years: 1 })), + messages: 236, + allHours: '98/135', + allTasks: faker.number.int({ min: 60, max: 99 }), + closedTasks: faker.number.int({ min: 30, max: 60 }), + }, + { + icon: , + name: 'App Design', + desc: 'App design combines the user interface (UI) and user experience (UX). ', + client: faker.person.fullName(), + members: fakeAvatars(27), + startDate: dayjs(faker.date.past({ years: 1 })), + deadline: dayjs(faker.date.future({ years: 1 })), + messages: 236, + allHours: '880/421', + allTasks: faker.number.int({ min: 60, max: 99 }), + closedTasks: faker.number.int({ min: 30, max: 60 }), + }, + { + icon: , + name: 'Figma Dashboard', + desc: 'Use this template to organize your design project. Some of the key features are… ', + client: faker.person.fullName(), + members: fakeAvatars(32), + startDate: dayjs(faker.date.past({ years: 1 })), + deadline: dayjs(faker.date.future({ years: 1 })), + messages: 236, + allHours: '1.2k/820', + allTasks: faker.number.int({ min: 60, max: 99 }), + closedTasks: faker.number.int({ min: 30, max: 60 }), + }, + { + icon: , + name: 'Create Website', + desc: 'Your domain name should reflect your products or services so that your... ', + client: faker.person.fullName(), + members: fakeAvatars(221), + startDate: dayjs(faker.date.past({ years: 1 })), + deadline: dayjs(faker.date.future({ years: 1 })), + messages: 236, + allHours: '142/420', + allTasks: faker.number.int({ min: 60, max: 99 }), + closedTasks: faker.number.int({ min: 30, max: 60 }), + }, + { + icon: , + name: 'Logo Design', + desc: 'Premium logo designs created by top logo designers. Create the branding of business. ', + client: faker.person.fullName(), + members: fakeAvatars(125), + startDate: dayjs(faker.date.past({ years: 1 })), + deadline: dayjs(faker.date.future({ years: 1 })), + messages: 232, + allHours: '580/445', + allTasks: faker.number.int({ min: 60, max: 99 }), + closedTasks: faker.number.int({ min: 30, max: 60 }), + }, + ]; + return ( + + {items.map((item) => ( +
+ +
+ {item.icon} -
- {item.name} - Client: {item.client} -
+
+ {item.name} + + Client: {item.client} + +
-
- - - -
-
+
+ + + +
+ -
-
- - Start Date: - {item.startDate.format('DD/MM/YYYY')} - +
+
+ + Start Date: + + {item.startDate.format('DD/MM/YYYY')} + + - - Deadline: - {item.deadline.format('DD/MM/YYYY')} - -
- {item.desc} -
+ + Deadline: + + {item.deadline.format('DD/MM/YYYY')} + + +
+ {item.desc} +
- + -
-
- - All Hours: - {item.allHours} - +
+
+ + All Hours: + {item.allHours} + - {item.deadline.diff(dayjs(), 'day')} days left -
-
- - {item.members.map((memberAvatar, index) => ( - - ))} - -
- - {item.messages} -
-
-
- - - ))} - - ); + + {item.deadline.diff(dayjs(), 'day')} days left + +
+
+ + {item.members.map((memberAvatar, index) => ( + + ))} + +
+ + {item.messages} +
+
+
+ + + ))} + + ); } diff --git a/src/pages/management/user/profile/teams-tab.tsx b/src/pages/management/user/profile/teams-tab.tsx index 9add2c3..2fe3a84 100644 --- a/src/pages/management/user/profile/teams-tab.tsx +++ b/src/pages/management/user/profile/teams-tab.tsx @@ -7,79 +7,79 @@ import { IconButton, Iconify } from '@/components/icon'; import ProTag from '@/theme/antd/components/tag'; export default function TeamsTab() { - const items = [ - { - icon: , - name: 'React Developers', - desc: 'We don’t make assumptions about the rest of your technology stack, so you can develop new features in React.', - members: fakeAvatars(25), - tags: ['React', 'AntD'], - }, - { - icon: , - name: 'Vue.js Dev Team', - desc: 'The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.', - members: fakeAvatars(20), - tags: ['Vue.js', 'Developer'], - }, - { - icon: , - name: 'Figma Resources', - desc: 'Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers.', - members: fakeAvatars(45), - tags: ['UI/UX', 'Figma'], - }, - { - icon: , - name: 'Only Beginners', - desc: 'Learn the basics of how websites work, front-end vs back-end, and using a code editor. Learn basic HTML, CSS, and…', - members: fakeAvatars(50), - tags: ['CSS', 'HTML'], - }, - { - icon: , - name: 'Creative Designers', - desc: 'A design or product team is more than just the people on it. A team includes the people, the roles they play. ', - members: fakeAvatars(55), - tags: ['Sketch', 'XD'], - }, - ]; - return ( - - {items.map((item) => ( - - -
- {item.icon} - {item.name} + const items = [ + { + icon: , + name: 'React Developers', + desc: 'We don’t make assumptions about the rest of your technology stack, so you can develop new features in React.', + members: fakeAvatars(25), + tags: ['React', 'AntD'], + }, + { + icon: , + name: 'Vue.js Dev Team', + desc: 'The development of Vue and its ecosystem is guided by an international team, some of whom have chosen to be featured below.', + members: fakeAvatars(20), + tags: ['Vue.js', 'Developer'], + }, + { + icon: , + name: 'Figma Resources', + desc: 'Explore, install, use, and remix thousands of plugins and files published to the Figma Community by designers and developers.', + members: fakeAvatars(45), + tags: ['UI/UX', 'Figma'], + }, + { + icon: , + name: 'Only Beginners', + desc: 'Learn the basics of how websites work, front-end vs back-end, and using a code editor. Learn basic HTML, CSS, and…', + members: fakeAvatars(50), + tags: ['CSS', 'HTML'], + }, + { + icon: , + name: 'Creative Designers', + desc: 'A design or product team is more than just the people on it. A team includes the people, the roles they play. ', + members: fakeAvatars(55), + tags: ['Sketch', 'XD'], + }, + ]; + return ( + + {items.map((item) => ( +
+ +
+ {item.icon} + {item.name} -
- - - - - - -
-
-
{item.desc}
-
- - {item.members.map((memberAvatar, index) => ( - - ))} - -
- {item.tags.map((tag) => ( - - {tag} - - ))} -
-
- - - ))} - - ); +
+ + + + + + +
+ +
{item.desc}
+
+ + {item.members.map((memberAvatar, index) => ( + + ))} + +
+ {item.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + + ))} + + ); } diff --git a/src/pages/menu-level/menu-level-1a/index.tsx b/src/pages/menu-level/menu-level-1a/index.tsx index 3a50902..7f4f0e7 100644 --- a/src/pages/menu-level/menu-level-1a/index.tsx +++ b/src/pages/menu-level/menu-level-1a/index.tsx @@ -1,5 +1,5 @@ import { Typography } from 'antd'; export default function MenuLevel() { - return Menu Level: 1a; + return Menu Level: 1a; } diff --git a/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx b/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx index 9196738..8b05da7 100644 --- a/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx +++ b/src/pages/menu-level/menu-level-1b/menu-level-2a/index.tsx @@ -1,5 +1,5 @@ import { Typography } from 'antd'; export default function MenuLevel() { - return Menu Level: 2a; + return Menu Level: 2a; } diff --git a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx index 295ea3a..fefd471 100644 --- a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx +++ b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3a/index.tsx @@ -1,5 +1,5 @@ import { Typography } from 'antd'; export default function MenuLevel() { - return Menu Level: 3a; + return Menu Level: 3a; } diff --git a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx index 184dd02..7a9ff2e 100644 --- a/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx +++ b/src/pages/menu-level/menu-level-1b/menu-level-2b/menu-level-3b/index.tsx @@ -1,5 +1,5 @@ import { Typography } from 'antd'; export default function MenuLevel() { - return Menu Level: 3b; + return Menu Level: 3b; } diff --git a/src/pages/setting/menus/list.page.tsx b/src/pages/setting/menus/list.page.tsx index d22412a..d974dab 100644 --- a/src/pages/setting/menus/list.page.tsx +++ b/src/pages/setting/menus/list.page.tsx @@ -1,9 +1,7 @@ -import { Button, Card, Col, Form, Input, Row, Space, Tree, message } from 'antd'; -import { useState } from 'react'; - import { SearchOutlined } from '@ant-design/icons'; - +import { Button, Card, Col, Form, Input, Row, Space, Tree, message } from 'antd'; import { DataNode } from 'antd/es/tree'; +import { useState } from 'react'; import { useDeleteMenu, useListMenuTree } from '@/services/menu'; diff --git a/src/pages/sys/error/Page403.tsx b/src/pages/sys/error/Page403.tsx index 2e13f3b..9bf59e5 100644 --- a/src/pages/sys/error/Page403.tsx +++ b/src/pages/sys/error/Page403.tsx @@ -11,119 +11,125 @@ import { useThemeToken } from '@/theme/hooks'; const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; export default function Page403() { - const { - colorBgBase, - colorTextBase, - colorPrimary, - colorPrimaryActive, - colorPrimaryTextActive, - colorPrimaryHover, - } = useThemeToken(); - return ( - <> - - 403 No Permission! - + const { + colorBgBase, + colorTextBase, + colorPrimary, + colorPrimaryActive, + colorPrimaryTextActive, + colorPrimaryHover, + } = useThemeToken(); + return ( + <> + + 403 No Permission! + -
- - - - No permission - - +
+ + + + No permission + + - - - The page you are trying access has restricted access. Please refer to your system - administrator - - + + + The page you are trying access has restricted access. Please refer to + your system administrator + + - - - - - - - - - - - - - + + + + + + + + + + + + + - {/* hand */} - - + {/* hand */} + + - {/* 0 */} - - {/* 4_3 */} - - - - - - - - - + {/* 0 */} + + {/* 4_3 */} + + + + + + + + + - - Go to Home - - -
- - ); + + Go to Home + + +
+ + ); } diff --git a/src/pages/sys/error/Page404.tsx b/src/pages/sys/error/Page404.tsx index 273ef63..f031965 100644 --- a/src/pages/sys/error/Page404.tsx +++ b/src/pages/sys/error/Page404.tsx @@ -11,110 +11,116 @@ import { useThemeToken } from '@/theme/hooks'; const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; export default function Page404() { - const { - colorBgBase, - colorTextBase, - colorPrimary, - colorPrimaryActive, - colorPrimaryTextActive, - colorPrimaryHover, - } = useThemeToken(); - return ( - <> - - 404 Page Not Found! - + const { + colorBgBase, + colorTextBase, + colorPrimary, + colorPrimaryActive, + colorPrimaryTextActive, + colorPrimaryHover, + } = useThemeToken(); + return ( + <> + + 404 Page Not Found! + -
- - - - Sorry, Page Not Found! - - +
+ + + + Sorry, Page Not Found! + + - - - Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL? - Be sure to check your spelling. - - + + + Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve + mistyped the URL? Be sure to check your spelling. + + - - - - - - - - - {/* background */} - - {/* character */} - - {/* sun */} - - {/* sun */} - - {/* 0 */} - - {/* 4_4 */} - - {/* cloud */} - - - - - - - - - + + + + + + + + + {/* background */} + + {/* character */} + + {/* sun */} + + {/* sun */} + + {/* 0 */} + + {/* 4_4 */} + + {/* cloud */} + + + + + + + + + - - Go to Home - - -
- - ); + + Go to Home + + +
+ + ); } diff --git a/src/pages/sys/error/Page500.tsx b/src/pages/sys/error/Page500.tsx index 7e58ebe..18c0ba2 100644 --- a/src/pages/sys/error/Page500.tsx +++ b/src/pages/sys/error/Page500.tsx @@ -11,151 +11,157 @@ import { useThemeToken } from '@/theme/hooks'; const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; export default function Page() { - const { colorBgBase, colorTextBase, colorPrimary } = useThemeToken(); - return ( - <> - - 500 Internal Server Error! - + const { colorBgBase, colorTextBase, colorPrimary } = useThemeToken(); + return ( + <> + + 500 Internal Server Error! + -
- - - - 500 Internal Server Error - - +
+ + + + 500 Internal Server Error + + - - - There was an error, please try again later. - - + + + There was an error, please try again later. + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - Go to Home - - -
- - ); + + Go to Home + + +
+ + ); } diff --git a/src/pages/sys/login/Login.tsx b/src/pages/sys/login/Login.tsx index 236e547..f762f01 100644 --- a/src/pages/sys/login/Login.tsx +++ b/src/pages/sys/login/Login.tsx @@ -19,48 +19,50 @@ import ResetForm from './ResetForm'; const { VITE_APP_HOMEPAGE: HOMEPAGE } = import.meta.env; function Login() { - const { t } = useTranslation(); - const token = useUserToken(); - const { colorBgElevated } = useThemeToken(); + const { t } = useTranslation(); + const token = useUserToken(); + const { colorBgElevated } = useThemeToken(); - // 判断用户是否有权限 - if (token.accessToken) { - // 如果有授权，则跳转到首页 - return ; - } + // 判断用户是否有权限 + if (token.accessToken) { + // 如果有授权，则跳转到首页 + return ; + } - const gradientBg = Color(colorBgElevated).alpha(0.9).toString(); - const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(${Overlay2})`; + const gradientBg = Color(colorBgElevated).alpha(0.9).toString(); + const bg = `linear-gradient(${gradientBg}, ${gradientBg}) center center / cover no-repeat,url(${Overlay2})`; - return ( - -
-
Slash Admin
- - - {t('sys.login.signInSecondTitle')} - -
+ return ( + +
+
+ Slash Admin +
+ + + {t('sys.login.signInSecondTitle')} + +
-
- - - - - - - -
+
+ + + + + + + +
-
- -
- - ); +
+ +
+ + ); } export default Login; diff --git a/src/pages/sys/login/LoginForm.tsx b/src/pages/sys/login/LoginForm.tsx index 6b3a85f..a45967a 100644 --- a/src/pages/sys/login/LoginForm.tsx +++ b/src/pages/sys/login/LoginForm.tsx @@ -12,129 +12,148 @@ import { useThemeToken } from '@/theme/hooks'; import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider'; function LoginForm() { - const { t } = useTranslation(); - const themeToken = useThemeToken(); - const [loading, setLoading] = useState(false); + const { t } = useTranslation(); + const themeToken = useThemeToken(); + const [loading, setLoading] = useState(false); - const { loginState, setLoginState } = useLoginStateContext(); - const signIn = useSignIn(); + const { loginState, setLoginState } = useLoginStateContext(); + const signIn = useSignIn(); - if (loginState !== LoginStateEnum.LOGIN) return null; + if (loginState !== LoginStateEnum.LOGIN) return null; - const handleFinish = async ({ account, password }: SignInReq) => { - setLoading(true); - try { - await signIn({ account, password }); - } finally { - setLoading(false); - } - }; - return ( - <> -
{t('sys.login.signInFormTitle')}
-
-
- -
- Admin {t('sys.login.account')}: - - {DEFAULT_USER.account} - -
+ const handleFinish = async ({ account, password }: SignInReq) => { + setLoading(true); + try { + await signIn({ account, password }); + } finally { + setLoading(false); + } + }; + return ( + <> +
+ {t('sys.login.signInFormTitle')} +
+ +
+ +
+ + Admin {t('sys.login.account')}: + + + {DEFAULT_USER.account} + +
-
- Test {t('sys.login.account')}: - - {TEST_USER.account} - -
+
+ + Test {t('sys.login.account')}: + + + {TEST_USER.account} + +
-
- {t('sys.login.password')}: - - {DEFAULT_USER.password} - +
+ + {t('sys.login.password')}: + + + {DEFAULT_USER.password} + +
+
+ } + showIcon + />
-
- } - showIcon - /> - - - - - - - - - - - - {t('sys.login.rememberMe')} - - - - - - - - - - + + + + + + + + + + + {t('sys.login.rememberMe')} + + + + + + + + + + - - - - - - - - setLoginState(LoginStateEnum.REGISTER)}> - - - + + + + + + + + setLoginState(LoginStateEnum.REGISTER)}> + + + - {t('sys.login.otherSignIn')} + {t('sys.login.otherSignIn')} -
- - - -
- - - ); +
+ + + +
+ + + ); } export default LoginForm; diff --git a/src/pages/sys/login/MobileForm.tsx b/src/pages/sys/login/MobileForm.tsx index f82c46a..be33986 100644 --- a/src/pages/sys/login/MobileForm.tsx +++ b/src/pages/sys/login/MobileForm.tsx @@ -8,84 +8,98 @@ import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProv const { Countdown } = Statistic; function MobileForm() { - const { t } = useTranslation(); - const onFinish = (values: any) => { - console.log('Received values of form: ', values); - }; + const { t } = useTranslation(); + const onFinish = (values: any) => { + console.log('Received values of form: ', values); + }; - const [countdown, setCountdown] = useState(0); // 倒计时的秒数 - const [second, setSecond] = useState(0); - const { loginState, backToLogin } = useLoginStateContext(); + const [countdown, setCountdown] = useState(0); // 倒计时的秒数 + const [second, setSecond] = useState(0); + const { loginState, backToLogin } = useLoginStateContext(); - if (loginState !== LoginStateEnum.MOBILE) return null; + if (loginState !== LoginStateEnum.MOBILE) return null; - const start = () => { - setCountdown(60); - setSecond(60); - }; + const start = () => { + setCountdown(60); + setSecond(60); + }; - const reset = () => { - // TODO: 发送验证码请求 + const reset = () => { + // TODO: 发送验证码请求 - // 启动倒计时 - setCountdown(0); - setSecond(60); - }; - return ( - <> -
- {t('sys.login.mobileSignInFormTitle')} -
- - - - - - - - - - - - - - - - - + // 启动倒计时 + setCountdown(0); + setSecond(60); + }; + return ( + <> +
+ {t('sys.login.mobileSignInFormTitle')} +
+ + + + + + + + + + + + + + + + + - { - reset(); - backToLogin(); - }} - /> - - - ); + { + reset(); + backToLogin(); + }} + /> + + + ); } export default MobileForm; diff --git a/src/pages/sys/login/QrCodeForm.tsx b/src/pages/sys/login/QrCodeForm.tsx index c1e260f..921a789 100644 --- a/src/pages/sys/login/QrCodeForm.tsx +++ b/src/pages/sys/login/QrCodeForm.tsx @@ -5,20 +5,22 @@ import { ReturnButton } from './components/ReturnButton'; import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider'; function QrCodeFrom() { - const { t } = useTranslation(); - const { loginState, backToLogin } = useLoginStateContext(); + const { t } = useTranslation(); + const { loginState, backToLogin } = useLoginStateContext(); - if (loginState !== LoginStateEnum.QR_CODE) return null; - return ( - <> -
{t('sys.login.qrSignInFormTitle')}
-
- -

{t('sys.login.scanSign')}

-
- - - ); + if (loginState !== LoginStateEnum.QR_CODE) return null; + return ( + <> +
+ {t('sys.login.qrSignInFormTitle')} +
+
+ +

{t('sys.login.scanSign')}

+
+ + + ); } export default QrCodeFrom; diff --git a/src/pages/sys/login/RegisterForm.tsx b/src/pages/sys/login/RegisterForm.tsx index d5f7958..7505b04 100644 --- a/src/pages/sys/login/RegisterForm.tsx +++ b/src/pages/sys/login/RegisterForm.tsx @@ -8,77 +8,84 @@ import { ReturnButton } from './components/ReturnButton'; import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider'; function RegisterForm() { - const { t } = useTranslation(); - const signUpMutation = useMutation(userService.signup); + const { t } = useTranslation(); + const signUpMutation = useMutation(userService.signup); - const { loginState, backToLogin } = useLoginStateContext(); - if (loginState !== LoginStateEnum.REGISTER) return null; + const { loginState, backToLogin } = useLoginStateContext(); + if (loginState !== LoginStateEnum.REGISTER) return null; - const onFinish = async (values: any) => { - console.log('Received values of form: ', values); - await signUpMutation.mutateAsync(values); - backToLogin(); - }; + const onFinish = async (values: any) => { + console.log('Received values of form: ', values); + await signUpMutation.mutateAsync(values); + backToLogin(); + }; - return ( - <> -
{t('sys.login.signUpFormTitle')}
-
- - - - - - - - - - ({ - validator(_, value) { - if (!value || getFieldValue('password') === value) { - return Promise.resolve(); - } - return Promise.reject(new Error(t('sys.login.diffPwd'))); - }, - }), - ]} - > - - - - - + return ( + <> +
+ {t('sys.login.signUpFormTitle')} +
+ + + + + + + + + + + ({ + validator(_, value) { + if (!value || getFieldValue('password') === value) { + return Promise.resolve(); + } + return Promise.reject(new Error(t('sys.login.diffPwd'))); + }, + }), + ]} + > + + + + + -
- {t('sys.login.registerAndAgree')} - - {t('sys.login.termsOfService')} - - {' & '} - - {t('sys.login.privacyPolicy')} - -
+
+ {t('sys.login.registerAndAgree')} + + {t('sys.login.termsOfService')} + + {' & '} + + {t('sys.login.privacyPolicy')} + +
- - - - ); + + + + ); } export default RegisterForm; diff --git a/src/pages/sys/login/ResetForm.tsx b/src/pages/sys/login/ResetForm.tsx index a0adb9f..537dc0f 100644 --- a/src/pages/sys/login/ResetForm.tsx +++ b/src/pages/sys/login/ResetForm.tsx @@ -7,41 +7,48 @@ import { ReturnButton } from './components/ReturnButton'; import { LoginStateEnum, useLoginStateContext } from './providers/LoginStateProvider'; function ResetForm() { - const onFinish = (values: any) => { - console.log('Received values of form: ', values); - }; - - const { t } = useTranslation(); - const { loginState, backToLogin } = useLoginStateContext(); - - if (loginState !== LoginStateEnum.RESET_PASSWORD) return null; - - return ( - <> -
- -
-
- {t('sys.login.forgetFormTitle')} -
-
-

{t('sys.login.forgetFormSecondTitle')}

- - - - - - - - - - - ); + const onFinish = (values: any) => { + console.log('Received values of form: ', values); + }; + + const { t } = useTranslation(); + const { loginState, backToLogin } = useLoginStateContext(); + + if (loginState !== LoginStateEnum.RESET_PASSWORD) return null; + + return ( + <> +
+ +
+
+ {t('sys.login.forgetFormTitle')} +
+
+

+ {t('sys.login.forgetFormSecondTitle')} +

+ + + + + + + + + + + ); } export default ResetForm; diff --git a/src/pages/sys/login/components/ReturnButton.tsx b/src/pages/sys/login/components/ReturnButton.tsx index 0c5a09b..cd626a6 100644 --- a/src/pages/sys/login/components/ReturnButton.tsx +++ b/src/pages/sys/login/components/ReturnButton.tsx @@ -3,16 +3,16 @@ import { useTranslation } from 'react-i18next'; import { MdArrowBackIosNew } from 'react-icons/md'; interface ReturnButtonProps { - onClick?: () => void; + onClick?: () => void; } export function ReturnButton({ onClick }: ReturnButtonProps) { - const { t } = useTranslation(); - return ( - - ); + const { t } = useTranslation(); + return ( + + ); } diff --git a/src/pages/sys/login/providers/LoginStateProvider.tsx b/src/pages/sys/login/providers/LoginStateProvider.tsx index a8f14e8..155cd00 100644 --- a/src/pages/sys/login/providers/LoginStateProvider.tsx +++ b/src/pages/sys/login/providers/LoginStateProvider.tsx @@ -1,39 +1,39 @@ import { PropsWithChildren, createContext, useContext, useMemo, useState } from 'react'; export enum LoginStateEnum { - LOGIN, - REGISTER, - RESET_PASSWORD, - MOBILE, - QR_CODE, + LOGIN, + REGISTER, + RESET_PASSWORD, + MOBILE, + QR_CODE, } interface LoginStateContextType { - loginState: LoginStateEnum; - setLoginState: (loginState: LoginStateEnum) => void; - backToLogin: () => void; + loginState: LoginStateEnum; + setLoginState: (loginState: LoginStateEnum) => void; + backToLogin: () => void; } const LoginStateContext = createContext({ - loginState: LoginStateEnum.LOGIN, - setLoginState: () => {}, - backToLogin: () => {}, + loginState: LoginStateEnum.LOGIN, + setLoginState: () => {}, + backToLogin: () => {}, }); export function useLoginStateContext() { - const context = useContext(LoginStateContext); - return context; + const context = useContext(LoginStateContext); + return context; } export function LoginStateProvider({ children }: PropsWithChildren) { - const [loginState, setLoginState] = useState(LoginStateEnum.LOGIN); + const [loginState, setLoginState] = useState(LoginStateEnum.LOGIN); - function backToLogin() { - setLoginState(LoginStateEnum.LOGIN); - } + function backToLogin() { + setLoginState(LoginStateEnum.LOGIN); + } - const value: LoginStateContextType = useMemo( - () => ({ loginState, setLoginState, backToLogin }), - [loginState], - ); - return {children}; + const value: LoginStateContextType = useMemo( + () => ({ loginState, setLoginState, backToLogin }), + [loginState], + ); + return {children}; } diff --git a/src/pages/sys/others/blank.tsx b/src/pages/sys/others/blank.tsx index ac240b2..1aeee85 100644 --- a/src/pages/sys/others/blank.tsx +++ b/src/pages/sys/others/blank.tsx @@ -1,5 +1,5 @@ import Card from '@/components/card'; export default function BlankPage() { - return ; + return ; } diff --git a/src/pages/sys/others/calendar/calendar-event-form.tsx b/src/pages/sys/others/calendar/calendar-event-form.tsx index 053a0f7..3e2351e 100644 --- a/src/pages/sys/others/calendar/calendar-event-form.tsx +++ b/src/pages/sys/others/calendar/calendar-event-form.tsx @@ -8,162 +8,161 @@ import { useEffect } from 'react'; import { IconButton, Iconify } from '@/components/icon'; export type CalendarEventFormFieldType = Pick & { - id: string; - description?: string; - start?: Dayjs; - end?: Dayjs; + id: string; + description?: string; + start?: Dayjs; + end?: Dayjs; }; type Props = { - type: 'edit' | 'add'; - open: boolean; - onCancel: VoidFunction; - onEdit: (event: CalendarEventFormFieldType) => void; - onCreate: (event: CalendarEventFormFieldType) => void; - onDelete: (id: string) => void; - initValues: CalendarEventFormFieldType; + type: 'edit' | 'add'; + open: boolean; + onCancel: VoidFunction; + onEdit: (event: CalendarEventFormFieldType) => void; + onCreate: (event: CalendarEventFormFieldType) => void; + onDelete: (id: string) => void; + initValues: CalendarEventFormFieldType; }; const COLORS = [ - '#00a76f', - '#8e33ff', - '#00b8d9', - '#003768', - '#22c55e', - '#ffab00', - '#ff5630', - '#7a0916', + '#00a76f', + '#8e33ff', + '#00b8d9', + '#003768', + '#22c55e', + '#ffab00', + '#ff5630', + '#7a0916', ]; export default function CalendarEventForm({ - type, - open, - onCancel, - initValues = { id: faker.string.uuid() }, - onEdit, - onCreate, - onDelete, + type, + open, + onCancel, + initValues = { id: faker.string.uuid() }, + onEdit, + onCreate, + onDelete, }: Props) { - const title = type === 'add' ? 'Add Event' : 'Edit Event'; - const [form] = Form.useForm(); + const title = type === 'add' ? 'Add Event' : 'Edit Event'; + const [form] = Form.useForm(); - useEffect(() => { - // 当 initValues 改变时，手动更新表单的值 - const { color = COLORS[0], ...others } = initValues; - form.setFieldsValue({ ...others, color }); - }, [initValues, form]); + useEffect(() => { + // 当 initValues 改变时，手动更新表单的值 + const { color = COLORS[0], ...others } = initValues; + form.setFieldsValue({ ...others, color }); + }, [initValues, form]); - // eslint-disable-next-line react/function-component-definition, react/no-unstable-nested-components - const ModalFooter: ModalFooterRender = (_, { OkBtn, CancelBtn }) => { - return ( -
- {type === 'edit' ? ( -
- { - onDelete(initValues.id); - onCancel(); - }} - > - - + // eslint-disable-next-line react/no-unstable-nested-components + const ModalFooter: ModalFooterRender = (_, { OkBtn, CancelBtn }) => { + return (
- - + {type === 'edit' ? ( +
+ { + onDelete(initValues.id); + onCancel(); + }} + > + + +
+ + +
+
+ ) : ( + <> + + + + )}
-
- ) : ( - <> - - - - )} -
- ); - }; + ); + }; - return ( - { - form - .validateFields() - .then((values) => { - form.resetFields(); + return ( + { + form.validateFields() + .then((values) => { + form.resetFields(); - const { id } = initValues; - const event = { ...values, id }; - if (type === 'add') onCreate(event); - if (type === 'edit') onEdit(event); - onCancel(); - }) - .catch((info) => { - console.log('Validate Failed:', info); - }); - }} - > -
- - label="Titile" - name="title" - rules={[{ required: true, message: 'Please input title!' }]} + const { id } = initValues; + const event = { ...values, id }; + if (type === 'add') onCreate(event); + if (type === 'edit') onEdit(event); + onCancel(); + }) + .catch((info) => { + console.log('Validate Failed:', info); + }); + }} > - - + + + label="Titile" + name="title" + rules={[{ required: true, message: 'Please input title!' }]} + > + + - label="Desc" name="description"> - - + label="Desc" name="description"> + + - - label="All day" - name="allDay" - valuePropName="checked" - > - - + + label="All day" + name="allDay" + valuePropName="checked" + > + + - - label="Start date" - name="start" - rules={[{ required: true, message: 'Please input start date!' }]} - > - - + + label="Start date" + name="start" + rules={[{ required: true, message: 'Please input start date!' }]} + > + + - - label="End date" - name="end" - rules={[{ required: true, message: 'Please input end date!' }]} - > - - + + label="End date" + name="end" + rules={[{ required: true, message: 'Please input end date!' }]} + > + + - - label="Color" - name="color" - getValueFromEvent={(e) => e.toHexString()} - > - - - - - ); + + label="Color" + name="color" + getValueFromEvent={(e) => e.toHexString()} + > + + + + + ); } diff --git a/src/pages/sys/others/calendar/calendar-event.tsx b/src/pages/sys/others/calendar/calendar-event.tsx index 083833f..b4c07c2 100644 --- a/src/pages/sys/others/calendar/calendar-event.tsx +++ b/src/pages/sys/others/calendar/calendar-event.tsx @@ -1,21 +1,21 @@ import type { EventContentArg } from '@fullcalendar/core'; export default function CalendarEvent(eventInfo: EventContentArg) { - const { timeText, event, backgroundColor } = eventInfo; + const { timeText, event, backgroundColor } = eventInfo; - return ( -
-
-
{timeText}
-
-
{event.title}
+ return ( +
+
+
{timeText}
+
+
{event.title}
+
+
-
-
- ); + ); } diff --git a/src/pages/sys/others/calendar/calendar-header.tsx b/src/pages/sys/others/calendar/calendar-header.tsx index 1a874c8..f93ee29 100644 --- a/src/pages/sys/others/calendar/calendar-header.tsx +++ b/src/pages/sys/others/calendar/calendar-header.tsx @@ -8,99 +8,107 @@ import { useResponsive } from '@/theme/hooks'; export type HandleMoveArg = 'next' | 'prev' | 'today'; export type ViewType = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listWeek'; type ViewTypeMenu = { - key: string; - label: string; - view: ViewType; - icon: ReactNode; + key: string; + label: string; + view: ViewType; + icon: ReactNode; }; type Props = { - now: Date; - view: ViewType; - onMove: (action: HandleMoveArg) => void; - onCreate: VoidFunction; - onViewTypeChange: (view: ViewType) => void; + now: Date; + view: ViewType; + onMove: (action: HandleMoveArg) => void; + onCreate: VoidFunction; + onViewTypeChange: (view: ViewType) => void; }; export default function CalendarHeader({ now, view, onMove, onCreate, onViewTypeChange }: Props) { - const { screenMap } = useResponsive(); + const { screenMap } = useResponsive(); - const items = useMemo( - () => [ - { - key: '1', - label: 'Month', - view: 'dayGridMonth', - icon: , - }, - { - key: '2', - label: 'Week', - view: 'timeGridWeek', - icon: , - }, - { - key: '3', - label: 'Day', - view: 'timeGridDay', - icon: , - }, - { - key: '4', - label: 'List', - view: 'listWeek', - icon: , - }, - ], - [], - ); + const items = useMemo( + () => [ + { + key: '1', + label: 'Month', + view: 'dayGridMonth', + icon: , + }, + { + key: '2', + label: 'Week', + view: 'timeGridWeek', + icon: , + }, + { + key: '3', + label: 'Day', + view: 'timeGridDay', + icon: , + }, + { + key: '4', + label: 'List', + view: 'listWeek', + icon: , + }, + ], + [], + ); - const handleMenuClick: MenuProps['onClick'] = (e) => { - const selectedViewType = items.find((item) => item.key === e.key)!; - onViewTypeChange(selectedViewType.view); - }; + const handleMenuClick: MenuProps['onClick'] = (e) => { + const selectedViewType = items.find((item) => item.key === e.key)!; + onViewTypeChange(selectedViewType.view); + }; - const viewTypeMenu = (view: ViewType) => { - const { icon, label } = items.find((item) => item.view === view)!; - return ( -
- {icon} - {label} - -
- ); - }; + const viewTypeMenu = (view: ViewType) => { + const { icon, label } = items.find((item) => item.view === view)!; + return ( +
+ {icon} + {label} + +
+ ); + }; - return ( -
- {screenMap.lg && ( - - - - )} + return ( +
+ {screenMap.lg && ( + + + + )} -
- - onMove('prev')} size={20} /> - - {dayjs(now).format('DD MMM YYYY')} - - onMove('next')} size={20} /> - -
+
+ + onMove('prev')} + size={20} + /> + + {dayjs(now).format('DD MMM YYYY')} + + onMove('next')} + size={20} + /> + +
-
- - -
-
- ); +
+ + +
+
+ ); } diff --git a/src/pages/sys/others/calendar/event-utils.ts b/src/pages/sys/others/calendar/event-utils.ts index a361213..98b41bf 100644 --- a/src/pages/sys/others/calendar/event-utils.ts +++ b/src/pages/sys/others/calendar/event-utils.ts @@ -3,58 +3,58 @@ import { EventInput } from '@fullcalendar/core'; import dayjs from 'dayjs'; export const INITIAL_EVENTS: EventInput[] = [ - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().toISOString(), - end: dayjs().add(10, 'hour').toISOString(), - color: '#7a0916', - }, - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().add(1, 'day').toISOString(), - end: dayjs().add(3, 'day').toISOString(), - allDay: faker.datatype.boolean(), - color: '#00b8d9', - }, - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().add(3, 'day').toISOString(), - end: dayjs().add(5, 'day').toISOString(), - allDay: faker.datatype.boolean(), - color: '#ff5630', - }, - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().add(7, 'day').toISOString(), - end: dayjs().add(8, 'day').toISOString(), - allDay: faker.datatype.boolean(), - color: '#ffab00', - }, - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().add(7, 'day').toISOString(), - end: dayjs().add(8, 'day').toISOString(), - allDay: faker.datatype.boolean(), - color: '#ffab00', - }, - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().add(8, 'day').toISOString(), - end: dayjs().add(9, 'day').toISOString(), - allDay: faker.datatype.boolean(), - color: '#8e33ff', - }, - { - id: faker.string.uuid(), - title: faker.lorem.words({ min: 2, max: 5 }), - start: dayjs().add(10, 'day').toISOString(), - end: dayjs().add(11, 'day').toISOString(), - color: '#00a76f', - }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().toISOString(), + end: dayjs().add(10, 'hour').toISOString(), + color: '#7a0916', + }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().add(1, 'day').toISOString(), + end: dayjs().add(3, 'day').toISOString(), + allDay: faker.datatype.boolean(), + color: '#00b8d9', + }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().add(3, 'day').toISOString(), + end: dayjs().add(5, 'day').toISOString(), + allDay: faker.datatype.boolean(), + color: '#ff5630', + }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().add(7, 'day').toISOString(), + end: dayjs().add(8, 'day').toISOString(), + allDay: faker.datatype.boolean(), + color: '#ffab00', + }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().add(7, 'day').toISOString(), + end: dayjs().add(8, 'day').toISOString(), + allDay: faker.datatype.boolean(), + color: '#ffab00', + }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().add(8, 'day').toISOString(), + end: dayjs().add(9, 'day').toISOString(), + allDay: faker.datatype.boolean(), + color: '#8e33ff', + }, + { + id: faker.string.uuid(), + title: faker.lorem.words({ min: 2, max: 5 }), + start: dayjs().add(10, 'day').toISOString(), + end: dayjs().add(11, 'day').toISOString(), + color: '#00a76f', + }, ]; diff --git a/src/pages/sys/others/calendar/index.tsx b/src/pages/sys/others/calendar/index.tsx index ed9e21b..a29e574 100644 --- a/src/pages/sys/others/calendar/index.tsx +++ b/src/pages/sys/others/calendar/index.tsx @@ -20,195 +20,195 @@ import { INITIAL_EVENTS } from './event-utils'; import { StyledCalendar } from './styles'; const DefaultEventInitValue = { - id: faker.string.uuid(), - title: '', - description: '', - allDay: false, - start: dayjs(), - end: dayjs(), - color: '', + id: faker.string.uuid(), + title: '', + description: '', + allDay: false, + start: dayjs(), + end: dayjs(), + color: '', }; export default function Calendar() { - const fullCalendarRef = useRef(null); - const [view, setView] = useState('dayGridMonth'); - const [date, setDate] = useState(new Date()); - const [open, setOpen] = useState(false); - const [eventInitValue, setEventInitValue] = - useState(DefaultEventInitValue); - const [eventFormType, setEventFormType] = useState<'add' | 'edit'>('add'); + const fullCalendarRef = useRef(null); + const [view, setView] = useState('dayGridMonth'); + const [date, setDate] = useState(new Date()); + const [open, setOpen] = useState(false); + const [eventInitValue, setEventInitValue] = + useState(DefaultEventInitValue); + const [eventFormType, setEventFormType] = useState<'add' | 'edit'>('add'); - const { themeMode } = useSettings(); - const { screenMap } = useResponsive(); + const { themeMode } = useSettings(); + const { screenMap } = useResponsive(); - useEffect(() => { - if (screenMap.xs) { - setView('listWeek'); - } - }, [screenMap]); - /** - * calendar header events - */ - const handleMove = (action: HandleMoveArg) => { - const calendarApi = fullCalendarRef.current!.getApi(); - switch (action) { - case 'prev': - calendarApi.prev(); - break; - case 'next': - calendarApi.next(); - break; - case 'today': - calendarApi.today(); - break; - default: - break; - } - setDate(calendarApi.getDate()); - }; - const handleViewTypeChange = (view: ViewType) => { - setView(view); - }; - - useLayoutEffect(() => { - const calendarApi = fullCalendarRef.current!.getApi(); - setTimeout(() => { - calendarApi.changeView(view); - }); - }, [view]); + useEffect(() => { + if (screenMap.xs) { + setView('listWeek'); + } + }, [screenMap]); + /** + * calendar header events + */ + const handleMove = (action: HandleMoveArg) => { + const calendarApi = fullCalendarRef.current!.getApi(); + switch (action) { + case 'prev': + calendarApi.prev(); + break; + case 'next': + calendarApi.next(); + break; + case 'today': + calendarApi.today(); + break; + default: + break; + } + setDate(calendarApi.getDate()); + }; + const handleViewTypeChange = (view: ViewType) => { + setView(view); + }; - /** - * calendar grid events - */ - // select date range - const handleDateSelect = (selectInfo: DateSelectArg) => { - const calendarApi = selectInfo.view.calendar; - calendarApi.unselect(); // clear date selection - setOpen(true); - setEventFormType('add'); - setEventInitValue({ - id: faker.string.uuid(), - title: '', - description: '', - start: dayjs(selectInfo.startStr), - end: dayjs(selectInfo.endStr), - allDay: selectInfo.allDay, - }); - }; + useLayoutEffect(() => { + const calendarApi = fullCalendarRef.current!.getApi(); + setTimeout(() => { + calendarApi.changeView(view); + }); + }, [view]); - /** - * calendar event events - */ - // click event and open modal - const handleEventClick = (arg: EventClickArg) => { - const { title, extendedProps, allDay, start, end, backgroundColor, id } = arg.event; - setOpen(true); - setEventFormType('edit'); - const newEventValue: CalendarEventFormFieldType = { - id, - title, - allDay, - color: backgroundColor, - description: extendedProps.description, + /** + * calendar grid events + */ + // select date range + const handleDateSelect = (selectInfo: DateSelectArg) => { + const calendarApi = selectInfo.view.calendar; + calendarApi.unselect(); // clear date selection + setOpen(true); + setEventFormType('add'); + setEventInitValue({ + id: faker.string.uuid(), + title: '', + description: '', + start: dayjs(selectInfo.startStr), + end: dayjs(selectInfo.endStr), + allDay: selectInfo.allDay, + }); }; - if (start) { - newEventValue.start = dayjs(start); - } - if (end) { - newEventValue.end = dayjs(end); - } - setEventInitValue(newEventValue); - }; - const handleCancel = () => { - setEventInitValue(DefaultEventInitValue); - setOpen(false); - }; - // edit event - const handleEdit = (values: CalendarEventFormFieldType) => { - const { id, title = '', description, start, end, allDay = false, color } = values; - const calendarApi = fullCalendarRef.current!.getApi(); - const oldEvent = calendarApi.getEventById(id); + /** + * calendar event events + */ + // click event and open modal + const handleEventClick = (arg: EventClickArg) => { + const { title, extendedProps, allDay, start, end, backgroundColor, id } = arg.event; + setOpen(true); + setEventFormType('edit'); + const newEventValue: CalendarEventFormFieldType = { + id, + title, + allDay, + color: backgroundColor, + description: extendedProps.description, + }; + if (start) { + newEventValue.start = dayjs(start); + } - const newEvent: EventInput = { - id, - title, - allDay, - color, - extendedProps: { - description, - }, + if (end) { + newEventValue.end = dayjs(end); + } + setEventInitValue(newEventValue); + }; + const handleCancel = () => { + setEventInitValue(DefaultEventInitValue); + setOpen(false); }; - if (start) newEvent.start = start.toDate(); - if (end) newEvent.end = end.toDate(); + // edit event + const handleEdit = (values: CalendarEventFormFieldType) => { + const { id, title = '', description, start, end, allDay = false, color } = values; + const calendarApi = fullCalendarRef.current!.getApi(); + const oldEvent = calendarApi.getEventById(id); - // 刷新日历显示 - oldEvent?.remove(); - calendarApi.addEvent(newEvent); - }; - // create event - const handleCreate = (values: CalendarEventFormFieldType) => { - const calendarApi = fullCalendarRef.current!.getApi(); - const { title = '', description, start, end, allDay = false, color } = values; + const newEvent: EventInput = { + id, + title, + allDay, + color, + extendedProps: { + description, + }, + }; + if (start) newEvent.start = start.toDate(); + if (end) newEvent.end = end.toDate(); - const newEvent: EventInput = { - id: faker.string.uuid(), - title, - allDay, - color, - extendedProps: { - description, - }, + // 刷新日历显示 + oldEvent?.remove(); + calendarApi.addEvent(newEvent); }; - if (start) newEvent.start = start.toDate(); - if (end) newEvent.end = end.toDate(); + // create event + const handleCreate = (values: CalendarEventFormFieldType) => { + const calendarApi = fullCalendarRef.current!.getApi(); + const { title = '', description, start, end, allDay = false, color } = values; - // 刷新日历显示 - calendarApi.addEvent(newEvent); - }; - // delete event - const handleDelete = (id: string) => { - const calendarApi = fullCalendarRef.current!.getApi(); - const oldEvent = calendarApi.getEventById(id); - oldEvent?.remove(); - }; + const newEvent: EventInput = { + id: faker.string.uuid(), + title, + allDay, + color, + extendedProps: { + description, + }, + }; + if (start) newEvent.start = start.toDate(); + if (end) newEvent.end = end.toDate(); + + // 刷新日历显示 + calendarApi.addEvent(newEvent); + }; + // delete event + const handleDelete = (id: string) => { + const calendarApi = fullCalendarRef.current!.getApi(); + const oldEvent = calendarApi.getEventById(id); + oldEvent?.remove(); + }; - return ( - -
- - setOpen(true)} - onViewTypeChange={handleViewTypeChange} - /> - - -
- - - ); + return ( + +
+ + setOpen(true)} + onViewTypeChange={handleViewTypeChange} + /> + + +
+ + + ); } diff --git a/src/pages/sys/others/calendar/styles.ts b/src/pages/sys/others/calendar/styles.ts index d574f0f..bd334f3 100644 --- a/src/pages/sys/others/calendar/styles.ts +++ b/src/pages/sys/others/calendar/styles.ts @@ -3,142 +3,144 @@ import styled from 'styled-components'; import { ThemeMode } from '#/enum'; export const StyledCalendar = styled.div<{ $themeMode: ThemeMode }>` - width: 100%; - height: 100%; - overflow: auto; - -ms-overflow-style: none; /* 适用于Internet Explorer, Edge */ - scrollbar-width: none; /* 适用于Firefox */ - overflow-y: scroll; - &::-webkit-scrollbar { - display: none; /* 适用于Chrome、Safari和Opera */ - } - .fc { width: 100%; height: 100%; - /* override fullcalendar css variables */ - --fc-border-color: rgba(145, 158, 171, 0.16); - --fc-now-indicator-color: #ff5630; - --fc-today-bg-color: rgba(145, 158, 171, 0.08); - --fc-page-bg-color: ${(props) => - props.$themeMode === ThemeMode.Light ? '#ffffff' : '#161c24'}; - --fc-neutral-bg-color: ${(props) => - props.$themeMode === ThemeMode.Light ? '#F4F6F8' : 'rgba(145, 158, 171, 0.12)'}; - --fc-list-event-hover-bg-color: rgba(145, 158, 171, 0.08); - --fc-highlight-color: rgba(145, 158, 171, 0.08); - - a { - color: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#ffffff' : '#212b36')}; - } - .fc-col-header { - box-shadow: rgba(145, 158, 171, 0.2) 0px -1px 0px inset; - th { - border-color: transparent; - } - .fc-col-header-cell-cushion { - font-weight: 600; - font-size: 0.875rem; - font-family: 'Public Sans', sans-serif; - padding: 8px 0px; - } + overflow: auto; + -ms-overflow-style: none; /* 适用于Internet Explorer, Edge */ + scrollbar-width: none; /* 适用于Firefox */ + overflow-y: scroll; + &::-webkit-scrollbar { + display: none; /* 适用于Chrome、Safari和Opera */ } + .fc { + width: 100%; + height: 100%; + /* override fullcalendar css variables */ + --fc-border-color: rgba(145, 158, 171, 0.16); + --fc-now-indicator-color: #ff5630; + --fc-today-bg-color: rgba(145, 158, 171, 0.08); + --fc-page-bg-color: ${(props) => + props.$themeMode === ThemeMode.Light ? '#ffffff' : '#161c24'}; + --fc-neutral-bg-color: ${(props) => + props.$themeMode === ThemeMode.Light ? '#F4F6F8' : 'rgba(145, 158, 171, 0.12)'}; + --fc-list-event-hover-bg-color: rgba(145, 158, 171, 0.08); + --fc-highlight-color: rgba(145, 158, 171, 0.08); - /* view Month Week Day */ - .fc-dayGridMonth-view, - .fc-timeGridWeek-view, - .fc-timeGridDay-view { - .fc-daygrid-day-number { - line-height: 1.57143; - font-size: 0.875rem; - font-family: 'Public Sans', sans-serif; - font-weight: 400; - padding: 8px 8px 0px; - } - .fc-daygrid-event { - margin-top: 4px; - .fc-event-start, - .fc-event-end { - margin-left: 4px; - margin-right: 4px; + a { + color: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#ffffff' : '#212b36')}; } - } - .fc-event { - border-color: transparent !important; - background-color: transparent !important; - - .fc-event-main-wrapper { - border-radius: 6px; - width: 100%; - background-color: #fff; - &::before { - top: 0px; - left: 0px; - width: 100%; - content: ''; - opacity: 0.24; - height: 100%; - border-radius: 6px; - position: absolute; - background-color: currentcolor; - transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - } - .fc-event-main-frame { - font-size: 13px; - line-height: 20px; - filter: brightness(0.48); - display: flex; - width: 100%; - .fc-event-time { - overflow: unset; - font-weight: 700; + .fc-col-header { + box-shadow: rgba(145, 158, 171, 0.2) 0px -1px 0px inset; + th { + border-color: transparent; } - .fc-event-title-container { - flex-grow: 1; - flex-shrink: 1; - min-width: 0px; - .fc-event-title { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + .fc-col-header-cell-cushion { + font-weight: 600; + font-size: 0.875rem; + font-family: 'Public Sans', sans-serif; + padding: 8px 0px; } - } } - } - } - /* view list */ - .fc-list { - .fc-list-day { - th { - z-index: 100; - } - } - .fc-list-day-text, - .fc-list-day-side-text { - line-height: 1.57143; - font-size: 0.875rem; - font-family: 'Public Sans', sans-serif; - font-weight: 400; - } + /* view Month Week Day */ + .fc-dayGridMonth-view, + .fc-timeGridWeek-view, + .fc-timeGridDay-view { + .fc-daygrid-day-number { + line-height: 1.57143; + font-size: 0.875rem; + font-family: 'Public Sans', sans-serif; + font-weight: 400; + padding: 8px 8px 0px; + } + .fc-daygrid-event { + margin-top: 4px; + .fc-event-start, + .fc-event-end { + margin-left: 4px; + margin-right: 4px; + } + } + .fc-event { + border-color: transparent !important; + background-color: transparent !important; - .fc-list-event-time { - color: ${(props) => - props.$themeMode === ThemeMode.Light ? 'rgb(99, 115, 129)' : 'rgb(145, 158, 171)'}; - } - .fc-event-title { - color: ${(props) => - props.$themeMode === ThemeMode.Dark ? 'rgb(255, 255, 255)' : 'rgb(33, 43, 54)'}; - } - .fc-list-table { - th, - td { - border-color: transparent; + .fc-event-main-wrapper { + border-radius: 6px; + width: 100%; + background-color: #fff; + &::before { + top: 0px; + left: 0px; + width: 100%; + content: ''; + opacity: 0.24; + height: 100%; + border-radius: 6px; + position: absolute; + background-color: currentcolor; + transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + } + .fc-event-main-frame { + font-size: 13px; + line-height: 20px; + filter: brightness(0.48); + display: flex; + width: 100%; + .fc-event-time { + overflow: unset; + font-weight: 700; + } + .fc-event-title-container { + flex-grow: 1; + flex-shrink: 1; + min-width: 0px; + .fc-event-title { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + } } - } - .fc-event-main-frame { - background-color: transparent; - } + /* view list */ + .fc-list { + .fc-list-day { + th { + z-index: 100; + } + } + .fc-list-day-text, + .fc-list-day-side-text { + line-height: 1.57143; + font-size: 0.875rem; + font-family: 'Public Sans', sans-serif; + font-weight: 400; + } + + .fc-list-event-time { + color: ${(props) => + props.$themeMode === ThemeMode.Light + ? 'rgb(99, 115, 129)' + : 'rgb(145, 158, 171)'}; + } + .fc-event-title { + color: ${(props) => + props.$themeMode === ThemeMode.Dark ? 'rgb(255, 255, 255)' : 'rgb(33, 43, 54)'}; + } + .fc-list-table { + th, + td { + border-color: transparent; + } + } + + .fc-event-main-frame { + background-color: transparent; + } + } } - } `; diff --git a/src/pages/sys/others/iframe/external-link.tsx b/src/pages/sys/others/iframe/external-link.tsx index 8f9de87..c39e8ea 100644 --- a/src/pages/sys/others/iframe/external-link.tsx +++ b/src/pages/sys/others/iframe/external-link.tsx @@ -3,13 +3,13 @@ import { useLayoutEffect } from 'react'; import { useRouter } from '@/router/hooks'; type Props = { - src: string; + src: string; }; export default function ExternalLink({ src }: Props) { - const { back } = useRouter(); - useLayoutEffect(() => { - window.open(src, '_black'); - back(); - }); - return
; + const { back } = useRouter(); + useLayoutEffect(() => { + window.open(src, '_black'); + back(); + }); + return
; } diff --git a/src/pages/sys/others/iframe/index.tsx b/src/pages/sys/others/iframe/index.tsx index 3d46427..d7413df 100644 --- a/src/pages/sys/others/iframe/index.tsx +++ b/src/pages/sys/others/iframe/index.tsx @@ -1,10 +1,10 @@ type Props = { - src: string; + src: string; }; export default function Iframe({ src = '' }: Props) { - return ( -
-