fix: refine mobile project verification

apps/web_v1/scripts/visual-check.mjs

@@ -569,6 +569,46 @@ await page.setViewportSize({ width: 390, height: 844 })
 await page.waitForFunction(() => [...document.querySelectorAll('.project-rail, .channel-sidebar')]
   .every((node) => getComputedStyle(node).visibility === 'hidden'))
 const mobileProjectMetrics = await collectMetrics()
+const mobileProjectOverviewLayout = await page.evaluate(() => {
+  const hero = document.querySelector('.project-overview-hero')
+  const heroTitle = document.querySelector('.project-overview-identity h3')
+  const shareButton = document.querySelector('.project-overview-share .arco-btn')
+  const metricColumns = [...document.querySelectorAll('.project-overview-page > .metric-row > .arco-col')]
+  const metricLabels = [...document.querySelectorAll('.project-overview-page .metric-card .arco-typography-secondary')]
+  const lineCount = (node) => {
+    if (!node) return 0
+    const styles = getComputedStyle(node)
+    const lineHeight = Number.parseFloat(styles.lineHeight)
+    return lineHeight > 0 ? Math.round(node.getBoundingClientRect().height / lineHeight) : 0
+  }
+  return {
+    viewportWidth: document.documentElement.clientWidth,
+    hero: hero?.getBoundingClientRect().toJSON() ?? null,
+    heroTitle: heroTitle ? { ...heroTitle.getBoundingClientRect().toJSON(), lines: lineCount(heroTitle) } : null,
+    shareButton: shareButton?.getBoundingClientRect().toJSON() ?? null,
+    metricColumnLefts: metricColumns.map((column) => Math.round(column.getBoundingClientRect().left)),
+    metricLabels: metricLabels.map((label) => ({
+      text: label.textContent?.trim() ?? '',
+      width: label.getBoundingClientRect().width,
+      lines: lineCount(label),
+    })),
+  }
+})
+if (!mobileProjectOverviewLayout.heroTitle || mobileProjectOverviewLayout.heroTitle.lines > 2) {
+  failures.push(`mobile project title must fit in at most two readable lines, got ${JSON.stringify(mobileProjectOverviewLayout.heroTitle)}`)
+}
+if (!mobileProjectOverviewLayout.shareButton || mobileProjectOverviewLayout.shareButton.right > mobileProjectOverviewLayout.viewportWidth) {
+  failures.push(`mobile project URL must stay inside the viewport, got ${JSON.stringify(mobileProjectOverviewLayout.shareButton)}`)
+}
+if (new Set(mobileProjectOverviewLayout.metricColumnLefts).size !== 2) {
+  failures.push(`mobile project metrics must use two columns, got left edges ${JSON.stringify(mobileProjectOverviewLayout.metricColumnLefts)}`)
+}
+for (const label of mobileProjectOverviewLayout.metricLabels) {
+  const minimumReadableWidth = label.text.length * 12
+  if (label.width < minimumReadableWidth || label.lines > 2) {
+    failures.push(`mobile project metric label must remain horizontally readable, got ${JSON.stringify(label)}`)
+  }
+}
 await page.screenshot({ path: 'test-results/project-react-acro-mobile.png', fullPage: true })
 const projectNavButton = page.getByRole('button', { name: '打开项目导航', exact: true })
 if (await projectNavButton.count() === 0) {

apps/web_v1/src/App.css

@@ -2278,6 +2278,68 @@
     padding: var(--space-3);
   }
 
+  .project-overview-hero {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .project-overview-identity > div,
+  .project-overview-share,
+  .project-overview-share .arco-btn,
+  .project-overview-share .arco-btn > span:last-child {
+    min-width: 0;
+  }
+
+  .project-overview-identity h3 {
+    word-break: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .project-overview-share {
+    width: 100%;
+    max-width: 100%;
+    justify-items: stretch;
+  }
+
+  .project-overview-share .arco-typography {
+    justify-self: end;
+  }
+
+  .project-overview-share .arco-btn {
+    width: 100%;
+  }
+
+  .project-overview-page > .metric-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-3);
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  .project-overview-page > .metric-row > .arco-col {
+    width: auto;
+    max-width: none;
+    flex: none;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .project-overview-page .metric-card.arco-card,
+  .project-overview-page .metric-card .arco-space {
+    width: 100%;
+    height: 100%;
+  }
+
+  .project-overview-page .metric-card .arco-space-item:last-child {
+    min-width: 0;
+  }
+
+  .project-overview-page .metric-card .arco-typography-secondary {
+    white-space: nowrap;
+    word-break: keep-all;
+  }
+
   .statusbar {
     grid-template-columns: minmax(0, 1fr);
     padding: 0 var(--space-3);