feat(KidsMode): 添加播放按钮到主内容区，使用大号播放图标

Made-with: Cursor

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 {