操作日志详细页面优化

ruoyi-ui/src/assets/styles/ruoyi.scss

@@ -228,6 +228,52 @@
   color: #FFFFFF;
 }
 
+/** 详细卡片样式 */
+.detail-wrap { padding: 0 4px; }
+
+.detail-card {
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  margin-bottom: 14px;
+  overflow: hidden;
+}
+
+.detail-card-title {
+  background: #f7f9fb;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #ebeef5;
+}
+.detail-card-title i { margin-right: 5px; color: #409EFF; }
+
+.detail-row { padding: 0 8px; }
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px 8px;
+  font-size: 13px;
+  border-bottom: 1px solid #f5f7fa;
+}
+.detail-item:last-child { border-bottom: none; }
+
+.detail-label {
+  flex-shrink: 0;
+  width: 72px;
+  color: #909399;
+  margin-right: 12px;
+}
+.detail-value { color: #303133; flex: 1; word-break: break-all; }
+.detail-location { color: #999; font-size: 12px; }
+
+/* http method */
+.method-GET    { background: #e8f5e9; color: #27ae60; }
+.method-POST   { background: #e3f2fd; color: #1565c0; }
+.method-PUT    { background: #fff3e0; color: #e65100; }
+.method-DELETE { background: #ffebee; color: #c62828; }
+
 /* text color */
 .text-navy {
   color: #1ab394;

ruoyi-ui/src/views/monitor/operlog/detail.vue

@@ -0,0 +1,215 @@
+<template>
+  <el-dialog title="操作日志详细" :visible.sync="visible" width="780px" append-to-body @close="$emit('update:visible', false)">
+    <div class="detail-wrap">
+      <!-- 基本信息 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><i class="el-icon-info"></i> 基本信息</div>
+        <el-row class="detail-row">
+          <el-col :span="12">
+            <div class="detail-item"><span class="detail-label">操作模块</span><span class="detail-value">{{ form.title }}</span></div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item"><span class="detail-label">业务类型</span><span class="detail-value">{{ typeLabel }}</span></div>
+          </el-col>
+        </el-row>
+        <el-row class="detail-row">
+          <el-col :span="12">
+            <div class="detail-item"><span class="detail-label">操作时间</span><span class="detail-value">{{ form.operTime }}</span></div>
+          </el-col>
+          <el-col :span="12">
+            <div class="detail-item">
+              <span class="detail-label">执行状态</span>
+              <el-tag v-if="form.status === 0" type="success" size="small"><i class="el-icon-check"></i> 正常</el-tag>
+              <el-tag v-else type="danger" size="small"><i class="el-icon-close"></i> 异常</el-tag>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 操作人员 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><i class="el-icon-user"></i> 操作人员</div>
+        <el-row class="detail-row">
+          <el-col :span="12">
+            <div class="detail-item"><span class="detail-label">操作人员</span><span class="detail-value">{{ form.operName }}</span></div>
+          </el-col>
+          <el-col :span="12" v-if="form.deptName">
+            <div class="detail-item"><span class="detail-label">所属部门</span><span class="detail-value">{{ form.deptName }}</span></div>
+          </el-col>
+        </el-row>
+        <el-row class="detail-row">
+          <el-col :span="24">
+            <div class="detail-item">
+              <span class="detail-label">操作地址</span>
+              <span class="detail-value">{{ form.operIp }}&nbsp;&nbsp;<span class="detail-location">{{ form.operLocation }}</span></span>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 请求信息 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><i class="el-icon-sort"></i> 请求信息</div>
+        <el-row class="detail-row">
+          <el-col :span="24">
+            <div class="detail-item">
+              <span class="detail-label">请求地址</span>
+              <span class="detail-value">
+                <span :class="'method-tag method-' + form.requestMethod">{{ form.requestMethod }}</span>
+                {{ form.operUrl }}
+              </span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row class="detail-row">
+          <el-col :span="24">
+            <div class="detail-item"><span class="detail-label">操作方法</span><span class="detail-value mono">{{ form.method }}</span></div>
+          </el-col>
+        </el-row>
+        <el-row class="detail-row">
+          <el-col :span="12">
+            <div class="detail-item"><span class="detail-label">消耗时间</span><span class="detail-value">{{ form.costTime }} 毫秒</span></div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 请求参数 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><i class="el-icon-upload2"></i> 请求参数</div>
+        <div class="code-body">
+          <div class="code-wrap">
+            <div class="code-action">
+              <el-button size="mini" icon="el-icon-copy-document" @click="copyText(form.operParam)">复制</el-button>
+            </div>
+            <pre class="code-pre">{{ formatJson(form.operParam) }}</pre>
+          </div>
+        </div>
+      </div>
+
+      <!-- 返回参数 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><i class="el-icon-download"></i> 返回参数</div>
+        <div class="code-body">
+          <div class="code-wrap">
+            <div class="code-action">
+              <el-button size="mini" icon="el-icon-copy-document" @click="copyText(form.jsonResult)">复制</el-button>
+            </div>
+            <pre class="code-pre">{{ formatJson(form.jsonResult) }}</pre>
+          </div>
+        </div>
+      </div>
+
+      <!-- 异常信息 -->
+      <div class="detail-card" v-if="form.status !== 0">
+        <div class="detail-card-title error-title"><i class="el-icon-warning"></i> 异常信息</div>
+        <div class="error-body">
+          <div class="error-msg">{{ form.errorMsg }}</div>
+        </div>
+      </div>
+
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'OperlogDetail',
+  dicts: ['sys_oper_type'],
+  props: {
+    visible: { type: Boolean, default: false },
+    row: { type: Object, default: () => ({}) }
+  },
+  computed: {
+    form() { return this.row || {} },
+    typeLabel() { return this.selectDictLabel(this.dict.type.sys_oper_type, this.form.businessType) || '-' }
+  },
+  methods: {
+    formatJson(str) {
+      if (!str) return '（无数据）'
+      try { return JSON.stringify(JSON.parse(str), null, 2) } catch { return str }
+    },
+    copyText(str) {
+      const text = this.formatJson(str)
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(text).then(() => this.$message({ message: '已复制', type: 'success', duration: 1500 }))
+      } else {
+        const ta = document.createElement('textarea')
+        ta.value = text
+        document.body.appendChild(ta)
+        ta.select()
+        document.execCommand('copy')
+        document.body.removeChild(ta)
+        this.$message({ message: '已复制', type: 'success', duration: 1500 })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.method-tag {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 700;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }
+.code-body { padding: 14px; }
+.code-wrap {
+  background: #f7f9fb;
+  border: 1px solid #e8ecf0;
+  border-radius: 4px;
+  overflow: hidden;
+  max-height: 260px;
+  position: relative;
+}
+.code-action {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+}
+.code-action .el-button { 
+  height: 24px; 
+  font-size: 12px; 
+  padding: 4px 8px; 
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #dcdcdc;
+}
+.code-action .el-button:hover { 
+  background: #ffffff;
+  border-color: #409EFF;
+}
+.code-pre {
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.6;
+  font-family: Consolas, 'SFMono-Regular', monospace;
+  color: #444;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+  max-height: 240px;
+  display: block;
+}
+.error-title { color: #c0392b !important; }
+.error-title i { color: #c0392b !important; }
+.error-body { padding: 12px 16px; }
+.error-msg {
+  background: #fff8f8;
+  border-left: 3px solid #e74c3c;
+  border-radius: 3px;
+  padding: 8px 12px;
+  color: #c0392b;
+  font-size: 12px;
+  line-height: 1.7;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+</style>

ruoyi-ui/src/views/monitor/operlog/index.vue

@@ -144,7 +144,7 @@
             size="mini"
             type="text"
             icon="el-icon-view"
-            @click="handleView(scope.row,scope.index)"
+            @click="handleDetail(scope.row,scope.index)"
             v-hasPermi="['monitor:operlog:query']"
           >详细</el-button>
         </template>
@@ -159,58 +159,17 @@
       @pagination="getList"
     />
 
-    <!-- 操作日志详细 -->
-    <el-dialog title="操作日志详细" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px" size="mini">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
-            <el-form-item
-              label="登录信息："
-            >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
-            <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="操作状态：">
-              <div v-if="form.status === 0">正常</div>
-              <div v-else-if="form.status === 1">失败</div>
-            </el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="消耗时间：">{{ form.costTime }}毫秒</el-form-item>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="open = false">关 闭</el-button>
-      </div>
-    </el-dialog>
+    <operlog-detail :visible.sync="detailVisible" :row="detailRow" />
   </div>
 </template>
 
 <script>
+import OperlogDetail from './detail'
 import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"
 
 export default {
   name: "Operlog",
+  components: { OperlogDetail },
   dicts: ['sys_oper_type', 'sys_common_status'],
   data() {
     return {
@@ -227,7 +186,8 @@ export default {
       // 表格数据
       list: [],
       // 是否显示弹出层
-      open: false,
+      detailVisible: false,
+      detailRow: {},
       // 日期范围
       dateRange: [],
       // 默认排序
@@ -260,9 +220,10 @@ export default {
         }
       )
     },
-    // 操作日志类型字典翻译
-    typeFormat(row, column) {
-      return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType)
+    // 详细按钮操作
+    handleDetail(row) {
+      this.detailRow = row
+      this.detailVisible = true
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -287,11 +248,6 @@ export default {
       this.queryParams.isAsc = column.order
       this.getList()
     },
-    /** 详细按钮操作 */
-    handleView(row) {
-      this.open = true
-      this.form = row
-    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const operIds = row.operId || this.ids