重构前端 Wave0-2 体验基线（05-28-frontend-ux-redesign）

client/src/index.css

@@ -23,7 +23,8 @@
   body {
     min-height: 100vh;
     min-height: -webkit-fill-available;
-    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 16rem, #eef2f6 100%);
+    background:
+      linear-gradient(180deg, #f8fafc 0%, #f3f6f8 22rem, #eef2f6 100%);
     background-attachment: fixed;
     color: var(--color-text-primary);
     @apply font-sans antialiased selection:bg-primary selection:text-white;
@@ -40,8 +41,24 @@
 }
 
 @layer components {
+  .app-shell {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76)),
+      var(--color-bg-canvas);
+  }
+
+  .app-shell-sidebar {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 10px 0 26px rgba(15, 23, 42, 0.052);
+  }
+
+  .app-shell-main {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(241, 245, 249, 0.36));
+  }
+
   .layout-container {
-    @apply mx-auto w-full px-0 sm:px-1 lg:px-2;
+    @apply mx-auto w-full max-w-[1680px] px-0 sm:px-1 lg:px-2;
   }
 
   .page-scaffold {
@@ -49,6 +66,92 @@
     @apply space-y-4 md:space-y-5;
   }
 
+  .page-header-shell {
+    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
+    @apply flex flex-col gap-3 pb-3 md:flex-row md:items-end md:justify-between;
+  }
+
+  .page-header-shell__eyebrow {
+    color: var(--color-accent-primary);
+    @apply text-xs font-bold uppercase;
+  }
+
+  .page-header-shell__title {
+    color: var(--color-text-primary);
+    @apply mt-1 text-2xl font-semibold md:text-[1.7rem];
+  }
+
+  .page-header-shell__subtitle {
+    color: var(--color-text-secondary);
+    @apply mt-1.5 max-w-3xl text-sm leading-6;
+  }
+
+  .page-header-shell__actions {
+    @apply flex shrink-0 flex-wrap items-center gap-2 md:justify-end;
+  }
+
+  .app-topbar {
+    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
+    background: rgba(255, 255, 255, 0.93);
+    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
+    backdrop-filter: blur(16px);
+  }
+
+  .app-command-button {
+    border-color: rgba(203, 213, 225, 0.96);
+    background: rgba(248, 250, 252, 0.92);
+    @apply border;
+  }
+
+  .sidebar-focus-card {
+    border: 1px solid rgba(203, 213, 225, 0.88);
+    background:
+      linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.88));
+    @apply overflow-hidden rounded-lg px-3.5 py-3 text-sm;
+  }
+
+  .nav-section {
+    @apply space-y-1.5;
+  }
+
+  .nav-section__label {
+    color: var(--color-text-tertiary);
+    @apply px-3 text-[11px] font-bold uppercase;
+  }
+
+  .nav-link-item {
+    @apply flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm transition duration-150;
+  }
+
+  .nav-link-item--active {
+    background: rgba(0, 57, 138, 0.08);
+    color: var(--color-accent-primary);
+    box-shadow: inset 3px 0 0 var(--color-accent-primary);
+  }
+
+  .nav-link-item--idle {
+    color: var(--color-text-secondary);
+    @apply hover:bg-slate-50 hover:text-slate-950;
+  }
+
+  .nav-link-item__icon {
+    @apply flex size-8 shrink-0 items-center justify-center rounded-md text-[19px] transition-colors;
+  }
+
+  .nav-link-item--active .nav-link-item__icon {
+    background: rgba(255, 255, 255, 0.9);
+    color: var(--color-accent-primary);
+  }
+
+  .nav-link-item--idle .nav-link-item__icon {
+    background: rgba(241, 245, 249, 0.82);
+    color: var(--color-text-tertiary);
+  }
+
+  .nav-link-item--idle:hover .nav-link-item__icon {
+    color: var(--color-accent-primary);
+  }
+
   .auth-shell {
     background:
       radial-gradient(circle at 20% 12%, rgba(0, 57, 138, 0.10), transparent 26rem),
@@ -321,6 +424,28 @@
     @apply block px-3.5 py-3.5 transition duration-150 hover:border-slate-300 hover:bg-white;
   }
 
+  .ux-step-list {
+    @apply grid gap-2;
+  }
+
+  .ux-step-item {
+    border-color: rgba(226, 232, 240, 0.94);
+    background: rgba(248, 250, 252, 0.84);
+    @apply flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm;
+  }
+
+  .ux-step-item__index {
+    background: rgba(0, 57, 138, 0.08);
+    color: var(--color-accent-primary);
+    @apply flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold;
+  }
+
+  .ux-command-note {
+    border-color: rgba(203, 213, 225, 0.9);
+    background: rgba(248, 250, 252, 0.82);
+    @apply rounded-lg border px-3 py-2 text-xs leading-5 text-slate-600;
+  }
+
   .metric-card::before {
     position: absolute;
     inset: 0 auto 0 0;