鐭摼鎺ョ敓鎴?- MVP宸ュ叿闆?/title> <meta name="description" content="鐢熸垚鐭摼鎺ュ苟鏀寔鑷畾涔夊悗缂€锛岀粺璁＄偣鍑绘鏁般€傚湪绾垮伐鍏凤紝蹇€熶究鎹凤紝鍏嶈垂浣跨敤銆?> <meta name="keywords" content="鐭摼鎺?url,缂╃煭,鑷畾涔?鍦ㄧ嚎宸ュ叿,MVP宸ュ叿闆?> <meta name="author" content="MVP宸ュ叿闆?> <meta name="robots" content="index, follow">  <link rel="canonical" href="https://tools.neohub.cc/tools/10-short-url/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/10-short-url/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/10-short-url/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-3xl"> <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 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鏈嶅姟鍣ㄣ€?/p> </div>  <div class="card mb-6"> <div class="space-y-4"> <div> <label class="block text-sm font-medium text-gray-700 mb-1">闀块摼鎺?/label> <input type="url" id="longUrl" class="input-field" placeholder="https://example.com/very/long/url/..." oninput="onUrlInput()"> </div> <div> <label class="block text-sm font-medium text-gray-500 mb-1">鑷畾涔夊悗缂€锛堝彲閫夛紝3-20浣嶅瓧姣嶆暟瀛楋級</label> <div class="flex gap-2 items-center"> <span class="text-gray-400 text-sm whitespace-nowrap" id="baseUrlPrefix">localhost:8000/</span> <input type="text" id="customCode" class="input-field w-48" placeholder="my-link" maxlength="20" pattern="[a-zA-Z0-9_-]+"> </div> </div> <button class="btn-primary w-full" onclick="generateShortUrl()">鐢熸垚鐭摼鎺?/button> </div> </div>  <div id="resultPanel" class="card mb-6 hidden"> <div class="flex items-center justify-between mb-3"> <h3 class="text-sm font-medium text-gray-700">鐢熸垚缁撴灉</h3> <span id="existingBadge" class="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500 hidden">宸插瓨鍦?/span> </div> <div class="flex gap-2 items-center"> <input type="text" id="shortUrl" class="input-field font-mono flex-1" readonly> <button class="btn-secondary py-2 px-3" onclick="copyShortUrl()">澶嶅埗</button> </div> <div class="mt-3 flex items-center gap-4 text-sm text-gray-500"> <span>鐐瑰嚮娆℃暟锛?strong id="clickCount" class="text-gray-700">0</strong></span> <button class="text-blue-600 hover:underline" onclick="refreshStats()">鍒锋柊缁熻</button> </div> </div>  <div id="errorPanel" class="card mb-6 border-l-4 border-red-400 bg-red-50 hidden"> <p id="errorMessage" class="text-sm text-red-700"></p> <div id="suggestions" class="mt-2 hidden"> <p class="text-xs text-red-600">鎺ㄨ崘鏇夸唬锛?/p> <div class="flex gap-2 mt-1" id="suggestionList"></div> </div> </div>  <div class="card"> <div class="flex items-center justify-between mb-3"> <h3 class="text-sm font-medium text-gray-700">鏈€杩戠敓鎴?/h3> <button class="text-sm text-gray-500 hover:text-gray-700" onclick="clearHistory()">娓呯┖</button> </div> <div id="historyList"> <p class="text-sm text-gray-400 text-center py-4">鏆傛棤璁板綍</p> </div> </div> </main> <footer class="mt-12 text-center text-gray-500 text-sm"> <p>© 2026 MVP宸ュ叿闆?| 闇€瑕丳HP鍚庣鏀寔</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 history = JSON.parse(localStorage.getItem('shortUrlHistory') || '[]'); let currentCode = ''; renderHistory(); async function generateShortUrl() { const longUrl = document.getElementById('longUrl').value.trim(); const customCode = document.getElementById('customCode').value.trim(); if (!longUrl) { showNotification('璇疯緭鍏ラ暱閾炬帴', 'warning'); return; } try { const data = await window.MVPApi.createShortUrl({ url: longUrl, customCode }); document.getElementById('backendWarning').classList.add('hidden'); if (data.error) { document.getElementById('errorPanel').classList.remove('hidden'); document.getElementById('errorMessage').textContent = data.error; document.getElementById('resultPanel').classList.add('hidden'); if (data.suggestions) { document.getElementById('suggestions').classList.remove('hidden'); document.getElementById('suggestionList').innerHTML = data.suggestions.map(s => `<button class="btn-secondary text-xs py-1 px-2" onclick="document.getElementById('customCode').value='${s}'; generateShortUrl();">${s}</button>` ).join(''); } return; } // 鎴愬姛 document.getElementById('errorPanel').classList.add('hidden'); document.getElementById('resultPanel').classList.remove('hidden'); document.getElementById('shortUrl').value = data.shortUrl; document.getElementById('clickCount').textContent = data.clicks || 0; currentCode = data.code; if (data.existing) { document.getElementById('existingBadge').classList.remove('hidden'); } else { document.getElementById('existingBadge').classList.add('hidden'); } // 娣诲姞鍒板巻鍙? addHistory(data.code, data.shortUrl, longUrl); showNotification('鐭摼鎺ュ凡鐢熸垚', 'success'); } catch (err) { document.getElementById('backendWarning').classList.remove('hidden'); showNotification('鍚庣杩炴帴澶辫触锛岃纭繚PHP鏈嶅姟宸插惎鍔?, 'error'); } } async function refreshStats() { if (!currentCode) return; try { const data = await window.MVPApi.getShortUrlStats(currentCode); if (data.success) { document.getElementById('clickCount').textContent = data.clicks || 0; } } catch {} } function copyShortUrl() { const url = document.getElementById('shortUrl').value; if (url) copyToClipboard(url); } function onUrlInput() { // 娓呴櫎閿欒 document.getElementById('errorPanel').classList.add('hidden'); } // 鍘嗗彶璁板綍 function addHistory(code, shortUrl, longUrl) { history.unshift({ code, shortUrl, longUrl, time: new Date().toLocaleString('zh-CN') }); if (history.length > 10) history = history.slice(0, 10); localStorage.setItem('shortUrlHistory', JSON.stringify(history)); renderHistory(); } function renderHistory() { const container = document.getElementById('historyList'); if (history.length === 0) { container.innerHTML = '<p class="text-sm text-gray-400 text-center py-4">鏆傛棤璁板綍</p>'; return; } container.innerHTML = history.map(h => ` <div class="flex items-center justify-between py-2 border-b border-gray-100 last:border-0"> <div class="flex-1 min-w-0 mr-3"> <div class="text-sm font-mono text-blue-600 truncate">${escapeHtml(h.shortUrl)}</div> <div class="text-xs text-gray-400 truncate">${escapeHtml(h.longUrl)}</div> </div> <div class="flex gap-2 items-center"> <span class="text-xs text-gray-400">${h.time}</span> <button class="btn-secondary text-xs py-1 px-2" onclick="copyToClipboard('${h.shortUrl}')">澶嶅埗</button> </div> </div> `).join(''); } function clearHistory() { history = []; localStorage.removeItem('shortUrlHistory'); renderHistory(); } function escapeHtml(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; } </script> </body> </html>