cdTestPlant3/cdTMP/src/layout/components/menu.vue

<script lang="jsx">
import { defineComponent, ref, h, compile, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useAppStore } from "@/store"
import { listenerRouteChange } from "@/utils/route-listener"
import { openWindow, regexUrl } from "@/utils"
import useMenuTree from "./use-menu-tree"

export default defineComponent({
    emit: ["collapse"],
    setup() {
        const appStore = useAppStore()
        const router = useRouter()
        const route = useRoute()
        const { menuTree } = useMenuTree()
        const collapsed = computed({
            get() {
                if (appStore.device === "desktop") return appStore.menuCollapse
                return false
            },
            set(value) {
                appStore.updateSettings({ menuCollapse: value })
            }
        })

        const topMenu = computed(() => appStore.topMenu)
        const openKeys = ref([])
        const selectedKey = ref([])

        const goto = (item) => {
            // Open external link
            if (regexUrl.test(item.path)) {
                openWindow(item.path)
                selectedKey.value = [item.name]
                return
            }
            // Eliminate external link side effects
            const { hideInMenu, activeMenu } = item.meta
            if (route.name === item.name && !hideInMenu && !activeMenu) {
                selectedKey.value = [item.name]
                return
            }
            // Trigger router change
            router.push({
                name: item.name
            })
        }
        const findMenuOpenKeys = (target) => {
            const result = []
            let isFind = false
            const backtrack = (item, keys) => {
                if (item.name === target) {
                    isFind = true
                    result.push(...keys)
                    return
                }
                if (item.children?.length) {
                    item.children.forEach((el) => {
                        backtrack(el, [...keys, el.name])
                    })
                }
            }
            menuTree.value.forEach((el) => {
                if (isFind) return // Performance optimization
                backtrack(el, [el.name])
            })
            return result
        }
        listenerRouteChange((newRoute) => {
            const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta
            if (requiresAuth && (!hideInMenu || activeMenu)) {
                const menuOpenKeys = findMenuOpenKeys(activeMenu || newRoute.name)

                const keySet = new Set([...menuOpenKeys, ...openKeys.value])
                openKeys.value = [...keySet]

                selectedKey.value = [activeMenu || menuOpenKeys[menuOpenKeys.length - 1]]
            }
        }, true)
        const setCollapse = (val) => {
            if (appStore.device === "desktop") appStore.updateSettings({ menuCollapse: val })
        }

        const renderSubMenu = () => {
            function travel(_route, nodes = []) {
                if (_route) {
                    _route.forEach((element) => {
                        // This is demo, modify nodes as needed
                        const icon = element?.meta?.icon ? () => h(compile(`<${element?.meta?.icon}/>`)) : null
                        const node =
                            element?.children && element?.children.length !== 0 ? (
                                <a-sub-menu
                                    key={element?.name}
                                    v-slots={{
                                        icon,
                                        title: () => h(compile(element?.meta?.locale || ""))
                                    }}
                                >
                                    {travel(element?.children)}
                                </a-sub-menu>
                            ) : (
                                <a-menu-item key={element?.name} v-slots={{ icon }} onClick={() => goto(element)}>
                                    {element?.meta?.locale || ""}
                                </a-menu-item>
                            )
                        nodes.push(node)
                    })
                }
                return nodes
            }
            return travel(menuTree.value)
        }

        return () => (
            <a-menu
                mode={topMenu.value ? "horizontal" : "vertical"}
                v-model:collapsed={collapsed.value}
                v-model:open-keys={openKeys.value}
                show-collapse-button={appStore.device !== "mobile"}
                auto-open={false}
                selected-keys={selectedKey.value}
                auto-open-selected={true}
                level-indent={34}
                style="height: 100%;width:100%;"
                onCollapse={setCollapse}
            >
                {renderSubMenu()}
            </a-menu>
        )
    }
})
</script>

<style lang="less" scoped>
:deep(.arco-menu-inner) {
    .arco-menu-inline-header {
        display: flex;
        align-items: center;
    }
    .arco-icon {
        &:not(.arco-icon-down) {
            font-size: 18px;
        }
    }
}
</style>