diff --git a/Html/apps/static/js/lesson.js b/Html/apps/static/js/lesson.js index 9bd2807..aea31e0 100644 --- a/Html/apps/static/js/lesson.js +++ b/Html/apps/static/js/lesson.js @@ -1,7 +1,7 @@ -window.addEventListener('load', ()=>{ - console.log(window.material); - console.log(window.lesson); - editLesson(window.material.material_id, window.chapter.chapter_name, window.lesson.lesson_name); +window.addEventListener('load', () => { + console.log(window.material); + console.log(window.lesson); + editLesson(window.material.material_id, window.chapter.chapter_name, window.lesson.lesson_name); }); @@ -9,259 +9,259 @@ window.addEventListener('load', ()=>{ function parseHeadings(mdText) { - - const lines = mdText.split('\n'); - const tokens = []; - for (let i=0;i tokens[i].level) j++; - // 找到第一个 >= 当前level 的 heading 或到文末 - let k = i+1; - while (k tokens[i].level) k++; - const nextSameOrHigher = k x.level===level && x.text===headingText); - if (!t) return ''; - return parsed.lines.slice(t.start, t.end+1).join('\n'); - } - - // 根据三个 md,构造统一大纲树(一级唯一“主题”,其下多个阶段##,其下多个步骤###) - function buildUnifiedOutline(parsedLesson, parsedPrompt, parsedScore) { - // 取 lesson 的结构为主(也可做三者交集/并集策略,这里简单以 lesson 为基准) - const root1 = parsedLesson.tokens.find(t => t.level===1); - const phases = parsedLesson.tokens.filter(t => t.level===2); - const stepsByPhase = {}; - phases.forEach(ph => { - stepsByPhase[ph.text] = parsedLesson.tokens.filter(t => t.level===3 && t.start>ph.start && t.end<=ph.end) - .map(s => s.text); - }); - return { theme: root1 ? root1.text : '主题', phases, stepsByPhase }; - } - - let CURRENT = { - material_id: null, chapter_name: null, lesson_name: null, - links: { lesson:'', prompt:'', score:'' }, - raw: { lesson:'', prompt:'', score:'' }, - parsed:{ lesson:null, prompt:null, score:null }, - active:{ phase:null, step:null, lessontxt:null, prompt:null, score:null }, - outline:null - }; - function bustCache(url) { - const sep = url.includes("?") ? "&" : "?"; - return url + sep + "_ts=" + Date.now(); - } - // 入口:从你的列表调用 - async function editLesson(material_id, chapter_name, lesson_name) { - - CURRENT.material_id = material_id; - CURRENT.chapter_name = chapter_name; - CURRENT.lesson_name = lesson_name; - - // 打开右侧课程详情先占位 - const details = document.getElementById('courseDetails'); - const detailsContent = document.getElementById('details-content'); - detailsContent.innerHTML = '

...

'; - details.classList.add('open'); - - // 拉课时详情 - metaRes = window.lesson; - const meta = metaRes; - - document.getElementById('course-title').textContent = meta.name || meta.material_name || lesson_name; - // 右侧面板描述/目录(简化) - detailsContent.innerHTML = `

描述

${meta.description || meta.material_description || '暂无描述'}

`; - const chapterList = document.getElementById('chapter-list'); - chapterList.innerHTML = ''; - (meta.chapters||[]).forEach(ch=>{ - const li = document.createElement('li'); - li.textContent = ch.chapter_name; - chapterList.appendChild(li); - }); - - // 保存三份链接 - CURRENT.links.lesson = meta.markdown_lesson_file_link; - CURRENT.links.prompt = meta.markdown_prompt_file_name; - CURRENT.links.score = meta.markdown_score_prompt_file_link; - console.log(CURRENT.links); - // 拉三份 Markdown - const [t1, t2, t3] = await Promise.all([ - fetch(bustCache(CURRENT.links.lesson), { cache: "no-store" }).then(r => r.text()), - fetch(bustCache(CURRENT.links.prompt), { cache: "no-store" }).then(r => r.text()), - fetch(bustCache(CURRENT.links.score), { cache: "no-store" }).then(r => r.text()) - ]); - - - CURRENT.raw.lesson = t1; CURRENT.raw.prompt = t2; CURRENT.raw.score = t3; - CURRENT.parsed.lesson = parseHeadings(t1); - CURRENT.parsed.prompt = parseHeadings(t2); - CURRENT.parsed.score = parseHeadings(t3); - - // 构建大纲并渲染 - CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); - renderOutline(CURRENT.outline); - - // 默认选中第一个“步骤”(若无步骤则整个文档) - const firstPhase = CURRENT.outline.phases?.[0]?.text; - const firstStep = firstPhase && CURRENT.outline.stepsByPhase[firstPhase]?.[0]; - if (firstPhase && firstStep) { - loadStepToEditors(firstPhase, firstStep); - highlightActive(firstPhase, firstStep); - } else { - // 无###时,直接把全文放到 Lesson 标签 - document.getElementById('editor-lesson').value = CURRENT.raw.lesson; - document.getElementById('editor-prompt').value = CURRENT.raw.prompt; - document.getElementById('editor-score').value = CURRENT.raw.score; - } + const lines = mdText.split('\n'); + const tokens = []; + for (let i = 0; i < lines.length; i++) { + const m = lines[i].match(/^(#{1,3})\s+(.*)$/); + if (m) tokens.push({ level: m[1].length, text: m[2].trim(), line: i }); } - - // ===== 在渲染一级标题时调用 ===== - function addThemeWithHelp(tree, themeText) { + // 确定每个heading的区间(到下一个同级或上级前一行) + for (let i = 0; i < tokens.length; i++) { + let j = i + 1; + while (j < tokens.length && tokens[j].level > tokens[i].level) j++; + // 找到第一个 >= 当前level 的 heading 或到文末 + let k = i + 1; + while (k < tokens.length && tokens[k].level > tokens[i].level) k++; + const nextSameOrHigher = k < tokens.length ? tokens[k].line : lines.length; + tokens[i].start = tokens[i].line; + tokens[i].end = nextSameOrHigher - 1; + } + return { lines, tokens }; +} + +// 从解析结果中抽取一个 heading 段落文本 +function sliceSection(parsed, headingText, level) { + const t = parsed.tokens.find(x => x.level === level && x.text === headingText); + if (!t) return ''; + return parsed.lines.slice(t.start, t.end + 1).join('\n'); +} + +// 根据三个 md,构造统一大纲树(一级唯一“主题”,其下多个阶段##,其下多个步骤###) +function buildUnifiedOutline(parsedLesson, parsedPrompt, parsedScore) { + // 取 lesson 的结构为主(也可做三者交集/并集策略,这里简单以 lesson 为基准) + const root1 = parsedLesson.tokens.find(t => t.level === 1); + const phases = parsedLesson.tokens.filter(t => t.level === 2); + const stepsByPhase = {}; + phases.forEach(ph => { + stepsByPhase[ph.text] = parsedLesson.tokens.filter(t => t.level === 3 && t.start > ph.start && t.end <= ph.end) + .map(s => s.text); + }); + return { theme: root1 ? root1.text : '主题', phases, stepsByPhase }; +} + +let CURRENT = { + material_id: null, chapter_name: null, lesson_name: null, + links: { lesson: '', prompt: '', score: '' }, + raw: { lesson: '', prompt: '', score: '' }, + parsed: { lesson: null, prompt: null, score: null }, + active: { phase: null, step: null, lessontxt: null, prompt: null, score: null }, + outline: null +}; +function bustCache(url) { + const sep = url.includes("?") ? "&" : "?"; + return url + sep + "_ts=" + Date.now(); +} +// 入口:从你的列表调用 +async function editLesson(material_id, chapter_name, lesson_name) { + + CURRENT.material_id = material_id; + CURRENT.chapter_name = chapter_name; + CURRENT.lesson_name = lesson_name; + + // 打开右侧课程详情先占位 + const details = document.getElementById('courseDetails'); + const detailsContent = document.getElementById('details-content'); + detailsContent.innerHTML = '

...

'; + details.classList.add('open'); + + // 拉课时详情 + metaRes = window.lesson; + const meta = metaRes; + + document.getElementById('course-title').textContent = meta.name || meta.material_name || lesson_name; + // 右侧面板描述/目录(简化) + detailsContent.innerHTML = `

描述

${meta.description || meta.material_description || '暂无描述'}

`; + const chapterList = document.getElementById('chapter-list'); + chapterList.innerHTML = ''; + (meta.chapters || []).forEach(ch => { const li = document.createElement('li'); - li.className = 'lvl1'; - - // 标题文本容器(单独一个 span,避免更新 textContent 时把子元素清掉) - const titleSpan = document.createElement('span'); - titleSpan.className = 'title-text'; - titleSpan.textContent = normalizeTitle(themeText); - li.appendChild(titleSpan); + li.textContent = ch.chapter_name; + chapterList.appendChild(li); + }); - const help = document.createElement('span'); - help.className = 'help-icon'; - help.textContent = ' ?'; - li.appendChild(help); + // 保存三份链接 + CURRENT.links.lesson = meta.markdown_lesson_file_link; + CURRENT.links.prompt = meta.markdown_prompt_file_name; + CURRENT.links.score = meta.markdown_score_prompt_file_link; + console.log(CURRENT.links); + // 拉三份 Markdown + const [t1, t2, t3] = await Promise.all([ + fetch(bustCache(CURRENT.links.lesson), { cache: "no-store" }).then(r => r.text()), + fetch(bustCache(CURRENT.links.prompt), { cache: "no-store" }).then(r => r.text()), + fetch(bustCache(CURRENT.links.score), { cache: "no-store" }).then(r => r.text()) + ]); + + + CURRENT.raw.lesson = t1; CURRENT.raw.prompt = t2; CURRENT.raw.score = t3; + CURRENT.parsed.lesson = parseHeadings(t1); + CURRENT.parsed.prompt = parseHeadings(t2); + CURRENT.parsed.score = parseHeadings(t3); + + // 构建大纲并渲染 + CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); + renderOutline(CURRENT.outline); + + // 默认选中第一个“步骤”(若无步骤则整个文档) + const firstPhase = CURRENT.outline.phases?.[0]?.text; + const firstStep = firstPhase && CURRENT.outline.stepsByPhase[firstPhase]?.[0]; + if (firstPhase && firstStep) { + loadStepToEditors(firstPhase, firstStep); + highlightActive(firstPhase, firstStep); + } else { + // 无###时,直接把全文放到 Lesson 标签 + document.getElementById('editor-lesson').value = CURRENT.raw.lesson; + document.getElementById('editor-prompt').value = CURRENT.raw.prompt; + document.getElementById('editor-score').value = CURRENT.raw.score; + } +} + +// ===== 在渲染一级标题时调用 ===== +function addThemeWithHelp(tree, themeText) { + const li = document.createElement('li'); + li.className = 'lvl1'; + + // 标题文本容器(单独一个 span,避免更新 textContent 时把子元素清掉) + const titleSpan = document.createElement('span'); + titleSpan.className = 'title-text'; + titleSpan.textContent = normalizeTitle(themeText); + li.appendChild(titleSpan); + + const help = document.createElement('span'); + help.className = 'help-icon'; + help.textContent = ' ?'; + li.appendChild(help); + + // 新增:铅笔编辑按钮 + const editBtn = createEditButton(() => { + openTitleEditor({ + title: '修改标题', + initialValue: titleSpan.textContent, + onSubmit: (value) => { + const res = validateTitle(value); + if (!res.ok) return res; // 返回 {ok:false, message:'...'} => 在模态框里显示错误 + titleSpan.textContent = res.value; // 合法后的值写回 + const newLine = "# " + res.value; + CURRENT.raw.lesson = setFirstLine(CURRENT.raw.lesson || "", newLine); + CURRENT.raw.prompt = setFirstLine(CURRENT.raw.prompt || "", newLine); + CURRENT.raw.score = setFirstLine(CURRENT.raw.score || "", newLine); + let confirmMsg = "是否立即保存?注意当前编辑内容"; + // —— 二次确认 —— // + if (window.confirm(confirmMsg)) { + saveUpdatedStep() + } + return { ok: true }; // 关闭模态框 + } + }); + }); + li.appendChild(editBtn); + + // 绑定即时 tooltip(挂到 body,不会被裁切) + attachImmediateTooltip( + help, + `提示:“阶段”和“步骤”是为了统一大模型中的提示词表述,满足所在Markdown标题层级即可。\n\r + (即阶段为##,步骤为###,在正文编辑中不要使用#、##、###(可使用####、#####)` + ); + + tree.appendChild(li); +} + +function renderOutline(outline) { + const tree = document.getElementById('outline-tree'); + tree.innerHTML = ''; // 清空大纲内容 + + if (outline.theme) addThemeWithHelp(tree, outline.theme); + + + // 渲染每个二级标题 + outline.phases.forEach(ph => { + // 二级标题 + const li2 = document.createElement('li'); + li2.className = 'lvl2'; + li2.textContent = `${ph.text}`; // 新增:铅笔编辑按钮 const editBtn = createEditButton(() => { openTitleEditor({ - title: '修改标题', - initialValue: titleSpan.textContent, + title: '修改阶段标题', + initialValue: ph.text, onSubmit: (value) => { const res = validateTitle(value); if (!res.ok) return res; // 返回 {ok:false, message:'...'} => 在模态框里显示错误 - titleSpan.textContent = res.value; // 合法后的值写回 - const newLine = "# " + res.value; - CURRENT.raw.lesson = setFirstLine(CURRENT.raw.lesson || "", newLine); - CURRENT.raw.prompt = setFirstLine(CURRENT.raw.prompt || "", newLine); - CURRENT.raw.score = setFirstLine(CURRENT.raw.score || "", newLine); - let confirmMsg = "是否立即保存?注意当前编辑内容"; - // —— 二次确认 —— // - if (window.confirm(confirmMsg)) { - saveUpdatedStep() - } + const oldH2 = (ph.text || "").trim(); + const newH2 = (res.value || "").trim(); + const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + const hasH2 = (text, h2) => { + const re = new RegExp(`^##\\s*${escapeRegExp(h2)}\\s*$`, 'm'); + return re.test(text || ''); + }; + const replaceH2Once = (text, oldT, newT) => { + const re = new RegExp(`^##\\s*${escapeRegExp(oldT)}\\s*$`, 'm'); + return (text || '').replace(re, `## ${newT}`); + }; + ['lesson', 'prompt', 'score'].forEach((key) => { + const src = CURRENT.raw[key] || ''; + // 已经有 "## newH2" 就不动;否则把第一处 "## oldH2" 换成新标题 + if (!hasH2(src, newH2)) { + CURRENT.raw[key] = replaceH2Once(src, oldH2, newH2); + li2.textContent = res.value; // 合法后的值写回 + let confirmMsg = "是否立即保存?注意当前编辑内容"; + // —— 二次确认 —— // + if (window.confirm(confirmMsg)) { + saveUpdatedStep() + } + } else { + // 已存在新标题:保持原文不变 + alert("新标题已存在") + } + }); return { ok: true }; // 关闭模态框 } }); }); - li.appendChild(editBtn); + li2.appendChild(editBtn); + tree.appendChild(li2); - // 绑定即时 tooltip(挂到 body,不会被裁切) - attachImmediateTooltip( - help, - `提示:“阶段”和“步骤”是为了统一大模型中的提示词表述,满足所在Markdown标题层级即可。\n\r - (即阶段为##,步骤为###,在正文编辑中不要使用#、##、###(可使用####、#####)` - ); - - tree.appendChild(li); - } - - function renderOutline(outline) { - const tree = document.getElementById('outline-tree'); - tree.innerHTML = ''; // 清空大纲内容 - - if (outline.theme) addThemeWithHelp(tree, outline.theme); - - - // 渲染每个二级标题 - outline.phases.forEach(ph => { - // 二级标题 - const li2 = document.createElement('li'); - li2.className = 'lvl2'; - li2.textContent = `${ph.text}`; - // 新增:铅笔编辑按钮 - const editBtn = createEditButton(() => { - openTitleEditor({ - title: '修改阶段标题', - initialValue: ph.text, - onSubmit: (value) => { - const res = validateTitle(value); - if (!res.ok) return res; // 返回 {ok:false, message:'...'} => 在模态框里显示错误 - const oldH2 = (ph.text || "").trim(); - const newH2 = (res.value || "").trim(); - const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); - const hasH2 = (text, h2) => { - const re = new RegExp(`^##\\s*${escapeRegExp(h2)}\\s*$`, 'm'); - return re.test(text || ''); - }; - const replaceH2Once = (text, oldT, newT) => { - const re = new RegExp(`^##\\s*${escapeRegExp(oldT)}\\s*$`, 'm'); - return (text || '').replace(re, `## ${newT}`); - }; - ['lesson', 'prompt', 'score'].forEach((key) => { - const src = CURRENT.raw[key] || ''; - // 已经有 "## newH2" 就不动;否则把第一处 "## oldH2" 换成新标题 - if (!hasH2(src, newH2)) { - CURRENT.raw[key] = replaceH2Once(src, oldH2, newH2); - li2.textContent = res.value; // 合法后的值写回 - let confirmMsg = "是否立即保存?注意当前编辑内容"; - // —— 二次确认 —— // - if (window.confirm(confirmMsg)) { - saveUpdatedStep() - } - }else{ - // 已存在新标题:保持原文不变 - alert("新标题已存在") - } - }); - return { ok: true }; // 关闭模态框 - } - }); - }); - li2.appendChild(editBtn); - tree.appendChild(li2); - - // 渲染三级标题(步骤) - const steps = outline.stepsByPhase[ph.text] || []; - steps.forEach(st => { - const li3 = document.createElement('li'); - li3.className = 'lvl3'; - li3.textContent = `${st}`;//### - li3.dataset.phase = ph.text; - li3.dataset.step = st; - li3.onclick = () => { - loadStepToEditors(ph.text, st); - highlightActive(ph.text, st); - }; - tree.appendChild(li3); - }); - - - // 在二级标题下添加 "新增三级标题" 按钮 - const addStepBtn = document.createElement('button'); - addStepBtn.className = 'add-step-btn'; - addStepBtn.textContent = '新增步骤'; - addStepBtn.onclick = () => addStepToPhase(ph.text); - tree.appendChild(addStepBtn); + // 渲染三级标题(步骤) + const steps = outline.stepsByPhase[ph.text] || []; + steps.forEach(st => { + const li3 = document.createElement('li'); + li3.className = 'lvl3'; + li3.textContent = `${st}`;//### + li3.dataset.phase = ph.text; + li3.dataset.step = st; + li3.onclick = () => { + loadStepToEditors(ph.text, st); + highlightActive(ph.text, st); + }; + tree.appendChild(li3); }); - // 在大纲底部添加 "新增二级标题" 按钮 - const addPhaseBtn = document.createElement('button'); - addPhaseBtn.className = 'add-phase-btn'; - addPhaseBtn.textContent = '新增阶段'; - addPhaseBtn.onclick = () => addPhaseToOutline(); - tree.appendChild(addPhaseBtn); + + // 在二级标题下添加 "新增三级标题" 按钮 + const addStepBtn = document.createElement('button'); + addStepBtn.className = 'add-step-btn'; + addStepBtn.textContent = '新增步骤'; + addStepBtn.onclick = () => addStepToPhase(ph.text); + tree.appendChild(addStepBtn); + }); + + // 在大纲底部添加 "新增二级标题" 按钮 + const addPhaseBtn = document.createElement('button'); + addPhaseBtn.className = 'add-phase-btn'; + addPhaseBtn.textContent = '新增阶段'; + addPhaseBtn.onclick = () => addPhaseToOutline(); + tree.appendChild(addPhaseBtn); } // 新增二级标题(章节) @@ -281,14 +281,14 @@ function addPhaseToOutline() { CURRENT.raw.prompt = insertPhaseIntoMarkdown( CURRENT.raw.prompt, phaseName, PHASE_TEMPLATES.prompt ); - CURRENT.raw.score = insertPhaseIntoMarkdown( - CURRENT.raw.score, phaseName, PHASE_TEMPLATES.score + CURRENT.raw.score = insertPhaseIntoMarkdown( + CURRENT.raw.score, phaseName, PHASE_TEMPLATES.score ); // 3) 重新解析并构建统一大纲 CURRENT.parsed.lesson = parseHeadings(CURRENT.raw.lesson); CURRENT.parsed.prompt = parseHeadings(CURRENT.raw.prompt); - CURRENT.parsed.score = parseHeadings(CURRENT.raw.score); + CURRENT.parsed.score = parseHeadings(CURRENT.raw.score); CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); // 4) 重绘大纲 & 默认高亮新阶段(若你希望直接进入某个步骤,可在此自动新增第一个###) @@ -316,163 +316,163 @@ function insertPhaseIntoMarkdown(mdText, phaseText, skeleton) { return trimmed + block + '\n'; } function addStepToPhase(phaseText) { - const stepName = prompt('请输入新的步骤名称:'); - if (!stepName) return; + const stepName = prompt('请输入新的步骤名称:'); + if (!stepName) return; - CURRENT.raw.lesson = insertStepIntoMarkdown( - CURRENT.raw.lesson, phaseText, stepName, STEP_TEMPLATES.lesson - ); - CURRENT.raw.prompt = insertStepIntoMarkdown( - CURRENT.raw.prompt, phaseText, stepName, STEP_TEMPLATES.prompt - ); - CURRENT.raw.score = insertStepIntoMarkdown( - CURRENT.raw.score, phaseText, stepName, STEP_TEMPLATES.score - ); + CURRENT.raw.lesson = insertStepIntoMarkdown( + CURRENT.raw.lesson, phaseText, stepName, STEP_TEMPLATES.lesson + ); + CURRENT.raw.prompt = insertStepIntoMarkdown( + CURRENT.raw.prompt, phaseText, stepName, STEP_TEMPLATES.prompt + ); + CURRENT.raw.score = insertStepIntoMarkdown( + CURRENT.raw.score, phaseText, stepName, STEP_TEMPLATES.score + ); - // 重新解析三份文档并重建统一大纲 - CURRENT.parsed.lesson = parseHeadings(CURRENT.raw.lesson); - CURRENT.parsed.prompt = parseHeadings(CURRENT.raw.prompt); - CURRENT.parsed.score = parseHeadings(CURRENT.raw.score); - CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); + // 重新解析三份文档并重建统一大纲 + CURRENT.parsed.lesson = parseHeadings(CURRENT.raw.lesson); + CURRENT.parsed.prompt = parseHeadings(CURRENT.raw.prompt); + CURRENT.parsed.score = parseHeadings(CURRENT.raw.score); + CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); - // 重新渲染左侧树,并默认选中新加的步骤(加载到三个编辑器) - renderOutline(CURRENT.outline); - loadStepToEditors(phaseText, stepName); - highlightActive(phaseText, stepName); - } - function highlightActive(phase, step) { - document.querySelectorAll('#outline-tree li').forEach(li=>li.classList.remove('active')); - const target = Array.from(document.querySelectorAll('#outline-tree li.lvl3')) - .find(li => li.dataset.phase===phase && li.dataset.step===step); - if (target) target.classList.add('active'); - CURRENT.active.phase=phase - CURRENT.active.step=step - } - /** - * 在 mdText 中,将 `### stepName` 插入到 `## phaseText` 阶段的末尾。 - * 若 phase 不存在,则创建 `## phaseText` 再插入。 - * skeleton 为插入文本模板(含### 标题本身及正文)。 - */ - function insertStepIntoMarkdown(mdText, phaseText, stepName, skeleton, { allowDuplicate = false } = {}) { - const parsed = parseHeadings(mdText); - const { lines, tokens } = parsed; - // 找到目标阶段(##) - const phaseToken = tokens.find(t => t.level === 2 && t.text === phaseText); - - // 生成插入块(### 标题 + 正文骨架),不强制前后空行,由下面逻辑按需补 - const blockLines = [ - `### ${stepName}`, - '', // 标题后留一行 - ...(skeleton ? skeleton.trimEnd().split('\n') : []) - ]; - - // 如果没找到该阶段:在文末新建阶段并追加该步骤 - if (!phaseToken) { - const endIsBlank = mdText.endsWith('\n\n'); - const out = [ - mdText.trimEnd(), - endIsBlank ? '' : '', // 保持原末尾,不多加 - '', // 与原文隔一空行更安全 - `## ${phaseText}`, - '', // 阶段标题后空行 - ...blockLines, - '' // 末尾再空一行 - ].join('\n'); - return out; - } - - // 收集该阶段内的所有 ### 步骤 - const stepsInPhase = tokens.filter(t => - t.level === 3 && t.start > phaseToken.start && t.end <= phaseToken.end - ); - - // 已存在同名步骤? - const dup = stepsInPhase.some(s => s.text === stepName); - if (dup && !allowDuplicate) { - // 已有同名步骤则直接返回原文本(也可改为抛错/提示) - return mdText; - } - - // 计算插入位置: - // - 若有步骤:插入到最后一个步骤“之后” - // - 若无步骤:插入到该阶段“末尾”(不打乱引言) - let insertPos; // 行号(在其前插入) - if (stepsInPhase.length > 0) { - const lastStep = stepsInPhase[stepsInPhase.length - 1]; - insertPos = lastStep.end + 1; - } else { - insertPos = phaseToken.end + 1; - } - - // 按需补空行:在插入块前后各确保至少一条空行,避免粘连 - const beforeLine = insertPos - 1 >= 0 ? lines[insertPos - 1] : ''; - const needLeadingBlank = beforeLine && beforeLine.trim() !== ''; - - // 插入块组装 - const insertChunk = [ - ...(needLeadingBlank ? [''] : []), // 前置空行(若上一行非空) - ...blockLines, - '' // 块后空一行 - ]; - - const newLines = lines.slice(0, insertPos) - .concat(insertChunk) - .concat(lines.slice(insertPos)); - return newLines.join('\n'); - } - + // 重新渲染左侧树,并默认选中新加的步骤(加载到三个编辑器) + renderOutline(CURRENT.outline); + loadStepToEditors(phaseText, stepName); + highlightActive(phaseText, stepName); +} +function highlightActive(phase, step) { + document.querySelectorAll('#outline-tree li').forEach(li => li.classList.remove('active')); + const target = Array.from(document.querySelectorAll('#outline-tree li.lvl3')) + .find(li => li.dataset.phase === phase && li.dataset.step === step); + if (target) target.classList.add('active'); + CURRENT.active.phase = phase + CURRENT.active.step = step +} +/** +* 在 mdText 中,将 `### stepName` 插入到 `## phaseText` 阶段的末尾。 +* 若 phase 不存在,则创建 `## phaseText` 再插入。 +* skeleton 为插入文本模板(含### 标题本身及正文)。 +*/ +function insertStepIntoMarkdown(mdText, phaseText, stepName, skeleton, { allowDuplicate = false } = {}) { + const parsed = parseHeadings(mdText); + const { lines, tokens } = parsed; + // 找到目标阶段(##) + const phaseToken = tokens.find(t => t.level === 2 && t.text === phaseText); - const outlineAside = document.querySelector('.outline'); - const outlineTree = document.getElementById('outline-tree'); - const btnDeleteMode = document.getElementById('toggle-outline-delete'); + // 生成插入块(### 标题 + 正文骨架),不强制前后空行,由下面逻辑按需补 + const blockLines = [ + `### ${stepName}`, + '', // 标题后留一行 + ...(skeleton ? skeleton.trimEnd().split('\n') : []) + ]; - // 切换删除模式 - function setDeleteMode(enabled) { - btnDeleteMode.setAttribute('aria-pressed', String(enabled)); - outlineAside.classList.toggle('delete-mode', enabled); + // 如果没找到该阶段:在文末新建阶段并追加该步骤 + if (!phaseToken) { + const endIsBlank = mdText.endsWith('\n\n'); + const out = [ + mdText.trimEnd(), + endIsBlank ? '' : '', // 保持原末尾,不多加 + '', // 与原文隔一空行更安全 + `## ${phaseText}`, + '', // 阶段标题后空行 + ...blockLines, + '' // 末尾再空一行 + ].join('\n'); + return out; } - // 点击按钮:进入/退出删除模式 - btnDeleteMode.addEventListener('click', (e) => { - e.preventDefault(); - const enabled = btnDeleteMode.getAttribute('aria-pressed') !== 'true'; - setDeleteMode(enabled); - }); + // 收集该阶段内的所有 ### 步骤 + const stepsInPhase = tokens.filter(t => + t.level === 3 && t.start > phaseToken.start && t.end <= phaseToken.end + ); - // 工具:判断是否是 lvl2 / lvl3 节点(允许点到它的内部子元素) - function findDeletableNode(el) { - if (!el) return null; - if (el.classList?.contains('lvl2') || el.classList?.contains('lvl3')) return el; - return el.closest?.('.lvl2, .lvl3') || null; + // 已存在同名步骤? + const dup = stepsInPhase.some(s => s.text === stepName); + if (dup && !allowDuplicate) { + // 已有同名步骤则直接返回原文本(也可改为抛错/提示) + return mdText; } - // 事件代理:删除模式下,点击二/三级标题进行删除确认 - outlineTree.addEventListener('click', (e) => { - if (btnDeleteMode.getAttribute('aria-pressed') !== 'true') return; // 非删除模式,忽略 - const targetNode = findDeletableNode(e.target); - if (!targetNode) return; + // 计算插入位置: + // - 若有步骤:插入到最后一个步骤“之后” + // - 若无步骤:插入到该阶段“末尾”(不打乱引言) + let insertPos; // 行号(在其前插入) + if (stepsInPhase.length > 0) { + const lastStep = stepsInPhase[stepsInPhase.length - 1]; + insertPos = lastStep.end + 1; + } else { + insertPos = phaseToken.end + 1; + } - // 阻止与其他点击逻辑(比如展开/跳转)冲突 - e.preventDefault(); - e.stopPropagation(); + // 按需补空行:在插入块前后各确保至少一条空行,避免粘连 + const beforeLine = insertPos - 1 >= 0 ? lines[insertPos - 1] : ''; + const needLeadingBlank = beforeLine && beforeLine.trim() !== ''; - // 取层级与文案 - const level = targetNode.classList.contains('lvl2') ? 2 : 3; - // 标题文本:如果内部结构复杂,优先拿一个有标题含义的元素,否则退回整个文本 - const text = (targetNode.querySelector('.title-text')?.textContent - || targetNode.firstChild?.textContent - || targetNode.textContent || '').trim(); + // 插入块组装 + const insertChunk = [ + ...(needLeadingBlank ? [''] : []), // 前置空行(若上一行非空) + ...blockLines, + '' // 块后空一行 + ]; - const ok = window.confirm(`确认删除 ${level} 级标题「${text || '(未命名)'}」吗?`); - if (!ok) return; + const newLines = lines.slice(0, insertPos) + .concat(insertChunk) + .concat(lines.slice(insertPos)); + return newLines.join('\n'); +} - // 执行删除:从大纲中移除该节点 - targetNode.remove(); - // 可选:如果你需要同步删除到正文内容(CURRENT.raw.xxx),可以在这里调用你的同步逻辑 - // 例:把正文中第一处行首 "## 标题" 或 "### 标题" 删除(仅示例,按你项目规则调整): - deleteSectionInRaw(level, text); - }); +const outlineAside = document.querySelector('.outline'); +const outlineTree = document.getElementById('outline-tree'); +const btnDeleteMode = document.getElementById('toggle-outline-delete'); + +// 切换删除模式 +function setDeleteMode(enabled) { + btnDeleteMode.setAttribute('aria-pressed', String(enabled)); + outlineAside.classList.toggle('delete-mode', enabled); +} + +// 点击按钮:进入/退出删除模式 +btnDeleteMode.addEventListener('click', (e) => { + e.preventDefault(); + const enabled = btnDeleteMode.getAttribute('aria-pressed') !== 'true'; + setDeleteMode(enabled); +}); + +// 工具:判断是否是 lvl2 / lvl3 节点(允许点到它的内部子元素) +function findDeletableNode(el) { + if (!el) return null; + if (el.classList?.contains('lvl2') || el.classList?.contains('lvl3')) return el; + return el.closest?.('.lvl2, .lvl3') || null; +} + +// 事件代理:删除模式下,点击二/三级标题进行删除确认 +outlineTree.addEventListener('click', (e) => { + if (btnDeleteMode.getAttribute('aria-pressed') !== 'true') return; // 非删除模式,忽略 + const targetNode = findDeletableNode(e.target); + if (!targetNode) return; + + // 阻止与其他点击逻辑(比如展开/跳转)冲突 + e.preventDefault(); + e.stopPropagation(); + + // 取层级与文案 + const level = targetNode.classList.contains('lvl2') ? 2 : 3; + // 标题文本:如果内部结构复杂,优先拿一个有标题含义的元素,否则退回整个文本 + const text = (targetNode.querySelector('.title-text')?.textContent + || targetNode.firstChild?.textContent + || targetNode.textContent || '').trim(); + + const ok = window.confirm(`确认删除 ${level} 级标题「${text || '(未命名)'}」吗?`); + if (!ok) return; + + // 执行删除:从大纲中移除该节点 + targetNode.remove(); + + // 可选:如果你需要同步删除到正文内容(CURRENT.raw.xxx),可以在这里调用你的同步逻辑 + // 例:把正文中第一处行首 "## 标题" 或 "### 标题" 删除(仅示例,按你项目规则调整): + deleteSectionInRaw(level, text); +}); /** * 删除指定 level(2/3) 与 title 的小节: * 从 "^## title$" 或 "^### title$" 那一行开始, @@ -512,65 +512,73 @@ function deleteSectionInRaw(level, title) { - // 解析Markdown并定位章节/步骤 - function parseHeadings(mdText) { - const lines = mdText.split('\n'); - const tokens = []; - for (let i = 0; i < lines.length; i++) { - const m = lines[i].match(/^(#{1,3})\s+(.*)$/); - if (m) tokens.push({ level: m[1].length, text: m[2].trim(), line: i }); - } - // 确定每个heading的区间(到下一个同级或上级前一行) - for (let i = 0; i < tokens.length; i++) { - let j = i + 1; - while (j < tokens.length && tokens[j].level > tokens[i].level) j++; - let k = i + 1; - while (k < tokens.length && tokens[k].level > tokens[i].level) k++; - const nextSameOrHigher = k < tokens.length ? tokens[k].line : lines.length; - tokens[i].start = tokens[i].line; - tokens[i].end = nextSameOrHigher - 1; - } - return { lines, tokens }; +// 解析Markdown并定位章节/步骤 +function parseHeadings(mdText) { + const lines = mdText.split('\n'); + const tokens = []; + for (let i = 0; i < lines.length; i++) { + const m = lines[i].match(/^(#{1,3})\s+(.*)$/); + if (m) tokens.push({ level: m[1].length, text: m[2].trim(), line: i }); } + // 确定每个heading的区间(到下一个同级或上级前一行) + for (let i = 0; i < tokens.length; i++) { + let j = i + 1; + while (j < tokens.length && tokens[j].level > tokens[i].level) j++; + let k = i + 1; + while (k < tokens.length && tokens[k].level > tokens[i].level) k++; + const nextSameOrHigher = k < tokens.length ? tokens[k].line : lines.length; + tokens[i].start = tokens[i].line; + tokens[i].end = nextSameOrHigher - 1; + } + return { lines, tokens }; +} - // 从解析结果中抽取一个 heading 段落文本 - function sliceSection(parsed, headingText, level) { - const t = parsed.tokens.find(x => x.level === level && x.text === headingText); - if (!t) return ''; - return parsed.lines.slice(t.start, t.end + 1).join('\n'); +// 从解析结果中抽取一个 heading 段落文本 +function sliceSection(parsed, headingText, level) { + const t = parsed.tokens.find(x => x.level === level && x.text === headingText); + if (!t) return ''; + return parsed.lines.slice(t.start, t.end + 1).join('\n'); +} + +// 加载某个步骤到编辑器 +function buildOriginSaveUrl() { + const mid = typeof CURRENT.material_id === 'string' && CURRENT.material_id + || (window.material && window.material.material_id) || ''; + const ch = typeof CURRENT.chapter_name === 'string' && CURRENT.chapter_name + || (window.chapter && window.chapter.chapter_name) || ''; + const ln = typeof CURRENT.lesson_name === 'string' && CURRENT.lesson_name + || (window.lesson && window.lesson.lesson_name) || ''; + return `/api/materials/save/${encodeURIComponent(mid)}/${encodeURIComponent(ch)}/${encodeURIComponent(ln)}`; +} + +/** + * 把三份文档(lesson/prompt/score)的 "CDN 外链 + 原文内容" 一次性提交给源站。 + * @param {Object} payload 形如: + * { + * lesson: { cdn_link, content }, + * prompt: { cdn_link, content }, + * score: { cdn_link, content } + * } + */ +async function saveToOrigin(payload) { + const res = await fetch(buildOriginSaveUrl(), { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + // 你也可以改为 docs: [] 的数组结构,后端按需解析 + lesson: payload.lesson, + prompt: payload.prompt, + score: payload.score, + }), + credentials: 'include' // 若需要带 cookie/会话,保留;不需要可移除 + }); + if (!res.ok) { + const text = await res.text().catch(() => ''); + throw new Error(`保存失败(${res.status}): ${text}`); } - function buildOriginSaveUrl() { - return `/api/materials/save/${encodeURIComponent(CURRENT.material_id)}/${encodeURIComponent(CURRENT.chapter_name)}/${encodeURIComponent(CURRENT.lesson_name)}`; - } - - /** - * 把三份文档(lesson/prompt/score)的 "CDN 外链 + 原文内容" 一次性提交给源站。 - * @param {Object} payload 形如: - * { - * lesson: { cdn_link, content }, - * prompt: { cdn_link, content }, - * score: { cdn_link, content } - * } - */ - async function saveToOrigin(payload) { - const res = await fetch(buildOriginSaveUrl(), { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - // 你也可以改为 docs: [] 的数组结构,后端按需解析 - lesson: payload.lesson, - prompt: payload.prompt, - score: payload.score, - }), - credentials: 'include' // 若需要带 cookie/会话,保留;不需要可移除 - }); - if (!res.ok) { - const text = await res.text().catch(()=>''); - throw new Error(`保存失败(${res.status}): ${text}`); - } - return res.json().catch(()=> ({})); - } - + return res.json().catch(() => ({})); +} + @@ -607,7 +615,7 @@ function validateEditorsBeforeCloudSave(lEditor, pEditor, sEditor) { const buckets = { lesson: findIllegalHeadings(lEditor?.value || ""), prompt: findIllegalHeadings(pEditor?.value || ""), - score: findIllegalHeadings(sEditor?.value || ""), + score: findIllegalHeadings(sEditor?.value || ""), }; const parts = []; @@ -642,102 +650,102 @@ function sanitizeHeadingsBeyondFirst(text = "") { - // 保存某个步骤的更新 - async function saveUpdatedStep() { - const lEditor = document.getElementById('editor-lesson'); - const pEditor = document.getElementById('editor-prompt'); - const sEditor = document.getElementById('editor-score'); - const check = validateEditorsBeforeCloudSave(lEditor, pEditor, sEditor); +// 保存某个步骤的更新 +async function saveUpdatedStep() { + const lEditor = document.getElementById('editor-lesson'); + const pEditor = document.getElementById('editor-prompt'); + const sEditor = document.getElementById('editor-score'); + const check = validateEditorsBeforeCloudSave(lEditor, pEditor, sEditor); - if (!check.ok) { - alert("保存被阻止:" + check.report); - return ; - } - - // 获取原始的文档内容 - const originalLesson = CURRENT.raw.lesson; - const originalPrompt = CURRENT.raw.prompt; - const originalScore = CURRENT.raw.score; - - // 解析各自的文档结构 - const parsedLesson = parseHeadings(originalLesson); - const parsedPrompt = parseHeadings(originalPrompt); - const parsedScore = parseHeadings(originalScore); - phaseText = CURRENT.active.phase - stepText = CURRENT.active.step; - // 更新具体步骤 - const updatedLesson = updateMarkdownContent(parsedLesson, phaseText, stepText, lEditor.value); - const updatedPrompt = updateMarkdownContent(parsedPrompt, phaseText, stepText, pEditor.value); - const updatedScore = updateMarkdownContent(parsedScore, phaseText, stepText, sEditor.value); - - // PUT 请求保存更新 - try { - console.log("saveToOrigin", CURRENT.links.lesson, CURRENT.links.prompt, CURRENT.links.score); - console.log("updatedLesson", updatedLesson); - console.log("updatedPrompt", updatedPrompt); - console.log("updatedScore", updatedScore); - const result = await saveToOrigin({ - lesson: { cdn_link: CURRENT.links.lesson, content: updatedLesson }, - prompt: { cdn_link: CURRENT.links.prompt, content: updatedPrompt }, - score: { cdn_link: CURRENT.links.score, content: updatedScore }, - }); - //result 可包含新的 CDN 链接或版本号,更新到 CURRENT.links / UI - if (result?.links) { CURRENT.links = { ...CURRENT.links, ...result.links }; } - alert('已保存'); - CURRENT.active.lesson = lEditor.value - CURRENT.active.prompt = pEditor.value - CURRENT.active.score = sEditor.value - } - catch (err) { - console.error(err); - alert('保存失败,请重试'); - } - CURRENT.raw.lesson = updatedLesson - CURRENT.raw.prompt = updatedPrompt - CURRENT.raw.score = updatedScore - - CURRENT.parsed.lesson = parseHeadings(CURRENT.raw.lesson) - CURRENT.parsed.prompt = parseHeadings(CURRENT.raw.prompt) - CURRENT.parsed.score = parseHeadings(CURRENT.raw.score) - CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); - renderOutline(CURRENT.outline); - let btn = document.getElementById("tab-btn-lesson"); - btn.innerText = ClearModifiedStat(btn.innerText) - btn = document.getElementById("tab-btn-prompt"); - btn.innerText = ClearModifiedStat(btn.innerText) - btn = document.getElementById("tab-btn-score"); - btn.innerText = ClearModifiedStat(btn.innerText) + if (!check.ok) { + alert("保存被阻止:" + check.report); + return; } - // 更新对应步骤的内容 - function updateMarkdownContent(parsed, phaseText, stepText, newContent) { - const phaseIndex = parsed.tokens.findIndex(token => token.level === 2 && token.text === phaseText); - if (phaseIndex === -1) return parsed.lines.join('\n'); // 找不到阶段 + // 获取原始的文档内容 + const originalLesson = CURRENT.raw.lesson; + const originalPrompt = CURRENT.raw.prompt; + const originalScore = CURRENT.raw.score; - const stepIndex = parsed.tokens.findIndex(token => token.level === 3 && token.text === stepText); - if (stepIndex === -1) return parsed.lines.join('\n'); // 找不到步骤 + // 解析各自的文档结构 + const parsedLesson = parseHeadings(originalLesson); + const parsedPrompt = parseHeadings(originalPrompt); + const parsedScore = parseHeadings(originalScore); + phaseText = CURRENT.active.phase + stepText = CURRENT.active.step; + // 更新具体步骤 + const updatedLesson = updateMarkdownContent(parsedLesson, phaseText, stepText, lEditor.value); + const updatedPrompt = updateMarkdownContent(parsedPrompt, phaseText, stepText, pEditor.value); + const updatedScore = updateMarkdownContent(parsedScore, phaseText, stepText, sEditor.value); - const startLine = parsed.tokens[stepIndex].start; - const endLine = parsed.tokens[stepIndex].end; - - // 替换该步骤内容 - const lines = [...parsed.lines]; - console.log("lines length", lines.length); - console.log("startLine", startLine); - console.log("endLine", endLine); - console.log("endLine - startLine + 1", endLine - startLine + 1); - console.log("newContent", newContent); - lines.splice(startLine, endLine - startLine + 1, newContent); // 用新内容替换 - - return lines.join('\n'); // 返回更新后的完整内容 + // PUT 请求保存更新 + try { + console.log("saveToOrigin", CURRENT.links.lesson, CURRENT.links.prompt, CURRENT.links.score); + console.log("updatedLesson", updatedLesson); + console.log("updatedPrompt", updatedPrompt); + console.log("updatedScore", updatedScore); + const result = await saveToOrigin({ + lesson: { cdn_link: CURRENT.links.lesson, content: updatedLesson }, + prompt: { cdn_link: CURRENT.links.prompt, content: updatedPrompt }, + score: { cdn_link: CURRENT.links.score, content: updatedScore }, + }); + //result 可包含新的 CDN 链接或版本号,更新到 CURRENT.links / UI + if (result?.links) { CURRENT.links = { ...CURRENT.links, ...result.links }; } + alert('已保存'); + CURRENT.active.lesson = lEditor.value + CURRENT.active.prompt = pEditor.value + CURRENT.active.score = sEditor.value } + catch (err) { + console.error(err); + alert('保存失败,请重试'); + } + CURRENT.raw.lesson = updatedLesson + CURRENT.raw.prompt = updatedPrompt + CURRENT.raw.score = updatedScore + + CURRENT.parsed.lesson = parseHeadings(CURRENT.raw.lesson) + CURRENT.parsed.prompt = parseHeadings(CURRENT.raw.prompt) + CURRENT.parsed.score = parseHeadings(CURRENT.raw.score) + CURRENT.outline = buildUnifiedOutline(CURRENT.parsed.lesson, CURRENT.parsed.prompt, CURRENT.parsed.score); + renderOutline(CURRENT.outline); + let btn = document.getElementById("tab-btn-lesson"); + btn.innerText = ClearModifiedStat(btn.innerText) + btn = document.getElementById("tab-btn-prompt"); + btn.innerText = ClearModifiedStat(btn.innerText) + btn = document.getElementById("tab-btn-score"); + btn.innerText = ClearModifiedStat(btn.innerText) +} + +// 更新对应步骤的内容 +function updateMarkdownContent(parsed, phaseText, stepText, newContent) { + const phaseIndex = parsed.tokens.findIndex(token => token.level === 2 && token.text === phaseText); + if (phaseIndex === -1) return parsed.lines.join('\n'); // 找不到阶段 + + const stepIndex = parsed.tokens.findIndex(token => token.level === 3 && token.text === stepText); + if (stepIndex === -1) return parsed.lines.join('\n'); // 找不到步骤 + + const startLine = parsed.tokens[stepIndex].start; + const endLine = parsed.tokens[stepIndex].end; + + // 替换该步骤内容 + const lines = [...parsed.lines]; + console.log("lines length", lines.length); + console.log("startLine", startLine); + console.log("endLine", endLine); + console.log("endLine - startLine + 1", endLine - startLine + 1); + console.log("newContent", newContent); + lines.splice(startLine, endLine - startLine + 1, newContent); // 用新内容替换 + + return lines.join('\n'); // 返回更新后的完整内容 +} // 获取所有 textarea -function AddModifiedStat(str){ +function AddModifiedStat(str) { return str.charAt(str.length - 1) !== '*' ? str + '*' : str; } -function ClearModifiedStat(str){ - return str.charAt(str.length - 1) !== '*' ? str:str.slice(0, str.length-1); +function ClearModifiedStat(str) { + return str.charAt(str.length - 1) !== '*' ? str : str.slice(0, str.length - 1); } function ValidTextareaNoBlankHead(textarea) { let lines = textarea.value.split("\n"); @@ -753,57 +761,57 @@ const PREFIX = "### "; // 记录每个 textarea 最新的“标题内容”(不含前缀) const lastTitleMap = new Map(); - // 防止循环触发 - let isProgrammaticUpdate = false; - function getFirstLine(text) { - const idx = text.indexOf("\n"); - return idx === -1 ? text : text.slice(0, idx); - } - function setFirstLine(text, newFirstLine) { - const idx = text.indexOf("\n"); - return idx === -1 ? newFirstLine : newFirstLine + text.slice(idx); - } - // 工具:规范化首行 -> 始终以 '### ' 开头,并返回 { line, title } - function normalizeFirstLine(line) { - // 去掉前导的 # 和空格,保留后面的标题内容 - const title = line.replace(/^#+\s*/,''); // 如果用户没写#,也直接当作标题 - const normalized = PREFIX + title; - return { line: normalized, title }; - } - // 初始化 lastTitleMap(把当前值规范化一次) - editorsDoc.forEach(ed => { - const rawFirst = getFirstLine(ed.value || ""); - const { line, title } = normalizeFirstLine(rawFirst); - if (line !== rawFirst) { - isProgrammaticUpdate = true; - ed.value = setFirstLine(ed.value || "", line); - isProgrammaticUpdate = false; - } - lastTitleMap.set(ed, title); - }); - // 同步到其他两个 textarea 的首行 - function syncOthers(sourceEditor, newTitle) { +// 防止循环触发 +let isProgrammaticUpdate = false; +function getFirstLine(text) { + const idx = text.indexOf("\n"); + return idx === -1 ? text : text.slice(0, idx); +} +function setFirstLine(text, newFirstLine) { + const idx = text.indexOf("\n"); + return idx === -1 ? newFirstLine : newFirstLine + text.slice(idx); +} +// 工具:规范化首行 -> 始终以 '### ' 开头,并返回 { line, title } +function normalizeFirstLine(line) { + // 去掉前导的 # 和空格,保留后面的标题内容 + const title = line.replace(/^#+\s*/, ''); // 如果用户没写#,也直接当作标题 + const normalized = PREFIX + title; + return { line: normalized, title }; +} +// 初始化 lastTitleMap(把当前值规范化一次) +editorsDoc.forEach(ed => { + const rawFirst = getFirstLine(ed.value || ""); + const { line, title } = normalizeFirstLine(rawFirst); + if (line !== rawFirst) { isProgrammaticUpdate = true; - try { - editorsDoc.forEach(ed => { - if (ed === sourceEditor) return; - const first = getFirstLine(ed.value || ""); - const { line } = normalizeFirstLine(first); - const newLine = PREFIX + newTitle; - if (line !== newLine) { - ed.value = setFirstLine(ed.value || "", newLine); - } - lastTitleMap.set(ed, newTitle); - }); - } finally { - isProgrammaticUpdate = false; - } + ed.value = setFirstLine(ed.value || "", line); + isProgrammaticUpdate = false; } - + lastTitleMap.set(ed, title); +}); +// 同步到其他两个 textarea 的首行 +function syncOthers(sourceEditor, newTitle) { + isProgrammaticUpdate = true; + try { + editorsDoc.forEach(ed => { + if (ed === sourceEditor) return; + const first = getFirstLine(ed.value || ""); + const { line } = normalizeFirstLine(first); + const newLine = PREFIX + newTitle; + if (line !== newLine) { + ed.value = setFirstLine(ed.value || "", newLine); + } + lastTitleMap.set(ed, newTitle); + }); + } finally { + isProgrammaticUpdate = false; + } +} + // ==== 前置:你的三编辑器实例与 id 映射(按你实际为准)==== const ID_LESSON = 'editor-lesson'; const ID_PROMPT = 'editor-prompt'; -const ID_SCORE = 'editor-score'; +const ID_SCORE = 'editor-score'; // editors: { [textareaId]: EasyMDEInstance } const editorIds = [ID_LESSON, ID_PROMPT, ID_SCORE]; @@ -1003,7 +1011,7 @@ function loadStepToEditors(phaseText, stepText) { const lessonPhase = sliceSection(L, phaseText, 2) || CURRENT.raw.lesson; const promptPhase = sliceSection(P, phaseText, 2) || CURRENT.raw.prompt; - const scorePhase = sliceSection(S, phaseText, 2) || CURRENT.raw.score; + const scorePhase = sliceSection(S, phaseText, 2) || CURRENT.raw.score; // 在各 phase 片段里再找 ### step const subL = parseHeadings(lessonPhase); @@ -1018,12 +1026,12 @@ function loadStepToEditors(phaseText, stepText) { editors['editor-prompt'].value(pText); editors['editor-score'].value(sText); - CURRENT.active={ //保存打开时的三个文本 - phase:phaseText, - step:stepText, - lesson:lText, - prompt:pText, - score:sText + CURRENT.active = { //保存打开时的三个文本 + phase: phaseText, + step: stepText, + lesson: lText, + prompt: pText, + score: sText } let btn = document.getElementById("tab-btn-lesson"); btn.innerText = ClearModifiedStat(btn.innerText) @@ -1045,37 +1053,37 @@ document.addEventListener('click', (e) => { // 广播 tab 变更(告诉别人当前激活的 tab id / 以及要用哪个 editorId) const editorIdMap = { - 'tab-lesson' : 'editor-lesson', - 'tab-prompt' : 'editor-prompt', - 'tab-score' : 'editor-score', + 'tab-lesson': 'editor-lesson', + 'tab-prompt': 'editor-prompt', + 'tab-score': 'editor-score', }; const activeBtnId = e.target.id; // 如 'tab-btn-lesson' const editorId = activeBtnId === 'tab-btn-lesson' ? 'editor-lesson' : - activeBtnId === 'tab-btn-prompt' ? 'editor-prompt' : - 'editor-score'; + activeBtnId === 'tab-btn-prompt' ? 'editor-prompt' : + 'editor-score'; document.dispatchEvent(new CustomEvent('tab:change', { detail: { tabId: id, editorId } })); } }); - - // 保存全部:将三个编辑器中的文本保存回相应的 markdown 文件 - document.getElementById('save-all-btn')?.addEventListener('click', async () => { - - try { - // 将各自的步骤更新保存回文件 - await saveUpdatedStep(); - } catch (err) { - console.error('保存错误:', err); - } - }); - - const STEP_TEMPLATES = { - lesson: `在这里编写本步骤的课程内容...`, - prompt: `#### 指令 +// 保存全部:将三个编辑器中的文本保存回相应的 markdown 文件 +document.getElementById('save-all-btn')?.addEventListener('click', async () => { + + try { + // 将各自的步骤更新保存回文件 + await saveUpdatedStep(); + } catch (err) { + console.error('保存错误:', err); + } +}); + + +const STEP_TEMPLATES = { + lesson: `在这里编写本步骤的课程内容...`, + prompt: `#### 指令 请严格遵循本步骤的教学目标,输出所需内容。 #### 约束 @@ -1085,7 +1093,7 @@ document.addEventListener('click', (e) => { #### 输出格式 - 小结 - 关键要点(列表)`, - score: `#### 评分标准 + score: `#### 评分标准 - 维度A:... - 维度B:... - 维度C:... @@ -1093,13 +1101,13 @@ document.addEventListener('click', (e) => { #### 打分 请输出 JSON: {"score": 0-100, "reasons": ["...","..."]}` - }; - const PHASE_TEMPLATES = { - lesson: `### 新步骤 +}; +const PHASE_TEMPLATES = { + lesson: `### 新步骤 本阶段描述:请在此补充阶段说明。 `, - prompt: `### 新步骤 + prompt: `### 新步骤 阶段提示 为该阶段的任务撰写总体引导。 @@ -1107,13 +1115,13 @@ document.addEventListener('click', (e) => { - 输出语言:中文 `, - score: `### 新步骤 + score: `### 新步骤 阶段评分参考 - 维度A:... - 维度B:... ` - }; - +}; + @@ -1174,7 +1182,7 @@ function buildGlobalStepIndex(lines, tokens) { const phases = tokens.filter(t => t.level === 2); for (let i = 0; i < phases.length; i++) { const ph = phases[i]; - const phNextStart = (i + 1 < phases.length) ? phases[i+1].start : lines.length; + const phNextStart = (i + 1 < phases.length) ? phases[i + 1].start : lines.length; // 该阶段内的所有 ###: const steps = tokens.filter(t => t.level === 3 && t.start > ph.start && t.start < phNextStart); for (const st of steps) { @@ -1186,14 +1194,14 @@ function buildGlobalStepIndex(lines, tokens) { } - // ===== 选择器与小工具 ===== +// ===== 选择器与小工具 ===== const treeEl = document.getElementById('outline-tree'); const toggleOutlineBtn = document.getElementById('toggle-outline-reorder'); const isLvl1 = el => el.classList?.contains('lvl1'); const isLvl2 = el => el.classList?.contains('lvl2'); const isLvl3 = el => el.classList?.contains('lvl3'); -const isBtn = el => el.tagName === 'BUTTON'; // 新增阶段/步骤的按钮 +const isBtn = el => el.tagName === 'BUTTON'; // 新增阶段/步骤的按钮 // 取一个阶段块(从 phaseLi 开始,到下一个 lvl2 之前的所有节点) function blockOfPhase(phaseLi) { const block = [phaseLi]; @@ -1412,7 +1420,7 @@ function syncOutlineFromDOM() { for (const el of lis) { if (isLvl1(el)) continue; // 忽略主题 - if (isBtn(el)) continue; // 忽略新增按钮(如果按钮是 li 以外的元素) + if (isBtn(el)) continue; // 忽略新增按钮(如果按钮是 li 以外的元素) if (isLvl2(el)) { currentPhase = el.textContent.trim(); @@ -1442,23 +1450,23 @@ async function persistOutlineOrderByRewriting() { // 1) 按 outline 重写三份原文 const newLesson = rewriteMarkdownByOutline(CURRENT.raw.lesson, CURRENT.outline); const newPrompt = rewriteMarkdownByOutline(CURRENT.raw.prompt, CURRENT.outline); - const newScore = rewriteMarkdownByOutline(CURRENT.raw.score, CURRENT.outline); + const newScore = rewriteMarkdownByOutline(CURRENT.raw.score, CURRENT.outline); // 2) 更新本地内存(可选:重新解析 & 重绘) CURRENT.raw.lesson = newLesson; CURRENT.raw.prompt = newPrompt; - CURRENT.raw.score = newScore; + CURRENT.raw.score = newScore; CURRENT.parsed.lesson = parseHeadings(newLesson); CURRENT.parsed.prompt = parseHeadings(newPrompt); - CURRENT.parsed.score = parseHeadings(newScore); + CURRENT.parsed.score = parseHeadings(newScore); // 可选:renderOutline(CURRENT.outline); // outline 顺序已是最新 console.log(CURRENT.outline); console.log(CURRENT.raw.lesson); await saveToOrigin({ lesson: { cdn_link: CURRENT.links.lesson, content: newLesson }, prompt: { cdn_link: CURRENT.links.prompt, content: newPrompt }, - score: { cdn_link: CURRENT.links.score, content: newScore }, + score: { cdn_link: CURRENT.links.score, content: newScore }, }); } /** @@ -1532,14 +1540,14 @@ function rewriteMarkdownByOutline(md, outline) { } const body = [h2Line, '', intro].join('\n').trimEnd() + '\n\n' - + orderedParts.join('\n\n').trimEnd() + '\n\n'; + + orderedParts.join('\n\n').trimEnd() + '\n\n'; newPhaseBlocks.push(body); } else { // 新增的阶段(原文里不存在):生成一个空阶段骨架 + 目标步骤骨架 const wantSteps = outline.stepsByPhase[phName] || []; const orderedParts = wantSteps.map(st => `### ${st}\n\n`); const body = [h2Line, '', /* intro */ ''].join('\n').trimEnd() + '\n\n' - + orderedParts.join('\n\n').trimEnd() + '\n\n'; + + orderedParts.join('\n\n').trimEnd() + '\n\n'; newPhaseBlocks.push(body); } }