tt-help-cli-ycl 1.3.62 → 1.3.64

package/src/watch/public/app.js

@@ -368,6 +368,10 @@ function renderTable(users) {
       }
       const claimTime = u.claimedAt ? formatTime(u.claimedAt) : "-";
       const procTime = u.processedAt ? formatTime(u.processedAt) : "-";
+      const refreshTime =
+        u.ttSeller && !u.verified && u.refreshTime
+          ? formatTime(u.refreshTime)
+          : "-";
       const statusCodeDisplay =
         u.statusCode != null && u.statusCode !== 0
           ? `<span class="tag error" style="font-size:10px">${u.statusCode}</span>`
@@ -378,6 +382,7 @@ function renderTable(users) {
       <td data-label="粉丝">${fans}</td>
       <td data-label="视频">${videos}</td>
       <td data-label="国家">${loc}</td>
+      <td data-label="最近刷新" style="font-size:11px;color:#888">${refreshTime}</td>
       <td data-label="最近发布" style="font-size:11px;color:#888">${latestVideo}</td>
       <td data-label="猜测国家">${guessedLoc}</td>
       <td data-label="来源">${sources || "-"}</td>
@@ -738,44 +743,9 @@ async function batchResetErrors() {
   }
 }
 
-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();
-    }
-  });
+document.getElementById("statTargetCard").addEventListener("click", () => {
+  navigateToTarget();
+});
 
 // Hash 路由
 window.addEventListener("hashchange", handleRoute);
@@ -789,6 +759,8 @@ function handleRoute() {
     showUserUpdatePage();
   } else if (hash === "#raw") {
     showRawPage();
+  } else if (hash === "#target") {
+    showTargetPage();
   } else {
     showMainPage();
   }
@@ -815,6 +787,7 @@ function showPendingPage() {
   document.getElementById("pendingPage").classList.add("active");
   document.getElementById("userUpdatePage").classList.remove("active");
   document.getElementById("rawPage").classList.remove("active");
+  document.getElementById("targetPage").classList.remove("active");
   fetchPendingByCountry();
   fetchAttachStuckByCountry();
 }
@@ -824,6 +797,7 @@ function showUserUpdatePage() {
   document.getElementById("pendingPage").classList.remove("active");
   document.getElementById("userUpdatePage").classList.add("active");
   document.getElementById("rawPage").classList.remove("active");
+  document.getElementById("targetPage").classList.remove("active");
   fetchUserUpdateByCountry();
   fetchAttachStuckByCountry();
 }
@@ -840,6 +814,7 @@ function showRawPage() {
   document.getElementById("pendingPage").classList.remove("active");
   document.getElementById("userUpdatePage").classList.remove("active");
   document.getElementById("rawPage").classList.add("active");
+  document.getElementById("targetPage").classList.remove("active");
   fetchRawByCountry();
   fetchRawJobs();
 }
