kcloud/re-xxm
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): inline toolbar with label sort, compact time, icon search

Browse Source
This commit is contained in:
kairee committed 2026-11-01 12:56:37 +08:00
1 parent 9be7d1cab2
commit d00fcd5c38
5 files changed
+62 -36
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

reaction_board/web/static/views/rankings.js
+18 -22
View File
@@ -67,27 +67,27 @@ function timeOptions(within, year, years) {
return base + yearOptions;
}
function controls({ scope, sort, within, year, growthDays, q, minVideos, years }) {
function controls({ scope, sort, within, year, growthDays, q, years }) {
return `
<div class="rank-toolbar">
<form class="rank-search" 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>
<label class="select-label">排序
<select class="select" id="rank-sort">${sortOptions(scope, sort)}</select>
</label>
<label class="select-label">时间
<select class="select" id="rank-time">${timeOptions(within, year, years)}</select>
</label>
${scope === "up" ? `<label class="select-label">视频数
<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>
</label>` : ""}
<select class="select" id="rank-time" aria-label="时间范围" title="时间范围">
${timeOptions(within, year, years)}
</select>
<form class="rank-search" id="rank-filter">
<span class="search-box">
<input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
<button class="search-button" type="submit" aria-label="搜索" title="搜索">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" aria-hidden="true">
<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.2-3.2"></path>
</svg>
</button>
</span>
</form>
</div>
${scope === "video" && (sort === "growth" || sort === "growth_rate") ? `
<div class="chip-row growth-days">
@@ -184,9 +184,6 @@ function bindControls(root) {
root.querySelectorAll("[data-growth-days]").forEach((button) => button.addEventListener("click", () => {
replaceQuery({ growth_days: button.dataset.growthDays, 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") || "";
@@ -205,7 +202,6 @@ async function renderScope(root, { query }, scope) {
const year = query.get("year") || "";
const growthDays = query.get("growth_days") || "7";
const q = query.get("q") || "";
const minVideos = query.get("min_videos") || "1";
const page = Math.max(1, Number(query.get("page") || 1));
const overview = await getOverview();
@@ -222,7 +218,7 @@ async function renderScope(root, { query }, scope) {
};
let data;
if (scope === "up") {
data = await api("/api/ups", { ...params, min_videos: minVideos });
data = await api("/api/ups", params);
} else {
data = await api("/api/videos", params);
}
@@ -235,7 +231,7 @@ async function renderScope(root, { query }, scope) {
<header class="page-head">
<h1>${title} <span class="page-sub">共 ${formatCount(data.total)} ${unit}</span></h1>
</header>
${controls({ scope, sort, within, year, growthDays, q, minVideos, years })}
${controls({ scope, sort, within, year, growthDays, q, years })}
${durationNote(data)}
${data.available === false ? `<div class="notice-row warning">
<strong>${sort.startsWith("growth") ? "增长数据尚不可用" : "榜单筛选后为空"}</strong>