feat: allow teacher sidebar to collapse

src/assets/styles/sidebar.scss

@@ -547,6 +547,71 @@
         min-height: 46px;
         margin-bottom: 10px;
       }
+
+      .teacher-sidebar-toggle {
+        position: absolute;
+        top: 14px;
+        right: 14px;
+        z-index: 8;
+        display: grid;
+        width: 32px;
+        height: 32px;
+        place-items: center;
+        border: 1px solid rgba(89, 218, 255, 0.5);
+        border-radius: 9px;
+        color: #dff8ff;
+        background: rgba(5, 54, 83, 0.84);
+        box-shadow: 0 0 14px rgba(0, 170, 255, 0.15);
+        font-size: 24px;
+        line-height: 1;
+        cursor: pointer;
+        transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+
+        &:hover {
+          border-color: #70e4ff;
+          background: rgba(11, 116, 160, 0.8);
+          transform: translateX(1px);
+        }
+      }
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        width: 64px !important;
+
+        .student-course-nav {
+          padding: 58px 10px 24px;
+        }
+
+        .student-course-heading,
+        .student-course-link {
+          justify-content: center;
+          padding-right: 0;
+          padding-left: 0;
+        }
+
+        .student-course-heading {
+          margin-bottom: 14px;
+        }
+
+        .student-course-link {
+          min-height: 42px;
+          margin-bottom: 10px;
+        }
+
+        .student-course-text {
+          display: none;
+        }
+
+        .teacher-sidebar-toggle {
+          right: 16px;
+          transform: none;
+        }
+      }
+
+      .main-container {
+        margin-left: 64px;
+      }
     }
   }
 }

src/layout/components/Sidebar/index.vue

@@ -7,19 +7,27 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div :class="[{ 'has-logo': showLogo }, { 'student-sidebar-shell': isCourseStyleSidebar }]" :style="sidebarStyle">
+  <div :class="[{ 'has-logo': showLogo }, { 'student-sidebar-shell': isCourseStyleSidebar }, { 'is-collapse': isCollapse }]" :style="sidebarStyle">
     <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <template v-if="isCourseStyleSidebar">
+      <button
+        v-if="isTeacherRole"
+        class="teacher-sidebar-toggle"
+        type="button"
+        :aria-label="isCollapse ? '展开导航' : '收起导航'"
+        :title="isCollapse ? '展开导航' : '收起导航'"
+        @click="toggleTeacherSidebar"
+      >{{ isCollapse ? '›' : '‹' }}</button>
       <el-scrollbar class="theme-dark student-sidebar-scroll" wrap-class="scrollbar-wrapper">
         <nav class="student-course-nav">
           <template v-for="section in currentCourseNav" :key="section.path || section.title">
-            <button v-if="section.path" type="button" :class="['student-course-heading', { active: isStudentNavActive(section) }]" @click="goStudentNav(section.path)">
+            <button v-if="section.path" type="button" :class="['student-course-heading', { active: isStudentNavActive(section) }]" :title="getCourseNavTitle(section)" @click="goStudentNav(section.path)">
               <span class="student-course-icon student-course-icon--heading">
                 <component :is="getStudentNavIcon(section)" />
               </span>
               <span class="student-course-text">{{ getCourseNavTitle(section) }}</span>
             </button>
-            <div v-else class="student-course-heading">
+            <div v-else class="student-course-heading" :title="getCourseNavTitle(section)">
               <span class="student-course-icon student-course-icon--heading">
                 <component :is="getStudentNavIcon(section)" />
               </span>
@@ -27,13 +35,13 @@
             </div>
             <div v-if="section.children?.length" class="student-course-list">
               <template v-for="child in section.children" :key="child.path || child.title">
-                <button v-if="child.path" type="button" :class="['student-course-link', { active: isStudentNavActive(child) }]" @click="goStudentNav(child.path)">
+                <button v-if="child.path" type="button" :class="['student-course-link', { active: isStudentNavActive(child) }]" :title="getCourseNavTitle(child)" @click="goStudentNav(child.path)">
                   <span class="student-course-icon">
                     <component :is="getStudentNavIcon(child)" />
                   </span>
                   <span class="student-course-text">{{ getCourseNavTitle(child) }}</span>
                 </button>
-                <div v-else class="student-course-link disabled">
+                <div v-else class="student-course-link disabled" :title="getCourseNavTitle(child)">
                   <span class="student-course-icon">
                     <component :is="getStudentNavIcon(child)" />
                   </span>
@@ -273,6 +281,9 @@ const isCollapse = computed(() => !appStore.sidebar.opened);
 const isTeacherRole = computed(() => Number(userStore.userInfo.roleId) === 3);
 const isStudentRole = computed(() => ![1, 2, 3].includes(Number(userStore.userInfo.roleId)));
 const isCourseStyleSidebar = computed(() => isStudentRole.value || isTeacherRole.value);
+function toggleTeacherSidebar() {
+  appStore.toggleSideBar(false);
+}
 const sidebarStyle = computed(() => {
   if (isCourseStyleSidebar.value) return {};
   return {

tests/teacher-sidebar-collapse.test.mjs

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const root = resolve(import.meta.dirname, "..");
+const sidebar = readFileSync(resolve(root, "src/layout/components/Sidebar/index.vue"), "utf8");
+const styles = readFileSync(resolve(root, "src/assets/styles/sidebar.scss"), "utf8");
+
+assert.match(sidebar, /teacher-sidebar-toggle/, "教师侧栏应提供收起与展开按钮");
+assert.match(sidebar, /toggleSideBar\(/, "收起按钮应复用全局侧栏状态");
+assert.match(sidebar, /isCollapse/, "收起状态应同步到教师侧栏样式");
+assert.match(styles, /&\.hideSidebar/, "教师侧栏收起时应缩小侧栏并回收内容区空间");
+assert.match(styles, /\.teacher-sidebar-toggle/, "收起按钮应有教师端专属样式");
+
+console.log("teacher sidebar can collapse to an icon rail");