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 WorkspaceTabs from '@/components/WorkspaceTabs.vue'
import { useAuthStore } from '@/modules/auth/public'
import { getFirstAccessiblePath } from '@/navigation/clientNavigation'
import { useUnsavedWorkStore } from '@/navigation/workspace-tabs/unsavedWork'
import {
  MAX_CACHED_WORKSPACE_VIEWS,
  isWorkspaceRoute,
  useWorkspaceTabsStore,
  type WorkspaceTab,
} from '@/navigation/workspace-tabs/workspaceTabs'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const workspace = useWorkspaceTabsStore()
const unsaved = useUnsavedWorkStore()
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
const scrollPositions = new Map<string, number>()

function isAllowedTab(tab: WorkspaceTab) {
  const resolved = router.resolve(tab.fullPath)
  if (String(resolved.name ?? '') !== tab.routeName || !isWorkspaceRoute(resolved)) return false
  const permission = typeof resolved.meta.permission === 'string' ? resolved.meta.permission : undefined
  return auth.hasPermission(permission)
}

function registerCurrentRoute() {
  workspace.openRoute(route, unsaved.dirtyRouteKeys)
}

const restoredActivePath = workspace.initialize(auth.user?.id ?? '', isAllowedTab)
if (route.fullPath === '/' && restoredActivePath && restoredActivePath !== '/') {
  void router.replace(restoredActivePath)
} else {
  registerCurrentRoute()
}

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()
  registerCurrentRoute()
})

watch(
  () => String(route.name ?? ''),
  async (routeName, previousRouteName) => {
    if (previousRouteName && workspace.tabs.some((tab) => tab.key === previousRouteName)) {
      scrollPositions.set(previousRouteName, window.scrollY)
    }

    await nextTick()
    window.requestAnimationFrame(() => {
      window.scrollTo(0, scrollPositions.get(routeName) ?? 0)
    })
  },
)

watch(
  () => workspace.tabs.map((tab) => tab.key),
  (tabKeys) => {
    const retainedKeys = new Set(tabKeys)
    for (const routeKey of scrollPositions.keys()) {
      if (!retainedKeys.has(routeKey)) scrollPositions.delete(routeKey)
    }
  },
)

watch(
  () => auth.permissionCodes.join('|'),
  () => {
    const result = workspace.reconcile(isAllowedTab)
    if (result.closedActive) void router.replace(result.fallbackPath ?? getFirstAccessiblePath(auth.permissionCodes))
  },
)

watch(
  () => auth.isAuthenticated,
  (authenticated) => {
    if (authenticated) return
    workspace.clear()
    unsaved.clear()
  },
)

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)
  window.addEventListener('beforeunload', handleBeforeUnload)
  desktopMediaQuery = window.matchMedia('(min-width: 721px)')
  desktopMediaQuery.addEventListener('change', handleDesktopBreakpoint)
  handleDesktopBreakpoint(desktopMediaQuery)
})

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

function handleBeforeUnload(event: BeforeUnloadEvent) {
  if (!unsaved.hasDirty) return
  event.preventDefault()
  event.returnValue = ''
}

async function handleLogout() {
  try {
    await ElMessageBox.confirm(unsaved.hasDirty
      ? '当前还有未保存的修改，退出后这些内容将丢失。确定继续吗？'
      : '确定退出客户工作台吗？', '退出登录', {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      type: unsaved.hasDirty ? 'warning' : undefined,
    })
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    throw error
  }

  workspace.clear()
  unsaved.clear()
  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>

    <WorkspaceTabs
      :inert="mobileMenuOpen"
      :aria-hidden="mobileMenuOpen ? 'true' : undefined"
    />

    <main
      class="client-main"
      :inert="mobileMenuOpen"
      :aria-hidden="mobileMenuOpen ? 'true' : undefined"
    >
      <RouterView v-slot="{ Component, route: viewRoute }">
        <KeepAlive :max="MAX_CACHED_WORKSPACE_VIEWS">
          <component
            :is="Component"
            v-if="viewRoute.meta.keepAlive !== false"
            :key="workspace.cacheKey(viewRoute.name)"
          />
        </KeepAlive>
        <component
          :is="Component"
          v-if="viewRoute.meta.keepAlive === false"
          :key="String(viewRoute.name ?? viewRoute.fullPath)"
        />
      </RouterView>
    </main>
  </div>
</template>