tt-help-cli-ycl 1.3.11 → 1.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +17 -17
  2. package/cli.js +9 -9
  3. package/package.json +45 -46
  4. package/{bat → scripts}/run-explore.bat +68 -68
  5. package/{bat → scripts}/run-explore.ps1 +81 -81
  6. package/{bat → scripts}/run-explore.sh +73 -73
  7. package/scripts/test-captcha-lib.mjs +68 -0
  8. package/scripts/test-captcha.mjs +81 -0
  9. package/scripts/test-incognito-lib.mjs +36 -0
  10. package/scripts/test-login-state.mjs +128 -0
  11. package/scripts/test-safe-click.mjs +45 -0
  12. package/src/cli/auto.js +186 -157
  13. package/src/cli/config.js +116 -0
  14. package/src/cli/explore-default.js +83 -0
  15. package/src/cli/explore.js +227 -181
  16. package/src/cli/progress.js +111 -111
  17. package/src/cli/refresh.js +216 -0
  18. package/src/cli/scrape.js +47 -47
  19. package/src/cli/utils.js +18 -18
  20. package/src/cli/videos.js +41 -41
  21. package/src/cli/watch.js +31 -31
  22. package/src/lib/args.js +456 -391
  23. package/src/lib/browser/anti-detect.js +23 -23
  24. package/src/lib/browser/cdp.js +194 -142
  25. package/src/lib/browser/launch.js +43 -43
  26. package/src/lib/browser/page.js +146 -87
  27. package/src/lib/constants.js +119 -119
  28. package/src/lib/delay.js +54 -54
  29. package/src/lib/explore-fetch.js +118 -118
  30. package/src/lib/fetcher.js +45 -45
  31. package/src/lib/filter.js +66 -66
  32. package/src/lib/io.js +54 -54
  33. package/src/lib/output.js +80 -80
  34. package/src/{scraper/modules/page-error-detector.mjs → lib/page-error-detector.js} +70 -70
  35. package/src/lib/parser.js +47 -47
  36. package/src/lib/retry.js +45 -45
  37. package/src/lib/scrape.js +40 -40
  38. package/src/{scraper/modules/scroll-collector.mjs → lib/scroll-collector.js} +231 -189
  39. package/src/lib/url.js +52 -52
  40. package/src/main.js +48 -0
  41. package/src/results/user-videos-bar.lar.lar.moeta.json +37 -0
  42. package/src/scraper/{auto-core.mjs → auto-core.js} +203 -194
  43. package/src/scraper/{core.mjs → core.js} +211 -190
  44. package/src/scraper/{explore-core.mjs → explore-core.js} +180 -171
  45. package/src/scraper/modules/{captcha-handler.mjs → captcha-handler.js} +114 -114
  46. package/src/scraper/modules/{comment-extractor.mjs → comment-extractor.js} +74 -69
  47. package/src/scraper/modules/{follow-extractor.mjs → follow-extractor.js} +121 -121
  48. package/src/scraper/modules/{guess-extractor.mjs → guess-extractor.js} +51 -51
  49. package/src/scraper/modules/page-error-detector.js +1 -0
  50. package/src/scraper/modules/{page-helpers.mjs → page-helpers.js} +48 -48
  51. package/src/scraper/modules/scroll-collector.js +8 -0
  52. package/src/scraper/refresh-core.js +179 -0
  53. package/src/videos/{core.mjs → core.js} +126 -126
  54. package/src/watch/data-store.js +431 -0
  55. package/src/watch/public/index.html +721 -690
  56. package/src/watch/{server.mjs → server.js} +484 -349
  57. package/src/main.mjs +0 -234
  58. package/src/test-auto-follow.cjs +0 -109
  59. package/src/test-extractors.cjs +0 -75
  60. package/src/test-follow.cjs +0 -41
  61. package/src/watch/data-store.mjs +0 -274
