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
@@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "@antv/g2": "^5.4.8",
+        "@radix-ui/react-dialog": "^1.1.15",
        "@radix-ui/react-dropdown-menu": "^2.1.16",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
@@ -1601,6 +1602,42 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@antv/g2": "^5.4.8",
+    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
@@ -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 }
@@ -6,16 +6,31 @@ export const brandColors = {
    400: '#E04A68',
    100: '#FEF2F4',
  },
+  tech: {
+    blue: {
+      600: '#00D9FF',
+      700: '#00B8D9',
+      500: '#33E1FF',
+    },
+    purple: {
+      600: '#A855F7',
+      700: '#9333EA',
+      500: '#C084FC',
+    },
+    cyan: {
+      600: '#06B6D4',
+    },
+  },
  neutral: {
-    900: '#171717',
-    800: '#262626',
-    700: '#404040',
-    600: '#525252',
-    500: '#737373',
-    400: '#A3A3A3',
-    300: '#D4D4D4',
-    200: '#E5E5E5',
-    100: '#F5F5F5',
+    900: '#0A0A0A',
+    800: '#141414',
+    700: '#1A1A1A',
+    600: '#242424',
+    500: '#333333',
+    400: '#404040',
+    300: '#737373',
+    200: '#A3A3A3',
+    100: '#D4D4D4',
    50: '#FAFAFA',
    0: '#FFFFFF',
  },
@@ -43,17 +58,26 @@ export const colorValues = {
  primaryLight: '#D4244A',
  primaryBg: '#FEF2F4',
  
-  textPrimary: '#171717',
-  textSecondary: '#525252',
-  textTertiary: '#737373',
-  textMuted: '#A3A3A3',
+  techBlue: '#00D9FF',
+  techBlueHover: '#00B8D9',
+  techBlueLight: '#33E1FF',
+  techPurple: '#A855F7',
+  techPurpleHover: '#9333EA',
+  techPurpleLight: '#C084FC',
+  techCyan: '#06B6D4',
  
-  bgPrimary: '#FFFFFF',
-  bgSecondary: '#FAFAFA',
-  bgTertiary: '#F5F5F5',
+  textPrimary: '#FAFAFA',
+  textSecondary: '#D4D4D4',
+  textTertiary: '#A3A3A3',
+  textMuted: '#737373',
  
-  border: '#E5E5E5',
-  borderHover: '#D4D4D4',
+  bgPrimary: '#0A0A0A',
+  bgSecondary: '#141414',
+  bgTertiary: '#1A1A1A',
+  bgHover: '#242424',
+  
+  border: '#262626',
+  borderHover: '#333333',
  
  success: '#16A34A',
  successBg: '#F0FDF4',
@@ -65,5 +89,13 @@ export const colorValues = {
  errorBg: '#FEF2F2',
 } as const;

+export const gradients = {
+  primary: 'linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)',
+  reverse: 'linear-gradient(135deg, #A855F7 0%, #00D9FF 100%)',
+  glow: 'radial-gradient(circle, rgba(0, 217, 255, 0.15) 0%, transparent 70%)',
+  glowPurple: 'radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%)',
+} as const;
+
 export type BrandColor = typeof brandColors;
 export type ColorValue = typeof colorValues;
+export type Gradient = typeof gradients;