dsh-folia 2.9.2 → 3.0.2

package/lib/client.js

@@ -16256,7 +16256,13 @@ window.__ModuleLoader__.load({
 				    const viaHost = await apiFetch("/skins/scoped-css?id=" + enc, { parse: false, cache: "no-store" });
 				    if (viaHost && viaHost.ok && viaHost.response) {
 				      const text = await viaHost.response.text();
-				      if (text && text.trim()) return { css: text, source: "skin-center" };
+				      if (text && text.trim()) {
+				        // 响应头说明这份是谁作用域化的：
+				        //   skin-center = 拿到了皮肤中心加工的那份；local = 宿主自己做的（等价结果）
+				        let via = "local";
+				        try { via = viaHost.response.headers.get("x-folia-scoped") || "local"; } catch { /* 读不到按 local */ }
+				        return { css: text, source: via === "skin-center" ? "skin-center" : "local-scoped" };
+				      }
 				    }
 				  } catch { /* 代理不可用 ⇒ 继续走下面两条 */ }
 
@@ -16691,11 +16697,13 @@ window.__ModuleLoader__.load({
 				              ? weT("已切换为「") + label + weT("」，但样式注入失败：") + applyErr
 				              : weT("已切换到「") + label + weT("」—— 样式 ")
 				                + Math.round(info.bytes / 1024) + " KB / " + info.rules + weT(" 条规则")
-				                + (info.source === "skin-center" ? weT("（已作用域化）") : weT("（未作用域化，可能显示不全）"))
+				                + ((info.source === "skin-center" || info.source === "local-scoped") ? weT("（已作用域化）") : weT("（未作用域化，可能显示不全）"))
 				                + (bgKind === "none" ? weT("，无背景媒体") : weT("，背景：") + bgKind)
 				                + (hooksInfo.ran ? weT("，动效已启动") : (hooksInfo.reason === "no-hooks" ? weT("，无动效") : weT("，动效未启动(") + hooksInfo.reason + ")"))
+				                + weT("，主题：") + (skinThemeNow() === "dark" ? weT("深色") : weT("浅色"))
 				                + (typeof onClearWallpaper === "function" ? weT("，壁纸已关闭") : ""),
-				            // hooks 已经跑过了；这里只作为"整页重载"的可选入口（极少数皮肤依赖启动期布局）
+				            // 主题与背景变体写进提示：皮肤有 light/dark 两套素材，不写清就会"图对不上"。
+				            // hooks 已经跑过了；reload 只是"整页重载"的可选入口（极少数皮肤依赖启动期布局）
 				            reload: true,
 				          });
 				          // 不再整表重拉：本地标记已经对了，省掉那 600 ms 的"没反应"窗口。
@@ -16863,7 +16871,13 @@ window.__ModuleLoader__.load({
 				  if (shown.length > 0) {
 				    children.push(React.createElement("div", { key: "grid", style: SKINS_STYLE.grid },
 				      shown.map((s) => {
-				        const previewRel = s.previewLight || s.previewDark || "";
+				        // 预览图**跟随当前主题**：每套皮肤都有 light / dark 两份预览（例：居家模型娘的
+				        // 白天房间 vs 夜晚房间）。之前一律取 light，于是"深色模式下看到的效果图"与
+				        // "实际渲染的 dark 变体"完全是两张画 —— 用户自然会觉得对不上。
+				        const darkNow = skinThemeNow() === "dark";
+				        const previewRel = (darkNow
+				          ? (s.previewDark || s.previewLight)
+				          : (s.previewLight || s.previewDark)) || "";
 				        const previewSrc = previewRel
 				          ? apiUrl("/skins/preview?p=" + encodeURIComponent(previewRel))
 				          : "";

package/lib/routes/skins.js

@@ -595,7 +595,16 @@ export function registerSkinRoutes(webServer, c) {
         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 : '',
+        // ⚠️ hooks 的声明位置是 **`facets.client.entry`**，不是 `contributes.hooks`
+        //（契约见皮肤中心 contracts/hooks-api.d.ts：`facets.client.entry (hooks.mjs)`）。
+        // 之前读 contributes.hooks ⇒ 28 套带动效的皮肤全部"无动效"，而那正是它们
+        // 看起来"显示不全"的部分（粒子/漂浮/交互）。这里两个位置都认，以 facets 为准。
+        hooks: (() => {
+          const facets = (doc && doc.facets) || null;
+          const client = facets && facets.client;
+          if (client && typeof client.entry === 'string' && client.entry) return client.entry;
+          return typeof c.hooks === 'string' ? c.hooks : '';
+        })(),
       });
     },
   }));
@@ -680,6 +689,125 @@ export function registerSkinRoutes(webServer, c) {
     },
   }));
 
