页面tab完成

web/src/components/navTabs.vue

@@ -1,18 +1,29 @@
 <template>
   <section class="navTabs flex pad-h8 pad-v8">
-    <div class="item pad-h8" v-text="`首页`" :class="{current:$route.name=='工作台'}" @click="$router.push({name:'工作台'})"/>
+    <div class="fill flex">
-    <div class="item pad-h8 flex center" v-for="(item,i) in tabs" :key="item.id"
+      <div class="item pad-h8" v-text="`首页`" :class="{current:$route.name=='工作台'}" @click="$router.push({name:'工作台'})"/>
-         :class="{current:item.name==$route.name}" @click="handleJump(item)">
+      <div class="item pad-h8 flex center" v-for="(item,i) in tabs" :key="item.id"
-      <div class="mar-r8" v-text="item.label"/>
+           :class="{current:item.name==$route.name}" @click="handleJump(item)">
-      <el-icon @click.stop="handleClosePage(i)">
+        <div class="mar-r8" v-text="item.label"/>
-        <Close/>
+        <el-icon @click.stop="handleClosePage(item.id)">
-      </el-icon>
+          <Close/>
+        </el-icon>
+      </div>
     </div>
+    <el-dropdown class="mar-l8" @command="handleOpt">
+      <el-button>更多</el-button>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item command="clearAllPages">关闭全部</el-dropdown-item>
+          <el-dropdown-item command="clearOtherPages">关闭其他</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
   </section>
 </template>
 
 <script>
-import {mapState} from "pinia/dist/pinia";
+import {mapActions, mapState} from "pinia/dist/pinia";
 import {mainStore} from "../utils/store";
 import {Close} from "@element-plus/icons-vue";
 
@@ -24,12 +35,29 @@ export default {
     tabs: v => v.pages
   },
   methods: {
-    handleClosePage(index) {
+    ...mapActions(mainStore, ['deletePage', 'clearOtherPages']),
-      mainStore().deletePage(index)
+    handleClosePage(id) {
-      this.handleJump(this.tabs?.[index - 1] || {name: '工作台'})
+      const {pages} = this
+      if (id == this.currentTab) {
+        const index = pages.findIndex(e => e.id == id)
+        const next = pages?.[index + 1] || pages?.[index - 1] || {id: this.fixed.id || "/"}
+        this.handleJump({name: next.id})
+      }
+      this.deletePage(id)
     },
     handleJump(page) {
-      this.$router.push({name: page.name})
+      const {name} = page
+      name != this.$route.fullPath && this.$router.push(name)
+    },
+    handleOpt(v) {
+      const opts = {
+        clearAllPages: () => {
+          mainStore().clearAllPages()
+          this.handleJump({name: "/"})
+        },
+        clearOtherPages: this.clearOtherPages
+      }
+      opts[v]();
     }
   },
   watch: {
@@ -53,11 +81,13 @@ export default {
   .item {
     border-radius: 4px;
     border: 1px solid #ccc;
-    line-height: 32px;
+    line-height: 30px;
     font-size: 14px;
     cursor: pointer;
     user-select: none;
     color: #999;
+    justify-self: flex-start;
+    flex-shrink: 0;
 
     &.current {
       color: #fff;

web/src/components/sliderNav.vue

@@ -96,9 +96,6 @@ export default {
       margin-left: 12px;
     }
 
-    &:hover {
-      color: #ffffff;
-    }
   }
 
   .app {
@@ -106,7 +103,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      color: rgba(#fff, .8);
+      color: #fff;
     }
 
     &.active {

web/src/utils/store.js

@@ -27,8 +27,17 @@ export const mainStore = defineStore('main', {
     addPage(page) {
       if (!this.pages.find(e => e.id == location.href)) this.pages.push({...page, id: location.href})
     },
-    deletePage(i) {
+    deletePage(id) {
-      this.pages.splice(i, 1)
+      id = id || location.href?.replace(location.origin, "")
+      const i = this.pages.findIndex(e => e.id == id)
+      i > -1 && this.pages.splice(i, 1)
+    },
+    clearAllPages() {
+      this.pages = []
+    },
+    clearOtherPages() {
+      const id = location.href?.replace(location.origin, "")
+      this.pages = this.pages.filter(e => e.id == id) || []
     },
     logout() {
       this.user = {}