tt-help-cli-ycl 1.3.40 → 1.3.43

package/src/watch/public/index.html

@@ -117,6 +117,15 @@
       background: #25253a;
     }
 
+    .stat-card.clickable.pending-card:hover {
+      background: rgba(250, 204, 21, 0.15);
+    }
+
+    .stat-card.clickable.pending-card:hover,
+    .stat-card.clickable#statUserUpdateCard:hover {
+      background: rgba(167, 139, 250, 0.15);
+    }
+
     .charts {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -530,6 +539,193 @@
       color: #fff;
     }
 
+    .tag.unknown-country {
+      background: #4b5563;
+      color: #fff;
+    }
+
+    #pendingPage {
+      display: none;
+    }
+
+    #pendingPage.active {
+      display: block;
+    }
+
+    #userUpdatePage {
+      display: none;
+    }
+
+    #userUpdatePage.active {
+      display: block;
+    }
+
+    #rawPage {
+      display: none;
+    }
+
+    #rawPage.active {
+      display: block;
+    }
+
+    #mainPage.hidden {
+      display: none;
+    }
+
+    .pending-country-card {
+      background: #1a1a24;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 16px;
+    }
+
+    .pending-country-card h3 {
+      font-size: 16px;
+      color: #facc15;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .pending-country-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 12px;
+    }
+
+    .pending-country-item {
+      background: #2a2a3a;
+      border-radius: 8px;
+      padding: 16px;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: 1px solid transparent;
+      position: relative;
+    }
+
+    .country-action-btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 28px;
+      height: 28px;
+      border: 1px solid rgba(248, 113, 113, 0.35);
+      border-radius: 999px;
+      background: rgba(127, 29, 29, 0.45);
+      color: #fca5a5;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .country-action-btn:hover {
+      background: rgba(153, 27, 27, 0.85);
+      color: #fff;
+      border-color: rgba(248, 113, 113, 0.8);
+    }
+
+    .country-action-btn.restore {
+      border-color: rgba(74, 222, 128, 0.35);
+      background: rgba(20, 83, 45, 0.45);
+      color: #86efac;
+    }
+
+    .country-action-btn.restore:hover {
+      background: rgba(22, 101, 52, 0.9);
+      border-color: rgba(74, 222, 128, 0.8);
+      color: #fff;
+    }
+
+    .raw-page-layout {
+      display: grid;
+      grid-template-columns: 320px 1fr;
+      gap: 16px;
+    }
+
+    .raw-side-card {
+      background: #1a1a24;
+      border-radius: 8px;
+      padding: 16px;
+    }
+
+    .raw-side-card h3 {
+      font-size: 14px;
+      color: #f59e0b;
+      margin-bottom: 12px;
+    }
+
+    .raw-table-card {
+      background: #1a1a24;
+      border-radius: 8px;
+      padding: 16px;
+    }
+
+    .raw-table-card h3 {
+      font-size: 14px;
+      color: #888;
+      margin-bottom: 12px;
+    }
+
+    .muted-tip {
+      font-size: 12px;
+      color: #777;
+      margin-top: 8px;
+      line-height: 1.5;
+    }
+
+    .pending-country-item:hover {
+      border-color: #facc15;
+      background: #33334a;
+    }
+
+    .pending-country-item .country-name {
+      font-size: 18px;
+      font-weight: 700;
+      color: #facc15;
+      margin-bottom: 4px;
+    }
+
+    .pending-country-item .country-count {
+      font-size: 28px;
+      font-weight: 700;
+      color: #fff;
+    }
+
+    .pending-country-item .country-label {
+      font-size: 12px;
+      color: #888;
+      margin-top: 2px;
+    }
+
+    .pending-country-item.has-target {
+      border-color: #a78bfa;
+    }
+
+    .pending-country-item.has-target .country-name {
+      color: #a78bfa;
+    }
+
+    .back-btn {
+      padding: 6px 14px;
+      border: 1px solid #333;
+      border-radius: 6px;
+      background: #2a2a3a;
+      color: #ccc;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+      margin-bottom: 16px;
+    }
+
+    .back-btn:hover {
+      border-color: #fe2c55;
+      color: #fff;
+    }
+
     .tag.processed {
       background: #166534;
       color: #fff;
@@ -711,6 +907,10 @@
         grid-template-columns: 1fr;
       }
 
