style(font): 系統性字體升級 — 對齊業界標準 Linear/Vercel/Anthropic

- openclaw-panel: 11/9/8px → 13/12/11px - sidebar: nav 13→14px, badges 11→12px, bottom 12→13px, icons 14→15px - page.tsx: metric labels 11→12px, section headers 12→13px - incident-card: 11px 全面升 12px, meta 12→13px Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-01 22:15:35 +08:00
parent a1f7d1f495
commit 48d89a1a91
4 changed files with 27 additions and 27 deletions
--- a/apps/web/src/components/ai/openclaw-panel.tsx
+++ b/apps/web/src/components/ai/openclaw-panel.tsx
@@ -152,14 +152,14 @@ export function OpenClawPanel({

        {/* 右側文字 */}
        <div style={{ flex: 1 }}>
-          <div style={{ fontSize: 11, fontWeight: 700, color: '#141413', marginBottom: 2 }}>
+          <div style={{ fontSize: 13, fontWeight: 700, color: '#141413', marginBottom: 2 }}>
            NemoClaw
          </div>
-          <div style={{ fontSize: 9, color: '#87867f', marginBottom: 6 }}>
+          <div style={{ fontSize: 12, color: '#87867f', marginBottom: 6 }}>
            {STATUS_MESSAGES[status]}
          </div>
          <span style={{
-            fontSize: 8, padding: '2px 8px',
+            fontSize: 11, padding: '2px 8px',
            background: 'rgba(74,144,217,0.08)',
            border: '0.5px solid rgba(74,144,217,0.3)',
            borderRadius: 10,
--- a/apps/web/src/components/incident/incident-card.tsx
+++ b/apps/web/src/components/incident/incident-card.tsx
@@ -179,25 +179,25 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
    switch (buttonState) {
      case 'loading':
        return (
-          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: '#87867f' }}>
+          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: '#87867f' }}>
            <span style={{ width: 8, height: 8, border: '1.5px solid #e0ddd4', borderTopColor: '#d97757', borderRadius: '50%', animation: 'spin 0.8s linear infinite', display: 'inline-block' }} />
            {t('executing')}
          </span>
        )
      case 'approved':
-        return <span style={{ fontSize: 11, color: '#22C55E', fontWeight: 700 }}>✓ {t('approved')}</span>
+        return <span style={{ fontSize: 12, color: '#22C55E', fontWeight: 700 }}>✓ {t('approved')}</span>
      case 'rejected':
-        return <span style={{ fontSize: 11, color: '#cc2200', fontWeight: 700 }}>✗ {t('rejected')}</span>
+        return <span style={{ fontSize: 12, color: '#cc2200', fontWeight: 700 }}>✗ {t('rejected')}</span>
      case 'error':
      case 'timeout':
        return (
          <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <span style={{ fontSize: 11, color: buttonState === 'timeout' ? '#F59E0B' : '#cc2200' }}>
+            <span style={{ fontSize: 12, color: buttonState === 'timeout' ? '#F59E0B' : '#cc2200' }}>
              {buttonState === 'timeout' ? t('timeout') : t('error')}
            </span>
            <button
              onClick={() => { setButtonState('idle'); setErrorMessage(null) }}
-              style={{ fontSize: 11, padding: '2px 7px', background: '#f0efe8', border: '0.5px solid #e0ddd4', borderRadius: 10, cursor: 'pointer', color: '#87867f' }}
+              style={{ fontSize: 12, padding: '2px 7px', background: '#f0efe8', border: '0.5px solid #e0ddd4', borderRadius: 10, cursor: 'pointer', color: '#87867f' }}
            >
              {t('retry')}
            </button>
@@ -241,7 +241,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
            >
              ✗ {t('reject')}
            </button>
-            {isAnalyzing && <span style={{ fontSize: 11, color: '#F59E0B' }}>⏳</span>}
+            {isAnalyzing && <span style={{ fontSize: 12, color: '#F59E0B' }}>⏳</span>}
          </div>
        )
    }
@@ -273,7 +273,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
        }}>
          {serviceName}
        </span>
-        <span style={{ marginLeft: 'auto', fontSize: 11, color: '#b0ad9f' }}>
+        <span style={{ marginLeft: 'auto', fontSize: 12, color: '#b0ad9f' }}>
          {duration}
        </span>
      </div>
