feat(iod): 重构数联网搜索功能
- 新增数联网设置页面 - 优化数联网搜索结果展示 - 添加数据集、科创场景和科技企业等不同类型的搜索结果 - 重构搜索结果卡片组件，支持加载状态和不同展示模式 - 更新数联网搜索相关的国际化文案
This commit is contained in:
zhaoweijie
@@ -1,44 +1,98 @@
|
||||
import React, { useState } from "react"
|
||||
import React, { useMemo, useState } from "react"
|
||||
import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
|
||||
import { Card, Drawer, List } from "antd"
|
||||
import { Card, Drawer, Skeleton } from "antd"
|
||||
import { IodRegistryEntry } from "@/types/iod.ts"
|
||||
|
||||
const defaultData: IodRegistryEntry[] = [
|
||||
{
|
||||
name: "绿色化工工艺项目",
|
||||
description:
|
||||
"基于生物基原料，采用repeal2.0可降解材料技术，开发新型环保材料。",
|
||||
doId: "CSTR:13552.11.01.61.2021.742"
|
||||
},
|
||||
{
|
||||
name: "智能农业解决方案",
|
||||
description: "利用物联网技术，实现精准农业管理，提高农作物产量。",
|
||||
doId: "CSTR:14542.11.01.61.2031.528"
|
||||
},
|
||||
{
|
||||
name: "新能源汽车电池技术",
|
||||
description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
|
||||
doId: "CSTR:147842.11.04.91.2031.680"
|
||||
},
|
||||
{
|
||||
name: "碳捕集与封存技术",
|
||||
description: "开发高效的碳捕集技术，减少工业排放，助力碳中和目标。",
|
||||
doId: "CSTR:14242.19.11.61.2131.428"
|
||||
}
|
||||
]
|
||||
|
||||
type ShowCardProps = {
|
||||
loading: boolean
|
||||
record: IodRegistryEntry
|
||||
truncate?: boolean
|
||||
}
|
||||
|
||||
const ShowCard: React.FC<ShowCardProps> = ({
|
||||
loading,
|
||||
record,
|
||||
truncate = true
|
||||
}) => (
|
||||
<Card className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]">
|
||||
{loading ? (
|
||||
<Skeleton title={false} active />
|
||||
) : (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3
|
||||
className={`text-base font-medium mb-1 text-[#222222] break-all ${truncate ? "line-clamp-2" : ""}`}
|
||||
title={record.name}>
|
||||
{record.name}
|
||||
</h3>
|
||||
<p
|
||||
className={`text-sm text-[#383838] break-all ${truncate ? "line-clamp-2" : ""}`}
|
||||
title={record.doId}>
|
||||
数字对象标识：{record.doId}
|
||||
</p>
|
||||
<p
|
||||
className={`text-[#828282] text-xs break-all ${truncate ? "truncate" : ""}`}
|
||||
title={record.description}>
|
||||
{record.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
|
||||
export const PlaygroundScene = () => {
|
||||
// 模拟数据
|
||||
const data = [
|
||||
{
|
||||
title: "绿色化工工艺项目",
|
||||
description:
|
||||
"基于生物基原料，采用repeal2.0可降解材料技术，开发新型环保材料。",
|
||||
demander: "奥赛康药业 供方：美国Propella公司"
|
||||
},
|
||||
{
|
||||
title: "智能农业解决方案",
|
||||
description: "利用物联网技术，实现精准农业管理，提高农作物产量。",
|
||||
demander: "奥赛康药业 供方：美国Propella公司"
|
||||
},
|
||||
{
|
||||
title: "新能源汽车电池技术",
|
||||
description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
|
||||
demander: "奥赛康药业 供方：美国Propella公司"
|
||||
},
|
||||
{
|
||||
title: "碳捕集与封存技术",
|
||||
description: "开发高效的碳捕集技术，减少工业排放，助力碳中和目标。",
|
||||
demander: "奥赛康药业 供方：美国Propella公司"
|
||||
}
|
||||
]
|
||||
const { messages, iodLoading, currentMessageId, iodSearch } =
|
||||
useMessageOption()
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
title: "开发新型电池材料",
|
||||
description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
|
||||
demander: "奥赛康药业 供方：美国Propella公司"
|
||||
})
|
||||
}
|
||||
const data = useMemo<IodRegistryEntry[]>(() => {
|
||||
// 确保loading状态时数据大于3
|
||||
if (iodLoading) {
|
||||
return defaultData
|
||||
}
|
||||
|
||||
if (messages.length && iodSearch) {
|
||||
const currentMessage = messages?.find(
|
||||
(message) => message.id === currentMessageId
|
||||
)
|
||||
return currentMessage?.iodSources.scenario.data ?? []
|
||||
}
|
||||
|
||||
return defaultData
|
||||
}, [currentMessageId, messages, iodLoading])
|
||||
|
||||
const title = useMemo(() => {
|
||||
return messages.length > 0 ? "推荐场景" : "热点场景"
|
||||
}, [messages])
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const showDrawer = () => {
|
||||
if (iodLoading) {
|
||||
return
|
||||
}
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
@@ -54,7 +108,7 @@ export const PlaygroundScene = () => {
|
||||
{/* 数据导航 */}
|
||||
<DataNavigation
|
||||
Header={
|
||||
<div className="flex items-center text-[#52c41a] gap-1">
|
||||
<div className="flex items-center text-[#54c41d] gap-1">
|
||||
<svg
|
||||
className="icon"
|
||||
viewBox="0 0 1025 1024"
|
||||
@@ -65,76 +119,39 @@ export const PlaygroundScene = () => {
|
||||
height="18">
|
||||
<path
|
||||
d="M980.34571 1.143792c-4.850903 0-9.824354 0.888481-14.797806 2.930966L229.773215 299.724504H20.428686c-11.233669 0-20.424853 9.446494-20.424853 21.180572V702.584302c0 11.74429 9.191184 21.180572 20.424853 21.180573h129.820365c-4.728353 14.808018-7.271248 30.51473-7.271248 46.46654 0 84.119757 68.678568 152.543014 153.176184 152.543014 70.721053 0 130.330986-47.998404 147.93721-112.847312l521.569043 209.59984c4.983664 1.919936 9.957116 2.930966 14.808019 2.930967 21.568645 0 40.839493-18.127057 40.839493-42.371358V43.525362C1021.195415 19.270849 1002.047116 1.143792 980.34571 1.143792zM296.153987 831.250663c-33.833769 0-61.274559-27.308028-61.274558-61.009035 0-14.297397 4.983664-27.951411 14.042086-38.807221l108.374269 43.525362c-2.553107 31.403211-28.972654 56.290895-61.141797 56.290894z m633.12959 74.550713L263.984844 638.501326l-16.462431-6.638077H91.915671V391.626129h155.606742l16.462431-6.638077 665.298733-267.30005v788.113374z m0 0"
|
||||
fill="#52c41a"
|
||||
fill="#54c41d"
|
||||
p-id="6236"></path>
|
||||
</svg>
|
||||
相关场景
|
||||
{title}
|
||||
</div>
|
||||
}
|
||||
onClick={showDrawer}
|
||||
/>
|
||||
|
||||
{/* 场景列表 */}
|
||||
{/* 数据列表 */}
|
||||
<div className="space-y-1.5 flex-1 overflow-y-auto">
|
||||
{data.slice(0, 3).map((item, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3 className="text-base font-medium mb-1 text-[#222222] line-clamp-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<span className="text-sm text-[#383838] line-clamp-2">
|
||||
{item.description}
|
||||
</span>
|
||||
<p className="text-[#828282] text-xs truncate">
|
||||
{item.demander}
|
||||
</p>
|
||||
<p className="flex items-center gap-1.5">
|
||||
<span className="inline-block text-[#003AD4] bg-[#003ad430] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
|
||||
技术应用
|
||||
</span>
|
||||
<span className="inline-block text-[#00BF68] bg-[#00bf6830] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
|
||||
制造业
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
{data.slice(0, 3).map((item, index) => {
|
||||
return (
|
||||
<ShowCard key={item.doId} loading={iodLoading} record={item} />
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 抽屉 */}
|
||||
<Drawer
|
||||
title="相关场景"
|
||||
title={title}
|
||||
closable={{ "aria-label": "Close Button" }}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
width="33.33%">
|
||||
<div className="grid grid-cols-1 gap-3 overflow-y-auto">
|
||||
{data.slice(0, 3).map((item, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
hoverable
|
||||
className="[&_.ant-card-body]:!p-2 !bg-[gb(248, 248, 248)] border !border-[#e9e9e9]">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<h3 className="text-base font-medium mb-1 text-[#222222]">
|
||||
{item.title}
|
||||
</h3>
|
||||
<span className="text-sm text-[#383838]">
|
||||
{item.description}
|
||||
</span>
|
||||
<p className="text-[#828282] text-xs">{item.demander}</p>
|
||||
<p className="flex items-center gap-1.5">
|
||||
<span className="inline-block text-[#003AD4] bg-[#003ad430] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
|
||||
技术应用
|
||||
</span>
|
||||
<span className="inline-block text-[#00BF68] bg-[#00bf6830] h-5 leading-5 mt-1 text-xs rounded-full px-2.5">
|
||||
制造业
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
{data.map((item, index) => (
|
||||
<ShowCard
|
||||
key={item.doId}
|
||||
loading={iodLoading}
|
||||
record={item}
|
||||
truncate={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
Reference in New Issue
Block a user