Title: 

URL Source: https://clonewars.rushos.com/app.js

Markdown Content:
/* AI Clone Wars 前端 v2: 战场图谱 / 排行榜 / 机会板 + 筛选 + 被克隆进度 + 提交 */
const API = location.hostname === "localhost" || location.hostname === "127.0.0.1"
  ? "https://clonewars.rushos.com" : ""; // 本地预览时提交打到线上

const CATMETA = {
  ai: { title: "AI 战场", sub: "a16z Gen AI 100 · 第6期 (2026-03)" },
  traffic: { title: "流量战场", sub: "Cloudflare Radar 全球 Top 1000 域名" },
  other: { title: "其他战场", sub: "两榜之外的经典克隆战争（遗留保留区）" },
};
let DATA = null, LB = null, OPS = null;
let state = { view: "map", cat: "all", q: "", onlyCurated: true, status: null, family: null, ncat: null };
const NCAT_ZH = {};
let ALL_ITEMS = [];
const EXPANDED = new Set();
const NAME_BY_ID = {};

const $ = (s, el) => (el || document).querySelector(s);
const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
const fmtStars = (n) => (n >= 1000 ? (n / 1000).toFixed(n >= 10000 ? 0 : 1) + "k" : n);
const tierWord = (p) => p >= 100 ? "已被超越/开源" : p >= 80 ? "主流可迁移" : p >= 60 ? "小规模生产" : p >= 40 ? "自用可行" : p >= 20 ? "Demo 可跑" : p > 0 ? "萌芽" : "空白";

function starGlyphs(progress) {
  const half = Math.round(progress / 10);
  const full = Math.floor(half / 2), hasHalf = half % 2 === 1;
  const off = 5 - full - (hasHalf ? 1 : 0);
  return "★".repeat(full) + (hasHalf ? "½" : "") + (off > 0 ? `<span class="off">${"★".repeat(off)}</span>` : "");
}

/* ---------- 战场卡 ---------- */
function clonedBar(b) {
  if (b.no_battlefield) return "";
  const p = b.cloned || 0;
  const cls = p >= 60 ? "" : p >= 30 ? "mid" : "low";
  return `<div class="cloned">
    <span class="clabel">被克隆 <b>${p}%</b></span>
    <div class="cbar"><i class="${cls}" style="width:${Math.max(p, 2)}%"></i></div>
    <span class="ctier">${tierWord(p)} · ${b.clone_count} 个项目</span>
  </div>`;
}

function entryHtml(e) {
  const gh = `https://github.com/${e.repo}`;
  const meter = e.relation === "self"
    ? `<div class="meter"><span class="selfbadge">本体开源</span></div>`
    : `<div class="meter"><span class="stars">${starGlyphs(e.progress)}</span><div class="bar"><i style="width:${e.progress}%"></i></div><span class="pct">${e.progress}%${e.relation === "part" ? " · 部件" : ""}${e.unverified ? " · 未校验" : ""}</span></div>`;
  const badges = [
    `<span class="badge ${e.relation}">${{ clone: "克隆", adjacent: "同生态位", self: "本体开源", part: "部件" }[e.relation]}</span>`,
    e.archived ? `<span class="badge arch">archived</span>` : "",
    e.rechecked ? `<span class="badge fresh" title="版本已联网复核">✓ ${esc(e.rechecked)} 核</span>` : "",
  ].join(" ");
  return `<div class="entry">${meter}<div>
    <div class="erow"><a class="repo" href="${gh}" target="_blank" rel="noopener">${esc(e.repo)}</a>
      <span class="gh${e.low_star ? " lowstar" : ""}">★ ${fmtStars(e.stars ?? 0)}${e.low_star ? " ·未过千" : ""}</span>${e.language ? `<span class="gh">${esc(e.language)}</span>` : ""}${badges}</div>
    <div class="evi">${esc(e.evidence)}${e.scope_note ? ` <span class="scope">〔${esc(e.scope_note)}〕</span>` : ""}</div>
  </div></div>`;
}

