0b2/catchAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:新增 tagview 导航页

Browse Source
This commit is contained in:
JaguarJack 2024-03-23 17:21:39 +08:00
parent c3eb2443b6
commit b81b9b66c8
10 changed files with 236 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/admin/layout/components/Menu/item.vue
View File

@ -1,5 +1,5 @@
<template>
<el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length">
<el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length" :key="menu?.path">
<template #title>
<el-icon>
<Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
@ -9,7 +9,7 @@
<slot />
</el-sub-menu>
<el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()">
<el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()" :key="menu?.name">
<el-icon>
<Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm" />
</el-icon>

17
resources/admin/layout/components/Menu/menus.vue
View File

@ -14,8 +14,25 @@
</template>
<script lang="ts" setup>
import { useAppStore } from '/admin/stores/modules/app'
import { watch } from 'vue'
import router from '/admin/router'
import { useNavTabStore } from '/admin/stores/modules/tabs'
const appStore = useAppStore()
const navTabStore = useNavTabStore()
watch(() => router.currentRoute, (to, from) => {
const tab: any = {
name: to.value.name,
fullPath: to.value.fullPath,
path: to.value.path,
is_active: true,
meta: {
title: to.value.meta.title,
affix: false,
}
}
navTabStore.addTabs(tab)
}, {deep:true, immediate:true})
</script>
<style scoped lang="scss">

71
resources/admin/layout/components/header/contextMenu.vue
View File

