# 日历事件创建功能设计

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