NextEdu/.superpowers/brainstorm/41500-1782168322.9344/content/layout-options.html

<h2>备课模块布局方案对比</h2>
<p class="subtitle">3 种布局方案 — 课文固定中央，教学节点围绕组织</p>

<div class="cards" data-multiselect>
  <!-- 方案 A -->
  <div class="card" data-choice="a" onclick="toggleSelect(this)">
    <div class="card-image" style="padding:12px;background:#f8fafc;">
      <div style="font-family:monospace;font-size:11px;line-height:1.4;">
        <div style="border:1px solid #cbd5e1;background:#e2e8f0;padding:4px 8px;border-radius:4px 4px 0 0;display:flex;justify-content:space-between;">
          <span>📖 秋天（第一课时）</span>
          <span>💾 已保存</span>
        </div>
        <div style="display:grid;grid-template-columns:200px 1fr 200px;gap:4px;padding:8px;background:#fff;border:1px solid #cbd5e1;border-top:none;border-radius:0 0 4px 4px;min-height:280px;">
          <!-- 左侧：课前 -->
          <div style="display:flex;flex-direction:column;gap:4px;">
            <div style="font-size:9px;color:#64748b;text-align:center;">课前</div>
            <div style="background:#dbeafe;border:1px solid #3b82f6;padding:4px;border-radius:3px;font-size:10px;">🎯 教学目标</div>
            <div style="background:#fef3c7;border:1px solid #f59e0b;padding:4px;border-radius:3px;font-size:10px;">⭐ 重难点</div>
            <div style="background:#e0f2fe;border:1px solid #0ea5e9;padding:4px;border-radius:3px;font-size:10px;">💡 导入</div>
            <div style="background:#fce7f3;border:1px solid #ec4899;padding:4px;border-radius:3px;font-size:10px;">📝 文本研习</div>
          </div>
          <!-- 中央：课文 -->
          <div style="background:#fffbeb;border:2px solid #f59e0b;padding:8px;border-radius:4px;display:flex;flex-direction:column;">
            <div style="font-size:10px;color:#92400e;font-weight:bold;margin-bottom:4px;">📜 课文正文</div>
            <div style="font-size:9px;color:#78350f;line-height:1.5;flex:1;">
              天气凉了，树叶黄了，<br>
              一片片叶子从树上落下来。<br>
              <span style="background:#fef08a;">天空那么蓝，那么高</span>。<br>
              一群大雁往南飞，<br>
              一会儿排成个"人"字，<br>
              一会儿排成个"一"字。<br>
              <span style="background:#bbf7d0;">啊！秋天来了！</span>
            </div>
            <div style="font-size:8px;color:#92400e;margin-top:4px;">💡 选中文字可添加批注</div>
          </div>
          <!-- 右侧：课中/课后 -->
          <div style="display:flex;flex-direction:column;gap:4px;">
            <div style="font-size:9px;color:#64748b;text-align:center;">课中</div>
            <div style="background:#dcfce7;border:1px solid #22c55e;padding:4px;border-radius:3px;font-size:10px;">📚 新授</div>
            <div style="background:#ede9fe;border:1px solid #8b5cf6;padding:4px;border-radius:3px;font-size:10px;">✏️ 练习</div>
            <div style="background:#fee2e2;border:1px solid #ef4444;padding:4px;border-radius:3px;font-size:10px;">📌 小结</div>
            <div style="font-size:9px;color:#64748b;text-align:center;margin-top:4px;">课后</div>
            <div style="background:#f3e8ff;border:1px solid #a855f7;padding:4px;border-radius:3px;font-size:10px;">🏠 作业</div>
            <div style="background:#e0e7ff;border:1px solid #6366f1;padding:4px;border-radius:3px;font-size:10px;">📋 板书设计</div>
            <div style="background:#f1f5f9;border:1px solid #64748b;padding:4px;border-radius:3px;font-size:10px;">💭 教学反思</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>A. 三栏布局（课前/课文/课后）</h3>
      <p>课文固定中央（琥珀色边框），左侧"课前"节点（目标/重难点/导入/文本研习），右侧"课中+课后"节点（新授/练习/小结/作业/板书/反思）。节点按教学流程纵向排列。点击节点在右侧抽屉编辑。</p>
    </div>
  </div>

  <!-- 方案 B -->
  <div class="card" data-choice="b" onclick="toggleSelect(this)">
    <div class="card-image" style="padding:12px;background:#f8fafc;">
      <div style="font-family:monospace;font-size:11px;line-height:1.4;">
        <div style="border:1px solid #cbd5e1;background:#e2e8f0;padding:4px 8px;border-radius:4px 4px 0 0;display:flex;justify-content:space-between;">
          <span>📖 秋天（第一课时）</span>
          <span>💾 已保存</span>
        </div>
        <div style="padding:8px;background:#fff;border:1px solid #cbd5e1;border-top:none;border-radius:0 0 4px 4px;min-height:280px;">
          <!-- 顶部：目标/重难点 -->
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px;">
            <div style="background:#dbeafe;border:1px solid #3b82f6;padding:4px;border-radius:3px;font-size:10px;text-align:center;">🎯 教学目标</div>
            <div style="background:#fef3c7;border:1px solid #f59e0b;padding:4px;border-radius:3px;font-size:10px;text-align:center;">⭐ 重难点</div>
          </div>
          <!-- 中央：课文 + 左右两侧节点 -->
          <div style="display:grid;grid-template-columns:120px 1fr 120px;gap:4px;margin-bottom:4px;">
            <div style="display:flex;flex-direction:column;gap:4px;">
              <div style="background:#e0f2fe;border:1px solid #0ea5e9;padding:4px;border-radius:3px;font-size:9px;text-align:center;">💡 导入</div>
              <div style="background:#fce7f3;border:1px solid #ec4899;padding:4px;border-radius:3px;font-size:9px;text-align:center;">📝 文本研习</div>
            </div>
            <div style="background:#fffbeb;border:2px solid #f59e0b;padding:8px;border-radius:4px;text-align:center;">
              <div style="font-size:10px;color:#92400e;font-weight:bold;">📜 课文正文</div>
              <div style="font-size:9px;color:#78350f;margin-top:4px;">天气凉了，树叶黄了...<br>天空那么蓝...<br>一群大雁往南飞...</div>
            </div>
            <div style="display:flex;flex-direction:column;gap:4px;">
              <div style="background:#dcfce7;border:1px solid #22c55e;padding:4px;border-radius:3px;font-size:9px;text-align:center;">📚 新授</div>
              <div style="background:#ede9fe;border:1px solid #8b5cf6;padding:4px;border-radius:3px;font-size:9px;text-align:center;">✏️ 练习</div>
            </div>
          </div>
          <!-- 底部：小结/作业/板书/反思 -->
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;">
            <div style="background:#fee2e2;border:1px solid #ef4444;padding:4px;border-radius:3px;font-size:9px;text-align:center;">📌 小结</div>
            <div style="background:#f3e8ff;border:1px solid #a855f7;padding:4px;border-radius:3px;font-size:9px;text-align:center;">🏠 作业</div>
            <div style="background:#e0e7ff;border:1px solid #6366f1;padding:4px;border-radius:3px;font-size:9px;text-align:center;">📋 板书</div>
            <div style="background:#f1f5f9;border:1px solid #64748b;padding:4px;border-radius:3px;font-size:9px;text-align:center;">💭 反思</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>B. 上下分区布局</h3>
      <p>顶部目标/重难点横排，中央课文 + 左右导入/文本研习/新授/练习，底部小结/作业/板书/反思横排。按"目标→导入→课文→新授→小结"的阅读顺序自然流动。视觉层次更清晰。</p>
    </div>
  </div>

  <!-- 方案 C -->
  <div class="card" data-choice="c" onclick="toggleSelect(this)">
    <div class="card-image" style="padding:12px;background:#f8fafc;">
      <div style="font-family:monospace;font-size:11px;line-height:1.4;">
        <div style="border:1px solid #cbd5e1;background:#e2e8f0;padding:4px 8px;border-radius:4px 4px 0 0;display:flex;justify-content:space-between;">
          <span>📖 秋天（第一课时）</span>
          <span>💾 已保存</span>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;background:#fff;border:1px solid #cbd5e1;border-top:none;border-radius:0 0 4px 4px;min-height:280px;">
          <!-- 左侧：课文 -->
          <div style="display:flex;flex-direction:column;gap:4px;">
            <div style="background:#fffbeb;border:2px solid #f59e0b;padding:8px;border-radius:4px;flex:1;">
              <div style="font-size:10px;color:#92400e;font-weight:bold;">📜 课文正文</div>
              <div style="font-size:9px;color:#78350f;margin-top:4px;line-height:1.5;">
                天气凉了，树叶黄了，<br>
                一片片叶子从树上落下来。<br>
                <span style="background:#fef08a;">天空那么蓝，那么高</span>。<br>
                一群大雁往南飞...
              </div>
            </div>
            <div style="background:#fce7f3;border:1px solid #ec4899;padding:4px;border-radius:3px;font-size:10px;text-align:center;">📝 文本研习（批注）</div>
          </div>
          <!-- 右侧：教学流程时间线 -->
          <div style="display:flex;flex-direction:column;gap:3px;">
            <div style="font-size:9px;color:#64748b;text-align:center;">教学流程</div>
            <div style="background:#dbeafe;border:1px solid #3b82f6;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#3b82f6;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">1</span>
              🎯 教学目标
            </div>
            <div style="background:#fef3c7;border:1px solid #f59e0b;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#f59e0b;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">2</span>
              ⭐ 重难点
            </div>
            <div style="background:#e0f2fe;border:1px solid #0ea5e9;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#0ea5e9;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">3</span>
              💡 导入
            </div>
            <div style="background:#dcfce7;border:1px solid #22c55e;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#22c55e;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">4</span>
              📚 新授
            </div>
            <div style="background:#ede9fe;border:1px solid #8b5cf6;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#8b5cf6;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">5</span>
              ✏️ 练习
            </div>
            <div style="background:#fee2e2;border:1px solid #ef4444;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#ef4444;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">6</span>
              📌 小结
            </div>
            <div style="background:#f3e8ff;border:1px solid #a855f7;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#a855f7;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">7</span>
              🏠 作业
            </div>
            <div style="background:#e0e7ff;border:1px solid #6366f1;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#6366f1;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">8</span>
              📋 板书
            </div>
            <div style="background:#f1f5f9;border:1px solid #64748b;padding:3px 6px;border-radius:3px;font-size:9px;display:flex;align-items:center;gap:4px;">
              <span style="background:#64748b;color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;font-size:8px;">9</span>
              💭 反思
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>C. 左课文 + 右时间线</h3>
      <p>左侧课文正文（固定）+ 文本研习批注，右侧教学流程时间线（编号 1-9 按顺序）。点击时间线节点展开编辑抽屉。最贴近传统教案本格式，结构清晰。</p>
    </div>
  </div>
