wangjia
550 lines
75 KiB
HTML
550 lines
75 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="a">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>岩美酒库 · 设计系统</title>
|
||
<link rel="stylesheet" href="tokens.css">
|
||
<link rel="stylesheet" href="atoms.css">
|
||
<link rel="stylesheet" href="mobile-atoms.css">
|
||
<style>
|
||
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); transition:background-color .28s; overflow-x:hidden;}
|
||
/* 顶部条 */
|
||
.ds-top{position:sticky; top:0; z-index:50; height:58px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:0 22px;}
|
||
.ds-brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--heading); font-size:15px;}
|
||
.ds-brand .mk{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-weight:800;}
|
||
.ds-tag{font-size:var(--fs-sm); color:var(--muted); padding-left:6px; border-left:1px solid var(--border);}
|
||
.theme-seg{margin-left:auto; display:flex; gap:4px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px;}
|
||
.theme-seg button{border:none; background:transparent; height:28px; padding:0 14px; border-radius:var(--r-pill); font-size:var(--fs-sm); color:var(--muted); cursor:pointer; font-family:var(--font); display:flex; align-items:center; gap:6px;}
|
||
.theme-seg button .d{width:10px; height:10px; border-radius:50%;}
|
||
.theme-seg button.on{background:var(--primary); color:var(--on-primary);}
|
||
|
||
.doc{display:flex; align-items:flex-start; max-width:1340px; margin:0 auto;}
|
||
.doc-nav{width:236px; flex:none; position:sticky; top:58px; height:calc(100vh - 58px); overflow:auto; border-right:1px solid var(--border); padding:18px 14px;}
|
||
.dgroup{font-size:var(--fs-xs); font-weight:700; color:var(--faint); letter-spacing:.6px; padding:14px 10px 6px;}
|
||
.dnav{display:block; padding:7px 10px; border-radius:var(--r-md); font-size:var(--fs-body); color:var(--muted); text-decoration:none; cursor:pointer;}
|
||
.dnav:hover{background:var(--bg); color:var(--text);}
|
||
.dnav.on{background:var(--brand50); color:var(--primary); font-weight:600;}
|
||
|
||
.doc-main{flex:1; min-width:0; padding:30px 40px 80px; max-width:1080px;}
|
||
.section{margin-bottom:46px; scroll-margin-top:74px;}
|
||
.section > h2{margin:0 0 4px; font-size:var(--fs-h1); color:var(--title);}
|
||
.section > .desc{margin:0 0 18px; font-size:var(--fs-body); color:var(--muted);}
|
||
.pcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:16px; overflow:hidden;}
|
||
.pcard-h{display:flex; align-items:baseline; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border-subtle);}
|
||
.pcard-h h3{margin:0; font-size:var(--fs-title); color:var(--heading);}
|
||
.pcard-h .tk{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono);}
|
||
.pcard-b{padding:18px 16px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
|
||
|
||
/* 色板 */
|
||
.sw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; width:100%;}
|
||
.sw{border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; background:var(--surface);}
|
||
.sw .band{display:block; width:100%; height:58px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);}
|
||
.sw .m{padding:8px 10px;}
|
||
.sw .m .n{font-size:var(--fs-sm); color:var(--text); font-weight:600;}
|
||
.sw .m .v{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono);}
|
||
|
||
/* 字体梯度 */
|
||
.type-row{display:flex; align-items:baseline; gap:16px; padding:10px 0; border-bottom:1px solid var(--border-subtle); width:100%;}
|
||
.type-row .tk{width:160px; font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono); flex:none;}
|
||
/* 间距/圆角 */
|
||
.scale{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; width:100%;}
|
||
.scale .box{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--muted);}
|
||
.scale .sq{background:var(--primary);}
|
||
.scale .rq{background:var(--brand50); border:1px solid var(--primary);}
|
||
.scale .sh{width:64px; height:48px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);}
|
||
|
||
/* UI Kit 卡 */
|
||
.kit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; width:100%;}
|
||
.kit{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); cursor:pointer; transition:border-color .15s, box-shadow .15s; text-decoration:none; color:inherit; display:block;}
|
||
.kit:hover{border-color:var(--brand400); box-shadow:var(--sh-2);}
|
||
.kit .thumb{height:130px; background:linear-gradient(135deg,var(--side-bg),var(--top-bg)); display:flex; align-items:center; justify-content:center; color:var(--on-primary);}
|
||
.kit .thumb svg{width:34px; height:34px; stroke-width:1.4; opacity:.92;}
|
||
.kit .kt{padding:12px 14px;}
|
||
.kit .kt b{display:block; font-size:var(--fs-body); color:var(--heading);}
|
||
.kit .kt span{font-size:var(--fs-xs); color:var(--muted);}
|
||
.kit.todo{opacity:.62;}
|
||
.kit.todo .thumb{background:var(--bg); color:var(--faint);}
|
||
|
||
.logo-lockup{display:flex; gap:16px; flex-wrap:wrap; width:100%;}
|
||
.lock{flex:1; min-width:220px; border-radius:var(--r-lg); padding:24px; display:flex; align-items:center; gap:12px; font-weight:800; font-size:20px;}
|
||
.lock .mk{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:900;}
|
||
.lock.light{background:#F5F7FA; color:#1B2430;} .lock.light .mk{background:linear-gradient(135deg,#2563AC,#154072); color:#fff;}
|
||
.lock.dark{background:#15151C; color:#F6F6F9;} .lock.dark .mk{background:linear-gradient(135deg,#F5A300,#D98C00); color:#1A1408;}
|
||
.appicon{width:96px; height:96px; border-radius:22px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:900; box-shadow:var(--sh-2);}
|
||
|
||
/* 图标库网格 */
|
||
.icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px; width:100%;}
|
||
.icell{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface);}
|
||
.icell svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; color:var(--heading);}
|
||
.icell span{font-size:var(--fs-xs); color:var(--muted); font-family:var(--font-mono); text-align:center; word-break:break-all;}
|
||
|
||
/* 屏幕分组标签 + 移动端预览（registry 用：把 .m-* 固定定位收进手机框内） */
|
||
.kit-sub{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); font-weight:700; color:var(--muted); margin:4px 2px 12px; letter-spacing:.4px;}
|
||
.kit-sub:not(:first-child){margin-top:26px;}
|
||
.kit-sub .ks-dot{width:7px; height:7px; border-radius:50%; background:var(--brand400);}
|
||
.mdemo{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; width:100%;}
|
||
.mphone{position:relative; width:328px; height:600px; flex:none; border:1px solid var(--border); border-radius:26px; overflow:hidden; background:var(--page); box-shadow:var(--sh-2);}
|
||
.mphone .m-top, .mphone .m-tabbar{position:absolute; left:0; right:0; transform:none; max-width:none;}
|
||
.mphone .m-fab{position:absolute; left:auto; right:16px; transform:none;}
|
||
.mphone .m-page{height:100%; overflow:auto;}
|
||
.mcol{flex:1; min-width:248px; display:flex; flex-direction:column; gap:18px;}
|
||
.mcol .mlab{font-size:var(--fs-xs); color:var(--faint); font-family:var(--font-mono); margin-bottom:-8px;}
|
||
.msheet-demo{position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="ds-top">
|
||
<div class="ds-brand"><span class="mk">岩</span>岩美酒库</div>
|
||
<span class="ds-tag">设计系统 · Phase 0</span>
|
||
<div class="theme-seg" id="seg">
|
||
<button data-t="a"><span class="d" style="background:#2563AC"></span>A 经典蓝</button>
|
||
<button data-t="b"><span class="d" style="background:#F5A300"></span>B 琥珀</button>
|
||
<button data-t="c"><span class="d" style="background:#7C1F2C"></span>C 酒窖</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="doc">
|
||
<nav class="doc-nav" id="docNav">
|
||
<div class="dgroup">UI Kit · 屏幕</div>
|
||
<a class="dnav" data-s="kit">桌面屏 · Desktop</a>
|
||
<a class="dnav" data-s="kit-m">移动屏 · Mobile</a>
|
||
<div class="dgroup">概览</div>
|
||
<a class="dnav" data-s="overview">Readme · 三层方法</a>
|
||
<div class="dgroup">品牌 Brand</div>
|
||
<a class="dnav" data-s="brand">Logo 锁版 / App 图标</a>
|
||
<div class="dgroup">色彩 Colors</div>
|
||
<a class="dnav" data-s="c-brand">品牌主色</a>
|
||
<a class="dnav" data-s="c-status">语义状态色</a>
|
||
<a class="dnav" data-s="c-neutral">中性 / 文本 / 描边</a>
|
||
<a class="dnav" data-s="c-chrome">导航 Chrome</a>
|
||
<div class="dgroup">字体 Type</div>
|
||
<a class="dnav" data-s="type">字体族 / 字号梯度</a>
|
||
<div class="dgroup">间距 Spacing</div>
|
||
<a class="dnav" data-s="spacing">圆角 / 间距 / 阴影</a>
|
||
<div class="dgroup">组件 Components</div>
|
||
<a class="dnav" data-s="comp">公用组件 · 桌面/移动共用</a>
|
||
<a class="dnav" data-s="m-comp">移动专属组件 .m-*</a>
|
||
<div class="dgroup">图标 Icons</div>
|
||
<a class="dnav" data-s="icons">图标库 · 全部</a>
|
||
</nav>
|
||
|
||
<main class="doc-main">
|
||
<section class="section" id="kit">
|
||
<h2>UI Kit · 桌面屏</h2><p class="desc">由原子组合而成的完整屏，点击进入可交互页面（随主题换色）。<b>桌面与移动共用同一套 tokens + 公用原子</b>，仅外壳/布局不同。</p>
|
||
<div class="kit-grid">
|
||
<a class="kit" href="screens/inventory.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg></div><div class="kt"><b>库存管理</b><span>桌面 · 筛选/弹窗/抽屉/分页</span></div></a>
|
||
<a class="kit" href="screens/stock-in-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></div><div class="kt"><b>入库单列表</b><span>KPI / 状态筛选 / 单据抽屉</span></div></a>
|
||
<a class="kit" href="screens/stock-out-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg></div><div class="kt"><b>出库单列表</b><span>客户 / 状态 / 明细抽屉</span></div></a>
|
||
<a class="kit" href="screens/partners.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></div><div class="kt"><b>往来单位</b><span>供应商/客户 · 应收应付</span></div></a>
|
||
<a class="kit" href="screens/products.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></div><div class="kt"><b>商品基础数据</b><span>名/系列/规格 · 香型筛选</span></div></a>
|
||
<a class="kit" href="screens/finance.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg></div><div class="kt"><b>财务管理</b><span>概览 · 趋势 / 应收应付 / 流水</span></div></a>
|
||
<a class="kit" href="screens/settings.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic58"/></svg></div><div class="kt"><b>系统设置</b><span>门店/用户/授权兑换券/偏好</span></div></a>
|
||
<a class="kit" href="screens/login.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg></div><div class="kt"><b>登录</b><span>双栏品牌 + 表单 · 三主题</span></div></a>
|
||
<a class="kit" href="screens/stock-in.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>新增入库单</b><span>录单 · 三级商品搜索/实时合计</span></div></a>
|
||
<a class="kit" href="screens/stock-out.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>新增出库单</b><span>录单 · 出库前库存校验</span></div></a>
|
||
<a class="kit" href="screens/inventory-check.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg></div><div class="kt"><b>库存盘点</b><span>实盘录入 · 差异盈亏</span></div></a>
|
||
<a class="kit" href="screens/product-detail.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg></div><div class="kt"><b>商品详情</b><span>库存分布 · 流水 · 价格历史</span></div></a>
|
||
<a class="kit" href="screens/devices.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg></div><div class="kt"><b>设备管理</b><span>打印机/扫码枪 · 连接状态</span></div></a>
|
||
<a class="kit" href="screens/notifications.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知中心</b><span>列表 · 类型筛选 / 未读</span></div></a>
|
||
<a class="kit" href="screens/notification.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知详情</b><span>正文 · 关联单据 / 操作</span></div></a>
|
||
<a class="kit" href="screens/about.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg></div><div class="kt"><b>关于我们</b><span>版本 · 更新日志 · 授权</span></div></a>
|
||
<a class="kit" href="screens/public-product.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic64"/></svg></div><div class="kt"><b>公开商品页 · 对外</b><span>扫码防伪验证（移动）</span></div></a>
|
||
<a class="kit" href="screens/public-shop.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic65"/></svg></div><div class="kt"><b>门店公开页 · 对外</b><span>门店商品目录（移动）</span></div></a>
|
||
<a class="kit" href="screens/register.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic66"/></svg></div><div class="kt"><b>注册新门店</b><span>开通向导 · 门店/管理员/授权</span></div></a>
|
||
<a class="kit" href="screens/users.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></div><div class="kt"><b>用户管理</b><span>成员/角色 · 新增编辑弹窗</span></div></a>
|
||
<a class="kit" href="screens/pricing.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg></div><div class="kt"><b>购买授权</b><span>时长套餐 · 版本档位</span></div></a>
|
||
<a class="kit" href="screens/checkout.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic67"/></svg></div><div class="kt"><b>确认订单</b><span>下单 · 开票 · 无支付占位</span></div></a>
|
||
<a class="kit" href="screens/pay.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg></div><div class="kt"><b>收银台</b><span>订单信息 · 支付宝扫码 · 三态</span></div></a>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="section" id="kit-m">
|
||
<h2>UI Kit · 移动屏</h2><p class="desc">移动端外壳：底部 tab 栏 / 顶栏 / 底部 sheet。<b>窄窗或设备模式（⌘⌥M · 390px）查看最佳</b>；宽屏会自动居中成手机列。</p>
|
||
<div class="kit-grid">
|
||
<a class="kit" href="screens/m-inventory.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg></div><div class="kt"><b>库存 · 移动</b><span>KPI / 卡片流 / 筛选 sheet</span></div></a>
|
||
<a class="kit" href="screens/m-stock-in-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg></div><div class="kt"><b>入库列表 · 移动</b><span>单据卡 / 状态 pill</span></div></a>
|
||
<a class="kit" href="screens/m-stock-in.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>入库录单 · 移动</b><span>全屏表单 / 底部操作条</span></div></a>
|
||
<a class="kit" href="screens/m-stock-out-list.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg></div><div class="kt"><b>出库列表 · 移动</b><span>客户 / 状态 pill</span></div></a>
|
||
<a class="kit" href="screens/m-stock-out.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg></div><div class="kt"><b>出库录单 · 移动</b><span>库存校验 / 底部操作条</span></div></a>
|
||
<a class="kit" href="screens/m-finance.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg></div><div class="kt"><b>财务 · 移动</b><span>KPI / 应收应付 / 流水</span></div></a>
|
||
<a class="kit" href="screens/m-me.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg></div><div class="kt"><b>我的 · 移动</b><span>hub 入口 / 账号</span></div></a>
|
||
<a class="kit" href="screens/m-partners.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></div><div class="kt"><b>往来单位 · 移动</b><span>供应商/客户 · 应收应付</span></div></a>
|
||
<a class="kit" href="screens/m-products.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></div><div class="kt"><b>基础数据 · 移动</b><span>商品档案 / 商品介绍 tab</span></div></a>
|
||
<a class="kit" href="screens/m-inventory-check.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg></div><div class="kt"><b>库存盘点 · 移动</b><span>盘点单 / 盈亏差异</span></div></a>
|
||
<a class="kit" href="screens/m-devices.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg></div><div class="kt"><b>设备管理 · 移动</b><span>打印机/扫码枪 · 在线状态</span></div></a>
|
||
<a class="kit" href="screens/m-settings.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg></div><div class="kt"><b>系统设置 · 移动</b><span>门店/偏好/数据 分组</span></div></a>
|
||
<a class="kit" href="screens/m-users.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg></div><div class="kt"><b>用户管理 · 移动</b><span>成员 / 角色</span></div></a>
|
||
<a class="kit" href="screens/m-notifications.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知中心 · 移动</b><span>列表 / 类型 pill / 未读</span></div></a>
|
||
<a class="kit" href="screens/m-notification.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg></div><div class="kt"><b>通知详情 · 移动</b><span>正文 / 关联单据 / 操作</span></div></a>
|
||
<a class="kit" href="screens/m-about.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg></div><div class="kt"><b>关于 · 移动</b><span>版本 / 更新日志 / 授权</span></div></a>
|
||
<a class="kit" href="screens/m-login.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg></div><div class="kt"><b>登录 · 移动</b><span>品牌 + 表单</span></div></a>
|
||
<a class="kit" href="screens/m-register.html"><div class="thumb"><svg viewBox="0 0 24 24"><use href="#i-ic66"/></svg></div><div class="kt"><b>注册新门店 · 移动</b><span>开通向导</span></div></a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="overview">
|
||
<h2>岩美酒库 · 设计系统</h2>
|
||
<p class="desc">三层方法：① <b>令牌层</b>（tokens.css，单源，按主题换色）→ ② <b>组件层</b>（atoms.css，所有屏复用）→ ③ <b>页面层</b>（screens/，只引用前两层）。先定底层原子，再组屏。右上角切 A/B/C 三主题，全站实时换色——这就是「改一处、全局生效」。</p>
|
||
|
||
<div class="pcard" style="border-color:var(--danger)">
|
||
<div class="pcard-h"><h3 style="color:var(--danger)">⛔ 设计系统铁律（单一真源）</h3><span class="tk">single source of truth</span></div>
|
||
<div class="pcard-b" style="display:block; color:var(--text); font-size:var(--fs-body); line-height:1.95;">
|
||
<div><b>1. 唯一来源。</b>所有页面用到的元素、组件、CSS 样式、颜色，<b>必须出自本设计系统</b>——颜色/间距/圆角/字号取自 <code>tokens.css</code> 的 CSS 变量，组件类取自 <code>atoms.css</code>，且都能在本页查到实样。</div>
|
||
<div><b>2. 先登记、后使用。</b>需要新元素/组件/样式/颜色时，<b>先加到本设计系统</b>（变量进 <code>tokens.css</code>、组件类进 <code>atoms.css</code>）并在本页登记展示，<b>之后</b>才能在 <code>screens/</code> 里引用。</div>
|
||
<div><b>3. 禁止系统外内容。</b>页面里<b>不允许</b>出现本系统不存在的类、硬编码颜色（<code>#hex</code>/<code>rgb()</code>，品牌 logo SVG 除外）、或一次性写死的内联尺寸/配色。<code>screens/*</code> 只 import <code>tokens.css</code> + <code>atoms.css</code>，只用已登记的变量与类。</div>
|
||
<div style="color:var(--muted)">违反任意一条即视为未完成——颜色不走 token、用了本页没有的组件、页面自带样式，都要先回到这里补登记。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>结构</h3><span class="tk">tokens.css · atoms.css · screens/*</span></div>
|
||
<div class="pcard-b" style="display:block; color:var(--muted); font-size:var(--fs-body); line-height:1.9;">
|
||
<div><code>tokens.css</code> — 三主题色阶 + 间距/圆角/阴影/字号（令牌层）</div>
|
||
<div><code>atoms.css</code> — 按钮·输入·Chip·徽章·KPI·表格·弹窗·抽屉·菜单（组件层）</div>
|
||
<div><code>screens/inventory.html</code> — 库存屏（页面层，import 上面两层）</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="brand">
|
||
<h2>品牌 Brand</h2><p class="desc">三级品牌架构：<b>公司 岩美科技</b> → <b>产品 岩美酒库</b> → <b>门店租户</b>。下方为基于现有 logo 精修的标识系统。品牌色固定，不随界面 A/B/C 主题变化（仅提供反白变体）。</p>
|
||
<style>
|
||
.bmark{display:block;} .bmark svg{display:block;}
|
||
.arch{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; width:100%; min-width:0;}
|
||
.arch .lvl{border:1px solid var(--border); border-radius:var(--r-md); padding:14px; background:var(--surface);}
|
||
.arch .lvl .k{font-size:var(--fs-xs); color:var(--faint); font-weight:700; letter-spacing:.5px;}
|
||
.arch .lvl .n{font-size:var(--fs-title); color:var(--heading); font-weight:700; margin:4px 0 2px;}
|
||
.arch .lvl .u{font-size:var(--fs-sm); color:var(--muted);}
|
||
.lock2{display:flex; align-items:center; gap:14px;}
|
||
.lock2 .wm{display:flex; flex-direction:column; line-height:1;}
|
||
.lock2 .wm .big{font-size:30px; font-weight:800; color:#0F3057; letter-spacing:3px;}
|
||
.lock2 .wm .big sup{font-size:12px; font-weight:600; letter-spacing:0;}
|
||
.lock2 .wm .sub{font-size:11px; font-weight:500; color:#6E7888; letter-spacing:2px; margin-top:5px;}
|
||
.lock2.prod .wm .big{font-size:26px; letter-spacing:2px;}
|
||
.panel-dark{background:#0F3057; border-radius:var(--r-md);}
|
||
.panel-dark .big{color:#fff!important;} .panel-dark .sub{color:#ADC9EA!important;}
|
||
.mono-row{display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
|
||
.vchip{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--muted);}
|
||
.vtile{border-radius:14px; overflow:hidden;}
|
||
.tenant{display:flex; gap:22px; flex-wrap:wrap;}
|
||
.tenant .row{display:flex; align-items:center; gap:11px;}
|
||
.tmono{width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:19px;}
|
||
.tenant .row b{color:var(--heading); font-size:var(--fs-body);} .tenant .row span{color:var(--muted); font-size:var(--fs-xs); display:block;}
|
||
.clear{position:relative; display:inline-block; padding:22px; background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 6px,transparent 6px,transparent 12px); border:1px dashed var(--border); border-radius:var(--r-md);}
|
||
.ico-sizes{display:flex; gap:18px; align-items:flex-end;}
|
||
.ico{border-radius:22%; overflow:hidden; box-shadow:var(--sh-2);}
|
||
</style>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>品牌架构</h3><span class="tk">公司 / 产品 / 门店 三级</span></div>
|
||
<div class="pcard-b"><div class="arch">
|
||
<div class="lvl"><div class="k">公司 COMPANY</div><div class="n">岩美科技</div><div class="u">软件厂商 · 官网/宣传/about · 企业 logo + 商标</div></div>
|
||
<div class="lvl"><div class="k">产品 PRODUCT</div><div class="n">岩美酒库</div><div class="u">SaaS 软件 · 窗口标题/登录/App 图标</div></div>
|
||
<div class="lvl"><div class="k">门店 TENANT</div><div class="n">鼎晟酒行 …</div><div class="u">购买软件的 toB 商店 · App 内左上角，每户自有名+标记</div></div>
|
||
</div></div></div>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>企业 Logo · 现状（精修参考）</h3><span class="tk">现有标记 · 含商标 ™</span></div>
|
||
<div class="pcard-b" style="gap:30px">
|
||
<div class="lock2"><span class="bmark"><svg width="52" height="52" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
|
||
<div class="wm"><div class="big">岩美<sup>™</sup></div><div class="sub">岩美科技 · YANMEI TECH</div></div></div>
|
||
<div class="lock2 panel-dark" style="padding:18px 26px"><span class="bmark"><svg width="52" height="52" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#fff"/><g stroke="#0F3057" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
|
||
<div class="wm"><div class="big">岩美<sup>™</sup></div><div class="sub">岩美科技 · YANMEI TECH</div></div></div>
|
||
</div></div>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>产品 Logo · 岩美酒库</h3><span class="tk">现有锁版精修</span></div>
|
||
<div class="pcard-b" style="gap:30px">
|
||
<div class="lock2 prod"><span class="bmark"><svg width="50" height="50" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>
|
||
<div class="wm"><div class="big">岩美酒库</div><div class="sub">酒水进销存管理系统</div></div></div>
|
||
</div></div>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>门店标识 · 自动字号</h3><span class="tk">取门店名首字 · App 内左上角</span></div>
|
||
<div class="pcard-b"><div class="tenant">
|
||
<div class="row"><div class="tmono" style="background:linear-gradient(135deg,#1B4F8E,#0F3057)">鼎</div><div><b>鼎晟酒行</b><span>DINGSHENG</span></div></div>
|
||
<div class="row"><div class="tmono" style="background:linear-gradient(135deg,#7C1F2C,#4A1420)">茅</div><div><b>茅韵名酒</b><span>MAOYUN</span></div></div>
|
||
<div class="row"><div class="tmono" style="background:linear-gradient(135deg,#D98C00,#9A6200)">老</div><div><b>老李酒水批发</b><span>LAOLI</span></div></div>
|
||
</div></div></div>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>标记变体 / App 图标</h3><span class="tk">主体 / 反白 / 单色 · 圆角图标</span></div>
|
||
<div class="pcard-b" style="gap:28px">
|
||
<div class="mono-row">
|
||
<div class="vchip"><span class="vtile"><svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>主体</div>
|
||
<div class="vchip"><span class="vtile"><svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#fff" stroke="#DCE2EB"/><g stroke="#0F3057" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>反白</div>
|
||
<div class="vchip"><span class="vtile"><svg width="60" height="60" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="none"/><g stroke="#232934" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#232934"/></svg></span>单色</div>
|
||
</div>
|
||
<div class="ico-sizes">
|
||
<div class="vchip"><span class="ico"><svg width="84" height="84" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span>App 图标 · 1024</div>
|
||
<div class="vchip"><span class="ico"><svg width="48" height="48" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g></svg></span>64 · 省略酒滴</div>
|
||
<div class="vchip"><span class="ico"><svg width="30" height="30" viewBox="0 0 64 64"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M16 32L23 18L32 26L41 18L48 32"/></g></svg></span>28 · 仅山形</div>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div class="pcard"><div class="pcard-h"><h3>安全区 / 最小尺寸</h3><span class="tk">留白 = 标记高度的 1/3 · 最小 20px</span></div>
|
||
<div class="pcard-b"><span class="clear"><svg width="56" height="56" viewBox="0 0 64 64" style="display:block"><rect width="64" height="64" rx="15" fill="#0F3057"/><g stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M14 33L23 16L32 25L41 16L50 33"/><path d="M15 41L49 41"/></g><circle cx="32" cy="48" r="3" fill="#8B2331"/></svg></span></div></div>
|
||
</section>
|
||
|
||
<section class="section" id="c-brand"><h2>品牌主色</h2><p class="desc">主操作色与品牌色阶，随主题切换。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--primary,--primary-dark,--brand400,--brand50,--on-primary,--accent"></div></div></div></section>
|
||
<section class="section" id="c-status"><h2>语义状态色</h2><p class="desc">在售 / 预警 / 缺货 等状态。前景色与浅底成对。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--success,--success-bg,--warn,--warn-bg,--danger,--danger-bg"></div></div></div></section>
|
||
<section class="section" id="c-neutral"><h2>中性 / 文本 / 描边</h2><p class="desc">背景层级、文本层级与分隔线。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--page,--bg,--surface,--border,--border-subtle,--heading,--text,--muted,--faint"></div></div></div></section>
|
||
<section class="section" id="c-chrome"><h2>导航 Chrome</h2><p class="desc">顶栏与侧栏专属角色（与内容 surface 分离，故每主题可独立染色）。</p><div class="pcard"><div class="pcard-b"><div class="sw-grid" data-swatches="--top-bg,--top-fg,--side-bg,--side-fg,--side-active-bg,--side-active-fg"></div></div></div></section>
|
||
|
||
<section class="section" id="type">
|
||
<h2>字体 Type</h2><p class="desc">正文/中文系统字体；数据用等宽（库存数、金额）。下面是字号梯度。</p>
|
||
<div class="pcard"><div class="pcard-h"><h3>字号梯度</h3><span class="tk">--fs-display … --fs-xs</span></div>
|
||
<div class="pcard-b" style="display:block">
|
||
<div class="type-row"><span class="tk">--fs-display 28</span><span style="font-size:28px; font-weight:700; color:var(--heading)">岩美酒库 Display</span></div>
|
||
<div class="type-row"><span class="tk">--fs-h1 21</span><span style="font-size:21px; font-weight:700; color:var(--title)">页面标题 库存管理</span></div>
|
||
<div class="type-row"><span class="tk">--fs-h2 17</span><span style="font-size:17px; font-weight:600; color:var(--heading)">区块标题</span></div>
|
||
<div class="type-row"><span class="tk">--fs-title 15</span><span style="font-size:15px; font-weight:600; color:var(--heading)">卡片标题</span></div>
|
||
<div class="type-row"><span class="tk">--fs-body 13</span><span style="font-size:13px; color:var(--text)">正文与表格内容 · 茅台飞天 53°</span></div>
|
||
<div class="type-row"><span class="tk">--fs-sm 12</span><span style="font-size:12px; color:var(--muted)">次要说明 / 标签</span></div>
|
||
<div class="type-row"><span class="tk">mono</span><span style="font-size:15px; color:var(--heading); font-family:var(--font-mono)">¥2,640,000 · 1,284 SKU</span></div>
|
||
</div></div>
|
||
</section>
|
||
|
||
<section class="section" id="spacing">
|
||
<h2>间距 Spacing</h2><p class="desc">圆角 / 间距网格 / 阴影系统，全主题统一。</p>
|
||
<div class="pcard"><div class="pcard-h"><h3>圆角</h3><span class="tk">--r-sm … --r-xl</span></div><div class="pcard-b"><div class="scale" id="scaleRadius"></div></div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>间距网格</h3><span class="tk">--sp-1 … --sp-8</span></div><div class="pcard-b"><div class="scale" id="scaleSpace"></div></div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>阴影</h3><span class="tk">--sh-1 / --sh-2 / --sh-3</span></div><div class="pcard-b"><div class="scale">
|
||
<div class="box"><div class="sh" style="box-shadow:var(--sh-1)"></div>sh-1</div>
|
||
<div class="box"><div class="sh" style="box-shadow:var(--sh-2)"></div>sh-2</div>
|
||
<div class="box"><div class="sh" style="box-shadow:var(--sh-3)"></div>sh-3</div>
|
||
</div></div></div>
|
||
</section>
|
||
|
||
<section class="section" id="comp">
|
||
<h2>公用组件 Components</h2><p class="desc">来自 <code>atoms.css</code> 的原子，<b>桌面与移动共用</b>（按钮 / 输入 / 徽章 / 分段 / 菜单 / 弹窗等）。随主题换色。移动专属原子见下一节。</p>
|
||
<div class="pcard"><div class="pcard-h"><h3>按钮</h3><span class="tk">.btn .primary/.soft/.ghost/.danger/.sm</span></div><div class="pcard-b">
|
||
<div class="btn primary"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg>新增入库</div>
|
||
<div class="btn soft sm"><svg viewBox="0 0 24 24"><use href="#i-ic21"/></svg>详细搜索</div>
|
||
<div class="btn ghost">导出</div><div class="btn ghost sm">列设置</div><div class="btn danger">删除</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>输入 / 搜索</h3><span class="tk">.input .searchbox .ctrl</span></div><div class="pcard-b">
|
||
<input class="input" style="max-width:220px" placeholder="商品名 / 拼音 / 编码">
|
||
<div class="searchbox" style="width:240px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="搜索"></div>
|
||
<div class="ctrl" style="max-width:200px"><span class="ph">选择往来单位…</span><svg width="14" height="14" viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>分段切换 / 可搜索选择器</h3><span class="tk">.seg · .combo（录单网格用）</span></div><div class="pcard-b">
|
||
<div class="seg"><button class="on">入库</button><button>出库</button></div>
|
||
<div class="combo has" style="width:240px; flex:none"><input value="茅台 飞天 53°" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-close"/></svg></span></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>搜索下拉框（弹层）</h3><span class="tk">.combo + .combo-pop > .cp-search / .cp-body（单据头供应商/客户/仓库）</span></div><div class="pcard-b" style="align-items:flex-start; gap:20px">
|
||
<div class="combo" style="max-width:220px"><input placeholder="选择或搜索供应商…" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></span></div>
|
||
<div class="combo-pop" style="position:static; box-shadow:var(--sh-2); width:248px; display:flex">
|
||
<div class="cp-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input value="mt" readonly></div>
|
||
<div class="cp-body"><div class="cp-list">
|
||
<div class="cp-item sel"><span class="nm">茅台<span class="hl">华东</span>总代</span><small>GYS002</small><svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
|
||
<div class="cp-item cur"><span class="nm">名烟名酒城</span><small>GYS004</small></div>
|
||
<div class="cp-item"><span class="nm">华润万家配送</span><small>GYS005</small></div>
|
||
</div><div class="cp-new"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-plus"/></svg>新增「mt」到基础数据</div></div>
|
||
</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>搜索下拉框 · 带结果统计</h3><span class="tk">data-summary="1" → .combo-pop > … + .cp-foot（内容多时启用，底部显示总返回条数）</span></div><div class="pcard-b" style="align-items:flex-start; gap:20px">
|
||
<div class="combo" style="max-width:220px"><input placeholder="选择或搜索供应商…" readonly><span class="caf"><svg viewBox="0 0 24 24" stroke-width="2"><use href="#i-chevron-down"/></svg></span></div>
|
||
<div class="combo-pop" style="position:static; box-shadow:var(--sh-2); width:248px; display:flex">
|
||
<div class="cp-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="搜索供应商…" readonly></div>
|
||
<div class="cp-body"><div class="cp-list">
|
||
<div class="cp-item sel"><span class="nm">鼎晟供应链</span><small>GYS001</small><svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
|
||
<div class="cp-item"><span class="nm">茅台华东总代</span><small>GYS002</small></div>
|
||
<div class="cp-item"><span class="nm">川酒集团批发</span><small>GYS003</small></div>
|
||
<div class="cp-item"><span class="nm">名烟名酒城</span><small>GYS004</small></div>
|
||
<div class="cp-item"><span class="nm">华润万家配送</span><small>GYS005</small></div>
|
||
</div></div>
|
||
<div class="cp-foot">共 <b>5</b> 条结果</div>
|
||
</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>日期字段（滚轮选择）</h3><span class="tk">.datefield + .wheel-pop（年月日 · 单据/生产共用）· datewheel.js</span></div><div class="pcard-b" style="align-items:flex-start">
|
||
<div class="datefield" style="max-width:200px" data-val="2026-06-22"><span class="dval">2026-06-22</span><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg></div>
|
||
<div class="datefield" style="max-width:200px"><span class="dval ph">选择日期</span><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg></div>
|
||
<div class="wheel-pop show" style="position:static; box-shadow:none; width:248px"><div class="wheel-cols"><div class="wheel-center"></div>
|
||
<div class="wheel-col" style="overflow:hidden"><div class="wheel-item">2024</div><div class="wheel-item">2025</div><div class="wheel-item on">2026</div><div class="wheel-item">2027</div><div class="wheel-item">2028</div></div>
|
||
<div class="wheel-col" style="overflow:hidden"><div class="wheel-item">04</div><div class="wheel-item">05</div><div class="wheel-item on">06</div><div class="wheel-item">07</div><div class="wheel-item">08</div></div>
|
||
<div class="wheel-col" style="overflow:hidden"><div class="wheel-item">20</div><div class="wheel-item">21</div><div class="wheel-item on">22</div><div class="wheel-item">23</div><div class="wheel-item">24</div></div>
|
||
</div><div class="wheel-foot"><span class="wheel-today">今天</span><span class="wheel-ok">确定</span></div></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>筛选 Chip</h3><span class="tk">.chip · 内嵌列头筛选入口</span></div><div class="pcard-b">
|
||
<div class="chip">全部品类</div>
|
||
<div class="chip on">分类 <span class="cv">浓香</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
|
||
<div class="chip">时间范围 <svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>状态徽章 · 全部</h3><span class="tk">.badge .b-* · 对齐 schema 真实枚举 · 圆点已全局图标化（icons.js BADGE_ICON 单源映射自动注入，屏内无需手写 svg）</span></div><div class="pcard-b" style="display:block">
|
||
<div style="display:flex;flex-direction:column;gap:13px">
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">库存 · 按 min_stock 派生</span><span class="badge b-在售">在售</span><span class="badge b-预警">预警</span><span class="badge b-缺货">缺货</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">单据 · 入库/出库</span><span class="badge b-草稿">草稿</span><span class="badge b-待审核">待审核</span><span class="badge b-已通过">已通过</span><span class="badge b-已驳回">已驳回</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">往来单位 · 启用停用</span><span class="badge b-启用">启用</span><span class="badge b-停用">停用</span><span class="badge b-供应商">供应商</span><span class="badge b-客户">客户</span><span class="badge b-两者">两者</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">用户角色</span><span class="badge b-管理员">管理员</span><span class="badge b-普通">普通</span><span class="badge b-只读">只读</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">设备在线状态</span><span class="badge b-在线">在线</span><span class="badge b-离线">离线</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">库存盘点</span><span class="badge b-进行中">进行中</span><span class="badge b-已完成">已完成</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">授权兑换券</span><span class="badge b-未使用">未使用</span><span class="badge b-已兑换">已兑换</span><span class="badge b-作废">作废</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">账单结清 · 收付</span><span class="badge b-未结清">未结清</span><span class="badge b-已结清">已结清</span><span class="badge b-收款">收款</span><span class="badge b-付款">付款</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">进价待定 · 调货暂估</span><span class="badge b-待定价">待定价</span><span class="pending-price">待定价</span><span style="font-size:var(--fs-xs);color:var(--faint)">（入库进价留空/0，确认进价后回填）</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">图标徽章 .bi · 图标替代圆点</span><span class="badge bi b-草稿"><svg class="ic"><use href="#i-ic06"/></svg>草稿</span><span class="badge bi b-待审核"><svg class="ic"><use href="#i-ic04"/></svg>待审核</span><span class="badge bi b-已通过"><svg class="ic"><use href="#i-check"/></svg>已审核</span><span class="badge bi b-已驳回"><svg class="ic"><use href="#i-close"/></svg>已拒绝</span><span class="badge bi b-预警"><svg class="ic"><use href="#i-undo"/></svg>部分退单</span><span class="badge bi b-缺货"><svg class="ic"><use href="#i-undo"/></svg>已退单</span><span class="badge bi b-待定价"><svg class="ic"><use href="#i-yen"/></svg>待定价</span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap"><span style="width:160px;flex:none;font-size:var(--fs-xs);color:var(--muted);font-weight:600">纯图标徽章 .ico · 移动卡片</span><span class="badge ico b-草稿"><svg class="ic"><use href="#i-ic06"/></svg></span><span class="badge ico b-待审核"><svg class="ic"><use href="#i-ic04"/></svg></span><span class="badge ico b-已通过"><svg class="ic"><use href="#i-check"/></svg></span><span class="badge ico b-已驳回"><svg class="ic"><use href="#i-close"/></svg></span><span class="badge ico b-预警"><svg class="ic"><use href="#i-undo"/></svg></span><span class="badge ico b-缺货"><svg class="ic"><use href="#i-undo"/></svg></span><span class="badge ico b-待定价"><svg class="ic"><use href="#i-yen"/></svg></span><span style="font-size:var(--fs-xs);color:var(--faint)">（图标映射：草稿=文件 待审核=时钟 已审核=勾 已拒绝=叉 退单=撤回箭头 待定价=¥）</span></div>
|
||
</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>KPI 卡</h3><span class="tk">.kpi</span></div><div class="pcard-b">
|
||
<div class="kpi" style="width:200px"><div class="ic ic-info"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg></div><div class="t">SKU 总数</div><div class="v">1,284</div><div class="d up">▲ 2.3%</div></div>
|
||
<div class="kpi alert" style="width:200px"><div class="ic ic-alert"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="t">缺货预警</div><div class="v">17</div><div class="d down">需补货 6 项</div></div>
|
||
<div class="kpi warn" style="width:200px"><div class="ic ic-warn"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg></div><div class="t">草稿单数</div><div class="v">2</div><div class="d">待提交审核</div></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>表格行</h3><span class="tk">.table thead/tbody</span></div><div class="pcard-b" style="display:block">
|
||
<div class="table"><table><thead><tr><th>商品</th><th>分类</th><th class="num">库存</th><th><span class="fh filtered">状态 <svg class="funnel" viewBox="0 0 24 24"><use href="#i-ic68"/></svg></span></th></tr></thead><tbody>
|
||
<tr class="click"><td><div class="pname">茅台 飞天 53°</div><div class="pcode">MT-FT-500</div></td><td>酱香</td><td class="num"><span class="qty">128</span></td><td><span class="badge b-在售">在售</span></td></tr>
|
||
<tr class="click"><td><div class="pname">剑南春 水晶剑</div><div class="pcode">JNC-SJ-500</div></td><td>浓香</td><td class="num"><span class="qty low">8</span></td><td><span class="badge b-缺货">缺货</span></td></tr>
|
||
</tbody></table></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>提示条</h3><span class="tk">.notice info/danger（草稿恢复 / 驳回）</span></div><div class="pcard-b" style="display:block">
|
||
<div class="notice info"><svg viewBox="0 0 24 24"><use href="#i-info"/></svg><div>检测到未提交的入库单草稿（06-21 11:20），是否恢复？</div><div class="nb"><span class="lk">恢复</span><span class="lk" style="color:var(--muted)">放弃</span></div></div>
|
||
<div class="notice danger" style="margin-bottom:0"><svg viewBox="0 0 24 24"><use href="#i-alert"/></svg><div>单据被驳回：单价高于近期采购价，请核实后重报。</div></div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>单据明细行（商品 / 系列规格分列）</h3><span class="tk">.lines .lr · .lcell .ln/.lcode/.lser/.lspec</span></div><div class="pcard-b" style="display:block">
|
||
<div class="lines" style="max-width:480px"><div class="lh" style="grid-template-columns:1fr 124px 40px 64px 78px"><span>商品 · 编码</span><span>系列 / 规格</span><span style="text-align:right">数量</span><span style="text-align:right">单价</span><span style="text-align:right">金额</span></div>
|
||
<div class="lr" style="grid-template-columns:1fr 124px 40px 64px 78px;align-items:start"><span class="lcell"><span class="ln">泸州老窖 特曲</span><span class="lcode">LZLJ-TQ-52-500</span></span><span class="lcell"><span class="lser">特曲</span><span class="lspec">52° 500ml×6</span></span><span style="text-align:right;font-family:var(--font-mono)">48</span><span style="text-align:right;font-family:var(--font-mono)">¥320</span><span class="amt">¥15,360</span></div>
|
||
</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>抽屉操作分组</h3><span class="tk">.dactions · .dact-group/.dact-label/.dact-row（审核类 / 打印类）</span></div><div class="pcard-b" style="display:block">
|
||
<div class="dactions" style="margin-top:0">
|
||
<div class="dact-group"><span class="dact-label">单据审核</span><div class="dact-row"><div class="btn primary sm">审核通过</div><div class="btn danger sm">驳回</div><div class="btn ghost sm">结清</div><div class="btn danger sm">退单</div><div class="btn primary sm">提交审核</div></div></div>
|
||
<div class="dact-group"><span class="dact-label">打印</span><div class="dact-row"><div class="btn ghost sm"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg>打印标签</div><div class="btn ghost sm"><svg viewBox="0 0 24 24"><use href="#i-ic50"/></svg>打印单据</div></div></div>
|
||
</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>覆盖层（交互）</h3><span class="tk">.menu · .overlay/.modal · .drawer · .toast</span></div><div class="pcard-b">
|
||
<div class="btn ghost" onclick="demoMenu(event)">下拉菜单</div>
|
||
<div class="btn ghost" onclick="document.getElementById('demoModal').classList.add('show')">弹窗</div>
|
||
<div class="btn ghost" onclick="document.getElementById('demoDrawer').classList.add('show')">抽屉</div>
|
||
<div class="btn ghost" onclick="toast('操作成功 ✓')">Toast</div>
|
||
</div></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>分页 / 移动卡 / 状态栏 / 通知 / 遮罩</h3><span class="tk">.pager · .mcard · .statusbar · .notify-pop · .drawer-mask （列表/壳层原子）</span></div><div class="pcard-b" style="display:block">
|
||
<div class="pager" style="max-width:360px"><span>每页 8 条 · 共 24</span><div class="pg"><button disabled>‹</button><button class="cur">1</button><button>2</button><button>3</button><button>›</button></div></div>
|
||
<div class="mcard" style="max-width:360px;margin-top:14px"><div class="mcard-head"><span class="mt">茅台 飞天 53°</span><span class="msub">MT-FT-500</span><span class="badge b-在售" style="margin-left:auto">在售</span></div></div>
|
||
<div style="margin-top:16px"><div class="statusbar" style="position:static;border-radius:var(--r-md)"><div class="sb-group"><span class="sb-i"><svg viewBox="0 0 24 24"><use href="#i-ic44"/></svg><b>DSJH-001</b></span><span class="sb-i"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg>当前 18:00:00</span></div><div class="sb-group right"><span class="sb-i ok"><svg viewBox="0 0 24 24"><use href="#i-cloud"/></svg>已连接</span></div></div></div>
|
||
<div style="margin-top:16px"><div class="notify-pop show" style="position:static;width:330px"><div class="np-head"><h4>通知</h4><span class="np-clear">全部已读</span></div><div class="np-list"><div class="np-item unread"><div class="np-ic warn"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></div><div class="np-tx"><div class="np-t">入库单 待审核</div><div class="np-d">茅台华东总代 · 3 项</div></div><div class="np-time">10 分钟前</div></div></div><div class="np-foot">查看全部</div></div></div>
|
||
<p style="font-size:var(--fs-xs);color:var(--muted);margin:18px 0 8px"><b>通知中心列表行</b> <code>.nt-item</code> / 类型图标 <code>.nt-ic</code>（warn / danger / info / ok）—— 通知列表页与详情页共用，桌面/移动一致：</p>
|
||
<div style="max-width:460px"><a class="nt-item unread" style="cursor:default"><span class="nt-ic warn"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg></span><div class="nt-bd"><div class="nt-t"><span class="nt-dot"></span><span class="nt-tt">入库单 RK-20260620-001 待审核</span><span class="nt-time">10 分钟前</span></div><div class="nt-d">茅台华东总代 · 3 项 · ¥48,360</div></div></a>
|
||
<a class="nt-item" style="cursor:default"><span class="nt-ic danger"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg></span><div class="nt-bd"><div class="nt-t"><span class="nt-tt">五粮液 普五 库存预警</span><span class="nt-time">1 小时前</span></div><div class="nt-d">当前 6 件，低于安全库存 6</div></div></a></div>
|
||
<p style="font-size:var(--fs-xs);color:var(--muted);margin:14px 0 0">遮罩 <code>.drawer-mask</code>：抽屉/弹层背后的半透明背板，点击关闭。</p>
|
||
</div></div>
|
||
</section>
|
||
|
||
|
||
<section class="section" id="m-comp">
|
||
<h2>移动专属组件 .m-*</h2><p class="desc">来自 <code>mobile-atoms.css</code> 的移动专属原子，由 <code>mobile-shell.js</code> 装配外壳。<b>复用上方公用原子</b>（按钮/徽章/分段/输入），此处只展示移动新增的 <code>.m-*</code>。</p>
|
||
<div style="margin:0 0 16px"><a class="btn ghost" href="screens/mobile-kit.html"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg>打开移动 UI Kit · 全部 .m-* 实机展示</a></div>
|
||
<div class="pcard"><div class="pcard-h"><h3>移动壳 + 列表（实机预览）</h3><span class="tk">.m-top · .m-tabbar · .m-page · .m-kpi · .m-search · .m-filters/.m-pill · .m-card/.m-row · .m-fab</span></div>
|
||
<div class="pcard-b" style="align-items:flex-start"><div class="mdemo">
|
||
<div class="mphone">
|
||
<div class="m-top"><div class="m-title">库存</div><div class="m-actions"><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-shirt"/></svg></div><div class="m-ic"><svg viewBox="0 0 24 24"><use href="#i-bell"/></svg><span class="m-dot">3</span></div><div class="m-av">王</div></div></div>
|
||
<div class="m-page has-tabs"><div class="m-scroll">
|
||
<div class="m-kpi">
|
||
<div class="k"><div class="kl">SKU 总数</div><div class="kv">1,284</div><div class="kd up">▲ 2.3%</div></div>
|
||
<div class="k"><div class="kl">库存货值</div><div class="kv">¥264万</div><div class="kd up">▲ 1.5%</div></div>
|
||
<div class="k"><div class="kl">在库数量</div><div class="kv">18,920</div><div class="kd">件</div></div>
|
||
<div class="k"><div class="kl">缺货预警</div><div class="kv">17</div><div class="kd warn">需补货 6</div></div>
|
||
</div>
|
||
<div class="m-search" style="margin-top:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input placeholder="商品名 / 拼音 / 编码"></div>
|
||
<div class="m-filters"><div class="m-pill on">全部</div><div class="m-pill">酱香</div><div class="m-pill">浓香</div><div class="m-pill">清香</div></div>
|
||
<div class="m-section">商品 · 共 10</div>
|
||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">茅台 飞天 53°</div><div class="mc-sub">MT-FT-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-在售">在售</span><span class="mc-amt">128 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||
<a class="m-card"><div class="m-row"><div class="mc-main"><div class="mc-nm">剑南春 水晶剑</div><div class="mc-sub">JNC-SJ-500 · 500ml×6</div></div><div class="mc-right"><span class="badge b-缺货">缺货</span><span class="mc-amt">8 件</span></div><div class="mc-chev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></div></div></a>
|
||
</div></div>
|
||
<nav class="m-tabbar">
|
||
<a class="m-tab on"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg><span>库存</span></a>
|
||
<a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg><span>入库</span></a>
|
||
<a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg><span>出库</span></a>
|
||
<a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg><span>财务</span></a>
|
||
<a class="m-tab"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg><span>我的</span></a>
|
||
</nav>
|
||
<div class="m-fab"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg></div>
|
||
</div>
|
||
|
||
<div class="mcol">
|
||
<div><div class="mlab">.m-form · .m-field · .m-input · .m-select</div>
|
||
<div class="m-form" style="margin-top:10px">
|
||
<div class="m-field"><label>商品名称</label><input class="m-input" placeholder="如：茅台 飞天"></div>
|
||
<div class="m-field"><label>分类（香型）</label><div class="m-select"><span>酱香</span><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg></div></div>
|
||
<div class="m-field" style="margin-bottom:0"><label>备注</label><textarea class="m-input" placeholder="选填…"></textarea></div>
|
||
</div></div>
|
||
|
||
<div><div class="mlab">.m-sheet-h · .m-opt（底部 sheet 内容）</div>
|
||
<div class="msheet-demo" style="margin-top:10px">
|
||
<div class="m-sheet-h"><h3>筛选 · 香型</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2"><use href="#i-close"/></svg></div>
|
||
<div style="padding:4px 16px 8px">
|
||
<div class="m-opt sel">全部<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
|
||
<div class="m-opt">酱香<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
|
||
<div class="m-opt">浓香<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg></div>
|
||
</div>
|
||
</div></div>
|
||
|
||
<div><div class="mlab">.m-hub（我的 · 功能入口）</div>
|
||
<div class="m-hub" style="margin-top:10px">
|
||
<a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg></span>往来单位<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
|
||
<a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg></span>基础数据<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
|
||
<a><span class="hic"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg></span>系统设置<span class="hchev"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg></span></a>
|
||
</div></div>
|
||
|
||
<div><div class="mlab">.m-actionbar（全屏表单底部操作条）</div>
|
||
<div style="position:relative; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-top:10px">
|
||
<div class="m-actionbar" style="position:relative; padding-bottom:12px">
|
||
<div style="flex:1; display:flex; flex-direction:column; line-height:1.2"><span style="font-size:var(--fs-xs); color:var(--muted)">合计</span><b style="font-size:var(--fs-title); color:var(--heading); font-family:var(--font-mono)">¥10,500</b></div>
|
||
<div class="btn ghost">存草稿</div><div class="btn primary">提交审核</div>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="icons">
|
||
<h2>图标 Icons</h2><p class="desc">全部 92 个图标登记在 <code>screens/icons.js</code> 的 SVG sprite（单一真源）。各屏用 <code><svg><use href="#i-xxx"/></svg></code> 引用——<b>改一处、全局生效</b>。新增图标先在此登记 symbol，再用 use 引用；门禁 ❽ 禁止内联图标。</p>
|
||
<div class="pcard"><div class="pcard-h"><h3>图标库 · 92 个</h3><span class="tk">icons.js <symbol> · <use href="#i-*"></span></div><div class="pcard-b" style="display:block"><div class="icon-grid"><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-arrow-left"/></svg><span>i-arrow-left</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-bottle"/></svg><span>i-bottle</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg><span>i-box</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-box-2"/></svg><span>i-box-2</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-check"/></svg><span>i-check</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-chevron-down"/></svg><span>i-chevron-down</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-chevron-left"/></svg><span>i-chevron-left</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-chevron-right"/></svg><span>i-chevron-right</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-close"/></svg><span>i-close</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-download"/></svg><span>i-download</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-edit"/></svg><span>i-edit</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-eye"/></svg><span>i-eye</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-gear"/></svg><span>i-gear</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-megaphone"/></svg><span>i-megaphone</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-menu"/></svg><span>i-menu</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-plus"/></svg><span>i-plus</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-refresh"/></svg><span>i-refresh</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><span>i-search</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-shield"/></svg><span>i-shield</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-shield-2"/></svg><span>i-shield-2</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-upload"/></svg><span>i-upload</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-bug"/></svg><span>i-bug</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-lightbulb"/></svg><span>i-lightbulb</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic01"/></svg><span>i-ic01</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic02"/></svg><span>i-ic02</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic03"/></svg><span>i-ic03</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic04"/></svg><span>i-ic04</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic05"/></svg><span>i-ic05</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic06"/></svg><span>i-ic06</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic07"/></svg><span>i-ic07</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic08"/></svg><span>i-ic08</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic09"/></svg><span>i-ic09</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic10"/></svg><span>i-ic10</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic11"/></svg><span>i-ic11</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic12"/></svg><span>i-ic12</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic13"/></svg><span>i-ic13</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic14"/></svg><span>i-ic14</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic15"/></svg><span>i-ic15</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic16"/></svg><span>i-ic16</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic17"/></svg><span>i-ic17</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic18"/></svg><span>i-ic18</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic19"/></svg><span>i-ic19</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic20"/></svg><span>i-ic20</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic21"/></svg><span>i-ic21</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic22"/></svg><span>i-ic22</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic23"/></svg><span>i-ic23</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic24"/></svg><span>i-ic24</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic25"/></svg><span>i-ic25</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic26"/></svg><span>i-ic26</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic27"/></svg><span>i-ic27</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic28"/></svg><span>i-ic28</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic29"/></svg><span>i-ic29</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic30"/></svg><span>i-ic30</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic31"/></svg><span>i-ic31</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic32"/></svg><span>i-ic32</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic33"/></svg><span>i-ic33</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic34"/></svg><span>i-ic34</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic35"/></svg><span>i-ic35</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic36"/></svg><span>i-ic36</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic37"/></svg><span>i-ic37</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic38"/></svg><span>i-ic38</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic39"/></svg><span>i-ic39</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic40"/></svg><span>i-ic40</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic41"/></svg><span>i-ic41</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic42"/></svg><span>i-ic42</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic43"/></svg><span>i-ic43</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic44"/></svg><span>i-ic44</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic45"/></svg><span>i-ic45</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic46"/></svg><span>i-ic46</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic47"/></svg><span>i-ic47</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic48"/></svg><span>i-ic48</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic49"/></svg><span>i-ic49</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic50"/></svg><span>i-ic50</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic51"/></svg><span>i-ic51</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic52"/></svg><span>i-ic52</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic53"/></svg><span>i-ic53</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic54"/></svg><span>i-ic54</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic55"/></svg><span>i-ic55</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic56"/></svg><span>i-ic56</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic57"/></svg><span>i-ic57</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic58"/></svg><span>i-ic58</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic59"/></svg><span>i-ic59</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic60"/></svg><span>i-ic60</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic61"/></svg><span>i-ic61</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic62"/></svg><span>i-ic62</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic63"/></svg><span>i-ic63</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic64"/></svg><span>i-ic64</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic65"/></svg><span>i-ic65</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic66"/></svg><span>i-ic66</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic67"/></svg><span>i-ic67</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic68"/></svg><span>i-ic68</span></div><div class="icell"><svg viewBox="0 0 24 24"><use href="#i-ic69"/></svg><span>i-ic69</span></div></div></div></div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- 组件演示：弹窗 / 抽屉 / toast -->
|
||
<div class="overlay" id="demoModal"><div class="modal"><div class="modal-head"><h3>弹窗示例</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="this.closest('.overlay').classList.remove('show')"><use href="#i-close"/></svg></div><div class="modal-body" style="color:var(--muted); font-size:var(--fs-body)">这是 <code>.modal</code> 原子。库存的「新增入库」即基于它。</div><div class="modal-foot"><div class="btn ghost" onclick="this.closest('.overlay').classList.remove('show')">取消</div><div class="btn primary" onclick="this.closest('.overlay').classList.remove('show'); toast('已保存 ✓')">保存</div></div></div></div>
|
||
<div class="drawer" id="demoDrawer"><div class="drawer-head"><h3>抽屉示例</h3><svg class="x" viewBox="0 0 24 24" stroke-width="2" onclick="this.closest('.drawer').classList.remove('show')"><use href="#i-close"/></svg></div><div class="drawer-body"><div class="drow"><span>编码</span><b>MT-FT-500</b></div><div class="drow"><span>库存</span><b>128 件</b></div><div class="drow"><span>状态</span><b><span class="badge b-在售">在售</span></b></div></div></div>
|
||
<div class="toast" id="toast"></div>
|
||
|
||
<script>
|
||
const THEMES={a:{n:'经典蓝'},b:{n:'琥珀'},c:{n:'酒窖'}};
|
||
function setTheme(t){ document.documentElement.dataset.theme=t; document.querySelectorAll('#seg button').forEach(b=>b.classList.toggle('on',b.dataset.t===t)); localStorage.setItem('jiu-theme',t); renderTokens(); }
|
||
document.querySelectorAll('#seg button').forEach(b=>b.onclick=()=>setTheme(b.dataset.t));
|
||
|
||
// 色板从实际 CSS 变量读取（换主题刷新）
|
||
function renderTokens(){
|
||
const cs=getComputedStyle(document.documentElement);
|
||
document.querySelectorAll('[data-swatches]').forEach(grid=>{
|
||
grid.innerHTML = grid.dataset.swatches.split(',').map(tok=>{
|
||
const v=cs.getPropertyValue(tok).trim();
|
||
return `<div class="sw"><div class="band" style="background:var(${tok})"></div><div class="m"><div class="n">${tok.replace('--','')}</div><div class="v">${v||'—'}</div></div></div>`;
|
||
}).join('');
|
||
});
|
||
}
|
||
// 圆角 / 间距 比例尺
|
||
function renderScales(){
|
||
const radii=[['sm',4],['md',6],['lg',10],['xl',14]];
|
||
document.getElementById('scaleRadius').innerHTML = radii.map(([n,px])=>`<div class="box"><div class="rq" style="width:56px;height:56px;border-radius:var(--r-${n})"></div>r-${n} · ${px}</div>`).join('');
|
||
const sp=[['1',4],['2',8],['3',12],['4',16],['5',20],['6',24],['8',32]];
|
||
document.getElementById('scaleSpace').innerHTML = sp.map(([n,px])=>`<div class="box"><div class="sq" style="width:var(--sp-${n});height:36px;border-radius:2px"></div>sp-${n} · ${px}</div>`).join('');
|
||
}
|
||
|
||
// 文档导航 scrollspy
|
||
const navLinks=[...document.querySelectorAll('.dnav')];
|
||
navLinks.forEach(a=>a.onclick=(e)=>{ e.preventDefault(); document.getElementById(a.dataset.s).scrollIntoView({behavior:'smooth',block:'start'}); });
|
||
const obs=new IntersectionObserver(es=>{ es.forEach(en=>{ if(en.isIntersecting){ const id=en.target.id; navLinks.forEach(a=>a.classList.toggle('on',a.dataset.s===id)); } }); },{rootMargin:'-60px 0px -75% 0px'});
|
||
document.querySelectorAll('.section').forEach(s=>obs.observe(s));
|
||
|
||
// 组件演示
|
||
let menuEl=null;
|
||
function demoMenu(e){ if(menuEl){menuEl.remove();menuEl=null;return;} const r=e.currentTarget.getBoundingClientRect(); menuEl=document.createElement('div'); menuEl.className='menu'; menuEl.style.left=r.left+'px'; menuEl.style.top=(r.bottom+6)+'px'; menuEl.innerHTML=['酱香','浓香','清香'].map((x,i)=>`<div class="menu-item ${i==1?'sel':''}">${i==1?'<svg class="ck" viewBox="0 0 24 24" stroke-width="2"><use href="#i-check"/></svg>':'<span style="width:16px"></span>'}${x}</div>`).join(''); document.body.appendChild(menuEl); }
|
||
document.addEventListener('click',e=>{ if(menuEl && !menuEl.contains(e.target) && !e.target.closest('[onclick^="demoMenu"]')) {menuEl.remove();menuEl=null;} });
|
||
let toastT; function toast(m){ const t=document.getElementById('toast'); t.textContent=m; t.classList.add('show'); clearTimeout(toastT); toastT=setTimeout(()=>t.classList.remove('show'),2000); }
|
||
document.addEventListener('keydown',e=>{ if(e.key==='Escape'){ document.querySelectorAll('.overlay.show,.drawer.show').forEach(x=>x.classList.remove('show')); } });
|
||
|
||
setTheme(localStorage.getItem('jiu-theme')||'a'); renderScales();
|
||
</script>
|
||
<script src="screens/icons.js"></script>
|
||
</body>
|
||
</html>
|