From 72c0f86c75c8a9a5eb7435d72b6ebece4c5382e8 Mon Sep 17 00:00:00 2001
From: wanshenmean <cathay_xy@163.com>
Date: 星期二, 14 四月 2026 18:21:27 +0800
Subject: [PATCH] feat: 添加vue3-json-viewer并优化日志显示

---
 Code/WMS/WIDESEA_WMSClient/src/extension/system/Mes_Log.jsx |   78 ++++++++++++++++++---------------------
 1 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/Code/WMS/WIDESEA_WMSClient/src/extension/system/Mes_Log.jsx b/Code/WMS/WIDESEA_WMSClient/src/extension/system/Mes_Log.jsx
index be25098..560c165 100644
--- a/Code/WMS/WIDESEA_WMSClient/src/extension/system/Mes_Log.jsx
+++ b/Code/WMS/WIDESEA_WMSClient/src/extension/system/Mes_Log.jsx
@@ -1,5 +1,7 @@
-import { h, createApp } from 'vue';
-import { ElDrawer, ElIcon } from 'element-plus';
+import { createApp } from 'vue';
+import { ElDrawer } from 'element-plus';
+import { JsonViewer } from 'vue3-json-viewer';
+import 'vue3-json-viewer/dist/vue3-json-viewer.css';
 
 let extension = {
   components: {
@@ -54,13 +56,12 @@
       const jsonContent = type === 'request' ? row.requestJson : row.responseJson;
       const title = type === 'request' ? '馃搵 璇锋眰 JSON' : '馃摜 鍝嶅簲 JSON';
 
-      // 鏍煎紡鍖� JSON
-      let formattedJson = '';
+      // 瑙f瀽 JSON 瀵硅薄锛岃В鏋愬け璐ュ垯淇濈暀鍘熷瀛楃涓�
+      let jsonData;
       try {
-        const obj = typeof jsonContent === 'string' ? JSON.parse(jsonContent) : jsonContent;
-        formattedJson = JSON.stringify(obj, null, 2);
+        jsonData = typeof jsonContent === 'string' ? JSON.parse(jsonContent) : jsonContent;
       } catch (e) {
-        formattedJson = String(jsonContent);
+        jsonData = String(jsonContent);
       }
 
       // 鍒涘缓涓存椂瀹瑰櫒娓叉煋鎶藉眽
@@ -69,45 +70,38 @@
 
       const app = createApp({
         render() {
-          return h('div', [
-            h(ElDrawer, {
-              modelValue: true,
-              'onUpdate:modelValue': (val) => {
-                if (!val) {
-                  app.unmount();
-                  document.body.removeChild(container);
-                }
-              },
-              title: title,
-              size: '30%',
-              destroyOnClose: true,
-              closeOnClickModal: true
-            }, {
-              default: () => h('div', {
-                style: {
-                  height: '100%',
-                  backgroundColor: '#f5f5f5',
-                  padding: '16px',
-                  borderRadius: '4px'
-                }
-              }, [
-                h('pre', {
-                  style: {
-                    margin: '0',
-                    fontSize: '14px',
-                    lineHeight: '1.5',
-                    fontFamily: 'Consolas, Monaco, "Courier New", monospace',
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'break-all'
-                  }
-                }, formattedJson)
-              ])
-            })
-          ]);
+          const onClose = (val) => {
+            if (!val) {
+              app.unmount();
+              document.body.removeChild(container);
+            }
+          };
+          return (
+            <div>
+              <ElDrawer
+                modelValue={true}
+                onUpdate:modelValue={onClose}
+                title={title}
+                size="30%"
+                destroyOnClose={true}
+                closeOnClickModal={true}
+              >
+                <JsonViewer
+                  value={jsonData}
+                  expanded={true}
+                  expandDepth={5}
+                  copyable={true}
+                  sort={false}
+                  theme="light"
+                />
+              </ElDrawer>
+            </div>
+          );
         }
       });
 
       app.use(window.ElementPlus);
+      app.component('JsonViewer', JsonViewer);
       app.mount(container);
     },
   }

--
Gitblit v1.9.3