dsh-ui-beautify

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

✨ 功能特性

• 四套配色预设（默认 / 深海蓝 / 暖沙 / 松石绿），浅色 / 深色模式各有适配，一键切换；全局强调色（文件夹图标、加载螺旋、标签高亮、链接等）随预设变化；
• 整页背景图：本地图片一键上传（自动压缩 + 可读遮罩），侧边栏与主区都显示；
• VSCode 式卡片布局：侧栏 / 会话 / 停靠卡三张卡片，可拖出浮动（毛玻璃）、吸附到上 / 下 / 左 / 中 / 右任一区域；吸附时原区域卡片自动被挤成浮动，区域空出后自动回位；
• 缩放与折叠：停靠手柄拖宽（双击重置默认宽度）、浮动窗四边四角缩放；侧栏拖窄到 <240px 自动折叠成图标栏；中间栏（会话区）最小保底 480px，两侧卡片放大不会把它挤没；
• 插件面板（统一插件入口）：所有注册插件自动出现——卡片模式占停靠卡、经典模式为右侧停靠面板（可拖宽 / 标题拖出浮动），插件列表（单行芯片横向滚动、拉高分隔条变网格、溢出菜单带搜索）+ 标签页宿主，标题栏「🧩 插件面板」按钮一键开合；
• 设置自动记忆：配色、背景图、布局（位置 / 宽度 / 浮动 / 面板开关）保存在浏览器本地，重启自动恢复；
• 完全可撤销：「清除」「重置」「切回经典模式」即时还原，卸载无残留。

安装

前置要求

• DSH 0.1.1-rc.2 及以上（针对当前 Web 客户端编写，见「兼容性」）
• 官方安装方式需要 pnpm（npm install -g pnpm）

官方方式

# 发布态（推荐，钉死提交防回退）：
dsh plugin --profile web add github:Zalpha263/dsh-ui-beautify#<完整40位commit>

# 开发态（本地源码目录）：
dsh plugin --profile web add file:<你的源码路径>

• 装完重启 DSH，打开「设置 → UI设置」即可使用
• 升级：推送新提交 → 把 profile 的 package.json 中钉住的提交号改为新提交（无 BOM）→ dsh plugin --profile web install → 重启 / 硬刷新
• 卸载：dsh plugin --profile web remove dsh-ui-beautify

使用说明

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

卡片布局速览

• 拖出即浮动：按住卡片顶部抓取条（或插件面板的拖条 / 标题栏）拖动，松手在停靠区（上 / 下 / 左 / 中 / 右）= 吸附回位，否则 = 就地浮动；Esc 取消。
• 缩放：浮动窗四边 / 四角拖动缩放；停靠态手柄调宽（侧栏拖到 <240px 折叠成图标栏、停靠卡拖到 <140px 关闭），双击手柄重置默认宽度。
• 布局保底：中间栏（会话区）最小 480px；两侧卡放大上限自动为"窗口 − 对面卡 − 480"，任意拖动不会溢出或挤没会话区。
• 插件面板：卡片模式占停靠卡、经典模式为右侧停靠面板（左边缘拖宽、标题拖出浮动 / 回停靠 / × 收起全部）；顶部拖条悬停显示小横条 + 高亮；插件列表默认单行芯片（横向滚动、拉高分隔条变网格、溢出「···」菜单带搜索），打开的插件显示为标签页（切换 / 关闭 / 浮动）。
• 设置避让：浮动状态下打开设置窗口，设置保持全屏居中、不被遮挡。

提示：配色预设不仅改变背景与气泡，还会把 DSH 界面中的蓝色强调元素统一成预设的强调色；点「默认」即可恢复 DSH 原生蓝色。

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

卸载

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

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

常见问题（FAQ）

兼容性

• 目标版本：DSH 0.1.1-rc.2，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 产物
• 布局常量：CONV_MIN_W（中间栏最小宽度 480）、FLOAT_MIN_W/FLOAT_MIN_H（浮动卡最小尺寸）、SIDEBAR_RAIL（折叠栏宽 56）

版本历史（最新在前）

• v1.12.9：修复缩放上限溢出（上限 = 窗口 − 对面固定列 − 480，grid 不再溢出）；被挤成浮动的卡片在区域空出后自动回位
• v1.12.8：中间栏最小宽度 480 保底；侧栏拖窄 <240px 折叠成图标栏；两侧卡上限联动（frame − 480）
• v1.12.7：两侧卡缩放下限恢复 120、恢复停靠卡拖窄 <140px 关闭（插件面板可缩到最窄）
• v1.12.6：中间栏最小宽度 320 保底（防止被两侧卡挤没；v1.12.8 提至 480）
• v1.12.4：布局重置修复（面板状态自愈）
• v1.12.3：经典模式切换残留修复（卡片网格残留导致中间列卡死）
• v1.12.2：浮动停靠卡最小宽度 360 → 280
• v1.12.0：经典三栏插件面板（面板作为右侧列渲染，左边缘拖宽 / 拖出浮动）+ 缩放重构（停靠卡上限放宽、8 向缩放手柄）
• v1.11.1：修复插件面板崩溃（CloseIcon/FloatIcon props 解构错误）
• v1.11.0：清理重构 + 共享过渡常量
• v1.10.x：面板打磨——关闭按钮尺寸系列优化、列表 / 关闭 UX、对话框圆角恢复
• v1.9.x：UI 归一化（对齐 DSH 设计系统 / Apple HIG）、设置窗口置顶、浮动卡点击置前、面板间距修正
• v1.8.x：插件面板统一（launcher + 标签页宿主，两种模式共用）、吸附区优化（缩小 10pp）、UI 层级修复、拖拽会话助手重构、tooltip 误隐藏修复
• v1.7.x：五区域通用吸附（任意卡停靠上 / 下 / 左 / 中 / 右）、输入框过渡修复、吸附提示优化
• v1.6.0：健壮性修复（停靠位置白名单、右停靠错位、frame 重挂载自愈）
• v1.5.x：接缝线体系与观感修正
• v1.4.x：卡片布局引擎上线（三卡停靠 / 浮动 / 标签面板宿主、拖拽交互修正）
• v1.3.x：设置记忆完善（背景图持久化、配额超限自动降质、全局强调色）
• v1.2.0：支持 dsh 官方 bundle 安装方式
• v1.1.x：背景图持久化修复（自动压缩上传、切换预设不再覆盖、重启不丢失）
• v1.0.0：初始版本——配色预设 + 整页背景图 + 全部可撤销

License

MIT