jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

记一下弹窗加厚：日期孕周 + 今天进度卡 + 先记这件 + 宫格已用打勾 (v26100166)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-02 06:39:35 +00:00
parent acc8301b20
commit d75d7b7023
3 changed files with 103 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
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:26100165 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100166 缓存版本标记：改 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 第四节） -->
@@ -1544,6 +1544,7 @@
<div class="sheet-head">
<div>
<h2>记一下</h2>
<p class="sk-sub" id="skSub"></p>
<!-- ⚠️ 临时隐藏（2026-09-22）：「今天已记 N 条」依赖记录/统计功能，尚未实现 -->
<p class="tbd-hide"><span id="noteWhen">—</span> · 今天已记 <b id="todayCount">4</b> 条</p>
</div>
@@ -1564,6 +1565,18 @@
删掉后 .quick-row 由 4 列改成 3 列，见 style.css -->
</div>
<!-- 2026-10-02 用户：「记一下弹窗有点单薄」→ 工具宫格上面加两层，数据都来自今日脚印接口（_fpData），不编数据：
① 今天卡：日期 + 孕周 + 一圈「今天记了几项」进度环 + 已记的工具小胶囊；
② 「先记这件」：今天还没用的前 2 个工具，配一句该做的事（todoLine），大卡可点。
接口没回来 / 访客 → 这两块保持隐藏，只剩副标题 + 宫格（和原来一样）。 -->
<div class="sk-today hide" id="skToday">
<div class="sk-ring" id="skRing" aria-hidden="true"><svg viewBox="0 0 44 44"><circle cx="22" cy="22" r="18"/><circle class="sk-arc" id="skArc" cx="22" cy="22" r="18"/></svg><b id="skNum">0</b></div>
<div class="sk-tt"><b id="skLine"></b><span id="skDone"></span></div>
</div>
<div class="sk-next hide" id="skNext">
<div class="apps-head">先记这件<span class="sk-hint">花一分钟就好</span></div>
<div class="sk-cards" id="skCards"></div>
</div>
<div class="apps-head for-all">全部孕期工具 <button class="sec-more" data-toast="共 16 个孕期工具">共 16 个 ›</button></div>
<div class="apps-grid" id="appsGrid">
<button class="app ripple"><img class="a-ico" src="assets/img/505ace532176.png" alt="" aria-hidden="true">数胎动</button>

