| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709 |
- <!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>
|