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

纠正: 应用列表渲染到「记一下」弹层的全部孕期工具宫格(#appsGrid), 首页 bento 恢复原样 (v26090722)

Browse Source
This commit is contained in:
Karlcarlo
2026-09-08 01:51:09 +08:00
parent 98534bd8e2
commit f2eb903eff
3 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.html
View File

@@ -6,8 +6,8 @@
<meta name="theme-color" content="#F4593C">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>妈妈盒子 · 孕育陪伴</title>
<!-- V:26090721 缓存版本标记：改 css/js 时同步 bump 该值，并给下方资源引用加 ?v= 以强制 webview 刷新子资源 -->
<link rel="stylesheet" href="mama-box.css?v=26090721">
<!-- V:26090722 缓存版本标记：改 css/js 时同步 bump 该值，并给下方资源引用加 ?v= 以强制 webview 刷新子资源 -->
<link rel="stylesheet" href="mama-box.css?v=26090722">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
@@ -161,19 +161,69 @@
<span class="wm" aria-hidden="true">妈妈</span>
<div class="dock-head">
<h2 class="dock-title" id="dockTitle">宝宝的孕育工具</h2>
<button class="dock-all" id="dockAll" style="display:none">所有工具 ›</button>
<button class="dock-all" data-sheet="open">所有工具 ›</button>
</div>
<p class="dock-note"><svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true"><path d="M11 2.6l1.9 5.2 5.2 1.9-5.2 1.9L11 16.8l-1.9-5.2L3.9 9.7l5.2-1.9L11 2.6z" fill="currentColor"/><path d="M18.4 14.6l.8 2.1 2.2.8-2.2.8-.8 2.1-.8-2.1-2.2-.8 2.2-.8.8-2.1z" fill="currentColor" opacity=".6"/></svg>妈妈每记录一次，宝宝就多一段成长记忆</p>
<!-- 五张工具卡 + 一个出口。宫格本身这一版没动：
不等宽三列 + 竖向堆叠本来就是这一屏最不传统的部分，
而且两列高度是硬凑齐的（见 style.css 里 .mini-card.curve 上面那段），
动它得整列重算，收益也不在这儿。 -->
<!-- 一期 · 工具区 = box_app 已上架应用列表（/api/mp/apps 动态渲染）。
原型里那五张演示卡（数胎动/胎儿估重/孕期体重/孕检日历/生长曲线）已整体移除：
「今天 3 次 / 58.2kg」这类是写死的演示数据，不是真实功能。
应用信息（图标/名称/链接）由 box_app 应用管理统一维护，点击带身份跳转。 -->
<div class="app-grid" id="appGrid"></div>
<button class="app-more" id="appMore" style="display:none">展开全部工具 ›</button>
动它得整列重算，收益也不在这儿。 -->
<div class="bento">
<div class="bento-col">
<button class="mini-card kick ripple" data-mini="kick">
<div class="mc-head">
<div class="mc-title">数胎动</div>
<div class="mc-sub">今天 <b id="kickTodayHome">3</b> 次</div>
</div>
<span class="mc-btn">记录</span>
<img class="mc-art" src="assets/img/7980160b80b0.png" alt="" aria-hidden="true">
</button>
<!-- 第五个工具。原来是「胎心记录」，本批换成「胎儿估重」——
后者是真正部署好的站点（beian1.douba.top），点了能用；
而胎心记录在这张卡上一直只是个弹 toast 的占位入口。
⚠️ 胎心记录**没有被删掉**：它还在「记一下」弹层里（快捷区 q3 +
全部工具宫格），档案页那两条「来自「胎心记录」」的历史记录也照旧。
这里换掉的只是首页宫格的一个坑位。
⚠️ 类名、结构、三个尺寸全部照搬原来那张卡：外层仍是 .mini-card
（.heart 只是改名成 .fweight，两条 CSS 跟着改），内部仍是
「名字 + 状态两行叠着 + 右下角插画」。所以左列 158 + 10 + 64 = 232
这笔账一个数都没动，右列（88 + 10 + 80 + 10 + 44）不用跟着补。
图标换成了内联 SVG 的表盘，理由见 patch 脚本里那段注释。 -->
<button class="mini-card fweight ripple" data-mini="fweight">
<div class="mc-title sm">胎儿估重</div>
<div class="mc-sub">去测算</div>
<img class="mc-art" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2048%2048'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'fwg'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%3Cstop%20offset%3D'0'%20stop-color%3D'%23AEC3EA'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%238AA3D6'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'18'%20fill%3D'url(%23fwg)'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'13.2'%20fill%3D'%23F8FBFF'%2F%3E%3Cpath%20d%3D'M24%2024L31.6%2016.6'%20stroke%3D'%23F2876E'%20stroke-width%3D'3.2'%20stroke-linecap%3D'round'%20fill%3D'none'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'24'%20r%3D'2.6'%20fill%3D'%235E78B4'%2F%3E%3C%2Fsvg%3E" alt="" aria-hidden="true">
</button>
</div>
<button class="mini-card weight ripple" data-mini="weight">
<img class="mc-art big" src="assets/img/b2066fd752bf.png" alt="" aria-hidden="true">
<div class="mc-title">孕期体重</div>
<div class="mc-big">58.2 <small>kg</small></div>
</button>
<div class="bento-col">
<button class="mini-card cal ripple" data-mini="cal">
<div class="mc-title sm">孕检日历</div>
<div class="mc-sub" id="calNext">—</div>
<img class="mc-art" src="assets/img/2d23b079caca.png" alt="" aria-hidden="true">
</button>
<!-- 生长曲线原来是 flex:1，把这一列剩下的高度全吃了（约 134px），
而它的内容和上面的孕检日历一模一样多。压到 80px，
省下的 54px 给下面那张「更多工具」。 -->
<button class="mini-card curve ripple" data-mini="curve">
<div class="mc-title sm">生长曲线</div>
<div class="mc-sub" data-wk="cn">—</div>
<img class="mc-art" src="assets/img/72f41378ef8e.png" alt="" aria-hidden="true">
</button>
<!-- 通往「记一下」弹层里那十几个工具。底部那颗 FAB 开的也是它。
故意不做成糖果色卡：它不是第六个工具，是个出口，
灰米底 + 一行小字，和上面五张分得开。 -->
<button class="mini-card more ripple" data-sheet="open">
<span class="mc-more-t">更多工具</span><i class="chev">›</i>
</button>
</div>
</div>
</section>
</section>
<!-- 模块二 · 今天的动线。
@@ -1713,8 +1763,8 @@
加载失败/离线时 window.wx 为 undefined，goMall() 会降级为 toast 提示，
不影响应用其余功能。 -->
<script src="js/app.js?v=26090721"></script>
<!-- 页面版本号(排查 webview 缓存)：底部会显示 v26090721 -->
<div id="ver" style="position:fixed;left:0;right:0;bottom:10px;text-align:center;z-index:9999;pointer-events:none;color:#B3A69C;font-size:10px;letter-spacing:.5px">v26090721</div>
<script src="js/app.js?v=26090722"></script>
<!-- 页面版本号(排查 webview 缓存)：底部会显示 v26090722 -->
<div id="ver" style="position:fixed;left:0;right:0;bottom:10px;text-align:center;z-index:9999;pointer-events:none;color:#B3A69C;font-size:10px;letter-spacing:.5px">v26090722</div>
</body>
</html>

39
js/app.js
View File

@@ -170,10 +170,10 @@
location.href = u;
}
/* ================= 首页工具区 = 已上架应用宫格 =================
/* ================= 「记一下」弹层 · 全部孕期工具 = 已上架应用列表 =================
数据：box_app /api/mp/apps（应用管理统一维护图标/名称/链接）。
范围：isPublished=1 且有 url；排除授权示例（wx-h5-demo，开发者用的）。
交互：默认前 8 个，「所有工具 ›/展开全部工具」展开收起；点击带身份跳转。 */
交互：全量铺进弹层宫格（沿用 .apps-grid/.app 样式），点击带身份跳转对应 H5。 */
function appTileColor(name) {
const PALETTE = ['#F2917A', '#E8A2B8', '#8FB4E3', '#7FC8A9', '#E3B771', '#A99BD1', '#73BFB2', '#DE8F6E'];
let h = 0;
@@ -192,36 +192,25 @@
location.href = url;
}
function renderAppGrid(apps) {
const grid = $('#appGrid'), moreBtn = $('#appMore'), dockAll = $('#dockAll');
const grid = $('#appsGrid');
if (!grid) return;
grid.innerHTML = apps.map(a => {
const ico = a.logo || a.icon || '';
const name = a.name || a.identifier || '应用';
/* 有 logo：白底让图盖满；无 logo：用 colorTheme/调色板 + 首字彩色块。
⚠️ colorTheme 目前全是 'blue' 这种颜色名 —— 有图时别拿它当底色，
不然 37 个磁贴清一色蓝块，图加载前像坏了。 */
/* 有 logo：白底圆角让图盖满；无 logo：colorTheme/调色板 + 首字彩色块。
⚠️ colorTheme 目前全是 'blue' 颜色名 —— 有图时别拿它当底色，否则清一色蓝。 */
const bg = ico ? 'background:#fff' : 'background:' + (a.colorTheme || appTileColor(name));
const img = ico ? '<img src="' + ico + '" alt="" loading="lazy">' : (name.slice(0, 1));
return '<button class="app-tile ripple" data-url="' + encodeURIComponent(a.url) + '">' +
'<span class="app-ico" style="' + bg + '">' + img + '</span>' +
'<span class="app-tile-name">' + name + '</span></button>';
const img = ico ? '<img class="a-ico" src="' + ico + '" alt="" loading="lazy">' : '<span class="a-ico a-ico-letter" style="background:' + bg + '">' + name.slice(0, 1) + '</span>';
return '<button class="app ripple" data-url="' + encodeURIComponent(a.url) + '">' + img + name + '</button>';
}).join('');
/* 磁贴点击（事件委托，innerHTML 重建后不用重绑） */
grid.onclick = function (e) {
const t = e.target.closest('.app-tile');
const t = e.target.closest('.app');
if (t && t.dataset.url) jumpApp(decodeURIComponent(t.dataset.url));
};
if (apps.length > 8) {
moreBtn.style.display = 'block';
dockAll.style.display = '';
}
}
function toggleAppGrid() {
const grid = $('#appGrid'), moreBtn = $('#appMore'), dockAll = $('#dockAll');
const ex = grid.classList.toggle('expanded');
moreBtn.style.display = ex ? 'none' : 'block';
dockAll.textContent = ex ? '收起 ›' : '所有工具 ›';
haptic();
/* 角标「共 N 个」同步真实数量 */
const cnt = $('.apps-head.for-all .sec-more');
if (cnt) cnt.textContent = '共 ' + apps.length + ' 个 ›';
}
function loadPublishedApps() {
fetch('/api/mp/apps?isPublished=1&pageSize=200')
@@ -233,10 +222,8 @@
.sort((x, y) => (x.seq || 0) - (y.seq || 0) || (x.no || 0) - (y.no || 0));
renderAppGrid(apps);
})
.catch(function () { /* 拉不到就保持空宫格，不影响其余页面 */ });
.catch(function () { /* 拉不到就保留弹层原有占位，不影响其余页面 */ });
}
$('#appMore').addEventListener('click', toggleAppGrid);
$('#dockAll').addEventListener('click', toggleAppGrid);
loadPublishedApps();
function go(name) {
@@ -1858,7 +1845,7 @@
n.textContent = n.dataset.wk === 'cn' ? '孕 ' + state.week + ' 周' : state.week;
});
const next = CHECKUPS.find(w => w * 7 > gaNow);
/* #calNext 原在首页孕检日历卡上 —— 那批演示卡已换成应用宫格，元素没了，别再写 */
$('#calNext').textContent = mdTxt(next ? gaToDate(next * 7) : state.due);
const t = new Date();
$('#noteWhen').textContent = mdTxt(t) + ' ' + WEEKDAY[t.getDay()] + ' · ' + gaTxt(gaNow);
}

