web-课程列表

2025-10-21 17:59:34 +08:00
parent 9824a7d686
commit eef1c029b4
26 changed files with 2742 additions and 602 deletions
--- a/schoolNewsWeb/src/assets/imgs/default-course-bg.png
+++ b/schoolNewsWeb/src/assets/imgs/default-course-bg.png
--- a/schoolNewsWeb/src/views/resource-center/components/ResourceHead.vue
+++ b/schoolNewsWeb/src/views/resource-center/components/ResourceHead.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="resource-head">
-    <div class="head-title">资源中心</div>
+    <div class="head-title">{{ title }}</div>
    <div class="breadcrumb">
      <span class="breadcrumb-label">当前位置：</span>
      <div class="breadcrumb-nav">
-        <span class="breadcrumb-item">资源中心</span>
+        <span class="breadcrumb-item">{{ title }}</span>
        <span class="separator">/</span>
        <span class="breadcrumb-item">{{ categoryName }}</span>
        <span class="separator" v-if="showArticleMode">/</span>
@@ -16,12 +16,14 @@

 <script setup lang="ts">
 interface Props {
+  title?: string;
  categoryName?: string;
  showArticleMode?: boolean;
 }

 withDefaults(defineProps<Props>(), {
-  categoryName: '党史学习',
+  title: '',
+  categoryName: '',
  showArticleMode: false
 });
 </script>
--- a/schoolNewsWeb/src/components/base/MenuNav.vue
+++ b/schoolNewsWeb/src/components/base/MenuNav.vue
@@ -1,36 +1,91 @@
 <template>
  <div class="menu-nav">
-    <MenuItem 
-      v-for="menu in menus"
-      :key="menu.menuID"
-      :menu="menu" 
-      :collapsed="collapsed"
-      @menu-click="$emit('menu-click', $event)"
-    />
+    <div class="menu-container">
+      <div
+        v-for="menu in menus"
+        :key="menu.menuID"
+        class="menu-item"
+        :class="{ active: isActive(menu) }"
+        @click="handleMenuClick(menu)"
+      >
+        {{ menu.name }}
+      </div>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { useRoute } from 'vue-router';
 import type { SysMenu } from '@/types';
-// @ts-ignore - Vue 3.5 defineOptions支持递归组件
-import MenuItem from './MenuItem.vue';

-// Props
 interface Props {
  menus: SysMenu[];
-  collapsed?: boolean;
 }

 defineProps<Props>();