function bfHtml(b) {
  const chips = [
    b.family ? `<span class="chip fam">${esc(b.family)}</span>` : "",
    b.parent ? `<span class="chip parent" data-jump="${b.parent}">↑ ${esc(NAME_BY_ID[b.parent] || b.parent)}</span>` : "",
    b.is_layer ? `<span class="chip layer">底层模型</span>` : "",
    b.n_category && NCAT_ZH[b.n_category] ? `<span class="chip ncat" data-fset-ncat="${b.n_category}">${esc(NCAT_ZH[b.n_category])}</span>` : "",
    b.a16z ? `<span class="chip a16z">a16z</span>` : "",
    b.cf_rank ? `<span class="chip rank">CF #${b.cf_rank}</span>` : (b.category === "traffic" ? `<span class="chip rank">CF Top1000</span>` : ""),
    ...(b.domains || []).slice(0, 1).map((d) => `<span class="chip">${esc(d)}</span>`),
  ].join(" ");
  const act = `<div class="bfact"><button class="mini" data-submit="${b.id}">＋ 提交</button></div>`;
  if (b.no_battlefield) {
    return `<div class="bf empty" data-id="${b.id}"><div class="bfhead"><h3>${esc(b.name)}</h3>${chips}${act}</div><div class="bfnote">未设战场：${esc(b.no_battlefield)}</div></div>`;
  }
  if (b.alias_of) {
    return `<div class="bf empty" data-id="${b.id}"><div class="bfhead"><h3>${esc(b.name)}</h3>${chips}${act}</div><div class="bfnote">${esc(b.note || "")} <span class="rel" data-jump="${b.alias_of}">→ 见 ${esc(NAME_BY_ID[b.alias_of] || b.alias_of)}</span></div></div>`;
  }
  const entries = b.entries.map(entryHtml).join("");
  const related = b.related?.length ? `<div class="related">关联战场：${b.related.map((id) => `<span class="rel" data-jump="${id}">${esc(NAME_BY_ID[id] || id)}</span>`).join(" ")}</div>` : "";
  const nonoss = b.non_oss?.length ? `<div class="nonoss"><b>非开源回应（未来克隆参考）</b>${b.non_oss.map((n) => `<div class="noo"><span class="noname">${esc(n.name)}</span>${n.by ? ` <span class="noby">${esc(n.by)}</span>` : ""}${n.note ? ` — ${esc(n.note)}` : ""}</div>`).join("")}</div>` : "";
  const auto = b.auto_candidates?.length ? `<div class="auto"><b>未评审候选</b>：${b.auto_candidates.map((c) => `<a class="repo" href="https://github.com/${c.repo}" target="_blank" rel="noopener">${esc(c.repo)}</a> ★${fmtStars(c.stars)}`).join(" · ")}</div>` : "";
  const nothing = (!b.entries.length && !b.auto_candidates?.length && !nonoss) ? `<div class="nothing">暂无 ≥1000 星克隆 —— 空白战场就是机会，欢迎 <span class="rel" data-submit="${b.id}">提交</span>。</div>` : "";
  const kw = b.kw?.length ? `<div class="kwrow"><span class="kwlbl">检索关键词</span>${b.kw.map((k) => `<span class="kw" data-kw="${esc(k)}">${esc(k)}</span>`).join("")}</div>` : "";
  return `<div class="bf" data-id="${b.id}"><div class="bfhead"><h3>${esc(b.name)}</h3>${chips}${act}</div>
    ${clonedBar(b)}${b.note ? `<div class="bfnote">${esc(b.note)}</div>` : ""}${entries}${auto}${nonoss}${related}${nothing}${kw}
    <div class="usub" data-usub="${b.id}"></div></div>`;
}

