huabai-flowerwhite/dsh-ui-skin

皮肤Skin 原生Native ⭐ 3 MIT Web 界面Web UI

面向 DeepSeek Harness 的 **UI 皮肤插件**:在 UI 下方注入壁纸 / 视频背景,并把 DSH 整个界面(含侧栏)的表面背景烘焙为半透明(毛玻璃)让皮肤透出。支持拖动裁剪缩放、历史皮肤记录与可拖动悬浮窗;自定义皮肤支持网络地址或本地文件。

项目介绍Project Overview

dsh-ui-skin 是 DeepSeek Harness 的 UI 皮肤插件,向界面注入壁纸或视频背景,并通过 ctx.theme.overrideTokens() 将 DSH 全界面(含侧栏)表面背景设为半透明,让背景透出。支持拖动裁剪缩放、历史记录与可拖动悬浮窗,自定义皮肤支持网络地址或本地文件。配置存于 localStorage,视频 Blob 存于 IndexedDB。注意:侧栏半透明 0.6 是透出与可读性的折中,图片压缩为 1920px JPEG 0.85,受浏览器存储配额限制。

dsh-ui-skin is a UI skin plugin for DeepSeek Harness that injects wallpaper or video backgrounds and uses ctx.theme.overrideTokens() to bake the DSH interface (including sidebar) surfaces as semi-transparent so the background shows through. It supports drag-to-crop and zoom, history records, and a draggable floating panel; custom skins accept network URLs or local files. Configs persist in localStorage and video Blobs in IndexedDB. Note: sidebar opacity (0.6) balances translucency and text readability; local images are compressed to 1920px JPEG at 0.85, bounded by browser storage quota. Crop zoom scales up only (1.0–4.0) to avoid revealing the base color.

或使用命令行安装(适合开发者)Or use CLI install (for developers)

命令行安装CLI Install

dsh plugin --profile web add github:huabai-flowerwhite/dsh-ui-skin

huabai-flowerwhite/dsh-ui-skin 加入你的 DSH 配置(web profile)即可启用。

READMEREADME

dsh ui skin

面向 DeepSeek Harness 的 UI 皮肤插件:在 UI 下方注入壁纸 / 视频背景,并把 DSH 整个界面(含侧栏)的表面背景烘焙为半透明(毛玻璃)让皮肤透出。支持拖动裁剪缩放、历史皮肤记录与可拖动悬浮窗;自定义皮肤支持网络地址或本地文件。

依据 DH-TP-SDK(DeepSeek-Harness-Third-Party-Plugin-SDK-Specification.md)工程化第三方插件规范落地。Bronze/Silver/Gold、P0–P4、S0–S4 均非 DeepSeek 官方认证。

使用

  1. 安装后重启 dsh,打开 设置 → UI 皮肤 切换皮肤与参数(配置持久化到浏览器 localStorage)。

  2. 「自定义」里可填网络地址,或点「选择图片/视频」从本地文件夹选取;拖动预览区裁剪位置、滚轮缩放;上传自动进「历史皮肤」;点「展开悬浮窗」弹出可拖动快捷面板。

  3. 聊天框中可调用 skin_list 查看皮肤清单。

    How‑to Showcase1

    How‑to Showcase2

皮肤清单

id 名称 类型 说明
none 不使用背景(原版 UI)
custom 自定义 壁纸 / 视频 网络地址,或从本地文件夹选择图片 / 视频文件

目录结构

dsh-ui-skin/
├── package.json         # exports["."]/["./client"]/["./package.json"] + dsh.client + dsh.bundle
├── dsh.plugin.yaml      # DH-TP-SDK manifest
├── cordis.patch.yml     # host composition insert row 参考
├── README.md / design.md
├── install.ps1 / install.sh
├── LICENSE
├── src/
│   ├── index.js         # Host 入口 → host.js
│   ├── host.js          # Host 半体:skin_list 工具 + /dsh-ui-skin/skins 路由
│   └── client.js        # Client 源码(ESM)
├── lib/
│   └── client.js        # Client 工厂函数 bundle(实际被加载)
└── tests/
    ├── README.md
    └── manifest.test.mjs

