58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
/**
|
||
* Card 组件
|
||
*
|
||
* 统一的卡片容器组件，遵循三层架构设计
|
||
* 提供多种变体样式（base、hover、large、flat）
|
||
* rainbow / glass / neon 是历史兼容名，样式已降级，不建议新增调用
|
||
* 支持自定义内边距和样式类名
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { ReactNode, HTMLAttributes } from 'react'
|
||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||
|
||
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||
children: ReactNode
|
||
/** rainbow / glass / neon 仅保留兼容旧调用，新增界面优先使用 base / flat / hover。 */
|
||
variant?: 'base' | 'hover' | 'large' | 'flat' | 'rainbow' | 'glass' | 'neon'
|
||
padding?: 'none' | 'sm' | 'md' | 'lg'
|
||
className?: string
|
||
}
|
||
|
||
export default function Card({
|
||
children,
|
||
variant = 'base',
|
||
padding = 'md',
|
||
className = '',
|
||
...props
|
||
}: CardProps) {
|
||
const styles = useThemeStyles()
|
||
|
||
const paddingClasses = {
|
||
none: '',
|
||
sm: 'p-4',
|
||
md: 'p-6',
|
||
lg: 'p-8',
|
||
}
|
||
|
||
const variantClass = styles.cardStyles[variant]
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
variantClass,
|
||
paddingClasses[padding],
|
||
className
|
||
)}
|
||
{...props}
|
||
>
|
||
{children}
|
||
</div>
|
||
)
|
||
}
|
||
|