mocode-pet-app 0.1.0 → 1.0.0

package/dist/renderer/renderer.js

@@ -9,6 +9,7 @@ const ALL_STATE_CLASSES = [
     'pet-done',
     'pet-aborted',
     'pet-error',
+    'pet-waiting-human',
 ];
 /** PetState → CSS class 映射表(design.md 动画映射表)。 */
 const STATE_CLASS = {
@@ -19,28 +20,91 @@ const STATE_CLASS = {
     done: 'pet-done',
     aborted: 'pet-aborted',
     error: 'pet-error',
+    waiting_human: 'pet-waiting-human',
 };
 function applyState(container, state) {
     container.classList.remove(...ALL_STATE_CLASSES);
     container.classList.add(STATE_CLASS[state] ?? 'pet-idle');
 }
-window.addEventListener('DOMContentLoaded', async () => {
-    const container = document.getElementById('pet-container');
-    if (!container)
-        return;
-    applyState(container, 'idle');
-    // inline mascot.svg(而非 <img>/<object>)以保留其内部 id,供 style.css 的
-    // #pet-antenna / #pet-body-group / #pet-mouth / #pet-arm-left / #pet-arm-right 选择器生效
-    // (外部引用的 SVG 内容不可被外部 CSS 选中,必须 inline 进同一文档)。
+/** 把 assets/ 下的 SVG 文本 inline 插入指定容器(保留内部 id,供 CSS 选择器跨状态切换样式)。 */
+async function inlineSvgInto(container, assetPath) {
     try {
         // 构建后 assets/ 与 renderer/ 同级复制到 dist/(见 scripts/copy-static.mjs),故用 ../assets。
-        const res = await fetch('../assets/mascot.svg');
+        const res = await fetch(assetPath);
         const svgText = await res.text();
         container.insertAdjacentHTML('afterbegin', svgText);
     }
     catch {
         // 素材加载失败:容器保持空白,不影响状态机/IPC 正常工作(降级为无形象但仍可运行)
     }
-    window.petBridge.onState((state) => applyState(container, state));
+}
+/** 切换皮肤:清空宠物容器后重新 inline 新素材(信号灯/状态 class 均不受影响,独立于宠物素材本身)。 */
+async function swapSkin(petContainer, assetPath) {
+    petContainer.innerHTML = '';
+    await inlineSvgInto(petContainer, assetPath);
+}
+window.addEventListener('DOMContentLoaded', async () => {
+    // 状态 class 加在 #pet-stage 上(mascot 与信号灯共同的祖先容器),两者的动画/灯光规则
+    // 均以 `.pet-xxx #element-id` 描述,不要求元素是直接子节点。
+    const stage = document.getElementById('pet-stage');
+    const petContainer = document.getElementById('pet-container');
+    const lampContainer = document.getElementById('signal-light-container');
+    if (!stage || !petContainer || !lampContainer)
+        return;
+    applyState(stage, 'idle');
+    // 启动时的初始皮肤:主动向主进程 invoke 拉取(而非等主进程 send 推送)——
+    // 消除 did-finish-load 推送与本文件异步注册监听器之间的时序竞争(见 main.ts pushSkinToRenderer 注释)。
+    const initialAssetPath = await window.petBridge
+        .getInitialSkin()
+        .then((r) => r.assetPath)
+        .catch(() => '../assets/mascot.svg');
+    await Promise.all([
+        inlineSvgInto(petContainer, initialAssetPath),
+        inlineSvgInto(lampContainer, '../assets/signal-light.svg'),
+    ]);
+    window.petBridge.onState((state) => applyState(stage, state));
+    window.petBridge.onSkin((assetPath) => swapSkin(petContainer, assetPath));
+    // 拖拽放置:窗口默认鼠标穿透(见 main.ts setIgnoreMouseEvents(true,{forward:true})),
+    // 鼠标悬停到宠物身上时取消穿透(可交互),离开后恢复穿透(不遮挡桌面下层点击)。这是 Electron
+    // 官方推荐的 hover 点击穿透模式
+    // (https://www.electronjs.org/docs/latest/tutorial/custom-window-interactions#forward-mouse-events-macos-windows)。
+    //
+    // 拖动本身不使用 -webkit-app-region:drag——该 CSS 属性在 Windows 上会导致其覆盖区域吞掉所有指针事件
+    // (见 https://www.electronjs.org/docs/latest/tutorial/custom-window-interactions 的说明:
+    // "draggable areas ignore all pointer events"),使 mouseenter/mouseleave 永远不会触发。
+    //
+    // 位移量必须是"相对拖拽起点的累计值",不能是"相对上一帧的增量"——原因见 main.ts dragStartBounds
+    // 注释:Windows 下 setBounds 存在 DPI 舍入误差,若主进程每次都读当前窗口尺寸再原样传回,
+    // 误差会不断累加导致窗口越拖越大。用累计位移 + 固定起始 bounds 可以彻底避免这个问题
+    // (每次都是"起点+累计位移",不依赖任何中间状态)。
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+    stage.addEventListener('mouseenter', () => window.petBridge.setIgnoreMouseEvents(false));
+    stage.addEventListener('mouseleave', () => {
+        if (!dragging)
+            window.petBridge.setIgnoreMouseEvents(true);
+    });
+    stage.addEventListener('mousedown', (e) => {
+        dragging = true;
+        startX = e.screenX;
+        startY = e.screenY;
+        window.petBridge.dragStart();
+    });
+    window.addEventListener('mousemove', (e) => {
+        if (!dragging)
+            return;
+        window.petBridge.dragMove(e.screenX - startX, e.screenY - startY);
+    });
+    window.addEventListener('mouseup', () => {
+        // 只清 dragging 标志,不在这里恢复鼠标穿透——鼠标此时通常仍悬停在宠物上方(没有离开过 #pet-stage),
+        // 若这里强行 setIgnoreMouseEvents(true),会导致窗口提前变回穿透态,而 mouseenter 只在"进入"
+        // 时触发一次、不会因为穿透状态变化而重新触发,于是后续再也收不到 mousedown——表现为"只能拖动一次"。
+        // 穿透状态改由 mouseleave 统一负责:真正移出宠物范围时才恢复穿透。
+        if (!dragging)
+            return;
+        dragging = false;
+        window.petBridge.dragEnd();
+    });
 });
 export {};

package/dist/renderer/style.css

@@ -9,15 +9,31 @@ html, body {
   height: 100%;
   background: transparent;
   overflow: hidden;
-  -webkit-app-region: drag; /* 允许拖拽悬浮窗(鼠标穿透关闭区域外);实际穿透行为由主进程 setIgnoreMouseEvents 控制 */
+  /* 拖拽放置:不使用 -webkit-app-region:drag(Windows 上带 app-region:drag 的区域会吞掉所有指针事件,
+   * 详见 https://www.electronjs.org/docs/latest/tutorial/custom-window-interactions ,
+   * 这会导致 #pet-stage 的 mouseenter/mouseleave 永远不触发,setIgnoreMouseEvents(false) 也就永远不会被调用,
+   * 窗口会一直停留在鼠标穿透状态——这正是"拖不动"的根因)。改为在 renderer.ts 里手动用
+   * mousedown/mousemove/mouseup 算位移量,经 IPC 通知主进程 setPosition 移动窗口。 */
+  user-select: none; /* 拖拽时避免误选中文本 */
 }
 
-#pet-container {
+#pet-stage {
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
+  /* 底部对齐(而非居中):宠物脚部和信号灯杆底端需要落在同一条"地面线"上,
+   * 居中对齐会让二者按各自盒子的几何中心对齐,脚和杆底就对不上了。 */
+  align-items: flex-end;
+  justify-content: center;
+}
+
+#pet-container {
+  flex: 1 1 auto;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
   justify-content: center;
+  min-width: 0;
 }
 
 #pet-container svg {
@@ -25,6 +41,23 @@ html, body {
   height: 90%;
 }
 
+/* 信号灯挂在宠物右侧,尺寸远小于主体,不抢视觉重心。 */
+#signal-light-container {
+  flex: 0 0 auto;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+#signal-light-container svg {
+  /* signal-light.svg viewBox 由 90x220 改为 90x456(灯杆加长到与宠物脚部同一地平线),
+   * 高度与 #pet-container svg 保持一致的 90% 比例,两者又都用 flex-end 贴底对齐,
+   * 这样杆的底端和宠物脚部的落地线基本重合。 */
+  width: 30px;
+  height: 90%;
+}
+
 /* ── idle:轻微上下浮动呼吸,机身静止 ── */
 @keyframes pet-float {
   0%, 100% { transform: translateY(0); }
@@ -112,20 +145,92 @@ html, body {
   opacity: 0;
 }
 
-/* ── error:机身横向抖动 + 天线灯变红闪烁 ── */
+/* ── error:机身横向抖动 + 天线灯变红常亮(不闪——error 不要求用户立即处理,与 waiting_human 的
+ *   闪烁区分开:闪烁只留给"需要人工介入"这类必须响应的时刻) ── */
 @keyframes pet-error-shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-6px); }
   75% { transform: translateX(6px); }
 }