+      .raw-page-layout {
+        grid-template-columns: 1fr;
+      }
+
       .table-wrap {
         padding: 10px;
       }
@@ -840,118 +1040,251 @@
       <span class="status" id="lastUpdate">--</span>
     </div>
   </div>
-  <div class="stats">
-    <div class="stat-card">
-      <div class="label">总用户</div>
-      <div class="value total" id="statTotal">0</div>
-    </div>
-    <div class="stat-card">
-      <div class="label">处理中</div>
-      <div class="value total" id="statProcessing">0</div>
+  <div id="mainPage">
+    <div class="stats">
+      <div class="stat-card">
+        <div class="label">总用户</div>
+        <div class="value total" id="statTotal">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="label">处理中</div>
+        <div class="value total" id="statProcessing">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="label">已完成</div>
+        <div class="value done" id="statDone">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" id="statPendingCard" onclick="navigateToPending()">
+        <div class="label">待处理</div>
+        <div class="value pending" id="statPending">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="label">错误</div>
+        <div class="value error" id="statError">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="label">受限</div>
+        <div class="value error" id="statRestricted">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" id="statUserUpdateCard" onclick="navigateToUserUpdate()">
+        <div class="label">待补资料</div>
+        <div class="value target" id="statUserUpdateTasks">0</div>
+      </div>
+      <div class="stat-card clickable" id="statRawCard" onclick="navigateToRaw()">
+        <div class="label">毛料库</div>
+        <div class="value target" id="statRawJobs">0</div>
+      </div>
+      <div class="stat-card clickable" id="statTargetCard">
+        <div class="label">目标商家</div>
+        <div class="value target" id="statTarget">0</div>
+      </div>
     </div>
-    <div class="stat-card">
-      <div class="label">已完成</div>
-      <div class="value done" id="statDone">0</div>
+    <div class="client-errors-section" id="clientErrorsSection" style="display:none">
+      <div class="section-header">
+        <h3>客户端异常</h3>
+        <span class="error-badge" id="clientErrorsBadge">0</span>
+      </div>
+      <table class="client-errors-table">
+        <thead>
+          <tr>
+            <th>客户端</th>
+            <th>错误类型</th>
+            <th>错误次数</th>
+            <th>验证码次数</th>
+            <th>阶段</th>
+            <th>错误详情</th>
+            <th>当时处理的 TikTok 用户</th>
+            <th>时间</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="clientErrorsBody"></tbody>
+      </table>
     </div>
-    <div class="stat-card">
-      <div class="label">待处理</div>
-      <div class="value pending" id="statPending">0</div>
+    <div class="charts">
+      <div class="chart-box">
+        <h3>国家统计</h3>
+        <div id="countryChart"></div>
+      </div>
+      <div class="chart-box">
+        <h3>来源分布</h3>
+        <div id="sourceChart"></div>
+      </div>
     </div>
