feat: refresh BossAI console frontend

package.json

@@ -50,6 +50,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@visactor/react-vchart": "^2.0.21",
+    "gsap": "^3.15.0",
     "marked": "^17.0.5",
     "zod": "^4.3.6"
   },

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       '@visactor/react-vchart':
         specifier: ^2.0.21
         version: 2.0.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      gsap:
+        specifier: ^3.15.0
+        version: 3.15.0
       marked:
         specifier: ^17.0.5
         version: 17.0.5
@@ -2210,6 +2213,9 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  gsap@3.15.0:
+    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
+
   hachure-fill@0.5.2:
     resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
 
@@ -5138,6 +5144,8 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
+  gsap@3.15.0: {}
+
   hachure-fill@0.5.2: {}
 
   has-symbols@1.1.0:

src/web/App.tsx

@@ -4,6 +4,7 @@ import { ToastProvider, useToast } from './components/Toast.js';
 import SearchModal from './components/SearchModal.js';
 import NotificationPanel from './components/NotificationPanel.js';
 import TooltipLayer from './components/TooltipLayer.js';
+import MotionDiv from './components/AppMotion.js';
 import { api, userApi } from './api.js';
 import { clearSession, getSessionToken } from './authSession.js';
 import {
@@ -441,7 +442,11 @@ const topNavItems = [
 ];
 function PageTransition({ children }: { children: React.ReactNode }) {
   const location = useLocation();
-  return <div key={location.pathname} className="page-enter">{children}</div>;
+  return (
+    <MotionDiv key={location.pathname} motionKey={location.pathname} className="page-enter">
+      {children}
+    </MotionDiv>
+  );
 }
 function RouteLoadingFallback() {
   return (
@@ -767,8 +772,10 @@ function AppShell() {
           </button>
         )}
         <div className="topbar-logo">
-          <img src="/logo.png" alt="BoosAPI" style={{ width: 28, height: 28, borderRadius: 6 }} />
+          <span className="topbar-logo-mark">
-          <span className="topbar-logo-text">BoosAPI</span>
+            <img src="/logo.png" alt="BossAI" />
+          </span>
+          <span className="topbar-logo-text">BossAI</span>
         </div>
         <nav className="topbar-nav">
           {currentTopNavItems.map((item) => (
@@ -900,8 +907,8 @@ function AppShell() {
             closeLabel={t('关闭导航')}
           >
             <div className="mobile-drawer-header">
-              <img src="/logo.png" alt="BoosAPI" />
+              <img src="/logo.png" alt="BossAI" />
-              <span>BoosAPI</span>
+              <span>BossAI</span>
             </div>
             <nav className="mobile-nav">
               {currentSidebarGroups.map((group) => (

src/web/components/AppMotion.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import { gsap } from 'gsap';
+
+type MotionVariant = 'page' | 'login';
+
+interface MotionDivProps extends React.HTMLAttributes<HTMLDivElement> {
+  motionKey?: string;
+  motionVariant?: MotionVariant;
+}
+
+const PAGE_TARGET_SELECTOR = [
+  ':scope > .console-hero',
+  ':scope > .page-header',
+  ':scope > .card',
+  ':scope > .mobile-card',
+  ':scope > .workflow-shell',
+  ':scope > .picture-agent-shell',
+  ':scope > .workspace-layout',
+  ':scope > .dashboard-grid',
+  ':scope > .digital-human-layout',
+  ':scope > .money-printer-layout',
+  ':scope > .about-page',
+].join(', ');
+
+const LOGIN_TARGET_SELECTOR = [
+  '.login-brand-header',
+  '.login-brand-copy-block',
+  '.login-compat-line',
+  '.login-capability-row',
+  '.login-auth-eyebrow',
+  '.login-auth-title',
+  '.login-auth-copy',
+  '.login-mode-tabs',
+  '.login-auth-panel form',
+  '.login-auth-footer',
+].join(', ');
+
+function selectMotionTargets(root: HTMLDivElement, variant: MotionVariant): Element[] {
+  const selector = variant === 'login' ? LOGIN_TARGET_SELECTOR : PAGE_TARGET_SELECTOR;
+  return Array.from(root.querySelectorAll(selector)).slice(0, variant === 'login' ? 14 : 18);
+}
+
+export default function MotionDiv({
+  children,
+  className,
+  motionKey,
+  motionVariant = 'page',
+  ...props
+}: MotionDivProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const resolvedMotionKey = motionKey || motionVariant;
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return undefined;
+
+    const mm = gsap.matchMedia();
+    mm.add(
+      {
+        reduceMotion: '(prefers-reduced-motion: reduce)',
+        isDesktop: '(min-width: 900px)',
+      },
+      (context) => {
+        const conditions = context.conditions || {};
+        if (conditions.reduceMotion) {
+          gsap.set(root, { autoAlpha: 1, clearProps: 'transform,opacity,visibility' });
+          return undefined;
+        }
+
+        const targets = selectMotionTargets(root, motionVariant);
+        const distance = motionVariant === 'login' ? 16 : 10;
+
+        const rootTween = gsap.fromTo(
+          root,
+          { autoAlpha: 0, y: Math.max(6, distance - 4) },
+          {
+            autoAlpha: 1,
+            y: 0,
+            duration: motionVariant === 'login' ? 0.46 : 0.34,
+            ease: 'power2.out',
+            clearProps: 'transform,opacity,visibility',
+          },
+        );
+
+        const targetTween = targets.length
+          ? gsap.fromTo(
+            targets,
+            { autoAlpha: 0, y: distance },
+            {
+              autoAlpha: 1,
+              y: 0,
+              duration: motionVariant === 'login' ? 0.58 : 0.42,
+              ease: 'power2.out',
+              stagger: motionVariant === 'login' ? 0.045 : 0.025,
+              delay: 0.04,
+              clearProps: 'transform,opacity,visibility',
+            },
+          )
+          : null;
+
+        return () => {
+          rootTween.kill();
+          targetTween?.kill();
+        };
+      },
+    );
+
+    return () => mm.revert();
+  }, [resolvedMotionKey, motionVariant]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={['motion-root', className].filter(Boolean).join(' ')}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

src/web/index.css

@@ -11061,3 +11061,898 @@ textarea {
     gap: 4px;
   }
 }
+
+/* ===== BossAI Console 2026 Polish ===== */
+:root {
+  --console-bg-rgb: 245 247 251;
+  --console-accent: #2f6bff;
+  --console-accent-strong: #174ee8;
+  --console-ink: #111827;
+  --console-muted-rgb: 92 103 122;
+  --console-panel: rgba(255, 255, 255, 0.84);
+  --console-panel-solid: #ffffff;
+  --console-line: rgba(28, 39, 60, 0.1);
+  --console-line-strong: rgba(28, 39, 60, 0.16);
+  --console-shadow-soft: 0 18px 48px rgba(32, 46, 73, 0.08);
+  --console-shadow-panel: 0 1px 2px rgba(32, 46, 73, 0.05), 0 18px 38px rgba(32, 46, 73, 0.06);
+  --color-primary: var(--console-accent);
+  --color-primary-hover: var(--console-accent-strong);
+  --color-primary-light: color-mix(in srgb, var(--console-accent) 10%, #fff);
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --topbar-height: 60px;
+  --sidebar-width: 236px;
+  --sidebar-collapsed-width: 68px;
+}
+
+[data-theme="dark"] {
+  --console-bg-rgb: 11 14 21;
+  --console-accent: #7ba2ff;
+  --console-accent-strong: #9bb8ff;
+  --console-ink: #f7f9ff;
+  --console-muted-rgb: 166 176 195;
+  --console-panel: rgba(18, 23, 34, 0.82);
+  --console-panel-solid: #121722;
+  --console-line: rgba(224, 231, 255, 0.1);
+  --console-line-strong: rgba(224, 231, 255, 0.18);
+  --console-shadow-soft: 0 22px 56px rgba(0, 0, 0, 0.32);
+  --console-shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.28), 0 22px 48px rgba(0, 0, 0, 0.26);
+}
+
+body {
+  background:
+    linear-gradient(180deg, rgb(var(--console-bg-rgb)) 0%, color-mix(in srgb, rgb(var(--console-bg-rgb)) 92%, var(--color-bg-card)) 100%);
+}
+
+body::before {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(rgba(47, 107, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(47, 107, 255, 0.032) 1px, transparent 1px),
+    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 34%),
+    radial-gradient(circle at 92% 8%, rgba(20, 184, 166, 0.08), transparent 29%);
+  background-size: 32px 32px, 32px 32px, auto, auto;
+  mask-image: linear-gradient(180deg, black 0%, black 52%, transparent 100%);
+}
+
+[data-theme="dark"] body::before {
+  background:
+    linear-gradient(rgba(123, 162, 255, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(123, 162, 255, 0.04) 1px, transparent 1px),
+    radial-gradient(circle at 20% 0%, rgba(80, 120, 255, 0.16), transparent 35%),
+    radial-gradient(circle at 92% 8%, rgba(20, 184, 166, 0.08), transparent 29%);
+  background-size: 34px 34px, 34px 34px, auto, auto;
+}
+
+.topbar {
+  height: var(--topbar-height);
+  padding: 0 22px;
+  border-bottom: 1px solid var(--console-line);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--console-panel-solid) 90%, transparent), color-mix(in srgb, var(--console-panel-solid) 78%, transparent));
+  backdrop-filter: blur(20px) saturate(1.25);
+  -webkit-backdrop-filter: blur(20px) saturate(1.25);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
+}
+
+[data-theme="dark"] .topbar {
+  background:
+    linear-gradient(180deg, rgba(14, 19, 29, 0.9), rgba(14, 19, 29, 0.78));
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.topbar-logo {
+  min-width: 168px;
+  gap: 11px;
+  margin-right: 20px;
+}
+
+.topbar-logo-mark {
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  border: 1px solid var(--console-line-strong);
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 90%, var(--color-primary)), var(--color-bg-card));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 10px 22px rgba(47, 107, 255, 0.12);
+}
+
+[data-theme="dark"] .topbar-logo-mark {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(0, 0, 0, 0.22);
+}
+
+.topbar-logo-mark img {
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.topbar-logo > img {
+  display: none;
+}
+
+.topbar-logo-text {
+  font-size: 16px;
+  font-weight: 820;
+  letter-spacing: 0;
+  color: var(--console-ink);
+}
+
+.topbar-nav {
+  min-width: 0;
+  gap: 3px;
+  padding: 4px;
+  border: 1px solid var(--console-line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-bg-card) 70%, transparent);
+}
+
+.topbar-nav a,
+.topbar-nav-item {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 6px 12px;
+  color: color-mix(in srgb, var(--color-text-secondary) 92%, var(--console-ink));
+  font-size: 12.5px;
+  font-weight: 680;
+}
+
+.topbar-nav a.active,
+.topbar-nav-item.active {
+  color: var(--console-ink);
+  background: var(--console-panel-solid);
+  box-shadow:
+    inset 0 0 0 1px var(--console-line),
+    0 8px 18px rgba(32, 46, 73, 0.08);
+}
+
+[data-theme="dark"] .topbar-nav a.active,
+[data-theme="dark"] .topbar-nav-item.active {
+  color: #fff;
+  box-shadow: inset 0 0 0 1px var(--console-line-strong), 0 12px 22px rgba(0, 0, 0, 0.22);
+}
+
+.topbar-icon-btn,
+.topbar-search-trigger,
+.topbar-avatar {
+  border: 1px solid var(--console-line);
+  background: color-mix(in srgb, var(--color-bg-card) 76%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
+}
+
+[data-theme="dark"] .topbar-icon-btn,
+[data-theme="dark"] .topbar-search-trigger,
+[data-theme="dark"] .topbar-avatar {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.topbar-icon-btn {
+  color: var(--color-text-secondary);
+}
+
+.topbar-icon-btn:hover,
+.topbar-search-trigger:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--color-primary) 26%, var(--console-line));
+  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card));
+}
+
+.topbar-search-trigger {
+  min-width: 188px;
+  border-radius: 999px;
+}
+
+.topbar-search-kbd {
+  border-color: var(--console-line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-bg) 74%, var(--color-bg-card));
+}
+
+.topbar-avatar {
+  width: 34px;
+  height: 34px;
+  overflow: hidden;
+}
+
+.app-layout {
+  background: transparent;
+}
+
+.sidebar {
+  padding: 16px 12px;
+  border-right: 1px solid var(--console-line);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--console-panel-solid) 82%, transparent), color-mix(in srgb, var(--console-panel-solid) 68%, transparent));
+  backdrop-filter: blur(18px) saturate(1.08);
+  -webkit-backdrop-filter: blur(18px) saturate(1.08);
+}
+
+[data-theme="dark"] .sidebar {
+  background: linear-gradient(180deg, rgba(14, 19, 29, 0.72), rgba(14, 19, 29, 0.58));
+}
+
+.sidebar-group {
+  padding-bottom: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--console-line) 70%, transparent);
+}
+
+.sidebar-group:last-of-type {
+  border-bottom: 0;
+}
+
+.sidebar-group-label {
+  padding: 8px 11px 6px;
+  color: color-mix(in srgb, var(--color-text-muted) 88%, var(--color-primary));
+  font-size: 10.5px;
+  font-weight: 780;
+}
+
+.sidebar-item {
+  min-height: 38px;
+  margin: 2px 0;
+  padding: 9px 11px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  color: color-mix(in srgb, var(--color-text-secondary) 90%, var(--console-ink));
+  font-weight: 640;
+}
+
+.sidebar-item:hover {
+  border-color: var(--console-line);
+  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card));
+  transform: translateX(1px);
+}
+
+.sidebar-item.active {
+  color: var(--console-ink);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)), color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card)));
+  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--console-line));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 10px 24px rgba(47, 107, 255, 0.08);
+}
+
+[data-theme="dark"] .sidebar-item.active {
+  color: #fff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 26px rgba(0, 0, 0, 0.18);
+}
+
+.sidebar-item.active::before {
+  left: 6px;
+  width: 3px;
+  height: 16px;
+  border-radius: 999px;
+}
+
+.sidebar-item.active .sidebar-item-icon,
+.sidebar-item:hover .sidebar-item-icon {
+  opacity: 1;
+  color: var(--color-primary);
+}
+
+.sidebar-collapse-btn {
+  min-height: 38px;
+  border: 1px solid var(--console-line);
+  background: color-mix(in srgb, var(--color-bg-card) 68%, transparent);
+}
+
+.main-content {
+  padding: 24px;
+}
+
+.motion-root {
+  will-change: transform, opacity;
+}
+
+.page-enter {
+  animation: none;
+}
+
+.card,
+.mobile-card,
+.modal-content,
+.centered-modal,
+.settings-card,
+.dashboard-panel,
+.workspace-detail,
+.picture-agent-panel,
+.picture-agent-board,
+.picture-agent-job-panel,
+.digital-human-panel,
+.money-printer-panel,
+.about-section,
+.about-hero,
+.workflow-empty-panel {
+  border: 1px solid var(--console-line);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--console-panel-solid) 90%, transparent), color-mix(in srgb, var(--console-panel-solid) 78%, transparent));
+  box-shadow: var(--console-shadow-panel);
+}
+
+.card:hover,
+.mobile-card:hover,
+.model-card:hover,
+.workspace-asset-card:hover {
+  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--console-line));
+  box-shadow: var(--console-shadow-soft);
+}
+
+.btn {
+  min-height: 34px;
+  border-radius: 999px;
+  font-weight: 720;
+  letter-spacing: 0;
+}
+
+.btn-primary {
+  border: 1px solid color-mix(in srgb, var(--color-primary) 82%, #07101f);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 88%, #fff), var(--color-primary-hover));
+  box-shadow: 0 12px 24px color-mix(in srgb, var(--color-primary) 22%, transparent);
+}
+
+.btn-primary:hover {
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary-hover) 88%, #fff), var(--color-primary-hover));
+}
+
+.btn-ghost,
+.btn-soft-primary {
+  border-color: var(--console-line);
+  background: color-mix(in srgb, var(--color-bg-card) 78%, transparent);
+}
+
+.data-table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.data-table thead {
+  background: color-mix(in srgb, var(--color-bg) 72%, var(--color-bg-card));
+}
+
+.data-table th {
+  padding-block: 11px;
+  border-bottom-color: var(--console-line-strong);
+  color: color-mix(in srgb, var(--color-text-muted) 86%, var(--console-ink));
+  font-size: 11px;
+  font-weight: 780;
+  letter-spacing: 0;
+}
+
+.data-table td {
+  border-bottom-color: var(--console-line);
+}
+
+.data-table tbody tr:hover {
+  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+}
+
+.console-hero {
+  padding: 22px;
+  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--console-line));
+  border-radius: 22px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 11%, var(--console-panel-solid)) 0%, color-mix(in srgb, var(--console-panel-solid) 88%, transparent) 48%, color-mix(in srgb, #14b8a6 7%, var(--console-panel-solid)) 100%);
+  box-shadow: var(--console-shadow-panel);
+}
+
+.console-hero::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 24%, rgba(255, 255, 255, 0.18) 78%, transparent),
+    linear-gradient(rgba(47, 107, 255, 0.055) 1px, transparent 1px);
+  background-size: auto, 100% 20px;
+}
+
+[data-theme="dark"] .console-hero::before {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 24%, rgba(255, 255, 255, 0.025) 78%, transparent),
+    linear-gradient(rgba(123, 162, 255, 0.06) 1px, transparent 1px);
+  background-size: auto, 100% 20px;
+}
+
+.console-kicker {
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.console-hero h1,
+.page-header h1 {
+  letter-spacing: 0;
+}
+
+.console-hero-rail > div {
+  border-color: var(--console-line);
+  background: color-mix(in srgb, var(--color-bg-card) 72%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.model-card {
+  border: 1px solid var(--console-line);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 92%, transparent), color-mix(in srgb, var(--color-bg-card) 80%, var(--color-bg)));
+  box-shadow: var(--shadow-card);
+}
+
+.model-card-avatar {
+  border: 1px solid var(--console-line);
+  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-card));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
+}
+
+.workflow-shell {
+  border: 1px solid var(--console-line);
+  border-radius: 18px;
+  overflow: hidden;
+  background: var(--console-panel-solid);
+  box-shadow: var(--console-shadow-panel);
+}
+
+.workflow-toolbar {
+  border-bottom: 1px solid var(--console-line);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 92%, transparent), color-mix(in srgb, var(--color-bg-card) 76%, var(--color-bg)));
+}
+
+.workflow-frame-wrap {
+  background:
+    linear-gradient(rgba(47, 107, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(47, 107, 255, 0.03) 1px, transparent 1px),
+    var(--color-bg);
+  background-size: 28px 28px;
+}
+
+.picture-agent-shell,
+.workspace-layout,
+.digital-human-layout,
+.money-printer-layout {
+  gap: 18px;
+}
+
+.picture-agent-panel,
+.picture-agent-board,
+.workspace-detail,
+.digital-human-panel,
+.money-printer-panel {
+  border-radius: 18px;
+}
+
+.picture-agent-field textarea,
+.picture-agent-field select,
+.picture-agent-field input,
+.picture-agent-select,
+.workspace-search,
+.login-auth-input,
+.modern-select-trigger,
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="url"],
+select,
+textarea {
+  border-color: var(--console-line-strong);
+  background: color-mix(in srgb, var(--color-bg-card) 80%, var(--color-bg));
+}
+
+.picture-agent-field textarea:focus,
+.picture-agent-field select:focus,
+.picture-agent-field input:focus,
+.picture-agent-select:focus,
+.workspace-search:focus,
+.login-auth-input:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: color-mix(in srgb, var(--color-primary) 54%, var(--console-line));
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+
+.workspace-asset-card {
+  border-color: var(--console-line);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 92%, transparent), color-mix(in srgb, var(--color-bg-card) 78%, var(--color-bg)));
+  box-shadow: var(--shadow-card);
+}
+
+.workspace-select-mark {
+  border-color: var(--console-line-strong);
+  background: var(--color-bg-card);
+}
+
+.workspace-select:has(input:checked) .workspace-select-mark {
+  background: var(--color-primary);
+}
+
+.workspace-thumb,
+.picture-agent-image-frame,
+.picture-agent-history img {
+  background:
+    linear-gradient(45deg, color-mix(in srgb, var(--color-bg) 74%, var(--color-bg-card)) 25%, transparent 25%),
+    linear-gradient(-45deg, color-mix(in srgb, var(--color-bg) 74%, var(--color-bg-card)) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-bg) 74%, var(--color-bg-card)) 75%),
+    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-bg) 74%, var(--color-bg-card)) 75%),
+    var(--color-bg-card);
+  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  background-size: 16px 16px;
+}
+
+.login-shell {
+  min-height: 100dvh;
+  padding: clamp(18px, 3vw, 34px);
+  background:
+    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 32%),
+    radial-gradient(circle at 90% 18%, rgba(20, 184, 166, 0.12), transparent 28%),
+    linear-gradient(180deg, rgb(var(--console-bg-rgb)), color-mix(in srgb, rgb(var(--console-bg-rgb)) 92%, var(--color-bg-card)));
+}
+
+.login-surface {
+  width: min(1180px, 100%);
+  grid-template-columns: minmax(520px, 1.08fr) minmax(380px, 0.92fr);
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid var(--console-line-strong);
+  border-radius: 28px;
+  background: color-mix(in srgb, var(--console-panel-solid) 84%, transparent);
+  box-shadow: 0 36px 92px rgba(20, 38, 68, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(22px) saturate(1.12);
+  -webkit-backdrop-filter: blur(22px) saturate(1.12);
+}
+
+[data-theme="dark"] .login-surface {
+  box-shadow: 0 36px 92px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.login-brand-panel {
+  min-height: 650px;
+  padding: clamp(30px, 4vw, 48px);
+  border: 1px solid var(--console-line);
+  border-radius: 22px;
+  background:
+    linear-gradient(140deg, color-mix(in srgb, var(--color-primary) 13%, var(--color-bg-card)) 0%, color-mix(in srgb, var(--color-bg-card) 80%, transparent) 54%, color-mix(in srgb, #14b8a6 9%, var(--color-bg-card)) 100%);
+}
+
+.login-brand-panel::before,
+.login-brand-panel::after {
+  display: block;
+}
+
+.login-brand-panel::before {
+  inset: auto auto 28px 34px;
+  width: 180px;
+  height: 180px;
+  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
+  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 12%, transparent) 0 1px, transparent 1px 18px);
+  opacity: 0.7;
+  border-radius: 999px;
+}
+
+.login-brand-panel::after {
+  inset: 34px 34px auto auto;
+  width: 160px;
+  height: 160px;
+  border: 1px solid color-mix(in srgb, #14b8a6 18%, transparent);
+  background: radial-gradient(circle, rgba(20, 184, 166, 0.14), transparent 68%);
+  border-radius: 34px;
+  transform: rotate(8deg);
+}
+
+.brand-mark-frame {
+  border-color: var(--console-line-strong);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary)), var(--color-bg-card));
+}
+
+.brand-mark-frame-hero {
+  width: 94px;
+  height: 94px;
+  border-radius: 25px;
+}
+
+.brand-mark-canvas {
+  border-radius: 19px;
+}
+
+.login-brand-name {
+  color: var(--console-ink);
+  font-size: clamp(34px, 4vw, 52px);
+  font-weight: 860;
+}
+
+.login-brand-kicker,
+.login-auth-eyebrow {
+  color: var(--color-primary);
+  font-weight: 820;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.login-brand-copy {
+  max-width: 46ch;
+  color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--console-ink));
+  font-size: clamp(16px, 1.45vw, 19px);
+  line-height: 1.78;
+}
+
+.login-compat-line {
+  padding: 11px 13px;
+  border: 1px solid var(--console-line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-bg-card) 62%, transparent);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+}
+
+.login-metric-grid {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  max-width: 560px;
+}
+
+.login-metric-card {
+  min-height: 84px;
+  display: grid;
+  align-content: center;
+  gap: 6px;
+  padding: 14px;
+  border: 1px solid var(--console-line);
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--color-bg-card) 66%, transparent);
+}
+
+.login-metric-card strong {
+  color: var(--console-ink);
+  font-family: var(--font-mono);
+  font-size: 21px;
+  line-height: 1;
+}
+
+.login-metric-card span {
+  color: var(--color-text-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.login-capability-list {
+  border-top-color: var(--console-line);
+}
+
+.login-capability-row {
+  border-bottom-color: var(--console-line);
+}
+
+.login-capability-index {
+  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--console-line));
+  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg-card));
+  color: var(--color-primary);
+}
+
+.login-capability-title {
+  color: var(--console-ink);
+  font-size: 16px;
+}
+
+.login-auth-stage {
+  border: 1px solid var(--console-line);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 70%, var(--color-bg-card)), color-mix(in srgb, var(--color-bg-card) 72%, transparent));
+}
+
+.login-auth-panel {
+  width: min(100%, 410px);
+  padding: 34px;
+  border: 1px solid var(--console-line-strong);
+  border-radius: 20px;
+  background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
+  box-shadow: var(--console-shadow-panel);
+}
+
+.login-auth-title {
+  color: var(--console-ink);
+  font-size: clamp(30px, 3vw, 38px);
+  letter-spacing: 0;
+}
+
+.login-mode-tabs {
+  border-color: var(--console-line);
+  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
+}
+
+.login-mode-tab {
+  color: var(--color-text-secondary);
+}
+
+.login-mode-tab.active {
+  color: var(--console-ink);
+  background: var(--color-bg-card);
+  box-shadow: 0 9px 18px rgba(32, 46, 73, 0.08);
+}
+
+.login-auth-input {
+  min-height: 46px;
+  border-radius: 12px;
+}
+
+.login-auth-submit {
+  min-height: 46px;
+  border-radius: 12px;
+}
+
+.login-auth-footer a {
+  font-weight: 720;
+}
+
+.login-shell[data-variant="user"] .login-surface {
+  width: min(560px, 100%);
+  grid-template-columns: 1fr;
+}
+
+.login-shell[data-variant="user"] .login-brand-panel {
+  min-height: 168px;
+}
+
+.login-shell[data-variant="user"] .login-metric-grid,
+.login-shell[data-variant="user"] .login-capability-list,
+.login-shell[data-variant="user"] .login-compat-line,
+.login-shell[data-variant="user"] .login-brand-copy-block {
+  display: none;
+}
+
+.login-shell[data-variant="user"] .login-brand-header {
+  justify-content: flex-start !important;
+}
+
+.login-shell[data-variant="user"] .login-brand-summary {
+  text-align: left !important;
+}
+
+.mobile-drawer-header {
+  border-bottom: 1px solid var(--console-line);
+}
+
+.mobile-nav-item {
+  border: 1px solid transparent;
+  border-radius: 12px;
+}
+
+.mobile-nav-item.active {
+  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--console-line));
+  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card));
+}
+
+@media (max-width: 1180px) {
+  .topbar-logo {
+    min-width: auto;
+  }
+
+  .topbar-nav {
+    border-color: transparent;
+    background: transparent;
+  }
+
+  .topbar-nav a,
+  .topbar-nav-item {
+    padding-inline: 9px;
+  }
+
+  .login-surface {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand-panel {
+    min-height: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --topbar-height: 52px;
+  }
+
+  body::before {
+    background-size: 26px 26px, 26px 26px, auto, auto;
+  }
+
+  .main-content {
+    padding: 14px;
+  }
+
+  .topbar {
+    padding-inline: 12px;
+  }
+
+  .topbar-logo-mark {
+    width: 30px;
+    height: 30px;
+    border-radius: 10px;
+  }
+
+  .topbar-logo-text {
+    font-size: 14px;
+  }
+
+  .topbar-search-trigger {
+    min-width: 38px;
+  }
+
+  .console-hero {
+    grid-template-columns: 1fr;
+    padding: 18px;
+  }
+
+  .console-hero-rail {
+    min-width: 0;
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .login-shell {
+    align-items: flex-start;
+    padding: 12px;
+    overflow-y: auto;
+  }
+
+  .login-surface {
+    margin: auto 0;
+    padding: 10px;
+    border-radius: 22px;
+  }
+
+  .login-brand-panel {
+    padding: 22px !important;
+    border-radius: 17px;
+  }
+
+  .login-brand-header {
+    gap: 14px;
+  }
+
+  .brand-mark-frame-hero {
+    width: 64px !important;
+    height: 64px !important;
+    border-radius: 18px;
+  }
+
+  .login-brand-name {
+    font-size: 30px !important;
+  }
+
+  .login-auth-stage {
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .login-auth-panel {
+    width: 100%;
+    padding: 24px;
+    border-radius: 17px;
+  }
+
+  .login-metric-grid {
+    grid-template-columns: 1fr;
+  }
+}

src/web/pages/auth/LoginShell.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import MotionDiv from '../../components/AppMotion.js';
 
 export type LoginShellVariant = 'admin' | 'user';
 
@@ -16,9 +17,15 @@ interface LoginShellProps {
 }
 
 const ADMIN_CAPABILITY_KEYS: Array<{ titleKey: string; descKey: string }> = [
-  { titleKey: '统一代理网关', descKey: '一个 Key、一个入口，兼容 OpenAI / Claude 下游格式' },
+  { titleKey: '统一 API 网关', descKey: 'OpenAI / Claude / 图像 / 视频模型统一接入、统一计费' },
-  { titleKey: '自动模型发现', descKey: '上游新增模型自动出现在模型列表，零配置路由生成' },
+  { titleKey: '工作流生产台', descKey: '连接 Comfy Cloud、RunningHub 与自有 API，把复杂流程产品化' },
-  { titleKey: '智能路由引擎', descKey: '按成本、延迟、成功率自动选择最优通道，故障自动转移' },
+  { titleKey: '智能路由引擎', descKey: '按成本、延迟、成功率选择通道，失败自动切换' },
+];
+
+const LOGIN_METRICS: Array<{ valueKey: string; labelKey: string }> = [
+  { valueKey: '99.9%', labelKey: '网关可用性目标' },
+  { valueKey: '4+', labelKey: '多模态生产入口' },
+  { valueKey: '/v1', labelKey: '统一兼容入口' },
 ];
 
 export default function LoginShell({
@@ -33,7 +40,7 @@ export default function LoginShell({
 }: LoginShellProps) {
   return (
     <div className="login-shell" data-variant={variant}>
-      <div className="login-surface animate-scale-in">
+      <MotionDiv className="login-surface animate-scale-in" motionVariant="login" motionKey={variant}>
         <section
           className="login-brand-panel login-brand-panel-light"
           style={variant === 'user' ? { padding: '28px 24px' } : undefined}
@@ -51,9 +58,9 @@ export default function LoginShell({
               className="login-brand-summary"
               style={variant === 'user' ? { textAlign: 'center' } : undefined}
             >
-              <div className="login-brand-name">BoosAPI</div>
+              <div className="login-brand-name">BossAI</div>
               <div className="login-brand-kicker">
-                {variant === 'user' ? t('用户登录') : t('AI 应用平台')}
+                {variant === 'user' ? t('创作者工作台') : t('多模型多模态 AI 应用平台')}
               </div>
             </div>
           </div>
@@ -62,11 +69,19 @@ export default function LoginShell({
             <>
               <div className="login-brand-copy-block">
                 <p className="login-brand-copy">
-                  {t('聚合多模型、多模态、工作流与智能路由，把对话、生图、视频和数字人生产放进一个统一平台。')}
+                  {t('聚合对话、生图、视频、数字人与工作流编排，把 API 中转、模型路由和内容生产放进一套可运营的平台。')}
                 </p>
               </div>
               <div className="login-compat-line">
-                {t('兼容 New API / One API / OneHub / DoneHub / Veloera / AnyRouter / Sub2API')}
+                {t('兼容 OpenAI / Claude Messages / Comfy Cloud / RunningHub / 火山方舟等多类上游')}
+              </div>
+              <div className="login-metric-grid" aria-label={t('平台能力指标')}>
+                {LOGIN_METRICS.map((metric) => (
+                  <div key={metric.labelKey} className="login-metric-card">
+                    <strong>{t(metric.valueKey)}</strong>
+                    <span>{t(metric.labelKey)}</span>
+                  </div>
+                ))}
               </div>
               <div className="login-capability-list">
                 {ADMIN_CAPABILITY_KEYS.map((feature, index) => (
@@ -98,7 +113,7 @@ export default function LoginShell({
             {footer && <div className="login-auth-footer">{footer}</div>}
           </div>
         </section>
-      </div>
+      </MotionDiv>
     </div>
   );
 }