dsh-ui-web/packages/dsh-skins

一句话定位

DSH Web GUI 的皮肤全家桶聚合包：装上它就在「插件配置 → Web UI 插件」组里多出一张「皮肤中心」卡片，列出 9 款内置主题皮肤（同花顺、Windows XP、蓝色幻想、龙的传人、Minecraft、初音未来、交易终端、鲸吟、极光），支持在线试穿和一键切换。

核心能力

• 在「插件配置 → Web UI 插件」里插入一张皮肤中心卡片，列出官方默认与所有已装皮肤的名称、tagline、强调色，当前激活带 Active 标记
• 在线试穿任意一款皮肤（不持久化）：即时看效果、亮/暗主题切换、退出完整还原当前皮肤状态
• 一键应用皮肤：宿主 /api/skin-center/apply 走进程内的 dsh-skin use ESM 端口，写 ~/.dsh/cordis.patch.yml 的 managed 区段，配置监听器秒级热加载，无需重启
• 皮肤之间互斥：同一时刻只激活一款，由 patch 文件的 dsh-skin managed 区段强制
• 一个 npm 包内置全部 9 款皮肤资产（每个皮肤是一组 skin.json + lib/client.js + lib/index.js + cordis.patch.yml），无需为每款皮肤单独占用 npm 包名
• 试穿走按需加载：皮肤 bundle（~700KB base64 美术资源）只在点「Try on」时才通过同源 script 路由取，不嵌入冷启动

技术实现

