150 lines
4.4 KiB
Vue
150 lines
4.4 KiB
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 {
|
|
CaretDownOutline,
|
|
} 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);
|
|
import SvgIcon from '@/components/SvgIcon.vue';
|
|
const expandIcon = () => {
|
|
return h(NIcon, null, { default: () => h(CaretDownOutline) })
|
|
}
|
|
|
|
function renderIcon(iconClass: string) {
|
|
return () => h(SvgIcon, { iconClass, width: '16', height: '16' })
|
|
}
|
|
// 后面改成动态的
|
|
const menuOptions: MenuOption[] = [
|
|
{
|
|
label: () =>
|
|
h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: 'home',
|
|
params: {
|
|
lang: 'zh-CN'
|
|
}
|
|
}
|
|
},
|
|
{ default: () => '概览' }
|
|
),
|
|
key: 'default',
|
|
icon: renderIcon('mainproject')
|
|
},
|
|
{
|
|
label: '角色管理',
|
|
key: 'role',
|
|
icon: renderIcon('mainproject'),
|
|
children: [
|
|
{
|
|
label: () => h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: 'roleAuth',
|
|
params: {
|
|
lang: 'zh-CN'
|
|
}
|
|
}
|
|
},
|
|
{ default: () => '权限分配' }
|
|
),
|
|
key: 'role-auth',
|
|
icon: renderIcon('mainproject')
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '系统配置',
|
|
key: 'system',
|
|
icon: renderIcon('mainproject'),
|
|
children: [
|
|
{
|
|
label: () => h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: 'menu',
|
|
params: {
|
|
lang: 'zh-CN'
|
|
}
|
|
}
|
|
},
|
|
{ default: () => '菜单管理' }
|
|
),
|
|
key: 'system-menu',
|
|
icon: renderIcon('mainproject')
|
|
},
|
|
{
|
|
label: () => h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: 'dict',
|
|
params: {
|
|
lang: 'zh-CN'
|
|
}
|
|
}
|
|
},
|
|
{ default: () => '字典配置' }
|
|
),
|
|
key: 'system-dict',
|
|
icon: renderIcon('mainproject')
|
|
},
|
|
{
|
|
label: () => h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: 'globalSys',
|
|
params: {
|
|
lang: 'zh-CN'
|
|
}
|
|
}
|
|
},
|
|
{ default: () => '全局参数' }
|
|
),
|
|
key: 'system-globalSys',
|
|
icon: renderIcon('mainproject')
|
|
}
|
|
]
|
|
},
|
|
];
|
|
</script>
|
|
<style scoped lang='scss'>
|
|
/* 确保菜单项在折叠状态下图标居中 */
|
|
.n-menu-item-content--collapsed {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 添加平滑过渡效果 */
|
|
.n-layout-sider {
|
|
transition: width 0.9s var(--n-bezier);
|
|
height: 100%;
|
|
}
|
|
|
|
/* 调整折叠状态下菜单项的样式 */
|
|
.n-menu .n-menu-item-content--collapsed .n-menu-item-content__icon {
|
|
margin: 0 auto;
|
|
}
|
|
</style> |