563 lines
20 KiB
HTML
563 lines
20 KiB
HTML
{% extends "ewoooc_base.html" %}
|
|
|
|
{% block title %}PChome 爬蟲 - EwoooC{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.pchome-tool-page {
|
|
color: var(--momo-text-primary);
|
|
}
|
|
|
|
.pchome-tool-head {
|
|
padding: var(--momo-space-4) var(--momo-space-5);
|
|
background: var(--momo-bg-surface);
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-md);
|
|
}
|
|
|
|
.pchome-tool-head h2 {
|
|
margin: 0;
|
|
color: var(--momo-text-primary);
|
|
font-family: var(--momo-font-display);
|
|
font-size: var(--momo-text-headline);
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.pchome-tool-head p,
|
|
.pchome-tool-page .text-muted {
|
|
color: var(--momo-text-secondary) !important;
|
|
}
|
|
|
|
.pchome-card-head {
|
|
background: var(--momo-bg-paper);
|
|
border-bottom: 1px solid var(--momo-border-light);
|
|
color: var(--momo-text-primary);
|
|
font-family: var(--momo-font-display);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.pchome-table-head th {
|
|
background: var(--momo-bg-paper) !important;
|
|
color: var(--momo-text-secondary) !important;
|
|
font-family: var(--momo-font-mono, monospace);
|
|
font-size: var(--momo-text-label);
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.pchome-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 22px;
|
|
padding: 3px 8px;
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-sm);
|
|
font-family: var(--momo-font-mono, monospace);
|
|
font-size: var(--momo-text-label);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.pchome-badge.is-danger {
|
|
background: var(--momo-danger-bg);
|
|
border-color: var(--momo-danger-border);
|
|
color: var(--momo-danger-text);
|
|
}
|
|
|
|
.pchome-badge.is-success {
|
|
background: var(--momo-success-bg);
|
|
border-color: var(--momo-success-border);
|
|
color: var(--momo-success-text);
|
|
}
|
|
|
|
.pchome-badge.is-muted {
|
|
background: var(--momo-tag-muted-bg);
|
|
border-color: var(--momo-tag-muted-border);
|
|
color: var(--momo-tag-muted-text);
|
|
}
|
|
|
|
.pchome-toast {
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
min-width: min(300px, calc(100vw - 40px));
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--momo-border-light);
|
|
border-radius: var(--momo-radius-md);
|
|
background: var(--momo-bg-elevated);
|
|
color: var(--momo-text-primary);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pchome-toast--success {
|
|
background: var(--momo-success-bg);
|
|
border-color: var(--momo-success-border);
|
|
color: var(--momo-success-text);
|
|
}
|
|
|
|
.pchome-toast--danger {
|
|
background: var(--momo-danger-bg);
|
|
border-color: var(--momo-danger-border);
|
|
color: var(--momo-danger-text);
|
|
}
|
|
|
|
.pchome-toast--warning {
|
|
background: var(--momo-warning-bg);
|
|
border-color: var(--momo-warning-border);
|
|
color: var(--momo-warning-text);
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.pchome-tool-head {
|
|
padding: var(--momo-space-4);
|
|
}
|
|
|
|
.pchome-tool-page .card-header {
|
|
align-items: flex-start !important;
|
|
flex-direction: column;
|
|
gap: var(--momo-space-2);
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4 pchome-tool-page">
|
|
<header class="pchome-tool-head mb-4">
|
|
<h2><i class="fas fa-spider me-2"></i>PChome 24h 爬蟲</h2>
|
|
<p class="text-muted">爬取 PChome 24h 商品資料</p>
|
|
</header>
|
|
|
|
<!-- 爬取方式選擇 -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header pchome-card-head">
|
|
<i class="fas fa-folder-open me-2"></i>館別爬取
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">選擇館別分類</label>
|
|
<select class="form-select" id="categorySelect">
|
|
<option value="">-- 選擇分類 --</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">選擇館別</label>
|
|
<select class="form-select" id="regionSelect" disabled>
|
|
<option value="">-- 先選擇分類 --</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary" id="crawlRegionBtn" disabled>
|
|
<i class="fas fa-download me-1"></i>開始爬取
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header pchome-card-head">
|
|
<i class="fas fa-search me-2"></i>關鍵字搜尋
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">搜尋關鍵字</label>
|
|
<input type="text" class="form-control" id="searchKeyword" placeholder="輸入商品關鍵字...">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">最多筆數</label>
|
|
<select class="form-select" id="searchLimit">
|
|
<option value="20">20 筆</option>
|
|
<option value="50" selected>50 筆</option>
|
|
<option value="100">100 筆</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary" id="searchBtn">
|
|
<i class="fas fa-search me-1"></i>搜尋
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 自訂 URL -->
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header pchome-card-head">
|
|
<i class="fas fa-link me-2"></i>自訂 URL 爬取
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-9 mb-2 mb-lg-0">
|
|
<label class="form-label">PChome 24h 頁面 URL</label>
|
|
<input type="url" class="form-control" id="customUrl"
|
|
placeholder="https://24h.pchome.com.tw/region/DDAB">
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<button class="btn btn-primary w-100" id="crawlCustomBtn">
|
|
<i class="fas fa-download me-1"></i>爬取
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 爬取進度 -->
|
|
<div class="row mb-4" id="progressSection" style="display: none;">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="spinner-border text-primary me-3" role="status">
|
|
<span class="visually-hidden">載入中...</span>
|
|
</div>
|
|
<div>
|
|
<strong id="progressText">正在爬取...</strong>
|
|
<br>
|
|
<small class="text-muted" id="progressDetail">請稍候</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 結果區域 -->
|
|
<div class="row" id="resultSection" style="display: none;">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="fas fa-list me-2"></i>爬取結果 (<span id="resultCount">0</span> 筆)</span>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary me-2" id="exportExcelBtn">
|
|
<i class="fas fa-file-excel me-1"></i>匯出 Excel
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="exportJsonBtn">
|
|
<i class="fas fa-file-code me-1"></i>匯出 JSON
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0" id="resultTable">
|
|
<thead class="pchome-table-head">
|
|
<tr>
|
|
<th style="width: 80px;">圖片</th>
|
|
<th>商品名稱</th>
|
|
<th style="width: 100px;">售價</th>
|
|
<th style="width: 100px;">原價</th>
|
|
<th style="width: 80px;">折扣</th>
|
|
<th style="width: 80px;">庫存</th>
|
|
<th style="width: 100px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="resultBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
let regionsData = {};
|
|
let categoriesData = {};
|
|
let currentProducts = [];
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadRegions();
|
|
bindEvents();
|
|
});
|
|
|
|
async function loadRegions() {
|
|
try {
|
|
const response = await fetch('/api/pchome/regions');
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
regionsData = data.data.regions;
|
|
categoriesData = data.data.categories;
|
|
|
|
// 填充分類下拉選單
|
|
const categorySelect = document.getElementById('categorySelect');
|
|
for (const cat of Object.keys(categoriesData)) {
|
|
const option = document.createElement('option');
|
|
option.value = cat;
|
|
option.textContent = cat;
|
|
categorySelect.appendChild(option);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('載入館別失敗:', error);
|
|
}
|
|
}
|
|
|
|
function bindEvents() {
|
|
// 分類選擇變更
|
|
document.getElementById('categorySelect').addEventListener('change', function() {
|
|
const category = this.value;
|
|
const regionSelect = document.getElementById('regionSelect');
|
|
const crawlBtn = document.getElementById('crawlRegionBtn');
|
|
|
|
regionSelect.innerHTML = '<option value="">-- 選擇館別 --</option>';
|
|
|
|
if (category && categoriesData[category]) {
|
|
for (const region of categoriesData[category]) {
|
|
const option = document.createElement('option');
|
|
option.value = region.code;
|
|
option.textContent = `${region.code} - ${region.name}`;
|
|
regionSelect.appendChild(option);
|
|
}
|
|
regionSelect.disabled = false;
|
|
} else {
|
|
regionSelect.disabled = true;
|
|
}
|
|
crawlBtn.disabled = true;
|
|
});
|
|
|
|
// 館別選擇變更
|
|
document.getElementById('regionSelect').addEventListener('change', function() {
|
|
document.getElementById('crawlRegionBtn').disabled = !this.value;
|
|
});
|
|
|
|
// 館別爬取
|
|
document.getElementById('crawlRegionBtn').addEventListener('click', crawlRegion);
|
|
|
|
// 搜尋
|
|
document.getElementById('searchBtn').addEventListener('click', searchProducts);
|
|
document.getElementById('searchKeyword').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') searchProducts();
|
|
});
|
|
|
|
// 自訂 URL 爬取
|
|
document.getElementById('crawlCustomBtn').addEventListener('click', crawlCustomUrl);
|
|
|
|
// 匯出
|
|
document.getElementById('exportExcelBtn').addEventListener('click', exportExcel);
|
|
document.getElementById('exportJsonBtn').addEventListener('click', exportJson);
|
|
}
|
|
|
|
async function crawlRegion() {
|
|
const regionCode = document.getElementById('regionSelect').value;
|
|
if (!regionCode) return;
|
|
|
|
const regionName = regionsData[regionCode]?.name || regionCode;
|
|
showProgress(`正在爬取 ${regionName}...`, '取得商品列表中');
|
|
|
|
try {
|
|
const response = await fetch('/api/pchome/crawl/region', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ region_code: regionCode })
|
|
});
|
|
|
|
const data = await response.json();
|
|
hideProgress();
|
|
|
|
if (data.success) {
|
|
currentProducts = data.data.products;
|
|
showResults(currentProducts);
|
|
showToast(`成功爬取 ${currentProducts.length} 個商品`, 'success');
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
hideProgress();
|
|
showToast('爬取失敗: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function searchProducts() {
|
|
const keyword = document.getElementById('searchKeyword').value.trim();
|
|
if (!keyword) {
|
|
showToast('請輸入搜尋關鍵字', 'warning');
|
|
return;
|
|
}
|
|
|
|
const limit = parseInt(document.getElementById('searchLimit').value);
|
|
showProgress(`搜尋 "${keyword}"...`, '查詢中');
|
|
|
|
try {
|
|
const response = await fetch('/api/pchome/search', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ keyword, limit })
|
|
});
|
|
|
|
const data = await response.json();
|
|
hideProgress();
|
|
|
|
if (data.success) {
|
|
currentProducts = data.data.products;
|
|
showResults(currentProducts);
|
|
showToast(`找到 ${currentProducts.length} 個商品`, 'success');
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
hideProgress();
|
|
showToast('搜尋失敗: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function crawlCustomUrl() {
|
|
const url = document.getElementById('customUrl').value.trim();
|
|
if (!url) {
|
|
showToast('請輸入 URL', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (!url.startsWith('https://24h.pchome.com.tw/')) {
|
|
showToast('僅支援 PChome 24h 網站', 'warning');
|
|
return;
|
|
}
|
|
|
|
showProgress(`爬取 URL...`, url);
|
|
|
|
try {
|
|
const response = await fetch('/api/pchome/crawl/custom', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ url })
|
|
});
|
|
|
|
const data = await response.json();
|
|
hideProgress();
|
|
|
|
if (data.success) {
|
|
currentProducts = data.data.products;
|
|
showResults(currentProducts);
|
|
showToast(`成功爬取 ${currentProducts.length} 個商品`, 'success');
|
|
} else {
|
|
showToast(data.message, 'danger');
|
|
}
|
|
} catch (error) {
|
|
hideProgress();
|
|
showToast('爬取失敗: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function showProgress(title, detail) {
|
|
document.getElementById('progressText').textContent = title;
|
|
document.getElementById('progressDetail').textContent = detail;
|
|
document.getElementById('progressSection').style.display = 'block';
|
|
document.getElementById('resultSection').style.display = 'none';
|
|
}
|
|
|
|
function hideProgress() {
|
|
document.getElementById('progressSection').style.display = 'none';
|
|
}
|
|
|
|
function showResults(products) {
|
|
document.getElementById('resultCount').textContent = products.length;
|
|
document.getElementById('resultSection').style.display = 'block';
|
|
|
|
const tbody = document.getElementById('resultBody');
|
|
tbody.innerHTML = '';
|
|
|
|
for (const p of products) {
|
|
const discount = p.discount ? `<span class="pchome-badge is-danger">-${p.discount}%</span>` : '-';
|
|
const stockBadge = p.stock > 0
|
|
? `<span class="pchome-badge is-success">${p.stock}</span>`
|
|
: `<span class="pchome-badge is-muted">缺貨</span>`;
|
|
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>
|
|
<img src="${p.image_url}?width=80" alt="" class="img-thumbnail"
|
|
style="width: 60px; height: 60px; object-fit: cover;"
|
|
onerror="this.src='/static/images/no-image.png'">
|
|
</td>
|
|
<td>
|
|
<a href="${p.product_url}" target="_blank" class="text-decoration-none">
|
|
${escapeHtml(p.name.substring(0, 50))}${p.name.length > 50 ? '...' : ''}
|
|
</a>
|
|
<br>
|
|
<small class="text-muted">${p.product_id}</small>
|
|
</td>
|
|
<td class="text-danger fw-bold">$${p.price.toLocaleString()}</td>
|
|
<td class="text-muted"><s>$${p.original_price.toLocaleString()}</s></td>
|
|
<td>${discount}</td>
|
|
<td>${stockBadge}</td>
|
|
<td>
|
|
<a href="${p.product_url}" target="_blank" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function exportExcel() {
|
|
if (!currentProducts.length) {
|
|
showToast('沒有資料可匯出', 'warning');
|
|
return;
|
|
}
|
|
|
|
// 建立 CSV
|
|
const headers = ['商品ID', '名稱', '售價', '原價', '折扣%', '庫存', '圖片URL', '商品URL'];
|
|
const rows = currentProducts.map(p => [
|
|
p.product_id,
|
|
`"${p.name.replace(/"/g, '""')}"`,
|
|
p.price,
|
|
p.original_price,
|
|
p.discount || '',
|
|
p.stock,
|
|
p.image_url,
|
|
p.product_url
|
|
]);
|
|
|
|
const csv = '\uFEFF' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
|
|
downloadFile(csv, 'pchome_products.csv', 'text/csv;charset=utf-8');
|
|
}
|
|
|
|
function exportJson() {
|
|
if (!currentProducts.length) {
|
|
showToast('沒有資料可匯出', 'warning');
|
|
return;
|
|
}
|
|
|
|
const json = JSON.stringify(currentProducts, null, 2);
|
|
downloadFile(json, 'pchome_products.json', 'application/json');
|
|
}
|
|
|
|
function downloadFile(content, filename, type) {
|
|
const blob = new Blob([content], { type });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function showToast(message, type = 'info') {
|
|
// 簡易 Toast
|
|
const toast = document.createElement('div');
|
|
toast.className = `pchome-toast pchome-toast--${type} position-fixed`;
|
|
toast.innerHTML = `
|
|
<button type="button" class="btn-close float-end" onclick="this.parentElement.remove()"></button>
|
|
${message}
|
|
`;
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 5000);
|
|
}
|
|
</script>
|
|
{% endblock %}
|