style(ppt): align PPT palette perfectly with MOMO Pro v2 design tokens (Beige, Warm Ink, Caramel Orange) as per frontend upgrade roadmap
This commit is contained in:
OoO
@@ -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": [
|
||||
|
||||
@@ -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={[
|
||||
|
||||
@@ -417,3 +417,81 @@ ewoooc-handoff/
|
||||
|
||||
> 有任何視覺或行為不確定的地方，**以 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` 取得真實實作。
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,14 +1,47 @@
|
||||
// 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 className="momo-scroll" style={{
|
||||
overflowX: 'auto',
|
||||
paddingBottom: 4, // for scrollbar
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'inline-flex',
|
||||
background: 'var(--momo-bg-surface)',
|
||||
border: '1px solid var(--momo-border-light)',
|
||||
borderRadius: 6, padding: 4,
|
||||
borderRadius: 4, padding: 3,
|
||||
gap: 2,
|
||||
}}>
|
||||
{ids.map(id => {
|
||||
@@ -17,108 +50,97 @@ const CampaignSwitcher = ({ active, setActive, campaigns }) => {
|
||||
return (
|
||||
<button key={id} onClick={() => setActive(id)} style={{
|
||||
padding: '8px 14px',
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||
fontSize: 13, fontWeight: 600,
|
||||
color: isActive ? '#fff' : 'var(--momo-text-secondary)',
|
||||
color: isActive ? '#faf7f0' : 'var(--momo-text-secondary)',
|
||||
background: isActive ? 'var(--momo-ink)' : 'transparent',
|
||||
border: 'none', borderRadius: 4,
|
||||
border: 'none', borderRadius: 2,
|
||||
transition: 'var(--momo-transition-base)',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
<span style={{ fontSize: 13 }}>{c.icon}</span>
|
||||
<span>{c.name}</span>
|
||||
<span className="momo-mono" style={{
|
||||
fontSize: 10, fontWeight: 700,
|
||||
padding: '1px 6px', borderRadius: 8,
|
||||
background: isActive ? 'rgba(255,255,255,0.2)' : 'var(--momo-bg-subtle)',
|
||||
color: isActive ? '#fff' : 'var(--momo-text-tertiary)',
|
||||
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 監控概況） =====
|
||||
const CampaignHero = ({ c, activeId }) => {
|
||||
// 不同活動用不同色相
|
||||
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;
|
||||
|
||||
// ===== Hero V1：簡約（米白卡 + 左 4px 直條） =====
|
||||
const HeroSimple = ({ c, activeId }) => {
|
||||
const accent = CAMPAIGN_ACCENTS[activeId] || 'var(--momo-accent)';
|
||||
return (
|
||||
<Card cardStyle="flat" padding={false} style={{
|
||||
padding: 24,
|
||||
background: `linear-gradient(160deg, ${c1} 0%, ${c2} 50%, ${c3} 100%)`,
|
||||
color: '#fff', border: 'none', borderRadius: 8,
|
||||
position: 'relative', overflow: 'hidden',
|
||||
minHeight: 200,
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
background: 'var(--momo-bg-surface)',
|
||||
border: '1px solid var(--momo-border-light)',
|
||||
borderRadius: 8, padding: '28px 32px',
|
||||
paddingLeft: 36,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* 點陣裝飾 */}
|
||||
<div style={{ position: 'absolute', inset: 0,
|
||||
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>
|
||||
{/* 左側 4px 直條 */}
|
||||
<div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: accent }} />
|
||||
|
||||
<div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 16, height: '100%' }}>
|
||||
{/* 標籤列 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{
|
||||
padding: '3px 10px', fontSize: 10, fontWeight: 700,
|
||||
letterSpacing: '0.08em', textTransform: 'uppercase',
|
||||
background: 'rgba(255,255,255,0.18)',
|
||||
border: '1px solid rgba(255,255,255,0.25)',
|
||||
borderRadius: 12,
|
||||
<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',
|
||||
}}>CAMPAIGN</span>
|
||||
<span className="momo-mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
|
||||
<span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-tertiary)' }}>
|
||||
ID · {activeId.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 標題 */}
|
||||
<h1 style={{ margin: 0, fontSize: 36, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
|
||||
{c.name}
|
||||
</h1>
|
||||
<h1 style={{
|
||||
margin: 0, fontSize: 36, fontWeight: 800,
|
||||
lineHeight: 1.1, letterSpacing: '-0.02em',
|
||||
color: 'var(--momo-text-primary)', marginBottom: 18,
|
||||
}}>{c.name}</h1>
|
||||
|
||||
{/* meta 列 */}
|
||||
<div style={{ display: 'flex', gap: 24, flexWrap: 'wrap', fontSize: 12, fontFamily: 'var(--momo-font-family-mono)' }}>
|
||||
<div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', fontFamily: 'var(--momo-font-family-mono)' }}>
|
||||
<div>
|
||||
<div style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>活動時段</div>
|
||||
<div style={{ color: '#fff', fontWeight: 600 }}>{c.time}</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 style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>最後更新</div>
|
||||
<div style={{ color: '#fff', fontWeight: 600 }}>{c.lastUpdate}</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 style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 2 }}>商品總數</div>
|
||||
<div className="momo-mono" style={{ color: '#fff', fontWeight: 800, fontSize: 20, letterSpacing: '-0.02em' }}>
|
||||
<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: 'auto' }}>
|
||||
<div style={{ display: 'flex', gap: 8, marginTop: 20 }}>
|
||||
<button style={{
|
||||
padding: '8px 14px', fontSize: 13, fontWeight: 600,
|
||||
background: 'rgba(255,255,255,0.15)', color: '#fff',
|
||||
border: '1px solid rgba(255,255,255,0.25)', borderRadius: 4,
|
||||
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: 13, fontWeight: 600,
|
||||
background: '#fff', color: c1,
|
||||
padding: '8px 14px', fontSize: 12, fontWeight: 600,
|
||||
background: 'var(--momo-ink)', color: '#faf7f0',
|
||||
border: 'none', borderRadius: 4,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
}}>
|
||||
@@ -127,73 +149,237 @@ const CampaignHero = ({ c, activeId }) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
// ===== Hero KPI 區（右側，4 顆數字） =====
|
||||
const CampaignKPIs = ({ stats, schedule }) => {
|
||||
const kpis = [
|
||||
{ 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)' },
|
||||
];
|
||||
// ===== Hero V2：點陣（Nothing 招牌） =====
|
||||
const HeroDotted = ({ c, activeId }) => {
|
||||
const accent = CAMPAIGN_ACCENTS[activeId] || 'var(--momo-accent)';
|
||||
return (
|
||||
<Card cardStyle="flat" padding={false} style={{
|
||||
<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 var(--momo-border-light)', borderRadius: 8,
|
||||
display: 'flex', flexDirection: 'column',
|
||||
}}>
|
||||
<div style={{ padding: '14px 20px', borderBottom: '1px solid var(--momo-border-light)', display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Icon name="trendUp" size={14} />
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.02em' }}>活動數據</span>
|
||||
border: `1px solid ${accent}`,
|
||||
borderRadius: 2,
|
||||
}}>CAMPAIGN / {activeId.toUpperCase()}</span>
|
||||
</div>
|
||||
<div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, flex: 1 }}>
|
||||
{kpis.map(k => (
|
||||
<div key={k.label} style={{
|
||||
padding: 12, background: 'var(--momo-bg-paper)',
|
||||
border: '1px solid var(--momo-border-light)', borderRadius: 6,
|
||||
display: 'flex', flexDirection: 'column', gap: 4,
|
||||
|
||||
<h1 className="camp-hero-title" style={{
|
||||
margin: 0, fontSize: 40, fontWeight: 800,
|
||||
lineHeight: 1.05, letterSpacing: '-0.025em',
|
||||
color: 'var(--momo-text-primary)', marginBottom: 20,
|
||||
fontFamily: 'var(--momo-font-display)',
|
||||
}}>{c.name}</h1>
|
||||
|
||||
<div className="camp-hero-meta-row" style={{ display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'flex-end' }}>
|
||||
<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: 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 className="momo-mono" style={{ fontSize: 13, fontWeight: 600, color: 'var(--momo-text-primary)' }}>{c.lastUpdate}</div>
|
||||
</div>
|
||||
<div className="camp-hero-total-wrap" style={{ marginLeft: 'auto', textAlign: 'right' }}>
|
||||
<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 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 }}>
|
||||
<button style={{
|
||||
padding: '8px 14px', fontSize: 12, fontWeight: 600,
|
||||
background: 'var(--momo-bg-surface)', color: 'var(--momo-text-primary)',
|
||||
border: '1px solid var(--momo-border-light)', borderRadius: 4,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 6,
|
||||
}}>
|
||||
<div style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>{k.label}</div>
|
||||
<div className="momo-mono" style={{ fontSize: 26, fontWeight: 800, color: k.color, letterSpacing: '-0.02em', lineHeight: 1 }}>
|
||||
{k.value.toLocaleString()}
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ===== Hero V3：反差（暖墨底 + accent 點綴，呼應 dashboard 反白 KPI） =====
|
||||
const HeroInverse = ({ c, activeId }) => {
|
||||
const accent = CAMPAIGN_ACCENTS[activeId] || 'var(--momo-accent)';
|
||||
return (
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
background: 'var(--momo-ink)',
|
||||
borderRadius: 8, padding: '28px 32px',
|
||||
overflow: 'hidden',
|
||||
color: '#faf7f0',
|
||||
}}>
|
||||
{/* 點陣裝飾 */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
backgroundImage: 'radial-gradient(circle, rgba(250,247,240,0.06) 1px, transparent 1px)',
|
||||
backgroundSize: '12px 12px', pointerEvents: 'none',
|
||||
}} />
|
||||
|
||||
<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',
|
||||
}}>● CAMPAIGN</span>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
// ===== 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>
|
||||
{/* 排程列 */}
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
// ===== 時段切片改為時間軸（限時搶購用） =====
|
||||
// ===== 時段時間軸（限時搶購用） — 去花俏化 =====
|
||||
const TimeSlotTimeline = ({ slots }) => {
|
||||
const max = Math.max(...slots.map(s => s.count), 1);
|
||||
return (
|
||||
<Card cardStyle="flat" padding={false} style={{
|
||||
padding: 20, background: 'var(--momo-bg-surface)',
|
||||
<div style={{
|
||||
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', gap: 8 }}>
|
||||
<Icon name="clock" size={14} />
|
||||
<span style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.02em' }}>時段排程</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--momo-text-tertiary)', fontFamily: 'var(--momo-font-family-mono)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
|
||||
<div className="momo-mono" style={{
|
||||
fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
|
||||
color: 'var(--momo-text-tertiary)', textTransform: 'uppercase',
|
||||
}}>時段排程</div>
|
||||
<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),
|
||||
borderRadius: '3px 3px 0 0',
|
||||
opacity: s.active ? 1 : (s.count === 0 ? 0.12 : 0.6),
|
||||
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,
|
||||
background: 'var(--momo-accent)', color: '#fff',
|
||||
fontSize: 10, fontWeight: 700, fontFamily: 'var(--momo-font-family-mono)',
|
||||
padding: '2px 6px', borderRadius: 2,
|
||||
background: 'var(--momo-accent)', color: '#faf7f0',
|
||||
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 }}>
|
||||
<Icon name="tag" size={13} />
|
||||
<span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.02em', color: 'var(--momo-text-primary)' }}>
|
||||
分類 <span className="momo-mono" style={{ fontWeight: 500, color: 'var(--momo-text-tertiary)', marginLeft: 4 }}>{cats.length}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="momo-mono" style={{
|
||||
fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
|
||||
color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 10,
|
||||
}}>分類 / {cats.length}</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)',
|
||||
borderRadius: 4,
|
||||
color: isActive ? '#faf7f0' : 'var(--momo-text-secondary)',
|
||||
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)',
|
||||
color: isActive ? 'rgba(255,255,255,0.9)' : 'var(--momo-text-tertiary)',
|
||||
background: isActive ? 'rgba(250,247,240,0.18)' : 'var(--momo-bg-subtle)',
|
||||
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' },
|
||||
danger: { bg: '#fee2e2', fg: '#b91c1c' },
|
||||
success: { bg: '#d1fae5', fg: '#047857' },
|
||||
warning: { bg: '#fef3c7', fg: '#92400e' },
|
||||
info: { bg: 'var(--momo-info-bg)', fg: 'var(--momo-info-text)' },
|
||||
danger: { bg: 'var(--momo-danger-bg)', fg: 'var(--momo-danger-text)' },
|
||||
success: { bg: 'var(--momo-success-bg)', fg: 'var(--momo-success-text)' },
|
||||
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,
|
||||
letterSpacing: '0.02em',
|
||||
background: t.bg, color: t.fg, borderRadius: 2,
|
||||
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' }}>
|
||||
<span style={{
|
||||
display: 'inline-block', padding: '3px 10px', fontSize: 11,
|
||||
background: '#fff3cd', color: '#7a4f01', borderRadius: 12, whiteSpace: 'nowrap',
|
||||
<td className="camp-td-cat" style={{ padding: '14px 16px' }}>
|
||||
<span className="momo-mono" style={{
|
||||
display: 'inline-block', padding: '2px 8px', fontSize: 11,
|
||||
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 style={{ width: 14, height: 14, color: 'var(--momo-text-tertiary)', display: 'inline-flex' }}>
|
||||
<Icon name="copy" size={11} />
|
||||
</span>
|
||||
<span className="momo-mono">#{p.id}</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%)',
|
||||
color: '#7a4f01', border: '1px solid #f9d77a',
|
||||
borderRadius: 12, fontSize: 12, fontWeight: 700,
|
||||
background: 'var(--momo-accent-soft)',
|
||||
color: 'var(--momo-accent-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)' }}>
|
||||
商品列表 <span style={{ fontWeight: 500, color: 'var(--momo-text-secondary)' }}>({total.toLocaleString()} 筆)</span>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
|
||||
<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: '商品資訊' },
|
||||
{ label: '價格', w: 150, align: 'right' },
|
||||
{ label: isFlash ? '倒數組數' : '狀態', w: 130, align: 'right' },
|
||||
{ label: '分類', sub: 'CATEGORY', w: 140 },
|
||||
{ label: '商品資訊', sub: 'PRODUCT' },
|
||||
{ label: '價格', sub: 'PRICE', w: 160, 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,26 +632,51 @@ 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 雙欄 */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
|
||||
<CampaignHero c={c} activeId={active} />
|
||||
{/* 01 - Hero */}
|
||||
<div>
|
||||
<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>
|
||||
|
||||
{/* 時段時間軸（僅限時搶購） */}
|
||||
{c.timeSlots && <TimeSlotTimeline slots={c.timeSlots} />}
|
||||
{/* 03 - 時段排程（限時搶購） */}
|
||||
{c.timeSlots && (
|
||||
<div>
|
||||
<CampSectionLabel num="03" sub={`24H · ${c.timeSlots.reduce((a,b)=>a+b.count,0)} 件`}>時段排程</CampSectionLabel>
|
||||
<TimeSlotTimeline slots={c.timeSlots} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分類 chips */}
|
||||
{c.categories && <CategoryChips cats={c.categories} activeIdx={catIdx} setActive={setCatIdx} />}
|
||||
{/* 04 - 分類 */}
|
||||
{c.categories && (
|
||||
<div>
|
||||
<CampSectionLabel num={c.timeSlots ? '04' : '03'} sub={`${c.categories.length} 個分類`}>分類篩選</CampSectionLabel>
|
||||
<CategoryChips cats={c.categories} activeIdx={catIdx} setActive={setCatIdx} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 商品列表 */}
|
||||
{/* 05 - 商品列表 */}
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 顆並排，扁平、靠線分隔） =====
|
||||
const KPIRow = ({ stats, dynamics }) => {
|
||||
// ===== KPI 大數字（6 顆並排，對齊正式環境） =====
|
||||
const KPIRow = ({ stats, dynamics, onAiClick }) => {
|
||||
const items = [
|
||||
{ label: '監控總數', value: stats.total.toLocaleString(), sub: `本週 +${stats.weekGrowth}` },
|
||||
{ label: '今日變動', value: dynamics.activeCount, sub: `活躍度 ${dynamics.activity}%`, accent: true },
|
||||
{ label: '漲價', value: dynamics.priceUp, sub: `平均 +$${dynamics.avgUp}`, tone: 'danger' },
|
||||
{ label: '降價', value: dynamics.priceDown, sub: `平均 -$${Math.abs(dynamics.avgDown)}`, tone: 'success' },
|
||||
{ label: '比價覆蓋率', value: '31.5%', sub: `${(2121).toLocaleString()} / ${stats.total.toLocaleString()} ACTIVE`, tone: 'caramel' },
|
||||
{ label: 'PChome 領先', value: 784, sub: '平均壓低 +12.0%', tone: 'ink', accent: true },
|
||||
{ label: 'MOMO 領先', value: 952, sub: 'MOMO 價格低於 PChome' },
|
||||
{ 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={{
|
||||
display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
|
||||
<div className="dash-kpis" style={{
|
||||
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={{
|
||||
padding: '20px 24px',
|
||||
<div key={i}
|
||||
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',
|
||||
color: it.accent ? 'rgba(250,247,240,0.6)' : 'var(--momo-text-tertiary)',
|
||||
textTransform: 'uppercase', marginBottom: 10,
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
|
||||
color: it.accent ? 'rgba(250,247,240,0.65)' : 'var(--momo-text-secondary)',
|
||||
textTransform: 'uppercase', marginBottom: 12,
|
||||
}}>
|
||||
{it.label}
|
||||
</div>
|
||||
<div className="momo-mono" style={{
|
||||
fontSize: 44, fontWeight: 700,
|
||||
color: it.accent ? '#faf7f0' : toneColor(it.tone),
|
||||
letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8,
|
||||
<div className="momo-mono dash-kpi-num" style={{
|
||||
fontSize: 32, fontWeight: 700,
|
||||
color: it.accent ? '#faf7f0' : (colorMap[it.tone] || 'var(--momo-text-primary)'),
|
||||
letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 10,
|
||||
}}>
|
||||
{typeof it.value === 'number' ? it.value.toLocaleString() : it.value}
|
||||
</div>
|
||||
<div className="momo-mono" style={{
|
||||
fontSize: 11,
|
||||
color: it.accent ? 'rgba(250,247,240,0.7)' : 'var(--momo-text-secondary)',
|
||||
fontSize: 12,
|
||||
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',
|
||||
color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 8,
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
|
||||
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',
|
||||
color: 'var(--momo-text-tertiary)', textTransform: 'uppercase', marginBottom: 8,
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
|
||||
color: 'var(--momo-text-secondary)', textTransform: 'uppercase', marginBottom: 10,
|
||||
}}>最大變動</div>
|
||||
<div className="momo-mono" style={{
|
||||
fontSize: 24, fontWeight: 700, color: 'var(--momo-danger)',
|
||||
letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6,
|
||||
fontSize: 26, fontWeight: 700, color: 'var(--momo-warm-rust)',
|
||||
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',
|
||||
color: 'var(--momo-text-tertiary)', textTransform: 'uppercase',
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
|
||||
color: 'var(--momo-text-secondary)', textTransform: 'uppercase',
|
||||
}}>爬蟲排程</span>
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 4,
|
||||
fontSize: 10, fontWeight: 700,
|
||||
display: 'inline-flex', alignItems: 'center', gap: 5,
|
||||
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)',
|
||||
letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6,
|
||||
fontSize: 22, fontWeight: 700, color: 'var(--momo-text-primary)',
|
||||
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、安靜） =====
|
||||
const ProductTable = ({ products, total, schedule, onRowClick }) => (
|
||||
// ===== Helper：模擬 PChome 價格與警報判斷（接真資料前的 placeholder） =====
|
||||
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: 110, align: 'right' },
|
||||
{ label: '週漲跌', w: 110, align: 'right' },
|
||||
{ label: '更新時間', w: 120, align: 'right' },
|
||||
{ label: '上架時間', w: 110, align: 'right' },
|
||||
{ label: '雙平台價格', w: 180, align: 'right' },
|
||||
{ label: '警報判斷', w: 150 },
|
||||
{ label: '昨日', w: 90, align: 'right' },
|
||||
{ label: '本週', w: 90, align: 'right' },
|
||||
{ label: '更新時間', w: 110, align: 'right' },
|
||||
].map((h, i) => (
|
||||
<th key={i} style={{
|
||||
padding: '10px 16px', textAlign: h.align || 'left', width: h.w,
|
||||
fontSize: 10, fontWeight: 700, whiteSpace: 'nowrap',
|
||||
color: 'var(--momo-text-tertiary)',
|
||||
padding: '11px 16px', textAlign: h.align || 'left', width: h.w,
|
||||
fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
|
||||
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)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
|
||||
onMouseEnter={e => {
|
||||
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={{
|
||||
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>
|
||||
<Tag tone="earth" size="sm">{p.category}</Tag>
|
||||
</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)',
|
||||
lineHeight: 1.4, marginBottom: 2,
|
||||
fontSize: 14, fontWeight: 500, color: 'var(--momo-text-primary)',
|
||||
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)' }}>
|
||||
${p.price.toLocaleString()}
|
||||
</span>
|
||||
<PriceCompareCell momo={p.price} pchome={pchome} />
|
||||
</td>
|
||||
<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: 11, color: 'var(--momo-text-tertiary)' }}>{p.listedAt}</td>
|
||||
<td style={{ padding: '14px 16px', textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 12, color: 'var(--momo-text-secondary)' }}>{p.updatedAt}</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>
|
||||
<KPIRow stats={m} dynamics={p} />
|
||||
<SectionLabel num="01" sub="LIVE · 更新於 12:54">比價監控總覽</SectionLabel>
|
||||
<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：篩選 + 列表 */}
|
||||
<section style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<SectionLabel num="03" sub={`${filtered.length} / ${m.total.toLocaleString()}`}>商品列表</SectionLabel>
|
||||
{/* 區塊 3：比價決策焦點（新增） */}
|
||||
<section>
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -125,16 +125,7 @@ const ProductsPage = ({ density = 'comfortable', cardStyle = 'flat', buttonStyle
|
||||
#{p.id}
|
||||
</td>
|
||||
<td style={{ padding: rowPad }}>
|
||||
<span style={{
|
||||
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>
|
||||
<Tag tone="earth" size="sm">{p.category}</Tag>
|
||||
</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' }}>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -619,3 +619,4 @@ function DCPostIt({ children, top, left, right, bottom, rotate = -2, width = 180
|
||||
}
|
||||
|
||||
Object.assign(window, { DesignCanvas, DCSection, DCArtboard, DCPostIt });
|
||||
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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 |
|
||||
|
||||
## 工作項目
|
||||
|
||||
|
||||
@@ -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,7 +134,7 @@ 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)
|
||||
|
||||
@@ -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(
|
||||
model_name=MCP_MODEL,
|
||||
tools=["google_search_retrieval"],
|
||||
)
|
||||
response = model.generate_content(
|
||||
f"請用繁體中文整理以下主題的最新資訊，提供具體數據與洞察，500字以內：\n{query}"
|
||||
)
|
||||
prompt = f"請用繁體中文整理以下主題的最新資訊，提供具體數據與洞察，500字以內：\n{query}"
|
||||
response = None
|
||||
last_error = None
|
||||
for tools in (["google_search"], ["google_search_retrieval"], None):
|
||||
try:
|
||||
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 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)
|
||||
|
||||
# ── 公開介面 ────────────────────────────────────────────────────────────
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
# ── 調色盤 (對齊前端現代化風格) ──────────────────────────────────────────────────
|
||||
_BG_DARK = "1E3C72" # Web Navbar 深藍
|
||||
_BRAND_OG = "4F46E5" # Primary Indigo
|
||||
_BRAND_OG2 = "6366F1" # Light Indigo
|
||||
_WHITE = "FFFFFF"
|
||||
_LIGHT_GRAY = "F8F9FA" # 柔和卡片灰
|
||||
_DARK_TEXT = "2C3E50" # 現代化深色文字
|
||||
_SUBTEXT = "6C757D" # 標籤灰
|
||||
_FOOTER_BG = "1F2937" # 底部深灰
|
||||
_BLUE_KPI = "3498DB" # Web Accent Blue
|
||||
_GREEN_KPI = "10B981" # Emerald 綠
|
||||
_RED_WARN = "EF4444" # Red 警告
|
||||
# ── 調色盤 (對齊 EwoooC 新版設計 Token: 暖米基底/暖墨/焦糖橘) ──────────────────────────
|
||||
_BG_DARK = "2A2520" # momo-ink (暖墨色)
|
||||
_BRAND_OG = "C96442" # momo-accent (焦糖橘)
|
||||
_BRAND_OG2 = "8F4530" # momo-warm-mahogany (深焦糖)
|
||||
_WHITE = "FAF7F0" # momo-bg-surface (米白卡片底，取代純白)
|
||||
_LIGHT_GRAY = "EBE6DC" # momo-bg-body (米色工作台背景)
|
||||
_DARK_TEXT = "2A2520" # momo-text-primary (暖墨文字)
|
||||
_SUBTEXT = "645C52" # momo-text-secondary (次要文字)
|
||||
_FOOTER_BG = "3D362F" # momo-ink-soft (底部深灰)
|
||||
_BLUE_KPI = "2D5D80" # momo-info (中性藍)
|
||||
_GREEN_KPI = "2A7A3F" # momo-success (去飽和綠)
|
||||
_RED_WARN = "B5342F" # momo-danger (暖紅)
|
||||
_BAR_PCHOME = "EF5350"
|
||||
_BAR_MOMO = "66BB6A"
|
||||
_BAR_TIE = "F59E0B"
|
||||
_BAR_MISS = "9E9E9E"
|
||||
_BAR_TIE = "B88416" # momo-warning (蜂蜜金)
|
||||
_BAR_MISS = "C4BAA8" # momo-text-disabled
|
||||
|
||||
_STRAT_COLORS = {
|
||||
'加碼': _BRAND_OG,
|
||||
|
||||
@@ -1,103 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
{% extends 'ewoooc_base.html' %}
|
||||
{% block title %}當日業績看板 - WOOO TECH{% endblock %}
|
||||
|
||||
<head>
|
||||
<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>
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
|
||||
min-height: 100vh;
|
||||
padding-top: 70px;
|
||||
.daily-sales-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.navbar-dark.bg-primary {
|
||||
background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
|
||||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||||
.daily-sales-hero {
|
||||
display: grid;
|
||||
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 {
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
.daily-sales-title {
|
||||
display: flex;
|
||||
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 {
|
||||
color: rgba(255, 255, 255, 0.9) !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;
|
||||
.daily-sales-title i {
|
||||
color: var(--momo-warm-caramel) !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid var(--momo-border-subtle) !important;
|
||||
border-radius: 8px;
|
||||
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);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 26px rgba(42, 37, 32, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-bottom: none;
|
||||
background: rgba(250, 247, 240, 0.9) !important;
|
||||
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;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: var(--momo-shadow-soft) !important;
|
||||
}
|
||||
|
||||
.kpi-card:hover {
|
||||
transform: translateY(-6px) scale(1.02);
|
||||
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18) !important;
|
||||
transform: translateY(-3px);
|
||||
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 */
|
||||
.navbar.bg-custom-dark {
|
||||
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
.daily-sales-page .table thead th,
|
||||
.daily-sales-page .table-light th {
|
||||
background: rgba(250, 247, 240, 0.96) !important;
|
||||
color: var(--momo-text-muted);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.navbar.bg-custom-dark .navbar-brand {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
@media (max-width: 768px) {
|
||||
.daily-sales-hero {
|
||||
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">
|
||||
{% include 'components/_navbar.html' %}
|
||||
|
||||
<div class="container-fluid px-4">
|
||||
{% block ewooo_content %}
|
||||
<div class="daily-sales-page">
|
||||
{% 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">
|
||||
<h4 class="mb-0 fw-bold"><i class="fas fa-calendar-day me-2 text-info"></i>當日業績看板</h4>
|
||||
<section class="daily-sales-hero page-header d-flex justify-content-between align-items-center">
|
||||
<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 %}
|
||||
|
||||
@@ -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()
|
||||
total_passed += passed
|
||||
total_failed += failed
|
||||
|
||||
passed, failed = test_validate_upload_file()
|
||||
total_passed += passed
|
||||
total_failed += failed
|
||||
try:
|
||||
test_allowed_file()
|
||||
test_validate_upload_file()
|
||||
except AssertionError:
|
||||
print("\n⚠️ 測試未通過，請檢查！")
|
||||
return 1
|
||||
|
||||
# 展示清理效果（不計入結果）
|
||||
test_secure_filename_cleaning()
|
||||
@@ -164,16 +160,11 @@ def main():
|
||||
print("="*60)
|
||||
print("測試結果摘要")
|
||||
print("="*60)
|
||||
print(f"✅ 通過: {total_passed}")
|
||||
print(f"❌ 失敗: {total_failed}")
|
||||
print(f"總計: {total_passed + total_failed}")
|
||||
print("✅ 通過: 測試函式完成")
|
||||
print("❌ 失敗: 0")
|
||||
|
||||
if total_failed == 0:
|
||||
print("\n🎉 所有檔案上傳驗證測試通過！")
|
||||
return 0
|
||||
else:
|
||||
print(f"\n⚠️ 有 {total_failed} 個測試失敗，請檢查！")
|
||||
return 1
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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
|
||||
else:
|
||||
print(f"\n⚠️ 有 {failed} 個測試失敗，請檢查！")
|
||||
return 1
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(test_safe_join())
|
||||
|
||||
@@ -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))
|
||||
|
||||
# 顯示結果
|
||||
|
||||
@@ -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()
|
||||
total_passed += passed
|
||||
total_failed += failed
|
||||
|
||||
passed, failed = test_column_name_validation()
|
||||
total_passed += passed
|
||||
total_failed += failed
|
||||
|
||||
passed, failed = test_timestamp_sanitization()
|
||||
total_passed += passed
|
||||
total_failed += failed
|
||||
try:
|
||||
test_table_name_validation()
|
||||
test_column_name_validation()
|
||||
test_timestamp_sanitization()
|
||||
except AssertionError:
|
||||
print(f"\n⚠️ 有 1 個測試區段未通過，請檢查！")
|
||||
return 1
|
||||
|
||||
# 顯示總結
|
||||
print("\n" + "="*60)
|
||||
print("測試結果摘要")
|
||||
print("="*60)
|
||||
print(f"✅ 通過: {total_passed}")
|
||||
print(f"❌ 失敗: {total_failed}")
|
||||
print(f"總計: {total_passed + total_failed}")
|
||||
print("✅ 通過: 3 個測試函式")
|
||||
print("❌ 失敗: 0")
|
||||
print("總計: 3")
|
||||
|
||||
if total_failed == 0:
|
||||
print("\n🎉 所有 SQL 注入防護測試通過！")
|
||||
return 0
|
||||
else:
|
||||
print(f"\n⚠️ 有 {total_failed} 個測試失敗，請檢查！")
|
||||
return 1
|
||||
|
||||
if __name__ == "__main__":
|
||||
sys.exit(main())
|
||||
|
||||
Reference in New Issue
Block a user