悄悄话：弹窗只留「被赞 3 次变星星」；星星铺开 6 列；抽屉按方向吸附更跟手、按钮一带上划也能拉开

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-07 03:13:55 +00:00
parent 679cf7f368
commit abacdfb3c2
4 changed files with 29 additions and 18 deletions
--- a/index.html
+++ b/index.html
@@ -9,10 +9,10 @@
 <title>兜爸心选 · 孕育陪伴</title>
 <!-- 11-04 UGC 总开关（孕妈广场 + 测一测，后台 /box_bm/plaza 顶部切换），见 js/ugc.js -->
 <script src="js/ugc.js?v=26110487"></script>
-<!-- V:26110621 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26110622 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <link rel="stylesheet" href="night.css?v=26110608">
-<link rel="stylesheet" href="js/wh-cm.css?v=26110621">
+<link rel="stylesheet" href="js/wh-cm.css?v=26110622">
 <!-- 11-04 用户：「顶部图片上的倒计时先删除掉」→ 不加载 hero-cd.css / hero-cd.js（文件留着，加回这两行即恢复），头图回到原样式 -->
 <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
 <script>try{if(localStorage.getItem('mmbox.night.v1')==='1'){document.documentElement.classList.add('night');document.querySelector('meta[name=theme-color]').content='#2A2340'}}catch(e){}</script>
