src/assets/css/components/common/card.scss

@@ -0,0 +1,5 @@
+.card-box {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
+}

src/assets/svg/log.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M298.666667 298.666667c17.066667 0 32-14.933333 32-32v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32zM576 298.666667c17.066667 0 32-14.933333 32-32v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32z" /><path d="M469.333333 725.333333c0-104.533333 64-196.266667 153.6-234.666666H224c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h405.333333c17.066667 0 32 14.933333 32 32 0 8.533333-4.266667 14.933333-8.533333 21.333333 23.466667-6.4 46.933333-10.666667 72.533333-10.666667 6.4 0 14.933333 0 21.333334 2.133334V277.333333c0-46.933333-38.4-85.333333-85.333334-85.333333v74.666667c0 53.333333-42.666667 96-96 96S469.333333 320 469.333333 266.666667V192h-85.333333v74.666667c0 53.333333-42.666667 96-96 96S192 320 192 266.666667V192c-46.933333 0-85.333333 38.4-85.333333 85.333333v554.666667c0 46.933333 38.4 85.333333 85.333333 85.333333h364.8c-53.333333-46.933333-87.466667-115.2-87.466667-192z m-53.333333 21.333334h-192c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h192c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z m0-128h-192c-17.066667 0-32-14.933333-32-32s14.933333-32 32-32h192c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" /><path d="M725.333333 533.333333c-106.666667 0-192 87.466667-192 192s87.466667 192 192 192 192-87.466667 192-192-85.333333-192-192-192z m74.666667 256h-106.666667c-17.066667 0-32-14.933333-32-32v-128c0-17.066667 14.933333-32 32-32s32 14.933333 32 32V725.333333h74.666667c17.066667 0 32 14.933333 32 32s-14.933333 32-32 32z" /></svg>

src/components/common/Card.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import '@/assets/css/components/common/card.scss'
+
+interface CardProps
+    extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {}
+
+const Card: React.FC<CardProps> = (props) => {
+    const { className, ..._props } = props
+    return <div className={`card-box${className ? ` ${className}` : ''}`} {..._props} />
+}
+
+export default Card

src/components/common/FitCenter.tsx

@@ -9,14 +9,12 @@ interface FitCenterProps
 const FitCenter: React.FC<FitCenterProps> = (props) => {
     const { className, vertical, ..._props } = props
     return (
-        <>
+        <div
-            <div
+            className={`fit-center${className ? ` ${className}` : ''}${
-                className={`fit-center${className ? ` ${className}` : ''}${
+                vertical ? ' flex-vertical' : ' flex-horizontal'
-                    vertical ? ' flex-vertical' : ' flex-horizontal'
+            }`}
-                }`}
+            {..._props}
-                {..._props}
+        />
-            ></div>
-        </>
     )
 }
 

src/components/common/FitFullScreen.tsx

@@ -10,20 +10,16 @@ interface FitFullscreenProps
 const FitFullScreen = forwardRef<HTMLDivElement, FitFullscreenProps>((props, ref) => {
     const { zIndex, backgroundColor, className, style, ..._props } = props
     return (
-        <>
+        <div
-            <div
+            className={`fit-fullscreen${className ? ` ${className}` : ''}`}
-                className={`fit-fullscreen${className ? ` ${className}` : ''}`}
+            style={{
-                style={{
+                zIndex,
-                    zIndex,
+                backgroundColor,
-                    backgroundColor,
+                ...style
-                    ...style
+            }}
-                }}
+            ref={ref}
-                ref={ref}
+            {..._props}
-                {..._props}
+        />
-            >
-                {props.children}
-            </div>
-        </>
     )
 })
 

src/components/common/HideScrollbar.tsx

@@ -176,6 +176,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
         scrollbarWidth,
         animationTransitionTime,
         autoHideWaitingTime,
+        children,
         ..._props
     } = props
 
@@ -527,7 +528,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
                         style={{ minWidth, minHeight }}
                         data-refresh={refreshTime}
                     >
-                        {props.children}
+                        {children}
                     </div>
                 </div>
                 <div

src/constants/urls.constants.ts

@@ -1,5 +1,6 @@
 export const URL_API_LOGIN = '/login'
 export const URL_API_TOKEN = '/token'
 export const URL_API_LOGOUT = '/logout'
+export const URL_API_SYS_LOG = '/system/log'
 export const URL_API_USER_INFO = '/system/user/info'
 export const URL_API_USER_LIST = '/system/user'

src/global.d.ts

@@ -10,7 +10,7 @@ interface ImportMeta {
     readonly env: ImportMetaEnv
 }
 
