From f72a5cec619fc5f4273312c39219e83052f678d6 Mon Sep 17 00:00:00 2001
From: wangys <3401275564@qq.com>
Date: Tue, 21 Oct 2025 16:21:10 +0800
Subject: [PATCH] =?UTF-8?q?web-=E5=AD=A6=E4=B9=A0=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E3=80=81upload=E7=BB=84=E4=BB=B6=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 schoolNewsWeb/src/apis/resource/resource.ts   |   8 +-
 schoolNewsWeb/src/apis/study/course.ts        |  50 +-
 .../src/components/file/FileUpload.vue        | 238 ++++++-
 schoolNewsWeb/src/types/base/index.ts         |  18 +-
 schoolNewsWeb/src/types/study/index.ts        |  61 +-
 schoolNewsWeb/src/types/usercenter/index.ts   |   6 +-
 .../manage/study/CourseManagementView.vue     |  53 ++
 .../manage/study/components/CourseAdd.vue     | 600 ++++++++++++++++++
 .../manage/study/components/CourseList.vue    | 263 ++++++++
 .../admin/manage/study/components/index.ts    |   3 +
 .../src/views/article/ArticleAddView.vue      |  73 +--
 .../components/ResouceCollect.vue             |   9 +-
 .../components/ResourceArticle.vue            |  33 +-
 13 files changed, 1288 insertions(+), 127 deletions(-)
 create mode 100644 schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue
 create mode 100644 schoolNewsWeb/src/views/admin/manage/study/components/CourseAdd.vue
 create mode 100644 schoolNewsWeb/src/views/admin/manage/study/components/CourseList.vue
 create mode 100644 schoolNewsWeb/src/views/admin/manage/study/components/index.ts

diff --git a/schoolNewsWeb/src/apis/resource/resource.ts b/schoolNewsWeb/src/apis/resource/resource.ts
index 5c57b4b..113539d 100644
--- a/schoolNewsWeb/src/apis/resource/resource.ts
+++ b/schoolNewsWeb/src/apis/resource/resource.ts
@@ -7,7 +7,7 @@
  */
 
 import { api } from '@/apis';
-import type { ResultDomain, Resource, ResourceSearchParams, PageParam, ResourceVO } from '@/types';
+import type { ResultDomain, Resource, ResourceSearchParams, PageParam, ResourceVO, UserCollection } from '@/types';
 
 /**
  * 资源API服务
@@ -137,12 +137,12 @@ export const resourceApi = {
   },
 
   /**
-   * 增加收藏次数
+   * 收藏次数增减
    * @param resourceID 资源ID
    * @returns Promise<ResultDomain<Resource>>
    */
