fix:UI布局错位排版优化
This commit is contained in:
zhonghua
parent
ad5963be79
commit
f5c5feaff5
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user