wooo/ewoooc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 新增廠商缺貨清單 V2

Browse Source
This commit is contained in:
OoO
2026-05-01 00:12:06 +08:00
parent c9247f7a79
commit 99d5bc8e81
7 changed files with 615 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
web/templates/vendor_stockout_index_v2.html
View File

@@ -1,246 +0,0 @@
{% extends 'ewoooc_base.html' %}
{% block title %}EwoooC 廠商缺貨{% endblock %}
{% block extra_css %}
<style>
.vendor-v2-stack { display: grid; gap: 24px; }
.vendor-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); gap: 12px; }
.vendor-hero-main, .vendor-panel, .vendor-action-card {
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border-light);
border-radius: 8px;
}
.vendor-hero-main {
position: relative;
min-height: 260px;
overflow: hidden;
padding: 28px;
color: var(--momo-text-inverse);
background: var(--momo-ink-strong);
}
.vendor-hero-main::before {
position: absolute;
inset: 0;
content: "";
background-image: radial-gradient(circle, rgba(201, 100, 66, 0.14) 1px, transparent 1px);
background-size: 9px 9px;
}
.vendor-hero-main > * { position: relative; }
.vendor-eyebrow, .vendor-section-label { display: flex; align-items: baseline; gap: 10px; }
.vendor-eyebrow { margin-bottom: 20px; }
.vendor-eyebrow span:first-child {
padding: 3px 10px;
border: 1px solid rgba(250, 247, 240, 0.24);
border-radius: var(--momo-radius-pill);
color: rgba(250, 247, 240, 0.76);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
}
.vendor-title {
max-width: 720px;
margin: 0 0 18px;
color: var(--momo-text-inverse);
font-size: clamp(34px, 5vw, 58px);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 0.95;
}
.vendor-subtitle {
max-width: 680px;
margin: 0;
color: rgba(250, 247, 240, 0.68);
font-size: 14px;
line-height: 1.7;
}
.vendor-hero-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.vendor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 36px;
padding: 8px 14px;
color: var(--momo-text-primary);
background: var(--momo-bg-surface);
border: 1px solid var(--momo-border);
border-radius: 4px;
font-size: 13px;
font-weight: 800;
text-decoration: none;
transition: var(--momo-transition-base);
}
.vendor-button:hover { color: var(--momo-text-primary); background: var(--momo-bg-paper); }
.vendor-button.is-inverse { color: var(--momo-ink); background: var(--momo-text-inverse); border-color: var(--momo-text-inverse); }
.vendor-button.is-ghost { color: var(--momo-text-inverse); background: rgba(250, 247, 240, 0.10); border-color: rgba(250, 247, 240, 0.24); }
.vendor-kpi-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.vendor-kpi { min-height: 130px; padding: 20px; border-right: 1px solid var(--momo-border-light); border-bottom: 1px solid var(--momo-border-light); }
.vendor-kpi:nth-child(2n) { border-right: 0; }
.vendor-kpi:nth-last-child(-n + 2) { border-bottom: 0; }
.vendor-kpi-label {
margin-bottom: 8px;
color: var(--momo-text-tertiary);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.vendor-kpi-value { margin-bottom: 8px; color: var(--momo-text-primary); font-size: 36px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.vendor-kpi-sub, .vendor-action-desc, .vendor-panel-meta { color: var(--momo-text-secondary); font-size: 12px; line-height: 1.6; }
.vendor-section-label { margin-bottom: 12px; }
.vendor-section-label .num { color: var(--momo-text-tertiary); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.vendor-section-label .title, .vendor-action-title, .vendor-panel-title { color: var(--momo-text-primary); font-size: 15px; font-weight: 800; }
.vendor-section-label .title { font-size: 13px; }
.vendor-action-grid, .vendor-signal-grid { display: grid; gap: 12px; }
.vendor-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vendor-signal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vendor-action-card, .vendor-panel { padding: 18px; }
.vendor-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 16px;
color: var(--momo-text-inverse);
background: var(--momo-ink);
border-radius: 6px;
}
.vendor-action-title, .vendor-panel-title { margin-bottom: 8px; }
.vendor-action-card .vendor-button { width: 100%; margin-top: 16px; }
.vendor-status-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--momo-border-light); }
.vendor-status-row:last-child { border-bottom: 0; }
.vendor-status-label { color: var(--momo-text-secondary); font-size: 12px; }
.vendor-status-value { color: var(--momo-text-primary); font-size: 12px; font-weight: 800; text-align: right; }
@media (max-width: 1100px) {
.vendor-hero, .vendor-signal-grid { grid-template-columns: 1fr; }
.vendor-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.vendor-action-grid, .vendor-kpi-panel { grid-template-columns: 1fr; }
.vendor-kpi, .vendor-kpi:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--momo-border-light); }
.vendor-kpi:last-child { border-bottom: 0; }
}
</style>
{% endblock %}
{% block ewooo_content %}
{% set stats = stats or {} %}
<div class="vendor-v2-stack">
<section class="vendor-hero">
<div class="vendor-hero-main">
<div class="vendor-eyebrow momo-mono">
<span>OPERATIONS</span>
<span>Vendor Stockout Control</span>
</div>
<h1 class="vendor-title">廠商缺貨通知自動化系統</h1>
<p class="vendor-subtitle">
串接正式缺貨匯入、廠商郵件與發送紀錄資料，集中追蹤待處理缺貨、通知成功率、廠商聯絡覆蓋與最近批次狀態。
</p>
<div class="vendor-hero-actions">
<a class="vendor-button is-inverse" href="/vendor-stockout/list"><i class="fas fa-list-ul"></i> 查看缺貨清單</a>
<a class="vendor-button is-ghost" href="/vendor-stockout/vendor-management"><i class="fas fa-building"></i> 管理廠商</a>
</div>
</div>
<aside class="vendor-kpi-panel vendor-panel">
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">待處理缺貨</div>
<div class="vendor-kpi-value momo-mono">{{ stats.get('pending_stockouts', 0) | number_format }}</div>
<div class="vendor-kpi-sub momo-mono">總缺貨 {{ stats.get('total_stockouts', 0) | number_format }}</div>
</div>
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">已發送</div>
<div class="vendor-kpi-value momo-mono" style="color:var(--momo-success);">{{ stats.get('sent_stockouts', 0) | number_format }}</div>
<div class="vendor-kpi-sub momo-mono">失敗 {{ stats.get('failed_stockouts', 0) | number_format }}</div>
</div>
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">活躍廠商</div>
<div class="vendor-kpi-value momo-mono">{{ stats.get('active_vendors', 0) | number_format }}</div>
<div class="vendor-kpi-sub momo-mono">停用 {{ stats.get('inactive_vendors', 0) | number_format }}</div>
</div>
<div class="vendor-kpi">
<div class="vendor-kpi-label momo-mono">郵件成功率</div>
<div class="vendor-kpi-value momo-mono" style="color:var(--momo-accent);">{{ stats.get('email_success_rate', 0) }}%</div>
<div class="vendor-kpi-sub momo-mono">寄送紀錄 {{ stats.get('email_total', 0) | number_format }}</div>
</div>
</aside>
</section>
<section>
<div class="vendor-section-label">
<span class="num momo-mono">02</span>
<span class="title">功能入口</span>
</div>
<div class="vendor-action-grid">
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-file-import"></i></div>
<div class="vendor-action-title">匯入缺貨資料</div>
<div class="vendor-action-desc">使用正式 Excel 匯入流程，建立批次缺貨紀錄並標記重複資料。</div>
<a class="vendor-button" href="/vendor-stockout/import">前往匯入</a>
</article>
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-table-list"></i></div>
<div class="vendor-action-title">缺貨清單</div>
<div class="vendor-action-desc">篩選、編輯、批次發信與追蹤缺貨商品處理狀態。</div>
<a class="vendor-button" href="/vendor-stockout/list">查看清單</a>
</article>
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-address-book"></i></div>
<div class="vendor-action-title">廠商管理</div>
<div class="vendor-action-desc">維護廠商主檔與多組收件、CC、BCC 郵件地址。</div>
<a class="vendor-button" href="/vendor-stockout/vendor-management">管理廠商</a>
</article>
<article class="vendor-action-card">
<div class="vendor-action-icon"><i class="fas fa-clock-rotate-left"></i></div>
<div class="vendor-action-title">發送歷史</div>
<div class="vendor-action-desc">檢查成功、失敗、待發送郵件紀錄與錯誤訊息。</div>
<a class="vendor-button" href="/vendor-stockout/history">查看歷史</a>
</article>
</div>
</section>
<section>
<div class="vendor-section-label">
<span class="num momo-mono">03</span>
<span class="title">真實資料訊號</span>
</div>
<div class="vendor-signal-grid">
<article class="vendor-panel">
<div class="vendor-panel-title">最近匯入</div>
<div class="vendor-panel-meta">
{% if stats.get('latest_import_time') %}
<div class="vendor-status-row"><span class="vendor-status-label">時間</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_import_time').strftime('%Y-%m-%d %H:%M') }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">廠商</span><span class="vendor-status-value">{{ stats.get('latest_import_vendor') or '未提供' }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">商品</span><span class="vendor-status-value">{{ stats.get('latest_import_product') or '未提供' }}</span></div>
{% else %}
尚未讀到缺貨匯入紀錄。
{% endif %}
</div>
</article>
<article class="vendor-panel">
<div class="vendor-panel-title">最近批次</div>
<div class="vendor-panel-meta">
{% if stats.get('latest_batch_id') %}
<div class="vendor-status-row"><span class="vendor-status-label">批次</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_batch_id') }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">筆數</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_batch_count', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">時間</span><span class="vendor-status-value momo-mono">{{ stats.get('latest_batch_time').strftime('%Y-%m-%d %H:%M') if stats.get('latest_batch_time') else '--' }}</span></div>
{% else %}
尚未讀到批次資訊。
{% endif %}
</div>
</article>
<article class="vendor-panel">
<div class="vendor-panel-title">郵件狀態</div>
<div class="vendor-panel-meta">
<div class="vendor-status-row"><span class="vendor-status-label">成功</span><span class="vendor-status-value momo-mono">{{ stats.get('email_success', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">失敗</span><span class="vendor-status-value momo-mono">{{ stats.get('email_failed', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">待發送</span><span class="vendor-status-value momo-mono">{{ stats.get('email_pending', 0) | number_format }}</span></div>
<div class="vendor-status-row"><span class="vendor-status-label">活躍 Email</span><span class="vendor-status-value momo-mono">{{ stats.get('active_emails', 0) | number_format }}</span></div>
</div>
</article>
</div>
</section>
</div>
{% endblock %}