SupplyAgent/visualization/.superpowers/brainstorm/52647-1784195885/content/icicle-demand-final-demo.html

<style>
  .brief{max-width:1080px;margin-bottom:18px}.brief p{line-height:1.7}
  .demo{overflow:hidden;border:1px solid #dbe3ec;border-radius:18px;background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.08)}
  .top{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;background:#172554;color:#fff}
  .top h3{margin:0 0 4px;font-size:17px}.top p{margin:0;color:#bfdbfe;font-size:9px}
  .legend{display:flex;gap:8px;align-items:center;font-size:8px}.legend span{display:flex;align-items:center;gap:3px}.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
  .overview{display:grid;grid-template-columns:repeat(4,1fr);background:#f8fafc;border-bottom:1px solid #e2e8f0}
  .overview div{padding:11px 15px;border-right:1px solid #e2e8f0}.overview div:last-child{border:0}
  .overview b{display:block;color:#1e3a8a;font-size:11px}.overview small{color:#64748b;font-size:7px}
  .body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.65fr);min-height:610px}
  .map{padding:16px;border-right:1px solid #e2e8f0}.maphead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:11px}
  .maphead strong{font-size:12px}.maphead span{color:#64748b;font-size:8px}
  .axis{display:grid;grid-template-columns:repeat(8,1fr);margin:0 0 5px;color:#94a3b8;font-size:7px;text-align:center}
  .icicle{position:relative;height:465px;overflow:hidden;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc}
  .grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);pointer-events:none}.grid i{border-right:1px solid rgba(148,163,184,.2)}
  .block{position:absolute;overflow:hidden;padding:4px;border:1px solid rgba(255,255,255,.88);border-radius:3px;color:#fff;font-size:7px;font-weight:700;line-height:1.25}
  .block.cold,.block.none{color:#475569}.high{background:#ef4444}.rise{background:#f59e0b}.mid{background:#eab308}.low{background:#60a5fa}.cold{background:#dbeafe}.none{background:#f1f5f9}
  .selected{z-index:4;outline:3px solid #7c3aed;outline-offset:-3px}.score{display:block;margin-top:2px;opacity:.86;font-size:6px;font-weight:500}
  .hotspot{position:absolute;z-index:8;width:210px;padding:9px 10px;border:1px solid #c4b5fd;border-radius:9px;background:rgba(255,255,255,.96);box-shadow:0 8px 20px rgba(30,41,59,.1);color:#334155;font-size:7px;line-height:1.55}
  .hotspot b{display:block;color:#6d28d9;font-size:9px}.hotspot em{color:#dc2626;font-style:normal}
  .reading{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.reading div{padding:8px 9px;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-size:7px;line-height:1.5}
  .output{padding:15px;background:#fbfdff}.output h4{margin:0 0 3px;font-size:13px}.output>p{margin:0 0 10px;color:#64748b;font-size:8px;line-height:1.55}
  .filters{display:flex;gap:5px;margin-bottom:10px}.filters span{padding:4px 6px;border:1px solid #dbe3ec;border-radius:5px;background:#fff;color:#64748b;font-size:7px}.filters .active{border-color:#1d4ed8;background:#1d4ed8;color:#fff}
  .demand{margin-bottom:9px;padding:10px;border:1px solid #dbe3ec;border-radius:10px;background:#fff}
  .dtop{display:flex;justify-content:space-between;gap:8px}.demand strong{font-size:9px;line-height:1.45}.badge{flex:0 0 auto;padding:3px 5px;border-radius:4px;background:#fff7ed;color:#9a3412;font-size:6px;font-weight:800}
  .scores{display:flex;gap:4px;margin-top:6px}.scores span{padding:3px 5px;border-radius:4px;background:#eff6ff;color:#1e40af;font-size:6px}.scores .grain{background:#f3e8ff;color:#6b21a8}
  .reason{margin-top:6px;color:#64748b;font-size:7px;line-height:1.55}.reason b{color:#334155;font-size:7px}.model{margin-top:5px;padding-top:5px;border-top:1px dashed #dbe3ec;color:#7c3aed;font-size:6px;line-height:1.5}
  .not-demand{border-left:3px solid #94a3b8;background:#f8fafc}.not-demand .badge{background:#e2e8f0;color:#475569}
  .foot{padding:12px 18px;border-top:1px solid #e2e8f0;color:#526174;font-size:9px;line-height:1.65}
  @media(max-width:980px){.body{grid-template-columns:1fr}.map{border-right:0;border-bottom:1px solid #e2e8f0}.overview{grid-template-columns:1fr 1fr}}
</style>

<div class="brief">
  <h2>推荐版 Demo：全局热力地形 + 批量需求输出</h2>
  <p class="subtitle">热力图不再显示 P/H，也不要求阅读全部节点。每个节点只用 0～1 热度 Score 着色；所有冷区继续占有位置。右侧直接输出系统判断出的需求，并把“是否为需求”与“需求粒度”分开。</p>
</div>

<section class="demo" data-choice="approved-icicle" onclick="toggleSelect(this)">
  <header class="top">
    <div><h3>平台全局需求地图</h3><p>完整分类树、热冷分布与需求结果使用同一份上游数据</p></div>
    <div class="legend"><span><i class="high"></i>0.80–1 高热</span><span><i class="rise"></i>0.60–0.79</span><span><i class="mid"></i>0.40–0.59</span><span><i class="low"></i>0.20–0.39</span><span><i class="cold"></i>0–0.19</span><span><i class="none"></i>无数据</span></div>
  </header>
  <div class="overview">
    <div><b>热度 Score 0～1</b><small>颜色只表示当前热冷，不代表是否为需求</small></div>
    <div><b>冷区完整保留</b><small>所有节点都占据位置，提供全局比较基线</small></div>
    <div><b>需求按搜索意义判断</b><small>宽泛需求、主题需求和长尾需求都可成立</small></div>
    <div><b>Reason 可追溯</b><small>上游事实和模型解释分开显示</small></div>
  </div>
  <div class="body">
    <section class="map">
      <div class="maphead"><strong>完整分类树热力地形</strong><span>横向为层级 · 纵向为分支规模 · 点击色块放大</span></div>
      <div class="axis"><span>根</span><span>一级</span><span>二级</span><span>三级</span><span>四级</span><span>五级</span><span>六级+</span><span>元素</span></div>
      <div class="icicle">
        <div class="grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="block mid" style="left:0;top:0;width:12.5%;height:58%">表象<span class="score">Score 0.52</span></div>
        <div class="block mid" style="left:0;top:58%;width:12.5%;height:42%">理念<span class="score">Score 0.49</span></div>
        <div class="block rise" style="left:12.5%;top:0;width:12.5%;height:23%">行为<span class="score">0.68</span></div>
        <div class="block cold" style="left:12.5%;top:23%;width:12.5%;height:7%">内容形态<span class="score">0.08</span></div>
        <div class="block rise" style="left:12.5%;top:30%;width:12.5%;height:12%">场景<span class="score">0.64</span></div>
        <div class="block none" style="left:12.5%;top:42%;width:12.5%;height:5%">声音<span class="score">数据较少</span></div>
        <div class="block low" style="left:12.5%;top:47%;width:12.5%;height:11%">实体<span class="score">0.38</span></div>
        <div class="block rise" style="left:12.5%;top:58%;width:12.5%;height:25%">知识<span class="score">0.72</span></div>
        <div class="block cold" style="left:12.5%;top:83%;width:12.5%;height:7%">现象<span class="score">0.16</span></div>
        <div class="block mid" style="left:12.5%;top:90%;width:12.5%;height:6%">事件<span class="score">0.51</span></div>
        <div class="block cold" style="left:12.5%;top:96%;width:12.5%;height:4%">观念<span class="score">0.13</span></div>

        <div class="block rise" style="left:25%;top:0;width:12.5%;height:8%">日常互动</div>
        <div class="block rise" style="left:25%;top:8%;width:12.5%;height:10%">日常活动</div>
        <div class="block none" style="left:25%;top:18%;width:12.5%;height:5%">纪念活动</div>
        <div class="block high selected" style="left:25%;top:23%;width:12.5%;height:7%">战斗作战<span class="score">0.91</span></div>
        <div class="block rise" style="left:25%;top:30%;width:12.5%;height:7%">空间</div>
        <div class="block mid" style="left:25%;top:37%;width:12.5%;height:5%">时间</div>
        <div class="block cold" style="left:25%;top:42%;width:12.5%;height:5%">音乐 / 语音</div>
        <div class="block rise" style="left:25%;top:47%;width:12.5%;height:8%">人物</div>
        <div class="block low" style="left:25%;top:55%;width:12.5%;height:3%">物品</div>
        <div class="block rise" style="left:25%;top:58%;width:12.5%;height:18%">概念</div>
        <div class="block rise" style="left:25%;top:76%;width:12.5%;height:7%">方法</div>
        <div class="block none" style="left:25%;top:83%;width:12.5%;height:7%">生活状态</div>
        <div class="block rise" style="left:25%;top:90%;width:12.5%;height:6%">历史事件</div>
        <div class="block none" style="left:25%;top:96%;width:12.5%;height:4%">社会 / 个人</div>

        <div class="block high selected" style="left:37.5%;top:8%;width:12.5%;height:6%">居家生活<span class="score">0.86</span></div>
        <div class="block rise" style="left:50%;top:8%;width:12.5%;height:2.8%">家务劳动<span class="score">0.68</span></div>
        <div class="block mid" style="left:50%;top:10.8%;width:12.5%;height:1.5%">阅读<span class="score">0.44</span></div>
        <div class="block cold" style="left:50%;top:12.3%;width:12.5%;height:1.7%">物品处置<span class="score">0.11</span></div>
        <div class="block rise" style="left:62.5%;top:8%;width:12.5%;height:2.8%">家庭清洁</div>
        <div class="block none" style="left:62.5%;top:10.8%;width:12.5%;height:1.5%">书本翻页</div>

        <div class="block rise" style="left:37.5%;top:47%;width:12.5%;height:4%">现实人物</div>
        <div class="block mid" style="left:50%;top:47%;width:12.5%;height:3%">历史名人</div>
        <div class="block low" style="left:62.5%;top:47%;width:12.5%;height:2%">政治领袖</div>
        <div class="block cold" style="left:75%;top:47%;width:12.5%;height:2%">共和国领导人</div>

        <div class="block mid" style="left:37.5%;top:76%;width:12.5%;height:7%">生活技巧</div>
        <div class="block none selected" style="left:50%;top:76%;width:12.5%;height:3%">居家生活<span class="score">数据缺失</span></div>
        <div class="block low" style="left:62.5%;top:76%;width:12.5%;height:3%">驱蚊技巧<span class="score">探索需求</span></div>

        <div class="hotspot" style="right:10px;top:10px"><b>全局阅读方式</b>先看红橙色区域在全树中的位置，再看周围蓝白冷区。<em>红色代表热，不代表更“像需求”</em>；需求成立与否由搜索意义单独判断。</div>
      </div>
      <div class="reading"><div><b>全局态</b><br>色块密度和颜色形成热冷地形，不依赖读取全部名称。</div><div><b>放大态</b><br>点击“居家生活”后用整个画布展示其子树和需求。</div><div><b>需求态</b><br>系统已完成全树判断，右侧直接给出数百条结果。</div></div>
    </section>

    <aside class="output">
      <h4>系统形成的需求</h4>
      <p>按热度、可信度和业务粒度排序。宽泛需求与具体需求可以同时保留，并建立父子关系。</p>
      <div class="filters"><span class="active">全部需求</span><span>宽泛</span><span>主题级</span><span>具体</span><span>探索</span></div>

      <div class="demand">
        <div class="dtop"><strong>战争</strong><span class="badge">宽泛需求</span></div>
        <div class="scores"><span>热度 0.91</span><span>可信度 0.78</span><span class="grain">粒度：宽泛</span></div>
        <div class="reason"><b>数据事实：</b>“战斗作战”外部信号强，存在真实 ROV / VOV；上游元素包含“战争”。</div>
        <div class="model">模型 Reason：“战争”能够独立表达外部搜索意图，因此成立为需求。范围较大只表示它是父级需求，应继续下挂抗日战争、解放战争、人物、事件等子需求。</div>
      </div>

      <div class="demand">
        <div class="dtop"><strong>家庭清洁</strong><span class="badge">主题级需求</span></div>
        <div class="scores"><span>热度 0.68</span><span>可信度 0.55</span><span class="grain">粒度：主题级</span></div>
        <div class="reason"><b>数据事实：</b>位于“居家生活 → 家务劳动”，上游元素为“家庭清洁”，真实 ROV / VOV 暂缺。</div>
        <div class="model">模型 Reason：可以独立搜索并承接多类内容。后验缺失属于验证空白，不应过滤该需求。</div>
      </div>

      <div class="demand">
        <div class="dtop"><strong>驱蚊技巧</strong><span class="badge">具体需求</span></div>
        <div class="scores"><span>热度 0.24</span><span>可信度 0.41</span><span class="grain">粒度：具体</span></div>
        <div class="reason"><b>数据事实：</b>位于“方法 → 生活技巧 → 居家生活”，上游存在同名具体元素，表现数据缺失。</div>
        <div class="model">模型 Reason：虽然属于冷区，但具有明确搜索意义，仍然成立为探索需求。</div>
      </div>

      <div class="demand not-demand">
        <div class="dtop"><strong>表象</strong><span class="badge">不是需求</span></div>
        <div class="scores"><span>热度 0.52</span><span class="grain">类型：分类结构词</span></div>
        <div class="reason"><b>数据事实：</b>它是全局树根节点，覆盖大量不同语义分支。</div>
        <div class="model">模型 Reason：“表象”不能独立表达有意义的外部搜索意图，因此只作为分类结构保留，不进入需求结果。</div>
      </div>
    </aside>
  </div>
  <div class="foot"><b>这版解决的问题：</b>深层级和大量节点通过连续面积表达，不再依靠密集线条；冷区始终存在；Score 统一为 0～1；“是否为需求”和“需求粒度”彻底分开。</div>
</section>