优化

src/app/layouts/AppLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -26,9 +27,12 @@ const collapsed = ref(false)
 const mobileMenuOpen = ref(false)
 const isMobileViewport = ref(false)
 let mobileViewportMedia: MediaQueryList | undefined
-const pageTitle = computed(() => route.meta.title || '管理后台')
-const pageDescription = computed(() => route.meta.description || '')
 const showPageHeading = computed(() => route.meta.showPageHeading !== false)
+const userIdentity = computed(() => {
+  const name = auth.user?.name, account = auth.user?.account
+  return name && account && name !== account ? `${name}（${account}）` : name || account || '—'
+})
+const userIdentityLabel = computed(() => `登录身份：${auth.user?.name ?? '-'}（${auth.user?.account ?? '-'}）`)
 const menuCollapsed = computed(() => collapsed.value && !mobileMenuOpen.value)
 const menuButtonLabel = computed(() => {
   if (isMobileViewport.value) return mobileMenuOpen.value ? '关闭菜单' : '打开菜单'
@@ -139,7 +143,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
 <template>
   <div class="app-shell" :class="{ 'is-collapsed': collapsed, 'is-mobile-open': mobileMenuOpen }">
     <button v-if="mobileMenuOpen" class="sidebar-scrim" type="button" aria-label="关闭菜单" @click="mobileMenuOpen = false" />
-    <aside class="app-sidebar">
+    <aside class="app-sidebar admin-workbench">
       <div class="brand-block">
         <img class="brand-logo brand-logo-full" :src="baiyueLogoWhite" alt="柏悦物流" />
         <img class="brand-logo brand-logo-mark" :src="baiyueMarkWhite" alt="柏悦物流" />
@@ -150,7 +154,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
     </aside>
 
     <div class="app-main">
-      <header class="app-header" :class="{ 'app-header--without-page-heading': !showPageHeading }">
+      <header class="app-header admin-workbench" :class="{ 'app-header--without-page-heading': !showPageHeading }">
         <button
           class="shell-menu-button"
           type="button"
@@ -158,13 +162,12 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
           :aria-expanded="menuExpanded"
           @click="handleMenuToggle"
         ><Menu :size="22" /></button>
-        <div v-if="showPageHeading" class="page-heading">
-          <!-- <h1>{{ pageTitle }}</h1><p v-if="pageDescription">{{ pageDescription }}</p> -->
-        </div>
+        <div v-if="showPageHeading" class="page-heading" aria-hidden="true" />
         <div class="header-user">
           <button
             v-if="access.localFullAccessAvailable"
-            class="local-full-access-toggle"
+            class="local-full-access-toggle workbench-tone"
+            :data-tone="access.localFullAccessEnabled ? 'green' : 'blue'"
             type="button"
             role="switch"
             :aria-checked="access.localFullAccessEnabled"
@@ -175,7 +178,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
             <span>本地全权限</span>
             <strong>{{ access.localFullAccessEnabled ? '已开启' : '已关闭' }}</strong>
           </button>
-          <el-dropdown v-if="canOpenNotificationManagement" trigger="click" placement="bottom-end">
+          <el-dropdown v-if="canOpenNotificationManagement" trigger="click" placement="bottom-end" popper-class="admin-workbench shell-header-popper">
             <button class="notification-trigger" type="button" aria-label="消息中心">
               <Bell :size="18" /><span>消息中心</span>
             </button>
@@ -186,7 +189,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
             </el-dropdown-menu></template>
           </el-dropdown>
           <div class="user-avatar">{{ auth.user?.name.slice(0, 1) }}</div>
-          <div class="user-copy" :aria-label="`登录身份：${auth.user?.name ?? '-'}（${auth.user?.account ?? '-'}）`"><strong>登录身份：{{ auth.user?.name }}（{{ auth.user?.account }}）</strong></div>
+          <div class="user-copy" :aria-label="userIdentityLabel" :title="userIdentityLabel"><strong>{{ userIdentity }}</strong></div>
           <el-button text aria-label="退出登录" @click="handleLogout"><LogOut :size="18" /></el-button>
         </div>
       </header>
@@ -209,14 +212,14 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
 
 <style scoped>
 .app-header--without-page-heading .header-user { margin-left: auto; }
-.local-full-access-toggle { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
-.local-full-access-toggle:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .22); }
-.local-full-access-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
-.local-full-access-toggle[aria-checked="true"] { border-color: #86efac; background: rgba(22, 163, 74, .3); }
-.local-full-access-toggle strong { color: #dcfce7; font-size: 12px; }
-.notification-trigger { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
-.notification-trigger:hover { border-color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
-.notification-trigger:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
+.local-full-access-toggle { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--workbench-border); border-radius: 10px; background: var(--workbench-surface); color: var(--workbench-muted); font: inherit; font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
+.local-full-access-toggle:hover { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); }
+.local-full-access-toggle:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
+.local-full-access-toggle[aria-checked="true"] { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-accent); }
+.local-full-access-toggle strong { color: inherit; font-size: 12px; }
+.notification-trigger { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--workbench-border); border-radius: 10px; background: var(--workbench-surface); color: var(--workbench-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
+.notification-trigger:hover { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-primary); }
+.notification-trigger:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
 .notification-trigger > svg { flex: 0 0 auto; }
 @media (max-width: 720px) { .local-full-access-toggle > span { display: none; } .notification-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; } .notification-trigger > span { display: none; } }
 </style>