mocode-pet-app 1.4.0 → 1.6.0

package/dist/renderer/renderer.js

@@ -1,6 +1,7 @@
 // 渲染进程:纯展示逻辑,不含业务判断。接收 preload 暴露的 petBridge.onState 回调,
 // 按 PetState 切换外层容器的 CSS class,驱动 style.css 里定义的 @keyframes 动画。
 // mascot.svg 本身的呼吸灯/眨眼动画(inline <animate>)始终运行,不受这里的 class 切换影响。
+import { applyMood, applySkinMotion, createBubbleController, QUIP_VISIBLE_MS } from './dom-mood.js';
 const ALL_STATE_CLASSES = [
     'pet-idle',
     'pet-thinking',
@@ -26,6 +27,13 @@ function applyState(container, state) {
     container.classList.remove(...ALL_STATE_CLASSES);
     container.classList.add(STATE_CLASS[state] ?? 'pet-idle');
 }
+/** 从真实 `#pet-skin-motion` <link> 取值后交给抽取出的纯函数 applySkinMotion(见 dom-mood.ts)处理。 */
+function setSkinMotion(motionFile) {
+    const link = document.getElementById('pet-skin-motion');
+    if (!link)
+        return;
+    applySkinMotion(link, motionFile);
+}
 /** 把 assets/ 下的 SVG 文本 inline 插入指定容器(保留内部 id,供 CSS 选择器跨状态切换样式)。 */
 async function inlineSvgInto(container, assetPath) {
     try {
@@ -38,10 +46,12 @@ async function inlineSvgInto(container, assetPath) {
         // 素材加载失败:容器保持空白,不影响状态机/IPC 正常工作(降级为无形象但仍可运行)
     }
 }
-/** 切换皮肤:清空宠物容器后重新 inline 新素材(信号灯/状态 class 均不受影响,独立于宠物素材本身)。 */
-async function swapSkin(petContainer, assetPath) {
+/** 切换皮肤:清空宠物容器后重新 inline 新素材(信号灯/状态 class 均不受影响,独立于宠物素材本身),
+ *  同时设置/清空个性化动作覆盖 CSS(见 applySkinMotion)。 */
+async function swapSkin(petContainer, assetPath, motionFile) {
     petContainer.innerHTML = '';
     await inlineSvgInto(petContainer, assetPath);
+    setSkinMotion(motionFile);
 }
 window.addEventListener('DOMContentLoaded', async () => {
     // 状态 class 加在 #pet-stage 上(mascot 与信号灯共同的祖先容器),两者的动画/灯光规则
@@ -49,21 +59,28 @@ window.addEventListener('DOMContentLoaded', async () => {
     const stage = document.getElementById('pet-stage');
     const petContainer = document.getElementById('pet-container');
     const lampContainer = document.getElementById('signal-light-container');
-    if (!stage || !petContainer || !lampContainer)
+    const bubbleEl = document.getElementById('pet-bubble');
+    if (!stage || !petContainer || !lampContainer || !bubbleEl)
         return;
     applyState(stage, 'idle');
     // 启动时的初始皮肤:主动向主进程 invoke 拉取(而非等主进程 send 推送)——
     // 消除 did-finish-load 推送与本文件异步注册监听器之间的时序竞争(见 main.ts pushSkinToRenderer 注释)。
-    const initialAssetPath = await window.petBridge
+    const initialSkin = await window.petBridge
         .getInitialSkin()
-        .then((r) => r.assetPath)
-        .catch(() => '../assets/mascot.svg');
+        .catch(() => ({ assetPath: '../assets/mascot.svg', motionFile: undefined }));
     await Promise.all([
-        inlineSvgInto(petContainer, initialAssetPath),
+        inlineSvgInto(petContainer, initialSkin.assetPath),
         inlineSvgInto(lampContainer, '../assets/signal-light.svg'),
     ]);
+    setSkinMotion(initialSkin.motionFile);
+    const bubbleController = createBubbleController();
     window.petBridge.onState((state) => applyState(stage, state));
-    window.petBridge.onSkin((assetPath) => swapSkin(petContainer, assetPath));
+    window.petBridge.onSkin(({ assetPath, motionFile }) => swapSkin(petContainer, assetPath, motionFile));
+    window.petBridge.onMood((mood, quip) => {
+        applyMood(stage, mood);
+        if (mood !== null && quip)
+            bubbleController.showQuip(bubbleEl, quip, QUIP_VISIBLE_MS);
+    });
     // 拖拽放置:窗口默认鼠标穿透(见 main.ts setIgnoreMouseEvents(true,{forward:true})),
     // 鼠标悬停到宠物身上时取消穿透(可交互),离开后恢复穿透(不遮挡桌面下层点击)。这是 Electron
     // 官方推荐的 hover 点击穿透模式
@@ -107,4 +124,3 @@ window.addEventListener('DOMContentLoaded', async () => {
         window.petBridge.dragEnd();
     });
 });
-export {};

package/dist/renderer/style.css

@@ -18,6 +18,7 @@ html, body {
 }
 
 #pet-stage {
+  position: relative; /* #pet-bubble 用 absolute 定位在宠物上方,需要相对此容器而非更外层元素 */
   width: 100%;
   height: 100%;
   display: flex;
@@ -27,6 +28,33 @@ html, body {
   justify-content: center;
 }
 
+/* ── mood 气泡:展示 pickQuip 选出的文案,淡入/淡出不影响 mood-<kind> class(见 renderer.ts showQuip)。 ── */
+#pet-bubble {
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 90%;
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: #0d1b2a;
+  color: #2afadf;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+#pet-bubble.pet-bubble-visible {
+  opacity: 1;
+}
+
 #pet-container {
   flex: 1 1 auto;
   height: 100%;
@@ -234,3 +262,64 @@ html, body {
 .pet-waiting-human #pet-lamp-red {
   animation: lamp-blink-fast 0.3s ease-in-out infinite;
 }
+
+/* ── mood(衍生情绪)演出:与 state class 独立叠加,选择器单独书写、不与 state class 组合
+ *   (design.md "情绪 → 演出的驱动":每种 mood 只共存于其判定所限定的 1-2 个 state,独立规则足够)。
+ *   没有对应 id(#pet-body-group/#pet-arm-left/#pet-arm-right 等)的宠物自然跳过,优雅降级。 ── */
+
+/* ── mood-tired:机身缓慢下沉,浮动曲线比 idle 更慢更沉,模拟疲惫感 ── */
+@keyframes pet-mood-tired-sink {
+  0%, 100% { transform: translateY(0); opacity: 1; }
+  50% { transform: translateY(4px); opacity: 0.85; }
+}
+.mood-tired #pet-body-group {
+  animation: pet-mood-tired-sink 4s ease-in-out infinite;
+}
+
+/* ── mood-bored:轻微左右摇晃,模拟东张西望 ── */
+@keyframes pet-mood-bored-sway {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(6deg); }
+}
+.mood-bored #pet-body-group {
+  animation: pet-mood-bored-sway 2.5s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-urging:比 thinking 更急促的摆动 ── */
+@keyframes pet-mood-urging-nod {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-8deg); }
+}
+.mood-urging #pet-body-group {
+  animation: pet-mood-urging-nod 0.5s ease-in-out infinite;
+  transform-origin: 128px 125px;
+}
+
+/* ── mood-frustrated:比 error 更强烈的抖动 ── */
+@keyframes pet-mood-frustrated-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-10px); }
+  75% { transform: translateX(10px); }
+}
+.mood-frustrated #pet-body-group {
+  animation: pet-mood-frustrated-shake 0.15s ease-in-out infinite;
+}
+
+/* ── mood-flustered:比 tool_call 更快速的双臂摆动 ── */
+@keyframes pet-mood-flustered-arm-left {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(-18deg); }
+}
+@keyframes pet-mood-flustered-arm-right {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(18deg); }
+}
+.mood-flustered #pet-arm-left {
+  animation: pet-mood-flustered-arm-left 0.25s ease-in-out infinite;
+  transform-origin: 34px 128px;
+}
+.mood-flustered #pet-arm-right {
+  animation: pet-mood-flustered-arm-right 0.25s ease-in-out infinite 0.12s;
+  transform-origin: 222px 128px;
+}

