dsh-ui-beautify

给 DeepSeek Harness（DSH）Web UI 换一套好看的外观：一键切换配色预设、设置整页背景图、VSCode 式卡片布局（面板停靠/浮动/标签页宿主），全部可撤销、可记忆。

✨ 功能特性

• 配色预设：默认 / 深海蓝 / 暖沙 / 松石绿 四套配色一键切换，覆盖主区域、侧边栏、文字颜色、消息气泡与发送按钮（浅色/深色模式各一套值）。
• 全局强调色跟随：工作区文件夹图标、会话加载螺旋、「对话 / 轨迹」标签高亮、Deep Diving 状态流光、超链接、轨迹时间线等所有蓝色系元素，都会随预设变成对应强调色。
• 整页背景图：选择本地图片作为整个 Web UI 的背景（侧边栏与主区都显示），自带半透明可读遮罩；上传时自动压缩。
• 卡片布局（v1.4 新增）：侧栏 / 对话 / 停靠卡三张卡片可拖出即浮动（毛玻璃半透明，可四边四角缩放）、拖到边缘停靠区吸附回位、拖拽收起图标栏；缩放手柄双击重置默认宽度；停靠卡支持 右列 / 底部 / 浮动 三种形态。
• 标签页面板宿主（v1.4 新增）：右列可承载插件面板（标签页切换 / 关闭 / 浮动 / 回停靠），为后续插件（如文件管理器）提供统一停靠入口（ctx.dock 面板 API）。
• 互不干扰：设好背景图后切换配色预设不会覆盖图片；图片只由「清除」移除。
• 全部可撤销：「清除」「重置全部」「布局模式切回经典」即时还原；卸载插件后不留任何残留样式。
• 设置自动记忆：配色、背景图、布局（卡片位置 / 宽度 / 浮动 / 面板开关）保存在浏览器本地，重启 DSH 后自动恢复。

安装

前置要求

• DSH 0.1.0-rc.6（本插件针对该版本的 Web 客户端编写，见「兼容性」）
• 官方安装方式需要 pnpm（npm install -g pnpm）

官方方式（推荐）

dsh plugin --profile web add github:Zalpha263/dsh-ui-beautify

• 发布到 npm 后可直接：dsh plugin --profile web add dsh-ui-beautify
• 装完重启 DSH，然后打开「设置 → 外观美化」即可使用
• 升级 / 卸载：dsh plugin --profile web update/remove dsh-ui-beautify

- insert:
    - id: ui-beautify
      name: dsh-ui-beautify

使用说明

打开「设置 → UI设置」（外观美化与布局设置已合并于此）：

卡片布局速览

• 拖出即浮动：按住侧栏 / 对话 / 停靠卡顶部抓取条拖动，卡片立刻脱离原位跟随光标；松手在停靠区（左缘 / 中间 / 右缘 / 底部）= 吸附回位，否则 = 就地浮动；Esc 取消。
• 缩放：浮动窗四边 / 四角拖动缩放；停靠态手柄拖动调宽（拖到最左 <140px 收起图标栏 / 关闭停靠卡），双击手柄重置默认宽度。
• 面板宿主：打开面板（如未来的文件管理器）后，右列出现标签页条，可切换 / 关闭 / 浮动 / 回停靠。
• 设置避让：浮动状态下打开设置窗口，设置保持全屏居中、不被遮挡。

提示：配色预设不仅改变背景与气泡，还会把 DSH 界面中的蓝色强调元素（如「对话 / 轨迹」高亮、超链接、文件夹图标、Deep Diving 状态）统一成预设的强调色；点「默认」即可恢复 DSH 原生蓝色。

设置保存在浏览器 localStorage 中：刷新页面、重启 DSH 都会自动恢复；清除浏览器站点数据会重置。

卸载

dsh plugin --profile web remove dsh-ui-beautify

重启 DSH 后插件不再加载，页面样式全部还原，无残留。

常见问题（FAQ）

兼容性

• 目标版本：DSH 0.1.0-rc.6，Web 界面（Windows / Linux / macOS）
• 部分样式选择器（消息气泡、发送按钮、侧边栏淡出层等）针对该版本的客户端产物编写，DSH 大版本升级后可能失效，升级后请在「外观美化」里复核效果
• 背景图以压缩后的 data URL 存在浏览器 localStorage（约 5MB 配额内）；超大图片上传时会自动压缩到最长边 ≤2560px

开发者

• 单文件实现：lib/client.js（Host 半区 lib/index.js 为空壳，仅用于注册）
• 调色板在 lib/client.js 的 PRESETS 常量中，改完刷新页面即可生效，无需构建
• 本包是手写 loader 格式（__ModuleLoader__.load），不是 tsdown 产物
• 修改提交后，已安装用户通过 dsh plugin --profile web update dsh-ui-beautify 升级

版本历史

