style: 教师端页面调整

src/assets/main.css

@@ -9,11 +9,3 @@ a,
   transition: 0.4s;
   padding: 3px;
 }
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-/* 移除冲突的响应式样式 */

src/components/admin/CourseComponents/CourseCategory.vue

@@ -120,6 +120,8 @@ const navigateToCreateCourse = () => {
   /* 添加相对定位，使分页按钮的绝对定位基于此容器 */
   overflow-x: hidden;
   /* 防止水平滚动 */
+  display: flex;
+    flex-direction: column;
   }
   
   .top {
@@ -231,6 +233,9 @@ const navigateToCreateCourse = () => {
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
   
   .course-grid {
@@ -440,10 +445,10 @@ const navigateToCreateCourse = () => {
     display: flex;
     justify-content: center;
     position: relative;
-  margin-top: 40px;
+    z-index: 100;
-  margin-bottom: 40px;
+    margin: 0;
-  left: 0;
+    margin-top: auto;
-  right: 0;
+    flex-shrink: 0;
 }
 
 .pagination-content {
@@ -466,6 +471,7 @@ const navigateToCreateCourse = () => {
   gap: 0;
   width: 100%;
   white-space: nowrap;
+  margin-bottom: 80px;
   /* 确保所有页码在一行显示 */
 }
 

src/components/admin/CourseManagement.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="course-management-container">
         <!-- 左侧导航栏 -->
-        <div class="nav-container">
+        <!-- <div class="nav-container">
-            <!-- 全部课程可折叠项 -->
             <div class="nav-group">
                 <router-link to="/teacher/course-management" class="nav-item nav-header"
                     :class="{ active: $route.path === '/teacher/course-management' }">
@@ -51,7 +50,7 @@
                     </router-link>
                 </div>
             </div>
-        </div>
+        </div> -->
 
         <!-- 右侧内容区域 -->
         <div class="content-container">
@@ -66,16 +65,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+// import { ref } from 'vue'
 import CourseCategory from './CourseComponents/CourseCategory.vue'
 
 // 主导航展开状态
-const isMainNavExpanded = ref(true)
+// const isMainNavExpanded = ref(true)
 
 // 切换主导航展开状态
-const toggleMainNav = () => {
+// const toggleMainNav = () => {
-    isMainNavExpanded.value = !isMainNavExpanded.value
+//     isMainNavExpanded.value = !isMainNavExpanded.value
-}
+// }
 </script>
 
 
@@ -254,7 +253,7 @@ const toggleMainNav = () => {
 
 .content-container {
     flex: 1;
-    padding: 8px 8px 8px 5px; /* 进一步减少padding */
+    padding-top: 5px; /* 进一步减少padding */
     min-height: 100vh;
     box-sizing: border-box;
     max-width: calc(100vw - 274px - 21px); /* 更精确的宽度计算 */

src/views/teacher/AdminDashboard.vue

@@ -8,7 +8,7 @@
 
     <div class="main-content">
       <!-- 侧边栏 -->
-      <div class="sidebar-container">
+      <div class="sidebar-container" v-if="!hideSidebar">
         <!-- 头像 -->
         <div class="avatar-container">
           <img src="https://picsum.photos/200/200" alt="头像" class="avatar">
@@ -45,12 +45,13 @@
       </div>
 
       <!-- 右侧路由视图 -->
-      <div class="router-view-container">
+      <div class="router-view-container" :class="{ 'full-width': hideSidebar }">
         <!-- 面包屑 -->
         <div class="breadcrumb">
           <span class="breadcrumb-separator"></span>
           <n-breadcrumb>
-            <n-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
+            <n-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index"
+              @click="handleBreadcrumbClick(item.path)" :class="{ 'clickable': index < breadcrumbItems.length - 1 }">
               {{ item.title }}
             </n-breadcrumb-item>
           </n-breadcrumb>
@@ -64,7 +65,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const width = window.innerWidth;
 const height = window.innerHeight;
@@ -73,39 +74,116 @@ console.log(`当前屏幕宽度: ${width}px, 高度: ${height}px`);
 // 添加导航项激活状态管理
 const activeNavItem = ref(0); // 0: 课程管理, 1: 学员管理, 2: 我的资源, 3: 个人中心
 const route = useRoute();
+const router = useRouter();
 
 const setActiveNavItem = (index: number) => {
   activeNavItem.value = index;
 }
 
+// 处理面包屑点击
+const handleBreadcrumbClick = (path: string) => {
+  console.log('面包屑点击，跳转到:', path);
+  router.push(path);
+}
+
+// 判断是否隐藏左侧侧边栏
+const hideSidebar = computed(() => {
+  const currentPath = route.path
+  // 当进入课程管理相关页面时隐藏侧边栏
+  return currentPath.includes('course-editor')
+})
+
 // 动态生成面包屑
 const breadcrumbItems = computed(() => {
-  // 获取当前路由的matched数组
+  const currentPath = route.path;
-  const matchedRoutes = route.matched;
 
-  // 基础面包屑项
+  // 如果在课程编辑器相关页面，强制添加课程管理面包屑
+  if (currentPath.includes('course-editor')) {
+    let breadcrumbs = [
+      {
+        title: '课程管理',
+        path: '/teacher/course-management'
+      }
+    ];
+
+    // 根据当前路径添加子页面标题
+    if (currentPath.includes('courseware')) {
+      breadcrumbs.push({
+        title: '课件管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('question-bank')) {
+      breadcrumbs.push({
+        title: '题库管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('add-question')) {
+      breadcrumbs.push(
+        {
+          title: '题库管理',
+          path: currentPath.replace('/add-question', '/question-bank')
+        },
+        {
+          title: '新增试题',
+          path: currentPath
+        }
+      );
+    } else if (currentPath.includes('chapters')) {
+      breadcrumbs.push({
+        title: '章节管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('homework')) {
+      breadcrumbs.push({
+        title: '作业管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('practice')) {
+      breadcrumbs.push({
+        title: '练考通',
+        path: currentPath
+      });
+    } else if (currentPath.includes('certificate')) {
+      breadcrumbs.push({
+        title: '证书管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('discussion')) {
+      breadcrumbs.push({
+        title: '讨论管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('statistics')) {
+      breadcrumbs.push({
+        title: '统计管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('notification')) {
+      breadcrumbs.push({
+        title: '通知管理',
+        path: currentPath
+      });
+    } else if (currentPath.includes('management')) {
+      breadcrumbs.push({
+        title: '综合管理',
+        path: currentPath
+      });
+    }
+
+    console.log('课程编辑器页面面包屑:', breadcrumbs);
+    return breadcrumbs;
+  }
+
+  // 其他页面的面包屑逻辑
+  const matchedRoutes = route.matched;
   let breadcrumbs = matchedRoutes
-    .filter(item => item.meta.title !== '管理后台')
+    .filter((item: any) => item.meta.title !== '管理后台')
-    .map(item => ({
+    .map((item: any) => ({
       title: item.meta.title || '未知页面',
       path: item.path
     }));
 
-  // 特殊处理新增试题页面，插入"题库"层级
+  console.log('其他页面面包屑:', breadcrumbs);
-  const currentPath = route.path;
-  if (currentPath.includes('/add-question')) {
-    // 找到课程管理项的索引
-    const courseIndex = breadcrumbs.findIndex(item => item.title === '课程管理');
-    if (courseIndex !== -1) {
-      // 在课程管理和新增试题之间插入题库项
-      const courseId = route.params.id;
-      breadcrumbs.splice(courseIndex + 1, 0, {
-        title: '题库',
-        path: `/teacher/course-editor/${courseId}/question-bank`
-      });
-    }
-  }
-
   return breadcrumbs;
 });
 
@@ -138,9 +216,9 @@ const updateActiveNavItem = () => {
 
 <style scoped>
 .admin-dashboard {
-  padding-top: 64px;
   min-height: 100vh;
 }
+
 .top-image-container {
   position: relative;
   width: 100%;
@@ -370,6 +448,12 @@ const updateActiveNavItem = () => {
   overflow-y: auto;
 }
 
+/* 全宽显示（隐藏侧边栏时） */
+.router-view-container.full-width {
+  width: 100%;
+  margin-left: 0;
+}
+
 @media screen and (max-width: 768px) {
   .router-view-container {
     --top-height: 100px;
@@ -395,4 +479,15 @@ const updateActiveNavItem = () => {
   margin-right: 10px;
   background-color: #0C99DA;
 }
+
+/* 可点击的面包屑项样式 */
+.breadcrumb :deep(.n-breadcrumb-item.clickable) {
+  cursor: pointer;
+  color: #0C99DA;
+}
+
+.breadcrumb :deep(.n-breadcrumb-item.clickable:hover) {
+  color: #0277BD;
+  text-decoration: underline;
+}
 </style>

src/views/teacher/course/CourseEditor.vue

@@ -5,8 +5,8 @@
       <router-link :to="`/teacher/course-editor/${courseId}/courseware`" class="menu-item"
         :class="{ active: $route.path.includes('courseware') }">
         <img :src="$route.path.includes('courseware') ? '/images/teacher/课件-选中.png' : '/images/teacher/课件.png'"
-          alt="课件" />
+          alt="资源库" />
-        <span>课件</span>
+        <span>资源库</span>
       </router-link>
       <router-link :to="`/teacher/course-editor/${courseId}/chapters`" class="menu-item"
         :class="{ active: $route.path.includes('chapters') }">

src/views/teacher/course/CoursewareManagement.vue

@@ -2,9 +2,9 @@
   <div class="courseware-management">
     <!-- 顶部操作栏 -->
     <div class="toolbar">
-      <h2>全部课件</h2>
+      <h2>全部资源库</h2>
       <div class="toolbar-actions">
-        <button class="btn btn-primary" @click="addCourseware">添加课件</button>
+        <button class="btn btn-primary" @click="addCourseware">添加资源</button>
         <button class="btn btn-new" @click="createFolder">新建文件夹</button>
         <button class="btn btn-default" @click="moveFiles" :disabled="selectedFiles.length === 0"
           :class="{ 'btn-default--active': selectedFiles.length > 0 }">移动</button>