package/dist/skins.js

@@ -10,6 +10,31 @@ let cached = null;
 export function skinsDir() {
     return path.join(__dirname, 'assets', 'pets');
 }
+/** 从 manifest 里单个 pet 条目对象中,宽容解析出 motionFile/quips 两个可选字段。
+ *  纯函数,不涉及文件 I/O,便于单元测试覆盖各种非法输入的容错行为。
+ *  - motionFile:必须是 string,否则不设置该字段。
+ *  - quips:必须是非 null 对象;逐个 key 校验 value 是否为 string[],非法 key 被跳过;
+ *    若最终没有任何合法 key,则不设置 quips 字段。 */
+export function parseSkinEntryExtras(pp) {
+    const result = {};
+    if (typeof pp.motionFile === 'string') {
+        result.motionFile = pp.motionFile;
+    }
+    if (typeof pp.quips === 'object' && pp.quips !== null) {
+        const rawQuips = pp.quips;
+        const quips = {};
+        for (const key of Object.keys(rawQuips)) {
+            const value = rawQuips[key];
+            if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
+                quips[key] = value;
+            }
+        }
+        if (Object.keys(quips).length > 0) {
+            result.quips = quips;
+        }
+    }
+    return result;
+}
 /** 读取 manifest.json 里的候选皮肤列表(带内存缓存,manifest 在运行期不会变化)。 */
 export function listSkinEntries() {
     if (cached)
@@ -33,7 +58,13 @@ export function listSkinEntries() {
                 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 });
