feat/playground: 重构 playground组件

- 更新 Data 和 History组件的样式和布局 - 添加新的功能和交互，如热门搜索和智能体选择 - 优化组件性能和可维护性
2025-08-21 14:08:07 +08:00
parent df0bf51bdf
commit efbf2a3eff
19 changed files with 1009 additions and 709 deletions
--- a/src/components/Common/Playground/IodRelevant.tsx
+++ b/src/components/Common/Playground/IodRelevant.tsx
@@ -1,61 +1,119 @@
-import React from 'react';
+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>)
+  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"
-      className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
-      viewBox="0 0 24 24"
+      p-id="8408"
      width="18"
      height="18">
-      <defs></defs>
-      <g>
-        <path
-          fill="rgb(59, 130, 246)"
-          d="M13 2.03v2.02c4.39.54 7.5 4.53 6.96 8.92c-.46 3.64-3.32 6.53-6.96 6.96v2c5.5-.55 9.5-5.43 8.95-10.93c-.45-4.75-4.22-8.5-8.95-8.97m-2 .03c-1.95.19-3.81.94-5.33 2.2L7.1 5.74c1.12-.9 2.47-1.48 3.9-1.68zM4.26 5.67A9.9 9.9 0 0 0 2.05 11h2c.19-1.42.75-2.77 1.64-3.9zM2.06 13c.2 1.96.97 3.81 2.21 5.33l1.42-1.43A8 8 0 0 1 4.06 13zm5.04 5.37l-1.43 1.37A10 10 0 0 0 11 22v-2a8 8 0 0 1-3.9-1.63M12.5 7v5.25l4.5 2.67l-.75 1.23L11 13V7z"></path>
-      </g>
+      <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: "已在29个科学数据中心的50万个科学数据集中进行搜索",
+      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: "已在100万篇论文、2800个科创场景中进行搜索",
-      description: "已发现4个数据集",
-      status: "success"
-    },
-    {
-      title: "正在1000位智库专家、12万个创新机构中进行搜索",
+      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: "已在29个科学数据中心的50万个科学数据集中进行搜索" + i,
+      title: <p>正在<span className="text-[#9d0000]">1000位智库专家</span>、<span className="text-[#9d0000]">12万个创新机构</span>中进行搜索{i}</p>,
      description: "已发现4个数据集",
      status: "success"
    })
@@ -63,33 +121,65 @@ export const PlaygroundIodRelevant: React.FC = () => {


  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-lg font-semibold text-gray-900">
-          数联网搜索相关内
-        </h2>
-        <span className="text-sm text-blue-600 font-medium">{data.length}个结果</span>
-      </div>
+    <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>

-      {/* Content */}
-      <div className="space-y-3 flex-1 overflow-y-auto">
-        {
-          data.map((item, index) => (
-            <div className="flex items-start space-x-3">
-              <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>
+        {/* 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>
-    </div>
+    </Card>
  )
 }