refactor(operlog): 优化操作日志页面表格和操作按钮样式
- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装 - 统一使用小尺寸按钮(size: small)和14px图标 - 调整表格尺寸为medium，优化数据密度 - 优化列宽度分配：序号60px、操作类型90px、系统类型90px等 - 新增表格横向滚动支持(scroll-x: 1700) - 调整操作列宽度为160px，优化按钮布局 - 优化按钮间距，使用gap-1减少空间占用 - 移除复杂的action-btn样式类，简化CSS代码 - 优化表格单元格内边距和字体大小 - 新增表格和页面滚动条样式优化
This commit is contained in:
Leo
parent
6c2c65b909
commit
a719c8f386
@ -156,7 +156,8 @@
|
||||
:row-key="(row: OperLogVo) => row.operId"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
size="large"
|
||||
:scroll-x="1700"
|
||||
size="medium"
|
||||
class="custom-table"
|
||||
@update:checked-row-keys="handleRowSelectionChange"
|
||||
/>
|
||||
@ -259,7 +260,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 IconParkOutlinePreviewOpen from '~icons/icon-park-outline/preview-open'
|
||||
import CoiDialog from '@/components/common/CoiDialog.vue'
|
||||
@ -321,7 +322,7 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
{
|
||||
title: '序号',
|
||||
key: 'index',
|
||||
width: 70,
|
||||
width: 60,
|
||||
align: 'center',
|
||||
render: (_, index) => {
|
||||
return (pagination.value.page - 1) * pagination.value.pageSize + index + 1
|
||||
@ -340,7 +341,7 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
{
|
||||
title: '操作类型',
|
||||
key: 'operType',
|
||||
width: 100,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h(NTag, {
|
||||
@ -363,7 +364,7 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
{
|
||||
title: '系统类型',
|
||||
key: 'systemType',
|
||||
width: 100,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h('span', { class: 'text-gray-600' }, row.systemType || '-')
|
||||
@ -372,7 +373,7 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
{
|
||||
title: '请求方式',
|
||||
key: 'requestMethod',
|
||||
width: 90,
|
||||
width: 80,
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h(NTag, {
|
||||
@ -387,11 +388,11 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
title: '请求URL',
|
||||
key: 'operUrl',
|
||||
width: 200,
|
||||
align: 'left',
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
render: (row) => {
|
||||
return h('span', {
|
||||
class: 'text-gray-600 font-mono text-sm',
|
||||
class: 'text-sm',
|
||||
title: row.operUrl,
|
||||
}, row.operUrl || '-')
|
||||
},
|
||||
@ -412,13 +413,13 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
align: 'center',
|
||||
ellipsis: { tooltip: true },
|
||||
render: (row) => {
|
||||
return h('span', { class: 'text-gray-500' }, row.operLocation || '-')
|
||||
return h('span', row.operLocation || '-')
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作状态',
|
||||
key: 'operStatus',
|
||||
width: 100,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
const isSuccess = row.operStatus === '0'
|
||||
@ -442,7 +443,7 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
{
|
||||
title: '消耗时间',
|
||||
key: 'costTime',
|
||||
width: 100,
|
||||
width: 90,
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h('span', { class: 'text-gray-500 text-sm' }, `${row.costTime || '0'}ms`)
|
||||
@ -451,26 +452,22 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
width: 160,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
const buttons = []
|
||||
|
||||
// 查看详情按钮
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
buttons.push(h(NButton, {
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => handleViewDetail(row),
|
||||
}, {
|
||||
default: () => '查看详情',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'primary',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-info',
|
||||
onClick: () => handleViewDetail(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlinePreviewOpen) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlinePreviewOpen),
|
||||
}),
|
||||
default: () => '查看',
|
||||
}))
|
||||
|
||||
// 删除按钮
|
||||
@ -481,23 +478,19 @@ const columns: DataTableColumns<OperLogVo> = [
|
||||
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)
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -778,13 +771,15 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-td) {
|
||||
padding: 8px 12px;
|
||||
padding: 7px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.custom-table :deep(.n-data-table-th) {
|
||||
padding: 10px 12px;
|
||||
padding: 9px 12px;
|
||||
background-color: #fafafa;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
@ -794,6 +789,7 @@ onMounted(() => {
|
||||
|
||||
.search-form :deep(.n-form-item-label) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
@ -827,69 +823,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;
|
||||
}
|
||||
|
||||
/* 操作日志详情样式 */
|
||||
@ -965,4 +908,56 @@ onMounted(() => {
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.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