chore: save current workspace progress

.superpowers/brainstorm/1923-1785734653/content/interaction-layout.html

@@ -0,0 +1,69 @@
+<h2>选择算法诊断页的交互结构</h2>
+<p class="subtitle">三种方案都能展示“正常功能 → 当前问题 → 原因 → 后果 → 纠正方案 → 预期结果”。请重点比较：第一眼是否容易理解，以及点击后能否逐层深入。</p>
+
+<div class="cards">
+  <div class="card" data-choice="b-layered-diagnostic" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div class="label">B · 推荐：双层算法地图</div>
+      <div class="mock-nav">算法基线　｜　问题叠加　｜　修正预演　　[当前：问题叠加]</div>
+      <div style="padding:14px;display:grid;gap:12px;background:#f7faf9">
+        <div style="display:flex;align-items:center;gap:7px;justify-content:center;flex-wrap:wrap">
+          <span style="padding:8px 11px;border:1px solid #83b6ad;border-radius:7px;background:white">输入路径</span><b>→</b>
+          <span style="padding:8px 11px;border:2px solid #c8463a;border-radius:7px;background:#fff1ef">曲率计算 ⚠</span><b>→</b>
+          <span style="padding:8px 11px;border:1px solid #83b6ad;border-radius:7px;background:white">平滑约束</span><b>→</b>
+          <span style="padding:8px 11px;border:1px solid #83b6ad;border-radius:7px;background:white">输出轨迹</span>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px">
+          <div style="padding:9px;border-top:3px solid #c8463a;background:white"><b>原因</b><br><small>边界导数不连续</small></div>
+          <div style="padding:9px;border-top:3px solid #d18a26;background:white"><b>影响传播</b><br><small>曲率峰值 → 控制抖动</small></div>
+          <div style="padding:9px;border-top:3px solid #23856d;background:white"><b>纠正预演</b><br><small>新约束 → 预期稳定</small></div>
+        </div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>基线流程 + 故障/修正叠加层</h3>
+      <p>先固定展示算法正常机制；点击问题后在同一流程上高亮故障节点、原因和影响，再切换到修正方案预演。上下文不丢失，最适合函数与算法诊断。</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="a-linear-story" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div class="label">A · 线性故事链</div>
+      <div style="padding:14px;display:grid;gap:7px;background:#faf8f4">
+        <div style="padding:8px;border-left:4px solid #427f9d;background:white"><b>1. 原算法功能</b>　输入如何变成输出</div>
+        <div style="text-align:center">↓ 点击继续</div>
+        <div style="padding:8px;border-left:4px solid #c8463a;background:white"><b>2. 当前问题</b>　异常发生在哪里</div>
+        <div style="text-align:center">↓</div>
+        <div style="padding:8px;border-left:4px solid #d18a26;background:white"><b>3. 原因与后果</b>　为什么错、会导致什么</div>
+        <div style="text-align:center">↓</div>
+        <div style="padding:8px;border-left:4px solid #23856d;background:white"><b>4. 纠正与预期</b>　改什么、预计变成什么</div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>从上到下的诊断故事</h3>
+      <p>阅读顺序最直观，适合汇报展示；但算法复杂或问题较多时页面会变长，比较多个问题时容易失去原流程位置。</p>
+    </div>
+  </div>
+
+  <div class="card" data-choice="c-explorer-dashboard" onclick="toggleSelect(this)">
+    <div class="card-image">
+      <div class="label">C · 自由探索工作台</div>
+      <div style="display:grid;grid-template-columns:110px 1fr 145px;min-height:190px;background:#f7f8fb">
+        <div class="mock-sidebar">函数列表<br><br>calculate()<br><br>smooth()<br><br>validate()</div>
+        <div style="padding:12px">
+          <div class="placeholder" style="height:110px">可缩放算法关系图<br>节点可自由点击</div>
+          <div style="display:flex;gap:6px;margin-top:8px"><button class="mock-button">问题</button><button class="mock-button">方案</button><button class="mock-button">前后对比</button></div>
+        </div>
+        <div style="padding:10px;background:white;border-left:1px solid #ddd"><b>节点详情</b><hr><small>输入<br>源码位置<br>问题<br>根因<br>影响<br>验证</small></div>
+      </div>
+    </div>
+    <div class="card-body">
+      <h3>图谱式诊断工作台</h3>
+      <p>探索能力最强，适合大型算法和多个函数；但实现与维护成本最高，日报第一次打开时也更容易让读者迷失。</p>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <p><strong>我的建议：</strong>选择 B。它保留原算法作为稳定“地图”，问题和解决方案都是同一张地图上的可切换叠加层，最符合你强调的“点击就能理解目前状况和修正后结果”。</p>
+</div>