From 8ea41f17b6b03d7d210b2bedb0e2db9c20f7ebc4 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:26:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(user):=20=E5=85=A8=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=92=8C=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

主要优化：
- 修复角色分配回显问题，编辑时正确加载用户完整信息
- 优化邮箱字段tooltip显示，解决文字颜色不清晰问题
- 美化角色分配标签，采用主题色渐变设计
- 统一操作按钮样式，使用圆形按钮和悬浮效果
- 新增NovaEmpty空状态组件，提升无数据时用户体验

技术改进：
- 编辑用户时调用getUserById获取完整roleIds信息
- 自定义renderRoleTag函数，优化角色标签视觉效果
- 修复tooltip文字继承灰色样式导致不清晰的问题
- 移除用户类型标签圆角，保持界面设计一致性
- 操作列宽度优化，按钮间距和布局更加紧凑

交互体验：
- 角色标签支持悬停动效和渐变背景
- 操作按钮tooltip提示更加友好
- 空状态页面提供智能操作建议
---
 src/views/system/user/index.vue | 451 +++++++++++++++++++++++++++++---
 1 file changed, 412 insertions(+), 39 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1874177..913a635 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -205,7 +205,9 @@
 
       <!-- 表格内容 -->
       <div class="table-wrapper flex-1 overflow-auto pt-4">
+        <!-- 数据表格 -->
         <n-data-table
+          v-if="tableData.length > 0 || loading"
           :columns="columns"
           :data="tableData"
           :loading="loading"
@@ -216,10 +218,40 @@
           class="custom-table"
           @update:checked-row-keys="handleRowSelectionChange"
         />
+
+        <!-- 空状态 -->
+        <NovaEmpty
+          v-else
+          :type="getEmptyType()"
+          :title="getEmptyTitle()"
+          :description="getEmptyDescription()"
+          :show-action="true"
+          :action-text="getEmptyActionText()"
+          size="medium"
+          @action="handleEmptyAction"
+        >
+          <template #action>
+            <NButton
+              type="primary"
+              size="medium"
+              round
+              class="nova-empty__action-btn"
+              @click="handleEmptyAction"
+            >
+              <template #icon>
+                <NIcon>
+                  <icon-park-outline:refresh v-if="hasSearchConditions()" />
+                  <icon-park-outline:plus v-else />
+                </NIcon>
+              </template>
+              {{ getEmptyActionText() }}
+            </NButton>
+          </template>
+        </NovaEmpty>
       </div>
 
       <!-- 分页器 -->
-      <div class="flex items-center px-4 py-2 border-t border-gray-100">
+      <div v-if="tableData.length > 0" class="flex items-center px-4 py-2 border-t border-gray-100">
         <div class="text-sm text-gray-500 mr-4">
           共 {{ pagination.itemCount }} 条
         </div>
@@ -353,6 +385,8 @@
                     v-model:value="formData.roleIds"
                     multiple
                     placeholder="请选择角色"
+                    class="role-select"
+                    :render-tag="renderRoleTag"
                     :options="roleOptions.map(role => ({
                       label: role.roleName,
                       value: role.roleId,
@@ -671,8 +705,13 @@
 <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, NUpload, NUploadDragger } from 'naive-ui'
