touhou-hakurei

一句话定位

这是一套面向 DeepSeek Harness Web GUI 的「东方 Project 博丽神社」主题皮肤。它把对话背景换成博丽神社的昼/夜实景画面，把博丽灵梦的立绘挂在画面两侧，并把侧边栏、对话头部、输入框统一改成朱红/纸白/金色的半透明风格，全程只动外观、不动任何 Host 端能力。

核心能力

• 替换整页对话背景为博丽神社昼/夜实景图，并跟随系统的亮/暗主题自动切换（src/client/index.ts:310-320）
• 在画面左右两侧叠加灵梦站姿/飞行立绘，作为独立图层不参与对话流（src/client/index.ts:67-83）
• 把侧边栏、对话头部、输入框统一改成半透明渐变面板，文字按主题自动分色（src/client/hakurei.module.css:5-86）
• 给侧边栏四角的竖幅画框、输入框横版画框、工作区缎带/盾形装饰，让控件融入统一面板（src/client/index.ts:87-98、553-569、README.md:25-35）
• 接管浏览器 tab 的 favicon（换成灵梦头像）、页面标题（"博丽神社 · Touhou Project"）、theme-color meta（朱红色 #8a2318），让浏览器外观也跟着切换（src/client/index.ts:572-582、278-294）
• 跟随侧栏宽度的拉伸/折叠自动调整背景定位、对接 WCO 标题栏高度，并避开灵梦立绘的位置（src/client/index.ts:325-411）

技术实现

• 语言: TypeScript（client 用浏览器 ESM/CJS 混合，host 端是 ESM Node 入口）
• 关键依赖: @deepseek-ai/cordis ^4.0.1（用 ctx.effect() 注册可逆卸载）、tsdown 0.22.14（构建工具）、lightningcss ^1.32.0（CSS Modules 编译）
• 架构模式: 客户端注入式皮肤 — cordis.patch.yml 在 web profile 的 plugin roster 里插入 id: ui-skin-hakurei；Client bundle 的 apply(ctx) 在 data-dsh-hakurei body 作用域下挂 MutationObserver + ResizeObserver，监听侧栏、对话页、深浅主题切换后增量重绘；卸载时通过 ctx.effect 的销毁器一次性还原（cordis.patch.yml:5-7、src/client/index.ts:246-276、502-552）
• 入口文件: src/client/index.ts（浏览器端主入口，导出 apply(ctx)），src/index.ts（Host 端空操作）；构建产物 lib/index.js + lib/client.js

适用场景

想让默认的 DeepSeek Harness Web GUI 看上去更有「东方 Project 神社」氛围、避免每天面对同质化白色界面、并且能跟随系统深色模式自动切换的用户。皮肤是纯展示层、不发任何 Cordis 事件、不改模型请求与会话，所以也适合给一台多人共用的 DSH 安装做个性化外观切换。

前置依赖与兼容性

安装方式

dsh plugin --profile web add github:xiake595/touhou-hakurei

配置项

常见问题

Q: 这个插件是做什么的？

A: 它是 DeepSeek Harness Web GUI 的「博丽神社」主题皮肤：用博丽神社昼/夜实景当对话背景、把博丽灵梦的立绘挂在画面两侧、并把所有面板统一改成朱红/纸白/金色半透明风格，皮肤工程结构继承自 dsh-deep-whale 的 maid-atelier（skin.json:1-29、README.md:1-7）。

Q: 装上以后 DSH 的会话、模型、工具会受影响吗？

A: 不会。Host 端的 apply() 是空操作（src/index.ts:1-3），Client 端只通过 ctx.effect() 注册 DOM/CSS 写入和一个统一的销毁器，卸载时把所有皮肤写入过的属性、注入的节点、document.title、theme-color meta 全部还原（src/client/index.ts:246-276）。

Q: 需要单独下载背景、立绘、画框这些素材吗？

A: 不需要。所有图（神社背景、灵梦立绘、侧栏画框、设置画框、缎带、icon 等）都通过 tools/generate-assets.cjs 转成 data URI 内联到 lib/client.js，激活完全离线、不依赖任何临时文件或远程 URL（README.md:57-75）。

Q: 可以同时装两套皮肤互相切换吗？

A: 该皮肤包自己不做切换。皮肤互斥由 dsh-skin 切换工具或 profile 的 bundles 配置管理；本皮肤只通过 wiring.id = ui-skin-hakurei 标识自己（cordis.patch.yml:5-7、skin.json:20-23）。

Q: 卸载后会留下垃圾吗？

A: 不会。Cordis 销毁器会移除所有 [data-skin-owner='hakurei-shrine'] 节点、删除所有写入的 data-* 标记与 body 上的 dataset 标记，并把 body 的 background-、--hakurei- 等 CSS 变量还原到加载前的值（src/client/index.ts:246-271）。

Q: 浅色模式看起来太亮怎么办？

A: 皮肤在浅色主题下会切到浅色背景图 HAKUREI_PALACE_LIGHT，并使用一套纸白配色（--hakurei-porcelain #faf5ea）和减弱的阴影；整体比深色模式亮度低、对比度更适合长时间阅读（src/client/hakurei.module.css:5-50、src/client/index.ts:310-315）。

