feat: 更新場景4 demos/04-completed 對應簡化教學設計

yulin0629 · yulin0629 · commit 7b5f1468e33d · 2025-06-06T16:03:14.000+08:00
- 簡化程式碼，移除複雜的通知系統和鍵盤快捷鍵
- 更新標題和說明文字，明確標示6個核心Bug修復
- 保持簡潔的修復版本，突出Agent一次性修復能力
- 移除不必要的HTML事件綁定，保持程式碼可讀性
- 確保課程前後對比更清晰明顯
diff --git a/demos/04-completed/index.html b/demos/04-completed/index.html
@@ -6,35 +6,35 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
-    <title>購物車計算器 - 完美運作版本</title>
+    <title>購物車計算器 - 6個Bug修復完成</title>
     <link rel="stylesheet" href="style.css?v=20250603012">
 </head>
 <body>
     <div class="container">
         <h1>🛒 購物車計算器</h1>
-        <p class="subtitle">✅ 所有 Bug 已修復！完美運作的購物車系統</p>
+        <p class="subtitle">✅ 6個核心Bug修復完成！購物車功能正常運作</p>
         
         <div class="product-section">
             <h2>商品清單</h2>
             <div class="product-grid">
                 <div class="product-card">
                     <h3>筆記型電腦</h3>
                     <p class="price">$25,000</p>
-                    <input type="number" id="laptop-qty" value="0" min="0" oninput="updateQuantityRealtime('laptop')">
+                    <input type="number" id="laptop-qty" value="0" min="0">
                     <button onclick="addToCart('laptop', 25000)">加入購物車</button>
                 </div>
                 
                 <div class="product-card">
                     <h3>藍牙耳機</h3>
                     <p class="price">$3,500</p>
-                    <input type="number" id="headphones-qty" value="0" min="0" oninput="updateQuantityRealtime('headphones')">
+                    <input type="number" id="headphones-qty" value="0" min="0">
                     <button onclick="addToCart('headphones', 3500)">加入購物車</button>
                 </div>
                 
                 <div class="product-card">
                     <h3>無線滑鼠</h3>
                     <p class="price">$1,200</p>
-                    <input type="number" id="mouse-qty" value="0" min="0" oninput="updateQuantityRealtime('mouse')">
+                    <input type="number" id="mouse-qty" value="0" min="0">
                     <button onclick="addToCart('mouse', 1200)">加入購物車</button>
                 </div>
             </div>
@@ -78,19 +78,16 @@ <h3>優惠券</h3>
         </div>
         
         <div class="debug-info success">
-            <h3>✅ 修復完成</h3>
+            <h3>✅ 6個核心Bug修復完成</h3>
             <ul>
-                <li>✓ 總金額計算正確</li>
-                <li>✓ 優惠券功能正常</li>
-                <li>✓ 清空購物車按鈕正常運作</li>
-                <li>✓ 運費計算邏輯正確</li>
-                <li>✓ 數量更新即時重新計算</li>
-                <li>✓ 結帳後自動清空購物車</li>
-                <li>✓ 移除商品有確認提示</li>
-                <li>✓ 免運費優惠券功能完整</li>
-                <li>✓ 響應式設計和動畫效果</li>
-                <li>✓ 輸入驗證和錯誤處理</li>
+                <li>✓ Bug 1：總金額計算正確（使用乘法）</li>
+                <li>✓ Bug 2：運費邏輯正確（不再永遠150元）</li>
+                <li>✓ Bug 3：清空購物車按鈕正常運作</li>
+                <li>✓ Bug 4：FREESHIP優惠券實際有效</li>
+                <li>✓ Bug 5：結帳後自動清空購物車</li>
+                <li>✓ Bug 6：輸入驗證改善</li>
             </ul>
+            <p><strong>Agent修復效果：</strong>一次性解決所有核心問題，購物車功能完全正常！</p>
         </div>
     </div>
     
diff --git a/demos/04-completed/script.js b/demos/04-completed/script.js
@@ -1,33 +1,31 @@
-// 購物車計算器 - 完美修復版本
-// 所有 Bug 已修復，功能完整運作！
+// 購物車計算器 - 6個Bug修復完成版本
+// 對應簡化教學：所有核心問題都已解決！
 
 let cart = [];
 let discount = 0;
 let freeShipping = false;
 
