码桶
发现社区成员的开源项目
Performance-C7M8U6cA.js5.1 KB
import{u as D,a as M,c as R,r as p,q as G,b as O,j as e,B as S,T as C,f as L,t as V,o as w}from"./index-GWuvg2UH.js";import{B as $}from"./index-DihvOmSo.js";import{E as u}from"./index-VbOLTMR0.js";import{S as T}from"./index-BZDftoba.js";import{T as F}from"./index-mZVFvfKe.js";import{E as U}from"./EChart-Bps-t-O3.js";import"./IconTickCircle-BYgwCdAe.js";import"./_baseDifference-DopHgqVv.js";import"./index-DIHsQVbu.js";import"./slice-B6jKCnyX.js";import"./object-DkPZvw8u.js";import"./index-BMbdBPA2.js";import"./echarts-CEICS1Jr.js";const W=[7,30,90],m=[{k:"ttfb",unit:"ms"},{k:"fcp",unit:"ms"},{k:"lcp",unit:"ms"},{k:"inp",unit:"ms"},{k:"cls",unit:""}],q={ttfb:[800,1800],fcp:[1800,3e3],lcp:[2500,4e3],inp:[200,500],cls:[.1,.25]};function x(t,r){return r==null?"—":t==="cls"?Number(r).toFixed(3).replace(/0$/,""):String(Math.round(r))}function E(t,r,i){if(r==null)return null;const[n,c]=q[t],a=r<=n?"good":r>=c?"poor":"needs";return{lvl:a,key:i(a==="good"?"perfGood":a==="needs"?"perfNeeds":"perfPoor")}}const P={good:"green",needs:"orange",poor:"red"};function H({k:t,v:r,t:i}){const n=E(t,r,i);return e.jsxs("span",{children:[x(t,r),m.find(c=>c.k===t).unit&&e.jsx("span",{style:{color:"#86909c",fontSize:11,marginLeft:2},children:m.find(c=>c.k===t).unit}),n&&e.jsx(w,{size:"small",color:P[n.lvl],style:{marginLeft:6},children:n.key})]})}function ne(){var v,N;const{t}=D(),r=M(),{site:i}=R(),[n,c]=p.useState(30),[a,k]=p.useState(null),[I,g]=p.useState(!1),[h,y]=p.useState(""),j=p.useCallback(async()=>{if(i){g(!0);try{const{start:s,end:l}=G(n);k(await O.performance(i.id,s,l)),y("")}catch(s){y(s.message)}finally{g(!1)}}},[i,n]);if(p.useEffect(()=>{j()},[j]),!i)return e.jsx("div",{className:"page",children:e.jsx(u,{style:{marginTop:60},title:t("noSiteHint"),children:e.jsx(S,{theme:"solid",onClick:()=>r("/sites"),children:t("goSites")})})});const o=(a==null?void 0:a.totals)||null,f=(a==null?void 0:a.pages)||[],z=(s,l)=>{const d=E(s,l,t),A=d?d.lvl==="good"?"#00b42a":d.lvl==="needs"?"#ff7d00":"#f53f3f":"#1f2329";return e.jsxs("div",{className:"stat-card",children:[e.jsx("div",{className:"stat-label",children:s.toUpperCase()}),e.jsx("div",{className:"stat-value",style:{fontSize:24,color:A},children:x(s,l)}),e.jsxs("div",{className:"stat-sub",children:[m.find(B=>B.k===s).unit||"ratio",d&&e.jsx(w,{size:"small",color:P[d.lvl],style:{marginLeft:6},children:d.key})]})]},s)},b=(()=>{const s=f.filter(l=>l.lcp!==null).slice(0,12).reverse();return s.length?{color:["#2a5cff"],tooltip:{trigger:"axis",formatter:l=>`${l[0].name}<br/>LCP: ${x("lcp",l[0].value)} ms`},grid:{left:12,right:40,top:10,bottom:8,containLabel:!0},xAxis:{type:"value",axisLabel:{color:"#86909c"},splitLine:{lineStyle:{color:"#f0f1f3"}}},yAxis:{type:"category",data:s.map(l=>l.url.replace(/^https?:\/\/(www\.)?/,"").slice(0,30)),axisLabel:{color:"#4e5969"},axisLine:{show:!1},axisTick:{show:!1}},series:[{type:"bar",barMaxWidth:14,data:s.map(l=>l.lcp),itemStyle:{borderRadius:[0,3,3,0]}}]}:null})();return e.jsxs("div",{className:"page",children:[e.jsxs("div",{className:"toolbar",children:[e.jsx(C.Title,{heading:5,style:{margin:0},children:t("performance")}),e.jsx("div",{style:{display:"flex",gap:6},children:W.map(s=>e.jsx(S,{size:"small",theme:n===s?"solid":"borderless",onClick:()=>c(s),children:t(s===7?"last7":s===30?"last30":"last90")},s))})]}),h&&e.jsx($,{type:"danger",description:h,style:{marginBottom:12}}),e.jsxs("div",{className:"stat-grid",children:[e.jsxs("div",{className:"stat-card",children:[e.jsx("div",{className:"stat-label",children:t("perfSamples")}),e.jsx("div",{className:"stat-value",children:L((o==null?void 0:o.samples)||0)}),e.jsxs("div",{className:"stat-sub",children:[(v=a==null?void 0:a.range)==null?void 0:v.start," ~ ",(N=a==null?void 0:a.range)==null?void 0:N.end]})]}),o&&m.map(s=>z(s.k,o[s.k]))]}),I&&!a?e.jsx(T,{active:!0,placeholder:e.jsx(T.Paragraph,{rows:6}),loading:!0}):!a||!f.length&&!((o==null?void 0:o.samples)>0)?e.jsx(u,{description:t(a?"envEmpty":"noData"),style:{margin:"40px 0"}}):e.jsxs(e.Fragment,{children:[b&&e.jsxs("div",{className:"chart-box",children:[e.jsx("div",{className:"card-title",children:"LCP TOP(首屏最大内容渲染)"}),e.jsx(U,{option:b,height:Math.max(220,f.filter(s=>s.lcp!==null).length*34)})]}),e.jsxs("div",{className:"card",style:{padding:0,overflow:"hidden"},children:[e.jsxs("div",{className:"card-title",style:{padding:"14px 16px 6px"},children:["Web Vitals · ",t("perfColPage")]}),e.jsx(F,{className:"perf-table",columns:[{title:t("perfColPage"),dataIndex:"url",width:"24%",ellipsis:{showTitle:!0},render:s=>e.jsx("span",{title:s,children:K(s,70)})},{title:t("perfColSamples"),dataIndex:"samples",width:"8%",render:s=>L(s)},...m.map(({k:s})=>({title:s.toUpperCase(),dataIndex:s,width:s==="cls"?"14%":"13.5%",render:l=>e.jsx(H,{k:s,v:l,t})}))],dataSource:f,rowKey:"url",pagination:!1,size:"small",empty:e.jsx(u,{description:t("noData")})})]}),e.jsxs(C.Text,{type:"tertiary",style:{fontSize:12,display:"block",marginTop:16},children:[i.name," · ",i.domain," · ",t("range"),": ",a.range.start," ~ ",a.range.end,"(",V(),") · 评级阈值 LCP 2.5s / INP 200ms / CLS 0.1"]})]})]})}function K(t,r){return t&&(t.length>r?t.slice(0,r)+"…":t)}export{ne as default};