• v1.5.6：停靠卡改用侧边栏同款底色（--dsw-specific-sidebar-fill）——与对话栏（bg-base）形成与「侧栏↔对话栏」完全相同的背景色差，接缝不再依赖线的可见度。详情面板在卡片模式下强制透明、空详情占位提示不再自带底色（保持单层，无半透明叠加变暗问题）；border-l3 分隔线保留。浮动态停靠卡仍为毛玻璃样式。
• v1.5.5：接缝线提亮——侧栏右缘与停靠卡接缝（左缘/顶缘）统一改用 border-l3（深色 0.16 白 / 浅色 0.12 黑，DSH 原生强分隔档）。此前用 border-l2 单线（0.12/0.10）在相同底色（对话栏与停靠卡均为 bg-base）上肉眼不可见——侧栏接缝之所以"有颜色"是 sidebar-fill 与 bg-base 的背景色差，并非那条线。两侧分隔线现为同一 token、同一宽度，清晰可见。
• v1.5.4：接缝线改由停靠卡直接绘制（右停靠→左缘线，底部→顶缘线），颜色统一为 border-l2（与侧栏右缘同色）。回退 v1.5.3「对话卡承担接缝线」的方案：content-box 模型下对话卡一旦缺线会把内容压缩 1px 露出透明缝，且该方案依赖新增 frame 属性，链路脆弱。
• v1.5.3：统一卡片描边体系（替代 v1.5.2 被撤回的色带方案）——几何探针确认吸附底部时对话列/停靠卡/输入区接缝均为 0px（无缝隙）。v1.5.4 已改为更可靠的停靠卡绘制方案。
• v1.5.2：已撤回（::after 密封带方案被判定为以色带掩盖问题，不符合要求）。
• v1.5.1：修复「右侧栏颜色太深」「吸附底部时对话卡不透明度变化」——两者同源：背景图模式下 bg-base 是 85% 半透明色，而 v1.4.6/1.4.9 在卡片元素上额外铺了同色底色，与卡片内部（对话根节点 / 详情面板）自带的 bg-base 叠加成两层 → 停靠卡比对话栏深、吸附底部时对话栏整体变暗。现改为：①对话列不再铺色（出厂根节点底色足够，行高 calc(100% - <高>px) 保证接缝精确）；②停靠卡不再铺色（详情面板自带底色）；③「无活动会话」占位提示自带单层 bg-base 底色，空详情态与其它卡片观感一致。
• v1.5.0：输入区观感修正——移除 DSH 出厂在输入栏上方绘制的 36px 渐隐带（transparent → bg-base）：深色主题下它表现为输入框上方一条生硬的黑色渐变。卡片模式下输入区改为干净悬浮，不再有渐变带。
• v1.4.9：修复两个底部/停靠卡观感 bug——
  1. 停靠卡吸附底部时「对话栏之间出现空隙」+ 阴影带不协调：v1.4.7/1.4.8 用「对话列下方 8px 同色阴影带」兜底接缝，但该带在停靠卡内容为空时（见下）会裸露成一条生硬色带。现改为机制级修复：①确定性行高 calc(100% - <高度>px) 保留（接缝精确）；②停靠卡在停靠态一律铺 bg-base 底色（长写 background-color，不碰背景图）——彻底杜绝透明列露出；③移除 8px 阴影带，接缝处只剩 1px 原生 border-l2 分隔线。
  2. 归档会话后右侧停靠栏被「清空」：DSH 的 details 槽是 scope:"session"——没有活动会话时该槽渲染为空，停靠卡因此变成一块透明空白（看起来像被清空）。现为空的详情槽渲染占位提示（「无活动会话」居中弱化文字），停靠卡保持完整面板外观，归档 / 新建会话不再出现大变化。
