feat: 完成后台联调与通用列表组件

src/layouts/AppLayout.test.ts

@@ -11,7 +11,7 @@ vi.mock('element-plus', async (importOriginal) => {
   return { ...actual, ElMessage: { warning: vi.fn(), error: vi.fn() }, ElMessageBox: { confirm: vi.fn() } }
 })
 
-async function mountLayout() {
+async function mountLayout(path = '/') {
   const pinia = createPinia()
   setActivePinia(pinia)
   const auth = useAuthStore()
@@ -20,9 +20,13 @@ async function mountLayout() {
   auth.permissions = ['platform:warehouse:list']
   const router = createRouter({
     history: createMemoryHistory(),
-    routes: [{ path: '/', component: { template: '<p>page</p>' } }, { path: '/login', component: { template: '<p>login</p>' } }],
+    routes: [
+      { path: '/', component: { template: '<p>page</p>' } },
+      { path: '/customers', component: { template: '<p>customers</p>' }, meta: { title: '客户管理', showPageHeading: false } },
+      { path: '/login', component: { template: '<p>login</p>' } },
+    ],
   })
-  await router.push('/')
+  await router.push(path)
   await router.isReady()
   const wrapper = mount(AppLayout, {
     global: { plugins: [pinia, router], stubs: { AdminSidebarMenu: { template: '<nav />' }, 'el-button': { emits: ['click'], template: '<button @click="$emit(\'click\')"><slot /></button>' } } },
@@ -39,6 +43,12 @@ describe('AppLayout', () => {
     expect(wrapper.text()).not.toContain('权限预览')
   })
 
+  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）')
+  })
+
   it('logs out after confirmation', async () => {
     vi.mocked(ElMessageBox.confirm).mockResolvedValueOnce({} as never)
     const { wrapper, router } = await mountLayout()

src/layouts/AppLayout.vue

@@ -20,6 +20,7 @@ const collapsed = ref(false)
 const mobileMenuOpen = ref(false)
 const pageTitle = computed(() => route.meta.title || '管理后台')
 const pageDescription = computed(() => route.meta.description || '')
+const showPageHeading = computed(() => route.meta.showPageHeading !== false)
 const menuCollapsed = computed(() => collapsed.value && !mobileMenuOpen.value)
 
 access.initializeAfterLogin()
@@ -72,9 +73,9 @@ watch(() => route.fullPath, () => { mobileMenuOpen.value = false })
     </aside>
 
     <div class="app-main">
-      <header class="app-header">
+      <header class="app-header" :class="{ 'app-header--without-page-heading': !showPageHeading }">
         <button class="mobile-menu-button" type="button" aria-label="打开菜单" :aria-expanded="mobileMenuOpen" @click="mobileMenuOpen = true"><Menu :size="20" /></button>
-        <div class="page-heading"><h1>{{ pageTitle }}</h1><p v-if="pageDescription">{{ pageDescription }}</p></div>
+        <div v-if="showPageHeading" class="page-heading"><h1>{{ pageTitle }}</h1><p v-if="pageDescription">{{ pageDescription }}</p></div>
         <div class="header-user">
           <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>
@@ -85,3 +86,7 @@ watch(() => route.fullPath, () => { mobileMenuOpen.value = false })
     </div>
   </div>
 </template>
+
+<style scoped>
+.app-header--without-page-heading .header-user { margin-left: auto; }
+</style>