sdaduanbilei/cc-haha
1
0
Fork 0
mirror of https://github.com/NanmiCoder/cc-haha synced 2026-07-19 13:33:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
程序员阿江(Relakkes) 2026-05-29 13:36:34 +08:00
parent dbef9f2d0a
commit b3c4f1b686
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
desktop/src/components/browser/BrowserSurface.test.tsx
View File

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

15
desktop/src/components/browser/BrowserSurface.tsx
View File

@ -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>