page-assist/src/components/Common/Playground/IodRelevant.tsx

import React from "react"
import { Button, Card } from "antd"

// 使用 CSS-in-JS 方式
import styled, { keyframes } from 'styled-components'

const rotate = keyframes`
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
`

const breathe = keyframes`
  0% {
    box-shadow: 0 0 5px rgba(37, 231, 232, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(37, 231, 232, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(37, 231, 232, 0.3);
  }
`

const CircleElement = styled.div<{ delay: number }>`
  position: absolute;
  width: 300px;
  height: 160px;
  background: #3b82f6;  // blue-500
  opacity: 0.2;
  border-radius: 50%;
  top: 55%;
  left: 50%;
  animation: ${rotate} 6s linear infinite, ${breathe} 2s infinite alternate;
  animation-delay: ${props => props.delay}s;
`


const SuccessIcon = () => {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="w-full h-full text-green-500">
      <path
        d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

const LoadingIcon = () => {
  return (
    <svg
      className="icon animate-spin"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="8408"
      width="18"
      height="18">
      <path
        d="M512 128C299.936 128 128 296.672 128 504.736c0 130.784 67.904 245.984 170.976 313.536l35.52-52.256C248.576 709.696 192 613.696 192 504.736c0-173.376 143.264-313.92 320-313.92s320 140.544 320 313.92c0 98.112-45.856 185.696-117.696 243.296l-73.792-72.416V864h192l-72.768-71.36C843.072 723.52 896 620.16 896 504.704 896 296.672 724.064 128 512 128z"
        fill="#52c41a"
        p-id="8409"></path>
    </svg>
  )
}

const SearchIcon = () => {
  return (
    <svg
      className="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2585"
      width="22px"
      height="22px">
      <path
        d="M913.365333 842.794667l-188.16-188.16a347.648 347.648 0 0 0 69.674667-209.194667c0-192.682667-156.757333-349.44-349.44-349.44s-349.44 156.757333-349.44 349.44 156.757333 349.44 349.44 349.44a347.648 347.648 0 0 0 209.152-69.674667l188.16 188.16a49.962667 49.962667 0 0 0 70.613333-70.570666zM195.84 445.44a249.6 249.6 0 1 1 249.6 249.6 249.898667 249.898667 0 0 1-249.6-249.6z"
        fill="#08307f"
        p-id="2586"></path>
    </svg>
  )
}

export const PlaygroundIodRelevant: React.FC = () => {
  const data = [
    {
      title: <p>已在<span className="text-[#9d0000]">29个科学数据中心</span>的<span className="text-[#9d0000]">50万个科学数据集</span>中进行搜索</p>,
      description: <p>已发现<span className="text-green-700"> 4个 </span>数据集</p>,
      status: "success"
    },
    {
      title: <p>已在<span className="text-[#9d0000]">100万篇论文</span>、<span className="text-[#9d0000]">2800个科创场景</span>中进行搜索</p>,
      description: "已发现4个数据集",
      status: "success"
    },
    {
      title: <p>正在<span className="text-[#9d0000]">1000位智库专家</span>、<span className="text-[#9d0000]">12万个创新机构</span>中进行搜索</p>,
      status: "loading"
    }
  ]

  for (let i = 0; i < 10; i++) {
    data.push({
      title: <p>正在<span className="text-[#9d0000]">1000位智库专家</span>、<span className="text-[#9d0000]">12万个创新机构</span>中进行搜索{i}</p>,
      description: "已发现4个数据集",
      status: "success"
    })
  }


  return (
    <Card
      hoverable
      variant="outlined"
      className="flex flex-col h-full [&_.ant-card-body]:h-full [&_.ant-card-body]:!p-[20px] translate-y-[-2px] !bg-[#f0f9ff]"
    >
      <div className="h-full flex flex-col relative">
        {/* 花瓣效果 */}
        <div className="absolute  inset-0 pointer-events-none z-0 overflow-hidden">
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64">
            <CircleElement delay={0} />
            <CircleElement delay={1} />
            <CircleElement delay={2} />
          </div>
        </div>

        {/* Header */}
        <div className="p-3">
          <h2 className="text-xl font-semibold text-[#08307f] flex justify-between items-center">
            <div className='flex items-center gap-2'>
              <SearchIcon />
              数联网搜索相关内容
            </div>
            <button className="bg-[#2563eb1a] text-[#08307f] font-medium py-1 px-3 rounded-full text-sm hover:bg-[#2563eb1a]  transition-colors float-right">
              {data.length}个结果
            </button>
          </h2>
          <p className="text-sm text-[#08307f] mt-1 align-middle">
            下面是在数联网上进行深度搜索的相关内容
          </p>
        </div>

        {/* Content */}
        <div className="space-y-2 flex-1 overflow-y-auto">
          {data.map((item, index) => (
            <Card
              className="[&>*:first-child]:!p-3 shadow-md"
              key={index}
            >
              <div className="flex items-start gap-2">
                <div className="w-5 h-5 mt-1 flex-shrink-0">
                  {item.status === "success" ? (
                    <SuccessIcon />
                  ) : (
                    <LoadingIcon />
                  )}
                </div>
                <div className="flex-1">
                  <p className="text-sm text-gray-700">{item.title}</p>
                  {item.description && (
                    <p className="text-xs text-gray-500 mt-1">
                      {item.description}
                    </p>
                  )}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </Card>
  )
}