# dsh-ui-web

> 为 DSH Web GUI 提供 Windows XP Luna 蓝复古皮肤：蓝色窗口条、四色旗标、米色状态栏、绿色开始按钮和 Bliss 蓝天桌面，仅改动浏览器外观。

## 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/xp
```

## Wiki

## 一句话定位
XP（Luna）皮肤是 DSH Web GUI 的一款复古外观替换：把默认界面变成 Windows XP 的 Luna 蓝窗口条、四色旗标、绿色「开始」按钮和 Bliss 蓝天桌面，仅改动浏览器外观，不影响任何业务功能。

## 核心能力
- 注入 Luna 蓝渐变标题栏：固定顶部、带四色窗口旗标图标和最小化/最大化/关闭三个窗口按钮
- 注入米色状态栏：左侧显示「就绪」「DeepSeek 在线」，右侧保留「大写/数字/滚动」三个凹陷指示灯
- 侧边栏底部加挂绿色「开始」按钮：点击会触发原生设置入口的同一段逻辑
- 资源管理器风格树行：浅蓝悬停态 + `#316ac5` 蓝色选中态
- Bliss 蓝天桌面背景 + 全局直角：基于 `body[data-dsh-xp]` 作用域渲染
- 标题与 favicon：固定文档标题为「Windows XP · DeepSeek 在线」，并注入四色旗标 favicon

## 技术实现
- **语言**: TypeScript
- **关键依赖**: @deepseek-ai/cordis（dsh 插件运行时，devDependencies 中显式声明）、CSS Modules（xp.module.css，随 bundle 自动注入）
- **架构模式**: 纯客户端皮肤插件——宿主侧 `apply()` 是空实现，皮肤逻辑全在 `src/client/index.ts` 的 `apply(ctx)` 里：通过 `body.dataset.dshXp = ''` 打开作用域、用 `document.createElement` 直接拼出标题栏/状态栏/开始按钮、用 `MutationObserver` 在侧边栏重渲染后重新挂载开始按钮、用 `ctx.effect(..., 'ui-skin-xp: window chrome')` 注册 disposer 把所有写入撤回
- **入口文件**: 宿主 `src/index.ts`，浏览器 `src/client/index.ts`，样式 `src/client/xp.module.css`，注册清单 `cordis.patch.yml`

## 适用场景
怀念 Windows XP 时代外观、想让 DSH Web GUI 看起来像经典桌面系统的用户；或者团队演示、教学场景里希望界面更有辨识度、又不想改任何业务逻辑的人。它只动皮肤，不影响对话、模型调用、KV 缓存。

## 前置依赖与兼容性
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| DSH | 未声明 | package.json 的 peerDependencies 为空，未显式声明 SDK 版本要求 |
| Node | 未声明 | package.json 未设置 engines 字段 |
| 平台 | 跨平台 | 仅修改浏览器 DOM 与 CSS，无 os/cpu 限制 |
| 原生模块 | 无 | 纯前端 DOM/CSS 工作，不依赖任何原生模块 |

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

## 配置项
本插件无需额外配置。安装后通过 monorepo 提供的 `dsh-skin use xp` 命令激活皮肤；同一时刻只允许一个皮肤处于激活状态，不需要任何开关或参数。

## 常见问题

**Q: 启用 XP 皮肤会影响对话或模型请求吗？**

A: 不会。皮肤只改动浏览器 DOM 与文档标题，不注入任何 Cordis 服务、不发送任何事件，也不会触及模型请求；卸载后 effect disposer 会逐一回滚全部写入。

**Q: 皮肤中心「开始」按钮能弹出开始菜单吗？**

A: 不能。它只是把点击事件转发给侧边栏底部已有的设置触发按钮（`button[aria-haspopup="dialog"]`），相当于复用原生设置入口，并不是真的开始菜单。

**Q: 多个皮肤能同时启用吗？**

A: 不能。同一时刻只允许一个皮肤激活，皮肤之间的互斥由 monorepo 的 `scripts/dsh-skin` 脚本（`dsh-skin use xp`）管理，切换到新皮肤时旧皮肤的 effect 会自动撤销。

**Q: 加载页面（boot page）也会被换皮吗？**

A: 启动页在外壳渲染时插件 bundle 还没就绪，整体仍走默认外观；属性一旦设置好，外壳会获得窗口边框，但启动页内部的卡片保留现代风格，皮肤只接管 UI 稳定后的区域。

**Q: 切换深浅主题会回到非皮肤外观吗？**

A: 不会。皮肤在浅色 `data-dsh-xp` 下渲染 Luna 蓝，在 `body[data-dsh-xp][data-ds-dark-theme]` 下渲染 Zune 风格黑色变体；切换外观主题只会在两套皮肤配色之间翻转，不会脱离皮肤。

**Q: 卸载皮肤会留下残留 DOM 吗？**

A: 不会。effect disposer 会逐一撤回写入：移除 `data-dsh-xp` 属性、删除标题栏和状态栏、移除「开始」按钮和任务栏样式、移除注入的 favicon；如果标题仍是皮肤自己写入的，还会一并恢复成原标题。

## 上手难度
入门 — 安装并执行一条激活命令即可使用，皮肤仅在浏览器端生效，没有配置项、没有副作用，卸载后无残留。

## 已知问题与限制
- 加载页保持原样：外壳的启动页在插件 bundle 就绪之前就已渲染，皮肤从 UI 稳定后才生效，属性设置后启动页获得窗口边框，但内部卡片保留现代风格（README.md:42）
- 主题切换被锁定在皮肤内部：皮肤同时固定浅色 Luna 和深色 Zune 两套配色，切换外观主题只会在两者之间翻转，不会回到非皮肤外观（README.md:43）
- 「开始」按钮只打开设置：它把点击转发给侧边栏底部的设置入口，并不承载真正的开始菜单（README.md:44 / src/client/index.ts:125-127）
- 四色旗标是平面近似：飘扬的 Windows 旗标以平面 2×2 色块呈现（内联 SVG），并非真实的波浪形 Logo（README.md:45 / src/client/index.ts:39-47）
- 面板级装饰依赖 `data-pane` 属性：侧边栏标题带、资源管理器树行、任务栏底部、会话/详情面板的表面装饰依赖 `ui-layout` 中 AppFrame 列携带的 `data-pane` 属性；属性缺失时皮肤仍生效，只是缺少各面板专属表面（README.md:32）

---

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/xp)
Wiki generated by AI (model: `MiniMax-M3`)