55
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100165';
var VER = '26100166';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -541,7 +541,9 @@
nav 排到 .sheet 前面之后那条规则永远不再命中，圆钮会直接不转 —— 而且
这种「动画没了」的回归 jsdom 根本量不到，只能靠这段注释和下面那条断言钉住。
⚠️ 别图省事删掉这两行改回兄弟选择器，除非你把 nav 也挪回文件末尾。 */
let sheetPaint = null; // 「记一下」今天卡 + 先记这件（定义在今日脚印那段，依赖 _fpData / todoLine）
function openSheet() {
if (sheetPaint) try { sheetPaint(); } catch (e) { /* 只是装饰层，出错不挡弹窗 */ }
scrim.classList.add('show');
sheet.classList.add('show');
phoneEl.classList.add('sheet-open');
@@ -4414,6 +4416,57 @@
if (sub) sub.textContent = n ? '完成任意一件，今天的第一只小脚丫就会印上来' : '去上面的工具记一笔，今天的第一只小脚丫就会印上来';
}
/* 「记一下」弹窗上半部分（2026-10-02 用户：「有点单薄」）。数据只认 _fpData（今日脚印接口），
used = 今天用过的工具，unused = 还没用的；拿不到就把两块藏起来，退回原来的「标题 + 宫格」。 */
sheetPaint = function () {
const n = new Date(Date.now() + 8 * 3600e3); // 北京时间
const wd = '日一二三四五六'[n.getUTCDay()];
const wk = state.week ? '孕 ' + state.week + ' 周' + (state.day ? ' +' + state.day + ' 天' : '') + ' · ' : '';
$('#skSub').textContent = wk + (n.getUTCMonth() + 1) + '月' + n.getUTCDate() + '日 周' + wd;
const r = _fpMode === 'rows' || _fpMode === 'guide' ? (_fpData || {}) : null;
const today = $('#skToday'), next = $('#skNext');
today.classList.toggle('hide', !r);
next.classList.add('hide');
$$('#appsGrid .app').forEach(b => b.classList.remove('is-done'));
if (!r) return;
const used = (r.used || []).filter(u => u.appName), unused = r.unused || [];
const total = used.length + unused.length;
const nm = state.babyName || '宝宝';
$('#skNum').textContent = used.length;
$('#skArc').style.strokeDasharray = (total ? used.length / total * 113.1 : 0).toFixed(1) + ' 113.1';
$('#skLine').textContent = used.length ? '今天已经记了 ' + used.length + ' 项' : '今天还没有记录';
const done = $('#skDone');
done.textContent = '';
if (used.length) {
used.slice(0, 4).forEach(u => { const c = document.createElement('i'); c.textContent = u.appName; done.appendChild(c); });
if (used.length > 4) done.append('等 ' + used.length + ' 项');
} else done.textContent = '记下一笔，就是' + nm + '今天的第一只小脚丫';
/* 宫格里今天用过的工具打个小勾 */
const usedIds = new Set(used.map(u => u.identifier).filter(Boolean));
$$('#appsGrid .app').forEach(b => { if (usedIds.has(decodeURIComponent(b.dataset.id || ''))) b.classList.add('is-done'); });
/* 先记这件：前 2 个还没用的 */
const box = $('#skCards');
box.innerHTML = '';
unused.slice(0, 2).forEach((u, i) => {
const ident = u.identifier || '', app = ident ? APP_BY_ID[ident] : null;
const href = u.url || (app && app.url) || '';
const name = u.appName || (app && app.name) || '';
if (!href || !name) return;
const [t, d] = todoLine(name);
const logo = (app && (app.logo || app.icon)) || '';
const c = document.createElement('button');
c.type = 'button';
c.className = 'sk-card ripple c' + i;
c.innerHTML = (logo ? '<img alt="" loading="lazy">' : '<span class="sk-l"></span>') + '<b></b><em></em><span class="sk-go">去记 ›</span>';
if (logo) c.querySelector('img').src = logo; else c.querySelector('.sk-l').textContent = name.slice(0, 1);
c.querySelector('b').textContent = t;
c.querySelector('em').textContent = d;
c.addEventListener('click', () => jumpApp(href, (app && app.identifier) || ident));
box.appendChild(c);
});
next.classList.toggle('hide', !box.childElementCount);
};
/* 加载中的中性占位（不是假数据）：与 index.html 里那条首屏占位同构 */
function pendingFootprintStep() {
const d = document.createElement('div'); d.className = 'step';

35
mama-box.css
View File

@@ -3747,3 +3747,38 @@ a.skip:focus{left:16px;top:16px}
.whl .whp-hug{height:26px;padding:0 10px;font-size:12px}
@media (prefers-reduced-motion:reduce){.whs-star i,.whs-star.on::after,.whf-q.in{animation:none!important}}
.whf-nav button{display:grid;place-items:center;padding:0;line-height:1}
/* ================= 「记一下」弹窗加厚（2026-10-02）=================
用户：「点记一下那个弹窗……现在有点单薄」。标题下加日期孕周；宫格上面加「今天卡」和「先记这件」两张大卡。 */
.sheet-head p.sk-sub{margin-top:6px;font-size:13px;color:#9C8F88;letter-spacing:.2px}
.sk-today{display:flex;align-items:center;gap:14px;margin:0 4px;padding:14px 16px;border-radius:20px;
background:linear-gradient(120deg,#FFF3EC,#FDEEF0);box-shadow:inset 0 0 0 1px #F6E2DA}
.sk-today.hide,.sk-next.hide{display:none}
.sk-ring{position:relative;flex:none;width:52px;height:52px}
.sk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.sk-ring circle{fill:none;stroke:#F6DED5;stroke-width:4.5}
.sk-ring .sk-arc{stroke:#E8836B;stroke-linecap:round;stroke-dasharray:0 113.1;transition:stroke-dasharray .8s var(--ease)}
.sk-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.sk-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sk-tt>b{font-size:15.5px;font-weight:700;color:var(--ink)}
.sk-tt>span{display:flex;flex-wrap:wrap;gap:5px;font-size:12px;color:#9C8F88;line-height:1.5}
.sk-tt>span i{font-style:normal;font-size:11.5px;font-weight:600;color:#B0604C;background:#fff;padding:2px 8px 2px 18px;border-radius:99px;position:relative}
.sk-tt>span i::before{content:"";position:absolute;left:7px;top:50%;width:6px;height:3px;margin-top:-3px;border:solid #E8836B;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
.sk-next .apps-head{margin-top:20px;margin-bottom:10px}
.sk-hint{margin-left:8px;font-size:12px;font-weight:500;color:#B7A69C}
.sk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 4px}
.sk-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:128px;padding:14px 14px 12px;border-radius:20px;text-align:left;
background:#fff;box-shadow:0 6px 18px rgba(120,80,60,.07),inset 0 0 0 1px #F1E6DF;overflow:hidden}
.sk-card.c0{background:linear-gradient(160deg,#FFF6F0,#fff 70%)}
.sk-card.c1{background:linear-gradient(160deg,#F3F6FF,#fff 70%)}
.sk-card img,.sk-card .sk-l{width:38px;height:38px;border-radius:12px;object-fit:contain;margin-bottom:6px}
.sk-card .sk-l{display:grid;place-items:center;background:#F4E5DE;color:#B0604C;font-weight:800}
.sk-card b{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.sk-card em{font-style:normal;font-size:11.5px;line-height:1.45;color:#9C8F88;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sk-go{margin-top:auto;padding-top:8px;font-size:12px;font-weight:700;color:#C2614A}
.sk-card:active{transform:scale(.98)}
/* 宫格：今天用过的打个小勾 */
.apps-grid .app{position:relative}
.apps-grid .app.is-done::after{content:"";position:absolute;top:-3px;right:calc(50% - 33px);width:18px;height:18px;border-radius:50%;
background:#5BB58A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px #FAF5F1}
.apps-head.for-all{margin-top:22px}