dsh-skin-amis

Readme

# dsh-skin-amis

鸣潮爱弥斯主题皮肤 — 粉白配色 + 赛博霓虹装饰的 DeepSeek Harness Web GUI 皮肤。

> 🌸 以鸣潮角色**爱弥斯**（粉发机娘）为灵感：樱花粉 + 纯白渐变、机械感霓虹点缀、毛玻璃面板。

## 📸 截图

| 浅色主题 | 深色主题 |
| --- | --- |
| ![浅色主题](preview/light.png) | ![深色主题](preview/dark.png) |

## ✨ 特性

- 🌸 **粉白配色**：樱花粉 + 纯白渐变，浅色清爽明亮
- 🌌 **赛博霓虹**：深色模式下粉紫渐变 + 霓虹青点缀（机甲能量感）
- 🖼️ **角色背景图**：爱弥斯立绘作为页面背景（由插件内置，随包分发）
- 🧊 **半透明面板**：主框架/侧栏/输入卡片半透明，背景图透出
- 💫 **细节装饰**：按钮悬停粉光、圆角面板、粉色滚动条

## 📦 安装

```bash
# 方式 1：从 GitHub 安装（推荐）
dsh plugin --profile web add github:wanzhiwei5/dsh-skin-amis

# 方式 2：从本地 tarball 安装
dsh plugin --profile web add dsh-skin-amis-0.1.0.tgz

# 方式 3：从本地源码目录安装
dsh plugin --profile web add D:\path\to\dsh-skin-amis
```

安装后**重启 DSH 服务**（`dsh web`），或刷新浏览器页面，皮肤自动激活。

> ⚠️ 皮肤以 `body[data-dsh-amis]` 挂载，激活后立即可见；卸载用 `dsh plugin --profile web remove dsh-skin-amis`。

## 🔧 原理

- **挂载点**：`body[data-dsh-amis]` 属性 + CSS 变量覆盖
- **Token 体系**：重定义 `--dsw-*` 语义变量（brand / bg / label / border / button / scrollbar / state）
- **双主题**：浅色 + 深色（`[data-ds-dark-theme]`）两套完整配色
- **背景图**：host 端注册 `/skin-amis/amis-bg.jpg` 静态路由，浏览器端通过 CSS `url()` 引用
- **透明化**：覆盖主框架/侧栏等容器背景，让背景图透出（注意：容器上禁用 `backdrop-filter`，避免破坏 fixed 弹窗定位）

## 📁 结构

```
dsh-skin-amis/
├── package.json        # bundle 声明（dsh.bundle.patch + dsh.client.platform: web）
├── cordis.patch.yml    # 插入 ui-skin-amis 行到 web 插件花名册
├── skin.json           # 皮肤元数据（id/name/accent/bodyAttr/order）
├── assets/
│   └── amis-bg.jpg     # 爱弥斯背景图（host 端静态路由服务）
├── lib/
│   ├── index.js        # host 端：/skin-amis 静态资源路由
│   └── client.js       # 浏览器端：CSS token + 背景 + 挂载逻辑
└── README.md
```

## 📸 截图

<!-- 在 preview/ 放入 light.png / dark.png 后在此展示：
![浅色](preview/light.png)
![深色](preview/dark.png)
-->

## 🗒️ 更新日志

### v0.1.0
- 首个版本：粉白配色、爱弥斯背景图、双主题、半透明面板
- 修复：容器 backdrop-filter 破坏设置弹窗定位问题

## 📄 License

MIT