dsh-pet 0.1.5 → 0.1.6

package/assets/config.jsonc

@@ -2,16 +2,21 @@
 // 说明：浏览器端启动时通过 /pet/config.jsonc 拉取；任何字段缺失/写错都会
 //       回退到 client.js 的代码默认值，不会导致插件崩溃。
 {
-  // 桌宠尺寸（宽度 px；高度自动 = size × 9/16）
-  "size": 462,
-  // 桌宠初始位置
-  // corner: top-left | top-right | bottom-left | bottom-right（默认 bottom-right）
-  // marginX / marginY: 距所属角落对应边缘的偏移（px，相对角落方向）
-  "position": {
-    "corner": "top-right",
-    "marginX": 24,
-    "marginY": 100
-  },
+  // ===================== 默认宠物列表（多开） =====================
+  // pets 数组定义默认宠物；「设置页 → 添加宠物」的默认模板取 pets[0]（main）。
+  // 每个宠物独立：id（标识）、size（宽度 px，高度自动 = size × 9/16）、
+  // position（corner: 四角之一；marginX/marginY: 距所属角落偏移 px）
+  "pets": [
+    {
+      "id": "main",
+      "size": 462,
+      "position": {
+        "corner": "top-right",
+        "marginX": 24,
+        "marginY": 100
+      }
+    }
+  ],
 
   // ===================== 动作动画池配置 =====================
   "animations": {

package/lib/client.js

@@ -2,7 +2,8 @@
 //#region src/client/pickers.ts
 const pick = (pool, exclude) => {
 	const entries = exclude ? pool.filter((n) => n !== exclude) : pool;
-	return entries[Math.floor(Math.random() * entries.length)];
+	const src = entries.length ? entries : pool;
+	return src[Math.floor(Math.random() * src.length)];
 };
 const randomBetween = (min, max) => Math.floor(min + Math.random() * (max - min));
 const pickWeightedCategory = (categories, facing) => {
@@ -19,6 +20,470 @@ const pickWeightedCategory = (categories, facing) => {
 	return eligible[eligible.length - 1];
 };
 
+//#endregion
+//#region src/client/settings.ts
+const DEFAULT_PETS = [{
+	id: "main",
+	size: 462,
+	corner: "top-right",
+	marginX: 24,
+	marginY: 100
+}];
+const petBridge = {
+	current: null,
+	sync: null,
+	template: null
+};
+const NS = "pet.config";
+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: "保存中…"
+};
+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…"
+};
+function makePetConfigSection(rt) {
+	const { h, useState, t } = rt;
+	const CORNERS$1 = [
+		"top-left",
+		"top-right",
+		"bottom-left",
+		"bottom-right"
+	];
+	const cornerLabel = (c) => 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"
+	};
+	const stripJsonc$1 = (src) => src.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^\\:])\/\/.*$/gm, "$1").trim();
+	/** 生成一个未占用的宠物 id（pet-2、pet-3…） */
+	const nextId = (list) => {
+		let n = 2;
+		for (;; n++) {
+			const id = "pet-" + n;
+			if (!list.some((p) => p.id === id)) return id;
+		}
+	};
+	const normalizePet$1 = (p) => {
+		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$1.includes(pos.corner) ? pos.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) => {
+		const arr = obj && Array.isArray(obj.pets) ? obj.pets.filter((p) => p && p.id).map(normalizePet$1) : [];
+		return arr.length ? arr : DEFAULT_PETS.map((p) => ({ ...p }));
+	};
+	return function PetConfigSection() {
+		const initPets = petBridge.current ?? DEFAULT_PETS;
+		const [pets, setPets] = useState(initPets.map((p) => ({ ...p })));
+		const [selId, setSelId] = useState(initPets[0]?.id ?? "");
+		const [busy, setBusy] = useState(false);
+		const [msg, setMsg] = useState({
+			kind: "",
+			text: ""
+		});
+		const sel = pets.find((p) => p.id === selId) ?? pets[0] ?? null;
+		const updateSel = (patch) => setPets((list) => list.map((p) => p.id === (sel?.id ?? "") ? {
+			...p,
+			...patch
+		} : p));
+		const validated = () => {
+			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$1(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);
+			const tpl = petBridge.template ?? DEFAULT_PETS[0];
+			const np = {
+				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, value, setter, width) => h("input", {
+			type: "number",
+			step: key === "size" ? "10" : "1",
+			min: key === "size" ? "120" : "",
+			value: String(value),
+			disabled: busy || !sel,
+			onChange: (e) => 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) => updateSel({ corner: e.target.value }),
+								style: {
+									width: "160px",
+									...inputStyle
+								},
+								children: CORNERS$1.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 ? .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 ? .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
+					]
+				})
+			]
+		});
+	};
+}
+
 //#endregion
 //#region src/client/config.ts
 const FALLBACK_IDLE = "待机呼吸休闲";
