使用openai对UI进行了重构

2026-02-24 11:50:51 +08:00
parent 0c97f02e51
commit 317b9c7c26
15 changed files with 695 additions and 583 deletions
@@ -66,11 +66,95 @@
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
+    background-image:
+      radial-gradient(circle at 10% 10%, hsl(var(--primary) / 0.05), transparent 35%),
+      radial-gradient(circle at 90% 0%, hsl(var(--accent-foreground) / 0.04), transparent 25%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
 }

+@layer components {
+  .ui-card {
+    @apply rounded-2xl border border-border/70 bg-card/95 shadow-sm backdrop-blur-sm;
+  }
+
+  .ui-input {
+    @apply w-full rounded-xl border border-input bg-background/75 px-3 py-2 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-ring focus:ring-2 focus:ring-ring/20;
+  }
+
+  .ui-select {
+    @apply w-full rounded-xl border border-input bg-background/75 px-3 py-2 text-sm outline-none transition-colors focus:border-ring focus:ring-2 focus:ring-ring/20;
+  }
+
+  .ui-btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition-all active:scale-[0.98];
+  }
+
+  .ui-btn-primary {
+    @apply ui-btn bg-primary text-primary-foreground hover:opacity-90 shadow-sm;
+  }
+
+  .ui-btn-secondary {
+    @apply ui-btn bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+
+  .ui-btn-danger {
+    @apply ui-btn bg-destructive text-destructive-foreground hover:opacity-90;
+  }
+
+  .ui-icon-btn {
+    @apply inline-flex h-9 w-9 items-center justify-center rounded-lg border border-transparent text-muted-foreground transition-colors hover:border-border hover:bg-muted/60 hover:text-foreground;
+  }
+
+  .ui-kbd {
+    @apply inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground;
+  }
+
+  .ui-enter {
+    animation: ui-enter 220ms ease-out both;
+  }
+
+  .ui-enter-delayed {
+    animation: ui-enter 300ms ease-out both;
+  }
+
+  .ui-float {
+    animation: ui-float 4s ease-in-out infinite;
+  }
+}
+
+@keyframes ui-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.99);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes ui-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-enter,
+  .ui-enter-delayed,
+  .ui-float,
+  .animate-in {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
 /* Editor Specific Styles for Notion-like feel */
 .ProseMirror {
  outline: none;