dsh-custom-logo：自定义 DeepSeek Harness 左上角品牌标识

前言¶

DeepSeek Harness（DSH）的 Web 界面默认在侧边栏左上角显示 “deepseek harness” 字样。对于需要展示特定项目名称或公司品牌的场景，这是一个痛点。dsh-custom-logo 插件旨在解决这个问题，它允许用户直接在原位替换品牌标识，且不依赖悬浮组件，对界面布局的侵入性极低。

这是什么¶

dsh-custom-logo 是一个独立的 DeepSeek Harness 插件（profile-bundle 类型），由用户 189-sketch 维护。它的核心作用是替换 DSH 默认渲染的 <BrandWordmark> 和 <FishLogo>，支持自定义图片或文本，并通过内联的配置句柄实现无干扰的设置体验。

核心功能¶

该插件提供以下能力：

三种渲染模式
- Default：不进行任何替换，保持 DSH 原始样式。
- Image：上传图片（PNG/SVG/JPG），客户端限制大小 ≤ 256KB。
- Text：输入自定义文本，支持样式调整。
内联配置句柄
- 悬停在左上角的品牌标识上，右侧会出现一个淡入的 ⚙ 符号。
- 点击该符号即可唤起设置面板，操作结束后面板自动关闭。
样式控制
- 对齐方式：支持左对齐、居中、右对齐。
- 字体大小：10-48px 滑块调节，双击滑块可触发“自动适应”模式。
- 颜色选择：仅在文本模式下可用。
持久化与兼容
- 配置通过 localStorage 保存，刷新页面后自动恢复，无需重新登录。
- 折叠安全模式：当 DSH 侧边栏折叠至 rail 状态时，插件会自动移除自定义内容，确保切换按钮不被遮挡。
- Shadow DOM 隔离：设置面板的样式被隔离在 Shadow DOM 中，不会污染 DSH 主界面的样式。

安装与启用¶

通过一行命令即可安装该插件。

dsh plugin --profile web add link:/path/to/dsh-custom-logo

安装后，如果 DSH Web 进程正在运行，需要重启进程或硬刷新浏览器（Ctrl+F5）以清除客户端缓存并加载新插件。

典型用法¶

唤起设置
将鼠标悬停在 DSH 界面左上角的 “deepseek harness” 品牌标识上，直到右侧出现 ⚙ 符号。
选择模式
点击 ⚙ 打开设置面板。在面板中选择模式：
- Default：关闭面板，恢复原始状态。
- Image：点击上传区域，选择本地图片（≤256KB），并设置对齐方式。
- Text：输入品牌文字，设置颜色、字号和对齐方式。
验证效果
配置更改即时生效。为了确保在折叠状态下正常工作，可以折叠侧边栏，检查 rail 上的切换按钮是否清晰可见。
重置
若需恢复默认，可在设置面板中点击 “Reset” 按钮。

注意与限制¶

渲染延迟：DSH 内部渲染机制可能导致品牌按钮在重渲染时短暂消失，插件通过单例模式复用元素来缓解此问题，但首次加载后仍可能出现约一秒的不可见。
存储范围：配置存储在 localStorage 中，按浏览器 profile 隔离，不同浏览器或 profile 之间无法共享。
图片大小：客户端通过 <input type="file"> 进行限制，最大支持 256KB 的图片，超限将被截断。
运行环境：该插件仅运行在浏览器端，不涉及 Node.js 或 SSR 环境。
生产构建：开发模式下可以使用 pnpm run watch，但在生产环境中没有文件监视器，修改源码后必须手动运行 pnpm run build。

总结¶

dsh-custom-logo 是一个轻量级的 UI 定制工具，适合需要在 DSH 侧边栏展示特定品牌信息的开发者。它通过内联配置和 Shadow DOM 技术，在不破坏原有交互逻辑的前提下，提供了灵活的视觉替换方案。

插件目录：dsh-custom-logo - SkillHub
源码仓库：189-sketch/dsh-custom-logo