feat: expand linux course to ops-wide textbook-style outline

index.html

@@ -262,6 +262,22 @@
           <ul id="scenarioList"></ul>
         </div>
 
+        <div class="panel">
+          <h3>教材视角</h3>
+          <p id="classicView"></p>
+        </div>
+
+        <div class="panel">
+          <h3>相关命令</h3>
+          <div class="badge-row" id="relatedCommands"></div>
+        </div>
+
+        <div class="panel">
+          <h3>课后总结</h3>
+          <ul id="takeawayList"></ul>
+          <p id="afterClass" style="margin-top: 12px; color: var(--text-3);"></p>
+        </div>
+
         <div class="panel">
           <h3>本课练习</h3>
           <div class="exercise-list" id="exerciseList"></div>
@@ -364,6 +380,10 @@
       renderList('conceptList', lesson.concepts || []);
       renderList('pitfallList', lesson.pitfalls || []);
       renderList('scenarioList', lesson.scenarios || []);
+      renderList('takeawayList', lesson.takeaways || []);
+      document.getElementById('classicView').textContent = lesson.classic_view || '教材视角：先理解问题，再选择命令。';
+      document.getElementById('afterClass').textContent = lesson.after_class || '';
+      document.getElementById('relatedCommands').innerHTML = (lesson.related_commands || []).map(cmd => `<span class="badge">${escapeHtml(cmd)}</span>`).join('');
       document.getElementById('exampleList').innerHTML = (lesson.examples || []).map(ex => `<div class="code-block">${escapeHtml(ex)}</div>`).join('');
       document.getElementById('exerciseList').innerHTML = (lesson.exercises || []).map(ex => renderExercise(ex)).join('');
       document.getElementById('asideHint').textContent = (lesson.pitfalls || [])[0] || '这一课没有额外提示。';