canteen_system/src/components/layout/tabbar/index.vue

148 lines
3.7 KiB
Vue

<template>
<div class="tabbar">
<div class="tabbar-left">
<menu-unfold-outlined
class="trigger"
@click="changeIcon"
v-if="useSetting.collapsed"
/>
<menu-fold-outlined class="trigger" v-else @click="changeIcon" />
<!-- 左侧面包屑 -->
<a-breadcrumb>
<template #separator><span>></span></template>
<a-breadcrumb-item
v-for="(item, index) in breadcrumbList"
:key="item.path"
v-show="item.name"
>
{{ item.name }}</a-breadcrumb-item
>
</a-breadcrumb>
</div>
<div class="tabbar-right">
<a-button style="margin-right: 8px" shape="circle" @click="refreshButton"
><sync-outlined
/></a-button>
<a-button style="margin-right: 8px" shape="circle" @click="fullScreen"
><ExpandOutlined
/></a-button>
<a-button style="margin-right: 8px" shape="circle"
><SettingOutlined
/></a-button>
<a-avatar src="https://www.antdv.com/assets/logo.1ef800a8.svg" />
<a-dropdown v-model:open="visible">
<a class="ant-dropdown-link" @click.prevent>
admin
<DownOutlined />
</a>
<template #overlay>
<a-menu @click="handleMenuClick">
<a-menu-item key="1">退出</a-menu-item>
<a-menu-item key="2">个人中心</a-menu-item>
<a-menu-item key="3">修改密码</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
SyncOutlined,
ExpandOutlined,
SettingOutlined,
DownOutlined,
} from "@ant-design/icons-vue";
import type { MenuProps } from "ant-design-vue";
import { useUserSetting } from "@/stores/modules/setting";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/userStore";
import router from "@/router";
const userStore = useUserStore();
const useSetting = useUserSetting();
const $Route = useRoute();
const $Router = useRouter();
const visible = ref(false);
const handleMenuClick: MenuProps["onClick"] = (e) => {
if (e.key === "1") {
// 退出登录
userStore.deleteToken();
$Router.push({ path: "/login", query: { redirect: $Route.path } });
} else if (e.key === "3") {
visible.value = false;
}
};
const changeIcon = () => {
// 保存在pinia
useSetting.toggleCollapsed();
};
// 全局刷新
const refreshButton = () => {
useSetting.refreshPage();
};
// 全屏;
const fullScreen = () => {
let full = document.fullscreenElement; //获取状态
if (!full) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
};
const breadcrumbList: any = computed(() => {
return $Route.matched.map((item) => ({
path: item.path,
name: item.name,
children: item.children || [],
}));
});
</script>
<style lang="scss" scoped>
.tabbar {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
background-color: #fff;
.tabbar-left {
height: 100%;
display: flex;
align-items: center;
.trigger {
font-size: 18px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
border-left: 1px solid #ccc;
}
.breadcrumbItem {
color: rgba(0, 0, 0, 0.45);
transition: color 0.2s;
padding: 0 4px;
border-radius: 4px;
height: 22px;
display: inline-block;
margin-inline: -4px;
}
}
.tabbar-right {
padding: 0 24px;
cursor: pointer;
display: flex;
align-items: center;
.ant-dropdown-link {
color: rgba(0, 0, 0, 0.45);
margin-left: 8px;
}
}
}
</style>