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,9 +120,11 @@ const navigateToCreateCourse = () => {
   /* 添加相对定位，使分页按钮的绝对定位基于此容器 */
   overflow-x: hidden;
   /* 防止水平滚动 */
-}
+  display: flex;
+    flex-direction: column;
+  }
   
-.top {
+  .top {
     padding: 20px;
     white-space: nowrap;
     /* 进一步减少左右padding */
@@ -134,21 +136,21 @@ const navigateToCreateCourse = () => {
     width: 100%;
     /* 确保宽度充满父容器 */
     box-sizing: border-box;
-}
+  }
   
-.nav-links {
+  .nav-links {
     display: flex;
     align-items: center;
   
-}
+  }
   
-.actions {
+  .actions {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-}
+  }
   
-.top a {
+  .top a {
     margin-right: 74px;
     display: inline-block;
     height: 60px;
@@ -158,13 +160,13 @@ const navigateToCreateCourse = () => {
     color: #333333;
     text-decoration: none;
     position: relative;
-}
+  }
   
-.top a.active {
+  .top a.active {
     color: #1890ff;
-}
+  }
   
-.top a.active::after {
+  .top a.active::after {
     content: '';
     position: absolute;
     bottom: 0;
@@ -172,9 +174,9 @@ const navigateToCreateCourse = () => {
     width: 100%;
     height: 3px;
     background-color: #1890ff;
-}
+  }
   
-.create-btn {
+  .create-btn {
     background-color: #0288D1;
     color: white;
     border: none;
@@ -185,30 +187,30 @@ const navigateToCreateCourse = () => {
     margin-right: 24px;
     /* 增加按钮与搜索框间距 */
     transition: background-color 0.3s;
-}
+  }
   
-.create-btn:hover {
+  .create-btn:hover {
     background-color: #40a9ff;
-}
+  }
   
-.search-container {
+  .search-container {
     display: flex;
     align-items: center;
     border: 1px solid #d9d9d9;
     border-radius: 2px;
     overflow: hidden;
-}
+  }
   
-.search-container input {
+  .search-container input {
     border: none;
     padding: 7px 12px;
     outline: none;
     font-size: 14px;
     width: 240px;
     /* 增加搜索框宽度 */
-}
+  }
   
-.search-btn {
+  .search-btn {
     background-color: #0288D1;
     border: none;
     border-left: 1px solid #d9d9d9;
@@ -221,19 +223,22 @@ const navigateToCreateCourse = () => {
     text-align: left;
     font-style: normal;
     text-transform: none;
-}
+  }
   
-.search-btn:hover {
+  .search-btn:hover {
     background-color: #e8e8e8;
-}
+  }
   
-.course-container {
+  .course-container {
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
-}
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
   
-.course-grid {
+  .course-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     /* 默认4列，确保100%缩放下不被截断 */
@@ -245,9 +250,9 @@ const navigateToCreateCourse = () => {
     box-sizing: border-box;
     padding: 0 3px;
     /* 减少内边距 */
-}
+  }
   
-.course-card {
+  .course-card {
     width: 100%;
     height: auto;
     aspect-ratio: 190 / 201;
@@ -257,14 +262,14 @@ const navigateToCreateCourse = () => {
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
-}
+  }
   
-.course-card:hover {
+  .course-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transform: translateY(-5px);
-}
+  }
   
-.course-image-container {
+  .course-image-container {
     position: relative;
     padding: 0;
     width: 100%;
@@ -273,9 +278,9 @@ const navigateToCreateCourse = () => {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-}
+  }
   
-.section-title {
+  .section-title {
     width: 50px;
     height: 20px;
     background: #0288D1;
@@ -286,19 +291,19 @@ const navigateToCreateCourse = () => {
     justify-content: center;
     margin: 0;
     padding: 0;
-}
+  }
   
-.section-title.offline {
+  .section-title.offline {
     background: #FF6C17;
-}
+  }
   
-.more-options {
+  .more-options {
     cursor: pointer;
     margin: 0;
     padding: 0;
-}
+  }
   
-.more-icon {
+  .more-icon {
     font-size: 18px;
     font-weight: bold;
     color: #333;
@@ -306,20 +311,20 @@ const navigateToCreateCourse = () => {
     padding: 0;
     margin: 0;
     line-height: 1;
-}
+  }
   
-.course-image-container img {
+  .course-image-container img {
     width: 13px;
     height: 13px;
-}
+  }
   
-/* 添加更多选项按钮样式 */
+  /* 添加更多选项按钮样式 */
-.more-options {
+  .more-options {
     position: relative;
     cursor: pointer;
-}
+  }
   
-.more-icon {
+  .more-icon {
     font-size: 18px;
     font-weight: bold;
     color: #333;
@@ -327,9 +332,9 @@ const navigateToCreateCourse = () => {
     padding: 5px;
     margin: 0;
     line-height: 1;
-}
+  }
   
-.options-menu {
+  .options-menu {
     position: absolute;
     top: 100%;
     right: 0;
@@ -342,13 +347,13 @@ const navigateToCreateCourse = () => {
     width: auto;
     min-width: 59px;
     height: auto;
-}
+  }
   
-.more-options:hover .options-menu {
+  .more-options:hover .options-menu {
     display: block;
-}
+  }
   
-.option-item {
+  .option-item {
     display: flex;
     align-items: center;
     padding: 5px 8px;
@@ -360,37 +365,37 @@ const navigateToCreateCourse = () => {
     line-height: 14px;
     box-sizing: border-box;
     border-bottom: 1px solid #f0f0f0;
-}
+  }
   
-.icon-edit,
+  .icon-edit,
-.icon-view,
+  .icon-view,
-.icon-delete,
+  .icon-delete,
-.icon-more {
+  .icon-more {
     margin-right: 4px;
     color: #1890ff;
-}
+  }
   
-.icon-view {
+  .icon-view {
     color: #52c41a;
-}
+  }
   
-.icon-delete {
+  .icon-delete {
     color: #f5222d;
-}
+  }
   
-.icon-more {
+  .icon-more {
     color: #faad14;
-}
+  }
   
-.option-item:last-child {
+  .option-item:last-child {
     border-bottom: none;
-}
+  }
   
-.option-item:hover {
+  .option-item:hover {
     background-color: #f5f5f5;
-}
+  }
   
-.course-info {
+  .course-info {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -398,9 +403,9 @@ const navigateToCreateCourse = () => {
     flex: 1;
     box-sizing: border-box;
     padding: 0;
-}
+  }
   
-.course-info img {
+  .course-info img {
     width: 80%;
     height: auto;
     aspect-ratio: 150 / 105;
@@ -411,9 +416,9 @@ const navigateToCreateCourse = () => {
     top: -5px;
     object-fit: cover;
     object-position: center;
-}
+  }
   
-.course-name {
+  .course-name {
     width: 80%;
     height: 20px;
     font-family: AppleSystemUIFont;
@@ -433,17 +438,17 @@ const navigateToCreateCourse = () => {
     /* 文字往上移动：添加负上边距 */
     margin-bottom: 10px;
     /* 减小底部边距从15px到10px */
-}
+  }
   
-/* 分页样式 */
+  /* 分页样式 */
-.pagination {
+  .pagination {
     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%;
@@ -227,9 +305,9 @@ const updateActiveNavItem = () => {
   right: 15px;
   height: 1px;
   background-color: #E6E6E6;
-  }
+}
 
-  .avatar-container img {
+.avatar-container img {
   width: 80px;
   height: 80px;
   /* 圆角 */
@@ -237,9 +315,9 @@ const updateActiveNavItem = () => {
   margin-top: 55px;
   margin-left: 80px;
   margin-right: 80px;
-  }
+}
 
-  .avatar-text {
+.avatar-text {
   margin-left: 80px;
   height: 31px;
   font-family: AppleSystemUIFont;
@@ -249,9 +327,9 @@ const updateActiveNavItem = () => {
   text-align: left;
   font-style: normal;
   text-transform: none;
-  }
+}
 
-  @media screen and (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .avatar-container {
     height: 180px;
     display: flex;
@@ -268,9 +346,9 @@ const updateActiveNavItem = () => {
     margin: 0;
     text-align: center;
   }
-  }
+}
 
-  @media screen and (max-width: 480px) {
+@media screen and (max-width: 480px) {
   .avatar-container {
     height: 150px;
   }
@@ -283,16 +361,16 @@ const updateActiveNavItem = () => {
   .avatar-text {
     font-size: 18px;
   }
-  }
+}
 
-  .nav-container {
+.nav-container {
   margin-top: 30px;
   /* 鼠标变小手 */
   cursor: pointer;
 
-  }
+}
 
-  .nav-container .nav-item {
+.nav-container .nav-item {
   margin-left: 15px;
   width: 210px;
   height: 50px;
@@ -303,9 +381,9 @@ const updateActiveNavItem = () => {
   align-items: center;
   transition: all 0.3s ease;
   gap: 8px;
-  }
+}
 
-  @media screen and (max-width: 768px) {
+@media screen and (max-width: 768px) {
   .nav-container {
     display: flex;
     flex-wrap: wrap;
@@ -317,9 +395,9 @@ const updateActiveNavItem = () => {
     width: 200px;
     margin: 0 10px 15px;
   }
-  }
+}
 
-  @media screen and (max-width: 480px) {
+@media screen and (max-width: 480px) {
   .nav-container .nav-item {
     width: 150px;
     height: 45px;
@@ -329,29 +407,29 @@ const updateActiveNavItem = () => {
   .nav-container .nav-item img {
     margin-left: 20px;
   }
-  }
+}
 
-  .nav-container .nav-item:hover {
+.nav-container .nav-item:hover {
   background: rgba(102, 183, 227, 0.05);
-  }
+}
 
-  /* 添加激活状态样式 */
+/* 添加激活状态样式 */
-  .nav-container .nav-item.active {
+.nav-container .nav-item.active {
   background: rgba(102, 183, 227, 0.1);
-  }
+}
 
-  .nav-container .nav-item.active span {
+.nav-container .nav-item.active span {
   color: #0C99DA;
-  }
+}
 
-  .nav-container .nav-item img {
+.nav-container .nav-item img {
   height: 18px;
   margin-left: 40px;
   margin-top: 0;
   margin-right: 5px;
-  }
+}
 
-  .nav-container .nav-item span {
+.nav-container .nav-item span {
   height: 26px;
   font-family: AppleSystemUIFont;
   font-size: 18px;
@@ -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>