tags menu

mock/system/router.js

@@ -21,7 +21,7 @@ const asyncRoutes = [
         component: 'views/system/user/index',
         name: 'SystemUser',
         meta: {
-          title: '菜单管理'
+          title: '用户管理'
         }
       },
       {

src/layout/components/Tags/index.vue

@@ -18,7 +18,7 @@
               <div
                 :id="`tag${element.fullPath.split('/').join('\/')}`"
                 class="tabs-card-scroll-item"
-                :class="{ 'active-item': activeKey === element.path }"
+                :class="{ 'active-item': state.activeKey === element.path }"
                 @click.stop="goPage(element)"
                 @contextmenu="handleContextMenu($event, element)"
               >
@@ -42,15 +42,18 @@ import {
   CloseOutlined
 } from '@vicons/antd'
 import Draggable from 'vuedraggable'
-import { reactive, computed, toRaw } from 'vue'
+import { reactive, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useTagsMenuStore } from '@/store/modules/tagsMenu.js'
 import { useSettingStore } from '@/store/modules/setting.js'
 import { getTags, setTags } from '@/utils/tags.js'
+import { isString } from '@/utils/is.js'
 
 /* 获取路由器 */
 const route = useRoute()
 const router = useRouter()
+const { push, replace } = router
+
 const tagsMenuStore = useTagsMenuStore()
 const settingStore = useSettingStore()
 const tabsList = computed(() => tagsMenuStore.tabsList)
@@ -82,6 +85,18 @@ const state = reactive({
   scrollable: false
 })
 
+watch(
+  () => route.fullPath,
+  (to) => {
+    console.log('to', to)
+    // if (whiteList.includes(route.name)) return
+    state.activeKey = to
+    tagsMenuStore.addTabs(getSimpleRoute(route))
+    // updateNavScroll(true)
+  },
+  { immediate: true }
+)
+
 /**
  * @description:
  * @param { Object } route
@@ -119,10 +134,10 @@ function scrollNext() {
  * @return {*}
  */
 function goPage(e) {
-//   const { fullPath } = e
+  const { fullPath } = e
-//   if (fullPath === route.fullPath) return
+  if (fullPath === route.fullPath) return
-//   state.activeKey = fullPath
+  state.activeKey = fullPath
-//   go(e, true)
+  go(e, true)
 }
 /**
  * @description: 删除项
@@ -149,6 +164,18 @@ function handleContextMenu(e, item) {
 //   })
 }
 
+function go(opt, isReplace = false) {
+  if (!opt) {
+    return
+  }
+  if (isString(opt)) {
+    isReplace ? replace(opt).catch(e => console.log(e)) : push(opt).catch(e => console.log(e))
+  } else {
+    const o = opt
+    isReplace ? replace(o).catch(e => console.log(e)) : push(o).catch(e => console.log(e))
+  }
+}
+
 </script>
 <style scoped lang='scss'>
   .tabs-view {
@@ -156,6 +183,7 @@ function handleContextMenu(e, item) {
     padding: 6px 0;
     display: flex;
     transition: all 0.2s ease-in-out;
+    background: #f5f7f9;
     .tabs-view-main {
       height: 32px;
       display: flex;
@@ -189,9 +217,9 @@ function handleContextMenu(e, item) {
         .tabs-card-scroll {
           white-space: nowrap;
           overflow: hidden;
-          &-item {
+          .tabs-card-scroll-item {
-            background: v-bind(getCardColor);
+            background: #ffffff;
-            color: v-bind(getBaseColor);
+            // color: v-bind('tagsMenuSetting.color');
             height: 32px;
             padding: 6px 16px 4px;
             border-radius: 3px;
@@ -200,16 +228,13 @@ function handleContextMenu(e, item) {
             display: inline-block;
             position: relative;
             flex: 0 0 auto;
-
             span {
               float: left;
               vertical-align: middle;
             }
-
             &:hover {
               color: #515a6e;
             }
-
             .n-icon {
               height: 22px;
               width: 21px;
@@ -218,20 +243,18 @@ function handleContextMenu(e, item) {
               vertical-align: middle;
               text-align: center;
               color: #808695;
-
               &:hover {
                 color: #515a6e !important;
               }
-
               svg {
                 height: 21px;
                 display: inline-block;
               }
             }
+            &.active-item {
+              color: #2d8cf0;
+            }
           }
-        //   .active-item {
-        //     color: v-bind(getAppTheme);
-        //   }
         }
       }
     }
@@ -244,7 +267,4 @@ function handleContextMenu(e, item) {
     left: 200px;
   }
 
-  .tabs-view-default-background {
-    background: #f5f7f9;
-  }
 </style>

src/layout/index.vue

@@ -17,7 +17,7 @@
       <n-layout>
         <Header />
         <Tags v-if="tagsMenuSetting.show" />
-        <n-layout class="layout__content">
+        <n-layout class="layout__content" :class="{'layout__content--fix': tagsMenuSetting.fixed }">
           <router-view />
         </n-layout>
       </n-layout>
@@ -39,5 +39,7 @@ const tagsMenuSetting = computed(() => settingStore.getTagsMenuSetting)
 </script>
 
 <style lang="scss" scoped>
-
+.layout__content--fix{
+  padding-top: 44px;
+}
 </style>