| name | workbuddy-calendar |
| description | WorkBuddy 侧边栏日历。提供月历视图、日程增删改查、分类标签(开庭/会议/截止日期/个人/研究/其他),支持从对话中提取事件并自动同步到日历。当用户提到"日历""日程""打开日历""添加日程""我的日程""calendar""安排"或询问已记录的日程信息时使用。 |
| agent_created | true |
| author | 浙江金道律师事务所龚家勇律师 |
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 的协作流程:
- 用户在对话中口述 → AI 写入
chat-events-data → 用户在日历中点击 📥 导入 → 数据进入 localStorage
- 用户在日历 UI 中手动操作 → 直接读写 localStorage → 不修改
chat-events-data
- 两个数据源相互独立,通过 📥 导入按钮桥接
其他功能
- 月历视图:左侧大日历,当前日期蓝色高亮
- 颜色分类:六种颜色标签,顶部可点击筛选
- 月导航:◀ ▶ 箭头切换,「今天」按钮回当月
- 快捷键:
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 侧边栏预览标签页打开,无需任何服务器或外部依赖。