consumable-merge-plan-b-demo.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>方案 B · 耗材管理融合页 UI Demo</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com" />
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  9. <link
  10. href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  11. rel="stylesheet"
  12. />
  13. <style>
  14. :root {
  15. --primary: #10b981;
  16. --primary-dark: #059669;
  17. --primary-bg: #ecfdf5;
  18. --text: #1e293b;
  19. --text-muted: #64748b;
  20. --border: #d9e8e2;
  21. --bg-page: #f8fafc;
  22. --surface: #ffffff;
  23. --table-head: #f8fafc;
  24. --row-alt: #fafafa;
  25. --row-hover: #f1f5f9;
  26. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  27. --radius: 10px;
  28. --sidebar-w: 220px;
  29. --header-h: 56px;
  30. --danger: #ef4444;
  31. --danger-bg: #fef2f2;
  32. --warning: #d97706;
  33. --warning-bg: #fffbeb;
  34. }
  35. * {
  36. box-sizing: border-box;
  37. }
  38. body {
  39. margin: 0;
  40. font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  41. font-size: 14px;
  42. line-height: 1.5;
  43. color: var(--text);
  44. background: var(--bg-page);
  45. }
  46. .layout {
  47. display: flex;
  48. min-height: 100vh;
  49. }
  50. .sidebar {
  51. width: var(--sidebar-w);
  52. flex-shrink: 0;
  53. background: var(--surface);
  54. border-right: 1px solid var(--border);
  55. padding: 20px 14px;
  56. }
  57. .logo {
  58. font-size: 15px;
  59. font-weight: 700;
  60. padding: 0 8px 16px;
  61. margin-bottom: 8px;
  62. border-bottom: 1px solid var(--border);
  63. }
  64. .logo span {
  65. color: var(--primary);
  66. }
  67. .nav-item {
  68. display: block;
  69. padding: 8px 12px;
  70. border-radius: 8px;
  71. color: var(--text-muted);
  72. font-size: 13px;
  73. margin-bottom: 2px;
  74. }
  75. .nav-item.is-active {
  76. background: var(--primary-bg);
  77. color: var(--primary-dark);
  78. font-weight: 600;
  79. }
  80. .nav-group {
  81. font-size: 11px;
  82. font-weight: 700;
  83. color: var(--text-muted);
  84. padding: 12px 12px 6px;
  85. letter-spacing: 0.02em;
  86. }
  87. .main {
  88. flex: 1;
  89. min-width: 0;
  90. display: flex;
  91. flex-direction: column;
  92. }
  93. .topbar {
  94. height: var(--header-h);
  95. background: var(--surface);
  96. border-bottom: 1px solid var(--border);
  97. display: flex;
  98. align-items: center;
  99. padding: 0 24px;
  100. font-size: 13px;
  101. color: var(--text-muted);
  102. }
  103. .topbar strong {
  104. color: var(--text);
  105. font-weight: 600;
  106. }
  107. .content {
  108. flex: 1;
  109. padding: 24px;
  110. overflow: auto;
  111. }
  112. .demo-banner {
  113. background: linear-gradient(90deg, #ecfdf5, #f0fdf4);
  114. border: 1px solid rgba(16, 185, 129, 0.25);
  115. border-radius: var(--radius);
  116. padding: 12px 16px;
  117. margin-bottom: 16px;
  118. font-size: 13px;
  119. color: var(--text);
  120. }
  121. .demo-banner strong {
  122. color: var(--primary-dark);
  123. }
  124. .demo-banner code {
  125. background: rgba(255, 255, 255, 0.7);
  126. padding: 1px 6px;
  127. border-radius: 4px;
  128. font-size: 12px;
  129. }
  130. .panel {
  131. background: var(--surface);
  132. border: 1px solid var(--border);
  133. border-radius: var(--radius);
  134. box-shadow: var(--shadow);
  135. }
  136. .panel-top {
  137. padding: 10px 16px;
  138. border-bottom: 1px solid var(--border);
  139. display: flex;
  140. align-items: center;
  141. justify-content: space-between;
  142. }
  143. .panel-top h2 {
  144. margin: 0;
  145. font-size: 14px;
  146. font-weight: 600;
  147. display: flex;
  148. align-items: center;
  149. gap: 8px;
  150. }
  151. .panel-top h2::before {
  152. content: '';
  153. width: 4px;
  154. height: 14px;
  155. border-radius: 999px;
  156. background: var(--primary);
  157. }
  158. .panel-top .badge-demo {
  159. font-size: 11px;
  160. font-weight: 600;
  161. color: var(--primary-dark);
  162. background: var(--primary-bg);
  163. border: 1px solid rgba(16, 185, 129, 0.2);
  164. padding: 2px 8px;
  165. border-radius: 6px;
  166. }
  167. /* 一级 Tab:实体类型 */
  168. .tabs-l1 {
  169. display: flex;
  170. gap: 0;
  171. padding: 0 16px;
  172. border-bottom: 1px solid var(--border);
  173. background: var(--surface);
  174. }
  175. .tabs-l1 button {
  176. appearance: none;
  177. border: none;
  178. background: transparent;
  179. font-family: inherit;
  180. font-size: 14px;
  181. font-weight: 500;
  182. color: var(--text-muted);
  183. padding: 12px 20px;
  184. cursor: pointer;
  185. position: relative;
  186. margin-bottom: -1px;
  187. }
  188. .tabs-l1 button:hover {
  189. color: var(--primary-dark);
  190. }
  191. .tabs-l1 button.is-active {
  192. color: var(--primary-dark);
  193. font-weight: 600;
  194. }
  195. .tabs-l1 button.is-active::after {
  196. content: '';
  197. position: absolute;
  198. left: 0;
  199. right: 0;
  200. bottom: 0;
  201. height: 2px;
  202. background: var(--primary);
  203. border-radius: 2px 2px 0 0;
  204. }
  205. /* 二级 Tab:仅「耗材」下 */
  206. .sub-tabs-wrap {
  207. padding: 12px 16px 0;
  208. background: var(--surface);
  209. border-bottom: 1px solid var(--border);
  210. }
  211. .sub-tabs-wrap[hidden] {
  212. display: none !important;
  213. }
  214. .sub-tabs-label {
  215. font-size: 11px;
  216. color: var(--text-muted);
  217. margin-bottom: 8px;
  218. }
  219. .tabs-l2 {
  220. display: inline-flex;
  221. gap: 4px;
  222. padding: 3px;
  223. background: var(--table-head);
  224. border: 1px solid var(--border);
  225. border-radius: 8px;
  226. margin-bottom: 12px;
  227. }
  228. .tabs-l2 button {
  229. appearance: none;
  230. border: none;
  231. background: transparent;
  232. font-family: inherit;
  233. font-size: 13px;
  234. font-weight: 500;
  235. color: var(--text-muted);
  236. padding: 6px 14px;
  237. border-radius: 6px;
  238. cursor: pointer;
  239. }
  240. .tabs-l2 button:hover {
  241. color: var(--text);
  242. }
  243. .tabs-l2 button.is-active {
  244. background: var(--surface);
  245. color: var(--primary-dark);
  246. font-weight: 600;
  247. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  248. }
  249. .tab-panel {
  250. display: none;
  251. }
  252. .tab-panel.is-active {
  253. display: block;
  254. }
  255. .filter-block {
  256. padding: 12px 16px 10px;
  257. border-bottom: 1px solid var(--border);
  258. }
  259. .filter-grid {
  260. display: grid;
  261. grid-template-columns: repeat(4, 1fr);
  262. gap: 10px 14px;
  263. margin-bottom: 10px;
  264. }
  265. @media (max-width: 1100px) {
  266. .filter-grid {
  267. grid-template-columns: repeat(2, 1fr);
  268. }
  269. }
  270. .filter-field label {
  271. display: block;
  272. font-size: 11px;
  273. font-weight: 500;
  274. color: var(--text-muted);
  275. margin-bottom: 4px;
  276. }
  277. .input,
  278. .select {
  279. width: 100%;
  280. height: 36px;
  281. border: 1px solid var(--border);
  282. border-radius: 8px;
  283. padding: 0 10px;
  284. font-size: 14px;
  285. font-family: inherit;
  286. color: var(--text);
  287. background: var(--surface);
  288. }
  289. .input:focus,
  290. .select:focus {
  291. outline: none;
  292. border-color: var(--primary);
  293. box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  294. }
  295. .filter-actions-row {
  296. display: flex;
  297. align-items: center;
  298. justify-content: space-between;
  299. gap: 12px;
  300. flex-wrap: wrap;
  301. }
  302. .filter-hint {
  303. font-size: 12px;
  304. color: var(--text-muted);
  305. }
  306. .filter-actions-end {
  307. display: flex;
  308. gap: 8px;
  309. }
  310. .btn {
  311. display: inline-flex;
  312. align-items: center;
  313. gap: 6px;
  314. height: 36px;
  315. padding: 0 14px;
  316. border-radius: 8px;
  317. font-size: 14px;
  318. font-weight: 500;
  319. font-family: inherit;
  320. cursor: pointer;
  321. border: 1px solid var(--border);
  322. background: var(--surface);
  323. color: var(--text);
  324. }
  325. .btn:hover {
  326. background: var(--row-alt);
  327. }
  328. .btn-primary {
  329. background: var(--primary);
  330. border-color: var(--primary);
  331. color: #fff;
  332. }
  333. .btn-primary:hover {
  334. background: var(--primary-dark);
  335. border-color: var(--primary-dark);
  336. }
  337. .btn-danger {
  338. color: var(--danger);
  339. border-color: #fecaca;
  340. }
  341. .btn-danger:hover {
  342. background: var(--danger-bg);
  343. }
  344. .btn:disabled {
  345. opacity: 0.45;
  346. cursor: not-allowed;
  347. }
  348. .list-toolbar {
  349. padding: 10px 16px;
  350. background: var(--table-head);
  351. border-bottom: 1px solid var(--border);
  352. }
  353. .list-toolbar-row {
  354. display: flex;
  355. flex-wrap: wrap;
  356. align-items: center;
  357. gap: 8px;
  358. }
  359. .list-toolbar-selected {
  360. font-size: 13px;
  361. color: var(--text-muted);
  362. margin-right: 4px;
  363. }
  364. .sel-num {
  365. color: var(--primary-dark);
  366. font-weight: 700;
  367. }
  368. .list-body {
  369. padding: 0;
  370. }
  371. .table-wrap {
  372. overflow-x: auto;
  373. }
  374. table.list-table {
  375. width: 100%;
  376. border-collapse: collapse;
  377. font-size: 13px;
  378. }
  379. table.list-table th,
  380. table.list-table td {
  381. padding: 10px 12px;
  382. text-align: center;
  383. border-bottom: 1px solid var(--border);
  384. white-space: nowrap;
  385. }
  386. table.list-table th {
  387. background: var(--table-head);
  388. color: var(--text-muted);
  389. font-weight: 600;
  390. font-size: 12px;
  391. }
  392. table.list-table tbody tr:nth-child(even) {
  393. background: var(--row-alt);
  394. }
  395. table.list-table tbody tr:hover {
  396. background: var(--row-hover);
  397. }
  398. .tag {
  399. display: inline-block;
  400. padding: 2px 8px;
  401. border-radius: 4px;
  402. font-size: 12px;
  403. font-weight: 500;
  404. }
  405. .tag.success {
  406. background: var(--primary-bg);
  407. color: var(--primary-dark);
  408. }
  409. .tag.danger {
  410. background: var(--danger-bg);
  411. color: var(--danger);
  412. }
  413. .tag.warning {
  414. background: var(--warning-bg);
  415. color: var(--warning);
  416. }
  417. .tag.info {
  418. background: #f1f5f9;
  419. color: #64748b;
  420. }
  421. .tag.primary {
  422. background: #eff6ff;
  423. color: #2563eb;
  424. }
  425. .btn-op {
  426. height: 28px;
  427. padding: 0 8px;
  428. font-size: 12px;
  429. border-radius: 6px;
  430. border: 1px solid var(--border);
  431. background: var(--surface);
  432. cursor: pointer;
  433. color: var(--text);
  434. }
  435. .btn-op:hover {
  436. border-color: var(--primary);
  437. color: var(--primary-dark);
  438. }
  439. .pagination {
  440. display: flex;
  441. align-items: center;
  442. justify-content: flex-end;
  443. gap: 12px;
  444. padding: 12px 16px;
  445. border-top: 1px solid var(--border);
  446. font-size: 13px;
  447. color: var(--text-muted);
  448. }
  449. .pager-btns {
  450. display: flex;
  451. gap: 4px;
  452. }
  453. .pager-btns button {
  454. min-width: 32px;
  455. height: 32px;
  456. border: 1px solid var(--border);
  457. background: var(--surface);
  458. border-radius: 6px;
  459. cursor: pointer;
  460. font-size: 13px;
  461. }
  462. .pager-btns button.is-active {
  463. background: var(--primary);
  464. border-color: var(--primary);
  465. color: #fff;
  466. }
  467. .structure-hint {
  468. margin: 16px;
  469. padding: 12px 14px;
  470. background: #f8fafc;
  471. border: 1px dashed var(--border);
  472. border-radius: 8px;
  473. font-size: 12px;
  474. color: var(--text-muted);
  475. line-height: 1.6;
  476. }
  477. .structure-hint b {
  478. color: var(--text);
  479. }
  480. .ic {
  481. width: 14px;
  482. height: 14px;
  483. display: inline-block;
  484. vertical-align: -2px;
  485. }
  486. </style>
  487. </head>
  488. <body>
  489. <div class="layout">
  490. <aside class="sidebar">
  491. <div class="logo">中科兴皖 <span>管理端</span></div>
  492. <div class="nav-group">生产管理</div>
  493. <div class="nav-item">工艺管理</div>
  494. <div class="nav-item is-active">耗材管理</div>
  495. <div class="nav-item" style="opacity: 0.45; text-decoration: line-through">耗材包管理</div>
  496. <div class="nav-item">试剂管理</div>
  497. <div class="nav-item">生产工单</div>
  498. </aside>
  499. <div class="main">
  500. <header class="topbar">
  501. 生产管理 / <strong>耗材管理</strong>
  502. <span style="margin-left: auto; font-size: 12px">方案 B 静态 Demo · 非真实数据</span>
  503. </header>
  504. <main class="content">
  505. <div class="demo-banner">
  506. <strong>方案 B:两级 Tab</strong> — 一级区分「耗材 / 耗材包」;仅在「耗材」下出现二级 Tab「耗材列表 /
  507. 变动记录」。侧栏合并后仅保留一个菜单「耗材管理」(灰线划掉的为将移除的菜单项示意)。
  508. 用浏览器直接打开本文件即可预览,路径:<code>docs/demos/consumable-merge-plan-b-demo.html</code>
  509. </div>
  510. <section class="panel" id="main-panel">
  511. <div class="panel-top">
  512. <h2>耗材管理</h2>
  513. <span class="badge-demo">融合页 · 方案 B</span>
  514. </div>
  515. <!-- 一级 Tab -->
  516. <div class="tabs-l1" role="tablist" aria-label="实体类型">
  517. <button type="button" class="is-active" data-l1="consumable" role="tab" aria-selected="true">
  518. 耗材
  519. </button>
  520. <button type="button" data-l1="pack" role="tab" aria-selected="false">耗材包</button>
  521. </div>
  522. <!-- 二级 Tab(仅耗材) -->
  523. <div class="sub-tabs-wrap" id="sub-tabs-wrap">
  524. <div class="sub-tabs-label">耗材视图</div>
  525. <div class="tabs-l2" role="tablist" aria-label="耗材子视图">
  526. <button type="button" class="is-active" data-l2="list" role="tab">耗材列表</button>
  527. <button type="button" data-l2="logs" role="tab">变动记录</button>
  528. </div>
  529. </div>
  530. <div class="structure-hint" id="structure-hint">
  531. 当前结构:<b>一级「耗材」</b> → <b>二级「耗材列表」</b>(筛选 + 工具栏 + 表格 + 分页)
  532. </div>
  533. <!-- ========== 耗材 · 列表 ========== -->
  534. <div class="tab-panel is-active" id="panel-consumable-list">
  535. <div class="filter-block">
  536. <div class="filter-grid">
  537. <div class="filter-field">
  538. <label>关键词</label>
  539. <input class="input" placeholder="耗材编码/名称" />
  540. </div>
  541. <div class="filter-field">
  542. <label>状态</label>
  543. <select class="select">
  544. <option>全部</option>
  545. <option>启用</option>
  546. <option>停用</option>
  547. </select>
  548. </div>
  549. </div>
  550. <div class="filter-actions-row">
  551. <span class="filter-hint">按编码、名称模糊查询,可按状态筛选。</span>
  552. <div class="filter-actions-end">
  553. <button type="button" class="btn">重置</button>
  554. <button type="button" class="btn btn-primary">搜索</button>
  555. </div>
  556. </div>
  557. </div>
  558. <div class="list-toolbar">
  559. <div class="list-toolbar-row">
  560. <span class="list-toolbar-selected">已选 <span class="sel-num">0</span> 项</span>
  561. <button type="button" class="btn btn-primary">新增耗材</button>
  562. <button type="button" class="btn">批量入库</button>
  563. <button type="button" class="btn">批量出库</button>
  564. <button type="button" class="btn btn-danger" disabled>批量删除</button>
  565. </div>
  566. </div>
  567. <div class="list-body">
  568. <div class="table-wrap">
  569. <table class="list-table">
  570. <thead>
  571. <tr>
  572. <th><input type="checkbox" /></th>
  573. <th>序号</th>
  574. <th>耗材编码</th>
  575. <th>耗材名称</th>
  576. <th>规格型号</th>
  577. <th>当前库存</th>
  578. <th>库存状态</th>
  579. <th>状态</th>
  580. <th>操作</th>
  581. </tr>
  582. </thead>
  583. <tbody>
  584. <tr>
  585. <td><input type="checkbox" /></td>
  586. <td>1</td>
  587. <td>HC-2024-001</td>
  588. <td>细胞培养瓶 25cm²</td>
  589. <td>25cm²</td>
  590. <td>128</td>
  591. <td><span class="tag success">正常</span></td>
  592. <td><span class="tag success">启用</span></td>
  593. <td>
  594. <button class="btn-op">入库</button>
  595. <button class="btn-op">出库</button>
  596. <button class="btn-op">更多</button>
  597. </td>
  598. </tr>
  599. <tr>
  600. <td><input type="checkbox" /></td>
  601. <td>2</td>
  602. <td>HC-2024-018</td>
  603. <td>无菌离心管 15mL</td>
  604. <td>15mL</td>
  605. <td>12</td>
  606. <td><span class="tag danger">库存预警</span></td>
  607. <td><span class="tag success">启用</span></td>
  608. <td>
  609. <button class="btn-op">入库</button>
  610. <button class="btn-op">出库</button>
  611. <button class="btn-op">更多</button>
  612. </td>
  613. </tr>
  614. <tr>
  615. <td><input type="checkbox" /></td>
  616. <td>3</td>
  617. <td>HC-2023-092</td>
  618. <td>胰酶-EDTA 0.25%</td>
  619. <td>100mL</td>
  620. <td>45</td>
  621. <td><span class="tag success">正常</span></td>
  622. <td><span class="tag info">停用</span></td>
  623. <td>
  624. <button class="btn-op">入库</button>
  625. <button class="btn-op">出库</button>
  626. <button class="btn-op">更多</button>
  627. </td>
  628. </tr>
  629. </tbody>
  630. </table>
  631. </div>
  632. <div class="pagination">
  633. <span>共 86 条</span>
  634. <div class="pager-btns">
  635. <button type="button">‹</button>
  636. <button type="button" class="is-active">1</button>
  637. <button type="button">2</button>
  638. <button type="button">›</button>
  639. </div>
  640. </div>
  641. </div>
  642. </div>
  643. <!-- ========== 耗材 · 变动记录 ========== -->
  644. <div class="tab-panel" id="panel-consumable-logs">
  645. <div class="filter-block">
  646. <div class="filter-grid">
  647. <div class="filter-field">
  648. <label>关键词</label>
  649. <input class="input" placeholder="耗材编码/名称" />
  650. </div>
  651. <div class="filter-field">
  652. <label>变动类型</label>
  653. <select class="select">
  654. <option>全部</option>
  655. <option>入库</option>
  656. <option>出库</option>
  657. </select>
  658. </div>
  659. <div class="filter-field">
  660. <label>时间范围</label>
  661. <input class="input" placeholder="开始 — 结束" />
  662. </div>
  663. </div>
  664. <div class="filter-actions-row">
  665. <span class="filter-hint">按耗材编码/名称、变动类型和时间范围查询变动记录。</span>
  666. <div class="filter-actions-end">
  667. <button type="button" class="btn">重置</button>
  668. <button type="button" class="btn btn-primary">搜索</button>
  669. </div>
  670. </div>
  671. </div>
  672. <div class="list-body">
  673. <div class="table-wrap">
  674. <table class="list-table">
  675. <thead>
  676. <tr>
  677. <th>序号</th>
  678. <th>耗材编码</th>
  679. <th>耗材名称</th>
  680. <th>变动类型</th>
  681. <th>变动数量</th>
  682. <th>变动后库存</th>
  683. <th>操作人</th>
  684. <th>变动时间</th>
  685. </tr>
  686. </thead>
  687. <tbody>
  688. <tr>
  689. <td>1</td>
  690. <td>HC-2024-001</td>
  691. <td>细胞培养瓶 25cm²</td>
  692. <td><span class="tag success">入库</span></td>
  693. <td>+50</td>
  694. <td>128</td>
  695. <td>张三</td>
  696. <td>2026-05-26 14:32</td>
  697. </tr>
  698. <tr>
  699. <td>2</td>
  700. <td>HC-2024-018</td>
  701. <td>无菌离心管 15mL</td>
  702. <td><span class="tag warning">出库</span></td>
  703. <td>-20</td>
  704. <td>12</td>
  705. <td>李四</td>
  706. <td>2026-05-25 09:15</td>
  707. </tr>
  708. </tbody>
  709. </table>
  710. </div>
  711. <div class="pagination">
  712. <span>共 312 条</span>
  713. <div class="pager-btns">
  714. <button type="button">‹</button>
  715. <button type="button" class="is-active">1</button>
  716. <button type="button">2</button>
  717. <button type="button">›</button>
  718. </div>
  719. </div>
  720. </div>
  721. </div>
  722. <!-- ========== 耗材包(无二级 Tab) ========== -->
  723. <div class="tab-panel" id="panel-pack-list">
  724. <div class="filter-block">
  725. <div class="filter-grid">
  726. <div class="filter-field">
  727. <label>关键词</label>
  728. <input class="input" placeholder="编号/名称" />
  729. </div>
  730. </div>
  731. <div class="filter-actions-row">
  732. <span class="filter-hint">按编号、名称模糊查询。</span>
  733. <div class="filter-actions-end">
  734. <button type="button" class="btn">重置</button>
  735. <button type="button" class="btn btn-primary">搜索</button>
  736. </div>
  737. </div>
  738. </div>
  739. <div class="list-toolbar">
  740. <div class="list-toolbar-row">
  741. <span class="list-toolbar-selected">已选 <span class="sel-num">0</span> 项</span>
  742. <button type="button" class="btn btn-primary">新增耗材包</button>
  743. <button type="button" class="btn btn-danger" disabled>批量删除</button>
  744. </div>
  745. </div>
  746. <div class="list-body">
  747. <div class="table-wrap">
  748. <table class="list-table">
  749. <thead>
  750. <tr>
  751. <th><input type="checkbox" /></th>
  752. <th>序号</th>
  753. <th>编号</th>
  754. <th>名称</th>
  755. <th>使用场景</th>
  756. <th>类型</th>
  757. <th>状态</th>
  758. <th>操作</th>
  759. </tr>
  760. </thead>
  761. <tbody>
  762. <tr>
  763. <td><input type="checkbox" /></td>
  764. <td>1</td>
  765. <td>PK-STD-01</td>
  766. <td>标准细胞制备包</td>
  767. <td>间充质干细胞制备</td>
  768. <td><span class="tag primary">标准耗材包</span></td>
  769. <td><span class="tag success">启用</span></td>
  770. <td>
  771. <button class="btn-op">查看</button>
  772. <button class="btn-op">编辑</button>
  773. <button class="btn-op">删除</button>
  774. </td>
  775. </tr>
  776. <tr>
  777. <td><input type="checkbox" /></td>
  778. <td>2</td>
  779. <td>PK-CUS-12</td>
  780. <td>质检取样专用包</td>
  781. <td>质检取样</td>
  782. <td><span class="tag warning">自定义耗材包</span></td>
  783. <td><span class="tag success">启用</span></td>
  784. <td>
  785. <button class="btn-op">查看</button>
  786. <button class="btn-op">编辑</button>
  787. <button class="btn-op">删除</button>
  788. </td>
  789. </tr>
  790. </tbody>
  791. </table>
  792. </div>
  793. <div class="pagination">
  794. <span>共 24 条</span>
  795. <div class="pager-btns">
  796. <button type="button">‹</button>
  797. <button type="button" class="is-active">1</button>
  798. <button type="button">›</button>
  799. </div>
  800. </div>
  801. </div>
  802. </div>
  803. </section>
  804. </main>
  805. </div>
  806. </div>
  807. <script>
  808. ;(function () {
  809. const l1Buttons = document.querySelectorAll('.tabs-l1 button')
  810. const l2Buttons = document.querySelectorAll('.tabs-l2 button')
  811. const subTabsWrap = document.getElementById('sub-tabs-wrap')
  812. const structureHint = document.getElementById('structure-hint')
  813. const panels = {
  814. 'consumable-list': document.getElementById('panel-consumable-list'),
  815. 'consumable-logs': document.getElementById('panel-consumable-logs'),
  816. 'pack-list': document.getElementById('panel-pack-list')
  817. }
  818. let l1 = 'consumable'
  819. let l2 = 'list'
  820. function updatePanels() {
  821. Object.values(panels).forEach((p) => p.classList.remove('is-active'))
  822. if (l1 === 'consumable') {
  823. subTabsWrap.hidden = false
  824. const key = l2 === 'logs' ? 'consumable-logs' : 'consumable-list'
  825. panels[key].classList.add('is-active')
  826. structureHint.innerHTML =
  827. l2 === 'logs'
  828. ? '当前结构:<b>一级「耗材」</b> → <b>二级「变动记录」</b>(无批量入库/出库,仅查询日志)'
  829. : '当前结构:<b>一级「耗材」</b> → <b>二级「耗材列表」</b>(筛选 + 工具栏 + 表格 + 分页)'
  830. } else {
  831. subTabsWrap.hidden = true
  832. panels['pack-list'].classList.add('is-active')
  833. structureHint.innerHTML =
  834. '当前结构:<b>一级「耗材包」</b>(无二级 Tab,直接进入包列表 CRUD)'
  835. }
  836. }
  837. l1Buttons.forEach((btn) => {
  838. btn.addEventListener('click', () => {
  839. l1 = btn.dataset.l1
  840. l1Buttons.forEach((b) => {
  841. b.classList.toggle('is-active', b === btn)
  842. b.setAttribute('aria-selected', b === btn ? 'true' : 'false')
  843. })
  844. updatePanels()
  845. })
  846. })
  847. l2Buttons.forEach((btn) => {
  848. btn.addEventListener('click', () => {
  849. l2 = btn.dataset.l2
  850. l2Buttons.forEach((b) => {
  851. b.classList.toggle('is-active', b === btn)
  852. })
  853. updatePanels()
  854. })
  855. })
  856. updatePanels()
  857. })()
  858. </script>
  859. </body>
  860. </html>