菜单修复

src/assets/styles/element-variables.scss

@@ -4,7 +4,7 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
+$--color-primary: #192a92;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
@@ -20,7 +20,7 @@ $--border-color-lighter: #e6ebf5;
 $--table-border: 1px solid #dfe6ec;
 
 /* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
 
 @import "~element-ui/packages/theme-chalk/src/index";
 

src/components/Breadcrumb/index.vue

@@ -1,8 +1,13 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          :class="index == levelList.length - 1 ? 'lastItem' : ''"
+          >{{ item.meta.title }}</span
+        >
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -13,62 +18,72 @@
 export default {
   data() {
     return {
-      levelList: null
-    }
+      levelList: null,
+    };
   },
   watch: {
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
+      if (route.path.startsWith("/redirect/")) {
+        return;
       }
-      this.getBreadcrumb()
-    }
+      this.getBreadcrumb();
+    },
   },
   created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
+      let matched = this.$route.matched.filter(
+        (item) => item.meta && item.meta.title
+      );
+      const first = matched[0];
 
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
-      }
+      // if (!this.isDashboard(first)) {
+      //   matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched);
+      // }
 
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+      console.log(this.levelList, "aaa111");
+      this.levelList = matched.filter(
+        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
     },
     isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name;
       if (!name) {
-        return false
+        return false;
       }
-      return name.trim() === 'Index'
+      return name.trim() === "Index";
     },
     handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item;
       if (redirect) {
-        this.$router.push(redirect)
-        return
+        this.$router.push(redirect);
+        return;
       }
-      this.$router.push(path)
-    }
-  }
-}
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
-  display: inline-block;
+  height: 100%;
+  display: flex;
+  align-items: center;
   font-size: 14px;
-  line-height: 50px;
+
   margin-left: 8px;
 
   .no-redirect {
-    color: #97a8be;
+    color: #000;
     cursor: text;
   }
 }
+.lastItem {
+  font-weight: 600;
+}
 </style>

src/layout/components/AppMain.vue

@@ -34,7 +34,7 @@ export default {
   position: relative;
 
   padding: 10px 10px 0 10px;
-  background: #f6f7f9;
+  // background: #f6f7f9;
 }
 
 .fixed-header + .app-main {

src/layout/components/FixedHeader/components/MenuItem.vue

@@ -1,95 +1,24 @@
 <template>
-  <div class="menu-item-container">
+  <section class="menu-item-container">
     <div
       class="menu-item"
-      v-for="(router, routerIndex) in topMenus"
+      v-for="(item, routerIndex) in topMenus"
       :key="routerIndex"
     >
-      <el-dropdown
-        v-if="router.children && router.children.length > 0"
-        class="menu-item-box"
-        trigger="hover"
-      >
-        <div
-          class="item-title"
-          :class="handleActive(router.path) ? 'dropdownActive' : ''"
-        >
-          {{ router.meta.title }}
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link
-            active-class="dropdownActive"
-            :to="router.path + '/' + item.path"
-            v-for="(item, itemIndex) in router.children"
-            :key="itemIndex"
-          >
-            <el-dropdown-item>
-              <el-dropdown
-                v-if="item.children && item.children.length > 0"
-                class="menu-item-box"
-                trigger="hover"
-              >
-                <div
-                  class="item-title"
-                  :class="
-                    handleActive(router.path + '/' + item.path)
-                      ? 'dropdownActive'
-                      : ''
-                  "
-                >
-                  <svg-icon
-                    v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
-                    :icon-class="item.meta.icon"
-                  />
-                  {{ item.meta.title }}
-                </div>
-                <router-link
-                  active-class="dropdownActive"
-                  v-for="(item2, itemIndex2) in item.children"
-                  :key="itemIndex2"
-                >
-                  <el-dropdown-item>
-                    <svg-icon
-                      v-if="
-                        item2.meta && item2.meta.icon && item2.meta.icon !== '#'
-                      "
-                      :icon-class="item2.meta.icon"
-                    />
-                    <span style="margin-left: 6px">{{ item2.meta.title }}</span>
-                  </el-dropdown-item>
-                </router-link>
-              </el-dropdown>
-
-              <div v-else>
-                <svg-icon
-                  v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
-                  :icon-class="item.meta.icon"
-                />
-                <span style="margin-left: 6px">{{ item.meta.title }}</span>
-              </div>
-            </el-dropdown-item>
-          </router-link>
-        </el-dropdown-menu>
-      </el-dropdown>
-
-      <router-link
-        v-else
-        tag="div"
-        class="item-title"
-        active-class="dropdownActive"
-        :to="router.path"
-      >
-        <span>{{ router.meta.title }}</span>
-      </router-link>
+      <item :router="item"></item>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
+import item from "./item.vue";
 export default {
   data() {
     return {};
   },
+  components: {
+    item,
+  },
   methods: {
     handleActive(path) {
       return this.$route.path.includes(path);
@@ -124,24 +53,5 @@ export default {
 .menu-item-container {
   display: flex;
   align-items: center;
-
-  .item-title {
-    padding: 3px 10px;
-    font-size: 18px;
-    cursor: pointer;
-    border-radius: 24px;
-    margin: 0 5px;
-    color: #fff;
-    border: 1px solid transparent;
-  }
-}
-
-.dropdownActive {
-  border-color: #fff !important;
-  background: hsla(0, 0%, 100%, 0.15);
-}
-
-.dropdownActive li {
-  color: red;
 }
 </style>

src/layout/components/FixedHeader/components/item.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <el-dropdown v-if="router.children" class="menu-item-box" trigger="hover">
+      <div
+        class="item-title"
+        :class="handleActive(router.path) ? 'dropdownActive' : ''"
+      >
+        {{ router.meta.title }}
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="(item, itemIndex) in router.children"
+          :key="itemIndex"
+        >
+          <div
+            v-if="!item.children"
+            @click="handelePath(router.path, item.path)"
+            :class="handleActive(item.path) ? 'avtiveRouter' : ''"
+          >
+            <svg-icon
+              v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+              :icon-class="item.meta.icon"
+            />
+            <span style="margin-left: 6px">{{ item.meta.title }} </span>
+          </div>
+          <div v-else>
+            <svg-icon
+              v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
+              :icon-class="item.meta.icon"
+            />
+            <span style="margin-left: 6px">{{ item.meta.title }} </span>
+            <div
+              class="recursion"
+              v-for="(item2, item2Index) in item.children"
+              :key="item2Index"
+            >
+              <item
+                :router="item2"
+                :parentRouter="router.path + '/' + item.path"
+              ></item>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+
+    <div
+      v-else
+      class="item-title"
+      @click="handelePath(parentRouter, router.path)"
+      :class="handleActive(router.path) ? 'avtiveRouter' : ''"
+    >
+      <span>{{ router.meta.title }} </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import item from "./item.vue";
+export default {
+  name: "item",
+
+  props: {
+    parentLevel: {
+      type: String,
+      default: "",
+    },
+    mainStyle: {
+      type: Object,
+      default: () => {},
+    },
+    parentRouter: {
+      type: "",
+    },
+    router: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {
+    item,
+  },
+  data() {
+    return {
+      maxRouter: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    handelePath(parent, children) {
+      console.log(parent, children);
+      this.$router.push(`${parent}/${children}`);
+    },
+    handleActive(path) {
+      return this.$route.path.includes(path);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/element-variables.scss";
+.item-title {
+  padding: 3px 10px;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 24px;
+  margin: 0 5px;
+  color: #fff;
+  border: 1px solid transparent;
+}
+
+.dropdownActive {
+  border-color: #fff !important;
+  background: hsla(0, 0%, 100%, 0.15);
+}
+
+.recursion {
+  .item-title {
+    list-style: none;
+    padding: 0 20px;
+    margin: 0;
+    font-size: 14px;
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+    border-radius: 0;
+  }
+  .item-title:hover {
+    // background-color: #ecf5ff;
+    color: $--color-primary !important;
+  }
+}
+.avtiveRouter {
+  color: $--color-primary !important;
+  //   background: $--color-primary !important;
+}
+</style>

src/layout/components/FixedHeader/index.vue

@@ -33,10 +33,14 @@
         </el-dropdown>
       </div>
     </div>
+    <div class="crumbs-box">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    </div>
   </div>
 </template>
 
 <script>
+import Breadcrumb from "@/components/Breadcrumb";
 import { mapGetters } from "vuex";
 import variables from "@/assets/styles/variables.scss";
 import MenuItem from "./components/MenuItem.vue";
@@ -48,6 +52,7 @@ export default {
   },
   components: {
     MenuItem,
+    Breadcrumb,
   },
   computed: {
     ...mapGetters(["avatar", "name", "sidebarRouters"]),
@@ -121,5 +126,11 @@ export default {
       }
     }
   }
+  .crumbs-box {
+    padding: 0 10px;
+    height: calc(100% - 64px);
+    // border: 1px solid red;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
 }
 </style>