dsh-rgb-input-glow

Readme

# dsh-rgb-input-glow

> DeepSeek Harness Web 插件：「光污染」—— RGB 流光皮肤

[![npm version](https://img.shields.io/npm/v/dsh-rgb-input-glow)](https://www.npmjs.com/package/dsh-rgb-input-glow)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

「光污染」是一款独立的 RGB 光效皮肤，为 [DeepSeek Harness](https://github.com/deepseek-ai) Web 界面叠加沉浸式辉光。它是 **《弹丸论破：天魔命曲》皮肤（dsh-angelsanddemon-fatesumphony-skin）的伴生光效层** —— 本身**不修改任何原皮肤**，未加载原皮时同样生效。

## 功能一览

输入框（`[data-composer-card]`）四周柔和发光，纯 CSS `::after` + 多层 `box-shadow`，紧贴边框向外晕开，**无灯管/描边结构**：

- **常态（待机）**：蓝色 · 偏暗呼吸（0.28↔0.5 opacity，4s）
- **点击 / 聚焦**：蓝色 · 亮呼吸 + 0.7s 淡入点亮（无脉冲）
- **智能体运行中**：RGB 色环流转（box-shadow 三层柔光整圈换色）；呼吸只变 opacity，不影响文字
- **当前会话自然完成**：绿色闪光 + 绿色呼吸灯提醒
  - 仅**自然完成**触发；点击「停止」主动中断**不**变绿；切换会话自动复位
  - 用停止按钮 / 回合状态行出现→消失探测，400ms 防抖避免流式渲染误判

**WebGL 真实辉光层**（叠加在 CSS 之上，CSS 仍是基础与降级兜底）：

- 全屏透明 canvas + shader：SDF 圆角矩形 + **5 层多尺度 bloom**（锐利亮核 + 大范围柔和弥散）
- 覆盖：输入框（蓝/RGB/绿随状态）、侧栏选中/运行/完成/悬停行、hero 大标题 + logo、顶部选中 tab、新会话按钮
- **统一时间 hue**：所有 RGB 元素同相位流转，永不脱色
- 坐标每帧从 DOM 同步（radius 经 WeakMap 缓存）；`devicePixelRatio` 适配；WebGL2→WebGL1 自动回退
- **侧栏悬停行辉光跟随鼠标水平位置**（shader 水平锚点衰减；**不渲染跟随鼠标的光斑**）
- **完成瞬间绿色爆发**：WebGL 层与 CSS 闪光同步，指数衰减
- `prefers-reduced-motion` 下暂停渲染 / 静止

**其他区域**：

- **会话头部标签（对话 / 轨迹）**：选中项底部可滑动指示条（rAF 驱动，easeInOut + 途中拉长拖拽感）；运行中文字 + 边缘光 + 指示条共享同一 `@property` hue 同步变 RGB 流光；完成时转绿色呼吸
- **"Deep diving..." 运行字样**：文字 RGB 渐变**从左到右**无缝循环流动；右侧**随时显示运行秒数**（格式 `12秒` / `1分05秒`）
- **左侧栏**：悬停蓝色发光；选中蓝色发光 + 呼吸；运行中会话行 RGB 色环 + 标题文字边缘 RGB 流光；已完成会话绿色呼吸 + 完成瞬间大亮闪
- **空会话（hero）大标题 + logo**：RGB 色环流转柔光，只加光晕不改文字颜色
- 新会话按钮悬停亮起蓝光

## 安装

插件挂载在 DeepSeek Harness 的 **Web profile** 上。以下任选一种来源安装。

### 方式 A：npm（推荐）

```powershell
# 进入你的 Web profile 目录
cd $env:USERPROFILE\.dsh\profiles\web
npm install dsh-rgb-input-glow
```

### 方式 B：从 GitHub 安装

```powershell
cd $env:USERPROFILE\.dsh\profiles\web
npm install git+https://github.com/zhangyuzhangyu233/dsh-rgb-input-glow.git
```

### 方式 C：本地开发（link）

```powershell
cd $env:USERPROFILE\.dsh\profiles\web
npm install link:C:/你的路径/dsh-rgb
```

## 启用

编辑 `~/.dsh/profiles/web/package.json`，把插件加入 `dsh.profile.bundles`：

```json
{
  "dependencies": {
    "dsh-rgb-input-glow": "^1.0.0"
  },
  "dsh": {
    "profile": {
      "bundles": [ "...", "dsh-rgb-input-glow" ]
    }
  }
}
```

然后重启 `dsh web`。浏览器**强制刷新**（Ctrl+F5）加载最新客户端代码 —— 客户端 bundle 按请求实时生成，改代码后刷新即可，无需重启服务。

## 卸载

```powershell
cd $env:USERPROFILE\.dsh\profiles\web
npm uninstall dsh-rgb-input-glow
```

并从 `dsh.profile.bundles` 中移除 `"dsh-rgb-input-glow"`，重启 `dsh web`。

## 兼容性

- **配合原皮**：`dsh-angelsanddemon-fatesumphony-skin` 在场时贴合其 talkingbar 直角；独立使用自动继承默认皮肤圆角
- **DeepSeek Harness Web**：`>= 20` Node；`dsh.client.platform: web`
- 尊重 `prefers-reduced-motion`

## 文件结构

```
dsh-rgb-input-glow/
├── client.js          # 全部客户端逻辑：CSS + WebGL 渲染器 + 状态探测
├── cordis.patch.yml   # dsh bundle patch
├── host.js            # 服务端占位（stub）
└── package.json
```

## 许可证

MIT