完善菜单栏细节，新增面包屑栏目

package-lock.json

@@ -1782,12 +1782,50 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995547052&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz?cache=0&sync_timestamp=1603921882890&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-5.3.1.tgz",
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA=",
           "dev": true
         },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995354302&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
         "css-loader": {
           "version": "3.6.0",
           "resolved": "https://registry.nlark.com/css-loader/download/css-loader-3.6.0.tgz?cache=0&sync_timestamp=1621865230592&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcss-loader%2Fdownload%2Fcss-loader-3.6.0.tgz",
@@ -1809,6 +1847,13 @@
             "semver": "^6.3.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
         "icss-utils": {
           "version": "4.1.1",
           "resolved": "https://registry.npm.taobao.org/icss-utils/download/icss-utils-4.1.1.tgz?cache=0&sync_timestamp=1605801297051&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ficss-utils%2Fdownload%2Ficss-utils-4.1.1.tgz",
@@ -1867,6 +1912,42 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1620717857145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
+          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "loader-utils": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+              "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },
@@ -11516,87 +11597,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1620717857145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
-      "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995547052&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995354302&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-ref": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-ref/download/vue-ref-2.0.0.tgz",

src/components/layout/components/AppMain.vue

@@ -34,7 +34,10 @@ export default {
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';
 .app-main {
-  height: calc(100vh - @navTopHight - 32px);
+  height: calc(
+    100vh - @navTopHight - @paddingMarginVal - @paddingMarginVal -
+      @breadcrumbHeight
+  );
   width: calc(100% - @paddingMarginVal - @paddingMarginVal);
   position: relative;
   overflow: hidden;
@@ -51,7 +54,10 @@ export default {
 .hasTagsView {
   .app-main {
     /* 98 = navbar + tags-view = @navTopHight + 34 */
-    height: calc(100vh - @navTopHight - 34px);
+    height: calc(
+      100vh - @navTopHight - @paddingMarginVal - @paddingMarginVal -
+        @breadcrumbHeight
+    );
   }
 
   // .fixed-header + .app-main {

src/components/layout/components/Breadcrumb.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="breadcrumb-box">
+    <div class="breadcrumb-list">
+      <a-breadcrumb>
+        <a-breadcrumb-item
+          v-for="(item, index) in breadcrumbList"
+          :key="index"
+          >{{ item }}</a-breadcrumb-item
+        >
+      </a-breadcrumb>
+    </div>
+    <div class="breadcrumb-page-title">{{ breadcrumbPageTitle }}</div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { optionalCopy } from '@/utils/tools';
+export default {
+  props: {},
+  components: {},
+  data() {
+    return {
+      breadcrumbList: [], // 面包屑数据列表
+      breadcrumbPageTitle: '', // 当前页面标题
+    };
+  },
+  created() {
+    // 初始化面包屑数据
+    this.updateBreadcrumbInfo();
+  },
+  mounted() {},
+  beforeDestroy() {},
+  watch: {
+    $route() {
+      this.updateBreadcrumbInfo(); // 更新面包屑的信息
+    },
+  },
+  computed: {
+    ...mapGetters(['routes']),
+  },
+  methods: {
+    // 更新面包屑的信息
+    updateBreadcrumbInfo() {
+      let routeInfo = optionalCopy(this.$route, 'matched');
+      this.breadcrumbList = [];
+      this.breadcrumbPageTitle = '';
+      let first = null;
+      let second = null;
+      let third = null;
+      for (let i = 0; i < this.routes.length; i++) {
+        let item = this.routes[i];
+        if (item.path === routeInfo.path) {
+          first = item;
+          break;
+        } else if (item.children) {
+          for (let j = 0; j < item.children.length; j++) {
+            let itemChild = item.children[j];
+            if (itemChild.path === routeInfo.path) {
+              first = item;
+              second = itemChild;
+              break;
+            } else if (itemChild.children) {
+              for (let m = 0; m < itemChild.children.length; m++) {
+                let itemChildren = itemChild.children[m];
+                if (itemChildren.path === routeInfo.path) {
+                  first = item;
+                  second = itemChild;
+                  third = itemChildren;
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+      if (first && first.meta && first.meta.title) {
+        this.breadcrumbList.push(first.meta.title);
+        if (second && second.meta && second.meta.title) {
+          this.breadcrumbList.push(second.meta.title);
+          if (third && third.meta && third.meta.title) {
+            this.breadcrumbList.push(third.meta.title);
+            this.breadcrumbPageTitle = third.meta.title;
+          } else {
+            this.breadcrumbPageTitle = second.meta.title;
+          }
+        } else {
+          this.breadcrumbPageTitle = first.meta.title;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>
+
+<style lang="less" scoped>
+@import '~@/styles/common/variable.less';
+.breadcrumb-box {
+  height: @breadcrumbHeight;
+  width: 100%;
+  padding: 0 @paddingMarginVal;
+  background-color: @mainColorWhite;
+  border-top: 2px solid #f3f3f3;
+  .breadcrumb-list {
+    width: 100%;
+    height: 45px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+  .breadcrumb-page-title {
+    height: calc(100% - 45px);
+    display: flex;
+    flex-wrap: nowrap;
+    color: @mainColorBlack;
+    font-size: 17px;
+    font-weight: bold;
+  }
+}
+</style>

src/components/layout/components/sider/index.vue → src/components/layout/components/Sider.vue

@@ -8,8 +8,8 @@
       class="ant-menu-ul"
       theme="dark"
       mode="inline"
-      :default-selected-keys="[activeMenu]"
-      :default-open-keys="['/user']"
+      :defaultSelectedKeys="[activeMenu]"
+      :defaultOpenKeys="[defaultOpenKeys]"
     >
       <template v-for="route in routes">
         <a-menu-item
@@ -59,6 +59,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { PROGRAM_Title } from '@/common/Constant';
+import { optionalCopy } from '@/utils/tools';
 export default {
   props: {},
   components: {},
@@ -66,14 +67,12 @@ export default {
     return {
       logoImg: require('@/assets/image/home/logo.png'),
       title: PROGRAM_Title,
-      menuList: [],
+      defaultOpenKeys: '', // 默认展开的菜单
     };
   },
-  created() {
-    this.initDataFun(); //初始化数据
-  },
+  created() {},
   mounted() {
-    console.log(this.routes);
+    this.initDataFun(); //初始化数据
   },
   beforeDestroy() {},
   watch: {},
@@ -86,14 +85,42 @@ export default {
       if (meta.activeMenu) {
         return meta.activeMenu;
       }
-      // console.log(meta, path);
+      console.log(meta, path);
       return path;
     },
   },
   methods: {
     //初始化数据
     initDataFun() {
-      this.menuList = [{}];
+      console.log(this.routes);
+      let routeInfo = optionalCopy(this.$route, 'matched');
+      for (let i = 0; i < this.routes.length; i++) {
+        let item = this.routes[i];
+        if (item.path === routeInfo.path) {
+          console.log('1111');
+          this.defaultOpenKeys = this.routes[i].path;
+          break;
+        } else if (item.children) {
+          for (let j = 0; j < item.children.length; j++) {
+            let itemChild = item.children[j];
+            if (itemChild.path === routeInfo.path) {
+              console.log('2222');
+              this.defaultOpenKeys = itemChild.path;
+              break;
+            } else if (itemChild.children) {
+              for (let m = 0; m < itemChild.children.length; m++) {
+                let itemChildren = itemChild.children[m];
+                if (itemChildren.path === routeInfo.path) {
+                  console.log('333');
+                  this.defaultOpenKeys = itemChildren.path;
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+      console.log(this.defaultOpenKeys);
     },
     // 操作：点击了某个路由菜单
     handleMenuRouterFun(item) {

src/components/layout/index.vue

@@ -8,6 +8,7 @@
         <NavTop :collapsed.sync="collapsed" />
       </a-layout-header>
       <a-layout-content>
+        <Breadcrumb />
         <AppMain :active="active" />
       </a-layout-content>
     </a-layout>
@@ -16,8 +17,9 @@
 
 <script>
 import AppMain from './components/AppMain';
-import Sider from './components/sider';
+import Sider from './components/Sider';
 import NavTop from './components/NavTop';
+import Breadcrumb from './components/Breadcrumb';
 export default {
   name: 'Layout',
   provide() {
@@ -30,6 +32,7 @@ export default {
     AppMain,
     Sider,
     NavTop,
+    Breadcrumb,
   },
   data() {
     return {

src/router/menu.js

@@ -5,6 +5,7 @@ export default [
   },
   {
     meta: { title: '题目管理', icon: 'user' },
+    path: '/examQuestionManagement',
     children: [
       {
         path: '/examQuestionManagement/list',
@@ -12,6 +13,7 @@ export default [
       },
       {
         meta: { title: '新建题目', icon: 'user' },
+        path: '/examQuestionManagement/create',
         children: [
           {
             path: '/examQuestionManagement/create/singleChoice',
@@ -35,6 +37,7 @@ export default [
   },
   {
     meta: { title: '考试管理', icon: 'user' },
+    path: '/examManagement',
     children: [
       {
         path: '/examManagement/list',
@@ -46,6 +49,7 @@ export default [
       },
       {
         meta: { title: '新建考试', icon: 'user' },
+        path: '/examManagement/create',
         children: [
           {
             path: '/examManagement/manualVolumeFormation',

src/styles/common/variable.less

@@ -1,6 +1,8 @@
 @mainColorBlue: #002140; // 主题色：深蓝色
 @mainColorBlueNormal: #1890FF; // 主题色：蓝色
 @mainColorWhite: #fff; // 主题色：白色
+@mainColorBlack: #333; // 主题色：黑色
 
 @paddingMarginVal: 16px; // 通用间距
-@navTopHight: 64px; // 顶部导航栏高度
+@navTopHight: 64px; // 顶部导航栏高度
+@breadcrumbHeight: 80px; // 面包屑所在盒子高度 45px + 35px

src/views/articleManagement/articleCreate.vue

@@ -11,7 +11,7 @@
 
 <script>
 export default {
-  name: 'articletCreate',
+  name: 'articleCreate',
   props: {},
   components: {
     // components: (reslove) => {