3a16b3ecde
10 HTML pages + puro.css + HANDOFF.md + 2 images (~810KB total). Reference artifacts for Stage 3 Vue 3 translation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
671 lines
31 KiB
HTML
671 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="color-scheme" content="dark">
|
||
<title>Design System — PURO AI</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="puro.css">
|
||
<style>
|
||
/* page-local helpers */
|
||
.ds-header {
|
||
padding: 72px 0 48px;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 56px;
|
||
}
|
||
.ds-header h1 { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; }
|
||
.ds-header p { color: var(--text-2); max-width: 600px; line-height: 1.6; }
|
||
.ds-header .meta {
|
||
display: flex; gap: 18px; margin-top: 24px;
|
||
font-family: var(--font-mono); font-size: 12px; color: var(--text-3);
|
||
}
|
||
|
||
.ds-section { padding: 40px 0; border-bottom: 1px dashed var(--border); }
|
||
.ds-section:last-child { border-bottom: none; }
|
||
.ds-section > h2 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.ds-section > h2 .mono-num {
|
||
color: var(--cyan);
|
||
font-family: var(--font-mono);
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
font-weight: 500;
|
||
}
|
||
.ds-section > .desc {
|
||
color: var(--text-2);
|
||
font-size: 14px;
|
||
margin-bottom: 28px;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.ds-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
/* color swatches */
|
||
.swatch-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.sw {
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-md);
|
||
padding: 14px;
|
||
background: rgba(15, 23, 42, 0.4);
|
||
}
|
||
.sw .chip {
|
||
width: 100%;
|
||
height: 52px;
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid rgba(255,255,255,0.04);
|
||
margin-bottom: 10px;
|
||
padding: 0; background: transparent;
|
||
}
|
||
.sw .name { font-size: 12px; font-weight: 600; color: var(--text-0); }
|
||
.sw .hex { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-top: 2px; }
|
||
.sw .use { font-size: 11px; color: var(--text-3); margin-top: 4px; }
|
||
|
||
/* type scale */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 180px 1fr;
|
||
gap: 16px;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
align-items: baseline;
|
||
}
|
||
.type-row:last-child { border-bottom: none; }
|
||
.type-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
|
||
.type-meta b { color: var(--text-1); font-weight: 500; }
|
||
|
||
/* component examples */
|
||
.example {
|
||
background: rgba(2, 6, 23, 0.35);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-lg);
|
||
padding: 28px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.example.dense { padding: 20px; }
|
||
.example-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* spacing scale */
|
||
.space-row {
|
||
display: grid;
|
||
grid-template-columns: 90px 1fr 100px;
|
||
gap: 16px;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--text-2);
|
||
}
|
||
.space-row .bar { height: 10px; background: var(--cyan); border-radius: 2px; opacity: 0.7; }
|
||
.space-row .note { color: var(--text-3); text-align: right; }
|
||
|
||
/* radius scale */
|
||
.radius-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.radius-card {
|
||
padding: 24px;
|
||
background: rgba(15, 23, 42, 0.5);
|
||
border: 1px solid var(--border);
|
||
text-align: center;
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--text-2);
|
||
}
|
||
.radius-card .token { font-size: 11px; color: var(--text-3); margin-top: 4px; }
|
||
|
||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
|
||
|
||
/* logo lockup block */
|
||
.logo-showcase {
|
||
padding: 56px 32px;
|
||
background:
|
||
radial-gradient(600px 300px at 20% 0%, rgba(34,211,238,0.12), transparent 60%),
|
||
radial-gradient(600px 300px at 80% 100%, rgba(168,85,247,0.12), transparent 60%),
|
||
var(--bg-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--r-xl);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
}
|
||
.logo-showcase svg { width: 56px; height: 56px; color: var(--cyan); }
|
||
.logo-showcase .word {
|
||
font-size: 38px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
.logo-showcase .word span { color: var(--cyan); }
|
||
|
||
/* TOC */
|
||
.toc {
|
||
position: sticky;
|
||
top: 24px;
|
||
align-self: flex-start;
|
||
padding: 20px 0;
|
||
}
|
||
.toc .toc-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
.toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
|
||
.toc li { counter-increment: toc; }
|
||
.toc a {
|
||
display: block;
|
||
padding: 6px 10px;
|
||
border-radius: var(--r-sm);
|
||
color: var(--text-2);
|
||
font-size: 13px;
|
||
transition: all .12s;
|
||
}
|
||
.toc a::before {
|
||
content: counter(toc, decimal-leading-zero);
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
margin-right: 10px;
|
||
}
|
||
.toc a:hover { color: var(--text-0); background: rgba(255,255,255,0.02); }
|
||
|
||
.with-toc {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
gap: 48px;
|
||
align-items: start;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="bg-glow soft"></div>
|
||
<div class="grain"></div>
|
||
|
||
<nav class="nav">
|
||
<div class="container nav-inner">
|
||
<a class="brand" href="Landing.html">
|
||
<svg class="hex" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
||
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
||
</svg>
|
||
PURO AI
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="Landing.html">Landing</a>
|
||
<a href="#" class="active">Design System</a>
|
||
<a href="Dashboard.html">Dashboard</a>
|
||
<a href="Docs.html">文档</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a href="Login.html" class="btn btn-ghost">登录</a>
|
||
<a href="Register.html" class="btn btn-primary">注册</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container">
|
||
|
||
<!-- HEADER -->
|
||
<header class="ds-header">
|
||
<div class="section-kicker">// design system · v1.0</div>
|
||
<h1>PURO AI Design System</h1>
|
||
<p>一套用来构建 PURO AI 所有界面的原子 token 和组件。产品的视觉语言围绕「开发者工具 · 深色为主 · 青色作为行动色 · JetBrains Mono 强调技术感」展开。</p>
|
||
<div class="meta">
|
||
<span>tokens <b class="text-1">·</b> 29</span>
|
||
<span>components <b class="text-1">·</b> 22</span>
|
||
<span>last updated · 2026.04.19</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="with-toc">
|
||
<aside class="toc">
|
||
<div class="toc-label">Contents</div>
|
||
<ol>
|
||
<li><a href="#brand">Brand</a></li>
|
||
<li><a href="#colors">Colors</a></li>
|
||
<li><a href="#type">Typography</a></li>
|
||
<li><a href="#spacing">Spacing</a></li>
|
||
<li><a href="#radius">Radius</a></li>
|
||
<li><a href="#buttons">Buttons</a></li>
|
||
<li><a href="#badges">Badges</a></li>
|
||
<li><a href="#chips">Chips</a></li>
|
||
<li><a href="#forms">Forms</a></li>
|
||
<li><a href="#cards">Cards</a></li>
|
||
<li><a href="#tables">Tables</a></li>
|
||
<li><a href="#code">Code</a></li>
|
||
<li><a href="#nav">Nav</a></li>
|
||
</ol>
|
||
</aside>
|
||
|
||
<main>
|
||
|
||
<!-- BRAND -->
|
||
<section class="ds-section" id="brand">
|
||
<h2><span class="mono-num">01</span>Brand Lockup</h2>
|
||
<p class="desc">六边形 + 内部实心菱形 — 代表"订阅被聚合成一个 key"。单色在小尺寸下使用,大尺寸下保留内描边增加分量。</p>
|
||
<div class="logo-showcase">
|
||
<svg viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
||
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
||
</svg>
|
||
<div class="word">PURO<span>.</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COLORS -->
|
||
<section class="ds-section" id="colors">
|
||
<h2><span class="mono-num">02</span>Colors</h2>
|
||
<p class="desc">所有颜色都以 CSS variables 定义在 <code class="pill">puro.css</code>。青色 (cyan) 是唯一的品牌色,其他颜色仅承担语义职责(success / warn / danger)。</p>
|
||
|
||
<div class="ds-label">Surfaces</div>
|
||
<div class="swatch-grid">
|
||
<div class="sw"><div class="chip" style="background:#0a0e1a"></div><div class="name">bg-0</div><div class="hex">#0a0e1a</div><div class="use">page</div></div>
|
||
<div class="sw"><div class="chip" style="background:#0f172a"></div><div class="name">bg-1</div><div class="hex">#0f172a</div><div class="use">raised</div></div>
|
||
<div class="sw"><div class="chip" style="background:#111827"></div><div class="name">bg-2</div><div class="hex">#111827</div><div class="use">card alt</div></div>
|
||
<div class="sw"><div class="chip" style="background:#020617"></div><div class="name">bg-code</div><div class="hex">#020617</div><div class="use">code</div></div>
|
||
<div class="sw"><div class="chip" style="background:#1e293b"></div><div class="name">border</div><div class="hex">#1e293b</div><div class="use">hairline</div></div>
|
||
<div class="sw"><div class="chip" style="background:#334155"></div><div class="name">border-2</div><div class="hex">#334155</div><div class="use">strong</div></div>
|
||
</div>
|
||
|
||
<div class="ds-label" style="margin-top:32px">Text</div>
|
||
<div class="swatch-grid">
|
||
<div class="sw"><div class="chip" style="background:#f8fafc"></div><div class="name">text-0</div><div class="hex">#f8fafc</div><div class="use">primary</div></div>
|
||
<div class="sw"><div class="chip" style="background:#cbd5e1"></div><div class="name">text-1</div><div class="hex">#cbd5e1</div><div class="use">body</div></div>
|
||
<div class="sw"><div class="chip" style="background:#94a3b8"></div><div class="name">text-2</div><div class="hex">#94a3b8</div><div class="use">muted</div></div>
|
||
<div class="sw"><div class="chip" style="background:#64748b"></div><div class="name">text-3</div><div class="hex">#64748b</div><div class="use">hint</div></div>
|
||
</div>
|
||
|
||
<div class="ds-label" style="margin-top:32px">Accents</div>
|
||
<div class="swatch-grid">
|
||
<div class="sw"><div class="chip" style="background:#22d3ee"></div><div class="name">cyan</div><div class="hex">#22d3ee</div><div class="use">primary / cta</div></div>
|
||
<div class="sw"><div class="chip" style="background:#a855f7"></div><div class="name">purple</div><div class="hex">#a855f7</div><div class="use">secondary glow</div></div>
|
||
<div class="sw"><div class="chip" style="background:#fbbf24"></div><div class="name">amber</div><div class="hex">#fbbf24</div><div class="use">warn / featured</div></div>
|
||
<div class="sw"><div class="chip" style="background:#34d399"></div><div class="name">green</div><div class="hex">#34d399</div><div class="use">success / 200</div></div>
|
||
<div class="sw"><div class="chip" style="background:#f87171"></div><div class="name">red</div><div class="hex">#f87171</div><div class="use">error / 5xx</div></div>
|
||
<div class="sw"><div class="chip" style="background:#fb923c"></div><div class="name">orange</div><div class="hex">#fb923c</div><div class="use">flag / highlight</div></div>
|
||
</div>
|
||
|
||
<div class="ds-label" style="margin-top:32px">Provider Brand Dots</div>
|
||
<div class="swatch-grid">
|
||
<div class="sw"><div class="chip" style="background:#d97757"></div><div class="name">claude</div><div class="hex">#d97757</div><div class="use">Anthropic</div></div>
|
||
<div class="sw"><div class="chip" style="background:#10a37f"></div><div class="name">gpt</div><div class="hex">#10a37f</div><div class="use">OpenAI</div></div>
|
||
<div class="sw"><div class="chip" style="background:#4285f4"></div><div class="name">gemini</div><div class="hex">#4285f4</div><div class="use">Google</div></div>
|
||
<div class="sw"><div class="chip" style="background:#f0a030"></div><div class="name">codex</div><div class="hex">#f0a030</div><div class="use">Codex</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section class="ds-section" id="type">
|
||
<h2><span class="mono-num">03</span>Typography</h2>
|
||
<p class="desc">主字体 <b>Inter</b> · 等宽 <b>JetBrains Mono</b>。等宽仅用于代码、数据、时间戳、状态徽标,以强化开发者语境。</p>
|
||
|
||
<div class="type-row">
|
||
<div class="type-meta">display · 56/64 · 800</div>
|
||
<div style="font-size:56px; font-weight:800; letter-spacing:-0.03em; line-height:1.05;">你的 AI 订阅</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">h1 · 40/48 · 700</div>
|
||
<div style="font-size:40px; font-weight:700; letter-spacing:-0.02em;">统一接入 API</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">h2 · 28/36 · 700</div>
|
||
<div style="font-size:28px; font-weight:700; letter-spacing:-0.02em;">付一次,用一池</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">h3 · 18/26 · 600</div>
|
||
<div style="font-size:18px; font-weight:600;">多账号自动调度</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">body · 14/22 · 400</div>
|
||
<div style="font-size:14px;">OAuth 绑定账号,零改动切换 base_url,沿用你习惯的 SDK。</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">caption · 12/18 · 400</div>
|
||
<div style="font-size:12px; color:var(--text-2);">某个 ChatGPT Plus 触发限流会自动 failover。</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">mono · 13 · 500</div>
|
||
<div class="mono" style="font-size:13px; color:var(--cyan);">curl https://ai.puro.im/v1/chat/completions</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="type-meta">kicker · mono · 12 · caps</div>
|
||
<div class="section-kicker" style="margin:0">// section kicker</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SPACING -->
|
||
<section class="ds-section" id="spacing">
|
||
<h2><span class="mono-num">04</span>Spacing Scale</h2>
|
||
<p class="desc">4px 基线的 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 scale。页面垂直节奏用 32/48/64/96,卡片内部用 16/20/24。</p>
|
||
<div>
|
||
<div class="space-row"><span>4px</span><div class="bar" style="width:4px"></div><span class="note">gap-xs · pill 间隔</span></div>
|
||
<div class="space-row"><span>8px</span><div class="bar" style="width:8px"></div><span class="note">gap-sm · icon 内外距</span></div>
|
||
<div class="space-row"><span>12px</span><div class="bar" style="width:12px"></div><span class="note">gap · 卡片网格</span></div>
|
||
<div class="space-row"><span>16px</span><div class="bar" style="width:16px"></div><span class="note">stack-sm · 主要网格</span></div>
|
||
<div class="space-row"><span>20px</span><div class="bar" style="width:20px"></div><span class="note">form field</span></div>
|
||
<div class="space-row"><span>24px</span><div class="bar" style="width:24px"></div><span class="note">card padding</span></div>
|
||
<div class="space-row"><span>32px</span><div class="bar" style="width:32px"></div><span class="note">content padding</span></div>
|
||
<div class="space-row"><span>48px</span><div class="bar" style="width:48px"></div><span class="note">section break</span></div>
|
||
<div class="space-row"><span>64px</span><div class="bar" style="width:64px"></div><span class="note">section head gap</span></div>
|
||
<div class="space-row"><span>96px</span><div class="bar" style="width:96px"></div><span class="note">landing section</span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- RADIUS -->
|
||
<section class="ds-section" id="radius">
|
||
<h2><span class="mono-num">05</span>Radius & Shadow</h2>
|
||
<div class="radius-grid">
|
||
<div class="radius-card" style="border-radius:6px">6px<div class="token">--r-sm</div></div>
|
||
<div class="radius-card" style="border-radius:8px">8px<div class="token">--r-md (button, input)</div></div>
|
||
<div class="radius-card" style="border-radius:12px">12px<div class="token">--r-lg (card)</div></div>
|
||
<div class="radius-card" style="border-radius:16px">16px<div class="token">--r-xl (hero card)</div></div>
|
||
</div>
|
||
<div class="ds-label" style="margin-top:28px">Elevation</div>
|
||
<div class="two-col">
|
||
<div class="card-raised" style="padding:24px; box-shadow:var(--shadow-lg);">
|
||
<div class="mono text-xs text-3">--shadow-lg</div>
|
||
<div class="text-sm text-1" style="margin-top:8px">卡片悬浮 · 代码面板</div>
|
||
</div>
|
||
<div class="card-raised" style="padding:24px; box-shadow:var(--shadow-xl);">
|
||
<div class="mono text-xs text-3">--shadow-xl</div>
|
||
<div class="text-sm text-1" style="margin-top:8px">仪表盘大图 · 对话框</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BUTTONS -->
|
||
<section class="ds-section" id="buttons">
|
||
<h2><span class="mono-num">06</span>Buttons</h2>
|
||
<p class="desc">唯一的主色按钮 Primary(青色),其余都是 Ghost/Subtle。没有多种 primary —— 让每个页面最重要的那个 CTA 足够显眼。</p>
|
||
|
||
<div class="ds-label">Variants</div>
|
||
<div class="example">
|
||
<div class="example-row">
|
||
<button class="btn btn-primary">立即开始 →</button>
|
||
<button class="btn btn-ghost">查看文档</button>
|
||
<button class="btn btn-subtle">跳过</button>
|
||
<button class="btn btn-danger">解绑账号</button>
|
||
<button class="btn btn-primary" disabled>禁用</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ds-label" style="margin-top:20px">Sizes</div>
|
||
<div class="example">
|
||
<div class="example-row">
|
||
<button class="btn btn-primary btn-lg">btn-lg · 注册</button>
|
||
<button class="btn btn-primary">btn · 默认</button>
|
||
<button class="btn btn-primary btn-sm">btn-sm · 复制</button>
|
||
<button class="btn btn-ghost btn-icon" aria-label="设置">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ds-label" style="margin-top:20px">Loading</div>
|
||
<div class="example">
|
||
<div class="example-row">
|
||
<button class="btn btn-primary loading"><span class="spinner"></span><span class="label">提交中</span></button>
|
||
<button class="btn btn-ghost loading"><span class="spinner" style="border-top-color:var(--text-0)"></span><span class="label">加载</span></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BADGES -->
|
||
<section class="ds-section" id="badges">
|
||
<h2><span class="mono-num">07</span>Badges</h2>
|
||
<div class="example">
|
||
<div class="example-row">
|
||
<span class="badge">NEW</span>
|
||
<span class="badge purple">BETA</span>
|
||
<span class="badge amber">LIMITED</span>
|
||
<span class="badge green">ACTIVE</span>
|
||
<span class="badge red">EXPIRED</span>
|
||
<span class="badge muted">DRAFT</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CHIPS -->
|
||
<section class="ds-section" id="chips">
|
||
<h2><span class="mono-num">08</span>Chips & Status</h2>
|
||
<p class="desc">chip 用于在代码块周围承载"路由/参数/标签"信息,status-chip 是一个绝对定位的单像素点,用于显示账号/节点在线状态。</p>
|
||
<div class="example">
|
||
<div class="example-row">
|
||
<span class="chip claude"><span class="dot"></span>claude-pool-03</span>
|
||
<span class="chip gpt"><span class="dot"></span>gpt-plus-7</span>
|
||
<span class="chip gemini"><span class="dot"></span>gemini-2</span>
|
||
<span class="chip codex"><span class="dot"></span>codex-pool-01</span>
|
||
<span class="chip"><span class="dot"></span>200 · 213ms</span>
|
||
</div>
|
||
<div class="example-row" style="margin-top:16px">
|
||
<span class="pill">OpenAI SDK</span>
|
||
<span class="pill">Anthropic SDK</span>
|
||
<span class="pill">/v1/chat/completions</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FORMS -->
|
||
<section class="ds-section" id="forms">
|
||
<h2><span class="mono-num">09</span>Form Fields</h2>
|
||
<div class="example">
|
||
<div class="two-col" style="gap:24px">
|
||
<div class="field">
|
||
<label class="field-label">邮箱</label>
|
||
<div class="input-wrap">
|
||
<span class="icon">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
|
||
</span>
|
||
<input class="input with-icon" type="email" placeholder="you@puro.im">
|
||
</div>
|
||
<div class="field-hint">默认 · 空态</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">API Key 名称</label>
|
||
<input class="input ok" type="text" value="production">
|
||
<div class="field-hint" style="color:var(--green)">✓ 可用</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">密码</label>
|
||
<input class="input error" type="password" value="12345">
|
||
<div class="field-error">密码至少 8 位,包含数字和字母</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">平台</label>
|
||
<select class="input">
|
||
<option>Claude Pro / Max</option>
|
||
<option>ChatGPT Plus / Pro</option>
|
||
<option>Gemini Advanced</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:18px; display:flex; gap:16px;">
|
||
<label class="check"><input type="checkbox" checked><span class="box"></span>接受服务协议</label>
|
||
<label class="check"><input type="checkbox"><span class="box"></span>订阅更新邮件</label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CARDS -->
|
||
<section class="ds-section" id="cards">
|
||
<h2><span class="mono-num">10</span>Cards</h2>
|
||
<div class="three-col">
|
||
<div class="card">
|
||
<div class="section-kicker" style="margin-bottom:8px">// default</div>
|
||
<div class="text-lg fw-600" style="margin-bottom:6px">标准卡片</div>
|
||
<div class="text-sm text-2">用于所有常规内容容器,12px 圆角 + 1px border。</div>
|
||
</div>
|
||
<div class="card card-interactive">
|
||
<div class="section-kicker" style="margin-bottom:8px">// hover</div>
|
||
<div class="text-lg fw-600" style="margin-bottom:6px">可交互卡片</div>
|
||
<div class="text-sm text-2">hover 时向上位移 2px,border 加深。</div>
|
||
</div>
|
||
<div class="card-raised" style="padding:24px">
|
||
<div class="section-kicker" style="margin-bottom:8px">// raised</div>
|
||
<div class="text-lg fw-600" style="margin-bottom:6px">Raised 卡片</div>
|
||
<div class="text-sm text-2">不透明背景,用于浮层/仪表盘主体。</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TABLES -->
|
||
<section class="ds-section" id="tables">
|
||
<h2><span class="mono-num">11</span>Tables</h2>
|
||
<p class="desc">主要用于请求日志、API Key 列表、计费记录。数字列一律等宽 tabular-nums。</p>
|
||
<div class="card" style="padding:0; overflow:hidden;">
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr>
|
||
<th class="mono">TIME</th>
|
||
<th>ACCOUNT</th>
|
||
<th class="mono">MODEL</th>
|
||
<th class="mono">TOKENS</th>
|
||
<th class="mono">COST</th>
|
||
<th class="mono">STATUS</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="mono">13:42:18</td>
|
||
<td><span class="provider claude"><span class="dot"></span>claude-3</span></td>
|
||
<td class="mono">sonnet-4-5</td>
|
||
<td class="mono tabular">2,847</td>
|
||
<td class="mono tabular">$0.042</td>
|
||
<td class="mono text-green">200</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">13:42:11</td>
|
||
<td><span class="provider gpt"><span class="dot"></span>gpt-plus-7</span></td>
|
||
<td class="mono">gpt-5-codex</td>
|
||
<td class="mono tabular">1,204</td>
|
||
<td class="mono tabular">$0.018</td>
|
||
<td class="mono text-green">200</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="mono">13:42:03</td>
|
||
<td><span class="provider gemini"><span class="dot"></span>gemini-2</span></td>
|
||
<td class="mono">gemini-2.5-pro</td>
|
||
<td class="mono tabular">4,102</td>
|
||
<td class="mono tabular">$0.000</td>
|
||
<td class="mono text-amber">429</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CODE -->
|
||
<section class="ds-section" id="code">
|
||
<h2><span class="mono-num">12</span>Code Frame</h2>
|
||
<div class="code-frame">
|
||
<div class="code-head">
|
||
<div class="traffic"><span></span><span></span><span></span></div>
|
||
<span class="mono text-xs text-3">zsh · puro ≈ 210ms</span>
|
||
</div>
|
||
<pre class="code-body"><div class="line"><span class="ln">1</span><span><span class="com"># OpenAI SDK · 零改动</span></span></div><div class="line"><span class="ln">2</span><span><span class="kw">from</span> openai <span class="kw">import</span> OpenAI</span></div><div class="line"><span class="ln">3</span><span> </span></div><div class="line"><span class="ln">4</span><span>client = <span class="fn">OpenAI</span>(</span></div><div class="line"><span class="ln">5</span><span> <span class="prop">base_url</span>=<span class="str">"https://ai.puro.im/v1"</span>,</span></div><div class="line"><span class="ln">6</span><span> <span class="prop">api_key</span>=<span class="str">"sk-puro-••••"</span>,</span></div><div class="line"><span class="ln">7</span><span>)</span></div></pre>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- NAV -->
|
||
<section class="ds-section" id="nav">
|
||
<h2><span class="mono-num">13</span>Navigation</h2>
|
||
<p class="desc">顶部导航 <code class="pill">.nav</code> 用于 marketing 页面,<code class="pill">.app-shell</code> 带侧边栏用于登录后的应用页面。</p>
|
||
<div class="ds-label">Top Nav (Marketing)</div>
|
||
<div class="example dense" style="padding:0">
|
||
<nav style="position:relative;">
|
||
<div class="container nav-inner" style="padding: 0 24px;">
|
||
<span class="brand">
|
||
<svg class="hex" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
||
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
||
</svg>
|
||
PURO AI
|
||
</span>
|
||
<div class="nav-links">
|
||
<a href="#" class="active">产品</a>
|
||
<a href="#">定价</a>
|
||
<a href="#">文档</a>
|
||
<a href="#" class="disabled">Changelog</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a class="btn btn-ghost">登录</a>
|
||
<a class="btn btn-primary">开始使用</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="ds-label" style="margin-top:24px">Side Nav (App)</div>
|
||
<div class="example dense" style="padding:0; overflow:hidden;">
|
||
<div style="display:grid; grid-template-columns:240px 1fr; min-height:280px;">
|
||
<div style="border-right:1px solid var(--border); padding:18px 14px; background:rgba(2,6,23,0.6);">
|
||
<div class="brand" style="padding:6px 10px 18px">
|
||
<svg class="hex" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
||
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
||
</svg>
|
||
PURO
|
||
</div>
|
||
<div class="side-group">
|
||
<div class="side-label">Workspace</div>
|
||
<div class="side-item active"><span class="ico">◆</span>Dashboard</div>
|
||
<div class="side-item"><span class="ico">⌘</span>API Keys<span class="count">3</span></div>
|
||
<div class="side-item"><span class="ico">⊡</span>订阅账号<span class="count">7</span></div>
|
||
<div class="side-item"><span class="ico">▤</span>调用日志</div>
|
||
<div class="side-item"><span class="ico">Ⅹ</span>账单</div>
|
||
</div>
|
||
<div class="side-group" style="margin-top:20px">
|
||
<div class="side-label">Settings</div>
|
||
<div class="side-item"><span class="ico">☰</span>账户</div>
|
||
<div class="side-item"><span class="ico">❖</span>团队</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:24px; display:flex; align-items:center; justify-content:center; color:var(--text-3);">
|
||
<div class="text-sm mono">app content →</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<footer style="margin-top:80px; padding:40px 0; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:12px; color:var(--text-3); display:flex; justify-content:space-between;">
|
||
<span>PURO AI · Design System v1.0</span>
|
||
<span>© 2026 · built with puro.css</span>
|
||
</footer>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|