Merge branch 'main' of github.com:GeekQiaQia/vue3.0-template-admin in…

…to main
WeCuit · Oct 16, 2021 · 6372010 · 6372010
2 parents ccda468 + 75c4f6e
commit 6372010
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 17 deletions.
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
@@ -1,7 +1,17 @@
 <template>
   <section class="app-main">
-    <el-tabs id="Tabs" v-model="currentIndex" type="card" closable @tab-click="clickTab" @tab-remove="removeTab">
-      <el-tab-pane v-for="item in tabsOption" :key="item.route" :closable="item.route !== '/home'" :label="item.title[lang]" :name="item.route"> </el-tab-pane>
+    <el-tabs id="Tabs"
+      v-model="currentIndex"
+      type="card"
+      closable
+      @tab-click="clickTab"
+      @tab-remove="removeTab">
+      <el-tab-pane
+        v-for="item in tabsOption"
+        :key="item.route"
+        :closable="item.route !== '/home'"
+        :label="item.title[lang]"
+        :name="item.route" />
     </el-tabs>
     <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
       <transition name="fade" mode="out-in">

diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
@@ -2,16 +2,27 @@
   <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu :router="true" :unique-opened="false" :default-active="activeMenu" class="el-menu-vertical" :collapse="isCollapse" background-color="#545c64" text-color="#fff">
+      <el-menu
+        :router="true"
+        :unique-opened="false"
+        :default-active="activeMenu"
+        class="el-menu-vertical"
+        :collapse="isCollapse"
+        background-color="#545c64"
+        text-color="#fff">
         <!--递归路由对象-->
         <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { useRouter } from 'vue-router'
+import {
+  computed,
+  defineComponent,
+  onMounted,
+} from 'vue'
+import { useRoute } from 'vue-router'
 import { isExternal } from '@/utils/validate'
 import sidebarItem from '@/layout/components/Sidebar/sidebarItem.vue'
 import logo from './Logo.vue'
@@ -23,13 +34,20 @@ export default defineComponent({
     sidebarItem
   },
   setup() {
-    const router = useRouter()
+    const route = useRoute()
 
     const store = useStore()
     const isCollapse = computed(() => !store.getters['appModule/getSidebarState'])
     const showLogo = computed(() => store.state.settingsModule.sideBarLogo)
     const routes = computed(() => store.state.permissionModule.accessRoutes)
-    const activeMenu = computed(() => router.currentRoute.value.fullPath)
+    const activeMenu = computed(() => store.getters['tabModule/getCurrentIndex'])
+
+    onMounted(() => {
+      const routePath = route.path
+
+      store.commit('tabModule/SET_TAB',routePath)
+    })
+
     // methods
     // eslint-disable-next-line consistent-return
     const resolvePath = (routePath: string) => {

diff --git a/src/layout/components/Sidebar/sidebarItem.vue b/src/layout/components/Sidebar/sidebarItem.vue
@@ -2,14 +2,14 @@
   <div v-if="!item.meta.hidden" class="menu-wrapper">
     <!--only on child show el-menu -->
     <template v-if="hasOneShowingChild(item.children, item)">
-      <el-menu-item :key="item.path" :index="item.path" :route="item.path">
-        <i :class="item.meta.icon"></i>
-        <template #title>{{ item.meta.title[lang] }}</template>
+      <el-menu-item :key="onlyOneChild.path" :index="onlyOneChild.path" :route="onlyOneChild.path">
+        <i :class="onlyOneChild.meta.icon"></i>
+        <template #title>{{ onlyOneChild.meta.title[lang] }}</template>
       </el-menu-item>
     </template>
     <el-sub-menu v-else ref="subMenu" :index="item.path" popper-append-to-body>
       <template #title>
-        <i :class="item.meta.icon"></i>
+        <i :data-index='item.path' :class="item.meta.icon"></i>
         <span>{{ item.meta.title[lang] }}</span>
       </template>
       <!--children 进行递归调用自身组件-->
@@ -96,7 +96,6 @@ export default defineComponent({
         onlyOneChild.value = { ...parent, noShowingChildren: true }
         return true
       }
-      // }
 
       return false
     }

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -27,7 +27,7 @@ export const constantRoutes: Array<RouteRecordRaw> = [
             '/zh-CN': '首页',
             '/en-US': 'Home Page'
           },
-          icon: 'home',
+          icon: 'el-icon-s-home',
         },
       },
     ],
@@ -156,7 +156,7 @@ export const asyncRoutes:Array<RouteRecordRaw> = [
             '/zh-CN': '复制文本',
             '/en-US': 'Copy Text'
           },
-          icon: 'home',
+          icon: 'el-icon-edit-outline',
         },
       },
     ],
@@ -450,7 +450,7 @@ export const asyncRoutes:Array<RouteRecordRaw> = [
             '/zh-CN': '文件上传',
             '/en-US': 'File Upload'
           },
-          icon: 'home',
+          icon: 'el-icon-upload',
         },
       },
     ],

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -111,8 +111,6 @@
       overflow: hidden;
 
       & > .el-sub-menu__title {
-        padding: 0 !important;
-
         .svg-icon {
           margin-left: 20px;
         }