收敛 PC 工作台视觉 05-27-pc-frontend-visual-consistency-wave1

client/src/index.css

@@ -23,10 +23,7 @@
   body {
     min-height: 100vh;
     min-height: -webkit-fill-available;
-    background:
-      radial-gradient(circle at 10% -8%, rgba(0, 57, 138, 0.10), transparent 30rem),
-      radial-gradient(circle at 92% 0%, rgba(19, 168, 184, 0.12), transparent 32rem),
-      linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 18rem, #eef2f6 100%);
+    background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 16rem, #eef2f6 100%);
     background-attachment: fixed;
     color: var(--color-text-primary);
     @apply font-sans antialiased selection:bg-primary selection:text-white;
@@ -48,8 +45,8 @@
   }
 
   .page-scaffold {
-    animation: page-reveal 420ms ease-out both;
-    @apply space-y-6;
+    animation: page-reveal 320ms ease-out both;
+    @apply space-y-5;
   }
 
   .workbench-hero {
@@ -58,7 +55,7 @@
     background: rgba(255, 255, 255, 0.96);
     border: 1px solid rgba(226, 232, 240, 0.92);
     border-radius: var(--radius-panel);
-    box-shadow: var(--shadow-sm);
+    box-shadow: var(--shadow-xs);
     @apply flex flex-col gap-4 px-5 py-5 md:flex-row md:items-end md:justify-between md:px-6;
   }
 
@@ -102,8 +99,8 @@
     background: var(--color-bg-surface-raised);
     border: 1px solid rgba(226, 232, 240, 0.92);
     border-radius: var(--radius-panel);
-    box-shadow: var(--shadow-sm);
-    backdrop-filter: blur(18px);
+    box-shadow: var(--shadow-xs);
+    backdrop-filter: none;
   }
 
   .card-title {
@@ -156,24 +153,24 @@
   .metric-card {
     position: relative;
     overflow: hidden;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.86));
+    background: rgba(255, 255, 255, 0.96);
     border: 1px solid rgba(226, 232, 240, 0.96);
     border-radius: var(--radius-panel);
     box-shadow: var(--shadow-xs);
-    @apply block px-5 py-5 transition duration-200 hover:-translate-y-0.5 hover:shadow-sm;
+    @apply block px-4 py-4 transition duration-150 hover:border-slate-300 hover:bg-white;
   }
 
   .metric-card::before {
     position: absolute;
     inset: 0 auto 0 0;
-    width: 4px;
+    width: 3px;
     content: "";
     background: linear-gradient(180deg, var(--color-accent-primary), rgba(19, 168, 184, 0.72));
     opacity: 0.82;
   }
 
   .metric-card--warning {
-    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.78));
+    background: rgba(255, 251, 235, 0.92);
     @apply border-amber-200;
   }
 
@@ -182,7 +179,7 @@
   }
 
   .metric-card--danger {
-    background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.76));
+    background: rgba(254, 242, 242, 0.94);
     @apply border-red-200;
   }
 
@@ -197,7 +194,7 @@
 
   .metric-card__value {
     color: var(--color-text-primary);
-    @apply mt-2 text-2xl font-semibold tracking-tight;
+    @apply mt-2 text-xl font-semibold tracking-tight;
   }
 
   .metric-card__note {
@@ -297,11 +294,11 @@
   }
 
   .portal-metric-strip {
-    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
+    @apply grid gap-3 md:grid-cols-2 xl:grid-cols-4;
   }
 
   .portal-home-grid {
-    @apply grid gap-6 xl:grid-cols-[minmax(0,2fr),minmax(320px,0.95fr)] xl:items-stretch;
+    @apply grid gap-5 xl:grid-cols-[minmax(0,2fr),minmax(320px,0.92fr)] xl:items-stretch;
   }
 
   .portal-home-grid--collaboration {
@@ -315,15 +312,14 @@
   .portal-list-card {
     background: rgba(255, 255, 255, 0.92);
     border: 1px solid rgba(226, 232, 240, 0.94);
-    border-radius: var(--radius-panel);
+    border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xs);
-    @apply block px-4 py-4 transition duration-200;
+    @apply block px-3.5 py-3.5 transition duration-150;
   }
 
   .portal-list-card:hover {
     background: #ffffff;
-    box-shadow: var(--shadow-sm);
-    transform: translateY(-1px);
+    border-color: rgba(203, 213, 225, 0.96);
   }
 
   .portal-list-card--warning {
@@ -342,17 +338,16 @@
 
   .portal-action-tile {
     min-height: 100%;
-    background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
+    background: rgba(255, 255, 255, 0.96);
     border: 1px solid rgba(226, 232, 240, 0.94);
-    border-radius: var(--radius-panel);
+    border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xs);
-    @apply px-4 py-4 text-left transition duration-200;
+    @apply px-3.5 py-3.5 text-left transition duration-150;
   }
 
   .portal-action-tile:hover {
-    box-shadow: var(--shadow-sm);
-    transform: translateY(-2px);
+    border-color: rgba(203, 213, 225, 0.96);
+    background: #ffffff;
   }
 
   .portal-action-tile--disabled {
@@ -367,9 +362,9 @@
   }
 
   .portal-action-icon {
-    background: linear-gradient(135deg, rgba(0, 57, 138, 0.12), rgba(19, 168, 184, 0.12));
+    background: rgba(0, 57, 138, 0.08);
     color: var(--color-accent-primary);
-    @apply flex size-10 items-center justify-center rounded-2xl;
+    @apply flex size-10 items-center justify-center rounded-xl;
   }
 
   .portal-action-icon--muted {
@@ -409,7 +404,7 @@
   }
 
   .portal-secondary-drawer {
-    @apply p-5 md:p-6;
+    @apply p-4 md:p-5;
   }
 
   .portal-secondary-summary {
@@ -422,7 +417,28 @@
   }
 
   .portal-secondary-drawer__body {
-    @apply mt-5 space-y-6;
+    @apply mt-4 space-y-5;
+  }
+
+  .portal-secondary-compact-grid {
+    @apply grid gap-4 xl:grid-cols-2;
+  }
+
+  .portal-compact-group {
+    @apply rounded-xl border border-slate-200 bg-white/80 px-3.5 py-3.5;
+  }
+
+  .portal-compact-group__title {
+    color: var(--color-text-primary);
+    @apply text-sm font-semibold;
+  }
+
+  .portal-compact-group__body {
+    @apply mt-3 space-y-2;
+  }
+
+  .portal-compact-row {
+    @apply flex min-h-9 items-center justify-between gap-3 rounded-lg px-2 py-1.5 text-sm text-slate-700 transition-colors hover:bg-slate-50 hover:text-slate-950;
   }
 }