refactor(menu): 优化菜单管理页面操作按钮和表格布局
- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装 - 统一使用小尺寸按钮(size: small)和14px图标 - 优化按钮文字：新增子菜单→新增，分配权限→权限 - 调整操作列宽度从160px增加到200px，适应按钮文字 - 新增表格横向滚动支持(scroll-x: 2000) - 优化按钮间距，使用gap-1减少空间占用 - 新增表格和页面滚动条样式优化 - 移除复杂的action-btn样式类，简化CSS代码
This commit is contained in:
Leo
parent
87c99990c0
commit
6c2c65b909
@ -130,6 +130,7 @@
|
||||
:row-key="(row: MenuVo) => row.menuId"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
:scroll-x="2000"
|
||||
children-key="children"
|
||||
size="medium"
|
||||
class="custom-table"
|
||||
@ -535,7 +536,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, h, nextTick, onMounted, ref } from 'vue'
|
||||
import type { DataTableColumns, FormInst, FormRules } from 'naive-ui'
|
||||
import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTooltip } from 'naive-ui'
|
||||
import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
|
||||
import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
|
||||
import IconParkOutlineEdit from '~icons/icon-park-outline/edit'
|
||||
import IconParkOutlinePlus from '~icons/icon-park-outline/plus'
|
||||
@ -825,7 +826,7 @@ const columns: DataTableColumns<MenuVo> = [
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 160,
|
||||
width: 200,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render: (row) => {
|
||||
@ -833,37 +834,29 @@ const columns: DataTableColumns<MenuVo> = [
|
||||
|
||||
// 新增子菜单按钮
|
||||
if (row.menuType !== '3' && hasButton(PERMISSIONS.MENU.ADD)) {
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
buttons.push(h(NButton, {
|
||||
type: 'success',
|
||||
size: 'small',
|
||||
onClick: () => handleAddChild(row),
|
||||
}, {
|
||||
default: () => '新增子菜单',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'success',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-success',
|
||||
onClick: () => handleAddChild(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlinePlus) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlinePlus),
|
||||
}),
|
||||
default: () => '新增',
|
||||
}))
|
||||
}
|
||||
|
||||
// 编辑按钮
|
||||
if (hasButton(PERMISSIONS.MENU.UPDATE)) {
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
buttons.push(h(NButton, {
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => handleEdit(row),
|
||||
}, {
|
||||
default: () => '编辑',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'primary',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-edit',
|
||||
onClick: () => handleEdit(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineEdit) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlineEdit),
|
||||
}),
|
||||
default: () => '编辑',
|
||||
}))
|
||||
}
|
||||
|
||||
@ -875,23 +868,19 @@ const columns: DataTableColumns<MenuVo> = [
|
||||
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)
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -1545,94 +1534,16 @@ onMounted(() => {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
.action-btn {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
min-width: 36px !important;
|
||||
min-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;
|
||||
padding: 0 !important;
|
||||
/* 操作按钮样式优化 */
|
||||
.custom-table :deep(.n-button--small-type) {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.action-btn .n-button__content {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.action-btn .n-icon {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.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-edit {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.action-btn-edit:hover {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
|
||||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !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-success {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.action-btn-success:hover {
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
|
||||
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
|
||||
/* 标签尺寸优化 */
|
||||
.custom-table :deep(.n-tag--small-type) {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* 紧凑表单样式 */
|
||||
@ -1808,4 +1719,56 @@ onMounted(() => {
|
||||
.menu-options::-webkit-scrollbar-thumb:hover {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
/* 自定义表格滚动条样式 */
|
||||
.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