页面tab完成

ui/packages/basic/AiNavTab.vue

@@ -1,21 +1,36 @@
 <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 class="layout fill" type="card" :value="currentTab" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
+      <el-tab-pane v-for="(op,i) in tabs" :key="i" :name="op.id" :label="op.label" lazy :closable="!op.fixed"/>
     </el-tabs>
+    <el-dropdown flex class="more" @visible-change="handleIcon" trigger="click" @command="handleOpt">
+      <ai-icon :icon="dropdownIcon"/>
+      <el-dropdown-menu>
+        <el-dropdown-item command="clearAllPages">关闭所有</el-dropdown-item>
+        <el-dropdown-item command="clearOtherPages">只留当前页</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </section>
 </template>
 
 <script>
 import {mapState, mapMutations} from "vuex";
+
 export default {
   name: "AiNavTab",
+  props: {
+    fixed: {default: () => ({label: "首页", id: "/"})}
+  },
   computed: {
     ...mapState(['apps', 'logs']),
     currentTab: v => v.isHome ? "/" : v.$route.fullPath,
-    isHome: v => v.$route.path == '/',
-    tabs: v => v.logs.pages
+    tabs: v => [{...v.fixed, fixed: 1}, v.logs.pages].flat(),
+    isHome: v => v.fixed.id == v.$route.fullPath
+  },
+  data() {
+    return {
+      dropdownIcon: "iconDouble_Down"
+    }
   },
   watch: {
     $route: {
@@ -40,6 +55,13 @@ export default {
         this.handleTabClick(next)
       }
       this.deletePage(id)
+    },
+    handleIcon(v) {
+      this.dropdownIcon = v ? "iconDouble_Up" : "iconDouble_Down"
+    },
+    handleOpt(v) {
+      this.$store.commit(v)
+      v == "clearAllPages" && this.handleTabClick({name: '/'})
     }
   }
 }
@@ -47,14 +69,26 @@ export default {
 
 <style lang="scss" scoped>
 .AiNavTab {
+  display: flex;
+  background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
+
   :deep(.layout ) {
-    background: #F5F6F9;
     display: flex;
     flex-direction: column;
 
+    .el-tabs__nav-prev, .el-tabs__nav-next {
+      top: 50%;
+      line-height: normal;
+      transform: translateY(-50%);
+
+      & > i {
+        font-weight: bold !important;
+      }
+
+    }
+
     & > .el-tabs__header {
       margin-bottom: 0;
-      background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
       height: 40px;
       display: flex;
       align-items: flex-end;
@@ -117,5 +151,17 @@ export default {
       }
     }
   }
+
+  :deep(.more) {
+    .AiIcon {
+      height: 100%;
+
+      .iconfont {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
 }
 </style>