wangjia
30a8e791a3
- public_product_screen: 1:1 复刻设计稿，新增商品介绍、批次防伪（自定义圆形印章）、完整商品参数表、门店营业时间、页脚链接 - app_theme: 完整品牌色系（brand/gray/accent/semantic） - shop model: 新增 business_hours 字段，public 接口同步返回 - nginx: 新增 /product/ → Flutter app 扫码入口，修复 /docs /download html 后缀兼容 - web/: 新增宣传主页、功能页、文档页、扫码 HTML 及设计资源 - app_shell: 界面优化 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
279 lines
14 KiB
HTML
279 lines
14 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>审批流程功能 — 岩美酒库管理系统</title>
|
||
<link rel="stylesheet" href="../assets/colors_and_type.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-surface); -webkit-font-smoothing: antialiased; }
|
||
a { color: inherit; text-decoration: none; }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background 120ms; text-decoration: none; }
|
||
.btn-primary { background: var(--brand-500); color: #fff; }
|
||
.btn-primary:hover { background: var(--brand-600); }
|
||
.btn-secondary { background: var(--gray-0); color: var(--brand-900); border-color: var(--border-default); }
|
||
.btn-secondary:hover { background: var(--gray-50); }
|
||
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
|
||
.icon { width: 18px; height: 18px; }
|
||
|
||
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
|
||
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
|
||
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--brand-900); }
|
||
.nav-brand img { height: 30px; }
|
||
.nav-links { display: flex; gap: 2px; }
|
||
.nav-links a { padding: 7px 14px; border-radius: var(--radius-md); font-size: 14px; color: var(--gray-700); transition: background 120ms; }
|
||
.nav-links a:hover { background: var(--gray-100); }
|
||
.nav-links a.active { color: var(--brand-500); font-weight: 500; }
|
||
.nav-cta { display: flex; gap: 10px; }
|
||
|
||
.page-hero { padding: 80px 0 64px; }
|
||
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--brand-500); text-transform: uppercase; margin-bottom: 12px; }
|
||
.page-hero h1 { font-size: 44px; font-weight: 700; color: var(--brand-900); margin: 0 0 18px; line-height: 1.15; }
|
||
.page-hero .lead { font-size: 18px; line-height: 1.65; color: var(--gray-600); margin: 0 0 36px; max-width: 600px; }
|
||
.hero-actions { display: flex; gap: 12px; }
|
||
|
||
/* Workflow steps */
|
||
.workflow-section { padding: 72px 0; background: var(--gray-50); }
|
||
.section-title { font-size: 28px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
|
||
.section-sub { font-size: 15px; color: var(--fg-muted); margin: 0 0 48px; line-height: 1.6; max-width: 560px; }
|
||
.steps { display: flex; flex-direction: column; gap: 0; max-width: 800px; }
|
||
.step { display: flex; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--border-subtle); }
|
||
.step:last-child { border-bottom: none; }
|
||
.step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
|
||
.step-content { flex: 1; }
|
||
.step-content h3 { font-size: 16px; font-weight: 600; color: var(--brand-900); margin: 0 0 6px; margin-top: 6px; }
|
||
.step-content p { font-size: 14px; line-height: 1.65; color: var(--fg-muted); margin: 0; }
|
||
.step-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; margin-top: 8px; }
|
||
.step-badge.blue { background: var(--brand-50); color: var(--brand-700); }
|
||
.step-badge.amber { background: var(--warning-50); color: var(--warning-700); }
|
||
.step-badge.green { background: var(--success-50); color: var(--success-700); }
|
||
.step-badge.red { background: var(--danger-50); color: var(--danger-700); }
|
||
|
||
/* Role matrix */
|
||
.matrix-section { padding: 72px 0; }
|
||
.matrix-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
|
||
.matrix-table th { background: var(--gray-50); border: 1px solid var(--border-default); padding: 10px 16px; text-align: left; font-size: 13px; font-weight: 600; color: var(--gray-700); }
|
||
.matrix-table td { border: 1px solid var(--border-default); padding: 10px 16px; font-size: 13px; vertical-align: middle; }
|
||
.perm-yes { display: inline-flex; align-items: center; gap: 5px; color: var(--success-700); font-weight: 500; }
|
||
.perm-yes i { width: 14px; height: 14px; }
|
||
.perm-no { color: var(--gray-400); }
|
||
|
||
/* Audit log */
|
||
.audit-section { padding: 72px 0; background: var(--gray-50); }
|
||
.audit-log { background: var(--gray-0); border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; max-width: 720px; }
|
||
.audit-header { padding: 14px 20px; border-bottom: 1px solid var(--border-default); background: var(--gray-50); display: flex; align-items: center; gap: 8px; }
|
||
.audit-header-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
|
||
.audit-row { display: flex; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle); align-items: flex-start; }
|
||
.audit-row:last-child { border-bottom: none; }
|
||
.audit-time { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); min-width: 80px; padding-top: 2px; }
|
||
.audit-user { font-size: 12px; font-weight: 500; color: var(--brand-700); min-width: 64px; padding-top: 2px; }
|
||
.audit-action { font-size: 13px; color: var(--fg-default); }
|
||
.audit-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
|
||
.dot-green { background: var(--success-500); }
|
||
.dot-amber { background: var(--warning-500); }
|
||
.dot-blue { background: var(--brand-400); }
|
||
.dot-red { background: var(--danger-500); }
|
||
|
||
.cta-section { padding: 80px 0; text-align: center; border-top: 1px solid var(--border-default); }
|
||
.cta-section h2 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 14px; }
|
||
.cta-section p { font-size: 16px; color: var(--fg-muted); margin: 0 0 32px; }
|
||
.cta-actions { display: flex; justify-content: center; gap: 14px; }
|
||
|
||
footer { background: var(--gray-50); border-top: 1px solid var(--border-default); padding: 40px 0; }
|
||
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
|
||
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--brand-900); }
|
||
.footer-brand img { height: 24px; }
|
||
.footer-copy { font-size: 12px; color: var(--fg-subtle); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="nav">
|
||
<div class="nav-inner">
|
||
<a href="/" class="nav-brand"><img src="../assets/logo-full.svg" alt="岩美" /></a>
|
||
<div class="nav-links">
|
||
<a href="/features/inventory.html" class="active">功能</a>
|
||
<a href="/docs.html">文档</a>
|
||
<a href="/download.html">下载</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a href="/app/" class="btn btn-primary">进入管理端 <i data-lucide="arrow-right" class="icon"></i></a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="page-hero">
|
||
<div class="container">
|
||
<div class="eyebrow">审批流程</div>
|
||
<h1>每笔操作都有<br/>经手记录</h1>
|
||
<p class="lead">岩美的审批机制确保每张入库单和出库单在生效前经过明确的负责人审核，防止未经授权的库存变动。</p>
|
||
<div class="hero-actions">
|
||
<a href="/app/" class="btn btn-primary btn-lg">立即体验 <i data-lucide="arrow-right" class="icon"></i></a>
|
||
<a href="/docs.html#stock-in" class="btn btn-secondary btn-lg">查看文档</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Workflow -->
|
||
<section class="workflow-section">
|
||
<div class="container">
|
||
<div class="section-title">审批流程步骤</div>
|
||
<p class="section-sub">以入库单为例，完整的操作流程如下：</p>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-content">
|
||
<h3>创建入库单</h3>
|
||
<p>库管或采购员录入入库信息：供应商、仓库、商品明细（含批次号、生产日期）。保存为草稿，随时修改。</p>
|
||
<span class="step-badge blue"><i data-lucide="file-edit" style="width:11px;height:11px"></i> 草稿</span>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-content">
|
||
<h3>提交审核</h3>
|
||
<p>确认无误后提交，单据状态变为「待审核」，管理员收到待办提示。提交后不可编辑，防止信息篡改。</p>
|
||
<span class="step-badge amber"><i data-lucide="clock" style="width:11px;height:11px"></i> 待审核</span>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">3</div>
|
||
<div class="step-content">
|
||
<h3>管理员审批</h3>
|
||
<p>管理员核实单据后选择「审批通过」或「驳回」。驳回时可填写驳回原因，由经办人修改后重新提交。</p>
|
||
<div style="display:flex;gap:8px;margin-top:8px;">
|
||
<span class="step-badge green"><i data-lucide="check" style="width:11px;height:11px"></i> 审批通过</span>
|
||
<span class="step-badge red"><i data-lucide="x" style="width:11px;height:11px"></i> 已驳回</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">4</div>
|
||
<div class="step-content">
|
||
<h3>库存自动更新</h3>
|
||
<p>审批通过后，系统在同一事务中完成库存增加与财务记录写入，保证数据一致性。操作不可逆，留存完整记录。</p>
|
||
<span class="step-badge green"><i data-lucide="package-check" style="width:11px;height:11px"></i> 已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Role matrix -->
|
||
<section class="matrix-section">
|
||
<div class="container">
|
||
<div class="section-title">角色权限矩阵</div>
|
||
<p class="section-sub">不同角色在审批流程中的权限一览。</p>
|
||
<table class="matrix-table">
|
||
<thead>
|
||
<tr>
|
||
<th>操作</th>
|
||
<th>管理员</th>
|
||
<th>普通用户</th>
|
||
<th>只读用户</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>创建入库/出库单（草稿）</td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-no">禁止</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>提交审核</td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-no">禁止</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>审批通过 / 驳回</td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-no">禁止</span></td>
|
||
<td><span class="perm-no">禁止</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>查看单据列表</td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>用户管理</td>
|
||
<td><span class="perm-yes"><i data-lucide="check-circle"></i> 允许</span></td>
|
||
<td><span class="perm-no">禁止</span></td>
|
||
<td><span class="perm-no">禁止</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Audit log -->
|
||
<section class="audit-section">
|
||
<div class="container">
|
||
<div class="section-title">完整操作日志</div>
|
||
<p class="section-sub">每笔库存变动都有对应的操作记录，明确到具体操作人和时间点。</p>
|
||
<div class="audit-log">
|
||
<div class="audit-header">
|
||
<i data-lucide="clock" style="width:14px;height:14px;color:var(--brand-500)"></i>
|
||
<span class="audit-header-title">库存流水记录 — 麦卡伦 12年</span>
|
||
</div>
|
||
<div class="audit-row">
|
||
<div class="audit-dot dot-green"></div>
|
||
<div class="audit-time">05-23 14:32</div>
|
||
<div class="audit-user">王经理</div>
|
||
<div class="audit-action">审批通过入库单 <strong>RK20250523000001</strong>，库存 +24 瓶（批次 L-2026-01）</div>
|
||
</div>
|
||
<div class="audit-row">
|
||
<div class="audit-dot dot-blue"></div>
|
||
<div class="audit-time">05-23 11:08</div>
|
||
<div class="audit-user">李库管</div>
|
||
<div class="audit-action">提交入库单 <strong>RK20250523000001</strong> 审核，共 24 瓶</div>
|
||
</div>
|
||
<div class="audit-row">
|
||
<div class="audit-dot dot-red"></div>
|
||
<div class="audit-time">05-22 16:45</div>
|
||
<div class="audit-user">王经理</div>
|
||
<div class="audit-action">驳回出库单 <strong>CK20250522000003</strong>，原因：数量与实际不符</div>
|
||
</div>
|
||
<div class="audit-row">
|
||
<div class="audit-dot dot-amber"></div>
|
||
<div class="audit-time">05-22 15:30</div>
|
||
<div class="audit-user">张吧台</div>
|
||
<div class="audit-action">提交出库申请 <strong>CK20250522000003</strong>，领用 12 瓶</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<h2>查看所有功能</h2>
|
||
<p>了解库存管理的完整能力，包括批次追溯和盘点功能。</p>
|
||
<div class="cta-actions">
|
||
<a href="/features/inventory.html" class="btn btn-primary btn-lg">库存管理功能 <i data-lucide="arrow-right" class="icon"></i></a>
|
||
<a href="/app/" class="btn btn-secondary btn-lg">进入管理端</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-inner">
|
||
<div class="footer-brand"><img src="../assets/logo-mark.svg" alt="岩美" /> 岩美酒库管理系统</div>
|
||
<div class="footer-copy">© 2025 岩美。保留所有权利。</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>lucide.createIcons();</script>
|
||
</body>
|
||
</html>
|