re-xxm/reaction_board/web/static/views/rankings.js

import { api, apiUrl } from "../api.js";
import {
  centerActiveChips, chip, emptyState, pager, sectionHeader, upCard, videoCard,
} from "../components.js";
import { escapeAttr, escapeHtml, formatCount } from "../format.js";
import { replaceQuery } from "../router.js";

const VIDEO_SORTS = [
  ["heat", "综合热度"], ["view", "播放"], ["like", "点赞"], ["coin", "投币"],
  ["favorite", "收藏"], ["share", "转发"], ["reply", "评论"], ["danmaku", "弹幕"],
  ["interaction", "互动率"], ["growth", "增长"], ["growth_rate", "增速"],
];
const UP_SORTS = [
  ["avg_views", "平均播放"], ["avg_interaction", "平均互动"],
  ["interaction", "总互动"], ["latest", "最近发布"],
  ["count", "视频数"], ["views", "总播放"],
];
const METRIC_PRIMARY = new Set(["view", "like", "coin", "favorite", "share", "reply", "danmaku"]);

function controls({ scope, sort, within, growthDays, q, folder, minVideos, folders }) {
  const sorts = scope === "up" ? UP_SORTS : VIDEO_SORTS;
  return `
    <div class="segmented" role="tablist">
      <button type="button" class="${scope === "video" ? "active" : ""}" data-scope="video">视频</button>
      <button type="button" class="${scope === "up" ? "active" : ""}" data-scope="up">UP</button>
    </div>
    <div class="chip-row scroll-x">
      ${sorts.map(([value, label]) => chip(label, sort === value, "sort", value)).join("")}
    </div>
    <form class="filter-bar" id="rank-filter">
      <input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
        placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
      <button class="button" type="submit">搜索</button>
    </form>
    <div class="filter-row">
      <div class="chip-row scroll-x">
        ${[["all", "全部发布时间"], ["7", "近 7 天"], ["30", "近 30 天"], ["90", "近 90 天"]]
          .map(([value, label]) => chip(label, String(within || "all") === value, "within", value)).join("")}
      </div>
      ${scope === "video" && folders.length ? `<select class="select" id="folder-filter">
        <option value="">全部收藏夹</option>
        ${folders.map((item) => `<option value="${item.media_id}"
          ${String(folder) === String(item.media_id) ? "selected" : ""}>${escapeHtml(item.title || item.year)}</option>`).join("")}
      </select>` : ""}
      ${scope === "up" ? `<select class="select" id="min-videos">
        <option value="1" ${String(minVideos) === "1" ? "selected" : ""}>全部 UP</option>
        <option value="2" ${String(minVideos) === "2" ? "selected" : ""}>≥ 2 条视频</option>
        <option value="5" ${String(minVideos) === "5" ? "selected" : ""}>≥ 5 条视频</option>
      </select>` : ""}
    </div>
    ${scope === "video" && (sort === "growth" || sort === "growth_rate") ? `
      <div class="chip-row growth-days">
        <span class="chip-label">增长区间</span>
        ${[[1, "1 天"], [7, "7 天"], [30, "30 天"]]
          .map(([value, label]) => chip(label, Number(growthDays) === value, "growth-days", value)).join("")}
      </div>` : ""}
  `;
}

function listHtml(data, scope, sort, startRank) {
  if (!data.items.length) {
    return emptyState(
      data.available === false ? "增长榜暂不可用" : "没有匹配的视频",
      data.available === false
        ? (data.reason || "需要至少两天的快照。")
        : "换个筛选条件或清空搜索关键词试试。",
    );
  }
  if (scope === "up") {
    return `<div class="rank-list">${data.items.map((item, index) => upCard(item, { rank: startRank + index })).join("")}</div>`;
  }
  const primary = METRIC_PRIMARY.has(sort) ? sort : "view";
  return `<div class="rank-list">${data.items.map((item, index) =>
    videoCard(item, { rank: startRank + index, primary })).join("")}</div>`;
}

export async function renderRankings(root, { query }) {
  const scope = query.get("scope") === "up" ? "up" : "video";
  const defaultSort = scope === "up" ? "avg_views" : "heat";
  const sort = query.get("sort") || defaultSort;
  const within = query.get("within_days") || "all";
  const growthDays = query.get("growth_days") || "7";
  const q = query.get("q") || "";
  const folder = query.get("folder") || "";
  const minVideos = query.get("min_videos") || "1";
  const page = Math.max(1, Number(query.get("page") || 1));

  const overview = await api("/api/overview");
  const folders = overview.folders || [];

  const params = {
    sort,
    page,
    page_size: 20,
    within_days: within === "all" ? null : within,
    growth_days: growthDays,
    q,
  };
  let data;
  if (scope === "up") {
    data = await api("/api/rankings", {
      ...params, scope: "up", min_videos: minVideos,
    });
  } else {
    data = await api("/api/videos", { ...params, folder: folder || null });
  }

  const startRank = (data.page - 1) * data.page_size + 1;
  const exportParams = {
    ...params, folder: folder || null, scope,
    min_videos: scope === "up" ? minVideos : null,
  };
  delete exportParams.page;
  delete exportParams.page_size;

  root.innerHTML = `<section class="page rankings-page">
    <header class="page-head">
      <div>
        <h1>榜单</h1>
        <p class="page-sub">共 ${formatCount(data.total)} ${scope === "up" ? "个 UP" : "条视频"}</p>
      </div>
      ${scope === "video"
        ? `<a class="button ghost" href="${escapeAttr(apiUrl("/api/export.csv", exportParams))}">导出 CSV</a>`
        : ""}
    </header>
    ${controls({ scope, sort, within, growthDays, q, folder, minVideos, folders })}
    ${data.available === false ? `<div class="notice-row warning">
      <strong>增长数据尚不可用</strong><span>${escapeHtml(data.reason || "")}</span>
    </div>` : ""}
    ${listHtml(data, scope, sort, startRank)}
    ${pager(data.page, data.pages)}
  </section>`;

  root.querySelectorAll("[data-scope]").forEach((button) => button.addEventListener("click", () => {
    replaceQuery({
      scope: button.dataset.scope,
      sort: button.dataset.scope === "up" ? "avg_views" : "heat",
      page: null,
    });
  }));
  root.querySelectorAll("[data-sort]").forEach((button) => button.addEventListener("click", () => {
    replaceQuery({ sort: button.dataset.sort, page: null });
  }));
  root.querySelectorAll("[data-within]").forEach((button) => button.addEventListener("click", () => {
    replaceQuery({ within_days: button.dataset.within === "all" ? null : button.dataset.within, page: null });
  }));
  root.querySelectorAll("[data-growth-days]").forEach((button) => button.addEventListener("click", () => {
    replaceQuery({ growth_days: button.dataset.growthDays, page: null });
  }));
  root.querySelector("#folder-filter")?.addEventListener("change", (event) => {
    replaceQuery({ folder: event.target.value || null, page: null });
  });
  root.querySelector("#min-videos")?.addEventListener("change", (event) => {
    replaceQuery({ min_videos: event.target.value, page: null });
  });
  root.querySelector("#rank-filter")?.addEventListener("submit", (event) => {
    event.preventDefault();
    const value = new FormData(event.target).get("q") || "";
    replaceQuery({ q: String(value).trim() || null, page: null });
  });
  root.querySelectorAll("[data-page]").forEach((button) => button.addEventListener("click", () => {
    if (button.disabled) return;
    replaceQuery({ page: button.dataset.page });
  }));
  centerActiveChips(root);
}