eryao/docs/plans/2026-04-03-datetime-picker-design.md

摇卦页面日期时间选择器优化设计

1. 现状问题

1. 硬编码日期格式：DateFormat('yyyy年MM月dd日 HH:mm') 在3处硬编码，未做 l10n

   • auto_divination_screen.dart:353
   • manual_divination_screen.dart:271
   • divination_result_screen.dart:455

2. 原生 picker 样式简陋：使用 Material showDatePicker + showTimePicker，交互体验差

2. 优化方案

2.1 自定义底部弹层时间选择器

• 使用 CupertinoDatePicker（iOS 滚轮样式）替代原生 Material picker
• 底部弹层，带半透明遮罩和圆角动画
• 日期/时间在同一个 picker 内通过 SegmentedControl 切换

2.2 Locale-aware 日期格式化

使用 intl 包实现：

• 中文 locale：DateFormat.yMd('zh_CN').add_Hm() → 2026年4月3日 14:30
• 英文 locale：DateFormat.yMd('en').add_Hm() → 4/3/2026 14:30

2.3 新增 l10n 键值

已有键值：

• autoSelectTime: "选择起卦时间" / "Select time"
• manualSelectTime: "选择起卦时间" / "Select time"
• divinationModify: "修改" / "Modify"

无需新增键值，日期格式完全由 intl 包根据 locale 自动处理。

3. 组件结构

apps/lib/shared/widgets/
  └── date_time_picker/
        └── date_time_picker_bottom_sheet.dart  # 弹层容器

DateTimePickerBottomSheet 接口：

Future<DateTime?> showDateTimePickerBottomSheet({
  required BuildContext context,
  required DateTime initialDateTime,
  DateTime? minDateTime,
  DateTime? maxDateTime,
});

4. 交互流程

1. 用户点击"修改"按钮
2. 底部弹出 DateTimePickerBottomSheet
3. SegmentedControl 切换"日期"/"时间"tab
4. Cupertino 滚轮选择值
5. 点击"确认"关闭弹层并更新状态

5. 涉及的改动文件

新建

• apps/lib/shared/widgets/date_time_picker/date_time_picker_bottom_sheet.dart

修改

• apps/lib/features/divination/presentation/screens/auto_divination_screen.dart
• apps/lib/features/divination/presentation/screens/manual_divination_screen.dart
• apps/lib/features/divination/presentation/screens/divination_result_screen.dart

6. 验收标准

1. 日期格式跟随系统语言：中文环境显示中文格式，英文环境显示英文格式
2. 选择器使用 iOS 滚轮样式
3. 底部弹层带遮罩动画
4. 原硬编码格式完全移除