feat(project): 增加tab右键菜单

LICENSE

@@ -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.

mock/module/user.ts

@@ -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: '系统配置',

src/layouts/BasicLayout/index.vue

@@ -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,

src/layouts/components/tab/TabBar.vue

@@ -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>

src/store/modules/tab.ts

@@ -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;

src/views/docments/vue/index.vue

@@ -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>