-    <div class="stat-card">
-      <div class="label">错误</div>
-      <div class="value error" id="statError">0</div>
+    <div class="table-wrap">
+      <h3>用户列表</h3>
+      <div class="add-users">
+        <button onclick="openAddModal()">+ 插入队列</button>
+      </div>
+      <div id="toast" class="toast" style="display:none"></div>
+      <div class="controls">
+        <input type="text" id="searchInput" placeholder="搜索用户名 / 昵称...">
+        <button data-filter="all" class="active" onclick="setFilter('all')">全部</button>
+        <button data-filter="processing" onclick="setFilter('processing')">处理中</button>
+        <button data-filter="pending" onclick="setFilter('pending')">待处理</button>
+        <button data-filter="done" onclick="setFilter('done')">已完成</button>
+        <button data-filter="error" onclick="setFilter('error')">错误</button>
+        <button data-filter="restricted" onclick="setFilter('restricted')">受限</button>
+        <button data-filter="target" onclick="setFilter('target')" style="background:#7c3aed;color:#fff">目标商家</button>
+        <select id="targetLocationFilter" onchange="onTargetLocationChange()"
+          style="padding:6px 10px;border:1px solid #7c3aed;border-radius:6px;background:#2a2a3a;color:#ccc;font-size:12px;cursor:pointer;outline:none;display:none">
+          <option value="">全部目标国家</option>
+        </select>
+        <button id="batchResetBtn" onclick="batchResetErrors()"
+          style="display:none;padding:6px 10px;border:1px solid #f87171;border-radius:6px;background:transparent;color:#f87171;font-size:12px;cursor:pointer;font-weight:600;transition:all 0.2s;white-space:nowrap;">&#x21bb;
+          批量重新处理 (<span id="batchResetCount">0</span>)</button>
+        <select id="locationFilter" onchange="onLocationChange()"
+          style="padding:6px 10px;border:1px solid #333;border-radius:6px;background:#2a2a3a;color:#ccc;font-size:12px;cursor:pointer;outline:none;">
+          <option value="">全部国家</option>
+        </select>
+      </div>
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>用户名</th>
+              <th>昵称</th>
+              <th>粉丝</th>
+              <th>视频</th>
+              <th>国家</th>
+              <th>猜测国家</th>
+              <th>来源</th>
+              <th>状态</th>
+              <th>处理端</th>
+              <th>领取时间</th>
+              <th>完成时间</th>
+            </tr>
+          </thead>
+          <tbody id="userTable"></tbody>
+        </table>
+      </div>
     </div>
-    <div class="stat-card">
-      <div class="label">受限</div>
-      <div class="value error" id="statRestricted">0</div>
+  </div>
+  <div id="pendingPage">
+    <div class="stats" style="margin-bottom:16px">
+      <div class="stat-card">
+        <div class="label">总用户</div>
+        <div class="value total" id="pendingStatTotal">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToMain()" style="background:rgba(96,165,250,0.1)">
+        <div class="label">← 返回主页面</div>
+      </div>
+      <div class="stat-card">
+        <div class="label">待处理</div>
+        <div class="value pending" id="pendingStatPending">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToUserUpdate()">
+        <div class="label">待补资料</div>
+        <div class="value target" id="pendingStatUserUpdateTasks">0</div>
+      </div>
+      <div class="stat-card clickable" onclick="navigateToRaw()">
+        <div class="label">毛料库</div>
+        <div class="value target" id="pendingStatRawJobs">0</div>
+      </div>
     </div>
-    <div class="stat-card">
-      <div class="label">待补资料</div>
-      <div class="value target" id="statUserUpdateTasks">0</div>
+    <div class="pending-country-card">
+      <h3>📊 待处理任务按国家分布</h3>
+      <div class="pending-country-grid" id="pendingCountryGrid">
+        <span style="color:#666;font-size:12px">加载中...</span>
+      </div>
     </div>
-    <div class="stat-card clickable" id="statTargetCard">
-      <div class="label">目标商家</div>
-      <div class="value target" id="statTarget">0</div>
+    <div class="pending-country-card">
+      <h3>🔁 Attach 未成功（状态 1）</h3>
+      <div class="pending-country-grid" id="pendingAttachStuckGrid">
+        <span style="color:#666;font-size:12px">加载中...</span>
+      </div>
     </div>
   </div>
-  <div class="client-errors-section" id="clientErrorsSection" style="display:none">
-    <div class="section-header">
-      <h3>客户端异常</h3>
-      <span class="error-badge" id="clientErrorsBadge">0</span>
+  <div id="userUpdatePage">
+    <div class="stats" style="margin-bottom:16px">
+      <div class="stat-card">
+        <div class="label">总用户</div>
+        <div class="value total" id="userUpdateStatTotal">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToMain()" style="background:rgba(167,139,250,0.1)">
+        <div class="label">← 返回主页面</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToPending()">
+        <div class="label">待处理</div>
+        <div class="value pending" id="userUpdateStatPending">0</div>
+      </div>
+      <div class="stat-card">
+        <div class="label">待补资料</div>
+        <div class="value target" id="userUpdateStatUserUpdateTasks">0</div>
+      </div>
+      <div class="stat-card clickable" onclick="navigateToRaw()">
+        <div class="label">毛料库</div>
+        <div class="value target" id="userUpdateStatRawJobs">0</div>
+      </div>
     </div>
