chobits-chii-dsh

dsh plugin --profile web add chobits-chii-dsh

<div align="center">

<h1>Chobits-Chii-DSH</h1>

<p><b>叽～</b> 把 DeepSeek Harness 换成小叽的绘本风皮肤</p>

<p>A Chii-themed skin plugin for the DeepSeek Harness web UI.</p>

<p>

<a href="https://github.com/Anime2Real/Chobits-Chii-DSH"><img alt="GitHub" src="https://img.shields.io/badge/GitHub-Chobits--Chii--DSH-181717?logo=github"></a>

<a href="https://www.npmjs.com/package/chobits-chii-dsh"><img alt="npm" src="https://img.shields.io/npm/v/chobits-chii-dsh.svg"></a>

<a href="LICENSE"><img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-green.svg"></a>

<a href="https://github.com/topics/dsh-plugin"><img alt="dsh-plugin" src="https://img.shields.io/badge/topic-dsh--plugin-b0687f"></a>

<a href="https://github.com/deepseek-ai/deepseek-harness"><img alt="dshTarget" src="https://img.shields.io/badge/dsh-0.2.1--rc.5-b0687f"></a>

</p>

<p>

<a href="./README.md">简体中文</a> ｜ <a href="./README.ja.md">日本語</a> ｜ <a href="./README.en.md">English</a>

</p>

</div>

<p align="center">

<img src="docs/preview-light.png" alt="浅色模式预览" width="49%" />

<img src="docs/preview-dark.png" alt="深色模式预览" width="49%" />

</p>

⚠️ 代码 MIT,资产另计。 Chobits 及其角色的版权归 CLAMP 及相关权利方所有;本项目代码以 [MIT 许可证](./LICENSE) 发布,插画与 Live2D 模型 © Anime2Real,只允许作为本插件的一部分、原样、非商业使用——详见 [ASSETS.md](./ASSETS.md)。

✨ 功能特性

• 中性暖调配色:暖奶油底 + 暖墨文字 + 低饱和玫瑰点缀,浅色 / 深色两套 token(色板取自 Chobits-Chii-Mascot-Release 落地页,并按中性化取向收敛)
• 拍立得照片墙:落地页同款 5 张插画做成横 / 竖拍立得贴片,沿界面四周散布、向中心渐隐;左侧 300px 侧边栏区与正文区永不遮挡,窄窗口自动隐藏边缘照片
• 轻微动态:鼠标移动时照片按各自深度做反向视差,照片本身有极慢的漂浮;prefers-reduced-motion 下自动关闭,触屏不启用视差
• 细节装饰:圆体字族、玫瑰色选中态、绘本噪点纹理、暖调背景光斑
• Live2D 小叽桌宠:右下角常驻的小叽(可在 Plugins → chobits-chii-dsh 的配置页里开关,记住选择),视线跟随鼠标;会话开始跑时切到 Look、空闲回到 Idle;模型是 1024 贴图 WebP 的精简版(约 2.5 MB),随包内置、离线可用,无 WebGL 或加载失败时安静退回照片墙(点击穿透,不做点击触发动作)
• 纯客户端、免构建安装:lib/client.js 已随仓库提交,dsh plugin add 后即可用;配图构建期内联为 data URI,Live2D 运行时与模型由 host 半的只读路由伺服
• 可热卸载:一切样式与 DOM 注入都走 ctx.effect,禁用 / 卸载插件即完全还原

🚀 安装

要求已安装 DeepSeek Harness(dsh --version 有输出),并至少启动过一次 dsh web:

# npm(推荐)
dsh plugin --profile web add chobits-chii-dsh

# GitHub 源(备用)
dsh plugin --profile web add github:Anime2Real/Chobits-Chii-DSH

安装后重启 dsh web(或刷新页面)。卸载:

dsh plugin --profile web remove chobits-chii-dsh

在 Discover 中发现

DSH 的 Plugins → Discover 只显示用户自己添加的索引源。打开 Plugins → Experimental plugins → Custom plugin indexes,在 Discover → Add index source 里加入:

https://anime2real.github.io/Chobits-Chii-DSH/market/index.json

然后搜索 "Chii" 即可一键安装。索引文件是 [market/index.json](./market/index.json),格式为 DSH 的 format 1;生成脚本优先使用 npm 源,未发布时回退到 Git commit。

本地开发安装(在仓库目录下,以 link 方式挂进 profile):

dsh plugin --profile web add ./

🧩 兼容性

项 · 值

engines.dsh · >=0.2.1-rc.5 <0.3.0

暗色选择器 · body[data-ds-dark-theme]

token 名来源 · @deepseek-ai/dsh-client-ui-theme@0.2.1-rc.5 内置设计平台样式

DSH 处于 developer preview,升级后若 token 名或客户端插件契约变化,皮肤可能失效——此时更新 src/tokens.js 与 package.json 的 engines.dsh 即可。样式层另有 body 级 token 兜底规则,即使 theme 服务不可用也能保持大部分观感。

