为 DSH 设置侧边栏添加自定义图标,并开放 keyed `settings.section.icon` 槽位供第三方设置分区注册图标。
安装
# npm 包(预构建)
dsh plugin --profile web add dsh-ui-settings-icons
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:suntianc/dsh-ui-settings-icons
装任何插件都等于在你的机器上跑第三方代码,权限和你本人一样大——能读你的文件、用你的凭据、访问网络,工具审批管不到它。GitHub 来源的插件还会在安装时执行构建脚本——pnpm 默认拦截,所以安装可能停在 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED 或 ERR_PNPM_IGNORED_BUILDS;dsh 会打印出需要添加的确切键名,把它加进该 profile 的 pnpm-workspace.yaml 的 allowBuilds 下,重跑一次即可装上。放行构建本身就是一次信任判断:请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README
English | 中文
当前版本:v0.1.3-alpha.5
这是一个自包含的 DeepSeek Harness 界面扩展插件。它为 DSH 的设置导航侧边栏增加了自定义图标能力,开放了全新的 keyed 图标槽位(settings.section.icon)供第三方插件使用,并为常见的扩展包内置了精美矢量图标预设。
功能
Keyed 图标槽位 (settings.section.icon)
- 在设置面板外壳下声明了全新的 keyed 子槽位
settings.section.icon。 - 任何通过
settings.section注册设置分区的第三方插件,均可通过匹配自身分区的id注入自定义 SVG 或 React 图标组件。 - 响应式动态联动:图标更新深度绑定 SlotCore 账本,无需重启界面即可动态响应变化。
内置图标预设与优雅回退
- 为以下常见功能分区内置了精美的 16x16 矢量图标:
codex-auth/ GPT Auth(OpenAI / ChatGPT 官方徽标)antigravity-auth(Google Antigravity / Gemini 星芒徽标)- DSH 原生分区:
models、agent-presets、plugins
- 当某个分区未提供自定义图标且不匹配任何预设时,自动回退到 DSH 标准齿轮图标(
IconSettingsOutline16)。
完整的交互与无障碍对齐
- 与 DSH 官方默认设置面板保持 100% 的视觉风格和交互体验对齐。
- 完整支持键盘快捷操作(
Escape键关闭并将焦点还原到触发按钮)、ARIA 对话框无障碍属性(aria-modal、aria-labelledby、aria-current)、侧边栏宽/窄展开自适应、当前连接恢复/重连反馈,以及原生配置文件打开操作(settings.action/open-document)。
零冲突的 Cordis 插件组合
- 通过
cordis.patch.yml替换官方默认的ui-settings-general,彻底避免子槽位重复声明冲突。 - 严格遵循 DSH 的生命周期模型:所有子槽位、字典注册与状态订阅在插件卸载时均会干净释放。
接入第三方插件图标
如果你正在开发 DSH 插件,并希望为自己的设置分区提供专属导航图标:
import type { Context } from '@deepseek-ai/cordis'
import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
import type {} from 'dsh-ui-settings-icons/client'
import { MyPluginIcon } from './MyPluginIcon.tsx'
import { MySettingsPanel } from './MySettingsPanel.tsx'
export function apply(ctx: Context): void {
// 1. 注册设置分区主体内容
ctx.slots.inject('settings.section', () => ctx.slots.register({
name: 'settings.section',
id: 'my-plugin',
order: 50,
label: () => 'My Plugin',
}, MySettingsPanel))
// 2. 注册导航图标(key 对应 settings.section 的 id)
ctx.slots.inject('settings.section.icon', () => ctx.slots.register({
name: 'settings.section.icon',
key: 'my-plugin',
}, MyPluginIcon))
}
环境要求
- DeepSeek Harness
0.1.2-alpha.5(已验证的包基线)。 - Node.js
^22.19.0或>=24.0.0。
插件 0.1.2 及更早版本面向已退役的 DSH 0.1.1-rc.1 客户端拓扑,无法在 0.1.2-alpha.5 上加载。
从 npm 安装(推荐)
npm 包已包含预构建的 Host 与浏览器 bundle,不需要安装期构建权限:
dsh plugin --profile web add dsh-ui-settings-icons@0.1.3-alpha.5
重启 dsh web,打开设置即可体验自定义图标。
安装预构建 Release
dsh plugin --profile web add https://github.com/suntianc/dsh-ui-settings-icons/releases/download/v0.1.3-alpha.5/dsh-ui-settings-icons-0.1.3-alpha.5.tgz
重启 dsh web 并打开设置。
从 GitHub 源码安装
dsh plugin --profile web add github:suntianc/dsh-ui-settings-icons
Git 依赖会通过包内 prepare 脚本从源码构建。pnpm 10+ 默认阻止该脚本,因此第一次安装可能打印 allowBuilds 键并停止。把 dsh 输出的完整键 加到 ~/.dsh/profiles/web/pnpm-workspace.yaml 的 allowBuilds 下,再重新执行安装。只应在审查并信任源码后授权。
需要可复现安装时,固定 release tag 或 commit:
dsh plugin --profile web add github:suntianc/dsh-ui-settings-icons#v0.1.3-alpha.5
从 tarball 安装
git clone https://github.com/suntianc/dsh-ui-settings-icons.git
cd dsh-ui-settings-icons
pnpm install
pnpm pack
dsh plugin --profile web add ./dsh-ui-settings-icons-0.1.3-alpha.5.tgz
升级
先停止正在运行的 dsh web,再将 Web Profile 更新到当前版本:
dsh plugin --profile web add dsh-ui-settings-icons@0.1.3-alpha.5
dsh plugin --profile web list
列表显示 dsh-ui-settings-icons@0.1.3-alpha.5 后,重新启动 dsh web 并刷新浏览器。
Host 配置
能力包 patch 替换了原版的 ui-settings-general 行:
| 行 | Export | 作用 |
|---|---|---|
ui-settings-general(禁用) |
@deepseek-ai/dsh-client-ui-settings-general |
禁用以避免子槽位重复声明冲突 |
ui-settings-icons |
dsh-ui-settings-icons |
增强版设置面板外壳,提供图标槽位与预设 |
开发
pnpm install
pnpm run check
pnpm run build 生成:
lib/index.js:Host 插件入口;lib/invariant.js:Slot 常量伴侣模块;lib/client.cjs:兼容 Loader、内联 CSS Modules 的浏览器插件;lib/types/**:类型声明。
友情链接
链接
同类插件
zhu1090093659/dsh-web#packages/dsh-task-board★ 6885
侧边栏多列任务看板:卡片交给真实 DSH 智能体会话执行,支持 cron 定时(Host 侧到点执行,关浏览器也生效)。
zhu1090093659/dsh-web#packages/dsh-web-all★ 6885
DSH Web UI 插件与皮肤合集:任务看板、git 图、右侧面板、远程移动端 UI、桌宠、实时 token 统计与皮肤中心。
omdsh-dev/DSH-better-sidebar★ 3338
侧边栏完整工作台:内置文件渲染编辑、终端、Git 与子代理,支持三方插件注册新 Tab。
ccch1mneyyy/dsh-TUI★ 2837
Claude Code 风格全屏终端 UI:像素鲸鱼顶栏、实时工作状态行、思考流式展开。
MeteorNOX/DeepSeek-Balance-Whale-Widget★ 1726
右下角常驻的小鲸鱼余额挂件:显示余额、今日已用、每轮对话消耗与随机台词,带音效与设置菜单。
Devin-AXIS/deepseek-design#deepseek-idesign★ 722
可视化设计工作室,支持网站、App 原型、海报、信息卡、报告和杂志的模板创建、元素编辑、选区级 AI 草稿衔接与导出。
社区评论
评论公开保存在 GitHub Discussions。加载评论会连接 GitHub 和 Giscus;发表内容需要 GitHub 账号。