You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
876 B
34 lines
876 B
4 years ago
|
<template>
|
||
|
|
<div class="flex justify-between items-center">
|
||
|
|
<h1 class="">实验平台</h1>
|
||
|
|
<div>
|
||
|
|
<menu-unfold-outlined v-if="collapsed" @click="toggleCollapse" />
|
||
|
|
<menu-fold-outlined v-else class="trigger" @click="toggleCollapse" />
|
||
|
|
用户信息
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useStore } from 'vuex';
|
||
|
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||
|
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
|
||
|
|
|
||
|
|
const store = useStore();
|
||
|
|
const collapsed = computed(() => store.state.layout.display.left); // 是否显示左栏
|
||
|
|
|
||
|
|
// toggle left window display
|
||
|
|
function toggleCollapse() {
|
||
|
|
store.commit('layout/setDisplay', { prop: 'left', show: !collapsed.value });
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
h1 {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|