SupplyAgent/visualization/pages/graph-structure-options.html

<style>
  .diagram-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
  }
  .graph-card {
    border: 1px solid #dbe3ec;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: .18s ease;
  }
  .graph-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
  }
  .graph-card.selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
  }
  .graph-head {
    padding: 15px 16px 10px;
    border-bottom: 1px solid #eef2f7;
  }
  .graph-head h3 { margin: 0 0 5px; }
  .graph-head p { margin: 0; color: #64748b; font-size: 13px; }
  .canvas { padding: 12px; background: #f8fafc; }
  .graph-body { padding: 13px 16px 16px; }
  .graph-body ul { margin: 8px 0 0; padding-left: 18px; color: #475569; font-size: 13px; }
  .recommend {
    display: inline-block;
    margin-left: 7px;
    padding: 2px 7px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 11px;
    vertical-align: 2px;
  }
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
  }
  .dot { width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; }
  @media (max-width: 1000px) {
    .diagram-grid { grid-template-columns: 1fr; }
  }
</style>

<h2>平台需求应该怎样组织成“一张图”？</h2>
<p class="subtitle">以“对近现代历史人物感兴趣”为例。点击一个方案；重点比较树骨架、跨节点连线和最终需求的表达能力。</p>

<div class="diagram-grid">
  <div class="graph-card" data-choice="a-tree-only" onclick="toggleSelect(this)">
    <div class="graph-head">
      <h3>A. 单一大树</h3>
      <p>所有对象都强行放进一棵层级树</p>
    </div>
    <div class="canvas">
      <svg viewBox="0 0 320 300" width="100%" role="img" aria-label="单一大树方案">
        <g stroke="#94a3b8" stroke-width="2" fill="none">
          <path d="M160 38 L160 72 M160 72 L66 108 M160 72 L160 108 M160 72 L254 108"/>
          <path d="M66 136 L45 174 M66 136 L100 174"/>
          <path d="M160 136 L145 174 M160 136 L190 174"/>
          <path d="M254 136 L235 174 M254 136 L282 174"/>
          <path d="M45 202 L45 238 M145 202 L145 238 M235 202 L235 238"/>
        </g>
        <g font-family="sans-serif" font-size="12" text-anchor="middle">
          <rect x="110" y="10" width="100" height="30" rx="9" fill="#1d4ed8"/><text x="160" y="30" fill="white">毛泽东历史兴趣</text>
          <rect x="23" y="108" width="86" height="30" rx="8" fill="#dbeafe"/><text x="66" y="128">具体人物</text>
          <rect x="117" y="108" width="86" height="30" rx="8" fill="#dcfce7"/><text x="160" y="128">人物事件</text>
          <rect x="211" y="108" width="86" height="30" rx="8" fill="#fae8ff"/><text x="254" y="128">人物情感</text>
          <rect x="10" y="174" width="70" height="28" rx="8" fill="white" stroke="#60a5fa"/><text x="45" y="193">毛泽东</text>
          <rect x="82" y="174" width="70" height="28" rx="8" fill="white" stroke="#60a5fa"/><text x="117" y="193">朱德</text>
          <rect x="110" y="174" width="70" height="28" rx="8" fill="white" stroke="#4ade80"/><text x="145" y="193">抗日战争</text>
          <rect x="182" y="174" width="70" height="28" rx="8" fill="white" stroke="#4ade80"/><text x="217" y="193">解放战争</text>
          <rect x="200" y="174" width="70" height="28" rx="8" fill="white" stroke="#d946ef"/><text x="235" y="193">家国情怀</text>
          <rect x="272" y="174" width="42" height="28" rx="8" fill="white" stroke="#d946ef"/><text x="293" y="193">乐观</text>
          <rect x="9" y="238" width="72" height="34" rx="8" fill="#fff7ed" stroke="#fb923c"/><text x="45" y="252">毛泽东的</text><text x="45" y="266">战争经历</text>
          <rect x="102" y="238" width="86" height="34" rx="8" fill="#fff7ed" stroke="#fb923c"/><text x="145" y="252">抗战诗词的</text><text x="145" y="266">历史背景</text>
          <rect x="196" y="238" width="78" height="34" rx="8" fill="#fff7ed" stroke="#fb923c"/><text x="235" y="252">毛泽东为何</text><text x="235" y="266">坚持写诗</text>
        </g>
      </svg>
    </div>
    <div class="graph-body">
      <strong>优点：</strong>层级清楚，统计方便。
      <ul>
        <li>一个事件只能被迫选一个父节点</li>
        <li>“毛泽东—抗日战争—诗词创作”之间的真实联系会丢失</li>
      </ul>
    </div>
  </div>

  <div class="graph-card" data-choice="b-free-graph" onclick="toggleSelect(this)">
    <div class="graph-head">
      <h3>B. 完全自由图</h3>
      <p>人物、事件、情感和需求全部自由连接</p>
    </div>
    <div class="canvas">
      <svg viewBox="0 0 320 300" width="100%" role="img" aria-label="完全自由图方案">
        <defs>
          <marker id="arrowB" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 z" fill="#64748b"/></marker>
        </defs>
        <g stroke="#64748b" stroke-width="1.8" fill="none" marker-end="url(#arrowB)">
          <path d="M74 75 L148 74"/><path d="M171 90 L112 145"/><path d="M192 91 L241 142"/>
          <path d="M91 169 L57 222"/><path d="M128 172 L169 222"/><path d="M226 169 L182 223"/>
          <path d="M231 163 C286 174 289 230 244 245"/><path d="M68 58 C114 18 214 21 243 55"/>
          <path d="M83 75 C44 112 43 176 57 221"/>
        </g>
        <g font-family="sans-serif" font-size="12" text-anchor="middle">
          <circle cx="62" cy="68" r="35" fill="#dbeafe" stroke="#3b82f6"/><text x="62" y="72">毛泽东</text>
          <circle cx="177" cy="70" r="39" fill="#dcfce7" stroke="#22c55e"/><text x="177" y="67">抗日</text><text x="177" y="82">战争</text>
          <circle cx="255" cy="67" r="31" fill="#fae8ff" stroke="#d946ef"/><text x="255" y="71">家国</text>
          <circle cx="100" cy="160" r="35" fill="#fae8ff" stroke="#d946ef"/><text x="100" y="164">诗词创作</text>
          <circle cx="246" cy="158" r="37" fill="#dcfce7" stroke="#22c55e"/><text x="246" y="155">解放</text><text x="246" y="170">战争</text>
          <rect x="19" y="222" width="83" height="42" rx="10" fill="#fff7ed" stroke="#fb923c"/><text x="60" y="240">毛泽东的</text><text x="60" y="255">战争经历</text>
          <rect x="128" y="222" width="92" height="42" rx="10" fill="#fff7ed" stroke="#fb923c"/><text x="174" y="240">毛泽东为何</text><text x="174" y="255">坚持写诗</text>
          <rect x="230" y="230" width="77" height="36" rx="10" fill="#fff7ed" stroke="#fb923c"/><text x="268" y="245">解放战争与</text><text x="268" y="258">诗词主题</text>
        </g>
      </svg>
    </div>
    <div class="graph-body">
      <strong>优点：</strong>关系表达最自由。
      <ul>
        <li>缺少统一骨架，数百条需求容易变成“蜘蛛网”</li>
        <li>难以保证每条需求都有稳定归属和完整覆盖</li>
      </ul>
    </div>
  </div>

  <div class="graph-card" data-choice="c-tree-backed-graph" onclick="toggleSelect(this)">
    <div class="graph-head">
      <h3>C. 树骨架上的关系图 <span class="recommend">推荐</span></h3>
      <p>分类树负责归属；关系线负责交织；需求节点负责输出</p>
    </div>
    <div class="canvas">
      <svg viewBox="0 0 320 300" width="100%" role="img" aria-label="树骨架上的关系图方案">
        <defs>
          <marker id="arrowC" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0,0 L7,3.5 L0,7 z" fill="#ef4444"/></marker>
        </defs>
        <g stroke="#94a3b8" stroke-width="2" fill="none">
          <path d="M160 36 L160 66 M160 66 L58 101 M160 66 L160 101 M160 66 L262 101"/>
          <path d="M58 129 L40 166 M58 129 L91 166"/>
          <path d="M160 129 L144 166 M160 129 L193 166"/>
          <path d="M262 129 L241 166 M262 129 L291 166"/>
        </g>
        <g stroke="#ef4444" stroke-width="2" stroke-dasharray="5 4" fill="none" marker-end="url(#arrowC)">
          <path d="M92 180 C115 145 122 143 144 180"/>
          <path d="M167 180 C196 139 217 140 241 180"/>
          <path d="M91 192 C131 224 188 221 238 192"/>
        </g>
        <g stroke="#f59e0b" stroke-width="2.2" fill="none">
          <path d="M91 194 L91 237"/><path d="M145 194 L159 237"/><path d="M241 194 L211 237"/>
        </g>
        <g font-family="sans-serif" font-size="12" text-anchor="middle">
          <rect x="105" y="8" width="110" height="30" rx="9" fill="#1d4ed8"/><text x="160" y="28" fill="white">毛泽东历史主题</text>
          <rect x="17" y="101" width="82" height="30" rx="8" fill="#dbeafe"/><text x="58" y="121">人物分支</text>
          <rect x="119" y="101" width="82" height="30" rx="8" fill="#dcfce7"/><text x="160" y="121">事件分支</text>
          <rect x="221" y="101" width="82" height="30" rx="8" fill="#fae8ff"/><text x="262" y="121">表达分支</text>
          <rect x="9" y="166" width="62" height="28" rx="8" fill="white" stroke="#60a5fa"/><text x="40" y="185">毛泽东</text>
          <rect x="61" y="166" width="62" height="28" rx="8" fill="white" stroke="#60a5fa"/><text x="92" y="185">朱德</text>
          <rect x="112" y="166" width="66" height="28" rx="8" fill="white" stroke="#4ade80"/><text x="145" y="185">抗日战争</text>
          <rect x="180" y="166" width="66" height="28" rx="8" fill="white" stroke="#4ade80"/><text x="213" y="185">解放战争</text>
          <rect x="213" y="166" width="56" height="28" rx="8" fill="white" stroke="#d946ef"/><text x="241" y="185">写诗</text>
          <rect x="271" y="166" width="42" height="28" rx="8" fill="white" stroke="#d946ef"/><text x="292" y="185">家国</text>
          <rect x="43" y="237" width="96" height="44" rx="10" fill="#fff7ed" stroke="#f59e0b"/><text x="91" y="255">毛泽东的</text><text x="91" y="270">战争时期经历</text>
          <rect x="143" y="237" width="111" height="44" rx="10" fill="#fff7ed" stroke="#f59e0b"/><text x="198" y="255">毛泽东为何在战争中</text><text x="198" y="270">持续进行诗词创作</text>
        </g>
      </svg>
    </div>
    <div class="graph-body">
      <strong>核心：</strong>一个需求可以挂靠多个正式树节点，并连接人物、事件、表达和证据元素。
      <ul>
        <li>保留树的分层、覆盖与统计能力</li>
        <li>保留跨分支关系线，允许一条需求表达多个对象的组合</li>
      </ul>
    </div>
  </div>
</div>

<div class="legend">
  <span><i class="dot" style="background:#60a5fa"></i>人物节点</span>
  <span><i class="dot" style="background:#4ade80"></i>事件节点</span>
  <span><i class="dot" style="background:#d946ef"></i>情感节点</span>
  <span><i class="dot" style="background:#f59e0b"></i>平台需求节点</span>
  <span style="color:#ef4444">- - 红色虚线：跨分支语义关系</span>
  <span style="color:#64748b">灰色实线：树内父子关系</span>
</div>