查看“︁Widget:GFLMail”︁的源代码

<script>
(function () {
  if (window._gflMailInit) return;
  window._gflMailInit = true;

  function openDetail(item) {
    var idx  = item.getAttribute('data-gfl-index');
    var root = item.closest('.gfl-mail');
    if (!root) return;

    // 先撑开外壳到固定高度，再做过渡
    var fixedH = getComputedStyle(root).getPropertyValue('--gfl-height').trim() || '480px';
    // 先把当前自然高度设为起点，避免从0跳变
    root.style.height = root.offsetHeight + 'px';
    // 强制重排后过渡到目标高度
    root.offsetHeight;
    root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
    root.style.height = fixedH;

    root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
      d.classList.remove('is-open');
    });
    var target = root.querySelector('#gflDetail-' + idx);
    if (!target) return;

    root.classList.add('view-detail');
    requestAnimationFrame(function () {
      target.classList.add('is-open');
    });
  }

function closeDetail(btn) {
  var root = btn.closest('.gfl-mail');
  if (!root) return;

  root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
    d.classList.remove('is-open');
  });
  root.classList.remove('view-detail');

  // 过渡回列表自然高度
  var list = root.querySelector('.gfl-list');
  // 列表隐藏时 visibility:hidden 但仍占布局，scrollHeight 可读
  var listH = list.scrollHeight;
  root.style.transition = 'height .3s cubic-bezier(.4,0,.2,1)';
  root.style.height = listH + 'px';

  root.addEventListener('transitionend', function onEnd(e) {
    if (e.propertyName !== 'height') return;
    root.removeEventListener('transitionend', onEnd);
    root.style.height = '';
    root.style.transition = '';
  });
}

  document.querySelectorAll('.gfl-item').forEach(function (item) {
    item.addEventListener('click', function () { openDetail(item); });
    item.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(item); }
    });
  });

  document.querySelectorAll('.gfl-back-btn').forEach(function (btn) {
    btn.addEventListener('click', function () { closeDetail(btn); });
    btn.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); closeDetail(btn); }
    });
  });
})();
</script>