+  /* ── 自己实现「作用域化」，不再依赖皮肤中心的接口 ────────────────────────────
+   *
+   * 皮肤中心的 `/api/skin-center/v2/skins/<id>/stylesheet` 会走 `transformSkinCss()`：
+   * 把**每条选择器**包进 `html[data-dsh-skin="<id>"]`。这一步决定皮肤能不能压住应用
+   * 自身的面板/令牌规则 —— 作用域化之后特异性更高。
+   *
+   * 但那条路由在网关后面：浏览器直连 401，宿主代发（哪怕透传全部请求头）也可能 401。
+   * 而"让每个用户把自己的会话凭证交给插件"不是可交付的方案。所以这里**自己算**：
+   * 读皮肤目录里的 CSS，做同一件事，输出等价结果。
+   *
+   * 转换规则：
+   *   · 普通规则：`a, b` → `html[data-dsh-skin="x"] a, html[data-dsh-skin="x"] b`
+   *   · 以 `:root` 开头的：开头换成作用域本身
+   *   · 以 `html` 开头的：原样保留（作者自己已作用域化，别套两层）
+   *   · `@media/@supports/@layer/@container`：**递归进去**处理内部规则
+   *   · `@keyframes/@font-face/@page/@property/@import`：原样保留
+   *     （关键帧内部是 `0% {}` 这种选择器，套作用域会直接毁掉动画）
+   */
+
+  /** 从 `openIdx`（指向 `{`）找配对的 `}`，跳过注释与字符串。找不到返回 -1。 */
+  function matchBrace(css, openIdx) {
+    let depth = 0;
+    for (let i = openIdx; i < css.length; i++) {
+      const ch = css[i];
+      if (ch === '/' && css[i + 1] === '*') {
+        const end = css.indexOf('*/', i + 2);
+        if (end < 0) return -1;
+        i = end + 1;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        const quote = ch;
+        for (i++; i < css.length; i++) {
+          if (css[i] === '\\') { i++; continue; }
+          if (css[i] === quote) break;
+        }
+        continue;
+      }
+      if (ch === '{') depth++;
+      else if (ch === '}') {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+    return -1;
+  }
+
+  /** 单个选择器 → 作用域化后的选择器。 */
+  function scopeSelector(sel, scope) {
+    const t = sel.trim();
+    if (!t) return t;
+    if (/^:root\b/.test(t)) return t.replace(/^:root/, scope);
+    if (/^html\b/i.test(t)) return t;          // 作者已作用域化，别套两层
+    return scope + ' ' + t;
+  }
+
+  /** 选择器列表 → 逐项作用域化。**不切括号内的逗号**（:is()/:not()/[a="b,c"]）。 */
+  function scopeSelectorList(list, scope) {
+    const out = [];
+    let depth = 0;
+    let cur = '';
+    for (const ch of list) {
+      if (ch === '(' || ch === '[') depth++;
+      else if (ch === ')' || ch === ']') depth = Math.max(0, depth - 1);
+      if (ch === ',' && depth === 0) { out.push(cur); cur = ''; continue; }
+      cur += ch;
+    }
+    out.push(cur);
+    return out.map((s) => scopeSelector(s, scope)).join(', ');
+  }
+
+  const GROUP_AT = /^@(media|supports|layer|container|scope)\b/i;
+  const KEEP_AT = /^@(keyframes|-webkit-keyframes|font-face|page|property|counter-style|import|charset|namespace)\b/i;
+
+  /** 把整段 CSS 作用域化。看不懂的结构就原样跳过该段（宁可少转，不可转坏）。 */
+  function scopeCss(css, id) {
+    const scope = `html[data-dsh-skin="${id}"]`;
+    let out = '';
+    let i = 0;
+    while (i < css.length) {
+      if (css[i] === '/' && css[i + 1] === '*') {          // 注释原样保留
+        const end = css.indexOf('*/', i + 2);
+        if (end < 0) { out += css.slice(i); break; }
+        out += css.slice(i, end + 2);
+        i = end + 2;
+        continue;
+      }
+      if (/\s/.test(css[i])) { out += css[i++]; continue; }
+
+      if (css[i] === '@') {
+        const headEnd = css.indexOf('{', i);
+        const semi = css.indexOf(';', i);
+        if (semi >= 0 && (headEnd < 0 || semi < headEnd)) {  // 无块 at-rule
+          out += css.slice(i, semi + 1);
+          i = semi + 1;
+          continue;
+        }
+        if (headEnd < 0) { out += css.slice(i); break; }
+        const head = css.slice(i, headEnd).trim();
+        const close = matchBrace(css, headEnd);
+        if (close < 0) { out += css.slice(i); break; }
+        const inner = css.slice(headEnd + 1, close);
+        // 分组 at-rule 递归进去；其余（关键帧/字体面/未知）原样保留
+        out += head + '{' + (GROUP_AT.test(head) ? scopeCss(inner, id) : inner) + '}';
+        i = close + 1;
+        continue;
+      }
+
+      const braceIdx = css.indexOf('{', i);                 // 普通规则
+      if (braceIdx < 0) { out += css.slice(i); break; }
+      const selector = css.slice(i, braceIdx);
+      const close = matchBrace(css, braceIdx);
+      if (close < 0) { out += css.slice(i); break; }
+      out += scopeSelectorList(selector, scope) + '{' + css.slice(braceIdx + 1, close) + '}';
+      i = close + 1;
+    }
+    return out;
+  }
+
   /* ── 皮肤中心「加工后 CSS」的宿主端代理 ──────────────────────────────────────
    * 皮肤中心的 `/skins/<id>/stylesheet|patches` 是 `transformSkinCss()` 的产物：
    * **每条规则被强制包进 `html[data-dsh-skin="<id>"]`**，特异性高于应用自身规则 ——
@@ -733,13 +861,41 @@ export function registerSkinRoutes(webServer, c) {
           if (!text || !text.trim()) continue;
           res.setHeader('Content-Type', 'text/css; charset=utf-8');
           res.setHeader('Cache-Control', 'no-store');
-          res.setHeader('X-Folia-Scoped', '1');
+          res.setHeader('X-Folia-Scoped', 'skin-center');
           res.end(text);
           return;
         } catch { /* 这一段失败就试下一段 */ }
       }
