a604b4d488
Some checks failed
CI Check / check (push) Has been cancelled
- 首页UI统一到三层架构 - 将所有 gray 系列替换为 slate 系列 - 统一按钮、输入框、边框颜色样式 - 使用 useThemeStyles() Hook - 创建通用组件库 - Badge 组件（支持 primary、success、warning、danger 变体） - Tag 组件（支持多种颜色，已在首页应用） - Button 组件（支持多种变体和尺寸，带加载状态） - Input 组件（支持错误状态和多种尺寸）
87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { ButtonHTMLAttributes, ReactNode, forwardRef } from 'react'
|
|
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children: ReactNode
|
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success'
|
|
size?: 'sm' | 'md' | 'lg'
|
|
fullWidth?: boolean
|
|
loading?: boolean
|
|
}
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
children,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
fullWidth = false,
|
|
loading = false,
|
|
disabled,
|
|
className = '',
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const styles = useThemeStyles()
|
|
|
|
const sizeClasses = {
|
|
sm: styles.buttonModifiers.compactXs,
|
|
md: '',
|
|
lg: 'px-8 py-4 text-base',
|
|
}
|
|
|
|
const variantClass = styles.buttonStyles[variant]
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
disabled={disabled || loading}
|
|
className={cn(
|
|
variantClass,
|
|
sizeClasses[size],
|
|
fullWidth && styles.buttonModifiers.block,
|
|
loading && 'opacity-75 cursor-wait',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{loading ? (
|
|
<span className="flex items-center gap-2">
|
|
<svg
|
|
className="animate-spin h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<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>
|
|
<span>加载中...</span>
|
|
</span>
|
|
) : (
|
|
children
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
)
|
|
|
|
Button.displayName = 'Button'
|
|
|
|
export default Button
|
|
|