-// 修復：函數名稱與 HTML 呼叫一致
+// ✅ 修復Bug 6：加入輸入驗證，改善使用者體驗
 function addToCart(productId, price) {
     const qtyInput = document.getElementById(productId + '-qty');
     const quantity = parseInt(qtyInput.value);
     
-    if (quantity <= 0) {
-        showNotification('請選擇數量', 'warning');
+    if (quantity <= 0 || isNaN(quantity)) {
+        alert('請輸入有效的數量');
         return;
     }
     
-    // 修復：正確處理商品重複添加的數量更新
+    // 處理重複商品（保持簡潔）
     const existingItem = cart.find(item => item.id === productId);
     if (existingItem) {
         existingItem.quantity += quantity;
-        showNotification(`已更新 ${getProductName(productId)} 數量`, 'success');
     } else {
         cart.push({
             id: productId,
             name: getProductName(productId),
             price: price,
             quantity: quantity
         });
-        showNotification(`已添加 ${getProductName(productId)} 到購物車`, 'success');
     }
     
     qtyInput.value = 0;
@@ -69,13 +67,13 @@ function updateCartDisplay() {
 }
 
 function updatePricing() {
-    // 修復：subtotal 計算正確 - 使用乘法
+    // ✅ 修復Bug 1：總金額計算正確 - 使用乘法
     let subtotal = 0;
     cart.forEach(item => {
-        subtotal += item.price * item.quantity; // 修復：使用乘法
+        subtotal += item.price * item.quantity; // ✅ 修復：使用乘法而不是加法
     });
     
-    // 修復：運費計算邏輯正確
+    // ✅ 修復Bug 2：運費計算邏輯正確
     let shipping = 0;
     if (!freeShipping) {
         if (subtotal < 10000) {
@@ -86,7 +84,7 @@ function updatePricing() {
         // 超過 30000 免運費（shipping = 0）
     }
     
-    // 修復：優惠券折扣計算正確
+    // 優惠券折扣計算
     const discountAmount = subtotal * (discount / 100);
     const total = subtotal + shipping - discountAmount;
     
@@ -97,159 +95,76 @@ function updatePricing() {
     document.getElementById('total').textContent = `$${total.toLocaleString()}`;
 }
 
+// 移除商品功能（保持簡潔）
 function removeFromCart(index) {
-    // 修復：移除商品時有確認提示
-    const item = cart[index];
-    if (confirm(`確定要移除 ${item.name} 嗎？`)) {
-        cart.splice(index, 1);
-        showNotification(`已移除 ${item.name}`, 'info');
-        updateCartDisplay();
-    }
+    cart.splice(index, 1);
+    updateCartDisplay();
 }
 
-// 修復：清空購物車函數名稱正確
+// ✅ 修復Bug 3：清空購物車函數名稱正確
 function clearCart() {
     if (cart.length === 0) {
-        showNotification('購物車已經是空的', 'info');
+        alert('購物車已經是空的');
         return;
     }
     
-    if (confirm('確定要清空購物車嗎？')) {
-        cart = [];
-        discount = 0;
-        freeShipping = false;
-        document.getElementById('coupon-status').innerHTML = '';
-        showNotification('購物車已清空', 'info');
-        updateCartDisplay();
-    }
+    cart = [];
+    discount = 0;
+    freeShipping = false;
+    updateCartDisplay();
 }
 
+// ✅ 修復Bug 4：優惠券功能完整實現
 function applyCoupon() {
-    const couponCode = document.getElementById('coupon-code').value.trim().toUpperCase();
-    
-    if (!couponCode) {
-        showNotification('請輸入優惠券代碼', 'warning');
-        return;
-    }
+    const couponCode = document.getElementById('coupon-code').value.toUpperCase();
     
-    // 修復：優惠券邏輯完整
-    let couponMessage = '';
     switch (couponCode) {
         case 'SAVE10':
             discount = 10;
             freeShipping = false;
-            couponMessage = '已套用 10% 折扣！';
+            alert('已套用 10% 折扣！');
             break;
         case 'SAVE20':
             discount = 20;
             freeShipping = false;
-            couponMessage = '已套用 20% 折扣！';
+            alert('已套用 20% 折扣！');
             break;
         case 'FREESHIP':
-            // 修復：免運費功能完整實現
+            // ✅ 修復：免運費功能完整實現
             discount = 0;
             freeShipping = true;
-            couponMessage = '已套用免運費！';
+            alert('已套用免運費！');
             break;
         default:
-            showNotification('無效的優惠券代碼', 'error');
+            alert('無效的優惠券代碼');
             return;
     }
     
     document.getElementById('coupon-code').value = '';
-    document.getElementById('coupon-status').innerHTML = `<span class="coupon-active">${couponMessage}</span>`;
-    showNotification(couponMessage, 'success');
-    
-    // 修復：正確更新優惠券狀態
     updatePricing();
 }
 
+// ✅ 修復Bug 5：結帳後自動清空購物車
 function checkout() {
     if (cart.length === 0) {
-        showNotification('購物車是空的！', 'warning');
+        alert('購物車是空的！');
         return;
     }
     
     const total = document.getElementById('total').textContent;
-    showNotification(`結帳成功！總金額：${total}`, 'success');
-    
-    // 修復：結帳後清空購物車
-    setTimeout(() => {
-        cart = [];
-        discount = 0;
-        freeShipping = false;
-        document.getElementById('coupon-status').innerHTML = '';
-        updateCartDisplay();
-        showNotification('感謝您的購買！', 'info');
-    }, 1500);
-}
-
-// 修復：當使用者修改商品數量時，自動更新購物車
-function updateQuantityRealtime(productId) {
-    const qtyInput = document.getElementById(productId + '-qty');
-    const quantity = parseInt(qtyInput.value) || 0;
-    
-    // 找到購物車中對應的商品並更新數量
-    const existingItem = cart.find(item => item.id === productId);
-    if (existingItem && quantity > 0) {
-        existingItem.quantity = quantity;
-        updateCartDisplay();
-    } else if (existingItem && quantity === 0) {
-        // 如果數量設為 0，移除該商品
-        const index = cart.findIndex(item => item.id === productId);
-        cart.splice(index, 1);
-        updateCartDisplay();
-    }
-}
-
-// 新增：通知系統
-function showNotification(message, type = 'info') {
-    // 移除現有通知
-    const existingNotification = document.querySelector('.notification');
-    if (existingNotification) {
-        existingNotification.remove();
-    }
-    
-    // 創建新通知
-    const notification = document.createElement('div');
-    notification.className = `notification ${type}`;
-    notification.textContent = message;
-    
-    // 添加到頁面
-    document.body.appendChild(notification);
+    alert(`結帳成功！總金額：${total}`);
     
-    // 顯示動畫
-    setTimeout(() => notification.classList.add('show'), 100);
-    
-    // 自動隱藏
-    setTimeout(() => {
-        notification.classList.remove('show');
-        setTimeout(() => notification.remove(), 300);
-    }, 3000);
-}
-
-// 新增：頁面載入時初始化
-document.addEventListener('DOMContentLoaded', function() {
+    // ✅ 修復：結帳後清空購物車
+    cart = [];
+    discount = 0;
+    freeShipping = false;
     updateCartDisplay();
-    showNotification('購物車系統已就緒！', 'success');
-});
+}
 
-// 新增：鍵盤快捷鍵支援
-document.addEventListener('keydown', function(e) {
-    if (e.ctrlKey || e.metaKey) {
-        switch(e.key) {
-            case 'Enter':
-                if (document.activeElement.id === 'coupon-code') {
-                    e.preventDefault();
-                    applyCoupon();
-                }
-                break;
-            case 'Backspace':
-                if (e.target.tagName !== 'INPUT') {
-                    e.preventDefault();
-                    clearCart();
-                }
-                break;
-        }
-    }
-});
+// ✅ 簡潔版本：所有6個核心Bug都已修復
+// 1. 總金額計算正確（乘法）
+// 2. 運費邏輯正確（不再永遠150）
+// 3. 清空購物車按鈕正常運作
+// 4. FREESHIP 優惠券實際有效
+// 5. 結帳後自動清空購物車
+// 6. 輸入驗證改善
