From 6c2c65b9096fdeb40e89cc456cbc3503ba5feb5d Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Tue, 8 Jul 2025 22:42:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor(menu):=20=E4=BC=98=E5=8C=96=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=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=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 简化操作按钮样式，移除复杂的圆形按钮和tooltip包装
- 统一使用小尺寸按钮(size: small)和14px图标
- 优化按钮文字：新增子菜单→新增，分配权限→权限
- 调整操作列宽度从160px增加到200px，适应按钮文字
- 新增表格横向滚动支持(scroll-x: 2000)
- 优化按钮间距，使用gap-1减少空间占用
- 新增表格和页面滚动条样式优化
- 移除复杂的action-btn样式类，简化CSS代码
---
 src/views/system/menu/index.vue | 205 +++++++++++++-------------------
 1 file changed, 84 insertions(+), 121 deletions(-)

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index d1eedc4..041cf47 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -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>