feat:更新图表模块

lib/views/stats.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:food_hub_app/widgets/stats/card.dart';
 import 'package:graphic/graphic.dart';
 
 import 'data.dart';
@@ -14,88 +15,210 @@ class _StatsPage extends State<StatsPage> {
   var _smooth = false;
   var _stepped = false;
 
+  final List<Map<String, dynamic>> chartData = const [
+    {'x': '1月', 'y': 30},
+    {'x': '2月', 'y': 45},
+    {'x': '3月', 'y': 28},
+    {'x': '4月', 'y': 55},
+    {'x': '5月', 'y': 40},
+    {'x': '6月', 'y': 65},
+  ];
+
+  // @override
+  // Widget build(BuildContext context) {
+  //   return SingleChildScrollView(
+  //     child: Center(
+  //       child: Column(
+  //         children: <Widget>[
+  //           Container(
+  //             margin: const EdgeInsets.only(top: 10),
+  //             width: 350,
+  //             height: 300,
+  //             child: Chart(
+  //               data: basicData,
+  //               variables: {
+  //                 'genre': Variable(
+  //                   accessor: (Map map) => map['genre'] as String,
+  //                 ),
+  //                 'sold': Variable(accessor: (Map map) => map['sold'] as num),
+  //               },
+  //               marks: [
+  //                 IntervalMark(
+  //                   label: LabelEncode(
+  //                     encoder: (tuple) => Label(tuple['sold'].toString()),
+  //                   ),
+  //                   elevation: ElevationEncode(
+  //                     value: 0,
+  //                     updaters: {
+  //                       'tap': {true: (_) => 5},
+  //                     },
+  //                   ),
+  //                   color: ColorEncode(
+  //                     value: Defaults.primaryColor,
+  //                     updaters: {
+  //                       'tap': {false: (color) => color.withAlpha(100)},
+  //                     },
+  //                   ),
+  //                 ),
+  //               ],
+  //               axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
+  //               selections: {'tap': PointSelection(dim: Dim.x)},
+  //               tooltip: TooltipGuide(),
+  //               crosshair: CrosshairGuide(),
+  //             ),
+  //           ),
+  //           Container(
+  //             padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
+  //             child: const Text(
+  //               'Transposed Bar Chart',
+  //               style: TextStyle(fontSize: 20),
+  //             ),
+  //           ),
+  //           Container(
+  //             margin: const EdgeInsets.only(top: 10),
+  //             width: 350,
+  //             height: 300,
+  //             child: Chart(
+  //               data: basicData,
+  //               variables: {
+  //                 'genre': Variable(
+  //                   accessor: (Map map) => map['genre'] as String,
+  //                 ),
+  //                 'sold': Variable(accessor: (Map map) => map['sold'] as num),
+  //               },
+  //               transforms: [Proportion(variable: 'sold', as: 'percent')],
+  //               marks: [
+  //                 IntervalMark(
+  //                   position: Varset('percent') / Varset('genre'),
+  //                   label: LabelEncode(
+  //                     encoder: (tuple) => Label(tuple['sold'].toString()),
+  //                   ),
+  //                   color: ColorEncode(
+  //                     variable: 'genre',
+  //                     values: Defaults.colors10,
+  //                   ),
+  //                   modifiers: [StackModifier()],
+  //                 ),
+  //               ],
+  //               coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
+  //             ),
+  //           ),
+  //         ],
+  //       ),
+  //     ),
+  //   );
+  // }
+
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
+    return Padding(
-      child: Center(
+      padding: EdgeInsets.all(10),
       child: Column(
-          children: <Widget>[
+        children: [
-            Container(
+          GridView.count(
-              margin: const EdgeInsets.only(top: 10),
+            shrinkWrap: true,
-              width: 350,
+            crossAxisCount: 2,
-              height: 300,
+            crossAxisSpacing: 10,
-              child: Chart(
+            mainAxisSpacing: 10,
-                data: basicData,
+            childAspectRatio: 3,
-                variables: {
+            children: const [
-                  'genre': Variable(
+              StatisticCard(
-                    accessor: (Map map) => map['genre'] as String,
+                icon: Icons.restaurant_menu,
+                color: Colors.blue,
+                title: '菜谱总数',
+                value: 19,
+                unit: '个',
               ),
-                  'sold': Variable(accessor: (Map map) => map['sold'] as num),
+              StatisticCard(
-                },
+                icon: Icons.grid_view_rounded,
-                marks: [
+                color: Colors.green,
-                  IntervalMark(
+                title: '菜谱类别',
-                    label: LabelEncode(
+                value: 5,
-                      encoder: (tuple) => Label(tuple['sold'].toString()),
+                unit: '种',
               ),
-                    elevation: ElevationEncode(
+              StatisticCard(
-                      value: 0,
+                icon: Icons.flag,
-                      updaters: {
+                color: Colors.orange,
-                        'tap': {true: (_) => 5},
+                title: '做菜次数',
-                      },
+                value: 25,
-                    ),
+                unit: '个',
-                    color: ColorEncode(
-                      value: Defaults.primaryColor,
-                      updaters: {
-                        'tap': {false: (color) => color.withAlpha(100)},
-                      },
-                    ),
-                  ),
-                ],
-                axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
-                selections: {'tap': PointSelection(dim: Dim.x)},
-                tooltip: TooltipGuide(),
-                crosshair: CrosshairGuide(),
-              ),
-            ),
-            Container(
-              padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
-              child: const Text(
-                'Transposed Bar Chart',
-                style: TextStyle(fontSize: 20),
-              ),
-            ),
-            Container(
-              margin: const EdgeInsets.only(top: 10),
-              width: 350,
-              height: 300,
-              child: Chart(
-                data: basicData,
-                variables: {
-                  'genre': Variable(
-                    accessor: (Map map) => map['genre'] as String,
-                  ),
-                  'sold': Variable(accessor: (Map map) => map['sold'] as num),
-                },
-                transforms: [Proportion(variable: 'sold', as: 'percent')],
-                marks: [
-                  IntervalMark(
-                    position: Varset('percent') / Varset('genre'),
-                    label: LabelEncode(
-                      encoder: (tuple) => Label(tuple['sold'].toString()),
-                    ),
-                    color: ColorEncode(
-                      variable: 'genre',
-                      values: Defaults.colors10,
-                    ),
-                    modifiers: [StackModifier()],
-                  ),
-                ],
-                coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
               ),
+              StatisticCard(
+                icon: Icons.show_chart,
+                color: Colors.red,
+                title: '平均次数',
+                value: 3.13,
+                unit: '次/月',
               ),
             ],
           ),
+          const SizedBox(height: 10),
+          Expanded(
+            child: Card(
+              color: Colors.white,
+              elevation: 0,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: Padding(
+                padding: EdgeInsets.all(10),
+                child: Column(
+                  children: [
+                    _buildTitleSection(),
+                    Divider(
+                      height: 1,
+                      thickness: 1,
+                      color: Theme.of(context).primaryColor,
+                      indent: 0,
+                      endIndent: 0,
+                    ),
+                    // 下半部分：图表区
+                    Expanded(child: _buildLineChart()),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }
+
+  // 构建标题区域
+  Widget _buildTitleSection() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 12),
+      child: Row(
+        children: const [
+          Icon(Icons.show_chart, size: 24),
+          SizedBox(width: 5),
+          Text('月度数据趋势统计', style: TextStyle(fontWeight: FontWeight.bold)),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildLineChart() {
+    return Chart(
+      data: chartData,
+      variables: {
+        'date': Variable(
+          accessor: (Map map) => map['x'] as String,
+          scale: OrdinalScale(
+            tickCount: 5, // x轴刻度数量
+          ),
+        ),
+        'points': Variable(
+          accessor: (Map map) => (map['y'] ?? double.nan) as num,
+        ),
+      },
+      marks: [
+        LineMark(
+          shape: ShapeEncode(value: BasicLineShape(smooth: false)),
+          size: SizeEncode(value: 1.5),
+        ),
+      ],
+      axes: [Defaults.horizontalAxis, Defaults.verticalAxis]
+    );
+  }
 }

lib/widgets/common/index.dart

@@ -27,6 +27,25 @@ InputDecoration formInputDecoration({
   );
 }
 
+Widget circleIconButton({
+  required IconData icon,
+  required VoidCallback onPressed,
+  required BuildContext context,
+}) {
+  return ElevatedButton(
+    onPressed: onPressed,
+    style: ElevatedButton.styleFrom(
+      fixedSize: Size(32, 32),
+      shape: CircleBorder(),
+      elevation: 0,
+      backgroundColor: Theme.of(context).primaryColor,
+      padding: EdgeInsets.zero,
+      minimumSize: const Size(0, 0),
+    ),
+    child: Icon(icon, color: Colors.white, size: 18),
+  );
+}
+
 /// 确认按钮样式
 ButtonStyle primaryButtonStyle() {
   return ButtonStyle(

lib/widgets/common/year_selector.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:tdesign_flutter/tdesign_flutter.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
 
 class YearSelector extends StatefulWidget {
   final int initialYear;
@@ -88,15 +88,11 @@ class _YearSelectorState extends State<YearSelector>
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        TDButton(
+        circleIconButton(
+          context: context,
           icon: Icons.chevron_left,
-          size: TDButtonSize.small,
+          onPressed: () => _previousYear(),
-          type: TDButtonType.fill,
-          shape: TDButtonShape.circle,
-          theme: TDButtonTheme.primary,
-          onTap: () => _previousYear(),
         ),
-        SizedBox(width: 10),
         // 年份显示
         AnimatedBuilder(
           animation: _scaleAnimation,
@@ -112,15 +108,11 @@ class _YearSelectorState extends State<YearSelector>
             ),
           ),
         ),
-        SizedBox(width: 10),
+        circleIconButton(
-        TDButton(
+          context: context,
           icon: Icons.chevron_right,
-          size: TDButtonSize.small,
+          onPressed: () => _nextYear(),
-          type: TDButtonType.fill,
+        )
-          shape: TDButtonShape.circle,
-          theme: TDButtonTheme.primary,
-          onTap: () => _nextYear(),
-        ),
       ],
     );
   }

lib/widgets/recipe/calendar.dart

@@ -3,6 +3,7 @@ import 'package:food_hub_app/api/recipe.dart';
 import 'package:food_hub_app/models/recipe.dart';
 import 'package:food_hub_app/utils/date_util.dart';
 import 'package:food_hub_app/utils/index.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
 import 'package:table_calendar/table_calendar.dart';
 import 'package:tdesign_flutter/tdesign_flutter.dart';
 
@@ -145,12 +146,10 @@ class _RecipeCalendarState extends State<RecipeCalendar> {
                 ],
               ),
             ),
-            SizedBox(width: 10),
+            circleIconButton(
-            TDButton(
+              context: context,
-              icon: TDIcons.arrow_right,
+              icon: Icons.chevron_right,
-              type: TDButtonType.fill,
+              onPressed: () => {}
-              shape: TDButtonShape.circle,
-              theme: TDButtonTheme.primary,
             ),
           ],
         ),

lib/widgets/recipe/card.dart

@@ -4,7 +4,7 @@ import 'package:food_hub_app/config/app_config.dart';
 
 import 'package:food_hub_app/models/recipe.dart';
 import 'package:food_hub_app/widgets/common/image.dart';
-import 'package:tdesign_flutter/tdesign_flutter.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
 
 class RecipeCard extends StatelessWidget {
   final Recipe recipe;
@@ -92,22 +92,15 @@ class RecipeCard extends StatelessWidget {
             ),
             Row(
               children: [
-                TDButton(
+                circleIconButton(
+                  context: context,
                   icon: Icons.edit,
-                  size: TDButtonSize.small,
+                  onPressed: () => {},
-                  type: TDButtonType.fill,
-                  shape: TDButtonShape.circle,
-                  theme: TDButtonTheme.primary,
-                  onTap: () => {},
                 ),
-                SizedBox(width: 10),
+                circleIconButton(
-                TDButton(
+                  context: context,
                   icon: Icons.book,
-                  size: TDButtonSize.small,
+                  onPressed: () => {},
-                  type: TDButtonType.fill,
-                  shape: TDButtonShape.circle,
-                  theme: TDButtonTheme.primary,
-                  onTap: () => {},
                 ),
               ],
             ),

lib/widgets/recipe/timeline.dart

@@ -60,9 +60,15 @@ Widget timelineContainer(List<Record> recordList) {
       builder: TimelineTileBuilder.connected(
         itemCount: recordList.length,
         connectorBuilder:
-            (context, index, type) => Connector.solidLine(thickness: 2),
+            (context, index, type) => Connector.solidLine(
+              thickness: 2,
+              color: Theme.of(context).primaryColor,
+            ),
         indicatorBuilder: (context, index) {
-          return Indicator.dot(size: 12.0);
+          return Indicator.dot(
+            size: 12.0,
+            color: Theme.of(context).primaryColor,
+          );
         },
         contentsBuilder: (context, index) {
           return TimelineCard(record: recordList[index]);

lib/widgets/stats/card.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+
+class StatisticCard extends StatelessWidget {
+  final IconData icon;
+  final Color color;
+  final String title;
+  final num value;
+  final String unit;
+
+  const StatisticCard({
+    super.key,
+    required this.icon,
+    required this.color,
+    required this.title,
+    required this.value,
+    required this.unit,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      color: Colors.white,
+      elevation: 0,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+      child: Padding(
+        padding: const EdgeInsets.all(10.0),
+        child: Row(
+          children: [
+            SizedBox(
+              width: 60,
+              height: 60,
+              child: Icon(icon, color: color, size: 42),
+            ),
+            const SizedBox(width: 16),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(title, style: TextStyle(fontSize: 20, color: color)),
+                const SizedBox(height: 4),
+                Row(
+                  children: [
+                    Text(
+                      value.toString(),
+                      style: TextStyle(fontSize: 20, color: color),
+                    ),
+                    const SizedBox(width: 5),
+                    Text(unit, style: TextStyle(fontSize: 20, color: color)),
+                  ],
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}