refactor: 优化日历状态管理与首页输入框，添加API客户端抽象

2026-02-27 18:36:21 +08:00
parent 80d04688fc
commit 3d6ae7695f
20 changed files with 2146 additions and 801 deletions
@@ -1,34 +1,66 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:lucide_icons/lucide_icons.dart';
+import '../../../../core/di/injection.dart';
 import '../../../../core/theme/design_tokens.dart';
+import '../calendar_state_manager.dart';
+import '../calendar_time_utils.dart';
 import '../widgets/bottom_dock.dart';

 class CalendarDayWeekScreen extends StatefulWidget {
-  const CalendarDayWeekScreen({super.key});
+  final DateTime? initialDate;
+  final bool resetToToday;
+
+  const CalendarDayWeekScreen({
+    super.key,
+    this.initialDate,
+    this.resetToToday = false,
+  });

  @override
  State<CalendarDayWeekScreen> createState() => _CalendarDayWeekScreenState();
 }

 class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
-  DateTime _selectedDate = DateTime(2026, 2, 9);
-  late DateTime _weekStart;
+  static const double _dayItemWidth = 44;
+  static const double _dayItemGap = 12;
+
+  late final CalendarStateManager _calendarManager;
+  late DateTime _selectedDate;
+  late List<DateTime> _monthDates;
+  final ScrollController _dayStripController = ScrollController();

  @override
  void initState() {
    super.initState();
-    _weekStart = _getWeekStart(_selectedDate);
+    _calendarManager = sl<CalendarStateManager>();
+
+    if (widget.resetToToday) {
+      _calendarManager.resetToToday();
+    }
+
+    _selectedDate = _calendarManager.selectedDate;
+    _updateMonthDates();
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _scrollToSelectedDate();
+    });
  }

