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

wanshenmean

2 天以前 72c0f86c75c8a9a5eb7435d72b6ebece4c5382e8

 Code/WCS/WIDESEAWCS_Client/src/extension/system/Sys_Log.jsx

@@ -1,4 +1,8 @@
import { h, resolveComponent } 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: {
    //动态扩充组件或组件路径
@@ -20,6 +24,69 @@
    },
    onInited() {
      this.height = this.height - 170;
    },

    // 行点击事件 - 显示参数详情抽屉
    rowClick({ row, column }) {
      if (column.property === 'requestParam' && row.requestParam) {
        this.showJsonDetail(row, 'request');
      } else if (column.property === 'responseParam' && row.responseParam) {
        this.showJsonDetail(row, 'response');
      }
    },

    // 显示 JSON 详情抽屉
    showJsonDetail(row, type = 'request') {
      const content = type === 'request' ? row.requestParam : row.responseParam;
      const title = type === 'request' ? '📋 请求参数' : '📥 响应参数';

      // 解析 JSON 对象，解析失败则保留原始字符串
      let jsonData;
      try {
        jsonData = typeof content === 'string' ? JSON.parse(content) : content;
      } catch (e) {
        jsonData = String(content);
      }

      // 创建临时容器渲染抽屉
      const container = document.createElement('div');
      document.body.appendChild(container);

      const app = createApp({
        render() {
          const onClose = (val) => {
            if (!val) {
              app.unmount();
              document.body.removeChild(container);
            }
          };
          return (
            <div>
              <ElDrawer
                modelValue={true}
                onUpdate:modelValue={onClose}
                title={title}
                size="40%"
                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);
    }
  }
};