tour-guide-coach 1.0.0

package/dist/index.js

@@ -0,0 +1,397 @@
+import { shallowReactive as tt, defineComponent as et, watch as nt, onBeforeUnmount as lt, computed as d, openBlock as r, createBlock as ot, Teleport as it, unref as c, createElementBlock as u, createElementVNode as s, normalizeStyle as x, createCommentVNode as v, toDisplayString as p, createTextVNode as at } from "vue";
+const st = 150, rt = 12e3, l = tt({
+  active: !1,
+  config: null,
+  stepIndex: 0,
+  totalSteps: 0,
+  highlightRect: null,
+  targetEl: null,
+  gatePass: !0,
+  waitingTarget: !1,
+  waitTimedOut: !1
+});
+let W = null, S = null, _ = null, m = null, O = null, $ = null, C = null, T = null, L = null, E = null;
+function q() {
+  var t;
+  return ((t = l.config) == null ? void 0 : t.steps[l.stepIndex]) ?? null;
+}
+function ct() {
+  return q();
+}
+function zt(t, n, i) {
+  l.active && B(), l.config = t, l.stepIndex = 0, l.totalSteps = t.steps.length, l.gatePass = !0, W = i ?? null, S = n ?? null, l.active = !0, U();
+}
+function B() {
+  V(), l.active = !1, l.config = null, l.highlightRect = null, l.targetEl = null, S = null, W = null;
+}
+function G() {
+  V(), l.active = !1, l.highlightRect = null, l.targetEl = null;
+  const t = W;
+  S = null, W = null, t == null || t();
+}
+function k() {
+  V();
+  const t = l.config;
+  if (t) {
+    if (l.stepIndex >= t.steps.length - 1) {
+      G();
+      return;
+    }
+    l.stepIndex += 1, U();
+  }
+}
+function ut() {
+  k();
+}
+function U() {
+  var i;
+  const t = q();
+  if (!t) {
+    G();
+    return;
+  }
+  E = t, l.gatePass = !t.gate, l.waitingTarget = !0, l.waitTimedOut = !1, l.highlightRect = null, l.targetEl = null;
+  const n = (i = t.beforeEnter) == null ? void 0 : i.call(t);
+  n instanceof Promise ? n.then(() => H(t)) : requestAnimationFrame(() => H(t));
+}
+function H(t) {
+  if (t.trigger === "auto") {
+    l.waitingTarget = !1, gt(t);
+    return;
+  }
+  if (t.trigger === "wait-dom") {
+    j(t);
+    return;
+  }
+  const n = I(t.target);
+  if (n) {
+    N(n, t);
+    return;
+  }
+  J(t.target, () => {
+    const i = I(t.target);
+    N(i, t);
+  });
+}
+function I(t) {
+  if (S) {
+    const n = S(t);
+    if (n) return n;
+  }
+  try {
+    return document.querySelector(t);
+  } catch {
+    return null;
+  }
+}
+function N(t, n) {
+  if (!t) {
+    l.waitTimedOut = !0;
+    return;
+  }
+  l.waitingTarget = !1, l.waitTimedOut = !1, l.targetEl = t, P(t), ft(t, n), pt(n), dt(t);
+}
+function P(t) {
+  const n = t.getBoundingClientRect(), i = 6;
+  let o = {
+    top: n.top - i,
+    left: n.left - i,
+    width: n.width + i * 2,
+    height: n.height + i * 2
+  };
+  const g = E == null ? void 0 : E.expandSelector;
+  if (g) {
+    const w = document.querySelectorAll(g);
+    let R = null;
+    for (const h of w)
+      if (h.offsetHeight > 0) {
+        R = h;
+        break;
+      }
+    if (R) {
+      const h = R.getBoundingClientRect(), M = Math.min(o.top, h.top - i), y = Math.min(o.left, h.left - i), A = Math.max(o.left + o.width, h.right + i), D = Math.max(o.top + o.height, h.bottom + i);
+      o = { top: M, left: y, width: A - y, height: D - M };
+    }
+  }
+  l.highlightRect = o;
+}
+function dt(t) {
+  K(), T = () => P(t), window.addEventListener("scroll", T, !0), window.addEventListener("resize", T), C = new ResizeObserver(() => P(t)), C.observe(t), (E == null ? void 0 : E.expandSelector) && (L = new MutationObserver(() => P(t)), L.observe(document.body, { childList: !0, subtree: !0, attributes: !0, attributeFilter: ["style", "class"] }));
+}
+function K() {
+  T && (window.removeEventListener("scroll", T, !0), window.removeEventListener("resize", T)), T = null, C == null || C.disconnect(), C = null, L == null || L.disconnect(), L = null;
+}
+function ft(t, n) {
+  if (n.trigger === "click") {
+    const i = () => {
+      t.removeEventListener("click", i);
+      const o = n.clickDelay ?? 350;
+      n.afterClickWait ? j({ waitForElement: n.afterClickWait, clickDelay: o }) : $ = setTimeout(() => k(), o);
+    };
+    t.addEventListener("click", i);
+  }
+}
+function pt(t) {
+  if (!t.gate) {
+    l.gatePass = !0;
+    return;
+  }
+  const n = (i) => I(i);
+  l.gatePass = t.gate(n), !l.gatePass && (_ = setInterval(() => {
+    t.gate(n) && (l.gatePass = !0, _ && (clearInterval(_), _ = null));
+  }, st));
+}
+function j(t) {
+  const n = t.waitForElement;
+  if (!n) {
+    k();
+    return;
+  }
+  if (I(n)) {
+    $ = setTimeout(() => k(), t.clickDelay ?? 300);
+    return;
+  }
+  J(n, () => {
+    $ = setTimeout(() => k(), t.clickDelay ?? 300);
+  });
+}
+function J(t, n) {
+  let i = !1;
+  const o = () => {
+    i || (i = !0, m == null || m.disconnect(), m = null, n());
+  };
+  m = new MutationObserver(() => {
+    I(t) && o();
+  }), m.observe(document.body, { childList: !0, subtree: !0 }), O = setTimeout(o, rt);
+}
+function gt(t) {
+  $ = setTimeout(() => k(), t.autoDelay ?? 600);
+}
+function V() {
+  K(), _ && (clearInterval(_), _ = null), m && (m.disconnect(), m = null), O && (clearTimeout(O), O = null), $ && (clearTimeout($), $ = null);
+}
+const ht = {
+  key: 0,
+  class: "tour-root"
+}, vt = { class: "tp-head" }, mt = {
+  key: 0,
+  class: "tp-required"
+}, wt = { class: "tp-title" }, xt = { class: "tp-of" }, kt = { class: "tp-content" }, yt = {
+  key: 0,
+  class: "tp-tip"
+}, bt = {
+  key: 1,
+  class: "tp-warn"
+}, _t = { class: "tp-foot" }, Tt = {
+  key: 0,
+  class: "tp-click-hint"
+}, $t = {
+  key: 1,
+  class: "tp-btns"
+}, Et = {
+  key: 2,
+  class: "tp-gate"
+}, Ct = {
+  key: 2,
+  class: "tour-waiting"
+}, Lt = {
+  key: 0,
+  class: "tg-spin",
+  viewBox: "0 0 1024 1024",
+  width: "28",
+  height: "28",
+  fill: "currentColor"
+}, Rt = {
+  key: 1,
+  viewBox: "0 0 1024 1024",
+  width: "28",
+  height: "28",
+  fill: "#e6a23c"
+}, St = /* @__PURE__ */ et({
+  __name: "TourOverlay",
+  setup(t) {
+    const n = l;
+    function i(e) {
+      e.key === "Escape" && n.active && B();
+    }
+    nt(() => n.active, (e) => {
+      e ? window.addEventListener("keydown", i) : window.removeEventListener("keydown", i);
+    }), lt(() => window.removeEventListener("keydown", i));
+    const o = d(() => ct()), g = d(() => n.highlightRect), w = d(() => {
+      var e, a;
+      return ((e = o.value) == null ? void 0 : e.accent) ?? ((a = n.config) == null ? void 0 : a.accent) ?? "#409eff";
+    }), R = d(() => n.stepIndex >= n.totalSteps - 1), h = d(() => {
+      const e = o.value;
+      return e ? !e.gate && e.trigger === "manual" : !1;
+    });
+    function M() {
+      const e = g.value;
+      return e ? {
+        top: { left: 0, top: 0, width: "100vw", height: `${Math.max(e.top, 0)}px` },
+        bottom: { left: 0, top: `${e.top + e.height}px`, width: "100vw", height: `calc(100vh - ${e.top + e.height}px)` },
+        left: { left: 0, top: `${e.top}px`, width: `${Math.max(e.left, 0)}px`, height: `${e.height}px` },
+        right: { left: `${e.left + e.width}px`, top: `${e.top}px`, width: `calc(100vw - ${e.left + e.width}px)`, height: `${e.height}px` }
+      } : null;
+    }
+    const y = d(M), A = d(() => {
+      var e;
+      return ((e = y.value) == null ? void 0 : e.top) ?? { display: "none" };
+    }), D = d(() => {
+      var e;
+      return ((e = y.value) == null ? void 0 : e.bottom) ?? { display: "none" };
+    }), Q = d(() => {
+      var e;
+      return ((e = y.value) == null ? void 0 : e.left) ?? { display: "none" };
+    }), X = d(() => {
+      var e;
+      return ((e = y.value) == null ? void 0 : e.right) ?? { display: "none" };
+    }), Y = d(() => {
+      const e = g.value;
+      return e ? {
+        position: "fixed",
+        top: `${e.top}px`,
+        left: `${e.left}px`,
+        width: `${e.width}px`,
+        height: `${e.height}px`,
+        borderRadius: "8px",
+        border: `2px solid ${w.value}`,
+        boxShadow: `0 0 0 3px ${w.value}33, 0 0 20px ${w.value}44`,
+        pointerEvents: "none",
+        transition: "all 0.35s cubic-bezier(0.4,0,0.2,1)"
+      } : { display: "none" };
+    }), Z = d(() => {
+      var F;
+      const e = g.value;
+      if (!e) return { position: "fixed", top: "50%", left: "50%", transform: "translate(-50%,-50%)" };
+      const a = ((F = o.value) == null ? void 0 : F.placement) ?? "bottom", b = 14, f = { position: "fixed", zIndex: 100002 };
+      switch (a) {
+        case "top":
+          return { ...f, left: `${e.left}px`, bottom: `calc(100vh - ${e.top - b}px)`, maxWidth: "420px" };
+        case "bottom":
+          return { ...f, left: `${e.left}px`, top: `${e.top + e.height + b}px`, maxWidth: "420px" };
+        case "left":
+          return { ...f, right: `calc(100vw - ${e.left - b}px)`, top: `${e.top}px`, maxWidth: "360px" };
+        case "right":
+          return { ...f, left: `${e.left + e.width + b}px`, top: `${e.top}px`, maxWidth: "360px" };
+        default:
+          return { ...f, top: "50%", left: "50%", transform: "translate(-50%,-50%)", maxWidth: "480px" };
+      }
+    });
+    function z() {
+    }
+    return (e, a) => {
+      var b;
+      return r(), ot(it, { to: "body" }, [
+        c(n).active ? (r(), u("div", ht, [
+          s("div", {
+            class: "tour-mask",
+            style: x(A.value),
+            onClick: z
+          }, null, 4),
+          s("div", {
+            class: "tour-mask",
+            style: x(D.value),
+            onClick: z
+          }, null, 4),
+          s("div", {
+            class: "tour-mask",
+            style: x(Q.value),
+            onClick: z
+          }, null, 4),
+          s("div", {
+            class: "tour-mask",
+            style: x(X.value),
+            onClick: z
+          }, null, 4),
+          g.value ? (r(), u("div", {
+            key: 0,
+            class: "tour-highlight",
+            style: x(Y.value)
+          }, null, 4)) : v("", !0),
+          o.value && !c(n).waitingTarget ? (r(), u("div", {
+            key: 1,
+            class: "tour-popover",
+            style: x(Z.value)
+          }, [
+            s("div", vt, [
+              s("span", {
+                class: "tp-step-no",
+                style: x({ background: w.value })
+              }, p(c(n).stepIndex + 1), 5),
+              o.value.gate ? (r(), u("span", mt, "*")) : v("", !0),
+              s("span", wt, p(o.value.title), 1),
+              s("span", xt, "第 " + p(c(n).stepIndex + 1) + " / " + p(c(n).totalSteps) + " 步", 1)
+            ]),
+            s("p", kt, p(o.value.content), 1),
+            o.value.tip ? (r(), u("div", yt, "💡 " + p(o.value.tip), 1)) : v("", !0),
+            o.value.warn ? (r(), u("div", bt, "⚠️ " + p(o.value.warn), 1)) : v("", !0),
+            s("div", _t, [
+              s("button", {
+                class: "tg-btn tg-btn--link tg-btn--sm",
+                onClick: a[0] || (a[0] = (f) => c(B)())
+              }, "退出引导"),
+              o.value.trigger === "click" ? (r(), u("span", Tt, " 👆 请点击高亮区域 ")) : c(n).gatePass ? (r(), u("span", $t, [
+                h.value ? (r(), u("button", {
+                  key: 0,
+                  class: "tg-btn tg-btn--sm",
+                  onClick: a[1] || (a[1] = (f) => c(ut)())
+                }, "跳过此步")) : v("", !0),
+                s("button", {
+                  class: "tg-btn tg-btn--primary tg-btn--sm",
+                  style: x({ background: w.value, borderColor: w.value }),
+                  onClick: a[2] || (a[2] = (f) => c(k)())
+                }, p(R.value ? "完成" : "下一步"), 5)
+              ])) : (r(), u("span", Et, [
+                a[5] || (a[5] = s("svg", {
+                  class: "tp-gate-icon",
+                  viewBox: "0 0 1024 1024",
+                  width: "14",
+                  height: "14",
+                  fill: "currentColor"
+                }, [
+                  s("path", { d: "M512 160a96 96 0 0 1 96 96v64H416v-64a96 96 0 0 1 96-96zm0-64a160 160 0 0 0-160 160v64h-32a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V384a64 64 0 0 0-64-64h-32v-64A160 160 0 0 0 512 96zM320 448h384v320H320V448z" })
+                ], -1)),
+                at(" " + p(o.value.gateHint || "请先完成本步操作"), 1)
+              ]))
+            ])
+          ], 4)) : v("", !0),
+          c(n).waitingTarget ? (r(), u("div", Ct, [
+            c(n).waitTimedOut ? (r(), u("svg", Rt, [...a[7] || (a[7] = [
+              s("path", { d: "M512 64L64 896h896L512 64zm0 192l288 576H224l288-576zm-32 224v128h64V480h-64zm0 160v64h64v-64h-64z" }, null, -1)
+            ])])) : (r(), u("svg", Lt, [...a[6] || (a[6] = [
+              s("path", {
+                d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 64a384 384 0 1 0 0 768 384 384 0 0 0 0-768z",
+                opacity: ".25"
+              }, null, -1),
+              s("path", { d: "M512 64a448 448 0 0 1 448 448h-64A384 384 0 0 0 512 128V64z" }, null, -1)
+            ])])),
+            s("p", null, p(c(n).waitTimedOut ? "未找到目标元素，可能是页面状态不符" : ((b = o.value) == null ? void 0 : b.content) ?? "等待页面加载..."), 1),
+            c(n).waitTimedOut ? (r(), u("button", {
+              key: 2,
+              class: "tg-btn tg-btn--warning tg-btn--sm",
+              onClick: a[3] || (a[3] = (f) => c(k)())
+            }, "跳过此步")) : v("", !0),
+            s("button", {
+              class: "tg-btn tg-btn--sm",
+              onClick: a[4] || (a[4] = (f) => c(B)())
+            }, "退出引导")
+          ])) : v("", !0)
+        ])) : v("", !0)
+      ]);
+    };
+  }
+}), It = (t, n) => {
+  const i = t.__vccOpts || t;
+  for (const [o, g] of n)
+    i[o] = g;
+  return i;
+}, Ot = /* @__PURE__ */ It(St, [["__scopeId", "data-v-9602901d"]]);
+export {
+  Ot as TourOverlay,
+  B as abort,
+  G as complete,
+  k as next,
+  ut as skip,
+  zt as startTour,
+  l as tourState
+};

