feat(apps): refine login consent and calendar day/month UX

This commit is contained in:
qzl
2026-03-20 19:00:24 +08:00
parent 2e94908eaa
commit fcf98b1142
11 changed files with 359 additions and 58 deletions
@@ -41,6 +41,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
final DayEventLayoutEngine _layoutEngine = const DayEventLayoutEngine();
final Map<int, Offset> _activePointers = {};
final ScrollController _dayStripController = ScrollController();
final ScrollController _timelineController = ScrollController();
DayViewScale _scale = DayViewScale.defaultScale();
DayViewScale _pinchStartScale = DayViewScale.defaultScale();
@@ -67,6 +68,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollToSelectedDate();
_scrollTimelineToNow();
});
}
@@ -91,6 +93,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
void dispose() {
WidgetsBinding.instance.removeObserver(this);
_dayStripController.dispose();
_timelineController.dispose();
super.dispose();
}
@@ -125,6 +128,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
onPointerCancel: _handlePointerCancel,
behavior: HitTestBehavior.translucent,
child: SingleChildScrollView(
controller: _timelineController,
child: Padding(
padding: const EdgeInsets.only(
left: AppSpacing.lg,
@@ -160,6 +164,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
_calendarManager.setSelectedDate(today);
_updateMonthDates();
_scrollToSelectedDate(animate: true);
_scrollTimelineToNow(animate: true);
_loadEvents();
}
@@ -194,6 +199,10 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
if ((nextScale.hourHeight - _scale.hourHeight).abs() < 0.1) {
return;
}
if (nextScale.hourHeight < _scale.hourHeight &&
_scale.hourHeight <= DayViewScale.minHourHeight) {
return;
}
setState(() {
_scale = nextScale;
});
@@ -410,6 +419,29 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
_dayStripController.jumpTo(offset);
}
void _scrollTimelineToNow({bool animate = false}) {
if (!_timelineController.hasClients) {
return;
}
final now = DateTime.now();
final minuteOfDay = now.hour * 60 + now.minute;
final targetY = _scale.pixelsForMinutes(minuteOfDay);
final viewportHeight = _timelineController.position.viewportDimension;
final offset = targetY - (viewportHeight / 3);
final max = _timelineController.position.maxScrollExtent;
final clampedOffset = offset.clamp(0.0, max);
if (animate) {
_timelineController.animateTo(
clampedOffset,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
);
return;
}
_timelineController.jumpTo(clampedOffset);
}
Widget _buildDayItem(DateTime date, bool isSelected, bool isWeekend) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
@@ -465,6 +497,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
scale: _scale,
eventAreaLeft: eventAreaLeft,
eventAreaWidth: eventAreaWidth,
viewDate: _selectedDate,
);
return SizedBox(
@@ -521,19 +554,17 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
}) {
final minute = hour * DayTimelineMetrics.minutesInHour;
final y = _scale.pixelsForMinutes(minute);
final isDisabled = hour == DayTimelineMetrics.hoursInDay;
final labelTop = (y - 7).clamp(0.0, boardHeight - 14);
final isLastHour = hour == DayTimelineMetrics.hoursInDay;
final adjustedY = isLastHour ? boardHeight - 1 : y;
final labelTop = (adjustedY - 7).clamp(0.0, boardHeight - 14);
return Stack(
children: [
Positioned(
top: y,
top: adjustedY,
left: eventAreaLeft,
right: 0,
child: Container(
height: 1,
color: isDisabled ? AppColors.blue50 : AppColors.border,
),
child: Container(height: 1, color: AppColors.border),
),
Positioned(
top: labelTop,
@@ -545,7 +576,7 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: isDisabled ? AppColors.slate300 : AppColors.slate400,
color: AppColors.slate400,
),
),
),
@@ -609,10 +640,16 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen>
required DayEventLayout layout,
required double boardHeight,
}) {
final eventColor = resolveEventColor(
status: layout.event.status,
colorHex: layout.event.metadata?.color,
);
final isArchived = layout.event.status == ScheduleStatus.archived;
Color eventColor;
if (isArchived) {
eventColor = AppColors.slate400;
} else {
eventColor = resolveEventColor(
status: layout.event.status,
colorHex: layout.event.metadata?.color,
);
}
final isCompact = layout.visualHeight < 20;
final tapHeight = layout.visualHeight < _minEventTapHeight
? _minEventTapHeight
@@ -320,6 +320,7 @@ class _CalendarEventDetailScreenState extends State<CalendarEventDetailScreen> {
const SizedBox(height: AppSpacing.xs),
Text(
timeRange,
maxLines: 2,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
@@ -507,12 +508,21 @@ class _CalendarEventDetailScreenState extends State<CalendarEventDetailScreen> {
}
String _formatRangeLabel(DateTime startAt, DateTime? endAt) {
final dateLabel =
'${startAt.month}${startAt.day}${_getWeekday(startAt.weekday)}';
final startLabel =
'${startAt.month}${startAt.day}${_getWeekday(startAt.weekday)} ${_formatTime(startAt)}';
if (endAt == null) {
return '$dateLabel ${_formatTime(startAt)}';
return startLabel;
}
return '$dateLabel ${_formatTime(startAt)} - ${_formatTime(endAt)}';
final isSameDay =
startAt.year == endAt.year &&
startAt.month == endAt.month &&
startAt.day == endAt.day;
if (isSameDay) {
return '$startLabel - ${_formatTime(endAt)}';
}
final endLabel =
'${endAt.month}${endAt.day}${_getWeekday(endAt.weekday)} ${_formatTime(endAt)}';
return '开始: $startLabel\n结束: $endLabel';
}
Widget _buildStatusBadge(ScheduleStatus status) {
@@ -107,6 +107,9 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
}
Widget _buildHeader() {
final today = DateTime.now();
final isNotToday = !isSameDay(_selectedDate, today);
return SizedBox(
height: 76,
child: Padding(
@@ -148,6 +151,31 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
),
),
const Spacer(),
if (isNotToday)
AppPressable(
borderRadius: BorderRadius.circular(AppRadius.xl),
onTap: _goToToday,
child: Container(
height: 36,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: AppColors.messageBtnWrap,
borderRadius: BorderRadius.circular(AppRadius.xl),
border: Border.all(color: AppColors.messageBtnBorder),
),
child: const Center(
child: Text(
'今天',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
),
),
),
),
),
if (isNotToday) const SizedBox(width: 8),
AppPressable(
borderRadius: BorderRadius.circular(AppRadius.full),
onTap: () async {
@@ -181,6 +209,20 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
);
}
void _goToToday() {
final today = DateTime.now();
final targetMonth = DateTime(today.year, today.month, 1);
setState(() {
_selectedDate = today;
if (_currentMonth.year != targetMonth.year ||
_currentMonth.month != targetMonth.month) {
_currentMonth = targetMonth;
}
});
_calendarManager.setSelectedDate(today);
_loadMonthEvents(forceRefresh: true);
}
Widget _buildMonthContent() {
return Column(
children: [
@@ -280,9 +322,7 @@ class _CalendarMonthScreenState extends State<CalendarMonthScreen>
'${AppRoutes.calendarDayWeek}?date=${formatYmd(date)}',
);
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 140),
curve: Curves.easeOut,
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(