自定义品牌标识 189-sketch/dsh-custom-logo

dsh-custom-logo

把左上角的 DSH logo（<BrandWordmark> + <FishLogo>）换成你自己的图片或文字 —— 直接嵌在 wordmark 里，不用悬浮挂件。

独立的 DeepSeek Harness（dsh）配置档插件包。把写死的 deepseek harness wordmark 换成你选的图片、文字，或者保留原 logo。配置入口（⚙）内嵌在 wordmark 里 —— 鼠标悬停在 logo 上，入口就出现在右边缘；点它打开设置面板。

dsh-custom-logo 实际效果（把截图放到 docs/screenshot.png，再替换这个 URL）

为什么做这个插件

DSH 默认的 Web UI 在侧边栏左上角固定显示 deepseek harness wordmark。有些用户想在那儿放自己的品牌（公司名、项目代号、logo），但官方没有这个选项。这个插件补上了，而且：

- 不改 DSH 源码
- 不动 wordmark 按钮上「New session」的点击区域
- 不挡住侧边栏折叠后的 rail（切换按钮完全可见）
- 不用悬浮挂件在视口里晃

替换只在 image / text 模式下生效 —— default 模式下原 wordmark 原样渲染。你不配置，插件就等于不存在。

功能

- 三种模式：Default（不改）/ Image（上传 ≤ 256 KB）/ Text
- 内嵌设置入口 —— 悬停 wordmark，⚙ 出现在右边缘，点击即可配置
- 对齐方式，image 和 text 模式都支持：左 / 中 / 右
- 字号，text 模式：10-48 px 滑块，双击「auto」自动匹配原 wordmark 高度
- 取色器，text 模式
- localStorage 持久化 —— 刷新页面后你的选择还在，不用登录
- 侧边栏折叠安全 —— DSH 侧边栏进入 rail 状态时，插件会清掉所有元素，绝不挡住切换按钮
- 设置面板放在 Shadow DOM 里，样式不会渗进 DSH 外壳
- 一行命令安装 / 卸载，用 dsh plugin add

安装

Local development (links the checkout without copying)
dsh plugin --profile web add link:/path/to/dsh-custom-logo

From GitHub (once published)
dsh plugin --profile web add git+https://github.com/<you>/dsh-custom-logo.git

From npm (once published)
dsh plugin --profile web add dsh-custom-logo

如果 dsh web 已经在跑，重启它。浏览器硬刷新（Ctrl+F5）绕过客户端 bundle 缓存。

用法

1. 悬停左上角的 deepseek harness wordmark → 右边缘淡入一个小 ⚙ 入口。
2. 点击 ⚙ → 设置面板打开。
3. 选一个模式：
- Default —— 关掉面板；原 DSH logo 回来
- Image —— 上传 PNG / SVG / JPG（≤ 256 KB），选对齐方式
- Text —— 输入你的品牌文字，选取色、字号和对齐方式
4. 改动立即生效，并自动保存到 localStorage。
5. 折叠侧边栏就能看到侧边轨道；你替换的内容不会挡住切换按钮。

要重置，点击设置面板里的 Reset。

工作原理

DSH 把字标渲染成一个 （见 packages/client/ui-sidebar/src/client/SidebarRoot.tsx）。插件 往这个按钮里追加一个 。CSS 默认隐藏这个 handle；JS 悬停监听器切换内联的 opacity: 0 ↔ 1。

当用户选择 Image 或 Text 模式时，插件还会在 BrandWordmark 的 旁边追加一个 。CSS 通用兄弟选择器规则会在 slot 存在时隐藏原来的 SVG
（[data-clogo-slot] ~ svg { display: none }）。

这两个元素都由客户端 bundle 里的模块级单例持有——paint() 不会在每次 store 变化时重新创建它们。这样即使 DSH 重新渲染侧边栏（对基于 React 的 DSH 来说是真实存在的问题），悬停状态也不会在交互中途丢失。

侧边栏折叠检测

paint() 会测量 [data-clogo-row]（首次绘制时在 DSH 的 .brand
按钮上设置的标记）。如果这一行窄于 90 px，插件就把侧边栏当作已折叠，并移除所有内容——DSH 在轨道状态下已经卸载了整个 .brand 按钮，所以原来的切换按钮有它需要的空间。

为什么不用 DSH 的 ctx.styles.insert？

插件使用 tsdown 的 CSS Modules 内联器（而不是 DSH 的 ctx.styles.insert），原因如下：

- ctx.styles 是 DSH 客户端内置的，但它的 TS 签名位于 DSH 自己的类型声明里；没有 monorepo 类型访问权限的独立插件可以用它，但会失去类型安全
- CSS Modules 让插件能发布单个自包含的 bundle，DSH 的模块表加载它时无需额外的运行时 API 调用
- 文件命名为 *.module.css，这样 tsdown 的内联器才能识别它——普通的 .css 需要 @tsdown/css（一个单独的依赖）

目录结构

dsh-custom-logo/
├── package.json # dsh.bundle.patch + dsh.client declarations
├── cordis.patch.yml # the layer applied to the user's profile
├── tsconfig.json # self-contained (no monorepo paths)
├── tsdown.config.ts # inlines the DSH clientBundle preset
├── README.md
├── LICENSE
├── src/
│ ├── plugin/
│ │ ├── index.ts # Host half: typed apply(ctx: Context)
│ │ └── invariant.ts # dsh-invariants companion (no-op installer)
│ └── client/
│ ├── index.ts # Browser half: paint, store, settings modal
│ └── logo.module.css # CSS Modules — inlined into lib/client.js └── lib/ # build output (pnpm run build) ├── index.js # ESM — Host half ├── invariant.js # ESM — dsh-invariants companion ├── client.js # CJS — browser bundle (window.__ModuleLoader__) └── types/ ├── plugin/{index,invariant}.d.ts └── client/index.d.ts

开发

Install deps
pnpm install

类型检查 + 打包（tsc + tsdown）

pnpm run build

监听模式

pnpm run watch

执行 pnpm run build 后，DSH 会通过模块表加载 lib/client.js 里的产物。

配置

运行时选择会持久化到 window.localStorage，键名是 dsh.custom-logo.v1。状态结构如下： ts { mode: 'default' | 'image' | 'text', imageDataUrl: string, // data URL；仅在 image 模式下使用 text: string, // 品牌字符串；仅在 text 模式下使用 color: string, // 十六进制颜色；仅在 text 模式下使用 align: 'left' | 'center' | 'right', fontSize: number | null // null = 自动适配原始 wordmark 高度 }

这个插件是工作区产物——它不会收到传给 apply() 的 config 参数（那条通道留给动态插件，由 cordis-client-runner 使用）。部署默认值写在 src/client/index.ts 里。

卸载 sh
dsh plugin --profile web remove dsh-custom-logo

然后重启 dsh web。插件只在用户主动重置时才清除自己的 localStorage 条目——卸载后它依然保留，方便你重新安装。

已知限制

- DSH 内部 logo DOM 变化：DSH 重渲染 sidebar 时， 可能被 unmount 再重新 mount。paint() 通过 module-level singleton 复用 handle 元素并重新 attach，但首次延迟后用户可能看到一秒的不可见。
- localStorage scope：状态按浏览器配置档隔离，多配置档 / 多浏览器不共享。
- Image size：客户端 限制 256 KB（用 FileReader 转 data URL 内嵌）。
- No SSR / no Node.js runtime：仅浏览器侧运行；Cordis 宿主侧只是 no-op。
- No file watcher in production：修改 src/ 后必须 pnpm run build 一次；watch 仅用于开发。

License

MIT