-@keyframes pet-error-blink-red {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
 .pet-error #pet-body-group {
   animation: pet-error-shake 0.3s ease-in-out 1;
 }
 .pet-error #pet-antenna {
   fill: #f87171;
-  animation: pet-error-blink-red 0.3s ease-in-out 2;
+  animation: none;
+  opacity: 1;
+}
+
+/* ── waiting_human:等待人工介入(ask_human 面板 / plan 审批面板弹出期间)。
+ *   头部维持静止(面板本身已是强提示,机身不需要再抖动分散注意力),天线灯变红并快闪——
+ *   这是唯一"必须响应"的红灯状态,闪烁频率与 error 常亮形成对比。 ── */
+@keyframes pet-waiting-human-blink-red {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.25; }
+}
+.pet-waiting-human #pet-antenna {
+  fill: #f87171;
+  animation: pet-waiting-human-blink-red 0.5s ease-in-out infinite;
+}
+
+/* ── 信号灯状态映射表(方案C:三色+闪烁区分,呼应 design.md 动画映射表) ──
+ * 灯泡默认态(未点亮)由 assets/signal-light.svg 内置 fill-opacity=0.22 定义,
+ * 以下规则只在对应状态下覆盖 fill-opacity 把目标灯泡点亮,不影响另外两个灯泡。
+ *
+ * | PetState      | 灯   | 行为                                   |
+ * |---------------|------|----------------------------------------|
+ * | idle          | 绿   | 常亮(空闲/安全)                       |
+ * | thinking      | 黄   | 慢速呼吸(等待 LLM 响应)               |
+ * | speaking      | 黄   | 常亮不闪(已在流式输出)                |
+ * | tool_call     | 黄   | 快闪(正在执行工具动作)                |
+ * | done          | 绿   | 短暂高亮闪一下后回落                   |
+ * | aborted       | 红   | 常亮不闪(用户主动中断)                |
+ * | error         | 红   | 常亮不闪(报错,与 waiting_human 区分)  |
+ * | waiting_human | 红   | 快闪(等待人工介入,最高优先级)        |
+ */
+
+@keyframes lamp-pulse-slow {
+  0%, 100% { fill-opacity: 0.9; }
+  50% { fill-opacity: 0.45; }
+}
+@keyframes lamp-blink-fast {
+  0%, 100% { fill-opacity: 0.95; }
+  50% { fill-opacity: 0.15; }
+}
+@keyframes lamp-flash-in {
+  0% { fill-opacity: 0.22; }
+  30% { fill-opacity: 1; }
+  100% { fill-opacity: 0.85; }
+}
+
+.pet-idle #pet-lamp-green {
+  fill-opacity: 0.85;
+}
+
+.pet-thinking #pet-lamp-yellow {
+  animation: lamp-pulse-slow 1.4s ease-in-out infinite;
+}
+
+.pet-speaking #pet-lamp-yellow {
+  fill-opacity: 0.95;
+}
+
+.pet-tool #pet-lamp-yellow {
+  animation: lamp-blink-fast 0.4s ease-in-out infinite;
+}
+
+.pet-done #pet-lamp-green {
+  animation: lamp-flash-in 0.4s ease-out 1;
+}
+
+.pet-aborted #pet-lamp-red {
+  fill-opacity: 0.85;
+}
+
+.pet-error #pet-lamp-red {
+  fill-opacity: 0.85;
+}
+
+.pet-waiting-human #pet-lamp-red {
+  animation: lamp-blink-fast 0.3s ease-in-out infinite;
 }

