@nsnanocat/preference-panes 0.7.2 → 0.8.1

package/src/browser/panel.css

@@ -106,7 +106,8 @@
     }
 }
 .pp-fields,
-.pp-choice-page {
+.pp-choice-page,
+.pp-cache-page {
     position: absolute;
     inset: 0;
     overflow: auto;
@@ -283,27 +284,13 @@ select.pp-input {
     color: inherit;
     text-decoration: underline;
 }
-.pp-maintenance {
-    margin-top: 24px;
-}
-.pp-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-.pp-actions button,
 .pp-error button {
     min-height: 44px;
     padding: 8px 12px;
     border-radius: 6px;
     background: var(--pp-surface);
 }
-.pp-panel .pp-danger {
-    color: #e45656;
-}
 .pp-cache {
-    max-height: 320px;
-    overflow: auto;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
 }

package/src/browser/panel.mjs

@@ -1,3 +1,4 @@
+import { ActionMenu } from "./ActionMenu.mjs";
 import { createPreferencesClient } from "./client.mjs";
 import { errorView, icon, element as node, resourceURL } from "./components.mjs";
 import { Navigation } from "./Navigation.mjs";
@@ -20,6 +21,15 @@ export function mountPanel(root, catalog) {
     back.setAttribute("aria-label", "返回");
     back.type = "button";
     const heading = node("h1", "pp-title", title);
+    const handlers = new Map();
+    const menuItems = [
+        { id: "viewCaches", label: "查看缓存" },
+        { id: "clearCaches", label: "清空缓存", destructive: true },
+        { id: "reset", label: "重置模块", destructive: true },
+    ];
+    const menu = new ActionMenu(id => handlers.get(id)());
+    const trailing = node("span", "pp-nav-spacer");
+    trailing.append(menu.element);
     const brand = node("div", "pp-brand");
     const logo = node("span", "pp-brand-icon");
     logo.setAttribute("aria-hidden", "true");
@@ -30,20 +40,26 @@ export function mountPanel(root, catalog) {
     const toast = node("div", "pp-toast");
     toast.setAttribute("role", "status");
     toast.hidden = true;
-    header.append(back, brand, node("span", "pp-nav-spacer"));
+    header.append(back, brand, trailing);
     shell.append(header, viewport, toast);
     root.append(shell);
     // 嵌入模式向宿主发布导航状态，宿主不读取或修改模块内部 DOM。
     // Embedded mode publishes navigation state without host reads or mutations of the module DOM.
     const publishNavigation = () => {
+        const actions = handlers.size ? menuItems : [];
+        menu.update(actions, saving);
         const frame = window.frameElement;
         if (!frame?.dataset.preferencePanes) return;
         frame.dispatchEvent(
             new frame.ownerDocument.defaultView.CustomEvent("preferencepanes:change", {
-                detail: { title: heading.textContent, module: catalog.module.module, busy: saving, canGoBack: !back.disabled },
+                detail: { title: heading.textContent, module: catalog.module.module, busy: saving, canGoBack: !back.disabled, actions },
             }),
         );
     };
+    const onAction = event => {
+        if (!saving && handlers.has(event.detail)) handlers.get(event.detail)();
+    };
+    window.frameElement?.addEventListener("preferencepanes:action", onAction);
     let timer,
         navigation,
         generation = 0,
@@ -353,17 +369,13 @@ export function mountPanel(root, catalog) {
             if (eventName === "input") inputContainer.addEventListener("compositionend", event => event.target.dispatchEvent(new window.Event("input", { bubbles: true })));
             groups.get(group).append(row);
         }
-        const maintenance = node("section", "pp-maintenance");
-        maintenance.append(node("h2", "pp-title", "模块数据"));
-        const actions = node("div", "pp-actions");
-        const cacheView = node("button", "", "查看 Caches");
-        const cacheClear = node("button", "", "清空 Caches");
-        const reset = node("button", "pp-danger", "重置模块");
+        const cachePage = node("section", "pp-cache-page");
         const output = node("pre", "pp-cache");
-        output.hidden = true;
+        output.textContent = "暂无缓存";
         output.setAttribute("aria-label", "Caches 内容");
-        for (const button of [cacheView, cacheClear, reset]) button.type = "button";
-        cacheView.onclick = () => {
+        cachePage.append(output);
+        editors.set("$caches", { node: cachePage, title: "缓存" });
+        handlers.set("viewCaches", () => {
             if (saving) return;
             let value;
             return perform(
@@ -377,12 +389,11 @@ export function mountPanel(root, catalog) {
                 },
                 () => {
                     output.textContent = value === undefined ? "暂无缓存" : JSON.stringify(value, null, 2);
-                    output.hidden = false;
-                    cacheView.textContent = "刷新 Caches";
+                    navigation.open("$caches");
                 },
             );
-        };
-        cacheClear.onclick = () => {
+        });
+        handlers.set("clearCaches", () => {
             if (saving) return;
             if (!window.confirm(`清空 ${active} 的全部 Caches？`)) return;
             return perform(
@@ -391,15 +402,12 @@ export function mountPanel(root, catalog) {
                     output.textContent = "暂无缓存";
                 },
             );
-        };
-        reset.onclick = () => {
+        });
+        handlers.set("reset", () => {
             if (saving) return;
             if (!window.confirm(`重置 ${active}？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) return;
             return perform(() => client.reset(active), controls);
-        };
-        actions.append(cacheView, cacheClear, reset);
-        maintenance.append(actions, output);
-        view.append(maintenance);
+        });
         navigation?.destroy();
         navigation = new Navigation(viewport, view, key => editors.get(key)?.node);
         navigation.addEventListener("change", updateNavigation);
@@ -425,6 +433,8 @@ export function mountPanel(root, catalog) {
          */
         destroy() {
             destroyed = true;
+            menu.destroy();
+            window.frameElement?.removeEventListener("preferencepanes:action", onAction);
             navigation?.destroy();
             generation++;
             if (active && !saving) client.leave(active);

package/src/build.mjs

@@ -2,8 +2,8 @@ import { readFile } from "node:fs/promises";
 import { BoxJS } from "./BoxJS.mjs";
 
 /**
- * 从两个配置输入生成一个模块页及其读写与配置 Mock，不生成项目主页。
- * Build one module page, its storage script and config Mock without a project landing page.
+ * 仅生成模块前端文件，不复制配置或生成绑定业务的读写脚本。
+ * Build module frontend files without copying configuration or generating bound storage scripts.
  * @param {unknown} boxjs 仅包含一个模块的 BoxJS JSON / BoxJS JSON containing exactly one module.
  * @param {string} [css] 可选自定义 CSS 正文 / Optional custom CSS text.
  * @returns {Promise<Record<string, string>>} 相对路径到文件正文的映射 / Relative file paths mapped to file contents.
@@ -12,22 +12,12 @@ export async function build(boxjs, css = "") {
     if (typeof css !== "string") throw new TypeError("CSS must be a string");
     const catalog = new BoxJS(boxjs);
     const module = catalog.module.module;
-    const [html, app, navigation, proxy, mock] = await Promise.all([
-        readFile(new URL("../dist/module/index.html", import.meta.url), "utf8"),
-        readFile(new URL("../dist/module/app.mjs", import.meta.url), "utf8"),
-        readFile(new URL("../dist/module/navigation.mjs", import.meta.url), "utf8"),
-        readFile(new URL("../dist/preference-panes.proxy.js", import.meta.url), "utf8"),
-        readFile(new URL("../dist/preference-panes.config.js", import.meta.url), "utf8"),
-    ]);
-    const config = JSON.stringify(catalog.select(module));
+    const [html, app, navigation] = await Promise.all([readFile(new URL("../dist/module/index.html", import.meta.url), "utf8"), readFile(new URL("../dist/module/app.mjs", import.meta.url), "utf8"), readFile(new URL("../dist/module/navigation.mjs", import.meta.url), "utf8")]);
     return {
         [`settings/${module}/index.html`]: html,
         [`settings/assets/${module}.html`]: html,
         "settings/assets/app.mjs": app,
         "settings/assets/navigation.mjs": navigation,
-        [`settings/assets/${module}.boxjs.json`]: config,
         [`settings/assets/${module}.css`]: css,
-        [`settings/assets/${module}.request.js`]: `${proxy}\nPreferencePanes.run(${config},${JSON.stringify(css)});\n`,
-        [`settings/assets/${module}.config.js`]: `${mock}\nPreferencePanes.mock(${config});\n`,
     };
 }

package/src/index.d.ts

@@ -92,8 +92,8 @@ export interface SettingsRequest {
      */
     headers?: Record<string, string | undefined>;
     /**
-     * POST 的正文为 JSON 值本身；DELETE 无正文
-     * POST contains the JSON value itself; DELETE has no body.
+     * POST 的正文为一个 form 字段，字段名是完整 @root.path
+     * POST contains one form field whose name is the complete @root.path.
      */
     body?: string;
 }
@@ -113,8 +113,8 @@ export interface SettingsResponse {
      */
     headers: Record<string, string>;
     /**
-     * JSON 文本；HEAD 始终为空字符串
-     * JSON text; always an empty string for HEAD.
+     * JSON 或页面资源正文
+     * JSON or page resource body.
      */
     body: string;
 }
@@ -269,8 +269,8 @@ export interface BoxJSSubscription extends BoxJSMetadata {
  */
 export type BoxJSInput = BoxJSSetting[] | BoxJSApp | BoxJSSubscription;
 /**
- * 生成具体模块的页面、代理和配置 Mock，不生成项目入口页。
- * Build a concrete module's page, proxy and config Mock without a project landing page.
+ * 生成模块前端文件，不复制配置、不生成绑定模块的代理脚本。
+ * Build module frontend files without copying configuration or producing bound proxy scripts.
  * @param boxjs 恰好包含一个模块的 BoxJS JSON / BoxJS JSON describing exactly one module.
  * @param css 可选 CSS 正文 / Optional CSS text.
  * @returns 相对路径到文件内容的映射 / Relative paths mapped to file contents.

package/src/lib/page-inputs.mjs

@@ -11,7 +11,7 @@ export function pageInputs(url, headers = {}) {
     const module = match[1];
     const values = Object.fromEntries(Object.entries(headers).map(([key, value]) => [key.toLowerCase(), value]));
     const json = values["x-preferencepanes-json"] ?? url.searchParams.get("json") ?? `/configs/${module}`;
-    const css = values["x-preferencepanes-css"] ?? url.searchParams.get("css") ?? `/settings/assets/${module}.css`;
+    const css = values["x-preferencepanes-css"] ?? url.searchParams.get("css") ?? "";
     if (!json.trim()) throw new TypeError("JSON resource URL is required");
     return { url: url.href, module, json, css };
 }

package/src/lib/settings-path.mjs

@@ -1,21 +1,3 @@
-/**
- * 解析已经取得的 pathname，避免重复构造 URL。
- * Parse an existing pathname without constructing another URL.
- * @param {string} pathname 以 / 开头的 URL pathname / URL pathname beginning with /.
- * @returns {string[] | undefined} 解码后的路径，非 API 路径不处理 / Decoded path, or undefined outside /api/.
- * @throws {TypeError} 转义编码或路径片段非法 / Invalid percent encoding or path segments.
- */
-export function parseSettingsPathname(pathname) {
-    if (!pathname.startsWith("/api/")) return;
-    let parts;
-    try {
-        parts = pathname.slice(5).replace(/\/$/, "").split("/").map(decodeURIComponent);
-    } catch {
-        throw new TypeError("Invalid encoded key path");
-    }
-    return validatePathParts(parts);
-}
-
 /**
  * 校验原始路径片段，不进行 URL 编码转换。
  * Validate raw path segments without URL encoding conversion.

package/src/proxy/handler.mjs

@@ -1,43 +1,29 @@
 import { URL } from "@nsnanocat/url";
 import assets from "#assets";
-import { BoxJS } from "../BoxJS.mjs";
 import { pageInputs } from "../lib/page-inputs.mjs";
 import { response } from "../lib/response.mjs";
 import { Store } from "../Store.mjs";
 import { complete } from "./response.mjs";
 
 /**
- * 仅为导入的模块提供页面与存储服务，项目主页由调用方自行托管。
- * Serve only the imported module's page and persistence; callers host their own project landing pages.
- * @param {unknown} boxjs BoxJS JSON / BoxJS JSON.
- * @param {string} [css] 自定义 CSS 正文 / Custom CSS text.
- * @returns {Promise<void>} 已提交宿主响应 / Delivered host response.
+ * 通用代理入口：提供无鉴权 form 存储 API 及模块页面，不含业务配置。
+ * Generic proxy entry serving unauthenticated form storage and module pages without business configuration.
+ * @returns {Promise<void>} 已交给代理宿主的响应 / Response delivered to the proxy host.
  */
-export async function run(boxjs, css = "") {
+async function run() {
     const request = globalThis.$request;
     let result;
     try {
-        if (typeof css !== "string") throw new TypeError("CSS must be a string");
-        const catalog = new BoxJS(boxjs);
-        const module = catalog.module.module;
         const url = new URL(request.url);
         switch (true) {
             case url.pathname.startsWith("/api/"):
-                result = await new Store(catalog).handle(request, url);
+                result = await new Store().handle(request, url);
                 break;
-            case url.pathname.startsWith("/configs/"):
-                break;
-            case url.pathname === `/settings/${module}` || url.pathname === `/settings/${module}/`: {
-                // Header 由代理传入文档，浏览器再下载 JSON/CSS；代理不获取外部资源。
-                // Carry headers into the document; only the browser downloads external JSON/CSS.
+            case /^\/settings\/[a-zA-Z0-9_-]+\/?$/.test(url.pathname): {
                 const inputs = encodeURIComponent(JSON.stringify(pageInputs(url, request.headers)));
-                const html = assets.page.body.replace("</head>", `<meta name="preference-panes-inputs" content="${inputs}"></head>`);
-                result = response(request, 200, html, "text/html");
+                result = response(request, 200, assets.page.body.replace("</head>", `<meta name="preference-panes-inputs" content="${inputs}"></head>`), "text/html");
                 break;
             }
-            case url.pathname === `/settings/assets/${module}.css`:
-                result = response(request, 200, css, "text/css");
-                break;
             default: {
                 const asset = assets[url.pathname];
                 if (asset) result = response(request, 200, asset.body, asset.type);
@@ -46,7 +32,8 @@ export async function run(boxjs, css = "") {
         if (result && !url.pathname.startsWith("/api/") && !["GET", "HEAD"].includes(request.method)) result = response(request, 405, { error: "Method not allowed" });
     } catch (error) {
         console.error(`PreferencePanes: ${error.message}`);
-        result = response(request, 500, { error: "Settings execution failed" });
+        result = response(request, 500, { error: error.message });
     }
     complete(result);
 }
+run();