伺服器洞察 - 成長概覽

<link rel="stylesheet" href="/css/server_insight/Server_index.css">
<section class="container py-3">
  <div class="d-flex align-items-center mb-3 flex-wrap gap-2">
    <h1 class="h3 mb-0"><i class="fas fa-chart-line me-2 text-primary"></i>伺服器成長概覽</h1>
    <div class="ms-auto d-flex gap-2 align-items-center">
      <a class="btn btn-outline-secondary btn-sm" href="/insights/audience.html"><i class="fas fa-users me-1"></i>族群</a>
      <a class="btn btn-outline-secondary btn-sm" href="/insights/engagement.html"><i class="fas fa-handshake me-1"></i>互動</a>
      <a class="btn btn-outline-secondary btn-sm" href="/insights/announcements.html"><i class="fas fa-bullhorn me-1"></i>公告</a>
      <div class="auth-conditional" data-auth-required="true" style="display:none;">
      <div class="dropdown">
        <button class="btn btn-outline-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
          <i class="fas fa-tools me-1"></i>管理員工具
        </button>
        <div class="dropdown-menu dropdown-menu-end p-3" style="min-width: 320px;">
          <div class="mb-2 d-flex justify-content-between align-items-center">
            <span class="fw-semibold">每日快照</span>
            <button id="btn-ensure-today" class="btn btn-sm btn-success"><i class="fas fa-rotate me-1"></i>立即擷取</button>
          </div>
          <div class="border-top pt-2 mt-2">
            <div class="fw-semibold mb-2">日期區間補抓</div>
            <div class="row g-2">
              <div class="col-6">
                <label class="form-label small">起</label>
                <input type="date" id="bf-start" class="form-control form-control-sm" />
              </div>
              <div class="col-6">
                <label class="form-label small">迄</label>
                <input type="date" id="bf-end" class="form-control form-control-sm" />
              </div>
              <div class="col-12">
                <label class="form-label small">策略</label>
                <select id="bf-strategy" class="form-select form-select-sm">
                  <option value="carry" selected>前值遞延 (推薦)</option>
                  <option value="force_zero">缺漏以 0 補齊</option>
                </select>
              </div>
              <div class="col-12 d-flex align-items-center justify-content-between">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="bf-force">
                  <label class="form-check-label small" for="bf-force">覆寫已存在</label>
                </div>
                <button id="btn-backfill" class="btn btn-sm btn-primary"><i class="fas fa-cloud-upload-alt me-1"></i>執行補抓</button>
              </div>
              <div class="col-12 small text-muted" id="bf-result"></div>
            </div>
          </div>
        </div>
      </div>
      </div><!-- ENDIF -->
    </div>
  </div>
  <div class="row g-3 row-flex">
    <div class="col-md-3">
      <div class="insight-card" id="summary-card">
        <div class="loading-skel" style="height:120px"></div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="insight-card">
        <div class="d-flex align-items-center mb-2">
          <h2 class="h6 mb-0 flex-grow-1">會員與語音房成長</h2>
          <select id="growth-days" class="form-select form-select-sm w-auto">
            <option value="7">近 7 天</option>
            <option value="30" selected>近 30 天</option>
            <option value="60">近 60 天</option>
          </select>
        </div>
        <canvas id="growthChart" height="110"></canvas>
        <div class="text-muted small mt-2" id="growth-meta"></div>
      </div>
    </div>
    <div class="col-12">
      <div class="insight-card">
        <h2 class="h6 mb-3">快速指標</h2>
        <div class="row g-3" id="quick-metrics"></div>
      </div>
    </div>
  </div>
</section>
<span data-var="super()"></span>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="/js/server_insight/server_index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const btnEnsure = document.getElementById('btn-ensure-today');
  if (btnEnsure) {
    btnEnsure.addEventListener('click', async () => {
      btnEnsure.disabled = true;
      btnEnsure.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>處理中';
      try {
        const r = await fetch('/server-insight/api/ensure-today', {method:'POST', headers:{'Content-Type':'application/json'}});
        const j = await r.json();
        if (j.status === 'ok') {
          btnEnsure.classList.remove('btn-success');
          btnEnsure.classList.add('btn-outline-success');
          btnEnsure.innerHTML = '<i class="fas fa-check me-1"></i>已擷取';
        } else {
          btnEnsure.classList.remove('btn-success');
          btnEnsure.classList.add('btn-outline-danger');
          btnEnsure.innerHTML = '<i class="fas fa-triangle-exclamation me-1"></i>失敗';
        }
      } catch (e) {
        btnEnsure.classList.remove('btn-success');
        btnEnsure.classList.add('btn-outline-danger');
        btnEnsure.innerHTML = '<i class="fas fa-triangle-exclamation me-1"></i>錯誤';
      } finally {
        setTimeout(()=>{ btnEnsure.disabled = false; btnEnsure.innerHTML = '<i class="fas fa-rotate me-1"></i>立即擷取'; }, 1500);
      }
    });
  }

  const btnBackfill = document.getElementById('btn-backfill');
  if (btnBackfill) {
    btnBackfill.addEventListener('click', async ()=>{
      const start = document.getElementById('bf-start').value;
      const end = document.getElementById('bf-end').value;
      const strategy = document.getElementById('bf-strategy').value;
      const force = document.getElementById('bf-force').checked;
      const out = document.getElementById('bf-result');
      out.textContent = '';
      if (!start || !end) { out.textContent = '請選擇起訖日期'; return; }
      btnBackfill.disabled = true; btnBackfill.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>執行中';
      try {
        const r = await fetch('/server-insight/api/backfill', {
          method: 'POST',
          headers: {'Content-Type':'application/json'},
          body: JSON.stringify({start, end, strategy, force})
        });
        const j = await r.json();
        if (j.status === 'ok') {
          out.innerHTML = `補抓完成：<span class="text-success">filled=${j.filled}</span>, skipped=${j.skipped}, overwritten=${j.overwritten}`;
        } else {
          out.innerHTML = `<span class="text-danger">失敗：${j.message||'未知錯誤'}</span>`;
        }
      } catch (e) {
        out.innerHTML = `<span class="text-danger">錯誤：${e?.message||e}</span>`;
      } finally {
        btnBackfill.disabled = false; btnBackfill.innerHTML = '<i class="fas fa-cloud-upload-alt me-1"></i>執行補抓';
      }
    });
  }
});
</script>