?��?機�?對話資產 - Line Bot MVP 系�? - Luke?��???/title> <meta name="description" content="深入�?? Line Bot MVP ?��??��??�能：�?何透�???Supabase ?�整?��?實現對話資產?�永久�?份、零信任資�??�極?��??��?體�???> <link rel="canonical" href="https://lukehou.com/projects/line-bot-search.html"> <meta property="og:type" content="website"> <meta property="og:url" content="https://lukehou.com/projects/line-bot-search.html"> <meta property="og:title" content="?��?機�?對話資產 - Line Bot MVP 系�? - Luke?��???> <meta property="og:description" content="深入�?? Line Bot MVP ?��??��??�能：�?何透�???Supabase ?�整?��?實現對話資產?�永久�?份、零信任資�??�極?��??��?體�???> <meta property="og:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-search-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 ?��??��??�能：�?何透�???Supabase ?�整?��?實現對話資產?�永久�?份、零信任資�??�極?��??��?體�???> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-search-cover.jpg">  <meta property="og:url" content="https://lukehou.com/projects/line-bot-search.html"> <meta property="og:description" content="深入�?? Line Bot MVP ?��??��??�能：�?何透�???Supabase ?�整?��?實現對話資產?�永久�?份、零信任資�??�極?��??��?體�???> <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-search-cover.jpg">  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "TechArticle", "headline": "?��?機�?對話資產 - Line Bot MVP 系�?", "description": "深入�?? Line Bot MVP ?��??��??�能：�?何透�???Supabase ?�整?��?實現對話資產?�永久�?份、零信任資�??�極?��??��?體�???, "image": "https://lukehou.com/images/line-ai-bot-mvp/og-search-cover.jpg", "author": { "@type": "Person", "name": "Luke Hou", "url": "https://lukehou.com" }, "publisher": { "@type": "Person", "name": "Luke Hou" }, "datePublished": "2025-12-25", "keywords": ["Supabase", "Line Bot", "Data Backup", "Zero Trust", "Search UX"], "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-green), #90EE90); 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-green), #90EE90); 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(22, 91, 51, 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(22, 91, 51, 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(22, 91, 51, 0.4); color: #90EE90; } @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(22, 91, 51, 0.9), rgba(15, 15, 15, 0.8)); 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-red); padding-left: 1rem; } .tech-note { background: rgba(22, 91, 51, 0.2); border-left: 4px solid var(--xmas-green); 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(22, 91, 51, 0.4); border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 2.5rem; } .feature-section:hover { border-color: rgba(22, 91, 51, 0.6); box-shadow: 0 0 20px rgba(22, 91, 51, 0.15); } .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(22, 91, 51, 0.4); border-radius: 12px; padding: 1rem; max-width: 200px; transition: all 0.3s ease; } .floating-nav:hover { border-color: rgba(22, 91, 51, 0.7); box-shadow: 0 0 20px rgba(22, 91, 51, 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(22, 91, 51, 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: #90EE90; background: rgba(144, 238, 144, 0.15); } .floating-nav a.active { color: #90EE90; background: rgba(144, 238, 144, 0.2); font-weight: 600; } .floating-nav .back-to-top { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(22, 91, 51, 0.4); } .floating-nav .back-to-top a { color: var(--xmas-red); } .floating-nav .back-to-top a:hover { color: #ff6b6b; background: rgba(212, 36, 38, 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.1</span> <h1 class="display-5 fw-bold mb-3">Line Bot ?��?機�?對話資產管�?</h1> <p class="lead text-white-50">如�??��??��??��?資�??��?，�??��???LINE 變�??��??��?業�??��?/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"> ???�欸，�??��?客戶?��???��?��??��??�哪？�?br> ?��?案已?��?...?? </p> <p class="text-white-50"> 不管?�在軟�??�發?�是?�統?�業，�??�貴?��?往不是?�件，而是?????��?�通�?軟�?裡�??��??��?溝通」�? ?��?篇�??�想?�享?�是如�???Vibe Coding 人�??��??��?，�??��??��??��??��??��?溯�??��??��??��??��? </p> </div>  <div class="feature-section" id="section-1"> <h2>1. 決�??��??��??�表板 (Dashboard)</h2> <p class="text-white-50"> 一?�到系統，�??�到?��??��?亂�?訊息?�表，而是一?��?你「�??��??�全局?��??��??�表板?? ?�裡?��?了�??��??�要快?�決策�??�鍵?��??? </p> <h3>?? ?�鍵績�??��? (KPIs at a Glance)</h3> <p class="text-white-50"> ?�表板上�?展示了其他�??�數?��?今日訊息?�、活躍群組數?��??��?工單?�以??Line 訊息??Jira ?��??��??? 將抽象�??��?覺�?忙」�??�為?��?，�??��?跟老�??��?資�??�匯?�進度?��?強�?�?�? </p> <div class="row align-items-center my-4"> <div class="col-md-12">  <img src="../images/line-ai-bot-mvp/kpi-dashboard-overview.jpg" alt="?�表板?��?：�?示客?�群組�?緒溫度�??��??�績?��?�?(KPIs)" class="img-fluid rounded shadow border border-warning mb-2 w-100"> <p class="text-center text-muted small">?�表板一覽�??��?溫度計�?你即?��??��??�客?�群組�??�康?�?��?/p> </div> </div> </div>  <div class="feature-section" id="section-2"> <h2>2. 永�?保�??�雲端�??��? (Auto-Backup)</h2> <p class="text-white-50"> Line ?�「�?案�??�」�??�是?�??PM ?�惡夢。在?�個系統中，�?設�?了�?套自?��??��??��??��? ?��? Cloud Run + Webhook，系統�??��???��每�??��??��?並�??�到資�?庫中，實?�永久�??��??? </p> <div class="row align-items-center my-4"> <div class="col-md-12">  <img src="../images/line-ai-bot-mvp/supabase-storage-backup.jpg" alt="Supabase Storage Dashboard 展示?�?�自?��?份�??��??�影?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <p class="text-center text-muted small">?�?�透�? Line ?�送�??��?，都?�自?��?步到安全?��?桶�?/p> </div> </div> <div class="tech-note"> <strong>??�??�術細節�?/strong> 得�???<strong>Supabase (PostgreSQL)</strong> ?�強大整?��??��??�是?�份檔�?，�?將發?��??�、群組�?源�? Metadata 一併索引�? ?��??��?，即�?Line ?��?失�?，�??��??�能?�到後台?��?並�?載�? </div> </div>  <div class="feature-section" id="section-3"> <h2>3. 比共享�??�夾?��??��??�零信任?�架�?/h2> <p class="text-white-50"> 企業資�?上雲，�??��?就是外洩?�在?�裡?�用了更?�格??<strong>?��?簽�? (Dynamic Signed URL)</strong> 機制?? </p> <h3>什麼是 Signed URL�?/h3> <p class="text-white-50"> ?��?一下�??�統?��??��??就�?一?�「�??�鑰?�」�?誰撿?�都?��??�?? ??Signed URL ?��??��?張「�??�通�?證」。當?�鑰?��?管�??��??��?覽�?，�?端�??�即?��??��??�只??60 秒�??��??��???? ?��?一?��?????��?作廢?�就算�??被�??�出?��?外面?�人也�?麼都?��??��? </p> <div class="row align-items-center my-4"> <div class="col-md-12"> <img src="../images/line-ai-bot-mvp/zero-trust-architecture.jpg" alt="Zero-Trust 安全?��??��?展示 X-Line-Signature 驗�???Signed URL 流�?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <p class="text-center text-muted small">從接?��??��?簽�?驗�?，到存�??��??��??��?權�??��??��??�護??/p> </div> </div> </div>  <div class="feature-section" id="section-4"> <h2>4. ?��??�實?�人 (Human-Centric Data)</h2> <p class="text-white-50"> 很�?後台系統?�顯示�?硬�? User ID (`U1s2f...`)，這�??��?變�?很�?溫度?? ?�相信�?每�???ID ?��??�是一位努?�工作�?夥伴?? </p> <h3>行內編輯 (Inline Edit)</h3> <p class="text-white-50"> ?��??��?表中，�?實�?了「�??�即編輯?��??�能?��??�客?�使?��?奇怪�??�稱，管?�員?�以?�接點�??��?修改?�「�?經�??��? 此�?，�??��??��?一?�貼心�?小�??��?<strong>?�統計�??��?/strong>?? </p> <p class="text-white-50"> ?��?群�?裡�??�「匯?��??�人?��??�系統公?�帳?�」�??��?不該算進「�??�工作�??��? ?��??�選?�除，統計�?表就?�瞬?��?得乾淨�?確�? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center">  <img src="../images/line-ai-bot-mvp/inline-user-edit-exclude.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> <h3>?? Jira ?�?�即?��?? (Live Jira Status)</h3> <p class="text-white-50"> ?��??��??�被轉�? Jira 工單後�?訊息?�表上�??�接顯示該工?��? <strong>?��??�??/strong>?? 你可以�??�票??(例�? XS-1544)?�目?��???(In Review / Done / To Do) 以�?負責人縮寫�? </p> <p class="text-white-50"> 點�?票�??�可跳�???Jira ?�面，�??�要�???Jira ?��??�這張?�到底�??�哪裡」�? ?��??�們可以在?��??��??�追蹤�?話進度?�工?�進度，大幅�?少�??��?窗�?次數?? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/jira-status-link.jpg" alt="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> <h3>?�� ?�鍵字�?�?(Keyword Highlighting)</h3> <p class="text-white-50"> ?�茫?��??�海中�?如�?快速�?住�?點�??��? <strong>?�鍵字�?�?/strong> ?�能�? ?��?訊息?�以 <strong>紅色粗�?</strong> 標�?，�?你�??�就?��??�哪些�??��?要注?��? </p> <ul class="text-white-50"> <li><strong>?�� 紅色警�?�?/strong>媒�??�「�??��??�表?�中?��??��?，�?以�??��?體�?�?/li> </ul> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/keyword-highlight.png" 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> <h3>?? 一?�催?��???(Quick Follow-up)</h3> <p class="text-white-50"> ?��??��??��?要�??��?些任?��?但�?要自己�?一?��?超麻?��??��??�「�??�催?�」就派�??�場了�? ?��? <strong>?��?訊息</strong>，�??�以?�接點�??�催?�」�??��?系統?�自?��?製�?字�?並�??��??��??��?訊息?? </p> <p class="text-white-50"> 已催?��?訊息?�顯�?<strong>?�已??(Xh Xm)??/strong>，�?你�??�就?��?距離上次?�單?��?多�??? ?�是輕�?級�?追蹤機制，適?�那些「�?得�??��?一下」�?事�??? </p> <p class="text-muted small"> ?�� <em>如�??�要�?對�??��??��??�催?�並?��?禮�??�單?��?，�??�考�?一篇「�?作�?梁�??��? AI ?�單?��??�能??/em> </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/quick-follow-up-button.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/quick-follow-up-copy.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>  <div class="feature-section" id="section-5"> <h2>5. 極致流暢?��?尋�?�?/h2> <p class="text-white-50"> ?��?幫�??��?下�?一秒�??�在?��??�能上�?足�??�夫?? ?�入�?<strong>?��? (Debounce)</strong> 設�?，當你�??��?字�??��?，系統就已�??��??��??�幫你�?濾出結�??? 不�?要�? Enter，�??�要�?待�?轉�??��?一?�都?�那麼自?��??��? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center">  <img src="../images/line-ai-bot-mvp/search-interface-highlight.jpg" alt="?��?介面?��?：�?示�??��?高亮 (Highlighting) ?��?維度篩選?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?��?介面?��?：�?示�??��?高亮 (Highlighting) ?��?維度篩選??/small> </div> </div> </div> <hr class="my-5 border-secondary"> <div class="d-flex justify-content-between align-items-center"> <a href="line-bot-mvp.html" class="btn btn-outline-secondary"> <i class="bi bi-arrow-left me-2"></i>?�系?��??? </a> <a href="line-bot-workflow.html" class="btn btn-warning"> Ep.2 ?��?橋�?�?<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-workflow.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-success"></i>Ep.2 ?��?橋�?：自?��?工單</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="n8n-line-bot-jira-automation.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>n8n Line Bot ??Jira ?��???/a></li> <li><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> </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. ?��??�表板</a></li> <li><a href="#section-2">2. ?�端?��?�?/a></li> <li><a href="#section-3">3. ?�信任架�?/a></li> <li><a href="#section-4">4. 人性�??��?</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. ?��??�表板</a> <a href="#section-2">2. ?�端?��?�?/a> <a href="#section-3">3. ?�信任架�?/a> <a href="#section-4">4. 人性�??��?</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>