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

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>