日程事件管理日历应用
概述
这是一个偏实用的日程管理工具，重点放在事件的添加、编辑、搜索和进度查看上，同时支持导出为 Excel。它更适合做项目排期、个人待办记录，或者当成一份前端交互逻辑的参考样例。
核心功能
- 添加、编辑、删除、查看和搜索日程事件。
- 显示事件截止倒计时，方便盯进度。
- 支持跨天、跨月事件，长周期任务也能放进去。
- 可将当前日程导出为 Excel 文件。
- 提供多种主题切换，不同场景下看起来不一样。
- 数据放在浏览器本地存储里，带历史事件自动清理，尽量少占空间。
技术实现
核心技术栈是 JavaScript 和 HTML，整体是纯前端实现。
功能需求与设计规范
视觉设计
- 圆角风格，偏现代可爱。按钮带内阴影，做出一点立体光泽感。
- 页面文字和主色会根据背景图主色调自动匹配，共六种方案：蓝、橘/咖、粉、绿、黑、紫。
- 底部背景图有 10 种可选，切换主题时会一起切背景图和配色。
- 整体背景叠一层半透明毛玻璃遮罩。
页面布局
- 左上角 Icon 用来控制左侧抽屉展开和关闭，里面放基本设置。
- 中间是月视图日历，日期用小方框展示，边框 3px。鼠标移上去会出现'+'号，用来快速加事件。
- 底部有一个'事件搜索'按钮。
- 右侧抽屉默认展开，用来显示当天事件。
模块详情
左侧抽屉（基本设置）
- 标题可编辑，最多 8 个字。
- 主题切换。
- 导出当前月份事件为 Excel。
- 清空当前月份事件，需要两次确认。
- 清空所有事件，也要两次确认。
- 提供'历史事件自动清理'开关，默认开启，用来减轻存储压力。提示里也说明了，清除 Cookie 后数据会丢失。
中心区域（日历）
- 顶部展示当前月份，并支持切换。
- 每个日期格子里显示事件小圆圈，颜色对应状态，半径跟数量有关。
- 跨天事件会自动计算并展示。
- 底部提供'事件搜索'按钮。
事件搜索弹窗
- 输入框支持按名称模糊查询。
- 状态支持多选：未开始、进行中、已完成、已逾期。
- 可以按日期范围筛选。
- 搜索结果以列表显示，点击就能进入编辑。
添加/编辑事件弹窗
- 名称限制 20 字。
- 状态单选；添加时不能选已完成或已逾期，编辑时如果已经逾期，状态不能再改。
- 开始/结束时间使用 24 小时制；逾期后时间也不能再改。
- 支持填写描述。
- 显示距离截止的倒计时文本，逾期时显示红色，完成后用绿色并显示完成时间。
- 提供保存或更新按钮。
右侧抽屉（当天事件）
- 默认显示今天的事件。
- 标题显示日期，今天会带标识。
- 事件以卡片形式展示，状态标识靠右。
- 48 小时内截止的事件会带吸附标签。
- 鼠标移入时显示删除图标，删除需要两次确认。
- 排序规则是：未开始和进行中优先，按截止时间倒序；然后是已逾期；最后是已完成。
