up.

z_ele/src/views/system/request-record/components/request-record-detail.vue

@@ -50,6 +50,7 @@
         <ele-ellipsis :max-line="4" :tooltip="ellipsisTooltipProps">
           {{ data.requestBody }}
         </ele-ellipsis>
+        <el-button type="primary" @click="preview('请求参数', data.responseType, data.requestBody)">预览</el-button>
       </el-descriptions-item>
       <el-descriptions-item label="返回类型" :span="1">
         <ele-ellipsis :max-line="4" :tooltip="ellipsisTooltipProps">
@@ -65,17 +66,31 @@
         <ele-ellipsis :max-line="4" :tooltip="ellipsisTooltipProps">
           {{ data.responseData }}
         </ele-ellipsis>
+        <el-button type="primary" @click="preview('返回结果',data.responseType, data.responseData)">预览</el-button>
       </el-descriptions-item>
     </el-descriptions>
+
+    <el-dialog
+      v-model="previewVisible"
+      title="预览"
+      width="800"
+    >
+      <monaco-editor
+        v-model="previewData"
+        language="json"
+        style="height: 460px"
+      />
+    </el-dialog>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import type { EleTooltipProps } from 'ele-admin-plus/es/ele-app/plus';
   import type { OperationRecord } from '@/api/system/operation-record/model';
   import { useMobile } from '@/utils/use-mobile';
   import {formatBytes} from "@/utils/common";
+  import MonacoEditor from "@/components/MonacoEditor/index.vue";
 
   defineProps<{
     /** 修改回显的数据 */
@@ -106,6 +121,92 @@
 
   /** 是否是移动端 */
   const { mobile } = useMobile();
+
+  const previewVisible = ref(false);
+  const previewData = ref("");
+  const previewTitle = ref("");
+  const preview = (title, type, data)=>{
+    previewTitle.value = title;
+    if(type == "think\\response\\Json"){
+      previewData.value = formatJson(data);
+    }else{
+      previewData.value = data;
+    }
+    previewVisible.value = true;
+  }
+
+  /**
+   * 格式化JSON字符串
+   * @param {string} jsonString - 需要格式化的JSON字符串
+   * @param {number} indentSpaces - 缩进空格数（默认为2）
+   * @returns {string} 格式化后的JSON字符串
+   * @throws {Error} 当输入不是有效的JSON时抛出错误
+   */
+  function formatJson(jsonString, indentSpaces = 2) {
+    // 验证输入是否为字符串
+    if (typeof jsonString !== 'string') {
+      throw new Error('输入必须是字符串');
+    }
+
+    // 解析JSON字符串为JavaScript对象
+    let parsedObj;
+    try {
+      parsedObj = JSON.parse(jsonString);
+    } catch (e) {
+      throw new Error('无效的JSON格式: ' + e.message);
+    }
+
+    // 递归函数来处理格式化
+    function format(obj, depth) {
+      // 处理基本类型
+      if (obj === null) {
+        return 'null';
+      }
+
+      if (typeof obj === 'boolean' || typeof obj === 'number') {
+        return obj.toString();
+      }
+
+      if (typeof obj === 'string') {
+        return '"' + obj + '"';
+      }
+
+      // 处理数组
+      if (Array.isArray(obj)) {
+        if (obj.length === 0) {
+          return '[]';
+        }
+
+        let indent = ' '.repeat(depth * indentSpaces);
+        let innerIndent = ' '.repeat((depth + 1) * indentSpaces);
+        let items = [];
+
+        for (let i = 0; i < obj.length; i++) {
+          items.push(innerIndent + format(obj[i], depth + 1));
+        }
+
+        return '[\n' + items.join(',\n') + '\n' + indent + ']';
+      }
+
+      // 处理对象
+      let indent = ' '.repeat(depth * indentSpaces);
+      let innerIndent = ' '.repeat((depth + 1) * indentSpaces);
+      let keys = Object.keys(obj);
+
+      if (keys.length === 0) {
+        return '{}';
+      }
+
+      let items = [];
+      for (let key of keys) {
+        items.push(innerIndent + '"' + key + '": ' + format(obj[key], depth + 1));
+      }
+
+      return '{\n' + items.join(',\n') + '\n' + indent + '}';
+    }
+
+    return format(parsedObj, 0);
+  }
 </script>
 
 <style lang="scss" scoped>