tt-help-cli-ycl 1.3.57 → 1.3.58

package/src/watch/public/app.js

@@ -0,0 +1,1266 @@
+const COLORS = [
+  "#fe2c55",
+  "#60a5fa",
+  "#4ade80",
+  "#facc15",
+  "#f97316",
+  "#a855f7",
+  "#ec4899",
+  "#14b8a6",
+  "#e11d48",
+  "#0ea5e9",
+  "#8b5cf6",
+  "#84cc16",
+];
+let currentFilter = "all";
+let currentStats = null;
+let currentUsers = [];
+let currentLocation = "";
+let currentTargetLocation = "";
+let currentRawLocation = "";
+let prevStatValues = {};
+let prevUserMap = {};
+
+async function fetchStats() {
+  try {
+    const res = await fetch("/api/stats");
+    currentStats = await res.json();
+    renderStats();
+    renderLocationFilter();
+  } catch (e) {
+    document.getElementById("lastUpdate").textContent = "连接失败";
+  }
+}
+
+async function fetchUsers() {
+  try {
+    const params = new URLSearchParams();
+    if (currentFilter === "target") {
+      params.set("target", "1");
+      if (currentTargetLocation)
+        params.set("targetLocation", currentTargetLocation);
+    } else if (currentFilter !== "all") {
+      params.set("status", currentFilter);
+    }
+    const search = document.getElementById("searchInput").value.trim();
+    if (search) params.set("search", search);
+    if (currentLocation) params.set("location", currentLocation);
+    params.set("limit", "200");
+    const res = await fetch("/api/users?" + params.toString());
+    const data = await res.json();
+    currentUsers = data.users || [];
+    renderTable(currentUsers);
+  } catch (e) {}
+}
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+async function fetchClientErrors() {
+  try {
+    const res = await fetch("/api/client-errors");
+    const data = await res.json();
+    const clients = data.clients || [];
+    const section = document.getElementById("clientErrorsSection");
+    const badge = document.getElementById("clientErrorsBadge");
+    const tbody = document.getElementById("clientErrorsBody");
+    if (clients.length === 0) {
+      section.style.display = "none";
+      return;
+    }
+    section.style.display = "";
+    badge.textContent = clients.length;
+    const typeMap = {
+      captcha: ["验证码", "error-type-captcha"],
+      network: ["网络", "error-type-network"],
+      other: ["其他", "error-type-other"],
+      被封: ["被封", "error-type-captcha"],
+    };
+    const stageMap = {
+      "video-page": "视频页",
+      comment: "评论",
+      follow: "关注/粉丝",
+      scrape: "scrape",
+      process: "处理",
+    };
+    tbody.innerHTML = clients
+      .map((c) => {
+        const [typeText, typeClass] = typeMap[c.errorType] || ["未知", ""];
+        const stageText = c.stage ? stageMap[c.stage] || c.stage : "";
+        const captchaText = c.captchaCount
+          ? `${c.captchaCount}次${c.captchaStage ? " (" + (stageMap[c.captchaStage] || c.captchaStage) + ")" : ""}`
+          : "-";
+        const msgDetail = c.errorMessage
+          ? `<br><span style="color:#666;font-size:11px">${escapeHtml(c.errorMessage)}</span>`
+          : "";
+        const stackDetail = c.errorStack
+          ? `<br><span style="color:#555;font-size:10px;max-width:250px;display:block;word-break:break-all">${escapeHtml(c.errorStack)}</span>`
+          : "";
+        const captchaDetail = c.captchaMessage
+          ? `<br><span style="color:#666;font-size:11px">${escapeHtml(c.captchaMessage)}</span>`
+          : "";
+        return `<tr>
+        <td style="font-family:monospace;font-weight:600;color:#60a5fa">${escapeHtml(c.userId)}</td>
+        <td class="${typeClass}">${typeText}</td>
+        <td style="color:#f87171;font-weight:600">${c.reportCount || 1}</td>
+        <td style="color:#f59e0b;font-weight:600">${captchaText}${captchaDetail}</td>
+        <td style="color:#a78bfa;font-size:12px">${stageText}</td>
+        <td style="color:#ccc;font-size:12px;max-width:300px;word-break:break-all">${msgDetail}${stackDetail}</td>
+        <td style="color:#60a5fa">@${escapeHtml(c.username || "-")}</td>
+        <td style="color:#888;font-size:12px">${new Date(c.timestamp).toLocaleTimeString()}</td>
+        <td><button class="btn-delete" onclick="deleteClientError('${escapeHtml(c.userId)}')" style="background:#991b1b;color:#fff;border:none;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:12px">删除</button></td>
+      </tr>`;
+      })
+      .join("");
+  } catch (e) {}
+}
+
+async function deleteClientError(userId) {
+  try {
+    await fetch(`/api/client-error/${encodeURIComponent(userId)}`, {
+      method: "DELETE",
+    });
+    fetchClientErrors();
+  } catch (e) {}
+}
+
+function formatStatNum(value, { full = false } = {}) {
+  const num = Number(value) || 0;
+  if (full) return num.toLocaleString("zh-CN");
+  if (Math.abs(num) < 1000) return String(num);
+  if (Math.abs(num) < 10000) return num.toLocaleString("zh-CN");
+  const wan = num / 10000;
+  return wan.toFixed(1).replace(/\.0+$/, "") + "万";
+}
+
+function flashEl(id, value, options) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  const prev = prevStatValues[id];
+  el.textContent = formatStatNum(value, options);
+  if (prev !== undefined && prev !== value) {
+    el.classList.remove("flash-change");
+    void el.offsetWidth;
+    el.classList.add("flash-change");
+  }
+  prevStatValues[id] = value;
+}
+
+function renderStats() {
+  if (!currentStats) return;
+  const d = currentStats;
+  flashEl("statTotal", d.totalUsers);
+  flashEl("statProcessing", d.processingUsers || 0);
+  flashEl("statDone", d.processedUsers);
+  flashEl("statPending", d.pendingUsers);
+  flashEl("statError", d.errorUsers);
+  flashEl("statRestricted", d.restrictedUsers);
+  flashEl("statTarget", d.targetUsers, { full: true });
+  flashEl("statUserUpdateTasks", d.userUpdateTasks || 0, { full: true });
+  flashEl("statRawJobs", d.rawJobs || 0);
+  // 同步子页面 stats
+  const pendingTotal = document.getElementById("pendingStatTotal");
+  if (pendingTotal) pendingTotal.textContent = formatStatNum(d.totalUsers);
+  const pendingCount = document.getElementById("pendingStatPending");
+  if (pendingCount) pendingCount.textContent = formatStatNum(d.pendingUsers);
+  const pendingUserUpdate = document.getElementById(
+    "pendingStatUserUpdateTasks",
+  );
+  if (pendingUserUpdate)
+    pendingUserUpdate.textContent = formatStatNum(d.userUpdateTasks || 0, {
+      full: true,
+    });
+  const pendingRawJobs = document.getElementById("pendingStatRawJobs");
+  if (pendingRawJobs)
+    pendingRawJobs.textContent = formatStatNum(d.rawJobs || 0);
+  const userUpdateTotal = document.getElementById("userUpdateStatTotal");
+  if (userUpdateTotal)
+    userUpdateTotal.textContent = formatStatNum(d.totalUsers);
+  const userUpdatePending = document.getElementById("userUpdateStatPending");
+  if (userUpdatePending)
+    userUpdatePending.textContent = formatStatNum(d.pendingUsers);
+  const userUpdateTasks = document.getElementById(
+    "userUpdateStatUserUpdateTasks",
+  );
+  if (userUpdateTasks)
+    userUpdateTasks.textContent = formatStatNum(d.userUpdateTasks || 0, {
+      full: true,
+    });
+  const userUpdateRawJobs = document.getElementById("userUpdateStatRawJobs");
+  if (userUpdateRawJobs)
+    userUpdateRawJobs.textContent = formatStatNum(d.rawJobs || 0);
+  const rawPageRawJobs = document.getElementById("rawPageStatRawJobs");
+  if (rawPageRawJobs)
+    rawPageRawJobs.textContent = formatStatNum(d.rawJobs || 0);
+  const rawPagePending = document.getElementById("rawPageStatPending");
+  if (rawPagePending)
+    rawPagePending.textContent = formatStatNum(d.pendingUsers || 0);
+  const rawPageUserUpdate = document.getElementById(
+    "rawPageStatUserUpdateTasks",
+  );
+  if (rawPageUserUpdate)
+    rawPageUserUpdate.textContent = formatStatNum(d.userUpdateTasks || 0);
+  document.getElementById("lastUpdate").textContent =
+    "更新于 " + new Date().toLocaleTimeString();
+  document.getElementById("fileMeta").textContent =
+    formatStatNum(d.processingUsers || 0) +
+    " 处理中, " +
+    formatStatNum(d.totalUsers) +
+    " 个用户, 待处理 " +
+    formatStatNum(d.pendingUsers || 0);
+
+  renderCountryChart(d.countryStats);
+  renderSourceChart(d.sourceStats);
+  renderTargetLocationFilter(d.targetCountryStats);
+}
+
+function renderTargetLocationFilter(targetCountryStats) {
+  const sel = document.getElementById("targetLocationFilter");
+  if (!sel) return;
+  const val = sel.value;
+  sel.innerHTML =
+    '<option value="">全部目标国家</option>' +
+    (targetCountryStats || [])
+      .map(
+        (c) =>
+          `<option value="${c.country}"${val === c.country ? " selected" : ""}>${c.country} (${c.count})</option>`,
+      )
+      .join("");
+}
+
+function renderCountryChart(countries) {
+  const el = document.getElementById("countryChart");
+  const filtered = countries.filter((c) => c.country !== "未知");
+  if (!filtered.length) {
+    el.innerHTML = '<span style="color:#666;font-size:12px">暂无数据</span>';
+    return;
+  }
+  const max = filtered[0].count;
+  const top = filtered.slice(0, 15);
+  const targetLocations = currentStats?.targetLocations || [];
+  el.innerHTML = top
+    .map((c, i) => {
+      const isTarget = targetLocations.includes(c.country);
+      const targetBadge =
+        c.targetCount > 0
+          ? `<span class="target-badge">🎯 ${c.targetCount}</span>`
+          : `<span class="target-badge" style="visibility:hidden"> </span>`;
+      return `
+    <div class="bar-row${isTarget ? " is-target" : ""}">
+      <span class="name">${c.country}</span>
+      <div class="bar-bg"><div class="bar-fill" style="width:${(c.count / max) * 100}%;background:${isTarget ? "#a78bfa" : COLORS[i % COLORS.length]}">${c.count}</div></div>
+      ${targetBadge}
+      <span class="count">${currentStats ? ((c.count / currentStats.totalUsers) * 100).toFixed(1) : 0}%</span>
+    </div>
+  `;
+    })
+    .join("");
+}
+
+function renderSourceChart(sources) {
+  const el = document.getElementById("sourceChart");
+  const labels = {
+    seed: "种子",
+    video: "视频发现",
+    comment: "评论发现",
+    guess: "猜你喜欢",
+    following: "关注",
+    follower: "粉丝",
+    processed: "已处理",
+    restricted: "受限(跳过)",
+    error: "错误(待重试)",
+    noVideo: "无视频",
+  };
+  const entries = Object.entries(sources);
+  el.innerHTML = entries
+    .map(
+      ([key, val]) => `
+    <div class="source-row"><span class="s-name">${labels[key] || key}:</span><span class="s-val">${val}</span></div>
+  `,
+    )
+    .join("");
+}
+
+function renderTable(users) {
+  const el = document.getElementById("userTable");
+
+  const newUserMap = {};
+  for (const u of users) newUserMap[u.uniqueId] = u;
+
+  el.innerHTML = users
+    .map((u) => {
+      const wasStatus = prevUserMap[u.uniqueId]?.status;
+      const nowStatus = u.status;
+      const changed =
+        wasStatus !== nowStatus &&
+        (nowStatus === "done" ||
+          nowStatus === "restricted" ||
+          nowStatus === "error");
+      const rowClass = changed ? ' class="row-flash"' : "";
+
+      const statusTags = {
+        restricted: '<span class="tag error">受限(跳过)</span>',
+        error: '<span class="tag error">错误(待重试)</span>',
+        done: '<span class="tag processed">已完成</span>',
+        processing: '<span class="tag processing">处理中</span>',
+        pending: '<span class="tag pending">待处理</span>',
+      };
+      const statusTag =
+        statusTags[u.status] ||
+        '<span class="tag pending">' + (u.status || "未知") + "</span>";
+      const sources = (u.sources || []).join(", ");
+      const extraTags = [];
+      if (u.pinned) extraTags.push('<span class="tag pinned">📌 置顶</span>');
+      if (u.ttSeller) extraTags.push('<span class="tag seller">商家</span>');
+      if (u.verified) extraTags.push('<span class="tag verified">认证</span>');
+      if (u.noVideo) extraTags.push('<span class="tag no-video">无视频</span>');
+      if (u.keepFollow)
+        extraTags.push('<span class="tag keep-follow">关注已保留</span>');
+      if (u.hasFollowData === false)
+        extraTags.push('<span class="tag no-follow">关注未获取</span>');
+      const nick = (u.nickname || "")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+      const fans = u.followerCount != null ? formatNum(u.followerCount) : "-";
+      const videos = u.videoCount != null ? u.videoCount : "-";
+      const loc = u.locationCreated || "-";
+      const latestVideo = u.latestVideoTime
+        ? formatTime(u.latestVideoTime * 1000)
+        : "-";
+      const guessedLoc = u.guessedLocation || "-";
+      const claimer = u.claimedBy || "-";
+      const claimTime = u.claimedAt ? formatTime(u.claimedAt) : "-";
+      const procTime = u.processedAt ? formatTime(u.processedAt) : "-";
+      const statusCodeDisplay =
+        u.statusCode != null && u.statusCode !== 0
+          ? `<span class="tag error" style="font-size:10px">${u.statusCode}</span>`
+          : "";
+      return `<tr${rowClass}>
+      <td class="user-id" data-label="用户名">@${u.uniqueId}</td>
+      <td data-label="昵称">${nick}</td>
+      <td data-label="粉丝">${fans}</td>
+      <td data-label="视频">${videos}</td>
+      <td data-label="国家">${loc}</td>
+      <td data-label="最近发布" style="font-size:11px;color:#888">${latestVideo}</td>
+      <td data-label="猜测国家">${guessedLoc}</td>
+      <td data-label="来源">${sources || "-"}</td>
+      <td data-label="状态">${statusTag} ${extraTags.join(" ")}</td>
+      <td data-label="StatusCode">${statusCodeDisplay}</td>
+      <td data-label="处理端" style="font-size:11px;color:#888">${claimer}</td>
+      <td data-label="领取时间" style="font-size:11px;color:#888">${claimTime}</td>
+      <td data-label="完成时间" style="font-size:11px;color:#888">${procTime}</td>
+    </tr>`;
+    })
+    .join("");
+
+  const errorCount = users.filter((u) => u.status === "error").length;
+  const countEl = document.getElementById("batchResetCount");
+  if (countEl) countEl.textContent = errorCount;
+
+  prevUserMap = newUserMap;
+}
+
+function formatNum(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+  if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+  return n;
+}
+
+function formatTime(ts) {
+  const d = new Date(ts);
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+function setFilter(f) {
+  currentFilter = f;
+  document.querySelectorAll(".controls button").forEach((b) => {
+    b.classList.toggle("active", b.dataset.filter === f);
+  });
+  const btn = document.getElementById("batchResetBtn");
+  btn.style.display = f === "error" ? "" : "none";
+  const targetLocSel = document.getElementById("targetLocationFilter");
+  if (f === "target") {
+    targetLocSel.style.display = "";
+  } else {
+    targetLocSel.style.display = "none";
+    currentTargetLocation = "";
+  }
+  fetchUsers();
+}
+
+function renderLocationFilter() {
+  if (!currentStats || !currentStats.countryStats) return;
+  const sel = document.getElementById("locationFilter");
+  if (!sel) return;
+  const val = sel.value;
+  const entries = currentStats.countryStats.sort((a, b) => b.count - a.count);
+  sel.innerHTML =
+    '<option value="">全部国家</option>' +
+    entries
+      .map(
+        (c) =>
+          `<option value="${c.country}"${val === c.country ? " selected" : ""}>${c.country} (${c.count})</option>`,
+      )
+      .join("");
+}
+
+function onLocationChange() {
+  const sel = document.getElementById("locationFilter");
+  currentLocation = sel.value;
+  fetchUsers();
+}
+
+function onTargetLocationChange() {
+  const sel = document.getElementById("targetLocationFilter");
+  currentTargetLocation = sel.value;
+  fetchUsers();
+}
+
+let searchTimer = null;
+document.getElementById("searchInput").addEventListener("input", () => {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(fetchUsers, 300);
+});
+
+let rawSearchTimer = null;
+document.getElementById("rawSearchInput").addEventListener("input", () => {
+  if (rawSearchTimer) clearTimeout(rawSearchTimer);
+  rawSearchTimer = setTimeout(fetchRawJobs, 300);
+});
+
+function parseUsernames(raw) {
+  return raw
+    .split(/[,，\n\r]+/)
+    .map((s) => s.replace(/^@/, "").trim())
+    .filter(Boolean);
+}
+
+function openAddModal() {
+  let overlay = document.getElementById("addModalOverlay");
+  if (overlay) return;
+  overlay = document.createElement("div");
+  overlay.id = "addModalOverlay";
+  overlay.className = "modal-overlay";
+  overlay.innerHTML = `
+    <div class="modal">
+      <h3>插入用户到队列</h3>
+      <div class="hint">每行一个用户名，或用逗号分隔。支持 @username 或 username 格式。插入到队列最前面优先处理。</div>
+      <textarea id="modalUserInput" placeholder="例如：&#10;user1&#10;user2&#10;user3&#10;&#10;或：user1, user2, user3"></textarea>
+      <div class="preview" id="modalPreview"></div>
+      <div class="btn-row">
+        <button class="btn-cancel" onclick="closeAddModal()">取消</button>
+        <button class="btn-submit" onclick="submitAddUsers()">确认插入</button>
+      </div>
+    </div>
+  `;
+  document.body.appendChild(overlay);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) closeAddModal();
+  });
+  const ta = document.getElementById("modalUserInput");
+  ta.focus();
+  ta.addEventListener("input", () => {
+    const names = parseUsernames(ta.value);
+    const preview = document.getElementById("modalPreview");
+    preview.textContent = names.length ? `共 ${names.length} 个用户名` : "";
+  });
+  ta.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      submitAddUsers();
+    }
+  });
+}
+
+function closeAddModal() {
+  const overlay = document.getElementById("addModalOverlay");
+  if (overlay) overlay.remove();
+}
+
+async function submitAddUsers() {
+  const ta = document.getElementById("modalUserInput");
+  const raw = ta.value.trim();
+  if (!raw) return;
+
+  const names = parseUsernames(raw);
+  if (names.length === 0) return;
+
+  showLoading("正在添加用户...");
+  try {
+    const res = await fetch("/api/users", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ usernames: names }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showToast(data.error, true);
+      return;
+    }
+    closeAddModal();
+    showToast(data.message || `已插入 ${data.added} 个用户`);
+    fetchStats();
+    fetchUsers();
+  } catch (e) {
+    showToast("插入失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+function showToast(msg, isError) {
+  let toast =
+    document.getElementById("globalToast") || document.getElementById("toast");
+  if (!toast) {
+    toast = document.createElement("div");
+    toast.id = "globalToast";
+    toast.className = "toast";
+    toast.style.display = "none";
+    document.body.appendChild(toast);
+  }
+  toast.textContent = msg;
+  toast.className = "toast" + (isError ? " error" : "");
+  toast.style.display = "block";
+  setTimeout(() => {
+    toast.style.display = "none";
+  }, 3000);
+}
+
+function showLoading(text) {
+  let overlay = document.getElementById("loadingOverlay");
+  if (!overlay) {
+    overlay = document.createElement("div");
+    overlay.id = "loadingOverlay";
+    overlay.className = "loading-overlay";
+    overlay.innerHTML = `
+      <div class="loading-spinner">
+        <div class="spinner"></div>
+        <div class="loading-text" id="loadingText">处理中...</div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+  }
+  const textEl = document.getElementById("loadingText");
+  if (textEl) textEl.textContent = text || "处理中...";
+  overlay.classList.add("visible");
+}
+
+function hideLoading() {
+  const overlay = document.getElementById("loadingOverlay");
+  if (overlay) overlay.classList.remove("visible");
+}
+
+function escapeJsString(str) {
+  return String(str).replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+
+document.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") closeAddModal();
+});
+
+document.getElementById("userTable").addEventListener("click", (e) => {
+  const td = e.target.closest("td.user-id");
+  if (!td) return;
+  hideContextMenu();
+  const username = td.textContent.trim().replace(/^@/, "");
+  if (!username) return;
+  window.open("https://www.tiktok.com/@" + username, "_blank");
+});
+
+let contextMenuEl = null;
+let contextMenuUserId = null;
+let contextMenuPinned = false;
+
+function showContextMenu(x, y, uniqueId, pinned) {
+  hideContextMenu();
+  contextMenuUserId = uniqueId;
+  contextMenuPinned = !!pinned;
+  contextMenuEl = document.createElement("div");
+  contextMenuEl.className = "context-menu";
+  contextMenuEl.innerHTML = `
+    <div class="context-menu-item" data-action="pin">${contextMenuPinned ? "📌 取消置顶" : "📍 置顶优先"}</div>
+    <div class="context-menu-item" data-action="reset">↻ 重新处理</div>
+    <div class="context-menu-item" data-action="open">🔗 打开主页</div>
+  `;
+  document.body.appendChild(contextMenuEl);
+  contextMenuEl.style.left = Math.min(x, window.innerWidth - 160) + "px";
+  contextMenuEl.style.top = Math.min(y, window.innerHeight - 100) + "px";
+
+  contextMenuEl.addEventListener("click", (e) => {
+    const item = e.target.closest(".context-menu-item");
+    if (!item) return;
+    const action = item.dataset.action;
+    if (action === "pin") togglePin(contextMenuUserId);
+    if (action === "reset") resetJob(contextMenuUserId);
+    if (action === "open")
+      window.open("https://www.tiktok.com/@" + contextMenuUserId, "_blank");
+    hideContextMenu();
+  });
+}
+
+function hideContextMenu() {
+  if (contextMenuEl) {
+    contextMenuEl.remove();
+    contextMenuEl = null;
+    contextMenuUserId = null;
+  }
+}
+
+document.getElementById("userTable").addEventListener("contextmenu", (e) => {
+  const td = e.target.closest("td");
+  if (!td || td.parentElement.tagName !== "TR") return;
+  e.preventDefault();
+  const tr = td.parentElement;
+  const userIdTd = tr.querySelector("td.user-id");
+  if (!userIdTd) return;
+  const uniqueId = userIdTd.textContent.trim().replace(/^@/, "");
+  const pinned = !!tr.querySelector(".tag.pinned");
+  showContextMenu(e.clientX, e.clientY, uniqueId, pinned);
+});
+
+document.addEventListener("click", (e) => {
+  if (contextMenuEl && !contextMenuEl.contains(e.target)) {
+    hideContextMenu();
+  }
+});
+
+async function togglePin(uniqueId) {
+  showLoading("操作中...");
+  try {
+    const res = await fetch(
+      "/api/job/" + encodeURIComponent(uniqueId) + "/pin",
+      {
+        method: "POST",
+      },
+    );
+    const data = await res.json();
+    if (data.saved) {
+      showToast(data.pinned ? "已置顶" : "已取消置顶");
+      fetchUsers();
+    } else {
+      showToast(data.error || "操作失败", true);
+    }
+  } catch (e) {
+    showToast("操作失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function resetJob(uniqueId) {
+  showLoading("重置任务...");
+  try {
+    const res = await fetch(
+      "/api/job/" + encodeURIComponent(uniqueId) + "/reset",
+      {
+        method: "POST",
+      },
+    );
+    const data = await res.json();
+    if (data.saved) {
+      showToast("已重置任务");
+      fetchUsers();
+      fetchStats();
+    } else {
+      showToast(data.error || "重置失败", true);
+    }
+  } catch (e) {
+    showToast("重置失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function batchResetErrors() {
+  const errorUsers = currentUsers.filter((u) => u.status === "error");
+  if (errorUsers.length === 0) {
+    showToast("没有需要重置的错误用户", true);
+    return;
+  }
+  const userIds = errorUsers.map((u) => u.uniqueId);
+  showLoading("正在批量重置...");
+  try {
+    const res = await fetch("/api/jobs/batch-reset", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ userIds }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showToast(data.error, true);
+      return;
+    }
+    showToast(`已重置 ${data.reset} / ${data.total} 个用户`);
+    fetchUsers();
+    fetchStats();
+  } catch (e) {
+    showToast("批量重置失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+document
+  .getElementById("statTargetCard")
+  .addEventListener("click", async () => {
+    showLoading("正在导出目标用户...");
+    try {
+      const res = await fetch("/api/target-users", {
+        headers: { Accept: "text/csv" },
+      });
+      if (!res.ok) throw new Error("HTTP " + res.status);
+      const blob = await res.blob();
+      const ext = blob.size < 200 ? "json" : "csv";
+      if (ext === "json") {
+        const text = await blob.text();
+        const data = JSON.parse(text);
+        if (!data.users.length) {
+          showToast("暂无目标用户", true);
+          return;
+        }
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          const ids = data.users.map((u) => "@" + u.uniqueId).join(", ");
+          await navigator.clipboard.writeText(ids);
+          showToast(data.users.length + " 个目标用户 ID 已复制到剪贴板");
+        }
+        return;
+      }
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "target-users.csv";
+      a.click();
+      URL.revokeObjectURL(url);
+      showToast("CSV 文件已开始下载");
+    } catch (e) {
+      showToast("获取失败: " + e.message, true);
+    } finally {
+      hideLoading();
+    }
+  });
+
+// Hash 路由
+window.addEventListener("hashchange", handleRoute);
+window.addEventListener("DOMContentLoaded", handleRoute);
+
+function handleRoute() {
+  const hash = window.location.hash;
+  if (hash === "#pending") {
+    showPendingPage();
+  } else if (hash === "#userUpdate") {
+    showUserUpdatePage();
+  } else if (hash === "#raw") {
+    showRawPage();
+  } else {
+    showMainPage();
+  }
+}
+
+function navigateToPending() {
+  window.location.hash = "#pending";
+}
+
+function navigateToUserUpdate() {
+  window.location.hash = "#userUpdate";
+}
+
+function navigateToRaw() {
+  window.location.hash = "#raw";
+}
+
+function navigateToMain() {
+  window.location.hash = "";
+}
+
+function showPendingPage() {
+  document.getElementById("mainPage").classList.add("hidden");
+  document.getElementById("pendingPage").classList.add("active");
+  document.getElementById("userUpdatePage").classList.remove("active");
+  document.getElementById("rawPage").classList.remove("active");
+  fetchPendingByCountry();
+  fetchAttachStuckByCountry();
+}
+
+function showUserUpdatePage() {
+  document.getElementById("mainPage").classList.add("hidden");
+  document.getElementById("pendingPage").classList.remove("active");
+  document.getElementById("userUpdatePage").classList.add("active");
+  document.getElementById("rawPage").classList.remove("active");
+  fetchUserUpdateByCountry();
+  fetchAttachStuckByCountry();
+}
+
+function refreshUserUpdateIfActive() {
+  if (document.getElementById("userUpdatePage").classList.contains("active")) {
+    fetchUserUpdateByCountry();
+    fetchAttachStuckByCountry();
+  }
+}
+
+function showRawPage() {
+  document.getElementById("mainPage").classList.add("hidden");
+  document.getElementById("pendingPage").classList.remove("active");
+  document.getElementById("userUpdatePage").classList.remove("active");
+  document.getElementById("rawPage").classList.add("active");
+  fetchRawByCountry();
+  fetchRawJobs();
+}
+
+function showMainPage() {
+  document.getElementById("mainPage").classList.remove("hidden");
+  document.getElementById("pendingPage").classList.remove("active");
+  document.getElementById("userUpdatePage").classList.remove("active");
+  document.getElementById("rawPage").classList.remove("active");
+}
+
+async function fetchPendingByCountry() {
+  try {
+    const res = await fetch("/api/pending-by-country");
+    const data = await res.json();
+    renderPendingCountryGrid(data.countries || []);
+  } catch (e) {
+    console.error("获取待处理国家分布失败:", e);
+  }
+}
+
+function renderPendingCountryGrid(countries) {
+  const grid = document.getElementById("pendingCountryGrid");
+  if (!countries.length) {
+    grid.innerHTML =
+      '<span style="color:#666;font-size:12px">暂无待处理任务</span>';
+    return;
+  }
+  const total = countries.reduce((sum, c) => sum + c.count, 0);
+  grid.innerHTML = countries
+    .map((c) => {
+      const pct = ((c.count / total) * 100).toFixed(1);
+      const isUnknown = c.country === "未知";
+      const safeCountry = escapeJsString(c.country);
+      return `
+      <div class="pending-country-item${isUnknown ? "" : " has-target"}" 
+           onclick="filterByPendingCountry('${safeCountry}')">
+        <button class="country-action-btn" title="移到毛料库，暂不处理" onclick="event.stopPropagation(); moveCountryJobsToRaw('pending', '${safeCountry}', ${c.count})">✕</button>
+        <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
+        <div class="country-count">${c.count}</div>
+        <div class="country-label">${pct}% 待处理</div>
+      </div>
+    `;
+    })
+    .join("");
+}
+
+function filterByPendingCountry(country) {
+  window.location.hash = "";
+  setTimeout(() => {
+    setFilter("pending");
+    const locationFilter = document.getElementById("locationFilter");
+    if (locationFilter && country && country !== "未知") {
+      const options = locationFilter.options;
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].value === country) {
+          locationFilter.value = country;
+          onLocationChange();
+          break;
+        }
+      }
+    }
+  }, 100);
+}
+
+async function fetchUserUpdateByCountry() {
+  try {
+    const res = await fetch("/api/user-update-by-country");
+    const data = await res.json();
+    renderUserUpdateCountryGrid(data.countries || []);
+  } catch (e) {
+    console.error("获取待补资料国家分布失败:", e);
+  }
+}
+
+function renderUserUpdateCountryGrid(countries) {
+  const grid = document.getElementById("userUpdateCountryGrid");
+  if (!countries.length) {
+    grid.innerHTML =
+      '<span style="color:#666;font-size:12px">暂无待补资料任务</span>';
+    return;
+  }
+  const total = countries.reduce((sum, c) => sum + c.count, 0);
+  grid.innerHTML = countries
+    .map((c) => {
+      const pct = ((c.count / total) * 100).toFixed(1);
+      const isUnknown = c.country === "未知";
+      const safeCountry = escapeJsString(c.country);
+      return `
+      <div class="pending-country-item${isUnknown ? "" : " has-target"}" 
+           onclick="filterByUserUpdateCountry('${safeCountry}')">
+        <button class="country-action-btn" title="移到毛料库，暂不处理" onclick="event.stopPropagation(); moveCountryJobsToRaw('userUpdate', '${safeCountry}', ${c.count})">✕</button>
+        <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
+        <div class="country-count">${c.count}</div>
+        <div class="country-label">${pct}% 待补资料</div>
+      </div>
+    `;
+    })
+    .join("");
+}
+
+async function fetchAttachStuckByCountry() {
+  try {
+    const res = await fetch("/api/attach-stuck-by-country");
+    const data = await res.json();
+    renderAttachStuckGrid("pendingAttachStuckGrid", data.countries || []);
+    renderAttachStuckGrid("userUpdateAttachStuckGrid", data.countries || []);
+  } catch (e) {
+    console.error("获取 attach 未成功国家分布失败:", e);
+  }
+}
+
+function renderAttachStuckGrid(gridId, countries) {
+  const grid = document.getElementById(gridId);
+  if (!grid) return;
+  if (!countries.length) {
+    grid.innerHTML =
+      '<span style="color:#666;font-size:12px">暂无 attach 未成功任务</span>';
+    return;
+  }
+  const total = countries.reduce((sum, c) => sum + c.count, 0);
+  grid.innerHTML = countries
+    .map((c) => {
+      const pct = ((c.count / total) * 100).toFixed(1);
+      const isUnknown = c.country === "未知";
+      const safeCountry = escapeJsString(c.country);
+      return `
+      <div class="pending-country-item${isUnknown ? "" : " has-target"}">
+        <button class="country-action-btn restore" title="恢复为待补资料" onclick="event.stopPropagation(); restoreAttachStuckByCountry('${safeCountry}', ${c.count})">↺</button>
+        <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
+        <div class="country-count">${c.count}</div>
+        <div class="country-label">${pct}% attach 未成功</div>
+      </div>
+    `;
+    })
+    .join("");
+}
+
+async function restoreAttachStuckByCountry(country, count) {
+  const countText = count != null ? `将恢复 ${formatStatNum(count)} 条。` : "";
+  if (
+    !window.confirm(
+      `确认将 ${country} 下 attach 未成功的任务恢复为待补资料吗？${countText}`,
+    )
+  ) {
+    return;
+  }
+  showLoading("正在恢复任务...");
+  try {
+    const res = await fetch("/api/attach-stuck/restore", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ country }),
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      showToast(data.error || "恢复 attach 任务失败", true);
+      return;
+    }
+    showToast(`${country} 的 attach 未成功任务已恢复，共 ${data.restored} 条`);
+    await fetchStats();
+    await fetchPendingByCountry();
+    await fetchUserUpdateByCountry();
+    await fetchAttachStuckByCountry();
+    if (!document.getElementById("rawPage").classList.contains("active")) {
+      fetchUsers();
+    }
+  } catch (e) {
+    showToast("恢复 attach 任务失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function moveCountryJobsToRaw(scope, country, count) {
+  const scopeLabel = scope === "pending" ? "待处理任务" : "待补资料任务";
+  const countText = count != null ? `将移动 ${formatStatNum(count)} 条。` : "";
+  if (
+    !window.confirm(
+      `确认将 ${country} 的${scopeLabel}移到毛料库吗？${countText} 这些任务会先暂存，不再进入当前处理队列。`,
+    )
+  ) {
+    return;
+  }
+  showLoading("正在移到毛料库...");
+  try {
+    const res = await fetch("/api/jobs/move-to-raw", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ scope, country }),
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      showToast(data.error || "移到毛料库失败", true);
+      return;
+    }
+    showToast(`${country} 已移到毛料库，共 ${data.moved} 条`);
+    await fetchStats();
+    if (scope === "pending") {
+      await fetchPendingByCountry();
+    } else {
+      await fetchUserUpdateByCountry();
+    }
+    if (!document.getElementById("mainPage").classList.contains("hidden")) {
+      fetchUsers();
+    }
+  } catch (e) {
+    showToast("移到毛料库失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function fetchRawByCountry() {
+  try {
+    const res = await fetch("/api/raw-by-country");
+    const data = await res.json();
+    renderRawCountryGrid(data.countries || []);
+    renderRawLocationFilter(data.countries || []);
+  } catch (e) {
+    console.error("获取毛料库国家分布失败:", e);
+  }
+}
+
+function renderRawCountryGrid(countries) {
+  const grid = document.getElementById("rawCountryGrid");
+  if (!countries.length) {
+    grid.innerHTML =
+      '<span style="color:#666;font-size:12px">毛料库暂无数据</span>';
+    return;
+  }
+  const total = countries.reduce((sum, c) => sum + c.count, 0);
+  grid.innerHTML = countries
+    .map((c) => {
+      const pct = ((c.count / total) * 100).toFixed(1);
+      const isUnknown = c.country === "未知";
+      const safeCountry = escapeJsString(c.country);
+      return `
+      <div class="pending-country-item${isUnknown ? "" : " has-target"}"
+           onclick="filterRawByCountry('${safeCountry}')">
+        <button class="country-action-btn restore" title="恢复到 jobs 队列" onclick="event.stopPropagation(); restoreRawJobsByCountry('${safeCountry}', ${c.count})">↺</button>
+        <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
+        <div class="country-count">${c.count}</div>
+        <div class="country-label">${pct}% 毛料库</div>
+      </div>
+    `;
+    })
+    .join("");
+}
+
+async function fetchRawJobs() {
+  try {
+    const params = new URLSearchParams();
+    const search = document.getElementById("rawSearchInput").value.trim();
+    if (search) params.set("search", search);
+    if (currentRawLocation) params.set("location", currentRawLocation);
+    params.set("limit", "200");
+    const res = await fetch("/api/raw-jobs?" + params.toString());
+    const data = await res.json();
+    renderRawJobsTable(data.users || []);
+  } catch (e) {
+    console.error("获取毛料库列表失败:", e);
+  }
+}
+
+function renderRawJobsTable(users) {
+  const el = document.getElementById("rawTable");
+  if (!users.length) {
+    el.innerHTML =
+      '<tr><td colspan="10" style="color:#666;text-align:center;padding:24px">暂无毛料库任务</td></tr>';
+    return;
+  }
+  el.innerHTML = users
+    .map((u) => {
+      const nick = (u.nickname || "")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+      const fans = u.followerCount != null ? formatNum(u.followerCount) : "-";
+      const videos = u.videoCount != null ? u.videoCount : "-";
+      const loc = u.locationCreated || "-";
+      const guessedLoc = u.guessedLocation || "-";
+      const sources = (u.sources || []).join(", ");
+      const created = u.createdAt ? formatTime(u.createdAt) : "-";
+      const statusTag = u.status || "-";
+      return `<tr>
+      <td class="user-id" data-label="用户名">@${u.uniqueId}</td>
+      <td data-label="昵称">${nick}</td>
+      <td data-label="粉丝">${fans}</td>
+      <td data-label="视频">${videos}</td>
+      <td data-label="国家">${loc}</td>
+      <td data-label="猜测国家">${guessedLoc}</td>
+      <td data-label="来源">${sources || "-"}</td>
+      <td data-label="状态">${statusTag}</td>
+      <td data-label="创建时间" style="font-size:11px;color:#888">${created}</td>
+      <td data-label="操作" style="text-align:center"><button onclick="restoreRawJob('${u.uniqueId}')" style="background:#22c55e;color:#fff;border:none;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;">恢复</button></td>
+    </tr>`;
+    })
+    .join("");
+}
+
+function renderRawLocationFilter(countries) {
+  const sel = document.getElementById("rawLocationFilter");
+  if (!sel) return;
+  const val = currentRawLocation;
+  sel.innerHTML =
+    '<option value="">全部国家</option>' +
+    countries
+      .map(
+        (c) =>
+          `<option value="${c.country}"${val === c.country ? " selected" : ""}>${c.country} (${c.count})</option>`,
+      )
+      .join("");
+}
+
+function filterRawByCountry(country) {
+  currentRawLocation = country;
+  const sel = document.getElementById("rawLocationFilter");
+  if (sel) sel.value = country;
+  fetchRawJobs();
+}
+
+function onRawLocationChange() {
+  const sel = document.getElementById("rawLocationFilter");
+  currentRawLocation = sel.value;
+  fetchRawJobs();
+}
+
+function clearRawFilters() {
+  currentRawLocation = "";
+  const rawSearchInput = document.getElementById("rawSearchInput");
+  const rawLocationFilter = document.getElementById("rawLocationFilter");
+  if (rawSearchInput) rawSearchInput.value = "";
+  if (rawLocationFilter) rawLocationFilter.value = "";
+  fetchRawJobs();
+}
+
+async function restoreRawJob(uniqueId) {
+  if (!window.confirm(`确认将 @${uniqueId} 从毛料库恢复到 jobs 队列吗？`)) {
+    return;
+  }
+  showLoading("正在恢复...");
+  try {
+    const res = await fetch("/api/raw-jobs/restore", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ uniqueId }),
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      showToast(data.error || "恢复失败", true);
+      return;
+    }
+    showToast(`@${uniqueId} 已恢复到队列`);
+    await fetchStats();
+    await fetchRawByCountry();
+    await fetchRawJobs();
+  } catch (e) {
+    showToast("恢复失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function restoreFilteredRawJobs() {
+  const search = document.getElementById("rawSearchInput").value.trim();
+  const location = currentRawLocation;
+  let desc = "当前筛选条件";
+  if (search && location) desc = `搜索="${search}" + 国家=${location}`;
+  else if (search) desc = `搜索="${search}"`;
+  else if (location) desc = `国家=${location}`;
+  if (
+    !window.confirm(`确认将毛料库中符合【${desc}】的任务恢复到 jobs 队列吗？`)
+  ) {
+    return;
+  }
+  showLoading("正在恢复筛选任务...");
+  try {
+    const body = {};
+    if (search) body.search = search;
+    if (location) body.location = location;
+    const res = await fetch("/api/raw-jobs/restore", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      showToast(data.error || "恢复失败", true);
+      return;
+    }
+    showToast(`已恢复 ${data.restored} 条任务到队列`);
+    await fetchStats();
+    await fetchRawByCountry();
+    await fetchRawJobs();
+  } catch (e) {
+    showToast("恢复失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+async function restoreRawJobsByCountry(country, count) {
+  const countText = count != null ? `将恢复 ${formatStatNum(count)} 条。` : "";
+  if (
+    !window.confirm(
+      `确认将 ${country} 从毛料库恢复到 jobs 队列吗？${countText}`,
+    )
+  ) {
+    return;
+  }
+  showLoading("正在恢复...");
+  try {
+    const res = await fetch("/api/raw-jobs/restore", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ country }),
+    });
+    const data = await res.json();
+    if (!res.ok || data.error) {
+      showToast(data.error || "恢复失败", true);
+      return;
+    }
+    showToast(`${country} 已恢复到队列，共 ${data.restored} 条`);
+    await fetchStats();
+    await fetchRawByCountry();
+    await fetchRawJobs();
+  } catch (e) {
+    showToast("恢复失败: " + e.message, true);
+  } finally {
+    hideLoading();
+  }
+}
+
+function filterByUserUpdateCountry(country) {
+  window.location.hash = "";
+  setTimeout(() => {
+    const locationFilter = document.getElementById("locationFilter");
+    if (locationFilter && country && country !== "未知") {
+      const options = locationFilter.options;
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].value === country) {
+          locationFilter.value = country;
+          onLocationChange();
+          break;
+        }
+      }
+    }
+  }, 100);
+}
+
+// 初始化
+fetchStats();
+fetchUsers();
+fetchClientErrors();
+setInterval(fetchStats, 10000);
+setInterval(fetchUsers, 10000);
+setInterval(fetchClientErrors, 10000);
+setInterval(refreshUserUpdateIfActive, 10000);