dsh-web-ui-skin

田园小屋皮肤（Pastoral Cottage Skin）—— 面向 DeepSeek Harness Web GUI（dsh web）的纯 UI 换肤插件。

功能

壁纸与整体氛围

• 3840x2160 田园风格壁纸全屏铺底，自适应缩放：图片比例接近屏幕时 cover 铺满，竖图/超宽图自动切 contain 完整显示、不裁剪
• #root / 布局 frame 全透明，壁纸完全透出；明暗主题自动适配
• 天空蓝品牌色、柔和边框、细滚动条；tooltip 深底白字

壁纸设置卡片（dsh rc.7 设置页扩展）

• 在 GUI 设置 → 插件 → 插件配置 页新增「壁纸」卡片（与内置 shell/agent-loop/web-search 卡片同款可折叠外观、暂存式保存/放弃、未保存徽章）
• 选择本机图片：用浏览器 File System Access API 弹系统文件对话框，文件原地使用、零拷贝（不复制进 DSH）；句柄持久化在浏览器 IndexedDB，重启后自动恢复；仅 Chrome/Edge 支持，其他浏览器不显示该入口
• 移除本机图片：清除句柄，回退到 URL 设置或内置壁纸
• 自定义壁纸 URL：手动填远程图片地址；来源优先级 = 本机图片 > URL > 内置壁纸
• 设置通过宿主 ctx.settings 持久化（cottage 命名空间），改动即时生效、无需重启
• API：/plugins/@crack/dsh-web-ui-skin/api（GET/POST /config）
• 要求 dsh ≥ rc.7（设置卡片机制在 rc.7 引入）；本机图片选择要求 Chromium 内核浏览器

面板与透明度

• 中央消息面板：与输入框同宽（780px）居中、85% 不透明、直角，左右边缘 2px 渐变淡出，与壁纸平滑衔接
• 顶部标题栏、侧边栏、输入区（统计条 + 输入卡）统一使用 --dsw-specific-input-major（85%），透明度一致
• 消息内容保持 748px 阅读宽度

滚动与输入区布局

• 输入框座位整体移出滚动容器：消息滚动在输入框顶部截断，文本不会从输入框后面穿过
• 会话切换自动滚动到底部；加载历史/新消息时保持底部
• 自绘"回到底部"按钮：水平居中于面板、位于输入框上方，滚离底部自动出现，点击平滑回底
• 保留 dsh 原生滚动监听，流式输出自动跟随

特殊状态

• 新建对话（hero 欢迎态）：解除面板约束，恢复全宽布局，标题与输入框居中悬浮于壁纸
• 轨迹页（点击"轨迹"后展示的一切，含弹层/菜单）：保持 dsh 默认外观（明暗主题均生效）
• 会话统计条加宽至与输入框同宽，完整显示轮次/步数/耗时等指标
• 侧栏会话列表底部渐隐条移除

归档会话管理（皮肤扩展）

• 侧边栏"添加工作区"按钮右侧新增 📦 归档入口
• 面板列出全部归档会话（标签 = 工作目录名，时间 = 创建时间）
• 分组与排序跟随原生"视图选项"（按工作区/单列、按时间/手动），分组可折叠
• 每行 hover 出现三点菜单：重命名 / 还原 / 删除
  • 重命名：与工作区会话重命名一致的原生弹窗——自动聚焦全选、中文输入法保护、Enter 确认、Escape/遮罩关闭、错误内联提示
  • 还原（unarchive）：回到原工作区位置
  • 删除：与工作区一致的原生确认弹窗（红色危险按钮 + 后果说明 + 进行中状态），移除日志文件，不可恢复
• dsh 原生只有归档能力（archiveSession），本插件补齐了原生没有的 重命名 / 恢复 / 删除 操作
• API：/plugins/@crack/dsh-web-ui-skin/api（GET /archived、POST /rename-session、POST /unarchive、POST /delete-session）

输入框 @ 文件提及（皮肤扩展）

