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>
<NButton type="primary" @click="handleSearch">
<template #icon>
<NIcon><icon-park-outline:search /></NIcon>
<NIcon><icon-park-outline-search /></NIcon>
</template>
搜索
</NButton>
<NButton @click="handleReset">
<template #icon>
<NIcon><icon-park-outline:refresh /></NIcon>
<NIcon><IconParkOutlineRefresh /></NIcon>
</template>
重置
</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 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>
<NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:plus />
<icon-park-outline-plus />
</NIcon>
</template>
新增
@ -122,7 +122,7 @@
>
<template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:delete />
<IconParkOutlineDelete />
</NIcon>
</template>
删除
@ -137,7 +137,7 @@
>
<template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:userPositioning />
<IconParkOutlineUserPositioning />
</NIcon>
</template>
分配角色
@ -173,12 +173,12 @@
<NButton class="px-6 flex items-center">
<template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:download />
<IconParkOutlineDownload />
</NIcon>
</template>
导出
<NIcon class="ml-1" style="transform: translateY(-1px)">
<icon-park-outline:down />
<icon-park-outline-down />
</NIcon>
</NButton>
</NDropdown>
@ -186,7 +186,7 @@
<NButton v-button="PERMISSIONS.USER.IMPORT" class="px-6 flex items-center" @click="handleImport">
<template #icon>
<NIcon class="mr-1" style="transform: translateY(-1px)">
<icon-park-outline:upload />
<icon-park-outline-upload />
</NIcon>
</template>
导入
@ -197,7 +197,7 @@
<span>共 {{ pagination.itemCount }} 条</span>
<NButton text @click="getUserList">
<template #icon>
<NIcon><icon-park-outline:refresh /></NIcon>
<NIcon><IconParkOutlineRefresh /></NIcon>
</template>
</NButton>
</div>
@ -236,7 +236,6 @@
type="primary"
size="medium"
round
class="coi-empty__action-btn"
@click="handleEmptyAction"
>
<template #icon>
@ -285,12 +284,13 @@
:model="formData"
:rules="rules"
label-placement="left"
label-width="100px"
label-width="90px"
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-form-item label="登录账号" path="loginName">
<n-form-item label="登录账号" path="loginName" class="mb-2">
<n-input
v-model:value="formData.loginName"
placeholder="请输入登录账号"
@ -300,7 +300,7 @@
</n-grid-item>
<n-grid-item>
<n-form-item label="用户姓名" path="userName">
<n-form-item label="用户姓名" path="userName" class="mb-2">
<n-input
v-model:value="formData.userName"
placeholder="请输入用户姓名"
@ -309,7 +309,7 @@
</n-grid-item>
<n-grid-item>
<n-form-item label="用户类型" path="userType">
<n-form-item label="用户类型" path="userType" class="mb-2">
<n-select
v-model:value="formData.userType"
placeholder="请选择用户类型"
@ -323,7 +323,7 @@
</n-grid-item>
<n-grid-item>
<n-form-item label="性别" path="sex">
<n-form-item label="性别" path="sex" class="mb-2">
<n-select
v-model:value="formData.sex"
placeholder="请选择性别"
@ -337,7 +337,7 @@
</n-grid-item>
<n-grid-item>
<n-form-item label="邮箱" path="email">
<n-form-item label="邮箱" path="email" class="mb-2">
<n-input
v-model:value="formData.email"
placeholder="请输入邮箱"
@ -346,7 +346,7 @@
</n-grid-item>
<n-grid-item>
<n-form-item label="手机号" path="phone">
<n-form-item label="手机号" path="phone" class="mb-2">
<n-input
v-model:value="formData.phone"
placeholder="请输入手机号"
@ -355,7 +355,7 @@
</n-grid-item>
<n-grid-item v-if="!isEdit">
<n-form-item label="密码" path="password">
<n-form-item label="密码" path="password" class="mb-2">
<n-input
v-model:value="formData.password"
type="password"
@ -366,7 +366,7 @@
</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 value="0">
启用
@ -379,7 +379,7 @@
</n-grid-item>
<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
v-model:value="formData.roleIds"
multiple
@ -395,7 +395,7 @@
</n-grid-item>
</n-grid>
<n-form-item label="备注" path="remark">
<n-form-item label="备注" path="remark" class="mb-2">
<n-input
v-model:value="formData.remark"
type="textarea"
@ -1952,10 +1952,6 @@ function renderRoleTag({ option, handleClose }: { option: any, handleClose: () =
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,
@ -2151,36 +2147,6 @@ onBeforeUnmount(() => {
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文字清晰 */
.email-cell-text {
color: #6b7280; /* 对应 text-gray-500，在表格中显示为灰色 */
@ -2205,18 +2171,18 @@ onBeforeUnmount(() => {
/* 角色选择器样式优化 */
.role-select :deep(.n-base-selection) {
border-radius: 8px;
border: 1px solid #e5e7eb;
border: 1px solid var(--border-color);
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);
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-color-suppl);
}
.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);
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-color-suppl);
}
.role-select :deep(.n-base-selection-tags) {
@ -2226,7 +2192,7 @@ onBeforeUnmount(() => {
/* 角色标签样式 */
.role-select :deep(.n-tag) {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
background: var(--primary-color) !important;
border: none !important;
color: #ffffff !important;
border-radius: 6px !important;
@ -2234,13 +2200,13 @@ onBeforeUnmount(() => {
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;
box-shadow: 0 2px 4px var(--primary-color-suppl) !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;
box-shadow: 0 4px 8px var(--primary-color-suppl) !important;
}
.role-select :deep(.n-tag .n-base-close) {
@ -2253,4 +2219,42 @@ onBeforeUnmount(() => {
background: rgba(255, 255, 255, 0.2) !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>