+import { NButton, NCheckbox, NDropdown, NIcon, NPopconfirm, NProgress, NSpace, NSwitch, NTag, NTooltip, 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 NovaDialog from '@/components/common/NovaDialog.vue'
+import NovaEmpty from '@/components/common/NovaEmpty.vue'
 import {
   addUser,
   batchDeleteUsers,
@@ -680,11 +719,11 @@ import {
   downloadExcelTemplate,
   exportExcelData,
   fetchUserPage,
+  getUserById,
   importUserData,
   resetUserPassword,
   updateUser,
   updateUserStatus,
-
 } from '@/service/api/system/user'
 import type { UserSearchForm, UserVo } from '@/service/api/system/user'
 
@@ -878,7 +917,7 @@ const columns: DataTableColumns<UserVo> = [
     width: 120,
     align: 'center',
     render: (row) => {
-      return h('span', { class: 'font-medium text-gray-900' }, row.loginName)
+      return h('span', { class: 'text-gray-600' }, row.loginName)
     },
   },
   {
@@ -897,7 +936,7 @@ const columns: DataTableColumns<UserVo> = [
     align: 'center',
     ellipsis: { tooltip: true },
     render: (row) => {
-      return h('span', { class: 'text-gray-600' }, row.email || '-')
+      return h('span', { class: 'email-cell-text' }, row.email || '-')
     },
   },
   {
@@ -921,7 +960,7 @@ const columns: DataTableColumns<UserVo> = [
         3: { label: '微信用户', type: 'warning' },
       }
       const config = typeMap[row.userType] || { label: '未知', type: 'default' }
-      return h(NTag, { type: config.type, size: 'small', round: true }, { default: () => config.label })
+      return h(NTag, { type: config.type, size: 'small' }, { default: () => config.label })
     },
   },
   {
@@ -978,7 +1017,7 @@ const columns: DataTableColumns<UserVo> = [
   {
     title: '操作',
     key: 'actions',
-    width: 300,
+    width: 160,
     align: 'center',
     fixed: 'right',
     render: (row) => {
@@ -986,13 +1025,19 @@ const columns: DataTableColumns<UserVo> = [
 
       // 编辑按钮
       if (hasButton(PERMISSIONS.USER.UPDATE)) {
-        buttons.push(h(NButton, {
-          type: 'primary',
-          size: 'small',
-          onClick: () => handleEdit(row),
+        buttons.push(h(NTooltip, {
+          trigger: 'hover',
         }, {
-          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:edit') }),
           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) }),
+          }),
         }))
       }
 
@@ -1004,37 +1049,55 @@ const columns: DataTableColumns<UserVo> = [
           positiveText: '确定',
         }, {
           default: () => '确定删除此用户吗？',
-          trigger: () => h(NButton, {
-            type: 'error',
-            size: 'small',
+          trigger: () => h(NTooltip, {
+            trigger: 'hover',
           }, {
-            icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:delete') }),
             default: () => '删除',
+            trigger: () => h(NButton, {
+              type: 'error',
+              size: 'medium',
+              circle: true,
+              class: 'action-btn action-btn-delete',
+            }, {
+              icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineDelete) }),
+            }),
           }),
         }))
       }
 
       // 重置密码按钮
       if (hasButton(PERMISSIONS.USER.RESET_PWD)) {
-        buttons.push(h(NButton, {
-          type: 'warning',
-          size: 'small',
-          onClick: () => handleResetPassword(row),
+        buttons.push(h(NTooltip, {
+          trigger: 'hover',
         }, {
-          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:refresh') }),
           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) }),
+          }),
         }))
       }
 
       // 分配角色按钮
       if (hasButton(PERMISSIONS.USER.ROLE)) {
-        buttons.push(h(NButton, {
-          type: 'info',
-          size: 'small',
-          onClick: () => handleAssignRole(row),
+        buttons.push(h(NTooltip, {
+          trigger: 'hover',
         }, {
-          icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:setting') }),
           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) }),
+          }),
         }))
       }
 
@@ -1187,23 +1250,65 @@ function handleAdd() {
 }
 
 // 编辑用户
