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 '../../../../shared/widgets/app_button.dart'; import '../../../../shared/widgets/app_loading_indicator.dart'; import '../../../../shared/widgets/app_pull_refresh_feedback.dart'; import '../../../../shared/widgets/app_pressable.dart'; import '../../../../shared/widgets/app_sheet_input_field.dart'; import '../../../../shared/widgets/back_title_page_header.dart'; import '../../../../shared/widgets/toast/toast.dart'; import '../../../../shared/widgets/toast/toast_type.dart'; import '../../../calendar/data/calendar_api.dart'; import '../../../calendar/ui/calendar_state_manager.dart'; import '../../../calendar/ui/widgets/bottom_dock.dart'; import '../../data/todo_api.dart'; class TodoQuadrantsScreen extends StatefulWidget { const TodoQuadrantsScreen({super.key}); @override State createState() => _TodoQuadrantsScreenState(); } class _TodoQuadrantsScreenState extends State { final TodoApi _todoApi = sl(); List _todos = []; bool _isLoading = true; bool _isPullRefreshing = false; bool _loadingTodosRequest = false; String? _error; @override void initState() { super.initState(); _loadTodos(); } Future _loadTodos({bool showPageLoader = true}) async { if (_loadingTodosRequest || _isPullRefreshing) { return; } _loadingTodosRequest = true; setState(() { if (showPageLoader) { _isLoading = true; _error = null; } else { _isPullRefreshing = true; } }); try { final todos = await _todoApi.getTodos(status: 'pending'); if (!mounted) { return; } setState(() { _todos = todos; _isLoading = false; _isPullRefreshing = false; _error = null; }); } catch (e) { if (!mounted) { return; } if (showPageLoader) { setState(() { _error = e.toString(); _isLoading = false; _isPullRefreshing = false; }); } else { setState(() => _isPullRefreshing = false); Toast.show(context, '刷新失败,请稍后重试', type: ToastType.error); } } finally { _loadingTodosRequest = false; } } Future _onPullRefresh() async { await _loadTodos(showPageLoader: false); } List get _importantUrgent => _todos.where((t) => t.priority == 1).toList(); List get _urgentNotImportant => _todos.where((t) => t.priority == 3).toList(); List get _importantNotUrgent => _todos.where((t) => t.priority == 2).toList(); Future _completeTodo(TodoResponse todo) async { try { await _todoApi.completeTodo(todo.id); if (mounted) { Toast.show(context, '已完成', type: ToastType.success); } try { await _loadTodos(); } catch (_) { // ignore reload error } } catch (e) { if (mounted) { Toast.show(context, '完成失败: $e', type: ToastType.error); } } } void _navigateToDetail(TodoResponse todo) { context.push('/todo/${todo.id}'); } Future _addTodo() async { final result = await showModalBottomSheet>( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (context) => const _AddTodoSheet(), ); if (result != null) { try { await _todoApi.createTodo( title: result['title'] as String, description: result['description'] as String?, priority: result['priority'] as int, scheduleItemIds: (result['schedule_item_ids'] as List?) ?? [], ); await _loadTodos(); } catch (e) { if (mounted) { Toast.show(context, '创建失败: $e', type: ToastType.error); } } } } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: AppColors.todoBg, body: PopScope( canPop: false, onPopInvokedWithResult: (didPop, result) { if (!didPop) { context.go('/home'); } }, child: SafeArea( child: Column( children: [ _buildHeader(), Expanded(child: _buildContent()), _buildBottomDock(), ], ), ), ), ); } Widget _buildHeader() { return BackTitlePageHeader( title: '待办事项', showBackButton: false, trailing: Row( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ AppPressable( borderRadius: BorderRadius.circular(AppRadius.full), onTap: _loadTodos, child: Container( width: 36, height: 36, decoration: BoxDecoration( color: AppColors.messageBtnWrap, borderRadius: BorderRadius.circular(AppRadius.full), border: Border.all(color: AppColors.messageBtnBorder), ), child: const Icon( LucideIcons.refreshCcw, size: 18, color: AppColors.slate600, ), ), ), const SizedBox(width: AppSpacing.sm), AppPressable( borderRadius: BorderRadius.circular(AppRadius.full), onTap: _addTodo, child: Container( width: 36, height: 36, decoration: BoxDecoration( color: AppColors.blue600, borderRadius: BorderRadius.circular(AppRadius.full), boxShadow: [ BoxShadow( color: AppColors.blue300.withValues(alpha: 0.28), blurRadius: AppRadius.lg, offset: const Offset(0, AppSpacing.xs), ), ], ), child: const Icon( LucideIcons.plus, size: 18, color: AppColors.white, ), ), ), ], ), ); } Widget _buildContent() { if (_isLoading) { return const Center(child: AppLoadingIndicator(size: 22)); } if (_error != null) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('加载失败: $_error', style: const TextStyle(color: Colors.red)), const SizedBox(height: 16), AppButton(text: '重试', onPressed: _loadTodos), ], ), ); } return Stack( children: [ RefreshIndicator.noSpinner( onRefresh: _onPullRefresh, child: Padding( padding: const EdgeInsets.only( left: 16, right: 16, top: 4, bottom: 96, ), child: ListView( children: [ _buildQuadrant( title: '重要紧急', textColor: AppColors.g1Text, dividerColor: AppColors.g1Divider, borderColor: AppColors.g1Border, items: _importantUrgent, onComplete: _completeTodo, onTap: _navigateToDetail, ), const SizedBox(height: 12), _buildQuadrant( title: '紧急不重要', textColor: AppColors.g2Text, dividerColor: AppColors.g2Divider, borderColor: AppColors.g2Border, items: _urgentNotImportant, onComplete: _completeTodo, onTap: _navigateToDetail, ), const SizedBox(height: 12), _buildQuadrant( title: '重要不紧急', textColor: AppColors.g3Text, dividerColor: AppColors.g3Divider, borderColor: AppColors.g3Border, items: _importantNotUrgent, onComplete: _completeTodo, onTap: _navigateToDetail, ), ], ), ), ), Align( alignment: Alignment.topCenter, child: AppPullRefreshFeedback(visible: _isPullRefreshing), ), ], ); } Widget _buildQuadrant({ required String title, required Color textColor, required Color dividerColor, required Color borderColor, required List items, required Future Function(TodoResponse) onComplete, required void Function(TodoResponse) onTap, }) { return Container( width: double.infinity, padding: const EdgeInsets.all(10), decoration: BoxDecoration( color: AppColors.todoCardBg, borderRadius: BorderRadius.circular(14), border: Border.all(color: borderColor, width: 1), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( title, style: TextStyle( fontFamily: 'Inter', fontSize: 15, fontWeight: FontWeight.w700, color: textColor, ), ), Text( '${items.length}项', style: TextStyle( fontFamily: 'Inter', fontSize: 12, fontWeight: FontWeight.w700, color: textColor, ), ), ], ), const SizedBox(height: 8), Container(height: 1, color: dividerColor), const SizedBox(height: 8), if (items.isEmpty) const Padding( padding: EdgeInsets.symmetric(vertical: 16), child: Center( child: Text( '暂无待办', style: TextStyle( fontFamily: 'Inter', fontSize: 13, color: AppColors.slate400, ), ), ), ) else ...items.map( (item) => _TodoItemWidget( item: item, onComplete: () => onComplete(item), onTap: () => onTap(item), ), ), ], ), ); } Widget _buildBottomDock() { return BottomDock( activeTab: DockTab.todo, onTodoTap: () {}, onCalendarTap: () { final manager = sl(); final viewType = manager.viewType; final date = manager.selectedDate; final dateStr = '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}'; if (viewType == CalendarViewType.month) { context.go('/calendar/month'); } else { context.go('/calendar/dayweek?date=$dateStr'); } }, onHomeTap: () => context.go('/home'), ); } } class _TodoItemWidget extends StatefulWidget { final TodoResponse item; final VoidCallback onComplete; final VoidCallback onTap; const _TodoItemWidget({ required this.item, required this.onComplete, required this.onTap, }); @override State<_TodoItemWidget> createState() => _TodoItemWidgetState(); } class _TodoItemWidgetState extends State<_TodoItemWidget> with SingleTickerProviderStateMixin { bool _isChecked = false; late AnimationController _controller; late Animation _scaleAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: 200), vsync: this, ); _scaleAnimation = Tween( begin: 0.0, end: 1.0, ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOutBack)); } @override void dispose() { _controller.dispose(); super.dispose(); } void _handleCheckTap() async { if (_isChecked) return; setState(() { _isChecked = true; }); _controller.forward().then((_) { widget.onComplete(); }); } @override Widget build(BuildContext context) { return GestureDetector( onTap: widget.onTap, child: SizedBox( height: 42, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( child: Text( widget.item.title, style: const TextStyle( fontFamily: 'Inter', fontSize: 13, fontWeight: FontWeight.w600, color: AppColors.slate700, ), ), ), GestureDetector( onTap: _handleCheckTap, child: AnimatedBuilder( animation: _controller, builder: (context, child) { return Container( width: 20, height: 20, decoration: BoxDecoration( color: _isChecked ? AppColors.blue600 : Colors.white, border: Border.all( color: _isChecked ? AppColors.blue600 : AppColors.slate300, width: 1.5, ), borderRadius: BorderRadius.circular(4), ), child: _isChecked ? Transform.scale( scale: _scaleAnimation.value, child: const Icon( Icons.check, size: 14, color: Colors.white, ), ) : null, ); }, ), ), ], ), ), ); } } class _AddTodoSheet extends StatefulWidget { const _AddTodoSheet(); @override State<_AddTodoSheet> createState() => _AddTodoSheetState(); } class _AddTodoSheetState extends State<_AddTodoSheet> { final _titleController = TextEditingController(); final _descriptionController = TextEditingController(); int _priority = 1; final Set _selectedScheduleItems = {}; late final Future> _scheduleItemsFuture; @override void initState() { super.initState(); _scheduleItemsFuture = _loadScheduleItems(); } @override void dispose() { _titleController.dispose(); _descriptionController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final bottomInset = MediaQuery.of(context).viewInsets.bottom; return AnimatedPadding( duration: const Duration(milliseconds: 150), curve: Curves.easeOut, padding: EdgeInsets.only(bottom: bottomInset), child: Container( height: MediaQuery.of(context).size.height * 0.85, decoration: const BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.vertical( top: Radius.circular(AppRadius.xxl), ), ), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ const SizedBox(height: AppSpacing.sm), Center( child: Container( width: 36, height: 4, decoration: BoxDecoration( color: AppColors.slate200, borderRadius: BorderRadius.circular(AppRadius.full), ), ), ), const SizedBox(height: AppSpacing.md), const Padding( padding: EdgeInsets.symmetric(horizontal: AppSpacing.xl), child: Text( '添加待办', style: TextStyle( fontFamily: 'Inter', fontSize: 20, fontWeight: FontWeight.w700, color: AppColors.slate900, ), ), ), const SizedBox(height: AppSpacing.lg), Expanded( child: SingleChildScrollView( keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xl), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildInputField( controller: _titleController, label: '标题', hint: '输入待办标题', autofocus: true, ), const SizedBox(height: AppSpacing.lg), _buildInputField( controller: _descriptionController, label: '描述(可选)', hint: '补充细节或备注', maxLines: 2, ), const SizedBox(height: AppSpacing.lg), const Text( '优先级', style: TextStyle( fontFamily: 'Inter', fontSize: 14, fontWeight: FontWeight.w600, color: AppColors.slate700, ), ), const SizedBox(height: AppSpacing.sm), Wrap( spacing: AppSpacing.sm, runSpacing: AppSpacing.sm, children: [ _PriorityChip( label: '重要紧急', selected: _priority == 1, color: AppColors.g1Border, onTap: () => setState(() => _priority = 1), ), _PriorityChip( label: '紧急不重要', selected: _priority == 3, color: AppColors.g2Border, onTap: () => setState(() => _priority = 3), ), _PriorityChip( label: '重要不紧急', selected: _priority == 2, color: AppColors.g3Border, onTap: () => setState(() => _priority = 2), ), ], ), const SizedBox(height: AppSpacing.lg), const Text( '关联日历事件', style: TextStyle( fontFamily: 'Inter', fontSize: 14, fontWeight: FontWeight.w600, color: AppColors.slate700, ), ), const SizedBox(height: AppSpacing.sm), Container( constraints: const BoxConstraints(maxHeight: 260), decoration: BoxDecoration( color: AppColors.slate50, borderRadius: BorderRadius.circular(AppRadius.lg), border: Border.all(color: AppColors.borderSecondary), ), child: FutureBuilder>( future: _scheduleItemsFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return _buildScheduleSkeleton(); } if (snapshot.hasError) { return Padding( padding: const EdgeInsets.all(AppSpacing.lg), child: Text( '加载失败: ${snapshot.error}', style: const TextStyle(color: AppColors.red500), ), ); } final items = snapshot.data ?? const []; if (items.isEmpty) { return const SizedBox( height: 120, child: Center( child: Text( '暂无日历事件', style: TextStyle(color: AppColors.slate500), ), ), ); } return ListView.builder( padding: const EdgeInsets.symmetric( horizontal: AppSpacing.sm, vertical: AppSpacing.xs, ), itemCount: items.length, itemBuilder: (context, index) { final item = items[index]; final isSelected = _selectedScheduleItems .contains(item.id); return CheckboxListTile( dense: true, value: isSelected, title: Text(item.title), subtitle: Text(_formatDate(item.startAt)), onChanged: (value) { setState(() { if (value == true) { _selectedScheduleItems.add(item.id); } else { _selectedScheduleItems.remove(item.id); } }); }, ); }, ); }, ), ), const SizedBox(height: AppSpacing.xl), ], ), ), ), Padding( padding: const EdgeInsets.fromLTRB( AppSpacing.lg, AppSpacing.sm, AppSpacing.lg, AppSpacing.lg, ), child: SizedBox( width: double.infinity, child: AppButton( text: '添加', onPressed: () { if (_titleController.text.trim().isEmpty) { Toast.show(context, '请输入标题', type: ToastType.warning); return; } Navigator.of(context).pop({ 'title': _titleController.text.trim(), 'description': _descriptionController.text.trim().isEmpty ? null : _descriptionController.text.trim(), 'priority': _priority, 'schedule_item_ids': _selectedScheduleItems.toList(), }); }, ), ), ), ], ), ), ); } Widget _buildInputField({ required TextEditingController controller, required String label, required String hint, int maxLines = 1, bool autofocus = false, }) { return AppSheetInputField( controller: controller, label: label, hint: hint, maxLines: maxLines, autofocus: autofocus, ); } Widget _buildScheduleSkeleton() { return ListView.separated( physics: const NeverScrollableScrollPhysics(), padding: const EdgeInsets.symmetric( horizontal: AppSpacing.md, vertical: AppSpacing.md, ), itemCount: 4, separatorBuilder: (context, index) => const SizedBox(height: AppSpacing.sm), itemBuilder: (context, index) { return Container( height: AppSpacing.xxl + AppSpacing.lg, decoration: BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.circular(AppRadius.md), border: Border.all(color: AppColors.borderSecondary), ), ); }, ); } Future> _loadScheduleItems() async { final calendarApi = sl(); final now = DateTime.now(); final start = now.subtract(const Duration(days: 30)); final end = now.add(const Duration(days: 90)); final items = await calendarApi.listByRange(startAt: start, endAt: end); return items .map( (e) => _ScheduleItemSimple(id: e.id, title: e.title, startAt: e.startAt), ) .toList(); } String _formatDate(DateTime dt) { return '${dt.year}年${dt.month}月${dt.day}日 ${dt.hour.toString().padLeft(2, '0')}:${dt.minute.toString().padLeft(2, '0')}'; } } class _ScheduleItemSimple { final String id; final String title; final DateTime startAt; _ScheduleItemSimple({ required this.id, required this.title, required this.startAt, }); } class _PriorityChip extends StatelessWidget { final String label; final bool selected; final Color color; final VoidCallback onTap; const _PriorityChip({ required this.label, required this.selected, required this.color, required this.onTap, }); @override Widget build(BuildContext context) { return GestureDetector( onTap: onTap, child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( color: selected ? color.withValues(alpha: 0.2) : Colors.transparent, border: Border.all( color: selected ? color : AppColors.slate300, width: selected ? 2 : 1, ), borderRadius: BorderRadius.circular(20), ), child: Text( label, style: TextStyle( fontFamily: 'Inter', fontSize: 12, fontWeight: selected ? FontWeight.w600 : FontWeight.normal, color: selected ? color : AppColors.slate600, ), ), ), ); } }