From 459fa434ac8c5b02886cf3d40e11ad840710264f Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Tue, 17 Mar 2026 14:43:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20KidsMode=20=E6=96=87=E6=A1=A3/=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E9=A2=84=E8=A7=88=E8=B0=83=E6=95=B4=EF=BC=8Cplayer=20?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- KidsMode: 视频对接 player 组件，文档对接 WebOffice 组件
- WebOffice: 新增 noPage 嵌入模式，支持 props 传入 url/fileName
- player: 参考 VideoPlayer 增强功能（title、emit、键盘快捷键、加载遮罩、唯一ID）

Made-with: Cursor
---
 .../src/views/office/WebOffice.vue            |  54 +++-
 .../src/views/office/player.vue               | 273 +++++++++++++-----
 .../teacher/lessons/components/KidsMode.vue   | 182 +++++++-----
 .../components/viewers/VideoPlayer.vue        |  70 ++---
 4 files changed, 361 insertions(+), 218 deletions(-)

diff --git a/reading-platform-frontend/src/views/office/WebOffice.vue b/reading-platform-frontend/src/views/office/WebOffice.vue
index dfcc8f0..172d15f 100644
--- a/reading-platform-frontend/src/views/office/WebOffice.vue
+++ b/reading-platform-frontend/src/views/office/WebOffice.vue
@@ -1,9 +1,10 @@
 <template>
-
-  <div v-if="!expire" ref="containerRef" class="!w-full !h-full pos-fixed top-0 left-0 z-999"></div>
-  <div v-else class="flex justify-center">
-    <div class="my-60px">
-      链接已失效!<span class=" cursor-pointer color-#0085FF ml-10px" @click="home">返回首页</span>
+  <div v-if="!expire" ref="containerRef" class="!w-full !h-full z-999" :class="noPage ? 'absolute top-0 left-0' : 'pos-fixed top-0 left-0'"></div>
+  <div v-else class="flex justify-center items-center w-full h-full">
+    <div class="my-60px text-center">
+      链接已失效!
+      <span v-if="!noPage" class="cursor-pointer color-#0085FF ml-10px" @click="home">返回首页</span>
+      <span v-else class="block mt-10px color-#999">文档预览加载失败</span>
     </div>
   </div>
   <!-- <Modal ref="modalRef" class="max-w-80%" width="1340px" v-model:open="open" :footer="null" title="在线资源">
@@ -38,7 +39,7 @@
 </template>
 <!--  阿里云IMM weboffice  -->
 <script lang="ts" name="WebOffice" setup>
