From 48db4a045c2333c203b136c95102663ab4adbcf5 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Thu, 25 Dec 2025 09:26:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E5=92=8C=E5=90=8D=E7=A7=B0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=88=B0=E9=A1=B6=E9=83=A8=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portal/src/assets/layout/_topbar.scss     | 21 +++++++++++++++++++
 frontend/portal/src/layout/AppTopbar.vue      |  5 ++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/portal/src/assets/layout/_topbar.scss b/frontend/portal/src/assets/layout/_topbar.scss
index b8e34b3..3edb402 100644
--- a/frontend/portal/src/assets/layout/_topbar.scss
+++ b/frontend/portal/src/assets/layout/_topbar.scss
@@ -69,6 +69,27 @@
             background-color: var(--primary-color);
             color: var(--primary-contrast-color);
         }
+
+        &.layout-topbar-user {
+            width: auto;
+            height: auto;
+            border-radius: var(--content-border-radius);
+            padding: 0.25rem 0.75rem;
+            justify-content: flex-start;
+            gap: 0.5rem;
+
+            span {
+                display: inline;
+                max-width: 12rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .p-avatar {
+                flex: 0 0 auto;
+            }
+        }
     }
 
     .layout-menu-button {
diff --git a/frontend/portal/src/layout/AppTopbar.vue b/frontend/portal/src/layout/AppTopbar.vue
index e230566..594b5f0 100644
--- a/frontend/portal/src/layout/AppTopbar.vue
+++ b/frontend/portal/src/layout/AppTopbar.vue
@@ -94,9 +94,8 @@ onMounted(() => {
             <div class="layout-topbar-menu hidden lg:block">
                 <div class="layout-topbar-menu-content">
                     <template v-if="isLoggedIn">
-                        <button type="button" class="layout-topbar-action flex items-center gap-2"
-                            @click="toggleUserMenu">
-                            <Avatar shape="circle" size="large" class="bg-surface-200 dark:bg-surface-700" />
+                        <button type="button" class="layout-topbar-action layout-topbar-user" @click="toggleUserMenu">
+                            <Avatar shape="circle" class="bg-surface-200 dark:bg-surface-700" />
                             <span>{{ displayName }}</span>
                             <i class="pi pi-angle-down"></i>
                         </button>