dsh-folia 4.10.1 → 4.12.1

package/cordis.patch.yml

@@ -1,16 +1,23 @@
-# dsh-plugin-folia bundle patch — single-row form.
+# dsh-plugin-folia bundle patch.
 #
-# This bundle used to contribute EIGHT host rows (the plugin itself plus seven
-# subpackage rows: about-notice / mascot-avatar / media-bridge / fonts / fx /
-# parallax / pet-link). Those seven now live in this package under
-# `lib/components/` and are mounted from `apply()` in `lib/index.js`, so the row
-# set is exactly one row: this bundle.
+# Row set: this bundle + the skin centre it brings along.
 #
-# Why the merge (see lib/index.js "BUNDLE-MERGE"): each subpackage browser half
-# used to reach the host half through `require('<main package name>')`, which is
-# the most fragile edge in the plugin — it broke every time the main package was
-# renamed, and an id mismatch silently blanked the font / effect panels. One
-# package means no cross-package module id at all.
+# ── 为什么这里有第二条 row ──────────────────────────────────────────────────
+# 我们不再自己实现皮肤渲染：皮肤包（`skin.json` + `skin.css` + 可选 `hooks.mjs`）由
+# `@linxin666/dsh-client-ui-skin-center` 加载与启用，我们的「助手皮肤」页签只负责把站点 zip
+# 解到它读的那个目录（`$DSH_HOME/skins`）。所以它必须是**装得上的**：本包把它列为
+# `dependencies`，并在下面插一条 row —— 用户装 dsh-folia 就同时得到两件套，不用再单独装。
+#
+# ── 重复 row 为什么不会打起来（实测依据，不是猜测）────────────────────────
+# 1) 宿主半边：它的 `apply` 走 `mountOnce('@linxin666/dsh-client-ui-skin-center', …)`，
+#    以 `globalThis[Symbol.for('dsh-web.mounted-plugins')]` 记账 ⇒ 第二次挂载是空操作，
+#    不会重复注册 webserver 路由。
+# 2) 客户端半边：它的设置分区注册包在 `try { ctx.slots.register(...) } catch { return () => {} }`，
+#    重复注册被吞掉 ⇒ 不会出现两张「皮肤」设置页。
+# 于是「用户已有 dsh-web-all（它也插了一条 row）」与「只用我们」两种情形都成立。
+#
+# 版本：依赖写 `^0.4.8`（本仓实测过的版本线）；它若大改 v1alpha1 契约，我们跟着升级即可。
+# 判据：test/verify-skin-center-bundle.mjs 会同时钉住「声明了依赖」与「插了唯一 id 的 row」。
 #
 # A patch replaces the targeted row's whole `config`, so only additive `insert`
 # rows appear here (we never override an existing shipped row).
@@ -18,3 +25,13 @@
 - insert:
     - id: folia
       name: 'dsh-folia'
+    # 皮肤中心：独立 npm 包（BSD-3-Clause），本包作为依赖携带。
+    #
+    # ⚠️ row id **不能**以 `folia-` 开头：`lib/subpackage-boot.js#subpackageSpecifiers` 把
+    #    「id 以 `folia-` 开头的行」当作**我们自己的子包行**做启动自检（解析不到就抛，因为宿主
+    #    对行级失败是静默的）。给第三方行起 `folia-skin-center` 这种 id 会被误判成"我们的子包"
+    #    ⇒ 自检去仓库 node_modules 里解析它，开发树里没有这个依赖就直接抛，整个 apply 失败。
+    #    所以这里用不撞前缀的 `skin-center`（也与 web-all 的 `web-ui-skin-center`、
+    #    官方包的 `ui-skin-center` 都不同名）。
+    - id: skin-center
+      name: '@linxin666/dsh-client-ui-skin-center'

package/lib/client.js

