accompany_admin_pc/src/views/layout/components/LayoutNav.vue

<template>
    <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="240" :collapsed="!menuApp.isExpaned"
        show-trigger @collapse="menuApp.isExpaned = false" @expand="menuApp.isExpaned = true" :style="{
            '--n-collapsed-width': '64px',
            transition: 'width 0.3s var(--n-bezier)'
        }">
        <n-menu v-model:value="activeKey" :collapsed="!menuApp.isExpaned" :collapsed-width="64"
            :collapsed-icon-size="22" :options="menuOptions" :expand-icon="expandIcon" :style="{
                '--n-item-icon-margin': '0 auto',
                '--n-item-icon-size': '22px'
            }" />
    </n-layout-sider>
</template>

<script setup lang='ts'>
import {
    LogOutOutline as HomeIcon,
    LaptopOutline as WorkIcon,
    CaretDownOutline,
    HomeSharp,
    PersonCircleSharp,
    Layers,
    Settings,
    Menu
} from '@vicons/ionicons5'
import { MenuOption, NIcon } from 'naive-ui';
import { useAppStore } from '@/store/app';
import { storeToRefs } from 'pinia';
import { RouterLink } from 'vue-router';
const appStore = useAppStore();
const activeKey = ref('default');
const { menuApp } = storeToRefs(appStore)
const expandIcon = () => {
    return h(NIcon, null, { default: () => h(CaretDownOutline) })
}

function renderIcon(icon: Component) {
    return () => h(NIcon, null, { default: () => h(icon) })
}
const menuOptions: MenuOption[] = [
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: {
                        name: 'home',
                        params: {
                            lang: 'zh-CN'
                        }
                    }
                },
                { default: () => '概览' }
            ),
        key: 'default',
        icon: renderIcon(HomeSharp)
    },
    {
        label: '角色管理',
        key: 'role',
        icon: renderIcon(PersonCircleSharp),
        children: [
            {
                label: () => h(
                    RouterLink,
                    {
                        to: {
                            name: 'roleAuth',
                            params: {
                                lang: 'zh-CN'
                            }
                        }
                    },
                    { default: () => '权限分配' }
                ),
                key: 'role-auth',
                icon: renderIcon(Layers)
            }
        ]
    },
    {
        label: '系统配置',
        key: 'system',
        icon: renderIcon(Settings),
        children: [
            {
                label: () => h(
                    RouterLink,
                    {
                        to: {
                            name: 'menu',
                            params: {
                                lang: 'zh-CN'
                            }
                        }
                    },
                    { default: () => '菜单管理' }
                ),
                key: 'system',
                icon: renderIcon(Menu)
            }
        ]
    },
];
</script>
<style scoped lang='scss'>
/* 确保菜单项在折叠状态下图标居中 */
.n-menu-item-content--collapsed {
  display: flex;
  justify-content: center;
}

/* 添加平滑过渡效果 */
.n-layout-sider {
  transition: width 0.3s var(--n-bezier);
  height:100%;
}

/* 调整折叠状态下菜单项的样式 */
.n-menu .n-menu-item-content--collapsed .n-menu-item-content__icon {
  margin: 0 auto;
}
</style>