From b81b9b66c8a6eb6e7d649b9ecf9cabe67d4c08a8 Mon Sep 17 00:00:00 2001
From: JaguarJack <82664165@qq.com>
Date: Sat, 23 Mar 2024 17:21:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=20tagview=20=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/layout/components/Menu/item.vue     |   4 +-
 .../admin/layout/components/Menu/menus.vue    |  17 +++
 .../layout/components/header/contextMenu.vue  |  71 +++++++++-
 .../admin/layout/components/header/index.vue  |   7 +-
 .../admin/layout/components/header/lang.vue   |   2 +-
 .../layout/components/header/menuSearch.vue   |   2 +-
 .../layout/components/header/notification.vue |   2 +-
 .../admin/layout/components/header/tabs.vue   |  22 +++-
 .../admin/layout/components/header/theme.vue  |   2 +-
 resources/admin/stores/modules/tabs/index.ts  | 124 ++++++++++++++++++
 10 files changed, 236 insertions(+), 17 deletions(-)

diff --git a/resources/admin/layout/components/Menu/item.vue b/resources/admin/layout/components/Menu/item.vue
index d4f3c2e..f682864 100644
--- a/resources/admin/layout/components/Menu/item.vue
+++ b/resources/admin/layout/components/Menu/item.vue
@@ -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>
diff --git a/resources/admin/layout/components/Menu/menus.vue b/resources/admin/layout/components/Menu/menus.vue
index eb511f7..1a06e8d 100644
--- a/resources/admin/layout/components/Menu/menus.vue
+++ b/resources/admin/layout/components/Menu/menus.vue
@@ -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">
diff --git a/resources/admin/layout/components/header/contextMenu.vue b/resources/admin/layout/components/header/contextMenu.vue
index 9c011bc..3986ea0 100644
--- a/resources/admin/layout/components/header/contextMenu.vue
+++ b/resources/admin/layout/components/header/contextMenu.vue
@@ -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>
diff --git a/resources/admin/layout/components/header/index.vue b/resources/admin/layout/components/header/index.vue
index df00876..e069feb 100644
--- a/resources/admin/layout/components/header/index.vue
+++ b/resources/admin/layout/components/header/index.vue
@@ -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>
diff --git a/resources/admin/layout/components/header/lang.vue b/resources/admin/layout/components/header/lang.vue
index f0e7f22..a0292f6 100644
--- a/resources/admin/layout/components/header/lang.vue
+++ b/resources/admin/layout/components/header/lang.vue
@@ -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" />
diff --git a/resources/admin/layout/components/header/menuSearch.vue b/resources/admin/layout/components/header/menuSearch.vue
index a2ee32e..15ba136 100644
--- a/resources/admin/layout/components/header/menuSearch.vue
+++ b/resources/admin/layout/components/header/menuSearch.vue
@@ -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" />
 
diff --git a/resources/admin/layout/components/header/notification.vue b/resources/admin/layout/components/header/notification.vue
index 532516b..225254c 100644
--- a/resources/admin/layout/components/header/notification.vue
+++ b/resources/admin/layout/components/header/notification.vue
@@ -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>
diff --git a/resources/admin/layout/components/header/tabs.vue b/resources/admin/layout/components/header/tabs.vue
index 9c011bc..b5e71ce 100644
--- a/resources/admin/layout/components/header/tabs.vue
+++ b/resources/admin/layout/components/header/tabs.vue
@@ -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>
diff --git a/resources/admin/layout/components/header/theme.vue b/resources/admin/layout/components/header/theme.vue
index 58a2527..87b6569 100644
--- a/resources/admin/layout/components/header/theme.vue
+++ b/resources/admin/layout/components/header/theme.vue
@@ -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>
diff --git a/resources/admin/stores/modules/tabs/index.ts b/resources/admin/stores/modules/tabs/index.ts
index e69de29..ec50afb 100644
--- a/resources/admin/stores/modules/tabs/index.ts
+++ b/resources/admin/stores/modules/tabs/index.ts
@@ -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)
+            }
+        }
+    },
+})