74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<a-layout style="min-height: 100vh">
|
|
<a-layout-header class="header">
|
|
<div class="brand">
|
|
<span class="leaf">🍃</span>
|
|
室内装修工程污染物预测系统
|
|
</div>
|
|
<a-menu
|
|
mode="horizontal"
|
|
:selectedKeys="[current]"
|
|
class="nav"
|
|
@click="onNav"
|
|
>
|
|
<a-menu-item key="home">首页</a-menu-item>
|
|
<a-menu-item key="template">模板库</a-menu-item>
|
|
<a-menu-item key="material">材料库</a-menu-item>
|
|
<a-menu-item key="history">历史记录</a-menu-item>
|
|
</a-menu>
|
|
<a-dropdown>
|
|
<span class="org">{{ auth.org?.name || '一品健康空间' }}</span>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item key="logout" @click="logout">退出登录</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</a-layout-header>
|
|
<a-layout-content class="content">
|
|
<router-view />
|
|
</a-layout-content>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useAuthStore } from '../stores/auth';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const auth = useAuthStore();
|
|
|
|
const current = computed(() => (route.name as string) || 'home');
|
|
|
|
function onNav({ key }: { key: string }) {
|
|
router.push({ name: key });
|
|
}
|
|
|
|
function logout() {
|
|
auth.logout();
|
|
router.replace('/login');
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
padding: 0 24px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
|
|
}
|
|
.brand {
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
margin-right: 32px;
|
|
white-space: nowrap;
|
|
}
|
|
.leaf { color: #b4232a; }
|
|
.nav { flex: 1; border-bottom: none; }
|
|
.org { cursor: pointer; color: #555; }
|
|
.content { padding: 16px; }
|
|
</style>
|