feat: 优化前端 UI 组件与交互体验
- 优化日历、待办、消息等页面交互 - 更新 ChatBloc 与 UI Schema 渲染 - 优化联系人、首页、设置页面体验
This commit is contained in:
qzl
@@ -4,6 +4,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_pressable.dart';
|
||||
import '../calendar_state_manager.dart';
|
||||
import '../calendar_time_utils.dart';
|
||||
import '../widgets/bottom_dock.dart';
|
||||
@@ -25,7 +26,6 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
late final CalendarStateManager _calendarManager;
|
||||
late DateTime _currentMonth;
|
||||
late DateTime _selectedDate;
|
||||
Key _eventsKey = UniqueKey();
|
||||
final Map<String, List<ScheduleItemModel>> _eventsByDay = {};
|
||||
|
||||
@override
|
||||
@@ -136,17 +136,26 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
SizedBox(
|
||||
height: 56,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () => _showMonthPicker(),
|
||||
AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
onTap: _showMonthPicker,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
'${_currentMonth.month}月',
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.slate900,
|
||||
AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 160),
|
||||
switchInCurve: Curves.easeOut,
|
||||
switchOutCurve: Curves.easeOut,
|
||||
child: Text(
|
||||
'${_currentMonth.month}月',
|
||||
key: ValueKey(_currentMonth.month),
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.slate900,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
@@ -159,27 +168,23 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
GestureDetector(
|
||||
AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
onTap: () => CreateEventSheet.show(
|
||||
context,
|
||||
onSaved: () {
|
||||
setState(() {
|
||||
_eventsKey = UniqueKey();
|
||||
});
|
||||
_loadMonthEvents();
|
||||
},
|
||||
onSaved: _loadMonthEvents,
|
||||
),
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.blue600,
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
),
|
||||
child: const Icon(
|
||||
LucideIcons.plus,
|
||||
size: 20,
|
||||
color: Colors.white,
|
||||
color: AppColors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -279,22 +284,24 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
);
|
||||
final isSelected = isSameDay(_selectedDate, date);
|
||||
|
||||
return GestureDetector(
|
||||
return AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_selectedDate = date;
|
||||
});
|
||||
_calendarManager.setSelectedDate(date);
|
||||
_calendarManager.setViewType(CalendarViewType.month);
|
||||
final ymd = formatYmd(date);
|
||||
context.push('/calendar/dayweek?date=$ymd');
|
||||
context.push('/calendar/dayweek?date=${formatYmd(date)}');
|
||||
},
|
||||
child: Container(
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 140),
|
||||
curve: Curves.easeOut,
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? AppColors.blue100 : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
@@ -315,10 +322,7 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
}),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
KeyedSubtree(
|
||||
key: _eventsKey,
|
||||
child: _buildWeekEvents(weekStart, startWeekday, daysInMonth),
|
||||
),
|
||||
_buildWeekEvents(weekStart, startWeekday, daysInMonth),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -357,7 +361,8 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
children: [
|
||||
...displayEvents.map((event) {
|
||||
final color = _parseColor(event.metadata?.color);
|
||||
return GestureDetector(
|
||||
return AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
onTap: () {
|
||||
_calendarManager.setSelectedDate(date);
|
||||
context.push('/calendar/events/${event.id}');
|
||||
@@ -386,7 +391,8 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
);
|
||||
}),
|
||||
if (remainingCount > 0)
|
||||
GestureDetector(
|
||||
AppPressable(
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
onTap: () {
|
||||
_calendarManager.setSelectedDate(date);
|
||||
_calendarManager.setViewType(CalendarViewType.day);
|
||||
@@ -419,77 +425,95 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
|
||||
}
|
||||
|
||||
void _showMonthPicker() {
|
||||
var selectedYear = _currentMonth.year;
|
||||
var selectedMonth = _currentMonth.month;
|
||||
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => Container(
|
||||
height: 300,
|
||||
color: Colors.white,
|
||||
child: Column(
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('取消'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('确定'),
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: Row(
|
||||
backgroundColor: AppColors.white,
|
||||
builder: (context) {
|
||||
return StatefulBuilder(
|
||||
builder: (context, setSheetState) {
|
||||
return SizedBox(
|
||||
height: 300,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Expanded(
|
||||
child: CupertinoPicker(
|
||||
itemExtent: 40,
|
||||
scrollController: FixedExtentScrollController(
|
||||
initialItem: _currentMonth.year - 2020,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(context),
|
||||
child: const Text('取消'),
|
||||
),
|
||||
onSelectedItemChanged: (index) {
|
||||
setState(() {
|
||||
_currentMonth = DateTime(
|
||||
2020 + index,
|
||||
_currentMonth.month,
|
||||
1,
|
||||
);
|
||||
});
|
||||
_loadMonthEvents();
|
||||
},
|
||||
children: List.generate(20, (index) {
|
||||
return Center(child: Text('${2020 + index}年'));
|
||||
}),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
setState(() {
|
||||
_currentMonth = DateTime(
|
||||
selectedYear,
|
||||
selectedMonth,
|
||||
1,
|
||||
);
|
||||
_selectedDate = DateTime(
|
||||
selectedYear,
|
||||
selectedMonth,
|
||||
1,
|
||||
);
|
||||
});
|
||||
_calendarManager.setSelectedDate(_selectedDate);
|
||||
_loadMonthEvents();
|
||||
},
|
||||
child: const Text('确定'),
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: CupertinoPicker(
|
||||
itemExtent: 40,
|
||||
scrollController: FixedExtentScrollController(
|
||||
initialItem: _currentMonth.month - 1,
|
||||
),
|
||||
onSelectedItemChanged: (index) {
|
||||
setState(() {
|
||||
_currentMonth = DateTime(
|
||||
_currentMonth.year,
|
||||
index + 1,
|
||||
1,
|
||||
);
|
||||
});
|
||||
_loadMonthEvents();
|
||||
},
|
||||
children: List.generate(12, (index) {
|
||||
return Center(child: Text('${index + 1}月'));
|
||||
}),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Expanded(
|
||||
child: CupertinoPicker(
|
||||
itemExtent: 40,
|
||||
scrollController: FixedExtentScrollController(
|
||||
initialItem: _currentMonth.year - 2020,
|
||||
),
|
||||
onSelectedItemChanged: (index) {
|
||||
setSheetState(() {
|
||||
selectedYear = 2020 + index;
|
||||
});
|
||||
},
|
||||
children: List.generate(20, (index) {
|
||||
return Center(child: Text('${2020 + index}年'));
|
||||
}),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: CupertinoPicker(
|
||||
itemExtent: 40,
|
||||
scrollController: FixedExtentScrollController(
|
||||
initialItem: _currentMonth.month - 1,
|
||||
),
|
||||
onSelectedItemChanged: (index) {
|
||||
setSheetState(() {
|
||||
selectedMonth = index + 1;
|
||||
});
|
||||
},
|
||||
children: List.generate(12, (index) {
|
||||
return Center(child: Text('${index + 1}月'));
|
||||
}),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user