diff --git a/schoolNewsWeb/src/apis/study/course.ts b/schoolNewsWeb/src/apis/study/course.ts
index 900acea..2807058 100644
--- a/schoolNewsWeb/src/apis/study/course.ts
+++ b/schoolNewsWeb/src/apis/study/course.ts
@@ -5,7 +5,7 @@
  */
 
 import { api } from '@/apis/index';
-import type { Course, CourseChapter, ResultDomain,CourseVO,PageRequest, PageParam } from '@/types';
+import type { Course, CourseChapter, ResultDomain,CourseVO,PageRequest, PageParam, CourseNode } from '@/types';
 
 /**
  * 课程API服务
@@ -60,8 +60,8 @@ export const courseApi = {
    * @param course 课程数据
    * @returns Promise<ResultDomain<Course>>
    */
-  async updateCourse(course: Course): Promise<ResultDomain<Course>> {
-    const response = await api.put<Course>(`${this.prefixCourse}/course`, course);
+  async updateCourse(courseVO: CourseVO): Promise<ResultDomain<CourseVO>> {
+    const response = await api.put<CourseVO>(`${this.prefixCourse}/course`, courseVO);
     return response.data;
   },
 
@@ -81,10 +81,68 @@ export const courseApi = {
    * @param status 状态
    * @returns Promise<ResultDomain<Course>>
    */
-  async updateCourseStatus(courseID: string, status: number): Promise<ResultDomain<Course>> {
-    const response = await api.put<Course>(`${this.prefixCourse}/${courseID}/status`, null, {
-      params: { status }
-    });
+  async updateCourseStatus(course: Course): Promise<ResultDomain<Course>> {
+    const response = await api.put<Course>(`${this.prefixCourse}/course/status`, course);
+    return response.data;
+  },
+
+  /**
+   * 创建课程章节
+   * @param chapter 章节数据
+   * @returns Promise<ResultDomain<CourseChapter>>
+   */
+  async createCourseChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
+    const response = await api.post<CourseChapter>(`${this.prefixCourse}/course/chapter`, chapter);
+    return response.data;
+  },
+
+  /**
+   * 更新课程章节
+   * @param chapter 章节数据
+   * @returns Promise<ResultDomain<CourseChapter>>
+   */
+  async updateCourseChapter(chapter: CourseChapter): Promise<ResultDomain<CourseChapter>> {
+    const response = await api.put<CourseChapter>(`${this.prefixCourse}/course/chapter`, chapter);
+    return response.data;
+  },
+
+  /**
+   * 删除课程章节
+   * @param chapterID 章节ID
+   * @returns Promise<ResultDomain<boolean>>
+   */
+  async deleteCourseChapter(chapterID: string): Promise<ResultDomain<boolean>> {
+    const response = await api.delete<boolean>(`${this.prefixCourse}/course/chapter/${chapterID}`);
+    return response.data;
+  },
+
+  /**
+   * 创建课程章节节点
+   * @param node 节点数据
+   * @returns Promise<ResultDomain<CourseNode>>
+   */
+  async createCourseChapterNode(node: CourseNode): Promise<ResultDomain<CourseNode>> {
+    const response = await api.post<CourseNode>(`${this.prefixCourse}/course/chapter/node`, node);
+    return response.data;
+  },
+
+  /**
+   * 更新课程章节节点
+   * @param node 节点数据
+   * @returns Promise<ResultDomain<CourseNode>>
+   */
+  async updateCourseChapterNode(node: CourseNode): Promise<ResultDomain<CourseNode>> {
+    const response = await api.put<CourseNode>(`${this.prefixCourse}/course/chapter/node`, node);
+    return response.data;
+  },
+
+  /**
+   * 删除课程章节节点
+   * @param nodeID 节点ID
+   * @returns Promise<ResultDomain<boolean>>
+   */
+  async deleteCourseChapterNode(nodeID: string): Promise<ResultDomain<boolean>> {
+    const response = await api.delete<boolean>(`${this.prefixCourse}/course/chapter/node/${nodeID}`);
     return response.data;
   },
 
diff --git a/schoolNewsWeb/src/apis/study/learning-task.ts b/schoolNewsWeb/src/apis/study/learning-task.ts
index 9e147dc..6624b60 100644
--- a/schoolNewsWeb/src/apis/study/learning-task.ts
+++ b/schoolNewsWeb/src/apis/study/learning-task.ts
@@ -5,49 +5,60 @@
  */
 
 import { api } from '@/apis/index';
-import type { LearningTask, LearningProgress, ResultDomain } from '@/types';
+import type { LearningTask, LearningProgress, ResultDomain, PageParam, TaskVO, TaskUser, TaskItemVO } from '@/types';
 
 /**
  * 学习任务API服务
  */
 export const learningTaskApi = {
+  learningTaskPrefix: '/study/tasks',
   /**
    * 获取学习任务列表
    * @param filter 过滤条件
    * @returns Promise<ResultDomain<LearningTask>>
    */
   async getTaskList(filter?: Partial<LearningTask>): Promise<ResultDomain<LearningTask>> {
-    const response = await api.get<LearningTask>('/study/learning-task/list', filter);
+    const response = await api.get<LearningTask>(`${this.learningTaskPrefix}/list`, filter);
     return response.data;
   },
 
   /**
    * 根据ID获取任务详情
    * @param taskID 任务ID
-   * @returns Promise<ResultDomain<LearningTask>>
+   * @returns Promise<ResultDomain<TaskVO>>
    */
-  async getTaskById(taskID: string): Promise<ResultDomain<LearningTask>> {
-    const response = await api.get<LearningTask>(`/study/learning-task/${taskID}`);
+  async getTaskById(taskID: string): Promise<ResultDomain<TaskVO>> {
+    const response = await api.get<TaskVO>(`${this.learningTaskPrefix}/${taskID}`);
     return response.data;
   },
 
   /**
-   * 创建学习任务
-   * @param task 任务数据
+   * 获取任务分页列表
+   * @param pageParam 分页参数
+   * @param filter 过滤条件
    * @returns Promise<ResultDomain<LearningTask>>
    */
-  async createTask(task: LearningTask): Promise<ResultDomain<LearningTask>> {
-    const response = await api.post<LearningTask>('/study/learning-task/create', task);
+  async getTaskPage(pageParam: PageParam, filter: LearningTask): Promise<ResultDomain<LearningTask>> {
+    const response = await api.post<LearningTask>(`${this.learningTaskPrefix}/page`, {pageParam, filter});
+    return response.data;
+  },
+  /**
+   * 创建学习任务
+   * @param task 任务数据
+   * @returns Promise<ResultDomain<TaskVO>>
+   */
+  async createTask(task: TaskVO): Promise<ResultDomain<TaskVO>> {
+    const response = await api.post<TaskVO>(`${this.learningTaskPrefix}/task`, task);
     return response.data;
   },
 
   /**
    * 更新学习任务
    * @param task 任务数据
-   * @returns Promise<ResultDomain<LearningTask>>
+   * @returns Promise<ResultDomain<TaskVO>>
    */
-  async updateTask(task: LearningTask): Promise<ResultDomain<LearningTask>> {
-    const response = await api.put<LearningTask>('/study/learning-task/update', task);
+  async updateTask(task: TaskVO): Promise<ResultDomain<TaskVO>> {
+    const response = await api.put<TaskVO>(`${this.learningTaskPrefix}/task`, task);
     return response.data;
   },
 
@@ -57,7 +68,7 @@ export const learningTaskApi = {
    * @returns Promise<ResultDomain<boolean>>
    */
   async deleteTask(taskID: string): Promise<ResultDomain<boolean>> {
-    const response = await api.delete<boolean>(`/study/learning-task/${taskID}`);
+    const response = await api.delete<boolean>(`${this.learningTaskPrefix}/task/${taskID}`);
     return response.data;
   },
 
@@ -66,8 +77,8 @@ export const learningTaskApi = {
    * @param taskID 任务ID
    * @returns Promise<ResultDomain<LearningTask>>
    */
-  async publishTask(taskID: string): Promise<ResultDomain<LearningTask>> {
-    const response = await api.post<LearningTask>(`/study/learning-task/${taskID}/publish`);
+  async publishTask(task: LearningTask): Promise<ResultDomain<LearningTask>> {
+    const response = await api.put<LearningTask>(`${this.learningTaskPrefix}/status`, task);
     return response.data;
   },
 
@@ -78,9 +89,47 @@ export const learningTaskApi = {
    * @returns Promise<ResultDomain<LearningProgress>>
    */
   async getUserTaskProgress(userID: string, taskID: string): Promise<ResultDomain<LearningProgress>> {
-    const response = await api.get<LearningProgress>(`/study/learning-task/${taskID}/progress`, {
+    const response = await api.get<LearningProgress>(`${this.learningTaskPrefix}/task/${taskID}/progress`, {
       userID
     });
     return response.data;
+  },
+
+  /**
+   * 分配任务给用户
+   * @param taskID 任务ID
+   * @param userID 用户ID
+   * @returns Promise<ResultDomain<TaskUser>>
+   */
+  async assignTaskToUser(taskID: string, userID: string): Promise<ResultDomain<TaskUser>> {
+    const response = await api.post<TaskUser>(`${this.learningTaskPrefix}/${taskID}/assign`, null, {
+      params: { userID }
+    });
+    return response.data;
+  },
+
+  /**
+   * 从用户移除任务
+   * @param taskID 任务ID
+   * @param userID 用户ID
+   * @returns Promise<ResultDomain<boolean>>
+   */
+  async removeTaskFromUser(taskID: string, userID: string): Promise<ResultDomain<boolean>> {
+    const response = await api.delete<boolean>(`${this.learningTaskPrefix}/${taskID}/user/${userID}`);
+    return response.data;
+  },
+
+  /**
+   * 用户获取个人任务列表（用户视角）
+   * @param pageParam 分页参数
+   * @param filter 过滤条件
+   * @returns Promise<ResultDomain<LearningTask>>
+   */
+  async getUserTaskPage(pageParam: PageParam, filter?: TaskItemVO): Promise<ResultDomain<LearningTask>> {
+    const response = await api.post<LearningTask>(`${this.learningTaskPrefix}/users/page`, {
+      pageParam,
+      filter
+    });
+    return response.data;
   }
 };
diff --git a/schoolNewsWeb/src/apis/system/user.ts b/schoolNewsWeb/src/apis/system/user.ts
index 3812c88..6e124d2 100644
--- a/schoolNewsWeb/src/apis/system/user.ts
+++ b/schoolNewsWeb/src/apis/system/user.ts
@@ -5,7 +5,7 @@
  */
 
 import { api } from '@/apis/index';
-import type { SysUser, SysUserInfo, UserVO, UserDeptRoleVO, SysUserDeptRole, ResultDomain } from '@/types';
+import type { SysUser, SysUserInfo, UserVO, UserDeptRoleVO, SysUserDeptRole, ResultDomain, PageParam } from '@/types';
 import { useStore } from 'vuex';
 
 const store = useStore();
@@ -48,6 +48,31 @@ export const userApi = {
     return response.data;
   },
 
+  /**
+   * 获取用户分页列表
+   * @param pageParam 分页参数
+   * @param filter 过滤条件
+   * @returns Promise<ResultDomain<UserVO>>
+   */
+  async getUserPage(pageParam: PageParam, filter?: any): Promise<ResultDomain<UserVO>> {
+    const response = await api.post<UserVO>('/users/page', {
+      pageParam,
+      filter
+    });
+    return response.data;
+  },
+
+  /**
+   * 获取用户分页列表
+   * @param pageParam 分页参数
+   * @param filter 过滤条件
+   * @returns Promise<ResultDomain<SysUser>>
+   */
+  async getUserPage(pageParam: PageParam, filter: SysUser): Promise<ResultDomain<SysUser>> {
+    const response = await api.post<SysUser>('/users/page', { pageParam, filter });
+    return response.data;
+  },
+
   /**
    * 创建用户
    * @param user 用户信息
diff --git a/schoolNewsWeb/src/components/index.ts b/schoolNewsWeb/src/components/index.ts
index 13bfdc9..eb9a65b 100644
--- a/schoolNewsWeb/src/components/index.ts
+++ b/schoolNewsWeb/src/components/index.ts
@@ -7,3 +7,6 @@ export * from './text';
 // 导出 file 文件组件
 export * from './file';
 
+// 导出 user 用户组件
+export * from './user';
+
diff --git a/schoolNewsWeb/src/components/text/RichTextComponent.vue b/schoolNewsWeb/src/components/text/RichTextComponent.vue
index 820dbdf..17f9a28 100644
--- a/schoolNewsWeb/src/components/text/RichTextComponent.vue
+++ b/schoolNewsWeb/src/components/text/RichTextComponent.vue
@@ -280,7 +280,6 @@ function initQuill() {
       // 启用图片/视频缩放模块
       imageResize: {
         onResizeEnd: () => {
-          console.log('🔄 图片/视频拉伸结束，强制更新内容');
           // 强制触发内容更新
           if (quillInstance) {
             const html = quillInstance.root.innerHTML;
@@ -321,7 +320,6 @@ function initQuill() {
   
   // 监听图片/视频尺寸变化
   quillInstance.root.addEventListener('input', () => {
-    console.log('📝 input 事件触发，更新内容');
     if (!quillInstance) return;
     
     const html = quillInstance.root.innerHTML;
diff --git a/schoolNewsWeb/src/types/study/index.ts b/schoolNewsWeb/src/types/study/index.ts
index bed4f75..9270874 100644
--- a/schoolNewsWeb/src/types/study/index.ts
+++ b/schoolNewsWeb/src/types/study/index.ts
@@ -4,7 +4,7 @@
  * @since 2025-10-15
  */
 
-import { BaseDTO } from '../base';
+import { BaseDTO, SysUser, Resource } from '@/types';
 
 /**
  * 课程实体
@@ -213,6 +213,25 @@ export interface TaskResource extends BaseDTO {
   orderNum?: number;
 }
 
+export interface TaskItemVO extends LearningTask {
+  courseID?: string;
+  courseName?: string;
+  resourceID?: string;
+  resourceName?: string;
+  userID?: string;
+  username?: string;
+  required?: boolean;
+  orderNum?: number;
+  status?: number;
+  progress?: boolean;
+  completeTime?: string;
+}
+export interface TaskVO extends BaseDTO {
+  learningTask: LearningTask;
+  taskCourses: TaskItemVO[];
+  taskResources: TaskItemVO[];
+  taskUsers: TaskItemVO[];
+}
 /**
  * 任务课程关联实体
  */
diff --git a/schoolNewsWeb/src/utils/quill-resize.ts b/schoolNewsWeb/src/utils/quill-resize.ts
index b23dab9..5638dbd 100644
--- a/schoolNewsWeb/src/utils/quill-resize.ts
+++ b/schoolNewsWeb/src/utils/quill-resize.ts
@@ -31,12 +31,10 @@ export class ImageResize {
     this.quill = quill;
     this.options = options;
     
-    console.log('🔄 ImageResize 模块初始化');
     
     // 等待编辑器完全初始化
     setTimeout(() => {
       this.initEventListeners();
-      console.log('✅ ImageResize 事件监听器已添加');
     }, 100);
   }
 
@@ -51,14 +49,11 @@ export class ImageResize {
   handleClick(e: MouseEvent) {
     const target = e.target as HTMLElement;
     
-    console.log('🖱️ 点击事件:', target.tagName, target);
     
     // 检查是否点击了图片或视频
     if (this.isResizableElement(target)) {
-      console.log('📷 检测到图片/视频点击，显示缩放控件');
       this.showResizer(target as HTMLImageElement | HTMLVideoElement);
     } else if (!this.overlay || !this.overlay.contains(target)) {
-      console.log('❌ 隐藏缩放控件');
       this.hideResizer();
     }
   }
@@ -79,7 +74,6 @@ export class ImageResize {
   showResizer(element: HTMLImageElement | HTMLVideoElement) {
     this.element = element;
     
-    console.log('🎯 显示缩放控件，元素:', element);
     
     // 创建遮罩层
     if (!this.overlay) {
@@ -91,7 +85,6 @@ export class ImageResize {
     // 更新遮罩层位置和大小
     this.updateOverlayPosition(element);
     
-    console.log('✅ 缩放控件已显示');
   }
 
   private updateOverlayPosition(element: HTMLImageElement | HTMLVideoElement) {
@@ -99,13 +92,7 @@ export class ImageResize {
     
     const rect = element.getBoundingClientRect();
     const containerRect = this.quill.root.getBoundingClientRect();
-    
-    console.log('📐 元素尺寸:', {
-      width: rect.width,
-      height: rect.height,
-      left: rect.left,
-      top: rect.top
-    });
+  
     
     this.overlay.style.display = 'block';
     this.overlay.style.left = `${rect.left - containerRect.left + this.quill.root.scrollLeft}px`;
@@ -305,7 +292,6 @@ export class ImageResize {
   private onResizeEnd() {
     if (!this.element) return;
     
-    console.log('🔄 拉伸结束，触发HTML更新');
     
     // 调用自定义回调
     if (this.options.onResizeEnd) {
@@ -324,19 +310,16 @@ export class ImageResize {
         range: null,
         source: 'user'
       });
-      console.log('✅ Quill text-change 事件已触发');
     }
     
     // 方案2: 触发 DOM 事件
     const inputEvent = new Event('input', { bubbles: true });
     this.quill.root.dispatchEvent(inputEvent);
-    console.log('✅ DOM input 事件已触发');
     
     // 方案3: 强制更新 Quill 内容
     setTimeout(() => {
       if (this.quill.update) {
         this.quill.update();
-        console.log('✅ Quill 内容已更新');
       }
     }, 0);
   }
diff --git a/schoolNewsWeb/src/views/admin/manage/study/StudyManagementView.vue b/schoolNewsWeb/src/views/admin/manage/study/StudyManagementView.vue
index c6e9bb4..f824ccd 100644
--- a/schoolNewsWeb/src/views/admin/manage/study/StudyManagementView.vue
+++ b/schoolNewsWeb/src/views/admin/manage/study/StudyManagementView.vue
@@ -3,9 +3,7 @@
     <h1 class="page-title">学习管理</h1>
 
     <el-tabs v-model="activeTab">
-      <el-tab-pane label="学习任务发布" name="task-publish">
-        <TaskPublish />
-      </el-tab-pane>
+
       <el-tab-pane label="学习记录" name="task-records">
         <StudyRecords />
       </el-tab-pane>
@@ -16,7 +14,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { ElTabs, ElTabPane } from 'element-plus';
-import TaskPublish from './components/TaskPublish.vue';
 import StudyRecords from './components/StudyRecords.vue';
 
 const activeTab = ref('task-publish');
diff --git a/schoolNewsWeb/src/views/admin/manage/study/TaskManageView.vue b/schoolNewsWeb/src/views/admin/manage/study/TaskManageView.vue
new file mode 100644
index 0000000..0425682
--- /dev/null
+++ b/schoolNewsWeb/src/views/admin/manage/study/TaskManageView.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="task-management">
+    <LearningTaskList
+      v-if="currentView === 'list'"
+      @add="handleAdd"
+      @edit="handleEdit"
+    />
+    <LearningTaskAdd
+      v-else-if="currentView === 'add' || currentView === 'edit'"
+      :task-i-d="currentTaskId"
+      @success="handleSuccess"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { LearningTaskList, LearningTaskAdd } from '@/views/task';
+import type { LearningTask } from '@/types/study';
+
+defineOptions({
+  name: 'TaskManageView'
+});
+
+type ViewType = 'list' | 'add' | 'edit';
+
+const currentView = ref<ViewType>('list');
+const currentTaskId = ref<string>();
+
+function handleAdd() {
+  currentView.value = 'add';
+  currentTaskId.value = undefined;
+}
+
+function handleEdit(task: LearningTask) {
+  currentView.value = 'edit';
+  currentTaskId.value = task.taskID;
+}
+
+function handleSuccess() {
+  currentView.value = 'list';
+  currentTaskId.value = undefined;
+}
+
+function handleCancel() {
+  currentView.value = 'list';
+  currentTaskId.value = undefined;
+}
+</script>
+
+<style lang="scss" scoped>
+.task-management {
+  height: 100%;
+  background: #f5f7fa;
+}
+</style>
diff --git a/schoolNewsWeb/src/views/admin/manage/study/TaskPublishView.vue b/schoolNewsWeb/src/views/admin/manage/study/TaskPublishView.vue
deleted file mode 100644
index 4355ff5..0000000
--- a/schoolNewsWeb/src/views/admin/manage/study/TaskPublishView.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div class="task-publish">
-    <el-form :model="taskForm" :rules="taskRules" ref="taskFormRef" label-width="120px">
-      <el-form-item label="任务名称" prop="name">
-        <el-input v-model="taskForm.name" placeholder="请输入任务名称" />
-      </el-form-item>
-
-      <el-form-item label="任务描述" prop="description">
-        <el-input 
-          v-model="taskForm.description" 
-          type="textarea" 
-          :rows="4"
-          placeholder="请输入任务描述"
-        />
-      </el-form-item>
-
-      <el-form-item label="任务周期" prop="period">
-        <el-date-picker
-          v-model="taskForm.period"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
-      </el-form-item>
-
-      <el-form-item label="关联资源" prop="resources">
-        <el-button @click="showResourceSelector">选择资源</el-button>
-        <div class="selected-resources" v-if="taskForm.resources.length">
-          <el-tag 
-            v-for="resource in taskForm.resources" 
-            :key="resource.id"
-            closable
-            @close="removeResource(resource)"
-          >
-            {{ resource.name }}
-          </el-tag>
-        </div>
-      </el-form-item>
-
-      <el-form-item label="任务接受对象" prop="targets">
-        <el-radio-group v-model="taskForm.targetType">
-          <el-radio label="dept">按部门</el-radio>
-          <el-radio label="role">按权限</el-radio>
-          <el-radio label="user">选人员</el-radio>
-        </el-radio-group>
-        <el-button @click="showTargetSelector" style="margin-left: 16px;">
-          选择对象
-        </el-button>
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" @click="handlePublish">发布任务</el-button>
-        <el-button @click="handleReset">重置</el-button>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElRadioGroup, ElRadio, ElTag, ElMessage, type FormInstance, type FormRules } from 'element-plus';
-
-const taskFormRef = ref<FormInstance>();
-
-const taskForm = ref({
-  name: '',
-  description: '',
-  period: null as [Date, Date] | null,
-  resources: [] as any[],
-  targetType: 'dept',
-  targets: [] as any[]
-});
-
-const taskRules: FormRules = {
-  name: [
-    { required: true, message: '请输入任务名称', trigger: 'blur' }
-  ],
-  description: [
-    { required: true, message: '请输入任务描述', trigger: 'blur' }
-  ],
-  period: [
-    { required: true, message: '请选择任务周期', trigger: 'change' }
-  ]
-};
-
-function showResourceSelector() {
-  // TODO: 显示资源选择器
-}
-
-function removeResource(resource: any) {
-  const index = taskForm.value.resources.indexOf(resource);
-  if (index > -1) {
-    taskForm.value.resources.splice(index, 1);
-  }
-}
-
-function showTargetSelector() {
-  // TODO: 显示对象选择器
-}
-
-async function handlePublish() {
-  if (!taskFormRef.value) return;
-  
-  try {
-    await taskFormRef.value.validate();
-    // TODO: 调用发布任务API
-    ElMessage.success('任务发布成功');
-    handleReset();
-  } catch (error) {
-    console.error('表单验证失败', error);
-  }
-}
-
-function handleReset() {
-  taskFormRef.value?.resetFields();
-  taskForm.value.resources = [];
-  taskForm.value.targets = [];
-}
-</script>
-
-<style lang="scss" scoped>
-.task-publish {
-  padding: 20px;
-  max-width: 800px;
-}
-
-.selected-resources {
-  margin-top: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-</style>
-
diff --git a/schoolNewsWeb/src/views/course/components/CourseAdd.vue b/schoolNewsWeb/src/views/course/components/CourseAdd.vue
index 0727e71..d7ad6f7 100644
--- a/schoolNewsWeb/src/views/course/components/CourseAdd.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseAdd.vue
@@ -19,11 +19,21 @@
         </template>
         
         <el-form-item label="课程名称" prop="course.name">
-          <el-input v-model="currentCourseVO.course.name" placeholder="请输入课程名称" />
+          <el-input 
+            id="course-name"
+            v-model="currentCourseVO.course.name" 
+            placeholder="请输入课程名称"
+            :disabled="!editMode"
+          />
         </el-form-item>
 
-        <el-form-item label="课程封面" prop="course.coverImage">
+        <!-- 课程封面 - 移除 label 关联 -->
+        <el-form-item prop="course.coverImage">
+          <template #label>
+            <span>课程封面</span>
+          </template>
           <FileUpload
+            v-if="editMode"
             :as-dialog="false"
             list-type="cover"
             v-model:cover-url="currentCourseVO.course.coverImage"
@@ -34,36 +44,58 @@
             @success="handleCoverUploadSuccess"
             @remove="handleCoverRemove"
           />
+          <div v-else class="cover-preview">
+            <img v-if="currentCourseVO.course.coverImage" :src="FILE_DOWNLOAD_URL + currentCourseVO.course.coverImage" alt="课程封面" />
+            <span v-else class="no-cover">暂无封面</span>
+          </div>
         </el-form-item>
 
         <el-form-item label="授课老师" prop="course.teacher">
-          <el-input v-model="currentCourseVO.course.teacher" placeholder="请输入授课老师" />
+          <el-input 
+            id="course-teacher"
+            v-model="currentCourseVO.course.teacher" 
+            placeholder="请输入授课老师"
+            :disabled="!editMode"
+          />
         </el-form-item>
 
         <el-form-item label="课程时长" prop="course.duration">
           <el-input-number
+            id="course-duration"
             v-model="currentCourseVO.course.duration"
             :min="0"
             placeholder="分钟"
+            :disabled="!editMode"
           />
           <span class="ml-2">分钟</span>
         </el-form-item>
 
         <el-form-item label="课程描述" prop="course.description">
           <el-input
+            id="course-description"
             v-model="currentCourseVO.course.description"
             type="textarea"
             :rows="3"
             placeholder="请输入课程描述"
+            :disabled="!editMode"
           />
         </el-form-item>
 
         <el-form-item label="排序号" prop="course.orderNum">
-          <el-input-number v-model="currentCourseVO.course.orderNum" :min="0" />
+          <el-input-number 
+            id="course-orderNum"
+            v-model="currentCourseVO.course.orderNum" 
+            :min="0"
+            :disabled="!editMode"
+          />
         </el-form-item>
 
         <el-form-item label="状态" prop="course.status">
-          <el-radio-group v-model="currentCourseVO.course.status">
+          <el-radio-group 
+            id="course-status"
+            v-model="currentCourseVO.course.status"
+            disabled
+          >
             <el-radio :label="0">未上线</el-radio>
             <el-radio :label="1">已上线</el-radio>
             <el-radio :label="2">已下架</el-radio>
@@ -76,7 +108,7 @@
         <template #header>
           <div class="card-header-flex">
             <span class="card-header">章节管理</span>
-            <el-button type="primary" size="small" @click="addChapter">
+            <el-button v-if="editMode" type="primary" size="small" @click="addChapter">
               <el-icon><Plus /></el-icon>
               添加章节
             </el-button>
@@ -96,7 +128,7 @@
             <template #title>
               <div class="chapter-title">
                 <span>章节 {{ chapterIndex + 1 }}: {{ chapterVO.chapter.name || '未命名章节' }}</span>
-                <div class="chapter-actions" @click.stop>
+                <div v-if="editMode" class="chapter-actions" @click.stop>
                   <el-button
                     type="danger"
                     size="small"
@@ -115,21 +147,31 @@
               :prop="`courseChapters.${chapterIndex}.chapter.name`"
               :rules="[{ required: true, message: '请输入章节名称', trigger: 'blur' }]"
             >
-              <el-input v-model="chapterVO.chapter.name" placeholder="请输入章节名称" />
+              <el-input 
+                :id="`chapter-${chapterIndex}-name`"
+                v-model="chapterVO.chapter.name" 
+                placeholder="请输入章节名称"
+                :disabled="!editMode"
+              />
             </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-input-number 
+                :id="`chapter-${chapterIndex}-orderNum`"
+                v-model="chapterVO.chapter.orderNum" 
+                :min="0"
+                :disabled="!editMode"
+              />
             </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-button v-if="editMode" type="primary" size="small" @click="addNode(chapterIndex)">
                   <el-icon><Plus /></el-icon>
                   添加节点
                 </el-button>
@@ -150,6 +192,7 @@
                     <div class="node-header">
                       <span>节点 {{ nodeIndex + 1 }}: {{ node.name || '未命名节点' }}</span>
                       <el-button
+                        v-if="editMode"
                         type="danger"
                         size="small"
                         link
@@ -164,14 +207,23 @@
                     label="节点名称"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.name`"
                   >
-                    <el-input v-model="node.name" placeholder="请输入节点名称" />
+                    <el-input 
+                      :id="`node-${chapterIndex}-${nodeIndex}-name`"
+                      v-model="node.name" 
+                      placeholder="请输入节点名称"
+                      :disabled="!editMode"
+                    />
                   </el-form-item>
 
                   <el-form-item 
                     label="节点类型"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.nodeType`"
                   >
-                    <el-radio-group v-model="node.nodeType">
+                    <el-radio-group 
+                      :id="`node-${chapterIndex}-${nodeIndex}-nodeType`"
+                      v-model="node.nodeType"
+                      :disabled="!editMode"
+                    >
                       <el-radio :label="0">文章资源</el-radio>
                       <el-radio :label="1">富文本</el-radio>
                       <el-radio :label="2">上传文件</el-radio>
@@ -185,12 +237,14 @@
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.resourceID`"
                   >
                     <el-select
+                      :id="`node-${chapterIndex}-${nodeIndex}-resourceID`"
                       v-model="node.resourceID"
                       filterable
                       remote
                       placeholder="搜索并选择文章"
                       :remote-method="getNodeSearchMethod(chapterIndex, nodeIndex)"
                       :loading="getNodeLoading(chapterIndex, nodeIndex)"
+                      :disabled="!editMode"
                       style="width: 100%"
                     >
                       <el-option
@@ -202,22 +256,27 @@
                     </el-select>
                   </el-form-item>
 
-                  <!-- 富文本编辑 -->
+                  <!-- 富文本编辑 - 移除 label 关联 -->
                   <el-form-item 
                     v-if="node.nodeType === 1" 
-                    label="内容编辑"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.content`"
                   >
-                    <RichTextComponent v-model="node.content" />
+                    <template #label>
+                      <span>内容编辑</span>
+                    </template>
+                    <RichTextComponent v-model="node.content" :disabled="!editMode" />
                   </el-form-item>
 
-                  <!-- 文件上传 -->
+                  <!-- 文件上传 - 移除 label 关联 -->
                   <el-form-item 
                     v-if="node.nodeType === 2" 
-                    label="上传文件"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.videoUrl`"
                   >
+                    <template #label>
+                      <span>上传文件</span>
+                    </template>
                     <FileUpload
+                      v-if="editMode"
                       :as-dialog="false"
                       :multiple="false"
                       module="course-node"
@@ -226,8 +285,11 @@
                       @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>
+                      <span>已上传文件: {{ node.videoUrl }}</span>
+                      <el-button v-if="editMode" type="text" @click="node.videoUrl = ''">删除</el-button>
+                    </div>
+                    <div v-else-if="!editMode" class="file-info-display">
+                      <span class="no-file">暂无文件</span>
                     </div>
                   </el-form-item>
 
@@ -235,18 +297,28 @@
                     label="节点时长"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.duration`"
                   >
-                    <el-input-number v-model="node.duration" :min="0" />
+                    <el-input-number 
+                      :id="`node-${chapterIndex}-${nodeIndex}-duration`"
+                      v-model="node.duration" 
+                      :min="0"
+                      :disabled="!editMode"
+                    />
                     <span class="ml-2">分钟</span>
                   </el-form-item>
 
+                  <!-- 是否必修 - 使用 template #label -->
                   <el-form-item 
-                    label="是否必修"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.isRequired`"
                   >
+                    <template #label>
+                      <span>是否必修</span>
+                    </template>
                     <el-switch
+                      :id="`node-${chapterIndex}-${nodeIndex}-isRequired`"
                       v-model="node.isRequired"
                       :active-value="1"
                       :inactive-value="0"
+                      :disabled="!editMode"
                     />
                   </el-form-item>
 
@@ -254,7 +326,12 @@
                     label="排序号"
                     :prop="`courseChapters.${chapterIndex}.nodes.${nodeIndex}.orderNum`"
                   >
-                    <el-input-number v-model="node.orderNum" :min="0" />
+                    <el-input-number 
+                      :id="`node-${chapterIndex}-${nodeIndex}-orderNum`"
+                      v-model="node.orderNum" 
+                      :min="0"
+                      :disabled="!editMode"
+                    />
                   </el-form-item>
                 </el-card>
               </div>
@@ -265,10 +342,10 @@
 
       <!-- 操作按钮 -->
       <el-form-item class="action-buttons">
-        <el-button type="primary" @click="handleSubmit" :loading="submitting">
+        <el-button v-if="editMode" type="primary" @click="handleSubmit" :loading="submitting">
           {{ courseID ? '更新课程' : '创建课程' }}
         </el-button>
-        <el-button @click="handleCancel">取消</el-button>
+        <el-button v-if="editMode" @click="handleCancel">取消</el-button>
       </el-form-item>
     </el-form>
     </div>
@@ -285,7 +362,7 @@ import { resourceApi } from '@/apis/resource';
 import type { CourseNode, CourseVO, ChapterVO } from '@/types/study';
 import type { Resource } from '@/types/resource';
 import type { SysFile } from '@/types';
-
+import { FILE_DOWNLOAD_URL } from '@/config';
 defineOptions({
   name: 'CourseAdd'
 });
@@ -310,6 +387,7 @@ const emit = defineEmits<{
 const formRef = ref();
 const submitting = ref(false);
 const activeChapters = ref<number[]>([]);
+const editMode = ref(true);
 
 // 原始数据（用于比对）
 const originalCourseVO = ref<CourseVO>();
@@ -364,7 +442,9 @@ async function loadCourse() {
           chapterVO.nodes = [];
         }
       });
-      
+      if (courseData.course.status === 1) {
+        editMode.value = false;
+      }
       // 保存原始数据
       originalCourseVO.value = JSON.parse(JSON.stringify(courseData));
       // 设置当前编辑数据
@@ -381,7 +461,7 @@ async function loadCourse() {
 function addChapter() {
   const newChapterVO: ChapterVO = {
     chapter: {
-      chapterID: '',
+      chapterID: currentCourseVO.value.course.courseID,
       name: '',
       orderNum: currentCourseVO.value.courseChapters.length
     },
@@ -405,6 +485,7 @@ function addNode(chapterIndex: number) {
   const nodeIndex = currentCourseVO.value.courseChapters[chapterIndex].nodes.length;
   const newNode: NodeWithExtras = {
     nodeID: '',
+    chapterID: currentCourseVO.value.courseChapters[chapterIndex].chapter.chapterID,
     name: '',
     nodeType: 0,
     content: '',
@@ -495,10 +576,7 @@ async function handleSubmit() {
     // 先创建/更新课程
     let courseID = props.courseID;
     if (courseID) {
-      const res = await courseApi.updateCourse({
-        ...currentCourseVO.value.course,
-        courseID
-      });
+      const res = await courseApi.updateCourse(currentCourseVO.value);
       if (!res.success) {
         throw new Error('更新课程失败');
       }
@@ -650,5 +728,30 @@ function handleCancel() {
     color: #606266;
     font-size: 14px;
   }
+  
+  .no-file {
+    color: #909399;
+    font-style: italic;
+  }
+}
+
+.cover-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+  border-radius: 4px;
+  
+  img {
+    max-width: 100%;
+    max-height: 100px;
+    border-radius: 4px;
+  }
+  
+  .no-cover {
+    color: #909399;
+    font-size: 14px;
+    font-style: italic;
+  }
 }
 </style>
diff --git a/schoolNewsWeb/src/views/course/components/CourseDetail.vue b/schoolNewsWeb/src/views/course/components/CourseDetail.vue
index 4379b02..0138fcb 100644
--- a/schoolNewsWeb/src/views/course/components/CourseDetail.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseDetail.vue
@@ -16,7 +16,7 @@
       <div class="course-header">
         <div class="cover-section">
           <img 
-            :src="courseVO.course.coverImage || defaultCover" 
+            :src="courseVO.course.coverImage? FILE_DOWNLOAD_URL + courseVO.course.coverImage : defaultCover" 
             :alt="courseVO.course.name"
             class="cover-image"
           />
@@ -200,6 +200,7 @@ import { userCollectionApi } from '@/apis/usercenter';
 import { useStore } from 'vuex';
 import type { CourseVO, LearningRecord } from '@/types';
 import { CollectionType } from '@/types';
+import { FILE_DOWNLOAD_URL } from '@/config';
 
 interface Props {
   courseId: string;
diff --git a/schoolNewsWeb/src/views/course/components/CourseList.vue b/schoolNewsWeb/src/views/course/components/CourseList.vue
index e3b6952..1c924e6 100644
--- a/schoolNewsWeb/src/views/course/components/CourseList.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseList.vue
@@ -1,30 +1,34 @@
 <template>
   <div class="course-list">
     <!-- 搜索栏 -->
-    <el-form :model="searchForm" inline class="search-form">
-      <el-form-item label="课程名称">
-        <el-input
+    <div class="search-form">
+      <div class="form-item">
+        <label class="form-label">课程名称</label>
+        <input
           v-model="searchForm.name"
+          type="text"
           placeholder="请输入课程名称"
-          clearable
+          class="form-input"
           @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>
+      </div>
+      <div class="form-item">
+        <label class="form-label">状态</label>
+        <select v-model="searchForm.status" class="form-select">
+          <option :value="undefined">请选择状态</option>
+          <option :value="0">未上线</option>
+          <option :value="1">已上线</option>
+          <option :value="2">已下架</option>
+        </select>
+      </div>
+      <div class="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>
+    </div>
 
     <!-- 操作按钮 -->
     <div class="toolbar">
@@ -71,7 +75,7 @@
             编辑
           </el-button>
           <el-button
-            v-if="row.status === 0"
+            v-if="row.status === 0 || row.status === 2"
             type="success"
             size="small"
             link
@@ -116,7 +120,7 @@ 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';
+import type { Course } from '@/types';
 
 defineOptions({
   name: 'CourseList'
@@ -192,8 +196,11 @@ async function handleUpdateStatus(course: Course, status: number) {
       cancelButtonText: '取消',
       type: 'warning'
     });
-
-    const res = await courseApi.updateCourseStatus(course.courseID!, status);
+    const params: Course = {
+      courseID: course.courseID!,
+      status: status
+    };
+    const res = await courseApi.updateCourseStatus(params);
     if (res.success) {
       ElMessage.success(`${statusText}成功`);
       loadCourses();
@@ -248,7 +255,62 @@ defineExpose({
 }
 
 .search-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-end;
   margin-bottom: 20px;
+  padding: 16px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+
+  .form-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .form-label {
+      font-size: 14px;
+      color: #606266;
+      font-weight: 500;
+    }
+
+    .form-input,
+    .form-select {
+      height: 32px;
+      padding: 0 12px;
+      font-size: 14px;
+      color: #606266;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+      background-color: #fff;
+      transition: border-color 0.2s;
+      outline: none;
+      min-width: 200px;
+
+      &:hover {
+        border-color: #c0c4cc;
+      }
+
+      &:focus {
+        border-color: #409eff;
+      }
+
+      &::placeholder {
+        color: #c0c4cc;
+      }
+    }
+
+    .form-select {
+      cursor: pointer;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23606266' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 8px center;
+      background-size: 14px;
+      padding-right: 30px;
+    }
+  }
 }
 
 .toolbar {
diff --git a/schoolNewsWeb/src/views/task/LearningTaskAdd.vue b/schoolNewsWeb/src/views/task/LearningTaskAdd.vue
new file mode 100644
index 0000000..f4bdaf4
--- /dev/null
+++ b/schoolNewsWeb/src/views/task/LearningTaskAdd.vue
@@ -0,0 +1,1061 @@
+<template>
+  <div class="learning-task-add">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <button class="btn-back" @click="handleCancel">
+        <span class="arrow-left">←</span> 返回
+      </button>
+      <h2 class="page-title">{{ taskID ? '编辑学习任务' : '创建学习任务' }}</h2>
+    </div>
+
+    <div class="task-form">
+      <!-- 基本信息 -->
+      <section class="form-section">
+        <div class="section-header">
+          <h3 class="section-title">基本信息</h3>
+        </div>
+        
+        <div class="form-group">
+          <label class="form-label required">任务名称</label>
+          <input 
+            v-model="taskData.learningTask.name" 
+            type="text" 
+            class="form-input"
+            placeholder="请输入任务名称"
+            @blur="validateTaskName"
+          />
+          <span v-if="errors.name" class="error-msg">{{ errors.name }}</span>
+        </div>
+
+        <div class="form-group">
+          <label class="form-label">任务描述</label>
+          <textarea 
+            v-model="taskData.learningTask.description" 
+            class="form-textarea"
+            rows="4"
+            placeholder="请输入任务描述"
+          ></textarea>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label class="form-label required">开始时间</label>
+            <input 
+              v-model="taskData.learningTask.startTime" 
+              type="datetime-local" 
+              class="form-input"
+              @blur="validateTime"
+            />
+            <span v-if="errors.startTime" class="error-msg">{{ errors.startTime }}</span>
+          </div>
+
+          <div class="form-group">
+            <label class="form-label required">结束时间</label>
+            <input 
+              v-model="taskData.learningTask.endTime" 
+              type="datetime-local" 
+              class="form-input"
+              @blur="validateTime"
+            />
+            <span v-if="errors.endTime" class="error-msg">{{ errors.endTime }}</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- 选择课程 -->
+      <section class="form-section">
+        <div class="section-header">
+          <h3 class="section-title">选择课程</h3>
+          <button class="btn-secondary" @click="showCourseSelector = true">添加课程</button>
+        </div>
+
+        <div v-if="selectedCourses.length === 0" class="empty-tip">
+          暂未添加课程，请点击"添加课程"按钮选择
+        </div>
+
+        <div v-else class="selected-list">
+          <div 
+            v-for="(item, index) in selectedCourses" 
+            :key="item.courseID"
+            class="selected-item"
+          >
+            <div class="item-info">
+              <span class="item-index">{{ index + 1 }}</span>
+              <div class="item-content">
+                <h4 class="item-title">{{ item.name }}</h4>
+                <p class="item-meta">授课老师: {{ item.teacher }} | 时长: {{ item.duration }}分钟</p>
+              </div>
+            </div>
+            <button class="btn-remove" @click="removeCourse(index)">删除</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- 选择文章资源 -->
+      <section class="form-section">
+        <div class="section-header">
+          <h3 class="section-title">选择文章资源</h3>
+          <button class="btn-secondary" @click="showResourceSelector = true">添加资源</button>
+        </div>
+
+        <div v-if="selectedResources.length === 0" class="empty-tip">
+          暂未添加文章资源，请点击"添加资源"按钮选择
+        </div>
+
+        <div v-else class="selected-list">
+          <div 
+            v-for="(item, index) in selectedResources" 
+            :key="item.resourceID"
+            class="selected-item"
+          >
+            <div class="item-info">
+              <span class="item-index">{{ index + 1 }}</span>
+              <div class="item-content">
+                <h4 class="item-title">{{ item.title }}</h4>
+                <p class="item-meta">作者: {{ item.author || '未知' }} | 浏览: {{ item.viewCount || 0 }}</p>
+              </div>
+            </div>
+            <button class="btn-remove" @click="removeResource(index)">删除</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- 选择用户 -->
+      <section class="form-section">
+        <div class="section-header">
+          <h3 class="section-title">选择学习用户</h3>
+          <button class="btn-secondary" @click="showUserSelector = true">添加用户</button>
+        </div>
+
+        <div v-if="selectedUsers.length === 0" class="empty-tip">
+          暂未添加学习用户，请点击"添加用户"按钮选择
+        </div>
+
+        <div v-else class="selected-list">
+          <div 
+            v-for="(item, index) in selectedUsers" 
+            :key="item.id"
+            class="selected-item"
+          >
+            <div class="item-info">
+              <span class="item-index">{{ index + 1 }}</span>
+              <div class="item-content">
+                <h4 class="item-title">{{ item.username }}</h4>
+                <p class="item-meta">邮箱: {{ item.email || '未知' }} | 手机: {{ item.phone || '-' }}</p>
+              </div>
+            </div>
+            <button class="btn-remove" @click="removeUser(index)">删除</button>
+          </div>
+        </div>
+      </section>
+
+      <!-- 操作按钮 -->
+      <div class="form-actions">
+        <button class="btn-primary" @click="handleSubmit" :disabled="submitting">
+          {{ submitting ? '提交中...' : (taskID ? '更新任务' : '创建任务') }}
+        </button>
+        <button class="btn-default" @click="handleCancel">取消</button>
+      </div>
+    </div>
+
+    <!-- 课程选择器弹窗 -->
+    <div v-if="showCourseSelector" class="modal-overlay" @click.self="showCourseSelector = false">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title">选择课程</h3>
+          <button class="modal-close" @click="showCourseSelector = false">✕</button>
+        </div>
+        
+        <div class="modal-body">
+          <div class="search-box">
+            <input 
+              v-model="courseSearchKeyword"
+              type="text" 
+              class="search-input"
+              placeholder="搜索课程名称或老师"
+              @input="searchCourses"
+            />
+          </div>
+
+          <div v-if="courseLoading" class="loading-tip">加载中...</div>
+          <div v-else-if="availableCourses.length === 0" class="empty-tip">暂无可选课程</div>
+          <div v-else class="selector-list">
+            <label 
+              v-for="course in availableCourses" 
+              :key="course.courseID"
+              class="selector-item"
+            >
+              <input 
+                type="checkbox"
+                :value="course.courseID"
+                :checked="isCourseSelected(course.courseID)"
+                @change="toggleCourse(course)"
+              />
+              <div class="selector-item-content">
+                <h4 class="selector-item-title">{{ course.name }}</h4>
+                <p class="selector-item-meta">{{ course.teacher }} | {{ course.duration }}分钟</p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-primary" @click="showCourseSelector = false">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 资源选择器弹窗 -->
+    <div v-if="showResourceSelector" class="modal-overlay" @click.self="showResourceSelector = false">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title">选择文章资源</h3>
+          <button class="modal-close" @click="showResourceSelector = false">✕</button>
+        </div>
+        
+        <div class="modal-body">
+          <div class="search-box">
+            <input 
+              v-model="resourceSearchKeyword"
+              type="text" 
+              class="search-input"
+              placeholder="搜索文章标题或作者"
+              @input="searchResources"
+            />
+          </div>
+
+          <div v-if="resourceLoading" class="loading-tip">加载中...</div>
+          <div v-else-if="availableResources.length === 0" class="empty-tip">暂无可选资源</div>
+          <div v-else class="selector-list">
+            <label 
+              v-for="resource in availableResources" 
+              :key="resource.resourceID"
+              class="selector-item"
+            >
+              <input 
+                type="checkbox"
+                :value="resource.resourceID"
+                :checked="isResourceSelected(resource.resourceID)"
+                @change="toggleResource(resource)"
+              />
+              <div class="selector-item-content">
+                <h4 class="selector-item-title">{{ resource.title }}</h4>
+                <p class="selector-item-meta">{{ resource.author || '未知' }} | {{ resource.viewCount || 0 }}次浏览</p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-primary" @click="showResourceSelector = false">确定</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 用户选择器弹窗 -->
+    <div v-if="showUserSelector" class="modal-overlay" @click.self="showUserSelector = false">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title">选择学习用户</h3>
+          <button class="modal-close" @click="showUserSelector = false">✕</button>
+        </div>
+        
+        <div class="modal-body">
+          <div class="search-box">
+            <input 
+              v-model="userSearchKeyword"
+              type="text" 
+              class="search-input"
+              placeholder="搜索用户名或手机号"
+              @input="searchUsers"
+            />
+          </div>
+
+          <div v-if="userLoading" class="loading-tip">加载中...</div>
+          <div v-else-if="availableUsers.length === 0" class="empty-tip">暂无可选用户</div>
+          <div v-else class="selector-list">
+            <label 
+              v-for="user in availableUsers" 
+              :key="user.id"
+              class="selector-item"
+            >
+              <input 
+                type="checkbox"
+                :value="user.id"
+                :checked="isUserSelected(user.id)"
+                @change="toggleUser(user)"
+              />
+              <div class="selector-item-content">
+                <h4 class="selector-item-title">{{ user.username }}</h4>
+                <p class="selector-item-meta">邮箱: {{ user.email || '未知' }} | {{ user.phone || '-' }}</p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-primary" @click="showUserSelector = false">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { courseApi } from '@/apis/study';
+import { resourceApi } from '@/apis/resource';
+import { userApi } from '@/apis/system';
+import { learningTaskApi } from '@/apis/study';
+import type { TaskVO, Course, TaskItemVO } from '@/types/study';
+import type { Resource } from '@/types/resource';
+import type { SysUser } from '@/types/user';
+
+defineOptions({
+  name: 'LearningTaskAdd'
+});
+
+defineExpose({
+  // 暴露组件实例方法（如果需要）
+});
+
+interface Props {
+  taskID?: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  success: [];
+  cancel: [];
+}>();
+
+// 表单数据
+const taskData = ref<TaskVO>({
+  learningTask: {
+    name: '',
+    description: '',
+    startTime: '',
+    endTime: '',
+    status: 0
+  },
+  taskCourses: [],
+  taskResources: [],
+  taskUsers: []
+});
+
+// 表单验证错误
+const errors = ref({
+  name: '',
+  startTime: '',
+  endTime: ''
+});
+
+// 选中的数据
+const selectedCourses = ref<Course[]>([]);
+const selectedResources = ref<Resource[]>([]);
+const selectedUsers = ref<SysUser[]>([]);
+
+// 可选数据
+const availableCourses = ref<Course[]>([]);
+const availableResources = ref<Resource[]>([]);
+const availableUsers = ref<SysUser[]>([]);
+
+// 弹窗控制
+const showCourseSelector = ref(false);
+const showResourceSelector = ref(false);
+const showUserSelector = ref(false);
+
+// 搜索关键词
+const courseSearchKeyword = ref('');
+const resourceSearchKeyword = ref('');
+const userSearchKeyword = ref('');
+
+// 加载状态
+const courseLoading = ref(false);
+const resourceLoading = ref(false);
+const userLoading = ref(false);
+const submitting = ref(false);
+
+onMounted(() => {
+  if (props.taskID) {
+    loadTask();
+  }
+  loadCourses();
+  loadResources();
+  loadUsers();
+});
+
+// 加载任务数据
+async function loadTask() {
+  try {
+    const res = await learningTaskApi.getTaskById(props.taskID!);
+    if (res.success && res.data) {
+      taskData.value = res.data as TaskVO;
+      // TODO: 根据 taskCourses、taskResources、taskUsers 恢复选中状态
+    }
+  } catch (error) {
+    console.error('加载任务失败:', error);
+    ElMessage.error('加载任务失败');
+  }
+}
+
+// 加载课程列表
+async function loadCourses() {
+  courseLoading.value = true;
+  try {
+    const res = await courseApi.getCourseList({ status: 1 }); // 只加载已上线的课程
+    if (res.success && res.dataList) {
+      availableCourses.value = res.dataList;
+    }
+  } catch (error) {
+    console.error('加载课程失败:', error);
+  } finally {
+    courseLoading.value = false;
+  }
+}
+
+// 搜索课程
+function searchCourses() {
+  // 简单的前端过滤
+  if (!courseSearchKeyword.value) {
+    loadCourses();
+    return;
+  }
+  
+  const keyword = courseSearchKeyword.value.toLowerCase();
+  availableCourses.value = availableCourses.value.filter(course => 
+    course.name?.toLowerCase().includes(keyword) ||
+    course.teacher?.toLowerCase().includes(keyword)
+  );
+}
+
+// 加载资源列表
+async function loadResources() {
+  resourceLoading.value = true;
+  try {
+    const res = await resourceApi.getResourceList({ status: 1 }); // 只加载已发布的资源
+    if (res.success && res.dataList) {
+      availableResources.value = res.dataList;
+    }
+  } catch (error) {
+    console.error('加载资源失败:', error);
+  } finally {
+    resourceLoading.value = false;
+  }
+}
+
+// 搜索资源
+function searchResources() {
+  if (!resourceSearchKeyword.value) {
+    loadResources();
+    return;
+  }
+  
+  const keyword = resourceSearchKeyword.value.toLowerCase();
+  availableResources.value = availableResources.value.filter(resource => 
+    resource.title?.toLowerCase().includes(keyword) ||
+    resource.author?.toLowerCase().includes(keyword)
+  );
+}
+
+// 加载用户列表
+async function loadUsers() {
+  userLoading.value = true;
+  try {
+    const res = await userApi.getUserList({});
+    if (res.success && res.dataList) {
+      availableUsers.value = res.dataList;
+    }
+  } catch (error) {
+    console.error('加载用户失败:', error);
+  } finally {
+    userLoading.value = false;
+  }
+}
+
+// 搜索用户
+function searchUsers() {
+  if (!userSearchKeyword.value) {
+    loadUsers();
+    return;
+  }
+  
+  const keyword = userSearchKeyword.value.toLowerCase();
+  availableUsers.value = availableUsers.value.filter(user => 
+    user.username?.toLowerCase().includes(keyword) ||
+    user.phone?.includes(keyword) ||
+    user.email?.toLowerCase().includes(keyword)
+  );
+}
+
+// 课程选择相关
+function isCourseSelected(courseID?: string) {
+  return selectedCourses.value.some(c => c.courseID === courseID);
+}
+
+function toggleCourse(course: Course) {
+  const index = selectedCourses.value.findIndex(c => c.courseID === course.courseID);
+  if (index > -1) {
+    selectedCourses.value.splice(index, 1);
+  } else {
+    selectedCourses.value.push(course);
+  }
+}
+
+function removeCourse(index: number) {
+  selectedCourses.value.splice(index, 1);
+}
+
+// 资源选择相关
+function isResourceSelected(resourceID?: string) {
+  return selectedResources.value.some(r => r.resourceID === resourceID);
+}
+
+function toggleResource(resource: Resource) {
+  const index = selectedResources.value.findIndex(r => r.resourceID === resource.resourceID);
+  if (index > -1) {
+    selectedResources.value.splice(index, 1);
+  } else {
+    selectedResources.value.push(resource);
+  }
+}
+
+function removeResource(index: number) {
+  selectedResources.value.splice(index, 1);
+}
+
+// 用户选择相关
+function isUserSelected(userID?: string) {
+  return selectedUsers.value.some(u => u.id === userID);
+}
+
+function toggleUser(user: SysUser) {
+  const index = selectedUsers.value.findIndex(u => u.id === user.id);
+  if (index > -1) {
+    selectedUsers.value.splice(index, 1);
+  } else {
+    selectedUsers.value.push(user);
+  }
+}
+
+function removeUser(index: number) {
+  selectedUsers.value.splice(index, 1);
+}
+
+// 表单验证
+function validateTaskName() {
+  if (!taskData.value.learningTask.name) {
+    errors.value.name = '请输入任务名称';
+    return false;
+  }
+  errors.value.name = '';
+  return true;
+}
+
+function validateTime() {
+  if (!taskData.value.learningTask.startTime) {
+    errors.value.startTime = '请选择开始时间';
+    return false;
+  }
+  if (!taskData.value.learningTask.endTime) {
+    errors.value.endTime = '请选择结束时间';
+    return false;
+  }
+  if (new Date(taskData.value.learningTask.startTime) >= new Date(taskData.value.learningTask.endTime)) {
+    errors.value.endTime = '结束时间必须大于开始时间';
+    return false;
+  }
+  errors.value.startTime = '';
+  errors.value.endTime = '';
+  return true;
+}
+
+function validateForm() {
+  const isNameValid = validateTaskName();
+  const isTimeValid = validateTime();
+  
+  if (!isNameValid || !isTimeValid) {
+    return false;
+  }
+  
+  if (selectedCourses.value.length === 0 && selectedResources.value.length === 0) {
+    ElMessage.warning('请至少选择一个课程或资源');
+    return false;
+  }
+  
+  if (selectedUsers.value.length === 0) {
+    ElMessage.warning('请至少选择一个学习用户');
+    return false;
+  }
+  
+  return true;
+}
+
+// 提交表单
+async function handleSubmit() {
+  if (!validateForm()) {
+    return;
+  }
+  
+  submitting.value = true;
+  
+  try {
+    // 组装任务课程数据
+    taskData.value.taskCourses = selectedCourses.value.map((course, index) => ({
+      courseID: course.courseID,
+      courseName: course.name,
+      orderNum: index
+    } as TaskItemVO));
+    
+    // 组装任务资源数据
+    taskData.value.taskResources = selectedResources.value.map((resource, index) => ({
+      resourceID: resource.resourceID,
+      resourceName: resource.title,
+      orderNum: index
+    } as TaskItemVO));
+    
+    // 组装任务用户数据
+    taskData.value.taskUsers = selectedUsers.value.map(user => ({
+      userID: user.id,
+      userName: user.username,
+      status: 0
+    } as TaskItemVO));
+    
+    let res;
+    if (props.taskID) {
+      res = await learningTaskApi.updateTask(taskData.value);
+    } else {
+      res = await learningTaskApi.createTask(taskData.value);
+    }
+    
+    if (res.success) {
+      ElMessage.success(props.taskID ? '任务更新成功' : '任务创建成功');
+      emit('success');
+    } else {
+      ElMessage.error(res.message || '操作失败');
+    }
+  } catch (error) {
+    console.error('提交失败:', error);
+    ElMessage.error('提交失败');
+  } finally {
+    submitting.value = false;
+  }
+}
+
+// 取消
+function handleCancel() {
+  emit('cancel');
+}
+</script>
+
+<style lang="scss" scoped>
+.learning-task-add {
+  padding: 20px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 24px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+  .page-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0;
+  }
+}
+
+.btn-back {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 16px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.3s;
+
+  &:hover {
+    color: #409eff;
+    border-color: #409eff;
+  }
+
+  .arrow-left {
+    font-size: 16px;
+  }
+}
+
+.task-form {
+  max-width: 1200px;
+}
+
+.form-section {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+
+  &.required::before {
+    content: '*';
+    color: #f56c6c;
+    margin-right: 4px;
+  }
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  transition: border-color 0.3s;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: #409eff;
+  }
+
+  &::placeholder {
+    color: #c0c4cc;
+  }
+}
+
+.form-textarea {
+  resize: vertical;
+  font-family: inherit;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.error-msg {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+  color: #f56c6c;
+}
+
+.empty-tip {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+  font-size: 14px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #ecf5ff;
+  }
+}
+
+.item-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.item-index {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: #409eff;
+  color: #fff;
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.item-content {
+  flex: 1;
+}
+
+.item-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  margin: 0 0 4px 0;
+}
+
+.item-meta {
+  font-size: 13px;
+  color: #909399;
+  margin: 0;
+}
+
+.btn-remove {
+  padding: 6px 16px;
+  border: 1px solid #f56c6c;
+  background: #fff;
+  color: #f56c6c;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #f56c6c;
+    color: #fff;
+  }
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-default {
+  padding: 10px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.btn-primary {
+  background: #409eff;
+  color: #fff;
+
+  &:hover:not(:disabled) {
+    background: #66b1ff;
+  }
+}
+
+.btn-secondary {
+  background: #67c23a;
+  color: #fff;
+  border: none;
+
+  &:hover {
+    background: #85ce61;
+  }
+}
+
+.btn-default {
+  background: #fff;
+  color: #606266;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    border-color: #409eff;
+  }
+}
+
+// 弹窗样式
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 700px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0;
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: #f5f7fa;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  color: #909399;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #ecf5ff;
+    color: #409eff;
+  }
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.search-box {
+  margin-bottom: 16px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: #409eff;
+  }
+}
+
+.loading-tip {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.selector-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.selector-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #ecf5ff;
+    border-color: #409eff;
+  }
+
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+  }
+}
+
+.selector-item-content {
+  flex: 1;
+}
+
+.selector-item-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  margin: 0 0 4px 0;
+}
+
+.selector-item-meta {
+  font-size: 12px;
+  color: #909399;
+  margin: 0;
+}
+</style>
+
diff --git a/schoolNewsWeb/src/views/task/LearningTaskList.vue b/schoolNewsWeb/src/views/task/LearningTaskList.vue
new file mode 100644
index 0000000..44fa94b
--- /dev/null
+++ b/schoolNewsWeb/src/views/task/LearningTaskList.vue
@@ -0,0 +1,1447 @@
+<template>
+  <div class="learning-task-list">
+    <!-- 搜索栏 -->
+    <div class="search-bar">
+      <div class="search-group">
+        <label class="search-label">任务名称</label>
+        <input 
+          v-model="searchParams.name"
+          type="text" 
+          class="search-input"
+          placeholder="输入任务名称搜索"
+          @keyup.enter="handleSearch"
+        />
+      </div>
+
+      <div class="search-group">
+        <label class="search-label">任务状态</label>
+        <select v-model="searchParams.status" class="search-select">
+          <option :value="undefined">全部</option>
+          <option :value="0">草稿</option>
+          <option :value="1">进行中</option>
+          <option :value="2">已结束</option>
+        </select>
+      </div>
+
+      <div class="search-actions">
+        <button class="btn-search" @click="handleSearch">搜索</button>
+        <button class="btn-reset" @click="handleReset">重置</button>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="toolbar">
+      <button class="btn-primary" @click="handleAdd">
+        <span class="icon">+</span> 新增任务
+      </button>
+    </div>
+
+    <!-- 任务表格 -->
+    <div class="task-table-wrapper">
+      <table class="task-table">
+        <thead>
+          <tr>
+            <th>任务名称</th>
+            <th>任务描述</th>
+            <th width="120">开始时间</th>
+            <th width="120">结束时间</th>
+            <th width="100">状态</th>
+            <th width="120">创建时间</th>
+            <th width="200">操作</th>
+          </tr>
+        </thead>
+        <tbody v-if="loading">
+          <tr>
+            <td colspan="7" class="loading-cell">
+              <div class="loading-spinner"></div>
+              <span>加载中...</span>
+            </td>
+          </tr>
+        </tbody>
+        <tbody v-else-if="taskList.length === 0">
+          <tr>
+            <td colspan="7" class="empty-cell">
+              <div class="empty-icon">📋</div>
+              <p>暂无任务数据</p>
+            </td>
+          </tr>
+        </tbody>
+        <tbody v-else>
+          <tr v-for="task in taskList" :key="task.taskID" class="table-row">
+            <td class="task-name">{{ task.name }}</td>
+            <td class="task-desc">
+              <div class="desc-text">{{ task.description || '-' }}</div>
+            </td>
+            <td>{{ formatDate(task.startTime) }}</td>
+            <td>{{ formatDate(task.endTime) }}</td>
+            <td>
+              <span class="status-tag" :class="getStatusClass(task.status)">
+                {{ getStatusText(task.status) }}
+              </span>
+            </td>
+            <td>{{ formatDate(task.createTime) }}</td>
+            <td class="action-cell">
+              <button class="btn-link btn-primary" @click="handleView(task)">查看</button>
+              <button class="btn-link btn-warning" @click="handleEdit(task)" v-if="task.status === 0">编辑</button>
+              <button class="btn-link btn-success" @click="handlePublish(task)" v-if="task.status === 0">发布</button>
+              <button class="btn-link btn-warning" @click="handleUpdateUser(task)" v-if="task.status !== 2">修改人员</button>
+              <button class="btn-link btn-danger" @click="handleDelete(task)" v-if="task.status === 0">删除</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="!loading && taskList.length > 0" class="pagination">
+      <div class="pagination-info">
+        共 {{ pagination.total }} 条数据，每页 {{ pagination.pageSize }} 条
+      </div>
+      
+      <div class="pagination-controls">
+        <button 
+          class="page-btn" 
+          :disabled="pagination.current === 1"
+          @click="handlePageChange(1)"
+        >
+          首页
+        </button>
+        
+        <button 
+          class="page-btn" 
+          :disabled="pagination.current === 1"
+          @click="handlePageChange(pagination.current - 1)"
+        >
+          上一页
+        </button>
+
+        <div class="page-numbers">
+          <button
+            v-for="page in displayPages"
+            :key="page"
+            class="page-number"
+            :class="{ active: page === pagination.current }"
+            @click="handlePageChange(page)"
+            :disabled="page === -1"
+          >
+            {{ page === -1 ? '...' : page }}
+          </button>
+        </div>
+
+        <button 
+          class="page-btn" 
+          :disabled="pagination.current === pagination.totalPages"
+          @click="handlePageChange(pagination.current + 1)"
+        >
+          下一页
+        </button>
+
+        <button 
+          class="page-btn" 
+          :disabled="pagination.current === pagination.totalPages"
+          @click="handlePageChange(pagination.totalPages)"
+        >
+          末页
+        </button>
+      </div>
+
+      <div class="pagination-jump">
+        <span>跳转到</span>
+        <input 
+          v-model.number="jumpPage" 
+          type="number" 
+          class="jump-input"
+          @keyup.enter="handleJumpPage"
+        />
+        <span>页</span>
+        <button class="jump-btn" @click="handleJumpPage">跳转</button>
+      </div>
+    </div>
+
+    <!-- 任务详情弹窗 -->
+    <div v-if="showTaskDetail" class="modal-overlay" @click.self="showTaskDetail = false">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title">任务详情</h3>
+          <button class="modal-close" @click="showTaskDetail = false">✕</button>
+        </div>
+        
+        <div class="modal-body">
+          <div v-if="viewingTask" class="task-detail">
+            <!-- 基本信息 -->
+            <div class="detail-section">
+              <h4 class="detail-title">基本信息</h4>
+              <div class="detail-content">
+                <div class="detail-row">
+                  <span class="detail-label">任务名称:</span>
+                  <span class="detail-value">{{ viewingTask.learningTask.name }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">任务描述:</span>
+                  <span class="detail-value">{{ viewingTask.learningTask.description || '暂无描述' }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">任务状态:</span>
+                  <span class="detail-value">
+                    <span class="status-badge" :class="getStatusClass(viewingTask.learningTask.status)">
+                      {{ getStatusText(viewingTask.learningTask.status) }}
+                    </span>
+                  </span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">开始时间:</span>
+                  <span class="detail-value">{{ formatDate(viewingTask.learningTask.startTime) }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">结束时间:</span>
+                  <span class="detail-value">{{ formatDate(viewingTask.learningTask.endTime) }}</span>
+                </div>
+                <div class="detail-row">
+                  <span class="detail-label">创建时间:</span>
+                  <span class="detail-value">{{ formatDate(viewingTask.learningTask.createTime) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 关联课程 -->
+            <div class="detail-section" v-if="viewingTask.taskCourses && viewingTask.taskCourses.length > 0">
+              <h4 class="detail-title">关联课程 ({{ viewingTask.taskCourses.length }})</h4>
+              <div class="detail-list">
+                <div v-for="(course, index) in viewingTask.taskCourses" :key="course.id" class="list-item">
+                  <span class="item-index">{{ index + 1 }}.</span>
+                  <span class="item-name">{{ course.courseName }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 关联资源 -->
+            <div class="detail-section" v-if="viewingTask.taskResources && viewingTask.taskResources.length > 0">
+              <h4 class="detail-title">关联资源 ({{ viewingTask.taskResources.length }})</h4>
+              <div class="detail-list">
+                <div v-for="(resource, index) in viewingTask.taskResources" :key="resource.id" class="list-item">
+                  <span class="item-index">{{ index + 1 }}.</span>
+                  <span class="item-name">{{ resource.resourceName }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 关联用户 -->
+            <div class="detail-section" v-if="viewingTask.taskUsers && viewingTask.taskUsers.length > 0">
+              <h4 class="detail-title">关联用户 ({{ viewingTask.taskUsers.length }})</h4>
+              <div class="detail-list">
+                <div v-for="(user, index) in viewingTask.taskUsers" :key="user.id" class="list-item">
+                  <span class="item-index">{{ index + 1 }}.</span>
+                  <span class="item-name">{{ user.username }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-default" @click="showTaskDetail = false">关闭</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 确认删除弹窗 -->
+    <div v-if="showDeleteConfirm" class="modal-overlay" @click.self="showDeleteConfirm = false">
+      <div class="modal-content small">
+        <div class="modal-header">
+          <h3 class="modal-title">确认删除</h3>
+          <button class="modal-close" @click="showDeleteConfirm = false">✕</button>
+        </div>
+        
+        <div class="modal-body">
+          <p class="confirm-text">确定要删除任务 "{{ deletingTask?.name }}" 吗？此操作不可恢复。</p>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-danger" @click="confirmDelete" :disabled="deleting">
+            {{ deleting ? '删除中...' : '确定删除' }}
+          </button>
+          <button class="btn-default" @click="showDeleteConfirm = false">取消</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 人员列表弹窗 -->
+    <div v-if="showUserList" class="modal-overlay" @click.self="closeUserList">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 class="modal-title">人员管理 - {{ managingTask?.name }}</h3>
+          <button class="modal-close" @click="closeUserList">✕</button>
+        </div>
+        
+        <div class="modal-body">
+          <div class="user-list-actions">
+            <button class="btn-success" @click="showAddUserSelector">
+              <span class="icon">+</span> 添加人员
+            </button>
+            <button class="btn-danger" @click="showRemoveUserSelector" :disabled="currentUsers.length === 0">
+              <span class="icon">-</span> 删除人员
+            </button>
+          </div>
+
+          <div class="current-user-list">
+            <div class="list-header">
+              <h4>当前人员列表</h4>
+              <span class="count-badge">{{ currentUsers.length }} 人</span>
+            </div>
+            <div v-if="currentUsers.length === 0" class="empty-list">
+              <div class="empty-icon">👥</div>
+              <p>暂无人员</p>
+            </div>
+            <div v-else class="user-grid">
+              <div v-for="user in currentUsers" :key="user.id" class="user-card">
+                <div class="user-avatar">{{ user.username?.charAt(0) }}</div>
+                <div class="user-info">
+                  <div class="user-name">{{ user.username }}</div>
+                  <div class="user-dept" v-if="user.deptName">{{ user.deptName }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn-default" @click="closeUserList">关闭</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 人员选择器组件 -->
+    <UserSelect
+      v-model:visible="showUserSelector"
+      :mode="selectorMode"
+      :title="selectorMode === 'add' ? '添加人员' : '删除人员'"
+      :left-title="selectorMode === 'add' ? '可添加人员' : '当前人员'"
+      :right-title="selectorMode === 'add' ? '待添加人员' : '待删除人员'"
+      :available-users="availableUsers"
+      :initial-target-users="[]"
+      :loading="saving"
+      @confirm="handleUserSelectConfirm"
+      @cancel="closeSelectorModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { learningTaskApi } from '@/apis/study';
+import { userApi } from '@/apis/system';
+import { UserSelect } from '@/components';
+import type { LearningTask, TaskVO, PageParam, UserVO } from '@/types';
+
+defineOptions({
+  name: 'LearningTaskList'
+});
+
+const emit = defineEmits<{
+  add: [];
+  edit: [task: LearningTask];
+}>();
+
+// 搜索参数
+const searchParams = ref({
+  name: '',
+  status: undefined as number | undefined
+});
+
+// 任务列表
+const taskList = ref<LearningTask[]>([]);
+const loading = ref(false);
+
+// 分页参数
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  totalPages: 0
+});
+
+// 跳转页码
+const jumpPage = ref<number>();
+
+// 弹窗控制
+const showTaskDetail = ref(false);
+const showDeleteConfirm = ref(false);
+const showUserList = ref(false);
+const showUserSelector = ref(false);
+
+// 查看和删除的任务
+const viewingTask = ref<TaskVO | null>(null);
+const deletingTask = ref<LearningTask | null>(null);
+const deleting = ref(false);
+
+// 人员管理相关
+const managingTask = ref<LearningTask | null>(null);
+const selectorMode = ref<'add' | 'remove'>('add');
+const allUsers = ref<UserVO[]>([]);
+const currentUsers = ref<UserVO[]>([]);
+const availableUsers = ref<UserVO[]>([]);
+const saving = ref(false);
+
+// 计算显示的页码
+const displayPages = computed(() => {
+  const current = pagination.value.current;
+  const total = pagination.value.totalPages;
+  const pages: number[] = [];
+  
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i);
+    }
+  } else {
+    if (current <= 4) {
+      for (let i = 1; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push(-1);
+      pages.push(total);
+    } else if (current >= total - 3) {
+      pages.push(1);
+      pages.push(-1);
+      for (let i = total - 4; i <= total; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      pages.push(-1);
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i);
+      }
+      pages.push(-1);
+      pages.push(total);
+    }
+  }
+  
+  return pages;
+});
+
+onMounted(() => {
+  loadTaskList();
+});
+
+// 加载任务列表
+async function loadTaskList() {
+  loading.value = true;
+  
+  try {
+    const pageParam: PageParam = {
+      page: pagination.value.current,
+      size: pagination.value.pageSize
+    };
+    
+    const filter: any = {};
+    if (searchParams.value.name) {
+      filter.name = searchParams.value.name;
+    }
+    if (searchParams.value.status !== undefined) {
+      filter.status = searchParams.value.status;
+    }
+    
+    const res = await learningTaskApi.getTaskPage(pageParam, filter);
+    
+    if (res.success) {
+      taskList.value = res.dataList || [];
+      pagination.value.total = res.pageParam?.totalElements || 0;
+      pagination.value.totalPages = Math.ceil(pagination.value.total / pagination.value.pageSize);
+    } else {
+      ElMessage.error(res.message || '加载失败');
+    }
+  } catch (error) {
+    console.error('加载任务列表失败:', error);
+    ElMessage.error('加载任务列表失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 搜索
+function handleSearch() {
+  pagination.value.current = 1;
+  loadTaskList();
+}
+
+// 重置
+function handleReset() {
+  searchParams.value = {
+    name: '',
+    status: undefined
+  };
+  pagination.value.current = 1;
+  loadTaskList();
+}
+
+// 分页切换
+function handlePageChange(page: number) {
+  if (page < 1 || page > pagination.value.totalPages || page === -1) return;
+  pagination.value.current = page;
+  loadTaskList();
+}
+
+// 跳转页面
+function handleJumpPage() {
+  if (!jumpPage.value) return;
+  const page = Math.max(1, Math.min(jumpPage.value, pagination.value.totalPages));
+  handlePageChange(page);
+  jumpPage.value = undefined;
+}
+
+// 新增任务
+function handleAdd() {
+  emit('add');
+}
+
+// 查看任务
+async function handleView(task: LearningTask) {
+  try {
+    const res = await learningTaskApi.getTaskById(task.taskID!);
+    if (res.success && res.data) {
+      viewingTask.value = res.data;
+      showTaskDetail.value = true;
+    }
+  } catch (error) {
+    console.error('加载任务详情失败:', error);
+    ElMessage.error('加载任务详情失败');
+  }
+}
+
+// 编辑任务
+function handleEdit(task: LearningTask) {
+  emit('edit', task);
+}
+
+// 修改人员 - 显示当前人员列表
+async function handleUpdateUser(task: LearningTask) {
+  managingTask.value = task;
+  
+  try {
+    // 加载所有用户
+    const usersRes = await userApi.getUserList({});
+    if (usersRes.success && usersRes.dataList) {
+      allUsers.value = usersRes.dataList;
+    }
+    
+    // 加载任务详情（包含已分配的用户）
+    const taskRes = await learningTaskApi.getTaskById(task.taskID!);
+    if (taskRes.success && taskRes.data) {
+      const taskUsers = taskRes.data.taskUsers || [];
+      const assignedUserIds = taskUsers.map(tu => tu.userID!);
+      
+      // 当前已分配的用户
+      currentUsers.value = allUsers.value.filter(user => 
+        assignedUserIds.includes(user.id!)
+      );
+    }
+    
+    showUserList.value = true;
+  } catch (error) {
+    console.error('加载用户数据失败:', error);
+    ElMessage.error('加载用户数据失败');
+  }
+}
+
+// 关闭人员列表弹窗
+function closeUserList() {
+  showUserList.value = false;
+  managingTask.value = null;
+  currentUsers.value = [];
+}
+
+// 显示添加人员选择器
+function showAddUserSelector() {
+  selectorMode.value = 'add';
+  
+  // 左侧显示未分配的用户
+  const currentUserIds = currentUsers.value.map(u => u.id!);
+  availableUsers.value = allUsers.value.filter(user => 
+    !currentUserIds.includes(user.id!)
+  );
+  
+  showUserSelector.value = true;
+}
+
+// 显示删除人员选择器
+function showRemoveUserSelector() {
+  selectorMode.value = 'remove';
+  
+  // 左侧显示当前用户
+  availableUsers.value = [...currentUsers.value];
+  
+  showUserSelector.value = true;
+}
+
+// 关闭选择器弹窗
+function closeSelectorModal() {
+  showUserSelector.value = false;
+  availableUsers.value = [];
+}
+
+// 处理用户选择器确认事件
+async function handleUserSelectConfirm(selectedUsers: UserVO[]) {
+  if (!managingTask.value || selectedUsers.length === 0) {
+    ElMessage.warning('请选择要操作的人员');
+    return;
+  }
+  
+  saving.value = true;
+  
+  try {
+    const userIds = selectedUsers.map(u => u.id!);
+    
+    if (selectorMode.value === 'add') {
+      // 执行添加操作
+      for (const userID of userIds) {
+        await learningTaskApi.assignTaskToUser(managingTask.value.taskID!, userID);
+      }
+      ElMessage.success(`成功添加 ${userIds.length} 位人员`);
+      
+      // 更新当前用户列表
+      currentUsers.value.push(...selectedUsers);
+    } else {
+      // 执行删除操作
+      for (const userID of userIds) {
+        await learningTaskApi.removeTaskFromUser(managingTask.value.taskID!, userID);
+      }
+      ElMessage.success(`成功删除 ${userIds.length} 位人员`);
+      
+      // 更新当前用户列表
+      currentUsers.value = currentUsers.value.filter(user => 
+        !userIds.includes(user.id!)
+      );
+    }
+    
+    closeSelectorModal();
+    loadTaskList();
+  } catch (error) {
+    console.error('人员操作失败:', error);
+    ElMessage.error('人员操作失败');
+  } finally {
+    saving.value = false;
+  }
+}
+
+// 发布任务
+async function handlePublish(task: LearningTask) {
+  try {
+    const res = await learningTaskApi.publishTask({
+        taskID: task.taskID!,
+        status: 1
+    });
+    if (res.success) {
+      ElMessage.success('任务发布成功');
+      loadTaskList();
+    } else {
+      ElMessage.error(res.message || '发布失败');
+    }
+  } catch (error) {
+    console.error('发布任务失败:', error);
+    ElMessage.error('发布任务失败');
+  }
+}
+
+// 删除任务
+function handleDelete(task: LearningTask) {
+  deletingTask.value = task;
+  showDeleteConfirm.value = true;
+}
+
+// 确认删除
+async function confirmDelete() {
+  if (!deletingTask.value) return;
+  
+  deleting.value = true;
+  
+  try {
+    const res = await learningTaskApi.deleteTask(deletingTask.value.taskID!);
+    if (res.success) {
+      ElMessage.success('删除成功');
+      showDeleteConfirm.value = false;
+      deletingTask.value = null;
+      loadTaskList();
+    } else {
+      ElMessage.error(res.message || '删除失败');
+    }
+  } catch (error) {
+    console.error('删除任务失败:', error);
+    ElMessage.error('删除任务失败');
+  } finally {
+    deleting.value = false;
+  }
+}
+
+// 获取状态样式类
+function getStatusClass(status?: number) {
+  switch (status) {
+    case 0:
+      return 'status-draft';
+    case 1:
+      return 'status-ongoing';
+    case 2:
+      return 'status-ended';
+    default:
+      return '';
+  }
+}
+
+// 获取状态文本
+function getStatusText(status?: number) {
+  switch (status) {
+    case 0:
+      return '草稿';
+    case 1:
+      return '进行中';
+    case 2:
+      return '已结束';
+    default:
+      return '未知';
+  }
+}
+
+// 格式化日期
+function formatDate(dateStr?: string) {
+  if (!dateStr) return '-';
+  const date = new Date(dateStr);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+defineExpose({
+  loadTaskList
+});
+</script>
+
+<style lang="scss" scoped>
+.learning-task-list {
+  padding: 20px;
+}
+
+.search-bar {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.search-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 200px;
+}
+
+.search-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+}
+
+.search-input,
+.search-select {
+  padding: 8px 12px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  transition: border-color 0.3s;
+
+  &:focus {
+    outline: none;
+    border-color: #409eff;
+  }
+}
+
+.search-select {
+  cursor: pointer;
+}
+
+.search-actions {
+  display: flex;
+  gap: 12px;
+  margin-left: auto;
+}
+
+.btn-search,
+.btn-reset {
+  padding: 8px 20px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
+}
+
+.btn-search {
+  background: #409eff;
+  color: #fff;
+
+  &:hover {
+    background: #66b1ff;
+  }
+}
+
+.btn-reset {
+  background: #fff;
+  color: #606266;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    border-color: #409eff;
+  }
+}
+
+.toolbar {
+  margin-bottom: 20px;
+}
+
+.btn-primary {
+  padding: 10px 20px;
+  background: #409eff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    background: #66b1ff;
+  }
+
+  .icon {
+    font-size: 18px;
+  }
+}
+
+.task-table-wrapper {
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.task-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th {
+    background: #f5f7fa;
+    color: #606266;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 12px 16px;
+    text-align: left;
+    border-bottom: 2px solid #e0e0e0;
+  }
+
+  td {
+    padding: 12px 16px;
+    border-bottom: 1px solid #f0f0f0;
+    font-size: 14px;
+    color: #606266;
+  }
+
+  .table-row {
+    transition: background-color 0.3s;
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    &:last-child td {
+      border-bottom: none;
+    }
+  }
+}
+
+.task-name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.task-desc {
+  max-width: 300px;
+}
+
+.desc-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+
+  &.status-draft {
+    background: #f4f4f5;
+    color: #909399;
+  }
+
+  &.status-ongoing {
+    background: #e1f3d8;
+    color: #67c23a;
+  }
+
+  &.status-ended {
+    background: #f0f9ff;
+    color: #409eff;
+  }
+}
+
+.action-cell {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border-radius: 4px;
+
+  &.btn-primary {
+    &:hover {
+      background: #ecf5ff;
+    }
+  }
+
+  &.btn-warning {
+    color: #e6a23c;
+
+    &:hover {
+      background: #fdf6ec;
+    }
+  }
+
+  &.btn-success {
+    color: #67c23a;
+
+    &:hover {
+      background: #f0f9ff;
+    }
+  }
+
+  &.btn-danger {
+    color: #ffffff;
+
+    &:hover {
+      background: #fef0f0;
+    }
+  }
+}
+
+.loading-cell,
+.empty-cell {
+  text-align: center;
+  padding: 60px 20px !important;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f0f0f0;
+  border-top-color: #409eff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 16px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.pagination {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.pagination-info {
+  font-size: 14px;
+  color: #606266;
+}
+
+.pagination-controls {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.page-btn,
+.page-number {
+  padding: 6px 12px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s;
+
+  &:hover:not(:disabled) {
+    color: #409eff;
+    border-color: #409eff;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.active {
+    background: #409eff;
+    color: #fff;
+    border-color: #409eff;
+  }
+}
+
+.page-numbers {
+  display: flex;
+  gap: 4px;
+}
+
+.pagination-jump {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.jump-input {
+  width: 60px;
+  padding: 6px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  text-align: center;
+
+  &:focus {
+    outline: none;
+    border-color: #409eff;
+  }
+}
+
+.jump-btn {
+  padding: 6px 12px;
+  background: #409eff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+
+  &:hover {
+    background: #66b1ff;
+  }
+}
+
+// 通用按钮样式
+.btn-default,
+.btn-danger {
+  padding: 10px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: none;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.btn-default {
+  background: #fff;
+  color: #606266;
+  border: 1px solid #dcdfe6;
+
+  &:hover {
+    color: #409eff;
+    border-color: #409eff;
+  }
+}
+
+.btn-danger {
+  background: #f56c6c;
+  color: #fff;
+
+  &:hover:not(:disabled) {
+    background: #f78989;
+  }
+}
+
+// 弹窗样式
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.modal-content {
+  background: #fff;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 700px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  &.small {
+    max-width: 500px;
+  }
+
+  &.large {
+    max-width: 900px;
+  }
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0;
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: #f5f7fa;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  color: #909399;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #ecf5ff;
+    color: #409eff;
+  }
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.confirm-text {
+  font-size: 15px;
+  color: #606266;
+  line-height: 1.6;
+  margin: 0;
+}
+
+// 任务详情样式
+.task-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.detail-section {
+  background: #f5f7fa;
+  padding: 16px;
+  border-radius: 6px;
+}
+
+.detail-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 16px 0;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.detail-row {
+  display: flex;
+  font-size: 14px;
+}
+
+.detail-label {
+  color: #909399;
+  min-width: 100px;
+  font-weight: 500;
+}
+
+.detail-value {
+  color: #606266;
+  flex: 1;
+}
+
+.detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: #fff;
+  border-radius: 4px;
+  transition: all 0.3s;
+
+  &:hover {
+    background: #ecf5ff;
+  }
+}
+
+.item-index {
+  color: #909399;
+  font-weight: 600;
+  min-width: 24px;
+}
+
+.item-name {
+  color: #606266;
+  flex: 1;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+
+  &.status-draft {
+    background: #f4f4f5;
+    color: #909399;
+  }
+
+  &.status-ongoing {
+    background: #e1f3d8;
+    color: #67c23a;
+  }
+
+  &.status-ended {
+    background: #f0f9ff;
+    color: #409eff;
+  }
+}
+
+// 人员列表样式
+.user-list-actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.btn-success,
+.btn-danger {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  .icon {
+    font-size: 18px;
+    font-weight: bold;
+  }
+}
+
+.btn-success {
+  background: #67c23a;
+  color: #fff;
+
+  &:hover {
+    background: #85ce61;
+  }
+}
+
+.btn-danger {
+  background: #f56c6c;
+  color: #fff;
+
+  &:hover:not(:disabled) {
+    background: #f78989;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.current-user-list {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 20px;
+  background: #fafafa;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e0e0e0;
+
+  h4 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0;
+  }
+}
+
+.count-badge {
+  background: #409eff;
+  color: #fff;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.empty-list {
+  text-align: center;
+  padding: 60px 20px;
+  color: #909399;
+
+  .empty-icon {
+    font-size: 64px;
+    margin-bottom: 16px;
+  }
+
+  p {
+    margin: 0;
+    font-size: 15px;
+  }
+}
+
+.user-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.user-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border-color: #409eff;
+  }
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.user-info {
+  flex: 1;
+  min-width: 0;
+
+  .user-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+    margin-bottom: 4px;
+  }
+
+  .user-dept {
+    font-size: 12px;
+    color: #909399;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+</style>
diff --git a/schoolNewsWeb/src/views/task/index.ts b/schoolNewsWeb/src/views/task/index.ts
new file mode 100644
index 0000000..e5f3855
--- /dev/null
+++ b/schoolNewsWeb/src/views/task/index.ts
@@ -0,0 +1,2 @@
+export { default as LearningTaskAdd } from './LearningTaskAdd.vue';
+export { default as LearningTaskList } from './LearningTaskList.vue';
\ No newline at end of file