dsh-folia 4.10.1 → 4.12.3

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,17 @@ 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) {
+				        // 读"当前在用哪套皮肤"必须**由浏览器发**，不能走宿主代理：
+				        // `/api/skin-center/v2/*` 的读写被 DSH 自己的会话鉴权挡着，宿主 fetch 没有 cookie
+				        // ⇒ 代理拿到 401（实测报错「操作失败：skin-center-401」）。
+				        // 但**不许裸 fetch**（src/api-client.js 的不变量：业务代码零裸 fetch）——
+				        // apiUrl() 对带 scheme 的地址原样放行，而 location.origin 是同源 ⇒ 照旧带会话。
+				        if (doc.skinCenter === "present") {
+				          try {
+				            const a = await apiJson(location.origin + "/api/skin-center/v2/active", { parse: "always" });
+				            if (a && a.ok) doc.active = (a.data && a.data.active) || "";
+				          } catch { /* 读不到就显示"无使用中" */ }
+				        }
 				        setState(doc);
 				        if (doc.siteError && doc.siteError !== "site-off") {
 				          setNote({ ok: false, text: weT("站点清单读不到：{msg}", { msg: String(doc.siteError) }) });
@@ -18304,10 +18343,47 @@ 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 {
+				      // 切换皮肤**由浏览器直接写**皮肤中心自己的端点（同源请求自带会话）；
+				      // 走宿主代理会 401 —— DSH 对 `/api/skin-center/v2/*` 的读写都做会话鉴权，宿主 fetch 没有 cookie。
+				      if (kind === "activate") {
+				        const wantId = (payload && payload.id) || null;
+				        // ⚠️ 这里写入的必须是**皮肤中心自己认识的 id**（= skin.json 里的原始 id），
+				        // 不能用归一键：归一只是用来"比对"，拿去当写值会变成另一个名字 ——
+				        // 皮肤中心的 activePostHandler 对解析不到的 id 回 404 skin-not-found（实测报错 skin-center-404）。
+				        if (wantId) {
+				          const local = ((state && state.installed) || []).find((s) => s.id === wantId);
+				          if (!local) {
+				            setNote({ ok: false, text: weT("这个皮肤不在本机（先安装）") });
+				            return;
+				          }
+				        }
+				        // 切换皮肤**由浏览器直接写**皮肤中心自己的端点（同源、自带会话）；
+				        // 走宿主代理会 401 —— DSH 对 `/api/skin-center/v2/*` 的读写都做会话鉴权，宿主 fetch 没有 cookie。
+				        // 统一走 api-client（不裸 fetch）：绝对 URL 原样放行，`location.origin` 是同源 ⇒ 会话照旧带上。
+				        const resp = await apiPostJson(location.origin + "/api/skin-center/v2/active", { active: wantId }, { parse: "always" });
+				        if (!(resp && resp.ok)) {
+				          setNote({ ok: false, text: weT("操作失败：{code}", { code: "skin-center-" + ((resp && resp.status) || 0) }) });
+				          return;
+				        }
+				        // 两条收敛路径：① 广播皮肤中心自己监听的 `dsh-skin-applied`（立即就地切换）；
+				        // ② 它另外每 2 秒轮询 /api/skin-center/v2/active（事件丢了也会在 2 秒内跟上）。
+				        try {
+				          window.dispatchEvent(new CustomEvent("dsh-skin-applied", { detail: { id: wantId } }));
+				        } catch { /* 老环境没有 CustomEvent 也无所谓，②会兜住 */ }
+				        setNote({
+				          ok: true,
+				          text: wantId ? weT("已切换到：{name}", { name: label || "" }) : weT("已恢复官方默认外观"),
+				        });
+				        await load(true);
+				        return;
+				      }
+
 				      const resp = await apiPostJson("/skins/" + kind, payload || {}, { parse: "always" });
 				      const r = (resp && resp.data) || null;
 				      if (resp && resp.ok && r && r.ok) {
@@ -18316,7 +18392,7 @@ 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 || "" }) });
@@ -18330,6 +18406,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 +18454,7 @@ window.__ModuleLoader__.load({
 				      key: "hint",
 				      className: "we-picker__hint",
 				      style: { margin: "6px 0 4px", opacity: 0.8 },
-				    }, weT("皮肤包安装到皮肤中心目录；装完到「设置 → 皮肤中心」里点选即可启用。皮肤中心与本插件读同一个目录，无需重启。")));
+				    }, weT("本页签可以直接切换皮肤：装完点「应用」即可，无需打开设置页。皮肤包落在皮肤中心目录，两边读同一份。")));
 				  }
 
 				  // 提示行常驻占位（与开机动画/桌宠页签同一条纪律：不因 note 出现/消失让面板跳高度）
@@ -18390,25 +18469,73 @@ 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);
+
+				  /**
+				   * 站点条目 → 本机已装皮肤的真实 id（皮肤中心只认这个）。
+				   *
+				   * 站点 slug 由标题生成、并为"全站唯一"可能被加 `skin-` 前缀；本机目录/皮肤中心用的是
+				   * skin.json 里的 id。两者可能不同（实测：站点 windows-xp-luna ↔ 本机 xp）。
+				   * 先按归一的 id 比，再按标题兜底；都没有就返回空串（表示"本机没有这一套"）。
+				   */
+				  const localIdOf = (siteItem) => {
+				    const list = (state && state.installed) || [];
+				    const byId = list.find((x) => normSkinId(x.id) === normSkinId(siteItem.id));
+				    if (byId) return byId.id;
+				    const wantTitle = String((siteItem && siteItem.title) || "").trim();
+				    if (!wantTitle) return "";
+				    const byTitle = list.find((x) => String(x.name || "").trim() === wantTitle);
+				    return byTitle ? byTitle.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("卸载")),
 				          ),
-				        )),
+				        );
+				        }),
 				    ));
 				  }
 
@@ -18420,6 +18547,10 @@ window.__ModuleLoader__.load({
 				      ? [React.createElement("span", { key: "none", className: "we-picker__hint" }, weT("站点上还没有皮肤。"))]
 				      : site.map((s) => {
 				        const busyThis = busy === "install:" + s.id;
+				        // 站点条目的 slug 与本机皮肤 id **不一定相同**（站点 slug 由标题生成/为避撞名会加 skin- 前缀），
+				        // 而皮肤中心只认 skin.json 里的原始 id ⇒ 写之前必须换成**本机那个 id**，
+				        // 否则它的 activePostHandler 会回 404 skin-not-found（实测报错 skin-center-404）。
+				        const localId = localIdOf(s);
 				        return React.createElement("div", { key: s.id, style: SKIN_STYLE.card },
 				          s.thumbUrl
 				            ? React.createElement("div", {
@@ -18429,14 +18560,28 @@ 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
+				              // 已装的站点卡片也要能**直接应用**：用户是照着站点缩略图挑的，
+				              // 让他再滚回上面的「本机已装」区去点一次是多余的一步（实测反馈）。
+				              ? [
+				                localId && isActiveSkin(localId)
+				                  ? 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: localId }, s.title),
+				                  }, busy === "activate:" + localId ? 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,7 @@ export function registerSkinsRoutes(webServer, c) {
       sendJson(res, 200, { ok: true, id });
     },
   }));
+
+  // 切换皮肤与"当前皮肤"都由**浏览器**直接读写皮肤中心的 /api/skin-center/v2/active：
+  // DSH 对该路径的读写做会话鉴权（cookie），宿主 fetch 没有会话 ⇒ 代理只会得到 401（实测）。
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-folia",
-  "version": "4.10.1",
+  "version": "4.12.3",
   "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"
   },