tonytech/kindergarten_java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:课程包详情文案换行样式优化

Browse Source
This commit is contained in:
zhonghua 2026-03-31 11:07:53 +08:00
parent 579cb0b590
commit ac802d831f
14 changed files with 168 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lesingle-edu-reading-platform-frontend/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "lesingle-edu-reading-platform-frontend", "name": "lesingle-edu-reading-platform-frontend",
"version": "1.00.02", "version": "1.00.03",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

12
lesingle-edu-reading-platform-frontend/src/components/course/LessonConfigPanel.vue
View File

@ -21,7 +21,7 @@
</a-col> </a-col>
</a-row> </a-row>
<a-form-item label="课程描述"> <a-form-item label="课程描述">
<a-textarea v-model:value="lessonData.description" :rows="2" :maxlength="500" show-count <a-textarea v-model:value="lessonData.description" :rows="6" :maxlength="500" show-count
placeholder="请输入课程描述（可选）" @change="handleChange" /> placeholder="请输入课程描述（可选）" @change="handleChange" />
</a-form-item> </a-form-item>
</a-card> </a-card>
@ -61,7 +61,7 @@
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="12"> <a-col :span="12">
<a-form-item label="教学目标" name="objectives"> <a-form-item label="教学目标" name="objectives">
<a-textarea v-model:value="lessonData.objectives" :rows="4" :maxlength="1500" show-count placeholder="请输入教学目标，如： <a-textarea v-model:value="lessonData.objectives" :rows="6" :maxlength="1500" show-count placeholder="请输入教学目标，如：
1. 理解故事主要内容 1. 理解故事主要内容
2. 认识重点词汇 2. 认识重点词汇
3. 培养阅读兴趣" @change="handleChange" /> 3. 培养阅读兴趣" @change="handleChange" />
@ -69,7 +69,7 @@
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="教学准备" name="preparation"> <a-form-item label="教学准备" name="preparation">
<a-textarea v-model:value="lessonData.preparation" :rows="4" :maxlength="1500" show-count placeholder="请输入教学准备，如： <a-textarea v-model:value="lessonData.preparation" :rows="6" :maxlength="1500" show-count placeholder="请输入教学准备，如：
- 绘本PPT - 绘本PPT
- 相关图片/视频 - 相关图片/视频
- 教具材料" @change="handleChange" /> - 教具材料" @change="handleChange" />
@ -103,13 +103,13 @@
<a-col :span="12"> <a-col :span="12">
<a-form-item label="教学延伸" :name="extensionRequired ? 'extension' : undefined" <a-form-item label="教学延伸" :name="extensionRequired ? 'extension' : undefined"
:extra="extensionRequired ? '必填（集体课要求）' : '可选'"> :extra="extensionRequired ? '必填（集体课要求）' : '可选'">
<a-textarea v-model:value="lessonData.extension" :rows="3" :maxlength="1500" show-count <a-textarea v-model:value="lessonData.extension" :rows="6" :maxlength="1500" show-count
:placeholder="extensionRequired ? '请输入教学延伸活动建议（必填）' : '请输入教学延伸活动建议（可选）'" @change="handleChange" /> :placeholder="extensionRequired ? '请输入教学延伸活动建议（必填）' : '请输入教学延伸活动建议（可选）'" @change="handleChange" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-item label="教学反思"> <a-form-item label="教学反思">
<a-textarea v-model:value="lessonData.reflection" :rows="3" :maxlength="1500" show-count <a-textarea v-model:value="lessonData.reflection" :rows="6" :maxlength="1500" show-count
placeholder="请输入教学反思提示（可选）" @change="handleChange" /> placeholder="请输入教学反思提示（可选）" @change="handleChange" />
</a-form-item> </a-form-item>
</a-col> </a-col>
@ -119,7 +119,7 @@
<!-- 测评工具 --> <!-- 测评工具 -->
<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 v-model:value="lessonData.assessmentData" :rows="3" :maxlength="1500" show-count <a-textarea v-model:value="lessonData.assessmentData" :rows="6" :maxlength="1500" show-count
placeholder="请输入测评要点或测评标准（可选）" @change="handleChange" /> placeholder="请输入测评要点或测评标准（可选）" @change="handleChange" />
</a-form-item> </a-form-item>
</a-card> </a-card>

42
lesingle-edu-reading-platform-frontend/src/components/course/LessonStepsEditor.vue
View File

@ -12,37 +12,20 @@
</div> </div>
<div v-else class="steps-list"> <div v-else class="steps-list">
<div <div v-for="(step, index) in steps" :key="step.id || step.tempId" class="step-item">
v-for="(step, index) in steps"
:key="step.id || step.tempId"
class="step-item"
>
<div class="step-header"> <div class="step-header">
<span class="step-order">{{ index + 1 }}</span> <span class="step-order">{{ index + 1 }}</span>
<div class="step-name-field"> <div class="step-name-field">
<span class="field-label required">环节名称</span> <span class="field-label required">环节名称</span>
<a-input <a-input v-model:value="step.name" :maxlength="200" placeholder="如：导入、讲解、练习等" style="flex: 1"
v-model:value="step.name" @change="handleChange" />
placeholder="如：导入、讲解、练习等"
style="flex: 1"
@change="handleChange"
/>
</div> </div>
<span class="step-duration"> <span class="step-duration">
<a-input-number <a-input-number v-model:value="step.duration" :min="1" :max="60" size="small" style="width: 70px"
v-model:value="step.duration" @change="handleChange" />
:min="1"
:max="60"
size="small"
style="width: 70px"
@change="handleChange"
/>
分钟 分钟
</span> </span>
<a-popconfirm <a-popconfirm title="确定删除此环节吗？" @confirm="removeStep(index)">
title="确定删除此环节吗？"
@confirm="removeStep(index)"
>
<a-button type="link" size="small" danger> <a-button type="link" size="small" danger>
<DeleteOutlined /> <DeleteOutlined />
</a-button> </a-button>
@ -51,21 +34,12 @@
<div class="step-content"> <div class="step-content">
<span class="field-label required">环节内容</span> <span class="field-label required">环节内容</span>
<a-textarea <a-textarea v-model:value="step.content" placeholder="请输入教学环节的具体内容和操作步骤" :rows="6" @change="handleChange" />
v-model:value="step.content"
placeholder="请输入教学环节的具体内容和操作步骤"
:rows="3"
@change="handleChange"
/>
</div> </div>
<div class="step-objective"> <div class="step-objective">
<span class="field-label required">教学目标</span> <span class="field-label required">教学目标</span>
<a-input <a-input v-model:value="step.objective" :maxlength="200" placeholder="请输入该环节的教学目标" @change="handleChange">
v-model:value="step.objective"
placeholder="请输入该环节的教学目标"
@change="handleChange"
>
<template #prefix> <template #prefix>
<AimOutlined style="color: #bfbfbf" /> <AimOutlined style="color: #bfbfbf" />
</template> </template>

