From b3c4f1b686863099bd6f66395033e6315a2b2c78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Fri, 29 May 2026 13:36:34 +0800
Subject: [PATCH] feat(desktop): add element-picker toggle to browser surface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/browser/BrowserSurface.test.tsx    | 11 +++++++++++
 desktop/src/components/browser/BrowserSurface.tsx | 15 ++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/desktop/src/components/browser/BrowserSurface.test.tsx b/desktop/src/components/browser/BrowserSurface.test.tsx
index 96cbb058..ae4baa80 100644
--- a/desktop/src/components/browser/BrowserSurface.test.tsx
+++ b/desktop/src/components/browser/BrowserSurface.test.tsx
@@ -50,4 +50,15 @@ describe('BrowserSurface', () => {
     fireEvent.click(screen.getByLabelText('截图'))
     expect(bridge.eval).toHaveBeenCalledWith(expect.stringContaining('capture'))
   })
+
+  it('选择元素 button toggles pickerActive and signals the bridge', () => {
+    useBrowserPanelStore.getState().open('s1', 'http://localhost:5173/')
+    render(<BrowserSurface sessionId="s1" />)
+    fireEvent.click(screen.getByLabelText('选择元素'))
+    expect(useBrowserPanelStore.getState().bySession['s1']!.pickerActive).toBe(true)
+    expect(bridge.eval).toHaveBeenCalledWith(expect.stringContaining('enter-picker'))
+    fireEvent.click(screen.getByLabelText('选择元素'))
+    expect(useBrowserPanelStore.getState().bySession['s1']!.pickerActive).toBe(false)
+    expect(bridge.eval).toHaveBeenLastCalledWith(expect.stringContaining('exit-picker'))
+  })
 })
diff --git a/desktop/src/components/browser/BrowserSurface.tsx b/desktop/src/components/browser/BrowserSurface.tsx
index ff8645b9..ef55a1c9 100644
--- a/desktop/src/components/browser/BrowserSurface.tsx
+++ b/desktop/src/components/browser/BrowserSurface.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'react'
-import { Camera } from 'lucide-react'
+import { Camera, MousePointer2 } from 'lucide-react'
 import { BrowserAddressBar } from './BrowserAddressBar'
 import { computeWebviewBounds } from './computeWebviewBounds'
 import { previewBridge } from '../../lib/previewBridge'
@@ -65,6 +65,19 @@ export function BrowserSurface({ sessionId }: { sessionId: string }) {
         >
           <Camera size={16} />
         </button>
+        <button
+          aria-label="选择元素"
+          aria-pressed={Boolean(session.pickerActive)}
+          className={`rounded p-1 hover:bg-muted ${session.pickerActive ? 'bg-muted text-primary' : ''}`}
+          onClick={() => {
+            const cur = useBrowserPanelStore.getState().bySession[sessionId]
+            const next = !cur?.pickerActive
+            store.setPicker(sessionId, next)
+            previewBridge.eval(`window.__PREVIEW_BRIDGE__?.handleHostRaw('{"v":1,"type":"${next ? 'enter-picker' : 'exit-picker'}"}')`)
+          }}
+        >
+          <MousePointer2 size={16} />
+        </button>
       </div>
       <div ref={hostRef} className="flex-1" data-testid="preview-host" />
     </div>