567 lines
26 KiB
JavaScript
567 lines
26 KiB
JavaScript
// 學習教材 HTML 渲染：白話化、互動路徑、案例→通用原則
|
||
(function (global) {
|
||
const KIND_LABEL = {
|
||
overview: '課綱總覽', principleMap: '原則地圖', quiz: '練習題庫',
|
||
category: '學習分類', case: '案例講解', principle: '投資原則',
|
||
term: '名詞', company: '公司', episode: '單集',
|
||
};
|
||
|
||
const LEARN_PATHS = {
|
||
market: {
|
||
title: '我想知道：現在大環境適不適合加碼？',
|
||
lead: '先別猜明天漲跌。用利率、通膨、就業、信用四條線，決定你該積極還是保守。',
|
||
steps: [
|
||
{ title: '① 讀懂大環境在說什麼', body: '利率往哪走、通膨高不高、就業強不強——這三個決定「順風還是逆風」。', read: { kind: 'category', id: '總經與利率', label: '總經與利率（分類）' }, practice: { view: 'macro', label: '打開總經儀表板' } },
|
||
{ title: '② 用一套流程決定倉位', body: '不是滿倉或空手，而是「這週該偏進攻還是偏防守」。', read: { kind: 'case', id: '總經數據怎麼看', label: '案例：總經數據怎麼看' }, practice: { view: 'macro', label: '對照 CPI、非農卡片' } },
|
||
{ title: '③ 把原則記下來', body: '每次調倉都寫「為什麼」，避免事後用結果論合理化。', read: { kind: 'category', id: '交易與資金管理', label: '交易與資金管理' }, practice: { view: 'journal', label: '寫一筆復盤' } },
|
||
],
|
||
},
|
||
stock: {
|
||
title: '我想知道：這家公司值不值得研究？',
|
||
lead: '把財報、生意模式、估值、趨勢拆成檢查清單，重複用在新公司上。',
|
||
steps: [
|
||
{ title: '① 財報在說什麼', body: '營收、毛利、EPS、財測——先會讀，再談貴不貴。', read: { kind: 'category', id: '財報基本功', label: '財報基本功' }, read2: { kind: 'case', id: 'NVIDIA財報怎麼看', label: '案例：財報怎麼看' }, practice: { view: 'stock', label: '個股工具 · 財報健檢' } },
|
||
{ title: '② 生意好不好、有沒有護城河', body: '數字背後是定價權與產業位置，別只看熱門題材。', read: { kind: 'category', id: '護城河與商業模式', label: '護城河與商業模式' }, practice: { view: 'stock', label: '個股工具 · 投資地圖' } },
|
||
{ title: '③ 用案例練「可重複的判斷」', body: 'NVDA、台積電只是例子；重點是抽出你下次也能用的問題。', read: { kind: 'case', id: 'NVIDIA決策複盤', label: '案例：決策複盤（框架）' }, practice: { view: 'stock', label: '查一檔你關心的股票' } },
|
||
],
|
||
},
|
||
trade: {
|
||
title: '我想知道：這筆交易哪裡做對、哪裡做錯？',
|
||
lead: '賺賠是結果；真正要檢查的是當初的理由、風險與紀律有沒有成立。',
|
||
steps: [
|
||
{ title: '① 避開結果論', body: '賺了不代表判斷對，賠了也不代表一定錯——先分清楚。', read: { kind: 'principle', id: '原則九十六：結果論陷阱（Outcome Bias）', label: '原則：結果論陷阱' }, practice: { view: 'journal', label: '打開交易復盤' } },
|
||
{ title: '② 進出場要有依據', body: '進場理由、停損/減倉規則寫清楚，復盤才有東西可改。', read: { kind: 'category', id: '交易與資金管理', label: '交易與資金管理' }, practice: { view: 'journal', label: '新增一筆交易' } },
|
||
{ title: '③ 定期回頭對照原則', body: '把常犯的錯連回具體原則，下次遇到類似情境才改得動。', read: { kind: 'principleMap', id: '心法地圖', label: '原則地圖（分群索引）' }, practice: { view: 'learn', section: 'quiz', label: '做練習題' } },
|
||
],
|
||
},
|
||
};
|
||
|
||
const PRINCIPLE_GROUPS = [
|
||
{ id: 'macro', label: '大局與倉位', re: /降息|升息|通膨|總經|倉位|現金|信用|利率|PMI|非農|CPI|風險偏好/ },
|
||
{ id: 'research', label: '研究與選股', re: /Capex|毛利率|財報|估值|定價權|護城河|供給|營收|EPS|財測|產業/ },
|
||
{ id: 'trade', label: '交易與紀律', re: /減倉|停損|結果論|賣|買|趨勢|紀律|倉位|觸發|弱|強|復盤/ },
|
||
{ id: 'mind', label: '心態與認知', re: /新聞|情緒|認知|耐心|時間|概率|陷阱|偏誤/ },
|
||
];
|
||
|
||
function deEmmy(text) {
|
||
return String(text || '')
|
||
.replace(/Emmy 投資心法/g, '投資原則庫')
|
||
.replace(/Emmy 投資台/g, '投資學習台')
|
||
.replace(/\bEmmy\b/g, '講者')
|
||
.replace(/110 條原則/g, '完整原則庫')
|
||
.replace(/心法地圖/g, '原則地圖')
|
||
.replace(/心法/g, '原則');
|
||
}
|
||
|
||
function cleanPrincipleTitle(title) {
|
||
return deEmmy(String(title || ''))
|
||
.replace(/^原則[^：:]+[：:]\s*/, '')
|
||
.trim();
|
||
}
|
||
|
||
function extractWikiLinks(body) {
|
||
const links = [];
|
||
const re = /\[\[([^\]]+)\]\]/g;
|
||
let m;
|
||
while ((m = re.exec(String(body || '')))) links.push(m[1].trim());
|
||
return links;
|
||
}
|
||
|
||
function resolveLinkTarget(raw, linkMap) {
|
||
if (!raw || !linkMap) return null;
|
||
const key = raw.trim();
|
||
return linkMap[key] || linkMap[key.split('#').pop()] || linkMap[key.split('/').pop()] || null;
|
||
}
|
||
|
||
function extractPrinciples(note, linkMap, principles) {
|
||
const out = [];
|
||
const seen = new Set();
|
||
const add = (p) => {
|
||
if (!p || seen.has(p.id)) return;
|
||
seen.add(p.id);
|
||
out.push(p);
|
||
};
|
||
for (const raw of extractWikiLinks(note.body)) {
|
||
const hit = resolveLinkTarget(raw, linkMap);
|
||
if (hit && hit.kind === 'principle') {
|
||
const p = (principles || []).find(x => x.id === hit.id);
|
||
add(p || { id: hit.id, title: raw.split('#').pop() || raw });
|
||
}
|
||
if (/投資心法#|投資原則#|原則/.test(raw)) {
|
||
const id = raw.includes('#') ? raw.split('#').slice(1).join('#') : raw;
|
||
const p = (principles || []).find(x => x.id === id || x.title === id);
|
||
add(p || { id, title: id });
|
||
}
|
||
}
|
||
return out.slice(0, 12);
|
||
}
|
||
|
||
function leadFromNote(note) {
|
||
if (note.summary) return deEmmy(note.summary);
|
||
const body = deEmmy(note.body || '');
|
||
for (const line of body.split('\n')) {
|
||
let l = line.trim();
|
||
if (!l || /^#/.test(l)) continue;
|
||
if (l.startsWith('>')) l = l.replace(/^>\s?/, '');
|
||
l = l.replace(/\[\[([^\]|]+)(\|[^\]]+)?\]\]/g, '$1').replace(/[*`]/g, '').trim();
|
||
if (l.length > 12) return l.slice(0, 160);
|
||
}
|
||
return '';
|
||
}
|
||
|
||
function buildTocFromMarkdown(md) {
|
||
const items = [];
|
||
for (const line of String(md || '').split('\n')) {
|
||
const m = line.match(/^(#{2,3})\s+(.+)$/);
|
||
if (!m) continue;
|
||
const level = m[1].length;
|
||
const text = deEmmy(m[2].replace(/\[\[([^\]|]+)(\|([^\]]+))?\]\]/g, (_, a, _b, c) => c || a)).trim();
|
||
const id = 'sec-' + items.length;
|
||
items.push({ level, text, id });
|
||
}
|
||
return items.slice(0, 14);
|
||
}
|
||
|
||
function stripMd(text) {
|
||
return deEmmy(String(text || ''))
|
||
.replace(/```[\s\S]*?```/g, ' ')
|
||
.replace(/\[\[([^\]|]+)(\|([^\]]+))?\]\]/g, (_, a, _b, c) => c || a)
|
||
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
|
||
.replace(/[#>*_`|]/g, '')
|
||
.replace(/\s+/g, ' ')
|
||
.trim();
|
||
}
|
||
|
||
function splitSections(md) {
|
||
const sections = [];
|
||
let cur = null;
|
||
for (const line of String(md || '').split('\n')) {
|
||
const h = line.match(/^(#{2,3})\s+(.+)$/);
|
||
if (h) {
|
||
if (cur && cur.lines.length) sections.push(cur);
|
||
cur = { level: h[1].length, title: stripMd(h[2]), lines: [] };
|
||
} else if (cur) {
|
||
cur.lines.push(line);
|
||
}
|
||
}
|
||
if (cur && cur.lines.length) sections.push(cur);
|
||
return sections
|
||
.map(s => ({ ...s, text: stripMd(s.lines.join('\n')) }))
|
||
.filter(s => s.title && s.text.length > 20)
|
||
.slice(0, 8);
|
||
}
|
||
|
||
function extractInsights(note) {
|
||
const body = deEmmy(note.body || '');
|
||
const lines = body.split('\n');
|
||
const out = [];
|
||
const seen = new Set();
|
||
const push = (raw) => {
|
||
let text = stripMd(raw)
|
||
.replace(/^[-\d.)、\s]+/, '')
|
||
.replace(/^一句話精華[:：]\s*/, '');
|
||
if (text.length < 14 || seen.has(text)) return;
|
||
seen.add(text);
|
||
out.push(text.slice(0, 118));
|
||
};
|
||
for (const line of lines) {
|
||
const t = line.trim();
|
||
if (/^>\s*\S/.test(t) || /^[-*]\s+\S/.test(t) || /一句話精華/.test(t) || /^\*\*.+\*\*/.test(t)) push(t);
|
||
if (out.length >= 5) break;
|
||
}
|
||
if (out.length < 3) {
|
||
for (const s of splitSections(body)) {
|
||
push(s.text);
|
||
if (out.length >= 5) break;
|
||
}
|
||
}
|
||
return out;
|
||
}
|
||
|
||
function buildRecallCards(note, sections, principles) {
|
||
const title = cleanPrincipleTitle(note.title || note.id || '這篇筆記');
|
||
const cards = [
|
||
{
|
||
q: `先不看內容，你會怎麼用一句話說明「${title}」？`,
|
||
a: leadFromNote(note) || '抓出核心判斷，再用自己的話重說一次。',
|
||
},
|
||
];
|
||
sections.slice(0, 3).forEach(s => cards.push({
|
||
q: `「${s.title}」真正要判斷的是什麼？`,
|
||
a: s.text.slice(0, 150),
|
||
}));
|
||
principles.slice(0, 2).forEach(p => cards.push({
|
||
q: `這個案例可以連到哪一條可重複使用的原則？`,
|
||
a: cleanPrincipleTitle(p.title),
|
||
}));
|
||
return cards.slice(0, 5);
|
||
}
|
||
|
||
function addHeadingAnchors(bodyHtml, toc) {
|
||
let idx = 0;
|
||
return bodyHtml.replace(/<h([23])>([\s\S]*?)<\/h\1>/g, (m, level, inner) => {
|
||
const t = toc[idx];
|
||
idx += 1;
|
||
if (!t || String(t.level) !== String(level)) return m;
|
||
return `<h${level} id="${t.id}">${inner}</h${level}>`;
|
||
});
|
||
}
|
||
|
||
function renderPathSteps(pathId, path) {
|
||
return path.steps.map((step, i) => {
|
||
const links = [
|
||
step.read ? `<button type="button" class="la-link" data-note-kind="${step.read.kind}" data-note-id="${step.read.id}">${step.read.label}</button>` : '',
|
||
step.read2 ? `<button type="button" class="la-link" data-note-kind="${step.read2.kind}" data-note-id="${step.read2.id}">${step.read2.label}</button>` : '',
|
||
].filter(Boolean).join('');
|
||
const practice = step.practice
|
||
? `<button type="button" class="la-practice" data-view="${step.practice.view || ''}" data-section="${step.practice.section || ''}">${step.practice.label}</button>`
|
||
: '';
|
||
return `<details class="path-step" ${i === 0 ? 'open' : ''}>
|
||
<summary><span class="path-n">${i + 1}</span><strong>${deEmmy(step.title)}</strong></summary>
|
||
<p>${deEmmy(step.body)}</p>
|
||
<div class="path-actions">${links}${practice}</div>
|
||
</details>`;
|
||
}).join('');
|
||
}
|
||
|
||
function renderHome(opts) {
|
||
const esc = opts.escapeHtml;
|
||
const cards = [
|
||
{ id: 'market', icon: '🌐', ...LEARN_PATHS.market },
|
||
{ id: 'stock', icon: '📊', ...LEARN_PATHS.stock },
|
||
{ id: 'trade', icon: '📝', ...LEARN_PATHS.trade },
|
||
];
|
||
return `
|
||
<div class="learning-method">
|
||
<div>
|
||
<div class="eyebrow">Learning UX</div>
|
||
<h2>先回想，再展開，最後拿去判斷</h2>
|
||
<p>這裡把長筆記拆成短任務：主動回想、章節重點、案例原則、工具應用。你不用把全部內容一次吞完，而是每次完成一個判斷。</p>
|
||
</div>
|
||
<div class="method-rail">
|
||
<span>回想</span><span>重點</span><span>連結</span><span>應用</span>
|
||
</div>
|
||
</div>
|
||
<div class="learning-board">
|
||
<div class="board-copy">
|
||
<div class="eyebrow">從問題開始</div>
|
||
<h2>選一個你現在真的想回答的問題</h2>
|
||
<p>不用從頭讀完。展開下面步驟，依序「讀一篇 → 連到工具 → 做一次判斷」。同一套問題可以反覆用在不同股票與不同月份。</p>
|
||
</div>
|
||
<div class="learning-cards">
|
||
${cards.map(c => `<button type="button" class="learning-card" data-path="${c.id}">
|
||
<span class="lc-step">${esc(c.icon)}</span>
|
||
<strong>${esc(c.title)}</strong>
|
||
<span>${esc(c.lead)}</span>
|
||
<em>展開學習步驟</em>
|
||
</button>`).join('')}
|
||
</div>
|
||
</div>
|
||
<div id="learnPathHost" class="learn-path-host" hidden>
|
||
<div class="learn-path-head">
|
||
<button type="button" class="back-link" id="learnPathBack">← 換一個問題</button>
|
||
<h2 id="learnPathTitle"></h2>
|
||
<p id="learnPathLead"></p>
|
||
</div>
|
||
<div id="learnPathSteps" class="learn-path-steps"></div>
|
||
</div>
|
||
<div class="practice-strip">
|
||
<div><b>讀</b><span>先懂概念，不用背完。</span></div>
|
||
<div><b>連</b><span>紫色按鈕跳到相關原則、名詞、案例。</span></div>
|
||
<div><b>做</b><span>到總經、個股或復盤頁實際操作一次。</span></div>
|
||
</div>
|
||
<div class="module-grid learn-shortcuts">
|
||
<div class="module-card" data-section-jump="principleMap"><div class="mod-name">原則地圖</div><div class="mod-meta">110+ 條原則的分群索引，可當查詢表。</div></div>
|
||
<div class="module-card" data-section-jump="cases"><div class="mod-name">案例講解</div><div class="mod-meta">從單一公司/events 抽出可重複用的判斷。</div></div>
|
||
<div class="module-card" data-section-jump="quiz"><div class="mod-name">練習題庫</div><div class="mod-meta">用問題檢查自己是不是真的懂。</div></div>
|
||
</div>`;
|
||
}
|
||
|
||
function bindHome(container, handlers) {
|
||
const host = container.querySelector('#learnPathHost');
|
||
const stepsEl = container.querySelector('#learnPathSteps');
|
||
const titleEl = container.querySelector('#learnPathTitle');
|
||
const leadEl = container.querySelector('#learnPathLead');
|
||
const showPath = (id) => {
|
||
const path = LEARN_PATHS[id];
|
||
if (!path) return;
|
||
container.querySelector('.learning-board').hidden = true;
|
||
container.querySelector('.practice-strip').hidden = true;
|
||
container.querySelector('.learn-shortcuts').hidden = true;
|
||
host.hidden = false;
|
||
titleEl.textContent = path.title;
|
||
leadEl.textContent = path.lead;
|
||
stepsEl.innerHTML = renderPathSteps(id, path);
|
||
bindPathSteps(stepsEl, handlers);
|
||
host.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
};
|
||
container.querySelector('#learnPathBack')?.addEventListener('click', () => {
|
||
host.hidden = true;
|
||
container.querySelector('.learning-board').hidden = false;
|
||
container.querySelector('.practice-strip').hidden = false;
|
||
container.querySelector('.learn-shortcuts').hidden = false;
|
||
});
|
||
container.querySelectorAll('.learning-card[data-path]').forEach(btn => {
|
||
btn.addEventListener('click', () => showPath(btn.dataset.path));
|
||
});
|
||
container.querySelectorAll('[data-section-jump]').forEach(el => {
|
||
el.addEventListener('click', () => handlers.showSection(el.dataset.sectionJump));
|
||
});
|
||
}
|
||
|
||
function bindPathSteps(root, handlers) {
|
||
root.querySelectorAll('.la-link[data-note-kind]').forEach(btn => {
|
||
btn.addEventListener('click', () => handlers.openNote(btn.dataset.noteKind, btn.dataset.noteId));
|
||
});
|
||
root.querySelectorAll('.la-practice[data-view]').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const v = btn.dataset.view;
|
||
if (v === 'learn' && btn.dataset.section) handlers.showSection(btn.dataset.section);
|
||
else if (v && v !== 'learn') handlers.goView(v);
|
||
});
|
||
});
|
||
}
|
||
|
||
function renderArticle(note, opts) {
|
||
const esc = opts.escapeHtml;
|
||
const kind = note.kind || '';
|
||
const kindLabel = KIND_LABEL[kind] || '筆記';
|
||
const title = deEmmy(note.title || note.id || '');
|
||
const lead = leadFromNote(note);
|
||
const toc = buildTocFromMarkdown(note.body);
|
||
const sections = splitSections(note.body);
|
||
const insights = extractInsights(note);
|
||
const principles = (kind === 'case') ? extractPrinciples(note, opts.linkMap, opts.principles) : [];
|
||
const recallCards = buildRecallCards(note, sections, principles);
|
||
const fm = note.frontmatter || {};
|
||
const noteKey = (kind && note.id) ? `learn_note:${kind}:${note.id}` : '';
|
||
let savedNote = '';
|
||
if (noteKey) {
|
||
try { savedNote = JSON.parse(localStorage.getItem(noteKey) || '{}').text || ''; } catch (_) {}
|
||
}
|
||
let tags = '';
|
||
if (fm.ticker) tags += `<span class="fm-tag">代號 ${esc([].concat(fm.ticker).join(' / '))}</span>`;
|
||
if (fm.sector) tags += `<span class="fm-tag">${esc(fm.sector)}</span>`;
|
||
if (fm.category) tags += `<span class="fm-tag">${esc(fm.category)}</span>`;
|
||
|
||
const principlePanel = principles.length ? `
|
||
<section class="la-principles">
|
||
<div class="la-principles-head">
|
||
<h2>可抽出的通用原則</h2>
|
||
<p>這些原則不只適用這一檔公司——下次遇到類似情境，可以直接拿來問自己。</p>
|
||
</div>
|
||
<div class="la-principle-chips">
|
||
${principles.map(p => `<button type="button" class="principle-chip" data-note-kind="principle" data-note-id="${esc(p.id)}">${esc(cleanPrincipleTitle(p.title))}</button>`).join('')}
|
||
</div>
|
||
</section>` : '';
|
||
|
||
const tocHtml = toc.length > 2 ? `
|
||
<nav class="la-toc" aria-label="本篇目錄">
|
||
<div class="la-toc-title">章節導航</div>
|
||
<div class="la-toc-links">${toc.map(t => `<a href="#${esc(t.id)}" class="lv${t.level}">${esc(t.text)}</a>`).join('')}</div>
|
||
</nav>` : '';
|
||
|
||
let bodyHtml = opts.renderMarkdown(deEmmy(note.body || ''));
|
||
bodyHtml = addHeadingAnchors(bodyHtml, toc);
|
||
|
||
const insightPanel = insights.length ? `
|
||
<section class="learning-panel insight-panel">
|
||
<div class="panel-head"><span>01</span><h2>先抓重點</h2></div>
|
||
<div class="insight-grid">
|
||
${insights.map((x, i) => `<div class="insight-card"><b>${String(i + 1).padStart(2, '0')}</b><p>${esc(x)}</p></div>`).join('')}
|
||
</div>
|
||
</section>` : '';
|
||
|
||
const recallPanel = recallCards.length ? `
|
||
<section class="learning-panel recall-panel">
|
||
<div class="panel-head"><span>02</span><h2>主動回想</h2></div>
|
||
<div class="recall-grid">
|
||
${recallCards.map((c, i) => `<div class="recall-card">
|
||
<div class="recall-q">${esc(c.q)}</div>
|
||
<button type="button" class="recall-toggle" aria-expanded="false">看參考答案</button>
|
||
<div class="recall-a" hidden>${esc(c.a)}</div>
|
||
</div>`).join('')}
|
||
</div>
|
||
</section>` : '';
|
||
|
||
const sectionPanel = sections.length ? `
|
||
<section class="learning-panel section-panel">
|
||
<div class="panel-head"><span>03</span><h2>章節速讀</h2></div>
|
||
<div class="section-ladder">
|
||
${sections.slice(0, 6).map(s => `<details class="section-chip">
|
||
<summary>${esc(s.title)}</summary>
|
||
<p>${esc(s.text.slice(0, 180))}</p>
|
||
</details>`).join('')}
|
||
</div>
|
||
</section>` : '';
|
||
|
||
const reviewPanel = `
|
||
<section class="learning-panel review-panel">
|
||
<div class="panel-head"><span>04</span><h2>間隔複習</h2></div>
|
||
<div class="review-track">
|
||
<button type="button" class="review-step on">今天</button>
|
||
<button type="button" class="review-step">3 天後</button>
|
||
<button type="button" class="review-step">7 天後</button>
|
||
<button type="button" class="review-step">14 天後</button>
|
||
</div>
|
||
</section>`;
|
||
|
||
const notePanel = noteKey ? `
|
||
<section class="learning-panel personal-note-panel">
|
||
<div class="panel-head"><span>✎</span><h2>我的筆記</h2></div>
|
||
<textarea class="personal-note-input" data-note-key="${esc(noteKey)}" placeholder="用自己的話寫：這篇對我下次判斷股票、倉位或復盤有什麼用？">${esc(savedNote)}</textarea>
|
||
<div class="personal-note-actions"><span class="personal-note-status">尚未儲存</span><button type="button" class="btn sm save-personal-note">儲存筆記</button></div>
|
||
</section>` : '';
|
||
|
||
const toolActions = [
|
||
{ view: 'macro', label: '總經儀表板', sub: '對照利率、通膨' },
|
||
{ view: 'stock', label: '個股工具', sub: '查財報、投資地圖' },
|
||
{ view: 'journal', label: '交易復盤', sub: '記錄判斷與檢討' },
|
||
];
|
||
|
||
return `
|
||
<div class="note-toolbar">
|
||
<span class="back-link" id="noteBack">← 返回</span>
|
||
${note.kind && note.id ? '<button type="button" class="btn ghost sm" id="noteGraphBtn">🔗 周邊圖譜</button>' : ''}
|
||
</div>
|
||
${tags ? `<div class="note-frontmatter">${tags}</div>` : ''}
|
||
<article class="learn-article">
|
||
<header class="la-head">
|
||
<div class="la-kind">${esc(kindLabel)}</div>
|
||
<h1 class="la-title">${esc(title)}</h1>
|
||
${lead ? `<p class="la-lead">${esc(lead)}</p>` : ''}
|
||
</header>
|
||
<div class="learn-tabs" role="tablist" aria-label="學習模式">
|
||
<button type="button" class="learn-tab on" data-tab="study">學習模式</button>
|
||
<button type="button" class="learn-tab" data-tab="note">完整筆記</button>
|
||
<button type="button" class="learn-tab" data-tab="apply">應用</button>
|
||
</div>
|
||
<div class="learn-tab-panel" data-panel="study">
|
||
${insightPanel}
|
||
${recallPanel}
|
||
${sectionPanel}
|
||
${reviewPanel}
|
||
${notePanel}
|
||
${principlePanel}
|
||
</div>
|
||
<div class="learn-tab-panel" data-panel="note" hidden>
|
||
${tocHtml}
|
||
<div class="learn-body md">${bodyHtml}</div>
|
||
</div>
|
||
<div class="learn-tab-panel" data-panel="apply" hidden>
|
||
${notePanel}
|
||
${principlePanel}
|
||
${reviewPanel}
|
||
</div>
|
||
<footer class="la-footer">
|
||
<div class="la-footer-title">把這篇用出去</div>
|
||
<div class="la-tool-grid">
|
||
${toolActions.map(a => `<button type="button" class="la-tool-card" data-view="${a.view}">
|
||
<strong>${a.label}</strong><span>${a.sub}</span>
|
||
</button>`).join('')}
|
||
</div>
|
||
</footer>
|
||
</article>`;
|
||
}
|
||
|
||
function bindArticle(container, handlers) {
|
||
container.querySelector('#noteBack')?.addEventListener('click', handlers.onBack);
|
||
container.querySelector('#noteGraphBtn')?.addEventListener('click', handlers.onGraph);
|
||
container.querySelectorAll('.principle-chip[data-note-id], .la-link[data-note-id]').forEach(btn => {
|
||
btn.addEventListener('click', () => handlers.openNote(btn.dataset.noteKind, btn.dataset.noteId));
|
||
});
|
||
container.querySelectorAll('.la-tool-card[data-view]').forEach(btn => {
|
||
btn.addEventListener('click', () => handlers.goView(btn.dataset.view));
|
||
});
|
||
container.querySelectorAll('.learn-tab[data-tab]').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const tab = btn.dataset.tab;
|
||
container.querySelectorAll('.learn-tab').forEach(x => x.classList.toggle('on', x === btn));
|
||
container.querySelectorAll('.learn-tab-panel').forEach(p => { p.hidden = p.dataset.panel !== tab; });
|
||
});
|
||
});
|
||
container.querySelectorAll('.recall-toggle').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const ans = btn.parentElement.querySelector('.recall-a');
|
||
const open = ans.hidden;
|
||
ans.hidden = !open;
|
||
btn.setAttribute('aria-expanded', open ? 'true' : 'false');
|
||
btn.textContent = open ? '收起答案' : '看參考答案';
|
||
});
|
||
});
|
||
container.querySelectorAll('.review-step').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
btn.parentElement.querySelectorAll('.review-step').forEach(x => x.classList.toggle('on', x === btn));
|
||
});
|
||
});
|
||
container.querySelectorAll('.save-personal-note').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const panel = btn.closest('.personal-note-panel');
|
||
const input = panel?.querySelector('.personal-note-input');
|
||
const key = input?.dataset.noteKey;
|
||
if (!key) return;
|
||
const title = container.querySelector('.la-title')?.textContent?.trim() || '';
|
||
const parts = key.split(':');
|
||
const payload = {
|
||
key, title, kind: parts[1] || '', id: parts.slice(2).join(':'),
|
||
text: input.value.trim(), updatedAt: new Date().toISOString(),
|
||
};
|
||
if (payload.text) localStorage.setItem(key, JSON.stringify(payload));
|
||
else localStorage.removeItem(key);
|
||
const status = panel.querySelector('.personal-note-status');
|
||
if (status) status.textContent = payload.text ? '已儲存' : '已清空';
|
||
});
|
||
});
|
||
container.querySelectorAll('.la-toc a').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
e.preventDefault();
|
||
const el = container.querySelector(a.getAttribute('href'));
|
||
el?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
});
|
||
});
|
||
}
|
||
|
||
function groupPrinciples(principles) {
|
||
const groups = PRINCIPLE_GROUPS.map(g => ({ ...g, items: [] }));
|
||
const other = { id: 'other', label: '其他', items: [] };
|
||
for (const p of principles || []) {
|
||
const title = cleanPrincipleTitle(p.title);
|
||
const hit = groups.find(g => g.re.test(title));
|
||
(hit || other).items.push({ ...p, cleanTitle: title });
|
||
}
|
||
const out = groups.filter(g => g.items.length);
|
||
if (other.items.length) out.push(other);
|
||
return out;
|
||
}
|
||
|
||
function renderPrincipleGroups(principles, esc) {
|
||
const groups = groupPrinciples(principles);
|
||
return groups.map(g => `
|
||
<details class="principle-group" open>
|
||
<summary>${esc(g.label)} <span class="pg-count">${g.items.length}</span></summary>
|
||
<div class="module-grid pg-grid">
|
||
${g.items.map(p => `<div class="module-card pg-card" data-id="${esc(p.id)}">
|
||
<div class="mod-name">${esc(p.cleanTitle)}</div>
|
||
</div>`).join('')}
|
||
</div>
|
||
</details>`).join('');
|
||
}
|
||
|
||
function renderCaseCards(items, esc, opts) {
|
||
opts = opts || {};
|
||
return (items || []).map(it => {
|
||
const principles = extractPrinciples(it, opts.linkMap, opts.principles);
|
||
const badge = principles.length ? `<span class="case-badge">${principles.length} 條可重用原則</span>` : '';
|
||
return `<div class="module-card case-card" data-id="${esc(it.id)}">
|
||
<div class="mod-name">${esc(deEmmy(it.title))}${badge}</div>
|
||
${it.summary ? `<div class="mod-meta">${esc(deEmmy(it.summary))}</div>` : ''}
|
||
</div>`;
|
||
}).join('');
|
||
}
|
||
|
||
global.LearnUI = {
|
||
deEmmy, cleanPrincipleTitle, renderHome, bindHome, renderArticle, bindArticle,
|
||
renderPrincipleGroups, renderCaseCards, extractPrinciples, LEARN_PATHS,
|
||
};
|
||
})(window);
|