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>

src/layout/components/Sidebar/TopMenu.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { usePermissionStore } from "@/store/modules/permission";
+import variables from "@/styles/variables.module.scss";
+import { useAppStore } from "@/store/modules/app";
+import { translateRouteTitleI18n } from "@/utils/i18n";
+const appStore = useAppStore();
+const tPath = ref();
+const selectMenu = (index: string) => {
+  appStore.changeTopActive(index);
+};
+const permissionStore = usePermissionStore();
+const topMenu = ref<any[]>([]);
+onMounted(() => {
+  topMenu.value = permissionStore.routes.filter((el) => !el.meta?.hidden);
+});
+</script>
+<template>
+  <el-scrollbar>
+    <el-menu
+      mode="horizontal"
+      class="el-menu-demo"
+      :default-active="tPath"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
+      @select="selectMenu"
+    >
+      <el-menu-item
+        v-for="route in topMenu"
+        :key="route.path"
+        :index="route.path"
+      >
+        <template #title>
+          <svg-icon
+            v-if="route.meta && route.meta.icon"
+            :icon-class="route.meta.icon"
+          />
+          <span v-if="route.meta && route.meta.title">{{
+            translateRouteTitleI18n(route.meta.title)
+          }}</span>
+        </template>
+      </el-menu-item>
+      <!-- <sidebar-item
+        v-for="route in topMenu"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+        :is-collapse="false"
+      /> -->
+    </el-menu>
+  </el-scrollbar>
+</template>

src/layout/components/Sidebar/index.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-import SidebarItem from "./SidebarItem.vue";
+import TopMenu from "./TopMenu.vue";
+import LeftMenu from "./LeftMenu.vue";
 import Logo from "./Logo.vue";
-
 import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
 import { useAppStore } from "@/store/modules/app";
 import { storeToRefs } from "pinia";
-import variables from "@/styles/variables.module.scss";
 
 const settingsStore = useSettingsStore();
 const permissionStore = usePermissionStore();
 const appStore = useAppStore();
-const currRoute = useRoute();
 const { sidebarLogo } = storeToRefs(settingsStore);
 const layout = computed(() => settingsStore.layout);
 const showContent = ref(true);
@@ -28,41 +25,86 @@ watch(
 </script>
 
 <template>
-  <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
+  <div
+    :class="{ 'has-logo': sidebarLogo }"
+    class="menu-wrap"
+    v-if="layout !== 'mix'"
+  >
     <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
     <el-scrollbar v-if="showContent">
-      <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 permissionStore.routes"
-          :key="route.path"
-          :item="route"
-          :base-path="route.path"
-          :is-collapse="!appStore.sidebar.opened"
-        />
-      </el-menu>
+      <LeftMenu :menu-list="permissionStore.routes" />
     </el-scrollbar>
     <NavRight v-if="layout === 'top'" />
   </div>
+  <template v-else>
+    <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
+      <div class="header">
+        <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+        <TopMenu />
+        <NavRight />
+      </div>
+    </div>
+  </template>
 </template>
 <style lang="scss" scoped>
 :deep(.setting-container) {
   .setting-item {
     color: #fff;
+
     .svg-icon {
-      margin-right: 0px;
+      margin-right: 0;
     }
+
     &:hover {
       color: var(--el-color-primary);
     }
   }
 }
+
+.isMix {
+  .menu-wrap {
+    width: 100% !important;
+    height: 50px;
+    background-color: $menuBg;
+
+    :deep(.header) {
+      display: flex;
+      width: 100%;
+      // 顶部模式全局变量修改
+      --el-menu-item-height: 50px;
+
+      .logo-wrap {
+        width: 210px;
+      }
+
+      .el-menu {
+        background-color: $menuBg;
+
+        .el-menu-item {
+          color: $menuText;
+        }
+      }
+
+      .el-scrollbar {
+        flex: 1;
+        min-width: 0;
+        height: 50px;
+      }
+    }
+  }
+
+  .left-menu {
+    display: inline-block;
+    width: 210px;
+    background-color: $menuBg;
+
+    :deep(.el-menu) {
+      background-color: $menuBg;
+
+      .el-menu-item {
+        color: $menuText;
+      }
+    }
+  }
+}
 </style>