SupplyAgent/visualization/.superpowers/brainstorm/52647-1784195885/content/global-demand-demo-options.html

<style>
  .intro { max-width: 980px; margin-bottom: 20px; }
  .intro strong { color: #123f35; }
  .demo-grid { display: grid; gap: 20px; }
  .demo-card {
    overflow: hidden;
    border: 1px solid #d8ddd8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(32,55,47,.07);
    cursor: pointer;
  }
  .demo-card.selected { border: 2px solid #14745f; box-shadow: 0 0 0 4px rgba(20,116,95,.12); }
  .demo-title { display:flex; align-items:flex-start; gap:14px; padding:18px 20px 14px; border-bottom:1px solid #e5e8e5; }
  .demo-letter { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#173f36; color:white; font-weight:800; }
  .demo-title h3 { margin:0 0 4px; font-size:17px; }
  .demo-title p { margin:0; color:#6d766f; font-size:12px; }
  .recommended { margin-left:auto; padding:5px 8px; border-radius:6px; background:#e4f2ec; color:#17604f; font-size:10px; font-weight:750; }
  .screen { padding:14px; background:#f4f5f1; }
  .appbar { display:flex; align-items:center; justify-content:space-between; padding:10px 13px; background:#17332c; color:white; border-radius:10px 10px 0 0; }
  .appbar b { font-size:12px; }
  .appbar span { color:#b8ccc4; font-size:8px; }
  .heat-legend { display:flex; gap:8px; align-items:center; font-size:8px; color:#657069; }
  .heat-legend i { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:2px; }
  .workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); min-height:330px; background:white; border:1px solid #dde2de; border-top:0; border-radius:0 0 10px 10px; }
  .map { position:relative; padding:15px; overflow:hidden; background:linear-gradient(90deg,rgba(34,57,49,.035) 1px,transparent 1px),#fbfcfa; background-size:80px 100%; }
  .map-head { display:flex; justify-content:space-between; margin-bottom:12px; font-size:9px; }
  .map-head strong { font-size:11px; }
  .branch { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:10px; margin:7px 0; }
  .branch-name { padding:7px 8px; border-radius:6px; font-size:9px; font-weight:700; color:white; }
  .children { display:flex; align-items:center; gap:5px; }
  .node { min-width:55px; padding:6px 7px; border-radius:5px; color:#fff; font-size:8px; text-align:center; position:relative; }
  .node:before { content:""; position:absolute; left:-6px; top:50%; width:6px; border-top:1px solid #aeb8b2; }
  .hot { background:#d94f3f; }
  .warm { background:#e58b3c; }
  .mid { background:#d5a943; }
  .cool { background:#7c9a91; }
  .cold { background:#cbd2ce; color:#53615b; }
  .selected-node { outline:3px solid rgba(20,116,95,.22); box-shadow:0 0 0 1px #fff inset; }
  .insight { margin-top:13px; padding:10px 11px; border-left:3px solid #d94f3f; background:#fff3ef; font-size:9px; line-height:1.6; }
  .output { padding:13px; border-left:1px solid #e0e4e1; background:#f9faf8; }
  .output h4 { margin:0 0 3px; font-size:11px; }
  .output > p { margin:0 0 10px; color:#748078; font-size:8px; }
  .demand { margin-bottom:8px; padding:9px; border:1px solid #dce2de; border-radius:7px; background:#fff; }
  .demand-top { display:flex; justify-content:space-between; gap:8px; }
  .demand strong { font-size:9px; line-height:1.4; }
  .tag { flex:0 0 auto; height:17px; padding:2px 5px; border-radius:4px; color:#fff; font-size:7px; font-weight:750; }
  .tag.yes { background:#168065; }
  .tag.watch { background:#b8893d; }
  .tag.no { background:#929c96; }
  .reason { margin-top:5px; color:#6d776f; font-size:7px; line-height:1.5; }
  .evidence { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
  .evidence span { padding:2px 4px; border-radius:3px; background:#edf1ee; color:#5c6861; font-size:6px; }
  .evidence .missing { border:1px dashed #c5cbc7; background:#fafafa; color:#929994; }
  .matrix { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:10px; }
  .tile { min-height:65px; padding:8px; border-radius:6px; color:white; }
  .tile b { display:block; font-size:9px; }
  .tile small { display:block; margin-top:3px; font-size:6px; opacity:.86; }
  .pipeline { display:flex; align-items:stretch; gap:6px; margin-top:14px; }
  .stage { flex:1; padding:8px; border:1px solid #dce1dd; border-radius:6px; background:#fff; }
  .stage b { display:block; font-size:8px; }
  .stage small { color:#768079; font-size:6px; line-height:1.4; }
  .arrow { align-self:center; color:#98a19b; }
  .river { position:relative; height:245px; margin-top:10px; }
  .river-line { position:absolute; left:35px; right:35px; height:1px; background:#d9dfdb; transform-origin:left; }
  .river-node { position:absolute; display:grid; place-items:center; border-radius:50%; color:white; font-size:7px; text-align:center; box-shadow:0 0 0 5px rgba(255,255,255,.75); }
  .demo-foot { padding:11px 18px 14px; color:#626d66; font-size:10px; line-height:1.55; }
  .logic-strip { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin-top:18px; padding:14px; border:1px solid #dbe2dd; border-radius:12px; background:#f8faf8; }
  .logic-strip div { padding:9px; border-radius:7px; background:white; font-size:9px; }
  .logic-strip strong { display:block; margin-bottom:3px; }
  .logic-strip span { color:#737d76; font-size:8px; line-height:1.45; }
  @media(max-width:900px){ .workspace{grid-template-columns:1fr}.output{border-left:0;border-top:1px solid #e0e4e1}.matrix{grid-template-columns:1fr 1fr} }
</style>

<div class="intro">
  <h2>三种“全局判断并产出需求”的 Demo</h2>
  <p class="subtitle">它们都只有一套判断视角，不再切换“先验/后验/机会”等模式。颜色回答哪里热，需求卡回答系统最终提出什么，reason 回答为什么成立或为什么暂不成立。</p>
  <p style="margin:-8px 0 14px;color:#9a6b32;font-size:11px;">说明：节点名称和“居家生活 / 家务劳动 / 阅读”的证据来自现有上游数据；界面中的需求总数、模块需求条数仅用于比较版式，不代表已经完成的真实计算结果。</p>
  <div class="logic-strip">
    <div><strong>上游事实</strong><span>树位置、四项热度、真实 ROV / VOV、元素与原始 reason</span></div>
    <b>→</b>
    <div><strong>语义判断</strong><span>维度缺失不等于零；结合父子热度、语义具体度、证据一致性判断</span></div>
    <b>→</b>
    <div><strong>最终输出</strong><span>生成需求 / 继续观察 / 暂不生成，并输出可读 reason</span></div>
  </div>
</div>

<div class="demo-grid">
  <section class="demo-card" data-choice="a" onclick="toggleSelect(this)">
    <div class="demo-title">
      <div class="demo-letter">A</div>
      <div><h3>全局热力树 + 需求输出栏</h3><p>保留树的层级关系，但只展示当前有判断价值的骨架；右边持续输出大量需求。</p></div>
      <span class="recommended">推荐</span>
    </div>
    <div class="screen">
      <div class="appbar"><b>全局需求热力树</b><div class="heat-legend"><span><i style="background:#d94f3f"></i>高热</span><span><i style="background:#e58b3c"></i>升温</span><span><i style="background:#d5a943"></i>稳定</span><span><i style="background:#cbd2ce"></i>弱信号</span></div><span>数据日期 2026-07-14</span></div>
      <div class="workspace">
        <div class="map">
          <div class="map-head"><strong>全局模块热度</strong><span>节点颜色由多维证据综合判断，不显示技术分数</span></div>
          <div class="branch"><div class="branch-name warm">行为</div><div class="children"><div class="node mid">日常活动</div><div class="node hot selected-node">居家生活</div><div class="node warm">个人护理</div><div class="node warm">家务劳动</div><div class="node mid">阅读</div><div class="node cool">物品处置</div></div></div>
          <div class="branch"><div class="branch-name mid">人物</div><div class="children"><div class="node mid">现实人物</div><div class="node warm">历史名人</div><div class="node warm">政治领袖</div><div class="node mid">共和国领导人</div></div></div>
          <div class="branch"><div class="branch-name cool">知识</div><div class="children"><div class="node cool">方法</div><div class="node mid">生活技巧</div><div class="node cold">居家生活</div></div></div>
          <div class="branch"><div class="branch-name warm">事件</div><div class="children"><div class="node warm">历史事件</div><div class="node mid">抗日战争</div><div class="node mid">解放战争</div></div></div>
          <div class="insight"><strong>全局判断：</strong>“行为 → 日常活动 → 居家生活”是当前值得扩充需求的高热区域。它的外部热度明显，但真实 ROV / VOV 暂无数据，因此结论是“高热待验证”，不是“低需求”。</div>
        </div>
        <aside class="output">
          <h4>系统提出的需求</h4>
          <p>当前全局共形成 386 条，按价值与证据完整度排序</p>
          <div class="demand">
            <div class="demand-top"><strong>补充家庭清洁的分步骤、省力技巧与常见误区内容</strong><span class="tag yes">生成需求</span></div>
            <div class="reason">Reason：父级“居家生活”外部热度高；子类“家务劳动”存在同期信号；上游元素“家庭清洁”语义具体。虽无真实 ROV / VOV，证据仍足以形成待验证需求。</div>
            <div class="evidence"><span>父级高热</span><span>同期信号</span><span>元素：家庭清洁</span><span class="missing">后验待验证</span></div>
          </div>
          <div class="demand">
            <div class="demand-top"><strong>围绕居家阅读场景补充内容</strong><span class="tag watch">继续观察</span></div>
            <div class="reason">Reason：只有较弱的同期信号；元素“书本翻页”描述的是动作，不足以说明用户想解决的问题。需要更多上游语言或内容表现后再生成明确需求。</div>
            <div class="evidence"><span>单一弱信号</span><span>元素语义偏浅</span><span class="missing">缺少问题表达</span></div>
          </div>
          <div class="demand">
            <div class="demand-top"><strong>泛化生成“所有居家用品介绍”</strong><span class="tag no">不生成</span></div>
            <div class="reason">Reason：范围过宽，无法映射到明确用户问题；即便父节点热度高，也不能直接把所有下级主题都判为需求。</div>
          </div>
        </aside>
      </div>
    </div>
    <div class="demo-foot">优点：最接近你的业务目标——全局图负责发现热区，右侧直接成为“需求生产结果”。逐层下钻只用于解释需求，不是页面主任务。</div>
  </section>

  <section class="demo-card" data-choice="b" onclick="toggleSelect(this)">
    <div class="demo-title">
      <div class="demo-letter">B</div>
      <div><h3>热度地图 + 需求生产流水线</h3><p>弱化树线条，用模块面积和颜色展示全局；下方展示需求如何被判断出来。</p></div>
    </div>
    <div class="screen">
      <div class="appbar"><b>平台需求全景</b><span>热度区域 → 判断证据 → 平台需求</span></div>
      <div class="workspace">
        <div class="map">
          <div class="map-head"><strong>全局需求地形</strong><span>面积代表该模块下可提取的信息规模</span></div>
          <div class="matrix">
            <div class="tile hot" style="grid-column:span 2"><b>居家生活</b><small>高热 · 8 个直接子类 · 外部信号强</small></div>
            <div class="tile warm"><b>历史人物</b><small>升温 · 多节点交织</small></div>
            <div class="tile mid"><b>战争历史</b><small>稳定 · 有事件关系</small></div>
            <div class="tile mid"><b>个人护理</b><small>稳定热度</small></div>
            <div class="tile warm"><b>家务劳动</b><small>可形成具体需求</small></div>
            <div class="tile cool"><b>阅读</b><small>证据尚浅</small></div>
            <div class="tile cold"><b>物品处置</b><small>弱信号</small></div>
          </div>
          <div class="pipeline">
            <div class="stage"><b>发现热区</b><small>居家生活外部信号突出</small></div><span class="arrow">→</span>
            <div class="stage"><b>寻找具体语义</b><small>家务劳动 / 家庭清洁</small></div><span class="arrow">→</span>
            <div class="stage"><b>判断证据缺口</b><small>无后验，但不是零需求</small></div><span class="arrow">→</span>
            <div class="stage"><b>生成需求</b><small>家庭清洁分步骤内容</small></div>
          </div>
        </div>
        <aside class="output">
          <h4>需求生产结果</h4><p>按模块汇总，适合快速浏览数百条需求</p>
          <div class="demand"><div class="demand-top"><strong>居家生活 · 42 条需求</strong><span class="tag yes">重点扩充</span></div><div class="reason">家务劳动 12 · 个人护理 9 · 家庭互动 8 · 其他 13</div></div>
          <div class="demand"><div class="demand-top"><strong>历史人物 · 31 条需求</strong><span class="tag yes">持续供给</span></div><div class="reason">人物、事件、情感、作品多个挂靠点共同支持。</div></div>
          <div class="demand"><div class="demand-top"><strong>阅读 · 3 条候选</strong><span class="tag watch">需补证据</span></div><div class="reason">热度信号与用户问题表达都不足，暂不批量生成。</div></div>
        </aside>
      </div>
    </div>
    <div class="demo-foot">优点：最干净、最有“全局地形感”，适合管理层看重点方向；缺点是树的父子挂靠关系不如方案 A 直观。</div>
  </section>

  <section class="demo-card" data-choice="c" onclick="toggleSelect(this)">
    <div class="demo-title">
      <div class="demo-letter">C</div>
      <div><h3>需求河流图</h3><p>从左侧全局分类流向右侧需求簇，线条表达哪些证据共同形成一条需求。</p></div>
    </div>
    <div class="screen">
      <div class="appbar"><b>需求形成关系图</b><span>分类与信号在左 · 最终需求在右</span></div>
      <div class="workspace">
        <div class="map">
          <div class="map-head"><strong>全局证据 → 需求</strong><span>线宽表示支持该需求的证据数量</span></div>
          <div class="river">
            <div class="river-line" style="top:47px;left:95px;right:190px;transform:rotate(4deg)"></div>
            <div class="river-line" style="top:105px;left:95px;right:190px;transform:rotate(-8deg)"></div>
            <div class="river-line" style="top:160px;left:95px;right:190px;transform:rotate(-17deg)"></div>
            <div class="river-node warm" style="left:15px;top:24px;width:64px;height:64px">居家生活<br>高热</div>
            <div class="river-node mid" style="left:130px;top:62px;width:55px;height:55px">家务劳动</div>
            <div class="river-node cool" style="left:130px;top:145px;width:48px;height:48px">阅读</div>
            <div class="river-node warm" style="left:245px;top:75px;width:52px;height:52px">家庭清洁</div>
            <div class="river-node hot" style="right:15px;top:35px;width:105px;height:105px">家庭清洁<br>步骤 / 技巧 / 误区<br>生成需求</div>
            <div class="river-node cold" style="right:35px;top:175px;width:60px;height:60px">阅读场景<br>继续观察</div>
          </div>
        </div>
        <aside class="output">
          <h4>为什么形成这条需求</h4><p>每条线都是一个可追溯证据</p>
          <div class="demand"><div class="demand-top"><strong>家庭清洁分步骤内容</strong><span class="tag yes">成立</span></div><div class="reason">① 父模块高热<br>② 子分类有同期信号<br>③ 元素语义具体<br>④ 后验缺失，被识别为验证缺口而非负反馈</div></div>
          <div class="demand"><div class="demand-top"><strong>居家阅读内容</strong><span class="tag watch">不成立</span></div><div class="reason">同样缺少后验，但只有单一弱信号，且“书本翻页”不能表达明确问题，所以不生成需求。</div></div>
        </aside>
      </div>
    </div>
    <div class="demo-foot">优点：最能解释“相同维度缺失，为什么一个成为需求、另一个不成为需求”；缺点是面对数百条需求时容易再次出现线条拥挤。</div>
  </section>
</div>