feat(desktop): add element-picker toggle to browser surface

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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'))
+  })
 })

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>