42
lesingle-edu-reading-platform-frontend/src/views/admin/courses/CourseDetailView.vue
View File

@ -10,8 +10,9 @@
<a-button @click="viewStats"> <a-button @click="viewStats">
<BarChartOutlined /> 数据 <BarChartOutlined /> 数据
</a-button> </a-button>
<a-popconfirm v-if="course.status === 'DRAFT' || course.status === 'UNSUBMITTED' || course.status === 'ARCHIVED'" title="确定删除此课程包吗？" <a-popconfirm
@confirm="deleteCourse"> v-if="course.status === 'DRAFT' || course.status === 'UNSUBMITTED' || course.status === 'ARCHIVED'"
title="确定删除此课程包吗？" @confirm="deleteCourse">
<a-button danger> <a-button danger>
<DeleteOutlined /> 删除 <DeleteOutlined /> 删除
</a-button> </a-button>
@ -79,7 +80,7 @@
</div> </div>
<div class="info-row" v-if="course.coreContent"> <div class="info-row" v-if="course.coreContent">
<span class="info-label">核心内容</span> <span class="info-label">核心内容</span>
<span class="info-value">{{ course.coreContent }}</span> <span class="info-value break-all">{{ course.coreContent }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -145,28 +146,28 @@
<div class="section-body"> <div class="section-body">
<a-tabs v-model:activeKey="activeIntroTab" type="card"> <a-tabs v-model:activeKey="activeIntroTab" type="card">
<a-tab-pane key="summary" tab="课程简介" v-if="course.introSummary"> <a-tab-pane key="summary" tab="课程简介" v-if="course.introSummary">
<div class="intro-content">{{ course.introSummary }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introSummary }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="highlights" tab="课程亮点" v-if="course.introHighlights"> <a-tab-pane key="highlights" tab="课程亮点" v-if="course.introHighlights">
<div class="intro-content">{{ course.introHighlights }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introHighlights }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="goals" tab="课程总目标" v-if="course.introGoals"> <a-tab-pane key="goals" tab="课程总目标" v-if="course.introGoals">
<div class="intro-content">{{ course.introGoals }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introGoals }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="schedule" tab="内容安排" v-if="course.introSchedule"> <a-tab-pane key="schedule" tab="内容安排" v-if="course.introSchedule">
<div class="intro-content">{{ course.introSchedule }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introSchedule }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="keyPoints" tab="重难点" v-if="course.introKeyPoints"> <a-tab-pane key="keyPoints" tab="重难点" v-if="course.introKeyPoints">
<div class="intro-content">{{ course.introKeyPoints }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introKeyPoints }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="methods" tab="教学方法" v-if="course.introMethods"> <a-tab-pane key="methods" tab="教学方法" v-if="course.introMethods">
<div class="intro-content">{{ course.introMethods }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introMethods }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="evaluation" tab="评价方式" v-if="course.introEvaluation"> <a-tab-pane key="evaluation" tab="评价方式" v-if="course.introEvaluation">
<div class="intro-content">{{ course.introEvaluation }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introEvaluation }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="notes" tab="注意事项" v-if="course.introNotes"> <a-tab-pane key="notes" tab="注意事项" v-if="course.introNotes">
<div class="intro-content">{{ course.introNotes }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introNotes }}</div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
@ -200,7 +201,7 @@
</span> </span>
</div> </div>
<div class="section-body"> <div class="section-body">
<div class="intro-content">{{ course.environmentConstruction }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.environmentConstruction }}</div>
</div> </div>
</div> </div>
@ -220,7 +221,7 @@
<div class="lesson-type-badge" :style="{ background: getLessonTypeBgColor(lesson.lessonType) }"> <div class="lesson-type-badge" :style="{ background: getLessonTypeBgColor(lesson.lessonType) }">
{{ translateLessonType(lesson.lessonType) }} {{ translateLessonType(lesson.lessonType) }}
</div> </div>
<div class="lesson-name">{{ lesson.name }}</div> <div class="lesson-name break-all">{{ lesson.name }}</div>
<div class="lesson-duration">{{ lesson.duration }}分钟</div> <div class="lesson-duration">{{ lesson.duration }}分钟</div>
</div> </div>
@ -228,13 +229,13 @@
<!-- 教学目标 --> <!-- 教学目标 -->
<div class="lesson-section" v-if="lesson.objectives"> <div class="lesson-section" v-if="lesson.objectives">
<div class="lesson-section-title">教学目标</div> <div class="lesson-section-title">教学目标</div>
<div class="lesson-section-content">{{ lesson.objectives }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.objectives }}</div>
</div> </div>
<!-- 教学准备 --> <!-- 教学准备 -->
<div class="lesson-section" v-if="lesson.preparation"> <div class="lesson-section" v-if="lesson.preparation">
<div class="lesson-section-title">教学准备</div> <div class="lesson-section-title">教学准备</div>
<div class="lesson-section-content">{{ lesson.preparation }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.preparation }}</div>
</div> </div>
<!-- 核心资源 --> <!-- 核心资源 -->
@ -269,10 +270,11 @@
<div v-for="(step, index) in lesson.steps" :key="step.id || index" class="step-item"> <div v-for="(step, index) in lesson.steps" :key="step.id || index" class="step-item">
<div class="step-dot">{{ index + 1 }}</div> <div class="step-dot">{{ index + 1 }}</div>
<div class="step-content"> <div class="step-content">
<div class="step-name">{{ step.name }}</div> <div class="step-nam break-all">{{ step.name }}</div>
<div class="step-duration">{{ step.duration }}分钟</div> <div class="step-duration">{{ step.duration }}分钟</div>
<div class="step-info" v-if="step.objective">目标：{{ step.objective }}</div> <div class="step-info break-all" v-if="step.objective">目标：{{ step.objective }}</div>
<div class="step-info" v-if="step.content">{{ step.content }}</div> <div class="step-info break-all whitespace-pre-wrap" v-if="step.content">{{ step.content }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -281,13 +283,13 @@
<!-- 教学延伸 --> <!-- 教学延伸 -->
<div class="lesson-section" v-if="lesson.extension"> <div class="lesson-section" v-if="lesson.extension">
<div class="lesson-section-title">教学延伸</div> <div class="lesson-section-title">教学延伸</div>
<div class="lesson-section-content">{{ lesson.extension }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.extension }}</div>
</div> </div>
<!-- 教学反思 --> <!-- 教学反思 -->
<div class="lesson-section" v-if="lesson.reflection"> <div class="lesson-section" v-if="lesson.reflection">
<div class="lesson-section-title">教学反思</div> <div class="lesson-section-title">教学反思</div>
<div class="lesson-section-content">{{ lesson.reflection }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.reflection }}</div>
</div> </div>
</div> </div>
</div> </div>

