enter.vue
1.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script setup lang="ts">
/**
* 公共布局入口组件
* @module Enter
*/
import { onMounted, reactive, computed } from "vue";
import Header from "./header.vue";
import Menu from "./menu.vue";
import { useAppStore } from "@/pinia/app";
// import * as store from "@/pinia/index";
let asyncData = reactive({
isCollapse: null,
});
onMounted(() => {
asyncData.isCollapse = computed(() => {
// return store.family.appStore().isCollapse
return useAppStore()?.getCollapseStatus;
});
});
</script>
<template>
<!-- TIP 页面头部，含logo、功能按钮（用户信息、退出登录、帮助） -->
<Header />
<!-- TIP 页面头部，含logo、功能按钮（用户信息、退出登录、帮助）结束 -->
<div class="main-container">
<!-- TIP 左侧菜单 -->
<div class="sidebar-container">
<Menu />
</div>
<!-- TIP 左侧菜单结束 -->
<!-- TIP 右侧具体页面内容 -->
<div
class="view-container"
:class="asyncData.isCollapse ? 'thinMenu' : 'fatMenu'"
>
<div>
<router-view v-slot="{ Component, route }">
<transition :name="route.name">
<keep-alive v-if="route?.meta?.keepAlive">
<component :is="Component" />
</keep-alive>
<component :is="Component" v-else />
</transition>
</router-view>
</div>
</div>
<!-- TIP 右侧具体页面内容结束 -->
</div>
</template>