124 lines
4.4 KiB
HTML
124 lines
4.4 KiB
HTML
{% extends 'ewoooc_base.html' %}
|
||
{% block title %}廠商缺貨通知系統 - WOOO TECH{% endblock %}
|
||
|
||
{#
|
||
v3 改寫重點：
|
||
- 從獨立 HTML 改為 extends ewoooc_base，吃到 sidebar + tokens
|
||
- 移除紫漸層 navbar (#4F46E5 → #6366F1) 與深藍漸層 (#1e3c72)
|
||
- 4 色功能卡片：藍/綠/紫/橘 → 焦糖/橄欖/赤陶/蜂蜜（語意 token）
|
||
- 卡片用 Jinja loop + dict 收斂 4 段重複 markup
|
||
- 移除 "card-import"（缺貨清單沒匯入卡片，源檔有3張卡）
|
||
#}
|
||
|
||
{% block extra_css %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/page-home.css') }}">
|
||
{% endblock %}
|
||
|
||
{% block ewooo_content %}
|
||
<div class="home-page" data-screen-label="home">
|
||
|
||
<!-- ============ Hero ============ -->
|
||
<header class="home-hero">
|
||
<div class="home-hero__lead">
|
||
<h1 class="home-hero__title">
|
||
<i class="fas fa-box-open" aria-hidden="true"></i>
|
||
廠商缺貨通知自動化系統
|
||
</h1>
|
||
<p class="home-hero__subtitle">管理缺貨商品資料、廠商聯絡資訊，自動發送缺貨通知郵件</p>
|
||
</div>
|
||
<div class="home-hero__decor" aria-hidden="true"></div>
|
||
</header>
|
||
|
||
<!-- ============ Function Cards ============ -->
|
||
{% set fn_cards = [
|
||
{
|
||
'variant': 'list',
|
||
'icon': 'list-ul',
|
||
'title': '缺貨清單',
|
||
'desc': '查看、編輯、篩選已匯入的缺貨商品，支援批次操作、發送郵件與排序',
|
||
'cta': '查看清單',
|
||
'cta_icon': 'search',
|
||
'href': '/vendor-stockout/list'
|
||
},
|
||
{
|
||
'variant': 'vendor',
|
||
'icon': 'building',
|
||
'title': '廠商管理',
|
||
'desc': '管理廠商基本資料與聯絡郵件，支援多個郵件地址設定',
|
||
'cta': '管理廠商',
|
||
'cta_icon': 'users-cog',
|
||
'href': '/vendor-stockout/vendor-management'
|
||
},
|
||
{
|
||
'variant': 'history',
|
||
'icon': 'history',
|
||
'title': '發送歷史',
|
||
'desc': '查看郵件發送記錄、成功率統計，以及失敗項目的錯誤訊息',
|
||
'cta': '查看記錄',
|
||
'cta_icon': 'clock',
|
||
'href': '/vendor-stockout/history'
|
||
}
|
||
] %}
|
||
|
||
<div class="row g-4 home-cards">
|
||
{% for c in fn_cards %}
|
||
<div class="col-md-6 col-lg-4">
|
||
<article class="fn-card fn--{{ c.variant }}">
|
||
<div class="fn-card__body">
|
||
<div class="fn-card__icon-wrap">
|
||
<i class="fas fa-{{ c.icon }}" aria-hidden="true"></i>
|
||
</div>
|
||
<h3 class="fn-card__title">{{ c.title }}</h3>
|
||
<p class="fn-card__desc">{{ c.desc }}</p>
|
||
<a href="{{ c.href }}" class="fn-card__cta">
|
||
<i class="fas fa-{{ c.cta_icon }}" aria-hidden="true"></i>
|
||
<span>{{ c.cta }}</span>
|
||
<i class="fas fa-arrow-right fn-card__cta-arrow" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<!-- ============ Help / Manual ============ -->
|
||
<section class="home-manual">
|
||
<header class="home-manual__head">
|
||
<h2 class="home-manual__title">
|
||
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
||
系統使用說明
|
||
</h2>
|
||
</header>
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<h3 class="home-manual__subhead">
|
||
<i class="fas fa-arrow-right" aria-hidden="true"></i>基本流程
|
||
</h3>
|
||
<ol class="home-manual__list home-manual__list--ordered">
|
||
<li>下載 Excel 範本，填入缺貨商品資料</li>
|
||
<li>在「缺貨清單」使用 Excel 匯入功能上傳檔案</li>
|
||
<li>在「缺貨清單」中檢視並編輯資料</li>
|
||
<li>在「廠商管理」中設定廠商郵件</li>
|
||
<li>在「缺貨清單」勾選商品後發送郵件通知廠商</li>
|
||
<li>在「發送歷史」中查看執行結果</li>
|
||
</ol>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h3 class="home-manual__subhead home-manual__subhead--alt">
|
||
<i class="fas fa-arrow-right" aria-hidden="true"></i>功能特色
|
||
</h3>
|
||
<ul class="home-manual__list">
|
||
<li>自動偵測重複資料並標記</li>
|
||
<li>支援一次匯入多筆缺貨記錄</li>
|
||
<li>依廠商分組自動產生郵件附件</li>
|
||
<li>郵件發送前可預覽內容</li>
|
||
<li>完整的操作記錄與錯誤追蹤</li>
|
||
<li>支援失敗郵件重新發送</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
{% endblock %}
|