整个课程和数据UI重新设计版本

This commit is contained in:
shenlei
2026-09-18 17:55:44 +09:00
parent febfd30f49
commit 0a4f97d105
154 changed files with 12366 additions and 4784 deletions
+38 -185
View File
@@ -2,214 +2,67 @@ import 'package:flutter/material.dart';
import '../../core/app_state.dart';
import '../../core/app_theme.dart';
import '../../core/seed_courses.dart';
import '../../widgets/app_widgets.dart';
import 'lesson_path.dart';
import 'today_task_card.dart';
/// 学习 tab:今天的任务在上,完整课程路径在下。
class HomePage extends StatelessWidget {
const HomePage({
super.key,
required this.state,
required this.onStartPrimaryTask,
required this.onOpenDialogue,
required this.onStartLesson,
required this.onOpenLesson,
required this.onStartReview,
required this.onResumeLessonDialogue,
required this.onStartReinforcement,
required this.onOpenAssessment,
});
final AppState state;
final VoidCallback onStartPrimaryTask;
final VoidCallback onOpenDialogue;
final VoidCallback onStartLesson;
final ValueChanged<String> onOpenLesson;
final VoidCallback onStartReview;
final VoidCallback onResumeLessonDialogue;
final VoidCallback onStartReinforcement;
final ValueChanged<String> onOpenAssessment;
@override
Widget build(BuildContext context) {
final isReview = state.reviewIsPrimary;
final count = state.dueReviewCount;
final activeLesson = lessonById(state.activeLessonId);
final activeSegment = state.activeSegmentIndexFor(activeLesson.id) + 1;
final resumeDialogue = state.hasResumableLessonDialogue;
final stageStep = !resumeDialogue && !isReview && state.allLessonsComplete
? _stageStep()
: null;
final primaryTitle = resumeDialogue
? '继续第 ${activeLesson.number} 课的课程对话'
: isReview
? '先复习 $count 项'
: stageStep?.title ??
'第 ${activeLesson.number} 课 · ${activeLesson.title}${activeLesson.segments.length > 1 ? ' · 第 $activeSegment/${activeLesson.segments.length} 段' : ''}';
final primaryNote = resumeDialogue
? '已保留你的对话进度和提示状态。'
: isReview
? (state.reviewBacklog ? '有积压项目;先花几分钟清掉到期复习。' : '昨天练过的关键句,今天换个情境再用一次。')
: stageStep?.note ?? '预热词汇 → 听说读写 → 对话 → 独立尝试';
final scene = state.recommendedScene;
return AppPage(
child: SpacedColumn(
spacing: 16,
children: [
const Eyebrow('今天的学习'),
Text(
'今天,说几句能用的英语。',
style: Theme.of(context).textTheme.headlineMedium,
),
Text(
isReview ? '到期复习优先;完成后再进入新内容。' : '没有到期复习,继续完成一个小任务。',
style: Theme.of(context).textTheme.bodyMedium,
),
SectionCard(
child: Row(
children: [
Icon(Icons.psychology_outlined, color: AppColors.green),
const SizedBox(width: 10),
Expanded(
child: Text(
'已接触 ${state.knownItemCount} 项 · 可独立使用 ${state.usableMasteryCount} 项',
),
),
],
),
),
SectionCard(
tint: AppColors.softGreen,
child: SpacedColumn(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
primaryTitle,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
Text(
isReview
? '${(count * 2).clamp(2, 10)} 分钟'
: stageStep?.minutes ?? '12 分钟',
style: TextStyle(color: AppColors.green),
),
],
),
Text(
primaryNote,
style: Theme.of(context).textTheme.bodyMedium,
),
PrimaryButton(
label: resumeDialogue
? '继续对话'
: isReview
? '开始复习'
: stageStep?.action ?? '开始今天的学习',
onPressed: resumeDialogue
? onResumeLessonDialogue
: stageStep?.onPressed ?? onStartPrimaryTask,
),
],
),
),
SectionCard(
child: SpacedColumn(
children: [
const Text(
'AI 情境对话',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
),
Text(
'${scene.title} · ${scene.script.prompts.length} 个任务 · 文字或语音输入',
style: Theme.of(context).textTheme.bodyMedium,
),
SecondaryButton(label: '开始情境对话', onPressed: onOpenDialogue),
],
),
),
const _FrameworkNote(),
],
),
);
}
/// What comes after the last A0 lesson: consolidation until the core items
/// are ready, then the stage assessment, then waiting for A1 content.
_StageStep _stageStep() {
final usable =
'可使用 ${state.coreUsableCount}/48 · 已掌握 ${state.coreMasteredCount}/30';
if (state.a0Passed) {
return _StageStep(
title: 'A0 已通过',
note: 'A1 课程准备中。先用巩固练习和情境对话保持手感。',
action: '安排一题巩固练习',
minutes: '3 分钟',
onPressed: onStartReinforcement,
);
}
final packId = state.nextAssessmentPackId;
if (state.a0AssessmentReady && packId != null) {
return _StageStep(
title: 'A0 阶段评估 · $packId',
note: '$usable。可以开始阶段评估,两套评估间隔至少 24 小时。',
action: '开始阶段评估',
minutes: '15 分钟',
onPressed: () => onOpenAssessment(packId),
);
}
return _StageStep(
title: state.a0AssessmentReady ? '第二套评估 24 小时后开放' : 'A0 课程已学完',
note: state.a0AssessmentReady
? '第一套评估已通过。等待期间继续巩固。'
: '$usable。继续按时复习、做情境对话,达到要求后开放阶段评估。',
action: '安排一题巩固练习',
minutes: '3 分钟',
onPressed: onStartReinforcement,
);
}
}
class _StageStep {
const _StageStep({
required this.title,
required this.note,
required this.action,
required this.minutes,
required this.onPressed,
});
final String title;
final String note;
final String action;
final String minutes;
final VoidCallback onPressed;
Widget build(BuildContext context) => AppPage(
child: SpacedColumn(
spacing: 16,
children: [
Text('学习', style: Theme.of(context).textTheme.headlineMedium),
TodayTaskCard(
state: state,
onStartLesson: onStartLesson,
onStartReview: onStartReview,
onResumeLessonDialogue: onResumeLessonDialogue,
onStartReinforcement: onStartReinforcement,
onOpenAssessment: onOpenAssessment,
),
LessonPath(state: state, onOpenLesson: onOpenLesson),
const _FrameworkNote(),
],
),
);
}
class _FrameworkNote extends StatelessWidget {
const _FrameworkNote();
@override
Widget build(BuildContext context) => Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppColors.warm,
borderRadius: BorderRadius.circular(14),
),
child: Row(
children: [
Icon(Icons.info_outline, color: AppColors.warmInk),
SizedBox(width: 8),
Expanded(
child: Text(
'文字回答可用于理解与写作练习;口语掌握须以录音或语音识别结果为准。可在“我的”配置 AI 服务。',
style: TextStyle(
color: AppColors.warmInk,
fontSize: 13,
height: 1.45,
),
),
Widget build(BuildContext context) => Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.info_outline, color: AppColors.muted, size: 16),
const SizedBox(width: 6),
Expanded(
child: Text(
'口语掌握以录音或语音识别结果为准;AI 服务可在“我的”中配置。',
style: TextStyle(color: AppColors.muted, fontSize: 12, height: 1.45),
),
],
),
),
],
);
}
@@ -0,0 +1,113 @@
import 'package:flutter/material.dart';
import '../../core/app_state.dart';
import '../../core/app_theme.dart';
import '../../core/courses/courses.dart';
import '../../widgets/app_widgets.dart';
/// 课程路径:全部课程按顺序排列,显示完成、当前与锁定状态。
class LessonPath extends StatelessWidget {
const LessonPath({
super.key,
required this.state,
required this.onOpenLesson,
});
final AppState state;
final ValueChanged<String> onOpenLesson;
@override
Widget build(BuildContext context) {
final done = allLessons
.where((lesson) => state.completedLessonIds.contains(lesson.id))
.length;
return SpacedColumn(
spacing: 10,
children: [
Row(
children: [
Expanded(
child: Text(
'课程路径',
style: Theme.of(context).textTheme.titleMedium,
),
),
Text(
'$done/${allLessons.length} 完成',
style: TextStyle(fontSize: 13, color: AppColors.muted),
),
],
),
if (state.reviewBacklog)
Text(
'复习有积压:先完成到期复习,新课暂时锁定;已学课程仍可重温。',
style: TextStyle(fontSize: 13, color: AppColors.warmInk),
),
for (final lesson in allLessons)
_LessonTile(
lesson: lesson,
state: state,
onTap: () => onOpenLesson(lesson.id),
),
],
);
}
}
class _LessonTile extends StatelessWidget {
const _LessonTile({
required this.lesson,
required this.state,
required this.onTap,
});
final SeedLesson lesson;
final AppState state;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final completed = state.completedLessonIds.contains(lesson.id);
final current = lesson.id == state.activeLessonId && !completed;
final open =
state.isLessonUnlocked(lesson.id) &&
(!state.reviewBacklog || completed);
final segments = lesson.segments.length;
final segmentsDone = lesson.segments
.where((segment) => state.isSegmentComplete(segment.id))
.length;
return SectionCard(
tint: current ? AppColors.softGreen : null,
onTap: open ? onTap : null,
child: Row(
children: [
Icon(
completed
? Icons.check_circle
: open
? Icons.play_circle_outline
: Icons.lock_outline,
color: completed || current ? AppColors.green : AppColors.muted,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'第 ${lesson.number} 课 · ${lesson.title}',
style: const TextStyle(fontWeight: FontWeight.w600),
),
const SizedBox(height: 3),
Text(
segments > 1
? '${lesson.outcome} · 小段 $segmentsDone/$segments'
: lesson.outcome,
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
),
],
),
);
}
}
@@ -0,0 +1,135 @@
import 'package:flutter/material.dart';
import '../../core/app_state.dart';
import '../../core/app_theme.dart';
import '../../core/courses/courses.dart';
import '../../widgets/app_widgets.dart';
/// 今天最该做的一件事:继续课程对话 → 到期复习 → 阶段评估/巩固 → 下一课。
class TodayTaskCard extends StatelessWidget {
const TodayTaskCard({
super.key,
required this.state,
required this.onStartLesson,
required this.onStartReview,
required this.onResumeLessonDialogue,
required this.onStartReinforcement,
required this.onOpenAssessment,
});
final AppState state;
final VoidCallback onStartLesson;
final VoidCallback onStartReview;
final VoidCallback onResumeLessonDialogue;
final VoidCallback onStartReinforcement;
final ValueChanged<String> onOpenAssessment;
@override
Widget build(BuildContext context) {
final task = _todayTask();
return SectionCard(
tint: AppColors.softGreen,
child: SpacedColumn(
children: [
Row(
children: [
Expanded(child: Eyebrow(task.label)),
Text(task.minutes, style: TextStyle(color: AppColors.green)),
],
),
Text(
task.title,
style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
),
Text(task.note, style: Theme.of(context).textTheme.bodyMedium),
PrimaryButton(label: task.action, onPressed: task.onPressed),
],
),
);
}
_TodayTask _todayTask() {
final lesson = lessonById(state.activeLessonId);
if (state.hasResumableLessonDialogue) {
return _TodayTask(
label: '未完成',
title: '继续第 ${lesson.number} 课的课程对话',
note: '已保留你的对话进度和提示状态。',
action: '继续对话',
minutes: '5 分钟',
onPressed: onResumeLessonDialogue,
);
}
if (state.reviewIsPrimary) {
final count = state.dueReviewCount;
return _TodayTask(
label: '今日复习',
title: '先复习 $count 项',
note: state.reviewBacklog
? '有积压项目;先花几分钟清掉到期复习,再开启新课。'
: '之前练过的关键句,今天换个情境再用一次。',
action: '开始复习',
minutes: '${(count * 2).clamp(2, 10)} 分钟',
onPressed: onStartReview,
);
}
// A0 课程学完、尚未通过阶段评估时,先巩固再评估;通过后回到下一课。
if (state.a0LessonsComplete && !state.a0Passed) return _stageTask();
final segments = lesson.segments.length;
final segment = state.activeSegmentIndexFor(lesson.id) + 1;
return _TodayTask(
label: '今日新课',
title:
'第 ${lesson.number} 课 · ${lesson.title}'
'${segments > 1 ? ' · 第 $segment/$segments 段' : ''}',
note: '预热词汇 → 听说读写 → 对话 → 独立尝试',
action: '开始今天的学习',
minutes: '12 分钟',
onPressed: onStartLesson,
);
}
_TodayTask _stageTask() {
final usable =
'可使用 ${state.coreUsableCount}/$a0UsableGoal · '
'已掌握 ${state.coreMasteredCount}/$a0MasteredGoal';
final packId = state.nextAssessmentPackId;
if (state.a0AssessmentReady && packId != null) {
return _TodayTask(
label: '阶段评估',
title: 'A0 阶段评估 · $packId',
note: '$usable。可以开始阶段评估,两套评估间隔至少 24 小时。',
action: '开始阶段评估',
minutes: '15 分钟',
onPressed: () => onOpenAssessment(packId),
);
}
return _TodayTask(
label: 'A0 巩固',
title: state.a0AssessmentReady ? '第二套评估 24 小时后开放' : 'A0 课程已学完',
note: state.a0AssessmentReady
? '第一套评估已通过。等待期间继续巩固。'
: '$usable。继续按时复习、做情境对话,达到要求后开放阶段评估。',
action: '安排一题巩固练习',
minutes: '3 分钟',
onPressed: onStartReinforcement,
);
}
}
class _TodayTask {
const _TodayTask({
required this.label,
required this.title,
required this.note,
required this.action,
required this.minutes,
required this.onPressed,
});
final String label;
final String title;
final String note;
final String action;
final String minutes;
final VoidCallback onPressed;
}