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
},