qzl
2.2 KiB
2.2 KiB
日历事件创建功能设计
Date: 2026-03-02 Status: Approved
1. UI 架构
入口
- 位置：月视图和日视图右上角
- 图标：LucideIcons.plus
- 点击后从底部弹出创建表单（showModalBottomSheet）
底部弹窗表单
- 高度：约占屏幕 80%
- 顶部有关闭按钮和"新建日程"标题
- 内含两个可切换的 TabBar（类似苹果日历）
两个 Tab
| Tab | 字段 |
|---|---|
| 基础 | 标题、开始日期/时间、结束日期/时间 |
| 进阶 | 描述、地点、颜色、备注 |
2. 数据模型
class ScheduleItemModel {
String id; // UUID
String title; // 标题（必填）
String? description; // 描述
DateTime startAt; // 开始时间（必填）
DateTime? endAt; // 结束时间
String timezone; // 时区，默认 "Asia/Shanghai"
ScheduleMetadata? metadata; // 扩展字段
String sourceType; // 来源，默认 "manual"
String status; // 状态，默认 "active"
}
class ScheduleMetadata {
String? color; // 颜色，如 "#3B82F6"
String? location; // 地点
String? notes; // 备注
List<Attachment>? attachments;
}
3. Mock 服务设计
参考 mock_history_service.dart 模式，创建 mock_calendar_service.dart：
- 使用
Env.isMockApi开关 - 内存中存储事件列表
- 支持 CRUD 操作
4. 日历视图集成
月视图
_buildWeekEvents遍历当天事件，显示最多 2-3 个事件标题- 点击日期跳转到日视图
日视图
_buildTimelineBoard在对应时间位置显示事件块- 点击事件进入详情页
5. 路由
现有路由已支持：
/calendar/month- 月视图/calendar/dayweek- 日视图/calendar/events/:id- 事件详情页
底部弹窗使用 showModalBottomSheet，无需新路由。
6. 实现步骤
- 创建数据模型
schedule_item_model.dart - 创建 Mock Calendar Service
- 创建底部弹窗创建表单组件
- 在月视图添加 + 号图标
- 在日视图添加 + 号图标
- 集成事件显示到月视图
- 集成事件显示到日视图
- 更新事件详情页支持编辑