操作日志详细页面优化

src/assets/styles/ruoyi.scss

@@ -240,6 +240,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;

src/views/monitor/operlog/detail.vue

@@ -0,0 +1,220 @@
+<template>
+  <el-dialog title="操作日志详细" v-model="dialogVisible" width="780px" append-to-body @close="$emit('update:visible', false)">
+    <div class="detail-wrap">
+      <!-- 基本信息 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><el-icon><InfoFilled /></el-icon> 基本信息</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">正常</el-tag>
+              <el-tag v-else type="danger" size="small">异常</el-tag>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 操作人员 -->
+      <div class="detail-card">
+        <div class="detail-card-title"><el-icon><User /></el-icon> 操作人员</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"><el-icon><Sort /></el-icon> 请求信息</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"><el-icon><Upload /></el-icon> 请求参数</div>
+        <div class="code-body">
+          <div class="code-wrap">
+            <div class="code-action">
+              <el-button size="small" :icon="CopyDocument" @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"><el-icon><Download /></el-icon> 返回参数</div>
+        <div class="code-body">
+          <div class="code-wrap">
+            <div class="code-action">
+              <el-button size="small" :icon="CopyDocument" @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"><el-icon><Warning /></el-icon> 异常信息</div>
+        <div class="error-body">
+          <div class="error-msg">{{ form.errorMsg }}</div>
+        </div>
+      </div>
+
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  row: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['update:visible'])
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit('update:visible', val)
+})
+
+ 
+const { sys_oper_type } = proxy.useDict('sys_oper_type')
+
+const form = computed(() => props.row || {})
+const typeLabel = computed(() => proxy.selectDictLabel(sys_oper_type.value, form.value.businessType) || '-')
+
+function formatJson(str) {
+  if (!str) return '（无数据）'
+  try { return JSON.stringify(JSON.parse(str), null, 2) } catch { return str }
+}
+
+function copyText(str) {
+  const text = formatJson(str)
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text).then(() => ElMessage({ 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)
+    ElMessage({ 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;
+}
+.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: var(--el-color-primary);
+}
+.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 .el-icon { 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>

src/views/monitor/operlog/index.vue

@@ -135,7 +135,7 @@
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
-               <el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
+               <el-button link type="primary" icon="View" @click="handleDetail(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
             </template>
          </el-table-column>
       </el-table>
@@ -148,64 +148,21 @@
          @pagination="getList"
       />
 
-      <!-- 操作日志详细 -->
-      <el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
-         <el-form :model="form" label-width="100px">
-            <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="请求参数：" style="word-break: break-all; white-space: pre-wrap;">{{ 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>
-         <template #footer>
-            <div class="dialog-footer">
-               <el-button @click="open = false">关 闭</el-button>
-            </div>
-         </template>
-      </el-dialog>
+      <operlog-detail v-model:visible="detailVisible" :row="detailRow" />
    </div>
 </template>
 
 <script setup name="Operlog">
+import OperlogDetail from './detail'
 import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog"
 
 const { proxy } = getCurrentInstance()
 const { sys_oper_type, sys_common_status } = proxy.useDict("sys_oper_type", "sys_common_status")
 
 const operlogList = ref([])
-const open = ref(false)
+const detailVisible = ref(false)
 const loading = ref(true)
+const detailRow = ref({})
 const showSearch = ref(true)
 const ids = ref([])
 const single = ref(true)
@@ -240,11 +197,6 @@ function getList() {
   })
 }
 
-/** 操作日志类型字典翻译 */
-function typeFormat(row, column) {
-  return proxy.selectDictLabel(sys_oper_type.value, row.businessType)
-}
-
 /** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1
@@ -273,9 +225,9 @@ function handleSortChange(column, prop, order) {
 }
 
 /** 详细按钮操作 */
-function handleView(row) {
-  open.value = true
-  form.value = row
+function handleDetail(row) {
+  detailRow.value = row
+  detailVisible.value = true
 }
 
 /** 删除按钮操作 */