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