The Wandering Earth II · 流浪地球2 — DSH Web 主题

为 DeepSeek Harness (DSH) Web GUI 打造的《流浪地球2》电影风格主题插件包：深空底舱配色、行星发动机等离子蓝、MOSS 红光点缀；AI 生成的行星发动机插图沉底展示，随会话运行状态点火/熄火联动，叠加星场 HUD 氛围层。

• 包名：@shuaihaov/dsh-theme-wandering-earth-2
• 部署形态：静态 Web 插件包，经 ~/.dsh/profiles/web（dsh plugin add 安装 + cordis.patch.yml insert 行）持久挂载——DSH 重启自动加载，效果常驻
• AI 协作开发规范：见 AGENTS.md（硬性约束、工作流、踩坑档案）

效果预览

assets/screenshot.png（2998×1620 全窗口截图）：深色模式下完整主题效果——行星发动机插图沉底、星场 HUD 氛围层、MOSS 化发送按钮。

快速开始（安装）

前置条件：已完成 DSH 安装与初始化，Web GUI 可访问（默认 http://127.0.0.1:3080）。下述 <repo> 为克隆本仓库的本地路径，<profile> 为 DSH 的 web profile 目录（默认 ~/.dsh/profiles/web）。

1. 安装依赖（一条命令）

dsh plugin --profile web add https://github.com/shuaihaoV/dsh-TheWanderingEarthII

dsh plugin add 是 pnpm add 的封装，支持任意 pnpm 可解析的来源：GitHub URL、github:owner/repo、本地 link: 路径等，依赖自动写入 <profile>/package.json。

2. 注册插件行

编辑 <profile>/cordis.patch.yml，追加：

# The Wandering Earth II theme: cinematic HUD + sunken planet-engine artwork
- insert:
    - id: theme-wandering-earth-2
      name: '@shuaihaov/dsh-theme-wandering-earth-2'

3. 重启 DSH 生效

完全退出 DSH 进程后重新启动——插件的 insert 行随 profile 自动加载。无需在设置里手动选主题：配色经 theme.overrideTokens 叠加层常驻压在任何主题之上，装好即生效。

验证

curl -sI http://127.0.0.1:3080/twe2-assets/moss-eye.jpg   # 期望 HTTP 200 + image/jpeg

浏览器打开 Web GUI：输入框底部透出行星发动机插图、发送按钮呈 MOSS 眼形态，即主题已加载；发送消息后发动机点火（蓝色光柱），停止后熄火。

卸载

1. 删除 <profile>/cordis.patch.yml 中的 theme-wandering-earth-2 insert 段
2. dsh plugin --profile web rm @shuaihaov/dsh-theme-wandering-earth-2
3. 重启 DSH

特性总览

架构

