huangzd1997
c3f160afa5
error-bus 提供框架无关的订阅式错误总线：notify/dismiss/clear、负载归一化、 3 条上限截断、订阅返回取消函数防泄漏；GlobalErrorContainer 订阅并渲染可关闭 错误条，挂在 AdminLayout 内容区顶部。
101 lines
3.7 KiB
Vue
101 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAdminSessionStore } from '@/stores/admin-session'
|
|
import { joinAdminPath } from '@/config/app'
|
|
import { pageTitleOf, topbarUserOf } from '@/layout/topbar-model'
|
|
import { groupKeysForActive, toSidebarEntries } from '@/layout/menu-mapper'
|
|
import {
|
|
EMPTY_MENU_DESCRIPTION,
|
|
EMPTY_MENU_TITLE,
|
|
shouldShowEmptyMenu,
|
|
} from '@/layout/empty-state'
|
|
import GlobalErrorContainer from '@/layout/GlobalErrorContainer.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const session = useAdminSessionStore()
|
|
const collapsed = ref(false)
|
|
|
|
const activePath = computed(() => route.path)
|
|
const menuEntries = computed(() => toSidebarEntries(session.menuTree))
|
|
const openedKeys = computed(() => groupKeysForActive(menuEntries.value, route.path))
|
|
const emptyMenu = computed(() => shouldShowEmptyMenu(menuEntries.value.length > 0, session.loading, session.initialized))
|
|
const pageTitle = computed(() => pageTitleOf(route.meta.title))
|
|
const userVm = computed(() => topbarUserOf(session.user))
|
|
const logoUrl = joinAdminPath('assets', 'logo.jpg')
|
|
|
|
async function signOut() {
|
|
try {
|
|
await session.signOut()
|
|
} catch (error) {
|
|
ElMessage.error(error instanceof Error ? error.message : '退出登录失败')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="admin-shell" :class="{ 'is-collapsed': collapsed }">
|
|
<aside class="admin-sidebar">
|
|
<div class="admin-brand">
|
|
<img :src="logoUrl" alt="数富AI" class="admin-brand-logo" />
|
|
<div v-if="!collapsed" class="admin-brand-copy">
|
|
<strong>数富AI</strong>
|
|
<span>电商运营管理后台</span>
|
|
</div>
|
|
</div>
|
|
|
|
<el-scrollbar class="admin-menu-scroll">
|
|
<el-menu :default-active="activePath" :default-openeds="openedKeys" :collapse="collapsed" router class="admin-menu">
|
|
<template v-for="entry in menuEntries" :key="entry.key">
|
|
<el-sub-menu v-if="entry.kind === 'group'" :index="entry.key">
|
|
<template #title>
|
|
<span class="menu-group-title">{{ entry.name }}</span>
|
|
</template>
|
|
<el-menu-item v-for="item in entry.children" :key="item.key" :index="item.route">
|
|
{{ item.name }}
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
<el-menu-item v-else :key="entry.key" :index="entry.route">
|
|
{{ entry.name }}
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
<el-empty v-if="emptyMenu" :description="EMPTY_MENU_TITLE" :image-size="72" />
|
|
</el-scrollbar>
|
|
|
|
<button class="sidebar-collapse" type="button" @click="collapsed = !collapsed">
|
|
{{ collapsed ? '展开菜单' : '收起菜单' }}
|
|
</button>
|
|
</aside>
|
|
|
|
<section class="admin-main">
|
|
<header class="admin-topbar">
|
|
<div>
|
|
<div class="admin-kicker">运营管理控制台</div>
|
|
<h1>{{ pageTitle }}</h1>
|
|
</div>
|
|
<div class="admin-user">
|
|
<div class="admin-user-meta">
|
|
<strong>{{ userVm.username }}</strong>
|
|
<span v-if="userVm.role">{{ userVm.role }}</span>
|
|
</div>
|
|
<el-button text type="danger" @click="signOut">退出登录</el-button>
|
|
</div>
|
|
</header>
|
|
<main class="admin-content">
|
|
<GlobalErrorContainer />
|
|
<el-alert v-if="session.error" :title="session.error" type="error" show-icon :closable="false" />
|
|
<el-empty
|
|
v-if="emptyMenu && route.path === '/'"
|
|
:title="EMPTY_MENU_TITLE"
|
|
:description="EMPTY_MENU_DESCRIPTION"
|
|
:image-size="96"
|
|
/>
|
|
<RouterView v-else />
|
|
</main>
|
|
</section>
|
|
</div>
|
|
</template>
|