feat(report): 实现AI学习报告计算页及相关组件
1. 新增报告计算进度圆环、科目卡片、完成弹窗组件 2. 重构report_computation_page，替换旧的自定义组件为新封装组件 3. 新增student_info_page的主题资源和UI重构，适配Flutter屏幕适配 4. 新增临时调试入口用于开发测试
This commit is contained in:
崔宝新
@@ -0,0 +1,267 @@
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||
import 'package:new_learn/core/utils/img_url.dart';
|
||||
|
||||
/// 科目计算状态（对标 Vue SubjectStatus）
|
||||
enum ComputationSubjectStatus { notStarted, inProgress, finished }
|
||||
|
||||
/// ============================================================
|
||||
/// 【ComputationSubjectItem】AI 计算科目卡片
|
||||
/// —— 对标 reportComputation.vue 的 .subject-item
|
||||
///
|
||||
/// 右上角标（subscript）：未开始/进行中蓝色闪电底，已完成绿色对勾底；
|
||||
/// 标题行：科目名 + 科目图标 + ai-plan「AI学习计划+」图；
|
||||
/// 知识点行 + 底部渐变进度条（进行中蓝 / 已完成绿）。
|
||||
/// ============================================================
|
||||
class ComputationSubjectItem extends StatelessWidget {
|
||||
const ComputationSubjectItem({
|
||||
super.key,
|
||||
required this.subjectName,
|
||||
required this.iconUrl,
|
||||
required this.knowCount,
|
||||
required this.progress,
|
||||
required this.status,
|
||||
});
|
||||
|
||||
final String subjectName;
|
||||
final String iconUrl;
|
||||
final int knowCount;
|
||||
|
||||
/// 0-100
|
||||
final int progress;
|
||||
final ComputationSubjectStatus status;
|
||||
|
||||
// ---- 图片资源（default.json ai-plan + Vue 内联 $img 角标图）----
|
||||
static const String _aiPlanImg =
|
||||
'/StaticResource/2026-06-11/aiPlan1781157211012.png';
|
||||
static const String _subscriptBgBlue =
|
||||
'/StaticResource/2026-06-11/subscript-bg11781162055363.png';
|
||||
static const String _subscriptBgGreen =
|
||||
'/StaticResource/2026-06-11/subscript-bg21781162055358.png';
|
||||
static const String _iconFlash =
|
||||
'/StaticResource/2026-06-11/subscript-cion1-1781162401643.png';
|
||||
static const String _iconCheck =
|
||||
'/StaticResource/2026-06-11/subscript-cion2-1781162401644.png';
|
||||
|
||||
bool get _isFinished => status == ComputationSubjectStatus.finished;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Opacity(
|
||||
// Vue: 未开始 opacity 0.8
|
||||
opacity: status == ComputationSubjectStatus.notStarted ? 0.8 : 1,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(16.r), // 16rpx
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
stops: const [0, 0.3, 1],
|
||||
colors: _isFinished
|
||||
? const [Color(0xFFE3FCF4), Color(0xFFF7FCFA), Colors.white]
|
||||
: const [Color(0xFFE3F7FC), Color(0xFFF7FBFC), Colors.white],
|
||||
),
|
||||
),
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(14.w, 14.w, 14.w, 20.h),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildTitle(),
|
||||
SizedBox(height: 16.h), // 知识点行 margin 32rpx 0
|
||||
_buildKnowledge(),
|
||||
SizedBox(height: 16.h),
|
||||
_buildProgressBar(),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 右上角标
|
||||
Positioned(top: 0, right: 0, child: _buildSubscript()),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 标题行：科目名 + 科目图标 + AI学习计划图 =====
|
||||
Widget _buildTitle() {
|
||||
return Row(
|
||||
children: [
|
||||
Text(
|
||||
subjectName,
|
||||
style: TextStyle(
|
||||
fontSize: 18.spMin, // 36rpx
|
||||
fontWeight: FontWeight.w600,
|
||||
color: const Color(0xFF1D2B47),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 6.w),
|
||||
if (iconUrl.isNotEmpty)
|
||||
CachedNetworkImage(
|
||||
imageUrl: ImgUrl.build(iconUrl),
|
||||
width: 26.w, // 52rpx，widthFix
|
||||
fit: BoxFit.fitWidth,
|
||||
errorWidget: (_, _, _) => Icon(
|
||||
Icons.menu_book,
|
||||
size: 26.w,
|
||||
color: const Color(0xFF3D7DF5),
|
||||
),
|
||||
)
|
||||
else
|
||||
Icon(Icons.menu_book, size: 26.w, color: const Color(0xFF3D7DF5)),
|
||||
SizedBox(width: 6.w),
|
||||
CachedNetworkImage(
|
||||
imageUrl: ImgUrl.build(_aiPlanImg),
|
||||
width: 77.w, // 154rpx，widthFix
|
||||
fit: BoxFit.fitWidth,
|
||||
errorWidget: (_, _, _) => const SizedBox.shrink(),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 知识点行（Vue 预计时间已注释，只保留知识点）=====
|
||||
Widget _buildKnowledge() {
|
||||
return Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 6.h),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFF3F8FE),
|
||||
borderRadius: BorderRadius.circular(4.r),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'知识点',
|
||||
style: TextStyle(
|
||||
fontSize: 12.spMin,
|
||||
color: const Color(0xFF495A7A),
|
||||
),
|
||||
),
|
||||
SizedBox(width: 6.w),
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 3.5.w),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFE1EAFA),
|
||||
borderRadius: BorderRadius.circular(4.r),
|
||||
),
|
||||
child: Text(
|
||||
'$knowCount',
|
||||
style: TextStyle(
|
||||
fontSize: 12.spMin,
|
||||
color: const Color(0xFF495A7A),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 底部进度条：蓝渐变 / 绿渐变 =====
|
||||
Widget _buildProgressBar() {
|
||||
return SizedBox(
|
||||
height: 6.h, // 12rpx
|
||||
child: LayoutBuilder(
|
||||
builder: (_, constraints) {
|
||||
final fillWidth =
|
||||
constraints.maxWidth * (progress.clamp(0, 100) / 100);
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFE9EDF5),
|
||||
borderRadius: BorderRadius.circular(3.h),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
width: fillWidth,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(3.h),
|
||||
gradient: LinearGradient(
|
||||
colors: _isFinished
|
||||
? const [Color(0xFFB4EADA), Color(0xFF19CE92)]
|
||||
: const [
|
||||
Color(0xFF8AD1FD),
|
||||
Color(0xFF3C84FF),
|
||||
Color(0xFF3D7DF5),
|
||||
],
|
||||
stops: _isFinished ? null : const [0, 0.64, 1],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ===== 右上角标：162x66rpx 背景图 + 状态图标 + 百分比 =====
|
||||
Widget _buildSubscript() {
|
||||
final bgImg = _isFinished ? _subscriptBgGreen : _subscriptBgBlue;
|
||||
return SizedBox(
|
||||
width: 81.w,
|
||||
height: 33.h,
|
||||
child: Stack(
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: ImgUrl.build(bgImg),
|
||||
fit: BoxFit.fill,
|
||||
errorWidget: (_, _, _) => DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: _isFinished
|
||||
? const Color(0xFF19CE92)
|
||||
: const Color(0xFF3D7DF5),
|
||||
borderRadius: BorderRadius.only(
|
||||
topRight: Radius.circular(8.r),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(bottom: 5.h),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (status != ComputationSubjectStatus.notStarted)
|
||||
Padding(
|
||||
padding: EdgeInsets.only(right: 4.w),
|
||||
child: CachedNetworkImage(
|
||||
imageUrl: ImgUrl.build(
|
||||
_isFinished ? _iconCheck : _iconFlash,
|
||||
),
|
||||
width: 18.w,
|
||||
height: 18.w,
|
||||
errorWidget: (_, _, _) =>
|
||||
SizedBox(width: 18.w, height: 18.w),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'$progress%',
|
||||
style: TextStyle(
|
||||
fontSize: 16.spMin, // 32rpx
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user