feat:重构UI模块

2025-11-18 11:01:53 +08:00
parent 6bba9a488c
commit 21ff0ad94f
20 changed files with 501 additions and 605 deletions
--- a/lib/views/home.dart
+++ b/lib/views/home.dart
@@ -1,10 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:food_hub_app/layout/index.dart';
-import 'package:food_hub_app/models/layout.dart';
-import 'package:food_hub_app/views/moment.dart';
-import 'package:food_hub_app/views/profile.dart';
-import 'package:food_hub_app/views/record.dart';
-import 'package:food_hub_app/views/stats.dart';
+import 'package:food_hub_app/layout/drawer.dart';
+import 'package:food_hub_app/layout/nav_bar.dart';

 class HomePage extends StatefulWidget {
  const HomePage({super.key});
@@ -16,112 +12,79 @@ class HomePage extends StatefulWidget {
 class _HomePage extends State<HomePage> {
  int _currentIndex = 0;

-  final List<NavItem> navItems = [
-    NavItem(
-      label: "记录",
-      icon: Icons.home_outlined,
-      activeIcon: Icons.home,
-      page: RecordPage(),
-    ),
-    NavItem(
-      label: "统计",
-      icon: Icons.pie_chart_outline,
-      activeIcon: Icons.pie_chart,
-      page: StatsPage(),
-    ),
-    NavItem(
-      label: "朋友圈",
-      icon: Icons.group_outlined,
-      activeIcon: Icons.group,
-      page: MomentPage(),
-    ),
-    NavItem(
-      label: "我的",
-      icon: Icons.account_circle_outlined,
-      activeIcon: Icons.account_circle,
-      page: ProfilePage(),
-    ),
-  ];
-
-  List<BottomNavigationBarItem> get bottomNavItems =>
-      navItems
-          .map(
-            (item) => BottomNavigationBarItem(
-              icon: Icon(item.icon),
-              activeIcon: Icon(item.activeIcon),
-              label: item.label,
-            ),
-          )
-          .toList();
-
-  List<Widget> get tabPages => navItems.map((item) => item.page).toList();
+  List<Widget> get tabPages => pageInfos.map((item) => item.page).toList();

  // 显示底部弹窗
  void _showBottomSheet() {
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(
-          top: Radius.circular(16),
-        ),
+        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
-      builder: (context) => Container(
-        padding: const EdgeInsets.all(10),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const Text(
-              '请选择操作',
-              style: TextStyle(
-                fontSize: 18,
-                fontWeight: FontWeight.bold,
-              ),
+      builder:
+          (context) => Container(
+            padding: const EdgeInsets.all(10),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Text(
+                  '请选择操作',
+                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+                ),
+                const SizedBox(height: 10),
+                ListTile(
+                  leading: Icon(
+                    Icons.book,
+                    color: Theme.of(context).primaryColor,
+                  ),
+                  title: const Text('新增菜谱'),
+                  onTap: () {
+                    Navigator.pop(context);
+                    _handleAddRecipe();
+                  },
+                ),
+                ListTile(
+                  leading: Icon(
+                    Icons.note_add,
+                    color: Theme.of(context).primaryColor,
+                  ),
+                  title: const Text('新增记录'),
+                  onTap: () {
+                    Navigator.pop(context);
+                    Navigator.pushNamed(context, "/recordForm");
+                  },
+                ),
+                ListTile(
+                  leading: Icon(
+                    Icons.group,
+                    color: Theme.of(context).primaryColor,
+                  ),
+                  title: const Text('发布朋友圈'),
+                  onTap: () {
+                    Navigator.pop(context);
+                    _handleAddRecord();
+                  },
+                ),
+              ],
            ),
-            const SizedBox(height: 10),
-            ListTile(
-              leading: Icon(Icons.book, color: Theme.of(context).primaryColor),
-              title: const Text('新增菜谱'),
-              onTap: () {
-                Navigator.pop(context);
-                _handleAddRecipe();
-              },
-            ),
-            ListTile(
-              leading: Icon(Icons.note_add, color: Theme.of(context).primaryColor),
-              title: const Text('新增记录'),
-              onTap: () {
-                Navigator.pop(context);
-                Navigator.pushNamed(context, "/recordForm");
-              },
-            ),
-            ListTile(
-              leading: Icon(Icons.group, color: Theme.of(context).primaryColor),
-              title: const Text('发布朋友圈'),
-              onTap: () {
-                Navigator.pop(context);
-                _handleAddRecord();
-              },
-            )
-          ],
-        ),
-      ),
+          ),
    );
  }

  // 处理添加菜谱
  void _handleAddRecipe() {
    // 这里添加跳转或处理添加菜谱的逻辑
-    ScaffoldMessenger.of(context).showSnackBar(
-      const SnackBar(content: Text('添加菜谱功能')),
-    );
+    ScaffoldMessenger.of(
+      context,
+    ).showSnackBar(const SnackBar(content: Text('添加菜谱功能')));
  }

  // 处理添加记录
  void _handleAddRecord() {
    // 这里添加跳转或处理添加记录的逻辑
-    ScaffoldMessenger.of(context).showSnackBar(
-      const SnackBar(content: Text('添加记录功能')),
-    );
+    ScaffoldMessenger.of(
+      context,
+    ).showSnackBar(const SnackBar(content: Text('添加记录功能')));
  }

  @override