能力

  • Host 半体skin_list 只读工具(列出皮肤清单)+ /dsh-ui-skin/skins 本地路由。
  • Client 半体:背景层引擎(壁纸 / 视频,支持拖动裁剪缩放)+ 毛玻璃(ctx.theme.overrideTokens() 半透明表面,覆盖整个界面含侧栏)+ 历史皮肤记录 + 可拖动悬浮窗 + 「设置 → UI 皮肤」设置页。本地图片压缩后存 localStorage,本地视频存 IndexedDB。

工作原理

  • 背景层<div data-dsh-ui-skin="background"> 固定层,z-index:0pointer-events:none,插入 document.body 首部,位于页面背景之上、UI 内容之下。
  • 毛玻璃透出:用官方扩展点 ctx.theme.overrideTokens() 把 DSH 表面 token(--dsw-alias-bg-*--dsw-specific-sidebar-fill 等)烘焙为半透明 rgba,让壁纸从整个界面(含侧栏)透出;切回「无」时回收覆盖。
  • 裁剪缩放transform: scale() + transform-origin 联动——scale 放大图片,transform-origin 决定露出哪个区域。注意不能用 background-position,它在 cover 下横向裁剪余量趋近 0(拖不动)。
  • 存储:配置与图片历史存 localStorage(图片压缩为 1920px JPEG);视频 Blob 存 IndexedDB。

完整的技术决策与踩坑记录见 design.md §7

安装(一条命令)

本插件是 npm 包 + host composition row 形态:Host 工具全局注册 + Client 皮肤 UI 全局加载,重启后自动加载。

Windows(PowerShell)

cd dsh-ui-skin
powershell -ExecutionPolicy Bypass -File install.ps1

Linux / macOS(bash)

cd dsh-ui-skin
bash install.sh

脚本幂等。装完后重启 dsh(Ctrl+C 后重新 npx dsh web / dsh web)。

脚本做了什么(手动安装等价步骤)

  1. 把本目录链接进 node_modules:
    $DSH_HOME/profiles/node_modules/dsh-ui-skin  ->  本目录
    
  2. $DSH_HOME/profiles/<profile>/cordis.patch.yml 追加:
    - insert:
        - id: dsh-ui-skin
          name: 'dsh-ui-skin'
    

安全边界

  • Security Level S1 / Permission Level P1:只读 Host 工具 + 本地路由 + 纯 UI。
  • 不读不写文件、不发外部网络、不跑 shell/subprocess、不含密钥。
  • Client 半体仅用公开 ctx / slots 能力;背景层是插件自有 DOM(pointer-events:none),不读取或修改任何业务 DOM。
  • 视频背景尊重 prefers-reduced-motion(减少动效时暂停)。

已知限制

  1. custom 皮肤的网络 URL 需浏览器可访问;插件自身不发外部网络。
  2. 本地图片压缩为 JPEG(0.85,1920px 宽)后存 localStorage,受站点配额约束;本地视频存 IndexedDB。
  3. 侧栏半透明(0.6)是"整个界面透出"与"文字可读"的折中,如需更强可读性,可在 lib/client.jsSKIN_TOKENS 里调高 --dsw-specific-sidebar-fill(如 0.75)。
  4. 裁剪缩放只放大不缩小(scale 1.0–4.0),避免缩小露出底色。
  5. Agent 反应式强度(事件 → setIntensity)与 WebGL/Shader 渲染未实现(后续能力)。
  6. dshpd_analyze 是启发式扫描,会误报嵌套 manifest 的 plugin.id 等字段(参考实现 dsh-plugin-design 同样命中,属工具缺陷,见 design.md §7.7)。
上一个 Prev dsh-plugin-manager 下一个 Next dsh-companion