web-学习

2025-10-24 18:28:35 +08:00
parent 8968409b2d
commit bc84bd82cc
16 changed files with 1090 additions and 239 deletions
--- a/schoolNewsWeb/src/apis/study/learning-record.ts
+++ b/schoolNewsWeb/src/apis/study/learning-record.ts
@@ -17,7 +17,7 @@ export const learningRecordApi = {
   * @returns Promise<ResultDomain<LearningRecord>>
   */
  async getRecordList(filter?: Partial<LearningRecord>): Promise<ResultDomain<LearningRecord>> {
-    const response = await api.get<LearningRecord>('/study/learning-record/list', filter);
+    const response = await api.post<LearningRecord>('/study/records/list', filter);
    return response.data;
  },

@@ -27,45 +27,51 @@ export const learningRecordApi = {
   * @returns Promise<ResultDomain<LearningRecord>>
   */
  async createRecord(record: LearningRecord): Promise<ResultDomain<LearningRecord>> {
-    const response = await api.post<LearningRecord>('/study/learning-record/create', record);
+    const response = await api.post<LearningRecord>('/study/records/record', record);
    return response.data;
  },

  /**
-   * 更新学习记录
+   * 更新学习记录（禁用 loading 动画，避免影响视频播放）
   * @param record 记录数据
   * @returns Promise<ResultDomain<LearningRecord>>
   */
-  async updateRecord(record: LearningRecord): Promise<ResultDomain<LearningRecord>> {
-    const response = await api.put<LearningRecord>('/study/learning-record/update', record);
+  async updateRecord(record: Partial<LearningRecord>): Promise<ResultDomain<LearningRecord>> {
+    const response = await api.put<LearningRecord>('/study/records/record', record, {
+      showLoading: false // 禁用 loading 动画
+    } as any);
    return response.data;
  },

  /**
-   * 获取用户学习统计
-   * @param userID 用户ID
-   * @param timeRange 时间范围
-   * @returns Promise<ResultDomain<LearningRecordStatistics>>
+   * 删除学习记录
+   * @param recordId 记录ID
+   * @returns Promise<ResultDomain<boolean>>
   */
-  async getUserLearningStatistics(userID: string, timeRange?: string): Promise<ResultDomain<LearningRecordStatistics>> {
-    const response = await api.get<LearningRecordStatistics>('/study/learning-record/statistics', {
-      userID,
-      timeRange
-    });
+  async deleteRecord(recordId: string): Promise<ResultDomain<boolean>> {
+    const response = await api.delete<boolean>('/study/records/record', { ID: recordId });
    return response.data;
  },

  /**
-   * 获取学习时长图表数据
-   * @param userID 用户ID
-   * @param timeRange 时间范围
-   * @returns Promise<ResultDomain<LearningRecordStatistics>>
+   * 标记学习完成（禁用 loading 动画，避免影响视频播放）
+   * @param record 记录数据
+   * @returns Promise<ResultDomain<LearningRecord>>
   */
-  async getLearningDurationChart(userID: string, timeRange?: string): Promise<ResultDomain<LearningRecordStatistics>> {
-    const response = await api.get<LearningRecordStatistics>('/study/learning-record/duration-chart', {
-      userID,
-      timeRange
-    });
+  async markComplete(record: Partial<LearningRecord>): Promise<ResultDomain<LearningRecord>> {
+    const response = await api.put<LearningRecord>('/study/records/complete', record, {
+      showLoading: false // 禁用 loading 动画
+    } as any);
    return response.data;
-  }
+  },
+
+  /**
+   * 查询用户课程的学习记录
+   * @param filter 过滤条件（包含 userID 和 resourceID）
+   * @returns Promise<ResultDomain<LearningRecord>>
+   */
+  async getCourseLearningRecord(filter: Partial<LearningRecord>): Promise<ResultDomain<LearningRecord>> {
+    const response = await api.post<LearningRecord>('/study/records/course/records', filter);
+    return response.data;
+  },
 };
--- a/schoolNewsWeb/src/apis/study/learning-task.ts
+++ b/schoolNewsWeb/src/apis/study/learning-task.ts
@@ -32,6 +32,16 @@ export const learningTaskApi = {
    return response.data;
  },

+    /**
+   * 根据ID获取用户任务详情
+   * @param taskID 任务ID
+   * @returns Promise<ResultDomain<TaskVO>>
+   */
+    async getUserTask(taskID: string): Promise<ResultDomain<TaskVO>> {
+      const response = await api.get<TaskVO>(`${this.learningTaskPrefix}/${taskID}/user`);
+      return response.data;
+    },
+
  /**
   * 获取任务分页列表
   * @param pageParam 分页参数
--- a/schoolNewsWeb/src/apis/usercenter/collection.ts
+++ b/schoolNewsWeb/src/apis/usercenter/collection.ts
@@ -11,6 +11,7 @@ import type { UserCollection, ResultDomain } from '@/types';
 * 用户收藏API服务
 */
 export const userCollectionApi = {
+  baseUrl: '/usercenter/collections',
  /**
   * 获取用户收藏列表
   * @param userID 用户ID
@@ -18,7 +19,7 @@ export const userCollectionApi = {
   * @returns Promise<ResultDomain<UserCollection>>
   */
  async getUserCollections(userID: string, collectionType?: number): Promise<ResultDomain<UserCollection>> {
-    const response = await api.get<UserCollection>('/usercenter/collection/list', {
+    const response = await api.get<UserCollection>(`${this.baseUrl}/list`, {
      userID,
      collectionType
    });
@@ -31,7 +32,7 @@ export const userCollectionApi = {
   * @returns Promise<ResultDomain<UserCollection>>
   */
  async addCollection(collection: UserCollection): Promise<ResultDomain<UserCollection>> {
-    const response = await api.post<UserCollection>('/usercenter/collection/add', collection);
+    const response = await api.post<UserCollection>(`${this.baseUrl}/collect`, collection);
    return response.data;
  },

@@ -43,7 +44,7 @@ export const userCollectionApi = {
   * @returns Promise<ResultDomain<boolean>>
   */
  async removeCollection(userID: string, collectionType: number, collectionID: string): Promise<ResultDomain<boolean>> {
-    const response = await api.delete<boolean>('/usercenter/collection/remove', {
+    const response = await api.delete<boolean>(`${this.baseUrl}/collect`, {
      userID,
      collectionType,
      collectionID
@@ -58,9 +59,8 @@ export const userCollectionApi = {
   * @param collectionID 收藏对象ID
   * @returns Promise<ResultDomain<boolean>>
   */
-  async isCollected(userID: string, collectionType: number, collectionID: string): Promise<ResultDomain<boolean>> {
-    const response = await api.get<boolean>('/usercenter/collection/check', {
-      userID,
+  async isCollected(collectionType: number, collectionID: string): Promise<ResultDomain<boolean>> {
+    const response = await api.get<boolean>(`${this.baseUrl}/check`, {
      collectionType,
      collectionID
    });
--- a/schoolNewsWeb/src/layouts/NavigationLayout.vue
+++ b/schoolNewsWeb/src/layouts/NavigationLayout.vue
@@ -146,7 +146,6 @@ watch(

 <style lang="scss" scoped>
 .navigation-layout {
-  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
@@ -156,6 +155,8 @@ watch(
  flex: 1;
  display: flex;
  flex-direction: column;
+  max-height: calc(100vh - 76px);
+  overflow-y: auto;
 }

 .breadcrumb-wrapper {
--- a/schoolNewsWeb/src/types/enums/index.ts
+++ b/schoolNewsWeb/src/types/enums/index.ts
@@ -122,6 +122,18 @@ export enum CollectionType {
  COURSE = 2
 }

+/**
+ * 文章状态枚举
+ */
+export enum ArticleStatus {
+  /** 草稿 */
+  DRAFT = 0,
+  /** 已发布 */
+  PUBLISHED = 1,
+  /** 下架 */
+  OFFLINE = 2
+}
+
 /**
 * 资源类型枚举
 */
@@ -189,4 +201,12 @@ export enum CollectionStatus {
  /** 成功 */
  SUCCESS = 1
 }
-
+/**
+ * 任务项类型枚举
+ */
+export enum TaskItemType {
+  /** 资源类型 */
+  RESOURCE = 1,
+  /** 课程类型 */
+  COURSE = 2
+}
--- a/schoolNewsWeb/src/types/study/index.ts
+++ b/schoolNewsWeb/src/types/study/index.ts
@@ -4,7 +4,8 @@
 * @since 2025-10-15
 */

-import { BaseDTO, SysUser, Resource } from '@/types';
+import type { BaseDTO } from '@/types';
+

 /**
 * 课程实体
@@ -149,12 +150,18 @@ export interface LearningTask extends BaseDTO {
 export interface LearningRecord extends BaseDTO {
  /** 用户ID */
  userID?: string;
+  /** 任务ID */
+  taskID?: string;
  /** 资源类型（1资源 2课程 3章节） */
  resourceType?: number;
  /** 资源ID */
  resourceID?: string;
-  /** 任务ID */
-  taskID?: string;
+  /** 课程ID */
+  courseID?: string;
+  /** 章节ID */
+  chapterID?: string;
+  /** 节点ID */
+  nodeID?: string;
  /** 学习时长（秒） */
  duration?: number;
  /** 学习进度（0-100） */
@@ -195,58 +202,84 @@ export interface TaskUser extends BaseDTO {
  userID?: string;
  /** 完成状态（0未完成 1已完成） */
  status?: number;
+  /** 学习进度 */
+  progress?: number;
  /** 完成时间 */
  completeTime?: string;
 }

 /**
- * 任务资源关联实体
+ * 任务项实体（统一管理资源和课程）
 */
-export interface TaskResource extends BaseDTO {
+export interface TaskItem extends BaseDTO {
  /** 任务ID */
  taskID?: string;
-  /** 资源ID */
-  resourceID?: string;
-  /** 资源类型（1资源 2课程） */
-  resourceType?: number;
+  /** 项类型（1资源 2课程） */
+  itemType?: number;
+  /** 项ID（资源ID或课程ID） */
+  itemID?: string;
+  /** 是否必须完成 */
+  required?: boolean;
  /** 排序号 */
  orderNum?: number;
+  /** 创建者 */
+  creator?: string;
+  /** 更新者 */
+  updater?: string;
 }

-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[];
-  totalTaskNum?: number;
-  completedTaskNum?: number;
-  learningTaskNum?: number;
-  notStartTaskNum?: number;
-  taskStatus?: number;
-}
 /**
- * 任务课程关联实体
+ * 任务项视图对象（扩展了任务基本信息）
 */
-export interface TaskCourse extends BaseDTO {
-  /** 任务ID */
-  taskID?: string;
+export interface TaskItemVO extends LearningTask {
+  /** 项类型（1资源 2课程） */
+  itemType?: number;
  /** 课程ID */
  courseID?: string;
+  /** 课程名称 */
+  courseName?: string;
+  /** 资源ID */
+  resourceID?: string;
+  /** 资源名称 */
+  resourceName?: string;
+  /** 用户ID */
+  userID?: string;
+  /** 用户名 */
+  username?: string;
+  /** 是否必修 */
+  required?: boolean;
  /** 排序号 */
  orderNum?: number;
+  /** 任务状态 */
+  status?: number;
+  /** 学习进度（0-100） */
+  progress?: number;
+  /** 完成时间 */
+  completeTime?: string;
+}
+
+/**
+ * 任务视图对象（包含任务及关联的课程、资源、用户）
+ */
+export interface TaskVO extends BaseDTO {
+  /** 学习任务基本信息 */
+  learningTask: LearningTask;
+  /** 任务关联的课程列表 */
+  taskCourses: TaskItemVO[];
+  /** 任务关联的资源列表 */
+  taskResources: TaskItemVO[];
+  /** 任务关联的用户列表 */
+  taskUsers: TaskItemVO[];
+  /** 总任务数 */
+  totalTaskNum?: number;
+  /** 已完成任务数 */
+  completedTaskNum?: number;
+  /** 学习中任务数 */
+  learningTaskNum?: number;
+  /** 未开始任务数 */
+  notStartTaskNum?: number;
+  /** 任务状态 */
+  taskStatus?: number;
 }

 /**
--- a/schoolNewsWeb/src/views/admin/manage/resource/ArticleManagementView.vue
+++ b/schoolNewsWeb/src/views/admin/manage/resource/ArticleManagementView.vue
@@ -24,9 +24,16 @@
          </el-tag>
        </template>
      </el-table-column>
-      <el-table-column label="操作" width="200" fixed="right">
+      <el-table-column label="操作" width="250" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="viewArticle(row)">查看</el-button>
+          <el-button 
+            size="small" 
+            :type="getActionButtonType(row.status)"
+            @click="changeArticleStatus(row)"
+          >
+            {{ getActionButtonText(row.status) }}
+          </el-button>
          <el-button size="small" @click="editArticle(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteArticle()">删除</el-button>
        </template>
@@ -64,6 +71,7 @@ import { useRouter } from 'vue-router';
 import { resourceApi, resourceCategoryApi } from '@/apis/resource'
 import type { PageParam, ResourceSearchParams, Resource, ResourceCategory } from '@/types';
 import { ArticleShowView } from '@/views/article';
+import { ArticleStatus } from '@/types/enums';

 const router = useRouter();
 const searchKeyword = ref('');
@@ -100,7 +108,7 @@ async function loadArticles() {
  const res = await resourceApi.getResourcePage(pageParam.value, filter.value);
  if (res.success) {
    articles.value = res.pageDomain?.dataList || [];
-    total.value = res.pageDomain?.total || 0;
+    total.value = res.pageDomain?.pageParam.totalElements || 0;
  }
 }

@@ -145,6 +153,34 @@ function editArticle(row: any) {
  router.push('/article/add?id=' + row.resourceID);
 }

+async function changeArticleStatus(row: Resource) {
+  try {
+    // status: 0-草稿, 1-已发布, 2-已下架
+    if (row.status === ArticleStatus.DRAFT || row.status === ArticleStatus.OFFLINE) {
+      // 草稿或下架状态 -> 发布
+      const res = await resourceApi.publishResource(row.resourceID!);
+      if (res.success) {
+        ElMessage.success('发布成功');
+        loadArticles();
+      } else {
+        ElMessage.error('发布失败');
+      }
+    } else if (row.status === ArticleStatus.PUBLISHED) {
+      // 已发布状态 -> 下架
+      const res = await resourceApi.unpublishResource(row.resourceID!);
+      if (res.success) {
+        ElMessage.success('下架成功');
+        loadArticles();
+      } else {
+        ElMessage.error('下架失败');
+      }
+    }
+  } catch (error) {
+    console.error('操作失败:', error);
+    ElMessage.error('操作失败');
+  }
+}
+
 function handleEditFromView() {
  if (currentArticle.value?.resourceID) {
    showViewDialog.value = false;
@@ -157,22 +193,42 @@ function deleteArticle() {
  ElMessage.info('删除功能开发中');
 }

-function getStatusType(status: string) {
-  const typeMap: Record<string, any> = {
-    'published': 'success',
-    'draft': 'info',
-    'pending': 'warning'
+function getStatusType(status: number) {
+  const typeMap: Record<number, any> = {
+    [ArticleStatus.DRAFT]: 'info',
+    [ArticleStatus.PUBLISHED]: 'success',
+    [ArticleStatus.OFFLINE]: 'warning'
  };
  return typeMap[status] || 'info';
 }

-function getStatusText(status: string) {
-  const textMap: Record<string, string> = {
-    'published': '已发布',
-    'draft': '草稿',
-    'pending': '待审核'
+function getStatusText(status: number) {
+  const textMap: Record<number, string> = {
+    [ArticleStatus.DRAFT]: '草稿',
+    [ArticleStatus.PUBLISHED]: '已发布',
+    [ArticleStatus.OFFLINE]: '已下架'
  };
-  return textMap[status] || status;
+  return textMap[status] || '未知';
+}
+
+function getActionButtonType(status: number) {
+  // 草稿或下架状态显示主要按钮(发布), 已发布状态显示警告按钮(下架)
+  if (status === ArticleStatus.DRAFT || status === ArticleStatus.OFFLINE) {
+    return 'primary';
+  } else if (status === ArticleStatus.PUBLISHED) {
+    return 'warning';
+  }
+  return '';
+}
+
+function getActionButtonText(status: number) {
+  // 草稿或下架状态显示"发布", 已发布状态显示"下架"
+  if (status === ArticleStatus.DRAFT || status === ArticleStatus.OFFLINE) {
+    return '发布';
+  } else if (status === ArticleStatus.PUBLISHED) {
+    return '下架';
+  }
+  return '操作';
 }

 function handleSizeChange(val: number) {
--- a/schoolNewsWeb/src/views/article/ArticleShowView.vue
+++ b/schoolNewsWeb/src/views/article/ArticleShowView.vue
@@ -9,27 +9,35 @@
    @close="handleClose"
  >
    <div class="article-show-container">
-      <!-- 文章头部信息 -->
-      <div class="article-header">
-        <h1 class="article-title">{{ articleData.title }}</h1>
-        <div class="article-meta-info">
-          <div class="meta-item" v-if="articleData.publishTime || articleData.createTime">
-            发布时间：{{ formatDateSimple(articleData.publishTime || articleData.createTime || '') }}
-          </div>
-          <div class="meta-item" v-if="articleData.viewCount !== undefined">
-            浏览次数：{{ articleData.viewCount }}
-          </div>
-          <div class="meta-item" v-if="articleData.source">
-            来源：{{ articleData.source }}
+      <div v-if="loading" class="loading-state">
+        <el-skeleton :rows="8" animated />
+      </div>
+      
+      <div v-else-if="currentArticleData">
+        <!-- 文章头部信息 -->
+        <div class="article-header">
+          <h1 class="article-title">{{ currentArticleData.title }}</h1>
+          <div class="article-meta-info">
+            <div class="meta-item" v-if="currentArticleData.publishTime || currentArticleData.createTime">
+              发布时间：{{ formatDateSimple(currentArticleData.publishTime || currentArticleData.createTime || '') }}
+            </div>
+            <div class="meta-item" v-if="currentArticleData.viewCount !== undefined">
+              浏览次数：{{ currentArticleData.viewCount }}
+            </div>
+            <div class="meta-item" v-if="currentArticleData.source">
+              来源：{{ currentArticleData.source }}
+            </div>
          </div>
        </div>
+
+        <!-- 分隔线 -->
+        <div class="separator"></div>
+
+        <!-- 文章内容 -->
+        <div class="article-content ql-editor" v-html="currentArticleData.content"></div>
      </div>
-
-      <!-- 分隔线 -->
-      <div class="separator"></div>
-
-      <!-- 文章内容 -->
-      <div class="article-content ql-editor" v-html="articleData.content"></div>
+      
+      <el-empty v-else description="加载文章失败" />
    </div>

    <template #footer>
@@ -38,70 +46,431 @@
    </template>
  </el-dialog>

-  <!-- 非 Dialog 模式 -->
-  <div v-else class="article-show-container">
-    <!-- 文章头部信息 -->
-    <div class="article-header">
-      <h1 class="article-title">{{ articleData.title }}</h1>
-      <div class="article-meta-info">
-        <div class="meta-item" v-if="articleData.publishTime || articleData.createTime">
-          发布时间：{{ formatDateSimple(articleData.publishTime || articleData.createTime || '') }}
-        </div>
-        <div class="meta-item" v-if="articleData.viewCount !== undefined">
-          浏览次数：{{ articleData.viewCount }}
-        </div>
-        <div class="meta-item" v-if="articleData.source">
-          来源：{{ articleData.source }}
+  <!-- 路由页面模式 -->
+  <div v-else class="article-page-view">
+    <!-- 返回按钮 -->
+    <div v-if="showBackButton" class="back-header">
+      <el-button @click="handleBack" :icon="ArrowLeft">{{ backButtonText }}</el-button>
+    </div>
+
+    <!-- 加载中 -->
+    <div v-if="loading" class="loading-container">
+      <el-skeleton :rows="10" animated />
+    </div>
+
+    <!-- 文章内容 -->
+    <div v-else-if="currentArticleData" class="article-wrapper">
+      <div class="article-show-container">
+        <!-- 文章头部信息 -->
+        <div class="article-header">
+          <h1 class="article-title">{{ currentArticleData.title }}</h1>
+          <div class="article-meta-info">
+            <div class="meta-item" v-if="currentArticleData.publishTime || currentArticleData.createTime">
+              发布时间：{{ formatDateSimple(currentArticleData.publishTime || currentArticleData.createTime || '') }}
+            </div>
+            <div class="meta-item" v-if="currentArticleData.viewCount !== undefined">
+              浏览次数：{{ currentArticleData.viewCount }}
+            </div>
+            <div class="meta-item" v-if="currentArticleData.source">
+              来源：{{ currentArticleData.source }}
+            </div>
+          </div>
        </div>
+
+        <!-- 分隔线 -->
+        <div class="separator"></div>
+
+        <!-- 文章内容 -->
+        <div class="article-content ql-editor" v-html="currentArticleData.content"></div>
      </div>
    </div>

-    <!-- 分隔线 -->
-    <div class="separator"></div>
-
-    <!-- 文章内容 -->
-    <div class="article-content ql-editor" v-html="articleData.content"></div>
+    <!-- 加载失败 -->
+    <div v-else class="error-container">
+      <el-empty description="加载文章失败" />
+    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue';
-import { ElDialog, ElButton } from 'element-plus';
-import { ResourceCategory, Resource, Tag } from '@/types';
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { ArrowLeft } from '@element-plus/icons-vue';
+import { resourceApi } from '@/apis/resource';
+import { learningRecordApi } from '@/apis/study';
+import { useStore } from 'vuex';
+import type { ResourceCategory, Resource, ResourceVO, LearningRecord } from '@/types';

+defineOptions({
+  name: 'ArticleShowView'
+});

 interface Props {
  modelValue?: boolean; // Dialog 模式下的显示状态
  asDialog?: boolean; // 是否作为 Dialog 使用
  title?: string; // Dialog 标题
  width?: string; // Dialog 宽度
-  articleData?: Resource; // 文章数据
+  articleData?: Resource; // 文章数据（Dialog 模式使用）
+  resourceID?: string; // 资源ID（路由模式使用）
  categoryList?: Array<ResourceCategory>; // 分类列表
  showEditButton?: boolean; // 是否显示编辑按钮
+  showBackButton?: boolean; // 是否显示返回按钮（路由模式）
+  backButtonText?: string; // 返回按钮文本
 }

 const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
-  asDialog: true,
+  asDialog: false, // 默认作为路由页面使用
  title: '文章预览',
  width: '900px',
  articleData: () => ({}),
  categoryList: () => [],
-  showEditButton: false
+  showEditButton: false,
+  showBackButton: true,
+  backButtonText: '返回'
 });

 const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  'close': [];
  'edit': [];
+  'back': [];
 }>();

+const router = useRouter();
+const route = useRoute();
+const store = useStore();
+
+const loading = ref(false);
+const loadedArticleData = ref<Resource | null>(null);
+
+// 学习记录相关
+const learningRecord = ref<LearningRecord | null>(null);
+const learningStartTime = ref(0);
+const learningTimer = ref<number | null>(null);
+const hasVideoCompleted = ref(false);
+const totalVideos = ref(0); // 视频总数
+const completedVideos = ref<Set<number>>(new Set()); // 已完成的视频索引
+const userInfo = computed(() => store.getters['auth/user']);
+
+// 当前显示的文章数据
+const currentArticleData = computed(() => {
+  // Dialog 模式使用传入的 articleData
+  if (props.asDialog) {
+    return props.articleData;
+  }
+  // 路由模式：优先使用传入的 articleData，否则使用加载的数据
+  if (props.articleData && Object.keys(props.articleData).length > 0) {
+    return props.articleData;
+  }
+  return loadedArticleData.value;
+});
+
 // Dialog 显示状态
 const visible = computed({
  get: () => props.asDialog ? props.modelValue : false,
  set: (val) => props.asDialog ? emit('update:modelValue', val) : undefined
 });

+onMounted(() => {
+  // 路由模式下，从路由参数加载文章
+  if (!props.asDialog) {
+    const articleId = route.query.articleId as string;
+    const taskId = route.query.taskId as string;
+    
+    // 如果传入了 articleData，则不需要从路由加载
+    if (props.articleData && Object.keys(props.articleData).length > 0) {
+      loadedArticleData.value = props.articleData;
+      // 即使传入了数据，也要监听视频（如果有taskId）
+      if (taskId || route.query.taskId) {
+        const resourceID = props.articleData.resourceID;
+        if (resourceID) {
+          loadLearningRecord(resourceID);
+        }
+      }
+      // 初始化视频监听
+      nextTick().then(() => {
+        setTimeout(() => {
+          initVideoListeners();
+        }, 300);
+      });
+    } else if (articleId) {
+      // 从路由参数加载
+      loadArticle(articleId);
+      // 如果有 taskId，表示是任务学习，需要创建/加载学习记录
+      if (taskId) {
+        loadLearningRecord(articleId);
+      }
+    } else {
+      // 既没有传入数据，也没有路由参数，显示错误
+      ElMessage.error('文章ID不存在');
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  // 组件销毁前保存学习进度
+  if (learningRecord.value && !learningRecord.value.isComplete) {
+    saveLearningProgress();
+  }
+  stopLearningTimer();
+});
+
+// 监听 articleData 变化（用于 ResourceArticle 切换文章）
+watch(() => props.articleData, (newData) => {
+  if (!props.asDialog && newData && Object.keys(newData).length > 0) {
+    loadedArticleData.value = newData;
+    // 重新初始化视频监听
+    nextTick().then(() => {
+      setTimeout(() => {
+        initVideoListeners();
+      }, 300);
+    });
+  }
+}, { deep: true });
+
+// 加载文章数据
+async function loadArticle(resourceID: string) {
+  loading.value = true;
+  try {
+    const res = await resourceApi.getResourceById(resourceID);
+    if (res.success && res.data) {
+      // ResourceVO 包含 resource 对象
+      const resourceVO = res.data as ResourceVO;
+      loadedArticleData.value = resourceVO.resource || res.data as Resource;
+      
+      // 增加浏览次数
+      await resourceApi.incrementViewCount(resourceID);
+      
+      // 等待 DOM 更新后监听视频（增加延迟确保 DOM 完全渲染）
+      await nextTick();
+      setTimeout(() => {
+        initVideoListeners();
+      }, 300); // 延迟 300ms 确保 DOM 完全渲染
+    } else {
+      ElMessage.error(res.message || '加载文章失败');
+      loadedArticleData.value = null;
+    }
+  } catch (error) {
+    console.error('加载文章失败:', error);
+    ElMessage.error('加载文章失败');
+    loadedArticleData.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 加载学习记录
+async function loadLearningRecord(resourceID: string) {
+  if (!userInfo.value?.id) return;
+  
+  try {
+    const res = await learningRecordApi.getRecordList({
+      userID: userInfo.value.id,
+      resourceType: 1, // 资源类型：文章
+      resourceID: resourceID
+    });
+    
+    if (res.success && res.dataList && res.dataList.length > 0) {
+      learningRecord.value = res.dataList[0];
+      
+      // 如果已完成，不需要启动计时器
+      if (learningRecord.value.isComplete) {
+        return;
+      }
+    } else {
+      // 没有记录，创建新的
+      await createLearningRecord(resourceID);
+    }
+    
+    // 开始学习计时
+    startLearningTimer();
+  } catch (error) {
+    console.error('加载学习记录失败:', error);
+  }
+}
+
+// 创建学习记录
+async function createLearningRecord(resourceID: string) {
+  if (!userInfo.value?.id) return;
+  
+  try {
+    const taskId = route.query.taskId as string;
+    const res = await learningRecordApi.createRecord({
+      userID: userInfo.value.id,
+      resourceType: 1, // 资源类型：文章
+      resourceID: resourceID,
+      taskID: taskId || undefined,
+      duration: 0,
+      progress: 0,
+      isComplete: false
+    });
+    
+    if (res.success && res.data) {
+      learningRecord.value = res.data;
+      ElMessage.success('开始学习');
+    }
+  } catch (error) {
+    console.error('创建学习记录失败:', error);
+  }
+}
+
+// 开始学习计时
+function startLearningTimer() {
+  learningStartTime.value = Date.now();
+  
+  // 每10秒保存一次学习进度
+  learningTimer.value = window.setInterval(() => {
+    // 如果文章已完成，停止定时器
+    if (learningRecord.value?.isComplete) {
+      stopLearningTimer();
+      return;
+    }
+    saveLearningProgress();
+  }, 10000);
+}
+
+// 停止学习计时
+function stopLearningTimer() {
+  if (learningTimer.value) {
+    clearInterval(learningTimer.value);
+    learningTimer.value = null;
+  }
+}
+
+// 保存学习进度
+async function saveLearningProgress() {
+  if (!userInfo.value?.id || !learningRecord.value) return;
+  
+  // 如果文章已完成，不再保存进度
+  if (learningRecord.value.isComplete) {
+    return;
+  }
+  
+  const currentTime = Date.now();
+  const duration = Math.floor((currentTime - learningStartTime.value) / 1000);
+  
+  try {
+    const updatedRecord = {
+      id: learningRecord.value.id,
+      userID: userInfo.value.id,
+      resourceType: 1,
+      resourceID: route.query.articleId as string,
+      duration: (learningRecord.value.duration || 0) + duration,
+      progress: hasVideoCompleted.value ? 100 : 50, // 如果视频播放完成，进度100%
+      isComplete: hasVideoCompleted.value
+    };
+    
+    await learningRecordApi.updateRecord(updatedRecord);
+    
+    // 更新本地记录
+    learningRecord.value.duration = updatedRecord.duration;
+    learningRecord.value.progress = updatedRecord.progress;
+    learningRecord.value.isComplete = updatedRecord.isComplete;
+    
+    // 重置开始时间
+    learningStartTime.value = currentTime;
+    
+    // 如果已完成，标记完成
+    if (hasVideoCompleted.value) {
+      await markArticleComplete();
+    }
+  } catch (error) {
+    console.error('保存学习进度失败:', error);
+  }
+}
+
+// 标记文章完成
+async function markArticleComplete() {
+  if (!userInfo.value?.id || !learningRecord.value) return;
+  
+  try {
+    await learningRecordApi.markComplete({
+      id: learningRecord.value.id,
+      taskID: route.query.taskId as string,
+      userID: userInfo.value.id,
+      resourceType: 1,
+      resourceID: route.query.articleId as string,
+      isComplete: true
+    });
+    
+    ElMessage.success('文章学习完成！');
+    stopLearningTimer();
+  } catch (error) {
+    console.error('标记完成失败:', error);
+  }
+}
+
+// 初始化视频监听器
+function initVideoListeners() {
+  
+  // 尝试多种选择器查找文章内容区域
+  const selectors = [
+    '.article-show-container .article-content.ql-editor',
+    '.article-wrapper .article-content.ql-editor',
+    '.article-content.ql-editor',
+    '.article-show-container .article-content',
+    '.article-wrapper .article-content',
+    '.article-content'
+  ];
+  
+  let articleContent: Element | null = null;
+  
+  for (const selector of selectors) {
+    articleContent = document.querySelector(selector);
+    if (articleContent) {
+      break;
+    }
+  }
+  
+  if (!articleContent) {
+    return;
+  }
+  
+  const videos = articleContent.querySelectorAll('video');
+  
+  if (videos.length === 0) {
+    // 没有视频，默认阅读即完成
+    hasVideoCompleted.value = true;
+    return;
+  }
+  
+  // 初始化视频数量和完成状态
+  totalVideos.value = videos.length;
+  completedVideos.value.clear();
+  
+  // 监听所有视频的播放结束事件
+  videos.forEach((video, index) => {
+    const videoElement = video as HTMLVideoElement;
+    
+    // 移除旧的监听器
+    videoElement.removeEventListener('ended', () => handleVideoEnded(index));
+    // 添加新的监听器，传递视频索引
+    videoElement.addEventListener('ended', () => handleVideoEnded(index));
+  });
+}
+
+// 处理视频播放结束
+function handleVideoEnded(videoIndex: number) {
+  // 标记该视频已完成
+  completedVideos.value.add(videoIndex);
+  
+  const completedCount = completedVideos.value.size;
+  console.log(`✅ 视频 ${videoIndex + 1} 播放完成 (${completedCount}/${totalVideos.value})`);
+  
+  // 检查是否所有视频都已完成
+  if (completedCount >= totalVideos.value) {
+    if (!hasVideoCompleted.value) {
+      hasVideoCompleted.value = true;
+      ElMessage.success(`所有视频播放完成 (${totalVideos.value}/${totalVideos.value})`);
+      // 立即保存学习进度并标记完成
+      saveLearningProgress();
+    }
+  } else {
+    ElMessage.info(`视频 ${videoIndex + 1} 播放完成 (${completedCount}/${totalVideos.value})`);
+  }
+}

 // 格式化日期（简单格式：YYYY-MM-DD）
 function formatDateSimple(date: string | Date): string {
@@ -128,6 +497,26 @@ function handleEdit() {
  emit('edit');
 }

+// 返回处理
+function handleBack() {
+  // 返回前保存学习进度
+  if (learningRecord.value && !learningRecord.value.isComplete) {
+    saveLearningProgress();
+  }
+  stopLearningTimer();
+  
+  const taskId = route.query.taskId as string;
+  // 如果有 taskId，返回任务详情
+  if (taskId) {
+    router.push({
+      path: '/study-plan/task-detail',
+      query: { taskId }
+    });
+  } else {
+    emit('back');
+  }
+}
+
 // 暴露方法
 defineExpose({
  open: () => {
@@ -140,6 +529,51 @@ defineExpose({
 </script>

 <style lang="scss" scoped>
+// 路由页面模式样式
+.article-page-view {
+  min-height: 100vh;
+  background: #f5f7fa;
+  padding-bottom: 60px;
+}
+
+.back-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 16px 24px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.loading-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 24px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+.article-wrapper {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 24px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+}
+
+.error-container {
+  padding: 80px 24px;
+  text-align: center;
+}
+
+.loading-state {
+  padding: 20px 0;
+}
+
+// Dialog 和路由模式共用的文章内容样式
 .article-show-container {
  max-width: 100%;
  margin: 0 auto;
--- a/schoolNewsWeb/src/views/course/components/CourseDetail.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseDetail.vue
@@ -64,6 +64,7 @@
              size="large"
              :icon="isCollected ? StarFilled : Star"
              @click="handleCollect"
+              :type="isCollected ? 'success' : 'default'"
            >
              {{ isCollected ? '已收藏' : '收藏课程' }}
            </el-button>
@@ -293,7 +294,6 @@ async function checkCollectionStatus() {
  
  try {
    const res = await userCollectionApi.isCollected(
-      userInfo.value.id,
      CollectionType.COURSE,
      props.courseId
    );
@@ -310,10 +310,10 @@ async function loadLearningProgress() {
  if (!userInfo.value?.id) return;
  
  try {
-    const res = await learningRecordApi.getRecordList({
+    const res = await learningRecordApi.getCourseLearningRecord({
      userID: userInfo.value.id,
-      resourceType: 2, // 课程类型
-      resourceID: props.courseId
+      resourceType: 2, // 课程
+      courseID: props.courseId
    });
    
    if (res.success && res.dataList && res.dataList.length > 0) {
@@ -440,10 +440,14 @@ function formatDuration(minutes?: number): string {
 }

 .back-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .loading {
--- a/schoolNewsWeb/src/views/course/components/CourseLearning.vue
+++ b/schoolNewsWeb/src/views/course/components/CourseLearning.vue
@@ -4,7 +4,7 @@
    <div class="learning-header">
      <div class="header-left">
        <el-button @click="handleBack" :icon="ArrowLeft" text>
-          返回课程详情
+          {{ backButtonText }}
        </el-button>
        <span class="course-name">{{ courseVO?.course.name }}</span>
      </div>
@@ -17,13 +17,18 @@
    </div>

    <div class="learning-container">
+      <!-- 浮动展开按钮（侧边栏收起时显示） -->
+      <div v-if="sidebarCollapsed" class="float-expand-btn" @click="toggleSidebar">
+        <el-button circle :icon="Expand" />
+      </div>
+
      <!-- 左侧：章节目录 -->
      <div class="chapter-sidebar" :class="{ collapsed: sidebarCollapsed }">
        <div class="sidebar-header">
          <span class="sidebar-title">课程目录</span>
          <el-button
            text
-            :icon="sidebarCollapsed ? Expand : Fold"
+            :icon="Fold"
            @click="toggleSidebar"
          />
        </div>
@@ -85,7 +90,12 @@
      </div>

      <!-- 右侧：学习内容区 -->
-      <div class="content-area" :class="{ expanded: sidebarCollapsed }">
+      <div 
+        ref="contentAreaRef"
+        class="content-area" 
+        :class="{ expanded: sidebarCollapsed }"
+        @scroll="handleContentScroll"
+      >
        <!-- 加载中 -->
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="8" animated />
@@ -194,7 +204,8 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import {
  ArrowLeft,
@@ -220,11 +231,13 @@ interface Props {
  courseId: string;
  chapterIndex?: number;
  nodeIndex?: number;
+  backButtonText?: string;
 }

 const props = withDefaults(defineProps<Props>(), {
  chapterIndex: 0,
-  nodeIndex: 0
+  nodeIndex: 0,
+  backButtonText: '返回课程详情'
 });

 const emit = defineEmits<{
@@ -232,7 +245,8 @@ const emit = defineEmits<{
 }>();

 const store = useStore();
-const authStore = computed(() => store.state.auth);
+const userInfo = computed(() => store.getters['auth/user']);
+const route = useRoute();

 const loading = ref(false);
 const courseVO = ref<CourseVO | null>(null);
@@ -241,12 +255,19 @@ const currentNodeIndex = ref(0);
 const sidebarCollapsed = ref(false);
 const activeChapters = ref<number[]>([0]);
 const articleData = ref<any>(null);
+const contentAreaRef = ref<HTMLElement | null>(null);

 // 学习记录
 const learningRecord = ref<LearningRecord | null>(null);
 const completedNodes = ref<Set<string>>(new Set());
 const learningStartTime = ref<number>(0);
 const learningTimer = ref<number | null>(null);
+const hasScrolledToBottom = ref(false);
+const previousNodeKey = ref<string | null>(null);
+
+// 富文本视频跟踪
+const totalRichTextVideos = ref(0);
+const completedRichTextVideos = ref<Set<number>>(new Set());

 // 当前节点
 const currentNode = computed(() => {
@@ -371,30 +392,55 @@ async function loadCourse() {

 // 加载学习记录
 async function loadLearningRecord() {
-  if (!authStore.value.userInfo?.userID) return;
+  if (!userInfo.value?.id) return;
  
  try {
-    const res = await learningRecordApi.getRecordList({
-      userID: authStore.value.userInfo.userID,
+    const res = await learningRecordApi.getCourseLearningRecord({
+      userID: userInfo.value.id,
      resourceType: 2, // 课程
-      resourceID: props.courseId
+      courseID: props.courseId
    });
    
    if (res.success && res.dataList && res.dataList.length > 0) {
      learningRecord.value = res.dataList[0];
      
-      // TODO: 从后端获取已完成的节点列表
-      // 这里暂时用本地存储模拟
+      // 从本地存储加载已完成的节点列表
      const savedProgress = localStorage.getItem(`course_${props.courseId}_nodes`);
      if (savedProgress) {
        completedNodes.value = new Set(JSON.parse(savedProgress));
      }
+    } else {
+      // 没有学习记录，创建新的
+      await createLearningRecord();
    }
  } catch (error) {
    console.error('加载学习记录失败:', error);
  }
 }

+// 创建学习记录
+async function createLearningRecord() {
+  if (!userInfo.value?.id) return;
+  
+  try {
+    const res = await learningRecordApi.createRecord({
+      userID: userInfo.value.id,
+      resourceType: 2, // 课程
+      courseID: props.courseId,
+      chapterID: courseVO.value?.courseChapters[currentChapterIndex.value].chapter.chapterID,
+      nodeID: courseVO.value?.courseChapters[currentChapterIndex.value].nodes[currentNodeIndex.value].nodeID,
+      taskID: route.query.taskId as string
+    });
+    
+    if (res.success && res.data) {
+      learningRecord.value = res.data;
+      console.log('学习记录创建成功');
+    }
+  } catch (error) {
+    console.error('创建学习记录失败:', error);
+  }
+}
+
 // 加载节点内容
 async function loadNodeContent() {
  if (!currentNode.value) return;
@@ -423,9 +469,28 @@ async function loadNodeContent() {
 }

 // 选择节点
-function selectNode(chapterIndex: number, nodeIndex: number) {
+async function selectNode(chapterIndex: number, nodeIndex: number) {
+  // 检查前一个节点是否需要标记完成
+  if (previousNodeKey.value && (hasScrolledToBottom.value || !hasScrollbar())) {
+    await markNodeComplete(previousNodeKey.value);
+  }
+  
+  // 切换到新节点
  currentChapterIndex.value = chapterIndex;
  currentNodeIndex.value = nodeIndex;
+  
+  // 重置滚动状态
+  hasScrolledToBottom.value = false;
+  previousNodeKey.value = `${chapterIndex}-${nodeIndex}`;
+  
+  // 滚动到顶部
+  if (contentAreaRef.value) {
+    contentAreaRef.value.scrollTop = 0;
+  }
+  
+  // 等待 DOM 更新后初始化视频监听
+  await nextTick();
+  initRichTextVideoListeners();
 }

 // 上一节
@@ -458,17 +523,11 @@ function gotoNext() {
 }

 // 标记为完成
-function markAsComplete() {
+async function markAsComplete() {
  if (!currentNode.value) return;
  
  const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
-  completedNodes.value.add(nodeKey);
-  
-  // 保存到本地存储
-  localStorage.setItem(
-    `course_${props.courseId}_nodes`,
-    JSON.stringify(Array.from(completedNodes.value))
-  );
+  await markNodeComplete(nodeKey);
  
  ElMessage.success('已标记为完成');
  
@@ -477,13 +536,7 @@ function markAsComplete() {
    setTimeout(() => {
      gotoNext();
    }, 500);
-  } else {
-    // 课程全部完成
-    ElMessage.success('恭喜你完成了整个课程！');
  }
-  
-  // 更新学习进度
-  saveLearningProgress();
 }

 // 判断节点是否完成
@@ -496,10 +549,15 @@ function isNodeCompleted(chapterIndex: number, nodeIndex: number): boolean {
 function startLearningTimer() {
  learningStartTime.value = Date.now();
  
-  // 每分钟保存一次学习进度
+  // 每10秒保存一次学习进度（如果未完成）
  learningTimer.value = window.setInterval(() => {
+    // 如果课程已完成，停止定时器
+    if (learningRecord.value?.isComplete) {
+      stopLearningTimer();
+      return;
+    }
    saveLearningProgress();
-  }, 60000); // 60秒
+  }, 10000); // 10秒
 }

 // 停止学习计时
@@ -512,19 +570,34 @@ function stopLearningTimer() {

 // 保存学习进度
 async function saveLearningProgress() {
-  if (!authStore.value.userInfo?.userID || !learningRecord.value) return;
+  if (!userInfo.value?.id || !learningRecord.value) return;
+  
+  // 如果课程已完成，不再保存进度
+  if (learningRecord.value.isComplete) {
+    console.log('课程已完成，跳过进度保存');
+    return;
+  }
  
  const currentTime = Date.now();
  const duration = Math.floor((currentTime - learningStartTime.value) / 1000); // 秒
  
  try {
-    await learningRecordApi.updateRecord({
-      ...learningRecord.value,
+    const updatedRecord = {
+      id: learningRecord.value.id,
+      userID: userInfo.value.id,
+      resourceType: 2,
+      resourceID: props.courseId,
      duration: (learningRecord.value.duration || 0) + duration,
      progress: currentProgress.value,
-      isComplete: currentProgress.value === 100,
-      lastLearnTime: new Date().toISOString()
-    });
+      isComplete: currentProgress.value === 100
+    };
+    
+    await learningRecordApi.updateRecord(updatedRecord);
+    
+    // 更新本地记录
+    learningRecord.value.duration = updatedRecord.duration;
+    learningRecord.value.progress = updatedRecord.progress;
+    learningRecord.value.isComplete = updatedRecord.isComplete;
    
    // 重置开始时间
    learningStartTime.value = currentTime;
@@ -533,6 +606,78 @@ async function saveLearningProgress() {
  }
 }

+// 标记节点完成
+async function markNodeComplete(nodeKey: string) {
+  if (completedNodes.value.has(nodeKey)) return;
+  
+  // 如果课程已完成，不再标记节点
+  if (learningRecord.value?.isComplete) {
+    console.log('课程已完成，跳过节点标记');
+    return;
+  }
+  
+  completedNodes.value.add(nodeKey);
+  
+  // 保存到本地存储
+  localStorage.setItem(
+    `course_${props.courseId}_nodes`,
+    JSON.stringify(Array.from(completedNodes.value))
+  );
+  
+  // 更新学习进度
+  await saveLearningProgress();
+  
+  // 如果全部完成，标记课程为完成
+  if (currentProgress.value === 100) {
+    await markCourseComplete();
+  }
+}
+
+// 标记课程完成
+async function markCourseComplete() {
+  if (!userInfo.value?.id || !learningRecord.value) return;
+  
+  try {
+    await learningRecordApi.markComplete({
+      id: learningRecord.value.id,
+      userID: userInfo.value.id,
+      resourceType: 2,
+      resourceID: props.courseId,
+      taskID: route.query.taskId as string,
+      progress: 100,
+      isComplete: true
+    });
+    
+    ElMessage.success('恭喜你完成了整个课程！');
+  } catch (error) {
+    console.error('标记课程完成失败:', error);
+  }
+}
+
+// 检查是否有滚动条
+function hasScrollbar(): boolean {
+  if (!contentAreaRef.value) return false;
+  return contentAreaRef.value.scrollHeight > contentAreaRef.value.clientHeight;
+}
+
+// 处理内容区域滚动
+function handleContentScroll(event: Event) {
+  const target = event.target as HTMLElement;
+  const scrollTop = target.scrollTop;
+  const scrollHeight = target.scrollHeight;
+  const clientHeight = target.clientHeight;
+  
+  // 判断是否滚动到底部（留10px容差）
+  if (scrollHeight - scrollTop - clientHeight < 10) {
+    if (!hasScrolledToBottom.value) {
+      hasScrolledToBottom.value = true;
+      // 滚动到底部，标记当前节点完成
+      const nodeKey = `${currentChapterIndex.value}-${currentNodeIndex.value}`;
+      markNodeComplete(nodeKey);
+    }
+  }
+}
+
 // 处理视频进度
 function handleVideoProgress(event: Event) {
  // 可以在这里记录视频播放进度
@@ -552,6 +697,67 @@ function handleVideoEnded() {
  }
 }

+// 初始化富文本中的视频监听器
+function initRichTextVideoListeners() {
+  // 使用 setTimeout 确保 DOM 完全渲染
+  setTimeout(() => {
+    // 尝试多种选择器查找富文本内容区域
+    const selectors = [
+      '.node-content .rich-text-content',
+      '.content-area .rich-text-content',
+      '.rich-text-content'
+    ];
+    
+    let richTextContent: Element | null = null;
+    
+    for (const selector of selectors) {
+      richTextContent = document.querySelector(selector);
+      if (richTextContent) {
+        break;
+      }
+    }
+    
+    if (!richTextContent) {
+      return;
+    }
+    
+    const videos = richTextContent.querySelectorAll('video');
+    
+    if (videos.length === 0) {
+      return;
+    }
+    
+    // 初始化视频数量和完成状态
+    totalRichTextVideos.value = videos.length;
+    completedRichTextVideos.value.clear();
+    
+    // 监听所有视频的播放结束事件
+    videos.forEach((video, index) => {
+      const videoElement = video as HTMLVideoElement;
+      // 移除旧的监听器，避免重复添加
+      videoElement.removeEventListener('ended', () => handleRichTextVideoEnded(index));
+      // 添加新的监听器，传递视频索引
+      videoElement.addEventListener('ended', () => handleRichTextVideoEnded(index));
+    });
+  }, 300); // 延迟 300ms 确保 DOM 完全渲染
+}
+
+// 处理富文本视频播放结束
+function handleRichTextVideoEnded(videoIndex: number) {
+  // 标记该视频已完成
+  completedRichTextVideos.value.add(videoIndex);
+  
+  const completedCount = completedRichTextVideos.value.size;
+  
+  // 检查是否所有视频都已完成
+  if (completedCount >= totalRichTextVideos.value) {
+    if (!isCurrentNodeCompleted.value) {
+      ElMessage.success(`所有视频播放完成 (${totalRichTextVideos.value}/${totalRichTextVideos.value})`);
+      markAsComplete();
+    }
+  }
+}
+
 // 处理音频进度
 function handleAudioProgress(event: Event) {
  const audio = event.target as HTMLAudioElement;
@@ -626,6 +832,7 @@ function handleBack() {
  position: sticky;
  top: 0;
  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  .header-left {
    display: flex;
@@ -651,6 +858,18 @@ function handleBack() {
  display: flex;
  flex: 1;
  height: calc(100vh - 61px);
+  position: relative;
+}
+
+.float-expand-btn {
+  position: absolute;
+  left: 16px;
+  top: 16px;
+  z-index: 10;
+  
+  :deep(.el-button) {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
 }

 .chapter-sidebar {
--- a/schoolNewsWeb/src/views/resource-center/components/ResourceArticle.vue
+++ b/schoolNewsWeb/src/views/resource-center/components/ResourceArticle.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="resource-article">
-    <div class="page-header">
-        <el-button @click="handleBack" :icon="ArrowLeft">返回</el-button>
-    </div>
    <ArticleShowView
      v-if="articleData"
      :as-dialog="false"
      :article-data="articleData"
      :category-list="[]"
+      :show-back-button="true"
+      back-button-text="返回列表"
+      @back="handleBack"
    />
    <div v-else class="loading">加载中...</div>
    <ResouceCollect
@@ -29,7 +29,6 @@ import { ResouceCollect, ResouceBottom } from '@/views/resource-center/component
 import { resourceApi } from '@/apis/resource';
 import { ElMessage } from 'element-plus';
 import type { Resource } from '@/types/resource';
-import { ArrowLeft } from '@element-plus/icons-vue';
 import { CollectionType, type UserCollection } from '@/types';

 interface Props {
@@ -145,24 +144,17 @@ function handleBack() {
 </script>

 <style lang="scss" scoped>
-
-.page-header {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 24px;
-
-    .page-title {
-        font-size: 24px;
-        font-weight: 600;
-        color: #303133;
-        margin: 0;
-    }
-}
 .resource-article {
  flex: 1;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 40px 60px;
 }
+
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: #909399;
+  font-size: 14px;
+}
 </style>
--- a/schoolNewsWeb/src/views/study-plan/CourseStudyView.vue
+++ b/schoolNewsWeb/src/views/study-plan/CourseStudyView.vue
@@ -4,6 +4,7 @@
    :course-id="courseId"
    :chapter-index="chapterIndex"
    :node-index="nodeIndex"
+    :back-button-text="taskId ? '返回任务详情' : '返回课程详情'"
    @back="handleBack"
  />
 </template>
@@ -24,15 +25,27 @@ const route = useRoute();
 const courseId = computed(() => route.query.courseId as string || '');
 const chapterIndex = computed(() => parseInt(route.query.chapterIndex as string) || 0);
 const nodeIndex = computed(() => parseInt(route.query.nodeIndex as string) || 0);
+const taskId = computed(() => route.query.taskId as string || '');

-// 返回到课程详情页
+// 返回到上一页
 function handleBack() {
-  router.push({
-    path: '/study-plan/course-detail',
-    query: {
-      courseId: courseId.value
-    }
-  });
+  // 如果有 taskId，返回任务详情页
+  if (taskId.value) {
+    router.push({
+      path: '/study-plan/task-detail',
+      query: {
+        taskId: taskId.value
+      }
+    });
+  } else {
+    // 否则返回课程详情页
+    router.push({
+      path: '/study-plan/course-detail',
+      query: {
+        courseId: courseId.value
+      }
+    });
+  }
 }
 </script>

--- a/schoolNewsWeb/src/views/study-plan/LearningTaskDetailView.vue
+++ b/schoolNewsWeb/src/views/study-plan/LearningTaskDetailView.vue
@@ -23,7 +23,7 @@ const taskId = computed(() => route.query.taskId as string || '');

 // 返回任务列表
 function handleBack() {
-  router.back();
+  router.push('/study-plan/tasks');
 }
 </script>

--- a/schoolNewsWeb/src/views/study-plan/StudyTasksView.vue
+++ b/schoolNewsWeb/src/views/study-plan/StudyTasksView.vue
@@ -138,8 +138,8 @@ const progressPercent = computed(() => {
 });

 onMounted(() => {
-  loadUserProgress();
  loadTaskList();
+  loadUserProgress();
 });

 // 获取当前用户ID
@@ -199,6 +199,7 @@ async function loadUserProgress() {
      const pending = (progressData.notStartTaskNum || 0) + (progressData.learningTaskNum || 0);
      // 设置统计数据
      totalCount.value = progressData.totalTaskNum || 0;
+      completedCount.value = progressData.completedTaskNum || 0;
      pendingCount.value = pending;
    }
  } catch (error) {
@@ -244,7 +245,7 @@ function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; t
  
  if (task.status === 2) {
    // 已完成
-    return { show: true, text: '已截止', type: 'success' };
+    return { show: true, text: '已完成', type: 'success' };
  } else if (diffDays < 0) {
    // 已过期
    return { show: true, text: '已截止', type: 'info' };
--- a/schoolNewsWeb/src/views/task/LearingTaskDetail.vue
+++ b/schoolNewsWeb/src/views/task/LearingTaskDetail.vue
@@ -156,26 +156,31 @@
                </el-tag>
              </div>
              <div class="course-meta">
-                <span v-if="course.completeTime" class="complete-time">
-                  <el-icon><CircleCheck /></el-icon>
-                  完成于 {{ formatDateTime(course.completeTime) }}
-                </span>
-                <el-tag 
-                  v-else
-                  :type="getCourseStatusType(course.progress)"
-                  size="small"
-                >
-                  {{ course.progress ? '学习中' : '未开始' }}
-                </el-tag>
+                <div class="status-info">
+                  <el-tag 
+                    :type="getItemStatusType(course.status)"
+                    size="small"
+                  >
+                    {{ getItemStatusText(course.status) }}
+                  </el-tag>
+                  <span v-if="course.status === 2 && course.completeTime" class="complete-time">
+                    <el-icon><CircleCheck /></el-icon>
+                    {{ formatDateTime(course.completeTime) }}
+                  </span>
+                </div>
+                <div v-if="course.progress !== null && course.progress !== undefined" class="progress-info">
+                  <span class="progress-text">{{ course.progress }}%</span>
+                </div>
              </div>
            </div>
            <div class="course-action">
              <el-button 
                type="primary" 
-                :icon="course.progress ? VideoPlay : Reading"
+                :icon="course.status === 2 ? CircleCheck : (course.status === 1 ? VideoPlay : Reading)"
+                :disabled="course.status === 2"
                @click.stop="handleCourseClick(course)"
              >
-                {{ course.progress ? '继续学习' : '开始学习' }}
+                {{ course.status === 2 ? '已完成' : (course.status === 1 ? '继续学习' : '开始学习') }}
              </el-button>
            </div>
          </div>
@@ -215,26 +220,31 @@
                </el-tag>
              </div>
              <div class="resource-meta">
-                <span v-if="resource.completeTime" class="complete-time">
-                  <el-icon><CircleCheck /></el-icon>
-                  完成于 {{ formatDateTime(resource.completeTime) }}
-                </span>
-                <el-tag 
-                  v-else
-                  :type="getResourceStatusType(resource.progress)"
-                  size="small"
-                >
-                  {{ resource.progress ? '阅读中' : '未开始' }}
-                </el-tag>
+                <div class="status-info">
+                  <el-tag 
+                    :type="getItemStatusType(resource.status)"
+                    size="small"
+                  >
+                    {{ getItemStatusText(resource.status) }}
+                  </el-tag>
+                  <span v-if="resource.status === 2 && resource.completeTime" class="complete-time">
+                    <el-icon><CircleCheck /></el-icon>
+                    {{ formatDateTime(resource.completeTime) }}
+                  </span>
+                </div>
+                <div v-if="resource.progress !== null && resource.progress !== undefined" class="progress-info">
+                  <span class="progress-text">{{ resource.progress }}%</span>
+                </div>
              </div>
            </div>
            <div class="resource-action">
              <el-button 
                type="primary" 
-                :icon="resource.progress ? Reading : View"
+                :icon="resource.status === 2 ? CircleCheck : (resource.status === 1 ? Reading : View)"
+                :disabled="resource.status === 2"
                @click.stop="handleResourceClick(resource)"
              >
-                {{ resource.progress ? '继续阅读' : '开始阅读' }}
+                {{ resource.status === 2 ? '已完成' : (resource.status === 1 ? '继续阅读' : '开始阅读') }}
              </el-button>
            </div>
          </div>
@@ -336,7 +346,7 @@ async function loadTaskDetail() {

  loading.value = true;
  try {
-    const res = await learningTaskApi.getTaskById(currentTaskId.value);
+    const res = await learningTaskApi.getUserTask(currentTaskId.value);
    if (res.success && res.data) {
      taskVO.value = res.data;
      
@@ -392,7 +402,7 @@ function handleResourceClick(resource: TaskItemVO) {
    path: '/article/show',
    query: {
      articleId: resource.resourceID,
-      taskId: currentTaskId.value
+      taskId: currentTaskId.value // 传递 taskId
    }
  });
 }
@@ -444,14 +454,32 @@ function getTaskStatusType(status?: number): 'info' | 'success' | 'warning' | 'd
  }
 }

-// 获取课程状态类型
-function getCourseStatusType(progress?: boolean): 'success' | 'info' {
-  return progress ? 'success' : 'info';
+// 获取学习项状态文本（课程/资源通用）
+function getItemStatusText(status?: number): string {
+  switch (status) {
+    case 0:
+      return '未开始';
+    case 1:
+      return '学习中';
+    case 2:
+      return '已完成';
+    default:
+      return '未知';
+  }
 }

-// 获取资源状态类型
-function getResourceStatusType(progress?: boolean): 'success' | 'info' {
-  return progress ? 'success' : 'info';
+// 获取学习项状态类型（课程/资源通用）
+function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
+  switch (status) {
+    case 0:
+      return 'info';
+    case 1:
+      return 'warning';
+    case 2:
+      return 'success';
+    default:
+      return 'info';
+  }
 }
 </script>

@@ -463,10 +491,14 @@ function getResourceStatusType(progress?: boolean): 'success' | 'info' {
 }

 .back-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
  padding: 16px 24px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .loading {
@@ -755,17 +787,32 @@ function getResourceStatusType(progress?: boolean): 'success' | 'info' {
    .course-meta {
      display: flex;
      align-items: center;
+      justify-content: space-between;
      gap: 12px;
      
-      .complete-time {
+      .status-info {
        display: flex;
        align-items: center;
-        gap: 4px;
-        font-size: 13px;
-        color: #67c23a;
+        gap: 8px;
        
-        .el-icon {
-          font-size: 16px;
+        .complete-time {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 13px;
+          color: #67c23a;
+          
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+      }
+      
+      .progress-info {
+        .progress-text {
+          font-size: 14px;
+          font-weight: 600;
+          color: #409eff;
        }
      }
    }
@@ -843,17 +890,32 @@ function getResourceStatusType(progress?: boolean): 'success' | 'info' {
    .resource-meta {
      display: flex;
      align-items: center;
+      justify-content: space-between;
      gap: 12px;
      
-      .complete-time {
+      .status-info {
        display: flex;
        align-items: center;
-        gap: 4px;
-        font-size: 13px;
-        color: #67c23a;
+        gap: 8px;
        
-        .el-icon {
-          font-size: 16px;
+        .complete-time {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 13px;
+          color: #67c23a;
+          
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+      }
+      
+      .progress-info {
+        .progress-text {
+          font-size: 14px;
+          font-weight: 600;
+          color: #409eff;
        }
      }
    }