-    <table class="client-errors-table">
-      <thead>
-        <tr>
-          <th>客户端</th>
-          <th>错误类型</th>
-          <th>错误次数</th>
-          <th>验证码次数</th>
-          <th>阶段</th>
-          <th>错误详情</th>
-          <th>当时处理的 TikTok 用户</th>
-          <th>时间</th>
-          <th>操作</th>
-        </tr>
-      </thead>
-      <tbody id="clientErrorsBody"></tbody>
-    </table>
-  </div>
-  <div class="charts">
-    <div class="chart-box">
-      <h3>国家统计</h3>
-      <div id="countryChart"></div>
+    <div class="pending-country-card">
+      <h3>📝 待补资料任务按国家分布</h3>
+      <div class="pending-country-grid" id="userUpdateCountryGrid">
+        <span style="color:#666;font-size:12px">加载中...</span>
+      </div>
     </div>
-    <div class="chart-box">
-      <h3>来源分布</h3>
-      <div id="sourceChart"></div>
+    <div class="pending-country-card">
+      <h3>🔁 Attach 未成功（状态 1）</h3>
+      <div class="pending-country-grid" id="userUpdateAttachStuckGrid">
+        <span style="color:#666;font-size:12px">加载中...</span>
+      </div>
     </div>
   </div>
-  <div class="table-wrap">
-    <h3>用户列表</h3>
-    <div class="add-users">
-      <button onclick="openAddModal()">+ 插入队列</button>
-    </div>
-    <div id="toast" class="toast" style="display:none"></div>
-    <div class="controls">
-      <input type="text" id="searchInput" placeholder="搜索用户名 / 昵称...">
-      <button data-filter="all" class="active" onclick="setFilter('all')">全部</button>
-      <button data-filter="processing" onclick="setFilter('processing')">处理中</button>
-      <button data-filter="pending" onclick="setFilter('pending')">待处理</button>
-      <button data-filter="done" onclick="setFilter('done')">已完成</button>
-      <button data-filter="error" onclick="setFilter('error')">错误</button>
-      <button data-filter="restricted" onclick="setFilter('restricted')">受限</button>
-      <button data-filter="target" onclick="setFilter('target')" style="background:#7c3aed;color:#fff">目标商家</button>
-      <select id="targetLocationFilter" onchange="onTargetLocationChange()"
-        style="padding:6px 10px;border:1px solid #7c3aed;border-radius:6px;background:#2a2a3a;color:#ccc;font-size:12px;cursor:pointer;outline:none;display:none">
-        <option value="">全部目标国家</option>
-      </select>
-      <button id="batchResetBtn" onclick="batchResetErrors()"
-        style="display:none;padding:6px 10px;border:1px solid #f87171;border-radius:6px;background:transparent;color:#f87171;font-size:12px;cursor:pointer;font-weight:600;transition:all 0.2s;white-space:nowrap;">&#x21bb;
-        批量重新处理 (<span id="batchResetCount">0</span>)</button>
-      <select id="locationFilter" onchange="onLocationChange()"
-        style="padding:6px 10px;border:1px solid #333;border-radius:6px;background:#2a2a3a;color:#ccc;font-size:12px;cursor:pointer;outline:none;">
-        <option value="">全部国家</option>
-      </select>
+  <div id="rawPage">
+    <div class="stats" style="margin-bottom:16px">
+      <div class="stat-card">
+        <div class="label">毛料库</div>
+        <div class="value target" id="rawPageStatRawJobs">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToMain()" style="background:rgba(245,158,11,0.12)">
+        <div class="label">← 返回主页面</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToPending()">
+        <div class="label">待处理</div>
+        <div class="value pending" id="rawPageStatPending">0</div>
+      </div>
+      <div class="stat-card clickable pending-card" onclick="navigateToUserUpdate()">
+        <div class="label">待补资料</div>
+        <div class="value target" id="rawPageStatUserUpdateTasks">0</div>
+      </div>
     </div>
