From 117978e148c4f397ba89c8a7ef923cf5ea339e79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Tue, 24 Mar 2026 17:32:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=A2=9E=E5=BC=BA=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=97=A5=E5=BF=97=E5=92=8C=E4=BB=AA=E8=A1=A8=E7=9B=98?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84UI=E4=BA=A4=E4=BA=92=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为操作日志页面添加操作模块图标和参数格式化展示功能
优化仪表盘页面统计卡片样式和最近登录/系统信息展示效果
---
 .../src/views/audit/OperationLog.vue          |  96 +++++++-
 .../src/views/system/Dashboard.vue            | 209 ++++++++++++++++--
 2 files changed, 287 insertions(+), 18 deletions(-)

diff --git a/novalon-manage-web/src/views/audit/OperationLog.vue b/novalon-manage-web/src/views/audit/OperationLog.vue
index 9ea0c43..deebd43 100644
--- a/novalon-manage-web/src/views/audit/OperationLog.vue
+++ b/novalon-manage-web/src/views/audit/OperationLog.vue
@@ -45,7 +45,16 @@
           prop="operation"
           label="操作模块"
           sortable="custom"
-        />
+        >
+          <template #default="{ row }">
+            <div class="operation-cell">
+              <el-icon class="operation-icon">
+                <component :is="getOperationIcon(row.operation)" />
+              </el-icon>
+              <span>{{ row.operation }}</span>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="method"
           label="请求方法"
@@ -55,7 +64,23 @@
           prop="params"
           label="请求参数"
           :show-overflow-tooltip="true"
-        />
+        >
+          <template #default="{ row }">
+            <div v-if="row.params" class="params-content">
+              <el-popover
+                placement="top"
+                :width="500"
+                trigger="hover"
+              >
+                <template #reference>
+                  <div class="params-preview">{{ formatParams(row.params) }}</div>
+                </template>
+                <pre class="params-detail">{{ formatParams(row.params) }}</pre>
+              </el-popover>
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
         <el-table-column label="状态">
           <template #default="{ row }">
             <el-tag 
@@ -94,7 +119,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { Search, User, Document, Setting, Lock, View, Edit, Delete, Plus, Download } from '@element-plus/icons-vue'
 import { operationLogApi, OperationLog } from '@/api/operationLog'
 
 const loading = ref(false)
@@ -148,6 +173,30 @@ const handleSortChange = ({ prop, order }: any) => {
   fetchData()
 }
 
+const formatParams = (params: string) => {
+  if (!params) return ''
+  try {
+    const parsed = JSON.parse(params)
+    return JSON.stringify(parsed, null, 2)
+  } catch {
+    return params
+  }
+}
+
+const getOperationIcon = (operation: string) => {
+  if (!operation) return Document
+  const op = operation.toLowerCase()
+  if (op.includes('登录') || op.includes('login')) return User
+  if (op.includes('删除') || op.includes('delete')) return Delete
+  if (op.includes('编辑') || op.includes('修改') || op.includes('update') || op.includes('edit')) return Edit
+  if (op.includes('查看') || op.includes('查询') || op.includes('view') || op.includes('get')) return View
+  if (op.includes('新增') || op.includes('创建') || op.includes('add') || op.includes('create')) return Plus
+  if (op.includes('下载') || op.includes('download')) return Download
+  if (op.includes('设置') || op.includes('配置') || op.includes('setting') || op.includes('config')) return Setting
+  if (op.includes('密码') || op.includes('password')) return Lock
+  return Document
+}
+
 onMounted(() => fetchData())
 </script>
 
@@ -165,5 +214,46 @@ onMounted(() => fetchData())
       align-items: center;
     }
   }
+
+  .operation-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .operation-icon {
+      font-size: 16px;
+      color: #409eff;
+    }
+  }
+
+  .params-content {
+    .params-preview {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #606266;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 0.2s;
+
+      &:hover {
+        color: #409eff;
+      }
+    }
+
+    .params-detail {
+      max-height: 300px;
+      overflow-y: auto;
+      background: #f5f7fa;
+      padding: 12px;
+      border-radius: 4px;
+      font-size: 12px;
+      color: #303133;
+      margin: 0;
+      line-height: 1.5;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    }
+  }
 }
 </style>
diff --git a/novalon-manage-web/src/views/system/Dashboard.vue b/novalon-manage-web/src/views/system/Dashboard.vue
index e78e229..40879b3 100644
--- a/novalon-manage-web/src/views/system/Dashboard.vue
+++ b/novalon-manage-web/src/views/system/Dashboard.vue
@@ -2,49 +2,49 @@
   <div class="dashboard">
     <el-row :gutter="16">
       <el-col :span="6">
-        <el-card v-loading="loading">
+        <el-card v-loading="loading" class="stat-card user-card">
           <el-statistic
             title="用户总数"
             :value="stats.userCount"
           >
             <template #prefix>
-              <el-icon><User /></el-icon>
+              <el-icon class="stat-icon user-icon"><User /></el-icon>
             </template>
           </el-statistic>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card v-loading="loading">
+        <el-card v-loading="loading" class="stat-card role-card">
           <el-statistic
             title="角色总数"
             :value="stats.roleCount"
           >
             <template #prefix>
-              <el-icon><UserFilled /></el-icon>
+              <el-icon class="stat-icon role-icon"><UserFilled /></el-icon>
             </template>
           </el-statistic>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card v-loading="loading">
+        <el-card v-loading="loading" class="stat-card login-card">
           <el-statistic
             title="今日登录"
             :value="stats.todayLogin"
           >
             <template #prefix>
