feat: enhance layout components, data layer and global styles

- SidebarRail, TopBar, FilterBar: improved navigation and filtering UX

- metrics.js, requests.js: expanded data with multi-range trend series

- composables: enhanced useChat, useNavigation, useRequests

- global.css: refined design tokens and utility classes

- Add DocFilterBar component and LoginView page

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-04-29 23:35:56 +08:00
parent 7141e1d11a
commit e54ebd072a
15 changed files with 845 additions and 199 deletions

View File

@@ -1,20 +1,24 @@
:root {
--bg: #f6f8fb;
--bg: #f8fafc;
--surface: #fff;
--surface-soft: #f9fbff;
--ink: #101828;
--text: #344054;
--muted: #667085;
--line: #e4e7ec;
--line-strong: #d0d5dd;
--primary: #335cff;
--primary-soft: #eef3ff;
--success: #0e9384;
--success-soft: #e7f8f5;
--warning: #b54708;
--warning-soft: #fff4e5;
--danger: #b42318;
--danger-soft: #ffebe9;
--ink: #1e293b;
--text: #334155;
--muted: #64748b;
--line: #e2e8f0;
--line-strong: #cbd5e1;
--primary: #10b981;
--primary-soft: #ecfdf5;
--secondary: #3b82f6;
--purple: #8b5cf6;
--orange: #f59e0b;
--red: #ef4444;
--success: #10b981;
--success-soft: #ecfdf5;
--warning: #f59e0b;
--warning-soft: #fffbeb;
--danger: #ef4444;
--danger-soft: #fef2f2;
--nav: #0b1220;
--nav-muted: #7d89a5;
--radius: 8px;
@@ -26,11 +30,11 @@
body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(51,92,255,.24); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(16,185,129,.20); outline-offset: 2px; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, p { margin: 0; }
h1 { margin-top: 4px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); line-height: 1.1; }
h1 { margin-top: 4px; color: var(--ink); font-size: 24px; line-height: 1.25; font-weight: 700; }
.btn {
min-height: 42px;
@@ -59,13 +63,12 @@ h1 { margin-top: 4px; color: var(--ink); font-size: clamp(25px, 3vw, 36px); line
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.panel {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: 0 1px 2px rgba(16,24,40,.04);
transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
transition: box-shadow 160ms var(--ease);
}
.panel:hover { transform: translateY(-2px); border-color: rgba(51,92,255,.22); box-shadow: 0 16px 42px rgba(16,24,40,.08); }
.panel:hover { box-shadow: 0 4px 10px rgba(15,23,42,.08); }
.mini-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-size: 12px; font-weight: 750; }