-    <div class="table-scroll">
-      <table>
-        <thead>
-          <tr>
-            <th>用户名</th>
-            <th>昵称</th>
-            <th>粉丝</th>
-            <th>视频</th>
-            <th>国家</th>
-            <th>猜测国家</th>
-            <th>来源</th>
-            <th>状态</th>
-            <th>处理端</th>
-            <th>领取时间</th>
-            <th>完成时间</th>
-          </tr>
-        </thead>
-        <tbody id="userTable"></tbody>
-      </table>
+    <div class="raw-page-layout">
+      <div class="raw-side-card">
+        <h3>🧺 毛料库国家分布</h3>
+        <div class="pending-country-grid" id="rawCountryGrid">
+          <span style="color:#666;font-size:12px">加载中...</span>
+        </div>
+        <div class="muted-tip">点击国家卡片可筛选列表；右上角恢复按钮会把该国家任务恢复回 jobs 队列。</div>
+      </div>
+      <div class="raw-table-card">
+        <h3>毛料库列表</h3>
+        <div class="controls">
+          <input type="text" id="rawSearchInput" placeholder="搜索毛料库用户名 / 昵称...">
+          <select id="rawLocationFilter" onchange="onRawLocationChange()"
+            style="padding:6px 10px;border:1px solid #333;border-radius:6px;background:#2a2a3a;color:#ccc;font-size:12px;cursor:pointer;outline:none;">
+            <option value="">全部国家</option>
+          </select>
+          <button onclick="clearRawFilters()">清空筛选</button>
+        </div>
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th>用户名</th>
+                <th>昵称</th>
+                <th>粉丝</th>
+                <th>视频</th>
+                <th>国家</th>
+                <th>猜测国家</th>
+                <th>来源</th>
+                <th>状态</th>
+                <th>创建时间</th>
+              </tr>
+            </thead>
+            <tbody id="rawTable"></tbody>
+          </table>
+        </div>
+      </div>
     </div>
   </div>
   <script>
@@ -961,6 +1294,7 @@
     let currentUsers = [];
     let currentLocation = '';
     let currentTargetLocation = '';
+    let currentRawLocation = '';
     let prevStatValues = {};
     let prevUserMap = {};
 
@@ -1078,6 +1412,30 @@
       flashEl('statRestricted', d.restrictedUsers);
       flashEl('statTarget', d.targetUsers);
       flashEl('statUserUpdateTasks', d.userUpdateTasks || 0);
+      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);
+      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);
+      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 = '\u66f4\u65b0\u4e8e ' + new Date().toLocaleTimeString();
       document.getElementById('fileMeta').textContent =
         formatStatNum(d.processingUsers || 0) +
@@ -1247,6 +1605,12 @@
       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);
     }
@@ -1317,13 +1681,24 @@
     }
 
     function showToast(msg, isError) {
-      const toast = document.getElementById('toast');
+      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 escapeJsString(str) {
+      return String(str).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+    }
+
     document.addEventListener('keydown', e => {
       if (e.key === 'Escape') closeAddModal();
     });
@@ -1502,6 +1877,409 @@
     setInterval(fetchStats, 10000);
     setInterval(fetchUsers, 10000);
     setInterval(fetchClientErrors, 10000);
+
+    // 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 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(() => {
+        const searchInput = document.getElementById('searchInput');
+        const locationFilter = document.getElementById('locationFilter');
+        // 设置状态筛选为 pending
+        setFilter('pending');
+        // 如果有国家筛选下拉框，设置国家
+        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;
+      }
+      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);
+      }
+    }
+
+    async function moveCountryJobsToRaw(scope, country, count) {
+      const scopeLabel = scope === 'pending' ? '待处理任务' : '待补资料任务';
+      const countText = count != null ? `将移动 ${formatStatNum(count)} 条。` : '';
+      if (!window.confirm(`确认将 ${country} 的${scopeLabel}移到毛料库吗？${countText} 这些任务会先暂存，不再进入当前处理队列。`)) {
+        return;
+      }
+      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);
+      }
+    }
+
+    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="9" 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>
+        </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 restoreRawJobsByCountry(country, count) {
+      const countText = count != null ? `将恢复 ${formatStatNum(count)} 条。` : '';
+      if (!window.confirm(`确认将 ${country} 从毛料库恢复到 jobs 队列吗？${countText}`)) {
+        return;
+      }
+      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);
+      }
+    }
+
+    function filterByUserUpdateCountry(country) {
+      // 返回主页面，筛选待补资料（通过搜索 tt_seller 为空的用户）
+      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);
+    }
   </script>
 </body>