qzl
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. 更新事件详情页支持编辑
|