41
lesingle-edu-reading-platform-frontend/src/views/school/courses/CourseDetailView.vue
View File

@ -75,7 +75,7 @@
</div> </div>
<div class="info-row" v-if="course.coreContent"> <div class="info-row" v-if="course.coreContent">
<span class="info-label">核心内容</span> <span class="info-label">核心内容</span>
<span class="info-value">{{ course.coreContent }}</span> <span class="info-value break-all">{{ course.coreContent }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -142,28 +142,28 @@
<div class="section-body"> <div class="section-body">
<a-tabs v-model:activeKey="activeIntroTab" type="card"> <a-tabs v-model:activeKey="activeIntroTab" type="card">
<a-tab-pane key="summary" tab="课程简介" v-if="course.introSummary"> <a-tab-pane key="summary" tab="课程简介" v-if="course.introSummary">
<div class="intro-content">{{ course.introSummary }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introSummary }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="highlights" tab="课程亮点" v-if="course.introHighlights"> <a-tab-pane key="highlights" tab="课程亮点" v-if="course.introHighlights">
<div class="intro-content">{{ course.introHighlights }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introHighlights }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="goals" tab="课程总目标" v-if="course.introGoals"> <a-tab-pane key="goals" tab="课程总目标" v-if="course.introGoals">
<div class="intro-content">{{ course.introGoals }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introGoals }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="schedule" tab="内容安排" v-if="course.introSchedule"> <a-tab-pane key="schedule" tab="内容安排" v-if="course.introSchedule">
<div class="intro-content">{{ course.introSchedule }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introSchedule }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="keyPoints" tab="重难点" v-if="course.introKeyPoints"> <a-tab-pane key="keyPoints" tab="重难点" v-if="course.introKeyPoints">
<div class="intro-content">{{ course.introKeyPoints }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introKeyPoints }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="methods" tab="教学方法" v-if="course.introMethods"> <a-tab-pane key="methods" tab="教学方法" v-if="course.introMethods">
<div class="intro-content">{{ course.introMethods }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introMethods }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="evaluation" tab="评价方式" v-if="course.introEvaluation"> <a-tab-pane key="evaluation" tab="评价方式" v-if="course.introEvaluation">
<div class="intro-content">{{ course.introEvaluation }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introEvaluation }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="notes" tab="注意事项" v-if="course.introNotes"> <a-tab-pane key="notes" tab="注意事项" v-if="course.introNotes">
<div class="intro-content">{{ course.introNotes }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introNotes }}</div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
@ -197,7 +197,7 @@
</span> </span>
</div> </div>
<div class="section-body"> <div class="section-body">
<div class="intro-content">{{ course.environmentConstruction }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.environmentConstruction }}</div>
</div> </div>
</div> </div>
@ -217,7 +217,7 @@
<div class="lesson-type-badge" :style="{ background: getLessonTypeBgColor(lesson.lessonType) }"> <div class="lesson-type-badge" :style="{ background: getLessonTypeBgColor(lesson.lessonType) }">
{{ translateLessonType(lesson.lessonType) }} {{ translateLessonType(lesson.lessonType) }}
</div> </div>
<div class="lesson-name">{{ lesson.name }}</div> <div class="lesson-name break-all">{{ lesson.name }}</div>
<div class="lesson-duration">{{ lesson.duration }}分钟</div> <div class="lesson-duration">{{ lesson.duration }}分钟</div>
</div> </div>
@ -225,13 +225,13 @@
<!-- 教学目标 --> <!-- 教学目标 -->
<div class="lesson-section" v-if="lesson.objectives"> <div class="lesson-section" v-if="lesson.objectives">
<div class="lesson-section-title">教学目标</div> <div class="lesson-section-title">教学目标</div>
<div class="lesson-section-content">{{ lesson.objectives }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.objectives }}</div>
</div> </div>
<!-- 教学准备 --> <!-- 教学准备 -->
<div class="lesson-section" v-if="lesson.preparation"> <div class="lesson-section" v-if="lesson.preparation">
<div class="lesson-section-title">教学准备</div> <div class="lesson-section-title">教学准备</div>
<div class="lesson-section-content">{{ lesson.preparation }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.preparation }}</div>
</div> </div>
<!-- 核心资源 --> <!-- 核心资源 -->
@ -266,10 +266,11 @@
<div v-for="(step, index) in lesson.steps" :key="step.id || index" class="step-item"> <div v-for="(step, index) in lesson.steps" :key="step.id || index" class="step-item">
<div class="step-dot">{{ index + 1 }}</div> <div class="step-dot">{{ index + 1 }}</div>
<div class="step-content"> <div class="step-content">
<div class="step-name">{{ step.name }}</div> <div class="step-name break-all">{{ step.name }}</div>
<div class="step-duration">{{ step.duration }}分钟</div> <div class="step-duration">{{ step.duration }}分钟</div>
<div class="step-info" v-if="step.objective">目标：{{ step.objective }}</div> <div class="step-info break-all" v-if="step.objective">目标：{{ step.objective }}</div>
<div class="step-info" v-if="step.content">{{ step.content }}</div> <div class="step-info break-all whitespace-pre-wrap" v-if="step.content">{{ step.content }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -278,13 +279,13 @@
<!-- 教学延伸 --> <!-- 教学延伸 -->
<div class="lesson-section" v-if="lesson.extension"> <div class="lesson-section" v-if="lesson.extension">
<div class="lesson-section-title ">教学延伸</div> <div class="lesson-section-title ">教学延伸</div>
<div class="lesson-section-content">{{ lesson.extension }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.extension }}</div>
</div> </div>
<!-- 教学反思 --> <!-- 教学反思 -->
<div class="lesson-section" v-if="lesson.reflection"> <div class="lesson-section" v-if="lesson.reflection">
<div class="lesson-section-title ">教学反思</div> <div class="lesson-section-title ">教学反思</div>
<div class="lesson-section-content">{{ lesson.reflection }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.reflection }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -379,7 +380,9 @@
<span class="feedback-date">{{ formatDate(feedback.createdAt) }}</span> <span class="feedback-date">{{ formatDate(feedback.createdAt) }}</span>
<a-rate :value="feedback.rating" disabled style="font-size: 12px; margin-left: 8px;" /> <a-rate :value="feedback.rating" disabled style="font-size: 12px; margin-left: 8px;" />
</div> </div>
<div class="feedback-content" v-if="feedback.content">{{ feedback.content }}</div> <div class="feedback-content break-all whitespace-pre-wrap" v-if="feedback.content">{{
feedback.content }}
</div>
</div> </div>
</div> </div>
</div> </div>

