液态黑色玻璃日程 · Liquid Black Glass Schedule
一个悬浮在 DSH 窗口里的日程表插件:苹果「液态玻璃」(Liquid Glass)黑色玻璃质感,可以缩小成胶囊或小球,也可以拖拽缩放;每条日程分为工作(紫色)或个人(蓝色),并能标注时间范围,时间轴按类型分两条泳道显示。
A floating schedule plugin for DSH with an Apple Liquid Glass material in its black variant, three panel sizes, free resizing, work/personal categories, and per-entry time-range annotations.
- 纯前端实现、零依赖、无构建步骤:
client.js直接由 DSH 的 Client module loader 加载。 - 数据只存在本机浏览器存储里,不上传任何内容;唯一的网络请求是可选的大陆节假日数据同步(失败即静默回退到内置数据)。
- 安装后插件行 id 为
glass-notepad,包名为dsh-plugin-glass-notepad。
数据迁移说明:显示名称曾为「记事本」,包名与行 id 始终未变,因此旧数据和已安装实例都能继续使用;旧数据会自动归为「工作」类型。
功能 / Features
- 三种大小 / Three sizes:展开面板 → 收起胶囊 → 缩成小球。三者都能拖动;展开时会朝页面空余的一侧生长(见下)。
- 缩小浮标显示最近未完成的日程 / The shrunk widget shows what is next:收起胶囊上会显示最近的未完成日程——第一行是它的时间(同一天显示
14:00–15:30,跨天则补上日期如10-07 09:00–10:00,只有开始时间就只显示开始时刻),前面带该日程的类型色圆点;第二行是日程内容(没填内容则显示「(未填写内容)」)。选取规则:正在进行中的优先,否则取开始时间最近的一条;全部完成时显示「没有未完成的日程」,并回到插件标题。小球上会亮一个类型色小圆点,悬停提示里也会写明「最近未完成 · 时间 + 内容」。读秒跟随系统时钟(每 30 秒重算),一条日程结束后会自动指向下一条。 - 工作 / 个人分类 / Work & personal:每条日程显示一个类型按钮(紫色圆点=工作,蓝色圆点=个人),点击即展开成两个可选项,选完自动收起,也可点右侧小箭头收起。分类控件是纯平的:没有半透明填充、没有描边、没有模糊(只有圆点 + 文字;选中时文字变成本类型颜色、圆点变实心),圆形图标 12px、文字 10.5px(文字小于图标)并留 6px 间距。时间范围显示紧跟在分类右边,空间不足时会自动省略号截断,绝不会挤掉或盖住右侧的「改时间 / 删除」两个图标;展开分类选项时时间显示暂时让位。卡片左侧色条、时间徽标圆点、时间轴色条全部使用该类型颜色;旧数据默认归为「工作」。
- 四周缩放 / Resize from every side:面板四条边 + 四个角共 8 个方向都能拖动改尺寸(鼠标移到边缘时光标自动变成 ↔ ↕ ⤡ ⤢,并浮现一条高亮提示)。规则很直白:拖哪条边就只有那条边动,对面那条边保持不动;放大到屏幕边界就停住,不会把面板推着跑。尺寸范围 268–620 × 220–760,或点「切换尺寸」在 中 / 大 两档之间循环(小档已按需求取消),尺寸与位置都会被记住。
- 拖动定位 / Drag to move:按住标题栏、胶囊或小球都能拖动;位置保存在本机浏览器存储里,窗口缩放时自动收回可视区域。
- 朝空余方向展开 / Grows into free space:靠近右半屏就向左长、靠近下半屏就向上长,并把宽高限制在当前可用空间内,保证面板不跑到屏幕外,也不会把小球甩到面板另一头(收起时回到原来的那个角)。
- 时间范围标注 / Time-range annotation:每条日程都能设置开始与结束时间(
datetime-local),并显示时长徽标与状态(进行中 / 待开始 / 已结束 / 时刻 / 未标注)。徽标只显示时刻(如13:00 → 14:00 · 1 小时),因为列表与时间轴本来就只呈现选中的那一天;跨午夜的区间会标成23:00 → 次日 01:00,不会退回去用日期表达。倒序的区间(结束早于开始)会自动排好序。快捷按钮:现在、+1 小时、今天 09:00–18:00、清除时间。 - 双泳道时间轴 / Two-lane timeline:顶部工具条上的时钟图标一键开关。24 小时条里工作在上(中间偏上)、个人在下(中间偏下),两条泳道各 22px 高、完全等高,之间固定留 6px 间隙,互不重叠;工作条为紫色、个人条为蓝色,且是纯平色块(没有渐变、内高光或玻璃质感,只有悬停轻微提亮)。个人泳道底部距 0/6/12/18/24 小时刻度还有 4px,不会压到刻度。可用 ‹ › 或日期选择器切换日期(列表会同步只显示这一天),点击色条会滚动并高亮对应日程;「现在」有一条高亮游标;左上角有类型图例。
- 液态黑色玻璃 / Liquid black glass:
backdrop-filter: blur(30px) saturate(180%) brightness(.92)(会把背景压暗)、深色半透明分层材质、白色镜面渐变描边、顶部高光与多层黑色投影。材质固定为黑色玻璃,浅色/深色主题下都是同一种观感,因此使用插件自带的调色板(#0a0b0e底 + 白色 7–18% 的填充/描边)而不是主题令牌;color-scheme: dark让原生日期选择器也保持深色。尊重prefers-reduced-motion。 - 列表只显示日期选择器当天 / The list shows only the date picker's day:列表始终只有时间轴日期选择器上那一天的日程,按开始时间从早到晚排列 —— 没有「全部日期」模式,也不会混入其他日期。在时间轴上换一天(‹ › 或日期选择器),列表立刻整体换成那一天。一条日程属于哪一天,取决于它自己设定的开始时间:跨午夜的日程(如 10-03 23:00 → 10-04 01:00)只出现在 10-03,不会在第二天重复。
- 未标注时间的日程 / Untimed entries:没有开始时间的日程不属于任何日期,因此只在「今天」这一页的最后陪跑(编组「未标注时间」),切到别的日期就不会出现;想随时看到它们把日期选择器拨回今天即可。
- 已完成的日程沉到当天末尾并变暗 / Finished entries sink and dim:结束时间已经过去的日程(只填了开始时间的,过了开始时间也算)会整张卡片变暗(透明度 50% + 降饱和,鼠标悬停或键盘聚焦时恢复清晰),并在它自己的日期分组内沉到末尾,归入该日期下的「已完成」小节(组内仍按开始时间升序排前面未完成的)。
- 已完成排序可切换 / Finished sort toggle:工具条上的上下箭头图标一键切换已完成日程的排序 —— 从早到晚(默认,按完成时间=结束时间,没填结束时间就用开始时间)或从晚到早;只影响已完成部分,未完成的顺序不变。判定与排序完全跟随系统时钟(每 30 秒重算一次),时间一到会自动变暗下沉,无需手动归档。
- 时间轴常驻不滚动 / Toolbar and timeline stay pinned:工具条与时间轴位于滚动区之外(
.agn-fixed),只有下面的日程列表会滚动 —— 列表再长,时间轴和日期选择始终可见。想临时收起时间轴可点工具条上的时钟图标。 - 图标按钮 + 智能悬浮提示 / Icon buttons with smart tooltips:新建日程是纯「+」图标、时间轴是纯时钟图标;插件里每一个带说明的控件(图标按钮、类型选项、时间徽标、时间轴色条、8 个缩放边角,鼠标或键盘聚焦都算)都会弹出一条玻璃提示,写明该处功能。提示由脚本按锚点实时定位,永远朝界面内部展开:位于上半部分的控件把提示显示在下方、下半部分的显示在上方;横向也朝内侧生长(左侧控件向右展开、右侧控件向左展开、居中的保持居中)。因此提示不会被面板圆角裁掉、也不会跑到窗口外(超长文案才做视口夹取兜底)。滚动、缩放、拖动前会自动收起。
- 顶部显示日期 · 星期 · 中国大陆节假日 / Date, weekday and mainland holidays in the header:面板最上方那一行(和「切换尺寸」同一个标题行)在标题下方显示
今天 · 10月7日 星期三;如果这一天是法定节假日或调休上班日,同一行的操作区还会出现一枚彩色小标签:红色 = 放假(如「国庆节」/「春节」),琥珀色 = 调休上班(如「劳动节」)。周六周日不再单独标红,星期几本身就说明了。悬停标签有数据来源提示。 - 农历与二十四节气 / Lunar date and the 24 solar terms:顶部标题行第三条显示所选日期的农历(如
八月廿七,闰月带「闰」前缀,如闰六月初一)与节气(当天正好是节气就直接显示,如八月廿八 · 寒露);悬停该行可以看到下一个节气及其日期。数据覆盖 1900–2100 年:农历用内置位压缩月表换算,节气用逐年精确日期表(不是近似公式 —— 经典闭式公式在 1900–2100 里有 184 天会算差一天)。 - 中英双语 / Bilingual:界面文案跟随 DSH 的界面语言,插件卡片元数据在
locale/en.json与locale/zh.json。语言解析是惰性 + 重试的:本插件属于immediately客户端半边,可能在 DSH 的 locale 服务注册之前就被激活,因此不再在apply()里一次性取服务(那正是"重开后偶发英文"的原因),而是每次读取都重新解析、服务未就绪时每 250ms 重试(最多约 10 秒)并按浏览器语言兜底,服务出现后立即订阅,之后切换语言照常生效。
数据 / Data
日程、类型、面板尺寸、位置、时间轴日期都保存在本机浏览器存储的 dsh-plugin-glass-notepad/state.v1 键下,节假日同步缓存存在 dsh-plugin-glass-notepad/holidays.v1。
节假日数据:插件内置了 2024 / 2025 / 2026 年的中国大陆法定节假日与调休安排(逐条照抄国务院办公厅通知,已与社区镜像 holiday-cn 逐条比对一致,共 108 条)。除此之外还会尽力联网同步:启动时以及切换年份时,从 cdn.jsdelivr.net 拉取对应年份的 JSON(6 秒超时)并缓存 30 天;拉取失败就静默沿用内置数据,不影响任何功能。除这一项节假日同步外,插件不做其它网络请求、不写会话日志、不注册工具,Host 半边是空的 apply()。
农历与节气数据:内置 1900–2100 年的位压缩农历月表(201 项)与逐年精确节气表(4824 个数字,base36)。生成与校验方式:以 lunar-javascript(MIT)的天文实现生成,再与 solarlunar(ISC)以及经典公开农历表交叉比对 —— 农历换算与参考实现在 1950–2100 的每一天(73414 天)完全一致;农历月表有 199/201 年与经典表一致(1933、2097 两年两个参考实现本身就不一致,此处采用天文实现的结果);节气表在 2020–2035 的 384 个节气上与第二个库零分歧。这两个库只用于生成与校验,插件运行时不依赖它们。
安装 / Install
三种方式,任选其一(DSH 的 plugin_manager 工具或「设置 → 插件」安装界面都支持):
本地目录:把本仓库放到磁盘上,然后
plugin_manager install_bundle target = <本目录的绝对路径>打包成 tgz(便于分发):
npm pack --ignore-scripts把生成的
dsh-plugin-glass-notepad-*.tgz交给 DSH 的插件安装界面安装。Git 仓库地址:在插件安装界面填入本仓库地址(
owner/repo或带#tag的固定版本)。
安装后建议刷新一次页面;插件会出现在浮层右下角(首次为展开面板,可拖动/缩放)。
要求 / Requirements
- DSH Desktop(Web 客户端半边),Client module loader 可用。
- 浏览器需支持
backdrop-filter(Chromium 系均可);不支持时自动退回不透明深色底。 - 无第三方运行时依赖,无需构建。
验证 / Verification
- 仓库自带一个最小 CI(
.github/workflows/ci.yml):校验client.js与index.js的语法、校验三个 JSON 清单。 - 开发时另有一套无浏览器校验脚本(用 React/DOM 桩把真实
client.js加载并递归渲染整棵组件树,可捕获运行时崩溃;另有节假日数据逐条比对官方通知、泳道几何、八方向缩放边界、悬停提示定位等断言)。这些脚本不属于插件包,未随仓库分发。
许可 / License
代码以 MIT 授权。
节假日数据:内置的 2024–2026 年中国大陆法定节假日与调休安排来自国务院办公厅通知,经社区项目 NateScarlet/holiday-cn 汇总校对,仅作日期标注用途;联网同步同样读取该项目发布的 JSON。
图标 icon.svg 为本项目原创绘制。
No comments yet. Be the first to write one.