-function handleEdit(user: UserVo) {
+async function handleEdit(user: UserVo) {
   modalTitle.value = '编辑用户'
   isEdit.value = true
   currentUser.value = user
-  formData.value = {
-    loginName: user.loginName,
-    userName: user.userName,
-    password: '',
-    confirmPassword: '',
-    userType: user.userType,
-    email: user.email || '',
-    phone: user.phone || '',
-    sex: user.sex || '3',
-    userStatus: user.userStatus,
-    remark: user.remark || '',
-    roleIds: user.roleIds || [],
+
+  try {
+    // 获取完整的用户信息（包含roleIds）
+    const { isSuccess, data } = await getUserById(user.userId)
+
+    if (isSuccess && data) {
+      formData.value = {
+        loginName: data.loginName,
+        userName: data.userName,
+        password: '',
+        confirmPassword: '',
+        userType: data.userType,
+        email: data.email || '',
+        phone: data.phone || '',
+        sex: data.sex || '3',
+        userStatus: data.userStatus,
+        remark: data.remark || '',
+        roleIds: data.roleIds || [],
+      }
+    }
+    else {
+      // 如果获取详情失败，使用列表数据作为备用
+      formData.value = {
+        loginName: user.loginName,
+        userName: user.userName,
+        password: '',
+        confirmPassword: '',
+        userType: user.userType,
+        email: user.email || '',
+        phone: user.phone || '',
+        sex: user.sex || '3',
+        userStatus: user.userStatus,
+        remark: user.remark || '',
+        roleIds: [],
+      }
+    }
   }
+  catch (error) {
+    console.error('获取用户详情失败:', error)
+    // 如果获取详情出错，使用列表数据作为备用
+    formData.value = {
+      loginName: user.loginName,
+      userName: user.userName,
+      password: '',
+      confirmPassword: '',
+      userType: user.userType,
+      email: user.email || '',
+      phone: user.phone || '',
+      sex: user.sex || '3',
+      userStatus: user.userStatus,
+      remark: user.remark || '',
+      roleIds: [],
+    }
+  }
+
   userDialogRef.value?.novaOpen()
 }
 
@@ -1772,6 +1877,84 @@ function handleCancel() {
   userDialogRef.value?.novaClose()
 }
 
+// 判断是否有搜索条件
+function hasSearchConditions() {
+  return Object.values(searchForm.value).some((value) => {
+    if (value === null || value === undefined || value === '') {
+      return false
+    }
+    if (Array.isArray(value) && value.length === 0) {
+      return false
+    }
+    return true
+  })
+}
+
+// 获取空状态类型
+function getEmptyType() {
+  if (hasSearchConditions()) {
+    return 'search'
+  }
+  return 'default'
+}
+
+// 获取空状态标题
+function getEmptyTitle() {
+  if (hasSearchConditions()) {
+    return '搜索无结果'
+  }
+  return '暂无用户数据'
+}
+
+// 获取空状态描述
+function getEmptyDescription() {
+  if (hasSearchConditions()) {
+    return '未找到符合搜索条件的用户，请尝试调整搜索条件或重置筛选'
+  }
+  return '当前还没有用户数据，点击"新增"按钮创建第一个用户'
+}
+
+// 获取空状态操作文字
+function getEmptyActionText() {
+  if (hasSearchConditions()) {
+    return '重置筛选'
+  }
+  return '新增用户'
+}
+
+// 处理空状态操作
+function handleEmptyAction() {
+  if (hasSearchConditions()) {
+    handleReset()
+  }
+  else {
+    handleAdd()
+  }
+}
+
+// 自定义角色标签渲染
+function renderRoleTag({ option, handleClose }: { option: any, handleClose: () => void }) {
+  return h(NTag, {
+    type: 'primary',
+    size: 'small',
+    closable: true,
+    onClose: handleClose,
+    style: {
+      marginRight: '6px',
+      marginBottom: '2px',
+      borderRadius: '6px',
+      fontSize: '12px',
+      padding: '4px 8px',
+      background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+      border: 'none',
+      color: '#ffffff',
+      boxShadow: '0 2px 4px rgba(99, 102, 241, 0.2)',
+    },
+  }, {
+    default: () => option.label,
+  })
+}
+
 // 组件挂载时获取数据
 onMounted(() => {
   getUserList()
@@ -1893,4 +2076,194 @@ onBeforeUnmount(() => {
 .import-modal :deep(.n-upload-dragger:hover) {
   border-color: #40a9ff;
 }
+
+/* NovaEmpty按钮样式 */
+.nova-empty__action-btn {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  border: none;
+}
+
+.nova-empty__action-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.6s ease;
+}
+
+.nova-empty__action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.nova-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-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，在表格中显示为灰色 */
+}
+
+/* 确保邮箱字段的tooltip内文字清晰可见，覆盖继承的灰色 */
+:deep(.n-tooltip) .email-cell-text,
+:deep(.n-tooltip__content) .email-cell-text,
+:deep(.n-ellipsis__tooltip) .email-cell-text {
+  color: #ffffff !important; /* 强制tooltip内文字为白色 */
+}
+
+/* 针对ellipsis tooltip的特殊处理 */
+:deep(.n-ellipsis__tooltip) {
+  color: #ffffff !important;
+}
+
+:deep(.n-ellipsis__tooltip *) {
+  color: #ffffff !important;
+}
+
+/* 角色选择器样式优化 */
+.role-select :deep(.n-base-selection) {
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  transition: all 0.3s ease;
+}
+
+.role-select :deep(.n-base-selection:hover) {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.role-select :deep(.n-base-selection.n-base-selection--focus) {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+
+.role-select :deep(.n-base-selection-tags) {
+  padding: 4px;
+  min-height: 40px;
+}
+
+/* 角色标签样式 */
+.role-select :deep(.n-tag) {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+  border: none !important;
+  color: #ffffff !important;
+  border-radius: 6px !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  padding: 4px 8px !important;
+  margin: 2px 4px 2px 0 !important;
+  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2) !important;
+  transition: all 0.2s ease !important;
+}
+
+.role-select :deep(.n-tag:hover) {
+  transform: translateY(-1px) !important;
+  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3) !important;
+}
+
+.role-select :deep(.n-tag .n-base-close) {
+  color: rgba(255, 255, 255, 0.8) !important;
+  transition: color 0.2s ease !important;
+}
+
+.role-select :deep(.n-tag .n-base-close:hover) {
+  color: #ffffff !important;
+  background: rgba(255, 255, 255, 0.2) !important;
+  border-radius: 50% !important;
+}
 </style>