From 4d072e0de8a4cd1f7a49caca9529050732c53a80 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Wed, 20 Dec 2023 11:37:53 +0800 Subject: [PATCH] Add index to system management --- package-lock.json | 8 +- package.json | 3 +- src/assets/css/pages/system/index.scss | 40 ++++++++++ src/assets/svg/option.svg | 1 + src/components/common/Permission.tsx | 8 +- src/pages/system/Statistics.tsx | 1 + src/pages/system/index.tsx | 100 ++++++++++++++++++++++++- src/router/index.tsx | 4 +- src/router/system.tsx | 2 +- 9 files changed, 159 insertions(+), 8 deletions(-) create mode 100644 src/assets/css/pages/system/index.scss create mode 100644 src/assets/svg/option.svg diff --git a/package-lock.json b/package-lock.json index 2b5973d..1e3d549 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,8 @@ "react-dom": "^18.2.0", "react-router": "^6.20.1", "react-router-dom": "^6.20.1", - "size-sensor": "^1.0.2" + "size-sensor": "^1.0.2", + "vanilla-tilt": "^1.8.1" }, "devDependencies": { "@svgr/core": "^8.1.0", @@ -7933,6 +7934,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/vanilla-tilt": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz", + "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==" + }, "node_modules/vite": { "version": "5.0.6", "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.6.tgz", diff --git a/package.json b/package.json index 54679a0..2d59e37 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "react-dom": "^18.2.0", "react-router": "^6.20.1", "react-router-dom": "^6.20.1", - "size-sensor": "^1.0.2" + "size-sensor": "^1.0.2", + "vanilla-tilt": "^1.8.1" }, "devDependencies": { "@svgr/core": "^8.1.0", diff --git a/src/assets/css/pages/system/index.scss b/src/assets/css/pages/system/index.scss new file mode 100644 index 0000000..f0a072a --- /dev/null +++ b/src/assets/css/pages/system/index.scss @@ -0,0 +1,40 @@ +@use '@/assets/css/constants' as constants; + +[data-component=system] { + .root-content { + padding: 30px; + gap: 20px; + flex-wrap: wrap; + justify-content: flex-start; + + > .card-box { + width: 200px; + height: 360px; + flex: 0 0 auto; + cursor: pointer; + + .common-card { + width: 100%; + height: 100%; + margin-top: 100px; + text-align: center; + gap: 42px; + + > * { + flex: 0 0 auto; + display: block; + } + + .icon { + color: constants.$production-color; + font-size: constants.$SIZE_ICON_XL; + } + + .text { + font-weight: bolder; + font-size: 2em; + } + } + } + } +} \ No newline at end of file diff --git a/src/assets/svg/option.svg b/src/assets/svg/option.svg new file mode 100644 index 0000000..63b7795 --- /dev/null +++ b/src/assets/svg/option.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/common/Permission.tsx b/src/components/common/Permission.tsx index a904354..57b37e5 100644 --- a/src/components/common/Permission.tsx +++ b/src/components/common/Permission.tsx @@ -1,12 +1,16 @@ import React from 'react' -import { hasPermission } from '@/util/auth' +import { hasPathPermission, hasPermission } from '@/util/auth' interface PermissionProps extends React.PropsWithChildren { operationCode?: string + path?: string } const Permission: React.FC = (props) => { - if (!props.operationCode || hasPermission(props.operationCode)) { + if ( + (!props.operationCode || hasPermission(props.operationCode)) && + (!props.path || hasPathPermission(props.path)) + ) { return props.children } diff --git a/src/pages/system/Statistics.tsx b/src/pages/system/Statistics.tsx index f214d1d..25ff4e7 100644 --- a/src/pages/system/Statistics.tsx +++ b/src/pages/system/Statistics.tsx @@ -213,6 +213,7 @@ const OnlineInfo: React.FC = () => { } setIsLoading(true) + setCurrentOnlineCount(-1) void r_sys_statistics_online({ scope: _scope }).then((res) => { const response = res.data diff --git a/src/pages/system/index.tsx b/src/pages/system/index.tsx index 52eede3..242131e 100644 --- a/src/pages/system/index.tsx +++ b/src/pages/system/index.tsx @@ -1,7 +1,105 @@ import React from 'react' +import Icon from '@ant-design/icons' +import VanillaTilt, { TiltOptions } from 'vanilla-tilt' +import '@/assets/css/pages/system/index.scss' +import HideScrollbar from '@/components/common/HideScrollbar' +import FitFullScreen from '@/components/common/FitFullScreen' +import FlexBox from '@/components/common/FlexBox' +import Card from '@/components/common/Card' +import Permission from '@/components/common/Permission.tsx' + +interface CommonCardProps + extends React.DetailedHTMLProps, HTMLDivElement> { + icon: IconComponent + description?: React.ReactNode + options?: TiltOptions + url?: string +} + +const CommonCard = forwardRef((props) => { + const navigate = useNavigate() + const cardRef = useRef(null) + const { + style, + ref, + icon, + description, + options = { + reverse: true, + max: 8, + glare: true, + scale: 1.03 + }, + url, + children, + ..._props + } = props + + useEffect(() => { + cardRef.current && VanillaTilt.init(cardRef.current, options) + }, [options]) + + const handleCardOnClick = () => { + url && navigate(url) + } + + return ( + + + +
{children}
+
{description}
+ + + ) +}) const System: React.FC = () => { - return <> + return ( + <> + + + + + + 系统概况 + + + + + 系统设置 + + + + + 用户管理 + + + + + 角色管理 + + + + + 群组管理 + + + + + 系统日志 + + + + + + + ) } export default System diff --git a/src/router/index.tsx b/src/router/index.tsx index 0a7ae4d..9e90791 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -47,8 +47,8 @@ const root: RouteJsonObject[] = [ absolutePath: '/system', id: 'systemFramework', component: React.lazy(() => import('@/pages/SystemFramework')), - children: setTitle(system, '系统设置'), - name: '系统设置', + children: setTitle(system, '系统配置'), + name: '系统配置', auth: true, permission: true }, diff --git a/src/router/system.tsx b/src/router/system.tsx index 40ee0bd..e36d154 100644 --- a/src/router/system.tsx +++ b/src/router/system.tsx @@ -27,7 +27,7 @@ const system: RouteJsonObject[] = [ id: 'system-settings', component: React.lazy(() => import('@/pages/system/Settings')), name: '系统设置', - icon: React.lazy(() => import('~icons/fatweb/setting.jsx')), + icon: React.lazy(() => import('~icons/fatweb/option.jsx')), menu: true, autoHide: true },