# dsh-ui-web

> 为 DSH Web GUI 打造的初音未来主题皮肤，提供蓝紫渐变配色、毛玻璃面板、可换背景图和亮暗双主题。

## Metadata

- Author: [@CAPTAIN1275](https://github.com/CAPTAIN1275)
- Repo: <https://github.com/CAPTAIN1275/dsh-ui-web.git>
- GitHub: [CAPTAIN1275/dsh-ui-web](https://github.com/CAPTAIN1275/dsh-ui-web)
- Stars: 34
- Language: TypeScript
- License: [Apache-2.0](https://spdx.org/licenses/Apache-2.0.html)
- Topics: `dsh-plugin`, `dsh-plugin-market`, `dsh-plugins`
- Forks: 2
- Open Issues: 0
- Last push: 2026-08-16T18:08:27.000Z
- Added: 2026-08-20T00:00:00.000Z

## Install

```bash
dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/miku
```

## Wiki

## 一句话定位
为 DeepSeek Harness（DSH）Web GUI 提供初音未来（Hatsune Miku）主题的皮肤插件，把界面染成蓝紫洋红渐变配色、加入毛玻璃面板与可换背景图，并在窗口标题栏、状态栏加上「01」编号徽标、音符与声波等电子歌姬元素。

## 核心能力
- 注入蓝紫洋红三色渐变（#2e9bff → #9b5dff → #ff4da6）作为全局配色
- 渲染半透明毛玻璃效果的面板、侧边栏、输入框与设置弹窗，背景图从中透出
- 在 body 上以内置示例图为背景，默认数据 URI 内嵌，无需额外资源文件
- 同时提供亮色（蓝粉晴空）与暗色（霓虹蓝紫夜）两套主题，跟随系统自动切换
- 在窗口顶部加入音符图标 + 01 编号徽标，底部状态栏加入声波线条与文字标识
- 把浏览器标签页 favicon 替换为青蓝色八分音符图标

## 技术实现
- **语言**: TypeScript
- **关键依赖**: `@deepseek-ai/cordis`（effect 生命周期管理）、`lightningcss`（CSS 编译）、`tsdown`（打包）
- **架构模式**: 纯客户端注入，不挂服务、不发事件、不触模型请求；样式全部挂在 `body[data-dsh-miku]` 下（暗色变体追加 `[data-ds-dark-theme]`），通过 Cordis effect disposer 完整回收自己写入的内容
- **入口文件**: `src/index.ts`（宿主侧空壳）+ `src/client/index.ts`（浏览器侧 `apply(ctx)`，含 DOM 写入、MutationObserver 监听主题切换）

## 适用场景
适合想要把 DSH Web 界面换成初音未来视觉风格的用户——把 AI 对话工具的界面变成带有蓝紫渐变和电子歌姬装饰的工作区。如果你只是想要皮肤、不希望皮肤干扰功能逻辑，本插件正合适；如果希望皮肤内嵌自定义图片或与其他 DSH 功能深度联动，则需要手动改源码或扩展。

## 前置依赖与兼容性
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| Node.js | >= 20.0.0 | 构建与测试所需运行时 |
| pnpm | >= 9 | 包管理与构建工具 |
| DSH Web | 已运行 `dsh web` 服务（默认 http://127.0.0.1:3080） | 仅作用于 DSH Web GUI，不影响其他 profile |
| 平台 | 跨平台（macOS / Windows / Linux） | 纯前端注入，无原生模块依赖 |

## 安装方式
```bash
dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/miku
```

## 配置项
本插件无需额外配置。皮肤启用互斥，皮肤之间的切换由仓库根目录的 `scripts/dsh-skin` 工具统一管理：
- `dsh-skin use miku` 启用本皮肤
- `dsh-skin use official` 恢复官方默认外观
- `dsh-skin list` 查看皮肤与当前激活项

切换后 config watcher 会在几秒内热重载，刷新页面即可生效。

## 常见问题

**Q: 装上以后怎么换成官方默认外观？**

A: 在终端执行 `dsh-skin use official`，config watcher 会在几秒内热重载，刷新页面即可恢复原貌。

**Q: 我想换一张自己喜欢的初音图作为背景，怎么做？**

A: 把图片放到本仓库根目录（如 `bg.png`），用 `node scripts/embed-bg.mjs` 转成 WebP 后会自动写入 `src/client/art.ts` 的 `MIKU_ART` 常量；之后重新 `pnpm build` 并刷新页面生效。

**Q: 这个皮肤会和别的皮肤同时生效吗？**

A: 不会。皮肤之间是互斥的，由仓库内的 `scripts/dsh-skin` 统一管理，同时只会有一个皮肤处于激活状态。

**Q: 卸载后页面元素会留下残留吗？**

A: 不会。`apply()` 通过 Cordis effect disposer 完整回收自己写入的内容，包括 body 上的 `data-dsh-miku` 属性、注入的标题栏、状态栏、favicon 以及文档标题。

**Q: 安装路径里有空格（Windows）会出问题吗？**

A: 会。`dsh plugin add` 在路径含空格时会拆断参数，建议改用 `cd ~/.dsh/profiles/web && pnpm add "link:<仓库绝对路径>"`，再把包名追加到 `~/.dsh/profiles/web/package.json` 的 `dsh.profile.bundles` 数组中。

**Q: 安装后页面没看到变化怎么办？**

A: 重启 `dsh web` 服务并对页面做一次硬刷新（Ctrl+Shift+R），如果仍未生效，检查 `~/.dsh/cordis.patch.yml` 的 managed 区段确认本皮肤已启用。

## 上手难度
入门 — 仅一行安装命令即可生效，背景图、配色、装饰元素全部内置，无需任何配置或写代码。

## 已知问题与限制
- 源码 `package.json` 声明的协议字段为 `Apache-2.0`，而仓库内 `LICENSE` 文件与 README 底部均标注 `BSD 3-Clause`，两处不一致；以最终 LICENSE 文件为准（BSD-3-Clause），但若你打算二次分发，建议在合并前统一两处声明
- 皮肤之间的互斥切换依赖仓库根目录的 `scripts/dsh-skin` 脚本，仅在从同一仓库链接安装时可用，单独克隆本子目录时需要手动维护 `~/.dsh/cordis.patch.yml` 的 managed 区段
- 安装命令原 README 给出的是 `link:<本仓库绝对路径>`，本百科按插件市场标准命令提供 GitHub 安装形式，两者效果等价
- 暂无其他已知问题

---

This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [dsh-ui-web](https://deepseek-plugin.org/plugins/CAPTAIN1275/dsh-ui-web/packages/skins/miku)
Wiki generated by AI (model: `MiniMax-M3`)