dsh-ui-web/packages/skins/aurora

一句话定位

极光（Aurora）皮肤是 DSH Web GUI 的一款官方皮肤包，把默认界面替换为半透明毛玻璃风格：支持自定义本地或远端的背景图与视频，留空时回退到自带的极光渐变；同时附送一块替代默认推理等级列表的滑块面板。

核心能力

• 自定义背景：填入任意 http(s) 图片/视频 URL，或在设置里"选择文件…"上传本地文件
• 自动适配深浅主题：留空背景时分别渲染深色蓝紫极光渐变与浅色蓝紫极光渐变
• 调节透明度与模糊：背景层提供 0.1–1 的不透明度和 0–40px 的模糊滑块
• 视频背景：自动循环静音播放，支持 HTTP Range 流式加载（视频可拖动进度条）
• 毛玻璃面板：基于 aqua 机制，玻璃模糊与磨砂可由皮肤中心滑块调
• 推理等级滑块面板：点击官方模型菜单里的"推理等级/Effort"行，弹出替代默认列表的连续滑块面板

技术实现

• 语言: TypeScript
• 关键依赖: @deepseek-ai/cordis（插件运行时）、@deepseek-ai/dsh-client-runtime（客户端框架）、@deepseek-ai/dsh-client-ui-settings（设置集成）、@deepseek-ai/dsh-client-ui-settings-general（设置插槽）
• 架构模式: 双半区插件——宿主半区通过 ctx.inject(['webServer']) 注册 /api/skin-aurora/* 路由负责配置读写与媒体存储；浏览器半区通过 apply(ctx) 挂 body 属性、背景层与事件联动；样式集中在 CSS Modules + token 覆盖，全部作用在 body[data-dsh-aurora] 作用域内
• 入口文件: 宿主 src/index.ts，浏览器 src/client/index.ts，皮肤设置卡片 src/client/AuroraCard.tsx

适用场景

DSH Web GUI 的重度使用者，希望让聊天界面不再单调：用喜欢的壁纸、动图或视频做底，叠加半透明面板获得"毛玻璃"质感；同时希望在不离开界面的情况下，用滑块精细调节官方模型的推理等级。

前置依赖与兼容性

安装方式

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

配置项

常见问题

Q: 安装后皮肤没有立即生效怎么办？

A: 检查 DSH「设置 - 通用」里"极光皮肤（自定义背景图）"卡片的开关是否被关闭；若安装后界面仍是原生外观，刷新浏览器页面或重启 DSH 即可，配置会在 ~/.dsh/skin-aurora.json 里持久化。

Q: 视频能正常播放但进度条拖不动？

A: 视频通过宿主 /api/skin-aurora/media/<file> 提供，并实现 HTTP Range 流式返回。如果进度条拖不动，多半是 DSH 主机被反向代理且代理吃掉了 Range 头，请确认代理透传 Range / Accept-Ranges。

Q: 上传失败或媒体丢失如何排查？

A: 服务端最大允许 200MB 请求体；图片会自动压缩到 1920 像素内再上传。媒体文件存放在 DSH_HOME/skin-aurora-media/（默认 ~/.dsh/skin-aurora-media/）；卸载插件不会自动删除该目录，请手工清理。

Q: "推理等级"面板打开后没有反应或不可用？

A: 面板只拦截官方模型菜单里 label 为"推理等级 / Effort"的那一行；面板需要先通过 sessions.models 拿到当前会话的模型目录，加载完成前显示"模型目录加载中…"，加载完成后面板才会进入可用状态。

Q: 配置会同步到云端或 DSH 官方设置桥吗？

A: 不会。极光配置完全保存在宿主本地的 ~/.dsh/skin-aurora.json 文件（绕开设置桥的命名空间白名单），换设备不会自动同步。

Q: 如何彻底移除皮肤以及所有数据？

A: 在 DSH 里移除插件后，手工删除 ~/.dsh/skin-aurora.json 与 ~/.dsh/skin-aurora-media/ 目录即可；glass 的 blur/frost 数值存在浏览器 localStorage，可在开发者工具里清理 dsh.ui-skin-aurora.* 键。

上手难度

入门 — 安装即默认启用，配置项集中在设置卡片里，无需改任何代码；想自定义时再进入设置调整 URL、透明度、模糊与玻璃效果即可。

已知问题与限制

• 上传请求体上限 200MB（src/index.ts:115-119），大于此体积的本地视频无法上传，需自行托管 URL
• 玻璃模糊最大 40、磨砂最大 100，超过会被服务端钳制到上限（src/client/aqua/theme-layer.ts:51-55），超出值不会持久化生效
• 玻璃模糊/磨砂数值仅保存到浏览器 localStorage，不在多浏览器或多设备之间同步
• 侧边栏折叠状态通过 localStorage['dsh.ui-skin-aurora.sidebar-collapsed'] 记忆，清缓存或隐私模式会丢失折叠记忆

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 官方立场。