提交代码

src/layout/components/SideBar/SideBarMenu.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-menu
+    class="el-menu-vertical-demo"
+    :collapse="!$store.getters.sidebarOpened"
+    :default-active="activeMenu"
+    :unique-opened="true"
+    background-color="rgba(0, 0, 0, 0)"
+    :text-color="$store.getters.cssVar.menuText"
+    :active-text-color="$store.getters.cssVar.menuActiveText"
+    router
+  >
+    <SideBarItem
+      v-for="item in routes"
+      :key="item.path"
+      :route="item"
+    ></SideBarItem>
+  </el-menu>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useStore } from "vuex";
+import { filterRoutes, generateMenus } from "@/utils/route";
+import SideBarItem from "./SideBarItem.vue";
+const store = useStore();
+const router = useRouter();
+const routes = computed(() => {
+  const fRoutes = filterRoutes(router.getRoutes());
+  return generateMenus(fRoutes);
+});
+if (!store.getters.token) {
+  router.push("/login");
+}
+if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
+  store.commit("user/setIsReady", {});
+  setTimeout(() => {
+    router.go(0);
+  }, 200);
+}
+//默认激活项
+const route = useRoute();
+const activeMenu = computed(() => {
+  const { path } = route;
+  return path;
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-menu-item {
+  height: 48px;
+}
+::v-deep .el-sub-menu__title {
+  height: 48px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(20, 46, 78);
+}
+::v-deep .el-menu-item.is-active {
+  background-image: linear-gradient(to right,#2356d4 0% ,#8efbde 100%);
+  margin: 0 14px;
+  border-radius: 4px;
+}
+::v-deep .el-sub-menu .el-menu-item {
+  height: 48px;
+  line-height: 48px;
+}
+
+</style>
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 281px;
+  min-height: 400px;
+}
+
+</style>