SupplyAgent/visualization/pages/business-graph-model.html

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

<h2>设计第 1 部分：业务图的节点与边</h2>
<p class="subtitle">分类树负责“用户意图”的稳定分层；对象图负责具体人物、事件、情感等交织关系；平台需求是连接二者并承载证据的业务实体。</p>

<div class="stage">
<svg viewBox="0 0 1160 570" width="100%" style="min-width:980px" role="img" aria-label="业务图节点与边模型">
  <defs>
    <marker id="a1" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#64748b"/></marker>
    <marker id="a2" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#ef4444"/></marker>
    <marker id="a3" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#8b5cf6"/></marker>
  </defs>

  <g font-family="sans-serif">
    <text x="145" y="32" text-anchor="middle" font-size="13" fill="#64748b">① 用户意图树：正式骨架</text>
    <text x="475" y="32" text-anchor="middle" font-size="13" fill="#64748b">② 对象与事实图：上游关联</text>
    <text x="790" y="32" text-anchor="middle" font-size="13" fill="#64748b">③ 平台需求：最终业务实体</text>
    <text x="1050" y="32" text-anchor="middle" font-size="13" fill="#64748b">④ 证据与状态</text>
  </g>

  <!-- Tree -->
  <g fill="none" stroke="#94a3b8" stroke-width="2">
    <path d="M145 92 L145 125 M145 125 L75 166 M145 125 L215 166"/>
    <path d="M75 204 L48 246 M75 204 L110 246"/>
    <path d="M215 204 L180 246 M215 204 L250 246"/>
  </g>
  <g font-family="sans-serif" font-size="13" text-anchor="middle">
    <rect x="82" y="56" width="126" height="38" rx="11" fill="#1d4ed8"/><text x="145" y="80" fill="#fff">近现代历史人物</text>
    <rect x="25" y="166" width="100" height="38" rx="10" fill="#dbeafe" stroke="#60a5fa"/><text x="75" y="190">历史经历</text>
    <rect x="165" y="166" width="100" height="38" rx="10" fill="#dbeafe" stroke="#60a5fa"/><text x="215" y="190">作品表达</text>
    <rect x="9" y="246" width="78" height="36" rx="9" fill="#fff" stroke="#60a5fa"/><text x="48" y="269">战争经历</text>
    <rect x="91" y="246" width="78" height="36" rx="9" fill="#fff" stroke="#60a5fa"/><text x="130" y="269">历史背景</text>
    <rect x="171" y="246" width="78" height="36" rx="9" fill="#fff" stroke="#60a5fa"/><text x="210" y="269">诗词创作</text>
    <rect x="253" y="246" width="78" height="36" rx="9" fill="#fff" stroke="#60a5fa"/><text x="292" y="269">家国表达</text>
  </g>

  <!-- Candidate tree node -->
  <g font-family="sans-serif" text-anchor="middle">
    <path d="M130 282 C130 326 172 334 172 372" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="5 4"/>
    <rect x="102" y="372" width="140" height="48" rx="11" fill="#fffbeb" stroke="#f59e0b" stroke-dasharray="5 4"/>
    <text x="172" y="393" font-size="12" fill="#92400e">候选意图节点</text><text x="172" y="410" font-size="12">“战争与诗词创作”</text>
    <text x="172" y="442" font-size="10" fill="#92400e">反复被数据证明后，人工审核入树</text>
  </g>

  <!-- Object/fact graph -->
  <g fill="none" stroke="#64748b" stroke-width="2" marker-end="url(#a1)">
    <path d="M420 104 L488 104"/><path d="M534 127 L534 183"/><path d="M505 219 L443 270"/>
    <path d="M563 219 L625 270"/><path d="M443 306 C474 337 557 337 625 306"/>
  </g>
  <g font-family="sans-serif" text-anchor="middle">
    <circle cx="385" cy="104" r="38" fill="#dbeafe" stroke="#3b82f6"/><text x="385" y="109" font-size="14">毛泽东</text>
    <circle cx="534" cy="104" r="45" fill="#dcfce7" stroke="#22c55e"/><text x="534" y="101" font-size="13">抗日战争</text><text x="534" y="118" font-size="11" fill="#475569">上游：关联</text>
    <circle cx="534" cy="219" r="39" fill="#dcfce7" stroke="#22c55e"/><text x="534" y="224" font-size="13">解放战争</text>
    <circle cx="415" cy="286" r="35" fill="#fae8ff" stroke="#d946ef"/><text x="415" y="291" font-size="13">家国情怀</text>
    <circle cx="653" cy="286" r="35" fill="#fae8ff" stroke="#d946ef"/><text x="653" y="291" font-size="13">诗词创作</text>
  </g>

  <!-- Inferred edges -->
  <g fill="none" stroke="#ef4444" stroke-width="2" stroke-dasharray="6 4" marker-end="url(#a2)">
    <path d="M407 127 C432 165 471 188 501 207"/>
    <path d="M554 141 C601 170 638 213 650 250"/>
  </g>
  <g font-family="sans-serif" font-size="10" fill="#b91c1c">
    <text x="443" y="166">推断：人物参与历史事件</text>
    <text x="615" y="188">推断：战争背景影响创作</text>
  </g>

  <!-- Demands -->
  <g fill="none" stroke="#f59e0b" stroke-width="2.4">
    <path d="M87 264 C370 390 622 166 730 151"/>
    <path d="M130 264 C395 464 658 344 730 323"/>
    <path d="M385 142 C493 164 627 157 730 157"/>
    <path d="M534 149 C582 174 658 185 730 171"/>
    <path d="M653 321 C697 321 708 321 730 321"/>
  </g>
  <g font-family="sans-serif" text-anchor="middle">
    <rect x="730" y="112" width="178" height="94" rx="15" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="819" y="136" font-size="12" fill="#9a3412">平台需求 D-001</text>
    <text x="819" y="159" font-size="14">毛泽东的战争时期经历</text>
    <text x="819" y="181" font-size="11" fill="#475569">多挂靠：历史经历 / 战争背景</text>

    <rect x="730" y="276" width="178" height="94" rx="15" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="819" y="300" font-size="12" fill="#9a3412">平台需求 D-002</text>
    <text x="819" y="323" font-size="14">毛泽东为何在战争中写诗</text>
    <text x="819" y="345" font-size="11" fill="#475569">多挂靠：作品表达 / 诗词创作</text>
  </g>

  <!-- Evidence -->
  <g fill="none" stroke="#8b5cf6" stroke-width="1.8" stroke-dasharray="4 4" marker-end="url(#a3)">
    <path d="M908 143 L993 91"/><path d="M908 159 L993 151"/><path d="M908 177 L993 211"/>
    <path d="M908 306 L993 303"/><path d="M908 326 L993 363"/><path d="M908 346 L993 423"/>
  </g>
  <g font-family="sans-serif" text-anchor="middle">
    <rect x="993" y="72" width="130" height="38" rx="19" fill="#ede9fe" stroke="#8b5cf6"/><text x="1058" y="96" font-size="12">外部热度：高</text>
    <rect x="993" y="132" width="130" height="38" rx="19" fill="#ede9fe" stroke="#8b5cf6"/><text x="1058" y="156" font-size="12">近期缺口：中</text>
    <rect x="993" y="192" width="130" height="38" rx="19" fill="#ede9fe" stroke="#8b5cf6"/><text x="1058" y="216" font-size="12">ROV/VOV：已验证</text>
    <rect x="993" y="284" width="130" height="38" rx="19" fill="#ede9fe" stroke="#8b5cf6"/><text x="1058" y="308" font-size="12">持续热度：中</text>
    <rect x="993" y="344" width="130" height="38" rx="19" fill="#ede9fe" stroke="#8b5cf6"/><text x="1058" y="368" font-size="12">关系增益：低权重</text>
    <rect x="993" y="404" width="130" height="38" rx="19" fill="#f1f5f9" stroke="#94a3b8"/><text x="1058" y="428" font-size="12">状态：增长需求</text>
  </g>

  <!-- Bottom labels -->
  <g font-family="sans-serif">
    <rect x="350" y="482" width="470" height="55" rx="12" fill="#fff" stroke="#e2e8f0"/>
    <text x="585" y="504" text-anchor="middle" font-size="12" fill="#334155">灰色实线 = 原始“关联”事实边，永久保留</text>
    <text x="585" y="523" text-anchor="middle" font-size="12" fill="#b91c1c">红色虚线 = 语义推断边，必须带说明、来源、置信度与审核状态</text>
  </g>
</svg>
</div>

<div class="rules">
  <div class="rule"><strong>节点分四类：</strong>意图分类节点、对象/事件/情感节点、平台需求节点、证据/状态节点。</div>
  <div class="rule"><strong>需求唯一：</strong>多维数据命中同一用户意图时合并为一个需求实体，不按来源复制。</div>
  <div class="rule"><strong>多个正式挂靠：</strong>每条需求可以挂靠多个共同表达用户意图的正式树节点，并连接多个具体对象。</div>
  <div class="rule"><strong>原始与推断分离：</strong>上游“关联”是事实；推断语义只做补充，低权重且完整留痕。</div>
</div>

<div class="decision">
  已确认的基本模型：平台需求本身作为独立节点存在，而不是直接等同于某个树节点；它可以挂靠多个正式分类节点，同时连接多个对象和证据节点。
</div>