✨ feat: 完善日志页面

src/api/user.js

@@ -8,7 +8,8 @@ const api = {
   GetRepos: '/User/GetRepos',
   AdminUserList: '/Admin/User/GetUserList',
   AdminChangeLepaoCount: '/Admin/User/ChangeLepaoCount',
-  AdminGetReqLog: '/Admin/User/GetReqLog'
+  AdminGetReqLog: '/Admin/User/GetReqLog',
+  AdminGetReqLogDetail: '/Admin/User/GetReqLogDetail'
 }
 
 export function ChangeUsername(parameter) {
@@ -27,6 +28,14 @@ export function adminGetReqLog(parameter) {
   })
 }
 
+export function adminGetReqLogDetail(parameter) {
+  return request({
+    url: api.AdminGetReqLogDetail,
+    method: 'get',
+    params: parameter
+  })
+}
+
 export function adminChangeLepaoCount(parameter) {
   return request({
     url: api.AdminChangeLepaoCount,

src/pages/admin/reqLog/index.vue

@@ -25,6 +25,16 @@
                                     <a-input v-model="queryData.create_user" />
                                 </a-form-item>
                             </a-col>
+                            <a-col :span="8">
+                                <a-form-item field="url" label="请求URL">
+                                    <a-input v-model="queryData.url" />
+                                </a-form-item>
+                            </a-col>
+                            <a-col :span="8">
+                                <a-form-item field="ip" label="请求IP">
+                                    <a-input v-model="queryData.ip" />
+                                </a-form-item>
+                            </a-col>
                         </a-row>
                     </a-form>
                 </a-col>
@@ -57,7 +67,7 @@
                     total: pagination.total
                 }" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
                 <template #username="{ record }">
-                    <a-avatar :size="35">
+                    <a-avatar :size="30">
                         <IconUser v-if="!record.avatar" />
                         <img :alt="record.username ?? ''" :src="record.avatar" v-else />
                     </a-avatar>
@@ -73,7 +83,7 @@
         </a-card>
     </div>
 
-    <a-modal v-model:visible="showModal" @cancel="handleCancel" draggable>
+    <a-modal v-model:visible="showModal" @cancel="handleCancel" width="auto" draggable>
         <template #title>
             日志详情
         </template>
@@ -85,7 +95,7 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { adminGetReqLog } from '@/api/user'
+import { adminGetReqLog, adminGetReqLogDetail } from '@/api/user'
 import { Notification } from '@arco-design/web-vue'
 
 const showModal = ref(false)
@@ -93,6 +103,8 @@ const modalData = ref([])
 
 const queryData = reactive({
     create_user: '',
+    url: '',
+    ip: '',
     begin_time: null,
     end_time: null
 })
@@ -113,7 +125,7 @@ const columns = [{
     title: '操作人',
     slotName: 'username'
 }, {
-    title: '访问路径',
+    title: '请求路径',
     dataIndex: 'url',
 }, {
     title: '请求方法',
@@ -128,8 +140,8 @@ const columns = [{
     title: '操作时间',
     slotName: 'time',
 }, {
-    title: '状态',
-    slotName: 'code'
+    title: '状态码',
+    dataIndex: 'code'
 }, {
     title: '操作',
     slotName: 'optional'
@@ -143,6 +155,8 @@ const search = () => {
 
 const reset = () => {
     queryData.create_user = ''
+    queryData.url = ''
+    queryData.ip = ''
     queryData.begin_time = null
     queryData.end_time = null
     getLogList()
@@ -153,44 +167,66 @@ const handleCancel = () => {
     modalData.value = []
 }
 
-const showDetail = (record) => {
-    const data = [{
-        label: '操作人',
-        value: record.username,
-    }, {
-        label: '操作人UUID',
-        value: record.create_user,
-    }, {
-        label: '请求方式',
-        value: record.method
-    }, {
-        label: '请求路径',
-        value: record.url,
-    }, {
-        label: '请求IP',
-        value: record.ip
-    }, {
-        label: 'IP属地',
-        value: record.location
-    }, {
-        label: '请求数据',
-        value: JSON.stringify(record.reqData)
-    }, {
-        label: '响应数据',
-        value: JSON.stringify(record.resData)
-    },
-    {
-        label: '状态码',
-        value: record.code
-    },
-    {
-        label: '操作时间',
-        value: stramptoTime(record.create_time)
-    },
-    ]
-
-    modalData.value = data
-    showModal.value = true
+const showDetail = async (record) => {
+    try {
+        loading.value = true
+        showModal.value = false
+        const res = await adminGetReqLogDetail({ id: record.id })
+        if (!res || res.code !== 0)
+            return Notification.error({
+                title: '获取日志数据失败！',
+                content: res?.msg ?? '请稍后再试'
+            })
+
+        const data = [{
+            label: '操作人',
+            value: res.data.username,
+        }, {
+            label: '操作人UUID',
+            value: res.data.create_user,
+        }, {
+            label: '请求方式',
+            value: res.data.method
+        }, {
+            label: '请求路径',
+            value: res.data.url,
+        }, {
+            label: '请求IP',
+            value: res.data.ip
+        }, {
+            label: 'IP属地',
+            value: res.data.location
+        },
+        {
+            label: '客户端类型',
+            value: res.data.deviceType
+        },  {
+            label: '请求数据',
+            value: JSON.stringify(res.data.reqData)
+        }, {
+            label: '响应数据',
+            value: JSON.stringify(res.data.resData)
+        },
+        {
+            label: '状态码',
+            value: res.data.code
+        },
+        {
+            label: '操作时间',
+            value: stramptoTime(res.data.create_time)
+        },
+        ]
+
+        modalData.value = data
+        showModal.value = true
+    } catch (error) {
+        Notification.error({
+            title: '获取日志数据失败！',
+            content: error.message || '请稍后再试'
+        })
+    } finally {
+        loading.value = false
+    }
 }
 
 const getLogList = async () => {
@@ -200,6 +236,8 @@ const getLogList = async () => {
             create_user: queryData.create_user,
             begin_time: new Date(queryData.begin_time).getTime(),
             end_time: new Date(queryData.end_time).getTime(),
+            url: queryData.url,
+            ip: queryData.ip,
             pagesize: pagination.pagesize,
             current: pagination.current
         }