• v1.4.8：修复 v1.4.7 的回归——底部吸附时整页背景图消失。根因：v1.4.7 在 frame 上用了 background 简写属性，把同一元素上的 background-image（背景图绘制点）重置为 none。现改为：①frame 不再绘制背景；②对话列改用 background-color 长写（不碰背景图）+ 列下方 8px 同色阴影带兜底（无缝隙时不可见，被面板盖住）；③兜底规则加 :not([data-vsc-float])，避免误伤浮动态对话卡。底部吸附时背景图恢复正常显示。
• v1.4.7：底部吸附衔接根治（二）——①底部态第一行改为确定性行高 calc(100% - <高度>px)：对话根节点出厂 height:100% 不再依赖 1fr 轨道的解析结果，必然精确填满整行，从机制上消灭列底留白；②底部态 frame 本身铺应用底色——即使解析仍有偏差，露出的窄带也是同色背景，接缝处只剩干净的一条 1px 分隔线；③显式固定 gap:0 / align-content:stretch，排除任何默认间距干扰；④内置临时几何探针（localStorage['dsh.layout-studio:debug']='1' 开启：红/黄/绿 1px 描边 + 坐标与间隙像素读数），万一修复后仍异常可凭读数一次性定位缝隙位置。
• v1.4.6：底部吸附衔接根治——对话列在底部吸附态下①铺应用底色（杜绝透明底露出）、②强制对话根节点 flex:1 填满列高（出厂 height:100% 在 1fr 行高下可能解析为内容高度导致列底留空）、③分隔线由面板顶部 1px border-l2 承担——衔接处恒为干净的一条线。
• v1.4.5：底部吸附分隔线改为 dsh 原生设计——分隔线画在对话列底边（1px border-l2，与侧栏 border-right、右列 border-left 同构），位于行边界上，彻底消除底部面板与对话栏之间的发丝级空隙。
• v1.4.4：停靠卡交互修正——①删除拖拽停靠卡缩放手柄时弹出的「右侧/底部/浮动/关闭」悬浮菜单（吸附/浮动改由拖拽停靠区完成）；②修复缩放松手回弹（移除松手时的宽度吸附回弹逻辑，宽度按拖拽结果保留，<140px 收起逻辑保留）；③修复停靠卡吸附底部时与对话栏衔接处的空隙（输入框底部 8px 内边距在底部吸附态下归零，衔接齐平）。
• v1.4.3：设置面板选中态与原生一致——「外观美化 / 布局」的选中胶囊改用与设置面板其它选中项相同的样式（中性浅底 bg-module-platform + 中性描边 + 正常文字色），不再使用彩色实心/白字；修复 v1.4.2 只改了外观胶囊、漏掉布局胶囊的问题。
• v1.4.2：设置面板完全隔离——「设置 → UI设置」窗口内全部 16 个受配色预设影响的 token（背景 / 边框 / 文字 / 强调色）固定为出厂默认值（浅色/深色各一套），设置内的字体、颜色、高亮不再随预设变化；同时修复深色模式下选中胶囊「白底白字盖住文字」的问题（选中态改用出厂深蓝 deepseek-500，两种模式均可读）。
• v1.4.1：设置面板高亮恢复出厂——「设置 → UI设置」窗口内的选中态 / 开关 / 强调高亮固定为 DSH 出厂默认色（浅色/深色各一套），不再受「配色预设」影响；主界面的预设效果不变。
• v1.4.0：新增 VSCode 式卡片布局引擎——
  • 三卡片（侧栏 / 对话 / 停靠卡）：拖出即浮动（毛玻璃半透明 + 背景透出）、拖到边缘停靠区吸附回位、浮动窗四边四角缩放、拖拽收起图标栏、手柄双击重置宽度、ESC 取消拖拽；
  • 停靠卡支持 右列 / 底部 / 浮动 三形态，设置窗口全屏避让；
  • 标签页面板宿主 + ctx.dock 面板 API（registerPanel/openPanel/closePanel/floatPanel/dockPanel），为插件提供统一停靠入口；
  • 布局状态（位置 / 宽度 / 浮动 / 面板开关）全部持久化；
  • 设置合并：外观美化 + 布局 统一收纳进「设置 → UI设置」。
• v1.3.3：修复「背景图被悄悄清除」的真正根因——saveState 写入失败（localStorage 配额超限）时原本会用 bg: null 覆盖已保存的背景图，导致每次恢复/热重载时大图写回失败即被永久清除；现改为失败时保留旧图、仅更新预设，并自动降质（≤1400px / 0.72）重试持久化。
• v1.3.2：修复「重启 DSH / 重载插件后背景图片丢失」——插件卸载清理时不再写入 localStorage（clearBackgroundImage 增加持久化开关，仅用户主动「清除 / 重置」才写存储）；恢复顺序改为先恢复背景图再应用预设，避免覆盖。
• v1.3.1：修复「会话列表加载螺旋仍为蓝色」——会话行左侧的进行中状态动画（StateDot）直接引用静态 token --dsw-static-deepseek-450，现一并纳入预设覆盖。
• v1.3.0：全局强调色跟随预设——工作区文件夹图标、「对话 / 轨迹」标签高亮、Deep Diving 状态流光、超链接、轨迹时间线等蓝色元素统一变为预设强调色（浅色/深色模式均生效）。
• v1.2.0：支持 dsh 官方 bundle 安装（dsh.bundle.patch + 自带 cordis.patch.yml），dsh plugin --profile web add github:Zalpha263/dsh-ui-beautify 一键安装，不再需要手动两份副本。
• v1.1.2：修复「重启后背景图片消失」——大图 base64 超出 localStorage 配额被静默丢弃；上传时自动压缩（最长边 ≤2560px，JPEG 0.85），保存失败时输出控制台警告。
• v1.1.1：修复「设置背景图片后切换配色预设会覆盖图片」——预设应用后重新注册背景遮罩 token，图片仅由「清除」移除。
• v1.1.0：设置自动记忆，重启后自动恢复。
• v1.0.0：初始版本——配色预设（默认 / 深海蓝 / 暖沙 / 松石绿）+ 整页背景图 + 全部可撤销。

License

MIT