feat: 更新色彩系统定义并修复组件类型

- 添加科技蓝、紫色、青色色彩系列 - 更新中性色系列 - 添加渐变色定义 - 创建 GlassCard 组件支持 variant 属性 - 更新 Input 组件支持 label 和 error 属性 - 更新 Textarea 组件支持 label 和 error 属性 - 安装 @radix-ui/react-dialog 依赖
2026-02-22 15:03:10 +08:00
parent 59cef4fd5f
commit f88020ee5e
6 changed files with 210 additions and 46 deletions
@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const glassCardVariants = cva(
+  "rounded-xl border backdrop-blur-xl text-[var(--color-text-primary)] transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-[var(--color-border-primary)] bg-[var(--color-bg-tertiary)]/80 hover:border-[var(--color-tech-blue)] hover:shadow-[0_0_30px_rgba(0,217,255,0.15)] hover:-translate-y-1",
+        elevated:
+          "border-[var(--color-border-primary)] bg-[var(--color-bg-tertiary)]/80 shadow-lg hover:border-[var(--color-tech-blue)] hover:shadow-xl hover:shadow-[0_0_30px_rgba(0,217,255,0.15)] hover:-translate-y-1",
+        outline:
+          "border-[var(--color-border-primary)] bg-transparent hover:border-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]/50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface GlassCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof glassCardVariants> {}
+
+const GlassCard = React.forwardRef<HTMLDivElement, GlassCardProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(glassCardVariants({ variant, className }))}
+      {...props}
+    />
+  )
+)
+GlassCard.displayName = "GlassCard"
+
+export { GlassCard, glassCardVariants }
@@ -1,22 +1,48 @@
 import * as React from "react"
-
 import { cn } from "@/lib/utils"

-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "file:text-foreground placeholder:text-gray-500 selection:bg-[var(--color-tech-blue)] selection:text-white h-10 w-full min-w-0 rounded-lg border border-gray-700 bg-[var(--color-bg-tertiary)] px-4 py-2 text-base text-white shadow-sm transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-[var(--color-tech-blue)] focus-visible:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 focus-visible:shadow-lg focus-visible:shadow-[var(--color-tech-blue)]/20",
-        "hover:border-gray-600",
-        "aria-invalid:ring-red-500/20 aria-invalid:border-red-500",
-        className
-      )}
-      {...props}
-    />
-  )
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
 }

+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, label, error, id, ...props }, ref) => {
+    const inputId = id || React.useId()
+    
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2"
+          >
+            {label}
+            {props.required && <span className="text-[var(--color-brand-primary)] ml-1">*</span>}
+          </label>
+        )}
+        <input
+          type={type}
+          id={inputId}
+          data-slot="input"
+          className={cn(
+            "file:text-foreground placeholder:text-[var(--color-text-muted)] selection:bg-[var(--color-tech-blue)] selection:text-white h-10 w-full min-w-0 rounded-lg border border-[var(--color-border-primary)] bg-[var(--color-bg-tertiary)] px-4 py-2 text-base text-[var(--color-text-primary)] shadow-sm transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "focus-visible:border-[var(--color-tech-blue)] focus-visible:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 focus-visible:shadow-lg focus-visible:shadow-[var(--color-tech-blue)]/20",
+            "hover:border-[var(--color-border-accent)]",
+            error && "border-[var(--color-error)] focus-visible:border-[var(--color-error)] focus-visible:ring-[var(--color-error)]/50",
+            className
+          )}
+          ref={ref}
+          aria-invalid={error ? "true" : "false"}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1 text-sm text-[var(--color-error)]">{error}</p>
+        )}
+      </div>
+    )
+  }
+)
+Input.displayName = "Input"
+
 export { Input }
@@ -1,18 +1,47 @@
 import * as React from "react"
-
 import { cn } from "@/lib/utils"

-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+  error?: string
 }

+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, id, ...props }, ref) => {
+    const textareaId = id || React.useId()
+    
+    return (
+      <div className="w-full">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="block text-sm font-medium text-[var(--color-text-secondary)] mb-2"
+          >
+            {label}
+            {props.required && <span className="text-[var(--color-brand-primary)] ml-1">*</span>}
+          </label>
+        )}
+        <textarea
+          id={textareaId}
+          data-slot="textarea"
+          className={cn(
+            "placeholder:text-[var(--color-text-muted)] selection:bg-[var(--color-tech-blue)] selection:text-white min-h-16 w-full rounded-lg border border-[var(--color-border-primary)] bg-[var(--color-bg-tertiary)] px-4 py-3 text-base text-[var(--color-text-primary)] shadow-sm transition-all duration-300 outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
+            "focus-visible:border-[var(--color-tech-blue)] focus-visible:ring-2 focus-visible:ring-[var(--color-tech-blue)]/50 focus-visible:shadow-lg focus-visible:shadow-[var(--color-tech-blue)]/20",
+            "hover:border-[var(--color-border-accent)]",
+            error && "border-[var(--color-error)] focus-visible:border-[var(--color-error)] focus-visible:ring-[var(--color-error)]/50",
+            className
+          )}
+          ref={ref}
+          aria-invalid={error ? "true" : "false"}
+          {...props}
+        />
+        {error && (
+          <p className="mt-1 text-sm text-[var(--color-error)]">{error}</p>
+        )}
+      </div>
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
 export { Textarea }