admin-vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue
Vben 376fd17a61
feat: Feature/pro docs (#70)
* chore: merge main

* feat: update docs

* feat: remove coze-assistant

* feat: add watermark plugin

* feat: update preferences

* feat: update docs

---------

Co-authored-by: vince <vince292007@gmail.com>
2024-07-28 14:29:05 +08:00

81 lines
1.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 { useCoreTabbarStore } from '@vben/stores';
import {
TabsToolMore,
TabsToolRefresh,
TabsToolScreen,
TabsView,
} from '@vben-core/tabs-ui';
import { useTabbar } from './use-tabbar';
defineOptions({
name: 'LayoutTabbar',
});
defineProps<{ showIcon?: boolean; theme?: string }>();
const route = useRoute();
const coreTabbarStore = useCoreTabbarStore();
const { toggleMaximize } = useContentMaximize();
const { refreshTab, unpinTab } = useTabs();
const {
createContextMenus,
currentActive,
currentTabs,
handleClick,
handleClose,
} = useTabbar();
const menus = computed(() => {
const menus = createContextMenus(route);
return menus.map((item) => {
return {
...item,
label: item.text,
value: item.key,
};
});
});
// 刷新后如果不保持tab状态关闭其他tab
if (!preferences.tabbar.persist) {
coreTabbarStore.closeOtherTabs(route);
}
</script>
<template>
<TabsView
:active="currentActive"
:class="theme"
:context-menus="createContextMenus"
:dragable="preferences.tabbar.dragable"
:show-icon="showIcon"
:style-type="preferences.tabbar.styleType"
:tabs="currentTabs"
@close="handleClose"
@sort-tabs="coreTabbarStore.sortTabs"
@unpin="unpinTab"
@update:active="handleClick"
/>
<div class="flex-center h-full">
<TabsToolRefresh
v-if="preferences.tabbar.showRefresh"
@refresh="refreshTab"
/>
<TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
<TabsToolScreen
v-if="preferences.tabbar.showMaximize"
:screen="preferences.sidebar.hidden"
@change="toggleMaximize"
@update:screen="toggleMaximize"
/>
</div>
</template>