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

2025-09-08 12:57:11 +08:00 · 2025-08-07 15:03:34 +08:00
parent a83d710b82
commit eea9a93ae6
5 changed files with 94 additions and 15 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
-        specifier: ^2.4.0
-        version: 2.4.0(vue@3.5.12(typescript@5.0.4))
+      vue-json-viewer:
+        specifier: ^3.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:
-    resolution: {integrity: sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==}
-    engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
+  vue-json-viewer@3.0.4:
+    resolution: {integrity: sha512-pnC080rTub6YjccthVSNQod2z9Sl5IUUq46srXtn6rxwhW8QM4rlYn+CTSLFKXWfw+N3xv77Cioxw7B4XUKIbQ==}
    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)):
--- a/src/components/JsonPretty/index.vue
+++ b/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 'vue-json-pretty/lib/styles.css'
+import JsonViewer from 'vue-json-viewer'
+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%;
--- a/src/components/JsonPretty/json-them.scss
+++ b/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;
+  }
+}
--- a/src/views/monitor/log/operation/OperationLogDetailDrawer.vue
+++ b/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>