@@ -284,7 +284,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
      </div>

      {/* INC-ID */}
-      <div style={{ padding: '0 10px 4px', fontSize: 11, color: '#b0ad9f', fontFamily: 'monospace' }}>
+      <div style={{ padding: '0 10px 4px', fontSize: 12, color: '#b0ad9f', fontFamily: 'monospace' }}>
        {incident.incident_id}
      </div>

@@ -302,13 +302,13 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
        gap: 12,
        flexWrap: 'wrap' as const,
      }}>
-        <span style={{ fontSize: 12, color: '#87867f' }}>
+        <span style={{ fontSize: 13, color: '#87867f' }}>
          影響服務 <strong style={{ color: '#141413' }}>{incident.affected_services?.length ?? 0}</strong>
        </span>
-        <span style={{ fontSize: 12, color: '#87867f' }}>
+        <span style={{ fontSize: 13, color: '#87867f' }}>
          信號數 <strong style={{ color: '#141413' }}>{incident.signal_count ?? '--'}</strong>
        </span>
-        <span style={{ fontSize: 12, color: '#87867f' }}>
+        <span style={{ fontSize: 13, color: '#87867f' }}>
          狀態 <strong style={{ color: '#141413' }}>{incident.status}</strong>
        </span>
      </div>
@@ -329,7 +329,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
              display: 'flex',
              alignItems: 'center',
              gap: 5,
-              fontSize: 12,
+              fontSize: 13,
              color: '#87867f',
              width: '100%',
              textAlign: 'left' as const,
@@ -348,7 +348,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
              border: '0.5px solid #e0ddd4',
              borderLeft: '3px solid #d97757',
              borderRadius: 6,
-              fontSize: 12,
+              fontSize: 13,
              color: '#87867f',
            }}>
              <div style={{ color: '#141413', marginBottom: 4 }}>{decisionAction}</div>
@@ -367,7 +367,7 @@ export function IncidentCard({ incident, decision, onApprovalChange }: IncidentC
        <div style={{ padding: '6px 10px 10px', display: 'flex', justifyContent: 'flex-end' }}>
          {renderApproveButtons()}
          {errorMessage && (
-            <span style={{ fontSize: 11, color: '#cc2200', marginLeft: 6, maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={errorMessage}>
+            <span style={{ fontSize: 12, color: '#cc2200', marginLeft: 6, maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={errorMessage}>
              {errorMessage}
            </span>
          )}
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -216,7 +216,7 @@ export function Sidebar({
                    gap: collapsed ? 0 : 8,
                    justifyContent: collapsed ? 'center' : 'flex-start',
                    padding: collapsed ? '8px 0' : '6px 12px',
-                    fontSize: 13,
+                    fontSize: 14,
                    color: active ? '#141413' : '#87867f',
                    fontWeight: active ? 600 : 400,
                    borderRight: active ? '2px solid #d97757' : '2px solid transparent',
@@ -226,12 +226,12 @@ export function Sidebar({
                    position: 'relative' as const,
                  }}
                >
-                  <item.Icon size={14} />
+                  <item.Icon size={15} />
                  {!collapsed && <span>{t(item.labelKey)}</span>}
                  {item.badge && count > 0 && (
                    <span style={{
                      marginLeft: 'auto',
-                      fontSize: 11,
+                      fontSize: 12,
                      background: '#d97757',
                      color: 'white',
                      borderRadius: 10,
@@ -263,7 +263,7 @@ export function Sidebar({
                gap: collapsed ? 0 : 8,
                justifyContent: collapsed ? 'center' : 'flex-start',
                padding: collapsed ? '7px 0' : '5px 12px',
-                fontSize: 12,
+                fontSize: 13,
                color: active ? '#141413' : '#87867f',
                fontWeight: active ? 600 : 400,
                borderRight: active ? '2px solid #d97757' : '2px solid transparent',
@@ -272,7 +272,7 @@ export function Sidebar({
                transition: 'all 0.15s',
              }}
            >
-              <item.Icon size={12} />
+              <item.Icon size={15} />
              {!collapsed && <span>{t(item.labelKey)}</span>}
            </Link>
          )