@@ -808,6 +808,24 @@ window.__ModuleLoader__.load({
 				  "复制失败，请手动选中上面的命令": "Copy failed — select the command above manually",
 				  "复制命令": "Copy command",
 				  "先装皮肤中心，否则皮肤装好也没法启用": "Install the skin centre first, or the skin cannot be enabled",
+
+				  // ── 助手皮肤：页签内直接切换（4.12.0）────────────────────────────────
+				  " · 使用中：{name}": " · active: {name}",
+				  "✓ ": "✓ ",
+				  "正在恢复…": "Restoring…",
+				  "恢复默认外观": "Restore default look",
+				  "应用": "Apply",
+				  "切换中…": "Switching…",
+				  "使用中": "Active",
+				  "正在使用，先切到别的再卸": "Currently active — switch to another skin before removing",
+				  "已切换到：{name}": "Switched to: {name}",
+				  "已恢复官方默认外观": "Restored the default look",
+				  "这个皮肤不在本机（先安装）": "This skin is not installed locally — install it first",
+				  "装皮肤中心后才能切换皮肤（见下面的安装命令）": "The skin centre is required to switch skins (install command below)",
+				  "皮肤 id 不合法": "Invalid skin id",
+				  "已安装：{name} —— 点「应用」就能切换": "Installed: {name} — press Apply to switch",
+				  "本页签可以直接切换皮肤：装完点「应用」即可，无需打开设置页。皮肤包落在皮肤中心目录，两边读同一份。":
+				    "This tab switches skins directly: install, then press Apply — no need to open the settings page. Packs land in the skin centre's folder and both sides read the same files.",
 				};
 
 				// ── 内联模块：src/i18n-copy-picker.js —— 英文词表域：壁纸选择器与快捷面板（picker-* · quick-panel · sidebar-right · theme-follow）（构建期注入；勿手改本段）──
@@ -18279,6 +18297,16 @@ window.__ModuleLoader__.load({
 				  return (v / 1048576).toFixed(1) + " MB";
 				}
 
+				/**
+				 * 皮肤 id 的归一键：站点上的 slug 是**全站唯一**的，撞名时上传工具会加 `skin-` 前缀
+				 * （实测：blue-throated-bee-eater 同时是桌宠 id ⇒ 站上叫 skin-blue-throated-bee-eater），
+				 * 而本机目录名用的是 skin.json 里的原始 id。两边比对必须先归一，否则"已安装"会显示成未安装。
+				 */
+				function normSkinId(raw) {
+				  const s = String(raw || "").trim().toLowerCase();
+				  return s.startsWith("skin-") ? s.slice(5) : s;
+				}
+
 				function SkinsTabPanel() {
 				  const [state, setState] = React.useState(null);
 				  const [busy, setBusy] = React.useState("");
@@ -18289,6 +18317,14 @@ window.__ModuleLoader__.load({
 				      const resp = await apiJson("/skins/list" + (force ? "?refresh=1" : ""), { parse: "always" });
 				      const doc = (resp && resp.data) || null;
 				      if (resp && resp.ok && doc && doc.ok) {
+				        // 顺带问一下当前在用哪套皮肤（皮肤中心没装时它会 409，忽略即可 —— 页签本来就会提示"缺插件"）
+				        if (doc.skinCenter === "present") {
+				          try {
+				            const a = await apiJson("/skins/active", { parse: "always" });
+				            const ad = (a && a.data) || null;
+				            if (a && a.ok && ad && ad.ok) doc.active = ad.active || "";
+				          } catch { /* 读不到就显示"无使用中" */ }
+				        }
 				        setState(doc);
 				        if (doc.siteError && doc.siteError !== "site-off") {
 				          setNote({ ok: false, text: weT("站点清单读不到：{msg}", { msg: String(doc.siteError) }) });
@@ -18304,8 +18340,10 @@ window.__ModuleLoader__.load({
 				  React.useEffect(() => { load(false); }, [load]);
 
 				  const act = async (kind, payload, label) => {
+				    // 结构性操作才锁整块 UI；`activate` 是幂等的、而且要让人能连点换皮肤，所以不锁。
 				    const structural = kind === "install" || kind === "remove";
 				    if (structural) setBusy(kind + ":" + ((payload && payload.id) || ""));
+				    if (kind === "activate") setBusy("activate:" + ((payload && payload.id) || ""));
 				    setNote(null);
 				    try {
 				      const resp = await apiPostJson("/skins/" + kind, payload || {}, { parse: "always" });
@@ -18316,10 +18354,23 @@ window.__ModuleLoader__.load({
 				            ok: true,
 				            text: r.exists
 				              ? weT("已安装过：{name}", { name: label || "" })
-				              : weT("已安装：{name} —— 到「设置 → 皮肤中心」点它即可启用", { name: label || "" }),
+				              : weT("已安装：{name} —— 点「应用」就能切换", { name: label || "" }),
 				          });
 				        }
 				        if (kind === "remove") setNote({ ok: true, text: weT("已卸载：{name}", { name: label || "" }) });
+				        if (kind === "activate") {
+				          // 两条收敛路径：① 广播皮肤中心自己监听的 `dsh-skin-applied`（立即就地切换）；
+				          // ② 它另外每 2 秒轮询 /api/skin-center/v2/active（事件丢了也会在 2 秒内跟上）。
+				          try {
+				            window.dispatchEvent(new CustomEvent("dsh-skin-applied", { detail: { id: (payload && payload.id) || null } }));
+				          } catch { /* 老环境没有 CustomEvent 也无所谓，②会兜住 */ }
+				          setNote({
+				            ok: true,
+				            text: payload && payload.id
+				              ? weT("已切换到：{name}", { name: label || "" })
+				              : weT("已恢复官方默认外观"),
+				          });
+				        }
 				        await load(true);
 				      } else {
 				        const code = (r && r.error) || "failed";
@@ -18330,6 +18381,9 @@ window.__ModuleLoader__.load({
 				          'host-not-allowed': weT("下载地址不在白名单里"),
 				          'site-off': weT("站点被关闭了（DSH_FOLIA_SITE=off）"),
 				          'not-a-zip': weT("这个文件不是 zip"),
+				          'not-installed': weT("这个皮肤不在本机（先安装）"),
+				          'skin-center-missing': weT("装皮肤中心后才能切换皮肤（见下面的安装命令）"),
+				          'bad-id': weT("皮肤 id 不合法"),
 				        };
 				        setNote({ ok: false, text: map[code] || weT("操作失败：{code}", { code }) });
 				      }
@@ -18375,7 +18429,7 @@ window.__ModuleLoader__.load({
 				      key: "hint",
 				      className: "we-picker__hint",
 				      style: { margin: "6px 0 4px", opacity: 0.8 },
-				    }, weT("皮肤包安装到皮肤中心目录；装完到「设置 → 皮肤中心」里点选即可启用。皮肤中心与本插件读同一个目录，无需重启。")));
+				    }, weT("本页签可以直接切换皮肤：装完点「应用」即可，无需打开设置页。皮肤包落在皮肤中心目录，两边读同一份。")));
 				  }
 
 				  // 提示行常驻占位（与开机动画/桌宠页签同一条纪律：不因 note 出现/消失让面板跳高度）
@@ -18390,25 +18444,56 @@ window.__ModuleLoader__.load({
 				  }, note ? note.text : "\u00a0"));
 
 				  const installed = (state && state.installed) || [];
+				  const activeId = (state && state.active) || "";
+				  /** 这个 id 是不是"正在用"的那套（两边都归一后比，站点 slug 可能带 skin- 前缀）。 */
+				  const isActiveSkin = (id) => Boolean(activeId) && normSkinId(activeId) === normSkinId(id);
 				  if (state) {
 				    children.push(React.createElement("div", { key: "installed-head", className: "we-picker__hint" },
-				      weT("本机已装（{n}）", { n: installed.length })));
+				      weT("本机已装（{n}）", { n: installed.length }),
+				      activeId ? weT(" · 使用中：{name}", { name: activeId }) : ""));
+				    // 「恢复默认」：清空选择、回到官方外观。只有确实有皮肤在用的时候才有意义。
+				    if (activeId) {
+				      children.push(React.createElement("button", {
+				        key: "clear",
+				        className: "we-picker__btn", type: "button",
+				        style: { alignSelf: "flex-start", margin: "0 0 6px" },
+				        disabled: Boolean(busy),
+				        onClick: () => act("activate", { id: "" }, ""),
+				      }, busy === "activate:" ? weT("正在恢复…") : weT("恢复默认外观")));
+				    }
 				    children.push(React.createElement("div", { key: "installed", style: SKIN_STYLE.grid },
 				      installed.length === 0
 				        ? [React.createElement("span", { key: "none", className: "we-picker__hint" }, weT("还没有安装任何皮肤 —— 从下面的站点清单里挑一个。"))]
-				        : installed.map((s) => React.createElement("div", { key: s.id, style: SKIN_STYLE.card },
-				          React.createElement("div", { style: { ...SKIN_STYLE.title, color: s.accent || undefined } }, s.name || s.id),
+				        : installed.map((s) => {
+				          const isActive = isActiveSkin(s.id);
+				          const busyThis = busy === "activate:" + s.id;
+				          return React.createElement("div", {
+				            key: s.id,
+				            style: isActive ? { ...SKIN_STYLE.card, borderColor: "rgba(120,220,150,0.75)" } : SKIN_STYLE.card,
+				          },
+				          React.createElement("div", { style: { ...SKIN_STYLE.title, color: s.accent || undefined } },
+				            (isActive ? weT("✓ ") : "") + (s.name || s.id)),
 				          React.createElement("div", { style: SKIN_STYLE.meta },
 				            [s.version ? "v" + s.version : "", skinFmtBytes(s.bytes), s.hasHooks ? weT("含动效钩子") : ""]
 				              .filter(Boolean).join(" · ")),
 				          React.createElement("div", { style: { display: "flex", gap: "6px", alignItems: "center" } },
+				            // 「应用」= 写皮肤中心的 active + 广播 `dsh-skin-applied`，就地切换（不刷新页面）。
+				            isActive
+				              ? React.createElement("span", { style: { ...SKIN_STYLE.badge, background: "rgba(60,160,90,0.55)" } }, weT("使用中"))
+				              : React.createElement("button", {
+				                className: "we-picker__btn", type: "button",
+				                disabled: Boolean(busy),
+				                onClick: () => act("activate", { id: s.id }, s.name),
+				              }, busyThis ? weT("切换中…") : weT("应用")),
 				            React.createElement("button", {
 				              className: "we-picker__btn", type: "button",
-				              disabled: Boolean(busy),
+				              disabled: Boolean(busy) || isActive,
+				              title: isActive ? weT("正在使用，先切到别的再卸") : undefined,
 				              onClick: () => act("remove", { id: s.id }, s.name),
 				            }, busy === "remove:" + s.id ? weT("卸载中…") : weT("卸载")),
 				          ),
-				        )),
+				        );
+				        }),
 				    ));
 				  }
 
@@ -18429,14 +18514,29 @@ window.__ModuleLoader__.load({
 				          React.createElement("div", { style: SKIN_STYLE.title, title: s.title }, s.title),
 				          React.createElement("div", { style: SKIN_STYLE.meta },
 				            [skinFmtBytes(s.bytes), (s.tags || []).includes("动态") ? weT("动态") : ""].filter(Boolean).join(" · ")),
-				          s.installed
-				            ? React.createElement("div", { style: SKIN_STYLE.badge }, weT("已安装"))
-				            : React.createElement("button", {
-				              className: "we-picker__btn", type: "button",
-				              disabled: Boolean(busy),
-				              title: skinCenter === "absent" ? weT("先装皮肤中心，否则皮肤装好也没法启用") : undefined,
-				              onClick: () => act("install", { id: s.id, url: s.url }, s.title),
-				            }, busyThis ? weT("安装中…") : weT("安装")),
+				          React.createElement("div", { style: { display: "flex", gap: "6px", alignItems: "center", flexWrap: "wrap" } },
+				            s.installed
+				              // 已装的站点卡片也要能**直接应用**：用户是照着站点缩略图挑的，
+				              // 让他再滚回上面的「本机已装」区去点一次是多余的一步（实测反馈）。
+				              // 站点 slug 与本机目录名可能差一个 `skin-` 前缀 ⇒ 用归一后的比较。
+				              ? [
+				                isActiveSkin(s.id)
+				                  ? React.createElement("span", { key: "on", style: { ...SKIN_STYLE.badge, background: "rgba(60,160,90,0.55)" } }, weT("使用中"))
+				                  : React.createElement("button", {
+				                    key: "apply",
+				                    className: "we-picker__btn", type: "button",
+				                    disabled: Boolean(busy),
+				                    onClick: () => act("activate", { id: normSkinId(s.id) }, s.title),
+				                  }, busy === "activate:" + normSkinId(s.id) ? weT("切换中…") : weT("应用")),
+				                React.createElement("span", { key: "done", style: SKIN_STYLE.badge }, weT("已安装")),
+				              ]
+				              : React.createElement("button", {
+				                className: "we-picker__btn", type: "button",
+				                disabled: Boolean(busy),
+				                title: skinCenter === "absent" ? weT("先装皮肤中心，否则皮肤装好也没法启用") : undefined,
+				                onClick: () => act("install", { id: s.id, url: s.url }, s.title),
+				              }, busyThis ? weT("安装中…") : weT("安装")),
+				          ),
 				        );
 				      }),
 				  ));

