Inicio Explorar Ayuda
Iniciar sesión
howard
/
Agent
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Rama: tao_test
Ramas Etiquetas
Agent
/
knowhub
/
frontend
/
public
/
viz_workflow.html

viz_workflow.html 43 KB
Permalink Histórico Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053 
  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.     --split-w:8px;
    16. 

  16.     --left-pct:60%;
    17. 

  17.   }
    18. 

  18.   *{box-sizing:border-box}
    19. 

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

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

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

  22.     border-bottom:1px solid var(--border);background:var(--panel);
    23. 

  23.     position:sticky;top:0;z-index:5;flex-wrap:wrap;height:41px}
    24. 

  24.   h1{font-size:14px;margin:0;font-weight:600}
    25. 

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

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

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

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

  29. 

  30.   /* two-panel layout with draggable splitter */
    31. 

  31.   .app{display:grid;
    32. 

  32.     grid-template-columns: minmax(0, var(--left-pct)) var(--split-w) minmax(0, 1fr);
    33. 

  33.     height:calc(100vh - 41px);
    34. 

  34.     overflow:hidden}
    35. 

  35.   .selection{overflow:hidden;display:flex;flex-direction:column;background:var(--panel);
    36. 

  36.     min-width:0}
    37. 

  37.   .splitter{background:var(--border);cursor:col-resize;position:relative;user-select:none}
    38. 

  38.   .splitter::before{content:"";position:absolute;left:50%;top:50%;
    39. 

  39.     transform:translate(-50%,-50%);width:2px;height:30px;background:var(--muted);
    40. 

  40.     border-radius:1px;opacity:.6}
    41. 

  41.   .splitter:hover{background:var(--accent)}
    42. 

  42.   .splitter:hover::before{background:#fff;opacity:1}
    43. 

  43.   .splitter.dragging{background:var(--accent)}
    44. 

  44.   .splitter.dragging::before{background:#fff;opacity:1}
    45. 

  45.   .detail-area{overflow:auto;background:var(--panel);padding:0}
    46. 

  46.   .preset-btns{display:flex;gap:6px;margin-right:10px}
    47. 

  47.   .preset-btn{font-size:11px;padding:3px 9px;border:1px solid var(--border);
    48. 

  48.     border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
    49. 

  49.   .preset-btn:hover{color:var(--fg);border-color:var(--accent)}
    50. 

  50.   .preset-btn.active{color:var(--accent);border-color:var(--accent);background:#eff6ff}
    51. 

  51. 

  52.   /* selection 4-column grid */
    53. 

  53.   .sel-cols{display:grid;
    54. 

  54.     grid-template-columns:minmax(180px,1fr) minmax(220px,1.1fr) minmax(190px,1fr) minmax(280px,1.6fr);
    55. 

  55.     height:100%;overflow-x:auto;overflow-y:hidden}
    56. 

  56.   section{overflow:auto;border-right:1px solid var(--border);padding:8px 10px;min-width:0}
    57. 

  57.   section:last-child{border-right:none}
    58. 

  58.   section.fac1{background:var(--panel)}
    59. 

  59.   section.fac2{background:#fafbfd}
    60. 

  60.   section.fac3{background:var(--panel)}
    61. 

  61.   section.fac4{background:#fafbfd}
    62. 

  62. 

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

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

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

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

  67.   .col-clear.show{display:inline}
    68. 

  68. 

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

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

  71.   .item:hover:not(.disabled):not(.active){background:var(--panel2)}
    72. 

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

  73.   .item.disabled{opacity:.42;cursor:not-allowed}
    74. 

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

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

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

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

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

  79.   .item.active .item-def{color:rgba(255,255,255,.85)}
    80. 

  80.   .item-stack{flex:1;min-width:0}
    81. 

  81. 

  82.   /* verb-filter (collapsible chip list inside col-1) */
    83. 

  83.   .verb-filter{margin:0 0 8px;border:1px solid var(--border);border-radius:5px;
    84. 

  84.     background:var(--code)}
    85. 

  85.   .verb-filter > summary{cursor:pointer;padding:6px 9px;font-size:11px;
    86. 

  86.     color:var(--muted);user-select:none;display:flex;align-items:center;gap:6px;outline:none}
    87. 

  87.   .verb-filter > summary:hover{color:var(--fg)}
    88. 

  88.   .verb-filter > summary .vf-count{margin-left:auto;font-size:10px;color:var(--accent)}
    89. 

  89.   .verb-filter[open] > summary{border-bottom:1px solid var(--border)}
    90. 

  90.   .verb-chips{display:flex;flex-wrap:wrap;gap:4px;padding:7px 7px 5px}
    91. 

  91.   .verb-chip{font-size:11px;padding:2px 8px;background:var(--tag-bg);border-radius:8px;
    92. 

  92.     cursor:pointer;color:var(--fg);user-select:none;border:1px solid transparent;
    93. 

  93.     display:inline-flex;align-items:center;gap:4px}
    94. 

  94.   .verb-chip:hover:not(.disabled):not(.active){background:var(--panel2);border-color:var(--border)}
    95. 

  95.   .verb-chip.active{background:var(--tag-bg-active);color:var(--tag-fg-active)}
    96. 

  96.   .verb-chip.disabled{opacity:.42;cursor:not-allowed}
    97. 

  97.   .verb-chip .cnt{font-size:9px;color:var(--muted);background:var(--bg);
    98. 

  98.     padding:0 4px;border-radius:6px}
    99. 

  99.   .verb-chip.active .cnt{background:rgba(255,255,255,.3);color:#fff}
    100. 

  100. 

  101.   /* action sequence list */
    102. 

  102.   .actseq{padding:7px 9px;border-radius:5px;cursor:pointer;margin-bottom:4px;
    103. 

  103.     border:1px solid var(--border);background:var(--panel);font-size:11px;line-height:1.45}
    104. 

  104.   .actseq:hover:not(.disabled):not(.active){border-color:var(--accent)}
    105. 

  105.   .actseq.active{border-color:var(--accent);background:#eff6ff;
    106. 

  106.     box-shadow:0 0 0 1px var(--accent) inset}
    107. 

  107.   .actseq.disabled{opacity:.42;cursor:not-allowed}
    108. 

  108.   .actseq-count{float:right;font-size:10px;color:var(--muted);
    109. 

  109.     background:var(--bg);padding:1px 5px;border-radius:8px}
    110. 

  110.   .actseq.active .actseq-count{background:rgba(59,130,246,.15);color:var(--accent)}
    111. 

  111.   .actseq-chip{display:inline-block;background:var(--tag-bg);padding:1px 6px;
    112. 

  112.     border-radius:3px;font-size:10px;margin:1px 2px;font-weight:600;color:var(--fg)}
    113. 

  113.   .actseq.active .actseq-chip{background:#dbeafe;color:#1e40af}
    114. 

  114.   .actseq-sep{color:var(--muted);font-size:9px;margin:0 1px}
    115. 

  115. 

  116.   /* tree */
    117. 

  117.   .tnode{margin-left:0}
    118. 

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

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

  120.     cursor:pointer;font-size:12px;line-height:1.35}
    121. 

  121.   .tline:hover:not(.disabled):not(.active){background:var(--panel2)}
    122. 

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

  123.   .tline.disabled{opacity:.42;cursor:not-allowed}
    124. 

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

  125.   .tline.suggested.active .tname{color:#fff}
    126. 

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

  127.   .tline.inferred.active .tname{color:#fff}
    128. 

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

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

  130.   .tcaret.invis{visibility:hidden}
    131. 

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

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

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

  134.   .tcollapsed > .tnode{display:none}
    135. 

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

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

  137.   .facet-title:first-child{margin-top:0}
    138. 

  138. 

  139.   /* workflow card */
    140. 

  140.   .wf{padding:9px 10px;border-radius:6px;cursor:pointer;margin-bottom:6px;
    141. 

  141.     border:1px solid var(--border);background:var(--panel)}
    142. 

  142.   .wf:hover:not(.active){background:var(--panel2)}
    143. 

  143.   .wf.active{border-color:var(--accent);background:#eff6ff;
    144. 

  144.     box-shadow:0 0 0 1px var(--accent) inset}
    145. 

  145.   .wf-head{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}
    146. 

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

  147.     font-weight:600;font-size:10px}
    148. 

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

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

  150.   .wf-meta{font-size:10px;color:var(--muted);margin-left:auto}
    151. 

  151.   .wf-sig{font-size:10px;color:var(--muted);margin:3px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    152. 

  152.   .wf-seq{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px;align-items:center}
    153. 

  153.   .wf-row{font-size:10px;margin-top:4px;display:flex;align-items:baseline;gap:6px;line-height:1.4}
    154. 

  154.   .wf-row .wf-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;font-size:9px;min-width:28px}
    155. 

  155.   .wf-row .wf-val{color:#334155;flex:1;min-width:0}
    156. 

  156.   .wf-scope-chip{display:inline-block;background:#e0e7ff;color:#3730a3;padding:1px 6px;
    157. 

  157.     border-radius:3px;font-size:10px;margin:1px 2px;font-weight:600}
    158. 

  158.   .wf-scope-chip.suggest{background:#ede9fe;color:#6d28d9;font-style:italic}
    159. 

  159.   .wf-scope-more{font-size:9px;color:var(--muted);margin-left:3px}
    160. 

  160.   .vchip{font-size:10px;padding:2px 6px;border-radius:3px;font-weight:600;line-height:1.3;
    161. 

  161.     border:1px solid transparent;white-space:nowrap;background:var(--tag-bg);color:var(--fg)}
    162. 

  162.   .vsep{color:var(--muted);font-size:9px;line-height:1.3}
    163. 

  163. 

  164.   /* modality side filter */
    165. 

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

  166.     border:1px solid var(--border);border-radius:5px}
    167. 

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

  168.   .mod-filter-row:last-child{margin-bottom:0}
    169. 

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

  170.   .mod-chips{display:flex;gap:4px;flex-wrap:wrap}
    171. 

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

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

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

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

  175.   .mod-chip.disabled{opacity:.42;cursor:not-allowed}
    176. 

  176. 

  177.   /* detail */
    178. 

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

  179.   .detail-pad{padding:14px 18px}
    180. 

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

  181.   .detail-section{margin:12px 0}
    182. 

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

  183.     letter-spacing:.6px;margin:0 0 6px;font-weight:600}
    184. 

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

  185.     font-size:11px;margin-right:3px;margin-bottom:3px}
    186. 

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

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

  188. 

  189.   /* case-detail (original-post) section */
    190. 

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

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

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

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

  194.     margin-top:4px;border:1px solid var(--border)}
    195. 

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

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

  197.     background:var(--panel2);border:1px solid var(--border)}
    198. 

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

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

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

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

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

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

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

  205. 

  206.   /* capability table — light, compact, white-on-gray */
    207. 

  207.   .cap-table{width:100%;border-collapse:collapse;background:var(--panel);
    208. 

  208.     font-size:11px;border:1px solid var(--border);table-layout:auto}
    209. 

  209.   .cap-table th, .cap-table td{
    210. 

  210.     border:1px solid var(--border);padding:5px 8px;vertical-align:top;text-align:left;
    211. 

  211.     line-height:1.5;background:var(--panel)}
    212. 

  212.   .cap-table thead th{background:#f8fafc;font-weight:600;color:var(--muted);
    213. 

  213.     position:sticky;top:0;z-index:2;font-size:10px;text-transform:uppercase;
    214. 

  214.     letter-spacing:.4px;text-align:left}
    215. 

  215.   .cap-table tbody tr.cap-first td{border-top:1px solid var(--border)}
    216. 

  216.   .cap-table tbody tr.step-first td{border-top:2px solid var(--accent)}
    217. 

  217.   .cap-table tbody tr:first-child td{border-top:none}
    218. 

  218.   .cell-step{text-align:center;font-weight:600;color:#334155;font-size:12px;
    219. 

  219.     background:#fafbfd}
    220. 

  220.   .cell-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
    221. 

  221.     color:var(--muted);white-space:nowrap;background:#fafbfd}
    222. 

  222.   .cell-action{font-weight:600;color:#334155;background:#fafbfd}
    223. 

  223.   .cell-atom-action{color:#334155;font-weight:500}
    224. 

  224.   .cell-scope{color:#334155}
    225. 

  225.   .cell-scope.suggest{color:var(--suggest);font-style:italic}
    226. 

  226.   .cell-tool{font-size:10px;color:#475569;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    227. 

  227.   .cell-type{font-size:10px;color:var(--muted)}
    228. 

  228.   .cell-impl{color:#334155;max-width:260px;font-size:11px;line-height:1.5}
    229. 

  229.   .cell-io{background:#fafbfd}
    230. 

  230.   .cell-io .mod-pill{display:inline-block;padding:1px 7px;border-radius:3px;
    231. 

  231.     font-size:10px;margin:1px 2px;font-weight:600;
    232. 

  232.     background:#e0e7ff;color:#3730a3}
    233. 

  233.   .cell-io .mod-pill.output{background:#e0e7ff;color:#3730a3}
    234. 

  234.   .cell-dash{color:var(--inferred)}
    235. 

  235.   .scope-leaf{display:inline-block;padding:1px 6px;background:#e0e7ff;
    236. 

  236.     color:#3730a3;border-radius:3px;font-size:11px;font-weight:600}
    237. 

  237.   .scope-leaf.suggest{background:#ede9fe;color:#6d28d9}
    238. 

  238.   .scope-facet{font-size:9px;color:var(--muted);margin-left:5px;text-transform:uppercase;letter-spacing:.3px}
    239. 

  239.   .scope-path{font-size:9px;color:var(--muted);margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
    240. 

  240.   .scope-mark{font-size:10px;color:var(--suggest);margin-left:3px}
    241. 

  241. 

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

  243. 

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

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

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

  247.   .filter-chip .x:hover{color:var(--warn)}
    248. 

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

  249. 

  250.   .loading{display:flex;align-items:center;justify-content:center;
    251. 

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

  252. </style>
    253. 

  253. </head>
    254. 

  254. <body>
    255. 

  255. 

  256. <div id="loading" class="loading">加载工序数据中…</div>
    257. 

  257. 

  258. <div id="appRoot" style="display:none">
    259. 

  259. <header>
    260. 

  260.   <h1>工序</h1>
    261. 

  261.   <span id="chips"></span>
    262. 

  262.   <div class="preset-btns" style="margin-left:auto">
    263. 

  263.     <button class="preset-btn" id="presetLeft" title="选择区为主">◧ 选择</button>
    264. 

  264.     <button class="preset-btn" id="presetEven" title="均分">⊟ 均分</button>
    265. 

  265.     <button class="preset-btn" id="presetRight" title="详情区为主">◨ 详情</button>
    266. 

  266.   </div>
    267. 

  267.   <button class="clear-all" id="clearAll">清除筛选</button>
    268. 

  268. </header>
    269. 

  269. 

  270. <div class="app" id="app">
    271. 

  271.   <div class="selection">
    272. 

  272.     <div class="sel-cols">
    273. 

  273.       <section class="fac1" id="actCol">
    274. 

  274.         <div class="col-title">
    275. 

  275.           <span>① 动作</span>
    276. 

  276.           <span class="col-clear" id="actClear" style="margin-left:auto">清除</span>
    277. 

  277.         </div>
    278. 

  278.         <details class="verb-filter" id="verbFilter">
    279. 

  279.           <summary>
    280. 

  280.             <span>动词表</span>
    281. 

  281.             <span id="vfSummary" class="vf-count"></span>
    282. 

  282.           </summary>
    283. 

  283.           <div class="verb-chips" id="verbChips"></div>
    284. 

  284.         </details>
    285. 

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

  286.       </section>
    287. 

  287. 

  288.       <section class="fac2" id="scopeCol">
    289. 

  289.         <div class="col-title">
    290. 

  290.           <span>② 作用域</span>
    291. 

  291.           <span class="col-count" id="scopeStat"></span>
    292. 

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

  293.         </div>
    294. 

  294.         <div class="facet-title">实质</div>
    295. 

  295.         <div id="shizhiTree"></div>
    296. 

  296.         <div class="facet-title">形式</div>
    297. 

  297.         <div id="xingshiTree"></div>
    298. 

  298.       </section>
    299. 

  299. 

  300.       <section class="fac3" id="modCol">
    301. 

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

  302.         <div class="mod-filter">
    303. 

  303.           <div class="mod-filter-row">
    304. 

  304.             <span class="mod-filter-lbl">输入含</span>
    305. 

  305.             <span class="mod-chips" id="modInChips"></span>
    306. 

  306.           </div>
    307. 

  307.           <div class="mod-filter-row">
    308. 

  308.             <span class="mod-filter-lbl">输出含</span>
    309. 

  309.             <span class="mod-chips" id="modOutChips"></span>
    310. 

  310.           </div>
    311. 

  311.         </div>
    312. 

  312.         <div id="modList"></div>
    313. 

  313.       </section>
    314. 

  314. 

  315.       <section class="fac4" id="wfCol">
    316. 

  316.         <div class="col-title"><span>④ 工序</span><span class="col-count" id="wfCnt"></span></div>
    317. 

  317.         <div id="wfList"></div>
    318. 

  318.       </section>
    319. 

  319.     </div>
    320. 

  320.   </div>
    321. 

  321. 

  322.   <div class="splitter" id="splitter"></div>
    323. 

  323. 

  324.   <div class="detail-area">
    325. 

  325.     <div class="detail-pad" id="detailBody">
    326. 

  326.       <div class="detail-empty">点击左侧工序查看详情</div>
    327. 

  327.     </div>
    328. 

  328.   </div>
    329. 

  329. </div>
    330. 

  330. </div>
    331. 

  331. 

  332. <script>
    333. 

  333. let data = null;
    334. 

  334. let casesByIndex = {};
    335. 

  335. let SIDE_MODS = null;
    336. 

  336. let shiDesc = null;
    337. 

  337. let xingDesc = null;
    338. 

  338. const fragByKey = new Map();
    339. 

  339. 

  340. const state = {
    341. 

  341.   actionSeqSig: null,        // selected action-sequence signature
    342. 

  342.   actionsSelected: new Set(),// selected verbs (AND filter)
    343. 

  343.   shizhiPath: null,
    344. 

  344.   xingshiPath: null,
    345. 

  345.   modSig: null,
    346. 

  346.   modInFilter: new Set(),
    347. 

  347.   modOutFilter: new Set(),
    348. 

  348.   wfKey: null,
    349. 

  349.   collapsed: new Set(),
    350. 

  350. };
    351. 

  351. 

  352. const PHASE_IGNORE = new Set(["非制作"]);
    353. 

  353. 

  354. function $(id){return document.getElementById(id)}
    355. 

  355. function el(tag, attrs, ...kids){
    356. 

  356.   const e = document.createElement(tag);
    357. 

  357.   if (attrs) for (const k in attrs){
    358. 

  358.     if (k === 'class') e.className = attrs[k];
    359. 

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

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

  361.     else if (k === 'title') e.title = attrs[k];
    362. 

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

  363.     else e[k] = attrs[k];
    364. 

  364.   }
    365. 

  365.   for (const kid of kids){
    366. 

  366.     if (kid == null || kid === false) continue;
    367. 

  367.     if (typeof kid === 'string') e.appendChild(document.createTextNode(kid));
    368. 

  368.     else e.appendChild(kid);
    369. 

  369.   }
    370. 

  370.   return e;
    371. 

  371. }
    372. 

  372. 

  373. function sigParts(sig){
    374. 

  374.   const [inS, outS] = sig.split(' → ');
    375. 

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

  376.   return { in: parse(inS), out: parse(outS) };
    377. 

  377. }
    378. 

  378. 

  379. function buildDescMap(roots){
    380. 

  380.   const map = new Map();
    381. 

  381.   function walk(node){
    382. 

  382.     const all = [node.path];
    383. 

  383.     for (const c of node.children || []){
    384. 

  384.       const sub = walk(c);
    385. 

  385.       for (const p of sub) all.push(p);
    386. 

  386.     }
    387. 

  387.     map.set(node.path, all);
    388. 

  388.     return all;
    389. 

  389.   }
    390. 

  390.   for (const r of roots) walk(r);
    391. 

  391.   return map;
    392. 

  392. }
    393. 

  393. 

  394. function workflowMatchesPath(w, key, selPath, descMap){
    395. 

  395.   if (!selPath) return true;
    396. 

  396.   const allowed = new Set(descMap.get(selPath) || [selPath]);
    397. 

  397.   const list = (key === 'shizhi') ? w.apply_shizhi_paths : w.apply_xingshi_paths;
    398. 

  398.   for (const p of (list || [])) if (allowed.has(p)) return true;
    399. 

  399.   return false;
    400. 

  400. }
    401. 

  401. 

  402. // action sequence of a workflow, ignoring 非制作 steps
    403. 

  403. function actionSeqOfWorkflow(w){
    404. 

  404.   const seq = [];
    405. 

  405.   for (const s of w.steps){
    406. 

  406.     if (PHASE_IGNORE.has(s.phase)) continue;
    407. 

  407.     for (const fk of s.fragment_keys){
    408. 

  408.       const f = fragByKey.get(fk);
    409. 

  409.       if (f && f.action) seq.push(f.action);
    410. 

  410.     }
    411. 

  411.   }
    412. 

  412.   return seq;
    413. 

  413. }
    414. 

  414. function actionSigOfWorkflow(w){
    415. 

  415.   return actionSeqOfWorkflow(w).join(' → ');
    416. 

  416. }
    417. 

  417. // action set ignoring 非制作 (for verb filter)
    418. 

  418. function actionSetOfWorkflow(w){
    419. 

  419.   return new Set(actionSeqOfWorkflow(w));
    420. 

  420. }
    421. 

  421. 

  422. function actionFilterActive(){
    423. 

  423.   return !!state.actionSeqSig || state.actionsSelected.size > 0;
    424. 

  424. }
    425. 

  425. function scopeFilterActive(){
    426. 

  426.   return !!(state.shizhiPath || state.xingshiPath);
    427. 

  427. }
    428. 

  428. 

  429. function applyFilters(except){
    430. 

  430.   return data.workflows.filter(w => {
    431. 

  431.     if (except !== 'action' && actionFilterActive()){
    432. 

  432.       if (state.actionSeqSig){
    433. 

  433.         if (actionSigOfWorkflow(w) !== state.actionSeqSig) return false;
    434. 

  434.       }
    435. 

  435.       if (state.actionsSelected.size > 0){
    436. 

  436.         const set = actionSetOfWorkflow(w);
    437. 

  437.         for (const v of state.actionsSelected) if (!set.has(v)) return false;
    438. 

  438.       }
    439. 

  439.     }
    440. 

  440.     if (except !== 'scope' && scopeFilterActive()){
    441. 

  441.       if (state.shizhiPath && !workflowMatchesPath(w, 'shizhi', state.shizhiPath, shiDesc)) return false;
    442. 

  442.       if (state.xingshiPath && !workflowMatchesPath(w, 'xingshi', state.xingshiPath, xingDesc)) return false;
    443. 

  443.     }
    444. 

  444.     if (except !== 'mod' && state.modSig && w.io_signature !== state.modSig) return false;
    445. 

  445.     return true;
    446. 

  446.   });
    447. 

  447. }
    448. 

  448. 

  449. function renderVerbFilter(){
    450. 

  450.   const baseFiltered = applyFilters('action');
    451. 

  451.   const counts = {};
    452. 

  452.   for (const w of baseFiltered) for (const v of actionSetOfWorkflow(w)) counts[v] = (counts[v]||0)+1;
    453. 

  453.   const wrap = $('verbChips'); wrap.innerHTML = '';
    454. 

  454.   for (const a of data.actions){
    455. 

  455.     const c = counts[a.verb] || 0;
    456. 

  456.     const isActive = state.actionsSelected.has(a.verb);
    457. 

  457.     const chip = el('span', {
    458. 

  458.       class: 'verb-chip' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
    459. 

  459.       title: a.verb + (a.definition ? '\n\n' + a.definition : ''),
    460. 

  460.       onClick: () => {
    461. 

  461.         if (c === 0 && !isActive) return;
    462. 

  462.         if (state.actionsSelected.has(a.verb)) state.actionsSelected.delete(a.verb);
    463. 

  463.         else state.actionsSelected.add(a.verb);
    464. 

  464.         renderAll();
    465. 

  465.       }
    466. 

  466.     },
    467. 

  467.       el('span', null, a.verb),
    468. 

  468.       el('span', {class:'cnt'}, String(c))
    469. 

  469.     );
    470. 

  470.     wrap.appendChild(chip);
    471. 

  471.   }
    472. 

  472.   const n = state.actionsSelected.size;
    473. 

  473.   $('vfSummary').textContent = n > 0 ? (n + ' 项已选') : (data.actions.length + ' 个动词');
    474. 

  474.   if (n > 0) $('verbFilter').setAttribute('open', '');
    475. 

  475. }
    476. 

  476. 

  477. function renderActionSeqs(){
    478. 

  478.   // collect all distinct action signatures across the filtered workflow set
    479. 

  479.   const baseFiltered = applyFilters('action');
    480. 

  480.   const counts = {};
    481. 

  481.   const examples = {};
    482. 

  482.   for (const w of data.workflows){
    483. 

  483.     const sig = actionSigOfWorkflow(w);
    484. 

  484.     if (!sig) continue;
    485. 

  485.     if (!(sig in counts)) { counts[sig] = 0; examples[sig] = actionSeqOfWorkflow(w); }
    486. 

  486.   }
    487. 

  487.   // count under current other filters
    488. 

  488.   const filteredCount = {};
    489. 

  489.   for (const w of baseFiltered){
    490. 

  490.     const sig = actionSigOfWorkflow(w);
    491. 

  491.     if (!sig) continue;
    492. 

  492.     filteredCount[sig] = (filteredCount[sig]||0)+1;
    493. 

  493.   }
    494. 

  494.   const wrap = $('actSeqList'); wrap.innerHTML = '';
    495. 

  495.   const sigs = Object.keys(counts).sort((a,b) => (filteredCount[b]||0) - (filteredCount[a]||0) || a.localeCompare(b));
    496. 

  496.   if (!sigs.length){
    497. 

  497.     wrap.appendChild(el('div', {class:'empty-msg'}, '没有动作序列'));
    498. 

  498.     return;
    499. 

  499.   }
    500. 

  500.   for (const sig of sigs){
    501. 

  501.     const c = filteredCount[sig] || 0;
    502. 

  502.     const isActive = state.actionSeqSig === sig;
    503. 

  503.     const node = el('div', {
    504. 

  504.       class: 'actseq' + (isActive ? ' active' : '') + (c === 0 && !isActive ? ' disabled' : ''),
    505. 

  505.       onClick: () => {
    506. 

  506.         if (c === 0 && !isActive) return;
    507. 

  507.         state.actionSeqSig = isActive ? null : sig;
    508. 

  508.         renderAll();
    509. 

  509.       }
    510. 

  510.     });
    511. 

  511.     node.appendChild(el('span', {class:'actseq-count'}, String(c)));
    512. 

  512.     const seq = examples[sig];
    513. 

  513.     seq.forEach((v, i) => {
    514. 

  514.       if (i > 0) node.appendChild(el('span', {class:'actseq-sep'}, ' › '));
    515. 

  515.       node.appendChild(el('span', {class:'actseq-chip'}, v));
    516. 

  516.     });
    517. 

  517.     wrap.appendChild(node);
    518. 

  518.   }
    519. 

  519. }
    520. 

  520. 

  521. function renderActions(){
    522. 

  522.   $('actClear').classList.toggle('show', actionFilterActive());
    523. 

  523.   renderVerbFilter();
    524. 

  524.   renderActionSeqs();
    525. 

  525. }
    526. 

  526. 

  527. function renderTreeFacet(roots, key, mountId, selPath, descMap){
    528. 

  528.   const wrap = $(mountId); wrap.innerHTML = '';
    529. 

  529.   const baseFiltered = applyFilters('scope');
    530. 

  530.   const hitCounts = new Map();
    531. 

  531.   for (const w of baseFiltered){
    532. 

  532.     const list = (key === 'shizhi') ? w.apply_shizhi_paths : w.apply_xingshi_paths;
    533. 

  533.     const seen = new Set();
    534. 

  534.     for (const p of (list || [])){
    535. 

  535.       const parts = (p || '').split('/').filter(Boolean);
    536. 

  536.       for (let i = 1; i <= parts.length; i++){
    537. 

  537.         const pp = '/' + parts.slice(0,i).join('/');
    538. 

  538.         if (seen.has(pp)) continue;
    539. 

  539.         seen.add(pp);
    540. 

  540.       }
    541. 

  541.     }
    542. 

  542.     for (const pp of seen) hitCounts.set(pp, (hitCounts.get(pp)||0)+1);
    543. 

  543.   }
    544. 

  544.   function renderNode(node, parent){
    545. 

  545.     const c = hitCounts.get(node.path) || 0;
    546. 

  546.     const collapsed = state.collapsed.has(node.path);
    547. 

  547.     const hasChildren = (node.children || []).length > 0;
    548. 

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

  549.     const cls = ['tline'];
    550. 

  550.     if (selPath === node.path) cls.push('active');
    551. 

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

  552.     if (node.is_suggested && !node.is_hit) cls.push('suggested');
    553. 

  553.     if (node.is_inferred) cls.push('inferred');
    554. 

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

  555.     const caret = el('span', {
    556. 

  556.       class: 'tcaret' + (hasChildren ? '' : ' invis'),
    557. 

  557.       onClick: (ev) => {
    558. 

  558.         ev.stopPropagation();
    559. 

  559.         if (state.collapsed.has(node.path)) state.collapsed.delete(node.path);
    560. 

  560.         else state.collapsed.add(node.path);
    561. 

  561.         renderTrees();
    562. 

  562.       }
    563. 

  563.     }, hasChildren ? (collapsed ? '▶' : '▼') : '·');
    564. 

  564.     line.appendChild(caret);
    565. 

  565.     let label = node.name;
    566. 

  566.     if (node.is_suggested && !node.is_hit) label += ' ✦';
    567. 

  567.     if (node.is_inferred) label += ' (推断)';
    568. 

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

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

  570.     line.addEventListener('click', () => {
    571. 

  571.       if (c === 0 && selPath !== node.path) return;
    572. 

  572.       const k = (key === 'shizhi') ? 'shizhiPath' : 'xingshiPath';
    573. 

  573.       state[k] = (state[k] === node.path) ? null : node.path;
    574. 

  574.       renderAll();
    575. 

  575.     });
    576. 

  576.     tnode.appendChild(line);
    577. 

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

  578.     parent.appendChild(tnode);
    579. 

  579.   }
    580. 

  580.   for (const r of roots) renderNode(r, wrap);
    581. 

  581. }
    582. 

  582. 

  583. function renderTrees(){
    584. 

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

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

  586. }
    587. 

  587. 

  588. function renderScope(){
    589. 

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

  590.   $('scopeClear').classList.toggle('show', scopeFilterActive());
    591. 

  591.   renderTrees();
    592. 

  592. }
    593. 

  593. 

  594. function sigPassesChipFilter(sig){
    595. 

  595.   const p = sigParts(sig);
    596. 

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

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

  598.   return true;
    599. 

  599. }
    600. 

  600. 

  601. function renderModalityChips(){
    602. 

  602.   const renderSide = (mountId, palette, selectedSet, side) => {
    603. 

  603.     const wrap = $(mountId); wrap.innerHTML = '';
    604. 

  604.     for (const m of palette){
    605. 

  605.       const trial = new Set(selectedSet);
    606. 

  606.       if (!trial.has(m)) trial.add(m);
    607. 

  607.       let c = 0;
    608. 

  608.       for (const sig of data.modalities){
    609. 

  609.         const p = sigParts(sig.sig);
    610. 

  610.         const inOK = side === 'in'
    611. 

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

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

  613.         if (inOK) c++;
    614. 

  614.       }
    615. 

  615.       const isActive = selectedSet.has(m);
    616. 

  616.       const chip = el('span', {
    617. 

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

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

  619.         onClick: () => {
    620. 

  620.           if (c === 0 && !isActive) return;
    621. 

  621.           if (selectedSet.has(m)) selectedSet.delete(m);
    622. 

  622.           else selectedSet.add(m);
    623. 

  623.           if (state.modSig && !sigPassesChipFilter(state.modSig)) state.modSig = null;
    624. 

  624.           renderAll();
    625. 

  625.         }
    626. 

  626.       }, m);
    627. 

  627.       wrap.appendChild(chip);
    628. 

  628.     }
    629. 

  629.   };
    630. 

  630.   renderSide('modInChips', SIDE_MODS.in, state.modInFilter, 'in');
    631. 

  631.   renderSide('modOutChips', SIDE_MODS.out, state.modOutFilter, 'out');
    632. 

  632. }
    633. 

  633. 

  634. function renderModalities(){
    635. 

  635.   const baseFiltered = applyFilters('mod');
    636. 

  636.   const counts = {};
    637. 

  637.   for (const w of baseFiltered) counts[w.io_signature] = (counts[w.io_signature]||0)+1;
    638. 

  638.   renderModalityChips();
    639. 

  639.   const wrap = $('modList'); wrap.innerHTML = '';
    640. 

  640.   const visible = data.modalities.filter(m => sigPassesChipFilter(m.sig));
    641. 

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

  642.   if (sorted.length === 0){
    643. 

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

  644.   }
    645. 

  645.   for (const m of sorted){
    646. 

  646.     const c = counts[m.sig] || 0;
    647. 

  647.     const node = el('div', {
    648. 

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

  649.       onClick: () => {
    650. 

  650.         if (c === 0 && state.modSig !== m.sig) return;
    651. 

  651.         state.modSig = (state.modSig === m.sig) ? null : m.sig;
    652. 

  652.         renderAll();
    653. 

  653.       }
    654. 

  654.     },
    655. 

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

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

  657.     );
    658. 

  658.     wrap.appendChild(node);
    659. 

  659.   }
    660. 

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

  661. }
    662. 

  662. 

  663. function renderWorkflowCard(w){
    664. 

  664.   const isActive = state.wfKey === w.workflow_key;
    665. 

  665.   const node = el('div', {
    666. 

  666.     class: 'wf' + (isActive ? ' active' : ''),
    667. 

  667.     onClick: () => { state.wfKey = isActive ? null : w.workflow_key; renderWorkflows(); renderDetail(); }
    668. 

  668.   });
    669. 

  669.   const head = el('div', {class:'wf-head'},
    670. 

  670.     el('span', {class:'wf-meta', style:'margin-left:0'}, w.step_count + ' step · ' + w.capability_count + ' cap')
    671. 

  671.   );
    672. 

  672.   node.appendChild(head);
    673. 

  673. 

  674.   // 动作序列
    675. 

  675.   const seq = el('div', {class:'wf-seq'});
    676. 

  676.   const visibleSeq = actionSeqOfWorkflow(w);
    677. 

  677.   if (visibleSeq.length){
    678. 

  678.     visibleSeq.forEach((v, i) => {
    679. 

  679.       if (i > 0) seq.appendChild(el('span', {class:'vsep'}, '›'));
    680. 

  680.       seq.appendChild(el('span', {class:'vchip'}, v));
    681. 

  681.     });
    682. 

  682.   } else {
    683. 

  683.     seq.appendChild(el('span', {style:'font-size:10px;color:var(--muted)'}, '—'));
    684. 

  684.   }
    685. 

  685.   node.appendChild(seq);
    686. 

  686. 

  687.   // 作用域 (leaf names from apply paths)
    688. 

  688.   const scopeLeaves = [];
    689. 

  689.   const seenLeaf = new Set();
    690. 

  690.   const addLeaves = (paths, facet) => {
    691. 

  691.     for (const p of (paths || [])){
    692. 

  692.       const leaf = (p || '').split('/').filter(Boolean).pop();
    693. 

  693.       if (!leaf) continue;
    694. 

  694.       const key = facet + ':' + leaf;
    695. 

  695.       if (seenLeaf.has(key)) continue;
    696. 

  696.       seenLeaf.add(key);
    697. 

  697.       scopeLeaves.push({leaf, facet, path:p});
    698. 

  698.     }
    699. 

  699.   };
    700. 

  700.   addLeaves(w.apply_shizhi_paths, '实质');
    701. 

  701.   addLeaves(w.apply_xingshi_paths, '形式');
    702. 

  702.   const scopeRow = el('div', {class:'wf-row'},
    703. 

  703.     el('span', {class:'wf-lbl'}, '作用域'));
    704. 

  704.   const scopeVal = el('span', {class:'wf-val'});
    705. 

  705.   if (scopeLeaves.length){
    706. 

  706.     const MAX = 6;
    707. 

  707.     scopeLeaves.slice(0, MAX).forEach(s => {
    708. 

  708.       scopeVal.appendChild(el('span', {class:'wf-scope-chip', title:s.path}, s.leaf));
    709. 

  709.     });
    710. 

  710.     if (scopeLeaves.length > MAX){
    711. 

  711.       scopeVal.appendChild(el('span', {class:'wf-scope-more'}, '+'+(scopeLeaves.length - MAX)));
    712. 

  712.     }
    713. 

  713.   } else {
    714. 

  714.     scopeVal.appendChild(el('span', {style:'color:var(--muted)'}, '—'));
    715. 

  715.   }
    716. 

  716.   scopeRow.appendChild(scopeVal);
    717. 

  717.   node.appendChild(scopeRow);
    718. 

  718. 

  719.   // IO
    720. 

  720.   const ioRow = el('div', {class:'wf-row'},
    721. 

  721.     el('span', {class:'wf-lbl'}, 'IO'),
    722. 

  722.     el('span', {class:'wf-val', style:'font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)'}, w.io_signature)
    723. 

  723.   );
    724. 

  724.   node.appendChild(ioRow);
    725. 

  725. 

  726.   return node;
    727. 

  727. }
    728. 

  728. 

  729. function renderWorkflows(){
    730. 

  730.   const filtered = applyFilters(null);
    731. 

  731.   const wrap = $('wfList'); wrap.innerHTML = '';
    732. 

  732.   $('wfCnt').textContent = filtered.length + ' / ' + data.workflows.length;
    733. 

  733.   if (!filtered.length){
    734. 

  734.     wrap.appendChild(el('div', {class:'empty-msg'}, '当前筛选下没有命中的工序'));
    735. 

  735.     return;
    736. 

  736.   }
    737. 

  737.   for (const w of filtered) wrap.appendChild(renderWorkflowCard(w));
    738. 

  738. }
    739. 

  739. 

  740. function renderCaseDetail(wrap, caseIdx){
    741. 

  741.   const c = casesByIndex[caseIdx];
    742. 

  742.   if (!c) return;
    743. 

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

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

  745.   det.appendChild(el('summary', null, sumLabel));
    746. 

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

  747. 

  748.   if (c.author) {
    749. 

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

  750.   }
    751. 

  751.   if (c.feedback && (c.feedback.like_count || c.feedback.comment_count || c.feedback.collect_count || c.feedback.share_count)){
    752. 

  752.     const fb = c.feedback;
    753. 

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

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

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

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

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

  758.     content.appendChild(row);
    759. 

  759.   }
    760. 

  760. 

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

  762.   if (imgs.length){
    763. 

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

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

  765.     content.appendChild(wrapImg);
    766. 

  766.   }
    767. 

  767.   if (c.body){
    768. 

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

  769.   }
    770. 

  770.   if (c.url){
    771. 

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

  772.   }
    773. 

  773.   det.appendChild(content);
    774. 

  774.   wrap.appendChild(det);
    775. 

  775. }
    776. 

  776. 

  777. // build atomic rows from a fragment: apply_shizhi + apply_xingshi entries, with markers
    778. 

  778. function buildAtomicRows(f){
    779. 

  779.   const rows = [];
    780. 

  780.   for (const e of (f.apply_shizhi || [])){
    781. 

  781.     rows.push({
    782. 

  782.       facet: '实质',
    783. 

  783.       category_path: e.category_path,
    784. 

  784.       source: e.source,
    785. 

  785.       leaf: (e.category_path || '').split('/').filter(Boolean).pop() || '—',
    786. 

  786.     });
    787. 

  787.   }
    788. 

  788.   for (const e of (f.apply_xingshi || [])){
    789. 

  789.     rows.push({
    790. 

  790.       facet: '形式',
    791. 

  791.       category_path: e.category_path,
    792. 

  792.       source: e.source,
    793. 

  793.       leaf: (e.category_path || '').split('/').filter(Boolean).pop() || '—',
    794. 

  794.     });
    795. 

  795.   }
    796. 

  796.   if (!rows.length) rows.push({ facet:'—', category_path:'', source:'apply', leaf:'—', empty:true });
    797. 

  797.   return rows;
    798. 

  798. }
    799. 

  799. 

  800. function renderCapTable(w){
    801. 

  801.   const table = el('table', {class:'cap-table'});
    802. 

  802.   const thead = el('thead');
    803. 

  803.   thead.appendChild(el('tr', null,
    804. 

  804.     el('th', null, '步骤'),
    805. 

  805.     el('th', null, '能力动作'),
    806. 

  806.     el('th', null, '原子能力动作'),
    807. 

  807.     el('th', null, '原子能力作用域'),
    808. 

  808.     el('th', null, '原子能力Tool'),
    809. 

  809.     el('th', null, '原子能力类型'),
    810. 

  810.     el('th', null, '原子能力实现'),
    811. 

  811.     el('th', null, '能力输入'),
    812. 

  812.     el('th', null, '能力输出')
    813. 

  813.   ));
    814. 

  814.   table.appendChild(thead);
    815. 

  815. 

  816.   const tbody = el('tbody');
    817. 

  817. 

  818.   // pre-compute atom rows per cap to know rowspan totals per step
    819. 

  819.   const stepRows = []; // [{step, caps: [{f, atoms}], totalRows}]
    820. 

  820.   for (const s of w.steps){
    821. 

  821.     const caps = [];
    822. 

  822.     let total = 0;
    823. 

  823.     for (const fk of s.fragment_keys){
    824. 

  824.       const f = fragByKey.get(fk);
    825. 

  825.       if (!f) continue;
    826. 

  826.       const atoms = buildAtomicRows(f);
    827. 

  827.       caps.push({f, atoms});
    828. 

  828.       total += atoms.length;
    829. 

  829.     }
    830. 

  830.     if (caps.length === 0) continue;
    831. 

  831.     stepRows.push({step:s, caps, totalRows: total});
    832. 

  832.   }
    833. 

  833. 

  834.   let stepIdx = 0;
    835. 

  835.   stepRows.forEach((sr, si) => {
    836. 

  836.     stepIdx += 1;
    837. 

  837.     sr.caps.forEach((cp, ci) => {
    838. 

  838.       const {f, atoms} = cp;
    839. 

  839.       const N = atoms.length;
    840. 

  840.       const tools = (f.tools && f.tools.length) ? f.tools.join(' / ') : '—';
    841. 

  841.       const inMods = (f.in_modalities && f.in_modalities.length) ? f.in_modalities : [];
    842. 

  842.       const outMods = (f.out_modalities && f.out_modalities.length) ? f.out_modalities : [];
    843. 

  843. 

  844.       const renderIO = (mods, kind) => {
    845. 

  845.         if (!mods.length) return el('span', {class:'cell-dash'}, '—');
    846. 

  846.         const box = el('div');
    847. 

  847.         for (const m of mods) box.appendChild(el('span', {class:'mod-pill ' + kind}, m));
    848. 

  848.         return box;
    849. 

  849.       };
    850. 

  850. 

  851.       atoms.forEach((a, ai) => {
    852. 

  852.         const isStepFirst = ai === 0 && ci === 0;
    853. 

  853.         const isCapFirst = ai === 0;
    854. 

  854.         const trClass = isStepFirst ? 'step-first' : (isCapFirst ? 'cap-first' : '');
    855. 

  855.         const tr = el('tr', trClass ? {class: trClass} : null);
    856. 

  856. 

  857.         if (isStepFirst){
    858. 

  858.           tr.appendChild(el('td', {class:'cell-step', rowSpan: sr.totalRows}, String(stepIdx)));
    859. 

  859.         }
    860. 

  860.         if (isCapFirst){
    861. 

  861.           tr.appendChild(el('td', {class:'cell-action', rowSpan:N, title:f.fragment_id}, f.action || '—'));
    862. 

  862.         }
    863. 

  863.         // 原子能力动作: fallback to cap.action
    864. 

  864.         tr.appendChild(el('td', {class:'cell-atom-action'},
    865. 

  865.           a.empty ? el('span', {class:'cell-dash'}, '—') : (f.action || '—')));
    866. 

  866.         // 原子能力作用域
    867. 

  867.         if (a.empty){
    868. 

  868.           tr.appendChild(el('td', {class:'cell-dash'}, '—'));
    869. 

  869.         } else {
    870. 

  870.           const cell = el('td', {
    871. 

  871.             class:'cell-scope' + (a.source === 'suggest' ? ' suggest' : ''),
    872. 

  872.             title: a.category_path
    873. 

  873.           });
    874. 

  874.           const labelLine = el('div');
    875. 

  875.           const leaf = el('span', {class:'scope-leaf' + (a.source === 'suggest' ? ' suggest' : '')}, a.leaf);
    876. 

  876.           labelLine.appendChild(leaf);
    877. 

  877.           if (a.source === 'suggest') labelLine.appendChild(el('span', {class:'scope-mark'}, '✦'));
    878. 

  878.           labelLine.appendChild(el('span', {class:'scope-facet'}, a.facet));
    879. 

  879.           cell.appendChild(labelLine);
    880. 

  880.           cell.appendChild(el('div', {class:'scope-path'}, a.category_path));
    881. 

  881.           tr.appendChild(cell);
    882. 

  882.         }
    883. 

  883.         // 原子能力Tool
    884. 

  884.         tr.appendChild(el('td', {class:'cell-tool'}, tools));
    885. 

  885.         // 原子能力类型
    886. 

  886.         tr.appendChild(el('td', {class:'cell-type'}, 'prompt'));
    887. 

  887.         // 原子能力实现
    888. 

  888.         tr.appendChild(el('td', {class:'cell-impl'}, el('span', {class:'cell-dash'}, '—')));
    889. 

  889. 

  890.         if (isCapFirst){
    891. 

  891.           tr.appendChild(el('td', {class:'cell-io', rowSpan:N}, renderIO(inMods, 'input')));
    892. 

  892.           tr.appendChild(el('td', {class:'cell-io', rowSpan:N}, renderIO(outMods, 'output')));
    893. 

  893.         }
    894. 

  894.         tbody.appendChild(tr);
    895. 

  895.       });
    896. 

  896.     });
    897. 

  897.   });
    898. 

  898.   table.appendChild(tbody);
    899. 

  899.   return table;
    900. 

  900. }
    901. 

  901. 

  902. function renderDetail(){
    903. 

  903.   const wrap = $('detailBody'); wrap.innerHTML = '';
    904. 

  904.   const w = data.workflows.find(x => x.workflow_key === state.wfKey);
    905. 

  905.   if (!w){ wrap.appendChild(el('div', {class:'detail-empty'}, '点击左侧工序查看详情')); return; }
    906. 

  906. 

  907.   wrap.appendChild(el('h2', null,
    908. 

  908.     el('span', {class:'case-badge'}, '案例 '+w.case_index),
    909. 

  909.     el('span', {class:'wf-badge'}, w.workflow_id),
    910. 

  910.     el('span', {class:'pill'}, w.step_count + ' step'),
    911. 

  911.     el('span', {class:'pill'}, w.capability_count + ' cap')
    912. 

  912.   ));
    913. 

  913. 

  914.   renderCaseDetail(wrap, w.case_index);
    915. 

  915. 

  916.   const sigSec = el('div', {class:'detail-section'}, el('h3', null, '签名'));
    917. 

  917.   sigSec.appendChild(el('div', {style:'font-size:12px;margin-bottom:4px'},
    918. 

  918.     el('span', {style:'color:var(--muted);margin-right:6px'}, 'IO'),
    919. 

  919.     el('span', null, w.io_signature)));
    920. 

  920.   sigSec.appendChild(el('div', {style:'font-size:12px;margin-bottom:4px'},
    921. 

  921.     el('span', {style:'color:var(--muted);margin-right:6px'}, '动作序列'),
    922. 

  922.     el('span', null, actionSigOfWorkflow(w) || '—')));
    923. 

  923.   wrap.appendChild(sigSec);
    924. 

  924. 

  925.   const tableSec = el('div', {class:'detail-section'}, el('h3', null, '能力 / 原子能力'));
    926. 

  926.   tableSec.appendChild(renderCapTable(w));
    927. 

  927.   wrap.appendChild(tableSec);
    928. 

  928. }
    929. 

  929. 

  930. function renderChips(){
    931. 

  931.   const c = $('chips'); c.innerHTML = '';
    932. 

  932.   let any = false;
    933. 

  933.   const mk = (lbl, val, onX) => {
    934. 

  934.     any = true;
    935. 

  935.     c.appendChild(el('span', {class:'filter-chip'},
    936. 

  936.       el('span', {class:'lbl'}, lbl),
    937. 

  937.       el('span', null, val),
    938. 

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

  939.     ));
    940. 

  940.   };
    941. 

  941.   if (state.actionSeqSig) mk('动作序列', state.actionSeqSig, () => { state.actionSeqSig = null; });
    942. 

  942.   if (state.actionsSelected.size) mk('含动词', [...state.actionsSelected].join(' + '), () => { state.actionsSelected.clear(); });
    943. 

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

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

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

  946.   $('clearAll').classList.toggle('active', any);
    947. 

  947. }
    948. 

  948. 

  949. function renderAll(){
    950. 

  950.   renderActions();
    951. 

  951.   renderScope();
    952. 

  952.   renderModalities();
    953. 

  953.   renderWorkflows();
    954. 

  954.   renderDetail();
    955. 

  955.   renderChips();
    956. 

  956. }
    957. 

  957. 

  958. // splitter
    959. 

  959. function setupSplitter(){
    960. 

  960.   const sp = $('splitter');
    961. 

  961.   let dragging = false;
    962. 

  962.   const setPct = (pct) => {
    963. 

  963.     pct = Math.max(4, Math.min(96, pct));
    964. 

  964.     document.documentElement.style.setProperty('--left-pct', pct + '%');
    965. 

  965.     // update preset active state
    966. 

  966.     let activeId = null;
    967. 

  967.     if (pct < 20) activeId = 'presetRight';
    968. 

  968.     else if (pct > 80) activeId = 'presetLeft';
    969. 

  969.     else if (pct >= 45 && pct <= 55) activeId = 'presetEven';
    970. 

  970.     for (const id of ['presetLeft','presetEven','presetRight']){
    971. 

  971.       $(id).classList.toggle('active', id === activeId);
    972. 

  972.     }
    973. 

  973.   };
    974. 

  974.   sp.addEventListener('mousedown', e => {
    975. 

  975.     dragging = true; sp.classList.add('dragging');
    976. 

  976.     document.body.style.cursor = 'col-resize';
    977. 

  977.     document.body.style.userSelect = 'none';
    978. 

  978.     e.preventDefault();
    979. 

  979.   });
    980. 

  980.   document.addEventListener('mousemove', e => {
    981. 

  981.     if (!dragging) return;
    982. 

  982.     const w = window.innerWidth;
    983. 

  983.     setPct((e.clientX / w) * 100);
    984. 

  984.   });
    985. 

  985.   document.addEventListener('mouseup', () => {
    986. 

  986.     if (!dragging) return;
    987. 

  987.     dragging = false; sp.classList.remove('dragging');
    988. 

  988.     document.body.style.cursor = ''; document.body.style.userSelect = '';
    989. 

  989.   });
    990. 

  990.   $('presetLeft').addEventListener('click', () => setPct(94));
    991. 

  991.   $('presetEven').addEventListener('click', () => setPct(50));
    992. 

  992.   $('presetRight').addEventListener('click', () => setPct(28));
    993. 

  993.   setPct(40);
    994. 

  994. }
    995. 

  995. 

  996. function init(){
    997. 

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

  998.   for (const f of data.fragments) fragByKey.set(f.case_index + ':' + f.fragment_id, f);
    999. 

  999. 

  1000.   SIDE_MODS = (() => {
    1001. 

  1001.     const inSet = new Set(), outSet = new Set();
    1002. 

  1002.     for (const m of data.modalities){
    1003. 

  1003.       const p = sigParts(m.sig);
    1004. 

  1004.       for (const x of p.in) inSet.add(x);
    1005. 

  1005.       for (const x of p.out) outSet.add(x);
    1006. 

  1006.     }
    1007. 

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

  1008.   })();
    1009. 

  1009. 

  1010.   shiDesc = buildDescMap(data.subtree.shizhi || []);
    1011. 

  1011.   xingDesc = buildDescMap(data.subtree.xingshi || []);
    1012. 

  1012. 

  1013.   $('loading').style.display = 'none';
    1014. 

  1014.   $('appRoot').style.display = '';
    1015. 

  1015. 

  1016.   $('clearAll').addEventListener('click', () => {
    1017. 

  1017.     state.actionSeqSig = null;
    1018. 

  1018.     state.actionsSelected.clear();
    1019. 

  1019.     state.shizhiPath = null; state.xingshiPath = null;
    1020. 

  1020.     state.modSig = null;
    1021. 

  1021.     state.modInFilter.clear(); state.modOutFilter.clear();
    1022. 

  1022.     renderAll();
    1023. 

  1023.   });
    1024. 

  1024.   $('actClear').addEventListener('click', () => {
    1025. 

  1025.     state.actionSeqSig = null;
    1026. 

  1026.     state.actionsSelected.clear();
    1027. 

  1027.     renderAll();
    1028. 

  1028.   });
    1029. 

  1029.   $('scopeClear').addEventListener('click', () => {
    1030. 

  1030.     state.shizhiPath = null; state.xingshiPath = null;
    1031. 

  1031.     renderAll();
    1032. 

  1032.   });
    1033. 

  1033.   $('modClear').addEventListener('click', () => {
    1034. 

  1034.     state.modSig = null; state.modInFilter.clear(); state.modOutFilter.clear();
    1035. 

  1035.     renderAll();
    1036. 

  1036.   });
    1037. 

  1037. 

  1038.   setupSplitter();
    1039. 

  1039.   renderAll();
    1040. 

  1040. }
    1041. 

  1041. 

  1042. fetch('/api/viz/data/workflow')
    1043. 

  1043.   .then(r => {
    1044. 

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

  1045.     return r.json();
    1046. 

  1046.   })
    1047. 

  1047.   .then(d => { data = d; init(); })
    1048. 

  1048.   .catch(err => {
    1049. 

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

  1050.   });
    1051. 

  1051. </script>
    1052. 

  1052. </body>
    1053. 

  1053. </html>
    1054.