dsh-folia 2.4.6 → 2.6.0

package/lib/client.js

@@ -16230,6 +16230,113 @@ window.__ModuleLoader__.load({
 				  return code;
 				}
 
+				/**
+				 * 把一套皮肤的样式**当场**挂进文档。
+				 *
+				 * 为什么是 `<style>` 而不是 `<link>`：
+				 *   · `<link rel=stylesheet>` 是**异步**的，加载完成的时机不定，容易输给皮肤中心随后
+				 *     重新注入的那份；
+				 *   · `<style>` 一赋值就参与样式计算，且追加到 `<body>` **末尾** ⇒ 文档顺序最后，
+				 *     同等特异性下后写的赢。这是"不刷新换肤"能真正看见的关键。
+				 *
+				 * 仍然不跑 `hooks.mjs`（粒子等动效），那部分只有整页重载才生效。
+				 *
+				 * @param {string} id 皮肤 id
+				 * @returns {Promise<{ bytes: number, rules: number }>}
+				 */
+				async function applySkinCss(id) {
+				  const resp = await apiFetch("/skins/css?id=" + encodeURIComponent(id) + "&t=" + Date.now(), {
+				    parse: false,
+				    cache: "no-store",
+				  });
+				  if (!resp || !resp.ok || !resp.response) throw new Error("css-http-" + ((resp && resp.status) || 0));
+				  const css = await resp.response.text();
+				  if (!css || !css.trim()) throw new Error("css-empty");
+				  let el = document.getElementById("folia-skin-hot");
+				  if (!el) {
+				    el = document.createElement("style");
+				    el.id = "folia-skin-hot";
+				    // 挂 body 末尾（不是 head）：文档顺序最后 ⇒ 同等特异性下覆盖先前的规则。
+				    (document.body || document.head).appendChild(el);
+				  }
+				  el.textContent = css;
+				  let rules = 0;
+				  try { rules = (el.sheet && el.sheet.cssRules && el.sheet.cssRules.length) || 0; } catch { /* 读不到就报 0 */ }
+				  return { bytes: css.length, rules };
+				}
+
+				/**
+				 * 搭出皮肤的**背景层**：`body > [data-dsh-skin-layer="background"]`，z-index -2，
+				 * 里面放 `<video>`/`<img>`（object-fit: cover）+ 一层 scrim 渐变。
+				 *
+				 * 为什么必须自己搭：背景不在 CSS 里，而是 `contributes.backgroundMedia`；皮肤中心只在
+				 * 启动时建这个元素。热切换时没人建 ⇒ 只剩下配色变了、背景还是一片空 ——
+				 * 用户看到的"水墨丹青没有背景动画"就是这个（它是一段 21 MB 的循环视频）。
+				 * 元素契约（z-index -2、媒体作直接子元素）从各皮肤 CSS 反推：
+				 * `future-window` 写 `[data-dsh-skin-layer="background"] > img`，
+				 * `ice-princess` 的注释直接写明"挂在 z-index -2 这层上"。
+				 *
+				 * @param {string} id 皮肤 id
+				 * @returns {Promise<{ kind: string }>}
+				 */
+				async function applySkinBackground(id) {
+				  const resp = await apiJson("/skins/manifest?id=" + encodeURIComponent(id));
+				  const doc = (resp && resp.data) || null;
+				  const media = doc && doc.backgroundMedia;
+				  let dark = false;
+				  try { dark = Boolean(document.body && document.body.hasAttribute("data-ds-dark-theme")); } catch { /* 取不到按浅色 */ }
+				  const pick = media ? (dark ? (media.dark || media.light) : (media.light || media.dark)) : null;
+
+				  const existing = document.querySelector('[data-dsh-skin-layer="background"]');
+				  if (!pick || !pick.url) {
+				    // 这套皮肤没有背景媒体：把上一次留下的层清掉，别串味。
+				    if (existing) existing.remove();
+				    return { kind: "none" };
+				  }
+
+				  let layer = existing;
+				  if (!layer) {
+				    layer = document.createElement("div");
+				    layer.setAttribute("data-dsh-skin-layer", "background");
+				    layer.style.cssText = "position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;";
+				    (document.body || document.documentElement).insertBefore(layer, document.body.firstChild);
+				  }
+				  layer.innerHTML = "";
+
+				  let el;
+				  if (pick.type === "video") {
+				    el = document.createElement("video");
+				    el.autoplay = true;
+				    el.muted = true;
+				    el.loop = true;
+				    el.setAttribute("muted", "");
+				    el.setAttribute("playsinline", "");
+				    el.setAttribute("autoplay", "");
+				    el.setAttribute("loop", "");
+				  } else {
+				    el = document.createElement("img");
+				    el.alt = "";
+				    el.setAttribute("draggable", "false");
+				  }
+				  el.src = pick.url;
+				  // 皮肤 CSS 通过 `> img` / `> video` 选中它 ⇒ 必须是**直接子元素**。
+				  el.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:cover;";
+				  layer.appendChild(el);
+
+				  if (pick.scrim) {
+				    const scrim = document.createElement("div");
+				    scrim.style.cssText = "position:absolute;inset:0;pointer-events:none;background-image:" + pick.scrim + ";";
+				    layer.appendChild(scrim);
+				  }
+
+				  if (pick.type === "video") {
+				    const kick = () => { try { const p = el.play(); if (p && typeof p.catch === "function") p.catch(() => {}); } catch { /* 自动播放被拒就静帧 */ } };
+				    el.addEventListener("loadeddata", kick, { once: true });
+				    kick();
+				  }
+				  return { kind: pick.type };
+				}
+
 				function SkinsTabPanel() {
 				  const [list, setList] = React.useState([]);
 				  const [active, setActive] = React.useState(null);
@@ -16292,25 +16399,31 @@ window.__ModuleLoader__.load({
 				          setNote({ kind: "ok", text: weT("已安装：") + label });
 				          await load(true);
 				        } else if (kind === "activate") {
+				          // **当场换肤**：把皮肤样式同步注入文档，不刷新、不重启。
+				          // 注入结果直接写进提示里（字节数 / 规则条数）：万一样式还是没盖住皮肤中心，
+				          // 这一行就是判断"是没注入"还是"注入了但被压住"的依据，不用再猜。
+				          let info = null;
+				          let applyErr = "";
+				          let bgKind = "none";
+				          try {
+				            info = await applySkinCss(id);
+				            // 样式之后立刻搭背景层：没有它，凡是靠 backgroundMedia 的皮肤（水墨丹青、
+				            // 鲸鱼娘、深海女仆工坊…）都只会"变配色不变画面"。
+				            const bg = await applySkinBackground(id);
+				            bgKind = bg.kind;
+				          } catch (e) {
+				            applyErr = String((e && e.message) || e);
+				          }
 				          setNote({
-				            kind: "ok",
-				            text: weT("已切换到「") + label + weT("」，正在刷新界面…"),
-				            // 皮肤中心**只在页面加载时**应用皮肤：它的 `POST /v2/active` 也只写状态文件，
-				            // 不重绘。所以"真的换肤"只有重新加载这一页一条路 —— 见下面的自动跳转。
+				            kind: applyErr ? "err" : "ok",
+				            text: applyErr
+				              ? weT("已切换为「") + label + weT("」，但样式注入失败：") + applyErr
+				              : weT("已切换到「") + label + weT("」—— 样式 ")
+				                + Math.round(info.bytes / 1024) + " KB / " + info.rules + weT(" 条规则")
+				                + (bgKind === "none" ? weT("，该皮肤无背景媒体") : weT("，背景：") + bgKind),
+				            // hooks（粒子等动效）只有整页重载才会跑：给一个可选入口，不强制。
 				            reload: true,
 				          });
-				          // 一次点击就完成：这里自动重新加载，不再让用户点第二次。
-				          // 用 `location.replace(href)` 而非 `reload()`：桌面壳里 reload 有时被吞掉
-				          //（表现正是"点了没反应"），硬跳转更容易生效，且 replace 不往历史里塞条目。
-				          try {
-				            setTimeout(function tryApply() {
-				              try {
-				                window.location.replace(window.location.href);
-				              } catch (e1) {
-				                try { window.location.reload(); } catch (e2) { /* 交给手动按钮 */ }
-				              }
-				            }, 700);
-				          } catch { /* 环境不支持 → 手动按钮兜底 */ }
 				          // 不再整表重拉：本地标记已经对了，省掉那 600 ms 的"没反应"窗口。
 				        } else if (kind === "remove") {
 				          setNote({ kind: "ok", text: weT("已删除：") + label });
@@ -16380,7 +16493,7 @@ window.__ModuleLoader__.load({
 				    React.createElement("span", null, weT("当前皮肤：") + activeName),
 				    React.createElement("span", {
 				      style: { fontSize: "11px", padding: "1px 6px", borderRadius: "999px", background: "rgba(142,230,168,0.16)", color: "#8ee6a8" },
-				    }, weT("重启 DSH 生效")),
+				    }, weT("已应用")),
 				    ));
 				  }
 
@@ -16443,8 +16556,8 @@ window.__ModuleLoader__.load({
 				            try { window.location.reload(); } catch { /* 极端环境刷不动就让用户手动重启 */ }
 				          }
 				        },
-				        title: weT("重新加载界面以应用新皮肤（对话与设置都在宿主侧，不会丢）"),
-				      }, weT("立即生效"))
+				        title: weT("整页重载 —— 皮肤动效（粒子等）需要重载才跑；纯配色已即时生效"),
+				      }, weT("重载以播放动效"))
 				      : null,
 				    ));
 				  }
