feat:增加数据接口

lib/widgets/recipe/recipe_timeline.dart

@@ -1,26 +1,71 @@
 import 'package:flutter/material.dart';
+import 'package:food_hub_app/api/recipe.dart';
 import 'package:food_hub_app/models/recipe.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
+import 'package:tdesign_flutter/tdesign_flutter.dart';
 import 'package:timelines_plus/timelines_plus.dart';
 
-class RecipeTimeline extends StatelessWidget {
-  final List<Record> recordList;
+class RecipeTimeline extends StatefulWidget {
+  const RecipeTimeline({super.key});
 
-  const RecipeTimeline({super.key, required this.recordList});
+  @override
+  State<StatefulWidget> createState() => _RecipeTimeline();
+}
+
+class _RecipeTimeline extends State<RecipeTimeline> {
+  List<Record> recordList = [];
+
+  @override
+  void initState() {
+    super.initState();
+    refreshRecord();
+  }
+
+  Future<void> refreshRecord() async {
+    final result = await queryRecordApi("2025-01-01", "2025-07-08");
+    setState(() {
+      recordList = result;
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Timeline.tileBuilder(
-      theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
-      builder: TimelineTileBuilder.connected(
-        itemCount: recordList.length,
-        connectorBuilder:
-            (context, index, type) => Connector.solidLine(thickness: 2),
-        indicatorBuilder: (context, index) {
-          return Indicator.dot(size: 12.0);
-        },
-        contentsBuilder: (context, index) {
-          return TimelineCard(record: recordList[index]);
-        },
+    return Column(
+      children: [
+        YearSelector(
+          initialYear: DateTime.now().year,
+          minYear: 2000,
+          maxYear: 2100,
+          onYearChanged: (year) {
+            print('选中的年份: $year');
+          },
+          accentColor: Colors.blue,
+        ),
+        Expanded(child: TimelineContainer(recordList))
+      ],
+    );
+  }
+}
+
+Widget TimelineContainer(List<Record> recordList) {
+  if (recordList.isEmpty) {
+    return const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据');
+  } else {
+    return Padding(
+      padding: EdgeInsets.all(10),
+      child: Timeline.tileBuilder(
+        theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
+        builder: TimelineTileBuilder.connected(
+          itemCount: recordList.length,
+          connectorBuilder:
+              (context, index, type) => Connector.solidLine(thickness: 2),
+          indicatorBuilder: (context, index) {
+            return Indicator.dot(size: 12.0);
+          },
+          contentsBuilder: (context, index) {
+            return TimelineCard(record: recordList[index]);
+          },
+        ),
       ),
     );
   }
@@ -36,7 +81,7 @@ class TimelineCard extends StatelessWidget {
     return SizedBox(
       width: double.infinity,
       child: Padding(
-        padding: const EdgeInsets.only(left: 10, bottom: 10),
+        padding: const EdgeInsets.only(left: 10, bottom: 5),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
@@ -52,12 +97,15 @@ class TimelineCard extends StatelessWidget {
                 child: Column(
                   children: [
                     Text(record.name, style: TextStyle(fontSize: 16)),
-                    const SizedBox(height: 10),
+                    const SizedBox(height: 5),
                     Image.network(
-                      record.imageUrl,
+                      'http://172.29.101.108:8100/${record.imageUrl}',
                       width: double.infinity,
                       height: 250,
                       fit: BoxFit.contain,
+                      errorBuilder:
+                          (context, error, stackTrace) =>
+                          errorImageContainer(250),
                     ),
                   ],
                 ),
@@ -69,3 +117,132 @@ class TimelineCard extends StatelessWidget {
     );
   }
 }
+
+class YearSelector extends StatefulWidget {
+  final int initialYear;
+  final int? minYear;
+  final int? maxYear;
+  final Function(int) onYearChanged;
+  final Color? accentColor;
+
+  const YearSelector({
+    super.key,
+    required this.initialYear,
+    required this.onYearChanged,
+    this.minYear,
+    this.maxYear,
+    this.accentColor,
+  });
+
+  @override
+  State<YearSelector> createState() => _YearSelectorState();
+}
+
+class _YearSelectorState extends State<YearSelector>
+    with SingleTickerProviderStateMixin {
+  late int _currentYear;
+  late Color _accentColor;
+
+  // 用于动画效果
+  late AnimationController _animationController;
+  late Animation<double> _scaleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _currentYear = widget.initialYear;
+    _accentColor = widget.accentColor ?? Theme
+        .of(context)
+        .primaryColor;
+
+    // 初始化动画控制器
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 200),
+    );
+
+    // 缩放动画
+    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
+      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
+    );
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  /// 切换到上一年
+  void _previousYear() {
+    if (widget.minYear == null || _currentYear > widget.minYear!) {
+      _animateYearChange(() {
+        setState(() {
+          _currentYear--;
+        });
+        widget.onYearChanged(_currentYear);
+      });
+    }
+  }
+
+  /// 切换到下一年
+  void _nextYear() {
+    if (widget.maxYear == null || _currentYear < widget.maxYear!) {
+      _animateYearChange(() {
+        setState(() {
+          _currentYear++;
+        });
+        widget.onYearChanged(_currentYear);
+      });
+    }
+  }
+
+  /// 年份变化时的动画效果
+  void _animateYearChange(VoidCallback onComplete) {
+    _animationController.forward().then((_) {
+      onComplete();
+      _animationController.reverse();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        TDButton(
+          icon: Icons.chevron_left,
+          size: TDButtonSize.small,
+          type: TDButtonType.fill,
+          shape: TDButtonShape.circle,
+          theme: TDButtonTheme.primary,
+          onTap: () => _previousYear(),
+        ),
+        SizedBox(width: 10),
+        // 年份显示
+        AnimatedBuilder(
+          animation: _scaleAnimation,
+          builder: (context, child) {
+            return Transform.scale(scale: _scaleAnimation.value, child: child);
+          },
+          child: Text(
+            '$_currentYear',
+            style: TextStyle(
+              fontSize: 28,
+              fontWeight: FontWeight.bold,
+              color: _accentColor,
+            ),
+          ),
+        ),
+        TDButton(
+          icon: Icons.chevron_right,
+          size: TDButtonSize.small,
+          type: TDButtonType.fill,
+          shape: TDButtonShape.circle,
+          theme: TDButtonTheme.primary,
+          onTap: () => _nextYear(),
+        ),
+      ],
+    );
+  }
+}