SupplyAgent/visualization/pages/final-output-structure.html

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

<h2>设计第 4 部分：最终输出物</h2>
<p class="subtitle">同一份结果提供两种入口：从主题树看全局结构，从需求清单看具体执行；二者指向同一批需求实体，不维护两套数据。</p>

<div class="stage">
<svg viewBox="0 0 1160 600" width="100%" style="min-width:980px" role="img" aria-label="最终主题与需求输出结构">
  <defs>
    <marker id="g" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#94a3b8"/></marker>
    <marker id="o" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#f59e0b"/></marker>
    <marker id="r" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#ef4444"/></marker>
  </defs>

  <g font-family="sans-serif">
    <text x="132" y="30" text-anchor="middle" font-size="13" fill="#64748b">主题方向层：几十个</text>
    <text x="415" y="30" text-anchor="middle" font-size="13" fill="#64748b">意图分层与对象关系</text>
    <text x="760" y="30" text-anchor="middle" font-size="13" fill="#64748b">平台需求层：数百条</text>
    <text x="1040" y="30" text-anchor="middle" font-size="13" fill="#64748b">需求证据卡</text>
  </g>

  <!-- main connections -->
  <g fill="none" stroke="#94a3b8" stroke-width="2.3" marker-end="url(#g)">
    <path d="M220 142 L300 111"/><path d="M220 142 L300 206"/>
    <path d="M220 332 L300 317"/><path d="M220 332 L300 412"/>
  </g>
  <g fill="none" stroke="#f59e0b" stroke-width="2.4" marker-end="url(#o)">
    <path d="M533 111 C590 111 600 106 646 106"/>
    <path d="M533 206 C590 206 600 204 646 204"/>
    <path d="M533 317 C590 317 600 319 646 319"/>
    <path d="M533 412 C590 412 600 420 646 420"/>
  </g>
  <g fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="6 4" marker-end="url(#r)">
    <path d="M452 127 C542 150 557 189 646 202"/>
    <path d="M452 333 C550 360 560 402 646 416"/>
    <path d="M452 222 C565 257 571 296 646 315"/>
  </g>
  <g fill="none" stroke="#8b5cf6" stroke-width="2">
    <path d="M874 106 L940 106"/><path d="M874 204 L940 204"/><path d="M874 319 L940 319"/><path d="M874 420 L940 420"/>
  </g>

  <!-- Theme nodes -->
  <g font-family="sans-serif" text-anchor="middle">
    <rect x="25" y="86" width="195" height="112" rx="17" fill="#1d4ed8"/>
    <text x="122" y="116" font-size="12" fill="#bfdbfe">主题 T-01</text>
    <text x="122" y="143" font-size="17" fill="#fff">毛泽东的历史经历</text>
    <text x="122" y="169" font-size="11" fill="#dbeafe">需求 46 条 · 已验证 18 条</text>
    <text x="122" y="186" font-size="11" fill="#dbeafe">数据强度高 · 集中度正常</text>

    <rect x="25" y="276" width="195" height="112" rx="17" fill="#4338ca"/>
    <text x="122" y="306" font-size="12" fill="#c7d2fe">主题 T-02</text>
    <text x="122" y="333" font-size="17" fill="#fff">毛泽东的诗词表达</text>
    <text x="122" y="359" font-size="11" fill="#e0e7ff">需求 31 条 · 新机会 8 条</text>
    <text x="122" y="376" font-size="11" fill="#e0e7ff">保留探索位 3 条</text>
  </g>

  <!-- Intent and object groups -->
  <g font-family="sans-serif" text-anchor="middle">
    <rect x="300" y="72" width="153" height="78" rx="14" fill="#dbeafe" stroke="#60a5fa"/>
    <text x="376" y="99" font-size="13" fill="#1d4ed8">意图节点</text>
    <text x="376" y="124" font-size="15">战争经历</text>
    <rect x="300" y="167" width="153" height="78" rx="14" fill="#dbeafe" stroke="#60a5fa"/>
    <text x="376" y="194" font-size="13" fill="#1d4ed8">意图节点</text>
    <text x="376" y="219" font-size="15">历史背景</text>
    <rect x="300" y="278" width="153" height="78" rx="14" fill="#dbeafe" stroke="#60a5fa"/>
    <text x="376" y="305" font-size="13" fill="#1d4ed8">意图节点</text>
    <text x="376" y="330" font-size="15">作品解读</text>
    <rect x="300" y="373" width="153" height="78" rx="14" fill="#dbeafe" stroke="#60a5fa"/>
    <text x="376" y="400" font-size="13" fill="#1d4ed8">意图节点</text>
    <text x="376" y="425" font-size="15">创作动机</text>

    <circle cx="500" cy="111" r="33" fill="#fff" stroke="#3b82f6"/><text x="500" y="116" font-size="13">毛泽东</text>
    <circle cx="500" cy="206" r="33" fill="#fff" stroke="#22c55e"/><text x="500" y="211" font-size="12">抗日战争</text>
    <circle cx="500" cy="317" r="33" fill="#fff" stroke="#d946ef"/><text x="500" y="322" font-size="13">解放战争</text>
    <circle cx="500" cy="412" r="33" fill="#fff" stroke="#d946ef"/><text x="500" y="417" font-size="13">诗词创作</text>
  </g>

  <!-- Demand cards -->
  <g font-family="sans-serif">
    <rect x="646" y="66" width="228" height="80" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="663" y="89" font-size="11" fill="#9a3412">D-001 · 已验证需求 · 强度 88</text>
    <text x="663" y="113" font-size="14" fill="#0f172a">毛泽东的战争时期经历</text>
    <text x="663" y="133" font-size="11" fill="#64748b">多挂靠：战争经历、历史背景｜对象：毛泽东</text>

    <rect x="646" y="164" width="228" height="80" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="663" y="187" font-size="11" fill="#9a3412">D-002 · 增长需求 · 强度 81</text>
    <text x="663" y="211" font-size="14" fill="#0f172a">抗日战争如何影响毛泽东创作</text>
    <text x="663" y="231" font-size="11" fill="#64748b">多挂靠：抗日战争、作品表达、诗词创作</text>

    <rect x="646" y="279" width="228" height="80" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="663" y="302" font-size="11" fill="#9a3412">D-003 · 新机会 · 强度 69</text>
    <text x="663" y="326" font-size="14" fill="#0f172a">战争诗词如何表达历史判断</text>
    <text x="663" y="346" font-size="11" fill="#64748b">多挂靠：作品解读、家国表达｜线上样本不足</text>

    <rect x="646" y="380" width="228" height="80" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="663" y="403" font-size="11" fill="#9a3412">D-004 · 待验证 · 强度 66</text>
    <text x="663" y="427" font-size="14" fill="#0f172a">毛泽东为何在战争时期持续写诗</text>
    <text x="663" y="447" font-size="11" fill="#64748b">多挂靠：创作动机、战争经历｜已安排内容承接</text>
  </g>

  <!-- Evidence cards -->
  <g font-family="sans-serif">
    <rect x="940" y="57" width="195" height="98" rx="14" fill="#fff" stroke="#8b5cf6"/>
    <text x="957" y="80" font-size="12" fill="#6d28d9">证据摘要</text>
    <text x="957" y="101" font-size="11" fill="#334155">先验 76 · 后验 91</text>
    <text x="957" y="119" font-size="11" fill="#334155">关系增益 4 · 风险 2</text>
    <text x="957" y="137" font-size="10" fill="#64748b">关联内容 23 条 · 3 个周期验证</text>

    <rect x="940" y="155" width="195" height="98" rx="14" fill="#fff" stroke="#8b5cf6"/>
    <text x="957" y="178" font-size="12" fill="#6d28d9">证据摘要</text>
    <text x="957" y="199" font-size="11" fill="#334155">外部热度高 · 近期缺口中</text>
    <text x="957" y="217" font-size="11" fill="#334155">真实 VOV 连续上升</text>
    <text x="957" y="235" font-size="10" fill="#64748b">原始关联 8 条 · 推断关系 2 条</text>

    <rect x="940" y="270" width="195" height="98" rx="14" fill="#fff" stroke="#8b5cf6"/>
    <text x="957" y="293" font-size="12" fill="#6d28d9">证据摘要</text>
    <text x="957" y="314" font-size="11" fill="#334155">先验 72 · 后验暂无</text>
    <text x="957" y="332" font-size="11" fill="#334155">探索位：是</text>
    <text x="957" y="350" font-size="10" fill="#64748b">禁止将“无后验”视为负反馈</text>

    <rect x="940" y="371" width="195" height="98" rx="14" fill="#fff" stroke="#8b5cf6"/>
    <text x="957" y="394" font-size="12" fill="#6d28d9">内容承接状态</text>
    <text x="957" y="415" font-size="11" fill="#334155">待生产 5 条 · 已上线 2 条</text>
    <text x="957" y="433" font-size="11" fill="#334155">有效样本尚未形成</text>
    <text x="957" y="451" font-size="10" fill="#64748b">下一周期继续观察</text>
  </g>

  <!-- relation explanation -->
  <g font-family="sans-serif">
    <rect x="270" y="500" width="620" height="58" rx="12" fill="#fff" stroke="#e2e8f0"/>
    <text x="580" y="522" text-anchor="middle" font-size="12" fill="#334155">树内父子关系决定层级与覆盖；需求多挂靠表达跨分支语义；红色虚线展示节点交织。</text>
    <text x="580" y="542" text-anchor="middle" font-size="12" fill="#64748b">点击任一需求，应能追溯上游信号、对象关系、关联内容、线上表现及历次强度变化。</text>
  </g>
</svg>
</div>

<div class="fields">
  <div class="field"><strong>主题方向包含：</strong>主题名称、覆盖意图、需求数量、状态分布、整体强度、数据来源构成、集中度与趋势。</div>
  <div class="field"><strong>平台需求包含：</strong>唯一名称、多个挂靠节点、关联对象、原始关系、推断关系、生命周期、当前强度和解释。</div>
  <div class="field"><strong>证据卡包含：</strong>各正交先验维度、线上验证、样本量、关联内容、关系增益、风险项和更新时间。</div>
  <div class="field"><strong>可追溯链路：</strong>需求必须能回看来源数据、为何合并、挂树理由、内容承接、线上表现和强度变化历史。</div>
</div>

<div class="decision">
  请确认最终结果采用“同一数据、两个入口”：既可沿主题树和关系图浏览，也可按排序后的需求清单直接用于业务执行。
</div>