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

ui/lib/js/modules.js

@@ -234,13 +234,29 @@ export const wxwork = {
  */
 export const logs = {
   state: () => ({
-    closeIntro: []
+    closeIntro: [], pages: []
   }),
   mutations: {
     addCloseIntro(state, app) {
       state.closeIntro.push(app)
-    }
+    },
+    addPage(state, page) {
+      const id = location.href?.replace(location.origin, "")
+      if (!state.pages.find(e => e.id == id || e.id == page.id)) {
+        state.pages.push({...page, id})
+      }
+    },
+    deletePage(state, id) {
+      id = id || location.href?.replace(location.origin, "")
+      const i = state.pages.findIndex(e => e.id == id)
+      i > -1 && state.pages.splice(i, 1)
+    },
   },
+  actions: {
+    closePage({commit}, id) {
+      return commit("deletePage", id)
+    }
+  }
 }
 /**
  * 流程信息

ui/packages/basic/AiNavTab.vue

@@ -0,0 +1,121 @@
+<template>
+  <section class="AiNavTab">
+    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
+      <el-tab-pane label="首页" name="/"/>
+      <el-tab-pane v-for="(op,i) in tabs" :key="i" :name="op.id" :label="op.label" lazy closable/>
+    </el-tabs>
+  </section>
+</template>
+
+<script>
+import {mapState, mapMutations} from "vuex";
+export default {
+  name: "AiNavTab",
+  computed: {
+    ...mapState(['apps', 'logs']),
+    currentTab: v => v.isHome ? "/" : v.$route.fullPath,
+    isHome: v => v.$route.path == '/',
+    tabs: v => v.logs.pages
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler(v) {
+        const currentPage = this.apps.find(e => e.name == v.name);
+        currentPage && this.addPage(currentPage)
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['addPage', 'deletePage']),
+    handleTabClick(pageTab) {
+      const {name} = pageTab
+      this.$router.push(name)
+    },
+    handleTabRemove(id) {
+      const {pages} = this.logs
+      if (id == this.currentTab) {
+        const index = pages.findIndex(e => e.id == id)
+        const next = pages?.[index + 1] || pages?.[index - 1] || {name: '/'}
+        this.handleTabClick(next)
+      }
+      this.deletePage(id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiNavTab {
+  :deep(.layout ) {
+    background: #F5F6F9;
+    display: flex;
+    flex-direction: column;
+
+    & > .el-tabs__header {
+      margin-bottom: 0;
+      background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
+      height: 40px;
+      display: flex;
+      align-items: flex-end;
+      border: none;
+
+      .el-tabs__nav {
+        border: none;
+      }
+
+      .el-tabs__item {
+        padding: 0 8px 0 12px !important;
+        text-align: left;
+        min-width: 130px;
+        height: 36px;
+        line-height: 36px;
+        border: none;
+        color: #555;
+        font-size: 12px;
+
+        & + .el-tabs__item {
+          margin-left: 2px;
+        }
+
+        .el-icon-close {
+          float: right;
+          width: auto;
+          height: 100%;
+          line-height: 36px;
+          background: transparent;
+          font-size: 16px;
+          color: #89b;
+
+          &:hover {
+            color: #000;
+          }
+        }
+
+        &.is-active {
+          border: 1px solid #D8DCE3;
+          border-bottom: none;
+          border-radius: 4px 4px 0 0;
+          background: #F5F6F9;
+          color: #222;
+
+          &:after {
+            display: none;
+          }
+        }
+
+        &:after {
+          position: absolute;
+          right: 0;
+          content: " ";
+          width: 1px;
+          background: #D8DCE3;
+          height: 24px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+}
+</style>

ui/packages/basic/AiTitle.vue

@@ -31,6 +31,8 @@
 </template>
 
 <script>
+import {mapActions} from "vuex"
+
 export default {
   name: 'AiTitle',
   model: {
@@ -84,7 +86,9 @@ export default {
   },
 
   methods: {
+    ...mapActions(['closePage']),
     onBackBtnClick() {
+      this.closePage()
       this.$emit('onBackClick')
       this.$emit('back')
     }
@@ -129,7 +133,7 @@ export default {
       align-items: center;
     }
 
-    :deep(.el-button ){
+    :deep(.el-button ) {
       margin-left: 8px !important;
     }
   }