</div>

<div class="section" style="margin-top:24px;">
  <h3>三种方案的核心差异</h3>
  <div class="pros-cons">
    <div class="pros">
      <h4>方案 A 三栏</h4>
      <ul>
        <li>课文始终居中可见</li>
        <li>课前/课后分区直观</li>
        <li>节点可拖动微调位置</li>
      </ul>
    </div>
    <div class="cons">
      <h4>方案 A 三栏</h4>
      <ul>
        <li>三栏可能拥挤（小屏）</li>
        <li>教学流程顺序不够明显</li>
      </ul>
    </div>
  </div>
  <div class="pros-cons">
    <div class="pros">
      <h4>方案 B 上下分区</h4>
      <ul>
        <li>视觉层次最清晰</li>
        <li>阅读顺序自然（上→下）</li>
        <li>课文居中突出</li>
      </ul>
    </div>
    <div class="cons">
      <h4>方案 B 上下分区</h4>
      <ul>
        <li>节点位置较固定</li>
        <li>纵向空间需求大</li>
      </ul>
    </div>
  </div>
  <div class="pros-cons">
    <div class="pros">
      <h4>方案 C 左课文+右时间线</h4>
      <ul>
        <li>最接近传统教案</li>
        <li>教学流程顺序最明确</li>
        <li>课文阅读体验最佳</li>
      </ul>
    </div>
    <div class="cons">
      <h4>方案 C 左课文+右时间线</h4>
      <ul>
        <li>节点画布感弱（更像列表）</li>
        <li>失去节点图连线能力</li>
      </ul>
    </div>
  </div>
</div>