148 lines
3.7 KiB
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>
|