DSH Web 界面边缘的跑马灯氛围光环:随会话状态自动变色(运行中绿色流动、完成粉色、有待处理黄色警告),设置面板可调颜色、光圈宽度、转速与闪动频率。
安装
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:lihang-lh/dsh-moon-light
装任何插件都等于在你的机器上跑第三方代码,权限和你本人一样大——能读你的文件、用你的凭据、访问网络,工具审批管不到它。GitHub 来源的插件还会在安装时执行构建脚本——pnpm 默认拦截,所以安装可能停在 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED 或 ERR_PNPM_IGNORED_BUILDS;dsh 会打印出需要添加的确切键名,把它加进该 profile 的 pnpm-workspace.yaml 的 allowBuilds 下,重跑一次即可装上。放行构建本身就是一次信任判断:请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README
给 DSH Web 界面加一圈氛围光:根据当前会话的运行状态,在屏幕最外层自动显示 不同颜色、不同转速/闪动节奏的光。默认柔光晕(散光)——无边框、由屏幕边缘 平滑向内淡出的多层内散射光,并带轻微有机不规则;跑马灯(旋转光带)与线性渐变 仍作为可选样式。
| 会话状态 | 氛围灯 | 判定依据(宿主实时下发的会话摘要) |
|---|---|---|
| 运行中(agent 正在工作) | 🟢 绿色光带流动 + 闪动 | summary.running === true |
| 完成 / 空闲(无待处理) | 🩷 粉色光带(稳态) | 非 running、非 blank、无待处理 |
| 有待处理(审批 / 计划确认 / 提问) | 🟡 黄色光带(慢速脉冲,优先级最高) | summary.pendingInteraction 非空 |
| 无会话 / 空白会话 / 已禁用 | 关闭 | 无当前会话或 blank === true |
光带为纯装饰(pointer-events: none),不遮挡任何操作;支持
prefers-reduced-motion 时自动停止动画。
设置
插件会在设置面板里注册一个「氛围灯」页面(设置 -> 氛围灯),全部参数可视化调节, 修改立即生效并持久化到 localStorage:
- 启用氛围灯:开关
- 光圈宽度:1–40 px 滑块
- 不透明度:5%–100% 滑块
- 效果样式:
柔光晕(散光,默认)/跑马灯(旋转光带)/线性渐变(静止) - 光带样式(仅跑马灯):
分段跑马灯(经典)/平滑渐变(柔和) - 跑马灯转速:0–60 秒/圈(0 = 静止)
- 扩散范围(仅柔光晕):0–200 px,控制光晕由屏幕边缘向内散射的程度
- 不规则强度(仅柔光晕):0–10,控制光晕边缘的轻微有机波动(0 = 关闭)
- 亮度闪动:0–10 秒/周期(0 = 不闪动,可每个状态单独设置)
- 状态渐变色:运行中 / 完成 / 待处理 三组颜色各 3 个取色器
- 恢复默认:一键还原
安装
从 GitHub 仓库安装:
dsh plugin --profile web add "github:lihang-lh/dsh-moon-light"
装完重启 dsh web——客户端插件名录在启动时组合,重启后刷新页面即可看到
效果(设置面板里改的配置保存在 localStorage,重启后自动沿用)。
开发期改代码建议用本地 link: 安装(符号链接,改完重启即生效,无需重装):
dsh plugin --profile web add "link:/你的本地路径/dsh-moon-light"
卸载:
dsh plugin --profile web remove dsh-moon-light
配置优先级
localStorage(设置面板里改的)> 插件行 config(cordis.patch.yml / profile
补丁)> 内置默认。第三方插件的命名空间不在宿主 settings wire 的暴露白名单内,
所以用户配置保存在 localStorage(与 dsh-skin 同一模式)。
通过 profile 补丁覆盖部署级默认(不修改插件本体):
# ~/.dsh/profiles/web/cordis.patch.yml
- id: mood-light
config:
width: 12 # 光圈厚度(px)
rotate: 24 # 跑马灯转速(秒/圈)
gradientType: 'glow' # 默认柔光晕(散光);可选 'conic' | 'linear' | 'glow'
glowSpread: 40 # 扩散范围(px,仅 glow)
glowWobble: 2.5 # 不规则强度(0..10,仅 glow)
states:
running:
colors: ['#22c55e', '#4ade80', '#bbf7d0']
flash: 0.8
原理(供二次开发)
- 插件是手写 bundle,遵循 DSH client-modules 协议:
window.__ModuleLoader__.load({ id, factory }),只依赖平台种子模块react,通过slots服务协作,无需构建步骤。 - 渲染位置:
shell.overlay(frame 级浮层,点击穿透)+settings.section(设置面板页面),注册 id 均为mood-light。 - 状态分析:
shell.overlay标准 props 的useSessions快照选择器读出当前 会话SessionSummary,按running/blank/pendingInteraction映射到 running / success / warning 三种模式(见client.js的resolveMode)。 - 跑马灯实现:
position: fixed; inset: 0层 +padding+mask-composite: exclude抠出外圈光环;内层一个inset: -50%的conic-gradient旋转盘被 mask 裁成光带,rotate控制转速(经典分段 跑马灯用硬边界色标,平滑模式用连续渐变),flash控制整体明暗呼吸。 - 柔光晕(glow)实现:
position: fixed; inset: 0的满屏层(无背景、不用 mask 抠边),由 JS 用状态主色/次色 +width+glowSpread拼出一串 多层 blur>0 的嵌套 inset box-shadow(无零模糊实心核心层,spread 由width递增至width+glowSpread、alpha 递减——光由屏幕边缘平滑向内淡出、 无清晰棱线)注入--ml-glow-shadow;再叠加一个隐藏<svg>里的feTurbulence+feDisplacementMap滤镜,glowWobble作为位移 scale 让光晕边缘呈轻微有机不规则(glowWobble = 0时不应用滤镜)。 - 默认效果样式为柔光晕(散光):开箱即软、无边框;
conic/linear仍可在 设置页或行配置里选回。
开发
node --check client.js # bundle 语法检查
node scripts/test.cjs # 状态映射 / 配置合并 / 持久化 / 柔光晕渲染测试
不安装插件也能预览效果:直接用浏览器打开 docs/preview.html(独立页面,
含跑马灯光环与全部参数调节)。
文件
| 文件 | 作用 |
|---|---|
index.js |
服务端入口(空 apply,满足 loader 要求) |
client.js |
浏览器端跑马灯氛围灯 + 设置页(核心实现) |
cordis.patch.yml |
插件行 + 部署级默认配置 |
docs/preview.html |
独立预览页(无需安装即可预览效果) |
scripts/test.cjs |
逻辑测试(状态映射 / 配置合并 / 持久化) |
.github/workflows/ci.yml |
语法检查 + 逻辑测试 CI |
README.en.md / CHANGELOG.md |
英文文档 / 变更日志 |
package.json |
dsh.bundle / dsh.client 声明 |
链接
同类插件
zhu1090093659/dsh-web#packages/dsh-task-board★ 8296
侧边栏多列任务看板:卡片交给真实 DSH 智能体会话执行,支持 cron 定时(Host 侧到点执行,关浏览器也生效)。
zhu1090093659/dsh-web#packages/dsh-web-all★ 8296
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。
omdsh-dev/DSH-better-sidebar★ 3968
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。
ccch1mneyyy/dsh-TUI★ 3948
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。
MeteorNOX/DeepSeek-Balance-Whale-Widget★ 3877
右下角常驻的小鲸鱼挂件:余额、今日已用与每轮对话消耗(含峰谷价),余额预警与今日预算的泡泡内容都可编辑;泡泡点击序列模块化自定义,支持并列加权 A/B、随机台词与随机图片;内置 30+ 厂商模板(OpenAI / OpenRouter / Kimi / 硅基流动 / 方舟 / 智谱 / MiniMax 等),按模型查余额与订阅额度;另有任务结束音效、导入音频、自定义角色与资源管理。数据全在本机,无遥测。
Devin-AXIS/deepseek-design#deepseek-idesign★ 1413
可视化设计工作室,支持网站、App 原型、海报、信息卡、报告和杂志的模板创建、元素编辑、选区级 AI 草稿衔接与导出。
社区评论
评论公开保存在 GitHub Discussions。加载评论会连接 GitHub 和 Giscus;发表内容需要 GitHub 账号。