?��??�工?�自?��? - Line Bot MVP 系�? - Luke?��???/title> <meta name="description" content="深入�?? Line Bot MVP ?��?作�??��?如�??�用 AI 角色?��??��??��? Jira 工單?��?件自?�搬家�?以�??�創?�購?��?式暫存�?設�???> <link rel="canonical" href="https://lukehou.com/projects/line-bot-workflow.html"> <meta property="og:type" content="website"> <meta property="og:url" content="https://lukehou.com/projects/line-bot-workflow.html"> <meta property="og:title" content="?��??�工?�自?��? - Line Bot MVP 系�? - Luke?��???> <meta property="og:description" content="深入�?? Line Bot MVP ?��?作�??��?如�??�用 AI 角色?��??��??��? Jira 工單?��?件自?�搬家�?以�??�創?�購?��?式暫存�?設�???> <meta property="og:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-workflow-cover.jpg"> <meta property="og:site_name" content="Luke Hou"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="?��??�工?�自?��? - Line Bot MVP 系�? - Luke?��???> <meta name="twitter:description" content="深入�?? Line Bot MVP ?��?作�??��?如�??�用 AI 角色?��??��??��? Jira 工單?��?件自?�搬家�?以�??�創?�購?��?式暫存�?設�???> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-workflow-cover.jpg">  <meta property="og:url" content="https://lukehou.com/projects/line-bot-workflow.html"> <meta property="og:description" content="深入�?? Line Bot MVP ?��?作�??��?如�??�用 AI 角色?��??��??��? Jira 工單?��?件自?�搬家�?以�??�創?�購?��?式暫存�?設�???> <meta property="og:locale" content="zh_TW">  <meta name="twitter:title" content="?��??�工?�自?��? - Line Bot MVP 系�?"> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-workflow-cover.jpg">  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "TechArticle", "headline": "?��??�工?�自?��? - Line Bot MVP 系�?", "description": "深入�?? Line Bot MVP ?��?作�??��?如�??�用 AI 角色?��??��??��? Jira 工單?��?件自?�搬家�?以�??�創?�購?��?式暫存�?設�???, "image": "https://lukehou.com/images/line-ai-bot-mvp/og-workflow-cover.jpg", "author": { "@type": "Person", "name": "Luke Hou", "url": "https://lukehou.com" }, "publisher": { "@type": "Person", "name": "Luke Hou" }, "datePublished": "2025-12-25", "keywords": ["Jira", "Line Bot", "Workflow Automation", "AI", "Project Management"], "articleSection": "Technology", "inLanguage": "zh-TW" } </script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="../css/style.css">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0V2L1DQVPY"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-0V2L1DQVPY'); </script> <style> :root { /* Christmas Palette */ --xmas-red: #D42426; --xmas-green: #165B33; --xmas-gold: #F8B229; --xmas-snow: #F0F2F5; --xmas-dark: #0F0F0F; } /* ?? ?��??�度�?*/ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 5px; background: linear-gradient(90deg, var(--xmas-red), #ff6b6b); z-index: 9999; transition: width 0.1s ease-out; } /* ?? 返�??�部?��? */ .back-to-top-btn { position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px; background: linear-gradient(135deg, var(--xmas-red), #ff6b6b); border: none; border-radius: 50%; color: white; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); z-index: 1000; } .back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(212, 36, 38, 0.4); } /* ?��??��?縮放?�畫 */ .article-content img { transition: transform 0.3s ease, box-shadow 0.3s ease; } .article-content img:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ?�� ?��??��??��???*/ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); border-top: 3px solid rgba(212, 36, 38, 0.6); padding: 0.75rem 1rem; z-index: 1000; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .mobile-nav::-webkit-scrollbar { display: none; } .mobile-nav a { display: inline-block; padding: 0.6rem 1rem; margin-right: 0.4rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 0.85rem; font-weight: 500; border-radius: 20px; background: rgba(255, 255, 255, 0.15); transition: all 0.2s ease; } .mobile-nav a:hover, .mobile-nav a.active { background: rgba(212, 36, 38, 0.4); color: #ff6b6b; } @media (max-width: 992px) { .mobile-nav { display: block; } .back-to-top-btn { bottom: 80px; } } body { background-color: var(--xmas-dark); background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px), radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px), radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px); background-size: 550px 550px, 350px 350px, 250px 250px; background-position: 0 0, 40px 60px, 130px 270px; animation: snow 20s linear infinite; } @keyframes snow { 0% { background-position: 0 0, 40px 60px, 130px 270px; } 100% { background-position: 550px 1000px, 400px 400px, 300px 300px; } } .project-hero { background: linear-gradient(rgba(212, 36, 38, 0.8), rgba(15, 15, 15, 0.9)); padding: 5rem 0; color: white; border-bottom: 2px solid var(--xmas-gold); } .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(248, 178, 41, 0.2); border-radius: 16px; transition: transform 0.3s ease; } .glass-card:hover { border-color: var(--xmas-gold); } .article-content h2 { color: var(--xmas-gold); margin-top: 2rem; margin-bottom: 1.5rem; font-weight: 700; } .article-content h3 { color: white; margin-top: 1.5rem; margin-bottom: 1rem; border-left: 4px solid var(--xmas-green); padding-left: 1rem; } .tech-note { background: rgba(212, 36, 38, 0.1); border-left: 4px solid var(--xmas-red); padding: 1rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); } .feature-section { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(5px); border: 1px solid rgba(212, 36, 38, 0.3); border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 2.5rem; } .feature-section:hover { border-color: rgba(212, 36, 38, 0.5); box-shadow: 0 0 20px rgba(212, 36, 38, 0.1); } .feature-section h2 { margin-top: 0; } /* 浮�?導航�?*/ .floating-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(212, 36, 38, 0.4); border-radius: 12px; padding: 1rem; max-width: 200px; transition: all 0.3s ease; } .floating-nav:hover { border-color: rgba(212, 36, 38, 0.7); box-shadow: 0 0 20px rgba(212, 36, 38, 0.2); } .floating-nav-title { font-size: 0.75rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(212, 36, 38, 0.5); } .floating-nav ul { list-style: none; padding: 0; margin: 0; } .floating-nav li { margin-bottom: 0.5rem; } .floating-nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.85rem; display: block; padding: 0.4rem 0.6rem; border-radius: 6px; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .floating-nav a:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.15); } .floating-nav a.active { color: #ff6b6b; background: rgba(255, 107, 107, 0.2); font-weight: 600; } .floating-nav .back-to-top { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(212, 36, 38, 0.4); } .floating-nav .back-to-top a { color: var(--xmas-gold); } .floating-nav .back-to-top a:hover { color: #ffc107; background: rgba(255, 193, 7, 0.1); } @media (max-width: 992px) { .floating-nav { display: none; } } </style> </head> <body>  <div class="reading-progress" id="readingProgress"></div> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-danger"> <div class="container"> <a class="navbar-brand text-danger fw-bold" href="../index.html">?? Luke Hou 2025 ?��??�輯 ??</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="line-bot-mvp.html">?? ?�系?��???/a></li> </ul> </div> </div> </nav> </header> <main> <section class="project-hero text-center"> <div class="container"> <span class="badge bg-warning text-dark mb-2">Series Ep.2</span> <h1 class="display-5 fw-bold mb-3">Line Bot ?��?橋�?：自?��?工單</h1> <p class="lead text-white-50">�?AI 幫�?�?Jira，�??�件?��??�家，�???RD ??PM 之�??��?契�?/p> </div> </section> <section class="container mt-5"> <div class="row justify-content-center"> <div class="col-lg-9 article-content">  <div class="glass-card p-4 mb-5"> <p class="lead text-white"> ???�PM 辛苦?��??�求�?RD 辛苦�?Bug，為什麼大家�??�覺得�?訊�??�步？�? </p> <p class="text-white-50"> ?�通常不是人�??��?，是工具?�層?�LINE ?��??��??��??��??��?Jira ?��?構�??�執行�?中�??��?鴻�?，就?��??�個�?案�?填�??��? ?��? API 串接，�??��??�種???（�?製貼上、找檔�??�查?��??��?消失?? </p> </div>  <div class="feature-section" id="section-1"> <h2>1. Inline 輕�?管�?：�??��??�表就能?��?一??/h2> <p class="text-white-50"> 每個�??��?表就?��?張「戰?��?要表?�。�?不�??�使?�者頻繁地?��??�面?��? Modal?? ?�此，�??��?常�?要�??��??�部?��? <strong>Inline Edit</strong>，�?你�??��??�、即點即?��? </p> <h3>?? Assignee / Status / Priority：�?常用?��?位直?�編�?/h3> <p class="text-white-50"> 每�??��??��?事件，都?�以?�接?��?表�??��?負責�?(Assignee)?��???(Status) ?�優?��? (Priority)?? 不�?要�??�去?�改，�?一下�??�選?�就完�??�這在 Daily Standup 快速�?濾�?辦�??��??�別?�用?? </p> <div class="row align-items-center my-3"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/inline-edit-assignee-status.jpg" alt="Inline 編輯 Assignee/Status/Priority 下�??�單" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">Inline 編輯 Assignee/Status/Priority 下�??�單</small> </div> </div> <h3>?? ?��?�?(Quick Notes)</h3> <p class="text-white-50"> ?��??��??�要�??��?訊息?��??��?，�?如「已?�話確�??�「�?客戶?��??��? Inline ?�註欄�?你直?�在訊息?��??��?，�??��?絡都?�在?�地，�??�散?�在?��??�方?? </p> <div class="row align-items-center my-3"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/inline-quick-notes.jpg" alt="Inline ?��?註�??�示�? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">Inline ?��?註�??�示�?/small> </div> </div> <h3>�?標註?��? (Flag as Important) & ?�� 快速�?�?Ignore</h3> <p class="text-white-50"> ?�茫?��??�海中�?一顆�??�就?��??�鍵訊息?��??�出?? 一?��?註「�?要」�??��?篩選?��?快速�??��??��??��??��?大�??? </p> <p class="text-white-50"> 並�?每�?訊息?�值�?追蹤，�?些�?粹是?�收?�」、「OK?�、�?1?�這�??��?義�??��??? 一?��?�?Ignore，�?它�?統�??��?辦中消失，�??�戰?�板?�乾淨整潔�? </p> <div class="row align-items-center my-3"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/inline-ignore-flag.jpg" alt="快速�?�?Ignore ?�能示�?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">快速�?�?Ignore ?�能示�?</small> </div> </div> </div>  <div class="feature-section" id="section-2"> <h2>2. 殺�??��?AI ?��??��?工單</h2> <p class="text-white-50"> ?�是�?PM 驚呼 "Magic!" ?��??��?讓�??��?下大?��??��?不�??��?建�?工單，直?�在?��?管�?介面快速�??��?並�?填工?��?要�? </p> <h3>AI 如�??��?�?PM 一�?��考�?</h3> <p class="text-white-50"> ?��?�?AI：「�??�在?��?位�?深�? Jira 管�??��?專�?經�??��? ?�此，AI ?�出?��??�是對話?��?，�??�自?��??�容結�??��? </p> <ul> <li class="text-white-50"><strong>Summary:</strong> ?��??��?簡�??��??��?�?(例�?：`[iOS] ?�入?�面?��??��?`)</li> <li class="text-white-50"><strong>Description:</strong> ?��??�解?�「�??�步驟」、「�??��??�」�??�實?��?況」�?/li> <li class="text-white-50"><strong>?��?訊息?��?:</strong> Description 下方?��??��?對�??��??��??��??�便比�??�解??/li> </ul> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/ai-jira-ticket-generation.jpg" alt="AI ?��??��? Jira 工單?��??��?結�??�覽" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��?訊息轉工?��?介面</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/multi-msg-jira-trigger.jpg" alt="AI ?��??��? Jira 工單?�觸?�畫?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">多�??��?工單，AI ?��??��? Jira 工單?�觸?�畫??/small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/multi-msg-jira-preview.jpg" alt="AI ?��??��?多�???Jira 工單?��??��?結�??�覽" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">多�??��?工單，AI ?��??��?多�???Jira 工單?��??��?結�??�覽</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/multi-msg-jira-result.jpg" alt="AI ?��??��?多�??? 實�??��???Jira 工單?��??�畫?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?��??��?多�??? 實�??��???Jira 工單?��??�畫??/small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/jira-notification-copy.jpg" alt="AI ?��??��?多�???: 一?��?製�???Jira 網�?跟主?��??�知訊息，�?你�??��?複製來�?製去?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">一?��?製�???Jira 網�?跟主?��??�知訊息，�?你�??��?複製來�?製去??/small> </div> </div> </div>  <div class="feature-section" id="section-3"> <h2>3. 併單式�?件�??��?</h2> <p class="text-white-50"> 客戶跟�??��?訊息往往?�跳躍�?，東講�??�西講�??��??�夾?�其他�?議�?，�??�散?�在?��??��??��?對話裡�? ?�以�?設�?了�??��?似「購?��??��??��??��??�，可以�??��?多�?對話後�?綁�??��?一事件?? </p> <div class="tech-note"> <strong>?? 設�??�念�?/strong> 你可以�??��??��??��?條�??��??�購?��???Staging Area)?? ?�後�?一次�??��???AI 幫�?組�??��??��??��??��?�?(Event)?��??��??��?轉工?�、�?記已?��??�是?��??��?，都變�?井�??��??? <br> <br> 併單式�?件�??�現?�顯??Tag 標�?，並且自?��??��?訊息上色，�?你�??�就?��??�哪些�??�屬?��?一事件?? <br> <br> ?�?�?��??�是，�??��??��??��?從單一?�散訊息，�?變為對話事件併單?��?，�?實�??��?點�? </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/shopping-cart-staging-area.jpg" alt="併單式�?件暫存�??��?作面?�截?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">併單式�?件暫存�??��?作面?�截??/small> </div> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/event-grouping-tags.jpg" alt="併單式�?件暫存�??��?作面?�截?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">併單式�?件�??�現?�顯??Tag 標�?，並且自?��??��?訊息上色??/small> </div> </div> </div>  <div class="feature-section" id="section-4"> <h2>4. AI ?�單?��?：溫?��?溝通�?�?/h2> <p class="text-white-50"> ?�度?��?了�??�要去?��?下�?但�??�催得太?�接?��??��?�? ?��?<strong>AI ?�單?��?</strong> 就是你�??�佳幫?��? </p> <p class="text-white-50"> ?��?點�??��??�催?�內容」�?AI ?�根?��??��??��??��?件�?上�??��??��?幫�?寫出一�?<strong>專業?�禮貌�?不失溫度</strong> ?�詢?��??��? 你可以直?��?製貼上到 Line 群�?，�?下�?織�?言?��?�???��?貼�??��? Emoji 讓氣氛更輕�? ???? </p> <ul class="text-white-50"> <li><strong>一?��??��?</strong>AI ?��?讀?��?件�?絡�??�出客製?�催?��?�?/li> <li><strong>?�接?�送�?</strong>點�??�直?�推?�」�?訊息?�接?�送到負責人�? Line，�??�系統自?��??�催?��???每�??�費200�?</li> <li><strong>複製?�用�?/strong>不想?�錢?��?點�??��?製並標�?已催?�」�?訊息複製?�剪貼簿，�??�系統自?��??�催?��???/li> <li><strong>禮�?溝通�?</strong>不用?�煩?�措辭�?�?AI 幫�?維護?��??��?</li> </ul> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/ai-follow-up-generator.jpg" alt="AI ?�單?��?：�??�禮貌催?��??��?介面" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?�單?��?：�??�禮貌催?��??��?介面</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/line-push-notification-demo.jpg" alt="AI ?�單?��?：更?�人?�是，�??�以?�接?��??��??�發給�?責人??Line�??�費?��?00�?month)" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <img src="../images/line-ai-bot-mvp/line-push-notification-mobile.jpg" alt="AI ?�單?��?：更?�人?�是，�??�以?�接?��??��??�發給�?責人??Line�??�費?��?00�?month)" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?�單?��?：更?�人?�是，�??�以?�接?��??��??�發給�?責人?? Line�??�費?��?00�?month)</small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/manual-follow-up-copy.jpg" alt="AI ?�單?��?：�??��?較拮?��?也是?�以?��?貼�??�單訊息(系統?�自?��?複製)" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">AI ?�單?��?：�??��?較拮?��?也是?�以?��?貼�??�單訊息(系統?�自?��?複製)</small> </div> </div> </div>  <div class="feature-section" id="section-5"> <h2>5. AI 專�??��?質�?護�??��??�測�?/h2> <p class="text-white-50"> 一?�業餘�? Side Project ，在 AI 輔助?�改?�頻繁迭�??，�?確�??�穩定�?作�??��??��?測試?��?夠�??? ?�建立�?一套�??��? <strong>?��??�測試�???/strong>，確保�?次�?式碼變更?�能主�?驗�??��??�能?�否�?��?��??? </p> <div class="row text-center my-4"> <div class="col-md-3"> <div class="p-3 border border-info rounded mb-3"> <h3 class="text-info fw-bold">51</h3> <small class="text-white-50">總測試數</small> </div> </div> <div class="col-md-3"> <div class="p-3 border border-success rounded mb-3"> <h3 class="text-success fw-bold">51</h3> <small class="text-white-50">?��?</small> </div> </div> <div class="col-md-3"> <div class="p-3 border border-danger rounded mb-3"> <h3 class="text-danger fw-bold">0</h3> <small class="text-white-50">失�?</small> </div> </div> <div class="col-md-3"> <div class="p-3 border border-warning rounded mb-3"> <h3 class="text-warning fw-bold">17s</h3> <small class="text-white-50">?��??��?</small> </div> </div> </div> <h3>?�� 測試涵�?範�?</h3> <ul class="text-white-50"> <li><strong>輔助?�數測試 (18)�?/strong>?��?差�?算、UTC 轉�??�日?��??��??�、�??�無?��???/li> <li><strong>API CRUD 測試 (17)�?/strong>?�?�更?�、優?��??��?註、�?要�?記、批次更??/li> <li><strong>認�?測試 (9)�?/strong>?�入?��?/失�??�Token 驗�??��??�防�?/li> <li><strong>Supabase ?��? (7)�?/strong>?��??�詢?�群組查詢、�?�?CRUD</li> </ul> <div class="tech-note"> <strong>??�??�術細節�?/strong> 使用 <strong>Python pytest</strong> ?��??�端視覺?��?表板，�?次部署�??��??��??�部測試?? Console 輸出?��?顯示測試?�度，�??�發?��?程�?碼�?質�??��?信�??? </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/auto-test-dashboard-running.jpg" alt="?��??�測試�?表板：全?��??? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��??�測試�?表板：全?��???/small> </div> </div> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/auto-test-dashboard-passed.jpg" alt="?��??�測試�?表板�?1 ?�測試全?�通�?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��??�測試�?表板�?1 ?�測試全?�通�?</small> </div> </div> </div> <hr class="my-5 border-secondary"> <div class="d-flex justify-content-between align-items-center"> <a href="line-bot-search.html" class="btn btn-outline-secondary"> <i class="bi bi-arrow-left me-2"></i>Ep.1 ?��?機�? </a> <a href="line-bot-ai.html" class="btn btn-warning"> Ep.3 AI 守護?��? <i class="bi bi-arrow-right me-2"></i> </a> </div>  <div class="glass-card p-4 mt-5"> <h4 class="text-warning mb-4"><i class="bi bi-book me-2"></i>?��??��?</h4> <div class="row g-3"> <div class="col-md-6"> <h6 class="text-white-50 small mb-2">?? ?�系?�其他�?�?/h6> <ul class="list-unstyled mb-0"> <li class="mb-2"><a href="line-bot-search.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-success"></i>Ep.1 ?��?機�?對話資產管�?</a></li> <li><a href="line-bot-ai.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-danger"></i>Ep.3 AI 守護?��?主�?治�?</a></li> </ul> </div> <div class="col-md-6"> <h6 class="text-white-50 small mb-2">?? ?��??�術�?�?/h6> <ul class="list-unstyled mb-0"> <li class="mb-2"><a href="golive-jira-automation.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>Go-Live ?�器：Sheet to Jira</a></li> <li><a href="vibe-coding-task-management.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>Vibe Coding 任�?管�?</a> </li> </ul> </div> </div> </div> </div> </div> </section> </main> <footer class="bg-dark mt-5 py-4 border-top border-secondary-subtle"> <div class="container text-center"> <p class="text-white-50 mb-0">© 2025 Luke Hou. All rights reserved. ?? Merry Christmas!</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>  <div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" style="max-width: 95vw;"> <div class="modal-content bg-dark border-warning border-2"> <div class="modal-header border-0 pb-0"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body text-center p-2"> <img id="lightboxImage" src="" alt="" class="rounded" style="max-width: 100%; max-height: 85vh;"> </div> </div> </div> </div> <script> // Lightbox: 點�??��?顯示大�? document.querySelectorAll('.article-content img').forEach(img => { img.style.cursor = 'pointer'; img.addEventListener('click', () => { document.getElementById('lightboxImage').src = img.src; document.getElementById('lightboxImage').alt = img.alt; new bootstrap.Modal(document.getElementById('lightboxModal')).show(); }); }); </script>  <nav class="floating-nav"> <div class="floating-nav-title">?? ?��?導覽 <span id="progressPercent" style="float:right; font-weight:600;">0%</span></div> <ul> <li><a href="#section-1">1. Inline 管�?</a></li> <li><a href="#section-2">2. AI ?��?工單</a></li> <li><a href="#section-3">3. 多�??�併??/a></li> <li><a href="#section-4">4. AI ?�單?��?</a></li> <li><a href="#section-5">5. ?��??�測�?/a></li> </ul> <div class="back-to-top"> <a href="#top">⬆�? ?�到?�端</a> </div> </nav> <script> // 平�?滾�? document.querySelectorAll('.floating-nav a').forEach(link => { link.addEventListener('click', function (e) { const href = this.getAttribute('href'); if (href.startsWith('#')) { e.preventDefault(); const target = href === '#top' ? document.body : document.querySelector(href); if (target) { window.scrollTo({ top: href === '#top' ? 0 : target.offsetTop - 80, behavior: 'smooth' }); } } }); }); // 滾�??��?亮當?��?�? const sections = document.querySelectorAll('.feature-section[id]'); const navLinks = document.querySelectorAll('.floating-nav a[href^="#section"]'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop - 150; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); </script>  <button class="back-to-top-btn" id="backToTopBtn" title="?�到?�端"> <i class="bi bi-arrow-up"></i> </button>  <nav class="mobile-nav" id="mobileNav"> <a href="#section-1">1. Inline 管�?</a> <a href="#section-2">2. AI ?��?工單</a> <a href="#section-3">3. 購物車暫�?/a> <a href="#section-4">4. AI ?�單</a> <a href="#section-5">5. ?��??�測�?/a> </nav> <script> // ?? ?��??�度�? window.addEventListener('scroll', () => { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = (scrollTop / docHeight) * 100; document.getElementById('readingProgress').style.width = progress + '%'; // ?�新浮�?導航?��?�? const percentEl = document.getElementById('progressPercent'); if (percentEl) percentEl.textContent = Math.round(progress) + '%'; }); // ?? 返�??�部?��? const backToTopBtn = document.getElementById('backToTopBtn'); window.addEventListener('scroll', () => { if (window.scrollY > 300) { backToTopBtn.classList.add('visible'); } else { backToTopBtn.classList.remove('visible'); } }); backToTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // ?�� ?��?導航 const mobileNavLinks = document.querySelectorAll('.mobile-nav a'); window.addEventListener('scroll', () => { let current = ''; document.querySelectorAll('.feature-section[id]').forEach(section => { const sectionTop = section.offsetTop - 150; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); mobileNavLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); mobileNavLinks.forEach(link => { link.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' }); } }); }); </script> </body> </html>