From f5c5feaff5e27b36b812f80a78014e6899cd1709 Mon Sep 17 00:00:00 2001
From: zhonghua <zhonghua>
Date: Thu, 26 Mar 2026 15:00:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:UI=E5=B8=83=E5=B1=80=E9=94=99=E4=BD=8D?=
 =?UTF-8?q?=E6=8E=92=E7=89=88=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/course/LessonConfigPanel.vue   | 301 +++++++-----------
 1 file changed, 120 insertions(+), 181 deletions(-)

diff --git a/lesingle-edu-reading-platform-frontend/src/components/course/LessonConfigPanel.vue b/lesingle-edu-reading-platform-frontend/src/components/course/LessonConfigPanel.vue
index c428704..b670084 100644
--- a/lesingle-edu-reading-platform-frontend/src/components/course/LessonConfigPanel.vue
+++ b/lesingle-edu-reading-platform-frontend/src/components/course/LessonConfigPanel.vue
@@ -1,199 +1,128 @@
 <template>
   <div class="lesson-config-panel">
-    <a-form
-      ref="formRef"
-      :model="lessonData"
-      :rules="formRules"
-      :label-col="{ span: 24 }"
-      :wrapper-col="{ span: 24 }"
-      layout="vertical"
-    >
-    <!-- 基本信息 -->
-    <a-card size="small" title="基本信息" class="section-card">
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="课程名称" name="name">
-            <a-input v-model:value="lessonData.name" placeholder="请输入课程名称" @change="handleChange" />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="课程时长" name="duration" :extra="`建议 ${minDuration}-${maxDuration} 分钟`">
-            <a-input-number
-              v-model:value="lessonData.duration"
-              :min="minDuration"
-              :max="maxDuration"
-              style="width: 100%"
-              @change="handleChange"
-            />
-            <a-form-item-rest>
-              <span class="duration-unit">分钟</span>
-            </a-form-item-rest>
-          </a-form-item>
-        </a-col>
-      </a-row>
-      <a-form-item label="课程描述">
-        <a-textarea
-          v-model:value="lessonData.description"
-          :rows="2"
-          :maxlength="500"
-          show-count
-          placeholder="请输入课程描述（可选）"
-          @change="handleChange"
-        />
-      </a-form-item>
-    </a-card>
-
-    <!-- 核心资源（导入课/集体课/领域课显示） -->
-    <a-card v-if="showResources" size="small" class="section-card">
-      <template #title>
-        <span>核心资源</span>
-      </template>
-      <div class="field-hint">按需上传（动画/课件/电子绘本，可选）</div>
-      <div class="resource-upload-row">
+    <a-form ref="formRef" :model="lessonData" :rules="formRules" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }"
+      layout="vertical">
+      <!-- 基本信息 -->
+      <a-card size="small" title="基本信息" class="section-card">
         <a-row :gutter="16">
-          <a-col :span="8">
-            <a-form-item label="绘本动画" :name="undefined">
-              <FileUploader
-                v-model:file-path="lessonData.videoPath"
-                v-model:file-name="lessonData.videoName"
-                file-type="video"
-                :max-size="200"
-                @change="handleChange"
-              />
+          <a-col :span="12">
+            <a-form-item label="课程名称" name="name">
+              <a-input v-model:value="lessonData.name" placeholder="请输入课程名称" @change="handleChange" />
             </a-form-item>
           </a-col>
-          <a-col :span="8">
-            <a-form-item label="教学课件" :name="undefined">
-              <FileUploader
-                v-model:file-path="lessonData.pptPath"
-                v-model:file-name="lessonData.pptName"
-                file-type="ppt"
-                :max-size="100"
-                @change="handleChange"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="电子绘本" :name="undefined">
-              <FileUploader
-                v-model:file-path="lessonData.pdfPath"
-                v-model:file-name="lessonData.pdfName"
-                file-type="pdf"
-                :max-size="100"
-                @change="handleChange"
-              />
+          <a-col :span="12">
+            <a-form-item label="课程时长" name="duration" :extra="`建议 ${minDuration}-${maxDuration} 分钟`">
+              <div class="duration-row">
+                <a-input-number v-model:value="lessonData.duration" :min="minDuration" :max="maxDuration"
+                  class="duration-input" @change="handleChange" />
+                <span class="duration-unit">分钟</span>
+              </div>
             </a-form-item>
           </a-col>
         </a-row>
