EngFlow - 鐢ㄨ嫳璇墦寮€鏂颁笘鐣?/title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="animal.css?v=2026.08.17.006"> </head> <body>  <svg style="position:absolute;width:0;height:0" aria-hidden="true"> <defs> <clipPath id="animal-modal-clip" clipPathUnits="objectBoundingBox"> <path d="M0.501,0.005 L0.501,0.005 L0.523,0.005 L0.549,0.006 C0.704,0.01,0.796,0.017,0.825,0.027 L0.827,0.028 C0.872,0.045,0.939,0.044,0.978,0.17 C1,0.254,1,0.365,0.99,0.505 L0.988,0.513 C0.979,0.558,0.971,0.598,0.965,0.633 C0.956,0.689,0.979,0.77,0.964,0.865 C0.953,0.928,0.921,0.966,0.869,0.979 C0.821,0.986,0.773,0.992,0.726,0.995 L0.712,0.996 L0.694,0.997 C0.648,1,0.586,1,0.507,1 L0.501,1 L0.464,1 C0.385,1,0.325,0.998,0.283,0.995 C0.234,0.992,0.184,0.987,0.133,0.979 C0.081,0.966,0.05,0.928,0.039,0.865 C0.023,0.77,0.047,0.689,0.037,0.633 C0.031,0.595,0.023,0.552,0.013,0.505 C-0.006,0.365,-0.002,0.254,0.024,0.17 C0.064,0.045,0.13,0.045,0.174,0.028 L0.175,0.028 C0.204,0.017,0.303,0.009,0.474,0.005 L0.501,0.005" /> </clipPath> </defs> </svg>  <div class="bg-mesh"> <div class="orb"></div> <div class="orb"></div> <div class="orb"></div> <div class="orb"></div> </div> <div class="star-field"> <span class="star" style="top:8%;left:6%;font-size:18px">猸?/span> <span class="star" style="top:14%;right:8%;font-size:14px;animation-delay:-1s">馃専</span> <span class="star" style="top:38%;left:3%;font-size:12px;animation-delay:-2s">鉁?/span> <span class="star" style="top:62%;right:4%;font-size:20px;animation-delay:-0.5s">猸?/span> <span class="star" style="bottom:18%;left:9%;font-size:15px;animation-delay:-1.5s">馃専</span> <span class="star" style="bottom:6%;right:14%;font-size:13px;animation-delay:-2.5s">鉁?/span> <span class="star" style="top:5%;left:48%;font-size:11px;animation-delay:-0.8s">鉁?/span> </div> <div class="noise-overlay"></div> <div class="content-wrapper">  <nav class="navbar"> <div class="container"> <a class="nav-brand" href="index.html"> <div class="nav-brand-icon">E</div> <span class="nav-brand-text">EngFlow</span> </a> <div class="nav-right"> <div class="nav-stats"> <div class="nav-stat"> <span class="nav-stat-icon">鈿?/span> <span class="val" id="navXP">0</span> <span>XP</span> </div> <div class="nav-stat"> <span class="nav-stat-icon">馃敟</span> <span class="val" id="navStreak">0</span> </div> <div class="nav-stat"> <span class="nav-stat-icon">馃摎</span> <span class="val" id="navLessons">0</span> </div> </div> </div> </div> </nav>  <div class="container"> <div class="streak-banner" id="streakBanner"> <div class="streak-left"> <div class="streak-fire">馃敟</div> <div class="streak-info"> <h3 id="streakTitle">杩炵画鎵撳崱 0 澶?/h3> <p id="streakSubtext">寮€濮嬩綘鐨勫涔犱箣鏃?/p> </div> </div> <div class="streak-dots" id="streakDots"> <div class="streak-dot" data-day="0">涓€</div> <div class="streak-dot" data-day="1">浜?/div> <div class="streak-dot" data-day="2">涓?/div> <div class="streak-dot" data-day="3">鍥?/div> <div class="streak-dot" data-day="4">浜?/div> <div class="streak-dot" data-day="5">鍏?/div> <div class="streak-dot" data-day="6">鏃?/div> </div> </div> </div>  <div class="container"> <a class="vocab-due" id="vocabDue" href="vocab.html" style="display:none;"> <span class="vocab-due-icon">馃摉</span> <span class="vocab-due-text" id="vocabDueText"></span> <span class="vocab-due-arrow">鍘诲涔?鈫?/span> </a> </div>  <div class="container reveal"> <div class="path-actions"> <a class="path-action" href="plan.html"> <span class="path-action-icon">馃搮</span> <div class="path-action-label">12鍛ㄨ鍒?/div> <div class="path-action-desc">姣忔棩瀛︿範路鎵撳崱锛岀郴缁熷寲杩涢樁</div> <div class="path-action-arrow">寮€濮嬭鍒?鈫?/div> </a> <a class="path-action" onclick="scrollToCourses()"> <span class="path-action-icon">馃摎</span> <div class="path-action-label">鏁欐潗瀛︿範</div> <div class="path-action-desc">绮鹃€変紭璐ㄦ暀鏉愶紝娌夋蹈寮忓涔?/div> <div class="path-action-arrow">娴忚鏁欐潗鈫?/div> </a> <a class="path-action" href="lianliankan.html"> <span class="path-action-icon">馃敆</span> <div class="path-action-label">鑻辫杩炶繛鐪?/div> <div class="path-action-desc">涓嫳閰嶅娑堥櫎锛岃交鏉捐鍗曡瘝</div> <div class="path-action-arrow">寮€濮嬫父鎴?鈫?/div> </a> <a class="path-action" href="dialogue.html"> <span class="path-action-icon">馃棧</span> <div class="path-action-label">AI 鎯呮櫙瀵硅瘽</div> <div class="path-action-desc">鍦烘櫙瑙掕壊鎵紨锛屽紑鍙ｇ粌鍙ｈ</div> <div class="path-action-arrow">寮€濮嬪璇?鈫?/div> </a> </div> </div>  <div class="container reveal"> <div class="quick-actions"> <div class="quick-action" id="qaContinue" onclick="scrollToContinue()"> <span class="quick-action-icon">鈻?/span> <div class="quick-action-label">缁х画瀛︿範</div> <div class="quick-action-desc">鍥炲埌涓婃杩涘害</div> </div> <a class="quick-action" href="vocab.html"> <span class="quick-action-icon">馃摉</span> <div class="quick-action-label">鐢熻瘝鏈?/div> <div class="quick-action-desc">鏀惰棌澶嶄範路闂撮殧璁板繂</div> </a> <div class="quick-action" onclick="showTips()"> <span class="quick-action-icon">馃挕</span> <div class="quick-action-label">瀛︿範鏂规硶</div> <div class="quick-action-desc">绉戝楂樻晥绛栫暐</div> </div> </div> </div>  <div class="container"> <div class="continue-card reveal" id="continueCard"> <div class="continue-top"> <div> <div class="continue-label">缁х画瀛︿範</div> <div class="continue-course-name" id="continueName">-</div> <div class="continue-lesson" id="continueLesson">-</div> </div> <button class="continue-btn" id="continueBtn">缁х画鈫?/button> </div> <div class="continue-progress"> <div class="continue-progress-bar"> <div class="continue-progress-fill" id="continueProgressFill" style="width: 0%"></div> </div> <div class="continue-progress-text" id="continueProgressText">-</div> </div> </div> </div>  <div class="container reveal"> <div class="section-header"> <h2 class="ac-ribbon ac-ribbon-sm section-title">绮鹃€夋暀鏉?/h2> </div> <div class="course-grid" id="courseGrid"> <div class="loading-state"> <div class="loading-spinner"></div> <div class="loading-text">鍔犺浇鏁欐潗涓?..</div> </div> </div> </div>  <div class="container reveal"> <div class="section-header"> <h2 class="ac-ribbon ac-ribbon-sm ac-ribbon-orange section-title">瀛︿範鏂规硶</h2> <a class="section-link" onclick="showTips()">鏌ョ湅鍏ㄩ儴</a> </div> <div class="tips-grid"> <div class="tip-card" onclick="showTips()"> <div class="tip-number">1</div> <div class="tip-name">褰卞瓙璺熻娉?/div> <div class="tip-desc">鍚竴鍙ヨ窡涓€鍙ワ紝妯′豢姣嶈鑰呯殑璇皟銆佽妭濂忓拰鍙戦煶锛屽悓姝ユ彁鍗囧惉鍔涘拰鍙ｈ銆?/div> </div> <div class="tip-card" onclick="showTips()"> <div class="tip-number">2</div> <div class="tip-name">闂撮殧閲嶅娉?/div> <div class="tip-desc">鍒╃敤閬楀繕鏇茬嚎瑙勫緥锛屽湪鍗冲皢蹇樿鏃跺涔狅紝绉戝楂樻晥鍦板珐鍥鸿瘝姹囧拰璇硶銆?/div> </div> <div class="tip-card" onclick="showTips()"> <div class="tip-number">3</div> <div class="tip-name">鍚姏娴告场娉?/div> <div class="tip-desc">姣忓ぉ30鍒嗛挓绾嫳鏂囧惉鍔涜緭鍏ワ紝钀ラ€犳矇娴稿紡鐜锛屽煿鍏昏嫳璇€濈淮銆?/div> </div> <div class="tip-card" onclick="showTips()"> <div class="tip-number">4</div> <div class="tip-name">鍦烘櫙璁板繂娉?/div> <div class="tip-desc">灏嗗崟璇嶆斁鍏ュ叿浣撳満鏅腑璁板繂锛屽缓绔嬫儏澧冨叧鑱旓紝鎻愰珮璁板繂鏁堢巼鍜屽簲鐢ㄨ兘鍔涖€?/div> </div> <div class="tip-card" onclick="showTips()"> <div class="tip-number">5</div> <div class="tip-name">璇硶鎷嗚В娉?/div> <div class="tip-desc">鎷嗚В闀块毦鍙ョ殑璇硶缁撴瀯锛岀悊瑙ｅ彞瀛愰鏋讹紝閫愭鎺屾彙澶嶆潅鍙ュ瀷鐨勯槄璇诲拰鍐欎綔銆?/div> </div> </div> </div>  <footer class="footer container"> <div class="footer-text"> <span class="footer-brand">EngFlow</span> © 2026 · 鐢ㄨ嫳璇墦寮€鏂颁笘鐣?<span class="footer-version">(v2026.08.17.007)</span> </div> <div class="footer-actions"> <a href="#" class="footer-link" onclick="showDataManager();return false;">馃摝鏁版嵁瀵煎嚭 / 瀵煎叆</a> </div> <div class="footer-sea"></div> </footer> </div>  <div class="modal-overlay" id="statsModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">瀛︿範缁熻</h3> <button class="modal-close" onclick="closeStats()">鉁?/button> </div> <div class="modal-body"> <div class="stats-grid"> <div class="stat-card"> <div class="stat-card-icon">鈿?/div> <div class="stat-card-value" id="statTotalXP">0</div> <div class="stat-card-label">鎬荤粡楠屽€?/div> </div> <div class="stat-card"> <div class="stat-card-icon">馃摎</div> <div class="stat-card-value" id="statTotalLessons">0</div> <div class="stat-card-label">宸插畬鎴愯绋?/div> </div> <div class="stat-card"> <div class="stat-card-icon">馃敟</div> <div class="stat-card-value" id="statMaxStreak">0</div> <div class="stat-card-label">鏈€楂樿繛缁墦鍗?/div> </div> <div class="stat-card"> <div class="stat-card-icon">鈴?/div> <div class="stat-card-value" id="statTotalTime">0h</div> <div class="stat-card-label">鎬诲涔犳椂闀?/div> </div> </div> </div> </div> </div>  <div class="modal-overlay" id="tipsModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">瀛︿範鏂规硶璇﹁В</h3> <button class="modal-close" onclick="closeTips()">鉁?/button> </div> <div class="modal-body"> <div class="tip-detail"> <div class="tip-detail-name">1. 褰卞瓙璺熻娉?(Shadowing)</div> <div class="tip-detail-desc">閫夋嫨涓€娈甸煶棰戯紝鍚埌涓€鍙ョ珛鍒昏窡鐫€澶嶈堪锛屾ā浠胯璋冦€侀噸闊炽€佽妭濂忓拰杩炶銆傚垵鏈熷彲浠ョ湅鏂囨湰锛屼箣鍚庤劚绋胯窡璇汇€傛瘡澶╃粌涔?5-20鍒嗛挓锛岃兘鏄捐憲鎻愬崌鍙ｈ娴佸埄搴﹀拰鍚姏鏁忔劅搴︺€?/div> </div> <div class="tip-detail"> <div class="tip-detail-name">2. 闂撮殧閲嶅娉?(Spaced Repetition)</div> <div class="tip-detail-desc">鍦ㄧ1澶╁涔犲悗锛屽垎鍒湪绗?澶┿€佺4澶┿€佺7澶┿€佺15澶╁涔犮€傚埄鐢ˋnki绛夊伐鍏疯嚜鍔ㄥ畨鎺掑涔犳椂闂达紝鍦ㄥ嵆灏嗛仐蹇樻椂澶嶄範锛屾晥鐜囨渶楂樸€傞€傚悎璇嶆眹鍜岃娉曠偣鐨勯暱鏈熻蹇嗐€?/div> </div> <div class="tip-detail"> <div class="tip-detail-name">3. 鍚姏娴告场娉?(Immersion)</div> <div class="tip-detail-desc">姣忓ぉ瀹夋帓30-60鍒嗛挓绾嫳鏂囧惉鍔涙椂闂达紝浠嶸OA鎱㈤€熷紑濮嬶紝閫愭杩囨浮鍒板父閫熻嫳璇€備笉杩芥眰鍚噦姣忎釜璇嶏紝閲嶇偣鏄煿鍏昏鎰熷拰鑻辫鎬濈淮銆傚悆楗€侀€氬嫟鏃堕兘鍙互鍚€?/div> </div> <div class="tip-detail"> <div class="tip-detail-name">4. 鍦烘櫙璁板繂娉?(Contextual Learning)</div> <div class="tip-detail-desc">涓嶈瀛ょ珛鑳屽崟璇嶏紝鎶婃柊璇嶆斁鍏ヤ緥鍙ュ拰鍦烘櫙涓€傛瘮濡傚"order"鏃讹紝鎯宠薄鍦ㄩ鍘呯偣椁愮殑鍦烘櫙銆傚缓绔嬬敾闈㈡劅鍜屾儏鎰熷叧鑱旓紝璁板繂鏇寸墷鍥猴紝涔熸洿瀹规槗鍦ㄥ疄闄呬腑浣跨敤銆?/div> </div> <div class="tip-detail"> <div class="tip-detail-name">5. 璇硶鎷嗚В娉?(Sentence Parsing)</div> <div class="tip-detail-desc">閬囧埌闀块毦鍙ユ椂锛屽厛鎵句富璇拰璋撹锛屽啀鎵句慨楗版垚鍒嗭紙瀹氳銆佺姸璇€佷粠鍙ワ級銆傜敤涓嶅悓棰滆壊鏍囨敞鍚勬垚鍒嗭紝閫愭鎷嗚В銆傚潥鎸佺粌涔狅紝闃呰閫熷害鍜岀悊瑙ｈ兘鍔涗細澶у箙鎻愬崌銆?/div> </div> </div> </div> </div>  <div class="modal-overlay" id="dataModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">馃摝鏁版嵁瀵煎嚭 / 瀵煎叆</h3> <button class="modal-close" onclick="closeDataManager()">鉁?/button> </div> <div class="modal-body"> <p class="data-desc">鎶婂涔犺繘搴︽惉鍒版柊鐢佃剳锛熶竴閿鍑哄叏閮ㄦ暟鎹紙鐢熻瘝鏈€佽绋嬫墦鍗°€?2鍛ㄨ鍒掋€佽繛杩炵湅缁熻銆佷富棰樹笌璇煶璁剧疆锛夛紝鍦ㄦ柊璁惧涓婂鍏ュ嵆鍙户缁涔犮€傛暟鎹粎淇濆瓨鍦ㄦ祻瑙堝櫒鏈湴锛屽彲鏀惧績瀵煎嚭涓烘枃浠朵繚瀛樸€?/p> <div class="data-btns"> <button type="button" class="data-btn" onclick="engflowExportDownload()"> <span class="data-btn-icon">猬囷笍</span> <span> <div class="data-btn-title">瀵煎嚭鏁版嵁</div> <div class="data-btn-sub">涓嬭浇涓?JSON 鏂囦欢锛屼繚瀛樺埌鏈湴鎴栫綉鐩?/div> </span> </button> <button type="button" class="data-btn" onclick="document.getElementById('dataFileInput').click()"> <span class="data-btn-icon">猬嗭笍</span> <span> <div class="data-btn-title">瀵煎叆鏁版嵁</div> <div class="data-btn-sub">閫夋嫨涔嬪墠瀵煎嚭鐨勫浠芥枃浠舵仮澶嶈繘搴?/div> </span> </button> </div> <input type="file" id="dataFileInput" class="data-file-input" accept=".json,application/json" onchange="engflowOnFileSelected(event)"> <div class="data-import-hint" id="dataImportHint">鏀寔鍚堝苟瀵煎叆锛氫笉浼氳鐩栨湰鏈哄凡鏈夌殑鐢熻瘝涓庤繘搴?/div> <div id="dataPreviewWrap" style="display:none;"></div> </div> </div> </div> <script> // 鐗堟湰妫€娴?+ Service Worker 娉ㄥ唽锛氱増鏈洿鏂板悗鎻愮ず鐢ㄦ埛鍒锋柊 (function () { var VERSION = 'v2026.08.17.007'; var KEY = 'engflow-version'; var prompted = false; function showUpdateBanner(from, to) { if (prompted) return; prompted = true; var d = document.createElement('div'); d.id = 'engflow-update-banner'; d.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--glass-solid);border:1px solid var(--accent-blue);color:var(--text-primary);padding:12px 20px;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,0.35);display:flex;align-items:center;gap:12px;backdrop-filter:blur(12px);'; d.innerHTML = '鍙戠幇鏂扮増鏈?' + from + ' 鈫?' + to + '锛岃鍒锋柊浣撻獙鏈€鏂板唴瀹?<button onclick="location.reload()" style="background:var(--accent-blue);color:#fff;border:none;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit">绔嬪嵆鍒锋柊</button>'; document.body.appendChild(d); } try { var prev = localStorage.getItem(KEY); if (prev && prev !== VERSION) { showUpdateBanner(prev, VERSION); } localStorage.setItem(KEY, VERSION); } catch (e) { } // 娉ㄥ唽 Service Worker if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('./sw.js').then(function (reg) { // 鏈夋柊鐨?SW 绛夊緟婵€娲?鈫?璇存槑鏈夋柊鐗堟湰 reg.addEventListener('updatefound', function () { var newW = reg.installing; if (newW) { newW.addEventListener('statechange', function () { if (newW.state === 'installed' && navigator.serviceWorker.controller) { showUpdateBanner(prev || '鏃х増鏈?, VERSION); } }); } }); }).catch(function () { /* 涓嶉樆濉?*/ }); }); } })(); </script> <script src="vocab.js?v=2026.08.17.006"></script> <script src="data.js?v=2026.08.17"></script> <script src="index.js?v=2026.08.17.006"></script> </body> </html>