add comment;

src/views/Editor/EnglishSpeaking/SpeakingPanel.vue

@@ -1,8 +1,20 @@
+<!--
+  SpeakingPanel — 英语口语练习的主面板容器组件
+
+  职责：
+  1. 管理三层页面导航状态（layer1 → layer2 → config）
+  2. 渲染面包屑导航，支持任意层级回退
+  3. 根据 pageMode 切换展示不同的子页面组件
+
+  页面流转：
+  layer1 (首页：选课本/年级/单元) → layer2 (口语练习列表) → config (话题讨论配置)
+-->
 <template>
   <div class="speaking-panel">
-    <!-- 头部面包屑 -->
+    <!-- 面包屑导航：根据当前 pageMode 展示不同层级的路径 -->
     <div class="panel-header">
       <div class="breadcrumb">
+        <!-- layer1: 仅显示标题，无回退链接 -->
         <template v-if="pageMode === 'layer1'">
           <span class="breadcrumb-title">{{ lang.ssEnglishSubject }}</span>
         </template>
@@ -11,6 +23,7 @@
           <svg class="breadcrumb-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M9 18l6-6-6-6" />
           </svg>
+          <!-- config 层：显示完整三级面包屑 英语 > 口语 > 话题讨论 -->
           <template v-if="pageMode === 'config'">
             <button class="breadcrumb-link" @click="goLayer2">{{ lang.ssSpeaking }}</button>
             <svg class="breadcrumb-arrow" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -18,6 +31,7 @@
             </svg>
             <span class="breadcrumb-current">{{ lang.ssTopicDiscussion }}</span>
           </template>
+          <!-- layer2：显示两级面包屑 英语 > 口语 -->
           <template v-else>
             <span class="breadcrumb-current">{{ lang.ssSpeaking }}</span>
           </template>
@@ -25,7 +39,7 @@
       </div>
     </div>
 
-    <!-- 内容区域 -->
+    <!-- 内容区域：根据 pageMode 切换子页面 -->
     <div class="panel-body">
       <Layer1Home
         v-if="pageMode === 'layer1'"
@@ -58,21 +72,27 @@ import Layer1Home from './layers/Layer1Home.vue'
 import Layer2Speaking from './layers/Layer2Speaking.vue'
 import TopicDiscussionConfig from './configs/TopicDiscussionConfig.vue'
 
+/** 当前页面层级：layer1(首页) → layer2(口语列表) → config(配置页) */
 const pageMode = ref<PageMode>('layer1')
+
+// 课本筛选条件的默认值（上海英语·五年级上·Unit2），供开发/演示用
 const selectedTextbook = ref('shep')
 const selectedGrade = ref('grade5-1')
 const selectedUnit = ref('SHEP-5-上-Unit2')
 
+/** Layer1 选择练习类型后的回调，目前仅 speaking 类型会触发页面跳转 */
 const handleSelectExerciseType = (type: ExerciseType) => {
   if (type === 'speaking') {
     pageMode.value = 'layer2'
   }
 }
 
+/** Layer2 点击某个口语话题后，进入配置页 */
 const handleOpenConfig = () => {
   pageMode.value = 'config'
 }
 
+// ---- 面包屑导航回退 ----
 const goHome = () => {
   pageMode.value = 'layer1'
 }