hunter-mate 0.1.26 → 0.1.27

package/dist/web/dist/_next/static/chunks/896-9dce6a3bc525edba.js

@@ -0,0 +1 @@
+!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="8f6a5e56-a442-4870-bfba-9f904076d20b",e._sentryDebugIdIdentifier="sentry-dbid-8f6a5e56-a442-4870-bfba-9f904076d20b")}catch(e){}}();"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[896],{27473:function(e,t,n){var r=n(38321);n.o(r,"useParams")&&n.d(t,{useParams:function(){return r.useParams}}),n.o(r,"usePathname")&&n.d(t,{usePathname:function(){return r.usePathname}}),n.o(r,"useRouter")&&n.d(t,{useRouter:function(){return r.useRouter}}),n.o(r,"useSearchParams")&&n.d(t,{useSearchParams:function(){return r.useSearchParams}}),n.o(r,"useServerInsertedHTML")&&n.d(t,{useServerInsertedHTML:function(){return r.useServerInsertedHTML}})},14590:function(e,t,n){n.d(t,{kE:function(){return l},_f:function(){return H},$q:function(){return E}});class r extends Error{code;status;constructor(e,t,n){super(n||t),this.name="RecordingApiError",this.status=e,this.code=t}}class l{baseUrl;constructor(e){this.baseUrl=e}async request(e,t){let n;try{n=await fetch(`${this.baseUrl}${e}`,{headers:{"Content-Type":"application/json"},...t})}catch{throw new r(0,"network_error","network_error")}if(!n.ok){let e=`http_${n.status}`;try{let t=await n.json();"string"==typeof t.error&&(e=t.error)}catch{}throw new r(n.status,e)}return await n.json()}list(e){let t=new URLSearchParams;e?.urlKey&&t.set("urlKey",e.urlKey),e?.cursor&&t.set("cursor",e.cursor),e?.limit&&t.set("limit",String(e.limit));let n=t.toString();return this.request(`/recordings${n?`?${n}`:""}`)}async active(){return(await this.request("/recordings/active")).recordings??[]}start(e){return this.request("/recordings/start",{method:"POST",body:JSON.stringify({tabId:e.tabId,url:e.url,title:e.title??""})})}stop(e){return this.request("/recordings/stop",{method:"POST",body:JSON.stringify({sessionId:e})})}batchDelete(e){return this.request("/recordings/batch-delete",{method:"POST",body:JSON.stringify({ids:e})})}events(e){return this.request(`/recordings/${encodeURIComponent(e)}/events`)}meta(e){return this.request(`/recordings/${encodeURIComponent(e)}`)}async cpuProfile(e){try{return(await this.request(`/recordings/${encodeURIComponent(e)}/cpu-profile`)).profile??null}catch(e){if(e instanceof r&&("no_cpu_profile"===e.code||404===e.status))return null;throw e}}}var s=n(60635),o=n(72835);function i({events:e,height:t=280,playerRef:r}){let l=(0,s.useRef)(null),[i,a]=(0,s.useState)(null);return((0,s.useEffect)(()=>{if(!l.current||0===e.length)return;let s=null,o=!1;return Promise.all([n.e(131),n.e(671)]).then(n.bind(n,15841)).then(n=>{if(o||!l.current)return;let i=new(n.default??n)({target:l.current,props:{events:e,autoPlay:!1,showController:!0,width:l.current.clientWidth??400,height:t}}),a=()=>i.getReplayer?.();s={play:()=>{i.play?.()},pause:()=>{i.pause?.()},getCurrentTime:()=>a()?.getCurrentTime?.()??0,seekTo:e=>{i.goto?.(e,!1)},$destroy:()=>{i.$destroy?.()}},r&&(r.current=s)}).catch(e=>{a(`播放器加载失败: ${e instanceof Error?e.message:String(e)}`)}),()=>{o=!0,s?.$destroy(),r&&r.current===s&&(r.current=null)}},[e,t]),i)?(0,o.jsx)("div",{style:{padding:16,color:"#cf1322",background:"#fff2f0",borderRadius:4,height:t,display:"flex",alignItems:"center",justifyContent:"center"},children:i}):0===e.length?(0,o.jsx)("div",{style:{padding:16,color:"#999",textAlign:"center",height:t,display:"flex",alignItems:"center",justifyContent:"center"},children:"暂无回放数据"}):(0,o.jsx)("div",{ref:l,style:{width:"100%",height:t+80,background:"#000",borderRadius:4,overflow:"hidden"}})}function a(e){try{let t=JSON.parse(e);return JSON.stringify(t,null,2).split("\n")}catch{return e.split("\n")}}function d(e){return(e.length>120?e.slice(0,120):e).replace(/[0-9a-f]{8,}/gi,"#").replace(/\d+/g,"#")}function f(e){let t=e.payload,n="string"==typeof t.url?t.url:"",r=n;try{r=new URL(n,"http://x").pathname}catch{}return`${String(t.method??"GET")} ${r}`}function c(e){let t=e.payload,n=t.message||(Array.isArray(t.args)?t.args.map(e=>"string"==typeof e?e:JSON.stringify(e)).join(" "):"");return`${String(t.level??"log")} ${d(String(n??""))}`}function u(e){return d(String(e.payload.message??""))}function p(e,t,n){let r=new Map;for(let e of t){let t=n(e),l=r.get(t);l?l.push(e):r.set(t,[e])}let l=[],s=[];for(let t of e){let e=r.get(n(t));e&&e.length>0?l.push({base:t,target:e.shift()}):s.push(t)}let o=[];for(let e of r.values())o.push(...e);return{pairs:l,onlyBase:s,onlyTarget:o}}let h={same:{bg:"#f9fafb",fg:"#6b7280",label:"相同"},added:{bg:"#ecfdf5",fg:"#059669",label:"新增"},removed:{bg:"#fef2f2",fg:"#dc2626",label:"删除"},changed:{bg:"#fffbeb",fg:"#d97706",label:"变化"}};function x(e,t=60){let n="string"==typeof e?e:"";return n.length>t?`${n.slice(0,t)}…`:n}function g({label:e,hint:t}){return(0,o.jsxs)("div",{style:{background:"#f9fafb",border:"1px solid #e5e7eb",borderRadius:6,padding:"10px 12px"},children:[(0,o.jsx)("div",{style:{fontSize:12,color:"#6b7280"},children:e}),t&&(0,o.jsx)("div",{style:{fontSize:11,color:"#9ca3af",marginTop:2},children:t})]})}function m({children:e}){return(0,o.jsx)("div",{style:{fontSize:12,fontWeight:600,color:"#374151",marginBottom:4},children:e})}function y({title:e,baseHeaders:t,targetHeaders:n,missingText:r}){var l,s;if(!t&&!n)return(0,o.jsxs)("div",{style:{marginBottom:12},children:[(0,o.jsx)(m,{children:e}),(0,o.jsx)(g,{label:r,hint:"开启采集后新录制的数据才可见"})]});let i=(l=t??{},s=n??{},[...new Set([...Object.keys(l),...Object.keys(s)])].sort().map(e=>{let t=Object.prototype.hasOwnProperty.call(l,e),n=Object.prototype.hasOwnProperty.call(s,e);return t&&n?l[e]===s[e]?{key:e,kind:"same",baseVal:l[e],targetVal:s[e]}:{key:e,kind:"changed",baseVal:l[e],targetVal:s[e]}:t?{key:e,kind:"removed",baseVal:l[e]}:{key:e,kind:"added",targetVal:s[e]}}));return(0,o.jsxs)("div",{style:{marginBottom:12},children:[(0,o.jsx)(m,{children:e}),(0,o.jsx)("div",{style:{border:"1px solid #e5e7eb",borderRadius:6,overflow:"hidden"},children:i.map(e=>{let t=h[e.kind];return(0,o.jsxs)("div",{style:{display:"flex",gap:8,alignItems:"baseline",padding:"4px 10px",fontSize:11,fontFamily:"monospace",background:t.bg,color:t.fg,borderBottom:"1px solid #f3f4f6"},children:[(0,o.jsx)("span",{style:{flexShrink:0,fontWeight:600},children:t.label}),(0,o.jsxs)("span",{style:{flexShrink:0},children:[e.key,":"]}),(0,o.jsx)("span",{style:{flex:1,minWidth:0,wordBreak:"break-all"},children:"changed"===e.kind?`${e.baseVal??""} → ${e.targetVal??""}`:e.baseVal??e.targetVal??""})]},e.key)})})]})}function b({title:e,baseBody:t,targetBody:n,missingText:r}){let l=(0,s.useMemo)(()=>(function(e,t){let n=e.length,r=t.length,l=Array.from({length:n+1},()=>Array(r+1).fill(0));for(let s=1;s<=n;s++)for(let n=1;n<=r;n++)l[s][n]=e[s-1]===t[n-1]?l[s-1][n-1]+1:Math.max(l[s-1][n],l[s][n-1]);let s=[],o=n,i=r;for(;o>0&&i>0;)e[o-1]===t[i-1]?(s.unshift({kind:"same",text:e[o-1],baseIndex:o-1,targetIndex:i-1}),o--,i--):l[o-1][i]>l[o][i-1]?(s.unshift({kind:"del",text:e[o-1],baseIndex:o-1}),o--):(s.unshift({kind:"add",text:t[i-1],targetIndex:i-1}),i--);for(;o>0;)s.unshift({kind:"del",text:e[o-1],baseIndex:o-1}),o--;for(;i>0;)s.unshift({kind:"add",text:t[i-1],targetIndex:i-1}),i--;return s})(a(t??""),a(n??"")),[t,n]);if(!t&&!n)return(0,o.jsxs)("div",{style:{marginBottom:12},children:[(0,o.jsx)(m,{children:e}),(0,o.jsx)(g,{label:r,hint:"开启采集后新录制的数据才可见"})]});let i=l.slice(0,500),d=l.length-i.length;return(0,o.jsxs)("div",{style:{marginBottom:12},children:[(0,o.jsx)(m,{children:e}),(0,o.jsxs)("pre",{style:{margin:0,background:"#f9fafb",border:"1px solid #e5e7eb",borderRadius:6,padding:"8px 10px",fontSize:11,fontFamily:"monospace",maxHeight:260,overflow:"auto",whiteSpace:"pre-wrap",wordBreak:"break-all"},children:[i.map((e,t)=>{let n="add"===e.kind?"+":"del"===e.kind?"−":" ",r="add"===e.kind?"#059669":"del"===e.kind?"#dc2626":"#6b7280";return(0,o.jsxs)("div",{style:{color:r,background:"add"===e.kind?"#ecfdf5":"del"===e.kind?"#fef2f2":"transparent"},children:[n," ",e.text]},t)}),d>0&&(0,o.jsxs)("div",{style:{color:"#9ca3af"},children:["其余 ",d," 行相同"]})]})]})}function k({open:e,onClose:t,selected:n,initialBaselineIndex:r}){let[l,i]=(0,s.useState)(r??0);(0,s.useEffect)(()=>{e&&i(r??0)},[e,n,r]),(0,s.useEffect)(()=>{if(!e)return;let n=e=>{"Escape"===e.key&&t()};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[e,t]);let a=n[l]??n[0],d=n.filter((e,t)=>t!==l);return e&&a?(0,o.jsx)("div",{onClick:t,style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.45)",zIndex:999,display:"flex",alignItems:"center",justifyContent:"center"},children:(0,o.jsxs)("div",{role:"dialog","aria-label":"请求对比",onClick:e=>e.stopPropagation(),style:{width:900,maxWidth:"95vw",maxHeight:"85vh",overflowY:"auto",background:"#fff",borderRadius:8,padding:"16px 20px",boxShadow:"0 8px 30px rgba(0,0,0,0.2)"},children:[(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12},children:[(0,o.jsx)("span",{style:{fontSize:15,fontWeight:600},children:"请求对比"}),(0,o.jsx)("button",{"aria-label":"关闭",onClick:t,style:{border:"none",background:"transparent",fontSize:18,cursor:"pointer",color:"#6b7280",lineHeight:1},children:"✕"})]}),(0,o.jsxs)("div",{style:{marginBottom:12,fontSize:13,display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"},children:[(0,o.jsx)("span",{style:{color:"#374151"},children:"以这条为基准:"}),(0,o.jsx)("select",{"aria-label":"基准选择",value:l,onChange:e=>i(Number(e.target.value)),style:{padding:"4px 8px",borderRadius:4,border:"1px solid #d1d5db",fontSize:12,maxWidth:520},children:n.map((e,t)=>(0,o.jsxs)("option",{value:t,children:["#",t," \xb7 ",String(e.payload.method??"GET")," \xb7 ",x(e.payload.url)," \xb7 ",e.payload.status??"-"]},`${e.timestamp}-${t}`))})]}),(0,o.jsx)("div",{style:{marginBottom:16,border:"1px solid #e5e7eb",borderRadius:6,overflow:"hidden"},children:n.map((e,t)=>{var n;let r=t===l,s=e.payload.status,i=a.payload.status,d=!r&&null!=s&&null!=i&&s!==i;return(0,o.jsxs)("div",{style:{display:"flex",gap:8,alignItems:"center",padding:"5px 10px",fontSize:12,background:r?"#eff6ff":"#fff",borderBottom:"1px solid #f3f4f6"},children:[(0,o.jsx)("span",{style:{flexShrink:0,fontWeight:r?600:400,color:r?"#2563eb":"#6b7280",width:44},children:r?"基准":`#${t}`}),(0,o.jsx)("span",{style:{flexShrink:0,fontFamily:"monospace"},children:String(e.payload.method??"GET")}),(0,o.jsx)("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace",color:"#374151"},children:String(e.payload.url??"")}),(0,o.jsx)("span",{style:{flexShrink:0,fontSize:11,padding:"1px 6px",borderRadius:4,color:"#fff",background:d?"#f59e0b":null==(n="number"==typeof s?s:void 0)?"#9ca3af":n>=400?"#ef4444":n>=300?"#f59e0b":"#22c55e",...d?{boxShadow:"0 0 0 2px #fef3c7"}:{}},children:s??"-"})]},`${e.timestamp}-${t}`)})}),0===d.length?(0,o.jsx)(g,{label:"只选中了一条,再勾选一条即可对比"}):d.map((e,t)=>{let r=n.indexOf(e),l=null!=e.payload.status&&null!=a.payload.status&&e.payload.status!==a.payload.status;return(0,o.jsxs)("div",{style:{borderTop:"1px solid #f3f4f6",paddingTop:12,marginBottom:12},children:[(0,o.jsxs)("div",{style:{fontSize:13,fontWeight:600,color:"#111827",marginBottom:8},children:["与 #",r," \xb7 ",String(e.payload.method??"GET")," ",x(e.payload.url,40)," 相比",l&&(0,o.jsxs)("span",{style:{marginLeft:8,color:"#d97706",fontWeight:400},children:["状态码 ",String(a.payload.status)," → ",String(e.payload.status)]})]}),(0,o.jsx)(y,{title:"请求头差异",baseHeaders:a.payload.requestHeaders,targetHeaders:e.payload.requestHeaders,missingText:"本次录制未采集请求头"}),(0,o.jsx)(y,{title:"返回头差异",baseHeaders:a.payload.responseHeaders,targetHeaders:e.payload.responseHeaders,missingText:"本次录制未采集返回头"}),(0,o.jsx)(b,{title:"请求体差异",baseBody:a.payload.requestBody,targetBody:e.payload.requestBody,missingText:"本次录制未采集请求体"}),(0,o.jsx)(b,{title:"返回体差异",baseBody:a.payload.responseBody,targetBody:e.payload.responseBody,missingText:"本次录制未采集返回体"})]},`${e.timestamp}-${t}`)})]})}):null}let S=[{key:"network",label:"网络请求",color:"#2563eb",empty:"这次录制没有产生网络请求"},{key:"console",label:"控制台",color:"#f59e0b",empty:"这次录制没有产生控制台输出"},{key:"exceptions",label:"页面异常",color:"#ef4444",empty:"这次录制没有产生页面异常"}];function j(e){let t=new Date(e),n=(e,t=2)=>e.toString().padStart(t,"0");return`${n(t.getHours())}:${n(t.getMinutes())}:${n(t.getSeconds())}.${n(t.getMilliseconds(),3)}`}function v(e,t){let n=t.payload;if("network"===e){let e=n.status;return{main:`${n.method||"GET"} ${n.url||""}`,sub:"request"===n.phase?"已发送":"response"===n.phase?"已返回":void 0,badge:null!=e?String(e):n.phase,badgeColor:null!=e?e>=400?"#ef4444":e>=300?"#f59e0b":"#22c55e":"#9ca3af"}}if("console"===e){let e=n.level||"log";return{main:n.message||(n.args??[]).map(e=>"string"==typeof e?e:JSON.stringify(e)).join(" "),sub:n.stack?n.stack.split("\n").slice(0,2).join("  "):void 0,badge:e,badgeColor:"error"===e?"#ef4444":"warn"===e?"#f59e0b":"#3b82f6"}}return{main:n.message||"(未知异常)",sub:n.stack?n.stack.split("\n").slice(0,2).join("  "):void 0,badge:"异常",badgeColor:"#ef4444"}}function w({network:e,console:t,exceptions:n,baseTimestamp:r,currentOffsetMs:l,onSeek:i,height:a=260,sessionId:d,selectionMode:f=!0}){let c=a<=200,u=`esp-collapsed:${d??String(r)}`,p=(0,s.useRef)({}),[h,x]=(0,s.useState)(()=>(function(e){try{let t=sessionStorage.getItem(e);if(!t)return null;let n=JSON.parse(t);return Array.isArray(n)?n.filter(e=>"string"==typeof e):null}catch{return null}})(u)||(c?["network"]:[]));(0,s.useEffect)(()=>{!function(e,t){try{sessionStorage.setItem(e,JSON.stringify(t))}catch{}}(u,h)},[u,h]);let g={network:e,console:t,exceptions:n},m=e.length+t.length+n.length,y=null!=r&&null!=l,b=(0,s.useMemo)(()=>{let e={network:-1,console:-1,exceptions:-1};if(!y)return e;let t=r+l;for(let n of S){let r=g[n.key],l=-1;for(let e=0;e<r.length&&r[e].timestamp<=t;e++)l=e;e[n.key]=l}return e},[e,t,n,r,l,y]),w=[...S].reverse().find(e=>b[e.key]>=0)?.key,$=(0,s.useRef)(0),M=(0,s.useRef)(0),I=()=>{if(M.current>0){M.current-=1;return}$.current=Date.now()+3e3};(0,s.useEffect)(()=>{if(y&&!(Date.now()<$.current))for(let e of S){let t=b[e.key];if(t<0)continue;let n=p.current[e.key],r=n?.children[t];if(r?.scrollIntoView){M.current+=1;try{r.scrollIntoView({block:"nearest"})}catch{M.current-=1}}}},[b,y]);let z=`esp-selected:${d??String(r)}`,[R,C]=(0,s.useState)(()=>{let t=new Map,n=function(e){try{let t=sessionStorage.getItem(e);if(!t)return null;let n=JSON.parse(t);return Array.isArray(n)?n.filter(e=>"string"==typeof e):null}catch{return null}}(z);if(n&&e.length>0){let r=new Map(e.map((e,t)=>[`${e.timestamp}-${t}`,e]));for(let e of n){let n=r.get(e);n&&t.set(e,n)}}return t}),[B,T]=(0,s.useState)(!1),[O,E]=(0,s.useState)(!1),[N,W]=(0,s.useState)(!1);(0,s.useEffect)(()=>{!function(e,t){try{0===t.length?sessionStorage.removeItem(e):sessionStorage.setItem(e,JSON.stringify(t))}catch{}}(z,[...R.keys()])},[z,R]);let P=(0,s.useRef)(null);(0,s.useEffect)(()=>{let t=P.current;P.current={baseTimestamp:r,network:e},null!==t&&(t.baseTimestamp!==r||t.network!==e)&&(C(new Map),E(!1),W(!1))},[r,e]),(0,s.useEffect)(()=>{if(1===R.size){E(!0);let e=setTimeout(()=>E(!1),3e3);return()=>clearTimeout(e)}E(!1)},[R.size]);let A=(e,t)=>{C(n=>{let r=new Map(n);return r.has(e)?r.delete(e):r.set(e,t),r})},F=[...R.values()];return(0,o.jsxs)("div",{style:{border:"1px solid #e5e7eb",borderRadius:6,background:"#fff"},children:[(0,o.jsx)("style",{children:'.esp-row .esp-cb{opacity:0;transition:opacity .12s}.esp-row:hover .esp-cb,.esp-cb[data-on="1"]{opacity:1}'}),(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:4,padding:"6px 8px",borderBottom:"1px solid #f3f4f6",flexWrap:"wrap"},children:[(0,o.jsxs)("span",{style:{fontSize:11,padding:"1px 7px",borderRadius:8,background:"#f3f4f6",color:"#6b7280",marginRight:4},children:["全部 ",m]}),S.map(e=>(0,o.jsxs)("button",{onClick:()=>p.current[e.key]?.scrollIntoView?.({block:"start"}),style:{fontSize:12,padding:"3px 8px",border:"none",borderRadius:4,background:w===e.key?"#dbeafe":"transparent",color:w===e.key?"#2563eb":"#6b7280",cursor:"pointer",fontWeight:w===e.key?600:400},children:[e.label," (",g[e.key].length,")"]},e.key))]}),f&&(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:8,padding:"4px 8px",borderBottom:"1px solid #f3f4f6",minHeight:28},children:[R.size>0&&(0,o.jsxs)("span",{style:{fontSize:11,color:"#6b7280"},children:["已选 ",R.size," 条",(0,o.jsx)("button",{"aria-label":"清除选择",onClick:()=>C(new Map),style:{marginLeft:6,border:"none",background:"transparent",cursor:"pointer",color:"#9ca3af",fontSize:12,lineHeight:1},children:"\xd7"})]}),O&&(0,o.jsx)("span",{style:{fontSize:11,color:"#9ca3af"},children:"再选一条即可对比"}),(0,o.jsx)("button",{onClick:()=>T(e=>!e),style:{fontSize:11,padding:"2px 8px",borderRadius:4,border:"1px solid #d1d5db",background:B?"#eff6ff":"#fff",color:B?"#2563eb":"#6b7280",cursor:"pointer"},children:"选择对比"})]}),0===m?(0,o.jsx)("div",{style:{padding:"20px 0",textAlign:"center",fontSize:12,color:"#9ca3af"},children:"这次录制还没有捕捉到任何事件"}):S.map(e=>{let t=g[e.key],n=h.includes(e.key),l=b[e.key];return(0,o.jsxs)("div",{ref:t=>{p.current[e.key]=t},style:{scrollMarginTop:4},children:[(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"5px 8px",borderBottom:"1px solid #f3f4f6",background:"#fafafa"},children:[(0,o.jsx)("button",{"aria-label":n?`展开${e.label}`:`折叠${e.label}`,onClick:()=>x(t=>n?t.filter(t=>t!==e.key):[...t,e.key]),style:{border:"none",background:"transparent",cursor:"pointer",fontSize:11,color:"#6b7280",padding:"0 2px"},children:n?"▸":"▾"}),(0,o.jsxs)("span",{style:{fontSize:12,fontWeight:600,color:"#374151"},children:[e.label," (",t.length,")"]}),(0,o.jsx)("button",{onClick:()=>x(t=>n?t.filter(t=>t!==e.key):[...t,e.key]),style:{marginLeft:"auto",border:"none",background:"transparent",cursor:"pointer",fontSize:11,color:"#9ca3af"},children:"[折叠]"})]}),!n&&(0,o.jsx)("div",{onScroll:I,style:{maxHeight:a,overflowY:"auto",padding:"4px 0"},"data-section":e.key,children:0===t.length?(0,o.jsx)("div",{style:{padding:"14px 0",textAlign:"center",fontSize:12,color:"#9ca3af"},children:e.empty}):t.map((t,n)=>{let{main:s,sub:a,badge:d,badgeColor:c}=v(e.key,t),u=n===l,p=null!=r?t.timestamp-r:null,h=null!=p&&p>=0,x=`${t.timestamp}-${n}`,g=R.has(x);return(0,o.jsxs)("div",{className:"esp-row","data-row":x,onClick:()=>h&&i(p),title:null!=p?`点击跳转到这一刻 \xb7 完整时刻 ${j(t.timestamp)}`:void 0,style:{display:"flex",alignItems:"flex-start",gap:8,padding:"4px 10px",fontSize:12,background:g?"#eff6ff":u?"#dbeafe":n%2==0?"#fafafa":"#fff",cursor:h?"pointer":"default",borderLeft:`3px solid ${e.color}`},children:[f&&"network"===e.key&&(0,o.jsx)("input",{type:"checkbox",className:"esp-cb","data-on":B||g?"1":"0","aria-label":`选择第 ${n+1} 条请求`,checked:g,onClick:e=>e.stopPropagation(),onChange:()=>A(x,t),style:{marginTop:2,flexShrink:0,cursor:"pointer"}}),(0,o.jsx)("span",{style:{fontFamily:"monospace",fontSize:11,color:"#9ca3af",flexShrink:0,minWidth:76},children:null!=p?function(e){if(!Number.isFinite(e)||e<0)return"-";let t=Math.floor(e/1e3),n=(e,t=2)=>e.toString().padStart(t,"0");return`${Math.floor(t/60)}:${n(t%60)}.${n(Math.floor(e%1e3),3)}`}(p):j(t.timestamp)}),(0,o.jsx)("span",{style:{fontSize:10,padding:"1px 5px",borderRadius:4,color:"#fff",background:c??"#9ca3af",flexShrink:0,marginTop:1},children:d??"-"}),(0,o.jsxs)("span",{style:{flex:1,minWidth:0},children:[(0,o.jsx)("span",{style:{display:"block",color:"#111827",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"console"===e.key||"exceptions"===e.key?"monospace":void 0},children:s}),a&&(0,o.jsx)("span",{style:{display:"block",color:"#9ca3af",fontSize:10,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace"},children:a})]})]},x)})})]},e.key)}),f&&R.size>=2&&(0,o.jsxs)("button",{onClick:()=>W(!0),style:{position:"fixed",bottom:24,right:24,zIndex:1e3,padding:"8px 16px",borderRadius:20,border:"none",background:"#2563eb",color:"#fff",fontSize:13,cursor:"pointer",boxShadow:"0 4px 14px rgba(37,99,235,0.4)"},children:["对比这 ",R.size," 条请求"]}),(0,o.jsx)(k,{open:N,onClose:()=>W(!1),selected:F,initialBaselineIndex:0})]})}function $({network:e,console:t,exceptions:n,baseTimestamp:r,currentOffsetMs:l,onSeek:i,height:a=260}){let[d,f]=(0,s.useState)("network"),c=(0,s.useRef)(null),u=[{key:"network",label:"网络请求",items:e},{key:"console",label:"控制台",items:t},{key:"exceptions",label:"异常",items:n}],p=u.find(e=>e.key===d),h=(0,s.useMemo)(()=>{if(null==r||null==l)return -1;let e=r+l,t=-1;for(let n=0;n<p.items.length&&p.items[n].timestamp<=e;n++)t=n;return t},[p.items,r,l]);return(0,s.useEffect)(()=>{if(h<0||!c.current)return;let e=c.current.children[h];e?.scrollIntoView?.({block:"nearest"})},[h]),(0,o.jsxs)("div",{style:{border:"1px solid #e5e7eb",borderRadius:6,background:"#fff"},children:[(0,o.jsx)("div",{style:{display:"flex",gap:4,padding:"6px 8px 0",borderBottom:"1px solid #f3f4f6"},children:u.map(e=>(0,o.jsxs)("button",{onClick:()=>f(e.key),style:{fontSize:12,padding:"4px 8px",border:"none",borderBottom:d===e.key?"2px solid #2563eb":"2px solid transparent",background:"transparent",color:d===e.key?"#2563eb":"#6b7280",cursor:"pointer",fontWeight:d===e.key?600:400},children:[e.label," (",e.items.length,")"]},e.key))}),(0,o.jsx)("div",{ref:c,style:{height:a,overflowY:"auto",padding:"4px 0"},children:0===p.items.length?(0,o.jsxs)("div",{style:{padding:"20px 0",textAlign:"center",fontSize:12,color:"#9ca3af"},children:["本次录制没有捕捉到",p.label]}):p.items.map((e,t)=>{let{main:n,sub:l,badge:s,badgeColor:a}=v(d,e),f=t===h,c=null!=r?e.timestamp-r:null;return(0,o.jsxs)("div",{onClick:()=>null!=c&&c>=0&&i(c),title:null!=c?"点击跳转到此时间点":void 0,style:{display:"flex",alignItems:"flex-start",gap:8,padding:"4px 10px",fontSize:12,background:f?"#dbeafe":t%2==0?"#fafafa":"#fff",cursor:null!=c?"pointer":"default",borderLeft:f?"3px solid #2563eb":"3px solid transparent"},children:[(0,o.jsx)("span",{style:{fontFamily:"monospace",fontSize:11,color:"#9ca3af",flexShrink:0},children:j(e.timestamp)}),(0,o.jsx)("span",{style:{fontSize:10,padding:"1px 5px",borderRadius:4,color:"#fff",background:a??"#9ca3af",flexShrink:0,marginTop:1},children:s??"-"}),(0,o.jsxs)("span",{style:{flex:1,minWidth:0},children:[(0,o.jsx)("span",{style:{display:"block",color:"#111827",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"console"===d||"exceptions"===d?"monospace":void 0},children:n}),l&&(0,o.jsx)("span",{style:{display:"block",color:"#9ca3af",fontSize:10,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"monospace"},children:l})]})]},`${e.timestamp}-${t}`)})})]})}function M(e){return e.tabs?(0,o.jsx)($,{...e}):(0,o.jsx)(w,{...e})}let I=/^\s*at\s+(?:(.*?)\s+\()?(.+?)(?::(\d+))?(?::(\d+))?\)?\s*$/;function z(e){let t=Math.min(e.samples.length,e.timeDeltas.length),n=[],r=0;for(let l=0;l<t;l++){let t=e.timeDeltas[l];if(!Number.isFinite(t))break;r+=t,n.push({offsetMs:r/1e3,nodeId:e.samples[l]})}return n}function R(e,t){let n=function(e){let t=new Map;for(let n of e)for(let e of n.children??[])t.set(e,n.id);let n=new Map;for(let r of e)n.set(r.id,{node:r,parentId:t.get(r.id)??null});return n}(e.nodes),r=[],l=t,s=0;for(;null!=l&&s++<200;){let e=n.get(l);if(!e)break;r.unshift(e.node.callFrame),l=e.parentId}return r}function C(e){let t=0;for(let n=0;n<e.length;n++)t=31*t+e.charCodeAt(n)|0;let n=(t%360+360)%360;return`hsl(${n}, 60%, 55%)`}function B(e){let t=e.url?e.url.split("/").slice(-1)[0]:"(未知)";return`${t}:${e.lineNumber+1}`}function T(e){let t=e/1e3;return t<60?`${t.toFixed(t<10?1:0)}s`:`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}function O({durationMs:e,baseTimestamp:t,network:n,console:r,exceptions:l,cpuProfile:i,longtasks:a,currentOffsetMs:d,onSeek:f}){let[c,u]=(0,s.useState)(null),[p,h]=(0,s.useState)(null),x=c?c[0]:0,g=c?c[1]:Math.max(e,1),m=Math.max(1,g-x),y=(0,s.useMemo)(()=>{let e=m/8,t=[100,250,500,1e3,2e3,5e3,1e4,3e4,6e4,3e5].find(t=>t>=e)??6e5,n=[];for(let e=Math.ceil(x/t)*t;e<=g;e+=t)n.push(e);return{step:t,list:n}},[x,g,m]),b=e=>(e-x)/m*800,k=e=>x+e/800*m,S=(0,s.useMemo)(()=>{if(!i||!i.samples?.length)return[];let e=z(i),t=[],n=Math.max(m/800,.5);for(let r=0;r<e.length;r++){let l=e[r];if(l.offsetMs<x||l.offsetMs>g)continue;let s=b(l.offsetMs),o=R(i,l.nodeId),a=o[o.length-1],d=a?`${a.functionName||"(anonymous)"} \xb7 ${B(a)}`:`(采样 #${l.nodeId})`,f=a?C(a.functionName+a.url):"#9ca3af",c=t[t.length-1];c&&c.label===d&&s-c.x1<=n?c.x1=s+1:t.push({x0:s,x1:s+1,label:d,color:f,offsetMs:l.offsetMs})}return t.length>500?t.filter((e,n)=>n%Math.ceil(t.length/500)==0):t},[i,x,g,m]),j=(0,s.useMemo)(()=>{if(!i||!i.samples?.length)return null;let e=z(i),t=null;for(let n of e)if(n.offsetMs<=d)t=n;else break;if(!t)return null;let n=R(i,t.nodeId),r=n[n.length-1];return r?`${r.functionName||"(anonymous)"} (${B(r)})`:null},[i,d]),v=(0,s.useMemo)(()=>{if(!a?.length||null==t)return[];let e=[];for(let n of[...a].sort((e,t)=>e.timestamp-t.timestamp)){let r=n.timestamp-t;if(r<x||r>g)continue;let l="number"==typeof n.payload.duration&&n.payload.duration>0?n.payload.duration:50,s=(Array.isArray(n.payload.scripts)?n.payload.scripts:[])[0],o=s?`${s.name||"(anonymous)"} \xb7 ${B({url:s.url??"",lineNumber:s.line??0})}`:"(长帧无脚本归因)",i=s?C(`${s.name??""}${s.url??""}`):"#9ca3af",a=b(r),d=e[e.length-1];d&&d.label===o&&a-d.x1<=2?d.x1=Math.max(d.x1,b(r+l)):e.push({x0:a,x1:Math.max(a+1.5,b(r+l)),label:o,color:i,offsetMs:r})}return e.length>500?e.filter((t,n)=>n%Math.ceil(e.length/500)==0):e},[a,t,x,g,m]),w=(0,s.useMemo)(()=>{if(j||!a?.length||null==t)return j;let e=null;for(let n of a)if(n.timestamp-t<=d)e=n;else break;if(!e)return null;let n=(Array.isArray(e.payload.scripts)?e.payload.scripts:[])[0];return n?`${n.name||"(anonymous)"} (${B({url:n.url??"",lineNumber:n.line??0})})`:null},[j,a,t,d]),$=Math.min(Math.max(b(d),0),800);return(0,o.jsxs)("div",{style:{border:"1px solid #e5e7eb",borderRadius:6,background:"#fff",overflow:"hidden"},children:[(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:8,padding:"4px 8px",borderBottom:"1px solid #f3f4f6",fontSize:11},children:[(0,o.jsxs)("span",{style:{color:"#6b7280",flexShrink:0},children:["时间轴 ",T(x)," – ",T(g),c&&(0,o.jsx)("button",{onClick:()=>u(null),style:{marginLeft:6,fontSize:10,color:"#2563eb",border:"none",background:"none",cursor:"pointer"},children:"重置缩放"})]}),w&&(0,o.jsxs)("span",{style:{color:"#111827",fontFamily:"monospace",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},title:w,children:["当前: ",w]})]}),(0,o.jsxs)("div",{style:{position:"relative",userSelect:"none"},children:[(0,o.jsx)("div",{style:{position:"relative",height:22,borderBottom:"1px solid #f3f4f6"},children:y.list.map(e=>(0,o.jsx)("span",{style:{position:"absolute",left:`${b(e)/800*100}%`,top:2,fontSize:9,color:"#9ca3af",transform:"translateX(2px)"},children:T(e)},e))}),i&&(0,o.jsxs)("svg",{"data-testid":"flame-band",viewBox:"0 0 800 56",preserveAspectRatio:"none",style:{display:"block",width:"100%",height:56,borderBottom:"1px solid #f3f4f6",cursor:"crosshair"},onClick:t=>{let n=t.currentTarget.getBoundingClientRect();f(Math.min(Math.max(k((t.clientX-n.left)/n.width*800),0),e))},children:[S.map((e,t)=>(0,o.jsx)("rect",{x:e.x0,y:4,width:Math.max(e.x1-e.x0,.6),height:48,fill:e.color,opacity:.85,children:(0,o.jsx)("title",{children:`${T(e.offsetMs)} \xb7 ${e.label}`})},t)),0===S.length&&(0,o.jsx)("text",{x:8,y:28,fontSize:11,fill:"#9ca3af",children:"当前窗口无采样(点击上方重置缩放)"})]}),!i&&(a?.length??0)>0&&(0,o.jsxs)("svg",{"data-testid":"loaf-band",viewBox:"0 0 800 56",preserveAspectRatio:"none",style:{display:"block",width:"100%",height:56,borderBottom:"1px solid #f3f4f6",cursor:"crosshair"},onClick:t=>{let n=t.currentTarget.getBoundingClientRect();f(Math.min(Math.max(k((t.clientX-n.left)/n.width*800),0),e))},children:[v.map((e,t)=>(0,o.jsx)("rect",{x:e.x0,y:4,width:Math.max(e.x1-e.x0,.6),height:48,fill:e.color,opacity:.85,children:(0,o.jsx)("title",{children:`${T(e.offsetMs)} \xb7 ${e.label}`})},t)),0===v.length&&(0,o.jsx)("text",{x:8,y:28,fontSize:11,fill:"#9ca3af",children:"当前窗口无长帧(点击上方重置缩放)"})]}),!i&&(a?.length??0)===0&&(0,o.jsx)("div",{style:{height:20,display:"flex",alignItems:"center",padding:"0 8px",fontSize:10,color:"#9ca3af",borderBottom:"1px solid #f3f4f6"},children:"此录制未捕捉到卡顿时的脚本信息(页面无长帧)"}),[{key:"network",label:"网络",color:"#3b82f6",items:n},{key:"console",label:"控制台",color:"#f59e0b",items:r},{key:"exceptions",label:"异常",color:"#ef4444",items:l}].map(n=>{let r=function(e,t,n,r,l){if(null==t)return[];let s=Math.max(1,r-n),o=[],i=null;for(let l of[...e].sort((e,t)=>e.timestamp-t.timestamp)){let e=l.timestamp-t;if(e<n||e>r)continue;let a=(e-n)/s*800;i&&a-i.x1<3?(i.count+=1,i.x1=a):(i={x0:a,x1:a+1,count:1,first:l},o.push(i))}return o}(n.items,t,x,g,0);return(0,o.jsxs)("div",{style:{position:"relative",height:18,borderBottom:"1px solid #f9fafb",display:"flex",alignItems:"center"},children:[(0,o.jsxs)("span",{style:{position:"absolute",left:4,fontSize:9,color:"#9ca3af",zIndex:1,background:"rgba(255,255,255,0.8)",paddingRight:4},children:[n.label," ",n.items.length>0?`(${n.items.length})`:"(无)"]}),(0,o.jsx)("div",{style:{position:"relative",flex:1,height:"100%"},children:r.map((r,l)=>(0,o.jsx)("span",{"data-testid":"lane-bar",title:`${new Date(r.first.timestamp).toLocaleTimeString()}${r.count>1?` \xb7 聚合 ${r.count} 条`:""} \xb7 点击跳转`,onClick:l=>{if(l.stopPropagation(),r.count>1){let t=Math.max((r.x1-r.x0)/800*m*.1,200),n=Math.max(x+r.x0/800*m-t,0);u([n,Math.max(Math.min(x+r.x1/800*m+t,e),n+100)])}else{f(Math.min(Math.max(r.first.timestamp-(t??0),0),e));let l=r.first.payload;"string"==typeof l.stack&&l.stack?h({title:String(l.message??l.url??"事件栈"),frames:function(e){if(!e)return[];let t=[];for(let n of e.split("\n")){let e=I.exec(n);e&&t.push({functionName:e[1]?.trim()||"(anonymous)",url:e[2]??"",lineNumber:null!=e[3]?parseInt(e[3],10):null,columnNumber:null!=e[4]?parseInt(e[4],10):null})}return t}(l.stack)}):"exceptions"===n.key&&h({title:String(l.message??"异常"),frames:[]})}},style:{position:"absolute",left:`${r.x0/800*100}%`,width:`${Math.max((r.x1-r.x0)/800*100,.2)}%`,top:4,height:10,background:n.color,borderRadius:2,cursor:"pointer",opacity:.9},children:r.count>1&&(0,o.jsxs)("span",{style:{position:"absolute",right:1,top:-1,fontSize:8,color:"#fff",fontWeight:700},children:["\xd7",r.count]})},l))})]},n.key)}),(0,o.jsx)("div",{style:{position:"absolute",top:0,bottom:0,left:`${$/800*100}%`,width:1,background:"#ef4444",pointerEvents:"none"}})]}),p&&(0,o.jsxs)("div",{style:{borderTop:"1px solid #f3f4f6",padding:"6px 8px",fontSize:11,background:"#fafafa"},children:[(0,o.jsxs)("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[(0,o.jsx)("b",{style:{color:"#111827"},children:p.title}),(0,o.jsx)("button",{onClick:()=>h(null),style:{fontSize:10,color:"#6b7280",border:"none",background:"none",cursor:"pointer"},children:"关闭"})]}),p.frames.length>0?(0,o.jsx)("ol",{style:{margin:"4px 0 0",paddingLeft:18,fontFamily:"monospace",fontSize:10,color:"#4b5563",maxHeight:140,overflowY:"auto"},children:p.frames.map((e,t)=>(0,o.jsxs)("li",{children:[e.functionName," (",e.url.split("/").slice(-1)[0],":",null!=e.lineNumber?e.lineNumber+1:"?",")"]},t))}):(0,o.jsx)("div",{style:{color:"#9ca3af",marginTop:4},children:"该事件没有附带调用栈"})]})]})}function E({api:e,sessionId:t,meta:n,compact:r,playerHeight:l,renderError:a}){let[d,f]=(0,s.useState)(null),[c,u]=(0,s.useState)(null),[p,h]=(0,s.useState)(null),[x,g]=(0,s.useState)(0),m=(0,s.useRef)(null),[y,b]=(0,s.useState)(0);(0,s.useEffect)(()=>{f(null),u(null),h(null),b(0);let n=!0;return e.events(t).then(async r=>{if(n&&(f(r),r.hasCpuProfile))try{let r=await e.cpuProfile(t);n&&u(r)}catch{}}).catch(e=>n&&h(e instanceof Error?e.message:String(e))),()=>{n=!1}},[e,t,x]);let k=(0,s.useMemo)(()=>d?function(e){for(let t of e){let e=t?.timestamp;if("number"==typeof e)return e}return null}(d.rrweb):null,[d]);(0,s.useEffect)(()=>{if(!d)return;let e=setInterval(()=>{b(m.current?.getCurrentTime()??0)},200);return()=>clearInterval(e)},[d]);let S=(0,s.useCallback)(e=>{m.current?.seekTo(e),b(e)},[]);if(p)return(console.error("[recording-ui] 回放事件加载失败:",p),a)?(0,o.jsx)(o.Fragment,{children:a(p,()=>g(e=>e+1))}):(0,o.jsx)("div",{style:{color:"#cf1322",background:"#fff2f0",borderRadius:8,padding:16},children:"回放加载失败,请收起后重试"});if(!d)return(0,o.jsx)("div",{style:{color:"#999",padding:24},children:"加载回放中…"});let j=n?.duration??(d.rrweb.length>0?(d.rrweb[d.rrweb.length-1].timestamp??0)-(k??0):0);return(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"column",gap:8,minWidth:0},children:[(0,o.jsx)("div",{style:{background:"#fff",borderRadius:8,padding:8},children:(0,o.jsx)(i,{events:d.rrweb,height:l??(r?200:420),playerRef:m})}),(0,o.jsx)(O,{durationMs:j,baseTimestamp:k,network:d.network,console:d.console,exceptions:d.exceptions,cpuProfile:c,longtasks:d.longtasks??[],currentOffsetMs:y,onSeek:S}),(0,o.jsx)(M,{network:d.network,console:d.console,exceptions:d.exceptions,baseTimestamp:k,currentOffsetMs:y,onSeek:S,height:r?200:280})]})}function N(e){for(let t of e){let e=t?.timestamp;if("number"==typeof e)return e}return null}function W(){return{added:[],removed:[],changed:[],same:[]}}let P={added:{color:"#059669",bg:"#ecfdf5"},removed:{color:"#dc2626",bg:"#fef2f2"},changed:{color:"#d97706",bg:"#fffbeb"},same:{color:"#6b7280",bg:"#f9fafb"}};function A(e,t){if(null==t)return null;let n=e.timestamp-t;return n>=0?n:null}function F(e){let t=e.payload;return`${String(t.method??"GET")} ${String(t.url??"")}`}function H({base:e,target:t,height:n=320,renderError:r,baseError:l,targetError:a,onRetryError:d,onSwap:h,onSeekSide:x}){let[g,m]=(0,s.useState)(!1),y=(0,s.useRef)(null),b=(0,s.useRef)(null),k=g?t:e,S=g?e:t,j=k.meta.duration??0,v=S.meta.duration??0,w=j<=v,$=w?y:b,M=Math.min(j,v),I=v>M+300,z=I?b:y,R=Math.max(j,v)>M+300,[C,B]=(0,s.useState)(!1);(0,s.useEffect)(()=>B(!1),[e.meta.sessionId,t.meta.sessionId]),(0,s.useEffect)(()=>{if(C||M<=0)return;let e=setInterval(()=>{($.current?.getCurrentTime()??0)>=M-150&&(y.current?.pause(),b.current?.pause(),B(!0))},200);return()=>clearInterval(e)},[C,M,$]);let T=N(k.events.rrweb),O=N(S.events.rrweb),E=(0,s.useMemo)(()=>{let e={network:W(),console:W(),exceptions:W()},t=p(k.events.network,S.events.network,f);for(let n of t.onlyBase)e.network.removed.push({kind:"removed",mark:"−",text:F(n),note:"仅基准有",seekSide:"base",seekOffsetMs:A(n,T)});for(let n of t.onlyTarget)e.network.added.push({kind:"added",mark:"+",text:F(n),note:"仅对照有",seekSide:"target",seekOffsetMs:A(n,O)});for(let n of t.pairs){let t=n.base.payload.status,r=n.target.payload.status;t!==r?e.network.changed.push({kind:"changed",mark:"~",text:F(n.base),note:`两边都有,结果不同:状态码 ${String(t??"-")} → ${String(r??"-")}`,seekSide:"base",seekOffsetMs:A(n.base,T)}):e.network.same.push({kind:"same",mark:"=",text:F(n.base),note:"两边一致",seekSide:"base",seekOffsetMs:A(n.base,T)})}let n=p(k.events.console,S.events.console,c);for(let t of n.onlyBase)e.console.removed.push({kind:"removed",mark:"−",text:String(t.payload.message??""),note:"仅基准有",seekSide:"base",seekOffsetMs:A(t,T)});for(let t of n.onlyTarget)e.console.added.push({kind:"added",mark:"+",text:String(t.payload.message??""),note:"仅对照有",seekSide:"target",seekOffsetMs:A(t,O)});for(let t of n.pairs)e.console.same.push({kind:"same",mark:"=",text:String(t.base.payload.message??""),note:"两边一致",seekSide:"base",seekOffsetMs:A(t.base,T)});let r=p(k.events.exceptions,S.events.exceptions,u);for(let t of r.onlyBase)e.exceptions.removed.push({kind:"removed",mark:"−",text:String(t.payload.message??""),note:"仅基准有",seekSide:"base",seekOffsetMs:A(t,T)});for(let t of r.onlyTarget)e.exceptions.added.push({kind:"added",mark:"+",text:String(t.payload.message??""),note:"仅对照有",seekSide:"target",seekOffsetMs:A(t,O)});for(let t of r.pairs)e.exceptions.same.push({kind:"same",mark:"=",text:String(t.base.payload.message??""),note:"两边一致",seekSide:"base",seekOffsetMs:A(t.base,T)});return e},[k,S,T,O]),H=(0,s.useMemo)(()=>{let e=0,t=0,n=0;for(let r of["network","console","exceptions"])e+=E[r].added.length,t+=E[r].removed.length,n+=E[r].changed.length;return{added:e,removed:t,changed:n}},[E]),[L,q]=(0,s.useState)(!0);if(l||a){let e=l?`基准录制事件加载失败:${l}`:`对照录制事件加载失败:${a}`;return r?(0,o.jsx)(o.Fragment,{children:r(e,()=>d?.())}):(0,o.jsxs)("div",{style:{color:"#cf1322",background:"#fff2f0",borderRadius:8,padding:16},children:[e,d&&(0,o.jsx)("button",{onClick:d,style:{marginLeft:12,padding:"2px 10px",borderRadius:4,border:"1px solid #cf1322",background:"#fff",color:"#cf1322",cursor:"pointer"},children:"重试"})]})}let D=0===H.added&&0===H.removed&&0===H.changed,V=(e,t,r,l)=>(0,o.jsxs)("div",{style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:8},children:[(0,o.jsxs)("div",{style:{fontSize:13,display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"},children:[(0,o.jsx)("span",{style:{fontSize:11,padding:"1px 7px",borderRadius:4,background:l?"#dbeafe":"#f3f4f6",color:l?"#2563eb":"#6b7280"},children:l?"基准(较短)":"对照"}),(0,o.jsx)("b",{children:e.meta.title||e.meta.sessionId}),(0,o.jsx)("span",{style:{color:"#9ca3af"},children:function(e){if(null==e||!Number.isFinite(e)||e<0)return"-";let t=Math.floor(e/1e3),n=t%60,r=Math.floor(t/60)%60,l=Math.floor(t/3600),s=e=>e.toString().padStart(2,"0");return l>0?`${l} 时 ${s(r)} 分`:r>0?`${r} 分 ${s(n)} 秒`:`${n} 秒`}(e.meta.duration)})]}),(0,o.jsx)("div",{style:{background:"#fff",borderRadius:8,padding:8},children:(0,o.jsx)(i,{events:e.events.rrweb,height:n,playerRef:r})})]});return(0,o.jsxs)("div",{style:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:12},children:[(0,o.jsxs)("div",{style:{background:"#fff",borderRadius:8,padding:"8px 14px",fontSize:13,display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"},children:[(0,o.jsxs)("span",{style:{color:"#6b7280"},children:["基准:",(0,o.jsx)("b",{style:{color:"#111827"},children:k.meta.title||k.meta.sessionId})]}),(0,o.jsx)("button",{"aria-label":"互换基准与对照",title:"互换基准与对照",onClick:()=>{m(e=>!e),h?.()},style:{border:"1px solid #d1d5db",background:"#fff",borderRadius:4,cursor:"pointer",fontSize:13,padding:"1px 8px",color:"#374151"},children:"⇄"}),(0,o.jsxs)("span",{style:{color:"#6b7280"},children:["对照:",(0,o.jsx)("b",{style:{color:"#111827"},children:S.meta.title||S.meta.sessionId})]}),(0,o.jsx)("span",{style:{color:"#9ca3af",fontSize:12,flexBasis:"100%"},children:"以较短录制为基准同步播放,基准播放到头两侧同停。"}),C&&R&&(0,o.jsx)("button",{onClick:()=>z.current?.play(),style:{padding:"2px 10px",borderRadius:4,border:"1px solid #2563eb",background:"#eff6ff",color:"#2563eb",cursor:"pointer",fontSize:12},children:I?"对照继续单独播放":"基准继续单独播放"})]}),(0,o.jsxs)("div",{style:{display:"flex",gap:16,alignItems:"flex-start"},children:[V(k,"base",y,w),V(S,"target",b,!w)]}),(0,o.jsxs)("div",{style:{background:"#fff",borderRadius:8,padding:"10px 14px"},children:[(0,o.jsxs)("div",{style:{display:"flex",alignItems:"center",gap:12,flexWrap:"wrap",marginBottom:8},children:[(0,o.jsxs)("span",{style:{fontSize:13,fontWeight:600},children:["差异总览: 新增 ",H.added," \xb7 消失 ",H.removed," \xb7 变化 ",H.changed]}),(0,o.jsxs)("label",{style:{fontSize:12,color:"#6b7280",display:"flex",alignItems:"center",gap:4,cursor:"pointer"},children:[(0,o.jsx)("input",{type:"checkbox",checked:L,onChange:e=>q(e.target.checked)}),"只看差异"]})]}),D?(0,o.jsx)("div",{style:{padding:"16px 0",textAlign:"center",fontSize:12,color:"#9ca3af"},children:"两次录制的事件完全一致"}):["network","console","exceptions"].map(e=>{let t=E[e],n=L?[...t.added,...t.removed,...t.changed]:[...t.added,...t.removed,...t.changed,...t.same];return 0===n.length?null:(0,o.jsxs)("div",{style:{marginBottom:8},children:[(0,o.jsx)("div",{style:{fontSize:12,fontWeight:600,color:"#374151",marginBottom:4},children:"network"===e?"网络请求":"console"===e?"控制台":"页面异常"}),n.map((t,n)=>{let r=P[t.kind],l=null!=t.seekOffsetMs,s=()=>{let e="base"===t.seekSide?y:b;e.current?.seekTo?.(t.seekOffsetMs),x?.(t.seekSide,t.seekOffsetMs)};return(0,o.jsxs)("div",{onClick:()=>{l&&s()},title:l?"点击跳转到对应侧这一刻":void 0,style:{display:"flex",alignItems:"center",gap:8,padding:"3px 8px",fontSize:12,borderRadius:4,marginBottom:2,cursor:l?"pointer":"default"},children:[(0,o.jsx)("span",{style:{flexShrink:0,width:18,textAlign:"center",fontFamily:"monospace",fontWeight:700,borderRadius:3,color:r.color,background:r.bg},children:t.mark}),(0,o.jsx)("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"network"===e?void 0:"monospace"},children:t.text}),(0,o.jsx)("span",{style:{flexShrink:0,fontSize:11,color:"#9ca3af"},children:t.note})]},n)})]},e)})]})]})}}}]);