feat(account): 按原型完善左下角账户菜单与个人信息

clinical-web/src/components/layout/Menu.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import AccountPanel from './AccountPanel.vue'
 import { RouterLink, useRouter } from 'vue-router'
 
 import { useLoginStore } from '@/stores/login'
 
 const loginStore = useLoginStore()
 const router = useRouter()
+const accountPanel = ref<InstanceType<typeof AccountPanel>>()
+const accountMenuOpen = ref(false)
+const loggingOut = ref(false)
+const identity = computed(() => {
+  const labels = [
+    ...(loginStore.user?.roles?.map((role) => role.name) ?? []),
+    loginStore.user?.position,
+    loginStore.user?.professionalTitle,
+  ].filter(Boolean)
+  return [...new Set(labels)].join(' · ') || loginStore.department
+})
+function openAccount(kind: 'profile' | 'password') {
+  accountMenuOpen.value = false
+  void accountPanel.value?.open(kind)
+}
 
 const visibleMenuGroups = computed(() =>
   loginStore.visibleNavigation
@@ -31,11 +47,15 @@ const visibleMenuGroups = computed(() =>
 )
 
 async function handleLogout() {
+  if (loggingOut.value) return
+  loggingOut.value = true
+  accountMenuOpen.value = false
   try {
     await loginStore.logout()
   } catch {
     // 即使服务暂时不可用，也要清理本地会话。
   } finally {
+    loggingOut.value = false
     await router.push('/login')
   }
 }
@@ -83,20 +103,59 @@ async function handleLogout() {
       </div>
     </nav>
 
-    <div class="menu-profile">
-      <div class="menu-profile-avatar">{{ loginStore.userName.slice(0, 1) }}</div>
-      <div class="menu-profile-copy">
-        <strong>{{ loginStore.userName }}</strong>
-        <span>{{ loginStore.department }}</span>
+    <el-popover
+      v-model:visible="accountMenuOpen"
+      trigger="click"
+      placement="top-start"
+      :width="280"
+      :offset="8"
+      popper-class="account-popover"
+    >
+      <template #reference>
+        <button
+          class="menu-profile"
+          type="button"
+          :aria-expanded="accountMenuOpen"
+          aria-label="打开账户菜单"
+          @keydown.esc="accountMenuOpen = false"
+        >
+          <span class="menu-profile-avatar">{{ loginStore.userName.slice(0, 1) }}</span>
+          <span class="menu-profile-copy">
+            <strong>{{ loginStore.userName }}</strong>
+            <span :title="identity">{{ identity }}</span>
+            <span :title="loginStore.user?.id"
+              >ID {{ loginStore.user?.employeeId ?? loginStore.user?.id ?? '—' }}</span
+            >
+          </span>
+          <span class="menu-profile-arrow" aria-hidden="true">⌃</span>
+        </button>
+      </template>
+      <div class="account-actions" @keydown.esc="accountMenuOpen = false">
+        <div class="account-summary">
+          <strong>{{ loginStore.userName }}</strong>
+          <span>ID {{ loginStore.user?.employeeId ?? loginStore.user?.id ?? '—' }}</span>
+          <span>工号 {{ loginStore.user?.employeeNo || '—' }}</span>
+          <span>{{ loginStore.user?.campusName || '—' }} · {{ loginStore.department }}</span>
+        </div>
+        <button type="button" @click="openAccount('profile')">
+          <span aria-hidden="true">👤</span>个人信息
+        </button>
+        <button type="button" @click="openAccount('password')">
+          <span aria-hidden="true">🔑</span>修改密码
+        </button>
+        <button class="account-logout" type="button" :disabled="loggingOut" @click="handleLogout">
+          <span aria-hidden="true">⏻</span>{{ loggingOut ? '退出中…' : '退出登录' }}
+        </button>
       </div>
-      <button class="menu-logout" type="button" @click="handleLogout">退出</button>
-    </div>
+    </el-popover>
+    <AccountPanel ref="accountPanel" />
   </aside>
 </template>
 
 <style scoped>
 .clinical-menu {
   display: flex;
+  min-height: 0;
   flex: 0 0 var(--sidebar-width);
   flex-direction: column;
   width: var(--sidebar-width);
@@ -142,6 +201,7 @@ async function handleLogout() {
 
 .menu-nav {
   flex: 1;
+  min-height: 0;
   padding: 12px 10px;
   overflow-y: auto;
 }
@@ -198,6 +258,10 @@ async function handleLogout() {
 }
 
 .menu-profile {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
   display: flex;
   flex-shrink: 0;
   gap: 10px;
@@ -220,6 +284,7 @@ async function handleLogout() {
 }
 
 .menu-profile-copy {
+  flex: 1;
   min-width: 0;
 }
 
@@ -242,16 +307,52 @@ async function handleLogout() {
   font-size: 11px;
 }
 
-.menu-logout {
-  flex-shrink: 0;
-  margin-left: auto;
-  padding: 0;
-  color: #8fb3c2;
-  font-size: 11px;
-  background: transparent;
+.menu-profile:hover,
+.menu-profile:focus-visible {
+  background: rgb(255 255 255 / 7%);
 }
-
-.menu-logout:hover {
-  color: #fff;
+.menu-profile:focus-visible {
+  outline: 2px solid #18a0c0;
+  outline-offset: -2px;
+}
+.menu-profile-arrow {
+  color: #8fb3c2;
+}
+.account-summary {
+  display: grid;
+  gap: 4px;
+  padding: 8px 12px 12px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--line);
+}
+.account-summary strong {
+  color: var(--ink);
+  font-size: 13px;
+}
+.account-summary span {
+  color: var(--mut);
+  font-size: 11px;
+  overflow-wrap: anywhere;
+}
+.account-actions button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 9px 12px;
+  background: transparent;
+  color: var(--ink);
+  border-radius: 7px;
+  text-align: left;
+  font-size: 13px;
+}
+.account-actions button:hover,
+.account-actions button:focus-visible {
+  background: var(--brand-l);
+}
+.account-actions .account-logout {
+  margin-top: 4px;
+  border-top: 1px solid var(--line);
+  color: #d0534f;
 }
 </style>