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
          v-model:selectedKeys="selectedKeys2"
          :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 { onMounted, ref, watch } from 'vue'
import { useAppRouter } from '@/store/router'
import SidebarItem from './SidebarItem.vue'
import { useRouter, useRoute } from 'vue-router'

const appRouter = useAppRouter()
const route = useRoute()

const collapsed = ref<boolean>(false)

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

// 如果是产品类型这种 需要找到父节点 设置openKeys
// 刷新后也需要打开openKeys

onMounted(() => {
  selectedKeys2.value = [route.path]
})
</script>

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