微件:GFLMail

<script>document.querySelectorAll('.gfl-item').forEach(item => {

 item.addEventListener('click', () => {
   const idx = item.getAttribute('data-gfl-index');
   const root = item.closest('.gfl-mail');
   if (!root) return;

   root.querySelectorAll('.gfl-detail').forEach(d => d.classList.remove('is-open'));

   const targetDetail = root.querySelector(`#gflDetail-${idx}`);
   if (!targetDetail) return;

   targetDetail.style.visibility = 'hidden';
   targetDetail.style.opacity = '0';
   targetDetail.style.transform = 'translateX(30px)';
   targetDetail.classList.add('is-open');
   
   targetDetail.offsetHeight;
   
   const bodyEl = targetDetail.querySelector('.gfl-detail-body');
   const contentHeight = bodyEl ? bodyEl.scrollHeight : targetDetail.scrollHeight;
   const headerHeight = targetDetail.querySelector('.gfl-detail-header').offsetHeight;
   const totalHeight = contentHeight + headerHeight + 40; // 40px 是 padding 等
   
   const minHeight = 400;
   const finalHeight = Math.max(totalHeight, minHeight);
   
   root.style.height = finalHeight + 'px';
   
   targetDetail.style.visibility = ;
   targetDetail.style.opacity = ;
   targetDetail.style.transform = ;
   
   root.classList.add('view-detail');
 });

});

document.querySelectorAll('.gfl-back-btn').forEach(btn => {

 btn.addEventListener('click', () => {
   const root = btn.closest('.gfl-mail');
   if (!root) return;

   root.classList.remove('view-detail');
   root.querySelectorAll('.gfl-detail').forEach(d => d.classList.remove('is-open'));

   root.style.height = ;
 });

}); </script>