路由优化

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;
                     }
                 }
             }

src/layouts/components/breakcrumb.vue

@@ -1,12 +1,18 @@
 <template>
     <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/' }">课程管理</el-breadcrumb-item>
+        <template v-for="(item, index) in breakcrumbList" :key="index">
-        <el-breadcrumb-item><a href="/">课程列表</a></el-breadcrumb-item>
+            <el-breadcrumb-item v-if="index === breakcrumbList.length - 1">{{ item.meta.title }}</el-breadcrumb-item>
-        <el-breadcrumb-item>添加课程</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 {

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;

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>

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);
             }
         }

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 {

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;
+                margin-bottom: @layout-space-super;
-                font-size: 20px;
+                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;
                     }
                 }