锦鲤池塘主题 Kogisune/dsh-skin-koi-pond

dsh-skin-koi-pond · 锦鲤池塘

DeepSeek Harness (DSH) WebUI 主题 —— 墨青池水、锦鲤点红。

一套 DeepSeek Harness WebUI 主题，意象取自「锦鲤池塘」。墨青池水作底，水波涟漪为纹，锦鲤橙红点睛，金鳞与荷叶绿辅佐；昼有「宣纸日色」，夜有「池塘夜色」，亮暗双主题皆备。

主题遵循 skin.json 声明 + 按部件拆分 CSS（7 部件）的规范，是纯展示层：仅覆盖 DSH 官方设计令牌（--dsw-alias-）与部件样式，不注入服务、不发 Cordis 事件、不触达模型请求。开箱即用，安装即生效。

English version 🌐

✨ 特性

- 🐟 Canvas 锦鲤池塘动画：原生 Canvas 2D 鱼群（flocking 聚群 / 对齐 / 分离 + 鼠标驱赶逃逸），荷叶 Perlin 边缘与缺刻、水波涟漪，点击水面泛起波纹；无 p5 依赖，prefers-reduced-motion 自动降级为静态渲染，页面隐藏时暂停
- 🎨 亮暗双主题：深色「池塘夜色」（墨青池水 + 月光白 + 锦鲤橙红 #f26a3c）/ 浅色「宣纸日色」（米白宣纸 + 墨色 + 朱红 #d9562f）
- 🪟 背景遮罩：15% 白 + 3px 模糊，柔化动画、突出前景 UI
- 🧩 组件化主题：7 部件拆分（background / sidebar / titlebar / composer / overlay / fonts / ui），结构清晰、便于维护
- 🌊 辅助色：金鳞 #d9a441 / 荷叶 #3fae7a / 水光蓝 #4fb8c9
- 🎮 实时换色：浏览器控制台 __koiSetScheme('ogon')（9 套锦鲤预设 + 随机彩蛋），不重建鱼群

🖼 预览

深色「池塘夜色」 · 浅色「宣纸日色」

📦 安装

作为 DSH 插件（bundle 直载）安装：

dsh plugin --profile web add github:Kogisune/dsh-skin-koi-pond
重启 dsh web 生效；卸载即复原

🎨 自定义

主题在浏览器中暴露 window.__koiSetScheme(id)，可实时切换锦鲤配色，不会重建鱼群：

__koiSetScheme('ogon') // 黄金
__koiSetScheme('tancho') // 丹顶
__koiSetScheme('random') // 随机彩蛋（含低概率隐藏配色）

内置预设：

| id | 名称 | 鱼身主色 | 尾腹色 |
| kohaku | 红白 | #ffffff | #e23b2e |
| sanke | 大正三色 | #ffffff | #141414 |
| showa | 昭和三色 | #141414 | #e23b2e |
| ogon | 黄金 | #f4c430 | #d99a00 |
| tancho | 丹顶 | #ffffff | #ff3b30 |
| asagi | 浅黄 | #3b6fb5 | #e23b2e |
| utsuri | 绯写 | #f1541b | #141414 |
| panda | 写鲤（黑白） | #141414 | #ffffff |
| momiji | 落叶 | #f1541b | #ffffff |
| random | 随机彩蛋 | 运行时随机 | 运行时随机 |

🧩 主题结构

skin.json 声明：

{
"id": "koi-pond",
"name": "锦鲤池塘",
"theme": {
"kind": "full", // 完整皮肤（与其它完整主题互斥） "family": "koi", // 系列：同系列主题互斥
"components": { / 7 部件全量 / }
},
"css": {
"": ["css/base.css"], // 共享基础（设计令牌）
"background": ["css/background.css"],
"sidebar": ["css/sidebar.css"],
"titlebar": ["css/titlebar.css"],
"composer": ["css/composer.css"],
"overlay": ["css/overlay.css"],
"fonts": ["css/fonts.css"],
"ui": ["css/ui.css"]
- 按部件拆分 CSS → 各部件在 skin.json 的 css 字段独立声明，结构清晰
- theme.family: koi → 与同系列主题互斥，不会与其它系列皮肤踩踏
- z-index 统一走 --koi-z-* 变量，规避弹层撞车

🛠 开发 bash
node scripts/build.mjs # 构建：css/ + koi 模块 → lib/client.js 自包含 bundle（CSS 内联）
node scripts/validate.mjs # 结构校验（skin.json / css 文件 / 部件一致性）
pnpm test # 同 validate

⚠️ 改过 css/ 或 plugin/ 后必须重新 node scripts/build.mjs 才会在 DSH 中生效（DSH 加载的是 lib/ 构建产物）。

📁 目录结构

css/ # 按部件拆分的主题 CSS plugin/ # 插件源码（index.js 宿主入口 / client.js 客户端注入 / koi/ 动画引擎） scripts/ # build / validate lib/ # 构建产物（已提交，clone 即用）

🙏 致谢

- 锦鲤池塘动画引擎（plugin/koi/）移植自 carps.top（MIT，AstroPaper 衍生项目），原实现为博客背景的锦鲤池塘 Canvas 动画。

🤝 贡献

欢迎提交 issue 与 PR。提交前请先运行 node scripts/validate.mjs 确保结构与部件一致性通过。

📄 许可证

MIT © Kogisune