@@ -97,6 +562,43 @@ const buildAnim = (obj) => {
 		}
 	};
 };
+const CORNERS = [
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+];
+function normalizePet(p) {
+	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 : 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
+	};
+}
+function extractDefaultPets(obj) {
+	const arr = obj && Array.isArray(obj.pets) ? obj.pets.filter((p) => p && p.id) : [];
+	if (!arr.length) return DEFAULT_PETS.map((p) => ({ ...p }));
+	const seen = new Set();
+	const out = [];
+	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 }));
+}
+function resolvePets(defaults, user) {
+	if (user && Array.isArray(user.pets)) {
+		const list = user.pets.filter((p) => p && p.id).map(normalizePet);
+		return list.length ? list : defaults;
+	}
+	return defaults;
+}
 
 //#endregion
 //#region src/client/constants.ts
@@ -112,13 +614,6 @@ const DRAG_THRESHOLD = 5;
 
 //#endregion
 //#region src/client/app.ts
-/** 支持的角落白名单 */
-const CORNERS = [
-	"top-left",
-	"top-right",
-	"bottom-left",
-	"bottom-right"
-];
 function makeFactory() {
 	return (require) => {
 		var module = { exports: {} };
@@ -147,8 +642,8 @@ function makeFactory() {
 			document.head.appendChild(tag);
 		}
 		let ANIM = buildMinimalAnim();
-		function Pet() {
-			const [size, setSize] = useState(462);
+		function PetCard({ cfg }) {
+			const [size, setSize] = useState(cfg.size);
 			const halfW = size / 2;
 			const halfH = size * 9 / 16 / 2;
 			const [anim, setAnim] = useState(ANIM.idle[0] ?? "");
@@ -156,40 +651,24 @@ function makeFactory() {
 			const [facing, setFacing] = useState("left");
 			const [dragging, setDragging] = useState(false);
 			const [customPos, setCustomPos] = useState(null);
-			const [corner, setCorner] = useState("bottom-right");
+			const [corner, setCorner] = useState(cfg.corner);
 			const [margin, setMargin] = useState({
-				x: 24,
-				y: 0
+				x: cfg.marginX,
+				y: cfg.marginY
 			});
 			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);
-						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
-						}));
-					}
-					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
+				});
+			}, [
+				cfg.size,
+				cfg.corner,
+				cfg.marginX,
+				cfg.marginY
+			]);
 			const [seq, setSeq] = useState(0);
 			const rootRef = useRef(null);
 			const stageRef = useRef(null);
@@ -538,15 +1017,73 @@ function makeFactory() {
 				})
 			});
 		}
+		function PetMulti() {
+			const [pets, setPets] = useState([]);
+			const [ready, setReady] = useState(false);
+			useEffect(() => {
+				let alive = true;
+				(async () => {
+					try {
+						const r1 = await fetch("/pet/config.jsonc");
+						if (!r1.ok) return;
+						const obj = JSON.parse(stripJsonc(await r1.text()));
+						ANIM = buildAnim(obj);
+						const defaults = extractDefaultPets(obj);
+						let user = {};
+						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) => {
+							setPets(list);
+							petBridge.current = list;
+						};
+						setPets(merged);
+						setReady(true);
+					} catch {}
+				})();
+				return () => {
+					alive = false;
+					petBridge.sync = null;
+				};
+			}, []);
+			return ready ? pets.map((p) => h(PetCard, {
+				key: p.id,
+				cfg: p
+			})) : null;
+		}
 		const name = "pet";
-		const inject = ["slots"];
+		const inject = ["slots", "locale"];
 		function apply(ctx, _config) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dsh-pet: dictionaries");
+			const t = ctx.locale.bind(NS);
 			ctx.slots.inject("shell.overlay", function* () {
 				yield ctx.slots.register({
 					name: "shell.overlay",
 					id: "pet",
 					order: 1e3
-				}, () => 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);
 			});
 		}
 		module.exports = {