/* ---------- 筛选 ---------- */
const LEDGER_STATUS = new Set(["infra", "adtech", "regional", "gambling", "unknown"]);
function statusPass(b) {
  if (!state.status) return true;
  return b.status === state.status;
}
// 浏览模式 = 有筛选/搜索时把台账服务也纳入; 否则只看战场
function browseMode() { return !!(state.status || state.ncat || state.family || state.q); }
function itemUniverse() { return browseMode() ? ALL_ITEMS : DATA.battlefields; }
function matches(b) {
  if (state.cat !== "all" && b.category !== state.cat) return false;
  if (!statusPass(b)) return false;
  if (state.family && b.family !== state.family) return false;
  if (state.ncat && b.n_category !== state.ncat && b.n_category2 !== state.ncat) return false;
  if (state.q) {
    const hay = [b.name, b.id, b.category_hint, b.why, ...(b.domains || []), ...(b.kw || []), ...((b.entries || []).map((e) => e.repo + " " + (e.evidence || "")))].join(" ").toLowerCase();
    if (!hay.includes(state.q)) return false;
  }
  // 默认(非浏览模式)且勾了"只看有战事": 隐藏无克隆战场
  if (!browseMode() && state.onlyCurated && !(b.entries && b.entries.length)) return false;
  return true;
}

function renderFilter() {
  const f = DATA.facets;
  const seg = (label, items, key) => `<div class="frow"><span class="flabel">${label}</span><div class="fchips">${items.map((it) =>
    `<span class="fchip ${state[key] === it.id ? "on" : ""}" data-fkey="${key}" data-fval="${it.id}">${esc(it.label)}${it.count != null ? ` <b>${it.count}</b>` : ""}</span>`).join("")}</div></div>`;
  $("#fpanel").innerHTML =
    `<div class="fphead"><b>筛选</b> <span class="fpx" id="fpClose">×</span></div>` +
    seg("状态 / 类型", f.status, "status") +
    (f.ncat?.length ? seg("需求大类", f.ncat.map((c) => ({ id: c.id, label: c.zh, count: c.count })), "ncat") : "") +
    (f.family.length ? seg("家族", f.family.map((x) => ({ id: x, label: x })), "family") : "") +
    (browseMode() ? `<div class="frow"><span class="fclear" id="fClear">清除全部筛选</span></div>` : "");
  const n = (state.status ? 1 : 0) + (state.family ? 1 : 0) + (state.ncat ? 1 : 0);
  const fc = $("#fcount"); fc.textContent = n; fc.hidden = !n;
}

/* ---------- 台账服务(未成战场)紧凑卡 ---------- */
const STATUS_ZH = { infra: "基础设施", adtech: "广告技术", regional: "地区门户", gambling: "博彩/成人", unknown: "暂未识别", surpassed: "已超越", strong: "主流可迁移", early: "早期", empty: "空白" };
function ledgerCardHtml(b) {
  const nc = b.n_category && NCAT_ZH[b.n_category] ? `<span class="chip ncat" data-fset-ncat="${b.n_category}">${esc(NCAT_ZH[b.n_category])}</span>` : "";
  const doms = (b.domains || []).slice(0, 4).map((d) => `<span class="chip">${esc(d)}</span>`).join("") + ((b.domains || []).length > 4 ? `<span class="chip">+${b.domains.length - 4}</span>` : "");
  return `<div class="bf led" data-id="${b.id}"><div class="bfhead"><h3>${esc(b.name)}</h3>
    <span class="chip st-${b.status}">${STATUS_ZH[b.status] || b.status}</span>${nc}${doms}
    <div class="bfact"><button class="mini" data-submit="${b.id}">＋ 提交</button></div></div>
    ${b.why ? `<div class="bfnote">${esc(b.why)}</div>` : ""}
    <div class="lednote">未单独设战场。若你知道有对应开源克隆/部件，欢迎 <span class="rel" data-submit="${b.id}">提交修正</span>。</div></div>`;
}
function cardHtml(b) { return b.ledger ? ledgerCardHtml(b) : bfHtml(b); }

