feat: 导航混合

Former-commit-id: 5942884a809813c87b6e49cefd4343aa07169b91

src/layout/components/Sidebar/LeftMenu.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useRoute } from "vue-router";
+import SidebarItem from "./SidebarItem.vue";
+import { useSettingsStore } from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
+import variables from "@/styles/variables.module.scss";
+
+const settingsStore = useSettingsStore();
+const appStore = useAppStore();
+const currRoute = useRoute();
+const layout = computed(() => settingsStore.layout);
+const props = defineProps({
+  menuList: {
+    required: true,
+    default: () => {
+      return [];
+    },
+    type: Array<any>,
+  },
+});
+</script>
+<template>
+  <el-menu
+    :default-active="layout === 'top' ? '-' : currRoute.path"
+    :collapse="!appStore.sidebar.opened"
+    :background-color="variables.menuBg"
+    :text-color="variables.menuText"
+    :active-text-color="variables.menuActiveText"
+    :unique-opened="false"
+    :collapse-transition="false"
+    :mode="layout === 'top' ? 'horizontal' : 'vertical'"
+  >
+    <sidebar-item
+      v-for="route in menuList"
+      :key="route.path"
+      :item="route"
+      :base-path="route.path"
+      :is-collapse="!appStore.sidebar.opened"
+    />
+  </el-menu>
+</template>