码桶

发现社区成员的开源项目

geekssl /

wstats

公开
main
wstats/public/assets/Funnels-DdgWJfLo.js
Funnels-DdgWJfLo.js8.6 KB
import{u as re,a as oe,c as ce,r as i,b as x,q as de,j as e,B as m,f as I,o as b,S as me,T as K,h as pe,C as ue,F as U}from"./index-GWuvg2UH.js";import{B as N}from"./index-DihvOmSo.js";import{E as k}from"./index-VbOLTMR0.js";import{M as V}from"./Modal-08QhW3n9.js";import{R as J,a as Q}from"./index-DIHsQVbu.js";import{S as w}from"./index-BZDftoba.js";import{S as he}from"./index-CfWZ9ycl.js";import{T as fe}from"./index-mZVFvfKe.js";import{T as E}from"./index-BW_2QB9V.js";import{E as xe}from"./EChart-Bps-t-O3.js";import{I as T}from"./IconPlus-Dkwh5Gs5.js";import{I as ge}from"./IconEdit-CHNNVEq9.js";import{I as X}from"./IconDelete-CdbtfS3z.js";import"./IconTickCircle-BYgwCdAe.js";import"./_baseDifference-DopHgqVv.js";import"./slice-B6jKCnyX.js";import"./object-DkPZvw8u.js";import"./index-BMbdBPA2.js";import"./echarts-CEICS1Jr.js";const ye=[1,7,30],je=["prefix","contains","exact"],Se={name:"",match_type:"prefix",steps:["",""]};function Me(){var W,A,G,H,q;const{t:s}=re(),Y=oe(),{site:o}=ce();o==null||o.role;const[C,Z]=i.useState(7),[g,ee]=i.useState(!0),[y,F]=i.useState(null),[p,j]=i.useState(""),[a,$]=i.useState(null),[te,B]=i.useState(!1),[D,z]=i.useState(""),[r,d]=i.useState(null),[se,_]=i.useState(!1),[O,u]=i.useState(""),S=i.useCallback(async()=>{if(o)try{const t=await x.funnels(o.id);F(t.items||[]),j(n=>{const l=(t.items||[]).map(f=>String(f.id));return n&&l.includes(String(n))?n:l[0]||""})}catch(t){z(t.message)}},[o]);i.useEffect(()=>{F(null),$(null),j(""),S()},[S]);const P=i.useCallback(async()=>{if(!(!o||!p)){B(!0);try{const{start:t,end:n}=de(C);$(await x.funnelData(p,o.id,t,n,g)),z("")}catch(t){z(t.message)}finally{B(!1)}}},[o,p,C,g]);if(i.useEffect(()=>{P()},[P]),!o)return e.jsx("div",{className:"page",children:e.jsx(k,{style:{marginTop:60},title:s("noSiteHint"),children:e.jsx(m,{theme:"solid",onClick:()=>Y("/sites"),children:s("goSites")})})});const c=(y||[]).find(t=>String(t.id)===String(p))||null,R=()=>{u(""),d({id:0,...Se,steps:["",""]})},ne=()=>{c&&(u(""),d({id:c.id,name:c.name,match_type:c.match_type,steps:[...c.steps]}))},ae=async()=>{const t=r,n=t.steps.map(l=>l.trim()).filter(Boolean);if(!t.name.trim()){u(s("funnelName"));return}if(n.length<2){u(s("funnelStepMin"));return}_(!0);try{const l={site_id:o.id,name:t.name.trim(),steps:n,match_type:t.match_type};t.id?await x.updateFunnel(t.id,l):await x.createFunnel(l),d(null),await S(),E.success(s("funnelSaved"))}catch(l){u(l.message)}finally{_(!1)}},le=()=>{c&&V.confirm({title:s("funnelDel"),content:s("funnelDelConfirm"),onOk:async()=>{try{await x.deleteFunnel(c.id),E.success(s("funnelDelOk")),j(""),await S()}catch(t){E.error(t.message)}}})},h=(a==null?void 0:a.steps)||[],L=h.length?{tooltip:{trigger:"item",formatter:t=>{var n;return`${t.name}<br/>${I(t.value)}(${((n=h[t.dataIndex])==null?void 0:n.rate)??0}%)`}},series:[{type:"funnel",left:"12%",width:"76%",top:12,bottom:12,sort:"none",minSize:"8%",gap:2,label:{show:!0,position:"inside",formatter:t=>{var n;return`${t.name}
${I(t.value)} · ${((n=h[t.dataIndex])==null?void 0:n.rate)??0}%`},fontSize:12},data:h.map((t,n)=>({name:`${n+1}. ${t.url}`,value:t.visitors,dataIndex:n,itemStyle:{color:`rgba(42, 92, 255, ${Math.max(.35,1-n*.14)})`,borderRadius:4}}))}]}:null,ie=[{title:s("colStep"),dataIndex:"step",width:70,render:t=>e.jsx(b,{size:"small",color:"blue",children:t})},{title:s("colPath"),dataIndex:"url",ellipsis:{showTitle:!0},render:t=>e.jsx("span",{style:{fontFamily:"monospace",fontSize:12},children:t})},{title:s("funnelVisitors"),dataIndex:"visitors",width:110,render:t=>I(t)},{title:s("funnelRate"),dataIndex:"rate",width:90,render:t=>`${t}%`},{title:s("funnelDrop"),dataIndex:"dropRate",width:180,render:t=>e.jsxs(me,{children:[e.jsxs("span",{style:{width:40,fontSize:12,color:t>0?"#d4380d":"#86909c"},children:[t,"%"]}),e.jsx("span",{style:{width:90,height:6,background:"#f0f1f3",borderRadius:3,overflow:"hidden",display:"inline-block"},children:e.jsx("span",{style:{display:"block",height:"100%",width:`${Math.min(100,Number(t)||0)}%`,background:"#ff7d4d"}})})]})}],M={prefix:s("matchPrefix"),contains:s("matchContains"),exact:s("matchExact")};return e.jsxs("div",{className:"page",children:[e.jsxs("div",{className:"toolbar",children:[e.jsx(K.Title,{heading:5,style:{margin:0},children:s("funnel")}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(pe,{content:s("funnelOrderedTip"),children:e.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:6,fontSize:13,color:"#4e5969"},children:[e.jsx(he,{size:"small",checked:g,onChange:ee}),s("funnelOrdered")]})}),e.jsx(J,{type:"button",buttonSize:"small",value:C,onChange:t=>Z(Number(t.target.value)),children:ye.map(t=>e.jsxs(Q,{value:t,children:[t,"D"]},t))}),e.jsx(m,{size:"small",icon:e.jsx(T,{}),theme:"solid",onClick:R,children:s("funnelNew")})]})]}),D&&e.jsx(N,{type:"danger",description:D,style:{marginBottom:12}}),y===null?e.jsx("div",{className:"card",children:e.jsx(w,{active:!0,placeholder:e.jsx(w.Paragraph,{rows:6}),loading:!0})}):y.length===0?e.jsx("div",{className:"card",children:e.jsx(k,{style:{margin:"40px 0"},description:s("funnelEmpty"),children:e.jsx(m,{theme:"solid",icon:e.jsx(T,{}),onClick:R,children:s("funnelNew")})})}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"card",style:{padding:"10px 16px",marginBottom:14,display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"},children:[e.jsx("span",{style:{fontSize:13,color:"#86909c"},children:s("funnelPick")}),e.jsx(ue,{size:"small",style:{minWidth:220},value:p?String(p):void 0,onChange:t=>j(t),optionList:y.map(t=>({value:String(t.id),label:t.name}))}),c&&e.jsxs(e.Fragment,{children:[e.jsx(b,{size:"small",style:{marginLeft:4},children:M[c.match_type]||c.match_type}),c.steps.map((t,n)=>e.jsxs(b,{size:"small",color:"blue",style:{fontFamily:"monospace"},children:[n>0?"→ ":"",t]},n)),e.jsx("span",{style:{flex:1}}),e.jsx(m,{size:"small",icon:e.jsx(ge,{}),onClick:ne,children:s("funnelEdit")}),e.jsx(m,{size:"small",type:"danger",icon:e.jsx(X,{}),onClick:le,children:s("funnelDel")})]})]}),te&&!a?e.jsx("div",{className:"card",children:e.jsx(w,{active:!0,placeholder:e.jsx(w.Paragraph,{rows:6}),loading:!0})}):e.jsxs(e.Fragment,{children:[!g&&e.jsx(N,{type:"warning",description:s("funnelUnorderedWarn"),style:{marginBottom:12}}),L&&e.jsxs("div",{className:"chart-box",children:[e.jsxs("div",{className:"card-title",children:[s("funnelChart")," · ",(W=a==null?void 0:a.funnel)==null?void 0:W.name,e.jsxs(K.Text,{type:"tertiary",size:"small",style:{marginLeft:10},children:[(A=a==null?void 0:a.range)==null?void 0:A.start," ~ ",(G=a==null?void 0:a.range)==null?void 0:G.end," · ",s("funnelOverall")," ",(H=a==null?void 0:a.overall)==null?void 0:H.rate,"%"]})]}),e.jsx(xe,{option:L,height:300})]}),e.jsxs("div",{className:"card",style:{padding:0,overflow:"hidden",marginTop:14},children:[e.jsx("div",{className:"card-title",style:{padding:"14px 16px 6px"},children:(q=a==null?void 0:a.funnel)==null?void 0:q.name}),e.jsx(fe,{columns:ie,dataSource:h,rowKey:"step",pagination:!1,size:"small",empty:e.jsx(k,{description:"-"})})]})]})]}),e.jsx(V,{title:r!=null&&r.id?s("funnelEdit"):s("funnelNew"),visible:r!==null,onCancel:()=>d(null),onOk:ae,okButtonProps:{loading:se},width:520,children:r&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:14,paddingTop:6},children:[O&&e.jsx(N,{type:"danger",description:O}),e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:13,marginBottom:6},children:s("funnelName")}),e.jsx(U,{placeholder:s("funnelNamePh"),value:r.name,onChange:t=>d(n=>({...n,name:t}))})]}),e.jsxs("div",{children:[e.jsx("div",{style:{fontSize:13,marginBottom:6},children:s("funnelMatch")}),e.jsx(J,{type:"button",buttonSize:"small",value:r.match_type,onChange:t=>d(n=>({...n,match_type:t.target.value})),children:je.map(t=>e.jsx(Q,{value:t,children:M[t]},t))})]}),e.jsxs("div",{children:[e.jsxs("div",{style:{fontSize:13,marginBottom:6},children:[s("funnelSteps"),"(",r.steps.filter(t=>t.trim()).length,")"]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:r.steps.map((t,n)=>e.jsxs("div",{style:{display:"flex",gap:8,alignItems:"center"},children:[e.jsx(b,{size:"small",color:"blue",style:{minWidth:20,justifyContent:"center"},children:n+1}),e.jsx(U,{placeholder:s("funnelStepPh"),value:t,style:{fontFamily:"monospace"},onChange:l=>d(f=>{const v=[...f.steps];return v[n]=l,{...f,steps:v}})}),e.jsx(m,{size:"small",type:"danger",theme:"borderless",icon:e.jsx(X,{}),disabled:r.steps.length<=2,onClick:()=>d(l=>({...l,steps:l.steps.filter((f,v)=>v!==n)}))})]},n))}),e.jsx(m,{size:"small",icon:e.jsx(T,{}),style:{marginTop:10},disabled:r.steps.length>=8,onClick:()=>d(t=>({...t,steps:[...t.steps,""]})),children:s("funnelAddStep")})]})]})})]})}export{Me as default};