初始版本，目前线上可用

frontEnd/src/layout/menue.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="menue">
+    <ul class="menue-list">
+      <li v-for="item in props.menueData">
+        <div
+          class="menue-list-item"
+          :class="{ 'parent-item': item.children?.length }"
+          @click="onRowClick(item)">
+          <span class="list-border-left"></span>
+          <span>{{ item.meta?.describe || item.name }}</span>
+        </div>
+        <menueComponent
+          :menueData="item.children"
+          v-if="item.children?.length"
+          class="children-menue">
+        </menueComponent>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import menueComponent from "./menue.vue";
+import { RouteRecordRaw } from "vue-router";
+import { globalState } from "@/store/index";
+import router from "@/routers/index";
+const props = defineProps({
+  menueData: Array<RouteRecordRaw>,
+});
+const globalStateStore = globalState();
+
+function onRowClick(row: RouteRecordRaw) {
+  if (!row.children || !row.children.length) {
+    globalStateStore.setSelectMenue(row);
+    globalStateStore.setLoadingShow(true);
+    router.push(row.path);
+    setTimeout(() => {
+      globalStateStore.setLoadingShow(false);
+    }, 1000);
+  } else {
+    
+  }
+}
+</script>
+<style lang="scss" scoped>
+.parent-list {
+  padding: 5px 10px;
+  position: relative;
+  box-shadow: none;
+  .list-border-left {
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    height: 0;
+    border-left: 4px solid #66cccc;
+    border-radius: 15px;
+    transition: all 0.3s;
+    transform: translateY(-50%);
+  }
+  &:hover .list-border-left {
+    height: 70%;
+  }
+}
+.menue-list {
+  width: 100%;
+  > li > .menue-list-item {
+    padding: 4px 15px;
+    width: 100%;
+    font-size: 16px;
+    transition: all 0.4s;
+    position: relative;
+    &:hover {
+      background-color: #99cc99;
+      // padding-top: 10px;
+      // padding-bottom: 10px;
+    }
+  }
+}
+.children-menue > .menue-list {
+  padding-left: 12px;
+  .menue-list-item {
+    font-size: 13px;
+  }
+}
+.meunue-active {
+  background-color: #99cc99;
+}
+.parent-item:hover {
+  background-color: transparent !important;
+}
+</style>