From 97090eb08b7e09117d51ea752e71256169bdc4ae Mon Sep 17 00:00:00 2001
From: chenxing <chenxing@bestsch.com>
Date: Thu, 8 Oct 2026 15:46:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(header):=20=E8=BA=AB=E4=BB=BD=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=9B=9E=E6=BB=9A=E4=B8=BA=E5=8E=9F=E7=81=B0=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=8F=AA=E5=9C=A8=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=BA=95=E9=83=A8=E8=BF=BD=E5=8A=A0=E4=B8=89=E9=A1=B9?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈整合后的身份选择观感不符预期，要求保留原「切换身份」样式，
仅在列表下方追加个人信息 / 后台管理 / 退出登录。

回滚内容（对齐原 .roleinfo-wrap .roles-ul li）：
- 灰底 #f9f9f9 + 圆角 6px + 左右 8px 外边距 + 列表内 6px 上下留白
- 行高62px（原为 padding 9px 16px 的紧凑行）
- hover 用 color.adjust(#f9f9f9, lightness -5%)，恢复 @use "sass:color"
- 勾选圆点回到 20px + margin 0 16px
- .who 恢复 border-bottom 1px #e9e9e9，末行不画（同原:last-child .user-wrap）

保留不变：卡片骨架、标题行、滚动条（max-height 310px + 6px 自绘）、
底部菜单与权限判定。实测 scrollHeight 570 > clientHeight 310 仍正确出滚动条。

验证：vite build 通过；mock 取证 9 条身份溢出滚动正常、1 条不滚动、
菜单行数管理员 2 / 普通用户 1。
---
 src/assets/styles/header.scss | 47 ++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/assets/styles/header.scss b/src/assets/styles/header.scss
index 45d16ac..b93310f 100644
--- a/src/assets/styles/header.scss
+++ b/src/assets/styles/header.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 .default-header {
     width: 100%;
     height: var(--headerH);
@@ -264,11 +265,12 @@
         }
     }
 
-    /* 身份列表：有最大高度，超出显示滚动条 */
+    /* 身份列表：沿用原.roleinfo-wrap 的灰卡片形态（2026-10-08 回滚，用户要求保持原角色选择样式） */
     .user-card-roles {
         max-height: 310px;
         overflow-y: scroll;
         overscroll-behavior: contain;
+        padding: 6px 0;
 
         &::-webkit-scrollbar {
             width: 6px;
@@ -286,32 +288,42 @@
     }
 
     .u-role {
+        background-color: #f9f9f9;
         display: flex;
         align-items: center;
-        padding: 9px 16px;
+        min-height: 62px;
+        margin: 0 8px;
+        border-radius: 6px;
         cursor: pointer;
         user-select: none;
-        transition: background 0.15s;
+
+        &:hover {
+            background-color: color.adjust($color: #f9f9f9, $lightness: -5%);
+        }
+        &.active {
+            cursor: default;
+            background-color: #f9f9f9;
+        }
 
         > svg {
-            width: 16px;
-            height: 16px;
-            margin-right: 16px;
-            flex: 0 0 16px;
+            width: 20px;
+            height: 20px;
+            margin: 0 16px;
+            flex: 0 0 20px;
         }
 
         .who {
-            flex: 1;
+            flex: auto;
             min-width: 0;
-            padding: 8px 0;
+            padding: 9px 16px 9px 0;
             border-bottom: 1px solid #e9e9e9;
 
             .nm {
-                display: flex;
-                align-items: center;
                 font-size: 15px;
                 color: #323233;
                 line-height: 20px;
+                display: flex;
+                align-items: center;
 
                 .t {
                     overflow: hidden;
@@ -324,27 +336,16 @@
                 margin-top: 2px;
                 font-size: 12px;
                 color: #656667;
-                line-height: 17px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
         }
 
+        /* 末行不画分隔线（原 .roles-ul li:last-child .user-wrap 同款） */
         &:last-child .who {
             border-bottom: none;
         }
-        &:hover {
-            background: #f9f9f9;
-        }
-        &.active {
-            cursor: default;
-            background: #f9f9f9;
-
-            .nm {
-                font-weight: 500;
-            }
-        }
     }
 
     .user-card-menu {