From 9c9a29ae0506667aa5c3194599066aaa08f63cb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=8B=E5=B8=86?= <201379873@qq.com>
Date: Fri, 12 Apr 2024 21:11:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=93=8D=E4=BD=9C=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JsonPretty/index.vue           | 39 +++++++++++++++++++
 src/types/components.d.ts                     |  1 +
 src/utils/index.ts                            | 10 +++++
 .../system/log/OperationLogDetailDrawer.vue   | 31 +++------------
 4 files changed, 55 insertions(+), 26 deletions(-)
 create mode 100644 src/components/JsonPretty/index.vue

diff --git a/src/components/JsonPretty/index.vue b/src/components/JsonPretty/index.vue
new file mode 100644
index 0000000..e86b348
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index a006fce..99dd03f 100644
--- a/src/types/components.d.ts
+++ b/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']
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0fc8669..0b33b55 100644
--- a/src/utils/index.ts
+++ b/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('复制成功')
+}
\ No newline at end of file
diff --git a/src/views/system/log/OperationLogDetailDrawer.vue b/src/views/system/log/OperationLogDetailDrawer.vue
index 01f71d3..b36d87c 100644
--- a/src/views/system/log/OperationLogDetailDrawer.vue
+++ b/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>()
 // 查询详情