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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/calendar/ui/dayweek/day_event_layout_engine.dart
+69 -13
View File
@@ -36,6 +36,7 @@ class DayEventLayoutEngine {
required DayViewScale scale,
required double eventAreaLeft,
required double eventAreaWidth,
required DateTime viewDate,
double columnGap = DayTimelineMetrics.eventColumnGap,
}) {
if (events.isEmpty || eventAreaWidth <= 0) {
@@ -44,7 +45,8 @@ class DayEventLayoutEngine {
final sorted =
events
.map(_EventSpan.fromEvent)
.map((e) => _EventSpan.fromEvent(e, viewDate))
.expand((spans) => spans)
.where((span) => span.endMinutes > span.startMinutes)
.toList()
..sort((a, b) {
@@ -149,19 +151,73 @@ class _EventSpan {
required this.endMinutes,
});
factory _EventSpan.fromEvent(ScheduleItemModel event) {
final start = _minutesOfDay(event.startAt);
final end = event.endAt != null ? _minutesOfDay(event.endAt!) : start + 60;
final clampedStart = DayTimelineMetrics.clampMinuteOfDay(start);
var clampedEnd = DayTimelineMetrics.clampMinuteOfDay(end);
if (clampedEnd <= clampedStart) {
clampedEnd = DayTimelineMetrics.clampMinuteOfDay(clampedStart + 1);
static List<_EventSpan> fromEvent(
ScheduleItemModel event,
DateTime viewDate,
) {
final startAt = event.startAt;
final endAt = event.endAt;
final viewDateOnly = DateTime(viewDate.year, viewDate.month, viewDate.day);
final startDateOnly = DateTime(startAt.year, startAt.month, startAt.day);
final endDateOnly = endAt != null
? DateTime(endAt.year, endAt.month, endAt.day)
: startDateOnly;
final startMinOfDay = _minutesOfDay(startAt);
final endMinOfDay = endAt != null
? _minutesOfDay(endAt)
: startMinOfDay + 60;
if (endDateOnly.isAfter(startDateOnly)) {
if (viewDateOnly.isAtSameMomentAs(startDateOnly)) {
final clampedStart = DayTimelineMetrics.clampMinuteOfDay(startMinOfDay);
final clampedEnd = DayTimelineMetrics.minutesInDay;
if (clampedEnd > clampedStart) {
return [
_EventSpan(
event: event,
startMinutes: clampedStart,
endMinutes: clampedEnd,
),
];
}
} else if (viewDateOnly.isAtSameMomentAs(endDateOnly)) {
final clampedStart = 0;
final clampedEnd = DayTimelineMetrics.clampMinuteOfDay(endMinOfDay);
if (clampedEnd > clampedStart) {
return [
_EventSpan(
event: event,
startMinutes: clampedStart,
endMinutes: clampedEnd,
),
];
}
} else if (viewDateOnly.isAfter(startDateOnly) &&
viewDateOnly.isBefore(endDateOnly)) {
return [
_EventSpan(
event: event,
startMinutes: 0,
endMinutes: DayTimelineMetrics.minutesInDay,
),
];
}
return const [];
}
return _EventSpan(
event: event,
startMinutes: clampedStart,
endMinutes: clampedEnd,
);
final clampedStart = DayTimelineMetrics.clampMinuteOfDay(startMinOfDay);
var clampedEnd = DayTimelineMetrics.clampMinuteOfDay(endMinOfDay);
if (clampedEnd <= clampedStart) {
clampedEnd = clampedStart + 1;
}
return [
_EventSpan(
event: event,
startMinutes: clampedStart,
endMinutes: clampedEnd,
),
];
}
}
apps/lib/features/calendar/ui/dayweek/day_view_scale.dart
+2 -2
View File
@@ -1,6 +1,6 @@
class DayViewScale {
static const double defaultHourHeight = 34.0;
static const double minHourHeight = 17.0;
static const double minHourHeight = 34.0;
static const double maxHourHeight = 68.0;
final double hourHeight;
@@ -8,7 +8,7 @@ class DayViewScale {
const DayViewScale({required this.hourHeight});
factory DayViewScale.defaultScale() {
return const DayViewScale(hourHeight: defaultHourHeight);
return const DayViewScale(hourHeight: minHourHeight);
}
DayViewScale copyWith({double? hourHeight}) {
apps/lib/features/calendar/ui/screens/calendar_dayweek_screen.dart
+49 -12
View File
@@ -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
apps/lib/features/calendar/ui/screens/calendar_event_detail_screen.dart
+14 -4
View File
@@ -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) {
apps/lib/features/calendar/ui/screens/calendar_month_screen.dart
+43 -3
View File
@@ -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(
apps/lib/features/calendar/ui/widgets/bottom_dock.dart
+1 -1
View File
@@ -26,7 +26,7 @@ class BottomDock extends StatelessWidget {
left: AppSpacing.xl,
right: AppSpacing.xl,
top: AppSpacing.md,
bottom: AppSpacing.lg,
bottom: AppSpacing.sm,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,