feat: 添加 CloudWord 组件

2026-01-27 20:15:35 +08:00
parent 22fbd42158
commit a7846ecb61
1 changed files with 112 additions and 0 deletions
@@ -0,0 +1,112 @@
 'use client';
 import React from 'react';
 import { cn } from '@/lib/utils';
 interface VisualConfig {
  color: 'primary' | 'secondary' | 'accent' | 'gray';
  size: string;
  border: string;
  rotation?: string;
 }
 interface KeywordData {
  id: number;
  word: string;
  trendScore: number;
  description: string;
  detailPoints: string[];
  visualConfig: VisualConfig;
 }
 interface CloudWordProps {
  data: KeywordData;
 }
 // 颜色映射
 const colorMap: Record<string, string> = {
  primary: 'bg-primary',
  secondary: 'bg-secondary',
  accent: 'bg-accent',
  gray: 'bg-gray-100 dark:bg-gray-700',
 };
 export function CloudWord({ data }: CloudWordProps) {
  const { word, visualConfig, description, detailPoints } = data;
  const { color, size, border, rotation } = visualConfig;
  const colorClass = colorMap[color];
  return (
    <span
      className={cn(
        'cloud-word',
        'inline-block',
        'whitespace-nowrap',
        'relative',
        'transition-all',
        'duration-200',
        'cursor-pointer',
        border,
        'border-black',
        colorClass,
        'px-6',
        'py-3',
        'rounded-full',
        size,
        'font-black',
        'shadow-hard',
        rotation,
        'hover:scale-105',
        'hover:z-10'
      )}
    >
      {word}
      <WordPopover
        title={word}
        description={description}
        points={detailPoints}
        titleColor={color}
      />
    </span>
  );
 }
 interface WordPopoverProps {
  title: string;
  description: string;
  points: string[];
  titleColor: string;
 }
 function WordPopover({ title, description, points, titleColor }: WordPopoverProps) {
  const titleColorClass = colorMap[titleColor] || 'bg-gray-100';
  return (
    <div className="absolute bottom-[calc(100%+12px)] left-1/2 -translate-x-1/2 w-48 bg-white dark:bg-gray-800 border-2 border-black shadow-hard-sm opacity-0 pointer-events-none transition-all duration-300 translate-y-2 z-50 text-left group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto">
      {/* 标题栏 */}
      <div className={cn(
        'text-black dark:text-white font-display font-bold p-2 border-b-2 border-black text-sm uppercase',
        titleColorClass
      )}>
        {title}
      </div>
      {/* 内容区域 */}
      <div className="p-3 space-y-2 text-xs font-medium dark:text-gray-100">
        <div className="flex gap-2 items-start">
          <span>•</span>
          <span>{description}</span>
        </div>
        {points.map((point, i) => (
          <div key={i} className="flex gap-2 items-start">
            <span>•</span>
            <span>{point}</span>
          </div>
        ))}
      </div>
      {/* 箭头 */}
      <div className="absolute -bottom-2 left-1/2 -translate-x-1/2 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-black" />
    </div>
  );
 }