孕妈广场：分类滑块改文字标签+荧光笔胶囊（去图标）、左右滑切分类；话题页去奖励横幅和话题胶囊，返回先回广场

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-02 10:14:21 +00:00
parent d6f1be67fd
commit 48a9793f8d
4 changed files with 64 additions and 21 deletions
--- a/demo/gch/v4.js
+++ b/demo/gch/v4.js
@@ -187,5 +187,5 @@
 }
  /* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
  if (window.GC_FEED) init();
-  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110211'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
+  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110212'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
 })();
--- a/guangchang/index.html
+++ b/guangchang/index.html
@@ -40,14 +40,20 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 .nav h1 span{background:linear-gradient(transparent 60%,#FFD0DC 60%,#FFD0DC 92%,transparent 92%);padding:0 3px}
 .nav .sp{width:36px}

-/* ---------- 一级分类：分段按钮（11-01 第三版：用户说「经验 / 家庭不够明显、有点乱」→ 一条底槽三段，选中段实底） ---------- */
-.cats{display:flex;gap:4px;margin:2px 12px 10px;padding:4px;border-radius:16px;background:#F0E4DE}
-.cats button{flex:1;min-width:0;height:38px;display:flex;align-items:center;justify-content:center;gap:3px;border-radius:12px;
-  font-size:14.5px;font-weight:800;color:#8A7570;letter-spacing:.3px;transition:background .18s,color .18s,box-shadow .18s}
-.cats button .ic{width:15px;height:15px;color:var(--cf)}
-.cats button.on{background:var(--cf);color:#fff;box-shadow:0 6px 14px -6px var(--cf)}
-.cats button.on .ic{color:#fff}
-.cats button:active{transform:scale(.97)}
+/* ---------- 一级分类（11-02 第四版：用户「去掉图标、滑块缺设计感」→ 小红书式文字标签：选中字放大加粗 + 底下一条会滑动的分类色胶囊；左右滑页面也能切） ---------- */
+.cats{position:relative;display:flex;gap:8px;margin:0 6px;padding:2px 0 10px}
+.cats button{position:relative;z-index:1;flex:none;padding:6px 12px 4px;font-size:15.5px;font-weight:700;color:#A08B85;letter-spacing:.3px;line-height:24px;transition:color .25s}
+.cats button .ic{display:none}
+.cats button.on{font-size:18px;font-weight:900;color:#2A1E1E}
+.cats button i{position:absolute;left:calc(100% - 12px);top:2px;font-style:normal;font-size:10px;font-weight:800;line-height:12px;color:var(--cf);opacity:0;transition:opacity .25s}
+.cats button.on i{opacity:1}
+.cats .bar{position:absolute;z-index:0;left:0;bottom:12px;height:7px;width:28px;border-radius:7px;background:var(--cbar,#F4593C);opacity:.32;
+  transition:transform .32s cubic-bezier(.3,1.3,.5,1),width .32s cubic-bezier(.3,1.3,.5,1),background .25s;pointer-events:none}
+.cats::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#EADAD3 20%,#EADAD3 80%,transparent)}
+.cats button:active{transform:scale(.96)}
+.wf.swl{animation:swl .32s ease-out}.wf.swr{animation:swr .32s ease-out}
+@keyframes swl{from{opacity:.2;transform:translateX(36px)}to{opacity:1;transform:none}}
+@keyframes swr{from{opacity:.2;transform:translateX(-36px)}to{opacity:1;transform:none}}
 .cats .c-all{--cf:#F4593C}
 /* 四块分类色（11-01 第四版：按用户选题清单分 家庭 / 婚姻 / 职场 / 母婴）：kf 实色 · kt 深字 · kl/kl2 浅底两色 */
 .k-family,.c-family{--kf:#E0566F;--kt:#C23A55;--kl:#FFF0F3;--kl2:#FFD9E0}
@@ -450,9 +456,9 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 <div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
 <div class="toast" id="toast"></div>

-<script src="topics.js?v=26110211"></script>
-<script src="data.js?v=26110211"></script>
-<script src="feed.js?v=26110211"></script>
+<script src="topics.js?v=26110212"></script>
+<script src="data.js?v=26110212"></script>
+<script src="feed.js?v=26110212"></script>
 <script>
 (function () {
  'use strict';
@@ -589,11 +595,26 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  /* 投稿奖励（11-01 用户定）：话题投稿被选中 → 30 元现金 + 500 兜豆 */
  var REWARD = '<em>¥30</em> 现金 + <em>500</em> 兜豆';
  function renderCats() {
+    var bs = $('#cats').querySelectorAll('button[data-c]');
+    if (bs.length) {   /* 已画过：只换选中态，胶囊才能滑过去 */
+      [].forEach.call(bs, function (b) { var on = b.dataset.c === catF; b.classList.toggle('on', on); b.setAttribute('aria-selected', on); });
+      moveBar(); return;
+    }
    $('#cats').innerHTML = CATS.map(function (x) {
      return '<button type="button" role="tab" data-c="' + x[0] + '" class="c-' + (x[0] || 'all') + (catF === x[0] ? ' on' : '') + '" aria-selected="' + (catF === x[0]) + '">' +
-        '<svg class="ic"><use href="#' + x[2] + '"/></svg>' + x[1] + '</button>';
-    }).join('');
+        x[1] + '<i>' + catCnt(x[0]) + '</i></button>';
+    }).join('') + '<span class="bar"></span>';
+    moveBar();
  }
+  function catCnt(c) { return NOTES.filter(function (n) { return !c || TBY[n.t].cat === c; }).length; }
+  /* 胶囊挪到选中标签文字下方，宽度跟文字走（取文字宽的一半，偏小红书） */
+  function moveBar() {
+    var on = $('#cats .on'), bar = $('#cats .bar'); if (!on || !bar) return;
+    var w = on.offsetWidth - 20, x = on.offsetLeft + (on.offsetWidth - w) / 2;
+    bar.style.width = w + 'px'; bar.style.transform = 'translateX(' + x + 'px)';
+    bar.style.background = getComputedStyle(on).getPropertyValue('--cf');
+  }
+  window.addEventListener('resize', moveBar);
  function rewardHTML(sm) {
    return '<button type="button" class="rw' + (sm ? ' sm' : '') + '" data-rule="1"><span class="gf"><svg class="ic"><use href="#i-gift"/></svg></span>' +
      '<span class="rt"><small>参与话题投稿 · 被选中奖励</small><b>' + REWARD + '</b></span><span class="go">怎么参与<svg class="ic" style="width:12px;height:12px"><use href="#i-right"/></svg></span></button>';
@@ -629,8 +650,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
    el.innerHTML = '<div class="th k-' + t.cat + '"><i class="wm" aria-hidden="true">' + esc(t.g) + '</i><button type="button" class="x" data-t="" aria-label="看全部"><svg class="ic"><use href="#i-x"/></svg></button>' +
      '<div class="bc"><button type="button" data-t="">' + kbHTML(t.cat).replace('</span>', ' ›</span>') + '</button><span>话题 · ' + cntT(t.id) + ' 篇</span></div>' +
      '<h2><em>#</em>' + esc(t.name) + '<em>#</em></h2><p>' + esc(d.desc || '') + '</p>' +
-      '<div class="tf"><button type="button" class="join" data-join="' + t.id + '"><svg class="ic"><use href="#i-plus"/></svg>参与话题</button><button type="button" class="sw" data-all="1">换个话题</button></div></div>' + rewardHTML(true);
-    fhLevels(fh);
+      '<div class="tf"><button type="button" class="join" data-join="' + t.id + '"><svg class="ic"><use href="#i-plus"/></svg>参与话题</button><button type="button" class="sw" data-all="1">换个话题</button></div></div>';
+    /* 11-02 用户：「话题页比较乱」→ 去掉投稿奖励横幅和同分类话题胶囊，只留一行标题 */
+    fh.className = 'sh';
+    fh.innerHTML = '<h2>这个话题下的分享</h2><small>共 ' + cntT(t.id) + ' 篇</small>';
  }
  /* 11-02 用户：「选了家庭婚姻下一个话题，看着像这块就这几篇，层次感没出来」→ 选了分类 / 话题时，列表上方固定一行「分类 · N 个话题 · 共 M 篇」+ 该分类全部话题胶囊（带篇数），当前话题高亮，「全部」回分类 */
  var cntT = function (id) { return NOTES.filter(function (n) { return n.t === id; }).length; };
@@ -691,6 +714,24 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
    catF = b.dataset.c; haptic();
    selectTopic('');   /* 换分类回到该类「全部」，避免停在别类话题上 */
  });
+  /* 11-02 用户：「广场首页左右滑动，可以切到家庭婚姻、职场、经验」→ 横向滑动超过 60px 且明显比竖向大，就切到相邻分类；横滑列表、弹层里不触发 */
+  (function () {
+    var sx = 0, sy = 0, ok = false, sc = $('#sc');
+    sc.addEventListener('touchstart', function (e) {
+      var t = e.touches[0]; sx = t.clientX; sy = t.clientY;
+      ok = e.touches.length === 1 && !e.target.closest('.tcs,.hot,.htl .jn,#sheet,#note,.nd') && !document.body.classList.contains('lock');
+    }, { passive: true });
+    sc.addEventListener('touchend', function (e) {
+      if (!ok) return; ok = false;
+      var t = e.changedTouches[0], dx = t.clientX - sx, dy = t.clientY - sy;
+      if (Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.6) return;
+      var order = CATS.map(function (c) { return c[0]; }), i = order.indexOf(catF) + (dx < 0 ? 1 : -1);
+      if (i < 0 || i >= order.length) return;
+      catF = order[i]; haptic();
+      var wf = $('#wf'); wf.classList.remove('swl', 'swr'); void wf.offsetWidth; wf.classList.add(dx < 0 ? 'swl' : 'swr');
+      selectTopic('');
+    }, { passive: true });
+  })();
  $('#fh').addEventListener('click', function (e) {
    var b = e.target.closest('[data-t]'); if (!b || b.dataset.t === cur) return;
    haptic(); var sl = $('#fh .tcs') ? $('#fh .tcs').scrollLeft : 0;
@@ -1081,6 +1122,8 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
    return '../' + (s ? '?' + s : '') + location.hash;
  }
  $('#back').addEventListener('click', function () {
+    /* 11-02 用户：「从首页点热门话题进来，左上角返回要回孕妈广场，不是首页」→ 在话题里先退回广场「全部」，再按一次才回首页 */
+    if (cur) { haptic(); catF = ''; selectTopic(''); return; }
    var fromHome = false;
    try { fromHome = !!document.referrer && new URL(document.referrer).origin === location.origin; } catch (e) {}
    if (fromHome && history.length > 1) {
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26110211 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26110212 缓存版本标记：改 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） -->
@@ -2498,7 +2498,7 @@
 <script src="/_bridge/avatar-picker.js?v=26101105"></script>
 <script src="/_bridge/hand-icons.js?v=26101202"></script>
 <script src="js/zodiac-art.js"></script>
-<script src="guangchang/topics.js?v=26110211"></script>
+<script src="guangchang/topics.js?v=26110212"></script>
 <script src="js/app.js"></script>
 <script>
 /* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
@@ -2506,7 +2506,7 @@
 (function () {
  var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
  if (!m) window.__gcDefault = 1;
-  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110211';
+  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110212';
  l.rel = 'stylesheet'; l.href = 'demo/gch/v' + n + '.css?' + q;
  s.src = 'demo/gch/v' + n + '.js?' + q;
  if (m) s.onload = function () { setTimeout(function () { var el = document.getElementById('gcHome'); if (el) el.scrollIntoView({ block: 'center' }); }, 900); };
@@ -2514,7 +2514,7 @@
  /* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；⚠️ 上正式前和 V6 一起并进正式代码，别依赖 demo/ */
  if (!/[?&]brand=0/.test(location.search)) {
    var bl = document.createElement('link'), bs = document.createElement('script');
-    bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110211'; bs.src = 'demo/brand/brand.js?v=26110211';
+    bl.rel = 'stylesheet'; bl.href = 'demo/brand/brand.css?v=26110212'; bs.src = 'demo/brand/brand.js?v=26110212';
    document.head.appendChild(bl); document.body.appendChild(bs);
  }
 })();
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26110211';
+  var VER = '26110212';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));