feat(my): 新增错题本和我的收藏页面，重构学科标签组件

1. 为我的页面添加错题本和我的收藏跳转路由，指向共用的QuestionListPage 2. 抽离全局学科标签组件，移除class模块内的重复实现 3. 新增用户收藏/错题本接口层和数据模型 4. 完成QuestionListPage分页列表页实现，支持学科筛选和游标分页 5. 调整考试页面卡片布局和图标偏移参数
2026-09-10 17:14:11 +08:00
parent 96ab0221a5
commit 14b8e56bc3
8 changed files with 795 additions and 41 deletions
@@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+/// ============================================================
+/// 【SubjectTag】学科标签（对标 Vue components/SubjectTag/SubjectTag.vue）
+///
+/// 四学科配色（与 Vue subjectMap 一致），未知学科兜底数学蓝：
+///   数学 #3D7DF5 / #E5F0FF   物理 #A45CFF / #F5ECFF
+///   英语 #E5A301 / #FFF6E3   化学 #2DB985 / #E5FAF3
+///
+/// 描边：Vue 用 ::before + mask-composite 画 2rpx 的学科色渐变描边
+/// （两端 60% 学科色、中间 60% 近白色）；Flutter 用"外层渐变容器 +
+/// 内层底色容器留 1px 边"的嵌套方案等价实现。
+///
+/// 原 class 模块私有组件，因错题本/我的收藏列表也需要，按项目规范
+/// 提升为 core/components 全局公共组件。
+/// ============================================================
+class SubjectTag extends StatelessWidget {
+  const SubjectTag({super.key, required this.subject});
+
+  final String subject;
+
+  static const Map<String, _SubjectColor> _map = {
+    // 数学：描边 rgba(90,158,255,.6) → rgba(242,248,255,.6)
+    '数学': _SubjectColor(0xFF3D7DF5, 0xFFE5F0FF, 0x995A9EFF, 0x99F2F8FF),
+    // 物理：描边 rgba(182,127,255,.6) → rgba(252,246,255,.6)
+    '物理': _SubjectColor(0xFFA45CFF, 0xFFF5ECFF, 0x99B67FFF, 0x99FCF6FF),
+    // 英语：描边 rgba(247,194,82,.6) → rgba(255,251,243,.6)
+    '英语': _SubjectColor(0xFFE5A301, 0xFFFFF6E3, 0x99F7C252, 0x99FFFBF3),
+    // 化学：描边 rgba(91,209,165,.6) → rgba(240,255,248,.6)
+    '化学': _SubjectColor(0xFF2DB985, 0xFFE5FAF3, 0x995BD1A5, 0x99F0FFF8),
+  };
+
+  @override
+  Widget build(BuildContext context) {
+    final t = subject.trim();
+    if (t.isEmpty) return const SizedBox.shrink();
+    final c =
+        _map[t] ??
+        const _SubjectColor(0xFF3D7DF5, 0xFFE5F0FF, 0x995A9EFF, 0x99F2F8FF);
+
+    // Vue border-radius: 12rpx
+    final outerRadius = BorderRadius.circular(6.r);
+    // Vue ::before padding: 2rpx（描边厚度）
+    final borderWidth = 1.w;
+
+    return Container(
+      // 外层：学科色横向渐变，露出的 1px 边即"渐变描边"
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.centerLeft,
+          end: Alignment.centerRight,
+          colors: [Color(c.borderA), Color(c.borderB), Color(c.borderA)],
+        ),
+        borderRadius: outerRadius,
+      ),
+      child: Container(
+        margin: EdgeInsets.all(borderWidth),
+        // Vue padding: 4rpx 14rpx，扣除 2rpx 描边后内层 2rpx 12rpx
+        padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 1.h),
+        decoration: BoxDecoration(
+          color: Color(c.bg),
+          borderRadius: BorderRadius.circular(6.r - borderWidth),
+        ),
+        // Vue white-space: nowrap：学科名不换行
+        child: Text(
+          t,
+          softWrap: false,
+          style: TextStyle(fontSize: 11, color: Color(c.fg)),
+        ),
+      ),
+    );
+  }
+}
+
+class _SubjectColor {
+  const _SubjectColor(this.fg, this.bg, this.borderA, this.borderB);
+
+  final int fg; // 文字色
+  final int bg; // 底色
+  final int borderA; // 渐变描边两端色（60% 学科色）
+  final int borderB; // 渐变描边中间色（60% 近白）
+}