admin-govern/src/views/auth/menu/index.vue

<template>
    <div class='default-main' style='display: flex' v-loading='loading'>
        <Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
        <Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
    </div>
</template>
<script setup lang='ts'>
import { functionTree } from '@/api/user-boot/function'
import Menu from './menu.vue'
import Api from './api.vue'
import { provide, reactive, ref } from 'vue'

defineOptions({
    name: 'auth/menu'
})
const menuData = ref<any[]>([])
const selectedId = ref('')
const loading = ref(true)
const select = (id: string) => {
    selectedId.value = id
}
const filterData = (arr: any[]) => {
    return arr.filter((item: any) => {
        if (item.children.length) {
            item.children = filterData(item.children)
        }
        return item.type === 0
    })
}
const init = () => {
    loading.value = true
    functionTree().then(res => {
        menuData.value = filterData(res.data)
        loading.value = false
    })
}
init()
</script>