style: 优化操作日志json预览效果

package.json

@@ -54,7 +54,7 @@
     "vue-demi": "^0.14.10",
     "vue-draggable-plus": "^0.3.5",
     "vue-echarts": "^6.5.5",
-    "vue-json-pretty": "^2.4.0",
+    "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.3.3",
     "vue3-tree-org": "^4.2.2",
     "xe-utils": "^3.5.7",

pnpm-lock.yaml

@@ -128,9 +128,9 @@ importers:
       vue-echarts:
         specifier: ^6.5.5
         version: 6.7.2(@vue/runtime-core@3.5.12)(echarts@5.5.0)(vue@3.5.12(typescript@5.0.4))
-      vue-json-pretty:
+      vue-json-viewer:
-        specifier: ^2.4.0
+        specifier: ^3.0.4
-        version: 2.4.0(vue@3.5.12(typescript@5.0.4))
+        version: 3.0.4(vue@3.5.12(typescript@5.0.4))
       vue-router:
         specifier: ^4.3.3
         version: 4.3.3(vue@3.5.12(typescript@5.0.4))
@@ -1748,6 +1748,9 @@ packages:
     resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
     engines: {node: '>=18'}
 
+  clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
+
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -1998,6 +2001,9 @@ packages:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
 
+  delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2757,6 +2763,9 @@ packages:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
 
+  good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
+
   gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
 
@@ -3960,6 +3969,9 @@ packages:
   scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
+  select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
+
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -4249,6 +4261,9 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+
   tippy.js@6.3.7:
     resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
 
@@ -4614,11 +4629,10 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-json-pretty@2.4.0:
+  vue-json-viewer@3.0.4:
-    resolution: {integrity: sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==}
+    resolution: {integrity: sha512-pnC080rTub6YjccthVSNQod2z9Sl5IUUq46srXtn6rxwhW8QM4rlYn+CTSLFKXWfw+N3xv77Cioxw7B4XUKIbQ==}
-    engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
     peerDependencies:
-      vue: '>=3.0.0'
+      vue: ^3.2.2
 
   vue-router@4.3.3:
     resolution: {integrity: sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==}
@@ -6501,6 +6515,12 @@ snapshots:
       slice-ansi: 5.0.0
       string-width: 7.2.0
 
+  clipboard@2.0.11:
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -6744,6 +6764,8 @@ snapshots:
 
   delayed-stream@1.0.0: {}
 
+  delegate@3.2.0: {}
+
   dequal@2.0.3: {}
 
   devlop@1.1.0:
@@ -7653,6 +7675,10 @@ snapshots:
       merge2: 1.4.1
       slash: 3.0.0
 
+  good-listener@1.2.2:
+    dependencies:
+      delegate: 3.2.0
+
   gopd@1.0.1:
     dependencies:
       get-intrinsic: 1.2.4
@@ -8887,6 +8913,8 @@ snapshots:
 
   scule@1.3.0: {}
 
+  select@1.1.2: {}
+
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -9203,6 +9231,8 @@ snapshots:
 
   text-table@0.2.0: {}
 
+  tiny-emitter@2.1.0: {}
+
   tippy.js@6.3.7:
     dependencies:
       '@popperjs/core': 2.11.8
@@ -9615,8 +9645,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-json-pretty@2.4.0(vue@3.5.12(typescript@5.0.4)):
+  vue-json-viewer@3.0.4(vue@3.5.12(typescript@5.0.4)):
     dependencies:
+      clipboard: 2.0.11
       vue: 3.5.12(typescript@5.0.4)
 
   vue-router@4.3.3(vue@3.5.12(typescript@5.0.4)):

src/components/JsonPretty/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="json_pretty_container">
-    <VueJsonPretty path="res" :data="JSONObject" :show-length="true" />
+    <JsonViewer expand-depth="5" :value="JSONObject" :theme="currentThemeClass" sort />
     <icon-copy class="copy_icon" @click="onCopy(JSONObject)" />
   </div>
 </template>
 
 <script setup lang="ts">
