xiaodou-ai-admin/src/layout/sider.vue

<template>
  <a-row>
    <a-col>
      <a-layout-sider
            :trigger="null"
            v-model:collapsed="collapsed"
            collapsible
            style="background: #fff; height: 95%;"
            breakpoint="lg"
            @collapse="onCollapse"
            @breakpoint="onBreakpoint"
        >
         <a-menu
            :selectedKeys="selectedKeys2"
            v-model:openKeys="openKeys"
            mode="inline"
            :style="{ height: '100%', borderRight: 0 }"
            >

            <template v-for="item in appRouter.router.sider.route" :key="item.path">
              <a-menu-item v-if="!item.children"  :key="item.path"  @click="changeRoute(item)" >
                <user-outlined />
                <span>{{item.name}}</span>
              </a-menu-item>

              <a-sub-menu  v-else >
                <template #title>
                  <user-outlined />
                  <span>
                    {{item.name}}
                  </span>
                </template>
                <a-menu-item @click="changeRoute(_)" v-for="_ in item.children" :key="_.path" >
                  <user-outlined />{{_.name}}
                </a-menu-item>
              </a-sub-menu>
            </template>
          </a-menu>
        </a-layout-sider>
        <div class="control" >
          <menu-fold-outlined @click="collapsed = true" v-if="!collapsed" style="font-size: 26px;cursor: pointer;" />
          <menu-unfold-outlined  @click="collapsed = false" v-else style="font-size: 26px;cursor: pointer;" />
        </div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup  >
import { ref } from 'vue'
import RootRouter from '@/router/index'
import { useAppRouter } from '@/store/router'
import { useEmitter } from '@/hooks/index'
import { Emitter } from '@/enum/emitter'
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from '@ant-design/icons-vue'
const emitter = useEmitter()
const appRouter = useAppRouter()

console.log(appRouter)

const onCollapse = () => {}
const onBreakpoint = () => {}

const collapsed = ref<boolean>(false)

const selectedKeys2 = ref<string[]>([appRouter.router.sider!.selectPath])
const openKeys = ref<string[]>(appRouter.router.sider!.openKeys)

emitter.on(Emitter.NAVBAR, () => {
  selectedKeys2.value = [appRouter.router.sider!.selectPath]
  openKeys.value = appRouter.router.sider!.openKeys
})

const changeRoute = (route: Router.RoutesProps) => {
  RootRouter.push(route.path)
}

const hasOneShowingChild = (children = [], parent) => {
  const showingChildren = children.filter(item => {
    if (item.hidden) {
      return false
    } else {
      return true
    }
  })

  if (showingChildren.length === 1) {
    return true
  }

  if (showingChildren.length === 0) {
    return true
  }

  return false
}

</script>

<style lang="less" scoped >
.control {
  width: 100%;
  height: 5%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .ant-layout-sider-children {
  margin-top: -4px;
}
</style>