dsh-stzb

Readme

# dsh-stzb — 率土之滨 · 铁血水墨

DeepSeek Harness（DSH）Web GUI 的主题皮肤插件，仿照 [dsh-deep-whale / maid-atelier](https://github.com/Small-tailqwq/dsh-deep-whale/tree/main/maid-atelier) 的形态：**纯客户端插件**，安装后立即换肤，无需改动 DSH 本体。

> 风格：**暗色铁血战场 × 亮色水墨古风**。全部素材（水墨噪点、宣纸纹理、回纹角饰、印玺）由 SVG/CSS 代码生成，无第三方图片、无版权风险。

## 效果

- **令牌级换肤**：覆盖 `--dsw-*` 全套设计令牌（约 115 项），浅色/深色两套配色：
  - 暗色「铁血战场」：墨底 + 青铜金边 + 朱砂警示 + 战旗红点缀
  - 亮色「水墨古风」：宣纸底 + 黛青主色 + 赭石/竹青点缀 + 暖色文字
- **全局样式**：宋体系衬线字体、宣纸/墨染画布纹理、青铜滚动条、古风选区与焦点环
- **装饰层**：顶部青铜金线、左上回纹角饰、右上「率土之滨」印玺、全屏墨韵暗角（均 `pointer-events: none`，不挡交互）
- 跟随系统「浅色/深色/跟随系统」三种偏好，两套配色自动适配

## 快速预览（无需重启 DSH）

双击项目根目录的 **`preview.html`**（或直接浏览器打开）即可看到皮肤效果：模拟的 DSH Web 界面 + 浅色/深色/跟随系统 切换 + 底部实时配色条。改完 `src/tokens.js` / `src/skin.css` 后跑一次 `npm run build` 重新生成。

## 安装（本地）

1. 确保插件目录完整（含已构建的 `client/client.js`；修改源码后先 `npm run build`）。
2. 在 web profile 目录安装依赖（等价于 `dsh plugin --profile web add` 的本地版）：

   ```sh
   cd "$HOME\.dsh\profiles\web"
   pnpm add -w file:"<插件目录绝对路径>"
   ```

3. 把插件加入 profile 组合包列表，编辑 `$HOME\.dsh\profiles\web\package.json`：

   ```jsonc
   "dsh": { "profile": { "bundles": [
       "@deepseek-ai/dsh-base",
       "@deepseek-ai/dsh-web-app",
       "dshmarket",
       "dsh-stzb"   // ← 新增
   ] } }
   ```

4. 重启 DSH Web（关闭 `dsh web` 后重新运行）。刷新页面即生效。

卸载：从 `package.json` 移除依赖与 bundles 条目，`pnpm install` 后重启即可。

## 从 GitHub 安装

仓库已声明 `dsh.bundle` 与 `cordis.patch.yml`，可直接通过 dsh 安装：

```sh
dsh plugin --profile web add github:weijunliang23/dsh-stzb
```

## 开发

```
dsh-stzb/
├─ package.json            # dsh.client 声明 + dsh.bundle.patch
├─ cordis.patch.yml        # 组合包插入条目
├─ lib/index.js            # 宿主入口（纯客户端皮肤，空实现）
├─ client/client.js        # 构建产物：__ModuleLoader__ 工厂 bundle
├─ preview.html            # 独立视觉预览页（npm run build 生成）
├─ src/
│  ├─ tokens.js            # 设计令牌表（LIGHT/DARK 两套，115 项）
│  ├─ skin.css             # 全局样式（字体/纹理/滚动条/装饰层）
│  ├─ factory-body.js      # 客户端插件体（theme.overrideTokens + CSS 注入 + 装饰）
│  ├─ preview-template.html# 预览页模板
│  └─ svg/                 # 水墨/宣纸/回纹/印玺 SVG 素材
└─ scripts/
   ├─ build-client.mjs     # 零依赖构建 + 冒烟测试
   └─ make-preview.mjs     # 生成 preview.html
```

修改源码后重新构建（无需 npm 联网）：

```sh
npm run build     # 生成 client/client.js + preview.html 并跑冒烟测试
```

## 技术原理

- DSH 客户端插件在 `package.json` 声明 `dsh.client`（`platform: "web"`），并把 `exports["./client"]` 指向一个 `window.__ModuleLoader__.load({ id, factory })` 格式的 bundle；宿主 `client-modules` 扫描 loader 条目、注入 `window.__DSH_BOOT__` 引导图。
- 皮肤通过 `ctx.theme.overrideTokens(source, { '--dsw-*': { light, dark } })` 叠加令牌层——主题呈现器（ui-layout）把活跃主题的令牌写成 `body` 内联 CSS 变量，随 `data-ds-dark-theme` 属性切换两套配色。
- 本插件刻意**零 React 依赖**：装饰层用注入的 DOM 节点 + 纯 CSS 实现，最稳、最容易移植到其他 DSH 版本。

## 许可

MIT。主题灵感来自网易《率土之滨》；本插件不包含任何游戏素材或官方资源。