From 2752f7f731cae95cfea5663d6c72cf534e47a971 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Thu, 17 Mar 2022 20:35:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/aside.vue      |  4 ++--
 src/layouts/components/breakcrumb.vue | 14 ++++++++++----
 src/layouts/components/menu-item.vue  |  6 +++---
 src/layouts/components/menu.vue       |  7 ++++++-
 src/router/index.js                   |  7 ++++---
 src/store/modules/layout.js           |  2 ++
 src/views/global/login.vue            | 10 +++++-----
 7 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/layouts/components/aside.vue b/src/layouts/components/aside.vue
index 9b17d6e..61c2095 100644
--- a/src/layouts/components/aside.vue
+++ b/src/layouts/components/aside.vue
@@ -57,7 +57,7 @@
                     border-radius: @layout-border-radius;
                     width: @layout-aside-item-size;
                     .x-icon {
-                        margin-bottom: 10px;
+                        margin-bottom: @layout-space;
                     }
                     P {
                         line-height: 1;
@@ -67,7 +67,7 @@
                         color: @layout-aside-fc;
                     }
                     + .el-menu-item {
-                        margin-top: 10px;
+                        margin-top: @layout-space;
                     }
                 }
             }
diff --git a/src/layouts/components/breakcrumb.vue b/src/layouts/components/breakcrumb.vue
index 8ac8485..f0576e9 100644
--- a/src/layouts/components/breakcrumb.vue
+++ b/src/layouts/components/breakcrumb.vue
@@ -1,12 +1,18 @@
 <template>
     <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
-        <el-breadcrumb-item><a href="/">课程列表</a></el-breadcrumb-item>
-        <el-breadcrumb-item>添加课程</el-breadcrumb-item>
+        <template v-for="(item, index) in breakcrumbList" :key="index">
+            <el-breadcrumb-item v-if="index === breakcrumbList.length - 1">{{ item.meta.title }}</el-breadcrumb-item>
+            <el-breadcrumb-item v-else :to="{ name: item.name }">
+                {{ item.meta.title }}
+            </el-breadcrumb-item>
+        </template>
     </el-breadcrumb>
 </template>
 
-<script setup></script>
+<script setup>
+    const store = useStore();
+    const breakcrumbList = computed(() => store.state.layout.breakcrumbList);
+</script>
 
 <style lang="less" scoped>
     .el-breadcrumb {
diff --git a/src/layouts/components/menu-item.vue b/src/layouts/components/menu-item.vue
index 5699a64..50a0a05 100644
--- a/src/layouts/components/menu-item.vue
+++ b/src/layouts/components/menu-item.vue
@@ -38,7 +38,7 @@
             color: @layout-menu-active-fc;
         }
         + .el-menu-item {
-            margin-top: 5px;
+            margin-top: @layout-space-small;
         }
     }
     .el-sub-menu {
@@ -51,10 +51,10 @@
         }
         :deep(.el-sub-menu__title) {
             border-radius: @layout-border-radius;
-            margin-bottom: 5px;
+            margin-bottom: @layout-space-small;
         }
         + .el-menu-item {
-            margin-top: 5px;
+            margin-top: @layout-space-small;
         }
         :deep(.el-menu) {
             padding: 0 !important;
diff --git a/src/layouts/components/menu.vue b/src/layouts/components/menu.vue
index 48df9c9..e855e22 100644
--- a/src/layouts/components/menu.vue
+++ b/src/layouts/components/menu.vue
@@ -2,7 +2,7 @@
     <el-scrollbar class="layout-menu" :class="{ collapse: collapseAside }">
         <div class="title">马士兵严选后台管理平台</div>
         <el-divider>{{ activeAsideName }}</el-divider>
-        <el-menu unique-opened router :default-active="activeMenu">
+        <el-menu unique-opened :default-active="activeMenu" @select="handleSelect">
             <MenuItem v-for="(item, index) in menuList" :key="index" :menu-item="item" />
         </el-menu>
     </el-scrollbar>
@@ -10,11 +10,16 @@
 
 <script setup>
     import MenuItem from './menu-item.vue';
+    const router = useRouter();
     const store = useStore();
     const activeAsideName = computed(() => store.getters['layout/activeAsideName']);
     const menuList = computed(() => store.state.layout.menuList);
     const activeMenu = computed(() => store.state.layout.activeMenu);
     const collapseAside = computed(() => store.getters['layout/collapseAside']);
+    const handleSelect = (index) => {
+        // TODO 支持外链
+        router.push({ name: index });
+    };
 </script>
 
 <style lang="less" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 210084d..e7a4d88 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -81,9 +81,6 @@ router.beforeEach(async (to, from, next) => {
     //     await store.dispatch('auth/getPermission');
     // }
     if (to.matched.length) {
-        store.commit('layout/setActiveAside', to.matched.find((item) => !item.meta?.layout).name);
-        store.commit('layout/setActiveMenu', to.name);
-        store.commit('layout/setActiveTab', to.name);
         console.info(`[router] from ${from.name} to ${to.name}`);
         if (to.meta.global) {
             next();
@@ -97,6 +94,10 @@ router.beforeEach(async (to, from, next) => {
                 next({ name: childName });
             } else {
                 next();
+                store.commit('layout/setActiveAside', to.matched.find((item) => !item.meta?.layout).name);
+                store.commit('layout/setActiveMenu', to.name);
+                store.commit('layout/setActiveTab', to.name);
+                store.commit('layout/setBreakcrumbList', to.matched);
                 store.commit('layout/addTab', to);
             }
         }
diff --git a/src/store/modules/layout.js b/src/store/modules/layout.js
index 884b23e..35df3aa 100644
--- a/src/store/modules/layout.js
+++ b/src/store/modules/layout.js
@@ -6,6 +6,7 @@ const state = () => ({
     menuList: [],
     tabList: [],
     activeTab: null,
+    breakcrumbList: [],
 });
 const getters = {
     asideList: () => {
@@ -46,6 +47,7 @@ const mutations = {
         }
     },
     setActiveTab: (state, data) => (state.activeTab = data),
+    setBreakcrumbList: (state, data) => (state.breakcrumbList = data),
 };
 const actions = {};
 export default {
diff --git a/src/views/global/login.vue b/src/views/global/login.vue
index 82791d7..0d08c09 100644
--- a/src/views/global/login.vue
+++ b/src/views/global/login.vue
@@ -82,10 +82,10 @@
             width: 420px;
             padding: 30px;
             background: #1a2229;
-            border-radius: 10px;
+            border-radius: @layout-border-radius;
             .title {
-                margin-bottom: 20px;
-                font-size: 20px;
+                margin-bottom: @layout-space-super;
+                font-size: @layout-h1;
                 text-align: center;
             }
             .content {
@@ -93,11 +93,11 @@
                     width: 100%;
                     display: flex;
                     + .flex {
-                        margin-top: 10px;
+                        margin-top: @layout-space;
                     }
                     .el-button {
                         width: 30%;
-                        margin-left: 10px;
+                        margin-left: @layout-space;
                         color: #fff;
                     }
                 }