微件:GFLMail

<script> (function () {

 // 防止重复绑定（MW 可能多次执行）
 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;

   // 先关掉所有其他 detail
   root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
     d.classList.remove('is-open');
   });

   var target = root.querySelector('#gflDetail-' + idx);
   if (!target) return;

   // grid 布局下两面板共占同一单元格，高度自动由内容决定，无需手动设置
   root.classList.add('view-detail');
   // 下一帧再加 is-open，确保浏览器先完成布局，transition 才能正常触发
   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');
 }

 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>