@@ -2680,7 +2680,7 @@ html.night .rs-pan .rp-card{background:rgba(255,255,255,.06);border-color:rgba(2
 <script src="guangchang/topics.js?v=26110487"></script>
 <script src="js/ava-pool.js?v=26110487"></script>   <!-- 11-05 装饰头像分配表（各模块互不重复） -->
 <script src="js/wh-themes.js?v=26110609"></script>
-<script src="js/wh-cm.js?v=26110621" defer></script>
+<script src="js/wh-cm.js?v=26110622" defer></script>
 <script src="js/app.js"></script>
 <script src="js/kit.js?v=26110605"></script>
 <!-- 11-05 用户：孕期百问加上跟趣味小测试一样的底部 Tab（孕期百问 / 记一下 / 返回首页）。挂在 #detailQA 里，面板关着时跟着滑出屏外；
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26110621';
+  var VER = '26110622';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

@@ -4520,9 +4520,11 @@
    }
    /* 亮星落在夜空中上部偏右（流星往左下走，右边起步才划得够长）；抖动网格，不会叠在一起 */
    function paintSky(l) {
-      const n = l.length, cols = n > 16 ? 5 : 4, rows = Math.max(2, Math.ceil(n / cols));
+      /* 11-07 用户：可以点的星星再多一些 → 超过 26 颗时铺开到 6 列、更宽更高的一片，点得到不挤 */
+      const n = l.length, big = n > 26, cols = big ? 6 : n > 16 ? 5 : 4, rows = Math.max(2, Math.ceil(n / cols));
+      const X0 = big ? 16 : 36, XW = big ? 78 : 58, Y0 = big ? 30 : 21, YH = big ? 38 : 38;   // 铺开时从话题牌下面开始，不压标题
      const fresh = l.findIndex(x => !x.mine && !seen.has(x.id));
-      const xs = l.map((it, i) => 36 + ((i % cols + .5 + ((hsh(it.id) % 100) / 100 - .5) * .7) / cols) * 58);
+      const xs = l.map((it, i) => X0 + ((i % cols + .5 + ((hsh(it.id) % 100) / 100 - .5) * .7) / cols) * XW);
      /* 十三改（用户：「每点一下都是一个音符，每一个星星代表不同的音符」）：
         按横向位置从左到右排成一架竖琴——越靠左越低、越靠右越高，五声音阶（C4 起），连着点就是一段旋律 */
      const rank = xs.map((x, i) => i).sort((p, q) => xs[p] - xs[q]);
@@ -4531,7 +4533,7 @@
      $('#wskBright').innerHTML = l.map((it, i) => {
        const h = hsh(it.id), r = Math.floor(i / cols);
        const x = xs[i];
-        const y = 21 + ((r + .5 + (((h >> 8) % 100) / 100 - .5) * .6) / rows) * 38;
+        const y = Y0 + ((r + .5 + (((h >> 8) % 100) / 100 - .5) * .6) / rows) * YH;
        const sz = it.mine ? 26 : Math.round(15 + Math.min(it.hugs || 0, 30) / 30 * 11);
        return '<button type="button" class="wsk-st' + (it.mine ? ' mine' : '') + (seen.has(it.id) ? ' used' : '') + (i === fresh && !seen.size ? ' hint' : '') +
          '" data-go="' + (i + 1) + '" data-note="' + note[i].toFixed(1) + '" style="left:' + x.toFixed(1) + '%;top:' + y.toFixed(1) + '%;--s:' + sz + 'px;--tw:' + (2 + (h % 30) / 10).toFixed(1) + 's" aria-label="' + esc(it.text) + '"><i></i></button>';
--- a/js/wh-cm.css
+++ b/js/wh-cm.css
@@ -139,12 +139,11 @@ p.wcm-mf{display:block;color:#FFC07A}
 #modalWhisper.wh-star .wh-m-topic{margin-top:6px;color:#FFC9A0}
 #modalWhisper.wh-star .wh-m-topic span{color:rgba(232,222,255,.55)}
 #modalWhisper.wh-star .wh-m-lead{display:flex;gap:6px;margin-top:12px}
-.wms{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 8px;border-radius:14px;font-size:11.5px;line-height:1.35;text-align:center;
-  color:rgba(232,222,255,.75);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
-.wms i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;color:#2A1F48;background:rgba(232,222,255,.7)}
-.wms.hi{color:#FFF3E2;font-weight:700;background:linear-gradient(150deg,rgba(255,200,150,.3),rgba(150,110,255,.28));box-shadow:inset 0 0 0 1px rgba(255,214,170,.45),0 0 18px rgba(255,200,150,.2)}
-.wms.hi i{background:#FFD9A0;box-shadow:0 0 10px #FFD9A0}
-.wms.hi b{font-size:15px;color:#FFD08A}
+.wms{flex:1;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;text-align:left}
+.wms.hi{font-size:16px;font-weight:800;line-height:1.45;color:#FFF3E2;
+  background:linear-gradient(120deg,rgba(255,200,150,.32),rgba(150,110,255,.3));box-shadow:inset 0 0 0 1.5px rgba(255,214,170,.55),0 0 26px rgba(255,200,150,.25)}
+.wms.hi svg{flex:none;width:38px;height:38px;fill:#FFE2B0;filter:drop-shadow(0 0 6px #FFD9A0) drop-shadow(0 0 16px rgba(255,200,140,.7));animation:wstTw 2.2s ease-in-out infinite}
+.wms.hi b{font-size:24px;color:#FFD08A;margin:0 2px;text-shadow:0 0 12px rgba(255,200,140,.6)}
 #modalWhisper.wh-star .wh-ta{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff}
 #modalWhisper.wh-star .wh-ta::placeholder{color:rgba(232,222,255,.4)}
 #modalWhisper.wh-star .wh-ta:focus{border-color:rgba(255,214,170,.6);box-shadow:0 0 0 3px rgba(255,214,170,.12)}
--- a/js/wh-cm.js
+++ b/js/wh-cm.js
@@ -337,12 +337,21 @@
    if (!d0) return;
    var dd = d0; d0 = null;
    if (!dd.drag) return;
+    /* 11-07 用户：「滑了一下又缩回去，要很大力气才上得去」→ 按方向判断：往上动过 24px（或甩一下）就往上一档，
+       拖过半屏再往上就直接拉满；往下同理；只有几像素的小抖动才回原位 */
    var dy = e.changedTouches[0].clientY - dd.y, h = dd.base - dy, v = dy / Math.max(1, Date.now() - dd.t);
-    if (v > .6 || h < ph() * .32) snap('closed');
-    else if (v < -.4 || h > ph() * .64) snap('full');
-    else snap('half');
+    if (dy < -24 || v < -.25) snap(state === 'full' || h > hFor('half') + 40 ? 'full' : 'half');
+    else if (dy > 24 || v > .25) snap(state === 'closed' || h < hFor('half') - 40 ? 'closed' : 'half');
+    else snap(state);
  });

+  /* 在「说一句」按钮一带往上划，也能把抽屉拉上来 */
+  var by = null;
+  page.addEventListener('touchstart', function (e) {
+    by = state === 'closed' && !P.contains(e.target) && e.touches[0].clientY > page.getBoundingClientRect().bottom - 170 ? e.touches[0].clientY : null;
+  }, { passive: true });
+  page.addEventListener('touchmove', function (e) { if (by != null && by - e.touches[0].clientY > 30) { by = null; open(); } }, { passive: true });
+
  /* app.js 先画了「今天还能说 N 句」（那时本脚本还没加载）—— 说一句现在发进留言区，不再按每天 3 句算，换成留言规则 */
  function fixLeft() {
    var el = document.getElementById('whpLeft');
@@ -364,8 +373,9 @@
    if (!M) return;
    M.classList.add('wh-star');
    var ld = document.getElementById('whMLead');
-    ld.innerHTML = '<span class="wms"><i>1</i><span>写下想对<br>宝宝说的话</span></span><span class="wms"><i>2</i><span>审核通过<br>大家都看得到</span></span>' +
-      '<span class="wms hi"><i>3</i><span>被赞 <b>' + STAR_N + '</b> 次<br>变成一颗星星</span></span>';
+    /* 11-07 用户：只留「被赞 3 次变成星星」，明显一点 */
+    ld.innerHTML = '<span class="wms hi"><svg viewBox="0 0 20 20"><path d="M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z"/></svg>' +
+      '<span>被赞 <b>' + STAR_N + '</b> 次，<br>你的话就变成一颗星星</span></span>';
    var lf = document.getElementById('whLeft'); if (lf) lf.textContent = '审核通过后，可以转给朋友帮你点赞';
  }
  if (M && !M.querySelector('.wms-sky')) M.insertAdjacentHTML('afterbegin', '<i class="wms-sky" aria-hidden="true"></i>');