feat: add horizontal nav (#45)

* feat: add horizontal nav * workflow: update linter.yml * fix: update * fix: update * fix: update * Rename Link.vue to link.vue * Rename SidebarItem.vue to sidebarItem.vue * Rename Logo.vue to logo.vue * Rename AppMain.vue to appMain.vue * Rename Navbar.vue to navbar.vue * fix: update * fix: update * fix: update * workflow: update linter.yml * fix: update * chore: update * workflow: update * fix: update * fix: update * fix: update * perf: 外链功能实现方式改变 * style: update nav style * perf: 优化国际化 * fix: update * fix: update
2025-11-03 13:44:47 +08:00 · 2021-09-29 01:55:56 +08:00
parent e86757e30e
commit fd8de45bff
31 changed files with 1314 additions and 682 deletions
--- a/src/layout/components/sidebar/vertical.vue
+++ b/src/layout/components/sidebar/vertical.vue
@@ -0,0 +1,97 @@
+<template>
+  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
+    <Logo v-if="showLogo === '1'" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        unique-opened
+        router
+        :collapse-transition="false"
+        mode="vertical"
+        @select="menuSelect"
+      >
+        <sidebar-item
+          v-for="route in routeStore.wholeRoutes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts">
+import Logo from "./logo.vue";
+import { emitter } from "/@/utils/mitt";
+import SidebarItem from "./sidebarItem.vue";
+import { algorithm } from "/@/utils/algorithm";
+import { storageLocal } from "/@/utils/storage";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStoreHook } from "/@/store/modules/app";
+import { computed, defineComponent, ref, onBeforeMount } from "vue";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+export default defineComponent({
+  name: "sidebar",
+  components: { SidebarItem, Logo },
+  setup() {
+    const routeStore = usePermissionStoreHook();
+
+    const router = useRouter().options.routes;
+
+    const pureApp = useAppStoreHook();
+
+    const route = useRoute();
+
+    const showLogo = ref(storageLocal.getItem("logoVal") || "1");
+
+    const activeMenu = computed(() => {
+      const { meta, path } = route;
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    });
+
+    const menuSelect = (indexPath: string): void => {
+      let parentPath = "";
+      let parentPathIndex = indexPath.lastIndexOf("/");
+      if (parentPathIndex > 0) {
+        parentPath = indexPath.slice(0, parentPathIndex);
+      }
+      // 找到当前路由的信息
+      // eslint-disable-next-line no-inner-declarations
+      function findCurrentRoute(routes) {
+        return routes.map(item => {
+          if (item.path === indexPath) {
+            // 切换左侧菜单 通知标签页
+            emitter.emit("changLayoutRoute", {
+              indexPath,
+              parentPath
+            });
+          } else {
+            if (item.children) findCurrentRoute(item.children);
+          }
+        });
+      }
+      findCurrentRoute(algorithm.increaseIndexes(router));
+    };
+
+    onBeforeMount(() => {
+      emitter.on("logoChange", key => {
+        showLogo.value = key;
+      });
+    });
+
+    return {
+      activeMenu,
+      isCollapse: computed(() => !pureApp.getSidebarStatus),
+      menuSelect,
+      showLogo,
+      routeStore
+    };
+  }
+});
+</script>