From 5671737c9e1ef1681c8b6ef9dbb13ce6b51ec260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E8=AF=9A?= <1009578407@qq.com>
Date: Wed, 21 Oct 2026 16:49:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:web=E9=A6=96=E9=A1=B5=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=8C=E7=94=A8=E6=88=B7=E5=85=B3=E8=81=94=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E8=BF=87=E5=A4=9A=E4=BC=9A=E6=92=91=E9=AB=98=E4=B8=8A=E6=96=B9?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/views/layouts/v4/home/user.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/views/layouts/v4/home/user.js b/src/main/resources/views/layouts/v4/home/user.js
index 2190499b..5189ad73 100644
--- a/src/main/resources/views/layouts/v4/home/user.js
+++ b/src/main/resources/views/layouts/v4/home/user.js
@@ -41,7 +41,7 @@ const user = {
 							    <span class="meta-icon"><i class="fa fa-shield" aria-hidden="true"></i></span>
 							    <div>
 								    <span class="meta-label">角色</span>
-                                    <div class="portal-member-roles"><span v-for="(role, index) in roleTags" :key="index" class="portal-member-role">{{ role }}</span><span v-if="!roleTags.length" class="meta-value">—</span></div>
+                                    <div class="portal-member-roles" tabindex="0" role="region" aria-label="角色列表，可滚动查看全部角色"><span v-for="(role, index) in roleTags" :key="index" class="portal-member-role">{{ role }}</span><span v-if="!roleTags.length" class="meta-value">—</span></div>
 							    </div>
 						    </div>
 					    </div>
@@ -318,7 +318,10 @@ const user = {
         #v4-home-app .portal-member .meta-label { margin: 0; color: #8995a5; font-size: 12px; line-height: 20px; }
         #v4-home-app .portal-member .meta-value { color: #283c54; font-size: 12px; font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }
         #v4-home-app .portal-member .meta-row-roles > div { display: block; }
-        #v4-home-app .portal-member-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
+        /* 角色最多占用三行标签的高度，超出时内部滚动，避免撑高首页横幅。 */
+        #v4-home-app .portal-member-roles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; margin-top: 5px; max-height: 88px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #c5d9ee transparent; }
+        #v4-home-app .portal-member-roles::-webkit-scrollbar { width: 4px; }
+        #v4-home-app .portal-member-roles::-webkit-scrollbar-thumb { background: #c5d9ee; border-radius: 4px; }
         #v4-home-app .portal-member-role { max-width: 100%; display: inline-block; padding: 3px 8px; border: 1px solid #e1ebf7; border-radius: 5px; background: #f3f7fc; color: #46617f; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
         #v4-home-app .portal-member .weather-section { margin-top: auto; padding: 8px 10px; border-radius: 8px; background: #f0f7ff; color: #527494; }
         #v4-home-app .portal-member .weather-header { gap: 6px; }