热点数据 tab 恢复信息图标版(hover提示近7日数据);首页数据预览统计项「热门账号」改「关注账号」

This commit is contained in:
maogeigei committed 2026-09-03 15:17:09 +08:00
1 parent 75e1846847
commit 8719ae5edc
5 files changed
+20 -19

No files matched your search

+7
View File
@@ -168,3 +168,10 @@
- CSS:.page-toolbar .rank-tabs 行内化(border-bottom none、margin 0、center)
- index.html 静态引用加 ?v=20260903 版本参数(防缓存旧 js/css;今后改动记得 bump)
- 服务无需重启(静态),curl 资源全 200
## R24 三榜 tab 悬停气泡「近7日数据」(09-03 追加)
- 用户要求:视频热榜/点赞榜 tab「后面加个信息图标 hover 提示近7日数据」→ 澄清后改为**不加图标,纯悬停提示**
- **最终方案(用户定)**:tab 上直接 hover 停留约 2 秒浮现「近7日数据」气泡。实现=纯 CSS:button 加 `data-tip="近7日数据"`,`:hover::after { content: attr(data-tip); opacity:1; transition-delay:2s; }`,基础态 transition 无 delay → **进入延迟 2s、移开立即淡出**(关键:delay 只写在 hover 规则里)
- 覆盖两处同构 tabs:data-pages.js renderRanking RANK_TABS(第三字段 tip,动态拼 data-tip)+ app.js 首页 rank-preview(静态 button 直写)
- 回滚了先做的 info 图标版(ICON_PATHS 'info'、.rank-tab-info span)——用户不要图标,避免死代码已删净
- index.html 版本参数 bump 至 ?v=20260903c;git 75e1846(连同 acb4c3e 一起 push,052550e..75e1846)
@@ -164,6 +164,7 @@ const ICON_PATHS = {
'table': '<path d="M12 3v18"/><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/>',
'file': '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
'image': '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
'info': '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
'arrow-left': '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
'x': '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
'arrow-up': '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
@@ -307,7 +308,7 @@ function renderHome() {
return `
<div class="home">
<div class="home-stats" id="homeStats" aria-label="数据预览">
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">热门账号</span></div>
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">关注账号</span></div>
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">视频解析</span></div>
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">AI写脚本</span></div>
<div class="home-stat-item"><span class="home-stat-value">–</span><span class="home-stat-label">AI脚本诊断</span></div>
@@ -324,8 +325,8 @@ function renderHome() {
<div class="recent-head">
<div class="rank-tabs" role="tablist">
<button class="rank-tab active" data-rank-tab="week" role="tab">账号周榜</button>
<button class="rank-tab" data-rank-tab="hot" data-tip="近7日数据" role="tab">视频热榜</button>
<button class="rank-tab" data-rank-tab="likes" data-tip="近7日数据" role="tab">点赞榜</button>
<button class="rank-tab" data-rank-tab="hot" role="tab">视频热榜<span class="rank-tab-info" title="近7日数据">${svgIcon('info', 13)}</span></button>
<button class="rank-tab" data-rank-tab="likes" role="tab">点赞榜<span class="rank-tab-info" title="近7日数据">${svgIcon('info', 13)}</span></button>
</div>
<div class="rank-tools" id="rankTools">
<select id="rankCat" class="input-select rank-filter" title="赛道筛选"></select>
@@ -353,7 +354,7 @@ async function loadHomeStats() {
const d = await api('/api/dsh/stats');
const s = d.stats || {};
const items = [
['热门账号', s.accounts],
['关注账号', s.accounts],
['视频解析', s.analyses],
['AI写脚本', s.rewrites],
['AI脚本诊断', s.reviews],
@@ -521,7 +521,7 @@ async function renderRanking(view) {
${toolbarBack()}
<span class="page-title">热点数据</span>
<div class="rank-tabs" role="tablist">
${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}"${tip ? ` data-tip="${tip}"` : ''} role="tab">${label}</button>`).join('')}
${RANK_TABS.map(([k, label, tip]) => `<button class="rank-tab${k === tab ? ' active' : ''}" data-rank-tab="${k}" role="tab">${label}${tip ? `<span class="rank-tab-info" title="${tip}">${svgIcon('info', 13)}</span>` : ''}</button>`).join('')}
</div>
${withFilters ? `<div class="toolbar-right">
<select id="rankCat" class="input-select" title="赛道筛选">
@@ -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=20260903c">
<link rel="stylesheet" href="style.css?v=20260903d">
<script src="vendor/echarts.min.js"></script>
</head>
<body>
@@ -41,7 +41,7 @@
</div>
</div>
<script src="app.js?v=20260903c"></script>
<script src="data-pages.js?v=20260903c"></script>
<script src="app.js?v=20260903d"></script>
<script src="data-pages.js?v=20260903d"></script>
</body>
</html>
@@ -588,17 +588,10 @@ td.td-title { max-width: 240px; }
/* 热点数据页:tab 并入 page-toolbar 同一行(与赛道/时间筛选同行),去整行分隔条 */
.page-toolbar .rank-tabs { border-bottom: none; margin-bottom: 0; align-self: center; }
.page-toolbar .rank-tab { padding: 4px 10px 3px; font-size: 13px; }
/* tab 悬停提示气泡:停留约 2s 后浮现,移开立即淡出(transition-delay 仅作用于 hover 态) */
.rank-tab[data-tip] { position: relative; }
.rank-tab[data-tip]::after {
content: attr(data-tip);
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: #2b2f36; color: #f2f4f7; font-size: 12px; line-height: 1;
padding: 5px 9px; border-radius: 6px; white-space: nowrap;
pointer-events: none; z-index: 40; opacity: 0;
transition: opacity .15s ease;
}
.rank-tab[data-tip]:hover::after { opacity: 1; transition-delay: 2s; }
/* tab 内信息图标(视频热榜/点赞榜 · 近7日数据):弱化跟随文字色,hover 原生 title 提示 */
.rank-tab .rank-tab-info { display: inline-flex; align-items: center; margin-left: 3px; opacity: .5; cursor: help; vertical-align: -1px; }
.rank-tab:hover .rank-tab-info { opacity: .9; }
.rank-tab.active .rank-tab-info { opacity: .7; }
.rank-placeholder { border: 1px dashed var(--border); border-radius: 10px; padding: 36px 12px; text-align: center; color: var(--dim); background: var(--panel); font-size: 14px; }
.rank-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.rank-filter { padding: 3px 6px; font-size: 14px; max-width: 110px; }