101 lines
2.2 KiB
Markdown
101 lines
2.2 KiB
Markdown
|
# 日历事件创建功能设计
|
|||
|
|
|
|||
|
|
**Date:** 2026-03-02
|
|||
|
|
**Status:** Approved
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 1. UI 架构
|
|||
|
|
|
|||
|
|
### 入口
|
|||
|
|
|
|||
|
|
- 位置：月视图和日视图右上角
|
|||
|
|
- 图标：LucideIcons.plus
|
|||
|
|
- 点击后从底部弹出创建表单（showModalBottomSheet）
|
|||
|
|
|
|||
|
|
### 底部弹窗表单
|
|||
|
|
|
|||
|
|
- 高度：约占屏幕 80%
|
|||
|
|
- 顶部有关闭按钮和"新建日程"标题
|
|||
|
|
- 内含两个可切换的 TabBar（类似苹果日历）
|
|||
|
|
|
|||
|
|
### 两个 Tab
|
|||
|
|
|
|||
|
|
| Tab | 字段 |
|
|||
|
|
|-----|------|
|
|||
|
|
| 基础 | 标题、开始日期/时间、结束日期/时间 |
|
|||
|
|
| 进阶 | 描述、地点、颜色、备注 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 2. 数据模型
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
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. 实现步骤
|
|||
|
|
|
|||
|
|
1. 创建数据模型 `schedule_item_model.dart`
|
|||
|
|
2. 创建 Mock Calendar Service
|
|||
|
|
3. 创建底部弹窗创建表单组件
|
|||
|
|
4. 在月视图添加 + 号图标
|
|||
|
|
5. 在日视图添加 + 号图标
|
|||
|
|
6. 集成事件显示到月视图
|
|||
|
|
7. 集成事件显示到日视图
|
|||
|
|
8. 更新事件详情页支持编辑
|