-      </div>
-    </a-card>
+        <a-form-item label="课程描述">
+          <a-textarea v-model:value="lessonData.description" :rows="2" :maxlength="500" show-count
+            placeholder="请输入课程描述（可选）" @change="handleChange" />
+        </a-form-item>
+      </a-card>
 
-    <!-- 教学目标 & 教学准备 -->
-    <a-card size="small" class="section-card">
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item label="教学目标" name="objectives">
-            <a-textarea
-              v-model:value="lessonData.objectives"
-              :rows="4"
-              :maxlength="1500"
-              show-count
-              placeholder="请输入教学目标，如：
+      <!-- 核心资源（导入课/集体课/领域课显示） -->
+      <a-card v-if="showResources" size="small" class="section-card">
+        <template #title>
+          <span>核心资源</span>
+        </template>
+        <div class="field-hint">按需上传（动画/课件/电子绘本，可选）</div>
+        <div class="resource-upload-row">
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="绘本动画" :name="undefined">
+                <FileUploader v-model:file-path="lessonData.videoPath" v-model:file-name="lessonData.videoName"
+                  file-type="video" :max-size="200" @change="handleChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="教学课件" :name="undefined">
+                <FileUploader v-model:file-path="lessonData.pptPath" v-model:file-name="lessonData.pptName"
+                  file-type="ppt" :max-size="100" @change="handleChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="电子绘本" :name="undefined">
+                <FileUploader v-model:file-path="lessonData.pdfPath" v-model:file-name="lessonData.pdfName"
+                  file-type="pdf" :max-size="100" @change="handleChange" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+      </a-card>
+
+      <!-- 教学目标 & 教学准备 -->
+      <a-card size="small" class="section-card">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="教学目标" name="objectives">
+              <a-textarea v-model:value="lessonData.objectives" :rows="4" :maxlength="1500" show-count placeholder="请输入教学目标，如：
 1. 理解故事主要内容
 2. 认识重点词汇
-3. 培养阅读兴趣"
-              @change="handleChange"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="教学准备" name="preparation">
-            <a-textarea
-              v-model:value="lessonData.preparation"
-              :rows="4"
-              :maxlength="1500"
-              show-count
-              placeholder="请输入教学准备，如：
+3. 培养阅读兴趣" @change="handleChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="教学准备" name="preparation">
+              <a-textarea v-model:value="lessonData.preparation" :rows="4" :maxlength="1500" show-count placeholder="请输入教学准备，如：
 - 绘本PPT
 - 相关图片/视频
-- 教具材料"
-              @change="handleChange"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-card>
+- 教具材料" @change="handleChange" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-card>
 
-    <!-- 教学环节 -->
-    <a-card size="small" class="section-card">
-      <template #title>
-        <span>
-          教学环节
-          <span v-if="lessonType !== 'INTRO'" class="required-mark">*</span>
-        </span>
-      </template>
-      <div class="field-hint">
-        <span v-if="lessonType === 'INTRO'">可选配置，可添加教学环节</span>
-        <span v-else>至少添加一个环节，每个环节需填写名称、内容、目标</span>
-      </div>
-      <a-form-item :name="lessonType !== 'INTRO' ? 'steps' : undefined">
-        <a-form-item-rest>
-          <LessonStepsEditor
-            v-model="lessonData.steps"
-            :show-template="showTemplate"
-            @change="handleChange"
-          />
-        </a-form-item-rest>
-      </a-form-item>
-    </a-card>
+      <!-- 教学环节 -->
+      <a-card size="small" class="section-card">
+        <template #title>
+          <span>
+            教学环节
+            <span v-if="lessonType !== 'INTRO'" class="required-mark">*</span>
+          </span>
+        </template>
+        <div class="field-hint">
+          <span v-if="lessonType === 'INTRO'">可选配置，可添加教学环节</span>
+          <span v-else>至少添加一个环节，每个环节需填写名称、内容、目标</span>
+        </div>
+        <a-form-item :name="lessonType !== 'INTRO' ? 'steps' : undefined">
+          <a-form-item-rest>
+            <LessonStepsEditor v-model="lessonData.steps" :show-template="showTemplate" @change="handleChange" />
+          </a-form-item-rest>
+        </a-form-item>
+      </a-card>
 