Q: 能用这套皮肤的素材做商业产品吗？

A: 不能。整包以 CC BY-NC-SA 4.0 发布，明确禁止任何商业性使用（package.json:31、README.md:89-96）。

上手难度

入门 — 安装一行命令即可生效，没有需要填写的配置项，切换和卸载都交给 DSH 自身的皮肤管理机制。

已知问题与限制

• 仓库未声明 engines.node 与最低 DSH 版本要求；如果 DSH 后续修改了侧栏选择器 [data-pane='sidebar']、标题栏 [class*='titlebar']、工作区 [role='tree'] 等内部 className，绑定点会失效（src/client/index.ts:41-43、106-107、158-218、492-494）
• 在无 Window Controls Overlay 的普通标签页（headless / 平板模式）下，标题栏高度 fallback 固定为 40px，注释明确写「保持 headless/纯 tab mock 的可用性」，可能与真实标题栏高度不一致（src/client/index.ts:332-369）
• 整套素材（神社背景、灵梦立绘、装饰画框）以 CC BY-NC-SA 4.0 授权，商业使用前需另行取得书面授权（package.json:31、README.md:89-96）
• 仅对 platform: web 的 DSH profile 生效，桌面壳/移动端等其他 platform 不会加载这套皮肤（package.json:18-24、cordis.patch.yml:5-7）

DeepSeek Harness Web GUI 的东方Project 博丽神社主题皮肤：博丽神社昼夜实景背景、 灵梦左右立绘、朱红/纸白/金色的神社装饰界面。纯展示层客户端插件 —— apply() 设置 data-dsh-hakurei 作用域、按亮/暗主题切换神社背景、以独立透明层挂载灵梦 角色、装饰可折叠侧栏，并为加载/思考/工具运行状态预留稳定动画钩子。effect 销毁器 还原全部 CSS/DOM 写入；不注入服务、不发出 Cordis 事件、不触达模型请求。

预览

效果展示

特性

• 博丽神社昼/夜实景对话背景（亮/暗主题自动切换；浅色模式带柔光罩缓解刺眼）
• 灵梦站姿/飞行双立绘（左侧栏联动避让、对话页移向安全边缘）
• 统一半透明面板：侧边栏、对话头部与输入框使用同一套半透明渐变 （浅色纸白 / 深色深棕），随主题自动切换；内部控件（品牌行、按钮、搜索框） 融入面板，整体干净统一
• 主题感知文字：浅色模式深墨文字、深色模式纸白文字，保证两种主题下可读
• 简洁无横幅：顶部缘带、悬浮横幅、底部装饰条与输入框/侧边栏画框均已移除
• 朱红、纸白、金色点缀（头像 favicon、标题字标、选中态缎带）
• 素材内嵌于 client bundle（数据 URI），激活不依赖任何临时文件/远程 URL

安装

方式一：本地路径（开发 / 已克隆仓库）

dsh plugin --profile web add <本目录绝对路径>

方式二：GitHub 分发（克隆后安装）

git clone https://github.com/xiake595/touhou-hakurei
dsh plugin --profile web add <克隆路径>

也可以直接对 DSH 说："安装一下这个皮肤包：<仓库 URL>"。

加载即生效、卸载即复原（wiring.id 为 ui-skin-hakurei）。皮肤之间的 互斥切换由皮肤管理工具（如 dsh-skin）或 profile 的 bundles 配置管理。

素材

仓库内的素材嵌入（assets-gen/ 与 src/client/*.generated.ts）已经生成完毕， 克隆后无需本地素材即可直接构建使用。

如需替换为自己准备的素材：

1. 准备素材目录（默认 C:\Users\1\Desktop\图片），包含：
   • processed-v2/：bg-light.webp bg-dark.webp（神社昼夜背景）、 reimu-stand.webp reimu-fly.webp（灵梦立绘）、banner.webp（横幅）
   • 方框.png（侧边栏竖幅画框）、对话框.png（输入框横版画框）
2. 修改 tools/generate-assets.cjs 顶部的 ASSETS_DIR / RAW_DIR 路径
3. 运行 node tools/generate-assets.cjs 重新生成素材嵌入

装饰素材（鸟居、日轮、朱印牌、缘带、工作区缎带等）由 tools/generate-assets.cjs 程序化生成（SVG → webp）。

开发与构建

pnpm install
pnpm build        # tsdown 构建 lib/（node 入口 + client bundle）

辅助脚本：

node tools/generate-assets.cjs   # 重新生成素材嵌入（需要 sharp 与本地素材）
node tools/rewrite-css.cjs       # 重新生成 hakurei.module.css（色板转换）
node tools/rewrite-index.cjs     # 重新生成 src/client/index.ts（重命名/横幅接线）

致谢与许可

• 皮肤工程结构（构建预设 build/tsdown.client.ts、皮肤脚手架、布局/动画工程） 源自 dsh-deep-whale 的 maid-atelier（作者 Small-tailqwq）
• 背景 / 角色 / 画框素材来自用户本地素材（详见 NOTICE）
• 本皮肤以 CC BY-NC-SA 4.0 发布，禁止任何商业性使用。见 LICENSE 与 NOTICE。