• 输入框输入 @ 打开文件/目录候选菜单（复用 dsh 原生触发管线，与 / 命令菜单同源）
• 目录可逐级进入；输入关键字（如 @ass）递归搜索当前工作目录（跳过 node_modules 等），长名称不截断，菜单宽度与 / 菜单一致
• 选中后插入真实文本 @相对路径：光标对齐、宽度自适应；在提及末尾按 Backspace 一次性删除整个提及
• API：/plugins/@crack/dsh-web-ui-skin/api（GET /mention/files）

安装

插件通过符号链接安装到 dsh web profile：

# 1. 链接安装（一次性）
dsh plugin --profile web add "link:E:\path\to\dsh-web-ui-skin"

# 2. 在 profile patch 中注册插件行
#    编辑 C:\Users\<you>\.dsh\profiles\web\cordis.patch.yml，追加：
#    - insert:
#        - id: ui-skin-cottage
#          name: '@crack/dsh-web-ui-skin'

# 3. 保存后 dsh 自动热重载（boot HMR 重读 patch），无需重启

开发

需要 Node + pnpm；dsh 运行时与 devDependencies 均需 0.1.0-rc.7（设置卡片为 rc.7 新能力）。

pnpm install          # 安装构建链（typescript / tsdown）
pnpm run build        # 一次构建：tsc(host) + tsc(client) + tsdown
pnpm run watch        # 监听模式：改 src/ 自动重建
pnpm run typecheck    # 类型检查

• 编辑 src/client/cottage.css（样式）或 src/client/index.ts（浏览器端逻辑）
• 替换 assets/cottage-bg.jpg（壁纸原图，由 host 路由 serve）
• 构建完成后浏览器自动热替换（client-hmr，无需刷新/重启）

卸载

1. 删除 cordis.patch.yml 中的 ui-skin-cottage 注册行
2. 重启 dsh web
3. （可选）dsh plugin --profile web remove @crack/dsh-web-ui-skin

项目结构

dsh-web-ui-skin/
├── src/index.ts                    # host 面：注册 bg.jpg / api 路由 + cottage 设置命名空间
├── src/client/index.ts             # 浏览器端逻辑（apply）+ 配置实时应用
├── src/client/settings-card.tsx    # 设置弹窗壁纸卡片（可折叠外壳 + 本机图片/URL）
├── src/client/local-wallpaper.ts   # File System Access API 零拷贝本机图片（IndexedDB 句柄）
├── src/client/archive.tsx          # 归档视图 React 组件（原生 Modal/Button 复用）
├── src/client/cottage.css          # 皮肤 CSS 源文件（构建时注入）
├── assets/cottage-bg.jpg           # 壁纸原图（host 路由 serve）
├── scripts/cottage-inline-plugin.mjs  # tsdown 插件：内联 CSS
├── scripts/dev.mjs                 # watch 并行构建
├── tsconfig.json / tsconfig.client.json  # host/client 双 program
├── tsdown.config.ts                # client bundle 协议构建
├── lib/client.js                   # 浏览器端 bundle（已构建，clone 即用）
├── lib/index.js                    # 宿主端入口
├── cordis.patch.yml                # 插件自带注册 patch（参考）
├── skin.json                       # 皮肤元数据
└── package.json                    # dsh.client 声明（devDeps 钉定 0.1.0-rc.7）

图片来源与版权

• 壁纸：《田园小屋风景》4K（3840x2160），来源于 彼岸图网（原文页面）
• 彼岸图网声明：壁纸图片资源来源于互联网和网友分享，请勿用于商业用途，图片版权归原创作者所有
• 本插件仅供个人学习与使用，禁止任何商业用途；如需商用或分发，请自行替换为你拥有版权的图片
• 如涉及侵权，请联系原作者或彼岸图网（客服QQ55346968）处理，作者会第一时间移除相关资源

说明

• 纯 UI 换肤，不修改 DSH 自带代码；归档弹窗与工作区 UI 像素级一致
• 壁纸为个人图片，如用于分发请替换为你拥有版权的图片
• DSH 版本升级若改变 token 名或组件结构，需同步微调皮肤 CSS