|
|
@@ -0,0 +1,226 @@
|
|
|
+<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>
|