2 lines
9.5 KiB
JavaScript
2 lines
9.5 KiB
JavaScript
import{d as At,w as Bt,N as O,o as Et,a as Ht,u as Y,b as d,c as f,g as y,A as T,y as M,f as x,t as N,n as Wt,k as _,l as u}from"./runtime-dom.esm-bundler.js";import{d as Lt,s as Rt}from"./main.js";import"./_plugin-vue_export-helper.js";import"./useMarkdownRenderer.js";import"./FancyCheck.js";const Dt={class:"tutorial-popover__header"},Yt={class:"tutorial-popover__step"},Nt={class:"tutorial-popover__title"},Pt={class:"tutorial-popover__desc"},It={key:0,class:"tutorial-popover__warn"},zt={key:1,class:"tutorial-popover__hint"},qt={key:2,class:"tutorial-popover__hint"},Vt={class:"tutorial-popover__actions"},Gt=["disabled"],X=14,U=2,Kt=At({name:"TutorialOverlay",__name:"TutorialOverlay",setup(Ot){const b=Lt(),{running:E,activeStep:i,visibleStepIndex:it,totalVisibleSteps:rt}=Rt(b),K=_(null),c=_(null),S=_(120),C=_(120),$=_("center"),H=_(null);let P=null,m=null,I=null;const p=_(!0),W=u(()=>{var t;return((t=i.value)==null?void 0:t.mode)==="must_click"}),st=u(()=>{var t;return((t=i.value)==null?void 0:t.id)==="done"}),ut=u(()=>{var t;return!!((t=i.value)!=null&&t.target)&&!c.value}),L=u(()=>!!c.value),Q=u(()=>W.value&&!!c.value),j=u(()=>{var e;const t=((e=i.value)==null?void 0:e.id)||"";return t==="personal-overview"||t==="open-personal-space"||t==="close-personal-space"||t.startsWith("tab-")||t.startsWith("page-")}),ct=u(()=>j.value),vt=u(()=>st.value?"完成":W.value?c.value?"请先点击高亮目标":"下一步（跳过）":"下一步"),z=u(()=>({pointerEvents:"auto"})),R=u(()=>{if(!c.value)return null;const t=Math.max(0,c.value.top-U),e=Math.max(0,c.value.left-U),o=Math.max(12,c.value.width+U*2),l=Math.max(12,c.value.height+U*2);return{top:t,left:e,width:o,height:l,right:e+o,bottom:t+l}}),pt=u(()=>{const t=R.value;return t?{top:"0px",left:"0px",width:"100vw",height:`${Math.max(0,t.top)}px`}:{}}),ht=u(()=>{const t=R.value;return t?{top:`${t.top}px`,left:"0px",width:`${Math.max(0,t.left)}px`,height:`${t.height}px`}:{}}),dt=u(()=>{const t=R.value;return t?{top:`${t.top}px`,left:`${t.right}px`,width:`${Math.max(0,window.innerWidth-t.right)}px`,height:`${t.height}px`}:{}}),ft=u(()=>{const t=R.value;return t?{top:`${t.bottom}px`,left:"0px",width:"100vw",height:`${Math.max(0,window.innerHeight-t.bottom)}px`}:{}}),mt=u(()=>{const t=R.value;return t?{top:`${t.top}px`,left:`${t.left}px`,width:`${t.width}px`,height:`${t.height}px`}:{}}),wt=u(()=>({top:`${S.value}px`,left:`${C.value}px`})),Z=()=>{var s,a;if(!((s=i.value)!=null&&s.target))return b.setActiveSelector(null),null;const t=Array.from(document.querySelectorAll(i.value.target)),e=window.innerWidth,o=window.innerHeight,n=((a=t.map(r=>{const v=r.getBoundingClientRect(),D=window.getComputedStyle(r),w=Math.max(0,v.width)*Math.max(0,v.height),V=Math.max(0,Math.min(v.right,e)-Math.max(v.left,0)),G=Math.max(0,Math.min(v.bottom,o)-Math.max(v.top,0)),g=V*G;return{node:r,rect:v,area:w,visibleArea:g,display:D.display,visibility:D.visibility,opacity:Number(D.opacity||"1")}}).filter(r=>r.area<=0||r.visibleArea<=0||r.display==="none"||r.visibility==="hidden"?!1:r.opacity>.01).sort((r,v)=>v.visibleArea!==r.visibleArea?v.visibleArea-r.visibleArea:r.area-v.area)[0])==null?void 0:a.node)||null;return b.setActiveSelector(i.value.target),n},A=(t,e,o)=>Math.min(Math.max(t,e),o),tt=t=>{var V,G;const e=K.value;if(!e)return;const o=Math.max(280,e.offsetWidth||320),l=Math.max(170,e.offsetHeight||200),n=window.innerWidth,s=window.innerHeight,a=16;if(!t||((V=i.value)==null?void 0:V.placement)==="center"){$.value="center",C.value=A((n-o)/2,a,Math.max(a,n-o-a)),S.value=A((s-l)/2,a,Math.max(a,s-l-a));return}const r=((G=i.value)==null?void 0:G.placement)||"auto",v={top:t.top,right:n-t.right,bottom:s-t.bottom,left:t.left},D=r==="auto"?["right","bottom","left","top"].sort((g,h)=>v[h]-v[g]):[r,"right","bottom","left","top"];let w=null;for(const g of Array.from(new Set(D))){let h=0,k=0;g==="right"?(k=t.right+X,h=t.top+t.height/2-l/2):g==="left"?(k=t.left-o-X,h=t.top+t.height/2-l/2):g==="top"?(k=t.left+t.width/2-o/2,h=t.top-l-X):(k=t.left+t.width/2-o/2,h=t.bottom+X);const F=A(k,a,Math.max(a,n-o-a)),J=A(h,a,Math.max(a,s-l-a)),St=k>=a&&h>=a&&k+o<=n-a&&h+l<=s-a,Ct=Math.max(0,Math.min(F+o,t.right)-Math.max(F,t.left)),$t=Math.max(0,Math.min(J+l,t.bottom)-Math.max(J,t.top)),nt=Ct*$t;if(St){$.value=g,C.value=k,S.value=h;return}(!w||nt<w.overlap)&&(w={p:g,left:F,top:J,overlap:nt})}if(w){$.value=w.p,C.value=w.left,S.value=w.top;return}$.value="center",C.value=A((n-o)/2,a,Math.max(a,n-o-a)),S.value=A((s-l)/2,a,Math.max(a,s-l-a))},B=()=>{var o;if(!E.value){c.value=null;return}const t=Z();if(!t){c.value=null,$.value=((o=i.value)==null?void 0:o.placement)||"center",tt(null);return}const e=t.getBoundingClientRect();c.value=e.width>0&&e.height>0?{top:e.top,left:e.left,width:e.width,height:e.height,right:e.right,bottom:e.bottom}:null,tt(c.value)},q=()=>{window.setTimeout(B,30)},gt=()=>{p.value=!1,c.value=null,C.value=-9999,S.value=-9999,m&&(window.clearTimeout(m),m=null)},et=t=>{var o;if(!E.value||!W.value||!((o=i.value)!=null&&o.target))return;const e=t.target;e&&e.closest(i.value.target)&&window.setTimeout(()=>b.goNext(),280)},ot=()=>{const e=Array.from(document.querySelectorAll(".personalization-content .personal-page")).find(l=>l.scrollHeight-l.clientHeight>2);if(e)return e;const o=document.querySelector(".personalization-content");return o&&o.scrollHeight-o.clientHeight>2?o:document.querySelector('[data-tutorial="personal-content-shell"]')||o},yt=t=>{if(!j.value){t.preventDefault();return}const e=ot();if(!e){t.preventDefault();return}e.scrollBy({top:t.deltaY,left:0,behavior:"auto"}),t.preventDefault()},xt=t=>{t.touches.length&&(I=t.touches[0].clientY)},bt=t=>{if(!t.touches.length)return;const e=t.touches[0].clientY,l=(I??e)-e;if(I=e,!j.value){t.preventDefault();return}const n=ot();if(!n){t.preventDefault();return}n.scrollBy({top:l,left:0,behavior:"auto"}),t.preventDefault()},lt=()=>{I=null},at=t=>{if(!t)return;const e=t.getBoundingClientRect(),o=e.left+e.width/2,l=e.top+e.height/2;H.value={x:o,y:l},window.setTimeout(()=>{H.value=null},460)},kt=()=>i.value?i.value.id.startsWith("tab-")?!0:window.innerWidth<=768&&i.value.id==="mobile-menu-personal":!1,Tt=()=>{var o,l,n;if((o=i.value)!=null&&o.autoOutsideClick){const a=document.querySelector(".model-mode-dropdown")||document.body;return at(a),window.setTimeout(()=>{const r=new MouseEvent("click",{bubbles:!0,cancelable:!0,clientX:12,clientY:12});document.body.dispatchEvent(r)},420),!0}if(!((l=i.value)!=null&&l.autoClick)||!((n=i.value)!=null&&n.target))return!1;const t=Z();if(!t)return!1;const e=kt();if(e){const s=window.innerWidth<=768;t.scrollIntoView({behavior:"smooth",block:s?"nearest":"center",inline:s?"center":"nearest"})}return window.setTimeout(()=>{at(t)},e?220:0),window.setTimeout(()=>{t.click()},e?640:420),!0},Mt=()=>{var t;if(!Q.value){if(gt(),((t=i.value)==null?void 0:t.id)==="done"){b.finishTutorial();return}if(!W.value&&Tt()){window.setTimeout(()=>b.goNext(),700);return}b.goNext()}},_t=()=>b.exitTutorial();return Bt(()=>{var t;return[E.value,(t=i.value)==null?void 0:t.id]},async([,t],[e,o])=>{if(!E.value){c.value=null,p.value=!0;return}if(!!e&&!!o&&o!==t){p.value=!1,m&&window.clearTimeout(m);const n=i.value,s=(n==null?void 0:n.mode)==="must_click"||n!=null&&n.autoClick||n!=null&&n.autoOutsideClick?500:0;m=window.setTimeout(async()=>{await O(),B(),await O(),B(),p.value=!0},s);return}await O(),B(),await O(),B(),p.value=!0}),Et(()=>{window.addEventListener("click",et,!0),window.addEventListener("resize",q),window.addEventListener("scroll",q,!0),P=window.setInterval(B,260)}),Ht(()=>{window.removeEventListener("click",et,!0),window.removeEventListener("resize",q),window.removeEventListener("scroll",q,!0),P&&(window.clearInterval(P),P=null),m&&(window.clearTimeout(m),m=null)}),(t,e)=>{var o,l;return Y(E)?(d(),f("div",{key:0,class:"tutorial-overlay","aria-live":"polite",onWheel:yt,onTouchstart:xt,onTouchmove:T(bt,["prevent"]),onTouchend:lt,onTouchcancel:lt},[y("div",{class:"tutorial-click-blocker",onClick:e[0]||(e[0]=T(()=>{},["stop"]))}),p.value&&L.value?(d(),f("div",{key:0,class:"tutorial-mask",style:M([pt.value,z.value]),onClick:e[1]||(e[1]=T(()=>{},["stop"]))},null,4)):x("",!0),p.value&&L.value?(d(),f("div",{key:1,class:"tutorial-mask",style:M([ht.value,z.value]),onClick:e[2]||(e[2]=T(()=>{},["stop"]))},null,4)):x("",!0),p.value&&L.value?(d(),f("div",{key:2,class:"tutorial-mask",style:M([dt.value,z.value]),onClick:e[3]||(e[3]=T(()=>{},["stop"]))},null,4)):x("",!0),p.value&&L.value?(d(),f("div",{key:3,class:"tutorial-mask",style:M([ft.value,z.value]),onClick:e[4]||(e[4]=T(()=>{},["stop"]))},null,4)):x("",!0),p.value&&L.value?(d(),f("div",{key:4,class:"tutorial-highlight",style:M(mt.value),"aria-hidden":"true"},null,4)):x("",!0),H.value?(d(),f("span",{key:5,class:"tutorial-click-effect",style:M({left:`${H.value.x-9}px`,top:`${H.value.y-9}px`}),"aria-hidden":"true"},null,4)):x("",!0),y("section",{ref_key:"panelRef",ref:K,class:Wt(["tutorial-popover",[`placement-${$.value}`,{"is-hidden":!p.value}]]),style:M(wt.value),onClick:e[5]||(e[5]=T(()=>{},["stop"]))},[y("header",Dt,[y("span",Yt,N(Y(it))+" / "+N(Y(rt)),1),y("button",{type:"button",class:"tutorial-popover__close",onClick:_t},"退出")]),y("h3",Nt,N(((o=Y(i))==null?void 0:o.title)||"新手教程"),1),y("p",Pt,N(((l=Y(i))==null?void 0:l.description)||""),1),ut.value?(d(),f("p",It," 未找到目标元素，可稍后重试或跳过当前步骤。 ")):W.value?(d(),f("p",zt,"请点击高亮目标继续。")):x("",!0),ct.value?(d(),f("p",qt," 提示：个人空间内容可上下滚动查看。 ")):x("",!0),y("footer",Vt,[y("button",{type:"button",class:"tutorial-btn",disabled:Q.value,onClick:Mt},N(vt.value),9,Gt)])],6)],32)):x("",!0)}}});export{Kt as default};
|