SupplyAgent/visualization/pages/node-drilldown-evidence-chain.html

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

<h2>分类节点继续下钻：元素—视频—语言—讨论—需求</h2>
<p class="subtitle">
  正式分类树到分类节点为止；节点下方挂载可持续扩展的证据子图。用户从树上继续下卷时，可以逐层看到具体元素、真实视频、明确观点和长段讨论。
</p>

<div class="stage">
<svg viewBox="0 0 1450 720" width="100%" style="min-width:1180px" role="img" aria-label="分类节点下钻证据链">
  <defs>
    <marker id="grayA" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#94a3b8"/></marker>
    <marker id="blueA" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#2563eb"/></marker>
    <marker id="greenA" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#16a34a"/></marker>
    <marker id="purpleA" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#7c3aed"/></marker>
    <marker id="orangeA" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8z" fill="#f59e0b"/></marker>
  </defs>

  <!-- headings -->
  <g font-family="sans-serif" fill="#64748b" font-size="13" text-anchor="middle">
    <text x="112" y="30">全局分类树</text>
    <text x="345" y="30">分类节点详情</text>
    <text x="590" y="30">细节元素</text>
    <text x="825" y="30">真实视频实例</text>
    <text x="1060" y="30">语言提取</text>
    <text x="1320" y="30">平台需求</text>
  </g>

  <!-- left-to-right primary flow -->
  <g fill="none" stroke="#94a3b8" stroke-width="2.4" marker-end="url(#grayA)">
    <path d="M190 170 L260 170"/>
    <path d="M430 170 L500 170"/>
    <path d="M680 170 L735 170"/>
    <path d="M920 170 L970 170"/>
  </g>
  <g fill="none" stroke="#f59e0b" stroke-width="2.8" marker-end="url(#orangeA)">
    <path d="M1160 135 C1210 122 1235 115 1260 115"/>
    <path d="M1160 205 C1210 228 1235 245 1260 255"/>
    <path d="M1160 485 C1210 447 1230 405 1260 390"/>
  </g>

  <!-- classification tree -->
  <g fill="none" stroke="#94a3b8" stroke-width="2">
    <path d="M105 92 L105 120 M105 120 L62 148 M105 120 L148 148"/>
    <path d="M148 188 L148 222 M148 222 L108 254 M148 222 L188 254"/>
  </g>
  <g font-family="sans-serif" text-anchor="middle">
    <rect x="55" y="58" width="100" height="36" rx="10" fill="#1d4ed8"/><text x="105" y="81" font-size="13" fill="#fff">知识</text>
    <rect x="20" y="148" width="84" height="40" rx="9" fill="#dbeafe" stroke="#60a5fa"/><text x="62" y="173" font-size="13">历史</text>
    <rect x="106" y="148" width="84" height="40" rx="9" fill="#dbeafe" stroke="#60a5fa"/><text x="148" y="173" font-size="13">人物故事</text>
    <rect x="66" y="254" width="84" height="40" rx="9" fill="#fff" stroke="#60a5fa"/><text x="108" y="279" font-size="12">个人经历</text>
    <rect x="152" y="254" width="84" height="40" rx="9" fill="#fff" stroke="#60a5fa"/><text x="194" y="279" font-size="12">名人故事</text>
  </g>

  <!-- category detail -->
  <g font-family="sans-serif">
    <rect x="260" y="70" width="170" height="200" rx="16" fill="#fff" stroke="#3b82f6" stroke-width="2"/>
    <text x="280" y="99" font-size="12" fill="#1d4ed8">正式分类节点</text>
    <text x="280" y="128" font-size="18" fill="#0f172a">人物故事</text>
    <text x="280" y="153" font-size="11" fill="#64748b">路径：事件 / 社会事件 / 人物故事</text>
    <line x1="280" y1="170" x2="410" y2="170" stroke="#e2e8f0"/>
    <text x="280" y="194" font-size="12" fill="#334155">下挂元素：137</text>
    <text x="280" y="216" font-size="12" fill="#334155">关联视频：2,438</text>
    <text x="280" y="238" font-size="12" fill="#334155">已提取需求：46</text>
    <text x="280" y="258" font-size="10" fill="#64748b">节点统计由下方证据逐层汇总</text>
  </g>

  <!-- element nodes -->
  <g fill="none" stroke="#2563eb" stroke-width="2.2" marker-end="url(#blueA)">
    <path d="M430 130 C470 116 480 99 500 94"/>
    <path d="M430 160 L500 160"/>
    <path d="M430 195 C470 211 480 228 500 232"/>
    <path d="M430 225 C470 255 480 300 500 310"/>
  </g>
  <g font-family="sans-serif" text-anchor="middle">
    <rect x="500" y="68" width="180" height="52" rx="12" fill="#eff6ff" stroke="#60a5fa"/>
    <text x="590" y="90" font-size="12" fill="#1d4ed8">人物元素</text><text x="590" y="108" font-size="14">毛泽东</text>
    <rect x="500" y="134" width="180" height="52" rx="12" fill="#eff6ff" stroke="#60a5fa"/>
    <text x="590" y="156" font-size="12" fill="#1d4ed8">事件元素</text><text x="590" y="174" font-size="14">抗日战争</text>
    <rect x="500" y="206" width="180" height="52" rx="12" fill="#eff6ff" stroke="#60a5fa"/>
    <text x="590" y="228" font-size="12" fill="#1d4ed8">事件元素</text><text x="590" y="246" font-size="14">解放战争</text>
    <rect x="500" y="284" width="180" height="52" rx="12" fill="#eff6ff" stroke="#60a5fa"/>
    <text x="590" y="306" font-size="12" fill="#1d4ed8">行为元素</text><text x="590" y="324" font-size="14">写诗 / 诗词创作</text>
  </g>

  <!-- element relations -->
  <g fill="none" stroke="#ef4444" stroke-width="1.9" stroke-dasharray="6 4">
    <path d="M590 120 L590 134"/>
    <path d="M620 120 C685 145 690 205 635 226"/>
    <path d="M590 258 L590 284"/>
  </g>
  <g font-family="sans-serif" fill="#b91c1c" font-size="10">
    <text x="600" y="131">关联</text>
    <text x="676" y="176">推断关系需说明</text>
    <text x="600" y="278">关联</text>
  </g>

  <!-- video instances -->
  <g fill="none" stroke="#16a34a" stroke-width="2.2" marker-end="url(#greenA)">
    <path d="M680 94 C715 94 715 100 735 100"/>
    <path d="M680 160 C715 160 715 170 735 170"/>
    <path d="M680 232 C715 232 715 240 735 240"/>
    <path d="M680 310 C715 310 715 310 735 310"/>
  </g>
  <g font-family="sans-serif">
    <rect x="735" y="66" width="185" height="68" rx="13" fill="#f0fdf4" stroke="#22c55e"/>
    <text x="750" y="89" font-size="11" fill="#15803d">视频 V-0182</text>
    <text x="750" y="109" font-size="12">《沁园春·雪》的时代背景</text>
    <text x="750" y="125" font-size="10" fill="#64748b">命中：毛泽东、写诗、历史背景</text>
    <rect x="735" y="142" width="185" height="68" rx="13" fill="#f0fdf4" stroke="#22c55e"/>
    <text x="750" y="165" font-size="11" fill="#15803d">视频 V-0276</text>
    <text x="750" y="185" font-size="12">抗战时期毛泽东诗词赏析</text>
    <text x="750" y="201" font-size="10" fill="#64748b">真实播放与互动表现可回流</text>
    <rect x="735" y="214" width="185" height="68" rx="13" fill="#f0fdf4" stroke="#22c55e"/>
    <text x="750" y="237" font-size="11" fill="#15803d">视频 V-0413</text>
    <text x="750" y="257" font-size="12">解放战争时期诗词主题变化</text>
    <text x="750" y="273" font-size="10" fill="#64748b">命中：解放战争、作品解读</text>
    <rect x="735" y="286" width="185" height="68" rx="13" fill="#f0fdf4" stroke="#22c55e"/>
    <text x="750" y="309" font-size="11" fill="#15803d">视频 V-0655</text>
    <text x="750" y="329" font-size="12">毛泽东为何在战争中写诗</text>
    <text x="750" y="345" font-size="10" fill="#64748b">可展开原文、转写与评论</text>
  </g>

  <!-- language extraction -->
  <g fill="none" stroke="#7c3aed" stroke-width="2.2" marker-end="url(#purpleA)">
    <path d="M920 100 C950 100 950 115 970 115"/>
    <path d="M920 170 C950 170 950 185 970 185"/>
    <path d="M920 240 C950 265 950 410 970 445"/>
    <path d="M920 320 C950 340 950 455 970 485"/>
  </g>
  <g font-family="sans-serif">
    <rect x="970" y="72" width="190" height="86" rx="13" fill="#faf5ff" stroke="#a855f7"/>
    <text x="987" y="96" font-size="11" fill="#7e22ce">明确语言观点</text>
    <text x="987" y="119" font-size="13">战争环境并未中断诗词创作，</text>
    <text x="987" y="139" font-size="13">反而强化了作品的历史表达。</text>

    <rect x="970" y="170" width="190" height="86" rx="13" fill="#faf5ff" stroke="#a855f7"/>
    <text x="987" y="194" font-size="11" fill="#7e22ce">可提问语言</text>
    <text x="987" y="217" font-size="13">毛泽东为什么在战争时期</text>
    <text x="987" y="237" font-size="13">持续进行诗词创作？</text>

    <rect x="970" y="386" width="190" height="150" rx="13" fill="#faf5ff" stroke="#a855f7"/>
    <text x="987" y="410" font-size="11" fill="#7e22ce">长段讨论</text>
    <text x="987" y="435" font-size="12">从抗日战争到解放战争，</text>
    <text x="987" y="454" font-size="12">诗词既记录时代环境，也呈现</text>
    <text x="987" y="473" font-size="12">政治理想、个人情感和历史判断。</text>
    <text x="987" y="492" font-size="12">不同视频对作品背景、表达方式</text>
    <text x="987" y="511" font-size="12">和受众理解给出了互补证据。</text>
  </g>

  <!-- demand nodes -->
  <g font-family="sans-serif">
    <rect x="1260" y="72" width="170" height="86" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="1277" y="96" font-size="11" fill="#9a3412">平台需求 D-101</text>
    <text x="1277" y="119" font-size="13">毛泽东为何在战争时期</text>
    <text x="1277" y="139" font-size="13">持续进行诗词创作</text>

    <rect x="1260" y="210" width="170" height="96" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="1277" y="234" font-size="11" fill="#9a3412">平台需求 D-102</text>
    <text x="1277" y="257" font-size="13">抗日战争与解放战争</text>
    <text x="1277" y="277" font-size="13">时期诗词主题的变化</text>
    <text x="1277" y="295" font-size="10" fill="#64748b">多挂靠：历史、人物故事、作品解读</text>

    <rect x="1260" y="344" width="170" height="96" rx="14" fill="#fff7ed" stroke="#f59e0b" stroke-width="2"/>
    <text x="1277" y="368" font-size="11" fill="#9a3412">平台需求 D-103</text>
    <text x="1277" y="391" font-size="13">毛泽东战争诗词如何</text>
    <text x="1277" y="411" font-size="13">表达历史判断与情感</text>
    <text x="1277" y="429" font-size="10" fill="#64748b">由多条视频与长段讨论共同支撑</text>
  </g>

  <!-- drill-down display -->
  <g font-family="sans-serif">
    <rect x="250" y="585" width="950" height="82" rx="15" fill="#fff" stroke="#cbd5e1"/>
    <text x="275" y="610" font-size="12" fill="#334155">页面下钻建议：</text>
    <text x="275" y="633" font-size="12" fill="#64748b">树节点默认展示数量与强度 → 点击展开高频元素 → 点击元素查看相关视频 → 点击视频查看转写、明确观点和长段讨论 → 查看由这些证据提取出的平台需求。</text>
    <text x="275" y="654" font-size="11" fill="#64748b">每一级都保留来源、出现次数、时间、贡献度和真实线上表现，避免展示内容与需求决策脱节。</text>
  </g>
</svg>
</div>

<div class="rules">
  <div class="rule"><strong>分类树保持纯净：</strong>元素、视频和文本不是正式分类层级，不占用 L6、L7；它们以证据子图形式挂在分类节点下。</div>
  <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 class="rule"><strong>逐层聚合：</strong>视频表现回流元素，元素回流分类节点和需求，使树上的数量与强度有真实内容支撑。</div>
</div>

<div class="summary">
  推荐模型：分类树是目录和坐标；元素是细节索引；视频是实例证据；短观点和长讨论是语言化解释；平台需求是从这些证据中抽取出的可执行结论。
</div>