-    <!-- 教学延伸 & 教学反思（仅集体课/领域课显示） -->
-    <a-card v-if="showExtension" size="small" class="section-card">
-      <a-row :gutter="16">
-        <a-col :span="12">
-          <a-form-item
-            label="教学延伸"
-            :name="extensionRequired ? 'extension' : undefined"
-            :extra="extensionRequired ? '必填（集体课要求）' : '可选'"
-          >
-            <a-textarea
-              v-model:value="lessonData.extension"
-              :rows="3"
-              :maxlength="1500"
-              show-count
-              :placeholder="extensionRequired ? '请输入教学延伸活动建议（必填）' : '请输入教学延伸活动建议（可选）'"
-              @change="handleChange"
-            />
-          </a-form-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-item label="教学反思">
-            <a-textarea
-              v-model:value="lessonData.reflection"
-              :rows="3"
-              :maxlength="1500"
-              show-count
-              placeholder="请输入教学反思提示（可选）"
-              @change="handleChange"
-            />
-          </a-form-item>
-        </a-col>
-      </a-row>
-    </a-card>
+      <!-- 教学延伸 & 教学反思（仅集体课/领域课显示） -->
+      <a-card v-if="showExtension" size="small" class="section-card">
+        <a-row :gutter="16">
+          <a-col :span="12">
+            <a-form-item label="教学延伸" :name="extensionRequired ? 'extension' : undefined"
+              :extra="extensionRequired ? '必填（集体课要求）' : '可选'">
+              <a-textarea v-model:value="lessonData.extension" :rows="3" :maxlength="1500" show-count
+                :placeholder="extensionRequired ? '请输入教学延伸活动建议（必填）' : '请输入教学延伸活动建议（可选）'" @change="handleChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-item label="教学反思">
+              <a-textarea v-model:value="lessonData.reflection" :rows="3" :maxlength="1500" show-count
+                placeholder="请输入教学反思提示（可选）" @change="handleChange" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-card>
 
-    <!-- 测评工具 -->
-    <a-card size="small" title="测评工具" class="section-card">
-      <a-form-item label="测评内容">
-        <a-textarea
-          v-model:value="lessonData.assessmentData"
-          :rows="3"
-          :maxlength="1500"
-          show-count
-          placeholder="请输入测评要点或测评标准（可选）"
-          @change="handleChange"
-        />
-      </a-form-item>
-    </a-card>
+      <!-- 测评工具 -->
+      <a-card size="small" title="测评工具" class="section-card">
+        <a-form-item label="测评内容">
+          <a-textarea v-model:value="lessonData.assessmentData" :rows="3" :maxlength="1500" show-count
+            placeholder="请输入测评要点或测评标准（可选）" @change="handleChange" />
+        </a-form-item>
+      </a-card>
     </a-form>
   </div>
 </template>
@@ -409,10 +338,20 @@ defineExpose({
   }
 
   .duration-unit {
-    margin-left: 8px;
     color: #666;
   }
 
+  .duration-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .duration-input {
+    flex: 1;
+    width: 100%;
+  }
+
   .required-mark {
     color: #ff4d4f;
     margin-left: 2px;