🔧 工作原理

纯客户端(client-only)插件,返回对象上声明 inject: ['theme'],由运行时在 theme 服务就绪后应用:

1. theme 服务通道(主通道):theme.overrideTokens('chobits-chii', aliases) 注册 66 个 --dsw-* token 的明暗两套覆盖(src/tokens.js),随 DSH 外观切换即时生效、可热清理。DSH 的主题渲染器把 token 写在 <body> 的 inline style 上,这是唯一能压过内置默认值的通道

2. 样式层:向 <head> 注入带 data-plugin-css 去重标记的样式,承载字体、选中态、噪点、光斑与照片墙(src/skin.css);token 变量规则同时挂在 body 上,作为渲染器缺位时的次级保护

3. 照片墙:src/client.template.js 的 WALL 数组驱动,5 张 520px jpg(assets/wall-*.jpg,共约 250KB)构建期内联为 data URI;竖向图 4:5、横向图 5:4,双层 mask(中心径向渐隐 + 左侧条带)保证可读性

4. Live2D 桌宠:src/live2d.js(构建期内联进 lib/client.js)在首屏之后空闲时加载 assets/live2d/ 下的 pixi / Cubism Core / 模型,在右下角挂一个点击穿透的 canvas;host 半(lib/index.js)用 ctx.webServer.register 把该目录挂成只读路由 /chii-live2d/assets,所以模型不进 client bundle、也不依赖外部 CDN

🎨 自定义

• 调色:改 src/tokens.js 的 token 值(明暗成对),重建即可
• 照片墙:改 src/client.template.js 的 WALL 数组(left / right + y / bottom 控制锚点、depth 控制视差深度、portrait 控制横竖、wide / tallOnly 控制窄窗口显隐、r 旋转、s 缩放);换图把文件放进 assets/ 即可
• 渐隐范围与透明度:src/skin.css 的 .chobits-chii-wall
• 桌宠开关:侧边栏 Plugins → chobits-chii-dsh 的配置页里有 小叽桌宠 开关(注册在 plugins.bundle.config),开关即时生效、不用刷新;桌宠身上没有关闭按钮,关掉后随时能在那里开回来(偏好存在 localStorage 的 chobits-chii-dsh:live2d);桌宠在场时右下角那张 wall-chii-headpat 照片会直接隐藏,关掉后再回到原位(src/skin.css 里 body[data-chii-mascot] 那条规则)

改完执行 node scripts/build.mjs,重启 dsh web 并刷新页面。

🛠 开发

node scripts/build.mjs        # src/ + assets/ → lib/client.js(纯 JS,提交进仓库,安装免构建)
node scripts/smoke.mjs        # 无浏览器冒烟:ModuleLoader 契约 / 有无 theme 服务两种环境
node scripts/market-index.mjs # 发布新版本后重新生成 market/index.json(优先 npm 源,未发布时回退到当前 commit)

目录结构:

package.json           # dsh.client 清单 + dsh.bundle.patch + engines.dsh
cordis.patch.yml       # 向 web profile roster 插入 ui-chobits-chii 行
lib/index.js           # host 半:把 assets/live2d/ 挂成只读路由 /chii-live2d/assets
lib/client.js          # 浏览器半(构建产物,已提交)
src/client.template.js # lib/client.js 的模板(占位符由 build 替换)
src/live2d.js          # Live2D 桌宠控制器(构建期内联)
src/tokens.js          # 明暗两套 --dsw-* token 集
src/skin.css           # 装饰层(字体/噪点/照片墙/桌宠),支持 asset("name") 引用配图
assets/                # 5 张 jpg 配图(构建期内联)
assets/live2d/         # web 精简模型(2.5 MB)+ 运行时库 + Core(路由伺服,不进 bundle)
docs/                  # README 预览截图、Live2D 方案文档
market/index.json      # Discover 索引(format 1)
market/awesome/        # awesome-dsh-plugin 投稿条目
scripts/build.mjs      # 构建脚本(仅 Node 原生 API,零依赖)
scripts/smoke.mjs      # 冒烟测试
scripts/market-index.mjs # 生成 Discover 索引

🗺 路线图

• v0.1:皮肤 MVP —— token 双主题 + 字体/噪点
• v0.2:拍立得照片墙背景(中心渐隐)
• v0.3:中性配色 + 横竖拍立得 + 侧边栏/正文避让(仅用落地页 5 张图)
• v1.0:Live2D 小叽桌宠 —— 内置 web 精简模型、右下角常驻、视线跟随、running → Look / 空闲 → Idle、Plugins 页开关
• v1.0.1:Live2D 贴图切到 1024×1024(模型体积 2.5 MB),随运行时源模型重导出
• v1.0.2(当前):README 补

…(truncated)