Add T28 (传衣服 tab) + T29 (credit balance + topup UI) to dance.html

T28 replaces the "开发中敬请期待" placeholder on dance.html's 传衣服 tab with a real upload panel: file input, the live spend_garment price pulled from the new public GET /api/pricing (not hardcoded, per dev-plan-4.md's acceptance criterion), and a submit flow that POSTs to T27's /api/dance/upload-garment. Not logged in opens the existing T22 login modal instead of failing silently; not email-verified shows an inline message; a 402 (insufficient balance) points at the new topup flow; success refreshes the balance and immediately polls the queue, same as the free wardrobe pick's own pollState() call. T29 adds a 充值 pill (visible once logged in) opening a tier picker built from GET /api/pricing's topup_tier entries, POSTing to T24's /api/credits/checkout and navigating to whatever URL comes back (the mock completion page today, Stripe's hosted Checkout once a real key lands tomorrow — both redirect back to dance.html?topup=success/ cancelled). A one-shot banner reads that query param on load, then scrubs it via history.replaceState. The account button's own label now also shows creditBalance, riding on the field GET /api/auth/me already started returning in T24. Manually verified end to end against the live server (localhost:8934): register -> verify -> mock checkout -> balance updates in the header -> topup banner -> upload panel shows the live price and opens the login modal when logged out. The upload itself surfaced that production's one seed character had never been marked isDefault (see the preceding commit) — not a bug in this code, but blocked a live walk of the full generate path until fixed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo

Add T28 (传衣服 tab) + T29 (credit balance + topup UI) to dance.html
T28 replaces the "开发中敬请期待" placeholder on dance.html's 传衣服 tab with a real upload panel: file input, the live spend_garment price pulled from the new public GET /api/pricing (not hardcoded, per dev-plan-4.md's acceptance criterion), and a submit flow that POSTs to T27's /api/dance/upload-garment. Not logged in opens the existing T22 login modal instead of failing silently; not email-verified shows an inline message; a 402 (insufficient balance) points at the new topup flow; success refreshes the balance and immediately polls the queue, same as the free wardrobe pick's own pollState() call. T29 adds a 充值 pill (visible once logged in) opening a tier picker built from GET /api/pricing's topup_tier entries, POSTing to T24's /api/credits/checkout and navigating to whatever URL comes back (the mock completion page today, Stripe's hosted Checkout once a real key lands tomorrow — both redirect back to dance.html?topup=success/ cancelled). A one-shot banner reads that query param on load, then scrubs it via history.replaceState. The account button's own label now also shows creditBalance, riding on the field GET /api/auth/me already started returning in T24. Manually verified end to end against the live server (localhost:8934): register -> verify -> mock checkout -> balance updates in the header -> topup banner -> upload panel shows the live price and opens the login modal when logged out. The upload itself surfaced that production's one seed character had never been marked isDefault (see the preceding commit) — not a bug in this code, but blocked a live walk of the full generate path until fixed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DUiYs6UjxDMkfvnjtsKFo
yibo
1 parent b16b5418
Showing 4 changed files with 251 additions and 4 deletions
dance.css
dance.html
pricing.json
server.js
@@ -52,4 +52,43 @@
  
 .coming-soon { color: var(--muted); text-align: center; margin-top: 40px; font-size: 13px; font-weight: bold; padding: 0 12px; }
  
+/* T28: 传衣服 (mode 2) upload panel — same comic-panel language as
+   .wardrobe-card, laid out as a simple vertical form instead of a grid. */
+.upload-panel { padding: 8px 4px; }
+.upload-panel .hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
+.upload-panel input[type="file"] { width: 100%; font-size: 12px; margin-bottom: 10px; }
+.upload-panel .price-line { font: bold 13px Tahoma, sans-serif; margin-bottom: 10px; }
+.upload-panel button {
+  width: 100%;
+  font: bold 13px Tahoma, sans-serif;
+  background: var(--accent);
+  border: 3px solid #000;
+  color: var(--ink);
+  border-radius: 12px;
+  padding: 8px 4px;
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+}
+.upload-panel button:disabled { opacity: .5; cursor: default; }
+.upload-panel .upload-error { color: #c0392b; font: bold 12px Tahoma, sans-serif; margin-top: 8px; }
+.upload-panel .upload-status { font: bold 12px Tahoma, sans-serif; margin-top: 8px; }
+
+/* T29: balance pill + topup tier picker (reuses .nickname-modal/.nickname-box) */
+.credit-pill { font: bold 12px Tahoma, sans-serif; }
+.topup-tier {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 3px solid #000;
+  border-radius: 12px;
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  box-shadow: var(--shadow-sm);
+}
+.topup-tier .credits { font: bold 14px Tahoma, sans-serif; }
+.topup-tier button { font: bold 12px Tahoma, sans-serif; background: var(--accent); border: 3px solid #000; border-radius: 10px; padding: 5px 10px; cursor: pointer; }
+.topup-banner { text-align: center; font: bold 13px Tahoma, sans-serif; padding: 8px; margin: 0 0 10px; border-radius: 10px; }
+.topup-banner.success { background: #d4f7d4; }
+.topup-banner.cancelled { background: #f7e4d4; }
+
 .age-box .age-disclaimer { font-size: 12px; line-height: 1.6; color: #444; font-weight: normal; }
@@ -20,10 +20,13 @@
     <div class="spacer"></div>
     <div class="watching" id="watchingCount" hidden></div>
     <button class="topbar-pill" id="muteBtn">🔇 静音</button>
+    <button class="topbar-pill" id="topupBtn" hidden>💰 充值</button>
     <button class="topbar-pill" id="authBtn">登录</button>
     <a class="topbar-pill" href="live.html">AI 短剧频道 →</a>
   </header>
  
+  <div id="topupBanner" hidden></div>
+
   <div class="body" id="body">
     <aside class="left-col" id="leftCol">
       <div class="wardrobe-tabs" id="wardrobeTabs">
@@ -93,6 +96,15 @@
   </div>
 </div>
  
+<!-- T29: topup tier picker — reuses .nickname-modal/.nickname-box's shell -->
+<div class="nickname-modal" id="topupModal" hidden>
+  <div class="nickname-box">
+    <div class="nickname-title">充值</div>
+    <div id="topupTierList"></div>
+    <button class="auth-link-btn" id="topupCloseBtn">取消</button>
+  </div>
+</div>
+
 <script>
 let wardrobe = [];
 let leftTab = "wardrobe";
@@ -190,6 +202,8 @@ function ensureIdentity() {
 // viewer_nickname onto this browser so switching devices or clearing
 // cookies doesn't silently start a fresh anonymous identity.
 const authBtn = document.getElementById("authBtn");
+const topupBtn = document.getElementById("topupBtn");
+const topupBanner = document.getElementById("topupBanner");
 const authModal = document.getElementById("authModal");
 const authTitle = document.getElementById("authTitle");
 const authEmail = document.getElementById("authEmail");
@@ -199,10 +213,14 @@ const authSubmitBtn = document.getElementById(&quot;authSubmitBtn&quot;);
 const authToggleBtn = document.getElementById("authToggleBtn");
 const authCloseBtn = document.getElementById("authCloseBtn");
 let authMode = "login";
+let currentUser = null; // T28/T29 need to know login/emailVerified/creditBalance beyond just "is authBtn's dot lit"
  
 function renderAuthButton(user) {
-  authBtn.textContent = user ? `${user.nickname || user.email.split("@")[0]} · 退出` : "登录";
+  currentUser = user;
+  authBtn.textContent = user ? `${user.nickname || user.email.split("@")[0]} · 💰${user.creditBalance} · 退出` : "登录";
   authBtn.dataset.loggedIn = user ? "1" : "";
+  topupBtn.hidden = !user;
+  if (leftTab === "garment") renderWardrobe(); // price/balance-gated panel depends on login state
 }
  
 async function refreshAuthState() {
@@ -265,6 +283,82 @@ authPassword.addEventListener(&quot;keydown&quot;, (e) =&gt; {
  
 refreshAuthState();
  
+// ---- T29: 积分余额 + 充值 (dev-plan-4.md) ----
+let pricing = [];
+async function loadPricing() {
+  try {
+    pricing = await fetch("/api/pricing").then((r) => r.json());
+  } catch {
+    pricing = [];
+  }
+}
+
+const topupModal = document.getElementById("topupModal");
+const topupTierList = document.getElementById("topupTierList");
+const topupCloseBtn = document.getElementById("topupCloseBtn");
+
+function renderTopupTiers() {
+  const tiers = pricing.filter((p) => p.kind === "topup_tier");
+  topupTierList.innerHTML = tiers.length
+    ? tiers
+        .map(
+          (t) => `
+      <div class="topup-tier">
+        <div><div class="credits">${t.credits} 积分</div>${t.priceCents != null ? `<div class="hint">$${(t.priceCents / 100).toFixed(2)}</div>` : ""}</div>
+        <button data-tier="${t.key}">购买</button>
+      </div>`
+        )
+        .join("")
+    : `<div class="empty-hint">暂无可购买档位</div>`;
+  topupTierList.querySelectorAll("[data-tier]").forEach((btn) =>
+    btn.addEventListener("click", async () => {
+      btn.disabled = true;
+      try {
+        const res = await fetch("/api/credits/checkout", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tierKey: btn.dataset.tier }),
+        });
+        const data = await res.json();
+        if (!res.ok) {
+          alert(data.error || "创建支付会话失败");
+          return;
+        }
+        location.href = data.url; // Stripe's hosted page (real) or the mock completion URL — both redirect back here
+      } finally {
+        btn.disabled = false;
+      }
+    })
+  );
+}
+
+topupBtn.addEventListener("click", async () => {
+  if (!currentUser) {
+    openAuthModal("login");
+    return;
+  }
+  if (!pricing.length) await loadPricing();
+  renderTopupTiers();
+  topupModal.hidden = false;
+});
+topupCloseBtn.addEventListener("click", () => {
+  topupModal.hidden = true;
+});
+
+// A redirect back from Stripe (or the mock checkout) lands here with
+// ?topup=success/cancelled — show a one-off banner, then scrub the query
+// string so a page refresh doesn't keep re-showing it.
+(function showTopupBanner() {
+  const topup = new URLSearchParams(location.search).get("topup");
+  if (!topup) return;
+  topupBanner.hidden = false;
+  topupBanner.className = topup === "success" ? "topup-banner success" : "topup-banner cancelled";
+  topupBanner.textContent = topup === "success" ? "充值成功！" : "已取消充值";
+  history.replaceState(null, "", location.pathname);
+})();
+
+loadPricing();
+
 muteBtn.addEventListener("click", () => {
   player.muted = !player.muted;
   muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
@@ -279,8 +373,12 @@ function garmentName(id) {
  
 function renderWardrobe() {
   document.querySelectorAll("#wardrobeTabs button").forEach((b) => b.classList.toggle("active", b.dataset.tab === leftTab));
+  if (leftTab === "garment") {
+    renderGarmentUploadPanel();
+    return;
+  }
   if (leftTab !== "wardrobe") {
-    wardrobePanel.innerHTML = `<div class="coming-soon">${leftTab === "garment" ? "传衣服" : "传人"}功能开发中，敬请期待</div>`;
+    wardrobePanel.innerHTML = `<div class="coming-soon">传人功能开发中，敬请期待</div>`;
     return;
   }
   if (wardrobe.length === 0) {
@@ -301,6 +399,77 @@ function renderWardrobe() {
   );
 }
  
+// ---- T28: 模式二"传衣服"（付费，需登录+邮箱验证） ----
+function renderGarmentUploadPanel() {
+  const spendGarment = pricing.find((p) => p.key === "spend_garment");
+  const priceLine = spendGarment ? `上传一张衣服照片，AI 换装生成跳舞视频，扣 ${spendGarment.credits} 积分` : "加载价格中…";
+  wardrobePanel.innerHTML = `
+    <div class="upload-panel">
+      <div class="hint">${priceLine}</div>
+      <input type="file" id="garmentFileInput" accept="image/jpeg,image/png,image/webp" />
+      <button id="garmentUploadBtn">上传并生成</button>
+      <div class="upload-error" id="garmentUploadError" hidden></div>
+      <div class="upload-status" id="garmentUploadStatus" hidden></div>
+    </div>`;
+  document.getElementById("garmentUploadBtn").addEventListener("click", submitGarmentUpload);
+}
+
+async function submitGarmentUpload() {
+  const fileInput = document.getElementById("garmentFileInput");
+  const errorBox = document.getElementById("garmentUploadError");
+  const statusBox = document.getElementById("garmentUploadStatus");
+  const btn = document.getElementById("garmentUploadBtn");
+  errorBox.hidden = true;
+  statusBox.hidden = true;
+
+  // 未登录/未验证先引导，而不是提交后静默失败（T28 验收标准）
+  if (!currentUser) {
+    openAuthModal("login");
+    return;
+  }
+  if (!currentUser.emailVerified) {
+    errorBox.hidden = false;
+    errorBox.textContent = "请先完成邮箱验证后再上传（查看邮箱中的验证链接）";
+    return;
+  }
+  const file = fileInput.files[0];
+  if (!file) {
+    errorBox.hidden = false;
+    errorBox.textContent = "请先选择一张图片";
+    return;
+  }
+
+  btn.disabled = true;
+  statusBox.hidden = false;
+  statusBox.textContent = "上传中…";
+  try {
+    const fd = new FormData();
+    fd.append("file", file);
+    const res = await fetch("/api/dance/upload-garment", { method: "POST", body: fd });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) {
+      statusBox.hidden = true;
+      errorBox.hidden = false;
+      if (res.status === 402) {
+        errorBox.textContent = "积分不足，请先充值";
+      } else {
+        errorBox.textContent = data.error || "上传失败";
+      }
+      return;
+    }
+    statusBox.textContent = data.status === "ready" ? "生成完成，已加入播放队列！" : "生成中，完成后会自动加入播放队列";
+    fileInput.value = "";
+    await refreshAuthState(); // balance just changed
+    pollState(); // surface the new queue entry immediately, same as pickGarment
+  } catch {
+    statusBox.hidden = true;
+    errorBox.hidden = false;
+    errorBox.textContent = "网络错误，请重试";
+  } finally {
+    btn.disabled = false;
+  }
+}
+
 document.querySelectorAll("#wardrobeTabs button").forEach((b) =>
   b.addEventListener("click", () => {
     leftTab = b.dataset.tab;
+[
+  {
+    "key": "spend_garment",
+    "kind": "spend",
+    "credits": 10,
+    "priceCents": null,
+    "segmentsPerUnit": null,
+    "isActive": true,
+    "updatedAt": 1788356862386
+  },
+  {
+    "key": "topup_tier_1",
+    "kind": "topup_tier",
+    "credits": 100,
+    "priceCents": 999,
+    "segmentsPerUnit": null,
+    "isActive": true,
+    "updatedAt": 1788356862386
+  },
+  {
+    "key": "topup_tier_2",
+    "kind": "topup_tier",
+    "credits": 550,
+    "priceCents": 4999,
+    "segmentsPerUnit": null,
+    "isActive": true,
+    "updatedAt": 1788356862386
+  }
+]
 \ No newline at end of file
@@ -1586,8 +1586,9 @@ http
  
     // ---- dance.html: public viewer-facing endpoints (T11/T12/T15/T17) ----
     // No admin auth (T6 only gates /api/admin/*) — these are the free,
-    // anonymous, 模式一 (衣柜选衣服) path. Modes 二/三 (paid upload) aren't
-    // built yet (require accounts/credits, dev-plan-2.md 第三/四期).
+    // anonymous, 模式一 (衣柜选衣服) path. 模式二 (付费传衣服) is T27,
+    // below, and does require login+emailVerified on its own. 模式三 isn't
+    // built yet (第五期).
  
     if (pathname === "/api/dance/wardrobe" && req.method === "GET") {
       res.writeHead(200, { "Content-Type": "application/json" });
@@ -1595,6 +1596,15 @@ http
       return;
     }
  
+    // T28/T29 need pricing (spend_garment's cost, topup_tier options) on
+    // the client before any purchase decision — public/unauthenticated on
+    // purpose, same reasoning as GET /api/dance/wardrobe above.
+    if (pathname === "/api/pricing" && req.method === "GET") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(pricing.list().filter((p) => p.isActive)));
+      return;
+    }
+
     if (pathname === "/api/dance/live/state" && req.method === "GET") {
       ensureDanceSchedule();
       const now = Date.now();