DeepSeek Harness 自定义主题技能
目标：通过多轮对话收集需求 → 确认方案 → 直接实施 → 验证交付，让任何用户都能快速自定义桌面版外观。因为已完整迭代过主题，内部结构、图标位置、生效机制全部已知，实施阶段无需重新勘察。
0. 默认主题（重要概念）
"默认主题" = 本技能 templates/ 打包的当前主题，包含：
- 绿色系换肤（浅色淡绿白 / 深色墨绿黑，全部设计令牌）
- 背景壁纸（dist\assets\background.jpg，半透明蒙版 + 聊天页透图）
- 手写字体 JasonHandwriting2（font-fix.js 检测适配，中文回退雅黑）
- 侧边栏电子养鱼缸（8 条鱼、喂食/饥饿/心情、会话标题鱼）
- 卡通设置图标（太阳花齿轮+表情；发送按钮保持原版）
- 剪贴板降级补丁（clipboard-fix.js）
交互规则：
- 用户说"用默认主题" / "恢复默认" → 用 templates/ 恢复整套（文件复制回 dist + index.html 挂载），不收集任何需求
- 用户说"自定义主题" / "改成xxx" → 进入多轮对话，按 §1 问卷收集四要素，在默认主题基础上改造（默认主题是改造的基底）
- 应用升级重置 dist 后，templates/ 可一键恢复整套默认主题
唯一无法打包的：背景壁纸 background.jpg 是二进制图片（技能目录存不了），恢复默认主题时从 dist\assets\background.jpg 原文件复制；若用户提供新壁纸则用新图替换同名文件。
0.5 工作流程（每次必走）
- 收集需求（按下方问卷逐项询问，缺哪项问哪项，用户没提的项保持现状）
- 复述确认：把将要改动的清单+效果预期一句话复述给用户确认
- 实施：按"实施清单"逐个完成（静态文件改动 + 版本号 bump）
- 验证交付：告知用户刷新（静态）或完全重启（模块改动）；如有布局类问题挂诊断脚本排查
- 记录改动到
C:\deepseekharness\绿色主题-定制说明.md（如存在）
1. 需求收集问卷（四要素 + 扩展）
① 背景壁纸
- 询问："背景图用哪张？提供图片文件路径即可（会自动铺满窗口，支持浅/深色主题）"
- 用户提供路径 → 复制/替换
dist\assets\background.jpg（同名替换，无需改代码） - 若用户没图：询问"用现有背景还是默认绿白？"
- 壁纸内容决定水底/宠物视觉：先拿到图再定水族箱配色
② 图标风格
- 询问："图标想要什么风格？（示例：圆润卡通/太阳花+表情/极简线条/保持原版）"
- 如用户无法描述 → 制作预览页
icon-preview.html（放dist\assets\，用户浏览器打开http://127.0.0.1:端口/assets/icon-preview.html看效果）→ 按确认的风格实施 - 图标库位置：
resources\host\node_modules\@deepseek-ai\dsh-client-ui-primitives\lib\index.js（70 个统一图标，全部jsx("svg")内联，viewBox 14/16，fill currentColor）+ 各 UI 包少量内联 SVG - ⚠️ 安全红线：输入框内的图标（发送按钮等 InputBar 内联 SVG）不要用运行时脚本改写（会干扰 React，曾致输入框消失）；只做输入框外的图标，或直接改 primitives 图标库的 path 数据（静态修改，重启生效）
③ 字体
- 询问："用什么字体？给出字体名。若本地未安装，请先安装后告诉我（装完需重启应用才能识别）"
- 实施：改
dsh-green-theme.css的body{--dsw-font-family:...}；家族名不确定时用dist\assets\font-fix.js（候选名列表 + document.fonts/Canvas 检测，命中后 :root 内联覆盖） - 中文回退微软雅黑；代码块保持等宽字体（
--ds-font-family-code不动）
④ 电子养鱼缸 / 电子宠物
- 询问："鱼缸/宠物想要什么形态？"（鱼缸/猫舍/仓鼠笼/水母箱……数量、大小、交互偏好）
- 鱼缸基础信息：位置=侧边栏"设置"上方；高度
clamp(130px,24vh,215px)；固定 8 条（普通=8-会话鱼）；交互=单击冒泡/双击投食/点鱼受惊 - 扩展电子宠物：套用 fishtank 架构（见 §3），形态可换：宠物外观换 SVG/CSS 动画、喂食/心情/互动逻辑复用状态机
2. 实施清单（对应四要素）
| 需求 | 改动文件 | 生效方式 |
|---|---|---|
| 背景壁纸 | 覆盖 dist\assets\background.jpg |
Ctrl+R |
| 主题色/令牌 | dist\assets\dsh-green-theme.css（body{} 浅色 / body[data-ds-dark-theme]{} 深色） |
Ctrl+R + bump ?v= |
| 字体 | dsh-green-theme.css + font-fix.js |
Ctrl+R（新装字体需重启） |
| 图标 | cartoon-icons.js（运行时，输入框外）或 primitives 库 path（静态） |
Ctrl+R / 重启 |
| 鱼缸/宠物 | fishtank.css + fishtank.js |
Ctrl+R |
| 挂载 | dist\index.html 加 <link>/<script defer> |
Ctrl+R |
| 预览页 | dist\assets\icon-preview.html |
浏览器打开 |
所有 dist 静态改动完成后：bump index.html 里 dsh-green-theme.css?v=N 的版本号，再让用户 Ctrl+R。
3. 电子宠物扩展指南（借鉴鱼缸架构）
鱼缸 = 侧边栏注入容器 + JS 状态机 + CSS 动画，可直接套用为任意电子宠物：
- 注入：
fishtank.js模式——轮询等待.zVCCkW_root出现，insertBefore(容器, .zVCCkW_footArea)，MutationObserver + 8s 兜底保活 - 布局：容器
flex:none固定高度，左右负 margincalc(-1 * var(--dsh-sidebar-inline-padding,12px))铺满侧边栏；会话列表区在容器上方滚动（天然隔离） - 水体/背景：容器用
background-attachment:fixed复用全局背景图（与壁纸无缝）＋按主题加 72% 蒙版防刺眼 - 动画：宠物本体 JS 逐帧驱动（transform 定位 + 平滑转向角度模型）；尾巴/耳朵等细节用 CSS keyframes；所有动画不受系统"减少动效"影响（用户明确要求动效时）
- 状态机：cruise（巡航）/ feed（觅食）/ scared（受惊）/ rest（饥饿休眠）/ stage（舞台）——喂食、饥饿、心情系统直接复用
- 会话绑定（可选）：绑定
.PD2ZSG_sessionRow，切换会话对应宠物游向舞台+显示标题标签
猫舍示例：猫本体（SVG 圆脸+耳朵+尾巴摆动）替换鱼 SVG；喂食=投小鱼干；受惊=炸毛（CSS scale+抖动）；休息=蜷缩（变换动画）。
4. 内部结构速查（已勘察，直接引用）
| 区域 | 类名 | 说明 |
|---|---|---|
| 三列布局 | jL2gxq_frame/sidebarCol/centerCol/detailsCol |
win32 下 frame 透明、sidebar 72% 半透明、center/details 不透明 |
| 侧边栏 | zVCCkW_root/regionArea/footArea/settingsArea |
会话列表区 flex:1 滚动；设置区底部 |
| 会话行 | PD2ZSG_sessionRow/title/selected |
宠物绑定用 |
| 聊天页 | hlCKXq_root/composerSeat/composerStack |
root 带 data-phase；composerSeat=输入框容器 |
| 输入卡片 | _4KQOPa_root/card |
主输入框 |
| 详情面板 | g434Aa_root |
右侧 |
生效机制（最重要）：dist 静态文件=Ctrl+R；node_modules 模块=必须完全重启应用（host 缓存模块）。
5. 安全红线（踩坑合集，违反必翻车）
- 特异性：覆盖应用规则必须带父级前缀把特异性提到 (0,4,2) 以上（如
html[data-dsh-desktop-platform="win32"] body .hlCKXq_root .hlCKXq_composerSeat）；运行时注入样式在 theme link 之后，同特异性应用赢 - 双重半透明：列 72% + 根节点再 72% = 背景图只剩 ~8%；一层 72% 一层 transparent
- 不动 ConversationRoot 的 composer 渲染（
fallback: composerBar保持原版）——改过导致输入框消失 - 不改写输入框内 SVG——发送按钮图标脚本曾致输入框渲染异常
- 模块修改必须重启 host，刷新无效
- 新装字体必须重启 Electron 才能识别
- settling 隐藏输入框是应用原生过渡，可 CSS 覆盖 visible；审批/提问替换输入框是原生设计，不是 bug
- list 插槽没有 matched prop（chain 才有）——不要把 chain 面板迁到 list 而不加 null guard
- 复制按钮失效排查（应用 bug）：
writeClipboard中navigator.clipboard.writeText抛错时直接失败不降级（降级只在 API 不存在时走）；系统剪贴板服务异常环境会触发（表现为按钮无响应、其他按钮正常、Ctrl+C 正常）。修复：clipboard-fix.js运行时包装 writeText，失败降级execCommand('copy')。排查套路：确认其他按钮正常→手动复制正常→停用自定义脚本/CSS 二分→锁定应用缺陷→打补丁
6. 验证与交付
- 静态改动：Ctrl+R → 确认四要素效果
- 布局异常：挂
dist\assets\debug-inspect.js（index.html 加一行）看右上角标签（phase/seat 高度/位置）定位卸载/隐藏/塌陷 - 交付时告知：改动文件列表、如何还原（删 index.html 对应行）、效果确认点
- 更新
C:\deepseekharness\绿色主题-定制说明.md（如有）
7. 技能资源（本目录结构）
DeepSeekharness-自定义主题/
├── SKILL.md ← 本指令文件
├── reference/ ← 参考手册（按需读取）
│ ├── 需求问卷.md ← 多轮对话问题模板（四要素收集话术）
│ ├── 令牌字典.md ← --dsw-* 设计令牌全清单（换肤核心）
│ ├── 图标清单.md ← 70 个统一图标名 + 内联散件位置
│ └── 排查手册.md ← 常见问题定位流程（消失/失效/不生效/回滚）
└── templates/ ← 【默认主题】完整模板库（应用升级重置后可一键恢复）
├── dsh-green-theme.css ← 绿色主题覆盖层（令牌+背景图+桌面列覆盖）
├── fishtank.js ← 电子养鱼缸（JS 引擎：游动/喂食/饥饿/会话鱼）
├── fishtank.css ← 鱼缸样式（水体蒙版/沙石/珊瑚/海草/泡泡）
├── font-fix.js ← 手写字体检测适配（候选名+Canvas 检测）
├── cartoon-icons.js ← 卡通设置图标注入（仅设置，发送保持原版）
├── clipboard-fix.js ← 剪贴板降级补丁（writeText→execCommand）
├── debug-inspect.js ← 布局诊断脚本（右上角常驻标签）
└── icon-preview.html ← 图标风格预览页（多尺寸深浅底）
模板库使用：
- 用户要求"默认主题" → 把 templates/ 文件复制回 dist\assets\ + 补 index.html 引用（§2 挂载表）
- 用户自定义 → 以 templates/ 为基底修改后再部署
- 背景壁纸 background.jpg 为二进制，不在此库（从 dist 原文件复制或用户提供新图）
dist 部署路径（与模板一一对应）：
D:\AI相关\DeepSeek Harness\resources\host\node_modules\@deepseek-ai\dsh-web-frontend\dist\assets\
