feat: 操作日志新增复制功能

src/components/JsonPretty/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="json_prettt_container">
+    <vue-json-pretty
+              :path="'res'"
+              :data="JSONObject"
+              :show-length="true"
+            />
+    <icon-copy class="copy_icon" @click="onCopy(JSONObject)"/>
+  </div>
+</template>
+<script setup lang="ts">
+import VueJsonPretty from 'vue-json-pretty'
+import 'vue-json-pretty/lib/styles.css'
+import {copyText} from '@/utils'
+defineOptions({ name: 'JsonPretty', inheritAttrs: false })
+const props = defineProps<{
+  josn: string
+}>()
+const JSONObject = computed(()=>JSON.parse(props?.josn))
+const onCopy =(data:object)=>{
+  copyText(JSON.stringify(data))
+  console.log('copyObject',data)
+}
+</script>
+<style lang="scss" scoped>
+.json_prettt_container{
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  .copy_icon{
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+}
+</style>

src/types/components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
     IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
     IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
+    JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
     ParentView: typeof import('./../components/ParentView/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/utils/index.ts

@@ -1,6 +1,7 @@
 import { isExternal } from "@/utils/validate";
 import { browse, mapTree } from "xe-utils";
 import _ from "lodash";
+import { Message } from "@arco-design/web-vue";
 
 export function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
   return obj[key]
@@ -242,3 +243,12 @@ export const formatFileSize = (fileSize: number) => {
   const size = srcSize / 1024 ** index
   return `${size.toFixed(2)} ${unitArr[index]}`
 }
+export const copyText =(text:any) =>{
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand('copy');
+  document.body.removeChild(textarea);
+  Message.success('复制成功')
+}

src/views/system/log/OperationLogDetailDrawer.vue

@@ -38,21 +38,11 @@
       <a-descriptions-item :span="2">
         <a-tabs type="card">
           <a-tab-pane key="1" title="响应头">
-            <VueJsonPretty
-              v-if="operationLog?.responseHeaders"
-              :path="'res'"
-              :data="JSON.parse(operationLog?.responseHeaders)"
-              :show-length="true"
-            />
+            <JsonPretty v-if="operationLog?.responseHeaders" :josn="operationLog?.responseHeaders"/>
             <span v-else>无</span>
           </a-tab-pane>
           <a-tab-pane key="2" title="响应体">
-            <VueJsonPretty
-              v-if="operationLog?.responseBody"
-              :path="'res'"
-              :data="JSON.parse(operationLog?.responseBody)"
-              :show-length="true"
-            />
+            <JsonPretty v-if="operationLog?.responseBody" :josn="operationLog?.responseBody"/>
             <span v-else>无</span>
           </a-tab-pane>
         </a-tabs>
@@ -68,21 +58,11 @@
       <a-descriptions-item :span="2">
         <a-tabs type="card">
           <a-tab-pane key="1" title="请求头">
-            <VueJsonPretty
-              v-if="operationLog?.requestHeaders"
-              :path="'res'"
-              :data="JSON.parse(operationLog?.requestHeaders)"
-              :show-length="true"
-            />
+            <JsonPretty v-if="operationLog?.requestHeaders" :josn="operationLog?.requestHeaders"/>
             <span v-else>无</span>
           </a-tab-pane>
           <a-tab-pane key="2" title="请求体">
-            <VueJsonPretty
-              v-if="operationLog?.requestBody"
-              :path="'res'"
-              :data="JSON.parse(operationLog?.requestBody)"
-              :show-length="true"
-            />
+            <JsonPretty v-if="operationLog?.requestBody" :josn="operationLog?.requestBody"/>
             <span v-else>无</span>
           </a-tab-pane>
         </a-tabs>
@@ -93,8 +73,7 @@
 
 <script lang="ts" setup>
 import { getLog, type LogDetailResp } from '@/apis'
-import VueJsonPretty from 'vue-json-pretty'
-import 'vue-json-pretty/lib/styles.css'
+import JsonPretty from '@/components/JsonPretty/index.vue'
 const logId = ref('')
 const operationLog = ref<LogDetailResp | null>()
 // 查询详情