Git鎻愪氦淇℃伅鐢熸垚 - MVP宸ュ叿闆?/title> <meta name="description" content="AI鑷姩鐢熸垚瑙勮寖鐨凣it commit娑堟伅锛屾敮鎸佸绉嶆彁浜ょ被鍨嬨€侫I椹卞姩鐨勬櫤鑳藉伐鍏凤紝鎻愬崌宸ヤ綔鏁堢巼銆?> <meta name="keywords" content="git,commit,鎻愪氦,ai,鐢熸垚鍣?鍦ㄧ嚎宸ュ叿,MVP宸ュ叿闆?> <meta name="author" content="MVP宸ュ叿闆?> <meta name="robots" content="index, follow">  <link rel="canonical" href="https://tools.neohub.cc/tools/02-git-commit-generator/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="Git鎻愪氦淇℃伅鐢熸垚 - MVP宸ュ叿闆?> <meta property="og:description" content="AI鑷姩鐢熸垚瑙勮寖鐨凣it commit娑堟伅锛屾敮鎸佸绉嶆彁浜ょ被鍨?> <meta property="og:type" content="website"> <meta property="og:url" content="https://tools.neohub.cc/tools/02-git-commit-generator/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="Git鎻愪氦淇℃伅鐢熸垚 - MVP宸ュ叿闆?> <meta name="twitter:description" content="AI鑷姩鐢熸垚瑙勮寖鐨凣it commit娑堟伅锛屾敮鎸佸绉嶆彁浜ょ被鍨?>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebApplication", "name": "Git鎻愪氦淇℃伅鐢熸垚 - MVP宸ュ叿闆?, "url": "https://tools.neohub.cc/tools/02-git-commit-generator/index.html", "description": "AI鑷姩鐢熸垚瑙勮寖鐨凣it commit娑堟伅锛屾敮鎸佸绉嶆彁浜ょ被鍨?, "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">Git鎻愪氦淇℃伅鐢熸垚鍣?/h1> <p class="text-gray-600 text-lg">AI鏅鸿兘鐢熸垚瑙勮寖鐨凣it commit娑堟伅锛岄伒寰猚onventional commit鏍煎紡</p> </header>  <div id="apiStatusSection" class="mb-6">  </div>  <main> <div class="card">  <div class="mb-6"> <label class="block text-sm font-medium text-gray-700 mb-2"> 鎻愪氦绫诲瀷 </label> <select id="commitType" class="input-field"> <option value="feat">feat - 鏂板姛鑳?/option> <option value="fix">fix - 淇bug</option> <option value="docs">docs - 鏂囨。鏇存柊</option> <option value="style">style - 浠ｇ爜鏍煎紡璋冩暣</option> <option value="refactor">refactor - 浠ｇ爜閲嶆瀯</option> <option value="perf">perf - 鎬ц兘浼樺寲</option> <option value="test">test - 娴嬭瘯鐩稿叧</option> <option value="chore">chore - 鏋勫缓/宸ュ叿閾?/option> <option value="ci">ci - CI閰嶇疆</option> <option value="revert">revert - 鍥為€€</option> </select> </div>  <div class="mb-6"> <label class="block text-sm font-medium text-gray-700 mb-2"> 浠ｇ爜鍙樻洿鎻忚堪鎴杁iff </label> <textarea id="diffInput" class="input-field font-mono text-sm" placeholder="绮樿创git diff杈撳嚭锛屾垨鎻忚堪浣犵殑浠ｇ爜鍙樻洿鍐呭... 绀轰緥锛?#10;娣诲姞浜嗙敤鎴风櫥褰曞姛鑳?#10;淇浜嗘暟鎹簱杩炴帴瓒呮椂闂 閲嶆瀯浜咥PI璇锋眰妯″潡" rows="12" ></textarea> <p class="text-sm text-gray-500 mt-2"> 鎻愮ず锛氬彲浠ョ矘璐?<code class="bg-gray-100 px-1 rounded">git diff</code> 鐨勮緭鍑猴紝鎴栫洿鎺ユ弿杩板彉鏇村唴瀹? </p> </div>  <div class="flex gap-3 mb-6"> <button id="generateBtn" class="btn-primary" onclick="generateCommitMessage()" > <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/> </svg> 鐢熸垚鎻愪氦淇℃伅 </button> <button id="clearBtn" class="btn-secondary" onclick="clearAll()" > 娓呯┖ </button> <button id="retryBtn" class="btn-secondary hidden" onclick="generateCommitMessage()" > 閲嶈瘯 </button> </div>  <div id="outputSection" class="hidden"> <label class="block text-sm font-medium text-gray-700 mb-2"> 鐢熸垚鐨勬彁浜や俊鎭? </label> <div class="relative"> <pre id="output" class="code-block min-h-[100px]"></pre> <button class="absolute top-2 right-2 btn-secondary text-sm py-1 px-3" onclick="copyToClipboard(document.getElementById('output').textContent)" > 澶嶅埗 </button> </div> </div>  <div id="errorSection" class="hidden mt-4 p-4 bg-red-50 border border-red-200 rounded-lg"> <p class="text-red-800 text-sm" id="errorMessage"></p> </div> </div>  <div class="card mt-6"> <h2 class="text-xl font-semibold mb-3">浣跨敤璇存槑</h2> <ul class="list-disc list-inside space-y-2 text-gray-700"> <li>閫夋嫨鎻愪氦绫诲瀷锛坒eat, fix, docs绛夛級</li> <li>杈撳叆浠ｇ爜鍙樻洿鎻忚堪鎴栫矘璐磄it diff杈撳嚭</li> <li>鐐瑰嚮"鐢熸垚鎻愪氦淇℃伅"鎸夐挳</li> <li>AI灏嗙敓鎴愮鍚坈onventional commit瑙勮寖鐨勬彁浜や俊鎭?/li> <li>鐐瑰嚮"澶嶅埗"鎸夐挳涓€閿鍒跺埌鍓创鏉?/li> <li><strong>娉ㄦ剰锛?/strong>姝ゅ伐鍏烽渶瑕侀厤缃瓵I API瀵嗛挜鎵嶈兘浣跨敤</li> </ul> </div>  <div class="card mt-6"> <h2 class="text-xl font-semibold mb-3">Conventional Commit鏍煎紡</h2> <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm mb-3"> <type>(<scope>): <subject><br><br> <body><br><br> <footer> </div> <div class="space-y-2 text-sm text-gray-700"> <p><strong>type:</strong> 鎻愪氦绫诲瀷锛堝繀濉級</p> <p><strong>scope:</strong> 褰卞搷鑼冨洿锛堝彲閫夛級</p> <p><strong>subject:</strong> 绠€鐭弿杩帮紙蹇呭～锛?/p> <p><strong>body:</strong> 璇︾粏鎻忚堪锛堝彲閫夛級</p> <p><strong>footer:</strong> 鍏宠仈issue鎴朾reaking changes锛堝彲閫夛級</p> </div> </div>  <div id="configGuideSection" class="card mt-6 hidden"> <h2 class="text-xl font-semibold mb-3 text-orange-600">鈿狅笍闇€瑕侀厤缃瓵PI</h2> <div class="space-y-3 text-gray-700"> <p>姝ゅ伐鍏烽渶瑕丄I API鎵嶈兘宸ヤ綔銆傝鎸変互涓嬫楠ら厤缃細</p> <ol class="list-decimal list-inside space-y-2 ml-4"> <li>鍑嗗OpenAI鎴朅nthropic鐨凙PI瀵嗛挜</li> <li>缂栬緫 <code class="bg-gray-100 px-2 py-1 rounded">config/api-config.json</code> 鏂囦欢</li> <li>濉叆浣犵殑API瀵嗛挜鍜岄厤缃俊鎭?/li> <li>灏嗗搴攑rovider鐨?<code class="bg-gray-100 px-2 py-1 rounded">enabled</code> 璁剧疆涓?<code class="bg-gray-100 px-2 py-1 rounded">true</code></li> <li>鍒锋柊椤甸潰鍗冲彲浣跨敤</li> </ol> <div class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded"> <p class="text-sm text-yellow-800"> <strong>鎻愮ず锛?/strong>API瀵嗛挜灏嗗瓨鍌ㄥ湪鏈嶅姟鍣ㄧ锛屼笉浼氭毚闇茬粰鍓嶇鐢ㄦ埛銆? </p> </div> </div> </div> </main>  <footer class="mt-12 text-center text-gray-500 text-sm"> <p>© 2026 MVP宸ュ叿闆?| AI鐢熸垚鍐呭浠呬緵鍙傝€?/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> // API閰嶇疆鐘舵€? let apiConfigured = false; let apiProvider = null; /** * 椤甸潰鍔犺浇鏃舵鏌PI閰嶇疆 */ window.addEventListener('DOMContentLoaded', async () => { await checkAPIConfig(); }); /** * 妫€鏌PI閰嶇疆鐘舵€? */ async function checkAPIConfig() { const statusSection = document.getElementById('apiStatusSection'); const configGuideSection = document.getElementById('configGuideSection'); const generateBtn = document.getElementById('generateBtn'); try { if (!window.MVPApi) throw new Error('API瀹㈡埛绔湭鍔犺浇'); const status = await window.MVPApi.getAIStatus(); if (!status.configured) throw new Error(status.error || 'API鏈厤缃?); apiConfigured = true; apiProvider = status.provider; statusSection.innerHTML = ` <div class="p-4 bg-green-50 border border-green-200 rounded-lg"> <p class="text-green-800 text-sm"> 鉁?API宸查厤缃?(${status.provider} - ${status.model || '榛樿妯″瀷'}) </p> </div> `; configGuideSection.classList.add('hidden'); generateBtn.disabled = false; generateBtn.classList.remove('opacity-50', 'cursor-not-allowed'); } catch (error) { // API鏈厤缃? apiConfigured = false; statusSection.innerHTML = ` <div class="p-4 bg-orange-50 border border-orange-200 rounded-lg"> <p class="text-orange-800 text-sm"> 鈿狅笍 API鏈厤缃?- 璇峰厛閰嶇疆AI API瀵嗛挜鎵嶈兘浣跨敤姝ゅ伐鍏? </p> </div> `; configGuideSection.classList.remove('hidden'); generateBtn.disabled = true; generateBtn.classList.add('opacity-50', 'cursor-not-allowed'); } } /** * 璋冪敤AI鏈嶅姟鐢熸垚commit娑堟伅 */ async function callAIService(commitType, diffContent) { // 鏋勫缓鎻愮ず璇嶆ā鏉? const prompt = `浣犳槸涓€涓狦it鎻愪氦淇℃伅鐢熸垚鍔╂墜銆傝鏍规嵁浠ヤ笅浠ｇ爜鍙樻洿鍐呭锛岀敓鎴愪竴鏉＄鍚圕onventional Commit瑙勮寖鐨勬彁浜や俊鎭€? 鎻愪氦绫诲瀷锛?{commitType} 浠ｇ爜鍙樻洿鍐呭锛? ${diffContent} 瑕佹眰锛? 1. 浣跨敤鎸囧畾鐨勬彁浜ょ被鍨嬶紙${commitType}锛? 2. 閬靛惊鏍煎紡锛?type>(<scope>): <subject> 3. subject浣跨敤涓枃锛岀畝娲佹槑浜嗭紙涓嶈秴杩?0瀛楋級 4. 濡傛灉鍙樻洿杈冨鏉傦紝鍙互娣诲姞body閮ㄥ垎璇︾粏璇存槑 5. 鍙繑鍥瀋ommit娑堟伅鍐呭锛屼笉瑕佹湁鍏朵粬瑙ｉ噴绀轰緥鏍煎紡锛? feat(auth): 娣诲姞鐢ㄦ埛鐧诲綍鍔熻兘 - 瀹炵幇JWT token璁よ瘉 - 娣诲姞鐧诲綍琛ㄥ崟楠岃瘉 - 闆嗘垚绗笁鏂筄Auth鐧诲綍`; try { const data = await window.MVPApi.generateAI({ tool: 'git-commit-generator', prompt, parameters: { commitType: commitType, maxTokens: 200 } }); return data.result; } catch (error) { // 瀹炵幇閲嶈瘯鏈哄埗 console.error('AI鏈嶅姟璋冪敤澶辫触:', error); throw error; } } /** * 鐢熸垚鎻愪氦淇℃伅 */ async function generateCommitMessage() { const diffInput = document.getElementById('diffInput').value.trim(); const commitType = document.getElementById('commitType').value; const outputSection = document.getElementById('outputSection'); const output = document.getElementById('output'); const errorSection = document.getElementById('errorSection'); const errorMessage = document.getElementById('errorMessage'); const generateBtn = document.getElementById('generateBtn'); const retryBtn = document.getElementById('retryBtn'); // 闅愯棌閿欒鎻愮ず鍜岄噸璇曟寜閽? errorSection.classList.add('hidden'); retryBtn.classList.add('hidden'); // 楠岃瘉杈撳叆 if (!diffInput) { showError('璇疯緭鍏ヤ唬鐮佸彉鏇存弿杩版垨diff鍐呭'); return; } // 妫€鏌PI閰嶇疆 if (!apiConfigured) { showError('API鏈厤缃紝璇峰厛閰嶇疆AI API瀵嗛挜'); return; } // 鏄剧ず鍔犺浇鐘舵€? generateBtn.disabled = true; generateBtn.innerHTML = ` <div class="loading-spinner w-5 h-5"></div> 鐢熸垚涓?.. `; try { // 璋冪敤AI鏈嶅姟 const result = await callAIService(commitType, diffInput); // 鏄剧ず缁撴灉 output.textContent = result; outputSection.classList.remove('hidden'); showNotification('鎻愪氦淇℃伅鐢熸垚鎴愬姛', 'success'); } catch (error) { showError(error.message || 'AI鏈嶅姟璋冪敤澶辫触锛岃绋嶅悗閲嶈瘯'); retryBtn.classList.remove('hidden'); } finally { // 鎭㈠鎸夐挳鐘舵€? generateBtn.disabled = false; generateBtn.innerHTML = ` <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/> </svg> 鐢熸垚鎻愪氦淇℃伅 `; } } /** * 娓呯┖鎵€鏈夊唴瀹? */ function clearAll() { document.getElementById('diffInput').value = ''; document.getElementById('output').textContent = ''; document.getElementById('outputSection').classList.add('hidden'); document.getElementById('errorSection').classList.add('hidden'); document.getElementById('retryBtn').classList.add('hidden'); document.getElementById('commitType').value = 'feat'; } /** * 鏄剧ず閿欒淇℃伅 */ function showError(message) { const errorSection = document.getElementById('errorSection'); const errorMessage = document.getElementById('errorMessage'); errorMessage.textContent = message; errorSection.classList.remove('hidden'); showNotification(message, 'error'); } // 鏀寔Ctrl+Enter蹇嵎閿敓鎴? document.getElementById('diffInput').addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { if (apiConfigured) { generateCommitMessage(); } } }); </script> </body> </html>