dsh-folia 4.9.1 → 4.12.2

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

@@ -780,6 +780,52 @@ window.__ModuleLoader__.load({
 				  "…": "…",
 				  // 开机动画：已开启但无选片时的提示（4.8.2）
 				  "已开启，但还没有选片 —— 下载一条后点「使用」": "Enabled, but no clip is selected yet — download one, then press Use",
+
+				  // ── 助手皮肤页签（4.10.0）────────────────────────────────────────────────
+				  "助手皮肤": "Assistant skins",
+				  "🎨 助手皮肤": "🎨 Assistant skins",
+				  "皮肤包安装到皮肤中心目录；装完到「设置 → 皮肤中心」里点选即可启用。皮肤中心与本插件读同一个目录，无需重启。": "Skin packs are installed into the skin centre's directory; pick one in Settings → Skin centre to enable it. It reads the same folder, so no restart is needed.",
+				  "本机已装（{n}）": "Installed ({n})",
+				  "站点皮肤（{n}）": "Skins on the site ({n})",
+				  "还没有安装任何皮肤 —— 从下面的站点清单里挑一个。": "No skins installed yet — pick one from the site list below.",
+				  "站点上还没有皮肤。": "No skins on the site yet.",
+				  "含动效钩子": "animated hooks",
+				  "已安装": "Installed",
+				  "已安装过：{name}": "Already installed: {name}",
+				  "已安装：{name} —— 到「设置 → 皮肤中心」点它即可启用": "Installed: {name} — pick it in Settings → Skin centre to enable",
+				  "卸载中…": "Uninstalling…",
+				  "动态": "Animated",
+				  "这个包里没有 skin.json，不是皮肤包": "No skin.json in this archive — not a skin pack",
+				  "包里有非法路径（已整包拒绝）": "The archive contains an unsafe path (rejected entirely)",
+				  "包太大了（上限 200 MB）": "Archive is too large (200 MB limit)",
+				  "下载地址不在白名单里": "The download host is not allow-listed",
+				  "站点被关闭了（DSH_FOLIA_SITE=off）": "The site is disabled (DSH_FOLIA_SITE=off)",
+				  "这个文件不是 zip": "This file is not a zip",
+
+				  // ── 助手皮肤：皮肤中心缺失时的引导（4.10.1）──────────────────────────
+				  "皮肤中心没装：它是**独立插件** @linxin666/dsh-client-ui-skin-center（不在 dsh-web-all 里，那个只是聚合包）。装它才能启用皮肤：": "The skin centre is not installed: it is its own plugin, @linxin666/dsh-client-ui-skin-center (dsh-web-all is only an aggregate). Install it to enable skins:",
+				  "已复制安装命令": "Install command copied",
+				  "复制失败，请手动选中上面的命令": "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）（构建期注入；勿手改本段）──
@@ -18213,6 +18259,314 @@ window.__ModuleLoader__.load({
 
 				// 仅供单测驱动（构建期内联时会剥掉 export，不影响产物）。
 
+				// ── 内联模块：src/panel-tabs-skins.js —— 「助手皮肤」页签：站点皮肤清单/安装/卸载 — 渲染由皮肤中心接管，我们只把 zip 解到 $DSH_HOME/skins（构建期注入；勿手改本段）──
+				/**
+				 * panel-tabs-skins.js — 「助手皮肤」页签：站点皮肤清单 / 安装 / 卸载 / 去皮肤中心启用。
+				 *
+				 * 与「桌宠」页签同构（fetch → busy → note → 卡片列表）。差别在**安装之后谁负责渲染**：
+				 * 桌宠由本插件自己画（pet-layer.js），皮肤则由皮肤中心接管 —— 我们只把 zip 解到
+				 * `$DSH_HOME/skins/<id>/`，皮肤中心下一次 catalog 扫描就会认领（它的缓存键里带父目录 mtime）。
+				 * 所以这个页签的职责边界是：**装/卸 + 告诉你下一步去哪启用**，不重复实现渲染。
+				 */
+
+				const SKIN_STYLE = {
+				  row: { display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" },
+				  card: {
+				    display: "flex", flexDirection: "column", gap: "6px", padding: "10px",
+				    borderRadius: "10px", border: "1px solid rgba(255,255,255,0.14)",
+				    background: "rgba(255,255,255,0.04)", width: "188px",
+				  },
+				  thumb: {
+				    width: "100%", aspectRatio: "16 / 9", borderRadius: "6px",
+				    backgroundSize: "cover", backgroundPosition: "center",
+				    backgroundColor: "rgba(0,0,0,0.25)",
+				  },
+				  title: { fontSize: "13px", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+				  meta: { fontSize: "11px", opacity: 0.72 },
+				  grid: { display: "flex", gap: "10px", flexWrap: "wrap", marginTop: "10px" },
+				  badge: {
+				    fontSize: "10px", padding: "1px 6px", borderRadius: "4px",
+				    background: "rgba(30,90,160,0.55)", alignSelf: "flex-start",
+				  },
+				};
+
+				function skinFmtBytes(n) {
+				  const v = Number(n) || 0;
+				  if (!v) return "";
+				  if (v < 1024 * 1024) return Math.round(v / 1024) + " KB";
+				  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("");
+				  const [note, setNote] = React.useState(null);
+
+				  const load = React.useCallback(async (force) => {
+				    try {
+				      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) }) });
+				        }
+				      } else {
+				        setNote({ ok: false, text: weT("读取失败：{msg}", { msg: (doc && doc.error) || "unknown" }) });
+				      }
+				    } catch (e) {
+				      setNote({ ok: false, text: weT("请求失败：{msg}", { msg: (e && e.message) || weT("网络错误") }) });
+				    }
+				  }, []);
+
+				  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;
+				        // 只允许切到本机已装的那几套（state.installed 是权威清单）
+				        if (wantId) {
+				          const known = ((state && state.installed) || []).some((s) => normSkinId(s.id) === normSkinId(wantId));
+				          if (!known) {
+				            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) {
+				        if (kind === "install") {
+				          setNote({
+				            ok: true,
+				            text: r.exists
+				              ? weT("已安装过：{name}", { name: label || "" })
+				              : weT("已安装：{name} —— 点「应用」就能切换", { name: label || "" }),
+				          });
+				        }
+				        if (kind === "remove") setNote({ ok: true, text: weT("已卸载：{name}", { name: label || "" }) });
+				        await load(true);
+				      } else {
+				        const code = (r && r.error) || "failed";
+				        const map = {
+				          'no-skin-json': weT("这个包里没有 skin.json，不是皮肤包"),
+				          'unsafe-entry': weT("包里有非法路径（已整包拒绝）"),
+				          'too-large': weT("包太大了（上限 200 MB）"),
+				          '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 }) });
+				      }
+				    } catch (e) {
+				      setNote({ ok: false, text: weT("请求失败：{msg}", { msg: (e && e.message) || weT("网络错误") }) });
+				    } finally {
+				      setBusy("");
+				    }
+				  };
+
+				  const children = [];
+				  children.push(React.createElement("div", { key: "head", style: SKIN_STYLE.row },
+				    React.createElement("div", { style: { fontSize: "13px", fontWeight: 600 } }, weT("🎨 助手皮肤")),
+				    React.createElement("button", {
+				      className: "we-picker__btn", type: "button",
+				      disabled: Boolean(busy),
+				      onClick: () => load(true),
+				    }, weT("刷新")),
+				  ));
+
+				  // 皮肤中心在不在，决定这段提示说什么：
+				  //   在   → "装完去皮肤中心点它"（本页签只负责落盘）
+				  //   不在 → 明说它是个**独立插件**（不在 dsh-web-all 里），给一条可复制的安装命令
+				  //   unknown（探测失败）→ 保守地按"在"讲，不吓唬用户
+				  const skinCenter = (state && state.skinCenter) || "unknown";
+				  if (skinCenter === "absent") {
+				    children.push(React.createElement("div", {
+				      key: "hint-absent",
+				      className: "we-picker__hint",
+				      style: { margin: "6px 0 4px", color: "#ffd08a", lineHeight: "1.6" },
+				    }, weT("皮肤中心没装：它是**独立插件** @linxin666/dsh-client-ui-skin-center（不在 dsh-web-all 里，那个只是聚合包）。装它才能启用皮肤：")));
+				    children.push(React.createElement("div", { key: "cmd", style: { display: "flex", gap: "8px", alignItems: "center", margin: "0 0 6px" } },
+				      React.createElement("code", {
+				        style: { fontSize: "11px", padding: "3px 8px", borderRadius: "6px", background: "rgba(255,255,255,0.08)" },
+				      }, "dsh plugin --profile web add @linxin666/dsh-client-ui-skin-center"),
+				      React.createElement("button", {
+				        className: "we-picker__btn", type: "button",
+				        onClick: () => { try { navigator.clipboard.writeText("dsh plugin --profile web add @linxin666/dsh-client-ui-skin-center"); setNote({ ok: true, text: weT("已复制安装命令") }); } catch { setNote({ ok: false, text: weT("复制失败，请手动选中上面的命令") }); } },
+				      }, weT("复制命令")),
+				    ));
+				  } else {
+				    children.push(React.createElement("div", {
+				      key: "hint",
+				      className: "we-picker__hint",
+				      style: { margin: "6px 0 4px", opacity: 0.8 },
+				    }, weT("本页签可以直接切换皮肤：装完点「应用」即可，无需打开设置页。皮肤包落在皮肤中心目录，两边读同一份。")));
+				  }
+
+				  // 提示行常驻占位（与开机动画/桌宠页签同一条纪律：不因 note 出现/消失让面板跳高度）
+				  children.push(React.createElement("div", {
+				    key: "note",
+				    className: "we-picker__hint",
+				    style: {
+				      color: note && !note.ok ? "#ff9a9a" : "#8ee6a8",
+				      margin: "2px 0 8px", minHeight: "18px", lineHeight: "18px",
+				      opacity: note ? 1 : 0, transition: "opacity 120ms linear",
+				    },
+				  }, 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 }),
+				      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) => {
+				          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) || isActive,
+				              title: isActive ? weT("正在使用，先切到别的再卸") : undefined,
+				              onClick: () => act("remove", { id: s.id }, s.name),
+				            }, busy === "remove:" + s.id ? weT("卸载中…") : weT("卸载")),
+				          ),
+				        );
+				        }),
+				    ));
+				  }
+
+				  const site = (state && state.site) || [];
+				  children.push(React.createElement("div", { key: "site-head", className: "we-picker__hint", style: { marginTop: "10px" } },
+				    weT("站点皮肤（{n}）", { n: site.length })));
+				  children.push(React.createElement("div", { key: "site", style: SKIN_STYLE.grid },
+				    site.length === 0
+				      ? [React.createElement("span", { key: "none", className: "we-picker__hint" }, weT("站点上还没有皮肤。"))]
+				      : site.map((s) => {
+				        const busyThis = busy === "install:" + s.id;
+				        return React.createElement("div", { key: s.id, style: SKIN_STYLE.card },
+				          s.thumbUrl
+				            ? React.createElement("div", {
+				              style: { ...SKIN_STYLE.thumb, backgroundImage: "url(" + JSON.stringify(s.thumbUrl) + ")" },
+				            })
+				            : React.createElement("div", { style: SKIN_STYLE.thumb }),
+				          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(" · ")),
+				          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("安装")),
+				          ),
+				        );
+				      }),
+				  ));
+
+				  return React.createElement("div", { className: "we-picker", style: { display: "flex", flexDirection: "column" } }, children);
+				}
+
 				// ── 内联模块：src/features.js —— 客户端功能注册表：页签条 / 整区面板 / 常驻挂载层。装配点（quick-panel、client.js）只查表，不写功能名（构建期注入；勿手改本段）──
 				/**
 				 * features.js（客户端）— **功能注册表**：页签声明、面板工厂、挂载钩子。
@@ -18241,6 +18595,8 @@ window.__ModuleLoader__.load({
 				  { id: "playback", get label() { return weT("播放"); } },
 				  // 桌宠是"桌面上多出来的一只东西"，与壁纸/开机动画并列。
 				  { id: "pets", get label() { return weT("桌宠"); } },
+				  // 助手皮肤：装的是皮肤中心的皮肤包。我们只管装/卸，渲染与启用归皮肤中心。
+				  { id: "skins", get label() { return weT("助手皮肤"); } },
 				];
 
 				/**
@@ -18250,6 +18606,7 @@ window.__ModuleLoader__.load({
 				const WE_FEATURE_PANELS = {
 				  boot: BootTabPanel,
 				  pets: PetsTabPanel,
+				  skins: SkinsTabPanel,
 				};
 
 				/**

package/lib/features.js

@@ -126,12 +126,15 @@ export const FEATURES = [
     host: [
       'lib/routes/settings.js',
       'lib/routes/presets.js',
+      // 助手皮肤：站点皮肤包 → $DSH_HOME/skins（皮肤中心读同一目录，写盘即生效）。
+      'lib/routes/skins.js',
       'lib/settings-schema.js',
       'lib/components/fonts/routes/fontsets.js',
       'lib/components/fonts/routes/system-fonts.js',
     ],
     client: [
       'src/panel-tabs-appearance.js',
+      'src/panel-tabs-skins.js',
       'src/glass.js',
       'src/glass-panel.js',
       'src/glass-surfaces.js',
@@ -151,7 +154,7 @@ export const FEATURES = [
       'src/about-assets.js',
       'src/nav-icon.js',
     ],
-    tab: ['appearance'],
+    tab: ['appearance', 'skins'],
   },
   {
     id: 'playback',

package/lib/route-registry.js

@@ -19,6 +19,7 @@ import { registerInventoryRoutes, warmInventorySiteCache } from './routes/invent
 import { registerModulesRoutes, warmModulesCache } from './routes/modules.js';
 import { registerBootRoutes } from './routes/boot.js';
 import { registerSiteThumbRoutes } from './routes/site-thumb.js';
+import { registerSkinsRoutes } from './routes/skins.js';
 import { registerPetsRoutes } from './routes/pets.js';
 
 /**
@@ -71,6 +72,14 @@ export const FEATURE_ROUTE_FAMILIES = [
     register: registerPetsRoutes,
     deps: (c) => ({ disposers: c.disposers, base: c.base, log: c.log }),
   },
+  {
+    id: 'skins',
+    file: 'lib/routes/skins.js',
+    register: registerSkinsRoutes,
+    // 皮肤安装目标是 $DSH_HOME/skins（皮肤中心读同一个目录）：由路由自己按 DSH_HOME 解析，
+    // 不额外引入注入面 —— 少一处注入，就少一种"改了目录却没生效"的可能。
+    deps: (c) => ({ disposers: c.disposers, base: c.base, log: c.log }),
+  },
 ];
 
 /**