此刻:常驻三行同周妈妈使用动态(三种工具错开、可点直达),排在悄悄话入口上方 (v26100185)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-02 12:29:31 +00:00
parent 6e55245919
commit 6b26d5ccbe
3 changed files with 51 additions and 14 deletions

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100183 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100185 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -297,6 +297,9 @@
<span class="pp-doing hide" id="ppDoing"></span>
</span>
</div>
<!-- 2026-10-02 用户:「此刻给我放 3 个使用应用记录」→ 动态从「一行滚动、有悄悄话就让位」改成常驻三行,
排在悄悄话入口上面;每 3 秒最上面一条淡出、底下补一条;点一行直接进对应工具(act → TODAY_GO)。 -->
<div class="pl-feed pl-feed3 hide" id="plFeed"><div class="pl-track" id="plTrack"></div></div>
<!-- 2026-10-02 二改(用户:「此刻有一点点乱……悄悄话点进去,前端一个很简洁、轻量化的入口,
点进去是整个悄悄话的大页面,设计炫酷一点、有创意、视觉有冲击力」):
首页只留一条入口(一句轮播的悄悄话 + 条数),横滑纸条带挪进全屏页 #whPage。 -->
@@ -307,7 +310,6 @@
<span class="we-txt"><b id="weName">孕妈悄悄话</b><span class="we-roll" id="weRoll"></span></span>
<span class="we-go" id="weGo"></span>
</button>
<div class="pl-feed hide" id="plFeed"><div class="pl-track" id="plTrack"></div></div>
</div>
</section>

View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
var VER = '26100183';
var VER = '26100185';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3812,24 +3812,32 @@
return ((_fpData && _fpData.used) || []).some(u => u.appId === SELF_APP[k]);
}
function rowHTML(f) {
/* 一行:小头像 + 「同周妈妈 · 刚刚」+ 动作(数字标色)。原文「孕 29 周的妈妈 数完胎动……」按「的妈妈 」切 */
/* 一行:小头像 + 「同周妈妈 · 刚刚」+ 动作(数字标色)。原文「孕 29 周的妈妈 数完胎动……」按「的妈妈 」切。
动作能对上首页入口(act ∈ TODAY_GO)→ 整行可点,直接进那个工具 */
const t = String(f.text || ''), i = t.indexOf('的妈妈 ');
const who = peerMode ? '同孕周妈妈' : (i > 0 ? t.slice(0, i + 3) : '一位妈妈'), what = i > 0 ? t.slice(i + 4) : t;
return '<div class="pl-row"><span class="pr-ava">' + momAva(strSeed(t + (f.ago || ''))) + '</span>' +
'<span class="pr-who">' + esc(who) + ' · ' + esc(f.ago || '刚刚') + '</span><span class="pr-do">' +
esc(what).replace(/(\d+)/g, '<em>$1</em>') + '</span></div>';
const go = f.act && TODAY_GO[f.act] ? ' data-go="' + esc(f.act) + '"' : '';
return '<div class="pl-row' + (go ? ' is-go' : '') + '"' + go + '><span class="pr-ava">' + momAva(strSeed(t + (f.ago || ''))) + '</span>' +
/* 同周版标题已经说了「和你同一周」,行里不再重复「同孕周妈妈」,省出地方给动作。
不显示「N 分钟前」:三行按工具错开排(见 paint),时间会前后颠倒,又不能改接口给的时间 */
(peerMode ? '' : '<span class="pr-who">' + esc(who) + '</span>') + '<span class="pr-do">' +
esc(what).replace(/(\d+)/g, '<em>$1</em>') + '</span>' +
(go ? '<i class="pr-go" aria-hidden="true">›</i>' : '') + '</div>';
}
const FEED_N = 3; /* 常驻三行 */
const ROW_H = 30; /* = .pl-feed3 .pl-row 高度 */
function tick() {
const tr = $('#plTrack');
if (!tr || feed.length < 2 || document.hidden) return;
if (!tr || feed.length <= FEED_N || document.hidden) return;
fi = (fi + 1) % feed.length;
tr.insertAdjacentHTML('beforeend', rowHTML(feed[fi]));
tr.insertAdjacentHTML('beforeend', rowHTML(feed[(fi + FEED_N - 1) % feed.length]));
tr.firstElementChild.classList.add('is-out');
tr.classList.add('is-move');
tr.style.transform = 'translateY(-26px)'; /* = .pl-row 高度 */
tr.style.transform = 'translateY(-' + ROW_H + 'px)';
setTimeout(() => {
tr.classList.remove('is-move');
/* 翻动途中若 paint() 重置过轨道(只剩 1 行),别把仅剩的那行也删了 */
if (tr.childElementCount > 1) tr.removeChild(tr.firstElementChild);
/* 翻动途中若 paint() 重置过轨道,别把刚铺好的三行删掉 */
if (tr.childElementCount > FEED_N) tr.removeChild(tr.firstElementChild);
tr.style.transform = '';
}, 600);
}
@@ -3889,12 +3897,19 @@
const sig = nf.map(x => x.text).join('|');
if (nf.length && fe.dataset.sig !== sig) {
fe.dataset.sig = sig;
feed = nf;
/* 三行尽量是三种不同的工具:按原顺序贪心挑,跟前两条动作不同的优先(挑不到就按原顺序) */
const pool = nf.slice(), mix = [];
while (pool.length) {
const recent = mix.slice(-(FEED_N - 1)).map(x => x.act);
const k = pool.findIndex(x => recent.indexOf(x.act) < 0);
mix.push(pool.splice(k < 0 ? 0 : k, 1)[0]);
}
feed = mix;
fi = 0;
const tr = $('#plTrack');
tr.classList.remove('is-move');
tr.style.transform = '';
tr.innerHTML = rowHTML(feed[0]);
tr.innerHTML = feed.slice(0, FEED_N).map(rowHTML).join('');
if (!ticking) ticking = setInterval(tick, 3000);
}
}

