zlwuandCursor
de22678c87
Add approval instance drafts with menu badges, dual-track user/role read model and role bound names, form-designer outline docs, and bare-metal test deploy scripts. Ignore local test-server credential file. Co-authored-by: Cursor <cursoragent@cursor.com>
710 lines
21 KiB
HTML
710 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>OA 草稿箱 · Demo</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
:root {
|
|
--primary: #10b981;
|
|
--primary-dark: #059669;
|
|
--primary-bg: #ecfdf5;
|
|
--text: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border: #d9e8e2;
|
|
--bg-page: #f8fafc;
|
|
--surface: #ffffff;
|
|
--table-head: #f8fafc;
|
|
--row-alt: #fafafa;
|
|
--shadow: 0 1px 3px rgba(0,0,0,.05);
|
|
--radius: 10px;
|
|
--warn: #d97706;
|
|
--warn-bg: #fffbeb;
|
|
--danger: #dc2626;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
font-family: Inter, -apple-system, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
color: var(--text);
|
|
background: #eef2f0;
|
|
padding: 24px;
|
|
}
|
|
.page-head {
|
|
max-width: 1120px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
.page-head h1 {
|
|
margin: 0 0 6px;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
}
|
|
.page-head p {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
.tabs {
|
|
max-width: 1120px;
|
|
margin: 0 auto 16px;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tab {
|
|
border: 1px solid var(--border);
|
|
background: #fff;
|
|
color: var(--text-muted);
|
|
border-radius: 999px;
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.tab.active {
|
|
background: var(--primary-bg);
|
|
border-color: #a7f3d0;
|
|
color: var(--primary-dark);
|
|
}
|
|
.panel {
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
display: none;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
.panel.show { display: block; }
|
|
.note {
|
|
max-width: 1120px;
|
|
margin: 14px auto 0;
|
|
padding: 12px 14px;
|
|
background: #fff;
|
|
border: 1px dashed #a7f3d0;
|
|
border-radius: 8px;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
.note strong { color: var(--primary-dark); }
|
|
|
|
/* shell */
|
|
.shell { display: flex; min-height: 560px; }
|
|
.sidebar {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
border-right: 1px solid var(--border);
|
|
background: #fff;
|
|
padding: 16px 12px;
|
|
}
|
|
.logo {
|
|
font-weight: 700;
|
|
padding: 4px 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 12px;
|
|
}
|
|
.logo span { color: var(--primary); }
|
|
.nav-group {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
padding: 8px 12px;
|
|
letter-spacing: .02em;
|
|
}
|
|
.nav-item {
|
|
display: block;
|
|
padding: 9px 12px;
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.nav-item:hover { background: #f1f5f9; }
|
|
.nav-item.active {
|
|
background: var(--primary-bg);
|
|
color: var(--primary-dark);
|
|
font-weight: 600;
|
|
}
|
|
.nav-item.new {
|
|
position: relative;
|
|
}
|
|
.nav-item.new::after {
|
|
content: 'NEW';
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--warn);
|
|
background: var(--warn-bg);
|
|
border: 1px solid #fcd34d;
|
|
border-radius: 4px;
|
|
padding: 1px 5px;
|
|
}
|
|
.main { flex: 1; background: var(--bg-page); padding: 20px; min-width: 0; }
|
|
.content-card {
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.panel-top {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.panel-top h2 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.panel-top h2::before {
|
|
content: '';
|
|
width: 3px;
|
|
height: 16px;
|
|
background: var(--primary);
|
|
border-radius: 2px;
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.hint { color: var(--text-muted); font-size: 13px; margin-right: auto; }
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border);
|
|
background: #fff;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
.btn-main {
|
|
background: var(--primary);
|
|
border-color: var(--primary);
|
|
color: #fff;
|
|
}
|
|
.btn-main:hover { background: var(--primary-dark); }
|
|
.btn-ghost:hover { background: #f8fafc; }
|
|
.btn-warn {
|
|
background: #fff;
|
|
border-color: #fcd34d;
|
|
color: var(--warn);
|
|
}
|
|
.btn-danger {
|
|
color: var(--danger);
|
|
border-color: #fecaca;
|
|
}
|
|
.btn-op {
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td {
|
|
padding: 12px 14px;
|
|
text-align: center;
|
|
border-bottom: 1px solid #eef2f0;
|
|
font-size: 13px;
|
|
}
|
|
th {
|
|
background: var(--table-head);
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
tr:nth-child(even) td { background: var(--row-alt); }
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.tag-draft {
|
|
background: var(--warn-bg);
|
|
color: var(--warn);
|
|
}
|
|
.ops { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
|
|
|
|
/* start cards */
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
padding: 16px 20px 20px;
|
|
}
|
|
.app-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
.app-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: var(--primary-bg);
|
|
color: var(--primary-dark);
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
.app-body { flex: 1; min-width: 0; }
|
|
.app-name { font-weight: 600; display: block; }
|
|
.app-desc { color: var(--text-muted); font-size: 12px; }
|
|
|
|
/* dialog overlay mock */
|
|
.dlg-wrap {
|
|
position: relative;
|
|
min-height: 520px;
|
|
background: rgba(15, 23, 42, .35);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 28px 16px;
|
|
}
|
|
.dlg {
|
|
width: min(720px, 100%);
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 50px rgba(0,0,0,.18);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100vh - 120px);
|
|
}
|
|
.dlg-hd {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
}
|
|
.dlg-bd {
|
|
padding: 18px 20px;
|
|
overflow: auto;
|
|
flex: 1;
|
|
}
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
.field { display: flex; flex-direction: column; gap: 6px; }
|
|
.field.full { grid-column: 1 / -1; }
|
|
.field label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
font-weight: 600;
|
|
}
|
|
.field input, .field textarea, .field select {
|
|
height: 36px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 0 10px;
|
|
font: inherit;
|
|
color: var(--text);
|
|
background: #fff;
|
|
}
|
|
.field textarea {
|
|
height: 72px;
|
|
padding: 8px 10px;
|
|
resize: none;
|
|
}
|
|
.flow-preview {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: #fafafa;
|
|
}
|
|
.flow-preview .title {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
margin-bottom: 10px;
|
|
}
|
|
.steps {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.step {
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
font-size: 12px;
|
|
}
|
|
.step.on {
|
|
border-color: #a7f3d0;
|
|
background: var(--primary-bg);
|
|
color: var(--primary-dark);
|
|
font-weight: 600;
|
|
}
|
|
.arrow { color: var(--text-muted); font-size: 12px; }
|
|
.dlg-ft {
|
|
padding: 12px 20px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
background: #fff;
|
|
}
|
|
.change-callout {
|
|
margin: 0 0 12px;
|
|
padding: 10px 12px;
|
|
background: var(--warn-bg);
|
|
border: 1px solid #fcd34d;
|
|
border-radius: 8px;
|
|
color: #92400e;
|
|
font-size: 13px;
|
|
}
|
|
.pager {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
border-top: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
align-items: center;
|
|
}
|
|
.filter {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr) auto;
|
|
gap: 12px;
|
|
padding: 14px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: #fff;
|
|
}
|
|
.filter .field label { font-size: 11px; }
|
|
@media (max-width: 840px) {
|
|
.shell { flex-direction: column; }
|
|
.sidebar { width: 100%; }
|
|
.cards, .form-grid, .filter { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-head">
|
|
<h1>OA 审批 · 草稿箱 Demo</h1>
|
|
<p>对照 Fresh Mint：侧栏新增「草稿箱」、发起弹窗增加「暂存草稿」、草稿可再编辑 / 保存 / 提交。</p>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="menu" type="button">1. 菜单位置</button>
|
|
<button class="tab" data-tab="start" type="button">2. 发起弹窗（暂存）</button>
|
|
<button class="tab" data-tab="drafts" type="button">3. 草稿箱列表</button>
|
|
<button class="tab" data-tab="edit" type="button">4. 继续编辑草稿</button>
|
|
</div>
|
|
|
|
<!-- 1 menu -->
|
|
<section class="panel show" id="panel-menu">
|
|
<div class="shell">
|
|
<aside class="sidebar">
|
|
<div class="logo">中科兴皖 · <span>OA</span></div>
|
|
<div class="nav-group">OA审批</div>
|
|
<a class="nav-item" href="#">审批管理</a>
|
|
<a class="nav-item" href="#">发起审批</a>
|
|
<a class="nav-item active new" href="#">草稿箱</a>
|
|
<a class="nav-item" href="#">待办中心</a>
|
|
<a class="nav-item" href="#">已办中心</a>
|
|
<a class="nav-item" href="#">我发起的</a>
|
|
<a class="nav-item" href="#">抄送我的</a>
|
|
</aside>
|
|
<div class="main">
|
|
<div class="content-card">
|
|
<div class="panel-top"><h2>草稿箱</h2></div>
|
|
<div class="toolbar">
|
|
<div class="hint">仅展示当前登录人自己暂存的审批草稿</div>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>流程名称</th>
|
|
<th>最近保存</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>请假申请</td>
|
|
<td>2026-08-06 10:12</td>
|
|
<td><span class="tag tag-draft">草稿</span></td>
|
|
<td>
|
|
<div class="ops">
|
|
<button class="btn btn-op btn-main" type="button">编辑</button>
|
|
<button class="btn btn-op" type="button">提交</button>
|
|
<button class="btn btn-op btn-danger" type="button">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>费用报销</td>
|
|
<td>2026-08-05 18:40</td>
|
|
<td><span class="tag tag-draft">草稿</span></td>
|
|
<td>
|
|
<div class="ops">
|
|
<button class="btn btn-op btn-main" type="button">编辑</button>
|
|
<button class="btn btn-op" type="button">提交</button>
|
|
<button class="btn btn-op btn-danger" type="button">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2 start dialog -->
|
|
<section class="panel" id="panel-start">
|
|
<div class="dlg-wrap">
|
|
<div class="dlg">
|
|
<div class="dlg-hd">请假申请</div>
|
|
<div class="dlg-bd">
|
|
<p class="change-callout">相对现状：底栏由「取消 / 提交」变为「取消 / 暂存草稿 / 提交」。</p>
|
|
<div class="form-grid">
|
|
<div class="field">
|
|
<label>申请人</label>
|
|
<input value="张三" readonly />
|
|
</div>
|
|
<div class="field">
|
|
<label>所属部门</label>
|
|
<input value="研发中心 / 前端组" readonly />
|
|
</div>
|
|
<div class="field">
|
|
<label>请假类型</label>
|
|
<select>
|
|
<option>年假</option>
|
|
<option>事假</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>请假天数</label>
|
|
<input value="1.5" />
|
|
</div>
|
|
<div class="field full">
|
|
<label>请假事由</label>
|
|
<textarea>家庭事务，需请假半天办理…</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="flow-preview">
|
|
<div class="title">审批流预览</div>
|
|
<div class="steps">
|
|
<span class="step on">发起人 · 张三</span>
|
|
<span class="arrow">→</span>
|
|
<span class="step">直属主管 · 李四</span>
|
|
<span class="arrow">→</span>
|
|
<span class="step">人事确认</span>
|
|
<span class="arrow">→</span>
|
|
<span class="step">结束</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dlg-ft">
|
|
<button class="btn btn-ghost" type="button">✕ 取消</button>
|
|
<button class="btn btn-warn" type="button">💾 暂存草稿</button>
|
|
<button class="btn btn-main" type="button">✓ 提交</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3 drafts list -->
|
|
<section class="panel" id="panel-drafts">
|
|
<div class="shell">
|
|
<aside class="sidebar">
|
|
<div class="logo">中科兴皖 · <span>OA</span></div>
|
|
<div class="nav-group">OA审批</div>
|
|
<a class="nav-item" href="#">发起审批</a>
|
|
<a class="nav-item active" href="#">草稿箱</a>
|
|
<a class="nav-item" href="#">待办中心</a>
|
|
<a class="nav-item" href="#">我发起的</a>
|
|
</aside>
|
|
<div class="main">
|
|
<div class="content-card">
|
|
<div class="panel-top"><h2>草稿箱</h2></div>
|
|
<div class="filter">
|
|
<div class="field">
|
|
<label>流程名称</label>
|
|
<input placeholder="请输入流程名称" />
|
|
</div>
|
|
<div class="field">
|
|
<label>保存时间</label>
|
|
<input placeholder="开始日期 ~ 结束日期" />
|
|
</div>
|
|
<div class="field">
|
|
<label>模板分组</label>
|
|
<select><option>全部</option><option>人事</option><option>财务</option></select>
|
|
</div>
|
|
<div style="display:flex;align-items:flex-end;gap:8px;">
|
|
<button class="btn btn-main" type="button">查询</button>
|
|
<button class="btn" type="button">重置</button>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar">
|
|
<div class="hint">已选 0 项</div>
|
|
<button class="btn btn-danger" type="button">批量删除</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width:48px"><input type="checkbox" /></th>
|
|
<th>序号</th>
|
|
<th>流程名称</th>
|
|
<th>模板版本</th>
|
|
<th>最近保存</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><input type="checkbox" /></td>
|
|
<td>1</td>
|
|
<td>请假申请</td>
|
|
<td>v3</td>
|
|
<td>2026-08-06 10:12</td>
|
|
<td><span class="tag tag-draft">草稿</span></td>
|
|
<td>
|
|
<div class="ops">
|
|
<button class="btn btn-op btn-main" type="button">编辑</button>
|
|
<button class="btn btn-op" type="button">提交审批</button>
|
|
<button class="btn btn-op btn-danger" type="button">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" /></td>
|
|
<td>2</td>
|
|
<td>加班申请</td>
|
|
<td>v1</td>
|
|
<td>2026-08-04 09:22</td>
|
|
<td><span class="tag tag-draft">草稿</span></td>
|
|
<td>
|
|
<div class="ops">
|
|
<button class="btn btn-op btn-main" type="button">编辑</button>
|
|
<button class="btn btn-op" type="button">提交审批</button>
|
|
<button class="btn btn-op btn-danger" type="button">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><input type="checkbox" /></td>
|
|
<td>3</td>
|
|
<td>费用报销</td>
|
|
<td>v2</td>
|
|
<td>2026-08-01 21:05</td>
|
|
<td><span class="tag tag-draft">草稿</span></td>
|
|
<td>
|
|
<div class="ops">
|
|
<button class="btn btn-op btn-main" type="button">编辑</button>
|
|
<button class="btn btn-op" type="button">提交审批</button>
|
|
<button class="btn btn-op btn-danger" type="button">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="pager">共 3 条 · 每页 20 条 · 1 / 1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4 edit draft -->
|
|
<section class="panel" id="panel-edit">
|
|
<div class="dlg-wrap">
|
|
<div class="dlg">
|
|
<div class="dlg-hd">编辑草稿 · 请假申请</div>
|
|
<div class="dlg-bd">
|
|
<p class="change-callout">从草稿箱点「编辑」打开同一套发起表单；可再次「暂存草稿」或「提交」发起正式审批。</p>
|
|
<div class="form-grid">
|
|
<div class="field">
|
|
<label>申请人</label>
|
|
<input value="张三" readonly />
|
|
</div>
|
|
<div class="field">
|
|
<label>所属部门</label>
|
|
<input value="研发中心 / 前端组" readonly />
|
|
</div>
|
|
<div class="field">
|
|
<label>请假类型</label>
|
|
<select>
|
|
<option selected>年假</option>
|
|
<option>事假</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label>请假天数</label>
|
|
<input value="1.5" />
|
|
</div>
|
|
<div class="field full">
|
|
<label>请假事由</label>
|
|
<textarea>家庭事务，需请假半天办理…（草稿已回填）</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dlg-ft">
|
|
<button class="btn btn-ghost" type="button">✕ 取消</button>
|
|
<button class="btn btn-warn" type="button">💾 保存草稿</button>
|
|
<button class="btn btn-main" type="button">✓ 提交审批</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="note">
|
|
<strong>请确认：</strong>菜单放在「发起审批」正下方、弹窗三按钮（取消 / 暂存草稿 / 提交）、草稿箱支持编辑·提交·删除 —— 是否符合你们期望？
|
|
有偏好可点上方 Tab 对照后，在对话里告诉我要改哪里。
|
|
</div>
|
|
|
|
<script>
|
|
const tabs = document.querySelectorAll('.tab')
|
|
const panels = {
|
|
menu: document.getElementById('panel-menu'),
|
|
start: document.getElementById('panel-start'),
|
|
drafts: document.getElementById('panel-drafts'),
|
|
edit: document.getElementById('panel-edit')
|
|
}
|
|
tabs.forEach((tab) => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach((t) => t.classList.remove('active'))
|
|
tab.classList.add('active')
|
|
Object.values(panels).forEach((p) => p.classList.remove('show'))
|
|
panels[tab.dataset.tab].classList.add('show')
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|