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

- 添加科技蓝、紫色、青色色彩系列
- 更新中性色系列
- 添加渐变色定义
- 创建 GlassCard 组件支持 variant 属性
- 更新 Input 组件支持 label 和 error 属性
- 更新 Textarea 组件支持 label 和 error 属性
- 安装 @radix-ui/react-dialog 依赖

src/components/ui/input.tsx

@@ -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 }