50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { ElMessageBox } from "element-plus";
|
|
import { useAuthStore } from "@/stores/auth";
|
|
import MenuTree from "@/components/MenuTree.vue";
|
|
|
|
const auth = useAuthStore();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const activePath = computed(() => route.path);
|
|
|
|
async function logout() {
|
|
await ElMessageBox.confirm("确定退出当前后台会话吗？", "退出登录", { type: "warning" });
|
|
await auth.logout();
|
|
await router.replace({ name: "login" });
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<el-container class="admin-shell">
|
|
<el-aside width="244px" class="admin-aside">
|
|
<div class="brand">
|
|
<div class="brand-mark">WQ</div>
|
|
<div><strong>WonderQ</strong><span>内容运营后台</span></div>
|
|
</div>
|
|
<el-scrollbar>
|
|
<el-menu :default-active="activePath" router class="sidebar-menu">
|
|
<MenuTree :menus="auth.menus" />
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
<div class="aside-note">Vue3 迁移过渡端</div>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header class="admin-header">
|
|
<div>
|
|
<p class="eyebrow">OPERATIONS / ADMIN</p>
|
|
<h1>{{ route.meta.title || "内容运营" }}</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<el-tag type="success" effect="light">权限已加载</el-tag>
|
|
<span class="user-name">{{ auth.user?.name }}</span>
|
|
<el-button text @click="logout">退出</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-main class="admin-main"><RouterView /></el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|