oa-approval-draft-box-demo.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
  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>OA 草稿箱 · Demo</title>
  7. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  8. <style>
  9. :root {
  10. --primary: #10b981;
  11. --primary-dark: #059669;
  12. --primary-bg: #ecfdf5;
  13. --text: #1e293b;
  14. --text-muted: #64748b;
  15. --border: #d9e8e2;
  16. --bg-page: #f8fafc;
  17. --surface: #ffffff;
  18. --table-head: #f8fafc;
  19. --row-alt: #fafafa;
  20. --shadow: 0 1px 3px rgba(0,0,0,.05);
  21. --radius: 10px;
  22. --warn: #d97706;
  23. --warn-bg: #fffbeb;
  24. --danger: #dc2626;
  25. }
  26. * { box-sizing: border-box; }
  27. body {
  28. margin: 0;
  29. font-family: Inter, -apple-system, sans-serif;
  30. font-size: 14px;
  31. line-height: 1.5;
  32. color: var(--text);
  33. background: #eef2f0;
  34. padding: 24px;
  35. }
  36. .page-head {
  37. max-width: 1120px;
  38. margin: 0 auto 20px;
  39. }
  40. .page-head h1 {
  41. margin: 0 0 6px;
  42. font-size: 22px;
  43. font-weight: 700;
  44. }
  45. .page-head p {
  46. margin: 0;
  47. color: var(--text-muted);
  48. font-size: 13px;
  49. }
  50. .tabs {
  51. max-width: 1120px;
  52. margin: 0 auto 16px;
  53. display: flex;
  54. gap: 8px;
  55. flex-wrap: wrap;
  56. }
  57. .tab {
  58. border: 1px solid var(--border);
  59. background: #fff;
  60. color: var(--text-muted);
  61. border-radius: 999px;
  62. padding: 8px 16px;
  63. font-size: 13px;
  64. font-weight: 600;
  65. cursor: pointer;
  66. }
  67. .tab.active {
  68. background: var(--primary-bg);
  69. border-color: #a7f3d0;
  70. color: var(--primary-dark);
  71. }
  72. .panel {
  73. max-width: 1120px;
  74. margin: 0 auto;
  75. display: none;
  76. background: var(--surface);
  77. border: 1px solid var(--border);
  78. border-radius: var(--radius);
  79. box-shadow: var(--shadow);
  80. overflow: hidden;
  81. }
  82. .panel.show { display: block; }
  83. .note {
  84. max-width: 1120px;
  85. margin: 14px auto 0;
  86. padding: 12px 14px;
  87. background: #fff;
  88. border: 1px dashed #a7f3d0;
  89. border-radius: 8px;
  90. color: var(--text-muted);
  91. font-size: 13px;
  92. }
  93. .note strong { color: var(--primary-dark); }
  94. /* shell */
  95. .shell { display: flex; min-height: 560px; }
  96. .sidebar {
  97. width: 220px;
  98. flex-shrink: 0;
  99. border-right: 1px solid var(--border);
  100. background: #fff;
  101. padding: 16px 12px;
  102. }
  103. .logo {
  104. font-weight: 700;
  105. padding: 4px 12px 16px;
  106. border-bottom: 1px solid var(--border);
  107. margin-bottom: 12px;
  108. }
  109. .logo span { color: var(--primary); }
  110. .nav-group {
  111. font-size: 12px;
  112. font-weight: 700;
  113. color: var(--text-muted);
  114. padding: 8px 12px;
  115. letter-spacing: .02em;
  116. }
  117. .nav-item {
  118. display: block;
  119. padding: 9px 12px;
  120. border-radius: 8px;
  121. color: var(--text);
  122. text-decoration: none;
  123. font-size: 13px;
  124. margin-bottom: 2px;
  125. }
  126. .nav-item:hover { background: #f1f5f9; }
  127. .nav-item.active {
  128. background: var(--primary-bg);
  129. color: var(--primary-dark);
  130. font-weight: 600;
  131. }
  132. .nav-item.new {
  133. position: relative;
  134. }
  135. .nav-item.new::after {
  136. content: 'NEW';
  137. position: absolute;
  138. right: 10px;
  139. top: 50%;
  140. transform: translateY(-50%);
  141. font-size: 10px;
  142. font-weight: 700;
  143. color: var(--warn);
  144. background: var(--warn-bg);
  145. border: 1px solid #fcd34d;
  146. border-radius: 4px;
  147. padding: 1px 5px;
  148. }
  149. .main { flex: 1; background: var(--bg-page); padding: 20px; min-width: 0; }
  150. .content-card {
  151. background: #fff;
  152. border: 1px solid var(--border);
  153. border-radius: var(--radius);
  154. overflow: hidden;
  155. }
  156. .panel-top {
  157. padding: 16px 20px;
  158. border-bottom: 1px solid var(--border);
  159. }
  160. .panel-top h2 {
  161. margin: 0;
  162. font-size: 16px;
  163. font-weight: 700;
  164. display: flex;
  165. align-items: center;
  166. gap: 8px;
  167. }
  168. .panel-top h2::before {
  169. content: '';
  170. width: 3px;
  171. height: 16px;
  172. background: var(--primary);
  173. border-radius: 2px;
  174. }
  175. .toolbar {
  176. display: flex;
  177. align-items: center;
  178. gap: 10px;
  179. padding: 12px 20px;
  180. border-bottom: 1px solid var(--border);
  181. }
  182. .hint { color: var(--text-muted); font-size: 13px; margin-right: auto; }
  183. .btn {
  184. display: inline-flex;
  185. align-items: center;
  186. gap: 6px;
  187. height: 36px;
  188. padding: 0 14px;
  189. border-radius: 8px;
  190. border: 1px solid var(--border);
  191. background: #fff;
  192. color: var(--text);
  193. font-size: 13px;
  194. font-weight: 500;
  195. cursor: pointer;
  196. }
  197. .btn-main {
  198. background: var(--primary);
  199. border-color: var(--primary);
  200. color: #fff;
  201. }
  202. .btn-main:hover { background: var(--primary-dark); }
  203. .btn-ghost:hover { background: #f8fafc; }
  204. .btn-warn {
  205. background: #fff;
  206. border-color: #fcd34d;
  207. color: var(--warn);
  208. }
  209. .btn-danger {
  210. color: var(--danger);
  211. border-color: #fecaca;
  212. }
  213. .btn-op {
  214. height: 30px;
  215. padding: 0 10px;
  216. font-size: 12px;
  217. }
  218. table { width: 100%; border-collapse: collapse; }
  219. th, td {
  220. padding: 12px 14px;
  221. text-align: center;
  222. border-bottom: 1px solid #eef2f0;
  223. font-size: 13px;
  224. }
  225. th {
  226. background: var(--table-head);
  227. color: var(--text-muted);
  228. font-weight: 600;
  229. font-size: 12px;
  230. }
  231. tr:nth-child(even) td { background: var(--row-alt); }
  232. .tag {
  233. display: inline-block;
  234. padding: 2px 8px;
  235. border-radius: 4px;
  236. font-size: 12px;
  237. font-weight: 600;
  238. }
  239. .tag-draft {
  240. background: var(--warn-bg);
  241. color: var(--warn);
  242. }
  243. .ops { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
  244. /* start cards */
  245. .cards {
  246. display: grid;
  247. grid-template-columns: repeat(2, 1fr);
  248. gap: 12px;
  249. padding: 16px 20px 20px;
  250. }
  251. .app-card {
  252. display: flex;
  253. align-items: center;
  254. gap: 12px;
  255. padding: 14px;
  256. border: 1px solid var(--border);
  257. border-radius: 10px;
  258. background: #fff;
  259. }
  260. .app-icon {
  261. width: 40px;
  262. height: 40px;
  263. border-radius: 10px;
  264. background: var(--primary-bg);
  265. color: var(--primary-dark);
  266. display: grid;
  267. place-items: center;
  268. font-weight: 700;
  269. flex-shrink: 0;
  270. }
  271. .app-body { flex: 1; min-width: 0; }
  272. .app-name { font-weight: 600; display: block; }
  273. .app-desc { color: var(--text-muted); font-size: 12px; }
  274. /* dialog overlay mock */
  275. .dlg-wrap {
  276. position: relative;
  277. min-height: 520px;
  278. background: rgba(15, 23, 42, .35);
  279. display: flex;
  280. align-items: flex-start;
  281. justify-content: center;
  282. padding: 28px 16px;
  283. }
  284. .dlg {
  285. width: min(720px, 100%);
  286. background: #fff;
  287. border-radius: 12px;
  288. box-shadow: 0 20px 50px rgba(0,0,0,.18);
  289. overflow: hidden;
  290. display: flex;
  291. flex-direction: column;
  292. max-height: calc(100vh - 120px);
  293. }
  294. .dlg-hd {
  295. padding: 16px 20px;
  296. border-bottom: 1px solid var(--border);
  297. font-weight: 700;
  298. font-size: 16px;
  299. }
  300. .dlg-bd {
  301. padding: 18px 20px;
  302. overflow: auto;
  303. flex: 1;
  304. }
  305. .form-grid {
  306. display: grid;
  307. grid-template-columns: 1fr 1fr;
  308. gap: 14px;
  309. }
  310. .field { display: flex; flex-direction: column; gap: 6px; }
  311. .field.full { grid-column: 1 / -1; }
  312. .field label {
  313. font-size: 12px;
  314. color: var(--text-muted);
  315. font-weight: 600;
  316. }
  317. .field input, .field textarea, .field select {
  318. height: 36px;
  319. border: 1px solid var(--border);
  320. border-radius: 8px;
  321. padding: 0 10px;
  322. font: inherit;
  323. color: var(--text);
  324. background: #fff;
  325. }
  326. .field textarea {
  327. height: 72px;
  328. padding: 8px 10px;
  329. resize: none;
  330. }
  331. .flow-preview {
  332. margin-top: 16px;
  333. padding: 12px;
  334. border: 1px solid var(--border);
  335. border-radius: 8px;
  336. background: #fafafa;
  337. }
  338. .flow-preview .title {
  339. font-size: 12px;
  340. font-weight: 700;
  341. color: var(--text-muted);
  342. margin-bottom: 10px;
  343. }
  344. .steps {
  345. display: flex;
  346. gap: 8px;
  347. align-items: center;
  348. flex-wrap: wrap;
  349. }
  350. .step {
  351. padding: 6px 10px;
  352. border-radius: 6px;
  353. background: #fff;
  354. border: 1px solid var(--border);
  355. font-size: 12px;
  356. }
  357. .step.on {
  358. border-color: #a7f3d0;
  359. background: var(--primary-bg);
  360. color: var(--primary-dark);
  361. font-weight: 600;
  362. }
  363. .arrow { color: var(--text-muted); font-size: 12px; }
  364. .dlg-ft {
  365. padding: 12px 20px;
  366. border-top: 1px solid var(--border);
  367. display: flex;
  368. justify-content: flex-end;
  369. gap: 10px;
  370. background: #fff;
  371. }
  372. .change-callout {
  373. margin: 0 0 12px;
  374. padding: 10px 12px;
  375. background: var(--warn-bg);
  376. border: 1px solid #fcd34d;
  377. border-radius: 8px;
  378. color: #92400e;
  379. font-size: 13px;
  380. }
  381. .pager {
  382. display: flex;
  383. justify-content: flex-end;
  384. gap: 8px;
  385. padding: 12px 20px;
  386. border-top: 1px solid var(--border);
  387. color: var(--text-muted);
  388. font-size: 12px;
  389. align-items: center;
  390. }
  391. .filter {
  392. display: grid;
  393. grid-template-columns: repeat(3, 1fr) auto;
  394. gap: 12px;
  395. padding: 14px 20px;
  396. border-bottom: 1px solid var(--border);
  397. background: #fff;
  398. }
  399. .filter .field label { font-size: 11px; }
  400. @media (max-width: 840px) {
  401. .shell { flex-direction: column; }
  402. .sidebar { width: 100%; }
  403. .cards, .form-grid, .filter { grid-template-columns: 1fr; }
  404. }
  405. </style>
  406. </head>
  407. <body>
  408. <div class="page-head">
  409. <h1>OA 审批 · 草稿箱 Demo</h1>
  410. <p>对照 Fresh Mint:侧栏新增「草稿箱」、发起弹窗增加「暂存草稿」、草稿可再编辑 / 保存 / 提交。</p>
  411. </div>
  412. <div class="tabs">
  413. <button class="tab active" data-tab="menu" type="button">1. 菜单位置</button>
  414. <button class="tab" data-tab="start" type="button">2. 发起弹窗(暂存)</button>
  415. <button class="tab" data-tab="drafts" type="button">3. 草稿箱列表</button>
  416. <button class="tab" data-tab="edit" type="button">4. 继续编辑草稿</button>
  417. </div>
  418. <!-- 1 menu -->
  419. <section class="panel show" id="panel-menu">
  420. <div class="shell">
  421. <aside class="sidebar">
  422. <div class="logo">中科兴皖 · <span>OA</span></div>
  423. <div class="nav-group">OA审批</div>
  424. <a class="nav-item" href="#">审批管理</a>
  425. <a class="nav-item" href="#">发起审批</a>
  426. <a class="nav-item active new" href="#">草稿箱</a>
  427. <a class="nav-item" href="#">待办中心</a>
  428. <a class="nav-item" href="#">已办中心</a>
  429. <a class="nav-item" href="#">我发起的</a>
  430. <a class="nav-item" href="#">抄送我的</a>
  431. </aside>
  432. <div class="main">
  433. <div class="content-card">
  434. <div class="panel-top"><h2>草稿箱</h2></div>
  435. <div class="toolbar">
  436. <div class="hint">仅展示当前登录人自己暂存的审批草稿</div>
  437. </div>
  438. <table>
  439. <thead>
  440. <tr>
  441. <th>序号</th>
  442. <th>流程名称</th>
  443. <th>最近保存</th>
  444. <th>状态</th>
  445. <th>操作</th>
  446. </tr>
  447. </thead>
  448. <tbody>
  449. <tr>
  450. <td>1</td>
  451. <td>请假申请</td>
  452. <td>2026-08-06 10:12</td>
  453. <td><span class="tag tag-draft">草稿</span></td>
  454. <td>
  455. <div class="ops">
  456. <button class="btn btn-op btn-main" type="button">编辑</button>
  457. <button class="btn btn-op" type="button">提交</button>
  458. <button class="btn btn-op btn-danger" type="button">删除</button>
  459. </div>
  460. </td>
  461. </tr>
  462. <tr>
  463. <td>2</td>
  464. <td>费用报销</td>
  465. <td>2026-08-05 18:40</td>
  466. <td><span class="tag tag-draft">草稿</span></td>
  467. <td>
  468. <div class="ops">
  469. <button class="btn btn-op btn-main" type="button">编辑</button>
  470. <button class="btn btn-op" type="button">提交</button>
  471. <button class="btn btn-op btn-danger" type="button">删除</button>
  472. </div>
  473. </td>
  474. </tr>
  475. </tbody>
  476. </table>
  477. </div>
  478. </div>
  479. </div>
  480. </section>
  481. <!-- 2 start dialog -->
  482. <section class="panel" id="panel-start">
  483. <div class="dlg-wrap">
  484. <div class="dlg">
  485. <div class="dlg-hd">请假申请</div>
  486. <div class="dlg-bd">
  487. <p class="change-callout">相对现状:底栏由「取消 / 提交」变为「取消 / 暂存草稿 / 提交」。</p>
  488. <div class="form-grid">
  489. <div class="field">
  490. <label>申请人</label>
  491. <input value="张三" readonly />
  492. </div>
  493. <div class="field">
  494. <label>所属部门</label>
  495. <input value="研发中心 / 前端组" readonly />
  496. </div>
  497. <div class="field">
  498. <label>请假类型</label>
  499. <select>
  500. <option>年假</option>
  501. <option>事假</option>
  502. </select>
  503. </div>
  504. <div class="field">
  505. <label>请假天数</label>
  506. <input value="1.5" />
  507. </div>
  508. <div class="field full">
  509. <label>请假事由</label>
  510. <textarea>家庭事务,需请假半天办理…</textarea>
  511. </div>
  512. </div>
  513. <div class="flow-preview">
  514. <div class="title">审批流预览</div>
  515. <div class="steps">
  516. <span class="step on">发起人 · 张三</span>
  517. <span class="arrow">→</span>
  518. <span class="step">直属主管 · 李四</span>
  519. <span class="arrow">→</span>
  520. <span class="step">人事确认</span>
  521. <span class="arrow">→</span>
  522. <span class="step">结束</span>
  523. </div>
  524. </div>
  525. </div>
  526. <div class="dlg-ft">
  527. <button class="btn btn-ghost" type="button">✕ 取消</button>
  528. <button class="btn btn-warn" type="button">💾 暂存草稿</button>
  529. <button class="btn btn-main" type="button">✓ 提交</button>
  530. </div>
  531. </div>
  532. </div>
  533. </section>
  534. <!-- 3 drafts list -->
  535. <section class="panel" id="panel-drafts">
  536. <div class="shell">
  537. <aside class="sidebar">
  538. <div class="logo">中科兴皖 · <span>OA</span></div>
  539. <div class="nav-group">OA审批</div>
  540. <a class="nav-item" href="#">发起审批</a>
  541. <a class="nav-item active" href="#">草稿箱</a>
  542. <a class="nav-item" href="#">待办中心</a>
  543. <a class="nav-item" href="#">我发起的</a>
  544. </aside>
  545. <div class="main">
  546. <div class="content-card">
  547. <div class="panel-top"><h2>草稿箱</h2></div>
  548. <div class="filter">
  549. <div class="field">
  550. <label>流程名称</label>
  551. <input placeholder="请输入流程名称" />
  552. </div>
  553. <div class="field">
  554. <label>保存时间</label>
  555. <input placeholder="开始日期 ~ 结束日期" />
  556. </div>
  557. <div class="field">
  558. <label>模板分组</label>
  559. <select><option>全部</option><option>人事</option><option>财务</option></select>
  560. </div>
  561. <div style="display:flex;align-items:flex-end;gap:8px;">
  562. <button class="btn btn-main" type="button">查询</button>
  563. <button class="btn" type="button">重置</button>
  564. </div>
  565. </div>
  566. <div class="toolbar">
  567. <div class="hint">已选 0 项</div>
  568. <button class="btn btn-danger" type="button">批量删除</button>
  569. </div>
  570. <table>
  571. <thead>
  572. <tr>
  573. <th style="width:48px"><input type="checkbox" /></th>
  574. <th>序号</th>
  575. <th>流程名称</th>
  576. <th>模板版本</th>
  577. <th>最近保存</th>
  578. <th>状态</th>
  579. <th>操作</th>
  580. </tr>
  581. </thead>
  582. <tbody>
  583. <tr>
  584. <td><input type="checkbox" /></td>
  585. <td>1</td>
  586. <td>请假申请</td>
  587. <td>v3</td>
  588. <td>2026-08-06 10:12</td>
  589. <td><span class="tag tag-draft">草稿</span></td>
  590. <td>
  591. <div class="ops">
  592. <button class="btn btn-op btn-main" type="button">编辑</button>
  593. <button class="btn btn-op" type="button">提交审批</button>
  594. <button class="btn btn-op btn-danger" type="button">删除</button>
  595. </div>
  596. </td>
  597. </tr>
  598. <tr>
  599. <td><input type="checkbox" /></td>
  600. <td>2</td>
  601. <td>加班申请</td>
  602. <td>v1</td>
  603. <td>2026-08-04 09:22</td>
  604. <td><span class="tag tag-draft">草稿</span></td>
  605. <td>
  606. <div class="ops">
  607. <button class="btn btn-op btn-main" type="button">编辑</button>
  608. <button class="btn btn-op" type="button">提交审批</button>
  609. <button class="btn btn-op btn-danger" type="button">删除</button>
  610. </div>
  611. </td>
  612. </tr>
  613. <tr>
  614. <td><input type="checkbox" /></td>
  615. <td>3</td>
  616. <td>费用报销</td>
  617. <td>v2</td>
  618. <td>2026-08-01 21:05</td>
  619. <td><span class="tag tag-draft">草稿</span></td>
  620. <td>
  621. <div class="ops">
  622. <button class="btn btn-op btn-main" type="button">编辑</button>
  623. <button class="btn btn-op" type="button">提交审批</button>
  624. <button class="btn btn-op btn-danger" type="button">删除</button>
  625. </div>
  626. </td>
  627. </tr>
  628. </tbody>
  629. </table>
  630. <div class="pager">共 3 条 · 每页 20 条 · 1 / 1</div>
  631. </div>
  632. </div>
  633. </div>
  634. </section>
  635. <!-- 4 edit draft -->
  636. <section class="panel" id="panel-edit">
  637. <div class="dlg-wrap">
  638. <div class="dlg">
  639. <div class="dlg-hd">编辑草稿 · 请假申请</div>
  640. <div class="dlg-bd">
  641. <p class="change-callout">从草稿箱点「编辑」打开同一套发起表单;可再次「暂存草稿」或「提交」发起正式审批。</p>
  642. <div class="form-grid">
  643. <div class="field">
  644. <label>申请人</label>
  645. <input value="张三" readonly />
  646. </div>
  647. <div class="field">
  648. <label>所属部门</label>
  649. <input value="研发中心 / 前端组" readonly />
  650. </div>
  651. <div class="field">
  652. <label>请假类型</label>
  653. <select>
  654. <option selected>年假</option>
  655. <option>事假</option>
  656. </select>
  657. </div>
  658. <div class="field">
  659. <label>请假天数</label>
  660. <input value="1.5" />
  661. </div>
  662. <div class="field full">
  663. <label>请假事由</label>
  664. <textarea>家庭事务,需请假半天办理…(草稿已回填)</textarea>
  665. </div>
  666. </div>
  667. </div>
  668. <div class="dlg-ft">
  669. <button class="btn btn-ghost" type="button">✕ 取消</button>
  670. <button class="btn btn-warn" type="button">💾 保存草稿</button>
  671. <button class="btn btn-main" type="button">✓ 提交审批</button>
  672. </div>
  673. </div>
  674. </div>
  675. </section>
  676. <div class="note">
  677. <strong>请确认:</strong>菜单放在「发起审批」正下方、弹窗三按钮(取消 / 暂存草稿 / 提交)、草稿箱支持编辑·提交·删除 —— 是否符合你们期望?
  678. 有偏好可点上方 Tab 对照后,在对话里告诉我要改哪里。
  679. </div>
  680. <script>
  681. const tabs = document.querySelectorAll('.tab')
  682. const panels = {
  683. menu: document.getElementById('panel-menu'),
  684. start: document.getElementById('panel-start'),
  685. drafts: document.getElementById('panel-drafts'),
  686. edit: document.getElementById('panel-edit')
  687. }
  688. tabs.forEach((tab) => {
  689. tab.addEventListener('click', () => {
  690. tabs.forEach((t) => t.classList.remove('active'))
  691. tab.classList.add('active')
  692. Object.values(panels).forEach((p) => p.classList.remove('show'))
  693. panels[tab.dataset.tab].classList.add('show')
  694. })
  695. })
  696. </script>
  697. </body>
  698. </html>