鏍″洯鏍戞礊 - 鍖垮悕璇村嚭浣犵殑蹇冮噷璇?/title> <link rel="stylesheet" href="./css/style.css"> </head> <body>  <nav class="navbar" id="navbar"></nav>  <div class="container">  <div id="announcement-modal" style="display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:300; align-items:center; justify-content:center; padding:20px;"> <div style="background:var(--bg-white); border-radius:var(--radius-lg); max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden; animation:fadeIn 0.3s;"> <div style="background:linear-gradient(135deg,var(--primary),var(--accent2)); color:#1a1a2e; padding:20px 24px; font-size:18px; font-weight:700; display:flex; align-items:center; gap:10px;"> <span style="font-size:24px;">馃摙</span> 缃戠珯鍏憡 </div> <div style="padding:20px 24px; font-size:15px; line-height:1.8; color:var(--text);" id="announcement-text"></div> <div style="padding:0 24px 20px; text-align:right;"> <button onclick="App.closeAnnouncement()" class="btn btn-primary">鏈曞凡闃?/button> </div> </div> </div> <style> @keyframes fadeIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } } <style> .title-badge { display:inline-block; font-weight:700; letter-spacing:0.3px; } .title-tag { padding:2px 10px; border-radius:10px; font-size:11px; border:1.5px solid; background: rgba(128,128,128,0.08); } .title-glow { font-size:12px; text-shadow:0 0 6px currentColor, 0 0 12px currentColor, 0 0 20px currentColor; } .title-gradient { font-size:12px; background: linear-gradient(135deg, currentColor, #fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation: gradHue 3s linear infinite; } @keyframes gradHue { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} } .title-rainbow { font-size:12px; animation: rainbow 2s linear infinite; font-weight:800; } @keyframes rainbow { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} } </style></style>  <div class="categories-nav" id="categories-nav"> <a href="?category=all" class="category-chip active" data-category="all">鍏ㄩ儴</a> </div>  <div style="display: flex; gap: 8px; margin-bottom: 12px;"> <button class="btn btn-sm btn-primary sort-btn active" data-sort="latest">鏈€鏂?/button> <button class="btn btn-sm btn-ghost sort-btn" data-sort="hot">鏈€鐑?/button> </div>  <div id="post-list"> <div class="loading"><div class="spinner"></div> 鍔犺浇涓?..</div> </div> </div>  <a href="create-post.html" class="fab" id="fab-btn" style="display: none;" title="鍙戝笘">+</a>  <script src="./js/supabase.min.js"></script> <script src="./js/config.js"></script> <script src="./js/app.js"></script> <script> (async function () { // 鑾峰彇褰撳墠鐢ㄦ埛 var currentUser = await App.getCurrentUser(); App.renderNavbar(currentUser, 'index'); // 濡傛灉宸茬櫥褰曪紝鏄剧ず鍙戝笘鎸夐挳 if (currentUser) { document.getElementById('fab-btn').style.display = 'flex'; } // 鍔犺浇鍏憡 try { var annResult = await App.supabase .from('site_settings') .select('value') .eq('key', 'announcement') .single(); if (annResult.data && annResult.data.value) { document.getElementById('announcement-text').textContent = annResult.data.value; // 妫€鏌?24 灏忔椂鍐呮槸鍚﹀凡鍏抽棴 var lastClose = localStorage.getItem('announcement_closed_at'); var shouldShow = true; if (lastClose) { var elapsed = Date.now() - parseInt(lastClose); if (elapsed < 24 * 60 * 60 * 1000) shouldShow = false; } if (shouldShow) { document.getElementById('announcement-modal').style.display = 'flex'; } } } catch (e) { /* 鍏憡琛ㄤ笉瀛樺湪涔熸病鍏崇郴 */ } // 鐘舵€? var currentCategory = App.getUrlParam('category') || 'all'; var currentSort = 'latest'; var page = 0; var pageSize = 20; var isLoading = false; var hasMore = true; // ========================================== // 鍔犺浇鏉垮潡鍒楄〃 // ========================================== async function loadCategories() { var result = await App.supabase .from('categories') .select('*') .order('sort_order'); if (!result.data) return; var nav = document.getElementById('categories-nav'); result.data.forEach(function (cat) { var chip = document.createElement('a'); chip.className = 'category-chip' + (currentCategory === cat.slug ? ' active' : ''); chip.setAttribute('data-category', cat.slug); chip.href = '?category=' + cat.slug; chip.textContent = cat.name; nav.appendChild(chip); }); } // ========================================== // 鍔犺浇甯栧瓙鍒楄〃 // ========================================== async function loadPosts(append) { if (isLoading || !hasMore) return; isLoading = true; var listEl = document.getElementById('post-list'); if (!append) { listEl.innerHTML = '<div class="loading"><div class="spinner"></div> 鍔犺浇涓?..</div>'; } try { var query = App.supabase .from('posts') .select('*, profiles:user_id(nickname, title, title_color, title_style), categories:category_id(name, slug)') .eq('status', 'approved') .order(currentSort === 'hot' ? 'like_count' : 'created_at', { ascending: currentSort !== 'hot' }) .range(page * pageSize, (page + 1) * pageSize - 1); // 鎸夋澘鍧楃瓫閫? if (currentCategory !== 'all') { var catResult = await App.supabase .from('categories') .select('id') .eq('slug', currentCategory) .single(); if (catResult.data) { query = App.supabase .from('posts') .select('*, profiles:user_id(nickname), categories:category_id(name, slug)') .eq('status', 'approved') .eq('category_id', catResult.data.id) .order(currentSort === 'hot' ? 'like_count' : 'created_at', { ascending: currentSort !== 'hot' }) .range(page * pageSize, (page + 1) * pageSize - 1); } } var result = await query; if (!append) { listEl.innerHTML = ''; } if (!result.data || result.data.length === 0) { if (!append) { listEl.innerHTML = '<div class="empty-state">' + '<div class="empty-state-icon">馃摥</div>' + '<div class="empty-state-text">杩樻病鏈夊笘瀛愶紝蹇潵鍙戠涓€涓惂锛?/div>' + '</div>'; } hasMore = false; isLoading = false; return; } if (result.data.length < pageSize) { hasMore = false; } // 娓叉煋甯栧瓙鍗＄墖 result.data.forEach(function (post) { var card = createPostCard(post); listEl.appendChild(card); }); page++; } catch (err) { if (!append) { listEl.innerHTML = '<div class="empty-state">' + '<div class="empty-state-text">鍔犺浇澶辫触锛岃鍒锋柊閲嶈瘯</div>' + '</div>'; } } isLoading = false; } // ========================================== // 鍒涘缓甯栧瓙鍗＄墖 // ========================================== function createPostCard(post) { var card = document.createElement('div'); card.className = 'post-card'; card.onclick = function () { window.location.href = 'post.html?id=' + post.id; }; var categoryTag = ''; if (post.categories) { categoryTag = '<span class="category-tag">' + post.categories.name + '</span> '; } var imageHtml = ''; if (post.image_url) { imageHtml = '<img class="post-card-image" src="' + escapeHtml(post.image_url) + '" alt="甯栧瓙鍥剧墖" loading="lazy">'; } card.innerHTML = (categoryTag ? '<div style="margin-bottom: 8px;">' + categoryTag + '</div>' : '') + '<div class="post-card-title">' + escapeHtml(post.title) + '</div>' + '<div class="post-card-content">' + escapeHtml(post.content) + '</div>' + imageHtml + '<div class="post-card-meta">' + '<span>' + escapeHtml(post.profiles.nickname) + (post.profiles.title ? ' <span class="title-badge title-' + (post.profiles.title_style||'tag') + '" style="color:' + (post.profiles.title_color||'#6366f1') + ';">' + escapeHtml(post.profiles.title) + '</span>' : '') + '</span>' + '<span>' + App.formatTime(post.created_at) + '</span>' + '<span>鈾?' + post.like_count + '</span>' + '<span>馃挰 ' + (post.comment_count || 0) + '</span>' + '</div>'; return card; } // ========================================== // HTML 杞箟 // ========================================== function escapeHtml(text) { var div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // ========================================== // 浜嬩欢缁戝畾 // ========================================== // 鏉垮潡鍒囨崲 document.getElementById('categories-nav').addEventListener('click', function (e) { var chip = e.target.closest('.category-chip'); if (!chip) return; e.preventDefault(); currentCategory = chip.getAttribute('data-category'); page = 0; hasMore = true; // 鏇存柊 active 鐘舵€? document.querySelectorAll('.category-chip').forEach(function (c) { c.classList.remove('active'); }); chip.classList.add('active'); // 鏇存柊 URL var url = currentCategory === 'all' ? 'index.html' : 'index.html?category=' + currentCategory; history.pushState(null, '', url); loadPosts(false); }); // 鎺掑簭鍒囨崲 document.querySelectorAll('.sort-btn').forEach(function (btn) { btn.addEventListener('click', function () { currentSort = this.getAttribute('data-sort'); page = 0; hasMore = true; document.querySelectorAll('.sort-btn').forEach(function (b) { b.classList.remove('btn-primary'); b.classList.add('btn-ghost'); b.classList.remove('active'); }); this.classList.remove('btn-ghost'); this.classList.add('btn-primary'); this.classList.add('active'); loadPosts(false); }); }); // 鏃犻檺婊氬姩 window.addEventListener('scroll', function () { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 300) { loadPosts(true); } }); // ========================================== // 鍒濆鍖? // ========================================== await loadCategories(); await loadPosts(false); })(); </script> </body> </html>