mirror of
https://github.com/hpd840321/craftlabs-authorization-sdk.git
synced 2026-06-09 18:10:30 +08:00
370 lines
23 KiB
HTML
370 lines
23 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>CraftLabs 设计体系 v1.0</title>
|
||
<style>
|
||
:root {
|
||
--brand:#2C3E6B; --brand2:#3D5A99; --bg:#EAEFFA; --card:#fff; --border:#E8ECF1;
|
||
--text:#303133; --text2:#606266; --text3:#909399; --text4:#C0C4CC;
|
||
--th:#F2F5FC; --s-bg:#F8F9FB; --ok:#1A7A3A; --okbg:#E6F7EE; --okbd:#A8E6C1;
|
||
--bad:#F56C6C; --badbg:#FEF0F0; --warn:#E6A23C; --warnbg:#FDF6EC; --dot:#D54941;
|
||
--r-sm:4px; --r-md:6px; --r-lg:8px;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
|
||
.header{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:24px 32px}
|
||
.header h1{font-size:24px;font-weight:700;margin-bottom:4px}
|
||
.header p{font-size:13px;opacity:.85}
|
||
.nav{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;display:flex;overflow-x:auto}
|
||
.nav a{padding:10px 20px;font-size:13px;color:var(--text2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
|
||
.nav a:hover,.nav a.active{color:var(--brand);font-weight:600;border-bottom-color:var(--brand)}
|
||
.container{max-width:1200px;margin:0 auto;padding:24px 20px}
|
||
.sec{margin-bottom:32px}
|
||
.sec-title{font-size:20px;font-weight:700;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--th)}
|
||
.sec-sub{font-size:15px;font-weight:600;color:var(--brand);margin:20px 0 12px}
|
||
|
||
/* Swatches */
|
||
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
|
||
.sw{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);padding:12px 14px}
|
||
.sw-box{width:56px;height:56px;border-radius:var(--r-md);border:1px solid var(--border);flex-shrink:0}
|
||
.sw-info{flex:1;min-width:0}
|
||
.sw-name{font-weight:600;font-size:13px}.sw-hex{font-size:11px;color:var(--text3);font-family:monospace;margin-top:2px}
|
||
.sw-use{font-size:11px;color:var(--text4);margin-top:2px}
|
||
|
||
/* Card */
|
||
.card{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);padding:16px;margin-bottom:12px}
|
||
.card-title{font-weight:600;font-size:14px;margin-bottom:10px}
|
||
|
||
/* Type specimens */
|
||
.type-spec{margin-bottom:8px;padding:6px 0}
|
||
.type-label{font-size:11px;color:var(--text4);margin-bottom:2px}
|
||
.type-h1{font-size:22px;font-weight:700}
|
||
.type-h2{font-size:20px;font-weight:700}
|
||
.type-h3{font-size:16px;font-weight:600}
|
||
.type-body{font-size:14px}
|
||
.type-sec{font-size:13px;color:var(--text2)}
|
||
.type-cap{font-size:12px;color:var(--text3)}
|
||
.type-mono{font-size:12px;font-family:monospace}
|
||
|
||
/* Component demos */
|
||
.demo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0}
|
||
.btn{font-size:13px;font-weight:500;border-radius:var(--r-sm);padding:6px 14px;cursor:pointer;border:none;font-family:inherit}
|
||
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand2)}
|
||
.btn-cta{background:var(--brand);color:#fff;box-shadow:0 2px 6px rgba(44,62,107,.2);padding:7px 16px}
|
||
.btn-cancel{background:#fff;color:var(--text2);border:1px solid var(--border)}
|
||
.btn-danger{background:var(--bad);color:#fff}
|
||
.btn-link{background:none;border:none;color:var(--brand);cursor:pointer;font-size:13px;padding:0;font-family:inherit}
|
||
|
||
.input-demo{border:1px solid #E0E3E8;border-radius:var(--r-sm);padding:7px 12px;font-size:13px;color:var(--text);outline:none;min-width:200px;font-family:inherit}
|
||
.input-demo:focus{border-color:var(--brand)}
|
||
.search-demo{border:1px solid #E0E3E8;border-radius:var(--r-md);padding:5px 12px;background:var(--s-bg);display:flex;align-items:center;gap:8px;min-width:240px}
|
||
.search-demo span{color:var(--text4);font-size:13px}
|
||
.search-demo input{border:none;outline:none;flex:1;font-size:13px;background:transparent;font-family:inherit}
|
||
|
||
.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:500}
|
||
.tag-ok{background:var(--okbg);color:var(--ok);border:1px solid var(--okbd)}
|
||
.tag-bad{background:var(--badbg);color:var(--bad);border:1px solid #FBC4C4}
|
||
.tag-warn{background:var(--warnbg);color:var(--warn);border:1px solid #F5DAB1}
|
||
.tag-gray{background:#f4f4f5;color:var(--text3);border:1px solid #e9e9eb}
|
||
|
||
.badge-demo{position:relative;display:inline-flex;align-items:center}
|
||
.badge-dot{position:absolute;top:-4px;right:-8px;width:16px;height:16px;background:var(--dot);border-radius:50%;font-size:10px;color:#fff;line-height:16px;text-align:center;font-weight:600}
|
||
|
||
.menu-row{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);overflow:hidden;max-width:240px}
|
||
.menu-title{padding:6px 16px;font-size:11px;color:var(--text4);text-transform:uppercase;font-weight:600}
|
||
.menu-it{padding:8px 16px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);border-right:3px solid transparent}
|
||
.menu-it.active{background:var(--th);color:var(--brand);font-weight:600;border-right-color:var(--brand)}
|
||
|
||
.bc{display:flex;align-items:center;gap:6px;font-size:13px;padding:8px 0}
|
||
.bc .sep{color:var(--text4)}.bc .cur{color:var(--brand);font-weight:600}
|
||
|
||
/* Layout diagram */
|
||
.layout-diagram{background:var(--card);border-radius:var(--r-md);border:1px solid var(--border);padding:8px;font-size:11px}
|
||
.ld-header{background:#fff;height:28px;line-height:28px;text-align:center;color:var(--text3);margin-bottom:4px;border:1px dashed var(--brand)}
|
||
.ld-body{display:flex;gap:4px;height:160px}
|
||
.ld-sidebar{background:#fff;width:56px;text-align:center;padding:4px;color:var(--text3);border:1px dashed var(--text4);font-size:10px}
|
||
.ld-content{flex:1;display:flex;flex-direction:column;gap:4px}
|
||
.ld-bc{background:#fff;height:20px;line-height:20px;text-align:center;color:var(--text2);font-size:10px;border:1px dashed var(--text4)}
|
||
.ld-main{flex:1;background:#fff;display:flex;gap:3px;padding:3px}
|
||
.ld-tree{background:var(--th);width:48px;text-align:center;font-size:9px;color:var(--text3);padding:4px}
|
||
.ld-area{flex:1;background:var(--bg);border:1px dashed var(--text4);text-align:center;font-size:9px;color:var(--text3);padding:4px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>CraftLabs 设计体系 v1.0</h1>
|
||
<p>基于 Figma「安徽地质博物馆 v2.0」Token · 适配 delivery-platform-ui · 2026-05-19</p>
|
||
</div>
|
||
|
||
<nav class="nav" id="nav">
|
||
<a href="#colors" class="active">色彩</a><a href="#type">字体</a><a href="#space">间距&圆角</a><a href="#layout">布局</a><a href="#components">组件</a><a href="#dialog">弹框</a><a href="#pages">页面</a>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
|
||
<!-- ===== COLORS ===== -->
|
||
<section class="sec" id="colors">
|
||
<h2 class="sec-title">🎨 色彩系统</h2>
|
||
<h3 class="sec-sub">品牌色</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="sw-box" style="background:#2C3E6B"></div><div class="sw-info"><div class="sw-name">Brand / Primary</div><div class="sw-hex">#2C3E6B</div><div class="sw-use">按钮、链接、选中态、表头</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#3D5A99"></div><div class="sw-info"><div class="sw-name">Brand Hover</div><div class="sw-hex">#3D5A99</div><div class="sw-use">主色悬停态</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#F2F5FC"></div><div class="sw-info"><div class="sw-name">Brand Light</div><div class="sw-hex">#F2F5FC</div><div class="sw-use">表头背景、选中背景、hover</div></div></div>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">背景 & 表面</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="sw-box" style="background:#EAEFFA"></div><div class="sw-info"><div class="sw-name">Page Background</div><div class="sw-hex">#EAEFFA</div><div class="sw-use">全局页面底色</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#FFFFFF;border-color:#ddd"></div><div class="sw-info"><div class="sw-name">Card / Surface</div><div class="sw-hex">#FFFFFF</div><div class="sw-use">卡片、弹窗、菜单背景</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#F8F9FB"></div><div class="sw-info"><div class="sw-name">Search / Input BG</div><div class="sw-hex">#F8F9FB</div><div class="sw-use">搜索框、输入框背景</div></div></div>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">文字色</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="sw-box" style="background:#303133"></div><div class="sw-info"><div class="sw-name">Text Primary</div><div class="sw-hex">#303133</div><div class="sw-use">标题、正文</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#606266"></div><div class="sw-info"><div class="sw-name">Text Secondary</div><div class="sw-hex">#606266</div><div class="sw-use">标签、说明</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#909399"></div><div class="sw-info"><div class="sw-name">Text Placeholder</div><div class="sw-hex">#909399</div><div class="sw-use">占位符、辅助</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#C0C4CC"></div><div class="sw-info"><div class="sw-name">Text Disabled</div><div class="sw-hex">#C0C4CC</div><div class="sw-use">禁用态、图标</div></div></div>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">语义色</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="sw-box" style="background:#E6F7EE"></div><div class="sw-info"><div class="sw-name">Success <span style="font-size:11px;color:#1A7A3A">#1A7A3A</span></div><div class="sw-hex">bg: #E6F7EE / border: #A8E6C1</div><div class="sw-use">活跃状态、成功</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#FEF0F0"></div><div class="sw-info"><div class="sw-name">Danger <span style="font-size:11px;color:#F56C6C">#F56C6C</span></div><div class="sw-hex">bg: #FEF0F0 / border: #FBC4C4</div><div class="sw-use">吊销、删除</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#FDF6EC"></div><div class="sw-info"><div class="sw-name">Warning <span style="font-size:11px;color:#E6A23C">#E6A23C</span></div><div class="sw-hex">bg: #FDF6EC / border: #F5DAB1</div><div class="sw-use">待处理、警告</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#D54941"></div><div class="sw-info"><div class="sw-name">Badge / Notification</div><div class="sw-hex">#D54941</div><div class="sw-use">通知红点、NEW标记</div></div></div>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">边框色</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="sw-box" style="background:#E8ECF1"></div><div class="sw-info"><div class="sw-name">Border General</div><div class="sw-hex">#E8ECF1</div><div class="sw-use">卡片、表格、菜单边框</div></div></div>
|
||
<div class="sw"><div class="sw-box" style="background:#E0E3E8"></div><div class="sw-info"><div class="sw-name">Border Input</div><div class="sw-hex">#E0E3E8</div><div class="sw-use">输入框边框</div></div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== TYPOGRAPHY ===== -->
|
||
<section class="sec" id="type">
|
||
<h2 class="sec-title">🔤 字体排版</h2>
|
||
<div class="card">
|
||
<div class="type-spec"><div class="type-label">H1 · 22px / 700</div><div class="type-h1">页面主标题 Page Title</div></div>
|
||
<div class="type-spec"><div class="type-label">H2 · 20px / 700</div><div class="type-h2">区块标题 Section Title</div></div>
|
||
<div class="type-spec"><div class="type-label">H3 · 16px / 600</div><div class="type-h3">弹框标题 Dialog Title</div></div>
|
||
<div class="type-spec"><div class="type-label">Body · 14px / 400</div><div class="type-body">正文内容，表格数据，菜单项文字。The quick brown fox jumps over the lazy dog.</div></div>
|
||
<div class="type-spec"><div class="type-label">Secondary · 13px / 400 · #606266</div><div class="type-sec">次要文字，标签说明，表单标签文字。</div></div>
|
||
<div class="type-spec"><div class="type-label">Caption · 12px / 400 · #909399</div><div class="type-cap">时间戳、统计数字辅助、页脚信息。</div></div>
|
||
<div class="type-spec"><div class="type-label">Code/Mono · 12px / 400 · monospace</div><div class="type-mono">01JQNX...a1b2 · SN-2026-A1B2C · kp_2026_q2</div></div>
|
||
</div>
|
||
<div class="card"><div class="card-title">字体族</div><code style="font-size:13px;color:var(--text2)">-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif</code></div>
|
||
</section>
|
||
|
||
<!-- ===== SPACING & RADIUS ===== -->
|
||
<section class="sec" id="space">
|
||
<h2 class="sec-title">📏 间距 & 圆角 & 阴影</h2>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
|
||
<div class="card"><div class="card-title">间距</div>
|
||
<div style="font-size:13px;color:var(--text2);line-height:2"><b>4px</b> 图标文字间距<br><b>8px</b> 按钮/筛选间距<br><b>12px</b> 卡片/统计卡间距<br><b>16px</b> 表单/内容上下<br><b>20px</b> 内容左右/弹框内<br><b>24px</b> 区块间距</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">圆角</div>
|
||
<div style="font-size:13px;color:var(--text2);line-height:2">
|
||
<div style="border:1px solid var(--brand);border-radius:4px;padding:4px 8px;margin-bottom:6px;display:inline-block">4px 输入框/按钮</div><br>
|
||
<div style="border:1px solid var(--brand);border-radius:6px;padding:6px 10px;margin-bottom:6px;display:inline-block">6px 卡片/搜索框</div><br>
|
||
<div style="border:1px solid var(--brand);border-radius:8px;padding:8px 12px;display:inline-block">8px 弹框</div>
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">阴影</div>
|
||
<div style="font-size:12px;color:var(--text2);line-height:2">
|
||
<div style="box-shadow:0 1px 2px rgba(0,0,0,.03);padding:6px 10px;margin-bottom:6px;border-radius:4px">卡片: 0 1px 2px</div>
|
||
<div style="box-shadow:0 2px 6px rgba(44,62,107,.2);padding:6px 10px;margin-bottom:6px;border-radius:4px;background:var(--brand);color:#fff">CTA按钮: 0 2px 6px</div>
|
||
<div style="box-shadow:0 8px 40px rgba(0,0,0,.15);padding:6px 10px;border-radius:4px">弹框: 0 8px 40px</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== LAYOUT ===== -->
|
||
<section class="sec" id="layout">
|
||
<h2 class="sec-title">📐 布局体系</h2>
|
||
<div class="layout-diagram">
|
||
<div class="ld-header">Header · 60px 固定 · Logo + 导航 + 搜索 + 🔔³ + ⚙️ + 👤</div>
|
||
<div class="ld-body">
|
||
<div class="ld-sidebar">Sidebar<br>232px<br>白底<br>11项</div>
|
||
<div class="ld-content">
|
||
<div class="ld-bc">Breadcrumb · 46px · 授权运营 › 当前页面</div>
|
||
<div class="ld-main">
|
||
<div class="ld-tree">Tree<br>280px<br>(可选)</div>
|
||
<div class="ld-area">Main Content · 自适应<br>内边距: 20px左右 / 16px上下</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px">
|
||
<div class="card"><div class="card-title">尺寸速查</div><div style="font-size:12px;color:var(--text2);line-height:2;font-family:monospace">
|
||
Header: 60px · Sidebar: 232px · Breadcrumb: 46px<br>Tree: 280px · Content pad: 20px/16px<br>Card gap: 12px · Form gap: 16px
|
||
</div></div>
|
||
<div class="card"><div class="card-title">页面类型</div><div style="font-size:12px;color:var(--text2);line-height:2">
|
||
标准列表: 全宽卡片+筛选+表格<br>Tree+列表: 左侧280px树+右侧列表<br>工作台: 统计卡片+图表+待办<br>详情: 卡片+操作按钮<br>只读: 简单表格
|
||
</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== COMPONENTS ===== -->
|
||
<section class="sec" id="components">
|
||
<h2 class="sec-title">🧩 组件</h2>
|
||
|
||
<h3 class="sec-sub">按钮</h3>
|
||
<div class="card"><div class="demo-row">
|
||
<button class="btn btn-primary">主按钮</button>
|
||
<button class="btn btn-cta">＋ CTA 按钮</button>
|
||
<button class="btn btn-cancel">取消</button>
|
||
<button class="btn btn-danger">删除</button>
|
||
<button class="btn-link">链接按钮</button>
|
||
</div></div>
|
||
|
||
<h3 class="sec-sub">输入框 & 搜索</h3>
|
||
<div class="card"><div class="demo-row">
|
||
<input class="input-demo" placeholder="普通输入框...">
|
||
<div class="search-demo"><span>🔍</span><input placeholder="搜索..."></div>
|
||
</div></div>
|
||
|
||
<h3 class="sec-sub">状态标签</h3>
|
||
<div class="card"><div class="demo-row">
|
||
<span class="tag tag-ok">活跃</span>
|
||
<span class="tag tag-warn">待处理</span>
|
||
<span class="tag tag-bad">已吊销</span>
|
||
<span class="tag tag-gray">已过期</span>
|
||
</div></div>
|
||
|
||
<h3 class="sec-sub">通知 Badge</h3>
|
||
<div class="card"><div class="demo-row">
|
||
<span class="badge-demo">🔔<span class="badge-dot">3</span></span>
|
||
<span style="font-size:13px;color:var(--text2);margin-left:12px">Header 通知红点 · 16px · #D54941</span>
|
||
</div></div>
|
||
|
||
<h3 class="sec-sub">侧边菜单</h3>
|
||
<div class="card" style="display:flex;gap:12px">
|
||
<div class="menu-row">
|
||
<div class="menu-title">业务管理</div>
|
||
<div class="menu-it">📊 工作台</div>
|
||
<div class="menu-it active">🛡️ 许可证管理</div>
|
||
<div class="menu-it">📨 Callback 收件箱</div>
|
||
<div class="menu-title">集成配置</div>
|
||
<div class="menu-it">🌐 集成环境</div>
|
||
</div>
|
||
<div class="card-title" style="font-size:12px;color:var(--text2)">
|
||
232px 宽 · 白底<br>
|
||
菜单高 42-50px<br>
|
||
选中: #F2F5FC 底<br>
|
||
右边框 3px #2C3E6B<br>
|
||
分组标签 11px<br>
|
||
底部版本号
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="sec-sub">面包屑</h3>
|
||
<div class="card"><div class="bc"><span>授权运营</span><span class="sep">›</span><span class="cur">许可证管理</span></div></div>
|
||
</section>
|
||
|
||
<!-- ===== DIALOG ===== -->
|
||
<section class="sec" id="dialog">
|
||
<h2 class="sec-title">🪟 弹框体系</h2>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px">
|
||
<div class="card"><div class="card-title">签发许可证 · 560px</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:8px;font-size:11px;color:var(--text2);line-height:1.8">
|
||
<b>布局:</b> 6表单字段 + 特性复选框<br>
|
||
<b>Footer:</b> 取消(左) + 签发(右)<br>
|
||
<b>圆角:</b> 8px · <b>内边距:</b> 20px<br>
|
||
<b>表单间距:</b> 16px
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">详情查看 · 480-520px</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:8px;font-size:11px;color:var(--text2);line-height:1.8">
|
||
<b>布局:</b> 标签(100px右对齐) + 值<br>
|
||
<b>Footer:</b> 关闭(+吊销按钮,红色)<br>
|
||
<b>许可证ID:</b> monospace 字体
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">新建/编辑 · 480px</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:8px;font-size:11px;color:var(--text2);line-height:1.8">
|
||
<b>布局:</b> 2-4表单字段<br>
|
||
<b>Footer:</b> 取消+保存
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">确认/吊销 · 420px</div>
|
||
<div style="background:#FEF0F0;border:1px solid #FBC4C4;border-radius:4px;padding:8px;font-size:11px;color:var(--bad);line-height:1.8">
|
||
<b>危险操作区分:</b><br>
|
||
红色背景提示区 #FEF0F0<br>
|
||
确认按钮: 红色 #F56C6C<br>
|
||
内容: 居中图标+说明
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== PAGES ===== -->
|
||
<section class="sec" id="pages">
|
||
<h2 class="sec-title">📄 页面模板</h2>
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px">
|
||
<div class="card"><div class="card-title">标准列表页</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
|
||
┌──────────────────────────┐<br>
|
||
│ [统计卡1][统计卡2][...] │<br>
|
||
├──────────────────────────┤<br>
|
||
│ [🔍搜索][▼下拉] [查询][+新建]│<br>
|
||
├──────────────────────────┤<br>
|
||
│ 表格: ID│名称│状态│操作 │<br>
|
||
│ ... │<br>
|
||
├──────────────────────────┤<br>
|
||
│ 共XX条 ‹1 2 3› │<br>
|
||
└──────────────────────────┘
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text3);margin-top:6px">客户管理 / 合同管理 / 交付管理 / 许可SN</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">Tree + 列表页</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
|
||
┌───────┬──────────────┐<br>
|
||
│ 🔍搜索 │ [统计卡...] │<br>
|
||
│ ▸ 项目A│ [筛选+签发] │<br>
|
||
│ ▸ 项目B│ 表格... │<br>
|
||
│ ▸ 项目C│ │<br>
|
||
└───────┴──────────────┘
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text3);margin-top:6px">许可证管理（280px Tree面板）</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">工作台 Dashboard</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
|
||
┌──────────────────────────┐<br>
|
||
│ [总许可证][活跃][待处理][...]│<br>
|
||
├───────────┬──────────────┤<br>
|
||
│ 📊 趋势图 │ ⚠️ 待办列表 │<br>
|
||
│ │ · 许可证到期 │<br>
|
||
│ │ · Callback │<br>
|
||
└───────────┴──────────────┘
|
||
</div>
|
||
</div>
|
||
<div class="card"><div class="card-title">详情页</div>
|
||
<div style="background:var(--s-bg);border-radius:4px;padding:10px;font-size:10px;color:var(--text2);line-height:2;font-family:monospace">
|
||
┌──────────────────────────┐<br>
|
||
│ 详情卡片 │<br>
|
||
│ 标签: 值 │<br>
|
||
│ 标签: 值 │<br>
|
||
│ ... │<br>
|
||
│ [编辑] [删除] │<br>
|
||
└──────────────────────────┘
|
||
</div>
|
||
<div style="font-size:11px;color:var(--text3);margin-top:6px">合同详情 / 交付详情 / SN详情</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer style="text-align:center;padding:20px;font-size:11px;color:var(--text3);border-top:1px solid var(--border);margin-top:24px">
|
||
CraftLabs Design System v1.0 · 2026-05-19 · 文档: docs/superpowers/specs/2026-05-19-design-system.md
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
document.querySelectorAll('.nav a').forEach(a=>{a.onclick=function(e){e.preventDefault();document.querySelectorAll('.nav a').forEach(x=>x.classList.remove('active'));this.classList.add('active');document.querySelector(this.getAttribute('href')).scrollIntoView({behavior:'smooth'})}});
|
||
</script>
|
||
</body>
|
||
</html>
|