233 lines
7.1 KiB
JavaScript
233 lines
7.1 KiB
JavaScript
const SECTION_LABELS = {
|
|
meta: "元数据",
|
|
opening: "默认开场",
|
|
task: "任务",
|
|
principles: "原则",
|
|
probe: "追问",
|
|
output: "产物形状",
|
|
checklist: "自检",
|
|
examples: "示例",
|
|
};
|
|
|
|
const SECTION_ORDER = [
|
|
"meta",
|
|
"opening",
|
|
"task",
|
|
"principles",
|
|
"probe",
|
|
"output",
|
|
"checklist",
|
|
"examples",
|
|
];
|
|
|
|
const STATUS_LABELS = {
|
|
ready: "已写",
|
|
partial: "部分",
|
|
skeleton: "骨架",
|
|
missing: "缺文件",
|
|
};
|
|
|
|
/** @type {Array<any>} */
|
|
let modulesCache = [];
|
|
let activeId = "";
|
|
let statusFilter = "";
|
|
let searchQuery = "";
|
|
|
|
function escapeHtml(s) {
|
|
return String(s ?? "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """);
|
|
}
|
|
|
|
function setError(msg) {
|
|
const el = document.getElementById("mod-error");
|
|
if (!msg) {
|
|
el.hidden = true;
|
|
el.textContent = "";
|
|
return;
|
|
}
|
|
el.hidden = false;
|
|
el.textContent = msg;
|
|
}
|
|
|
|
function filteredModules() {
|
|
const q = searchQuery.trim().toLowerCase();
|
|
return modulesCache.filter((m) => {
|
|
if (statusFilter && m.status !== statusFilter) return false;
|
|
if (!q) return true;
|
|
const hay = `${m.name} ${m.id} ${m.declaration} ${m.artifact}`.toLowerCase();
|
|
return hay.includes(q);
|
|
});
|
|
}
|
|
|
|
function renderList() {
|
|
const list = document.getElementById("mod-list");
|
|
const items = filteredModules();
|
|
if (items.length === 0) {
|
|
list.innerHTML = `<p class="mod-empty" style="padding:8px">无匹配项</p>`;
|
|
return;
|
|
}
|
|
list.innerHTML = items
|
|
.map(
|
|
(m) => `<button type="button" class="mod-item${m.id === activeId ? " active" : ""}" data-id="${escapeHtml(m.id)}">
|
|
<span class="mod-item-name">
|
|
<span>${escapeHtml(m.name)}</span>
|
|
<span class="mod-dot ${escapeHtml(m.status)}" title="${escapeHtml(STATUS_LABELS[m.status] ?? m.status)}"></span>
|
|
</span>
|
|
<p class="mod-item-decl">${escapeHtml(m.declaration)}</p>
|
|
</button>`,
|
|
)
|
|
.join("");
|
|
}
|
|
|
|
function metaField(meta, key) {
|
|
if (!meta || meta[key] == null) return "";
|
|
const v = meta[key];
|
|
return typeof v === "string" ? v.trim() : String(v);
|
|
}
|
|
|
|
function renderDetail(detail) {
|
|
const title = document.getElementById("panel-title");
|
|
const sub = document.getElementById("panel-subtitle");
|
|
const badge = document.getElementById("status-badge");
|
|
const metaBar = document.getElementById("meta-bar");
|
|
const host = document.getElementById("mod-detail");
|
|
|
|
title.textContent = detail.name;
|
|
sub.textContent = `${detail.id} · ${detail.artifact}`;
|
|
|
|
badge.hidden = false;
|
|
badge.className = `mod-badge ${detail.status}`;
|
|
badge.textContent = STATUS_LABELS[detail.status] ?? detail.status;
|
|
|
|
const when = metaField(detail.meta, "when");
|
|
const whenNot = metaField(detail.meta, "when_not");
|
|
const boundary = metaField(detail.meta, "boundary");
|
|
metaBar.hidden = !(when || whenNot || boundary);
|
|
if (!metaBar.hidden) {
|
|
const bits = [];
|
|
if (when) bits.push(`<strong>何时选用</strong> ${escapeHtml(when).replace(/\n/g, "<br>")}`);
|
|
if (whenNot) bits.push(`<strong>何时不选</strong> ${escapeHtml(whenNot).replace(/\n/g, "<br>")}`);
|
|
if (boundary) bits.push(`<strong>边界</strong> ${escapeHtml(boundary).replace(/\n/g, "<br>")}`);
|
|
metaBar.innerHTML = bits.join("<hr style='border:none;border-top:1px solid var(--st-border);margin:10px 0'>");
|
|
}
|
|
|
|
const present = SECTION_ORDER.filter((id) => detail.sections?.[id]);
|
|
const nav =
|
|
present.length > 0
|
|
? `<nav class="mod-section-nav">${present
|
|
.map(
|
|
(id) =>
|
|
`<a href="#sec-${id}">${escapeHtml(SECTION_LABELS[id] ?? id)}</a>`,
|
|
)
|
|
.join("")}</nav>`
|
|
: "";
|
|
|
|
const sectionsHtml = present
|
|
.map((id) => {
|
|
const open = id === "task" || id === "output" || id === "opening" ? " open" : "";
|
|
return `<details class="mod-section"${open} id="sec-${id}">
|
|
<summary>${escapeHtml(SECTION_LABELS[id] ?? id)}</summary>
|
|
<div class="mod-section-body"><pre>${escapeHtml(detail.sections[id])}</pre></div>
|
|
</details>`;
|
|
})
|
|
.join("");
|
|
|
|
host.innerHTML = `
|
|
<div class="mod-summary">
|
|
<p class="mod-decl">${escapeHtml(detail.declaration)}</p>
|
|
<dl>
|
|
<dt>产物 tag</dt><dd><code>${escapeHtml(detail.artifact)}</code></dd>
|
|
<dt>已有块</dt><dd>${present.map((id) => SECTION_LABELS[id] ?? id).join(" · ") || "—"}</dd>
|
|
</dl>
|
|
</div>
|
|
${nav}
|
|
${sectionsHtml || `<p class="mod-empty">尚无可切割的方法块（可能仍是骨架）。</p>`}
|
|
<button type="button" class="mod-raw-toggle" id="btn-raw">显示原始 prompt.md</button>
|
|
<pre class="mod-raw" id="raw-view" hidden></pre>
|
|
`;
|
|
|
|
const btn = document.getElementById("btn-raw");
|
|
const raw = document.getElementById("raw-view");
|
|
btn.addEventListener("click", () => {
|
|
const showing = !raw.hidden;
|
|
raw.hidden = showing;
|
|
if (!showing) {
|
|
raw.textContent = detail.raw || "（空）";
|
|
btn.textContent = "隐藏原始 prompt.md";
|
|
} else {
|
|
btn.textContent = "显示原始 prompt.md";
|
|
}
|
|
});
|
|
}
|
|
|
|
async function selectModule(id) {
|
|
if (!id) return;
|
|
activeId = id;
|
|
renderList();
|
|
setError("");
|
|
const host = document.getElementById("mod-detail");
|
|
host.innerHTML = `<p class="mod-empty">加载中…</p>`;
|
|
try {
|
|
const res = await fetch(`/api/modules/${encodeURIComponent(id)}`);
|
|
if (!res.ok) {
|
|
const err = await res.json().catch(() => ({}));
|
|
throw new Error(err.error || `HTTP ${res.status}`);
|
|
}
|
|
const detail = await res.json();
|
|
renderDetail(detail);
|
|
history.replaceState(null, "", `#${encodeURIComponent(id)}`);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
host.innerHTML = `<p class="mod-empty">加载失败</p>`;
|
|
}
|
|
}
|
|
|
|
async function boot() {
|
|
setError("");
|
|
try {
|
|
const res = await fetch("/api/modules");
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const data = await res.json();
|
|
modulesCache = data.modules || [];
|
|
document.getElementById("pack-label").textContent =
|
|
`配方包 · ${data.skillPackId || "—"} · ${modulesCache.length} 项`;
|
|
renderList();
|
|
|
|
const fromHash = decodeURIComponent((location.hash || "").replace(/^#/, ""));
|
|
const initial =
|
|
(fromHash && modulesCache.find((m) => m.id === fromHash)?.id) ||
|
|
modulesCache.find((m) => m.status === "ready")?.id ||
|
|
modulesCache[0]?.id;
|
|
if (initial) await selectModule(initial);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
document.getElementById("pack-label").textContent = "加载失败";
|
|
}
|
|
}
|
|
|
|
document.getElementById("mod-list").addEventListener("click", (e) => {
|
|
const btn = e.target.closest(".mod-item");
|
|
if (!btn) return;
|
|
selectModule(btn.dataset.id);
|
|
});
|
|
|
|
document.getElementById("mod-search").addEventListener("input", (e) => {
|
|
searchQuery = e.target.value || "";
|
|
renderList();
|
|
});
|
|
|
|
document.getElementById("status-filters").addEventListener("click", (e) => {
|
|
const chip = e.target.closest(".mod-chip");
|
|
if (!chip) return;
|
|
statusFilter = chip.dataset.status || "";
|
|
for (const c of document.querySelectorAll(".mod-chip")) {
|
|
c.classList.toggle("active", c === chip);
|
|
}
|
|
renderList();
|
|
});
|
|
|
|
boot();
|