-import { onMounted, ref, nextTick, reactive, watch, onUnmounted, onBeforeUnmount } from 'vue';
+import { onMounted, ref, nextTick, onUnmounted, onBeforeUnmount } from 'vue';
 
 import {
   generateWebofficeToken,
@@ -48,16 +49,39 @@ import {
 import { useRoute, useRouter } from 'vue-router';
 import { getTemItem, TemObj } from './temObjs';
 
+const props = defineProps<{
+  /** 嵌入模式：与页面共存，使用 absolute 定位 */
+  noPage?: boolean;
+  /** 文档 URL（嵌入模式必传） */
+  url?: string;
+  /** 文件名（嵌入模式，用于 IMM） */
+  fileName?: string;
+  /** 文件 ID（嵌入模式可选） */
+  fileId?: string;
+}>();
+
 const containerRef = ref<HTMLElement | null>(null);
 const route = useRoute();
 const expire = ref(false);
 const router = useRouter();
 let updateSizeInterval: any;
-// const { hasPermission } = usePermission();
+
+function getTemObjFromProps(): TemObj | null {
+  if (!props.url) return null;
+  const ext = props.url.split('.').pop()?.split('?')[0] || 'pdf';
+  const name = props.fileName?.includes('.') ? props.fileName : `${props.fileName || 'document'}.${ext}`;
+  return {
+    id: props.fileId || '',
+    isEdit: false,
+    name,
+    url: encodeURIComponent(props.url),
+  };
+}
+
 onMounted(() => {
   nextTick(() => {
     init(containerRef.value);
-  })
+  });
 });
 const _temObj = ref<TemObj>({
   id: '',
@@ -98,12 +122,16 @@ const baseInstance = ref<any>(null);
 async function init(mount: HTMLElement | null) {
   if (!mount) {
     console.error('确保挂载节点元素存在。 一般在 onMounted 钩子中调用。');
+    return;
+  }
+
+  let temObj: TemObj | null;
+  if (props.noPage && props.url) {
+    temObj = getTemObjFromProps();
+  } else {
+    temObj = getTemItem(route.query._t as string);
   }
-  // IMM vue3接入文档 https://help.aliyun.com/zh/imm/user-guide/vue3-usage?spm=a2c4g.11186623.0.0.3a0244142zAkss
-  // 获取 token
-  // let tokenInfo = await props.getTokenFun(props.teachingMaterialsImmUrl);
 
-  const temObj = getTemItem(route.query._t as string);
   if (!temObj) {
     expire.value = true;
     return;
@@ -161,7 +189,7 @@ async function init(mount: HTMLElement | null) {
   instance.on('fileStatus', () => {
     debouncedFn(5000);
   });
-  instance.ApiEvent.AddApiEventListener('error', (err) => {
+  instance.ApiEvent.AddApiEventListener('error', (err: unknown) => {
     console.log('发生错误:', err);
   })
 
diff --git a/reading-platform-frontend/src/views/office/player.vue b/reading-platform-frontend/src/views/office/player.vue
index 4a11ea5..c6f50e7 100644
--- a/reading-platform-frontend/src/views/office/player.vue
+++ b/reading-platform-frontend/src/views/office/player.vue
@@ -1,70 +1,78 @@
 <template>
-  <div class="w-full h-full bg-#000 z-50 top-0 left-0" :class="noPage ? 'absolute' : 'fixed '">
-    <!-- <PressDrag @click="toBreak"
-      class="pos-absolute bg-#00000033 cursor-pointer w-30px h-30px flex-center z-99999 p-10px top-20px right-20px rounded-50%">
-      <CloseCircleOutlined class="text-30px color-#ffffff" />
-    </PressDrag> -->
-    <div class="w-full h-full z-1" id="playerView"></div>
+  <div
+    ref="playerWrapperRef"
+    class="player-wrapper w-full h-full bg-#000 z-50 top-0 left-0"
+    :class="noPage ? 'absolute' : 'fixed'"
+    tabindex="0"
+    @keydown="handleKeydown"
+  >
+    <!-- 视频标题遮罩（暂停时显示，参考 VideoPlayer） -->
+    <div v-if="title && !isPlaying && !loading" class="title-overlay">
+      <div class="title-text">{{ title }}</div>
+    </div>
+
+    <!-- 加载中遮罩 -->
+    <div v-if="loading" class="loading-overlay">
+      <div class="loading-spinner"></div>
+    </div>
+
+    <!-- Aliplayer 挂载点 -->
+    <div :id="playerId" class="w-full h-full z-1"></div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { CloseCircleOutlined } from '@ant-design/icons-vue';
-import PressDrag from '@/components/PressDrag.vue';
-import { useRoute, useRouter } from 'vue-router';
-import { getTemItem, TemObj } from './temObjs';
-// @ts-ignore
-const player = ref<typeof Aliplayer>(null); //播放器
-const route = useRoute();
+import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { getTemItem, type TemObj } from './temObjs';
+
 const props = defineProps<{
   url: string;
   cover?: string;
   noPage?: boolean;
+  /** 视频标题（参考 VideoPlayer） */
+  title?: string;
 }>();
+
+const emit = defineEmits<{
+  (e: 'ended'): void;
+  (e: 'play'): void;
+  (e: 'pause'): void;
+}>();
+
+const route = useRoute();
+const playerWrapperRef = ref<HTMLElement | null>(null);
+const playerInstance = ref<any>(null);
+const isPlaying = ref(false);
+const loading = ref(true);
+
+// 唯一 ID 避免多实例冲突
+const playerId = ref(`playerView-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`);
+
 const _temObj = ref<TemObj>({
   id: '',
   name: '',
   isEdit: false,
   url: '',
 });
-onMounted(() => {
-  nextTick(() => {
-    if (!props.noPage) {
 
-      const temObj = getTemItem(route.query._t as string);
-      if (!temObj) {
-        return;
-      }
-      _temObj.value = temObj;
-      createPlayer(_temObj.value.url, '/long/long.svg');
-    } else if (!!props.url) {
-      createPlayer(props.url, props.cover || '/long/long.svg');
-    }
-  })
+function createPlayer(source?: string, cover?: string) {
+  if (!source) return;
 
-});
-watch(() => props.url, (newVal) => {
-  if (!!newVal) {
-    createPlayer(newVal, props.cover || '/long/long.svg');
-  }
-});
-const createPlayer = (source?: string, cover?: string) => {
-  // 更多使用方法请参考接入文档：https://help.aliyun.com/zh/vod/developer-reference/integration
+  const mountEl = document.getElementById(playerId.value);
+  if (!mountEl) return;
 
   // @ts-ignore
-  player.value = new Aliplayer(
+  playerInstance.value = new Aliplayer(
     {
-      id: 'playerView',
+      id: playerId.value,
       width: '100%',
       height: '100%',
-      source: source, // 如果是私有加密播放请传入 vid/playauth/encryptType
-      cover: cover,
+      source: source,
+      cover: cover || '/long/long.svg',
       skinLayout: [
         { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
-        {
-          name: 'H5Loading',
-          align: 'cc',
-        },
+        { name: 'H5Loading', align: 'cc' },
         {
           name: 'controlBar',
           align: 'blabs',
@@ -81,43 +89,162 @@ const createPlayer = (source?: string, cover?: string) => {
         },
       ],
     },
-    // @ts-ignore
-    (player: typeof Aliplayer) => {
-      //播放下一个视频
+    (player: any) => {
       player.on('ended', () => {
-        // update(videoList[index + 1]);
+        isPlaying.value = false;
+        emit('ended');
       });
-    },
-  );
-  console.log('player', player.value);
-};
-
-function toBreak() {
-
+      player.on('play', () => {
+        isPlaying.value = true;
+        loading.value = false;
+        emit('play');
+      });
+      player.on('pause', () => {
+        isPlaying.value = false;
+        emit('pause');
+      });
+      player.on('canplay', () => {
+        loading.value = false;
+      });
+      player.on('waiting', () => {
+        loading.value = true;
+      });
+    });
 }
-//点击右侧列表视频切换
-// const update = (video: PlayInfo) => {
-//   // playObj.value = video;
-//   player.value.dispose(); //销毁
-//   createPlayer(video.Source, video.CoverURL); //创建
-// };
+
 function dispose() {
-  if (player.value) {
-    player.value.dispose(); //销毁
+  if (playerInstance.value) {
+    try {
+      playerInstance.value.dispose();
+    } catch (_) {}
+    playerInstance.value = null;
   }
 }
-onBeforeUnmount(() => {
-  try {
+
+function initPlayer() {
+  if (!props.noPage) {
+    const temObj = getTemItem(route.query._t as string);
+    if (!temObj) return;
+    _temObj.value = temObj;
+    createPlayer(_temObj.value.url, '/long/long.svg');
+  } else if (props.url) {
+    createPlayer(props.url, props.cover || '/long/long.svg');
+  }
+}
+
+// 键盘快捷键（参考 VideoPlayer）
+function handleKeydown(e: KeyboardEvent) {
+  const p = playerInstance.value;
+  if (!p) return;
+
+  switch (e.key) {
+    case ' ':
+      e.preventDefault();
+      if (isPlaying.value) p.pause(); else p.play();
+      break;
+    case 'ArrowLeft':
+      e.preventDefault();
+      p.seek?.(Math.max(0, (p.getCurrentTime?.() ?? 0) - 10));
+      break;
+    case 'ArrowRight':
+      e.preventDefault();
+      const duration = p.getDuration?.() ?? 0;
+      p.seek?.(Math.min(duration, (p.getCurrentTime?.() ?? 0) + 10));
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      p.setVolume?.(Math.min(100, (p.getVolume?.() ?? 100) + 10));
+      break;
+    case 'ArrowDown':
+      e.preventDefault();
+      p.setVolume?.(Math.max(0, (p.getVolume?.() ?? 100) - 10));
+      break;
+    case 'f':
+    case 'F':
+      e.preventDefault();
+      p.requestFullScreen?.();
+      break;
+    case 'm':
+    case 'M':
+      e.preventDefault();
+      p.mute?.();
+      break;
+  }
+}
+
+watch(() => props.url, (newVal) => {
+  if (newVal) {
     dispose();
-  } catch (error) { }
+    loading.value = true;
+    nextTick(() => createPlayer(newVal, props.cover || '/long/long.svg'));
+  }
+});
+
+onMounted(() => {
+  nextTick(() => {
+    initPlayer();
+    playerWrapperRef.value?.focus?.();
+  });
+});
+
+onBeforeUnmount(() => {
+  dispose();
 });
-// // 存储当前播放时间
-// const saveTime = function (memoryVideo: string, currentTime: string) {
-//   localStorage.setItem(memoryVideo, currentTime);
-// };
-// // 获取此视频上次播放时间
-// const getTime = function (memoryVideo: string): string | null {
-//   return localStorage.getItem(memoryVideo);
-// };
 </script>
-<style scoped></style>
+
+<style scoped lang="scss">
+.player-wrapper {
+  position: relative;
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.title-overlay {
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 15;
+  pointer-events: none;
+
+  .title-text {
+    padding: 8px 20px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-size: 16px;
+    border-radius: 8px;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+}
+
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #ff8c42;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue b/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue
index ddf49b3..3dce868 100644
--- a/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue
+++ b/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue
@@ -11,21 +11,18 @@
       <!-- 绘本展示 -->
       <Transition name="content-fade" mode="out-in">
         <div v-if="currentResourceType === 'ebook'" key="ebook" class="content-viewer">
-          <EbookViewer
-            :pages="ebookPages"
-            :current-page="currentEbookPage"
-            :audio-url="syncAudioUrl"
-            :auto-play="autoPlayAudio"
-            @page-change="handlePageChange"
-            @toggle-audio-sync="toggleAudioSync"
-          />
+          <EbookViewer :pages="ebookPages" :current-page="currentEbookPage" :audio-url="syncAudioUrl"
+            :auto-play="autoPlayAudio" @page-change="handlePageChange" @toggle-audio-sync="toggleAudioSync" />
         </div>
 
         <!-- 视频播放 -->
         <div v-else-if="currentResourceType === 'video'" key="video" class="content-viewer">
-          <VideoPlayer
-            :src="currentResourceUrl"
+          <Player
+            v-if="currentResourceUrl"
+            :key="currentResourceUrl"
+            :url="currentResourceUrl"
             :title="currentResourceName"
+            :no-page="true"
             @ended="handleMediaEnded"
           />
         </div>
@@ -40,40 +37,36 @@
 
         <!-- 音频播放 -->
         <div v-else-if="currentResourceType === 'audio'" key="audio" class="content-viewer">
-          <AudioPlayer
-            :src="currentResourceUrl"
-            :title="currentResourceName"
-            :background-image="backgroundImageUrl"
-            @ended="handleMediaEnded"
-          />
+          <AudioPlayer :src="currentResourceUrl" :title="currentResourceName" :background-image="backgroundImageUrl"
+            @ended="handleMediaEnded" />
         </div>
-
         <!-- PPT/挂图展示 -->
-        <div v-else-if="currentResourceType === 'ppt' || currentResourceType === 'poster'" key="slides" class="content-viewer">
-          <SlidesViewer
+        <div v-else-if="currentResourceType === 'ppt'" key="ppt" class="content-viewer">
+          <!-- <SlidesViewer
             :pages="slidesPages"
             :current-page="currentSlidePage"
             :type="currentResourceType"
             @page-change="handleSlideChange"
-          />
+          /> -->
+          <WebOffice v-if="currentResourceUrl" :key="currentResourceUrl" :url="currentResourceUrl"
+            :file-name="currentResourceName" :no-page="true" />
         </div>
 
-        <!-- 文档展示 (PDF等) -->
+        <!-- PPT/挂图展示 -->
+        <div v-else-if="currentResourceType === 'poster'" key="slides" class="content-viewer">
+          <SlidesViewer :pages="slidesPages" :current-page="currentSlidePage" :type="currentResourceType"
+            @page-change="handleSlideChange" />
+        </div>
+        <!-- 文档展示 (PDF/Word/Excel 等，使用 WebOffice) -->
         <div v-else-if="currentResourceType === 'document'" key="document" class="content-viewer">
-          <SlidesViewer
-            :pages="[currentResourceUrl]"
-            :current-page="0"
-            type="pdf"
-          />
+          <WebOffice v-if="currentResourceUrl" :key="currentResourceUrl" :url="currentResourceUrl"
+            :file-name="currentResourceName" :no-page="true" />
         </div>
 
         <!-- 课程资源展示 (从底部点击的PPT/挂图) -->
         <div v-else-if="showingResource" key="resource" class="content-viewer">
-          <SlidesViewer
-            :pages="[showingResource.url]"
-            :current-page="0"
-            :type="(showingResource.type as 'ppt' | 'poster')"
-          />
+          <SlidesViewer :pages="[showingResource.url]" :current-page="0"
+            :type="(showingResource.type as 'ppt' | 'poster')" />
           <div class="resource-header">
             <span class="resource-title">{{ showingResource.name }}</span>
             <button class="close-resource-btn" @click="showingResource = null">
@@ -102,13 +95,9 @@
           <span>教学资源</span>
         </div>
         <div class="resources-track">
-          <button
-            v-for="resource in allLessonResources"
-            :key="resource.id"
-            class="resource-chip"
+          <button v-for="resource in allLessonResources" :key="resource.id" class="resource-chip"
             :class="{ active: currentResourceIndex === resource.index }"
-            @click.stop="handleResourceByIndex(resource.index)"
-          >
+            @click.stop="handleResourceByIndex(resource.index)">
             <component :is="getResourceIcon(resource.type)" :size="24" :stroke-width="2.5" />
             <span>{{ resource.name }}</span>
           </button>
@@ -133,12 +122,8 @@
           <span>延伸活动</span>
         </div>
         <div class="activities-track">
-          <button
-            v-for="activity in activities"
-            :key="activity.id"
-            class="activity-chip"
-            @click.stop="handleActivityClick(activity)"
-          >
+          <button v-for="activity in activities" :key="activity.id" class="activity-chip"
+            @click.stop="handleActivityClick(activity)">
             <component :is="getActivityIcon(activity.activityType)" :size="22" :stroke-width="2.5" />
             <span>{{ activity.name }}</span>
           </button>
@@ -151,7 +136,8 @@
           <ChevronLeft :size="28" :stroke-width="3" />
           <span>上一个</span>
         </button>
-        <button class="ctrl-btn primary" :disabled="currentResourceIndex >= allLessonResources.length - 1" @click.stop="nextResource">
+        <button class="ctrl-btn primary" :disabled="currentResourceIndex >= allLessonResources.length - 1"
+          @click.stop="nextResource">
           <span>下一个</span>
           <ChevronRight :size="28" :stroke-width="3" />
         </button>
@@ -163,18 +149,14 @@
     </div>
 
     <!-- 延伸活动弹窗 -->
-    <a-modal
-      v-model:open="activityModalVisible"
-      :title="selectedActivity?.name"
-      :footer="null"
-      width="90%"
-      class="activity-modal"
-      @cancel="activityModalVisible = false"
-    >
+    <a-modal v-model:open="activityModalVisible" :title="selectedActivity?.name" :footer="null" width="90%"
+      class="activity-modal" @cancel="activityModalVisible = false">
       <div v-if="selectedActivity" class="activity-content">
         <div v-if="activityResourceUrl" class="activity-media">
-          <video v-if="activityResourceType === 'video'" :src="activityResourceUrl" controls style="width: 100%; max-height: 50vh;"></video>
-          <img v-else-if="activityResourceType === 'image'" :src="activityResourceUrl" style="width: 100%; max-height: 50vh; object-fit: contain;">
+          <video v-if="activityResourceType === 'video'" :src="activityResourceUrl" controls
+            style="width: 100%; max-height: 50vh;"></video>
+          <img v-else-if="activityResourceType === 'image'" :src="activityResourceUrl"
+            style="width: 100%; max-height: 50vh; object-fit: contain;">
         </div>
         <div class="activity-info">
           <div class="info-item" v-if="selectedActivity.objectives">
@@ -224,6 +206,8 @@ import {
   Lightbulb,
 } from 'lucide-vue-next';
 import EbookViewer from './viewers/EbookViewer.vue';
+import Player from '@/views/office/player.vue';
+import WebOffice from '@/views/office/WebOffice.vue';
 import VideoPlayer from './viewers/VideoPlayer.vue';
 import AudioPlayer from './viewers/AudioPlayer.vue';
 import SlidesViewer from './viewers/SlidesViewer.vue';
@@ -734,10 +718,10 @@ const loadCurrentStepResources = () => {
 
     if (resource) {
       currentResourceType.value = resource.type === '电子绘本' ? 'ebook' :
-                                   resource.type === '音频' ? 'audio' :
-                                   resource.type === '视频' ? 'video' :
-                                   resource.type === 'PPT课件' ? 'ppt' :
-                                   resource.type === '教学挂图' ? 'poster' : '';
+        resource.type === '音频' ? 'audio' :
+          resource.type === '视频' ? 'video' :
+            resource.type === 'PPT课件' ? 'ppt' :
+              resource.type === '教学挂图' ? 'poster' : '';
       currentResourceUrl.value = resource.url ? getFileUrl(resource.url) : '';
       currentResourceName.value = resource.name;
 
@@ -889,7 +873,7 @@ const handlePageChange = (page: number) => {
   currentEbookPage.value = page;
 };
 const handleSlideChange = (page: number) => { currentSlidePage.value = page; };
-const handleMediaEnded = () => {};
+const handleMediaEnded = () => { };
 const toggleAudioSync = () => { autoPlayAudio.value = !autoPlayAudio.value; };
 
 const handleDocumentPageChange = (page: number) => {
@@ -1109,8 +1093,15 @@ onUnmounted(() => {
 }
 
 @keyframes float {
-  0%, 100% { transform: translateY(0) translateX(0); }
-  50% { transform: translateY(-20px) translateX(10px); }
+
+  0%,
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+
+  50% {
+    transform: translateY(-20px) translateX(10px);
+  }
 }
 
 // 内容切换动画
@@ -1135,12 +1126,15 @@ onUnmounted(() => {
     opacity: 0;
     transform: scale(0.3);
   }
+
   50% {
     transform: scale(1.05);
   }
+
   70% {
     transform: scale(0.9);
   }
+
   100% {
     opacity: 1;
     transform: scale(1);
@@ -1153,6 +1147,7 @@ onUnmounted(() => {
     transform: scale(0);
     opacity: 0.6;
   }
+
   100% {
     transform: scale(2.5);
     opacity: 0;
@@ -1161,15 +1156,32 @@ onUnmounted(() => {
 
 // 摇晃动画
 @keyframes wiggle {
-  0%, 100% { transform: rotate(0deg); }
-  25% { transform: rotate(-5deg); }
-  75% { transform: rotate(5deg); }
+
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(-5deg);
+  }
+
+  75% {
+    transform: rotate(5deg);
+  }
 }
 
 // 闪烁动画
 @keyframes sparkle {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
 }
 
 .kids-content {
@@ -1184,6 +1196,7 @@ onUnmounted(() => {
 }
 
 .content-viewer {
+  position: relative;
   width: 100%;
   height: 100%;
   display: flex;
@@ -1232,7 +1245,7 @@ onUnmounted(() => {
     font-weight: 600;
     margin-bottom: 12px;
     color: #FF8C42;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .empty-hint {
@@ -1283,7 +1296,9 @@ onUnmounted(() => {
     overflow-x: auto;
     padding-bottom: 8px;
 
-    &::-webkit-scrollbar { display: none; }
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .step-group {
@@ -1320,7 +1335,7 @@ onUnmounted(() => {
     white-space: nowrap;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
     &:hover {
       background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
@@ -1369,8 +1384,15 @@ onUnmounted(() => {
   }
 
   @keyframes pulse {
-    0%, 100% { box-shadow: 0 4px 16px rgba(255, 111, 0, 0.4); }
-    50% { box-shadow: 0 6px 24px rgba(255, 111, 0, 0.6); }
+
+    0%,
+    100% {
+      box-shadow: 0 4px 16px rgba(255, 111, 0, 0.4);
+    }
+
+    50% {
+      box-shadow: 0 6px 24px rgba(255, 111, 0, 0.6);
+    }
   }
 
   .step-resources {
@@ -1395,7 +1417,7 @@ onUnmounted(() => {
     white-space: nowrap;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 
     &:hover {
       background: linear-gradient(135deg, #BBDEFB 0%, #90CAF9 100%);
@@ -1421,7 +1443,7 @@ onUnmounted(() => {
     background: linear-gradient(90deg, #FFE0B2 0%, #FFCCBC 100%);
     border-radius: 12px;
     overflow: hidden;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
   .progress-fill {
@@ -1545,7 +1567,9 @@ onUnmounted(() => {
     padding-bottom: 8px;
     flex-wrap: wrap;
 
-    &::-webkit-scrollbar { display: none; }
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .resource-chip {
@@ -1642,13 +1666,13 @@ onUnmounted(() => {
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     min-height: 60px;
 
     &:hover:not(:disabled) {
       background: linear-gradient(135deg, #F5F5F5 0%, #EEEEEE 100%);
       transform: translateY(-2px);
-      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
+      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     }
 
     &:active:not(:disabled) {
@@ -1693,7 +1717,7 @@ onUnmounted(() => {
   :deep(.ant-modal-content) {
     border-radius: 24px;
     overflow: hidden;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
   }
 
   :deep(.ant-modal-header) {
@@ -1741,7 +1765,7 @@ onUnmounted(() => {
     border-radius: 20px;
     overflow: hidden;
     background: white;
-    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     border: 3px solid #FFE0B2;
   }
 
@@ -1751,7 +1775,7 @@ onUnmounted(() => {
       padding: 20px 24px;
       background: white;
       border-radius: 20px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
       border: 2px solid #FFE0B2;
 
       .info-label {
diff --git a/reading-platform-frontend/src/views/teacher/lessons/components/viewers/VideoPlayer.vue b/reading-platform-frontend/src/views/teacher/lessons/components/viewers/VideoPlayer.vue
index 246f1d2..c33ea2f 100644
--- a/reading-platform-frontend/src/views/teacher/lessons/components/viewers/VideoPlayer.vue
+++ b/reading-platform-frontend/src/views/teacher/lessons/components/viewers/VideoPlayer.vue
@@ -1,30 +1,14 @@
 <template>
-  <div
-    class="video-player"
-    ref="playerRef"
-    :class="{
-      'is-fullscreen': isFullscreen,
-      'is-web-fullscreen': isWebFullscreen,
-      'controls-visible': showControls || !isPlaying
-    }"
-    @mousemove="handleMouseMove"
-    @mouseleave="handleMouseLeave"
-  >
+  <div class="video-player" ref="playerRef" :class="{
+    'is-fullscreen': isFullscreen,
+    'is-web-fullscreen': isWebFullscreen,
+    'controls-visible': showControls || !isPlaying
+  }" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
     <!-- 视频容器 -->
     <div class="video-container" @click="togglePlay">
-      <video
-        ref="videoRef"
-        :src="src"
-        :poster="posterUrl"
-        class="video-element"
-        @loadedmetadata="onLoaded"
-        @timeupdate="onTimeUpdate"
-        @ended="onEnded"
-        @play="isPlaying = true"
-        @pause="isPlaying = false"
-        @waiting="loading = true"
-        @canplay="loading = false"
-      />
+      <video ref="videoRef" :src="src" :poster="posterUrl" class="video-element" @loadedmetadata="onLoaded"
+        @timeupdate="onTimeUpdate" @ended="onEnded" @play="isPlaying = true" @pause="isPlaying = false"
+        @waiting="loading = true" @canplay="loading = false" />
     </div>
 
     <!-- 加载中 -->
@@ -86,13 +70,8 @@
               {{ playbackRate }}x
             </button>
             <div class="speed-menu" v-if="showSpeedMenu">
-              <div
-                v-for="speed in speedOptions"
-                :key="speed"
-                class="speed-option"
-                :class="{ active: playbackRate === speed }"
-                @click="setSpeed(speed)"
-              >
+              <div v-for="speed in speedOptions" :key="speed" class="speed-option"
+                :class="{ active: playbackRate === speed }" @click="setSpeed(speed)">
                 {{ speed }}x
               </div>
             </div>
@@ -106,35 +85,18 @@
               <VolumeX v-else :size="20" />
             </button>
             <div class="volume-slider-wrapper">
-              <input
-                type="range"
-                class="volume-slider"
-                :value="volume"
-                min="0"
-                max="1"
-                step="0.05"
-                @input="changeVolume"
-              />
+              <input type="range" class="volume-slider" :value="volume" min="0" max="1" step="0.05"
+                @input="changeVolume" />
             </div>
           </div>
 
           <!-- 循环 -->
-          <button
-            class="ctrl-btn"
-            :class="{ active: isLooping }"
-            @click="toggleLoop"
-            title="循环播放"
-          >
+          <button class="ctrl-btn" :class="{ active: isLooping }" @click="toggleLoop" title="循环播放">
             <Repeat :size="20" />
           </button>
 
           <!-- 画中画 -->
-          <button
-            v-if="supportsPiP"
-            class="ctrl-btn"
-            @click="togglePiP"
-            title="画中画"
-          >
+          <button v-if="supportsPiP" class="ctrl-btn" @click="togglePiP" title="画中画">
             <PictureInPicture2 :size="20" />
           </button>
 
@@ -563,7 +525,9 @@ onUnmounted(() => {
 }
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .play-overlay {