初始化拉取，原文件名：admin-plus-webpack5

library/components/VabMenu/components/VabMenuItem.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+    import { useSettingsStore } from '@/store/modules/settings'
+    import { isExternal } from '@/utils/validate'
+    import { translate } from '@/i18n'
+    import { isHashRouterMode } from '@/config'
+
+    const props = defineProps({
+        itemOrMenu: {
+            type: Object,
+            default() {
+                return null
+            },
+        },
+    })
+
+    const route = useRoute()
+    const router = useRouter()
+
+    const $pub: any = inject('$pub')
+
+    const settingsStore = useSettingsStore()
+    const { device } = storeToRefs(settingsStore)
+    const { foldSideBar } = settingsStore
+
+    const handleLink = () => {
+        const routePath = props.itemOrMenu.path
+        const target = props.itemOrMenu.meta.target
+        if (target === '_blank') {
+            if (isExternal(routePath)) window.open(routePath)
+            else if (route.path !== routePath)
+                isHashRouterMode
+                    ? window.open(`/#${routePath}`)
+                    : window.open(routePath)
+        } else {
+            if (isExternal(routePath)) window.location.href = routePath
+            else if (route.path !== routePath) {
+                if (device.value === 'mobile') foldSideBar()
+                router.push(props.itemOrMenu.path)
+            } else $pub('reload-router-view')
+        }
+    }
+</script>
+
+<template>
+    <el-menu-item :index="itemOrMenu.path" @click="handleLink">
+        <vab-icon
+            v-if="itemOrMenu.meta.icon"
+            :icon="itemOrMenu.meta.icon"
+            :is-custom-svg="itemOrMenu.meta.isCustomSvg"
+            :title="translate(itemOrMenu.meta.title)"
+        />
+        <span :title="translate(itemOrMenu.meta.title)">
+            {{ translate(itemOrMenu.meta.title) }}
+        </span>
+        <el-tag v-if="itemOrMenu.meta.badge" effect="dark" type="danger">
+            {{ itemOrMenu.meta.badge }}
+        </el-tag>
+        <span v-if="itemOrMenu.meta.dot" class="vab-dot vab-dot-error">
+            <span />
+        </span>
+    </el-menu-item>
+</template>
+
+<style lang="scss" scoped>
+    @use 'sass:math';
+    :deep(.el-tag) {
+        position: absolute;
+        right: 20px;
+        height: 16px;
+        padding-right: 4px;
+        padding-left: 4px;
+        // margin-top: #{math.div($base-menu-item-height - 16, 2)};
+        line-height: 16px;
+        border: 0;
+    }
+
+    .vab-dot {
+        position: absolute !important;
+        right: 20px;
+        // margin-top: #{math.div($base-menu-item-height - 6, 2)};
+    }
+</style>

library/components/VabMenu/components/VabSubMenu.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+    import { translate } from '@/i18n'
+    import { useSettingsStore } from '@/store/modules/settings'
+
+    defineProps({
+        itemOrMenu: {
+            type: Object,
+            default() {
+                return null
+            },
+        },
+    })
+
+    const settingsStore: any = useSettingsStore()
+    const { theme }: any = storeToRefs(settingsStore)
+</script>
+
+<template>
+    <el-sub-menu
+        :index="itemOrMenu.path"
+        :teleported="theme.layout != 'horizontal'"
+    >
+        <template #title>
+            <vab-icon
+                v-if="itemOrMenu.meta.icon"
+                :icon="itemOrMenu.meta.icon"
+                :is-custom-svg="itemOrMenu.meta.isCustomSvg"
+                :title="translate(itemOrMenu.meta.title)"
+            />
+            <span :title="translate(itemOrMenu.meta.title)">
+                {{ translate(itemOrMenu.meta.title) }}
+            </span>
+        </template>
+        <slot />
+    </el-sub-menu>
+</template>

library/components/VabMenu/index.vue

@@ -0,0 +1,83 @@
+<template>
+    <component
+        :is="menuComponent"
+        v-if="!item.meta.hidden"
+        :item-or-menu="item"
+    >
+        <template v-if="item.children && item.children.length">
+            <vab-menu
+                v-for="route in item.children"
+                :key="route.path"
+                :item="route"
+            />
+        </template>
+    </component>
+</template>
+
+<script lang="ts">
+    /* 防止偶发性自动导入失败 */
+    import { computed, defineComponent } from 'vue'
+    import { storeToRefs } from 'pinia'
+    import { useSettingsStore } from '@/store/modules/settings'
+
+    const imports = require.context('./components', true, /\.vue$/)
+    const Components: {
+        [key: string]: any
+    } = {}
+    imports.keys().forEach((key) => {
+        Components[key.replace(/(\/|\.|vue)/g, '')] = imports(key).default
+    })
+
+    export default defineComponent({
+        name: 'VabMenu',
+        components: Components,
+        props: {
+            item: {
+                type: Object,
+                required: true,
+            },
+            layout: {
+                type: String,
+                default: '',
+            },
+        },
+        setup(props) {
+            const settingsStore = useSettingsStore()
+            const { collapse } = storeToRefs(settingsStore)
+
+            const menuComponent = computed(() =>
+                props.item.children &&
+                props.item.children.some((_route: any) => {
+                    return _route.meta.hidden !== true
+                })
+                    ? 'VabSubMenu'
+                    : 'VabMenuItem'
+            )
+
+            return {
+                collapse,
+                menuComponent,
+            }
+        },
+    })
+</script>
+
+<style lang="scss" scoped>
+    .vab-menu-children-height {
+        height: 60vh !important;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            width: 0;
+            height: 0;
+        }
+    }
+</style>
+
+<!--由于element-plus
+bug使用teleported=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
+<style lang="scss">
+    .el-popper.is-light {
+        border: 0 !important;
+    }
+</style>