From 6ae655d9435327a56ff1b64959f3594b226f85ee Mon Sep 17 00:00:00 2001
From: OG T <ogt@WOOOMacMiniM4.local>
Date: Fri, 3 Apr 2026 12:15:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(dashboard):=20metrics=20strip=20=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4=E5=B0=8D=E9=BD=8A=20figma-v2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- background 改為 #fff（白色）
- padding 改為 8px 16px，min-width:120px
- divider 改為獨立元素（width:0.5px height:36px alignSelf:center）
- label font-size 改為 11px
- 移除 borderRight hack，使用獨立 divider

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/page.tsx        | 83 ++++++++++++-----------
 apps/web/src/components/layout/header.tsx |  1 +
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/apps/web/src/app/[locale]/page.tsx b/apps/web/src/app/[locale]/page.tsx
index 28386845..f7eadc3d 100644
--- a/apps/web/src/app/[locale]/page.tsx
+++ b/apps/web/src/app/[locale]/page.tsx
@@ -14,6 +14,7 @@
  *   figma-v2 重點: 7指標(含今日事件) + 監控工具左彩色條 + 可點擊連結 + meta行
  */
 
+import React from 'react'
 import { useTranslations } from 'next-intl'
 import { useState, useEffect } from 'react'
 import { useGlobalPulseMetrics } from '@/hooks/useGlobalPulseMetrics'
@@ -513,7 +514,7 @@ export default function Home({ params }: { params: { locale: string } }) {
 
         {/* ── Metrics Strip ─────────────────────────────────────────────────── */}
         <div style={{
-          background: '#faf9f3',
+          background: '#fff',
           borderBottom: '0.5px solid #e0ddd4',
           display: 'flex',
           flexDirection: 'column',
@@ -559,52 +560,52 @@ export default function Home({ params }: { params: { locale: string } }) {
               </div>
             </div>
           </div>
-          {/* Metrics Row — figma-v2: 7 metrics */}
-          <div style={{ display: 'flex', alignItems: 'stretch', padding: '0' }}>
+          {/* Metrics Row — figma-v2 完整複製 */}
+          <div style={{ display: 'flex', alignItems: 'stretch', padding: 0, gap: 0 }}>
           {metrics.map((m, i) => (
-            <div key={i} style={{
-              flex: 1,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-              padding: '8px 14px',
-              borderRight: i < metrics.length - 1 ? '0.5px solid #e8e5dc' : 'none',
-            }}>
-              {/* Label */}
-              <span style={{ fontSize: 10, color: '#b0ad9f', letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 4, fontWeight: 500, whiteSpace: 'nowrap', height: 16, lineHeight: '16px' }}>
-                {m.label}
-              </span>
-              {/* Value row */}
-              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, height: 32 }}>
-                <span style={{
-                  fontSize: 22,
-                  fontWeight: 700,
-                  color: m.valueColor ?? '#141413',
-                  lineHeight: 1,
-                  fontFamily: 'var(--font-body), monospace',
-                }}>
-                  {String(m.value)}
+            <React.Fragment key={i}>
+              <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                padding: '8px 16px',
+                minWidth: 120,
+              }}>
+                {/* Label — figma: font-size:11px */}
+                <span style={{ fontSize: 11, color: '#b0ad9f', letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 4, fontWeight: 500, whiteSpace: 'nowrap', height: 16, lineHeight: '16px' }}>
+                  {m.label}
                 </span>
-                {m.sparkline && (
-                  <MiniSparkline values={m.sparkline.values} color={m.sparkline.color} />
-                )}
-              </div>
-              {/* Sub / badge / extra row */}
-              <div style={{ height: 20, display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
-                {m.extra ? m.extra : m.badge ? (
+                {/* Value row — figma: height:32px */}
+                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, height: 32 }}>
                   <span style={{
-                    fontSize: 10, padding: '1px 6px',
-                    background: m.badge.bg, color: m.badge.color,
-                    border: `0.5px solid ${m.badge.color}40`,
-                    borderRadius: 8, fontWeight: 600, whiteSpace: 'nowrap',
+                    fontSize: 22, fontWeight: 700,
+                    color: m.valueColor ?? '#141413',
+                    lineHeight: 1,
+                    fontFamily: 'var(--font-body), "DM Mono", monospace',
                   }}>
-                    {m.badge.text}
+                    {String(m.value)}
                   </span>
-                ) : m.sub ? (
-                  <span style={{ fontSize: 12, color: '#87867f', whiteSpace: 'nowrap' }}>{m.sub}</span>
-                ) : null}
+                </div>
+                {/* Extra row — figma: height:20px margin-top:4px */}
+                <div style={{ height: 20, display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
+                  {m.extra ? m.extra : m.badge ? (
+                    <span style={{
+                      fontSize: 10, padding: '1px 6px',
+                      background: m.badge.bg, color: m.badge.color,
+                      borderRadius: 3, fontWeight: 600, whiteSpace: 'nowrap',
+                    }}>
+                      {m.badge.text}
+                    </span>
+                  ) : m.sub ? (
+                    <span style={{ fontSize: 12, color: '#87867f', whiteSpace: 'nowrap' }}>{m.sub}</span>
+                  ) : null}
+                </div>
               </div>
-            </div>
+              {/* Divider — figma: 獨立元素 width:0.5px height:36px */}
+              {i < metrics.length - 1 && (
+                <div style={{ width: '0.5px', height: 36, background: '#e0ddd4', alignSelf: 'center', flexShrink: 0 }} />
+              )}
+            </React.Fragment>
           ))}
           </div>
         </div>
diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index ae80b743..df00ebfa 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -75,6 +75,7 @@ export function Header({
         background: '#faf9f3',
         overflow: 'hidden',
         transition: 'width 0.3s ease',
+        flexShrink: 0,
       }}>
         {/* NemoClaw mini SVG */}
         <div style={{ width: 36, height: 36, flexShrink: 0 }}>