refactor(role): 优化角色管理页面操作按钮和表格样式
- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装 - 统一使用小尺寸按钮(size: small)和14px图标 - 优化按钮间距，使用gap-1减少空间占用 - 调整表格尺寸为medium，提升数据密度 - 优化表格单元格内边距和字体大小 - 新增表格横向滚动支持(scroll-x: 1200) - 优化表格和页面滚动条样式，提升视觉效果 - 调整搜索表单列数为5列，优化布局
This commit is contained in:
Leo
parent
f8d1511a5d
commit
87c99990c0
@ -11,7 +11,7 @@
|
||||
label-width="auto"
|
||||
class="search-form"
|
||||
>
|
||||
<n-grid :cols="6" :x-gap="8" :y-gap="4">
|
||||
<n-grid :cols="5" :x-gap="8" :y-gap="4">
|
||||
<n-grid-item>
|
||||
<n-form-item label="角色名称" path="roleName">
|
||||
<n-input
|
||||
@ -170,7 +170,8 @@
|
||||
:row-key="(row: RoleVo) => row.roleId"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
size="large"
|
||||
:scroll-x="1200"
|
||||
size="medium"
|
||||
class="custom-table"
|
||||
@update:checked-row-keys="handleRowSelectionChange"
|
||||
/>
|
||||
@ -421,7 +422,7 @@
|
||||
<script setup lang="ts">
|
||||
import { h, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import type { DataTableColumns, FormInst } from 'naive-ui'
|
||||
import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTooltip, NTree } from 'naive-ui'
|
||||
import { NButton, NIcon, NPopconfirm, NSpace, NSwitch, NTag, NTree } from 'naive-ui'
|
||||
import IconParkOutlineEditOne from '~icons/icon-park-outline/edit-one'
|
||||
import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
|
||||
import IconParkOutlineKey from '~icons/icon-park-outline/key'
|
||||
@ -613,19 +614,15 @@ const columns: DataTableColumns<RoleVo> = [
|
||||
|
||||
// 编辑按钮
|
||||
if (hasButton(PERMISSIONS.ROLE.UPDATE)) {
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '编辑',
|
||||
trigger: () => h(NButton, {
|
||||
buttons.push(h(NButton, {
|
||||
type: 'primary',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-edit',
|
||||
size: 'small',
|
||||
onClick: () => handleEdit(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineEditOne) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlineEditOne),
|
||||
}),
|
||||
default: () => '编辑',
|
||||
}))
|
||||
}
|
||||
|
||||
@ -637,42 +634,34 @@ const columns: DataTableColumns<RoleVo> = [
|
||||
positiveText: '确定',
|
||||
}, {
|
||||
default: () => row.roleId === 1 ? '超级管理员角色不可删除' : '确定删除此角色吗？',
|
||||
trigger: () => h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '删除',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'error',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-delete',
|
||||
size: 'small',
|
||||
disabled: row.roleId === 1,
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineDelete) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlineDelete),
|
||||
}),
|
||||
default: () => '删除',
|
||||
}),
|
||||
}))
|
||||
}
|
||||
|
||||
// 分配权限按钮 - 超级管理员不显示
|
||||
if (hasButton(PERMISSIONS.ROLE.MENU) && row.roleId !== 1) {
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '分配权限',
|
||||
trigger: () => h(NButton, {
|
||||
buttons.push(h(NButton, {
|
||||
type: 'warning',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-warning',
|
||||
size: 'small',
|
||||
onClick: () => handleAssignMenu(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineKey) }),
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
|
||||
default: () => h(IconParkOutlineKey),
|
||||
}),
|
||||
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)
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -1315,13 +1304,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;
|
||||
}
|
||||
|
||||
@ -1331,9 +1322,74 @@ onMounted(() => {
|
||||
|
||||
.search-form :deep(.n-form-item-label) {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
/* 操作按钮样式优化 */
|
||||
.custom-table :deep(.n-button--small-type) {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* 标签尺寸优化 */
|
||||
.custom-table :deep(.n-tag--small-type) {
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.role-modal :deep(.n-card-header) {
|
||||
padding: 24px 24px 0;
|
||||
font-size: 18px;
|
||||
@ -1520,80 +1576,4 @@ onMounted(() => {
|
||||
.coi-empty__action-btn:hover::before {
|
||||
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;
|
||||
}
|
||||
|
||||
.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-warning {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.action-btn-warning:hover {
|
||||
background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
|
||||
box-shadow: 0 4px 16px rgba(245, 158, 11, 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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user