Adjust React prototype project rail sizing

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

@@ -23,18 +23,31 @@ page.on('console', (message) => {
 
 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.locator('.login-form-panel .arco-btn-primary').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.locator('.topbar-actions .arco-btn').first().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')
+  const rail = document.querySelector('.project-rail')
+  const dashboard = document.querySelector('.dashboard-button')
+  const project = document.querySelector('.project-button')
+  const create = document.querySelector('.create-project')
+  const rect = (node) => {
+    const box = node?.getBoundingClientRect()
+    return box ? { width: box.width, height: box.height } : null
+  }
+
   return {
     statusbarHeight: statusbar?.getBoundingClientRect().height,
     searchHeight: search?.getBoundingClientRect().height,
+    projectRailWidth: rail?.getBoundingClientRect().width,
+    dashboardButton: rect(dashboard),
+    projectButton: rect(project),
+    createProjectButton: rect(create),
     overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
   }
 })
@@ -43,3 +56,35 @@ await browser.close()
 await server.close()
 
 console.log(JSON.stringify({ metrics, errors }, null, 2))
+
+const failures = []
+if (errors.length) failures.push(`console errors: ${errors.join('; ')}`)
+if (metrics.statusbarHeight !== 32) failures.push(`expected statusbar height 32, got ${metrics.statusbarHeight}`)
+if (metrics.searchHeight !== 42) failures.push(`expected search height 42, got ${metrics.searchHeight}`)
+if (metrics.overflowX) failures.push('expected no horizontal overflow')
+if (!metrics.projectRailWidth || metrics.projectRailWidth < 88) {
+  failures.push(`expected project rail at least 88px wide, got ${metrics.projectRailWidth}`)
+}
+if (!metrics.projectButton) failures.push('missing project button')
+if (
+  !metrics.dashboardButton ||
+  metrics.dashboardButton.width !== metrics.projectButton?.width ||
+  metrics.dashboardButton.height !== metrics.projectButton?.height
+) {
+  failures.push(
+    `dashboard button size ${JSON.stringify(metrics.dashboardButton)} does not match project button ${JSON.stringify(metrics.projectButton)}`,
+  )
+}
+if (
+  !metrics.createProjectButton ||
+  metrics.createProjectButton.width !== metrics.projectButton?.width ||
+  metrics.createProjectButton.height !== metrics.projectButton?.height
+) {
+  failures.push(
+    `create project button size ${JSON.stringify(metrics.createProjectButton)} does not match project button ${JSON.stringify(metrics.projectButton)}`,
+  )
+}
+
+if (failures.length) {
+  throw new Error(failures.join('\n'))
+}

prototypes/senlinai-acro-react/src/App.css

@@ -281,20 +281,22 @@
   flex-direction: column;
   align-items: center;
   gap: 14px;
-  padding: 14px 10px;
+  padding: 14px 16px;
   border-right: 1px solid var(--senlin-border);
   background: var(--senlin-panel);
 }
 
 .dashboard-button,
 .create-project {
-  width: 48px;
+  width: 48px !important;
-  height: 48px;
+  height: 48px !important;
+  min-width: 48px;
+  padding: 0 !important;
+  border-radius: 8px;
 }
 
 .create-project {
   margin-top: 6px;
-  padding: 0;
   font-size: 11px;
   white-space: normal;
 }

prototypes/senlinai-acro-react/src/App.tsx

@@ -268,7 +268,7 @@ function Workbench({
       </Header>
 
       <Layout className="workbench-main">
-        <Sider className="project-rail" width={72}>
+        <Sider className="project-rail" width={96}>
           <Button className="dashboard-button" icon={<IconDashboard />} />
           <Space direction="vertical" size={12}>
             {projects.map((project) => (