dev-templates/coder-common-thin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(user): 修正用户管理页面导出功能下拉菜单图标显示

Browse Source 
- 导入正确的图标组件：IconParkOutlineDownload、IconParkOutlineDownloadOne、IconParkOutlineFileCodeOne
- 修正render函数中的图标使用方式，从字符串引用改为组件引用
- 为下拉菜单图标添加合适的尺寸设置(size: 14)
- 完善图标语义化映射：导出当前查询数据→download、导出全部数据→download-one、下载导入模板→file-code-one
- 优化操作按钮样式，统一使用小尺寸按钮和图标
- 调整表格布局和滚动条样式，提升用户体验
This commit is contained in:
Leo 2025-07-08 22:35:50 +08:00
parent 5b2c57ca34
commit 3b5944e789
1 changed files with 108 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
src/views/system/user/index.vue
View File

@ -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',
}, {
default: () => '编辑',
trigger: () => h(NButton, {
buttons.push(h(NButton, {
type: 'primary',
size: 'medium',
circle: true,
class: 'action-btn action-btn-edit',
size: 'small',
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',
}, {
default: () => '删除',
trigger: () => h(NButton, {
type: 'error',
size: 'medium',
circle: true,
class: 'action-btn action-btn-delete',
size: 'small',
}, {
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',
}, {
default: () => '重置密码',
trigger: () => h(NButton, {
buttons.push(h(NButton, {
type: 'warning',
size: 'medium',
circle: true,
class: 'action-btn action-btn-warning',
size: 'small',
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',
}, {
default: () => '分配角色',
trigger: () => h(NButton, {
type: 'warning',
size: 'medium',
circle: true,
class: 'action-btn action-btn-warning',
buttons.push(h(NButton, {
type: 'info',
size: 'small',
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，在表格中显示为灰色 */