Optimize log page

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

@@ -4,5 +4,5 @@
   background-color: constants.$origin-color;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
+  box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.1);
 }

src/global.d.ts

@@ -182,4 +182,5 @@ interface SysLogGetVo {
     endTime: string
     executeTime: number
     userAgent: string
+    operateUsername: string
 }

src/pages/system/Log.tsx

@@ -21,44 +21,68 @@ const Log: React.FC = () => {
     })
 
     const dataColumns: ColumnsType<SysLogGetVo> = [
-        { title: '类型', dataIndex: 'logType' },
+        {
+            title: '类型',
+            dataIndex: 'logType',
+            render: (value) =>
+                value === 'ERROR' ? (
+                    <AntdTag color={'error'}>{value}</AntdTag>
+                ) : (
+                    <AntdTag>{value}</AntdTag>
+                ),
+            align: 'center'
+        },
         {
             title: '操作者',
-            dataIndex: 'operateUserId'
+            dataIndex: 'operateUsername',
+            align: 'center',
+            render: (value, record) =>
+                value ? (
+                    <AntdTag color={'purple'}>{`${value}(${record.operateUserId})`}</AntdTag>
+                ) : (
+                    <AntdTag>Anonymous</AntdTag>
+                )
         },
         {
             title: '操作时间',
             dataIndex: 'operateTime',
-            render: (value) => getLocalTime(value)
+            render: (value: string) => getLocalTime(value),
-        },
+            align: 'center'
-        {
-            title: '请求 Uri',
-            dataIndex: 'requestUri'
         },
         {
             title: '请求方式',
-            dataIndex: 'requestMethod'
+            dataIndex: 'requestMethod',
+            align: 'center'
         },
         {
-            title: '请求参数',
+            title: '请求 Url',
-            dataIndex: 'requestParams'
+            render: (_value, record) =>
+                `${record.requestServerAddress}${record.requestUri}${
+                    record.requestParams ? `?${record.requestParams}` : ''
+                }`
         },
         {
             title: '请求 IP',
-            dataIndex: 'requestIp'
+            dataIndex: 'requestIp',
+            align: 'center'
         },
         {
-            title: '请求服务器地址',
+            title: '异常',
-            dataIndex: 'requestServerAddress'
+            dataIndex: 'exception',
-        },
+            render: (value: boolean, record) => (value ? record.exceptionInfo : '无'),
-        {
+            align: 'center'
-            title: '异常信息',
-            dataIndex: 'exceptionInfo'
         },
         {
             title: '执行时间',
             dataIndex: 'executeTime',
-            render: (value) => `${value}ms`
+            render: (value, record) => (
+                <AntdTooltip
+                    title={`${getLocalTime(record.startTime)} - ${getLocalTime(record.endTime)}`}
+                >
+                    {`${value}ms`}
+                </AntdTooltip>
+            ),
+            align: 'center'
         },
         {
             title: '用户代理',
@@ -83,7 +107,7 @@ const Log: React.FC = () => {
             return
         }
 
-        r_getSysLog({
+        void r_getSysLog({
             currentPage: tableParams.pagination?.current,
             pageSize: tableParams.pagination?.pageSize
         })