SupplyAgent/visualization/pages/demand-feedback-loop.html

<style>
  .stage { margin-top:18px; padding:16px; border:1px solid #dbe3ec; border-radius:16px; background:#f8fafc; overflow:auto; }
  .points { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
  .point { padding:13px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; color:#475569; font-size:13px; }
  .point strong { color:#0f172a; }
  .formula { margin-top:14px; padding:14px 16px; border-radius:12px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; text-align:center; font-size:14px; }
  @media(max-width:900px){.points{grid-template-columns:1fr}}
</style>

<h2>修订后的业务流水线：需求—内容—表现闭环</h2>
<p class="subtitle">线上表现不是需求旁边的普通证据，而是需求被内容实际承接之后产生的验证结果；它反向更新需求强度，并驱动下一周期的供给决策。</p>

<div class="stage">
<svg viewBox="0 0 1160 535" width="100%" style="min-width:980px" role="img" aria-label="需求内容表现反馈闭环">
  <defs>
    <marker id="blue" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#2563eb"/></marker>
    <marker id="green" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#16a34a"/></marker>
    <marker id="orange" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#f59e0b"/></marker>
    <marker id="red" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#dc2626"/></marker>
  </defs>

  <!-- top main flow -->
  <g fill="none" stroke="#2563eb" stroke-width="3" marker-end="url(#blue)">
    <path d="M185 138 L260 138"/><path d="M430 138 L505 138"/><path d="M675 138 L750 138"/><path d="M920 138 L995 138"/>
  </g>

  <!-- feedback loop -->
  <path d="M1070 194 C1070 410 885 450 577 450 C275 450 93 407 93 194"
        fill="none" stroke="#dc2626" stroke-width="4" marker-end="url(#red)"/>
  <text x="580" y="482" text-anchor="middle" font-family="sans-serif" font-size="15" fill="#b91c1c">
    真实线上反馈：按需求归因后，回写需求强度、状态与置信度
  </text>

  <!-- inner operational links -->
  <g fill="none" stroke="#16a34a" stroke-width="2.5" marker-end="url(#green)">
    <path d="M345 194 L345 272"/><path d="M590 194 L590 272"/><path d="M835 194 L835 272"/>
  </g>
  <g fill="none" stroke="#f59e0b" stroke-width="2.5" marker-end="url(#orange)">
    <path d="M425 321 L505 321"/><path d="M675 321 L755 321"/>
  </g>

  <g font-family="sans-serif" text-anchor="middle">
    <!-- top nodes -->
    <rect x="15" y="82" width="170" height="112" rx="16" fill="#eff6ff" stroke="#3b82f6" stroke-width="2"/>
    <text x="100" y="111" font-size="13" fill="#1d4ed8">上游信号</text>
    <text x="100" y="136" font-size="14">内部 / 外部</text>
    <text x="100" y="157" font-size="14">近期 / 持续 / 周期</text>
    <text x="100" y="178" font-size="11" fill="#64748b">形成需求先验</text>

    <rect x="260" y="82" width="170" height="112" rx="16" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="345" y="111" font-size="13" fill="#9a3412">平台需求</text>
    <text x="345" y="137" font-size="15">毛泽东为何坚持写诗</text>
    <text x="345" y="160" font-size="12" fill="#475569">先验强度：72</text>
    <text x="345" y="180" font-size="11" fill="#64748b">多挂靠 + 对象关系 + 数据证据</text>

    <rect x="505" y="82" width="170" height="112" rx="16" fill="#f0fdf4" stroke="#22c55e" stroke-width="2"/>
    <text x="590" y="111" font-size="13" fill="#15803d">内容承接</text>
    <text x="590" y="137" font-size="14">找到已有内容</text>
    <text x="590" y="158" font-size="14">或指导生产内容</text>
    <text x="590" y="180" font-size="11" fill="#64748b">需求 ↔ 内容必须可追踪</text>

    <rect x="750" y="82" width="170" height="112" rx="16" fill="#ecfeff" stroke="#06b6d4" stroke-width="2"/>
    <text x="835" y="111" font-size="13" fill="#0e7490">线上分发</text>
    <text x="835" y="137" font-size="14">曝光与消费</text>
    <text x="835" y="158" font-size="14">供给量与匹配度</text>
    <text x="835" y="180" font-size="11" fill="#64748b">需考虑内容质量与流量环境</text>

    <rect x="995" y="82" width="150" height="112" rx="16" fill="#fef2f2" stroke="#ef4444" stroke-width="2"/>
    <text x="1070" y="111" font-size="13" fill="#b91c1c">真实线上表现</text>
    <text x="1070" y="137" font-size="14">真实 ROV / VOV</text>
    <text x="1070" y="158" font-size="14">消费、互动、转化</text>
    <text x="1070" y="180" font-size="11" fill="#64748b">形成需求后验</text>

    <!-- lower details -->
    <rect x="265" y="272" width="160" height="98" rx="14" fill="#fff" stroke="#f59e0b"/>
    <text x="345" y="298" font-size="13" fill="#9a3412">需求当前状态</text>
    <text x="345" y="322" font-size="13">新机会 / 增长</text>
    <text x="345" y="343" font-size="13">已验证 / 观察 / 抑制</text>
    <text x="345" y="359" font-size="10" fill="#64748b">状态随周期变化</text>

    <rect x="505" y="272" width="170" height="98" rx="14" fill="#fff" stroke="#22c55e"/>
    <text x="590" y="298" font-size="13" fill="#15803d">内容归因关系</text>
    <text x="590" y="322" font-size="13">一条需求 → 多条内容</text>
    <text x="590" y="343" font-size="13">一条内容 → 多个需求</text>
    <text x="590" y="359" font-size="10" fill="#64748b">记录主需求与辅助需求</text>

    <rect x="755" y="272" width="160" height="98" rx="14" fill="#fff" stroke="#06b6d4"/>
    <text x="835" y="298" font-size="13" fill="#0e7490">归因校正</text>
    <text x="835" y="322" font-size="13">供给量、内容质量</text>
    <text x="835" y="343" font-size="13">流量、时间、样本量</text>
    <text x="835" y="359" font-size="10" fill="#64748b">避免把内容问题误判为需求问题</text>
  </g>

  <!-- strength split -->
  <g font-family="sans-serif">
    <rect x="20" y="392" width="245" height="51" rx="11" fill="#fff" stroke="#cbd5e1"/>
    <text x="142" y="413" text-anchor="middle" font-size="12" fill="#334155">需求先验强度</text>
    <text x="142" y="432" text-anchor="middle" font-size="11" fill="#64748b">由上游多维信号决定“值得试什么”</text>

    <rect x="895" y="392" width="245" height="51" rx="11" fill="#fff" stroke="#ef4444"/>
    <text x="1017" y="413" text-anchor="middle" font-size="12" fill="#b91c1c">需求验证强度</text>
    <text x="1017" y="432" text-anchor="middle" font-size="11" fill="#64748b">由真实内容表现决定“实际是否成立”</text>
  </g>
</svg>
</div>

<div class="points">
  <div class="point"><strong>需求与内容必须建立映射：</strong>否则内容表现无法准确回流到需求。允许一对多和多对多，但要区分主需求与辅助需求。</div>
  <div class="point"><strong>反馈需要校正：</strong>线上表现同时受内容质量、供给数量、流量和时效影响，不能把一条差内容直接等同于需求无效。</div>
  <div class="point"><strong>强度是动态状态：</strong>每个周期重新计算，需求可以从新机会变为已验证，也可以因持续表现差被降级或抑制。</div>
</div>

<div class="formula">
  最终需求强度 = 先验需求强度 + 经归因校正的线上验证强度 + 低权重关系增益 − 风险抑制
</div>