优化

src/app/components/AdminSidebarMenu.test.ts

@@ -1,7 +1,10 @@
 import { flushPromises, mount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
+import { defineComponent, markRaw } from 'vue'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { createMemoryHistory, createRouter } from 'vue-router'
-import { describe, expect, it } from 'vitest'
+import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
+import { describe, expect, it, vi } from 'vitest'
 import { adminNavigation, filterAdminNavigation, type AdminNavigationNode } from '@/core/navigation/adminNavigation'
 import AdminSidebarMenu from './AdminSidebarMenu.vue'
 
@@ -85,6 +88,72 @@ describe('AdminSidebarMenu', () => {
     expect(wrapper.get('nav').attributes('data-collapsed')).toBe('true')
   })
 
+  it('fits collapsed icons inside the scrolling rail and keeps hover submenus outside it', async () => {
+    const host = document.createElement('div')
+    host.className = 'app-shell is-collapsed'
+    host.innerHTML = '<aside class="app-sidebar"><nav class="side-nav"></nav></aside>'
+    document.body.append(host)
+    const style = document.createElement('style')
+    style.textContent = readFileSync(resolve(process.cwd(), 'src/styles/shell.css'), 'utf8')
+    document.head.append(style)
+    const rail = host.querySelector<HTMLElement>('.side-nav')!
+    const router = routerPlugin()
+    await router.push('/')
+    const icon = markRaw(adminNavigation[0].icon)
+    const items: AdminNavigationNode[] = [
+      { key: 'home', title: '首页', icon, path: '/' },
+      {
+        key: 'resources', title: '资源管理', icon,
+        children: [{ key: 'warehouses', title: '仓库管理', icon, path: '/warehouses' }],
+      },
+    ]
+    const wrapper = mount(AdminSidebarMenu, {
+      attachTo: rail,
+      props: { items, activePath: '/', collapsed: true },
+      global: { plugins: [router], components: { ElMenu, ElMenuItem, ElSubMenu }, stubs: { transition: false } },
+    })
+    try {
+      await flushPromises()
+      const menu = wrapper.get('.side-nav-menu.el-menu--collapse')
+      const group = wrapper.get('.side-nav-menu > .el-sub-menu')
+      const leafTrigger = wrapper.get('.el-menu-tooltip__trigger')
+      expect(getComputedStyle(host.querySelector('.app-sidebar')!).width).toBe('76px')
+      expect(getComputedStyle(rail).overflowX).toBe('hidden')
+      expect(getComputedStyle(rail).overflowY).toBe('auto')
+      expect(getComputedStyle(menu.element).width).toBe('100%')
+      for (const trigger of [leafTrigger, group.get('.el-sub-menu__title')]) {
+        expect(getComputedStyle(trigger.element).paddingLeft).toBe('0px')
+        expect(getComputedStyle(trigger.element).paddingRight).toBe('0px')
+        expect(getComputedStyle(trigger.element).justifyContent).toBe('center')
+        expect(getComputedStyle(trigger.get('.menu-icon').element).marginRight).toBe('0px')
+      }
+
+      await group.trigger('mouseenter')
+      await vi.waitFor(() => expect(group.attributes('aria-expanded')).toBe('true'))
+      const popup = document.body.querySelector('.shell-nav-popper .el-menu--popup')
+      expect(popup).not.toBeNull()
+      expect(popup?.closest('.side-nav')).toBeNull()
+      expect(popup?.textContent).toContain('仓库管理')
+
+      const destination = popup!.querySelector<HTMLElement>('.el-menu-item')!
+      destination.focus()
+      expect(document.activeElement).toBe(destination)
+      expect(destination.getAttribute('role')).toBe('menuitem')
+      destination.click()
+      await flushPromises()
+      expect(router.currentRoute.value.path).toBe('/warehouses')
+
+      await wrapper.setProps({ collapsed: false })
+      host.classList.remove('is-collapsed')
+      expect(getComputedStyle(host.querySelector('.app-sidebar')!).width).toBe('240px')
+      expect(wrapper.find('.el-menu--collapse').exists()).toBe(false)
+    } finally {
+      wrapper.unmount()
+      style.remove()
+      host.remove()
+    }
+  })
+
   it('renders only entries included in the filtered navigation input', () => {
     const items = filterAdminNavigation(adminNavigation, new Set(['platform:permission:list']))
     const wrapper = mount(AdminSidebarMenu, {

src/app/components/AdminSidebarMenuNode.vue

@@ -10,7 +10,7 @@ defineProps<{
 </script>
 
 <template>
-  <el-sub-menu v-if="node.children?.length" :index="node.key">
+  <el-sub-menu v-if="node.children?.length" :index="node.key" popper-class="admin-workbench shell-nav-popper">
     <template #title>
       <component
         v-if="!level"

src/app/components/WorkspaceTabs.test.ts

@@ -44,6 +44,17 @@ describe('WorkspaceTabs', () => {
   })
   afterEach(() => { document.body.innerHTML = '' })
 
+  it('retains its own theme on the teleported management menu', async () => {
+    const { wrapper } = await mountTabs()
+    await wrapper.get('[aria-label="页签管理"]').trigger('click')
+    await flushPromises()
+
+    const popper = document.body.querySelector('.shell-header-popper')
+    expect(popper?.classList.contains('admin-workbench')).toBe(true)
+    expect(popper?.closest('.workspace-tabs')).toBeNull()
+    wrapper.unmount()
+  })
+
   it('keeps a dirty tab open when discard confirmation is cancelled', async () => {
     const { wrapper, workspace, unsaved } = await mountTabs()
     unsaved.upsert({ key: 'customer-form', label: '客户资料', dirty: true, requiredPermission: null, workspaceTabId: 'customers' })

src/app/components/WorkspaceTabs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -125,7 +126,7 @@ watch(
 </script>
 
 <template>
-  <section class="workspace-tabs" aria-label="页面工作区">
+  <section class="workspace-tabs admin-workbench" aria-label="页面工作区">
     <div ref="tabListRef" class="workspace-tab-list" role="tablist" aria-label="已打开页面" @wheel="handleTabWheel">
       <div
         v-for="(tab, index) in workspace.tabs"
@@ -156,7 +157,7 @@ watch(
       </div>
     </div>
 
-    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
+    <el-dropdown trigger="click" placement="bottom-end" popper-class="admin-workbench shell-header-popper" @command="handleCommand">
       <el-button class="workspace-tab-more" text aria-label="页签管理" title="页签管理">
         <MoreHorizontal :size="18" aria-hidden="true" />
       </el-button>
@@ -181,9 +182,8 @@ watch(
   min-width: 0;
   height: 44px;
   align-items: stretch;
-  border-bottom: 1px solid var(--cc-border);
-  background: #f7f9fc;
-  box-shadow: 0 5px 14px rgba(23, 42, 70, .045);
+  border-bottom: 1px solid var(--workbench-border);
+  background: var(--workbench-surface);
 }
 .workspace-tab-list {
   display: flex;
@@ -208,10 +208,10 @@ watch(
   border: 1px solid transparent;
   border-bottom: 0;
   border-radius: 8px 8px 0 0;
-  color: #526178;
+  color: var(--workbench-muted);
 }
-.workspace-tab:hover { background: #eef3fa; color: #24344d; }
-.workspace-tab.is-active { border-color: var(--cc-border); background: #fff; color: #172033; }
+.workspace-tab:hover { background: var(--workbench-surface-soft); color: var(--workbench-text); }
+.workspace-tab.is-active { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-primary); }
 .workspace-tab-activate {
   display: flex;
   min-width: 0;
@@ -239,19 +239,19 @@ watch(
   border: 0;
   border-radius: 6px;
   background: transparent;
-  color: #7b8799;
+  color: var(--workbench-muted);
   cursor: pointer;
 }
-.workspace-tab-close:hover { background: #dde6f2; color: #26364d; }
+.workspace-tab-close:hover { background: var(--workbench-accent-border); color: var(--workbench-primary); }
 .workspace-tab-activate:focus-visible,
-.workspace-tab-close:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
-.workspace-tab-more { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0; border-left: 1px solid var(--cc-border); color: #526178; }
+.workspace-tab-close:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: -2px; }
+.workspace-tab-more { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0; border-left: 1px solid var(--workbench-border); color: var(--workbench-muted); }
 
 @media (max-width: 720px) {
   .workspace-tabs { top: 64px; height: 48px; }
   .workspace-tab-list { align-items: center; padding: 4px 6px; }
   .workspace-tab { min-width: 140px; height: 40px; border-bottom: 1px solid transparent; border-radius: 8px; }
-  .workspace-tab.is-active { border-color: #cbd7e7; }
+  .workspace-tab.is-active { border-color: var(--workbench-accent-border); }
   .workspace-tab-close { width: 34px; height: 34px; flex-basis: 34px; }
   .workspace-tab-more { height: 48px; }
 }

src/app/layouts/AppLayout.test.ts

@@ -114,7 +114,8 @@ describe('AppLayout', () => {
 
   it('shows the authenticated identity and the localhost full-access control', async () => {
     const { wrapper } = await mountLayout()
-    expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
+    expect(wrapper.get('.user-copy').text()).toBe('平台管理员（admin）')
+    expect(wrapper.get('.user-copy').attributes('aria-label')).toBe('登录身份：平台管理员（admin）')
     const accessToggle = wrapper.get('[role="switch"]')
     expect(accessToggle.text()).toContain('本地全权限')
     expect(accessToggle.text()).toContain('已关闭')
@@ -130,10 +131,29 @@ describe('AppLayout', () => {
     expect(notificationTrigger.find('.notification-count').exists()).toBe(false)
   })
 
+  it('avoids repeating identical display names and accounts while retaining the full accessible identity', async () => {
+    const { wrapper } = await mountLayout()
+    const auth = useAuthStore()
+    auth.user = { ...auth.user!, name: 'admin', account: 'admin' }
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.get('.user-copy').text()).toBe('admin')
+    expect(wrapper.get('.user-copy').attributes('aria-label')).toBe('登录身份：admin（admin）')
+    expect(wrapper.get('.user-copy').attributes('title')).toBe('登录身份：admin（admin）')
+  })
+
+  it('limits the shell theme to navigation and header instead of inheriting it into routed pages', async () => {
+    const { wrapper } = await mountLayout('/customers')
+
+    expect(wrapper.get('.app-sidebar').classes()).toContain('admin-workbench')
+    expect(wrapper.get('.app-header').classes()).toContain('admin-workbench')
+    expect(wrapper.get('.cached-count').element.closest('.admin-workbench')).toBeNull()
+  })
+
   it('hides the shell heading when the route opts out', async () => {
     const { wrapper } = await mountLayout('/customers')
     expect(wrapper.find('.page-heading').exists()).toBe(false)
-    expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
+    expect(wrapper.get('.user-copy').attributes('aria-label')).toBe('登录身份：平台管理员（admin）')
   })
 
   it('logs out after confirmation', async () => {

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>

src/app/pages/ForbiddenView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed } from 'vue'
 import { ShieldX } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -16,7 +17,7 @@ async function returnToAccessiblePage() {
 </script>
 
 <template>
-  <section class="forbidden-page" aria-labelledby="forbidden-title">
+  <section class="forbidden-page admin-workbench" aria-labelledby="forbidden-title">
     <div class="forbidden-icon" aria-hidden="true"><ShieldX :size="32" /></div>
     <p class="section-kicker">403 · 权限不足</p>
     <h2 id="forbidden-title">当前登录账号无法访问此页面</h2>