dsh-theme-cyberpunk

Readme

# dsh-theme-cyberpunk

DeepSeek Harness（`dsh`）Web 界面的赛博朋克主题插件：RGB 流动霓虹、暗色霓虹城市背景、可自定义背景图库，以及一个右上角可拖动、可收起的 HUD（外观一键切换 + 本地音乐播放器，歌单与播放状态持久化）。

[简体中文](README.md) · [English](README.en.md) · [日本語](README.ja.md)

> 关于 DeepSeek Harness 插件系统的更多背景，见文末 [关于 DSH 插件](#关于-dsh-插件)。

---

## 环境要求

- [Node.js](https://nodejs.org/) 22+（`dsh` 本身要求）
- [pnpm](https://pnpm.io/installation)（`dsh plugin` 通过 pnpm 管理插件）
- 已安装并初始化过 DeepSeek Harness（`dsh web` 可运行）

验证：

```sh
node -v     # v22.x
pnpm -v
dsh --help
```

---

## 安装

### 方式一：`dsh plugin add`（推荐，自动激活）

在插件目录内执行 `.`（`dsh plugin` 会把 `.` 锚定到当前目录并转发给 pnpm）：

```sh
dsh plugin --profile web add .
```

然后重启 Web profile：

```sh
dsh web
```

刷新浏览器即可。

> 原理：`dsh plugin add` = 在 profile 目录里执行 `pnpm add`，然后 `dsh` 会自动把声明了 `dsh.bundle` 的包登记进 `dsh.profile.bundles`，从而自动激活——本插件声明了 `dsh.bundle`，所以无需手动改配置。

### 方式二：从 GitHub 仓库安装

```sh
dsh plugin --profile web add "github:dlpufan/dsh-theme-cyberpunk"
```

> 也可先 clone 本仓库，再在仓库根目录执行 `dsh plugin --profile web add .`。

### 手动激活（备用）

如果 `dsh plugin add` 没有自动激活（例如用 pnpm 手动安装的），在
`$DSH_HOME/profiles/web/cordis.patch.yml` 里加对应 `insert` 行即可：

```yaml
- insert:
    - id: theme-cyberpunk
      name: dsh-theme-cyberpunk
```

> 注意：`cordis.patch.yml` 顶层必须是一个 YAML 数组；空文件或纯注释会报错，想全部关掉就写 `[]`。

---

## 功能

- **RGB 氛围**：旋转 RGB 色轮 + 霓虹光斑 + 细密 CRT 扫描线 + 暗角。
- **背景图库**：内置暗色霓虹城市图，可添加本地图片并记住选择；新增图片进入图库，可随时切换 / 删除。
- **外观一键切换**：`赛博 / 默认` 按钮，在赛博朋克与默认 UI 间切换，偏好持久化。
- **本地音乐播放器**：添加本地音频组成歌单，支持播放 / 暂停、上一首 / 下一首、随机顺序、循环（关 / 列表 / 单曲）、进度拖动与音量；**歌单与播放状态（歌曲、进度、音量、随机、循环）都持久化**，刷新后回位但不自动播放。

---

## 使用

刷新后右上角出现胶囊 HUD：

- `⋮` 手柄：拖动 HUD（位置记住）。
- 「赛博 / 默认」：切换外观，绿点亮起表示赛博朋克开启。
- 音符图标：打开 / 收起音乐播放器。
- 图片图标：打开 / 收起背景图库。
- `»`：收起为单个音符按钮，点击再展开。

音乐播放器面板：

| 操作 | 说明 |
|---|---|
| `+ 添加本地音频` | 打开文件选择器，可多选（mp3 / flac / wav 等） |
| 点击歌单中的曲目 | 立即播放该曲 |
| `×`（曲目右侧） | 从歌单移除（同时从 IndexedDB 删除） |
| 交叉箭头 | 随机顺序开关（点亮为开启） |
| 上一首 / 下一首 | 切换曲目 |
| 中央圆形按钮 | 播放 / 暂停（渐变霓虹底） |
| 循环箭头 | 循环模式：关 → 列表 → 单曲（点亮为开启） |
| 进度条 / 音量条 | 拖动跳转 / 调音量 |

背景图库面板：

| 操作 | 说明 |
|---|---|
| 「默认背景」 | 切回内置霓虹城市图 |
| 点击缩略图 | 切换为对应背景（选中带青色描边） |
| `×`（缩略图右上） | 从图库删除（删除当前项会自动切回默认） |
| `+ 添加背景图` | 从本地选择图片（多选，加入图库并立即应用最后一张） |

---

## 自定义

所有颜色与特效集中在 [`lib/client.js`](./lib/client.js)：

- `DARK` / `LIGHT` —— `--dsw-*` token 覆盖值。
- `css` 里的 `--cbx-neon-*` —— 霓虹原色。
- `body[data-cbx-on][data-ds-dark-theme]` —— 背景图与蒙层。
- `DARK["--dsw-alias-bg-base"]` 的 alpha —— 背景图透出程度。

常用调整：

| 想改什么 | 改哪里 |
|---|---|
| 主霓虹色 | `--cbx-neon-cyan` + `DARK["--dsw-alias-brand-primary"]` |
| RGB 氛围强度 | `body[data-cbx-on]::before { opacity }`（默认 0.18） |
| 色轮转速 | `@keyframes cbx-spin` 的 `16s` |
| 背景图透出程度 | `DARK["--dsw-alias-bg-base"]` 的 alpha |
| 换背景图 | 替换 `client.js` 里 base64 的 `data:image/jpeg;base64,...` |
| 扫描线开关 | 删掉 `body[data-cbx-on]::after` 整段 |
| 关闭动效 | 系统开启「减少动态效果」时自动禁用 |

---

## 目录结构

```
.
├── package.json           # dsh.bundle（自动激活）+ dsh.client（浏览器半边）
├── cordis.patch.yml       # 自插入 patch
├── lib/
│   ├── index.js           # node 半边（空 apply）
│   └── client.js          # 浏览器半边：token + RGB 特效 + 背景图 + HUD
├── README.md              # 本文件（简体中文）
├── README.en.md           # English
├── README.ja.md           # 日本語
├── LICENSE                # MIT
└── .gitignore
```

---

## 卸载

```sh
dsh plugin --profile web remove dsh-theme-cyberpunk
```

或从 `cordis.patch.yml` 中删除对应 `insert` 行，再重启。

---

## 关于 DSH 插件

DeepSeek Harness 用 **Cordis** 插件框架组装。一个 profile（如 `web`）由「bundle 层 + 用户 patch 层」叠加而成：

- **bundle**：`package.json` 里声明 `dsh.bundle.patch` 的包，其 `cordis.patch.yml` 会作为一层 patch 叠加，向组合里 `insert` 插件条目。
- **client 插件**：声明 `dsh.client` 的包，其 `exports["./client"]` 是浏览器半边（`window.__ModuleLoader__.load`），由 `dsh-client-modules` 扫描并注入到页面。
- **host 插件**：`main` 入口就是 Node 半边。

本插件做成「自插入 bundle」：`dsh plugin add .` 安装后即自动激活，无需手改配置。

---

## 许可

[MIT](./LICENSE)