@ -1,11 +1,70 @@
<script setup lang="ts">
</script>
<template>
$END$
<div @contextmenu.prevent="handleContextMenu" class="flex gap-x-2">
<slot></slot>
<!-- 右击菜单 -->
<div v-if="showMenu" class="absolute z-[1000] bg-white dark:bg-regal-dark shadow-xl rounded border border-gray-200" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
<ul class="w-20 text-center py-1">
<li v-for="(item, index) in menuItems" :key="index" @click="item.action()" class="hover:bg-gray-50 px-2 py-1 hover:cursor-pointer text-[12px]">
{{ item.label }}
</li>
</ul>
</div>
</div>
</template>
<style scoped>
<script lang="ts" setup>
import { ref, reactive, onUnmounted } from 'vue';
import { useNavTabStore } from '/admin/stores/modules/tabs';
const navTabStore = useNavTabStore();
interface MenuItem {
label: string;
action: Function;
}
const position = reactive({ x: 0, y: 0 });
const showMenu = ref(false);
const menuItems = ref<Array<MenuItem>>([
{ label: '刷新', action: () => {
navTabStore.refreshCurrentTab();
}
},
{ label: '关闭', action: () => {
navTabStore.removeCurrentTab();
}
},
{ label: '关闭其他', action: () => { navTabStore.removeOtherTabs() } },
{ label: '关闭所有', action: () => { navTabStore.removeAllTabs() } },
]);
const handleContextMenu = (event: MouseEvent) => {
event.preventDefault();
position.x = event.clientX;
position.y = event.clientY;
showMenu.value = true;
};
const handleClickOutside = () => {
showMenu.value = false;
};
window.addEventListener('click', handleClickOutside);
onUnmounted(() => {
window.removeEventListener('click', handleClickOutside);
});
const handleMenuItemClick = (action: string) => {
console.log('执行操作：', action);
};
</script>
<style>
.context-menu {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
</style>

7
resources/admin/layout/components/header/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="flex flex-row h-16 w-full drop-shadow border-l dark:border-l-0 border-gray-200" style="background-color: var(--header-bg-color)">
<div class="flex flex-row justify-between w-full h-16">
<div class="flex flex-row h-14 w-full drop-shadow border-l border-gray-200" style="background-color: var(--header-bg-color)">
<div class="flex flex-row justify-between w-full h-14">
<div class="flex flex-row min-w-[17rem]">
<div class="h-full flex items-center w-8 ml-2 hover:cursor-pointer" @click="store.changeExpaned">
<Icon name="list-bullet" class="w-6 h-8" />
@ -24,11 +24,12 @@
</div>
</div>
</div>
<Tabs/>
</template>
<script setup lang="ts">
import { useAppStore } from '/admin/stores/modules/app'
import Notification from './notification.vue'
import MenuSearch from './menuSearch.vue'
import Tabs from './tabs.vue'
const store = useAppStore()
</script>

2
resources/admin/layout/components/header/lang.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
<div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
<div class="flex hover:cursor-pointer pl-1 pr-1">
<el-dropdown size="large" class="flex items-center justify-center hover:cursor-pointer w-full" @command="selectLanguage">
<Icon name="language" />

2
resources/admin/layout/components/header/menuSearch.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
<div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
<div class="flex flex-row w-96">
<Icon name="magnifying-glass" class="hidden sm:block" @click="searchMenuVisiable = true" />

2
resources/admin/layout/components/header/notification.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- 通知 -->
<div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer" ref="messageRef" v-click-outside="onClickOutside">
<div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer" ref="messageRef" v-click-outside="onClickOutside">
<el-badge :value="3">
<Icon name="bell" />
</el-badge>

22
resources/admin/layout/components/header/tabs.vue
View File

@ -1,9 +1,27 @@
<script setup lang="ts">
import { useNavTabStore } from '/admin/stores/modules/tabs'
import ContextMenu from './contextMenu.vue'
import { computed, ref, onMounted,onBeforeUnmount, watch } from 'vue'
const navTabStore = useNavTabStore()
const tabs = computed(() => navTabStore.getNavTabs)
</script>
<template>
$END$
<div class="h-10 bg-white dark:bg-regal-dark px-1 sm:px-3 w-full flex gap-x-2" ref="container" v-if="tabs.length > 0">
<ContextMenu>
<el-tag
class="mt-1.5 hover:cursor-pointer"
v-for="(tag, index) in tabs" :key="index"
:closable="!tag.meta.affix"
:disable-transitions="false"
:effect="tag.is_active ? 'dark' : 'plain'"
@click.prevent="navTabStore.selectTab(tag)"
@close="navTabStore.removeTab(index)"
>
{{ tag.meta.title }}
</el-tag>
</ContextMenu>
</div>
</template>
<style scoped>

2
resources/admin/layout/components/header/theme.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w-10 h-10 grid place-items-center rounded-full mt-3 hover:cursor-pointer">
<div class="w-10 h-10 grid place-items-center rounded-full mt-2 hover:cursor-pointer">
<Icon name="moon" @click="changeTheme()" v-if="isDark" />
<Icon name="sun" @click="changeTheme()" v-else />
</div>

124
resources/admin/stores/modules/tabs/index.ts
View File

@ -0,0 +1,124 @@
import { defineStore } from 'pinia'
import router from '/admin/router'
interface meta {
title: string
affix: boolean
}
interface tab {
name: string
fullPath: string
path: string
is_active:boolean,
meta: meta
}
const defaultTab: tab = {
name: 'Dashboard',
fullPath: '/dashboard',
path: '/dashboard',
is_active: true,
meta: {
title: 'Dashboard',
affix: true,
},
}
export const useNavTabStore = defineStore('nav_tabs', {
state: ()=> {
return {
tabs: [defaultTab] as Array<tab>,
}
},
getters: {
getNavTabs(state): Array<tab> {
return state.tabs
},
},
actions: {
addTabs(Tab: tab): void {
if (this.tabs.length >= 20) {
console.log('最多添加 20 个 tab 标签');
return;
}
let isExist = false
this.tabs.map(t => {
if (t.name === Tab.name) {
isExist = true
t.is_active = true
} else {
t.is_active = false
}
})
if (!isExist) {
this.tabs.push(Tab)
}
},
getActiveTabIndex(): number|null {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].is_active) {
return i
}
}
return null;
},
selectTab(tab: tab): void {
this.tabs.map(t => {
if (t.name === tab.name) {
t.is_active = true
} else {
t.is_active = false
}
})
router.push(tab.fullPath)
},
removeTab(index: number): void {
const goPath = this.tabs[index - 1].fullPath
this.tabs = this.tabs.filter((_, idx) => idx !== index);
router.push(goPath)
},
// 右击菜单操作
// 刷新
refreshCurrentTab() {
const index = this.getActiveTabIndex()
if (index) {
router.replace({ path: this.tabs[index].fullPath });
// router.push({ path: this.tabs[index].fullPath });
}
},
// 关闭当前
removeCurrentTab() {
const index = this.getActiveTabIndex()
if (index) {
if (this.tabs[index].meta.affix) {
return
}
this.removeTab(index)
}
},
// 关闭所有
removeAllTabs() {
this.tabs = [defaultTab]
router.push('/dashboard')
},
// 关闭其他
removeOtherTabs() {
const index = this.getActiveTabIndex()
if (index) {
this.tabs = this.tabs.filter((_, idx) => idx === index || idx === 0)
}
}
},
})