# dsh-ui-web

> 为 DSH Web GUI 打造的《我的世界》主题皮肤，注入程序化绘制的像素全景天空盒、方块按钮与告示牌输入框。

## Metadata

- Author: [@CAPTAIN1275](https://github.com/CAPTAIN1275)
- Repo: <https://github.com/CAPTAIN1275/dsh-ui-web.git>
- GitHub: [CAPTAIN1275/dsh-ui-web](https://github.com/CAPTAIN1275/dsh-ui-web)
- Stars: 34
- Language: TypeScript
- License: [Apache-2.0](https://spdx.org/licenses/Apache-2.0.html)
- Topics: `dsh-plugin`, `dsh-plugin-market`, `dsh-plugins`
- Forks: 2
- Open Issues: 0
- Last push: 2026-08-16T18:08:27.000Z
- Added: 2026-08-20T00:00:00.000Z

## Install

```bash
dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/minecraft
```

## Wiki

## 一句话定位
为 DeepSeek Harness（DSH）Web GUI 提供《我的世界》主界面氛围的皮肤插件：在界面背后放一个会缓慢旋转的程序化绘制的像素全景天空盒，把按钮做成灰石板方块，把输入框做成带钉子的木告示牌，整体配色落在青金石蓝、草地绿、石灰与金沙上。

## 核心能力
- 在主界面背后注入一个由 6 个程序化绘制 SVG 像素场景构成的 3D 全景天空盒（村庄、湖岸、密林、雪峰 + 天空 + 草地方块），绕 Y 轴 90 秒转一圈，复刻《我的世界》主菜单的镜头感
- 把按钮渲染成 MC 风格的灰色石板方块：黑色描边、明亮顶面、深色底面；悬停文字变黄、按下时整块下沉 1 像素
- 把输入框和文本域渲染成带四角铁钉的木板告示牌：原木色渐变 + 木纹 + 深色边框；聚焦时边框变亮、文字变白
- 把面板和侧栏改成半透明深色石板背景，配合数据透视让旋转的全景天空盒在面板后面透出来
- 顺带重写 `--dsw-static-*` 与 `--dsw-alias-*` 调色板，把官方深蓝色系重映射为青金石蓝、绿色映射为草地绿，让组件读取 token 时也落在方块世界
- 把浏览器标签页的文档标题改成 `Minecraft · DeepSeek 在线`，卸载皮肤时恢复原标题

## 技术实现
- **语言**: TypeScript
- **关键依赖**: `@deepseek-ai/cordis`（effect 生命周期）、`lightningcss`（CSS Modules 编译）、`tsdown`（打包）
- **架构模式**: 纯客户端注入；样式全部挂在 `body[data-dsh-minecraft]` 下（暗色变体追加 `[data-ds-dark-theme]`），通过 Cordis `ctx.effect()` disposer 完整回收自己写入的内容；不挂 cordis 服务、不发事件、不触模型请求
- **入口文件**: `src/index.ts`（宿主侧空壳 apply）+ `src/client/index.ts`（浏览器侧 `apply(ctx)`，含 DOM 写入、全景天空盒组装、SVG 数据 URI 生成）

## 适用场景
适合想让 DSH Web 界面看起来像在《我的世界》里运行的玩家或学生用户——把 AI 对话工具的整块工作区染上像素方块天空和石板 UI。如果你已经在用其他皮肤，需要先决定切换到这一款；皮肤之间不能叠加。

## 前置依赖与兼容性
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| DSH Web | 已运行 `dsh web` 服务（默认 http://127.0.0.1:3080） | 仅作用于 DSH Web GUI，不影响其他 profile |
| Node.js | >= 18（构建期） | 仓库使用 pnpm + tsdown 构建；运行时浏览器即可 |
| pnpm | >= 10 | 包管理与构建工具；从源码安装需执行 `pnpm install && pnpm -r build` |
| 平台 | 跨平台（macOS / Windows / Linux） | 纯前端注入，无原生模块依赖 |

## 安装方式
```bash
dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/minecraft
```

## 配置项
本插件无需额外配置。皮肤启用互斥，皮肤之间的切换由仓库根目录的 `scripts/dsh-skin` 工具统一管理：
- `dsh-skin use minecraft` 启用本皮肤
- `dsh-skin use official` 恢复官方默认外观
- `dsh-skin list` 查看皮肤与当前激活项

切换后 config watcher 会在几秒内热重载，刷新页面即可生效。

## 常见问题

**Q: 装上以后怎么换回官方默认外观？**

A: 在终端执行 `dsh-skin use official`，config watcher 会在几秒内热重载，刷新页面即可恢复原貌。

**Q: 这个皮肤会和别的皮肤同时生效吗？**

A: 不会。皮肤之间是互斥的，由仓库内的 `scripts/dsh-skin` 统一管理，同时只会有一个皮肤处于激活状态。

**Q: 卸载后页面元素会留下残留吗？**

A: 不会。`apply()` 通过 Cordis effect disposer 完整回收自己写入的内容，包括 body 上的 `data-dsh-minecraft` 属性、注入的全景天空盒（`stage`/`skybox` 6 个面）、遮罩以及文档标题。

**Q: 全身动起来我头晕怎么办？**

A: 浏览器勾选「减少动态效果」（prefers-reduced-motion）后皮肤会自动停掉全景旋转，并把所有按钮和输入框的过渡动画归零，画面恢复静态。

**Q: 全景天空盒的素材是官方原版贴图吗？**

A: 不是。原版 Mojang 全景贴图有版权，皮肤里所有像素场景都是用 SVG 在 8px 方块上程序化绘制出来的（方块山、像素云、方块树、蘑菇、南瓜、小鸟、花朵等），每个面的素材都由种子的伪随机散点生成，保证每次刷新画面稳定一致。

**Q: 这个皮肤会影响 DSH Web 的功能吗？**

A: 不影响。皮肤只改 body 上的属性、注入 DOM 元素和改写 `document.title`，既不挂载 cordis 服务、也不发事件、更不触及模型请求；和右侧文件面板（aionui）、Git 图谱这些自带 token 体系都通过 CSS 变量对接互不干扰。

## 上手难度
入门 — 一行安装命令加一行 `dsh-skin use minecraft` 即可生效；全景天空盒、按钮样式、配色全部内置，无需任何配置或写代码。

## 已知问题与限制
- 本子包 LICENSE 文件为 BSD-3-Clause，`package.json` 中 `license` 字段却填了 `Apache-2.0`，两处声明不一致；以 LICENSE 文件实际内容为准（BSD-3-Clause），二次分发前建议统一两处
- 皮肤之间的互斥切换依赖仓库根目录的 `scripts/dsh-skin` 脚本，仅在从同一仓库链接安装时可用，单独克隆本子目录时需要手动维护 `~/.dsh/cordis.patch.yml` 的 managed 区段
- 安装命令原 README 给出的是 `link:<本仓库绝对路径>`，本百科按插件市场标准命令提供 GitHub 安装形式，两者效果等价
- 从 GitHub 安装时 pnpm ≥10 会拦截构建脚本，需要先把打印出来的包 key 加进 profile 的 `pnpm-workspace.yaml` `allowBuilds` 列表再重试
- 暂无其他已知问题

---

This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [dsh-ui-web](https://deepseek-plugin.org/plugins/CAPTAIN1275/dsh-ui-web/packages/skins/minecraft)
Wiki generated by AI (model: `MiniMax-M3`)