From 3b5944e789d39a4c740b5a2100fc6b6362055c2f Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Tue, 8 Jul 2025 22:35:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(user):=20=E4=BF=AE=E6=AD=A3=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 导入正确的图标组件：IconParkOutlineDownload、IconParkOutlineDownloadOne、IconParkOutlineFileCodeOne
- 修正render函数中的图标使用方式，从字符串引用改为组件引用
- 为下拉菜单图标添加合适的尺寸设置(size: 14)
- 完善图标语义化映射：导出当前查询数据→download、导出全部数据→download-one、下载导入模板→file-code-one
- 优化操作按钮样式，统一使用小尺寸按钮和图标
- 调整表格布局和滚动条样式，提升用户体验
---
 src/views/system/user/index.vue | 248 ++++++++++++++------------------
 1 file changed, 108 insertions(+), 140 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index cdfc617..6847987 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -11,7 +11,7 @@
           label-width="auto"
           class="search-form"
         >
-          <n-grid :cols="7" :x-gap="8" :y-gap="4">
+          <n-grid :cols="5" :x-gap="8" :y-gap="4">
             <n-grid-item>
               <n-form-item label="登录账号" path="loginName">
                 <n-input
@@ -151,12 +151,12 @@
               {
                 label: '导出当前查询数据',
                 key: 'current',
-                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:download') }),
+                icon: () => h(NIcon, { size: 14 }, { default: () => h(IconParkOutlineDownload) }),
               },
               {
                 label: '导出全部数据',
                 key: 'all',
-                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:download-one') }),
+                icon: () => h(NIcon, { size: 14 }, { default: () => h(IconParkOutlineDownloadOne) }),
               },
               {
                 type: 'divider',
@@ -164,7 +164,7 @@
               {
                 label: '下载导入模板',
                 key: 'template',
-                icon: () => h(NIcon, null, { default: () => h('icon-park-outline:file-code-one') }),
+                icon: () => h(NIcon, { size: 14 }, { default: () => h(IconParkOutlineFileCodeOne) }),
               },
             ]"
             @update:show="(show: boolean) => showExportDropdown = show"
@@ -214,7 +214,8 @@
           :row-key="(row: UserVo) => row.userId"
           :bordered="false"
           :single-line="false"
-          size="large"
+          :scroll-x="1600"
+          size="medium"
           class="custom-table"
           @update:checked-row-keys="handleRowSelectionChange"
         />
@@ -705,11 +706,14 @@
 <script setup lang="ts">
 import { h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { DataTableColumns, FormInst } from 'naive-ui'
-import { NButton, NCheckbox, NDropdown, NIcon, NPopconfirm, NProgress, NSpace, NSwitch, NTag, NTooltip, NUpload, NUploadDragger } from 'naive-ui'
+import { NButton, NCheckbox, NDropdown, NIcon, NPopconfirm, NProgress, NSpace, NSwitch, NTag, NUpload, NUploadDragger } from 'naive-ui'
 import IconParkOutlineEditOne from '~icons/icon-park-outline/edit-one'
 import IconParkOutlineDelete from '~icons/icon-park-outline/delete'
 import IconParkOutlineRefresh from '~icons/icon-park-outline/refresh'
 import IconParkOutlineUserPositioning from '~icons/icon-park-outline/user-positioning'
+import IconParkOutlineDownload from '~icons/icon-park-outline/download'
+import IconParkOutlineDownloadOne from '~icons/icon-park-outline/download-one'
+import IconParkOutlineFileCodeOne from '~icons/icon-park-outline/file-code-one'
 import CoiDialog from '@/components/common/CoiDialog.vue'
 import CoiEmpty from '@/components/common/CoiEmpty.vue'
 import {
@@ -1017,7 +1021,7 @@ const columns: DataTableColumns<UserVo> = [
   {
     title: '操作',
     key: 'actions',
-    width: 160,
+    width: 240,
     align: 'center',
     fixed: 'right',
     render: (row) => {
@@ -1025,19 +1029,15 @@ const columns: DataTableColumns<UserVo> = [
 
       // 编辑按钮
       if (hasButton(PERMISSIONS.USER.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: () => '编辑',
         }))
       }
 
@@ -1049,59 +1049,47 @@ const columns: DataTableColumns<UserVo> = [
           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: () => '删除',
           }),
         }))
       }
 
       // 重置密码按钮
       if (hasButton(PERMISSIONS.USER.RESET_PWD)) {
-        buttons.push(h(NTooltip, {
-          trigger: 'hover',
+        buttons.push(h(NButton, {
+          type: 'warning',
+          size: 'small',
+          onClick: () => handleResetPassword(row),
         }, {
-          default: () => '重置密码',
-          trigger: () => h(NButton, {
-            type: 'warning',
-            size: 'medium',
-            circle: true,
-            class: 'action-btn action-btn-warning',
-            onClick: () => handleResetPassword(row),
-          }, {
-            icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineRefresh) }),
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineRefresh),
           }),
+          default: () => '重置',
         }))
       }
 
       // 分配角色按钮
       if (hasButton(PERMISSIONS.USER.ROLE)) {
-        buttons.push(h(NTooltip, {
-          trigger: 'hover',
+        buttons.push(h(NButton, {
+          type: 'info',
+          size: 'small',
+          onClick: () => handleAssignRole(row),
         }, {
-          default: () => '分配角色',
-          trigger: () => h(NButton, {
-            type: 'warning',
-            size: 'medium',
-            circle: true,
-            class: 'action-btn action-btn-warning',
-            onClick: () => handleAssignRole(row),
-          }, {
-            icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineUserPositioning) }),
+          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, {
+            default: () => h(IconParkOutlineUserPositioning),
           }),
+          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)
     },
   },
 ]
@@ -2009,13 +1997,15 @@ onBeforeUnmount(() => {
 }
 
 .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;
 }
 
@@ -2025,9 +2015,74 @@ onBeforeUnmount(() => {
 
 .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;
+}
+
 .user-modal :deep(.n-card-header) {
   padding: 24px 24px 0;
   font-size: 18px;
@@ -2127,93 +2182,6 @@ onBeforeUnmount(() => {
   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-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;
-}
-
 /* 邮箱字段样式 - 确保tooltip文字清晰 */
 .email-cell-text {
   color: #6b7280; /* 对应 text-gray-500，在表格中显示为灰色 */