-type RouteJsonObject = {
+interface RouteJsonObject {
     path: string
     absolutePath: string
     id?: string
@@ -28,7 +28,7 @@ type RouteJsonObject = {
     children?: RouteJsonObject[]
 }
 
-type RouteHandle = {
+interface RouteHandle {
     absolutePath: string
     name?: string
     titlePrefix?: string
@@ -41,23 +41,23 @@ type RouteHandle = {
     autoHide?: boolean
 }
 
-type _Response<T> = {
+interface _Response<T> {
     code: number
     success: boolean
     msg: string
     data: T | null
 }
 
-type Captcha = {
+interface Captcha {
     value: string
     base64Src: string
 }
 
-type TokenVo = {
+interface TokenVo {
     token: string
 }
 
-type UserWithPowerInfoVo = {
+interface UserWithPowerInfoVo {
     id: string
     username: string
     locking: boolean
@@ -75,7 +75,7 @@ type UserWithPowerInfoVo = {
     operations: OperationVo[]
 }
 
-type UserWithRoleInfoVo = {
+interface UserWithRoleInfoVo {
     id: string
     username: string
     locking: boolean
@@ -91,7 +91,7 @@ type UserWithRoleInfoVo = {
     groups: GroupVo[]
 }
 
-type UserInfoVo = {
+interface UserInfoVo {
     id: string
     userId: string
     nickname: string
@@ -99,13 +99,13 @@ type UserInfoVo = {
     email: string
 }
 
-type ModuleVo = {
+interface ModuleVo {
     id: number
     name: string
     powerId: number
 }
 
-type MenuVo = {
+interface MenuVo {
     id: number
     name: string
     url: string
@@ -113,7 +113,7 @@ type MenuVo = {
     parentId: number
 }
 
-type ElementVo = {
+interface ElementVo {
     id: number
     name: string
     powerId: number
@@ -121,7 +121,7 @@ type ElementVo = {
     menuId: number
 }
 
-type OperationVo = {
+interface OperationVo {
     id: number
     name: string
     code: string
@@ -129,19 +129,37 @@ type OperationVo = {
     elementId: number
 }
 
-type RoleVo = {
+interface RoleVo {
     id: string
     name: string
     enable: boolean
 }
 
-type GroupVo = {
+interface GroupVo {
     id: string
     name: string
     enable: boolean
 }
 
-type LoginForm = {
+interface LoginForm {
     username: string
     password: string
 }
+
+interface SysLogGetVo {
+    id: string
+    logType: string
+    operateUserId: string
+    operateTime: Date
+    requestUri: string
+    requestMethod: string
+    requestParams: string
+    requestIp: string
+    requestServerAddress: string
+    isException: boolean
+    exceptionInfo: string
+    startTime: Date
+    endTime: Date
+    executeTime: number
+    userAgent: string
+}

src/pages/system/Log.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import FitFullScreen from '@/components/common/FitFullScreen.tsx'
+import Card from '@/components/common/Card'
+import { r_getSysLog } from '@/services/system.tsx'
+import { DATABASE_SELECT_SUCCESS } from '@/constants/common.constants.ts'
+
+const Log: React.FC = () => {
+    const [logList, setLogList] = useState<SysLogGetVo[]>([])
+
+    const getLog = () => {
+        r_getSysLog().then((res) => {
+            const data = res.data
+            if (data.code === DATABASE_SELECT_SUCCESS) {
+                data.data && setLogList(data.data)
+            }
+        })
+    }
+
+    useEffect(() => {
+        getLog()
+    }, [])
+
+    return (
+        <>
+            <FitFullScreen style={{ padding: '20px' }}>
+                <Card>
+                    <AntdTable dataSource={logList} />
+                </Card>
+            </FitFullScreen>
+        </>
+    )
+}
+
+export default Log

src/router/system.tsx

@@ -43,6 +43,17 @@ const user: RouteJsonObject[] = [
         permission: true,
         autoHide: true
     },
+    {
+        path: 'log',
+        absolutePath: '/system/log',
+        id: 'system-log',
+        component: React.lazy(() => import('@/pages/system/Log')),
+        name: '系统日志',
+        icon: React.lazy(() => import('~icons/fatweb/log.jsx')),
+        menu: true,
+        permission: true,
+        autoHide: true
+    },
     {
         path: '*',
         absolutePath: '*',

src/services/system.tsx

@@ -0,0 +1,4 @@
+import request from '@/services/index'
+import { URL_API_SYS_LOG } from '@/constants/urls.constants'
+
+export const r_getSysLog = () => request.get<SysLogGetVo[]>(URL_API_SYS_LOG)