mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 19:41:59 +08:00
feat(project): 增加tab右键菜单
This commit is contained in:
Coffee-crocodile
parent
7055c1e631
commit
d0d6a59491
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 Soybean
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -157,7 +157,7 @@ const userRoutes = [
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'echarts',
|
||||
name: 'plugin_echarts',
|
||||
path: '/plugin/charts/echarts',
|
||||
meta: {
|
||||
title: 'ECharts',
|
||||
@ -166,7 +166,7 @@ const userRoutes = [
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'antV',
|
||||
name: 'plugin_antV',
|
||||
path: '/plugin/charts/antV',
|
||||
meta: {
|
||||
title: 'antV',
|
||||
@ -195,7 +195,7 @@ const userRoutes = [
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'md',
|
||||
name: 'plugin_md',
|
||||
path: '/plugin/editor/md',
|
||||
meta: {
|
||||
title: 'MarkDown',
|
||||
@ -204,7 +204,7 @@ const userRoutes = [
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'rich',
|
||||
name: 'plugin_rich',
|
||||
path: '/plugin/editor/rich',
|
||||
meta: {
|
||||
title: '富文本',
|
||||
@ -250,7 +250,7 @@ const userRoutes = [
|
||||
meta: {
|
||||
title: '外链文档',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:error-computer',
|
||||
icon: 'icon-park-outline:file-doc',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
@ -259,7 +259,7 @@ const userRoutes = [
|
||||
meta: {
|
||||
title: 'vue',
|
||||
requiresAuth: true,
|
||||
icon: 'icon-park-outline:error',
|
||||
icon: 'logos:vue',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -268,18 +268,9 @@ const userRoutes = [
|
||||
meta: {
|
||||
title: 'vite',
|
||||
requiresAuth: true,
|
||||
icon: 'carbon:error',
|
||||
icon: 'logos:vitejs',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: 'service-error',
|
||||
// path: '/docments/service-error',
|
||||
// meta: {
|
||||
// title: '500页',
|
||||
// requiresAuth: true,
|
||||
// icon: 'carbon:data-error',
|
||||
// },
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -332,7 +323,7 @@ const userRoutes = [
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'not-found',
|
||||
name: 'setting_account',
|
||||
path: '/setting/account',
|
||||
meta: {
|
||||
title: '用户设置',
|
||||
@ -341,7 +332,7 @@ const userRoutes = [
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'dictionary',
|
||||
name: 'setting_dictionary',
|
||||
path: '/setting/dictionary',
|
||||
meta: {
|
||||
title: '字典设置',
|
||||
@ -350,7 +341,7 @@ const userRoutes = [
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'menu',
|
||||
name: 'setting_menu',
|
||||
path: '/setting/menu',
|
||||
meta: {
|
||||
title: '菜单设置',
|
||||
@ -359,7 +350,7 @@ const userRoutes = [
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'system',
|
||||
name: 'setting_system',
|
||||
path: '/setting/system',
|
||||
meta: {
|
||||
title: '系统配置',
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<Logo v-if="appStore.showLogo" />
|
||||
<Menu />
|
||||
</n-layout-sider>
|
||||
<n-layout class="h-full" :native-scrollbar="false" embedded>
|
||||
<n-layout class="h-full" embedded :native-scrollbar="false">
|
||||
<n-layout-header
|
||||
:position="appStore.fixedHeader ? 'absolute' : 'static'"
|
||||
:inverted="appStore.invertedHeader"
|
||||
@ -43,9 +43,9 @@
|
||||
>
|
||||
<TabBar class="h-45px" />
|
||||
</n-layout-header>
|
||||
<n-layout-content class="bg-transparent h-full">
|
||||
<n-layout-content class="bg-transparent">
|
||||
<div
|
||||
class="p-16px h-full"
|
||||
class="p-16px"
|
||||
:class="{
|
||||
'p-b-56px': appStore.fixedFooter,
|
||||
'p-t-122px': appStore.fixedHeader && appStore.showTabs,
|
||||
|
||||
@ -10,27 +10,119 @@
|
||||
closable
|
||||
:name="item.name as string"
|
||||
@click="handleTab(item)"
|
||||
@contextmenu="handleContextMenu($event, item)"
|
||||
>
|
||||
{{ item.meta.title }}
|
||||
</n-tab>
|
||||
</n-tabs>
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
:x="x"
|
||||
:y="y"
|
||||
:options="options"
|
||||
:show="showDropdown"
|
||||
:on-clickoutside="onClickoutside"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTabStore } from '@/store';
|
||||
import { useTabStore, useAppStore } from '@/store';
|
||||
import { useAppRouter } from '~/src/hook';
|
||||
import { RouteLocationNormalized } from 'vue-router';
|
||||
import { ref, nextTick } from 'vue';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
const tabStore = useTabStore();
|
||||
const appStore = useAppStore();
|
||||
|
||||
const { routerPush, toRoot } = useAppRouter();
|
||||
|
||||
const handleTab = (route: RouteLocationNormalized) => {
|
||||
function handleTab(route: RouteLocationNormalized) {
|
||||
routerPush(route.path);
|
||||
};
|
||||
const handleClose = (name: string) => {
|
||||
}
|
||||
function handleClose(name: string) {
|
||||
tabStore.closeTab(name);
|
||||
}
|
||||
const options = [
|
||||
{
|
||||
label: '刷新',
|
||||
key: 'reload',
|
||||
icon: renderIcon('icon-park-outline:redo'),
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
key: 'closeCurrent',
|
||||
icon: renderIcon('icon-park-outline:close'),
|
||||
},
|
||||
{
|
||||
label: '关闭其他',
|
||||
key: 'closeOther',
|
||||
icon: renderIcon('icon-park-outline:delete-four'),
|
||||
},
|
||||
{
|
||||
label: '关闭左侧',
|
||||
key: 'closeLeft',
|
||||
icon: renderIcon('icon-park-outline:to-left'),
|
||||
},
|
||||
{
|
||||
label: '关闭右侧',
|
||||
key: 'closeRight',
|
||||
icon: renderIcon('icon-park-outline:to-right'),
|
||||
},
|
||||
{
|
||||
label: '全部关闭',
|
||||
key: 'closeAll',
|
||||
icon: renderIcon('icon-park-outline:fullwidth'),
|
||||
},
|
||||
];
|
||||
const showDropdown = ref(false);
|
||||
const x = ref(0);
|
||||
const y = ref(0);
|
||||
const currentRoute = ref();
|
||||
|
||||
function handleSelect(key: string) {
|
||||
showDropdown.value = false;
|
||||
type HandleFn = {
|
||||
[key: string]: any;
|
||||
};
|
||||
const handleFn: HandleFn = {
|
||||
reload() {
|
||||
appStore.reloadPage();
|
||||
},
|
||||
closeCurrent() {
|
||||
tabStore.closeTab(currentRoute.value.name);
|
||||
},
|
||||
closeOther() {
|
||||
tabStore.closeOtherTabs(currentRoute.value.name);
|
||||
},
|
||||
closeLeft() {
|
||||
tabStore.closeLeftTabs(currentRoute.value.name);
|
||||
},
|
||||
closeRight() {
|
||||
tabStore.closeRightTabs(currentRoute.value.name);
|
||||
},
|
||||
closeAll() {
|
||||
tabStore.closeAllTabs();
|
||||
},
|
||||
};
|
||||
handleFn[key]();
|
||||
}
|
||||
function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
|
||||
e.preventDefault();
|
||||
currentRoute.value = route;
|
||||
showDropdown.value = false;
|
||||
nextTick().then(() => {
|
||||
showDropdown.value = true;
|
||||
x.value = e.clientX;
|
||||
y.value = e.clientY;
|
||||
});
|
||||
}
|
||||
function onClickoutside() {
|
||||
showDropdown.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -76,6 +76,25 @@ export const useTabStore = defineStore('tab-store', {
|
||||
toRoot();
|
||||
}
|
||||
},
|
||||
|
||||
closeOtherTabs(name: string) {
|
||||
const index = this.getTabIndex(name);
|
||||
this.tabs = this.tabs.filter((item, i) => i === index);
|
||||
},
|
||||
closeLeftTabs(name: string) {
|
||||
const index = this.getTabIndex(name);
|
||||
this.tabs = this.tabs.filter((item, i) => i >= index);
|
||||
},
|
||||
closeRightTabs(name: string) {
|
||||
const index = this.getTabIndex(name);
|
||||
this.tabs = this.tabs.filter((item, i) => i <= index);
|
||||
},
|
||||
closeAllTabs() {
|
||||
const { toRoot } = useAppRouter(false);
|
||||
this.tabs.length = 0;
|
||||
toRoot();
|
||||
},
|
||||
|
||||
hasExistTab(name: string) {
|
||||
return this.tabs.some((item) => {
|
||||
return item.name === name;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="h-90vh">
|
||||
<div class="h-full">
|
||||
<iframe src="https://staging-cn.vuejs.org/" frameborder="0" class="wh-full"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user