fix: 加入api路径和样式修改

nladmin-ui/src/views/lucene/index.vue

@@ -81,12 +81,6 @@
     <el-card shadow="hover" style="width: 100%" class="log-warpper">
       <div style="width: 100%">
         <div v-for="(log, index) in logs" :key="index">
-          <!--          <div v-if="compressedView === false" style="margin: 5px;font-size: 16px; word-break: break-all; white-space: pre-wrap;">-->
-          <!--            {{ timestampToDate(log.time) }} - {{log.severity}} - {{log.logger}} - [{{log.thread}}] - {{log.tlogTraceId}} - {{log.message}}-->
-          <!--          </div>-->
-          <!--          <div v-else style="margin-bottom: 5px; font-size: 16px;">-->
-          <!--            {{ timestampToDate(log.time) }} - {{log.severity}} - {{log.logger}} - [{{log.thread}}] - {{log.tlogTraceId}} - {{log.message}}-->
-          <!--          </div>-->
           <div v-if="compressedView" style="margin-bottom: 5px; font-size: 16px;">
             <span style="color: #000000;">{{ timestampToDate(log.time) }}</span> -
             <span style="color: #000569;">{{ log.currIp === null ? '0.0.0.0' : log.currIp }}</span> -
@@ -94,9 +88,15 @@
             <span style="color: #3498db;">{{ log.logger }}</span> -
             <span style="color: #28b23a;">[{{ log.thread }}]</span> -
             <span style="color: #d51313;">{{ log.tlogTraceId === null ? '无链路id' : log.tlogTraceId }}</span> -
-            <span style="color: #000000;">{{ log.message }}</span>
+            <span
+              style="color: #000000;"
+              class="sql-message"
+              @click="handleCopySQL(log.message)"
+            >
+              {{ log.message }}
+            </span>
           </div>
-          <div v-else style="margin-bottom: 5px; font-size: 16px; border: #00afff 1px solid; padding: 5px;">
+          <div v-else style="margin-bottom: 5px; font-size: 16px; border: #999999 1px solid; padding: 5px;">
             <el-row>
               <el-col :span="2">
                 时间：
@@ -105,6 +105,14 @@
                 <span style="color: #000000;">{{ timestampToDate(log.time) }}</span>
               </el-col>
             </el-row>
+            <el-row>
+              <el-col :span="2">
+                host：
+              </el-col>
+              <el-col :span="22">
+                <span style="color: #048815;">{{ log.host }}</span>
+              </el-col>
+            </el-row>
             <el-row>
               <el-col :span="2">
                 执行IP：
@@ -113,6 +121,22 @@
                 <span style="color: #000569;">{{ log.currIp === null ? '0.0.0.0' : log.currIp }}</span>
               </el-col>
             </el-row>
+            <el-row>
+              <el-col :span="2">
+                API路径：
+              </el-col>
+              <el-col :span="22">
+                <span style="color: #b9de16;">{{ log.apiPath === null ? '无' : log.apiPath }}</span>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="2">
+                MDC标签：
+              </el-col>
+              <el-col :span="22">
+                <span style="color: #d20118;">{{ log.tag === null ? '未配置MDC' : log.tag }}</span>
+              </el-col>
+            </el-row>
             <el-row>
               <el-col :span="2">
                 日志级别：
@@ -150,7 +174,13 @@
                 日志信息：
               </el-col>
               <el-col :span="22">
-                <span style="color: #000000;">{{ log.message }}</span>
+                <span
+                  style="color: #000000;"
+                  class="sql-message"
+                  @click="handleCopySQL(log.message)"
+                >
+                  {{ log.message }}
+                </span>
               </el-col>
             </el-row>
           </div>
@@ -228,6 +258,60 @@ export default {
 
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`
     },
+    // 处理SQL复制
+    handleCopySQL(message) {
+      // 1. 使用正则匹配SQL语句
+      const sqlMatch = message.match(/\[ SQL: ([^\]]+)\s*\]/)
+
+      if (sqlMatch && sqlMatch[1]) {
+        const sql = sqlMatch[1].trim()
+        this.copyToClipboard(sql)
+      } else {
+        this.$message.warning('未检测到可复制的SQL语句')
+      }
+    },
+
+    // 复制文本到剪贴板
+    copyToClipboard(text) {
+      // 现代浏览器方法
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(text)
+          .then(() => this.showSuccess())
+          .catch(err => this.showError(err))
+      }
+      // 兼容旧浏览器
+      else {
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        textarea.style.position = 'fixed'
+        document.body.appendChild(textarea)
+        textarea.select()
+
+        try {
+          const success = document.execCommand('copy')
+          success ? this.showSuccess() : this.showError()
+        } catch (err) {
+          this.showError(err)
+        }
+
+        document.body.removeChild(textarea)
+      }
+    },
+
+    // 显示成功提示
+    showSuccess() {
+      this.$message({
+        message: 'SQL已复制到剪贴板',
+        type: 'success',
+        duration: 2000
+      })
+    },
+
+    // 显示错误提示
+    showError(err) {
+      console.error('复制失败:', err)
+      this.$message.error('复制失败，请手动复制')
+    },
     handleSizeChange(val) {
       this.query.size = val
       this.queryData()
@@ -257,5 +341,13 @@ export default {
 </script>
 
 <style scoped>
-
+/* 可点击样式提示 */
+.sql-message {
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.sql-message:hover {
+  background-color: #f0f9ff;
+  box-shadow: 0 0 3px rgba(32, 160, 255, 0.5);
+}
 </style>