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

import React, { useMemo } from "react"
import { 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; playing: boolean }>`
  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;
  animation-play-state: ${(props) => (props.playing ? "running" : "paused")};
`

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="29588"
      width="18"
      height="18">
      <path
        d="M483.712 888.064a52.437333 52.437333 0 1 1 52.48 52.352 52.394667 52.394667 0 0 1-52.48-52.352z m-235.434667-53.76a65.578667 65.578667 0 1 1 46.421334 19.242667 65.962667 65.962667 0 0 1-46.378667-19.242667z m499.584-16.597333a41.984 41.984 0 0 1 59.264-59.434667 42.282667 42.282667 0 0 1 0 59.434667 41.941333 41.941333 0 0 1-59.264 0zM112.853333 546.602667a81.92 81.92 0 1 1 81.92 81.92 81.834667 81.834667 0 0 1-81.92-81.877334z m731.008 0a33.536 33.536 0 1 1 33.493334 33.578666 33.578667 33.578667 0 0 1-33.450667-33.536zM222.208 377.6a102.4 102.4 0 1 1 72.533333 29.866667 102.869333 102.869333 0 0 1-72.533333-29.824z m536.32-53.504a26.666667 26.666667 0 1 1 18.816 7.936 26.368 26.368 0 0 1-18.773333-7.893333zM414.378667 205.184a121.642667 121.642667 0 1 1 121.813333 121.6A121.728 121.728 0 0 1 414.378667 205.226667z"
        p-id="29589"
        fill="#4284f6"></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 { messages, iodLoading, currentMessageId, iodSearch } =
    useMessageOption()

  const showDescription = useMemo(() => {
    return iodSearch && messages.length > 0 && !iodLoading
  }, [iodSearch, messages, iodLoading])

  const data = useMemo(() => {
    const currentMessage = messages?.find(
      (message) => message.id === currentMessageId
    )
    return [
      {
        title: (
          <p className="font-extrabold">
            已连接<span className="text-[#f00000]"> 11家 </span>
            国家科学数据中心的
            <span className="text-[#f00000]"> 500000+个 </span>科学数据集中
          </p>
        ),
        description: showDescription ? (
          <p>
            已发现
            <span className="text-green-700">
              {" "}
              {currentMessage?.iodSources.data.total}个{" "}
            </span>
            数据集
          </p>
        ) : (
          ""
        )
      },
      {
        title: (
          <p className="font-extrabold">
            已连接<span className="text-[#f00000]"> 1000000+篇 </span>论文和
            <span className="text-[#f00000]"> 50000+个 </span>科创场景
          </p>
        ),
        description: showDescription ? (
          <p>
            已发现
            <span className="text-green-700">
              {" "}
              {currentMessage?.iodSources.scenario.total}个{" "}
            </span>
            科创场景
          </p>
        ) : (
          ""
        )
      },
      {
        title: (
          <p className="font-extrabold">
            已连接<span className="text-[#f00000]"> 1000+位 </span>智库专家
            <span className="text-[#f00000]"> 763家 </span>高校和科研机构和
            <span className="text-[#f00000]"> 21000+家 </span>科技企业
          </p>
        ),
        description: showDescription ? (
          <p>
            已发现
            <span className="text-green-700">
              {" "}
              {currentMessage?.iodSources.organization.total}个{" "}
            </span>
            科技企业
          </p>
        ) : (
          ""
        )
      }
    ]
  }, [messages, iodLoading])

  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} playing={true} />
            <CircleElement delay={1} playing={true} />
            <CircleElement delay={2} playing={true} />
          </div>
        </div>

        {/* Header */}
        <div className="p-3">
          <h2 className="text-xl font-semibold text-[#1a3c87] flex justify-center 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-[#1a3c87] mt-1 text-center">
            下面是在数联网上进行深度搜索的相关内容
          </p>
        </div>

        {/* Content */}
        <div className="space-y-2 flex-1 overflow-y-auto">
          {data.map((item, index) => (
            <Card
              className="[&_.ant-card-body]:!p-3 [&_.ant-card-body]:h-full shadow-md h-[88px]"
              key={index}>
              <div
                className={`flex flex-col gap-2 h-full items-start ${showDescription ? "justify-start" : "justify-center"}`}>
                <div className="flex items-center gap-2">
                  <div className={`${showDescription ? "w-5 h-5" : "w-6 h-6"}`}>
                    {iodSearch && iodLoading ? (
                      <LoadingIcon />
                    ) : (
                      <SuccessIcon />
                    )}
                  </div>
                  <p
                    className={`text-gray-700 ${showDescription ? "text-sm" : "text-lg"}`}>
                    {item.title}
                  </p>
                </div>
                {item.description && (
                  <div className="flex-1">
                    <p className="text-xs text-gray-500 mt-1 pl-7">
                      {item.description}
                    </p>
                  </div>
                )}
              </div>
            </Card>
          ))}
        </div>
      </div>
    </Card>
  )
}