Merge branch 'gh-pages'

Author: yulin0629

.copilotignore

@@ -0,0 +1,13 @@
+# GitHub Copilot 忽略設定
+# 防止 Copilot 讀取教學文件，避免 AI 混淆
+
+# 忽略所有教學指南文件
+**/LESSON_GUIDE.md
+TEACHING.md
+
+# 忽略場景 8 的教學文件
+08-comprehensive-project/LESSON_GUIDE.md
+
+# 忽略其他教學相關文件
+**/教學說明.md
+**/*教學*.md

01-first-experience/README.md 01-first-experience/LESSON_GUIDE.md01-first-experience/README.md renamed to 01-first-experience/LESSON_GUIDE.md

@@ -301,20 +301,72 @@
             position: relative;
             max-height: 90vh;
             overflow-y: auto;
+            overflow-x: hidden;
         }
 
         .markdown-close {
-            position: absolute;
-            top: 15px;
-            right: 20px;
-            font-size: 30px;
+            position: fixed;
+            top: 70px;
+            right: calc((100% - 900px) / 2 + 30px);
+            width: 32px;
+            height: 32px;
             cursor: pointer;
-            color: #666;
-            transition: color 0.3s;
+            background: transparent;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1001;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border: none;
+            outline: none;
+            padding: 0;
+            opacity: 0.6;
+        }
+        
+        .markdown-close::before {
+            content: '';
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 50%;
+            transform: scale(0);
+            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .markdown-close svg {
+            width: 16px;
+            height: 16px;
+            stroke: #333;
+            stroke-width: 2.5;
+            transition: all 0.2s ease;
+            position: relative;
+            z-index: 1;
         }
 
         .markdown-close:hover {
-            color: #000;
+            opacity: 1;
+        }
+        
+        .markdown-close:hover::before {
+            transform: scale(1);
+        }
+        
+        .markdown-close:hover svg {
+            stroke: #000;
+            transform: rotate(90deg);
+        }
+        
+        .markdown-close:active {
+            transform: scale(0.95);
+        }
+        
+        @media (max-width: 900px) {
+            .markdown-close {
+                right: 20px;
+                top: 60px;
+            }
         }
 
         /* Markdown 渲染樣式 */
@@ -352,6 +404,7 @@
             overflow-x: auto;
             margin: 15px 0;
             position: relative;
+            max-width: 100%;
         }
 
         .markdown-content pre code {
@@ -413,6 +466,15 @@
             border-collapse: collapse;
             width: 100%;
             margin: 15px 0;
+            display: block;
+            overflow-x: auto;
+            white-space: nowrap;
+        }
+        
+        .markdown-content table td,
+        .markdown-content table th {
+            white-space: normal;
+            word-wrap: break-word;
         }
 
         .markdown-content th, .markdown-content td {
@@ -499,7 +561,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">建立 Copilot 使用基礎，體驗傳統 Chat 功能</div>
                         <span class="agent-indicator agent-0">Agent 0%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./01-first-experience/README.md', '場景 1：初次對話體驗'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./01-first-experience/LESSON_GUIDE.md', '場景 1：初次對話體驗'); return false;" class="btn btn-doc">📚 查看教學</a>
                             <a href="./01-first-experience/" class="btn btn-demo">🎯 實際應用</a>
                         </div>
                     </div>
@@ -510,7 +572,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">掌握 @workspace 核心功能，理解專案結構</div>
                         <span class="agent-indicator agent-0">Agent 0%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./02-code-explanation/README.md', '場景 2：程式碼解釋實作'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./02-code-explanation/LESSON_GUIDE.md', '場景 2：程式碼解釋實作'); return false;" class="btn btn-doc">📚 查看教學</a>
                             <a href="./02-code-explanation/" class="btn btn-demo">🎯 實際應用</a>
                         </div>
                     </div>
@@ -521,7 +583,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">體驗 Agent 協助編程，對比手動 vs AI 效率</div>
                         <span class="agent-indicator agent-20">Agent 20%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./03-function-generation/README.md', '場景 3：函數生成'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./03-function-generation/LESSON_GUIDE.md', '場景 3：函數生成'); return false;" class="btn btn-doc">📚 查看教學</a>
                             <a href="./03-function-generation/" class="btn btn-demo">🎯 實際應用</a>
                         </div>
                     </div>
@@ -532,7 +594,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">讓 Agent 主動發現和修復程式問題</div>
                         <span class="agent-indicator agent-30">Agent 30%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./04-debugging-assistant/README.md', '場景 4：偵錯輔助'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./04-debugging-assistant/LESSON_GUIDE.md', '場景 4：偵錯輔助'); return false;" class="btn btn-doc">📚 查看教學</a>
                             <a href="./04-debugging-assistant/" class="btn btn-demo">🎯 實際應用</a>
                         </div>
                     </div>
@@ -543,7 +605,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">Agent 自主設計測試架構和完整用例</div>
                         <span class="agent-indicator agent-50">Agent 50%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./05-unit-testing/README.md', '場景 5：單元測試'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./05-unit-testing/LESSON_GUIDE.md', '場景 5：單元測試'); return false;" class="btn btn-doc">📚 查看教學</a>
                             <a href="./05-unit-testing/" class="btn btn-demo">🎯 實際應用</a>
                         </div>
                     </div>
