Главная Обзор Помощь
Вход
Server
/
SupplyAgent
41
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: dev-process-optimization
Ветки Метки
SupplyAgent
/
visualization
/
.superpowers
/
brainstorm
/
52647-1784195885
/
content
/
deep-tree-global-heat-options.html

deep-tree-global-heat-options.html 19 KB
Постоянная ссылка История Исходник

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 
  1. <style>
    2. 

  2.   .intro{max-width:1080px;margin-bottom:22px}.intro p{line-height:1.7}
    3. 

  3.   .principle{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
    4. 

  4.   .principle span{padding:7px 10px;border:1px solid #dbe3ec;border-radius:9px;background:#fff;color:#526174;font-size:11px}
    5. 

  5.   .options{display:grid;gap:24px}
    6. 

  6.   .option{overflow:hidden;padding:0!important;border:1px solid #dbe3ec!important;border-radius:18px!important;background:#fff!important;box-shadow:0 16px 42px rgba(15,23,42,.07)!important}
    7. 

  7.   .option.selected{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.13),0 16px 42px rgba(15,23,42,.08)!important}
    8. 

  8.   .head{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid #e2e8f0}
    9. 

  9.   .letter{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:11px;background:#1d4ed8;color:#fff;font-weight:800}
    10. 

  10.   .head h3{margin:0 0 5px;font-size:18px}.head p{margin:0;color:#64748b;font-size:12px}
    11. 

  11.   .recommended{margin-left:auto;padding:5px 8px;border-radius:6px;background:#dbeafe;color:#1d4ed8;font-size:10px;font-weight:800}
    12. 

  12.   .screen{padding:16px;background:#f8fafc}
    13. 

  13.   .appbar{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-radius:12px 12px 0 0;background:#172554;color:#fff}
    14. 

  14.   .appbar b{font-size:13px}.appbar small{color:#bfdbfe;font-size:8px}
    15. 

  15.   .legend{display:flex;gap:8px;font-size:8px}.legend span{display:flex;align-items:center;gap:3px}.legend i{display:inline-block;width:8px;height:8px;border-radius:2px}
    16. 

  16.   .body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);min-height:420px;border:1px solid #dbe3ec;border-top:0;border-radius:0 0 12px 12px;background:#fff}
    17. 

  17.   .viz{padding:14px;min-width:0}.viz-title{display:flex;justify-content:space-between;margin-bottom:10px}.viz-title strong{font-size:11px}.viz-title span{color:#64748b;font-size:8px}
    18. 

  18.   .side{padding:14px;border-left:1px solid #e2e8f0;background:#fbfdff}.side h4{margin:0 0 4px;font-size:12px}.side>p{margin:0 0 11px;color:#64748b;font-size:8px;line-height:1.5}
    19. 

  19.   .demand{margin-bottom:8px;padding:9px;border:1px solid #e2e8f0;border-radius:9px;background:#fff}.demand strong{display:block;font-size:9px;line-height:1.4}.demand p{margin:4px 0 0;color:#64748b;font-size:7px;line-height:1.55}.demand em{display:inline-block;margin-top:5px;padding:2px 4px;border-radius:4px;background:#fff7ed;color:#9a3412;font-size:6px;font-style:normal}
    20. 

  20.   .foot{padding:12px 18px 15px;color:#59677a;font-size:10px;line-height:1.65}
    21. 

  21.   .icicle{position:relative;height:330px;overflow:hidden;border:1px solid #dbe3ec;border-radius:10px;background:#f8fafc}
    22. 

  22.   .depths{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);pointer-events:none}.depths i{border-right:1px solid rgba(148,163,184,.18)}
    23. 

  23.   .layer-labels{display:grid;grid-template-columns:repeat(8,1fr);margin-bottom:5px;color:#94a3b8;font-size:7px;text-align:center}
    24. 

  24.   .block{position:absolute;border:1px solid rgba(255,255,255,.9);border-radius:3px;overflow:hidden;color:#fff;font-size:7px;font-weight:700;line-height:1.25;padding:3px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.04)}
    25. 

  25.   .block.cold{color:#475569}.hot{background:#ef4444}.rise{background:#f59e0b}.steady{background:#eab308}.mild{background:#60a5fa}.cold{background:#dbeafe}.zero{background:#f1f5f9;color:#64748b!important}
    26. 

  26.   .focus-ring{outline:3px solid #4338ca;outline-offset:-3px;z-index:4}
    27. 

  27.   .callout{position:absolute;right:9px;top:9px;width:170px;padding:8px;border:1px solid #bfdbfe;border-radius:8px;background:rgba(255,255,255,.94);color:#334155;font-size:7px;line-height:1.5;z-index:8}.callout b{display:block;color:#1d4ed8;font-size:8px}
    28. 

  28.   .matrix{display:grid;grid-template-columns:110px repeat(8,1fr);gap:3px;height:328px}.mhead,.rhead,.cell{display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:7px}.mhead{color:#94a3b8}.rhead{justify-content:flex-start;padding-left:7px;background:#f8fafc;color:#334155;font-weight:700}.cell{position:relative;overflow:hidden}.cell small{position:relative;color:inherit;font-size:6px}.cell:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.22))}
    29. 

  29.   .radial-wrap{display:flex;align-items:center;justify-content:center;height:330px}.radial{position:relative;width:315px;height:315px;border-radius:50%;background:conic-gradient(#ef4444 0 10deg,#f59e0b 10deg 32deg,#dbeafe 32deg 70deg,#60a5fa 70deg 100deg,#f1f5f9 100deg 135deg,#eab308 135deg 175deg,#dbeafe 175deg 230deg,#f59e0b 230deg 260deg,#60a5fa 260deg 295deg,#f1f5f9 295deg 360deg);box-shadow:inset 0 0 0 28px rgba(255,255,255,.75),inset 0 0 0 29px #fff,inset 0 0 0 62px rgba(255,255,255,.68),inset 0 0 0 63px #fff,inset 0 0 0 96px rgba(255,255,255,.6),inset 0 0 0 97px #fff}
    30. 

  30.   .radial:after{content:"全局需求树\\A 2,205 节点";white-space:pre;position:absolute;inset:112px;display:grid;place-items:center;text-align:center;border-radius:50%;background:#1e3a8a;color:#fff;font-size:10px;font-weight:700;line-height:1.5}
    31. 

  31.   .rlabel{position:absolute;padding:3px 5px;border-radius:4px;background:#fff;border:1px solid #dbe3ec;color:#334155;font-size:7px;box-shadow:0 3px 8px rgba(15,23,42,.08)}
    32. 

  32.   .why{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.why div{padding:8px;border-radius:7px;background:#eff6ff;color:#1e3a8a;font-size:7px;line-height:1.45}
    33. 

  33.   @media(max-width:950px){.body{grid-template-columns:1fr}.side{border-left:0;border-top:1px solid #e2e8f0}.matrix{grid-template-columns:80px repeat(8,minmax(35px,1fr));overflow:auto}}
    34. 

  34. </style>
    35. 

  35. 

  36. <div class="intro">
    37. 

  37.   <h2>深层级大树：怎样一眼看到全局热和冷？</h2>
    38. 

  38.   <p class="subtitle">这次不再把 2,205 个节点画成 2,205 个盒子。全局态只表达三件事：树的整体结构、热冷分布、热区在全树中的相对位置；节点名称和关系在放大或下钻后出现。</p>
    39. 

  39.   <div class="principle"><span>全量节点必须占有位置</span><span>冷区不能隐藏</span><span>面积表达分支规模</span><span>颜色只表达热冷</span><span>需求结果独立输出</span></div>
    40. 

  40. </div>
    41. 

  41. 

  42. <div class="options">
    43. 

  43.   <section class="option" data-choice="icicle" onclick="toggleSelect(this)">
    44. 

  44.     <div class="head"><div class="letter">A</div><div><h3>分层冰柱热力图</h3><p>横向是层级，纵向是完整分支；每个节点按子树规模占据面积，颜色显示热冷。</p></div><span class="recommended">最推荐</span></div>
    45. 

  45.     <div class="screen">
    46. 

  46.       <div class="appbar"><b>平台全局需求地图</b><div class="legend"><span><i class="hot"></i>高热</span><span><i class="rise"></i>升温</span><span><i class="steady"></i>稳定</span><span><i class="mild"></i>弱信号</span><span><i class="cold"></i>冷区</span><span><i class="zero"></i>暂无信号</span></div><small>点击任意区域放大该分支</small></div>
    47. 

  47.       <div class="body">
    48. 

  48.         <div class="viz">
    49. 

  49.           <div class="viz-title"><strong>完整树的热度地形</strong><span>所有节点都有面积，因此冷区不会消失</span></div>
    50. 

  50.           <div class="layer-labels"><span>根</span><span>一级</span><span>二级</span><span>三级</span><span>四级</span><span>五级</span><span>六级+</span><span>元素</span></div>
    51. 

  51.           <div class="icicle">
    52. 

  52.             <div class="depths"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
    53. 

  53.             <div class="block steady" style="left:0;top:0;width:12.5%;height:58%">表象</div>
    54. 

  54.             <div class="block steady" style="left:0;top:58%;width:12.5%;height:42%">理念</div>
    55. 

  55.             <div class="block rise" style="left:12.5%;top:0;width:12.5%;height:23%">行为</div>
    56. 

  56.             <div class="block cold" style="left:12.5%;top:23%;width:12.5%;height:7%">内容形态</div>
    57. 

  57.             <div class="block rise" style="left:12.5%;top:30%;width:12.5%;height:12%">场景</div>
    58. 

  58.             <div class="block zero" style="left:12.5%;top:42%;width:12.5%;height:5%">声音</div>
    59. 

  59.             <div class="block mild" style="left:12.5%;top:47%;width:12.5%;height:11%">实体</div>
    60. 

  60.             <div class="block rise" style="left:12.5%;top:58%;width:12.5%;height:25%">知识</div>
    61. 

  61.             <div class="block cold" style="left:12.5%;top:83%;width:12.5%;height:7%">现象</div>
    62. 

  62.             <div class="block steady" style="left:12.5%;top:90%;width:12.5%;height:6%">事件</div>
    63. 

  63.             <div class="block cold" style="left:12.5%;top:96%;width:12.5%;height:4%">观念</div>
    64. 

  64. 

  65.             <div class="block rise" style="left:25%;top:0;width:12.5%;height:8%">日常互动</div>
    66. 

  66.             <div class="block rise" style="left:25%;top:8%;width:12.5%;height:10%">日常活动</div>
    67. 

  67.             <div class="block zero" style="left:25%;top:18%;width:12.5%;height:5%">纪念活动</div>
    68. 

  68.             <div class="block hot" style="left:25%;top:23%;width:12.5%;height:7%">战斗作战</div>
    69. 

  69.             <div class="block rise" style="left:25%;top:30%;width:12.5%;height:7%">空间</div>
    70. 

  70.             <div class="block steady" style="left:25%;top:37%;width:12.5%;height:5%">时间</div>
    71. 

  71.             <div class="block cold" style="left:25%;top:42%;width:12.5%;height:5%">音乐 / 语音</div>
    72. 

  72.             <div class="block rise" style="left:25%;top:47%;width:12.5%;height:8%">人物</div>
    73. 

  73.             <div class="block mild" style="left:25%;top:55%;width:12.5%;height:3%">物品</div>
    74. 

  74.             <div class="block rise" style="left:25%;top:58%;width:12.5%;height:18%">概念</div>
    75. 

  75.             <div class="block rise" style="left:25%;top:76%;width:12.5%;height:7%">方法</div>
    76. 

  76.             <div class="block zero" style="left:25%;top:83%;width:12.5%;height:7%">生活状态</div>
    77. 

  77.             <div class="block rise" style="left:25%;top:90%;width:12.5%;height:6%">历史事件</div>
    78. 

  78.             <div class="block zero" style="left:25%;top:96%;width:12.5%;height:4%">社会 / 个人</div>
    79. 

  79. 

  80.             <div class="block hot focus-ring" style="left:37.5%;top:8%;width:12.5%;height:6%">居家生活</div>
    81. 

  81.             <div class="block rise" style="left:50%;top:8%;width:12.5%;height:2.8%">家务劳动</div>
    82. 

  82.             <div class="block steady" style="left:50%;top:10.8%;width:12.5%;height:1.5%">阅读</div>
    83. 

  83.             <div class="block cold" style="left:50%;top:12.3%;width:12.5%;height:1.7%">其他</div>
    84. 

  84.             <div class="block rise" style="left:62.5%;top:8%;width:12.5%;height:2.8%">家庭清洁</div>
    85. 

  85.             <div class="block zero" style="left:62.5%;top:10.8%;width:12.5%;height:1.5%">书本翻页</div>
    86. 

  86. 

  87.             <div class="block rise" style="left:37.5%;top:47%;width:12.5%;height:4%">现实人物</div>
    88. 

  88.             <div class="block steady" style="left:50%;top:47%;width:12.5%;height:3%">历史名人</div>
    89. 

  89.             <div class="block mild" style="left:62.5%;top:47%;width:12.5%;height:2%">政治领袖</div>
    90. 

  90.             <div class="block cold" style="left:75%;top:47%;width:12.5%;height:2%">共和国领导人</div>
    91. 

  91. 

  92.             <div class="block steady" style="left:37.5%;top:76%;width:12.5%;height:7%">生活技巧</div>
    93. 

  93.             <div class="block zero focus-ring" style="left:50%;top:76%;width:12.5%;height:3%">居家生活</div>
    94. 

  94.             <div class="block mild" style="left:62.5%;top:76%;width:12.5%;height:3%">驱蚊技巧</div>
    95. 

  95.             <div class="callout"><b>为什么这种图更适合？</b>热点是红橙色“岛屿”，冷区是连续的蓝白背景。你一眼先看到热点位置，再看它位于哪条层级路径；不需要阅读全部节点名。</div>
    96. 

  96.           </div>
    97. 

  97.           <div class="why"><div>全局态：只看热冷地形与分支规模</div><div>悬停态：显示节点名称、热度构成与 Reason</div><div>下钻态：点击区域，平滑放大该分支并显示子节点</div></div>
    98. 

  98.         </div>
    99. 

  99.         <aside class="side"><h4>系统提出的需求</h4><p>沿用 05 的卡片感。热力图负责发现，需求卡负责业务执行。</p>
    100. 

  100.           <div class="demand"><strong>家庭清洁的分步骤、省力技巧与常见误区</strong><p>来自：居家生活 → 家务劳动 → 家庭清洁。父级热度突出，元素语义具体，后验待验证。</p><em>形成需求</em></div>
    101. 

  101.           <div class="demand"><strong>具体居家场景下的驱蚊方法与风险提醒</strong><p>位于冷区，但问题明确、路径完整，可作为探索型需求小规模验证。</p><em>冷区候选</em></div>
    102. 

  102.           <div class="demand"><strong>“补充战争内容”不直接生成</strong><p>热度高但语义过宽，继续拆成人物、事件、策略、情感等具体问题。</p><em>需要拆解</em></div>
    103. 

  103.         </aside>
    104. 

  104.       </div>
    105. 

  105.     </div>
    106. 

  106.     <div class="foot">优势：最适合“层级深、每层节点多”的真实情况。没有成千上万条交叉线，全部节点仍保留位置；热和冷形成连续地形，视觉上也最接近 05 的克制感。</div>
    107. 

  107.   </section>
    108. 

  108. 

  109.   <section class="option" data-choice="matrix" onclick="toggleSelect(this)">
    110. 

  110.     <div class="head"><div class="letter">B</div><div><h3>分支 × 层级热力矩阵</h3><p>每一行是一个业务分支，每一列是树深度；先看哪里聚集热度，再点格子看节点。</p></div></div>
    111. 

  111.     <div class="screen">
    112. 

  112.       <div class="appbar"><b>全局分支热力矩阵</b><div class="legend"><span><i class="hot"></i>高热</span><span><i class="rise"></i>升温</span><span><i class="mild"></i>弱信号</span><span><i class="cold"></i>冷区</span></div><small>适合横向比较模块</small></div>
    113. 

  113.       <div class="body">
    114. 

  114.         <div class="viz"><div class="viz-title"><strong>业务分支与深度分布</strong><span>格子聚合该层节点，数字表示节点数量</span></div>
    115. 

  115.           <div class="matrix">
    116. 

  116.             <div></div><div class="mhead">根</div><div class="mhead">一级</div><div class="mhead">二级</div><div class="mhead">三级</div><div class="mhead">四级</div><div class="mhead">五级</div><div class="mhead">六级</div><div class="mhead">七级+</div>
    117. 

  117.             <div class="rhead">行为 / 日常活动</div><div class="cell steady"><small>1</small></div><div class="cell rise"><small>6</small></div><div class="cell rise"><small>18</small></div><div class="cell hot"><small>42</small></div><div class="cell rise"><small>86</small></div><div class="cell mild"><small>124</small></div><div class="cell cold"><small>91</small></div><div class="cell zero"><small>16</small></div>
    118. 

  118.             <div class="rhead">场景 / 空间</div><div class="cell steady"><small>1</small></div><div class="cell rise"><small>4</small></div><div class="cell rise"><small>12</small></div><div class="cell steady"><small>31</small></div><div class="cell mild"><small>58</small></div><div class="cell cold"><small>83</small></div><div class="cell cold"><small>66</small></div><div class="cell zero"><small>9</small></div>
    119. 

  119.             <div class="rhead">实体 / 人物</div><div class="cell steady"><small>1</small></div><div class="cell rise"><small>4</small></div><div class="cell rise"><small>15</small></div><div class="cell rise"><small>48</small></div><div class="cell steady"><small>97</small></div><div class="cell mild"><small>137</small></div><div class="cell cold"><small>122</small></div><div class="cell cold"><small>45</small></div>
    120. 

  120.             <div class="rhead">知识 / 概念</div><div class="cell steady"><small>1</small></div><div class="cell rise"><small>3</small></div><div class="cell hot"><small>21</small></div><div class="cell rise"><small>76</small></div><div class="cell rise"><small>144</small></div><div class="cell mild"><small>201</small></div><div class="cell cold"><small>168</small></div><div class="cell zero"><small>62</small></div>
    121. 

  121.             <div class="rhead">知识 / 方法</div><div class="cell steady"><small>1</small></div><div class="cell rise"><small>3</small></div><div class="cell rise"><small>12</small></div><div class="cell steady"><small>38</small></div><div class="cell cold"><small>70</small></div><div class="cell mild"><small>61</small></div><div class="cell cold"><small>36</small></div><div class="cell zero"><small>8</small></div>
    122. 

  122.             <div class="rhead">事件 / 历史</div><div class="cell steady"><small>1</small></div><div class="cell steady"><small>4</small></div><div class="cell rise"><small>13</small></div><div class="cell rise"><small>41</small></div><div class="cell mild"><small>68</small></div><div class="cell cold"><small>72</small></div><div class="cell zero"><small>38</small></div><div class="cell zero"><small>7</small></div>
    123. 

  123.             <div class="rhead">声音 / 内容形态</div><div class="cell steady"><small>1</small></div><div class="cell cold"><small>6</small></div><div class="cell zero"><small>17</small></div><div class="cell cold"><small>29</small></div><div class="cell zero"><small>31</small></div><div class="cell zero"><small>18</small></div><div class="cell zero"><small>7</small></div><div class="cell zero"><small>2</small></div>
    124. 

  124.           </div>
    125. 

  125.         </div>
    126. 

  126.         <aside class="side"><h4>当前热度集中区</h4><p>矩阵适合回答“哪个模块、哪一层最热”，但父子关系需要点击格子后再展示。</p>
    127. 

  127.           <div class="demand"><strong>三级至五级是当前需求形成密集区</strong><p>行为、人物、概念三个分支存在连续热度，需要优先提取更具体的问题。</p></div>
    128. 

  128.           <div class="demand"><strong>声音和内容形态整体偏冷</strong><p>不能直接判为无需求，需要检查是否因为上游元素和表现数据覆盖不足。</p></div>
    129. 

  129.         </aside>
    130. 

  130.       </div>
    131. 

  131.     </div>
    132. 

  132.     <div class="foot">优势：最容易比较不同大模块的冷热和热度出现在哪一层；不足：它更像分析图，树的真实父子结构不如 A 清晰。</div>
    133. 

  133.   </section>
    134. 

  134. 

  135.   <section class="option" data-choice="sunburst" onclick="toggleSelect(this)">
    136. 

  136.     <div class="head"><div class="letter">C</div><div><h3>全局旭日环图</h3><p>从圆心向外表达层级，完整分支围成一圈；热区形成醒目的扇形。</p></div></div>
    137. 

  137.     <div class="screen">
    138. 

  138.       <div class="appbar"><b>全局需求树环图</b><div class="legend"><span><i class="hot"></i>高热</span><span><i class="rise"></i>升温</span><span><i class="mild"></i>弱信号</span><span><i class="cold"></i>冷区</span></div><small>点击扇区进入分支</small></div>
    139. 

  139.       <div class="body">
    140. 

  140.         <div class="viz"><div class="viz-title"><strong>完整树环形概览</strong><span>越向外层级越深，扇区角度代表子树规模</span></div>
    141. 

  141.           <div class="radial-wrap"><div class="radial">
    142. 

  142.             <span class="rlabel" style="left:-30px;top:35px">行为 · 居家生活</span><span class="rlabel" style="right:-35px;top:65px">知识 · 概念</span><span class="rlabel" style="right:-20px;bottom:50px">事件 · 历史</span><span class="rlabel" style="left:-22px;bottom:55px">实体 · 人物</span>
    143. 

  143.           </div></div>
    144. 

  144.         </div>
    145. 

  145.         <aside class="side"><h4>热区需求摘要</h4><p>视觉整体性强，但深层标签和精确比较较困难。</p>
    146. 

  146.           <div class="demand"><strong>居家生活分支出现连续高热扇区</strong><p>进入后再展开家务劳动、个人护理、阅读等具体方向。</p></div>
    147. 

  147.           <div class="demand"><strong>知识分支规模最大但冷热交错</strong><p>需要下钻后才能判断是概念热还是具体方法热。</p></div>
    148. 

  148.         </aside>
    149. 

  149.       </div>
    150. 

  150.     </div>
    151. 

  151.     <div class="foot">优势：整体像一张完整地图，适合展示；不足：中文标签多、层级深时阅读成本高，而且不符合此前确定的从左到右阅读习惯。</div>
    152. 

  152.   </section>
    153. 

  153. </div>
    154.