chore：更换到主分支

src/layout/components/sidebar/Link.vue

@@ -0,0 +1,30 @@
+<template>
+  <component :is="type" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Link",
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const linkProps = (to) => {
+      return {
+        to: to,
+      };
+    };
+    return {
+      type: "router-link",
+      linkProps,
+    };
+  },
+});
+</script>

src/layout/components/sidebar/SidebarItem.vue

@@ -0,0 +1,101 @@
+<template>
+  <div v-if="!item.hidden">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.alwaysShow
+      "
+    >
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <i :class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+          <template #title>
+            <span>{{ $t(onlyOneChild.meta.title) }}</span>
+          </template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu
+      v-else
+      ref="subMenu"
+      :index="resolvePath(item.path)"
+      popper-append-to-body
+    >
+      <template #title>
+        <i :class="item.meta.icon"></i>
+        <span>{{ $t(item.meta.title) }}</span>
+      </template>
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script lang="ts">
+import path from "path";
+import AppLink from "./Link.vue";
+import { defineComponent, PropType, ref } from "vue";
+import { RouteRecordRaw } from "vue-router";
+export default defineComponent({
+  name: "SidebarItem",
+  components: { AppLink },
+  props: {
+    item: {
+      type: Object as PropType<RouteRecordRaw>,
+      required: true,
+    },
+    isNest: {
+      type: Boolean,
+      default: false,
+    },
+    basePath: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props) {
+    const onlyOneChild = ref<RouteRecordRaw>({} as any);
+
+    function hasOneShowingChild(
+      children: RouteRecordRaw[] = [],
+      parent: RouteRecordRaw
+    ) {
+      const showingChildren = children.filter((item) => {
+        if (item.hidden) {
+          return false;
+        } else {
+          onlyOneChild.value = item;
+          return true;
+        }
+      });
+
+      if (showingChildren.length === 1) {
+        return true;
+      }
+
+      if (showingChildren.length === 0) {
+        onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
+        return true;
+      }
+      return false;
+    }
+
+    const resolvePath = (routePath: string) => {
+      return path.resolve(props.basePath, routePath);
+    };
+
+    return { hasOneShowingChild, resolvePath, onlyOneChild };
+  },
+});
+</script>

src/layout/components/sidebar/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-menu
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      :unique-opened="false"
+      active-text-color="#409EFF"
+      :collapse-transition="false"
+      mode="vertical"
+    >
+      <sidebar-item
+        v-for="route in routes"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useStore } from "vuex";
+import SidebarItem from "./SidebarItem.vue";
+import { algorithm } from "../../../utils/algorithm";
+
+export default defineComponent({
+  name: "sidebar",
+  components: { SidebarItem },
+  setup() {
+    const router = useRouter().options.routes;
+
+    const store = useStore();
+
+    const route = useRoute();
+
+    const activeMenu = computed(() => {
+      const { meta, path } = route;
+      if (meta.activeMenu) {
+        return meta.activeMenu;
+      }
+      return path;
+    });
+
+    return {
+      routes: computed(() => algorithm.increaseIndexes(router)),
+      activeMenu,
+      isCollapse: computed(() => !store.getters.sidebar.opened),
+    };
+  },
+});
+</script>