admin-web/src/app/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 { Bell, FileText, LogOut, Mail, Menu } from '@lucide/vue'
import { getApiErrorDetails } from '@/shared/api/http'
import baiyueLogoWhite from '@/assets/brand/baiyue-logo-white.png'
import baiyueMarkWhite from '@/assets/brand/baiyue-mark-white.png'
import AdminSidebarMenu from '@/app/components/AdminSidebarMenu.vue'
import WorkspaceTabs from '@/app/components/WorkspaceTabs.vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { useAuthStore } from '@/core/auth/auth'
import { useUnsavedWorkStore } from '@/core/unsaved-work/unsavedWork'
import { canAccessWorkspaceRoute, workspaceRouteId, workspaceTabCandidate } from '@/core/workspace-tabs/routeWorkspace'
import { MAX_CACHED_WORKSPACE_VIEWS, useWorkspaceTabsStore } from '@/core/workspace-tabs/workspaceTabs'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const access = useAccessPreviewStore()
const unsaved = useUnsavedWorkStore()
const workspace = useWorkspaceTabsStore()
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()
workspace.initialize(auth.user?.id || auth.user?.account || '')

function syncCurrentRoute() {
  const candidate = workspaceTabCandidate(route)
  if (candidate) workspace.open(candidate, unsaved.dirtyWorkspaceIds)
}

async function pruneInaccessibleTabs() {
  const inaccessible = workspace.tabs.filter((tab) => !canAccessWorkspaceRoute(router.resolve(tab.path), access.permissionCodes))
  const discardedDirtyWork = inaccessible.flatMap((tab) => unsaved.findForWorkspace(tab.id))
  if (discardedDirtyWork.length) {
    await ElMessageBox.alert(
      `账号权限已变化，以下未保存内容无法继续编辑：${[...new Set(discardedDirtyWork.map((entry) => entry.label))].join('、')}。相关页签将关闭。`,
      '权限已变化',
      { confirmButtonText: '知道了', type: 'warning' },
    ).catch(() => undefined)
  }
  const previousActiveId = workspace.activeId
  const result = workspace.prune((tab) => canAccessWorkspaceRoute(router.resolve(tab.path), access.permissionCodes))
  if (result.removedIds.length === 0) return
  unsaved.removeWorkspaces(result.removedIds)
  if (!previousActiveId || !result.removedIds.includes(previousActiveId)) return
  const destination = result.fallback?.path || access.firstAccessiblePath || '/403'
  if (destination !== route.fullPath) await router.replace(destination)
  else syncCurrentRoute()
}

async function handleLogout() {
  try {
    const dirtyLabels = unsaved.entries.filter((entry) => entry.dirty).map((entry) => entry.label)
    const dirtyNotice = dirtyLabels.length ? ` 当前还有未保存内容：${[...new Set(dirtyLabels)].join('、')}，退出后将丢失。` : ''
    await ElMessageBox.confirm(`确定退出管理后台吗？${dirtyNotice}`, '退出登录', {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
    })
  } catch {
    return
  }

  access.reset()
  unsaved.clear()
  workspace.reset(true)
  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
  syncCurrentRoute()
}, { immediate: true })
watch(() => access.permissionSignature, () => { void pruneInaccessibleTabs() }, { immediate: true })
watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId) => {
  if (!userId || userId === previousUserId) return
  workspace.reset(false)
  workspace.initialize(userId)
  void pruneInaccessibleTabs().then(syncCurrentRoute)
})
</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">
          <el-dropdown disabled trigger="click" placement="bottom-end">
            <button class="notification-trigger" type="button" aria-label="消息中心，后端契约待接入" disabled>
              <Bell :size="18" /><span>消息中心</span><span class="notification-count">--</span>
            </button>
            <template #dropdown><el-dropdown-menu>
              <el-dropdown-item disabled><Mail :size="15" />消息管理</el-dropdown-item>
              <el-dropdown-item disabled><FileText :size="15" />模板管理</el-dropdown-item>
              <el-dropdown-item disabled><Bell :size="15" />我的消息</el-dropdown-item>
            </el-dropdown-menu></template>
          </el-dropdown>
          <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>
      <WorkspaceTabs v-if="workspace.tabs.length" />
      <main class="page-container">
        <RouterView v-slot="{ Component, route: renderedRoute }">
          <KeepAlive :max="MAX_CACHED_WORKSPACE_VIEWS">
            <component
              :is="Component"
              v-if="renderedRoute.meta.keepAlive !== false"
              :key="workspace.cacheKey(workspaceRouteId(renderedRoute))"
            />
          </KeepAlive>
          <component :is="Component" v-if="renderedRoute.meta.keepAlive === false" />
        </RouterView>
      </main>
    </div>
  </div>
</template>

<style scoped>
.app-header--without-page-heading .header-user { margin-left: auto; }
.notification-trigger { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: var(--cc-muted); font: inherit; }
.notification-trigger:disabled { cursor: not-allowed; opacity: .72; }
.notification-count { display: inline-flex; min-width: 22px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 9px; background: #e5e7eb; color: #64748b; font-size: 11px; font-weight: 700; }
@media (max-width: 720px) { .notification-trigger > span:not(.notification-count) { display: none; } }
</style>