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/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>