整个课程和数据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
@@ -3,6 +3,7 @@ part of '../lesson_flow.dart';
class _IndependentStep extends StatefulWidget {
const _IndependentStep({
required this.state,
required this.lessonId,
required this.segmentId,
required this.keepRecording,
required this.activity,
@@ -16,6 +17,7 @@ class _IndependentStep extends StatefulWidget {
required this.onLater,
});
final AppState state;
final String lessonId;
final LessonActivity activity;
final String segmentId;
final bool keepRecording;
@@ -25,7 +27,8 @@ class _IndependentStep extends StatefulWidget {
final VoidCallback onChanged;
final VoidCallback onNeedHelp;
final VoidCallback onLookup;
final void Function(bool spoken, String? recordingPath) onContinue;
final void Function(bool spoken, String? recordingPath, bool aiCorrected)
onContinue;
final VoidCallback onLater;
@override
@@ -38,6 +41,12 @@ class _IndependentStepState extends State<_IndependentStep>
bool transcriptEdited = false;
String lastTranscript = '';
String? validationError;
bool checkingWithAi = false;
WritingAiFeedback? aiCheck;
String? aiCheckError;
/// A shown AI correction is help, so finishing afterwards is assisted.
bool aiCorrected = false;
@override
AppState get voiceState => widget.state;
@@ -49,16 +58,74 @@ class _IndependentStepState extends State<_IndependentStep>
}
void _submit() {
if (!matchesSegmentIndependent(widget.segmentId, widget.controller.text)) {
setState(() => validationError = '这次还没有用上本段要练的内容。查看帮助后补充一次。');
final shortfall = independentShortfall(
widget.segmentId,
widget.controller.text,
);
if (shortfall != null) {
setState(() => validationError = shortfall);
return;
}
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
aiCheck?.verdict == 'accepted'
? '通过:用上了本段要练的表达,AI 也没发现拼写或语法问题。'
: '通过:用上了本段要练的表达。',
),
),
);
widget.onContinue(
usedVoice && !transcriptEdited,
widget.keepRecording ? recordingPath : null,
aiCorrected,
);
}
void _clearChecks() {
validationError = null;
aiCheck = null;
aiCheckError = null;
}
Future<void> _checkWithAi() async {
final answer = widget.controller.text.trim();
if (answer.isEmpty || checkingWithAi) return;
if (widget.state.aiProvider == AiProviderType.mock) {
setState(() => aiCheckError = '请先在“我的”配置 AI 服务;本地检查仍可继续学习。');
return;
}
setState(() {
checkingWithAi = true;
aiCheckError = null;
});
final feedback = await AiService.instance.answerFeedback(
provider: widget.state.aiProvider,
endpoint: widget.state.aiEndpoint,
model: widget.state.aiModel,
answerId: widget.segmentId,
target: widget.activity.independentHelp,
taskPrompt: widget.activity.independentPrompt,
answer: answer,
level: lessonLevel(widget.lessonId),
);
// The learner may have kept typing while the request ran.
if (!mounted || widget.controller.text.trim() != answer) {
if (mounted) setState(() => checkingWithAi = false);
return;
}
setState(() {
checkingWithAi = false;
aiCheck = feedback;
aiCheckError = feedback == null
? '暂时无法获得 AI 检查结果。你的答案保留在这里,可稍后重试或直接提交。'
: null;
if (feedback != null && feedback.verdict != 'accepted') {
aiCorrected = true;
}
});
}
Future<void> _toggleMic() async {
if (aiVoiceRecording) {
await finishVoiceInput(
@@ -67,6 +134,7 @@ class _IndependentStepState extends State<_IndependentStep>
usedVoice = true;
lastTranscript = text;
transcriptEdited = false;
_clearChecks();
},
afterTranscribe: widget.onChanged,
);
@@ -87,6 +155,7 @@ class _IndependentStepState extends State<_IndependentStep>
usedVoice = true;
lastTranscript = text;
transcriptEdited = false;
_clearChecks();
});
widget.onChanged();
},
@@ -133,7 +202,7 @@ class _IndependentStepState extends State<_IndependentStep>
controller: widget.controller,
onChanged: (value) {
if (usedVoice && value != lastTranscript) transcriptEdited = true;
setState(() {});
setState(_clearChecks);
widget.onChanged();
},
minLines: 2,
@@ -185,6 +254,48 @@ class _IndependentStepState extends State<_IndependentStep>
),
),
),
OutlinedButton.icon(
onPressed: widget.canContinue && !checkingWithAi
? _checkWithAi
: null,
icon: checkingWithAi
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Icon(Icons.spellcheck),
label: Text(checkingWithAi ? '正在检查…' : '提交前 AI 检查语法和拼写(可选)'),
),
if (aiCheck != null)
SectionCard(
tint: aiCheck!.verdict == 'accepted'
? AppColors.softGreen
: AppColors.warm,
child: SpacedColumn(
spacing: 6,
children: [
Text('AI 检查:${aiCheck!.feedback}'),
for (final note in aiCheck!.missing) Text('· $note'),
if (aiCheck!.suggestion != null)
Text('参考改正:${aiCheck!.suggestion}'),
Text(
aiCheck!.verdict == 'accepted'
? 'AI 仅作参考;是否完成仍由本地检查判断。'
: '看过改正后再提交,本次会记为带提示完成。',
style: TextStyle(fontSize: 12, color: AppColors.muted),
),
],
),
),
if (aiCheckError != null)
SectionCard(
tint: AppColors.warm,
child: Text(
aiCheckError!,
style: TextStyle(color: AppColors.warmInk),
),
),
if (validationError != null)
SectionCard(
tint: AppColors.warm,
@@ -210,7 +321,7 @@ class _IndependentStepState extends State<_IndependentStep>
else
TextButton(onPressed: widget.onLookup, child: const Text('查词或短语')),
PrimaryButton(
label: widget.showHelp ? '带帮助完成' : '独立完成',
label: widget.showHelp || aiCorrected ? '带帮助完成' : '独立完成',
onPressed: widget.canContinue ? _submit : null,
),
TextButton(onPressed: widget.onLater, child: const Text('稍后继续')),
@@ -0,0 +1,344 @@
part of '../lesson_flow.dart';
/// The unit's listening/reading comprehension step. It presents each material's
/// text (with word lookup and glosses) and a few multiple-choice questions. The
/// learner continues once every question is answered correctly or its answer
/// has been revealed — comprehension is checked, but it never blocks the lesson.
class _MaterialStep extends StatefulWidget {
const _MaterialStep({
required this.state,
required this.materials,
required this.onContinue,
});
final AppState state;
final List<PackMaterial> materials;
final VoidCallback onContinue;
@override
State<_MaterialStep> createState() => _MaterialStepState();
}
class _MaterialStepState extends State<_MaterialStep> {
/// materialIndex -> questionIndex -> selected option index.
final Map<int, Map<int, int>> _selected = {};
/// materialIndex -> questionIndex where the answer was revealed.
final Set<String> _revealed = {};
List<PackQuestion> _questions(int materialIndex) =>
widget.materials[materialIndex].questions;
List<String> _options(int materialIndex, int questionIndex) {
final q = _questions(materialIndex)[questionIndex];
return shuffledOptions(q.options, '${q.question}-material');
}
bool _isCorrect(int m, int q, int optionIndex) {
final options = _options(m, q);
if (optionIndex < 0 || optionIndex >= options.length) return false;
return options[optionIndex] == _questions(m)[q].answer;
}
bool _answered(int m, int q) {
if (_revealed.contains('$m-$q')) return true;
final chosen = _selected[m]?[q];
return chosen != null && _isCorrect(m, q, chosen);
}
bool get _allAnswered {
for (var m = 0; m < widget.materials.length; m++) {
for (var q = 0; q < _questions(m).length; q++) {
if (!_answered(m, q)) return false;
}
}
return true;
}
@override
Widget build(BuildContext context) {
return _LessonScaffold(
step: 4,
child: SpacedColumn(
children: [
const Eyebrow('听读材料'),
Text(
'读一段真实的小材料,做完理解题。',
style: Theme.of(context).textTheme.headlineMedium,
),
for (var m = 0; m < widget.materials.length; m++)
_materialCard(context, m),
PrimaryButton(
label: _allAnswered ? '继续写一写' : '答对所有理解题后继续',
onPressed: _allAnswered ? widget.onContinue : null,
),
],
),
);
}
Widget _materialCard(BuildContext context, int m) {
final material = widget.materials[m];
final isListening = material.mode == 'listening';
return SpacedColumn(
children: [
SectionCard(
tint: AppColors.softGreen,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
isListening
? Icons.headphones_outlined
: Icons.menu_book_outlined,
size: 16,
color: AppColors.green,
),
const SizedBox(width: 6),
Text(
isListening ? '听力材料' : '阅读材料',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.green,
),
),
],
),
InkWell(
onTap: () => VoiceService.instance.speak(material.text),
borderRadius: BorderRadius.circular(16),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 4,
),
child: Row(
children: [
Icon(
Icons.volume_up_outlined,
size: 16,
color: AppColors.green,
),
const SizedBox(width: 4),
Text(
'朗读',
style: TextStyle(
fontSize: 13,
color: AppColors.green,
),
),
],
),
),
),
],
),
if (material.title.isNotEmpty) ...[
const SizedBox(height: 8),
Text(
material.title,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
],
const SizedBox(height: 8),
// A listening material stays hidden until played, so the learner
// listens instead of reading it. Reading materials show the text.
if (isListening)
_ListeningRevealText(state: widget.state, text: material.text)
else
LexiconText(
material.text,
state: widget.state,
style: const TextStyle(fontSize: 16, height: 1.6),
),
if (material.glosses.isNotEmpty) ...[
const SizedBox(height: 12),
_GlossList(glosses: material.glosses),
],
],
),
),
for (var q = 0; q < material.questions.length; q++)
_questionBlock(context, m, q),
],
);
}
Widget _questionBlock(BuildContext context, int m, int q) {
final question = _questions(m)[q];
final options = _options(m, q);
final chosen = _selected[m]?[q];
final revealed = _revealed.contains('$m-$q');
return SpacedColumn(
children: [
SectionCard(
tint: AppColors.surfaceMuted,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: AppColors.green.withValues(alpha: 0.12),
borderRadius: BorderRadius.circular(6),
),
child: Text(
'问题',
style: TextStyle(
color: AppColors.green,
fontWeight: FontWeight.bold,
fontSize: 12,
),
),
),
const SizedBox(width: 10),
Expanded(
child: Text(
question.question,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: AppColors.ink,
),
),
),
],
),
),
for (var index = 0; index < options.length; index++)
SectionCard(
tint: chosen == index
? (_isCorrect(m, q, index)
? AppColors.softGreen
: AppColors.warm)
: null,
onTap: () => setState(() {
(_selected[m] ??= {})[q] = index;
}),
child: Row(
children: [
Icon(
chosen == index
? (_isCorrect(m, q, index)
? Icons.check_circle
: Icons.cancel_outlined)
: Icons.radio_button_off,
color: chosen == index
? (_isCorrect(m, q, index)
? AppColors.green
: AppColors.warmInk)
: AppColors.muted,
),
const SizedBox(width: 12),
Expanded(
child: Text(
options[index],
style: TextStyle(
fontSize: 15,
fontWeight: chosen == index
? FontWeight.w600
: FontWeight.normal,
color: chosen == index
? (_isCorrect(m, q, index)
? AppColors.green
: AppColors.warmInk)
: AppColors.ink,
),
),
),
],
),
),
if (revealed)
SectionCard(
tint: AppColors.warm,
child: Text(
'答案:${question.answer}',
style: TextStyle(color: AppColors.warmInk),
),
)
else if (chosen != null && !_isCorrect(m, q, chosen))
TextButton(
onPressed: () => setState(() => _revealed.add('$m-$q')),
child: const Text('查看答案后继续'),
),
],
);
}
}
/// Keeps a listening material's transcript hidden until it has been played, so
/// the learner answers from listening rather than reading.
class _ListeningRevealText extends StatefulWidget {
const _ListeningRevealText({required this.state, required this.text});
final AppState state;
final String text;
@override
State<_ListeningRevealText> createState() => _ListeningRevealTextState();
}
class _ListeningRevealTextState extends State<_ListeningRevealText> {
bool _shown = false;
@override
Widget build(BuildContext context) {
if (_shown) {
return LexiconText(
widget.text,
state: widget.state,
style: const TextStyle(fontSize: 16, height: 1.6),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('先点“朗读”听两遍,再作答。', style: TextStyle(color: AppColors.muted)),
const SizedBox(height: 6),
TextButton.icon(
onPressed: () => setState(() => _shown = true),
icon: const Icon(Icons.visibility_outlined, size: 18),
label: const Text('显示原文'),
),
],
);
}
}
/// The material's untaught words with their Chinese glosses.
class _GlossList extends StatelessWidget {
const _GlossList({required this.glosses});
final Map<String, String> glosses;
@override
Widget build(BuildContext context) => Wrap(
spacing: 8,
runSpacing: 6,
children: [
for (final entry in glosses.entries)
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: AppColors.surface,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: AppColors.line),
),
child: Text(
'${entry.key} · ${entry.value}',
style: const TextStyle(fontSize: 13),
),
),
],
);
}
@@ -21,6 +21,9 @@ class _ReadingStepState extends State<_ReadingStep> {
int? selectedOptionIndex;
bool showAnswer = false;
/// Typed answers are judged on tap, not on every keystroke.
bool typedAnswerChecked = false;
/// 打乱后的选项:答案不再固定排在第一位,但同一道题顺序保持稳定。
late final List<String> options = shuffledOptions(
widget.activity.readingOptions,
@@ -332,7 +335,7 @@ class _ReadingStepState extends State<_ReadingStep> {
] else ...[
TextField(
controller: controller,
onChanged: (_) => setState(() {}),
onChanged: (_) => setState(() => typedAnswerChecked = false),
decoration: InputDecoration(
hintText: '用英文输入答案',
filled: true,
@@ -340,6 +343,14 @@ class _ReadingStepState extends State<_ReadingStep> {
border: OutlineInputBorder(),
),
),
if (typedAnswerChecked && !answeredCorrectly && !showAnswer)
SectionCard(
tint: AppColors.warm,
child: Text(
'不对哦:答案需要写全对话里的关键词。再读一遍对话,或查看答案后继续。',
style: TextStyle(color: AppColors.warmInk),
),
),
],
if (showAnswer)
SectionCard(
@@ -351,9 +362,7 @@ class _ReadingStepState extends State<_ReadingStep> {
),
if (!showAnswer &&
((isOptionMode && hasSelected && !answeredCorrectly) ||
(!isOptionMode &&
controller.text.isNotEmpty &&
!answeredCorrectly)))
(!isOptionMode && typedAnswerChecked && !answeredCorrectly)))
TextButton(
onPressed: () => setState(() => showAnswer = true),
child: const Text('查看答案后继续学习'),
@@ -364,6 +373,8 @@ class _ReadingStepState extends State<_ReadingStep> {
: (isOptionMode ? '请选择答案' : '检查并继续'),
onPressed: showAnswer || answeredCorrectly
? widget.onContinue
: !isOptionMode && controller.text.trim().isNotEmpty
? () => setState(() => typedAnswerChecked = true)
: null,
),
],
@@ -41,9 +41,8 @@ class _WritingStepState extends State<_WritingStep> {
}
setState(
() => result = WritingFeedback.check(
widget.lessonId,
widget.segmentId,
widget.controller.text,
segmentId: widget.segmentId,
),
);
}
@@ -65,6 +64,7 @@ class _WritingStepState extends State<_WritingStep> {
lessonId: widget.lessonId,
taskPrompt: widget.activity.writingPrompt,
answer: widget.controller.text.trim(),
level: lessonLevel(widget.lessonId),
);
if (!mounted) return;
setState(() {
@@ -89,7 +89,7 @@ class _WritingStepState extends State<_WritingStep> {
SectionCard(
tint: AppColors.surfaceMuted,
child: Text(
'小提示:${grammarNoteForSegment(widget.segmentId, widget.lessonId)}',
'小提示:${grammarNoteForSegment(widget.segmentId)}',
),
),
if (widget.showHelp)