125
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/CourseDetailView.vue
View File

@ -81,7 +81,7 @@
</div> </div>
<div class="info-row" v-if="course.coreContent"> <div class="info-row" v-if="course.coreContent">
<span class="info-label">核心内容</span> <span class="info-label">核心内容</span>
<span class="info-value">{{ course.coreContent }}</span> <span class="info-value break-all whitespace-pre-wrap">{{ course.coreContent }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -148,28 +148,28 @@
<div class="section-body"> <div class="section-body">
<a-tabs v-model:activeKey="activeIntroTab" type="card"> <a-tabs v-model:activeKey="activeIntroTab" type="card">
<a-tab-pane key="summary" tab="课程简介" v-if="course.introSummary"> <a-tab-pane key="summary" tab="课程简介" v-if="course.introSummary">
<div class="intro-content">{{ course.introSummary }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introSummary }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="highlights" tab="课程亮点" v-if="course.introHighlights"> <a-tab-pane key="highlights" tab="课程亮点" v-if="course.introHighlights">
<div class="intro-content">{{ course.introHighlights }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introHighlights }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="goals" tab="课程总目标" v-if="course.introGoals"> <a-tab-pane key="goals" tab="课程总目标" v-if="course.introGoals">
<div class="intro-content">{{ course.introGoals }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introGoals }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="schedule" tab="内容安排" v-if="course.introSchedule"> <a-tab-pane key="schedule" tab="内容安排" v-if="course.introSchedule">
<div class="intro-content">{{ course.introSchedule }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introSchedule }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="keyPoints" tab="重难点" v-if="course.introKeyPoints"> <a-tab-pane key="keyPoints" tab="重难点" v-if="course.introKeyPoints">
<div class="intro-content">{{ course.introKeyPoints }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introKeyPoints }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="methods" tab="教学方法" v-if="course.introMethods"> <a-tab-pane key="methods" tab="教学方法" v-if="course.introMethods">
<div class="intro-content">{{ course.introMethods }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introMethods }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="evaluation" tab="评价方式" v-if="course.introEvaluation"> <a-tab-pane key="evaluation" tab="评价方式" v-if="course.introEvaluation">
<div class="intro-content">{{ course.introEvaluation }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introEvaluation }}</div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="notes" tab="注意事项" v-if="course.introNotes"> <a-tab-pane key="notes" tab="注意事项" v-if="course.introNotes">
<div class="intro-content">{{ course.introNotes }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.introNotes }}</div>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</div> </div>
@ -203,7 +203,7 @@
</span> </span>
</div> </div>
<div class="section-body"> <div class="section-body">
<div class="intro-content">{{ course.environmentConstruction }}</div> <div class="intro-content break-all whitespace-pre-wrap">{{ course.environmentConstruction }}</div>
</div> </div>
</div> </div>
@ -217,17 +217,13 @@
</div> </div>
<div class="section-body"> <div class="section-body">
<div class="lesson-cards"> <div class="lesson-cards">
<div <div v-for="lesson in courseLessons" :key="lesson.id" class="lesson-card"
v-for="lesson in courseLessons" :class="'lesson-type-' + lesson.lessonType?.toLowerCase()">
:key="lesson.id"
class="lesson-card"
:class="'lesson-type-' + lesson.lessonType?.toLowerCase()"
>
<div class="lesson-header"> <div class="lesson-header">
<div class="lesson-type-badge" :style="{ background: getLessonTypeBgColor(lesson.lessonType) }"> <div class="lesson-type-badge" :style="{ background: getLessonTypeBgColor(lesson.lessonType) }">
{{ translateLessonType(lesson.lessonType) }} {{ translateLessonType(lesson.lessonType) }}
</div> </div>
<div class="lesson-name">{{ lesson.name }}</div> <div class="lesson-name break-allp">{{ lesson.name }}</div>
<div class="lesson-duration">{{ lesson.duration }}分钟</div> <div class="lesson-duration">{{ lesson.duration }}分钟</div>
</div> </div>
@ -235,42 +231,33 @@
<!-- 教学目标 --> <!-- 教学目标 -->
<div class="lesson-section" v-if="lesson.objectives"> <div class="lesson-section" v-if="lesson.objectives">
<div class="lesson-section-title">教学目标</div> <div class="lesson-section-title">教学目标</div>
<div class="lesson-section-content">{{ lesson.objectives }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.objectives }}</div>
</div> </div>
<!-- 教学准备 --> <!-- 教学准备 -->
<div class="lesson-section" v-if="lesson.preparation"> <div class="lesson-section" v-if="lesson.preparation">
<div class="lesson-section-title">教学准备</div> <div class="lesson-section-title">教学准备</div>
<div class="lesson-section-content">{{ lesson.preparation }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.preparation }}</div>
</div> </div>
<!-- 核心资源 --> <!-- 核心资源 -->
<div class="lesson-section" v-if="hasLessonResources(lesson)"> <div class="lesson-section" v-if="hasLessonResources(lesson)">
<div class="lesson-section-title">核心资源</div> <div class="lesson-section-title">核心资源</div>
<div class="resource-grid"> <div class="resource-grid">
<div <div v-if="lesson.videoPath" class="resource-item"
v-if="lesson.videoPath" @click="previewFile(lesson.videoPath, lesson.videoName || '绘本动画')">
class="resource-item"
@click="previewFile(lesson.videoPath, lesson.videoName || '绘本动画')"
>
<VideoCameraOutlined class="resource-icon video" /> <VideoCameraOutlined class="resource-icon video" />
<span class="resource-name">{{ lesson.videoName || '绘本动画' }}</span> <span class="resource-name">{{ lesson.videoName || '绘本动画' }}</span>
<EyeOutlined class="resource-action" /> <EyeOutlined class="resource-action" />
</div> </div>
<div <div v-if="lesson.pptPath" class="resource-item"
v-if="lesson.pptPath" @click="previewFile(lesson.pptPath, lesson.pptName || '教学课件')">
class="resource-item"
@click="previewFile(lesson.pptPath, lesson.pptName || '教学课件')"
>
<FilePptOutlined class="resource-icon ppt" /> <FilePptOutlined class="resource-icon ppt" />
<span class="resource-name">{{ lesson.pptName || '教学课件' }}</span> <span class="resource-name">{{ lesson.pptName || '教学课件' }}</span>
<EyeOutlined class="resource-action" /> <EyeOutlined class="resource-action" />
</div> </div>
<div <div v-if="lesson.pdfPath" class="resource-item"
v-if="lesson.pdfPath" @click="previewFile(lesson.pdfPath, lesson.pdfName || '电子绘本')">
class="resource-item"
@click="previewFile(lesson.pdfPath, lesson.pdfName || '电子绘本')"
>
<FilePdfOutlined class="resource-icon pdf" /> <FilePdfOutlined class="resource-icon pdf" />
<span class="resource-name">{{ lesson.pdfName || '电子绘本' }}</span> <span class="resource-name">{{ lesson.pdfName || '电子绘本' }}</span>
<EyeOutlined class="resource-action" /> <EyeOutlined class="resource-action" />
@ -285,10 +272,11 @@
<div v-for="(step, index) in lesson.steps" :key="step.id || index" class="step-item"> <div v-for="(step, index) in lesson.steps" :key="step.id || index" class="step-item">
<div class="step-dot">{{ Number(index) + 1 }}</div> <div class="step-dot">{{ Number(index) + 1 }}</div>
<div class="step-content"> <div class="step-content">
<div class="step-name">{{ step.name }}</div> <div class="step-name break-all">{{ step.name }}</div>
<div class="step-duration">{{ step.duration }}分钟</div> <div class="step-duration">{{ step.duration }}分钟</div>
<div class="step-info" v-if="step.objective">目标：{{ step.objective }}</div> <div class="step-info break-all " v-if="step.objective">目标：{{ step.objective }}</div>
<div class="step-info" v-if="step.content">{{ step.content }}</div> <div class="step-info break-all whitespace-pre-wrap" v-if="step.content">{{ step.content }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -297,13 +285,13 @@
<!-- 教学延伸 --> <!-- 教学延伸 -->
<div class="lesson-section" v-if="lesson.extension"> <div class="lesson-section" v-if="lesson.extension">
<div class="lesson-section-title">教学延伸</div> <div class="lesson-section-title">教学延伸</div>
<div class="lesson-section-content">{{ lesson.extension }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.extension }}</div>
</div> </div>
<!-- 教学反思 --> <!-- 教学反思 -->
<div class="lesson-section" v-if="lesson.reflection"> <div class="lesson-section" v-if="lesson.reflection">
<div class="lesson-section-title">教学反思</div> <div class="lesson-section-title">教学反思</div>
<div class="lesson-section-content">{{ lesson.reflection }}</div> <div class="lesson-section-content break-all whitespace-pre-wrap">{{ lesson.reflection }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -327,12 +315,8 @@
<VideoCameraOutlined style="color: #722ed1;" /> 视频资源 <VideoCameraOutlined style="color: #722ed1;" /> 视频资源
</div> </div>
<div class="resource-list"> <div class="resource-list">
<div <div v-for="(item, index) in allVideos" :key="'video-' + index" class="resource-item-card"
v-for="(item, index) in allVideos" @click="previewFile(item.path, item.name)">
:key="'video-' + index"
class="resource-item-card"
@click="previewFile(item.path, item.name)"
>
<VideoCameraOutlined class="item-icon" style="color: #722ed1;" /> <VideoCameraOutlined class="item-icon" style="color: #722ed1;" />
<span class="item-name">{{ item.name }}</span> <span class="item-name">{{ item.name }}</span>
<PlayCircleOutlined class="item-action" /> <PlayCircleOutlined class="item-action" />
@ -346,12 +330,8 @@
<AudioOutlined style="color: #52c41a;" /> 音频资源 <AudioOutlined style="color: #52c41a;" /> 音频资源
</div> </div>
<div class="resource-list"> <div class="resource-list">
<div <div v-for="(item, index) in allAudios" :key="'audio-' + index" class="resource-item-card"
v-for="(item, index) in allAudios" @click="previewFile(item.path, item.name)">
:key="'audio-' + index"
class="resource-item-card"
@click="previewFile(item.path, item.name)"
>
<AudioOutlined class="item-icon" style="color: #52c41a;" /> <AudioOutlined class="item-icon" style="color: #52c41a;" />
<span class="item-name">{{ item.name }}</span> <span class="item-name">{{ item.name }}</span>
<PlayCircleOutlined class="item-action" /> <PlayCircleOutlined class="item-action" />
@ -365,12 +345,8 @@
<FileTextOutlined style="color: #1890ff;" /> 文档资源 <FileTextOutlined style="color: #1890ff;" /> 文档资源
</div> </div>
<div class="resource-list"> <div class="resource-list">
<div <div v-for="(item, index) in allDocuments" :key="'doc-' + index" class="resource-item-card"
v-for="(item, index) in allDocuments" @click="previewFile(item.path, item.name)">
:key="'doc-' + index"
class="resource-item-card"
@click="previewFile(item.path, item.name)"
>
<FilePdfOutlined v-if="item.type === 'pdf'" class="item-icon" style="color: #f5222d;" /> <FilePdfOutlined v-if="item.type === 'pdf'" class="item-icon" style="color: #f5222d;" />
<FilePptOutlined v-else-if="item.type === 'ppt'" class="item-icon" style="color: #fa8c16;" /> <FilePptOutlined v-else-if="item.type === 'ppt'" class="item-icon" style="color: #fa8c16;" />
<FileTextOutlined v-else class="item-icon" style="color: #1890ff;" /> <FileTextOutlined v-else class="item-icon" style="color: #1890ff;" />
@ -386,14 +362,8 @@
<PictureOutlined style="color: #13c2c2;" /> 图片资源 <PictureOutlined style="color: #13c2c2;" /> 图片资源
</div> </div>
<div class="image-grid"> <div class="image-grid">
<img <img v-for="(item, index) in allImages" :key="'img-' + index" :src="getFileUrl(item.path)"
v-for="(item, index) in allImages" :alt="item.name" class="image-thumbnail" @click="previewImage(getFileUrl(item.path))" />
:key="'img-' + index"
:src="getFileUrl(item.path)"
:alt="item.name"
class="image-thumbnail"
@click="previewImage(getFileUrl(item.path))"
/>
</div> </div>
</div> </div>
</div> </div>
@ -416,7 +386,8 @@
<span class="feedback-date">{{ formatDate(feedback.createdAt) }}</span> <span class="feedback-date">{{ formatDate(feedback.createdAt) }}</span>
<a-rate :value="feedback.rating" disabled style="font-size: 12px; margin-left: 8px;" /> <a-rate :value="feedback.rating" disabled style="font-size: 12px; margin-left: 8px;" />
</div> </div>
<div class="feedback-content" v-if="feedback.content">{{ feedback.content }}</div> <div class="feedback-content break-all whitespace-pre-wrap" v-if="feedback.content">{{ feedback.content
}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -430,11 +401,7 @@
</a-modal> </a-modal>
<!-- 文件预览弹窗 --> <!-- 文件预览弹窗 -->
<FilePreviewModal <FilePreviewModal v-model:open="previewModalVisible" :file-url="previewFileUrl" :file-name="previewFileName" />
v-model:open="previewModalVisible"
:file-url="previewFileUrl"
:file-name="previewFileName"
/>
</div> </div>
</template> </template>
@ -942,9 +909,11 @@ onMounted(() => {
.fav-icon { .fav-icon {
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
} }
.fav-icon.favorited { .fav-icon.favorited {
color: #ff4d4f; color: #ff4d4f;
} }
.favorited { .favorited {
color: #ff4d4f; color: #ff4d4f;
} }
@ -1223,9 +1192,17 @@ onMounted(() => {
font-size: 18px; font-size: 18px;
margin-right: 8px; margin-right: 8px;
&.video { color: #722ed1; } &.video {
&.ppt { color: #fa8c16; } color: #722ed1;
&.pdf { color: #f5222d; } }
&.ppt {
color: #fa8c16;
}
&.pdf {
color: #f5222d;
}
} }
.resource-name { .resource-name {

2
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/CourseBasicInfo.vue
View File

@ -25,7 +25,7 @@
<span v-if="!translatedGradeTags.length">-</span> <span v-if="!translatedGradeTags.length">-</span>
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="核心内容" :span="2"> <a-descriptions-item label="核心内容" :span="2">
{{ course.coreContent || '-' }} <div class="break-all whitespace-pre-wrap">{{ course.coreContent || '-' }}</div>
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
</div> </div>

13
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/CourseEnvironmentContent.vue
View File

@ -1,16 +1,11 @@
<template> <template>
<div class="course-environment-content"> <div class="course-environment-content">
<div v-if="course.environmentConstruction" class="environment-wrapper"> <div v-if="course.environmentConstruction" class="environment-wrapper">
<a-alert <a-alert message="环创建设建议" description="以下内容提供了主题环境布置、区域活动环境、阅读角创设等方面的建议" type="info" show-icon closable
message="环创建设建议" class="environment-alert" />
description="以下内容提供了主题环境布置、区域活动环境、阅读角创设等方面的建议"
type="info"
show-icon
closable
class="environment-alert"
/>
<div class="environment-content rich-content" v-html="course.environmentConstruction"></div> <div class="environment-content rich-content break-all whitespace-pre-wrap"
v-html="course.environmentConstruction"></div>
</div> </div>
<a-empty v-else description="暂无环创建设内容" /> <a-empty v-else description="暂无环创建设内容" />

18
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/CourseIntroContent.vue
View File

@ -5,7 +5,7 @@
<div class="section-title"> <div class="section-title">
<FileTextOutlined /> 核心内容 <FileTextOutlined /> 核心内容
</div> </div>
<div class="section-text">{{ course.coreContent }}</div> <div class="section-text break-all whitespace-pre-wrap">{{ course.coreContent }}</div>
</div> </div>
<!-- 课程简介 --> <!-- 课程简介 -->
@ -13,7 +13,7 @@
<div class="section-title"> <div class="section-title">
<AlignLeftOutlined /> 课程简介 <AlignLeftOutlined /> 课程简介
</div> </div>
<div class="section-text rich-content" v-html="course.introSummary"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introSummary"></div>
</div> </div>
<!-- 课程亮点 --> <!-- 课程亮点 -->
@ -21,7 +21,7 @@
<div class="section-title"> <div class="section-title">
<StarOutlined /> 课程亮点 <StarOutlined /> 课程亮点
</div> </div>
<div class="section-text rich-content" v-html="course.introHighlights"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introHighlights"></div>
</div> </div>
<!-- 课程总目标 --> <!-- 课程总目标 -->
@ -29,7 +29,7 @@
<div class="section-title"> <div class="section-title">
<AimOutlined /> 课程总目标 <AimOutlined /> 课程总目标
</div> </div>
<div class="section-text rich-content" v-html="course.introGoals"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introGoals"></div>
</div> </div>
<!-- 课程内容安排 --> <!-- 课程内容安排 -->
@ -37,7 +37,7 @@
<div class="section-title"> <div class="section-title">
<CalendarOutlined /> 课程内容安排 <CalendarOutlined /> 课程内容安排
</div> </div>
<div class="section-text rich-content" v-html="course.introSchedule"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introSchedule"></div>
</div> </div>
<!-- 教学重难点 --> <!-- 教学重难点 -->
@ -45,7 +45,7 @@
<div class="section-title"> <div class="section-title">
<BookOutlined /> 教学重难点 <BookOutlined /> 教学重难点
</div> </div>
<div class="section-text rich-content" v-html="course.introKeyPoints"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introKeyPoints"></div>
</div> </div>
<!-- 教学方法 --> <!-- 教学方法 -->
@ -53,7 +53,7 @@
<div class="section-title"> <div class="section-title">
<ToolOutlined /> 教学方法 <ToolOutlined /> 教学方法
</div> </div>
<div class="section-text rich-content" v-html="course.introMethods"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introMethods"></div>
</div> </div>
<!-- 评价方式 --> <!-- 评价方式 -->
@ -61,7 +61,7 @@
<div class="section-title"> <div class="section-title">
<CheckCircleOutlined /> 评价方式 <CheckCircleOutlined /> 评价方式
</div> </div>
<div class="section-text rich-content" v-html="course.introEvaluation"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introEvaluation"></div>
</div> </div>
<!-- 注意事项 --> <!-- 注意事项 -->
@ -69,7 +69,7 @@
<div class="section-title"> <div class="section-title">
<ExclamationCircleOutlined /> 注意事项 <ExclamationCircleOutlined /> 注意事项
</div> </div>
<div class="section-text rich-content" v-html="course.introNotes"></div> <div class="section-text rich-content break-all whitespace-pre-wrap" v-html="course.introNotes"></div>
</div> </div>
<a-empty v-if="!course.coreContent && !course.introSummary && !hasMoreIntro" description="暂无课程介绍内容" /> <a-empty v-if="!course.coreContent && !course.introSummary && !hasMoreIntro" description="暂无课程介绍内容" />

12
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/LessonObjectivesContent.vue
View File

@ -1,16 +1,10 @@
<template> <template>
<div class="lesson-objectives-content"> <div class="lesson-objectives-content">
<div v-if="lesson.objectives" class="objectives-wrapper"> <div v-if="lesson.objectives" class="objectives-wrapper">
<a-alert <a-alert message="教学目标" description="本课程的教学目标，包含认知、技能、情感三个维度" type="info" show-icon closable
message="教学目标" class="objectives-alert" />
description="本课程的教学目标，包含认知、技能、情感三个维度"
type="info"
show-icon
closable
class="objectives-alert"
/>
<div class="objectives-content rich-content" v-html="lesson.objectives"></div> <div class="objectives-content rich-content break-all whitespace-pre-wrap" v-html="lesson.objectives"></div>
</div> </div>
<a-empty v-else description="暂无教学目标" /> <a-empty v-else description="暂无教学目标" />

11
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/LessonPreparationContent.vue
View File

@ -1,16 +1,9 @@
<template> <template>
<div class="lesson-preparation-content"> <div class="lesson-preparation-content">
<div v-if="lesson.preparation" class="preparation-wrapper"> <div v-if="lesson.preparation" class="preparation-wrapper">
<a-alert <a-alert message="教学准备" description="课前需要准备的材料、环境和资源" type="info" show-icon closable class="preparation-alert" />
message="教学准备"
description="课前需要准备的材料、环境和资源"
type="info"
show-icon
closable
class="preparation-alert"
/>
<div class="preparation-content rich-content" v-html="lesson.preparation"></div> <div class="preparation-content rich-content break-all whitespace-pre-wrap" v-html="lesson.preparation"></div>
</div> </div>
<a-empty v-else description="暂无教学准备内容" /> <a-empty v-else description="暂无教学准备内容" />

22
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/LessonReflectionContent.vue
View File

@ -1,21 +1,15 @@
<template> <template>
<div class="lesson-reflection-content"> <div class="lesson-reflection-content">
<div v-if="lesson.reflection || lesson.reflectionPoints" class="reflection-wrapper"> <div v-if="lesson.reflection || lesson.reflectionPoints" class="reflection-wrapper">
<a-alert <a-alert message="教学反思" description="课后教学反思要点，帮助改进教学效果" type="warning" show-icon closable
message="教学反思" class="reflection-alert" />
description="课后教学反思要点，帮助改进教学效果"
type="warning"
show-icon
closable
class="reflection-alert"
/>
<!-- 教学反思内容 --> <!-- 教学反思内容 -->
<div v-if="lesson.reflection" class="reflection-section"> <div v-if="lesson.reflection" class="reflection-section">
<div class="section-title"> <div class="section-title">
<FileTextOutlined /> 反思总结 <FileTextOutlined /> 反思总结
</div> </div>
<div class="reflection-content rich-content" v-html="lesson.reflection"></div> <div class="reflection-content rich-content break-all whitespace-pre-wrap" v-html="lesson.reflection"></div>
</div> </div>
<!-- 反思要点 --> <!-- 反思要点 -->
@ -23,7 +17,7 @@
<div class="section-title"> <div class="section-title">
<CheckCircleOutlined /> 反思要点 <CheckCircleOutlined /> 反思要点
</div> </div>
<div class="points-content rich-content" v-html="lesson.reflectionPoints"></div> <div class="points-content rich-content break-all whitespace-pre-wrap" v-html="lesson.reflectionPoints"></div>
</div> </div>
</div> </div>
@ -32,12 +26,8 @@
<!-- 快速记录区 --> <!-- 快速记录区 -->
<div class="quick-note-section"> <div class="quick-note-section">
<a-divider>快速记录</a-divider> <a-divider>快速记录</a-divider>
<a-textarea <a-textarea v-model:value="quickNote" :show-count="true" :maxlength="500" placeholder="在这里记录您对本课程的教学反思和改进建议..."
v-model:value="quickNote" :auto-size="{ minRows: 6, maxRows: 6 }" class="quick-note-input" />
placeholder="在这里记录您对本课程的教学反思和改进建议..."
:auto-size="{ minRows: 4, maxRows: 8 }"
class="quick-note-input"
/>
<div class="note-actions"> <div class="note-actions">
<a-button size="small" @click="quickNote = ''"> <a-button size="small" @click="quickNote = ''">
清除 清除

30
lesingle-edu-reading-platform-frontend/src/views/teacher/courses/components/content/LessonStepsContent.vue
View File

@ -2,30 +2,19 @@
<div class="lesson-steps-content"> <div class="lesson-steps-content">
<!-- 教学过程列表 --> <!-- 教学过程列表 -->
<div v-if="steps.length > 0" class="steps-wrapper"> <div v-if="steps.length > 0" class="steps-wrapper">
<a-alert <a-alert message="教学过程" :description="`共 ${steps.length} 个教学环节`" type="info" show-icon closable
message="教学过程" class="steps-alert" />
:description="`共 ${steps.length} 个教学环节`"
type="info"
show-icon
closable
class="steps-alert"
/>
<!-- 环节列表 --> <!-- 环节列表 -->
<div class="steps-list"> <div class="steps-list">
<div <div v-for="(step, index) in steps" :key="step.id" class="step-item"
v-for="(step, index) in steps" :class="{ active: selectedStep?.id === step.id }" @click="handleSelectStep(step)">
:key="step.id"
class="step-item"
:class="{ active: selectedStep?.id === step.id }"
@click="handleSelectStep(step)"
>
<div class="step-header"> <div class="step-header">
<div class="step-number">{{ index + 1 }}</div> <div class="step-number">{{ index + 1 }}</div>
<div class="step-info"> <div class="step-info">
<div class="step-name">{{ step.name }}</div> <div class="step-name break-all">{{ step.name }}</div>
<div class="step-meta"> <div class="step-meta break-all">
<span class="step-duration"> <span class="step-duration break-all">
<ClockCircleOutlined /> {{ step.duration }}分钟 <ClockCircleOutlined /> {{ step.duration }}分钟
</span> </span>
<span v-if="step.stepType" class="step-type"> <span v-if="step.stepType" class="step-type">
@ -44,7 +33,7 @@
<div class="detail-title"> <div class="detail-title">
<AimOutlined /> 教学目标 <AimOutlined /> 教学目标
</div> </div>
<div class="detail-content rich-content">{{ step.objective }}</div> <div class="detail-content rich-content break-all whitespace-pre-wrap">{{ step.objective }}</div>
</div> </div>
<!-- 环节说明/内容 --> <!-- 环节说明/内容 -->
@ -52,7 +41,8 @@
<div class="detail-title"> <div class="detail-title">
<FileTextOutlined /> 环节内容 <FileTextOutlined /> 环节内容
</div> </div>
<div class="detail-content rich-content" v-html="step.description || step.content"></div> <div class="detail-content rich-content break-all whitespace-pre-wrap"
v-html="step.description || step.content"></div>
</div> </div>
<!-- 环节资源 --> <!-- 环节资源 -->

27
lesingle-edu-reading-platform-frontend/src/views/teacher/lessons/LessonView.vue
View File

@ -34,12 +34,7 @@
<StepForwardOutlined /> <StepForwardOutlined />
</a-button> </a-button>
</a-button-group> </a-button-group>
<a-button <a-button type="primary" class="broadcast-btn" :disabled="!hasCourseResources" @click="openBroadcastMode">
type="primary"
class="broadcast-btn"
:disabled="!hasCourseResources"
@click="openBroadcastMode"
>
<template #icon> <template #icon>
<ExpandOutlined /> <ExpandOutlined />
</template> </template>
@ -66,10 +61,10 @@
<!-- 环节进度条 --> <!-- 环节进度条 -->
<div class="step-progress-bar"> <div class="step-progress-bar">
<div class="progress-info"> <div class="progress-info">
<span class="current-step-label"> <span class="current-step-label break-all">
{{ currentLesson?.name }} - {{ currentStep?.name || '准备中' }} {{ currentLesson?.name }} - {{ currentStep?.name || '准备中' }}
</span> </span>
<span class="step-count"> <span class="step-count flex-shrink-0">
环节 {{ currentStepIndex + 1 }}/{{ currentLesson?.steps?.length || 0 }} 环节 {{ currentStepIndex + 1 }}/{{ currentLesson?.steps?.length || 0 }}
</span> </span>
</div> </div>
@ -96,7 +91,7 @@
<span v-else>{{ index + 1 }}</span> <span v-else>{{ index + 1 }}</span>
</div> </div>
<div class="step-info"> <div class="step-info">
<span class="step-name">{{ step.name }}</span> <span class="step-name break-all">{{ step.name }}</span>
<span class="step-duration">{{ step.duration }} 分钟</span> <span class="step-duration">{{ step.duration }} 分钟</span>
</div> </div>
</div> </div>
@ -114,8 +109,8 @@
<!-- 环节标题 --> <!-- 环节标题 -->
<div class="step-header"> <div class="step-header">
<div class="header-left"> <div class="header-left">
<div class="step-badge">第 {{ currentStepIndex + 1 }} 环节</div> <div class="step-badge flex-shrink-0">第 {{ currentStepIndex + 1 }} 环节</div>
<h2 class="step-title">{{ currentStep.name }}</h2> <h2 class="step-title break-all whitespace-pre-wrap">{{ currentStep.name }}</h2>
</div> </div>
<div class="header-tags"> <div class="header-tags">
<a-tag class="duration-tag"> <a-tag class="duration-tag">
@ -132,7 +127,7 @@
<div class="card-label"> <div class="card-label">
<AimOutlined /> 教学目标 <AimOutlined /> 教学目标
</div> </div>
<div class="card-content">{{ currentStep.objective }}</div> <div class="card-content break-all whitespace-pre-wrap">{{ currentStep.objective }}</div>
</div> </div>
<!-- 环节说明 --> <!-- 环节说明 -->
@ -140,7 +135,7 @@
<div class="card-label"> <div class="card-label">
<FileTextOutlined /> 环节说明 <FileTextOutlined /> 环节说明
</div> </div>
<div class="card-content rich-content" v-html="currentStep.description"></div> <div class="card-content rich-content break-all whitespace-pre-wrap" v-html="currentStep.description"></div>
</div> </div>
<!-- 教师讲稿 --> <!-- 教师讲稿 -->
@ -148,7 +143,7 @@
<div class="card-label script-label"> <div class="card-label script-label">
<SoundOutlined /> 教师讲稿 <SoundOutlined /> 教师讲稿
</div> </div>
<div class="script-text rich-content" v-html="currentStep.script"></div> <div class="script-text rich-content break-all whitespace-pre-wrap" v-html="currentStep.script"></div>
</div> </div>
<!-- 环节资源 --> <!-- 环节资源 -->
@ -274,7 +269,7 @@
<span>教学准备</span> <span>教学准备</span>
</div> </div>
<div class="panel-body preparation-body"> <div class="panel-body preparation-body">
<div class="preparation-text" v-html="currentLesson.preparation"></div> <div class="preparation-text break-all whitespace-pre-wrap">{{ currentLesson.preparation }}</div>
</div> </div>
</div> </div>
@ -285,7 +280,7 @@
<span>教学延伸</span> <span>教学延伸</span>
</div> </div>
<div class="panel-body extension-body"> <div class="panel-body extension-body">
<div class="extension-text" v-html="currentLesson.extension"></div> <div class="extension-text break-all whitespace-pre-wrap">{{ currentLesson.extension }}</div>
</div> </div>
</div> </div>