feat: 完善場景 2 程式碼解釋教學內容

yulin0629 · claude · yulin0629 · commit e752ca37a4d9 · 2025-06-02T03:15:04.000+08:00
- 精簡內容聚焦核心學習目標 - 新增 Ghost Text (Auto Complete) 教學 - 更新 Inline Edit 使用說明（強調選取範圍） - 調整商品價格方便測試運費階梯（99-799元） - 使用 emoji 取代破圖的商品圖片 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/02-code-explanation/README.md b/02-code-explanation/README.md
@@ -1,10 +1,9 @@
-# 場景 2：程式碼解釋實作
+# 場景 2：程式碼解釋與 Inline Edit
 
 ## 🎯 學習目標
-- 學習使用 **@workspace** 參與者來理解整個專案
-- 掌握如何請 Copilot 解釋複雜的程式碼
-- 了解如何詢問程式碼之間的關聯性
-- 探索程式碼的執行流程
+- 深入使用 **@workspace** 理解專案架構
+- **掌握 Inline Edit (Ctrl+I) 快速修改技巧**
+- **理解 Inline Edit vs Chat Edit 使用時機**
 
 ## 📝 場景說明
 您接手了一個既有的電子商務購物車系統，需要理解其架構和運作方式。透過 GitHub Copilot 的 @workspace 功能，快速掌握整個專案的結構。
@@ -23,61 +22,108 @@
 
 ## 📚 Demo 劇本
 
-### 步驟 1：使用 @workspace 了解專案結構
-在 Copilot Chat 中輸入：
-```
-@workspace 請說明這個專案的整體架構和各個檔案的功能
-```
+### 階段 1：@workspace 程式碼理解 (3分鐘)
 
-### 步驟 2：詢問特定功能的實作
+#### 步驟 1：專案架構分析
 ```
-@workspace calculateTotal 函數是如何計算總金額的？它考慮了哪些因素？
+@workspace 請分析這個購物車系統的架構，說明主要功能和檔案關係
 ```
+💡 **使用模式：Ask**
 
-### 步驟 3：理解檔案之間的關係
+#### 步驟 2：追蹤關鍵函數
 ```
-@workspace cart.js 和 products.js 是如何互相配合的？請說明資料流向
+@workspace calculateTotal 函數的運作流程是什麼？它與哪些函數互動？
 ```
+💡 **使用模式：Ask**
 
-### 步驟 4：找出關鍵函數
+#### 步驟 3：理解資料流向
 ```
-@workspace 這個購物車系統的核心功能有哪些？請列出最重要的函數
+@workspace 當使用者點擊「加入購物車」按鈕時，資料是如何在各個檔案間流動的？
 ```
+💡 **使用模式：Ask**
 
