SupplyAgent/visualization/pages/graph-structure-left-to-right.html

<style>
  .stage {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #dbe3ec;
    border-radius: 16px;
    background: #f8fafc;
    overflow-x: auto;
  }
  .notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
  }
  .note {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
  }
  .note strong { color: #0f172a; }
  .question {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
  }
  @media (max-width: 900px) {
    .notes { grid-template-columns: 1fr; }
  }
</style>

<h2>确认后的结构：从左到右阅读</h2>
<p class="subtitle">树提供稳定坐标，关系线表达交织，平台需求是最终可执行输出；同一需求汇聚多种正交证据，但业务实体只保留一条。</p>

<div class="stage">
  <svg viewBox="0 0 1160 500" width="100%" style="min-width:980px" role="img" aria-label="从左到右的树骨架关系图">
    <defs>
      <marker id="grayArrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="#94a3b8"/></marker>
      <marker id="redArrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="#ef4444"/></marker>
      <marker id="orangeArrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 z" fill="#f59e0b"/></marker>
    </defs>

    <g font-family="sans-serif">
      <text x="70" y="30" text-anchor="middle" font-size="12" fill="#64748b">稳定主题方向</text>
      <text x="330" y="30" text-anchor="middle" font-size="12" fill="#64748b">分类树骨架</text>
      <text x="625" y="30" text-anchor="middle" font-size="12" fill="#64748b">具体业务节点与关系</text>
      <text x="910" y="30" text-anchor="middle" font-size="12" fill="#64748b">平台需求输出</text>
      <text x="1082" y="30" text-anchor="middle" font-size="12" fill="#64748b">正交证据</text>
    </g>

    <!-- Main left-to-right flow -->
    <g fill="none" stroke="#94a3b8" stroke-width="2.2" marker-end="url(#grayArrow)">
      <path d="M142 244 C180 244 190 116 238 116"/>
      <path d="M142 244 C180 244 190 244 238 244"/>
      <path d="M142 244 C180 244 190 372 238 372"/>
      <path d="M402 116 L485 116"/>
      <path d="M402 244 L485 244"/>
      <path d="M402 372 L485 372"/>
    </g>

    <!-- Tree branches -->
    <g fill="none" stroke="#94a3b8" stroke-width="2">
      <path d="M570 116 L610 86 M570 116 L610 146"/>
      <path d="M570 244 L610 214 M570 244 L610 274"/>
      <path d="M570 372 L610 342 M570 372 L610 402"/>
    </g>

    <!-- Cross-tree semantic relationships -->
    <g fill="none" stroke="#ef4444" stroke-width="2.2" stroke-dasharray="7 5" marker-end="url(#redArrow)">
      <path d="M702 146 C735 158 730 203 702 214"/>
      <path d="M702 214 C755 230 755 327 702 342"/>
      <path d="M702 146 C790 178 793 320 702 342"/>
      <path d="M702 274 C746 292 746 382 702 402"/>
    </g>

    <!-- Nodes to demands -->
    <g fill="none" stroke="#f59e0b" stroke-width="2.4" marker-end="url(#orangeArrow)">
      <path d="M704 146 C770 146 779 142 822 142"/>
      <path d="M704 214 C762 205 782 168 822 154"/>
      <path d="M704 342 C775 317 778 181 822 163"/>
      <path d="M704 146 C772 190 778 293 822 315"/>
      <path d="M704 274 C770 278 780 310 822 326"/>
      <path d="M704 402 C765 390 779 350 822 338"/>
    </g>

    <!-- Evidence links -->
    <g fill="none" stroke="#8b5cf6" stroke-width="1.7" stroke-dasharray="4 4">
      <path d="M988 142 L1027 100"/><path d="M988 142 L1027 164"/><path d="M988 142 L1027 228"/>
      <path d="M988 326 L1027 292"/><path d="M988 326 L1027 356"/><path d="M988 326 L1027 420"/>
    </g>

    <!-- Stable direction -->
    <rect x="18" y="210" width="124" height="68" rx="16" fill="#1d4ed8"/>
    <text x="80" y="239" text-anchor="middle" font-family="sans-serif" font-size="15" fill="#fff">近现代历史人物</text>
    <text x="80" y="260" text-anchor="middle" font-family="sans-serif" font-size="15" fill="#fff">兴趣方向</text>

    <!-- Trees -->
    <g font-family="sans-serif" font-size="14" text-anchor="middle">
      <rect x="238" y="88" width="164" height="56" rx="14" fill="#dbeafe" stroke="#60a5fa"/><text x="320" y="121">全局树 · 人物分支</text>
      <rect x="238" y="216" width="164" height="56" rx="14" fill="#dcfce7" stroke="#4ade80"/><text x="320" y="249">全局树 · 事件分支</text>
      <rect x="238" y="344" width="164" height="56" rx="14" fill="#fae8ff" stroke="#d946ef"/><text x="320" y="377">全局树 · 表达分支</text>

      <rect x="485" y="91" width="85" height="50" rx="12" fill="#eff6ff" stroke="#60a5fa"/><text x="528" y="121">历史人物</text>
      <rect x="485" y="219" width="85" height="50" rx="12" fill="#f0fdf4" stroke="#4ade80"/><text x="528" y="249">人生事件</text>
      <rect x="485" y="347" width="85" height="50" rx="12" fill="#fdf4ff" stroke="#d946ef"/><text x="528" y="377">人物情感</text>
    </g>

    <!-- Concrete nodes -->
    <g font-family="sans-serif" font-size="13" text-anchor="middle">
      <rect x="610" y="66" width="94" height="40" rx="10" fill="#fff" stroke="#60a5fa"/><text x="657" y="91">毛泽东</text>
      <rect x="610" y="126" width="94" height="40" rx="10" fill="#fff" stroke="#60a5fa"/><text x="657" y="151">朱德</text>
      <rect x="610" y="194" width="94" height="40" rx="10" fill="#fff" stroke="#4ade80"/><text x="657" y="219">抗日战争</text>
      <rect x="610" y="254" width="94" height="40" rx="10" fill="#fff" stroke="#4ade80"/><text x="657" y="279">解放战争</text>
      <rect x="610" y="322" width="94" height="40" rx="10" fill="#fff" stroke="#d946ef"/><text x="657" y="347">家国情怀</text>
      <rect x="610" y="382" width="94" height="40" rx="10" fill="#fff" stroke="#d946ef"/><text x="657" y="407">诗词创作</text>
    </g>

    <!-- Demand nodes -->
    <g font-family="sans-serif" text-anchor="middle">
      <rect x="822" y="105" width="166" height="74" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
      <text x="905" y="130" font-size="13" fill="#9a3412">平台需求 001</text>
      <text x="905" y="150" font-size="14">毛泽东的</text>
      <text x="905" y="168" font-size="14">战争时期经历</text>

      <rect x="822" y="289" width="166" height="74" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
      <text x="905" y="314" font-size="13" fill="#9a3412">平台需求 002</text>
      <text x="905" y="334" font-size="14">毛泽东为何在战争中</text>
      <text x="905" y="352" font-size="14">持续进行诗词创作</text>
    </g>

    <!-- Evidence nodes -->
    <g font-family="sans-serif" font-size="11" text-anchor="middle">
      <rect x="1027" y="82" width="108" height="36" rx="18" fill="#ede9fe" stroke="#8b5cf6"/><text x="1081" y="104">外部热度</text>
      <rect x="1027" y="146" width="108" height="36" rx="18" fill="#ede9fe" stroke="#8b5cf6"/><text x="1081" y="168">平台近期缺口</text>
      <rect x="1027" y="210" width="108" height="36" rx="18" fill="#ede9fe" stroke="#8b5cf6"/><text x="1081" y="232">后验效果</text>
      <rect x="1027" y="274" width="108" height="36" rx="18" fill="#ede9fe" stroke="#8b5cf6"/><text x="1081" y="296">长期持续性</text>
      <rect x="1027" y="338" width="108" height="36" rx="18" fill="#ede9fe" stroke="#8b5cf6"/><text x="1081" y="360">去年同期</text>
      <rect x="1027" y="402" width="108" height="36" rx="18" fill="#ede9fe" stroke="#8b5cf6"/><text x="1081" y="424">真实 ROV/VOV</text>
    </g>

    <!-- Edge labels -->
    <g font-family="sans-serif" font-size="10" fill="#b91c1c">
      <text x="720" y="177">经历</text>
      <text x="739" y="279">引发</text>
      <text x="765" y="231">人物—事件—情感</text>
    </g>
  </svg>
</div>

<div class="notes">
  <div class="note"><strong>多挂靠：</strong>每条平台需求可以连接多个正式分类节点；统计去重需要时另设统计主归属。</div>
  <div class="note"><strong>关系线：</strong>同一需求可连接多个人物、事件、情感等节点；节点之间也保留“经历、引发、关联”等语义边。</div>
  <div class="note"><strong>证据合并：</strong>内外部、时间周期、供需缺口和后验结果不拆成重复需求，而是作为同一需求的独立证据。</div>
</div>

<div class="question">
  已确认：平台需求以多挂靠表达跨分支语义，人物、战争事件、诗词创作和家国表达可以共同参与定义需求。
</div>