backend_v2/internal/handler/templates/pages/spider.html

{{define "title"}}爬虫 · 管理后台{{end}}
{{define "barLabel"}}管理后台 · 爬虫{{end}}
{{define "barRight"}}<a href="/admin/brands">去品牌管理加任务</a> · <a href="/admin/logout">退出</a>{{end}}
{{define "content"}}
{{template "bar" .}}
<div class="main">
<h1>爬虫</h1>
<p class="muted">
  这里看「爬虫现在在干什么」：<strong>正在抓</strong>是当下，
  <strong>待抓队列</strong>是排队等着的品牌，
  <strong>最近入库结果</strong>是后端已经处理完的场次。
</p>
<p class="muted">
  入队请去<a href="/admin/brands">品牌管理</a>勾选品牌。抓取一律全量，
  已经抓全的场次会被自动跳过，不会重复下载。
</p>

<p class="muted" id="spider-status">
  爬虫 <span class="badge {{.StateClass}}" id="st-state">{{.State}}</span>
  · 正在抓 <strong id="st-running">{{.RunningCount}}</strong> 个
  · 队列 <strong id="st-queued">{{.QueuedCount}}</strong> 个
  · 待入库 <strong id="st-pending">{{.PendingIngest}}</strong> 条
</p>

<h2>正在抓</h2>
<table>
<thead><tr><th>品牌</th><th>进度</th><th>心跳</th><th>Worker</th></tr></thead>
<tbody id="running-body">
{{range .Running}}<tr>
  <td><strong>{{.BrandName}}</strong></td>
  <td class="progress{{if .Stale}} stale{{end}}">{{if .Progress}}{{.Progress}}{{else}}刚领取，正在拉取秀列表…{{end}}</td>
  <td class="muted{{if .Stale}} stale{{end}}">{{.Beat}}前</td>
  <td class="muted">{{.Worker}}</td>
</tr>{{end}}
{{if not .Running}}<tr id="running-empty"><td colspan="4" class="muted">当前没有正在抓取的任务。</td></tr>{{end}}
</tbody>
</table>

<h2>待抓队列（{{.QueuedCount}}）</h2>
{{if gt .QueuedCount .QueuedShown}}<p class="muted">队列里共 {{.QueuedCount}} 个，下面只列前 {{.QueuedShown}} 个。</p>{{end}}
<table>
<thead><tr><th>品牌</th><th>入队时间</th><th>已等待</th></tr></thead>
<tbody>
{{range .Queued}}<tr>
  <td>{{.BrandName}}</td>
  <td class="muted">{{.Since}}</td>
  <td class="muted">{{.Waiting}}</td>
</tr>{{end}}
{{if not .Queued}}<tr><td colspan="3" class="muted">队列为空。</td></tr>{{end}}
</tbody>
</table>

<h2>最近入库结果</h2>
<p class="muted">最近 50 条。「已存在跳过」是正常状态——说明这场秀之前抓过，没有重复写库。</p>
<table>
<thead><tr><th>时间</th><th>品牌</th><th>场次</th><th>结果</th><th>说明</th></tr></thead>
<tbody>
{{range .Results}}<tr>
  <td class="muted">{{.At}}</td>
  <td>{{.BrandName}}</td>
  <td>{{.Title}}</td>
  <td>{{if .Bad}}<span class="badge failed">{{.Result}}</span>{{else}}<span class="badge done">{{.Result}}</span>{{end}}</td>
  <td class="err break">{{.Note}}</td>
</tr>{{end}}
{{if not .Results}}<tr><td colspan="5" class="muted">还没有入库记录。</td></tr>{{end}}
</tbody>
</table>
</div>
<script>
// 抓取进度轮询：只刷新状态条与「正在抓」表格。
//
// 用 DOM API 建行而不是拼 innerHTML：品牌名来自数据库，直接拼字符串会把
// 特殊字符当成标签解析（既会破版，也是一条注入面）。
(function () {
  var body = document.getElementById('running-body');
  if (!body) return;

  function cell(text, cls) {
    var td = document.createElement('td');
    td.textContent = text;
    if (cls) td.className = cls;
    return td;
  }

  function paint(list) {
    while (body.firstChild) body.removeChild(body.firstChild);
    if (!list.length) {
      var tr0 = document.createElement('tr');
      var td0 = document.createElement('td');
      td0.colSpan = 4;
      td0.className = 'muted';
      td0.textContent = '当前没有正在抓取的任务。';
      tr0.appendChild(td0);
      body.appendChild(tr0);
      return;
    }
    list.forEach(function (it) {
      var tr = document.createElement('tr');

      var tdBrand = document.createElement('td');
      var b = document.createElement('strong');
      b.textContent = it.brand || '—';
      tdBrand.appendChild(b);
      tr.appendChild(tdBrand);

      tr.appendChild(cell(it.progress || '刚领取，正在拉取秀列表…', it.stale ? 'progress stale' : 'progress'));
      tr.appendChild(cell((it.beat || '0 秒') + '前', it.stale ? 'muted stale' : 'muted'));
      tr.appendChild(cell(it.worker || '—', 'muted'));
      body.appendChild(tr);
    });
  }

  function tick() {
    fetch('/admin/spider/live', { credentials: 'same-origin' })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (d) {
        if (!d) return;
        var st = document.getElementById('st-state');
        if (st) { st.textContent = d.state; st.className = 'badge ' + d.state_class; }
        var rn = document.getElementById('st-running');
        if (rn) rn.textContent = (d.running || []).length;
        var qn = document.getElementById('st-queued');
        if (qn) qn.textContent = d.queued;
        var pn = document.getElementById('st-pending');
        if (pn) pn.textContent = d.pending_ingest;
        paint(d.running || []);
      })
      .catch(function () { /* 网络抖动忽略，下一轮再拉 */ });
  }

  setInterval(tick, 4000);
  tick();
})();
</script>
{{end}}