-### 步驟 5：詢問改進建議
-```
-@workspace 這個購物車系統有什麼可以改進的地方？請從架構和效能角度分析
+### 階段 2：Ghost Text 體驗 (2分鐘)
+
+#### 步驟 4：使用註解引導 Auto Complete
+1. 開啟 `js/utils.js`
+2. 在檔案最後加入詳細的 TODO 註解：
+```javascript
+// TODO: 加入一個計算折扣的函數
+// 函數名稱: calculateDiscount
+// 參數: subtotal (小計金額)
+// 邏輯: 滿 1000 打 95 折，滿 2000 打 9 折
+// 回傳: 折扣後的金額
 ```
+3. 在註解下方開始輸入 `function calc`
+4. **暂停 1-2 秒**，觀察灰色的 Ghost Text 建議
+5. 按 `Tab` 接受建議，繼續輸入下一行
+6. Copilot 會根據註解自動完成整個函數
+
+✅ **關鍵技巧**：詳細的註解 = 更精準的程式碼生成
+
+### 階段 3：Inline Edit 實戰 (3分鐘)
+
+#### 步驟 5：初識 Inline Edit - 優化運費計算
+1. 開啟 `js/utils.js`
+2. 找到 `calculateShipping` 函數（約第 10-16 行）
+3. **選取整個函數內容**（從 function 到結尾的 }）
+4. 按 `Ctrl+I` (或 `Cmd+I` on Mac)
+5. 輸入：`改成階梯式運費：500以下60元，500-1000收30元，1000以上免運`
+6. 按 Enter 送出
+7. 檢視修改預覽，按 `Ctrl+Enter` 接受
+
+#### 步驟 6：Inline Edit 實用修改 - 整合折扣
+1. 在 `js/cart.js` 找到 `calculateTotal` 函數（約 137-146 行）
+2. **選取整個 calculateTotal 函數**
+3. 按 `Ctrl+I`
+4. 輸入：`整合剛剛寫的 calculateDiscount 函數，在運費計算前先計算折扣`
+5. 按 Enter，等待 AI 生成程式碼
+6. 按 `Ctrl+Enter` 接受修改
+
+#### 步驟 7：測試修改效果
+1. 開啟 `index.html` 在瀏覽器中
+2. 加入商品到購物車
+3. 觀察：
+   - 運費隨金額變化（步驟 5 的效果）
+   - 滿額自動打折（步驟 6 的效果）
 
 ## 💡 重點提示
 
-### @workspace 使用技巧：
-1. **全域視角**：適合詢問整體架構問題
-2. **跨檔案分析**：能理解多個檔案之間的關係
-3. **程式碼搜尋**：快速找到特定功能的位置
-4. **最佳實踐**：可以詢問程式碼品質建議
+### Ghost Text (Auto Complete) 技巧：
+- **詳細註解**：寫明函數名稱、參數、邏輯、回傳值
+- **暂停等待**：輸入幾個字後停 1-2 秒
+- **Tab 接受**：看到灰色建議後按 Tab
+- **逐行生成**：可以一行一行接受或修改
 
-### 常用 @workspace 提示詞：
-- "@workspace 這個專案使用了哪些設計模式？"
-- "@workspace 請找出所有處理使用者輸入的地方"
-- "@workspace 哪些函數可能有效能問題？"
-- "@workspace 這個專案的依賴關係是什麼？"
+### Inline Edit 快速記憶：
+- **選取程式碼 → Ctrl+I**：針對選取範圍修改
+- **Ctrl+I 不選取**：AI 會根據游標位置猜測範圍
+- **Enter**：送出指令
+- **Ctrl+Enter**：接受修改
+- **Esc**：取消修改
+
+### Inline Edit vs Chat Edit：
+- **Inline Edit**：定點修改，快速直接
+- **Chat Edit**：探索修改，需要 AI 定位
 
 ## 🎬 Demo 重點
-1. 強調 @ 符號的使用方式
-2. 展示 @workspace 如何理解多個檔案
-3. 示範如何追蹤函數呼叫鏈
-4. 展現 Copilot 對程式碼的深度理解
+1. **@workspace 的專案理解能力**
+2. **Ghost Text 根據註解自動完成**
+3. **Inline Edit 的快速修改體驗**
+4. **實際運行展示修改效果**
 
 ## ✅ 預期成果
-完成本場景後，您應該：
-- 能夠使用 @workspace 分析整個專案
-- 理解如何詢問程式碼的架構問題
-- 掌握追蹤程式碼執行流程的技巧
-- 對購物車系統有完整的理解
-
-## 🔍 延伸練習
-1. 使用 @workspace 找出所有的事件處理器
-2. 詢問如何新增優惠券功能
-3. 請 Copilot 產生這個系統的架構圖（使用 mermaid）
-4. 找出潛在的安全性問題
+- 掌握 @workspace 分析專案的能力
+- 會使用註解引導 Ghost Text 生成程式碼
+- 熟練使用 Inline Edit (Ctrl+I) 快速修改
+- 了解 Ghost Text、Inline Edit、Chat Edit 的使用時機
+- 能實際看到程式碼修改的效果
+
+## 🔍 快速練習
+1. 用 Inline Edit 修改其他函數
+2. 試試選取不同範圍使用 Ctrl+I 的差異
+3. 用 @workspace 找出可優化的地方
+
+## 🎯 下一步
+- 場景 3 將首次引入 Agent 模式（20%）
+- 體驗 Agent 與 Ask/Edit 的根本差異
diff --git a/02-code-explanation/js/products.js b/02-code-explanation/js/products.js
@@ -5,57 +5,57 @@
 const PRODUCTS = [
     {
         id: 'p001',
-        name: '無線藍牙耳機',
-        price: 2500,
-        image: 'https://via.placeholder.com/200x200/4A90E2/FFFFFF?text=藍牙耳機',
-        category: '3C',
-        stock: 15,
-        description: '高品質音效，持久續航'
+        name: '手機殼',
+        price: 299,
+        image: '📱',
+        category: '配件',
+        stock: 50,
+        description: '防摔保護，多色可選'
     },
     {
         id: 'p002',
-        name: '機械式鍵盤',
-        price: 3200,
-        image: 'https://via.placeholder.com/200x200/E24A4A/FFFFFF?text=機械鍵盤',
-        category: '3C',
-        stock: 8,
-        description: '青軸設計，打字手感極佳'
+        name: '充電線',
+        price: 199,
+        image: '🔌',
+        category: '配件',
+        stock: 35,
+        description: '快速充電，耐用材質'
     },
     {
         id: 'p003',
-        name: '人體工學滑鼠',
-        price: 1200,
-        image: 'https://via.placeholder.com/200x200/4AE290/FFFFFF?text=滑鼠',
+        name: '藍牙喇叭',
+        price: 799,
+        image: '🔊',
         category: '3C',
         stock: 20,
-        description: '符合人體工學，減少手腕負擔'
+        description: '360度環繞音效'
     },
     {
         id: 'p004',
-        name: '筆記型電腦支架',
-        price: 800,
-        image: 'https://via.placeholder.com/200x200/E2A04A/FFFFFF?text=支架',
+        name: '手機支架',
+        price: 159,
+        image: '📲',
         category: '配件',
-        stock: 25,
-        description: '可調整高度，改善姿勢'
+        stock: 45,
+        description: '多角度調整，穩固耐用'
     },
     {
         id: 'p005',
-        name: 'USB-C 集線器',
-        price: 1500,
-        image: 'https://via.placeholder.com/200x200/A04AE2/FFFFFF?text=集線器',
-        category: '配件',
-        stock: 12,
-        description: '多合一擴充，支援4K輸出'
+        name: '無線滑鼠',
+        price: 499,
+        image: '🖱️',
+        category: '3C',
+        stock: 25,
+        description: '靜音設計，續航持久'
     },
     {
         id: 'p006',
-        name: '無線充電板',
-        price: 600,
-        image: 'https://via.placeholder.com/200x200/4AE2A0/FFFFFF?text=充電板',
+        name: '螢幕保護貼',
+        price: 99,
+        image: '🛡️',
         category: '配件',
-        stock: 30,
-        description: '快速充電，支援多種裝置'
+        stock: 60,
+        description: '鋼化玻璃，防刮防爆'
     }
 ];
 
@@ -109,7 +109,7 @@ function createProductCard(product) {
     const card = document.createElement('div');
     card.className = 'product-card';
     card.innerHTML = `
