From f288155c8c1254edb6f443843e90754d2ef49774 Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Tue, 24 Mar 2026 11:33:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(KidsMode):=20=E6=B7=BB=E5=8A=A0=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E6=8C=89=E9=92=AE=E5=88=B0=E4=B8=BB=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E5=8C=BA=EF=BC=8C=E4=BD=BF=E7=94=A8=E5=A4=A7=E5=8F=B7=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Made-with: Cursor
---
 .../teacher/lessons/components/KidsMode.vue   | 54 ++++++++++++++++---
 1 file changed, 46 insertions(+), 8 deletions(-)

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 25d815f..0424440 100644
--- a/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue
+++ b/reading-platform-frontend/src/views/teacher/lessons/components/KidsMode.vue
@@ -70,12 +70,10 @@
         </div>
 
         <!-- 空状态 -->
-        <div v-else key="empty" class="empty-content">
-          <div class="empty-icon">
-            <BookOpen :size="80" :stroke-width="1.5" />
-          </div>
-          <div class="empty-text">{{ props.currentLesson?.name || '准备开始' }}</div>
-          <div class="empty-hint">点击下方资源开始播放</div>
+        <div v-else key="empty" class="empty-content"> <button class="play-area-btn"
+            :disabled="allLessonResources.length === 0" @click.stop="playCurrentResource">
+            <Play :size="120" :stroke-width="2.5" />
+          </button>
         </div>
       </Transition>
     </div>
@@ -198,6 +196,7 @@ import {
   VolumeX,
   MonitorPlay,
   Lightbulb,
+  Play,
 } from 'lucide-vue-next';
 import EbookViewer from './viewers/EbookViewer.vue';
 import Player from '@/views/office/player.vue';
@@ -801,6 +800,12 @@ const handleResourceByIndex = (index: number) => {
   }
 };
 
+// 播放当前选中的资源
+const playCurrentResource = () => {
+  if (allLessonResources.value.length === 0) return;
+  handleResourceByIndex(currentResourceIndex.value);
+};
+
 // 上一个资源
 const prevResource = () => {
   if (currentResourceIndex.value > 0) {
@@ -1227,6 +1232,37 @@ onUnmounted(() => {
     opacity: 0.7;
     color: #8D6E63;
   }
+
+  .play-area-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 160px;
+    height: 160px;
+    margin-top: 32px;
+    padding: 0;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #FF9800 0%, #FF6F00 100%);
+    border: 4px solid #E65100;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 8px 32px rgba(255, 111, 0, 0.45);
+
+    &:hover:not(:disabled) {
+      transform: scale(1.08);
+      box-shadow: 0 12px 40px rgba(255, 111, 0, 0.55);
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
 }
 
 // 底部固定导航
@@ -1511,7 +1547,8 @@ onUnmounted(() => {
 
 .resources-section {
   margin-bottom: 16px;
-  padding: 4px 0; /* 为动画留出上下呼吸空间，避免被父级裁剪 */
+  padding: 4px 0;
+  /* 为动画留出上下呼吸空间，避免被父级裁剪 */
 
   .section-label {
     display: flex;
@@ -1533,7 +1570,8 @@ onUnmounted(() => {
     display: flex;
     gap: 16px;
     overflow-x: auto;
-    padding: 16px 12px; /* 增加内边距，为 scale/shadow 动画留出空间 */
+    padding: 16px 12px;
+    /* 增加内边距，为 scale/shadow 动画留出空间 */
     flex-wrap: wrap;
 
     &::-webkit-scrollbar {