@xiaou66/vite-plugin-vue-mcp-next 0.0.6 → 0.0.8
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 +140 -92
- package/dist/index.cjs +272 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +14 -2
- package/dist/index.d.ts +14 -2
- package/dist/index.js +266 -33
- package/dist/index.js.map +1 -1
- package/dist/runtime/client.cjs +31 -13
- package/dist/runtime/client.cjs.map +1 -1
- package/dist/runtime/client.d.cts +23 -1
- package/dist/runtime/client.d.ts +23 -1
- package/dist/runtime/client.js +30 -3
- package/dist/runtime/client.js.map +1 -1
- package/package.json +8 -2
package/README.md
CHANGED
|
@@ -6,19 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
## 能力概览
|
|
8
8
|
|
|
9
|
-
| 能力
|
|
10
|
-
|
|
11
|
-
| 页面列表
|
|
12
|
-
| DOM tree
|
|
13
|
-
| DOM selector 查询
|
|
14
|
-
| 页面截图
|
|
15
|
-
| Console 日志
|
|
16
|
-
| Evaluate 控制台执行 | Runtime Hook
|
|
17
|
-
| Network 请求
|
|
18
|
-
| Vue 组件树
|
|
19
|
-
| Vue 组件状态
|
|
20
|
-
| Router 信息
|
|
21
|
-
| Pinia 状态
|
|
9
|
+
| 能力 | 默认通道 | 配置 CDP 后 | 说明 |
|
|
10
|
+
| ------------------- | -------------------- | --------------------------------- | --------------------------------------------------------- |
|
|
11
|
+
| 页面列表 | Vite entry + Runtime | Vite entry + Runtime + CDP target | 用于多页面和多 tab 场景下选择调试目标 |
|
|
12
|
+
| DOM tree | Runtime Hook | CDP 优先，Hook 兜底 | 可返回裁剪后的运行时 DOM 结构 |
|
|
13
|
+
| DOM selector 查询 | Runtime Hook | CDP 优先，Hook 兜底 | 可按 selector 返回节点文本、属性和布局信息 |
|
|
14
|
+
| 页面截图 | snapdom DOM 截图 | CDP 真截图优先，snapdom 降级 | 默认保存到项目目录并返回路径，也可配置为 base64 返回 |
|
|
15
|
+
| Console 日志 | Runtime Hook | CDP 优先，Hook 兜底 | 采集 `log/info/warn/error/debug` 和运行时日志 |
|
|
16
|
+
| Evaluate 控制台执行 | Runtime Hook | CDP 优先，Hook 兜底 | 默认关闭，必须显式开启 |
|
|
17
|
+
| Network 请求 | Runtime Hook | CDP 优先，Hook 兜底 | 返回请求 URL、query、body、status、headers、response body |
|
|
18
|
+
| Vue 组件树 | Vue Runtime Bridge | Vue Runtime Bridge | Vue 专属语义不走 CDP |
|
|
19
|
+
| Vue 组件状态 | Vue Runtime Bridge | Vue Runtime Bridge | 读取和编辑组件状态 |
|
|
20
|
+
| Router 信息 | Vue Runtime Bridge | Vue Runtime Bridge | 返回当前路由和路由表 |
|
|
21
|
+
| Pinia 状态 | Vue Runtime Bridge | Vue Runtime Bridge | 返回 Pinia inspector tree 和 store state |
|
|
22
22
|
|
|
23
23
|
## 安装与使用
|
|
24
24
|
|
|
@@ -45,12 +45,12 @@ Streamable HTTP: http://localhost:<vite-port>/__mcp/mcp
|
|
|
45
45
|
|
|
46
46
|
启动 Vite dev server 后，插件会自动写入常见 AI 客户端的项目级 MCP 配置，服务名默认是 `vue-mcp-next`。自动配置只会在缺少同名 server 条目时新增配置；如果用户已经配置了 `vue-mcp-next`，插件不会重复写入或覆盖原配置。
|
|
47
47
|
|
|
48
|
-
| 客户端
|
|
49
|
-
|
|
50
|
-
| Cursor
|
|
51
|
-
| Codex
|
|
52
|
-
| Claude Code | `.mcp.json`
|
|
53
|
-
| Trae
|
|
48
|
+
| 客户端 | 自动配置文件 | 默认端点 |
|
|
49
|
+
| ----------- | -------------------- | --------------- |
|
|
50
|
+
| Cursor | `.cursor/mcp.json` | SSE |
|
|
51
|
+
| Codex | `.codex/config.toml` | Streamable HTTP |
|
|
52
|
+
| Claude Code | `.mcp.json` | SSE |
|
|
53
|
+
| Trae | `.trae/mcp.json` | SSE |
|
|
54
54
|
|
|
55
55
|
实际端口以启动日志中的 `MCP: SSE server is running at ...` 和 `MCP: Streamable HTTP server is running at ...` 为准。
|
|
56
56
|
|
|
@@ -125,6 +125,8 @@ vueMcpNext({
|
|
|
125
125
|
maxRecords: 1000
|
|
126
126
|
},
|
|
127
127
|
screenshot: {
|
|
128
|
+
type: 'path',
|
|
129
|
+
saveDir: '.vite-mcp/screenshot',
|
|
128
130
|
prefer: 'auto',
|
|
129
131
|
maxBytes: 5 * 1024 * 1024,
|
|
130
132
|
snapdom: {
|
|
@@ -140,15 +142,17 @@ vueMcpNext({
|
|
|
140
142
|
|
|
141
143
|
### 顶层配置
|
|
142
144
|
|
|
143
|
-
| 配置
|
|
144
|
-
|
|
145
|
-
| `mcpPath`
|
|
146
|
-
| `host`
|
|
147
|
-
| `printUrl`
|
|
148
|
-
| `mcpClients`
|
|
149
|
-
| `updateCursorMcpJson` | `boolean
|
|
150
|
-
| `appendTo`
|
|
151
|
-
| `screenshot`
|
|
145
|
+
| 配置 | 类型 | 默认值 | 说明 |
|
|
146
|
+
| --------------------- | -------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------- |
|
|
147
|
+
| `mcpPath` | `string` | `'/__mcp'` | MCP 服务挂载路径，实际 SSE 地址是 `${mcpPath}/sse`，Streamable HTTP 地址是 `${mcpPath}/mcp` |
|
|
148
|
+
| `host` | `string` | `'localhost'` | 打印 MCP 地址和写入 MCP 客户端配置时使用的 host |
|
|
149
|
+
| `printUrl` | `boolean` | `true` | 是否在 Vite 启动日志中打印 MCP SSE 地址 |
|
|
150
|
+
| `mcpClients` | `{ cursor?: boolean; codex?: boolean; claudeCode?: boolean; trae?: boolean; serverName?: string }` | 全部启用 | 是否自动写入 Cursor、Codex、Claude Code、Trae 的项目级 MCP 配置 |
|
|
151
|
+
| `updateCursorMcpJson` | `boolean \| { enabled: boolean; serverName?: string }` | `true` | 兼容旧配置，建议新项目使用 `mcpClients` |
|
|
152
|
+
| `appendTo` | `string \| RegExp` | `undefined` | 非 HTML 入口注入点。配置后会在匹配入口模块前追加 runtime import |
|
|
153
|
+
| `screenshot` | `ScreenshotOptions` | CDP 优先，snapdom 降级 | 页面截图配置，控制真截图、DOM 降级截图、体积上限和 snapdom 扩展 |
|
|
154
|
+
| `screenshot.type` | `'path' \| 'base64'` | `'path'` | 项目级控制截图返回文件路径还是 base64 数据 |
|
|
155
|
+
| `screenshot.saveDir` | `string` | `'.vite-mcp/screenshot'` | 截图保存目录；相对路径按 Vite 项目根目录解析 |
|
|
152
156
|
|
|
153
157
|
`appendTo` 适合 playground、框架包装入口、或不希望通过 `transformIndexHtml` 注入的场景：
|
|
154
158
|
|
|
@@ -160,11 +164,11 @@ vueMcpNext({
|
|
|
160
164
|
|
|
161
165
|
### Runtime 配置
|
|
162
166
|
|
|
163
|
-
| 配置
|
|
164
|
-
|
|
165
|
-
| `runtime.mode`
|
|
166
|
-
| `runtime.evaluate.enabled`
|
|
167
|
-
| `runtime.evaluate.timeoutMs` | `number`
|
|
167
|
+
| 配置 | 类型 | 默认值 | 说明 |
|
|
168
|
+
| ---------------------------- | --------------------------- | -------- | ----------------------------------------------------- |
|
|
169
|
+
| `runtime.mode` | `'auto' \| 'cdp' \| 'hook'` | `'auto'` | DOM、Console、Evaluate 等通用 DevTools 能力的通道策略 |
|
|
170
|
+
| `runtime.evaluate.enabled` | `boolean` | `false` | 是否允许 MCP 客户端执行页面表达式 |
|
|
171
|
+
| `runtime.evaluate.timeoutMs` | `number` | `3000` | Hook fallback 执行表达式的超时时间 |
|
|
168
172
|
|
|
169
173
|
`evaluate_script` 默认关闭。该能力可以读取和修改页面状态，必须由使用者显式开启：
|
|
170
174
|
|
|
@@ -182,10 +186,11 @@ Hook fallback 当前执行的是表达式，不是完整语句块：
|
|
|
182
186
|
|
|
183
187
|
```js
|
|
184
188
|
// 可以
|
|
185
|
-
(console.warn('mcp log', { ok: true }), 'logged')
|
|
189
|
+
;(console.warn('mcp log', { ok: true }), 'logged')
|
|
186
190
|
|
|
187
191
|
// 不可以
|
|
188
|
-
console.warn('mcp log', { ok: true })
|
|
192
|
+
console.warn('mcp log', { ok: true })
|
|
193
|
+
;('logged')
|
|
189
194
|
```
|
|
190
195
|
|
|
191
196
|
如果需要完整 DevTools Console 行为，建议配置 CDP。
|
|
@@ -213,11 +218,11 @@ vueMcpNext({
|
|
|
213
218
|
})
|
|
214
219
|
```
|
|
215
220
|
|
|
216
|
-
| 配置
|
|
217
|
-
|
|
218
|
-
| `cdp.browserUrl`
|
|
219
|
-
| `cdp.wsEndpoint`
|
|
220
|
-
| `cdp.targetUrlPattern` | `string
|
|
221
|
+
| 配置 | 类型 | 默认值 | 说明 |
|
|
222
|
+
| ---------------------- | ------------------ | ----------- | --------------------------------------------------------------- |
|
|
223
|
+
| `cdp.browserUrl` | `string` | `undefined` | Chrome remote debugging HTTP 地址，例如 `http://127.0.0.1:9222` |
|
|
224
|
+
| `cdp.wsEndpoint` | `string` | `undefined` | 已知页面 WebSocket endpoint。配置后会直接连接该 endpoint |
|
|
225
|
+
| `cdp.targetUrlPattern` | `string \| RegExp` | `undefined` | 多 tab 或多页面时用于匹配目标页面 URL |
|
|
221
226
|
|
|
222
227
|
启动 Chrome remote debugging 的示例：
|
|
223
228
|
|
|
@@ -233,24 +238,24 @@ vueMcpNext({
|
|
|
233
238
|
|
|
234
239
|
### Network 配置
|
|
235
240
|
|
|
236
|
-
| 配置
|
|
237
|
-
|
|
238
|
-
| `network.mode`
|
|
239
|
-
| `network.maxRecords`
|
|
240
|
-
| `network.captureRequestBody`
|
|
241
|
-
| `network.captureResponseBody` | `boolean`
|
|
242
|
-
| `network.maxBodySize`
|
|
243
|
-
| `network.maskHeaders`
|
|
241
|
+
| 配置 | 类型 | 默认值 | 说明 |
|
|
242
|
+
| ----------------------------- | ------------------------------------ | ------------------------------------------- | -------------------------- |
|
|
243
|
+
| `network.mode` | `'auto' \| 'cdp' \| 'hook' \| 'off'` | `'auto'` | Network 采集通道策略 |
|
|
244
|
+
| `network.maxRecords` | `number` | `500` | 最大缓存请求数 |
|
|
245
|
+
| `network.captureRequestBody` | `boolean` | `true` | 是否采集请求体 |
|
|
246
|
+
| `network.captureResponseBody` | `boolean` | `true` | 是否采集响应体 |
|
|
247
|
+
| `network.maxBodySize` | `number` | `100_000` | 请求体和响应体最大采集长度 |
|
|
248
|
+
| `network.maskHeaders` | `string[]` | `['authorization', 'cookie', 'set-cookie']` | 需要脱敏的 header 名称 |
|
|
244
249
|
|
|
245
250
|
Hook Network 覆盖 `fetch` 和 `XMLHttpRequest`。CDP Network 更接近 Chrome DevTools Network 面板，可以覆盖更多请求生命周期信息。
|
|
246
251
|
|
|
247
252
|
### DOM 与 Console 配置
|
|
248
253
|
|
|
249
|
-
| 配置
|
|
250
|
-
|
|
251
|
-
| `dom.maxDepth`
|
|
252
|
-
| `dom.maxNodes`
|
|
253
|
-
| `dom.maxTextLength`
|
|
254
|
+
| 配置 | 类型 | 默认值 | 说明 |
|
|
255
|
+
| -------------------- | -------- | ------ | ------------------------ |
|
|
256
|
+
| `dom.maxDepth` | `number` | `8` | DOM tree 最大输出深度 |
|
|
257
|
+
| `dom.maxNodes` | `number` | `2000` | DOM tree 最大节点数 |
|
|
258
|
+
| `dom.maxTextLength` | `number` | `300` | 单个文本节点最大长度 |
|
|
254
259
|
| `console.maxRecords` | `number` | `1000` | Console 日志最大缓存条数 |
|
|
255
260
|
|
|
256
261
|
DOM 默认跳过 `script`、`style`、`noscript`，并隐藏 password input 的值。这样做是为了避免 MCP 上下文被大页面或敏感字段污染。
|
|
@@ -259,9 +264,19 @@ DOM 默认跳过 `script`、`style`、`noscript`，并隐藏 password input 的
|
|
|
259
264
|
|
|
260
265
|
`take_screenshot` 默认优先使用 CDP 真截图；没有 CDP 时，`prefer: 'auto'` 会降级到 `snapdom` DOM 截图。`source: 'snapdom'` 表示 DOM 渲染截图，不等同于浏览器真实像素截图。
|
|
261
266
|
|
|
267
|
+
`@zumer/snapdom` 是可选 peer dependency。只有在没有 CDP、并且需要使用 runtime DOM 截图降级时才需要安装：
|
|
268
|
+
|
|
269
|
+
```bash
|
|
270
|
+
pnpm add -D @zumer/snapdom
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
如果未安装该依赖，`take_screenshot` 会返回结构化错误，提示安装命令；插件不会自动修改项目依赖。
|
|
274
|
+
|
|
262
275
|
```ts
|
|
263
276
|
vueMcpNext({
|
|
264
277
|
screenshot: {
|
|
278
|
+
type: 'path',
|
|
279
|
+
saveDir: '.vite-mcp/screenshot',
|
|
265
280
|
prefer: 'auto',
|
|
266
281
|
maxBytes: 5 * 1024 * 1024,
|
|
267
282
|
snapdom: {
|
|
@@ -287,6 +302,34 @@ vueMcpNext({
|
|
|
287
302
|
})
|
|
288
303
|
```
|
|
289
304
|
|
|
305
|
+
默认情况下，截图会保存到项目根目录下 `.vite-mcp/screenshot`，MCP 返回文件路径：
|
|
306
|
+
|
|
307
|
+
```json
|
|
308
|
+
{
|
|
309
|
+
"source": "cdp",
|
|
310
|
+
"target": "viewport",
|
|
311
|
+
"format": "png",
|
|
312
|
+
"mimeType": "image/png",
|
|
313
|
+
"width": 1280,
|
|
314
|
+
"height": 720,
|
|
315
|
+
"byteLength": 120394,
|
|
316
|
+
"path": "/Users/me/app/.vite-mcp/screenshot/2026-05-17T10-30-22-123Z-cdp-viewport-a1b2c3d4.png",
|
|
317
|
+
"relativePath": ".vite-mcp/screenshot/2026-05-17T10-30-22-123Z-cdp-viewport-a1b2c3d4.png"
|
|
318
|
+
}
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
如需保持旧的 base64 返回方式，可以在项目配置中设置：
|
|
322
|
+
|
|
323
|
+
```ts
|
|
324
|
+
vueMcpNext({
|
|
325
|
+
screenshot: {
|
|
326
|
+
type: 'base64'
|
|
327
|
+
}
|
|
328
|
+
})
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
CDP 的 `Page.captureScreenshot` 只返回 base64 图片数据，不能直接指定保存目录；本插件会在 Vite dev server 侧按 `screenshot.saveDir` 自行写入文件。
|
|
332
|
+
|
|
290
333
|
`screenshot.snapdom.options` 继承 `snapdom` 的可序列化 options，常用字段包括 `scale`、`quality`、`cache`、`embedFonts`、`localFonts`、`useProxy`、`exclude`。`useProxy` 适合处理跨域图片或字体资源。
|
|
291
334
|
|
|
292
335
|
`plugins`、`filter`、`fallbackURL` 必须使用 Vite import 路径。不要在 `vite.config.ts` 中直接传函数，因为配置运行在 Node 侧，而截图执行发生在浏览器 runtime。
|
|
@@ -309,36 +352,41 @@ export function createMaskPlugin(options: { selectors: string[] }) {
|
|
|
309
352
|
|
|
310
353
|
`snapdom` 降级截图可能受跨域图片、跨域 iframe、video、WebGL/canvas 污染、复杂 CSS 和字体加载时序影响。需要最高准确度时，请配置 CDP。
|
|
311
354
|
|
|
355
|
+
`vite-plugin-vue-devtools` 可以和本插件共存，但不是必需依赖。本插件直接使用 `@vue/devtools-kit` / `@vue/devtools-core` 提供 Vue Runtime Bridge。
|
|
356
|
+
|
|
312
357
|
## MCP 工具清单
|
|
313
358
|
|
|
314
359
|
### 页面工具
|
|
315
360
|
|
|
316
|
-
| 工具
|
|
317
|
-
|
|
318
|
-
| `list_pages`
|
|
319
|
-
| `
|
|
361
|
+
| 工具 | 输入 | 输出 | 说明 |
|
|
362
|
+
| ---------------- | ------------------------- | ------------------------------- | ----------------------------------------------------------------- |
|
|
363
|
+
| `list_pages` | 无 | `entries`、`pages`、`cdpError?` | 返回 Vite HTML 入口、runtime 页面和 CDP target |
|
|
364
|
+
| `reload_page` | `pageId?`、`ignoreCache?` | `ok`、`source`、`ignoreCache?` | 刷新目标页面；CDP 可用时使用无缓存刷新，Runtime Hook 只能普通刷新 |
|
|
365
|
+
| `get_page_state` | `pageId?` | 页面状态 | 预留页面状态工具名 |
|
|
320
366
|
|
|
321
367
|
`list_pages` 的 `pages` 中可能出现两类页面：
|
|
322
368
|
|
|
323
369
|
- `runtime-*`：由页面注入 runtime bridge 后连接
|
|
324
370
|
- `cdp:*`：由 CDP `/json/list` 发现
|
|
325
371
|
|
|
372
|
+
`reload_page` 默认在 CDP 路径使用 `ignoreCache: true`，并等待 CDP `loadEventFired` 后返回，适合在测试前绕过浏览器 HTTP 缓存重新加载页面。未配置 CDP 时会退回 Runtime Hook，通过 `window.location.reload()` 触发普通刷新，并等待新的 runtime 页面重新接入；这条回退路径不能保证绕过 HTTP cache，也不会清理 `localStorage`、`sessionStorage`、`IndexedDB`、`CacheStorage` 或 Service Worker 缓存。
|
|
373
|
+
|
|
326
374
|
### DOM 工具
|
|
327
375
|
|
|
328
|
-
| 工具
|
|
329
|
-
|
|
330
|
-
| `get_dom_tree`
|
|
331
|
-
| `query_dom`
|
|
332
|
-
| `take_screenshot` | `pageId?`、`target?`、`selector?`、`format?`、`prefer?` | `source`、`mimeType`、`
|
|
376
|
+
| 工具 | 输入 | 输出 | 说明 |
|
|
377
|
+
| ----------------- | ------------------------------------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------------- |
|
|
378
|
+
| `get_dom_tree` | `pageId?`、`maxDepth?`、`maxNodes?` | `source`、`snapshot` | 获取裁剪后的 DOM tree |
|
|
379
|
+
| `query_dom` | `pageId?`、`selector`、`limit?` | `source`、`nodes` | 按 selector 查询元素摘要 |
|
|
380
|
+
| `take_screenshot` | `pageId?`、`target?`、`selector?`、`format?`、`prefer?` | `path`/`relativePath` 或 `data`、`source`、`mimeType`、`width`、`height` | 页面截图，CDP 优先，snapdom 降级，默认保存到项目目录 |
|
|
333
381
|
|
|
334
382
|
CDP 可用时 DOM 工具输出 `source: 'cdp'`，否则使用 Runtime Hook 输出 `source: 'hook'`。截图工具输出 `source: 'cdp' | 'snapdom'`。
|
|
335
383
|
|
|
336
384
|
### Console 工具
|
|
337
385
|
|
|
338
|
-
| 工具
|
|
339
|
-
|
|
340
|
-
| `get_console_logs`
|
|
341
|
-
| `clear_console_logs` | `pageId?`
|
|
386
|
+
| 工具 | 输入 | 输出 | 说明 |
|
|
387
|
+
| -------------------- | ----------------------------- | ------ | ----------------- |
|
|
388
|
+
| `get_console_logs` | `pageId?`、`level?`、`limit?` | `logs` | 获取 Console 日志 |
|
|
389
|
+
| `clear_console_logs` | `pageId?` | `ok` | 清空缓存日志 |
|
|
342
390
|
|
|
343
391
|
日志结构包含：
|
|
344
392
|
|
|
@@ -357,19 +405,19 @@ interface ConsoleRecord {
|
|
|
357
405
|
|
|
358
406
|
### Evaluate 工具
|
|
359
407
|
|
|
360
|
-
| 工具
|
|
361
|
-
|
|
408
|
+
| 工具 | 输入 | 输出 | 说明 |
|
|
409
|
+
| ----------------- | ---------------------------------------- | ------------------------ | ---------------- |
|
|
362
410
|
| `evaluate_script` | `pageId?`、`expression`、`awaitPromise?` | `source`、`value/result` | 执行控制台表达式 |
|
|
363
411
|
|
|
364
412
|
该工具默认关闭，必须配置 `runtime.evaluate.enabled: true`。CDP 可用时使用 `Runtime.evaluate`，否则使用 Runtime Hook fallback。
|
|
365
413
|
|
|
366
414
|
### Network 工具
|
|
367
415
|
|
|
368
|
-
| 工具
|
|
369
|
-
|
|
370
|
-
| `get_network_requests`
|
|
371
|
-
| `get_network_request_detail` | `id`
|
|
372
|
-
| `clear_network_requests`
|
|
416
|
+
| 工具 | 输入 | 输出 | 说明 |
|
|
417
|
+
| ---------------------------- | --------------------------------------------------------- | ---------- | ---------------- |
|
|
418
|
+
| `get_network_requests` | `pageId?`、`urlContains?`、`method?`、`status?`、`limit?` | `requests` | 获取请求列表 |
|
|
419
|
+
| `get_network_request_detail` | `id` | `request` | 获取单条请求详情 |
|
|
420
|
+
| `clear_network_requests` | `pageId?` | `ok` | 清空请求缓存 |
|
|
373
421
|
|
|
374
422
|
Network 记录结构覆盖调试接口时最常见的三个问题：
|
|
375
423
|
|
|
@@ -399,15 +447,15 @@ interface NetworkRecord {
|
|
|
399
447
|
|
|
400
448
|
### Vue 专属工具
|
|
401
449
|
|
|
402
|
-
| 工具
|
|
403
|
-
|
|
404
|
-
| `get_component_tree`
|
|
405
|
-
| `get_component_state`
|
|
406
|
-
| `edit_component_state` | `pageId?`、`componentName`、`path`、`value`、`valueType` | `ok`
|
|
407
|
-
| `highlight_component`
|
|
408
|
-
| `get_router_info`
|
|
409
|
-
| `get_pinia_tree`
|
|
410
|
-
| `get_pinia_state`
|
|
450
|
+
| 工具 | 输入 | 输出 | 说明 |
|
|
451
|
+
| ---------------------- | -------------------------------------------------------- | ------ | ------------------------- |
|
|
452
|
+
| `get_component_tree` | `pageId?` | `data` | 获取 Vue component tree |
|
|
453
|
+
| `get_component_state` | `pageId?`、`componentName` | `data` | 获取组件状态 |
|
|
454
|
+
| `edit_component_state` | `pageId?`、`componentName`、`path`、`value`、`valueType` | `ok` | 修改组件状态 |
|
|
455
|
+
| `highlight_component` | `pageId?`、`componentName` | `ok` | 高亮组件 |
|
|
456
|
+
| `get_router_info` | `pageId?` | `data` | 获取 Vue Router 信息 |
|
|
457
|
+
| `get_pinia_tree` | `pageId?` | `data` | 获取 Pinia inspector tree |
|
|
458
|
+
| `get_pinia_state` | `pageId?`、`storeName` | `data` | 获取 Pinia store state |
|
|
411
459
|
|
|
412
460
|
Vue 组件、Router、Pinia 是应用层语义，固定走 Vue Runtime Bridge，不用 CDP 替代。
|
|
413
461
|
|
|
@@ -529,16 +577,16 @@ CDP 验证通过时，以下工具返回中应出现 `source: 'cdp'`：
|
|
|
529
577
|
|
|
530
578
|
## 脚本
|
|
531
579
|
|
|
532
|
-
| 脚本
|
|
533
|
-
|
|
534
|
-
| `pnpm run build`
|
|
535
|
-
| `pnpm run dev`
|
|
536
|
-
| `pnpm run typecheck`
|
|
537
|
-
| `pnpm run lint`
|
|
538
|
-
| `pnpm run test`
|
|
539
|
-
| `pnpm run check`
|
|
540
|
-
| `pnpm run play`
|
|
541
|
-
| `pnpm run inspect:mcp` | 启动 MCP Inspector
|
|
580
|
+
| 脚本 | 说明 |
|
|
581
|
+
| ---------------------- | ---------------------------------- |
|
|
582
|
+
| `pnpm run build` | 构建 ESM、CJS 和类型声明 |
|
|
583
|
+
| `pnpm run dev` | 以 watch 模式构建 |
|
|
584
|
+
| `pnpm run typecheck` | 执行 TypeScript 静态检查 |
|
|
585
|
+
| `pnpm run lint` | 执行 ESLint 检查 |
|
|
586
|
+
| `pnpm run test` | 执行 Vitest 测试 |
|
|
587
|
+
| `pnpm run check` | 串行执行类型检查、Lint、测试和构建 |
|
|
588
|
+
| `pnpm run play` | 启动本地 playground |
|
|
589
|
+
| `pnpm run inspect:mcp` | 启动 MCP Inspector |
|
|
542
590
|
|
|
543
591
|
## 发布到 npm
|
|
544
592
|
|