前言¶
DeepSeek Harness(DSH)的 Web GUI 侧边栏底部通常只有设置等固定入口。长时间在 Harness 里写提示、看会话时,若要看当前日期和时间,往往要切到系统托盘或别的窗口。社区插件 dsh-plugin-calendar-clock 在侧边栏底部、设置按钮旁增加一个时钟入口,点开即可在同一界面内看到数字钟、模拟表盘和月历,无需离开 Harness。
下面介绍该插件的定位、能力、安装方式与日常使用,事实均来自其 GitHub 仓库 README 与清单文件。
这是什么¶
dsh-plugin-calendar-clock 是面向 DeepSeek Harness Web GUI 的客户端插件,由维护者 XZT1118 发布,npm 包名为 @dsh-external/dsh-calendar-clock(版本 1.0.0,许可证 MIT)。
它在侧边栏底部、Settings 旁注册一个时钟按钮;点击后弹出卡片,展示每秒刷新的数字时钟(HH:MM:SS)、带时分秒针的模拟表盘,以及以周一为起点的 6×7 月历网格,并高亮「今天」。宿主侧 lib/index.js deliberately 为空,时间展示完全在浏览器端完成。
插件在 SkillHub 目录的分类为「客户端」;仓库说明中强调无运行时依赖(浏览器端仅 require('react'),来自客户端冻结的平台模块表)。
核心功能¶
时钟与表盘¶
- 数字钟:每秒重绘一次,对齐秒边界,避免漂移。
- 模拟表盘:时针、分针、秒针与秒级时间一致;遵循
prefers-reduced-motion。 - 计时策略:卡片打开时才运行自校正
setTimeout链,在1000 - (Date.now() % 1000)处重新触发,使 tick 落在整秒上。
月历¶
- 稳定的 6×7 网格,周一为第一列。
- 当天用
aria-current="date"高亮。 - 提供上一月(
‹)、回到今天(•)、下一月(›)控件。 - 日期与 12/24 小时制等展示依赖浏览器
Intl.DateTimeFormat与区域设置,插件内无单独切换开关。
侧边栏与无障碍¶
- 挂载槽位为
sidebar.footer.action,条目id: 'calendar-clock',order: 20,与官方条目并列追加,不替换内置项。 - 槽位传入 prop
wide:在 56px 窄轨上为false时,按钮退化为仅图标,仍保留可访问名称;展开侧边栏后可在图标旁看到当前时间。
国际化与容错¶
- 在
plugin.calendar-clock命名空间注册中英文词典;应用语言切换后,卡片文案立即重绘(通过useSyncExternalStore订阅locale)。 - 座位组件外包 React error boundary;渲染失败时降级为 plain 时间字符串,避免拖垮整条侧边栏。
卡片定位¶
- 卡片用
position: fixed,根据触发按钮的 bounding box 锚在按钮上方,脱离侧边栏滚动与裁剪。 - 窗口 resize 与祖先 scroll 时会重新测量,侧边栏拖宽时仍贴在按钮附近。
安装与启用¶
命令行(web profile)¶
安装命令须使用 README 原文:
dsh plugin --profile web add 'github:XZT1118/dsh-plugin-calendar-clock'
GUI¶
在 Settings → Plugins 中填写相同的仓库 spec:github:XZT1118/dsh-plugin-calendar-clock。
注意:首次安装新的 profile bundle 后需要重启,才会进入 boot composition;之后对该插件 lib/client.js 的修改支持热重载。
手动编辑 profile¶
也可在 $DSH_HOME/profiles/<profile>/package.json 中加入 bundle 与依赖,再在 profile 目录执行 pnpm install:
{
"dsh": { "profile": { "bundles": [
// ... existing bundles, official ones first ...
"@dsh-external/dsh-calendar-clock"
] } },
"dependencies": {
"@dsh-external/dsh-calendar-clock": "github:XZT1118/dsh-plugin-calendar-clock"
}
}
bundle 列表顺序即 patch 层顺序;官方 bundle 应排在第三方之前。
典型用法¶
- 在侧边栏底部、Settings 旁找到时钟按钮;窄轨下为纯图标,展开侧边栏可见图标旁当前时间。
- 点击按钮(或聚焦后按 Enter)打开卡片。
- 用
‹/•/›切换月份或回到今天。 - 按 Esc、点击卡片外区域,或再次点击按钮,关闭卡片。
开发者在无 GUI 自动化的情况下,可用模块级检查确认 Loader 行含 include:calendar-clock 且 fiberPhase: active,以及 sidebar.footer.action 槽位存在 id: "calendar-clock" 的 occupant。
适用场景与注意¶
适合谁:经常在 DSH Web GUI 中工作、希望在不离开界面的前提下查看日期与时间、并偶尔翻月历的开发者或使用者。
权限与安全:插件随当前 DSH 进程在浏览器端运行,不额外声明服务端能力;安装前仍应阅读 GitHub 仓库 源码与 MIT 许可证,确认与自身环境一致。DSH 生态强调「一切皆插件」;SkillHub 目录页 为社区站点,与 DeepSeek / 幻方无官方从属关系。
classic-script 约束:lib/client.js 会作为普通 <script> 拼接进 combo 执行,不能使用顶层 import/export,否则可能触发 Uncaught SyntaxError: Unexpected token 'export' 并导致 整个 web boot 失败。若安装后无法启动,可查看 %APPDATA%\@deepseek-ai\dsh-desktop\logs\crash-*-web-boot.log,并用仓库提供的 node tools/rollback.mjs 从 profile 中移除 bundle(可选 --profile <dir>),再在 profile 目录 pnpm install 后重启。
环境:package.json 要求 Node >= 22(主要用于仓库内检查与测试,非 Harness 运行时硬性依赖的完整说明以 README 为准)。
结尾¶
dsh-plugin-calendar-clock 把数字钟、模拟表盘和月历收进侧边栏底部一处入口,并兼顾窄轨图标模式、双语与错误隔离,适合作为 Web GUI 上的轻量时间工具。
- 目录页:https://www.skillhub.cn/plugins/XZT1118/dsh-plugin-calendar-clock
- GitHub:https://github.com/XZT1118/dsh-plugin-calendar-clock