13
mama-box.css
View File

@@ -2640,14 +2640,5 @@ a.skip:focus{left:16px;top:16px}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
/* ================= 首页工具区 = 已上架应用宫格 =================
数据来自 box_app /api/mp/apps（应用管理统一维护图标/名称/链接）。
默认显示前 8 个，.expanded 时全量展开；点击磁贴带身份跳转对应 H5。 */
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 8px;margin-top:14px}
.app-grid:not(.expanded) .app-tile:nth-child(n+9){display:none}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;padding:0;cursor:pointer;min-width:0}
.app-ico{width:52px;height:52px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(43,35,32,.08);display:grid;place-items:center;font-size:20px;font-weight:800;color:#fff;flex:0 0 auto}
.app-ico img{width:100%;height:100%;object-fit:cover;display:block}
.app-tile-name{font-size:11px;color:#2B2320;text-align:center;line-height:1.3;max-width:78px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-more{display:block;width:100%;margin-top:16px;padding:11px;border:1px dashed #E4D5CB;border-radius:12px;background:none;color:#A08C80;font-size:13px;font-weight:600;cursor:pointer}
.app-more:active{background:#F3EAE3}
/* 弹层「全部孕期工具」：无 logo 应用的字母兜底块（与 .a-ico 同尺寸） */
.apps-grid .a-ico-letter{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:22px;color:#fff;font-size:22px;font-weight:800}