From a5b5c05424c1528894d80d2a8b7e8522237270d6 Mon Sep 17 00:00:00 2001
From: qinzhenpen <qzp1807@126.com>
Date: Fri, 16 Oct 2026 10:10:47 +0800
Subject: [PATCH] =?UTF-8?q?style(sidebar):=20=E5=AD=A6=E7=94=9F=E7=AB=AF?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=9B=BE=E6=A0=87=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BA=E5=B1=82=E7=BA=A7=E5=BA=8F=E5=8F=B7=E5=BE=BD=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

老师要求去掉图标，学生端侧边栏改用层级序号：
- 有 children 的分组父级编号 1/2/3…，子项 N.M…（与 currentCourseNav 渲染顺序实时对应）
- 直跳工具项（AI 智能助手）不编号，保持纯文字
- 新增 studentNavNumberMap computed 与 .student-menu-index 徽标样式（含 active 高亮、折叠轨道居中）
---
 src/assets/styles/sidebar.scss          | 49 +++++++++++++++++++++++++
 src/layout/components/Sidebar/index.vue | 37 +++++++++++++------
 2 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index b293d44..e73ac3c 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -1405,6 +1405,50 @@
     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，
      压过旧 .studentLayout:has(.student-training-shell) 蓝色玻璃 hover */
   .sidebar-container.is-student-nav .course-sidebar-toggle {
@@ -1436,6 +1480,11 @@
       margin-right: 0;
     }
 
+    /* 折叠轨道模式：序号徽标同样居中（替代图标） */
+    .student-menu-index {
+      margin-right: 0;
+    }
+
     /* 恢复折叠模式下 sub-menu title 里的 icon 尺寸 ——
        Element Plus 默认把 .hideSidebar 里 sub-menu title 的 <i> 也压成 0 宽高，
        但分组标题在折叠轨道模式下仍需显示图标 */
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index cbb635a..ea0dde7 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -41,24 +41,20 @@
           @select="handleStudentMenuSelect"
         >
           <template v-for="section in currentCourseNav" :key="section.path || section.title">
-            <!-- 一级直跳项 -->
+            <!-- 一级直跳项（工具类，无子项，不分配层级序号） -->
             <el-menu-item v-if="section.path" :index="section.path">
-              <el-icon class="student-menu-icon">
-                <component :is="getStudentNavIcon(section)" />
-              </el-icon>
+              <span v-if="studentNavNumberMap[section.path]" class="student-menu-index">{{ studentNavNumberMap[section.path] }}</span>
               <template #title>{{ getCourseNavTitle(section) }}</template>
             </el-menu-item>
 
-            <!-- 可折叠分组 -->
+            <!-- 可折叠分组：父级序号 1/2/3…，子级 1.1/1.2… -->
             <el-sub-menu
               v-else
               :index="getStudentGroupKey(section)"
               popper-class="student-menu-popper"
             >
               <template #title>
-                <el-icon class="student-menu-icon">
-                  <component :is="getStudentNavIcon(section)" />
-                </el-icon>
+                <span class="student-menu-index">{{ studentNavNumberMap[getStudentGroupKey(section)] }}</span>
                 <span>{{ getCourseNavTitle(section) }}</span>
               </template>
               <el-menu-item
@@ -67,9 +63,7 @@
                 :index="child.path || getStudentGroupKey(section) + '-' + child.title"
                 :disabled="!child.path"
               >
-                <el-icon class="student-menu-icon">
-                  <component :is="getStudentNavIcon(child)" />
-                </el-icon>
+                <span class="student-menu-index student-menu-index--child">{{ studentNavNumberMap[child.path || (getStudentGroupKey(section) + '-' + child.title)] }}</span>
                 <template #title>{{ getCourseNavTitle(child) }}</template>
               </el-menu-item>
             </el-sub-menu>
@@ -549,6 +543,27 @@ const studentDefaultOpens = computed(() =>
     .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 展开
 const studentMenuKey = ref(0);
 function bumpStudentMenu() {