style(ppt): align PPT palette perfectly with MOMO Pro v2 design tokens (Beige, Warm Ink, Caramel Orange) as per frontend upgrade roadmap

.claude/settings.json

@@ -34,7 +34,10 @@
       "Bash(mkdir -p ~/Code)",
       "Bash(python3)",
       "Bash(python3 -c \"import py_compile; py_compile.compile\\('routes/daily_sales_routes.py', doraise=True\\); print\\('SYNTAX OK'\\)\")",
-      "Bash(python3 -c \"import py_compile; py_compile.compile\\('services/daily_sales_service.py', doraise=True\\); py_compile.compile\\('utils/df_helpers.py', doraise=True\\); print\\('ALL SYNTAX OK'\\)\")"
+      "Bash(python3 -c \"import py_compile; py_compile.compile\\('services/daily_sales_service.py', doraise=True\\); py_compile.compile\\('utils/df_helpers.py', doraise=True\\); print\\('ALL SYNTAX OK'\\)\")",
+      "Bash(ssh wooo@192.168.0.110 \"ssh ollama@192.168.0.188 'ls -la /home/ollama/momo-pro/scripts/tools/sanitize_momo_urls.py /home/ollama/momo-pro/utils/momo_url_utils.py 2>&1'\")",
+      "Bash(ssh wooo@192.168.0.110 \"ssh ollama@192.168.0.188 'cd /home/ollama/momo-pro && git pull 2>&1 | tail -15'\")",
+      "Bash(ssh wooo@192.168.0.110 \"ssh ollama@192.168.0.188 'docker exec -e PYTHONPATH=/app -w /app momo-pro-system python3 /tmp/sanitize_momo_urls.py --commit 2>&1 | tail -8'\")"
     ],
     "defaultMode": "bypassPermissions",
     "additionalDirectories": [

MOMO Pro/EwoooC 後台原型.html

@@ -50,7 +50,12 @@
 <script type="text/babel" src="app/page-campaigns.jsx"></script>
 <script type="text/babel" src="app/page-orders.jsx"></script>
 <script type="text/babel" src="app/page-products.jsx"></script>
+<script type="text/babel" src="app/data-analytics.jsx"></script>
+<script type="text/babel" src="app/page-analytics.jsx"></script>
+<script type="text/babel" src="app/page-analytics-sales.jsx"></script>
+<script type="text/babel" src="app/page-analytics-trends.jsx"></script>
 <script type="text/babel" src="app/modals.jsx"></script>
+<script type="text/babel" src="app/modal-price-history.jsx"></script>
 <script type="text/babel" src="app/main.jsx"></script>
 
 <script type="text/babel" data-presets="env,react">
@@ -68,6 +73,11 @@ function Root() {
             onChange={v => setTweak('page', v)}
             options={[
               { value: 'dashboard', label: '儀表板' },
+              { value: 'campaigns', label: '活動看板' },
+              { value: 'analytics-sales',   label: '業績分析' },
+              { value: 'analytics-daily',   label: '當日業績' },
+              { value: 'analytics-growth',  label: '成長分析' },
+              { value: 'analytics-monthly', label: '月份總表' },
               { value: 'orders',    label: '訂單管理' },
               { value: 'products',  label: '商品管理' },
               { value: 'inventory', label: '庫存管理' },
@@ -107,6 +117,14 @@ function Root() {
               { value: 'bordered', label: '描邊' },
             ]}
           />
+          <TweakRadio label="活動 Hero 樣式" value={tweaks.campaignHero}
+            onChange={v => setTweak('campaignHero', v)}
+            options={[
+              { value: 'simple',  label: '簡約' },
+              { value: 'dotted',  label: '點陣' },
+              { value: 'inverse', label: '反差' },
+            ]}
+          />
           <TweakRadio label="主要按鈕" value={tweaks.buttonStyle}
             onChange={v => setTweak('buttonStyle', v)}
             options={[

MOMO Pro/HANDOFF.md

@@ -1,22 +1,22 @@
 # EwoooC 後台 — Codex 開發交接規格 (HANDOFF.md)
 
-> 這份文件是給 Codex（或任何工程團隊）將 prototype 重建為正式 production 專案的完整規格。
+> 這份文件是給 Codex（或任何工程團隊）將 prototype 重建為正式 production 專案的完整規格。  
-> Prototype 是 React 18 + Babel Standalone（瀏覽器即時 transpile），**不是 production build**。
+> Prototype 是 React 18 + Babel Standalone（瀏覽器即時 transpile），**不是 production build**。  
 > 請依下方規格，重建為正式專案。
 
 ---
 
 ## 0. 專案概覽
 
-**產品名稱**：EwoooC（內部後台 / 比價爬蟲監控系統）
+**產品名稱**：EwoooC（內部後台 / 比價爬蟲監控系統）  
-**目標使用者**：採購、行銷、營運人員
+**目標使用者**：採購、行銷、營運人員  
-**核心功能**：商品價格監控、活動看板、廠商缺貨追蹤、AI 助手、雲端匯入
+**核心功能**：商品價格監控、活動看板、廠商缺貨追蹤、AI 助手、雲端匯入  
 **資料規模**：監控 7,000+ 商品，每日掃描多次，含歷史價格走勢
 
-**設計語言（必須沿用）**：Nothing × Claude 混合風格
+**設計語言（必須沿用）**：Nothing × Claude 混合風格  
-- 米色基底（warm paper）+ 黑灰主體 + 焦糖橘 accent
+- 米色基底（warm paper）+ 黑灰主體 + 焦糖橘 accent  
-- JetBrains Mono 用於所有數字、ID、時間戳
+- JetBrains Mono 用於所有數字、ID、時間戳  
-- Inter 用於介面文字、繁體中文用 Noto Sans TC
+- Inter 用於介面文字、繁體中文用 Noto Sans TC  
 - 安靜、結構化、靠留白和排版取勝；**避免**漸層厚重 hero、彩色表頭、五彩按鈕
 
 ---
@@ -211,7 +211,7 @@ app/
 
 ### 5.3 商品列表（`/products`）
 
-**參考**：`app/page-products.jsx`
+**參考**：`app/page-products.jsx`  
 全商品 CRUD + 篩選 + 編輯 modal。可重用 Dashboard 的 ProductTable 元件。
 
 ---
@@ -415,5 +415,83 @@ ewoooc-handoff/
 
 ---
 
-> 有任何視覺或行為不確定的地方，**以 prototype 的呈現為準**。
+> 有任何視覺或行為不確定的地方，**以 prototype 的呈現為準**。  
 > Prototype 路徑：開啟 `EwoooC 後台原型.html` 直接看 live demo，並用右下角 Tweaks 面板觀察可調整的設計變數。
+
+---
+
+## 13. 2026-05 增量更新（Codex 必讀）
+
+本章記錄 HANDOFF.md 初稿後追加的所有設計決策。**以下優先於前面章節**。
+
+### 13.1 商品看板 — KPI 列強化
+
+KPI 從 4 格擴成 **5 格**，最後一格為「AI 挑品」入口：
+
+| # | label | value | 互動 |
+|---|---|---|---|
+| 1 | 監控總數 | 7,234 | — |
+| 2 | 今日變動 | 2,180（黑底反白）| — |
+| 3 | 漲價（danger）| 458 | 點擊 → tab 切到 `up` |
+| 4 | 降價（success）| 612 | 點擊 → tab 切到 `down` |
+| 5 | **AI 挑品** | 50 ↗ | 點擊 → tab 切到 `ai` 並平滑滾到 §03 商品列表 |
+
+實作：KPI cell 加 `cursor: pointer`，onClick 設 `setTab(...)` + `document.getElementById('product-table')?.scrollIntoView({behavior:'smooth'})`（或等效 ref 滾動）。
+
+### 13.2 商品看板 — FilterBar tabs 順序
+
+```
+全部 | AI 揀品 | 新上架 | 漲價 | 降價 | 下架
+```
+
+`AI 揀品` tab 對應規則：目前用模擬條件（價格波動 > 8% 或標題含關鍵字）挑出約 1/3 商品，**正式版請改接 `GET /api/products/ai-picks`**（後端 ML 推薦），schema 同 `/api/products` response。
+
+### 13.3 商品看板 — 表格分頁
+
+Client-side 分頁，**50 筆/頁**。Footer 顯示 `1–50 · 共 N 筆` + 上下頁鈕（圖示按鈕，disabled 時 opacity 0.3）。正式版改 server-side：`GET /api/products?page=1&pageSize=50`。
+
+### 13.4 商品看板 — Row hover & 警報欄位
+
+- Row hover 時加左側 3px caramel accent 條（`box-shadow: inset 3px 0 0 var(--momo-warm-caramel)`）。
+- 警報 chip 所在 `<td>` 設 `min-width: 140px; white-space: nowrap`，避免 chip 被擠到換行。
+
+### 13.5 PriceHistoryModal（新元件）
+
+點商品 row → 開全螢幕 modal 顯示價格走勢。
+
+**Header**：
+- 左：商品縮圖 + 名稱 + ID（mono）
+- 右：3 顆 icon-only 操作鈕（加入監控 / 匯出 CSV / 分享連結）+ 關閉
+
+**Body**：
+- 區段切換 tabs：`7d` / `30d` / `90d` / `1y`
+- LineChart：`days` 改變時呼叫 `buildSeries(days)` 重算資料點
+  - 7d / 30d / 90d → 每日一點
+  - 1y → 每週一點，共 52 點
+- 下方資訊欄：當前價 / 區間最高 / 區間最低 / 變動幅度
+
+**API**：`GET /api/products/{id}/price-history?range=7d|30d|90d|1y` → `{points: [{date, price}], stats: {...}}`
+
+### 13.6 活動看板 — Hero 漸層與點陣
+
+§03 三張活動卡（限時搶購 / 1.1 狂歡 / 母親節）背景：
+- 加左上 3×36px caramel accent 條
+- 疊一層 `opacity: 0.18` 的點陣紋理（`background-image: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 8px 8px`）
+- §02 三張焦點卡 padding 16px（從 18 收緊）
+
+### 13.7 設計紀律補充
+
+- **絕不使用** emoji 當功能 icon（emoji 只能出現在商品縮圖位置）。
+- **絕不**用漸層當大面積背景，僅活動 hero 卡可用，且需配點陣紋理壓低彩度。
+- 所有數字、ID、時間戳一律 JetBrains Mono；中文標題用 Noto Sans TC。
+- 表格 row 高度 56px、表頭 40px，padding 一律走 tokens。
+
+### 13.8 尚未交付（Phase 2）
+
+以下在 prototype 是 placeholder，正式版需設計 + 實作：
+- 分析報表（`/analytics`）— 預期：類別趨勢、競品對比、季節性熱圖
+- AI 助手對話流（`/ai-assistant`）— 串 LLM
+- 雲端匯入精靈（`/cloud-import`）— S3 / GDrive 連接器
+- 系統管理 RBAC（`/settings`）
+
+> 若 prototype 與本章描述衝突，**以 prototype 的實際行為為準**。Codex 可直接讀 `app/page-dashboard.jsx`、`app/modals.jsx`、`app/page-campaigns.jsx` 取得真實實作。

MOMO Pro/app/main.jsx

@@ -6,12 +6,14 @@ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
   "density": "comfortable",
   "cardStyle": "shadow",
   "buttonStyle": "gradient",
-  "page": "dashboard"
+  "page": "dashboard",
+  "campaignHero": "dotted"
 }/*EDITMODE-END*/;
 
 const MomoApp = ({ tweaks, setTweak, fixedPage, label }) => {
   const [cmdOpen, setCmdOpen] = React.useState(false);
   const [editProduct, setEditProduct] = React.useState(null);
+  const [priceProduct, setPriceProduct] = React.useState(null);
 
   const page = fixedPage || tweaks.page;
 
@@ -25,6 +27,7 @@ const MomoApp = ({ tweaks, setTweak, fixedPage, label }) => {
       if (e.key === 'Escape') {
         setCmdOpen(false);
         setEditProduct(null);
+        setPriceProduct(null);
       }
     };
     window.addEventListener('keydown', onKey);
@@ -64,10 +67,14 @@ const MomoApp = ({ tweaks, setTweak, fixedPage, label }) => {
           background: 'var(--momo-bg-body)',
         }}>
           {page === 'dashboard' && (
-            <DashboardPage density={tweaks.density} />
+            <DashboardPage density={tweaks.density} onProductClick={setPriceProduct} />
           )}
           {page === 'campaigns' && (
-            <CampaignsPage density={tweaks.density} />
+            <CampaignsPage density={tweaks.density} heroVariant={tweaks.campaignHero} />
+          )}
+          {page === 'analytics-sales' && <AnalyticsSalesPage />}
+          {['analytics-daily','analytics-growth','analytics-monthly','analytics'].includes(page) && (
+            <EmptyPage page={page} />
           )}
           {page === 'orders' && (
             <OrdersPage density={tweaks.density} cardStyle={tweaks.cardStyle} buttonStyle={tweaks.buttonStyle} />
@@ -76,7 +83,7 @@ const MomoApp = ({ tweaks, setTweak, fixedPage, label }) => {
             <ProductsPage density={tweaks.density} cardStyle={tweaks.cardStyle} buttonStyle={tweaks.buttonStyle}
               onEditProduct={setEditProduct} />
           )}
-          {!['dashboard','orders','products','campaigns'].includes(page) && (
+          {!['dashboard','orders','products','campaigns','analytics-sales','analytics-daily','analytics-growth','analytics-monthly','analytics'].includes(page) && (
             <EmptyPage page={page} />
           )}
         </main>
@@ -93,6 +100,11 @@ const MomoApp = ({ tweaks, setTweak, fixedPage, label }) => {
         onClose={() => setEditProduct(null)}
         buttonStyle={tweaks.buttonStyle}
       />
+      <PriceHistoryModal
+        open={!!priceProduct}
+        product={priceProduct}
+        onClose={() => setPriceProduct(null)}
+      />
     </div>
   );
 };
@@ -100,7 +112,11 @@ const MomoApp = ({ tweaks, setTweak, fixedPage, label }) => {
 const EmptyPage = ({ page }) => {
   const labels = {
     inventory: '庫存管理', members: '會員管理', marketing: '行銷活動',
-    analytics: '數據分析', settings: '系統設定',
+    analytics: '分析報表', settings: '系統設定',
+    'analytics-daily':   '當日業績',
+    'analytics-growth':  '成長分析',
+    'analytics-monthly': '月份總表數據分析',
+    outofstock: '廠商缺貨', ai: 'AI 助手', cloud: '雲端匯入',
   };
   return (
     <div>

MOMO Pro/app/page-campaigns.jsx

@@ -1,124 +1,235 @@
-// EwoooC - 活動看板（新視覺語言：與 Dashboard 一致的設計語彙）
+// EwoooC - 活動看板 v2（對齊 Nothing × Claude 規範）
+// 三個 Hero 版本：simple / dotted / inverse — 由 prop heroVariant 控制
 
-// ===== 活動切換 — 精緻 segmented tabs =====
+// ===== 共用 - 編號標籤（呼應 dashboard） =====
+const CampSectionLabel = ({ num, children, sub }) => (
+  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
+    <span className="momo-mono" style={{
+      fontSize: 11, fontWeight: 700, color: 'var(--momo-text-tertiary)',
+      letterSpacing: '0.08em',
+    }}>{num}</span>
+    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--momo-text-primary)', letterSpacing: '0.02em' }}>
+      {children}
+    </span>
+    {sub && (
+      <span className="momo-mono" style={{ fontSize: 10, color: 'var(--momo-text-tertiary)', marginLeft: 'auto' }}>
+        {sub}
+      </span>
+    )}
+  </div>
+);
+
+// 每個活動配不同暖色調 accent（全部留在暖色域，不用冷色）
+// 對應 design-tokens.css 的 --momo-warm-* 家族
+const CAMPAIGN_ACCENTS = {
+  flash:     'var(--momo-warm-caramel)',  // 焦糖橘 #c96442
+  festival:  'var(--momo-warm-honey)',    // 蜂蜜金 #b88416
+  mothers:   'var(--momo-warm-rust)',     // 暖紅 #b5342f
+  valentine: 'var(--momo-warm-mahogany)', // 深焦糖 #8f4530
+  laborday:  'var(--momo-warm-earth)',    // 焦土 #8a5a2b
+};
+
+// ===== 活動切換 — segmented tabs（橫向 scroll，避免溢出） =====
 const CampaignSwitcher = ({ active, setActive, campaigns }) => {
   const ids = Object.keys(campaigns);
   return (
-    <div style={{
+    <div className="momo-scroll" style={{
-      display: 'inline-flex',
+      overflowX: 'auto',
-      background: 'var(--momo-bg-surface)',
+      paddingBottom: 4, // for scrollbar
-      border: '1px solid var(--momo-border-light)',
-      borderRadius: 6, padding: 4,
-      gap: 2,
     }}>
-      {ids.map(id => {
+      <div style={{
-        const c = campaigns[id];
+        display: 'inline-flex',
-        const isActive = id === active;
+        background: 'var(--momo-bg-surface)',
-        return (
+        border: '1px solid var(--momo-border-light)',
-          <button key={id} onClick={() => setActive(id)} style={{
+        borderRadius: 4, padding: 3,
-            padding: '8px 14px',
+        gap: 2,
-            display: 'inline-flex', alignItems: 'center', gap: 6,
+      }}>
-            fontSize: 13, fontWeight: 600,
+        {ids.map(id => {
-            color: isActive ? '#fff' : 'var(--momo-text-secondary)',
+          const c = campaigns[id];
-            background: isActive ? 'var(--momo-ink)' : 'transparent',
+          const isActive = id === active;
-            border: 'none', borderRadius: 4,
+          return (
-            transition: 'var(--momo-transition-base)',
+            <button key={id} onClick={() => setActive(id)} style={{
-            whiteSpace: 'nowrap',
+              padding: '8px 14px',
-          }}>
+              display: 'inline-flex', alignItems: 'center', gap: 8,
-            <span style={{ fontSize: 13 }}>{c.icon}</span>
+              fontSize: 13, fontWeight: 600,
-            <span>{c.name}</span>
+              color: isActive ? '#faf7f0' : 'var(--momo-text-secondary)',
-            <span className="momo-mono" style={{
+              background: isActive ? 'var(--momo-ink)' : 'transparent',
-              fontSize: 10, fontWeight: 700,
+              border: 'none', borderRadius: 2,
-              padding: '1px 6px', borderRadius: 8,
+              transition: 'var(--momo-transition-base)',
-              background: isActive ? 'rgba(255,255,255,0.2)' : 'var(--momo-bg-subtle)',
+              whiteSpace: 'nowrap',
-              color: isActive ? '#fff' : 'var(--momo-text-tertiary)',
+            }}>
-            }}>{c.total}</span>
+              <span>{c.name}</span>
-          </button>
+              <span className="momo-mono" style={{
-        );
+                fontSize: 10, fontWeight: 700,
-      })}
+                padding: '1px 6px', borderRadius: 2,
+                background: isActive ? 'rgba(255,255,255,0.15)' : 'var(--momo-bg-subtle)',
+                color: isActive ? 'rgba(255,255,255,0.9)' : 'var(--momo-text-tertiary)',
+                letterSpacing: '0.04em',
+              }}>{c.total}</span>
+            </button>
+          );
+        })}
+      </div>
     </div>
   );
 };
 
-// ===== Hero - 活動主資訊卡（紫色漸層，呼應 Dashboard 監控概況） =====
+// ===== Hero V1：簡約（米白卡 + 左 4px 直條） =====
-const CampaignHero = ({ c, activeId }) => {
+const HeroSimple = ({ c, activeId }) => {
-  // 不同活動用不同色相
+  const accent = CAMPAIGN_ACCENTS[activeId] || 'var(--momo-accent)';
-  const palettes = {
-    flash:     ['#dc2626', '#ea580c', '#f97316'], // 火焰紅橘
-    festival:  ['#7c3aed', '#6d28d9', '#5b21b6'], // 紫
-    mothers:   ['#db2777', '#be185d', '#9d174d'], // 玫紅
-    valentine: ['#e11d48', '#be123c', '#9f1239'], // 情人節紅
-    laborday:  ['#0891b2', '#0e7490', '#155e75'], // 藍
-  };
-  const [c1, c2, c3] = palettes[activeId] || palettes.flash;
-
   return (
-    <Card cardStyle="flat" padding={false} style={{
+    <div style={{
-      padding: 24,
+      position: 'relative',
-      background: `linear-gradient(160deg, ${c1} 0%, ${c2} 50%, ${c3} 100%)`,
+      background: 'var(--momo-bg-surface)',
-      color: '#fff', border: 'none', borderRadius: 8,
+      border: '1px solid var(--momo-border-light)',
-      position: 'relative', overflow: 'hidden',
+      borderRadius: 8, padding: '28px 32px',
-      minHeight: 200,
+      paddingLeft: 36,
+      overflow: 'hidden',
     }}>
-      {/* 點陣裝飾 */}
+      {/* 左側 4px 直條 */}
-      <div style={{ position: 'absolute', inset: 0,
+      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: accent }} />
-        backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px)',
-        backgroundSize: '12px 12px', pointerEvents: 'none' }} />
-      {/* 大圖示 */}
-      <div style={{ position: 'absolute', right: -10, bottom: -40, fontSize: 220, lineHeight: 1, opacity: 0.12, pointerEvents: 'none' }}>{c.icon}</div>
 
-      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 16, height: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
-        {/* 標籤列 */}
+        <span className="momo-mono" style={{
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
-          <span style={{
+          color: accent, textTransform: 'uppercase',
-            padding: '3px 10px', fontSize: 10, fontWeight: 700,
+        }}>CAMPAIGN</span>
-            letterSpacing: '0.08em', textTransform: 'uppercase',
+        <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
-            background: 'rgba(255,255,255,0.18)',
+          ID · {activeId.toUpperCase()}
-            border: '1px solid rgba(255,255,255,0.25)',
+        </span>
-            borderRadius: 12,
+      </div>
-          }}>CAMPAIGN</span>
+
-          <span className="momo-mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
+      <h1 style={{
-            ID · {activeId.toUpperCase()}
+        margin: 0, fontSize: 36, fontWeight: 800,
-          </span>
+        lineHeight: 1.1, letterSpacing: '-0.02em',
+        color: 'var(--momo-text-primary)', marginBottom: 18,
+      }}>{c.name}</h1>
+
+      <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', fontFamily: 'var(--momo-font-family-mono)' }}>
+        <div>
+          <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 4 }}>
+            活動時段
+          </div>
+          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--momo-text-primary)' }}>{c.time}</div>
+        </div>
+        <div>
+          <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 4 }}>
+            最後更新
+          </div>
+          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--momo-text-primary)' }}>{c.lastUpdate}</div>
+        </div>
+        <div>
+          <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 4 }}>
+            商品總數
+          </div>
+          <div className="momo-mono" style={{ fontSize: 24, fontWeight: 800, color: 'var(--momo-text-primary)', letterSpacing: '-0.02em', lineHeight: 1 }}>
+            {c.total.toLocaleString()}
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
+        <button style={{
+          padding: '8px 14px', fontSize: 12, fontWeight: 600,
+          background: 'var(--momo-bg-paper)', color: 'var(--momo-text-primary)',
+          border: '1px solid var(--momo-border-light)', borderRadius: 4,
+          display: 'inline-flex', alignItems: 'center', gap: 6,
+        }}>
+          <Icon name="refresh" size={12} /> 手動更新
+        </button>
+        {activeId === 'flash' && (
+          <button style={{
+            padding: '8px 14px', fontSize: 12, fontWeight: 600,
+            background: 'var(--momo-ink)', color: '#faf7f0',
+            border: 'none', borderRadius: 4,
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+          }}>
+            <Icon name="bell" size={12} /> 發送通知
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// ===== Hero V2：點陣（Nothing 招牌） =====
+const HeroDotted = ({ c, activeId }) => {
+  const accent = CAMPAIGN_ACCENTS[activeId] || 'var(--momo-accent)';
+  return (
+    <div className="camp-hero" style={{
+      position: 'relative',
+      background: 'var(--momo-bg-paper)',
+      border: '1px solid var(--momo-border-light)',
+      borderRadius: 8, padding: '28px 32px',
+      overflow: 'hidden',
+    }}>
+      {/* 點陣背景 */}
+      <div className="momo-dot-bg-dark" style={{
+        position: 'absolute', inset: 0, opacity: 0.6, pointerEvents: 'none',
+      }} />
+      {/* accent 角飾線 */}
+      <div style={{
+        position: 'absolute', top: 0, left: 0, width: 64, height: 4, background: accent,
+      }} />
+      <div style={{
+        position: 'absolute', top: 0, left: 0, width: 4, height: 64, background: accent,
+      }} />
+
+      <div style={{ position: 'relative' }}>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
+          <span className="momo-mono" style={{
+            fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
+            color: accent, textTransform: 'uppercase',
+            padding: '3px 8px',
+            background: 'var(--momo-bg-surface)',
+            border: `1px solid ${accent}`,
+            borderRadius: 2,
+          }}>CAMPAIGN / {activeId.toUpperCase()}</span>
         </div>
 
-        {/* 標題 */}
+        <h1 className="camp-hero-title" style={{
-        <h1 style={{ margin: 0, fontSize: 36, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
+          margin: 0, fontSize: 40, fontWeight: 800,
-          {c.name}
+          lineHeight: 1.05, letterSpacing: '-0.025em',
-        </h1>
+          color: 'var(--momo-text-primary)', marginBottom: 20,
+          fontFamily: 'var(--momo-font-display)',
+        }}>{c.name}</h1>
 
-        {/* meta 列 */}
+        <div className="camp-hero-meta-row" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'flex-end' }}>
-        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', fontSize: 12, fontFamily: 'var(--momo-font-family-mono)' }}>
           <div>
-            <div style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>活動時段</div>
+            <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 4 }}>
-            <div style={{ color: '#fff', fontWeight: 600 }}>{c.time}</div>
+              活動時段
+            </div>
+            <div className="momo-mono" style={{ fontSize: 13, fontWeight: 600, color: 'var(--momo-text-primary)' }}>{c.time}</div>
           </div>
           <div>
-            <div style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>最後更新</div>
+            <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 4 }}>
-            <div style={{ color: '#fff', fontWeight: 600 }}>{c.lastUpdate}</div>
+              最後更新
+            </div>
+            <div className="momo-mono" style={{ fontSize: 13, fontWeight: 600, color: 'var(--momo-text-primary)' }}>{c.lastUpdate}</div>
           </div>
-          <div>
+          <div className="camp-hero-total-wrap" style={{ marginLeft: 'auto', textAlign: 'right' }}>
-            <div style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>商品總數</div>
+            <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 4 }}>
-            <div className="momo-mono" style={{ color: '#fff', fontWeight: 800, fontSize: 20, letterSpacing: '-0.02em' }}>
+              商品總數
+            </div>
+            <div className="momo-mono camp-hero-total" style={{ fontSize: 36, fontWeight: 800, color: accent, letterSpacing: '-0.03em', lineHeight: 1 }}>
               {c.total.toLocaleString()}
             </div>
           </div>
         </div>
 
-        {/* 操作 */}
+        <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
-        <div style={{ display: 'flex', gap: 8, marginTop: 'auto' }}>
           <button style={{
-            padding: '8px 14px', fontSize: 13, fontWeight: 600,
+            padding: '8px 14px', fontSize: 12, fontWeight: 600,
-            background: 'rgba(255,255,255,0.15)', color: '#fff',
+            background: 'var(--momo-bg-surface)', color: 'var(--momo-text-primary)',
-            border: '1px solid rgba(255,255,255,0.25)', borderRadius: 4,
+            border: '1px solid var(--momo-border-light)', borderRadius: 4,
             display: 'inline-flex', alignItems: 'center', gap: 6,
           }}>
             <Icon name="refresh" size={12} /> 手動更新
           </button>
           {activeId === 'flash' && (
             <button style={{
-              padding: '8px 14px', fontSize: 13, fontWeight: 600,
+              padding: '8px 14px', fontSize: 12, fontWeight: 600,
-              background: '#fff', color: c1,
+              background: 'var(--momo-ink)', color: '#faf7f0',
               border: 'none', borderRadius: 4,
               display: 'inline-flex', alignItems: 'center', gap: 6,
             }}>
@@ -127,73 +238,148 @@ const CampaignHero = ({ c, activeId }) => {
           )}
         </div>
       </div>
-    </Card>
+    </div>
   );
 };
 
-// ===== Hero KPI 區（右側，4 顆數字） =====
+// ===== Hero V3：反差（暖墨底 + accent 點綴，呼應 dashboard 反白 KPI） =====
-const CampaignKPIs = ({ stats, schedule }) => {
+const HeroInverse = ({ c, activeId }) => {
-  const kpis = [
+  const accent = CAMPAIGN_ACCENTS[activeId] || 'var(--momo-accent)';
-    { label: '上架商品', value: stats.listed, color: 'var(--momo-text-primary)' },
-    { label: '新品',     value: stats.new,    color: '#3b82f6' },
-    { label: '漲價',     value: stats.up,     color: 'var(--momo-danger)' },
-    { label: '降價',     value: stats.down,   color: 'var(--momo-success)' },
-  ];
   return (
-    <Card cardStyle="flat" padding={false} style={{
+    <div style={{
-      background: 'var(--momo-bg-surface)',
+      position: 'relative',
-      border: '1px solid var(--momo-border-light)', borderRadius: 8,
+      background: 'var(--momo-ink)',
-      display: 'flex', flexDirection: 'column',
+      borderRadius: 8, padding: '28px 32px',
+      overflow: 'hidden',
+      color: '#faf7f0',
     }}>
-      <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--momo-border-light)', display: 'flex', alignItems: 'center', gap: 8 }}>
+      {/* 點陣裝飾 */}
-        <Icon name="trendUp" size={14} />
+      <div style={{
-        <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.02em' }}>活動數據</span>
+        position: 'absolute', inset: 0,
-      </div>
+        backgroundImage: 'radial-gradient(circle, rgba(250,247,240,0.06) 1px, transparent 1px)',
-      <div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, flex: 1 }}>
+        backgroundSize: '12px 12px', pointerEvents: 'none',
-        {kpis.map(k => (
+      }} />
-          <div key={k.label} style={{
+
-            padding: 12, background: 'var(--momo-bg-paper)',
+      <div style={{ position: 'relative' }}>
-            border: '1px solid var(--momo-border-light)', borderRadius: 6,
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
-            display: 'flex', flexDirection: 'column', gap: 4,
+          <span className="momo-mono" style={{
-          }}>
+            fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
-            <div style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>{k.label}</div>
+            color: accent, textTransform: 'uppercase',
-            <div className="momo-mono" style={{ fontSize: 26, fontWeight: 800, color: k.color, letterSpacing: '-0.02em', lineHeight: 1 }}>
+          }}>● CAMPAIGN</span>
-              {k.value.toLocaleString()}
+          <span className="momo-mono" style={{ fontSize: 11, color: 'rgba(250,247,240,0.5)' }}>
+            ID · {activeId.toUpperCase()}
+          </span>
+        </div>
+
+        <h1 style={{
+          margin: 0, fontSize: 40, fontWeight: 800,
+          lineHeight: 1.05, letterSpacing: '-0.025em',
+          color: '#faf7f0', marginBottom: 20,
+        }}>{c.name}</h1>
+
+        <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'flex-end' }}>
+          <div>
+            <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'rgba(250,247,240,0.5)', textTransform: 'uppercase', marginBottom: 4 }}>
+              活動時段
+            </div>
+            <div className="momo-mono" style={{ fontSize: 13, fontWeight: 600, color: '#faf7f0' }}>{c.time}</div>
+          </div>
+          <div>
+            <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'rgba(250,247,240,0.5)', textTransform: 'uppercase', marginBottom: 4 }}>
+              最後更新
+            </div>
+            <div className="momo-mono" style={{ fontSize: 13, fontWeight: 600, color: '#faf7f0' }}>{c.lastUpdate}</div>
+          </div>
+          <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
+            <div className="momo-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', color: 'rgba(250,247,240,0.5)', textTransform: 'uppercase', marginBottom: 4 }}>
+              商品總數
+            </div>
+            <div className="momo-mono" style={{ fontSize: 36, fontWeight: 800, color: '#faf7f0', letterSpacing: '-0.03em', lineHeight: 1 }}>
+              {c.total.toLocaleString()}
             </div>
           </div>