package/dist/store.d.ts

@@ -0,0 +1,21 @@
+import { TourConfig, TourStep, HighlightRect } from './types';
+/** 元素解析器：宿主页面提供，把 target 名解析为 DOM 元素 */
+export type TargetResolver = (target: string) => HTMLElement | null;
+export declare const tourState: import('vue').ShallowReactive<{
+    active: boolean;
+    config: TourConfig | null;
+    stepIndex: number;
+    totalSteps: number;
+    highlightRect: HighlightRect | null;
+    targetEl: HTMLElement | null;
+    gatePass: boolean;
+    waitingTarget: boolean;
+    waitTimedOut: boolean;
+}>;
+/** 获取当前步骤（供组件使用） */
+export declare function currentStep(): TourStep | null;
+export declare function startTour(tour: TourConfig, resolver?: TargetResolver, done?: () => void): void;
+export declare function abort(): void;
+export declare function complete(): void;
+export declare function next(): void;
+export declare function skip(): void;

package/dist/style.css

@@ -0,0 +1 @@
+.tour-root[data-v-9602901d]{--tg-primary: var(--el-color-primary, #409eff);--tg-success: var(--el-color-success, #67c23a);--tg-warning: var(--el-color-warning, #e6a23c);--tg-danger: var(--el-color-danger, #f56c6c);--tg-text-1: var(--el-text-color-primary, #303133);--tg-text-2: var(--el-text-color-regular, #606266);--tg-text-3: var(--el-text-color-secondary, #909399);--tg-border: var(--el-border-color-lighter, #ebeef5);--tg-fill-light: var(--el-fill-color-light, #f5f7fa);--tg-radius: var(--el-border-radius-base, 4px);position:fixed;top:0;right:0;bottom:0;left:0;z-index:100000;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif}.tour-mask[data-v-9602901d]{position:fixed;background:#0000008c;transition:all .35s cubic-bezier(.4,0,.2,1);cursor:not-allowed;pointer-events:auto}.tour-highlight[data-v-9602901d]{z-index:100001}.tg-btn[data-v-9602901d]{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--tg-border);border-radius:var(--tg-radius);background:#fff;color:var(--tg-text-2);font-size:14px;font-weight:500;line-height:1;padding:8px 15px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;outline:none;white-space:nowrap;-webkit-user-select:none;user-select:none}.tg-btn[data-v-9602901d]:hover{color:var(--tg-primary);border-color:var(--tg-primary);background:#ecf5ff}.tg-btn--sm[data-v-9602901d]{padding:5px 11px;font-size:12px}.tg-btn--primary[data-v-9602901d]{background:var(--tg-primary);border-color:var(--tg-primary);color:#fff}.tg-btn--primary[data-v-9602901d]:hover{opacity:.85;background:var(--tg-primary);color:#fff}.tg-btn--warning[data-v-9602901d]{background:var(--tg-warning);border-color:var(--tg-warning);color:#fff}.tg-btn--warning[data-v-9602901d]:hover{opacity:.85;background:var(--tg-warning);color:#fff}.tg-btn--link[data-v-9602901d]{border:none;background:none;padding:4px 6px;color:var(--tg-text-3)}.tg-btn--link[data-v-9602901d]:hover{color:var(--tg-primary);background:none}.tour-popover[data-v-9602901d]{z-index:100002;background:#fff;border-radius:12px;padding:20px 24px;box-shadow:0 8px 40px #0000001f,0 2px 8px #0000000f;animation:tp-in-9602901d .3s ease;pointer-events:auto;min-width:280px;max-width:420px}@keyframes tp-in-9602901d{0%{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.tp-head[data-v-9602901d]{display:flex;align-items:center;gap:10px;margin-bottom:12px}.tp-step-no[data-v-9602901d]{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:14px;font-weight:700;flex-shrink:0}.tp-required[data-v-9602901d]{color:var(--tg-danger);font-size:20px;font-weight:700;line-height:1}.tp-title[data-v-9602901d]{font-size:16px;font-weight:700;color:var(--tg-text-1)}.tp-of[data-v-9602901d]{font-size:13px;color:var(--tg-text-3);margin-left:auto;font-variant-numeric:tabular-nums}.tp-content[data-v-9602901d]{margin:0 0 14px;font-size:14px;line-height:1.8;color:var(--tg-text-2);white-space:pre-line}.tp-tip[data-v-9602901d]{font-size:13px;color:#529b2e;background:#f0f9eb;padding:8px 12px;border-radius:6px;margin-bottom:10px;border-left:3px solid #67c23a}.tp-warn[data-v-9602901d]{font-size:13px;color:#b88230;background:#fdf6ec;padding:8px 12px;border-radius:6px;margin-bottom:10px;border-left:3px solid #e6a23c}.tp-foot[data-v-9602901d]{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--tg-border)}.tp-btns[data-v-9602901d]{display:flex;gap:10px}.tp-gate[data-v-9602901d]{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--tg-warning);font-weight:500}.tp-gate-icon[data-v-9602901d]{flex-shrink:0}.tp-click-hint[data-v-9602901d]{font-size:14px;color:var(--tg-primary);font-weight:500;animation:pulse-hint-9602901d 1.5s ease-in-out infinite}@keyframes pulse-hint-9602901d{0%,to{opacity:1}50%{opacity:.5}}.tour-waiting[data-v-9602901d]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100002;background:#fff;padding:32px 40px;border-radius:12px;box-shadow:0 8px 32px #00000026;text-align:center;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:8px}.tour-waiting p[data-v-9602901d]{margin:4px 0 8px;font-size:14px;color:var(--tg-text-2)}.tg-spin[data-v-9602901d]{animation:tg-rotate-9602901d 1s linear infinite}@keyframes tg-rotate-9602901d{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "tour-guide-coach",
+  "version": "1.0.0",
+  "description": "轻量级交互式漫游引导引擎（Vue 3，零外部依赖，Element Plus 风格）",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./configs/*": "./src/configs/*.ts"
+  },
+  "files": ["dist", "src"],
+  "peerDependencies": {
+    "vue": "^3.4"
+  },
+  "devDependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.0",
+    "element-plus": "^2.7.5",
+    "typescript": "^5.4",
+    "vite": "^5.2",
+    "vite-plugin-dts": "^5.1.1",
+    "vue": "^3.4.27",
+    "vue-tsc": "^2.0"
+  },
+  "scripts": {
+    "dev": "cd demo && vite",
+    "build": "vite build --config vite.lib.config.ts",
+    "build:demo": "cd demo && vite build",
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "tour",
+    "guide",
+    "onboarding",
+    "interactive-tutorial",
+    "driver",
+    "spotlight"
+  ],
+  "license": "MIT"
+}