WorkBuddy 侧边栏日历
Overview
本技能提供一个可视化日历应用，可在 WorkBuddy 侧边栏「预览」标签页中运行。支持月历视图、事件的增删改查、颜色分类标签，以及从对话中自动同步日程事件。数据通过 localStorage 持久化，纯本地运行，无需网络。
核心能力
1. 打开日历
当用户说「日历」「打开日历」或类似短语时，执行：
- 检查当前工作区是否已有
calendar.html文件 - 若无，从
assets/calendar.html复制到工作区根目录 - 用
preview_url打开该文件（使用绝对文件路径，无需 HTTP 服务器） - 日历加载后会自动从嵌入数据中导入对话日程
重要提示： 打开日历时，用 preview_url 传入文件的绝对路径即可，不要在回复中展示 file:// 开头的完整路径。只需简洁告知「日历已打开，可在侧边栏查看」。
2. 添加对话日程到日历
当用户在对话中口述日程（如「6月20日开庭」「下周三提醒交代理词」）或上传传票/通知书等文件时：
- 解析出日期、标题、时间、描述、分类等信息
- 读取工作区
calendar.html，找到<script id="chat-events-data" type="application/json">标签 - 在该 JSON 数组中追加新事件对象，格式如下：
{
"id": "chat_NNN",
"title": "事件标题",
"date": "YYYY-MM-DD",
"time": "HH:MM",
"desc": "详细描述",
"color": "#ef4444",
"source": "chat"
}
- 递增 id 序号（如已存在 chat_001、chat_002，则新建 chat_003）
- 同时更新
calendar-events.json保持一致（如有该文件） - 告知用户：「已写入日历，点击 📥 导入 即可同步」
颜色分类映射：
| 类型 | 颜色 | 色值 |
|------|------|------|
| 开庭/诉讼/仲裁 | 红色 | #ef4444 |
| 会议/会面/出差 | 蓝色 | #3b82f6 |
| 截止日期/到期 | 橙色 | #f59e0b |
| 个人/生活 | 绿色 | #10b981 |
| 研究/写作/学习 | 紫色 | #8b5cf6 |
| 其他/默认 | 灰色 | #6b7280 |
2.1 在对话中修改日程
当用户在对话中要求修改某个日程（如「把6月20日的开庭改成6月21日」「修改chat_002的时间为10:00」「把开庭颜色改成蓝色」）时：
- 读取工作区
calendar.html，找到<script id="chat-events-data" type="application/json">标签 - 解析 JSON 数组，找到目标事件（按 id 或按 title + date 匹配）
- 修改对应字段（title、date、time、desc、color 等）
- 写回 HTML 文件
- 告知用户：「已更新日程，点击 📥 导入 即可同步到日历」
- 如果目标事件来自对话添加（source=chat）但已被用户导入到 localStorage，需提醒用户：「该日程可能已在日历中手动修改过，导入时将覆盖本地修改」
匹配规则：
- 优先按 id（如 chat_002）精确匹配
- 若无 id，按 title + date 模糊匹配（取第一个匹配项）
- 若匹配不到，告知用户未找到对应日程
2.2 在对话中删除日程
当用户在对话中要求删除某个日程（如「删除chat_001」「把下周三的会议删掉」「取消开庭日程」）时：
- 读取工作区
calendar.html，找到<script id="chat-events-data" type="application/json">标签 - 解析 JSON 数组，找到目标事件（匹配规则同 2.1）
- 从数组中移除该事件
- 写回 HTML 文件
- 告知用户：「已从对话日程中删除，日历中的本地日程需手动删除（点击日程 → 编辑 → 删除日程）」
重要提示： 对话删除仅移除 chat-events-data 中的条目，不会自动删除 localStorage 中已导入的本地日程。用户需要在日历 UI 中手动删除对应的本地条目。
3. 查询日历中的日程
当用户询问「XX哪天开庭」「XX事件什么时候」「今天有什么安排」「这周有什么日程」等问题时：
- 读取
calendar.html中<script id="chat-events-data">的 JSON 数组 - 结合对话上下文中已告知的信息
- 用自然语言回答用户，包含日期、时间、地点等关键信息
4. 日历功能概览
日历 HTML 应用本身提供以下交互功能（用户手动操作）：
方式一：在日历 UI 中直接编辑
- 新建日程：点击日历上的日期 → 点击「＋ 新建」按钮 → 填写标题、日期、时间、分类颜色、备注 → 点击「保存」。新建的日程自动保存到 localStorage。
- 编辑日程：在左侧事件列表中点击对应条目 → 弹出编辑窗口 → 修改任意字段（标题、日期、时间、颜色、备注）→ 点击「保存」。修改立即生效并持久化。
- 删除日程：点击日程打开编辑弹窗 → 点击左下角红色「删除日程」按钮 → 弹出确认对话框显示日程标题 → 点击「确定删除」按钮确认。删除后：
- 从 localStorage 中移除该日程
- 同步更新
chat_imported记录，防止重新导入时复活 - 弹窗自动关闭，日历和侧边栏即时刷新
- 快捷操作：点击日历日期即可筛选当天所有日程，在左侧面板中一目了然
删除功能注意事项：
- 删除操作不可恢复，确认对话框会显示日程标题以供确认
- 确认对话框是自定义 UI 组件（非浏览器原生 confirm()），兼容嵌入式 WebView 环境
- 支持键盘操作：Enter 确认删除，Esc 取消
- 点击遮罩层也可关闭确认对话框
- 删除已导入的对话日程后，需重新点击 📥 导入才能再次导入（因为 chat_imported 记录已清除）
- 如果删除的是对话日程（source=chat），仅删除 localStorage 中的副本，chat-events-data 中的原始数据不变
- 实现细节： deleteEvent() 中使用局部变量 idToDelete 立即捕获 editingId 的值，避免因 doCloseModal() 异步重置 editingId 导致闭包引用失效（删除无效）
方式二：在 WorkBuddy 对话中发指令
- 添加日程：口述日程信息（如「6月20日开庭」），AI 自动解析并写入
chat-events-data。用户在日历中点击 📥 导入即可同步。 - 修改日程：发出修改指令（如「把 chat_002 的时间改成 10:00」），AI 更新
chat-events-data中对应条目。用户点击 📥 导入后覆盖本地日程。 - 删除日程：发出删除指令（如「删除 chat_001」），AI 从
chat-events-data中移除。注意：这仅删除对话数据源中的条目，已导入到 localStorage 的本地日程需用户在日历 UI 中手动删除。 - 查询日程：询问「今天有什么安排」「这周有什么日程」，AI 从
chat-events-data和对话上下文中检索并回答。
对话操作与日历 UI 的协作流程：
1. 用户在对话中口述 → AI 写入 chat-events-data → 用户在日历中点击 📥 导入 → 数据进入 localStorage
2. 用户在日历 UI 中手动操作 → 直接读写 localStorage → 不修改 chat-events-data
3. 两个数据源相互独立，通过 📥 导入按钮桥接
其他功能
- 月历视图：左侧大日历，当前日期蓝色高亮
- 颜色分类：六种颜色标签，顶部可点击筛选
- 月导航：◀ ▶ 箭头切换，「今天」按钮回当月
- 快捷键：
Ctrl/Cmd+N新建、← →翻月、Esc关闭弹窗 - 自定义对话框：确认删除和提示信息均使用自定义 UI 组件（非浏览器原生
alert/confirm），确保在 WorkBuddy 嵌入式 WebView 中可靠运行
技术实现说明
- 事件绑定：所有按钮均通过
addEventListener绑定事件（不使用内联onclick属性），避免 ID 注入问题和事件冒泡异常 - 确认对话框：使用自定义 HTML 弹窗替代原生
confirm()，支持键盘快捷键（Enter 确认 / Esc 取消）和遮罩层点击关闭 - 事件委托：侧边栏日程列表使用事件委托（
data-event-id属性 + 父容器 click 监听），安全可靠
数据持久化说明
- 用户在日历 UI 中手动添加的事件：存于浏览器
localStorage（workbuddy_calendar_events） - AI 从对话中提取的事件：嵌入在 HTML 的
<script id="chat-events-data">中 - 双源合并：日历加载时自动从嵌入数据导入，按 id 去重，合并到 localStorage
- 已导入 id 记录在
localStorage的workbuddy_calendar_chat_imported中，避免重复导入
资源
assets/calendar.html
完整的日历 HTML 应用，包含月历视图、事件管理、颜色分类、导入机制。部署到工作区后可通过 WorkBuddy 侧边栏预览标签页打开，无需任何服务器或外部依赖。
