feat(console): 参考 Studio Admin 的灰阶技术感视觉改造（HeroUI 换皮，不换组件库）

frontend/index.html

@@ -19,9 +19,6 @@
     <meta name="twitter:title" content="CLI2API" />
     <meta name="twitter:description" content="Qoder CLI → OpenAI-compatible API. Self-hosted gateway." />
     <meta name="twitter:image" content="/og-card.svg" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

frontend/package.json

@@ -11,6 +11,8 @@
     "sync": "npm run build && node ./scripts/sync-static.mjs"
   },
   "dependencies": {
+    "@fontsource-variable/geist": "^5.3.0",
+    "@fontsource-variable/geist-mono": "^5.3.0",
     "@heroui/react": "^3.2.4",
     "@heroui/styles": "^3.2.4",
     "@phosphor-icons/react": "^2.1.10",

frontend/src/components/account/AccountCard.tsx

@@ -186,15 +186,15 @@ export function AccountCard({
       data-state={state}
       className="account-card overflow-hidden p-0"
     >
-      <Card.Header className="flex-row items-start justify-between gap-2.5 px-3 pt-2.5 pb-1.5">
+      <Card.Header className="flex-row items-start justify-between gap-2.5 px-4 pt-3.5 pb-2">
         <div className="flex min-w-0 items-center gap-2.5">
-          <div className="flex size-8 shrink-0 items-center justify-center rounded-xl border border-border bg-surface-secondary">
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-surface-tertiary">
             <ProviderMark provider={account.provider} size={20} />
           </div>
           <div className="min-w-0">
             <div className="flex min-w-0 items-center gap-2">
               <Card.Title className="truncate text-[13px] leading-5 tracking-[-0.01em]">{account.name || account.id}</Card.Title>
-              <span className="shrink-0 rounded-md bg-surface-secondary px-1.5 py-0.5 text-[10px] text-foreground/65">{provider}</span>
+              <span className="shrink-0 rounded-full border border-border px-1.5 py-px text-[10px] text-muted">{provider}</span>
             </div>
             <Card.Description className="mono truncate text-[10px] leading-4 text-foreground/60" title={`${account.id}${account.remote_uid ? ` · UID ${account.remote_uid}` : ''}`}>
               {account.remote_uid ? `UID ${account.remote_uid}` : account.id}
@@ -245,7 +245,7 @@ export function AccountCard({
         </div>
       </Card.Header>
 
-      <Card.Content className="gap-1.5 px-3 pb-2">
+      <Card.Content className="gap-1.5 px-4 pb-3">
         <RuntimeMeter state={state} stateCopy={stateCopy} t={t} />
 
         {account.quota ? (
@@ -358,7 +358,7 @@ export function AccountCard({
       ) : null}
 
       {onCheckin ? (
-        <div className="flex items-start justify-between gap-3 border-t border-separator px-3 py-1.5 text-[11px] text-muted">
+        <div className="flex items-start justify-between gap-3 border-t border-separator px-4 py-2 text-[11px] text-muted">
           <Tooltip>
             <Tooltip.Trigger>
               <span className="flex cursor-help items-center gap-2">
@@ -381,7 +381,7 @@ export function AccountCard({
         </div>
       ) : null}
 
-      <Card.Footer className="flex flex-wrap items-center gap-1.5 border-t border-separator px-3 py-2">
+      <Card.Footer className="flex flex-wrap items-center gap-1.5 border-t border-separator bg-surface-secondary px-4 py-2">
         {onRefresh ? (
           <Tooltip>
             <Tooltip.Trigger>

frontend/src/components/layout/AppHeader.tsx

@@ -24,15 +24,15 @@ export function AppHeader({
 
   return (
     <header className="relative z-20 shrink-0 border-b border-separator bg-background">
-      <div className="mx-auto flex w-full max-w-[1480px] items-center gap-4 px-4 py-3 sm:px-6 lg:px-8">
+      <div className="mx-auto flex w-full max-w-[1480px] items-center gap-4 px-4 py-2 sm:px-6 lg:px-8">
         <Button isIconOnly size="sm" variant="ghost" className="lg:hidden" onPress={onMenu} aria-label={t('menu')}>
           <List size={17} />
         </Button>
 
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-baseline gap-3">
             <span className="status-dot translate-y-[-1px]" data-state={ready ? 'ok' : 'danger'} />
-            <h1 className="truncate text-2xl font-semibold tracking-[-0.035em]">{title}</h1>
+            <h1 className="truncate text-lg font-semibold tracking-[-0.02em]">{title}</h1>
             <p className="hidden truncate text-sm text-muted xl:block">{desc}</p>
           </div>
         </div>

frontend/src/components/layout/AppSidebar.tsx

@@ -68,7 +68,7 @@ function NavList({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: (
           {collapsed ? (
             <Separator className="mx-auto mb-1 w-6" />
           ) : (
-            <span className="px-3 pb-1.5 text-[10px] font-semibold tracking-[0.12em] text-muted uppercase">{group.label}</span>
+            <span className="px-3 pb-1 text-xs font-medium text-muted">{group.label}</span>
           )}
           {nav.filter((item) => item.section === group.key).map((item) => {
             const Icon = item.icon
@@ -80,12 +80,12 @@ function NavList({ collapsed, onNavigate }: { collapsed: boolean; onNavigate?: (
                 onClick={onNavigate}
                 aria-label={t(item.key)}
                 title={collapsed ? t(item.key) : undefined}
-                className={({ isActive }) => `group/navitem relative flex items-center gap-3 rounded-xl py-2.5 text-[14px] transition-colors will-change-transform ${collapsed ? 'mx-auto w-10 justify-center px-0' : 'px-3'} ${isActive ? 'bg-surface-secondary font-semibold text-foreground' : 'font-medium text-muted hover:bg-surface-secondary hover:text-foreground'}`}
+                className={({ isActive }) => `group/navitem relative flex items-center gap-2.5 rounded-lg py-1.5 text-[13px] transition-colors will-change-transform ${collapsed ? 'mx-auto w-10 justify-center px-0' : 'px-3'} ${isActive ? 'bg-default font-medium text-foreground' : 'font-normal text-muted hover:bg-default hover:text-foreground'}`}
                 onMouseDown={(event) => pressScale(event.currentTarget)}
               >
                 {({ isActive }) => (
                   <>
-                    <span className="inline-flex shrink-0" data-nav-icon><Icon size={18} weight={isActive ? 'fill' : 'regular'} /></span>
+                    <span className="inline-flex shrink-0" data-nav-icon><Icon size={16} weight={isActive ? 'fill' : 'regular'} /></span>
                     {!collapsed && <span className="truncate" data-nav-label>{t(item.key)}</span>}
                     {collapsed && <span className="pointer-events-none absolute left-full z-50 ml-2 invisible whitespace-nowrap rounded-lg bg-foreground px-2 py-1 text-xs font-medium text-background opacity-0 shadow-overlay transition-opacity duration-150 group-hover/navitem:visible group-hover/navitem:opacity-100">{t(item.key)}</span>}
                   </>

frontend/src/components/ui/FilterToggle.tsx

@@ -67,11 +67,11 @@ export function FilterToggle({
   }, [value, options])
 
   return (
-    <div ref={wrapRef} className={`relative inline-flex ${className ?? ''}`}>
+    <div ref={wrapRef} className={`filter-toggle relative inline-flex ${className ?? ''}`}>
       <span
         ref={pillRef}
         aria-hidden
-        className="pointer-events-none absolute left-0 top-0 rounded-3xl bg-[var(--accent-soft)] opacity-0"
+        className="filter-toggle__pill pointer-events-none absolute left-0 top-0 opacity-0"
       />
       <ToggleButtonGroup
         aria-label={ariaLabel}

frontend/src/i18n/messages.ts

@@ -672,6 +672,7 @@ export const messages: Record<Lang, Dict> = {
     disabled: 'Disabled',
     delete: 'Delete',
     holdToDelete: 'Hold to delete',
+    trendHalfHint: 'Second half of the window vs the first half',
     toastRefreshingAccount: 'Refreshing account…',
     toastAccountRefreshed: 'Account refreshed',
     toastRefreshingCredits: 'Refreshing credits…',
@@ -1386,6 +1387,7 @@ export const messages: Record<Lang, Dict> = {
     disabled: '已停用',
     delete: '删除',
     holdToDelete: '按住删除',
+    trendHalfHint: '所选时间窗口后半段对比前半段',
     toastRefreshingAccount: '正在刷新账号…',
     toastAccountRefreshed: '账号已刷新',
     toastRefreshingCredits: '正在刷新积分…',