package/dist/skins.js

@@ -0,0 +1,55 @@
+// 皮肤(选宠物)相关的静态读取逻辑:解析 assets/pets/manifest.json,提供 id → 文件路径的查找。
+// 找不到/解析失败均返回空列表——选皮是可选增强,不能影响桌宠核心状态展示功能启动。
+import { readFileSync, existsSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+let cached = null;
+/** assets/pets/ 目录的绝对路径。dist/skins.js 与 dist/assets/ 是同级(见 scripts/copy-static.mjs
+ *  把源码 assets/ 整体复制到 dist/assets/),故用 __dirname/assets 而非 __dirname/../assets。 */
+export function skinsDir() {
+    return path.join(__dirname, 'assets', 'pets');
+}
+/** 读取 manifest.json 里的候选皮肤列表(带内存缓存,manifest 在运行期不会变化)。 */
+export function listSkinEntries() {
+    if (cached)
+        return cached;
+    try {
+        const manifestPath = path.join(skinsDir(), 'manifest.json');
+        if (!existsSync(manifestPath)) {
+            cached = [];
+            return cached;
+        }
+        const raw = readFileSync(manifestPath, 'utf8');
+        const obj = JSON.parse(raw);
+        if (typeof obj !== 'object' || obj === null || !Array.isArray(obj.pets)) {
+            cached = [];
+            return cached;
+        }
+        const pets = obj.pets;
+        const entries = [];
+        for (const p of pets) {
+            if (!p || typeof p !== 'object')
+                continue;
+            const pp = p;
+            if (typeof pp.id === 'string' && typeof pp.file === 'string' && typeof pp.name === 'string') {
+                entries.push({ id: pp.id, file: pp.file, name: pp.name });
+            }
+        }
+        cached = entries;
+        return cached;
+    }
+    catch {
+        cached = [];
+        return cached;
+    }
+}
+/** 给定 skinId 解析出对应 SVG 的绝对路径;'default'/未知 id/空字符串均返回 null(表示用默认 mascot.svg)。 */
+export function resolveSkinPath(skinId) {
+    if (!skinId || skinId === 'default')
+        return null;
+    const entry = listSkinEntries().find((e) => e.id === skinId);
+    if (!entry)
+        return null;
+    return path.join(skinsDir(), entry.file);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mocode-pet-app",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "mocode 桌宠:独立 Electron 悬浮窗,展示 agent 执行状态动画。作为 mocode-ai 的可选子包,不随主包安装强制拉取。",
   "private": false,
   "type": "module",
@@ -17,7 +17,7 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json && node scripts/copy-static.mjs",
+    "build": "tsc -p tsconfig.json && tsc -p tsconfig.preload.json && node scripts/copy-static.mjs",
     "start": "electron dist/main.js",
     "typecheck": "tsc --noEmit"
   },