涓存椂閭 - MVP宸ュ叿闆?/title> <meta name="description" content="涓€閿敓鎴愪复鏃堕偖绠卞湴鍧€锛屾帴鏀堕獙璇佺爜锛岃嚜鍔ㄩ攢姣併€傚湪绾垮伐鍏凤紝蹇€熶究鎹凤紝鍏嶈垂浣跨敤銆?> <meta name="keywords" content="閭,涓存椂,楠岃瘉鐮?涓€娆℃€?鍦ㄧ嚎宸ュ叿,MVP宸ュ叿闆?> <meta name="author" content="MVP宸ュ叿闆?> <meta name="robots" content="index, follow">  <link rel="canonical" href="https://tools.neohub.cc/tools/06-temp-email/index.html">  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%231a1a1a'/%3E%3Ctext x='50' y='68' font-size='56' text-anchor='middle' fill='white' font-family='system-ui' font-weight='bold'%3EM%3C/text%3E%3C/svg%3E">  <meta property="og:title" content="涓存椂閭 - MVP宸ュ叿闆?> <meta property="og:description" content="涓€閿敓鎴愪复鏃堕偖绠卞湴鍧€锛屾帴鏀堕獙璇佺爜锛岃嚜鍔ㄩ攢姣?> <meta property="og:type" content="website"> <meta property="og:url" content="https://tools.neohub.cc/tools/06-temp-email/index.html"> <meta property="og:site_name" content="MVP宸ュ叿闆?> <meta property="og:locale" content="zh_CN">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="涓存椂閭 - MVP宸ュ叿闆?> <meta name="twitter:description" content="涓€閿敓鎴愪复鏃堕偖绠卞湴鍧€锛屾帴鏀堕獙璇佺爜锛岃嚜鍔ㄩ攢姣?>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebApplication", "name": "涓存椂閭 - MVP宸ュ叿闆?, "url": "https://tools.neohub.cc/tools/06-temp-email/index.html", "description": "涓€閿敓鎴愪复鏃堕偖绠卞湴鍧€锛屾帴鏀堕獙璇佺爜锛岃嚜鍔ㄩ攢姣?, "applicationCategory": "UtilityApplication", "operatingSystem": "Web", "inLanguage": "zh-CN", "author": { "@type": "Organization", "name": "MVP宸ュ叿闆? }, "offers": { "@type": "Offer", "price": "0", "priceCurrency": "CNY" } } </script>  <script src="https://cdn.tailwindcss.com"></script>  <link rel="stylesheet" href="../../assets/css/common.css">  </head> <body class="bg-gray-50 min-h-screen"> <div class="container mx-auto px-4 py-8 max-w-4xl"> <nav class="mb-6"> <a href="../../index.html" class="text-gray-600 hover:text-black transition inline-flex items-center gap-2"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/> </svg> 杩斿洖棣栭〉 </a> </nav> <header class="mb-8"> <h1 class="text-3xl md:text-4xl font-bold mb-3 text-gray-900">涓存椂閭</h1> <p class="text-gray-600 text-lg">鐢熸垚涓€娆℃€ч偖绠卞湴鍧€锛屽畨鍏ㄦ帴鏀堕獙璇佺爜锛?灏忔椂鑷姩閿€姣併€?/p> </header> <main>  <div class="card mb-6"> <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4"> <div class="flex-1"> <label class="block text-sm font-medium text-gray-500 mb-1">涓存椂閭鍦板潃</label> <div class="flex gap-2"> <input type="text" id="emailAddr" class="input-field font-mono" readonly placeholder="鐐瑰嚮鍙充晶鎸夐挳鐢熸垚..." value=""> <button class="btn-secondary text-sm py-2 px-3 whitespace-nowrap" onclick="copyEmail()">澶嶅埗</button> </div> </div> <div class="flex gap-2"> <button class="btn-primary whitespace-nowrap" onclick="generateEmail()">鐢熸垚閭</button> <button class="btn-secondary whitespace-nowrap" onclick="simulateMail()" id="btnSimulate" disabled title="妯℃嫙鎺ユ敹涓€灏侀獙璇佺爜閭欢锛堟祴璇曠敤锛?>妯℃嫙鏀朵俊</button> </div> </div> <div id="expireInfo" class="mt-3 text-sm text-gray-500 hidden"> 鈴?閭灏嗗湪 <span id="countdown" class="font-semibold text-gray-700">60:00</span> 鍚庤繃鏈? </div> </div>  <div id="backendWarning" class="card mb-6 border-l-4 border-yellow-400 bg-yellow-50 hidden"> <p class="text-sm text-yellow-800">鈿狅笍鍚庣鏈嶅姟鏈繛鎺ャ€傛湰宸ュ叿闇€瑕丳HP鍚庣鏀寔锛岃纭繚宸插惎鍔≒HP鏈嶅姟鍣紙<code>php -S localhost:8000</code>锛夈€?/p> </div>  <div class="card"> <div class="flex items-center justify-between mb-4"> <h2 class="text-lg font-semibold text-gray-900">鏀朵欢绠?/h2> <div class="flex items-center gap-3"> <span id="mailCount" class="text-sm text-gray-500">0 灏侀偖浠?/span> <button class="btn-secondary text-sm py-1 px-3" onclick="refreshMails()" id="btnRefresh" disabled>鍒锋柊</button> </div> </div> <div id="mailList"> <div class="text-center py-12 text-gray-400"> <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/> </svg> <p>鐢熸垚閭鍚庣瓑寰呮敹淇?/p> <p class="text-xs mt-1">鑷姩姣?0绉掓鏌ヤ竴娆℃柊閭欢</p> </div> </div> </div> </main> <footer class="mt-12 text-center text-gray-500 text-sm"> <p>© 2026 MVP宸ュ叿闆?| 閭鏁版嵁1灏忔椂鑷姩閿€姣?/p> </footer> </div> <script src="../../assets/js/common.js"></script> <script src="../../config/frontend-config.js"></script> <script src="../../assets/js/api-client.js"></script> <script> let currentToken = ''; let currentEmail = ''; let refreshTimer = null; let countdownTimer = null; let expiresAt = 0; /** * 鐢熸垚涓存椂閭 */ async function generateEmail() { try { const data = await window.MVPApi.generateTempEmail(); if (data.error) { showNotification(data.error, 'error'); document.getElementById('backendWarning').classList.remove('hidden'); return; } document.getElementById('backendWarning').classList.add('hidden'); currentToken = data.token; currentEmail = data.email; expiresAt = Date.now() + data.expiresIn * 1000; document.getElementById('emailAddr').value = data.email; document.getElementById('expireInfo').classList.remove('hidden'); document.getElementById('btnSimulate').disabled = false; document.getElementById('btnRefresh').disabled = false; // 鍚姩鍊掕鏃? startCountdown(); // 鍚姩鑷姩鍒锋柊 startAutoRefresh(); // 娓呯┖閭欢鍒楄〃 renderMails([]); showNotification('涓存椂閭宸茬敓鎴?, 'success'); } catch (err) { showNotification('鍚庣杩炴帴澶辫触锛岃纭繚PHP鏈嶅姟宸插惎鍔?, 'error'); document.getElementById('backendWarning').classList.remove('hidden'); } } /** * 鍒锋柊閭欢 */ async function refreshMails() { if (!currentToken) return; try { const data = await window.MVPApi.checkTempEmail(currentToken); if (data.expired) { showNotification('閭宸茶繃鏈燂紝璇烽噸鏂扮敓鎴?, 'warning'); stopAutoRefresh(); return; } document.getElementById('backendWarning').classList.add('hidden'); renderMails(data.messages || []); } catch (err) { // 闈欓粯澶辫触锛屼笉骞叉壈鐢ㄦ埛 } } /** * 妯℃嫙鎺ユ敹閭欢锛堟祴璇曠敤锛? */ async function simulateMail() { if (!currentToken) return; try { const data = await window.MVPApi.simulateTempEmail(currentToken); if (data.success) { showNotification('妯℃嫙閭欢宸插彂閫侊紝绋嶅悗鏌ョ湅', 'success'); setTimeout(refreshMails, 1000); } } catch (err) { showNotification('妯℃嫙鍙戦€佸け璐?, 'error'); } } /** * 娓叉煋閭欢鍒楄〃 */ function renderMails(messages) { const container = document.getElementById('mailList'); document.getElementById('mailCount').textContent = `${messages.length} 灏侀偖浠禶; if (messages.length === 0) { container.innerHTML = ` <div class="text-center py-12 text-gray-400"> <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/> </svg> <p>鏆傛棤閭欢锛岀瓑寰呬腑...</p> <p class="text-xs mt-1">鑷姩姣?0绉掓鏌ヤ竴娆?/p> </div>`; return; } container.innerHTML = messages.map((msg, i) => ` <div class="border border-gray-200 rounded-lg p-4 mb-3 hover:border-gray-400 transition cursor-pointer" onclick="toggleMailDetail(${i})"> <div class="flex items-center justify-between"> <div class="flex-1 min-w-0"> <div class="flex items-center gap-2"> <span class="w-2 h-2 rounded-full ${msg.read ? 'bg-gray-300' : 'bg-blue-500'}"></span> <span class="font-medium text-gray-900 truncate">${escapeHtml(msg.subject)}</span> </div> <div class="text-sm text-gray-500 mt-1"> 鏉ヨ嚜锛?{escapeHtml(msg.from)} 路 ${escapeHtml(msg.time)} </div> </div> ${msg.code ? `<button class="btn-secondary text-sm py-1 px-3 ml-2" onclick="event.stopPropagation(); copyCode('${msg.code}')">澶嶅埗楠岃瘉鐮?/button>` : ''} </div> <div id="mailBody${i}" class="hidden mt-3 pt-3 border-t border-gray-100 text-sm text-gray-700 whitespace-pre-wrap">${escapeHtml(msg.body)}</div> </div> `).join(''); } function toggleMailDetail(index) { const el = document.getElementById(`mailBody${index}`); el.classList.toggle('hidden'); } function copyCode(code) { copyToClipboard(code); } function copyEmail() { const email = document.getElementById('emailAddr').value; if (email) copyToClipboard(email); else showNotification('璇峰厛鐢熸垚閭', 'warning'); } function escapeHtml(s) { const div = document.createElement('div'); div.textContent = s; return div.innerHTML; } // 鍊掕鏃? function startCountdown() { if (countdownTimer) clearInterval(countdownTimer); countdownTimer = setInterval(() => { const remaining = Math.max(0, expiresAt - Date.now()); const min = Math.floor(remaining / 60000); const sec = Math.floor((remaining % 60000) / 1000); document.getElementById('countdown').textContent = `${String(min).padStart(2, '0')}:${String(sec).padStart(2, '0')}`; if (remaining <= 0) { clearInterval(countdownTimer); showNotification('閭宸茶繃鏈?, 'warning'); stopAutoRefresh(); } }, 1000); } // 鑷姩鍒锋柊 function startAutoRefresh() { if (refreshTimer) clearInterval(refreshTimer); refreshTimer = setInterval(refreshMails, 10000); } function stopAutoRefresh() { if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; } } </script> </body> </html>