-import VueJsonPretty from 'vue-json-pretty'
+import JsonViewer from 'vue-json-viewer'
-import 'vue-json-pretty/lib/styles.css'
+import { useTheme } from '@arco-design/web-vue/es/watermark/hooks/use-theme'
 import { copyText } from '@/utils'
 
 defineOptions({ name: 'JsonPretty', inheritAttrs: false })
@@ -15,16 +15,19 @@ defineOptions({ name: 'JsonPretty', inheritAttrs: false })
 const props = defineProps<{
   json: string
 }>()
-
 const JSONObject = computed(() => JSON.parse(props?.json))
 
 // 拷贝
 const onCopy = (data: object) => {
   copyText(JSON.stringify(data))
 }
+// 监听主题变化
+const { theme } = useTheme()
+const currentThemeClass = computed(() => (theme.value === 'dark' ? 'vscode-dark' : 'vscode-light'))
 </script>
 
 <style scoped lang="scss">
+@use "./json-them.scss";
 .json_pretty_container {
   width: 100%;
   height: 100%;

src/components/JsonPretty/json-them.scss

@@ -0,0 +1,43 @@
+.vscode-light {
+  background: var(--color-bg-3,#ffffff);
+  color: #1f2328;
+  font-size: 14px;
+  font-family: 'Fira Code', 'Consolas', monospace;
+
+  :deep(.jv-key) { color: #0550ae; font-weight: 600; }
+  :deep(.jv-string) { color: #0c5460; }
+  :deep(.jv-number) { color: #116329; }
+  :deep(.jv-boolean) { color: #c24038; font-weight: 600; }
+  :deep(.jv-null) { color: #6f42c1; font-style: italic; }
+  :deep(.jv-undefined) { color: #e36209; }
+  :deep(.jv-function) { color: #795548; }
+  :deep(.jv-button) { color: #0969da; }
+  :deep(.jv-ellipsis) {
+    color: #6a737d;
+    background-color: #f6f8fa;
+    border-radius: 4px;
+    padding: 0 4px;
+  }
+}
+
+.vscode-dark {
+  background: var(--color-bg-3,#17171A);
+  color: #d4d4d4;
+  font-size: 14px;
+  font-family: 'Fira Code', 'Consolas', monospace;
+
+  :deep(.jv-key) { color: #9cdcfe; font-weight: 600; }
+  :deep(.jv-string) { color: #ce9178; }
+  :deep(.jv-number) { color: #b5cea8; }
+  :deep(.jv-boolean) { color: #569cd6; font-weight: 600; }
+  :deep(.jv-null) { color: #c586c0; font-style: italic; }
+  :deep(.jv-undefined) { color: #e08331; }
+  :deep(.jv-function) { color: #dcdcaa; }
+  :deep(.jv-button) { color: #4fc1ff; }
+  :deep(.jv-ellipsis) {
+    color: #999;
+    background-color: #333;
+    border-radius: 4px;
+    padding: 0 4px;
+  }
+}

src/views/monitor/log/operation/OperationLogDetailDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-drawer v-model:visible="visible" title="日志详情" :width="720" :footer="false">
+  <a-drawer v-model:visible="visible" title="日志详情" :width="width >= 720 ? 720 : '100%'" :footer="false">
     <a-descriptions title="基本信息" :column="2" size="large" class="general-description">
       <a-descriptions-item label="日志 ID">{{ dataDetail?.id }}</a-descriptions-item>
       <a-descriptions-item label="Trace ID"><a-typography-paragraph :copyable="!!dataDetail?.traceId">{{ dataDetail?.traceId }}</a-typography-paragraph></a-descriptions-item>
@@ -68,8 +68,11 @@
 </template>
 
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core/index'
 import { type LogDetailResp, getLog as getDetail } from '@/apis/monitor'
 
+const { width } = useWindowSize()
+
 const dataId = ref('')
 const dataDetail = ref<LogDetailResp>()
 const visible = ref(false)
@@ -97,6 +100,5 @@ defineExpose({ onOpen })
 
 :deep(.arco-tabs-content) {
   padding-top: 5px;
-  padding-left: 15px;
 }
 </style>