feat(apps): 重构 UI 架构为 presentation 层并新增 l10n 国际化支持
This commit is contained in:
qzl
@@ -0,0 +1,593 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
import '../../../../app/di/injection.dart';
|
||||
import '../../../../core/l10n/l10n.dart';
|
||||
import '../../../../core/theme/design_tokens.dart';
|
||||
import '../../../../shared/widgets/app_button.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/error_retry_surface.dart';
|
||||
import '../../../../shared/widgets/full_screen_loading.dart';
|
||||
import '../../../../shared/widgets/toast/toast.dart';
|
||||
import '../../../../shared/widgets/toast/toast_type.dart';
|
||||
import '../../../calendar/data/calendar_api.dart';
|
||||
import '../../../calendar/data/models/schedule_item_model.dart';
|
||||
import '../../data/todo_api.dart';
|
||||
|
||||
class TodoEditScreen extends StatefulWidget {
|
||||
final String? todoId;
|
||||
|
||||
const TodoEditScreen({super.key, required this.todoId});
|
||||
|
||||
const TodoEditScreen.create({super.key}) : todoId = null;
|
||||
|
||||
bool get isCreateMode => todoId == null;
|
||||
|
||||
@override
|
||||
State<TodoEditScreen> createState() => _TodoEditScreenState();
|
||||
}
|
||||
|
||||
class _TodoEditScreenState extends State<TodoEditScreen> {
|
||||
final TodoApi _todoApi = sl<TodoApi>();
|
||||
final CalendarApi _calendarApi = sl<CalendarApi>();
|
||||
|
||||
final TextEditingController _titleController = TextEditingController();
|
||||
final TextEditingController _descriptionController = TextEditingController();
|
||||
|
||||
TodoResponse? _todo;
|
||||
bool _loading = true;
|
||||
bool _saving = false;
|
||||
String? _error;
|
||||
|
||||
int _priority = 1;
|
||||
final Set<String> _selectedScheduleItemIds = <String>{};
|
||||
List<_ScheduleItemSimple> _scheduleItems = const <_ScheduleItemSimple>[];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_loadPage();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_titleController.dispose();
|
||||
_descriptionController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Future<void> _loadPage() async {
|
||||
setState(() {
|
||||
_loading = true;
|
||||
_error = null;
|
||||
});
|
||||
|
||||
try {
|
||||
final now = DateTime.now();
|
||||
final start = now.subtract(const Duration(days: 30));
|
||||
final end = now.add(const Duration(days: 90));
|
||||
final scheduleItems = await _calendarApi.listByRange(
|
||||
startAt: start,
|
||||
endAt: end,
|
||||
);
|
||||
|
||||
TodoResponse? todo;
|
||||
if (!widget.isCreateMode) {
|
||||
todo = await _todoApi.getTodo(widget.todoId!);
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
|
||||
_todo = todo;
|
||||
_titleController.text = todo?.title ?? '';
|
||||
_descriptionController.text = todo?.description ?? '';
|
||||
_priority = todo?.priority ?? 1;
|
||||
_selectedScheduleItemIds
|
||||
..clear()
|
||||
..addAll(todo?.scheduleItems.map((item) => item.id) ?? const []);
|
||||
_scheduleItems = scheduleItems
|
||||
.where((item) => item.status == ScheduleStatus.active)
|
||||
.map(
|
||||
(item) => _ScheduleItemSimple(
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
startAt: item.startAt,
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
||||
setState(() {
|
||||
_loading = false;
|
||||
});
|
||||
} catch (error) {
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_loading = false;
|
||||
_error = error.toString();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppColors.todoBg,
|
||||
resizeToAvoidBottomInset: false,
|
||||
body: SafeArea(
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.translucent,
|
||||
onTap: () => FocusScope.of(context).unfocus(),
|
||||
child: Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [AppColors.homeBackgroundTop, AppColors.todoBg],
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
BackTitlePageHeader(
|
||||
title: widget.isCreateMode
|
||||
? context.l10n.todoCreateTitle
|
||||
: context.l10n.todoEditTitle,
|
||||
),
|
||||
Expanded(child: _buildBody()),
|
||||
_buildBottomAction(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
if (_loading) {
|
||||
return const FullScreenLoading();
|
||||
}
|
||||
|
||||
if (_error != null) {
|
||||
return ErrorRetrySurface(
|
||||
message: context.l10n.commonLoadFailed(_error!),
|
||||
onRetry: _loadPage,
|
||||
);
|
||||
}
|
||||
|
||||
if (!widget.isCreateMode && _todo == null) {
|
||||
return Center(child: Text(context.l10n.todoNotFound));
|
||||
}
|
||||
|
||||
return ListView(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.lg,
|
||||
AppSpacing.sm,
|
||||
AppSpacing.lg,
|
||||
AppSpacing.lg,
|
||||
),
|
||||
children: [
|
||||
_buildHeaderCard(),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
_buildFormCard(),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
_buildScheduleCard(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildHeaderCard() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.lg),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.white,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
border: Border.all(color: AppColors.borderTertiary),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColors.slate200.withValues(alpha: 0.34),
|
||||
blurRadius: AppRadius.lg,
|
||||
offset: const Offset(0, AppSpacing.xs),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
context.l10n.todoInfoTitle,
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.slate900,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xs),
|
||||
Text(
|
||||
widget.isCreateMode
|
||||
? context.l10n.todoInfoDescCreate
|
||||
: _todo?.status == 'done'
|
||||
? context.l10n.todoInfoDescDone
|
||||
: context.l10n.todoInfoDescDefault,
|
||||
style: const TextStyle(fontSize: 13, color: AppColors.slate500),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFormCard() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.lg),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.white,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
border: Border.all(color: AppColors.borderSecondary),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AppSheetInputField(
|
||||
controller: _titleController,
|
||||
label: context.l10n.todoFieldTitle,
|
||||
hint: context.l10n.todoFieldTitleHint,
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
AppSheetInputField(
|
||||
controller: _descriptionController,
|
||||
label: context.l10n.todoFieldDescriptionOptional,
|
||||
hint: context.l10n.todoFieldDescriptionHint,
|
||||
maxLines: 2,
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
Text(
|
||||
context.l10n.todoPriority,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.slate700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Wrap(
|
||||
spacing: AppSpacing.sm,
|
||||
runSpacing: AppSpacing.sm,
|
||||
children: [
|
||||
_PriorityPill(
|
||||
label: context.l10n.todoQuadrantImportantUrgent,
|
||||
selected: _priority == 1,
|
||||
borderColor: AppColors.g1Border,
|
||||
activeColor: AppColors.g1Text,
|
||||
onTap: () => setState(() => _priority = 1),
|
||||
),
|
||||
_PriorityPill(
|
||||
label: context.l10n.todoQuadrantUrgentNotImportant,
|
||||
selected: _priority == 3,
|
||||
borderColor: AppColors.g2Border,
|
||||
activeColor: AppColors.g2Text,
|
||||
onTap: () => setState(() => _priority = 3),
|
||||
),
|
||||
_PriorityPill(
|
||||
label: context.l10n.todoQuadrantImportantNotUrgent,
|
||||
selected: _priority == 2,
|
||||
borderColor: AppColors.g3Border,
|
||||
activeColor: AppColors.g3Text,
|
||||
onTap: () => setState(() => _priority = 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildScheduleCard() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.lg),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.surfaceSecondary,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xl),
|
||||
border: Border.all(color: AppColors.borderSecondary),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
context.l10n.todoLinkedCalendarEvents,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.slate700,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Text(
|
||||
context.l10n.todoItemCount(_selectedScheduleItemIds.length),
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.slate500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
if (_scheduleItems.isEmpty)
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: AppSpacing.xl),
|
||||
child: Center(
|
||||
child: Text(
|
||||
context.l10n.todoNoSelectableCalendarEvents,
|
||||
style: const TextStyle(color: AppColors.slate500),
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 280),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
itemCount: _scheduleItems.length,
|
||||
separatorBuilder: (context, index) =>
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
itemBuilder: (context, index) {
|
||||
final item = _scheduleItems[index];
|
||||
final selected = _selectedScheduleItemIds.contains(item.id);
|
||||
return _ScheduleSelectableTile(
|
||||
title: item.title,
|
||||
subtitle: _formatDate(item.startAt),
|
||||
selected: selected,
|
||||
onTap: () {
|
||||
setState(() {
|
||||
if (selected) {
|
||||
_selectedScheduleItemIds.remove(item.id);
|
||||
} else {
|
||||
_selectedScheduleItemIds.add(item.id);
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBottomAction() {
|
||||
final canSave = !_loading && !_saving;
|
||||
return Container(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.lg,
|
||||
AppSpacing.sm,
|
||||
AppSpacing.lg,
|
||||
AppSpacing.lg,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.white.withValues(alpha: 0.9),
|
||||
border: const Border(top: BorderSide(color: AppColors.borderSecondary)),
|
||||
),
|
||||
child: AppButton(
|
||||
text: _saving
|
||||
? context.l10n.todoSaveInProgress
|
||||
: (widget.isCreateMode
|
||||
? context.l10n.todoCreateButton
|
||||
: context.l10n.todoSaveChanges),
|
||||
onPressed: canSave ? _save : null,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _save() async {
|
||||
if (_saving) {
|
||||
return;
|
||||
}
|
||||
final title = _titleController.text.trim();
|
||||
if (title.isEmpty) {
|
||||
Toast.show(context, context.l10n.todoEnterTitle, type: ToastType.warning);
|
||||
return;
|
||||
}
|
||||
|
||||
setState(() {
|
||||
_saving = true;
|
||||
});
|
||||
|
||||
try {
|
||||
final description = _descriptionController.text.trim().isEmpty
|
||||
? null
|
||||
: _descriptionController.text.trim();
|
||||
if (widget.isCreateMode) {
|
||||
await _todoApi.createTodo(
|
||||
title: title,
|
||||
description: description,
|
||||
priority: _priority,
|
||||
scheduleItemIds: _selectedScheduleItemIds.toList(),
|
||||
);
|
||||
} else {
|
||||
await _todoApi.updateTodo(
|
||||
widget.todoId!,
|
||||
title: title,
|
||||
description: description,
|
||||
priority: _priority,
|
||||
scheduleItemIds: _selectedScheduleItemIds.toList(),
|
||||
);
|
||||
}
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
context.pop(true);
|
||||
} catch (error) {
|
||||
if (!mounted) {
|
||||
return;
|
||||
}
|
||||
Toast.show(
|
||||
context,
|
||||
context.l10n.todoSaveFailed(error.toString()),
|
||||
type: ToastType.error,
|
||||
);
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_saving = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
String _formatDate(DateTime dt) {
|
||||
return DateFormat.yMd(context.l10n.localeName).add_Hm().format(dt);
|
||||
}
|
||||
}
|
||||
|
||||
class _ScheduleItemSimple {
|
||||
final String id;
|
||||
final String title;
|
||||
final DateTime startAt;
|
||||
|
||||
const _ScheduleItemSimple({
|
||||
required this.id,
|
||||
required this.title,
|
||||
required this.startAt,
|
||||
});
|
||||
}
|
||||
|
||||
class _PriorityPill extends StatelessWidget {
|
||||
final String label;
|
||||
final bool selected;
|
||||
final Color borderColor;
|
||||
final Color activeColor;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _PriorityPill({
|
||||
required this.label,
|
||||
required this.selected,
|
||||
required this.borderColor,
|
||||
required this.activeColor,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppPressable(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 140),
|
||||
curve: Curves.easeOut,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.md,
|
||||
vertical: AppSpacing.sm,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: selected
|
||||
? borderColor.withValues(alpha: 0.28)
|
||||
: AppColors.white,
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
border: Border.all(
|
||||
color: selected ? borderColor : AppColors.slate300,
|
||||
width: selected ? 1.5 : 1,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
|
||||
color: selected ? activeColor : AppColors.slate600,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ScheduleSelectableTile extends StatelessWidget {
|
||||
final String title;
|
||||
final String subtitle;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _ScheduleSelectableTile({
|
||||
required this.title,
|
||||
required this.subtitle,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppPressable(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 120),
|
||||
curve: Curves.easeOut,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? AppColors.surfaceInfoLight : AppColors.white,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
border: Border.all(
|
||||
color: selected ? AppColors.borderQuaternary : AppColors.border,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.slate800,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xs),
|
||||
Text(
|
||||
subtitle,
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
color: AppColors.slate500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.md),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 120),
|
||||
width: AppSpacing.lg,
|
||||
height: AppSpacing.lg,
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? AppColors.blue600 : AppColors.white,
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
border: Border.all(
|
||||
color: selected ? AppColors.blue600 : AppColors.slate300,
|
||||
),
|
||||
),
|
||||
child: selected
|
||||
? const Icon(Icons.check, size: 12, color: AppColors.white)
|
||||
: null,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user