rhettclaw/zhibisheng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 智币省初始版本 + PM2 部署配置

Browse Source
This commit is contained in:
Midas
2026-06-22 22:53:09 +08:00
commit 22a38eb9fb
11 changed files with 1497 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+363
View File
@@ -0,0 +1,363 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智币省 - 智能省钱</title>
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#10b981">
<style>
:root {
--primary: #10b981;
--primary-dark: #059669;
--gold: #f59e0b;
--bg: #f8faf9;
--card: #ffffff;
--text: #1f2937;
--text-light: #6b7280;
--border: #e5e7eb;
--shadow: 0 2px 8px rgba(0,0,0,0.08);
--radius: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
.container { max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg); }
/* Header */
.header { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 24px 20px 40px; border-radius: 0 0 24px 24px; }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.logo { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.logo-icon { font-size: 26px; }
.version-badge { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.tagline { font-size: 13px; opacity: 0.9; margin-bottom: 20px; }
/* Search */
.search-box { background: white; border-radius: var(--radius); padding: 4px; display: flex; gap: 8px; box-shadow: var(--shadow); }
.search-input { flex: 1; border: none; padding: 12px 16px; font-size: 15px; border-radius: 8px; outline: none; }
.search-btn { background: var(--primary); color: white; border: none; padding: 12px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.search-btn:active { transform: scale(0.97); background: var(--primary-dark); }
/* Stats */
.stats { display: flex; gap: 12px; margin-top: 20px; }
.stat { background: rgba(255,255,255,0.15); border-radius: 10px; padding: 10px 14px; flex: 1; text-align: center; }
.stat-value { font-size: 18px; font-weight: 700; }
.stat-label { font-size: 11px; opacity: 0.85; }
/* Content */
.content { padding: 20px; }
/* Section */
.section { margin-bottom: 24px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-title { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.section-icon { font-size: 18px; }
.section-more { font-size: 13px; color: var(--text-light); cursor: pointer; }
.section-more:active { color: var(--primary); }
/* Deal Cards */
.deals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.deal-card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s; }
.deal-card:active { transform: scale(0.98); }
.deal-img { width: 100%; height: 90px; background: #f3f4f6; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.deal-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-price { color: #ef4444; font-weight: 700; font-size: 16px; }
.deal-price span { font-size: 12px; }
.deal-tag { display: inline-block; background: #fef2f2; color: #ef4444; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 6px; font-weight: 600; }
/* Linbao List */
.linbao-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.linbao-item { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.linbao-item:last-child { border-bottom: none; }
.linbao-item:active { background: #f9fafb; }
.linbao-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.linbao-title { font-size: 14px; font-weight: 600; flex: 1; margin-right: 10px; }
.linbao-hot { background: #fef2f2; color: #ef4444; font-size: 11px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.linbao-meta { font-size: 12px; color: var(--text-light); display: flex; gap: 12px; }
/* Product List */
.product-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.product-item { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; cursor: pointer; transition: background 0.15s; }
.product-item:last-child { border-bottom: none; }
.product-item:active { background: #f9fafb; }
.product-img { width: 72px; height: 72px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.product-info { flex: 1; min-width: 0; }
.product-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-shop { font-size: 11px; color: var(--text-light); margin-bottom: 6px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; }
.product-price { color: #ef4444; font-weight: 700; font-size: 15px; }
.product-coupon { background: var(--primary); color: white; font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; }
/* Tab Bar */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: white; border-top: 1px solid var(--border); display: flex; padding: 8px 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.tab { flex: 1; text-align: center; padding: 6px 0; cursor: pointer; }
.tab-icon { font-size: 20px; display: block; margin-bottom: 2px; }
.tab-label { font-size: 11px; color: var(--text-light); }
.tab.active .tab-label { color: var(--primary); }
/* Loading */
.loading { text-align: center; padding: 20px; color: var(--text-light); font-size: 14px; }
/* Empty State */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { font-size: 14px; color: var(--text-light); }
/* Content padding for tabbar */
.main-content { padding-bottom: 80px; }
/* Search Results Panel */
.search-panel { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 100; overflow-y: auto; }
.search-panel.active { display: block; }
.search-header { background: white; padding: 16px 20px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.search-header input { flex: 1; }
.back-btn { font-size: 20px; color: var(--text); cursor: pointer; padding: 4px; }
.close-btn { color: var(--text-light); font-size: 14px; cursor: pointer; padding: 8px; }
/* API Status */
.api-status { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; }
.status-dot.active { background: var(--primary); }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="header-top">
<div class="logo"><span class="logo-icon">💰</span> 智币省</div>
<div class="api-status">
<span class="status-dot" id="apiDot"></span>
<span id="apiStatus">本地模式</span>
</div>
</div>
<div class="tagline">聚合全网隐藏优惠券 · 每日更新特价好物</div>
<div class="search-box">
<input type="text" class="search-input" id="searchInput" placeholder="搜索商品名称或链接..." />
<button class="search-btn" id="searchBtn">搜索</button>
</div>
<div class="stats">
<div class="stat">
<div class="stat-value" id="statDeals">0</div>
<div class="stat-label">今日特价</div>
</div>
<div class="stat">
<div class="stat-value" id="statCoupon">0</div>
<div class="stat-label">覆盖平台</div>
</div>
<div class="stat">
<div class="stat-value">¥0</div>
<div class="stat-label">已帮省下</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="content main-content" id="mainContent">
<!-- Deals Section -->
<div class="section">
<div class="section-header">
<div class="section-title"><span class="section-icon">🔥</span> 今日特价</div>
<div class="section-more">查看全部</div>
</div>
<div class="deals-grid" id="dealsGrid">
<div class="loading">加载中...</div>
</div>
</div>
<!-- Linbao Section -->
<div class="section">
<div class="section-header">
<div class="section-title"><span class="section-icon">📢</span> 线报广场</div>
<div class="section-more">更多</div>
</div>
<div class="linbao-list" id="linbaoList">
<div class="loading">加载中...</div>
</div>
</div>
<!-- Search Results -->
<div class="section" id="searchResultsSection" style="display:none;">
<div class="section-header">
<div class="section-title"><span class="section-icon">🔍</span> 搜索结果</div>
</div>
<div class="product-list" id="searchResults">
<div class="loading">搜索中...</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<div class="tabbar">
<div class="tab active" data-tab="home">
<span class="tab-icon">🏠</span>
<span class="tab-label">首页</span>
</div>
<div class="tab" data-tab="deals">
<span class="tab-icon">🔥</span>
<span class="tab-label">特价</span>
</div>
<div class="tab" data-tab="linbao">
<span class="tab-icon">📢</span>
<span class="tab-label">线报</span>
</div>
<div class="tab" data-tab="my">
<span class="tab-icon">👤</span>
<span class="tab-label">我的</span>
</div>
</div>
</div>
<script>
// State
let currentTab = 'home';
// API Base
const API_BASE = '';
// DOM Elements
const searchInput = document.getElementById('searchInput');
const searchBtn = document.getElementById('searchBtn');
const dealsGrid = document.getElementById('dealsGrid');
const linbaoList = document.getElementById('linbaoList');
const searchResultsSection = document.getElementById('searchResultsSection');
const searchResults = document.getElementById('searchResults');
const apiDot = document.getElementById('apiDot');
const apiStatusEl = document.getElementById('apiStatus');
const statDeals = document.getElementById('statDeals');
const statCoupon = document.getElementById('statCoupon');
// Init
async function init() {
await Promise.all([loadDeals(), loadLinbao()]);
updateStats();
apiDot.classList.add('active');
apiStatusEl.textContent = '本地运行';
}
// Load Deals
async function loadDeals() {
try {
const res = await fetch(`${API_BASE}/api/today-deals`);
const json = await res.json();
if (json.success) {
renderDeals(json.data);
statDeals.textContent = json.data.length;
}
} catch (e) {
dealsGrid.innerHTML = '<div class="empty-state"><div class="empty-icon">📦</div><div class="empty-text">暂无数据</div></div>';
}
}
// Render Deals
function renderDeals(deals) {
if (!deals.length) {
dealsGrid.innerHTML = '<div class="empty-state"><div class="empty-icon">📦</div><div class="empty-text">暂无特价</div></div>';
return;
}
dealsGrid.innerHTML = deals.map(deal => `
<div class="deal-card" onclick="openDeal('${deal.id}')">
<div class="deal-img">🏷️</div>
<div class="deal-title">${deal.title}</div>
<div class="deal-price">¥${deal.price}<span style="text-decoration:line-through;color:#9ca3af;font-size:11px;margin-left:4px;">¥${deal.originalPrice}</span></div>
<div style="margin-top:6px;"><span class="deal-tag">${deal.discount}</span></div>
</div>
`).join('');
}
// Load Linbao
async function loadLinbao() {
try {
const res = await fetch(`${API_BASE}/api/linbao`);
const json = await res.json();
if (json.success) {
renderLinbao(json.data);
statCoupon.textContent = json.data.length;
}
} catch (e) {
linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>';
}
}
// Render Linbao
function renderLinbao(items) {
if (!items.length) {
linbaoList.innerHTML = '<div class="empty-state"><div class="empty-icon">📢</div><div class="empty-text">暂无线报</div></div>';
return;
}
linbaoList.innerHTML = items.map(item => `
<div class="linbao-item" onclick="openLinbao('${item.id}')">
<div class="linbao-top">
<div class="linbao-title">${item.title}</div>
<span class="linbao-hot">🔥 ${item.hot}</span>
</div>
<div class="linbao-meta">
<span>📢 ${item.source}</span>
<span>⏰ ${item.time}</span>
</div>
</div>
`).join('');
}
// Search
async function doSearch(keyword) {
if (!keyword.trim()) return;
searchResultsSection.style.display = 'block';
searchResults.innerHTML = '<div class="loading">搜索中...</div>';
try {
const res = await fetch(`${API_BASE}/api/search?keyword=${encodeURIComponent(keyword)}`);
const json = await res.json();
if (json.success && json.data.length) {
renderSearchResults(json.data);
} else {
searchResults.innerHTML = '<div class="empty-state"><div class="empty-icon">🔍</div><div class="empty-text">未找到相关商品</div></div>';
}
} catch (e) {
searchResults.innerHTML = '<div class="empty-state"><div class="empty-icon">❌</div><div class="empty-text">搜索失败，请重试</div></div>';
}
}
// Render Search Results
function renderSearchResults(products) {
searchResults.innerHTML = products.map(p => `
<div class="product-item" onclick="goToCoupon('${p.id}')">
<div class="product-img">🏷️</div>
<div class="product-info">
<div class="product-title">${p.title}</div>
<div class="product-shop">🏪 ${p.shop}</div>
<div class="product-bottom">
<span class="product-price">¥${p.price}</span>
<span class="product-coupon">领${p.coupon}元券</span>
</div>
</div>
</div>
`).join('');
}
// Update Stats
function updateStats() {
// Stats updated from data
}
// Placeholder actions
function openDeal(id) { console.log('open deal', id); }
function openLinbao(id) { console.log('open linbao', id); }
function goToCoupon(id) { console.log('go to coupon', id); alert('请复制链接到淘宝/京东app打开'); }
// Event Listeners
searchBtn.addEventListener('click', () => doSearch(searchInput.value));
searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') doSearch(searchInput.value); });
// Tab switching
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
currentTab = tab.dataset.tab;
});
});
// Start
init();
</script>
</body>
</html>
public/manifest.json
+16
View File
@@ -0,0 +1,16 @@
{
"name": "智币省",
"short_name": "智币省",
"description": "聚合全网隐藏优惠券，每日更新特价好物",
"start_url": "/",
"display": "standalone",
"background_color": "#10b981",
"theme_color": "#10b981",
"icons": [
{
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>",
"sizes": "192x192",
"type": "image/svg+xml"
}
]
}