novalon/novalon-manage-system
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 增强操作日志和仪表盘页面的UI交互体验

Browse Source 
为操作日志页面添加操作模块图标和参数格式化展示功能
优化仪表盘页面统计卡片样式和最近登录/系统信息展示效果
This commit is contained in:
张翔
2026-03-24 17:32:01 +08:00
parent 31d66103e4
commit 117978e148
2 changed files with 287 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
novalon-manage-web/src/views/audit/OperationLog.vue
+93 -3
View File
@@ -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>
novalon-manage-web/src/views/system/Dashboard.vue
+194 -15
View File
@@ -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>