@xiaou66/vite-plugin-vue-mcp-next 1.2.0 → 1.3.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.
@@ -0,0 +1,1019 @@
1
+ import { Hookable } from 'hookable';
2
+ import { ViteDevServer } from 'vite';
3
+
4
+ /**
5
+ * 提供固定容量的内存缓存。
6
+ *
7
+ * Console 和 Network 都是持续增长的数据源,使用环形缓存可以保证开发服务器长时间运行时
8
+ * 内存占用仍然可控,同时保留最近的调试上下文。
9
+ */
10
+ interface RingBuffer<T> {
11
+ /** 写入一条新记录,超过容量时会丢弃最早记录。 */
12
+ push(value: T): void;
13
+ /** 返回按时间顺序排列的缓存快照,避免调用方直接修改内部数组。 */
14
+ all(): T[];
15
+ /** 清空缓存,适合 MCP clear 类工具使用。 */
16
+ clear(): void;
17
+ }
18
+
19
+ /**
20
+ * 插件对外暴露的主配置入口。
21
+ *
22
+ * 这些选项会同时影响 Vite 注入、MCP 服务、CDP 连接和运行时采集策略,
23
+ * 因此集中在一个顶层接口里,便于使用者在 `vite.config.ts` 中一次性理解调试边界。
24
+ */
25
+ interface VueMcpNextOptions {
26
+ /** MCP 服务挂载路径,默认 `/__mcp`,用于避开业务路由并延续参考项目接入方式。 */
27
+ readonly mcpPath?: string;
28
+ /** MCP 服务打印和 Cursor 配置中使用的 host,默认 `localhost` 以限制本机开发访问。 */
29
+ readonly host?: string;
30
+ /** 是否在 Vite 启动日志中打印 MCP 地址,默认开启方便开发者复制到 MCP 客户端。 */
31
+ readonly printUrl?: boolean;
32
+ /** 是否写入 Cursor MCP 配置;默认只在 `.cursor` 已存在时写入,显式 `true` 会创建配置。 */
33
+ readonly updateCursorMcpJson?: boolean | CursorMcpConfig;
34
+ /** 是否写入常见 AI 客户端的项目级 MCP 配置;默认按项目已有客户端入口自动探测。 */
35
+ readonly mcpClients?: McpClientConfigOptions;
36
+ /** AI 使用指南自动安装配置,用于让 AI 客户端知道何时以及如何使用本 MCP。 */
37
+ readonly skill?: SkillConfigOptions;
38
+ /** 页面元素选择器配置,用于让用户复制可被 MCP 解析的 elementId。 */
39
+ readonly elementPicker?: ElementPickerOptions;
40
+ /** 非 HTML 入口的运行时脚本注入点,用于兼容不直接使用 `index.html` 的项目。 */
41
+ readonly appendTo?: string | RegExp;
42
+ /** 通用 DevTools 能力配置;Vue 专属能力不受该配置影响,始终走 Vue Runtime Bridge。 */
43
+ readonly runtime?: RuntimeOptions;
44
+ /** CDP 连接配置;插件只连接已有端点,不负责启动浏览器进程。 */
45
+ readonly cdp?: CdpOptions;
46
+ /** Network 采集配置;请求体、响应体和 header 可能敏感,因此独立配置采集边界。 */
47
+ readonly network?: NetworkOptions;
48
+ /** DOM 输出限制;页面 DOM 可能巨大,必须默认裁剪以适配 MCP 上下文。 */
49
+ readonly dom?: DomOptions;
50
+ /** Console 日志缓存限制;日志是持续增长数据源,必须防止内存无界增长。 */
51
+ readonly console?: ConsoleOptions;
52
+ /** Screenshot 配置;CDP 真截图优先,runtime 降级使用 snapdom。 */
53
+ readonly screenshot?: ScreenshotOptions;
54
+ /** 性能诊断配置;默认用轻量 Runtime 采样,配置 CDP 后可升级为 CPU Profile 与 Heap Snapshot。 */
55
+ readonly performance?: PerformanceOptions;
56
+ }
57
+ /**
58
+ * 元素选择器快捷键配置。
59
+ *
60
+ * 默认使用 Alt/Option + Shift,目标是在开发态降低普通点击误触;
61
+ * 项目已有快捷键冲突时,可以只覆盖冲突字段而保留其他默认键位。
62
+ */
63
+ interface ElementPickerShortcut {
64
+ /** 是否要求 Alt/Option 键,默认开启以复用 code-inspector 的选择心智。 */
65
+ readonly altKey?: boolean;
66
+ /** 是否要求 Shift 键,默认开启以降低普通点击误触概率。 */
67
+ readonly shiftKey?: boolean;
68
+ /** 是否要求 Meta 键,默认关闭,项目可按自身快捷键冲突覆盖。 */
69
+ readonly metaKey?: boolean;
70
+ /** 是否要求 Ctrl 键,默认关闭,适合 Windows/Linux 项目自定义。 */
71
+ readonly ctrlKey?: boolean;
72
+ }
73
+ /**
74
+ * 页面元素选择器配置。
75
+ *
76
+ * 选择器只影响浏览器 runtime 的交互层;关闭它不会影响 MCP 对已有
77
+ * `elementId` 的静态解析能力。
78
+ */
79
+ interface ElementPickerOptions {
80
+ /** 是否启用页面内元素选择器;关闭后仍保留 MCP 静态 ID 解析能力。 */
81
+ readonly enabled?: boolean;
82
+ /** 进入选择模式的组合键配置。 */
83
+ readonly shortcut?: ElementPickerShortcut;
84
+ /** 复制成功或失败后的轻提示展示时长。 */
85
+ readonly toastDurationMs?: number;
86
+ }
87
+ /**
88
+ * 浏览器 runtime 启动参数。
89
+ *
90
+ * 该配置由 Vite 虚拟模块序列化注入,避免 runtime 重新推导用户配置。
91
+ */
92
+ interface RuntimeClientOptions {
93
+ /** 浏览器 runtime 需要的元素选择器配置,由 Vite 虚拟模块序列化注入。 */
94
+ readonly elementPicker: Required<Omit<ElementPickerOptions, 'shortcut'>> & {
95
+ readonly shortcut: Required<ElementPickerShortcut>;
96
+ };
97
+ /** Vite 项目根目录,用于把 Vue runtime 暴露的绝对组件路径转回项目相对路径。 */
98
+ readonly projectRoot?: string;
99
+ }
100
+ /**
101
+ * 元素上下文查询结果。
102
+ *
103
+ * 成功结果优先给出可编辑源码位置;第三方包和 runtime 兜底会通过
104
+ * `editable` 与 `limitations` 明确告诉 AI 能做什么、不能做什么。
105
+ */
106
+ type ElementContextResult = {
107
+ readonly ok: true;
108
+ readonly elementId: string;
109
+ readonly editable: boolean;
110
+ readonly codeLocation?: {
111
+ readonly file: string;
112
+ readonly line: number;
113
+ readonly column: number;
114
+ };
115
+ readonly packageLocation?: {
116
+ readonly packageName: string;
117
+ readonly entryFile: string;
118
+ };
119
+ readonly component?: unknown;
120
+ readonly dom?: unknown;
121
+ readonly limitations: string[];
122
+ } | {
123
+ readonly ok: false;
124
+ readonly elementId: string;
125
+ readonly error: string;
126
+ readonly limitations: string[];
127
+ };
128
+ /**
129
+ * runtime 元素上下文请求。
130
+ *
131
+ * event 用于复用现有 runtime RPC 的一次性回传模型,避免并发请求串包。
132
+ */
133
+ interface RuntimeElementContextRequest {
134
+ /** 并发请求隔离事件名,复用现有 runtime RPC 回传模型。 */
135
+ readonly event: string;
136
+ /** 用户复制给 AI 的元素标识。 */
137
+ readonly elementId: string;
138
+ }
139
+ /**
140
+ * Cursor MCP 配置写入策略。
141
+ *
142
+ * 该配置只负责本地开发体验,不应强行修改未启用 Cursor 的项目。
143
+ */
144
+ interface CursorMcpConfig {
145
+ /** 是否启用 Cursor 配置写入;显式启用会创建 `.cursor/mcp.json`,显式关闭会跳过。 */
146
+ readonly enabled: boolean;
147
+ /** Cursor 展示的 MCP 服务名,用于同一项目存在多个 MCP 服务时避免冲突。 */
148
+ readonly serverName?: string;
149
+ }
150
+ /**
151
+ * MCP 客户端项目级配置写入策略。
152
+ *
153
+ * 多个 AI 客户端使用不同配置文件,但都指向同一个开发态 MCP 地址;
154
+ * 集中配置可以避免为每个客户端暴露一组重复选项。
155
+ */
156
+ interface McpClientConfigOptions {
157
+ /** 是否写入 Cursor 的 `.cursor/mcp.json`;默认只在 `.cursor` 目录已存在时自动写入。 */
158
+ readonly cursor?: boolean;
159
+ /** 是否写入 Codex 的 `.codex/config.toml`;默认只在 `.codex` 目录已存在时自动写入。 */
160
+ readonly codex?: boolean;
161
+ /** 是否写入 Claude Code 的 `.mcp.json`;默认只在根目录 `.mcp.json` 已存在时自动写入。 */
162
+ readonly claudeCode?: boolean;
163
+ /** 是否写入 Trae 的 `.trae/mcp.json`;默认只在 `.trae` 目录已存在时自动写入。 */
164
+ readonly trae?: boolean;
165
+ /** MCP 客户端中展示的服务名,同一项目存在多个 MCP 服务时用于避免冲突。 */
166
+ readonly serverName?: string;
167
+ }
168
+ /**
169
+ * AI 使用指南自动安装配置。
170
+ *
171
+ * 该配置只影响项目级 skill/rule 文件写入,不影响 MCP 服务是否启动;
172
+ * 独立开关可以让不希望插件修改 AI 客户端上下文的项目完全关闭自动安装。
173
+ */
174
+ interface SkillConfigOptions {
175
+ /** 是否在 Vite dev server 启动时自动安装 AI 使用指南,默认开启。 */
176
+ readonly autoConfig?: boolean;
177
+ }
178
+ /**
179
+ * 通用 DevTools 能力的运行模式。
180
+ *
181
+ * 这里控制 DOM、Console、Evaluate 等浏览器通用能力的优先通道;
182
+ * Vue 组件、Router、Pinia 始终走 Vue Runtime Bridge。
183
+ */
184
+ interface RuntimeOptions {
185
+ /** `auto` 表示 CDP 可用时优先使用 CDP,否则回退到页面 Hook。 */
186
+ readonly mode?: RuntimeMode;
187
+ /** 控制台执行是高风险能力,需要独立开关避免默认暴露任意脚本执行入口。 */
188
+ readonly evaluate?: EvaluateOptions;
189
+ }
190
+ /** 通用 DevTools 能力的数据源选择策略,用于在 CDP 和页面 Hook 之间明确边界。 */
191
+ type RuntimeMode = 'auto' | 'cdp' | 'hook';
192
+ /**
193
+ * 性能诊断的运行模式。
194
+ *
195
+ * `off` 允许项目显式关闭性能采集,适合某些页面对调试采样非常敏感的场景。
196
+ */
197
+ type PerformanceMode = RuntimeMode | 'off';
198
+ /**
199
+ * 性能内存采样配置。
200
+ *
201
+ * 该开关允许项目仅采集卡顿信息而不持续读取内存趋势,适合对浏览器兼容性要求较高的场景。
202
+ */
203
+ interface PerformanceMemoryOptions {
204
+ /** 是否采集内存趋势,默认开启。 */
205
+ readonly enabled?: boolean;
206
+ }
207
+ /**
208
+ * 性能堆栈采样配置。
209
+ *
210
+ * 该开关允许项目在 runtime-only 场景下关闭额外的错误堆栈收集,减少调试噪音。
211
+ */
212
+ interface PerformanceStackOptions {
213
+ /** 是否采集可用堆栈信息,默认开启。 */
214
+ readonly enabled?: boolean;
215
+ }
216
+ /**
217
+ * 性能诊断配置。
218
+ *
219
+ * 配置层只负责约束采集窗口、保存目录和采样粒度,具体报告结构由运行时和 CDP 采集器统一输出。
220
+ */
221
+ interface PerformanceOptions {
222
+ /** 采集模式,`auto` 会优先使用 CDP,`hook` 只走 runtime,`cdp` 强制使用调试协议。 */
223
+ readonly mode?: PerformanceMode;
224
+ /** 单次采集最长时长,避免长期占用性能采样资源。 */
225
+ readonly maxDurationMs?: number;
226
+ /** 内存和事件循环延迟采样间隔,较短的间隔会增加少量采样开销。 */
227
+ readonly sampleIntervalMs?: number;
228
+ /** 视为卡顿的任务阈值,默认 50ms。 */
229
+ readonly longTaskThresholdMs?: number;
230
+ /** 原始 profile 和 heap 文件保存目录,默认保存在项目内 `.vite-mcp/performance`。 */
231
+ readonly saveDir?: string;
232
+ /** 内存趋势采样开关。 */
233
+ readonly memory?: PerformanceMemoryOptions;
234
+ /** 可用堆栈采样开关。 */
235
+ readonly stacks?: PerformanceStackOptions;
236
+ }
237
+ /**
238
+ * 长任务记录。
239
+ *
240
+ * runtime 和 CDP 都会把自己的卡顿信号归一成同一结构,便于 MCP 工具解释“哪一段卡住了”。
241
+ */
242
+ interface LongTaskRecord {
243
+ /** 长任务开始时间,和采集窗口同一时间基准。 */
244
+ readonly startTime: number;
245
+ /** 长任务持续时间,通常要与阈值比较后再计算 blocked time。 */
246
+ readonly durationMs: number;
247
+ /** 任务名称或来源信息,若可用则方便定位具体脚本。 */
248
+ readonly name?: string;
249
+ /** 浏览器暴露的 attribution 元信息,runtime 路径可能为空。 */
250
+ readonly attribution?: unknown[];
251
+ /** 对应堆栈 id,供 CDP profile 或错误堆栈关联。 */
252
+ readonly stackId?: string;
253
+ /** 数据来源,用于区分浏览器观察条目、事件循环延迟和 CPU Profile 采样。 */
254
+ readonly source: 'longtask' | 'long-animation-frame' | 'cpu-profile' | 'event-loop-lag';
255
+ }
256
+ /**
257
+ * 内存采样点。
258
+ *
259
+ * 只表达使用量趋势,不假装 runtime-only 路径能拿到完整 heap 结构。
260
+ */
261
+ interface MemorySample {
262
+ /** 采样时间戳。 */
263
+ readonly timestamp: number;
264
+ /** JS 堆已用大小。 */
265
+ readonly usedJSHeapSize?: number;
266
+ /** JS 堆总大小。 */
267
+ readonly totalJSHeapSize?: number;
268
+ /** JS 堆限制。 */
269
+ readonly jsHeapSizeLimit?: number;
270
+ /** 同步采样得到的事件循环延迟。 */
271
+ readonly eventLoopLagMs?: number;
272
+ }
273
+ /**
274
+ * 内存趋势摘要。
275
+ *
276
+ * 该结构不暴露对象引用链,只描述趋势是否持续增长。
277
+ */
278
+ interface MemorySummary {
279
+ /** 采样序列。 */
280
+ readonly samples: MemorySample[];
281
+ /** 初始堆使用量。 */
282
+ readonly initialUsedJSHeapSize?: number;
283
+ /** 结束堆使用量。 */
284
+ readonly finalUsedJSHeapSize?: number;
285
+ /** 峰值堆使用量。 */
286
+ readonly peakUsedJSHeapSize?: number;
287
+ /** 结束与开始之间的差值。 */
288
+ readonly deltaUsedJSHeapSize?: number;
289
+ /** 趋势结论。 */
290
+ readonly trend: 'stable' | 'growing' | 'unknown';
291
+ }
292
+ /**
293
+ * 可定位的堆栈帧摘要。
294
+ *
295
+ * CDP profile 会更完整,runtime-only 路径则通常只能补充错误栈里的少量函数名。
296
+ */
297
+ interface StackFrameSummary {
298
+ /** 函数名。 */
299
+ readonly functionName: string;
300
+ /** 关联脚本 URL。 */
301
+ readonly url?: string;
302
+ /** 行号。 */
303
+ readonly lineNumber?: number;
304
+ /** 列号。 */
305
+ readonly columnNumber?: number;
306
+ /** 自身耗时。 */
307
+ readonly selfTimeMs?: number;
308
+ /** 总耗时。 */
309
+ readonly totalTimeMs?: number;
310
+ /** 命中次数。 */
311
+ readonly hitCount?: number;
312
+ }
313
+ /**
314
+ * 堆栈摘要。
315
+ *
316
+ * 原始 profile 可能过大,不适合直接放进 MCP 响应,因此这里同时保留文件路径和摘要帧列表。
317
+ */
318
+ interface StackSummary {
319
+ /** 热点帧列表。 */
320
+ readonly topFrames: StackFrameSummary[];
321
+ /** 原始 profile 文件路径。 */
322
+ readonly rawProfilePath?: string;
323
+ /** 路径缺失或仅有 runtime 栈时的限制说明。 */
324
+ readonly limitation?: string;
325
+ }
326
+ /**
327
+ * 性能摘要。
328
+ *
329
+ * 该结构用于快速判断页面是否存在明显卡顿,不要求用户先看完整原始数据。
330
+ */
331
+ interface PerformanceSummary {
332
+ /** 阻塞时间。 */
333
+ readonly blockedTimeMs: number;
334
+ /** 长任务数量。 */
335
+ readonly longTaskCount: number;
336
+ /** 最大任务耗时。 */
337
+ readonly maxTaskDurationMs: number;
338
+ /** 平均任务耗时。 */
339
+ readonly averageTaskDurationMs?: number;
340
+ /** 是否疑似卡顿。 */
341
+ readonly suspectedJank: boolean;
342
+ /** 严重程度。 */
343
+ readonly severity: 'ok' | 'warning' | 'critical';
344
+ }
345
+ /**
346
+ * 性能报告。
347
+ *
348
+ * 该结构是 runtime 和 CDP 两条路径对外共同输出的最终结果,调用方只需要看 source 和 limitations 就能知道边界。
349
+ */
350
+ interface PerformanceReport {
351
+ /** 录制会话 id。 */
352
+ readonly recordingId: string;
353
+ /** 页面 id。 */
354
+ readonly pageId: string;
355
+ /** 数据来源。 */
356
+ readonly source: 'cdp' | 'hook';
357
+ /** 开始时间。 */
358
+ readonly startedAt: number;
359
+ /** 结束时间。 */
360
+ readonly endedAt: number;
361
+ /** 持续时间。 */
362
+ readonly durationMs: number;
363
+ /** 快速摘要。 */
364
+ readonly summary: PerformanceSummary;
365
+ /** 长任务列表。 */
366
+ readonly longTasks: LongTaskRecord[];
367
+ /** 内存摘要。 */
368
+ readonly memory?: MemorySummary;
369
+ /** 堆栈摘要。 */
370
+ readonly stacks?: StackSummary;
371
+ /** 原始产物。 */
372
+ readonly artifacts?: PerformanceArtifact[];
373
+ /** 能力限制说明。 */
374
+ readonly limitations: string[];
375
+ }
376
+ /**
377
+ * 性能产物。
378
+ *
379
+ * CDP 的原始 profile 与 heap snapshot 可能很大,因此用路径型产物表达而不是把内容直接塞进响应。
380
+ */
381
+ interface PerformanceArtifact {
382
+ /** 产物类型。 */
383
+ readonly kind: 'cpu-profile' | 'heap-snapshot';
384
+ /** 绝对路径。 */
385
+ readonly path: string;
386
+ /** 相对项目根目录的路径。 */
387
+ readonly relativePath: string;
388
+ /** 字节大小。 */
389
+ readonly byteLength: number;
390
+ /** 产物来源,当前仅 CDP 会生成这类文件。 */
391
+ readonly source: 'cdp';
392
+ }
393
+ /**
394
+ * 活动中的性能录制会话。
395
+ *
396
+ * MCP 工具可以通过 recordingId 暂停和恢复同一条采集链路,避免多个采集彼此污染。
397
+ */
398
+ interface PerformanceSession {
399
+ /** 会话 id。 */
400
+ readonly recordingId: string;
401
+ /** 页面 id。 */
402
+ readonly pageId: string;
403
+ /** 数据来源。 */
404
+ readonly source: 'cdp' | 'hook';
405
+ /** 开始时间。 */
406
+ readonly startedAt: number;
407
+ /** 是否采集内存。 */
408
+ readonly includeMemory: boolean;
409
+ /** 是否采集堆栈。 */
410
+ readonly includeStacks: boolean;
411
+ /** 采集模式。 */
412
+ readonly mode: PerformanceMode;
413
+ }
414
+ /**
415
+ * 控制台脚本执行配置。
416
+ *
417
+ * 该能力可以读取和修改页面状态,因此默认关闭,必须由用户显式启用。
418
+ */
419
+ interface EvaluateOptions {
420
+ /** 是否允许 MCP 客户端执行页面脚本,默认关闭以保护页面状态。 */
421
+ readonly enabled?: boolean;
422
+ /** 单次脚本执行超时时间,用于避免长任务阻塞 MCP 响应。 */
423
+ readonly timeoutMs?: number;
424
+ }
425
+ /**
426
+ * CDP 连接配置。
427
+ *
428
+ * 只连接用户提供的调试端点,可以避免跨平台 Chrome 启动和进程管理问题。
429
+ */
430
+ interface CdpOptions {
431
+ /** Chrome remote debugging 的 HTTP 地址,用于自动发现 WebSocket target。 */
432
+ readonly browserUrl?: string;
433
+ /** 已知 CDP WebSocket endpoint,适合由外部工具或宿主直接传入。 */
434
+ readonly wsEndpoint?: string;
435
+ /** 页面 target 匹配规则,用于多页面或多 tab 场景下绑定正确调试目标。 */
436
+ readonly targetUrlPattern?: string | RegExp;
437
+ }
438
+ /**
439
+ * Network 采集配置。
440
+ *
441
+ * Network 数据可能包含敏感参数和响应体,必须配置缓存、截断和脱敏策略。
442
+ */
443
+ interface NetworkOptions {
444
+ /** `auto` 表示 CDP 可用时使用 CDP,否则回退到 fetch/XHR Hook。 */
445
+ readonly mode?: NetworkMode;
446
+ /** 最大缓存条数,用于避免长时间开发会话无限占用内存。 */
447
+ readonly maxRecords?: number;
448
+ /** 是否采集请求体,调试接口参数时有用,但可能包含敏感数据。 */
449
+ readonly captureRequestBody?: boolean;
450
+ /** 是否采集响应体,调试接口返回值时有用,但必须配合 `maxBodySize` 截断。 */
451
+ readonly captureResponseBody?: boolean;
452
+ /** 请求体和响应体的最大采集长度,避免大文件响应污染 MCP 上下文。 */
453
+ readonly maxBodySize?: number;
454
+ /** 需要脱敏的 header 名称,默认覆盖认证和 Cookie 相关字段。 */
455
+ readonly maskHeaders?: string[];
456
+ }
457
+ /** Network 采集通道选择策略,用于在 CDP、Hook 和关闭采集之间保持显式选择。 */
458
+ type NetworkMode = 'auto' | 'cdp' | 'hook' | 'off';
459
+ /**
460
+ * DOM 输出限制。
461
+ *
462
+ * DOM 树可能非常大,默认限制能保证 AI 获取结构信息而不是被大量无关节点淹没。
463
+ */
464
+ interface DomOptions {
465
+ /** 最大 DOM 深度,适合控制复杂组件页面的递归输出成本。 */
466
+ readonly maxDepth?: number;
467
+ /** 最大节点数量,防止一次调用返回整页巨量节点。 */
468
+ readonly maxNodes?: number;
469
+ /** 单个文本节点最大长度,保留定位信息但避免长文本占满上下文。 */
470
+ readonly maxTextLength?: number;
471
+ }
472
+ /**
473
+ * Console 日志缓存限制。
474
+ *
475
+ * 日志会持续增长,因此需要固定上限以保证开发服务器长时间运行仍可控。
476
+ */
477
+ interface ConsoleOptions {
478
+ /** 最大日志条数,超过后按先进先出策略丢弃旧日志。 */
479
+ readonly maxRecords?: number;
480
+ }
481
+ /**
482
+ * 截图通道选择策略。
483
+ *
484
+ * 页面截图在有 CDP 时应该尽量返回真实浏览器像素;没有 CDP 的开发场景则允许降级到 runtime,
485
+ * 因此这里显式暴露策略,避免调用方误以为所有截图来源都具备同等准确度。
486
+ */
487
+ type ScreenshotPrefer = 'auto' | 'cdp' | 'runtime';
488
+ /**
489
+ * 截图目标范围。
490
+ *
491
+ * 视口、整页和元素截图的坐标来源不同,提前收敛枚举可以让 CDP 与 snapdom 两条通道共享同一套参数校验。
492
+ */
493
+ type ScreenshotTarget = 'viewport' | 'fullPage' | 'element';
494
+ /**
495
+ * 截图输出格式。
496
+ *
497
+ * MCP 返回 base64 数据,格式会直接影响体积;限制为常见浏览器截图格式可以简化大小控制和文档说明。
498
+ */
499
+ type ScreenshotFormat = 'png' | 'jpeg' | 'webp';
500
+ /** 截图输出类型,项目级配置用于统一控制 MCP 返回路径还是直接返回图片数据。 */
501
+ type ScreenshotOutputType = 'path' | 'base64';
502
+ /**
503
+ * snapdom 插件路径对象。
504
+ *
505
+ * 插件函数必须在浏览器 runtime 里通过 Vite import 加载,不能从 Node 侧配置直接序列化过去;
506
+ * 该对象用于描述要加载哪个模块、读取哪个导出,以及是否传入插件工厂参数。
507
+ */
508
+ interface SnapdomPluginImportObject {
509
+ /** Vite import 路径,适用于 `/src/foo.ts`、`@/foo` 这类由 Vite 解析的源码路径。 */
510
+ readonly path: string;
511
+ /** 非默认导出插件时使用,避免强制用户改造已有模块结构。 */
512
+ readonly exportName?: string;
513
+ /** 插件工厂参数,只允许可序列化数据,适合遮罩选择器、水印文案等配置。 */
514
+ readonly options?: unknown;
515
+ }
516
+ /**
517
+ * snapdom 插件导入声明。
518
+ *
519
+ * 字符串覆盖最常见的默认导出插件;对象形式用于已有模块使用命名导出或需要工厂参数的场景。
520
+ */
521
+ type SnapdomPluginImport = string | SnapdomPluginImportObject;
522
+ /**
523
+ * 可安全从 Node 配置传到浏览器 runtime 的 snapdom options。
524
+ *
525
+ * snapdom 原生 options 包含函数型字段;这里仅接收 JSON-safe 部分,函数型能力统一通过 Vite import 路径加载。
526
+ */
527
+ interface JsonSafeSnapdomOptions {
528
+ /** DOM 截图缩放倍率,适合在清晰度和 MCP 响应体积之间取舍。 */
529
+ readonly scale?: number;
530
+ /** 设备像素比覆盖值,适合需要模拟高分屏截图的场景。 */
531
+ readonly dpr?: number;
532
+ /** 输出宽度覆盖值,适合固定截图尺寸的自动化对比场景。 */
533
+ readonly width?: number;
534
+ /** 输出高度覆盖值,适合固定截图尺寸的自动化对比场景。 */
535
+ readonly height?: number;
536
+ /** 背景色兜底,适合页面自身透明但截图需要稳定底色的场景。 */
537
+ readonly backgroundColor?: string;
538
+ /** 有损格式质量,适合控制 jpeg/webp 体积。 */
539
+ readonly quality?: number;
540
+ /** snapdom 资源缓存策略,适合重复截图时减少资源重取成本。 */
541
+ readonly cache?: boolean | 'soft' | 'disabled';
542
+ /** 是否嵌入字体,适合需要尽量还原文本视觉的截图场景。 */
543
+ readonly embedFonts?: boolean;
544
+ /** 是否使用本地字体,适合开发环境字体已安装且希望减少截图资源体积的场景。 */
545
+ readonly localFonts?: boolean;
546
+ /** 跨域资源代理地址,适合图片或字体没有 CORS 但仍希望尽量渲染的场景。 */
547
+ readonly useProxy?: string;
548
+ /** 排除选择器,适合隐藏 token、密码、调试浮层等不应进入截图的元素。 */
549
+ readonly exclude?: string[];
550
+ }
551
+ /**
552
+ * snapdom 降级截图配置。
553
+ *
554
+ * 该配置把可序列化 options 和函数型扩展分开,适用于 Vite 插件 Node 配置需要驱动浏览器 runtime 的场景。
555
+ */
556
+ interface SnapdomScreenshotOptions {
557
+ /** 直接透传给 snapdom 的 JSON-safe options。 */
558
+ readonly options?: JsonSafeSnapdomOptions;
559
+ /** 通过 Vite import 路径加载的插件列表,避免跨 runtime 传函数。 */
560
+ readonly plugins?: SnapdomPluginImport[];
561
+ /** 函数型 filter 的 Vite import 路径,适合复杂元素过滤逻辑。 */
562
+ readonly filter?: string;
563
+ /** 函数型 fallbackURL 的 Vite import 路径,适合按资源 URL 定制兜底图。 */
564
+ readonly fallbackURL?: string;
565
+ }
566
+ /**
567
+ * 页面截图配置。
568
+ *
569
+ * 截图能力同时存在真截图和 DOM 降级截图;集中配置可以让用户明确选择准确度、体积和兼容性边界。
570
+ */
571
+ interface ScreenshotOptions {
572
+ /** 截图输出类型,项目级 MCP 默认用路径减少 base64 对上下文的占用。 */
573
+ readonly type?: ScreenshotOutputType;
574
+ /** 截图保存目录,相对路径按 Vite 项目根目录解析。 */
575
+ readonly saveDir?: string;
576
+ /** 默认截图通道选择,适合项目按运行环境统一控制降级策略。 */
577
+ readonly prefer?: ScreenshotPrefer;
578
+ /** 单次 MCP 返回图片最大字节数,避免 base64 图片挤占上下文或拖慢客户端。 */
579
+ readonly maxBytes?: number;
580
+ /** 无 CDP 时的 snapdom 降级配置。 */
581
+ readonly snapdom?: SnapdomScreenshotOptions;
582
+ }
583
+ /**
584
+ * Runtime 截图请求。
585
+ *
586
+ * MCP 服务端无法直接执行浏览器 DOM 截图,必须通过 Vite RPC 把可序列化配置交给页面 runtime。
587
+ */
588
+ interface RuntimeScreenshotRequest {
589
+ /** 并发请求隔离事件名,适用于多个 MCP 调用同时等待浏览器回传。 */
590
+ readonly event: string;
591
+ /** 截图目标范围,runtime 侧据此选择 document 或 selector 元素。 */
592
+ readonly target: ScreenshotTarget;
593
+ /** 元素截图选择器,只在 `target: "element"` 时需要。 */
594
+ readonly selector?: string;
595
+ /** 输出格式,决定 snapdom 生成 Blob 的 mime type。 */
596
+ readonly format: ScreenshotFormat;
597
+ /** 有损格式质量,适用于控制 jpeg/webp 体积。 */
598
+ readonly quality?: number;
599
+ /** 单次调用缩放倍率覆盖值,适合临时获取高清局部截图。 */
600
+ readonly scale?: number;
601
+ /** 已解析 snapdom 配置,函数型扩展仍以 Vite import 路径表达。 */
602
+ readonly snapdom: Required<Pick<SnapdomScreenshotOptions, 'options' | 'plugins'>> & Omit<SnapdomScreenshotOptions, 'options' | 'plugins'>;
603
+ }
604
+ /**
605
+ * Runtime 截图结果。
606
+ *
607
+ * snapdom 是降级截图路径,结果必须带上限制说明,避免调用方误判为浏览器真实像素。
608
+ */
609
+ interface RuntimeScreenshotResult {
610
+ /** 是否成功,保持与现有 runtime fallback 错误结构一致。 */
611
+ readonly ok: boolean;
612
+ /** 图片 base64 数据,不包含 data URL 前缀,适合 MCP 结构化返回。 */
613
+ readonly data?: string;
614
+ /** 截图宽度,帮助客户端理解图片尺寸和压缩取舍。 */
615
+ readonly width?: number;
616
+ /** 截图高度,帮助客户端理解图片尺寸和压缩取舍。 */
617
+ readonly height?: number;
618
+ /** 图片 mime type,用于 MCP 客户端正确解码。 */
619
+ readonly mimeType?: string;
620
+ /** 原始 Blob 字节数,用于服务端执行 maxBytes 保护。 */
621
+ readonly byteLength?: number;
622
+ /** DOM 截图已知限制,适合在 AI 回答中解释截图不完整原因。 */
623
+ readonly limitations?: string[];
624
+ /** 失败原因,保持浏览器 runtime 错误可读。 */
625
+ readonly error?: string;
626
+ }
627
+ /**
628
+ * 浏览器存储资源范围。
629
+ *
630
+ * Cookie 在 Runtime 侧只能访问当前页面可见的非 HttpOnly 值;CDP 可补足浏览器级查询能力。
631
+ */
632
+ type StorageScope = 'localStorage' | 'sessionStorage' | 'indexedDB' | 'cookie';
633
+ /**
634
+ * 浏览器存储操作类型。
635
+ *
636
+ * 使用统一动作枚举可以让 MCP 工具层和 Runtime 桥接层共享同一套权限与错误边界。
637
+ */
638
+ type StorageAction = 'list' | 'get' | 'set' | 'delete' | 'clear';
639
+ /**
640
+ * Runtime 存储桥接请求。
641
+ *
642
+ * Runtime 侧遵守浏览器同源策略,能处理 Web Storage、IndexedDB 以及 document.cookie 可见 Cookie;
643
+ * HttpOnly Cookie 必须依赖 CDP,不能通过页面脚本读取或删除。
644
+ */
645
+ interface RuntimeStorageRequest {
646
+ /** 并发请求隔离事件名,沿用现有 Runtime RPC 回传模型。 */
647
+ readonly event: string;
648
+ /** 页面目标 ID,用于多页面场景下确认请求来源。 */
649
+ readonly pageId: string;
650
+ /** 当前页面 origin,Runtime 侧用它拒绝跨源误用。 */
651
+ readonly origin: string;
652
+ /** 当前存储操作。 */
653
+ readonly action: StorageAction;
654
+ /** 当前存储资源范围。 */
655
+ readonly scope: StorageScope;
656
+ /** Web Storage key 或 IndexedDB key 的字符串表达。 */
657
+ readonly key?: string;
658
+ /** 写入值的 JSON 字符串表达,Runtime 侧按资源类型解释。 */
659
+ readonly value?: string;
660
+ /** IndexedDB 数据库名。 */
661
+ readonly databaseName?: string;
662
+ /** IndexedDB object store 名称。 */
663
+ readonly objectStoreName?: string;
664
+ /** IndexedDB index 名称,首版只作为查询边界保留。 */
665
+ readonly indexName?: string;
666
+ /** Cookie 操作参数,Runtime 只使用 document.cookie 可表达的同源字段。 */
667
+ readonly cookie?: {
668
+ readonly name: string;
669
+ readonly value?: string;
670
+ readonly domain?: string;
671
+ readonly path?: string;
672
+ readonly url?: string;
673
+ readonly httpOnly?: boolean;
674
+ readonly secure?: boolean;
675
+ readonly sameSite?: 'strict' | 'lax' | 'none';
676
+ readonly expires?: number;
677
+ };
678
+ }
679
+ /**
680
+ * Runtime 存储桥接结果。
681
+ *
682
+ * 结果显式携带 source,避免调用方把页面同源能力误认为浏览器级 CDP 能力。
683
+ */
684
+ interface RuntimeStorageResult {
685
+ /** 是否成功,失败时 error 必须说明边界或底层异常。 */
686
+ readonly ok: boolean;
687
+ /** 存储访问来源,调用方可据此区分页面同源能力和浏览器协议能力。 */
688
+ readonly source: 'hook' | 'cdp';
689
+ /** 实际执行的操作类型。 */
690
+ readonly action: StorageAction;
691
+ /** 实际访问的存储资源范围。 */
692
+ readonly scope: StorageScope;
693
+ /** 成功时返回的结构化数据。 */
694
+ readonly data?: unknown;
695
+ /** 能力限制说明,例如 Cookie 仅 CDP 可用。 */
696
+ readonly limitations?: string[];
697
+ /** 失败原因。 */
698
+ readonly error?: string;
699
+ }
700
+ /**
701
+ * 解析后的插件配置。
702
+ *
703
+ * 内部模块只读取该类型,避免每个模块重复处理可选配置和默认值。
704
+ */
705
+ interface ResolvedVueMcpNextOptions {
706
+ /** 已解析 MCP 路径,内部路由挂载只能使用该值。 */
707
+ readonly mcpPath: string;
708
+ /** 已解析 host,用于日志输出和编辑器配置写入。 */
709
+ readonly host: string;
710
+ /** 是否打印 MCP 地址,内部不再读取用户原始配置。 */
711
+ readonly printUrl: boolean;
712
+ /** 已规范化 Cursor 配置,boolean 输入会在 mergeOptions 中转换成对象。 */
713
+ readonly updateCursorMcpJson: Required<CursorMcpConfig>;
714
+ /** 已规范化的多客户端 MCP 配置写入策略,内部写入器只读取该对象。 */
715
+ readonly mcpClients: Required<McpClientConfigOptions>;
716
+ /** 已补齐默认值的 AI 使用指南自动安装配置。 */
717
+ readonly skill: Required<SkillConfigOptions>;
718
+ /** 已补齐默认值的页面元素选择器配置。 */
719
+ readonly elementPicker: Required<Omit<ElementPickerOptions, 'shortcut'>> & {
720
+ readonly shortcut: Required<ElementPickerShortcut>;
721
+ };
722
+ /** 非 HTML 入口注入点,未配置时 HTML 注入路径生效。 */
723
+ readonly appendTo?: string | RegExp;
724
+ /** 已补齐默认值的通用 DevTools 配置。 */
725
+ readonly runtime: Required<RuntimeOptions> & {
726
+ readonly evaluate: Required<EvaluateOptions>;
727
+ };
728
+ /** 已补齐默认值的 CDP 配置,字段可能为空但对象必须存在。 */
729
+ readonly cdp: CdpOptions;
730
+ /** 已补齐默认值的 Network 配置。 */
731
+ readonly network: Required<NetworkOptions>;
732
+ /** 已补齐默认值的 DOM 输出限制。 */
733
+ readonly dom: Required<DomOptions>;
734
+ /** 已补齐默认值的 Console 缓存限制。 */
735
+ readonly console: Required<ConsoleOptions>;
736
+ /** 已补齐默认值的截图配置。 */
737
+ readonly screenshot: Required<Omit<ScreenshotOptions, 'snapdom'>> & {
738
+ readonly snapdom: Required<Pick<SnapdomScreenshotOptions, 'options' | 'plugins'>> & Omit<SnapdomScreenshotOptions, 'options' | 'plugins'>;
739
+ };
740
+ /** 已补齐默认值的性能配置。 */
741
+ readonly performance: Required<Omit<PerformanceOptions, 'memory' | 'stacks'>> & {
742
+ readonly memory: Required<PerformanceMemoryOptions>;
743
+ readonly stacks: Required<PerformanceStackOptions>;
744
+ };
745
+ }
746
+ /**
747
+ * MCP 可选择的页面目标。
748
+ *
749
+ * 同一路径可能被多个浏览器 tab、iframe 或 CDP target 同时打开,
750
+ * 因此页面选择不能只依赖 URL,必须使用稳定的 pageId。
751
+ */
752
+ interface PageTarget {
753
+ /** 页面唯一标识,用于让 MCP 工具在多实例页面中稳定选择目标。 */
754
+ readonly pageId: string;
755
+ /** 页面来源,用于解释该页面当前能使用 runtime 能力还是 CDP 能力。 */
756
+ readonly source: 'runtime' | 'cdp';
757
+ /** 当前页面 URL,用于展示和与 CDP target 做关联匹配。 */
758
+ readonly url: string;
759
+ /** URL pathname,用于把 Vite 多入口页面以更短路径展示给用户。 */
760
+ readonly pathname: string;
761
+ /** 页面标题,用于 AI 和用户在多个相似 URL 中识别目标页面。 */
762
+ readonly title?: string;
763
+ /** 同标签页稳定身份,仅 runtime 目标提供,用于刷新或 HMR 重连时断开旧 pageId。 */
764
+ readonly runtimeClientId?: string;
765
+ /** 对应的 Vite HTML 入口或 appendTo 入口,用于说明页面来自哪个开发入口。 */
766
+ readonly entry?: string;
767
+ /** 页面是否仍可调试,用于避免 MCP 对已断开的页面继续执行操作。 */
768
+ readonly connected: boolean;
769
+ /** runtime 目标断开时间,仅用于保留短期历史并清理过期断开记录。 */
770
+ readonly disconnectedAt?: number;
771
+ }
772
+ /**
773
+ * 页面目标列表选项。
774
+ *
775
+ * 默认列表面向日常调试,只展示可操作页面;排查生命周期问题时可显式包含断开 runtime 记录。
776
+ */
777
+ interface PageTargetListOptions {
778
+ /** 是否包含已断开的 runtime 页面,默认隐藏以避免刷新历史干扰目标选择。 */
779
+ readonly includeDisconnected?: boolean;
780
+ /** 测试或批处理场景可传入固定时间,避免依赖真实时钟造成用例不稳定。 */
781
+ readonly now?: number;
782
+ }
783
+ /**
784
+ * 页面 Console 和运行时异常的统一记录。
785
+ *
786
+ * CDP 与页面 Hook 返回的日志格式不同,统一结构可以让 MCP 工具不关心采集来源。
787
+ */
788
+ interface ConsoleRecord {
789
+ /** 日志唯一标识,用于分页、清理或后续定位单条日志。 */
790
+ readonly id: string;
791
+ /** 日志所属页面,避免多页面开发时把不同 tab 的输出混在一起。 */
792
+ readonly pageId: string;
793
+ /** 日志来源,用于说明该记录来自 CDP 事件还是页面 Hook 缓存。 */
794
+ readonly source: 'cdp' | 'hook';
795
+ /** 日志级别,用于 MCP 工具按 error/warn 等常见调试维度过滤。 */
796
+ readonly level: 'log' | 'info' | 'warn' | 'error' | 'debug';
797
+ /** 面向 AI 的主要文本内容,避免每次都解析复杂 args。 */
798
+ readonly message: string;
799
+ /** 原始参数快照,用于需要还原对象日志时提供结构化信息。 */
800
+ readonly args?: unknown[];
801
+ /** 错误堆栈,用于定位运行时异常的来源文件和调用链。 */
802
+ readonly stack?: string;
803
+ /** 记录时间戳,用于还原日志与网络请求、用户操作之间的先后关系。 */
804
+ readonly timestamp: number;
805
+ }
806
+ /**
807
+ * 页面网络请求的统一记录。
808
+ *
809
+ * CDP 和 Hook 能采集到的字段不同,但 MCP 工具需要用同一种结构回答
810
+ * “请求了什么、参数是什么、响应是什么”。
811
+ */
812
+ interface NetworkRecord {
813
+ /** 请求唯一标识,用于从列表摘要进一步查询请求详情。 */
814
+ readonly id: string;
815
+ /** 请求所属页面,避免多页面并行调试时网络记录互相污染。 */
816
+ readonly pageId: string;
817
+ /** 采集来源,用于区分完整 CDP Network 数据和 fetch/XHR Hook 数据。 */
818
+ readonly source: 'cdp' | 'hook';
819
+ /** 请求 URL,用于回答“请求了哪个接口”并支持按 URL 过滤。 */
820
+ readonly url: string;
821
+ /** HTTP 方法,用于区分 GET/POST 等接口语义。 */
822
+ readonly method: string;
823
+ /** 请求头快照,调试鉴权、content-type 和代理问题时需要查看。 */
824
+ readonly requestHeaders?: Record<string, string>;
825
+ /** URL query 参数,单独拆出是为了让 AI 不必从 URL 字符串中再次解析。 */
826
+ readonly requestQuery?: Record<string, string | string[]>;
827
+ /** 请求体,调试提交参数时需要;采集时必须受脱敏和大小限制约束。 */
828
+ readonly requestBody?: unknown;
829
+ /** 响应状态码,用于快速判断请求成功、失败或重定向。 */
830
+ readonly status?: number;
831
+ /** 响应头快照,用于调试缓存、跨域和内容类型问题。 */
832
+ readonly responseHeaders?: Record<string, string>;
833
+ /** 响应体,调试接口返回值时需要;过大时必须截断并标记。 */
834
+ readonly responseBody?: unknown;
835
+ /** 请求失败原因,用于表达网络错误、取消、跨域失败等非正常响应。 */
836
+ readonly error?: string;
837
+ /** 请求开始时间,用于按时间线还原页面行为。 */
838
+ readonly startedAt: number;
839
+ /** 请求结束时间,用于和 startedAt 共同计算耗时。 */
840
+ readonly endedAt?: number;
841
+ /** 请求耗时,直接提供给 AI 做慢请求判断,避免每次重复计算。 */
842
+ readonly durationMs?: number;
843
+ }
844
+ /**
845
+ * 页面目标注册表。
846
+ *
847
+ * MCP 工具需要稳定选择目标页面,而同一路径可能被多个 tab 同时打开,
848
+ * 因此这里使用 pageId 做主键,不使用 URL 做唯一标识。
849
+ */
850
+ interface PageTargetRegistry {
851
+ /** 新增或更新页面目标,适合 runtime 重连和 CDP target 刷新场景。 */
852
+ upsert(target: PageTarget, now?: number): void;
853
+ /** 获取单个页面目标,工具调用解析 pageId 时使用。 */
854
+ get(pageId: string): PageTarget | undefined;
855
+ /** 返回页面目标快照,默认隐藏已断开的 runtime 历史记录。 */
856
+ list(options?: PageTargetListOptions): PageTarget[];
857
+ /** 标记页面断开,保留短期记录可以帮助用户理解刚才的页面为什么不可操作。 */
858
+ disconnect(pageId: string, now?: number): void;
859
+ }
860
+ /**
861
+ * 插件内部共享上下文。
862
+ *
863
+ * 所有 MCP 工具都通过该上下文访问页面、日志和网络缓存,避免不同工具维护各自状态。
864
+ */
865
+ interface VueMcpNextContext {
866
+ /** 解析后的安全配置,所有内部模块只能读取该配置,不能再次直接读取用户原始配置。 */
867
+ readonly options: ResolvedVueMcpNextOptions;
868
+ /** 当前 Vite 开发服务器实例,configureServer 阶段自动写入,供需要项目根目录的服务端工具复用。 */
869
+ server?: ViteDevServer;
870
+ /** 跨 RPC 请求的事件总线,用于复用参考项目的事件回传模型。 */
871
+ readonly hooks: Hookable;
872
+ /** Vue Runtime Bridge 的服务端 RPC 代理,Vue 专属工具通过它请求浏览器页面返回组件语义数据。 */
873
+ rpcServer?: VueRuntimeRpc;
874
+ /** 页面目标注册表,负责多页面和 CDP target 的统一选择。 */
875
+ readonly pages: PageTargetRegistry;
876
+ /** Console 日志缓存,给 MCP 日志工具提供最近的调试上下文。 */
877
+ readonly consoleRecords: RingBuffer<ConsoleRecord>;
878
+ /** Network 请求缓存,给 MCP Network 工具提供摘要和详情。 */
879
+ readonly networkRecords: RingBuffer<NetworkRecord>;
880
+ /** 性能报告缓存,给 get_performance_report 和最近会话查询使用。 */
881
+ readonly performanceReports: RingBuffer<PerformanceReport>;
882
+ /** 活动中的性能录制会话,防止 start/stop 并发冲突。 */
883
+ readonly performanceSessions: Map<string, PerformanceSession>;
884
+ /** 可选 CDP 生命周期控制器,用于纯 CDP target 被发现后启动 Console 和 Network 监听。 */
885
+ cdpLifecycle?: CdpLifecycleController;
886
+ }
887
+ /**
888
+ * CDP 生命周期控制器。
889
+ *
890
+ * Console 和 Network 需要持续监听,不能像 DOM/Evaluate 那样每次调用后立刻断开,
891
+ * 因此控制器挂在上下文里,让页面发现工具也能为纯 CDP target 启动监听。
892
+ */
893
+ interface CdpLifecycleController {
894
+ /** 页面连接或 CDP target 被发现后尝试启动对应 CDP 监听。 */
895
+ connectPage(target: PageTarget): Promise<void>;
896
+ /** 关闭所有已建立的 CDP 连接,避免开发服务器退出后残留调试连接。 */
897
+ closeAll(): Promise<void>;
898
+ }
899
+ /**
900
+ * 浏览器 Runtime Bridge 暴露给服务端的 Vue 调试 RPC。
901
+ *
902
+ * Vue 专属能力必须走运行时通道,因为 CDP 不理解组件、Router 和 Pinia 的应用层语义。
903
+ */
904
+ interface VueRuntimeRpc {
905
+ /** 读取页面 DOM 快照,用于无 CDP 配置时提供 Hook fallback。 */
906
+ getDomTree(options: {
907
+ event: string;
908
+ maxDepth: number;
909
+ maxNodes: number;
910
+ maxTextLength: number;
911
+ }): void | Promise<void>;
912
+ /** 回传 DOM 快照,使用事件名隔离并发 MCP 请求。 */
913
+ onDomTreeUpdated(event: string, data: unknown): void;
914
+ /** 按 selector 查询页面 DOM,用于无 CDP 配置时定位具体元素。 */
915
+ queryDom(options: {
916
+ event: string;
917
+ selector: string;
918
+ limit: number;
919
+ }): void | Promise<void>;
920
+ /** 回传 selector 查询结果。 */
921
+ onDomQueryUpdated(event: string, data: unknown): void;
922
+ /** 获取用户复制元素 ID 对应的源码、组件和 DOM 上下文。 */
923
+ getElementContext(options: RuntimeElementContextRequest): void | Promise<void>;
924
+ /** 回传元素上下文,使用事件名隔离并发 MCP 请求。 */
925
+ onElementContextUpdated(event: string, data: ElementContextResult): void;
926
+ /** 触发页面刷新,用于测试前消除上一轮运行状态对页面初始化的影响。 */
927
+ reloadPage(options: {
928
+ event: string;
929
+ }): void | Promise<void>;
930
+ /** 回传页面刷新触发结果;Runtime 路径只能普通刷新,不能承诺绕过 HTTP 缓存。 */
931
+ onPageReloaded(event: string, data: unknown): void;
932
+ /** 执行已授权的页面表达式,用于无 CDP 配置时提供控制台测试能力。 */
933
+ evaluateScript(options: {
934
+ event: string;
935
+ expression: string;
936
+ awaitPromise?: boolean;
937
+ timeoutMs: number;
938
+ }): void | Promise<void>;
939
+ /** 回传页面表达式执行结果。 */
940
+ onEvaluateScriptUpdated(event: string, data: unknown): void;
941
+ /** 通过 snapdom 执行浏览器端 DOM 截图,用于无 CDP 时提供截图降级能力。 */
942
+ takeScreenshot(options: RuntimeScreenshotRequest): void | Promise<void>;
943
+ /** 回传 snapdom 截图结果,使用事件名隔离并发 MCP 请求。 */
944
+ onScreenshotTaken(event: string, data: RuntimeScreenshotResult): void;
945
+ /** 访问同源浏览器存储,用于无 CDP 配置时提供 Web Storage 和 IndexedDB 兜底。 */
946
+ manageStorage(options: RuntimeStorageRequest): void | Promise<void>;
947
+ /** 回传 Runtime 存储访问结果,使用事件名隔离并发 MCP 请求。 */
948
+ onStorageUpdated(event: string, data: RuntimeStorageResult): void;
949
+ /** 读取 Vue component inspector tree,用于 `get_component_tree` 工具。 */
950
+ getInspectorTree(options: {
951
+ event: string;
952
+ componentName?: string;
953
+ }): void | Promise<void>;
954
+ /** 回传 component tree,使用事件名可以让并发 MCP 请求互不干扰。 */
955
+ onInspectorTreeUpdated(event: string, data: unknown): void;
956
+ /** 读取指定组件状态,用于定位 props、setup、data 等 Vue 状态。 */
957
+ getInspectorState(options: {
958
+ event: string;
959
+ componentName: string;
960
+ }): void | Promise<void>;
961
+ /** 回传组件状态。 */
962
+ onInspectorStateUpdated(event: string, data: unknown): void;
963
+ /** 修改组件状态,只用于开发态调试。 */
964
+ editComponentState(options: {
965
+ componentName: string;
966
+ path: string[];
967
+ value: string;
968
+ valueType: string;
969
+ }): void | Promise<void>;
970
+ /** 高亮组件,帮助用户在页面中确认 AI 选择的组件。 */
971
+ highlightComponent(options: {
972
+ componentName: string;
973
+ }): void | Promise<void>;
974
+ /** 获取 Vue Router 信息。 */
975
+ getRouterInfo(options: {
976
+ event: string;
977
+ }): void;
978
+ /** 回传 Vue Router 信息。 */
979
+ onRouterInfoUpdated(event: string, data: unknown): void;
980
+ /** 获取 Pinia store tree。 */
981
+ getPiniaTree(options: {
982
+ event: string;
983
+ }): void | Promise<void>;
984
+ /** 回传 Pinia store tree。 */
985
+ onPiniaTreeUpdated(event: string, data: unknown): void;
986
+ /** 获取指定 Pinia store state。 */
987
+ getPiniaState(options: {
988
+ event: string;
989
+ storeName: string;
990
+ }): void | Promise<void>;
991
+ /** 回传 Pinia store state。 */
992
+ onPiniaInfoUpdated(event: string, data: unknown): void;
993
+ /** 进行一次性能诊断采样。 */
994
+ recordPerformance(options: {
995
+ event: string;
996
+ durationMs: number;
997
+ includeMemory: boolean;
998
+ includeStacks: boolean;
999
+ }): void | Promise<void>;
1000
+ /** 回传一次性性能采样结果。 */
1001
+ onPerformanceRecorded(event: string, data: unknown): void;
1002
+ /** 启动一段交互式性能录制。 */
1003
+ startPerformanceRecording(options: {
1004
+ event: string;
1005
+ includeMemory: boolean;
1006
+ includeStacks: boolean;
1007
+ }): void | Promise<void>;
1008
+ /** 回传录制启动结果。 */
1009
+ onPerformanceRecordingStarted(event: string, data: unknown): void;
1010
+ /** 停止交互式性能录制。 */
1011
+ stopPerformanceRecording(options: {
1012
+ event: string;
1013
+ recordingId: string;
1014
+ }): void | Promise<void>;
1015
+ /** 回传录制结束结果。 */
1016
+ onPerformanceRecordingStopped(event: string, data: unknown): void;
1017
+ }
1018
+
1019
+ export type { CdpOptions as C, DomOptions as D, ElementContextResult as E, McpClientConfigOptions as M, NetworkOptions as N, PageTarget as P, ResolvedVueMcpNextOptions as R, SkillConfigOptions as S, VueMcpNextContext as V, ConsoleOptions as a, ConsoleRecord as b, CursorMcpConfig as c, ElementPickerOptions as d, ElementPickerShortcut as e, EvaluateOptions as f, NetworkRecord as g, RuntimeClientOptions as h, RuntimeElementContextRequest as i, RuntimeMode as j, RuntimeOptions as k, VueMcpNextOptions as l };