tour-guide-coach 1.0.0 → 1.0.1

package/README.md

@@ -20,7 +20,7 @@
 ```bash
 npm install tour-guide-coach
 # 或从 GitHub
-npm install github:2729305948/vue-tour-guide
+npm install github:2729305948/tour-guide-coach
 ```
 
 Peer dependencies：`vue@^3.4`。**零外部依赖，不需要 UI 组件库，不需要 Pinia。**

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -4,11 +4,12 @@
  * 零外部依赖（仅需 Vue 3），全局单例模式。
  *
  * 使用方式：
- *   import { tourState, startTour, abort, TourOverlay } from 'vue-tour-guide'
+ *   import { startTour, TourOverlay } from 'tour-guide-coach'
+ *   import 'tour-guide-coach/dist/style.css'
  *   // 在 layout 中挂 <TourOverlay />
  *   // 业务页调用 startTour(config)
  */
-export { tourState, startTour, abort, next, skip, complete } from './store';
+export { tourState, startTour, abort, next, skip, complete, currentStep } from './store';
 export type { TargetResolver } from './store';
 export { default as TourOverlay } from './TourOverlay.vue';
 export type { TourConfig, TourStep, StepTrigger, PopPlacement, HighlightRect } from './types';

package/dist/index.js

@@ -1,3 +1,4 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".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)}}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 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,
@@ -390,6 +391,7 @@ export {
   Ot as TourOverlay,
   B as abort,
   G as complete,
+  ct as currentStep,
   k as next,
   ut as skip,
   zt as startTour,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tour-guide-coach",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "轻量级交互式漫游引导引擎（Vue 3，零外部依赖，Element Plus 风格）",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -14,7 +14,10 @@
     },
     "./configs/*": "./src/configs/*.ts"
   },
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "peerDependencies": {
     "vue": "^3.4"
   },
@@ -24,6 +27,7 @@
     "element-plus": "^2.7.5",
     "typescript": "^5.4",
     "vite": "^5.2",
+    "vite-plugin-css-injected-by-js": "^5.0.2",
     "vite-plugin-dts": "^5.1.1",
     "vue": "^3.4.27",
     "vue-tsc": "^2.0"

package/src/index.ts

@@ -4,11 +4,12 @@
  * 零外部依赖（仅需 Vue 3），全局单例模式。
  *
  * 使用方式：
- *   import { tourState, startTour, abort, TourOverlay } from 'vue-tour-guide'
+ *   import { startTour, TourOverlay } from 'tour-guide-coach'
+ *   import 'tour-guide-coach/dist/style.css'
  *   // 在 layout 中挂 <TourOverlay />
  *   // 业务页调用 startTour(config)
  */
-export { tourState, startTour, abort, next, skip, complete } from './store'
+export { tourState, startTour, abort, next, skip, complete, currentStep } from './store'
 export type { TargetResolver } from './store'
 export { default as TourOverlay } from './TourOverlay.vue'
 export type { TourConfig, TourStep, StepTrigger, PopPlacement, HighlightRect } from './types'

package/dist/style.css

@@ -1 +0,0 @@
-.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)}}