76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
/**
|
||
* Tag 组件
|
||
*
|
||
* 统一的标签组件，遵循三层架构设计
|
||
* 用于显示分类、类型等标签信息
|
||
* 支持多种颜色（blue、green、orange、purple等）和尺寸（sm、md、lg）
|
||
* 支持点击事件，可用于筛选等功能
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { ReactNode } from 'react'
|
||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||
|
||
interface TagProps {
|
||
children: ReactNode
|
||
color?: 'blue' | 'green' | 'orange' | 'purple' | 'indigo' | 'pink' | 'cyan'
|
||
size?: 'sm' | 'md' | 'lg'
|
||
className?: string
|
||
onClick?: () => void
|
||
}
|
||
|
||
export default function Tag({
|
||
children,
|
||
color = 'blue',
|
||
size = 'md',
|
||
className = '',
|
||
onClick,
|
||
}: TagProps) {
|
||
const styles = useThemeStyles()
|
||
|
||
// 使用低饱和度炫彩元素
|
||
const colorClasses = {
|
||
blue: `${styles.accentStyles.blue.bg} ${styles.accentStyles.blue.text} border ${styles.accentStyles.blue.border}`,
|
||
green: `${styles.accentStyles.emerald.bg} ${styles.accentStyles.emerald.text} border ${styles.accentStyles.emerald.border}`,
|
||
orange: `${styles.accentStyles.orange.bg} ${styles.accentStyles.orange.text} border ${styles.accentStyles.orange.border}`,
|
||
purple: `${styles.accentStyles.purple.bg} ${styles.accentStyles.purple.text} border ${styles.accentStyles.purple.border}`,
|
||
indigo: `${styles.accentStyles.purple.bg} ${styles.accentStyles.purple.text} border ${styles.accentStyles.purple.border}`, // indigo 使用 purple
|
||
pink: `${styles.accentStyles.pink.bg} ${styles.accentStyles.pink.text} border ${styles.accentStyles.pink.border}`,
|
||
cyan: `${styles.accentStyles.cyan.bg} ${styles.accentStyles.cyan.text} border ${styles.accentStyles.cyan.border}`,
|
||
}
|
||
|
||
const sizeClasses = {
|
||
sm: 'px-2 py-0.5 text-xs',
|
||
md: 'px-2 py-1 text-xs',
|
||
lg: 'px-3 py-1.5 text-sm',
|
||
}
|
||
|
||
const baseClasses = 'inline-flex items-center font-medium rounded transition-colors'
|
||
|
||
return (
|
||
<span
|
||
className={cn(
|
||
baseClasses,
|
||
colorClasses[color],
|
||
sizeClasses[size],
|
||
onClick && 'cursor-pointer',
|
||
onClick && color === 'blue' ? styles.accentStyles.blue.hover :
|
||
onClick && color === 'green' ? styles.accentStyles.emerald.hover :
|
||
onClick && color === 'orange' ? styles.accentStyles.orange.hover :
|
||
onClick && (color === 'purple' || color === 'indigo') ? styles.accentStyles.purple.hover :
|
||
onClick && color === 'pink' ? styles.accentStyles.pink.hover :
|
||
onClick && color === 'cyan' ? styles.accentStyles.cyan.hover : '',
|
||
className
|
||
)}
|
||
onClick={onClick}
|
||
>
|
||
{children}
|
||
</span>
|
||
)
|
||
}
|
||
|