@@ -554,7 +616,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">Agent 分析遺留代碼並執行重構策略</div>
                         <span class="agent-indicator agent-60">Agent 60%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./06-code-refactoring/README.md', '場景 6：程式碼重構'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./06-code-refactoring/LESSON_GUIDE.md', '場景 6：程式碼重構'); return false;" class="btn btn-doc">📚 查看教學</a>
                             <a href="./06-code-refactoring/" class="btn btn-demo">🎯 實際應用</a>
                         </div>
                     </div>
@@ -565,7 +627,7 @@ <h2>📚 8 個學習場景</h2>
                         <div class="scenario-description">Agent 自動分析程式碼生成完整文件體系</div>
                         <span class="agent-indicator agent-80">Agent 80%</span>
                         <div class="scenario-links">
-                            <a href="#" onclick="loadMarkdown('./07-documentation/README.md', '場景 7：文件生成'); return false;" class="btn btn-doc">📚 查看教學</a>
+                            <a href="#" onclick="loadMarkdown('./07-documentation/LESSON_GUIDE.md', '場景 7：文件生成'); return false;" class="btn btn-doc">📚 查看教學</a>
                         </div>
                     </div>
 
@@ -586,7 +648,7 @@ <h2>📚 8 個學習場景</h2>
                             </div>
                         </div>
                         <div class="scenario-links scenario-links-3">
-                            <a href="#" onclick="loadMarkdown('./08-comprehensive-project/TEACHING_GUIDE.md', '場景 8：GitHub 自動化 Agent'); return false;" class="btn btn-doc">📚 教學</a>
+                            <a href="#" onclick="loadMarkdown('./08-comprehensive-project/LESSON_GUIDE.md', '場景 8：GitHub 自動化 Agent'); return false;" class="btn btn-doc">📚 教學</a>
                             <a href="https://github.com/yulin0629/copilot-agent-demo-todo" target="_blank" class="btn btn-repo">💻 GitHub</a>
                             <a href="https://yulin0629.github.io/copilot-agent-demo-todo/" target="_blank" class="btn btn-demo">🎯 Demo</a>
                         </div>
@@ -603,18 +665,38 @@ <h2>📚 8 個學習場景</h2>
     <!-- Markdown Modal -->
     <div id="markdownModal" class="markdown-modal">
         <div class="markdown-content">
-            <span class="markdown-close" onclick="closeMarkdown()">&times;</span>
+            <button class="markdown-close" onclick="closeMarkdown()" aria-label="關閉">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </button>
             <div id="markdownBody">
                 <div class="markdown-loading">📡 載入中...</div>
             </div>
         </div>
     </div>
 
     <script>
+        // 儲存和取得捲動位置
+        function saveScrollPosition(path, position) {
+            localStorage.setItem(`scroll_${path}`, position);
+        }
+        
+        function getScrollPosition(path) {
+            return parseInt(localStorage.getItem(`scroll_${path}`) || '0');
+        }
+        
+        // 儲存當前文件路徑
+        let currentMarkdownPath = '';
+        
         // 載入並顯示 Markdown
         async function loadMarkdown(path, title) {
             const modal = document.getElementById('markdownModal');
             const body = document.getElementById('markdownBody');
+            const container = body.parentElement;
+            
+            // 儲存當前路徑
+            currentMarkdownPath = path;
 
             // 顯示 Modal
             modal.style.display = 'block';
@@ -641,8 +723,24 @@ <h2>📚 8 個學習場景</h2>
                 // 為所有程式碼區塊添加複製按鈕
                 addCopyButtons();
 
-                // 滾動到頂部
-                body.parentElement.scrollTop = 0;
+                // 恢復上次的捲動位置
+                const savedPosition = getScrollPosition(path);
+                if (savedPosition > 0) {
+                    // 使用 setTimeout 確保內容已經渲染
+                    setTimeout(() => {
+                        container.scrollTop = savedPosition;
+                    }, 100);
+                } else {
+                    // 如果沒有儲存的位置，滾動到頂部
+                    container.scrollTop = 0;
+                }
+                
+                // 監聽捲動事件，儲存位置
+                container.onscroll = debounce(() => {
+                    if (currentMarkdownPath) {
+                        saveScrollPosition(currentMarkdownPath, container.scrollTop);
+                    }
+                }, 300);
 
             } catch (error) {
                 body.innerHTML = `
@@ -655,9 +753,34 @@ <h2>❌ 載入失敗</h2>
             }
         }
 
+        // 防抖函數
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        
         // 關閉 Markdown Modal
         function closeMarkdown() {
-            document.getElementById('markdownModal').style.display = 'none';
+            const modal = document.getElementById('markdownModal');
+            const container = document.getElementById('markdownBody').parentElement;
+            
+            // 儲存最後的捲動位置
+            if (currentMarkdownPath) {
+                saveScrollPosition(currentMarkdownPath, container.scrollTop);
+            }
+            
+            // 清理事件監聽器
+            container.onscroll = null;
+            
+            // 關閉 Modal
+            modal.style.display = 'none';
         }
 
         // 點擊 Modal 外部關閉