صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
tanjingyu
/
data_nexus
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
شاخه: master
شاخه‌ها تگ‌ها
data_nexus
/
app
/
static
/
records.html

records.html 27 KB
لینک دائمی تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800 
  1. <!DOCTYPE html>
    2. 

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

  3. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>中后台系统</title>
    8. 

  8.     <meta name="description" content="Data Nexus 宽表数据视图控制台">
    9. 

  9.     <link rel="preconnect" href="https://fonts.googleapis.com">
    10. 

  10.     <link
    11. 

  11.         href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
    12. 

  12.         rel="stylesheet">
    13. 

  13.     <style>
    14. 

  14.         *,
    15. 

  15.         *::before,
    16. 

  16.         *::after {
    17. 

  17.             margin: 0;
    18. 

  18.             padding: 0;
    19. 

  19.             box-sizing: border-box;
    20. 

  20.         }
    21. 

  21. 

  22.         :root {
    23. 

  23.             --bg-base: #f8fafc;
    24. 

  24.             --bg-sidebar: #ffffff;
    25. 

  25.             --bg-nav: #ffffff;
    26. 

  26.             --bg-card: #ffffff;
    27. 

  27.             --bg-hover: rgba(42, 139, 242, 0.05);
    28. 

  28.             --bg-active: rgba(42, 139, 242, 0.1);
    29. 

  29.             --border: #edf2f7;
    30. 

  30.             --border-dark: #e2e8f0;
    31. 

  31.             --text-primary: #1e293b;
    32. 

  32.             --text-secondary: #64748b;
    33. 

  33.             --text-muted: #94a3b8;
    34. 

  34.             --accent: #2a8bf2;
    35. 

  35.             --radius-sm: 6px;
    36. 

  36.             --radius-md: 12px;
    37. 

  37.             --radius-lg: 16px;
    38. 

  38.             --sidebar-w: 260px;
    39. 

  39.             --nav-h: 64px;
    40. 

  40.             --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    41. 

  41.             --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    42. 

  42.         }
    43. 

  43. 

  44.         body {
    45. 

  45.             font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
    46. 

  46.             background: var(--bg-base);
    47. 

  47.             color: var(--text-primary);
    48. 

  48.             height: 100vh;
    49. 

  49.             overflow: hidden;
    50. 

  50.             line-height: 1.6;
    51. 

  51.         }
    52. 

  52. 

  53.         /* --- Global Layout --- */
    54. 

  54.         .app {
    55. 

  55.             display: flex;
    56. 

  56.             flex-direction: column;
    57. 

  57.             height: 100vh;
    58. 

  58.         }
    59. 

  59. 

  60.         /* --- Top Navigation --- */
    61. 

  61.         .navbar {
    62. 

  62.             height: var(--nav-h);
    63. 

  63.             background: var(--bg-nav);
    64. 

  64.             border-bottom: 1px solid var(--border);
    65. 

  65.             display: flex;
    66. 

  66.             align-items: center;
    67. 

  67.             padding: 0 32px;
    68. 

  68.             z-index: 100;
    69. 

  69.             flex-shrink: 0;
    70. 

  70.             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    71. 

  71.         }
    72. 

  72. 

  73.         .nav-logo {
    74. 

  74.             font-size: 20px;
    75. 

  75.             font-weight: 800;
    76. 

  76.             color: #0f172a;
    77. 

  77.             margin-right: 48px;
    78. 

  78.             white-space: nowrap;
    79. 

  79.             letter-spacing: -0.5px;
    80. 

  80.             display: flex;
    81. 

  81.             align-items: center;
    82. 

  82.             gap: 10px;
    83. 

  83.         }
    84. 

  84. 

  85.         .nav-logo::before {
    86. 

  86.             content: '';
    87. 

  87.             width: 32px;
    88. 

  88.             height: 32px;
    89. 

  89.             background: linear-gradient(135deg, var(--accent), #6366f1);
    90. 

  90.             border-radius: 8px;
    91. 

  91.         }
    92. 

  92. 

  93.         .nav-menu {
    94. 

  94.             display: flex;
    95. 

  95.             height: 100%;
    96. 

  96.             align-items: center;
    97. 

  97.         }
    98. 

  98. 

  99.         .nav-item {
    100. 

  100.             font-size: 15px;
    101. 

  101.             color: var(--accent);
    102. 

  102.             font-weight: 600;
    103. 

  103.             height: 100%;
    104. 

  104.             display: flex;
    105. 

  105.             align-items: center;
    106. 

  106.             padding: 0 16px;
    107. 

  107.             position: relative;
    108. 

  108.         }
    109. 

  109. 

  110.         .nav-item::after {
    111. 

  111.             content: '';
    112. 

  112.             position: absolute;
    113. 

  113.             bottom: 0;
    114. 

  114.             left: 0;
    115. 

  115.             right: 0;
    116. 

  116.             height: 3px;
    117. 

  117.             background: var(--accent);
    118. 

  118.             border-radius: 3px 3px 0 0;
    119. 

  119.         }
    120. 

  120. 

  121.         /* --- Main Content Layout --- */
    122. 

  122.         .main-container {
    123. 

  123.             flex: 1;
    124. 

  124.             display: grid;
    125. 

  125.             grid-template-columns: var(--sidebar-w) 1fr;
    126. 

  126.             overflow: hidden;
    127. 

  127.         }
    128. 

  128. 

  129.         /* --- Sidebar --- */
    130. 

  130.         .sidebar {
    131. 

  131.             background: var(--bg-sidebar);
    132. 

  132.             border-right: 1px solid var(--border);
    133. 

  133.             overflow-y: auto;
    134. 

  134.             padding: 24px 12px;
    135. 

  135.         }
    136. 

  136. 

  137.         .sidebar-title {
    138. 

  138.             font-size: 11px;
    139. 

  139.             font-weight: 700;
    140. 

  140.             color: var(--text-muted);
    141. 

  141.             padding: 8px 12px;
    142. 

  142.             text-transform: uppercase;
    143. 

  143.             letter-spacing: 1px;
    144. 

  144.             border-bottom: 1px solid var(--border);
    145. 

  145.             margin-bottom: 4px;
    146. 

  146.         }
    147. 

  147. 

  148.         .sidebar-list {
    149. 

  149.             list-style: none;
    150. 

  150.             display: flex;
    151. 

  151.             flex-direction: column;
    152. 

  152.             gap: 4px;
    153. 

  153.         }
    154. 

  154. 

  155.         .sidebar-item {
    156. 

  156.             padding: 12px 16px;
    157. 

  157.             font-size: 14px;
    158. 

  158.             color: var(--text-secondary);
    159. 

  159.             cursor: pointer;
    160. 

  160.             display: flex;
    161. 

  161.             align-items: center;
    162. 

  162.             gap: 12px;
    163. 

  163.             transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    164. 

  164.             border-radius: var(--radius-md);
    165. 

  165.             border: none;
    166. 

  166.             font-weight: 500;
    167. 

  167.         }
    168. 

  168. 

  169.         .sidebar-item .s-icon {
    170. 

  170.             width: 20px;
    171. 

  171.             height: 20px;
    172. 

  172.             opacity: 0.7;
    173. 

  173.         }
    174. 

  174. 

  175.         .sidebar-item:hover {
    176. 

  176.             background: var(--bg-hover);
    177. 

  177.             color: var(--text-primary);
    178. 

  178.             transform: translateX(4px);
    179. 

  179.         }
    180. 

  180. 

  181.         .sidebar-item.active {
    182. 

  182.             background: var(--bg-active);
    183. 

  183.             color: var(--accent);
    184. 

  184.             font-weight: 600;
    185. 

  185.             box-shadow: none;
    186. 

  186.         }
    187. 

  187. 

  188.         .sidebar-item.active .s-icon {
    189. 

  189.             opacity: 1;
    190. 

  190.             color: var(--accent);
    191. 

  191.         }
    192. 

  192. 

  193.         /* --- Content Area --- */
    194. 

  194.         .content {
    195. 

  195.             display: flex;
    196. 

  196.             flex-direction: column;
    197. 

  197.             overflow: hidden;
    198. 

  198.             padding: 24px 32px;
    199. 

  199.         }
    200. 

  200. 

  201.         .table-container {
    202. 

  202.             flex: 1;
    203. 

  203.             overflow: auto;
    204. 

  204.             background: #ffffff;
    205. 

  205.             border-radius: var(--radius-lg);
    206. 

  206.             box-shadow: var(--shadow);
    207. 

  207.             border: 1px solid var(--border);
    208. 

  208.         }
    209. 

  209. 

  210.         .records-table {
    211. 

  211.             width: 100%;
    212. 

  212.             border-collapse: separate;
    213. 

  213.             border-spacing: 0;
    214. 

  214.             min-width: 1000px;
    215. 

  215.         }
    216. 

  216. 

  217.         .records-table thead th {
    218. 

  218.             background: #f8fafc;
    219. 

  219.             color: var(--text-secondary);
    220. 

  220.             font-size: 12px;
    221. 

  221.             font-weight: 700;
    222. 

  222.             text-transform: uppercase;
    223. 

  223.             letter-spacing: 0.5px;
    224. 

  224.             text-align: left;
    225. 

  225.             padding: 16px 20px;
    226. 

  226.             border-bottom: 1px solid var(--border);
    227. 

  227.             position: sticky;
    228. 

  228.             top: 0;
    229. 

  229.             z-index: 10;
    230. 

  230.         }
    231. 

  231. 

  232.         .records-table td {
    233. 

  233.             padding: 20px;
    234. 

  234.             border-bottom: 1px solid var(--border);
    235. 

  235.             vertical-align: top;
    236. 

  236.             font-size: 14px;
    237. 

  237.             color: var(--text-primary);
    238. 

  238.             transition: background 0.15s;
    239. 

  239.         }
    240. 

  240. 

  241.         .records-table tr:last-child td {
    242. 

  242.             border-bottom: none;
    243. 

  243.         }
    244. 

  244. 

  245.         .records-table tr:hover td {
    246. 

  246.             background: #fcfdfe;
    247. 

  247.         }
    248. 

  248. 

  249.         .id-col {
    250. 

  250.             width: 100px;
    251. 

  251.         }
    252. 

  252. 

  253.         .commit-badge {
    254. 

  254.             font-family: 'JetBrains Mono', monospace;
    255. 

  255.             background: #f1f5f9;
    256. 

  256.             color: var(--text-secondary);
    257. 

  257.             padding: 4px 8px;
    258. 

  258.             border-radius: var(--radius-sm);
    259. 

  259.             font-size: 12px;
    260. 

  260.             display: inline-block;
    261. 

  261.         }
    262. 

  262. 

  263.         .msg-col {
    264. 

  264.             width: 260px;
    265. 

  265.             font-weight: 600;
    266. 

  266.             color: #0f172a;
    267. 

  267.         }
    268. 

  268. 

  269.         /* Bubble Tree Hierarchical Styles */
    270. 

  270.         .bubble-tree {
    271. 

  271.             background: #ffffff;
    272. 

  272.             border: 1px solid var(--border);
    273. 

  273.             border-radius: var(--radius-md);
    274. 

  274.             padding: 8px;
    275. 

  275.             min-height: 48px;
    276. 

  276.             min-width: 220px;
    277. 

  277.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    278. 

  278.         }
    279. 

  279. 

  280.         .fg-header {
    281. 

  281.             display: flex;
    282. 

  282.             align-items: center;
    283. 

  283.             gap: 4px;
    284. 

  284.             padding: 4px 8px;
    285. 

  285.             cursor: pointer;
    286. 

  286.             transition: background 0.1s;
    287. 

  287.             user-select: none;
    288. 

  288.             border-radius: 4px;
    289. 

  289.         }
    290. 

  290. 

  291.         .fg-header:hover {
    292. 

  292.             background: var(--bg-hover);
    293. 

  293.         }
    294. 

  294. 

  295.         .fg-name-wrap {
    296. 

  296.             display: flex;
    297. 

  297.             align-items: center;
    298. 

  298.             gap: 6px;
    299. 

  299.             min-width: 0;
    300. 

  300.             flex: 1;
    301. 

  301.         }
    302. 

  302. 

  303.         .fg-arrow {
    304. 

  304.             width: 14px;
    305. 

  305.             height: 14px;
    306. 

  306.             color: var(--text-muted);
    307. 

  307.             transition: transform 0.2s;
    308. 

  308.             display: flex;
    309. 

  309.             align-items: center;
    310. 

  310.             justify-content: center;
    311. 

  311.         }
    312. 

  312. 

  313.         .fg-arrow.open {
    314. 

  314.             transform: rotate(90deg);
    315. 

  315.         }
    316. 

  316. 

  317.         .fg-icon {
    318. 

  318.             width: 16px;
    319. 

  319.             height: 16px;
    320. 

  320.             color: #f6ad55;
    321. 

  321.             display: flex;
    322. 

  322.             align-items: center;
    323. 

  323.         }
    324. 

  324. 

  325.         .fg-name {
    326. 

  326.             font-size: 13px;
    327. 

  327.             color: var(--text-primary);
    328. 

  328.             font-weight: 500;
    329. 

  329.             white-space: nowrap;
    330. 

  330.             overflow: hidden;
    331. 

  331.             text-overflow: ellipsis;
    332. 

  332.         }
    333. 

  333. 

  334.         .fg-count {
    335. 

  335.             font-size: 11px;
    336. 

  336.             color: var(--text-muted);
    337. 

  337.             background: #f1f5f9;
    338. 

  338.             padding: 1px 5px;
    339. 

  339.             border-radius: 3px;
    340. 

  340.         }
    341. 

  341. 

  342.         .fg-children {
    343. 

  343.             display: none;
    344. 

  344.         }
    345. 

  345. 

  346.         .fg-children.open {
    347. 

  347.             display: block;
    348. 

  348.         }
    349. 

  349. 

  350.         .file-row {
    351. 

  351.             padding: 4px 8px;
    352. 

  352.             display: flex;
    353. 

  353.             align-items: center;
    354. 

  354.             gap: 8px;
    355. 

  355.             transition: background 0.1s;
    356. 

  356.             border-radius: 4px;
    357. 

  357.         }
    358. 

  358. 

  359.         .file-row:hover {
    360. 

  360.             background: var(--bg-hover);
    361. 

  361.         }
    362. 

  362. 

  363.         .f-icon {
    364. 

  364.             width: 16px;
    365. 

  365.             height: 16px;
    366. 

  366.             color: var(--text-muted);
    367. 

  367.             display: flex;
    368. 

  368.             align-items: center;
    369. 

  369.         }
    370. 

  370. 

  371.         .f-info {
    372. 

  372.             flex: 1;
    373. 

  373.             min-width: 0;
    374. 

  374.             display: flex;
    375. 

  375.             flex-direction: column;
    376. 

  376.         }
    377. 

  377. 

  378.         .f-name-line {
    379. 

  379.             display: flex;
    380. 

  380.             align-items: center;
    381. 

  381.             gap: 6px;
    382. 

  382.         }
    383. 

  383. 

  384.         .f-name {
    385. 

  385.             font-size: 13px;
    386. 

  386.             color: var(--text-primary);
    387. 

  387.             white-space: nowrap;
    388. 

  388.             overflow: hidden;
    389. 

  389.             text-overflow: ellipsis;
    390. 

  390.         }
    391. 

  391. 

  392.         .f-extracted {
    393. 

  393.             font-size: 11px;
    394. 

  394.             color: #3b82f6;
    395. 

  395.             word-break: break-all;
    396. 

  396.             margin-top: 1px;
    397. 

  397.         }
    398. 

  398. 

  399.         .f-size {
    400. 

  400.             font-size: 11px;
    401. 

  401.             color: var(--text-muted);
    402. 

  402.             margin-left: auto;
    403. 

  403.             padding-left: 8px;
    404. 

  404.         }
    405. 

  405. 

  406.         .btn-dl {
    407. 

  407.             color: var(--accent);
    408. 

  408.             text-decoration: none;
    409. 

  409.             display: flex;
    410. 

  410.             align-items: center;
    411. 

  411.             opacity: 0.6;
    412. 

  412.             transition: all 0.2s;
    413. 

  413.             margin-left: 4px;
    414. 

  414.         }
    415. 

  415. 

  416.         .btn-dl:hover {
    417. 

  417.             opacity: 1;
    418. 

  418.         }
    419. 

  419. 

  420.         .btn-dl svg {
    421. 

  421.             width: 14px;
    422. 

  422.             height: 14px;
    423. 

  423.         }
    424. 

  424. 

  425.         .col-badge {
    426. 

  426.             display: inline-block;
    427. 

  427.             padding: 1px 6px;
    428. 

  428.             border-radius: 3px;
    429. 

  429.             font-size: 10px;
    430. 

  430.             font-weight: 700;
    431. 

  431.             margin-bottom: 4px;
    432. 

  432.             text-transform: uppercase;
    433. 

  433.             width: fit-content;
    434. 

  434.         }
    435. 

  435. 

  436.         .badge-in {
    437. 

  437.             background: #eff6ff;
    438. 

  438.             color: #3b82f6;
    439. 

  439.             border: 1px solid #dbeafe;
    440. 

  440.         }
    441. 

  441. 

  442.         .badge-out {
    443. 

  443.             background: #f0fdf4;
    444. 

  444.             color: #22c55e;
    445. 

  445.             border: 1px solid #dcfce7;
    446. 

  446.         }
    447. 

  447. 

  448.         .th-cell {
    449. 

  449.             display: flex;
    450. 

  450.             flex-direction: column;
    451. 

  451.             justify-content: flex-start;
    452. 

  452.         }
    453. 

  453. 

  454.         .th-label {
    455. 

  455.             font-size: 13px;
    456. 

  456.         }
    457. 

  457. 

  458.         .state-box {
    459. 

  459.             display: flex;
    460. 

  460.             flex-direction: column;
    461. 

  461.             align-items: center;
    462. 

  462.             justify-content: center;
    463. 

  463.             height: 100%;
    464. 

  464.             color: var(--text-muted);
    465. 

  465.         }
    466. 

  466. 

  467.         .spinner {
    468. 

  468.             width: 32px;
    469. 

  469.             height: 32px;
    470. 

  470.             border: 3px solid #e2e8f0;
    471. 

  471.             border-top-color: var(--accent);
    472. 

  472.             border-radius: 50%;
    473. 

  473.             animation: spin 0.8s linear infinite;
    474. 

  474.             margin-bottom: 16px;
    475. 

  475.         }
    476. 

  476. 

  477.         @keyframes spin {
    478. 

  478.             to {
    479. 

  479.                 transform: rotate(360deg);
    480. 

  480.             }
    481. 

  481.         }
    482. 

  482. 

  483.         ::-webkit-scrollbar {
    484. 

  484.             width: 6px;
    485. 

  485.             height: 6px;
    486. 

  486.         }
    487. 

  487. 

  488.         ::-webkit-scrollbar-track {
    489. 

  489.             background: transparent;
    490. 

  490.         }
    491. 

  491. 

  492.         ::-webkit-scrollbar-thumb {
    493. 

  493.             background: #cbd5e1;
    494. 

  494.             border-radius: 3px;
    495. 

  495.         }
    496. 

  496.     </style>
    497. 

  497. </head>
    498. 

  498. 

  499. <body>
    500. 

  500.     <div class="app">
    501. 

  501.         <header class="navbar">
    502. 

  502.             <div class="nav-logo">中后台系统</div>
    503. 

  503.             <nav class="nav-menu">
    504. 

  504.                 <div class="nav-item">解构</div>
    505. 

  505.             </nav>
    506. 

  506.         </header>
    507. 

  507. 

  508.         <div class="main-container">
    509. 

  509.             <aside class="sidebar">
    510. 

  510.                 <div id="sidebarContent">
    511. 

  511.                     <ul class="sidebar-list" id="stageList"></ul>
    512. 

  512.                 </div>
    513. 

  513.             </aside>
    514. 

  514. 

  515.             <main class="content">
    516. 

  516.                 <div class="table-container" id="contentBody">
    517. 

  517.                     <div class="state-box">
    518. 

  518.                         <div class="spinner"></div>
    519. 

  519.                         <p>加载中...</p>
    520. 

  520.                     </div>
    521. 

  521.                 </div>
    522. 

  522.             </main>
    523. 

  523.         </div>
    524. 

  524.     </div>
    525. 

  525. 

  526.     <script>
    527. 

  527.         const IC = {
    528. 

  528.             file: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>',
    529. 

  529.             folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>',
    530. 

  530.             download: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>',
    531. 

  531.             chevron: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>',
    532. 

  532.             // Stage icons
    533. 

  533.             topic: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>',
    534. 

  534.             what: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>',
    535. 

  535.             craft: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.5 1.5"></path><path d="M14 11l5 5"></path></svg>',
    536. 

  536.             gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>',
    537. 

  537.         };
    538. 

  538. 

  539.         const PAGE_SIZE = 20;
    540. 

  540.         let S = { stages: [], stageProjectMap: {}, stage: null, records: [], skip: 0, hasMore: true, loading: false };
    541. 

  541. 

  542.         const $ = id => document.getElementById(id);
    543. 

  543.         function esc(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
    544. 

  544. 

  545.         function fmtSize(b) {
    546. 

  546.             if (!b && b !== 0) return '';
    547. 

  547.             const u = ['B', 'KB', 'MB', 'GB']; let i = 0, s = b;
    548. 

  548.             while (s >= 1024 && i < u.length - 1) { s /= 1024; i++; }
    549. 

  549.             return s.toFixed(i > 0 ? 1 : 0) + ' ' + u[i];
    550. 

  550.         }
    551. 

  551. 

  552.         async function api(url) {
    553. 

  553.             try {
    554. 

  554.                 const r = await fetch(url);
    555. 

  555.                 if (!r.ok) {
    556. 

  556.                     const text = await r.text();
    557. 

  557.                     throw new Error(`HTTP ${r.status}: ${text || r.statusText}`);
    558. 

  558.                 }
    559. 

  559.                 return r.json();
    560. 

  560.             } catch (e) {
    561. 

  561.                 console.error('API Error:', e);
    562. 

  562.                 throw e;
    563. 

  563.             }
    564. 

  564.         }
    565. 

  565. 

  566.         async function init() {
    567. 

  567.             try {
    568. 

  568.                 S.stages = await api('/stages/all');
    569. 

  569.                 S.stages.forEach(st => { S.stageProjectMap[st.name] = st.project_id; });
    570. 

  570.                 renderSidebar();
    571. 

  571.                 const first = document.querySelector('.sidebar-item');
    572. 

  572.                 if (first) first.click();
    573. 

  573.             } catch (e) {
    574. 

  574.                 $('contentBody').innerHTML = `<div class="state-box"><p style="color:red">初始化失败: ${esc(e.message)}</p></div>`;
    575. 

  575.             }
    576. 

  576.         }
    577. 

  577. 

  578.         function renderSidebar() {
    579. 

  579.             const list = $('stageList');
    580. 

  580.             list.innerHTML = '';
    581. 

  581. 

  582.             const STAGE_ORDER = ['how选题', 'what选题', 'what创作', 'what制作'];
    583. 

  583.             const STAGE_ICONS = {
    584. 

  584.                 'how选题': IC.topic,
    585. 

  585.                 'what选题': IC.what,
    586. 

  586.                 'what创作': IC.craft,
    587. 

  587.                 'what制作': IC.gear
    588. 

  588.             };
    589. 

  589. 

  590.             const sortedStages = [...S.stages].sort((a, b) => {
    591. 

  591.                 const idxA = STAGE_ORDER.indexOf(a.name);
    592. 

  592.                 const idxB = STAGE_ORDER.indexOf(b.name);
    593. 

  593.                 if (idxA !== -1 && idxB !== -1) return idxA - idxB;
    594. 

  594.                 if (idxA !== -1) return -1;
    595. 

  595.                 if (idxB !== -1) return 1;
    596. 

  596.                 return a.name.localeCompare(b.name);
    597. 

  597.             });
    598. 

  598. 

  599.             sortedStages.forEach(st => {
    600. 

  600.                 const li = document.createElement('li');
    601. 

  601.                 li.className = 'sidebar-item';
    602. 

  602.                 const icon = STAGE_ICONS[st.name] || IC.file;
    603. 

  603.                 li.innerHTML = `<span class="s-icon">${icon}</span>${esc(st.name)}`;
    604. 

  604.                 li.onclick = () => selectStage(li, st.name);
    605. 

  605.                 list.appendChild(li);
    606. 

  606.             });
    607. 

  607.         }
    608. 

  608. 

  609.         async function selectStage(el, stageName) {
    610. 

  610.             document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
    611. 

  611.             el.classList.add('active');
    612. 

  612.             S.stage = stageName; S.records = []; S.skip = 0;
    613. 

  613.             loadRecords();
    614. 

  614.         }
    615. 

  615. 

  616.         async function loadRecords() {
    617. 

  617.             if (S.loading) return;
    618. 

  618.             S.loading = true;
    619. 

  619.             $('contentBody').innerHTML = '<div class="state-box"><div class="spinner"></div><p>读取流水线数据...</p></div>';
    620. 

  620.             try {
    621. 

  621.                 const pid = S.stageProjectMap[S.stage];
    622. 

  622.                 if (!pid) throw new Error('项目 ID 不存在');
    623. 

  623. 

  624.                 const url = `/projects/${pid}/records?stage=${encodeURIComponent(S.stage)}&skip=0&limit=${PAGE_SIZE}`;
    625. 

  625.                 const data = await api(url);
    626. 

  626.                 S.records = Array.isArray(data) ? data : [];
    627. 

  627.                 renderTable();
    628. 

  628.             } catch (e) {
    629. 

  629.                 console.error('Load Records Error:', e);
    630. 

  630.                 $('contentBody').innerHTML = `<div class="state-box"><p style="color:red">加载失败: ${esc(e.message)}</p></div>`;
    631. 

  631.             }
    632. 

  632.             S.loading = false;
    633. 

  633.         }
    634. 

  634. 

  635.         function renderTable() {
    636. 

  636.             if (!S.records || !S.records.length) {
    637. 

  637.                 $('contentBody').innerHTML = '<div class="state-box"><h2>暂无记录</h2></div>';
    638. 

  638.                 return;
    639. 

  639.             }
    640. 

  640. 

  641.             const inLabels = new Set(), outLabels = new Set();
    642. 

  642.             S.records.forEach(r => {
    643. 

  643.                 if (r.inputs) r.inputs.forEach(f => inLabels.add(f.label || '输入'));
    644. 

  644.                 if (r.outputs) r.outputs.forEach(f => outLabels.add(f.label || '输出'));
    645. 

  645.             });
    646. 

  646. 

  647.             const sortedIn = Array.from(inLabels).sort();
    648. 

  648.             const sortedOut = Array.from(outLabels).sort();
    649. 

  649. 

  650.             let h = `<table class="records-table">
    651. 

  651.                 <thead>
    652. 

  652.                     <tr>
    653. 

  653.                         <th class="id-col">commit id</th>
    654. 

  654.                         <th class="msg-col">commit message</th>`;
    655. 

  655. 

  656.             sortedIn.forEach(l => h += `<th><div class="th-cell"><span class="col-badge badge-in">输入</span><span class="th-label">${esc(l)}</span></div></th>`);
    657. 

  657.             sortedOut.forEach(l => h += `<th><div class="th-cell"><span class="col-badge badge-out">输出</span><span class="th-label">${esc(l)}</span></div></th>`);
    658. 

  658.             h += `</tr></thead><tbody>`;
    659. 

  659. 

  660.             S.records.forEach(r => {
    661. 

  661.                 h += `<tr>
    662. 

  662.                     <td class="id-col"><span class="commit-badge">${esc(r.commit_id.substring(0, 8))}</span></td>
    663. 

  663.                     <td class="msg-col">${esc(r.commit_message || '无描述')}</td>`;
    664. 

  664. 

  665.                 sortedIn.forEach(l => {
    666. 

  666.                     const files = (r.inputs || []).filter(f => (f.label || '输入') === l);
    667. 

  667.                     h += `<td>${renderFiles(files)}</td>`;
    668. 

  668.                 });
    669. 

  669.                 sortedOut.forEach(l => {
    670. 

  670.                     const files = (r.outputs || []).filter(f => (f.label || '输出') === l);
    671. 

  671.                     h += `<td>${renderPlainFiles(files)}</td>`;
    672. 

  672.                 });
    673. 

  673.                 h += `</tr>`;
    674. 

  674.             });
    675. 

  675. 

  676.             h += `</tbody></table>`;
    677. 

  677.             $('contentBody').innerHTML = h;
    678. 

  678.         }
    679. 

  679. 

  680.         function buildFileTree(files) {
    681. 

  681.             const root = { dirs: {}, files: [], path: '' };
    682. 

  682.             if (!files || !files.length) return root;
    683. 

  683. 

  684.             files.forEach(f => {
    685. 

  685.                 const parts = (f.relative_path || '').split('/');
    686. 

  686.                 let cur = root;
    687. 

  687.                 for (let i = 0; i < parts.length - 1; i++) {
    688. 

  688.                     const p = parts[i];
    689. 

  689.                     if (!cur.dirs[p]) {
    690. 

  690.                         const curPath = cur.path ? cur.path + '/' + p : p;
    691. 

  691.                         cur.dirs[p] = { name: p, path: curPath, dirs: {}, files: [] };
    692. 

  692.                     }
    693. 

  693.                     cur = cur.dirs[p];
    694. 

  694.                 }
    695. 

  695.                 cur.files.push(f);
    696. 

  696.             });
    697. 

  697. 

  698.             function compact(node) {
    699. 

  699.                 Object.keys(node.dirs).forEach(k => compact(node.dirs[k]));
    700. 

  700.                 Object.keys(node.dirs).forEach(k => {
    701. 

  701.                     let child = node.dirs[k];
    702. 

  702.                     if (!child) return;
    703. 

  703.                     let changed = true;
    704. 

  704.                     while (changed) {
    705. 

  705.                         changed = false;
    706. 

  706.                         if (Object.keys(child.dirs).length === 1 && child.files.length === 0) {
    707. 

  707.                             const onlyChildKey = Object.keys(child.dirs)[0];
    708. 

  708.                             const onlyChild = child.dirs[onlyChildKey];
    709. 

  709.                             child.name = child.name + '/' + onlyChild.name;
    710. 

  710.                             child.path = onlyChild.path;
    711. 

  711.                             child.dirs = onlyChild.dirs;
    712. 

  712.                             child.files = onlyChild.files;
    713. 

  713.                             changed = true;
    714. 

  714.                         }
    715. 

  715.                     }
    716. 

  716.                 });
    717. 

  717.             }
    718. 

  718.             compact(root);
    719. 

  719.             return root;
    720. 

  720.         }
    721. 

  721. 

  722.         function countFiles(node) {
    723. 

  723.             let cnt = node.files.length;
    724. 

  724.             Object.values(node.dirs).forEach(d => { cnt += countFiles(d); });
    725. 

  725.             return cnt;
    726. 

  726.         }
    727. 

  727. 

  728.         function renderFileItem(f, depth = 0) {
    729. 

  729.             const name = f.relative_path ? f.relative_path.split('/').pop() : '未知文件';
    730. 

  730.             const padding = `padding-left: ${(depth === 0 ? 8 : 24 + (depth - 1) * 16)}px;`;
    731. 

  731.             return `
    732. 

  732.                 <div class="file-row" style="${padding}">
    733. 

  733.                     <span class="f-icon">${IC.file}</span>
    734. 

  734.                     <div class="f-info">
    735. 

  735.                         <div class="f-name-line">
    736. 

  736.                             <span class="f-name" title="${esc(f.relative_path)}">${esc(name)}</span>
    737. 

  737.                             <span class="f-size">${fmtSize(f.file_size)}</span>
    738. 

  738.                             <a class="btn-dl" href="/files/${f.id}/content" download title="下载">${IC.download}</a>
    739. 

  739.                         </div>
    740. 

  740.                         ${f.extracted_value ? `<div class="f-extracted">↳ ${esc(f.extracted_value)}</div>` : ''}
    741. 

  741.                     </div>
    742. 

  742.                 </div>`;
    743. 

  743.         }
    744. 

  744. 

  745.         function renderTree(node, depth) {
    746. 

  746.             let h = '';
    747. 

  747.             const dirKeys = Object.keys(node.dirs).sort((a, b) => a.localeCompare(b));
    748. 

  748.             dirKeys.forEach(k => {
    749. 

  749.                 const d = node.dirs[k];
    750. 

  750.                 const gid = 'fg_' + Math.random().toString(36).substr(2, 6);
    751. 

  751.                 const fileCount = countFiles(d);
    752. 

  752.                 const padding = `padding-left: ${depth * 16}px;`;
    753. 

  753.                 h += `
    754. 

  754.                     <div class="fg-header" style="${padding}" onclick="toggleFG('${gid}')">
    755. 

  755.                         <div class="fg-name-wrap">
    756. 

  756.                             <span class="fg-arrow" id="fa_${gid}">${IC.chevron}</span>
    757. 

  757.                             <span class="fg-icon">${IC.folder}</span>
    758. 

  758.                             <span class="fg-name" title="${esc(d.path)}">${esc(d.name)}/</span>
    759. 

  759.                             <span class="fg-count">${fileCount}</span>
    760. 

  760.                         </div>
    761. 

  761.                     </div>
    762. 

  762.                     <div class="fg-children" id="${gid}">
    763. 

  763.                         ${renderTree(d, depth + 1)}
    764. 

  764.                     </div>`;
    765. 

  765.             });
    766. 

  766. 

  767.             node.files.sort((a, b) => (a.relative_path || '').localeCompare(b.relative_path || '')).forEach(f => {
    768. 

  768.                 h += renderFileItem(f, depth);
    769. 

  769.             });
    770. 

  770.             return h;
    771. 

  771.         }
    772. 

  772. 

  773.         function toggleFG(id) {
    774. 

  774.             const ch = $(id), ar = $('fa_' + id);
    775. 

  775.             if (ch) ch.classList.toggle('open');
    776. 

  776.             if (ar) ar.classList.toggle('open');
    777. 

  777.         }
    778. 

  778. 

  779.         function renderFiles(files) {
    780. 

  780.             if (!files || !files.length) return '-';
    781. 

  781.             // 如果只有一个文件，不再使用文件夹树，直接展示文件
    782. 

  782.             if (files.length === 1) {
    783. 

  783.                 return renderPlainFiles(files);
    784. 

  784.             }
    785. 

  785.             const tree = buildFileTree(files);
    786. 

  786.             return `<div class="bubble-tree">${renderTree(tree, 0)}</div>`;
    787. 

  787.         }
    788. 

  788. 

  789.         function renderPlainFiles(files) {
    790. 

  790.             if (!files || !files.length) return '-';
    791. 

  791.             // Flat list for outputs, slightly cleaner padding
    792. 

  792.             return `<div class="bubble-tree" style="min-width: 180px;">${files.map(f => renderFileItem(f, 0)).join('')}</div>`;
    793. 

  793.         }
    794. 

  794. 

  795. 

  796.         init();
    797. 

  797.     </script>
    798. 

  798. </body>
    799. 

  799. 

  800. </html>
    801.