Главная Обзор Помощь
Вход
howard
/
Agent
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: c8fe284577
Ветки Метки
Agent
/
knowhub
/
frontend
/
public
/
viz_capability.html

viz_capability.html 47 KB
История Исходник

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094 
  1. <!doctype html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8">
    5. 

  5. <title>能力 · 五层筛选</title>
    6. 

  6. <style>
    7. 

  7.   :root{
    8. 

  8.     --bg:#f8fafc; --panel:#ffffff; --panel2:#f1f5f9; --border:#e2e8f0;
    9. 

  9.     --fg:#0f172a; --muted:#64748b; --accent:#3b82f6; --accent2:#8b5cf6;
    10. 

  10.     --tag-bg:#e2e8f0; --tag-bg-active:#3b82f6; --tag-fg-active:#fff;
    11. 

  11.     --code:#f1f5f9; --warn:#eab308; --suggest:#8b5cf6; --inferred:#94a3b8;
    12. 

  12.     --shi-bg:#dbeafe; --shi-fg:#1e40af;
    13. 

  13.     --xing-bg:#ede9fe; --xing-fg:#6d28d9;
    14. 

  14.     --both-bg:#fef3c7; --both-fg:#92400e;
    15. 

  15.   }
    16. 

  16.   *{box-sizing:border-box}
    17. 

  17.   html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
    18. 

  18.     font:13px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif}
    19. 

  19.   header{display:flex;align-items:center;gap:12px;padding:8px 14px;
    20. 

  20.     border-bottom:1px solid var(--border);background:var(--panel);
    21. 

  21.     position:sticky;top:0;z-index:5;flex-wrap:wrap}
    22. 

  22.   h1{font-size:14px;margin:0;font-weight:600}
    23. 

  23.   .stats{color:var(--muted);font-size:11px}
    24. 

  24.   .clear-all{margin-left:auto;font-size:11px;color:var(--muted);cursor:pointer;
    25. 

  25.     padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:transparent}
    26. 

  26.   .clear-all:hover{color:var(--fg);border-color:var(--accent)}
    27. 

  27.   .clear-all.active{color:var(--warn);border-color:var(--warn)}
    28. 

  28. 

  29.   main{display:grid;grid-template-columns:160px 360px 220px 360px 1fr;
    30. 

  30.     height:calc(100vh - 41px);min-width:1520px}
    31. 

  31.   section{overflow:auto;border-right:1px solid var(--border);padding:8px 10px}
    32. 

  32.   section:last-child{border-right:none}
    33. 

  33.   section.fac1{background:var(--panel)}
    34. 

  34.   section.fac2{background:#fafbfd}
    35. 

  35.   section.fac3{background:var(--panel)}
    36. 

  36.   section.fac4{background:#fafbfd}
    37. 

  37.   section.detail{background:var(--panel)}
    38. 

  38. 

  39.   .col-title{font-size:10px;text-transform:uppercase;letter-spacing:.6px;
    40. 

  40.     color:var(--muted);margin:2px 4px 8px;display:flex;justify-content:space-between;align-items:baseline}
    41. 

  41.   .col-count{font-size:10px;color:var(--muted)}
    42. 

  42.   .col-clear{font-size:10px;color:var(--accent);cursor:pointer;display:none}
    43. 

  43.   .col-clear.show{display:inline}
    44. 

  44. 

  45.   .item{padding:6px 8px;border-radius:5px;cursor:pointer;margin-bottom:3px;
    46. 

  46.     border:1px solid transparent;display:flex;justify-content:space-between;align-items:center;gap:6px}
    47. 

  47.   .item:hover:not(.disabled):not(.active){background:var(--panel2)}
    48. 

  48.   .item.active{background:var(--tag-bg-active);color:var(--tag-fg-active);border-color:var(--tag-bg-active)}
    49. 

  49.   .item.disabled{opacity:.42;cursor:not-allowed}
    50. 

  50.   .item-name{flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    51. 

  51.   .item-count{font-size:10px;background:var(--bg);padding:1px 5px;border-radius:8px;
    52. 

  52.     color:var(--muted);min-width:20px;text-align:center;flex-shrink:0}
    53. 

  53.   .item.active .item-count{background:rgba(255,255,255,.3);color:#fff}
    54. 

  54.   .item-def{display:block;font-size:10px;color:var(--muted);margin-top:2px;line-height:1.4}
    55. 

  55.   .item.active .item-def{color:rgba(255,255,255,.85)}
    56. 

  56.   .item-stack{flex:1;min-width:0}
    57. 

  57. 

  58.   /* col-2 tabs */
    59. 

  59.   .scope-tabs{display:flex;gap:4px;margin:0 0 8px;border-bottom:1px solid var(--border);padding-bottom:5px}
    60. 

  60.   .scope-tab{padding:4px 10px;border-radius:5px 5px 0 0;cursor:pointer;
    61. 

  61.     font-size:12px;color:var(--muted);background:transparent;
    62. 

  62.     border:1px solid transparent;border-bottom:none;user-select:none}
    63. 

  63.   .scope-tab.active{color:var(--fg);background:var(--panel2);border-color:var(--border)}
    64. 

  64.   .scope-tab:hover:not(.active){color:var(--fg)}
    65. 

  65.   .scope-pane{display:none}
    66. 

  66.   .scope-pane.active{display:block}
    67. 

  67.   .scope-meta{font-size:10px;color:var(--muted);margin:0 4px 8px;line-height:1.4}
    68. 

  68. 

  69.   /* facets */
    70. 

  70.   .facet-title{margin-top:10px;padding:4px 6px;font-size:11px;color:var(--muted);
    71. 

  71.     font-weight:600;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.5px}
    72. 

  72.   .facet-title:first-child{margin-top:0}
    73. 

  73. 

  74.   /* itemsets */
    75. 

  75.   .iset{padding:8px 10px;border-radius:5px;cursor:pointer;margin-bottom:5px;
    76. 

  76.     border:1px solid var(--border);background:var(--panel)}
    77. 

  77.   .iset:hover:not(.disabled):not(.active){border-color:var(--accent)}
    78. 

  78.   .iset.active{border-color:var(--accent);background:#eff6ff;
    79. 

  79.     box-shadow:0 0 0 1px var(--accent) inset}
    80. 

  80.   .iset.disabled{opacity:.42;cursor:not-allowed}
    81. 

  81.   .iset-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
    82. 

  82.   .iset-sup{background:var(--accent);color:#fff;padding:1px 7px;border-radius:3px;
    83. 

  83.     font-weight:700;font-size:11px}
    84. 

  84.   .iset-k{background:var(--tag-bg);color:var(--fg);padding:1px 6px;border-radius:3px;
    85. 

  85.     font-size:10px;letter-spacing:.3px}
    86. 

  86.   .iset-meta{font-size:10px;color:var(--muted);margin-left:auto}
    87. 

  87.   .iset-paths{display:flex;flex-direction:column;gap:3px}
    88. 

  88.   .iset-path{display:flex;gap:5px;font-size:11px;line-height:1.4;align-items:flex-start}
    89. 

  89.   .iset-fdot{width:18px;flex-shrink:0;font-size:9px;font-weight:700;text-align:center;
    90. 

  90.     border-radius:3px;line-height:16px;height:16px;letter-spacing:0;margin-top:1px}
    91. 

  91.   .iset-fdot.shi{background:var(--shi-bg);color:var(--shi-fg)}
    92. 

  92.   .iset-fdot.xing{background:var(--xing-bg);color:var(--xing-fg)}
    93. 

  93.   .iset-fdot.both{background:var(--both-bg);color:var(--both-fg)}
    94. 

  94.   .iset-leaf{font-weight:600;color:var(--fg);word-break:break-all}
    95. 

  95.   .iset-parent{color:var(--muted);font-size:10px;margin-top:1px;
    96. 

  96.     word-break:break-all;line-height:1.3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    97. 

  97.   .iset-caret{width:14px;display:inline-block;text-align:center;color:var(--muted);
    98. 

  98.     cursor:pointer;user-select:none;flex-shrink:0;font-size:10px}
    99. 

  99.   .iset-caret:hover{color:var(--fg)}
    100. 

  100.   .iset-caret.invis{visibility:hidden}
    101. 

  101.   .iset-children{margin-left:14px;border-left:1px dashed var(--border);padding-left:8px;
    102. 

  102.     margin-top:-2px;margin-bottom:5px}
    103. 

  103.   .iset-childcnt{font-size:10px;color:var(--muted);margin-left:4px}
    104. 

  104. 

  105.   /* tree */
    106. 

  106.   .tnode{margin-left:0}
    107. 

  107.   .tnode .tnode{margin-left:12px;border-left:1px dashed var(--border);padding-left:6px}
    108. 

  108.   .tline{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:4px;
    109. 

  109.     cursor:pointer;font-size:12px;line-height:1.35}
    110. 

  110.   .tline:hover:not(.disabled):not(.active){background:var(--panel2)}
    111. 

  111.   .tline.active{background:var(--tag-bg-active);color:var(--tag-fg-active)}
    112. 

  112.   .tline.disabled{opacity:.42;cursor:not-allowed}
    113. 

  113.   .tline.suggested .tname{color:var(--suggest);font-style:italic}
    114. 

  114.   .tline.suggested.active .tname{color:#fff}
    115. 

  115.   .tline.inferred .tname{color:var(--inferred);font-style:italic}
    116. 

  116.   .tline.inferred.active .tname{color:#fff}
    117. 

  117.   .tcaret{width:12px;display:inline-block;text-align:center;color:var(--muted);
    118. 

  118.     cursor:pointer;user-select:none;flex-shrink:0;font-size:10px}
    119. 

  119.   .tcaret.invis{visibility:hidden}
    120. 

  120.   .tname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    121. 

  121.   .tcount{font-size:10px;color:var(--muted);background:var(--bg);padding:1px 5px;border-radius:8px;flex-shrink:0}
    122. 

  122.   .tline.active .tcount{background:rgba(255,255,255,.3);color:#fff}
    123. 

  123.   .tcollapsed > .tnode{display:none}
    124. 

  124. 

  125.   /* col-4 frag view tabs */
    126. 

  126.   .fv-tabs{display:flex;gap:4px;margin:0 0 6px;border-bottom:1px solid var(--border);padding-bottom:3px}
    127. 

  127.   .fv-tab{padding:3px 10px;border-radius:4px 4px 0 0;cursor:pointer;
    128. 

  128.     font-size:11px;color:var(--muted);background:transparent;
    129. 

  129.     border:1px solid transparent;border-bottom:none;user-select:none}
    130. 

  130.   .fv-tab.active{color:var(--fg);background:var(--panel2);border-color:var(--border)}
    131. 

  131.   .fv-tab:hover:not(.active){color:var(--fg)}
    132. 

  132. 

  133.   /* fragments */
    134. 

  134.   .frag{padding:7px 9px;border-radius:5px;cursor:pointer;margin-bottom:4px;
    135. 

  135.     border:1px solid var(--border);background:var(--panel)}
    136. 

  136.   .frag:hover:not(.active){background:var(--panel2)}
    137. 

  137.   .frag.active{border-color:var(--accent);background:#eff6ff}
    138. 

  138.   .frag-head{font-size:10px;color:var(--muted);margin-bottom:3px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
    139. 

  139.   .case-badge{background:var(--accent);color:#fff;padding:1px 5px;border-radius:3px;
    140. 

  140.     font-weight:600;font-size:10px}
    141. 

  141.   .frag-badge{background:var(--accent2);color:#fff;padding:1px 5px;border-radius:3px;
    142. 

  142.     font-weight:600;font-size:10px}
    143. 

  143.   .act-badge{background:var(--warn);color:#fff;padding:1px 5px;border-radius:3px;
    144. 

  144.     font-weight:600;font-size:10px}
    145. 

  145.   .side-badge{padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
    146. 

  146.   .side-badge.shi{background:var(--shi-bg);color:var(--shi-fg)}
    147. 

  147.   .side-badge.xing{background:var(--xing-bg);color:var(--xing-fg)}
    148. 

  148.   .src-badge{background:var(--suggest);color:#fff;padding:1px 5px;border-radius:3px;
    149. 

  149.     font-size:10px;font-weight:600}
    150. 

  150.   .frag-sig{font-size:11px;color:var(--muted);margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    151. 

  151.   .frag-body{font-size:12px;color:#334155;margin-top:4px;line-height:1.45;
    152. 

  152.     display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    153. 

  153. 

  154.   /* excerpt rows */
    155. 

  155.   .excerpt-row{padding:7px 9px;border-radius:5px;cursor:pointer;margin-bottom:4px;
    156. 

  156.     border:1px solid var(--border);background:var(--panel)}
    157. 

  157.   .excerpt-row:hover:not(.active){background:var(--panel2)}
    158. 

  158.   .excerpt-row.active{border-color:var(--accent);background:#eff6ff}
    159. 

  159.   .excerpt-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
    160. 

  160.     color:var(--accent);margin-top:4px;word-break:break-all;line-height:1.35}
    161. 

  161.   .excerpt-main{font-size:12.5px;color:var(--fg);margin-top:4px;line-height:1.5}
    162. 

  162.   .excerpt-note{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}
    163. 

  163.   .excerpt-body{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45;
    164. 

  164.     display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    165. 

  165. 

  166.   /* structured tab */
    167. 

  167.   .frag-excerpts{display:flex;flex-direction:column;gap:4px;margin-top:4px}
    168. 

  168.   .frag-excerpts .ex{font-size:12px;color:#334155;line-height:1.55;
    169. 

  169.     background:var(--code);padding:5px 8px;border-radius:4px;
    170. 

  170.     border-left:2px solid var(--accent2)}
    171. 

  171.   .frag-excerpts.empty{font-size:12px;color:var(--muted);font-style:italic;
    172. 

  172.     background:var(--code);padding:5px 8px;border-radius:4px}
    173. 

  173. 

  174.   /* detail */
    175. 

  175.   .detail-empty{color:var(--muted);text-align:center;padding:60px 20px;font-size:13px}
    176. 

  176.   .detail h2{font-size:14px;margin:0 0 8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
    177. 

  177.   .detail-section{margin:12px 0}
    178. 

  178.   .detail-section h3{font-size:10px;color:var(--muted);text-transform:uppercase;
    179. 

  179.     letter-spacing:.6px;margin:0 0 6px;font-weight:600}
    180. 

  180.   .body-text{font-size:12px;line-height:1.6;color:#334155;background:var(--code);
    181. 

  181.     padding:8px 10px;border-radius:5px;white-space:pre-wrap}
    182. 

  182.   .effect-card{background:var(--code);border-radius:5px;padding:7px 9px;margin-bottom:5px;
    183. 

  183.     border-left:3px solid var(--accent2);font-size:12px}
    184. 

  184.   .effect-stmt{font-weight:600;margin-bottom:4px}
    185. 

  185.   .effect-meta{color:var(--muted);font-size:11px;margin-top:3px}
    186. 

  186.   .pill{display:inline-block;padding:1px 6px;background:var(--tag-bg);border-radius:8px;
    187. 

  187.     font-size:11px;margin-right:3px;margin-bottom:3px}
    188. 

  188.   .pill.in{background:var(--shi-bg);color:var(--shi-fg)}
    189. 

  189.   .pill.out{background:var(--xing-bg);color:var(--xing-fg)}
    190. 

  190.   .pill.cfg{background:var(--both-bg);color:var(--both-fg)}
    191. 

  191.   .io-row{margin-bottom:4px;font-size:11px}
    192. 

  192.   .io-row .lbl{color:var(--muted);font-size:10px;margin-right:6px;text-transform:uppercase}
    193. 

  193.   .pathline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
    194. 

  194.     color:var(--accent);margin-bottom:2px;word-break:break-all}
    195. 

  195.   .pathline.suggest{color:var(--suggest)}
    196. 

  196.   .rationale{color:var(--muted);font-size:11px;margin-bottom:3px;margin-left:4px;line-height:1.45}
    197. 

  197.   .excerpt-line{color:var(--muted);font-size:11px;margin-left:4px;line-height:1.45;margin-bottom:6px;
    198. 

  198.     border-left:2px solid var(--border);padding-left:6px}
    199. 

  199.   .excerpt-line .em{color:#334155}
    200. 

  200.   .json-raw{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
    201. 

  201.     background:var(--code);padding:8px;border-radius:5px;white-space:pre-wrap;
    202. 

  202.     color:#334155;max-height:240px;overflow:auto}
    203. 

  203.   details summary{cursor:pointer;color:var(--muted);font-size:10px;margin:6px 0;user-select:none}
    204. 

  204.   details summary:hover{color:var(--fg)}
    205. 

  205. 

  206.   /* case-detail (original-post) section in detail panel */
    207. 

  207.   .case-detail{margin:8px 0;padding-bottom:8px;border-bottom:1px solid var(--border)}
    208. 

  208.   .case-detail summary{font-weight:bold;color:var(--accent);padding:6px 8px;
    209. 

  209.     background:var(--panel2);border-radius:4px;font-size:11px;cursor:pointer;outline:none;margin:0}
    210. 

  210.   .case-content{padding:10px;background:var(--code);border-radius:5px;
    211. 

  211.     margin-top:4px;border:1px solid var(--border)}
    212. 

  212.   .case-images{display:flex;gap:8px;overflow-x:auto;margin-bottom:8px;padding-bottom:4px}
    213. 

  213.   .case-images img{height:160px;border-radius:5px;object-fit:contain;
    214. 

  214.     background:var(--panel2);border:1px solid var(--border)}
    215. 

  215.   .case-body{font-size:12px;line-height:1.6;color:var(--fg);white-space:pre-wrap;
    216. 

  216.     margin-bottom:10px;max-height:250px;overflow-y:auto;padding-right:4px}
    217. 

  217.   .case-link{font-size:11px;color:var(--accent);display:inline-block;
    218. 

  218.     background:var(--panel2);padding:4px 8px;border-radius:4px;text-decoration:none}
    219. 

  219.   .case-feedback{font-size:11px;color:var(--muted);margin-bottom:6px;display:flex;gap:12px;flex-wrap:wrap}
    220. 

  220.   .case-feedback .fb{display:inline-flex;gap:3px;align-items:center}
    221. 

  221.   .case-author{font-size:11px;color:var(--muted);margin-bottom:6px}
    222. 

  222. 

  223.   .empty-msg{color:var(--muted);text-align:center;padding:30px 10px;font-size:11px;font-style:italic}
    224. 

  224. 

  225.   /* modality side filter */
    226. 

  226.   .mod-filter{margin:0 4px 8px;padding:6px 6px 4px;background:var(--code);
    227. 

  227.     border:1px solid var(--border);border-radius:5px}
    228. 

  228.   .mod-filter-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
    229. 

  229.   .mod-filter-row:last-child{margin-bottom:0}
    230. 

  230.   .mod-filter-lbl{font-size:10px;color:var(--muted);min-width:42px;flex-shrink:0}
    231. 

  231.   .mod-chips{display:flex;gap:4px;flex-wrap:wrap}
    232. 

  232.   .mod-chip{font-size:11px;padding:1px 7px;background:var(--tag-bg);border-radius:8px;
    233. 

  233.     cursor:pointer;color:var(--fg);user-select:none;border:1px solid transparent}
    234. 

  234.   .mod-chip:hover:not(.disabled):not(.active){background:var(--panel2);border-color:var(--border)}
    235. 

  235.   .mod-chip.active{background:var(--tag-bg-active);color:var(--tag-fg-active)}
    236. 

  236.   .mod-chip.disabled{opacity:.42;cursor:not-allowed}
    237. 

  237. 

  238.   /* selection summary chip */
    239. 

  239.   .filter-chip{font-size:11px;padding:3px 8px;background:var(--tag-bg);border-radius:10px;
    240. 

  240.     color:var(--fg);display:inline-flex;align-items:center;gap:6px;margin-right:4px}
    241. 

  241.   .filter-chip .x{color:var(--muted);cursor:pointer;font-weight:bold}
    242. 

  242.   .filter-chip .x:hover{color:var(--warn)}
    243. 

  243.   .filter-chip .lbl{color:var(--muted);font-size:9px;text-transform:uppercase}
    244. 

  244. 

  245.   .loading{display:flex;align-items:center;justify-content:center;
    246. 

  246.     height:100vh;font-size:14px;color:var(--muted)}
    247. 

  247. </style>
    248. 

  248. </head>
    249. 

  249. <body>
    250. 

  250. 

  251. <div id="loading" class="loading">加载能力数据中…</div>
    252. 

  252. 

  253. <div id="appRoot" style="display:none">
    254. 

  254. <header>
    255. 

  255.   <h1>能力</h1>
    256. 

  256.   <span id="chips"></span>
    257. 

  257.   <button class="clear-all" id="clearAll">清除全部筛选</button>
    258. 

  258. </header>
    259. 

  259. 

  260. <main>
    261. 

  261.   <section class="fac1" id="actCol">
    262. 

  262.     <div class="col-title"><span>① 动作</span><span class="col-count" id="actCnt"></span></div>
    263. 

  263.     <div id="actList"></div>
    264. 

  264.   </section>
    265. 

  265.   <section class="fac2" id="scopeCol">
    266. 

  266.     <div class="col-title">
    267. 

  267.       <span>② 作用域</span>
    268. 

  268.       <span class="col-count" id="scopeStat"></span>
    269. 

  269.     </div>
    270. 

  270.     <div class="scope-tabs">
    271. 

  271.       <div class="scope-tab" data-mode="node" id="tabNode">node · 内容树</div>
    272. 

  272.       <div class="scope-tab" data-mode="pattern" id="tabPattern">pattern · 频繁项集</div>
    273. 

  273.       <span class="col-clear" id="scopeClear" style="margin-left:auto;align-self:center">清除</span>
    274. 

  274.     </div>
    275. 

  275. 

  276.     <div class="scope-pane" id="paneNode">
    277. 

  277.       <div class="facet-title">实质</div>
    278. 

  278.       <div id="shizhiTree"></div>
    279. 

  279.       <div class="facet-title">形式</div>
    280. 

  280.       <div id="xingshiTree"></div>
    281. 

  281.     </div>
    282. 

  282. 

  283.     <div class="scope-pane" id="panePattern">
    284. 

  284.       <div class="scope-meta" id="isParams"></div>
    285. 

  285.       <div id="isList"></div>
    286. 

  286.     </div>
    287. 

  287.   </section>
    288. 

  288.   <section class="fac3" id="modCol">
    289. 

  289.     <div class="col-title"><span>③ 输入 → 输出模态</span><span class="col-clear" id="modClear">清除</span></div>
    290. 

  290.     <div class="mod-filter">
    291. 

  291.       <div class="mod-filter-row">
    292. 

  292.         <span class="mod-filter-lbl">输入含</span>
    293. 

  293.         <span class="mod-chips" id="modInChips"></span>
    294. 

  294.       </div>
    295. 

  295.       <div class="mod-filter-row">
    296. 

  296.         <span class="mod-filter-lbl">输出含</span>
    297. 

  297.         <span class="mod-chips" id="modOutChips"></span>
    298. 

  298.       </div>
    299. 

  299.     </div>
    300. 

  300.     <div id="modList"></div>
    301. 

  301.   </section>
    302. 

  302.   <section class="fac4" id="fragCol">
    303. 

  303.     <div class="col-title"><span id="fragColTitle">④ 原子能力</span><span class="col-count" id="fragCnt"></span></div>
    304. 

  304.     <div class="fv-tabs" id="fvTabs" style="display:none">
    305. 

  305.       <div class="fv-tab" data-view="raw" id="fvRaw">raw</div>
    306. 

  306.       <div class="fv-tab" data-view="structured" id="fvStructured">structured</div>
    307. 

  307.     </div>
    308. 

  308.     <div id="fragList"></div>
    309. 

  309.   </section>
    310. 

  310.   <section class="detail" id="detailCol">
    311. 

  311.     <div class="col-title"><span>⑤ 能力详情</span></div>
    312. 

  312.     <div id="detailBody"><div class="detail-empty">点击左侧能力查看详情</div></div>
    313. 

  313.   </section>
    314. 

  314. </main>
    315. 

  315. </div>
    316. 

  316. 

  317. <script>
    318. 

  318. let data = null;
    319. 

  319. let casesByIndex = {};
    320. 

  320. let SIDE_MODS = null;
    321. 

  321. let shiDesc = null;
    322. 

  322. let xingDesc = null;
    323. 

  323. const fragPaths = new Map();
    324. 

  324. 

  325. const state = {
    326. 

  326.   action: null,
    327. 

  327.   scopeMode: 'node',
    328. 

  328.   shizhiPath: null,
    329. 

  329.   xingshiPath: null,
    330. 

  330.   itemsetIdx: null,
    331. 

  331.   patternView: 'raw',
    332. 

  332.   modSig: null,
    333. 

  333.   modInFilter: new Set(),
    334. 

  334.   modOutFilter: new Set(),
    335. 

  335.   fragKey: null,
    336. 

  336.   collapsed: new Set(),
    337. 

  337.   isetExpanded: new Set(),
    338. 

  338. };
    339. 

  339. 

  340. function $(id){return document.getElementById(id)}
    341. 

  341. function el(tag, attrs, ...kids){
    342. 

  342.   const e = document.createElement(tag);
    343. 

  343.   if (attrs) for (const k in attrs){
    344. 

  344.     if (k === 'class') e.className = attrs[k];
    345. 

  345.     else if (k === 'onClick') e.addEventListener('click', attrs[k]);
    346. 

  346.     else if (k.startsWith('data-')) e.setAttribute(k, attrs[k]);
    347. 

  347.     else if (k === 'title') e.title = attrs[k];
    348. 

  348.     else if (k === 'style') e.setAttribute('style', attrs[k]);
    349. 

  349.     else e[k] = attrs[k];
    350. 

  350.   }
    351. 

  351.   for (const kid of kids){
    352. 

  352.     if (kid == null || kid === false) continue;
    353. 

  353.     if (typeof kid === 'string') e.appendChild(document.createTextNode(kid));
    354. 

  354.     else e.appendChild(kid);
    355. 

  355.   }
    356. 

  356.   return e;
    357. 

  357. }
    358. 

  358. 

  359. const fragKey = f => f.case_index + ':' + f.fragment_id;
    360. 

  360. 

  361. function sigParts(sig){
    362. 

  362.   const [inS, outS] = sig.split(' → ');
    363. 

  363.   const parse = s => new Set(s.split('+').filter(x => x && x !== '∅'));
    364. 

  364.   return { in: parse(inS), out: parse(outS) };
    365. 

  365. }
    366. 

  366. 

  367. function buildDescMap(roots){
    368. 

  368.   const map = new Map();
    369. 

  369.   function walk(node){
    370. 

  370.     const all = [node.path];
    371. 

  371.     for (const c of node.children || []){
    372. 

  372.       const sub = walk(c);
    373. 

  373.       for (const p of sub) all.push(p);
    374. 

  374.     }
    375. 

  375.     map.set(node.path, all);
    376. 

  376.     return all;
    377. 

  377.   }
    378. 

  378.   for (const r of roots) walk(r);
    379. 

  379.   return map;
    380. 

  380. }
    381. 

  381. 

  382. function fragPathSet(f){
    383. 

  383.   const s = new Set();
    384. 

  384.   for (const e of (f.apply_shizhi || [])) if (e.category_path) s.add(e.category_path);
    385. 

  385.   for (const e of (f.apply_xingshi || [])) if (e.category_path) s.add(e.category_path);
    386. 

  386.   return s;
    387. 

  387. }
    388. 

  388. 

  389. function fragMatchesPath(f, key, selPath, descMap){
    390. 

  390.   if (!selPath) return true;
    391. 

  391.   const allowed = new Set(descMap.get(selPath) || [selPath]);
    392. 

  392.   const list = (key === 'shizhi') ? f.apply_shizhi : f.apply_xingshi;
    393. 

  393.   for (const e of (list || [])){
    394. 

  394.     if (allowed.has(e.category_path)) return true;
    395. 

  395.   }
    396. 

  396.   return false;
    397. 

  397. }
    398. 

  398. 

  399. function fragMatchesItemset(f, itemset){
    400. 

  400.   if (!itemset) return true;
    401. 

  401.   const ps = fragPaths.get(fragKey(f));
    402. 

  402.   for (const p of itemset.items) if (!ps.has(p)) return false;
    403. 

  403.   return true;
    404. 

  404. }
    405. 

  405. 

  406. function scopeFilterActive(){
    407. 

  407.   if (state.scopeMode === 'node') return !!(state.shizhiPath || state.xingshiPath);
    408. 

  408.   if (state.scopeMode === 'pattern') return state.itemsetIdx != null;
    409. 

  409.   return false;
    410. 

  410. }
    411. 

  411. 

  412. function applyFilters(except){
    413. 

  413.   return data.fragments.filter(f => {
    414. 

  414.     if (except !== 'action' && state.action && f.action !== state.action) return false;
    415. 

  415.     if (except !== 'scope' && scopeFilterActive()){
    416. 

  416.       if (state.scopeMode === 'node'){
    417. 

  417.         if (state.shizhiPath && !fragMatchesPath(f, 'shizhi', state.shizhiPath, shiDesc)) return false;
    418. 

  418.         if (state.xingshiPath && !fragMatchesPath(f, 'xingshi', state.xingshiPath, xingDesc)) return false;
    419. 

  419.       } else if (state.scopeMode === 'pattern'){
    420. 

  420.         const sel = data.itemsets[state.itemsetIdx];
    421. 

  421.         if (sel && !fragMatchesItemset(f, sel)) return false;
    422. 

  422.       }
    423. 

  423.     }
    424. 

  424.     if (except !== 'mod' && state.modSig && f.modality_signature !== state.modSig) return false;
    425. 

  425.     return true;
    426. 

  426.   });
    427. 

  427. }
    428. 

  428. 

  429. function renderActions(){
    430. 

  430.   const baseFiltered = applyFilters('action');
    431. 

  431.   const counts = {};
    432. 

  432.   for (const f of baseFiltered) counts[f.action] = (counts[f.action]||0)+1;
    433. 

  433.   const wrap = $('actList'); wrap.innerHTML = '';
    434. 

  434.   for (const a of data.actions){
    435. 

  435.     const c = counts[a.verb] || 0;
    436. 

  436.     const node = el('div', {
    437. 

  437.       class: 'item' + (state.action === a.verb ? ' active' : '') + (c === 0 && state.action !== a.verb ? ' disabled' : ''),
    438. 

  438.       onClick: () => {
    439. 

  439.         if (c === 0 && state.action !== a.verb) return;
    440. 

  440.         state.action = (state.action === a.verb) ? null : a.verb;
    441. 

  441.         renderAll();
    442. 

  442.       }
    443. 

  443.     });
    444. 

  444.     const stack = el('div', {class:'item-stack'},
    445. 

  445.       el('div', {class:'item-name'}, a.verb),
    446. 

  446.       a.definition ? el('div', {class:'item-def'}, a.definition) : null);
    447. 

  447.     node.appendChild(stack);
    448. 

  448.     node.appendChild(el('span', {class:'item-count'}, String(c)));
    449. 

  449.     wrap.appendChild(node);
    450. 

  450.   }
    451. 

  451.   $('actCnt').textContent = '共 ' + data.actions.length + ' 个';
    452. 

  452. }
    453. 

  453. 

  454. function renderTreeFacet(roots, key, mountId, selPath, descMap){
    455. 

  455.   const wrap = $(mountId); wrap.innerHTML = '';
    456. 

  456.   const baseFiltered = applyFilters('scope');
    457. 

  457.   const hitCounts = new Map();
    458. 

  458.   for (const f of baseFiltered){
    459. 

  459.     const list = (key === 'shizhi') ? f.apply_shizhi : f.apply_xingshi;
    460. 

  460.     const seen = new Set();
    461. 

  461.     for (const e of (list || [])){
    462. 

  462.       const parts = (e.category_path || '').split('/').filter(Boolean);
    463. 

  463.       for (let i = 1; i <= parts.length; i++){
    464. 

  464.         const p = '/' + parts.slice(0,i).join('/');
    465. 

  465.         if (seen.has(p)) continue;
    466. 

  466.         seen.add(p);
    467. 

  467.       }
    468. 

  468.     }
    469. 

  469.     for (const p of seen) hitCounts.set(p, (hitCounts.get(p)||0)+1);
    470. 

  470.   }
    471. 

  471.   function renderNode(node, parent){
    472. 

  472.     const c = hitCounts.get(node.path) || 0;
    473. 

  473.     const collapsed = state.collapsed.has(node.path);
    474. 

  474.     const hasChildren = (node.children || []).length > 0;
    475. 

  475.     const tnode = el('div', {class: 'tnode' + (collapsed ? ' tcollapsed' : '')});
    476. 

  476.     const cls = ['tline'];
    477. 

  477.     if (selPath === node.path) cls.push('active');
    478. 

  478.     if (c === 0 && selPath !== node.path) cls.push('disabled');
    479. 

  479.     if (node.is_suggested && !node.is_hit) cls.push('suggested');
    480. 

  480.     if (node.is_inferred) cls.push('inferred');
    481. 

  481.     const line = el('div', {class: cls.join(' '), title: node.path + (node.description ? '\n\n' + node.description : '')});
    482. 

  482.     const caret = el('span', {
    483. 

  483.       class: 'tcaret' + (hasChildren ? '' : ' invis'),
    484. 

  484.       onClick: (ev) => {
    485. 

  485.         ev.stopPropagation();
    486. 

  486.         if (state.collapsed.has(node.path)) state.collapsed.delete(node.path);
    487. 

  487.         else state.collapsed.add(node.path);
    488. 

  488.         renderTrees();
    489. 

  489.       }
    490. 

  490.     }, hasChildren ? (collapsed ? '▶' : '▼') : '·');
    491. 

  491.     line.appendChild(caret);
    492. 

  492.     let label = node.name;
    493. 

  493.     if (node.is_suggested && !node.is_hit) label += ' ✦';
    494. 

  494.     if (node.is_inferred) label += ' (推断)';
    495. 

  495.     line.appendChild(el('span', {class:'tname'}, label));
    496. 

  496.     line.appendChild(el('span', {class:'tcount'}, String(c)));
    497. 

  497.     line.addEventListener('click', () => {
    498. 

  498.       if (c === 0 && selPath !== node.path) return;
    499. 

  499.       const k = (key === 'shizhi') ? 'shizhiPath' : 'xingshiPath';
    500. 

  500.       state[k] = (state[k] === node.path) ? null : node.path;
    501. 

  501.       renderAll();
    502. 

  502.     });
    503. 

  503.     tnode.appendChild(line);
    504. 

  504.     for (const ch of node.children || []) renderNode(ch, tnode);
    505. 

  505.     parent.appendChild(tnode);
    506. 

  506.   }
    507. 

  507.   for (const r of roots) renderNode(r, wrap);
    508. 

  508. }
    509. 

  509. 

  510. function renderTrees(){
    511. 

  511.   renderTreeFacet(data.subtree.shizhi || [], 'shizhi', 'shizhiTree', state.shizhiPath, shiDesc);
    512. 

  512.   renderTreeFacet(data.subtree.xingshi || [], 'xingshi', 'xingshiTree', state.xingshiPath, xingDesc);
    513. 

  513. }
    514. 

  514. 

  515. function pathLeafAndParent(p){
    516. 

  516.   const parts = p.split('/').filter(Boolean);
    517. 

  517.   if (!parts.length) return {leaf:p, parent:''};
    518. 

  518.   return {leaf: parts[parts.length-1], parent: '/' + parts.slice(0,-1).join('/')};
    519. 

  519. }
    520. 

  520. 

  521. function renderItemsets(){
    522. 

  522.   const wrap = $('isList'); wrap.innerHTML = '';
    523. 

  523.   const visibleIdxSet = new Set();
    524. 

  524.   data.itemsets.forEach((it, i) => { if (it.size >= 2) visibleIdxSet.add(i); });
    525. 

  525.   $('isParams').textContent = `${visibleIdxSet.size} closed · k≥2 · min_support=${data.itemsetsParams.min_support}, k≤${data.itemsetsParams.max_k}, leaf-only`;
    526. 

  526. 

  527.   const baseFiltered = applyFilters('scope');
    528. 

  528.   const roots = [];
    529. 

  529.   for (const i of visibleIdxSet){
    530. 

  530.     const ps = (data.itemsetParents[i] || []).filter(p => visibleIdxSet.has(p));
    531. 

  531.     if (!ps.length) roots.push(i);
    532. 

  532.   }
    533. 

  533.   roots.sort((a, b) => {
    534. 

  534.     const A = data.itemsets[a], B = data.itemsets[b];
    535. 

  535.     return (B.support - A.support) || (B.size - A.size) || a - b;
    536. 

  536.   });
    537. 

  537. 

  538.   for (const idx of roots){
    539. 

  539.     renderItemsetNode(idx, -1, wrap, baseFiltered, visibleIdxSet, new Set());
    540. 

  540.   }
    541. 

  541.   if (visibleIdxSet.size === 0){
    542. 

  542.     wrap.appendChild(el('div', {class:'empty-msg'}, '没有符合 k≥2 的项集'));
    543. 

  543.   }
    544. 

  544. }
    545. 

  545. 

  546. function renderItemsetNode(idx, parentIdx, mountEl, baseFiltered, visibleIdxSet, ancestorSet){
    547. 

  547.   const iset = data.itemsets[idx];
    548. 

  548.   const isActive = (state.itemsetIdx === idx);
    549. 

  549.   const occKey = parentIdx + ':' + idx;
    550. 

  550.   const childIdxs = (data.itemsetChildren[idx] || []).filter(c => visibleIdxSet.has(c) && !ancestorSet.has(c));
    551. 

  551.   const isExpanded = state.isetExpanded.has(occKey);
    552. 

  552.   const supportNow = baseFiltered.filter(f => fragMatchesItemset(f, iset)).length;
    553. 

  553. 

  554.   const cls = ['iset'];
    555. 

  555.   if (isActive) cls.push('active');
    556. 

  556.   if (supportNow === 0 && !isActive) cls.push('disabled');
    557. 

  557.   const node = el('div', {
    558. 

  558.     class: cls.join(' '),
    559. 

  559.     onClick: () => {
    560. 

  560.       if (supportNow === 0 && !isActive) return;
    561. 

  561.       state.itemsetIdx = isActive ? null : idx;
    562. 

  562.       renderAll();
    563. 

  563.     }
    564. 

  564.   });
    565. 

  565.   const caret = el('span', {
    566. 

  566.     class: 'iset-caret' + (childIdxs.length === 0 ? ' invis' : ''),
    567. 

  567.     title: childIdxs.length ? (isExpanded ? '折叠' : '展开 ' + childIdxs.length + ' 个超集') : '',
    568. 

  568.     onClick: (ev) => {
    569. 

  569.       ev.stopPropagation();
    570. 

  570.       if (!childIdxs.length) return;
    571. 

  571.       if (state.isetExpanded.has(occKey)) state.isetExpanded.delete(occKey);
    572. 

  572.       else state.isetExpanded.add(occKey);
    573. 

  573.       renderItemsets();
    574. 

  574.     }
    575. 

  575.   }, childIdxs.length ? (isExpanded ? '▼' : '▶') : '·');
    576. 

  576.   const head = el('div', {class:'iset-head'},
    577. 

  577.     caret,
    578. 

  578.     el('span', {class:'iset-sup', title:'当前筛选下的支持度'}, '×'+supportNow),
    579. 

  579.     el('span', {class:'iset-k'}, 'k='+iset.size),
    580. 

  580.     childIdxs.length ? el('span', {class:'iset-childcnt'}, '⊃'+childIdxs.length) : null,
    581. 

  581.     el('span', {class:'iset-meta'}, '原始 sup ' + iset.support)
    582. 

  582.   );
    583. 

  583.   node.appendChild(head);
    584. 

  584.   const paths = el('div', {class:'iset-paths'});
    585. 

  585.   for (const p of iset.items){
    586. 

  586.     const facet = data.pathToFacet[p] || '?';
    587. 

  587.     const dot =
    588. 

  588.       facet === '实质' ? el('span', {class:'iset-fdot shi', title:'实质'}, '实') :
    589. 

  589.       facet === '形式' ? el('span', {class:'iset-fdot xing', title:'形式'}, '形') :
    590. 

  590.                          el('span', {class:'iset-fdot both', title:'两侧都有'}, '双');
    591. 

  591.     const lp = pathLeafAndParent(p);
    592. 

  592.     const row = el('div', {class:'iset-path', title: p},
    593. 

  593.       dot,
    594. 

  594.       el('div', null,
    595. 

  595.         el('span', {class:'iset-leaf'}, lp.leaf),
    596. 

  596.         el('div', {class:'iset-parent'}, lp.parent)
    597. 

  597.       )
    598. 

  598.     );
    599. 

  599.     paths.appendChild(row);
    600. 

  600.   }
    601. 

  601.   node.appendChild(paths);
    602. 

  602.   mountEl.appendChild(node);
    603. 

  603. 

  604.   if (isExpanded && childIdxs.length){
    605. 

  605.     const childWrap = el('div', {class:'iset-children'});
    606. 

  606.     const newAnc = new Set(ancestorSet); newAnc.add(idx);
    607. 

  607.     const sortedChildren = [...childIdxs].sort((a, b) => {
    608. 

  608.       const A = data.itemsets[a], B = data.itemsets[b];
    609. 

  609.       return (B.support - A.support) || (B.size - A.size) || a - b;
    610. 

  610.     });
    611. 

  611.     for (const c of sortedChildren){
    612. 

  612.       renderItemsetNode(c, idx, childWrap, baseFiltered, visibleIdxSet, newAnc);
    613. 

  613.     }
    614. 

  614.     mountEl.appendChild(childWrap);
    615. 

  615.   }
    616. 

  616. }
    617. 

  617. 

  618. function renderScope(){
    619. 

  619.   $('tabNode').classList.toggle('active', state.scopeMode === 'node');
    620. 

  620.   $('tabPattern').classList.toggle('active', state.scopeMode === 'pattern');
    621. 

  621.   $('paneNode').classList.toggle('active', state.scopeMode === 'node');
    622. 

  622.   $('panePattern').classList.toggle('active', state.scopeMode === 'pattern');
    623. 

  623.   if (state.scopeMode === 'node') {
    624. 

  624.     $('scopeStat').textContent = '路径树（双 facet）';
    625. 

  625.   } else {
    626. 

  626.     const k2 = data.itemsets.filter(i => i.size >= 2).length;
    627. 

  627.     $('scopeStat').textContent = `${k2} 项集 · k≥2`;
    628. 

  628.   }
    629. 

  629.   $('scopeClear').classList.toggle('show', scopeFilterActive());
    630. 

  630.   if (state.scopeMode === 'node') renderTrees();
    631. 

  631.   else renderItemsets();
    632. 

  632. }
    633. 

  633. 

  634. function sigPassesChipFilter(sig){
    635. 

  635.   const p = sigParts(sig);
    636. 

  636.   for (const m of state.modInFilter) if (!p.in.has(m)) return false;
    637. 

  637.   for (const m of state.modOutFilter) if (!p.out.has(m)) return false;
    638. 

  638.   return true;
    639. 

  639. }
    640. 

  640. 

  641. function renderModalityChips(){
    642. 

  642.   const renderSide = (mountId, palette, selectedSet, side) => {
    643. 

  643.     const wrap = $(mountId); wrap.innerHTML = '';
    644. 

  644.     for (const m of palette){
    645. 

  645.       const trial = new Set(selectedSet);
    646. 

  646.       if (!trial.has(m)) trial.add(m);
    647. 

  647.       let c = 0;
    648. 

  648.       for (const sig of data.modalities){
    649. 

  649.         const p = sigParts(sig.sig);
    650. 

  650.         const inOK = side === 'in'
    651. 

  651.           ? [...trial].every(x => p.in.has(x)) && [...state.modOutFilter].every(x => p.out.has(x))
    652. 

  652.           : [...state.modInFilter].every(x => p.in.has(x)) && [...trial].every(x => p.out.has(x));
    653. 

  653.         if (inOK) c++;
    654. 

  654.       }
    655. 

  655.       const isActive = selectedSet.has(m);
    656. 

  656.       const chip = el('span', {
    657. 

  657.         class: 'mod-chip' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
    658. 

  658.         title: m + (c === 0 && !isActive ? ' (无匹配)' : ''),
    659. 

  659.         onClick: () => {
    660. 

  660.           if (c === 0 && !isActive) return;
    661. 

  661.           if (selectedSet.has(m)) selectedSet.delete(m);
    662. 

  662.           else selectedSet.add(m);
    663. 

  663.           if (state.modSig && !sigPassesChipFilter(state.modSig)) state.modSig = null;
    664. 

  664.           renderAll();
    665. 

  665.         }
    666. 

  666.       }, m);
    667. 

  667.       wrap.appendChild(chip);
    668. 

  668.     }
    669. 

  669.   };
    670. 

  670.   renderSide('modInChips', SIDE_MODS.in, state.modInFilter, 'in');
    671. 

  671.   renderSide('modOutChips', SIDE_MODS.out, state.modOutFilter, 'out');
    672. 

  672. }
    673. 

  673. 

  674. function renderModalities(){
    675. 

  675.   const baseFiltered = applyFilters('mod');
    676. 

  676.   const counts = {};
    677. 

  677.   for (const f of baseFiltered) counts[f.modality_signature] = (counts[f.modality_signature]||0)+1;
    678. 

  678.   renderModalityChips();
    679. 

  679.   const wrap = $('modList'); wrap.innerHTML = '';
    680. 

  680.   const visible = data.modalities.filter(m => sigPassesChipFilter(m.sig));
    681. 

  681.   const sorted = [...visible].sort((a,b) => (counts[b.sig]||0) - (counts[a.sig]||0));
    682. 

  682.   if (sorted.length === 0){
    683. 

  683.     wrap.appendChild(el('div', {class:'empty-msg'}, '当前 chip 筛选下没有匹配签名'));
    684. 

  684.   }
    685. 

  685.   for (const m of sorted){
    686. 

  686.     const c = counts[m.sig] || 0;
    687. 

  687.     const node = el('div', {
    688. 

  688.       class: 'item' + (state.modSig === m.sig ? ' active' : '') + (c === 0 && state.modSig !== m.sig ? ' disabled' : ''),
    689. 

  689.       onClick: () => {
    690. 

  690.         if (c === 0 && state.modSig !== m.sig) return;
    691. 

  691.         state.modSig = (state.modSig === m.sig) ? null : m.sig;
    692. 

  692.         renderAll();
    693. 

  693.       }
    694. 

  694.     },
    695. 

  695.       el('span', {class:'item-name'}, m.sig),
    696. 

  696.       el('span', {class:'item-count'}, String(c))
    697. 

  697.     );
    698. 

  698.     wrap.appendChild(node);
    699. 

  699.   }
    700. 

  700.   $('modClear').classList.toggle('show', !!state.modSig || state.modInFilter.size > 0 || state.modOutFilter.size > 0);
    701. 

  701. }
    702. 

  702. 

  703. function makeFragBodyRow(f){
    704. 

  704.   const k = fragKey(f);
    705. 

  705.   const head = el('div', {class:'frag-head'},
    706. 

  706.     el('span', {class:'case-badge'}, '案例'+f.case_index),
    707. 

  707.     el('span', {class:'frag-badge'}, f.fragment_id),
    708. 

  708.     el('span', {class:'act-badge'}, f.action)
    709. 

  709.   );
    710. 

  710.   const sig = el('div', {class:'frag-sig'}, f.modality_signature);
    711. 

  711.   const body = el('div', {class:'frag-body'}, f.body || '');
    712. 

  712.   return el('div', {
    713. 

  713.     class: 'frag' + (state.fragKey === k ? ' active' : ''),
    714. 

  714.     onClick: () => { state.fragKey = (state.fragKey === k) ? null : k; renderFragments(); renderDetail(); }
    715. 

  715.   }, head, sig, body);
    716. 

  716. }
    717. 

  717. 

  718. function makeExcerptRow(frag, side, entry){
    719. 

  719.   const k = fragKey(frag);
    720. 

  720.   const head = el('div', {class:'frag-head'},
    721. 

  721.     el('span', {class:'case-badge'}, '案例'+frag.case_index),
    722. 

  722.     el('span', {class:'frag-badge'}, frag.fragment_id),
    723. 

  723.     el('span', {class:'act-badge'}, frag.action),
    724. 

  724.     el('span', {class:'side-badge ' + (side==='实质'?'shi':'xing')}, side),
    725. 

  725.     entry.source === 'suggest' ? el('span', {class:'src-badge'}, '建议') : null
    726. 

  726.   );
    727. 

  727.   const node = el('div', {
    728. 

  728.     class: 'excerpt-row' + (state.fragKey === k ? ' active' : ''),
    729. 

  729.     onClick: () => { state.fragKey = (state.fragKey === k) ? null : k; renderFragments(); renderDetail(); }
    730. 

  730.   });
    731. 

  731.   node.appendChild(head);
    732. 

  732.   node.appendChild(el('div', {class:'excerpt-path'}, entry.category_path));
    733. 

  733.   if (entry.body_excerpt){
    734. 

  734.     node.appendChild(el('div', {class:'excerpt-main'}, entry.body_excerpt));
    735. 

  735.   }
    736. 

  736.   if (entry.body_excerpt_note){
    737. 

  737.     node.appendChild(el('div', {class:'excerpt-note'}, entry.body_excerpt_note));
    738. 

  738.   }
    739. 

  739.   if (frag.body){
    740. 

  740.     node.appendChild(el('div', {class:'excerpt-body'}, frag.body));
    741. 

  741.   }
    742. 

  742.   return node;
    743. 

  743. }
    744. 

  744. 

  745. function renderFragmentsNode(filtered, wrap){
    746. 

  746.   const hasNodeSel = !!(state.shizhiPath || state.xingshiPath);
    747. 

  747.   if (!hasNodeSel){
    748. 

  748.     $('fragCnt').textContent = filtered.length + ' / ' + data.fragments.length;
    749. 

  749.     if (!filtered.length){
    750. 

  750.       wrap.appendChild(el('div', {class:'empty-msg'}, '当前筛选下没有命中的能力'));
    751. 

  751.       return;
    752. 

  752.     }
    753. 

  753.     for (const f of filtered) wrap.appendChild(makeFragBodyRow(f));
    754. 

  754.     return;
    755. 

  755.   }
    756. 

  756.   const rows = [];
    757. 

  757.   for (const f of filtered){
    758. 

  758.     if (state.shizhiPath){
    759. 

  759.       const allowed = new Set(shiDesc.get(state.shizhiPath) || [state.shizhiPath]);
    760. 

  760.       for (const e of (f.apply_shizhi || [])){
    761. 

  761.         if (allowed.has(e.category_path)) rows.push({frag:f, side:'实质', entry:e});
    762. 

  762.       }
    763. 

  763.     }
    764. 

  764.     if (state.xingshiPath){
    765. 

  765.       const allowed = new Set(xingDesc.get(state.xingshiPath) || [state.xingshiPath]);
    766. 

  766.       for (const e of (f.apply_xingshi || [])){
    767. 

  767.         if (allowed.has(e.category_path)) rows.push({frag:f, side:'形式', entry:e});
    768. 

  768.       }
    769. 

  769.     }
    770. 

  770.   }
    771. 

  771.   $('fragCnt').textContent = rows.length + ' 条 · ' + filtered.length + ' 能力';
    772. 

  772.   if (!rows.length){
    773. 

  773.     wrap.appendChild(el('div', {class:'empty-msg'}, '当前筛选下没有命中的 excerpt'));
    774. 

  774.     return;
    775. 

  775.   }
    776. 

  776.   for (const r of rows) wrap.appendChild(makeExcerptRow(r.frag, r.side, r.entry));
    777. 

  777. }
    778. 

  778. 

  779. function renderFragmentsPatternRaw(filtered, wrap){
    780. 

  780.   $('fragCnt').textContent = filtered.length + ' / ' + data.fragments.length;
    781. 

  781.   if (!filtered.length){
    782. 

  782.     wrap.appendChild(el('div', {class:'empty-msg'}, '当前筛选下没有命中的能力'));
    783. 

  783.     return;
    784. 

  784.   }
    785. 

  785.   for (const f of filtered) wrap.appendChild(makeFragBodyRow(f));
    786. 

  786. }
    787. 

  787. 

  788. function renderFragmentsPatternStructured(filtered, wrap){
    789. 

  789.   $('fragCnt').textContent = filtered.length + ' / ' + data.fragments.length;
    790. 

  790.   const sel = (state.itemsetIdx != null) ? data.itemsets[state.itemsetIdx] : null;
    791. 

  791.   if (!sel){
    792. 

  792.     wrap.appendChild(el('div', {class:'empty-msg'}, '请先在第二列选择一个项集'));
    793. 

  793.     return;
    794. 

  794.   }
    795. 

  795.   if (!filtered.length){
    796. 

  796.     wrap.appendChild(el('div', {class:'empty-msg'}, '当前筛选下没有命中的能力'));
    797. 

  797.     return;
    798. 

  798.   }
    799. 

  799.   const itemSet = new Set(sel.items);
    800. 

  800.   for (const f of filtered){
    801. 

  801.     const k = fragKey(f);
    802. 

  802.     const excerpts = [];
    803. 

  803.     const seen = new Set();
    804. 

  804.     const addFrom = (list) => {
    805. 

  805.       for (const e of (list || [])){
    806. 

  806.         if (!itemSet.has(e.category_path)) continue;
    807. 

  807.         if (!e.body_excerpt) continue;
    808. 

  808.         if (seen.has(e.body_excerpt)) continue;
    809. 

  809.         seen.add(e.body_excerpt);
    810. 

  810.         excerpts.push(e.body_excerpt);
    811. 

  811.       }
    812. 

  812.     };
    813. 

  813.     addFrom(f.apply_shizhi);
    814. 

  814.     addFrom(f.apply_xingshi);
    815. 

  815. 

  816.     const head = el('div', {class:'frag-head'},
    817. 

  817.       el('span', {class:'case-badge'}, '案例'+f.case_index),
    818. 

  818.       el('span', {class:'frag-badge'}, f.fragment_id),
    819. 

  819.       el('span', {class:'act-badge'}, f.action)
    820. 

  820.     );
    821. 

  821.     const node = el('div', {
    822. 

  822.       class: 'frag' + (state.fragKey === k ? ' active' : ''),
    823. 

  823.       onClick: () => { state.fragKey = (state.fragKey === k) ? null : k; renderFragments(); renderDetail(); }
    824. 

  824.     });
    825. 

  825.     node.appendChild(head);
    826. 

  826.     if (excerpts.length){
    827. 

  827.       const wrapEx = el('div', {class:'frag-excerpts'});
    828. 

  828.       for (const ex of excerpts) wrapEx.appendChild(el('div', {class:'ex'}, ex));
    829. 

  829.       node.appendChild(wrapEx);
    830. 

  830.     } else {
    831. 

  831.       node.appendChild(el('div', {class:'frag-excerpts empty'}, '(本能力无 excerpt 命中该项集)'));
    832. 

  832.     }
    833. 

  833.     wrap.appendChild(node);
    834. 

  834.   }
    835. 

  835. }
    836. 

  836. 

  837. function renderFragments(){
    838. 

  838.   const filtered = applyFilters(null);
    839. 

  839.   const wrap = $('fragList'); wrap.innerHTML = '';
    840. 

  840.   $('fragColTitle').textContent = '④ ' + (state.scopeMode === 'pattern' ? '分子能力' : '原子能力');
    841. 

  841.   $('fvTabs').style.display = (state.scopeMode === 'pattern') ? 'flex' : 'none';
    842. 

  842.   if (state.scopeMode === 'pattern'){
    843. 

  843.     $('fvRaw').classList.toggle('active', state.patternView === 'raw');
    844. 

  844.     $('fvStructured').classList.toggle('active', state.patternView === 'structured');
    845. 

  845.   }
    846. 

  846.   if (state.scopeMode === 'node'){
    847. 

  847.     renderFragmentsNode(filtered, wrap);
    848. 

  848.   } else {
    849. 

  849.     if (state.patternView === 'structured') renderFragmentsPatternStructured(filtered, wrap);
    850. 

  850.     else renderFragmentsPatternRaw(filtered, wrap);
    851. 

  851.   }
    852. 

  852. }
    853. 

  853. 

  854. function renderCaseDetail(wrap, caseIdx){
    855. 

  855.   const c = casesByIndex[caseIdx];
    856. 

  856.   if (!c) return;
    857. 

  857.   const det = el('details', {class:'case-detail'});
    858. 

  858.   const sumLabel = '📄 源: ' + (c.title || '案例 ' + caseIdx);
    859. 

  859.   det.appendChild(el('summary', null, sumLabel));
    860. 

  860.   const content = el('div', {class:'case-content'});
    861. 

  861. 

  862.   if (c.author) {
    863. 

  863.     content.appendChild(el('div', {class:'case-author'}, '作者：' + c.author));
    864. 

  864.   }
    865. 

  865.   if (c.feedback && (c.feedback.like_count || c.feedback.comment_count || c.feedback.collect_count || c.feedback.share_count)){
    866. 

  866.     const fb = c.feedback;
    867. 

  867.     const row = el('div', {class:'case-feedback'});
    868. 

  868.     if (fb.like_count != null) row.appendChild(el('span', {class:'fb'}, '👍 ' + fb.like_count));
    869. 

  869.     if (fb.comment_count != null) row.appendChild(el('span', {class:'fb'}, '💬 ' + fb.comment_count));
    870. 

  870.     if (fb.collect_count != null) row.appendChild(el('span', {class:'fb'}, '⭐ ' + fb.collect_count));
    871. 

  871.     if (fb.share_count != null) row.appendChild(el('span', {class:'fb'}, '↗ ' + fb.share_count));
    872. 

  872.     content.appendChild(row);
    873. 

  873.   }
    874. 

  874. 

  875.   const imgs = (c.images && c.images.length) ? c.images : (c.cover ? [c.cover] : []);
    876. 

  876.   if (imgs.length){
    877. 

  877.     const wrapImg = el('div', {class:'case-images'});
    878. 

  878.     for (const src of imgs) wrapImg.appendChild(el('img', {src, loading:'lazy'}));
    879. 

  879.     content.appendChild(wrapImg);
    880. 

  880.   }
    881. 

  881.   if (c.body){
    882. 

  882.     content.appendChild(el('div', {class:'case-body'}, c.body));
    883. 

  883.   }
    884. 

  884.   if (c.url){
    885. 

  885.     content.appendChild(el('a', {href:c.url, target:'_blank', rel:'noopener', class:'case-link'}, '🔗 访问原始链接'));
    886. 

  886.   }
    887. 

  887.   det.appendChild(content);
    888. 

  888.   wrap.appendChild(det);
    889. 

  889. }
    890. 

  890. 

  891. function renderDetail(){
    892. 

  892.   const wrap = $('detailBody'); wrap.innerHTML = '';
    893. 

  893.   const f = data.fragments.find(x => fragKey(x) === state.fragKey);
    894. 

  894.   if (!f){ wrap.appendChild(el('div', {class:'detail-empty'}, '点击左侧能力查看详情')); return; }
    895. 

  895. 

  896.   wrap.appendChild(el('h2', null,
    897. 

  897.     el('span', {class:'case-badge'}, '案例 '+f.case_index),
    898. 

  898.     el('span', {class:'frag-badge'}, f.fragment_id),
    899. 

  899.     el('span', {class:'act-badge'}, f.action),
    900. 

  900.     f.workflow_step_ref && f.workflow_step_ref.step_id ? el('span', {class:'pill'}, 'step '+f.workflow_step_ref.step_id) : null
    901. 

  901.   ));
    902. 

  902. 

  903.   renderCaseDetail(wrap, f.case_index);
    904. 

  904. 

  905.   const ioSec = el('div', {class:'detail-section'}, el('h3', null, 'I/O 模态'));
    906. 

  906.   ioSec.appendChild(el('div', {class:'frag-sig', style:'font-size:13px;margin-bottom:6px'}, f.modality_signature));
    907. 

  907.   const ioRow = (lbl, arr, kind) => {
    908. 

  908.     const row = el('div', {class:'io-row'}, el('span', {class:'lbl'}, lbl));
    909. 

  909.     if (!arr || !arr.length){ row.appendChild(el('span', {style:'color:var(--muted)'}, '(无)')); return row; }
    910. 

  910.     for (const x of arr){
    911. 

  911.       const isCfg = x.modality === '模型' || x.modality === '参数';
    912. 

  912.       const txt = (x.description||'') + (x.modality?'['+x.modality+']':'') + (x.relation?' '+x.relation:'');
    913. 

  913.       row.appendChild(el('span', {class:'pill ' + (isCfg ? 'cfg' : kind)}, txt));
    914. 

  914.     }
    915. 

  915.     return row;
    916. 

  916.   };
    917. 

  917.   ioSec.appendChild(ioRow('IN', f.inputs, 'in'));
    918. 

  918.   ioSec.appendChild(ioRow('OUT', f.outputs, 'out'));
    919. 

  919.   wrap.appendChild(ioSec);
    920. 

  920. 

  921.   if (f.body){
    922. 

  922.     wrap.appendChild(el('div', {class:'detail-section'},
    923. 

  923.       el('h3', null, 'Body'),
    924. 

  924.       el('div', {class:'body-text'}, f.body)
    925. 

  925.     ));
    926. 

  926.   }
    927. 

  927. 

  928.   let hotPaths = new Set();
    929. 

  929.   if (state.scopeMode === 'pattern' && state.itemsetIdx != null){
    930. 

  930.     const sel = data.itemsets[state.itemsetIdx];
    931. 

  931.     if (sel) for (const p of sel.items) hotPaths.add(p);
    932. 

  932.   }
    933. 

  933.   const renderApply = (label, arr) => {
    934. 

  934.     const sec = el('div', {class:'detail-section'}, el('h3', null, 'Apply to · ' + label));
    935. 

  935.     if (!arr || !arr.length){ sec.appendChild(el('div', {class:'empty-msg', style:'padding:8px'}, '无')); return sec; }
    936. 

  936.     for (const e of arr){
    937. 

  937.       let isHighlighted = false;
    938. 

  938.       if (state.scopeMode === 'node'){
    939. 

  939.         isHighlighted =
    940. 

  940.           (label === '实质' && state.shizhiPath && (shiDesc.get(state.shizhiPath)||[]).includes(e.category_path)) ||
    941. 

  941.           (label === '形式' && state.xingshiPath && (xingDesc.get(state.xingshiPath)||[]).includes(e.category_path));
    942. 

  942.       } else {
    943. 

  943.         isHighlighted = hotPaths.has(e.category_path);
    944. 

  944.       }
    945. 

  945.       const isSuggest = e.source === 'suggest';
    946. 

  946.       const pl = el('div', {class:'pathline' + (isSuggest ? ' suggest' : ''), style: isHighlighted ? 'color:#ca8a04;font-weight:600' : ''},
    947. 

  947.         e.category_path + (isSuggest ? ' ✦' : ''));
    948. 

  948.       sec.appendChild(pl);
    949. 

  949.       if (e.body_excerpt){
    950. 

  950.         sec.appendChild(el('div', {class:'excerpt-line'}, el('span', {class:'em'}, e.body_excerpt)));
    951. 

  951.       }
    952. 

  952.       if (e.body_excerpt_note){
    953. 

  953.         sec.appendChild(el('div', {class:'rationale'}, '— ' + e.body_excerpt_note));
    954. 

  954.       }
    955. 

  955.       if (e.rationale){
    956. 

  956.         sec.appendChild(el('div', {class:'rationale'}, '· ' + e.rationale));
    957. 

  957.       }
    958. 

  958.     }
    959. 

  959.     return sec;
    960. 

  960.   };
    961. 

  961.   wrap.appendChild(renderApply('实质', f.apply_shizhi));
    962. 

  962.   wrap.appendChild(renderApply('形式', f.apply_xingshi));
    963. 

  963. 

  964.   if (f.effects && f.effects.length){
    965. 

  965.     const sec = el('div', {class:'detail-section'}, el('h3', null, 'Effects'));
    966. 

  966.     f.effects.forEach((e,i)=>{
    967. 

  967.       const card = el('div', {class:'effect-card'});
    968. 

  968.       card.appendChild(el('div', {class:'effect-stmt'}, '#'+i+' ' + (e.statement || '-')));
    969. 

  969.       if (e.criteria) card.appendChild(el('div', {class:'effect-meta'}, '判定标准：'+e.criteria));
    970. 

  970.       if (e.judge_method) card.appendChild(el('div', {class:'effect-meta'}, '判定方式：'+e.judge_method));
    971. 

  971.       if (e.negative_examples && e.negative_examples.length){
    972. 

  972.         const ne = el('div', {class:'effect-meta'}, '反例：');
    973. 

  973.         for (const n of e.negative_examples) ne.appendChild(el('div', {style:'margin-left:8px'}, '· '+n));
    974. 

  974.         card.appendChild(ne);
    975. 

  975.       }
    976. 

  976.       sec.appendChild(card);
    977. 

  977.     });
    978. 

  978.     wrap.appendChild(sec);
    979. 

  979.   }
    980. 

  980. 

  981.   const miscRows = [];
    982. 

  982.   if (f.tools && f.tools.length) miscRows.push(['tools', f.tools.join(', ')]);
    983. 

  983.   if (f.artifact_type) miscRows.push(['artifact_type', f.artifact_type]);
    984. 

  984.   if (f.control_target && f.control_target.length) miscRows.push(['control_target', f.control_target.join(', ')]);
    985. 

  985.   if (f.is_alternative_to && f.is_alternative_to.length) miscRows.push(['alt_to', f.is_alternative_to.join(', ')]);
    986. 

  986.   if (miscRows.length){
    987. 

  987.     const sec = el('div', {class:'detail-section'}, el('h3', null, '其他'));
    988. 

  988.     for (const [k2,v2] of miscRows){
    989. 

  989.       const row = el('div', {style:'font-size:11px;margin-bottom:3px'},
    990. 

  990.         el('span', {style:'color:var(--muted);margin-right:8px'}, k2),
    991. 

  991.         el('span', null, v2)
    992. 

  992.       );
    993. 

  993.       sec.appendChild(row);
    994. 

  994.     }
    995. 

  995.     wrap.appendChild(sec);
    996. 

  996.   }
    997. 

  997. 

  998.   wrap.appendChild(el('details', null,
    999. 

  999.     el('summary', null, '查看原始能力 JSON'),
    1000. 

  1000.     el('pre', {class:'json-raw'}, JSON.stringify(f, null, 2))
    1001. 

  1001.   ));
    1002. 

  1002. }
    1003. 

  1003. 

  1004. function renderChips(){
    1005. 

  1005.   const c = $('chips'); c.innerHTML = '';
    1006. 

  1006.   let any = false;
    1007. 

  1007.   const mk = (lbl, val, onX) => {
    1008. 

  1008.     any = true;
    1009. 

  1009.     c.appendChild(el('span', {class:'filter-chip'},
    1010. 

  1010.       el('span', {class:'lbl'}, lbl),
    1011. 

  1011.       el('span', null, val),
    1012. 

  1012.       el('span', {class:'x', onClick: () => { onX(); renderAll(); }}, '×')
    1013. 

  1013.     ));
    1014. 

  1014.   };
    1015. 

  1015.   if (state.action) mk('动作', state.action, () => { state.action = null; });
    1016. 

  1016.   if (state.scopeMode === 'node'){
    1017. 

  1017.     if (state.shizhiPath) mk('实质', state.shizhiPath.split('/').pop() || state.shizhiPath, () => { state.shizhiPath = null; });
    1018. 

  1018.     if (state.xingshiPath) mk('形式', state.xingshiPath.split('/').pop() || state.xingshiPath, () => { state.xingshiPath = null; });
    1019. 

  1019.   } else if (state.scopeMode === 'pattern' && state.itemsetIdx != null){
    1020. 

  1020.     const sel = data.itemsets[state.itemsetIdx];
    1021. 

  1021.     const desc = sel.items.map(p => p.split('/').pop()).join(' + ');
    1022. 

  1022.     mk('项集 k='+sel.size, desc, () => { state.itemsetIdx = null; });
    1023. 

  1023.   }
    1024. 

  1024.   if (state.modSig) mk('模态', state.modSig, () => { state.modSig = null; });
    1025. 

  1025.   $('clearAll').classList.toggle('active', any);
    1026. 

  1026. }
    1027. 

  1027. 

  1028. function renderStats(){}
    1029. 

  1029. 

  1030. function renderAll(){
    1031. 

  1031.   renderActions();
    1032. 

  1032.   renderScope();
    1033. 

  1033.   renderModalities();
    1034. 

  1034.   renderFragments();
    1035. 

  1035.   renderDetail();
    1036. 

  1036.   renderChips();
    1037. 

  1037. }
    1038. 

  1038. 

  1039. function init(){
    1040. 

  1040.   for (const c of (data.cases || [])) casesByIndex[c.index] = c;
    1041. 

  1041. 

  1042.   SIDE_MODS = (() => {
    1043. 

  1043.     const inSet = new Set(), outSet = new Set();
    1044. 

  1044.     for (const m of data.modalities){
    1045. 

  1045.       const p = sigParts(m.sig);
    1046. 

  1046.       for (const x of p.in) inSet.add(x);
    1047. 

  1047.       for (const x of p.out) outSet.add(x);
    1048. 

  1048.     }
    1049. 

  1049.     return { in: [...inSet].sort(), out: [...outSet].sort() };
    1050. 

  1050.   })();
    1051. 

  1051. 

  1052.   shiDesc = buildDescMap(data.subtree.shizhi || []);
    1053. 

  1053.   xingDesc = buildDescMap(data.subtree.xingshi || []);
    1054. 

  1054.   for (const f of data.fragments) fragPaths.set(fragKey(f), fragPathSet(f));
    1055. 

  1055. 

  1056.   $('loading').style.display = 'none';
    1057. 

  1057.   $('appRoot').style.display = '';
    1058. 

  1058. 

  1059.   $('clearAll').addEventListener('click', () => {
    1060. 

  1060.     state.action = null; state.shizhiPath = null; state.xingshiPath = null;
    1061. 

  1061.     state.itemsetIdx = null; state.modSig = null;
    1062. 

  1062.     state.modInFilter.clear(); state.modOutFilter.clear();
    1063. 

  1063.     renderAll();
    1064. 

  1064.   });
    1065. 

  1065.   $('scopeClear').addEventListener('click', () => {
    1066. 

  1066.     if (state.scopeMode === 'node'){ state.shizhiPath = null; state.xingshiPath = null; }
    1067. 

  1067.     else { state.itemsetIdx = null; }
    1068. 

  1068.     renderAll();
    1069. 

  1069.   });
    1070. 

  1070.   $('tabNode').addEventListener('click', () => { state.scopeMode = 'node'; renderAll(); });
    1071. 

  1071.   $('tabPattern').addEventListener('click', () => { state.scopeMode = 'pattern'; renderAll(); });
    1072. 

  1072.   $('fvRaw').addEventListener('click', () => { state.patternView = 'raw'; renderFragments(); });
    1073. 

  1073.   $('fvStructured').addEventListener('click', () => { state.patternView = 'structured'; renderFragments(); });
    1074. 

  1074.   $('modClear').addEventListener('click', () => {
    1075. 

  1075.     state.modSig = null; state.modInFilter.clear(); state.modOutFilter.clear();
    1076. 

  1076.     renderAll();
    1077. 

  1077.   });
    1078. 

  1078. 

  1079.   renderStats();
    1080. 

  1080.   renderAll();
    1081. 

  1081. }
    1082. 

  1082. 

  1083. fetch('/api/viz/data/capability')
    1084. 

  1084.   .then(r => {
    1085. 

  1085.     if (!r.ok) throw new Error('fetch failed: ' + r.status);
    1086. 

  1086.     return r.json();
    1087. 

  1087.   })
    1088. 

  1088.   .then(d => { data = d; init(); })
    1089. 

  1089.   .catch(err => {
    1090. 

  1090.     $('loading').textContent = '加载失败：' + err.message + '。请先上传数据：POST /api/viz/data/capability';
    1091. 

  1091.   });
    1092. 

  1092. </script>
    1093. 

  1093. </body>
    1094. 

  1094. </html>
    1095.