-  async incrementCollectCount(resourceID: string): Promise<ResultDomain<Resource>> {
-    const response = await api.post<Resource>(`/news/resources/resource/${resourceID}/collect`);
+  async resourceCollect(collect: UserCollection): Promise<ResultDomain<Resource>> {
+    const response = await api.post<Resource>(`/news/resources/resource/collect`, collect);
     return response.data;
   },
 
diff --git a/schoolNewsWeb/src/apis/study/course.ts b/schoolNewsWeb/src/apis/study/course.ts
index 14a9241..900acea 100644
--- a/schoolNewsWeb/src/apis/study/course.ts
+++ b/schoolNewsWeb/src/apis/study/course.ts
@@ -5,19 +5,33 @@
  */
 
 import { api } from '@/apis/index';
-import type { Course, CourseChapter, ResultDomain } from '@/types';
+import type { Course, CourseChapter, ResultDomain,CourseVO,PageRequest, PageParam } from '@/types';
 
 /**
  * 课程API服务
  */
 export const courseApi = {
+  prefixCourse: '/study/courses',
   /**
    * 获取课程列表
    * @param filter 过滤条件
    * @returns Promise<ResultDomain<Course>>
    */
-  async getCourseList(filter?: Partial<Course>): Promise<ResultDomain<Course>> {
-    const response = await api.get<Course>('/study/course/list', filter);
+  async getCourseList(filter?: Course): Promise<ResultDomain<Course>> {
+    const response = await api.get<Course>(`${this.prefixCourse}/list`, filter);
+    return response.data;
+  },
+
+  /**
+   * 获取课程分页列表
+   * @param PageRequest 分页请求
+   * @returns Promise<ResultDomain<Course>>
+   */
+  async getCoursePage(pageParam: PageParam, filter?: Course): Promise<ResultDomain<Course>> {
+    const response = await api.post<Course>(`${this.prefixCourse}/page`, {
+      pageParam,
+      filter
+    });
     return response.data;
   },
 
@@ -26,8 +40,8 @@ export const courseApi = {
    * @param courseID 课程ID
    * @returns Promise<ResultDomain<Course>>
    */
-  async getCourseById(courseID: string): Promise<ResultDomain<Course>> {
-    const response = await api.get<Course>(`/study/course/${courseID}`);
+  async getCourseById(courseID: string): Promise<ResultDomain<CourseVO>> {
+    const response = await api.get<CourseVO>(`${this.prefixCourse}/${courseID}`);
     return response.data;
   },
 
@@ -36,8 +50,8 @@ export const courseApi = {
    * @param course 课程数据
    * @returns Promise<ResultDomain<Course>>
    */
-  async createCourse(course: Course): Promise<ResultDomain<Course>> {
-    const response = await api.post<Course>('/study/course/create', course);
+  async createCourse(course: CourseVO): Promise<ResultDomain<CourseVO>> {
+    const response = await api.post<CourseVO>(`${this.prefixCourse}/course`, course);
     return response.data;
   },
 
@@ -47,7 +61,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<Course>>
    */
   async updateCourse(course: Course): Promise<ResultDomain<Course>> {
-    const response = await api.put<Course>('/study/course/update', course);
+    const response = await api.put<Course>(`${this.prefixCourse}/course`, course);
     return response.data;
   },
 
@@ -57,7 +71,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<boolean>>
    */
   async deleteCourse(courseID: string): Promise<ResultDomain<boolean>> {
-    const response = await api.delete<boolean>(`/study/course/${courseID}`);
+    const response = await api.delete<boolean>(`${this.prefixCourse}/${courseID}`);
     return response.data;
   },
 
@@ -68,7 +82,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<Course>>
    */
   async updateCourseStatus(courseID: string, status: number): Promise<ResultDomain<Course>> {
-    const response = await api.put<Course>(`/study/course/${courseID}/status`, null, {
+    const response = await api.put<Course>(`${this.prefixCourse}/${courseID}/status`, null, {
       params: { status }
     });
     return response.data;
@@ -80,7 +94,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<Course>>
    */
   async incrementViewCount(courseID: string): Promise<ResultDomain<Course>> {
-    const response = await api.post<Course>(`/study/course/${courseID}/view`);
+    const response = await api.post<Course>(`${this.prefixCourse}/${courseID}/view`);
     return response.data;
   },
 
@@ -90,7 +104,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<Course>>
    */
   async incrementLearnCount(courseID: string): Promise<ResultDomain<Course>> {
-    const response = await api.post<Course>(`/study/course/${courseID}/learn`);
+    const response = await api.post<Course>(`${this.prefixCourse}/${courseID}/learn`);
     return response.data;
   },
 
@@ -100,7 +114,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<CourseChapter>>
    */
   async getCourseChapters(courseID: string): Promise<ResultDomain<CourseChapter>> {
-    const response = await api.get<CourseChapter>(`/study/course/${courseID}/chapters`);
+    const response = await api.get<CourseChapter>(`${this.prefixCourse}/${courseID}/chapters`);
     return response.data;
   },
 
@@ -110,7 +124,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<CourseChapter>>
    */
   async getChapterById(chapterID: string): Promise<ResultDomain<CourseChapter>> {
-    const response = await api.get<CourseChapter>(`/study/course/chapter/${chapterID}`);
+    const response = await api.get<CourseChapter>(`${this.prefixCourse}/chapter/${chapterID}`);
     return response.data;
   },
 
@@ -120,7 +134,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<CourseChapter>>
    */
   async createChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
-    const response = await api.post<CourseChapter>('/study/course/chapter/create', chapter);
+    const response = await api.post<CourseChapter>(`${this.prefixCourse}/chapter/create`, chapter);
     return response.data;
   },
 
@@ -130,7 +144,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<CourseChapter>>
    */
   async updateChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
-    const response = await api.put<CourseChapter>('/study/course/chapter/update', chapter);
+    const response = await api.put<CourseChapter>(`${this.prefixCourse}/chapter/update`, chapter);
     return response.data;
   },
 
@@ -140,7 +154,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<boolean>>
    */
   async deleteChapter(chapterID: string): Promise<ResultDomain<boolean>> {
-    const response = await api.delete<boolean>(`/study/course/chapter/${chapterID}`);
+    const response = await api.delete<boolean>(`${this.prefixCourse}/chapter/${chapterID}`);
     return response.data;
   },
 
@@ -151,7 +165,7 @@ export const courseApi = {
    * @returns Promise<ResultDomain<CourseChapter>>
    */
   async updateChapterOrder(chapterID: string, orderNum: number): Promise<ResultDomain<CourseChapter>> {
-    const response = await api.put<CourseChapter>(`/study/course/chapter/${chapterID}/order`, null, {
+    const response = await api.put<CourseChapter>(`${this.prefixCourse}/chapter/${chapterID}/order`, null, {
       params: { orderNum }
     });
     return response.data;
diff --git a/schoolNewsWeb/src/components/file/FileUpload.vue b/schoolNewsWeb/src/components/file/FileUpload.vue
index 55fcf7e..aff083c 100644
--- a/schoolNewsWeb/src/components/file/FileUpload.vue
+++ b/schoolNewsWeb/src/components/file/FileUpload.vue
@@ -1,5 +1,57 @@
 <template>
-  <div v-if="!asDialog" class="upload-container">
+  <!-- Cover 模式 - 封面图片上传 -->
+  <div v-if="!asDialog && listType === 'cover'" class="upload-cover-container">
+    <!-- 已上传的封面 -->
+    <div v-if="props.coverUrl" class="cover-image-wrapper">
+      <img 
+        :src="FILE_DOWNLOAD_URL + props.coverUrl" 
+        class="cover-image"
+        :class="coverImageClass"
+        @load="handleCoverImageLoad"
+      />
+      <div class="cover-actions">
+        <el-button
+          type="danger"
+          size="small"
+          circle
+          :icon="Delete"
+          @click="handleRemoveCover"
+          class="delete-btn"
+        />
+      </div>
+    </div>
+    
+    <!-- 上传区域 -->
+    <div
+      v-else
+      class="upload-cover-area"
+      :class="{ 'is-dragover': isDragover, 'is-disabled': uploading }"
+      @click="handleClickUpload"
+      @drop.prevent="handleDrop"
+      @dragover.prevent="handleDragOver"
+      @dragleave.prevent="handleDragLeave"
+    >
+      <el-icon v-if="!uploading" class="upload-cover-icon"><Plus /></el-icon>
+      <div v-if="uploading" class="uploading-mask">
+        <el-icon class="is-loading"><Loading /></el-icon>
+        <div>上传中...</div>
+      </div>
+      <div v-if="!uploading && tip" class="upload-cover-tip">{{ tip }}</div>
+    </div>
+
+    <!-- 隐藏的文件输入框 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      :accept="accept"
+      :multiple="false"
+      @change="handleFileSelect"
+      style="display: none"
+    />
+  </div>
+
+  <!-- 默认模式 -->
+  <div v-else-if="!asDialog" class="upload-container">
     <div 
       class="upload-area"
       :class="{ 'is-dragover': isDragover, 'is-disabled': uploading }"
@@ -218,8 +270,10 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { ElDialog, ElButton, ElMessage } from 'element-plus';
+import { ElDialog, ElButton, ElMessage, ElIcon } from 'element-plus';
+import { Plus, Delete, Loading } from '@element-plus/icons-vue';
 import { fileApi } from '@/apis/system/file';
+import { FILE_DOWNLOAD_URL } from '@/config';
 import type { SysFile } from '@/types';
 
 interface Props {
@@ -232,6 +286,8 @@ interface Props {
   businessId?: string;
   tip?: string;
   asDialog?: boolean; // 是否作为弹窗使用
+  listType?: 'default' | 'cover'; // 列表类型：default-默认, cover-封面
+  coverUrl?: string; // 封面图片URL（用于cover模式）
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -242,13 +298,17 @@ const props = withDefaults(defineProps<Props>(), {
   multiple: false,
   module: 'common',
   tip: '',
-  asDialog: true
+  asDialog: true,
+  listType: 'default',
+  coverUrl: ''
 });
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean];
+  'update:coverUrl': [url: string];
   'success': [files: SysFile[]];
   'error': [error: any];
+  'remove': [];
 }>();
 
 const fileInputRef = ref<HTMLInputElement>();
@@ -261,6 +321,24 @@ const visible = computed({
   set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
 });
 
+// cover图片的宽高比类
+const coverImageClass = ref('');
+
+// 处理封面图片加载
+function handleCoverImageLoad(event: Event) {
+  const img = event.target as HTMLImageElement;
+  const width = img.naturalWidth;
+  const height = img.naturalHeight;
+  
+  // 如果宽度大于高度，横向图片，设置width: 100%
+  if (width > height) {
+    coverImageClass.value = 'cover-image-horizontal';
+  } else {
+    // 纵向图片，设置height: 100%
+    coverImageClass.value = 'cover-image-vertical';
+  }
+}
+
 // 预览相关
 const imagePreviewVisible = ref(false);
 const filePreviewVisible = ref(false);
@@ -283,6 +361,11 @@ function handleFileSelect(event: Event) {
     addFiles(Array.from(input.files));
     // 清空 input，允许重复选择同一文件
     input.value = '';
+    
+    // cover模式下选择文件后立即上传
+    if (props.listType === 'cover') {
+      handleUpload();
+    }
   }
 }
 
@@ -445,7 +528,11 @@ async function handleUpload() {
       
       if (result.code === 200 && result.data) {
         uploadedFilesList.push(result.data);
-        ElMessage.success(`${file.name} 上传成功`);
+        
+        // cover模式下不显示成功提示
+        if (props.listType !== 'cover') {
+          ElMessage.success(`${file.name} 上传成功`);
+        }
       } else {
         ElMessage.error(`${file.name} 上传失败: ${result.message}`);
       }
@@ -454,6 +541,11 @@ async function handleUpload() {
     // 所有文件上传完成
     if (uploadedFilesList.length > 0) {
       emit('success', uploadedFilesList);
+      
+      // cover模式下更新coverUrl（只返回fileID，不拼接URL）
+      if (props.listType === 'cover' && uploadedFilesList[0]) {
+        emit('update:coverUrl', uploadedFilesList[0].fileID || '');
+      }
     }
   } catch (error: any) {
     console.error('上传失败:', error);
@@ -461,13 +553,24 @@ async function handleUpload() {
     emit('error', error);
   } finally {
     uploading.value = false;
-    // 上传完成后关闭对话框
-    if (uploadedFilesList.length > 0) {
+    
+    // cover模式下清空选择的文件
+    if (props.listType === 'cover') {
+      selectedFiles.value = [];
+    } else if (uploadedFilesList.length > 0) {
+      // 其他模式上传完成后关闭对话框
       handleClose();
     }
   }
 }
 
+// 删除封面
+function handleRemoveCover() {
+  emit('update:coverUrl', '');
+  coverImageClass.value = '';
+  emit('remove');
+}
+
 // 关闭对话框
 function handleClose() {
   if (props.asDialog) {
@@ -710,4 +813,127 @@ defineExpose({
   margin-top: 16px;
   text-align: center;
 }
+
+/* Cover模式样式 */
+.upload-cover-container {
+  display: inline-block;
+}
+
+.cover-image-wrapper {
+  position: relative;
+  width: 200px;
+  height: 150px;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  
+  &:hover .cover-actions {
+    opacity: 1;
+  }
+}
+
+.cover-image {
+  display: block;
+  object-fit: contain;
+  max-width: 100%;
+  max-height: 100%;
+  
+  &.cover-image-horizontal {
+    width: 100%;
+    height: auto;
+  }
+  
+  &.cover-image-vertical {
+    height: 100%;
+    width: auto;
+  }
+}
+
+.cover-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  
+  .delete-btn {
+    background: rgba(0, 0, 0, 0.6);
+    border: none;
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
+
+.upload-cover-area {
+  width: 200px;
+  height: 150px;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: #fafafa;
+  transition: all 0.3s;
+  position: relative;
+  
+  &:hover {
+    border-color: #409eff;
+    background: #f0f9ff;
+  }
+  
+  &.is-dragover {
+    border-color: #409eff;
+    background: #e6f7ff;
+  }
+  
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.upload-cover-icon {
+  font-size: 32px;
+  color: #8c939d;
+  margin-bottom: 8px;
+}
+
+.upload-cover-tip {
+  font-size: 12px;
+  color: #909399;
+  text-align: center;
+  padding: 0 10px;
+  margin-top: 8px;
+}
+
+.uploading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  
+  .el-icon {
+    font-size: 32px;
+    color: #409eff;
+    margin-bottom: 8px;
+  }
+  
+  div {
+    font-size: 14px;
+    color: #606266;
+  }
+}
 </style>
diff --git a/schoolNewsWeb/src/types/base/index.ts b/schoolNewsWeb/src/types/base/index.ts
index 33a8ab6..19757a5 100644
--- a/schoolNewsWeb/src/types/base/index.ts
+++ b/schoolNewsWeb/src/types/base/index.ts
@@ -28,6 +28,11 @@ export interface PageParam {
   page: number;
   /** 每页条数 */
   size: number;
+
+  /** 总页数 */
+  totalPages?: number;
+  /** 总记录数 */
+  totalElements?: number;
   /** 排序字段 */
   orderBy?: string;
   /** 排序方向 asc/desc */
@@ -38,17 +43,14 @@ export interface PageParam {
  * 分页结果
  */
 export interface PageDomain<T> {
-  /** 当前页码 */
-  page: number;
-  /** 每页条数 */
-  size: number;
-  /** 总记录数 */
-  total: number;
-  /** 总页数 */
-  pages: number;
+  pageParam: PageParam;
   /** 数据列表 */
   dataList?: T[];
 }
+export interface PageRequest<T> {
+  pageParam: PageParam;
+  filter: T;
+}
 
 /**
  * 统一返回结果
diff --git a/schoolNewsWeb/src/types/study/index.ts b/schoolNewsWeb/src/types/study/index.ts
index 4414773..bed4f75 100644
--- a/schoolNewsWeb/src/types/study/index.ts
+++ b/schoolNewsWeb/src/types/study/index.ts
@@ -42,30 +42,83 @@ export interface Course extends BaseDTO {
  * 课程章节实体
  */
 export interface CourseChapter extends BaseDTO {
-  /** 章节唯一标识 */
+  /** 章节ID */
   chapterID?: string;
   /** 课程ID */
   courseID?: string;
+  /** 父章节ID */
+  parentID?: string;
   /** 章节名称 */
   name?: string;
   /** 章节内容 */
   content?: string;
+  /** 章节类型（1视频 2文档 3音频） */
+  chapterType?: number;
+  /** 资源ID */
+  resourceID?: string;
+  /** 视频URL */
+  videoUrl?: string;
   /** 章节时长（分钟） */
   duration?: number;
   /** 排序号 */
   orderNum?: number;
-  /** 状态（0禁用 1启用） */
-  status?: number;
+  /** 创建者 */
+  creator?: string;
+  /** 更新者 */
+  updater?: string;
 }
 
 /**
- * 课程标签实体
+ * 课程标签关联实体
  */
 export interface CourseTag extends BaseDTO {
   /** 课程ID */
   courseID?: string;
   /** 标签ID */
   tagID?: string;
+  /** 创建者 */
+  creator?: string;
+}
+
+/**
+ * 学习节点实体
+ */
+export interface CourseNode extends BaseDTO {
+  /** 章节ID */
+  chapterID?: string;
+  /** 节点ID */
+  nodeID?: string;
+  /** 节点名称 */
+  name?: string;
+  /** 节点内容 */
+  content?: string;
+  /** 节点类型（0文章资源 1富文本 2其他上传文件） */
+  nodeType?: number;
+  /** 资源ID */
+  resourceID?: string;
+  /** 视频URL */
+  videoUrl?: string;
+  /** 节点时长（分钟） */
+  duration?: number;
+  /** 排序号 */
+  orderNum?: number;
+  /** 是否必修（1必修 0选修） */
+  isRequired?: number;
+  /** 创建者 */
+  creator?: string;
+  /** 更新者 */
+  updater?: string;
+}
+
+export interface ChapterVO extends BaseDTO {
+  chapter: CourseChapter;
+  nodes: CourseNode[];
+}
+
+export interface CourseVO extends BaseDTO {
+  course: Course;
+  courseChapters: ChapterVO[];
+  courseTags: CourseTag[];
 }
 
 /**
diff --git a/schoolNewsWeb/src/types/usercenter/index.ts b/schoolNewsWeb/src/types/usercenter/index.ts
index f543a6e..2f15c3b 100644
--- a/schoolNewsWeb/src/types/usercenter/index.ts
+++ b/schoolNewsWeb/src/types/usercenter/index.ts
@@ -5,7 +5,7 @@
  */
 
 import { BaseDTO } from '../base';
-
+import { CollectionType } from '../enums';
 /**
  * 用户收藏实体
  */
@@ -13,9 +13,11 @@ export interface UserCollection extends BaseDTO {
   /** 用户ID */
   userID?: string;
   /** 收藏类型（1资源 2课程） */
-  collectionType?: number;
+  collectionType?: CollectionType;
   /** 收藏对象ID */
   collectionID?: string;
+  /** 是否新增收藏（1是 -1否） */
+  collectionValue?: number;
 }
 
 /**
diff --git a/schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue b/schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue
new file mode 100644
index 0000000..f9a54a7
--- /dev/null
+++ b/schoolNewsWeb/src/views/admin/manage/study/CourseManagementView.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="course-management">
+    <CourseList
+      v-if="currentView === 'list'"
+      @add="handleAdd"
+      @edit="handleEdit"
+    />
+    <CourseAdd
+      v-else-if="currentView === 'add' || currentView === 'edit'"
+      :courseID="currentCourseId"
+      @success="handleSuccess"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CourseList, CourseAdd } from './components';
+import type { Course } from '@/types/study';
+
+type ViewType = 'list' | 'add' | 'edit';
+
+const currentView = ref<ViewType>('list');
+const currentCourseId = ref<string>();
+
+function handleAdd() {
+  currentView.value = 'add';
+  currentCourseId.value = undefined;
+}
+
+function handleEdit(course: Course) {
+  currentView.value = 'edit';
+  currentCourseId.value = course.courseID;
+}
+
+function handleSuccess() {
+  currentView.value = 'list';
+  currentCourseId.value = undefined;
+}
+
+function handleCancel() {
+  currentView.value = 'list';
+  currentCourseId.value = undefined;
+}
+</script>
+
+<style lang="scss" scoped>
+.course-management {
+  height: 100%;
+  background: #f5f7fa;
+}
+</style>
diff --git a/schoolNewsWeb/src/views/admin/manage/study/components/CourseAdd.vue b/schoolNewsWeb/src/views/admin/manage/study/components/CourseAdd.vue
new file mode 100644
index 0000000..a54f14b
--- /dev/null
+++ b/schoolNewsWeb/src/views/admin/manage/study/components/CourseAdd.vue
@@ -0,0 +1,600 @@
+<template>
+  <div class="course-add">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <el-button @click="handleCancel" :icon="ArrowLeft">返回</el-button>
+      <h2 class="page-title">{{ props.courseID ? '编辑课程' : '新增课程' }}</h2>
+    </div>
+
+    <el-form
+      ref="formRef"
+      :model="currentCourseVO"
+      :rules="rules"
+      label-width="120px"
+    >
+      <!-- 基本信息 -->
+      <el-card class="info-card" shadow="never">
+        <template #header>
+          <span class="card-header">基本信息</span>
+        </template>
+        
+        <el-form-item label="课程名称" prop="course.name">
+          <el-input v-model="currentCourseVO.course.name" placeholder="请输入课程名称" />
+        </el-form-item>
+
+        <el-form-item label="课程封面" prop="course.coverImage">
+          <FileUpload
+            :as-dialog="false"
+            list-type="cover"
+            v-model:cover-url="currentCourseVO.course.coverImage"
+            accept="image/*"
+            :max-size="2"
+            module="course"
+            tip="建议尺寸 800x600"
+            @success="handleCoverUploadSuccess"
+            @remove="handleCoverRemove"
+          />
+        </el-form-item>
+
+        <el-form-item label="授课老师" prop="course.teacher">
+          <el-input v-model="currentCourseVO.course.teacher" placeholder="请输入授课老师" />
+        </el-form-item>
+
+        <el-form-item label="课程时长" prop="course.duration">
+          <el-input-number
+            v-model="currentCourseVO.course.duration"
+            :min="0"
+            placeholder="分钟"
+          />
+          <span class="ml-2">分钟</span>
+        </el-form-item>
+
+        <el-form-item label="课程描述" prop="course.description">
+          <el-input
+            v-model="currentCourseVO.course.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入课程描述"
+          />
+        </el-form-item>
+
+        <el-form-item label="排序号" prop="course.orderNum">
+          <el-input-number v-model="currentCourseVO.course.orderNum" :min="0" />
+        </el-form-item>
+
+        <el-form-item label="状态" prop="course.status">
+          <el-radio-group v-model="currentCourseVO.course.status">
+            <el-radio :label="0">未上线</el-radio>
+            <el-radio :label="1">已上线</el-radio>
+            <el-radio :label="2">已下架</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-card>
+
+      <!-- 章节管理 -->
+      <el-card class="chapter-card" shadow="never">
+        <template #header>
+          <div class="card-header-flex">
+            <span class="card-header">章节管理</span>
+            <el-button type="primary" size="small" @click="addChapter">
+              <el-icon><Plus /></el-icon>
+              添加章节
+            </el-button>
+          </div>
+        </template>
+
+        <div v-if="currentCourseVO.courseChapters.length === 0" class="empty-tip">
+          暂无章节，请点击"添加章节"按钮添加
+        </div>
+
+        <el-collapse v-model="activeChapters">
+          <el-collapse-item
+            v-for="(chapterVO, chapterIndex) in currentCourseVO.courseChapters"
+            :key="chapterIndex"
+            :name="chapterIndex"
+          >
+            <template #title>
+              <div class="chapter-title">
+                <span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
+                <div class="chapter-actions" @click.stop>
+                  <el-button
+                    type="danger"
+                    size="small"
+                    link
+                    @click="removeChapter(chapterIndex)"
+                  >
+                    删除章节
+                  </el-button>
+                </div>
+              </div>
+            </template>
+
+            <!-- 章节信息 -->
+            <el-form-item :label="`章节${chapterIndex + 1}名称`" :prop="`courseChapters.${chapterIndex}.chapter.name`">
+              <el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
+            </el-form-item>
+
+            <el-form-item :label="`章节${chapterIndex + 1}排序`" :prop="`courseChapters.${chapterIndex}.chapter.orderNum`">
+              <el-input-number v-model="chapterVO.chapter.orderNum" :min="0" />
+            </el-form-item>
+
+            <!-- 学习节点 -->
+            <div class="nodes-section">
+              <div class="nodes-header">
+                <span class="nodes-title">学习节点</span>
+                <el-button type="primary" size="small" @click="addNode(chapterIndex)">
+                  <el-icon><Plus /></el-icon>
+                  添加节点
+                </el-button>
+              </div>
+
+              <div v-if="chapterVO.nodes.length === 0" class="empty-tip">
+                暂无学习节点
+              </div>
+
+              <div v-else class="nodes-list">
+                <el-card
+                  v-for="(node, nodeIndex) in chapterVO.nodes"
+                  :key="nodeIndex"
+                  class="node-card"
+                  shadow="hover"
+                >
+                  <template #header>
+                    <div class="node-header">
+                      <span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
+                      <el-button
+                        type="danger"
+                        size="small"
+                        link
+                        @click="removeNode(chapterIndex, nodeIndex)"
+                      >
+                        删除
+                      </el-button>
+                    </div>
+                  </template>
+
+                  <el-form-item label="节点名称">
+                    <el-input v-model="node.name" placeholder="请输入节点名称" />
+                  </el-form-item>
+
+                  <el-form-item label="节点类型">
+                    <el-radio-group v-model="node.nodeType">
+                      <el-radio :label="0">文章资源</el-radio>
+                      <el-radio :label="1">富文本</el-radio>
+                      <el-radio :label="2">上传文件</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+
+                  <!-- 文章资源选择 -->
+                  <el-form-item v-if="node.nodeType === 0" label="选择文章">
+                    <el-select
+                      v-model="node.resourceID"
+                      filterable
+                      remote
+                      placeholder="搜索并选择文章"
+                      :remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
+                      :loading="getNodeLoading(chapterIndex, nodeIndex)"
+                      style="width: 100%"
+                    >
+                      <el-option
+                        v-for="article in getNodeArticleOptions(chapterIndex, nodeIndex)"
+                        :key="article.resourceID"
+                        :label="article.title"
+                        :value="article.resourceID"
+                      />
+                    </el-select>
+                  </el-form-item>
+
+                  <!-- 富文本编辑 -->
+                  <el-form-item v-if="node.nodeType === 1" label="内容编辑">
+                    <RichTextComponent v-model="node.content" />
+                  </el-form-item>
+
+                  <!-- 文件上传 -->
+                  <el-form-item v-if="node.nodeType === 2" label="上传文件">
+                    <FileUpload
+                      :as-dialog="false"
+                      :multiple="false"
+                      module="course-node"
+                      :max-size="100"
+                      tip="支持上传视频、音频、文档等文件，单个文件不超过100MB"
+                      @success="(files) => handleNodeFileUploadSuccess(files, chapterIndex, nodeIndex)"
+                    />
+                    <div v-if="node.videoUrl" class="file-info-display">
+                      <span>已上传文件</span>
+                      <el-button type="text" @click="node.videoUrl = ''">删除</el-button>
+                    </div>
+                  </el-form-item>
+
+                  <el-form-item label="节点时长">
+                    <el-input-number v-model="node.duration" :min="0" />
+                    <span class="ml-2">分钟</span>
+                  </el-form-item>
+
+                  <el-form-item label="是否必修">
+                    <el-switch
+                      v-model="node.isRequired"
+                      :active-value="1"
+                      :inactive-value="0"
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="排序号">
+                    <el-input-number v-model="node.orderNum" :min="0" />
+                  </el-form-item>
+                </el-card>
+              </div>
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <!-- 操作按钮 -->
+      <el-form-item class="action-buttons">
+        <el-button type="primary" @click="handleSubmit" :loading="submitting">
+          {{ courseID ? '更新课程' : '创建课程' }}
+        </el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </el-form-item>
+    </el-form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Plus, ArrowLeft } from '@element-plus/icons-vue';
+import { FileUpload } from '@/components/file';
+import { RichTextComponent } from '@/components/text';
+import { courseApi } from '@/apis/study';
+import { resourceApi } from '@/apis/resource';
+import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
+import type { Resource } from '@/types/resource';
+import type { SysFile } from '@/types';
+
+defineOptions({
+  name: 'CourseAdd'
+});
+
+// 节点扩展类型（用于前端交互）
+interface NodeWithExtras extends CourseNode {
+  loading?: boolean;
+  articleOptions?: Resource[];
+  searchMethod?: (query: string) => void;
+}
+
+interface Props {
+  courseID?: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  success: [];
+  cancel: [];
+}>();
+
+const formRef = ref();
+const submitting = ref(false);
+const activeChapters = ref<number[]>([]);
+
+// 原始数据（用于比对）
+const originalCourseVO = ref<CourseVO>();
+// 当前编辑的数据
+const currentCourseVO = ref<CourseVO>({
+  course: {
+    name: '',
+    coverImage: '',
+    description: '',
+    teacher: '',
+    duration: 0,
+    status: 0,
+    orderNum: 0
+  },
+  courseChapters: [],
+  courseTags: []
+});
+
+// 表单验证规则
+const rules = {
+  'course.name': [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
+  'course.teacher': [{ required: true, message: '请输入授课老师', trigger: 'blur' }]
+};
+
+onMounted(() => {
+  if (props.courseID) {
+    loadCourse();
+  }
+});
+
+// 加载课程数据
+async function loadCourse() {
+  try {
+    const res = await courseApi.getCourseById(props.courseID!);
+    if (res.success && res.data) {
+      // 保存原始数据
+      originalCourseVO.value = JSON.parse(JSON.stringify(res.data));
+      // 设置当前编辑数据
+      currentCourseVO.value = JSON.parse(JSON.stringify(res.data));
+      console.log(currentCourseVO.value);
+    }
+  } catch (error) {
+    console.error('加载课程失败:', error);
+    ElMessage.error('加载课程失败');
+  }
+}
+
+// 添加章节
+function addChapter() {
+  const newChapterVO: ChapterVO = {
+    chapter: {
+      chapterID: '',
+      name: '',
+      orderNum: currentCourseVO.value.courseChapters.length
+    },
+    nodes: []
+  };
+  currentCourseVO.value.courseChapters.push(newChapterVO);
+  activeChapters.value.push(currentCourseVO.value.courseChapters.length - 1);
+}
+
+// 删除章节
+function removeChapter(index: number) {
+  currentCourseVO.value.courseChapters.splice(index, 1);
+  // 更新激活的章节索引
+  activeChapters.value = activeChapters.value
+    .filter(i => i !== index)
+    .map(i => i > index ? i - 1 : i);
+}
+
+// 添加节点
+function addNode(chapterIndex: number) {
+  const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
+  const newNode: NodeWithExtras = {
+    nodeID: '',
+    name: '',
+    nodeType: 0,
+    content: '',
+    duration: 0,
+    isRequired: 1,
+    orderNum: nodeIndex,
+    loading: false,
+    articleOptions: [],
+    searchMethod: (query: string) => searchArticles(query, chapterIndex, nodeIndex)
+  };
+  currentCourseVO.value.courseChapters[chapterIndex].nodes.push(newNode);
+}
+
+// 删除节点
+function removeNode(chapterIndex: number, nodeIndex: number) {
+  currentCourseVO.value.courseChapters[chapterIndex].nodes.splice(nodeIndex, 1);
+}
+
+// 辅助函数：获取节点的 searchMethod
+function getNodeSearchMethod(chapterIndex: number, nodeIndex: number) {
+  const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
+  return node.searchMethod;
+}
+
+// 辅助函数：获取节点的 loading 状态
+function getNodeLoading(chapterIndex: number, nodeIndex: number) {
+  const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
+  return node.loading || false;
+}
+
+// 辅助函数：获取节点的 articleOptions
+function getNodeArticleOptions(chapterIndex: number, nodeIndex: number) {
+  const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
+  return node.articleOptions || [];
+}
+
+// 搜索文章
+async function searchArticles(query: string, chapterIndex: number, nodeIndex: number) {
+  const node = currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex] as NodeWithExtras;
+  if (!query) {
+    node.articleOptions = [];
+    return;
+  }
+  
+  node.loading = true;
+  try {
+    const res = await resourceApi.getResourceList({
+      keyword: query
+    });
+    if (res.success && res.dataList) {
+      node.articleOptions = res.dataList;
+    }
+  } catch (error) {
+    console.error('搜索文章失败:', error);
+  } finally {
+    node.loading = false;
+  }
+}
+
+// 处理封面上传成功
+function handleCoverUploadSuccess(files: SysFile[]) {
+  if (files && files.length > 0) {
+    // coverUrl已经通过v-model:cover-url自动更新了
+    // 这里可以做一些额外的处理，比如记录fileID
+    console.log('封面上传成功:', files[0]);
+  }
+}
+
+// 处理封面删除
+function handleCoverRemove() {
+  currentCourseVO.value.course.coverImage = '';
+}
+
+// 处理节点文件上传成功
+function handleNodeFileUploadSuccess(files: SysFile[], chapterIndex: number, nodeIndex: number) {
+  if (files && files.length > 0) {
+    currentCourseVO.value.courseChapters[chapterIndex].nodes[nodeIndex].videoUrl = files[0].filePath || '';
+  }
+}
+
+// 提交表单
+async function handleSubmit() {
+  try {
+    await formRef.value.validate();
+    
+    submitting.value = true;
+    
+    // 先创建/更新课程
+    let courseID = props.courseID;
+    if (courseID) {
+      const res = await courseApi.updateCourse({
+        ...currentCourseVO.value.course,
+        courseID
+      });
+      if (!res.success) {
+        throw new Error('更新课程失败');
+      }
+    } else {
+      const res = await courseApi.createCourse(currentCourseVO.value);
+      if (!res.success || !res.data?.course.courseID) {
+        throw new Error('创建课程失败');
+      }
+      courseID = res.data.course.courseID;
+    }    
+    ElMessage.success(props.courseID ? '课程更新成功' : '课程创建成功');
+    emit('success');
+  } catch (error) {
+    console.error('保存失败:', error);
+    ElMessage.error('保存失败');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+// 取消
+function handleCancel() {
+  emit('cancel');
+}
+</script>
+
+<style lang="scss" scoped>
+.course-add {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+
+  .page-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0;
+  }
+}
+
+.info-card,
+.chapter-card {
+  margin-bottom: 20px;
+  
+  :deep(.el-card__body) {
+    padding: 20px;
+  }
+}
+
+.card-header {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.card-header-flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ml-2 {
+  margin-left: 8px;
+}
+
+.chapter-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-right: 20px;
+}
+
+.chapter-actions {
+  margin-left: auto;
+}
+
+.nodes-section {
+  margin-top: 20px;
+  padding: 15px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.nodes-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.nodes-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #606266;
+}
+
+.nodes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.node-card {
+  :deep(.el-card__header) {
+    padding: 12px 15px;
+    background: #fafafa;
+  }
+  
+  :deep(.el-card__body) {
+    padding: 15px;
+  }
+}
+
+.node-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+}
+
+.empty-tip {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.action-buttons {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.file-info-display {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  span {
+    color: #606266;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/schoolNewsWeb/src/views/admin/manage/study/components/CourseList.vue b/schoolNewsWeb/src/views/admin/manage/study/components/CourseList.vue
new file mode 100644
index 0000000..e3b6952
--- /dev/null
+++ b/schoolNewsWeb/src/views/admin/manage/study/components/CourseList.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="course-list">
+    <!-- 搜索栏 -->
+    <el-form :model="searchForm" inline class="search-form">
+      <el-form-item label="课程名称">
+        <el-input
+          v-model="searchForm.name"
+          placeholder="请输入课程名称"
+          clearable
+          @keyup.enter="handleSearch"
+        />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
+          <el-option label="未上线" :value="0" />
+          <el-option label="已上线" :value="1" />
+          <el-option label="已下架" :value="2" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">
+          <el-icon><Search /></el-icon>
+          搜索
+        </el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作按钮 -->
+    <div class="toolbar">
+      <el-button type="primary" @click="handleAdd">
+        <el-icon><Plus /></el-icon>
+        新增课程
+      </el-button>
+    </div>
+
+    <!-- 课程表格 -->
+    <el-table
+      v-loading="loading"
+      :data="courseList"
+      border
+      stripe
+    >
+      <el-table-column prop="name" label="课程名称" min-width="200" />
+      <el-table-column label="封面" width="100">
+        <template #default="{ row }">
+          <el-image
+            v-if="row.coverImage"
+            :src="FILE_DOWNLOAD_URL + row.coverImage"
+            style="width: 60px; height: 60px"
+            fit="cover"
+          />
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="teacher" label="授课老师" width="120" />
+      <el-table-column prop="duration" label="时长(分钟)" width="120" />
+      <el-table-column prop="learnCount" label="学习人数" width="100" />
+      <el-table-column prop="viewCount" label="浏览次数" width="100" />
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag v-if="row.status === 0" type="info">未上线</el-tag>
+          <el-tag v-else-if="row.status === 1" type="success">已上线</el-tag>
+          <el-tag v-else-if="row.status === 2" type="danger">已下架</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="80" />
+      <el-table-column label="操作" width="250" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" size="small" link @click="handleEdit(row)">
+            编辑
+          </el-button>
+          <el-button
+            v-if="row.status === 0"
+            type="success"
+            size="small"
+            link
+            @click="handleUpdateStatus(row, 1)"
+          >
+            上线
+          </el-button>
+          <el-button
+            v-if="row.status === 1"
+            type="warning"
+            size="small"
+            link
+            @click="handleUpdateStatus(row, 2)"
+          >
+            下架
+          </el-button>
+          <el-button type="danger" size="small" link @click="handleDelete(row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      v-if="total > 0"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :total="total"
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      class="pagination"
+      @size-change="handlePageChange"
+      @current-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Search, Plus } from '@element-plus/icons-vue';
+import { courseApi } from '@/apis/study';
+import { FILE_DOWNLOAD_URL } from '@/config';
+import type { Course, PageParam } from '@/types';
+
+defineOptions({
+  name: 'CourseList'
+});
+
+const emit = defineEmits<{
+  add: [];
+  edit: [course: Course];
+}>();
+
+const loading = ref(false);
+const courseList = ref<Course[]>([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+const searchForm = reactive({
+  name: '',
+  status: undefined as number | undefined
+});
+
+onMounted(() => {
+  loadCourses();
+});
+
+// 加载课程列表
+async function loadCourses() {
+  loading.value = true;
+  try {
+    const res = await courseApi.getCoursePage({page: currentPage.value, size: pageSize.value}, searchForm);
+    if (res.success && res.pageDomain) {
+      courseList.value = res.pageDomain.dataList || [];
+      total.value = res.pageDomain.pageParam.totalElements || 0;
+    }
+  } catch (error) {
+    console.error('加载课程列表失败:', error);
+    ElMessage.error('加载课程列表失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 搜索
+function handleSearch() {
+  currentPage.value = 1;
+  loadCourses();
+}
+
+// 重置
+function handleReset() {
+  searchForm.name = '';
+  searchForm.status = undefined;
+  currentPage.value = 1;
+  loadCourses();
+}
+
+// 新增
+function handleAdd() {
+  emit('add');
+}
+
+// 编辑
+function handleEdit(course: Course) {
+  emit('edit', course);
+}
+
+// 更新状态
+async function handleUpdateStatus(course: Course, status: number) {
+  const statusText = status === 1 ? '上线' : '下架';
+  try {
+    await ElMessageBox.confirm(`确定要${statusText}该课程吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+
+    const res = await courseApi.updateCourseStatus(course.courseID!, status);
+    if (res.success) {
+      ElMessage.success(`${statusText}成功`);
+      loadCourses();
+    } else {
+      ElMessage.error(`${statusText}失败`);
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('更新状态失败:', error);
+      ElMessage.error(`${statusText}失败`);
+    }
+  }
+}
+
+// 删除
+async function handleDelete(course: Course) {
+  try {
+    await ElMessageBox.confirm('确定要删除该课程吗？此操作不可恢复！', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+
+    const res = await courseApi.deleteCourse(course.courseID!);
+    if (res.success) {
+      ElMessage.success('删除成功');
+      loadCourses();
+    } else {
+      ElMessage.error('删除失败');
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('删除失败:', error);
+      ElMessage.error('删除失败');
+    }
+  }
+}
+
+// 分页变化
+function handlePageChange() {
+  loadCourses();
+}
+
+defineExpose({
+  loadCourses
+});
+</script>
+
+<style lang="scss" scoped>
+.course-list {
+  padding: 20px;
+}
+
+.search-form {
+  margin-bottom: 20px;
+}
+
+.toolbar {
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/schoolNewsWeb/src/views/admin/manage/study/components/index.ts b/schoolNewsWeb/src/views/admin/manage/study/components/index.ts
new file mode 100644
index 0000000..00bdbb5
--- /dev/null
+++ b/schoolNewsWeb/src/views/admin/manage/study/components/index.ts
@@ -0,0 +1,3 @@
+export { default as CourseList } from './CourseList.vue';
+export { default as CourseAdd } from './CourseAdd.vue';
+
diff --git a/schoolNewsWeb/src/views/article/ArticleAddView.vue b/schoolNewsWeb/src/views/article/ArticleAddView.vue
index cee5838..eb697ba 100644
--- a/schoolNewsWeb/src/views/article/ArticleAddView.vue
+++ b/schoolNewsWeb/src/views/article/ArticleAddView.vue
@@ -42,21 +42,17 @@
 
                 <!-- 封面图 -->
                 <el-form-item label="封面图片">
-                    <!-- 上传区域 - 只在没有封面图片时显示 -->
                     <FileUpload
-                        v-if="!articleForm.resource.coverImage"
                         :as-dialog="false"
+                        list-type="cover"
+                        v-model:cover-url="articleForm.resource.coverImage"
                         accept="image/*"
                         :max-size="2"
-                        :multiple="false"
-                        tip="建议尺寸：800x450px，支持jpg、png格式"
+                        module="article"
+                        tip="建议尺寸 800x450"
                         @success="handleCoverUploadSuccess"
+                        @remove="removeCover"
                     />
-                    <!-- 封面预览 - 只在有封面图片时显示 -->
-                    <div v-if="articleForm.resource.coverImage" class="cover-preview">
-                        <img :src="FILE_DOWNLOAD_URL + articleForm.resource.coverImage" class="cover" />
-                        <el-button type="danger" size="small" @click="removeCover">删除封面</el-button>
-                    </div>
                 </el-form-item>
 
                 <!-- 文章内容 -->
@@ -133,7 +129,6 @@ import { FileUpload } from '@/components/file';
 import { ArticleShowView } from './index';
 import { resourceCategoryApi, resourceTagApi, resourceApi } from '@/apis/resource';
 import { ResourceVO, ResourceCategory, Tag } from '@/types/resource';
-import { FILE_DOWNLOAD_URL } from '@/config';
 
 const router = useRouter();
 const route = useRoute();
@@ -274,11 +269,8 @@ function handlePreview() {
 // 封面上传成功
 function handleCoverUploadSuccess(files: any[]) {
     if (files && files.length > 0) {
-        const file = files[0];
-        // 使用文件下载URL构建完整路径
-        import('@/config').then(config => {
-            articleForm.value.resource.coverImage = config.FILE_DOWNLOAD_URL + file.id;
-        });
+        // coverUrl已经通过v-model:cover-url自动更新了
+        console.log('封面上传成功:', files[0]);
     }
 }
 
@@ -341,55 +333,4 @@ onMounted(async () => {
     padding: 32px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
 }
-
-.cover-uploader {
-    :deep(.el-upload) {
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        transition: all 0.2s;
-
-        &:hover {
-            border-color: #409eff;
-        }
-    }
-}
-
-.cover-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.cover {
-    width: 178px;
-    height: 178px;
-    display: block;
-    object-fit: cover;
-}
-
-.upload-tip {
-    font-size: 12px;
-    color: #909399;
-    margin-top: 8px;
-}
-
-.cover-preview {
-    margin-top: 16px;
-    position: relative;
-    
-    .cover {
-        width: 200px;
-        height: auto;
-        border-radius: 4px;
-        display: block;
-        margin-bottom: 8px;
-    }
-}
 </style>
diff --git a/schoolNewsWeb/src/views/resource-center/components/ResouceCollect.vue b/schoolNewsWeb/src/views/resource-center/components/ResouceCollect.vue
index c5d8883..5523a8a 100644
--- a/schoolNewsWeb/src/views/resource-center/components/ResouceCollect.vue
+++ b/schoolNewsWeb/src/views/resource-center/components/ResouceCollect.vue
@@ -20,15 +20,16 @@ const props = defineProps<Props>();
 
 
 const emit = defineEmits<{
-  collect: [];
-  uncollect: [];
+  collect: [type: number];
 }>();
 
 function handleCollect() {
     if(props.isCollected) {
-        emit('uncollect');
+        // 已收藏，取消收藏
+        emit('collect', -1);
     } else {
-        emit('collect');
+        // 未收藏，收藏
+        emit('collect', 1);
     }
 }
 
diff --git a/schoolNewsWeb/src/views/resource-center/components/ResourceArticle.vue b/schoolNewsWeb/src/views/resource-center/components/ResourceArticle.vue
index 51ed915..46a10b9 100644
--- a/schoolNewsWeb/src/views/resource-center/components/ResourceArticle.vue
+++ b/schoolNewsWeb/src/views/resource-center/components/ResourceArticle.vue
@@ -13,7 +13,6 @@
     <ResouceCollect
       :is-collected="isCollected"
       @collect="handleCollect"
-      @uncollect="handleUncollect"
     />
     <ResouceBottom
       :prev-resource="prevResource"
@@ -31,6 +30,7 @@ import { resourceApi } from '@/apis/resource';
 import { ElMessage } from 'element-plus';
 import type { Resource } from '@/types/resource';
 import { ArrowLeft } from '@element-plus/icons-vue';
+import { CollectionType, type UserCollection } from '@/types';
 
 interface Props {
   resourceId?: string;
@@ -103,30 +103,33 @@ function updateAdjacentResources(currentResourceId: string) {
   }
 }
 
-async function handleCollect() {
+async function handleCollect(type: number) {
   try {
     const resourceID = articleData.value?.resourceID;
     if (!resourceID) return;
-    
-    const res = await resourceApi.incrementCollectCount(resourceID);
+    let collect: UserCollection = {
+      collectionType: CollectionType.RESOURCE,
+      collectionID: resourceID,
+      collectionValue: type
+    }
+    const res = await resourceApi.resourceCollect(collect);
     if (res.success) {
-      isCollected.value = true;
-      ElMessage.success('收藏成功');
+      if (type === 1) {
+        isCollected.value = true;
+        ElMessage.success('收藏成功');
+      } else if (type === -1) {
+        isCollected.value = false;
+        ElMessage.success('已取消收藏');
+      }
     } else {
-      ElMessage.error('收藏失败');
+      ElMessage.error(type === 1 ? '收藏失败' : '取消收藏失败');
     }
   } catch (error) {
-    console.error('收藏失败:', error);
-    ElMessage.error('收藏失败');
+    console.error('操作失败:', error);
+    ElMessage.error('操作失败');
   }
 }
 
-function handleUncollect() {
-  // TODO: 实现取消收藏API
-  isCollected.value = false;
-  ElMessage.success('已取消收藏');
-}
-
 function handleNavigate(direction: 'prev' | 'next', resource: Resource) {
   const resourceId = resource.resourceID;
   if (resourceId) {