mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-19 07:18:48 +08:00
3d9dba965f
* perf: perf the control logic of Tab * 每个标签页Tab使用唯一的key来控制关闭打开等逻辑 * 统一函数获取tab的key * 通过3种方式设置tab key：1、使用router query参数pageKey 2、使用路由meta参数fullPathKey设置使用fullPath或path作为key * 单个路由可以打开多个标签页 * 如果设置fullPathKey为false，则query变更不会打开新的标签（这很实用） * perf: perf the control logic of Tab * perf: perf the control logic of Tab * 测试用例适配 * perf: perf the control logic of Tab * 解决AI提示的警告
76 lines
1.9 KiB
Vue
76 lines
1.9 KiB
Vue
<script lang="ts" setup>
|
||
import { computed } from 'vue';
|
||
import { useRoute } from 'vue-router';
|
||
|
||
import { useContentMaximize, useTabs } from '@vben/hooks';
|
||
import { preferences } from '@vben/preferences';
|
||
import { useTabbarStore } from '@vben/stores';
|
||
|
||
import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
|
||
|
||
import { useTabbar } from './use-tabbar';
|
||
|
||
defineOptions({
|
||
name: 'LayoutTabbar',
|
||
});
|
||
|
||
defineProps<{ showIcon?: boolean; theme?: string }>();
|
||
|
||
const route = useRoute();
|
||
const tabbarStore = useTabbarStore();
|
||
const { contentIsMaximize, toggleMaximize } = useContentMaximize();
|
||
const { unpinTab } = useTabs();
|
||
|
||
const {
|
||
createContextMenus,
|
||
currentActive,
|
||
currentTabs,
|
||
handleClick,
|
||
handleClose,
|
||
} = useTabbar();
|
||
|
||
const menus = computed(() => {
|
||
const tab = tabbarStore.getTabByKey(currentActive.value);
|
||
const menus = createContextMenus(tab);
|
||
return menus.map((item) => {
|
||
return {
|
||
...item,
|
||
label: item.text,
|
||
value: item.key,
|
||
};
|
||
});
|
||
});
|
||
|
||
// 刷新后如果不保持tab状态，关闭其他tab
|
||
if (!preferences.tabbar.persist) {
|
||
tabbarStore.closeOtherTabs(route);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<TabsView
|
||
:active="currentActive"
|
||
:class="theme"
|
||
:context-menus="createContextMenus"
|
||
:draggable="preferences.tabbar.draggable"
|
||
:show-icon="showIcon"
|
||
:style-type="preferences.tabbar.styleType"
|
||
:tabs="currentTabs"
|
||
:wheelable="preferences.tabbar.wheelable"
|
||
:middle-click-to-close="preferences.tabbar.middleClickToClose"
|
||
@close="handleClose"
|
||
@sort-tabs="tabbarStore.sortTabs"
|
||
@unpin="unpinTab"
|
||
@update:active="handleClick"
|
||
/>
|
||
<div class="flex-center h-full">
|
||
<TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
|
||
<TabsToolScreen
|
||
v-if="preferences.tabbar.showMaximize"
|
||
:screen="contentIsMaximize"
|
||
@change="toggleMaximize"
|
||
@update:screen="toggleMaximize"
|
||
/>
|
||
</div>
|
||
</template>
|