129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<template>
|
|
<div v-if="fixedHeaderAndTab && theme.navStyle.mode !== 'horizontal-mix'" class="multi-tab-height w-full"></div>
|
|
<div
|
|
class="multi-tab flex-center justify-between w-full pl-10px"
|
|
:class="[theme.darkMode ? 'bg-[#18181c]' : 'bg-white', { 'multi-tab-top absolute': fixedHeaderAndTab }]"
|
|
:style="{ zIndex }"
|
|
:align="'center'"
|
|
justify="space-between"
|
|
:item-style="{ paddingTop: '0px', paddingBottom: '0px' }"
|
|
>
|
|
<n-space v-if="theme.multiTabStyle.mode === 'button'" :align="'center'" size="small" class="h-full">
|
|
<button-tab
|
|
v-for="item in app.multiTab.routes"
|
|
:key="item.path"
|
|
:active="app.multiTab.activeRoute === item.fullPath"
|
|
:closable="item.name !== ROUTE_HOME.name"
|
|
@click="handleClickTab(item.fullPath)"
|
|
@close="removeMultiTab(item.fullPath)"
|
|
@contextmenu="handleContextMenu($event, item.fullPath)"
|
|
>
|
|
{{ item.meta?.title }}
|
|
</button-tab>
|
|
</n-space>
|
|
<n-space v-if="theme.multiTabStyle.mode === 'browser'" :align="'flex-end'" :size="0" class="h-full px-16px">
|
|
<browser-tab
|
|
v-for="(item, index) in app.multiTab.routes"
|
|
:key="item.path"
|
|
v-model:hover-index="hoverIndex"
|
|
:current-index="index"
|
|
:active-index="app.activeMultiTabIndex"
|
|
:closable="item.name !== ROUTE_HOME.name"
|
|
@click="handleClickTab(item.fullPath)"
|
|
@close="removeMultiTab(item.fullPath)"
|
|
@contextmenu="handleContextMenu($event, item.fullPath)"
|
|
>
|
|
{{ item.meta?.title }}
|
|
</browser-tab>
|
|
</n-space>
|
|
<reload-button />
|
|
<context-menu
|
|
:visible="dropdownVisible"
|
|
:current-path="dropdownConfig.currentPath"
|
|
:x="dropdownConfig.x"
|
|
:y="dropdownConfig.y"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref, reactive, watch, nextTick } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { NSpace } from 'naive-ui';
|
|
import { useThemeStore, useAppStore } from '@/store';
|
|
import { ROUTE_HOME } from '@/router';
|
|
import { ButtonTab, BrowserTab, ReloadButton, ContextMenu } from './components';
|
|
import { useBoolean } from '@/hooks';
|
|
|
|
defineProps({
|
|
zIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
});
|
|
|
|
const route = useRoute();
|
|
const theme = useThemeStore();
|
|
const app = useAppStore();
|
|
const { initMultiTab, addMultiTab, removeMultiTab, setActiveMultiTab, handleClickTab } = useAppStore();
|
|
const { bool: dropdownVisible, setTrue: showDropdown, setFalse: hideDropdown } = useBoolean();
|
|
|
|
const hoverIndex = ref(NaN);
|
|
|
|
const fixedHeaderAndTab = computed(() => theme.fixedHeaderAndTab || theme.navStyle.mode === 'horizontal-mix');
|
|
const multiTabHeight = computed(() => {
|
|
const { height } = theme.multiTabStyle;
|
|
return `${height}px`;
|
|
});
|
|
const headerHeight = computed(() => {
|
|
const { height } = theme.headerStyle;
|
|
return `${height}px`;
|
|
});
|
|
|
|
const dropdownConfig = reactive({
|
|
x: 0,
|
|
y: 0,
|
|
currentPath: ''
|
|
});
|
|
|
|
function setDropdownConfig(x: number, y: number, currentPath: string) {
|
|
Object.assign(dropdownConfig, { x, y, currentPath });
|
|
}
|
|
|
|
function handleContextMenu(e: MouseEvent, fullPath: string) {
|
|
e.preventDefault();
|
|
hideDropdown();
|
|
setDropdownConfig(e.clientX, e.clientY, fullPath);
|
|
nextTick(() => {
|
|
showDropdown();
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
initMultiTab();
|
|
}
|
|
|
|
watch(
|
|
() => route.fullPath,
|
|
newValue => {
|
|
addMultiTab(route);
|
|
setActiveMultiTab(newValue);
|
|
}
|
|
);
|
|
|
|
// 初始化
|
|
init();
|
|
</script>
|
|
<style scoped>
|
|
.multi-tab {
|
|
height: v-bind(multiTabHeight);
|
|
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
|
|
}
|
|
.multi-tab-height {
|
|
height: v-bind(multiTabHeight);
|
|
}
|
|
.multi-tab-top {
|
|
top: v-bind(headerHeight);
|
|
}
|
|
</style>
|