页签历史驻留,返回关闭功能完成

examples/components/mainContent.vue

@@ -1,75 +1,22 @@
 <template>
   <section class="mainContent">
-    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
-      <el-tab-pane label="首页" name="0"/>
-      <el-tab-pane v-for="op in tabs" :key="op.name" :name="op.name" :label="op.label" lazy closable/>
-    </el-tabs>
+    <ai-nav-tab/>
     <div class="fill">
       <router-view/>
-      <ai-empty v-if="currentTab=='0'">欢迎使用村微产品库</ai-empty>
+      <ai-empty v-if="isHome">欢迎使用村微产品库</ai-empty>
     </div>
   </section>
 </template>
 
 <script>
-import {mapState} from "vuex";
+import AiNavTab from "dui/packages/basic/AiNavTab";
 
 export default {
   name: "mainContent",
+  components: {AiNavTab},
   computed: {
-    ...mapState(['apps']),
-    currentTab() {
-      let {name, query, hash} = this.$route
-      return [name?.replace(query?.id, ''), query?.id, hash].join("") || "0"
-    }
+    isHome: v => v.$route.path == '/',
   },
-  data() {
-    return {
-      tabs: []
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler() {
-        this.getTabs()
-      }
-    },
-  },
-  methods: {
-    handleTabClick({name}) {
-      if (name == '0') {
-        this.$router.push("/")
-      } else {
-        let {name: route, query, hash} = this.tabs.find(e => e.name == name),
-            exps = []
-        query.id && exps.push(query.id)
-        hash && exps.push(hash)
-        let reg = new RegExp(`(${exps.join("|")})`, 'g')
-        this.$router.push({name: route.replace(reg, ''), query, hash})
-      }
-    },
-    handleTabRemove(id = this.currentTab) {
-      let tabs = JSON.parse(JSON.stringify(this.tabs)),
-          index = tabs?.findIndex(e => id == e.name)
-      if (id == this.currentTab) {
-        let next = tabs?.[index + 1] || tabs?.[index - 1]
-        next ? this.handleTabClick(next) : this.$router.push({path: '/'})
-      }
-      this.tabs.splice(index, 1)
-    },
-    getTabs() {
-      let {name, query, hash} = this.$route
-      let tab = this.tabs.find(e => e.name == this.currentTab),
-          tabName = [name, query?.id, hash].join("")
-      if (tab) {
-      } else if (!name) {
-      } else if (tabName) {
-        let menu = this.apps.find(e => e.name == name)
-        this.tabs.push({name: tabName, query, hash, label: menu?.label})
-      }
-    },
-  }
 }
 </script>
 
@@ -80,7 +27,7 @@ export default {
   display: flex;
   flex-direction: column;
 
-  :deep(.layout ){
+  :deep(.layout ) {
     background: #F5F6F9;
     display: flex;
     flex-direction: column;