tt-help-cli-ycl 1.3.7 → 1.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tt-help-cli-ycl",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "TikTok user & video data scraper - extract ttSeller, verified, locationCreated from HTML source",
   "type": "module",
   "bin": {

package/src/watch/public/index.html

@@ -11,6 +11,8 @@
   .header h1 { font-size: 18px; color: #fe2c55; }
   .header .meta { font-size: 12px; color: #888; }
   .header .status { font-size: 12px; color: #4ade80; }
+  .script-link { font-size: 12px; color: #60a5fa; text-decoration: none; padding: 2px 8px; border: 1px solid #60a5fa; border-radius: 4px; }
+  .script-link:hover { background: #60a5fa; color: #fff; }
   .stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 16px; }
   .stat-card { background: #1a1a24; border-radius: 8px; padding: 16px; text-align: center; }
   .stat-card .label { font-size: 12px; color: #888; margin-bottom: 8px; }
@@ -42,11 +44,22 @@
   .controls button:hover { border-color: #fe2c55; color: #fff; }
   .controls button.active { background: #fe2c55; color: #fff; border-color: #fe2c55; }
   .add-users { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
-  .add-users input { flex: 1; padding: 6px 12px; border: 1px solid #333; border-radius: 6px; background: #0f0f13; color: #e0e0e0; font-size: 13px; outline: none; }
-  .add-users input:focus { border-color: #fe2c55; }
   .add-users button { padding: 6px 16px; border: none; border-radius: 6px; background: #fe2c55; color: #fff; font-size: 13px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
   .add-users button:hover { background: #e61944; }
-  .add-users .hint { font-size: 11px; color: #666; white-space: nowrap; }
+  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; }
+  .modal { background: #1a1a24; border-radius: 12px; padding: 24px; width: 520px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
+  .modal h3 { font-size: 16px; color: #e0e0e0; margin-bottom: 6px; }
+  .modal .hint { font-size: 12px; color: #888; margin-bottom: 16px; }
+  .modal textarea { width: 100%; height: 180px; padding: 10px 14px; border: 1px solid #333; border-radius: 8px; background: #0f0f13; color: #e0e0e0; font-size: 13px; font-family: inherit; outline: none; resize: vertical; line-height: 1.6; }
+  .modal textarea:focus { border-color: #fe2c55; }
+  .modal textarea::placeholder { color: #555; }
+  .modal .preview { margin-top: 8px; font-size: 12px; color: #60a5fa; min-height: 20px; }
+  .modal .btn-row { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
+  .modal .btn-row button { padding: 8px 20px; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
+  .modal .btn-cancel { background: #2a2a3a; color: #ccc; }
+  .modal .btn-cancel:hover { background: #333; }
+  .modal .btn-submit { background: #fe2c55; color: #fff; }
+  .modal .btn-submit:hover { background: #e61944; }
   .toast { position: fixed; top: 16px; right: 16px; padding: 10px 20px; border-radius: 6px; font-size: 13px; z-index: 999; transition: opacity 0.3s; }
   .toast.success { background: #166534; color: #fff; }
   .toast.error { background: #991b1b; color: #fff; }
@@ -82,15 +95,46 @@
   ::-webkit-scrollbar { width: 6px; }
   ::-webkit-scrollbar-track { background: #1a1a24; }
   ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
-  @media (max-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } .charts { grid-template-columns: 1fr; } }
+  @media (max-width: 768px) {
+    body { padding: 8px; }
+    .header { flex-direction: column; gap: 6px; align-items: flex-start; }
+    .header h1 { font-size: 16px; }
+    .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
+    .stat-card { padding: 10px; }
+    .stat-card .label { font-size: 11px; }
+    .stat-card .value { font-size: 18px; }
+    .charts { grid-template-columns: 1fr; }
+    .table-wrap { padding: 10px; }
+    .controls { flex-wrap: wrap; gap: 6px; }
+    .controls input { flex: 0 0 100%; width: 100%; }
+    .controls button { flex: 0 0 calc(33.33% - 4px); min-width: 0; text-align: center; white-space: nowrap; font-size: 11px; padding: 8px 4px; }
+    .controls select { flex: 0 0 100%; width: 100%; }
+    .table-scroll { max-height: none; overflow: visible; }
+    table, thead, tbody, th, td, tr { display: block; }
+    thead { display: none; }
+    tr { background: #22222e; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #2a2a3a; }
+    tr:hover { background: #2a2a3a; }
+    td { padding: 4px 0; border: none; text-align: left; position: relative; padding-left: 40%; font-size: 13px; }
+    td::before { content: attr(data-label); position: absolute; left: 0; width: 36%; text-align: right; color: #888; font-size: 12px; font-weight: 600; white-space: nowrap; }
+    td.user-id { font-size: 15px; font-weight: 700; color: #60a5fa; padding-left: 0; border-bottom: 1px solid #2a2a3a; margin-bottom: 4px; padding-bottom: 6px; }
+    td.user-id::before { display: none; }
+    td.user-id:hover { color: #fe2c55; }
+    .add-users { justify-content: center; }
+    .modal { width: 95vw; padding: 16px; }
+    .modal textarea { height: 140px; }
+  }
 </style>
 </head>
 <body>
-<div class="header">
-  <h1>TikTok 采集监控</h1>
-  <span class="meta" id="fileMeta"></span>
-  <span class="status" id="lastUpdate"></span>
-</div>
+  <div class="header">
+    <h1>TikTok 采集监控</h1>
+    <div class="meta" id="fileMeta">加载中...</div>
+    <div style="display:flex;gap:8px;align-items:center">
+      <a href="/scripts/run-explore.sh" class="script-link" download>mac</a>
+      <a href="/scripts/run-explore.bat" class="script-link" download>windows</a>
+      <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>
@@ -113,9 +157,7 @@
 <div class="table-wrap">
   <h3>用户列表</h3>
   <div class="add-users">
-    <input type="text" id="addUserInput" placeholder="输入用户名，多个用逗号或空格分隔（如 @user1,@user2）">
-    <button onclick="addUsers()">插入队列</button>
-    <span class="hint">插入到队列最前面优先处理</span>
+    <button onclick="openAddModal()">+ 插入队列</button>
   </div>
   <div id="toast" class="toast" style="display:none"></div>
   <div class="controls">
@@ -127,6 +169,9 @@
     <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="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>
@@ -142,6 +187,7 @@ const COLORS = ['#fe2c55','#60a5fa','#4ade80','#facc15','#f97316','#a855f7','#ec
 let currentFilter = 'all';
 let currentStats = null;
 let currentUsers = [];
+let currentLocation = '';
 let prevStatValues = {};
 let prevUserMap = {};
 
@@ -150,6 +196,7 @@ async function fetchStats() {
     const res = await fetch('/api/stats');
     currentStats = await res.json();
     renderStats();
+    renderLocationFilter();
   } catch (e) {
     document.getElementById('lastUpdate').textContent = '\u8fde\u63a5\u5931\u8d25';
   }
@@ -165,6 +212,7 @@ async function fetchUsers() {
     }
     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();
@@ -255,17 +303,24 @@ function renderTable(users) {
     if (u.noVideo) extraTags.push('<span class="tag no-video">\u65e0\u89c6\u9891</span>');
     if (u.keepFollow) extraTags.push('<span class="tag keep-follow">\u5173\u6ce8\u5df2\u4fdd\u7559</span>');
     if (u.hasFollowData === false) extraTags.push('<span class="tag no-follow">\u5173\u6ce8\u672a\u83b7\u53d6</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 claimer = u.claimedBy || '-';
+    const claimTime = u.claimedAt ? formatTime(u.claimedAt) : '-';
+    const procTime = u.processedAt ? formatTime(u.processedAt) : '-';
     return `<tr${rowClass}>
-      <td class="user-id">@${u.uniqueId}</td>
-      <td>${(u.nickname || '').replace(/</g, '&lt;').replace(/>/g, '&gt;')}</td>
-      <td>${u.followerCount != null ? formatNum(u.followerCount) : '-'}</td>
-      <td>${u.videoCount != null ? u.videoCount : '-'}</td>
-      <td>${u.locationCreated || '-'}</td>
-      <td>${sources || '-'}</td>
-      <td>${statusTag} ${extraTags.join(' ')}</td>
-      <td style="font-size:11px;color:#888">${u.claimedBy || '-'}</td>
-      <td style="font-size:11px;color:#888">${u.claimedAt ? formatTime(u.claimedAt) : '-'}</td>
-      <td style="font-size:11px;color:#888">${u.processedAt ? formatTime(u.processedAt) : '-'}</td>
+      <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="来源">${sources || '-'}</td>
+      <td data-label="状态">${statusTag} ${extraTags.join(' ')}</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('');
 
@@ -292,16 +347,76 @@ function setFilter(f) {
   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();
+}
+
 document.getElementById('searchInput').addEventListener('input', () => {
   fetchUsers();
 });
 
-async function addUsers() {
-  const input = document.getElementById('addUserInput');
-  const raw = input.value.trim();
+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 = raw.split(/[,，\s]+/).map(s => s.replace(/^@/, '').trim()).filter(Boolean);
+  const names = parseUsernames(raw);
   if (names.length === 0) return;
 
   try {
@@ -312,8 +427,8 @@ async function addUsers() {
     });
     const data = await res.json();
     if (data.error) { showToast(data.error, true); return; }
+    closeAddModal();
     showToast(data.message || `\u5df2\u63d2\u5165 ${data.added} \u4e2a\u7528\u6237`);
-    input.value = '';
     fetchStats();
     fetchUsers();
   } catch (e) {
@@ -329,8 +444,8 @@ function showToast(msg, isError) {
   setTimeout(() => { toast.style.display = 'none'; }, 3000);
 }
 
-document.getElementById('addUserInput').addEventListener('keydown', e => {
-  if (e.key === 'Enter') addUsers();
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') closeAddModal();
 });
 
 document.getElementById('userTable').addEventListener('click', e => {

package/src/watch/server.mjs

@@ -1,7 +1,7 @@
 import http from 'http';
 import os from 'os';
 
-import { readFileSync } from 'fs';
+import { readFileSync, existsSync } from 'fs';
 import { join, dirname } from 'path';
 import { fileURLToPath } from 'url';
 import { spawn } from 'child_process';
@@ -233,6 +233,9 @@ export function startWatchServer(outputFile, port = 3000, existingStore) {
             (u.nickname || '').toLowerCase().includes(s)
           );
         }
+        if (params.location) {
+          filtered = filtered.filter(u => u.locationCreated === params.location);
+        }
 
         const statusOrder = { processing: 0, pending: 1, done: 2, error: 3, restricted: 4 };
         filtered.sort((a, b) => {
@@ -261,6 +264,20 @@ export function startWatchServer(outputFile, port = 3000, existingStore) {
         return;
       }
 
+      const scriptMatch = routePath.match(/^\/scripts\/(.+)$/);
+      if (req.method === 'GET' && scriptMatch) {
+        const batDir = join(__dirname, '../../bat');
+        const scriptFile = join(batDir, scriptMatch[1]);
+        if (existsSync(scriptFile)) {
+          const content = readFileSync(scriptFile);
+          const ext = scriptMatch[1].split('.').pop();
+          const mime = ext === 'sh' ? 'text/x-sh' : ext === 'bat' ? 'text/bat' : 'text/plain';
+          res.writeHead(200, { 'Content-Type': `${mime}; charset=utf-8` });
+          res.end(content);
+          return;
+        }
+      }
+
       res.writeHead(404);
       res.end('Not Found');
     });