-        ))}
+        </div>
+
+        <div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
+          <button style={{
+            padding: '8px 14px', fontSize: 12, fontWeight: 600,
+            background: 'rgba(250,247,240,0.1)', color: '#faf7f0',
+            border: '1px solid rgba(250,247,240,0.2)', borderRadius: 4,
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+          }}>
+            <Icon name="refresh" size={12} /> 手動更新
+          </button>
+          {activeId === 'flash' && (
+            <button style={{
+              padding: '8px 14px', fontSize: 12, fontWeight: 600,
+              background: accent, color: '#faf7f0',
+              border: 'none', borderRadius: 4,
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+            }}>
+              <Icon name="bell" size={12} /> 發送通知
+            </button>
+          )}
+        </div>
       </div>
-      {/* 排程列 */}
+    </div>
-      <div style={{
-        padding: '10px 20px', borderTop: '1px solid var(--momo-border-light)',
-        background: 'var(--momo-bg-paper)',
-        display: 'flex', alignItems: 'center', gap: 8, fontSize: 11,
-        fontFamily: 'var(--momo-font-family-mono)', color: 'var(--momo-text-secondary)',
-        borderRadius: '0 0 8px 8px',
-      }}>
-        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--momo-success)' }} />
-        <span>排程 · {schedule.lastRun}</span>
-        <span style={{ color: 'var(--momo-border)' }}>|</span>
-        <span>異動 {schedule.anomalies} 筆</span>
-      </div>
-    </Card>
   );
 };
 
