dsh-folia 2.9.1 → 3.0.0

package/lib/client.js

@@ -16249,6 +16249,24 @@ window.__ModuleLoader__.load({
 				  const enc = encodeURIComponent(id);
 				  const parts = [];
 				  let source = "";
+
+				  // ① 宿主端代理由它自己去问皮肤中心（带上本次请求的 Cookie 与同源头）。
+				  //    前端直连 `/api/skin-center/...` 会被 DSH 网关挡掉，实测一直落到"未作用域化"。
+				  try {
+				    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()) {
+				        // 响应头说明这份是谁作用域化的：
+				        //   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 { /* 代理不可用 ⇒ 继续走下面两条 */ }
+
+				  // ② 前端直连（皮肤中心同源路由，能通的话最省一次往返）
 				  for (const part of ["stylesheet", "patches"]) {
 				    try {
 				      // 根相对路径 + 原生请求：桌面壳可能跑在 `dsh-app://` 下（`location.origin` 是 "null"），
@@ -16679,7 +16697,7 @@ 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 + ")"))
 				                + (typeof onClearWallpaper === "function" ? weT("，壁纸已关闭") : ""),

package/lib/routes/skins.js

@@ -680,6 +680,216 @@ 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>"]`**，特异性高于应用自身规则 ——
+   * 只有那份 CSS 才能真正把面板压透。皮肤目录里的原始 CSS 压不住，于是"显示不全"。
+   *
+   * 为什么需要代理：浏览器直接请求 `/api/skin-center/v2/...` 被 DSH 网关挡掉
+   *（实测前端一直落到"未作用域化"的降级分支）。宿主端在本机回环上再发一次、并**带上
+   * 浏览器这次请求的 Cookie 与同源头**，就能拿到那份产物。
+   *
+   * 拿不到（皮肤中心没装 / 该皮肤不在它的 catalog 里）一律 404，客户端据此回退到原始 CSS。
+   */
+  disposers.push(webServer.register({
+    kind: 'exact',
+    path: `${base}/skins/scoped-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 host = req && req.headers && req.headers.host;
+      if (!host) { res.statusCode = 500; res.end(); return; }
+      const origin = 'http://' + host;
+      // 透传**全部**入站头（网关认的是这次会话的凭证，可能是 cookie，也可能是某个自定义
+      // 头；只挑几个字段必漏），再去掉逐跳头并补上同源语义。
+      // 实测：裸请求与"只带 sec-fetch-*"都回 401 ⇒ 凭证不在这几个头里。
+      const HOP_BY_HOP = new Set([
+        'host', 'connection', 'keep-alive', 'transfer-encoding', 'upgrade', 'te', 'trailer',
+        'proxy-authorization', 'proxy-authenticate', 'content-length', 'accept-encoding',
+      ]);
+      const fwdHeaders = {};
+      for (const [k, v] of Object.entries(req.headers || {})) {
+        const key = k.toLowerCase();
+        if (HOP_BY_HOP.has(key)) continue;
+        if (typeof v === 'string') fwdHeaders[key] = v;
+        else if (Array.isArray(v)) fwdHeaders[key] = v.join(', ');
+      }
+      fwdHeaders.origin = origin;
+      fwdHeaders.referer = origin + '/';
+      fwdHeaders['sec-fetch-site'] = 'same-origin';
+      fwdHeaders['sec-fetch-mode'] = 'cors';
+      fwdHeaders['sec-fetch-dest'] = 'empty';
+      fwdHeaders.accept = 'text/css,*/*;q=0.1';
+
+      for (const part of ['stylesheet', 'patches']) {
+        try {
+          const r = await fetch(origin + '/api/skin-center/v2/skins/' + encodeURIComponent(id) + '/' + part, {
+            headers: fwdHeaders,
+            signal: AbortSignal.timeout(SKINS_TIMEOUT_MS),
+          });
+          if (!r.ok) continue;
+          const text = await r.text();
+          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', 'skin-center');
+          res.end(text);
+          return;
+        } catch { /* 这一段失败就试下一段 */ }
+      }
+
+      // 代理拿不到（网关拦截 / 没装皮肤中心）⇒ **自己作用域化**。
+      // 这条路不依赖任何凭证，也不依赖对方的进程，对所有用户一致成立。
+      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);
+    },
+  }));
+
   disposers.push(webServer.register({
     kind: 'exact',
     path: `${base}/skins/asset`,

package/package.json

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