style(components): 修改json预览组件样式问题

src/components/custom/json-preview.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
+import { twMerge } from 'tailwind-merge';
 
 hljs.registerLanguage('json', json);
 
@@ -10,15 +11,19 @@ defineOptions({
 });
 
 interface Props {
+  class?: string;
   code?: string;
   showLineNumbers?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  class: '',
   code: '',
   showLineNumbers: false
 });
 
+const DEFAULT_CLASS = 'max-h-500px';
+
 /** 格式化JSON数据 */
 const jsonData = computed<string>(() => {
   if (!props.code) return '';
@@ -33,9 +38,9 @@ const jsonData = computed<string>(() => {
 </script>
 
 <template>
-  <div class="json-preview">
-    <NCode :code="jsonData" :hljs="hljs" language="json" :show-line-numbers="showLineNumbers" />
-  </div>
+  <NScrollbar :class="twMerge(DEFAULT_CLASS, props.class)">
+    <NCode :code="jsonData" :hljs="hljs" language="json" :show-line-numbers="showLineNumbers" :word-wrap="true" />
+  </NScrollbar>
 </template>
 
 <style lang="scss">
@@ -44,18 +49,4 @@ html[class='dark'] {
     background-color: #7c7777;
   }
 }
-.json-preview {
-  width: 100%;
-  max-height: 500px;
-  overflow-y: auto;
-  @include scrollbar();
-  .empty-data {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    color: #999;
-    font-size: 14px;
-  }
-}
 </style>