refactor(loginlog): 优化登录日志页面表格布局和操作按钮
- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装 - 统一使用小尺寸按钮(size: small)和14px图标 - 调整表格尺寸为medium，优化数据密度 - 优化列宽度分配：序号60px、登录用户100px、浏览器100px等 - 新增表格横向滚动支持(scroll-x: 1400) - 调整操作列宽度为100px，优化按钮布局 - 优化按钮间距，使用gap-1减少空间占用 - 移除复杂的action-btn样式类，简化CSS代码 - 优化表格单元格内边距和字体大小(13px) - 新增表格和页面滚动条样式优化
This commit is contained in:
Leo
parent
a719c8f386
commit
171b716cbb
@ -142,7 +142,8 @@
|
||||
:row-key="(row: LoginLogVo) => row.loginLogId"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
size="large"
|
||||
:scroll-x="1400"
|
||||
size="medium"
|
||||
class="custom-table"
|
||||
@update:checked-row-keys="handleRowSelectionChange"
|
||||
/>
|
||||
@ -200,7 +201,7 @@
|
||||
<script setup lang="ts">
|
||||
import { h, nextTick, onMounted, ref } from 'vue'
|
||||
import type { DataTableColumns, FormInst } from 'naive-ui'
|
||||
import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui'
|
||||
import { NButton, NIcon, NPopconfirm, NSpace, NTag } from 'naive-ui'
|
||||
import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
|
||||
import CoiEmpty from '@/components/common/CoiEmpty.vue'
|
||||
import {
|
||||
@ -254,7 +255,7 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
width: 70,
|
||||
width: 60,
|
||||
align: 'center',
|
||||
render: (_, index) => {
|
||||
return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
|
||||
@ -263,7 +264,7 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
{
|
||||
title: '登录用户',
|
||||
key: 'loginName',
|
||||
width: 120,
|
||||
width: 100,
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h('span', { class: 'text-gray-600 font-medium' }, row.loginName)
|
||||
@ -291,7 +292,7 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
{
|
||||
title: '浏览器',
|
||||
key: 'loginBrowser',
|
||||
width: 120,
|
||||
width: 100,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
render: (row) => {
|
||||
@ -301,7 +302,7 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
{
|
||||
title: '操作系统',
|
||||
key: 'loginOs',
|
||||
width: 120,
|
||||
width: 100,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
render: (row) => {
|
||||
@ -311,7 +312,7 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
{
|
||||
title: '设备名称',
|
||||
key: 'deviceName',
|
||||
width: 120,
|
||||
width: 100,
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
render: (row) => {
|
||||
@ -355,7 +356,7 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
@ -369,23 +370,19 @@ const columns: DataTableColumns<LoginLogVo> = [
|
||||
positiveText: '确定',
|
||||
}, {
|
||||
default: () => '确定删除此登录记录吗？',
|
||||
trigger: () => h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'error',
|
||||
size: 'small',
|
||||
}, {
|
||||
default: () => '删除',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'error',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-delete',
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineDelete) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlineDelete),
|
||||
}),
|
||||
default: () => '删除',
|
||||
}),
|
||||
}))
|
||||
}
|
||||
|
||||
return h('div', { class: 'flex items-center justify-center gap-2' }, buttons)
|
||||
return h('div', { class: 'flex items-center justify-center gap-1' }, buttons)
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -612,13 +609,15 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-td) {
|
||||
padding: 8px 12px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-th) {
|
||||
padding: 10px 12px;
|
||||
padding: 8px 10px;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
@ -628,6 +627,7 @@ onMounted(() => {
|
||||
|
||||
.search-form :deep(.n-form-item-label) {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
@ -661,69 +661,16 @@ onMounted(() => {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.action-btn {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
border-radius: 50% !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
||||
border: none !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
/* 操作按钮样式优化 */
|
||||
.custom-table :deep(.n-button--small-type) {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.action-btn:active {
|
||||
transform: translateY(0) !important;
|
||||
transition: all 0.1s !important;
|
||||
}
|
||||
|
||||
/* 删除按钮 */
|
||||
.action-btn-delete {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.action-btn-delete:hover {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
|
||||
}
|
||||
|
||||
/* 信息按钮 */
|
||||
.action-btn-info {
|
||||
background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.action-btn-info:hover {
|
||||
background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
|
||||
box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4) !important;
|
||||
}
|
||||
|
||||
/* 图标居中对齐 */
|
||||
.action-btn .n-icon {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* 移除默认边框和背景 */
|
||||
.action-btn.n-button {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.action-btn.n-button:focus {
|
||||
outline: none !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
|
||||
/* 标签尺寸优化 */
|
||||
.custom-table :deep(.n-tag--small-type) {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* 登录日志详情样式 */
|
||||
@ -736,4 +683,56 @@ onMounted(() => {
|
||||
.login-log-detail :deep(.n-descriptions-item-content) {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.table-wrapper {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
.table-wrapper::-webkit-scrollbar-corner {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* 表格滚动条样式 */
|
||||
.custom-table :deep(.n-data-table-base-table) {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-track {
|
||||
background: #f8f9fa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb {
|
||||
background: #dee2e6;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-base-table)::-webkit-scrollbar-thumb:hover {
|
||||
background: #adb5bd;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user