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>
205 lines
12 KiB
HTML
205 lines
12 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); }
|
||
.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-cta { display: flex; gap: 10px; }
|
||
|
||
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 64px); }
|
||
.docs-sidebar { border-right: 1px solid var(--border-default); padding: 32px 0; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
|
||
.sidebar-group { margin-bottom: 28px; }
|
||
.sidebar-group-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--fg-subtle); text-transform: uppercase; padding: 0 20px; margin-bottom: 8px; }
|
||
.sidebar-link { display: block; padding: 6px 20px; font-size: 14px; color: var(--gray-700); border-radius: 0; transition: background 100ms; }
|
||
.sidebar-link:hover { background: var(--gray-50); color: var(--brand-900); }
|
||
.sidebar-link.active { color: var(--brand-500); font-weight: 500; background: var(--brand-50); }
|
||
|
||
.docs-content { padding: 48px 64px; max-width: 800px; }
|
||
.docs-content h1 { font-size: 32px; font-weight: 700; color: var(--brand-900); margin: 0 0 8px; }
|
||
.docs-content .meta { font-size: 13px; color: var(--fg-muted); margin-bottom: 36px; }
|
||
.docs-content h2 { font-size: 22px; font-weight: 600; color: var(--brand-900); margin: 48px 0 16px; padding-top: 48px; border-top: 1px solid var(--border-subtle); }
|
||
.docs-content h2:first-of-type { border-top: none; }
|
||
.docs-content h3 { font-size: 16px; font-weight: 600; color: var(--gray-800); margin: 28px 0 10px; }
|
||
.docs-content p { font-size: 14px; line-height: 1.75; color: var(--fg-default); margin: 0 0 16px; }
|
||
.docs-content ul, .docs-content ol { padding-left: 20px; margin: 0 0 16px; }
|
||
.docs-content li { font-size: 14px; line-height: 1.75; color: var(--fg-default); margin-bottom: 6px; }
|
||
.docs-content code { font-family: var(--font-mono); font-size: 12px; background: var(--gray-100); padding: 2px 5px; border-radius: 3px; color: var(--brand-700); }
|
||
.tip { background: var(--brand-50); border-left: 3px solid var(--brand-400); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 20px 0; }
|
||
.tip p { margin: 0; font-size: 13px; color: var(--brand-800); }
|
||
.warn { background: var(--warning-50); border-left: 3px solid var(--warning-500); border-radius: 0 6px 6px 0; padding: 12px 16px; margin: 20px 0; }
|
||
.warn p { margin: 0; font-size: 13px; color: var(--warning-700); }
|
||
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13px; }
|
||
th { background: var(--gray-50); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--gray-700); border: 1px solid var(--border-default); }
|
||
td { padding: 8px 12px; border: 1px solid var(--border-default); color: var(--fg-default); vertical-align: top; }
|
||
|
||
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">功能</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="docs-layout">
|
||
<aside class="docs-sidebar">
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">快速开始</div>
|
||
<a href="#intro" class="sidebar-link active">系统介绍</a>
|
||
<a href="#login" class="sidebar-link">登录与权限</a>
|
||
<a href="#roles" class="sidebar-link">角色说明</a>
|
||
</div>
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">核心模块</div>
|
||
<a href="#stock-in" class="sidebar-link">入库管理</a>
|
||
<a href="#stock-out" class="sidebar-link">出库管理</a>
|
||
<a href="#inventory" class="sidebar-link">库存管理</a>
|
||
<a href="#finance" class="sidebar-link">财务管理</a>
|
||
<a href="#products" class="sidebar-link">基础数据</a>
|
||
</div>
|
||
<div class="sidebar-group">
|
||
<div class="sidebar-group-title">其他功能</div>
|
||
<a href="#scan" class="sidebar-link">防伪溯源</a>
|
||
<a href="#settings" class="sidebar-link">系统设置</a>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="docs-content">
|
||
<h1>使用手册</h1>
|
||
<p class="meta">适用版本：v1.x · 更新于 2025 年</p>
|
||
|
||
<h2 id="intro">系统介绍</h2>
|
||
<p>岩美酒库管理系统是专为酒行、酒店 F&B 部门设计的一体化库存管理平台。系统涵盖入库、出库、库存盘点、财务对账、往来单位管理以及商品防伪溯源等核心功能。</p>
|
||
<p>系统采用多租户架构，每个门店（<code>shop</code>）的数据完全隔离，支持 Web 端与桌面端（macOS / Windows）同时使用。</p>
|
||
|
||
<div class="tip"><p><strong>提示：</strong>如果是初次使用，请让管理员先创建您的账号，然后使用门店编号 + 用户名 + 密码登录。</p></div>
|
||
|
||
<h2 id="login">登录与权限</h2>
|
||
<h3>登录方式</h3>
|
||
<p>在登录页输入：</p>
|
||
<ul>
|
||
<li><strong>门店编号</strong>（由管理员提供，如 <code>S001</code>）</li>
|
||
<li><strong>用户名</strong></li>
|
||
<li><strong>密码</strong></li>
|
||
</ul>
|
||
<p>登录成功后，系统会保存 Token，关闭浏览器后再次打开无需重新登录（Token 有效期 7 天）。</p>
|
||
|
||
<h2 id="roles">角色说明</h2>
|
||
<table>
|
||
<thead><tr><th>角色</th><th>权限范围</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>管理员 (admin)</td><td>所有功能，包括用户管理、审批、系统设置</td></tr>
|
||
<tr><td>普通用户 (user)</td><td>创建/编辑单据，无法审批，无系统设置权限</td></tr>
|
||
<tr><td>只读用户 (readonly)</td><td>仅查看，不可创建或修改任何数据</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="warn"><p><strong>注意：</strong>只读用户尝试任何写操作时，系统将返回 403 拒绝提示。</p></div>
|
||
|
||
<h2 id="stock-in">入库管理</h2>
|
||
<h3>创建入库单</h3>
|
||
<ol>
|
||
<li>点击左侧「入库管理」，然后点击「新建入库单」</li>
|
||
<li>选择仓库、供应商（往来单位），填写入库日期</li>
|
||
<li>逐行添加商品，填写数量、单价、批次号、生产日期</li>
|
||
<li>保存为「草稿」或直接「提交审核」</li>
|
||
</ol>
|
||
<h3>审批入库</h3>
|
||
<p>状态为「待审核」的入库单，管理员可在列表中点击「审核通过」。审核通过后库存自动增加，且操作不可逆。</p>
|
||
|
||
<h2 id="stock-out">出库管理</h2>
|
||
<p>出库流程与入库类似：创建出库单 → 选择仓库和商品 → 提交审核 → 管理员审批。</p>
|
||
<p>系统在审批出库时会自动校验库存充足性，如果库存不足，审批将失败并给出提示。</p>
|
||
<table>
|
||
<thead><tr><th>出库类型</th><th>说明</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>销售</td><td>对外销售，关联往来单位（客户）</td></tr>
|
||
<tr><td>领用</td><td>内部消耗，无对外客户</td></tr>
|
||
<tr><td>损耗</td><td>破损/过期等非正常消耗</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2 id="inventory">库存管理</h2>
|
||
<p>库存列表按批次展示，每次入库产生一条库存记录。支持按商品名称、仓库、供应商筛选，并可导出 Excel。</p>
|
||
<h3>批次追溯</h3>
|
||
<p>每条库存记录保留了入库批次号、生产日期、供应商等信息，可完整追溯商品来源。</p>
|
||
|
||
<h2 id="finance">财务管理</h2>
|
||
<p>财务模块记录与入库/出库单据关联的应收应付账款。支持按往来单位、日期区间、状态（已收/待收）筛选，并可导出汇总报表。</p>
|
||
|
||
<h2 id="products">基础数据</h2>
|
||
<p>基础数据包含：</p>
|
||
<ul>
|
||
<li><strong>商品管理</strong>：SKU 信息、规格、品牌、系列、单位，以及商品图片上传</li>
|
||
<li><strong>仓库管理</strong>：门店下可配置多个仓库</li>
|
||
<li><strong>往来单位</strong>：供应商与客户统一管理</li>
|
||
<li><strong>编号规则</strong>：自定义入库单/出库单号前缀和格式</li>
|
||
</ul>
|
||
|
||
<h2 id="scan">防伪溯源</h2>
|
||
<p>为每件商品生成唯一防伪码（<code>public_id</code>），打印贴附于商品。消费者扫描二维码后跳转至 <code>jiu.51yanmei.com/scan/<id></code>，可查看：</p>
|
||
<ul>
|
||
<li>商品基本信息（名称、品牌、规格）</li>
|
||
<li>批次信息（生产日期、批次号、入库日期）</li>
|
||
<li>出售门店信息</li>
|
||
<li>岩美防伪验证标记</li>
|
||
</ul>
|
||
|
||
<h2 id="settings">系统设置</h2>
|
||
<p>系统设置仅管理员可见，包括：</p>
|
||
<ul>
|
||
<li>用户管理：创建/删除用户，重置密码，调整角色</li>
|
||
<li>门店信息：更新门店名称、地址、电话等公开信息</li>
|
||
<li>数据导入：批量导入商品、历史库存数据（Excel 格式）</li>
|
||
</ul>
|
||
</main>
|
||
</div>
|
||
|
||
<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>
|