1328 lines
42 KiB
Dart
1328 lines
42 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import '../models/vocabulary_book_model.dart';
|
||
import '../models/word_model.dart';
|
||
import '../providers/vocabulary_provider.dart';
|
||
import '../services/vocabulary_service.dart';
|
||
import '../../../core/network/api_client.dart';
|
||
import '../../../core/services/storage_service.dart';
|
||
import '../../../shared/widgets/custom_app_bar.dart';
|
||
import '../../../shared/widgets/custom_card.dart';
|
||
import '../../../shared/widgets/loading_widget.dart';
|
||
import '../../../shared/widgets/error_widget.dart' as custom_error;
|
||
import 'word_learning_screen.dart';
|
||
import 'study_screen.dart';
|
||
|
||
/// 词汇书详情页面
|
||
class VocabularyBookScreen extends ConsumerStatefulWidget {
|
||
final VocabularyBook vocabularyBook;
|
||
|
||
const VocabularyBookScreen({
|
||
super.key,
|
||
required this.vocabularyBook,
|
||
});
|
||
|
||
@override
|
||
ConsumerState<VocabularyBookScreen> createState() => _VocabularyBookScreenState();
|
||
}
|
||
|
||
class _VocabularyBookScreenState extends ConsumerState<VocabularyBookScreen>
|
||
with SingleTickerProviderStateMixin {
|
||
late TabController _tabController;
|
||
ScrollController? _scrollController;
|
||
|
||
List<Word> _words = [];
|
||
List<Word> _filteredWords = []; // 过滤后的单词列表
|
||
bool _isLoading = false;
|
||
bool _isLoadingMore = false; // 是否正在加载更多
|
||
String? _error;
|
||
UserVocabularyBookProgress? _progress;
|
||
bool _isLoadingProgress = false;
|
||
|
||
// 搜索相关
|
||
bool _isSearching = false;
|
||
final TextEditingController _searchController = TextEditingController();
|
||
String _searchQuery = '';
|
||
|
||
// 分页相关
|
||
int _currentPage = 1;
|
||
final int _pageSize = 50; // 每频50个单词
|
||
bool _hasMore = true; // 是否还有更多数据
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_tabController = TabController(length: 2, vsync: this);
|
||
_scrollController = ScrollController();
|
||
_scrollController?.addListener(_onScroll);
|
||
_loadVocabularyBookWords(); // 加载第一页
|
||
_loadProgress();
|
||
|
||
// 监听搜索输入变化
|
||
_searchController.addListener(_onSearchChanged);
|
||
}
|
||
|
||
/// 监听滚动，实现懒加载
|
||
void _onScroll() {
|
||
if (_scrollController == null) return;
|
||
// 如果滚动到底部80%的位置，且不在加载中，且还有更多数据
|
||
if (_scrollController!.position.pixels >= _scrollController!.position.maxScrollExtent * 0.8 &&
|
||
!_isLoadingMore &&
|
||
_hasMore &&
|
||
_tabController.index == 0) { // 只在单词列表标签触发
|
||
_loadMoreWords();
|
||
}
|
||
}
|
||
|
||
/// 加载更多单词
|
||
Future<void> _loadMoreWords() async {
|
||
if (_isLoadingMore || !_hasMore) return;
|
||
|
||
setState(() {
|
||
_isLoadingMore = true;
|
||
});
|
||
|
||
try {
|
||
_currentPage++;
|
||
final vocabularyService = VocabularyService(
|
||
apiClient: ApiClient.instance,
|
||
storageService: await StorageService.getInstance(),
|
||
);
|
||
|
||
final bookWords = await vocabularyService.getVocabularyBookWords(
|
||
widget.vocabularyBook.id,
|
||
page: _currentPage,
|
||
limit: _pageSize,
|
||
);
|
||
|
||
final newWords = bookWords
|
||
.where((bw) => bw.word != null)
|
||
.map((bw) => bw.word!)
|
||
.toList();
|
||
|
||
setState(() {
|
||
_words.addAll(newWords);
|
||
_filteredWords = _searchQuery.isEmpty ? _words : _filterWords(_searchQuery);
|
||
_isLoadingMore = false;
|
||
// 如果返回的数据少于pageSize，说明没有更多数据了
|
||
_hasMore = newWords.length >= _pageSize;
|
||
});
|
||
} catch (e) {
|
||
print('加载更多单词失败: $e');
|
||
setState(() {
|
||
_isLoadingMore = false;
|
||
_currentPage--; // 回退页码
|
||
});
|
||
}
|
||
}
|
||
|
||
/// 搜索输入变化监听
|
||
void _onSearchChanged() {
|
||
setState(() {
|
||
_searchQuery = _searchController.text;
|
||
_filteredWords = _searchQuery.isEmpty ? _words : _filterWords(_searchQuery);
|
||
});
|
||
}
|
||
|
||
/// 过滤单词
|
||
List<Word> _filterWords(String query) {
|
||
final lowerQuery = query.toLowerCase();
|
||
return _words.where((word) {
|
||
// 搜索单词、音标、释义
|
||
final wordMatch = word.word.toLowerCase().contains(lowerQuery);
|
||
final phoneticMatch = word.phonetic?.toLowerCase().contains(lowerQuery) ?? false;
|
||
final definitionMatch = word.definitions.any(
|
||
(def) => def.translation.toLowerCase().contains(lowerQuery),
|
||
);
|
||
return wordMatch || phoneticMatch || definitionMatch;
|
||
}).toList();
|
||
}
|
||
|
||
/// 切换搜索状态
|
||
void _toggleSearch() {
|
||
setState(() {
|
||
_isSearching = !_isSearching;
|
||
if (!_isSearching) {
|
||
_searchController.clear();
|
||
_searchQuery = '';
|
||
_filteredWords = _words;
|
||
}
|
||
});
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_scrollController?.removeListener(_onScroll);
|
||
_scrollController?.dispose();
|
||
_tabController.dispose();
|
||
_searchController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
/// 从后端API加载词汇书单词（第一页）
|
||
Future<void> _loadVocabularyBookWords() async {
|
||
setState(() {
|
||
_isLoading = true;
|
||
_error = null;
|
||
_currentPage = 1;
|
||
_hasMore = true;
|
||
});
|
||
|
||
try {
|
||
final vocabularyService = VocabularyService(
|
||
apiClient: ApiClient.instance,
|
||
storageService: await StorageService.getInstance(),
|
||
);
|
||
|
||
final bookWords = await vocabularyService.getVocabularyBookWords(
|
||
widget.vocabularyBook.id,
|
||
page: 1,
|
||
limit: _pageSize,
|
||
);
|
||
|
||
// 提取单词对象
|
||
final words = bookWords
|
||
.where((bw) => bw.word != null)
|
||
.map((bw) => bw.word!)
|
||
.toList();
|
||
|
||
setState(() {
|
||
_words = words;
|
||
_filteredWords = words; // 初始化过滤列表
|
||
_isLoading = false;
|
||
});
|
||
} catch (e) {
|
||
print('加载词汇书单词失败: $e');
|
||
setState(() {
|
||
_error = '加载失败，请稍后重试';
|
||
_isLoading = false;
|
||
// API失败时显示空状态，不使用模拟数据
|
||
_words = [];
|
||
});
|
||
}
|
||
}
|
||
|
||
/// 加载学习进度
|
||
Future<void> _loadProgress({bool forceRefresh = false}) async {
|
||
setState(() {
|
||
_isLoadingProgress = true;
|
||
});
|
||
|
||
try {
|
||
final vocabularyService = VocabularyService(
|
||
apiClient: ApiClient.instance,
|
||
storageService: await StorageService.getInstance(),
|
||
);
|
||
|
||
final progress = await vocabularyService.getVocabularyBookProgress(
|
||
widget.vocabularyBook.id,
|
||
forceRefresh: forceRefresh, // 传递强制刷新参数
|
||
);
|
||
|
||
setState(() {
|
||
_progress = progress;
|
||
_isLoadingProgress = false;
|
||
});
|
||
} catch (e) {
|
||
print('加载学习进度失败: $e');
|
||
setState(() {
|
||
_isLoadingProgress = false;
|
||
// 使用默认进度
|
||
_progress = UserVocabularyBookProgress(
|
||
id: '0',
|
||
userId: '0',
|
||
vocabularyBookId: widget.vocabularyBook.id,
|
||
learnedWords: 0,
|
||
masteredWords: 0,
|
||
progressPercentage: 0.0,
|
||
streakDays: 0,
|
||
totalStudyDays: 0,
|
||
averageDailyWords: 0.0,
|
||
startedAt: DateTime.now(),
|
||
lastStudiedAt: null,
|
||
);
|
||
});
|
||
}
|
||
}
|
||
|
||
void _handleMenuAction(String action) {
|
||
switch (action) {
|
||
case 'start_learning':
|
||
_startLearning(context);
|
||
break;
|
||
case 'vocabulary_test':
|
||
_startVocabularyTest();
|
||
break;
|
||
case 'smart_review':
|
||
_startSmartReview();
|
||
break;
|
||
case 'export':
|
||
_exportWords();
|
||
break;
|
||
}
|
||
}
|
||
|
||
void _startLearning(BuildContext context) async {
|
||
// 显示学习目标选择对话框
|
||
double selectedGoal = 20.0;
|
||
|
||
final dailyGoal = await showDialog<int>(
|
||
context: context,
|
||
builder: (context) => StatefulBuilder(
|
||
builder: (context, setState) {
|
||
return AlertDialog(
|
||
title: const Text('设置学习目标'),
|
||
content: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
const Text('请选择每日学习单词数：'),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'${selectedGoal.toInt()}个单词',
|
||
style: const TextStyle(
|
||
fontSize: 24,
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.blue,
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
Slider(
|
||
value: selectedGoal,
|
||
min: 5,
|
||
max: 50,
|
||
divisions: 9,
|
||
label: '${selectedGoal.toInt()}个单词',
|
||
onChanged: (value) {
|
||
setState(() {
|
||
selectedGoal = value;
|
||
});
|
||
},
|
||
),
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
Text('5', style: TextStyle(color: Colors.grey[600])),
|
||
Text('50', style: TextStyle(color: Colors.grey[600])),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () => Navigator.of(context).pop(),
|
||
child: const Text('取消'),
|
||
),
|
||
ElevatedButton(
|
||
onPressed: () => Navigator.of(context).pop(selectedGoal.toInt()),
|
||
child: const Text('开始学习'),
|
||
),
|
||
],
|
||
);
|
||
},
|
||
),
|
||
);
|
||
|
||
if (dailyGoal == null) return;
|
||
|
||
// 导航到学习页面
|
||
final result = await Navigator.of(context).push(
|
||
MaterialPageRoute(
|
||
builder: (context) => StudyScreen(
|
||
vocabularyBook: widget.vocabularyBook,
|
||
dailyGoal: dailyGoal,
|
||
),
|
||
),
|
||
);
|
||
|
||
// 学习完成后强制刷新进度（跳过缓存）
|
||
if (result == true) {
|
||
_loadProgress(forceRefresh: true);
|
||
}
|
||
}
|
||
|
||
void _startVocabularyTest() {
|
||
Navigator.of(context).pushNamed(
|
||
'/vocabulary_test',
|
||
arguments: {
|
||
'vocabularyBook': widget.vocabularyBook,
|
||
'testType': 'bookTest',
|
||
'questionCount': 20,
|
||
},
|
||
);
|
||
}
|
||
|
||
void _startSmartReview() {
|
||
final reviewWords = _words.where((word) {
|
||
// 这里可以根据学习进度和遗忘曲线来筛选需要复习的单词
|
||
// 暂时返回所有单词
|
||
return true;
|
||
}).toList();
|
||
|
||
if (reviewWords.isEmpty) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('暂无需要复习的单词')),
|
||
);
|
||
return;
|
||
}
|
||
|
||
Navigator.of(context).pushNamed(
|
||
'/smart_review',
|
||
arguments: {
|
||
'vocabularyBook': widget.vocabularyBook,
|
||
'words': reviewWords,
|
||
'reviewMode': 'adaptive',
|
||
},
|
||
);
|
||
}
|
||
|
||
void _exportWords() {
|
||
showDialog(
|
||
context: context,
|
||
builder: (context) => AlertDialog(
|
||
title: const Text('导出单词'),
|
||
content: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
ListTile(
|
||
leading: const Icon(Icons.text_snippet),
|
||
title: const Text('导出为文本文件'),
|
||
onTap: () {
|
||
Navigator.of(context).pop();
|
||
_exportAsText();
|
||
},
|
||
),
|
||
ListTile(
|
||
leading: const Icon(Icons.table_chart),
|
||
title: const Text('导出为Excel文件'),
|
||
onTap: () {
|
||
Navigator.of(context).pop();
|
||
_exportAsExcel();
|
||
},
|
||
),
|
||
ListTile(
|
||
leading: const Icon(Icons.picture_as_pdf),
|
||
title: const Text('导出为PDF文件'),
|
||
onTap: () {
|
||
Navigator.of(context).pop();
|
||
_exportAsPDF();
|
||
},
|
||
),
|
||
],
|
||
),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: () => Navigator.of(context).pop(),
|
||
child: const Text('取消'),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
void _exportAsText() {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('正在导出为文本文件...')),
|
||
);
|
||
// TODO: 实现文本导出功能
|
||
}
|
||
|
||
void _exportAsExcel() {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('正在导出为Excel文件...')),
|
||
);
|
||
// TODO: 实现Excel导出功能
|
||
}
|
||
|
||
void _exportAsPDF() {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('正在导出为PDF文件...')),
|
||
);
|
||
// TODO: 实现PDF导出功能
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
appBar: TabAppBar(
|
||
title: widget.vocabularyBook.name,
|
||
controller: _tabController,
|
||
tabs: const [
|
||
Tab(text: '单词列表'),
|
||
Tab(text: '学习进度'),
|
||
],
|
||
actions: [
|
||
IconButton(
|
||
icon: Icon(_isSearching ? Icons.close : Icons.search),
|
||
onPressed: _toggleSearch,
|
||
),
|
||
PopupMenuButton<String>(
|
||
onSelected: _handleMenuAction,
|
||
itemBuilder: (context) => [
|
||
const PopupMenuItem(
|
||
value: 'start_learning',
|
||
child: Row(
|
||
children: [
|
||
Icon(Icons.school),
|
||
SizedBox(width: 8),
|
||
Text('开始学习'),
|
||
],
|
||
),
|
||
),
|
||
const PopupMenuItem(
|
||
value: 'vocabulary_test',
|
||
child: Row(
|
||
children: [
|
||
Icon(Icons.quiz),
|
||
SizedBox(width: 8),
|
||
Text('词汇测试'),
|
||
],
|
||
),
|
||
),
|
||
const PopupMenuItem(
|
||
value: 'smart_review',
|
||
child: Row(
|
||
children: [
|
||
Icon(Icons.psychology),
|
||
SizedBox(width: 8),
|
||
Text('智能复习'),
|
||
],
|
||
),
|
||
),
|
||
const PopupMenuItem(
|
||
value: 'export',
|
||
child: Row(
|
||
children: [
|
||
Icon(Icons.download),
|
||
SizedBox(width: 8),
|
||
Text('导出单词'),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
body: Column(
|
||
children: [
|
||
// 搜索框
|
||
if (_isSearching)
|
||
Container(
|
||
padding: const EdgeInsets.all(16),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withOpacity(0.05),
|
||
blurRadius: 4,
|
||
offset: const Offset(0, 2),
|
||
),
|
||
],
|
||
),
|
||
child: TextField(
|
||
controller: _searchController,
|
||
autofocus: true,
|
||
decoration: InputDecoration(
|
||
hintText: '搜索单词、音标或释义...',
|
||
prefixIcon: const Icon(Icons.search),
|
||
suffixIcon: _searchQuery.isNotEmpty
|
||
? IconButton(
|
||
icon: const Icon(Icons.clear),
|
||
onPressed: () {
|
||
_searchController.clear();
|
||
},
|
||
)
|
||
: null,
|
||
border: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(12),
|
||
borderSide: BorderSide(color: Colors.grey[300]!),
|
||
),
|
||
focusedBorder: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(12),
|
||
borderSide: BorderSide(
|
||
color: Theme.of(context).primaryColor,
|
||
width: 2,
|
||
),
|
||
),
|
||
filled: true,
|
||
fillColor: Colors.grey[50],
|
||
),
|
||
),
|
||
),
|
||
// TabBarView
|
||
Expanded(
|
||
child: TabBarView(
|
||
controller: _tabController,
|
||
children: [
|
||
_buildWordListTab(),
|
||
_buildProgressTab(),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
floatingActionButton: _buildFloatingActionButton(),
|
||
);
|
||
}
|
||
|
||
Widget _buildFloatingActionButton() {
|
||
return Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
FloatingActionButton.extended(
|
||
onPressed: () => _startLearning(context),
|
||
icon: const Icon(Icons.school),
|
||
label: const Text('开始学习'),
|
||
heroTag: 'start_learning',
|
||
),
|
||
const SizedBox(height: 8),
|
||
FloatingActionButton(
|
||
onPressed: () => _startVocabularyTest(),
|
||
child: const Icon(Icons.quiz),
|
||
heroTag: 'vocabulary_test',
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildWordListTab() {
|
||
if (_isLoading) {
|
||
return const Center(child: LoadingWidget());
|
||
}
|
||
|
||
if (_error != null) {
|
||
return Center(
|
||
child: custom_error.PageErrorWidget(
|
||
message: _error!,
|
||
onRetry: _loadVocabularyBookWords,
|
||
),
|
||
);
|
||
}
|
||
|
||
if (_words.isEmpty) {
|
||
return Center(
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
Icons.book_outlined,
|
||
size: 64,
|
||
color: Colors.grey[400],
|
||
),
|
||
const SizedBox(height: 16),
|
||
Text(
|
||
'暂无单词',
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'该词汇书还没有单词',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[500],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
return RefreshIndicator(
|
||
onRefresh: _loadVocabularyBookWords,
|
||
child: ListView.builder(
|
||
controller: _scrollController, // 可以为null，ListView会自动处理
|
||
padding: const EdgeInsets.all(16),
|
||
itemCount: _filteredWords.length + (_hasMore && _searchQuery.isEmpty ? 1 : 0), // 搜索时不显示加载更多
|
||
itemBuilder: (context, index) {
|
||
// 搜索结果提示
|
||
if (_searchQuery.isNotEmpty && index == 0 && _filteredWords.isEmpty) {
|
||
return _buildNoResultsWidget();
|
||
}
|
||
|
||
// 如果是最后一项且还有更多数据，显示加载指示器
|
||
if (index == _filteredWords.length && _searchQuery.isEmpty) {
|
||
return _buildLoadingIndicator();
|
||
}
|
||
|
||
final word = _filteredWords[index];
|
||
return _buildWordCard(word, index);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 构建无搜索结果提示
|
||
Widget _buildNoResultsWidget() {
|
||
return Center(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(48),
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
Icons.search_off,
|
||
size: 64,
|
||
color: Colors.grey[400],
|
||
),
|
||
const SizedBox(height: 16),
|
||
Text(
|
||
'未找到相关单词',
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'请尝试使用其他关键词搜索',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[500],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 构建加载更多指示器
|
||
Widget _buildLoadingIndicator() {
|
||
return Padding(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Center(
|
||
child: Column(
|
||
children: [
|
||
const CircularProgressIndicator(),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
'正在加载更多...',
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildWordCard(Word word, int index) {
|
||
return CustomCard(
|
||
margin: const EdgeInsets.only(bottom: 12),
|
||
child: InkWell(
|
||
onTap: () => _showWordDetail(word),
|
||
borderRadius: BorderRadius.circular(12),
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Container(
|
||
width: 32,
|
||
height: 32,
|
||
decoration: BoxDecoration(
|
||
color: Theme.of(context).primaryColor.withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
child: Center(
|
||
child: Text(
|
||
'${index + 1}',
|
||
style: TextStyle(
|
||
color: Theme.of(context).primaryColor,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Text(
|
||
word.word,
|
||
style: const TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
if (word.phonetic != null) ...[
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
word.phonetic!,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
if (word.definitions.isNotEmpty) ...[
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
word.definitions.first.translation,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[700],
|
||
),
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
IconButton(
|
||
icon: const Icon(Icons.volume_up),
|
||
onPressed: () => _playWordPronunciation(word),
|
||
),
|
||
],
|
||
),
|
||
if (word.examples.isNotEmpty) ...[
|
||
const SizedBox(height: 12),
|
||
Container(
|
||
padding: const EdgeInsets.all(12),
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[100],
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
word.examples.first.sentence,
|
||
style: const TextStyle(
|
||
fontSize: 13,
|
||
fontStyle: FontStyle.italic,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
word.examples.first.translation,
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
void _showWordDetail(Word word) {
|
||
showModalBottomSheet(
|
||
context: context,
|
||
isScrollControlled: true,
|
||
backgroundColor: Colors.transparent,
|
||
builder: (context) => DraggableScrollableSheet(
|
||
initialChildSize: 0.7,
|
||
minChildSize: 0.5,
|
||
maxChildSize: 0.95,
|
||
builder: (context, scrollController) => Container(
|
||
decoration: const BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
||
),
|
||
child: Column(
|
||
children: [
|
||
Container(
|
||
margin: const EdgeInsets.symmetric(vertical: 12),
|
||
width: 40,
|
||
height: 4,
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[300],
|
||
borderRadius: BorderRadius.circular(2),
|
||
),
|
||
),
|
||
Expanded(
|
||
child: ListView(
|
||
controller: scrollController,
|
||
padding: const EdgeInsets.all(24),
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
word.word,
|
||
style: const TextStyle(
|
||
fontSize: 28,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
if (word.phonetic != null) ...[
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
word.phonetic!,
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
IconButton(
|
||
icon: const Icon(Icons.volume_up, size: 32),
|
||
onPressed: () => _playWordPronunciation(word),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 24),
|
||
const Text(
|
||
'释义',
|
||
style: TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
...word.definitions.map((def) => Padding(
|
||
padding: const EdgeInsets.only(bottom: 12),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 8,
|
||
vertical: 4,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: Theme.of(context).primaryColor.withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Text(
|
||
_getWordTypeText(def.type),
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: Theme.of(context).primaryColor,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: Text(
|
||
def.translation,
|
||
style: const TextStyle(fontSize: 16),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
)),
|
||
if (word.examples.isNotEmpty) ...[
|
||
const SizedBox(height: 24),
|
||
const Text(
|
||
'例句',
|
||
style: TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
...word.examples.map((example) => Container(
|
||
margin: const EdgeInsets.only(bottom: 16),
|
||
padding: const EdgeInsets.all(16),
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[100],
|
||
borderRadius: BorderRadius.circular(12),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
example.sentence,
|
||
style: const TextStyle(
|
||
fontSize: 15,
|
||
fontStyle: FontStyle.italic,
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
example.translation,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[700],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
)),
|
||
],
|
||
if (word.synonyms.isNotEmpty) ...[
|
||
const SizedBox(height: 24),
|
||
const Text(
|
||
'同义词',
|
||
style: TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
Wrap(
|
||
spacing: 8,
|
||
runSpacing: 8,
|
||
children: word.synonyms.map((synonym) => Chip(
|
||
label: Text(synonym),
|
||
backgroundColor: Colors.blue[50],
|
||
)).toList(),
|
||
),
|
||
],
|
||
if (word.antonyms.isNotEmpty) ...[
|
||
const SizedBox(height: 24),
|
||
const Text(
|
||
'反义词',
|
||
style: TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
Wrap(
|
||
spacing: 8,
|
||
runSpacing: 8,
|
||
children: word.antonyms.map((antonym) => Chip(
|
||
label: Text(antonym),
|
||
backgroundColor: Colors.orange[50],
|
||
)).toList(),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
String _getWordTypeText(WordType type) {
|
||
switch (type) {
|
||
case WordType.noun:
|
||
return 'n.';
|
||
case WordType.verb:
|
||
return 'v.';
|
||
case WordType.adjective:
|
||
return 'adj.';
|
||
case WordType.adverb:
|
||
return 'adv.';
|
||
case WordType.pronoun:
|
||
return 'pron.';
|
||
case WordType.preposition:
|
||
return 'prep.';
|
||
case WordType.conjunction:
|
||
return 'conj.';
|
||
case WordType.interjection:
|
||
return 'interj.';
|
||
case WordType.article:
|
||
return 'art.';
|
||
case WordType.phrase:
|
||
return 'phrase';
|
||
}
|
||
}
|
||
|
||
void _playWordPronunciation(Word word) {
|
||
// TODO: 实现音频播放功能
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text('播放 ${word.word} 的发音')),
|
||
);
|
||
}
|
||
|
||
Widget _buildProgressTab() {
|
||
if (_isLoadingProgress) {
|
||
return const Center(child: LoadingWidget());
|
||
}
|
||
|
||
if (_progress == null) {
|
||
return Center(
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(Icons.trending_up, size: 64, color: Colors.grey[400]),
|
||
const SizedBox(height: 16),
|
||
Text(
|
||
'暂无学习进度',
|
||
style: TextStyle(fontSize: 16, color: Colors.grey[600]),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
return RefreshIndicator(
|
||
onRefresh: () => _loadProgress(forceRefresh: true), // 下拉刷新强制跳过缓存
|
||
child: ListView(
|
||
padding: const EdgeInsets.all(16),
|
||
children: [
|
||
// 整体进度卡片
|
||
CustomCard(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(20),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
const Text(
|
||
'整体进度',
|
||
style: TextStyle(
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 12,
|
||
vertical: 6,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: Theme.of(context).primaryColor.withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(12),
|
||
),
|
||
child: Text(
|
||
'${_progress!.progressPercentage.toStringAsFixed(1)}%',
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.bold,
|
||
color: Theme.of(context).primaryColor,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 20),
|
||
// 进度条
|
||
ClipRRect(
|
||
borderRadius: BorderRadius.circular(10),
|
||
child: LinearProgressIndicator(
|
||
value: _progress!.progressPercentage / 100,
|
||
minHeight: 20,
|
||
backgroundColor: Colors.grey[200],
|
||
valueColor: AlwaysStoppedAnimation<Color>(
|
||
Theme.of(context).primaryColor,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
// 进度详情
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
Text(
|
||
'${_progress!.learnedWords} / ${widget.vocabularyBook.totalWords} 个单词',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
Text(
|
||
'剩余 ${widget.vocabularyBook.totalWords - _progress!.learnedWords} 个',
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
// 单词状态统计
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: _buildStatCard(
|
||
'已学习',
|
||
_progress!.learnedWords.toString(),
|
||
Icons.school,
|
||
Colors.blue,
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: _buildStatCard(
|
||
'已掌握',
|
||
_progress!.masteredWords.toString(),
|
||
Icons.check_circle,
|
||
Colors.green,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 12),
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: _buildStatCard(
|
||
'待复习',
|
||
'0',
|
||
Icons.refresh,
|
||
Colors.orange,
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: _buildStatCard(
|
||
'未学习',
|
||
'${widget.vocabularyBook.totalWords - _progress!.learnedWords}',
|
||
Icons.fiber_new,
|
||
Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 16),
|
||
// 学习信息
|
||
CustomCard(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const Text(
|
||
'学习信息',
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
_buildInfoRow(
|
||
Icons.calendar_today,
|
||
'累计学习',
|
||
'${_progress!.totalStudyDays} 天',
|
||
),
|
||
const Divider(height: 24),
|
||
_buildInfoRow(
|
||
Icons.trending_up,
|
||
'掌握率',
|
||
'${(_progress!.masteredWords / widget.vocabularyBook.totalWords * 100).toStringAsFixed(1)}%',
|
||
),
|
||
const Divider(height: 24),
|
||
_buildInfoRow(
|
||
Icons.access_time,
|
||
'上次学习',
|
||
_progress!.lastStudiedAt != null
|
||
? _formatDateTime(_progress!.lastStudiedAt!)
|
||
: '从未学习',
|
||
),
|
||
const Divider(height: 24),
|
||
_buildInfoRow(
|
||
Icons.play_circle_outline,
|
||
'开始时间',
|
||
_formatDateTime(_progress!.startedAt),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildStatCard(String label, String value, IconData icon, Color color) {
|
||
return CustomCard(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(16),
|
||
child: Column(
|
||
children: [
|
||
Container(
|
||
padding: const EdgeInsets.all(10),
|
||
decoration: BoxDecoration(
|
||
color: color.withOpacity(0.1),
|
||
borderRadius: BorderRadius.circular(10),
|
||
),
|
||
child: Icon(icon, size: 24, color: color),
|
||
),
|
||
const SizedBox(height: 12),
|
||
Text(
|
||
value,
|
||
style: TextStyle(
|
||
fontSize: 24,
|
||
fontWeight: FontWeight.bold,
|
||
color: color,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey[600],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildInfoRow(IconData icon, String label, String value) {
|
||
return Row(
|
||
children: [
|
||
Icon(icon, size: 20, color: Colors.grey[600]),
|
||
const SizedBox(width: 12),
|
||
Expanded(
|
||
child: Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
color: Colors.grey[700],
|
||
),
|
||
),
|
||
),
|
||
Text(
|
||
value,
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
String _formatDateTime(DateTime dateTime) {
|
||
final now = DateTime.now();
|
||
final difference = now.difference(dateTime);
|
||
|
||
if (difference.inDays == 0) {
|
||
if (difference.inHours == 0) {
|
||
if (difference.inMinutes == 0) {
|
||
return '刚刚';
|
||
}
|
||
return '${difference.inMinutes} 分钟前';
|
||
}
|
||
return '${difference.inHours} 小时前';
|
||
} else if (difference.inDays == 1) {
|
||
return '昨天';
|
||
} else if (difference.inDays < 7) {
|
||
return '${difference.inDays} 天前';
|
||
} else {
|
||
return '${dateTime.year}-${dateTime.month.toString().padLeft(2, '0')}-${dateTime.day.toString().padLeft(2, '0')}';
|
||
}
|
||
}
|
||
} |