style(sidebar): 学生端侧边栏图标替换为层级序号徽标

老师要求去掉图标,学生端侧边栏改用层级序号:
- 有 children 的分组父级编号 1/2/3…,子项 N.M…(与 currentCourseNav 渲染顺序实时对应)
- 直跳工具项(AI 智能助手)不编号,保持纯文字
- 新增 studentNavNumberMap computed 与 .student-menu-index 徽标样式(含 active 高亮、折叠轨道居中)
dev-QQq
qinzhenpen 7 hours ago
parent 332d33bd32
commit a5b5c05424

@ -1405,6 +1405,50 @@
font-size: 16px; font-size: 16px;
} }
/* 层级序号徽标:替换图标,父级整数序号 + 子级 N.M */
.sidebar-container.is-student-nav .student-menu-index {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 22px;
height: 22px;
margin-right: 8px;
padding: 0 6px;
border-radius: 6px;
background: #eef2ff;
color: #4338ca;
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* 子级序号:浅灰底,与父级(蓝底)拉开层级 */
.sidebar-container.is-student-nav .student-menu-index--child {
min-width: 26px;
background: #f3f4f6;
color: #6b7280;
}
/* 当前路由高亮:父级直跳项激活徽标转实蓝白字 */
.sidebar-container.is-student-nav .student-course-menu > li.el-menu-item.is-active .student-menu-index {
background: #2563eb;
color: #ffffff;
}
/* 分组标题含激活子项:徽标转浅蓝深字(与标题蓝字呼应) */
.sidebar-container.is-student-nav .student-course-menu > li.el-sub-menu.is-active > .el-sub-menu__title .student-menu-index {
background: #dbeafe;
color: #1d4ed8;
}
/* 当前子项激活:徽标转浅蓝深字 */
.sidebar-container.is-student-nav .student-course-menu .el-menu-item.is-active .student-menu-index--child {
background: #dbeafe;
color: #1d4ed8;
}
/* 折叠把手沿用共享块的边缘定位(!important);此处仅覆写 hover, /* 折叠把手沿用共享块的边缘定位(!important);此处仅覆写 hover,
压过旧 .studentLayout:has(.student-training-shell) 蓝色玻璃 hover */ 压过旧 .studentLayout:has(.student-training-shell) 蓝色玻璃 hover */
.sidebar-container.is-student-nav .course-sidebar-toggle { .sidebar-container.is-student-nav .course-sidebar-toggle {
@ -1436,6 +1480,11 @@
margin-right: 0; margin-right: 0;
} }
/* 折叠轨道模式:序号徽标同样居中(替代图标) */
.student-menu-index {
margin-right: 0;
}
/* 恢复折叠模式下 sub-menu title 里的 icon 尺寸 —— /* 恢复折叠模式下 sub-menu title 里的 icon 尺寸 ——
Element Plus 默认把 .hideSidebar 里 sub-menu title 的 <i> 也压成 0 宽高, Element Plus 默认把 .hideSidebar 里 sub-menu title 的 <i> 也压成 0 宽高,
但分组标题在折叠轨道模式下仍需显示图标 */ 但分组标题在折叠轨道模式下仍需显示图标 */

@ -41,24 +41,20 @@
@select="handleStudentMenuSelect" @select="handleStudentMenuSelect"
> >
<template v-for="section in currentCourseNav" :key="section.path || section.title"> <template v-for="section in currentCourseNav" :key="section.path || section.title">
<!-- 一级直跳项 --> <!-- 一级直跳项(工具类,无子项,不分配层级序号) -->
<el-menu-item v-if="section.path" :index="section.path"> <el-menu-item v-if="section.path" :index="section.path">
<el-icon class="student-menu-icon"> <span v-if="studentNavNumberMap[section.path]" class="student-menu-index">{{ studentNavNumberMap[section.path] }}</span>
<component :is="getStudentNavIcon(section)" />
</el-icon>
<template #title>{{ getCourseNavTitle(section) }}</template> <template #title>{{ getCourseNavTitle(section) }}</template>
</el-menu-item> </el-menu-item>
<!-- 可折叠分组 --> <!-- 可折叠分组:父级序号 1/2/3…,子级 1.1/1.2… -->
<el-sub-menu <el-sub-menu
v-else v-else
:index="getStudentGroupKey(section)" :index="getStudentGroupKey(section)"
popper-class="student-menu-popper" popper-class="student-menu-popper"
> >
<template #title> <template #title>
<el-icon class="student-menu-icon"> <span class="student-menu-index">{{ studentNavNumberMap[getStudentGroupKey(section)] }}</span>
<component :is="getStudentNavIcon(section)" />
</el-icon>
<span>{{ getCourseNavTitle(section) }}</span> <span>{{ getCourseNavTitle(section) }}</span>
</template> </template>
<el-menu-item <el-menu-item
@ -67,9 +63,7 @@
:index="child.path || getStudentGroupKey(section) + '-' + child.title" :index="child.path || getStudentGroupKey(section) + '-' + child.title"
:disabled="!child.path" :disabled="!child.path"
> >
<el-icon class="student-menu-icon"> <span class="student-menu-index student-menu-index--child">{{ studentNavNumberMap[child.path || (getStudentGroupKey(section) + '-' + child.title)] }}</span>
<component :is="getStudentNavIcon(child)" />
</el-icon>
<template #title>{{ getCourseNavTitle(child) }}</template> <template #title>{{ getCourseNavTitle(child) }}</template>
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
@ -549,6 +543,27 @@ const studentDefaultOpens = computed(() =>
.map((section) => getStudentGroupKey(section)) .map((section) => getStudentGroupKey(section))
); );
// 学生端侧边栏层级序号:分组父级 1/2/3…,子项 1.1/1.2…。
// 直跳项(无 children,如「AI 智能助手」)视为工具类,不分配序号。
// 仅学生角色生效;教师端仍走手写导航(保留图标)。
const studentNavNumberMap = computed(() => {
const map = {};
if (!isStudentRole.value) return map;
let groupCounter = 0;
currentCourseNav.value.forEach((section) => {
if (!section.children?.length) return; // 直跳工具项不编号
groupCounter += 1;
const top = String(groupCounter);
const sectionKey = getStudentGroupKey(section);
map[sectionKey] = top;
section.children.forEach((child, cIdx) => {
const childKey = child.path || `${sectionKey}-${child.title}`;
map[childKey] = `${top}.${cIdx + 1}`;
});
});
return map;
});
// 异步加载分组后重建菜单,使新分组按 default-openeds 展开 // 异步加载分组后重建菜单,使新分组按 default-openeds 展开
const studentMenuKey = ref(0); const studentMenuKey = ref(0);
function bumpStudentMenu() { function bumpStudentMenu() {

Loading…
Cancel
Save