-// Emits
-defineEmits<{
+const emit = defineEmits<{
  'menu-click': [menu: SysMenu];
 }>();
+
+const route = useRoute();
+
+// 判断菜单是否激活
+function isActive(menu: SysMenu): boolean {
+  if (!menu.url) return false;
+  return route.path === menu.url || route.path.startsWith(menu.url + '/');
+}
+
+// 处理菜单点击
+function handleMenuClick(menu: SysMenu) {
+  emit('menu-click', menu);
+}
 </script>

 <style lang="scss" scoped>
 .menu-nav {
-  padding: 8px 0;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.menu-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.menu-item {
+  padding: 26px 21px;
+  height: 62px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'PingFang SC', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.5em;
+  color: #141F38;
+  cursor: pointer;
+  transition: all 0.3s;
+  white-space: nowrap;
+  
+  &:hover {
+    color: #C62828;
+  }
+  
+  &.active {
+    width: 106px;
+    background: #C62828;
+    color: #FFFFFF;
+    font-weight: 600;
+    
+    &:hover {
+      color: #FFFFFF;
+      background: #A82020;
+    }
+  }
 }
 </style>
--- a/schoolNewsWeb/src/components/base/MenuSidebar.vue
+++ b/schoolNewsWeb/src/components/base/MenuSidebar.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="menu-nav">
+    <MenuItem 
+      v-for="menu in menus"
+      :key="menu.menuID"
+      :menu="menu" 
+      :collapsed="collapsed"
+      @menu-click="$emit('menu-click', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SysMenu } from '@/types';
+// @ts-ignore - Vue 3.5 defineOptions支持递归组件
+import MenuItem from './MenuItem.vue';
+
+// Props
+interface Props {
+  menus: SysMenu[];
+  collapsed?: boolean;
+}
+
+defineProps<Props>();
+
+// Emits
+defineEmits<{
+  'menu-click': [menu: SysMenu];
+}>();
+</script>
+
+<style lang="scss" scoped>
+.menu-nav {
+  padding: 8px 0;
+}
+</style>
--- a/schoolNewsWeb/src/components/base/index.ts
+++ b/schoolNewsWeb/src/components/base/index.ts
@@ -2,6 +2,8 @@ export { default as Breadcrumb } from './Breadcrumb.vue';
 export { default as FloatingSidebar } from './FloatingSidebar.vue';
 export { default as MenuItem } from './MenuItem.vue';
 export { default as MenuNav } from './MenuNav.vue';
+export { default as MenuSidebar } from './MenuSidebar.vue';
 export { default as TopNavigation } from './TopNavigation.vue';
 export { default as UserDropdown } from './UserDropdown.vue';
-export { default as Search } from './Search.vue';
+export { default as Search } from './Search.vue';
+export { default as CenterHead } from './CenterHead.vue';
--- a/schoolNewsWeb/src/layouts/BasicLayout.vue
+++ b/schoolNewsWeb/src/layouts/BasicLayout.vue
@@ -29,7 +29,7 @@

        <!-- 菜单导航 -->
        <nav class="sidebar-nav">
-          <MenuNav
+          <MenuSidebar
            :menus="menuTree"
            :collapsed="sidebarCollapsed"
            @menu-click="handleMenuClick"
@@ -57,7 +57,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
 import type { SysMenu } from "@/types";
 import { getMenuPath } from "@/utils/route-generator";
-import { MenuNav, Breadcrumb, UserDropdown } from "@/components/base";
+import { MenuSidebar, Breadcrumb, UserDropdown } from "@/components/base";

 // 响应式状态
 const sidebarCollapsed = ref(false);
--- a/schoolNewsWeb/src/layouts/NavigationLayout.vue
+++ b/schoolNewsWeb/src/layouts/NavigationLayout.vue
@@ -19,7 +19,7 @@
          </div>

          <nav class="sidebar-nav">
-            <MenuNav
+            <MenuSidebar
              :menus="sidebarMenus"
              :collapsed="sidebarCollapsed"
              @menu-click="handleMenuClick"
@@ -50,7 +50,7 @@ import { useStore } from 'vuex';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
 import { getMenuPath } from '@/utils/route-generator';
-import { TopNavigation, MenuNav, Breadcrumb } from '@/components';
+import { TopNavigation, MenuSidebar, Breadcrumb } from '@/components';

 const route = useRoute();
 const router = useRouter();
--- a/schoolNewsWeb/src/store/modules/auth.ts
+++ b/schoolNewsWeb/src/store/modules/auth.ts
@@ -193,7 +193,6 @@ const authModule: Module<AuthState, any> = {
        
        // 生成动态路由
        await dispatch('generateRoutes');
-        console.log(router.getRoutes())
        // 获取第一个可访问的菜单URL，用于登录后跳转
        const firstMenuUrl = getFirstAccessibleMenuUrl(state.menus);
        
@@ -234,18 +233,10 @@ const authModule: Module<AuthState, any> = {
        
        // 如果已经有完整的登录信息，直接生成路由
        if (state.loginDomain && state.menus.length > 0) {
-          console.log('从localStorage恢复登录状态');
          await dispatch('generateRoutes');
          return true;
        }
        
-        // 如果只有token，需要从后端重新获取用户信息
-        // console.log('Token存在，重新获取用户信息');
-        // const loginDomain = await authApi.getUserInfo(); // 需要后端提供这个接口
-        
-        // commit('SET_LOGIN_DOMAIN', loginDomain);
-        // await dispatch('generateRoutes');
-        
        return true;
      } catch (error) {
        console.error('恢复登录状态失败:', error);
@@ -260,12 +251,10 @@ const authModule: Module<AuthState, any> = {
      try {
        // 如果路由已经加载，避免重复生成
        if (state.routesLoaded) {
-          console.log('路由已加载，跳过生成');
          return;
        }
        
        if (!state.menus || state.menus.length === 0) {
-          console.warn('用户菜单为空，无法生成路由');
          commit('SET_ROUTES_LOADED', true); // 标记为已加载，避免重复尝试
          return;
        }
@@ -290,7 +279,6 @@ const authModule: Module<AuthState, any> = {
        // 标记路由已加载
        commit('SET_ROUTES_LOADED', true);
        
-        console.log('动态路由生成完成', routes);
      } catch (error) {
        console.error('生成动态路由失败:', error);
        throw error;
--- a/schoolNewsWeb/src/utils/route-generator.ts
+++ b/schoolNewsWeb/src/utils/route-generator.ts
@@ -41,9 +41,6 @@ export function generateRoutes(menus: SysMenu[]): RouteRecordRaw[] {
  
  // 生成路由
  menuTree.forEach(menu => {
-    if(menu.type === MenuType.PAGE) {
-      console.log(`[路由生成] 生成独立PAGE路由: ${menu.name} -> ${menu.url}`);
-    }
    const route = generateRouteFromMenu(menu);
    
    if (route) {
@@ -66,24 +63,10 @@ export function generateRoutes(menus: SysMenu[]): RouteRecordRaw[] {
 function extractPageChildren(route: any, pageRoutes: RouteRecordRaw[]) {
  // 检查当前路由是否有 PAGE 类型的子菜单
  if (route.meta?.pageChildren && Array.isArray(route.meta.pageChildren)) {
-    console.log(`[路由生成] 父路由 ${route.name} 包含 ${route.meta.pageChildren.length} 个PAGE子菜单`);
    route.meta.pageChildren.forEach((pageMenu: SysMenu) => {
-      console.log(`[路由生成] 开始生成PAGE路由:`, {
-        name: pageMenu.name,
-        menuID: pageMenu.menuID,
-        url: pageMenu.url,
-        component: pageMenu.component,
-        layout: (pageMenu as any).layout,
-        type: pageMenu.type
-      });
      const pageRoute = generateRouteFromMenu(pageMenu, true); // 作为顶层路由生成
      if (pageRoute) {
-        console.log(`[路由生成] 生成独立PAGE路由成功:`, {
-          name: pageMenu.name,
-          path: pageRoute.path,
-          component: pageRoute.component,
-          hasChildren: !!pageRoute.children
-        });
+
        pageRoutes.push(pageRoute);
      } else {
        console.error(`[路由生成] 生成独立PAGE路由失败: ${pageMenu.name}`);
@@ -153,11 +136,9 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
  } else {
    // 没有子菜单，也没有指定布局，使用具体的页面组件
    if (menu.component) {
-      console.log(`[路由生成] 加载组件: ${menu.name} -> ${menu.component}`);
      route.component = getComponent(menu.component);
    } else {
      // 非顶层菜单没有组件时，使用简单的占位组件
-      console.log(`[路由生成] ${menu.name} 没有组件，使用BlankLayout`);
      route.component = getComponent('BlankLayout');
    }
  }
@@ -182,7 +163,6 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
    menu.children!.forEach(child => {
      if (child.type === MenuType.PAGE) {
        // PAGE 类型的菜单作为独立路由，不作为子路由
-        console.log(`[路由生成] 发现PAGE类型子菜单: ${child.name} (${child.menuID}), 父菜单: ${menu.name}`);
        pageChildren.push(child);
      } else {
        normalChildren.push(child);
@@ -200,7 +180,6 @@ function generateRouteFromMenu(menu: SysMenu, isTopLevel = true): RouteRecordRaw
    // PAGE 类型的菜单需要在外层单独处理（不管是哪一层的菜单）
    if (pageChildren.length > 0) {
      // 将 PAGE 类型的子菜单保存到路由的 meta 中，稍后在外层生成
-      console.log(`[路由生成] 保存 ${pageChildren.length} 个PAGE子菜单到 ${menu.name} 的meta中`);
      route.meta.pageChildren = pageChildren;
    }
    
@@ -270,18 +249,14 @@ function getComponent(componentName: string) {
    componentPath += '.vue';
  }
  
-  console.log(`[路由生成] 组件路径转换: ${componentName} -> ${componentPath}`);
  
  // 动态导入组件
  return () => {
-    console.log(`[组件加载] 开始加载: ${componentPath}`);
    return import(/* @vite-ignore */ componentPath)
      .then(module => {
-        console.log(`[组件加载] 成功: ${componentPath}`, module);
        return module;
      })
      .catch(error => {
-        console.error(`[组件加载] 失败: ${componentPath}`, error);
        // 返回404组件
        return import('@/views/error/404.vue').catch(() => 
          Promise.resolve({ 
--- a/schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue
+++ b/schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue
@@ -16,7 +16,7 @@

 <script setup lang="ts">
 import { ref } from 'vue';
-import { CourseList, CourseAdd } from './components';
+import { CourseList, CourseAdd } from '@/views/course/components';
 import type { Course } from '@/types/study';

 type ViewType = 'list' | 'add' | 'edit';
--- a/schoolNewsWeb/src/views/admin/manage/study/components/index.ts
+++ b/schoolNewsWeb/src/views/admin/manage/study/components/index.ts
@@ -1,3 +0,0 @@
-export { default as CourseList } from './CourseList.vue';
-export { default as CourseAdd } from './CourseAdd.vue';
-
--- a/schoolNewsWeb/src/views/admin/manage/study/components/CourseAdd.vue
+++ b/schoolNewsWeb/src/views/admin/manage/study/components/CourseAdd.vue
@@ -110,11 +110,18 @@
            </template>

            <!-- 章节信息 -->
-            <el-form-item :label="`章节${chapterIndex + 1}名称`" :prop="`courseChapters.${chapterIndex}.chapter.name`">
+            <el-form-item 
+              :label="`章节${chapterIndex + 1}名称`" 
+              :prop="`courseChapters.${chapterIndex}.chapter.name`"
+              :rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
+            >
              <el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
            </el-form-item>

-            <el-form-item :label="`章节${chapterIndex + 1}排序`" :prop="`courseChapters.${chapterIndex}.chapter.orderNum`">
+            <el-form-item 
+              :label="`章节${chapterIndex + 1}排序`" 
+              :prop="`courseChapters.${chapterIndex}.chapter.orderNum`"
+            >
              <el-input-number v-model="chapterVO.chapter.orderNum" :min="0" />
            </el-form-item>

@@ -153,11 +160,17 @@
                    </div>
                  </template>

-                  <el-form-item label="节点名称">
+                  <el-form-item 
+                    label="节点名称"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.name`"
+                  >
                    <el-input v-model="node.name" placeholder="请输入节点名称" />
                  </el-form-item>

-                  <el-form-item label="节点类型">
+                  <el-form-item 
+                    label="节点类型"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.nodeType`"
+                  >
                    <el-radio-group v-model="node.nodeType">
                      <el-radio :label="0">文章资源</el-radio>
                      <el-radio :label="1">富文本</el-radio>
@@ -166,7 +179,11 @@
                  </el-form-item>

                  <!-- 文章资源选择 -->
-                  <el-form-item v-if="node.nodeType === 0" label="选择文章">
+                  <el-form-item 
+                    v-if="node.nodeType === 0" 
+                    label="选择文章"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.resourceID`"
+                  >
                    <el-select
                      v-model="node.resourceID"
                      filterable
@@ -186,12 +203,20 @@
                  </el-form-item>

                  <!-- 富文本编辑 -->
-                  <el-form-item v-if="node.nodeType === 1" label="内容编辑">
+                  <el-form-item 
+                    v-if="node.nodeType === 1" 
+                    label="内容编辑"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.content`"
+                  >
                    <RichTextComponent v-model="node.content" />
                  </el-form-item>

                  <!-- 文件上传 -->
-                  <el-form-item v-if="node.nodeType === 2" label="上传文件">
+                  <el-form-item 
+                    v-if="node.nodeType === 2" 
+                    label="上传文件"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.videoUrl`"
+                  >
                    <FileUpload
                      :as-dialog="false"
                      :multiple="false"
@@ -206,12 +231,18 @@
                    </div>
                  </el-form-item>

-                  <el-form-item label="节点时长">
+                  <el-form-item 
+                    label="节点时长"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.duration`"
+                  >
                    <el-input-number v-model="node.duration" :min="0" />
                    <span class="ml-2">分钟</span>
                  </el-form-item>

-                  <el-form-item label="是否必修">
+                  <el-form-item 
+                    label="是否必修"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.isRequired`"
+                  >
                    <el-switch
                      v-model="node.isRequired"
                      :active-value="1"
@@ -219,7 +250,10 @@
                    />
                  </el-form-item>

-                  <el-form-item label="排序号">
+                  <el-form-item 
+                    label="排序号"
+                    :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.orderNum`"
+                  >
                    <el-input-number v-model="node.orderNum" :min="0" />
                  </el-form-item>
                </el-card>
@@ -311,10 +345,30 @@ async function loadCourse() {
  try {
    const res = await courseApi.getCourseById(props.courseID!);
    if (res.success && res.data) {
+      // 确保数据结构完整，处理 null 值
+      const courseData = res.data;
+      
+      // 确保 courseChapters 是数组
+      if (!courseData.courseChapters) {
+        courseData.courseChapters = [];
+      }
+      
+      // 确保 courseTags 是数组
+      if (!courseData.courseTags) {
+        courseData.courseTags = [];
+      }
+      
+      // 确保每个章节的 nodes 是数组
+      courseData.courseChapters.forEach((chapterVO: ChapterVO) => {
+        if (!chapterVO.nodes) {
+          chapterVO.nodes = [];
+        }
+      });
+      
      // 保存原始数据
-      originalCourseVO.value = JSON.parse(JSON.stringify(res.data));
+      originalCourseVO.value = JSON.parse(JSON.stringify(courseData));
      // 设置当前编辑数据
-      currentCourseVO.value = JSON.parse(JSON.stringify(res.data));
+      currentCourseVO.value = JSON.parse(JSON.stringify(courseData));
      console.log(currentCourseVO.value);
    }
  } catch (error) {
--- a/schoolNewsWeb/src/views/course/components/CourseDetail.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseDetail.vue
@@ -0,0 +1,674 @@
+<template>
+  <div class="course-detail">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
+    </div>
+
+    <!-- 加载中 -->
+    <div v-if="loading" class="loading">
+      <el-skeleton :rows="10" animated />
+    </div>
+
+    <!-- 课程详情 -->
+    <div v-else-if="courseVO" class="course-content">
+      <!-- 课程封面和基本信息 -->
+      <div class="course-header">
+        <div class="cover-section">
+          <img 
+            :src="courseVO.course.coverImage || defaultCover" 
+            :alt="courseVO.course.name"
+            class="cover-image"
+          />
+        </div>
+        
+        <div class="info-section">
+          <h1 class="course-title">{{ courseVO.course.name }}</h1>
+          
+          <div class="course-meta">
+            <div class="meta-item">
+              <el-icon><User /></el-icon>
+              <span>授课老师：{{ courseVO.course.teacher }}</span>
+            </div>
+            <div class="meta-item">
+              <el-icon><Clock /></el-icon>
+              <span>课程时长：{{ formatDuration(courseVO.course.duration) }}</span>
+            </div>
+            <div class="meta-item">
+              <el-icon><View /></el-icon>
+              <span>{{ courseVO.course.viewCount || 0 }} 人浏览</span>
+            </div>
+            <div class="meta-item">
+              <el-icon><Reading /></el-icon>
+              <span>{{ courseVO.course.learnCount || 0 }} 人学习</span>
+            </div>
+          </div>
+
+          <div class="course-description">
+            <p>{{ courseVO.course.description }}</p>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="action-buttons">
+            <el-button 
+              type="primary" 
+              size="large" 
+              @click="handleStartLearning"
+              :loading="enrolling"
+            >
+              <el-icon><VideoPlay /></el-icon>
+              {{ isEnrolled ? '继续学习' : '开始学习' }}
+            </el-button>
+            
+            <el-button 
+              size="large"
+              :icon="isCollected ? StarFilled : Star"
+              @click="handleCollect"
+            >
+              {{ isCollected ? '已收藏' : '收藏课程' }}
+            </el-button>
+          </div>
+
+          <!-- 学习进度 -->
+          <div v-if="learningProgress" class="learning-progress">
+            <div class="progress-header">
+              <span>学习进度</span>
+              <span class="progress-text">{{ learningProgress.progress }}%</span>
+            </div>
+            <el-progress 
+              :percentage="learningProgress.progress" 
+              :stroke-width="10"
+              :color="progressColor"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 课程章节 -->
+      <el-card class="chapter-card" shadow="never">
+        <template #header>
+          <div class="card-header">
+            <span>课程章节</span>
+            <span class="chapter-count">共 {{ courseVO.courseChapters.length }} 章</span>
+          </div>
+        </template>
+
+        <div v-if="courseVO.courseChapters.length === 0" class="empty-tip">
+          暂无章节内容
+        </div>
+
+        <el-collapse v-else v-model="activeChapters">
+          <el-collapse-item
+            v-for="(chapterVO, chapterIndex) in courseVO.courseChapters"
+            :key="chapterIndex"
+            :name="chapterIndex"
+          >
+            <template #title>
+              <div class="chapter-title-bar">
+                <span class="chapter-name">
+                  <el-icon><DocumentCopy /></el-icon>
+                  章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name }}
+                </span>
+                <span class="chapter-meta">
+                  {{ chapterVO.nodes.length }} 个节点
+                </span>
+              </div>
+            </template>
+
+            <!-- 节点列表 -->
+            <div v-if="chapterVO.nodes.length === 0" class="empty-tip">
+              暂无学习节点
+            </div>
+            
+            <div v-else class="node-list">
+              <div
+                v-for="(node, nodeIndex) in chapterVO.nodes"
+                :key="nodeIndex"
+                class="node-item"
+                @click="handleNodeClick(chapterIndex, nodeIndex)"
+              >
+                <div class="node-info">
+                  <el-icon class="node-icon">
+                    <Document v-if="node.nodeType === 0" />
+                    <Edit v-else-if="node.nodeType === 1" />
+                    <Upload v-else />
+                  </el-icon>
+                  <span class="node-name">{{ node.name }}</span>
+                  <el-tag 
+                    v-if="node.isRequired === 1" 
+                    type="danger" 
+                    size="small"
+                    effect="plain"
+                  >
+                    必修
+                  </el-tag>
+                </div>
+                <div class="node-meta">
+                  <span v-if="node.duration" class="node-duration">
+                    <el-icon><Clock /></el-icon>
+                    {{ node.duration }} 分钟
+                  </span>
+                  <el-icon class="arrow-icon"><ArrowRight /></el-icon>
+                </div>
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <!-- 收藏按钮（底部浮动） -->
+      <div class="floating-collect">
+        <el-button
+          circle
+          size="large"
+          :icon="isCollected ? StarFilled : Star"
+          @click="handleCollect"
+          :type="isCollected ? 'warning' : 'default'"
+        />
+      </div>
+    </div>
+
+    <!-- 加载失败 -->
+    <div v-else class="error-tip">
+      <el-empty description="加载课程失败" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import {
+  ArrowLeft,
+  User,
+  Clock,
+  View,
+  Reading,
+  VideoPlay,
+  Star,
+  StarFilled,
+  DocumentCopy,
+  Document,
+  Edit,
+  Upload,
+  ArrowRight
+} from '@element-plus/icons-vue';
+import { courseApi } from '@/apis/study';
+import { learningRecordApi } from '@/apis/study';
+import { userCollectionApi } from '@/apis/usercenter';
+import { useStore } from 'vuex';
+import type { CourseVO, LearningRecord } from '@/types';
+import { CollectionType } from '@/types';
+
+interface Props {
+  courseId: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'back': [];
+  'start-learning': [courseId: string, chapterIndex: number, nodeIndex: number];
+}>();
+
+const router = useRouter();
+const store = useStore();
+const authStore = computed(() => store.state.auth);
+
+const loading = ref(false);
+const enrolling = ref(false);
+const courseVO = ref<CourseVO | null>(null);
+const isCollected = ref(false);
+const isEnrolled = ref(false);
+const learningProgress = ref<LearningRecord | null>(null);
+const activeChapters = ref<number[]>([0]); // 默认展开第一章
+const defaultCover = new URL('@/assets/imgs/article-default.png', import.meta.url).href;
+
+// 进度条颜色
+const progressColor = computed(() => {
+  const progress = learningProgress.value?.progress || 0;
+  if (progress >= 80) return '#67c23a';
+  if (progress >= 50) return '#409eff';
+  return '#e6a23c';
+});
+
+watch(() => props.courseId, (newId) => {
+  if (newId) {
+    loadCourseDetail();
+    checkCollectionStatus();
+    loadLearningProgress();
+  }
+}, { immediate: true });
+
+// 加载课程详情
+async function loadCourseDetail() {
+  loading.value = true;
+  try {
+    // 增加浏览次数
+    courseApi.incrementViewCount(props.courseId);
+    
+    const res = await courseApi.getCourseById(props.courseId);
+    if (res.success && res.data) {
+      courseVO.value = res.data;
+      
+      // 确保数据结构完整
+      if (!courseVO.value.courseChapters) {
+        courseVO.value.courseChapters = [];
+      }
+      if (!courseVO.value.courseTags) {
+        courseVO.value.courseTags = [];
+      }
+      courseVO.value.courseChapters.forEach((chapter) => {
+        if (!chapter.nodes) {
+          chapter.nodes = [];
+        }
+      });
+    } else {
+      ElMessage.error('加载课程失败');
+    }
+  } catch (error) {
+    console.error('加载课程失败:', error);
+    ElMessage.error('加载课程失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 检查收藏状态
+async function checkCollectionStatus() {
+  if (!authStore.value.userInfo?.userID) return;
+  
+  try {
+    const res = await userCollectionApi.isCollected(
+      authStore.value.userInfo.userID,
+      CollectionType.COURSE,
+      props.courseId
+    );
+    if (res.success) {
+      isCollected.value = res.data || false;
+    }
+  } catch (error) {
+    console.error('检查收藏状态失败:', error);
+  }
+}
+
+// 加载学习进度
+async function loadLearningProgress() {
+  if (!authStore.value.userInfo?.userID) return;
+  
+  try {
+    const res = await learningRecordApi.getRecordList({
+      userID: authStore.value.userInfo.userID,
+      resourceType: 2, // 课程类型
+      resourceID: props.courseId
+    });
+    
+    if (res.success && res.dataList && res.dataList.length > 0) {
+      learningProgress.value = res.dataList[0];
+      isEnrolled.value = true;
+    }
+  } catch (error) {
+    console.error('加载学习进度失败:', error);
+  }
+}
+
+// 处理收藏
+async function handleCollect() {
+  if (!authStore.value.userInfo?.userID) {
+    ElMessage.warning('请先登录');
+    router.push('/login');
+    return;
+  }
+  
+  try {
+    if (isCollected.value) {
+      // 取消收藏
+      const res = await userCollectionApi.removeCollection(
+        authStore.value.userInfo.userID,
+        CollectionType.COURSE,
+        props.courseId
+      );
+      if (res.success) {
+        isCollected.value = false;
+        ElMessage.success('已取消收藏');
+      }
+    } else {
+      // 添加收藏
+      const res = await userCollectionApi.addCollection({
+        userID: authStore.value.userInfo.userID,
+        collectionType: CollectionType.COURSE,
+        collectionID: props.courseId
+      });
+      if (res.success) {
+        isCollected.value = true;
+        ElMessage.success('收藏成功');
+      }
+    }
+  } catch (error) {
+    console.error('收藏操作失败:', error);
+    ElMessage.error('操作失败');
+  }
+}
+
+// 开始学习
+async function handleStartLearning() {
+  if (!authStore.value.userInfo?.userID) {
+    ElMessage.warning('请先登录');
+    router.push('/login');
+    return;
+  }
+  
+  if (!courseVO.value || courseVO.value.courseChapters.length === 0) {
+    ElMessage.warning('课程暂无内容');
+    return;
+  }
+  
+  enrolling.value = true;
+  try {
+    // 如果未报名，创建学习记录
+    if (!isEnrolled.value) {
+      await courseApi.incrementLearnCount(props.courseId);
+      await learningRecordApi.createRecord({
+        userID: authStore.value.userInfo.userID,
+        resourceType: 2, // 课程
+        resourceID: props.courseId,
+        progress: 0,
+        duration: 0,
+        isComplete: false
+      });
+      isEnrolled.value = true;
+    }
+    
+    // 跳转到学习页面，默认从第一章第一节开始
+    emit('start-learning', props.courseId, 0, 0);
+  } catch (error) {
+    console.error('开始学习失败:', error);
+    ElMessage.error('开始学习失败');
+  } finally {
+    enrolling.value = false;
+  }
+}
+
+// 点击节点
+function handleNodeClick(chapterIndex: number, nodeIndex: number) {
+  if (!authStore.value.userInfo?.userID) {
+    ElMessage.warning('请先登录');
+    router.push('/login');
+    return;
+  }
+  
+  emit('start-learning', props.courseId, chapterIndex, nodeIndex);
+}
+
+// 返回
+function handleBack() {
+  emit('back');
+}
+
+// 格式化时长
+function formatDuration(minutes?: number): string {
+  if (!minutes) return '0分钟';
+  
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  
+  if (hours > 0) {
+    return `${hours}小时${mins}分钟`;
+  }
+  return `${mins}分钟`;
+}
+</script>
+
+<style lang="scss" scoped>
+.course-detail {
+  min-height: 100vh;
+  background: #f5f7fa;
+  padding-bottom: 60px;
+}
+
+.page-header {
+  padding: 16px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.loading {
+  padding: 24px;
+  background: #fff;
+  margin: 16px;
+  border-radius: 8px;
+}
+
+.course-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.course-header {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+  display: flex;
+  gap: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.cover-section {
+  flex-shrink: 0;
+  
+  .cover-image {
+    width: 320px;
+    height: 240px;
+    object-fit: cover;
+    border-radius: 8px;
+    
+    @media (max-width: 768px) {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.info-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.course-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.course-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #606266;
+    font-size: 14px;
+    
+    .el-icon {
+      color: #909399;
+    }
+  }
+}
+
+.course-description {
+  color: #606266;
+  font-size: 14px;
+  line-height: 1.8;
+  
+  p {
+    margin: 0;
+  }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+}
+
+.learning-progress {
+  padding: 16px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  
+  .progress-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-size: 14px;
+    
+    .progress-text {
+      color: #409eff;
+      font-weight: 600;
+    }
+  }
+}
+
+.chapter-card {
+  :deep(.el-card__header) {
+    background: #fafafa;
+  }
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 18px;
+    font-weight: 600;
+    
+    .chapter-count {
+      font-size: 14px;
+      color: #909399;
+      font-weight: normal;
+    }
+  }
+}
+
+.chapter-title-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 20px;
+  
+  .chapter-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  
+  .chapter-meta {
+    font-size: 14px;
+    color: #909399;
+  }
+}
+
+.node-list {
+  padding: 8px 0;
+}
+
+.node-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  margin: 8px 0;
+  background: #fafafa;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s;
+  
+  &:hover {
+    background: #f0f2f5;
+    transform: translateX(4px);
+  }
+  
+  .node-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+    
+    .node-icon {
+      color: #409eff;
+      font-size: 18px;
+    }
+    
+    .node-name {
+      font-size: 14px;
+      color: #303133;
+    }
+  }
+  
+  .node-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    .node-duration {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: #909399;
+    }
+    
+    .arrow-icon {
+      color: #c0c4cc;
+      transition: transform 0.3s;
+    }
+  }
+  
+  &:hover .arrow-icon {
+    transform: translateX(4px);
+  }
+}
+
+.empty-tip {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.error-tip {
+  padding: 40px;
+}
+
+.floating-collect {
+  position: fixed;
+  bottom: 80px;
+  right: 40px;
+  z-index: 100;
+  
+  @media (max-width: 768px) {
+    bottom: 60px;
+    right: 20px;
+  }
+}
+</style>
+
--- a/schoolNewsWeb/src/views/course/components/CourseLearning.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseLearning.vue
@@ -0,0 +1,897 @@
+<template>
+  <div class="course-learning">
+    <!-- 学习页头部 -->
+    <div class="learning-header">
+      <div class="header-left">
+        <el-button @click="handleBack" :icon="ArrowLeft" text>
+          返回课程详情
+        </el-button>
+        <span class="course-name">{{ courseVO?.course.name }}</span>
+      </div>
+      
+      <div class="header-right">
+        <span class="progress-info">
+          学习进度：{{ currentProgress }}%
+        </span>
+      </div>
+    </div>
+
+    <div class="learning-container">
+      <!-- 左侧：章节目录 -->
+      <div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
+        <div class="sidebar-header">
+          <span class="sidebar-title">课程目录</span>
+          <el-button
+            text
+            :icon="sidebarCollapsed ? Expand : Fold"
+            @click="toggleSidebar"
+          />
+        </div>
+
+        <div v-if="!sidebarCollapsed" class="chapter-list">
+          <el-collapse v-model="activeChapters">
+            <el-collapse-item
+              v-for="(chapterVO, chapterIndex) in courseVO?.courseChapters || []"
+              :key="chapterIndex"
+              :name="chapterIndex"
+            >
+              <template #title>
+                <div class="chapter-item-title">
+                  <span>{{ chapterIndex + 1 }}. {{ chapterVO.chapter.name }}</span>
+                  <span class="chapter-count">{{ chapterVO.nodes.length }}</span>
+                </div>
+              </template>
+
+              <div class="node-items">
+                <div
+                  v-for="(node, nodeIndex) in chapterVO.nodes"
+                  :key="nodeIndex"
+                  class="node-item-bar"
+                  :class="{ 
+                    active: currentChapterIndex === chapterIndex && currentNodeIndex === nodeIndex,
+                    completed: isNodeCompleted(chapterIndex, nodeIndex)
+                  }"
+                  @click="selectNode(chapterIndex, nodeIndex)"
+                >
+                  <div class="node-item-content">
+                    <el-icon v-if="isNodeCompleted(chapterIndex, nodeIndex)" class="check-icon">
+                      <CircleCheck />
+                    </el-icon>
+                    <el-icon v-else class="node-type-icon">
+                      <Document v-if="node.nodeType === 0" />
+                      <Edit v-else-if="node.nodeType === 1" />
+                      <Upload v-else />
+                    </el-icon>
+                    <span class="node-item-name">{{ node.name }}</span>
+                  </div>
+                  <div class="node-item-meta">
+                    <el-tag
+                      v-if="node.isRequired === 1"
+                      type="danger"
+                      size="small"
+                      effect="plain"
+                    >
+                      必修
+                    </el-tag>
+                    <span v-if="node.duration" class="node-duration">
+                      {{ node.duration }}分钟
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+
+      <!-- 右侧：学习内容区 -->
+      <div class="content-area" :class="{ expanded: sidebarCollapsed }">
+        <!-- 加载中 -->
+        <div v-if="loading" class="loading-container">
+          <el-skeleton :rows="8" animated />
+        </div>
+
+        <!-- 节点内容 -->
+        <div v-else-if="currentNode" class="node-content">
+          <div class="node-header">
+            <h2 class="node-title">{{ currentNode.name }}</h2>
+            <div class="node-meta">
+              <el-tag v-if="currentNode.isRequired === 1" type="danger" size="small">
+                必修
+              </el-tag>
+              <span v-if="currentNode.duration" class="duration">
+                <el-icon><Clock /></el-icon>
+                {{ currentNode.duration }} 分钟
+              </span>
+            </div>
+          </div>
+
+          <!-- 文章资源 -->
+          <div v-if="currentNode.nodeType === 0 && articleData" class="article-content">
+            <ArticleShowView
+              :as-dialog="false"
+              :article-data="articleData"
+              :category-list="[]"
+            />
+          </div>
+
+          <!-- 富文本内容 -->
+          <div v-else-if="currentNode.nodeType === 1" class="rich-text-content" v-html="currentNode.content">
+          </div>
+
+          <!-- 文件内容 -->
+          <div v-else-if="currentNode.nodeType === 2" class="file-content">
+            <div v-if="isVideoFile(currentNode.videoUrl)" class="video-wrapper">
+              <video
+                :src="getFileUrl(currentNode.videoUrl)"
+                controls
+                class="video-player"
+                @timeupdate="handleVideoProgress"
+                @ended="handleVideoEnded"
+              >
+                您的浏览器不支持视频播放
+              </video>
+            </div>
+            <div v-else-if="isAudioFile(currentNode.videoUrl)" class="audio-wrapper">
+              <audio
+                :src="getFileUrl(currentNode.videoUrl)"
+                controls
+                class="audio-player"
+                @timeupdate="handleAudioProgress"
+                @ended="handleAudioEnded"
+              >
+                您的浏览器不支持音频播放
+              </audio>
+            </div>
+            <div v-else class="file-download">
+              <el-icon class="file-icon"><Document /></el-icon>
+              <p>文件资源</p>
+              <el-button type="primary" @click="downloadFile(currentNode.videoUrl)">
+                <el-icon><Download /></el-icon>
+                下载文件
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 学习操作 -->
+          <div class="learning-actions">
+            <el-button
+              @click="markAsComplete"
+              :type="isCurrentNodeCompleted ? 'success' : 'primary'"
+              :disabled="isCurrentNodeCompleted"
+            >
+              <el-icon><CircleCheck /></el-icon>
+              {{ isCurrentNodeCompleted ? '已完成' : '标记为完成' }}
+            </el-button>
+
+            <div class="navigation-buttons">
+              <el-button
+                @click="gotoPrevious"
+                :disabled="!hasPrevious"
+                :icon="ArrowLeft"
+              >
+                上一节
+              </el-button>
+              <el-button
+                @click="gotoNext"
+                :disabled="!hasNext"
+                type="primary"
+              >
+                下一节
+                <el-icon><ArrowRight /></el-icon>
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 暂无内容 -->
+        <div v-else class="empty-content">
+          <el-empty description="暂无学习内容" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ElMessage } from 'element-plus';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Expand,
+  Fold,
+  CircleCheck,
+  Document,
+  Edit,
+  Upload,
+  Clock,
+  Download
+} from '@element-plus/icons-vue';
+import { ArticleShowView } from '@/views/article';
+import { courseApi } from '@/apis/study';
+import { learningRecordApi } from '@/apis/study';
+import { resourceApi } from '@/apis/resource';
+import { useStore } from 'vuex';
+import { FILE_DOWNLOAD_URL } from '@/config';
+import type { CourseVO, LearningRecord } from '@/types';
+
+interface Props {
+  courseId: string;
+  chapterIndex?: number;
+  nodeIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  chapterIndex: 0,
+  nodeIndex: 0
+});
+
+const emit = defineEmits<{
+  'back': [];
+}>();
+
+const store = useStore();
+const authStore = computed(() => store.state.auth);
+
+const loading = ref(false);
+const courseVO = ref<CourseVO | null>(null);
+const currentChapterIndex = ref(0);
+const currentNodeIndex = ref(0);
+const sidebarCollapsed = ref(false);
+const activeChapters = ref<number[]>([0]);
+const articleData = ref<any>(null);
+
+// 学习记录
+const learningRecord = ref<LearningRecord | null>(null);
+const completedNodes = ref<Set<string>>(new Set());
+const learningStartTime = ref<number>(0);
+const learningTimer = ref<number | null>(null);
+
+// 当前节点
+const currentNode = computed(() => {
+  if (!courseVO.value || !courseVO.value.courseChapters) return null;
+  
+  const chapter = courseVO.value.courseChapters[currentChapterIndex.value];
+  if (!chapter || !chapter.nodes) return null;
+  
+  return chapter.nodes[currentNodeIndex.value] || null;
+});
+
+// 当前进度
+const currentProgress = computed(() => {
+  if (!courseVO.value || !courseVO.value.courseChapters) return 0;
+  
+  let totalNodes = 0;
+  let completedCount = 0;
+  
+  courseVO.value.courseChapters.forEach((chapter, chapterIdx) => {
+    chapter.nodes.forEach((node, nodeIdx) => {
+      totalNodes++;
+      if (isNodeCompleted(chapterIdx, nodeIdx)) {
+        completedCount++;
+      }
+    });
+  });
+  
+  if (totalNodes === 0) return 0;
+  return Math.round((completedCount / totalNodes) * 100);
+});
+
+// 是否有上一节
+const hasPrevious = computed(() => {
+  if (currentChapterIndex.value === 0 && currentNodeIndex.value === 0) {
+    return false;
+  }
+  return true;
+});
+
+// 是否有下一节
+const hasNext = computed(() => {
+  if (!courseVO.value || !courseVO.value.courseChapters) return false;
+  
+  const chapters = courseVO.value.courseChapters;
+  const currentChapter = chapters[currentChapterIndex.value];
+  
+  if (!currentChapter) return false;
+  
+  // 不是当前章节的最后一个节点
+  if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
+    return true;
+  }
+  
+  // 不是最后一章
+  if (currentChapterIndex.value < chapters.length - 1) {
+    return true;
+  }
+  
+  return false;
+});
+
+// 当前节点是否完成
+const isCurrentNodeCompleted = computed(() => {
+  return isNodeCompleted(currentChapterIndex.value, currentNodeIndex.value);
+});
+
+watch(() => props.courseId, (newId) => {
+  if (newId) {
+    loadCourse();
+  }
+}, { immediate: true });
+
+watch(() => [props.chapterIndex, props.nodeIndex], () => {
+  currentChapterIndex.value = props.chapterIndex || 0;
+  currentNodeIndex.value = props.nodeIndex || 0;
+  loadNodeContent();
+}, { immediate: true });
+
+watch(currentNode, () => {
+  if (currentNode.value) {
+    loadNodeContent();
+  }
+});
+
+onMounted(() => {
+  startLearningTimer();
+});
+
+onBeforeUnmount(() => {
+  stopLearningTimer();
+  saveLearningProgress();
+});
+
+// 加载课程
+async function loadCourse() {
+  loading.value = true;
+  try {
+    const res = await courseApi.getCourseById(props.courseId);
+    if (res.success && res.data) {
+      courseVO.value = res.data;
+      
+      // 确保数据结构完整
+      if (!courseVO.value.courseChapters) {
+        courseVO.value.courseChapters = [];
+      }
+      courseVO.value.courseChapters.forEach((chapter) => {
+        if (!chapter.nodes) {
+          chapter.nodes = [];
+        }
+      });
+      
+      // 加载学习记录
+      await loadLearningRecord();
+    }
+  } catch (error) {
+    console.error('加载课程失败:', error);
+    ElMessage.error('加载课程失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 加载学习记录
+async function loadLearningRecord() {
+  if (!authStore.value.userInfo?.userID) return;
+  
+  try {
+    const res = await learningRecordApi.getRecordList({
+      userID: authStore.value.userInfo.userID,
+      resourceType: 2, // 课程
+      resourceID: props.courseId
+    });
+    
+    if (res.success && res.dataList && res.dataList.length > 0) {
+      learningRecord.value = res.dataList[0];
+      
+      // TODO: 从后端获取已完成的节点列表
+      // 这里暂时用本地存储模拟
+      const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
+      if (savedProgress) {
+        completedNodes.value = new Set(JSON.parse(savedProgress));
+      }
+    }
+  } catch (error) {
+    console.error('加载学习记录失败:', error);
+  }
+}
+
+// 加载节点内容
+async function loadNodeContent() {
+  if (!currentNode.value) return;
+  
+  // 如果是文章资源，加载文章内容
+  if (currentNode.value.nodeType === 0 && currentNode.value.resourceID) {
+    try {
+      const res = await resourceApi.getResourceById(currentNode.value.resourceID);
+      if (res.success && res.data) {
+        articleData.value = {
+          ...res.data.resource,
+          tags: res.data.tags || []
+        };
+      }
+    } catch (error) {
+      console.error('加载文章失败:', error);
+    }
+  } else {
+    articleData.value = null;
+  }
+  
+  // 展开当前章节
+  if (!activeChapters.value.includes(currentChapterIndex.value)) {
+    activeChapters.value.push(currentChapterIndex.value);
+  }
+}
+
+// 选择节点
+function selectNode(chapterIndex: number, nodeIndex: number) {
+  currentChapterIndex.value = chapterIndex;
+  currentNodeIndex.value = nodeIndex;
+}
+
+// 上一节
+function gotoPrevious() {
+  if (!hasPrevious.value || !courseVO.value) return;
+  
+  if (currentNodeIndex.value > 0) {
+    currentNodeIndex.value--;
+  } else {
+    // 跳到上一章的最后一节
+    currentChapterIndex.value--;
+    const prevChapter = courseVO.value.courseChapters[currentChapterIndex.value];
+    currentNodeIndex.value = prevChapter.nodes.length - 1;
+  }
+}
+
+// 下一节
+function gotoNext() {
+  if (!hasNext.value || !courseVO.value) return;
+  
+  const currentChapter = courseVO.value.courseChapters[currentChapterIndex.value];
+  
+  if (currentNodeIndex.value < currentChapter.nodes.length - 1) {
+    currentNodeIndex.value++;
+  } else {
+    // 跳到下一章的第一节
+    currentChapterIndex.value++;
+    currentNodeIndex.value = 0;
+  }
+}
+
+// 标记为完成
+function markAsComplete() {
+  if (!currentNode.value) return;
+  
+  const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
+  completedNodes.value.add(nodeKey);
+  
+  // 保存到本地存储
+  localStorage.setItem(
+    `course_${props.courseId}_nodes`,
+    JSON.stringify(Array.from(completedNodes.value))
+  );
+  
+  ElMessage.success('已标记为完成');
+  
+  // 自动跳转到下一节
+  if (hasNext.value) {
+    setTimeout(() => {
+      gotoNext();
+    }, 500);
+  } else {
+    // 课程全部完成
+    ElMessage.success('恭喜你完成了整个课程！');
+  }
+  
+  // 更新学习进度
+  saveLearningProgress();
+}
+
+// 判断节点是否完成
+function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
+  const nodeKey = `${chapterIndex}-${nodeIndex}`;
+  return completedNodes.value.has(nodeKey);
+}
+
+// 开始学习计时
+function startLearningTimer() {
+  learningStartTime.value = Date.now();
+  
+  // 每分钟保存一次学习进度
+  learningTimer.value = window.setInterval(() => {
+    saveLearningProgress();
+  }, 60000); // 60秒
+}
+
+// 停止学习计时
+function stopLearningTimer() {
+  if (learningTimer.value) {
+    clearInterval(learningTimer.value);
+    learningTimer.value = null;
+  }
+}
+
+// 保存学习进度
+async function saveLearningProgress() {
+  if (!authStore.value.userInfo?.userID || !learningRecord.value) return;
+  
+  const currentTime = Date.now();
+  const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
+  
+  try {
+    await learningRecordApi.updateRecord({
+      ...learningRecord.value,
+      duration: (learningRecord.value.duration || 0) + duration,
+      progress: currentProgress.value,
+      isComplete: currentProgress.value === 100,
+      lastLearnTime: new Date().toISOString()
+    });
+    
+    // 重置开始时间
+    learningStartTime.value = currentTime;
+  } catch (error) {
+    console.error('保存学习进度失败:', error);
+  }
+}
+
+// 处理视频进度
+function handleVideoProgress(event: Event) {
+  // 可以在这里记录视频播放进度
+  const video = event.target as HTMLVideoElement;
+  const progress = (video.currentTime / video.duration) * 100;
+  
+  // 如果播放超过80%，自动标记为完成
+  if (progress > 80 && !isCurrentNodeCompleted.value) {
+    // markAsComplete();
+  }
+}
+
+// 处理视频结束
+function handleVideoEnded() {
+  if (!isCurrentNodeCompleted.value) {
+    markAsComplete();
+  }
+}
+
+// 处理音频进度
+function handleAudioProgress(event: Event) {
+  const audio = event.target as HTMLAudioElement;
+  const progress = (audio.currentTime / audio.duration) * 100;
+  
+  if (progress > 80 && !isCurrentNodeCompleted.value) {
+    // markAsComplete();
+  }
+}
+
+// 处理音频结束
+function handleAudioEnded() {
+  if (!isCurrentNodeCompleted.value) {
+    markAsComplete();
+  }
+}
+
+// 判断是否为视频文件
+function isVideoFile(url?: string): boolean {
+  if (!url) return false;
+  const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
+// 判断是否为音频文件
+function isAudioFile(url?: string): boolean {
+  if (!url) return false;
+  const audioExtensions = ['.mp3', '.wav', '.ogg', '.m4a'];
+  return audioExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
+// 获取文件URL
+function getFileUrl(fileId?: string): string {
+  if (!fileId) return '';
+  return FILE_DOWNLOAD_URL + fileId;
+}
+
+// 下载文件
+function downloadFile(fileId?: string) {
+  if (!fileId) return;
+  window.open(getFileUrl(fileId), '_blank');
+}
+
+// 切换侧边栏
+function toggleSidebar() {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+
+// 返回
+function handleBack() {
+  stopLearningTimer();
+  saveLearningProgress();
+  emit('back');
+}
+</script>
+
+<style lang="scss" scoped>
+.course-learning {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+}
+
+.learning-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    
+    .course-name {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+  
+  .header-right {
+    .progress-info {
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+}
+
+.learning-container {
+  display: flex;
+  flex: 1;
+  height: calc(100vh - 61px);
+}
+
+.chapter-sidebar {
+  width: 320px;
+  background: #fff;
+  border-right: 1px solid #e4e7ed;
+  overflow-y: auto;
+  transition: width 0.3s;
+  
+  &.collapsed {
+    width: 0;
+    overflow: hidden;
+  }
+  
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    border-bottom: 1px solid #e4e7ed;
+    
+    .sidebar-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+  
+  .chapter-list {
+    padding: 8px;
+  }
+}
+
+.chapter-item-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  
+  .chapter-count {
+    font-size: 12px;
+    color: #909399;
+    background: #f5f7fa;
+    padding: 2px 8px;
+    border-radius: 10px;
+  }
+}
+
+.node-items {
+  padding-left: 12px;
+}
+
+.node-item-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  margin: 4px 0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: #f5f7fa;
+  }
+  
+  &.active {
+    background: #ecf5ff;
+    color: #409eff;
+  }
+  
+  &.completed {
+    .check-icon {
+      color: #67c23a;
+    }
+  }
+  
+  .node-item-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+    
+    .node-type-icon {
+      font-size: 16px;
+      color: #909399;
+    }
+    
+    .check-icon {
+      font-size: 16px;
+    }
+    
+    .node-item-name {
+      font-size: 13px;
+      color: #606266;
+    }
+  }
+  
+  .node-item-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .node-duration {
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+
+.content-area {
+  flex: 1;
+  overflow-y: auto;
+  background: #fff;
+  
+  &.expanded {
+    margin-left: 0;
+  }
+}
+
+.loading-container {
+  padding: 24px;
+}
+
+.node-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.node-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e4e7ed;
+  
+  .node-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0 0 12px 0;
+  }
+  
+  .node-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    
+    .duration {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 14px;
+      color: #606266;
+    }
+  }
+}
+
+.article-content,
+.rich-text-content {
+  margin-bottom: 24px;
+  line-height: 1.8;
+  color: #303133;
+}
+
+.rich-text-content {
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+  }
+  
+  :deep(video) {
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.file-content {
+  margin-bottom: 24px;
+  
+  .video-wrapper,
+  .audio-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 24px;
+    background: #000;
+    border-radius: 8px;
+    
+    .video-player {
+      max-width: 100%;
+      max-height: 500px;
+    }
+    
+    .audio-player {
+      width: 100%;
+    }
+  }
+  
+  .file-download {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    
+    .file-icon {
+      font-size: 64px;
+      color: #909399;
+      margin-bottom: 16px;
+    }
+    
+    p {
+      margin-bottom: 16px;
+      color: #606266;
+    }
+  }
+}
+
+.learning-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 24px;
+  border-top: 1px solid #e4e7ed;
+  
+  .navigation-buttons {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.empty-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  min-height: 400px;
+}
+</style>
+
--- a/schoolNewsWeb/src/views/admin/manage/study/components/CourseList.vue
+++ b/schoolNewsWeb/src/views/admin/manage/study/components/CourseList.vue
--- a/schoolNewsWeb/src/views/course/components/index.ts
+++ b/schoolNewsWeb/src/views/course/components/index.ts
@@ -0,0 +1,4 @@
+export { default as CourseDetail } from './CourseDetail.vue';
+export { default as CourseLearning } from './CourseLearning.vue';
+export { default as CourseAdd } from './CourseAdd.vue';
+export { default as CourseList } from './CourseList.vue';
--- a/schoolNewsWeb/src/views/course/index.ts
+++ b/schoolNewsWeb/src/views/course/index.ts
@@ -0,0 +1 @@
+export * from './components';
--- a/schoolNewsWeb/src/views/resource-center/ResourceCenterView.vue
+++ b/schoolNewsWeb/src/views/resource-center/ResourceCenterView.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="resource-center-view">
-    <ResourceHead 
+    <CenterHead 
+      title="资源中心"
      :category-name="currentCategoryName"
      :show-article-mode="showArticle"
    />
@@ -37,8 +38,8 @@

 <script setup lang="ts">
 import { ref } from 'vue';
-import { ResourceHead, ResourceSideBar, ResourceList, ResourceArticle } from './components';
-import { Search } from '@/components/base';
+import { ResourceSideBar, ResourceList, ResourceArticle } from './components';
+import { Search, CenterHead } from '@/components/base';
 import type { Resource, ResourceCategory } from '@/types/resource';

 const showArticle = ref(false);
--- a/schoolNewsWeb/src/views/resource-center/components/ResourceList.vue
+++ b/schoolNewsWeb/src/views/resource-center/components/ResourceList.vue
@@ -96,7 +96,7 @@ async function loadResources() {
    
    if (res.success && res.dataList) {
      resources.value = res.dataList;
-      total.value = res.pageDomain?.total || 0;
+      total.value = res.pageDomain?.pageParam.totalElements || 0;
      
      // 通知父组件列表已更新
      emit('list-updated', res.dataList);
--- a/schoolNewsWeb/src/views/resource-center/components/index.ts
+++ b/schoolNewsWeb/src/views/resource-center/components/index.ts
@@ -1,4 +1,4 @@
-export { default as ResourceHead } from './ResourceHead.vue';
+export { default as ResourceHead } from '../../../components/base/ResourceHead.vue';
 export { default as ResourceSideBar } from './ResourceSideBar.vue';
 export { default as ResourceList } from './ResourceList.vue';
 export { default as ResourceArticle } from './ResourceArticle.vue';
--- a/schoolNewsWeb/src/views/study-plan/CourseCenterView.vue
+++ b/schoolNewsWeb/src/views/study-plan/CourseCenterView.vue
@@ -1,227 +1,440 @@
 <template>
-  <div class="course-center">
-    <div class="course-header">
-      <h2>课程中心</h2>
-      <div class="course-categories">
-        <div 
-          class="category-tab" 
-          v-for="category in categories" 
-          :key="category.id"
-          :class="{ active: activeCategory === category.id }"
-          @click="activeCategory = category.id"
-        >
-          {{ category.name }}
+  <StudyPlanLayout category-name="课程中心">
+    <!-- 主要内容区 -->
+    <div class="main-content">
+      <div class="container">
+        <!-- 页面标题 -->
+        <h2 class="page-title">课程列表</h2>
+
+        <!-- 搜索和筛选 -->
+        <div class="search-filter-bar">
+          <div class="search-box">
+            <el-input
+              v-model="searchKeyword"
+              placeholder="搜索思政资源"
+              class="search-input"
+              clearable
+              @keyup.enter="handleSearch"
+            >
+              <template #suffix>
+                <el-button
+                  type="danger"
+                  circle
+                  @click="handleSearch"
+                  class="search-button"
+                >
+                  <el-icon><Search /></el-icon>
+                </el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+
+        <!-- 课程列表 -->
+        <div v-if="loading" class="loading-container">
+          <el-skeleton :rows="6" animated />
+        </div>
+
+        <div v-else-if="courseList.length > 0" class="course-grid">
+          <div
+            v-for="course in courseList"
+            :key="course.courseID"
+            class="course-card"
+            @click="handleCourseClick(course.courseID || '')"
+          >
+            <!-- 课程封面 -->
+            <div class="course-cover">
+              <img
+                :src="course.coverImage ? FILE_DOWNLOAD_URL + course.coverImage : defaultCover"
+                :alt="course.name"
+                class="cover-image"
+              />
+              <!-- 课程类型标签 -->
+              <div class="course-type-tag">
+                <el-icon><VideoPlay /></el-icon>
+                <span>视频课程</span>
+              </div>
+              <!-- 分类标签 -->
+              <div class="category-tag">
+                {{ getCategoryName() }}
+              </div>
+            </div>
+
+            <!-- 课程信息 -->
+            <div class="course-info">
+              <div class="view-count">
+                {{ formatViewCount(course.viewCount) }}次浏览
+              </div>
+              <h3 class="course-title">{{ course.name }}</h3>
+              <p class="course-desc">
+                {{ course.description || '暂无描述' }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="empty-state">
+          <el-empty description="暂无课程" />
+        </div>
+
+        <!-- 分页 -->
+        <div v-if="total > 0" class="pagination-container">
+          <el-pagination
+            v-model:current-page="pageParam.page"
+            v-model:page-size="pageParam.size"
+            :total="total"
+            :page-sizes="[6, 12, 24, 48]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
        </div>
      </div>
    </div>

-    <div class="course-grid">
-      <div class="course-card" v-for="course in filteredCourses" :key="course.id" @click="viewCourse(course)">
-        <div class="course-cover">
-          <img :src="course.cover" :alt="course.title" />
-          <div class="course-duration">{{ course.duration }}</div>
-        </div>
-        <div class="course-info">
-          <h3>{{ course.title }}</h3>
-          <p class="course-description">{{ course.description }}</p>
-          <div class="course-meta">
-            <span class="course-teacher">
-              <i class="icon">👨‍🏫</i>
-              {{ course.teacher }}
-            </span>
-            <span class="course-students">
-              <i class="icon">👥</i>
-              {{ course.students }} 人学习
-            </span>
-          </div>
-          <div class="course-footer">
-            <div class="course-rating">
-              <span class="rating-stars">★★★★★</span>
-              <span class="rating-score">{{ course.rating }}</span>
-            </div>
-            <el-button type="primary" size="small">开始学习</el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+    <!-- 课程详情对话框 -->
+    <el-drawer
+      v-model="detailDrawerVisible"
+      size="100%"
+      :show-close="false"
+      :with-header="false"
+      direction="rtl"
+    >
+      <CourseDetail
+        v-if="selectedCourseId"
+        :course-id="selectedCourseId"
+        @back="handleCloseDetail"
+        @start-learning="handleStartLearning"
+      />
+    </el-drawer>
+
+    <!-- 课程学习对话框 -->
+    <el-drawer
+      v-model="learningDrawerVisible"
+      size="100%"
+      :show-close="false"
+      :with-header="false"
+      direction="rtl"
+    >
+      <CourseLearning
+        v-if="learningCourseId"
+        :course-id="learningCourseId"
+        :chapter-index="chapterIndex"
+        :node-index="nodeIndex"
+        @back="handleCloseLearning"
+      />
+    </el-drawer>
+  </StudyPlanLayout>
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { ElButton } from 'element-plus';
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Search, VideoPlay } from '@element-plus/icons-vue';
+import { CourseDetail, CourseLearning } from '@/views/course';
+import { courseApi } from '@/apis/study';
+import type { Course, PageParam } from '@/types';
+import { StudyPlanLayout } from '@/views/study-plan';
+import defaultCover from '@/assets/imgs/default-course-bg.png'
+import { FILE_DOWNLOAD_URL } from '@/config';

-const router = useRouter();
-const activeCategory = ref('all');
-const courses = ref<any[]>([]);
-
-const categories = [
-  { id: 'all', name: '全部课程' },
-  { id: 'party-history', name: '党史教育' },
-  { id: 'theory', name: '理论学习' },
-  { id: 'policy', name: '政策解读' },
-  { id: 'ethics', name: '道德修养' }
-];
-
-const filteredCourses = computed(() => {
-  if (activeCategory.value === 'all') return courses.value;
-  return courses.value.filter(course => course.category === activeCategory.value);
+defineOptions({
+  name: 'CourseCenterView'
 });

+const loading = ref(false);
+const searchKeyword = ref('');
+const courseList = ref<Course[]>([]);
+const total = ref(0);
+
+// 分页参数
+const pageParam = ref<PageParam>({
+  page: 1,
+  size: 6
+});
+
+// 课程详情
+const detailDrawerVisible = ref(false);
+const selectedCourseId = ref<string>('');
+
+// 课程学习
+const learningDrawerVisible = ref(false);
+const learningCourseId = ref<string>('');
+const chapterIndex = ref(0);
+const nodeIndex = ref(0);
+
 onMounted(() => {
-  // TODO: 加载课程数据
+  loadCourseList();
 });

-function viewCourse(course: any) {
-  router.push(`/study/course/${course.id}`);
+// 加载课程列表
+async function loadCourseList() {
+  loading.value = true;
+  try {
+    const filter: Course = {
+      status: 1 // 只显示已上线的课程
+    };
+    
+    if (searchKeyword.value) {
+      filter.name = searchKeyword.value;
+    }
+    
+    const res = await courseApi.getCoursePage(pageParam.value, filter);
+    
+    if (res.success) {
+      courseList.value = res.dataList || [];
+      total.value = res.pageParam?.totalElements || 0;
+    } else {
+      ElMessage.error('加载课程列表失败');
+    }
+  } catch (error) {
+    console.error('加载课程列表失败:', error);
+    ElMessage.error('加载课程列表失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pageParam.value.page = 1;
+  loadCourseList();
+}
+
+// 分页大小改变
+function handleSizeChange() {
+  loadCourseList();
+}
+
+// 当前页改变
+function handleCurrentChange() {
+  loadCourseList();
+}
+
+// 点击课程卡片
+function handleCourseClick(courseId: string) {
+  selectedCourseId.value = courseId;
+  detailDrawerVisible.value = true;
+}
+
+// 关闭课程详情
+function handleCloseDetail() {
+  detailDrawerVisible.value = false;
+  selectedCourseId.value = '';
+}
+
+// 开始学习
+function handleStartLearning(courseId: string, chapter: number, node: number) {
+  detailDrawerVisible.value = false;
+  learningCourseId.value = courseId;
+  chapterIndex.value = chapter;
+  nodeIndex.value = node;
+  learningDrawerVisible.value = true;
+}
+
+// 关闭学习页面
+function handleCloseLearning() {
+  learningDrawerVisible.value = false;
+  learningCourseId.value = '';
+  chapterIndex.value = 0;
+  nodeIndex.value = 0;
+}
+
+// 格式化浏览次数
+function formatViewCount(count?: number): string {
+  if (!count) return '0';
+  if (count >= 10000) {
+    return (count / 10000).toFixed(1) + 'w';
+  }
+  return count.toString();
+}
+
+// 获取分类名称（这里简化处理，实际应该从课程标签中获取）
+function getCategoryName(): string {
+  // TODO: 从 courseTags 中获取第一个标签作为分类
+  return '党史学习';
 }
 </script>

 <style lang="scss" scoped>
-.course-center {
-  padding: 40px;
-}
-
-.course-header {
-  margin-bottom: 32px;
+.main-content {
+  padding: 40px 0 80px;
  
-  h2 {
-    font-size: 24px;
-    font-weight: 600;
-    color: #141F38;
-    margin-bottom: 20px;
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 24px;
  }
 }

-.course-categories {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
+.page-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #141F38;
+  margin: 0 0 32px 0;
 }

-.category-tab {
-  padding: 8px 20px;
-  background: #f5f5f5;
-  border-radius: 20px;
-  font-size: 14px;
-  color: #666;
-  cursor: pointer;
-  transition: all 0.3s;
+.search-filter-bar {
+  margin-bottom: 40px;
  
-  &:hover {
-    background: #ffe6e6;
-    color: #C62828;
-  }
-  
-  &.active {
-    background: #C62828;
-    color: white;
+  .search-box {
+    max-width: 400px;
+    
+    .search-input {
+      :deep(.el-input__wrapper) {
+        border-radius: 30px;
+        padding-right: 4px;
+      }
+      
+      .search-button {
+        width: 36px;
+        height: 36px;
+        background: #C62828;
+        border: none;
+        
+        &:hover {
+          background: #A82020;
+        }
+      }
+    }
  }
 }

+.loading-container {
+  padding: 40px 0;
+}
+
 .course-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
+  margin-bottom: 40px;
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
 }

 .course-card {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  background: #fff;
+  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
+  border: 1px solid transparent;
  
  &:hover {
-    border-color: #C62828;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(164, 182, 199, 0.2);
+    border-color: rgba(0, 0, 0, 0.1);
  }
-}
-
-.course-cover {
-  position: relative;
-  width: 100%;
-  height: 200px;
-  background: #f5f5f5;
  
-  img {
+  .course-cover {
+    position: relative;
    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    height: 221px;
+    overflow: hidden;
+    
+    .cover-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s;
+    }
+    
+    .course-type-tag {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      background: rgba(198, 40, 40, 0.9);
+      color: #fff;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      
+      .el-icon {
+        font-size: 16px;
+      }
+    }
+    
+    .category-tag {
+      position: absolute;
+      bottom: -1px;
+      right: -2px;
+      padding: 3px 26px;
+      background: #D1AD79;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 600;
+      border-radius: 0 0 10px 0;
+    }
  }
-}
-
-.course-duration {
-  position: absolute;
-  bottom: 12px;
-  right: 12px;
-  padding: 4px 12px;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.course-info {
-  padding: 20px;
  
-  h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: #141F38;
-    margin-bottom: 12px;
-    line-height: 1.4;
+  &:hover .cover-image {
+    transform: scale(1.05);
  }
-}
-
-.course-description {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.6;
-  margin-bottom: 16px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.course-meta {
-  display: flex;
-  gap: 20px;
-  margin-bottom: 16px;
-  font-size: 13px;
-  color: #999;
  
-  .icon {
-    margin-right: 4px;
+  .course-info {
+    padding: 22px;
+    
+    .view-count {
+      position: absolute;
+      top: 232px;
+      right: 22px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.3);
+      margin-bottom: 8px;
+    }
+    
+    .course-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #141F38;
+      margin: 0 0 8px 0;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .course-desc {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.3);
+      line-height: 1.6;
+      margin: 0;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-height: 88px;
+    }
  }
 }

-.course-footer {
+.empty-state {
+  padding: 80px 0;
+  text-align: center;
+}
+
+.pagination-container {
  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
+  justify-content: center;
+  margin-top: 40px;
 }

-.course-rating {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.rating-stars {
-  color: #FFB400;
-  font-size: 14px;
-}
-
-.rating-score {
-  font-size: 14px;
-  font-weight: 600;
-  color: #141F38;
+:deep(.el-drawer) {
+  .el-drawer__body {
+    padding: 0;
+  }
 }
 </style>
-
--- a/schoolNewsWeb/src/views/study-plan/StudyPlanLayout.vue
+++ b/schoolNewsWeb/src/views/study-plan/StudyPlanLayout.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="study-plan-layout">
+    <!-- Banner 横幅 -->
+    <CenterHead 
+      title="学习中心" 
+      :category-name="categoryName"
+    />
+
+    <!-- Tab 导航 -->
+    <MenuNav :menus="menus" @menu-click="handleMenuClick" />
+  
+    <!-- 内容插槽 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter, useRoute } from 'vue-router';
+import { MenuNav, CenterHead } from '@/components/base';
+import { getParentChildrenRoutes } from '@/utils/routeUtils';
+import type { SysMenu } from '@/types';
+
+defineOptions({
+  name: 'StudyPlanLayout'
+});
+
+interface Props {
+  categoryName?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  categoryName: '学习中心'
+});
+
+const router = useRouter();
+const route = useRoute();
+
+const routes = getParentChildrenRoutes(route);
+// 将路由转换为菜单格式
+const menus = routes.map((r, index) => ({
+  menuID: r.name?.toString() || `menu-${index}`,
+  name: (r.meta?.title as string) || '',
+  url: r.path || '',
+  orderNum: index
+})) as SysMenu[];
+
+// 菜单点击事件
+function handleMenuClick(menu: SysMenu) {
+  if (menu.url) {
+    router.push(menu.url);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.study-plan-layout {
+  min-height: 100vh;
+  background: #F9F9F9;
+}
+</style>
--- a/schoolNewsWeb/src/views/study-plan/StudyPlanView.vue
+++ b/schoolNewsWeb/src/views/study-plan/StudyPlanView.vue
@@ -1,113 +0,0 @@
-<template>
-  <div class="study-plan-page">
-    <div class="page-header">
-      <h1>学习计划</h1>
-      <p class="page-description">制定学习计划，完成学习任务，提升思政素养</p>
-    </div>
-
-    <div class="plan-tabs">
-      <div 
-        class="plan-tab" 
-        v-for="tab in tabs" 
-        :key="tab.key"
-        :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.label }}
-      </div>
-    </div>
-
-    <div class="plan-content">
-      <component :is="currentComponent" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import StudyTasks from './components/StudyTasks.vue';
-import CourseCenter from './components/CourseCenter.vue';
-
-const activeTab = ref('tasks');
-
-const tabs = [
-  { key: 'tasks', label: '学习任务' },
-  { key: 'courses', label: '课程中心' }
-];
-
-const componentMap: Record<string, any> = {
-  'tasks': StudyTasks,
-  'courses': CourseCenter
-};
-
-const currentComponent = computed(() => componentMap[activeTab.value]);
-</script>
-
-<style lang="scss" scoped>
-.study-plan-page {
-  min-height: 100vh;
-  background: #f5f5f5;
-  padding: 20px;
-}
-
-.page-header {
-  background: white;
-  padding: 40px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  
-  h1 {
-    font-size: 32px;
-    font-weight: 600;
-    color: #141F38;
-    margin-bottom: 8px;
-  }
-}
-
-.page-description {
-  font-size: 16px;
-  color: #666;
-}
-
-.plan-tabs {
-  background: white;
-  padding: 0 40px;
-  display: flex;
-  gap: 8px;
-  border-radius: 8px 8px 0 0;
-}
-
-.plan-tab {
-  padding: 16px 24px;
-  cursor: pointer;
-  font-size: 16px;
-  color: #666;
-  position: relative;
-  transition: all 0.3s;
-  
-  &:hover {
-    color: #C62828;
-  }
-  
-  &.active {
-    color: #C62828;
-    font-weight: 600;
-    
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: #C62828;
-    }
-  }
-}
-
-.plan-content {
-  background: white;
-  border-radius: 0 0 8px 8px;
-}
-</style>
-
--- a/schoolNewsWeb/src/views/study-plan/StudyTasksView.vue
+++ b/schoolNewsWeb/src/views/study-plan/StudyTasksView.vue
@@ -1,297 +1,589 @@
 <template>
-  <div class="study-tasks">
-    <!-- 任务统计 -->
-    <div class="task-statistics">
-      <div class="stat-card" v-for="stat in statistics" :key="stat.label">
-        <div class="stat-value">{{ stat.value }}</div>
-        <div class="stat-label">{{ stat.label }}</div>
-      </div>
-    </div>
+  <StudyPlanLayout category-name="学习任务">
+    <!-- 主要内容区 -->
+    <div class="main-content">
+      <div class="container">
+        <!-- 任务进度 -->
+        <h2 class="section-title">任务进度</h2>
+        <div class="progress-card">
+          <div class="progress-info">
+            <div class="progress-header">
+              <span class="progress-text">当前学习进度（{{ completedCount }}/{{ totalCount }}）</span>
+              <span class="progress-percent">{{ progressPercent }}%</span>
+              <span class="progress-level">{{ userLevel }}</span>
+            </div>
+            <div class="progress-bar-container">
+              <div class="progress-bar">
+                <div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="task-stats">
+            <div class="stat-card pending">
+              <div class="stat-content">
+                <div class="stat-title">待完成任务</div>
+                <div class="stat-number">{{ pendingCount }}</div>
+              </div>
+              <div class="stat-icon pending-icon">
+                <el-icon><DocumentCopy /></el-icon>
+              </div>
+            </div>
+            
+            <div class="stat-card completed">
+              <div class="stat-content">
+                <div class="stat-title">已完成任务</div>
+                <div class="stat-number">{{ completedCount }}</div>
+              </div>
+              <div class="stat-icon completed-icon">
+                <el-icon><DocumentChecked /></el-icon>
+              </div>
+            </div>
+          </div>
+        </div>

-    <!-- 任务列表 -->
-    <div class="task-section">
-      <div class="section-header">
-        <h2>任务列表</h2>
-        <div class="filter-tabs">
-          <div 
-            class="filter-tab" 
-            v-for="filter in filters" 
-            :key="filter.key"
-            :class="{ active: activeFilter === filter.key }"
-            @click="activeFilter = filter.key"
+        <!-- 任务列表 -->
+        <h2 class="section-title">任务列表</h2>
+        
+        <div v-if="loading" class="loading-container">
+          <el-skeleton :rows="6" animated />
+        </div>
+        
+        <div v-else-if="taskList.length > 0" class="task-grid">
+          <div
+            v-for="task in taskList"
+            :key="task.taskID"
+            class="task-card"
+            @click="handleTaskClick(task)"
          >
-            {{ filter.label }}
+            <!-- 内容容器 -->
+            <div class="task-content">
+              <!-- 状态标签（小标签，自适应宽度） -->
+              <div 
+                class="status-tag"
+                :class="{
+                  'status-pending': task.status === 0,
+                  'status-processing': task.status === 1,
+                  'status-completed': task.status === 2
+                }"
+              >
+                {{ task.status === 0 ? '待完成' : task.status === 1 ? '进行中' : '已完成' }}
+              </div>
+
+              <!-- 任务标题 -->
+              <h3 class="task-title">{{ task.name }}</h3>
+
+              <!-- 任务描述 -->
+              <p class="task-desc">{{ task.description || '暂无描述' }}</p>
+
+              <!-- 任务底部信息 -->
+              <div class="task-footer">
+                <span class="task-time">
+                  任务时间：{{ formatDate(task.startTime) }}-{{ formatDate(task.endTime) }}
+                </span>
+                <div 
+                  v-if="getDeadlineStatus(task).show"
+                  class="deadline-tag"
+                  :class="{
+                    'deadline-danger': getDeadlineStatus(task).type === 'danger',
+                    'deadline-info': getDeadlineStatus(task).type === 'info',
+                    'deadline-success': getDeadlineStatus(task).type === 'success',
+                    'deadline-primary': getDeadlineStatus(task).type === 'primary',
+                  }"
+                >
+                  {{ getDeadlineStatus(task).text }}
+                </div>
+              </div>
+            </div>
          </div>
        </div>
-      </div>

-      <div class="task-list">
-        <div class="task-item" v-for="task in filteredTasks" :key="task.id">
-          <div class="task-icon" :class="`status-${task.status}`">
-            <i :class="getTaskIcon(task.status)"></i>
-          </div>
-          <div class="task-content">
-            <h3>{{ task.title }}</h3>
-            <p class="task-description">{{ task.description }}</p>
-            <div class="task-meta">
-              <span class="task-type">{{ task.type }}</span>
-              <span class="task-deadline">截止时间：{{ task.deadline }}</span>
-            </div>
-          </div>
-          <div class="task-progress">
-            <div class="progress-bar">
-              <div class="progress-fill" :style="{ width: task.progress + '%' }"></div>
-            </div>
-            <span class="progress-text">{{ task.progress }}%</span>
-          </div>
-          <div class="task-actions">
-            <el-button 
-              type="primary" 
-              size="small" 
-              @click="goToTask(task)"
-              v-if="task.status !== 'completed'"
-            >
-              {{ task.status === 'not-started' ? '开始学习' : '继续学习' }}
-            </el-button>
-            <el-button 
-              size="small" 
-              @click="viewTaskDetail(task)"
-            >
-              查看详情
-            </el-button>
-          </div>
+        <div v-else class="empty-state">
+          <el-empty description="暂无学习任务" />
        </div>
      </div>
    </div>
-  </div>
+  </StudyPlanLayout>
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { ElButton } from 'element-plus';
+import { ref, onMounted, computed } from 'vue';
+import { ElMessage } from 'element-plus';
+import { DocumentCopy, DocumentChecked } from '@element-plus/icons-vue';
+import { learningTaskApi } from '@/apis/study';
+import type { LearningTask } from '@/types';
+import { StudyPlanLayout } from '@/views/study-plan';

-const router = useRouter();
-const activeFilter = ref('all');
-const tasks = ref<any[]>([]);
+defineOptions({
+  name: 'StudyTasksView'
+});

-const statistics = ref([
-  { label: '总任务数', value: 0 },
-  { label: '进行中', value: 0 },
-  { label: '已完成', value: 0 },
-  { label: '完成率', value: '0%' }
-]);
+const loading = ref(false);
+const taskList = ref<LearningTask[]>([]);

-const filters = [
-  { key: 'all', label: '全部任务' },
-  { key: 'not-started', label: '未开始' },
-  { key: 'in-progress', label: '进行中' },
-  { key: 'completed', label: '已完成' }
-];
+// 统计数据
+const totalCount = ref(16);
+const completedCount = ref(10);
+const pendingCount = ref(6);
+const userLevel = ref('Level1');

-const filteredTasks = computed(() => {
-  if (activeFilter.value === 'all') return tasks.value;
-  return tasks.value.filter(task => task.status === activeFilter.value);
+// 计算进度百分比
+const progressPercent = computed(() => {
+  if (totalCount.value === 0) return 0;
+  return Math.round((completedCount.value / totalCount.value) * 100);
 });

 onMounted(() => {
-  // TODO: 加载学习任务数据
+  loadTaskList();
+  loadStatistics();
 });

-function getTaskIcon(status: string) {
-  const iconMap: Record<string, string> = {
-    'not-started': '⭕',
-    'in-progress': '⏳',
-    'completed': '✅'
+// ==================== MOCK 数据（临时使用，后续删除） ====================
+const useMock = true; // 改为 false 即可使用真实接口
+
+function getMockTaskList(): LearningTask[] {
+  return [
+    {
+      taskID: '1',
+      name: '新时代中国特色社会主义发展历程',
+      description: '习近平新时代中国特色社会主义思想是当代中国马克思主义、二十一世纪马克思主义，是中华文化和中国精神的时代精华，其核心要义与实践要求内涵丰富、意义深远。',
+      startTime: '2025-10-01',
+      endTime: '2025-10-25',
+      status: 0,
+    },
+    {
+      taskID: '2',
+      name: '党的二十大精神学习',
+      description: '深入学习贯彻党的二十大精神，全面把握新时代新征程党和国家事业发展的目标任务，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴而团结奋斗。',
+      startTime: '2025-09-15',
+      endTime: '2025-11-30',
+      status: 1,
+    },
+    {
+      taskID: '3',
+      name: '党史学习教育',
+      description: '学习党的百年奋斗历程，从党的历史中汲取智慧和力量，做到学史明理、学史增信、学史崇德、学史力行。',
+      startTime: '2025-08-01',
+      endTime: '2025-10-15',
+      status: 2,
+    },
+    {
+      taskID: '4',
+      name: '红色经典阅读',
+      description: '阅读红色经典著作，传承革命精神，赓续红色血脉，坚定理想信念。',
+      startTime: '2025-10-10',
+      endTime: '2025-12-31',
+      status: 0,
+    },
+  ];
+}
+
+function getMockStatistics() {
+  return {
+    totalCount: 16,
+    completedCount: 10,
+    pendingCount: 6,
+    level: 'Level1'
  };
-  return iconMap[status] || '⭕';
+}
+// ==================== MOCK 数据结束 ====================
+
+// 加载任务列表
+async function loadTaskList() {
+  loading.value = true;
+  try {
+    // MOCK: 使用模拟数据（临时）
+    if (useMock) {
+      await new Promise(resolve => setTimeout(resolve, 500)); // 模拟加载延迟
+      taskList.value = getMockTaskList();
+      loading.value = false;
+      return;
+    }
+    
+    // TODO: 真实接口调用（useMock 改为 false 后生效）
+    const res = await learningTaskApi.getTaskList();
+    
+    if (res.success) {
+      taskList.value = res.dataList || [];
+    } else {
+      ElMessage.error('加载学习任务失败');
+    }
+  } catch (error) {
+    console.error('加载学习任务失败:', error);
+    ElMessage.error('加载学习任务失败');
+  } finally {
+    loading.value = false;
+  }
 }

-function goToTask(task: any) {
-  router.push(`/study/task/${task.id}`);
+// 加载统计数据
+async function loadStatistics() {
+  try {
+    // MOCK: 使用模拟数据（临时）
+    if (useMock) {
+      const mockData = getMockStatistics();
+      totalCount.value = mockData.totalCount;
+      completedCount.value = mockData.completedCount;
+      pendingCount.value = mockData.pendingCount;
+      userLevel.value = mockData.level;
+      return;
+    }
+    
+    // TODO: 真实接口调用（useMock 改为 false 后生效）
+    // const res = await learningTaskApi.getStatistics();
+    // if (res.success && res.data) {
+    //   totalCount.value = res.data.totalCount;
+    //   completedCount.value = res.data.completedCount;
+    //   pendingCount.value = res.data.pendingCount;
+    //   userLevel.value = res.data.level;
+    // }
+  } catch (error) {
+    console.error('加载统计数据失败:', error);
+  }
 }

-function viewTaskDetail(task: any) {
-  router.push(`/study/task/${task.id}/detail`);
+
+// 点击任务卡片
+function handleTaskClick(task: LearningTask) {
+  // TODO: 跳转到任务详情或开始任务
+  console.log('点击任务:', task);
+}
+
+// 格式化日期
+function formatDate(dateString?: string): string {
+  if (!dateString) return '';
+  const date = new Date(dateString);
+  return `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
+}
+
+// 获取截止时间状态
+function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; type: 'danger' | 'info' | 'success' | 'primary' } {
+  if (!task.endTime) {
+    return { show: false, text: '', type: 'primary' };
+  }
+  
+  const now = new Date();
+  const endTime = new Date(task.endTime);
+  const diffTime = endTime.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  
+  if (task.status === 2) {
+    // 已完成
+    return { show: true, text: '已截止', type: 'success' };
+  } else if (diffDays < 0) {
+    // 已过期
+    return { show: true, text: '已截止', type: 'info' };
+  } else if (diffDays <= 8) {
+    // 即将截止
+    return { show: true, text: `${diffDays}天后截止`, type: 'danger' };
+  }
+  
+  return { show: true, text: `${diffDays}天后截止`, type: 'primary' };
 }
 </script>

 <style lang="scss" scoped>
-.study-tasks {
-  padding: 40px;
+.main-content {
+  padding: 40px 0 80px;
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 24px;
+  }
 }

-.task-statistics {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 40px;
-}
-
-.stat-card {
-  padding: 24px;
-  background: linear-gradient(135deg, #C62828, #E53935);
-  border-radius: 8px;
-  color: white;
-  text-align: center;
-}
-
-.stat-value {
-  font-size: 32px;
+.section-title {
+  font-size: 28px;
  font-weight: 600;
-  margin-bottom: 8px;
+  color: #141F38;
+  margin: 0 0 20px 0;
 }

-.stat-label {
-  font-size: 14px;
-  opacity: 0.9;
-}
-
-.task-section {
-  .section-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
+// 进度卡片
+.progress-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 50px;
+  margin-bottom: 60px;
+  box-shadow: 0 17px 22.4px rgba(164, 182, 199, 0.1);
+  
+  .progress-info {
+    margin-bottom: 40px;
    
-    h2 {
-      font-size: 24px;
-      font-weight: 600;
-      color: #141F38;
+    .progress-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      
+      .progress-text {
+        font-size: 16px;
+        font-weight: 500;
+        color: #334155;
+      }
+      
+      .progress-percent {
+        font-size: 16px;
+        font-weight: 500;
+        color: #C62828;
+      }
+      
+      .progress-level {
+        font-size: 16px;
+        font-weight: 500;
+        color: #334155;
+      }
+    }
+    
+    .progress-bar-container {
+      .progress-bar {
+        width: 100%;
+        height: 12px;
+        background: #F7F8F9;
+        border-radius: 27px;
+        overflow: hidden;
+        
+        .progress-fill {
+          height: 100%;
+          background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
+          border-radius: 27px;
+          transition: width 0.3s ease;
+        }
+      }
+    }
+  }
+  
+  .task-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+    
+    .stat-card {
+      background: #FFFDFD;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+      border-radius: 10px;
+      padding: 30px 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      &.pending {
+        .stat-icon {
+          background: #FFF5F4;
+          
+          :deep(.el-icon) {
+            font-size: 44px;
+            background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+          }
+        }
+      }
+      
+      &.completed {
+        background: #FBFDFF;
+        
+        .stat-icon {
+          background: #EFF8FF;
+          
+          :deep(.el-icon) {
+            font-size: 44px;
+            background: linear-gradient(143deg, #82B7FD 1%, #2F6AFF 99%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+          }
+        }
+      }
+      
+      .stat-content {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 30px;
+        
+        .stat-title {
+          font-size: 20px;
+          font-weight: 600;
+          color: #141F38;
+          text-align: right;
+          width: 100px;
+        }
+        
+        .stat-number {
+          font-size: 40px;
+          font-weight: 600;
+          line-height: 0.95;
+          color: #334155;
+          width: 100px;
+        }
+      }
+      
+      .stat-icon {
+        width: 77px;
+        height: 77px;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
    }
  }
 }

-.filter-tabs {
-  display: flex;
-  gap: 8px;
+// 任务列表
+.loading-container {
+  padding: 40px 0;
 }

-.filter-tab {
-  padding: 8px 16px;
-  background: #f5f5f5;
-  border-radius: 20px;
-  font-size: 14px;
-  color: #666;
+.task-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin-bottom: 40px;
+  
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.task-card {
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  padding: 40px;
  cursor: pointer;
  transition: all 0.3s;
+  min-height: 278px;
  
  &:hover {
-    background: #ffe6e6;
-    color: #C62828;
+    box-shadow: 0 8px 20px rgba(164, 182, 199, 0.2);
+    transform: translateY(-2px);
  }
  
-  &.active {
-    background: #C62828;
-    color: white;
-  }
-}
-
-.task-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.task-item {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 20px;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  transition: all 0.3s;
-  
-  &:hover {
-    border-color: #C62828;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.task-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  flex-shrink: 0;
-  
-  &.status-not-started {
-    background: #f5f5f5;
+  .task-content {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    
+    // 状态标签 - 小标签，自适应宽度
+    .status-tag {
+      align-self: flex-start;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 3px 8px;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.5714285714285714;
+      border-radius: 2px;
+      
+      // 待完成 - 红色
+      &.status-pending {
+        background-color: #FFECE8;
+        color: #F53F3F;
+      }
+      
+      // 进行中 - 蓝色
+      &.status-processing {
+        background-color: #E8F7FF;
+        color: #3491FA;
+      }
+      
+      // 已完成 - 绿色
+      &.status-completed {
+        background-color: #E8FFEA;
+        color: #00B42A;
+      }
+    }
  }
  
-  &.status-in-progress {
-    background: #fff3e0;
-  }
-  
-  &.status-completed {
-    background: #e8f5e9;
-  }
-}
-
-.task-content {
-  flex: 1;
-  
-  h3 {
-    font-size: 18px;
+  .task-title {
+    font-size: 20px;
    font-weight: 600;
    color: #141F38;
-    margin-bottom: 8px;
+    margin: 0;
+    line-height: 1.4;
  }
-}
-
-.task-description {
-  font-size: 14px;
-  color: #666;
-  margin-bottom: 12px;
-}
-
-.task-meta {
-  display: flex;
-  gap: 16px;
-  font-size: 13px;
-}
-
-.task-type {
-  color: #C62828;
-  font-weight: 500;
-}
-
-.task-deadline {
-  color: #999;
-}
-
-.task-progress {
-  width: 150px;
-  flex-shrink: 0;
  
-  .progress-bar {
-    width: 100%;
-    height: 8px;
-    background: #f5f5f5;
-    border-radius: 4px;
+  .task-desc {
+    font-size: 14px;
+    font-weight: 400;
+    color: #334155;
+    line-height: 1.5714285714285714;
+    margin: 0;
+    flex: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
    overflow: hidden;
-    margin-bottom: 4px;
+    text-overflow: ellipsis;
  }
  
-  .progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #C62828, #E53935);
-    transition: width 0.3s;
-  }
-  
-  .progress-text {
-    font-size: 12px;
-    color: #666;
+  .task-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+    
+    .task-time {
+      font-size: 14px;
+      font-weight: 400;
+      color: #979797;
+      line-height: 1.5714285714285714;
+      flex: 1;
+    }
+    
+    // 截止时间标签
+    .deadline-tag {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 0 8px;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 1.6666666666666667;
+      border-radius: 2px;
+      border: 1px solid;
+      background-color: transparent;
+      
+      // 即将截止 - 红色边框
+      &.deadline-danger {
+        border-color: #F53F3F;
+        color: #F53F3F;
+      }
+      
+      // 已截止 - 灰色边框
+      &.deadline-info {
+        border-color: #979797;
+        color: #979797;
+      }
+      // 已完成 - 绿色边框
+      &.deadline-success {
+        border-color: #00B42A;
+        color: #00B42A;
+      }
+      // 进行中 - 蓝色边框
+      &.deadline-primary {
+        border-color: #3491FA;
+        color: #3491FA;
+      }
+    }
  }
 }

-.task-actions {
+.empty-state {
+  padding: 80px 0;
+  text-align: center;
+}
+
+.pagination-container {
  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
+  justify-content: center;
+  margin-top: 40px;
 }
 </style>
-
--- a/schoolNewsWeb/src/views/study-plan/index.ts
+++ b/schoolNewsWeb/src/views/study-plan/index.ts
@@ -0,0 +1,4 @@
+export { default as StudyPlanLayout } from './StudyPlanLayout.vue';
+export { default as StudyPlanView } from './StudyTasksView.vue';
+export { default as CourseCenterView } from './CourseCenterView.vue';
+export { default as StudyTasksView } from './StudyTasksView.vue';