@lytjs/devtools 4.0.5 → 4.2.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/README.md +153 -0
- package/dist/index.cjs +5 -5
- package/dist/index.mjs +4 -4
- package/dist/types/batch-analyzer.d.ts +150 -0
- package/dist/types/batch-analyzer.d.ts.map +1 -0
- package/dist/types/component-profiler.d.ts +144 -0
- package/dist/types/component-profiler.d.ts.map +1 -0
- package/dist/types/component-tree.d.ts +69 -0
- package/dist/types/component-tree.d.ts.map +1 -0
- package/dist/types/event-panel.d.ts +129 -0
- package/dist/types/event-panel.d.ts.map +1 -0
- package/dist/types/event-tracker.d.ts +80 -0
- package/dist/types/event-tracker.d.ts.map +1 -0
- package/dist/types/hooks.d.ts +177 -0
- package/dist/types/hooks.d.ts.map +1 -0
- package/dist/types/index.d.ts +185 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/memory-tracker.d.ts +148 -0
- package/dist/types/memory-tracker.d.ts.map +1 -0
- package/dist/types/panel.d.ts +182 -0
- package/dist/types/panel.d.ts.map +1 -0
- package/dist/types/perf-collector.d.ts +328 -0
- package/dist/types/perf-collector.d.ts.map +1 -0
- package/dist/types/perf-panel.d.ts +231 -0
- package/dist/types/perf-panel.d.ts.map +1 -0
- package/dist/types/render-tracker.d.ts +147 -0
- package/dist/types/render-tracker.d.ts.map +1 -0
- package/dist/types/route-panel.d.ts +68 -0
- package/dist/types/route-panel.d.ts.map +1 -0
- package/dist/types/router-panel-enhanced.d.ts +118 -0
- package/dist/types/router-panel-enhanced.d.ts.map +1 -0
- package/dist/types/state-inspector.d.ts +80 -0
- package/dist/types/state-inspector.d.ts.map +1 -0
- package/dist/types/time-travel.d.ts +189 -0
- package/dist/types/time-travel.d.ts.map +1 -0
- package/dist/types/virtual-tree.d.ts +168 -0
- package/dist/types/virtual-tree.d.ts.map +1 -0
- package/package.json +5 -3
package/README.md
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
# @lytjs/devtools
|
|
2
|
+
|
|
3
|
+
Lyt.js 开发者工具 - 提供组件树、状态查看、性能分析等功能。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @lytjs/devtools
|
|
9
|
+
|
|
10
|
+
# 或使用 pnpm
|
|
11
|
+
pnpm add @lytjs/devtools
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## 特性
|
|
15
|
+
|
|
16
|
+
- 🌲 组件树查看
|
|
17
|
+
- 📊 状态数据查看
|
|
18
|
+
- ⏱️ 性能分析
|
|
19
|
+
- 🔍 组件状态检查
|
|
20
|
+
- 🎯 零运行时依赖
|
|
21
|
+
|
|
22
|
+
## 快速开始
|
|
23
|
+
|
|
24
|
+
```javascript
|
|
25
|
+
import { createApp } from '@lytjs/core';
|
|
26
|
+
import { devtools } from '@lytjs/devtools';
|
|
27
|
+
|
|
28
|
+
const app = createApp(App);
|
|
29
|
+
app.use(devtools);
|
|
30
|
+
app.mount('#app');
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## 功能
|
|
34
|
+
|
|
35
|
+
### 组件树
|
|
36
|
+
|
|
37
|
+
查看应用的组件层次结构,包括:
|
|
38
|
+
|
|
39
|
+
- 组件名称
|
|
40
|
+
- 组件实例数量
|
|
41
|
+
- 组件状态(是否活跃)
|
|
42
|
+
- 组件嵌套关系
|
|
43
|
+
|
|
44
|
+
### 状态查看
|
|
45
|
+
|
|
46
|
+
查看和编辑组件的响应式状态:
|
|
47
|
+
|
|
48
|
+
- ref 值
|
|
49
|
+
- reactive 对象
|
|
50
|
+
- computed 属性
|
|
51
|
+
- watchers
|
|
52
|
+
|
|
53
|
+
### 性能分析
|
|
54
|
+
|
|
55
|
+
分析应用的性能数据:
|
|
56
|
+
|
|
57
|
+
- 组件渲染时间
|
|
58
|
+
- 响应式更新频率
|
|
59
|
+
- DOM 操作次数
|
|
60
|
+
- 内存使用情况
|
|
61
|
+
|
|
62
|
+
### 时间旅行
|
|
63
|
+
|
|
64
|
+
记录状态变化,支持时间旅行调试:
|
|
65
|
+
|
|
66
|
+
- 记录状态历史
|
|
67
|
+
- 跳转到任意状态
|
|
68
|
+
- 重放状态变化
|
|
69
|
+
|
|
70
|
+
## API 参考
|
|
71
|
+
|
|
72
|
+
### 安装插件
|
|
73
|
+
|
|
74
|
+
```javascript
|
|
75
|
+
import { devtools } from '@lytjs/devtools';
|
|
76
|
+
|
|
77
|
+
app.use(devtools, {
|
|
78
|
+
enabled: true, // 是否启用
|
|
79
|
+
maxHistory: 50 // 历史记录最大条数
|
|
80
|
+
});
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### 核心 API
|
|
84
|
+
|
|
85
|
+
```javascript
|
|
86
|
+
import { DevTools } from '@lytjs/devtools';
|
|
87
|
+
|
|
88
|
+
const devtools = new DevTools();
|
|
89
|
+
|
|
90
|
+
// 启用
|
|
91
|
+
devtools.enable();
|
|
92
|
+
|
|
93
|
+
// 禁用
|
|
94
|
+
devtools.disable();
|
|
95
|
+
|
|
96
|
+
// 查看组件树
|
|
97
|
+
const componentTree = devtools.getComponentTree();
|
|
98
|
+
|
|
99
|
+
// 查看性能数据
|
|
100
|
+
const performanceData = devtools.getPerformanceData();
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## 示例
|
|
104
|
+
|
|
105
|
+
### 性能监控
|
|
106
|
+
|
|
107
|
+
```javascript
|
|
108
|
+
import { devtools } from '@lytjs/devtools';
|
|
109
|
+
|
|
110
|
+
app.use(devtools, {
|
|
111
|
+
performance: {
|
|
112
|
+
enabled: true,
|
|
113
|
+
samplingRate: 1000
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// 性能统计
|
|
118
|
+
const stats = devtools.getPerformanceStats();
|
|
119
|
+
console.log('Component render time:', stats.componentRenderTime);
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### 时间旅行调试
|
|
123
|
+
|
|
124
|
+
```javascript
|
|
125
|
+
import { devtools } from '@lytjs/devtools';
|
|
126
|
+
|
|
127
|
+
const stateHistory = devtools.getStateHistory();
|
|
128
|
+
|
|
129
|
+
// 跳转到某个时间点
|
|
130
|
+
devtools.jumpToState(stateHistory[10]);
|
|
131
|
+
|
|
132
|
+
// 重放状态
|
|
133
|
+
devtools.replayStates();
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## 性能
|
|
137
|
+
|
|
138
|
+
- 轻量级开发者工具
|
|
139
|
+
- 非侵入式集成
|
|
140
|
+
- 低性能开销
|
|
141
|
+
- 可选启用/禁用
|
|
142
|
+
|
|
143
|
+
## 兼容性
|
|
144
|
+
|
|
145
|
+
- Node.js >= 18.0.0
|
|
146
|
+
- Chrome 64+
|
|
147
|
+
- Firefox 63+
|
|
148
|
+
- Safari 12+
|
|
149
|
+
- Edge 79+
|
|
150
|
+
|
|
151
|
+
## License
|
|
152
|
+
|
|
153
|
+
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
var ce=Object.defineProperty;var Me=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var ke=Object.prototype.hasOwnProperty;var Pe=(i,e)=>{for(var t in e)ce(i,t,{get:e[t],enumerable:!0})},De=(i,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Le(e))!ke.call(i,r)&&r!==t&&ce(i,r,{get:()=>e[r],enumerable:!(n=Me(e,r))||n.enumerable});return i};var He=i=>De(ce({},"__esModule",{value:!0}),i);var it={};Pe(it,{BatchAnalyzer:()=>ie,ComponentProfiler:()=>A,ComponentTreeInspector:()=>I,DevTools:()=>ae,DevToolsPanel:()=>D,EventPanel:()=>te,EventTracker:()=>z,MemoryTracker:()=>oe,PerfPanel:()=>ee,PerformanceCollector:()=>$,RenderTracker:()=>se,RoutePanel:()=>Z,RouterPanel:()=>ne,StateInspector:()=>B,TimeTravelDebugger:()=>N,VirtualComponentTree:()=>re,clearRecords:()=>G,connectToApp:()=>U,createDevTools:()=>st,disconnect:()=>Q,getAllComponents:()=>L,getChildComponents:()=>j,getComponentById:()=>H,getComponentCount:()=>we,getComponentEvents:()=>Ce,getComponentStateChanges:()=>V,getEventRecords:()=>J,getRootComponent:()=>q,getSelectedComponent:()=>Y,getSelectedComponentId:()=>k,getStateChangeRecords:()=>Te,isAppConnected:()=>Ee,refreshComponentTree:()=>X,selectComponent:()=>W,setComponentState:()=>K});module.exports=He(it);var Ie=`
|
|
2
2
|
/* === Lyt DevTools \u9762\u677F\u57FA\u7840\u6837\u5F0F === */
|
|
3
3
|
.lyt-devtools-panel {
|
|
4
4
|
position: fixed;
|
|
@@ -282,7 +282,7 @@
|
|
|
282
282
|
.lyt-devtools-highlight {
|
|
283
283
|
animation: lyt-devtools-highlight 1s ease-out;
|
|
284
284
|
}
|
|
285
|
-
`,Be=[{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._resizeHandle=null;this.onWindowResize=()=>{if(!(typeof window!="undefined"&&typeof document!="undefined"))return;let t=this.panelEl.getBoundingClientRect(),n=window.innerWidth-100,r=window.innerHeight-36;t.left>n&&(this.panelEl.style.left=`${n}px`),t.top>r&&(this.panelEl.style.top=`${r}px`)};var n,r,o,s,l,p,c,a;this.config={width:(n=e==null?void 0:e.width)!=null?n:420,height:(r=e==null?void 0:e.height)!=null?r:560,x:(s=e==null?void 0:e.x)!=null?s:typeof window!="undefined"?window.innerWidth-((o=e==null?void 0:e.width)!=null?o:420)-20:100,y:(l=e==null?void 0:e.y)!=null?l:60,minWidth:(p=e==null?void 0:e.minWidth)!=null?p:320,minHeight:(c=e==null?void 0:e.minHeight)!=null?c:200,title:(a=e==null?void 0:e.title)!=null?a:"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};let t=typeof window!="undefined"&&typeof document!="undefined";if(t?(this.styleEl=document.createElement("style"),this.styleEl.textContent=Ie,document.head.appendChild(this.styleEl)):this.styleEl={},t){let{panel:d,header:u,tabs:h,content:f,statusbar:m,statusLeft:x,statusRight:v,resizeHandle:y}=this.createPanelElementWithRefs();this.panelEl=d,this.headerEl=u,this.tabsEl=h,this.contentEl=f,this.statusbarEl=m,this.statusLeftEl=x,this.statusRightEl=v,this._resizeHandle=y}else this.panelEl=this.createMockPanelElement(),this.headerEl=this.panelEl.headerEl,this.tabsEl=this.panelEl.tabsEl,this.contentEl=this.panelEl.contentEl,this.statusbarEl=this.panelEl.statusbarEl,this.statusLeftEl=this.panelEl.statusLeftEl,this.statusRightEl=this.panelEl.statusRightEl,this._resizeHandle=this.panelEl.resizeHandleEl;t&&document.body.appendChild(this.panelEl),t&&(this.bindDragEvents(),this.bindResizeEvents(),this.bindKeyboardEvents(),window.addEventListener("resize",this.onWindowResize))}createPanelElementWithRefs(){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 s=document.createElement("button");s.className="lyt-devtools-btn lyt-devtools-btn-close",s.textContent="\u2715",s.title="\u5173\u95ED\u9762\u677F",s.addEventListener("click",h=>{h.stopPropagation(),this.hide()}),r.appendChild(o),r.appendChild(s),t.appendChild(n),t.appendChild(r);let l=document.createElement("div");l.className="lyt-devtools-tabs";for(let h of Be){let f=document.createElement("div");f.className=`lyt-devtools-tab${h.id===this.activeTab?" active":""}`,f.dataset?f.dataset.tab=h.id:f.setAttribute("data-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 p=document.createElement("div");p.className="lyt-devtools-content";let c=document.createElement("div");c.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 d=document.createElement("span");d.className="lyt-devtools-status-right",d.textContent="v0.0.1",c.appendChild(a),c.appendChild(d);let u=document.createElement("div");return u.className="lyt-devtools-resize-handle",e.appendChild(t),e.appendChild(l),e.appendChild(p),e.appendChild(c),e.appendChild(u),{panel:e,header:t,tabs:l,content:p,statusbar:c,statusLeft:a,statusRight:d,resizeHandle:u}}createPanelElement(){return this.createPanelElementWithRefs().panel}createMockPanelElement(){let e=n=>({className:n,classList:{add:()=>{},remove:()=>{},toggle:()=>{},contains:()=>!1},style:{},dataset:{},querySelector:r=>r===".lyt-devtools-header"?t.headerEl:r===".lyt-devtools-tabs"?t.tabsEl:r===".lyt-devtools-content"?t.contentEl:r===".lyt-devtools-statusbar"?t.statusbarEl:r===".lyt-devtools-status-left"?t.statusLeftEl:r===".lyt-devtools-status-right"?t.statusRightEl:r===".lyt-devtools-resize-handle"?t.resizeHandleEl:null,querySelectorAll:()=>[],appendChild:()=>{},addEventListener:()=>{},removeEventListener:()=>{},offsetLeft:0,offsetTop:0,offsetWidth:100,offsetHeight:100,getBoundingClientRect:()=>({left:0,top:0,right:100,bottom:100,width:100,height:100})}),t=e("lyt-devtools-panel");return t.headerEl=e("lyt-devtools-header"),t.tabsEl=e("lyt-devtools-tabs"),t.contentEl=e("lyt-devtools-content"),t.statusbarEl=e("lyt-devtools-statusbar"),t.statusLeftEl=e("lyt-devtools-status-left"),t.statusRightEl=e("lyt-devtools-status-right"),t.resizeHandleEl=e("lyt-devtools-resize-handle"),t}switchTab(e){if(this.activeTab===e)return;this.activeTab=e,typeof window!="undefined"&&typeof document!="undefined"&&this.tabsEl&&this.tabsEl.querySelectorAll&&this.tabsEl.querySelectorAll(".lyt-devtools-tab").forEach(r=>{r.classList&&
|
|
285
|
+
`,Be=[{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._resizeHandle=null;this.onWindowResize=()=>{if(!(typeof window!="undefined"&&typeof document!="undefined"))return;let t=this.panelEl.getBoundingClientRect(),n=window.innerWidth-100,r=window.innerHeight-36;t.left>n&&(this.panelEl.style.left=`${n}px`),t.top>r&&(this.panelEl.style.top=`${r}px`)};var n,r,o,s,l,p,c,a;this.config={width:(n=e==null?void 0:e.width)!=null?n:420,height:(r=e==null?void 0:e.height)!=null?r:560,x:(s=e==null?void 0:e.x)!=null?s:typeof window!="undefined"?window.innerWidth-((o=e==null?void 0:e.width)!=null?o:420)-20:100,y:(l=e==null?void 0:e.y)!=null?l:60,minWidth:(p=e==null?void 0:e.minWidth)!=null?p:320,minHeight:(c=e==null?void 0:e.minHeight)!=null?c:200,title:(a=e==null?void 0:e.title)!=null?a:"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};let t=typeof window!="undefined"&&typeof document!="undefined";if(t?(this.styleEl=document.createElement("style"),this.styleEl.textContent=Ie,document.head.appendChild(this.styleEl)):this.styleEl={},t){let{panel:d,header:u,tabs:h,content:f,statusbar:m,statusLeft:x,statusRight:v,resizeHandle:y}=this.createPanelElementWithRefs();this.panelEl=d,this.headerEl=u,this.tabsEl=h,this.contentEl=f,this.statusbarEl=m,this.statusLeftEl=x,this.statusRightEl=v,this._resizeHandle=y}else this.panelEl=this.createMockPanelElement(),this.headerEl=this.panelEl.headerEl,this.tabsEl=this.panelEl.tabsEl,this.contentEl=this.panelEl.contentEl,this.statusbarEl=this.panelEl.statusbarEl,this.statusLeftEl=this.panelEl.statusLeftEl,this.statusRightEl=this.panelEl.statusRightEl,this._resizeHandle=this.panelEl.resizeHandleEl;t&&document.body.appendChild(this.panelEl),t&&(this.bindDragEvents(),this.bindResizeEvents(),this.bindKeyboardEvents(),window.addEventListener("resize",this.onWindowResize))}createPanelElementWithRefs(){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 s=document.createElement("button");s.className="lyt-devtools-btn lyt-devtools-btn-close",s.textContent="\u2715",s.title="\u5173\u95ED\u9762\u677F",s.addEventListener("click",h=>{h.stopPropagation(),this.hide()}),r.appendChild(o),r.appendChild(s),t.appendChild(n),t.appendChild(r);let l=document.createElement("div");l.className="lyt-devtools-tabs";for(let h of Be){let f=document.createElement("div");f.className=`lyt-devtools-tab${h.id===this.activeTab?" active":""}`,f.dataset?f.dataset.tab=h.id:f.setAttribute("data-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 p=document.createElement("div");p.className="lyt-devtools-content";let c=document.createElement("div");c.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 d=document.createElement("span");d.className="lyt-devtools-status-right",d.textContent="v0.0.1",c.appendChild(a),c.appendChild(d);let u=document.createElement("div");return u.className="lyt-devtools-resize-handle",e.appendChild(t),e.appendChild(l),e.appendChild(p),e.appendChild(c),e.appendChild(u),{panel:e,header:t,tabs:l,content:p,statusbar:c,statusLeft:a,statusRight:d,resizeHandle:u}}createPanelElement(){return this.createPanelElementWithRefs().panel}createMockPanelElement(){let e=n=>({className:n,classList:{add:()=>{},remove:()=>{},toggle:()=>{},contains:()=>!1},style:{},dataset:{},querySelector:r=>r===".lyt-devtools-header"?t.headerEl:r===".lyt-devtools-tabs"?t.tabsEl:r===".lyt-devtools-content"?t.contentEl:r===".lyt-devtools-statusbar"?t.statusbarEl:r===".lyt-devtools-status-left"?t.statusLeftEl:r===".lyt-devtools-status-right"?t.statusRightEl:r===".lyt-devtools-resize-handle"?t.resizeHandleEl:null,querySelectorAll:()=>[],appendChild:()=>{},addEventListener:()=>{},removeEventListener:()=>{},offsetLeft:0,offsetTop:0,offsetWidth:100,offsetHeight:100,getBoundingClientRect:()=>({left:0,top:0,right:100,bottom:100,width:100,height:100})}),t=e("lyt-devtools-panel");return t.headerEl=e("lyt-devtools-header"),t.tabsEl=e("lyt-devtools-tabs"),t.contentEl=e("lyt-devtools-content"),t.statusbarEl=e("lyt-devtools-statusbar"),t.statusLeftEl=e("lyt-devtools-status-left"),t.statusRightEl=e("lyt-devtools-status-right"),t.resizeHandleEl=e("lyt-devtools-resize-handle"),t}switchTab(e){if(this.activeTab===e)return;this.activeTab=e,typeof window!="undefined"&&typeof document!="undefined"&&this.tabsEl&&this.tabsEl.querySelectorAll&&this.tabsEl.querySelectorAll(".lyt-devtools-tab").forEach(r=>{let o=r;o.classList&&o.dataset&&o.classList.toggle("active",o.dataset.tab===e)}),this.renderContent()}registerTabRenderer(e,t){this.tabRenderers.set(e,t),this.activeTab===e&&this.renderContent()}renderContent(){if(typeof window!="undefined"&&typeof document!="undefined"&&this.contentEl){this.contentEl.innerHTML="";let t=this.tabRenderers.get(this.activeTab);t?t(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,typeof window!="undefined"&&typeof document!="undefined"&&this.panelEl&&this.panelEl.style&&(this.panelEl.style.display="flex")}hide(){this._visible=!1,typeof window!="undefined"&&typeof document!="undefined"&&this.panelEl&&this.panelEl.style&&(this.panelEl.style.display="none")}toggle(){this._visible?this.hide():this.show()}isVisible(){return this._visible}toggleCollapse(){this._collapsed=!this._collapsed,typeof window!="undefined"&&typeof document!="undefined"&&this.panelEl&&this.panelEl.classList&&this.panelEl.classList.toggle("collapsed",this._collapsed)}isCollapsed(){return this._collapsed}bindDragEvents(){typeof window!="undefined"&&typeof document!="undefined"&&(this.headerEl.addEventListener("mousedown",t=>{t.target.closest(".lyt-devtools-btn")||(this.dragState.isDragging=!0,this.dragState.startX=t.clientX,this.dragState.startY=t.clientY,this.dragState.startLeft=this.panelEl.offsetLeft,this.dragState.startTop=this.panelEl.offsetTop,t.preventDefault())}),document.addEventListener("mousemove",t=>{if(!this.dragState.isDragging)return;let n=t.clientX-this.dragState.startX,r=t.clientY-this.dragState.startY,o=this.dragState.startLeft+n,s=this.dragState.startTop+r;o=Math.max(0,Math.min(o,window.innerWidth-100)),s=Math.max(0,Math.min(s,window.innerHeight-36)),this.panelEl.style.left=`${o}px`,this.panelEl.style.top=`${s}px`}),document.addEventListener("mouseup",()=>{this.dragState.isDragging=!1}))}bindResizeEvents(){typeof window!="undefined"&&typeof document!="undefined"&&this._resizeHandle&&(this._resizeHandle.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),s=Math.max(this.config.minHeight,this.resizeState.startHeight+r);this.panelEl.style.width=`${o}px`,this.panelEl.style.height=`${s}px`}),document.addEventListener("mouseup",()=>{this.resizeState.isResizing=!1}))}bindKeyboardEvents(){typeof window!="undefined"&&typeof document!="undefined"&&document.addEventListener("keydown",t=>{t.ctrlKey&&t.shiftKey&&t.key==="D"&&(t.preventDefault(),this.toggle()),t.key==="Escape"&&this._visible&&this.hide()})}setStatusLeft(e){typeof window!="undefined"&&typeof document!="undefined"&&this.statusLeftEl&&(this.statusLeftEl.innerHTML=e)}setStatusRight(e){typeof window!="undefined"&&typeof document!="undefined"&&this.statusRightEl&&(this.statusRightEl.textContent=e)}setConnected(e){if(typeof window!="undefined"&&typeof document!="undefined"&&this.statusLeftEl&&this.statusLeftEl.querySelector){let n=this.statusLeftEl.querySelector(".lyt-devtools-status-dot");n&&n.classList&&n.classList.toggle("disconnected",!e)}}highlightElement(e){if(this.clearHighlight(),!e)return;if(typeof window!="undefined"&&typeof document!="undefined"){this.highlightOverlay=document.createElement("div"),this.highlightOverlay.style.cssText=`
|
|
286
286
|
position: fixed;
|
|
287
287
|
z-index: 999998;
|
|
288
288
|
pointer-events: none;
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
background: rgba(203, 166, 247, 0.1);
|
|
291
291
|
border-radius: 2px;
|
|
292
292
|
transition: all 0.15s ease;
|
|
293
|
-
`;let n=e.getBoundingClientRect();this.highlightOverlay.style.left=`${n.left}px`,this.highlightOverlay.style.top=`${n.top}px`,this.highlightOverlay.style.width=`${n.width}px`,this.highlightOverlay.style.height=`${n.height}px`,document.body.appendChild(this.highlightOverlay)}}clearHighlight(){typeof window!="undefined"&&typeof document!="undefined"&&this.highlightOverlay&&(this.highlightOverlay.remove(),this.highlightOverlay=null)}destroy(){let e=typeof window!="undefined"&&typeof document!="undefined";e&&this.styleEl&&this.styleEl.remove&&this.styleEl.remove(),e&&this.panelEl&&this.panelEl.remove&&this.panelEl.remove(),this.clearHighlight(),e&&window.removeEventListener("resize",this.onWindowResize),this.tabRenderers.clear()}};var E=new Map,M=[],S=[],xe=0,F=null,C={},_=!1;function ze(){return`comp_${++xe}`}function Ne(){return`evt_${++xe}`}function ye(i){var t;if(!i)return"Unknown";let e=i.type||i.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 w(i){if(i===null||typeof i!="object")return i;if(Array.isArray(i))return i.map(t=>w(t));let e={};for(let t of Object.keys(i))e[t]=w(i[t]);return e}function $e(i,e){return i===e?!1:typeof i!=typeof e?!0:i===null||e===null?i!==e:typeof i=="object"?JSON.stringify(i)!==JSON.stringify(e):i!==e}function Ae(i,e){let t=e.split("."),n=i;for(let r of t){if(n==null||typeof n!="object")return;n=n[r]}return n}function Fe(i,e,t){let n=e.split("."),r=i;for(let o=0;o<n.length-1;o++)(r[n[o]]===null||r[n[o]]===void 0||typeof r[n[o]]!="object")&&(r[n[o]]={}),r=r[n[o]];r[n[n.length-1]]=t}function U(i,e){_||(e&&Object.assign(C,e),_=!0,_e(i),i._instance&&(O(i._instance,null),ue()))}function _e(i){let e=i.mount.bind(i);i.mount=function(t){let n=e(t);return i._instance&&(O(i._instance,null),ue()),n}}function O(i,e){var o,s,l,p,c,a,d,u;if(!i)return;let t=be(i),n=!t;if(n){let h=ze();t={id:h,name:ye(i),parentId:e,childIds:[],props:{},state:{},computed:{},isMounted:(o=i.isMounted)!=null?o:!1,isUnmounted:(s=i.isUnmounted)!=null?s:!1,el:(l=i.el)!=null?l:null,renderTime:0,lastUpdateTime:Date.now(),instance:i},E.set(h,t)}else t.parentId=e,t.name=ye(i),t.isMounted=(p=i.isMounted)!=null?p:!1,t.isUnmounted=(c=i.isUnmounted)!=null?c:!1,t.el=(a=i.el)!=null?a:null,t.lastUpdateTime=Date.now();i.props&&(t.props=w(i.props)),i.state&&(t.state=w(i.state)),i.computedCache&&(t.computed=w(i.computedCache)),n&&i.state&&typeof i.state=="object"&&Ue(t.id,i),n&&i.emit&&typeof i.emit=="function"&&Oe(t.id,i),n?(d=C.onComponentCreated)==null||d.call(C,t):(u=C.onComponentUpdated)==null||u.call(C,t);let r=i.subTree;r&&ve(r,t.id)}function ve(i,e){if(i){if(i.component){O(i.component,e);let t=E.get(e);if(t&&!t.childIds.includes(i.component.id||i.component._id)){let n=qe(i.component);n&&!t.childIds.includes(n)&&t.childIds.push(n)}return}if(i.children&&Array.isArray(i.children))for(let t of i.children)t&&typeof t=="object"&&ve(t,e)}}function Ue(i,e){if(!e.state||typeof e.state!="object")return;let t=e.state,n=E.get(i);if(n&&!t.__devtools_intercepted__)try{Object.defineProperty(t,"__devtools_intercepted__",{value:!0,enumerable:!1,configurable:!1});let r=new Proxy(t,{set(o,s,l){var a;let p=o[s],c=Reflect.set(o,s,l);if($e(p,l)){let d=String(s),u={componentId:i,componentName:n.name,path:d,oldValue:w(p),newValue:w(l),timestamp:Date.now()};S.push(u),S.length>1e3&&S.splice(0,S.length-1e3),n.state=w(o),n.lastUpdateTime=Date.now(),(a=C.onStateChanged)==null||a.call(C,u)}return c}});Object.defineProperty(e,"__devtools_state_proxy__",{value:r,enumerable:!1,configurable:!0})}catch(r){}}function Oe(i,e){if(!e.emit||typeof e.emit!="function")return;let t=e.emit,n=E.get(i);n&&(e.emit=function(r,...o){var l;let s={id:Ne(),name:r,timestamp:Date.now(),args:w(o),componentId:i,componentName:n.name};return M.push(s),M.length>500&&M.splice(0,M.length-500),(l=C.onEventEmitted)==null||l.call(C,s),t.call(this,r,...o)})}function ue(){typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("lyt-devtools-update"))}function be(i){for(let e of E.values())if(e.instance===i)return e;return null}function qe(i){let e=be(i);return e?e.id:null}function L(){return Array.from(E.values())}function q(){for(let i of E.values())if(i.parentId===null)return i;return null}function H(i){var e;return(e=E.get(i))!=null?e:null}function j(i){let e=E.get(i);return e?e.childIds.map(t=>E.get(t)).filter(Boolean):[]}function J(){return[...M]}function Te(){return[...S]}function V(i){return S.filter(e=>e.componentId===i)}function Ce(i){return M.filter(e=>e.componentId===i)}function W(i){F=i}function Y(){var i;return F&&(i=E.get(F))!=null?i:null}function k(){return F}function K(i,e,t){var l;let n=E.get(i);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 s={componentId:i,componentName:n.name,path:e,oldValue:w(o),newValue:w(t),timestamp:Date.now()};return S.push(s),n.state=w(r),n.lastUpdateTime=Date.now(),(l=C.onStateChanged)==null||l.call(C,s),!0}function X(i){E.clear(),i._instance&&(O(i._instance,null),ue())}function G(){M.length=0,S.length=0}function Q(){E.clear(),M.length=0,S.length=0,F=null,_=!1}function Ee(){return _}function we(){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=L();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=L(),t=new Map,n=[];for(let r of e){if(this.searchKeyword){let s=this.searchKeyword.toLowerCase(),l=r.name.toLowerCase().includes(s),p=r.id.toLowerCase().includes(s);if(!l&&!p)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 s=t.get(o);s.children.push(r),r.depth=s.depth+1}else n.push(r)}return n}renderTreeNode(e){let{info:t,depth:n,expanded:r}=e,o=k(),s=t.id===o,l=document.createElement("div");l.className="lyt-tree-node",l.style.cssText=`
|
|
293
|
+
`;let n=e.getBoundingClientRect();this.highlightOverlay.style.left=`${n.left}px`,this.highlightOverlay.style.top=`${n.top}px`,this.highlightOverlay.style.width=`${n.width}px`,this.highlightOverlay.style.height=`${n.height}px`,document.body.appendChild(this.highlightOverlay)}}clearHighlight(){typeof window!="undefined"&&typeof document!="undefined"&&this.highlightOverlay&&(this.highlightOverlay.remove(),this.highlightOverlay=null)}destroy(){let e=typeof window!="undefined"&&typeof document!="undefined";e&&this.styleEl&&this.styleEl.remove&&this.styleEl.remove(),e&&this.panelEl&&this.panelEl.remove&&this.panelEl.remove(),this.clearHighlight(),e&&window.removeEventListener("resize",this.onWindowResize),this.tabRenderers.clear()}};var E=new Map,M=[],S=[],xe=0,F=null,C={},_=!1;function ze(){return`comp_${++xe}`}function Ne(){return`evt_${++xe}`}function ye(i){var t;if(!i)return"Unknown";let e=i.type||i.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 w(i){if(i===null||typeof i!="object")return i;if(Array.isArray(i))return i.map(t=>w(t));let e={};for(let t of Object.keys(i))e[t]=w(i[t]);return e}function $e(i,e){return i===e?!1:typeof i!=typeof e?!0:i===null||e===null?i!==e:typeof i=="object"?JSON.stringify(i)!==JSON.stringify(e):i!==e}function Ae(i,e){let t=e.split("."),n=i;for(let r of t){if(n==null||typeof n!="object")return;n=n[r]}return n}function Fe(i,e,t){let n=e.split("."),r=i;for(let o=0;o<n.length-1;o++)(r[n[o]]===null||r[n[o]]===void 0||typeof r[n[o]]!="object")&&(r[n[o]]={}),r=r[n[o]];r[n[n.length-1]]=t}function U(i,e){_||(e&&Object.assign(C,e),_=!0,_e(i),i._instance&&(O(i._instance,null),ue()))}function _e(i){let e=i.mount.bind(i);i.mount=function(t){let n=e(t);return i._instance&&(O(i._instance,null),ue()),n}}function O(i,e){var o,s,l,p,c,a,d,u;if(!i)return;let t=be(i),n=!t;if(n){let h=ze();t={id:h,name:ye(i),parentId:e,childIds:[],props:{},state:{},computed:{},isMounted:(o=i.isMounted)!=null?o:!1,isUnmounted:(s=i.isUnmounted)!=null?s:!1,el:(l=i.el)!=null?l:null,renderTime:0,lastUpdateTime:Date.now(),instance:i},E.set(h,t)}else t&&(t.parentId=e,t.name=ye(i),t.isMounted=(p=i.isMounted)!=null?p:!1,t.isUnmounted=(c=i.isUnmounted)!=null?c:!1,t.el=(a=i.el)!=null?a:null,t.lastUpdateTime=Date.now());t&&i.props&&(t.props=w(i.props)),t&&i.state&&(t.state=w(i.state)),t&&i.computedCache&&(t.computed=w(i.computedCache)),n&&t&&i.state&&typeof i.state=="object"&&Ue(t.id,i),n&&t&&i.emit&&typeof i.emit=="function"&&Oe(t.id,i),n&&t?(d=C.onComponentCreated)==null||d.call(C,t):t&&((u=C.onComponentUpdated)==null||u.call(C,t));let r=i.subTree;r&&t&&ve(r,t.id)}function ve(i,e){if(i){if(i.component){O(i.component,e);let t=E.get(e);if(t&&!t.childIds.includes(i.component.id||i.component._id)){let n=qe(i.component);n&&!t.childIds.includes(n)&&t.childIds.push(n)}return}if(i.children&&Array.isArray(i.children))for(let t of i.children)t&&typeof t=="object"&&ve(t,e)}}function Ue(i,e){if(!e.state||typeof e.state!="object")return;let t=e.state,n=E.get(i);if(n&&!t.__devtools_intercepted__)try{Object.defineProperty(t,"__devtools_intercepted__",{value:!0,enumerable:!1,configurable:!1});let r=new Proxy(t,{set(o,s,l){var a;let p=o[s],c=Reflect.set(o,s,l);if($e(p,l)){let d=String(s),u={componentId:i,componentName:n.name,path:d,oldValue:w(p),newValue:w(l),timestamp:Date.now()};S.push(u),S.length>1e3&&S.splice(0,S.length-1e3),n.state=w(o),n.lastUpdateTime=Date.now(),(a=C.onStateChanged)==null||a.call(C,u)}return c}});Object.defineProperty(e,"__devtools_state_proxy__",{value:r,enumerable:!1,configurable:!0})}catch(r){}}function Oe(i,e){if(!e.emit||typeof e.emit!="function")return;let t=e.emit,n=E.get(i);n&&(e.emit=function(r,...o){var l;let s={id:Ne(),name:r,timestamp:Date.now(),args:w(o),componentId:i,componentName:n.name};return M.push(s),M.length>500&&M.splice(0,M.length-500),(l=C.onEventEmitted)==null||l.call(C,s),t.call(this,r,...o)})}function ue(){typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("lyt-devtools-update"))}function be(i){for(let e of E.values())if(e.instance===i)return e;return null}function qe(i){let e=be(i);return e?e.id:null}function L(){return Array.from(E.values())}function q(){for(let i of E.values())if(i.parentId===null)return i;return null}function H(i){var e;return(e=E.get(i))!=null?e:null}function j(i){let e=E.get(i);return e?e.childIds.map(t=>E.get(t)).filter(Boolean):[]}function J(){return[...M]}function Te(){return[...S]}function V(i){return S.filter(e=>e.componentId===i)}function Ce(i){return M.filter(e=>e.componentId===i)}function W(i){F=i}function Y(){var i;return F&&(i=E.get(F))!=null?i:null}function k(){return F}function K(i,e,t){var l;let n=E.get(i);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 s={componentId:i,componentName:n.name,path:e,oldValue:w(o),newValue:w(t),timestamp:Date.now()};return S.push(s),n.state=w(r),n.lastUpdateTime=Date.now(),(l=C.onStateChanged)==null||l.call(C,s),!0}function X(i){E.clear(),i._instance&&(O(i._instance,null),ue())}function G(){M.length=0,S.length=0}function Q(){E.clear(),M.length=0,S.length=0,F=null,_=!1}function Ee(){return _}function we(){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=L();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=L(),t=new Map,n=[];for(let r of e){if(this.searchKeyword){let s=this.searchKeyword.toLowerCase(),l=r.name.toLowerCase().includes(s),p=r.id.toLowerCase().includes(s);if(!l&&!p)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 s=t.get(o);s.children.push(r),r.depth=s.depth+1}else n.push(r)}return n}renderTreeNode(e){let{info:t,depth:n,expanded:r}=e,o=k(),s=t.id===o,l=document.createElement("div");l.className="lyt-tree-node",l.style.cssText=`
|
|
294
294
|
display: flex;
|
|
295
295
|
align-items: center;
|
|
296
296
|
padding: 3px 8px;
|
|
@@ -345,7 +345,7 @@
|
|
|
345
345
|
cursor: pointer;
|
|
346
346
|
font-size: 11px;
|
|
347
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,s=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:${s} S:${o} C:${l}</span>`)}renderCategory(e,t,n,r,o,s){let l=Object.keys(n);if(l.length===0)return;let p=document.createElement("div");p.style.cssText=`
|
|
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(this.container,"props",e.props,!0,!1,!1),this.renderCategory(this.container,"state",e.state,!1,!0,!1),this.renderCategory(this.container,"computed",e.computed,!1,!1,!0));let o=Object.keys(e.state).length,s=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:${s} S:${o} C:${l}</span>`)}renderCategory(e,t,n,r,o,s){let l=Object.keys(n);if(l.length===0)return;let p=document.createElement("div");p.style.cssText=`
|
|
349
349
|
display: flex;
|
|
350
350
|
align-items: center;
|
|
351
351
|
padding: 4px 8px;
|
|
@@ -608,7 +608,7 @@
|
|
|
608
608
|
background: ${r?"#313244":"transparent"};
|
|
609
609
|
color: ${o?"#89b4fa":"#cdd6f4"};
|
|
610
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;",s?l.textContent=e.expanded?"\u25BC":"\u25B6":l.textContent="\xB7",n.appendChild(l);let p=document.createElement("span");if(p.textContent=e.node.name,p.style.cssText="font-weight: bold;",n.appendChild(p),e.node.stateSummary){let d=document.createElement("span");d.textContent=` ${e.node.stateSummary}`,d.style.cssText="color: #a6adc8; font-size: 10px; margin-left: 6px;",n.appendChild(d)}if(e.node.propsCount!==void 0&&e.node.propsCount>0){let d=document.createElement("span");d.textContent=` [${e.node.propsCount} props]`,d.style.cssText="color: #585b70; font-size: 10px; margin-left: 4px;",n.appendChild(d)}let c=e.node,a=c.id;return n.addEventListener("click",()=>{var d;if(s){let u=(d=this.expandedMap.get(a))!=null?d:!1;this.expandedMap.set(a,!u),this.flatten(),this.renderNodes()}this.selectedId=a,this.onNodeClick&&this.onNodeClick(c)}),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 s=performance.memory;s&&(e=s.usedJSHeapSize,t=s.totalJSHeapSize,n=s.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,s=t.jsHeapSizeLimit>0?t.usedJSHeapSize/t.jsHeapSizeLimit*100:0;return{timestamp:t.timestamp,usedJSHeapSize:t.usedJSHeapSize,delta:o,usagePercent:s}})}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,s=0,l=0;for(let g=0;g<t;g++){let b=g,T=e[g].usedJSHeapSize;n+=b,r+=T,o+=b*T,s+=b*b,l+=T*T}let p=t*s-n*n,c=p!==0?(t*o-n*r)/p:0,a=r/t,d=0,u=0;for(let g=0;g<t;g++){let b=e[g].usedJSHeapSize,T=c*g+(r-c*n)/t;d+=(b-a)*(b-a),u+=(b-T)*(b-T)}let h=d!==0?1-u/d:0,f=(e[t-1].timestamp-e[0].timestamp)/1e3,m=f>0?c/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,s=0,l=0,p=1/0;for(let d of e)(!r||d.timestamp>r.timestamp)&&(r=d),d.usedJSHeapSize>o&&(o=d.usedJSHeapSize,s=d.timestamp),l+=d.usedJSHeapSize,d.usedJSHeapSize<p&&(p=d.usedJSHeapSize);let c=e.length>0?l/e.length:0;p===1/0&&(p=0);let a=e.length>=2?e[e.length-1].usedJSHeapSize-e[0].usedJSHeapSize:0;return{generatedAt:Date.now(),current:r,peakUsage:o,peakTimestamp:s,averageUsage:c,minUsage:p,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,s=0,l=new Map;for(let c of e){n+=c.duration,c.duration>r&&(r=c.duration),c.duration<o&&(o=c.duration),c.duration>t&&s++;let a=l.get(c.componentName);a||(a={renderCount:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,slowCount:0},l.set(c.componentName,a)),a.renderCount++,a.totalDuration+=c.duration,c.duration>a.maxDuration&&(a.maxDuration=c.duration),c.duration<a.minDuration&&(a.minDuration=c.duration),c.duration>t&&a.slowCount++}let p=Array.from(l.entries()).map(([c,a])=>({componentName:c,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((c,a)=>a.avgDuration-c.avgDuration);return{totalRenders:e.length,totalDuration:n,avgDuration:n/e.length,maxDuration:r===-1/0?0:r,minDuration:o===1/0?0:o,slowRenderCount:s,slowRenderRatio:s/e.length,byComponent:p}}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 p=o.get(l.name);p||(p={count:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,durations:[]},o.set(l.name,p)),p.count++,p.totalDuration+=l.duration,l.duration>p.maxDuration&&(p.maxDuration=l.duration),l.duration<p.minDuration&&(p.minDuration=l.duration),p.durations.push(l.duration)}let s=Array.from(o.entries()).map(([l,p])=>{let c=p.totalDuration/p.count,a=0;for(let u of p.durations)a+=(u-c)*(u-c);a/=p.count;let d=Math.sqrt(a);return{name:l,count:p.count,avgDuration:c,maxDuration:p.maxDuration===-1/0?0:p.maxDuration,minDuration:p.minDuration===1/0?0:p.minDuration,totalDuration:p.totalDuration,stdDev:d}});return{totalBatches:e.length,totalDuration:t,avgDuration:t/e.length,maxDuration:n===-1/0?0:n,minDuration:r===1/0?0:r,byName:s}}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 s=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:s&&s.stdDev>0?(o.duration-s.avgDuration)/s.stdDev:0});continue}if(s&&s.count>=2&&s.stdDev>0){let l=(o.duration-s.avgDuration)/s.stdDev;if(Math.abs(l)>this.config.outlierSigmaThreshold){let p=l>0?"slow":"fast";n.push({name:o.name,duration:o.duration,timestamp:o.endTime,anomalyType:p,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,s)=>o.timestamp-s.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,s,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:(s=e==null?void 0:e.autoShow)!=null?s:!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,p=>{this.panel.switchTab("state"),this.stateInspector.refresh()}),this.stateInspector=new B(this.panel),this.eventTracker=new z(this.panel),this.timeTravel=new N(this.panel),this.panel.registerTabRenderer("components",p=>{this.componentTree.render(p)}),this.panel.registerTabRenderer("state",p=>{this.stateInspector.render(p)}),this.panel.registerTabRenderer("events",p=>{this.eventTracker.render(p)}),this.panel.registerTabRenderer("router",p=>{this.renderRouterTab(p)}),this.panel.renderContent(),this.config.autoShow||this.panel.hide()}install(e){if(this._installed)return;this.app=e,this._installed=!0,U(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)}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=`
|
|
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;",s?l.textContent=e.expanded?"\u25BC":"\u25B6":l.textContent="\xB7",n.appendChild(l);let p=document.createElement("span");if(p.textContent=e.node.name,p.style.cssText="font-weight: bold;",n.appendChild(p),e.node.stateSummary){let d=document.createElement("span");d.textContent=` ${e.node.stateSummary}`,d.style.cssText="color: #a6adc8; font-size: 10px; margin-left: 6px;",n.appendChild(d)}if(e.node.propsCount!==void 0&&e.node.propsCount>0){let d=document.createElement("span");d.textContent=` [${e.node.propsCount} props]`,d.style.cssText="color: #585b70; font-size: 10px; margin-left: 4px;",n.appendChild(d)}let c=e.node,a=c.id;return n.addEventListener("click",()=>{var d;if(s){let u=(d=this.expandedMap.get(a))!=null?d:!1;this.expandedMap.set(a,!u),this.flatten(),this.renderNodes()}this.selectedId=a,this.onNodeClick&&this.onNodeClick(c)}),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 s=performance.memory;s&&(e=s.usedJSHeapSize,t=s.totalJSHeapSize,n=s.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,s=t.jsHeapSizeLimit>0?t.usedJSHeapSize/t.jsHeapSizeLimit*100:0;return{timestamp:t.timestamp,usedJSHeapSize:t.usedJSHeapSize,delta:o,usagePercent:s}})}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,s=0,l=0;for(let g=0;g<t;g++){let b=g,T=e[g].usedJSHeapSize;n+=b,r+=T,o+=b*T,s+=b*b,l+=T*T}let p=t*s-n*n,c=p!==0?(t*o-n*r)/p:0,a=r/t,d=0,u=0;for(let g=0;g<t;g++){let b=e[g].usedJSHeapSize,T=c*g+(r-c*n)/t;d+=(b-a)*(b-a),u+=(b-T)*(b-T)}let h=d!==0?1-u/d:0,f=(e[t-1].timestamp-e[0].timestamp)/1e3,m=f>0?c/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,s=0,l=0,p=1/0;for(let d of e)(!r||d.timestamp>r.timestamp)&&(r=d),d.usedJSHeapSize>o&&(o=d.usedJSHeapSize,s=d.timestamp),l+=d.usedJSHeapSize,d.usedJSHeapSize<p&&(p=d.usedJSHeapSize);let c=e.length>0?l/e.length:0;p===1/0&&(p=0);let a=e.length>=2?e[e.length-1].usedJSHeapSize-e[0].usedJSHeapSize:0;return{generatedAt:Date.now(),current:r,peakUsage:o,peakTimestamp:s,averageUsage:c,minUsage:p,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,s=0,l=new Map;for(let c of e){n+=c.duration,c.duration>r&&(r=c.duration),c.duration<o&&(o=c.duration),c.duration>t&&s++;let a=l.get(c.componentName);a||(a={renderCount:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,slowCount:0},l.set(c.componentName,a)),a.renderCount++,a.totalDuration+=c.duration,c.duration>a.maxDuration&&(a.maxDuration=c.duration),c.duration<a.minDuration&&(a.minDuration=c.duration),c.duration>t&&a.slowCount++}let p=Array.from(l.entries()).map(([c,a])=>({componentName:c,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((c,a)=>a.avgDuration-c.avgDuration);return{totalRenders:e.length,totalDuration:n,avgDuration:n/e.length,maxDuration:r===-1/0?0:r,minDuration:o===1/0?0:o,slowRenderCount:s,slowRenderRatio:s/e.length,byComponent:p}}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 p=o.get(l.name);p||(p={count:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,durations:[]},o.set(l.name,p)),p.count++,p.totalDuration+=l.duration,l.duration>p.maxDuration&&(p.maxDuration=l.duration),l.duration<p.minDuration&&(p.minDuration=l.duration),p.durations.push(l.duration)}let s=Array.from(o.entries()).map(([l,p])=>{let c=p.totalDuration/p.count,a=0;for(let u of p.durations)a+=(u-c)*(u-c);a/=p.count;let d=Math.sqrt(a);return{name:l,count:p.count,avgDuration:c,maxDuration:p.maxDuration===-1/0?0:p.maxDuration,minDuration:p.minDuration===1/0?0:p.minDuration,totalDuration:p.totalDuration,stdDev:d}});return{totalBatches:e.length,totalDuration:t,avgDuration:t/e.length,maxDuration:n===-1/0?0:n,minDuration:r===1/0?0:r,byName:s}}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 s=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:s&&s.stdDev>0?(o.duration-s.avgDuration)/s.stdDev:0});continue}if(s&&s.count>=2&&s.stdDev>0){let l=(o.duration-s.avgDuration)/s.stdDev;if(Math.abs(l)>this.config.outlierSigmaThreshold){let p=l>0?"slow":"fast";n.push({name:o.name,duration:o.duration,timestamp:o.endTime,anomalyType:p,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,s)=>o.timestamp-s.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,s,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:0,y:(o=e==null?void 0:e.y)!=null?o:0,autoShow:(s=e==null?void 0:e.autoShow)!=null?s:!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,p=>{this.panel.switchTab("state"),this.stateInspector.refresh()}),this.stateInspector=new B(this.panel),this.eventTracker=new z(this.panel),this.timeTravel=new N(this.panel),this.panel.registerTabRenderer("components",p=>{this.componentTree.render(p)}),this.panel.registerTabRenderer("state",p=>{this.stateInspector.render(p)}),this.panel.registerTabRenderer("events",p=>{this.eventTracker.render(p)}),this.panel.registerTabRenderer("router",p=>{this.renderRouterTab(p)}),this.panel.renderContent(),this.config.autoShow||this.panel.hide()}install(e){if(this._installed)return;this.app=e,this._installed=!0,U(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)}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
612
|
<div style="font-size: 32px; margin-bottom: 12px;">\u{1F517}</div>
|
|
613
613
|
<div style="color: #cdd6f4; font-size: 14px; margin-bottom: 8px; font-style: normal;">\u8DEF\u7531\u68C0\u67E5\u5668</div>
|
|
614
614
|
<div style="color: #585b70; font-size: 12px;">
|
package/dist/index.mjs
CHANGED
|
@@ -282,7 +282,7 @@ var Ce=`
|
|
|
282
282
|
.lyt-devtools-highlight {
|
|
283
283
|
animation: lyt-devtools-highlight 1s ease-out;
|
|
284
284
|
}
|
|
285
|
-
`,Ee=[{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._resizeHandle=null;this.onWindowResize=()=>{if(!(typeof window!="undefined"&&typeof document!="undefined"))return;let t=this.panelEl.getBoundingClientRect(),n=window.innerWidth-100,r=window.innerHeight-36;t.left>n&&(this.panelEl.style.left=`${n}px`),t.top>r&&(this.panelEl.style.top=`${r}px`)};var n,r,o,s,l,p,c,a;this.config={width:(n=e==null?void 0:e.width)!=null?n:420,height:(r=e==null?void 0:e.height)!=null?r:560,x:(s=e==null?void 0:e.x)!=null?s:typeof window!="undefined"?window.innerWidth-((o=e==null?void 0:e.width)!=null?o:420)-20:100,y:(l=e==null?void 0:e.y)!=null?l:60,minWidth:(p=e==null?void 0:e.minWidth)!=null?p:320,minHeight:(c=e==null?void 0:e.minHeight)!=null?c:200,title:(a=e==null?void 0:e.title)!=null?a:"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};let t=typeof window!="undefined"&&typeof document!="undefined";if(t?(this.styleEl=document.createElement("style"),this.styleEl.textContent=Ce,document.head.appendChild(this.styleEl)):this.styleEl={},t){let{panel:d,header:u,tabs:h,content:f,statusbar:m,statusLeft:x,statusRight:v,resizeHandle:y}=this.createPanelElementWithRefs();this.panelEl=d,this.headerEl=u,this.tabsEl=h,this.contentEl=f,this.statusbarEl=m,this.statusLeftEl=x,this.statusRightEl=v,this._resizeHandle=y}else this.panelEl=this.createMockPanelElement(),this.headerEl=this.panelEl.headerEl,this.tabsEl=this.panelEl.tabsEl,this.contentEl=this.panelEl.contentEl,this.statusbarEl=this.panelEl.statusbarEl,this.statusLeftEl=this.panelEl.statusLeftEl,this.statusRightEl=this.panelEl.statusRightEl,this._resizeHandle=this.panelEl.resizeHandleEl;t&&document.body.appendChild(this.panelEl),t&&(this.bindDragEvents(),this.bindResizeEvents(),this.bindKeyboardEvents(),window.addEventListener("resize",this.onWindowResize))}createPanelElementWithRefs(){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 s=document.createElement("button");s.className="lyt-devtools-btn lyt-devtools-btn-close",s.textContent="\u2715",s.title="\u5173\u95ED\u9762\u677F",s.addEventListener("click",h=>{h.stopPropagation(),this.hide()}),r.appendChild(o),r.appendChild(s),t.appendChild(n),t.appendChild(r);let l=document.createElement("div");l.className="lyt-devtools-tabs";for(let h of Ee){let f=document.createElement("div");f.className=`lyt-devtools-tab${h.id===this.activeTab?" active":""}`,f.dataset?f.dataset.tab=h.id:f.setAttribute("data-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 p=document.createElement("div");p.className="lyt-devtools-content";let c=document.createElement("div");c.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 d=document.createElement("span");d.className="lyt-devtools-status-right",d.textContent="v0.0.1",c.appendChild(a),c.appendChild(d);let u=document.createElement("div");return u.className="lyt-devtools-resize-handle",e.appendChild(t),e.appendChild(l),e.appendChild(p),e.appendChild(c),e.appendChild(u),{panel:e,header:t,tabs:l,content:p,statusbar:c,statusLeft:a,statusRight:d,resizeHandle:u}}createPanelElement(){return this.createPanelElementWithRefs().panel}createMockPanelElement(){let e=n=>({className:n,classList:{add:()=>{},remove:()=>{},toggle:()=>{},contains:()=>!1},style:{},dataset:{},querySelector:r=>r===".lyt-devtools-header"?t.headerEl:r===".lyt-devtools-tabs"?t.tabsEl:r===".lyt-devtools-content"?t.contentEl:r===".lyt-devtools-statusbar"?t.statusbarEl:r===".lyt-devtools-status-left"?t.statusLeftEl:r===".lyt-devtools-status-right"?t.statusRightEl:r===".lyt-devtools-resize-handle"?t.resizeHandleEl:null,querySelectorAll:()=>[],appendChild:()=>{},addEventListener:()=>{},removeEventListener:()=>{},offsetLeft:0,offsetTop:0,offsetWidth:100,offsetHeight:100,getBoundingClientRect:()=>({left:0,top:0,right:100,bottom:100,width:100,height:100})}),t=e("lyt-devtools-panel");return t.headerEl=e("lyt-devtools-header"),t.tabsEl=e("lyt-devtools-tabs"),t.contentEl=e("lyt-devtools-content"),t.statusbarEl=e("lyt-devtools-statusbar"),t.statusLeftEl=e("lyt-devtools-status-left"),t.statusRightEl=e("lyt-devtools-status-right"),t.resizeHandleEl=e("lyt-devtools-resize-handle"),t}switchTab(e){if(this.activeTab===e)return;this.activeTab=e,typeof window!="undefined"&&typeof document!="undefined"&&this.tabsEl&&this.tabsEl.querySelectorAll&&this.tabsEl.querySelectorAll(".lyt-devtools-tab").forEach(r=>{r.classList&&
|
|
285
|
+
`,Ee=[{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._resizeHandle=null;this.onWindowResize=()=>{if(!(typeof window!="undefined"&&typeof document!="undefined"))return;let t=this.panelEl.getBoundingClientRect(),n=window.innerWidth-100,r=window.innerHeight-36;t.left>n&&(this.panelEl.style.left=`${n}px`),t.top>r&&(this.panelEl.style.top=`${r}px`)};var n,r,o,s,l,p,c,a;this.config={width:(n=e==null?void 0:e.width)!=null?n:420,height:(r=e==null?void 0:e.height)!=null?r:560,x:(s=e==null?void 0:e.x)!=null?s:typeof window!="undefined"?window.innerWidth-((o=e==null?void 0:e.width)!=null?o:420)-20:100,y:(l=e==null?void 0:e.y)!=null?l:60,minWidth:(p=e==null?void 0:e.minWidth)!=null?p:320,minHeight:(c=e==null?void 0:e.minHeight)!=null?c:200,title:(a=e==null?void 0:e.title)!=null?a:"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};let t=typeof window!="undefined"&&typeof document!="undefined";if(t?(this.styleEl=document.createElement("style"),this.styleEl.textContent=Ce,document.head.appendChild(this.styleEl)):this.styleEl={},t){let{panel:d,header:u,tabs:h,content:f,statusbar:m,statusLeft:x,statusRight:v,resizeHandle:y}=this.createPanelElementWithRefs();this.panelEl=d,this.headerEl=u,this.tabsEl=h,this.contentEl=f,this.statusbarEl=m,this.statusLeftEl=x,this.statusRightEl=v,this._resizeHandle=y}else this.panelEl=this.createMockPanelElement(),this.headerEl=this.panelEl.headerEl,this.tabsEl=this.panelEl.tabsEl,this.contentEl=this.panelEl.contentEl,this.statusbarEl=this.panelEl.statusbarEl,this.statusLeftEl=this.panelEl.statusLeftEl,this.statusRightEl=this.panelEl.statusRightEl,this._resizeHandle=this.panelEl.resizeHandleEl;t&&document.body.appendChild(this.panelEl),t&&(this.bindDragEvents(),this.bindResizeEvents(),this.bindKeyboardEvents(),window.addEventListener("resize",this.onWindowResize))}createPanelElementWithRefs(){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 s=document.createElement("button");s.className="lyt-devtools-btn lyt-devtools-btn-close",s.textContent="\u2715",s.title="\u5173\u95ED\u9762\u677F",s.addEventListener("click",h=>{h.stopPropagation(),this.hide()}),r.appendChild(o),r.appendChild(s),t.appendChild(n),t.appendChild(r);let l=document.createElement("div");l.className="lyt-devtools-tabs";for(let h of Ee){let f=document.createElement("div");f.className=`lyt-devtools-tab${h.id===this.activeTab?" active":""}`,f.dataset?f.dataset.tab=h.id:f.setAttribute("data-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 p=document.createElement("div");p.className="lyt-devtools-content";let c=document.createElement("div");c.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 d=document.createElement("span");d.className="lyt-devtools-status-right",d.textContent="v0.0.1",c.appendChild(a),c.appendChild(d);let u=document.createElement("div");return u.className="lyt-devtools-resize-handle",e.appendChild(t),e.appendChild(l),e.appendChild(p),e.appendChild(c),e.appendChild(u),{panel:e,header:t,tabs:l,content:p,statusbar:c,statusLeft:a,statusRight:d,resizeHandle:u}}createPanelElement(){return this.createPanelElementWithRefs().panel}createMockPanelElement(){let e=n=>({className:n,classList:{add:()=>{},remove:()=>{},toggle:()=>{},contains:()=>!1},style:{},dataset:{},querySelector:r=>r===".lyt-devtools-header"?t.headerEl:r===".lyt-devtools-tabs"?t.tabsEl:r===".lyt-devtools-content"?t.contentEl:r===".lyt-devtools-statusbar"?t.statusbarEl:r===".lyt-devtools-status-left"?t.statusLeftEl:r===".lyt-devtools-status-right"?t.statusRightEl:r===".lyt-devtools-resize-handle"?t.resizeHandleEl:null,querySelectorAll:()=>[],appendChild:()=>{},addEventListener:()=>{},removeEventListener:()=>{},offsetLeft:0,offsetTop:0,offsetWidth:100,offsetHeight:100,getBoundingClientRect:()=>({left:0,top:0,right:100,bottom:100,width:100,height:100})}),t=e("lyt-devtools-panel");return t.headerEl=e("lyt-devtools-header"),t.tabsEl=e("lyt-devtools-tabs"),t.contentEl=e("lyt-devtools-content"),t.statusbarEl=e("lyt-devtools-statusbar"),t.statusLeftEl=e("lyt-devtools-status-left"),t.statusRightEl=e("lyt-devtools-status-right"),t.resizeHandleEl=e("lyt-devtools-resize-handle"),t}switchTab(e){if(this.activeTab===e)return;this.activeTab=e,typeof window!="undefined"&&typeof document!="undefined"&&this.tabsEl&&this.tabsEl.querySelectorAll&&this.tabsEl.querySelectorAll(".lyt-devtools-tab").forEach(r=>{let o=r;o.classList&&o.dataset&&o.classList.toggle("active",o.dataset.tab===e)}),this.renderContent()}registerTabRenderer(e,t){this.tabRenderers.set(e,t),this.activeTab===e&&this.renderContent()}renderContent(){if(typeof window!="undefined"&&typeof document!="undefined"&&this.contentEl){this.contentEl.innerHTML="";let t=this.tabRenderers.get(this.activeTab);t?t(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,typeof window!="undefined"&&typeof document!="undefined"&&this.panelEl&&this.panelEl.style&&(this.panelEl.style.display="flex")}hide(){this._visible=!1,typeof window!="undefined"&&typeof document!="undefined"&&this.panelEl&&this.panelEl.style&&(this.panelEl.style.display="none")}toggle(){this._visible?this.hide():this.show()}isVisible(){return this._visible}toggleCollapse(){this._collapsed=!this._collapsed,typeof window!="undefined"&&typeof document!="undefined"&&this.panelEl&&this.panelEl.classList&&this.panelEl.classList.toggle("collapsed",this._collapsed)}isCollapsed(){return this._collapsed}bindDragEvents(){typeof window!="undefined"&&typeof document!="undefined"&&(this.headerEl.addEventListener("mousedown",t=>{t.target.closest(".lyt-devtools-btn")||(this.dragState.isDragging=!0,this.dragState.startX=t.clientX,this.dragState.startY=t.clientY,this.dragState.startLeft=this.panelEl.offsetLeft,this.dragState.startTop=this.panelEl.offsetTop,t.preventDefault())}),document.addEventListener("mousemove",t=>{if(!this.dragState.isDragging)return;let n=t.clientX-this.dragState.startX,r=t.clientY-this.dragState.startY,o=this.dragState.startLeft+n,s=this.dragState.startTop+r;o=Math.max(0,Math.min(o,window.innerWidth-100)),s=Math.max(0,Math.min(s,window.innerHeight-36)),this.panelEl.style.left=`${o}px`,this.panelEl.style.top=`${s}px`}),document.addEventListener("mouseup",()=>{this.dragState.isDragging=!1}))}bindResizeEvents(){typeof window!="undefined"&&typeof document!="undefined"&&this._resizeHandle&&(this._resizeHandle.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),s=Math.max(this.config.minHeight,this.resizeState.startHeight+r);this.panelEl.style.width=`${o}px`,this.panelEl.style.height=`${s}px`}),document.addEventListener("mouseup",()=>{this.resizeState.isResizing=!1}))}bindKeyboardEvents(){typeof window!="undefined"&&typeof document!="undefined"&&document.addEventListener("keydown",t=>{t.ctrlKey&&t.shiftKey&&t.key==="D"&&(t.preventDefault(),this.toggle()),t.key==="Escape"&&this._visible&&this.hide()})}setStatusLeft(e){typeof window!="undefined"&&typeof document!="undefined"&&this.statusLeftEl&&(this.statusLeftEl.innerHTML=e)}setStatusRight(e){typeof window!="undefined"&&typeof document!="undefined"&&this.statusRightEl&&(this.statusRightEl.textContent=e)}setConnected(e){if(typeof window!="undefined"&&typeof document!="undefined"&&this.statusLeftEl&&this.statusLeftEl.querySelector){let n=this.statusLeftEl.querySelector(".lyt-devtools-status-dot");n&&n.classList&&n.classList.toggle("disconnected",!e)}}highlightElement(e){if(this.clearHighlight(),!e)return;if(typeof window!="undefined"&&typeof document!="undefined"){this.highlightOverlay=document.createElement("div"),this.highlightOverlay.style.cssText=`
|
|
286
286
|
position: fixed;
|
|
287
287
|
z-index: 999998;
|
|
288
288
|
pointer-events: none;
|
|
@@ -290,7 +290,7 @@ var Ce=`
|
|
|
290
290
|
background: rgba(203, 166, 247, 0.1);
|
|
291
291
|
border-radius: 2px;
|
|
292
292
|
transition: all 0.15s ease;
|
|
293
|
-
`;let n=e.getBoundingClientRect();this.highlightOverlay.style.left=`${n.left}px`,this.highlightOverlay.style.top=`${n.top}px`,this.highlightOverlay.style.width=`${n.width}px`,this.highlightOverlay.style.height=`${n.height}px`,document.body.appendChild(this.highlightOverlay)}}clearHighlight(){typeof window!="undefined"&&typeof document!="undefined"&&this.highlightOverlay&&(this.highlightOverlay.remove(),this.highlightOverlay=null)}destroy(){let e=typeof window!="undefined"&&typeof document!="undefined";e&&this.styleEl&&this.styleEl.remove&&this.styleEl.remove(),e&&this.panelEl&&this.panelEl.remove&&this.panelEl.remove(),this.clearHighlight(),e&&window.removeEventListener("resize",this.onWindowResize),this.tabRenderers.clear()}};var E=new Map,M=[],S=[],ye=0,H=null,C={},_=!1;function we(){return`comp_${++ye}`}function Se(){return`evt_${++ye}`}function ge(i){var t;if(!i)return"Unknown";let e=i.type||i.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 w(i){if(i===null||typeof i!="object")return i;if(Array.isArray(i))return i.map(t=>w(t));let e={};for(let t of Object.keys(i))e[t]=w(i[t]);return e}function Re(i,e){return i===e?!1:typeof i!=typeof e?!0:i===null||e===null?i!==e:typeof i=="object"?JSON.stringify(i)!==JSON.stringify(e):i!==e}function Me(i,e){let t=e.split("."),n=i;for(let r of t){if(n==null||typeof n!="object")return;n=n[r]}return n}function Le(i,e,t){let n=e.split("."),r=i;for(let o=0;o<n.length-1;o++)(r[n[o]]===null||r[n[o]]===void 0||typeof r[n[o]]!="object")&&(r[n[o]]={}),r=r[n[o]];r[n[n.length-1]]=t}function J(i,e){_||(e&&Object.assign(C,e),_=!0,ke(i),i._instance&&(U(i._instance,null),V()))}function ke(i){let e=i.mount.bind(i);i.mount=function(t){let n=e(t);return i._instance&&(U(i._instance,null),V()),n}}function U(i,e){var o,s,l,p,c,a,d,u;if(!i)return;let t=ve(i),n=!t;if(n){let h=we();t={id:h,name:ge(i),parentId:e,childIds:[],props:{},state:{},computed:{},isMounted:(o=i.isMounted)!=null?o:!1,isUnmounted:(s=i.isUnmounted)!=null?s:!1,el:(l=i.el)!=null?l:null,renderTime:0,lastUpdateTime:Date.now(),instance:i},E.set(h,t)}else t.parentId=e,t.name=ge(i),t.isMounted=(p=i.isMounted)!=null?p:!1,t.isUnmounted=(c=i.isUnmounted)!=null?c:!1,t.el=(a=i.el)!=null?a:null,t.lastUpdateTime=Date.now();i.props&&(t.props=w(i.props)),i.state&&(t.state=w(i.state)),i.computedCache&&(t.computed=w(i.computedCache)),n&&i.state&&typeof i.state=="object"&&Pe(t.id,i),n&&i.emit&&typeof i.emit=="function"&&De(t.id,i),n?(d=C.onComponentCreated)==null||d.call(C,t):(u=C.onComponentUpdated)==null||u.call(C,t);let r=i.subTree;r&&xe(r,t.id)}function xe(i,e){if(i){if(i.component){U(i.component,e);let t=E.get(e);if(t&&!t.childIds.includes(i.component.id||i.component._id)){let n=He(i.component);n&&!t.childIds.includes(n)&&t.childIds.push(n)}return}if(i.children&&Array.isArray(i.children))for(let t of i.children)t&&typeof t=="object"&&xe(t,e)}}function Pe(i,e){if(!e.state||typeof e.state!="object")return;let t=e.state,n=E.get(i);if(n&&!t.__devtools_intercepted__)try{Object.defineProperty(t,"__devtools_intercepted__",{value:!0,enumerable:!1,configurable:!1});let r=new Proxy(t,{set(o,s,l){var a;let p=o[s],c=Reflect.set(o,s,l);if(Re(p,l)){let d=String(s),u={componentId:i,componentName:n.name,path:d,oldValue:w(p),newValue:w(l),timestamp:Date.now()};S.push(u),S.length>1e3&&S.splice(0,S.length-1e3),n.state=w(o),n.lastUpdateTime=Date.now(),(a=C.onStateChanged)==null||a.call(C,u)}return c}});Object.defineProperty(e,"__devtools_state_proxy__",{value:r,enumerable:!1,configurable:!0})}catch(r){}}function De(i,e){if(!e.emit||typeof e.emit!="function")return;let t=e.emit,n=E.get(i);n&&(e.emit=function(r,...o){var l;let s={id:Se(),name:r,timestamp:Date.now(),args:w(o),componentId:i,componentName:n.name};return M.push(s),M.length>500&&M.splice(0,M.length-500),(l=C.onEventEmitted)==null||l.call(C,s),t.call(this,r,...o)})}function V(){typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("lyt-devtools-update"))}function ve(i){for(let e of E.values())if(e.instance===i)return e;return null}function He(i){let e=ve(i);return e?e.id:null}function k(){return Array.from(E.values())}function W(){for(let i of E.values())if(i.parentId===null)return i;return null}function I(i){var e;return(e=E.get(i))!=null?e:null}function Y(i){let e=E.get(i);return e?e.childIds.map(t=>E.get(t)).filter(Boolean):[]}function K(){return[...M]}function Ie(){return[...S]}function X(i){return S.filter(e=>e.componentId===i)}function Be(i){return M.filter(e=>e.componentId===i)}function G(i){H=i}function Q(){var i;return H&&(i=E.get(H))!=null?i:null}function P(){return H}function Z(i,e,t){var l;let n=E.get(i);if(!n||!n.instance)return!1;let r=n.instance.state;if(!r||typeof r!="object")return!1;let o=Me(r,e);Le(r,e,t);let s={componentId:i,componentName:n.name,path:e,oldValue:w(o),newValue:w(t),timestamp:Date.now()};return S.push(s),n.state=w(r),n.lastUpdateTime=Date.now(),(l=C.onStateChanged)==null||l.call(C,s),!0}function ee(i){E.clear(),i._instance&&(U(i._instance,null),V())}function te(){M.length=0,S.length=0}function ne(){E.clear(),M.length=0,S.length=0,H=null,_=!1}function ze(){return _}function Ne(){return E.size}var B=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=W();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 s=this.searchKeyword.toLowerCase(),l=r.name.toLowerCase().includes(s),p=r.id.toLowerCase().includes(s);if(!l&&!p)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 s=t.get(o);s.children.push(r),r.depth=s.depth+1}else n.push(r)}return n}renderTreeNode(e){let{info:t,depth:n,expanded:r}=e,o=P(),s=t.id===o,l=document.createElement("div");l.className="lyt-tree-node",l.style.cssText=`
|
|
293
|
+
`;let n=e.getBoundingClientRect();this.highlightOverlay.style.left=`${n.left}px`,this.highlightOverlay.style.top=`${n.top}px`,this.highlightOverlay.style.width=`${n.width}px`,this.highlightOverlay.style.height=`${n.height}px`,document.body.appendChild(this.highlightOverlay)}}clearHighlight(){typeof window!="undefined"&&typeof document!="undefined"&&this.highlightOverlay&&(this.highlightOverlay.remove(),this.highlightOverlay=null)}destroy(){let e=typeof window!="undefined"&&typeof document!="undefined";e&&this.styleEl&&this.styleEl.remove&&this.styleEl.remove(),e&&this.panelEl&&this.panelEl.remove&&this.panelEl.remove(),this.clearHighlight(),e&&window.removeEventListener("resize",this.onWindowResize),this.tabRenderers.clear()}};var E=new Map,M=[],S=[],ye=0,H=null,C={},_=!1;function we(){return`comp_${++ye}`}function Se(){return`evt_${++ye}`}function ge(i){var t;if(!i)return"Unknown";let e=i.type||i.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 w(i){if(i===null||typeof i!="object")return i;if(Array.isArray(i))return i.map(t=>w(t));let e={};for(let t of Object.keys(i))e[t]=w(i[t]);return e}function Re(i,e){return i===e?!1:typeof i!=typeof e?!0:i===null||e===null?i!==e:typeof i=="object"?JSON.stringify(i)!==JSON.stringify(e):i!==e}function Me(i,e){let t=e.split("."),n=i;for(let r of t){if(n==null||typeof n!="object")return;n=n[r]}return n}function Le(i,e,t){let n=e.split("."),r=i;for(let o=0;o<n.length-1;o++)(r[n[o]]===null||r[n[o]]===void 0||typeof r[n[o]]!="object")&&(r[n[o]]={}),r=r[n[o]];r[n[n.length-1]]=t}function J(i,e){_||(e&&Object.assign(C,e),_=!0,ke(i),i._instance&&(U(i._instance,null),V()))}function ke(i){let e=i.mount.bind(i);i.mount=function(t){let n=e(t);return i._instance&&(U(i._instance,null),V()),n}}function U(i,e){var o,s,l,p,c,a,d,u;if(!i)return;let t=ve(i),n=!t;if(n){let h=we();t={id:h,name:ge(i),parentId:e,childIds:[],props:{},state:{},computed:{},isMounted:(o=i.isMounted)!=null?o:!1,isUnmounted:(s=i.isUnmounted)!=null?s:!1,el:(l=i.el)!=null?l:null,renderTime:0,lastUpdateTime:Date.now(),instance:i},E.set(h,t)}else t&&(t.parentId=e,t.name=ge(i),t.isMounted=(p=i.isMounted)!=null?p:!1,t.isUnmounted=(c=i.isUnmounted)!=null?c:!1,t.el=(a=i.el)!=null?a:null,t.lastUpdateTime=Date.now());t&&i.props&&(t.props=w(i.props)),t&&i.state&&(t.state=w(i.state)),t&&i.computedCache&&(t.computed=w(i.computedCache)),n&&t&&i.state&&typeof i.state=="object"&&Pe(t.id,i),n&&t&&i.emit&&typeof i.emit=="function"&&De(t.id,i),n&&t?(d=C.onComponentCreated)==null||d.call(C,t):t&&((u=C.onComponentUpdated)==null||u.call(C,t));let r=i.subTree;r&&t&&xe(r,t.id)}function xe(i,e){if(i){if(i.component){U(i.component,e);let t=E.get(e);if(t&&!t.childIds.includes(i.component.id||i.component._id)){let n=He(i.component);n&&!t.childIds.includes(n)&&t.childIds.push(n)}return}if(i.children&&Array.isArray(i.children))for(let t of i.children)t&&typeof t=="object"&&xe(t,e)}}function Pe(i,e){if(!e.state||typeof e.state!="object")return;let t=e.state,n=E.get(i);if(n&&!t.__devtools_intercepted__)try{Object.defineProperty(t,"__devtools_intercepted__",{value:!0,enumerable:!1,configurable:!1});let r=new Proxy(t,{set(o,s,l){var a;let p=o[s],c=Reflect.set(o,s,l);if(Re(p,l)){let d=String(s),u={componentId:i,componentName:n.name,path:d,oldValue:w(p),newValue:w(l),timestamp:Date.now()};S.push(u),S.length>1e3&&S.splice(0,S.length-1e3),n.state=w(o),n.lastUpdateTime=Date.now(),(a=C.onStateChanged)==null||a.call(C,u)}return c}});Object.defineProperty(e,"__devtools_state_proxy__",{value:r,enumerable:!1,configurable:!0})}catch(r){}}function De(i,e){if(!e.emit||typeof e.emit!="function")return;let t=e.emit,n=E.get(i);n&&(e.emit=function(r,...o){var l;let s={id:Se(),name:r,timestamp:Date.now(),args:w(o),componentId:i,componentName:n.name};return M.push(s),M.length>500&&M.splice(0,M.length-500),(l=C.onEventEmitted)==null||l.call(C,s),t.call(this,r,...o)})}function V(){typeof window!="undefined"&&window.dispatchEvent(new CustomEvent("lyt-devtools-update"))}function ve(i){for(let e of E.values())if(e.instance===i)return e;return null}function He(i){let e=ve(i);return e?e.id:null}function k(){return Array.from(E.values())}function W(){for(let i of E.values())if(i.parentId===null)return i;return null}function I(i){var e;return(e=E.get(i))!=null?e:null}function Y(i){let e=E.get(i);return e?e.childIds.map(t=>E.get(t)).filter(Boolean):[]}function K(){return[...M]}function Ie(){return[...S]}function X(i){return S.filter(e=>e.componentId===i)}function Be(i){return M.filter(e=>e.componentId===i)}function G(i){H=i}function Q(){var i;return H&&(i=E.get(H))!=null?i:null}function P(){return H}function Z(i,e,t){var l;let n=E.get(i);if(!n||!n.instance)return!1;let r=n.instance.state;if(!r||typeof r!="object")return!1;let o=Me(r,e);Le(r,e,t);let s={componentId:i,componentName:n.name,path:e,oldValue:w(o),newValue:w(t),timestamp:Date.now()};return S.push(s),n.state=w(r),n.lastUpdateTime=Date.now(),(l=C.onStateChanged)==null||l.call(C,s),!0}function ee(i){E.clear(),i._instance&&(U(i._instance,null),V())}function te(){M.length=0,S.length=0}function ne(){E.clear(),M.length=0,S.length=0,H=null,_=!1}function ze(){return _}function Ne(){return E.size}var B=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=W();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 s=this.searchKeyword.toLowerCase(),l=r.name.toLowerCase().includes(s),p=r.id.toLowerCase().includes(s);if(!l&&!p)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 s=t.get(o);s.children.push(r),r.depth=s.depth+1}else n.push(r)}return n}renderTreeNode(e){let{info:t,depth:n,expanded:r}=e,o=P(),s=t.id===o,l=document.createElement("div");l.className="lyt-tree-node",l.style.cssText=`
|
|
294
294
|
display: flex;
|
|
295
295
|
align-items: center;
|
|
296
296
|
padding: 3px 8px;
|
|
@@ -345,7 +345,7 @@ var Ce=`
|
|
|
345
345
|
cursor: pointer;
|
|
346
346
|
font-size: 11px;
|
|
347
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,s=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:${s} S:${o} C:${l}</span>`)}renderCategory(e,t,n,r,o,s){let l=Object.keys(n);if(l.length===0)return;let p=document.createElement("div");p.style.cssText=`
|
|
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(this.container,"props",e.props,!0,!1,!1),this.renderCategory(this.container,"state",e.state,!1,!0,!1),this.renderCategory(this.container,"computed",e.computed,!1,!1,!0));let o=Object.keys(e.state).length,s=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:${s} S:${o} C:${l}</span>`)}renderCategory(e,t,n,r,o,s){let l=Object.keys(n);if(l.length===0)return;let p=document.createElement("div");p.style.cssText=`
|
|
349
349
|
display: flex;
|
|
350
350
|
align-items: center;
|
|
351
351
|
padding: 4px 8px;
|
|
@@ -608,7 +608,7 @@ var Ce=`
|
|
|
608
608
|
background: ${r?"#313244":"transparent"};
|
|
609
609
|
color: ${o?"#89b4fa":"#cdd6f4"};
|
|
610
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;",s?l.textContent=e.expanded?"\u25BC":"\u25B6":l.textContent="\xB7",n.appendChild(l);let p=document.createElement("span");if(p.textContent=e.node.name,p.style.cssText="font-weight: bold;",n.appendChild(p),e.node.stateSummary){let d=document.createElement("span");d.textContent=` ${e.node.stateSummary}`,d.style.cssText="color: #a6adc8; font-size: 10px; margin-left: 6px;",n.appendChild(d)}if(e.node.propsCount!==void 0&&e.node.propsCount>0){let d=document.createElement("span");d.textContent=` [${e.node.propsCount} props]`,d.style.cssText="color: #585b70; font-size: 10px; margin-left: 4px;",n.appendChild(d)}let c=e.node,a=c.id;return n.addEventListener("click",()=>{var d;if(s){let u=(d=this.expandedMap.get(a))!=null?d:!1;this.expandedMap.set(a,!u),this.flatten(),this.renderNodes()}this.selectedId=a,this.onNodeClick&&this.onNodeClick(c)}),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 de=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}},qe=100,je=1024,Je=.7,Ve=5,pe=class{constructor(e){this.counter=0;var t,n,r,o;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:qe,leakGrowthThreshold:(n=e==null?void 0:e.leakGrowthThreshold)!=null?n:je,leakRSquaredThreshold:(r=e==null?void 0:e.leakRSquaredThreshold)!=null?r:Je,leakMinSnapshots:(o=e==null?void 0:e.leakMinSnapshots)!=null?o:Ve},this.snapshots=new de(this.config.bufferSize)}trackMemoryUsage(e,t,n,r){if(e===void 0){let s=performance.memory;s&&(e=s.usedJSHeapSize,t=s.totalJSHeapSize,n=s.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,s=t.jsHeapSizeLimit>0?t.usedJSHeapSize/t.jsHeapSizeLimit*100:0;return{timestamp:t.timestamp,usedJSHeapSize:t.usedJSHeapSize,delta:o,usagePercent:s}})}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,s=0,l=0;for(let g=0;g<t;g++){let b=g,T=e[g].usedJSHeapSize;n+=b,r+=T,o+=b*T,s+=b*b,l+=T*T}let p=t*s-n*n,c=p!==0?(t*o-n*r)/p:0,a=r/t,d=0,u=0;for(let g=0;g<t;g++){let b=e[g].usedJSHeapSize,T=c*g+(r-c*n)/t;d+=(b-a)*(b-a),u+=(b-T)*(b-T)}let h=d!==0?1-u/d:0,f=(e[t-1].timestamp-e[0].timestamp)/1e3,m=f>0?c/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,s=0,l=0,p=1/0;for(let d of e)(!r||d.timestamp>r.timestamp)&&(r=d),d.usedJSHeapSize>o&&(o=d.usedJSHeapSize,s=d.timestamp),l+=d.usedJSHeapSize,d.usedJSHeapSize<p&&(p=d.usedJSHeapSize);let c=e.length>0?l/e.length:0;p===1/0&&(p=0);let a=e.length>=2?e[e.length-1].usedJSHeapSize-e[0].usedJSHeapSize:0;return{generatedAt:Date.now(),current:r,peakUsage:o,peakTimestamp:s,averageUsage:c,minUsage:p,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 ce=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}},We=200,Ye=16,ue=class{constructor(e){this.counter=0;var t,n;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:We,slowThreshold:(n=e==null?void 0:e.slowThreshold)!=null?n:Ye},this.records=new ce(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,s=0,l=new Map;for(let c of e){n+=c.duration,c.duration>r&&(r=c.duration),c.duration<o&&(o=c.duration),c.duration>t&&s++;let a=l.get(c.componentName);a||(a={renderCount:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,slowCount:0},l.set(c.componentName,a)),a.renderCount++,a.totalDuration+=c.duration,c.duration>a.maxDuration&&(a.maxDuration=c.duration),c.duration<a.minDuration&&(a.minDuration=c.duration),c.duration>t&&a.slowCount++}let p=Array.from(l.entries()).map(([c,a])=>({componentName:c,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((c,a)=>a.avgDuration-c.avgDuration);return{totalRenders:e.length,totalDuration:n,avgDuration:n/e.length,maxDuration:r===-1/0?0:r,minDuration:o===1/0?0:o,slowRenderCount:s,slowRenderRatio:s/e.length,byComponent:p}}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 he=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}},Ke=100,Xe=1e3,Ge=2,me=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:Ke,slowThreshold:(n=e==null?void 0:e.slowThreshold)!=null?n:Xe,outlierSigmaThreshold:(r=e==null?void 0:e.outlierSigmaThreshold)!=null?r:Ge},this.records=new he(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 p=o.get(l.name);p||(p={count:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,durations:[]},o.set(l.name,p)),p.count++,p.totalDuration+=l.duration,l.duration>p.maxDuration&&(p.maxDuration=l.duration),l.duration<p.minDuration&&(p.minDuration=l.duration),p.durations.push(l.duration)}let s=Array.from(o.entries()).map(([l,p])=>{let c=p.totalDuration/p.count,a=0;for(let u of p.durations)a+=(u-c)*(u-c);a/=p.count;let d=Math.sqrt(a);return{name:l,count:p.count,avgDuration:c,maxDuration:p.maxDuration===-1/0?0:p.maxDuration,minDuration:p.minDuration===1/0?0:p.minDuration,totalDuration:p.totalDuration,stdDev:d}});return{totalBatches:e.length,totalDuration:t,avgDuration:t/e.length,maxDuration:n===-1/0?0:n,minDuration:r===1/0?0:r,byName:s}}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 s=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:s&&s.stdDev>0?(o.duration-s.avgDuration)/s.stdDev:0});continue}if(s&&s.count>=2&&s.stdDev>0){let l=(o.duration-s.avgDuration)/s.stdDev;if(Math.abs(l)>this.config.outlierSigmaThreshold){let p=l>0?"slow":"fast";n.push({name:o.name,duration:o.duration,timestamp:o.endTime,anomalyType:p,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,s)=>o.timestamp-s.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 fe=class{constructor(e){this._installed=!1;this.app=null;var t,n,r,o,s,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:(s=e==null?void 0:e.autoShow)!=null?s:!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 B(this.panel,p=>{this.panel.switchTab("state"),this.stateInspector.refresh()}),this.stateInspector=new z(this.panel),this.eventTracker=new N(this.panel),this.timeTravel=new $(this.panel),this.panel.registerTabRenderer("components",p=>{this.componentTree.render(p)}),this.panel.registerTabRenderer("state",p=>{this.stateInspector.render(p)}),this.panel.registerTabRenderer("events",p=>{this.eventTracker.render(p)}),this.panel.registerTabRenderer("router",p=>{this.renderRouterTab(p)}),this.panel.renderContent(),this.config.autoShow||this.panel.hide()}install(e){if(this._installed)return;this.app=e,this._installed=!0,J(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)}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=`
|
|
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;",s?l.textContent=e.expanded?"\u25BC":"\u25B6":l.textContent="\xB7",n.appendChild(l);let p=document.createElement("span");if(p.textContent=e.node.name,p.style.cssText="font-weight: bold;",n.appendChild(p),e.node.stateSummary){let d=document.createElement("span");d.textContent=` ${e.node.stateSummary}`,d.style.cssText="color: #a6adc8; font-size: 10px; margin-left: 6px;",n.appendChild(d)}if(e.node.propsCount!==void 0&&e.node.propsCount>0){let d=document.createElement("span");d.textContent=` [${e.node.propsCount} props]`,d.style.cssText="color: #585b70; font-size: 10px; margin-left: 4px;",n.appendChild(d)}let c=e.node,a=c.id;return n.addEventListener("click",()=>{var d;if(s){let u=(d=this.expandedMap.get(a))!=null?d:!1;this.expandedMap.set(a,!u),this.flatten(),this.renderNodes()}this.selectedId=a,this.onNodeClick&&this.onNodeClick(c)}),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 de=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}},qe=100,je=1024,Je=.7,Ve=5,pe=class{constructor(e){this.counter=0;var t,n,r,o;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:qe,leakGrowthThreshold:(n=e==null?void 0:e.leakGrowthThreshold)!=null?n:je,leakRSquaredThreshold:(r=e==null?void 0:e.leakRSquaredThreshold)!=null?r:Je,leakMinSnapshots:(o=e==null?void 0:e.leakMinSnapshots)!=null?o:Ve},this.snapshots=new de(this.config.bufferSize)}trackMemoryUsage(e,t,n,r){if(e===void 0){let s=performance.memory;s&&(e=s.usedJSHeapSize,t=s.totalJSHeapSize,n=s.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,s=t.jsHeapSizeLimit>0?t.usedJSHeapSize/t.jsHeapSizeLimit*100:0;return{timestamp:t.timestamp,usedJSHeapSize:t.usedJSHeapSize,delta:o,usagePercent:s}})}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,s=0,l=0;for(let g=0;g<t;g++){let b=g,T=e[g].usedJSHeapSize;n+=b,r+=T,o+=b*T,s+=b*b,l+=T*T}let p=t*s-n*n,c=p!==0?(t*o-n*r)/p:0,a=r/t,d=0,u=0;for(let g=0;g<t;g++){let b=e[g].usedJSHeapSize,T=c*g+(r-c*n)/t;d+=(b-a)*(b-a),u+=(b-T)*(b-T)}let h=d!==0?1-u/d:0,f=(e[t-1].timestamp-e[0].timestamp)/1e3,m=f>0?c/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,s=0,l=0,p=1/0;for(let d of e)(!r||d.timestamp>r.timestamp)&&(r=d),d.usedJSHeapSize>o&&(o=d.usedJSHeapSize,s=d.timestamp),l+=d.usedJSHeapSize,d.usedJSHeapSize<p&&(p=d.usedJSHeapSize);let c=e.length>0?l/e.length:0;p===1/0&&(p=0);let a=e.length>=2?e[e.length-1].usedJSHeapSize-e[0].usedJSHeapSize:0;return{generatedAt:Date.now(),current:r,peakUsage:o,peakTimestamp:s,averageUsage:c,minUsage:p,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 ce=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}},We=200,Ye=16,ue=class{constructor(e){this.counter=0;var t,n;this.config={bufferSize:(t=e==null?void 0:e.bufferSize)!=null?t:We,slowThreshold:(n=e==null?void 0:e.slowThreshold)!=null?n:Ye},this.records=new ce(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,s=0,l=new Map;for(let c of e){n+=c.duration,c.duration>r&&(r=c.duration),c.duration<o&&(o=c.duration),c.duration>t&&s++;let a=l.get(c.componentName);a||(a={renderCount:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,slowCount:0},l.set(c.componentName,a)),a.renderCount++,a.totalDuration+=c.duration,c.duration>a.maxDuration&&(a.maxDuration=c.duration),c.duration<a.minDuration&&(a.minDuration=c.duration),c.duration>t&&a.slowCount++}let p=Array.from(l.entries()).map(([c,a])=>({componentName:c,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((c,a)=>a.avgDuration-c.avgDuration);return{totalRenders:e.length,totalDuration:n,avgDuration:n/e.length,maxDuration:r===-1/0?0:r,minDuration:o===1/0?0:o,slowRenderCount:s,slowRenderRatio:s/e.length,byComponent:p}}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 he=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}},Ke=100,Xe=1e3,Ge=2,me=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:Ke,slowThreshold:(n=e==null?void 0:e.slowThreshold)!=null?n:Xe,outlierSigmaThreshold:(r=e==null?void 0:e.outlierSigmaThreshold)!=null?r:Ge},this.records=new he(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 p=o.get(l.name);p||(p={count:0,totalDuration:0,maxDuration:-1/0,minDuration:1/0,durations:[]},o.set(l.name,p)),p.count++,p.totalDuration+=l.duration,l.duration>p.maxDuration&&(p.maxDuration=l.duration),l.duration<p.minDuration&&(p.minDuration=l.duration),p.durations.push(l.duration)}let s=Array.from(o.entries()).map(([l,p])=>{let c=p.totalDuration/p.count,a=0;for(let u of p.durations)a+=(u-c)*(u-c);a/=p.count;let d=Math.sqrt(a);return{name:l,count:p.count,avgDuration:c,maxDuration:p.maxDuration===-1/0?0:p.maxDuration,minDuration:p.minDuration===1/0?0:p.minDuration,totalDuration:p.totalDuration,stdDev:d}});return{totalBatches:e.length,totalDuration:t,avgDuration:t/e.length,maxDuration:n===-1/0?0:n,minDuration:r===1/0?0:r,byName:s}}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 s=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:s&&s.stdDev>0?(o.duration-s.avgDuration)/s.stdDev:0});continue}if(s&&s.count>=2&&s.stdDev>0){let l=(o.duration-s.avgDuration)/s.stdDev;if(Math.abs(l)>this.config.outlierSigmaThreshold){let p=l>0?"slow":"fast";n.push({name:o.name,duration:o.duration,timestamp:o.endTime,anomalyType:p,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,s)=>o.timestamp-s.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 fe=class{constructor(e){this._installed=!1;this.app=null;var t,n,r,o,s,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:0,y:(o=e==null?void 0:e.y)!=null?o:0,autoShow:(s=e==null?void 0:e.autoShow)!=null?s:!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 B(this.panel,p=>{this.panel.switchTab("state"),this.stateInspector.refresh()}),this.stateInspector=new z(this.panel),this.eventTracker=new N(this.panel),this.timeTravel=new $(this.panel),this.panel.registerTabRenderer("components",p=>{this.componentTree.render(p)}),this.panel.registerTabRenderer("state",p=>{this.stateInspector.render(p)}),this.panel.registerTabRenderer("events",p=>{this.eventTracker.render(p)}),this.panel.registerTabRenderer("router",p=>{this.renderRouterTab(p)}),this.panel.renderContent(),this.config.autoShow||this.panel.hide()}install(e){if(this._installed)return;this.app=e,this._installed=!0,J(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)}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
612
|
<div style="font-size: 32px; margin-bottom: 12px;">\u{1F517}</div>
|
|
613
613
|
<div style="color: #cdd6f4; font-size: 14px; margin-bottom: 8px; font-style: normal;">\u8DEF\u7531\u68C0\u67E5\u5668</div>
|
|
614
614
|
<div style="color: #585b70; font-size: 12px;">
|