Add React Arco workbench prototype

prototypes/senlinai-acro-react/scripts/visual-check.mjs

@@ -0,0 +1,45 @@
+import { createServer } from 'vite'
+import { chromium } from 'playwright'
+
+const port = Number(process.env.VISUAL_CHECK_PORT ?? 4175)
+
+const server = await createServer({
+  root: process.cwd(),
+  server: {
+    host: '127.0.0.1',
+    port,
+    strictPort: true,
+  },
+})
+
+await server.listen()
+
+const browser = await chromium.launch({ headless: true })
+const page = await browser.newPage({ viewport: { width: 1440, height: 1024 }, deviceScaleFactor: 1 })
+const errors = []
+page.on('console', (message) => {
+  if (message.type() === 'error') errors.push(message.text())
+})
+
+await page.goto(`http://127.0.0.1:${port}/`, { waitUntil: 'networkidle' })
+await page.screenshot({ path: 'test-results/login-react-acro.png', fullPage: true })
+await page.getByRole('button', { name: '登录' }).click()
+await page.waitForSelector('.workbench-shell')
+await page.screenshot({ path: 'test-results/workbench-react-acro-light.png', fullPage: true })
+await page.getByRole('button', { name: '切换深色模式' }).click()
+await page.screenshot({ path: 'test-results/workbench-react-acro-dark.png', fullPage: true })
+
+const metrics = await page.evaluate(() => {
+  const statusbar = document.querySelector('.statusbar')
+  const search = document.querySelector('.global-search')
+  return {
+    statusbarHeight: statusbar?.getBoundingClientRect().height,
+    searchHeight: search?.getBoundingClientRect().height,
+    overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
+  }
+})
+
+await browser.close()
+await server.close()
+
+console.log(JSON.stringify({ metrics, errors }, null, 2))