Yanami Sky · 天台青空

DeepSeek Harness 皮肤插件 — 八奈见杏菜 × 天台,浅天蓝高级感。

A DeepSeek Harness theme plugin: Yanami Anna on the rooftop, light sky-blue, quiet and premium.

简洁,不花哨:一张水洗过的天台照片铺在整页背景里,一套浅天蓝的明暗双色板,右下角一撇羽化淡出的杏菜立绘。作为组合层插件(host 组合的一行)安装后,插件出现在「设置 → 插件」的 Loader 清单里,重启后随 dsh web 自动加载,与哪个会话/预设无关。

预览

效果

项	说明
天台背景	rooftop.jpg 作为整页固定背景,叠一层上轻下重的水洗渐变,聊天区与侧栏轻微透出
配色	13 个主题 token 全部替换为天蓝系(背景 #e9f3fa 系、品牌色 #2f8ac6、侧栏雾蓝),深色模式提供配套深蓝版
立绘	杏菜右下角淡影,opacity 0.34 + 径向羽化遮罩,pointer-events: none 不挡任何交互
可逆	token 层与样式标签都挂在插件 Fiber 上;从组合里删掉该行并重建/重启即完全还原

目录结构

.
├── assets/
│   ├── rooftop.jpg   # 天台背景(1600×960,已压缩)
│   ├── anna.jpg      # 八奈见杏菜立绘(560×810,已压缩)
│   └── show.png      # README 预览截图
├── tools/
│   └── gen-assets.py # 从 assets/ 重新生成 package/src/client/assets.ts(完整 data URI)
├── package/          # 正经的组合层插件包(复制进 harness checkout 的 packages/ 下)
│   ├── package.json  #   含 dsh.client 声明:客户端运行时模块系统的入口契约
│   ├── tsconfig.json
│   ├── tsdown.config.ts
│   └── src/
│       ├── index.ts          # Host 半区(空实现,仅保证 Loader 行可挂载)
│       └── client/
│           ├── index.ts      # Client 半区:overrideTokens + 全局皮肤 CSS
│           ├── tokens.ts     # 天蓝色板与明暗水洗渐变
│           └── assets.ts     # 两张素材的 base64(生成文件,客户端 bundle 单文件伺服)
└── plugin/          # 备选的动态插件半区(不想动组合时用,见「方式二」)
    ├── host.js
    └── client.js

安装

方式一:组合层安装(推荐 · 持久 · 插件列表可见)

适用于从源码 checkout 运行的部署(pnpm dsh web)。皮肤作为 host 组合里的一行,属于进程全局,与预设无关;重启后仍在。

1. 克隆本仓库,把 package/ 目录复制为 checkout 里的一个 workspace 包:

   git clone https://github.com/<你的账号>/dsh-theme-yanami-sky.git
   mkdir -p <checkout>/packages/themes
   cp -r dsh-theme-yanami-sky/package <checkout>/packages/themes/yanami-sky
   

2. 链接并构建(tsc 产出 lib/types,tsdown 产出 lib/index.js 与 lib/client.js):

   cd <checkout>
   ln -sfn ../../packages/themes/yanami-sky node_modules/@deepseek-ai/dsh-theme-yanami-sky
   # dsh web 的 profile 通过 ~/.dsh/profiles/node_modules 回退链解析插件包名;
   # 此链接让宿主进程能找到包。healProfilesModuleFallback 只增不删,重启后仍有效。
   ln -sfn <checkout>/packages/themes/yanami-sky ~/.dsh/profiles/node_modules/@deepseek-ai/dsh-theme-yanami-sky
   pnpm exec tsc -b packages/themes/yanami-sky
   cd packages/themes/yanami-sky
   <checkout>/node_modules/.bin/tsdown --env.DSH_BUILD_FACE client
   

   (跑完整构建的部署也可把该包加入 tsconfig.client.json 的 references,再走根目录 pnpm run build:lib。)

3. 在 dsh web 所用 profile 的用户补丁层追加一行 (~/.dsh/profiles/web/cordis.patch.yml,补丁层带热监视,通常无需重启):

   # ── Yanami Sky 主题皮肤(用户新增行)─────────────────────────────
   - insert:
       - id: theme-yanami-sky
         name: '@deepseek-ai/dsh-theme-yanami-sky'
   

4. 验证:宿主会伺服该 bundle ——

   curl -sI http://127.0.0.1:3080/plugins/@deepseek-ai/dsh-theme-yanami-sky/client.js   # 期望 200
   

   然后刷新 Web GUI 页面。皮肤生效,且「设置 → 插件」的清单里出现 theme-yanami-sky。 (补丁层带热监视:实测改完 cordis.patch.yml 无需重启进程即可完成上述验证; 重启进程后皮肤同样随补丁层自动加载。)

5. 卸载:从 cordis.patch.yml 删掉该 insert 块并重启 dsh web。

方式二:动态插件安装(临时 · Session 级)

不想动组合时,用 plugin/ 里的两个半区走动态 Cordis 流程:编辑 plugin/host.js 的 ASSET_DIR 为本机 assets/ 绝对路径,然后让 Agent 执行:

cordis_define { code: { host: <host.js 内容>, client: <client.js 内容> } }
cordis_run { pluginId, packageId }

临时生效,重启进程即消失;卸载用 cordis_stop <pluginId> / cordis_undefine <pluginId>。

自定义

• 立绘大小/位置/透明度:改 package/src/client/index.ts 中 body::after 块的 width / height / right / bottom / opacity(动态方式改 plugin/client.js 同处)。
• 背景水洗浓淡:改 tokens.ts 里 WASH_LIGHT / WASH_DARK 的 rgba(...) 透明度(越低图片越明显)。
• 配色:改 tokens.ts 中 TOKENS 对应 token 的 light / dark 值。
• 换图:替换 assets/ 下的 jpg 后运行 python3 tools/gen-assets.py 重新生成 package/src/client/assets.ts(完整 data URI,前缀不可省),再重跑第 2 步构建。

说明

• 已在 DeepSeek Harness 0.1.0-rc.5(Web GUI) 实装并验证:补丁层热应用、/plugins/.../client.js 路由 200、启动图(__DSH_BOOT__)包含该插件、页面刷新后主题生效且「设置 → 插件」清单可见(用户确认)。
• 组合层安装需能修改 harness checkout;不能改 checkout 的部署请用方式二。
• assets/ 中的图片为个人提供的素材,请确认其使用与再分发符合图片权利;如有问题请替换为自己拥有权利的图片。
• 代码以 MIT License 开源;图片素材的许可情况请另行确认。

致谢

角色:八奈见杏菜(ヤナミ・アンナ),出自《負けヒロインが多すぎる!》(Makeine: Too Many Losing Heroines!)。