| | |
| | | import { h, resolveComponent } from 'vue'; |
| | | import { h, createApp } from 'vue'; |
| | | import { ElDrawer } from 'element-plus'; |
| | | |
| | | let extension = { |
| | | components: { |
| | | //动态扩充组件或组件路径 |
| | |
| | | }, |
| | | 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 formattedJson = ''; |
| | | try { |
| | | const obj = typeof content === 'string' ? JSON.parse(content) : content; |
| | | formattedJson = JSON.stringify(obj, null, 2); |
| | | } catch (e) { |
| | | formattedJson = String(content); |
| | | } |
| | | |
| | | // 创建临时容器渲染抽屉 |
| | | const container = document.createElement('div'); |
| | | document.body.appendChild(container); |
| | | |
| | | 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: '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) |
| | | ]) |
| | | }) |
| | | ]); |
| | | } |
| | | }); |
| | | |
| | | app.use(window.ElementPlus); |
| | | app.mount(container); |
| | | } |
| | | } |
| | | }; |