@@ -16509,8 +16622,6 @@ window.__ModuleLoader__.load({
 				            : React.createElement("div", { style: SKINS_STYLE.thumb }),
 				          React.createElement("div", { style: SKINS_STYLE.body },
 				            React.createElement("div", { style: SKINS_STYLE.title }, s.name || s.id),
-				            React.createElement("div", { style: SKINS_STYLE.meta },
-				              (s.author ? s.author : weT("未知作者")) + " · " + skinsFmtBytes(s.zipBytes)),
 				            s.tagline ? React.createElement("div", { style: SKINS_STYLE.meta }, s.tagline) : null,
 				            (s.tags || []).length
 				              ? React.createElement("div", { style: SKINS_STYLE.tags },

package/lib/routes/skins.js

@@ -489,6 +489,186 @@ export function registerSkinRoutes(webServer, c) {
     },
   }));
 
+  /* ── 热切换：把皮肤样式自己喂给浏览器 ──────────────────────────────────────
+   * 皮肤中心只在**页面加载时**应用皮肤（它的 host 侧把样式塞进文档、client 侧启动时拉
+   * `/api/skin-center/v2/active`），桌面壳里 `location.reload()` 又常常被吞掉 ⇒
+   * 用户点「使用」后界面永远不变。
+   *
+   * 所以这里补两条只读路由，把 `harness/skins/<id>/` 里的样式与素材直接发给页面：
+   *   GET /skins/css?id=<id>            → skin.css（`url()` 已重写成下面那条素材路由）
+   *   GET /skins/asset?id=<id>&p=<rel>  → 皮肤目录里的任意素材（图片/字体）
+   * 客户端把 CSS 挂成一个 `<link id="folia-skin-hot">` 追加在 `<head>` 末尾 ——
+   * 后加载的规则覆盖先前的，于是**不刷新也能换肤**；hooks（粒子等）不会跑，那部分
+   * 仍归皮肤中心管。
+   */
+
+  /** 读一套皮肤的 manifest，拿 `contributes.stylesheet`。 */
+  function skinStylesheetOf(dir) {
+    try {
+      const doc = JSON.parse(readFileSync(join(dir, 'skin.json'), 'utf8'));
+      const rel = doc && doc.contributes && doc.contributes.stylesheet;
+      if (typeof rel !== 'string') return null;
+      const segs = safeRelPath(rel);
+      if (!segs || segs.includes('..')) return null;
+      return { rel: segs.join('/'), doc };
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * 取 manifests 里某个可选的样式类字段（当前用于 `patches`）。
+   * 与 stylesheet 同样的安全校验：只接受皮肤目录内的相对路径。
+   */
+  function skinAuxFileOf(dir, key) {
+    try {
+      const doc = JSON.parse(readFileSync(join(dir, 'skin.json'), 'utf8'));
+      const rel = doc && doc.contributes && doc.contributes[key];
+      if (typeof rel !== 'string' || !rel) return null;
+      const segs = safeRelPath(rel);
+      if (!segs || segs.includes('..')) return null;
+      return segs.join('/');
+    } catch {
+      return null;
+    }
+  }
+
+  const ASSET_TYPES = {
+    '.css': 'text/css; charset=utf-8',
+    '.js': 'text/javascript; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.gif': 'image/gif',
+    '.avif': 'image/avif',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.ttf': 'font/ttf',
+    '.otf': 'font/otf',
+  };
+
+  /* ── 背景层数据 ────────────────────────────────────────────────────────────
+   * 一套皮肤的"背景"不在 CSS 里，而是 `contributes.backgroundMedia`：
+   *   { light: { type: 'video'|'image', src: 'assets/x.mp4', scrim: '<css 渐变>' }, dark: {...} }
+   * 皮肤中心负责把这层画出来；它的 DOM 契约（从各皮肤 CSS 反推）是
+   *   `body [data-dsh-skin-layer='background']`，z-index -2，视频/图片作为子元素
+   *（`future-window` 直接写 `> img`，`frutiger-aero` 用 `::after` 叠气泡）。
+   * 热切换时没人建这层 ⇒ 背景全空（"水墨丹青没有背景动画"就是这个原因）。
+   */
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: `${base}/skins/manifest`,
+    handler: async (req, res) => {
+      const url = new URL(req.url || '/', 'http://x');
+      const id = url.searchParams.get('id') || '';
+      if (!ID_RE.test(id)) { sendJson(res, 400, { ok: false, error: 'bad-id' }); return; }
+      const harness = harnessRoot();
+      if (!harness) { sendJson(res, 503, { ok: false, error: 'harness-not-found' }); return; }
+      const dir = join(harness, SKINS_DIR_NAME, id);
+      let doc;
+      try {
+        doc = JSON.parse(readFileSync(join(dir, 'skin.json'), 'utf8'));
+      } catch {
+        sendJson(res, 404, { ok: false, error: 'no-manifest' });
+        return;
+      }
+      const c = (doc && doc.contributes) || {};
+      const media = c.backgroundMedia && typeof c.backgroundMedia === 'object' ? c.backgroundMedia : null;
+      /** `src` 相对路径 → 我们的素材路由（浏览器只认这条）。 */
+      const abs = (rel) => {
+        if (typeof rel !== 'string' || !rel) return '';
+        if (/^(?:[a-z]+:|\/)/i.test(rel)) return rel;
+        return `${base}/skins/asset?id=${encodeURIComponent(id)}&p=${encodeURIComponent(rel)}`;
+      };
+      const shape = (m) => (m && typeof m === 'object' ? {
+        type: m.type === 'video' ? 'video' : 'image',
+        url: abs(m.src),
+        scrim: typeof m.scrim === 'string' ? m.scrim : '',
+      } : null);
+      sendJson(res, 200, {
+        ok: true,
+        id,
+        name: typeof doc.name === 'string' ? doc.name : id,
+        backgroundMedia: media ? { light: shape(media.light), dark: shape(media.dark) } : null,
+        hooks: typeof c.hooks === 'string' ? c.hooks : '',
+      });
+    },
+  }));
+
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: `${base}/skins/css`,
+    handler: async (req, res) => {
+      const url = new URL(req.url || '/', 'http://x');
+      const id = url.searchParams.get('id') || '';
+      if (!ID_RE.test(id)) { res.statusCode = 400; res.end(); return; }
+      const harness = harnessRoot();
+      if (!harness) { res.statusCode = 503; res.end(); return; }
+      const dir = join(harness, SKINS_DIR_NAME, id);
+      const sheet = skinStylesheetOf(dir);
+      if (!sheet) { res.statusCode = 404; res.end(); return; }
+      let css;
+      try {
+        // ⚠️ 一套皮肤通常有**两份样式**：`contributes.stylesheet`（token 与结构）与
+        // `contributes.patches`（覆盖补丁）。**很多皮肤把全部改动写在 patches 里，
+        // stylesheet 故意留空**（例如 black-gold-vip 的 skin.css 只有一行注释）。
+        // 只下发 stylesheet ⇒ 换肤"看起来毫无变化"。两份都读，patches 放在后面覆盖。
+        const files = [];
+        files.push(sheet.rel);
+        const patchesRel = skinAuxFileOf(dir, 'patches');
+        if (patchesRel) files.push(patchesRel);
+        css = files.map((rel) => {
+          try { return readFileSync(join(dir, ...rel.split('/')), 'utf8'); } catch { return ''; }
+        }).join('\n/* ---- patches ---- */\n');
+      } catch {
+        res.statusCode = 404;
+        res.end();
+        return;
+      }
+      // `url(...)` 全部改写成素材路由：CSS 是从 `/folia/skins/css` 下发的，相对路径会
+      // 解析到错误的前缀；改成绝对路径后，图片/字体才找得到。
+      const baseDir = sheet.rel.includes('/') ? sheet.rel.slice(0, sheet.rel.lastIndexOf('/')) : '';
+      const abs = (p) => {
+        if (/^(?:[a-z]+:|\/|#|data:)/i.test(p)) return p;
+        const rel = (baseDir ? baseDir + '/' : '') + p;
+        return `${base}/skins/asset?id=${encodeURIComponent(id)}&p=${encodeURIComponent(rel)}`;
+      };
+      css = css.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (m, q, p) => `url("${abs(p.trim())}")`);
+      res.setHeader('Content-Type', 'text/css; charset=utf-8');
+      // 不缓存：换皮肤后必须立刻拿到新的一份，否则用户会看到上一套的样式。
+      res.setHeader('Cache-Control', 'no-store');
+      res.end(css);
+    },
+  }));
+
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: `${base}/skins/asset`,
+    handler: async (req, res) => {
+      const url = new URL(req.url || '/', 'http://x');
+      const id = url.searchParams.get('id') || '';
+      const rel = url.searchParams.get('p') || '';
+      if (!ID_RE.test(id)) { res.statusCode = 400; res.end(); return; }
+      const segs = safeRelPath(rel);
+      if (!segs || segs.includes('..')) { res.statusCode = 400; res.end(); return; }
+      const harness = harnessRoot();
+      if (!harness) { res.statusCode = 503; res.end(); return; }
+      const root = join(harness, SKINS_DIR_NAME, id);
+      const file = join(root, ...segs);
+      if (!resolve(file).startsWith(resolve(root) + sep)) { res.statusCode = 400; res.end(); return; }
+      if (!existsSync(file) || !statSync(file).isFile()) { res.statusCode = 404; res.end(); return; }
+      const ext = (file.slice(file.lastIndexOf('.')).toLowerCase() || '');
+      res.setHeader('Content-Type', ASSET_TYPES[ext] || 'application/octet-stream');
+      res.setHeader('Cache-Control', 'public, max-age=300');
+      res.end(readFileSync(file));
+    },
+  }));
+
   disposers.push(webServer.register({
     kind: 'exact',
     path: `${base}/skins/preview`,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "dsh-folia",
-    "version":  "2.4.6",
+    "version":  "2.6.0",
     "description":  "Folia 壁纸引擎：把本机 Wallpaper Engine 壁纸搬进 DSH 界面（场景实时渲染 / 视频 / 网页），内置液态玻璃与 Folia 吉祥物，并可从自建站点拉取壁纸。单包形态（组件已合并）。",
     "type":  "module",
     "engines":  {