package/src/watch/public/index.html CHANGED
@@ -1,692 +1,723 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>TikTok 采集监控</title>
7
- <style>
8
- * { margin: 0; padding: 0; box-sizing: border-box; }
9
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f13; color: #e0e0e0; padding: 16px; }
10
- .header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1a1a24; border-radius: 8px; margin-bottom: 16px; }
11
- .header h1 { font-size: 18px; color: #fe2c55; }
12
- .header .meta { font-size: 12px; color: #888; }
13
- .header .status { font-size: 12px; color: #4ade80; }
14
- .script-link { font-size: 12px; color: #60a5fa; text-decoration: none; padding: 2px 8px; border: 1px solid #60a5fa; border-radius: 4px; }
15
- .script-link:hover { background: #60a5fa; color: #fff; }
16
- .stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 16px; }
17
- .stat-card { background: #1a1a24; border-radius: 8px; padding: 16px; text-align: center; }
18
- .stat-card .label { font-size: 12px; color: #888; margin-bottom: 8px; }
19
- .stat-card .value { font-size: 28px; font-weight: 700; }
20
- .stat-card .value.total { color: #60a5fa; }
21
- .stat-card .value.done { color: #4ade80; }
22
- .stat-card .value.pending { color: #facc15; }
23
- .stat-card .value.error { color: #f87171; }
24
- .stat-card .value.target { color: #a78bfa; }
25
- .stat-card.clickable { cursor: pointer; }
26
- .stat-card.clickable:hover { background: #25253a; }
27
- .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
28
- .chart-box { background: #1a1a24; border-radius: 8px; padding: 16px; }
29
- .chart-box h3 { font-size: 14px; color: #888; margin-bottom: 12px; }
30
- .bar-row { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; }
31
- .bar-row .name { width: 50px; color: #ccc; flex-shrink: 0; }
32
- .bar-row .bar-bg { flex: 1; background: #2a2a3a; border-radius: 4px; height: 20px; overflow: hidden; margin: 0 8px; }
33
- .bar-row .bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; display: flex; align-items: center; padding-left: 6px; font-size: 11px; color: #fff; }
34
- .bar-row .count { width: 80px; text-align: right; color: #888; flex-shrink: 0; }
35
- .source-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 13px; }
36
- .source-row .s-name { width: 80px; color: #ccc; flex-shrink: 0; }
37
- .source-row .s-val { color: #888; }
38
- .table-wrap { background: #1a1a24; border-radius: 8px; padding: 16px; }
39
- .table-wrap h3 { font-size: 14px; color: #888; margin-bottom: 12px; }
40
- .controls { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
41
- .controls input { flex: 1; min-width: 150px; padding: 6px 12px; border: 1px solid #333; border-radius: 6px; background: #0f0f13; color: #e0e0e0; font-size: 13px; outline: none; }
42
- .controls input:focus { border-color: #fe2c55; }
43
- .controls button { padding: 6px 14px; border: 1px solid #333; border-radius: 6px; background: #2a2a3a; color: #ccc; font-size: 12px; cursor: pointer; transition: all 0.2s; }
44
- .controls button:hover { border-color: #fe2c55; color: #fff; }
45
- .controls button.active { background: #fe2c55; color: #fff; border-color: #fe2c55; }
46
- .add-users { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
47
- .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; }
48
- .add-users button:hover { background: #e61944; }
49
- .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; }
50
- .modal { background: #1a1a24; border-radius: 12px; padding: 24px; width: 520px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
51
- .modal h3 { font-size: 16px; color: #e0e0e0; margin-bottom: 6px; }
52
- .modal .hint { font-size: 12px; color: #888; margin-bottom: 16px; }
53
- .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; }
54
- .modal textarea:focus { border-color: #fe2c55; }
55
- .modal textarea::placeholder { color: #555; }
56
- .modal .preview { margin-top: 8px; font-size: 12px; color: #60a5fa; min-height: 20px; }
57
- .modal .btn-row { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
58
- .modal .btn-row button { padding: 8px 20px; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
59
- .modal .btn-cancel { background: #2a2a3a; color: #ccc; }
60
- .modal .btn-cancel:hover { background: #333; }
61
- .modal .btn-submit { background: #fe2c55; color: #fff; }
62
- .modal .btn-submit:hover { background: #e61944; }
63
- .toast { position: fixed; top: 16px; right: 16px; padding: 10px 20px; border-radius: 6px; font-size: 13px; z-index: 999; transition: opacity 0.3s; }
64
- .toast.success { background: #166534; color: #fff; }
65
- .toast.error { background: #991b1b; color: #fff; }
66
- @keyframes flashChange { 0% { filter: brightness(1.8); box-shadow: 0 0 12px rgba(254,44,85,0.6); } 100% { filter: brightness(1); box-shadow: none; } }
67
- .flash-change { animation: flashChange 0.6s ease-out; }
68
- @keyframes rowFlash { 0% { background: rgba(254,44,85,0.25); } 100% { background: transparent; } }
69
- tr.row-flash { animation: rowFlash 0.8s ease-out; }
70
- @keyframes barFlash { 0% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
71
- .bar-fill.bar-flash { animation: barFlash 0.5s ease-out; }
72
- .table-scroll { max-height: 500px; overflow-y: auto; }
73
- table { width: 100%; border-collapse: collapse; font-size: 12px; }
74
- th { position: sticky; top: 0; background: #22222e; padding: 8px 10px; text-align: left; color: #888; font-weight: 600; border-bottom: 1px solid #333; white-space: nowrap; }
75
- td { padding: 6px 10px; border-bottom: 1px solid #1f1f2a; white-space: nowrap; }
76
- tr:hover { background: #1f1f2a; }
77
- td.user-id { cursor: pointer; color: #60a5fa; }
78
- td.user-id:hover { color: #fe2c55; }
79
- .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
80
- .tag.seller { background: #dc2626; color: #fff; }
81
- .tag.verified { background: #2563eb; color: #fff; }
82
- .tag.pending { background: #ca8a04; color: #000; }
83
- .tag.processing { background: #0ea5e9; color: #fff; }
84
- .tag.error { background: #991b1b; color: #fff; }
85
- .tag.processed { background: #166534; color: #fff; }
86
- .tag.no-video { background: #7c3aed; color: #fff; }
87
- .tag.no-follow { background: #b45309; color: #fff; }
88
- .tag.keep-follow { background: #059669; color: #fff; }
89
- .tag.pinned { background: #f59e0b; color: #000; }
90
- .context-menu { position: fixed; background: #1e1e2e; border: 1px solid #333; border-radius: 6px; padding: 4px 0; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 1000; }
91
- .context-menu-item { padding: 8px 16px; font-size: 13px; color: #ccc; cursor: pointer; display: flex; align-items: center; gap: 8px; }
92
- .context-menu-item:hover { background: #fe2c55; color: #fff; }
93
- .context-menu-item.danger { color: #f87171; }
94
- .context-menu-item.danger:hover { background: #991b1b; color: #fff; }
95
- ::-webkit-scrollbar { width: 6px; }
96
- ::-webkit-scrollbar-track { background: #1a1a24; }
97
- ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
98
- .client-errors-section { margin-bottom: 16px; }
99
- .section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
100
- .section-header h3 { font-size: 14px; color: #e0e0e0; }
101
- .error-badge { background: #991b1b; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
102
- .client-errors-table { width: 100%; border-collapse: collapse; background: #1a1a24; border-radius: 8px; overflow: hidden; font-size: 13px; }
103
- .client-errors-table thead tr { background: #22222e; }
104
- .client-errors-table th { padding: 10px 12px; text-align: left; color: #888; font-weight: 600; font-size: 12px; border-bottom: 1px solid #2a2a3a; }
105
- .client-errors-table td { padding: 8px 12px; border-bottom: 1px solid #1f1f2e; }
106
- .client-errors-table tbody tr:last-child td { border-bottom: none; }
107
- .client-errors-table tbody tr:hover { background: #22222e; }
108
- .error-type-captcha { color: #f59e0b; }
109
- .error-type-network { color: #f87171; }
110
- .error-type-other { color: #a78bfa; }
111
- @media (max-width: 768px) {
112
- body { padding: 8px; }
113
- .header { flex-direction: column; gap: 6px; align-items: flex-start; }
114
- .header h1 { font-size: 16px; }
115
- .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
116
- .stat-card { padding: 10px; }
117
- .stat-card .label { font-size: 11px; }
118
- .stat-card .value { font-size: 18px; }
119
- .charts { grid-template-columns: 1fr; }
120
- .table-wrap { padding: 10px; }
121
- .controls { flex-wrap: wrap; gap: 6px; }
122
- .controls input { flex: 0 0 100%; width: 100%; }
123
- .controls button { flex: 0 0 calc(33.33% - 4px); min-width: 0; text-align: center; white-space: nowrap; font-size: 11px; padding: 8px 4px; }
124
- #batchResetBtn { flex: 0 0 100% !important; font-size: 12px !important; padding: 8px 12px !important; }
125
- .controls select { flex: 0 0 100%; width: 100%; }
126
- .table-scroll { max-height: none; overflow: visible; }
127
- table, thead, tbody, th, td, tr { display: block; }
128
- thead { display: none; }
129
- tr { background: #22222e; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #2a2a3a; }
130
- tr:hover { background: #2a2a3a; }
131
- td { padding: 4px 0; border: none; text-align: left; position: relative; padding-left: 40%; font-size: 13px; }
132
- 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; }
133
- 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; }
134
- td.user-id::before { display: none; }
135
- td.user-id:hover { color: #fe2c55; }
136
- .add-users { justify-content: center; }
137
- .modal { width: 95vw; padding: 16px; }
138
- .modal textarea { height: 140px; }
139
- }
140
- </style>
141
- </head>
142
- <body>
143
- <div class="header">
144
- <h1>TikTok 采集监控</h1>
145
- <div class="meta" id="fileMeta">加载中...</div>
146
- <div style="display:flex;gap:8px;align-items:center">
147
- <a href="/scripts/run-explore.sh" class="script-link" download>mac</a>
148
- <a href="/scripts/run-explore.bat" class="script-link" download>windows</a>
149
- <span class="status" id="lastUpdate">--</span>
150
- </div>
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TikTok 采集监控</title>
7
+ <style>
8
+ * { margin: 0; padding: 0; box-sizing: border-box; }
9
+ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f13; color: #e0e0e0; padding: 16px; }
10
+ .header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1a1a24; border-radius: 8px; margin-bottom: 16px; }
11
+ .header h1 { font-size: 18px; color: #fe2c55; }
12
+ .header .meta { font-size: 12px; color: #888; }
13
+ .header .status { font-size: 12px; color: #4ade80; }
14
+ .script-link { font-size: 12px; color: #60a5fa; text-decoration: none; padding: 2px 8px; border: 1px solid #60a5fa; border-radius: 4px; }
15
+ .script-link:hover { background: #60a5fa; color: #fff; }
16
+ .stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 16px; }
17
+ .stat-card { background: #1a1a24; border-radius: 8px; padding: 16px; text-align: center; }
18
+ .stat-card .label { font-size: 12px; color: #888; margin-bottom: 8px; }
19
+ .stat-card .value { font-size: 28px; font-weight: 700; }
20
+ .stat-card .value.total { color: #60a5fa; }
21
+ .stat-card .value.done { color: #4ade80; }
22
+ .stat-card .value.pending { color: #facc15; }
23
+ .stat-card .value.error { color: #f87171; }
24
+ .stat-card .value.target { color: #a78bfa; }
25
+ .stat-card.clickable { cursor: pointer; }
26
+ .stat-card.clickable:hover { background: #25253a; }
27
+ .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
28
+ .chart-box { background: #1a1a24; border-radius: 8px; padding: 16px; }
29
+ .chart-box h3 { font-size: 14px; color: #888; margin-bottom: 12px; }
30
+ .bar-row { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; }
31
+ .bar-row .name { width: 50px; color: #ccc; flex-shrink: 0; }
32
+ .bar-row .bar-bg { flex: 1; background: #2a2a3a; border-radius: 4px; height: 20px; overflow: hidden; margin: 0 8px; }
33
+ .bar-row .bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; display: flex; align-items: center; padding-left: 6px; font-size: 11px; color: #fff; }
34
+ .bar-row .count { width: 80px; text-align: right; color: #888; flex-shrink: 0; }
35
+ .source-row { display: flex; align-items: center; margin-bottom: 6px; font-size: 13px; }
36
+ .source-row .s-name { width: 80px; color: #ccc; flex-shrink: 0; }
37
+ .source-row .s-val { color: #888; }
38
+ .table-wrap { background: #1a1a24; border-radius: 8px; padding: 16px; }
39
+ .table-wrap h3 { font-size: 14px; color: #888; margin-bottom: 12px; }
40
+ .controls { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
41
+ .controls input { flex: 1; min-width: 150px; padding: 6px 12px; border: 1px solid #333; border-radius: 6px; background: #0f0f13; color: #e0e0e0; font-size: 13px; outline: none; }
42
+ .controls input:focus { border-color: #fe2c55; }
43
+ .controls button { padding: 6px 14px; border: 1px solid #333; border-radius: 6px; background: #2a2a3a; color: #ccc; font-size: 12px; cursor: pointer; transition: all 0.2s; }
44
+ .controls button:hover { border-color: #fe2c55; color: #fff; }
45
+ .controls button.active { background: #fe2c55; color: #fff; border-color: #fe2c55; }
46
+ .add-users { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
47
+ .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; }
48
+ .add-users button:hover { background: #e61944; }
49
+ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000; display: flex; align-items: center; justify-content: center; }
50
+ .modal { background: #1a1a24; border-radius: 12px; padding: 24px; width: 520px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
51
+ .modal h3 { font-size: 16px; color: #e0e0e0; margin-bottom: 6px; }
52
+ .modal .hint { font-size: 12px; color: #888; margin-bottom: 16px; }
53
+ .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; }
54
+ .modal textarea:focus { border-color: #fe2c55; }
55
+ .modal textarea::placeholder { color: #555; }
56
+ .modal .preview { margin-top: 8px; font-size: 12px; color: #60a5fa; min-height: 20px; }
57
+ .modal .btn-row { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
58
+ .modal .btn-row button { padding: 8px 20px; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; font-weight: 600; transition: all 0.2s; }
59
+ .modal .btn-cancel { background: #2a2a3a; color: #ccc; }
60
+ .modal .btn-cancel:hover { background: #333; }
61
+ .modal .btn-submit { background: #fe2c55; color: #fff; }
62
+ .modal .btn-submit:hover { background: #e61944; }
63
+ .toast { position: fixed; top: 16px; right: 16px; padding: 10px 20px; border-radius: 6px; font-size: 13px; z-index: 999; transition: opacity 0.3s; }
64
+ .toast.success { background: #166534; color: #fff; }
65
+ .toast.error { background: #991b1b; color: #fff; }
66
+ @keyframes flashChange { 0% { filter: brightness(1.8); box-shadow: 0 0 12px rgba(254,44,85,0.6); } 100% { filter: brightness(1); box-shadow: none; } }
67
+ .flash-change { animation: flashChange 0.6s ease-out; }
68
+ @keyframes rowFlash { 0% { background: rgba(254,44,85,0.25); } 100% { background: transparent; } }
69
+ tr.row-flash { animation: rowFlash 0.8s ease-out; }
70
+ @keyframes barFlash { 0% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
71
+ .bar-fill.bar-flash { animation: barFlash 0.5s ease-out; }
72
+ .table-scroll { max-height: 500px; overflow-y: auto; }
73
+ table { width: 100%; border-collapse: collapse; font-size: 12px; }
74
+ th { position: sticky; top: 0; background: #22222e; padding: 8px 10px; text-align: left; color: #888; font-weight: 600; border-bottom: 1px solid #333; white-space: nowrap; }
75
+ td { padding: 6px 10px; border-bottom: 1px solid #1f1f2a; white-space: nowrap; }
76
+ tr:hover { background: #1f1f2a; }
77
+ td.user-id { cursor: pointer; color: #60a5fa; }
78
+ td.user-id:hover { color: #fe2c55; }
79
+ .tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; }
80
+ .tag.seller { background: #dc2626; color: #fff; }
81
+ .tag.verified { background: #2563eb; color: #fff; }
82
+ .tag.pending { background: #ca8a04; color: #000; }
83
+ .tag.processing { background: #0ea5e9; color: #fff; }
84
+ .tag.error { background: #991b1b; color: #fff; }
85
+ .tag.processed { background: #166534; color: #fff; }
86
+ .tag.no-video { background: #7c3aed; color: #fff; }
87
+ .tag.no-follow { background: #b45309; color: #fff; }
88
+ .tag.keep-follow { background: #059669; color: #fff; }
89
+ .tag.pinned { background: #f59e0b; color: #000; }
90
+ .context-menu { position: fixed; background: #1e1e2e; border: 1px solid #333; border-radius: 6px; padding: 4px 0; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 1000; }
91
+ .context-menu-item { padding: 8px 16px; font-size: 13px; color: #ccc; cursor: pointer; display: flex; align-items: center; gap: 8px; }
92
+ .context-menu-item:hover { background: #fe2c55; color: #fff; }
93
+ .context-menu-item.danger { color: #f87171; }
94
+ .context-menu-item.danger:hover { background: #991b1b; color: #fff; }
95
+ ::-webkit-scrollbar { width: 6px; }
96
+ ::-webkit-scrollbar-track { background: #1a1a24; }
97
+ ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
98
+ .client-errors-section { margin-bottom: 16px; }
99
+ .section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
100
+ .section-header h3 { font-size: 14px; color: #e0e0e0; }
101
+ .error-badge { background: #991b1b; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
102
+ .client-errors-table { width: 100%; border-collapse: collapse; background: #1a1a24; border-radius: 8px; overflow: hidden; font-size: 13px; }
103
+ .client-errors-table thead tr { background: #22222e; }
104
+ .client-errors-table th { padding: 10px 12px; text-align: left; color: #888; font-weight: 600; font-size: 12px; border-bottom: 1px solid #2a2a3a; }
105
+ .client-errors-table td { padding: 8px 12px; border-bottom: 1px solid #1f1f2e; }
106
+ .client-errors-table tbody tr:last-child td { border-bottom: none; }
107
+ .client-errors-table tbody tr:hover { background: #22222e; }
108
+ .error-type-captcha { color: #f59e0b; }
109
+ .error-type-network { color: #f87171; }
110
+ .error-type-other { color: #a78bfa; }
111
+ @media (max-width: 768px) {
112
+ body { padding: 8px; }
113
+ .header { flex-direction: column; gap: 6px; align-items: flex-start; }
114
+ .header h1 { font-size: 16px; }
115
+ .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
116
+ .stat-card { padding: 10px; }
117
+ .stat-card .label { font-size: 11px; }
118
+ .stat-card .value { font-size: 18px; }
119
+ .charts { grid-template-columns: 1fr; }
120
+ .table-wrap { padding: 10px; }
121
+ .controls { flex-wrap: wrap; gap: 6px; }
122
+ .controls input { flex: 0 0 100%; width: 100%; }
123
+ .controls button { flex: 0 0 calc(33.33% - 4px); min-width: 0; text-align: center; white-space: nowrap; font-size: 11px; padding: 8px 4px; }
124
+ #batchResetBtn { flex: 0 0 100% !important; font-size: 12px !important; padding: 8px 12px !important; }
125
+ .controls select { flex: 0 0 100%; width: 100%; }
126
+ .table-scroll { max-height: none; overflow: visible; }
127
+ table, thead, tbody, th, td, tr { display: block; }
128
+ thead { display: none; }
129
+ tr { background: #22222e; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #2a2a3a; }
130
+ tr:hover { background: #2a2a3a; }
131
+ td { padding: 4px 0; border: none; text-align: left; position: relative; padding-left: 40%; font-size: 13px; }
132
+ 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; }
133
+ 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; }
134
+ td.user-id::before { display: none; }
135
+ td.user-id:hover { color: #fe2c55; }
136
+ .add-users { justify-content: center; }
137
+ .modal { width: 95vw; padding: 16px; }
138
+ .modal textarea { height: 140px; }
139
+ }
140
+ </style>
141
+ </head>
142
+ <body>
143
+ <div class="header">
144
+ <h1>TikTok 采集监控</h1>
145
+ <div class="meta" id="fileMeta">加载中...</div>
146
+ <div style="display:flex;gap:8px;align-items:center">
147
+ <a href="/scripts/run-explore.sh" class="script-link" download="run-explore.sh">mac</a>
148
+ <a href="/scripts/run-explore.bat" class="script-link" download="run-explore.bat">windows</a>
149
+ <span class="status" id="lastUpdate">--</span>
150
+ </div>
151
151
  </div>
152
- <div class="stats">
153
- <div class="stat-card"><div class="label">总任务</div><div class="value total" id="statTotal">0</div></div>
154
- <div class="stat-card"><div class="label">处理中</div><div class="value total" id="statProcessing">0</div></div>
155
- <div class="stat-card"><div class="label">已完成</div><div class="value done" id="statDone">0</div></div>
156
- <div class="stat-card"><div class="label">待处理</div><div class="value pending" id="statPending">0</div></div>
157
- <div class="stat-card"><div class="label">错误</div><div class="value error" id="statError">0</div></div>
158
- <div class="stat-card"><div class="label">受限</div><div class="value error" id="statRestricted">0</div></div>
159
- <div class="stat-card clickable" id="statTargetCard"><div class="label">目标用户(ES商家)</div><div class="value target" id="statTarget">0</div></div>
160
- </div>
161
- <div class="client-errors-section" id="clientErrorsSection" style="display:none">
162
- <div class="section-header">
163
- <h3>客户端异常</h3>
164
- <span class="error-badge" id="clientErrorsBadge">0</span>
165
- </div>
166
- <table class="client-errors-table">
167
- <thead>
168
- <tr>
169
- <th>客户端</th>
170
- <th>错误类型</th>
171
- <th>当时处理的 TikTok 用户</th>
172
- <th>时间</th>
173
- </tr>
174
- </thead>
175
- <tbody id="clientErrorsBody"></tbody>
176
- </table>
177
- </div>
178
- <div class="charts">
179
- <div class="chart-box">
180
- <h3>国家统计</h3>
181
- <div id="countryChart"></div>
182
- </div>
183
- <div class="chart-box">
184
- <h3>来源分布</h3>
185
- <div id="sourceChart"></div>
186
- </div>
187
- </div>
188
- <div class="table-wrap">
189
- <h3>用户列表</h3>
190
- <div class="add-users">
191
- <button onclick="openAddModal()">+ 插入队列</button>
192
- </div>
193
- <div id="toast" class="toast" style="display:none"></div>
194
- <div class="controls">
195
- <input type="text" id="searchInput" placeholder="搜索用户名 / 昵称...">
196
- <button data-filter="all" class="active" onclick="setFilter('all')">全部</button>
197
- <button data-filter="processing" onclick="setFilter('processing')">处理中</button>
198
- <button data-filter="pending" onclick="setFilter('pending')">待处理</button>
199
- <button data-filter="done" onclick="setFilter('done')">已处理</button>
200
- <button data-filter="error" onclick="setFilter('error')">错误</button>
201
- <button data-filter="restricted" onclick="setFilter('restricted')">受限</button>
202
- <button data-filter="target" onclick="setFilter('target')" style="background:#7c3aed;color:#fff">目标用户</button>
203
- <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>
204
- <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;">
205
- <option value="">全部国家</option>
206
- </select>
207
- </div>
208
- <div class="table-scroll">
209
- <table>
210
- <thead>
211
- <tr><th>用户名</th><th>昵称</th><th>粉丝</th><th>视频</th><th>国家</th><th>来源</th><th>状态</th><th>接收人</th><th>领取时间</th><th>提交时间</th></tr>
212
- </thead>
213
- <tbody id="userTable"></tbody>
214
- </table>
215
- </div>
216
- </div>
217
- <script>
218
- const COLORS = ['#fe2c55','#60a5fa','#4ade80','#facc15','#f97316','#a855f7','#ec4899','#14b8a6','#e11d48','#0ea5e9','#8b5cf6','#84cc16'];
219
- let currentFilter = 'all';
220
- let currentStats = null;
221
- let currentUsers = [];
222
- let currentLocation = '';
223
- let prevStatValues = {};
224
- let prevUserMap = {};
225
-
226
- async function fetchStats() {
227
- try {
228
- const res = await fetch('/api/stats');
229
- currentStats = await res.json();
230
- renderStats();
231
- renderLocationFilter();
232
- } catch (e) {
233
- document.getElementById('lastUpdate').textContent = '\u8fde\u63a5\u5931\u8d25';
234
- }
235
- }
236
-
237
- async function fetchUsers() {
238
- try {
239
- const params = new URLSearchParams();
240
- if (currentFilter === 'target') {
241
- params.set('target', '1');
242
- } else if (currentFilter !== 'all') {
243
- params.set('status', currentFilter);
244
- }
245
- const search = document.getElementById('searchInput').value.trim();
246
- if (search) params.set('search', search);
247
- if (currentLocation) params.set('location', currentLocation);
248
- params.set('limit', '200');
249
- const res = await fetch('/api/users?' + params.toString());
250
- const data = await res.json();
251
- currentUsers = data.users || [];
252
- renderTable(currentUsers);
253
- } catch (e) {}
254
- }
255
-
256
- function escapeHtml(str) {
257
- const div = document.createElement('div');
258
- div.textContent = str;
259
- return div.innerHTML;
260
- }
261
-
262
- async function fetchClientErrors() {
263
- try {
264
- const res = await fetch('/api/client-errors');
265
- const data = await res.json();
266
- const clients = data.clients || [];
267
- const section = document.getElementById('clientErrorsSection');
268
- const badge = document.getElementById('clientErrorsBadge');
269
- const tbody = document.getElementById('clientErrorsBody');
270
- if (clients.length === 0) {
271
- section.style.display = 'none';
272
- return;
273
- }
274
- section.style.display = '';
275
- badge.textContent = clients.length;
276
- const typeMap = { captcha: ['验证码', 'error-type-captcha'], network: ['网络', 'error-type-network'], other: ['其他', 'error-type-other'] };
277
- tbody.innerHTML = clients.map(c => {
278
- const [typeText, typeClass] = typeMap[c.errorType] || ['未知', ''];
279
- return `<tr>
280
- <td style="font-family:monospace;font-weight:600;color:#60a5fa">${escapeHtml(c.userId)}</td>
281
- <td class="${typeClass}">${typeText}</td>
282
- <td style="color:#60a5fa">@${escapeHtml(c.username || '-')}</td>
283
- <td style="color:#888;font-size:12px">${new Date(c.timestamp).toLocaleTimeString()}</td>
284
- </tr>`;
285
- }).join('');
286
- } catch (e) {}
287
- }
288
-
289
- function flashEl(id, value) {
290
- const el = document.getElementById(id);
291
- if (!el) return;
292
- const prev = prevStatValues[id];
293
- el.textContent = value;
294
- if (prev !== undefined && prev !== value) {
295
- el.classList.remove('flash-change');
296
- void el.offsetWidth;
297
- el.classList.add('flash-change');
298
- }
299
- prevStatValues[id] = value;
300
- }
301
-
302
- function renderStats() {
303
- if (!currentStats) return;
304
- const d = currentStats;
305
- flashEl('statTotal', d.totalUsers);
306
- flashEl('statProcessing', d.processingUsers || 0);
307
- flashEl('statDone', d.processedUsers);
308
- flashEl('statPending', d.pendingUsers);
309
- flashEl('statError', d.errorUsers);
310
- flashEl('statRestricted', d.restrictedUsers);
311
- flashEl('statTarget', d.targetUsers);
312
- document.getElementById('lastUpdate').textContent = '\u66f4\u65b0\u4e8e ' + new Date().toLocaleTimeString();
313
- document.getElementById('fileMeta').textContent = (d.processingUsers || 0) + ' \u5904\u7406\u4e2d, ' + d.totalUsers + ' \u4e2a\u7528\u6237';
314
-
315
- renderCountryChart(d.countryStats);
316
- renderSourceChart(d.sourceStats);
317
- }
318
-
319
- function renderCountryChart(countries) {
320
- const el = document.getElementById('countryChart');
321
- if (!countries.length) { el.innerHTML = '<span style="color:#666;font-size:12px">\u6682\u65e0\u6570\u636e</span>'; return; }
322
- const max = countries[0].count;
323
- const top = countries.slice(0, 15);
324
- el.innerHTML = top.map((c, i) => `
325
- <div class="bar-row">
326
- <span class="name">${c.country}</span>
327
- <div class="bar-bg"><div class="bar-fill" style="width:${(c.count / max * 100)}%;background:${COLORS[i % COLORS.length]}">${c.count}</div></div>
328
- <span class="count">${(currentStats ? (c.count / currentStats.totalUsers * 100).toFixed(1) : 0)}%</span>
329
- </div>
330
- `).join('');
331
- }
332
-
333
- function renderSourceChart(sources) {
334
- const el = document.getElementById('sourceChart');
335
- const labels = { seed: '\u79cd\u5b50', video: '\u89c6\u9891\u53d1\u73b0', comment: '\u8bc4\u8bba\u53d1\u73b0', guess: '\u731c\u4f60\u559c\u6b22', following: '\u5173\u6ce8', follower: '\u7c89\u4e1d', processed: '\u5df2\u5904\u7406', restricted: '\u53d7\u9650(\u8df3\u8fc7)', error: '\u9519\u8bef(\u5f85\u91cd\u8bd5)', noVideo: '\u65e0\u89c6\u9891' };
336
- const entries = Object.entries(sources);
337
- el.innerHTML = entries.map(([key, val]) => `
338
- <div class="source-row"><span class="s-name">${labels[key] || key}:</span><span class="s-val">${val}</span></div>
339
- `).join('');
340
- }
341
-
342
- function renderTable(users) {
343
- const el = document.getElementById('userTable');
344
-
345
- const newUserMap = {};
346
- for (const u of users) newUserMap[u.uniqueId] = u;
347
-
348
- el.innerHTML = users.map(u => {
349
- const wasStatus = prevUserMap[u.uniqueId]?.status;
350
- const nowStatus = u.status;
351
- const changed = wasStatus !== nowStatus &&
352
- (nowStatus === 'done' || nowStatus === 'restricted' || nowStatus === 'error');
353
- const rowClass = changed ? ' class="row-flash"' : '';
354
-
355
- const statusTags = {
356
- restricted: '<span class="tag error">\u53d7\u9650(\u8df3\u8fc7)</span>',
357
- error: '<span class="tag error">\u9519\u8bef(\u5f85\u91cd\u8bd5)</span>',
358
- done: '<span class="tag processed">\u5df2\u5904\u7406</span>',
359
- processing: '<span class="tag processing">\u5904\u7406\u4e2d</span>',
360
- pending: '<span class="tag pending">\u5f85\u5904\u7406</span>',
361
- };
362
- const statusTag = statusTags[u.status] || '<span class="tag pending">' + (u.status || '\u672a\u77e5') + '</span>';
363
- const sources = (u.sources || []).join(', ');
364
- const extraTags = [];
365
- if (u.pinned) extraTags.push('<span class="tag pinned">&#x1F4CC; 置顶</span>');
366
- if (u.ttSeller) extraTags.push('<span class="tag seller">\u5546\u5bb6</span>');
367
- if (u.verified) extraTags.push('<span class="tag verified">\u8ba4\u8bc1</span>');
368
- if (u.noVideo) extraTags.push('<span class="tag no-video">\u65e0\u89c6\u9891</span>');
369
- if (u.keepFollow) extraTags.push('<span class="tag keep-follow">\u5173\u6ce8\u5df2\u4fdd\u7559</span>');
370
- if (u.hasFollowData === false) extraTags.push('<span class="tag no-follow">\u5173\u6ce8\u672a\u83b7\u53d6</span>');
371
- const nick = (u.nickname || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
372
- const fans = u.followerCount != null ? formatNum(u.followerCount) : '-';
373
- const videos = u.videoCount != null ? u.videoCount : '-';
374
- const loc = u.locationCreated || '-';
375
- const claimer = u.claimedBy || '-';
376
- const claimTime = u.claimedAt ? formatTime(u.claimedAt) : '-';
377
- const procTime = u.processedAt ? formatTime(u.processedAt) : '-';
378
- return `<tr${rowClass}>
379
- <td class="user-id" data-label="用户名">@${u.uniqueId}</td>
380
- <td data-label="昵称">${nick}</td>
381
- <td data-label="粉丝">${fans}</td>
382
- <td data-label="视频">${videos}</td>
383
- <td data-label="国家">${loc}</td>
384
- <td data-label="来源">${sources || '-'}</td>
385
- <td data-label="状态">${statusTag} ${extraTags.join(' ')}</td>
386
- <td data-label="接收人" style="font-size:11px;color:#888">${claimer}</td>
387
- <td data-label="领取时间" style="font-size:11px;color:#888">${claimTime}</td>
388
- <td data-label="提交时间" style="font-size:11px;color:#888">${procTime}</td>
389
- </tr>`;
390
- }).join('');
391
-
392
- const errorCount = users.filter(u => u.status === 'error').length;
393
- const countEl = document.getElementById('batchResetCount');
394
- if (countEl) countEl.textContent = errorCount;
395
-
396
- prevUserMap = newUserMap;
397
- }
398
-
399
- function formatNum(n) {
400
- if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
401
- if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
402
- return n;
403
- }
404
-
405
- function formatTime(ts) {
406
- const d = new Date(ts);
407
- const pad = n => String(n).padStart(2, '0');
408
- return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
409
- }
410
-
411
- function setFilter(f) {
412
- currentFilter = f;
413
- document.querySelectorAll('.controls button').forEach(b => {
414
- b.classList.toggle('active', b.dataset.filter === f);
415
- });
416
- const btn = document.getElementById('batchResetBtn');
417
- btn.style.display = f === 'error' ? '' : 'none';
418
- fetchUsers();
419
- }
420
-
421
- function renderLocationFilter() {
422
- if (!currentStats || !currentStats.countryStats) return;
423
- const sel = document.getElementById('locationFilter');
424
- if (!sel) return;
425
- const val = sel.value;
426
- const entries = currentStats.countryStats.sort((a, b) => b.count - a.count);
427
- sel.innerHTML = '<option value="">全部国家</option>' +
428
- entries.map(c => `<option value="${c.country}"${val === c.country ? ' selected' : ''}>${c.country} (${c.count})</option>`).join('');
429
- }
430
-
431
- function onLocationChange() {
432
- const sel = document.getElementById('locationFilter');
433
- currentLocation = sel.value;
434
- fetchUsers();
435
- }
436
-
437
- document.getElementById('searchInput').addEventListener('input', () => {
438
- fetchUsers();
439
- });
440
-
441
- function parseUsernames(raw) {
442
- return raw.split(/[,，\n\r]+/).map(s => s.replace(/^@/, '').trim()).filter(Boolean);
443
- }
444
-
445
- function openAddModal() {
446
- let overlay = document.getElementById('addModalOverlay');
447
- if (overlay) return;
448
- overlay = document.createElement('div');
449
- overlay.id = 'addModalOverlay';
450
- overlay.className = 'modal-overlay';
451
- overlay.innerHTML = `
452
- <div class="modal">
453
- <h3>插入用户到队列</h3>
454
- <div class="hint">每行一个用户名，或用逗号分隔。支持 @username 或 username 格式。插入到队列最前面优先处理。</div>
455
- <textarea id="modalUserInput" placeholder="例如：&#10;user1&#10;user2&#10;user3&#10;&#10;或：user1, user2, user3"></textarea>
456
- <div class="preview" id="modalPreview"></div>
457
- <div class="btn-row">
458
- <button class="btn-cancel" onclick="closeAddModal()">取消</button>
459
- <button class="btn-submit" onclick="submitAddUsers()">确认插入</button>
460
- </div>
461
- </div>
462
- `;
463
- document.body.appendChild(overlay);
464
- overlay.addEventListener('click', e => { if (e.target === overlay) closeAddModal(); });
465
- const ta = document.getElementById('modalUserInput');
466
- ta.focus();
467
- ta.addEventListener('input', () => {
468
- const names = parseUsernames(ta.value);
469
- const preview = document.getElementById('modalPreview');
470
- preview.textContent = names.length ? `共 ${names.length} 个用户名` : '';
471
- });
472
- ta.addEventListener('keydown', e => {
473
- if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
474
- e.preventDefault();
475
- submitAddUsers();
476
- }
477
- });
478
- }
479
-
480
- function closeAddModal() {
481
- const overlay = document.getElementById('addModalOverlay');
482
- if (overlay) overlay.remove();
483
- }
484
-
485
- async function submitAddUsers() {
486
- const ta = document.getElementById('modalUserInput');
487
- const raw = ta.value.trim();
488
- if (!raw) return;
489
-
490
- const names = parseUsernames(raw);
491
- if (names.length === 0) return;
492
-
493
- try {
494
- const res = await fetch('/api/users', {
495
- method: 'POST',
496
- headers: { 'Content-Type': 'application/json' },
497
- body: JSON.stringify({ usernames: names })
498
- });
499
- const data = await res.json();
500
- if (data.error) { showToast(data.error, true); return; }
501
- closeAddModal();
502
- showToast(data.message || `\u5df2\u63d2\u5165 ${data.added} \u4e2a\u7528\u6237`);
503
- fetchStats();
504
- fetchUsers();
505
- } catch (e) {
506
- showToast('\u63d2\u5165\u5931\u8d25: ' + e.message, true);
507
- }
508
- }
509
-
510
- function showToast(msg, isError) {
511
- const toast = document.getElementById('toast');
512
- toast.textContent = msg;
513
- toast.className = 'toast' + (isError ? ' error' : '');
514
- toast.style.display = 'block';
515
- setTimeout(() => { toast.style.display = 'none'; }, 3000);
516
- }
517
-
518
- document.addEventListener('keydown', e => {
519
- if (e.key === 'Escape') closeAddModal();
520
- });
521
-
522
- document.getElementById('userTable').addEventListener('click', e => {
523
- const td = e.target.closest('td.user-id');
524
- if (!td) return;
525
- hideContextMenu();
526
- const username = td.textContent.trim().replace(/^@/, '');
527
- if (!username) return;
528
- window.open('https://www.tiktok.com/@' + username, '_blank');
529
- });
530
-
531
- let contextMenuEl = null;
532
- let contextMenuUserId = null;
533
- let contextMenuPinned = false;
534
-
535
- function showContextMenu(x, y, uniqueId, pinned) {
536
- hideContextMenu();
537
- contextMenuUserId = uniqueId;
538
- contextMenuPinned = !!pinned;
539
- contextMenuEl = document.createElement('div');
540
- contextMenuEl.className = 'context-menu';
541
- contextMenuEl.innerHTML = `
542
- <div class="context-menu-item" data-action="pin">${contextMenuPinned ? '&#x1F4CC; 取消置顶' : '&#x1F4CD; 置顶优先'}</div>
543
- <div class="context-menu-item" data-action="reset">&#x21bb; 重新处理</div>
544
- <div class="context-menu-item" data-action="open">&#x1F517; 打开主页</div>
545
- `;
546
- document.body.appendChild(contextMenuEl);
547
- contextMenuEl.style.left = Math.min(x, window.innerWidth - 160) + 'px';
548
- contextMenuEl.style.top = Math.min(y, window.innerHeight - 100) + 'px';
549
-
550
- contextMenuEl.addEventListener('click', e => {
551
- const item = e.target.closest('.context-menu-item');
552
- if (!item) return;
553
- const action = item.dataset.action;
554
- if (action === 'pin') togglePin(contextMenuUserId);
555
- if (action === 'reset') resetJob(contextMenuUserId);
556
- if (action === 'open') window.open('https://www.tiktok.com/@' + contextMenuUserId, '_blank');
557
- hideContextMenu();
558
- });
559
- }
560
-
561
- function hideContextMenu() {
562
- if (contextMenuEl) {
563
- contextMenuEl.remove();
564
- contextMenuEl = null;
565
- contextMenuUserId = null;
566
- }
567
- }
568
-
569
- document.getElementById('userTable').addEventListener('contextmenu', e => {
570
- const td = e.target.closest('td');
571
- if (!td || td.parentElement.tagName !== 'TR') return;
572
- e.preventDefault();
573
- const tr = td.parentElement;
574
- const userIdTd = tr.querySelector('td.user-id');
575
- if (!userIdTd) return;
576
- const uniqueId = userIdTd.textContent.trim().replace(/^@/, '');
577
- const pinned = !!tr.querySelector('.tag.pinned');
578
- showContextMenu(e.clientX, e.clientY, uniqueId, pinned);
579
- });
580
-
581
- document.addEventListener('click', e => {
582
- if (contextMenuEl && !contextMenuEl.contains(e.target)) {
583
- hideContextMenu();
584
- }
585
- });
586
-
587
- async function togglePin(uniqueId) {
588
- try {
589
- const res = await fetch('/api/job/' + encodeURIComponent(uniqueId) + '/pin', {
590
- method: 'POST',
591
- });
592
- const data = await res.json();
593
- if (data.saved) {
594
- showToast(data.pinned ? '已置顶' : '已取消置顶');
595
- fetchUsers();
596
- } else {
597
- showToast(data.error || '操作失败', true);
598
- }
599
- } catch (e) {
600
- showToast('操作失败: ' + e.message, true);
601
- }
602
- }
603
-
604
- async function resetJob(uniqueId) {
605
- try {
606
- const res = await fetch('/api/job/' + encodeURIComponent(uniqueId) + '/reset', {
607
- method: 'POST',
608
- });
609
- const data = await res.json();
610
- if (data.saved) {
611
- showToast('\u5df2\u91cd\u7f6e\u4efb\u52a1');
612
- fetchUsers();
613
- fetchStats();
614
- } else {
615
- showToast(data.error || '\u91cd\u7f6e\u5931\u8d25', true);
616
- }
617
- } catch (e) {
618
- showToast('\u91cd\u7f6e\u5931\u8d25: ' + e.message, true);
619
- }
620
- }
621
-
622
- async function batchResetErrors() {
623
- const btn = document.getElementById('batchResetBtn');
624
- const errorUsers = currentUsers.filter(u => u.status === 'error');
625
- if (errorUsers.length === 0) {
626
- showToast('\u6ca1\u6709\u9700\u8981\u91cd\u7f6e\u7684\u9519\u8bef\u7528\u6237', true);
627
- return;
628
- }
629
- const userIds = errorUsers.map(u => u.uniqueId);
630
- const origText = btn.innerHTML;
631
- btn.disabled = true;
632
- btn.style.opacity = '0.6';
633
- btn.style.cursor = 'not-allowed';
634
- btn.innerHTML = '&#x21bb; 处理中...';
635
- try {
636
- const res = await fetch('/api/jobs/batch-reset', {
637
- method: 'POST',
638
- headers: { 'Content-Type': 'application/json' },
639
- body: JSON.stringify({ userIds })
640
- });
641
- const data = await res.json();
642
- if (data.error) {
643
- showToast(data.error, true);
644
- return;
645
- }
646
- showToast(`\u5df2\u91cd\u7f6e ${data.reset} / ${data.total} \u4e2a\u7528\u6237`);
647
- fetchUsers();
648
- fetchStats();
649
- } catch (e) {
650
- showToast('\u6279\u91cf\u91cd\u7f6e\u5931\u8d25: ' + e.message, true);
651
- } finally {
652
- btn.disabled = false;
653
- btn.style.opacity = '1';
654
- btn.style.cursor = 'pointer';
655
- btn.innerHTML = origText;
656
- }
657
- }
658
-
659
- document.getElementById('statTargetCard').addEventListener('click', async () => {
660
- try {
661
- const res = await fetch('/api/target-users');
662
- const data = await res.json();
663
- if (!data.users.length) { showToast('暂无目标用户', true); return; }
664
- const text = data.users.map(u => '@' + u.uniqueId).join(', ');
665
- if (navigator.clipboard && navigator.clipboard.writeText) {
666
- await navigator.clipboard.writeText(text);
667
- showToast(data.users.length + ' 个目标用户 ID 已复制到剪贴板');
668
- } else {
669
- const ta = document.createElement('textarea');
670
- ta.value = text;
671
- ta.style.position = 'fixed';
672
- ta.style.left = '-9999px';
673
- document.body.appendChild(ta);
674
- ta.select();
675
- document.execCommand('copy');
676
- document.body.removeChild(ta);
677
- showToast(data.users.length + ' 个目标用户 ID 已复制到剪贴板');
678
- }
679
- } catch (e) {
680
- showToast('获取失败: ' + e.message, true);
681
- }
682
- });
683
-
684
- fetchStats();
685
- fetchUsers();
686
- fetchClientErrors();
687
- setInterval(fetchStats, 10000);
688
- setInterval(fetchUsers, 10000);
689
- setInterval(fetchClientErrors, 10000);
690
- </script>
691
- </body>
152
+ <div class="stats">
153
+ <div class="stat-card"><div class="label">总任务</div><div class="value total" id="statTotal">0</div></div>
154
+ <div class="stat-card"><div class="label">处理中</div><div class="value total" id="statProcessing">0</div></div>
155
+ <div class="stat-card"><div class="label">已完成</div><div class="value done" id="statDone">0</div></div>
156
+ <div class="stat-card"><div class="label">待处理</div><div class="value pending" id="statPending">0</div></div>
157
+ <div class="stat-card"><div class="label">错误</div><div class="value error" id="statError">0</div></div>
158
+ <div class="stat-card"><div class="label">受限</div><div class="value error" id="statRestricted">0</div></div>
159
+ <div class="stat-card clickable" id="statTargetCard"><div class="label">目标用户(EU商家)</div><div class="value target" id="statTarget">0</div></div>
160
+ </div>
161
+ <div class="client-errors-section" id="clientErrorsSection" style="display:none">
162
+ <div class="section-header">
163
+ <h3>客户端异常</h3>
164
+ <span class="error-badge" id="clientErrorsBadge">0</span>
165
+ </div>
166
+ <table class="client-errors-table">
167
+ <thead>
168
+ <tr>
169
+ <th>客户端</th>
170
+ <th>错误类型</th>
171
+ <th>错误次数</th>
172
+ <th>验证码次数</th>
173
+ <th>阶段</th>
174
+ <th>错误详情</th>
175
+ <th>当时处理的 TikTok 用户</th>
176
+ <th>时间</th>
177
+ <th>操作</th>
178
+ </tr>
179
+ </thead>
180
+ <tbody id="clientErrorsBody"></tbody>
181
+ </table>
182
+ </div>
183
+ <div class="charts">
184
+ <div class="chart-box">
185
+ <h3>国家统计</h3>
186
+ <div id="countryChart"></div>
187
+ </div>
188
+ <div class="chart-box">
189
+ <h3>来源分布</h3>
190
+ <div id="sourceChart"></div>
191
+ </div>
192
+ </div>
193
+ <div class="table-wrap">
194
+ <h3>用户列表</h3>
195
+ <div class="add-users">
196
+ <button onclick="openAddModal()">+ 插入队列</button>
197
+ </div>
198
+ <div id="toast" class="toast" style="display:none"></div>
199
+ <div class="controls">
200
+ <input type="text" id="searchInput" placeholder="搜索用户名 / 昵称...">
201
+ <button data-filter="all" class="active" onclick="setFilter('all')">全部</button>
202
+ <button data-filter="processing" onclick="setFilter('processing')">处理中</button>
203
+ <button data-filter="pending" onclick="setFilter('pending')">待处理</button>
204
+ <button data-filter="done" onclick="setFilter('done')">已处理</button>
205
+ <button data-filter="error" onclick="setFilter('error')">错误</button>
206
+ <button data-filter="restricted" onclick="setFilter('restricted')">受限</button>
207
+ <button data-filter="target" onclick="setFilter('target')" style="background:#7c3aed;color:#fff">目标用户(EU)</button>
208
+ <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>
209
+ <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;">
210
+ <option value="">全部国家</option>
211
+ </select>
212
+ </div>
213
+ <div class="table-scroll">
214
+ <table>
215
+ <thead>
216
+ <tr><th>用户名</th><th>昵称</th><th>粉丝</th><th>视频</th><th>国家</th><th>猜测国家</th><th>来源</th><th>状态</th><th>接收人</th><th>领取时间</th><th>提交时间</th></tr>
217
+ </thead>
218
+ <tbody id="userTable"></tbody>
219
+ </table>
220
+ </div>
221
+ </div>
222
+ <script>
223
+ const COLORS = ['#fe2c55','#60a5fa','#4ade80','#facc15','#f97316','#a855f7','#ec4899','#14b8a6','#e11d48','#0ea5e9','#8b5cf6','#84cc16'];
224
+ let currentFilter = 'all';
225
+ let currentStats = null;
226
+ let currentUsers = [];
227
+ let currentLocation = '';
228
+ let prevStatValues = {};
229
+ let prevUserMap = {};
230
+
231
+ async function fetchStats() {
232
+ try {
233
+ const res = await fetch('/api/stats');
234
+ currentStats = await res.json();
235
+ renderStats();
236
+ renderLocationFilter();
237
+ } catch (e) {
238
+ document.getElementById('lastUpdate').textContent = '\u8fde\u63a5\u5931\u8d25';
239
+ }
240
+ }
241
+
242
+ async function fetchUsers() {
243
+ try {
244
+ const params = new URLSearchParams();
245
+ if (currentFilter === 'target') {
246
+ params.set('target', '1');
247
+ } else if (currentFilter !== 'all') {
248
+ params.set('status', currentFilter);
249
+ }
250
+ const search = document.getElementById('searchInput').value.trim();
251
+ if (search) params.set('search', search);
252
+ if (currentLocation) params.set('location', currentLocation);
253
+ params.set('limit', '200');
254
+ const res = await fetch('/api/users?' + params.toString());
255
+ const data = await res.json();
256
+ currentUsers = data.users || [];
257
+ renderTable(currentUsers);
258
+ } catch (e) {}
259
+ }
260
+
261
+ function escapeHtml(str) {
262
+ const div = document.createElement('div');
263
+ div.textContent = str;
264
+ return div.innerHTML;
265
+ }
266
+
267
+ async function fetchClientErrors() {
268
+ try {
269
+ const res = await fetch('/api/client-errors');
270
+ const data = await res.json();
271
+ const clients = data.clients || [];
272
+ const section = document.getElementById('clientErrorsSection');
273
+ const badge = document.getElementById('clientErrorsBadge');
274
+ const tbody = document.getElementById('clientErrorsBody');
275
+ if (clients.length === 0) {
276
+ section.style.display = 'none';
277
+ return;
278
+ }
279
+ section.style.display = '';
280
+ badge.textContent = clients.length;
281
+ const typeMap = { captcha: ['验证码', 'error-type-captcha'], network: ['网络', 'error-type-network'], other: ['其他', 'error-type-other'] };
282
+ const stageMap = { 'video-page': '视频页', 'comment': '评论', 'follow': '关注/粉丝', 'scrape': 'scrape', 'process': '处理' };
283
+ tbody.innerHTML = clients.map(c => {
284
+ const [typeText, typeClass] = typeMap[c.errorType] || ['未知', ''];
285
+ const stageText = c.stage ? (stageMap[c.stage] || c.stage) : '';
286
+ const captchaText = c.captchaCount ? `${c.captchaCount}次${c.captchaStage ? ' (' + (stageMap[c.captchaStage] || c.captchaStage) + ')' : ''}` : '-';
287
+ const msgDetail = c.errorMessage ? `<br><span style="color:#666;font-size:11px">${escapeHtml(c.errorMessage)}</span>` : '';
288
+ 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>` : '';
289
+ const captchaDetail = c.captchaMessage ? `<br><span style="color:#666;font-size:11px">${escapeHtml(c.captchaMessage)}</span>` : '';
290
+ return `<tr>
291
+ <td style="font-family:monospace;font-weight:600;color:#60a5fa">${escapeHtml(c.userId)}</td>
292
+ <td class="${typeClass}">${typeText}</td>
293
+ <td style="color:#f87171;font-weight:600">${c.reportCount || 1}</td>
294
+ <td style="color:#f59e0b;font-weight:600">${captchaText}${captchaDetail}</td>
295
+ <td style="color:#a78bfa;font-size:12px">${stageText}</td>
296
+ <td style="color:#ccc;font-size:12px;max-width:300px;word-break:break-all">${msgDetail}${stackDetail}</td>
297
+ <td style="color:#60a5fa">@${escapeHtml(c.username || '-')}</td>
298
+ <td style="color:#888;font-size:12px">${new Date(c.timestamp).toLocaleTimeString()}</td>
299
+ <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>
300
+ </tr>`;
301
+ }).join('');
302
+ } catch (e) {}
303
+ }
304
+
305
+ async function deleteClientError(userId) {
306
+ try {
307
+ await fetch(`/api/client-error/${encodeURIComponent(userId)}`, { method: 'DELETE' });
308
+ fetchClientErrors();
309
+ } catch (e) {}
310
+ }
311
+
312
+ function flashEl(id, value) {
313
+ const el = document.getElementById(id);
314
+ if (!el) return;
315
+ const prev = prevStatValues[id];
316
+ el.textContent = value;
317
+ if (prev !== undefined && prev !== value) {
318
+ el.classList.remove('flash-change');
319
+ void el.offsetWidth;
320
+ el.classList.add('flash-change');
321
+ }
322
+ prevStatValues[id] = value;
323
+ }
324
+
325
+ function renderStats() {
326
+ if (!currentStats) return;
327
+ const d = currentStats;
328
+ flashEl('statTotal', d.totalUsers);
329
+ flashEl('statProcessing', d.processingUsers || 0);
330
+ flashEl('statDone', d.processedUsers);
331
+ flashEl('statPending', d.pendingUsers);
332
+ flashEl('statError', d.errorUsers);
333
+ flashEl('statRestricted', d.restrictedUsers);
334
+ flashEl('statTarget', d.targetUsers);
335
+ document.getElementById('lastUpdate').textContent = '\u66f4\u65b0\u4e8e ' + new Date().toLocaleTimeString();
336
+ document.getElementById('fileMeta').textContent = (d.processingUsers || 0) + ' \u5904\u7406\u4e2d, ' + d.totalUsers + ' \u4e2a\u7528\u6237';
337
+
338
+ renderCountryChart(d.countryStats);
339
+ renderSourceChart(d.sourceStats);
340
+ }
341
+
342
+ function renderCountryChart(countries) {
343
+ const el = document.getElementById('countryChart');
344
+ if (!countries.length) { el.innerHTML = '<span style="color:#666;font-size:12px">\u6682\u65e0\u6570\u636e</span>'; return; }
345
+ const max = countries[0].count;
346
+ const top = countries.slice(0, 15);
347
+ el.innerHTML = top.map((c, i) => `
348
+ <div class="bar-row">
349
+ <span class="name">${c.country}</span>
350
+ <div class="bar-bg"><div class="bar-fill" style="width:${(c.count / max * 100)}%;background:${COLORS[i % COLORS.length]}">${c.count}</div></div>
351
+ <span class="count">${(currentStats ? (c.count / currentStats.totalUsers * 100).toFixed(1) : 0)}%</span>
352
+ </div>
353
+ `).join('');
354
+ }
355
+
356
+ function renderSourceChart(sources) {
357
+ const el = document.getElementById('sourceChart');
358
+ const labels = { seed: '\u79cd\u5b50', video: '\u89c6\u9891\u53d1\u73b0', comment: '\u8bc4\u8bba\u53d1\u73b0', guess: '\u731c\u4f60\u559c\u6b22', following: '\u5173\u6ce8', follower: '\u7c89\u4e1d', processed: '\u5df2\u5904\u7406', restricted: '\u53d7\u9650(\u8df3\u8fc7)', error: '\u9519\u8bef(\u5f85\u91cd\u8bd5)', noVideo: '\u65e0\u89c6\u9891' };
359
+ const entries = Object.entries(sources);
360
+ el.innerHTML = entries.map(([key, val]) => `
361
+ <div class="source-row"><span class="s-name">${labels[key] || key}:</span><span class="s-val">${val}</span></div>
362
+ `).join('');
363
+ }
364
+
365
+ function renderTable(users) {
366
+ const el = document.getElementById('userTable');
367
+
368
+ const newUserMap = {};
369
+ for (const u of users) newUserMap[u.uniqueId] = u;
370
+
371
+ el.innerHTML = users.map(u => {
372
+ const wasStatus = prevUserMap[u.uniqueId]?.status;
373
+ const nowStatus = u.status;
374
+ const changed = wasStatus !== nowStatus &&
375
+ (nowStatus === 'done' || nowStatus === 'restricted' || nowStatus === 'error');
376
+ const rowClass = changed ? ' class="row-flash"' : '';
377
+
378
+ const statusTags = {
379
+ restricted: '<span class="tag error">\u53d7\u9650(\u8df3\u8fc7)</span>',
380
+ error: '<span class="tag error">\u9519\u8bef(\u5f85\u91cd\u8bd5)</span>',
381
+ done: '<span class="tag processed">\u5df2\u5904\u7406</span>',
382
+ processing: '<span class="tag processing">\u5904\u7406\u4e2d</span>',
383
+ pending: '<span class="tag pending">\u5f85\u5904\u7406</span>',
384
+ };
385
+ const statusTag = statusTags[u.status] || '<span class="tag pending">' + (u.status || '\u672a\u77e5') + '</span>';
386
+ const sources = (u.sources || []).join(', ');
387
+ const extraTags = [];
388
+ if (u.pinned) extraTags.push('<span class="tag pinned">&#x1F4CC; 置顶</span>');
389
+ if (u.ttSeller) extraTags.push('<span class="tag seller">\u5546\u5bb6</span>');
390
+ if (u.verified) extraTags.push('<span class="tag verified">\u8ba4\u8bc1</span>');
391
+ if (u.noVideo) extraTags.push('<span class="tag no-video">\u65e0\u89c6\u9891</span>');
392
+ if (u.keepFollow) extraTags.push('<span class="tag keep-follow">\u5173\u6ce8\u5df2\u4fdd\u7559</span>');
393
+ if (u.hasFollowData === false) extraTags.push('<span class="tag no-follow">\u5173\u6ce8\u672a\u83b7\u53d6</span>');
394
+ const nick = (u.nickname || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
395
+ const fans = u.followerCount != null ? formatNum(u.followerCount) : '-';
396
+ const videos = u.videoCount != null ? u.videoCount : '-';
397
+ const loc = u.locationCreated || '-';
398
+ const guessedLoc = u.guessedLocation || '-';
399
+ const claimer = u.claimedBy || '-';
400
+ const claimTime = u.claimedAt ? formatTime(u.claimedAt) : '-';
401
+ const procTime = u.processedAt ? formatTime(u.processedAt) : '-';
402
+ return `<tr${rowClass}>
403
+ <td class="user-id" data-label="用户名">@${u.uniqueId}</td>
404
+ <td data-label="昵称">${nick}</td>
405
+ <td data-label="粉丝">${fans}</td>
406
+ <td data-label="视频">${videos}</td>
407
+ <td data-label="国家">${loc}</td>
408
+ <td data-label="猜测国家">${guessedLoc}</td>
409
+ <td data-label="来源">${sources || '-'}</td>
410
+ <td data-label="状态">${statusTag} ${extraTags.join(' ')}</td>
411
+ <td data-label="接收人" style="font-size:11px;color:#888">${claimer}</td>
412
+ <td data-label="领取时间" style="font-size:11px;color:#888">${claimTime}</td>
413
+ <td data-label="提交时间" style="font-size:11px;color:#888">${procTime}</td>
414
+ </tr>`;
415
+ }).join('');
416
+
417
+ const errorCount = users.filter(u => u.status === 'error').length;
418
+ const countEl = document.getElementById('batchResetCount');
419
+ if (countEl) countEl.textContent = errorCount;
420
+
421
+ prevUserMap = newUserMap;
422
+ }
423
+
424
+ function formatNum(n) {
425
+ if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
426
+ if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
427
+ return n;
428
+ }
429
+
430
+ function formatTime(ts) {
431
+ const d = new Date(ts);
432
+ const pad = n => String(n).padStart(2, '0');
433
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
434
+ }
435
+
436
+ function setFilter(f) {
437
+ currentFilter = f;
438
+ document.querySelectorAll('.controls button').forEach(b => {
439
+ b.classList.toggle('active', b.dataset.filter === f);
440
+ });
441
+ const btn = document.getElementById('batchResetBtn');
442
+ btn.style.display = f === 'error' ? '' : 'none';
443
+ fetchUsers();
444
+ }
445
+
446
+ function renderLocationFilter() {
447
+ if (!currentStats || !currentStats.countryStats) return;
448
+ const sel = document.getElementById('locationFilter');
449
+ if (!sel) return;
450
+ const val = sel.value;
451
+ const entries = currentStats.countryStats.sort((a, b) => b.count - a.count);
452
+ sel.innerHTML = '<option value="">全部国家</option>' +
453
+ entries.map(c => `<option value="${c.country}"${val === c.country ? ' selected' : ''}>${c.country} (${c.count})</option>`).join('');
454
+ }
455
+
456
+ function onLocationChange() {
457
+ const sel = document.getElementById('locationFilter');
458
+ currentLocation = sel.value;
459
+ fetchUsers();
460
+ }
461
+
462
+ document.getElementById('searchInput').addEventListener('input', () => {
463
+ fetchUsers();
464
+ });
465
+
466
+ function parseUsernames(raw) {
467
+ return raw.split(/[,，\n\r]+/).map(s => s.replace(/^@/, '').trim()).filter(Boolean);
468
+ }
469
+
470
+ function openAddModal() {
471
+ let overlay = document.getElementById('addModalOverlay');
472
+ if (overlay) return;
473
+ overlay = document.createElement('div');
474
+ overlay.id = 'addModalOverlay';
475
+ overlay.className = 'modal-overlay';
476
+ overlay.innerHTML = `
477
+ <div class="modal">
478
+ <h3>插入用户到队列</h3>
479
+ <div class="hint">每行一个用户名，或用逗号分隔。支持 @username 或 username 格式。插入到队列最前面优先处理。</div>
480
+ <textarea id="modalUserInput" placeholder="例如：&#10;user1&#10;user2&#10;user3&#10;&#10;或：user1, user2, user3"></textarea>
481
+ <div class="preview" id="modalPreview"></div>
482
+ <div class="btn-row">
483
+ <button class="btn-cancel" onclick="closeAddModal()">取消</button>
484
+ <button class="btn-submit" onclick="submitAddUsers()">确认插入</button>
485
+ </div>
486
+ </div>
487
+ `;
488
+ document.body.appendChild(overlay);
489
+ overlay.addEventListener('click', e => { if (e.target === overlay) closeAddModal(); });
490
+ const ta = document.getElementById('modalUserInput');
491
+ ta.focus();
492
+ ta.addEventListener('input', () => {
493
+ const names = parseUsernames(ta.value);
494
+ const preview = document.getElementById('modalPreview');
495
+ preview.textContent = names.length ? `共 ${names.length} 个用户名` : '';
496
+ });
497
+ ta.addEventListener('keydown', e => {
498
+ if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
499
+ e.preventDefault();
500
+ submitAddUsers();
501
+ }
502
+ });
503
+ }
504
+
505
+ function closeAddModal() {
506
+ const overlay = document.getElementById('addModalOverlay');
507
+ if (overlay) overlay.remove();
508
+ }
509
+
510
+ async function submitAddUsers() {
511
+ const ta = document.getElementById('modalUserInput');
512
+ const raw = ta.value.trim();
513
+ if (!raw) return;
514
+
515
+ const names = parseUsernames(raw);
516
+ if (names.length === 0) return;
517
+
518
+ try {
519
+ const res = await fetch('/api/users', {
520
+ method: 'POST',
521
+ headers: { 'Content-Type': 'application/json' },
522
+ body: JSON.stringify({ usernames: names })
523
+ });
524
+ const data = await res.json();
525
+ if (data.error) { showToast(data.error, true); return; }
526
+ closeAddModal();
527
+ showToast(data.message || `\u5df2\u63d2\u5165 ${data.added} \u4e2a\u7528\u6237`);
528
+ fetchStats();
529
+ fetchUsers();
530
+ } catch (e) {
531
+ showToast('\u63d2\u5165\u5931\u8d25: ' + e.message, true);
532
+ }
533
+ }
534
+
535
+ function showToast(msg, isError) {
536
+ const toast = document.getElementById('toast');
537
+ toast.textContent = msg;
538
+ toast.className = 'toast' + (isError ? ' error' : '');
539
+ toast.style.display = 'block';
540
+ setTimeout(() => { toast.style.display = 'none'; }, 3000);
541
+ }
542
+
543
+ document.addEventListener('keydown', e => {
544
+ if (e.key === 'Escape') closeAddModal();
545
+ });
546
+
547
+ document.getElementById('userTable').addEventListener('click', e => {
548
+ const td = e.target.closest('td.user-id');
549
+ if (!td) return;
550
+ hideContextMenu();
551
+ const username = td.textContent.trim().replace(/^@/, '');
552
+ if (!username) return;
553
+ window.open('https://www.tiktok.com/@' + username, '_blank');
554
+ });
555
+
556
+ let contextMenuEl = null;
557
+ let contextMenuUserId = null;
558
+ let contextMenuPinned = false;
559
+
560
+ function showContextMenu(x, y, uniqueId, pinned) {
561
+ hideContextMenu();
562
+ contextMenuUserId = uniqueId;
563
+ contextMenuPinned = !!pinned;
564
+ contextMenuEl = document.createElement('div');
565
+ contextMenuEl.className = 'context-menu';
566
+ contextMenuEl.innerHTML = `
567
+ <div class="context-menu-item" data-action="pin">${contextMenuPinned ? '&#x1F4CC; 取消置顶' : '&#x1F4CD; 置顶优先'}</div>
568
+ <div class="context-menu-item" data-action="reset">&#x21bb; 重新处理</div>
569
+ <div class="context-menu-item" data-action="open">&#x1F517; 打开主页</div>
570
+ `;
571
+ document.body.appendChild(contextMenuEl);
572
+ contextMenuEl.style.left = Math.min(x, window.innerWidth - 160) + 'px';
573
+ contextMenuEl.style.top = Math.min(y, window.innerHeight - 100) + 'px';
574
+
575
+ contextMenuEl.addEventListener('click', e => {
576
+ const item = e.target.closest('.context-menu-item');
577
+ if (!item) return;
578
+ const action = item.dataset.action;
579
+ if (action === 'pin') togglePin(contextMenuUserId);
580
+ if (action === 'reset') resetJob(contextMenuUserId);
581
+ if (action === 'open') window.open('https://www.tiktok.com/@' + contextMenuUserId, '_blank');
582
+ hideContextMenu();
583
+ });
584
+ }
585
+
586
+ function hideContextMenu() {
587
+ if (contextMenuEl) {
588
+ contextMenuEl.remove();
589
+ contextMenuEl = null;
590
+ contextMenuUserId = null;
591
+ }
592
+ }
593
+
594
+ document.getElementById('userTable').addEventListener('contextmenu', e => {
595
+ const td = e.target.closest('td');
596
+ if (!td || td.parentElement.tagName !== 'TR') return;
597
+ e.preventDefault();
598
+ const tr = td.parentElement;
599
+ const userIdTd = tr.querySelector('td.user-id');
600
+ if (!userIdTd) return;
601
+ const uniqueId = userIdTd.textContent.trim().replace(/^@/, '');
602
+ const pinned = !!tr.querySelector('.tag.pinned');
603
+ showContextMenu(e.clientX, e.clientY, uniqueId, pinned);
604
+ });
605
+
606
+ document.addEventListener('click', e => {
607
+ if (contextMenuEl && !contextMenuEl.contains(e.target)) {
608
+ hideContextMenu();
609
+ }
610
+ });
611
+
612
+ async function togglePin(uniqueId) {
613
+ try {
614
+ const res = await fetch('/api/job/' + encodeURIComponent(uniqueId) + '/pin', {
615
+ method: 'POST',
616
+ });
617
+ const data = await res.json();
618
+ if (data.saved) {
619
+ showToast(data.pinned ? '已置顶' : '已取消置顶');
620
+ fetchUsers();
621
+ } else {
622
+ showToast(data.error || '操作失败', true);
623
+ }
624
+ } catch (e) {
625
+ showToast('操作失败: ' + e.message, true);
626
+ }
627
+ }
628
+
629
+ async function resetJob(uniqueId) {
630
+ try {
631
+ const res = await fetch('/api/job/' + encodeURIComponent(uniqueId) + '/reset', {
632
+ method: 'POST',
633
+ });
634
+ const data = await res.json();
635
+ if (data.saved) {
636
+ showToast('\u5df2\u91cd\u7f6e\u4efb\u52a1');
637
+ fetchUsers();
638
+ fetchStats();
639
+ } else {
640
+ showToast(data.error || '\u91cd\u7f6e\u5931\u8d25', true);
641
+ }
642
+ } catch (e) {
643
+ showToast('\u91cd\u7f6e\u5931\u8d25: ' + e.message, true);
644
+ }
645
+ }
646
+
647
+ async function batchResetErrors() {
648
+ const btn = document.getElementById('batchResetBtn');
649
+ const errorUsers = currentUsers.filter(u => u.status === 'error');
650
+ if (errorUsers.length === 0) {
651
+ showToast('\u6ca1\u6709\u9700\u8981\u91cd\u7f6e\u7684\u9519\u8bef\u7528\u6237', true);
652
+ return;
653
+ }
654
+ const userIds = errorUsers.map(u => u.uniqueId);
655
+ const origText = btn.innerHTML;
656
+ btn.disabled = true;
657
+ btn.style.opacity = '0.6';
658
+ btn.style.cursor = 'not-allowed';
659
+ btn.innerHTML = '&#x21bb; 处理中...';
660
+ try {
661
+ const res = await fetch('/api/jobs/batch-reset', {
662
+ method: 'POST',
663
+ headers: { 'Content-Type': 'application/json' },
664
+ body: JSON.stringify({ userIds })
665
+ });
666
+ const data = await res.json();
667
+ if (data.error) {
668
+ showToast(data.error, true);
669
+ return;
670
+ }
671
+ showToast(`\u5df2\u91cd\u7f6e ${data.reset} / ${data.total} \u4e2a\u7528\u6237`);
672
+ fetchUsers();
673
+ fetchStats();
674
+ } catch (e) {
675
+ showToast('\u6279\u91cf\u91cd\u7f6e\u5931\u8d25: ' + e.message, true);
676
+ } finally {
677
+ btn.disabled = false;
678
+ btn.style.opacity = '1';
679
+ btn.style.cursor = 'pointer';
680
+ btn.innerHTML = origText;
681
+ }
682
+ }
683
+
684
+ document.getElementById('statTargetCard').addEventListener('click', async () => {
685
+ try {
686
+ const res = await fetch('/api/target-users', {
687
+ headers: { 'Accept': 'text/csv' },
688
+ });
689
+ if (!res.ok) throw new Error('HTTP ' + res.status);
690
+ const blob = await res.blob();
691
+ const ext = blob.size < 200 ? 'json' : 'csv';
692
+ if (ext === 'json') {
693
+ const text = await blob.text();
694
+ const data = JSON.parse(text);
695
+ if (!data.users.length) { showToast('暂无目标用户', true); return; }
696
+ if (navigator.clipboard && navigator.clipboard.writeText) {
697
+ const ids = data.users.map(u => '@' + u.uniqueId).join(', ');
698
+ await navigator.clipboard.writeText(ids);
699
+ showToast(data.users.length + ' 个目标用户 ID 已复制到剪贴板');
700
+ }
701
+ return;
702
+ }
703
+ const url = URL.createObjectURL(blob);
704
+ const a = document.createElement('a');
705
+ a.href = url;
706
+ a.download = 'target-users.csv';
707
+ a.click();
708
+ URL.revokeObjectURL(url);
709
+ showToast('CSV 文件已开始下载');
710
+ } catch (e) {
711
+ showToast('获取失败: ' + e.message, true);
712
+ }
713
+ });
714
+
715
+ fetchStats();
716
+ fetchUsers();
717
+ fetchClientErrors();
718
+ setInterval(fetchStats, 10000);
719
+ setInterval(fetchUsers, 10000);
720
+ setInterval(fetchClientErrors, 10000);
721
+ </script>
722
+ </body>
692
723
  </html>