client-web/src/layouts/AppLayout.vue

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { LogOut, Menu, X } from '@lucide/vue'
import baiyueLogoDark from '@/assets/brand/baiyue-logo-dark.png'
import ClientSidebarMenu from '@/components/ClientSidebarMenu.vue'
import { useAuthStore } from '@/modules/auth/public'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const pageTitle = computed(() => route.meta.title || '业务总览')
const pageDescription = computed(() => route.meta.description || '')
const mobileMenuOpen = ref(false)
const desktopViewport = ref(true)
const menuButtonRef = ref<HTMLButtonElement>()
const sidebarRef = ref<HTMLElement>()
const sidebarCloseButtonRef = ref<HTMLButtonElement>()
let previousBodyOverflow: string | undefined
let desktopMediaQuery: MediaQueryList | undefined

function openMobileMenu() {
  mobileMenuOpen.value = true
}

function closeMobileMenu() {
  mobileMenuOpen.value = false
}

function restoreBodyOverflow() {
  if (previousBodyOverflow === undefined) return

  document.body.style.overflow = previousBodyOverflow
  previousBodyOverflow = undefined
}

function handleKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') closeMobileMenu()
}

function handleDesktopBreakpoint(event: MediaQueryList | MediaQueryListEvent) {
  desktopViewport.value = event.matches
  if (event.matches) closeMobileMenu()
}

watch(() => route.fullPath, closeMobileMenu)

watch(mobileMenuOpen, async (open, wasOpen) => {
  if (open) {
    previousBodyOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'

    await nextTick()
    if (mobileMenuOpen.value) sidebarCloseButtonRef.value?.focus()
    return
  }

  restoreBodyOverflow()

  if (wasOpen) {
    await nextTick()
    if (!mobileMenuOpen.value && !desktopViewport.value) menuButtonRef.value?.focus()
  }
})

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
  desktopMediaQuery = window.matchMedia('(min-width: 721px)')
  desktopMediaQuery.addEventListener('change', handleDesktopBreakpoint)
  handleDesktopBreakpoint(desktopMediaQuery)
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeydown)
  desktopMediaQuery?.removeEventListener('change', handleDesktopBreakpoint)
  restoreBodyOverflow()
})

async function handleLogout() {
  try {
    await ElMessageBox.confirm('确定退出客户工作台吗？', '退出登录', {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
    })
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    throw error
  }

  await auth.logout()
  await router.replace('/login')
}
</script>

<template>
  <div class="client-shell" :class="{ 'mobile-menu-open': mobileMenuOpen }">
    <header class="top-header" :inert="mobileMenuOpen" :aria-hidden="mobileMenuOpen ? 'true' : undefined">
      <button
        ref="menuButtonRef"
        type="button"
        class="client-header-menu-button"
        aria-label="打开导航"
        aria-controls="client-sidebar"
        :aria-expanded="mobileMenuOpen"
        @click="openMobileMenu"
      >
        <Menu :size="20" />
      </button>
      <div class="client-header-heading">
        <h1>{{ pageTitle }}</h1>
        <p v-if="pageDescription">{{ pageDescription }}</p>
      </div>
      <div class="client-user">
        <span class="client-avatar">{{ auth.user?.name.slice(0, 1) }}</span>
        <span class="client-user-copy"><strong>{{ auth.user?.name }}</strong><small>{{ auth.user?.roles.join('、') }}</small></span>
      </div>
    </header>

    <button
      v-if="mobileMenuOpen"
      type="button"
      class="client-sidebar-scrim"
      aria-label="关闭导航"
      @click="closeMobileMenu"
    />

    <aside
      ref="sidebarRef"
      id="client-sidebar"
      class="client-sidebar"
      :inert="!desktopViewport && !mobileMenuOpen"
      :aria-hidden="!desktopViewport && !mobileMenuOpen ? 'true' : undefined"
    >
      <div class="client-sidebar-brand">
        <RouterLink class="client-sidebar-brand-link" to="/" aria-label="返回业务总览" @click="closeMobileMenu">
          <img class="client-sidebar-brand-logo" :src="baiyueLogoDark" alt="柏悦物流" />
          <span class="client-sidebar-brand-copy"><small>客户工作台</small></span>
        </RouterLink>
        <button
          ref="sidebarCloseButtonRef"
          type="button"
          aria-label="关闭导航"
          @click="closeMobileMenu"
        >
          <X :size="20" />
        </button>
      </div>
      <nav aria-label="客户工作台导航">
        <ClientSidebarMenu
          :active-path="route.path"
          @navigate="closeMobileMenu"
        />
        <button type="button" class="client-sidebar-logout" @click="handleLogout">
          <LogOut :size="18" aria-hidden="true" />
          <span>退出登录</span>
        </button>
      </nav>
    </aside>

    <main
      class="client-main"
      :inert="mobileMenuOpen"
      :aria-hidden="mobileMenuOpen ? 'true' : undefined"
    >
      <RouterView />
    </main>
  </div>
</template>