qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化前端 UI 组件与交互体验

Browse Source 
- 优化日历、待办、消息等页面交互
- 更新 ChatBloc 与 UI Schema 渲染
- 优化联系人、首页、设置页面体验
This commit is contained in:
qzl
2026-03-16 16:11:28 +08:00
parent a75c868bca
commit 4b92772535
18 changed files with 1591 additions and 1780 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/todo/ui/screens/todo_detail_screen.dart
+7 -4
View File
@@ -3,6 +3,7 @@ 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_loading_indicator.dart';
import '../../../../shared/widgets/page_header.dart' as widgets;
import '../../../../shared/widgets/app_button.dart';
import '../../../../shared/widgets/toast/toast.dart';
@@ -130,7 +131,7 @@ class _TodoDetailScreenState extends State<TodoDetailScreen> {
Widget _buildContent() {
if (_isLoading) {
return const Center(child: CircularProgressIndicator());
return const Center(child: AppLoadingIndicator(size: 22));
}
if (_error != null) {
@@ -428,6 +429,7 @@ class _EditTodoSheetState extends State<_EditTodoSheet> {
late TextEditingController _descriptionController;
late int _priority;
late Set<String> _selectedScheduleItems;
late final Future<List<_ScheduleItemSimple>> _scheduleItemsFuture;
@override
void initState() {
@@ -438,6 +440,7 @@ class _EditTodoSheetState extends State<_EditTodoSheet> {
);
_priority = widget.todo.priority;
_selectedScheduleItems = widget.todo.scheduleItems.map((e) => e.id).toSet();
_scheduleItemsFuture = _loadScheduleItems();
}
@override
@@ -534,11 +537,11 @@ class _EditTodoSheetState extends State<_EditTodoSheet> {
),
),
Expanded(
child: FutureBuilder(
future: _loadScheduleItems(),
child: FutureBuilder<List<_ScheduleItemSimple>>(
future: _scheduleItemsFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
return const Center(child: AppLoadingIndicator(size: 22));
}
if (snapshot.hasError) {
return Center(child: Text('加载失败: ${snapshot.error}'));
apps/lib/features/todo/ui/screens/todo_quadrants_screen.dart
+319 -160
View File
@@ -1,8 +1,12 @@
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_pressable.dart';
import '../../../../shared/widgets/app_sheet_input_field.dart';
import '../../../../shared/widgets/toast/toast.dart';
import '../../../../shared/widgets/toast/toast_type.dart';
import '../../../calendar/data/calendar_api.dart';
@@ -22,6 +26,7 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
List<TodoResponse> _todos = [];
bool _isLoading = true;
bool _loadingTodosRequest = false;
String? _error;
@override
@@ -31,6 +36,11 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
}
Future<void> _loadTodos() async {
if (_loadingTodosRequest) {
return;
}
_loadingTodosRequest = true;
setState(() {
_isLoading = true;
_error = null;
@@ -38,15 +48,23 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
try {
final todos = await _todoApi.getTodos(status: 'pending');
if (!mounted) {
return;
}
setState(() {
_todos = todos;
_isLoading = false;
});
} catch (e) {
if (!mounted) {
return;
}
setState(() {
_error = e.toString();
_isLoading = false;
});
} finally {
_loadingTodosRequest = false;
}
}
@@ -110,11 +128,6 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.todoBg,
floatingActionButton: FloatingActionButton(
onPressed: _addTodo,
backgroundColor: AppColors.blue600,
child: const Icon(Icons.add, color: Colors.white),
),
body: PopScope(
canPop: false,
onPopInvokedWithResult: (didPop, result) {
@@ -142,6 +155,7 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
padding: const EdgeInsets.only(left: 16, right: 16, top: 14, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Text(
'待办事项',
@@ -152,9 +166,54 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
color: AppColors.slate900,
),
),
IconButton(
onPressed: _loadTodos,
icon: const Icon(Icons.refresh, color: AppColors.slate600),
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,
),
),
),
],
),
],
),
@@ -164,7 +223,7 @@ class _TodoQuadrantsScreenState extends State<TodoQuadrantsScreen> {
Widget _buildContent() {
if (_isLoading) {
return const Center(child: CircularProgressIndicator());
return const Center(child: AppLoadingIndicator(size: 22));
}
if (_error != null) {
@@ -438,6 +497,13 @@ class _AddTodoSheetState extends State<_AddTodoSheet> {
final _descriptionController = TextEditingController();
int _priority = 1;
final Set<String> _selectedScheduleItems = {};
late final Future<List<_ScheduleItemSimple>> _scheduleItemsFuture;
@override
void initState() {
super.initState();
_scheduleItemsFuture = _loadScheduleItems();
}
@override
void dispose() {
@@ -448,165 +514,258 @@ class _AddTodoSheetState extends State<_AddTodoSheet> {
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.85,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
children: [
SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'添加待办',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 20,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 20),
TextField(
controller: _titleController,
decoration: const InputDecoration(
labelText: '标题',
border: OutlineInputBorder(),
),
autofocus: true,
),
const SizedBox(height: 16),
TextField(
controller: _descriptionController,
decoration: const InputDecoration(
labelText: '描述（可选）',
border: OutlineInputBorder(),
),
maxLines: 2,
),
const SizedBox(height: 16),
const Text(
'优先级',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 8),
Row(
children: [
_PriorityChip(
label: '重要紧急',
selected: _priority == 1,
color: AppColors.g1Border,
onTap: () => setState(() => _priority = 1),
),
const SizedBox(width: 8),
_PriorityChip(
label: '紧急不重要',
selected: _priority == 3,
color: AppColors.g2Border,
onTap: () => setState(() => _priority = 3),
),
const SizedBox(width: 8),
_PriorityChip(
label: '重要不紧急',
selected: _priority == 2,
color: AppColors.g3Border,
onTap: () => setState(() => _priority = 2),
),
],
),
],
),
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),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
children: [
Text(
'关联日历事件',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
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: 8),
Expanded(
child: FutureBuilder(
future: _loadScheduleItems(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return Center(child: Text('加载失败: ${snapshot.error}'));
}
final items = snapshot.data ?? [];
if (items.isEmpty) {
return const Center(child: Text('暂无日历事件'));
}
return ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
final isSelected = _selectedScheduleItems.contains(item.id);
return CheckboxListTile(
title: Text(item.title),
subtitle: Text(_formatDate(item.startAt)),
value: isSelected,
onChanged: (value) {
setState(() {
if (value == true) {
_selectedScheduleItems.add(item.id);
} else {
_selectedScheduleItems.remove(item.id);
}
});
},
);
},
);
},
),
),
Padding(
padding: const EdgeInsets.all(16),
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(),
});
},
),
),
),
],
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<List<_ScheduleItemSimple>>(
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<List<_ScheduleItemSimple>> _loadScheduleItems() async {
final calendarApi = sl<CalendarApi>();
final now = DateTime.now();