将账号角色和注销排列为同一行三段

frontend/src/views/components/HomeAside/HomeAside.css

@@ -108,19 +108,12 @@
 
 .account-identity {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto auto;
   align-items: center;
   gap: 4px 8px;
   padding: 0 4px 12px;
 }
 
-.account-caption {
-  grid-column: 1;
-  color: var(--pm-text-secondary);
-  font-size: 11px;
-  line-height: 1.4;
-}
-
 .account-name {
   overflow: hidden;
   color: var(--pm-text-primary);
@@ -143,9 +136,9 @@
   justify-content: center;
   justify-self: end;
   gap: 6px;
-  min-width: 76px;
+  min-width: 62px;
   height: 32px;
-  padding: 0 6px;
+  padding: 0 4px;
   border: 0;
   border-radius: 6px;
   background: transparent;

frontend/src/views/components/HomeAside/HomeAside.vue

@@ -31,7 +31,10 @@
     </div>
     <div class="sidebar-footer" v-if="isLogin">
       <div class="account-identity" aria-label="当前登录账号" aria-live="polite">
-        <span class="account-caption">当前账号</span>
+        <strong class="account-name" :title="currentAccount">{{ currentAccount }}</strong>
+        <el-tag :type="currentRole.type" size="small" effect="light" class="account-role">
+          {{ currentRole.label }}
+        </el-tag>
         <el-tooltip :content="lang.logout" placement="top">
           <button
             type="button"
@@ -45,10 +48,6 @@
             <span>{{ lang.logout }}</span>
           </button>
         </el-tooltip>
-        <strong class="account-name" :title="currentAccount">{{ currentAccount }}</strong>
-        <el-tag :type="currentRole.type" size="small" effect="light" class="account-role">
-          {{ currentRole.label }}
-        </el-tag>
       </div>
       <button type="button" class="settings-btn" @click="openSettings">
         <el-icon><Setting /></el-icon>