/* ---------- 视图: 战场图谱 / 浏览 ---------- */
const NCAT_ORDER = (id) => (DATA.facets.ncat.findIndex((c) => c.id === id));
function renderMap() {
  const uni = itemUniverse();
  let list;
  if (state.cat === "all") list = uni.filter(matches);
  else list = uni.filter((b) => b.category === state.cat).filter(matches);

  // 非浏览模式: 保持原三分类战场视图
  if (!browseMode()) {
    const cats = state.cat === "all" ? ["ai", "traffic", "other"] : [state.cat];
    $("#leftIndex").innerHTML = ""; $("#main").classList.remove("withindex");
    $("#main").innerHTML = cats.map((cat) => {
      const l = list.filter((b) => b.category === cat);
      if (!l.length) return "";
      const m = CATMETA[cat];
      const opened = l.filter((b) => b.entries && b.entries.length).length;
      const avg = DATA.stats.cloned?.[cat];
      return `<section class="cat"><div class="cathead ${cat}"><h2>${m.title}</h2><span class="sub">${m.sub} · ${opened} 开战${avg != null ? ` · 平均被克隆 ${avg}%` : ""}</span></div>${l.map(cardHtml).join("")}</section>`;
    }).join("") || `<section class="cat"><div class="nothing">没有匹配的战场。</div></section>`;
    return;
  }

  // 浏览模式: 按 N大类分组, 组内按状态细分; <100 出左侧索引, ≥100 折叠强制细化
  const small = list.length < 100;
  $("#main").classList.toggle("withindex", small && list.length > 0);
  // 分组: 优先 N大类; 无 N大类的按状态归组(不显示"未归类")
  const glabel = (gk) => gk.startsWith("S:") ? (STATUS_ZH[gk.slice(2)] || gk.slice(2)) : (NCAT_ZH[gk] || "未归类");
  const groups = {};
  for (const b of list) { const g = b.n_category || ("S:" + b.status); (groups[g] ||= []).push(b); }
  const gkeys = Object.keys(groups).sort((a, c) => (a.startsWith("S:") - c.startsWith("S:")) || ((NCAT_ORDER(a) < 0 ? 99 : NCAT_ORDER(a)) - (NCAT_ORDER(c) < 0 ? 99 : NCAT_ORDER(c))));
  const STATUS_SORT = ["surpassed", "strong", "early", "empty", "regional", "gambling", "adtech", "infra", "unknown"];

  let html = `<div class="browsehead"><b>${list.length}</b> 个匹配目标${small ? "" : "（超过 100，已折叠分组，请在右侧筛选里再选一个维度细化）"}</div>`;
  for (const gk of gkeys) {
    const items = groups[gk];
    const zh = glabel(gk);
    // 组内按状态细分
    const sub = {};
    for (const b of items) (sub[b.status] ||= []).push(b);
    const subKeys = Object.keys(sub).sort((a, c) => STATUS_SORT.indexOf(a) - STATUS_SORT.indexOf(c));
    const openGroup = small || items.length <= 24;
    html += `<section class="cat gcollapse ${openGroup ? "open" : ""}" data-g="${gk}">
      <div class="cathead gh" data-gtoggle="${gk}"><h2>${esc(zh)} <span class="gc">${items.length}</span></h2><span class="sub">${subKeys.map((s) => `${STATUS_ZH[s] || s} ${sub[s].length}`).join(" · ")}</span><span class="gcaret">${openGroup ? "▾" : "▸"}</span></div>
      <div class="gbody">`;
    for (const sk of subKeys) {
      const arr = sub[sk];
      const cap = small || EXPANDED.has(gk + ":" + sk) ? arr.length : 40;
      html += arr.length && subKeys.length > 1 ? `<div class="substat">${STATUS_ZH[sk] || sk} · ${arr.length}</div>` : "";
      html += arr.slice(0, cap).map(cardHtml).join("");
      if (arr.length > cap) html += `<div class="morebtn" data-more="${gk}:${sk}">还有 ${arr.length - cap} 个，点此展开</div>`;
    }
    html += `</div></section>`;
  }
  $("#main").innerHTML = html;

  // 左侧跳转索引(<100)
  if (small && list.length > 0) {
    $("#leftIndex").innerHTML = `<div class="idxhead">${list.length} 项 · 点击跳转</div>` + gkeys.map((gk) =>
      `<div class="idxgroup"><div class="idxg">${esc(glabel(gk))}</div>${groups[gk].map((b) =>
        `<div class="idxitem" data-idx="${esc(b.id)}">${esc(b.name)}</div>`).join("")}</div>`).join("");
  } else { $("#leftIndex").innerHTML = ""; }
}

