dsh-pet 0.1.5 → 0.1.6

package/lib/index.js

@@ -1,5 +1,5 @@
 import { createReadStream, existsSync } from "node:fs";
-import { stat } from "node:fs/promises";
+import { readFile, rm, stat, writeFile } from "node:fs/promises";
 import { join, normalize, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { resolveDshHome } from "@deepseek-ai/dsh-home-paths";
@@ -42,15 +42,107 @@ async function sendFile(res, file, contentType) {
 	stream.on("error", () => res.destroy());
 	stream.pipe(res);
 }
+/** 支持的角落白名单（与 client 端一致） */
+const CORNERS = [
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+];
+/** 发送 JSON 响应 */
+function sendJson(res, status, obj) {
+	const body = JSON.stringify(obj);
+	res.writeHead(status, {
+		"content-type": "application/json; charset=utf-8",
+		"content-length": Buffer.byteLength(body)
+	});
+	res.end(body);
+}
+/** 收集请求体（文本） */
+function readBody(req) {
+	return new Promise((resolve2, reject) => {
+		const chunks = [];
+		req.on("data", (c) => chunks.push(c));
+		req.on("end", () => resolve2(Buffer.concat(chunks).toString("utf8")));
+		req.on("error", reject);
+	});
+}
+/** 校验并归一化用户配置：只接受 { pets: [{ id, size, position }] } */
+function sanitizeUserConfig(raw) {
+	const o = raw && typeof raw === "object" ? raw : {};
+	const arr = Array.isArray(o.pets) ? o.pets : null;
+	if (!arr || !arr.length) return null;
+	const out = [];
+	for (const p of arr) {
+		if (!p || typeof p !== "object") return null;
+		const id = String(p.id ?? "");
+		if (!id || id.length > 64 || /[\\/:\x00-\x1f]/.test(id)) return null;
+		const size = Number(p.size);
+		if (!Number.isFinite(size) || size <= 0) return null;
+		const pos = p.position && typeof p.position === "object" ? p.position : {};
+		const corner = String(pos.corner ?? "");
+		if (!CORNERS.includes(corner)) return null;
+		const marginX = Number(pos.marginX);
+		const marginY = Number(pos.marginY);
+		if (!Number.isFinite(marginX) || !Number.isFinite(marginY)) return null;
+		out.push({
+			id,
+			size,
+			position: {
+				corner,
+				marginX,
+				marginY
+			}
+		});
+	}
+	return { pets: out };
+}
 function apply(ctx, config) {
 	const thumbRoot = join(PACKAGE_ROOT, "assets", "thumb");
 	const fullRoot = config.fullRoot ?? join(resolveDshHome(), "pet-assets");
+	const userConfigPath = join(resolveDshHome(), "pet-config.json");
 	ctx.effect(() => ctx.webServer.register({
 		kind: "prefix",
 		path: ROUTE_PREFIX,
 		handler: async (req, res) => {
 			const url = new URL(req.url ?? "/", "http://localhost");
 			const rest = decodeURIComponent(url.pathname.slice(ROUTE_PREFIX.length + 1));
+			if (rest === "config") {
+				if (req.method === "GET") {
+					try {
+						const raw = await readFile(userConfigPath, "utf8");
+						sendJson(res, 200, JSON.parse(raw));
+					} catch {
+						sendJson(res, 200, {});
+					}
+					return;
+				}
+				if (req.method === "PUT") {
+					try {
+						const body = await readBody(req);
+						const parsed = JSON.parse(body);
+						const clean = sanitizeUserConfig(parsed);
+						if (!clean) {
+							sendJson(res, 400, { error: "invalid pet config: expected { pets:[{id,size,position:{corner,marginX,marginY}}] }" });
+							return;
+						}
+						await writeFile(userConfigPath, JSON.stringify(clean, null, 2), "utf8");
+						sendJson(res, 200, { ok: true });
+					} catch {
+						sendJson(res, 400, { error: "invalid JSON body" });
+					}
+					return;
+				}
+				if (req.method === "DELETE") {
+					try {
+						await rm(userConfigPath, { force: true });
+					} catch {}
+					sendJson(res, 200, { ok: true });
+					return;
+				}
+				sendJson(res, 405, { error: "method not allowed" });
+				return;
+			}
 			if (rest === "config.jsonc") {
 				const cfgFile = join(PACKAGE_ROOT, "assets", "config.jsonc");
 				if (!existsSync(cfgFile)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-pet",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A floating desktop pet for the DeepSeek Harness Web UI: idle breathing, occasional direction turns, random actions, and screen wandering.",
   "keywords": [
     "dsh",

package/src/client/app.ts

@@ -3,14 +3,13 @@
 //       react 通过 factory 的 require 取得（不走 ESM 顶部 import），
 //       以匹配 DSH 的 window.__ModuleLoader__.load({ id, factory }) 加载方式。
 import { pick, randomBetween, pickWeightedCategory } from './pickers';
-import { stripJsonc, buildAnim, buildMinimalAnim } from './config';
+import { stripJsonc, buildAnim, buildMinimalAnim, extractDefaultPets, resolvePets } from './config';
 import { CANVAS_H, FEET_Y, HIT_BOX, DRAG_THRESHOLD } from './constants';
+import { petBridge, makePetConfigSection, NS, zh, en } from './settings';
+import type { PetConfigUI } from './settings';
 import type { AnimConfig, Corner } from './types';
 import type * as ReactNS from 'react';
 
-/** 支持的角落白名单 */
-const CORNERS: Corner[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
-
 /**
  * 返回 DSH 插件 factory：`(require) => module`。
  * 插件三件套（name / inject / apply）都在其返回的 module 上。
@@ -54,11 +53,11 @@ export function makeFactory(): (require: (mod: string) => any) => any {
     let ANIM: AnimConfig = buildMinimalAnim();
 
     // ============================================================================
-    // Pet 组件 —— 宠物本体
+    // PetCard 组件 —— 单个宠物实例（配置由容器 PetMulti 传入）
     // ============================================================================
-    function Pet() {
-      // ---- 尺寸（默认 462px 宽；可由 config.jsonc 的 size 覆盖）----
-      const [size, setSize] = useState(462);
+    function PetCard({ cfg }: { cfg: PetConfigUI }) {
+      // ---- 尺寸（由配置传入；容器/设置页更新后即时跟随）----
+      const [size, setSize] = useState(cfg.size);
       const halfW = size / 2;
       const halfH = (size * 9) / 16 / 2;
 
@@ -68,38 +67,17 @@ export function makeFactory(): (require: (mod: string) => any) => any {
       const [facing, setFacing] = useState('left' as 'left' | 'right');
       const [dragging, setDragging] = useState(false);
       const [customPos, setCustomPos] = useState<null | { rx: number; ry: number }>(null);
-      // 初始角落与边距（默认右下 right24/bottom0；可被 config.jsonc 覆盖）
-      const [corner, setCorner] = useState<Corner>('bottom-right');
-      const [margin, setMargin] = useState({ x: 24, y: 0 });
-      // 拉取 config.jsonc 应用尺寸/位置/动作配置；失败/缺失/写错均静默沿用默认/兜底
+      // 初始角落与边距（来自配置；可被容器更新覆盖）
+      const [corner, setCorner] = useState<Corner>(cfg.corner);
+      const [margin, setMargin] = useState({ x: cfg.marginX, y: cfg.marginY });
+
+      // 配置变化即时跟随（容器重新合并 / 设置页保存后通过 petBridge.sync 触发）
       useEffect(() => {
-        fetch('/pet/config.jsonc')
-          .then((r) => {
-            if (!r.ok) throw new Error('config');
-            return r.text();
-          })
-          .then((src) => {
-            const obj = JSON.parse(stripJsonc(src));
-            const sz = Number(obj && obj.size);
-            if (Number.isFinite(sz) && sz > 0) setSize(sz);
-            ANIM = buildAnim(obj);
-            const p = obj && obj.position;
-            if (p) {
-              if (CORNERS.indexOf(p.corner) !== -1) setCorner(p.corner as Corner);
-              const mx = Number(p.marginX);
-              const my = Number(p.marginY);
-              if (!Number.isNaN(mx)) setMargin((m) => ({ ...m, x: mx }));
-              if (!Number.isNaN(my)) setMargin((m) => ({ ...m, y: my }));
-            }
-            // 配置就绪后用待机动画启动（ANIM 由 buildAnim 兜底，必有 idle）
-            if (ANIM.idle && ANIM.idle.length) {
-              setAnim(ANIM.idle[0]);
-              setSeq((s) => s + 1);
-            }
-          })
-          .catch(() => {});
+        setSize(cfg.size);
+        setCorner(cfg.corner);
+        setMargin({ x: cfg.marginX, y: cfg.marginY });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
+      }, [cfg.size, cfg.corner, cfg.marginX, cfg.marginY]);
       const [seq, setSeq] = useState(0);
 
       // ---- DOM / 状态 refs ----
@@ -432,16 +410,74 @@ export function makeFactory(): (require: (mod: string) => any) => any {
       );
     }
 
+    // ============================================================================
+    // PetMulti 容器 —— 多开：拉取配置 → 合并默认+用户层 pets → 渲染多个 PetCard
+    // ============================================================================
+    function PetMulti() {
+      const [pets, setPets] = useState<PetConfigUI[]>([]);
+      const [ready, setReady] = useState(false);
+
+      useEffect(() => {
+        let alive = true;
+        (async () => {
+          try {
+            const r1 = await fetch('/pet/config.jsonc');
+            if (!r1.ok) return;
+            const obj: any = JSON.parse(stripJsonc(await r1.text()));
+            ANIM = buildAnim(obj);
+            const defaults = extractDefaultPets(obj);
+            // 用户覆盖层（设置页保存的完整宠物列表）
+            let user: any = {};
+            try {
+              const r2 = await fetch('/pet/config');
+              if (r2.ok && r2.status !== 204) user = await r2.json().catch(() => ({}));
+            } catch { /* 无用户层时忽略 */ }
+            const merged = resolvePets(defaults, user);
+            if (!alive) return;
+            petBridge.current = merged;
+            petBridge.template = defaults.length ? defaults[0] : null;
+            petBridge.sync = (list: PetConfigUI[]) => {
+              setPets(list);
+              petBridge.current = list;
+            };
+            setPets(merged);
+            setReady(true);
+          } catch { /* 失败静默：保持不渲染（或兜底） */ }
+        })();
+        return () => {
+          alive = false;
+          petBridge.sync = null;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      return ready ? pets.map((p) => h(PetCard, { key: p.id, cfg: p })) : null;
+    }
+
     // ============================================================================
     // 插件主体（Cordis 插件三件套）
     // ============================================================================
     const name = 'pet';
-    const inject = ['slots'];
+    const inject = ['slots', 'locale'];
     function apply(ctx: any, _config: any) {
+      // 本地化字典（设置页文案）
+      ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-pet: dictionaries');
+      const t = ctx.locale.bind(NS);
+
+      // 宠物 overlay（多开：容器渲染多个 PetCard）
       ctx.slots.inject('shell.overlay', function* () {
         yield ctx.slots.register(
           { name: 'shell.overlay', id: 'pet', order: 1000 },
-          () => h(Pet, {}),
+          () => h(PetMulti, {}),
+        );
+      });
+
+      // 设置页：「桌宠配置」（大小/位置，保存即时生效）
+      const PetConfigSection = makePetConfigSection({ h, useState, t });
+      ctx.slots.inject('settings.section', function* () {
+        yield ctx.slots.register(
+          { name: 'settings.section', id: 'pet-config', order: 30, label: () => t('nav'), inject: () => ({ t }) },
+          PetConfigSection,
         );
       });
     }

package/src/client/config.ts

@@ -1,5 +1,7 @@
 // 配置层：拉取 / 解析 config.jsonc，构建运行时动作配置（唯一事实来源）。
-import type { AnimConfig } from './types';
+import { DEFAULT_PETS } from './settings';
+import type { PetConfigUI } from './settings';
+import type { AnimConfig, Corner } from './types';
 
 /** 安全兜底待机名：用于初始渲染 / 配置缺失时宠物不至于空白 */
 export const FALLBACK_IDLE = '待机呼吸休闲';
@@ -75,3 +77,46 @@ export const buildAnim = (obj: unknown): AnimConfig => {
     },
   };
 };
+
+// ============================================================================
+// 多开宠物配置解析（纯函数，不依赖 React）
+// ============================================================================
+/** 支持的角落白名单 */
+export const CORNERS: Corner[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+
+/** 归一化一个宠物条目（缺字段回落默认） */
+export function normalizePet(p: any): PetConfigUI {
+  const pos = p && p.position && typeof p.position === 'object' ? p.position : {};
+  return {
+    id: String(p && p.id ? p.id : 'main'),
+    size: Number(p && p.size) > 0 ? Number(p.size) : DEFAULT_PETS[0].size,
+    corner: CORNERS.indexOf(pos.corner) !== -1 ? (pos.corner as Corner) : DEFAULT_PETS[0].corner,
+    marginX: Number.isFinite(Number(pos.marginX)) ? Number(pos.marginX) : DEFAULT_PETS[0].marginX,
+    marginY: Number.isFinite(Number(pos.marginY)) ? Number(pos.marginY) : DEFAULT_PETS[0].marginY,
+  };
+}
+
+/** 从 config.jsonc 对象提取默认宠物列表：必须为 pets 数组；缺失/为空回落代码兜底 DEFAULT_PETS */
+export function extractDefaultPets(obj: any): PetConfigUI[] {
+  const arr = obj && Array.isArray(obj.pets) ? obj.pets.filter((p: any) => p && p.id) : [];
+  if (!arr.length) return DEFAULT_PETS.map((p) => ({ ...p }));
+  const seen = new Set<string>();
+  const out: PetConfigUI[] = [];
+  for (const p of arr) {
+    const id = String(p.id);
+    if (!seen.has(id)) {
+      seen.add(id);
+      out.push(normalizePet(p));
+    }
+  }
+  return out.length ? out : DEFAULT_PETS.map((p) => ({ ...p }));
+}
+
+/** 合并最终宠物列表：用户层（{ pets: 完整列表 }）全量替换默认；无用户层回落默认 */
+export function resolvePets(defaults: PetConfigUI[], user: any): PetConfigUI[] {
+  if (user && Array.isArray(user.pets)) {
+    const list = user.pets.filter((p: any) => p && p.id).map(normalizePet);
+    return list.length ? list : defaults; // 用户层空数组视为无覆盖
+  }
+  return defaults;
+}

package/src/client/pickers.ts

@@ -4,7 +4,9 @@ import type { Category } from './types';
 /** 从字符串池里等概率随机抽一个；exclude 排除某个名字（避免连续重复） */
 export const pick = <T,>(pool: T[], exclude?: T): T => {
   const entries = exclude ? pool.filter((n) => n !== exclude) : pool;
-  return entries[Math.floor(Math.random() * entries.length)];
+  // 排除后池空（单元素池 + 排除自己）：退回原池抽——宁可重复，也不要返回 undefined
+  const src = entries.length ? entries : pool;
+  return src[Math.floor(Math.random() * src.length)];
 };
 
 /** 生成 [min, max) 区间内的随机整数 */

package/src/client/settings.ts

@@ -0,0 +1,325 @@
+/**
+ * 桌宠配置管理设置页（settings.section 插槽，id: pet-config）
+ *
+ * - 多开：管理多个桌宠，每个宠物独立 id/size/位置（corner + marginX/Y）
+ * - 数据流：设置页持有「合并后的完整宠物列表」→ 保存时全量 PUT /pet/config
+ *   （用户覆盖层 = 完整列表，加载时全量替换默认，天然支持增删）
+ * - 即时生效：保存/恢复默认后调用 petBridge.sync 通知容器重新渲染，无需刷新页面
+ *
+ * 样式对齐官方设置页：max-width 720px、全走 --dsw-alias-* 语义 token（主题跟随）。
+ */
+import type { Corner } from './types';
+
+/** 单个宠物配置 */
+export interface PetConfigUI {
+  id: string;
+  size: number;
+  corner: Corner;
+  marginX: number;
+  marginY: number;
+}
+
+/** 兜底默认（与 config.jsonc 的 pets[0]（main）一致） */
+export const DEFAULT_PETS: PetConfigUI[] = [
+  { id: 'main', size: 462, corner: 'top-right', marginX: 24, marginY: 100 },
+];
+
+/** 容器与设置页共享的桥（同一 bundle 单例）：
+ * current=最新完整宠物列表；sync=容器注册的重渲染回调（保存/恢复默认时调用）；
+ * template=config.jsonc 默认宠物模板（pets[0]），「添加宠物」用它作为默认配置 */
+export const petBridge: {
+  current: PetConfigUI[] | null;
+  sync: null | ((pets: PetConfigUI[]) => void);
+  template: PetConfigUI | null;
+} = { current: null, sync: null, template: null };
+
+/** 字典命名空间 */
+export const NS = 'pet.config';
+
+export const zh = {
+  nav: '桌宠配置',
+  intro: '管理多个桌宠：每个宠物可独立设置大小与位置（保存后即时生效）。',
+  petsLabel: '宠物列表',
+  add: '添加宠物',
+  remove: '删除',
+  atLeastOne: '至少保留一个宠物。',
+  emptyPets: '暂无宠物，点击「添加宠物」创建。',
+  sizeLabel: '大小（宽度 px）',
+  sizeHint: '高度自动 = 宽度 × 9/16。',
+  cornerLabel: '位置',
+  'corner.top-left': '左上角',
+  'corner.top-right': '右上角',
+  'corner.bottom-left': '左下角',
+  'corner.bottom-right': '右下角',
+  marginX: '水平偏移',
+  marginY: '垂直偏移',
+  save: '保存',
+  reset: '恢复默认',
+  saved: '已保存，桌宠即时生效。',
+  loadError: '加载配置失败',
+  invalid: '请检查输入：大小需为正数，边距可为任意数字。',
+  busy: '保存中…',
+};
+
+export const en = {
+  nav: 'Pet Config',
+  intro: 'Manage multiple pets: each pet has its own size and position (applies instantly after saving).',
+  petsLabel: 'Pets',
+  add: 'Add pet',
+  remove: 'Remove',
+  atLeastOne: 'Keep at least one pet.',
+  emptyPets: 'No pets yet — click "Add pet" to create one.',
+  sizeLabel: 'Size (width px)',
+  sizeHint: 'Height is automatic = width × 9/16.',
+  cornerLabel: 'Position',
+  'corner.top-left': 'Top-left',
+  'corner.top-right': 'Top-right',
+  'corner.bottom-left': 'Bottom-left',
+  'corner.bottom-right': 'Bottom-right',
+  marginX: 'Horizontal offset',
+  marginY: 'Vertical offset',
+  save: 'Save',
+  reset: 'Reset to default',
+  saved: 'Saved — the pets updated instantly.',
+  loadError: 'Failed to load config',
+  invalid: 'Check your input: size must be positive; margins can be any number.',
+  busy: 'Saving…',
+};
+
+/** 设置页组件工厂：h / hooks / t 由 factory 的 require 与 locale 注入（不顶层 import react） */
+export function makePetConfigSection(rt: {
+  h: any;
+  useState: <T>(init: T) => [T, (v: T) => void];
+  t: (key: string) => string;
+}): (props: { close?: () => void }) => any {
+  const { h, useState, t } = rt;
+
+  const CORNERS: Corner[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+  const cornerLabel = (c: Corner): string => t('corner.' + c);
+
+  const inputStyle = {
+    boxSizing: 'border-box',
+    border: '1px solid var(--dsw-alias-border-l2)',
+    borderRadius: '8px',
+    background: 'var(--dsw-alias-bg-layer-1)',
+    color: 'var(--dsw-alias-label-primary)',
+    padding: '5px 10px',
+    fontSize: '13px',
+    minHeight: '28px',
+    outline: 'none',
+  } as any;
+
+  const stripJsonc = (src: string): string =>
+    src.replace(/\/\*[\s\S]*?\*\//g, '').replace(/(^|[^\\:])\/\/.*$/gm, '$1').trim();
+
+  /** 生成一个未占用的宠物 id（pet-2、pet-3…） */
+  const nextId = (list: PetConfigUI[]): string => {
+    let n = 2;
+    for (;; n++) {
+      const id = 'pet-' + n;
+      if (!list.some((p) => p.id === id)) return id;
+    }
+  };
+
+  const normalizePet = (p: any): PetConfigUI => {
+    const pos = p && p.position && typeof p.position === 'object' ? p.position : {};
+    return {
+      id: String(p && p.id ? p.id : 'main'),
+      size: Number(p && p.size) > 0 ? Number(p.size) : DEFAULT_PETS[0].size,
+      corner: (CORNERS as string[]).includes(pos.corner) ? (pos.corner as Corner) : DEFAULT_PETS[0].corner,
+      marginX: Number.isFinite(Number(pos.marginX)) ? Number(pos.marginX) : DEFAULT_PETS[0].marginX,
+      marginY: Number.isFinite(Number(pos.marginY)) ? Number(pos.marginY) : DEFAULT_PETS[0].marginY,
+    };
+  };
+
+  /** 从 config.jsonc 对象提取默认宠物列表：必须为 pets 数组；缺失/为空回落代码兜底 DEFAULT_PETS */
+  const defaultsFrom = (obj: any): PetConfigUI[] => {
+    const arr = obj && Array.isArray(obj.pets) ? obj.pets.filter((p: any) => p && p.id).map(normalizePet) : [];
+    return arr.length ? arr : DEFAULT_PETS.map((p) => ({ ...p }));
+  };
+
+  return function PetConfigSection() {
+    const initPets = petBridge.current ?? DEFAULT_PETS;
+    const [pets, setPets] = useState<PetConfigUI[]>(initPets.map((p) => ({ ...p })));
+    const [selId, setSelId] = useState<string>(initPets[0]?.id ?? '');
+    const [busy, setBusy] = useState(false);
+    const [msg, setMsg] = useState<{ kind: 'ok' | 'err' | ''; text: string }>({ kind: '', text: '' });
+
+    const sel = pets.find((p) => p.id === selId) ?? pets[0] ?? null;
+
+    const updateSel = (patch: Partial<PetConfigUI>) =>
+      setPets((list) => list.map((p) => (p.id === (sel?.id ?? '') ? { ...p, ...patch } : p)));
+
+    const validated = (): PetConfigUI[] | null => {
+      for (const p of pets) {
+        if (!Number.isFinite(p.size) || p.size <= 0 || !Number.isFinite(p.marginX) || !Number.isFinite(p.marginY)) {
+          setMsg({ kind: 'err', text: t('invalid') });
+          return null;
+        }
+      }
+      return pets;
+    };
+
+    const save = async () => {
+      const list = validated();
+      if (!list) return;
+      setBusy(true);
+      setMsg({ kind: '', text: '' });
+      try {
+        const res = await fetch('/pet/config', {
+          method: 'PUT',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({
+            pets: list.map((p) => ({ id: p.id, size: p.size, position: { corner: p.corner, marginX: p.marginX, marginY: p.marginY } })),
+          }),
+        });
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        petBridge.current = list;
+        petBridge.sync?.(list);
+        setMsg({ kind: 'ok', text: t('saved') });
+      } catch {
+        setMsg({ kind: 'err', text: t('loadError') });
+      } finally {
+        setBusy(false);
+      }
+    };
+
+    const reset = async () => {
+      setBusy(true);
+      setMsg({ kind: '', text: '' });
+      try {
+        await fetch('/pet/config', { method: 'DELETE' });
+        const defRes = await fetch('/pet/config.jsonc');
+        const obj = JSON.parse(stripJsonc(await defRes.text()));
+        const defs = defaultsFrom(obj);
+        setPets(defs.map((p) => ({ ...p })));
+        setSelId(defs[0]?.id ?? '');
+        petBridge.current = defs;
+        petBridge.sync?.(defs);
+        setMsg({ kind: 'ok', text: t('saved') });
+      } catch {
+        setMsg({ kind: 'err', text: t('loadError') });
+      } finally {
+        setBusy(false);
+      }
+    };
+
+    const addPet = () => {
+      const id = nextId(pets);
+      // 默认模板 = config.jsonc 的 pets[0]（main）→ 兜底 DEFAULT_PETS[0]
+      const tpl = petBridge.template ?? DEFAULT_PETS[0];
+      const np: PetConfigUI = { id, size: tpl.size, corner: tpl.corner, marginX: tpl.marginX, marginY: tpl.marginY };
+      setPets((list) => [...list, np]);
+      setSelId(id);
+    };
+
+    const removeSel = () => {
+      if (pets.length <= 1) {
+        setMsg({ kind: 'err', text: t('atLeastOne') });
+        return;
+      }
+      const list = pets.filter((p) => p.id !== (sel?.id ?? ''));
+      setPets(list);
+      setSelId(list[0].id);
+    };
+
+    const field = (key: 'size' | 'marginX' | 'marginY', value: number, setter: (v: number) => void, width: string) =>
+      h('input', {
+        type: 'number',
+        step: key === 'size' ? '10' : '1',
+        min: key === 'size' ? '120' : '',
+        value: String(value),
+        disabled: busy || !sel,
+        onChange: (e: any) => setter(Number(e.target.value)),
+        style: { width, ...inputStyle },
+      });
+
+    return h(
+      'section',
+      {
+        style: { maxWidth: '720px', color: 'var(--dsw-alias-label-primary)', display: 'flex', flexDirection: 'column', gap: '6px' },
+        children: [
+          h('h2', { style: { margin: 0, fontSize: '16px', fontWeight: 500, lineHeight: '24px' }, children: t('nav') }),
+          h('p', { style: { margin: 0, fontSize: '14px', color: 'var(--dsw-alias-label-tertiary)', lineHeight: '22px' }, children: t('intro') }),
+
+          // 宠物列表 + 添加
+          h('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center', marginTop: '4px' }, children: [
+            h('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' }, children: t('petsLabel') }),
+            ...pets.map((p) =>
+              h('button', {
+                key: p.id,
+                type: 'button',
+                onClick: () => setSelId(p.id),
+                style: {
+                  border: '1px solid ' + (p.id === (sel?.id ?? '') ? 'var(--dsw-alias-state-business-primary)' : 'var(--dsw-alias-border-l2)'),
+                  background: p.id === (sel?.id ?? '') ? 'var(--dsw-alias-interactive-bg-active)' : 'transparent',
+                  color: 'var(--dsw-alias-label-primary)',
+                  borderRadius: '8px',
+                  padding: '4px 12px',
+                  fontSize: '13px',
+                  cursor: 'pointer',
+                },
+                children: p.id + ' (' + p.size + 'px)',
+              }),
+            ),
+            h('button', {
+              type: 'button', onClick: addPet, disabled: busy,
+              style: { border: '1px dashed var(--dsw-alias-border-l2)', background: 'transparent', color: 'var(--dsw-alias-label-secondary)', borderRadius: '8px', padding: '4px 12px', fontSize: '13px', cursor: 'pointer' },
+              children: '+ ' + t('add'),
+            }),
+          ] }),
+
+          // 选中宠物表单
+          sel
+            ? h('div', { style: { display: 'flex', gap: '16px', flexWrap: 'wrap', marginTop: '8px', padding: '12px 14px', border: '1px solid var(--dsw-alias-border-l2)', borderRadius: '12px' }, children: [
+                h('label', { style: { display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' }, children: [
+                  t('sizeLabel'),
+                  field('size', sel.size, (v) => updateSel({ size: v }), '150px'),
+                  h('span', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)' }, children: t('sizeHint') }),
+                ] }),
+                h('label', { style: { display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' }, children: [
+                  t('cornerLabel'),
+                  h('select', {
+                    value: sel.corner,
+                    disabled: busy,
+                    onChange: (e: any) => updateSel({ corner: e.target.value as Corner }),
+                    style: { width: '160px', ...inputStyle },
+                    children: CORNERS.map((c) => h('option', { key: c, value: c, children: cornerLabel(c) })),
+                  }),
+                ] }),
+                h('label', { style: { display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' }, children: [
+                  t('marginX'),
+                  field('marginX', sel.marginX, (v) => updateSel({ marginX: v }), '120px'),
+                ] }),
+                h('label', { style: { display: 'flex', flexDirection: 'column', gap: '4px', fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' }, children: [
+                  t('marginY'),
+                  field('marginY', sel.marginY, (v) => updateSel({ marginY: v }), '120px'),
+                ] }),
+                h('button', {
+                  type: 'button', onClick: removeSel, disabled: busy,
+                  title: t('remove'),
+                  style: { alignSelf: 'flex-end', border: '1px solid var(--dsw-alias-state-error-secondary)', background: 'transparent', color: 'var(--dsw-alias-state-error-primary)', borderRadius: '8px', padding: '4px 12px', fontSize: '12px', cursor: 'pointer' },
+                  children: t('remove'),
+                }),
+              ] })
+            : h('p', { style: { margin: 0, fontSize: '13px', color: 'var(--dsw-alias-label-tertiary)' }, children: t('emptyPets') }),
+
+          // 操作区
+          h('div', { style: { display: 'flex', gap: '8px', alignItems: 'center', marginTop: '4px' }, children: [
+            h('button', {
+              type: 'button', disabled: busy, onClick: save,
+              style: { border: '1px solid var(--dsw-alias-button-info-fill)', background: 'var(--dsw-alias-button-info-fill)', color: '#fff', borderRadius: '8px', padding: '4px 14px', fontSize: '12px', cursor: 'pointer', opacity: busy ? 0.5 : 1 },
+              children: t('save'),
+            }),
+            h('button', {
+              type: 'button', disabled: busy, onClick: reset,
+              style: { border: '1px solid var(--dsw-alias-border-l2)', background: 'transparent', color: 'var(--dsw-alias-label-primary)', borderRadius: '8px', padding: '4px 14px', fontSize: '12px', cursor: 'pointer', opacity: busy ? 0.5 : 1 },
+              children: t('reset'),
+            }),
+            msg.text ? h('span', { style: { fontSize: '12px', color: msg.kind === 'err' ? 'var(--dsw-alias-state-error-primary)' : 'var(--dsw-alias-state-ok-primary)', marginLeft: '4px' }, children: msg.text }) : null,
+          ] }),
+        ],
+      },
+    );
+  };
+}