123 lines
2.2 KiB
Vue
123 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { RefreshCcw,XCircle,ArrowRightLeft,ArrowLeftFromLine,ArrowRightFromLine } from 'lucide-vue-next';
|
|
import {useTabStore} from "~/stores/admin/tab";
|
|
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
currentPath: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
x: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
y: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:show'])
|
|
|
|
const tabStore = useTabStore()
|
|
|
|
const options = computed(() => [
|
|
{
|
|
label: '重新加载',
|
|
key: 'reload',
|
|
disabled: props.currentPath !== tabStore.activeTab,
|
|
icon: () => h(RefreshCcw),
|
|
},
|
|
{
|
|
label: '关闭',
|
|
key: 'close',
|
|
disabled: tabStore.tabs.length <= 1,
|
|
icon: () => h(XCircle),
|
|
},
|
|
{
|
|
label: '关闭其他',
|
|
key: 'close-other',
|
|
disabled: tabStore.tabs.length <= 1,
|
|
icon: () => h(ArrowRightLeft),
|
|
},
|
|
{
|
|
label: '关闭左侧',
|
|
key: 'close-left',
|
|
disabled: tabStore.tabs.length <= 1 || props.currentPath === tabStore.tabs[0].path,
|
|
icon: () => h(ArrowLeftFromLine),
|
|
},
|
|
{
|
|
label: '关闭右侧',
|
|
key: 'close-right',
|
|
disabled:
|
|
tabStore.tabs.length <= 1 ||
|
|
props.currentPath === tabStore.tabs[tabStore.tabs.length - 1].path,
|
|
icon: () => h(ArrowRightFromLine),
|
|
},
|
|
])
|
|
|
|
const route = useRoute()
|
|
const actionMap = new Map([
|
|
[
|
|
'reload',
|
|
() => {
|
|
tabStore.reloadTab(route.fullPath)
|
|
},
|
|
],
|
|
[
|
|
'close',
|
|
() => {
|
|
tabStore.removeTab(props.currentPath)
|
|
},
|
|
],
|
|
[
|
|
'close-other',
|
|
() => {
|
|
tabStore.removeOther(props.currentPath)
|
|
},
|
|
],
|
|
[
|
|
'close-left',
|
|
() => {
|
|
tabStore.removeLeft(props.currentPath)
|
|
},
|
|
],
|
|
[
|
|
'close-right',
|
|
() => {
|
|
tabStore.removeRight(props.currentPath)
|
|
},
|
|
],
|
|
])
|
|
|
|
function handleHideDropdown() {
|
|
emit('update:show', false)
|
|
}
|
|
|
|
function handleSelect(key:any) {
|
|
const actionFn = actionMap.get(key)
|
|
actionFn && actionFn()
|
|
handleHideDropdown()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-dropdown
|
|
:show="show"
|
|
:options="options"
|
|
:x="x"
|
|
:y="y"
|
|
placement="bottom-start"
|
|
@clickoutside="handleHideDropdown"
|
|
@select="handleSelect"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|