Workbuddy Calendar

WorkBuddy 侧边栏日历

Overview

本技能提供一个可视化日历应用，可在 WorkBuddy 侧边栏「预览」标签页中运行。支持月历视图、事件的增删改查、颜色分类标签，以及从对话中自动同步日程事件。数据通过 localStorage 持久化，纯本地运行，无需网络。

核心能力

1. 打开日历

当用户说「日历」「打开日历」或类似短语时，执行：

1. 检查当前工作区是否已有 calendar.html 文件
2. 若无，从 assets/calendar.html 复制到工作区根目录
3. 用 preview_url 打开该文件（使用绝对文件路径，无需 HTTP 服务器）
4. 日历加载后会自动从嵌入数据中导入对话日程

重要提示： 打开日历时，用 preview_url 传入文件的绝对路径即可，不要在回复中展示 file:// 开头的完整路径。只需简洁告知「日历已打开，可在侧边栏查看」。

2. 添加对话日程到日历

当用户在对话中口述日程（如「6月20日开庭」「下周三提醒交代理词」）或上传传票/通知书等文件时：

1. 解析出日期、标题、时间、描述、分类等信息
2. 读取工作区 calendar.html，找到 <script id="chat-events-data" type="application/json"> 标签
3. 在该 JSON 数组中追加新事件对象，格式如下：

{
  "id": "chat_NNN",
  "title": "事件标题",
  "date": "YYYY-MM-DD",
  "time": "HH:MM",
  "desc": "详细描述",
  "color": "#ef4444",
  "source": "chat"
}

4. 递增 id 序号（如已存在 chat_001、chat_002，则新建 chat_003）
5. 同时更新 calendar-events.json 保持一致（如有该文件）
6. 告知用户：「已写入日历，点击 📥 导入 即可同步」

颜色分类映射：

2.1 在对话中修改日程

当用户在对话中要求修改某个日程（如「把6月20日的开庭改成6月21日」「修改chat_002的时间为10:00」「把开庭颜色改成蓝色」）时：

1. 读取工作区 calendar.html，找到 <script id="chat-events-data" type="application/json"> 标签
2. 解析 JSON 数组，找到目标事件（按 id 或按 title + date 匹配）
3. 修改对应字段（title、date、time、desc、color 等）
4. 写回 HTML 文件
5. 告知用户：「已更新日程，点击 📥 导入 即可同步到日历」
6. 如果目标事件来自对话添加（source=chat）但已被用户导入到 localStorage，需提醒用户：「该日程可能已在日历中手动修改过，导入时将覆盖本地修改」

匹配规则：

• 优先按 id（如 chat_002）精确匹配
• 若无 id，按 title + date 模糊匹配（取第一个匹配项）
• 若匹配不到，告知用户未找到对应日程

2.2 在对话中删除日程

当用户在对话中要求删除某个日程（如「删除chat_001」「把下周三的会议删掉」「取消开庭日程」）时：

1. 读取工作区 calendar.html，找到 <script id="chat-events-data" type="application/json"> 标签
2. 解析 JSON 数组，找到目标事件（匹配规则同 2.1）
3. 从数组中移除该事件
4. 写回 HTML 文件
5. 告知用户：「已从对话日程中删除，日历中的本地日程需手动删除（点击日程 → 编辑 → 删除日程）」

重要提示： 对话删除仅移除 chat-events-data 中的条目，不会自动删除 localStorage 中已导入的本地日程。用户需要在日历 UI 中手动删除对应的本地条目。

3. 查询日历中的日程

当用户询问「XX哪天开庭」「XX事件什么时候」「今天有什么安排」「这周有什么日程」等问题时：

1. 读取 calendar.html 中 <script id="chat-events-data"> 的 JSON 数组
2. 结合对话上下文中已告知的信息
3. 用自然语言回答用户，包含日期、时间、地点等关键信息

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 侧边栏预览标签页打开，无需任何服务器或外部依赖。