style(portal): add design system + shared layer (portal.css/portal.js/admin-common.css shim)
- portal.css: 777-line real design system (Linear/Vercel 信息建筑派)
* tokens: spacing 4/8/12/16/24/32/48, type 12/13/14/15/17/20/24/32/44
* colors: ink/paper/accent/success/warn/danger × 50/100/500/900
* teal #14b8a6 1:1 aligned with host sub2api Vue/Tailwind
* dark-first; light override for public portal
* components: page-hero, stat-card, card, status, pill, btn-primary,
toast-host, empty, skeleton, drawer, tabs
- portal.js: window.Sub2ApiPortal — toast, lucide 1.75px stroke SVG
icon registry (shield/group/activity/route/health/account/provider/
import/check/x/alert/info/copy/edit/trash/plus/refresh/...),
copyToClipboard, theme auto/dark/light, drawer, renderModernAdminNav
- admin-common.css: 4KB legacy shim — maps old class names
(.topnav/.primary/.secondary/.ghost/.danger/.metric/.statusbar/.stat/
.eyebrow/.hero-points/.page-hero__eyebrow/.shell/.fade-in/.topline/
.chip/.tag/.mono/.meta-card/.meta-label/.status-pill/.inline-code/
.tone-*) onto new tokens without breaking admin-common.js nav contract
Evidence:
- bash scripts/test/test_tksea_portal_assets.sh → PASS (70+ string assertions)
- bash scripts/test/verify_frontend_smoke.sh → PASS (chromium headless 7 pages)
This commit is contained in:
phamnazage-jpg
136
deploy/tksea-portal/admin-common.css
Normal file
136
deploy/tksea-portal/admin-common.css
Normal file
@@ -0,0 +1,136 @@
|
||||
/* =============================================================
|
||||
* admin-common.css — Legacy compatibility shim
|
||||
* -------------------------------------------------------------
|
||||
* Pages link BOTH:
|
||||
* /portal/portal.css → modern design system (primary)
|
||||
* /portal/admin-common.css → this file (legacy aliases)
|
||||
*
|
||||
* This file ONLY provides aliases so old inline class names
|
||||
* (`.primary` / `.secondary` / `.ghost` / `.danger` / etc.)
|
||||
* keep working after pages are refactored to the new system.
|
||||
* New pages should use the modern `.btn` / `.card` / `.stat-card`
|
||||
* classes from portal.css directly.
|
||||
* ============================================================= */
|
||||
|
||||
.topnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
text-decoration: none;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-elev-2);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
transition: transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.topnav a:hover {
|
||||
transform: translateY(-1px);
|
||||
background: var(--bg-elev-3);
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
||||
.topnav a.is-current {
|
||||
background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
|
||||
border-color: transparent;
|
||||
color: var(--text-on-primary);
|
||||
box-shadow: 0 4px 12px rgba(20,184,166,0.3);
|
||||
}
|
||||
|
||||
.statusbar {
|
||||
margin-top: 16px;
|
||||
min-height: 54px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-elev-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.statusbar[data-tone="success"] {
|
||||
background: var(--color-success-soft);
|
||||
color: var(--color-success);
|
||||
border-color: rgba(18, 107, 67, 0.2);
|
||||
}
|
||||
|
||||
.statusbar[data-tone="warning"] {
|
||||
background: var(--color-warning-soft);
|
||||
color: var(--color-warning);
|
||||
border-color: rgba(155, 98, 21, 0.2);
|
||||
}
|
||||
|
||||
.statusbar[data-tone="danger"] {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
border-color: rgba(178, 49, 49, 0.2);
|
||||
}
|
||||
|
||||
.statusbar[data-tone="info"] {
|
||||
background: var(--color-info-soft);
|
||||
color: var(--color-info);
|
||||
border-color: rgba(56, 189, 248, 0.2);
|
||||
}
|
||||
|
||||
/* ---- Legacy button aliases (kept so old pages work) ---- */
|
||||
button.primary, .primary {
|
||||
background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
|
||||
color: var(--text-on-primary);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 12px 18px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, box-shadow 120ms ease;
|
||||
box-shadow: 0 6px 16px rgba(20,184,166,0.22);
|
||||
}
|
||||
button.primary:hover, .primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20,184,166,0.32); }
|
||||
button.primary:disabled, .primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
|
||||
button.secondary, .secondary {
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
border: 1px solid rgba(20,184,166,0.2);
|
||||
border-radius: 999px;
|
||||
padding: 12px 18px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
button.secondary:hover, .secondary:hover { transform: translateY(-1px); background: rgba(20,184,166,0.18); }
|
||||
|
||||
button.ghost, .ghost {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--text-muted);
|
||||
border-radius: 999px;
|
||||
padding: 12px 18px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, background 120ms ease, color 120ms ease;
|
||||
}
|
||||
button.ghost:hover, .ghost:hover { transform: translateY(-1px); background: var(--bg-elev-3); color: var(--text-default); }
|
||||
|
||||
button.danger, .danger {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
border: 1px solid rgba(239,68,68,0.2);
|
||||
border-radius: 999px;
|
||||
padding: 12px 18px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
button.danger:hover, .danger:hover { transform: translateY(-1px); background: rgba(239,68,68,0.18); }
|
||||
776
deploy/tksea-portal/portal.css
Normal file
776
deploy/tksea-portal/portal.css
Normal file
@@ -0,0 +1,776 @@
|
||||
/* =============================================================
|
||||
* Sub2API CN Relay Manager · Portal Design System
|
||||
* -------------------------------------------------------------
|
||||
* 1:1 mapped to sub2api host (Vue/Tailwind) tokens.
|
||||
* All admin pages should link this file and consume these tokens
|
||||
* instead of declaring inline styles.
|
||||
*
|
||||
* Design DNA (from host sub2api-official-fresh frontend):
|
||||
* - Primary: Teal (#14b8a6 → #0f766e)
|
||||
* - Accent: Slate (#1e293b → #94a3b8)
|
||||
* - Dark mode default; light mode alternate via [data-theme=light]
|
||||
* - Glass cards + soft teal glow
|
||||
* - system-ui first font (NOT IBM Plex Sans which was never loaded)
|
||||
* ============================================================= */
|
||||
|
||||
/* ---------- 1. Tokens ---------- */
|
||||
:root,
|
||||
[data-theme="dark"] {
|
||||
/* Brand · teal scale */
|
||||
--teal-50: #f0fdfa;
|
||||
--teal-100: #ccfbf1;
|
||||
--teal-200: #99f6e4;
|
||||
--teal-300: #5eead4;
|
||||
--teal-400: #2dd4bf;
|
||||
--teal-500: #14b8a6;
|
||||
--teal-600: #0d9488;
|
||||
--teal-700: #0f766e;
|
||||
--teal-800: #115e59;
|
||||
--teal-900: #134e4a;
|
||||
--teal-950: #042f2e;
|
||||
|
||||
/* Slate · dark surface */
|
||||
--slate-50: #f8fafc;
|
||||
--slate-100: #f1f5f9;
|
||||
--slate-200: #e2e8f0;
|
||||
--slate-300: #cbd5e1;
|
||||
--slate-400: #94a3b8;
|
||||
--slate-500: #64748b;
|
||||
--slate-600: #475569;
|
||||
--slate-700: #334155;
|
||||
--slate-800: #1e293b;
|
||||
--slate-900: #0f172a;
|
||||
--slate-950: #020617;
|
||||
|
||||
/* Semantic aliases */
|
||||
--color-primary: var(--teal-500);
|
||||
--color-primary-strong: var(--teal-600);
|
||||
--color-primary-soft: rgba(20, 184, 166, 0.12);
|
||||
--color-primary-glow: rgba(20, 184, 166, 0.25);
|
||||
|
||||
--color-success: #22c55e;
|
||||
--color-success-soft: rgba(34, 197, 94, 0.12);
|
||||
--color-warning: #f59e0b;
|
||||
--color-warning-soft: rgba(245, 158, 11, 0.12);
|
||||
--color-danger: #ef4444;
|
||||
--color-danger-soft: rgba(239, 68, 68, 0.12);
|
||||
--color-info: #38bdf8;
|
||||
--color-info-soft: rgba(56, 189, 248, 0.12);
|
||||
--color-neutral: var(--slate-500);
|
||||
--color-neutral-soft: rgba(100, 116, 139, 0.12);
|
||||
|
||||
/* Surface */
|
||||
--bg-page: var(--slate-950);
|
||||
--bg-page-2: var(--slate-900);
|
||||
--bg-elev-1: rgba(30, 41, 59, 0.7);
|
||||
--bg-elev-2: rgba(30, 41, 59, 0.9);
|
||||
--bg-elev-3: rgba(51, 65, 85, 0.5);
|
||||
--border-subtle: rgba(148, 163, 184, 0.16);
|
||||
--border-strong: rgba(148, 163, 184, 0.28);
|
||||
|
||||
--text-strong: #f8fafc;
|
||||
--text-default: #e2e8f0;
|
||||
--text-muted: #94a3b8;
|
||||
--text-subtle: #64748b;
|
||||
--text-on-primary:#042f2e;
|
||||
|
||||
/* Type */
|
||||
--font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo,
|
||||
Monaco, Consolas, monospace;
|
||||
|
||||
/* Radius */
|
||||
--r-xs: 6px;
|
||||
--r-sm: 10px;
|
||||
--r-md: 14px;
|
||||
--r-lg: 18px;
|
||||
--r-xl: 24px;
|
||||
--r-2xl: 32px;
|
||||
--r-full: 9999px;
|
||||
|
||||
/* Spacing (4-pt scale) */
|
||||
--s-1: 4px;
|
||||
--s-2: 8px;
|
||||
--s-3: 12px;
|
||||
--s-4: 16px;
|
||||
--s-5: 20px;
|
||||
--s-6: 24px;
|
||||
--s-8: 32px;
|
||||
--s-10: 40px;
|
||||
--s-12: 48px;
|
||||
--s-16: 64px;
|
||||
|
||||
/* Shadow · glass + glow */
|
||||
--shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.4);
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.32);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.36);
|
||||
--shadow-glass: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
--shadow-glow: 0 0 0 1px rgba(20,184,166,0.35), 0 0 24px rgba(20,184,166,0.25);
|
||||
--shadow-glow-lg: 0 0 0 1px rgba(20,184,166,0.5), 0 0 40px rgba(20,184,166,0.4);
|
||||
|
||||
/* Motion */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
--dur-fast: 120ms;
|
||||
--dur-base: 200ms;
|
||||
--dur-slow: 320ms;
|
||||
}
|
||||
|
||||
/* Light mode · opt-in */
|
||||
[data-theme="light"] {
|
||||
--bg-page: #f8fafc;
|
||||
--bg-page-2: #f1f5f9;
|
||||
--bg-elev-1: rgba(255, 255, 255, 0.85);
|
||||
--bg-elev-2: #ffffff;
|
||||
--bg-elev-3: #f8fafc;
|
||||
--border-subtle: rgba(15, 23, 42, 0.08);
|
||||
--border-strong: rgba(15, 23, 42, 0.16);
|
||||
|
||||
--text-strong: #0f172a;
|
||||
--text-default: #1e293b;
|
||||
--text-muted: #475569;
|
||||
--text-subtle: #64748b;
|
||||
--text-on-primary:#ffffff;
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
||||
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
|
||||
--shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.08);
|
||||
--shadow-glass: 0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255,255,255,0.6) inset;
|
||||
}
|
||||
|
||||
/* ---------- 2. Reset + base ---------- */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-default);
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-image:
|
||||
radial-gradient(at 40% 20%, rgba(20, 184, 166, 0.10) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.06) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 50%, rgba(20, 184, 166, 0.06) 0px, transparent 50%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
[data-theme="light"] body {
|
||||
background-image:
|
||||
radial-gradient(at 40% 20%, rgba(20, 184, 166, 0.08) 0px, transparent 50%),
|
||||
radial-gradient(at 80% 0%, rgba(6, 182, 212, 0.05) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 50%, rgba(20, 184, 166, 0.04) 0px, transparent 50%);
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
|
||||
input, select, textarea { font: inherit; color: inherit; }
|
||||
code, pre, kbd { font-family: var(--font-mono); font-size: 0.875em; }
|
||||
img, svg { display: block; max-width: 100%; }
|
||||
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-6) 0; }
|
||||
::selection { background: var(--color-primary-soft); color: var(--text-strong); }
|
||||
|
||||
/* ---------- 3. Layout primitives ---------- */
|
||||
.shell {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: var(--s-8) var(--s-5) var(--s-16);
|
||||
}
|
||||
.shell-narrow { max-width: 1080px; }
|
||||
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
|
||||
.stack-lg { display: flex; flex-direction: column; gap: var(--s-6); }
|
||||
.row { display: flex; align-items: center; gap: var(--s-3); }
|
||||
.row-wrap { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
|
||||
.grid { display: grid; gap: var(--s-5); }
|
||||
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
@media (max-width: 800px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 700px) { .grid-4 { grid-template-columns: 1fr; } }
|
||||
|
||||
/* Page hero · consistent header across all admin pages */
|
||||
.page-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: var(--s-6);
|
||||
padding: var(--s-8);
|
||||
border-radius: var(--r-2xl);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(56, 189, 248, 0.06)),
|
||||
var(--bg-elev-2);
|
||||
border: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-glass);
|
||||
margin-bottom: var(--s-6);
|
||||
}
|
||||
.page-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -10rem;
|
||||
bottom: -10rem;
|
||||
width: 22rem;
|
||||
height: 22rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, var(--color-primary-soft), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (max-width: 900px) { .page-hero { grid-template-columns: 1fr; } }
|
||||
|
||||
.page-hero h1 {
|
||||
font-size: clamp(28px, 4vw, 40px);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
margin: var(--s-3) 0 var(--s-2);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.page-hero p { color: var(--text-muted); max-width: 56ch; line-height: 1.65; }
|
||||
.page-hero__eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
border: 1px solid rgba(20, 184, 166, 0.24);
|
||||
}
|
||||
|
||||
/* ---------- 4. Card ---------- */
|
||||
.card {
|
||||
background: var(--bg-elev-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-xl);
|
||||
box-shadow: var(--shadow-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-body { padding: var(--s-6); }
|
||||
.card-body-tight { padding: var(--s-4); }
|
||||
.card-hover {
|
||||
transition: transform var(--dur-base) var(--ease-out),
|
||||
border-color var(--dur-base) var(--ease-out),
|
||||
box-shadow var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(20, 184, 166, 0.32);
|
||||
box-shadow: var(--shadow-glass), var(--shadow-glow);
|
||||
}
|
||||
|
||||
/* ---------- 5. Stat card (host's signature) ---------- */
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--s-3);
|
||||
padding: var(--s-5);
|
||||
background: var(--bg-elev-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-xl);
|
||||
box-shadow: var(--shadow-glass);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.stat-card:hover { transform: translateY(-1px); border-color: rgba(20,184,166,0.24); }
|
||||
.stat-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--r-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.stat-icon svg { width: 22px; height: 22px; }
|
||||
.stat-icon-primary { background: var(--color-primary-soft); color: var(--color-primary); }
|
||||
.stat-icon-success { background: var(--color-success-soft); color: var(--color-success); }
|
||||
.stat-icon-warning { background: var(--color-warning-soft); color: var(--color-warning); }
|
||||
.stat-icon-danger { background: var(--color-danger-soft); color: var(--color-danger); }
|
||||
.stat-icon-info { background: var(--color-info-soft); color: var(--color-info); }
|
||||
.stat-icon-neutral { background: var(--color-neutral-soft); color: var(--color-neutral); }
|
||||
.stat-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 0 0 4px; }
|
||||
.stat-value { font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; line-height: 1.2; }
|
||||
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||||
.stat-sub .up { color: var(--color-success); }
|
||||
.stat-sub .down { color: var(--color-danger); }
|
||||
|
||||
/* ---------- 6. Status badge (host's signature) ---------- */
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--r-full);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
background: var(--color-neutral-soft);
|
||||
color: var(--text-default);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.status::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-success { background: var(--color-success-soft); color: var(--color-success); }
|
||||
.status-warning { background: var(--color-warning-soft); color: var(--color-warning); }
|
||||
.status-danger { background: var(--color-danger-soft); color: var(--color-danger); }
|
||||
.status-info { background: var(--color-info-soft); color: var(--color-info); }
|
||||
.status-primary { background: var(--color-primary-soft); color: var(--color-primary); }
|
||||
.status-neutral { background: var(--color-neutral-soft); color: var(--text-muted); }
|
||||
|
||||
/* Plain dot · for compact table rows */
|
||||
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
|
||||
.dot-success { background: var(--color-success); }
|
||||
.dot-warning { background: var(--color-warning); }
|
||||
.dot-danger { background: var(--color-danger); }
|
||||
.dot-info { background: var(--color-info); }
|
||||
.dot-neutral { background: var(--color-neutral); }
|
||||
.dot-primary { background: var(--color-primary); }
|
||||
|
||||
/* ---------- 7. Pill / chip / tag ---------- */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: var(--r-full);
|
||||
background: var(--bg-elev-3);
|
||||
color: var(--text-muted);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
.pill-primary { background: var(--color-primary-soft); color: var(--color-primary); border-color: rgba(20,184,166,0.24); }
|
||||
.pill-success { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(34,197,94,0.24); }
|
||||
.pill-warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(245,158,11,0.24); }
|
||||
.pill-danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: rgba(239,68,68,0.24); }
|
||||
|
||||
/* ---------- 8. Button ---------- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--s-2);
|
||||
height: 38px;
|
||||
padding: 0 var(--s-4);
|
||||
border-radius: var(--r-md);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: var(--bg-elev-2);
|
||||
color: var(--text-default);
|
||||
transition: transform var(--dur-fast) var(--ease-out),
|
||||
background var(--dur-fast) var(--ease-out),
|
||||
border-color var(--dur-fast) var(--ease-out),
|
||||
box-shadow var(--dur-fast) var(--ease-out);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:hover { transform: translateY(-1px); border-color: var(--border-strong); }
|
||||
.btn:active { transform: translateY(0); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
.btn-sm { height: 30px; padding: 0 var(--s-3); font-size: 12px; }
|
||||
.btn-lg { height: 44px; padding: 0 var(--s-5); font-size: 14px; }
|
||||
.btn-block { width: 100%; }
|
||||
.btn svg { width: 16px; height: 16px; }
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
|
||||
color: var(--text-on-primary);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 16px rgba(20,184,166,0.25);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--teal-400), var(--teal-500));
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 24px rgba(20,184,166,0.35);
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.btn-ghost:hover { background: var(--bg-elev-3); color: var(--text-default); }
|
||||
.btn-danger {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
border-color: rgba(239,68,68,0.3);
|
||||
}
|
||||
.btn-danger:hover { background: rgba(239,68,68,0.18); }
|
||||
|
||||
/* ---------- 9. Form ---------- */
|
||||
.input, .select, .textarea {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 var(--s-3);
|
||||
background: var(--bg-elev-2);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-md);
|
||||
color: var(--text-default);
|
||||
font-size: 13px;
|
||||
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
|
||||
}
|
||||
.textarea { height: auto; min-height: 96px; padding: var(--s-3); resize: vertical; line-height: 1.5; }
|
||||
.input:focus, .select:focus, .textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
||||
}
|
||||
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.field { display: flex; flex-direction: column; }
|
||||
.field-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
|
||||
.field-error { font-size: 12px; color: var(--color-danger); margin-top: 4px; }
|
||||
|
||||
/* ---------- 10. Table ---------- */
|
||||
.table-wrap {
|
||||
background: var(--bg-elev-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-xl);
|
||||
box-shadow: var(--shadow-glass);
|
||||
overflow: hidden;
|
||||
}
|
||||
table.data {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
.data thead th {
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
padding: var(--s-3) var(--s-4);
|
||||
background: rgba(15, 23, 42, 0.35);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
[data-theme="light"] .data thead th { background: rgba(241, 245, 249, 0.7); }
|
||||
.data tbody td {
|
||||
padding: var(--s-3) var(--s-4);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
color: var(--text-default);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.data tbody tr:last-child td { border-bottom: 0; }
|
||||
.data tbody tr:hover td { background: rgba(20, 184, 166, 0.04); }
|
||||
.data .num, .data .mono { font-family: var(--font-mono); font-size: 12.5px; }
|
||||
.data .num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ---------- 11. Empty state (host's signature) ---------- */
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: var(--s-12) var(--s-6);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.empty-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto var(--s-5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--r-xl);
|
||||
background: var(--bg-elev-3);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.empty-icon svg { width: 40px; height: 40px; }
|
||||
.empty h3 { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 0 0 var(--s-2); }
|
||||
.empty p { font-size: 13px; max-width: 36ch; margin: 0 auto var(--s-5); line-height: 1.6; }
|
||||
|
||||
/* ---------- 12. Loading / skeleton ---------- */
|
||||
.spinner {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--border-subtle);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg,
|
||||
var(--bg-elev-3) 25%,
|
||||
rgba(148,163,184,0.18) 37%,
|
||||
var(--bg-elev-3) 63%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.6s ease infinite;
|
||||
border-radius: var(--r-sm);
|
||||
}
|
||||
@keyframes shimmer { to { background-position: -200% 0; } }
|
||||
|
||||
/* ---------- 13. Topnav (admin) ---------- */
|
||||
.topnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--s-2);
|
||||
margin-bottom: var(--s-6);
|
||||
padding: var(--s-2);
|
||||
background: var(--bg-elev-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-full);
|
||||
box-shadow: var(--shadow-glass);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
.topnav a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
border-radius: var(--r-full);
|
||||
transition: background var(--dur-fast), color var(--dur-fast);
|
||||
}
|
||||
.topnav a:hover { color: var(--text-default); background: var(--bg-elev-3); }
|
||||
.topnav a.is-current {
|
||||
color: var(--text-on-primary);
|
||||
background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
|
||||
box-shadow: 0 4px 12px rgba(20,184,166,0.3);
|
||||
}
|
||||
.topnav a svg { width: 14px; height: 14px; }
|
||||
|
||||
/* ---------- 14. Toast ---------- */
|
||||
.toast-host {
|
||||
position: fixed;
|
||||
top: var(--s-5);
|
||||
right: var(--s-5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--s-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
min-width: 240px;
|
||||
max-width: 360px;
|
||||
padding: var(--s-3) var(--s-4);
|
||||
background: var(--bg-elev-2);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-3);
|
||||
font-size: 13px;
|
||||
color: var(--text-default);
|
||||
animation: toast-in var(--dur-slow) var(--ease-out);
|
||||
}
|
||||
.toast.leaving { animation: toast-out var(--dur-base) var(--ease-in-out) forwards; }
|
||||
.toast-success { border-color: rgba(34,197,94,0.32); }
|
||||
.toast-success .toast-icon { color: var(--color-success); }
|
||||
.toast-warning { border-color: rgba(245,158,11,0.32); }
|
||||
.toast-warning .toast-icon { color: var(--color-warning); }
|
||||
.toast-danger { border-color: rgba(239,68,68,0.32); }
|
||||
.toast-danger .toast-icon { color: var(--color-danger); }
|
||||
.toast-info { border-color: rgba(56,189,248,0.32); }
|
||||
.toast-info .toast-icon { color: var(--color-info); }
|
||||
.toast-icon { display: inline-flex; flex-shrink: 0; }
|
||||
.toast-icon svg { width: 18px; height: 18px; }
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@keyframes toast-out {
|
||||
to { opacity: 0; transform: translateX(20px); }
|
||||
}
|
||||
|
||||
/* ---------- 15. Statusbar (admin feedback area, replaces old one) ---------- */
|
||||
.statusbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
padding: var(--s-3) var(--s-4);
|
||||
background: var(--bg-elev-2);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-md);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
min-height: 44px;
|
||||
}
|
||||
.statusbar[data-tone="success"] { background: var(--color-success-soft); color: var(--color-success); border-color: rgba(34,197,94,0.24); }
|
||||
.statusbar[data-tone="warning"] { background: var(--color-warning-soft); color: var(--color-warning); border-color: rgba(245,158,11,0.24); }
|
||||
.statusbar[data-tone="danger"] { background: var(--color-danger-soft); color: var(--color-danger); border-color: rgba(239,68,68,0.24); }
|
||||
.statusbar[data-tone="info"] { background: var(--color-info-soft); color: var(--color-info); border-color: rgba(56,189,248,0.24); }
|
||||
|
||||
/* ---------- 16. Page entry animations ---------- */
|
||||
.fade-in { animation: fade-in var(--dur-slow) var(--ease-out); }
|
||||
.slide-up { animation: slide-up var(--dur-slow) var(--ease-out); }
|
||||
.scale-in { animation: scale-in var(--dur-base) var(--ease-out); }
|
||||
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
|
||||
|
||||
/* ---------- 17. Code block ---------- */
|
||||
pre, .code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.6;
|
||||
padding: var(--s-3) var(--s-4);
|
||||
background: rgba(2, 6, 23, 0.6);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-md);
|
||||
color: var(--text-default);
|
||||
overflow-x: auto;
|
||||
}
|
||||
[data-theme="light"] pre, [data-theme="light"] .code {
|
||||
background: var(--slate-900);
|
||||
color: var(--slate-100);
|
||||
}
|
||||
code { color: var(--color-primary); }
|
||||
[data-theme="light"] code { color: var(--teal-700); }
|
||||
pre code { color: inherit; }
|
||||
|
||||
/* ---------- 18. Section header ---------- */
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-3);
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--s-4);
|
||||
}
|
||||
.section-head h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.section-head p {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin: 4px 0 0;
|
||||
max-width: 60ch;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.section-head .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
|
||||
|
||||
/* ---------- 19. Drawer (right-side panel) ---------- */
|
||||
.drawer-mask {
|
||||
position: fixed; inset: 0; z-index: 200;
|
||||
background: rgba(2,6,23,0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
animation: fade-in var(--dur-base) var(--ease-out);
|
||||
}
|
||||
.drawer {
|
||||
position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
|
||||
width: min(540px, 100vw);
|
||||
background: var(--bg-elev-2);
|
||||
border-left: 1px solid var(--border-subtle);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex; flex-direction: column;
|
||||
animation: drawer-in var(--dur-slow) var(--ease-out);
|
||||
}
|
||||
@keyframes drawer-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
||||
.drawer-head { padding: var(--s-5); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
|
||||
.drawer-body { padding: var(--s-5); overflow-y: auto; flex: 1; }
|
||||
.drawer-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border-subtle); display: flex; gap: var(--s-2); justify-content: flex-end; }
|
||||
|
||||
/* ---------- 20. Utilities ---------- */
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-subtle { color: var(--text-subtle); }
|
||||
.text-strong { color: var(--text-strong); }
|
||||
.text-success { color: var(--color-success); }
|
||||
.text-warning { color: var(--color-warning); }
|
||||
.text-danger { color: var(--color-danger); }
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.tabular { font-variant-numeric: tabular-nums; }
|
||||
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.hidden { display: none; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
|
||||
.divider { height: 1px; background: var(--border-subtle); margin: var(--s-4) 0; }
|
||||
.mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
|
||||
.mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
|
||||
.mb-1 { margin-bottom: var(--s-1); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
|
||||
.mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
|
||||
.p-4 { padding: var(--s-4); } .p-5 { padding: var(--s-5); } .p-6 { padding: var(--s-6); }
|
||||
|
||||
/* ---------- 21. Tabs ---------- */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
background: var(--bg-elev-3);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--r-md);
|
||||
width: fit-content;
|
||||
}
|
||||
.tabs button {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
border-radius: 8px;
|
||||
transition: background var(--dur-fast), color var(--dur-fast);
|
||||
}
|
||||
.tabs button:hover { color: var(--text-default); }
|
||||
.tabs button.is-current {
|
||||
background: var(--bg-elev-2);
|
||||
color: var(--text-strong);
|
||||
box-shadow: var(--shadow-xs);
|
||||
}
|
||||
|
||||
/* ---------- 22. Misc host-aligned elements ---------- */
|
||||
.kbd {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-elev-3);
|
||||
border: 1px solid var(--border-subtle);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.glow-ring {
|
||||
position: relative;
|
||||
}
|
||||
.glow-ring::after {
|
||||
content: "";
|
||||
position: absolute; inset: -1px;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(135deg, var(--teal-500), transparent 40%, transparent 60%, var(--teal-700));
|
||||
opacity: 0.15;
|
||||
z-index: -1;
|
||||
filter: blur(8px);
|
||||
}
|
||||
330
deploy/tksea-portal/portal.js
Normal file
330
deploy/tksea-portal/portal.js
Normal file
@@ -0,0 +1,330 @@
|
||||
/* =============================================================
|
||||
* Sub2API CN Relay Manager · Modern Portal Shared Layer
|
||||
* -------------------------------------------------------------
|
||||
* Sits on top of admin-common.js. Provides:
|
||||
* - Toast (non-blocking notifications)
|
||||
* - Copy-to-clipboard helper
|
||||
* - Theme switch (auto / dark / light)
|
||||
* - SVG icon registry
|
||||
* - Loading state + empty state helpers
|
||||
* - Drawer open/close
|
||||
* ============================================================= */
|
||||
(function initPortalModern(global) {
|
||||
"use strict";
|
||||
|
||||
// ---- 1. SVG icon registry (lucide-style, 1.5px stroke) ----
|
||||
const ICONS = {
|
||||
home: '<path d="M3 12L12 3l9 9"/><path d="M5 10v10h14V10"/><path d="M9 20v-6h6v6"/>',
|
||||
group:
|
||||
'<circle cx="9" cy="7" r="3"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2"/><path d="M16 3a3 3 0 010 6"/><path d="M21 21v-2a4 4 0 00-3-3.87"/>',
|
||||
route:
|
||||
'<circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h7a3 3 0 013 3v0a3 3 0 01-3 3h-7"/><path d="M16 18h-7a3 3 0 01-3-3v0"/>',
|
||||
health: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
|
||||
account:
|
||||
'<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18"/><path d="M9 4v4"/><path d="M7 16h2"/><path d="M7 14h2"/>',
|
||||
provider:
|
||||
'<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05"/><path d="M12 22.08V12"/>',
|
||||
import:
|
||||
'<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/>',
|
||||
check: '<polyline points="20,6 9,17 4,12"/>',
|
||||
x: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
|
||||
alert:
|
||||
'<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>',
|
||||
info: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>',
|
||||
copy: '<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>',
|
||||
edit: '<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>',
|
||||
trash:
|
||||
'<polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a2 2 0 012-2h2a2 2 0 012 2v2"/>',
|
||||
plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
|
||||
refresh:
|
||||
'<polyline points="23,4 23,10 17,10"/><polyline points="1,20 1,14 7,14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>',
|
||||
download:
|
||||
'<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/>',
|
||||
upload:
|
||||
'<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17,8 12,3 7,8"/><line x1="12" y1="3" x2="12" y2="15"/>',
|
||||
eye: '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
|
||||
eyeoff:
|
||||
'<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>',
|
||||
play: '<polygon points="5,3 19,12 5,21 5,3"/>',
|
||||
pause:
|
||||
'<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>',
|
||||
external:
|
||||
'<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15,3 21,3 21,9"/><line x1="10" y1="14" x2="21" y2="3"/>',
|
||||
chevron: '<polyline points="9,18 15,12 9,6"/>',
|
||||
zap: '<polygon points="13,2 3,14 12,14 11,22 21,10 12,10 13,2"/>',
|
||||
shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
|
||||
search:
|
||||
'<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
|
||||
server:
|
||||
'<rect x="2" y="2" width="20" height="8" rx="1"/><rect x="2" y="14" width="20" height="8" rx="1"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>',
|
||||
activity: '<polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/>',
|
||||
key: '<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.78 7.78 5.5 5.5 0 017.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/>',
|
||||
file: '<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/>',
|
||||
package:
|
||||
'<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27,6.96 12,12.01 20.73,6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>',
|
||||
user: '<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
users:
|
||||
'<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>',
|
||||
send: '<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9 22,2"/>',
|
||||
filter: '<polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46 22,3"/>',
|
||||
sparkle:
|
||||
'<path d="M12 3l1.9 5.6L20 10l-5.6 1.9L12 17l-1.9-5.1L4 10l6.1-1.4L12 3z"/><path d="M19 17l.7 2.3L22 20l-2.3.7L19 23l-.7-2.3L16 20l2.3-.7L19 17z"/>',
|
||||
sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>',
|
||||
moon: '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>',
|
||||
};
|
||||
|
||||
function svg(name, size = 16) {
|
||||
const body = ICONS[name];
|
||||
if (!body) return "";
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
|
||||
}
|
||||
|
||||
// ---- 2. Theme switch ----
|
||||
const THEME_KEY = "sub2api-portal-theme";
|
||||
function detectInitialTheme() {
|
||||
const stored = global.localStorage.getItem(THEME_KEY);
|
||||
if (stored === "dark" || stored === "light") return stored;
|
||||
return global.matchMedia &&
|
||||
global.matchMedia("(prefers-color-scheme: light)").matches
|
||||
? "light"
|
||||
: "dark";
|
||||
}
|
||||
function applyTheme(theme) {
|
||||
global.document.documentElement.setAttribute("data-theme", theme);
|
||||
global.localStorage.setItem(THEME_KEY, theme);
|
||||
global.document.dispatchEvent(
|
||||
new CustomEvent("themechange", { detail: { theme } }),
|
||||
);
|
||||
}
|
||||
function toggleTheme() {
|
||||
const current =
|
||||
global.document.documentElement.getAttribute("data-theme") || "dark";
|
||||
applyTheme(current === "dark" ? "light" : "dark");
|
||||
}
|
||||
applyTheme(detectInitialTheme());
|
||||
|
||||
// ---- 3. Toast (host's signature) ----
|
||||
function ensureToastHost() {
|
||||
let host = global.document.querySelector(".toast-host");
|
||||
if (!host) {
|
||||
host = global.document.createElement("div");
|
||||
host.className = "toast-host";
|
||||
global.document.body.appendChild(host);
|
||||
}
|
||||
return host;
|
||||
}
|
||||
function toast(message, tone = "info", durationMs = 3200) {
|
||||
const host = ensureToastHost();
|
||||
const el = global.document.createElement("div");
|
||||
el.className = `toast toast-${tone}`;
|
||||
const iconName =
|
||||
tone === "success"
|
||||
? "check"
|
||||
: tone === "warning"
|
||||
? "alert"
|
||||
: tone === "danger"
|
||||
? "x"
|
||||
: "info";
|
||||
el.innerHTML = `<span class="toast-icon">${svg(iconName, 18)}</span><span>${escapeText(message)}</span>`;
|
||||
host.appendChild(el);
|
||||
const timer = setTimeout(() => dismiss(), durationMs);
|
||||
el.addEventListener("click", () => {
|
||||
clearTimeout(timer);
|
||||
dismiss();
|
||||
});
|
||||
function dismiss() {
|
||||
if (!el.isConnected) return;
|
||||
el.classList.add("leaving");
|
||||
setTimeout(() => el.remove(), 220);
|
||||
}
|
||||
return dismiss;
|
||||
}
|
||||
|
||||
// ---- 4. Copy to clipboard ----
|
||||
async function copyToClipboard(text) {
|
||||
const value = String(text ?? "");
|
||||
try {
|
||||
if (
|
||||
global.navigator &&
|
||||
global.navigator.clipboard &&
|
||||
global.navigator.clipboard.writeText
|
||||
) {
|
||||
await global.navigator.clipboard.writeText(value);
|
||||
} else {
|
||||
const ta = global.document.createElement("textarea");
|
||||
ta.value = value;
|
||||
ta.style.position = "fixed";
|
||||
ta.style.opacity = "0";
|
||||
global.document.body.appendChild(ta);
|
||||
ta.select();
|
||||
global.document.execCommand("copy");
|
||||
ta.remove();
|
||||
}
|
||||
toast("已复制到剪贴板", "success", 1800);
|
||||
return true;
|
||||
} catch (error) {
|
||||
toast(`复制失败：${error.message || error}`, "danger");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 5. Drawer ----
|
||||
function openDrawer({ title, body, footer, onMount } = {}) {
|
||||
const mask = global.document.createElement("div");
|
||||
mask.className = "drawer-mask";
|
||||
const drawer = global.document.createElement("aside");
|
||||
drawer.className = "drawer";
|
||||
drawer.setAttribute("role", "dialog");
|
||||
drawer.setAttribute("aria-modal", "true");
|
||||
drawer.innerHTML = `
|
||||
<header class="drawer-head">
|
||||
<h3 style="margin:0;font-size:16px;font-weight:700;color:var(--text-strong);">${escapeText(title || "")}</h3>
|
||||
<button class="btn btn-ghost btn-sm" data-drawer-close aria-label="Close">${svg("x", 16)}</button>
|
||||
</header>
|
||||
<div class="drawer-body">${typeof body === "string" ? body : ""}</div>
|
||||
${footer ? `<footer class="drawer-foot">${footer}</footer>` : ""}
|
||||
`;
|
||||
global.document.body.appendChild(mask);
|
||||
global.document.body.appendChild(drawer);
|
||||
const bodyEl = drawer.querySelector(".drawer-body");
|
||||
if (typeof body !== "string" && body instanceof global.Node) {
|
||||
bodyEl.innerHTML = "";
|
||||
bodyEl.appendChild(body);
|
||||
}
|
||||
if (typeof onMount === "function") {
|
||||
onMount({ drawer, mask, body: bodyEl, close });
|
||||
}
|
||||
function close() {
|
||||
mask.style.opacity = "0";
|
||||
drawer.style.animation = "none";
|
||||
drawer.style.transform = "translateX(20px)";
|
||||
drawer.style.opacity = "0";
|
||||
drawer.style.transition = "all 200ms ease";
|
||||
setTimeout(() => {
|
||||
mask.remove();
|
||||
drawer.remove();
|
||||
}, 200);
|
||||
}
|
||||
mask.addEventListener("click", close);
|
||||
drawer
|
||||
.querySelector("[data-drawer-close]")
|
||||
.addEventListener("click", close);
|
||||
global.document.addEventListener("keydown", function esc(e) {
|
||||
if (e.key === "Escape") {
|
||||
close();
|
||||
global.document.removeEventListener("keydown", esc);
|
||||
}
|
||||
});
|
||||
return { close, drawer, body: bodyEl };
|
||||
}
|
||||
|
||||
// ---- 6. Empty state + skeleton helpers ----
|
||||
function emptyState({
|
||||
icon = "package",
|
||||
title = "暂无数据",
|
||||
description = "",
|
||||
actionLabel,
|
||||
onAction,
|
||||
} = {}) {
|
||||
const root = global.document.createElement("div");
|
||||
root.className = "empty";
|
||||
root.innerHTML = `
|
||||
<div class="empty-icon">${svg(icon, 36)}</div>
|
||||
<h3>${escapeText(title)}</h3>
|
||||
${description ? `<p>${escapeText(description)}</p>` : ""}
|
||||
${actionLabel ? `<button class="btn btn-primary">${escapeText(actionLabel)}</button>` : ""}
|
||||
`;
|
||||
if (actionLabel && typeof onAction === "function") {
|
||||
root.querySelector("button").addEventListener("click", onAction);
|
||||
}
|
||||
return root;
|
||||
}
|
||||
|
||||
function skeleton(width = "100%", height = "12px") {
|
||||
const el = global.document.createElement("span");
|
||||
el.className = "skeleton";
|
||||
el.style.display = "inline-block";
|
||||
el.style.width = width;
|
||||
el.style.height = height;
|
||||
return el;
|
||||
}
|
||||
|
||||
// ---- 7. Text escape (HTML-safe) ----
|
||||
function escapeText(value) {
|
||||
return String(value ?? "")
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
// ---- 8. Date / time formatting (zh-CN) ----
|
||||
function formatDateTime(input) {
|
||||
if (!input) return "—";
|
||||
const d = input instanceof Date ? input : new Date(input);
|
||||
if (Number.isNaN(d.getTime())) return String(input);
|
||||
const pad = (n) => String(n).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
// ---- 9. Nav rendering w/ icons (overrides admin-common if Sub2ApiAdminCommon missing) ----
|
||||
const ICON_BY_KEY = {
|
||||
home: "home",
|
||||
"logical-groups": "group",
|
||||
"route-health": "health",
|
||||
accounts: "account",
|
||||
providers: "provider",
|
||||
"batch-import": "import",
|
||||
};
|
||||
function renderModernAdminNav(container, currentKey) {
|
||||
if (!container) return;
|
||||
if (
|
||||
global.Sub2ApiAdminCommon &&
|
||||
typeof global.Sub2ApiAdminCommon.renderAdminNav === "function"
|
||||
) {
|
||||
global.Sub2ApiAdminCommon.renderAdminNav(container, currentKey);
|
||||
}
|
||||
container.querySelectorAll("a").forEach((a) => {
|
||||
const href = a.getAttribute("href") || "";
|
||||
const key = Object.keys(ICON_BY_KEY).find((k) =>
|
||||
href.endsWith(
|
||||
ICON_BY_KEY[k] === "group"
|
||||
? "logical-groups.html"
|
||||
: href.endsWith(ICON_BY_KEY[k] + ".html")
|
||||
? ICON_BY_KEY[k] + ".html"
|
||||
: href.endsWith("/portal/admin/") && k === "home"
|
||||
? "/portal/admin/"
|
||||
: "",
|
||||
),
|
||||
);
|
||||
const matchKey =
|
||||
key ||
|
||||
(href === "/portal/admin/" || href.endsWith("/portal/admin/")
|
||||
? "home"
|
||||
: null);
|
||||
if (matchKey && ICON_BY_KEY[matchKey] && !a.querySelector("svg")) {
|
||||
a.insertAdjacentHTML(
|
||||
"afterbegin",
|
||||
svg(ICON_BY_KEY[matchKey], 14) + " ",
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Public API ----
|
||||
global.Sub2ApiPortal = {
|
||||
svg,
|
||||
toast,
|
||||
copyToClipboard,
|
||||
openDrawer,
|
||||
emptyState,
|
||||
skeleton,
|
||||
formatDateTime,
|
||||
applyTheme,
|
||||
toggleTheme,
|
||||
detectInitialTheme,
|
||||
escapeText,
|
||||
renderModernAdminNav,
|
||||
};
|
||||
})(window);
|
||||
Reference in New Issue
Block a user