refactor(ui): 重构侧边栏导航结构并更新组件配置

- 移除嵌套子菜单结构,简化为平铺式菜单项
- 添加首页路由导航项,优化导航体验
- 更新 .gitignore 文件,忽略 package-lock.json
- 注释掉 AboutView 中的动态按钮渲染逻辑
- 在组件声明文件中添加 ElSubItem 组件类型定义
- 调整侧边栏样式,固定宽度为 200px 并优化高度计算
This commit is contained in:
2026-04-23 17:58:27 +08:00
parent 4851307392
commit f216eabb94
4 changed files with 19 additions and 32 deletions
@@ -17,30 +17,12 @@ const iconComponent = ref("location")
:collapse="isCollapse"
class="el-menu-vertical-demo"
router>
<el-sub-menu index="1">
<template #title>
<el-icon>
<component :is="iconComponent"></component>
</el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">
<el-icon>
<location/>
</el-icon>
item one
</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="1" route="index">
<el-icon>
<Menu/>
</el-icon>
<span>首页</span>
</el-menu-item>
<el-menu-item index="2" route="about">
<el-icon>
<Menu/>
@@ -66,10 +48,9 @@ const iconComponent = ref("location")
<style scoped lang="scss">
.el-aside {
width: auto;
width: 200px;
}
:deep(.el-scrollbar__wrap) {
max-height: calc(100vh - 60px);
:deep(.el-menu.el-menu--vertical) {
min-height: calc(100vh - 60px);
}
</style>
+6 -3
View File
@@ -37,9 +37,12 @@ const getThirdLevelOptions = () => {
<el-main>
<el-card shadow="never">
<template #default>
<div v-for="(v,i) in getSecondLevelOptions()">
<div>{{i}}</div>
<el-button v-for="(v2,i2) in v" :key="i2">{{ v2 }}</el-button>
<!-- <div v-for="(v,i) in getSecondLevelOptions()">-->
<!-- <div>{{i}}</div>-->
<!-- <el-button v-for="(v2,i2) in v" :key="i2">{{ v2 }}</el-button>-->
<!-- </div>-->
<div>
<el-button v-for="(v,i) in aa" :key="i">{{ i }}</el-button>
</div>
</template>
<template #footer>