opt: 接口日志显示优化

acs2/nladmin-ui/src/views/monitor/logQuery/index.vue

@@ -16,8 +16,20 @@
       <!--      <el-table-column v-if="false" prop="id" label="id"/>-->
       <!-- <el-table-column prop="trace_id" label="链路追踪" /> -->
       <el-table-column prop="method" label="方法" width="150px" />
-      <el-table-column prop="requestparam" label="请求参数" class="text-wrapper" />
-      <el-table-column prop="responseparam" label="返回参数" class="text-wrapper" />
+      <el-table-column prop="requestparam" label="请求参数" class="text-wrapper">
+        <template slot-scope="scope">
+          <div @click="handleClick(scope.row.requestparam)">
+            {{ truncateOrFullText(scope.row.requestparam) }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="responseparam" label="返回参数" class="text-wrapper">
+        <template slot-scope="scope">
+          <div>
+            <pre class="json-pre">{{ scope.row.responseparam }}</pre>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column prop="logTime" label="记录时间" width="190px" />
       <el-table-column prop="content" label="内容详情" class="text-wrapper" />
 
@@ -54,7 +66,7 @@ export default {
         page: 0
       },
       query: {
-        createTime: [new Date(new Date().setTime(new Date().getTime() - 3600 * 1000)), new Date(new Date().setTime(new Date().getTime() + 3600 * 1000))],
+        createTime: [new Date(new Date().setTime(new Date().getTime() - 3600 * 1000)), new Date(new Date().setTime(new Date().getTime() + 3600 * 1000))]
       }
     })
   },
@@ -66,13 +78,27 @@ export default {
         edit: ['admin', 'param:edit'],
         del: ['admin', 'param:del']
       },
-
       rules: {}
     }
   },
   created() {
   },
   methods: {
+    truncateOrFullText(text) {
+      if (text.length > 1000) {
+        return text.slice(0, 1000) + '...'
+      }
+      return text
+    },
+    handleClick(content) {
+      if (content.length > 1000) {
+        this.$alert(content, '完整内容', {
+          confirmButtonText: '关闭',
+          dangerouslyUseHTMLString: true,
+          customClass: 'full-content-alert'
+        })
+      }
+    },
     // 钩子：在获取表格数据之前执行，false 则代表不获取数据
     [CRUD.HOOK.beforeRefresh]() {
       return true
@@ -103,6 +129,18 @@ export default {
 <style scoped>
 .text-wrapper {
   word-break: break-all;
-  word-wrap: break-word
+  word-wrap: break-word;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.full-content-alert {
+  max-width: none; /* 如果需要自定义 tooltip 的宽度可以在这里设置 */
+}
+.json-pre {
+  font-family: Arial, Helvetica, sans-serif;
+  max-height: 200px; /* 根据需要设置最大高度 */
+  overflow: auto; /* 添加滚动条 */
+  white-space: pre-wrap; /* 保留空格和换行 */
 }
 </style>