移除Tailwind并实现原生折叠

可以直接删除 <script src="https://cdn.tailwindcss.com"></script>，但直接删除后，代码里依赖的 Tailwind 类名（如 bg-gray-50, border-l-4, p-4 等）将会失效，导致页面布局变乱。

为了彻底摆脱 Tailwind 的依赖，同时解决**“内容少时不显示按钮”、“按钮居中”以及“收起后平滑回到提问顶部”的需求，我为你重构了一套纯原生 HTML + CSS + JS 代码**。你可以直接完整复制以下代码进行替换，不需要引入任何外部 CSS 或 JS 文件。

完整替换代码

请将你原来的整个“提问模块”及相关 JS，整体替换为以下内容：

<!-- 1. 锚点定位标记 -->
<div id="question-top"></div>

<!-- 2. 提问模块容器 (使用纯原生 CSS 替代 Tailwind) -->
<div class="question-box">
  <div class="question-title">
    提问背景 Question:
  </div>
  
  <!-- 内容包裹层，用来控制最大高度和截断 -->
  <div id="content-outer" class="content-outer">
    <div id="content-body" class="msg-content" style="white-space: pre-wrap;">
      {{.Article.Question}}
    </div>
  </div>
  
  <!-- 3. 按钮容器：默认隐藏，只有当内容超长时才通过 JS 显示 -->
  <div id="btn-container" class="btn-container" style="display: none;">
    <button id="toggle-btn" onclick="toggleContent()" class="toggle-btn">展开全文</button>
  </div>
</div>

<!-- 4. 纯原生样式表 (写在 <style> 标签中，或放入你的 CSS 文件中) -->
<style>
  /* 提问框外壳 */
  .question-box {
    background-color: #f9fafb; /* 对应 bg-gray-50 */
    border-left: 4px solid #3b82f6; /* 对应 border-l-4 border-blue-500 */
    padding: 16px; /* 对应 p-4 */
    border-radius: 0 8px 8px 0; /* 对应 rounded-r-lg */
    margin-bottom: 24px; /* 对应 mb-6 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  /* 标题样式 */
  .question-title {
    font-size: 12px; /* text-xs */
    font-weight: bold; /* font-bold */
    color: #2563eb; /* text-blue-600 */
    text-transform: uppercase; /* uppercase */
    letter-spacing: 0.05em; /* tracking-wider */
    margin-bottom: 8px; 
  }

  /* 内容裁剪外壳 */
  .content-outer {
    max-height: 150px; /* 默认折叠状态的最大高度 */
    overflow: hidden;
    transition: max-height 0.3s ease; /* 平滑过渡效果 */
  }

  /* 内容文本样式 */
  .msg-content {
    color: #374151; /* text-gray-700 */
    font-size: 15px;
    line-height: 1.6;
  }

  /* 按钮容器：居中对齐 */
  .btn-container {
    text-align: center;
    margin-top: 12px;
    border-top: 1px dashed #e5e7eb; /* 加一条虚线显得更精致 */
    padding-top: 12px;
  }

  /* 展开/收起按钮 */
  .toggle-btn {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 6px 20px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .toggle-btn:hover {
    background-color: #dbeafe;
    color: #1e40af;
  }
</style>

<!-- 5. 核心逻辑 JS -->
<script>
  // 在页面加载完成后，自动判断内容高度
  document.addEventListener("DOMContentLoaded", function () {
    const outer = document.getElementById('content-outer');
    const body = document.getElementById('content-body');
    const btnContainer = document.getElementById('btn-container');
    const maxCollapsedHeight = 150; // 设定的折叠阈值高度（单位：像素）

    // 如果文本实际高度大于限制高度，说明内容较多，显示“展开”按钮并实行裁剪
    if (body.scrollHeight > maxCollapsedHeight) {
      btnContainer.style.display = 'block'; 
      outer.style.maxHeight = maxCollapsedHeight + 'px';
    } else {
      // 内容很少，不需要折叠，直接完整展示，不显示按钮
      outer.style.maxHeight = 'none';
    }
  });

  // 点击切换状态
  function toggleContent() {
    const anchor = document.getElementById('question-top');
    const outer = document.getElementById('content-outer');
    const body = document.getElementById('content-body');
    const btn = document.getElementById('toggle-btn');
    const maxCollapsedHeight = 150;

    // 判断当前是否已经是展开状态
    if (outer.style.maxHeight === 'none' || parseInt(outer.style.maxHeight) > maxCollapsedHeight) {
      // 执行【收起】操作
      outer.style.maxHeight = maxCollapsedHeight + 'px';
      btn.textContent = '展开全文';
      
      // 回滚到顶部锚点
      anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
    } else {
      // 执行【展开】操作
      outer.style.maxHeight = body.scrollHeight + 'px';
      btn.textContent = '收起全文';
    }
  }
</script>

改进说明：

移除 Tailwind 依赖：去掉了所有的 Tailwind 类名，全部使用原生 CSS 重写，删除 <script src="https://cdn.tailwindcss.com"></script> 后样式完全不会变乱。
智能显隐按钮：在 JS 中通过监听 DOMContentLoaded 事件，对比 scrollHeight（内容实际高度）和设定高度。当内容少于阈值（150px）时，自动隐藏按钮，不破坏原有排版。
按钮居中与美化：增加了居中的 .btn-container 样式，按钮设计为胶囊状圆角，配合虚线分割，十分美观醒目。
平滑回弹到顶部：收起时会精准触发 anchor.scrollIntoView 定位，画面平滑上滚，解决视觉丢失的问题。