@chinhae/atw-cli 0.2.9 → 0.3.0

package/dist/templates/common/bundled-skills/oxy-learning-hub/assets/course.js

@@ -1,184 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   Oxy Learning Hub · 课程共享脚本
-   由 lesson-template.html 通过 {{ASSET_PREFIX}}course.js 引入。
-   依赖的约定（模板与课程正文需保持一致）：
-     #theme-toggle / #theme-label   主题切换按钮
-     #lesson-status / #complete-lesson   完成状态
-     #progress-line / #read-fill / #read-label   阅读进度
-     #toc-list                      目录容器（条目按正文小节自动生成）
-     main section[id] > h2          目录来源
-     [data-quiz] .quiz-option       互动选择题
-     .copy-response[data-target]    开放题复制
-   ───────────────────────────────────────────────────────────── */
-(() => {
-	const root = document.documentElement;
-
-	/* ── 主题切换 ────────────────────────────────────────
-	   首帧的主题由模板 <head> 中的内联脚本决定，避免闪色；
-	   这里只负责按钮状态与后续切换。 */
-	const toggle = document.querySelector("#theme-toggle");
-	const themeLabel = document.querySelector("#theme-label");
-
-	const renderTheme = () => {
-		if (!toggle) return;
-		const toDark = root.dataset.theme !== "dark"; // 点击后要切到的目标
-		if (themeLabel) themeLabel.textContent = toDark ? "深色" : "浅色";
-		toggle.setAttribute(
-			"aria-label",
-			toDark ? "切换到深色主题" : "切换到浅色主题",
-		);
-	};
-
-	if (toggle) {
-		toggle.addEventListener("click", () => {
-			root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
-			localStorage.setItem("oxy-theme", root.dataset.theme);
-			renderTheme();
-		});
-		window
-			.matchMedia("(prefers-color-scheme: dark)")
-			.addEventListener("change", (e) => {
-				if (localStorage.getItem("oxy-theme")) return; // 手动选过就不再跟随系统
-				root.dataset.theme = e.matches ? "dark" : "light";
-				renderTheme();
-			});
-		renderTheme();
-	}
-
-	/* ── 完成状态 ──────────────────────────────────────── */
-	const key = `oxy-learning:${location.pathname}:${document.title}`;
-	const status = document.querySelector("#lesson-status");
-	const complete = document.querySelector("#complete-lesson");
-
-	const renderCompletion = () => {
-		if (!status || !complete) return;
-		const done = localStorage.getItem(key) === "complete";
-		const dot = status.querySelector(".dot") ?? document.createElement("span");
-		dot.className = "dot";
-		status.replaceChildren(dot, done ? "已完成，等待你的回答" : "尚未标记完成");
-		status.classList.toggle("is-done", done);
-		complete.textContent = done ? "取消完成标记" : "标记本课已完成";
-	};
-
-	if (complete) {
-		complete.addEventListener("click", () => {
-			if (localStorage.getItem(key) === "complete")
-				localStorage.removeItem(key);
-			else localStorage.setItem(key, "complete");
-			renderCompletion();
-		});
-		renderCompletion();
-	}
-
-	/* ── 目录：按正文小节自动生成，课程不必手写一份 ──── */
-	const tocList = document.querySelector("#toc-list");
-	const sections = [...document.querySelectorAll("main section[id]")];
-
-	if (tocList) {
-		sections.forEach((section) => {
-			const heading = section.querySelector("h2");
-			if (!heading) return;
-			const num = heading.querySelector(".n")?.textContent.trim() ?? "";
-			const text = [...heading.childNodes]
-				.filter(
-					(node) => !(node.nodeType === 1 && node.classList.contains("n")),
-				)
-				.map((node) => node.textContent)
-				.join("")
-				.trim();
-
-			const link = document.createElement("a");
-			link.href = `#${section.id}`;
-			link.textContent = num ? `${num}　${text}` : text;
-
-			const item = document.createElement("li");
-			item.append(link);
-			tocList.append(item);
-		});
-	}
-
-	const tocLinks = [...document.querySelectorAll("#toc-list a")];
-	if (tocLinks.length) {
-		const observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry) => {
-					if (!entry.isIntersecting) return;
-					tocLinks.forEach((link) =>
-						link.classList.toggle(
-							"is-active",
-							link.getAttribute("href") === `#${entry.target.id}`,
-						),
-					);
-				});
-			},
-			{ rootMargin: "-88px 0px -70% 0px" },
-		);
-		sections.forEach((section) => observer.observe(section));
-	}
-
-	/* ── 阅读进度 ──────────────────────────────────────── */
-	const line = document.querySelector("#progress-line");
-	const fill = document.querySelector("#read-fill");
-	const readLabel = document.querySelector("#read-label");
-
-	const renderProgress = () => {
-		const scrollable =
-			document.documentElement.scrollHeight - window.innerHeight;
-		const pct =
-			scrollable > 0
-				? Math.min(100, Math.round((window.scrollY / scrollable) * 100))
-				: 0;
-		if (line) line.style.width = `${pct}%`;
-		if (fill) fill.style.width = `${pct}%`;
-		if (readLabel) readLabel.textContent = `已读 ${pct}%`;
-	};
-	window.addEventListener("scroll", renderProgress, { passive: true });
-	renderProgress();
-
-	/* ── 互动选择题 ────────────────────────────────────── */
-	document.querySelectorAll("[data-quiz]").forEach((quiz) => {
-		const feedback = quiz.querySelector(".quiz-feedback");
-		quiz.querySelectorAll(".quiz-option").forEach((option) => {
-			option.addEventListener("click", () => {
-				const correct = option.dataset.correct === "true";
-				option.classList.toggle("is-correct", correct);
-				option.classList.toggle("is-wrong", !correct);
-				if (feedback) {
-					feedback.className = `quiz-feedback ${correct ? "ok" : "no"}`;
-					feedback.textContent = `${correct ? "回答正确。" : "再想一想。"} ${option.dataset.explanation || ""}`;
-				}
-				if (correct) {
-					quiz.querySelectorAll(".quiz-option").forEach((item) => {
-						item.disabled = true;
-					});
-				}
-			});
-		});
-	});
-
-	/* ── 开放题复制 ────────────────────────────────────── */
-	document.querySelectorAll(".copy-response").forEach((button) => {
-		const reset = () => {
-			button.textContent = "复制我的回答";
-		};
-		button.addEventListener("click", async () => {
-			const field = document.querySelector(
-				`#${CSS.escape(button.dataset.target)}`,
-			);
-			if (!field) return;
-			if (!field.value.trim()) {
-				button.textContent = "还没写内容";
-				setTimeout(reset, 1600);
-				return;
-			}
-			try {
-				await navigator.clipboard.writeText(field.value);
-			} catch {
-				field.select();
-				document.execCommand("copy");
-			}
-			button.textContent = "已复制，粘贴回对话即可";
-			setTimeout(reset, 2200);
-		});
-	});
-})();

