R37-R38: 榜单下载按钮回 rank-toolbar 行+去白底纯图标；首页榜单 tab 右侧加同款下载按钮（复用 updateRankingData）
This commit is contained in:
maogeigei committed
1 parent
1f147e84dd
commit
28eba2a3b0
5 files changed
+44
-16
No files matched your search
@@ -327,6 +327,7 @@ function renderHome() {
|
||||
<button class="rank-tab" data-rank-tab="hot" title="近7日数据" role="tab">视频热榜</button>
|
||||
<button class="rank-tab" data-rank-tab="likes" title="近7日数据" role="tab">点赞榜</button>
|
||||
</div>
|
||||
<button class="btn btn-icon home-rank-update" id="homeRankUpdate" title="更新榜单数据：后台任务重新抓取三榜（账号周榜 5 赛道 / 视频热榜 / 点赞榜）最新一期并落盘；30 分钟内已更新会拦截防重复">${svgIcon('download', 16, 'currentColor')}</button>
|
||||
<div class="rank-tools" id="rankTools">
|
||||
<select id="rankCat" class="input-select rank-filter" title="赛道筛选"></select>
|
||||
<button class="btn btn-sm" id="rankPrevDate" title="上一期">◀</button>
|
||||
@@ -739,6 +740,9 @@ async function router() {
|
||||
updateCrumbs('');
|
||||
view.innerHTML = renderHome();
|
||||
view.querySelectorAll('.data-card').forEach((b) => b.addEventListener('click', () => { location.hash = b.dataset.hash; }));
|
||||
// 首页榜单下载按钮（复用榜单页同款后台任务；data-pages.js updateRankingData 已导出到 window.DataPages）
|
||||
const hUpd = view.querySelector('#homeRankUpdate');
|
||||
if (hUpd) hUpd.addEventListener('click', () => window.DataPages && window.DataPages.updateRankingData(view, hUpd));
|
||||
// 榜单 tab 切换：week/hot/likes 各自按 board 拉数据渲染（meta 与数据均带 board 参数）
|
||||
view.querySelectorAll('.rank-tab').forEach((t) => t.addEventListener('click', () => {
|
||||
setRankBoard(t.dataset.rankTab, t);
|
||||
|
||||
@@ -522,14 +522,11 @@ async function renderRanking(view) {
|
||||
const st = { week: mkState(), hot: mkState(), likes: mkState() };
|
||||
let tab = 'week';
|
||||
const tabLabel = () => { const t = RANK_TABS.find(([k]) => k === tab); return t ? t[1] : ''; };
|
||||
// 09-03 tab 始终在 page-toolbar 渲染（含空态/错误态），下载按钮紧贴 tab 右侧；筛选+翻页放 rank-toolbar（withFilters 时）
|
||||
// 09-03 page-toolbar 只放 返回+标题；rank-toolbar 恒渲染含 tab + 下载按钮（紧贴 tab 右侧）保证空态/错误态也能看到更新入口（首次抓取）；筛选+翻页仅 withFilters 时出现在同行最右
|
||||
const toolbar = (s, withFilters) => {
|
||||
const tabsHtml = `<div class="rank-tabs" role="tablist" style="margin-left:auto">
|
||||
${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` title="${tip}"` : ''} role="tab">${label}</button>`).join('')}
|
||||
</div>
|
||||
<button class="btn btn-icon" id="rankUpdate" title="更新榜单数据：后台任务重新抓取三榜（账号周榜 5 赛道 / 视频热榜 / 点赞榜）最新一期并落盘；30 分钟内已更新会拦截防重复">${svgIcon('download', 16, 'currentColor')}</button>`;
|
||||
const filtersHtml = withFilters ? `<div class="rank-toolbar">
|
||||
<div class="toolbar-right">
|
||||
const tabsHtml = `${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` title="${tip}"` : ''} role="tab">${label}</button>`).join('')}
|
||||
<button class="btn btn-icon" id="rankUpdate" title="更新榜单数据：后台任务重新抓取三榜（账号周榜 5 赛道 / 视频热榜 / 点赞榜）最新一期并落盘；30 分钟内已更新会拦截防重复">${svgIcon('download', 16, 'currentColor')}</button>`;
|
||||
const filtersHtml = withFilters ? `<div class="toolbar-right">
|
||||
<select id="rankCat" class="input-select" title="赛道筛选">
|
||||
<option value="">全部赛道</option>
|
||||
${s.categories.map((c) => `<option value="${esc(c)}" ${c === s.category ? 'selected' : ''}>${esc(c)}</option>`).join('')}
|
||||
@@ -537,14 +534,15 @@ async function renderRanking(view) {
|
||||
<button class="btn" id="rankPrev" title="上一期">◀</button>
|
||||
<span class="pager-info" title="选择日期">${esc(s.date)}</span>
|
||||
<button class="btn" id="rankNext" title="下一期">▶</button>
|
||||
</div>
|
||||
</div>` : '';
|
||||
</div>` : '';
|
||||
return `<div class="page-toolbar">
|
||||
${toolbarBack()}
|
||||
<span class="page-title">热点数据</span>
|
||||
${tabsHtml}
|
||||
</div>
|
||||
${filtersHtml}`;
|
||||
<div class="rank-toolbar">
|
||||
<div class="rank-tabs" role="tablist">${tabsHtml}</div>
|
||||
${filtersHtml}
|
||||
</div>`;
|
||||
};
|
||||
|
||||
// 标题列统一截断（作品标题很长）：悬停 title 看全文
|
||||
@@ -1810,4 +1808,4 @@ async function openScriptModal({ rewriteId, videoId } = {}) {
|
||||
renderModal();
|
||||
}
|
||||
|
||||
window.DataPages = { renderRanking, renderAccounts, renderAccountDetail, renderVideoDetail, renderRewrites, renderReviews, openScriptModal };
|
||||
window.DataPages = { renderRanking, renderAccounts, renderAccountDetail, renderVideoDetail, renderRewrites, renderReviews, openScriptModal, updateRankingData };
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MCN工作台</title>
|
||||
<link rel="stylesheet" href="style.css?v=20260903x">
|
||||
<link rel="stylesheet" href="style.css?v=20260903z">
|
||||
<script src="vendor/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js?v=20260903v"></script>
|
||||
<script src="data-pages.js?v=20260903y"></script>
|
||||
<script src="app.js?v=20260903w"></script>
|
||||
<script src="data-pages.js?v=20260903aa"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -427,7 +427,10 @@ main#view { height: calc(100vh - 55px); overflow: auto; } /* 55px=topbar 实际
|
||||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
.btn-busy { background: var(--primary-soft) !important; color: var(--primary) !important; border-color: var(--primary) !important; opacity: .8; }
|
||||
.btn-icon { padding: 5px 9px; display: inline-flex; align-items: center; justify-content: center; } /* 纯图标按钮（09-03：榜单更新等） */
|
||||
#rankUpdate { padding-left: 11.5px; padding-right: 11.5px; } /* 09-03 更新按钮加宽 5px（icon 16 + 左右 padding 9→11.5），更易点中 */
|
||||
#rankUpdate { padding-left: 11.5px; padding-right: 11.5px; background: transparent; border-color: transparent; } /* 09-03 更新按钮加宽 5px（icon 16 + 左右 padding 9→11.5），更易点中；去白底/边框只显 icon */
|
||||
#rankUpdate:hover { background: transparent; border-color: transparent; } /* 覆盖 .btn:hover 默认主色边框 */
|
||||
.home-rank-update { background: transparent; border-color: transparent; padding-left: 11.5px; padding-right: 11.5px; } /* 09-03 首页榜单下载按钮：去白底只显 icon，padding 与榜单 #rankUpdate 对齐 */
|
||||
.home-rank-update:hover { background: transparent; border-color: transparent; }
|
||||
.btn-busy .ic { animation: req-spin 1s linear infinite; } /* busy 态图标旋转（复用弹窗 spinner 动画） */
|
||||
.btn-sm { padding: 3px 10px; font-size: 14px; border-radius: 6px; }
|
||||
.btn-primary { background: var(--primary); color: #fff; border-color: transparent; }
|
||||
|
||||
Reference in new issue
Block a user