-        <img src="${product.image}" alt="${product.name}">
+        <div class="product-image">${product.image}</div>
         <h3>${product.name}</h3>
         <p class="description">${product.description}</p>
         <p class="price">${formatCurrency(product.price)}</p>
diff --git a/02-code-explanation/style.css b/02-code-explanation/style.css
@@ -93,12 +93,16 @@ main {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
-.product-card img {
+.product-card .product-image {
     width: 100%;
     height: 150px;
-    object-fit: cover;
+    background: #f0f0f0;
     border-radius: 5px;
     margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
 }
 
 .product-card h3 {
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -173,6 +173,32 @@
 - 重點展示而非詳細教學每個功能
 - 提供實用的 takeaway 工具和模板
 
+## 📌 Git 分支管理策略
+
+### **教學專案分支設計**
+- **main 分支**：保持原始教學檔案，供學員下載使用
+- **pages 分支**：GitHub Pages 部署分支，教學時在此分支進行修改
+  
+### **分支使用流程**
+1. **課前準備**：
+   - 確保 `pages` 分支與 `main` 同步
+   - GitHub Pages 設定使用 `pages` 分支
+   
+2. **教學進行時**：
+   - 切換到 `pages` 分支進行 Live Demo
+   - 所有修改都在 `pages` 分支上進行
+   - 學員仍從 `main` 分支下載原始檔案
+   
+3. **課後處理**：
+   - 可選擇性地將有價值的改進合併回 `main`
+   - 或保持 `pages` 作為教學歷史記錄
+
+### **優點**
+- 學員永遠能取得乾淨的初始專案
+- 教師可以自由修改而不影響學員體驗
+- GitHub Pages 即時展示修改效果
+- 保留教學過程的完整記錄
+
 ## 🎯 預期成果
 
 學員完成課程後將能夠：
