xiaodou-ai-admin/src/layout/components/Sidebar/index.vue

<template>
  <a-row>
    <a-col>
      <a-layout-sider
        :trigger="null"
        v-model:collapsed="collapsed"
        collapsible
        style="background: #fff; height: 95%;"
        breakpoint="lg"
      >
        <a-menu
          :selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <sidebar-item
            :item="route"
            v-for="route in appRouter.router.sider.route"
            :key="route.path"
            :base-path="route.path"
          />
        </a-menu>
      </a-layout-sider>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup >

import { ref, watch } from 'vue'
import { useAppRouter } from '@/store/router'
import SidebarItem from './SidebarItem.vue'
import { useRouter } from 'vue-router'

const appRouter = useAppRouter()
const router = useRouter()

console.log('appRouter.router.sider.route:', appRouter.router.sider.route)

const collapsed = ref<boolean>(false)

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

console.log(selectedKeys2, openKeys)

</script>

<style lang="less" scoped >
/deep/ .ant-layout-sider-children {
  margin-top: -4px;
}
</style>