519 lines
16 KiB
Dart
519 lines
16 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||
|
|
import '../../../core/utils/responsive_utils.dart';
|
|||
|
|
import '../../../shared/widgets/custom_app_bar.dart';
|
|||
|
|
import '../../../shared/widgets/loading_widget.dart';
|
|||
|
|
|
|||
|
|
class AIRecommendationScreen extends ConsumerStatefulWidget {
|
|||
|
|
const AIRecommendationScreen({super.key});
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
ConsumerState<AIRecommendationScreen> createState() => _AIRecommendationScreenState();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class _AIRecommendationScreenState extends ConsumerState<AIRecommendationScreen> {
|
|||
|
|
bool _isLoading = false;
|
|||
|
|
List<RecommendationItem> _recommendations = [];
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
void initState() {
|
|||
|
|
super.initState();
|
|||
|
|
_loadRecommendations();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Future<void> _loadRecommendations() async {
|
|||
|
|
setState(() {
|
|||
|
|
_isLoading = true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 模拟AI推荐数据加载
|
|||
|
|
await Future.delayed(const Duration(milliseconds: 1000));
|
|||
|
|
|
|||
|
|
setState(() {
|
|||
|
|
_recommendations = _generateRecommendations();
|
|||
|
|
_isLoading = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
List<RecommendationItem> _generateRecommendations() {
|
|||
|
|
return [
|
|||
|
|
RecommendationItem(
|
|||
|
|
type: RecommendationType.vocabulary,
|
|||
|
|
title: '商务英语词汇强化',
|
|||
|
|
description: '基于您的学习历史，建议加强商务场景词汇学习',
|
|||
|
|
priority: 'high',
|
|||
|
|
estimatedTime: '15分钟',
|
|||
|
|
icon: Icons.business_center,
|
|||
|
|
color: Colors.blue,
|
|||
|
|
action: '开始学习',
|
|||
|
|
details: [
|
|||
|
|
'包含50个高频商务词汇',
|
|||
|
|
'涵盖会议、谈判、报告等场景',
|
|||
|
|
'配有真实商务对话示例',
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
RecommendationItem(
|
|||
|
|
type: RecommendationType.review,
|
|||
|
|
title: '复习昨日学习内容',
|
|||
|
|
description: '您有8个单词需要复习，趁热打铁效果更佳',
|
|||
|
|
priority: 'high',
|
|||
|
|
estimatedTime: '10分钟',
|
|||
|
|
icon: Icons.refresh,
|
|||
|
|
color: Colors.orange,
|
|||
|
|
action: '立即复习',
|
|||
|
|
details: [
|
|||
|
|
'8个单词待复习',
|
|||
|
|
'基于遗忘曲线算法推荐',
|
|||
|
|
'巩固记忆效果显著',
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
RecommendationItem(
|
|||
|
|
type: RecommendationType.test,
|
|||
|
|
title: '词汇测试挑战',
|
|||
|
|
description: '测试您的词汇掌握程度，发现薄弱环节',
|
|||
|
|
priority: 'medium',
|
|||
|
|
estimatedTime: '20分钟',
|
|||
|
|
icon: Icons.quiz,
|
|||
|
|
color: Colors.green,
|
|||
|
|
action: '开始测试',
|
|||
|
|
details: [
|
|||
|
|
'30道精选测试题',
|
|||
|
|
'多种题型组合',
|
|||
|
|
'即时反馈和解析',
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
RecommendationItem(
|
|||
|
|
type: RecommendationType.plan,
|
|||
|
|
title: '制定本周学习计划',
|
|||
|
|
description: '为您量身定制的学习计划，提高学习效率',
|
|||
|
|
priority: 'medium',
|
|||
|
|
estimatedTime: '5分钟',
|
|||
|
|
icon: Icons.schedule,
|
|||
|
|
color: Colors.purple,
|
|||
|
|
action: '查看计划',
|
|||
|
|
details: [
|
|||
|
|
'个性化学习路径',
|
|||
|
|
'合理安排学习时间',
|
|||
|
|
'目标导向的学习方案',
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
RecommendationItem(
|
|||
|
|
type: RecommendationType.weakness,
|
|||
|
|
title: '语法薄弱点强化',
|
|||
|
|
description: '针对您在时态方面的薄弱点进行专项训练',
|
|||
|
|
priority: 'low',
|
|||
|
|
estimatedTime: '25分钟',
|
|||
|
|
icon: Icons.trending_up,
|
|||
|
|
color: Colors.red,
|
|||
|
|
action: '开始训练',
|
|||
|
|
details: [
|
|||
|
|
'时态专项练习',
|
|||
|
|
'常见错误纠正',
|
|||
|
|
'实用例句训练',
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
Widget build(BuildContext context) {
|
|||
|
|
final isMobile = ResponsiveUtils.isMobile(context);
|
|||
|
|
|
|||
|
|
return Scaffold(
|
|||
|
|
appBar: CustomAppBar(
|
|||
|
|
title: 'AI助手推荐',
|
|||
|
|
),
|
|||
|
|
body: _isLoading
|
|||
|
|
? const LoadingWidget()
|
|||
|
|
: _buildContent(context, isMobile),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildContent(BuildContext context, bool isMobile) {
|
|||
|
|
return RefreshIndicator(
|
|||
|
|
onRefresh: _loadRecommendations,
|
|||
|
|
child: SingleChildScrollView(
|
|||
|
|
padding: EdgeInsets.all(isMobile ? 16.0 : 24.0),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
_buildHeader(context, isMobile),
|
|||
|
|
const SizedBox(height: 24),
|
|||
|
|
_buildRecommendationsList(context, isMobile),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildHeader(BuildContext context, bool isMobile) {
|
|||
|
|
return Container(
|
|||
|
|
padding: EdgeInsets.all(isMobile ? 20.0 : 24.0),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
gradient: LinearGradient(
|
|||
|
|
colors: [Colors.purple.shade400, Colors.blue.shade500],
|
|||
|
|
begin: Alignment.topLeft,
|
|||
|
|
end: Alignment.bottomRight,
|
|||
|
|
),
|
|||
|
|
borderRadius: BorderRadius.circular(16),
|
|||
|
|
boxShadow: [
|
|||
|
|
BoxShadow(
|
|||
|
|
color: Colors.purple.withOpacity(0.3),
|
|||
|
|
blurRadius: 8,
|
|||
|
|
offset: const Offset(0, 4),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.all(12),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.white.withOpacity(0.2),
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
),
|
|||
|
|
child: Icon(
|
|||
|
|
Icons.psychology,
|
|||
|
|
color: Colors.white,
|
|||
|
|
size: isMobile ? 28 : 32,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 16),
|
|||
|
|
Expanded(
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
'AI智能推荐',
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: Colors.white,
|
|||
|
|
fontSize: isMobile ? 20 : 24,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Text(
|
|||
|
|
'基于您的学习数据智能分析',
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: Colors.white.withOpacity(0.9),
|
|||
|
|
fontSize: isMobile ? 14 : 16,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.all(12),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: Colors.white.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(8),
|
|||
|
|
),
|
|||
|
|
child: Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(
|
|||
|
|
Icons.lightbulb,
|
|||
|
|
color: Colors.yellow.shade300,
|
|||
|
|
size: 20,
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 8),
|
|||
|
|
Expanded(
|
|||
|
|
child: Text(
|
|||
|
|
'今日为您推荐了 ${_recommendations.length} 项学习内容',
|
|||
|
|
style: TextStyle(
|
|||
|
|
color: Colors.white,
|
|||
|
|
fontSize: isMobile ? 13 : 15,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildRecommendationsList(BuildContext context, bool isMobile) {
|
|||
|
|
return Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Text(
|
|||
|
|
'推荐内容',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: isMobile ? 18 : 20,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
color: Colors.grey[800],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
ListView.separated(
|
|||
|
|
shrinkWrap: true,
|
|||
|
|
physics: const NeverScrollableScrollPhysics(),
|
|||
|
|
itemCount: _recommendations.length,
|
|||
|
|
separatorBuilder: (context, index) => const SizedBox(height: 16),
|
|||
|
|
itemBuilder: (context, index) {
|
|||
|
|
return _buildRecommendationCard(
|
|||
|
|
context,
|
|||
|
|
_recommendations[index],
|
|||
|
|
isMobile,
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildRecommendationCard(
|
|||
|
|
BuildContext context,
|
|||
|
|
RecommendationItem item,
|
|||
|
|
bool isMobile,
|
|||
|
|
) {
|
|||
|
|
return Card(
|
|||
|
|
elevation: 3,
|
|||
|
|
shape: RoundedRectangleBorder(
|
|||
|
|
borderRadius: BorderRadius.circular(16),
|
|||
|
|
),
|
|||
|
|
child: InkWell(
|
|||
|
|
onTap: () => _handleRecommendationTap(item),
|
|||
|
|
borderRadius: BorderRadius.circular(16),
|
|||
|
|
child: Padding(
|
|||
|
|
padding: EdgeInsets.all(isMobile ? 16.0 : 20.0),
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
padding: const EdgeInsets.all(12),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: item.color.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
),
|
|||
|
|
child: Icon(
|
|||
|
|
item.icon,
|
|||
|
|
color: item.color,
|
|||
|
|
size: isMobile ? 24 : 28,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 16),
|
|||
|
|
Expanded(
|
|||
|
|
child: Column(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Expanded(
|
|||
|
|
child: Text(
|
|||
|
|
item.title,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: isMobile ? 16 : 18,
|
|||
|
|
fontWeight: FontWeight.bold,
|
|||
|
|
color: Colors.grey[800],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
_buildPriorityBadge(item.priority),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 4),
|
|||
|
|
Row(
|
|||
|
|
children: [
|
|||
|
|
Icon(
|
|||
|
|
Icons.access_time,
|
|||
|
|
size: 16,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 4),
|
|||
|
|
Text(
|
|||
|
|
item.estimatedTime,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
Text(
|
|||
|
|
item.description,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: isMobile ? 14 : 16,
|
|||
|
|
color: Colors.grey[700],
|
|||
|
|
height: 1.4,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
ExpansionTile(
|
|||
|
|
title: const Text(
|
|||
|
|
'查看详情',
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 14,
|
|||
|
|
fontWeight: FontWeight.w500,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
tilePadding: EdgeInsets.zero,
|
|||
|
|
childrenPadding: const EdgeInsets.only(top: 8),
|
|||
|
|
children: [
|
|||
|
|
...item.details.map((detail) => Padding(
|
|||
|
|
padding: const EdgeInsets.only(bottom: 4),
|
|||
|
|
child: Row(
|
|||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|||
|
|
children: [
|
|||
|
|
Container(
|
|||
|
|
margin: const EdgeInsets.only(top: 6),
|
|||
|
|
width: 4,
|
|||
|
|
height: 4,
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: item.color,
|
|||
|
|
shape: BoxShape.circle,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
const SizedBox(width: 8),
|
|||
|
|
Expanded(
|
|||
|
|
child: Text(
|
|||
|
|
detail,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 13,
|
|||
|
|
color: Colors.grey[600],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
)),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
const SizedBox(height: 16),
|
|||
|
|
SizedBox(
|
|||
|
|
width: double.infinity,
|
|||
|
|
child: ElevatedButton(
|
|||
|
|
onPressed: () => _handleRecommendationTap(item),
|
|||
|
|
style: ElevatedButton.styleFrom(
|
|||
|
|
backgroundColor: item.color,
|
|||
|
|
foregroundColor: Colors.white,
|
|||
|
|
padding: EdgeInsets.symmetric(
|
|||
|
|
vertical: isMobile ? 12 : 16,
|
|||
|
|
),
|
|||
|
|
shape: RoundedRectangleBorder(
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
item.action,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: isMobile ? 14 : 16,
|
|||
|
|
fontWeight: FontWeight.w600,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Widget _buildPriorityBadge(String priority) {
|
|||
|
|
Color color;
|
|||
|
|
String text;
|
|||
|
|
|
|||
|
|
switch (priority) {
|
|||
|
|
case 'high':
|
|||
|
|
color = Colors.red;
|
|||
|
|
text = '高优先级';
|
|||
|
|
break;
|
|||
|
|
case 'medium':
|
|||
|
|
color = Colors.orange;
|
|||
|
|
text = '中优先级';
|
|||
|
|
break;
|
|||
|
|
case 'low':
|
|||
|
|
color = Colors.green;
|
|||
|
|
text = '低优先级';
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
color = Colors.grey;
|
|||
|
|
text = '普通';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return Container(
|
|||
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|||
|
|
decoration: BoxDecoration(
|
|||
|
|
color: color.withOpacity(0.1),
|
|||
|
|
borderRadius: BorderRadius.circular(12),
|
|||
|
|
border: Border.all(color: color, width: 1),
|
|||
|
|
),
|
|||
|
|
child: Text(
|
|||
|
|
text,
|
|||
|
|
style: TextStyle(
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: color,
|
|||
|
|
fontWeight: FontWeight.w500,
|
|||
|
|
),
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
void _handleRecommendationTap(RecommendationItem item) {
|
|||
|
|
switch (item.type) {
|
|||
|
|
case RecommendationType.vocabulary:
|
|||
|
|
Navigator.of(context).pushNamed('/vocabulary/daily-words');
|
|||
|
|
break;
|
|||
|
|
case RecommendationType.review:
|
|||
|
|
Navigator.of(context).pushNamed('/vocabulary/review');
|
|||
|
|
break;
|
|||
|
|
case RecommendationType.test:
|
|||
|
|
Navigator.of(context).pushNamed('/vocabulary/test');
|
|||
|
|
break;
|
|||
|
|
case RecommendationType.plan:
|
|||
|
|
Navigator.of(context).pushNamed('/vocabulary/study-plan');
|
|||
|
|
break;
|
|||
|
|
case RecommendationType.weakness:
|
|||
|
|
// 处理薄弱点强化
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
enum RecommendationType {
|
|||
|
|
vocabulary,
|
|||
|
|
review,
|
|||
|
|
test,
|
|||
|
|
plan,
|
|||
|
|
weakness,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
class RecommendationItem {
|
|||
|
|
final RecommendationType type;
|
|||
|
|
final String title;
|
|||
|
|
final String description;
|
|||
|
|
final String priority;
|
|||
|
|
final String estimatedTime;
|
|||
|
|
final IconData icon;
|
|||
|
|
final Color color;
|
|||
|
|
final String action;
|
|||
|
|
final List<String> details;
|
|||
|
|
|
|||
|
|
const RecommendationItem({
|
|||
|
|
required this.type,
|
|||
|
|
required this.title,
|
|||
|
|
required this.description,
|
|||
|
|
required this.priority,
|
|||
|
|
required this.estimatedTime,
|
|||
|
|
required this.icon,
|
|||
|
|
required this.color,
|
|||
|
|
required this.action,
|
|||
|
|
required this.details,
|
|||
|
|
});
|
|||
|
|
}
|