-  DateTime _getWeekStart(DateTime date) {
-    return date.subtract(Duration(days: date.weekday % 7));
+  void _updateMonthDates() {
+    _monthDates = monthDatesFor(_selectedDate);
+  }
+
+  @override
+  void dispose() {
+    _dayStripController.dispose();
+    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
-      backgroundColor: const Color(0xFFF8FAFC),
+      backgroundColor: AppColors.todoBg,
      body: SafeArea(
        child: Column(
          children: [
@@ -37,8 +69,8 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
              child: SingleChildScrollView(
                child: Padding(
                  padding: const EdgeInsets.only(
-                    left: 16,
-                    right: 16,
+                    left: AppSpacing.lg,
+                    right: AppSpacing.lg,
                    top: 2,
                    bottom: 104,
                  ),
@@ -67,14 +99,14 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
        child: Row(
          children: [
            GestureDetector(
-              onTap: () => Navigator.of(context).pop(),
+              onTap: () => context.go('/calendar/month'),
              child: Container(
                height: 36,
                padding: const EdgeInsets.symmetric(horizontal: 10),
                decoration: BoxDecoration(
-                  color: const Color(0xFFF8FAFF),
-                  borderRadius: BorderRadius.circular(18),
-                  border: Border.all(color: const Color(0xFFDEE7F6)),
+                  color: AppColors.messageBtnWrap,
+                  borderRadius: BorderRadius.circular(AppRadius.xl),
+                  border: Border.all(color: AppColors.messageBtnBorder),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
@@ -106,29 +138,70 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
  Widget _buildWeekStrip() {
    return SizedBox(
      height: 86,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: List.generate(7, (index) {
-          final date = _weekStart.add(Duration(days: index));
-          final isSelected =
-              date.day == _selectedDate.day &&
-              date.month == _selectedDate.month &&
-              date.year == _selectedDate.year;
-          final isWeekend = index == 0 || index == 6;
+      child: ListView.separated(
+        controller: _dayStripController,
+        scrollDirection: Axis.horizontal,
+        itemCount: _monthDates.length,
+        separatorBuilder: (context, index) =>
+            const SizedBox(width: _dayItemGap),
+        itemBuilder: (context, index) {
+          final date = _monthDates[index];
+          final isSelected = isSameDay(date, _selectedDate);
+          final isWeekend = date.weekday % 7 == 0 || date.weekday % 7 == 6;

          return GestureDetector(
            onTap: () {
              setState(() {
                _selectedDate = date;
              });
+              _calendarManager.setSelectedDate(date);
+              _updateMonthDates();
+              _scrollToSelectedDate(animate: true);
            },
-            child: _buildDayItem(date, isSelected, isWeekend),
+            child: SizedBox(
+              width: _dayItemWidth,
+              child: _buildDayItem(date, isSelected, isWeekend),
+            ),
          );
-        }),
+        },
      ),
    );
  }

+  void _scrollToSelectedDate({bool animate = false}) {
+    if (!_dayStripController.hasClients) {
+      return;
+    }
+    final index = _monthDates.indexWhere(
+      (date) => isSameDay(date, _selectedDate),
+    );
+    if (index < 0) {
+      return;
+    }
+
+    final targetCenter =
+        index * (_dayItemWidth + _dayItemGap) + (_dayItemWidth / 2);
+    final viewport = _dayStripController.position.viewportDimension;
+    var offset = targetCenter - (viewport / 2);
+    final max = _dayStripController.position.maxScrollExtent;
+    if (offset < 0) {
+      offset = 0;
+    }
+    if (offset > max) {
+      offset = max;
+    }
+
+    if (animate) {
+      _dayStripController.animateTo(
+        offset,
+        duration: const Duration(milliseconds: 180),
+        curve: Curves.easeOut,
+      );
+      return;
+    }
+    _dayStripController.jumpTo(offset);
+  }
+
  Widget _buildDayItem(DateTime date, bool isSelected, bool isWeekend) {
    final dayNames = ['日', '一', '二', '三', '四', '五', '六'];

@@ -146,7 +219,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
        Text(
          '${date.day}',
          style: TextStyle(
-            fontSize: isSelected ? 17 : (isWeekend ? 17 : 17),
+            fontSize: 17,
            fontWeight: isSelected ? FontWeight.w700 : FontWeight.w600,
            color: isSelected
                ? AppColors.blue600
@@ -158,49 +231,23 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
  }

  Widget _buildTimelineBoard() {
-    return Column(
-      children: [
-        _buildTimelineRow('07:00', false),
-        _buildTimelineRow('08:00', false),
-        _buildTimelineRow(
-          '09:00',
-          true,
-          eventText: '购票提醒',
-          eventColor: AppColors.slate500,
-        ),
-        _buildTimelineRow('10:00', false),
-        _buildTimelineRow('11:00', false),
-        _buildTimelineRow('12:00', false),
-        _buildTimelineRow('13:00', false),
-        _buildTimelineRow('14:00', false),
-        _buildTimelineRow('15:00', false),
-        _buildTimelineRow('15:28', false, isCurrentTime: true),
-        _buildTimelineRow(
-          '16:00',
-          true,
-          eventText: '购票提醒',
-          eventColor: const Color(0xFF6B21A8),
-          eventBg: const Color(0xFFE9D5FF),
-          eventBorder: const Color(0xFFD8B4FE),
-        ),
-        _buildTimelineRow('17:00', false),
-        _buildTimelineRow('18:00', false),
-        _buildTimelineRow('19:00', false),
-        _buildTimelineRow('20:00', false),
-        _buildTimelineRow('21:00', false),
-        _buildTimelineRow('22:00', false),
-        _buildTimelineRow('00:00', false, isDisabled: true),
-      ],
-    );
+    final now = DateTime.now();
+    final showCurrent = shouldShowCurrentMarker(_selectedDate, now);
+    final rows = <Widget>[];
+
+    for (var hour = 7; hour <= 22; hour++) {
+      rows.add(_buildTimelineRow(formatHour(hour)));
+      if (showCurrent && now.hour == hour) {
+        rows.add(_buildTimelineRow(formatHm(now), isCurrentTime: true));
+      }
+    }
+
+    rows.add(_buildTimelineRow(formatHour(24), isDisabled: true));
+    return Column(children: rows);
  }

  Widget _buildTimelineRow(
-    String time,
-    bool hasEvent, {
-    String? eventText,
-    Color? eventColor,
-    Color? eventBg,
-    Color? eventBorder,
+    String time, {
    bool isCurrentTime = false,
    bool isDisabled = false,
  }) {
@@ -215,7 +262,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
                    width: 44,
                    height: 18,
                    decoration: BoxDecoration(
-                      color: const Color(0xFFEF4444),
+                      color: AppColors.red500,
                      borderRadius: BorderRadius.circular(9),
                    ),
                    child: Center(
@@ -237,7 +284,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
                      fontWeight: FontWeight.w600,
                      color: isDisabled
                          ? AppColors.slate300
-                          : const Color(0xFF9CA3AF),
+                          : AppColors.slate400,
                    ),
                  ),
          ),
@@ -247,38 +294,13 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
                ? Container(
                    height: 2,
                    decoration: BoxDecoration(
-                      color: const Color(0xFFEF4444),
+                      color: AppColors.red500,
                      borderRadius: BorderRadius.circular(99),
                    ),
                  )
-                : hasEvent
-                ? Container(
-                    height: 22,
-                    padding: const EdgeInsets.symmetric(horizontal: 8),
-                    decoration: BoxDecoration(
-                      color: eventBg ?? const Color(0xFFE5E7EB),
-                      borderRadius: BorderRadius.circular(8),
-                      border: Border.all(
-                        color: eventBorder ?? const Color(0xFFD1D5DB),
-                      ),
-                    ),
-                    child: Align(
-                      alignment: Alignment.centerLeft,
-                      child: Text(
-                        eventText ?? '',
-                        style: TextStyle(
-                          fontSize: 11,
-                          fontWeight: FontWeight.w600,
-                          color: eventColor ?? const Color(0xFF6B7280),
-                        ),
-                      ),
-                    ),
-                  )
                : Container(
                    height: 1,
-                    color: isDisabled
-                        ? const Color(0xFFECEFF4)
-                        : const Color(0xFFE5E7EB),
+                    color: isDisabled ? AppColors.blue50 : AppColors.border,
                  ),
          ),
        ],
@@ -289,9 +311,15 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
  Widget _buildBottomDock() {
    return BottomDock(
      activeTab: DockTab.calendar,
-      onTodoTap: () => context.push('/todo'),
-      onCalendarTap: () {},
-      onHomeTap: () => Navigator.of(context).pop(),
+      onTodoTap: () {
+        _calendarManager.setViewType(CalendarViewType.day);
+        context.push('/todo');
+      },
+      onCalendarTap: () {
+        _calendarManager.setViewType(CalendarViewType.day);
+        context.go('/calendar/month');
+      },
+      onHomeTap: () => context.go('/home'),
    );
  }
 }