1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| import { h, createApp } from 'vue';
| import { ElDrawer, ElIcon } from 'element-plus';
|
| let extension = {
| components: {
| // 动态扩充组件或组件路径
| gridHeader: "",
| gridBody: '',
| gridFooter: "",
| modelHeader: "",
| modelBody: "",
| modelFooter: ""
| },
| buttons: [], // 扩展的按钮
| data: {
| jsonDrawerVisible: false,
| currentJson: '',
| currentJsonTitle: ''
| },
| methods: {
| // 事件扩展
| onInit() {
| console.log("mes_log init");
| this.setFiexdSearchForm(true);
| },
|
| onInited() {
| this.height = this.height - 240; // 为统计卡片预留空间
|
| // 添加预览方法
| this.previewJson = (jsonStr) => {
| if (!jsonStr) return '-';
| try {
| const obj = JSON.parse(jsonStr);
| return JSON.stringify(obj, null, 2).substring(0, 200) + '...';
| } catch {
| return String(jsonStr).substring(0, 200) + '...';
| }
| };
| },
|
| // 行点击事件 - 显示 JSON 详情
| rowClick({ row, column }) {
| // 如果点击的是请求或响应列，显示详情抽屉
| if (column.property === 'requestJson' && row.requestJson) {
| this.showJsonDetail(row, 'request');
| } else if (column.property === 'responseJson' && row.responseJson) {
| this.showJsonDetail(row, 'response');
| }
| },
|
| // 显示 JSON 详情抽屉
| showJsonDetail(row, type = 'request') {
| const jsonContent = type === 'request' ? row.requestJson : row.responseJson;
| const title = type === 'request' ? '📋 请求 JSON' : '📥 响应 JSON';
|
| // 格式化 JSON
| let formattedJson = '';
| try {
| const obj = typeof jsonContent === 'string' ? JSON.parse(jsonContent) : jsonContent;
| formattedJson = JSON.stringify(obj, null, 2);
| } catch (e) {
| formattedJson = String(jsonContent);
| }
|
| // 创建临时容器渲染抽屉
| 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: '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)
| ])
| })
| ]);
| }
| });
|
| app.use(window.ElementPlus);
| app.mount(container);
| },
| }
| };
|
| export default extension;
|
|
