feat: 系统日志添加查看详情 (#974)

* feat: 系统日志添加查看详情

src/api/system.ts

@@ -68,3 +68,8 @@ export const getOperationLogsList = (data?: object) => {
 export const getSystemLogsList = (data?: object) => {
   return http.request<ResultTable>("post", "/system-logs", { data });
 };
+
+/** 获取系统监控-系统日志-根据 id 查日志详情 */
+export const getSystemLogsDetail = (data?: object) => {
+  return http.request<Result>("post", "/system-logs-detail", { data });
+};

src/layout/components/appMain.vue

@@ -37,9 +37,9 @@ const layout = computed(() => {
 const getSectionStyle = computed(() => {
   return [
     hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout ? "padding-top: 85px;" : "",
+    !hideTabs.value && layout ? "padding-top: 81px;" : "",
     hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
-    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
+    !hideTabs.value && !layout.value ? "padding-top: 81px;" : "",
     props.fixedHeader
       ? ""
       : `padding-top: 0;${

src/style/reset.scss

@@ -194,7 +194,6 @@ button,
   cursor: default;
 }
 
-img,
 svg,
 video,
 canvas,

src/views/about/columns.tsx

@@ -4,6 +4,7 @@ export function useColumns() {
   const columns = [
     {
       label: "当前版本",
+      minWidth: 100,
       cellRenderer: () => {
         return (
           <el-tag size="large" class="!text-base">
@@ -14,6 +15,7 @@ export function useColumns() {
     },
     {
       label: "最后编译时间",
+      minWidth: 120,
       cellRenderer: () => {
         return (
           <el-tag size="large" class="!text-base">
@@ -24,6 +26,7 @@ export function useColumns() {
     },
     {
       label: "推荐 node 版本",
+      minWidth: 140,
       cellRenderer: () => {
         return (
           <el-tag size="large" class="!text-base">
@@ -34,6 +37,7 @@ export function useColumns() {
     },
     {
       label: "推荐 pnpm 版本",
+      minWidth: 140,
       cellRenderer: () => {
         return (
           <el-tag size="large" class="!text-base">
@@ -44,6 +48,7 @@ export function useColumns() {
     },
     {
       label: "完整版代码地址",
+      minWidth: 140,
       className: "pure-version",
       cellRenderer: () => {
         return (
@@ -58,6 +63,7 @@ export function useColumns() {
     },
     {
       label: "精简版代码地址",
+      minWidth: 140,
       className: "pure-version",
       cellRenderer: () => {
         return (
@@ -72,6 +78,7 @@ export function useColumns() {
     },
     {
       label: "文档地址",
+      minWidth: 100,
       className: "pure-version",
       cellRenderer: () => {
         return (
@@ -86,6 +93,7 @@ export function useColumns() {
     },
     {
       label: "预览地址",
+      minWidth: 100,
       className: "pure-version",
       cellRenderer: () => {
         return (

src/views/about/index.vue

@@ -82,8 +82,11 @@ Object.keys(devDependencies).forEach(key => {
 
     <el-card class="m-4 box-card" shadow="never">
       <template #header>
-        <div class="card-header">
+        <div class="card-header flex items-center">
           <span class="font-medium">生产环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ schema.length }}
+          </el-tag>
         </div>
       </template>
       <el-scrollbar>
@@ -114,8 +117,11 @@ Object.keys(devDependencies).forEach(key => {
 
     <el-card class="m-4 box-card" shadow="never">
       <template #header>
-        <div class="card-header">
+        <div class="card-header flex items-center">
           <span class="font-medium">开发环境依赖</span>
+          <el-tag type="primary" effect="dark" size="small" round class="ml-1">
+            {{ devSchema.length }}
+          </el-tag>
         </div>
       </template>
       <el-scrollbar>

src/views/components/dialog/index.vue

@@ -2,8 +2,8 @@
 import { useRouter } from "vue-router";
 import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
-import forms, { type FormProps } from "./form.vue";
 import formPrimitive from "./formPrimitive.vue";
+import forms, { type FormProps } from "./form.vue";
 import { cloneDeep, debounce } from "@pureadmin/utils";
 import {
   addDialog,

src/views/components/json-editor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, watch } from "vue";
-import VueJsonPretty from "vue-json-pretty";
 import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
 
 defineOptions({
   name: "JsonEditor"

src/views/monitor/logs/system/detail.vue

@@ -0,0 +1,105 @@
+<script setup lang="tsx">
+import { ref } from "vue";
+import "vue-json-pretty/lib/styles.css";
+import VueJsonPretty from "vue-json-pretty";
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const columns = [
+  {
+    label: "IP 地址",
+    prop: "ip"
+  },
+  {
+    label: "地点",
+    prop: "address"
+  },
+  {
+    label: "操作系统",
+    prop: "system"
+  },
+  {
+    label: "浏览器类型",
+    prop: "browser"
+  },
+  {
+    label: "所属模块",
+    prop: "module"
+  },
+  {
+    label: "请求时间",
+    prop: "requestTime"
+  },
+  {
+    label: "请求方法",
+    prop: "method"
+  },
+  {
+    label: "请求耗时",
+    prop: "takesTime"
+  },
+  {
+    label: "请求接口",
+    prop: "url",
+    copy: true
+  },
+  {
+    label: "TraceId",
+    prop: "traceId",
+    copy: true
+  }
+];
+
+const dataList = ref([
+  {
+    title: "响应头",
+    name: "responseHeaders",
+    data: (props.data[0] as any).responseHeaders
+  },
+  {
+    title: "响应体",
+    name: "responseBody",
+    data: (props.data[0] as any).responseBody
+  },
+  {
+    title: "请求头",
+    name: "requestHeaders",
+    data: (props.data[0] as any).requestHeaders
+  },
+  {
+    title: "请求体",
+    name: "requestBody",
+    data: (props.data[0] as any).requestBody
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <el-scrollbar>
+      <PureDescriptions
+        border
+        :data="props.data"
+        :columns="columns"
+        :column="5"
+      />
+    </el-scrollbar>
+    <el-tabs :modelValue="'responseBody'" type="border-card" class="mt-4">
+      <el-tab-pane
+        v-for="(item, index) in dataList"
+        :key="index"
+        :name="item.name"
+        :label="item.title"
+      >
+        <el-scrollbar max-height="calc(100vh - 240px)">
+          <vue-json-pretty v-model:data="item.data" />
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>

src/views/monitor/logs/system/hook.tsx

@@ -1,9 +1,11 @@
 import dayjs from "dayjs";
+import Detail from "./detail.vue";
 import { message } from "@/utils/message";
-import { getSystemLogsList } from "@/api/system";
+import { addDialog } from "@/components/ReDialog";
 import type { PaginationProps } from "@pureadmin/table";
 import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
 import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
+import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
 import Info from "@iconify-icons/ri/question-line";
 
 export function useRole(tableRef: Ref) {
@@ -126,12 +128,12 @@ export function useRole(tableRef: Ref) {
       minWidth: 180,
       formatter: ({ requestTime }) =>
         dayjs(requestTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
     }
-    // {
-    //   label: "操作",
-    //   fixed: "right",
-    //   slot: "operation"
-    // }
   ];
 
   function handleSizeChange(val: number) {
@@ -157,7 +159,8 @@ export function useRole(tableRef: Ref) {
   }
 
   /** 拷贝请求接口，表格单元格被双击时触发 */
-  function handleCellDblclick({ url }) {
+  function handleCellDblclick({ url }, { property }) {
+    if (property !== "url") return;
     update(url);
     copied.value
       ? message(`${url} 已拷贝`, { type: "success" })
@@ -185,6 +188,20 @@ export function useRole(tableRef: Ref) {
     onSearch();
   }
 
+  function onDetail(row) {
+    getSystemLogsDetail({ id: row.id }).then(res => {
+      addDialog({
+        title: "系统日志详情",
+        fullscreen: true,
+        hideFooter: true,
+        contentRenderer: () => Detail,
+        props: {
+          data: [res]
+        }
+      });
+    });
+  }
+
   async function onSearch() {
     loading.value = true;
     const { data } = await getSystemLogsList(toRaw(form));
@@ -216,6 +233,7 @@ export function useRole(tableRef: Ref) {
     pagination,
     selectedNum,
     onSearch,
+    onDetail,
     clearAll,
     resetForm,
     onbatchDel,

src/views/monitor/logs/system/index.vue

@@ -5,6 +5,7 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 
+import View from "@iconify-icons/ep/view";
 import Delete from "@iconify-icons/ep/delete";
 import Refresh from "@iconify-icons/ep/refresh";
 
@@ -23,6 +24,7 @@ const {
   pagination,
   selectedNum,
   onSearch,
+  onDetail,
   clearAll,
   resetForm,
   onbatchDel,
@@ -133,7 +135,20 @@ const {
           @page-size-change="handleSizeChange"
           @page-current-change="handleCurrentChange"
           @cell-dblclick="handleCellDblclick"
-        />
+        >
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin !outline-none"
+              link
+              type="primary"
+              :size="size"
+              :icon="useRenderIcon(View)"
+              @click="onDetail(row)"
+            >
+              详情
+            </el-button>
+          </template>
+        </pure-table>
       </template>
     </PureTableBar>
   </div>