长文本折叠交互优化指南

为了解决折叠按钮不显眼、位置不居中以及收起后视口跳动的问题，请参考以下实现方案：

1. 样式布局调整 (CSS)

使用 flex 布局确保按钮居中，并为内容容器设置过渡效果：

.msg-content { max-height: 300px; overflow: hidden; transition: max-height 0.3s ease; position: relative; }
.msg-content.expanded { max-height: none; }
.toggle-btn { display: flex; justify-content: center; padding: 8px; cursor: pointer; color: #007bff; border-top: 1px solid #eee; }

2. 交互位置修正 (JS)

使用 scrollIntoView 确保点击收起时，容器顶部能够回到视口可视区域，防止页面跳跃导致丢失方向感：

function toggleMessage(btn, container) {
    const isExpanded = container.classList.toggle('expanded');
    btn.innerText = isExpanded ? '收起内容' : '展开全文';
    
    if (!isExpanded) {
        // 收起时，强制将容器顶部滚动到视口中
        container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

优化要点总结：

1. 视觉反馈：给按钮添加 :hover 伪类效果，或使用明显的图标（如箭头向上/向下），提高辨识度。
2. 位置锁定：在 container.classList.toggle 之后立即执行 scrollIntoView，这能完美解决你提到的“不知道自己在页面哪”的痛点。
3. 防抖建议：如果内容包含大量图片，建议在图片加载完成后重新计算 max-height，防止内容被遮挡一半。