Skip to content

feat(ui): redesign login page as two-column layout + rework sidebar (rant 2026-09-11, PR2) #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
argszero merged 1 commit into from
Sep 11, 2026
Merged

feat(ui): redesign login page as two-column layout + rework sidebar (rant 2026-09-11, PR2) #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 127 additions & 97 deletions ui/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,18 @@ body {
.table tbody { animation: tbodyIn 0.15s ease-out; }
.muted { color: var(--text-mute); }

/* 小标签 / 图标按钮（原型 .eyebrow / .icon-btn，PR2 起供登录页与侧边栏使用） */
.eyebrow {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--accent);
}
.icon-btn {
width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
color: var(--muted); border: 1px solid var(--border); background: transparent; cursor: pointer;
}
.icon-btn:hover { color: var(--fg); border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- 通用组件 ---------- */

.btn {
Expand Down Expand Up @@ -630,77 +642,75 @@ mark {
.empty-cell { padding: 0 !important; }
.empty-cell .empty-state { padding: 36px 16px; }

/* ---------- 登录页 ---------- */
/* ---------- 登录页（rant 2026-09-11T16:23:43：单卡片 → 左右分栏） ---------- */

.login-view {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 24px;
position: relative; overflow: hidden;
background:
radial-gradient(600px 300px at 20% 0%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 60%),
radial-gradient(600px 400px at 90% 100%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 60%),
var(--bg);
display: grid; grid-template-columns: 1.15fr 0.85fr;
height: 100vh; position: relative; overflow: hidden;
background: var(--bg);
}
/* 品牌氛围（rant 20:46:57 G：渐变网格 + 微光浮动；reduced-motion 下静止由全局规则覆盖） */
.login-view::before {
content: ""; position: absolute; inset: 0;
/* 主题切换（毛玻璃，右上角浮于两栏之上） */
.login-theme {
position: absolute; top: 20px; right: 24px; z-index: 5;
background: color-mix(in oklch, var(--surface) 70%, transparent);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.login-theme .ico-moon { display: none; }
:root[data-theme="light"] .login-theme .ico-sun { display: none; }
:root[data-theme="light"] .login-theme .ico-moon { display: block; }

/* 左栏：品牌叙事（原型 .login-brand） */
.login-brand {
position: relative; overflow-y: auto; overflow-x: hidden;
scrollbar-width: none; -ms-overflow-style: none;
padding: clamp(26px, 5vh, 56px) clamp(30px, 4vw, 60px);
display: flex; flex-direction: column; justify-content: safe center;
background:
linear-gradient(color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in oklch, var(--accent) 5%, transparent) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 25%, transparent 72%);
mask-image: radial-gradient(ellipse 85% 75% at 50% 42%, #000 25%, transparent 72%);
pointer-events: none;
}
.login-view::after {
content: ""; position: absolute;
width: 440px; height: 440px; border-radius: 50%;
top: -140px; right: -110px;
background: radial-gradient(circle, color-mix(in oklch, var(--accent) 16%, transparent), transparent 65%);
animation: login-float 10s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes login-float {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-48px, 36px) scale(1.12); }
}
.login-card {
position: relative; z-index: 1; /* 浮在网格/微光伪元素之上 */
width: 100%; max-width: 400px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
box-shadow: var(--shadow);
radial-gradient(120% 90% at 8% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 60%),
var(--bg);
border-right: 1px solid var(--border);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-brand h1 { font-size: 20px; }
.login-brand p { color: var(--text-mute); font-size: 12px; }

.logo {
width: 40px; height: 40px; border-radius: 10px;
.login-brand::-webkit-scrollbar { width: 0; height: 0; }
.lb-top { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.logo-tile {
width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none;
background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 92%, var(--fg)), color-mix(in oklch, var(--accent) 62%, var(--bg)));
color: var(--accent-ink); font-weight: 800;
display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0;
position: relative;
box-shadow: 0 0 0 1.5px color-mix(in oklch, var(--accent) 45%, transparent), 0 0 14px color-mix(in oklch, var(--accent) 35%, transparent);
}
/* 渐变描边质感（rant 20:46:57 G：顶部内高光 + 底部内阴影） */
.logo::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.14);
}
/* 登录页 logo 加大 + 微光（rant 20:39:30 G） */
.login-card .logo {
width: 52px; height: 52px; border-radius: 13px; font-size: 20px;
box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent), 0 0 18px color-mix(in oklch, var(--accent) 35%, transparent);
}
.login-brand h1 { font-size: 22px; line-height: 1.25; }
.login-brand p { font-size: 12px; line-height: 1.5; }

.mode-switch { display: none; }
color: var(--accent-ink); font-weight: 800; font-size: 16px; letter-spacing: -0.02em;
}
.lb-headline {
font-family: var(--font-serif); font-size: clamp(30px, min(4.4vw, 6.2vh), 54px); line-height: 1.06;
letter-spacing: -0.02em; margin: clamp(14px, 3vh, 30px) 0 clamp(9px, 1.6vh, 16px); max-width: 15ch;
}
.lb-sub { color: var(--muted); font-size: 15.5px; max-width: 52ch; }
.lb-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(12px, 2.4vh, 26px); }
.lb-points li { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
.gw { margin-top: clamp(14px, 2.8vh, 34px); border: 1px solid var(--border); background: color-mix(in oklch, var(--surface) 82%, transparent); border-radius: var(--r-lg); padding: 18px; max-width: 520px; }
.gw-lead { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.gw-ep { display: grid; grid-template-columns: 138px 1fr; gap: 12px; align-items: center; padding: 9px 12px; border-radius: var(--r-sm); background: var(--fg-soft); border: 1px solid var(--border); }
.gw-ep + .gw-ep { margin-top: 7px; }
.gw-chip { font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: 6px; background: var(--surface); color: var(--fg); border: 1px solid var(--border); text-align: center; }
.gw-ep code { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); min-width: 0; overflow-wrap: anywhere; }
.gw-mid { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.gw-mid .line { flex: 1; height: 1px; background: var(--border); }
.gw-models { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-models span { font-size: 11px; color: color-mix(in oklch, var(--muted) 88%, transparent); }
.lb-meta { margin-top: clamp(12px, 2.4vh, 26px); font-family: var(--font-mono); font-size: 11px; color: color-mix(in oklch, var(--muted) 80%, transparent); }

/* 右栏：表单面板（原型 .login-panel） */
.login-panel {
display: grid; place-items: center; align-content: safe center;
padding: clamp(22px, 4vh, 40px) 32px; background: var(--surface); overflow-y: auto;
}
.login-card { width: 100%; max-width: 380px; }
.login-card h2 { font-size: 24px; letter-spacing: -0.01em; }
.login-card > p.sub { color: var(--muted); margin: 6px 0 22px; }
/* 登录 / 注册 tab（rant 2026-09-11T16:23:43） */
.auth-tabs {
display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border);
border-radius: 999px; padding: 4px; margin-bottom: 20px;
}
.auth-tabs button { flex: 1; padding: 8px 0; border-radius: 999px; font-size: 13px; color: var(--muted); font-weight: 600; }
.auth-tabs button.active { background: var(--accent); color: var(--accent-ink); }

.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-dim); }
Expand All @@ -713,7 +723,7 @@ mark {
.checkbox-line { display: flex; align-items: center; gap: 6px; flex-direction: row !important; color: var(--text-dim); cursor: pointer; }
.checkbox-line input { accent-color: var(--accent); width: 14px; height: 14px; }
.demo-hint { color: var(--text-mute); font-size: 11px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--text-mute); font-size: 12px; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 11px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.login-foot { margin-top: 16px; text-align: center; font-size: 13px; color: var(--text-dim); }
.login-foot a { color: var(--accent-text); text-decoration: none; }
Expand All @@ -726,49 +736,56 @@ mark {
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
background: var(--bg-soft);
background: var(--surface);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 14px 12px;
padding: 18px 14px;
}
.sidebar-top { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; border-bottom: 1px solid var(--border); }
/* 品牌区（原型 .sb-brand） */
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 16px; }
.sb-brand .logo-tile { width: 34px; height: 34px; font-size: 14px; border-radius: 9px; }
.brand-text { flex: 1; min-width: 0; }
.brand-text strong { font-size: 15px; display: block; }
.brand-text span { color: var(--text-mute); font-size: 11px; }
.brand-text span { color: var(--muted); font-size: 11px; }
/* 主题切换按钮（rant 18:06:09 B：日/月 SVG 图标，按当前主题显隐） */
.theme-toggle {
flex-shrink: 0;
width: 30px; height: 30px;
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
background: var(--bg-soft);
color: var(--text-dim);
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
border-radius: 8px;
cursor: pointer;
transition: all .15s;
}
.theme-toggle:hover { color: var(--accent-text); border-color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle:hover { color: var(--fg); border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text strong { font-size: 14px; }
.brand-text span { color: var(--text-mute); font-size: 11px; }
.brand-text span { color: var(--muted); font-size: 11px; }

.nav { flex: 1; padding: 14px 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-group { color: var(--text-mute); font-size: 11px; padding: 10px 8px 4px; }
.nav { flex: 1; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
/* 分组标题（原型 .nav-group：等宽大写带字距） */
.nav-group {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: color-mix(in oklch, var(--muted) 72%, transparent); padding: 14px 10px 6px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border-radius: var(--radius-sm);
color: var(--text-dim); cursor: pointer; font-size: 13.5px;
padding: 9px 11px; border-radius: var(--r-sm);
color: var(--muted); cursor: pointer; font-size: 13.5px; font-weight: 500;
border: none; background: transparent; text-align: left; width: 100%;
}
.nav-item .ico { width: 18px; text-align: center; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .ico svg { width: 18px; height: 18px; display: block; }
.nav-item .ico { width: 16px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.nav-item .ico svg { width: 16px; height: 16px; display: block; }
.nav-tag {
margin-left: auto;
font-size: 10px;
font-family: var(--font-mono);
font-size: 10.5px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
Expand All @@ -788,9 +805,14 @@ mark {
background: var(--bg-soft);
font-family: var(--mono);
}
/* 模型市场 badge（原型 .nav button .badge：模型数量） */
.nav-count {
margin-left: auto;
font-family: var(--font-mono); font-size: 10.5px; color: var(--muted);
}
.nav-item:hover .nav-key { color: var(--accent-text); border-color: var(--accent); }
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item:hover { background: var(--fg-soft); color: var(--fg); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* 市场行展开按钮（rant 20:39:30 F：+/- 切换详情行） */
.row-expand {
Expand All @@ -811,21 +833,23 @@ mark {
.mkd-label { color: var(--text-mute); font-size: 12px; }
.mkd-val { color: var(--text); line-height: 1.55; }

.sidebar-bottom { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.user-chip {
display: flex; align-items: center; gap: 10px;
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 10px;
/* 侧边栏底部（原型 .sb-foot：用户 chip + 主题切换 + 退出按钮） */
.sb-foot {
border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px;
display: flex; flex-direction: column; gap: 10px;
}
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
.user-chip .chip-text { flex: 1; min-width: 0; }
.user-chip .avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 92%, var(--fg)), color-mix(in oklch, var(--accent) 62%, var(--bg)));
color: var(--accent-ink); font-weight: 700;
width: 34px; height: 34px; border-radius: 50%; flex: none;
background: var(--accent-soft); color: var(--accent);
font-size: 13px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.user-chip strong { font-size: 13px; display: block; }
.user-chip span { color: var(--text-mute); font-size: 11px; }
.user-chip b { color: var(--accent-text); }
.user-chip span { color: var(--muted); font-size: 11.5px; }
.user-chip b { color: var(--accent); }

.main { flex: 1; overflow-y: auto; padding: 28px 32px 48px; }

Expand Down Expand Up @@ -1009,17 +1033,23 @@ mark {

@media (max-width: 900px) {
.sidebar { width: 64px; padding: 12px 8px; }
.sidebar .brand-text, .sidebar .nav-item .label, .sidebar .user-chip > div:last-child,
.sidebar .brand-text, .sidebar .nav-item .label, .sidebar .user-chip .chip-text,
.sidebar #toggle-mode-btn, .sidebar #logout-btn { display: none; }
.nav-item { justify-content: center; }
.main { padding: 20px 16px 40px; }
.form-row { grid-template-columns: 1fr; }
/* 登录页窄屏：收起品牌叙事栏，仅保留表单（原型 responsive 规则） */
.login-view { grid-template-columns: 1fr; }
.login-brand { display: none; }
}

@media (max-width: 560px) {
.stat-grid { grid-template-columns: 1fr 1fr; }
.card-grid { grid-template-columns: 1fr; }
.api-key-card { margin-top: 12px; }
/* 网关端点卡片窄屏：chip 与 URL 上下排（原型 responsive 规则） */
.gw-ep { grid-template-columns: 1fr; gap: 6px; }
.gw-chip { justify-self: start; }
/* 交易汇总条窄屏（rant 20:39:30 B） */
.tx-summary { gap: 18px; padding: 10px 12px 8px; }
.tx-summary .ts-value { font-size: 16px; }
Expand Down
Loading
Loading