From 5b49c1bb2a034b30050145cfa05b26fa63a7c2ef Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 9 Jul 2025 11:45:57 +0800
Subject: [PATCH] =?UTF-8?q?fix(user):=20=E4=BF=AE=E5=A4=8D=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E5=88=86=E9=85=8D=E5=AD=97=E6=AE=B5=E4=B8=BB=E9=A2=98=E8=89=B2?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除角色选择器边框和阴影的硬编码紫色 #6366f1
- 使用 var(--primary-color) 和 var(--primary-color-suppl) 跟随系统主题色
- 优化角色标签样式使用 var(--primary-color) 替代硬编码渐变色
- 简化 renderRoleTag 函数，移除硬编码样式，使用 NTag 原生主题色
- 应用紧凑表单设计规范：800px弹框宽度、90px标签宽度、10px列间距
- 修复图标引用格式，确保图标正确显示
- 确保角色分配字段在主题切换时能正确适配颜色
---
 src/views/system/user/index.vue | 134 ++++++++++++++++----------------
 1 file changed, 69 insertions(+), 65 deletions(-)

diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index f7f862a..6ccac72 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -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>