1104fb2733
- 更新 Header 组件，增加项目标题和历史记录切换按钮 - 新增 DataNavigation 组件用于数据导航 - 添加 Playground 相关新组件，包括数据、场景、团队等信息展示 - 重构 Layout 组件，使用 Context 管理历史记录状态 - 更新 zh/option.json 文件，添加新的项目标题和对话相关翻译
96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
|
|
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
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
|
|
viewBox="0 0 24 24"
|
|
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>
|
|
</svg>
|
|
)
|
|
}
|
|
|
|
|
|
export const PlaygroundIodRelevant: React.FC = () => {
|
|
const data = [
|
|
{
|
|
title: "已在29个科学数据中心的50万个科学数据集中进行搜索",
|
|
description: "已发现4个数据集",
|
|
status: "success"
|
|
},
|
|
{
|
|
title: "已在100万篇论文、2800个科创场景中进行搜索",
|
|
description: "已发现4个数据集",
|
|
status: "success"
|
|
},
|
|
{
|
|
title: "正在1000位智库专家、12万个创新机构中进行搜索",
|
|
status: "loading"
|
|
},
|
|
]
|
|
|
|
for (let i = 0; i < 10; i++) {
|
|
data.push({
|
|
title: "已在29个科学数据中心的50万个科学数据集中进行搜索" + i,
|
|
description: "已发现4个数据集",
|
|
status: "success"
|
|
})
|
|
}
|
|
|
|
|
|
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>
|
|
|
|
{/* 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>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|