From 87c99990c0920436fd343f9af7d708144d45e487 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Tue, 8 Jul 2025 22:40:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor(role):=20=E4=BC=98=E5=8C=96=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=92=8C=E8=A1=A8=E6=A0=BC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装
- 统一使用小尺寸按钮(size: small)和14px图标
- 优化按钮间距，使用gap-1减少空间占用
- 调整表格尺寸为medium，提升数据密度
- 优化表格单元格内边距和字体大小
- 新增表格横向滚动支持(scroll-x: 1200)
- 优化表格和页面滚动条样式，提升视觉效果
- 调整搜索表单列数为5列，优化布局
---
 src/views/system/role/index.vue | 210 +++++++++++++++-----------------
 1 file changed, 95 insertions(+), 115 deletions(-)

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 4890ef8..7d6526a 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -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',
+        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(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',
+          trigger: () => h(NButton, {
+            type: 'error',
+            size: 'small',
+            disabled: row.roleId === 1,
           }, {
-            default: () => '删除',
-            trigger: () => h(NButton, {
-              type: 'error',
-              size: 'medium',
-              circle: true,
-              class: 'action-btn action-btn-delete',
-              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',
+        buttons.push(h(NButton, {
+          type: 'warning',
+          size: 'small',
+          onClick: () => handleAssignMenu(row),
         }, {
-          default: () => '分配权限',
-          trigger: () => h(NButton, {
-            type: 'warning',
-            size: 'medium',
-            circle: true,
-            class: 'action-btn action-btn-warning',
-            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>