From 1d7e75b82e816da632749074ae8751efadad5900 Mon Sep 17 00:00:00 2001 From: mini Date: Sun, 19 Apr 2026 19:11:24 +0800 Subject: [PATCH] feat(design): scaffold PURO AI design system - Add puro.css (tokens + primitives) as global stylesheet - Load Inter + JetBrains Mono via Google Fonts - Extend tailwind.config with puro.* color namespace (no conflict with legacy primary/accent palettes) Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/index.html | 3 + frontend/src/assets/puro.css | 726 +++++++++++++++++++++++++++++++++++ frontend/src/main.ts | 1 + frontend/tailwind.config.js | 14 + 4 files changed, 744 insertions(+) create mode 100644 frontend/src/assets/puro.css diff --git a/frontend/index.html b/frontend/index.html index 3180a5fb..c198afdc 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,6 +4,9 @@ + + + Sub2API - AI API Gateway diff --git a/frontend/src/assets/puro.css b/frontend/src/assets/puro.css new file mode 100644 index 00000000..96c11980 --- /dev/null +++ b/frontend/src/assets/puro.css @@ -0,0 +1,726 @@ +/* ========================================================================== + PURO AI — Design System + Shared tokens + primitive styles used across every page. + -------------------------------------------------------------------------- + Usage: + ========================================================================== */ + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + /* Surfaces */ + --bg-0: #0a0e1a; /* page */ + --bg-1: #0f172a; /* raised */ + --bg-2: #111827; /* card alt */ + --bg-code: #020617; /* code canvas */ + + /* Borders */ + --border: #1e293b; + --border-2: #334155; + --border-3: #475569; + + /* Text */ + --text-0: #f8fafc; /* primary */ + --text-1: #cbd5e1; /* body */ + --text-2: #94a3b8; /* muted */ + --text-3: #64748b; /* hint */ + + /* Accents */ + --cyan: #22d3ee; + --cyan-2: #67e8f9; + --cyan-dim: #0891b2; + --purple: #a855f7; + --amber: #fbbf24; + --green: #34d399; + --red: #f87171; + --orange: #fb923c; + + /* Provider brand dots */ + --p-claude: #d97757; + --p-gpt: #10a37f; + --p-gemini: #4285f4; + --p-codex: #f0a030; + + /* Radius */ + --r-sm: 6px; + --r-md: 8px; + --r-lg: 12px; + --r-xl: 16px; + + /* Shadow */ + --shadow-lg: 0 30px 60px -30px rgba(0,0,0,0.6); + --shadow-xl: 0 40px 80px -40px rgba(0,0,0,0.8); + + /* Typography */ + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; +} + +html, body { + background: var(--bg-0); + color: var(--text-0); + font-family: var(--font-sans); + font-feature-settings: "cv11", "ss01", "ss03"; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + line-height: 1.5; +} + +body { overflow-x: hidden; } + +a { color: inherit; text-decoration: none; } +button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } + +/* scrollbar — subtle */ +::-webkit-scrollbar { width: 10px; height: 10px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; } +::-webkit-scrollbar-thumb:hover { background: var(--border-3); } + +.mono { font-family: var(--font-mono); } + +/* ========================================================================== + BACKGROUND EFFECTS + ========================================================================== */ +.bg-glow { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + overflow: hidden; +} +.bg-glow::before, +.bg-glow::after { + content: ""; + position: absolute; + width: 900px; + height: 900px; + border-radius: 50%; + filter: blur(120px); + opacity: 0.35; +} +.bg-glow::before { + background: radial-gradient(circle, #22d3ee 0%, transparent 60%); + top: -300px; + left: -200px; +} +.bg-glow::after { + background: radial-gradient(circle, #a855f7 0%, transparent 60%); + top: 200px; + right: -300px; + opacity: 0.25; +} +.bg-glow.soft::before, .bg-glow.soft::after { opacity: 0.15; } + +.grain { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 1; + opacity: 0.4; + mix-blend-mode: overlay; + background-image: url("data:image/svg+xml;utf8,"); +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 32px; + position: relative; + z-index: 2; +} +.container-wide { max-width: 1280px; } +.container-narrow { max-width: 860px; } + +/* ========================================================================== + NAV + ========================================================================== */ +.nav { + position: sticky; + top: 0; + z-index: 50; + backdrop-filter: blur(16px); + background: rgba(10, 14, 26, 0.72); + border-bottom: 1px solid var(--border); +} +.nav-inner { + display: flex; + align-items: center; + height: 64px; + gap: 48px; +} +.brand { + display: flex; + align-items: center; + gap: 10px; + font-weight: 700; + font-size: 15px; + letter-spacing: 0.02em; +} +.hex { + width: 22px; + height: 22px; + color: var(--cyan); +} +.nav-links { + display: flex; + gap: 28px; + font-size: 14px; + color: var(--text-2); +} +.nav-links a { transition: color .15s; } +.nav-links a:hover, .nav-links a.active { color: var(--text-0); } +.nav-links .disabled { color: var(--text-3); cursor: not-allowed; display: inline-flex; align-items: center; gap: 6px; } +.nav-links .disabled::after { + content: "即将推出"; + font-size: 10px; + padding: 2px 6px; + border: 1px solid var(--border-2); + border-radius: 4px; + color: var(--text-3); +} +.nav-cta { + margin-left: auto; + display: flex; + gap: 10px; + align-items: center; +} + +/* ========================================================================== + BUTTONS + ========================================================================== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + padding: 8px 14px; + font-size: 13px; + font-weight: 500; + border-radius: var(--r-md); + transition: all .15s; + white-space: nowrap; + border: 1px solid transparent; +} +.btn-primary { + background: var(--cyan); + color: #042f2e; + font-weight: 600; +} +.btn-primary:hover { background: var(--cyan-2); } +.btn-primary:active { transform: translateY(1px); } +.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } + +.btn-ghost { + border-color: var(--border-2); + color: var(--text-1); +} +.btn-ghost:hover { border-color: var(--border-3); color: var(--text-0); background: rgba(255,255,255,0.02); } + +.btn-subtle { + background: rgba(255,255,255,0.04); + color: var(--text-1); + border-color: transparent; +} +.btn-subtle:hover { background: rgba(255,255,255,0.08); color: var(--text-0); } + +.btn-danger { + background: rgba(248, 113, 113, 0.1); + color: var(--red); + border-color: rgba(248, 113, 113, 0.25); +} +.btn-danger:hover { background: rgba(248, 113, 113, 0.15); border-color: rgba(248, 113, 113, 0.4); } + +.btn-lg { padding: 12px 20px; font-size: 14px; } +.btn-sm { padding: 5px 10px; font-size: 12px; } +.btn-icon { padding: 7px; aspect-ratio: 1; } + +.btn .spinner { + width: 14px; height: 14px; + border: 2px solid rgba(0,0,0,0.2); + border-top-color: currentColor; + border-radius: 50%; + animation: spin .7s linear infinite; + display: none; +} +.btn.loading .spinner { display: inline-block; } +.btn.loading .label { opacity: 0.5; } +@keyframes spin { to { transform: rotate(360deg); } } + +/* ========================================================================== + BADGES / PILLS / CHIPS + ========================================================================== */ +.badge { + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 8px; + border-radius: 100px; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.02em; + background: rgba(34, 211, 238, 0.1); + color: var(--cyan); +} +.badge.amber { background: rgba(251, 191, 36, 0.12); color: var(--amber); } +.badge.purple { background: rgba(168, 85, 247, 0.12); color: var(--purple); } +.badge.green { background: rgba(52, 211, 153, 0.12); color: var(--green); } +.badge.red { background: rgba(248, 113, 113, 0.12); color: var(--red); } +.badge.muted { background: rgba(255, 255, 255, 0.04); color: var(--text-2); border: 1px solid var(--border); } + +.pill { + display: inline-block; + padding: 2px 8px; + border-radius: var(--r-sm); + background: rgba(255,255,255,0.04); + border: 1px solid var(--border); + font-family: var(--font-mono); + font-size: 12px; + color: var(--text-0); +} + +.chip { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 100px; + background: rgba(15, 23, 42, 0.6); + border: 1px solid var(--border); + font-size: 12px; + color: var(--text-1); + font-family: var(--font-mono); +} +.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } +.chip.claude .dot { background: var(--p-claude); } +.chip.gpt .dot { background: var(--p-gpt); } +.chip.gemini .dot { background: var(--p-gemini); } +.chip.codex .dot { background: var(--p-codex); } + +.dot-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); display: inline-block; } + +/* status chip (tiny dot absolute-positioned) */ +.status-chip { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--green); + box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); + display: inline-block; +} +.status-chip.dim { background: var(--text-3); box-shadow: none; } +.status-chip.amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15); } +.status-chip.red { background: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15); } + +/* ========================================================================== + CARDS / SURFACES + ========================================================================== */ +.card { + background: rgba(15, 23, 42, 0.6); + border: 1px solid var(--border); + border-radius: var(--r-lg); + padding: 24px; +} +.card-raised { + background: var(--bg-1); + border: 1px solid var(--border); + border-radius: var(--r-lg); +} +.card-interactive { + transition: all .2s; + cursor: pointer; +} +.card-interactive:hover { + border-color: var(--border-2); + background: rgba(15, 23, 42, 0.85); + transform: translateY(-2px); +} + +.divider { height: 1px; background: var(--border); margin: 24px 0; border: 0; } +.divider-dashed { border: 0; border-top: 1px dashed var(--border); margin: 20px 0; } + +/* ========================================================================== + FORMS + ========================================================================== */ +.field { margin-bottom: 18px; } +.field-label { + display: block; + font-size: 12px; + font-weight: 500; + color: var(--text-1); + margin-bottom: 8px; +} +.field-hint { + font-size: 12px; + color: var(--text-3); + margin-top: 6px; +} +.field-error { + font-size: 12px; + color: var(--red); + margin-top: 6px; +} + +.input-wrap { position: relative; } +.input-wrap .icon { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + color: var(--text-3); + pointer-events: none; + display: inline-flex; +} +.input { + width: 100%; + height: 42px; + padding: 0 14px; + background: rgba(15, 23, 42, 0.6); + border: 1px solid var(--border-2); + border-radius: var(--r-md); + color: var(--text-0); + font-size: 14px; + font-family: inherit; + outline: none; + transition: all .15s; +} +.input.with-icon { padding-left: 40px; } +.input::placeholder { color: var(--text-3); } +.input:hover { border-color: var(--border-3); } +.input:focus { + border-color: var(--cyan); + box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12); + background: rgba(15, 23, 42, 0.9); +} +.input.ok { border-color: rgba(52, 211, 153, 0.4); } +.input.ok:focus { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12); } +.input.error { border-color: var(--red); } +.input.error:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12); } + +textarea.input { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; } + +select.input { + appearance: none; + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: right 14px center; + padding-right: 36px; +} + +/* checkbox */ +.check { + display: inline-flex; + align-items: center; + gap: 10px; + cursor: pointer; + user-select: none; + font-size: 13px; + color: var(--text-1); +} +.check input { display: none; } +.check .box { + width: 16px; height: 16px; + border: 1px solid var(--border-2); + border-radius: 4px; + background: var(--bg-1); + display: inline-flex; + align-items: center; + justify-content: center; + transition: all .15s; + flex-shrink: 0; +} +.check input:checked + .box { + background: var(--cyan); + border-color: var(--cyan); +} +.check input:checked + .box::after { + content: "✓"; + color: #042f2e; + font-size: 11px; + font-weight: 700; +} + +/* ========================================================================== + SECTION HEADINGS + ========================================================================== */ +.section-kicker { + font-family: var(--font-mono); + font-size: 12px; + color: var(--cyan); + letter-spacing: 0.15em; + text-transform: uppercase; + margin-bottom: 12px; +} +.section-title { + font-size: clamp(28px, 3.5vw, 40px); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.15; + margin-bottom: 16px; +} +.section-sub { + color: var(--text-2); + font-size: 16px; + line-height: 1.6; +} + +/* ========================================================================== + TABLES + ========================================================================== */ +.tbl { + width: 100%; + font-size: 13px; + border-collapse: collapse; +} +.tbl th { + text-align: left; + color: var(--text-3); + font-weight: 500; + padding: 12px 14px; + border-bottom: 1px solid var(--border); + text-transform: uppercase; + font-size: 10px; + letter-spacing: 0.1em; +} +.tbl td { + padding: 14px; + border-bottom: 1px solid rgba(30, 41, 59, 0.5); + color: var(--text-1); +} +.tbl tr:last-child td { border-bottom: none; } +.tbl tr:hover td { background: rgba(15, 23, 42, 0.4); } +.tbl td.mono, .tbl th.mono { font-family: var(--font-mono); } + +/* ========================================================================== + CODE BLOCKS + ========================================================================== */ +.code-frame { + background: var(--bg-code); + border: 1px solid var(--border); + border-radius: var(--r-lg); + overflow: hidden; + box-shadow: var(--shadow-lg); +} +.code-head { + display: flex; + align-items: center; + height: 40px; + padding: 0 16px; + border-bottom: 1px solid var(--border); + background: rgba(15, 23, 42, 0.8); + gap: 10px; +} +.traffic { + display: flex; + gap: 6px; +} +.traffic span { + width: 10px; + height: 10px; + border-radius: 50%; + background: #475569; +} +.code-body { + padding: 22px 26px; + font-family: var(--font-mono); + font-size: 13px; + line-height: 1.75; + color: var(--text-1); + overflow-x: auto; +} +.code-body .line { display: flex; gap: 20px; } +.ln { color: var(--text-3); user-select: none; min-width: 16px; text-align: right; opacity: 0.5; } + +/* syntax */ +.kw { color: #c084fc; } +.str { color: #86efac; } +.num { color: #fbbf24; } +.com { color: #64748b; font-style: italic; } +.fn { color: #22d3ee; } +.prop{ color: #f0abfc; } +.var-v { color: #f8fafc; } +.flag{ color: #fb923c; } +.bash-prompt { color: var(--cyan); user-select: none; } + +/* ========================================================================== + PROVIDER-BRAND HELPERS + ========================================================================== */ +.provider { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: var(--font-mono); + font-size: 12px; +} +.provider .dot { width: 6px; height: 6px; border-radius: 50%; } +.provider.claude .dot { background: var(--p-claude); } +.provider.gpt .dot { background: var(--p-gpt); } +.provider.gemini .dot { background: var(--p-gemini); } +.provider.codex .dot { background: var(--p-codex); } + +/* ========================================================================== + UTILITIES + ========================================================================== */ +.stack-xs { display: flex; flex-direction: column; gap: 8px; } +.stack-sm { display: flex; flex-direction: column; gap: 12px; } +.stack-md { display: flex; flex-direction: column; gap: 20px; } +.stack-lg { display: flex; flex-direction: column; gap: 32px; } + +.row { display: flex; align-items: center; gap: 12px; } +.row-sm { gap: 8px; } +.row-lg { gap: 20px; } +.row-between { justify-content: space-between; } +.row-center { justify-content: center; } +.row-wrap { flex-wrap: wrap; } + +.flex-1 { flex: 1; } +.ml-auto { margin-left: auto; } +.mt-auto { margin-top: auto; } + +.text-0 { color: var(--text-0); } +.text-1 { color: var(--text-1); } +.text-2 { color: var(--text-2); } +.text-3 { color: var(--text-3); } +.text-cyan { color: var(--cyan); } +.text-purple { color: var(--purple); } +.text-amber { color: var(--amber); } +.text-green { color: var(--green); } +.text-red { color: var(--red); } + +.text-xs { font-size: 11px; } +.text-sm { font-size: 13px; } +.text-md { font-size: 14px; } +.text-lg { font-size: 16px; } +.text-xl { font-size: 20px; } +.text-2xl { font-size: 28px; } +.text-3xl { font-size: 36px; } + +.fw-400 { font-weight: 400; } +.fw-500 { font-weight: 500; } +.fw-600 { font-weight: 600; } +.fw-700 { font-weight: 700; } +.fw-800 { font-weight: 800; } + +.tabular { font-variant-numeric: tabular-nums; } +.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + +/* ========================================================================== + APP SHELL (for dashboard-style pages) + ========================================================================== */ +.app-shell { + display: grid; + grid-template-columns: 240px 1fr; + min-height: 100vh; + position: relative; + z-index: 2; +} +.app-side { + border-right: 1px solid var(--border); + background: rgba(2, 6, 23, 0.6); + padding: 20px 14px; + display: flex; + flex-direction: column; + gap: 28px; + position: sticky; + top: 0; + height: 100vh; + overflow-y: auto; +} +.app-side .brand { padding: 6px 10px 14px; } +.side-group { display: flex; flex-direction: column; gap: 2px; } +.side-label { + font-size: 10px; + color: var(--text-3); + text-transform: uppercase; + letter-spacing: 0.12em; + padding: 0 10px 8px; + font-family: var(--font-mono); +} +.side-item { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 10px; + border-radius: var(--r-sm); + font-size: 13px; + color: var(--text-2); + cursor: pointer; + transition: all .12s; +} +.side-item:hover { color: var(--text-0); background: rgba(255,255,255,0.03); } +.side-item.active { background: rgba(34, 211, 238, 0.08); color: var(--cyan); } +.side-item .ico { + width: 16px; height: 16px; opacity: 0.8; + display: inline-flex; align-items: center; justify-content: center; + flex-shrink: 0; +} +.side-item .count { + margin-left: auto; + font-size: 11px; + color: var(--text-3); + font-family: var(--font-mono); +} +.side-item.active .count { color: var(--cyan); } + +.app-main { + min-width: 0; /* allow grid children to shrink */ + display: flex; + flex-direction: column; +} +.app-topbar { + height: 60px; + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + padding: 0 32px; + gap: 16px; + position: sticky; + top: 0; + z-index: 10; + background: rgba(10, 14, 26, 0.75); + backdrop-filter: blur(12px); +} +.app-topbar h1 { + font-size: 18px; + font-weight: 600; + letter-spacing: -0.01em; +} +.app-content { + padding: 32px; + flex: 1; +} + +/* user avatar pill */ +.avatar { + width: 28px; height: 28px; + border-radius: 50%; + background: linear-gradient(135deg, #22d3ee, #a855f7); + display: inline-flex; + align-items: center; + justify-content: center; + color: #042f2e; + font-weight: 700; + font-size: 12px; + flex-shrink: 0; +} + +/* ========================================================================== + KBD + ========================================================================== */ +kbd { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 20px; + height: 20px; + padding: 0 6px; + font-family: var(--font-mono); + font-size: 11px; + font-weight: 500; + color: var(--text-1); + background: var(--bg-1); + border: 1px solid var(--border-2); + border-bottom-width: 2px; + border-radius: 4px; + line-height: 1; +} diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 68ace885..aa94e14b 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -5,6 +5,7 @@ import router from './router' import i18n, { initI18n } from './i18n' import { useAppStore } from '@/stores/app' import './style.css' +import './assets/puro.css' function initThemeClass() { const savedTheme = localStorage.getItem('theme') diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 70e3a7ed..ea4c2bc5 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -46,6 +46,20 @@ export default { 800: '#1e293b', 900: '#0f172a', 950: '#020617' + }, + // PURO AI 设计系统色板（给新页面 Landing/Auth/Docs 用，不影响 admin） + puro: { + cyan: '#22d3ee', + 'cyan-2': '#67e8f9', + purple: '#a855f7', + amber: '#fbbf24', + green: '#34d399', + red: '#f87171', + // 平台品牌点色 + claude: '#d97757', + gpt: '#10a37f', + gemini: '#4285f4', + codex: '#f0a030' } }, fontFamily: {