Back to home

lssyd20070106

dsh-ui-preset-enhance

Third-party DSH WebUI enhancement plugin: custom backgrounds, theme colors, prompt presets, token/context visibility, and manual compact.

Stars
1
Language
JavaScript
Created
Aug 14, 2026
Updated
Aug 14, 2026

Introduction

dsh-ui-preset-enhance

简体中文 · English · 小白安装手册

一个给 DeepSeek Harness(DSH)WebUI 用的第三方界面增强插件。

它主要解决 4 件事:界面个性化、常用 Prompt 复用、Token / Context 查看、手动 Compact。

当前版本:v0.1.0 Preview
第三方项目,不是 DeepSeek 官方组件。项目按当前公开的 DSH 0.1.0-rc.6 客户端接口进行了源码兼容检查,并附带构建、运行入口和 DSH 安装 Smoke Test。正式发布初期仍建议保留 Preview 标记,方便收集不同环境的兼容反馈。

效果预览

DSH WebUI background preview

DSH appearance settings prototype

上面两张图来自项目早期视觉原型。正式插件使用独立的 “设置 → 界面增强” 页面提供同方向的壁纸、模糊、透明度和强调色功能,具体控件位置可能与原型图略有不同。

最简单的安装方法

电脑已经有 Node.js 和 pnpm 时,只需要这一行:

npx --yes @deepseek-ai/dsh plugin --profile web add github:lssyd20070106/dsh-ui-preset-enhance

安装完成后:

  1. 完全关闭并重新启动 DSH Web;
  2. 浏览器按 Ctrl + F5
  3. 打开 设置 → 界面增强

不会命令行?

下载本仓库 ZIP,先解压,然后双击:

INSTALL-WINDOWS.cmd

它会检查 Node.js、pnpm、插件文件和 DSH 安装结果。遇到问题直接看:

《小白安装手册》INSTALL-GUIDE.md

功能

功能简单说明
🖼️ 自定义背景本地上传、网络图片或 5 个渐变预设
🌫️ 透明与模糊调整 DSH 界面层透明度和壁纸模糊
🎨 主题颜色主色、辅助色与强调色阶
📑 Prompt 预设7 个内置模板 + 自定义保存 / 删除 / 快速载入
📊 Token / Context查看当前 Session 的 Context 压力、窗口和 Token 组成
🧹 手动 Compact通过当前 Session 的 DSH 命令接口执行 /compact

安全与边界

这个项目定位是 Web 客户端增强

  • 不注册新的后端 Tool;
  • 不修改 Agent-Loop 核心;
  • 不上传你保存的 Prompt 到本项目自己的服务器;
  • 壁纸、主题和用户 Prompt 预设主要保存在浏览器 localStorage
  • 自定义壁纸 URL 只接受 http://https:// 和图片 data: URL,拒绝任意脚本 / CSS URL。

如果你使用网络图片作为壁纸,浏览器仍会正常访问那个图片服务器,因此对方服务器可以收到普通网络请求信息。

我们检查了什么

仓库内置两层 Smoke Test:

scripts/smoke.mjs
scripts/runtime-smoke.mjs

它们会检查:

  • package.json / cordis.patch.yml / ./client 导出是否一致;
  • window.__ModuleLoader__.load(...) 包装和插件 ID;
  • Settings 与 Sidebar Slot 是否能注册;
  • 当前 Session 的 Token Projection 是否能读到;
  • /compact 是否走 Session command()
  • 已保存壁纸、主题 Token 是否能在插件启动时恢复;
  • 构建产物是否含本机绝对路径。

GitHub Actions 还会在干净环境中:

  1. TypeScript 检查;
  2. 重建 dsh/client.js / dsh/index.js
  3. JavaScript Syntax Check;
  4. npm pack --dry-run
  5. @deepseek-ai/dsh@0.1.0-rc.6 创建干净 Web Profile,并实际执行一次 dsh plugin add file:... 安装检查。

自动化测试能覆盖“能否构建、能否加载插件结构、能否被 DSH CLI 安装”。最终的浏览器视觉和不同 DSH 预览版本仍需要真实用户环境反馈。

为什么普通用户不用自己编译

仓库直接提交了:

dsh/client.js
dsh/index.js

所以普通用户安装的是已经构建好的运行文件,不需要安装 TypeScript,也不需要在安装过程中运行构建脚本。

开发者修改 src/ 后才需要:

npm install
npm run verify

检查安装是否成功

下载版双击:

VERIFY-WINDOWS.cmd

或者运行:

npx --yes @deepseek-ai/dsh plugin --profile web list dsh-ui-preset-enhance --depth 0

卸载

npx --yes @deepseek-ai/dsh plugin --profile web remove dsh-ui-preset-enhance

下载版也可以双击:

UNINSTALL-WINDOWS.cmd

推荐搭配:Skills 管理“技巧”插件

如果你经常使用 DSH Skills,我推荐原作者 Fishquito7 的:

Fishquito7/dsh-skill-viewer

这个项目不是我制作的,也不是本项目的一部分。它主要用于在 DSH Web 界面查看、添加、删除以及热启用 / 停用 Skills。安装方法、版本和问题请以原作者仓库为准。

简单区分:

  • dsh-ui-preset-enhance:界面、壁纸、主题、Prompt、Token / Context;
  • dsh-skill-viewer:Skills 管理。

项目结构

dsh-ui-preset-enhance/
├─ .github/workflows/ci.yml
├─ assets/                    # README 截图
├─ docs/                      # 设计说明
├─ dsh/                       # 已构建、可直接运行的 DSH 文件
├─ scripts/                   # 构建与 Smoke Test
├─ src/                       # TypeScript / React 源码
├─ INSTALL-GUIDE.md           # 小白安装手册
├─ INSTALL-WINDOWS.cmd        # 双击安装
├─ VERIFY-WINDOWS.cmd         # 双击检查
├─ UNINSTALL-WINDOWS.cmd      # 双击卸载
├─ install.ps1
├─ verify.ps1
├─ uninstall.ps1
├─ package.json
├─ cordis.patch.yml
└─ LICENSE

开发

需要 Node.js 20+。

npm install
npm run typecheck
npm run build
npm run smoke

或者一次完成:

npm run verify

构建脚本只使用 TypeScript,不依赖原生 bundler 二进制;src/client.tsx 是单文件 Client Entry,运行时模块由 DSH 的 Client Module Loader 提供。

问题反馈

提交 Issue 时最好附上:

  • DSH 版本;
  • Windows / macOS / Linux 版本;
  • 安装命令完整输出;
  • 浏览器 Console 的相关红色报错。

请先删除 API Key、Cookie、Token、私有 Prompt、路径中的个人姓名等敏感信息。

License

MIT — 见 LICENSE