+                const entry = { id: pp.id, file: pp.file, name: pp.name };
+                const extras = parseSkinEntryExtras(pp);
+                if (extras.motionFile !== undefined)
+                    entry.motionFile = extras.motionFile;
+                if (extras.quips !== undefined)
+                    entry.quips = extras.quips;
+                entries.push(entry);
             }
         }
         cached = entries;

package/dist/skins.test.js

@@ -0,0 +1,73 @@
+// 单测 parseSkinEntryExtras:对 manifest 单个 pet 条目里 motionFile/quips 字段的宽容解析。
+// 纯函数、无文件 I/O,覆盖各种合法/非法输入的容错行为。
+// 运行:npx tsx packages/pet-app/src/skins.test.ts
+import { parseSkinEntryExtras } from './skins.js';
+let passed = 0;
+const assert = (cond, msg) => {
+    if (!cond) {
+        console.error('✗ ' + msg);
+        process.exit(1);
+    }
+    passed++;
+    console.log('✓ ' + msg);
+};
+// 1) motionFile 是字符串 → 保留
+{
+    const r = parseSkinEntryExtras({ motionFile: 'a.svg' });
+    assert(r.motionFile === 'a.svg', 'motionFile 为字符串时被保留');
+}
+// 2) motionFile 是非字符串类型(数字/布尔/对象)→ 不设置
+{
+    const r1 = parseSkinEntryExtras({ motionFile: 123 });
+    const r2 = parseSkinEntryExtras({ motionFile: true });
+    const r3 = parseSkinEntryExtras({ motionFile: { foo: 'bar' } });
+    assert(r1.motionFile === undefined, 'motionFile 为数字时不设置该字段');
+    assert(r2.motionFile === undefined, 'motionFile 为布尔时不设置该字段');
+    assert(r3.motionFile === undefined, 'motionFile 为对象时不设置该字段');
+}
+// 3) motionFile 缺失 → undefined
+{
+    const r = parseSkinEntryExtras({});
+    assert(r.motionFile === undefined, 'motionFile 缺失时为 undefined');
+}
+// 4) quips 是合法对象 → 保留
+{
+    const r = parseSkinEntryExtras({ quips: { tired: ['a', 'b'], bored: ['c'] } });
+    assert(JSON.stringify(r.quips) === JSON.stringify({ tired: ['a', 'b'], bored: ['c'] }), 'quips 为合法对象时按原样保留');
+}
+// 5) quips 不是对象(字符串/数字/数组)→ 不设置
+{
+    const r1 = parseSkinEntryExtras({ quips: 'nope' });
+    const r2 = parseSkinEntryExtras({ quips: 123 });
+    const r3 = parseSkinEntryExtras({ quips: ['a', 'b'] });
+    // 注意:数组本身 typeof 是 'object' 且不为 null,但其 key 均非法(index 的 value 不是 string[]),
+    // 所以最终 quips 里没有任何合法 key,因而 result.quips 应为 undefined。
+    assert(r1.quips === undefined, 'quips 为字符串时不设置该字段');
+    assert(r2.quips === undefined, 'quips 为数字时不设置该字段');
+    assert(r3.quips === undefined, 'quips 为数组(无合法 key)时不设置该字段');
+}
+// 6) quips 对象里某个 key 的 value 不是字符串数组 → 该 key 被跳过,其余合法 key 保留
+{
+    const r = parseSkinEntryExtras({ quips: { tired: 'not an array', bored: ['ok'] } });
+    assert(r.quips !== undefined, 'quips 存在合法 key 时应设置该字段');
+    assert(r.quips.tired === undefined, '非法 key(tired)被跳过');
+    assert(JSON.stringify(r.quips.bored) === JSON.stringify(['ok']), '合法 key(bored)被保留');
+}
+// 7) quips 数组混有非字符串元素 → 该 key 整体被跳过
+{
+    const r = parseSkinEntryExtras({ quips: { tired: ['ok', 123] } });
+    assert(r.quips === undefined, '数组元素含非字符串时,该 key 被跳过,quips 无合法 key 因而为 undefined');
+}
+// 8) quips 是空对象 → 不设置
+{
+    const r = parseSkinEntryExtras({ quips: {} });
+    assert(r.quips === undefined, 'quips 为空对象(无合法 key)时不设置该字段');
+}
+// 9) motionFile/quips 都缺失 → 正常返回 {}
+{
+    const r = parseSkinEntryExtras({ id: 'x', file: 'x.svg', name: 'X' });
+    assert(r.motionFile === undefined, '其余字段解析不受影响时,motionFile 仍为 undefined');
+    assert(r.quips === undefined, '其余字段解析不受影响时,quips 仍为 undefined');
+    assert(Object.keys(r).length === 0, '两字段皆缺失时返回空对象 {}');
+}
+console.log(`\nOK: ${passed} passed, 0 failed`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mocode-pet-app",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "mocode 桌宠:独立 Electron 悬浮窗,展示 agent 执行状态动画。作为 mocode-ai 的可选子包,不随主包安装强制拉取。",
   "private": false,
   "type": "module",