-      res.statusCode = 404;
-      res.end();
+
+      // 代理拿不到（网关拦截 / 没装皮肤中心）⇒ **自己作用域化**。
+      // 这条路不依赖任何凭证，也不依赖对方的进程，对所有用户一致成立。
+      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; }
+      const raw = [];
+      try { raw.push(readFileSync(join(dir, ...sheet.rel.split('/')), 'utf8')); } catch { /* 主样式读不到就不能算成功 */ }
+      if (raw.length === 0) { res.statusCode = 404; res.end(); return; }
+      const patches = skinAuxFileOf(dir, 'patches');
+      if (patches) {
+        try { raw.push(readFileSync(join(dir, ...patches.split('/')), 'utf8')); } catch { /* 补丁缺失可接受 */ }
+      }
+      // url() 先改写成我们的素材路由（作用域化只动选择器，不动声明）。
+      const baseDir = sheet.rel.includes('/') ? sheet.rel.slice(0, sheet.rel.lastIndexOf('/')) : '';
+      const absUrl = (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)}`;
+      };
+      const merged = raw.join('\n/* ---- patches ---- */\n')
+        .replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi, (m, q, p) => `url("${absUrl(p.trim())}")`);
+      const scoped = scopeCss(merged, id);
+      note('[skins] scoped locally: ' + id + ' (' + scoped.length + ' bytes)');
+      res.setHeader('Content-Type', 'text/css; charset=utf-8');
+      res.setHeader('Cache-Control', 'no-store');
+      res.setHeader('X-Folia-Scoped', 'local');
+      res.end(scoped);
     },
   }));
 

package/package.json

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