admin-web/src/app/layouts/AppLayout.vue

<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Bell, FileText, LogOut, Mail, Menu, ShieldCheck } 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 mobileViewportQuery = '(max-width: 720px)'
const collapsed = ref(false)
const mobileMenuOpen = ref(false)
const isMobileViewport = ref(false)
let mobileViewportMedia: MediaQueryList | undefined
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)
const menuButtonLabel = computed(() => {
  if (isMobileViewport.value) return mobileMenuOpen.value ? '关闭菜单' : '打开菜单'
  return collapsed.value ? '展开导航' : '收起导航'
})
const menuExpanded = computed(() => (
  isMobileViewport.value ? mobileMenuOpen.value : !collapsed.value
))
const canOpenNotificationManagement = computed(() => (
  access.can('platform:notification:view')
  || access.can('platform:notification:task:list')
  || access.can('platform:notification:template:list')
))

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', customClass: 'admin-density-confirm' },
    ).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: '退出',
      customClass: 'admin-density-confirm',
      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 (isMobileViewport.value) {
    mobileMenuOpen.value = !mobileMenuOpen.value
    return
  }
  collapsed.value = !collapsed.value
}

function syncMobileViewport(event: MediaQueryList | MediaQueryListEvent) {
  isMobileViewport.value = event.matches
  if (!event.matches) mobileMenuOpen.value = false
}

function openNotificationPage(path: string) { void router.push(path) }

onMounted(() => {
  mobileViewportMedia = window.matchMedia(mobileViewportQuery)
  syncMobileViewport(mobileViewportMedia)
  mobileViewportMedia.addEventListener('change', syncMobileViewport)
})
onBeforeUnmount(() => mobileViewportMedia?.removeEventListener('change', syncMobileViewport))

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="menuButtonLabel"
          :aria-expanded="menuExpanded"
          @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">
          <button
            v-if="access.localFullAccessAvailable"
            class="local-full-access-toggle"
            type="button"
            role="switch"
            :aria-checked="access.localFullAccessEnabled"
            :title="access.localFullAccessEnabled ? '关闭后恢复服务端权限' : '开启后显示全部前端页面和按钮'"
            @click="access.toggleLocalFullAccess"
          >
            <ShieldCheck :size="17" />
            <span>本地全权限</span>
            <strong>{{ access.localFullAccessEnabled ? '已开启' : '已关闭' }}</strong>
          </button>
          <el-dropdown v-if="canOpenNotificationManagement" trigger="click" placement="bottom-end">
            <button class="notification-trigger" type="button" aria-label="消息中心">
              <Bell :size="18" /><span>消息中心</span>
            </button>
            <template #dropdown><el-dropdown-menu>
              <el-dropdown-item v-if="access.can('platform:notification:view')" @click="openNotificationPage('/notifications')"><Bell :size="15" />我的消息</el-dropdown-item>
              <el-dropdown-item v-if="access.can('platform:notification:task:list')" @click="openNotificationPage('/notifications/messages')"><Mail :size="15" />消息管理</el-dropdown-item>
              <el-dropdown-item v-if="access.can('platform:notification:template:list')" @click="openNotificationPage('/notifications/templates')"><FileText :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)) + ':' + JSON.stringify(renderedRoute.params)"
            />
          </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; }
.local-full-access-toggle { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.local-full-access-toggle:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .22); }
.local-full-access-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
.local-full-access-toggle[aria-checked="true"] { border-color: #86efac; background: rgba(22, 163, 74, .3); }
.local-full-access-toggle strong { color: #dcfce7; font-size: 12px; }
.notification-trigger { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.notification-trigger:hover { border-color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.notification-trigger:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
.notification-trigger > svg { flex: 0 0 auto; }
@media (max-width: 720px) { .local-full-access-toggle > span { display: none; } .notification-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; } .notification-trigger > span { display: none; } }
</style>