feat: 完成在线用户、登录日志、操作日志页面

Yi.Pure.Vue3/src/views/monitor/logs/system/detail.vue

@@ -0,0 +1,73 @@
+<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: "operIp"
+  },
+  {
+    label: "地点",
+    prop: "operLocation"
+  },
+  {
+    label: "所属模块",
+    prop: "title"
+  },
+  {
+    label: "请求时间",
+    prop: "creationTime"
+  },
+  {
+    label: "请求方法",
+    prop: "requestMethod"
+  },
+  {
+    label: "请求接口",
+    prop: "method",
+    copy: true
+  }
+];
+
+const dataList = ref([
+  {
+    title: "响应体",
+    name: "requestResult",
+    data: (props.data[0] as any).requestResult
+  },
+  {
+    title: "请求体",
+    name: "requestParam",
+    data: (props.data[0] as any).requestParam
+  }
+]);
+</script>
+
+<template>
+  <div>
+    <el-scrollbar>
+      <PureDescriptions border :data="data" :columns="columns" :column="5" />
+    </el-scrollbar>
+    <el-tabs :modelValue="'requestResult'" 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>