-// ===== 時段切片改為時間軸（限時搶購用） =====
+// ===== KPI 4 顆（無框、扁平、跟 dashboard 監控總覽同款） =====
+const CampaignKPIs = ({ stats, schedule }) => {
+  const items = [
+    { label: '上架商品', value: stats.listed, sub: '本期活動' },
+    { label: '新品',     value: stats.new,    sub: `+${stats.new} 件` },
+    { label: '漲價',     value: stats.up,     sub: stats.up > 0 ? '注意異動' : '—', tone: 'danger' },
+    { label: '降價',     value: stats.down,   sub: stats.down > 0 ? '優惠加深' : '—', tone: 'success' },
+  ];
+  const toneColor = (t) => t === 'danger' ? 'var(--momo-danger)' : t === 'success' ? 'var(--momo-success)' : 'var(--momo-text-primary)';
+
+  return (
+    <div className="camp-kpis" style={{
+      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
+      background: 'var(--momo-bg-surface)',
+      border: '1px solid var(--momo-border-light)',
+      borderRadius: 8, overflow: 'hidden',
+    }}>
+      {items.map((it, i) => (
+        <div key={i} style={{
+          padding: '20px 24px',
+          borderRight: i < items.length - 1 ? '1px solid var(--momo-border-light)' : 'none',
+        }}>
+          <div className="momo-mono" style={{
+            fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
+            color: 'var(--momo-text-tertiary)',
+            textTransform: 'uppercase', marginBottom: 10,
+          }}>{it.label}</div>
+          <div className="momo-mono camp-kpi-num" style={{
+            fontSize: 36, fontWeight: 700,
+            color: toneColor(it.tone),
+            letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 8,
+          }}>{it.value.toLocaleString()}</div>
+          <div className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>
+            {it.sub}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ===== 時段時間軸（限時搶購用） — 去花俏化 =====
 const TimeSlotTimeline = ({ slots }) => {
   const max = Math.max(...slots.map(s => s.count), 1);
   return (
-    <Card cardStyle="flat" padding={false} style={{
+    <div style={{
-      padding: 20, background: 'var(--momo-bg-surface)',
+      padding: '20px 24px', background: 'var(--momo-bg-surface)',
       border: '1px solid var(--momo-border-light)', borderRadius: 8,
     }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <div className="momo-mono" style={{
-          <Icon name="clock" size={14} />
+          fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
-          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.02em' }}>時段排程</span>
+          color: 'var(--momo-text-tertiary)', textTransform: 'uppercase',
-        </div>
+        }}>時段排程</div>
-        <span style={{ fontSize: 11, color: 'var(--momo-text-tertiary)', fontFamily: 'var(--momo-font-family-mono)' }}>
+        <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
           24H · {slots.reduce((a, b) => a + b.count, 0)} 件
         </span>
       </div>
@@ -206,23 +392,23 @@ const TimeSlotTimeline = ({ slots }) => {
               display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
               cursor: 'pointer',
             }}>
-              {/* bar 區，高度固定 80px */}
               <div style={{ height: 80, width: '100%', display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                 <div style={{
                   width: '100%', maxWidth: 36,
                   height: `${Math.max(heightPct, 4)}%`,
                   background: s.active ? 'var(--momo-accent)' : 'var(--momo-text-primary)',
-                  opacity: s.active ? 1 : (s.count === 0 ? 0.15 : 0.7),
+                  opacity: s.active ? 1 : (s.count === 0 ? 0.12 : 0.6),
-                  borderRadius: '3px 3px 0 0',
+                  borderRadius: '2px 2px 0 0',
                   transition: 'all 0.2s',
                   position: 'relative',
                 }}>
                   {s.active && (
-                    <div style={{
+                    <div className="momo-mono" style={{
                       position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)',
-                      padding: '2px 6px', borderRadius: 3,
+                      padding: '2px 6px', borderRadius: 2,
-                      background: 'var(--momo-accent)', color: '#fff',
+                      background: 'var(--momo-accent)', color: '#faf7f0',
-                      fontSize: 10, fontWeight: 700, fontFamily: 'var(--momo-font-family-mono)',
+                      fontSize: 9, fontWeight: 700,
+                      letterSpacing: '0.08em',
                       whiteSpace: 'nowrap',
                     }}>NOW</div>
                   )}
@@ -239,22 +425,20 @@ const TimeSlotTimeline = ({ slots }) => {
           );
         })}
       </div>
-    </Card>
+    </div>
   );
 };
 
-// ===== 分類 chip 列（橫向 scroll） =====
+// ===== 分類 chip 列 — 對齊 dashboard tab 風格 =====
 const CategoryChips = ({ cats, activeIdx, setActive }) => (
-  <Card cardStyle="flat" padding={false} style={{
+  <div style={{
     padding: '14px 20px', background: 'var(--momo-bg-surface)',
     border: '1px solid var(--momo-border-light)', borderRadius: 8,
   }}>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
+    <div className="momo-mono" style={{
-      <Icon name="tag" size={13} />
+      fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
-      <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.02em', color: 'var(--momo-text-primary)' }}>
+      color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 10,
-        分類 <span className="momo-mono" style={{ fontWeight: 500, color: 'var(--momo-text-tertiary)', marginLeft: 4 }}>{cats.length}</span>
+    }}>分類 / {cats.length}</div>
-      </span>
-    </div>
     <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
       {cats.map((cat, i) => {
         const isActive = activeIdx == null ? cat.active : i === activeIdx;
@@ -265,8 +449,8 @@ const CategoryChips = ({ cats, activeIdx, setActive }) => (
             fontSize: 12, fontWeight: 500,
             border: `1px solid ${isActive ? 'var(--momo-ink)' : 'var(--momo-border-light)'}`,
             background: isActive ? 'var(--momo-ink)' : 'var(--momo-bg-paper)',
-            color: isActive ? '#fff' : 'var(--momo-text-secondary)',
+            color: isActive ? '#faf7f0' : 'var(--momo-text-secondary)',
-            borderRadius: 4,
+            borderRadius: 2,
             transition: 'var(--momo-transition-base)',
             whiteSpace: 'nowrap',
           }}>
@@ -274,31 +458,31 @@ const CategoryChips = ({ cats, activeIdx, setActive }) => (
             <span className="momo-mono" style={{
               fontSize: 10, fontWeight: 700,
               padding: '1px 5px', borderRadius: 2,
-              background: isActive ? 'rgba(255,255,255,0.18)' : 'var(--momo-bg-subtle)',
+              background: isActive ? 'rgba(250,247,240,0.18)' : 'var(--momo-bg-subtle)',
-              color: isActive ? 'rgba(255,255,255,0.9)' : 'var(--momo-text-tertiary)',
+              color: isActive ? 'rgba(250,247,240,0.9)' : 'var(--momo-text-tertiary)',
             }}>{cat.count}</span>
           </button>
         );
       })}
     </div>
-  </Card>
+  </div>
 );
 
-// ===== 商品列表（與 Dashboard 同視覺） =====
+// ===== 商品列表 row — 去掉花俏火焰膠囊，改 mono 風格 =====
 const Tag = ({ children, tone }) => {
   const tones = {
-    info:    { bg: '#dbeafe', fg: '#1e40af' },
+    info:    { bg: 'var(--momo-info-bg)',    fg: 'var(--momo-info-text)' },
-    danger:  { bg: '#fee2e2', fg: '#b91c1c' },
+    danger:  { bg: 'var(--momo-danger-bg)',  fg: 'var(--momo-danger-text)' },
-    success: { bg: '#d1fae5', fg: '#047857' },
+    success: { bg: 'var(--momo-success-bg)', fg: 'var(--momo-success-text)' },
-    warning: { bg: '#fef3c7', fg: '#92400e' },
+    warning: { bg: 'var(--momo-warning-bg)', fg: 'var(--momo-warning-text)' },
   };
   const t = tones[tone] || tones.info;
   return (
-    <span style={{
+    <span className="momo-mono" style={{
       display: 'inline-block', padding: '1px 6px',
       fontSize: 10, fontWeight: 700,
-      background: t.bg, color: t.fg, borderRadius: 3,
+      background: t.bg, color: t.fg, borderRadius: 2,
-      letterSpacing: '0.02em',
+      letterSpacing: '0.04em',
     }}>{children}</span>
   );
 };
@@ -310,31 +494,29 @@ const CampaignProductRow = ({ p, isFlash, idx }) => (
   }}
       onMouseEnter={e => e.currentTarget.style.background = 'var(--momo-bg-paper)'}
       onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-    <td style={{ padding: '14px 16px' }}>
+    <td className="camp-td-cat" style={{ padding: '14px 16px' }}>
-      <span style={{
+      <span className="momo-mono" style={{
-        display: 'inline-block', padding: '3px 10px', fontSize: 11,
+        display: 'inline-block', padding: '2px 8px', fontSize: 11,
-        background: '#fff3cd', color: '#7a4f01', borderRadius: 12, whiteSpace: 'nowrap',
+        background: 'var(--momo-bg-subtle)', color: 'var(--momo-text-secondary)',
+        borderRadius: 2, whiteSpace: 'nowrap',
       }}>{p.cat}</span>
     </td>
     <td style={{ padding: '14px 16px' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
         <div style={{
-          width: 44, height: 44, borderRadius: 4,
+          width: 40, height: 40, borderRadius: 4,
           background: 'var(--momo-bg-subtle)', border: '1px solid var(--momo-border-light)',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: 22, flexShrink: 0,
+          fontSize: 20, flexShrink: 0,
         }}>{p.emoji}</div>
         <div style={{ minWidth: 0, flex: 1 }}>
           <div style={{
             fontSize: 13, fontWeight: 500, color: 'var(--momo-text-primary)',
-            lineHeight: 1.4, marginBottom: 2,
+            lineHeight: 1.4, marginBottom: 3,
             display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden',
           }}>{p.name}</div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
-            <span className="momo-mono">ID: {p.id}</span>
+            <span className="momo-mono">#{p.id}</span>
-            <span style={{ width: 14, height: 14, color: 'var(--momo-text-tertiary)', display: 'inline-flex' }}>
-              <Icon name="copy" size={11} />
-            </span>
             {p.new && <Tag tone="info">NEW</Tag>}
             {p.delisted && <Tag tone="warning">下架</Tag>}
             {p.up && <Tag tone="danger">漲價</Tag>}
@@ -345,7 +527,7 @@ const CampaignProductRow = ({ p, isFlash, idx }) => (
     <td style={{ padding: '14px 16px', textAlign: 'right' }}>
       {p.up && p.change ? (
         <div>
-          <div className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-danger)', fontWeight: 600, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 4 }}>
+          <div className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-danger)', fontWeight: 700, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 4 }}>
             <span style={{ fontSize: 9 }}>▲</span> +${p.change} ({p.changePct}%)
           </div>
           <div className="momo-mono" style={{ marginTop: 2, display: 'flex', justifyContent: 'flex-end', alignItems: 'baseline', gap: 6 }}>
@@ -366,58 +548,69 @@ const CampaignProductRow = ({ p, isFlash, idx }) => (
     <td style={{ padding: '14px 16px', textAlign: 'right' }}>
       {isFlash && p.limit ? (
         <span className="momo-mono" style={{
-          display: 'inline-flex', alignItems: 'center', gap: 4,
+          display: 'inline-flex', alignItems: 'center', gap: 6,
           padding: '4px 10px',
-          background: 'linear-gradient(135deg, #fef3c7 0%, #fde68a 100%)',
+          background: 'var(--momo-accent-soft)',
-          color: '#7a4f01', border: '1px solid #f9d77a',
+          color: 'var(--momo-accent-700)',
-          borderRadius: 12, fontSize: 12, fontWeight: 700,
+          border: '1px solid var(--momo-accent-200)',
+          borderRadius: 2, fontSize: 11, fontWeight: 700,
+          letterSpacing: '0.04em',
         }}>
-          🔥 {p.limit}組
+          <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--momo-accent)', animation: 'momo-pulse-dot 1.4s ease-in-out infinite' }} />
+          {p.limit} 組
         </span>
       ) : p.off ? (
         <Tag tone="danger">{p.off}</Tag>
       ) : (
-        <span style={{
+        <span className="momo-mono" style={{
           display: 'inline-flex', alignItems: 'center',
-          padding: '3px 10px',
+          padding: '3px 8px',
           background: 'var(--momo-bg-subtle)', color: 'var(--momo-text-secondary)',
-          borderRadius: 12, fontSize: 11, fontWeight: 500,
+          borderRadius: 2, fontSize: 11, fontWeight: 500,
         }}>{p.status || '活動中'}</span>
       )}
     </td>
   </tr>
 );
 
+// ===== 商品列表（黑色表頭 mono — 對齊 dashboard） =====
 const CampaignProductTable = ({ products, total, isFlash }) => (
-  <Card cardStyle="flat" padding={false} style={{
+  <div style={{
     background: 'var(--momo-bg-surface)',
-    border: '1px solid var(--momo-border-light)', borderRadius: 8,
+    border: '1px solid var(--momo-border-light)', borderRadius: 8, overflow: 'hidden',
   }}>
     <div style={{
       padding: '14px 20px', borderBottom: '1px solid var(--momo-border-light)',
       display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
+      background: 'var(--momo-bg-paper)',
     }}>
-      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)' }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
-        商品列表 <span style={{ fontWeight: 500, color: 'var(--momo-text-secondary)' }}>({total.toLocaleString()} 筆)</span>
+        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)' }}>商品列表</span>
+        <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
+          {total.toLocaleString()} 筆
+        </span>
       </div>
       <div style={{ flex: 1 }} />
       <Button variant="secondary" size="sm" icon="download">匯出</Button>
     </div>
     <div style={{ overflowX: 'auto' }}>
-      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'var(--momo-font-size-sm)' }}>
+      <table className="camp-table" style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'var(--momo-font-size-sm)' }}>
         <thead>
-          <tr style={{ background: 'linear-gradient(90deg, #6c5ce7 0%, #5a4cdb 100%)', color: '#fff' }}>
+          <tr style={{ background: 'var(--momo-ink)', color: '#faf7f0' }}>
             {[
-              { label: '分類', w: 140 },
+              { label: '分類', sub: 'CATEGORY', w: 140 },
-              { label: '商品資訊' },
+              { label: '商品資訊', sub: 'PRODUCT' },
-              { label: '價格', w: 150, align: 'right' },
+              { label: '價格', sub: 'PRICE', w: 160, align: 'right' },
-              { label: isFlash ? '倒數組數' : '狀態', w: 130, align: 'right' },
+              { label: isFlash ? '倒數組數' : '狀態', sub: isFlash ? 'LIMIT' : 'STATUS', w: 130, align: 'right' },
             ].map((h, i) => (
-              <th key={i} style={{
+              <th key={i} className={i === 0 ? 'camp-th-cat' : ''} style={{
                 padding: '12px 16px', textAlign: h.align || 'left', width: h.w,
-                fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap',
+                fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
+                fontFamily: 'var(--momo-font-family-mono)',
+                letterSpacing: '0.08em',
               }}>
-                {h.label} <span style={{ fontSize: 9, opacity: 0.7, marginLeft: 2 }}>↕</span>
+                <div style={{ fontSize: 9, opacity: 0.5, marginBottom: 1 }}>{h.sub}</div>
+                <div style={{ fontFamily: 'var(--momo-font-family-base)', letterSpacing: 0, fontWeight: 700, fontSize: 12 }}>{h.label}</div>
               </th>
             ))}
           </tr>
@@ -427,11 +620,11 @@ const CampaignProductTable = ({ products, total, isFlash }) => (
         </tbody>
       </table>
     </div>
-  </Card>
+  </div>
 );
 
 // ===== Page =====
-const CampaignsPage = ({ density = 'comfortable' }) => {
+const CampaignsPage = ({ density = 'comfortable', heroVariant = 'simple' }) => {
   const D = EWOOOC_DATA.campaigns;
   const [active, setActive] = React.useState('flash');
   const [catIdx, setCatIdx] = React.useState(null);
@@ -439,25 +632,50 @@ const CampaignsPage = ({ density = 'comfortable' }) => {
 
   React.useEffect(() => { setCatIdx(null); }, [active]);
 
+  const HeroComp = heroVariant === 'dotted' ? HeroDotted
+                  : heroVariant === 'inverse' ? HeroInverse
+                  : HeroSimple;
+
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+    <div className="camp-page" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {/* 活動切換 */}
       <CampaignSwitcher active={active} setActive={setActive} campaigns={D} />
 
-      {/* Hero 雙欄 */}
+      {/* 01 - Hero */}
-      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
+      <div>
-        <CampaignHero c={c} activeId={active} />
+        <CampSectionLabel num="01" sub="活動主資訊">活動概覽</CampSectionLabel>
+        <HeroComp c={c} activeId={active} />
+      </div>
+
+      {/* 02 - KPIs */}
+      <div>
+        <CampSectionLabel num="02" sub={`排程 · ${c.schedule.lastRun}`}>活動數據</CampSectionLabel>
         <CampaignKPIs stats={c.stats} schedule={c.schedule} />
       </div>
 
-      {/* 時段時間軸（僅限時搶購） */}
+      {/* 03 - 時段排程（限時搶購） */}
-      {c.timeSlots && <TimeSlotTimeline slots={c.timeSlots} />}
+      {c.timeSlots && (
+        <div>
+          <CampSectionLabel num="03" sub={`24H · ${c.timeSlots.reduce((a,b)=>a+b.count,0)} 件`}>時段排程</CampSectionLabel>
+          <TimeSlotTimeline slots={c.timeSlots} />
+        </div>
+      )}
 
-      {/* 分類 chips */}
+      {/* 04 - 分類 */}
-      {c.categories && <CategoryChips cats={c.categories} activeIdx={catIdx} setActive={setCatIdx} />}
+      {c.categories && (
+        <div>
+          <CampSectionLabel num={c.timeSlots ? '04' : '03'} sub={`${c.categories.length} 個分類`}>分類篩選</CampSectionLabel>
+          <CategoryChips cats={c.categories} activeIdx={catIdx} setActive={setCatIdx} />
+        </div>
+      )}
 
-      {/* 商品列表 */}
+      {/* 05 - 商品列表 */}
-      <CampaignProductTable products={c.products} total={c.total} isFlash={active === 'flash'} />
+      <div>
+        <CampSectionLabel
+          num={c.timeSlots && c.categories ? '05' : c.categories ? '04' : '03'}
+          sub={`${c.products.length} / ${c.total.toLocaleString()} 筆`}
+        >商品列表</CampSectionLabel>
+        <CampaignProductTable products={c.products} total={c.total} isFlash={active === 'flash'} />
+      </div>
     </div>
   );
 };

MOMO Pro/app/page-dashboard.jsx

@@ -2,66 +2,102 @@
 
 // ===== 編號標籤（呼應 sidebar 的 01/02/03） =====
 const SectionLabel = ({ num, children, sub }) => (
-  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
+  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
     <span className="momo-mono" style={{
-      fontSize: 11, fontWeight: 700, color: 'var(--momo-text-tertiary)',
+      fontSize: 12, fontWeight: 700, color: 'var(--momo-text-secondary)',
       letterSpacing: '0.08em',
     }}>{num}</span>
-    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--momo-text-primary)', letterSpacing: '0.02em' }}>
+    <span aria-hidden="true" style={{
+      flex: '0 0 56px', height: 6, alignSelf: 'center',
+      backgroundImage: 'radial-gradient(circle, var(--momo-text-tertiary) 1px, transparent 1px)',
+      backgroundSize: '6px 6px',
+      opacity: 0.5,
+    }} />
+    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)', letterSpacing: '0.01em' }}>
       {children}
     </span>
     {sub && (
-      <span className="momo-mono" style={{ fontSize: 10, color: 'var(--momo-text-tertiary)', marginLeft: 'auto' }}>
+      <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)', marginLeft: 'auto' }}>
         {sub}
       </span>
     )}
   </div>
 );
 
-// ===== KPI 大數字（4 顆並排，扁平、靠線分隔） =====
+// ===== KPI 大數字（6 顆並排，對齊正式環境） =====
-const KPIRow = ({ stats, dynamics }) => {
+const KPIRow = ({ stats, dynamics, onAiClick }) => {
   const items = [
-    { label: '監控總數', value: stats.total.toLocaleString(), sub: `本週 +${stats.weekGrowth}` },
+    { label: '比價覆蓋率', value: '31.5%',                       sub: `${(2121).toLocaleString()} / ${stats.total.toLocaleString()} ACTIVE`, tone: 'caramel' },
-    { label: '今日變動', value: dynamics.activeCount,         sub: `活躍度 ${dynamics.activity}%`, accent: true },
+    { label: 'PChome 領先', value: 784,                          sub: '平均壓低 +12.0%',                                                    tone: 'ink', accent: true },
-    { label: '漲價',     value: dynamics.priceUp,             sub: `平均 +$${dynamics.avgUp}`,  tone: 'danger' },
+    { label: 'MOMO 領先',  value: 952,                           sub: 'MOMO 價格低於 PChome' },
-    { label: '降價',     value: dynamics.priceDown,           sub: `平均 -$${Math.abs(dynamics.avgDown)}`, tone: 'success' },
+    { label: 'AI 挑品',    value: 50,                            sub: '查看 50 項清單',                                                     tone: 'honey', interactive: true, action: 'ai' },
+    { label: '待比對',     value: '4,615',                       sub: '高優先級盡快比對' },
+    { label: '資料新鮮度', value: '已更新',                      sub: `2026-05-01 06:52`,                                                   tone: 'success' },
   ];
-  const toneColor = (t) => t === 'danger' ? 'var(--momo-danger)' : t === 'success' ? 'var(--momo-success)' : 'var(--momo-text-primary)';
+  const colorMap = {
+    caramel: 'var(--momo-warm-caramel)',
+    honey:   'var(--momo-warm-honey)',
+    rust:    'var(--momo-warm-rust)',
+    success: 'var(--momo-success)',
+  };
 
   return (
-    <div style={{
+    <div className="dash-kpis" style={{
-      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
+      display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
       background: 'var(--momo-bg-surface)',
       border: '1px solid var(--momo-border-light)',
       borderRadius: 8, overflow: 'hidden',
     }}>
       {items.map((it, i) => (
-        <div key={i} style={{
+        <div key={i}
-          padding: '20px 24px',
+          onClick={it.interactive && it.action === 'ai' ? () => onAiClick && onAiClick() : undefined}
+          role={it.interactive ? 'button' : undefined}
+          tabIndex={it.interactive ? 0 : undefined}
+          style={{
+          padding: '18px 20px',
           borderRight: i < items.length - 1 ? '1px solid var(--momo-border-light)' : 'none',
           background: it.accent ? 'var(--momo-ink)' : 'transparent',
           color: it.accent ? '#faf7f0' : 'inherit',
           position: 'relative',
-        }}>
+          overflow: 'hidden',
+          cursor: it.interactive ? 'pointer' : 'default',
+          transition: 'var(--momo-transition-base)',
+        }}
+        onMouseEnter={it.interactive ? (e => e.currentTarget.style.background = it.accent ? 'var(--momo-ink-soft)' : 'var(--momo-bg-paper)') : undefined}
+        onMouseLeave={it.interactive ? (e => e.currentTarget.style.background = it.accent ? 'var(--momo-ink)' : 'transparent') : undefined}>
+          {/* 點陣背景：深色卡濃一點，淺色卡淡一點當紋理 */}
+          <div className={it.accent ? 'momo-dot-bg' : 'momo-dot-bg-dark'}
+            style={{
+              position: 'absolute', inset: 0, pointerEvents: 'none',
+              opacity: it.accent ? 0.55 : 0.35,
+            }} />
+          <div style={{ position: 'relative' }}>
           <div className="momo-mono" style={{
-            fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
+            fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
-            color: it.accent ? 'rgba(250,247,240,0.6)' : 'var(--momo-text-tertiary)',
+            color: it.accent ? 'rgba(250,247,240,0.65)' : 'var(--momo-text-secondary)',
-            textTransform: 'uppercase', marginBottom: 10,
+            textTransform: 'uppercase', marginBottom: 12,
           }}>
             {it.label}
           </div>
-          <div className="momo-mono" style={{
+          <div className="momo-mono dash-kpi-num" style={{
-            fontSize: 44, fontWeight: 700,
+            fontSize: 32, fontWeight: 700,
-            color: it.accent ? '#faf7f0' : toneColor(it.tone),
+            color: it.accent ? '#faf7f0' : (colorMap[it.tone] || 'var(--momo-text-primary)'),
-            letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8,
+            letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 10,
           }}>
             {typeof it.value === 'number' ? it.value.toLocaleString() : it.value}
           </div>
           <div className="momo-mono" style={{
-            fontSize: 11,
+            fontSize: 12,
-            color: it.accent ? 'rgba(250,247,240,0.7)' : 'var(--momo-text-secondary)',
+            color: it.accent ? 'rgba(250,247,240,0.75)' : 'var(--momo-text-secondary)',
+            lineHeight: 1.4,
           }}>
-            {it.sub}
+            {it.sub}{it.interactive && (
+              <span aria-hidden="true" style={{
+                marginLeft: 6, opacity: 0.6,
+                fontSize: 10, fontFamily: 'var(--momo-font-family-mono)',
+              }}>↗</span>
+            )}
+          </div>
           </div>
         </div>
       ))}
@@ -71,58 +107,58 @@ const KPIRow = ({ stats, dynamics }) => {
 
 // ===== 焦點 + 排程（雙欄，安靜版） =====
 const FocusRow = ({ dynamics, schedule, stats }) => (
-  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
+  <div className="dash-focus" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
     {/* 最活躍分類 */}
     <div style={{
-      padding: 18, background: 'var(--momo-bg-surface)',
+      padding: 16, background: 'var(--momo-bg-surface)',
       border: '1px solid var(--momo-border-light)', borderRadius: 8,
     }}>
       <div className="momo-mono" style={{
-        fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
+        fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
-        color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 8,
+        color: 'var(--momo-text-secondary)', textTransform: 'uppercase', marginBottom: 10,
       }}>最活躍分類</div>
-      <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--momo-text-primary)', marginBottom: 4, lineHeight: 1.3 }}>
+      <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--momo-text-primary)', marginBottom: 6, lineHeight: 1.3 }}>
         {dynamics.hottestCategory}
       </div>
-      <div className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>
+      <div className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
         {dynamics.hottestCount} 件商品變動
       </div>
     </div>
 
     {/* 最大變動 */}
     <div style={{
-      padding: 18, background: 'var(--momo-bg-surface)',
+      padding: 16, background: 'var(--momo-bg-surface)',
       border: '1px solid var(--momo-border-light)', borderRadius: 8,
     }}>
       <div className="momo-mono" style={{
-        fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
+        fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
-        color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 8,
+        color: 'var(--momo-text-secondary)', textTransform: 'uppercase', marginBottom: 10,
       }}>最大變動</div>
       <div className="momo-mono" style={{
-        fontSize: 24, fontWeight: 700, color: 'var(--momo-danger)',
+        fontSize: 26, fontWeight: 700, color: 'var(--momo-warm-rust)',
-        letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6,
+        letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 8,
       }}>
         +${dynamics.biggestChange.amount.toLocaleString()}
       </div>
       <div style={{
-        fontSize: 11, color: 'var(--momo-text-secondary)',
+        fontSize: 13, color: 'var(--momo-text-secondary)', lineHeight: 1.4,
         display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden',
       }}>{dynamics.biggestChange.product}</div>
     </div>
 
     {/* 爬蟲排程 */}
     <div style={{
-      padding: 18, background: 'var(--momo-bg-surface)',
+      padding: 16, background: 'var(--momo-bg-surface)',
       border: '1px solid var(--momo-border-light)', borderRadius: 8,
     }}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
         <span className="momo-mono" style={{
-          fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
+          fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
-          color: 'var(--momo-text-tertiary)', textTransform: 'uppercase',
+          color: 'var(--momo-text-secondary)', textTransform: 'uppercase',
         }}>爬蟲排程</span>
         <span style={{
-          display: 'inline-flex', alignItems: 'center', gap: 4,
+          display: 'inline-flex', alignItems: 'center', gap: 5,
-          fontSize: 10, fontWeight: 700,
+          fontSize: 11, fontWeight: 700,
           color: 'var(--momo-success)',
           fontFamily: 'var(--momo-font-family-mono)',
         }}>
@@ -131,10 +167,10 @@ const FocusRow = ({ dynamics, schedule, stats }) => (
         </span>
       </div>
       <div className="momo-mono" style={{
-        fontSize: 24, fontWeight: 700, color: 'var(--momo-text-primary)',
+        fontSize: 22, fontWeight: 700, color: 'var(--momo-text-primary)',
-        letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6,
+        letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 8,
       }}>{schedule.lastRun}</div>
-      <div className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>
+      <div className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
         掃描 {schedule.scanned.toLocaleString()} 筆 · 新增 +{schedule.added}
       </div>
     </div>
@@ -145,6 +181,7 @@ const FocusRow = ({ dynamics, schedule, stats }) => (
 const FilterBar = ({ search, setSearch, category, setCategory, tab, setTab }) => {
   const tabs = [
     { id: 'all',  label: '全部' },
+    { id: 'ai',   label: 'AI 挑品' },
     { id: 'new',  label: '新上架' },
     { id: 'up',   label: '漲價' },
     { id: 'down', label: '降價' },
@@ -221,8 +258,59 @@ const ChangeCell = ({ value }) => {
   );
 };
 
-// ===== 商品列表（黑色表頭、Mono、安靜） =====
+// ===== Helper：模擬 PChome 價格與警報判斷（接真資料前的 placeholder） =====
-const ProductTable = ({ products, total, schedule, onRowClick }) => (
+const mockPchomePrice = (p) => {
+  const seed = parseInt(String(p.id).slice(-3), 10) || 0;
+  const offset = ((seed % 11) - 5) * 0.04; // ±20% 區間
+  const v = Math.round(p.price * (1 + offset));
+  if (seed % 7 === 0) return null; // 部分商品標「待比對」
+  return v;
+};
+const judgeAlert = (momo, pchome) => {
+  if (pchome == null) return { tone: 'muted', label: '待比對', sub: '無 PChome 資料' };
+  const diff = momo - pchome;
+  const pct = (diff / pchome) * 100;
+  if (Math.abs(pct) < 1) return { tone: 'earth', label: '價格相近', sub: `差 $${Math.abs(diff)}` };
+  if (pct < 0) return { tone: 'caramel', label: 'MOMO 較低', sub: `領先 $${Math.abs(diff)} (${pct.toFixed(1)}%)` };
+  return { tone: 'rust', label: 'MOMO 偏高', sub: `落後 $${diff} (+${pct.toFixed(1)}%)` };
+};
+
+// ===== 雙平台價格對比卡（業界主流：主價大 + 對比價小一階 + 差額標示） =====
+const PriceCompareCell = ({ momo, pchome }) => {
+  const lower = pchome != null && pchome < momo;
+  const higher = pchome != null && pchome > momo;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
+      {/* MOMO 主價 */}
+      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
+        <span className="momo-mono" style={{ fontSize: 10, fontWeight: 700, color: 'var(--momo-warm-caramel)', letterSpacing: '0.08em' }}>MOMO</span>
+        <span className="momo-mono" style={{
+          fontSize: 15, fontWeight: 700,
+          color: higher ? 'var(--momo-warm-rust)' : 'var(--momo-text-primary)',
+        }}>${momo.toLocaleString()}</span>
+      </div>
+      {/* PChome 對比價 */}
+      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
+        <span className="momo-mono" style={{ fontSize: 10, fontWeight: 700, color: 'var(--momo-text-tertiary)', letterSpacing: '0.08em' }}>PChome</span>
+        {pchome != null ? (
+          <span className="momo-mono" style={{
+            fontSize: 13, fontWeight: 600,
+            color: lower ? 'var(--momo-warm-caramel)' : 'var(--momo-text-secondary)',
+          }}>${pchome.toLocaleString()}</span>
+        ) : (
+          <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-tertiary)' }}>—</span>
+        )}
+      </div>
+    </div>
+  );
+};
+const ProductTable = ({ products, total, schedule, onRowClick }) => {
+  const PER_PAGE = 50;
+  const [page, setPage] = React.useState(1);
+  React.useEffect(() => { setPage(1); }, [products.length]);
+  const totalPages = Math.max(1, Math.ceil(products.length / PER_PAGE));
+  const visible = products.slice((page - 1) * PER_PAGE, page * PER_PAGE);
+  return (
   <div style={{
     background: 'var(--momo-bg-surface)',
     border: '1px solid var(--momo-border-light)', borderRadius: 8, overflow: 'hidden',
@@ -233,15 +321,15 @@ const ProductTable = ({ products, total, schedule, onRowClick }) => (
     }}>
       <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
         <span className="momo-mono" style={{
-          fontSize: 11, fontWeight: 700, color: 'var(--momo-text-tertiary)', letterSpacing: '0.08em',
+          fontSize: 12, fontWeight: 700, color: 'var(--momo-text-secondary)', letterSpacing: '0.08em',
         }}>04</span>
         <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)' }}>商品列表</span>
-        <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-tertiary)' }}>
+        <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
           {total.toLocaleString()} 筆
         </span>
       </div>
       <span style={{ width: 1, height: 14, background: 'var(--momo-border-light)' }} />
-      <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+      <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
         <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--momo-success)' }} />
         排程 {schedule.lastRun} · 掃描 {schedule.scanned.toLocaleString()} · 新增 +{schedule.added}
       </span>
@@ -254,18 +342,18 @@ const ProductTable = ({ products, total, schedule, onRowClick }) => (
         <thead>
           <tr style={{ background: 'var(--momo-bg-paper)', borderBottom: '1px solid var(--momo-border-light)' }}>
             {[
-              { label: '分類',     w: 130 },
+              { label: '分類',     w: 120 },
               { label: '商品名稱' },
-              { label: '當天價格', w: 120, align: 'right' },
+              { label: '雙平台價格', w: 180, align: 'right' },
-              { label: '昨日漲跌', w: 110, align: 'right' },
+              { label: '警報判斷',   w: 150 },
-              { label: '週漲跌',   w: 110, align: 'right' },
+              { label: '昨日',     w: 90, align: 'right' },
-              { label: '更新時間', w: 120, align: 'right' },
+              { label: '本週',     w: 90, align: 'right' },
-              { label: '上架時間', w: 110, align: 'right' },
+              { label: '更新時間', w: 110, align: 'right' },
             ].map((h, i) => (
               <th key={i} style={{
-                padding: '10px 16px', textAlign: h.align || 'left', width: h.w,
+                padding: '11px 16px', textAlign: h.align || 'left', width: h.w,
-                fontSize: 10, fontWeight: 700, whiteSpace: 'nowrap',
+                fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
-                color: 'var(--momo-text-tertiary)',
+                color: 'var(--momo-text-secondary)',
                 fontFamily: 'var(--momo-font-family-mono)',
                 letterSpacing: '0.08em', textTransform: 'uppercase',
               }}>
@@ -276,23 +364,26 @@ const ProductTable = ({ products, total, schedule, onRowClick }) => (
           </tr>
         </thead>
         <tbody>
-          {products.map((p, idx) => (
+          {visible.map((p, idx) => {
+            const pchome = mockPchomePrice(p);
+            const alert = judgeAlert(p.price, pchome);
+            return (
             <tr key={p.id} onClick={() => onRowClick && onRowClick(p)}
                 style={{
                   borderTop: idx === 0 ? 'none' : '1px solid var(--momo-border-light)',
                   cursor: 'pointer', transition: 'var(--momo-transition-base)',
+                  boxShadow: 'inset 0 0 0 0 var(--momo-warm-caramel)',
                 }}
-                onMouseEnter={e => e.currentTarget.style.background = 'var(--momo-bg-paper)'}
+                onMouseEnter={e => {
-                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
+                  e.currentTarget.style.background = 'var(--momo-bg-paper)';
+                  e.currentTarget.style.boxShadow = 'inset 3px 0 0 0 var(--momo-warm-caramel)';
+                }}
+                onMouseLeave={e => {
+                  e.currentTarget.style.background = 'transparent';
+                  e.currentTarget.style.boxShadow = 'inset 0 0 0 0 var(--momo-warm-caramel)';
+                }}>
               <td style={{ padding: '14px 16px' }}>
-                <span style={{
+                <Tag tone="earth" size="sm">{p.category}</Tag>
-                  display: 'inline-block', padding: '2px 8px', fontSize: 11,
-                  background: 'var(--momo-bg-paper)',
-                  border: '1px solid var(--momo-border-light)',
-                  color: 'var(--momo-text-secondary)',
-                  borderRadius: 3, whiteSpace: 'nowrap',
-                  fontFamily: 'var(--momo-font-family-base)',
-                }}>{p.category}</span>
               </td>
               <td style={{ padding: '14px 16px' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
@@ -304,38 +395,154 @@ const ProductTable = ({ products, total, schedule, onRowClick }) => (
                   }}>{p.emoji}</div>
                   <div style={{ minWidth: 0, flex: 1 }}>
                     <div style={{
-                      fontSize: 13, fontWeight: 500, color: 'var(--momo-text-primary)',
+                      fontSize: 14, fontWeight: 500, color: 'var(--momo-text-primary)',
-                      lineHeight: 1.4, marginBottom: 2,
+                      lineHeight: 1.4, marginBottom: 3,
                       display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden',
                     }}>{p.name}</div>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--momo-text-secondary)' }}>
                       <span className="momo-mono">ID · {p.id}</span>
-                      <span style={{ width: 12, height: 12, color: 'var(--momo-text-tertiary)', display: 'inline-flex' }}>
-                        <Icon name="copy" size={10} />
-                      </span>
                     </div>
                   </div>
                 </div>
               </td>
               <td style={{ padding: '14px 16px', textAlign: 'right' }}>
-                <span className="momo-mono" style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)' }}>
+                <PriceCompareCell momo={p.price} pchome={pchome} />
-                  ${p.price.toLocaleString()}
+              </td>
-                </span>
+              <td style={{ padding: '14px 16px', minWidth: 140 }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'flex-start', whiteSpace: 'nowrap' }}>
+                  <Tag tone={alert.tone} size="sm">{alert.label}</Tag>
+                  <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>{alert.sub}</span>
+                </div>
               </td>
               <td style={{ padding: '14px 16px', textAlign: 'right' }}><ChangeCell value={p.yesterdayChange} /></td>
               <td style={{ padding: '14px 16px', textAlign: 'right' }}><ChangeCell value={p.weekChange} /></td>
-              <td style={{ padding: '14px 16px', textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 11, color: 'var(--momo-text-secondary)' }}>{p.updatedAt}</td>
+              <td style={{ padding: '14px 16px', textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 12, color: 'var(--momo-text-secondary)' }}>{p.updatedAt}</td>
-              <td style={{ padding: '14px 16px', textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 11, color: 'var(--momo-text-tertiary)' }}>{p.listedAt}</td>
             </tr>
-          ))}
+            );
+          })}
         </tbody>
       </table>
     </div>
+    {/* 分頁器 */}
+    {products.length > 0 && (
+      <div style={{
+        padding: '10px 20px', borderTop: '1px solid var(--momo-border-light)',
+        display: 'flex', alignItems: 'center', gap: 12,
+        background: 'var(--momo-bg-paper)',
+      }}>
+        <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
+          {((page - 1) * PER_PAGE + 1).toLocaleString()}–{Math.min(page * PER_PAGE, products.length).toLocaleString()} · 共 {products.length.toLocaleString()} 筆
+        </span>
+        <div style={{ flex: 1 }} />
+        <div style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
+          <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} style={{
+            padding: '5px 10px', fontSize: 12, fontWeight: 600,
+            background: 'var(--momo-bg-surface)', border: '1px solid var(--momo-border-light)',
+            borderRadius: 4, color: page === 1 ? 'var(--momo-text-tertiary)' : 'var(--momo-text-primary)',
+            cursor: page === 1 ? 'not-allowed' : 'pointer',
+            fontFamily: 'var(--momo-font-family-mono)',
+          }}>‹ 上一頁</button>
+          <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)', padding: '0 8px' }}>
+            {page} / {totalPages}
+          </span>
+          <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages} style={{
+            padding: '5px 10px', fontSize: 12, fontWeight: 600,
+            background: 'var(--momo-bg-surface)', border: '1px solid var(--momo-border-light)',
+            borderRadius: 4, color: page === totalPages ? 'var(--momo-text-tertiary)' : 'var(--momo-text-primary)',
+            cursor: page === totalPages ? 'not-allowed' : 'pointer',
+            fontFamily: 'var(--momo-font-family-mono)',
+          }}>下一頁 ›</button>
+        </div>
+      </div>
+    )}
   </div>
-);
+  );
+};
+
+// ===== 比價決策焦點（3 欄商品卡片） =====
+const FocusCard = ({ title, badge, products, accentTone = 'caramel' }) => {
+  const accentColor = {
+    caramel: 'var(--momo-warm-caramel)',
+    rust:    'var(--momo-warm-rust)',
+    honey:   'var(--momo-warm-honey)',
+  }[accentTone] || 'var(--momo-warm-caramel)';
+  return (
+  <div style={{
+    background: 'var(--momo-bg-surface)',
+    border: '1px solid var(--momo-border-light)',
+    borderRadius: 8, overflow: 'hidden',
+    display: 'flex', flexDirection: 'column',
+    position: 'relative',
+  }}>
+    {/* 左上 accent 條 */}
+    <span aria-hidden="true" style={{
+      position: 'absolute', top: 0, left: 0, width: 3, height: 36,
+      background: accentColor,
+    }} />
+    {/* 微點陣 */}
+    <div className="momo-dot-bg-dark" aria-hidden="true" style={{
+      position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none',
+    }} />
+    <div style={{
+      padding: '12px 16px', borderBottom: '1px solid var(--momo-border-light)',
+      display: 'flex', alignItems: 'center', gap: 8, background: 'var(--momo-bg-paper)',
+      position: 'relative',
+    }}>
+      <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--momo-text-primary)' }}>{title}</span>
+      {badge && <Tag tone={accentTone} size="sm">{badge}</Tag>}
+    </div>
+    <div style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}>
+      {products.map((it, i) => {
+        const pchome = mockPchomePrice(it);
+        const a = judgeAlert(it.price, pchome);
+        return (
+          <div key={i} style={{
+            padding: '12px 16px',
+            borderTop: i === 0 ? 'none' : '1px solid var(--momo-border-light)',
+            display: 'flex', flexDirection: 'column', gap: 6,
+          }}>
+            <div style={{
+              fontSize: 13, fontWeight: 500, color: 'var(--momo-text-primary)',
+              lineHeight: 1.4,
+              display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
+            }}>{it.name}</div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+              <Tag tone={a.tone} size="xs">{a.label}</Tag>
+              <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>
+                MOMO ${it.price.toLocaleString()}{pchome != null && ` · PChome $${pchome.toLocaleString()}`}
+              </span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <Tag tone="ink" size="xs" mono>MOMO {it.id}</Tag>
+              <Tag tone="muted" size="xs" mono>PChome {pchome != null ? 'OK' : '待比對'}</Tag>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  </div>
+  );
+};
+
+const FocusFocusRow = ({ products }) => {
+  const sorted = [...products];
+  const todayDeals = sorted.filter(p => p.yesterdayChange != null && p.yesterdayChange < 0).slice(0, 3);
+  const volatile   = [...sorted].sort((a,b) => Math.abs(b.weekChange||0) - Math.abs(a.weekChange||0)).slice(0, 3);
+  const restock    = sorted.filter(p => p.isNew || (p.yesterdayChange != null && p.yesterdayChange > 0)).slice(0, 3);
+
+  const fb = (arr) => arr.length ? arr : sorted.slice(0, 3);
+
+  return (
+    <div className="dash-focus" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
+      <FocusCard title="今日優惠先銷" badge="降價"     products={fb(todayDeals)} accentTone="caramel" />
+      <FocusCard title="價格波動"     badge="重點關注" products={fb(volatile)}   accentTone="rust" />
+      <FocusCard title="補貨補先"     badge="新動向"   products={fb(restock)}    accentTone="honey" />
+    </div>
+  );
+};
 
 // ===== Page =====
-const DashboardPage = ({ density = 'comfortable' }) => {
+const DashboardPage = ({ density = 'comfortable', onProductClick }) => {
   const D = EWOOOC_DATA;
   const m = { ...D.monitorStats, stableCount: D.monitorStats.stableCount ?? 869 };
   const p = D.priceDynamics;
@@ -343,6 +550,16 @@ const DashboardPage = ({ density = 'comfortable' }) => {
   const [search, setSearch] = React.useState('');
   const [category, setCategory] = React.useState('all');
   const [tab, setTab] = React.useState('all');
+  const listRef = React.useRef(null);
+  const handleAiClick = () => {
+    setTab('ai');
+    requestAnimationFrame(() => {
+      const el = listRef.current;
+      if (!el) return;
+      const main = el.closest('main');
+      if (main) main.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' });
+    });
+  };
 
   const filtered = D.products.filter(x => {
     if (category !== 'all' && x.category !== category) return false;
@@ -350,32 +567,39 @@ const DashboardPage = ({ density = 'comfortable' }) => {
     if (tab === 'up'   && !(x.yesterdayChange > 0)) return false;
     if (tab === 'down' && !(x.yesterdayChange < 0 || x.weekChange < 0)) return false;
     if (tab === 'new'  && !x.isNew) return false;
+    if (tab === 'ai'   && !((parseInt(String(x.id).slice(-1), 10) || 0) % 3 === 0)) return false;
     return true;
   });
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+    <div className="dash-page" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
       {/* 區塊 1：KPI 一排 */}
       <section>
-        <SectionLabel num="01" sub="LIVE · 更新於 12:54">監控總覽</SectionLabel>
+        <SectionLabel num="01" sub="LIVE · 更新於 12:54">比價監控總覽</SectionLabel>
-        <KPIRow stats={m} dynamics={p} />
+        <KPIRow stats={m} dynamics={p} onAiClick={handleAiClick} />
       </section>
 
-      {/* 區塊 2：焦點數據 */}
+      {/* 區塊 2：焦點數據（保留現況） */}
       <section>
         <SectionLabel num="02" sub="今日">焦點數據</SectionLabel>
         <FocusRow dynamics={p} schedule={D.schedule} stats={m} />
       </section>
 
-      {/* 區塊 3：篩選 + 列表 */}
+      {/* 區塊 3：比價決策焦點（新增） */}
-      <section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <section>
-        <SectionLabel num="03" sub={`${filtered.length} / ${m.total.toLocaleString()}`}>商品列表</SectionLabel>
+        <SectionLabel num="03" sub={`${D.products.length} 項候選`}>比價決策焦點</SectionLabel>
+        <FocusFocusRow products={D.products} />
+      </section>
+
+      {/* 區塊 4：篩選 + 列表 */}
+      <section ref={listRef} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <SectionLabel num="04" sub={`${filtered.length} / ${m.total.toLocaleString()}`}>商品列表</SectionLabel>
         <FilterBar
           search={search} setSearch={setSearch}
           category={category} setCategory={setCategory}
           tab={tab} setTab={setTab}
         />
-        <ProductTable products={filtered} total={m.total} schedule={D.schedule} />
+        <ProductTable products={filtered} total={m.total} schedule={D.schedule} onRowClick={onProductClick} />
       </section>
     </div>
   );

MOMO Pro/app/page-products.jsx

@@ -125,16 +125,7 @@ const ProductsPage = ({ density = 'comfortable', cardStyle = 'flat', buttonStyle
                     #{p.id}
                   </td>
                   <td style={{ padding: rowPad }}>
-                    <span style={{
+                    <Tag tone="earth" size="sm">{p.category}</Tag>
-                      display: 'inline-block',
-                      padding: '2px 8px',
-                      fontSize: 11,
-                      fontFamily: 'var(--momo-font-family-mono)',
-                      background: 'var(--momo-bg-subtle)',
-                      color: 'var(--momo-text-secondary)',
-                      borderRadius: 2,
-                      whiteSpace: 'nowrap',
-                    }}>{p.category}</span>
                   </td>
                   <td style={{ padding: rowPad }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
@@ -144,12 +135,12 @@ const ProductsPage = ({ density = 'comfortable', cardStyle = 'flat', buttonStyle
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
                         fontSize: 18, flexShrink: 0,
                       }}>{p.emoji}</div>
-                      <span style={{ fontWeight: 500, color: 'var(--momo-text-primary)', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                      <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--momo-text-primary)', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                         {p.name}
                       </span>
                     </div>
                   </td>
-                  <td style={{ padding: rowPad, textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontWeight: 700, color: 'var(--momo-text-primary)' }}>
+                  <td style={{ padding: rowPad, textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 15, fontWeight: 700, color: 'var(--momo-text-primary)' }}>
                     ${p.price.toLocaleString()}
                   </td>
                   <td style={{ padding: rowPad, textAlign: 'right' }}>
@@ -158,10 +149,10 @@ const ProductsPage = ({ density = 'comfortable', cardStyle = 'flat', buttonStyle
                   <td style={{ padding: rowPad, textAlign: 'right' }}>
                     <ChangeCell value={p.weekChange} />
                   </td>
-                  <td style={{ padding: rowPad, textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 11, color: 'var(--momo-text-secondary)' }}>
+                  <td style={{ padding: rowPad, textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 12, color: 'var(--momo-text-secondary)' }}>
                     {p.updatedAt}
                   </td>
-                  <td style={{ padding: rowPad, textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
+                  <td style={{ padding: rowPad, textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 12, color: 'var(--momo-text-secondary)' }}>
                     {p.listedAt}
                   </td>
                   <td style={{ padding: rowPad, textAlign: 'right' }}>

MOMO Pro/app/shell.jsx

@@ -7,7 +7,15 @@ const NAV_GROUPS = [
     items: [
       { id: 'dashboard', label: '商品看板',  icon: 'dashboard',  code: '01' },
       { id: 'campaigns', label: '活動看板',  icon: 'marketing',  code: '02' },
-      { id: 'analytics', label: '分析報表',  icon: 'analytics',  code: '03' },
+      {
+        id: 'analytics', label: '分析報表',  icon: 'analytics',  code: '03',
+        children: [
+          { id: 'analytics-sales',   label: '業績分析',   code: '03·1' },
+          { id: 'analytics-daily',   label: '當日業績',   code: '03·2' },
+          { id: 'analytics-growth',  label: '成長分析',   code: '03·3' },
+          { id: 'analytics-monthly', label: '月份總表',   code: '03·4' },
+        ],
+      },
     ],
   },
   {
@@ -31,6 +39,17 @@ const Sidebar = ({ active, onNavigate, collapsed, sidebarTheme }) => {
   const isDark = sidebarTheme === 'dark';
   const width = collapsed ? 72 : 240;
 
+  // 子選單展開狀態：父 id 命中（active 為自己或子項之一）就展開
+  const parentOf = React.useMemo(() => {
+    const map = {};
+    NAV_GROUPS.forEach(g => g.items.forEach(it => {
+      if (it.children) it.children.forEach(c => { map[c.id] = it.id; });
+    }));
+    return map;
+  }, []);
+  const [openMap, setOpenMap] = React.useState({});
+  const isOpen = (id) => openMap[id] ?? (active === id || parentOf[active] === id);
+
   // 淺色側邊欄改用米色 paper（不純白），active 用焦糖橘
   const bg = isDark ? '#1f1a14' : 'var(--momo-bg-paper)';
   const textMuted = isDark ? 'rgba(255,247,240,0.55)' : 'var(--momo-text-secondary)';
@@ -102,9 +121,22 @@ const Sidebar = ({ active, onNavigate, collapsed, sidebarTheme }) => {
             )}
             {collapsed && gi > 0 && <div style={{ height: 1, background: borderC, margin: '8px 12px' }} />}
             {group.items.map(item => {
-              const isActive = active === item.id;
+              const hasChildren = !!item.children;
+              const childActive = hasChildren && item.children.some(c => c.id === active);
+              const isActive = active === item.id || (hasChildren && childActive && collapsed);
+              const expanded = !collapsed && hasChildren && (isOpen(item.id) || childActive);
+              const onClick = () => {
+                if (hasChildren && !collapsed) {
+                  // 父層點擊 = 切換展開；若尚未指向任何子項，順手導向第一個子項
+                  setOpenMap(m => ({ ...m, [item.id]: !isOpen(item.id) }));
+                  if (!childActive) onNavigate(item.children[0].id);
+                } else {
+                  onNavigate(item.id);
+                }
+              };
               return (
-                <button key={item.id} onClick={() => onNavigate(item.id)}
+                <React.Fragment key={item.id}>
+                <button onClick={onClick}
                   title={collapsed ? item.label : ''}
                   style={{
                     width: '100%',
@@ -129,7 +161,14 @@ const Sidebar = ({ active, onNavigate, collapsed, sidebarTheme }) => {
                   {!collapsed && (
                     <>
                       <span style={{ flex: 1, textAlign: 'left' }}>{item.label}</span>
-                      {item.code && (
+                      {hasChildren && (
+                        <Icon name="chevronDown" size={12} style={{
+                          opacity: 0.55,
+                          transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)',
+                          transition: 'transform 0.15s ease',
+                        }} />
+                      )}
+                      {!hasChildren && item.code && (
                         <span className="momo-mono" style={{
                           fontSize: 10, opacity: isActive ? 0.8 : 0.45, fontWeight: 600,
                         }}>{item.code}</span>
@@ -155,6 +194,44 @@ const Sidebar = ({ active, onNavigate, collapsed, sidebarTheme }) => {
                     }} />
                   )}
                 </button>
+
+                {/* 子選單 */}
+                {expanded && item.children.map(child => {
+                  const cActive = active === child.id;
+                  return (
+                    <button key={child.id} onClick={() => onNavigate(child.id)}
+                      style={{
+                        width: '100%',
+                        display: 'flex', alignItems: 'center', gap: 10,
+                        padding: '7px 12px 7px 36px',
+                        borderRadius: 4,
+                        background: cActive ? itemHoverBg : 'transparent',
+                        color: cActive ? (isDark ? '#faf7f0' : 'var(--momo-accent)') : (isDark ? textMuted : 'var(--momo-text-secondary)'),
+                        fontSize: 12,
+                        fontWeight: cActive ? 600 : 500,
+                        transition: 'var(--momo-transition-base)',
+                        marginBottom: 1,
+                        position: 'relative',
+                        border: '1px solid transparent',
+                      }}
+                      onMouseEnter={e => { if (!cActive) e.currentTarget.style.background = itemHoverBg; }}
+                      onMouseLeave={e => { if (!cActive) e.currentTarget.style.background = 'transparent'; }}
+                    >
+                      {/* 縮排線 */}
+                      <span style={{
+                        position: 'absolute', left: 22, top: 6, bottom: 6, width: 2,
+                        background: cActive ? 'var(--momo-accent)' : borderC, borderRadius: 1,
+                      }} />
+                      <span style={{ flex: 1, textAlign: 'left' }}>{child.label}</span>
+                      {child.code && (
+                        <span className="momo-mono" style={{
+                          fontSize: 9, opacity: cActive ? 0.8 : 0.45, fontWeight: 600,
+                        }}>{child.code}</span>
+                      )}
+                    </button>
+                  );
+                })}
+                </React.Fragment>
               );
             })}
           </div>

MOMO Pro/app/ui.jsx

@@ -230,4 +230,40 @@ const PageHeader = ({ title, subtitle, actions, breadcrumbs }) => (
   </div>
 );
 
-Object.assign(window, { Badge, Button, Avatar, Card, Input, Checkbox, PageHeader });
+// ===== Tag（標籤統一元件 — 全站唯一入口） =====
+// 用法：<Tag tone="caramel">推薦</Tag>  <Tag tone="ink" mono>MOMO 領先</Tag>
+// tone: caramel | honey | rust | mahogany | earth | ink | muted | success
+// 不要再用任何寫死色碼做標籤！
+const Tag = ({ tone = 'earth', mono = false, dot = false, size = 'sm', children, style }) => {
+  const sizes = {
+    xs: { pad: '1px 6px',  fs: 10, gap: 4 },
+    sm: { pad: '2px 8px',  fs: 11, gap: 5 },
+    md: { pad: '3px 10px', fs: 12, gap: 6 },
+  };
+  const s = sizes[size] || sizes.sm;
+  return (
+    <span style={{
+      display: 'inline-flex', alignItems: 'center', gap: s.gap,
+      padding: s.pad,
+      fontSize: s.fs,
+      fontWeight: 600,
+      lineHeight: 1.5,
+      whiteSpace: 'nowrap',
+      borderRadius: 3,
+      background: `var(--momo-tag-${tone}-bg)`,
+      color: `var(--momo-tag-${tone}-text)`,
+      border: `1px solid var(--momo-tag-${tone}-border)`,
+      fontFamily: mono ? 'var(--momo-font-family-mono)' : 'var(--momo-font-family-base)',
+      letterSpacing: mono ? '0.02em' : 0,
+      ...style,
+    }}>
+      {dot && <span style={{
+        width: 5, height: 5, borderRadius: '50%',
+        background: `var(--momo-tag-${tone}-text)`, opacity: 0.7,
+      }} />}
+      {children}
+    </span>
+  );
+};
+
+Object.assign(window, { Badge, Button, Avatar, Card, Input, Checkbox, PageHeader, Tag });

MOMO Pro/design-canvas.jsx

@@ -619,3 +619,4 @@ function DCPostIt({ children, top, left, right, bottom, rotate = -2, width = 180
 }
 
 Object.assign(window, { DesignCanvas, DCSection, DCArtboard, DCPostIt });
+

MOMO Pro/design-tokens.css

@@ -32,6 +32,96 @@
   --momo-accent-700:        #8f4530;
   --momo-accent-soft:       rgba(201,100,66,0.12);
 
+  /* ===== EwoooC 暖色家族（全站運用） =====
+   * 全部留在暖色域（紅/橘/金/土），不混入冷色
+   * 用法：活動頁 / 標籤色 / 圖表分類色 / 各區段視覺主軸
+   */
+  --momo-warm-caramel:      #c96442;          /* 焦糖橘 — 主 accent / 限時搶購 */
+  --momo-warm-honey:        #b88416;          /* 蜂蜜金 — 1.1 狂歡 / 警示 */
+  --momo-warm-rust:         #b5342f;          /* 暖紅 — 母親節 / danger */
+  --momo-warm-mahogany:     #8f4530;          /* 深焦糖 — 520 情人節 / 強調 */
+  --momo-warm-earth:        #8a5a2b;          /* 焦土 — 勞動節 / 中性暖 */
+  /* 對應淡色（背景 / 軟標籤用） */
+  --momo-warm-caramel-soft: rgba(201,100,66,0.12);
+  --momo-warm-honey-soft:   rgba(184,132,22,0.12);
+  --momo-warm-rust-soft:    rgba(181,52,47,0.12);
+  --momo-warm-mahogany-soft:rgba(143,69,48,0.12);
+  --momo-warm-earth-soft:   rgba(138,90,43,0.12);
+
+  /* ===== 標籤色系統（Tag / Chip / Badge 統一規範） =====
+   * 規則：
+   *   1. 全部留在暖色域（caramel/honey/rust/mahogany/earth + 中性 ink）
+   *   2. 一個標籤 = 一組 (bg + border + text)，三者一起用，不要混用
+   *   3. 文字色一定是 *-text，已對 *-bg 做過 WCAG AA 對比驗證
+   *   4. 不要任意指定 #色碼到標籤上
+   *
+   * 用途分配（語義化，不是看心情挑色）：
+   *   caramel → 主強調 / 推薦 / 焦點品 / accent 動作
+   *   honey   → 警示 / AI 挑品 / 待處理 / 提醒
+   *   rust    → 危險 / 漲價 / 異常 / 警報
+   *   mahogany→ 次強調 / 已選 / 已標記
+   *   earth   → 中性分類 / 一般標籤 / 商品分類
+   *   ink     → 平台標 / 狀態標 / mono 標籤（PChome 領先 / MOMO 領先）
+   *   muted   → 弱資訊 / 待比對 / 已下架
+   */
+
+  /* caramel — 主焦點 */
+  --momo-tag-caramel-bg:     #f5e1d9;
+  --momo-tag-caramel-border: #ecc3b3;
+  --momo-tag-caramel-text:   #7a3520;        /* AA on bg */
+
+  /* honey — 警示 / AI */
+  --momo-tag-honey-bg:       #f3e7c4;
+  --momo-tag-honey-border:   #d9c590;
+  --momo-tag-honey-text:     #6e500e;        /* AA on bg */
+
+  /* rust — 漲價 / 異常 */
+  --momo-tag-rust-bg:        #f0d8d4;
+  --momo-tag-rust-border:    #d9b1ac;
+  --momo-tag-rust-text:      #7d2520;        /* AA on bg */
+
+  /* mahogany — 次強調 */
+  --momo-tag-mahogany-bg:    #ecdcd4;
+  --momo-tag-mahogany-border:#d4b8ab;
+  --momo-tag-mahogany-text:  #5e2e20;
+
+  /* earth — 中性分類（最常用，不搶眼）*/
+  --momo-tag-earth-bg:       #ede4d2;
+  --momo-tag-earth-border:   #d4c5a3;
+  --momo-tag-earth-text:     #5a3f1c;
+
+  /* ink — 平台 / mono */
+  --momo-tag-ink-bg:         #2a2520;
+  --momo-tag-ink-border:     #2a2520;
+  --momo-tag-ink-text:       #faf7f0;
+
+  /* muted — 弱資訊 */
+  --momo-tag-muted-bg:       #e2dccf;
+  --momo-tag-muted-border:   rgba(42,37,32,0.16);
+  --momo-tag-muted-text:     #645c52;
+
+  /* success / 降價（綠色保留，但去飽和對齊暖底）*/
+  --momo-tag-success-bg:     #dde6cf;
+  --momo-tag-success-border: #c2d0a6;
+  --momo-tag-success-text:   #1f5a2d;
+
+  /* ===== 字體層級規範（避免眼睛疲勞） =====
+   * 原則：
+   *   1. 主要內文 ≥ 13px (0.8125rem)；說明文 ≥ 12px (0.75rem) 但只用於 mono / 數據
+   *   2. 11px / 10px 只給 LABEL（uppercase 標籤），且必須 letter-spacing ≥ 0.06em
+   *   3. 顏色用 text-primary / secondary / tertiary 三層；tertiary 不放重點資訊
+   *   4. 數據 (mono) 用 tnum 等寬，避免跳動
+   *   5. line-height：標題 1.2 / 內文 1.5 / 鬆散段落 1.7
+   */
+  --momo-text-display:      2rem;             /* 32px - hero 大數字 */
+  --momo-text-headline:     1.5rem;           /* 24px - 區塊大數字 */
+  --momo-text-title:        1.0625rem;        /* 17px - 卡片標題 */
+  --momo-text-body:         0.875rem;         /* 14px - 內文（提升 1px，減少疲勞）*/
+  --momo-text-body-sm:      0.8125rem;        /* 13px - 表格內文最小值 */
+  --momo-text-meta:         0.75rem;          /* 12px - mono 數據 / 次要說明 */
+  --momo-text-label:        0.6875rem;        /* 11px - LABEL only */
+  --momo-text-label-tiny:   0.625rem;         /* 10px - 角落標籤 only */
+
   /* 沿用 primary 命名以相容（指向 accent） */
   --momo-primary:           var(--momo-accent);
   --momo-primary-50:        var(--momo-accent-50);
@@ -236,7 +326,62 @@
 @keyframes momo-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes momo-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
 
-/* Topbar responsive：用 container query 因為 topbar 在 artboard 縮放容器內 */
+/* ===== 商品看板響應式 ===== */
+.dash-page { container-type: inline-size; }
+@container (max-width: 900px) {
+  .dash-kpi-num { font-size: 30px !important; }
+  .dash-focus { grid-template-columns: 1fr 1fr !important; }
+}
+@container (max-width: 720px) {
+  .dash-kpis { grid-template-columns: repeat(2, 1fr) !important; }
+  .dash-kpis > div { border-right: none !important; border-bottom: 1px solid var(--momo-border-light) !important; }
+  .dash-kpis > div:nth-child(odd) { border-right: 1px solid var(--momo-border-light) !important; }
+  .dash-kpis > div:nth-child(n+3) { border-bottom: none !important; }
+  .dash-kpi-num { font-size: 28px !important; }
+  .dash-focus { grid-template-columns: 1fr !important; }
+}
+@media (max-width: 900px) {
+  .dash-focus { grid-template-columns: 1fr 1fr !important; }
+}
+@media (max-width: 720px) {
+  .dash-kpis { grid-template-columns: repeat(2, 1fr) !important; }
+  .dash-focus { grid-template-columns: 1fr !important; }
+}
+
+/* ===== 活動看板響應式 ===== */
+.camp-page { container-type: inline-size; }
+@container (max-width: 900px) {
+  .camp-hero { padding: 22px 24px !important; }
+  .camp-hero-title { font-size: 32px !important; }
+  .camp-hero-meta { gap: 20px !important; }
+  .camp-hero-total { font-size: 28px !important; }
+}
+@container (max-width: 720px) {
+  .camp-hero { padding: 20px 20px !important; }
+  .camp-hero-title { font-size: 26px !important; }
+  .camp-hero-meta-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
+  .camp-hero-total-wrap { margin-left: 0 !important; text-align: left !important; }
+  .camp-hero-total { font-size: 24px !important; }
+  .camp-kpis { grid-template-columns: repeat(2, 1fr) !important; }
+  .camp-kpis > div { border-right: none !important; border-bottom: 1px solid var(--momo-border-light) !important; }
+  .camp-kpis > div:nth-child(odd) { border-right: 1px solid var(--momo-border-light) !important; }
+  .camp-kpis > div:nth-child(n+3) { border-bottom: none !important; }
+  .camp-kpi-num { font-size: 28px !important; }
+  .camp-th-cat, .camp-td-cat { display: none !important; }
+  .camp-table th, .camp-table td { padding: 12px 12px !important; }
+}
+@media (max-width: 900px) {
+  .camp-hero { padding: 22px 24px !important; }
+  .camp-hero-title { font-size: 32px !important; }
+}
+@media (max-width: 720px) {
+  .camp-hero-meta-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
+  .camp-hero-total-wrap { margin-left: 0 !important; text-align: left !important; }
+  .camp-kpis { grid-template-columns: repeat(2, 1fr) !important; }
+  .camp-th-cat, .camp-td-cat { display: none !important; }
+}
+
+/* Topbar responsive */
 .momo-topbar { container-type: inline-size; }
 @container (max-width: 1024px) {
   .momo-schedule-pill { display: none !important; }

docs/memory/code_modularization_inventory_20260430.md

@@ -27,8 +27,10 @@
 | 986 | `services/telegram_bot_service.py` | P2 Telegram service | command handlers / message formatters / bot client |
 | 966 | `services/trend_crawler.py` | P2 crawler service | source adapters / parser / persistence |
 | 946 | `services/elephant_alpha_autonomous_engine.py` | P2 ElephantAlpha engine | HITL / executor / planning policy |
+| 829 | `routes/export_routes.py` | P2 Export flow | export command/router glue / file path / download orchestration |
 | 818 | `services/import_service.py` | P2 import service | validators / import writers / report builders |
 | 805 | `routes/bot_api_routes.py` | P2 Bot API Blueprint | route glue / bot action service |
+| 805 | `services/competitor_price_feeder.py` | P2 competitor price feeder | crawler scheduling / price normalization / cache strategy |
 
 ## 工作項目
 

services/exporter.py

@@ -3,6 +3,7 @@ import csv
 import pandas as pd
 from datetime import datetime
 from config import EXCEL_EXPORT_DIR
+from utils.momo_url_utils import build_momo_product_url, normalize_momo_product_url
 
 class Exporter:
     """
@@ -30,6 +31,10 @@ class Exporter:
             print(f"❌ Export error: {e}")
             return None
 
+    def _safe_product_url(self, product):
+        sku = str(getattr(product, 'i_code', '') or '')
+        return normalize_momo_product_url(getattr(product, 'url', None), sku) or build_momo_product_url(sku)
+
     def generate_all_categories_report(self):
         """匯出所有分類商品快照"""
         # 由於 app.py 呼叫此方法時未傳入數據，需自行查詢資料庫
@@ -46,7 +51,7 @@ class Exporter:
             
             rows = []
             for r in records:
-                rows.append([r.product.category, r.product.name, r.price, r.product.url, r.timestamp.strftime('%Y-%m-%d %H:%M')])
+                rows.append([r.product.category, r.product.name, r.price, self._safe_product_url(r.product), r.timestamp.strftime('%Y-%m-%d %H:%M')])
             
             filename = f"All_Products_{datetime.now().strftime('%Y%m%d_%H%M')}.csv"
             return self._write_csv(filename, ['Category', 'Name', 'Price', 'URL', 'Last Update'], rows)
@@ -59,7 +64,7 @@ class Exporter:
         for item in items:
             rec = item['record']
             diff = item['yesterday_diff']
-            rows.append([rec.product.category, rec.product.name, rec.price, diff, rec.product.url])
+            rows.append([rec.product.category, rec.product.name, rec.price, diff, self._safe_product_url(rec.product)])
         
         filename = f"Price_Changes_{datetime.now().strftime('%Y%m%d_%H%M')}.csv"
         return self._write_csv(filename, ['Category', 'Name', 'Price', 'Change', 'URL'], rows)
@@ -71,7 +76,7 @@ class Exporter:
         rows = []
         for item in items:
             rec = item['record']
-            rows.append([rec.product.category, rec.product.name, rec.price, rec.product.url])
+            rows.append([rec.product.category, rec.product.name, rec.price, self._safe_product_url(rec.product)])
         filename = f"{title}_{datetime.now().strftime('%Y%m%d_%H%M')}.csv"
         return self._write_csv(filename, ['Category', 'Name', 'Price', 'URL'], rows)
 
@@ -80,7 +85,7 @@ class Exporter:
         for item in items:
             p = item['product']
             price = item['last_price']
-            rows.append([p.category, p.name, price, p.url, "DELISTED"])
+            rows.append([p.category, p.name, price, self._safe_product_url(p), "DELISTED"])
         filename = f"{title}_{datetime.now().strftime('%Y%m%d_%H%M')}.csv"
         return self._write_csv(filename, ['Category', 'Name', 'Last Price', 'URL', 'Status'], rows)
 
@@ -93,7 +98,7 @@ class Exporter:
                 '分類': rec.product.category,
                 '商品名稱': rec.product.name,
                 '價格': rec.price,
-                '連結': rec.product.url,
+                '連結': self._safe_product_url(rec.product),
                 '更新時間': rec.timestamp.strftime('%Y-%m-%d %H:%M')
             })
         
@@ -115,11 +120,11 @@ class Exporter:
         
         with pd.ExcelWriter(filepath, engine='openpyxl') as writer:
             # 漲價
-            data_inc = [{'分類': i['record'].product.category, '商品名稱': i['record'].product.name, '價格': i['record'].price, '漲幅': i['yesterday_diff'], '連結': i['record'].product.url} for i in increase]
+            data_inc = [{'分類': i['record'].product.category, '商品名稱': i['record'].product.name, '價格': i['record'].price, '漲幅': i['yesterday_diff'], '連結': self._safe_product_url(i['record'].product)} for i in increase]
             pd.DataFrame(data_inc).to_excel(writer, sheet_name='漲價商品', index=False)
             
             # 跌價
-            data_dec = [{'分類': i['record'].product.category, '商品名稱': i['record'].product.name, '價格': i['record'].price, '跌幅': i['yesterday_diff'], '連結': i['record'].product.url} for i in decrease]
+            data_dec = [{'分類': i['record'].product.category, '商品名稱': i['record'].product.name, '價格': i['record'].price, '跌幅': i['yesterday_diff'], '連結': self._safe_product_url(i['record'].product)} for i in decrease]
             pd.DataFrame(data_dec).to_excel(writer, sheet_name='跌價商品', index=False)
             
         return filepath
@@ -129,9 +134,9 @@ class Exporter:
         filename = f"MOMO_Delisted_{datetime.now().strftime('%Y%m%d_%H%M')}.xlsx"
         filepath = os.path.join(self.export_dir, filename)
         
-        data = [{'分類': i['product'].category, '商品名稱': i['product'].name, '最後價格': i['last_price'], '連結': i['product'].url, '狀態': '下架'} for i in delisted_items]
+        data = [{'分類': i['product'].category, '商品名稱': i['product'].name, '最後價格': i['last_price'], '連結': self._safe_product_url(i['product']), '狀態': '下架'} for i in delisted_items]
         
         with pd.ExcelWriter(filepath, engine='openpyxl') as writer:
             pd.DataFrame(data).to_excel(writer, sheet_name='下架商品', index=False)
             
-        return filepath
+        return filepath

services/mcp_collector_service.py

@@ -100,7 +100,11 @@ class MCPCollectorService:
             ).fetchone()
             if row:
                 logger.debug("[MCP] 快取命中: %s", topic)
-                return row[0]
+                content = row[0]
+                if self._looks_unreliable(content):
+                    logger.warning("[MCP] 快取內容含占位文字，略過 topic=%s", topic)
+                    return None
+                return content
             return None
         except Exception:
             return None
@@ -135,28 +139,84 @@ class MCPCollectorService:
     # ── 單主題搜尋 ──────────────────────────────────────────────────────────
 
     def _search_topic(self, topic: str, query: str) -> str:
-        if not self._ensure_init():
-            return ""
-
         cached = self._read_cache(topic)
         if cached:
             return cached
 
+        if not self._ensure_init():
+            return self._fallback_topic_content(topic, "GEMINI_API_KEY 未設定，使用本地行銷情報。")
+
         try:
-            model = self._genai.GenerativeModel(
+            prompt = f"請用繁體中文整理以下主題的最新資訊，提供具體數據與洞察，500字以內：\n{query}"
-                model_name=MCP_MODEL,
+            response = None
-                tools=["google_search_retrieval"],
+            last_error = None
-            )
+            for tools in (["google_search"], ["google_search_retrieval"], None):
-            response = model.generate_content(
+                try:
-                f"請用繁體中文整理以下主題的最新資訊，提供具體數據與洞察，500字以內：\n{query}"
+                    kwargs = {"model_name": MCP_MODEL}
-            )
+                    if tools:
+                        kwargs["tools"] = tools
+                    model = self._genai.GenerativeModel(**kwargs)
+                    response = model.generate_content(prompt)
+                    break
+                except Exception as tool_err:
+                    last_error = tool_err
+                    continue
+            if response is None:
+                raise last_error or RuntimeError("Gemini response empty")
             content = response.text or ""
+            if self._looks_unreliable(content):
+                return self._fallback_topic_content(topic, "即時搜尋內容含占位數字或待更新文字，已改用本地行銷情報。")
             if content:
                 self._write_cache(topic, content)
-            return content
+                return content
+            return self._fallback_topic_content(topic, "Gemini 回傳空內容，使用本地行銷情報。")
         except Exception as e:
             logger.warning("[MCP] 搜尋失敗 topic=%s: %s", topic, e)
-            return ""
+            return self._fallback_topic_content(topic, f"即時外部搜尋暫不可用：{type(e).__name__}")
+
+    @staticmethod
+    def _looks_unreliable(content: str) -> bool:
+        """避免將模型產生的占位數字或待補文字當成真實情報。"""
+        if not content:
+            return False
+        markers = (
+            "XX",
+            "請自行更新",
+            "待補",
+            "資料待查",
+            "自行查詢",
+            "示例數據",
+            "範例數據",
+        )
+        return any(marker in content for marker in markers)
+
+    def _fallback_topic_content(self, topic: str, reason: str = "") -> str:
+        """外部搜尋失敗時的穩定回覆，避免 Telegram 按鈕空白或像壞掉。"""
+        holiday = self.get_holiday_context()
+        seasonal = self.get_seasonal_context()
+        fallback_map = {
+            "market_trends": [
+                "台灣電商營運觀察：美妝保養、保健食品、母嬰與個人清潔仍適合用週期性促銷與組合包拉升轉換。",
+                "建議優先檢查近期高業績品類、毛利率與庫存週轉，將活動資源集中在高轉換商品。",
+            ],
+            "competitor_intel": [
+                "競品情報 fallback：請優先比較 momo / PChome / 蝦皮同款商品的售價、庫存、到貨速度與組合優惠。",
+                "若 PChome 價格優勢明顯，可強化文案中的即時到貨、價格透明與組合折扣。",
+            ],
+            "consumer_sentiment": [
+                "消費者聲量 fallback：高 CP 值、到貨速度、真實評價與成分/規格透明度通常會影響購買意願。",
+                "建議把負評來源拆成價格、物流、規格不符、售後服務四類追蹤。",
+            ],
+            "pricing_strategy": [
+                "定價策略 fallback：先鎖定高流量高轉換商品做競品價差監控，再用加價購、滿額折與組合包保護毛利。",
+            ],
+            "holiday_calendar": [holiday],
+            "seasonal_insights": [seasonal],
+        }
+        lines = fallback_map.get(topic, [holiday, seasonal])
+        if reason:
+            lines.append(f"資料狀態：{reason}")
+        return "\n".join(line for line in lines if line)
 
     # ── 公開介面 ────────────────────────────────────────────────────────────
 

services/ppt_generator.py

@@ -36,22 +36,22 @@ from pathlib import Path
 REPORTS_DIR = Path(os.environ.get("REPORTS_DIR", "/app/data/reports"))
 REPORTS_DIR.mkdir(parents=True, exist_ok=True)
 
-# ── 調色盤 (對齊前端現代化風格) ──────────────────────────────────────────────────
+# ── 調色盤 (對齊 EwoooC 新版設計 Token: 暖米基底/暖墨/焦糖橘) ──────────────────────────
-_BG_DARK    = "1E3C72" # Web Navbar 深藍
+_BG_DARK    = "2A2520" # momo-ink (暖墨色)
-_BRAND_OG   = "4F46E5" # Primary Indigo
+_BRAND_OG   = "C96442" # momo-accent (焦糖橘)
-_BRAND_OG2  = "6366F1" # Light Indigo
+_BRAND_OG2  = "8F4530" # momo-warm-mahogany (深焦糖)
-_WHITE      = "FFFFFF"
+_WHITE      = "FAF7F0" # momo-bg-surface (米白卡片底，取代純白)
-_LIGHT_GRAY = "F8F9FA" # 柔和卡片灰
+_LIGHT_GRAY = "EBE6DC" # momo-bg-body (米色工作台背景)
-_DARK_TEXT  = "2C3E50" # 現代化深色文字
+_DARK_TEXT  = "2A2520" # momo-text-primary (暖墨文字)
-_SUBTEXT    = "6C757D" # 標籤灰
+_SUBTEXT    = "645C52" # momo-text-secondary (次要文字)
-_FOOTER_BG  = "1F2937" # 底部深灰
+_FOOTER_BG  = "3D362F" # momo-ink-soft (底部深灰)
-_BLUE_KPI   = "3498DB" # Web Accent Blue
+_BLUE_KPI   = "2D5D80" # momo-info (中性藍)
-_GREEN_KPI  = "10B981" # Emerald 綠
+_GREEN_KPI  = "2A7A3F" # momo-success (去飽和綠)
-_RED_WARN   = "EF4444" # Red 警告
+_RED_WARN   = "B5342F" # momo-danger (暖紅)
 _BAR_PCHOME = "EF5350"
 _BAR_MOMO   = "66BB6A"
-_BAR_TIE    = "F59E0B"
+_BAR_TIE    = "B88416" # momo-warning (蜂蜜金)
-_BAR_MISS   = "9E9E9E"
+_BAR_MISS   = "C4BAA8" # momo-text-disabled
 
 _STRAT_COLORS = {
     '加碼': _BRAND_OG,

templates/daily_sales.html

@@ -1,103 +1,89 @@
-<!DOCTYPE html>
+{% extends 'ewoooc_base.html' %}
-<html lang="zh-TW">
+{% block title %}當日業績看板 - WOOO TECH{% endblock %}
 
-<head>
+{% block extra_css %}
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>當日業績看板 - WOOO TECH</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
     <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
     <style>
-        body {
+        .daily-sales-page {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            display: flex;
-            background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
+            flex-direction: column;
-            min-height: 100vh;
+            gap: 18px;
-            padding-top: 70px;
         }
 
-        .navbar-dark.bg-primary {
+        .daily-sales-hero {
-            background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
+            display: grid;
-            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+            grid-template-columns: minmax(0, 1fr) auto;
+            gap: 16px;
+            align-items: center;
+            padding: 22px;
+            border: 1px solid var(--momo-border-strong);
+            border-radius: 8px;
+            background:
+                radial-gradient(circle at 18px 18px, rgba(42, 37, 32, 0.12) 1px, transparent 1px),
+                linear-gradient(135deg, rgba(242, 178, 90, 0.22), rgba(255, 255, 255, 0.94) 46%, rgba(42, 37, 32, 0.06));
+            background-size: 18px 18px, auto;
+            box-shadow: var(--momo-shadow-soft);
         }
 
-        .navbar-dark .navbar-brand {
+        .daily-sales-title {
-            color: #ffffff !important;
+            display: flex;
-            font-weight: 600;
+            align-items: center;
+            gap: 10px;
+            margin: 0;
+            color: var(--momo-text-strong);
+            font-family: var(--momo-font-display);
+            font-size: clamp(1.45rem, 2vw, 2.08rem);
+            font-weight: 800;
+            letter-spacing: 0;
         }
 
-        .navbar-dark .navbar-nav .nav-link {
+        .daily-sales-title i {
-            color: rgba(255, 255, 255, 0.9) !important;
+            color: var(--momo-warm-caramel) !important;
-            font-weight: 500;
-            transition: all 0.3s;
-        }
-
-        .navbar-dark .navbar-nav .nav-link:hover {
-            color: #ffffff !important;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 6px;
-        }
-
-        .navbar-dark .navbar-nav .nav-link.active {
-            color: #ffffff !important;
-            background: rgba(255, 255, 255, 0.15);
-            border-radius: 6px;
-            font-weight: 600;
-        }
-
-        .navbar-dark .navbar-text {
-            color: rgba(255, 255, 255, 0.8) !important;
-        }
-
-        .navbar {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
         }
 
         .card {
-            border: none;
+            border: 1px solid var(--momo-border-subtle) !important;
-            border-radius: 16px;
+            border-radius: 8px;
-            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+            box-shadow: var(--momo-shadow-soft);
             margin-bottom: 1.5rem;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            background: #fff;
+            background: rgba(255, 255, 255, 0.84);
             overflow: hidden;
         }
 
         .card:hover {
-            transform: translateY(-4px);
+            transform: translateY(-2px);
-            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 10px 26px rgba(42, 37, 32, 0.1);
         }
 
         .card-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: rgba(250, 247, 240, 0.9) !important;
-            border-bottom: none;
+            border-bottom: 1px solid var(--momo-border-subtle);
             font-weight: 700;
-            color: #fff !important;
+            color: var(--momo-text-strong) !important;
             padding: 1rem 1.5rem;
             font-size: 1.05rem;
         }
 
         .card-header * {
-            color: #fff !important;
+            color: var(--momo-text-strong) !important;
         }
 
         .card-header i {
-            color: rgba(255, 255, 255, 0.95) !important;
+            color: var(--momo-warm-caramel) !important;
         }
 
         .kpi-card {
             position: relative;
             overflow: hidden;
             border: none;
-            border-radius: 20px !important;
+            border-radius: 8px !important;
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+            box-shadow: var(--momo-shadow-soft) !important;
         }
 
         .kpi-card:hover {
-            transform: translateY(-6px) scale(1.02);
+            transform: translateY(-3px);
-            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18) !important;
+            box-shadow: var(--momo-shadow-medium) !important;
         }
 
         .kpi-card .icon-bg {
@@ -116,6 +102,7 @@
             letter-spacing: -0.5px;
             margin-bottom: 0.3rem;
             text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+            font-family: var(--momo-font-mono);
         }
 
         .kpi-label {
@@ -846,42 +833,23 @@
             }
         }
 
-        /* Custom Dark Gray Navbar */
+        .daily-sales-page .table thead th,
-        .navbar.bg-custom-dark {
+        .daily-sales-page .table-light th {
-            background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+            background: rgba(250, 247, 240, 0.96) !important;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+            color: var(--momo-text-muted);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            font-weight: 800;
         }
 
-        .navbar.bg-custom-dark .navbar-brand {
+        @media (max-width: 768px) {
-            color: #ffffff;
+            .daily-sales-hero {
-            font-weight: 600;
+                grid-template-columns: 1fr;
-        }
+            }
-
-        .navbar.bg-custom-dark .navbar-nav .nav-link {
-            color: rgba(255, 255, 255, 0.85);
-            font-weight: 500;
-        }
-
-        .navbar.bg-custom-dark .navbar-nav .nav-link:hover {
-            color: #ffffff;
-        }
-
-        .navbar.bg-custom-dark .navbar-nav .nav-link.active {
-            color: #ffffff;
-            font-weight: 600;
-        }
-
-        .navbar.bg-custom-dark .navbar-text {
-            color: rgba(255, 255, 255, 0.75);
         }
     </style>
-</head>
+{% endblock %}
 
-<body class="bg-body-tertiary">
+{% block ewooo_content %}
-    {% include 'components/_navbar.html' %}
+    <div class="daily-sales-page">
-
-    <div class="container-fluid px-4">
         {% if error %}
         <div class="error-message">
             <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
@@ -890,8 +858,11 @@
         </div>
         {% else %}
         <!-- Header with Date Selector -->
-        <div class="page-header d-flex justify-content-between align-items-center mt-4">
+        <section class="daily-sales-hero page-header d-flex justify-content-between align-items-center">
-            <h4 class="mb-0 fw-bold"><i class="fas fa-calendar-day me-2 text-info"></i>當日業績看板</h4>
+            <div>
+                <h1 class="daily-sales-title"><i class="fas fa-calendar-day me-2 text-info"></i>當日業績看板</h1>
+                <p class="text-muted mb-0 mt-2">以資料庫 `daily_sales_snapshot` 的當日業績快照，檢視日曆、KPI、分類與行銷摘要。</p>
+            </div>
             <div class="page-header-controls">
                 <select id="dateSelector" class="date-selector" onchange="changeDate()">
                     {% for date in available_dates %}
@@ -902,7 +873,7 @@
                 </select>
                 <span class="page-header-label">選擇日期查看詳細業績</span>
             </div>
-        </div>
+        </section>
 
         <!-- Calendar View -->
         {% if calendar_data %}
@@ -1903,4 +1874,4 @@
     </script>
 </body>
 
-</html>
+</html>

tests/test_file_upload.py

@@ -54,7 +54,7 @@ def test_allowed_file():
             print(f"❌ 失敗: {description} | 檔名: '{filename}' | 期望: {should_pass} | 實際: {result}")
             failed += 1
 
-    return passed, failed
+    assert failed == 0
 
 def test_validate_upload_file():
     """測試完整的檔案上傳驗證"""
@@ -107,7 +107,7 @@ def test_validate_upload_file():
             failed += 1
         print()
 
-    return passed, failed
+    assert failed == 0
 
 def test_secure_filename_cleaning():
     """測試 secure_filename 的清理效果"""
@@ -136,7 +136,7 @@ def test_secure_filename_cleaning():
         print(f"  清理後: '{cleaned}'")
         print()
 
-    return 0, 0  # 這個測試只是展示，不計入通過/失敗
+    assert True  # 這個測試只是展示，不計入通過/失敗
 
 def main():
     """主測試函數"""
@@ -145,17 +145,13 @@ def main():
     print("="*60)
     print()
 
-    total_passed = 0
-    total_failed = 0
-
     # 執行所有測試
-    passed, failed = test_allowed_file()
+    try:
-    total_passed += passed
+        test_allowed_file()
-    total_failed += failed
+        test_validate_upload_file()
-
+    except AssertionError:
-    passed, failed = test_validate_upload_file()
+        print("\n⚠️ 測試未通過，請檢查！")
-    total_passed += passed
+        return 1
-    total_failed += failed
 
     # 展示清理效果（不計入結果）
     test_secure_filename_cleaning()
@@ -164,16 +160,11 @@ def main():
     print("="*60)
     print("測試結果摘要")
     print("="*60)
-    print(f"✅ 通過: {total_passed}")
+    print("✅ 通過: 測試函式完成")
-    print(f"❌ 失敗: {total_failed}")
+    print("❌ 失敗: 0")
-    print(f"總計: {total_passed + total_failed}")
 
-    if total_failed == 0:
+    print("\n🎉 所有檔案上傳驗證測試通過！")
-        print("\n🎉 所有檔案上傳驗證測試通過！")
+    return 0
-        return 0
-    else:
-        print(f"\n⚠️ 有 {total_failed} 個測試失敗，請檢查！")
-        return 1
 
 if __name__ == "__main__":
     sys.exit(main())

tests/test_imap_to_smtp.py

@@ -7,21 +7,31 @@
 import imaplib
 import smtplib
 import socket
+import pytest
 
-def test_imap_server(host, port=993):
+def _probe_imap_server(host, port=993):
     """測試 IMAP 伺服器連線"""
+    ok = True
     try:
         print(f"📥 測試 IMAP: {host}:{port}")
         imap = imaplib.IMAP4_SSL(host, port, timeout=5)
         print(f"   ✅ IMAP 伺服器存在且可連接！")
         imap.logout()
-        return True
+        ok = True
     except socket.gaierror:
         print(f"   ❌ DNS 解析失敗")
-        return False
+        ok = False
     except Exception as e:
         print(f"   ⚠️  {type(e).__name__}: {e}")
-        return False
+        ok = False
+
+    return ok
+
+
+def test_imap_server(host, port=993):
+    """測試 IMAP 伺服器連線"""
+    if not _probe_imap_server(host, port):
+        pytest.skip(f"IMAP 無法連線：{host}:{port}")
 
 def guess_smtp_from_imap(imap_host):
     """從 IMAP 主機推測 SMTP 主機"""
@@ -34,8 +44,9 @@ def guess_smtp_from_imap(imap_host):
     ]
     return list(set(mappings))  # 去重
 
-def test_smtp_server(host, port):
+def _probe_smtp_server(host, port):
     """測試 SMTP 伺服器"""
+    ok = True
     try:
         print(f"   測試 SMTP: {host}:{port} ... ", end='')
         server = smtplib.SMTP(host, port, timeout=5)
@@ -44,14 +55,22 @@ def test_smtp_server(host, port):
             server.starttls()
             print(f"✅ 成功（支援 STARTTLS）")
             server.quit()
-            return True
+            ok = True
         else:
             print(f"✅ 成功（不支援加密）")
             server.quit()
-            return True
+            ok = True
     except Exception as e:
         print(f"❌ {type(e).__name__}")
-        return False
+        ok = False
+
+    return ok
+
+
+def test_smtp_server(host, port):
+    """測試 SMTP 伺服器"""
+    if not _probe_smtp_server(host, port):
+        pytest.skip(f"SMTP 無法連線：{host}:{port}")
 
 def main():
     print("=" * 80)
@@ -73,7 +92,7 @@ def main():
 
     found_imap = None
     for imap_host in imap_servers:
-        if test_imap_server(imap_host):
+        if _probe_imap_server(imap_host):
             found_imap = imap_host
             break
 
@@ -98,7 +117,7 @@ def main():
     for smtp_host in smtp_guesses:
         print(f"\n嘗試: {smtp_host}")
         for port in smtp_ports:
-            if test_smtp_server(smtp_host, port):
+            if _probe_smtp_server(smtp_host, port):
                 found_smtp = (smtp_host, port)
                 break
         if found_smtp:

tests/test_path_traversal.py

@@ -91,12 +91,9 @@ def test_safe_join():
     print(f"❌ 失敗: {failed}")
     print(f"總計: {passed + failed}")
 
-    if failed == 0:
+    assert failed == 0
-        print("\n🎉 所有路徑遍歷防護測試通過！")
+
-        return 0
+    print("\n🎉 所有路徑遍歷防護測試通過！")
-    else:
-        print(f"\n⚠️ 有 {failed} 個測試失敗，請檢查！")
-        return 1
 
 if __name__ == "__main__":
     sys.exit(test_safe_join())

tests/test_pchome_smtp.py

@@ -6,9 +6,11 @@
 
 import smtplib
 import socket
+import pytest
 
-def test_smtp_server(host, port, timeout=5):
+def _probe_smtp_server(host, port, timeout=5):
     """測試 SMTP 伺服器是否可連接"""
+    ok = True
     try:
         print(f"\n🔍 測試: {host}:{port}")
         print(f"   正在連接...")
@@ -23,20 +25,28 @@ def test_smtp_server(host, port, timeout=5):
             print(f"   ✅ 支援 STARTTLS 加密")
 
         server.quit()
-        return True
+        ok = True
 
     except socket.gaierror as e:
         print(f"   ❌ DNS 解析失敗（伺服器不存在）")
-        return False
+        ok = False
     except socket.timeout:
         print(f"   ❌ 連接逾時")
-        return False
+        ok = False
     except ConnectionRefusedError:
         print(f"   ❌ 連接被拒絕（埠號可能不對）")
-        return False
+        ok = False
     except Exception as e:
         print(f"   ❌ 錯誤: {e}")
-        return False
+        ok = False
+
+    return ok
+
+
+def test_smtp_server(host, port, timeout=5):
+    """測試 SMTP 伺服器是否可連接"""
+    if not _probe_smtp_server(host, port, timeout):
+        pytest.skip(f"SMTP 無法連線：{host}:{port}")
 
 def main():
     """測試常見的 PChome SMTP 伺服器"""
@@ -63,7 +73,7 @@ def main():
     successful_servers = []
 
     for host, port in servers_to_test:
-        if test_smtp_server(host, port):
+        if _probe_smtp_server(host, port):
             successful_servers.append((host, port))
 
     # 顯示結果

tests/test_sql_security.py

@@ -54,7 +54,7 @@ def test_table_name_validation():
                 print(f"❌ 失敗: {description} | 不應該被阻擋: '{table_name}' | 錯誤: {e}")
                 failed += 1
 
-    return passed, failed
+    assert failed == 0
 
 def test_column_name_validation():
     """測試欄位名驗證函數"""
@@ -94,7 +94,7 @@ def test_column_name_validation():
                 print(f"❌ 失敗: {description} | 不應該被阻擋: {columns} | 錯誤: {e}")
                 failed += 1
 
-    return passed, failed
+    assert failed == 0
 
 def test_timestamp_sanitization():
     """測試時間戳清理函數"""
@@ -134,7 +134,7 @@ def test_timestamp_sanitization():
                 print(f"❌ 失敗: {description} | 不應該被阻擋: '{timestamp}' | 錯誤: {e}")
                 failed += 1
 
-    return passed, failed
+    assert failed == 0
 
 def main():
     """主測試函數"""
@@ -142,36 +142,25 @@ def main():
     print("MOMO 監控系統 - SQL 注入防護測試")
     print("="*60)
 
-    total_passed = 0
-    total_failed = 0
-
     # 執行所有測試
-    passed, failed = test_table_name_validation()
+    try:
-    total_passed += passed
+        test_table_name_validation()
-    total_failed += failed
+        test_column_name_validation()
-
+        test_timestamp_sanitization()
-    passed, failed = test_column_name_validation()
+    except AssertionError:
-    total_passed += passed
+        print(f"\n⚠️ 有 1 個測試區段未通過，請檢查！")
-    total_failed += failed
+        return 1
-
-    passed, failed = test_timestamp_sanitization()
-    total_passed += passed
-    total_failed += failed
 
     # 顯示總結
     print("\n" + "="*60)
     print("測試結果摘要")
     print("="*60)
-    print(f"✅ 通過: {total_passed}")
+    print("✅ 通過: 3 個測試函式")
-    print(f"❌ 失敗: {total_failed}")
+    print("❌ 失敗: 0")
-    print(f"總計: {total_passed + total_failed}")
+    print("總計: 3")
 
-    if total_failed == 0:
+    print("\n🎉 所有 SQL 注入防護測試通過！")
-        print("\n🎉 所有 SQL 注入防護測試通過！")
+    return 0
-        return 0
-    else:
-        print(f"\n⚠️ 有 {total_failed} 個測試失敗，請檢查！")
-        return 1
 
 if __name__ == "__main__":
     sys.exit(main())