dsh-ui-web/packages/skins/miku

34Star2Fork0Issue0Watching

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

分类🖥️ 界面增强🎨 主题皮肤
CAPTAIN1275CAPTAIN1275
·CAPTAIN1275/dsh-ui-web.git
语言
TypeScript
License
Apache-2.0
分支
main
dsh-plugindsh-plugin-marketdsh-plugins

安装

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

在终端中运行以上命令，通过 dsh CLI 安装此插件。可在右上角切换 Profile。 第一次用 dsh？看这篇新手教程

一句话定位

为 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）纯前端注入，无原生模块依赖

安装方式

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 安装形式，两者效果等价
  • 暂无其他已知问题
返回插件目录