admin-web/src/layouts/AppLayout.vue

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { LogOut, Menu } from '@lucide/vue'
import { getApiErrorDetails } from '@/api/http'
import baiyueLogoWhite from '@/assets/brand/baiyue-logo-white.png'
import baiyueMarkWhite from '@/assets/brand/baiyue-mark-white.png'
import AdminSidebarMenu from '@/components/AdminSidebarMenu.vue'
import { useAccessPreviewStore } from '@/stores/accessPreview'
import { useAuthStore } from '@/stores/auth'
import { useUnsavedWorkStore } from '@/stores/unsavedWork'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const access = useAccessPreviewStore()
const unsaved = useUnsavedWorkStore()
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()

async function handleLogout() {
  try {
    await ElMessageBox.confirm('确定退出管理后台吗？', '退出登录', {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
    })
  } catch {
    return
  }

  access.reset()
  unsaved.clear()
  try {
    await auth.logout()
  } catch (error) {
    const details = getApiErrorDetails(error, '服务器会话撤销失败')
    const trackingId = details.requestId || details.traceId
    ElMessage.warning(`本地已退出，但服务器会话撤销失败${trackingId ? `（追踪标识：${trackingId}）` : ''}`)
  }
  try {
    await router.replace('/login')
  } catch {
    ElMessage.error('已退出登录，但登录页跳转失败，请刷新页面')
  }
}

function handleMenuToggle() {
  if (window.matchMedia('(max-width: 720px)').matches) {
    mobileMenuOpen.value = !mobileMenuOpen.value
    return
  }
  collapsed.value = !collapsed.value
}

watch(() => route.fullPath, () => { mobileMenuOpen.value = false })
</script>

<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">
      <div class="brand-block">
        <img class="brand-logo brand-logo-full" :src="baiyueLogoWhite" alt="柏悦物流" />
        <img class="brand-logo brand-logo-mark" :src="baiyueMarkWhite" alt="柏悦物流" />
      </div>
      <nav class="side-nav" aria-label="主导航">
        <AdminSidebarMenu :items="access.filteredNavigation" :active-path="route.path" :collapsed="menuCollapsed" />
      </nav>
    </aside>

    <div class="app-main">
      <header class="app-header" :class="{ 'app-header--without-page-heading': !showPageHeading }">
        <button
          class="shell-menu-button"
          type="button"
          :aria-label="mobileMenuOpen ? '关闭菜单' : collapsed ? '展开导航' : '收起导航'"
          :aria-expanded="mobileMenuOpen || !collapsed"
          @click="handleMenuToggle"
        ><Menu :size="22" /></button>
        <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>
          <el-button text aria-label="退出登录" @click="handleLogout"><LogOut :size="18" /></el-button>
        </div>
      </header>
      <main class="page-container"><RouterView /></main>
    </div>
  </div>
</template>

<style scoped>
.app-header--without-page-heading .header-user { margin-left: auto; }
</style>