@@ -849,8 +824,219 @@ function showMainPage() {
   document.getElementById("pendingPage").classList.remove("active");
   document.getElementById("userUpdatePage").classList.remove("active");
   document.getElementById("rawPage").classList.remove("active");
+  document.getElementById("targetPage").classList.remove("active");
+}
+
+function navigateToTarget() {
+  window.location.hash = "#target";
+}
+
+function showTargetPage() {
+  document.getElementById("mainPage").classList.add("hidden");
+  document.getElementById("pendingPage").classList.remove("active");
+  document.getElementById("userUpdatePage").classList.remove("active");
+  document.getElementById("rawPage").classList.remove("active");
+  document.getElementById("targetPage").classList.add("active");
+  fetchTargetByCountry();
+  // 同步统计
+  if (currentStats) {
+    document.getElementById("targetPageStatTotal").textContent = formatStatNum(
+      currentStats.targetUsers || 0,
+      { full: true },
+    );
+  }
+}
+
+let currentTargetData = null;
+
+async function fetchTargetByCountry() {
+  try {
+    const res = await fetch("/api/target-users-by-country");
+    const data = await res.json();
+    currentTargetData = data;
+    renderTargetCountryGrid(data.countries || []);
+    renderTargetLocationFilter(data.countries || []);
+    renderTargetTable(data.countries || []);
+    document.getElementById("targetPageStatTotal").textContent = formatStatNum(
+      data.total || 0,
+      { full: true },
+    );
+    document.getElementById("targetPageStatCountries").textContent = (
+      data.countries || []
+    ).length;
+  } catch (e) {
+    console.error("获取目标商家数据失败:", e);
+  }
+}
+
+function renderTargetCountryGrid(countries) {
+  const grid = document.getElementById("targetCountryGrid");
+  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 safeCountry = escapeJsString(c.country);
+      return `
+      <div class="pending-country-item has-target"
+           onclick="filterTargetByCountry('${safeCountry}')">
+        <div class="country-name">${c.country}</div>
+        <div class="country-count">${c.count}</div>
+        <div class="country-label">${pct}% 目标商家</div>
+      </div>
+    `;
+    })
+    .join("");
+}
+
+function renderTargetLocationFilter(countries) {
+  const sel = document.getElementById("targetLocationFilter");
+  if (!sel) return;
+  const val = sel.value;
+  sel.innerHTML =
+    '<option value="">全部国家</option>' +
+    countries
+      .map(
+        (c) =>
+          `<option value="${c.country}"${val === c.country ? " selected" : ""}>${c.country} (${c.count})</option>`,
+      )
+      .join("");
+}
+
+function renderTargetTable(countries) {
+  const el = document.getElementById("targetTable");
+  const search = document.getElementById("targetSearchInput")
+    ? document.getElementById("targetSearchInput").value.trim().toLowerCase()
+    : "";
+  const location = currentTargetLocation;
+
+  let allUsers = [];
+  for (const c of countries) {
+    if (location && c.country !== location) continue;
+    allUsers = allUsers.concat(c.users);
+  }
+
+  if (search) {
+    allUsers = allUsers.filter(
+      (u) =>
+        (u.uniqueId || "").toLowerCase().includes(search) ||
+        (u.nickname || "").toLowerCase().includes(search),
+    );
+  }
+
+  if (!allUsers.length) {
+    el.innerHTML =
+      '<tr><td colspan="8" style="color:#666;text-align:center;padding:24px">暂无目标商家</td></tr>';
+    return;
+  }
+
+  el.innerHTML = allUsers
+    .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 latestVideo = u.latestVideoTime
+        ? formatTime(u.latestVideoTime * 1000)
+        : "-";
+      const refreshTime = u.refreshTime ? formatTime(u.refreshTime) : "-";
+      const sources = (u.sources || []).join(", ");
+
+      let statusTag = "";
+      if (u.status === "done")
+        statusTag = '<span class="tag processed">已完成</span>';
+      else if (u.status === "processing")
+        statusTag = '<span class="tag processing">处理中</span>';
+      else if (u.status === "pending")
+        statusTag = '<span class="tag pending">待处理</span>';
+      else if (u.status === "error")
+        statusTag = '<span class="tag error">错误</span>';
+      else if (u.status === "restricted")
+        statusTag = '<span class="tag error">受限</span>';
+      else 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="最近发布" style="font-size:11px;color:#888">${latestVideo}</td>
+      <td data-label="最近刷新" style="font-size:11px;color:#888">${refreshTime}</td>
+      <td data-label="来源">${sources || "-"}</td>
+      <td data-label="状态">${statusTag}</td>
+    </tr>`;
+    })
+    .join("");
+}
+
+function filterTargetByCountry(country) {
+  currentTargetLocation = country;
+  const sel = document.getElementById("targetLocationFilter");
+  if (sel) sel.value = country;
+  if (currentTargetData) {
+    renderTargetTable(currentTargetData.countries || []);
+  }
 }
 
+function onTargetLocationChange() {
+  const sel = document.getElementById("targetLocationFilter");
+  currentTargetLocation = sel.value;
+  if (currentTargetData) {
+    renderTargetTable(currentTargetData.countries || []);
+  }
+}
+
+function clearTargetFilters() {
+  currentTargetLocation = "";
+  const searchInput = document.getElementById("targetSearchInput");
+  const locationFilter = document.getElementById("targetLocationFilter");
+  if (searchInput) searchInput.value = "";
+  if (locationFilter) locationFilter.value = "";
+  if (currentTargetData) {
+    renderTargetTable(currentTargetData.countries || []);
+  }
+}
+
+let targetSearchTimer = null;
+
+document.getElementById("targetSearchInput").addEventListener("input", () => {
+  if (targetSearchTimer) clearTimeout(targetSearchTimer);
+  targetSearchTimer = setTimeout(() => {
+    if (currentTargetData) {
+      renderTargetTable(currentTargetData.countries || []);
+    }
+  }, 300);
+});
+
+document
+  .getElementById("exportTargetCsvBtn")
+  .addEventListener("click", async () => {
+    showLoading("正在导出目标用户...");
+    try {
+      const res = await fetch("/api/target-users-by-country", {
+        headers: { Accept: "text/csv" },
+      });
+      if (!res.ok) throw new Error("HTTP " + res.status);
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "target-users-by-country.csv";
+      a.click();
+      URL.revokeObjectURL(url);
+      showToast("CSV 文件已开始下载");
+    } catch (e) {
+      showToast("导出失败: " + e.message, true);
+    } finally {
+      hideLoading();
+    }
+  });
+
 async function fetchPendingByCountry() {
   try {
     const res = await fetch("/api/pending-by-country");
@@ -877,7 +1063,10 @@ function renderPendingCountryGrid(countries) {
       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-action-btns">
+          <button class="country-action-btn restore" title="重置为需要预处理" onclick="event.stopPropagation(); resetPendingByCountry('${safeCountry}', ${c.count})">↺</button>
+          <button class="country-action-btn" title="移到毛料库，暂不处理" onclick="event.stopPropagation(); moveCountryJobsToRaw('pending', '${safeCountry}', ${c.count})">✕</button>
+        </div>
         <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
         <div class="country-count">${c.count}</div>
         <div class="country-label">${pct}% 待处理</div>
@@ -931,7 +1120,9 @@ function renderUserUpdateCountryGrid(countries) {
       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-action-btns">
+          <button class="country-action-btn" title="移到毛料库，暂不处理" onclick="event.stopPropagation(); moveCountryJobsToRaw('userUpdate', '${safeCountry}', ${c.count})">✕</button>
+        </div>
         <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
         <div class="country-count">${c.count}</div>
         <div class="country-label">${pct}% 待补资料</div>
@@ -968,7 +1159,9 @@ function renderAttachStuckGrid(gridId, countries) {
       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-action-btns">
+          <button class="country-action-btn restore" title="恢复为待补资料" onclick="event.stopPropagation(); restoreAttachStuckByCountry('${safeCountry}', ${c.count})">↺</button>
+        </div>
         <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
         <div class="country-count">${c.count}</div>
         <div class="country-label">${pct}% attach 未成功</div>
@@ -1053,6 +1246,40 @@ async function moveCountryJobsToRaw(scope, country, count) {
   }
 }
 
+async function resetPendingByCountry(country, count) {
+  const countText = count != null ? `将重置 ${formatStatNum(count)} 条。` : "";
+  if (
+    !window.confirm(
+      `确认将 ${country} 下已预处理的待处理任务重置为需要预处理吗？${countText}`,
+    )
+  ) {
+    return;
+  }
+  showLoading("正在重置...");
+  try {
+    const res = await fetch("/api/pending-by-country/reset", {
+      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.reset} 条`);
+    await fetchStats();
+    await fetchPendingByCountry();
+    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");
@@ -1080,7 +1307,9 @@ function renderRawCountryGrid(countries) {
       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-action-btns">
+          <button class="country-action-btn restore" title="恢复到 jobs 队列" onclick="event.stopPropagation(); restoreRawJobsByCountry('${safeCountry}', ${c.count})">↺</button>
+        </div>
         <div class="country-name">${isUnknown ? "🌍 " : ""}${c.country}</div>
         <div class="country-count">${c.count}</div>
         <div class="country-label">${pct}% 毛料库</div>
@@ -1096,6 +1325,11 @@ async function fetchRawJobs() {
     const search = document.getElementById("rawSearchInput").value.trim();
     if (search) params.set("search", search);
     if (currentRawLocation) params.set("location", currentRawLocation);
+    const videoFilter = document.getElementById("rawVideoFilter");
+    if (videoFilter && videoFilter.checked) params.set("hasVideo", "1");
+    const followerFilter = document.getElementById("rawFollowerFilter");
+    if (followerFilter && followerFilter.checked)
+      params.set("hasFollower", "1");
     params.set("limit", "200");
     const res = await fetch("/api/raw-jobs?" + params.toString());
     const data = await res.json();
@@ -1171,8 +1405,16 @@ function clearRawFilters() {
   currentRawLocation = "";
   const rawSearchInput = document.getElementById("rawSearchInput");
   const rawLocationFilter = document.getElementById("rawLocationFilter");
+  const rawVideoFilter = document.getElementById("rawVideoFilter");
+  const rawFollowerFilter = document.getElementById("rawFollowerFilter");
   if (rawSearchInput) rawSearchInput.value = "";
   if (rawLocationFilter) rawLocationFilter.value = "";
+  if (rawVideoFilter) rawVideoFilter.checked = false;
+  if (rawFollowerFilter) rawFollowerFilter.checked = false;
+  fetchRawJobs();
+}
+
+function onRawFilterChange() {
   fetchRawJobs();
 }
 
@@ -1206,10 +1448,20 @@ async function restoreRawJob(uniqueId) {
 async function restoreFilteredRawJobs() {
   const search = document.getElementById("rawSearchInput").value.trim();
   const location = currentRawLocation;
+  const videoFilter = document.getElementById("rawVideoFilter");
+  const hasVideo = videoFilter && videoFilter.checked;
+  const followerFilter = document.getElementById("rawFollowerFilter");
+  const hasFollower = followerFilter && followerFilter.checked;
   let desc = "当前筛选条件";
   if (search && location) desc = `搜索="${search}" + 国家=${location}`;
   else if (search) desc = `搜索="${search}"`;
   else if (location) desc = `国家=${location}`;
+  if (hasVideo || hasFollower) {
+    const tags = [];
+    if (hasVideo) tags.push("有视频");
+    if (hasFollower) tags.push("有粉丝");
+    desc += ` + ${tags.join("、")}`;
+  }
   if (
     !window.confirm(`确认将毛料库中符合【${desc}】的任务恢复到 jobs 队列吗？`)
   ) {
@@ -1220,6 +1472,8 @@ async function restoreFilteredRawJobs() {
     const body = {};
     if (search) body.search = search;
     if (location) body.location = location;
+    if (hasVideo) body.hasVideo = true;
+    if (hasFollower) body.hasFollower = true;
     const res = await fetch("/api/raw-jobs/restore", {
       method: "POST",
       headers: { "Content-Type": "application/json" },

package/src/watch/public/index.html

@@ -125,6 +125,7 @@
               <th>粉丝</th>
               <th>视频</th>
               <th>国家</th>
+              <th class="sortable" data-sort="refreshTime">最近刷新 <span class="sort-icon">↕</span></th>
               <th class="sortable" data-sort="latestVideoTime">最近发布 <span class="sort-icon">↕</span></th>
               <th>猜测国家</th>
               <th>来源</th>
@@ -244,6 +245,13 @@
             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>
+          <label style="display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#999;cursor:pointer;">
+            <input type="checkbox" id="rawVideoFilter" onchange="onRawFilterChange()" style="accent-color:#22c55e;"> 有视频
+          </label>
+          <label style="display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#999;cursor:pointer;">
+            <input type="checkbox" id="rawFollowerFilter" onchange="onRawFilterChange()" style="accent-color:#22c55e;">
+            有粉丝
+          </label>
           <button onclick="clearRawFilters()">清空筛选</button>
           <button onclick="restoreFilteredRawJobs()"
             style="background:#22c55e;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;">恢复当前筛选到
@@ -271,6 +279,61 @@
       </div>
     </div>
   </div>
+  <div id="targetPage">
+    <div class="stats" style="margin-bottom:16px">
+      <div class="stat-card">
+        <div class="label">目标商家</div>
+        <div class="value target" id="targetPageStatTotal">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">
+        <div class="label">目标国家</div>
+        <div class="value" id="targetPageStatCountries" style="font-size:17px;color:#a78bfa">0</div>
+      </div>
+      <div class="stat-card clickable" id="exportTargetCsvBtn" style="background:rgba(34,197,94,0.12);cursor:pointer">
+        <div class="label">导出 CSV</div>
+      </div>
+    </div>
+    <div class="target-page-layout">
+      <div class="target-side-card">
+        <h3>🎯 目标商家国家分布</h3>
+        <div class="pending-country-grid" id="targetCountryGrid">
+          <span style="color:#666;font-size:12px">加载中...</span>
+        </div>
+        <div class="muted-tip">点击国家卡片可筛选列表。</div>
+      </div>
+      <div class="target-table-card">
+        <h3>目标商家列表</h3>
+        <div class="controls">
+          <input type="text" id="targetSearchInput" placeholder="搜索目标商家用户名 / 昵称...">
+          <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;">
+            <option value="">全部国家</option>
+          </select>
+          <button onclick="clearTargetFilters()">清空筛选</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>
+              </tr>
+            </thead>
+            <tbody id="targetTable"></tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
   <script src="app.js"></script>
 </body>
 

package/src/watch/public/style.css

@@ -634,6 +634,14 @@ td.user-id:hover {
   display: block;
 }
 
+#targetPage {
+  display: none;
+}
+
+#targetPage.active {
+  display: block;
+}
+
 #mainPage.hidden {
   display: none;
 }
@@ -670,10 +678,15 @@ td.user-id:hover {
   position: relative;
 }
 
-.country-action-btn {
+.country-action-btns {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+}
+
+.country-action-btn {
   width: 28px;
   height: 28px;
   border: 1px solid rgba(248, 113, 113, 0.35);
@@ -937,6 +950,66 @@ td.user-id:hover {
   color: #a78bfa;
 }
 
+.target-country-group {
+  background: #1a1a24;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.target-country-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #2a2a3a;
+}
+
+.target-country-header .country-flag {
+  font-size: 20px;
+  font-weight: 700;
+  color: #a78bfa;
+}
+
+.target-country-header .country-user-count {
+  font-size: 13px;
+  color: #888;
+  background: #2a2a3a;
+  padding: 2px 10px;
+  border-radius: 10px;
+}
+
+.target-page-layout {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  gap: 16px;
+}
+
+.target-side-card {
+  background: #1a1a24;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.target-side-card h3 {
+  font-size: 14px;
+  color: #a78bfa;
+  margin-bottom: 12px;
+}
+
+.target-table-card {
+  background: #1a1a24;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.target-table-card h3 {
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 12px;
+}
+
 @media (max-width: 768px) {
   body {
     padding: 8px;
@@ -977,6 +1050,10 @@ td.user-id:hover {
     grid-template-columns: 1fr;
   }
 
+  .target-page-layout {
+    grid-template-columns: 1fr;
+  }
+
   .table-wrap {
     padding: 10px;
   }