feat: add function of disable closing page; ⭐

新增：禁用关闭页面功能；

src/layouts/tabs/TabsHead.vue

@@ -16,9 +16,9 @@
       </a-tooltip>
       <a-tab-pane v-for="page in pageList" :key="page.fullPath">
         <div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.fullPath, e)">
-          <a-icon v-if="page.fullPath === active || page.loading" @click="onRefresh(page)" class="icon-sync" :type="page.loading ? 'loading' : 'sync'" />
-          <span @click="onTabClick(page.fullPath)" >{{pageName(page)}}</span>
-          <a-icon @click="onClose(page.fullPath)" class="icon-close" type="close"/>
+          <a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.fullPath !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
+          <div class="title" @click="onTabClick(page.fullPath)" >{{pageName(page)}}</div>
+          <a-icon v-if="!page.unclose" @click="onClose(page.fullPath)" class="icon-close" type="close"/>
         </div>
       </a-tab-pane>
     </a-tabs>
@@ -107,6 +107,11 @@
     padding: 0 16px;
     font-size: 14px;
     user-select: none;
+    transition: all 0.2s;
+    .title{
+      display: inline-block;
+      height: 100%;
+    }
     .icon-close{
       font-size: 12px;
       margin-left: 6px;
@@ -119,9 +124,14 @@
     .icon-sync{
       margin-left: -4px;
       color: @primary-4;
+      transition: all 0.3s ease-in-out;
       &:hover{
         color: @primary-color;
       }
+      font-size: 14px;
+      &.hide{
+        font-size: 0;
+      }
     }
   }
   .tabs-head{

src/layouts/tabs/TabsView.vue

@@ -153,8 +153,9 @@ export default {
     },
     closeOthers (pageKey) {
       // 清除缓存
-      this.clearCaches = this.pageList.filter(item => item.fullPath !== pageKey).map(item => item.cachedKey)
-      this.pageList = this.pageList.filter(item => item.fullPath === pageKey)
+      const clearPages = this.pageList.filter(item => item.fullPath !== pageKey && !item.unclose)
+      this.clearCaches = clearPages.map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
       // 判断跳转
       if (this.activePage != pageKey) {
         this.activePage = pageKey
@@ -164,8 +165,9 @@ export default {
     closeLeft (pageKey) {
       const index = this.pageList.findIndex(item => item.fullPath === pageKey)
       // 清除缓存
-      this.clearCaches = this.pageList.filter((item, i) => i < index).map(item => item.cachedKey)
-      this.pageList = this.pageList.slice(index)
+      const clearPages = this.pageList.filter((item, i) => i < index && !item.unclose)
+      this.clearCaches = clearPages.map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
       // 判断跳转
       if (!this.pageList.find(item => item.fullPath === this.activePage)) {
         this.activePage = pageKey
@@ -175,8 +177,9 @@ export default {
     closeRight (pageKey) {
       // 清除缓存
       const index = this.pageList.findIndex(item => item.fullPath === pageKey)
-      this.clearCaches = this.pageList.filter((item, i) => i > index).map(item => item.cachedKey)
-      this.pageList = this.pageList.slice(0, index + 1)
+      const clearPages = this.pageList.filter((item, i) => i > index && !item.unclose)
+      this.clearCaches = clearPages.map(item => item.cachedKey)
+      this.pageList = this.pageList.filter(item => !clearPages.includes(item))
       // 判断跳转
       if (!this.pageList.find(item => item.fullPath === this.activePage)) {
         this.activePage = pageKey
@@ -243,7 +246,11 @@ export default {
       sessionStorage.setItem(process.env.VUE_APP_TBAS_KEY, JSON.stringify(tabs))
     },
     createPage(route) {
-      return {keyPath: route.matched[route.matched.length - 1].path, fullPath: route.fullPath, loading: false}
+      return {
+        keyPath: route.matched[route.matched.length - 1].path,
+        fullPath: route.fullPath, loading: false,
+        unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
+      }
     },
     /**
      * 设置页面缓存的key
@@ -251,6 +258,7 @@ export default {
      */
     setCachedKey(route) {
       const page = this.pageList.find(item => item.fullPath === route.fullPath)
+      page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
       if (!page._init_) {
         page.cachedKey = this.$refs.tabContent.$vnode.key
         page._init_ = true

src/router/config.js

@@ -37,6 +37,11 @@ const options = {
             {
               path: 'workplace',
               name: '工作台',
+              meta: {
+                page: {
+                  closable: false
+                }
+              },
               component: () => import('@/pages/dashboard/workplace'),
             },
             {