@xiaou66/vite-plugin-vue-mcp-next 1.1.1 → 1.3.0

package/README.md

@@ -11,10 +11,12 @@
 | 页面列表            | Vite entry + Runtime | Vite entry + Runtime + CDP target | 用于多页面和多 tab 场景下选择调试目标                     |
 | DOM tree            | Runtime Hook         | CDP 优先，Hook 兜底               | 可返回裁剪后的运行时 DOM 结构                             |
 | DOM selector 查询   | Runtime Hook         | CDP 优先，Hook 兜底               | 可按 selector 返回节点文本、属性和布局信息                |
+| 元素选择上下文      | 编译期 ID + Runtime Hook | 编译期 ID + Runtime Hook     | 按住快捷键选择元素，复制 elementId 后通过 MCP 返回组件、DOM 和可编辑源码位置 |
 | 页面截图            | snapdom DOM 截图     | CDP 真截图优先，snapdom 降级      | 默认保存到项目目录并返回路径，也可配置为 base64 返回      |
 | Console 日志        | Runtime Hook         | CDP 优先，Hook 兜底               | 采集 `log/info/warn/error/debug` 和运行时日志             |
 | Evaluate 控制台执行 | Runtime Hook         | CDP 优先，Hook 兜底               | 默认关闭，必须显式开启                                    |
 | Network 请求        | Runtime Hook         | CDP 优先，Hook 兜底               | 返回请求 URL、query、body、status、headers、response body |
+| 浏览器存储          | Runtime Hook         | CDP 优先，Hook 兜底               | 访问同源 Web Storage、IndexedDB；Cookie 在无 CDP 时回退到 `document.cookie` |
 | Vue 组件树          | Vue Runtime Bridge   | Vue Runtime Bridge                | Vue 专属语义不走 CDP                                      |
 | Vue 组件状态        | Vue Runtime Bridge   | Vue Runtime Bridge                | 读取和编辑组件状态                                        |
 | Router 信息         | Vue Runtime Bridge   | Vue Runtime Bridge                | 返回当前路由和路由表                                      |
@@ -59,6 +61,36 @@ Streamable HTTP: http://localhost:<vite-port>/__mcp/mcp
 
 实际端口以启动日志中的 `MCP: SSE server is running at ...` 和 `MCP: Streamable HTTP server is running at ...` 为准。
 
+### 页面元素选择
+
+开发服务器启动后，页面内默认支持 `Option + Shift` / `Alt + Shift` 进入元素选择模式。按住快捷键移动鼠标会高亮当前元素，单击后插件会自动复制 `elementId`，并提示 `元素位置已复制，请发送给 AI`。
+
+AI 收到 `elementId` 后应调用：
+
+```json
+{
+  "tool": "get_element_context",
+  "arguments": {
+    "elementId": "src/pages/Home.vue:12:8"
+  }
+}
+```
+
+项目源码会返回 `editable: true` 和 `codeLocation`；第三方组件会返回 `editable: false`、`packageName` 和 `entryFile`；运行时兜底 ID 只在当前页面生命周期内有效。
+
+```ts
+vueMcpNext({
+  elementPicker: {
+    enabled: true,
+    shortcut: {
+      altKey: true,
+      shiftKey: true
+    },
+    toastDurationMs: 2200
+  }
+})
+```
+
 ### 手动配置 MCP 客户端
 
 如果你不想使用自动配置，或需要把地址复制到其他支持 HTTP MCP 的客户端，可以手动配置当前 Vite dev server 的 MCP 地址。
@@ -137,6 +169,16 @@ vueMcpNext({
   skill: {
     autoConfig: true
   },
+  elementPicker: {
+    enabled: true,
+    shortcut: {
+      altKey: true,
+      shiftKey: true,
+      metaKey: false,
+      ctrlKey: false
+    },
+    toastDurationMs: 2200
+  },
   appendTo: undefined,
   runtime: {
     mode: 'auto',
@@ -548,6 +590,25 @@ interface NetworkRecord {
 
 Vue 组件、Router、Pinia 是应用层语义，固定走 Vue Runtime Bridge，不用 CDP 替代。
 
+### 浏览器存储
+
+浏览器存储工具组面向调试当前页面的运行时数据。`localStorage`、`sessionStorage` 和 `IndexedDB` 只作用于当前选中页面同源，避免跨站误操作。Cookie 在无 CDP 时通过 `document.cookie` 访问当前页面可见的同源条目；配置 CDP 后可查询浏览器级 Cookie，并能读取 `HttpOnly` 条目，但删除和清空时会跳过 `HttpOnly` 并返回跳过数量。
+
+| 资源 | Runtime Hook | CDP |
+| --- | --- | --- |
+| `localStorage` | 读 / 写 / 删 | 读 / 写 / 删 |
+| `sessionStorage` | 读 / 写 / 删 | 读 / 写 / 删 |
+| `IndexedDB` | 同源库和记录操作 | 同源库和记录操作 |
+| `Cookie` | 查询 / 写入 / 删除当前页面可见条目 | 查询 / 写入 / 删除非 `HttpOnly` 条目，`HttpOnly` 仅可查询 |
+
+相关 MCP 工具：
+
+- `list_storage`：列出当前页面同源存储和 Cookie；有 CDP 时补充浏览器级 Cookie
+- `get_storage_item`：读取指定 key、IndexedDB 记录或 Cookie
+- `set_storage_item`：写入 Web Storage、IndexedDB 记录或 Cookie
+- `delete_storage_item`：删除 Web Storage、IndexedDB 记录或 Cookie；`HttpOnly` Cookie 仅在 CDP 下可见且删除时会跳过
+- `clear_storage`：清空指定范围，Cookie 清空会跳过 `HttpOnly`
+
 ## 本地验证
 
 ### 自动化检查