UI Kit · 桌面屏
由原子组合而成的完整屏，点击进入可交互页面（随主题换色）。桌面与移动共用同一套 tokens + 公用原子，仅外壳/布局不同。
库存管理桌面 · 筛选/弹窗/抽屉/分页
入库单列表KPI / 状态筛选 / 单据抽屉
出库单列表客户 / 状态 / 明细抽屉
往来单位供应商/客户 · 应收应付
商品基础数据名/系列/规格 · 香型筛选
财务管理概览 · 趋势 / 应收应付 / 流水
系统设置门店/用户/授权兑换券/偏好
登录双栏品牌 + 表单 · 三主题
新增入库单录单 · 三级商品搜索/实时合计
新增出库单录单 · 出库前库存校验
库存盘点实盘录入 · 差异盈亏
商品详情库存分布 · 流水 · 价格历史
设备管理打印机/扫码枪 · 连接状态
通知中心列表 · 类型筛选 / 未读
通知详情正文 · 关联单据 / 操作
关于我们版本 · 更新日志 · 授权
公开商品页 · 对外扫码防伪验证（移动）
门店公开页 · 对外门店商品目录（移动）
注册新门店开通向导 · 门店/管理员/授权
用户管理成员/角色 · 新增编辑弹窗
购买授权时长套餐 · 版本档位
确认订单下单 · 开票 · 无支付占位
收银台订单信息 · 支付宝扫码 · 三态
UI Kit · 移动屏
移动端外壳：底部 tab 栏 / 顶栏 / 底部 sheet。窄窗或设备模式（⌘⌥M · 390px）查看最佳；宽屏会自动居中成手机列。
库存 · 移动KPI / 卡片流 / 筛选 sheet
入库列表 · 移动单据卡 / 状态 pill
入库录单 · 移动全屏表单 / 底部操作条
出库列表 · 移动客户 / 状态 pill
出库录单 · 移动库存校验 / 底部操作条
财务 · 移动KPI / 应收应付 / 流水
我的 · 移动hub 入口 / 账号
往来单位 · 移动供应商/客户 · 应收应付
基础数据 · 移动商品档案 / 商品介绍 tab
库存盘点 · 移动盘点单 / 盈亏差异
设备管理 · 移动打印机/扫码枪 · 在线状态
系统设置 · 移动门店/偏好/数据 分组
用户管理 · 移动成员 / 角色
通知中心 · 移动列表 / 类型 pill / 未读
通知详情 · 移动正文 / 关联单据 / 操作
关于 · 移动版本 / 更新日志 / 授权
登录 · 移动品牌 + 表单
注册新门店 · 移动开通向导
岩美酒库 · 设计系统
三层方法：① 令牌层（tokens.css，单源，按主题换色）→ ② 组件层（atoms.css，所有屏复用）→ ③ 页面层（screens/，只引用前两层）。先定底层原子，再组屏。右上角切 A/B/C 三主题，全站实时换色——这就是「改一处、全局生效」。
⛔ 设计系统铁律（单一真源）
single source of truth1. 唯一来源。所有页面用到的元素、组件、CSS 样式、颜色，必须出自本设计系统——颜色/间距/圆角/字号取自
tokens.css 的 CSS 变量，组件类取自 atoms.css，且都能在本页查到实样。2. 先登记、后使用。需要新元素/组件/样式/颜色时，先加到本设计系统（变量进
tokens.css、组件类进 atoms.css）并在本页登记展示，之后才能在 screens/ 里引用。3. 禁止系统外内容。页面里不允许出现本系统不存在的类、硬编码颜色（
#hex/rgb()，品牌 logo SVG 除外）、或一次性写死的内联尺寸/配色。screens/* 只 import tokens.css + atoms.css，只用已登记的变量与类。违反任意一条即视为未完成——颜色不走 token、用了本页没有的组件、页面自带样式，都要先回到这里补登记。
结构
tokens.css · atoms.css · screens/*tokens.css — 三主题色阶 + 间距/圆角/阴影/字号（令牌层）atoms.css — 按钮·输入·Chip·徽章·KPI·表格·弹窗·抽屉·菜单（组件层）screens/inventory.html — 库存屏（页面层，import 上面两层）品牌 Brand
三级品牌架构：公司 岩美科技 → 产品 岩美酒库 → 门店租户。下方为基于现有 logo 精修的标识系统。品牌色固定，不随界面 A/B/C 主题变化（仅提供反白变体）。
品牌架构
公司 / 产品 / 门店 三级公司 COMPANY
岩美科技
软件厂商 · 官网/宣传/about · 企业 logo + 商标
产品 PRODUCT
岩美酒库
SaaS 软件 · 窗口标题/登录/App 图标
门店 TENANT
鼎晟酒行 …
购买软件的 toB 商店 · App 内左上角，每户自有名+标记
企业 Logo · 现状（精修参考）
现有标记 · 含商标 ™岩美™
岩美科技 · YANMEI TECH
岩美™
岩美科技 · YANMEI TECH
产品 Logo · 岩美酒库
现有锁版精修岩美酒库
酒水进销存管理系统
门店标识 · 自动字号
取门店名首字 · App 内左上角鼎
鼎晟酒行DINGSHENG
茅
茅韵名酒MAOYUN
老
老李酒水批发LAOLI
标记变体 / App 图标
主体 / 反白 / 单色 · 圆角图标主体
反白
单色
App 图标 · 1024
64 · 省略酒滴
28 · 仅山形
安全区 / 最小尺寸
留白 = 标记高度的 1/3 · 最小 20px品牌主色
主操作色与品牌色阶，随主题切换。
语义状态色
在售 / 预警 / 缺货 等状态。前景色与浅底成对。
中性 / 文本 / 描边
背景层级、文本层级与分隔线。
导航 Chrome
顶栏与侧栏专属角色（与内容 surface 分离，故每主题可独立染色）。
字体 Type
正文/中文系统字体；数据用等宽（库存数、金额）。下面是字号梯度。
字号梯度
--fs-display … --fs-xs--fs-display 28岩美酒库 Display
--fs-h1 21页面标题 库存管理
--fs-h2 17区块标题
--fs-title 15卡片标题
--fs-body 13正文与表格内容 · 茅台飞天 53°
--fs-sm 12次要说明 / 标签
mono¥2,640,000 · 1,284 SKU
间距 Spacing
圆角 / 间距网格 / 阴影系统，全主题统一。
圆角
--r-sm … --r-xl间距网格
--sp-1 … --sp-8阴影
--sh-1 / --sh-2 / --sh-3sh-1
sh-2
sh-3
公用组件 Components
来自 atoms.css 的原子，桌面与移动共用（按钮 / 输入 / 徽章 / 分段 / 菜单 / 弹窗等）。随主题换色。移动专属原子见下一节。
按钮
.btn .primary/.soft/.ghost/.danger/.sm新增入库
详细搜索
导出
列设置
删除
输入 / 搜索
.input .searchbox .ctrl选择往来单位…
Switch 开关
.switch .on · 布尔即时生效（库存⇄在售 挂售切换）· 2026-07-07
on / off / disabled（已售行无 switch）
分段切换 / 可搜索选择器
.seg · .combo（录单网格用）搜索下拉框（弹层）
.combo + .combo-pop > .cp-search / .cp-body（单据头供应商/客户/仓库）茅台华东总代GYS002
名烟名酒城GYS004
华润万家配送GYS005
新增「mt」到基础数据
搜索下拉框 · 带结果统计
data-summary="1" → .combo-pop > … + .cp-foot（内容多时启用，底部显示总返回条数）鼎晟供应链GYS001
茅台华东总代GYS002
川酒集团批发GYS003
名烟名酒城GYS004
华润万家配送GYS005
共 5 条结果
日期字段（滚轮选择）
.datefield + .wheel-pop（年月日 · 单据/生产共用）· datewheel.js2026-06-22
选择日期
今天确定
筛选 Chip
.chip · 内嵌列头筛选入口全部品类
分类 浓香
时间范围
状态徽章 · 全部
.badge .b-* · 对齐 schema 真实枚举 · 圆点已全局图标化（icons.js BADGE_ICON 单源映射自动注入，屏内无需手写 svg）库存三态 · status 落库在售库存已售（在售=公开酒单展示；已售=卖光留痕；预警/缺货退出状态列，由数量染色承担）
库存 · 数量派生提示预警缺货
单据 · 入库/出库草稿待审核已通过已驳回
往来单位 · 启用停用启用停用供应商客户两者
用户角色管理员普通只读
设备在线状态在线离线
库存盘点进行中已完成
授权兑换券未使用已兑换作废
账单结清 · 收付未结清已结清收款付款
进价待定 · 调货暂估待定价待定价（入库进价留空/0，确认进价后回填）
图标徽章 .bi · 图标替代圆点草稿待审核已审核已拒绝部分退单已退单待定价
纯图标徽章 .ico · 移动卡片（图标映射：草稿=文件 待审核=时钟 已审核=勾 已拒绝=叉 退单=撤回箭头 待定价=¥）
KPI 卡
.kpiSKU 总数
1,284
▲ 2.3%
缺货预警
17
需补货 6 项
草稿单数
2
待提交审核
表格行
.table thead/tbody| 商品 | 分类 | 库存 | 状态 |
|---|---|---|---|
茅台 飞天 53° MT-FT-500 | 酱香 | 128 | 在售 |
剑南春 水晶剑 JNC-SJ-500 | 浓香 | 8 | 缺货 |
提示条
.notice info/danger（草稿恢复 / 驳回）检测到未提交的入库单草稿（06-21 11:20），是否恢复？
恢复放弃
单据被驳回：单价高于近期采购价，请核实后重报。
单据明细行（商品 / 系列规格分列）
.lines .lr · .lcell .ln/.lcode/.lser/.lspec商品 · 编码系列 / 规格数量单价金额
泸州老窖 特曲LZLJ-TQ-52-500特曲52° 500ml×648¥320¥15,360
抽屉操作分组
.dactions · .dact-group/.dact-label/.dact-row（审核类 / 打印类）单据审核
审核通过
驳回
结清
退单
提交审核
打印
打印标签
打印单据
覆盖层（交互）
.menu · .overlay/.modal · .drawer · .toast下拉菜单
弹窗
抽屉
Toast
分页 / 移动卡 / 状态栏 / 通知 / 遮罩
.pager · .mcard · .statusbar · .notify-pop · .drawer-mask （列表/壳层原子）每页 8 条 · 共 24
茅台 飞天 53°MT-FT-500在售
通知
全部已读入库单 待审核
茅台华东总代 · 3 项
10 分钟前
查看全部
通知中心列表行 .nt-item / 类型图标 .nt-ic（warn / danger / info / ok）—— 通知列表页与详情页共用，桌面/移动一致：
遮罩 .drawer-mask：抽屉/弹层背后的半透明背板，点击关闭。
移动专属组件 .m-*
来自 mobile-atoms.css 的移动专属原子，由 mobile-shell.js 装配外壳。复用上方公用原子（按钮/徽章/分段/输入），此处只展示移动新增的 .m-*。
移动壳 + 列表（实机预览）
.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row（.mc-nm 可带 .mc-date 日期后缀）· .m-fab库存
3
王
SKU 总数
1,284
▲ 2.3%
库存货值
¥264万
▲ 1.5%
在库数量
18,920
件
缺货预警
17
需补货 6
全部
酱香
浓香
清香
商品 · 共 10
茅台 飞天 53°2024-07-11
MT-FT-500 · 500ml×6
在售128 件
剑南春 水晶剑
JNC-SJ-500 · 500ml×6
缺货8 件
图标 Icons
全部 92 个图标登记在 screens/icons.js 的 SVG sprite（单一真源）。各屏用 <svg><use href="#i-xxx"/></svg> 引用——改一处、全局生效。新增图标先在此登记 symbol，再用 use 引用；门禁 ❽ 禁止内联图标。
图标库 · 92 个
icons.js <symbol> · <use href="#i-*">i-arrow-left
i-bottle
i-box
i-box-2
i-check
i-chevron-down
i-chevron-left
i-chevron-right
i-close
i-download
i-edit
i-eye
i-gear
i-megaphone
i-menu
i-plus
i-refresh
i-search
i-shield
i-shield-2
i-upload
i-bug
i-lightbulb
i-ic01
i-ic02
i-ic03
i-ic04
i-ic05
i-ic06
i-ic07
i-ic08
i-ic09
i-ic10
i-ic11
i-ic12
i-ic13
i-ic14
i-ic15
i-ic16
i-ic17
i-ic18
i-ic19
i-ic20
i-ic21
i-ic22
i-ic23
i-ic24
i-ic25
i-ic26
i-ic27
i-ic28
i-ic29
i-ic30
i-ic31
i-ic32
i-ic33
i-ic34
i-ic35
i-ic36
i-ic37
i-ic38
i-ic39
i-ic40
i-ic41
i-ic42
i-ic43
i-ic44
i-ic45
i-ic46
i-ic47
i-ic48
i-ic49
i-ic50
i-ic51
i-ic52
i-ic53
i-ic54
i-ic55
i-ic56
i-ic57
i-ic58
i-ic59
i-ic60
i-ic61
i-ic62
i-ic63
i-ic64
i-ic65
i-ic66
i-ic67
i-ic68
i-ic69