// ─── Wave 23-C — GaokaoFaqBlock (FAQ 升级 + 搜索) ───────────────────────────── // Extends Wave 3 FAQ MVP with: // 1. 25+ Q&A pairs covering common HI gaokao concerns // 2. Client-side search box — substring match across q+a, both zh/en // 3. keyword highlighting in results // 4. "No match" fallback prompting a 1-on-1 consult // // Pure client-side, NO LLM, NO external API. // // Also exports window.PBFaqMatcher = { matchFaq } for unit testing. // ─── Matcher helper ────────────────────────────────────────────────────────── ;(function () { /** * matchFaq(query, allFaqs) → filtered array of FAQ items that match query. * Matching rules: * - Empty / whitespace-only query → return all items unchanged. * - Otherwise: lowercase, substring match in q OR a text. * - Each returned item gets a `_query` field (the normalised query string) * so the renderer can highlight without re-computing. * * @param {string} query * @param {Array<{q:string, a:string}>} allFaqs * @returns {Array<{q:string, a:string, _query?:string}>} */ function matchFaq(query, allFaqs) { if (!query || !query.trim()) return allFaqs; const q = query.trim().toLowerCase(); return allFaqs.filter(function (item) { return ( (item.q && item.q.toLowerCase().includes(q)) || (item.a && item.a.toLowerCase().includes(q)) ); }).map(function (item) { return Object.assign({}, item, { _query: q }); }); } window.PBFaqMatcher = { matchFaq: matchFaq }; })(); // ─── Highlight helper (React) ───────────────────────────────────────────────── function highlightText(text, query) { if (!query || !text) return text; const lc = text.toLowerCase(); const lcq = query.toLowerCase(); const idx = lc.indexOf(lcq); if (idx === -1) return text; return React.createElement( React.Fragment, null, text.slice(0, idx), React.createElement('mark', { style: { background: 'rgba(255, 200, 40, 0.45)', borderRadius: 2, padding: '0 1px' }, }, text.slice(idx, idx + query.length)), highlightText(text.slice(idx + query.length), query), ); } // ─── Component ──────────────────────────────────────────────────────────────── const GaokaoFaqBlock = ({ lang }) => { const [open, setOpen] = React.useState(false); const [openIdx, setOpenIdx] = React.useState(0); const [searchQuery, setSearchQuery] = React.useState(''); const fallbackZh = (window.I18N && window.I18N.zh && window.I18N.zh.gk && window.I18N.zh.gk.faq) || null; const dict = (window.I18N && window.I18N[lang] && window.I18N[lang].gk && window.I18N[lang].gk.faq) || fallbackZh || { chip: 'FAQ', title: 'FAQ', subtitle: '', close: 'Close', items: [], search: { placeholder: '搜索问题或关键词', empty: '未找到匹配的问答，建议预约 30 分钟一对一顾问咨询' }, }; const allItems = Array.isArray(dict.items) ? dict.items : []; const searchDict = dict.search || {}; const searchPlaceholder = searchDict.placeholder || (lang === 'en' ? 'Search questions or keywords' : '搜索问题或关键词'); const searchEmpty = searchDict.empty || (lang === 'en' ? 'No matching Q&A found. Consider booking a free 30-min 1-on-1 consultant session.' : '未找到匹配的问答，建议预约 30 分钟一对一顾问咨询'); const filteredItems = window.PBFaqMatcher ? window.PBFaqMatcher.matchFaq(searchQuery, allItems) : allItems; // Reset expanded item when search changes React.useEffect(() => { setOpenIdx(0); }, [searchQuery]); // Lock body scroll while modal is open React.useEffect(() => { if (typeof document === 'undefined' || !document.body) return; if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [open]); // Close on ESC React.useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; const onHash = () => setOpen(false); // #323(1) — close on route change window.addEventListener('keydown', onKey); window.addEventListener('hashchange', onHash); return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('hashchange', onHash); }; }, [open]); // Reset search when modal closes const handleClose = () => { setOpen(false); setSearchQuery(''); setOpenIdx(0); }; return ( {/* ── FAQ chip — always rendered ── */} {/* ── Modal — portalled to body to escape sticky stacking context (#258) ── */} {open && ReactDOM.createPortal( , document.body)} ); }; window.GaokaoFaqBlock = GaokaoFaqBlock;