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

首页：数据卡与编辑解耦（用过就显示，最多4张可展开）；图标宫格由编辑决定最多8个，全部工具移到标题栏 v26110102

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-01 04:05:39 +00:00
parent c57546f9ba
commit cb1201df42
2 changed files with 102 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
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:26110101 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26110102 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -200,15 +200,17 @@
2026-10-01 用户要求：水印字从「妈妈」改成品牌名「兜爸」。 -->
<span class="wm" aria-hidden="true">兜爸</span>
<!-- 2026-11-01 用户：「我的孕期数据和上面那个工具结合在一起时，是一个模块……上面所有的工具，用户可以去选择放哪一个，放到什么位置上」
→ 「我的孕期数据」不再单独成块，和工具宫格合成一个模块「我的孕期工具」：
① 上面 2 列「数据卡」= 首页工具里排在最前的 4 个记录类工具（胎动 / 体重 / 血压 / 血糖 / 宫缩 / 估重），直接显示数据；
② 下面 4 列小图标宫格 = 其余工具 + 固定的「全部工具」出口。
右上角「编辑」打开 #htSheet 自选首页工具和顺序（app.js renderHomeTools / htEditor，存 localStorage mmbox.homeTools.v1）。
没自定义过 = 默认顺序 + 孕周没到换替补；自定义后以用户为准，没到孕周的显示「孕N周开放」、点了弹原提示。
数据卡没登录身份 / 产后时不出，全部按小图标排（同原来 #vitals 的显隐口径）。
同日二改（用户看过预览）：数据卡和编辑完全解耦 ——
① #vitals 数据卡：只看「用过哪个记录类工具」（胎动 / 体重 / 血压 / 血糖 / 宫缩 / 估重），有真实记录就出，最近记录的排前；
最多直接露 4 张，多的折叠在「展开全部 N 项数据」里；一条真实记录都没有时出 胎动 / 体重 / 血压 / 血糖 4 张示例数卡（不写「示例」）。
访客 / 产后不出。逻辑在 app.js renderVitals。
② #htGrid 图标宫格：完全由「编辑」决定显示哪些、什么顺序，最多 8 个（4×2），记录类工具也以图标出现，胶囊里放简短状态。
「全部工具」不占格子，挪到标题右侧「全部 ›」，与「编辑」并排。编辑弹层 #htSheet（app.js htEditor），存 localStorage mmbox.homeTools.v1。
没自定义过 = 默认 8 个 + 孕周没到换替补；自定义后以用户为准，没到孕周的显示「孕N周开放」、点了弹原提示。
各 id（#kickTodayHome / #weightVal / #calNext / #vtK…）和 data-mini / data-vt 照旧，接口回填、示例数、跳转都沿用。 -->
<div class="dock-head">
<h2 class="dock-title" id="dockTitle">我的孕期工具</h2>
<button class="ht-all" type="button" data-sheet="open">全部<span aria-hidden="true"> ›</span></button>
<button class="ht-edit" id="htEdit" type="button" aria-label="编辑首页工具"><svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/><path d="M13.5 6.5l4 4" stroke="currentColor" stroke-width="2.2"/></svg>编辑</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>
@@ -217,52 +219,47 @@
<span class="vt-top"><i class="vt-ic"><img src="/taidong/logo/logo-foot.svg" alt="" aria-hidden="true"></i><span class="vt-l">数胎动</span></span>
<span class="vt-v"><b id="vtK">--</b><small class="vt-u">次</small></span>
<span class="vt-f"><span class="vt-s" id="vtKs">去数一数 ›</span><span class="vt-d" id="vtKd"></span></span>
<span class="vt-lk"></span>
</button>
<button type="button" class="vt-it vt-w ripple" data-vt="weight" data-tool="yunqitizhong">
<span class="vt-top"><i class="vt-ic"><img src="/upload/picture/a6d7e61edee2ff0395cf00587a7c4036.svg" alt="" aria-hidden="true"></i><span class="vt-l">孕期体重</span></span>
<span class="vt-v"><b id="vtW">--</b><small class="vt-u">kg</small></span>
<span class="vt-f"><span class="vt-s" id="vtWs">去记一笔 ›</span><span class="vt-d" id="vtWd"></span></span>
<span class="vt-lk"></span>
</button>
<button type="button" class="vt-it vt-p ripple" data-vt="bp" data-tool="yun">
<span class="vt-top"><i class="vt-ic"><img src="/upload/picture/816227e3933211145bb8fc774ee32e82.svg" alt="" aria-hidden="true"></i><span class="vt-l">孕期血压</span></span>
<span class="vt-v"><b id="vtP">--</b><small class="vt-u">mmHg</small></span>
<span class="vt-f"><span class="vt-s" id="vtPs">去记一笔 ›</span><span class="vt-d" id="vtPd"></span></span>
<span class="vt-lk"></span>
</button>
<button type="button" class="vt-it vt-g ripple" data-vt="glu" data-tool="yunqixuetang">
<span class="vt-top"><i class="vt-ic"><img src="/upload/picture/fde3c920fae453f2642731e4135b88f5.png" alt="" aria-hidden="true"></i><span class="vt-l">孕期血糖</span></span>
<span class="vt-v"><b id="vtG">--</b><small class="vt-u">mmol/L</small></span>
<span class="vt-f"><span class="vt-s" id="vtGs">去记一笔 ›</span><span class="vt-d" id="vtGd"></span></span>
<span class="vt-lk"></span>
</button>
<button type="button" class="vt-it vt-c ripple hide" data-vt="curve" data-tool="gongsuopinlv">
<span class="vt-top"><i class="vt-ic"><img src="/upload/picture/1c02d720e4d23b09c996e859703b8b5e.svg" alt="" aria-hidden="true"></i><span class="vt-l">数宫缩</span></span>
<span class="vt-v"><b id="vtC">--</b><small class="vt-u"></small></span>
<span class="vt-f"><span class="vt-s" id="vtCs">去记一笔 ›</span><span class="vt-d" id="vtCd"></span></span>
<span class="vt-lk"></span>
</button>
<button type="button" class="vt-it vt-e ripple hide" data-vt="fweight" data-tool="taierguzhong">
<span class="vt-top"><i class="vt-ic"><img src="/upload/picture/715333a69fb67d8812ab093f342fa00f.png" alt="" aria-hidden="true"></i><span class="vt-l">胎儿估重</span></span>
<span class="vt-v"><b id="vtE">--</b><small class="vt-u"></small></span>
<span class="vt-f"><span class="vt-s" id="vtEs">去测算 ›</span><span class="vt-d" id="vtEd"></span></span>
<span class="vt-lk"></span>
</button>
<button type="button" class="vt-more hide" id="vtMore" aria-expanded="false"></button>
</div>
<!-- 图标：App 表里各应用的正式 logo（app.js applyToolLogos），「全部工具」没有应用 logo，保留渐变底白图形。
data-tool = App 表 identifier（排序 / 显隐按它认）；不是 data-mini 的普通应用格由 JS 按需生成（.tg-app）。 -->
<div class="tg-grid" id="htGrid">
<button class="tg kick ripple hide" data-mini="kick" data-tool="taidong">
<button class="tg kick ripple" data-mini="kick" data-tool="taidong">
<i class="tg-ic lg"><img src="/taidong/logo/logo-foot.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">数胎动</span>
<!-- 默认中性占位，不写演示数字（真实值由卡片接口写入） -->
<span class="tg-s">今天 <b id="kickTodayHome">--</b> 次</span>
</button>
<button class="tg weight ripple hide" data-mini="weight" data-tool="yunqitizhong">
<button class="tg weight ripple" data-mini="weight" data-tool="yunqitizhong">
<i class="tg-ic lg"><img src="/upload/picture/a6d7e61edee2ff0395cf00587a7c4036.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">孕期体重</span>
<span class="tg-s" id="weightVal">--</span>
<span class="tg-s" id="weightVal">记一笔</span>
</button>
<button class="tg cal ripple" data-mini="cal" data-tool="chanjianrili">
<i class="tg-ic lg"><img src="/chanjian-rili/logo/logo-7-dots.svg" alt="" aria-hidden="true"></i>
@@ -279,21 +276,16 @@
<span class="tg-n">数宫缩</span>
<span class="tg-s" data-wk="cn">—</span>
</button>
<button class="tg bp ripple hide" data-mini="bp" data-tool="yun">
<button class="tg bp ripple" data-mini="bp" data-tool="yun">
<i class="tg-ic lg"><img src="/upload/picture/816227e3933211145bb8fc774ee32e82.svg" alt="" aria-hidden="true"></i>
<span class="tg-n">孕期血压</span>
<span class="tg-s">量一量</span>
</button>
<button class="tg glu ripple hide" data-mini="glu" data-tool="yunqixuetang">
<button class="tg glu ripple" data-mini="glu" data-tool="yunqixuetang">
<i class="tg-ic lg"><img src="/upload/picture/fde3c920fae453f2642731e4135b88f5.png" alt="" aria-hidden="true"></i>
<span class="tg-n">孕期血糖</span>
<span class="tg-s">记一笔</span>
</button>
<button class="tg all ripple" data-sheet="open">
<i class="tg-ic"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="#fff" stroke-width="2.2"><rect x="4" y="4" width="6.5" height="6.5" rx="2"/><rect x="13.5" y="4" width="6.5" height="6.5" rx="2"/><rect x="4" y="13.5" width="6.5" height="6.5" rx="2"/><rect x="13.5" y="13.5" width="6.5" height="6.5" rx="2"/></svg></i>
<span class="tg-n">全部工具</span>
<span class="tg-s">更多</span>
</button>
</div>
<style>
/* —— 工具宫格（仿育儿首页） —— */
@@ -315,7 +307,6 @@
.tg.curve{--tg-bg:linear-gradient(150deg,#B39BEA,#8366CC);--tg-pl:#EFE8FC;--tg-tx:#6F50BC;--tg-sh:rgba(131,102,204,.28)}
.tg.bp{--tg-bg:linear-gradient(150deg,#F58FB0,#DC5584);--tg-pl:#FDE6EE;--tg-tx:#C93F70;--tg-sh:rgba(220,85,132,.28)}
.tg.glu{--tg-bg:linear-gradient(150deg,#6FD0C2,#2FA192);--tg-pl:#DFF5F1;--tg-tx:#22887B;--tg-sh:rgba(47,161,146,.28)}
.tg.all{--tg-bg:linear-gradient(150deg,#F2C17E,#E19A4C);--tg-pl:#FBEEDC;--tg-tx:#B9772D;--tg-sh:rgba(225,154,76,.28)}
.tg.is-warn .tg-s{background:#FDE3E0;color:#D2453B}
html.night .tg-n{color:#F1E6EE}
html.night .tg-s{background:rgba(255,255,255,.1);color:#E9D6E2}
@@ -323,7 +314,9 @@
.tg.hide,.vt-it.hide,.vt.hide{display:none}
.tg-n{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tg-app{--tg-pl:#F7EEE8;--tg-tx:#9A6450;--tg-bg:linear-gradient(150deg,#F2C17E,#E19A4C)}
.ht-edit{margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border:1px solid #F1D9CF;border-radius:99px;background:#FFF6F2;font:inherit;font-size:12.5px;font-weight:700;color:#D9573A}
.ht-all{margin-left:auto;flex:none;padding:4px 2px;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:#8E7773;white-space:nowrap}
.ht-all:active{opacity:.5}
.ht-edit{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border:1px solid #F1D9CF;border-radius:99px;background:#FFF6F2;font:inherit;font-size:12.5px;font-weight:700;color:#D9573A}
.ht-edit:active{opacity:.6}
.dock-head .dock-all{display:none}
/* 孕周没到（用户自己选了放在首页）：图标淡一点 + 右上角「孕N周开放」，点了弹原提示 */
@@ -357,11 +350,12 @@
.vt-s.lo{background:rgba(199,122,30,.14);color:#C77A1E}
.vt-d{font-size:11px;color:#6E5A57;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vt-d:empty{display:none}
.vt-lk{display:none}
.vt-it.is-locked:not([data-has="1"]) .vt-v,.vt-it.is-locked:not([data-has="1"]) .vt-f{display:none}
.vt-it.is-locked:not([data-has="1"]) .vt-lk{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#8E7773}
.vt-lk b{display:block;font-size:17px;font-weight:800;color:#9A8380}
.vt-it.is-locked .vt-ic{opacity:.55;filter:saturate(.6)}
/* 超过 4 项数据时的折叠开关（占满一行） */
.vt-more{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:4px;height:32px;margin-top:-1px;border:0;border-radius:12px;background:#FBF4F1;font:inherit;font-size:12.5px;font-weight:700;color:#9A6450}
.vt-more.hide{display:none}
.vt-more svg{width:12px;height:12px;transition:transform .2s}
.vt-more[aria-expanded="true"] svg{transform:rotate(180deg)}
html.night .vt-more{background:rgba(255,255,255,.07);color:#E2C2B5}
/* 每格一层很淡的同色底（2026-10-31 用户：稍微加一点点背景色） */
.vt-k{--vt-c:#E9673F;--vt-bg:#FFF5F0}
.vt-w{--vt-c:#E5606A;--vt-bg:#FFF4F4}
@@ -1879,7 +1873,7 @@
<!-- ================= 编辑首页工具（2026-11-01，app.js htEditor） =================
上半「首页显示的工具」：长按整行（或按住右侧把手）拖动排序，↑↓ 兜底，「−」移除；
下半「更多孕期工具」：App 表里 category=孕期工具 的已上架应用，点「＋」加入。上限 11 个 + 固定「全部工具」，下限 1 个。
下半「更多孕期工具」：App 表里 category=孕期工具 的已上架应用，点「＋」加入。上限 8 个（4×2），下限 1 个；「全部工具」在模块标题右侧，不占格子。
关闭（完成 / 叉 / 点遮罩）即保存到 localStorage mmbox.homeTools.v1，首页立即重排；「恢复默认」= 删掉这个键，回到默认顺序 + 孕周替补。 -->
<div class="scrim hts-scrim" id="htScrim"></div>
<section class="hts" id="htSheet" role="dialog" aria-modal="true" aria-labelledby="htsT" aria-hidden="true">
@@ -1887,7 +1881,7 @@
<div class="hts-head">
<div>
<h2 id="htsT">编辑首页工具</h2>
<p id="htsSub">长按拖动排序，排在前面的记录工具会直接显示数据</p>
<p id="htsSub">长按拖动排序，首页最多放 8 个</p>
</div>
<button class="sheet-close" id="htsX" type="button" aria-label="关闭"><svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
</div>
@@ -2322,7 +2316,7 @@
<!-- 2026-10-05 首页头图：宝宝时不时动一动小手小脚（独立文件，删掉这一行即下线） -->
<script src="js/baby-limbs.js?v=26101201"></script>
<script src="js/coach.js?v=26101211"></script>
<script src="js/birth-flow.js?v=26110101"></script>
<script src="js/birth-flow.js?v=26110102"></script>
<!-- 禁止下拉回弹（2026-10-11 统一规则，与孕期体重同一段）：竖向拖动时从手指下往上找还能朝该方向滚的容器，找不到才拦；横滑、双指、可滚列表不受影响 -->
<script>