package/lib/routes/skins.js

@@ -391,4 +391,73 @@ export function registerSkinsRoutes(webServer, c) {
       sendJson(res, 200, { ok: true, id });
     },
   }));
+
+  /* ④ 应用：把"选中的皮肤"写进皮肤中心的 active 端点 —— **不自己实现渲染**。
+   *
+   * 为什么这样接：皮肤中心的客户端有两条收敛路径（读它的源码得到，不是猜）：
+   *   · `window` 上的 `dsh-skin-applied` 事件（`detail: { id }`）⇒ 立即就地切换；
+   *   · 每 2000ms 轮询 `/api/skin-center/v2/active` ⇒ 事件丢了也会在 2 秒内收敛。
+   * 所以这里只写"选择"，客户端再补一个事件把切换做成瞬时的。皮肤中心没装时明确 409，
+   * 而不是让用户点了没反应。
+   */
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: `${base}/skins/activate`,
+    handler: async (req, res) => {
+      if ((req.method || 'GET').toUpperCase() !== 'POST') { sendJson(res, 405, { ok: false, error: 'method-not-allowed' }); return; }
+      const host = req.headers && req.headers.host;
+      const state = await probeSkinCenter(host, true);
+      if (state === 'absent') { sendJson(res, 409, { ok: false, error: 'skin-center-missing' }); return; }
+      const body = await readJsonBody(req);
+      // 允许清空（回到官方默认）：id 传空串 / null。
+      const raw = body && body.id;
+      const requested = (raw === null || raw === undefined || String(raw) === '') ? null : safeSkinId(raw);
+      if (raw !== null && raw !== undefined && String(raw) !== '' && !requested) {
+        sendJson(res, 400, { ok: false, error: 'bad-id' });
+        return;
+      }
+      // 只允许切到**本机真实存在**的皮肤：否则皮肤中心会尝试渲染一个不存在的目录。
+      if (requested && !existsSync(join(skinsRoot(), requested))) {
+        sendJson(res, 404, { ok: false, error: 'not-installed' });
+        return;
+      }
+      try {
+        const r = await fetch('http://' + host + '/api/skin-center/v2/active', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ active: requested }),
+          signal: AbortSignal.timeout(6000),
+        });
+        const text = await r.text();
+        let doc = null;
+        try { doc = JSON.parse(text); } catch { /* 非 JSON */ }
+        if (!r.ok) {
+          sendJson(res, 502, { ok: false, error: 'skin-center-' + r.status, detail: String(text).slice(0, 160) });
+          return;
+        }
+        sendJson(res, 200, { ok: true, active: requested, skinCenter: doc && doc.active });
+      } catch (e) {
+        sendJson(res, 502, { ok: false, error: e && e.name === 'TimeoutError' ? 'timeout' : 'network' });
+      }
+    },
+  }));
+
+  /* ⑤ 当前皮肤（给面板显示"使用中"，读的是皮肤中心自己记的选择） */
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: `${base}/skins/active`,
+    handler: async (req, res) => {
+      const host = req.headers && req.headers.host;
+      const state = await probeSkinCenter(host, true);
+      if (state === 'absent') { sendJson(res, 409, { ok: false, error: 'skin-center-missing' }); return; }
+      try {
+        const r = await fetch('http://' + host + '/api/skin-center/v2/active', { signal: AbortSignal.timeout(5000) });
+        const doc = await r.json().catch(() => null);
+        if (!r.ok) { sendJson(res, 502, { ok: false, error: 'skin-center-' + r.status }); return; }
+        sendJson(res, 200, { ok: true, active: (doc && doc.active) || null });
+      } catch (e) {
+        sendJson(res, 502, { ok: false, error: e && e.name === 'TimeoutError' ? 'timeout' : 'network' });
+      }
+    },
+  }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-folia",
-  "version": "4.10.1",
+  "version": "4.12.1",
   "description": "Folia 壁纸引擎：把本机 Wallpaper Engine 壁纸搬进 DSH 界面（场景实时渲染 / 视频 / 网页），内置液态玻璃与 Folia 吉祥物，并可从自建站点拉取壁纸。单包形态（组件已合并）。",
   "type": "module",
   "engines": {
@@ -193,6 +193,7 @@
     }
   },
   "dependencies": {
+    "@linxin666/dsh-client-ui-skin-center": "^0.4.8",
     "webwallgl": "^3.0.0",
     "x11": "^4.3.1"
   },