/* ---------- 视图: 排行榜 ---------- */
function lbCard(title, hint, rows, valFn, cls) {
  return `<div class="lbcard"><h3>${title}<span class="h">${hint}</span></h3>${rows.map((r, i) =>
    `<div class="lbrow" ${r.id ? `data-jump="${r.id}"` : (r.repo ? `data-jump="${r.battlefield}"` : "")}>
      <span class="rk">${i + 1}</span><span class="nm">${esc(r.name || r.repo)}</span><span class="vv ${cls || ""}">${valFn(r)}</span></div>`).join("")}</div>`;
}
function renderBoard() {
  if (!LB) { $("#main").innerHTML = `<section class="cat"><div class="nothing">加载排行榜…</div></section>`; return; }
  $("#main").innerHTML = `<div class="lbgrid">
    ${lbCard("🏆 最被彻底克隆", "被克隆% 最高的战场", LB.most_cloned.slice(0, 12), (r) => r.cloned + "%", "pct")}
    ${lbCard("🛡️ 最抵抗克隆", "被克隆% 最低 = 最难复刻", LB.most_resistant.slice(0, 12), (r) => r.cloned + "%", "low")}
    ${lbCard("⚔️ 最激烈战场", "克隆项目数最多", LB.most_contested.slice(0, 12), (r) => r.clone_count + " 项")}
    ${lbCard("⭐ 开源星王", "参战项目按 star", LB.star_kings.slice(0, 12), (r) => "★" + fmtStars(r.stars))}
    ${lbCard("👑 已被超越", "被克隆 100% / 本体开源", LB.surpassed.slice(0, 12), (r) => r.clone_count + " 项", "pct")}
    ${lbCard("🕳️ 空白机会", "有资格但暂无 ≥1k 星克隆", LB.empty_targets.slice(0, 12), () => "0%", "low")}
  </div>
  <p class="tagline" style="margin-top:16px">平均被克隆度：AI <b>${LB.avg_cloned.ai}%</b> · 流量 <b>${LB.avg_cloned.traffic}%</b> · 其他 <b>${LB.avg_cloned.other}%</b>。点任意一行跳到该战场。</p>`;
}

/* ---------- 视图: 机会板 ---------- */
function renderOps() {
  if (!OPS) { $("#main").innerHTML = `<section class="cat"><div class="nothing">加载机会板…</div></section>`; return; }
  const catBadge = (c) => `<span class="ocat" style="background:${c === "ai" ? "#2a2140" : c === "traffic" ? "#16303f" : "#3a2f14"};color:${c === "ai" ? "var(--ai)" : c === "traffic" ? "var(--traffic)" : "var(--other)"}">${c}</span>`;
  const opCard = (o) => `<div class="opcard"><div><span class="on">${esc(o.name)}</span>${catBadge(o.category)}</div>
    <div class="owhy">${esc(o.why)}</div>
    <div class="osub"><button class="mini" data-submit="${o.id || ""}" data-target="${esc(o.name)}">＋ ${o.support === "yes" ? "我来提交克隆" : "补充/修正"}</button></div></div>`;
  $("#main").innerHTML = `
    <div class="opsec"><h2>🕳️ 待克隆机会</h2><div class="sub">这些 AI / 流量目标有开源空间，但社区还没有 ≥1000 星项目。是机会——已有对应项目？点提交修正。</div>
      <div class="opgrid">${OPS.open_targets.map(opCard).join("")}</div></div>
    <div class="opsec"><h2>🚫 明确不设战场</h2><div class="sub">这些目标结构上没有「克隆」形态。</div>
      <div class="opgrid">${OPS.no_battlefield.map(opCard).join("")}</div></div>
    <div class="opsec"><h2>❓ 为何 1000 域名里只有部分成了战场</h2>
      <div class="sub">流量 Top1000 <b>全部逐个分析</b>（共 ${OPS.ledger_total} 条判定${OPS.analyzed ? `，其中 ${OPS.analyzed.model} 条经模型/联网逐个核实` : ""}）。点任一类展开看具体域名：</div>
      <div class="whygrid">${OPS.ledger_summary.map((l) => `<div class="whycard" data-kind="${l.kind}" style="cursor:pointer"><div class="wc">${l.count}</div><div class="wn">${esc(l.label)} <span style="font-size:11px;color:var(--tx3)">▸ 查看</span></div><div class="ww">${esc(l.why)}</div></div>`).join("")}</div>
      <div id="kindDetail"></div>
    </div>
    <div class="opsec"><h2>＋ 提交你的输入</h2><div class="sub">发现漏掉的克隆项目、想修正评分、或想发起一个克隆需求？</div>
      <div style="margin-top:8px"><button class="mini" data-submit="" style="font-size:13px;padding:6px 14px">打开提交</button></div>
      <div class="usub" data-usub="_recent" style="border-top:none;margin-top:14px"></div></div>`;
  loadRecent("_recent");
}
function showKindDetail(kind) {
  const list = OPS.domains_by_kind?.[kind] || [];
  const meta = OPS.ledger_summary.find((l) => l.kind === kind);
  const el = $("#kindDetail");
  el.innerHTML = `<div class="lbcard" style="margin-top:12px"><h3>${esc(meta?.label || kind)} · ${list.length} 个域名<span class="h">${esc(meta?.why || "")}</span></h3>
    <div style="max-height:340px;overflow:auto">${list.map((d) =>
      `<div class="lbrow" style="cursor:default"><span class="nm" style="flex:0 0 190px;color:var(--tx2)">${esc(d.domain)}</span><span class="vv" style="flex:1;text-align:left;color:var(--tx3)">${esc(d.product || d.reason || "")}</span></div>`).join("")}</div></div>`;
  el.scrollIntoView({ behavior: "smooth", block: "nearest" });
}

