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

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

src/components/ui/textarea.tsx

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