@shendeguize/remote-dsh-center 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shendeguize/remote-dsh-center",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Local manager for remote dsh web instances: ssh tunnels, single-entry iframe shell, CLI lifecycle control",
   "type": "module",
   "engines": {

package/src/web/components/toast-region.js

@@ -3,22 +3,57 @@
  * stderr 一律 textContent 渲染。
  */
 
-import { clear, copyText, el } from '../utils.js';
+import { copyText, el } from '../utils.js';
 
+/** `null` = 这一档不自动关闭（错误留到手动关）。缺档才落到 FALLBACK_MS。 */
 const AUTO_DISMISS_MS = { info: 5_000, success: 5_000, warn: 8_000, error: null };
+const FALLBACK_MS = 5_000;
 
 export function createToastRegion({ store }) {
   const root = el('div.toast-region', { 'aria-live': 'polite', role: 'status' });
   const timers = new Map();
   const savedTabindex = new WeakMap();
+  /** toast.id → 已经渲染好的节点，跨次渲染复用。 */
+  const rendered = new Map();
   let modalBlocked = false;
 
+  /**
+   * 按 id 复用节点，不整片重建。错误 toast 里的「详情」常是排障唯一的线索，人正读着
+   * 的时候又弹出一条（批量操作一次弹好几条很常见），整片重建会把 `<details>` 的展开
+   * 状态清零、焦点甩回 body（issue #114）。
+   */
   const render = () => {
-    clear(root);
+    const live = new Set();
     for (const toast of store.state.toasts) {
-      root.append(renderToast(toast));
+      live.add(toast.id);
+      let entry = rendered.get(toast.id);
+      if (entry === undefined) {
+        entry = renderToast(toast);
+        rendered.set(toast.id, entry);
+      }
+      entry.summary.textContent = summaryText(toast); // 会变的只有重复计数
       scheduleDismiss(toast);
     }
+
+    for (const [id, entry] of rendered) {
+      if (live.has(id)) continue;
+      entry.node.remove();
+      rendered.delete(id);
+    }
+
+    // 对齐顺序。toast 只在尾部追加、从头部淘汰，幸存者的相对次序不会变，实际只有新
+    // 节点会被插进来；但仍逐个核对，免得将来换了插入策略这里悄悄错位。只在真的不对
+    // 位时才动——挪一个已经在树上的节点等于摘下来再插回去，焦点会掉。
+    let cursor = root.firstChild;
+    for (const toast of store.state.toasts) {
+      const { node } = rendered.get(toast.id);
+      if (node === cursor) {
+        cursor = cursor.nextSibling;
+        continue;
+      }
+      root.insertBefore(node, cursor);
+    }
+
     syncModalBlocked();
   };
 
@@ -54,9 +89,21 @@ export function createToastRegion({ store }) {
     syncModalBlocked();
   }
 
+  /**
+   * `??` 分不清「没配这一档」和「明确配成不关」：`null ?? 5_000` 会把「不关」变回 5 秒，
+   * 让 `error: null` 形同虚设（issue #114）。所以逐级判断，让 null 真的传得下去。
+   * 注意 store 的 addToast 默认就给 `timeoutMs: null`，那是「这条没单独指定」的意思，
+   * 与档位表里的 null 含义不同——这里用 `!= null` 把它当未指定处理。
+   */
+  function dismissDelay(toast) {
+    if (toast.timeoutMs != null) return toast.timeoutMs;
+    if (Object.hasOwn(AUTO_DISMISS_MS, toast.level)) return AUTO_DISMISS_MS[toast.level];
+    return FALLBACK_MS;
+  }
+
   function scheduleDismiss(toast) {
     if (timers.has(toast.id)) return;
-    const ms = toast.timeoutMs ?? AUTO_DISMISS_MS[toast.level] ?? 5_000;
+    const ms = dismissDelay(toast);
     if (ms === null) return;
     timers.set(toast.id, setTimeout(() => {
       timers.delete(toast.id);
@@ -64,10 +111,13 @@ export function createToastRegion({ store }) {
     }, ms));
   }
 
+  function summaryText(toast) {
+    return toast.count > 1 ? `${toast.summary}（×${toast.count}）` : toast.summary;
+  }
+
   function renderToast(toast) {
-    const node = el(`article.toast.toast-${toast.level}`, {}, [
-      el('p.summary', { text: toast.count > 1 ? `${toast.summary}（×${toast.count}）` : toast.summary }),
-    ]);
+    const summary = el('p.summary', { text: summaryText(toast) });
+    const node = el(`article.toast.toast-${toast.level}`, {}, [summary]);
     if (toast.detail) {
       const pre = el('pre.detail', { text: toast.detail });
       node.append(el('details', {}, [el('summary', { text: '详情' }), pre, el('div.detail-actions', {}, [
@@ -89,7 +139,7 @@ export function createToastRegion({ store }) {
         },
       },
     }));
-    return node;
+    return { node, summary };
   }
 
   const off = store.on('toasts:changed', render);