Files
ewoooc/templates/edm_dashboard_v2.html
OoO 8e9fb3dd17
All checks were successful
CD Pipeline / deploy (push) Successful in 1m46s
feat(frontend): 將 V2 設為正式預設介面
2026-05-01 00:28:56 +08:00

748 lines
27 KiB
HTML

{% extends 'ewoooc_base.html' %}
{% block title %}EwoooC 活動看板{% endblock %}
{% block extra_css %}
<style>
.campaign-stack {
display: grid;
gap: 24px;
}
.campaign-switcher {
display: inline-flex;
max-width: 100%;
padding: 4px;
gap: 2px;
overflow-x: auto;
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border-light);
border-radius: 6px;
}
.campaign-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
color: var(--momo-text-secondary);
border-radius: 4px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: var(--momo-transition-base);
}
.campaign-tab:hover {
color: var(--momo-text-primary);
background: var(--momo-bg-paper);
}
.campaign-tab.is-active {
color: var(--momo-text-inverse);
background: var(--momo-ink);
}
.campaign-tab-count {
padding: 1px 6px;
color: var(--momo-text-tertiary);
background: var(--momo-bg-subtle);
border-radius: var(--momo-radius-pill);
font-size: 10px;
font-weight: 800;
}
.campaign-tab.is-active .campaign-tab-count {
color: var(--momo-text-inverse);
background: rgba(250, 247, 240, 0.22);
}
.campaign-hero-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 12px;
}
.campaign-hero {
position: relative;
min-height: 220px;
overflow: hidden;
padding: 24px;
color: #fff;
background: linear-gradient(160deg, #dc2626 0%, #ea580c 52%, #f97316 100%);
border-radius: 8px;
}
.campaign-hero.is-festival {
background: linear-gradient(160deg, #7c3aed 0%, #6d28d9 52%, #5b21b6 100%);
}
.campaign-hero.is-mothers-day {
background: linear-gradient(160deg, #db2777 0%, #be185d 52%, #9d174d 100%);
}
.campaign-hero.is-valentine-520 {
background: linear-gradient(160deg, #e11d48 0%, #be123c 52%, #9f1239 100%);
}
.campaign-hero.is-labor-day {
background: linear-gradient(160deg, #0891b2 0%, #0e7490 52%, #155e75 100%);
}
.campaign-hero::before {
position: absolute;
inset: 0;
content: "";
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
background-size: 12px 12px;
}
.campaign-hero-content {
position: relative;
display: flex;
min-height: 172px;
flex-direction: column;
gap: 16px;
}
.campaign-eyebrow {
display: flex;
align-items: center;
gap: 8px;
}
.campaign-eyebrow-label {
padding: 3px 10px;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: var(--momo-radius-pill);
background: rgba(255, 255, 255, 0.16);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.campaign-title {
margin: 0;
font-size: 36px;
font-weight: 800;
letter-spacing: 0;
line-height: 1.12;
}
.campaign-meta-grid {
display: flex;
gap: 24px;
flex-wrap: wrap;
font-size: 12px;
}
.campaign-meta-label {
margin-bottom: 2px;
color: rgba(255, 255, 255, 0.62);
}
.campaign-meta-value {
color: #fff;
font-weight: 800;
}
.campaign-actions {
display: flex;
gap: 8px;
margin-top: auto;
flex-wrap: wrap;
}
.campaign-action {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 8px 14px;
color: #fff;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 4px;
font-size: 13px;
font-weight: 800;
}
.campaign-action.is-light {
color: var(--momo-ink);
background: #fff;
border-color: #fff;
}
.campaign-kpi-panel {
display: flex;
flex-direction: column;
min-height: 220px;
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border-light);
border-radius: 8px;
}
.campaign-panel-title {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
border-bottom: 1px solid var(--momo-border-light);
font-size: 13px;
font-weight: 800;
}
.campaign-kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 20px;
flex: 1;
}
.campaign-kpi {
padding: 12px;
background: var(--momo-bg-paper);
border: 1px solid var(--momo-border-light);
border-radius: 6px;
}
.campaign-kpi-label {
margin-bottom: 4px;
color: var(--momo-text-secondary);
font-size: 11px;
}
.campaign-kpi-value {
color: var(--momo-text-primary);
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
}
.campaign-panel-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
color: var(--momo-text-secondary);
background: var(--momo-bg-paper);
border-top: 1px solid var(--momo-border-light);
border-radius: 0 0 8px 8px;
font-size: 11px;
}
.campaign-section-label {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 12px;
}
.campaign-section-label .num {
color: var(--momo-text-tertiary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
}
.campaign-section-label .title {
color: var(--momo-text-primary);
font-size: 13px;
font-weight: 800;
}
.campaign-slot-tabs {
display: flex;
gap: 8px;
padding-bottom: 4px;
overflow-x: auto;
}
.campaign-slot-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
color: var(--momo-text-secondary);
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border-light);
border-radius: 6px;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
}
.campaign-slot-tab.active {
color: var(--momo-text-inverse);
background: var(--momo-ink);
border-color: var(--momo-ink);
}
.campaign-slot-count {
color: inherit;
font-size: 10px;
}
.campaign-table-card {
overflow: hidden;
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border-light);
border-radius: 8px;
}
.campaign-table-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--momo-border-light);
flex-wrap: wrap;
}
.campaign-stat-badges {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.campaign-badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
color: var(--momo-text-secondary);
background: var(--momo-bg-paper);
border: 1px solid var(--momo-border-light);
border-radius: var(--momo-radius-pill);
font-size: 11px;
font-weight: 800;
}
.campaign-table-wrap {
overflow-x: auto;
}
.campaign-table {
width: 100%;
min-width: 920px;
border-collapse: collapse;
font-size: var(--momo-font-size-sm);
}
.campaign-table th {
padding: 11px 14px;
color: var(--momo-text-tertiary);
background: var(--momo-bg-paper);
border-bottom: 1px solid var(--momo-border-light);
font-family: var(--momo-font-family-mono);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
white-space: nowrap;
}
.campaign-table th a {
color: inherit;
text-decoration: none;
}
.campaign-table td {
padding: 14px;
border-bottom: 1px solid var(--momo-border-light);
vertical-align: middle;
}
.campaign-table tbody tr:hover {
background: var(--momo-bg-paper);
}
.campaign-product-cell {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.campaign-product-thumb {
width: 52px;
height: 52px;
flex: 0 0 auto;
object-fit: cover;
background: var(--momo-bg-paper);
border: 1px solid var(--momo-border-light);
border-radius: 6px;
}
.campaign-product-name {
display: -webkit-box;
overflow: hidden;
color: var(--momo-text-primary);
font-weight: 800;
line-height: 1.35;
text-decoration: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.campaign-product-name:hover {
color: var(--momo-accent);
}
.campaign-product-id {
margin-top: 4px;
color: var(--momo-text-tertiary);
font-size: 11px;
}
.campaign-category {
display: inline-flex;
max-width: 120px;
padding: 3px 8px;
overflow: hidden;
color: var(--momo-text-primary);
background: var(--momo-bg-subtle);
border: 1px solid var(--momo-border-light);
border-radius: var(--momo-radius-pill);
font-size: 11px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.campaign-price {
color: var(--momo-text-primary);
font-size: 16px;
font-weight: 800;
}
.campaign-old-price {
color: var(--momo-text-tertiary);
text-decoration: line-through;
}
.campaign-change-up {
color: var(--momo-danger);
font-weight: 800;
}
.campaign-change-down {
color: var(--momo-success);
font-weight: 800;
}
.campaign-empty {
padding: 48px 16px;
color: var(--momo-text-secondary);
text-align: center;
}
@media (max-width: 980px) {
.campaign-hero-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.campaign-title {
font-size: 28px;
}
.campaign-kpi-grid {
grid-template-columns: 1fr 1fr;
}
}
</style>
{% endblock %}
{% block ewooo_content %}
{% set current_endpoint = 'edm.' ~ current_promo_page ~ '_dashboard' %}
{% set current_stats = {'new': 0, 'up': 0, 'down': 0, 'delisted_last_run': 0, 'on_shelf': 0} %}
{% if active_tab in slot_stats %}
{% set current_stats = slot_stats[active_tab] %}
{% elif slot_stats %}
{% set current_stats = slot_stats.values() | list | first %}
{% endif %}
{% set task_key = 'festival_task' if current_promo_page == 'festival' else 'edm_task' %}
{% set run_list = scheduler_stats.get(task_key, []) %}
{% set latest_run = run_list[0] if run_list else None %}
<div class="campaign-stack">
<section>
<div class="campaign-switcher">
{% for page in promo_pages %}
<a class="campaign-tab {% if page.id == current_promo_page %}is-active{% endif %}" href="{{ page.url }}">
<span>{{ page.name }}</span>
{% if page.id == current_promo_page %}
<span class="campaign-tab-count momo-mono">{{ total_edm_products | number_format }}</span>
{% endif %}
</a>
{% endfor %}
</div>
</section>
<section class="campaign-hero-grid">
<div class="campaign-hero is-{{ current_promo_page|replace('_', '-') }}">
<div class="campaign-hero-content">
<div class="campaign-eyebrow">
<span class="campaign-eyebrow-label">CAMPAIGN</span>
<span class="momo-mono" style="font-size:11px;color:rgba(255,255,255,.72);">ID · {{ current_promo_page|upper }}</span>
</div>
<h1 class="campaign-title">{{ page_title }}</h1>
<div class="campaign-meta-grid momo-mono">
<div>
<div class="campaign-meta-label">活動時段</div>
<div class="campaign-meta-value">{{ activity_time }}</div>
</div>
<div>
<div class="campaign-meta-label">最後更新</div>
<div class="campaign-meta-value">{{ last_update }}</div>
</div>
<div>
<div class="campaign-meta-label">商品總數</div>
<div class="campaign-meta-value" style="font-size:20px;">{{ total_edm_products | number_format }}</div>
</div>
</div>
<div class="campaign-actions">
{% if current_promo_page == 'edm' %}
<button class="campaign-action" type="button" onclick="triggerEdmTask()">
<i class="fas fa-rotate"></i> 手動更新
</button>
<button class="campaign-action is-light" type="button" onclick="triggerNotification()">
<i class="fas fa-bell"></i> 發送通知
</button>
{% elif current_promo_page == 'festival' %}
<button class="campaign-action" type="button" onclick="triggerFestivalTask()">
<i class="fas fa-rotate"></i> 手動更新
</button>
{% endif %}
</div>
</div>
</div>
<aside class="campaign-kpi-panel">
<div class="campaign-panel-title">
<i class="fas fa-chart-line"></i>
<span>活動數據</span>
</div>
<div class="campaign-kpi-grid">
<div class="campaign-kpi">
<div class="campaign-kpi-label">上架商品</div>
<div class="campaign-kpi-value momo-mono">{{ current_stats.get('on_shelf', 0) | number_format }}</div>
</div>
<div class="campaign-kpi">
<div class="campaign-kpi-label">新品</div>
<div class="campaign-kpi-value momo-mono" style="color:var(--momo-info);">{{ current_stats.get('new', 0) | number_format }}</div>
</div>
<div class="campaign-kpi">
<div class="campaign-kpi-label">漲價</div>
<div class="campaign-kpi-value momo-mono" style="color:var(--momo-danger);">{{ current_stats.get('up', 0) | number_format }}</div>
</div>
<div class="campaign-kpi">
<div class="campaign-kpi-label">降價</div>
<div class="campaign-kpi-value momo-mono" style="color:var(--momo-success);">{{ current_stats.get('down', 0) | number_format }}</div>
</div>
</div>
<div class="campaign-panel-footer momo-mono">
{% if latest_run %}
<span class="momo-live-dot"></span>
<span>排程 · {{ latest_run.last_run }}</span>
<span>|</span>
<span>異動 {{ latest_run.get('changed_records', 0) }} 筆</span>
{% else %}
<span>尚無排程紀錄</span>
{% endif %}
</div>
</aside>
</section>
<section>
<div class="campaign-section-label">
<span class="num momo-mono">02</span>
<span class="title">時段</span>
</div>
{% if slot_stats %}
<div class="campaign-slot-tabs" role="tablist">
{% for slot, stats in slot_stats.items() %}
{% set slot_id = slugify(slot) %}
<button class="campaign-slot-tab {% if slot == active_tab %}active{% endif %}" id="slot-{{ slot_id }}-tab" data-bs-toggle="tab" data-bs-target="#slot-{{ slot_id }}" type="button" role="tab">
<span class="momo-mono">{{ slot }}</span>
<span class="campaign-slot-count momo-mono">{{ stats.get('on_shelf', 0) }} 件</span>
</button>
{% endfor %}
</div>
{% else %}
<div class="campaign-table-card">
<div class="campaign-empty">目前沒有可顯示的活動時段資料</div>
</div>
{% endif %}
</section>
{% if slot_stats %}
<section class="tab-content">
{% for slot, stats in slot_stats.items() %}
{% set slot_id = slugify(slot) %}
{% set items = grouped_items.get(slot, []) %}
<div class="tab-pane fade {% if slot == active_tab %}show active{% endif %}" id="slot-{{ slot_id }}" role="tabpanel">
<div class="campaign-table-card">
<div class="campaign-table-head">
<span class="momo-mono" style="font-size:11px;font-weight:800;color:var(--momo-text-tertiary);letter-spacing:.08em;">03</span>
<strong>商品列表</strong>
<span class="momo-mono" style="color:var(--momo-text-tertiary);font-size:12px;">{{ items|length }} 筆</span>
<div class="campaign-stat-badges">
<span class="campaign-badge">新品 {{ stats.get('new', 0) }}</span>
<span class="campaign-badge">漲價 {{ stats.get('up', 0) }}</span>
<span class="campaign-badge">降價 {{ stats.get('down', 0) }}</span>
<span class="campaign-badge">下架 {{ stats.get('delisted_last_run', 0) }}</span>
</div>
</div>
<div class="campaign-table-wrap">
<table class="campaign-table">
<thead>
<tr>
<th>分類</th>
<th>
{% set next_order_name = 'asc' if current_sort == 'name' and current_order == 'desc' else 'desc' %}
<a href="{{ url_for(current_endpoint, sort_by='name', order=next_order_name) }}">商品資訊</a>
</th>
<th class="text-end">
{% set next_order_price = 'asc' if current_sort == 'price' and current_order == 'desc' else 'desc' %}
<a href="{{ url_for(current_endpoint, sort_by='price', order=next_order_price) }}">價格</a>
</th>
<th class="text-center">
{% if current_promo_page == 'edm' %}
{% set next_order_qty = 'asc' if current_sort == 'remain_qty' and current_order == 'desc' else 'desc' %}
<a href="{{ url_for(current_endpoint, sort_by='remain_qty', order=next_order_qty) }}">倒數組數</a>
{% else %}
狀態
{% endif %}
</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td>
<span class="campaign-category">{{ item.main_category or '未分類' }}</span>
</td>
<td>
<div class="campaign-product-cell">
{% if item.image_url %}
<img class="campaign-product-thumb" src="{{ item.image_url }}" alt="{{ item.name }}" loading="lazy" referrerpolicy="no-referrer">
{% else %}
<div class="campaign-product-thumb d-flex align-items-center justify-content-center" style="color:var(--momo-text-tertiary);font-size:11px;">無圖</div>
{% endif %}
<div>
<a class="campaign-product-name" href="{{ item.url or '#' }}" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
<div class="campaign-product-id momo-mono">ID {{ item.i_code }}</div>
<div class="campaign-stat-badges" style="margin-top:6px;">
{% if item.status_change == 'NEW' %}
<span class="campaign-badge">NEW</span>
{% elif item.status_change == 'PRICE_DOWN' %}
<span class="campaign-badge" style="color:var(--momo-success);">降價</span>
{% elif item.status_change == 'PRICE_UP' %}
<span class="campaign-badge" style="color:var(--momo-danger);">漲價</span>
{% elif item.status_change in ['DELISTED', 'SLOT_END'] %}
<span class="campaign-badge">下架</span>
{% endif %}
{% if item.discount_text %}
<span class="campaign-badge">{{ item.discount_text }}</span>
{% endif %}
</div>
</div>
</div>
</td>
<td class="text-end momo-mono">
{% if item.previous_price and item.price and item.previous_price != item.price %}
{% set diff = item.price - item.previous_price %}
{% if diff < 0 %}
<div class="campaign-change-down">▼ {{ (diff|abs) | number_format }}</div>
{% else %}
<div class="campaign-change-up">▲ {{ diff | number_format }}</div>
{% endif %}
<div><span class="campaign-old-price">${{ item.previous_price | number_format }}</span></div>
<div class="campaign-price">${{ item.price | number_format }}</div>
{% elif item.price is not none %}
<span class="campaign-price">${{ item.price | number_format }}</span>
{% else %}
<span style="color:var(--momo-text-tertiary);">--</span>
{% endif %}
</td>
<td class="text-center momo-mono">
{% if current_promo_page == 'edm' %}
{% if item.remain_qty is not none %}
<span class="campaign-badge" style="color:var(--momo-warning-text);background:var(--momo-warning-bg);">剩 {{ item.remain_qty | number_format }} 組</span>
{% else %}
<span style="color:var(--momo-text-tertiary);">--</span>
{% endif %}
{% else %}
<span class="campaign-badge">{{ item.status_change or '活動中' }}</span>
{% endif %}
</td>
</tr>
{% else %}
<tr>
<td colspan="4">
<div class="campaign-empty">此時段目前沒有商品資料</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endfor %}
</section>
{% endif %}
</div>
{% endblock %}
{% block extra_js %}
<script>
function getCSRFToken() {
return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}
function triggerEdmTask() {
if (confirm('確定要手動執行 EDM 爬蟲嗎?')) {
fetch('/api/run_edm_task', {
method: 'POST',
headers: { 'X-CSRFToken': getCSRFToken() }
})
.then(response => response.json())
.then(data => alert(data.message))
.catch(error => alert('錯誤: ' + error));
}
}
function triggerFestivalTask() {
if (confirm('確定要手動執行節慶活動爬蟲嗎?')) {
fetch('/api/run_festival_task', {
method: 'POST',
headers: { 'X-CSRFToken': getCSRFToken() }
})
.then(response => response.json())
.then(data => alert(data.message))
.catch(error => alert('錯誤: ' + error));
}
}
function triggerNotification() {
if (confirm('確定要發送 EDM 活動通知嗎?')) {
fetch('/api/trigger_edm_notification', {
method: 'POST',
headers: { 'X-CSRFToken': getCSRFToken() }
})
.then(response => response.json())
.then(data => alert(data.message))
.catch(error => alert('錯誤: ' + error));
}
}
</script>
{% endblock %}