53edcc0077
ADR-017 Phase 3f-4：根目錄模板搬入 templates/，補 trends/login_history，移除 ChoiceLoader 根目錄 fallback，搬移 components，刪除 web/templates 下的空檔/死檔與 compose 舊模板 mount。
322 lines
13 KiB
HTML
322 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<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">
|
|
<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;
|
|
}
|
|
|
|
.navbar-dark.bg-primary {
|
|
background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%) !important;
|
|
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.navbar-dark .navbar-brand {
|
|
color: #ffffff !important;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.navbar.bg-custom-dark {
|
|
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
|
|
}
|
|
|
|
.function-card {
|
|
border: none;
|
|
border-radius: 20px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
overflow: hidden;
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
|
|
.function-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 16px 32px rgba(0,0,0,0.18);
|
|
}
|
|
|
|
.function-card .card-body {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.function-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 1.5rem;
|
|
display: inline-block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.function-card:hover .function-icon {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
.function-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.function-description {
|
|
color: #6c757d;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.btn-function {
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 50px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-import { border-top: 4px solid #3498db; }
|
|
.card-import .function-icon { color: #3498db; }
|
|
.card-import .btn-function { background: #3498db; color: white; border: none; }
|
|
.card-import .btn-function:hover { background: #2980b9; transform: scale(1.05); }
|
|
|
|
.card-list { border-top: 4px solid #2ecc71; }
|
|
.card-list .function-icon { color: #2ecc71; }
|
|
.card-list .btn-function { background: #2ecc71; color: white; border: none; }
|
|
.card-list .btn-function:hover { background: #27ae60; transform: scale(1.05); }
|
|
|
|
.card-vendor { border-top: 4px solid #9b59b6; }
|
|
.card-vendor .function-icon { color: #9b59b6; }
|
|
.card-vendor .btn-function { background: #9b59b6; color: white; border: none; }
|
|
.card-vendor .btn-function:hover { background: #8e44ad; transform: scale(1.05); }
|
|
|
|
.card-email { border-top: 4px solid #e74c3c; }
|
|
.card-email .function-icon { color: #e74c3c; }
|
|
.card-email .btn-function { background: #e74c3c; color: white; border: none; }
|
|
.card-email .btn-function:hover { background: #c0392b; transform: scale(1.05); }
|
|
|
|
.card-history { border-top: 4px solid #f39c12; }
|
|
.card-history .function-icon { color: #f39c12; }
|
|
.card-history .btn-function { background: #f39c12; color: white; border: none; }
|
|
.card-history .btn-function:hover { background: #e67e22; transform: scale(1.05); }
|
|
|
|
.page-header {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 16px;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: #2c3e50;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.page-header p {
|
|
color: #6c757d;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 導航列 -->
|
|
{% include 'components/_navbar.html' %}
|
|
|
|
<!-- 主要內容 -->
|
|
<div class="container-fluid" style="padding: 2rem;">
|
|
<!-- 頁面標題 -->
|
|
<div class="page-header">
|
|
<h1><i class="fas fa-box-open me-3"></i>廠商缺貨通知自動化系統</h1>
|
|
<p>管理缺貨商品資料、廠商聯絡資訊，並自動發送缺貨通知郵件</p>
|
|
</div>
|
|
|
|
<!-- 功能卡片 -->
|
|
<div class="row g-4">
|
|
<!-- Excel 匯入 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card function-card card-import">
|
|
<div class="card-body">
|
|
<div class="function-icon">
|
|
<i class="fas fa-file-excel"></i>
|
|
</div>
|
|
<h3 class="function-title">Excel 匯入</h3>
|
|
<p class="function-description">
|
|
匯入缺貨商品資料，系統會自動檢測重複項目並標記狀態
|
|
</p>
|
|
<a href="/vendor-stockout/import" class="btn btn-function">
|
|
<i class="fas fa-upload me-2"></i>開始匯入
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 缺貨清單 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card function-card card-list">
|
|
<div class="card-body">
|
|
<div class="function-icon">
|
|
<i class="fas fa-list-ul"></i>
|
|
</div>
|
|
<h3 class="function-title">缺貨清單</h3>
|
|
<p class="function-description">
|
|
查看、編輯、篩選已匯入的缺貨商品，支援批次操作與排序
|
|
</p>
|
|
<a href="/vendor-stockout/list" class="btn btn-function">
|
|
<i class="fas fa-search me-2"></i>查看清單
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 廠商管理 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card function-card card-vendor">
|
|
<div class="card-body">
|
|
<div class="function-icon">
|
|
<i class="fas fa-building"></i>
|
|
</div>
|
|
<h3 class="function-title">廠商管理</h3>
|
|
<p class="function-description">
|
|
管理廠商基本資料與聯絡郵件，支援多個郵件地址設定
|
|
</p>
|
|
<a href="/vendor-stockout/vendor-management" class="btn btn-function">
|
|
<i class="fas fa-users-cog me-2"></i>管理廠商
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 郵件發送 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card function-card card-email">
|
|
<div class="card-body">
|
|
<div class="function-icon">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</div>
|
|
<h3 class="function-title">郵件發送</h3>
|
|
<p class="function-description">
|
|
依廠商分組發送缺貨通知郵件，附件包含該廠商的缺貨清單
|
|
</p>
|
|
<a href="/vendor-stockout/send-email" class="btn btn-function">
|
|
<i class="fas fa-envelope me-2"></i>發送郵件
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 發送歷史 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card function-card card-history">
|
|
<div class="card-body">
|
|
<div class="function-icon">
|
|
<i class="fas fa-history"></i>
|
|
</div>
|
|
<h3 class="function-title">發送歷史</h3>
|
|
<p class="function-description">
|
|
查看郵件發送記錄、成功率統計，以及失敗項目的錯誤訊息
|
|
</p>
|
|
<a href="/vendor-stockout/history" class="btn btn-function">
|
|
<i class="fas fa-clock me-2"></i>查看記錄
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 下載範本 -->
|
|
<div class="col-md-6 col-lg-4">
|
|
<div class="card function-card" style="border-top: 4px solid #34495e;">
|
|
<div class="card-body">
|
|
<div class="function-icon" style="color: #34495e;">
|
|
<i class="fas fa-download"></i>
|
|
</div>
|
|
<h3 class="function-title">下載範本</h3>
|
|
<p class="function-description">
|
|
下載 Excel 匯入範本，確保資料格式正確無誤
|
|
</p>
|
|
<a href="/vendor-stockout/api/import/template" class="btn btn-function"
|
|
style="background: #34495e; color: white; border: none;">
|
|
<i class="fas fa-file-download me-2"></i>下載範本
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系統說明 -->
|
|
<div class="card mt-4" style="border-radius: 16px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-info-circle me-2 text-info"></i>系統使用說明
|
|
</h5>
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<h6><i class="fas fa-arrow-right text-primary me-2"></i>基本流程</h6>
|
|
<ol class="small text-muted">
|
|
<li>下載 Excel 範本，填入缺貨商品資料</li>
|
|
<li>使用「Excel 匯入」功能上傳檔案</li>
|
|
<li>在「缺貨清單」中檢視並編輯資料</li>
|
|
<li>在「廠商管理」中設定廠商郵件</li>
|
|
<li>使用「郵件發送」功能通知廠商</li>
|
|
<li>在「發送歷史」中查看執行結果</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6><i class="fas fa-arrow-right text-success me-2"></i>功能特色</h6>
|
|
<ul class="small text-muted">
|
|
<li>自動偵測重複資料並標記</li>
|
|
<li>支援一次匯入多筆缺貨記錄</li>
|
|
<li>依廠商分組自動產生郵件附件</li>
|
|
<li>郵件發送前可預覽內容</li>
|
|
<li>完整的操作記錄與錯誤追蹤</li>
|
|
<li>支援失敗郵件重新發送</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|