125 lines
3.5 KiB
Plaintext
125 lines
3.5 KiB
Plaintext
<template>
|
|
<div class="header-handle">
|
|
<!-- 菜单折叠 -->
|
|
<!-- <div class="header-handle-item" @click="toggleCollapsed" v-if="getHeaderCollapsed">
|
|
<menu-unfold-outlined v-if="collapsed" />
|
|
<menu-fold-outlined v-else />
|
|
</div> -->
|
|
<!-- 刷新 -->
|
|
<div class="header-handle-item" v-if="getHeaderReload" @click="reloadPage">
|
|
<a-tooltip placement="bottom">
|
|
<template #title>刷新</template>
|
|
<SyncOutlined />
|
|
</a-tooltip>
|
|
</div>
|
|
<!-- 面包屑 -->
|
|
<div class="flex items-center ml-4 header-handle-breadcrumb">
|
|
<a-breadcrumb v-if="getCrumbsShow">
|
|
<template v-for="routeItem in breadcrumbList" :key="routeItem.name">
|
|
<a-breadcrumb-item v-if="routeItem.meta.breadcrumbView != false">
|
|
<a-dropdown v-if="routeItem.children.length">
|
|
<span class="link-text">
|
|
<component
|
|
v-if="getCrumbsShowIcon && routeItem.meta.icon"
|
|
:is="routeItem.meta.icon"
|
|
/>
|
|
{{ routeItem.meta.title }}
|
|
</span>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item
|
|
v-for="item in routeItem.children"
|
|
:key="item.name"
|
|
@click="dropdownSelect(item)"
|
|
>
|
|
<span>{{ item.meta.title }}</span>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
<span class="link-text" v-else>
|
|
<component
|
|
v-if="getCrumbsShowIcon && routeItem.meta.icon"
|
|
:is="routeItem.meta.icon"
|
|
/>
|
|
{{ routeItem.meta.title }}
|
|
</span>
|
|
</a-breadcrumb-item>
|
|
</template>
|
|
</a-breadcrumb>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
|
|
import { useGo, useRedo } from '@/hooks/web/usePage';
|
|
import { SyncOutlined } from '@ant-design/icons-vue';
|
|
|
|
// const emit = defineEmits(['update:collapsed']);
|
|
|
|
// const collapsed = inject('collapsed');
|
|
|
|
const { getCrumbsShow, getCrumbsShowIcon, getHeaderReload } = useProjectSetting();
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const go = useGo();
|
|
|
|
const breadcrumbList = computed(() => {
|
|
return generator(route.matched);
|
|
});
|
|
|
|
function generator(routerMap) {
|
|
return routerMap.map((item) => {
|
|
const currentMenu = {
|
|
...item,
|
|
label: item.meta.title,
|
|
key: item.name,
|
|
disabled: item.path === '/',
|
|
};
|
|
// 是否有子菜单，并递归处理
|
|
if (item.children && item.children.length > 0) {
|
|
// Recursion
|
|
currentMenu.children = generator(item.children);
|
|
}
|
|
return currentMenu;
|
|
});
|
|
}
|
|
|
|
// 刷新页面
|
|
async function reloadPage() {
|
|
const redo = useRedo(router);
|
|
await redo();
|
|
}
|
|
|
|
function dropdownSelect(item) {
|
|
go(item, false);
|
|
}
|
|
|
|
// function toggleCollapsed() {
|
|
// emit('update:collapsed');
|
|
// }
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.header-handle {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
|
|
&-item {
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
transition: all 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: hsla(0, 0%, 100%, 0.08);
|
|
//background: #f9f9f9;
|
|
}
|
|
}
|
|
}
|
|
</style>
|