优化构架

2026-08-03 18:49:18 +08:00
parent 1241d11c01
commit 44c33a6280
133 changed files with 651 additions and 603 deletions
@@ -0,0 +1,101 @@
+<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 '@/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 { useAccessPreviewStore } from '@/core/access/accessPreview'
+import { useAuthStore } from '@/core/auth/auth'
+import { useUnsavedWorkStore } from '@/core/unsaved-work/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>