View File

@@ -4101,3 +4101,23 @@ a.skip:focus{left:16px;top:16px}
.apps-grid .a-ico-letter{width:48px;border-radius:16px;font-size:19px}
.apps-grid .a-n{font-size:11.5px;letter-spacing:-.2px}
.apps-grid .app.is-done::after{right:calc(50% - 30px)}
/* ================= 此刻 · 三行使用动态(2026-10-02)=================
用户:「此刻给我放 3 个使用应用记录」。常驻三行,不再给悄悄话让位;每 3 秒顶上一行淡出、底下补一行。 */
.pulse.has-wh .pl-feed.pl-feed3{display:block}
.pulse .pl-feed.pl-feed3.hide{display:none}
.pl-feed.pl-feed3{height:90px;margin:10px 0 2px;padding:0;-webkit-mask-image:none;mask-image:none}
.pl-feed3 .pl-row{height:30px;gap:8px;font-size:12.5px;padding:0 2px;border-radius:10px;transition:opacity .45s,background .15s}
.pl-feed3 .pl-row .pr-ava{width:22px;height:22px;box-shadow:0 0 0 1.5px #fff}
.pl-feed3 .pl-row .pr-who{font-size:11.5px}
.pl-feed3 .pl-row .pr-do{color:var(--ink)}
.pl-feed3 .pl-row .pr-do em{font-weight:700}
.pl-feed3 .pl-row .pr-go{flex:none;font-style:normal;font-size:15px;line-height:1;color:#D4B8AC;padding:0 4px}
.pl-feed3 .pl-row.is-go{cursor:pointer}
.pl-feed3 .pl-row.is-go:active{background:rgba(232,131,107,.08)}
.pl-feed3 .pl-row.is-out{opacity:0}
.pl-feed3 .pl-track>.pl-row:last-child:not(:nth-child(-n+3)){animation:plIn .55s var(--ease) both}
@keyframes plIn{from{opacity:0}to{opacity:1}}
.pulse.has-wh .wh-entry{margin-top:10px}
.pl-feed3 .pl-row .pr-ago{flex:none;font-size:11px;color:var(--muted)}
.pl-feed3 .pl-row .pr-go{padding:0 2px 0 0}