Split admin.html's video library into per-channel management

live.html and dance.html already have independent scheduling pools (architecture.md 2.1), distinguished by clips' channel field, but admin.html rendered everything as one flat table with no way to tell the two apart or scope edits to one room. Add a 视频直播间/跳舞直播间 tab switcher that filters the table by channel, lets manual adds pick which room they land in, and lets existing rows be reclassified via the edit form's new channel select (backed by server.js's existing channel support on POST/PATCH /api/admin/library, committed in e96d689 as part of an unrelated concurrent session's work). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo

Split admin.html's video library into per-channel management
live.html and dance.html already have independent scheduling pools (architecture.md 2.1), distinguished by clips' channel field, but admin.html rendered everything as one flat table with no way to tell the two apart or scope edits to one room. Add a 视频直播间/跳舞直播间 tab switcher that filters the table by channel, lets manual adds pick which room they land in, and lets existing rows be reclassified via the edit form's new channel select (backed by server.js's existing channel support on POST/PATCH /api/admin/library, committed in e96d689 as part of an unrelated concurrent session's work). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo
yibo
1 parent e96d6894
Showing 1 changed file with 47 additions and 3 deletions
admin.html
@@ -23,6 +23,8 @@
   .row-4 { display: grid; grid-template-columns: 1fr 1fr 1.6fr 100px; gap: 14px; }
   .sort-arrow { font-size: 10px; }
   .count-hint { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
+  .channel-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
+  .channel-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
 </style>
 </head>
 <body>
@@ -37,6 +39,11 @@
 </header>
  
 <main class="admin-wrap">
+  <div class="channel-tabs">
+    <button id="tabVideo" class="secondary">视频直播间</button>
+    <button id="tabDance" class="secondary">跳舞直播间</button>
+  </div>
+
   <div class="card add-card">
     <div class="field"><label>新增片段（手动指定视频地址）</label></div>
     <div class="row-4">
@@ -46,6 +53,13 @@
       <input type="number" id="newDuration" placeholder="时长(秒)" />
     </div>
     <div class="field" style="margin-top:8px;">
+      <label>归属直播间</label>
+      <select id="newChannel">
+        <option value="video">视频直播间</option>
+        <option value="dance">跳舞直播间</option>
+      </select>
+    </div>
+    <div class="field" style="margin-top:8px;">
       <textarea id="newFullPrompt" placeholder="完整 prompt（可选，留空则用名称）" style="min-height:60px;"></textarea>
     </div>
     <button id="addBtn" style="margin-top:8px;">新增</button>
@@ -70,6 +84,7 @@
           <th data-sort="promptEn">名称(英)</th>
           <th data-sort="fullPrompt">Prompt</th>
           <th>视频地址</th>
+          <th>直播间</th>
           <th>溯源（人物×衣服×参考视频）</th>
           <th data-sort="duration">时长</th>
           <th data-sort="likes">点赞</th>
@@ -103,6 +118,13 @@ let danceRefs = [];
 let editingId = null;
 let sortKey = "createdAt";
 let sortDir = -1;
+// 视频直播间(live.html) / 跳舞直播间(dance.html) 是两条独立的产品线，
+// 素材各自的排播池互不共享（architecture.md 2.1），所以后台也分开管理。
+let activeChannel = "video";
+
+function inChannel(c) {
+  return activeChannel === "dance" ? c.channel === "dance" : c.channel !== "dance";
+}
  
 function escapeHtml(s) {
   const div = document.createElement("div");
@@ -142,7 +164,7 @@ function traceability(c) {
 function filteredSorted() {
   const q = document.getElementById("searchInput").value.trim().toLowerCase();
   const source = document.getElementById("sourceFilter").value;
-  let rows = library.slice();
+  let rows = library.filter(inChannel);
   if (q) rows = rows.filter((c) => c.prompt.toLowerCase().includes(q) || (c.promptEn || "").toLowerCase().includes(q) || (c.fullPrompt || "").toLowerCase().includes(q) || c.id.toLowerCase().includes(q));
   if (source) rows = rows.filter((c) => c.source === source);
   rows.sort((a, b) => {
@@ -160,7 +182,10 @@ function videoHref(c) {
  
 function render() {
   const rows = filteredSorted();
-  document.getElementById("countHint").textContent = `共 ${library.length} 条，当前筛选 ${rows.length} 条`;
+  const channelTotal = library.filter(inChannel).length;
+  document.getElementById("countHint").textContent = `本直播间共 ${channelTotal} 条，当前筛选 ${rows.length} 条`;
+  document.getElementById("tabVideo").classList.toggle("active", activeChannel === "video");
+  document.getElementById("tabDance").classList.toggle("active", activeChannel === "dance");
   document.querySelectorAll("th[data-sort]").forEach((th) => {
     th.innerHTML = th.textContent.replace(/ ?[▲▼]$/, "") + (th.dataset.sort === sortKey ? ` <span class="sort-arrow">${sortDir === 1 ? "▲" : "▼"}</span>` : "");
   });
@@ -175,6 +200,12 @@ function render() {
           <td class="name"><input data-field="promptEn" value="${escapeHtml(c.promptEn || "")}" /></td>
           <td class="prompt"><textarea data-field="fullPrompt">${escapeHtml(c.fullPrompt || "")}</textarea></td>
           <td><input data-field="videoUrl" value="${escapeHtml(c.videoUrl || "")}" placeholder="留空=保持原有播放源" /></td>
+          <td>
+            <select data-field="channel">
+              <option value="video" ${c.channel === "dance" ? "" : "selected"}>视频直播间</option>
+              <option value="dance" ${c.channel === "dance" ? "selected" : ""}>跳舞直播间</option>
+            </select>
+          </td>
           <td>${escapeHtml(traceability(c))}</td>
           <td>${c.duration ?? "-"}s</td>
           <td>${c.likes || 0}</td>
@@ -193,6 +224,7 @@ function render() {
           <td class="name">${escapeHtml(c.promptEn || "")}</td>
           <td class="prompt" title="${escapeHtml(c.fullPrompt || "")}">${escapeHtml((c.fullPrompt || "").slice(0, 80))}${(c.fullPrompt || "").length > 80 ? "…" : ""}</td>
           <td><a class="video-link" href="${videoHref(c)}" target="_blank">${videoHref(c)}</a></td>
+          <td>${c.channel === "dance" ? "跳舞直播间" : "视频直播间"}</td>
           <td>${escapeHtml(traceability(c))}</td>
           <td>${c.duration ?? "-"}s</td>
           <td>${c.likes || 0}</td>
@@ -248,6 +280,17 @@ document.querySelectorAll(&quot;th[data-sort]&quot;).forEach((th) =&gt; {
 document.getElementById("searchInput").addEventListener("input", render);
 document.getElementById("sourceFilter").addEventListener("change", render);
  
+document.getElementById("tabVideo").addEventListener("click", () => {
+  activeChannel = "video";
+  document.getElementById("newChannel").value = "video";
+  render();
+});
+document.getElementById("tabDance").addEventListener("click", () => {
+  activeChannel = "dance";
+  document.getElementById("newChannel").value = "dance";
+  render();
+});
+
 document.getElementById("addBtn").addEventListener("click", async () => {
   const errorBox = document.getElementById("addError");
   errorBox.hidden = true;
@@ -256,6 +299,7 @@ document.getElementById(&quot;addBtn&quot;).addEventListener(&quot;click&quot;, async () =&gt; {
   const videoUrl = document.getElementById("newVideoUrl").value.trim();
   const fullPrompt = document.getElementById("newFullPrompt").value.trim();
   const duration = Number(document.getElementById("newDuration").value) || null;
+  const channel = document.getElementById("newChannel").value;
   if (!prompt || !videoUrl) {
     errorBox.hidden = false;
     errorBox.textContent = "名称和视频地址必填";
@@ -264,7 +308,7 @@ document.getElementById(&quot;addBtn&quot;).addEventListener(&quot;click&quot;, async () =&gt; {
   const res = await fetch("/api/admin/library", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ prompt, promptEn, videoUrl, fullPrompt, duration }),
+    body: JSON.stringify({ prompt, promptEn, videoUrl, fullPrompt, duration, channel }),
   });
   if (res.ok) {
     document.getElementById("newPrompt").value = "";