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

fix(user): 修复用户管理页面角色分配字段主题色适配问题

Browse Source 
- 移除角色选择器边框和阴影的硬编码紫色 #6366f1
- 使用 var(--primary-color) 和 var(--primary-color-suppl) 跟随系统主题色
- 优化角色标签样式使用 var(--primary-color) 替代硬编码渐变色
- 简化 renderRoleTag 函数，移除硬编码样式，使用 NTag 原生主题色
- 应用紧凑表单设计规范：800px弹框宽度、90px标签宽度、10px列间距
- 修复图标引用格式，确保图标正确显示
- 确保角色分配字段在主题切换时能正确适配颜色
This commit is contained in:
Leo 2025-07-09 11:45:57 +08:00
parent f59893dae0
commit 5b49c1bb2a
1 changed files with 69 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,13 +85,13 @@
<NSpace> <NSpace>
<NButton type="primary" @click="handleSearch"> <NButton type="primary" @click="handleSearch">
<template #icon> <template #icon>
<NIcon><icon-park-outline:search /></NIcon> <NIcon><icon-park-outline-search /></NIcon>
</template> </template>
搜索 搜索
</NButton> </NButton>
<NButton @click="handleReset"> <NButton @click="handleReset">
<template #icon> <template #icon>
<NIcon><icon-park-outline:refresh /></NIcon> <NIcon><IconParkOutlineRefresh /></NIcon>
</template> </template>
重置 重置
</NButton> </NButton>
@ -104,10 +104,10 @@
<!-- 表格头部操作栏 --> <!-- 表格头部操作栏 -->
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-100"> <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<NButton v-button="PERMISSIONS.USER.ADD" type="primary" class="px-6 flex items-center" @click="handleAdd"> <NButton v-button="PERMISSIONS.USER.ADD" type="primary" class="px-3 flex items-center" @click="handleAdd">
<template #icon> <template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)"> <NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:plus /> <icon-park-outline-plus />
</NIcon> </NIcon>
</template> </template>
新增 新增
@ -122,7 +122,7 @@
> >
<template #icon> <template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)"> <NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:delete /> <IconParkOutlineDelete />
</NIcon> </NIcon>
</template> </template>
删除 删除
@ -137,7 +137,7 @@
> >
<template #icon> <template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)"> <NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:userPositioning /> <IconParkOutlineUserPositioning />
</NIcon> </NIcon>
</template> </template>
分配角色 分配角色
@ -173,12 +173,12 @@
<NButton class="px-6 flex items-center"> <NButton class="px-6 flex items-center">
<template #icon> <template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)"> <NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:download /> <IconParkOutlineDownload />
</NIcon> </NIcon>
</template> </template>
导出 导出
<NIcon class="ml-1" style="transform: translateY(-1px)"> <NIcon class="ml-1" style="transform: translateY(-1px)">
<icon-park-outline:down /> <icon-park-outline-down />
</NIcon> </NIcon>
</NButton> </NButton>
</NDropdown> </NDropdown>
@ -186,7 +186,7 @@
<NButton v-button="PERMISSIONS.USER.IMPORT" class="px-6 flex items-center" @click="handleImport"> <NButton v-button="PERMISSIONS.USER.IMPORT" class="px-6 flex items-center" @click="handleImport">
<template #icon> <template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)"> <NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:upload /> <icon-park-outline-upload />
</NIcon> </NIcon>
</template> </template>
导入 导入
@ -197,7 +197,7 @@
<span>共 {{ pagination.itemCount }} 条</span> <span>共 {{ pagination.itemCount }} 条</span>
<NButton text @click="getUserList"> <NButton text @click="getUserList">
<template #icon> <template #icon>
<NIcon><icon-park-outline:refresh /></NIcon> <NIcon><IconParkOutlineRefresh /></NIcon>
</template> </template>
</NButton> </NButton>
</div> </div>
@ -236,7 +236,6 @@
type="primary" type="primary"
size="medium" size="medium"
round round
class="coi-empty__action-btn"
@click="handleEmptyAction" @click="handleEmptyAction"
> >
<template #icon> <template #icon>
@ -285,12 +284,13 @@
:model="formData" :model="formData"
:rules="rules" :rules="rules"
label-placement="left" label-placement="left"
label-width="100px" label-width="90px"
require-mark-placement="right-hanging" require-mark-placement="right-hanging"
class="compact-form"
> >
<n-grid :cols="2" :x-gap="24"> <n-grid :cols="2" :x-gap="10">
<n-grid-item> <n-grid-item>
<n-form-item label="登录账号" path="loginName"> <n-form-item label="登录账号" path="loginName" class="mb-2">
<n-input <n-input
v-model:value="formData.loginName" v-model:value="formData.loginName"
placeholder="请输入登录账号" placeholder="请输入登录账号"
@ -300,7 +300,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-form-item label="用户姓名" path="userName"> <n-form-item label="用户姓名" path="userName" class="mb-2">
<n-input <n-input
v-model:value="formData.userName" v-model:value="formData.userName"
placeholder="请输入用户姓名" placeholder="请输入用户姓名"
@ -309,7 +309,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-form-item label="用户类型" path="userType"> <n-form-item label="用户类型" path="userType" class="mb-2">
<n-select <n-select
v-model:value="formData.userType" v-model:value="formData.userType"
placeholder="请选择用户类型" placeholder="请选择用户类型"
@ -323,7 +323,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-form-item label="性别" path="sex"> <n-form-item label="性别" path="sex" class="mb-2">
<n-select <n-select
v-model:value="formData.sex" v-model:value="formData.sex"
placeholder="请选择性别" placeholder="请选择性别"
@ -337,7 +337,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-form-item label="邮箱" path="email"> <n-form-item label="邮箱" path="email" class="mb-2">
<n-input <n-input
v-model:value="formData.email" v-model:value="formData.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
@ -346,7 +346,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-form-item label="手机号" path="phone"> <n-form-item label="手机号" path="phone" class="mb-2">
<n-input <n-input
v-model:value="formData.phone" v-model:value="formData.phone"
placeholder="请输入手机号" placeholder="请输入手机号"
@ -355,7 +355,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item v-if="!isEdit"> <n-grid-item v-if="!isEdit">
<n-form-item label="密码" path="password"> <n-form-item label="密码" path="password" class="mb-2">
<n-input <n-input
v-model:value="formData.password" v-model:value="formData.password"
type="password" type="password"
@ -366,7 +366,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item> <n-grid-item>
<n-form-item label="用户状态" path="userStatus"> <n-form-item label="用户状态" path="userStatus" class="mb-2">
<n-radio-group v-model:value="formData.userStatus"> <n-radio-group v-model:value="formData.userStatus">
<n-radio value="0"> <n-radio value="0">
启用 启用
@ -379,7 +379,7 @@
</n-grid-item> </n-grid-item>
<n-grid-item v-if="roleOptions.length > 0" :span="2"> <n-grid-item v-if="roleOptions.length > 0" :span="2">
<n-form-item label="角色分配" path="roleIds"> <n-form-item label="角色分配" path="roleIds" class="mb-2">
<n-select <n-select
v-model:value="formData.roleIds" v-model:value="formData.roleIds"
multiple multiple
@ -395,7 +395,7 @@
</n-grid-item> </n-grid-item>
</n-grid> </n-grid>
<n-form-item label="备注" path="remark"> <n-form-item label="备注" path="remark" class="mb-2">
<n-input <n-input
v-model:value="formData.remark" v-model:value="formData.remark"
type="textarea" type="textarea"
@ -1952,10 +1952,6 @@ function renderRoleTag({ option, handleClose }: { option: any, handleClose: () =
borderRadius: '6px', borderRadius: '6px',
fontSize: '12px', fontSize: '12px',
padding: '4px 8px', 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, default: () => option.label,
@ -2151,36 +2147,6 @@ onBeforeUnmount(() => {
border-color: #40a9ff; border-color: #40a9ff;
} }
/* CoiEmpty按钮样式 */
.coi-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;
}
.coi-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;
}
.coi-empty__action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.coi-empty__action-btn:hover::before {
left: 100%;
}
/* 邮箱字段样式 - 确保tooltip文字清晰 */ /* 邮箱字段样式 - 确保tooltip文字清晰 */
.email-cell-text { .email-cell-text {
color: #6b7280; /* 对应 text-gray-500，在表格中显示为灰色 */ color: #6b7280; /* 对应 text-gray-500，在表格中显示为灰色 */
@ -2205,18 +2171,18 @@ onBeforeUnmount(() => {
/* 角色选择器样式优化 */ /* 角色选择器样式优化 */
.role-select :deep(.n-base-selection) { .role-select :deep(.n-base-selection) {
border-radius: 8px; border-radius: 8px;
border: 1px solid #e5e7eb; border: 1px solid var(--border-color);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.role-select :deep(.n-base-selection:hover) { .role-select :deep(.n-base-selection:hover) {
border-color: #6366f1; border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); box-shadow: 0 0 0 3px var(--primary-color-suppl);
} }
.role-select :deep(.n-base-selection.n-base-selection--focus) { .role-select :deep(.n-base-selection.n-base-selection--focus) {
border-color: #6366f1; border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); box-shadow: 0 0 0 3px var(--primary-color-suppl);
} }
.role-select :deep(.n-base-selection-tags) { .role-select :deep(.n-base-selection-tags) {
@ -2226,7 +2192,7 @@ onBeforeUnmount(() => {
/* 角色标签样式 */ /* 角色标签样式 */
.role-select :deep(.n-tag) { .role-select :deep(.n-tag) {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; background: var(--primary-color) !important;
border: none !important; border: none !important;
color: #ffffff !important; color: #ffffff !important;
border-radius: 6px !important; border-radius: 6px !important;
@ -2234,13 +2200,13 @@ onBeforeUnmount(() => {
font-weight: 500 !important; font-weight: 500 !important;
padding: 4px 8px !important; padding: 4px 8px !important;
margin: 2px 4px 2px 0 !important; margin: 2px 4px 2px 0 !important;
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2) !important; box-shadow: 0 2px 4px var(--primary-color-suppl) !important;
transition: all 0.2s ease !important; transition: all 0.2s ease !important;
} }
.role-select :deep(.n-tag:hover) { .role-select :deep(.n-tag:hover) {
transform: translateY(-1px) !important; transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3) !important; box-shadow: 0 4px 8px var(--primary-color-suppl) !important;
} }
.role-select :deep(.n-tag .n-base-close) { .role-select :deep(.n-tag .n-base-close) {
@ -2253,4 +2219,42 @@ onBeforeUnmount(() => {
background: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.2) !important;
border-radius: 50% !important; border-radius: 50% !important;
} }
/* 紧凑表单样式 */
.compact-form :deep(.n-form-item) {
margin-bottom: 8px !important;
}
.compact-form :deep(.n-form-item .n-form-item-feedback-wrapper) {
min-height: 0 !important;
padding-top: 2px !important;
}
.compact-form :deep(.n-form-item .n-form-item-label) {
padding-bottom: 2px !important;
}
.compact-form :deep(.n-input),
.compact-form :deep(.n-input-number),
.compact-form :deep(.n-select),
.compact-form :deep(.n-radio-group) {
font-size: 14px !important;
}
.compact-form :deep(.n-input .n-input__input-el),
.compact-form :deep(.n-input-number .n-input__input-el) {
padding: 2px 1px !important;
min-height: 32px !important;
}
.compact-form :deep(.n-select .n-base-selection) {
min-height: 32px !important;
padding: 2px 1px !important;
}
.compact-form :deep(.n-select .n-base-selection .n-base-selection-label) {
padding: 0 6px !important;
min-height: 30px !important;
line-height: 30px !important;
}
</style> </style>