-              <el-icon><ArrowRight /></el-icon>
+              <el-icon class="stat-icon login-icon"><ArrowRight /></el-icon>
             </template>
           </el-statistic>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card v-loading="loading">
+        <el-card v-loading="loading" class="stat-card log-card">
           <el-statistic
             title="操作日志"
             :value="stats.operationLog"
           >
             <template #prefix>
-              <el-icon><Document /></el-icon>
+              <el-icon class="stat-icon log-icon"><Document /></el-icon>
             </template>
           </el-statistic>
         </el-card>
@@ -58,15 +58,35 @@
         <el-card
           v-loading="loading"
           title="最近登录"
+          class="recent-login-card"
         >
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">最近登录</span>
+              <el-icon class="header-icon"><Clock /></el-icon>
+            </div>
+          </template>
           <el-timeline>
             <el-timeline-item
               v-for="item in recentLogins"
               :key="item.id"
               :type="item.status === '0' ? 'success' : 'danger'"
+              :timestamp="item.loginTime"
+              placement="top"
             >
-              <p>{{ item.username }} - {{ item.ip }}</p>
-              <p>{{ item.loginTime }}</p>
+              <div class="login-item">
+                <div class="login-user">
+                  <el-icon><User /></el-icon>
+                  <span>{{ item.username }}</span>
+                </div>
+                <div class="login-ip">
+                  <el-icon><Location /></el-icon>
+                  <span>{{ item.ip }}</span>
+                </div>
+              </div>
+            </el-timeline-item>
+            <el-timeline-item v-if="recentLogins.length === 0" placement="top">
+              <div class="empty-tip">暂无登录记录</div>
             </el-timeline-item>
           </el-timeline>
         </el-card>
@@ -75,22 +95,41 @@
         <el-card
           v-loading="loading"
           title="系统信息"
+          class="system-info-card"
         >
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">系统信息</span>
+              <el-icon class="header-icon"><Setting /></el-icon>
+            </div>
+          </template>
           <el-descriptions
             :column="1"
             border
           >
             <el-descriptions-item label="系统版本">
-              {{ systemInfo.version }}
+              <div class="info-item">
+                <el-icon><Star /></el-icon>
+                <span>{{ systemInfo.version }}</span>
+              </div>
             </el-descriptions-item>
             <el-descriptions-item label="Java版本">
-              {{ systemInfo.javaVersion }}
+              <div class="info-item">
+                <el-icon><Cpu /></el-icon>
+                <span>{{ systemInfo.javaVersion }}</span>
+              </div>
             </el-descriptions-item>
             <el-descriptions-item label="前端框架">
-              {{ systemInfo.frontendFramework }}
+              <div class="info-item">
+                <el-icon><Monitor /></el-icon>
+                <span>{{ systemInfo.frontendFramework }}</span>
+              </div>
             </el-descriptions-item>
             <el-descriptions-item label="数据库">
-              {{ systemInfo.database }}
+              <div class="info-item">
+                <el-icon><Coin /></el-icon>
+                <span>{{ systemInfo.database }}</span>
+              </div>
             </el-descriptions-item>
           </el-descriptions>
         </el-card>
@@ -101,7 +140,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { User, UserFilled, ArrowRight, Document } from '@element-plus/icons-vue'
+import { User, UserFilled, ArrowRight, Document, Clock, Location, Setting, Star, Cpu, Monitor, Coin } from '@element-plus/icons-vue'
 import request from '@/utils/request'
 
 const loading = ref(false)
@@ -162,5 +201,145 @@ onMounted(() => {
 <style scoped lang="css">
 .dashboard {
   padding: 16px;
+
+  .stat-card {
+    transition: all 0.3s ease;
+    border-radius: 8px;
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    }
+
+    .stat-icon {
+      font-size: 24px;
+      margin-right: 8px;
+    }
+
+    &.user-card {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+
+      :deep(.el-statistic__head) {
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      :deep(.el-statistic__content) {
+        color: white;
+      }
+    }
+
+    &.role-card {
+      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      color: white;
+
+      :deep(.el-statistic__head) {
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      :deep(.el-statistic__content) {
+        color: white;
+      }
+    }
+
+    &.login-card {
+      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+      color: white;
+
+      :deep(.el-statistic__head) {
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      :deep(.el-statistic__content) {
+        color: white;
+      }
+    }
+
+    &.log-card {
+      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+      color: white;
+
+      :deep(.el-statistic__head) {
+        color: rgba(255, 255, 255, 0.9);
+      }
+
+      :deep(.el-statistic__content) {
+        color: white;
+      }
+    }
+  }
+
+  .recent-login-card,
+  .system-info-card {
+    border-radius: 8px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 600;
+
+      .card-title {
+        font-size: 16px;
+        color: #303133;
+      }
+
+      .header-icon {
+        color: #409eff;
+        font-size: 18px;
+      }
+    }
+
+    .login-item {
+      .login-user,
+      .login-ip {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: 4px 0;
+        font-size: 14px;
+
+        .el-icon {
+          color: #409eff;
+        }
+      }
+
+      .login-user {
+        font-weight: 500;
+        color: #303133;
+      }
+
+      .login-ip {
+        color: #909399;
+        font-size: 13px;
+      }
+    }
+
+    .empty-tip {
+      color: #909399;
+      font-size: 14px;
+      padding: 8px 0;
+    }
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .el-icon {
+        color: #409eff;
+        font-size: 16px;
+      }
+
+      span {
+        color: #303133;
+      }
+    }
+  }
 }
 </style>