码桶
发现社区成员的开源项目
Overview-DzY3Eu7d.js9.4 KB
import{u as Z,a as ee,c as de,d as me,r as d,t as T,e as _,b as E,j as e,B as P,T as C,f as h,g as ue,n as te,h as J,k as ve,l as pe,y as Q}from"./index-GWuvg2UH.js";import{B as he}from"./index-DihvOmSo.js";import{D as ye}from"./index-DWKYNnDc.js";import{E as xe}from"./index-VbOLTMR0.js";import{R as z,a as p}from"./index-DIHsQVbu.js";import{S as X}from"./index-BZDftoba.js";import{m as ge}from"./metrics-NUijxW6Y.js";import{E as fe,b as je}from"./EChart-Bps-t-O3.js";import{E as be}from"./ExportButton-ChE0FTgH.js";import{u as we}from"./useVisibilityRefresh-DRH6QDT3.js";import"./IconTickCircle-BYgwCdAe.js";import"./object-DkPZvw8u.js";import"./slice-B6jKCnyX.js";import"./Animation-CU6YFe7Y.js";import"./echarts-CEICS1Jr.js";import"./index-BW_2QB9V.js";function b(s,a){const o=T();return s==="today"?{start:o,end:o}:s==="yesterday"?{start:Q(),end:Q()}:s==="7d"?{start:_(7),end:o}:s==="30d"?{start:_(30),end:o}:te(a==null?void 0:a.start,a==null?void 0:a.end)}function Ne({v:s}){if(s==null)return null;const a=s>=0;return e.jsxs("span",{className:a?"delta-pill delta-up":"delta-pill delta-down",children:[a?"▲":"▼"," ",Math.abs(s),"%"]})}function Se({name:s,pv:a,pctv:o,max:i,nameFmt:u}){const f=i>0?Math.max(4,a/i*100):0;return e.jsxs("div",{className:"dim-row",children:[e.jsx("div",{className:"dim-name",title:s,children:u?u(s):s}),e.jsx("div",{className:"dim-pv",children:h(a)}),e.jsx("div",{className:"dim-bar",children:e.jsx("div",{className:"dim-bar-fill",style:{width:`${f}%`}})}),e.jsxs("div",{className:"dim-pct",children:[Number(o||0).toFixed(0),"%"]})]})}function ke({title:s,tabs:a,sources:o,moreTo:i}){const{t:u}=Z(),f=ee(),[v,w]=d.useState(0),c=o&&o[v]&&o[v].rows||[],N=o&&o[v]&&o[v].fmt||null,n=c.slice(0,5),D=n.length?n[0].pv:0;return e.jsxs("div",{className:"card dim-card",children:[e.jsxs("div",{className:"dim-head",children:[e.jsx("span",{className:"dim-title",children:s}),e.jsx(z,{type:"button",buttonSize:"small",value:v,onChange:r=>w(Number(r.target.value)),children:a.map((r,y)=>e.jsx(p,{value:y,children:r},r))})]}),e.jsxs("div",{className:"dim-cols",children:[e.jsx("span",{children:u("colName")}),e.jsx("span",{style:{textAlign:"right"},children:u("colPv")}),e.jsx("span",{}),e.jsx("span",{style:{textAlign:"right"},children:u("colPct")})]}),n.length===0?e.jsx("div",{className:"dim-empty",children:u("noData")}):n.map((r,y)=>e.jsx(Se,{name:r.name,pv:r.pv,pctv:r.pct,max:D,nameFmt:N},y)),i&&e.jsx("div",{className:"dim-foot",children:e.jsxs(P,{theme:"borderless",size:"small",onClick:()=>f(i),children:[u("viewAll")," →"]})})]})}function Ue(){var F,K,V,Y,q;const{t:s,lang:a}=Z(),o=ee(),{site:i}=de(),[u,f]=me(),v=u.get("range")||"",w=["today","yesterday","7d","30d","custom"],[c,N]=d.useState(w.includes(v)?v:"today"),[n,D]=d.useState(()=>{const t=u.get("start")||"",m=u.get("end")||"",k=/^\d{4}-\d{2}-\d{2}$/;return k.test(t)&&k.test(m)&&t<=m?{start:t,end:m}:{start:_(7),end:T()}}),[r,y]=d.useState(null),[l,se]=d.useState(null),[re,A]=d.useState(!1),[I,L]=d.useState(""),[B,le]=d.useState("all"),S=d.useRef(null),G=b(c,n);d.useEffect(()=>{f(c==="custom"?{range:"custom",start:n.start,end:n.end}:{range:c},{replace:!0})},[c,n,f]),d.useEffect(()=>{w.includes(v)&&v!==c&&N(v)},[v]);const O=d.useCallback(async()=>{if(i){A(!0);try{const t=b(c,n),[m,k]=await Promise.all([E.overview(i.id,t.start,t.end),E.analysis(i.id,t.start,t.end).catch(()=>null)]);y(m),se(k),L("")}catch(t){L(t.message)}finally{A(!1)}}},[i,c,n]);if(d.useEffect(()=>(O(),()=>clearInterval(S.current)),[O]),d.useEffect(()=>{if(clearInterval(S.current),!!i)return S.current=setInterval(()=>{if(document.visibilityState!=="hidden"){const t=b(c,n);E.overview(i.id,t.start,t.end).then(y).catch(()=>{})}},15e3),()=>clearInterval(S.current)},[i,c,n]),we(()=>{if(!i)return;const t=b(c,n);E.overview(i.id,t.start,t.end).then(y).catch(()=>{})}),!i)return e.jsx("div",{className:"page",children:e.jsx(xe,{style:{marginTop:60},title:e.jsx(C.Title,{heading:5,children:s("noSiteHint")}),description:s("createHint"),children:e.jsx(P,{theme:"solid",onClick:()=>o("/sites"),children:s("goSites")})})});const x=(r==null?void 0:r.totals)||{},g=(r==null?void 0:r.deltas)||{},j=(r==null?void 0:r.live)||{},H=G.start===G.end,R=H&&((F=r==null?void 0:r.hourly)!=null&&F.length)?r.hourly.map(t=>({day:t.hour,pv:t.pv,uv:t.uv})):(r==null?void 0:r.trend)||[],M={all:["pv","uv"],pv:["pv"],uv:["uv"]}[B]||["pv","uv"],U={pv:{name:s("mPv"),color:"#00b42a"},uv:{name:s("mUv"),color:"#2a5cff"}},ie={color:M.map(t=>U[t].color),tooltip:{trigger:"axis"},legend:{show:!1},grid:{...je(),top:20},xAxis:{type:"category",boundaryGap:!1,data:R.map(t=>H?t.day:t.day.slice(5)),axisLabel:{color:"#86909c"},axisTick:{show:!1},axisLine:{lineStyle:{color:"#e5e6eb"}}},yAxis:{type:"value",splitLine:{lineStyle:{color:"#f0f1f3"}},axisLabel:{color:"#86909c"}},series:M.map(t=>({name:U[t].name,type:"line",smooth:!0,symbol:"circle",symbolSize:5,showSymbol:R.length<=25,data:R.map(m=>m[t]),areaStyle:{opacity:.15},lineStyle:{width:2}}))},ae=[{key:"pv",label:s("mPv"),value:h(x.pv),delta:g.pv},{key:"uv",label:s("mUv"),value:h(x.uv),delta:g.uv},{key:"ipc",label:s("mIp"),value:h(x.ipc),delta:g.ipc},{key:"bounce_rate",label:s("mBounce"),value:Number(x.bounce_rate||0).toFixed(1)+"%",delta:g.bounce_rate},{key:"avg_duration",label:s("mDur"),value:ue(x.avg_duration),delta:g.avg_duration},{key:"new_users",label:s("mNew"),value:h(x.new_users),delta:g.new_users},{key:"old_users",label:s("mOld"),value:h(x.old_users),delta:g.old_users}],W=t=>{const m=ge(t,a);return m?e.jsxs("div",{style:{maxWidth:280,lineHeight:1.7,whiteSpace:"normal"},children:[e.jsx("div",{style:{fontWeight:600,marginBottom:4},children:m.name}),e.jsx("div",{children:m.def}),m.note&&e.jsx("div",{style:{opacity:.8,marginTop:4},children:m.note})]}):""},ne=t=>ve(t),oe=t=>pe(t,a),$={web:[{key:"path",rows:l==null?void 0:l.pages},{key:"entry",rows:l==null?void 0:l.entries},{key:"exit",rows:l==null?void 0:l.exits}],src:[{key:"host",rows:l==null?void 0:l.referrers},{key:"channel",rows:l==null?void 0:l.channels,fmt:ne}],env:[{key:"browser",rows:l==null?void 0:l.browsers},{key:"os",rows:l==null?void 0:l.oses},{key:"device",rows:l==null?void 0:l.devices}],geo:[{key:"country",rows:l==null?void 0:l.countries,fmt:oe},{key:"province",rows:l==null?void 0:l.provinces},{key:"city",rows:l==null?void 0:l.cities}]},ce=t=>t==="web"?[s("colPath"),s("colEntryUrl"),s("colExitUrl")]:t==="src"?[s("colRefHost"),s("colChannel")]:t==="env"?[s("browser"),s("os"),s("device")]:[s("colCountry"),s("colRegion"),s("colCity")];return e.jsxs("div",{className:"page",children:[e.jsxs("div",{className:"toolbar",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"},children:[e.jsx(C.Text,{type:"tertiary",size:"small",children:s("rangeLabel")}),e.jsxs(z,{type:"button",buttonSize:"small",value:c,onChange:t=>N(t.target.value),children:[e.jsx(p,{value:"today",children:s("today")}),e.jsx(p,{value:"yesterday",children:s("yesterday")}),e.jsx(p,{value:"7d",children:s("last7")}),e.jsx(p,{value:"30d",children:s("last30")}),e.jsx(p,{value:"custom",children:s("customRange")})]}),c==="custom"&&e.jsx(ye,{type:"dateRange",size:"small",format:"yyyy-MM-dd",value:[n.start,n.end],onChange:t=>{t&&t[0]&&t[1]&&D(te(t[0],t[1]))},style:{width:240}})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsxs(C.Text,{type:"tertiary",size:"small",children:[(K=r==null?void 0:r.range)==null?void 0:K.start," ~ ",(V=r==null?void 0:r.range)==null?void 0:V.end]}),e.jsx(be,{siteId:i==null?void 0:i.id,items:[{kind:"daily",label:s("expDaily")},{kind:"channels",label:s("expChannels")},{kind:"pages",label:s("expPages")}],params:()=>b(c,n)}),e.jsx(P,{size:"small",theme:"borderless",onClick:()=>o("/metrics"),children:s("metricsTitle")})]})]}),I&&e.jsx(he,{type:"danger",description:I,style:{marginBottom:12}}),re&&!r?e.jsx(X,{active:!0,placeholder:e.jsx(X.Paragraph,{rows:8}),loading:!0}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"metric-strip",children:[e.jsxs("div",{className:"metric-item metric-live",children:[e.jsx(J,{content:W("online"),children:e.jsx("div",{className:"metric-label metric-label-tip",children:s("mLive10")})}),e.jsx("div",{className:"metric-value",children:h(j.online10??j.online??0)}),e.jsx("div",{className:"metric-sub",children:(j.online10??j.online??0)>0?`${s("online")} ${h(j.online??0)}`:s("noLiveHint")})]}),ae.map(t=>e.jsxs("div",{className:"metric-item",children:[e.jsx(J,{content:W(t.key),children:e.jsx("div",{className:"metric-label metric-label-tip",children:t.label})}),e.jsx("div",{className:"metric-value",children:t.value}),e.jsx("div",{className:"metric-sub",children:e.jsx(Ne,{v:t.delta})})]},t.key))]}),e.jsxs("div",{className:"chart-box",children:[e.jsxs("div",{className:"trend-head",children:[e.jsx("span",{className:"dim-title",children:s("trendTitle2")}),e.jsxs(z,{type:"button",buttonSize:"small",value:B,onChange:t=>le(t.target.value),children:[e.jsx(p,{value:"all",children:s("mAll")}),e.jsx(p,{value:"pv",children:s("mPv")}),e.jsx(p,{value:"uv",children:s("mUv")})]})]}),e.jsx(fe,{option:ie,height:300})]}),e.jsx("div",{className:"dim-grid",children:Object.keys($).map(t=>e.jsx(ke,{title:s(t==="web"?"dimWeb":t==="src"?"dimSource":t==="env"?"dimEnv":"dimGeo"),tabs:ce(t),sources:$[t],moreTo:t==="geo"?"/geo":`/analysis?tab=${t==="web"?"paths":t}`},t))}),e.jsxs(C.Text,{type:"tertiary",style:{fontSize:12},children:[i.name," · ",i.domain," · ",s("range"),": ",(Y=r==null?void 0:r.range)==null?void 0:Y.start," ~ ",(q=r==null?void 0:r.range)==null?void 0:q.end,"(",T(),")"]})]})]})}export{Ue as default};