@done-coding/forge-plugin-guide 0.0.1-alpha.0 → 0.1.1-alpha.0

package/es/index.mjs

@@ -1,59 +1,59 @@
-import { shallowRef as S, readonly as B, computed as A } from "vue";
-import { BADGE_KEY_ATTR as C, BADGE_HOST_ATTR as P, BADGE_MASK_KINDS as O } from "@done-coding/admin-core";
+import { shallowRef as x, readonly as C, computed as _ } from "vue";
+import { BADGE_KEY_ATTR as P, BADGE_HOST_ATTR as B, BADGE_MASK_KINDS as O } from "@done-coding/admin-core";
 import { driver as M } from "driver.js";
 import "driver.js/dist/driver.css";
 const N = (e) => {
   if (!e) return [];
   try {
     const r = JSON.parse(e);
-    return Array.isArray(r) ? r.filter((o) => typeof o == "string") : [];
+    return Array.isArray(r) ? r.filter((t) => typeof t == "string") : [];
   } catch {
     return [];
   }
 }, L = (e, r) => {
-  const o = S(
+  const t = x(
     N(e.getItem(r))
-  ), s = (n) => {
-    o.value = n, e.setItem(r, JSON.stringify(n));
-  }, c = (n) => o.value.includes(n), t = (n) => {
-    c(n) || s([...o.value, n]);
-  }, i = () => {
-    s([]);
+  ), l = (s) => {
+    t.value = s, e.setItem(r, JSON.stringify(s));
+  }, c = (s) => t.value.includes(s), n = (s) => {
+    c(s) || l([...t.value, s]);
+  }, d = () => {
+    l([]);
   };
   return {
-    seen: B(o),
+    seen: C(t),
     isSeen: c,
-    markSeen: t,
-    reset: i
+    markSeen: n,
+    reset: d
   };
-}, U = (e) => e.replace(/(["\\])/g, "\\$1"), F = (e) => `[${C}="${U(e)}"]`, j = (e) => {
+}, U = (e) => e.replace(/(["\\])/g, "\\$1"), F = (e) => `[${P}="${U(e)}"]`, j = (e) => {
   if (typeof document > "u") return;
   const r = document.querySelector(
     F(e)
   );
   if (!r) return;
-  const o = r.closest(`[${P}]`) ?? r;
-  return Y(o) ? o : void 0;
+  const t = r.closest(`[${B}]`) ?? r;
+  return Y(t) ? t : void 0;
 }, Y = (e) => e.getClientRects().length > 0, z = "[dc-plugin-guide]", H = O, V = (e, r) => r.startsWith("/") ? r : e ? `${e.replace(/\/$/, "")}/${r}` : `/${r}`, W = (e) => {
   const r = /* @__PURE__ */ new Map();
-  let o = 0;
-  const s = (c, t) => {
-    c.forEach((i) => {
+  let t = 0;
+  const l = (c, n) => {
+    c.forEach((d) => {
       var v;
-      const n = V(t, i.path), l = o++;
-      r.has(n) || r.set(n, l), typeof i.name == "string" && !r.has(i.name) && r.set(i.name, l), (v = i.children) != null && v.length && s(i.children, n);
+      const s = V(n, d.path), a = t++;
+      r.has(s) || r.set(s, a), typeof d.name == "string" && !r.has(d.name) && r.set(d.name, a), (v = d.children) != null && v.length && l(d.children, s);
     });
   };
-  return s(e ?? [], ""), r;
-}, J = (e, r) => !!e.expireAt && e.expireAt <= r, y = (e, r, o) => {
+  return l(e ?? [], ""), r;
+}, q = (e, r) => !!e.expireAt && e.expireAt <= r, y = (e, r, t) => {
   if (e) {
     if (e.has(r)) return;
     e.add(r);
   }
-  console.warn(`${z} ${o}`);
-}, R = (e, r, o) => {
-  const s = e.key ?? e.badgeKey;
-  if (!s) {
+  console.warn(`${z} ${t}`);
+}, R = (e, r, t) => {
+  const l = e.key ?? e.badgeKey;
+  if (!l) {
     y(
       r.warned,
       "__nokey__",
@@ -62,40 +62,40 @@ const N = (e) => {
     return;
   }
   const c = e.badgeKey ? r.marks[e.badgeKey] : void 0;
-  if (e.badgeKey && (!c || J(c, o))) return;
+  if (e.badgeKey && (!c || q(c, t))) return;
   if (c && H.includes(c.kind)) {
     y(
       r.warned,
-      `mask:${s}`,
-      `「${s}」的标是 ${c.kind}，它会遮挡宿主交互（用户点不动），与引导正面冲突，已跳过。[MUST NOT] 把会遮挡的档（${O.join(
+      `mask:${l}`,
+      `「${l}」的标是 ${c.kind}，它会遮挡宿主交互（用户点不动），与引导正面冲突，已跳过。[MUST NOT] 把会遮挡的档（${O.join(
         " / "
       )}）配进 badgeKinds。`
     );
     return;
   }
-  const t = e.description ?? (c == null ? void 0 : c.description);
-  if (!t) {
+  const n = e.description ?? (c == null ? void 0 : c.description);
+  if (!n) {
     y(
       r.warned,
-      `nodesc:${s}`,
-      `「${s}」没有讲解正文（step.description 与 BadgeEntry.description 都为空），已跳过。[MUST NOT] 拿菜单 title 硬凑——没内容的引导步骤是噪音。`
+      `nodesc:${l}`,
+      `「${l}」没有讲解正文（step.description 与 BadgeEntry.description 都为空），已跳过。[MUST NOT] 拿菜单 title 硬凑——没内容的引导步骤是噪音。`
     );
     return;
   }
   if (e.route && !r.hasRouter) {
     y(
       r.warned,
-      `norouter:${s}`,
-      `「${s}」配了 route 但 createGuidePlugin 没拿到 router，无法导航，已跳过。`
+      `norouter:${l}`,
+      `「${l}」配了 route 但 createGuidePlugin 没拿到 router，无法导航，已跳过。`
     );
     return;
   }
-  const i = e.badgeKey, n = c == null ? void 0 : c.version, l = n === void 0 || n === "" ? s : `${s}@${n}`;
+  const d = e.badgeKey, s = c == null ? void 0 : c.version, a = s === void 0 || s === "" ? l : `${l}@${s}`;
   return {
     ...e,
-    key: l,
-    sourceKey: s,
-    description: t,
+    key: a,
+    sourceKey: l,
+    description: n,
     /**
      * 锚点：显式 `element` 优先，否则由 `badgeKey` 解析。
      *
@@ -104,19 +104,19 @@ const N = (e) => {
      * 高亮一个小圆点说「看这里」不是想要的。driver.js 的 `element` 支持
      * `() => Element`，且 `waitForElement` 会反复重算它 ⇒ 跨路由 / 懒挂载也吃得下。
      */
-    element: e.element ?? (i ? () => j(i) : void 0)
+    element: e.element ?? (d ? () => j(d) : void 0)
   };
-}, T = (e) => {
+}, $ = (e) => {
   var c;
   const r = e.now ?? Date.now();
   if ((c = e.steps) != null && c.length)
-    return e.steps.map((t) => R(t, e, r)).filter((t) => !!t);
-  const o = W(e.routes);
-  return Object.keys(e.marks).filter((t) => e.badgeKinds.includes(e.marks[t].kind)).sort((t, i) => {
-    const n = o.get(t), l = o.get(i);
-    return n !== void 0 && l !== void 0 ? n - l : n !== void 0 ? -1 : l !== void 0 ? 1 : t < i ? -1 : t > i ? 1 : 0;
-  }).map((t) => R({ badgeKey: t }, e, r)).filter((t) => !!t);
-}, q = `dc-guide-theme-${Math.random().toString(36).slice(2, 8)}`, X = "data-dc-guide-theme", h = "var(--dc-core-surface, var(--el-bg-color-overlay))", m = "var(--dc-core-primary-color, var(--el-color-primary))", Z = `
+    return e.steps.map((n) => R(n, e, r)).filter((n) => !!n);
+  const t = W(e.routes);
+  return Object.keys(e.marks).filter((n) => e.badgeKinds.includes(e.marks[n].kind)).sort((n, d) => {
+    const s = t.get(n), a = t.get(d);
+    return s !== void 0 && a !== void 0 ? s - a : s !== void 0 ? -1 : a !== void 0 ? 1 : n < d ? -1 : n > d ? 1 : 0;
+  }).map((n) => R({ badgeKey: n }, e, r)).filter((n) => !!n);
+}, J = `dc-guide-theme-${Math.random().toString(36).slice(2, 8)}`, X = "data-dc-guide-theme", h = "var(--dc-core-surface, var(--el-bg-color-overlay))", S = "var(--dc-core-primary-color, var(--el-color-primary))", Z = `
 .driver-popover {
   color: var(--dc-core-base-color, var(--el-text-color-primary));
   background-color: ${h};
@@ -160,7 +160,7 @@ const N = (e) => {
 
 /* hover 对齐 EP default 档：用户主动悬停才染主色 */
 .driver-popover-footer-btn:hover {
-  color: ${m};
+  color: ${S};
   background-color: var(--el-color-primary-light-9);
   border-color: var(--el-color-primary-light-7);
 }
@@ -181,8 +181,8 @@ const N = (e) => {
 .driver-popover-next-btn,
 .driver-popover-next-btn:focus:not(:hover) {
   color: var(--el-color-white, #fff);
-  background-color: ${m};
-  border-color: ${m};
+  background-color: ${S};
+  border-color: ${S};
 }
 .driver-popover-next-btn:hover {
   color: var(--el-color-white, #fff);
@@ -211,7 +211,7 @@ const N = (e) => {
  * 有一半在视口外、另一半被窗口裁掉，实测不可见，故无需为它做任何规避。
  */
 svg.driver-overlay path {
-  stroke: ${m};
+  stroke: ${S};
   stroke-width: 2;
 }
 
@@ -226,7 +226,7 @@ const Q = () => {
   if (K || typeof document > "u") return;
   K = !0;
   const e = document.createElement("style");
-  e.id = q, e.setAttribute(X, ""), e.textContent = Z, document.head.appendChild(e);
+  e.id = J, e.setAttribute(X, ""), e.textContent = Z, document.head.appendChild(e);
 }, ee = {
   showProgress: !0,
   progressText: "{{current}} / {{total}}",
@@ -255,7 +255,7 @@ const Q = () => {
   /** 等超时仍没有 → 跳过该步继续，[MUST NOT] 让它退化成「屏幕中央的空高亮」 */
   skipMissingElement: !0
 }, re = (e) => {
-  var r, o;
+  var r, t;
   return {
     element: e.element,
     advanceOnClick: e.advanceOnClick,
@@ -265,7 +265,7 @@ const Q = () => {
       title: e.title,
       description: e.description,
       side: (r = e.popover) == null ? void 0 : r.side,
-      align: (o = e.popover) == null ? void 0 : o.align,
+      align: (t = e.popover) == null ? void 0 : t.align,
       /**
        * 🔴 **[MUST] 显式清空**：driver.js 在**首步硬编码禁用 `previous`**
        * （源码 `disableButtons:[...isFirst?[]:["previous"]]`），而本包把那一位复用成了
@@ -295,141 +295,153 @@ const Q = () => {
 }, ne = (e, r) => {
   if (!e || typeof MutationObserver > "u") return () => {
   };
-  const o = () => e.getClientRects().length === 0;
-  if (o()) return () => {
-  };
-  const s = new MutationObserver(() => {
-    o() && (s.disconnect(), r());
+  const t = () => e.getClientRects().length === 0;
+  if (t()) {
+    const c = setTimeout(r, 0);
+    return () => clearTimeout(c);
+  }
+  const l = new MutationObserver(() => {
+    t() && (l.disconnect(), r());
   });
-  return s.observe(document.body, {
+  return l.observe(document.body, {
     childList: !0,
     subtree: !0,
     attributes: !0,
     attributeFilter: ["style", "class", "hidden"]
-  }), () => s.disconnect();
+  }), () => l.disconnect();
 }, ie = (e) => {
-  const { steps: r, router: o, driverConfig: s, onStepSeen: c } = e;
+  const { steps: r, router: t, driverConfig: l, onStepSeen: c } = e;
   Q();
-  const t = r.map(re), i = (v, g) => {
-    const u = oe(v);
-    if (!u || !o || o.currentRoute.value.path === u) {
-      g();
+  const n = r.map(re), d = (u, i) => {
+    const o = oe(u);
+    if (!o || !t || t.currentRoute.value.path === o) {
+      i();
       return;
     }
-    o.push(u).catch(() => {
-    }).then(g, g);
+    t.push(o).catch(() => {
+    }).then(i, i);
   };
-  let n = () => {
+  let s = () => {
   };
-  const l = M({
+  const a = M({
     ...ee,
-    ...s,
-    steps: t,
-    onNextClick: (v, g, u) => {
-      const x = u.index ?? 0;
-      i(t[x + 1], () => u.driver.moveNext());
+    ...l,
+    steps: n,
+    onNextClick: (u, i, o) => {
+      const g = o.index ?? 0;
+      d(n[g + 1], () => o.driver.moveNext());
     },
     // 「上一步」位已复用为「跳过」⇒ 点它即销毁整条导览，[MUST NOT] 再 movePrevious
-    onPrevClick: (v, g, u) => {
-      u.driver.destroy();
+    onPrevClick: (u, i, o) => {
+      o.driver.destroy();
     },
-    onHighlighted: (v, g) => {
-      const u = te(g);
-      u && c(u), n(), n = ne(v, () => {
-        l.isActive() && (l.hasPreviousStep() ? l.movePrevious() : l.destroy());
+    onHighlighted: (u, i) => {
+      const o = te(i);
+      o && c(o), s(), s = ne(u, () => {
+        a.isActive() && (a.hasPreviousStep() ? a.movePrevious() : a.destroy());
       });
     }
-  });
-  return i(t[0], () => l.drive()), {
+  }), v = 300;
+  let p;
+  const m = () => {
+    p = setTimeout(() => {
+      if (!a.isActive()) return;
+      const u = document.querySelector(".driver-popover");
+      u && u.getClientRects().length > 0 || a.destroy();
+    }, v);
+  };
+  return d(n[0], () => {
+    a.drive(), m();
+  }), {
     destroy: () => {
-      n(), l.isActive() && l.destroy();
+      s(), p !== void 0 && clearTimeout(p), a.isActive() && a.destroy();
     }
   };
-}, I = "dc-plugin-guide", se = ["new", "updated"], ce = "guide/seen", de = (e) => {
+}, D = "dc-plugin-guide", se = ["new", "updated"], ce = "guide/seen", de = (e) => {
   const r = e == null ? void 0 : e.bridge;
   if (!(r != null && r.badge) || typeof r.getStorage != "function")
     throw new Error(
-      `${I}: 安装面是 core bridge 的插件面，请用 coreBridge.use(guide)，[MUST NOT] 用 app.use(guide)（两者 install 签名不同）`
+      `${D}: 安装面是 core bridge 的插件面，请用 coreBridge.use(guide)，[MUST NOT] 用 app.use(guide)（两者 install 签名不同）`
     );
   return r;
 }, ge = (e = {}) => {
-  const r = e.badgeKinds ?? se, o = e.storageKey ?? ce, s = e.name ?? I, c = /* @__PURE__ */ new Set(), t = S(), i = S();
-  let n;
-  const l = A(
+  const r = e.badgeKinds ?? se, t = e.storageKey ?? ce, l = e.name ?? D, c = /* @__PURE__ */ new Set(), n = x(), d = x();
+  let s;
+  const a = _(
     () => {
-      var d, a;
-      return T({
-        marks: ((d = t.value) == null ? void 0 : d.badge.marks.value) ?? {},
+      var i, o;
+      return $({
+        marks: ((i = n.value) == null ? void 0 : i.badge.marks.value) ?? {},
         badgeKinds: r,
         steps: e.steps,
-        routes: (a = t.value) == null ? void 0 : a.getRoutes(),
+        routes: (o = n.value) == null ? void 0 : o.getRoutes(),
         hasRouter: !!e.router,
         warned: c
       });
     }
-  ), v = A(() => {
-    const d = i.value;
-    if (!d) return l.value;
-    const a = d.seen.value;
-    return l.value.filter((f) => !a.includes(f.key));
-  }), g = (d) => {
-    var w, E, _, $;
-    const a = d.keys && Array.from(new Set(d.keys));
-    if (!a)
-      return d.force ? l.value : v.value;
-    const f = (b) => a.map((k) => b.find((G) => G.sourceKey === k)).filter((k) => !!k);
+  ), v = _(() => {
+    const i = d.value;
+    if (!i) return a.value;
+    const o = i.seen.value;
+    return a.value.filter((g) => !o.includes(g.key));
+  }), p = (i) => {
+    var w, E, T, A;
+    const o = i.keys && Array.from(new Set(i.keys));
+    if (!o)
+      return i.force ? a.value : v.value;
+    const g = (b) => o.map((k) => b.find((I) => I.sourceKey === k)).filter((k) => !!k);
     if ((w = e.steps) != null && w.length)
-      return f(d.force ? l.value : v.value);
-    const p = T({
-      marks: ((E = t.value) == null ? void 0 : E.badge.marks.value) ?? {},
+      return g(i.force ? a.value : v.value);
+    const f = $({
+      marks: ((E = n.value) == null ? void 0 : E.badge.marks.value) ?? {},
       badgeKinds: r,
-      steps: a.map((b) => ({ badgeKey: b })),
-      routes: (_ = t.value) == null ? void 0 : _.getRoutes(),
+      steps: o.map((b) => ({ badgeKey: b })),
+      routes: (T = n.value) == null ? void 0 : T.getRoutes(),
       hasRouter: !!e.router,
       warned: c
     });
-    if (d.force) return p;
-    const D = (($ = i.value) == null ? void 0 : $.seen.value) ?? [];
-    return p.filter((b) => !D.includes(b.key));
-  }, u = () => {
-    n == null || n.destroy(), n = void 0;
+    if (i.force) return f;
+    const G = ((A = d.value) == null ? void 0 : A.seen.value) ?? [];
+    return f.filter((b) => !G.includes(b.key));
+  }, m = () => {
+    s == null || s.destroy(), s = void 0;
   };
   return {
-    name: s,
-    install: (d) => {
-      const a = de(d);
-      t.value = a, i.value = L(a.getStorage(), o);
+    name: l,
+    install: (i) => {
+      const o = de(i);
+      n.value = o, d.value = L(o.getStorage(), t);
     },
     pendingSteps: v,
-    start: (d = {}) => {
-      const a = g(d);
-      return a.length ? (u(), n = ie({
-        steps: a,
+    start: (i = {}) => {
+      const o = p(i);
+      return o.length ? (m(), s = ie({
+        steps: o,
         router: e.router,
         driverConfig: e.driverConfig,
-        onStepSeen: (f) => {
-          var p;
-          return (p = i.value) == null ? void 0 : p.markSeen(f);
+        onStepSeen: (g) => {
+          var f;
+          return (f = d.value) == null ? void 0 : f.markSeen(g);
         }
       }), !0) : !1;
     },
-    stop: u,
-    isSeen: (d) => {
-      var a;
-      return ((a = i.value) == null ? void 0 : a.isSeen(d)) ?? !1;
+    stop: m,
+    isSeen: (i) => {
+      var o;
+      return ((o = d.value) == null ? void 0 : o.isSeen(i)) ?? !1;
     },
-    markSeen: (d) => {
-      var a;
-      return (a = i.value) == null ? void 0 : a.markSeen(d);
+    markSeen: (i) => {
+      var o;
+      return (o = d.value) == null ? void 0 : o.markSeen(i);
     },
     reset: () => {
-      var d;
-      return (d = i.value) == null ? void 0 : d.reset();
+      var i;
+      return (i = d.value) == null ? void 0 : i.reset();
     }
   };
 };
 export {
-  I as GUIDE_PLUGIN_NAME,
+  D as GUIDE_PLUGIN_NAME,
   ge as createGuidePlugin,
   F as guideBadgeAnchorSelector,
   j as guideResolveBadgeAnchor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@done-coding/forge-plugin-guide",
-  "version": "0.0.1-alpha.0",
+  "version": "0.1.1-alpha.0",
   "description": "内部前端库",
   "private": false,
   "main": "es/index.mjs",
@@ -46,7 +46,7 @@
     "**/*.less"
   ],
   "devDependencies": {
-    "@done-coding/admin-core": "^0.28.1-alpha.0",
+    "@done-coding/admin-core": "^0.29.1-alpha.0",
     "@done-coding/cli-inject": "0.6.3",
     "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -72,5 +72,5 @@
   "dependencies": {
     "driver.js": "^1.8.0"
   },
-  "gitHead": "89cee2eb458d349b9a6f2f1acb6088f811cd5e8d"
+  "gitHead": "428001dd152178576b5f87445148896efdde98c5"
 }