feat: 添加教师管理图片资源和更新课程组件

src/components/admin/CourseComponents/CourseCategory.vue

@@ -9,7 +9,7 @@
             </div>
 
             <div class="actions">
-                <button class="create-btn">创建课程</button>
+                <button class="create-btn" @click="navigateToCreateCourse">创建课程</button>
                 <div class="search-container">
                     <input type="text" placeholder="请输入想要搜索的内容">
                     <button class="search-btn">搜索</button>
@@ -22,16 +22,24 @@
          <!-- 主体 -->
           <div class="course-container">
             <div class="course-grid">
-              <div class="course-card" v-for="course in courseList" :key="course.id">
+              <div class="course-card" v-for="course in courseList" :key="course.id" @click="navigateToCourseDetail(course.id)">
                 <div class="course-image-container">
                     <div class="section-title" :class="{'offline': course.status === '下架中'}">{{ course.status }}</div>
                     <div class="more-options">
                       <span class="more-icon">⋮</span>
                       <div class="options-menu">
-                        <a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">编辑</a>
+                        <template v-if="course.status === '发布中'">
-                        <a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">查看</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/下架.png" alt="">下架</a>
-                        <a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">删除</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/小编辑.png" alt="">编辑</a>
-                        <a href="#" class="option-item"><img src="/images/teacher/+.png" alt="">更多</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/移动.png" alt="">移动</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/删除.png" alt="">删除</a>
+                        </template>
+                        <template v-else-if="course.status === '下架中'">
+                          <a href="#" class="option-item"><img src="/images/teacher/加号.png" alt="">发布</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/小编辑.png" alt="">编辑</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/移动.png" alt="">移动</a>
+                          <a href="#" class="option-item"><img src="/images/teacher/删除.png" alt="">删除</a>
+                        </template>
                       </div>
                     </div>
                 </div>
@@ -68,6 +76,18 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+// 路由跳转
+const router = useRouter();
+const navigateToCreateCourse = () => {
+  router.push('/teacher/course-create');
+}
+
+// 跳转到课程详情页
+const navigateToCourseDetail = (courseId: number) => {
+  router.push(`/teacher/course-detail?id=${courseId}`);
+}
 
 // 模拟课程数据
 const courseList = ref([

src/components/admin/CourseComponents/CourseCreate.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <h1>课程创建</h1>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+
+<style scoped>
+        
+</style>

src/components/admin/CourseComponents/CourseDetail.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="course-detail-container">
+        <h1>课程详情</h1>
+        <p>当前课程ID: {{ courseId }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+// 获取路由对象
+const route = useRoute()
+
+// 提取路由参数中的id
+const courseId = route.query.id
+
+// 打印路由参数
+console.log('路由参数:', route.query)
+console.log('课程ID:', courseId)
+
+// 如果需要监听路由参数变化
+import { watch } from 'vue'
+watch(
+  () => route.query,
+  (newQuery) => {
+    console.log('路由参数变化:', newQuery)
+  }
+)
+</script>
+
+<style scoped>
+.course-detail-container {
+    padding: 20px;
+}
+</style>

src/router/index.ts

@@ -36,6 +36,8 @@ import StudentManagement from '@/components/admin/StudentManagement.vue'
 import CourseCategory from '@/components/admin/CourseComponents/CourseCategory.vue'
 import MaterialCategory from '@/components/admin/CourseComponents/MaterialCategory.vue'
 import CourseAnalysis from '@/components/admin/CourseComponents/CourseAnalysis.vue'
+import CourseCreate from '@/components/admin/CourseComponents/CourseCreate.vue'
+import CourseDetails from '@/components/admin/CourseComponents/CourseDetail.vue'
 
 
 const routes: RouteRecordRaw[] = [
@@ -59,14 +61,14 @@ const routes: RouteRecordRaw[] = [
         }
       },
       {
-            path: 'course-management',
+        path: 'course-management',
-            name: 'CourseManagement',
+        name: 'CourseManagement',
-            component: CourseManagement,
+        component: CourseManagement,
-            meta: {
+        meta: {
-              title: '课程管理'
+          title: '课程管理'
-            },
+        },
-            redirect: '/teacher/course-management/course-category',  // 添加默认重定向
+        redirect: '/teacher/course-management/course-category',  // 添加默认重定向
-            children: [
+        children: [
           {
             path: 'course-category',
             name: 'CourseCategory',
@@ -91,6 +93,7 @@ const routes: RouteRecordRaw[] = [
               title: '课程分析'
             }
           }
+
         ]
       },
       {
@@ -108,6 +111,22 @@ const routes: RouteRecordRaw[] = [
         meta: {
           title: '学员管理'
         }
+      },
+      {
+        path: 'course-create',
+        name: 'CourseCreate',
+        component: CourseCreate,
+        meta: {
+          title: '创建课程'
+        }
+      },
+      {
+        path: 'course-detail',
+        name: 'TeacherCourseDetail',
+        component: CourseDetails,
+        meta: {
+          title: '课程详情'
+        }
       }
     ]
   },
@@ -314,7 +333,7 @@ const routes: RouteRecordRaw[] = [
     meta: {
       title: '页面未找到'
     },
-    
+
   }
 ]
 

src/views/teacher/AdminDashboard.vue

@@ -20,21 +20,21 @@
            <!-- 导航栏 -->
             <div class="nav-container">
               <router-link to="/teacher/course-management" class="nav-item" :class="{ active: activeNavItem === 0 }" @click="setActiveNavItem(0)">
-                  <img src="/images/teacher/路径1.png" alt="">
+                  <img :src="activeNavItem === 0 ? '/images/teacher/课程管理(选中).png' : '/images/teacher/课程管理.png'" alt="">
                   <span>课程管理</span>
               </router-link>
               <router-link to="/teacher/student-management" class="nav-item" :class="{ active: activeNavItem === 1 }" @click="setActiveNavItem(1)">
 
-                  <img src="https://picsum.photos/200/200" alt="">
+                  <img :src="activeNavItem === 1 ? '/images/teacher/学院管理(选中).png' : '/images/teacher/学员管理.png'" alt="">
                   <span>学员管理</span>
               </router-link>
               <router-link to="/teacher/my-resources" class="nav-item" :class="{ active: activeNavItem === 2 }" @click="setActiveNavItem(2)">
-                  <img src="https://picsum.photos/200/200" alt="">
+                  <img :src="activeNavItem === 2 ? '/images/teacher/我的资源(选中).png' : '/images/teacher/我的资源.png'" alt="">
                   <span>我的资源</span>
               </router-link>
               <router-link to="/teacher/personal-center" class="nav-item" :class="{ active: activeNavItem === 3 }" @click="setActiveNavItem(3)">
 
-                  <img src="/images/teacher/个人中心.png" alt="">
+                  <img :src="activeNavItem === 3 ? '/images/teacher/个人中心(选中).png' : '/images/teacher/个人中心.png'" alt="">
                   <span>个人中心</span>
               </router-link>
             </div>
@@ -237,8 +237,9 @@ const updateActiveNavItem = () => {
 }
 
 .breadcrumb-separator {
-  margin-right: 10px;
+  margin: 0 8px;
   color: #0C99DA;
   font-size: 16px;
+  content: '>';
 }
 </style>