--- name: add-ui-primitive description: 为 MediMind 添加基础 UI 原子组件（Button, Input, Card等） --- # 添加 UI 原子组件技能此技能用于在 MediMind 的 `@medimind\/ui` 包中添加基础原子组件。 ## 原子组件目录 ``` frontend\/packages\/ui\/src\/primitives\/ ├── index.ts # 导出入口 ├── Button.tsx # 按钮 ├── Input.tsx # 输入框 ├── Card.tsx # 卡片 ├── Badge.tsx # 徽章 ├── Spinner.tsx # 加载动画 ├── Avatar.tsx # 头像 ├── Modal.tsx # 模态框 └── Tooltip.tsx # 工具提示 ``` ## 组件模板 ### Button - 按钮 ```tsx \/\/ src\/primitives\/Button.tsx import React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "..\/utils"; import { Loader2 } from "lucide-react"; const buttonVariants = cva( "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", { variants: { variant: { primary: "bg-teal-600 text-white hover:bg-teal-700 focus:ring-teal-500", secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500", outline: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-gray-500", ghost: "text-gray-700 hover:bg-gray-100 focus:ring-gray-500", danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500", }, size: { sm: "h-8 px-3 text-sm", md: "h-10 px-4 text-base", lg: "h-12 px-6 text-lg", icon: "h-10 w-10", }, }, defaultVariants: { variant: "primary", size: "md", }, }, ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { \/** 加载状态 *\/ loading?: boolean; } export function Button({ className, variant, size, loading, disabled, children, ...props }: ButtonProps) { return (