feat: 添加vue3-json-viewer并优化日志显示

wanshenmean

2 天以前 72c0f86c75c8a9a5eb7435d72b6ebece4c5382e8

 Code/WMS/WIDESEA_WMSClient/src/extension/system/Sys_Log.jsx

@@ -1,5 +1,7 @@
import { h, createApp } from 'vue';
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: {
@@ -39,13 +41,12 @@
      const content = type === 'request' ? row.requestParam : row.responseParam;
      const title = type === 'request' ? '📋 请求参数' : '📥 响应参数';

      // 格式化 JSON
      let formattedJson = '';
      // 解析 JSON 对象，解析失败则保留原始字符串
      let jsonData;
      try {
        const obj = typeof content === 'string' ? JSON.parse(content) : content;
        formattedJson = JSON.stringify(obj, null, 2);
        jsonData = typeof content === 'string' ? JSON.parse(content) : content;
      } catch (e) {
        formattedJson = String(content);
        jsonData = String(content);
      }

      // 创建临时容器渲染抽屉
@@ -54,45 +55,38 @@

      const app = createApp({
        render() {
          return h('div', [
            h(ElDrawer, {
              modelValue: true,
              'onUpdate:modelValue': (val) => {
          const onClose = (val) => {
                if (!val) {
                  app.unmount();
                  document.body.removeChild(container);
                }
              },
              title: title,
              size: '30%',
              destroyOnClose: true,
              closeOnClickModal: true
            }, {
              default: () => h('div', {
                style: {
                  height: '30%',
                  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)
              ])
            })
          ]);
          };
          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);
    }
  }