package/dist/templates/common/bundled-skills/oxy-learning-hub/assets/lesson-template.html

@@ -1,125 +0,0 @@
-<!doctype html>
-<html lang="zh-CN" data-theme="light">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
-    <title>{{TITLE}}</title>
-    <script>
-      // 必须内联且前置：先定主题再渲染，避免首帧闪白/闪黑
-      (() => {
-        const saved = localStorage.getItem("oxy-theme");
-        const sys = window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light";
-        document.documentElement.dataset.theme = saved || sys;
-      })();
-    </script>
-    <link rel="stylesheet" href="{{ASSET_PREFIX}}course.css" />
-  </head>
-  <body>
-    <header class="topbar" data-od-id="topbar">
-      <div class="topbar-inner">
-        <div class="brand">
-          <span class="brand-mark">O</span>Oxy Learning Hub
-          <span class="crumb">{{CRUMB}}</span>
-        </div>
-        <div class="top-right">
-          <button
-            class="theme-toggle"
-            id="theme-toggle"
-            type="button"
-            aria-label="切换到深色主题"
-          >
-            <svg
-              class="icon-sun"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.8"
-              stroke-linecap="round"
-              aria-hidden="true"
-            >
-              <circle cx="12" cy="12" r="4.2" />
-              <path
-                d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6"
-              />
-            </svg>
-            <svg
-              class="icon-moon"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.8"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-            >
-              <path
-                d="M20.5 14.4A8.6 8.6 0 1 1 9.6 3.5a6.9 6.9 0 0 0 10.9 10.9Z"
-              />
-            </svg>
-            <span id="theme-label">深色</span>
-          </button>
-          <div class="status" id="lesson-status" aria-live="polite">
-            <span class="dot"></span>尚未标记完成
-          </div>
-        </div>
-      </div>
-      <div class="progress-track">
-        <div class="progress-line" id="progress-line"></div>
-      </div>
-    </header>
-
-    <div class="layout">
-      <!-- 目录条目由 course.js 依据正文 section[id] 自动生成，课程不需要手写 -->
-      <aside class="toc" data-od-id="toc">
-        <p class="toc-head">本课结构</p>
-        <ol id="toc-list"></ol>
-        <div class="toc-meter">
-          <span id="read-label">已读 0%</span>
-          <div class="bar"><div class="fill" id="read-fill"></div></div>
-        </div>
-      </aside>
-
-      <main data-od-id="lesson">
-        <p class="kicker">{{KICKER}}</p>
-        <h1>{{TITLE}}</h1>
-        <p class="subtitle">{{SUBTITLE}}</p>
-        <div class="facts">{{FACTS}}</div>
-
-        <!--
-          {{CONTENT}}：本课正文，按 teaching-mode.md 的结构写成若干
-          <section id="s-xxx"><h2><span class="n">01</span>小标题</h2>…</section>，
-          编号建议 01–07（目标 / 旧知识提取 / 核心解释 / 示例 / 先预测再揭晓 /
-          练习 / 来源），导航固定为下面的 08。
-        -->
-        {{CONTENT}}
-
-        <section id="s-nav" data-od-id="section-nav">
-          <h2><span class="n">08</span>课程导航</h2>
-          {{NAVIGATION}}
-        </section>
-
-        <div class="note" data-od-id="continue-chat" style="margin-top: 34px">
-          <span class="label">回到对话继续</span>
-          {{CONTINUE}}
-        </div>
-
-        <div class="finish" data-od-id="finish">
-          <button class="btn-primary" id="complete-lesson" type="button">
-            标记本课已完成
-          </button>
-          <p>
-            标记只记录进度，不代表已经掌握——真正的判断依据是你在对话里的表述。
-          </p>
-        </div>
-      </main>
-
-      <!-- {{ASIDE}}：随读卡片，若干个 <div class="aside-card"><h4>…</h4>…</div> -->
-      <aside class="aside-notes" data-od-id="aside-notes">{{ASIDE}}</aside>
-    </div>
-
-    <script defer src="{{ASSET_PREFIX}}course.js"></script>
-  </body>
-</html>