@lytjs/devtools 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +619 -0
- package/dist/index.mjs +619 -0
- package/package.json +41 -0
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,619 @@
|
|
|
1
|
+
"use strict";var pe=Object.defineProperty;var Me=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var Le=Object.prototype.hasOwnProperty;var Pe=(s,e)=>{for(var t in e)pe(s,t,{get:e[t],enumerable:!0})},De=(s,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of ke(e))!Le.call(s,r)&&r!==t&&pe(s,r,{get:()=>e[r],enumerable:!(n=Me(e,r))||n.enumerable});return s};var He=s=>De(pe({},"__esModule",{value:!0}),s);var it={};Pe(it,{BatchAnalyzer:()=>ie,ComponentProfiler:()=>A,ComponentTreeInspector:()=>I,DevTools:()=>ae,DevToolsPanel:()=>D,EventPanel:()=>te,EventTracker:()=>z,MemoryTracker:()=>oe,PerfPanel:()=>ee,PerformanceCollector:()=>B,RenderTracker:()=>se,RoutePanel:()=>Z,RouterPanel:()=>ne,StateInspector:()=>N,TimeTravelDebugger:()=>$,VirtualComponentTree:()=>re,clearRecords:()=>G,connectToApp:()=>_,createDevTools:()=>st,disconnect:()=>Q,getAllComponents:()=>k,getChildComponents:()=>j,getComponentById:()=>H,getComponentCount:()=>Se,getComponentEvents:()=>Ce,getComponentStateChanges:()=>V,getEventRecords:()=>J,getRootComponent:()=>q,getSelectedComponent:()=>Y,getSelectedComponentId:()=>L,getStateChangeRecords:()=>Te,isAppConnected:()=>Ee,refreshComponentTree:()=>X,selectComponent:()=>W,setComponentState:()=>K});module.exports=He(it);var Ie=`
|
|
2
|
+
/* === Lyt DevTools \u9762\u677F\u57FA\u7840\u6837\u5F0F === */
|
|
3
|
+
.lyt-devtools-panel {
|
|
4
|
+
position: fixed;
|
|
5
|
+
z-index: 999999;
|
|
6
|
+
background: #1e1e2e;
|
|
7
|
+
border: 1px solid #313244;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
10
|
+
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
11
|
+
font-size: 12px;
|
|
12
|
+
color: #cdd6f4;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
user-select: none;
|
|
17
|
+
transition: opacity 0.2s ease;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* === \u6807\u9898\u680F === */
|
|
21
|
+
.lyt-devtools-header {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
padding: 0 12px;
|
|
26
|
+
height: 36px;
|
|
27
|
+
min-height: 36px;
|
|
28
|
+
background: #181825;
|
|
29
|
+
border-bottom: 1px solid #313244;
|
|
30
|
+
cursor: move;
|
|
31
|
+
border-radius: 8px 8px 0 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.lyt-devtools-title {
|
|
35
|
+
font-size: 13px;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
color: #cba6f7;
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
gap: 6px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.lyt-devtools-title-icon {
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.lyt-devtools-header-actions {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
gap: 4px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.lyt-devtools-btn {
|
|
54
|
+
background: transparent;
|
|
55
|
+
border: 1px solid transparent;
|
|
56
|
+
color: #a6adc8;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
padding: 2px 6px;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
font-size: 14px;
|
|
61
|
+
line-height: 1;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
width: 24px;
|
|
66
|
+
height: 24px;
|
|
67
|
+
transition: all 0.15s ease;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.lyt-devtools-btn:hover {
|
|
71
|
+
background: #313244;
|
|
72
|
+
color: #cdd6f4;
|
|
73
|
+
border-color: #45475a;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.lyt-devtools-btn-close:hover {
|
|
77
|
+
background: #f38ba8;
|
|
78
|
+
color: #1e1e2e;
|
|
79
|
+
border-color: #f38ba8;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* === \u6807\u7B7E\u680F === */
|
|
83
|
+
.lyt-devtools-tabs {
|
|
84
|
+
display: flex;
|
|
85
|
+
background: #181825;
|
|
86
|
+
border-bottom: 1px solid #313244;
|
|
87
|
+
padding: 0 8px;
|
|
88
|
+
min-height: 32px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.lyt-devtools-tab {
|
|
92
|
+
padding: 6px 12px;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
color: #a6adc8;
|
|
95
|
+
border-bottom: 2px solid transparent;
|
|
96
|
+
transition: all 0.15s ease;
|
|
97
|
+
font-size: 12px;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
gap: 4px;
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.lyt-devtools-tab:hover {
|
|
105
|
+
color: #cdd6f4;
|
|
106
|
+
background: #1e1e2e;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.lyt-devtools-tab.active {
|
|
110
|
+
color: #cba6f7;
|
|
111
|
+
border-bottom-color: #cba6f7;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.lyt-devtools-tab-icon {
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* === \u5185\u5BB9\u533A\u57DF === */
|
|
119
|
+
.lyt-devtools-content {
|
|
120
|
+
flex: 1;
|
|
121
|
+
overflow: auto;
|
|
122
|
+
padding: 8px;
|
|
123
|
+
background: #1e1e2e;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.lyt-devtools-content::-webkit-scrollbar {
|
|
127
|
+
width: 6px;
|
|
128
|
+
height: 6px;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.lyt-devtools-content::-webkit-scrollbar-track {
|
|
132
|
+
background: transparent;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.lyt-devtools-content::-webkit-scrollbar-thumb {
|
|
136
|
+
background: #45475a;
|
|
137
|
+
border-radius: 3px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.lyt-devtools-content::-webkit-scrollbar-thumb:hover {
|
|
141
|
+
background: #585b70;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* === \u5E95\u90E8\u72B6\u6001\u680F === */
|
|
145
|
+
.lyt-devtools-statusbar {
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
justify-content: space-between;
|
|
149
|
+
padding: 0 12px;
|
|
150
|
+
height: 24px;
|
|
151
|
+
min-height: 24px;
|
|
152
|
+
background: #181825;
|
|
153
|
+
border-top: 1px solid #313244;
|
|
154
|
+
font-size: 11px;
|
|
155
|
+
color: #6c7086;
|
|
156
|
+
border-radius: 0 0 8px 8px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.lyt-devtools-status-left {
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
gap: 8px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.lyt-devtools-status-right {
|
|
166
|
+
display: flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
gap: 8px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.lyt-devtools-status-dot {
|
|
172
|
+
width: 6px;
|
|
173
|
+
height: 6px;
|
|
174
|
+
border-radius: 50%;
|
|
175
|
+
background: #a6e3a1;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.lyt-devtools-status-dot.disconnected {
|
|
179
|
+
background: #f38ba8;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* === \u8C03\u6574\u5927\u5C0F\u624B\u67C4 === */
|
|
183
|
+
.lyt-devtools-resize-handle {
|
|
184
|
+
position: absolute;
|
|
185
|
+
bottom: 0;
|
|
186
|
+
right: 0;
|
|
187
|
+
width: 16px;
|
|
188
|
+
height: 16px;
|
|
189
|
+
cursor: nwse-resize;
|
|
190
|
+
z-index: 10;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.lyt-devtools-resize-handle::after {
|
|
194
|
+
content: '';
|
|
195
|
+
position: absolute;
|
|
196
|
+
bottom: 3px;
|
|
197
|
+
right: 3px;
|
|
198
|
+
width: 8px;
|
|
199
|
+
height: 8px;
|
|
200
|
+
border-right: 2px solid #585b70;
|
|
201
|
+
border-bottom: 2px solid #585b70;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* === \u6298\u53E0\u72B6\u6001 === */
|
|
205
|
+
.lyt-devtools-panel.collapsed .lyt-devtools-tabs,
|
|
206
|
+
.lyt-devtools-panel.collapsed .lyt-devtools-content,
|
|
207
|
+
.lyt-devtools-panel.collapsed .lyt-devtools-statusbar,
|
|
208
|
+
.lyt-devtools-panel.collapsed .lyt-devtools-resize-handle {
|
|
209
|
+
display: none;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.lyt-devtools-panel.collapsed {
|
|
213
|
+
width: auto !important;
|
|
214
|
+
height: auto !important;
|
|
215
|
+
border-radius: 8px;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* === \u901A\u7528\u7EC4\u4EF6\u6837\u5F0F === */
|
|
219
|
+
.lyt-devtools-search {
|
|
220
|
+
width: 100%;
|
|
221
|
+
padding: 6px 8px;
|
|
222
|
+
background: #181825;
|
|
223
|
+
border: 1px solid #313244;
|
|
224
|
+
border-radius: 4px;
|
|
225
|
+
color: #cdd6f4;
|
|
226
|
+
font-size: 12px;
|
|
227
|
+
font-family: inherit;
|
|
228
|
+
outline: none;
|
|
229
|
+
box-sizing: border-box;
|
|
230
|
+
margin-bottom: 8px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.lyt-devtools-search:focus {
|
|
234
|
+
border-color: #cba6f7;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.lyt-devtools-search::placeholder {
|
|
238
|
+
color: #585b70;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.lyt-devtools-empty {
|
|
242
|
+
text-align: center;
|
|
243
|
+
color: #585b70;
|
|
244
|
+
padding: 24px;
|
|
245
|
+
font-style: italic;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.lyt-devtools-badge {
|
|
249
|
+
display: inline-block;
|
|
250
|
+
padding: 1px 5px;
|
|
251
|
+
border-radius: 3px;
|
|
252
|
+
font-size: 10px;
|
|
253
|
+
font-weight: 600;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.lyt-devtools-badge-blue {
|
|
257
|
+
background: #89b4fa;
|
|
258
|
+
color: #1e1e2e;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.lyt-devtools-badge-green {
|
|
262
|
+
background: #a6e3a1;
|
|
263
|
+
color: #1e1e2e;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.lyt-devtools-badge-yellow {
|
|
267
|
+
background: #f9e2af;
|
|
268
|
+
color: #1e1e2e;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.lyt-devtools-badge-red {
|
|
272
|
+
background: #f38ba8;
|
|
273
|
+
color: #1e1e2e;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* === \u9AD8\u4EAE\u52A8\u753B === */
|
|
277
|
+
@keyframes lyt-devtools-highlight {
|
|
278
|
+
0% { background-color: rgba(203, 166, 247, 0.3); }
|
|
279
|
+
100% { background-color: transparent; }
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.lyt-devtools-highlight {
|
|
283
|
+
animation: lyt-devtools-highlight 1s ease-out;
|
|
284
|
+
}
|
|
285
|
+
`,Ne=[{id:"components",label:"\u7EC4\u4EF6\u6811",icon:"\u{1F333}"},{id:"state",label:"\u72B6\u6001",icon:"\u{1F4CA}"},{id:"events",label:"\u4E8B\u4EF6",icon:"\u26A1"},{id:"router",label:"\u8DEF\u7531",icon:"\u{1F517}"}],D=class{constructor(e){this.activeTab="components";this.tabRenderers=new Map;this._visible=!0;this._collapsed=!1;this.highlightOverlay=null;this.onWindowResize=()=>{let e=this.panelEl.getBoundingClientRect(),t=window.innerWidth-100,n=window.innerHeight-36;e.left>t&&(this.panelEl.style.left=`${t}px`),e.top>n&&(this.panelEl.style.top=`${n}px`)};var t,n,r,o,i,l,d,p;this.config={width:(t=e==null?void 0:e.width)!=null?t:420,height:(n=e==null?void 0:e.height)!=null?n:560,x:(o=e==null?void 0:e.x)!=null?o:window.innerWidth-((r=e==null?void 0:e.width)!=null?r:420)-20,y:(i=e==null?void 0:e.y)!=null?i:60,minWidth:(l=e==null?void 0:e.minWidth)!=null?l:320,minHeight:(d=e==null?void 0:e.minHeight)!=null?d:200,title:(p=e==null?void 0:e.title)!=null?p:"Lyt DevTools"},this.dragState={isDragging:!1,startX:0,startY:0,startLeft:0,startTop:0},this.resizeState={isResizing:!1,startX:0,startY:0,startWidth:0,startHeight:0},this.styleEl=document.createElement("style"),this.styleEl.textContent=Ie,document.head.appendChild(this.styleEl),this.panelEl=this.createPanelElement(),this.headerEl=this.panelEl.querySelector(".lyt-devtools-header"),this.tabsEl=this.panelEl.querySelector(".lyt-devtools-tabs"),this.contentEl=this.panelEl.querySelector(".lyt-devtools-content"),this.statusbarEl=this.panelEl.querySelector(".lyt-devtools-statusbar"),this.statusLeftEl=this.statusbarEl.querySelector(".lyt-devtools-status-left"),this.statusRightEl=this.statusbarEl.querySelector(".lyt-devtools-status-right"),document.body.appendChild(this.panelEl),this.bindDragEvents(),this.bindResizeEvents(),this.bindKeyboardEvents(),window.addEventListener("resize",this.onWindowResize)}createPanelElement(){let e=document.createElement("div");e.className="lyt-devtools-panel",e.style.width=`${this.config.width}px`,e.style.height=`${this.config.height}px`,e.style.left=`${this.config.x}px`,e.style.top=`${this.config.y}px`;let t=document.createElement("div");t.className="lyt-devtools-header";let n=document.createElement("span");n.className="lyt-devtools-title",n.innerHTML=`<span class="lyt-devtools-title-icon">\u{1F50D}</span>${this.config.title}`;let r=document.createElement("div");r.className="lyt-devtools-header-actions";let o=document.createElement("button");o.className="lyt-devtools-btn",o.textContent="\u2014",o.title="\u6298\u53E0/\u5C55\u5F00",o.addEventListener("click",h=>{h.stopPropagation(),this.toggleCollapse()});let i=document.createElement("button");i.className="lyt-devtools-btn lyt-devtools-btn-close",i.textContent="\u2715",i.title="\u5173\u95ED\u9762\u677F",i.addEventListener("click",h=>{h.stopPropagation(),this.hide()}),r.appendChild(o),r.appendChild(i),t.appendChild(n),t.appendChild(r);let l=document.createElement("div");l.className="lyt-devtools-tabs";for(let h of Ne){let f=document.createElement("div");f.className=`lyt-devtools-tab${h.id===this.activeTab?" active":""}`,f.dataset.tab=h.id,f.innerHTML=`<span class="lyt-devtools-tab-icon">${h.icon}</span>${h.label}`,f.addEventListener("click",()=>this.switchTab(h.id)),l.appendChild(f)}let d=document.createElement("div");d.className="lyt-devtools-content";let p=document.createElement("div");p.className="lyt-devtools-statusbar";let a=document.createElement("span");a.className="lyt-devtools-status-left",a.innerHTML='<span class="lyt-devtools-status-dot"></span><span>\u5C31\u7EEA</span>';let c=document.createElement("span");c.className="lyt-devtools-status-right",c.textContent="v0.0.1",p.appendChild(a),p.appendChild(c);let u=document.createElement("div");return u.className="lyt-devtools-resize-handle",e.appendChild(t),e.appendChild(l),e.appendChild(d),e.appendChild(p),e.appendChild(u),e}switchTab(e){if(this.activeTab===e)return;this.activeTab=e,this.tabsEl.querySelectorAll(".lyt-devtools-tab").forEach(n=>{n.classList.toggle("active",n.dataset.tab===e)}),this.renderContent()}registerTabRenderer(e,t){this.tabRenderers.set(e,t),this.activeTab===e&&this.renderContent()}renderContent(){this.contentEl.innerHTML="";let e=this.tabRenderers.get(this.activeTab);e?e(this.contentEl):this.contentEl.innerHTML='<div class="lyt-devtools-empty">\u6682\u65E0\u5185\u5BB9</div>'}getActiveTab(){return this.activeTab}getContentElement(){return this.contentEl}show(){this._visible=!0,this.panelEl.style.display="flex"}hide(){this._visible=!1,this.panelEl.style.display="none"}toggle(){this._visible?this.hide():this.show()}isVisible(){return this._visible}toggleCollapse(){this._collapsed=!this._collapsed,this.panelEl.classList.toggle("collapsed",this._collapsed)}isCollapsed(){return this._collapsed}bindDragEvents(){this.headerEl.addEventListener("mousedown",e=>{e.target.closest(".lyt-devtools-btn")||(this.dragState.isDragging=!0,this.dragState.startX=e.clientX,this.dragState.startY=e.clientY,this.dragState.startLeft=this.panelEl.offsetLeft,this.dragState.startTop=this.panelEl.offsetTop,e.preventDefault())}),document.addEventListener("mousemove",e=>{if(!this.dragState.isDragging)return;let t=e.clientX-this.dragState.startX,n=e.clientY-this.dragState.startY,r=this.dragState.startLeft+t,o=this.dragState.startTop+n;r=Math.max(0,Math.min(r,window.innerWidth-100)),o=Math.max(0,Math.min(o,window.innerHeight-36)),this.panelEl.style.left=`${r}px`,this.panelEl.style.top=`${o}px`}),document.addEventListener("mouseup",()=>{this.dragState.isDragging=!1})}bindResizeEvents(){this.panelEl.querySelector(".lyt-devtools-resize-handle").addEventListener("mousedown",t=>{this.resizeState.isResizing=!0,this.resizeState.startX=t.clientX,this.resizeState.startY=t.clientY,this.resizeState.startWidth=this.panelEl.offsetWidth,this.resizeState.startHeight=this.panelEl.offsetHeight,t.preventDefault(),t.stopPropagation()}),document.addEventListener("mousemove",t=>{if(!this.resizeState.isResizing)return;let n=t.clientX-this.resizeState.startX,r=t.clientY-this.resizeState.startY,o=Math.max(this.config.minWidth,this.resizeState.startWidth+n),i=Math.max(this.config.minHeight,this.resizeState.startHeight+r);this.panelEl.style.width=`${o}px`,this.panelEl.style.height=`${i}px`}),document.addEventListener("mouseup",()=>{this.resizeState.isResizing=!1})}bindKeyboardEvents(){document.addEventListener("keydown",e=>{e.ctrlKey&&e.shiftKey&&e.key==="D"&&(e.preventDefault(),this.toggle()),e.key==="Escape"&&this._visible&&this.hide()})}setStatusLeft(e){this.statusLeftEl.innerHTML=e}setStatusRight(e){this.statusRightEl.textContent=e}setConnected(e){let t=this.statusLeftEl.querySelector(".lyt-devtools-status-dot");t&&t.classList.toggle("disconnected",!e)}highlightElement(e){if(this.clearHighlight(),!e)return;this.highlightOverlay=document.createElement("div"),this.highlightOverlay.style.cssText=`
|
|
286
|
+
position: fixed;
|
|
287
|
+
z-index: 999998;
|
|
288
|
+
pointer-events: none;
|
|
289
|
+
border: 2px solid #cba6f7;
|
|
290
|
+
background: rgba(203, 166, 247, 0.1);
|
|
291
|
+
border-radius: 2px;
|
|
292
|
+
transition: all 0.15s ease;
|
|
293
|
+
`;let t=e.getBoundingClientRect();this.highlightOverlay.style.left=`${t.left}px`,this.highlightOverlay.style.top=`${t.top}px`,this.highlightOverlay.style.width=`${t.width}px`,this.highlightOverlay.style.height=`${t.height}px`,document.body.appendChild(this.highlightOverlay)}clearHighlight(){this.highlightOverlay&&(this.highlightOverlay.remove(),this.highlightOverlay=null)}destroy(){this.styleEl.remove(),this.panelEl.remove(),this.clearHighlight(),window.removeEventListener("resize",this.onWindowResize),this.tabRenderers.clear()}};var E=new Map,M=[],w=[],xe=0,F=null,C={},U=!1;function ze(){return`comp_${++xe}`}function $e(){return`evt_${++xe}`}function ye(s){var t;if(!s)return"Unknown";let e=s.type||s.options;return e?e.name?e.name:e.render&&e.render.name?e.render.name:e.setup&&e.setup.name?e.setup.name:e._isComponentDefine&&((t=e.options)!=null&&t.name)?e.options.name:"Anonymous":"Anonymous"}function S(s){if(s===null||typeof s!="object")return s;if(Array.isArray(s))return s.map(t=>S(t));let e={};for(let t of Object.keys(s))e[t]=S(s[t]);return e}function Be(s,e){return s===e?!1:typeof s!=typeof e?!0:s===null||e===null?s!==e:typeof s=="object"?JSON.stringify(s)!==JSON.stringify(e):s!==e}function Ae(s,e){let t=e.split("."),n=s;for(let r of t){if(n==null||typeof n!="object")return;n=n[r]}return n}function Fe(s,e,t){let n=e.split("."),r=s;for(let o=0;o<n.length-1;o++)(r[n[o]]==null||typeof r[n[o]]!="object")&&(r[n[o]]={}),r=r[n[o]];r[n[n.length-1]]=t}function _(s,e){if(U){console.warn("[Lyt DevTools] \u5DF2\u7ECF\u8FDE\u63A5\u5230\u5E94\u7528\uFF0C\u4E0D\u80FD\u91CD\u590D\u8FDE\u63A5\u3002");return}e&&Object.assign(C,e),U=!0,Ue(s),s._instance&&(O(s._instance,null),ue()),console.log("[Lyt DevTools] \u5DF2\u8FDE\u63A5\u5230\u5E94\u7528\u5B9E\u4F8B\u3002")}function Ue(s){let e=s.mount.bind(s);s.mount=function(t){let n=e(t);return s._instance&&(O(s._instance,null),ue()),n}}function O(s,e){var o,i,l,d,p,a,c,u;if(!s)return;let t=be(s),n=!t;if(n){let h=ze();t={id:h,name:ye(s),parentId:e,childIds:[],props:{},state:{},computed:{},isMounted:(o=s.isMounted)!=null?o:!1,isUnmounted:(i=s.isUnmounted)!=null?i:!1,el:(l=s.el)!=null?l:null,renderTime:0,lastUpdateTime:Date.now(),instance:s},E.set(h,t)}else t.parentId=e,t.name=ye(s),t.isMounted=(d=s.isMounted)!=null?d:!1,t.isUnmounted=(p=s.isUnmounted)!=null?p:!1,t.el=(a=s.el)!=null?a:null,t.lastUpdateTime=Date.now();s.props&&(t.props=S(s.props)),s.state&&(t.state=S(s.state)),s.computedCache&&(t.computed=S(s.computedCache)),n&&s.state&&typeof s.state=="object"&&_e(t.id,s),n&&s.emit&&typeof s.emit=="function"&&Oe(t.id,s),n?(c=C.onComponentCreated)==null||c.call(C,t):(u=C.onComponentUpdated)==null||u.call(C,t);let r=s.subTree;r&&ve(r,t.id)}function ve(s,e){if(s){if(s.component){O(s.component,e);let t=E.get(e);if(t&&!t.childIds.includes(s.component.id||s.component._id)){let n=qe(s.component);n&&!t.childIds.includes(n)&&t.childIds.push(n)}return}if(s.children&&Array.isArray(s.children))for(let t of s.children)t&&typeof t=="object"&&ve(t,e)}}function _e(s,e){if(!e.state||typeof e.state!="object")return;let t=e.state,n=E.get(s);if(n&&!t.__devtools_intercepted__)try{Object.defineProperty(t,"__devtools_intercepted__",{value:!0,enumerable:!1,configurable:!1});let r=new Proxy(t,{set(o,i,l){var a;let d=o[i],p=Reflect.set(o,i,l);if(Be(d,l)){let c=String(i),u={componentId:s,componentName:n.name,path:c,oldValue:S(d),newValue:S(l),timestamp:Date.now()};w.push(u),w.length>1e3&&w.splice(0,w.length-1e3),n.state=S(o),n.lastUpdateTime=Date.now(),(a=C.onStateChanged)==null||a.call(C,u)}return p}});Object.defineProperty(e,"__devtools_state_proxy__",{value:r,enumerable:!1,configurable:!0})}catch(r){console.warn("[Lyt DevTools] \u72B6\u6001\u62E6\u622A\u5931\u8D25:",r)}}function Oe(s,e){if(!e.emit||typeof e.emit!="function")return;let t=e.emit,n=E.get(s);n&&(e.emit=function(r,...o){var l;let i={id:$e(),name:r,timestamp:Date.now(),args:S(o),componentId:s,componentName:n.name};return M.push(i),M.length>500&&M.splice(0,M.length-500),(l=C.onEventEmitted)==null||l.call(C,i),t.call(this,r,...o)})}function ue(){typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("lyt-devtools-update"))}function be(s){for(let e of E.values())if(e.instance===s)return e;return null}function qe(s){let e=be(s);return e?e.id:null}function k(){return Array.from(E.values())}function q(){for(let s of E.values())if(s.parentId===null)return s;return null}function H(s){var e;return(e=E.get(s))!=null?e:null}function j(s){let e=E.get(s);return e?e.childIds.map(t=>E.get(t)).filter(Boolean):[]}function J(){return[...M]}function Te(){return[...w]}function V(s){return w.filter(e=>e.componentId===s)}function Ce(s){return M.filter(e=>e.componentId===s)}function W(s){F=s}function Y(){var s;return F&&(s=E.get(F))!=null?s:null}function L(){return F}function K(s,e,t){var l;let n=E.get(s);if(!n||!n.instance)return!1;let r=n.instance.state;if(!r||typeof r!="object")return!1;let o=Ae(r,e);Fe(r,e,t);let i={componentId:s,componentName:n.name,path:e,oldValue:S(o),newValue:S(t),timestamp:Date.now()};return w.push(i),n.state=S(r),n.lastUpdateTime=Date.now(),(l=C.onStateChanged)==null||l.call(C,i),!0}function X(s){E.clear(),s._instance&&(O(s._instance,null),ue())}function G(){M.length=0,w.length=0}function Q(){E.clear(),M.length=0,w.length=0,F=null,U=!1,console.log("[Lyt DevTools] \u5DF2\u65AD\u5F00\u4E0E\u5E94\u7528\u7684\u8FDE\u63A5\u3002")}function Ee(){return U}function Se(){return E.size}var I=class{constructor(e,t){this.searchKeyword="";this.expandedNodes=new Set;this.container=null;this.updateTimer=null;this.onUpdate=()=>{this.updateTimer&&clearTimeout(this.updateTimer),this.updateTimer=setTimeout(()=>{this.renderTree()},100)};this.panel=e,this.onSelect=t||(()=>{});let n=q();n&&this.expandedNodes.add(n.id),typeof window!="undefined"&&window.addEventListener("lyt-devtools-update",this.onUpdate)}render(e){this.container=e,this.renderTree()}renderTree(){if(!this.container)return;this.container.innerHTML="";let e=document.createElement("input");e.type="text",e.className="lyt-devtools-search",e.placeholder="\u641C\u7D22\u7EC4\u4EF6...",e.value=this.searchKeyword,e.addEventListener("input",r=>{this.searchKeyword=r.target.value,this.renderTree()}),this.container.appendChild(e);let t=k();if(t.length===0){let r=document.createElement("div");r.className="lyt-devtools-empty",r.textContent="\u6682\u65E0\u7EC4\u4EF6\uFF0C\u8BF7\u786E\u4FDD\u5E94\u7528\u5DF2\u6302\u8F7D\u3002",this.container.appendChild(r);return}let n=this.buildTree();for(let r of n){let o=this.renderTreeNode(r);o&&this.container.appendChild(o)}this.panel.setStatusLeft(`<span class="lyt-devtools-status-dot"></span><span>${t.length} \u4E2A\u7EC4\u4EF6</span>`)}buildTree(){let e=k(),t=new Map,n=[];for(let r of e){if(this.searchKeyword){let i=this.searchKeyword.toLowerCase(),l=r.name.toLowerCase().includes(i),d=r.id.toLowerCase().includes(i);if(!l&&!d)continue}let o={info:r,children:[],depth:0,expanded:this.expandedNodes.has(r.id)};t.set(r.id,o)}for(let r of t.values()){let o=r.info.parentId;if(o&&t.has(o)){let i=t.get(o);i.children.push(r),r.depth=i.depth+1}else n.push(r)}return n}renderTreeNode(e){let{info:t,depth:n,expanded:r}=e,o=L(),i=t.id===o,l=document.createElement("div");l.className="lyt-tree-node",l.style.cssText=`
|
|
294
|
+
display: flex;
|
|
295
|
+
align-items: center;
|
|
296
|
+
padding: 3px 8px;
|
|
297
|
+
cursor: pointer;
|
|
298
|
+
border-radius: 3px;
|
|
299
|
+
margin-bottom: 1px;
|
|
300
|
+
transition: background 0.1s ease;
|
|
301
|
+
${i?"background: rgba(203, 166, 247, 0.15); border-left: 2px solid #cba6f7;":""}
|
|
302
|
+
`,l.addEventListener("mouseenter",()=>{i||(l.style.background="rgba(69, 71, 90, 0.5)")}),l.addEventListener("mouseleave",()=>{i||(l.style.background="")});let d=document.createElement("span");d.style.cssText=`display: inline-block; width: ${n*16}px; flex-shrink: 0;`,l.appendChild(d);let p=t.childIds.length>0,a=document.createElement("span");a.style.cssText=`
|
|
303
|
+
display: inline-flex;
|
|
304
|
+
align-items: center;
|
|
305
|
+
justify-content: center;
|
|
306
|
+
width: 16px;
|
|
307
|
+
height: 16px;
|
|
308
|
+
font-size: 10px;
|
|
309
|
+
color: #6c7086;
|
|
310
|
+
flex-shrink: 0;
|
|
311
|
+
transition: transform 0.15s ease;
|
|
312
|
+
${p?"":"visibility: hidden;"}
|
|
313
|
+
${r?"transform: rotate(90deg);":""}
|
|
314
|
+
`,a.textContent="\u25B6",l.appendChild(a);let c=document.createElement("span");c.style.cssText=`
|
|
315
|
+
display: inline-flex;
|
|
316
|
+
align-items: center;
|
|
317
|
+
justify-content: center;
|
|
318
|
+
width: 16px;
|
|
319
|
+
height: 16px;
|
|
320
|
+
font-size: 12px;
|
|
321
|
+
margin-right: 4px;
|
|
322
|
+
flex-shrink: 0;
|
|
323
|
+
`,c.textContent=t.isUnmounted?"\u{1F480}":"\u{1F4E6}",l.appendChild(c);let u=document.createElement("span");u.style.cssText=`
|
|
324
|
+
flex: 1;
|
|
325
|
+
overflow: hidden;
|
|
326
|
+
text-overflow: ellipsis;
|
|
327
|
+
white-space: nowrap;
|
|
328
|
+
font-size: 12px;
|
|
329
|
+
color: ${i?"#cba6f7":"#cdd6f4"};
|
|
330
|
+
`,u.textContent=t.name,l.appendChild(u);let h=Object.keys(t.state).length;if(h>0){let m=document.createElement("span");m.className="lyt-devtools-badge lyt-devtools-badge-blue",m.textContent=`${h}`,m.title=`${h} \u4E2A\u72B6\u6001\u5C5E\u6027`,l.appendChild(m)}let f=Object.keys(t.computed).length;if(f>0){let m=document.createElement("span");m.className="lyt-devtools-badge lyt-devtools-badge-green",m.textContent=`C:${f}`,m.title=`${f} \u4E2A\u8BA1\u7B97\u5C5E\u6027`,m.style.marginLeft="3px",l.appendChild(m)}if(!t.isMounted&&!t.isUnmounted){let m=document.createElement("span");m.className="lyt-devtools-badge lyt-devtools-badge-yellow",m.textContent="\u672A\u6302\u8F7D",m.style.marginLeft="3px",l.appendChild(m)}else if(t.isUnmounted){let m=document.createElement("span");m.className="lyt-devtools-badge lyt-devtools-badge-red",m.textContent="\u5DF2\u5378\u8F7D",m.style.marginLeft="3px",l.appendChild(m)}if(l.addEventListener("click",m=>{m.stopPropagation(),p&&(this.expandedNodes.has(t.id)?this.expandedNodes.delete(t.id):this.expandedNodes.add(t.id)),W(t.id),this.onSelect(t.id),this.panel.highlightElement(t.el),this.renderTree()}),l.addEventListener("mouseenter",()=>{this.panel.highlightElement(t.el)}),l.addEventListener("mouseleave",()=>{var v;let m=L(),x=m?H(m):null;this.panel.highlightElement((v=x==null?void 0:x.el)!=null?v:null)}),r&&p){let m=j(t.id);for(let x of m){if(this.searchKeyword){let g=this.searchKeyword.toLowerCase(),b=x.name.toLowerCase().includes(g),T=x.id.toLowerCase().includes(g);if(!b&&!T)continue}let v={info:x,children:[],depth:n+1,expanded:this.expandedNodes.has(x.id)},y=this.renderTreeNode(v);y&&l.appendChild(y)}}return l}refresh(){this.renderTree()}destroy(){this.updateTimer&&clearTimeout(this.updateTimer),typeof window!="undefined"&&window.removeEventListener("lyt-devtools-update",this.onUpdate),this.container=null}};function je(s){return s===null?"null":s===void 0?"undefined":typeof s=="string"?"string":typeof s=="number"?"number":typeof s=="boolean"?"boolean":typeof s=="function"?"function":Array.isArray(s)?`Array[${s.length}]`:s instanceof Date?"Date":s instanceof RegExp?"RegExp":typeof s=="object"?"Object":typeof s}function he(s,e=80){if(s===null)return"null";if(s===void 0)return"undefined";if(typeof s=="string")return s.length>e?`"${s.slice(0,e)}..."`:`"${s}"`;if(typeof s=="function")return`fn(${s.name||"anonymous"})`;if(typeof s=="object")try{let t=JSON.stringify(s);return t.length>e?`${t.slice(0,e)}...`:t}catch(t){return"[Object]"}return String(s)}function we(s){return s!==null&&typeof s=="object"&&!(s instanceof Date)&&!(s instanceof RegExp)}var N=class{constructor(e){this.container=null;this.expandedPaths=new Set;this.changedPaths=new Map;this.highlightTimer=null;this.showHistory=!1;this.updateTimer=null;this.onUpdate=()=>{this.updateTimer&&clearTimeout(this.updateTimer),this.updateTimer=setTimeout(()=>{this.renderState()},150)};this.panel=e,typeof window!="undefined"&&window.addEventListener("lyt-devtools-update",this.onUpdate)}render(e){this.container=e,this.renderState()}renderState(){if(!this.container)return;this.container.innerHTML="";let e=Y();if(!e){let d=document.createElement("div");d.className="lyt-devtools-empty",d.textContent="\u8BF7\u5148\u5728\u7EC4\u4EF6\u6811\u4E2D\u9009\u62E9\u4E00\u4E2A\u7EC4\u4EF6\u3002",this.container.appendChild(d);return}let t=document.createElement("div");t.style.cssText=`
|
|
331
|
+
display: flex;
|
|
332
|
+
align-items: center;
|
|
333
|
+
justify-content: space-between;
|
|
334
|
+
padding: 6px 8px;
|
|
335
|
+
margin-bottom: 8px;
|
|
336
|
+
background: #181825;
|
|
337
|
+
border-radius: 4px;
|
|
338
|
+
border: 1px solid #313244;
|
|
339
|
+
`;let n=document.createElement("span");n.style.cssText="font-weight: 600; color: #cba6f7; font-size: 13px;",n.textContent=e.name;let r=document.createElement("button");r.style.cssText=`
|
|
340
|
+
background: ${this.showHistory?"#cba6f7":"transparent"};
|
|
341
|
+
color: ${this.showHistory?"#1e1e2e":"#a6adc8"};
|
|
342
|
+
border: 1px solid ${this.showHistory?"#cba6f7":"#313244"};
|
|
343
|
+
padding: 2px 8px;
|
|
344
|
+
border-radius: 3px;
|
|
345
|
+
cursor: pointer;
|
|
346
|
+
font-size: 11px;
|
|
347
|
+
font-family: inherit;
|
|
348
|
+
`,r.textContent="\u53D8\u5316\u5386\u53F2",r.addEventListener("click",()=>{this.showHistory=!this.showHistory,this.renderState()}),t.appendChild(n),t.appendChild(r),this.container.appendChild(t),this.showHistory?this.renderHistory(e):(this.renderCategory(container,"props",e.props,!0,!1,!1),this.renderCategory(container,"state",e.state,!1,!0,!1),this.renderCategory(container,"computed",e.computed,!1,!1,!0));let o=Object.keys(e.state).length,i=Object.keys(e.props).length,l=Object.keys(e.computed).length;this.panel.setStatusLeft(`<span class="lyt-devtools-status-dot"></span><span>${e.name}</span><span style="color: #585b70;">|</span><span>P:${i} S:${o} C:${l}</span>`)}renderCategory(e,t,n,r,o,i){let l=Object.keys(n);if(l.length===0)return;let d=document.createElement("div");d.style.cssText=`
|
|
349
|
+
display: flex;
|
|
350
|
+
align-items: center;
|
|
351
|
+
padding: 4px 8px;
|
|
352
|
+
margin-top: 6px;
|
|
353
|
+
margin-bottom: 2px;
|
|
354
|
+
font-size: 11px;
|
|
355
|
+
font-weight: 600;
|
|
356
|
+
color: #6c7086;
|
|
357
|
+
text-transform: uppercase;
|
|
358
|
+
letter-spacing: 0.5px;
|
|
359
|
+
`;let p={props:"Props",state:"State",computed:"Computed"},a={props:"#89b4fa",state:"#a6e3a1",computed:"#f9e2af"};d.innerHTML=`
|
|
360
|
+
<span style="color: ${a[t]}; margin-right: 6px;">\u25CF</span>
|
|
361
|
+
${p[t]}
|
|
362
|
+
<span style="color: #585b70; margin-left: 4px;">(${l.length})</span>
|
|
363
|
+
${r?'<span style="color: #585b70; margin-left: 6px; font-size: 10px;">[\u53EA\u8BFB]</span>':""}
|
|
364
|
+
${o?'<span style="color: #585b70; margin-left: 6px; font-size: 10px;">[\u54CD\u5E94\u5F0F]</span>':""}
|
|
365
|
+
${i?'<span style="color: #585b70; margin-left: 6px; font-size: 10px;">[\u7F13\u5B58]</span>':""}
|
|
366
|
+
`,e.appendChild(d);for(let c of l){let u=n[c],h=`${t}.${c}`,f=this.changedPaths.has(h),m=we(u);this.renderProperty(e,{key:c,value:u,category:t,isReactive:o,isCached:i,isReadonly:r},h,0,m)}}renderProperty(e,t,n,r,o){let i=document.createElement("div");i.style.cssText=`
|
|
367
|
+
display: flex;
|
|
368
|
+
align-items: flex-start;
|
|
369
|
+
padding: 2px 8px;
|
|
370
|
+
border-radius: 2px;
|
|
371
|
+
cursor: default;
|
|
372
|
+
transition: background 0.1s ease;
|
|
373
|
+
${this.changedPaths.has(n)?"background: rgba(249, 226, 175, 0.1);":""}
|
|
374
|
+
`,i.addEventListener("mouseenter",()=>{i.style.background="rgba(69, 71, 90, 0.3)"}),i.addEventListener("mouseleave",()=>{i.style.background=this.changedPaths.has(n)?"rgba(249, 226, 175, 0.1)":""});let l=document.createElement("span");l.style.cssText=`display: inline-block; width: ${r*16}px; flex-shrink: 0;`,i.appendChild(l);let d=document.createElement("span");d.style.cssText=`
|
|
375
|
+
display: inline-flex;
|
|
376
|
+
align-items: center;
|
|
377
|
+
justify-content: center;
|
|
378
|
+
width: 14px;
|
|
379
|
+
height: 14px;
|
|
380
|
+
font-size: 9px;
|
|
381
|
+
color: #6c7086;
|
|
382
|
+
flex-shrink: 0;
|
|
383
|
+
transition: transform 0.15s ease;
|
|
384
|
+
${o?"":"visibility: hidden;"}
|
|
385
|
+
${this.expandedPaths.has(n)?"transform: rotate(90deg);":""}
|
|
386
|
+
`,d.textContent="\u25B6",i.appendChild(d);let p=document.createElement("span");p.style.cssText=`
|
|
387
|
+
color: #89b4fa;
|
|
388
|
+
margin-right: 6px;
|
|
389
|
+
flex-shrink: 0;
|
|
390
|
+
font-size: 12px;
|
|
391
|
+
min-width: 60px;
|
|
392
|
+
`,p.textContent=t.key,i.appendChild(p);let a=document.createElement("span");a.style.cssText="color: #6c7086; margin-right: 6px; flex-shrink: 0;",a.textContent=":",i.appendChild(a);let c=document.createElement("span"),u=je(t.value),h={string:"#a6e3a1",number:"#fab387",boolean:"#89b4fa",null:"#6c7086",undefined:"#6c7086",function:"#cba6f7",Object:"#cdd6f4",Array:"#f9e2af",Date:"#f38ba8",RegExp:"#f38ba8"};c.style.cssText=`
|
|
393
|
+
color: ${h[u]||"#cdd6f4"};
|
|
394
|
+
font-size: 12px;
|
|
395
|
+
flex: 1;
|
|
396
|
+
overflow: hidden;
|
|
397
|
+
text-overflow: ellipsis;
|
|
398
|
+
white-space: nowrap;
|
|
399
|
+
cursor: ${t.isReadonly?"default":"text"};
|
|
400
|
+
`,c.textContent=he(t.value),i.appendChild(c);let f=document.createElement("span");if(f.style.cssText=`
|
|
401
|
+
color: #585b70;
|
|
402
|
+
font-size: 10px;
|
|
403
|
+
flex-shrink: 0;
|
|
404
|
+
margin-left: 6px;
|
|
405
|
+
`,f.textContent=u,i.appendChild(f),o&&i.addEventListener("click",m=>{m.stopPropagation(),this.expandedPaths.has(n)?this.expandedPaths.delete(n):this.expandedPaths.add(n),this.renderState()}),!t.isReadonly&&t.category==="state"&&c.addEventListener("dblclick",m=>{m.stopPropagation(),this.startEdit(i,t,n,c)}),e.appendChild(i),o&&this.expandedPaths.has(n)){let m=t.value,x=Object.keys(m);for(let v of x){let y=`${n}.${v}`,g=m[v],b=we(g);this.renderProperty(e,{key:v,value:g,category:t.category,isReactive:t.isReactive,isCached:t.isCached,isReadonly:t.isReadonly},y,r+1,b)}}}startEdit(e,t,n,r){let o=L();if(!o)return;let i=document.createElement("input");i.type="text",i.style.cssText=`
|
|
406
|
+
background: #181825;
|
|
407
|
+
border: 1px solid #cba6f7;
|
|
408
|
+
color: #cdd6f4;
|
|
409
|
+
font-size: 12px;
|
|
410
|
+
font-family: inherit;
|
|
411
|
+
padding: 1px 4px;
|
|
412
|
+
border-radius: 2px;
|
|
413
|
+
outline: none;
|
|
414
|
+
width: 100%;
|
|
415
|
+
box-sizing: border-box;
|
|
416
|
+
`;let l;typeof t.value=="string"?(l=t.value,i.value=t.value):(l=JSON.stringify(t.value),i.value=l),r.style.display="none",e.insertBefore(i,r.nextSibling),i.focus(),i.select();let d=()=>{let a,c=i.value;try{a=JSON.parse(c)}catch(h){a=c}let u=n.replace(/^state\./,"");K(o,u,a),i.remove(),r.style.display="",this.renderState()},p=()=>{i.remove(),r.style.display=""};i.addEventListener("keydown",a=>{a.key==="Enter"?(a.preventDefault(),d()):a.key==="Escape"&&(a.preventDefault(),p())}),i.addEventListener("blur",()=>{d()})}renderHistory(e){let t=V(e.id);if(t.length===0){let o=document.createElement("div");o.className="lyt-devtools-empty",o.textContent="\u6682\u65E0\u72B6\u6001\u53D8\u5316\u8BB0\u5F55\u3002",this.container.appendChild(o);return}let n=document.createElement("div");n.style.cssText="max-height: 400px; overflow-y: auto;";let r=[...t].reverse();for(let o=0;o<r.length;o++){let i=r[o],l=document.createElement("div");l.style.cssText=`
|
|
417
|
+
padding: 6px 8px;
|
|
418
|
+
border-bottom: 1px solid #313244;
|
|
419
|
+
font-size: 11px;
|
|
420
|
+
cursor: default;
|
|
421
|
+
transition: background 0.1s ease;
|
|
422
|
+
`,l.addEventListener("mouseenter",()=>{l.style.background="rgba(69, 71, 90, 0.3)"}),l.addEventListener("mouseleave",()=>{l.style.background=""});let d=new Date(i.timestamp).toLocaleTimeString();l.innerHTML=`
|
|
423
|
+
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;">
|
|
424
|
+
<span style="color: #89b4fa; font-weight: 600;">${i.path}</span>
|
|
425
|
+
<span style="color: #585b70;">${d}</span>
|
|
426
|
+
</div>
|
|
427
|
+
<div style="display: flex; align-items: center; gap: 6px;">
|
|
428
|
+
<span style="color: #f38ba8; text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;">${he(i.oldValue,40)}</span>
|
|
429
|
+
<span style="color: #6c7086;">\u2192</span>
|
|
430
|
+
<span style="color: #a6e3a1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;">${he(i.newValue,40)}</span>
|
|
431
|
+
</div>
|
|
432
|
+
`,n.appendChild(l)}this.container.appendChild(n)}markChanged(e){this.changedPaths.set(e,Date.now()),this.highlightTimer&&clearTimeout(this.highlightTimer),this.highlightTimer=setTimeout(()=>{this.changedPaths.clear(),this.renderState()},3e3)}refresh(){this.renderState()}destroy(){this.updateTimer&&clearTimeout(this.updateTimer),this.highlightTimer&&clearTimeout(this.highlightTimer),typeof window!="undefined"&&window.removeEventListener("lyt-devtools-update",this.onUpdate),this.container=null,this.expandedPaths.clear(),this.changedPaths.clear()}};function Je(s,e=60){if(s===null)return"null";if(s===void 0)return"undefined";if(typeof s=="string")return s.length>e?`"${s.slice(0,e)}..."`:`"${s}"`;if(typeof s=="function")return`fn(${s.name||"anonymous"})`;if(typeof s=="object")try{let t=JSON.stringify(s);return t.length>e?`${t.slice(0,e)}...`:t}catch(t){return"[Object]"}return String(s)}function Re(s){let e=new Date(s);return e.toLocaleTimeString("zh-CN",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})+`.${String(e.getMilliseconds()).padStart(3,"0")}`}function Ve(s){let t=Date.now()-s;return t<1e3?`${t}ms \u524D`:t<6e4?`${Math.floor(t/1e3)}s \u524D`:`${Math.floor(t/6e4)}m \u524D`}var z=class{constructor(e){this.container=null;this.nameFilter="";this.componentFilter="";this.paused=!1;this.selectedEventId=null;this.updateTimer=null;this.autoScrollTimer=null;this.onUpdate=()=>{this.paused||(this.updateTimer&&clearTimeout(this.updateTimer),this.updateTimer=setTimeout(()=>{this.renderEvents()},100))};this.panel=e,typeof window!="undefined"&&window.addEventListener("lyt-devtools-update",this.onUpdate)}render(e){this.container=e,this.renderEvents()}renderEvents(){if(!this.container)return;this.container.innerHTML="";let e=document.createElement("div");e.style.cssText="display: flex; gap: 6px; margin-bottom: 8px; align-items: center;";let t=document.createElement("input");t.type="text",t.className="lyt-devtools-search",t.placeholder="\u6309\u4E8B\u4EF6\u540D\u79F0\u8FC7\u6EE4...",t.value=this.nameFilter,t.style.marginBottom="0",t.style.flex="1",t.addEventListener("input",a=>{this.nameFilter=a.target.value,this.renderEvents()}),e.appendChild(t);let n=document.createElement("input");n.type="text",n.className="lyt-devtools-search",n.placeholder="\u6309\u7EC4\u4EF6\u8FC7\u6EE4...",n.value=this.componentFilter,n.style.marginBottom="0",n.style.flex="1",n.addEventListener("input",a=>{this.componentFilter=a.target.value,this.renderEvents()}),e.appendChild(n);let r=document.createElement("button");r.style.cssText=`
|
|
433
|
+
background: ${this.paused?"#f38ba8":"transparent"};
|
|
434
|
+
color: ${this.paused?"#1e1e2e":"#a6adc8"};
|
|
435
|
+
border: 1px solid ${this.paused?"#f38ba8":"#313244"};
|
|
436
|
+
padding: 4px 8px;
|
|
437
|
+
border-radius: 4px;
|
|
438
|
+
cursor: pointer;
|
|
439
|
+
font-size: 11px;
|
|
440
|
+
font-family: inherit;
|
|
441
|
+
white-space: nowrap;
|
|
442
|
+
flex-shrink: 0;
|
|
443
|
+
`,r.textContent=this.paused?"\u7EE7\u7EED":"\u6682\u505C",r.addEventListener("click",()=>{this.paused=!this.paused,this.renderEvents()}),e.appendChild(r);let o=document.createElement("button");o.style.cssText=`
|
|
444
|
+
background: transparent;
|
|
445
|
+
color: #a6adc8;
|
|
446
|
+
border: 1px solid #313244;
|
|
447
|
+
padding: 4px 8px;
|
|
448
|
+
border-radius: 4px;
|
|
449
|
+
cursor: pointer;
|
|
450
|
+
font-size: 11px;
|
|
451
|
+
font-family: inherit;
|
|
452
|
+
white-space: nowrap;
|
|
453
|
+
flex-shrink: 0;
|
|
454
|
+
`,o.textContent="\u6E05\u7A7A",o.addEventListener("click",()=>{this.clearEvents()}),e.appendChild(o),this.container.appendChild(e);let i=J();if(this.nameFilter){let a=this.nameFilter.toLowerCase();i=i.filter(c=>c.name.toLowerCase().includes(a))}if(this.componentFilter){let a=this.componentFilter.toLowerCase();i=i.filter(c=>c.componentName.toLowerCase().includes(a))}if(this.panel.setStatusLeft(`<span class="lyt-devtools-status-dot"></span><span>${i.length} \u4E2A\u4E8B\u4EF6${this.paused?" (\u5DF2\u6682\u505C)":""}</span>`),i.length===0){let a=document.createElement("div");a.className="lyt-devtools-empty",a.textContent=this.nameFilter||this.componentFilter?"\u6CA1\u6709\u5339\u914D\u7684\u4E8B\u4EF6\u8BB0\u5F55\u3002":"\u6682\u65E0\u4E8B\u4EF6\u8BB0\u5F55\uFF0C\u7B49\u5F85\u7EC4\u4EF6\u89E6\u53D1\u4E8B\u4EF6...",this.container.appendChild(a);return}if(this.selectedEventId){let a=i.find(c=>c.id===this.selectedEventId);a&&this.renderEventDetail(a)}let l=document.createElement("div");l.style.cssText="max-height: 360px; overflow-y: auto;";let d=[...i].reverse(),p=Math.min(d.length,200);for(let a=0;a<p;a++){let c=d[a],u=c.id===this.selectedEventId,h=document.createElement("div");h.style.cssText=`
|
|
455
|
+
display: flex;
|
|
456
|
+
align-items: center;
|
|
457
|
+
padding: 4px 8px;
|
|
458
|
+
border-bottom: 1px solid rgba(49, 50, 68, 0.5);
|
|
459
|
+
cursor: pointer;
|
|
460
|
+
font-size: 11px;
|
|
461
|
+
transition: background 0.1s ease;
|
|
462
|
+
${u?"background: rgba(203, 166, 247, 0.15); border-left: 2px solid #cba6f7;":""}
|
|
463
|
+
`,h.addEventListener("mouseenter",()=>{u||(h.style.background="rgba(69, 71, 90, 0.3)")}),h.addEventListener("mouseleave",()=>{u||(h.style.background="")});let f=document.createElement("span");f.style.cssText="color: #585b70; margin-right: 8px; flex-shrink: 0; font-size: 10px;",f.textContent=Re(c.timestamp),h.appendChild(f);let m=document.createElement("span");m.style.cssText=`
|
|
464
|
+
color: #f9e2af;
|
|
465
|
+
font-weight: 600;
|
|
466
|
+
margin-right: 8px;
|
|
467
|
+
flex-shrink: 0;
|
|
468
|
+
max-width: 120px;
|
|
469
|
+
overflow: hidden;
|
|
470
|
+
text-overflow: ellipsis;
|
|
471
|
+
white-space: nowrap;
|
|
472
|
+
`,m.textContent=c.name,m.title=c.name,h.appendChild(m);let x=document.createElement("span");x.style.cssText=`
|
|
473
|
+
color: #89b4fa;
|
|
474
|
+
margin-right: 8px;
|
|
475
|
+
flex-shrink: 0;
|
|
476
|
+
max-width: 80px;
|
|
477
|
+
overflow: hidden;
|
|
478
|
+
text-overflow: ellipsis;
|
|
479
|
+
white-space: nowrap;
|
|
480
|
+
`,x.textContent=c.componentName,x.title=c.componentName,h.appendChild(x);let v=c.args.map(b=>Je(b,30)).join(", "),y=document.createElement("span");y.style.cssText=`
|
|
481
|
+
color: #6c7086;
|
|
482
|
+
flex: 1;
|
|
483
|
+
overflow: hidden;
|
|
484
|
+
text-overflow: ellipsis;
|
|
485
|
+
white-space: nowrap;
|
|
486
|
+
font-size: 10px;
|
|
487
|
+
`,y.textContent=c.args.length>0?`(${v})`:"()",y.title=c.args.length>0?v:"\u65E0\u53C2\u6570",h.appendChild(y);let g=document.createElement("span");g.style.cssText="color: #45475a; flex-shrink: 0; font-size: 10px; margin-left: 4px;",g.textContent=Ve(c.timestamp),h.appendChild(g),h.addEventListener("click",()=>{this.selectedEventId===c.id?this.selectedEventId=null:this.selectedEventId=c.id,this.renderEvents()}),l.appendChild(h)}if(d.length>p){let a=document.createElement("div");a.style.cssText="padding: 6px 8px; text-align: center; color: #585b70; font-size: 11px;",a.textContent=`\u8FD8\u6709 ${d.length-p} \u6761\u8BB0\u5F55\u672A\u663E\u793A...`,l.appendChild(a)}this.container.appendChild(l)}renderEventDetail(e){let t=document.createElement("div");t.style.cssText=`
|
|
488
|
+
background: #181825;
|
|
489
|
+
border: 1px solid #313244;
|
|
490
|
+
border-radius: 4px;
|
|
491
|
+
padding: 8px;
|
|
492
|
+
margin-bottom: 8px;
|
|
493
|
+
`;let n=document.createElement("div");n.style.cssText="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;";let r=document.createElement("span");r.style.cssText="font-weight: 600; color: #f9e2af; font-size: 12px;",r.textContent=`\u4E8B\u4EF6: ${e.name}`;let o=document.createElement("span");o.style.cssText="cursor: pointer; color: #6c7086; font-size: 14px;",o.textContent="\u2715",o.addEventListener("click",()=>{this.selectedEventId=null,this.renderEvents()}),n.appendChild(r),n.appendChild(o),t.appendChild(n);let i=document.createElement("div");if(i.style.cssText="display: flex; gap: 12px; margin-bottom: 6px; font-size: 11px;",i.innerHTML=`
|
|
494
|
+
<span><span style="color: #6c7086;">\u6765\u6E90\u7EC4\u4EF6:</span> <span style="color: #89b4fa;">${e.componentName}</span></span>
|
|
495
|
+
<span><span style="color: #6c7086;">\u7EC4\u4EF6 ID:</span> <span style="color: #585b70;">${e.componentId}</span></span>
|
|
496
|
+
<span><span style="color: #6c7086;">\u65F6\u95F4:</span> <span style="color: #585b70;">${Re(e.timestamp)}</span></span>
|
|
497
|
+
`,t.appendChild(i),e.args.length>0){let l=document.createElement("div");l.style.cssText="color: #6c7086; font-size: 11px; margin-bottom: 4px; font-weight: 600;",l.textContent=`\u53C2\u6570 (${e.args.length}):`,t.appendChild(l);for(let d=0;d<e.args.length;d++){let p=document.createElement("div");p.style.cssText=`
|
|
498
|
+
padding: 3px 8px;
|
|
499
|
+
background: #1e1e2e;
|
|
500
|
+
border-radius: 2px;
|
|
501
|
+
margin-bottom: 2px;
|
|
502
|
+
font-size: 11px;
|
|
503
|
+
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
|
|
504
|
+
`;let a=e.args[d],c=typeof a,u;try{u=JSON.stringify(a,null,2)}catch(h){u=String(a)}u.length>500&&(u=u.slice(0,500)+`
|
|
505
|
+
... (\u5DF2\u622A\u65AD)`),p.innerHTML=`
|
|
506
|
+
<span style="color: #6c7086;">[${d}]</span>
|
|
507
|
+
<span style="color: #585b70; margin: 0 4px;">${c}:</span>
|
|
508
|
+
<span style="color: #a6e3a1; white-space: pre-wrap; word-break: break-all;">${this.escapeHtml(u)}</span>
|
|
509
|
+
`,t.appendChild(p)}}else{let l=document.createElement("div");l.style.cssText="color: #585b70; font-size: 11px; font-style: italic;",l.textContent="\u6B64\u4E8B\u4EF6\u65E0\u53C2\u6570\u3002",t.appendChild(l)}this.container.appendChild(t)}escapeHtml(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}clearEvents(){this.selectedEventId=null,this.renderEvents()}setPaused(e){this.paused=e}isPaused(){return this.paused}refresh(){this.renderEvents()}destroy(){this.updateTimer&&clearTimeout(this.updateTimer),this.autoScrollTimer&&clearInterval(this.autoScrollTimer),typeof window!="undefined"&&window.removeEventListener("lyt-devtools-update",this.onUpdate),this.container=null}};function P(s){if(s===null||typeof s!="object")return s;if(s instanceof Map){let t=new Map;for(let[n,r]of s)t.set(n,P(r));return t}if(Array.isArray(s))return s.map(t=>P(t));let e={};for(let t of Object.keys(s))e[t]=P(s[t]);return e}function We(s){let e=new Date(s);return e.toLocaleTimeString("zh-CN",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})+`.${String(e.getMilliseconds()).padStart(3,"0")}`}var $=class{constructor(e){this.container=null;this.snapshots=[];this.snapshotCounter=0;this.maxSnapshots=100;this.currentIndex=-1;this.playState="stopped";this.playSpeed=500;this.playTimer=null;this.autoSnapshot=!0;this.updateTimer=null;this.onUpdate=()=>{this.autoSnapshot&&(this.updateTimer&&clearTimeout(this.updateTimer),this.updateTimer=setTimeout(()=>{this.takeSnapshot("\u81EA\u52A8\u5FEB\u7167")},300))};this.panel=e,typeof window!="undefined"&&window.addEventListener("lyt-devtools-update",this.onUpdate)}takeSnapshot(e,t){let n=k(),r=new Map;for(let i of n)r.set(i.id,{id:i.id,name:i.name,state:P(i.state),props:P(i.props),computed:P(i.computed),isMounted:i.isMounted});let o={id:++this.snapshotCounter,timestamp:Date.now(),description:e||`\u5FEB\u7167 #${this.snapshotCounter}`,components:r,trigger:t};return this.snapshots.push(o),this.snapshots.length>this.maxSnapshots&&this.snapshots.splice(0,this.snapshots.length-this.maxSnapshots),(this.currentIndex===-1||this.currentIndex===this.snapshots.length-2)&&(this.currentIndex=this.snapshots.length-1),o}getSnapshots(){return[...this.snapshots]}getSnapshot(e){var t;return(t=this.snapshots[e])!=null?t:null}getCurrentIndex(){return this.currentIndex}clearSnapshots(){this.snapshots=[],this.snapshotCounter=0,this.currentIndex=-1,this.stopPlayback(),this.renderTimeTravel()}setAutoSnapshot(e){this.autoSnapshot=e}travelTo(e){e<0||e>=this.snapshots.length||(this.currentIndex=e,this.renderTimeTravel())}stepBack(){this.currentIndex>0&&this.travelTo(this.currentIndex-1)}stepForward(){this.currentIndex<this.snapshots.length-1&&this.travelTo(this.currentIndex+1)}goToLatest(){this.currentIndex=-1,this.stopPlayback(),this.renderTimeTravel()}restoreSnapshot(e){let t=this.snapshots[e];if(!t)return!1;for(let[n,r]of t.components){let o=H(n);if(!(!o||!o.instance)&&o.instance.state&&typeof o.instance.state=="object"){let i=Object.keys(r.state);for(let l of i)try{o.instance.state[l]=P(r.state[l])}catch(d){console.warn(`[Lyt DevTools] \u6062\u590D\u72B6\u6001\u5931\u8D25: ${o.name}.${l}`,d)}}}return!0}startPlayback(){this.playState!=="playing"&&((this.currentIndex===-1||this.currentIndex>=this.snapshots.length-1)&&(this.currentIndex=0),this.playState="playing",this.renderTimeTravel(),this.playTimer=setInterval(()=>{this.currentIndex<this.snapshots.length-1?(this.currentIndex++,this.renderTimeTravel()):this.stopPlayback()},this.playSpeed))}pausePlayback(){this.playState==="playing"&&(this.playState="paused",this.playTimer&&(clearInterval(this.playTimer),this.playTimer=null),this.renderTimeTravel())}stopPlayback(){this.playState="stopped",this.playTimer&&(clearInterval(this.playTimer),this.playTimer=null),this.renderTimeTravel()}setPlaySpeed(e){this.playSpeed=e,this.playState==="playing"&&(this.pausePlayback(),this.startPlayback())}getPlayState(){return this.playState}render(e){this.container=e,this.renderTimeTravel()}renderTimeTravel(){if(!this.container)return;this.container.innerHTML="";let e=document.createElement("div");e.style.cssText="display: flex; gap: 4px; margin-bottom: 8px; align-items: center; flex-wrap: wrap;";let t=document.createElement("button");t.style.cssText=this.createButtonStyle("#a6e3a1","#1e1e2e"),t.textContent="\u{1F4F8} \u5FEB\u7167",t.title="\u624B\u52A8\u521B\u5EFA\u5FEB\u7167",t.addEventListener("click",()=>{this.takeSnapshot("\u624B\u52A8\u5FEB\u7167"),this.renderTimeTravel()}),e.appendChild(t);let n=document.createElement("button");n.style.cssText=this.createButtonStyle("#89b4fa","#1e1e2e"),n.textContent="\u{1F504} \u6700\u65B0",n.title="\u56DE\u5230\u6700\u65B0\u72B6\u6001",n.addEventListener("click",()=>{this.goToLatest()}),e.appendChild(n);let r=document.createElement("button");r.style.cssText=this.createButtonStyle("#f38ba8","#1e1e2e"),r.textContent="\u{1F5D1} \u6E05\u7A7A",r.title="\u6E05\u7A7A\u6240\u6709\u5FEB\u7167",r.addEventListener("click",()=>{this.clearSnapshots()}),e.appendChild(r);let o=document.createElement("label");o.style.cssText="display: flex; align-items: center; gap: 4px; font-size: 11px; color: #a6adc8; margin-left: 8px; cursor: pointer;";let i=document.createElement("input");i.type="checkbox",i.checked=this.autoSnapshot,i.style.cssText="cursor: pointer;",i.addEventListener("change",()=>{this.autoSnapshot=i.checked}),o.appendChild(i),o.appendChild(document.createTextNode("\u81EA\u52A8\u5FEB\u7167")),e.appendChild(o),this.container.appendChild(e),this.snapshots.length>0&&this.renderPlaybackControls(this.container),this.renderSnapshotList(this.container);let l=this.currentIndex===-1;this.panel.setStatusLeft(`<span class="lyt-devtools-status-dot"></span><span>${this.snapshots.length} \u4E2A\u5FEB\u7167</span><span style="color: #585b70;">|</span><span>${l?"\u5B9E\u65F6":`\u5386\u53F2 #${this.currentIndex+1}`}</span>`)}renderPlaybackControls(e){let t=document.createElement("div");t.style.cssText=`
|
|
510
|
+
display: flex;
|
|
511
|
+
align-items: center;
|
|
512
|
+
gap: 6px;
|
|
513
|
+
padding: 8px;
|
|
514
|
+
background: #181825;
|
|
515
|
+
border: 1px solid #313244;
|
|
516
|
+
border-radius: 4px;
|
|
517
|
+
margin-bottom: 8px;
|
|
518
|
+
`;let n=document.createElement("button");n.style.cssText=this.createSmallButtonStyle(),n.textContent="\u23EE",n.title="\u6B65\u9000",n.disabled=this.currentIndex<=0,n.addEventListener("click",()=>this.stepBack()),t.appendChild(n);let r=document.createElement("button");r.style.cssText=this.createSmallButtonStyle(),this.playState==="playing"?(r.textContent="\u23F8",r.title="\u6682\u505C",r.addEventListener("click",()=>this.pausePlayback())):(r.textContent="\u25B6",r.title="\u64AD\u653E",r.addEventListener("click",()=>this.startPlayback())),t.appendChild(r);let o=document.createElement("button");o.style.cssText=this.createSmallButtonStyle(),o.textContent="\u23F9",o.title="\u505C\u6B62",o.disabled=this.playState==="stopped",o.addEventListener("click",()=>this.stopPlayback()),t.appendChild(o);let i=document.createElement("button");i.style.cssText=this.createSmallButtonStyle(),i.textContent="\u23ED",i.title="\u6B65\u8FDB",i.disabled=this.currentIndex>=this.snapshots.length-1,i.addEventListener("click",()=>this.stepForward()),t.appendChild(i);let l=document.createElement("input");l.type="range",l.min="0",l.max=String(Math.max(0,this.snapshots.length-1)),l.value=String(Math.max(0,this.currentIndex)),l.style.cssText=`
|
|
519
|
+
flex: 1;
|
|
520
|
+
height: 4px;
|
|
521
|
+
-webkit-appearance: none;
|
|
522
|
+
appearance: none;
|
|
523
|
+
background: #313244;
|
|
524
|
+
border-radius: 2px;
|
|
525
|
+
outline: none;
|
|
526
|
+
cursor: pointer;
|
|
527
|
+
`,l.addEventListener("input",c=>{let u=parseInt(c.target.value,10);this.travelTo(u)}),t.appendChild(l);let d=document.createElement("select");d.style.cssText=`
|
|
528
|
+
background: #1e1e2e;
|
|
529
|
+
color: #cdd6f4;
|
|
530
|
+
border: 1px solid #313244;
|
|
531
|
+
border-radius: 3px;
|
|
532
|
+
padding: 2px 4px;
|
|
533
|
+
font-size: 11px;
|
|
534
|
+
font-family: inherit;
|
|
535
|
+
cursor: pointer;
|
|
536
|
+
outline: none;
|
|
537
|
+
`;let p=[{value:200,label:"0.5x"},{value:500,label:"1x"},{value:1e3,label:"2x"},{value:2e3,label:"4x"}];for(let c of p){let u=document.createElement("option");u.value=String(c.value),u.textContent=c.label,c.value===this.playSpeed&&(u.selected=!0),d.appendChild(u)}d.addEventListener("change",c=>{this.setPlaySpeed(parseInt(c.target.value,10))}),t.appendChild(d);let a=document.createElement("span");a.style.cssText="color: #6c7086; font-size: 11px; flex-shrink: 0; min-width: 40px; text-align: right;",a.textContent=this.currentIndex===-1?`--/${this.snapshots.length}`:`${this.currentIndex+1}/${this.snapshots.length}`,t.appendChild(a),e.appendChild(t)}renderSnapshotList(e){if(this.snapshots.length===0){let r=document.createElement("div");r.className="lyt-devtools-empty",r.textContent='\u6682\u65E0\u5FEB\u7167\u3002\u70B9\u51FB"\u5FEB\u7167"\u6309\u94AE\u624B\u52A8\u521B\u5EFA\uFF0C\u6216\u5F00\u542F"\u81EA\u52A8\u5FEB\u7167"\u3002',e.appendChild(r);return}let t=document.createElement("div");t.style.cssText="max-height: 300px; overflow-y: auto;";let n=[...this.snapshots].reverse();for(let r=n.length-1;r>=0;r--){let o=n[r],i=this.snapshots.indexOf(o),l=i===this.currentIndex,d=document.createElement("div");d.style.cssText=`
|
|
538
|
+
display: flex;
|
|
539
|
+
align-items: center;
|
|
540
|
+
padding: 4px 8px;
|
|
541
|
+
border-bottom: 1px solid rgba(49, 50, 68, 0.5);
|
|
542
|
+
cursor: pointer;
|
|
543
|
+
font-size: 11px;
|
|
544
|
+
transition: background 0.1s ease;
|
|
545
|
+
${l?"background: rgba(203, 166, 247, 0.15); border-left: 2px solid #cba6f7;":""}
|
|
546
|
+
`,d.addEventListener("mouseenter",()=>{l||(d.style.background="rgba(69, 71, 90, 0.3)")}),d.addEventListener("mouseleave",()=>{l||(d.style.background="")});let p=document.createElement("span");p.style.cssText="color: #585b70; margin-right: 6px; flex-shrink: 0; min-width: 24px;",p.textContent=`#${o.id}`,d.appendChild(p);let a=document.createElement("span");a.style.cssText="color: #585b70; margin-right: 8px; flex-shrink: 0; font-size: 10px;",a.textContent=We(o.timestamp),d.appendChild(a);let c=document.createElement("span");c.style.cssText="color: #cdd6f4; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",c.textContent=o.description,d.appendChild(c);let u=document.createElement("span");u.style.cssText="color: #6c7086; flex-shrink: 0; font-size: 10px; margin-left: 4px;",u.textContent=`${o.components.size} \u7EC4\u4EF6`,d.appendChild(u);let h=document.createElement("span");h.style.cssText=`
|
|
547
|
+
color: #585b70;
|
|
548
|
+
cursor: pointer;
|
|
549
|
+
margin-left: 6px;
|
|
550
|
+
font-size: 10px;
|
|
551
|
+
padding: 1px 4px;
|
|
552
|
+
border: 1px solid #313244;
|
|
553
|
+
border-radius: 2px;
|
|
554
|
+
flex-shrink: 0;
|
|
555
|
+
transition: all 0.15s ease;
|
|
556
|
+
`,h.textContent="\u6062\u590D",h.title="\u6062\u590D\u6B64\u5FEB\u7167\u7684\u72B6\u6001",h.addEventListener("mouseenter",()=>{h.style.color="#f9e2af",h.style.borderColor="#f9e2af"}),h.addEventListener("mouseleave",()=>{h.style.color="#585b70",h.style.borderColor="#313244"}),h.addEventListener("click",f=>{f.stopPropagation(),confirm(`\u786E\u5B9A\u8981\u6062\u590D\u5FEB\u7167 #${o.id} \u7684\u72B6\u6001\u5417\uFF1F
|
|
557
|
+
\u8FD9\u5C06\u4FEE\u6539\u7EC4\u4EF6\u7684\u5B9E\u9645\u72B6\u6001\u3002`)&&this.restoreSnapshot(i)}),d.appendChild(h),d.addEventListener("click",()=>{this.travelTo(i)}),t.appendChild(d)}e.appendChild(t)}createButtonStyle(e,t){return`
|
|
558
|
+
background: ${e};
|
|
559
|
+
color: ${t};
|
|
560
|
+
border: none;
|
|
561
|
+
padding: 4px 8px;
|
|
562
|
+
border-radius: 4px;
|
|
563
|
+
cursor: pointer;
|
|
564
|
+
font-size: 11px;
|
|
565
|
+
font-family: inherit;
|
|
566
|
+
white-space: nowrap;
|
|
567
|
+
flex-shrink: 0;
|
|
568
|
+
transition: opacity 0.15s ease;
|
|
569
|
+
`}createSmallButtonStyle(){return`
|
|
570
|
+
background: transparent;
|
|
571
|
+
color: #cdd6f4;
|
|
572
|
+
border: 1px solid #313244;
|
|
573
|
+
width: 28px;
|
|
574
|
+
height: 28px;
|
|
575
|
+
border-radius: 4px;
|
|
576
|
+
cursor: pointer;
|
|
577
|
+
font-size: 14px;
|
|
578
|
+
display: flex;
|
|
579
|
+
align-items: center;
|
|
580
|
+
justify-content: center;
|
|
581
|
+
flex-shrink: 0;
|
|
582
|
+
transition: all 0.15s ease;
|
|
583
|
+
padding: 0;
|
|
584
|
+
`}refresh(){this.renderTimeTravel()}destroy(){this.stopPlayback(),this.updateTimer&&clearTimeout(this.updateTimer),typeof window!="undefined"&&window.removeEventListener("lyt-devtools-update",this.onUpdate),this.container=null,this.snapshots=[]}};var Z=class{constructor(e,t){this.history=[];this.currentPath="/";this.currentParams={};this.currentQuery={};var n;this.container=e,this.maxHistory=(n=t==null?void 0:t.maxHistory)!=null?n:50,this.render()}updateRoute(e,t,n){this.history.push({path:e,params:t?{...t}:void 0,query:n?{...n}:void 0,timestamp:Date.now()}),this.history.length>this.maxHistory&&this.history.shift(),this.currentPath=e,this.currentParams=t?{...t}:{},this.currentQuery=n?{...n}:{},this.render()}getHistory(){return[...this.history].reverse()}getCurrentPath(){return this.currentPath}clearHistory(){this.history=[],this.render()}render(){this.container.innerHTML="";let e=document.createElement("div");e.style.cssText="margin-bottom: 16px;";let t=document.createElement("div");t.style.cssText="font-size: 11px; color: #a6adc8; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;",t.textContent="Current Route",e.appendChild(t);let n=document.createElement("div");n.style.cssText="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;";let r=document.createElement("span");r.style.cssText="color: #585b70; font-size: 11px; min-width: 50px;",r.textContent="Path:";let o=document.createElement("span");if(o.style.cssText="color: #cba6f7; font-size: 13px; font-weight: 600;",o.textContent=this.currentPath||"/",n.appendChild(r),n.appendChild(o),e.appendChild(n),Object.keys(this.currentParams).length>0){let p=document.createElement("div");p.style.cssText="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;";let a=document.createElement("span");a.style.cssText="color: #585b70; font-size: 11px; min-width: 50px;",a.textContent="Params:";let c=document.createElement("span");c.style.cssText="color: #a6e3a1; font-size: 12px;",c.textContent=JSON.stringify(this.currentParams),p.appendChild(a),p.appendChild(c),e.appendChild(p)}if(Object.keys(this.currentQuery).length>0){let p=document.createElement("div");p.style.cssText="display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px;";let a=document.createElement("span");a.style.cssText="color: #585b70; font-size: 11px; min-width: 50px;",a.textContent="Query:";let c=document.createElement("span");c.style.cssText="color: #89b4fa; font-size: 12px;",c.textContent=JSON.stringify(this.currentQuery),p.appendChild(a),p.appendChild(c),e.appendChild(p)}this.container.appendChild(e);let i=document.createElement("div");i.style.cssText="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;";let l=document.createElement("span");l.style.cssText="font-size: 11px; color: #a6adc8; text-transform: uppercase; letter-spacing: 0.5px;",l.textContent=`History (${this.history.length})`,i.appendChild(l);let d=document.createElement("button");if(d.style.cssText="background: transparent; border: 1px solid #45475a; color: #a6adc8; cursor: pointer; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-family: inherit;",d.textContent="Clear",d.addEventListener("click",()=>this.clearHistory()),i.appendChild(d),this.container.appendChild(i),this.history.length===0){let p=document.createElement("div");p.style.cssText="color: #585b70; font-size: 12px; text-align: center; padding: 16px 0; font-style: italic;",p.textContent="No navigation history",this.container.appendChild(p)}else{let p=document.createElement("div");p.style.cssText="max-height: 300px; overflow-y: auto;";let a=[...this.history].reverse();for(let c of a){let u=document.createElement("div");u.style.cssText="display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 3px; font-size: 12px; transition: background 0.15s; cursor: default;",u.addEventListener("mouseenter",()=>{u.style.background="#313244"}),u.addEventListener("mouseleave",()=>{u.style.background="transparent"});let h=document.createElement("span");h.style.cssText="color: #cdd6f4; font-family: inherit;",h.textContent=c.path;let f=document.createElement("span");f.style.cssText="color: #585b70; font-size: 10px; white-space: nowrap;";let m=new Date(c.timestamp);f.textContent=`${m.getHours().toString().padStart(2,"0")}:${m.getMinutes().toString().padStart(2,"0")}:${m.getSeconds().toString().padStart(2,"0")}.${m.getMilliseconds().toString().padStart(3,"0")}`,u.appendChild(h),u.appendChild(f),p.appendChild(u)}this.container.appendChild(p)}}destroy(){this.container.innerHTML="",this.history=[]}};var R=class{constructor(e){this.head=0;this.count=0;this.capacity=e,this.buffer=new Array(e).fill(void 0)}push(e){let t=(this.head+this.count)%this.capacity;this.buffer[t]=e,this.count<this.capacity?this.count++:this.head=(this.head+1)%this.capacity}getAll(){let e=[];for(let t=0;t<this.count;t++){let n=this.buffer[(this.head+t)%this.capacity];n!==void 0&&e.push(n)}return e}get size(){return this.count}get isEmpty(){return this.count===0}clear(){this.buffer.fill(void 0),this.head=0,this.count=0}},Ye=100,Ke=16,B=class{constructor(e=Ye){this.pendingMarks=new Map;this.componentUpdateCounts=new Map;this._isRecording=!1;this.bufferSize=e,this.fcpBuffer=new R(e),this.inpBuffer=new R(e),this.renderBuffer=new R(e),this.updateFrequencyBuffer=new R(e),this.memoryBuffer=new R(e),this.customMarkBuffer=new R(e),this.fpsBuffer=new R(e),this.fpsState={isMonitoring:!1,frameCount:0,lastTime:0,rafId:null}}recordFCP(e){if(e===void 0)if(typeof performance!="undefined"&&performance.getEntriesByType){let n=performance.getEntriesByType("paint").find(r=>r.name==="first-contentful-paint");e=n?n.startTime:0}else e=0;this.fcpBuffer.push({type:"fcp",value:e,timestamp:Date.now()})}recordINP(e,t,n){this.inpBuffer.push({type:"inp",value:e,eventName:t,componentName:n,timestamp:Date.now()})}recordRender(e,t,n="update",r){this.renderBuffer.push({type:"render",value:t,componentName:e,componentId:r,phase:n,timestamp:Date.now()}),this.trackComponentUpdate(e)}trackComponentUpdate(e){let t=Date.now(),n=this.componentUpdateCounts.get(e);if(!n){this.componentUpdateCounts.set(e,{count:1,startTime:t});return}n.count++;let r=t-n.startTime;r>=1e3&&(this.updateFrequencyBuffer.push({type:"update-frequency",componentName:e,count:n.count,windowMs:r,timestamp:t}),n.count=0,n.startTime=t)}recordMemory(e,t){this.memoryBuffer.push({type:"memory",proxyCount:e,reactiveCount:t,timestamp:Date.now()})}startMark(e){this.pendingMarks.set(e,performance.now())}endMark(e){let t=this.pendingMarks.get(e);if(t===void 0)return-1;let n=performance.now()-t;return this.pendingMarks.delete(e),this.customMarkBuffer.push({type:"custom",name:e,value:n,timestamp:Date.now()}),n}startFPSMonitor(){if(this.fpsState.isMonitoring||typeof requestAnimationFrame!="function")return;this.fpsState.isMonitoring=!0,this.fpsState.frameCount=0,this.fpsState.lastTime=performance.now();let e=t=>{if(!this.fpsState.isMonitoring)return;this.fpsState.frameCount++;let n=t-this.fpsState.lastTime;if(n>=1e3){let r=this.fpsState.frameCount/n*1e3;this.fpsBuffer.push({type:"fps",value:Math.round(r),timestamp:Date.now()}),this.fpsState.frameCount=0,this.fpsState.lastTime=t}this.fpsState.rafId=requestAnimationFrame(e)};this.fpsState.rafId=requestAnimationFrame(e)}stopFPSMonitor(){this.fpsState.isMonitoring=!1,this.fpsState.rafId!==null&&(typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(this.fpsState.rafId),this.fpsState.rafId=null)}isFPSMonitoring(){return this.fpsState.isMonitoring}startRecording(){this._isRecording=!0,this.startFPSMonitor()}stopRecording(){this._isRecording=!1,this.stopFPSMonitor()}isRecording(){return this._isRecording}getMetrics(){return[...this.fcpBuffer.getAll(),...this.inpBuffer.getAll(),...this.renderBuffer.getAll(),...this.updateFrequencyBuffer.getAll(),...this.memoryBuffer.getAll(),...this.customMarkBuffer.getAll(),...this.fpsBuffer.getAll()]}getMetricsByType(e){return this.getMetrics().filter(n=>n.type===e)}getCurrentFPS(){let e=this.fpsBuffer.getAll();return e.length===0?0:e[e.length-1].value}getRenderRankings(){let e=new Map;for(let t of this.renderBuffer.getAll()){let n=e.get(t.componentName)||{renderCount:0,totalTime:0,maxTime:0};n.renderCount++,n.totalTime+=t.value,n.maxTime=Math.max(n.maxTime,t.value),e.set(t.componentName,n)}return Array.from(e.entries()).map(([t,n])=>({componentName:t,renderCount:n.renderCount,avgRenderTime:n.renderCount>0?n.totalTime/n.renderCount:0,maxRenderTime:n.maxTime,totalRenderTime:n.totalTime})).sort((t,n)=>n.avgRenderTime-t.avgRenderTime)}getProxyCount(){let e=this.memoryBuffer.getAll();return e.length===0?0:e[e.length-1].proxyCount}getSlowRenders(){return this.renderBuffer.getAll().filter(e=>e.value>Ke)}getReport(){let e=this.fcpBuffer.getAll(),t=e.length>0?e[e.length-1]:null,r=this.inpBuffer.getAll().map(y=>y.value),o={avg:r.length>0?r.reduce((y,g)=>y+g,0)/r.length:0,max:r.length>0?Math.max(...r):0,min:r.length>0?Math.min(...r):0,count:r.length},i=this.getRenderRankings(),l=this.updateFrequencyBuffer.getAll(),d=new Map;for(let y of l){let g=y.count/y.windowMs*1e3,b=d.get(y.componentName)||[];b.push(g),d.set(y.componentName,b)}let p=Array.from(d.entries()).map(([y,g])=>({componentName:y,avgFrequency:g.reduce((b,T)=>b+T,0)/g.length})),a=this.memoryBuffer.getAll(),c=a.length>0?a[a.length-1]:null,h=this.fpsBuffer.getAll().map(y=>y.value),f={avg:h.length>0?h.reduce((y,g)=>y+g,0)/h.length:0,min:h.length>0?Math.min(...h):0,count:h.length},m=this.customMarkBuffer.getAll(),x=new Map;for(let y of m){let g=x.get(y.name)||[];g.push(y.value),x.set(y.name,g)}let v=Array.from(x.entries()).map(([y,g])=>({name:y,avg:g.reduce((b,T)=>b+T,0)/g.length,max:Math.max(...g),count:g.length}));return{generatedAt:Date.now(),fcp:t,inp:o,renderStats:i,updateFrequencyStats:p,memory:c,fps:f,customMarks:v}}exportJSON(){return JSON.stringify({metrics:this.getMetrics(),report:this.getReport()},null,2)}clear(){this.fcpBuffer.clear(),this.inpBuffer.clear(),this.renderBuffer.clear(),this.updateFrequencyBuffer.clear(),this.memoryBuffer.clear(),this.customMarkBuffer.clear(),this.fpsBuffer.clear(),this.pendingMarks.clear(),this.componentUpdateCounts.clear()}destroy(){this.stopFPSMonitor(),this.clear()}};var A=class{constructor(e=16){this.activeProfiles=new Map;this.slowThreshold=e}startProfile(e){return this.activeProfiles.has(e)?!1:(this.activeProfiles.set(e,{componentName:e,startTime:performance.now(),records:[],slowThreshold:this.slowThreshold}),!0)}stopProfile(e){let t=this.activeProfiles.get(e);return t?(this.activeProfiles.delete(e),this.buildResult(t)):null}stopAllProfiles(){let e=[];for(let t of this.activeProfiles.values())e.push(this.buildResult(t));return this.activeProfiles.clear(),e}recordRender(e,t){let n=this.activeProfiles.get(e);if(!n)return;let r={duration:t,timestamp:Date.now(),isSlow:t>n.slowThreshold};n.records.push(r)}getSnapshot(e){let t=this.activeProfiles.get(e);return t?this.buildResult(t):null}isProfiling(e){return this.activeProfiles.has(e)}getActiveProfileNames(){return Array.from(this.activeProfiles.keys())}getActiveProfileCount(){return this.activeProfiles.size}getSlowRenders(e){let t=this.activeProfiles.get(e);return t?t.records.filter(n=>n.isSlow):[]}setSlowThreshold(e){this.slowThreshold=e;for(let t of this.activeProfiles.values()){t.slowThreshold=e;for(let n of t.records)n.isSlow=n.duration>e}}getSlowThreshold(){return this.slowThreshold}clear(){this.activeProfiles.clear()}destroy(){this.clear()}buildResult(e){let t=e.records,n=t.length,r=t.reduce((a,c)=>a+c.duration,0),o=n>0?r/n:0,i=n>0?Math.max(...t.map(a=>a.duration)):0,l=n>0?Math.min(...t.map(a=>a.duration)):0,d=t.filter(a=>a.isSlow).length,p=performance.now()-e.startTime;return{componentName:e.componentName,renderCount:n,avgRenderTime:o,maxRenderTime:i,minRenderTime:l,totalRenderTime:r,slowRenderCount:d,slowThreshold:e.slowThreshold,records:[...t],profileDuration:p}}};var ee=class{constructor(e,t){this.entries=new Map;this.isRecording=!1;this.fpsUpdateTimer=null;var n,r;this.container=e,this.config={autoStartFPS:(n=t==null?void 0:t.autoStartFPS)!=null?n:!1,fpsUpdateInterval:(r=t==null?void 0:t.fpsUpdateInterval)!=null?r:1e3},this.fpsUpdateInterval=this.config.fpsUpdateInterval,this.collector=new B,this.profiler=new A,this.config.autoStartFPS&&this.collector.startFPSMonitor(),this.render()}recordRender(e,t){let n=this.entries.get(e)||{name:e,renders:0,totalTime:0,avgTime:0,maxTime:0,lastTime:0};n.renders++,n.totalTime+=t,n.avgTime=n.totalTime/n.renders,n.maxTime=Math.max(n.maxTime,t),n.lastTime=t,this.entries.set(e,n),this.collector.recordRender(e,t,"update"),this.profiler.recordRender(e,t),this.render()}getStats(){return Array.from(this.entries.values()).sort((e,t)=>t.totalTime-e.totalTime)}getEntry(e){return this.entries.get(e)||null}getTotalRenders(){let e=0;for(let t of this.entries.values())e+=t.renders;return e}getTotalTime(){let e=0;for(let t of this.entries.values())e+=t.totalTime;return e}clear(){this.entries.clear(),this.collector.clear(),this.profiler.clear(),this.render()}getCurrentFPS(){return this.collector.getCurrentFPS()}startFPSMonitor(){this.collector.startFPSMonitor(),this.startFPSUpdateLoop()}stopFPSMonitor(){this.collector.stopFPSMonitor(),this.stopFPSUpdateLoop()}isFPSMonitoring(){return this.collector.isFPSMonitoring()}getRenderRankings(){return this.collector.getRenderRankings()}getUpdateFrequencyStats(){return this.collector.getReport().updateFrequencyStats}recordProxyCount(e,t){this.collector.recordMemory(e,t)}getProxyCount(){return this.collector.getProxyCount()}startRecording(){this.isRecording=!0,this.collector.startRecording(),this.startFPSUpdateLoop(),this.render()}stopRecording(){this.isRecording=!1,this.collector.stopRecording(),this.stopFPSUpdateLoop(),this.render()}isRecordingActive(){return this.isRecording}exportJSON(){return this.collector.exportJSON()}getReport(){return this.collector.getReport()}startProfile(e){return this.profiler.startProfile(e)}stopProfile(e){return this.profiler.stopProfile(e)}getProfileSnapshot(e){return this.profiler.getSnapshot(e)}getSlowRenders(){return this.getStats().filter(e=>e.maxTime>16)}getCollector(){return this.collector}getProfiler(){return this.profiler}render(){this.container.innerHTML="";let e=document.createElement("div");e.style.cssText="display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;";let t=this.getCurrentFPS(),n=t>=55?"#a6e3a1":t>=30?"#f9e2af":"#f38ba8",r=this.createStatCard("FPS",String(t),n),o=this.createStatCard("Proxies",String(this.getProxyCount()),"#cba6f7"),i=this.createStatCard("Total Renders",String(this.getTotalRenders()),"#89b4fa"),l=this.createStatCard("Total Time",`${this.getTotalTime().toFixed(2)}ms`,"#a6e3a1"),d=this.createStatCard("Components",String(this.entries.size),"#f9e2af");e.appendChild(r),e.appendChild(o),e.appendChild(i),e.appendChild(l),e.appendChild(d),this.container.appendChild(e);let p=document.createElement("div");p.style.cssText="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;";let a=document.createElement("span");a.style.cssText="font-size: 11px; color: #a6adc8; text-transform: uppercase; letter-spacing: 0.5px;",a.textContent="Render Performance",p.appendChild(a);let c=document.createElement("div");c.style.cssText="display: flex; gap: 4px;";let u=document.createElement("button");u.style.cssText=this.getRecordButtonStyle(),u.textContent=this.isRecording?"Stop":"Record",u.addEventListener("click",()=>{this.isRecording?this.stopRecording():this.startRecording()}),c.appendChild(u);let h=document.createElement("button");h.style.cssText="background: transparent; border: 1px solid #45475a; color: #a6adc8; cursor: pointer; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-family: inherit;",h.textContent="Export",h.addEventListener("click",()=>{let x=this.exportJSON(),v=new Blob([x],{type:"application/json"}),y=URL.createObjectURL(v),g=document.createElement("a");g.href=y,g.download=`lyt-perf-${Date.now()}.json`,g.click(),URL.revokeObjectURL(y)}),c.appendChild(h);let f=document.createElement("button");f.style.cssText="background: transparent; border: 1px solid #45475a; color: #a6adc8; cursor: pointer; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-family: inherit;",f.textContent="Clear",f.addEventListener("click",()=>this.clear()),c.appendChild(f),p.appendChild(c),this.container.appendChild(p);let m=this.getStats().sort((x,v)=>v.avgTime-x.avgTime);if(m.length===0){let x=document.createElement("div");x.style.cssText="color: #585b70; font-size: 12px; text-align: center; padding: 16px 0; font-style: italic;",x.textContent="No performance data recorded",this.container.appendChild(x)}else{let x=document.createElement("div");x.style.cssText="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 4px; padding: 4px 8px; font-size: 10px; color: #585b70; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #313244; margin-bottom: 4px;",x.innerHTML="<span>Component</span><span>Renders</span><span>Avg</span><span>Max</span><span>Last</span>",this.container.appendChild(x);let v=document.createElement("div");v.style.cssText="max-height: 300px; overflow-y: auto;";for(let y of m){let g=document.createElement("div");g.style.cssText="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 4px; padding: 6px 8px; font-size: 12px; border-radius: 3px; transition: background 0.15s; cursor: default;",g.addEventListener("mouseenter",()=>{g.style.background="#313244"}),g.addEventListener("mouseleave",()=>{g.style.background="transparent"});let b=document.createElement("span");b.style.cssText="color: #cdd6f4; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;",b.textContent=y.name;let T=document.createElement("span");T.style.cssText="color: #89b4fa;",T.textContent=String(y.renders);let le=document.createElement("span");le.style.cssText=this.getPerfColor(y.avgTime),le.textContent=`${y.avgTime.toFixed(2)}ms`;let de=document.createElement("span");de.style.cssText=this.getPerfColor(y.maxTime),de.textContent=`${y.maxTime.toFixed(2)}ms`;let ce=document.createElement("span");ce.style.cssText=this.getPerfColor(y.lastTime),ce.textContent=`${y.lastTime.toFixed(2)}ms`,g.appendChild(b),g.appendChild(T),g.appendChild(le),g.appendChild(de),g.appendChild(ce),v.appendChild(g)}this.container.appendChild(v)}}createStatCard(e,t,n){let r=document.createElement("div");r.style.cssText="flex: 1; padding: 8px 12px; background: #181825; border: 1px solid #313244; border-radius: 4px; min-width: 70px;";let o=document.createElement("div");o.style.cssText=`font-size: 16px; font-weight: 600; color: ${n}; margin-bottom: 2px;`,o.textContent=t;let i=document.createElement("div");return i.style.cssText="font-size: 10px; color: #585b70; text-transform: uppercase; letter-spacing: 0.5px;",i.textContent=e,r.appendChild(o),r.appendChild(i),r}getRecordButtonStyle(){return this.isRecording?"background: #f38ba8; border: 1px solid #f38ba8; color: #1e1e2e; cursor: pointer; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-family: inherit; font-weight: 600;":"background: transparent; border: 1px solid #45475a; color: #a6adc8; cursor: pointer; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-family: inherit;"}getPerfColor(e){return e<1?"color: #a6e3a1;":e<5?"color: #f9e2af;":e<16?"color: #fab387;":"color: #f38ba8;"}startFPSUpdateLoop(){this.stopFPSUpdateLoop(),this.fpsUpdateTimer=window.setInterval(()=>{this.render()},this.fpsUpdateInterval)}stopFPSUpdateLoop(){this.fpsUpdateTimer!==null&&(clearInterval(this.fpsUpdateTimer),this.fpsUpdateTimer=null)}destroy(){this.stopFPSUpdateLoop(),this.collector.destroy(),this.profiler.destroy(),this.container.innerHTML="",this.entries.clear()}};var te=class{constructor(e){this.buffer=[];this._paused=!1;this.filterPattern="";this.counter=0;this.writeIndex=0;this.bufferFull=!1;this.element=null;var t,n,r;this.maxBuffer=(t=e==null?void 0:e.maxBuffer)!=null?t:200,this.autoScroll=(n=e==null?void 0:e.autoScroll)!=null?n:!0,this.title=(r=e==null?void 0:e.title)!=null?r:"\u4E8B\u4EF6\u9762\u677F"}captureEvent(e,t,n){if(this._paused)return;let r={name:e,payload:t,sourceComponent:n,timestamp:Date.now(),index:this.counter++};this.bufferFull?this.buffer[this.writeIndex]=r:(this.buffer.push(r),this.buffer.length>=this.maxBuffer&&(this.bufferFull=!0)),this.writeIndex=(this.writeIndex+1)%this.maxBuffer}getEvents(){let e=this.bufferFull?this.buffer.slice(this.writeIndex).concat(this.buffer.slice(0,this.writeIndex)):[...this.buffer];if(this.filterPattern){let t=this.filterPattern.toLowerCase();e=e.filter(n=>n.name.toLowerCase().includes(t)||n.sourceComponent&&n.sourceComponent.toLowerCase().includes(t))}return e}getAllEvents(){return this.bufferFull?this.buffer.slice(this.writeIndex).concat(this.buffer.slice(0,this.writeIndex)):[...this.buffer]}clear(){this.buffer=[],this.writeIndex=0,this.bufferFull=!1}setFilter(e){this.filterPattern=e}getFilter(){return this.filterPattern}pause(){this._paused=!0}resume(){this._paused=!1}isPaused(){return this._paused}exportJSON(){let e=this.getEvents();return JSON.stringify(e,null,2)}getCount(){return this.bufferFull?this.maxBuffer:this.buffer.length}getMaxBuffer(){return this.maxBuffer}render(){this.element&&this.element.remove();let e=document.createElement("div");e.className="lyt-event-panel",e.style.cssText="font-family: monospace; font-size: 12px; color: #cdd6f4;";let t=document.createElement("div");t.style.cssText="display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1e1e2e; border-bottom: 1px solid #313244;";let n=document.createElement("span");n.textContent=this.title,n.style.cssText="font-weight: bold; font-size: 13px;",t.appendChild(n);let r=document.createElement("div");r.style.cssText="display: flex; gap: 4px;";let o=document.createElement("button");o.textContent=this._paused?"\u6062\u590D":"\u6682\u505C",o.style.cssText="padding: 2px 8px; border: 1px solid #45475a; background: #313244; color: #cdd6f4; cursor: pointer; border-radius: 3px; font-size: 11px;",o.addEventListener("click",()=>{this._paused?this.resume():this.pause(),o.textContent=this._paused?"\u6062\u590D":"\u6682\u505C",this.render()}),r.appendChild(o);let i=document.createElement("button");i.textContent="\u6E05\u9664",i.style.cssText="padding: 2px 8px; border: 1px solid #45475a; background: #313244; color: #cdd6f4; cursor: pointer; border-radius: 3px; font-size: 11px;",i.addEventListener("click",()=>{this.clear(),this.render()}),r.appendChild(i);let l=document.createElement("button");l.textContent="\u5BFC\u51FA",l.style.cssText="padding: 2px 8px; border: 1px solid #45475a; background: #313244; color: #cdd6f4; cursor: pointer; border-radius: 3px; font-size: 11px;",l.addEventListener("click",()=>{let u=this.exportJSON(),h=new Blob([u],{type:"application/json"}),f=URL.createObjectURL(h),m=document.createElement("a");m.href=f,m.download=`lyt-events-${Date.now()}.json`,m.click(),URL.revokeObjectURL(f)}),r.appendChild(l),t.appendChild(r),e.appendChild(t);let d=document.createElement("div");d.style.cssText="padding: 6px 12px; background: #181825; border-bottom: 1px solid #313244;";let p=document.createElement("input");p.type="text",p.placeholder="\u8FC7\u6EE4\u4E8B\u4EF6\u540D\u79F0...",p.value=this.filterPattern,p.style.cssText="width: 100%; padding: 4px 8px; border: 1px solid #45475a; background: #1e1e2e; color: #cdd6f4; border-radius: 3px; font-size: 11px; box-sizing: border-box;",p.addEventListener("input",()=>{this.setFilter(p.value),this.render()}),d.appendChild(p),e.appendChild(d);let a=document.createElement("div");a.style.cssText="max-height: 400px; overflow-y: auto; padding: 4px 0;";let c=this.getEvents();if(c.length===0){let u=document.createElement("div");u.style.cssText="padding: 20px; text-align: center; color: #585b70;",u.textContent="\u6682\u65E0\u4E8B\u4EF6",a.appendChild(u)}else for(let u of c){let h=document.createElement("div");h.style.cssText="padding: 4px 12px; border-bottom: 1px solid #1e1e2e; cursor: pointer;";let f=new Date(u.timestamp),m=`${String(f.getHours()).padStart(2,"0")}:${String(f.getMinutes()).padStart(2,"0")}:${String(f.getSeconds()).padStart(2,"0")}.${String(f.getMilliseconds()).padStart(3,"0")}`,x="";try{x=JSON.stringify(u.payload),x.length>50&&(x=x.slice(0,50)+"...")}catch(y){x=String(u.payload)}let v=u.sourceComponent?` [${u.sourceComponent}]`:"";h.textContent=`${m} ${u.name}${v} ${x}`,a.appendChild(h)}return e.appendChild(a),this.autoScroll&&(a.scrollTop=a.scrollHeight),this.element=e,e}destroy(){this.element&&(this.element.remove(),this.element=null),this.clear()}};var ne=class{constructor(e){this.currentRoute=null;this.history=[];this.navCounter=0;this.element=null;this.selectedHistoryIndex=-1;var t,n;this.maxHistory=(t=e==null?void 0:e.maxHistory)!=null?t:50,this.title=(n=e==null?void 0:e.title)!=null?n:"\u8DEF\u7531\u9762\u677F"}onRouteChange(e,t,n){let r={index:this.navCounter++,to:{...e},from:{...t},timestamp:Date.now(),type:n!=null?n:"push"};this.history.push(r),this.history.length>this.maxHistory&&(this.history=this.history.slice(this.history.length-this.maxHistory)),this.currentRoute={...e},this.selectedHistoryIndex=-1}getCurrentRoute(){return this.currentRoute?{...this.currentRoute}:null}getHistory(){return this.history.map(e=>({...e,to:{...e.to},from:{...e.from}}))}clearHistory(){this.history=[],this.navCounter=0,this.selectedHistoryIndex=-1}getHistoryCount(){return this.history.length}getMaxHistory(){return this.maxHistory}selectHistoryEntry(e){e>=0&&e<this.history.length&&(this.selectedHistoryIndex=e)}getSelectedHistoryEntry(){if(this.selectedHistoryIndex>=0&&this.selectedHistoryIndex<this.history.length){let e=this.history[this.selectedHistoryIndex];return{...e,to:{...e.to},from:{...e.from}}}return null}render(){this.element&&this.element.remove();let e=document.createElement("div");e.className="lyt-router-panel",e.style.cssText="font-family: monospace; font-size: 12px; color: #cdd6f4;";let t=document.createElement("div");t.style.cssText="display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1e1e2e; border-bottom: 1px solid #313244;";let n=document.createElement("span");n.textContent=this.title,n.style.cssText="font-weight: bold; font-size: 13px;",t.appendChild(n);let r=document.createElement("button");r.textContent="\u6E05\u9664\u5386\u53F2",r.style.cssText="padding: 2px 8px; border: 1px solid #45475a; background: #313244; color: #cdd6f4; cursor: pointer; border-radius: 3px; font-size: 11px;",r.addEventListener("click",()=>{this.clearHistory(),this.render()}),t.appendChild(r),e.appendChild(t);let o=document.createElement("div");o.style.cssText="padding: 8px 12px; background: #181825; border-bottom: 1px solid #313244;";let i=document.createElement("div");if(i.style.cssText="color: #a6adc8; font-size: 11px; margin-bottom: 4px;",i.textContent="\u5F53\u524D\u8DEF\u7531",o.appendChild(i),this.currentRoute){let a=document.createElement("div");if(a.style.cssText="font-weight: bold; font-size: 14px; color: #89b4fa;",a.textContent=this.currentRoute.path,o.appendChild(a),this.currentRoute.params&&Object.keys(this.currentRoute.params).length>0){let c=document.createElement("div");c.style.cssText="margin-top: 4px; color: #a6e3a1; font-size: 11px;",c.textContent=`params: ${JSON.stringify(this.currentRoute.params)}`,o.appendChild(c)}if(this.currentRoute.query&&Object.keys(this.currentRoute.query).length>0){let c=document.createElement("div");c.style.cssText="margin-top: 2px; color: #f9e2af; font-size: 11px;",c.textContent=`query: ${JSON.stringify(this.currentRoute.query)}`,o.appendChild(c)}if(this.currentRoute.name){let c=document.createElement("div");c.style.cssText="margin-top: 2px; color: #cba6f7; font-size: 11px;",c.textContent=`name: ${this.currentRoute.name}`,o.appendChild(c)}}else{let a=document.createElement("div");a.style.cssText="color: #585b70; font-size: 11px;",a.textContent="\u6682\u65E0\u8DEF\u7531\u4FE1\u606F",o.appendChild(a)}e.appendChild(o);let l=document.createElement("div");l.style.cssText="padding: 8px 12px; background: #1e1e2e; border-bottom: 1px solid #313244;";let d=document.createElement("div");d.style.cssText="color: #a6adc8; font-size: 11px; margin-bottom: 4px;",d.textContent=`\u5BFC\u822A\u5386\u53F2 (${this.history.length})`,l.appendChild(d),e.appendChild(l);let p=document.createElement("div");if(p.style.cssText="max-height: 300px; overflow-y: auto;",this.history.length===0){let a=document.createElement("div");a.style.cssText="padding: 20px; text-align: center; color: #585b70;",a.textContent="\u6682\u65E0\u5BFC\u822A\u8BB0\u5F55",p.appendChild(a)}else for(let a=this.history.length-1;a>=0;a--){let c=this.history[a],u=document.createElement("div"),h=a===this.selectedHistoryIndex;u.style.cssText=`padding: 4px 12px; border-bottom: 1px solid #1e1e2e; cursor: pointer;${h?" background: #313244;":""}`;let f=new Date(c.timestamp),m=`${String(f.getHours()).padStart(2,"0")}:${String(f.getMinutes()).padStart(2,"0")}:${String(f.getSeconds()).padStart(2,"0")}`,x=c.type==="pop"?"<-":c.type==="replace"?"=":">";u.textContent=`${m} ${x} ${c.from.path} -> ${c.to.path}`;let v=a;u.addEventListener("click",()=>{this.selectHistoryEntry(v),this.render()}),p.appendChild(u)}if(e.appendChild(p),this.selectedHistoryIndex>=0){let a=this.history[this.selectedHistoryIndex];if(a){let c=document.createElement("div");c.style.cssText="padding: 8px 12px; background: #181825; border-top: 1px solid #313244;";let u=document.createElement("div");u.style.cssText="color: #a6adc8; font-size: 11px; margin-bottom: 4px;",u.textContent="\u5BFC\u822A\u8BE6\u60C5",c.appendChild(u);let h=document.createElement("div");h.style.cssText="font-size: 11px; line-height: 1.6;";let f=a.from,m=a.to;h.innerHTML=`
|
|
585
|
+
<div><span style="color:#a6adc8;">\u7C7B\u578B:</span> ${a.type}</div>
|
|
586
|
+
<div><span style="color:#a6adc8;">\u6765\u6E90:</span> ${f.path}</div>
|
|
587
|
+
${f.params?`<div><span style="color:#a6adc8;">\u6765\u6E90\u53C2\u6570:</span> ${JSON.stringify(f.params)}</div>`:""}
|
|
588
|
+
${f.query?`<div><span style="color:#a6adc8;">\u6765\u6E90\u67E5\u8BE2:</span> ${JSON.stringify(f.query)}</div>`:""}
|
|
589
|
+
<div><span style="color:#a6adc8;">\u76EE\u6807:</span> ${m.path}</div>
|
|
590
|
+
${m.params?`<div><span style="color:#a6adc8;">\u76EE\u6807\u53C2\u6570:</span> ${JSON.stringify(m.params)}</div>`:""}
|
|
591
|
+
${m.query?`<div><span style="color:#a6adc8;">\u76EE\u6807\u67E5\u8BE2:</span> ${JSON.stringify(m.query)}</div>`:""}
|
|
592
|
+
<div><span style="color:#a6adc8;">\u65F6\u95F4:</span> ${new Date(a.timestamp).toLocaleString("zh-CN")}</div>
|
|
593
|
+
`,c.appendChild(h),e.appendChild(c)}}return this.element=e,e}destroy(){this.element&&(this.element.remove(),this.element=null),this.clearHistory(),this.currentRoute=null}};var re=class{constructor(e,t){this.components=[];this.flatNodes=[];this.expandedMap=new Map;this.filterQuery="";this.selectedId=null;this.scrollTop=0;this.scrollContainer=null;this.contentContainer=null;this.viewportContainer=null;this.destroyed=!1;var n,r,o,i;this.container=e,this.nodeHeight=(n=t==null?void 0:t.nodeHeight)!=null?n:28,this.visibleHeight=(r=t==null?void 0:t.visibleHeight)!=null?r:400,this.indentWidth=(o=t==null?void 0:t.indentWidth)!=null?o:20,this.onNodeClick=t==null?void 0:t.onNodeClick,this.defaultExpandAll=(i=t==null?void 0:t.defaultExpandAll)!=null?i:!1,this.boundScrollHandler=this.handleScroll.bind(this),this.renderContainer()}setComponents(e){this.components=e,this.defaultExpandAll&&this.components.length>0&&this.expandAllInternal(),this.flatten(),this.renderNodes()}setSelectedComponent(e){this.selectedId=e,this.renderNodes()}setFilter(e){this.filterQuery=e,this.flatten(),this.renderNodes()}expandAll(){this.expandAllInternal(),this.flatten(),this.renderNodes()}collapseAll(){this.expandedMap.clear(),this.flatten(),this.renderNodes()}destroy(){this.destroyed=!0,this.scrollContainer&&this.scrollContainer.removeEventListener("scroll",this.boundScrollHandler),this.container.innerHTML="",this.flatNodes=[],this.expandedMap.clear(),this.components=[],this.scrollContainer=null,this.contentContainer=null,this.viewportContainer=null}isAllExpanded(){if(this.components.length===0)return!1;for(let e of this.components)if(!this.expandedMap.get(e.id))return!1;return!0}expandAllInternal(){let e=t=>{for(let n of t)n.children&&n.children.length>0&&(this.expandedMap.set(n.id,!0),e(n.children))};e(this.components)}flatten(){this.flatNodes=[];let e=0,t=this.filterQuery.toLowerCase(),n=o=>!t||o.name.toLowerCase().includes(t)?!0:o.children?o.children.some(i=>n(i)):!1,r=(o,i,l)=>{var d;for(let p of o){let a=!t||p.name.toLowerCase().includes(t),c=n(p),u=(d=this.expandedMap.get(p.id))!=null?d:!1,h;t?h=l&&c:h=l;let f={node:p,depth:i,expanded:u,visible:h,flatIndex:e++};this.flatNodes.push(f),p.children&&p.children.length>0&&(t?r(p.children,i+1,h):r(p.children,i+1,h&&u))}};r(this.components,0,!0)}getVisibleNodes(){return this.flatNodes.filter(e=>e.visible)}renderContainer(){this.container.innerHTML="";let e=document.createElement("div");e.style.cssText="position: relative; overflow: hidden;",this.scrollContainer=document.createElement("div"),this.scrollContainer.style.cssText=`overflow-y: auto; height: ${this.visibleHeight}px; position: relative;`,this.scrollContainer.addEventListener("scroll",this.boundScrollHandler),this.contentContainer=document.createElement("div"),this.contentContainer.style.cssText="position: relative; width: 100%;",this.viewportContainer=document.createElement("div"),this.viewportContainer.style.cssText="position: absolute; top: 0; left: 0; right: 0;",this.contentContainer.appendChild(this.viewportContainer),this.scrollContainer.appendChild(this.contentContainer),e.appendChild(this.scrollContainer),this.container.appendChild(e)}renderNodes(){if(!this.contentContainer||!this.viewportContainer||this.destroyed)return;let e=this.getVisibleNodes(),t=e.length*this.nodeHeight;this.contentContainer.style.height=`${t}px`;let n=Math.floor(this.scrollTop/this.nodeHeight),r=Math.min(n+Math.ceil(this.visibleHeight/this.nodeHeight)+1,e.length);this.viewportContainer.innerHTML="";for(let o=n;o<r;o++){let i=e[o],l=this.createNodeElement(i,o);this.viewportContainer.appendChild(l)}}createNodeElement(e,t){let n=document.createElement("div"),r=e.node.id===this.selectedId,o=e.node.active,i=e.node.children&&e.node.children.length>0;n.style.cssText=`
|
|
594
|
+
position: absolute;
|
|
595
|
+
top: ${t*this.nodeHeight}px;
|
|
596
|
+
left: 0;
|
|
597
|
+
right: 0;
|
|
598
|
+
height: ${this.nodeHeight}px;
|
|
599
|
+
line-height: ${this.nodeHeight}px;
|
|
600
|
+
padding-left: ${e.depth*this.indentWidth+8}px;
|
|
601
|
+
cursor: pointer;
|
|
602
|
+
font-family: monospace;
|
|
603
|
+
font-size: 12px;
|
|
604
|
+
white-space: nowrap;
|
|
605
|
+
overflow: hidden;
|
|
606
|
+
text-overflow: ellipsis;
|
|
607
|
+
box-sizing: border-box;
|
|
608
|
+
background: ${r?"#313244":"transparent"};
|
|
609
|
+
color: ${o?"#89b4fa":"#cdd6f4"};
|
|
610
|
+
border-bottom: 1px solid #1e1e2e;
|
|
611
|
+
`;let l=document.createElement("span");l.style.cssText="display: inline-block; width: 14px; text-align: center; margin-right: 4px; font-size: 10px; color: #585b70;",i?l.textContent=e.expanded?"\u25BC":"\u25B6":l.textContent="\xB7",n.appendChild(l);let d=document.createElement("span");if(d.textContent=e.node.name,d.style.cssText="font-weight: bold;",n.appendChild(d),e.node.stateSummary){let c=document.createElement("span");c.textContent=` ${e.node.stateSummary}`,c.style.cssText="color: #a6adc8; font-size: 10px; margin-left: 6px;",n.appendChild(c)}if(e.node.propsCount!==void 0&&e.node.propsCount>0){let c=document.createElement("span");c.textContent=` [${e.node.propsCount} props]`,c.style.cssText="color: #585b70; font-size: 10px; margin-left: 4px;",n.appendChild(c)}let p=e.node,a=p.id;return n.addEventListener("click",()=>{var c;if(i){let u=(c=this.expandedMap.get(a))!=null?c:!1;this.expandedMap.set(a,!u),this.flatten(),this.renderNodes()}this.selectedId=a,this.onNodeClick&&this.onNodeClick(p)}),n}handleScroll(e){if(this.destroyed)return;let t=e.target;this.scrollTop=t.scrollTop,this.renderNodes()}getFlatNodes(){return[...this.flatNodes]}getVisibleNodeCount(){return this.getVisibleNodes().length}getTotalNodeCount(){return this.flatNodes.length}};var me=class{constructor(e){this.head=0;this.count=0;this.capacity=e,this.buffer=new Array(e).fill(void 0)}push(e){let t=(this.head+this.count)%this.capacity;this.buffer[t]=e,this.count<this.capacity?this.count++:this.head=(this.head+1)%this.capacity}getAll(){let e=[];for(let t=0;t<this.count;t++){let n=this.buffer[(this.head+t)%this.capacity];n!==void 0&&e.push(n)}return e}get size(){return this.count}get isEmpty(){return this.count===0}clear(){this.buffer.fill(void 0),this.head=0,this.count=0}},Xe=100,Ge=1024,Qe=.7,Ze=5,oe=class{constructor(e){this.counter=0;var t,n,r,o;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:Xe,leakGrowthThreshold:(n=e==null?void 0:e.leakGrowthThreshold)!=null?n:Ge,leakRSquaredThreshold:(r=e==null?void 0:e.leakRSquaredThreshold)!=null?r:Qe,leakMinSnapshots:(o=e==null?void 0:e.leakMinSnapshots)!=null?o:Ze},this.snapshots=new me(this.config.bufferSize)}trackMemoryUsage(e,t,n,r){if(e===void 0){let i=performance.memory;i&&(e=i.usedJSHeapSize,t=i.totalJSHeapSize,n=i.jsHeapSizeLimit)}if(e===void 0)return null;let o={timestamp:r!=null?r:Date.now(),usedJSHeapSize:e,totalJSHeapSize:t!=null?t:0,jsHeapSizeLimit:n!=null?n:0,index:this.counter++};return this.snapshots.push(o),o}getMemoryTrend(){let e=this.snapshots.getAll();return e.length===0?[]:e.map((t,n)=>{let r=n>0?e[n-1]:null,o=r?t.usedJSHeapSize-r.usedJSHeapSize:0,i=t.jsHeapSizeLimit>0?t.usedJSHeapSize/t.jsHeapSizeLimit*100:0;return{timestamp:t.timestamp,usedJSHeapSize:t.usedJSHeapSize,delta:o,usagePercent:i}})}detectMemoryLeak(){let e=this.snapshots.getAll();if(e.length<this.config.leakMinSnapshots)return{hasLeak:!1,severity:"none",description:`\u5FEB\u7167\u6570\u91CF\u4E0D\u8DB3\uFF08\u9700\u8981\u81F3\u5C11 ${this.config.leakMinSnapshots} \u4E2A\uFF0C\u5F53\u524D ${e.length} \u4E2A\uFF09`,snapshotCount:e.length,growthRate:0,rSquared:0};let t=e.length,n=0,r=0,o=0,i=0,l=0;for(let g=0;g<t;g++){let b=g,T=e[g].usedJSHeapSize;n+=b,r+=T,o+=b*T,i+=b*b,l+=T*T}let d=t*i-n*n,p=d!==0?(t*o-n*r)/d:0,a=r/t,c=0,u=0;for(let g=0;g<t;g++){let b=e[g].usedJSHeapSize,T=p*g+(r-p*n)/t;c+=(b-a)*(b-a),u+=(b-T)*(b-T)}let h=c!==0?1-u/c:0,f=(e[t-1].timestamp-e[0].timestamp)/1e3,m=f>0?p/f:0,x=h>=this.config.leakRSquaredThreshold&&m>=this.config.leakGrowthThreshold,v="none",y="\u672A\u68C0\u6D4B\u5230\u5185\u5B58\u6CC4\u6F0F";return x&&(m>=this.config.leakGrowthThreshold*10?(v="high",y=`\u68C0\u6D4B\u5230\u4E25\u91CD\u5185\u5B58\u6CC4\u6F0F\uFF0C\u589E\u957F\u901F\u7387 ${Math.round(m)} bytes/s\uFF0CR\xB2=${h.toFixed(3)}`):m>=this.config.leakGrowthThreshold*3?(v="medium",y=`\u68C0\u6D4B\u5230\u4E2D\u7B49\u5185\u5B58\u6CC4\u6F0F\uFF0C\u589E\u957F\u901F\u7387 ${Math.round(m)} bytes/s\uFF0CR\xB2=${h.toFixed(3)}`):(v="low",y=`\u68C0\u6D4B\u5230\u8F7B\u5FAE\u5185\u5B58\u6CC4\u6F0F\uFF0C\u589E\u957F\u901F\u7387 ${Math.round(m)} bytes/s\uFF0CR\xB2=${h.toFixed(3)}`)),{hasLeak:x,severity:v,description:y,snapshotCount:t,growthRate:m,rSquared:h}}getMemoryReport(){let e=this.snapshots.getAll(),t=this.getMemoryTrend(),n=this.detectMemoryLeak(),r=null,o=0,i=0,l=0,d=1/0;for(let c of e)(!r||c.timestamp>r.timestamp)&&(r=c),c.usedJSHeapSize>o&&(o=c.usedJSHeapSize,i=c.timestamp),l+=c.usedJSHeapSize,c.usedJSHeapSize<d&&(d=c.usedJSHeapSize);let p=e.length>0?l/e.length:0;d===1/0&&(d=0);let a=e.length>=2?e[e.length-1].usedJSHeapSize-e[0].usedJSHeapSize:0;return{generatedAt:Date.now(),current:r,peakUsage:o,peakTimestamp:i,averageUsage:p,minUsage:d,totalGrowth:a,trend:t,leakDetection:n,snapshotCount:e.length}}getSnapshots(){return this.snapshots.getAll()}getSnapshotCount(){return this.snapshots.size}clear(){this.snapshots.clear(),this.counter=0}destroy(){this.clear()}};var fe=class{constructor(e){this.head=0;this.count=0;this.capacity=e,this.buffer=new Array(e).fill(void 0)}push(e){let t=(this.head+this.count)%this.capacity;this.buffer[t]=e,this.count<this.capacity?this.count++:this.head=(this.head+1)%this.capacity}getAll(){let e=[];for(let t=0;t<this.count;t++){let n=this.buffer[(this.head+t)%this.capacity];n!==void 0&&e.push(n)}return e}get size(){return this.count}get isEmpty(){return this.count===0}clear(){this.buffer.fill(void 0),this.head=0,this.count=0}},et=200,tt=16,se=class{constructor(e){this.counter=0;var t,n;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:et,slowThreshold:(n=e==null?void 0:e.slowThreshold)!=null?n:tt},this.records=new fe(this.config.bufferSize)}trackRender(e,t){this.records.push({componentName:e,duration:t,timestamp:Date.now(),index:this.counter++})}getSlowRenderers(e){let t=e!=null?e:this.config.slowThreshold;return this.records.getAll().filter(r=>r.duration>t).map(r=>({componentName:r.componentName,duration:r.duration,timestamp:r.timestamp,overThreshold:r.duration-t})).sort((r,o)=>o.duration-r.duration)}getRenderStats(){let e=this.records.getAll(),t=this.config.slowThreshold;if(e.length===0)return{totalRenders:0,totalDuration:0,avgDuration:0,maxDuration:0,minDuration:0,slowRenderCount:0,slowRenderRatio:0,byComponent:[]};let n=0,r=-1/0,o=1/0,i=0,l=new Map;for(let p of e){n+=p.duration,p.duration>r&&(r=p.duration),p.duration<o&&(o=p.duration),p.duration>t&&i++;let a=l.get(p.componentName);a||(a={renderCount:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,slowCount:0},l.set(p.componentName,a)),a.renderCount++,a.totalDuration+=p.duration,p.duration>a.maxDuration&&(a.maxDuration=p.duration),p.duration<a.minDuration&&(a.minDuration=p.duration),p.duration>t&&a.slowCount++}let d=Array.from(l.entries()).map(([p,a])=>({componentName:p,renderCount:a.renderCount,avgDuration:a.totalDuration/a.renderCount,maxDuration:a.maxDuration===-1/0?0:a.maxDuration,minDuration:a.minDuration===1/0?0:a.minDuration,totalDuration:a.totalDuration,slowCount:a.slowCount})).sort((p,a)=>a.avgDuration-p.avgDuration);return{totalRenders:e.length,totalDuration:n,avgDuration:n/e.length,maxDuration:r===-1/0?0:r,minDuration:o===1/0?0:o,slowRenderCount:i,slowRenderRatio:i/e.length,byComponent:d}}getRenderTimeline(){let e=this.records.getAll(),t=this.config.slowThreshold;return e.map((n,r)=>({componentName:n.componentName,duration:n.duration,timestamp:n.timestamp,isSlow:n.duration>t,gap:r>0?n.timestamp-e[r-1].timestamp:-1}))}getRecords(){return this.records.getAll()}getRecordCount(){return this.records.size}clear(){this.records.clear(),this.counter=0}destroy(){this.clear()}};var ge=class{constructor(e){this.head=0;this.count=0;this.capacity=e,this.buffer=new Array(e).fill(void 0)}push(e){let t=(this.head+this.count)%this.capacity;this.buffer[t]=e,this.count<this.capacity?this.count++:this.head=(this.head+1)%this.capacity}getAll(){let e=[];for(let t=0;t<this.count;t++){let n=this.buffer[(this.head+t)%this.capacity];n!==void 0&&e.push(n)}return e}get size(){return this.count}get isEmpty(){return this.count===0}clear(){this.buffer.fill(void 0),this.head=0,this.count=0}},nt=100,rt=1e3,ot=2,ie=class{constructor(e){this.pending=new Map;this.counter=0;var t,n,r;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:nt,slowThreshold:(n=e==null?void 0:e.slowThreshold)!=null?n:rt,outlierSigmaThreshold:(r=e==null?void 0:e.outlierSigmaThreshold)!=null?r:ot},this.records=new ge(this.config.bufferSize)}startBatch(e){return this.pending.has(e)?!1:(this.pending.set(e,Date.now()),!0)}endBatch(e){let t=this.pending.get(e);if(t===void 0)return null;let n=Date.now(),r=n-t;this.pending.delete(e);let o={name:e,startTime:t,endTime:n,duration:r,index:this.counter++};return this.records.push(o),o}getBatchStats(){let e=this.records.getAll();if(e.length===0)return{totalBatches:0,totalDuration:0,avgDuration:0,maxDuration:0,minDuration:0,byName:[]};let t=0,n=-1/0,r=1/0,o=new Map;for(let l of e){t+=l.duration,l.duration>n&&(n=l.duration),l.duration<r&&(r=l.duration);let d=o.get(l.name);d||(d={count:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,durations:[]},o.set(l.name,d)),d.count++,d.totalDuration+=l.duration,l.duration>d.maxDuration&&(d.maxDuration=l.duration),l.duration<d.minDuration&&(d.minDuration=l.duration),d.durations.push(l.duration)}let i=Array.from(o.entries()).map(([l,d])=>{let p=d.totalDuration/d.count,a=0;for(let u of d.durations)a+=(u-p)*(u-p);a/=d.count;let c=Math.sqrt(a);return{name:l,count:d.count,avgDuration:p,maxDuration:d.maxDuration===-1/0?0:d.maxDuration,minDuration:d.minDuration===1/0?0:d.minDuration,totalDuration:d.totalDuration,stdDev:c}});return{totalBatches:e.length,totalDuration:t,avgDuration:t/e.length,maxDuration:n===-1/0?0:n,minDuration:r===1/0?0:r,byName:i}}detectAnomalousBatches(){let e=this.records.getAll();if(e.length===0)return[];let t=this.getBatchStats(),n=[],r=new Map;for(let o of t.byName)r.set(o.name,o);for(let o of e){let i=r.get(o.name);if(o.duration>this.config.slowThreshold){n.push({name:o.name,duration:o.duration,timestamp:o.endTime,anomalyType:"slow",description:`\u64CD\u4F5C "${o.name}" \u8017\u65F6 ${o.duration.toFixed(1)}ms\uFF0C\u8D85\u8FC7\u6162\u64CD\u4F5C\u9608\u503C ${this.config.slowThreshold}ms`,deviationSigma:i&&i.stdDev>0?(o.duration-i.avgDuration)/i.stdDev:0});continue}if(i&&i.count>=2&&i.stdDev>0){let l=(o.duration-i.avgDuration)/i.stdDev;if(Math.abs(l)>this.config.outlierSigmaThreshold){let d=l>0?"slow":"fast";n.push({name:o.name,duration:o.duration,timestamp:o.endTime,anomalyType:d,description:`\u64CD\u4F5C "${o.name}" \u8017\u65F6 ${o.duration.toFixed(1)}ms\uFF0C\u504F\u79BB\u5E73\u5747\u503C ${l.toFixed(1)} \u4E2A\u6807\u51C6\u5DEE`,deviationSigma:l})}}}return n.sort((o,i)=>o.timestamp-i.timestamp),n}getRecords(){return this.records.getAll()}getRecordCount(){return this.records.size}getPendingBatches(){return Array.from(this.pending.keys())}clear(){this.records.clear(),this.pending.clear(),this.counter=0}destroy(){this.clear()}};var ae=class{constructor(e){this._installed=!1;this.app=null;var t,n,r,o,i,l;this.config={width:(t=e==null?void 0:e.width)!=null?t:420,height:(n=e==null?void 0:e.height)!=null?n:560,x:(r=e==null?void 0:e.x)!=null?r:void 0,y:(o=e==null?void 0:e.y)!=null?o:void 0,autoShow:(i=e==null?void 0:e.autoShow)!=null?i:!0,title:(l=e==null?void 0:e.title)!=null?l:"Lyt DevTools"},this.panel=new D({width:this.config.width,height:this.config.height,x:this.config.x,y:this.config.y,title:this.config.title}),this.componentTree=new I(this.panel,d=>{this.panel.switchTab("state"),this.stateInspector.refresh()}),this.stateInspector=new N(this.panel),this.eventTracker=new z(this.panel),this.timeTravel=new $(this.panel),this.panel.registerTabRenderer("components",d=>{this.componentTree.render(d)}),this.panel.registerTabRenderer("state",d=>{this.stateInspector.render(d)}),this.panel.registerTabRenderer("events",d=>{this.eventTracker.render(d)}),this.panel.registerTabRenderer("router",d=>{this.renderRouterTab(d)}),this.panel.renderContent(),this.config.autoShow||this.panel.hide()}install(e){if(this._installed){console.warn("[Lyt DevTools] DevTools \u5DF2\u7ECF\u5B89\u88C5\uFF0C\u4E0D\u80FD\u91CD\u590D\u5B89\u88C5\u3002");return}this.app=e,this._installed=!0,_(e,{onComponentCreated:n=>{this.componentTree.refresh()},onComponentUpdated:n=>{this.componentTree.refresh(),this.stateInspector.refresh()},onComponentUnmounted:n=>{this.componentTree.refresh()},onStateChanged:n=>{this.stateInspector.markChanged(`state.${n.path}`),this.stateInspector.refresh()},onEventEmitted:n=>{this.eventTracker.refresh()}}),this.panel.setConnected(!0),console.log("[Lyt DevTools] \u5DF2\u5B89\u88C5\u5230\u5E94\u7528\u3002\u6309 Ctrl+Shift+D \u5207\u6362\u9762\u677F\u663E\u793A\u3002")}show(){this.panel.show()}hide(){this.panel.hide()}toggle(){this.panel.toggle()}isVisible(){return this.panel.isVisible()}renderRouterTab(e){e.innerHTML="";let t=document.createElement("div");t.className="lyt-devtools-empty",t.style.cssText="padding: 40px 24px;",t.innerHTML=`
|
|
612
|
+
<div style="font-size: 32px; margin-bottom: 12px;">\u{1F517}</div>
|
|
613
|
+
<div style="color: #cdd6f4; font-size: 14px; margin-bottom: 8px; font-style: normal;">\u8DEF\u7531\u68C0\u67E5\u5668</div>
|
|
614
|
+
<div style="color: #585b70; font-size: 12px;">
|
|
615
|
+
\u6B64\u529F\u80FD\u9700\u8981\u5B89\u88C5 @lytjs/router \u5305\u3002<br>
|
|
616
|
+
\u8DEF\u7531\u68C0\u67E5\u5668\u5C06\u663E\u793A\u5F53\u524D\u8DEF\u7531\u4FE1\u606F\u3001<br>
|
|
617
|
+
\u8DEF\u7531\u5B88\u536B\u548C\u5BFC\u822A\u5386\u53F2\u3002
|
|
618
|
+
</div>
|
|
619
|
+
`,e.appendChild(t)}refreshTree(){this.app&&X(this.app),this.componentTree.refresh()}clearAllRecords(){G(),this.eventTracker.refresh(),this.stateInspector.refresh()}getPanel(){return this.panel}getComponentTree(){return this.componentTree}getStateInspector(){return this.stateInspector}getEventTracker(){return this.eventTracker}getTimeTravel(){return this.timeTravel}destroy(){this.componentTree.destroy(),this.stateInspector.destroy(),this.eventTracker.destroy(),this.timeTravel.destroy(),this.panel.destroy(),Q(),this._installed=!1,this.app=null,console.log("[Lyt DevTools] \u5DF2\u9500\u6BC1\u3002")}};function st(s){let e=null;return{install(t){if(e){console.warn("[Lyt DevTools] \u5DF2\u7ECF\u521B\u5EFA\uFF0C\u4E0D\u80FD\u91CD\u590D\u5B89\u88C5\u3002");return}e=new ae(s),t.globalProperties&&(t.globalProperties.__LYT_DEVTOOLS__=e);let n=t;(n._instance!==void 0||n.mount)&&e.install(n)}}}
|