• 语言: TypeScript（皮肤中心 host/client）+ Node.js（聚合包 build 脚本为 ESM .mjs）
• 关键依赖: @deepseek-ai/dsh-host-webserver（host 端路由服务）、@deepseek-ai/dsh-settings（背景遮挡配置 schema）、@deepseek-ai/dsh-client-runtime / @deepseek-ai/dsh-client-ui-theme / @deepseek-ai/dsh-client-locale（client 端运行时/主题/i18n）、schemastery（schema 校验）、react ^18.2.0（皮肤中心卡片 UI）
• 架构模式: Cordis 插件 host + client 双半区；host 半区在 ctx.effect 里挂载原生 HTTP 路由 /api/skin-center/*，通过 dsh-client-runtime 注入；切换皮肤的 use 命令由进程内 src/skin-switch.ts（dsh-skin CLI 的 1:1 ESM 端口）直接写 patch 文件 + 管理 profile node_modules 符号链接，无需外部 CLI 二进制
• 入口文件: 聚合入口 packages/dsh-skins/build.mjs（从源 packages/skins/<id> 同步资产到 packages/dsh-skins/skins/<id>）；皮肤中心 host 入口 packages/skins/skin-center/src/index.ts；皮肤中心 client 入口 packages/skins/skin-center/src/client/index.ts

适用场景

希望给 DSH Web 聊天界面换个风格、又不想折腾命令行的普通用户：装一个包就拿到 9 款主题，从同花顺炒股风格、Windows XP Luna 怀旧、Minecraft 方块世界到当下流行的初音未来、鲸吟都有，皮肤中心卡片里就能试穿 / 一键切换。 喜欢自定义皮肤的开发者也能用：聚合包把每款皮肤的 skin.json + lib/client.js 完整内置，照着 packages/skins/aurora 模板加一款自己的皮肤，跑一次 pnpm --filter @captain1275/dsh-skins build 即可出现在皮肤中心里。

前置依赖与兼容性

安装方式

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

配置项

常见问题

Q: 装上这个包之后能在 DSH Web 界面里看到什么？

A: 在「设置 → 插件配置 → Web UI 插件」组里多出一张「皮肤中心」卡片，列出「官方默认」加上当前安装的所有内置皮肤（同花顺 ths、Windows XP luna、蓝色幻想 blue-fantasy、龙的传人 dragon-heir、Minecraft minecraft、初音未来 miku、交易终端 trading、鲸吟 whale-song、极光 aurora），当前激活的皮肤带 Active 标记。

Q: 切换皮肤需要重启 dsh web 服务吗？

A: 不需要。点击「Apply / 恢复默认」后皮肤中心会通过进程内 dsh-skin use 把变更写入 ~/.dsh/cordis.patch.yml 的 dsh-skin managed 区段，宿主配置监听器在数秒内热加载，浏览器刷新即可看到新皮肤。

Q: 能不能同时启用两款皮肤？

A: 不能。皮肤中心通过 patch 文件的 dsh-skin managed 区段强制只有一个激活，其它皮肤被写为 disabled: true。

Q: "在线试穿"（Try on）会不会修改我的当前设置？

A: 不会。试穿只在当前页面临时挂载该皮肤的视觉（真实走模块加载器、不用 eval），退出时按配方完整还原当前皮肤的 body 属性、背景内联样式、chrome 子节点、xp footer taskbar 等，不会写入任何文件。

Q: 装完之后皮肤列表是空的，或者少了几款怎么办？

A: 检查 packages/dsh-skins/skins/<id> 目录里是否同时存在 skin.json、lib/client.js、lib/index.js、cordis.patch.yml，缺一会被 build.mjs 跳过；正常 npm 安装会自动完成构建。

Q: Windows 上切换时报"权限不足"怎么办？

A: 切换逻辑在符号链接失败时会自动回退到目录联结（junction），不需要开发者模式；如果仍失败请以管理员身份运行 dsh，或手动把皮肤包放进 profile 的 node_modules。

Q: 怎么加一款自己的皮肤？

A: 在 packages/skins/<your-id>/ 下放 skin.json（含 id、name、tagline、bodyAttr、wiring.id、package 字段）+ 构建后的 lib/client.js / lib/index.js / cordis.patch.yml，然后跑 pnpm --filter @captain1275/dsh-skins build 重新打包，重装聚合包即可在皮肤中心看到。

Q: 怎么卸掉某款皮肤换回官方默认？

A: 皮肤中心卡片里有「官方默认」入口，点击即可一键应用；想完全卸载插件则用 dsh plugin --profile web remove @captain1275/dsh-skins。

上手难度

入门 — 装上即可在 Web 端插件配置里直接看到皮肤中心卡片，无需任何额外配置；想新增或调整皮肤时才需要看 build.mjs 和 skin.json 字段。

已知问题与限制

• 皮肤中心只读取每个 skin.json 里 wiring.bundleWired 静态字段，未实现基于 profile 实际加载情况的运行时检测（packages/skins/skin-center/src/skin-switch.ts:245-248 标注 TODO）
• Windows 上创建 profile 符号链接可能失败（无开发者模式 / 权限不足），需自动回退到目录联结（junction）才能完成切换（packages/skins/skin-center/src/skin-switch.ts:433、487-502）
• bundle 仅面向 DSH Web GUI（dsh.client.platform: "web"），CLI 模式（headless profile）下浏览器半区不会加载
• 皮肤只改浏览器 DOM（CSS、标题栏、状态栏、背景图等），不触及任何模型请求

English README

基于 zhu1090093659/dsh-web-ui（Apache-2.0）开发的 DeepSeek Harness（DSH）Web UI 插件套件。全套 22 个包已发布到 npm（@captain1275/*）。

DSH Web UI 全家桶为 DeepSeek Harness 的 Web 界面提供一系列插件与皮肤：极光毛玻璃皮肤、任务看板、 SSH 运维、右侧文件/变更面板、Git 图谱、移动端远程控制、DeepSeek 娘看板娘（养成系）、实时令牌统计， 以及皮肤中心。所有插件既可独立安装，也可通过聚合包一次装齐。

极光 Aurora 皮肤效果（沉浸光感 / 深色 / 浅色）

特性

极光（Aurora）皮肤（支持动态背景）

• 毛玻璃输入框：高斯模糊（backdrop-filter 30px）+ 半透明玻璃底 + 细边框 + 内高光
• 自定义背景：URL / 本地图片 / 动图（GIF/WebP）/ 视频（mp4/webm） / 透明度 / 模糊调节， 深浅两套极光渐变；视频背景支持静音开关、本地文件持久化（存 ~/.dsh/skin-aurora-media/，刷新不丢）
• 仿Claude Code推理等级滑块：点击模型菜单的「推理等级」弹出 Effort 滑块面板——无极拖动、松手吸附、 WebGL 火焰跟随、OFF/MAX 刻度、Low/Medium/High/Ultracode 状态

• 用户消息气泡毛玻璃：与输入框统一的玻璃质感

DeepSeek 看板娘（养成系）

• 图片资源（社区同人资源，codex-pet-DeepSeek-girl）
• 养成系统：亲密度 4 级成长（幼鲸 / 伙伴 / 挚友 / 深海羁绊）、升级庆祝气泡、进度条、 Token 零食经济、使用时长成长（每 30 分钟 +1）
• 待机随机气泡：空闲时随机说话（live2d 风格文案）
• 摸头 / 喂食 / 改名 / 拖动，召唤按钮（live2d 同款贴边滑出）

Skill 人格设定

• 设置「人格设定」：开关启用/禁用常驻人格，编辑技能名、描述与人格正文
• 一键生效：保存后写入用户级技能 ~/.dsh/skills/catgirl-rp/SKILL.md，DSH 技能系统实时加载， 所有新对话自动以该人格回应（含语气、动作表达、互动规则）
• 内置猫娘人格：默认提供「小咪」猫娘人格（常驻生效、好感度系统、模式切换指令），可自由改写
• 可临时退出：对话中说「退出角色扮演模式」即切回普通助手，说「进入角色扮演模式」恢复

用量看板

• 彩色统计卡：累计 token、调用次数、缓存命中、估算费用（按 DeepSeek 官方定价）
• 近 14 天趋势：每日 token 消耗柱状图
• 模型分布：各 provider/model 用量环形图 + 图例
• 会话排行：Top 20 会话（标题 / 模型 / 调用数 / token / 费用）
• 自动记录：对话时自动采集 token 用量（会话快照替换语义，不双计），存 ~/.dsh/usage.json
• 侧边栏入口：彩色柱状按钮打开全屏看板

功能插件

皮肤中心

10 套皮肤（ths / xp / blue-fantasy / dragon-heir / minecraft / miku / trading / whale-song / aurora / skin-center），支持皮肤启用互斥管理与一键切换。

其余皮肤（ths / xp / blue-fantasy / dragon-heir / minecraft / miku / trading / whale-song） 为上游 dsh-web-ui 自带皮肤。

安装

方式一：npm（推荐，已发布）

# 在 DSH profile 目录（~/.dsh/profiles/web）安装聚合包
npm install @captain1275/dsh-web-ui-all@0.2.8

然后在 profile 的 package.json 里把 @captain1275/dsh-web-ui-all 加入 dsh.profile.bundles：

{
  "dsh": {
    "profile": {
      "bundles": [
        "@deepseek-ai/dsh-base",
        "@deepseek-ai/dsh-web-app",
        "@captain1275/dsh-client-ui-skin-aurora",
        "@captain1275/dsh-full-stats",
        "@captain1275/dsh-web-ui-all"
      ]
    }
  }
}

重启 DSH 即生效。

方式二：从源码（开发）

git clone <your-repo-url> dsh-web-ui
cd dsh-web-ui
pnpm install
pnpm -r build

# 把本地包链接进 profile（junction）
node scripts/link-profile.mjs

开发

• 构建：pnpm -r build（或 pnpm --filter <package> build）
• 新增皮肤：参考 packages/skins/aurora（skin.json + src/client + cordis.patch.yml）， 然后用 node scripts/skin-center-bundles 重新生成注册表
• 聚合包 patch：编辑 packages/dsh-web-ui-all/aggregate.yml 后 node scripts/aggregate.mjs
• 皮肤资产同步：node packages/dsh-skins/build.mjs

目录结构

packages/
├─ dsh-task-board / dsh-ssh / dsh-aionui-panel / dsh-git-graph
├─ dsh-pet / dsh-live-stats / dsh-full-stats
├─ dsh-web-ui-settings / dsh-web-ui-all / dsh-skins
└─ skins/            # 皮肤源码（aurora、miku、ths 等）
scripts/             # 构建 / 注册表 / 链接工具
shared/              # 共享构建预设（tsdown.client.ts）

版权与许可

• 主体代码：zhu1090093659/dsh-web-ui，Apache-2.0
• 增强优化：@captain1275
• DeepSeek 娘精灵图：xpy12367/codex-pet-DeepSeek-girl， 社区同人资源，版权归原作者
• 人形图标：Font Awesome 6.7.2，CC BY 4.0
• 样式参考：live2d-widget（GPL-3.0，仅参考视觉风格，未搬用代码）
• 商标：DeepSeek 及其相关标识均为 DeepSeek 官方资产；本插件为社区开发者独立维护的非官方同人项目， 不代表 DeepSeek 官方立场。