Polish React prototype project rail spacing

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

@@ -25,6 +25,7 @@ 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.locator('.login-form-panel .arco-btn-primary').click()
 await page.waitForSelector('.workbench-shell')
+await page.waitForTimeout(700)
 await page.screenshot({ path: 'test-results/workbench-react-acro-light.png', fullPage: true })
 await page.locator('.topbar-actions .arco-btn').first().click()
 await page.screenshot({ path: 'test-results/workbench-react-acro-dark.png', fullPage: true })
@@ -36,10 +37,21 @@ const metrics = await page.evaluate(() => {
   const dashboard = document.querySelector('.dashboard-button')
   const project = document.querySelector('.project-button')
   const create = document.querySelector('.create-project')
+  const firstBadge = document.querySelector('.project-badge .arco-badge-number')
+  const railItems = [...document.querySelectorAll('.dashboard-button, .project-button, .create-project')]
   const rect = (node) => {
     const box = node?.getBoundingClientRect()
-    return box ? { width: box.width, height: box.height } : null
+    return box ? { left: box.left, right: box.right, top: box.top, width: box.width, height: box.height } : null
   }
+  const railBox = rail?.getBoundingClientRect()
+  const itemRects = railItems.map(rect).filter(Boolean)
+  const horizontalInsets = railBox && project
+    ? {
+        left: project.getBoundingClientRect().left - railBox.left,
+        right: railBox.right - project.getBoundingClientRect().right,
+      }
+    : null
+  const verticalGaps = itemRects.slice(1).map((item, index) => item.top - (itemRects[index].top + itemRects[index].height))
 
   return {
     statusbarHeight: statusbar?.getBoundingClientRect().height,
@@ -48,6 +60,9 @@ const metrics = await page.evaluate(() => {
     dashboardButton: rect(dashboard),
     projectButton: rect(project),
     createProjectButton: rect(create),
+    firstProjectBadge: rect(firstBadge),
+    horizontalInsets,
+    verticalGaps,
     overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
   }
 })
@@ -66,6 +81,19 @@ 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.horizontalInsets || Math.abs(metrics.horizontalInsets.left - metrics.horizontalInsets.right) > 1) {
+  failures.push(`expected equal rail horizontal insets, got ${JSON.stringify(metrics.horizontalInsets)}`)
+}
+if (metrics.verticalGaps.some((gap) => gap !== 12)) {
+  failures.push(`expected all project rail vertical gaps to be 12px, got ${JSON.stringify(metrics.verticalGaps)}`)
+}
+if (
+  !metrics.firstProjectBadge ||
+  metrics.firstProjectBadge.right > metrics.projectRailWidth ||
+  metrics.firstProjectBadge.left < 0
+) {
+  failures.push(`expected first project badge to stay inside the project rail, got ${JSON.stringify(metrics.firstProjectBadge)}`)
+}
 if (
   !metrics.dashboardButton ||
   metrics.dashboardButton.width !== metrics.projectButton?.width ||

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

@@ -280,12 +280,25 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 14px;
-  padding: 14px 16px;
+  gap: 12px;
+  padding: 14px 24px;
   border-right: 1px solid var(--senlin-border);
   background: var(--senlin-panel);
 }
 
+.project-rail .arco-layout-sider-children {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.project-stack,
+.project-stack .arco-space-item {
+  width: 48px;
+}
+
 .dashboard-button,
 .create-project {
   width: 48px !important;
@@ -296,7 +309,6 @@
 }
 
 .create-project {
-  margin-top: 6px;
   font-size: 11px;
   white-space: normal;
 }

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

@@ -270,7 +270,7 @@ function Workbench({
       <Layout className="workbench-main">
         <Sider className="project-rail" width={96}>
           <Button className="dashboard-button" icon={<IconDashboard />} />
-          <Space direction="vertical" size={12}>
+          <Space className="project-stack" direction="vertical" size={12}>
             {projects.map((project) => (
               <Badge key={project.id} count={project.badge} dot={false} className={project.urgent ? 'project-badge urgent' : 'project-badge'}>
                 <button
@@ -284,7 +284,7 @@ function Workbench({
               </Badge>
             ))}
           </Space>
-          <Button className="create-project" icon={<IconPlus />}>新建项目</Button>
+          <Button className="create-project" aria-label="新建项目" icon={<IconPlus />} title="新建项目" />
         </Sider>
 
         <Sider className="channel-sidebar" width={248}>