验证桌面前端更改
完整运行应用程序需要一个 OpenCode 会话 + 实时模型交互。对于纯前端 组件更改,可将组件挂载到临时的 Vite 页面中,步骤如下:
- 创建
apps/desktop/verify-<x>.html(纯 HTML,包含<div id="root">、<script type="module" src="/src/verify-<x>.tsx">)和apps/desktop/src/verify-<x>.tsx(使用 ReactDOM.createRoot,导入./index.css用于 Tailwind,通过@/导入组件)。Vite 会自动 服务apps/desktop/下的任何.html文件。 - 在后台运行
cd apps/desktop && npx vite --port 5199 --strictPort。 npx 包装器可能会重复启动并报告“端口已使用”错误,而第一个实例 实际上已成功运行——重试前请使用lsof -iTCP:5199检查。 - 使用浏览器控制技能(Chrome HTTP API,端口 9528)驱动测试:
createWindow→waitForSelector→readDom→screenshotTab(截图将保存到~/Downloads/)。 注意事项:evalScript会被扩展的 CSP 阻止——请改用readDom/scrollTab;readDom需要显式指定"attributes": [],否则会报错“Value is unserializable”。 - 清理:
closeTab、终止 vite 进程、删除两个临时文件, 确认git status显示工作区干净。