@nsnanocat/preference-panes 1.2.4 → 1.3.0

package/src/browser/index.mjs

@@ -38,7 +38,22 @@ class ModulePage {
             const match = /^\/settings\/([a-zA-Z0-9_-]+)\/?$/.exec(this.#window.location.pathname);
             const module = embedded ?? match?.[1];
             if (!module) throw new TypeError("Open a concrete module URL");
-            const source = this.#window.document.querySelector('meta[name="preference-panes-boxjs"]')?.content || `/api/${encodeURIComponent(module)}`;
+            const frame = this.#window.frameElement?.dataset;
+            const base = frame?.preferencePanesBase ?? this.#window.location.href;
+            this.#window.document.querySelector("link[data-preference-panes-stylesheet]")?.remove();
+            const stylesheetSource = frame?.preferencePanesStylesheet ?? new URLSearchParams(this.#window.location.search).get("css")?.trim();
+            if (stylesheetSource) {
+                const stylesheet = new URL(stylesheetSource, base);
+                if (!["http:", "https:"].includes(stylesheet.protocol)) throw new TypeError("CSS resource must use HTTP(S)");
+                const link = this.#window.document.createElement("link");
+                link.dataset.preferencePanesStylesheet = "true";
+                link.rel = "stylesheet";
+                link.href = stylesheet.href;
+                this.#window.document.head.append(link);
+            }
+            const jsonSource = frame?.preferencePanesJson ?? new URLSearchParams(this.#window.location.search).get("json")?.trim();
+            const source = new URL(jsonSource || `/api/${encodeURIComponent(module)}`, base);
+            if (!["http:", "https:"].includes(source.protocol)) throw new TypeError("BoxJS resource must use HTTP(S)");
             const response = await fetch(source, { cache: "no-store", credentials: "omit", headers: { Accept: "application/json" } });
             if (response.status !== 200) throw new Error(`HTTP ${response.status}`);
             const boxjs = await response.json();

package/src/browser/module.html

@@ -1,12 +1,11 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="zh-CN" class="pp-page">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
         <meta name="color-scheme" content="light dark">
         <!--__PREFERENCE_PANES_JSON__-->
         <title>Module Preferences</title>
-        <style>body { margin: 0; }</style>
         <!--__PREFERENCE_PANES_STYLESHEET__-->
     </head>
     <body>

package/src/browser/panel.mjs

@@ -1,7 +1,7 @@
 import { ActionMenu } from "./ActionMenu.mjs";
 import { validValue } from "./boxjs.mjs";
 import { PreferencesClient } from "./client.mjs";
-import { fieldControl, element as node, requestConfirmation, requestURLNavigation, resourceURL, settingRow, statusView } from "./components.mjs";
+import { fieldControl, element as node, requestConfirmation, requestURLNavigation, settingRow, statusView } from "./components.mjs";
 import { Navigation } from "./Navigation.mjs";
 
 /**
@@ -112,17 +112,17 @@ export class PreferencesPanel {
         const notify = event => {
             if (destroyed) return;
             let message;
-            switch (true) {
-                case event.kind === "error":
+            switch (event.kind === "error" ? "error" : event.operation) {
+                case "error":
                     message = `操作失败：${event.message}`;
                     break;
-                case event.operation === "delete":
+                case "delete":
                     message = "删除成功";
                     break;
-                case event.operation === "clearCaches":
+                case "clearCaches":
                     message = "Caches 已清空";
                     break;
-                case event.operation === "reset":
+                case "reset":
                     message = "设置已重置";
                     break;
                 default:
@@ -245,21 +245,6 @@ export class PreferencesPanel {
                     });
                 return queue;
             }
-            const metadata = definition.metadata;
-            if (metadata) {
-                const info = node("div", "pp-module-info");
-                const details = node("div", "pp-module-details");
-                for (const description of [metadata.author, metadata.desc ?? metadata.description, ...(metadata.descs ?? [])]) if (description) details.append(node("p", "pp-description", description));
-                if (metadata.repo) {
-                    const link = node("a", "pp-module-source", "项目主页");
-                    link.href = resourceURL(metadata.repo);
-                    link.target = "_blank";
-                    link.rel = "noopener noreferrer";
-                    details.append(link);
-                }
-                info.append(details);
-                view.append(info);
-            }
             for (const field of definition.fields) {
                 const match = /^\[([^\]]+)\]\s*(.*)$/.exec(field.name);
                 const group = match?.[1] ?? "通用";
@@ -300,8 +285,8 @@ export class PreferencesPanel {
                 let write;
                 let inputContainer = row;
                 let eventName = "change";
-                switch (true) {
-                    case field.control === "url": {
+                switch (field.control === "url" ? "url" : field.options ? (field.type === "array" ? "checkboxes" : "selects") : field.type) {
+                    case "url": {
                         const link = node("a", "pp-choice-link", "打开");
                         link.setAttribute("aria-label", field.name);
                         link.rel = "noopener noreferrer";
@@ -317,7 +302,7 @@ export class PreferencesPanel {
                         });
                         break;
                     }
-                    case Boolean(field.options) && field.type !== "array": {
+                    case "selects": {
                         const select = node("select", "");
                         select.setAttribute("aria-label", field.name);
                         field.options.forEach((option, index) => {
@@ -332,7 +317,7 @@ export class PreferencesPanel {
                         read = () => field.options[select.selectedIndex]?.key;
                         break;
                     }
-                    case field.type === "array" && Boolean(field.options): {
+                    case "checkboxes": {
                         const page = node("section", "pp-choice-page");
                         if (field.description) page.append(node("p", "pp-description", field.description));
                         const choices = node("div", "pp-rows");
@@ -376,7 +361,7 @@ export class PreferencesPanel {
                         };
                         break;
                     }
-                    case field.type === "boolean": {
+                    case "boolean": {
                         const toggle = node("input", "pp-switch");
                         toggle.type = "checkbox";
                         toggle.setAttribute("switch", "");
@@ -414,7 +399,12 @@ export class PreferencesPanel {
                             growingInputs.push(grow);
                         }
                         eventName = "input";
-                        if (!multiline) input.type = field.type === "number" ? "number" : "text";
+                        if (!multiline) {
+                            input.type = field.type === "number" ? "number" : "text";
+                            input.autocapitalize = "off";
+                            input.setAttribute("autocorrect", "off");
+                            input.spellcheck = false;
+                        }
                         write = value => {
                             input.value = field.type === "array" ? JSON.stringify(value ?? []) : (value ?? "");
                             grow();
@@ -517,7 +507,9 @@ export class PreferencesPanel {
             });
             handlers.set("clearCaches", async () => {
                 if (saving) return;
-                if (!(await requestConfirmation(window, `清空 ${active} 的全部 Caches？`)) || destroyed || saving) return;
+                const shared = definition.cachePath && definition.cachePath !== `@${definition.storageKey}.${active}.Caches`;
+                const message = shared ? `清空共享缓存 ${definition.cachePath}？使用该缓存的其它模块也会受影响。` : `清空 ${active} 的全部 Caches？`;
+                if (!(await requestConfirmation(window, message)) || destroyed || saving) return;
                 return perform(
                     () => client.clearCaches(),
                     () => {
@@ -527,7 +519,8 @@ export class PreferencesPanel {
             });
             handlers.set("reset", async () => {
                 if (saving) return;
-                if (!(await requestConfirmation(window, `重置 ${active} 的设置？这将删除该模块的 Settings、Caches 和其它持久化数据。`)) || destroyed || saving) return;
+                const message = definition.resetPaths ? `重置 ${definition.metadata?.name ?? active} 的设置？只删除本页面的设置，保留共享存储中的其它设置和缓存。` : `重置 ${active} 的设置？这将删除该模块的 Settings、Caches 和其它持久化数据。`;
+                if (!(await requestConfirmation(window, message)) || destroyed || saving) return;
                 return perform(() => client.reset(), controls);
             });
             navigation?.destroy();

package/src/browser/{panel.css → styles.css}

@@ -1,6 +1,6 @@
 /* 通用默认样式只使用 pp 命名空间；项目可通过 CSS 输入覆盖变量和组件。
  * Generic defaults use only the pp namespace; projects may override variables and components through CSS input. */
-.pp-panel {
+:root {
     --pp-text: #18191c;
     --pp-background: #f6f7f8;
     --pp-surface: #fff;
@@ -9,6 +9,10 @@
     --pp-muted: #797f87;
     --pp-accent: #1677ff;
     --pp-warning: #9a6700;
+    --pp-host-height: 0px;
+    --pp-keyboard-height: 0px;
+}
+.pp-panel {
     font:
         15px / 1.5 -apple-system,
         BlinkMacSystemFont,
@@ -26,7 +30,7 @@
     overflow: hidden;
 }
 
-:root[data-theme="dark"] .pp-panel {
+:root[data-theme="dark"] {
     --pp-text: #f1f2f3;
     --pp-background: #0d0e0f;
     --pp-surface: #18191c;
@@ -145,6 +149,7 @@
     min-height: 36px;
     padding: 8px 10px;
     font: inherit;
+    font-size: 16px;
     color: var(--pp-text);
     background: var(--pp-field);
     border: 0;
@@ -262,7 +267,7 @@
     box-sizing: border-box;
     width: 28px;
     height: 28px;
-    border: 3px solid color-mix(in srgb, currentColor 25%, transparent);
+    border: 3px solid var(--pp-border, #8884);
     border-top-color: var(--pp-accent, AccentColor);
     border-radius: 50%;
     animation: pp-status-spin 0.8s linear infinite;
@@ -313,3 +318,240 @@
     outline: 2px solid var(--pp-accent);
     outline-offset: -2px;
 }
+
+/* 首页沿用表单的分组与说明样式，入口按屏幕宽度自动换行。
+ * The landing page reuses form groups and descriptions, with entries wrapping by viewport width. */
+:root.pp-page {
+    color-scheme: light dark;
+}
+.pp-page body {
+    margin: 0;
+    font:
+        16px / 1.5 -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+    background: var(--pp-background, Canvas);
+    color: var(--pp-text, CanvasText);
+}
+[data-preference-panes-pages] {
+    position: relative;
+    min-height: calc(100vh - var(--pp-host-height));
+    background: inherit;
+}
+[data-preference-panes-module-page],
+[data-preference-panes-link-page] {
+    position: fixed;
+    inset: var(--pp-host-height) 0 0;
+    background: inherit;
+    z-index: 1;
+    box-shadow: -8px 0 24px #00000014;
+}
+[data-preference-panes-module-page] iframe,
+[data-preference-panes-link-page] iframe {
+    display: block;
+    border: 0;
+    width: 100%;
+    height: 100%;
+    background: inherit;
+}
+[data-module-message] {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 20px;
+    background: inherit;
+}
+[data-module-message][hidden] {
+    display: none;
+}
+.pp-host-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr) 44px;
+    align-items: center;
+    min-height: 44px;
+    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
+    border-bottom: 1px solid var(--pp-border, #8884);
+    background: var(--pp-surface, Canvas);
+    color: var(--pp-accent, Highlight);
+    font-size: 17px;
+}
+.pp-host-title {
+    text-align: center;
+    color: var(--pp-text, CanvasText);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.pp-host-back {
+    border: 0;
+    background: none;
+    color: inherit;
+    width: 44px;
+    height: 44px;
+    padding: 8px;
+    font:
+        32px / 1 -apple-system,
+        sans-serif;
+    cursor: pointer;
+}
+.pp-host-back[hidden] {
+    visibility: hidden;
+    display: block;
+}
+.pp-host-toast {
+    position: fixed;
+    z-index: 3;
+    bottom: calc(24px + env(safe-area-inset-bottom) + var(--pp-keyboard-height));
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: calc(100% - 48px);
+    padding: 10px 18px;
+    border-radius: 12px;
+    background: #222e;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+}
+.pp-host-toast[hidden] {
+    display: none;
+}
+.pp-host-error {
+    margin: 24px;
+    padding: 16px;
+    border: 1px solid var(--pp-danger, #e45656);
+    border-radius: 12px;
+    font-size: 16px;
+    overflow-wrap: anywhere;
+}
+
+.pp-home {
+    max-width: 1000px;
+    margin: auto;
+    padding: 24px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
+}
+.pp-home-logo {
+    display: block;
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 24px;
+    object-fit: contain;
+}
+.pp-home-entries {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    row-gap: 16px;
+    padding: 16px 0;
+    background: var(--pp-surface);
+}
+.pp-home-item {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 25%;
+    min-width: 0;
+    padding: 0 4px;
+    border: 0;
+    background: none;
+    color: var(--pp-text);
+    font:
+        12px / 1.5 -apple-system,
+        sans-serif;
+    cursor: pointer;
+    text-decoration: none;
+}
+@media (min-width: 500px) {
+    .pp-home-item {
+        width: calc(100% / 6);
+    }
+}
+@media (min-width: 700px) {
+    .pp-home-item {
+        width: 12.5%;
+    }
+}
+.pp-home-icon {
+    box-sizing: border-box;
+    width: 56px;
+    height: 56px;
+    padding: 8px;
+    border-radius: 50%;
+    background: var(--pp-field);
+    font-size: 32px;
+    line-height: 40px;
+}
+.pp-home-icon img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+.pp-home-name {
+    margin-top: 8px;
+}
+.pp-home-content {
+    min-width: 0;
+    width: 100%;
+}
+.pp-home-content > span {
+    display: block;
+}
+.pp-home-name,
+.pp-home-item [data-module-status] {
+    width: 100%;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.pp-home-item [data-module-status] {
+    min-height: 20px;
+}
+.pp-home-item:disabled {
+    opacity: 0.45;
+    cursor: default;
+}
+.pp-home-entries[data-layout="list"] {
+    display: block;
+    padding: 0;
+}
+.pp-home-entries[data-layout="list"] .pp-home-item {
+    flex-direction: row;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 15px;
+}
+.pp-home-entries[data-layout="list"] .pp-home-item + .pp-home-item {
+    border-top: 1px solid var(--pp-border);
+}
+.pp-home-entries[data-layout="list"] .pp-home-icon {
+    flex: none;
+    width: 40px;
+    height: 40px;
+    padding: 4px;
+    font-size: 24px;
+    line-height: 32px;
+}
+.pp-home-entries[data-layout="list"] .pp-home-name {
+    margin-top: 0;
+    text-align: left;
+}
+.pp-home-arrow {
+    color: var(--pp-muted);
+    font-size: 24px;
+}
+.pp-home-footer {
+    margin-top: 16px;
+    text-align: center;
+    white-space: normal;
+}
+.pp-home-footer p {
+    margin: 8px 0 0;
+}

package/src/index.d.ts

@@ -123,6 +123,10 @@ export interface SettingsResponse {
  * Fields, storage root and optional display metadata belonging to one module.
  */
 export interface ModuleDefinition {
+    /** 页面重置的完整设置路径，默认删除当前模块数据 / Complete setting paths reset by the page; defaults to deleting this module's data. */
+    resetPaths?: string[];
+    /** 同一存储根中的完整缓存路径，默认当前模块 Caches / Complete cache path in the same storage root, defaulting to this module's Caches. */
+    cachePath?: string;
     /**
      * 字段 ID 的模块段，不能由 app 名称推断
      * Module segment from field IDs, never inferred from app names.
@@ -246,6 +250,10 @@ export interface BoxJSSetting {
  * A BoxJS application.
  */
 export interface BoxJSApp extends BoxJSMetadata {
+    /** 共享模块存储时，限定本页面可重置的设置路径 / Limit reset paths when multiple pages share module storage. */
+    resetPaths?: string[];
+    /** 可选共享缓存路径，例如 @Root.Composite.Caches / Optional shared cache path, such as @Root.Composite.Caches. */
+    cachePath?: string;
     /**
      * 应用设置
      * Application settings.