f166c04422
- Create Tailwind CSS configuration with design tokens from UIDesignSpec - Create globals.css with CSS variables and component styles - Add React component library: - UI components: Button, Card, Tag, Input, Select, ProgressBar, Modal - Navigation: BottomNav, Sidebar, StatusBar - Layout: MobileLayout, DesktopLayout - Add constants for colors, icons, and layout - Update tasks.md with 31 UI development tasks linked to design node IDs - Configure package.json, tsconfig.json, and postcss.config.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
105 lines
2.7 KiB
TypeScript
105 lines
2.7 KiB
TypeScript
/**
|
|
* Button 按钮组件
|
|
* 设计稿参考: UIDesignSpec.md 3.4
|
|
*/
|
|
import React from 'react';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success' | 'ghost';
|
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
icon?: LucideIcon;
|
|
iconPosition?: 'left' | 'right';
|
|
loading?: boolean;
|
|
fullWidth?: boolean;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
const variantStyles: Record<ButtonVariant, string> = {
|
|
primary: 'bg-accent-indigo text-white hover:opacity-90 active:opacity-80',
|
|
secondary: 'bg-bg-elevated text-text-secondary hover:bg-opacity-80',
|
|
danger: 'bg-accent-coral text-white hover:opacity-90 active:opacity-80',
|
|
success: 'bg-accent-green text-white hover:opacity-90 active:opacity-80',
|
|
ghost: 'bg-transparent text-text-secondary hover:bg-bg-elevated',
|
|
};
|
|
|
|
const sizeStyles: Record<ButtonSize, string> = {
|
|
sm: 'px-3 py-1.5 text-small',
|
|
md: 'px-4 py-2.5 text-body',
|
|
lg: 'px-6 py-3 text-section-title',
|
|
};
|
|
|
|
const iconSizes: Record<ButtonSize, number> = {
|
|
sm: 14,
|
|
md: 16,
|
|
lg: 20,
|
|
};
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
icon: Icon,
|
|
iconPosition = 'left',
|
|
loading = false,
|
|
fullWidth = false,
|
|
children,
|
|
className = '',
|
|
disabled,
|
|
...props
|
|
}) => {
|
|
const isDisabled = disabled || loading;
|
|
const iconSize = iconSizes[size];
|
|
|
|
return (
|
|
<button
|
|
className={`
|
|
inline-flex items-center justify-center gap-2 font-semibold
|
|
rounded-btn transition-all duration-200
|
|
${variantStyles[variant]}
|
|
${sizeStyles[size]}
|
|
${fullWidth ? 'w-full' : ''}
|
|
${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
|
|
${className}
|
|
`}
|
|
disabled={isDisabled}
|
|
{...props}
|
|
>
|
|
{loading && (
|
|
<svg
|
|
className="animate-spin"
|
|
width={iconSize}
|
|
height={iconSize}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
>
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
{!loading && Icon && iconPosition === 'left' && (
|
|
<Icon size={iconSize} />
|
|
)}
|
|
{children}
|
|
{!loading && Icon && iconPosition === 'right' && (
|
|
<Icon size={iconSize} />
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Button;
|