/* ---------- 提交弹窗 ---------- */
let modalKind = "correction", modalBf = "", modalTarget = "";
function openModal(bfId, targetName) {
  modalBf = bfId || ""; modalTarget = targetName || (bfId ? NAME_BY_ID[bfId] : "") || "";
  modalKind = "correction";
  document.querySelectorAll("#mseg .s").forEach((s) => s.classList.toggle("on", s.dataset.kind === "correction"));
  $("#mmsg").textContent = "";
  renderModalFields();
  $("#modal").classList.add("open");
}
function renderModalFields() {
  const isReq = modalKind === "request";
  $("#mtitle").textContent = isReq ? "发起克隆需求" : "补充 / 修正克隆";
  $("#mhint").textContent = isReq
    ? "希望社区开源复刻哪个产品？投一票、说说你的理由。"
    : (modalTarget ? `战场：${modalTarget}` : "补充一个漏掉的开源克隆，或修正现有评分。");
  $("#mfields").innerHTML = isReq
    ? `<label>目标产品</label><input id="f_target" placeholder="想被克隆的产品名" value="${esc(modalTarget)}">
       <label>为什么值得克隆 / 你的需求</label><textarea id="f_note" placeholder="用途、痛点、参考产品…"></textarea>
       <label>联系方式（可选）</label><input id="f_contact" placeholder="邮箱 / GitHub，便于回复">`
    : `<label>开源项目 (owner/name)</label><input id="f_repo" placeholder="如 danny-avila/LibreChat">
       <label>说明（这是谁的克隆 / 该修正什么）</label><textarea id="f_note" placeholder="它复刻了哪个产品、进度如何、或哪里评错了…">${modalTarget ? "" : ""}</textarea>
       <label>联系方式（可选）</label><input id="f_contact" placeholder="邮箱 / GitHub">`;
}
async function doSubmit() {
  const kind = modalKind;
  const body = { kind, battlefield: modalBf || null, target_name: $("#f_target")?.value || modalTarget || null,
    repo: ($("#f_repo")?.value || "").trim() || null, note: ($("#f_note")?.value || "").trim() || null, contact: ($("#f_contact")?.value || "").trim() || null };
  const msg = $("#mmsg"); msg.className = "msg"; msg.textContent = "提交中…";
  try {
    const r = await fetch(API + "/api/submit", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
    const j = await r.json();
    if (r.ok && j.ok) { msg.className = "msg ok"; msg.textContent = "✓ 已收到，感谢！审核后会体现在战场里。"; setTimeout(() => $("#modal").classList.remove("open"), 1400); }
    else { msg.className = "msg err"; msg.textContent = "提交失败：" + (j.error || r.status); }
  } catch (e) { msg.className = "msg err"; msg.textContent = "网络错误，稍后再试。"; }
}
async function loadRecent(slot) {
  try {
    const r = await fetch(API + "/api/submissions?limit=8");
    const j = await r.json();
    const el = document.querySelector(`[data-usub="${slot}"]`);
    if (el && j.submissions?.length) {
      el.innerHTML = `<b>最近提交</b> · ${j.submissions.map((s) => `${s.kind === "request" ? "需求" : "修正"}「${esc(s.target_name || s.battlefield || s.repo || "")}」`).join(" · ")}`;
    }
  } catch {}
}

/* ---------- 主渲染 ---------- */
function render() {
  $("#subnav").style.display = state.view === "map" ? "flex" : "none";
  if (state.view !== "map") { $("#fpanel").classList.remove("open"); $("#leftIndex").innerHTML = ""; }
  if (state.view === "map") renderMap();
  else if (state.view === "board") renderBoard();
  else renderOps();
}
function renderStats() {
  const s = DATA.stats;
  $("#statbar").innerHTML = [
    [s.battlefields.total, "战场"],
    [s.entries.clone, "克隆项目"],
    [s.entries.adjacent, "同生态位"],
    [s.entries.self, "本体开源"],
    [(s.dataset.repos / 1000).toFixed(1) + "k", "≥1k星数据集"],
    [(s.opportunities?.open_targets ?? 0), "待克隆机会"],
  ].map(([b, t]) => `<div class="stat"><b>${b}</b><span>${t}</span></div>`).join("");
  const ds = $("#dscount"); if (ds) ds.textContent = s.dataset.repos.toLocaleString();
}

function jump(id) {
  if (!id) return;
  state.view = "map"; state.q = ""; $("#q").value = "";
  document.querySelectorAll(".view").forEach((v) => v.classList.toggle("on", v.dataset.view === "map"));
  state.status = null; state.family = null; state.ncat = null;
  if ($("#onlyCurated").checked) { $("#onlyCurated").checked = false; state.onlyCurated = false; }
  const t = DATA.battlefields.find((b) => b.id === id);
  if (t) { state.cat = "all"; document.querySelectorAll(".tab").forEach((x) => x.classList.toggle("on", x.dataset.cat === "all")); }
  renderFilter(); render();
  const el = document.querySelector(`.bf[data-id="${id}"]`);
  if (el) { el.scrollIntoView({ behavior: "smooth", block: "center" }); el.classList.add("flash"); setTimeout(() => el.classList.remove("flash"), 1500); }
}

Promise.all([
  fetch("data/battlefields.json").then((r) => r.json()),
  fetch("data/leaderboards.json").then((r) => r.json()).catch(() => null),
  fetch("data/opportunities.json").then((r) => r.json()).catch(() => null),
]).then(([d, lb, ops]) => {
  DATA = d; LB = lb; OPS = ops;
  (DATA.taxonomy || []).forEach((t) => { NCAT_ZH[t.id] = t.zh; });
  DATA.battlefields.forEach((b) => { NAME_BY_ID[b.id] = b.name; });
  const idx = new Map(DATA.battlefields.map((b, i) => [b.id, i]));
  DATA.battlefields = DATA.battlefields.slice().sort((a, b) => {
    if (a.category !== b.category) return 0;
    if (a.category === "traffic") return (a.cf_rank ?? 9999) - (b.cf_rank ?? 9999);
    const ak = a.parent ? (idx.get(a.parent) ?? idx.get(a.id)) * 100 + 1 : idx.get(a.id) * 100;
    const bk = b.parent ? (idx.get(b.parent) ?? idx.get(b.id)) * 100 + 1 : idx.get(b.id) * 100;
    return ak - bk;
  });
  // 可浏览全集 = 真正战场(非别名/非no_bf) + 台账去重服务
  const activeBf = DATA.battlefields.filter((b) => !b.no_battlefield && !b.alias_of);
  ALL_ITEMS = [...activeBf, ...(DATA.ledger_items || [])];
  renderStats(); renderFilter(); render();
});

/* ---------- 事件 ---------- */
document.querySelectorAll(".view").forEach((v) => v.addEventListener("click", () => {
  document.querySelectorAll(".view").forEach((x) => x.classList.remove("on"));
  v.classList.add("on"); state.view = v.dataset.view; render();
}));
document.querySelectorAll(".tab[data-cat]").forEach((t) => t.addEventListener("click", (e) => {
  if (e.target.tagName === "INPUT") return;
  document.querySelectorAll(".tab[data-cat]").forEach((x) => x.classList.remove("on"));
  t.classList.add("on"); state.cat = t.dataset.cat; render();
}));
$("#filterToggle").addEventListener("click", () => { $("#fpanel").classList.toggle("open"); });
$("#onlyCurated").addEventListener("change", (e) => { state.onlyCurated = e.target.checked; render(); });
$("#q").addEventListener("input", (e) => {
  state.q = e.target.value.trim().toLowerCase();
  if (state.q && state.view !== "map") { state.view = "map"; document.querySelectorAll(".view").forEach((v) => v.classList.toggle("on", v.dataset.view === "map")); }
  render();
});
document.addEventListener("click", (e) => {
  const kd = e.target.closest("[data-kind]");
  if (kd && state.view === "ops") { showKindDetail(kd.dataset.kind); return; }
  const nc = e.target.closest("[data-fset-ncat]");
  if (nc) { e.preventDefault(); e.stopPropagation(); state.ncat = nc.dataset.fsetNcat; if (!$("#fpanel").classList.contains("open")) $("#fpanel").classList.add("open"); renderFilter(); render(); return; }
  const kw = e.target.closest("[data-kw]");
  if (kw) { e.preventDefault(); const w = kw.dataset.kw; $("#q").value = w; state.q = w.toLowerCase(); if (state.view !== "map") { state.view = "map"; document.querySelectorAll(".view").forEach((v) => v.classList.toggle("on", v.dataset.view === "map")); } render(); window.scrollTo({ top: 0, behavior: "smooth" }); return; }
  const fc = e.target.closest("[data-fkey]");
  if (fc) { const k = fc.dataset.fkey, v = fc.dataset.fval; state[k] = state[k] === v ? null : v; renderFilter(); render(); return; }
  if (e.target.id === "fpClose") { $("#fpanel").classList.remove("open"); return; }
  if (e.target.id === "fClear") { state.status = state.family = state.ncat = null; state.q = ""; $("#q").value = ""; renderFilter(); render(); return; }
  const gt = e.target.closest("[data-gtoggle]");
  if (gt) { const s = gt.closest(".gcollapse"); s.classList.toggle("open"); gt.querySelector(".gcaret").textContent = s.classList.contains("open") ? "▾" : "▸"; return; }
  const mo = e.target.closest("[data-more]");
  if (mo) { EXPANDED.add(mo.dataset.more); renderMap(); return; }
  const ix = e.target.closest("[data-idx]");
  if (ix) { const el = document.querySelector(`.bf[data-id="${CSS.escape(ix.dataset.idx)}"]`); if (el) { const s = el.closest(".gcollapse"); if (s && !s.classList.contains("open")) { s.classList.add("open"); s.querySelector(".gcaret").textContent = "▾"; } el.scrollIntoView({ behavior: "smooth", block: "center" }); el.classList.add("flash"); setTimeout(() => el.classList.remove("flash"), 1500); } return; }
  const sub = e.target.closest("[data-submit]");
  if (sub) { e.preventDefault(); openModal(sub.dataset.submit, sub.dataset.target); return; }
  const j = e.target.closest("[data-jump]");
  if (j) { e.preventDefault(); jump(j.dataset.jump); return; }
});
document.querySelectorAll("#mseg .s").forEach((s) => s.addEventListener("click", () => {
  document.querySelectorAll("#mseg .s").forEach((x) => x.classList.remove("on"));
  s.classList.add("on"); modalKind = s.dataset.kind; renderModalFields();
}));
$("#mcancel").addEventListener("click", () => $("#modal").classList.remove("open"));
$("#msubmit").addEventListener("click", doSubmit);
$("#modal").addEventListener("click", (e) => { if (e.target.id === "modal") $("#modal").classList.remove("open"); });