┌─ Host 半  src/index.js ──────────── 直接加载（无需构建）
│    inject: ['webServer']
│    注册 /twe2-assets/* 前缀路由 → serve assets/ 内 PNG/JPG
│
├─ Client 半 src/client/index.js ──── 源码（人改这里）
│    inject: ['theme', 'slots']
│    overrideTokens 配色 + HUD CSS + EngineBeacon 状态桥 + MOSS 眼
│         │
│         ▼ pnpm run bundle（scripts/build.mjs，零依赖）
│    lib/client.js ────────────────── 构建产物（机生成，勿手改）
│         │
│         ▼ window.__ModuleLoader__.load({ id, factory })
│    浏览器加载执行
│
└─ assets/ 插图 ← .tmp/ 生成管线产出（genimg*.py 生成 + cutout*.py 去背）

目录结构

├── package.json        # 包声明 + dsh.client platform:web + bundle 脚本
├── src/
│   ├── index.js        # Host 半：/twe2-assets/* 白名单静态路由
│   └── client/index.js # Client 半源码：配色 + HUD 样式 + 状态桥 + slots
├── scripts/build.mjs   # 零依赖构建：包装为 __ModuleLoader__ handoff
├── lib/client.js       # 构建产物（pnpm run bundle 重新生成）
├── assets/             # 去背插图 + 效果截图（由 Host 半路由 serve）
├── refs/               # MORE VFX 概念参考图（版权原因不入库，本地保留）
└── .tmp/               # 生成管线（gitignore：脚本含 API key、raw/ 为原图库）

部署链路

本仓库 ──link:──▶ ~/.dsh/profiles/web/package.json（dependencies）
              ~/.dsh/profiles/web/cordis.patch.yml
                └─ insert: theme-wandering-earth-2 行 ──▶ DSH 启动加载

工作原理

Host 半（src/index.js，组合行加载的 ESM cordis 插件）：webServer.register({ kind: 'prefix', path: '/twe2-assets' }) 白名单静态路由。文件名校验为「小写 slug + png/jpg 扩展名」正则（ASSET_NAME），query string 在匹配前剥离（兼容 ?v= cache-busting），路径穿越不可能；assets 目录从 import.meta.url 相对解析，包可任意 link 移动。必须声明 export const inject = ['webServer']——本行位于组合树尾部，fiber 激活早于 webServer 服务注册，ctx.get 竞态落空会导致路由静默缺失（v7.1 实测坑）。

Client 半（src/client/index.js → bundle 成 lib/client.js）：

1. 声明 inject: ['theme', 'slots']（同理：fiber 激活可能早于 theme 服务注册，竞态落空会让主题静默不注册——v7.2 实测坑）
2. 配色经 theme.overrideTokens 常驻叠加——不走主题注册：DSH 外观偏好经 zod 枚举只持久化内置 light/dark/system 三选（AppearanceRow 硬编码三选，不读主题注册表），第三方主题 setTheme 只改内存不写 settings，刷新即回落；override 层压在任何当前主题之上，切换外观、刷新页面效果均不消失。每个 token 给 { light, dark } 双值（运行时校验，裸字符串抛错），浅色外观自动切「冰原白昼版」槽位
3. 插图沉底：--dsw-alias-bg-base / sidebar-fill 半透明化 + html 深底色兜底；插图从输入框与文字底部透出
4. 状态桥：EngineBeacon（shell.overlay slot）用 useSessions 读当前会话 running，经 theme.overrideTokens 把 --twe2-engine-img / --twe2-glow 写到 body inline token，驱动沉底层换图与光晕变色
5. 切换过渡：body::before 的 transition: background-image 1.2s ease-in-out——变量换图触发 cross-fade，光晕颜色同步插值渐变；双态插图（双色共四张）预载避免首次切换闪跳
6. 粒子蔓延：CSS 点阵动画 + mask 限制在右侧发动机上方区域
7. body::after 顶层：边缘 HUD（能量线/刻度尺）+ 星场 + 蓝图网格（常显，浅色模式下星点反转为深空蓝尘）
8. MOSS 化发送按钮：shell 的发送/停止主按钮经纯 CSS 换肤为 MOSS 眼（详见下方「MOSS 化发送按钮」节）
9. 浅色模式适配：token 双槽位 + CSS 浅色覆盖段（钩子 body:not([data-ds-dark-theme])，由 theme presenter 按当前 colorScheme 写入）

MOSS 化发送按钮（v7.9）

shell 的发送/停止主按钮是硬编码 chrome，无替换 slot；conversation.input.right 只给只读 props（拿不到 submit/stop 动作）。故采用纯 CSS 换肤：

实现要点：

• 类名锚点 [class*="_trailing"] [class*="_primary"]——CSS modules 类名带构建 hash（如 uV2eYG_primary），本地名 _primary 子串跨构建稳定
• 原 SVG 图标 display: none，background-image: var(--twe2-moss-url)（token 注入，URL 自带 ?v= cache-bust）
• 点击行为完全保留 shell 原按钮（不劫持、不重建）
• 坑：shell 的 hover 规则用 background 简写（特异性更高），会把背景图重置为 none——hover 态必须重申 background-image
• 浅色模式保留呼吸动效，蓝系换 #0B7FDA、光晕收敛

意象取色

* 半透明化以透出沉底插图。 ** 浅底加深保对比度。

插图资产（assets/）

由 Right Code 平台 nano-banana-2（gemini-3.1-flash-image）生成，原图存 .tmp/raw/，assets/ 内为去背透明版（PIL）：

发动机形态对齐电影设定：扁平穹顶 + 辐射状拱形支撑腿（参考 MORE VFX 官方概念图；本地存于 refs/，因版权不入库）。

生成管线要点（详见 AGENTS.md）：

• 单一参考链原则——idle 版以同代 burn 版为唯一参考生成（仅熄灭光柱）；历史双参考链导致机位/色调漂移，已废弃
• 深色底图黑底亮度法去背（cutout.py）；浅色底图按与背景色的欧氏色差去背（cutout_light.py，亮度法会误伤亮蓝光柱）
• 去背 max_size ≥ 1400 保全分辨率（CSS auto 100vh 渲染，低分辨率被放大会模糊）
• src/client/index.js 中 TWE2_ASSET_VER 为 ?v= cache-busting 版本号：每次更新 assets/ 图片后必须 bump 并 pnpm run bundle

使用与维护

首次安装已完成（本仓库经 link: 挂载进 ~/.dsh/profiles/web，patch 含 theme-wandering-earth-2 insert 行）。日常操作：

演进记录

• v0.0.1：首次 GitHub 公开发布——README 增加「效果预览」截图（assets/screenshot.png）；refs/ 外部概念参考图因版权原因明确不入库；包版本号统一为 0.0.1