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

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%;

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>