🐱 dsh-desktop-pet

桌宠插件 · A cute desktop pet for the DeepSeek Harness Web GUI.

一只悬浮在界面右下角的橘色小猫：会眨眼、摇尾巴、打呼噜，可以拖拽、点击互动、双击换心情，陪你写代码、摸鱼、等 agent 干活。

A tiny orange cat that floats at the bottom-right corner of the app — it blinks, wags its tail and purrs. Drag it around, click for a pat, double-click to change its mood.

---

✨ 功能 / Features

交互	行为
拖拽	移动小猫，位置自动记住（localStorage），窗口缩放自动收敛
单击	开心蹦跳 + 随机语音气泡（中/英随界面语言）
双击	循环心情：发呆 → 睡觉（Zzz）→ 兴奋
右键	迷你菜单：换心情 / 睡觉 / 隐藏桌宠 / 关于
主题切换	夸一句「换皮肤啦，好看吗？」
连接重置	打招呼「我又回来啦！」
设置页	设置 → 桌宠：显示开关、动画开关、心情选择

纯 CSS 动画 + 内联 SVG，零图片资源、零额外依赖（浏览器端仅依赖 react）。深浅色主题下都能看清。

📦 安装 / Install

方式一：DSH 插件中心（dsh-plugin）

在插件中心搜索 dsh-desktop-pet 一键安装（入库后可搜到）。

方式二：手动安装

# 1. 克隆到本地
git clone https://github.com/Ares-song-RD/dsh-desktop-pet.git
cd dsh-desktop-pet && npm install && npm run build

# 2. 复制到你的 DSH profile（以 desktop 为例）
mkdir -p ~/.dsh/profiles/desktop/vendor
cp -r . ~/.dsh/profiles/desktop/vendor/dsh-desktop-pet

# 3. 在 profile 的 package.json 注册
#    dependencies 增加:  "dsh-desktop-pet": "file:./vendor/dsh-desktop-pet"
#    dsh.profile.bundles 增加: "dsh-desktop-pet"

# 4. 安装依赖并重启 DSH
cd ~/.dsh/profiles/desktop && pnpm install
# 重启 DeepSeek Harness 桌面应用，小猫就会出现

🎮 使用 / Usage

• 启动后小猫出现在右下角，开始眨眼、摇尾巴。
• 拖动它到任意位置；下次启动仍在那里。
• 单击：蹦一下 + 一句「摸一下，能量 +1」。
• 双击：切心情（发呆 → 睡觉 → 兴奋）。
• 右键：隐藏桌宠（可在 设置 → 桌宠 恢复）、换心情、关于。
• 设置 → 桌宠：开关显示 / 动画，直接选心情。

🛠 开发 / Development

npm install          # 安装 esbuild + typescript + @types/react
npm run build        # 产出 lib/index.js + client/client.js（client 产物是官方规范要求的提交物）
npm run typecheck    # tsc --noEmit
npm run verify       # node scripts/harness.mjs —— 执行级验证（21 项断言）

插件结构 / Layout

dsh-desktop-pet/
├── package.json           # dsh.bundle.patch + dsh.client.platform: web
├── cordis.patch.yml       # 把本插件插入 profile 的 layer stack
├── src/
│   ├── server/index.ts    # cordis 服务端插件（触发 client bundle 发现）
│   └── client/            # 浏览器端：React 桌宠 + 设置卡片
│       ├── index.tsx      # apply()：注册 shell.overlay / settings.section
│       ├── Pet.tsx        # SVG 小猫：拖拽/气泡/心情/右键菜单
│       ├── PetSettings.tsx# 设置卡片
│       ├── store.ts       # 共享状态 + 事件总线（localStorage 持久化）
│       ├── locales.ts     # zh/en 文案
│       ├── styles.ts      # 全部 CSS（内联注入，零构建链）
│       └── types.ts       # 宿主 ctx 的结构化类型
├── client/client.js       # 构建产物（提交物）
├── lib/index.js           # 构建产物
└── scripts/
    ├── build.sh           # esbuild 构建
    └── harness.mjs        # 验证脚本

原理 / How it works

DSH 的客户端插件系统（@deepseek-ai/dsh-client-modules）会监听 cordis 插件 fiber 激活，扫描包的 dsh.client 声明并通过 /plugins/<id>/client.js 提供浏览器 bundle。本插件的 server 半区激活后，浏览器 bundle 以 window.__ModuleLoader__.load({ id, factory }) 格式加载，通过 slots.inject('shell.overlay', …) 挂进宿主 UI 的全局浮层槽位（position:absolute; inset:0; z-index:20，子元素可交互），再以 slots.inject('settings.section', …) 挂进设置页。

✅ 验证 / Verification

npm run verify（scripts/harness.mjs）对构建产物做执行级验证：

1. 通过伪造 window.__ModuleLoader__ 加载 client/client.js，校验 loader banner 与注册 id；
2. 用真实 react + react-dom/server 渲染两个注册组件，断言输出标记；
3. 断言 apply(ctx) 正确注册 shell.overlay 与 settings.section；
4. 导入 lib/index.js 校验服务端插件面。

PASS — plugin verified ✅   (21/21 checks)

📄 License

MIT © 2026 Ares-song-RD