feat(user): 全面优化用户管理页面交互和显示效果
主要优化： - 修复角色分配回显问题，编辑时正确加载用户完整信息 - 优化邮箱字段tooltip显示，解决文字颜色不清晰问题 - 美化角色分配标签，采用主题色渐变设计 - 统一操作按钮样式，使用圆形按钮和悬浮效果 - 新增NovaEmpty空状态组件，提升无数据时用户体验 技术改进： - 编辑用户时调用getUserById获取完整roleIds信息 - 自定义renderRoleTag函数，优化角色标签视觉效果 - 修复tooltip文字继承灰色样式导致不清晰的问题 - 移除用户类型标签圆角，保持界面设计一致性 - 操作列宽度优化，按钮间距和布局更加紧凑 交互体验： - 角色标签支持悬停动效和渐变背景 - 操作按钮tooltip提示更加友好 - 空状态页面提供智能操作建议
This commit is contained in:
Leo
parent
1789e26611
commit
8ea41f17b6
@ -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, {
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '编辑',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-edit',
|
||||
onClick: () => handleEdit(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:edit') }),
|
||||
default: () => '编辑',
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineEditOne) }),
|
||||
}),
|
||||
}))
|
||||
}
|
||||
|
||||
@ -1004,37 +1049,55 @@ const columns: DataTableColumns<UserVo> = [
|
||||
positiveText: '确定',
|
||||
}, {
|
||||
default: () => '确定删除此用户吗？',
|
||||
trigger: () => h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '删除',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'error',
|
||||
size: 'small',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-delete',
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:delete') }),
|
||||
default: () => '删除',
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineDelete) }),
|
||||
}),
|
||||
}),
|
||||
}))
|
||||
}
|
||||
|
||||
// 重置密码按钮
|
||||
if (hasButton(PERMISSIONS.USER.RESET_PWD)) {
|
||||
buttons.push(h(NButton, {
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '重置密码',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'warning',
|
||||
size: 'small',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-warning',
|
||||
onClick: () => handleResetPassword(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:refresh') }),
|
||||
default: () => '重置密码',
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineRefresh) }),
|
||||
}),
|
||||
}))
|
||||
}
|
||||
|
||||
// 分配角色按钮
|
||||
if (hasButton(PERMISSIONS.USER.ROLE)) {
|
||||
buttons.push(h(NButton, {
|
||||
type: 'info',
|
||||
size: 'small',
|
||||
buttons.push(h(NTooltip, {
|
||||
trigger: 'hover',
|
||||
}, {
|
||||
default: () => '分配角色',
|
||||
trigger: () => h(NButton, {
|
||||
type: 'warning',
|
||||
size: 'medium',
|
||||
circle: true,
|
||||
class: 'action-btn action-btn-warning',
|
||||
onClick: () => handleAssignRole(row),
|
||||
}, {
|
||||
icon: () => h(NIcon, { size: 14, style: 'transform: translateY(-1px)' }, { default: () => h('icon-park-outline:setting') }),
|
||||
default: () => '分配角色',
|
||||
icon: () => h(NIcon, { size: 18 }, { default: () => h(IconParkOutlineUserPositioning) }),
|
||||
}),
|
||||
}))
|
||||
}
|
||||
|
||||
@ -1187,10 +1250,32 @@ function handleAdd() {
|
||||
}
|
||||
|
||||
// 编辑用户
|
||||
function handleEdit(user: UserVo) {
|
||||
async function handleEdit(user: UserVo) {
|
||||
modalTitle.value = '编辑用户'
|
||||
isEdit.value = true
|
||||
currentUser.value = user
|
||||
|
||||
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,
|
||||
@ -1202,8 +1287,28 @@ function handleEdit(user: UserVo) {
|
||||
sex: user.sex || '3',
|
||||
userStatus: user.userStatus,
|
||||
remark: user.remark || '',
|
||||
roleIds: user.roleIds || [],
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user