@@ -129,8 +92,8 @@ class _HomePage extends State<HomePage> {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
-        title: Text('Food Hub', style: TextStyle(color: Colors.white)),
-        backgroundColor: Theme.of(context).primaryColor,
+        title: Text('食光集', style: TextStyle(color: Colors.white)),
+        backgroundColor: Theme.of(context).colorScheme.primary,
        leading: Builder(
          builder: (context) {
            return IconButton(
@@ -143,17 +106,20 @@ class _HomePage extends State<HomePage> {
        actions: homeActions(context),
      ),
      backgroundColor: Color(0xFFF5F5F5),
-      drawer: const SettingsDrawer(),
-      body: tabPages[_currentIndex],
+      drawer: SettingsDrawer(),
+      body: Padding(
+        padding: EdgeInsets.all(4),
+        child: tabPages[_currentIndex],
+      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        onPressed: _showBottomSheet,
        shape: const CircleBorder(),
+        mini: true,
        child: const Icon(Icons.add, color: Colors.white, size: 30),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: NavBar(
-        navItems: bottomNavItems,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
--- a/lib/views/login.dart
+++ b/lib/views/login.dart
@@ -17,7 +17,7 @@ class LoginPage extends StatefulWidget {
 class _LoginPage extends State<LoginPage> {
  final GlobalKey _formKey = GlobalKey<FormState>();

-  String _username = "", _password = "";
+  String _username = "Cxx0822", _password = "19940822Cxx";
  bool _isRemember = false;
  bool _isObscure = true;
  Color _eyeColor = Colors.grey;
--- a/lib/views/moment.dart
+++ b/lib/views/moment.dart
@@ -2,8 +2,8 @@ import 'package:easy_refresh/easy_refresh.dart';
 import 'package:flutter/material.dart';
 import 'package:food_hub_app/apis/moment.dart';
 import 'package:food_hub_app/models/moment.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
 import 'package:food_hub_app/widgets/moment/card.dart';
-import 'package:tdesign_flutter/tdesign_flutter.dart';

 class MomentPage extends StatefulWidget {
  const MomentPage({super.key});
@@ -126,66 +126,61 @@ class _MomentPageState extends State<MomentPage> {
      return EasyRefresh(
        controller: _freshController,
        onRefresh: _onRefresh,
-        child: const TDEmpty(type: TDEmptyType.plain, emptyText: '暂无数据'),
+        child: buildEmptyData(),
      );
    }

    // 有数据时显示列表
    return Stack(
      children: [
-        Padding(
-          padding: const EdgeInsets.all(5),
-          child: EasyRefresh(
-            controller: _freshController,
-            header: ClassicHeader(
-              dragText: '下拉刷新',
-              armedText: '释放刷新',
-              readyText: '准备刷新',
-              processingText: '刷新中...',
-              processedText: '刷新完成',
-              failedText: '刷新失败',
-              noMoreText: '没有更多数据',
-              showText: true,
-              messageText: '更新于 %T',
-              showMessage: true,
-            ),
-            footer: ClassicFooter(
-              dragText: '上拉加载',
-              armedText: '释放加载',
-              readyText: '准备加载',
-              processingText: '加载中...',
-              processedText: '加载完成',
-              failedText: '加载失败',
-              noMoreText: '没有更多数据',
-              showText: true,
-              messageText: '更新于 %T',
-              showMessage: true,
-            ),
-            onRefresh: _onRefresh,
-            onLoad: _onLoad,
-            child: ListView.builder(
-              controller: _scrollController,
-              itemCount: momentList.length,
-              itemBuilder: (context, index) {
-                return MomentCard(moment: momentList[index]);
-              },
-            ),
+        EasyRefresh(
+          controller: _freshController,
+          header: ClassicHeader(
+            dragText: '下拉刷新',
+            armedText: '释放刷新',
+            readyText: '准备刷新',
+            processingText: '刷新中...',
+            processedText: '刷新完成',
+            failedText: '刷新失败',
+            noMoreText: '没有更多数据',
+            showText: true,
+            messageText: '更新于 %T',
+            showMessage: true,
+          ),
+          footer: ClassicFooter(
+            dragText: '上拉加载',
+            armedText: '释放加载',
+            readyText: '准备加载',
+            processingText: '加载中...',
+            processedText: '加载完成',
+            failedText: '加载失败',
+            noMoreText: '没有更多数据',
+            showText: true,
+            messageText: '更新于 %T',
+            showMessage: true,
+          ),
+          onRefresh: _onRefresh,
+          onLoad: _onLoad,
+          child: ListView.builder(
+            controller: _scrollController,
+            itemCount: momentList.length,
+            itemBuilder: (context, index) {
+              return MomentCard(moment: momentList[index]);
+            },
          ),
        ),

        // 返回顶部按钮
        if (_showScrollToTop)
          Positioned(
-            right: 10,
-            bottom: 20,
+            right: 0,
+            bottom: 0,
            child: FloatingActionButton(
              onPressed: _scrollToTop,
-              backgroundColor: Colors.white,
+              backgroundColor: Theme.of(context).colorScheme.primary,
              elevation: 5,
              mini: true,
-              child: const Icon(
-                Icons.arrow_upward
-              ),
+              child: const Icon(Icons.arrow_upward, color: Colors.white),
            ),
          ),
      ],
--- a/lib/views/recipe_detail.dart
+++ b/lib/views/recipe_detail.dart
@@ -72,14 +72,12 @@ class _RecipeDetailState extends State<RecipeDetailPage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
-        title: Text('菜谱信息', style: TextStyle(color: Colors.white)),
-        backgroundColor: Theme.of(context).primaryColor,
+        title: Text('菜谱信息'),
        leading: IconButton(
-          icon: Icon(Icons.arrow_back, color: Colors.white),
+          icon: Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
-      backgroundColor: Color(0xFFF5F5F5),
      body: SingleChildScrollView(
        child: Padding(padding: EdgeInsets.all(5), child: _buildRecipeDetail()),
      ),
@@ -224,8 +222,9 @@ class _RecipeDetailState extends State<RecipeDetailPage> {
    required String title,
    required Widget content,
  }) {
-    return cardContainer(
-      Column(
+    return buildCard(
+      context: context,
+      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
@@ -241,7 +240,7 @@ class _RecipeDetailState extends State<RecipeDetailPage> {
          SizedBox(height: 5),
          content,
        ],
-      ),
+      )
    );
  }
 }
--- a/lib/views/record.dart
+++ b/lib/views/record.dart
@@ -47,17 +47,15 @@ class _RecordPageState extends State<RecordPage>
          backgroundColor: Colors.white,
          showIndicator: true,
        ),
+        SizedBox(height: 8),
        Expanded(
-          child: Padding(
-            padding: EdgeInsets.all(5),
-            child: TabBarView(
-              controller: _tabController,
-              children: [
-                RecipeList(),
-                RecipeCalendar(),
-                RecipeTimeline(),
-              ],
-            ),
+          child: TabBarView(
+            controller: _tabController,
+            children: [
+              RecipeList(),
+              RecipeCalendar(),
+              RecipeTimeline(),
+            ],
          ),
        ),
      ],
--- a/lib/views/stats.dart
+++ b/lib/views/stats.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:food_hub_app/apis/stats.dart';
 import 'package:food_hub_app/models/stats.dart';
 import 'package:food_hub_app/widgets/common/chart.dart';
+import 'package:food_hub_app/widgets/common/index.dart';
 import 'package:food_hub_app/widgets/stats/card.dart';

 class StatsPage extends StatefulWidget {
@@ -45,7 +46,10 @@ class _StatsPage extends State<StatsPage> {
      rankStats = result4;

      if (recordStats.isNotEmpty) {
-        double sumValue = recordStats.fold(0.0, (sum, item) => sum + item.value);
+        double sumValue = recordStats.fold(
+          0.0,
+          (sum, item) => sum + item.value,
+        );
        averageRecordCount = sumValue / recordStats.length;
      }
    });
@@ -54,55 +58,22 @@ class _StatsPage extends State<StatsPage> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
-      child: Padding(
-        padding: const EdgeInsets.all(5),
-        child: Column(
-          children: [
-            _buildSummaryStats(),
-            SizedBox(
-              height: chartHeight,
-              child: Card(
-                color: Colors.white,
-                elevation: 0,
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(10),
-                ),
-                child: Padding(
-                  padding: const EdgeInsets.all(10),
-                  child: _buildRecordStats(),
-                ),
-              ),
-            ),
-            SizedBox(
-              height: chartHeight,
-              child: Card(
-                color: Colors.white,
-                elevation: 0,
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(10),
-                ),
-                child: Padding(
-                  padding: const EdgeInsets.all(10),
-                  child: _buildCategoryStats(),
-                ),
-              ),
-            ),
-            SizedBox(
-              height: chartHeight,
-              child: Card(
-                color: Colors.white,
-                elevation: 0,
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(10),
-                ),
-                child: Padding(
-                  padding: const EdgeInsets.all(10),
-                  child: _buildRankStats(),
-                ),
-              ),
-            ),
-          ],
-        ),
+      child: Column(
+        children: [
+          _buildSummaryStats(),
+          SizedBox(
+            height: chartHeight,
+            child: buildCard(context: context, child: _buildRecordStats()),
+          ),
+          SizedBox(
+            height: chartHeight,
+            child: buildCard(context: context, child: _buildCategoryStats()),
+          ),
+          SizedBox(
+            height: chartHeight,
+            child: buildCard(context: context, child: _buildRankStats()),
+          ),
+        ],
      ),
    );
  }