iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): 重构碘搜索相关组件

Browse Source 
- 优化 IodRelevant 组件中的加载状态和计数器动画
- 重构 PlaygroundIod 组件，使用新的 PlaygroundIodProvider 组件
- 改进 Context 提供的数据结构，使用更准确的命名
This commit is contained in:
zhaoweijie 2025-08-24 13:04:43 +08:00
parent cb6c3c225b
commit f9763778fa
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Common/Playground/IodRelevant.tsx
View File

@ -235,25 +235,28 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
(message) => message.id === currentMessageId
)
const text = (iodSearch && iodLoading) ? '正' : '已'
const text2 = (iodSearch && iodLoading) ? '进行' : '完成'
const text3 = (iodSearch && iodLoading) ? '……' : ''
const loading = (iodSearch && iodLoading)
const text = loading ? '正' : '已'
const text2 = loading ? '进行' : '完成'
const text3 = loading ? '……' : ''
const duration = loading ? 2.5 : 0
return [
{
title: (
<p className="font-extrabold">
{text}在
<span className="text-[#f00000]">
<CountUp end={29} duration={2.5} separator="," />个
<CountUp end={29} duration={duration} separator="," />个
</span>
国家和省部级科学数据中心、
<span className="text-[#f00000]">
{" "}
<CountUp end={55} duration={2.5} separator="," />所
<CountUp end={55} duration={duration} separator="," />所
</span>
高等院校的
<span className="text-[#f00000]">
<CountUp decimals={1} end={53.7} duration={2.5} separator="," />
<CountUp decimals={1} end={53.7} duration={duration} separator="," />
万个
</span>
科学数据集中{text2}搜索{text3}
@ -282,12 +285,12 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
<p className="font-extrabold">
{text}在
<span className="text-[#f00000]">
<CountUp end={138} duration={2.5} separator="," />
<CountUp end={138} duration={duration} separator="," />
万篇
</span>
学术论文、
<span className="text-[#f00000]">
<CountUp end={18.3} decimals={1} duration={2.5} separator="," />
<CountUp end={18.3} decimals={1} duration={duration} separator="," />
万个
</span>
数据项目中{text2}搜索{text3}
@ -316,17 +319,17 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
<p className="font-extrabold">
{text}在
<span className="text-[#f00000]">
<CountUp end={763} duration={2.5} separator="," />家
<CountUp end={763} duration={duration} separator="," />家
</span>
高等院校和科研机构、
<span className="text-[#f00000]">
{" "}
<CountUp end={2.1} decimals={1} duration={2.5} separator="," />万
<CountUp end={2.1} decimals={1} duration={duration} separator="," />万
</span>
家科技型企业、
<span className="text-[#f00000]">
{" "}
<CountUp end={2} duration={2.5} separator="," />万
<CountUp end={2} duration={duration} separator="," />万
</span>
科技人才中{text2}搜索{text3}
</p>

29
src/components/Option/Playground/PlaygroundIod.tsx
View File

@ -19,7 +19,7 @@ interface IodPlaygroundContextType {
setDetailHeader: React.Dispatch<React.SetStateAction<React.ReactNode>>
detailMain: React.ReactNode
setDetailMain: React.Dispatch<React.SetStateAction<React.ReactNode>>
currentMessage: Message | null
currentIodMessage: Message | null
}
// 创建 Context
@ -38,7 +38,9 @@ export const useIodPlaygroundContext = () => {
return context
}
export const PlaygroundIod = () => {
const PlaygroundIodProvider: React.FC<{ children: React.ReactNode }> = ({
children
}) => {
const { messages, iodLoading, currentMessageId, iodSearch } =
useMessageOption()
@ -46,7 +48,7 @@ export const PlaygroundIod = () => {
const [detailHeader, setDetailHeader] = useState(<></>)
const [detailMain, setDetailMain] = useState(<></>)
const currentMessage = useMemo<Message | null>(() => {
const currentIodMessage = useMemo<Message | null>(() => {
if (iodLoading) {
return null
}
@ -73,7 +75,7 @@ export const PlaygroundIod = () => {
return (
<PlaygroundContext.Provider
value={{
currentMessage,
currentIodMessage,
showPlayground,
setShowPlayground,
detailMain,
@ -81,9 +83,7 @@ export const PlaygroundIod = () => {
detailHeader,
setDetailHeader
}}>
<div className="w-[36%] h-full pt-16 pr-5 pb-0">
<PlaygroundContent />
</div>
{children}
</PlaygroundContext.Provider>
)
}
@ -111,7 +111,9 @@ const PlaygroundContent = () => {
className="h-full grid grid-rows-12 gap-3">
<div className="w-full row-span-5">
<PlaygroundIodRelevant
className={classNames.replace("!bg-[rgba(240,245,255,0.3)]", "").replace("shadow-xl", "")}
className={classNames
.replace("!bg-[rgba(240,245,255,0.3)]", "")
.replace("shadow-xl", "")}
/>
</div>
<div className="w-full row-span-4 grid grid-cols-2 gap-3 custom-scrollbar">
@ -151,3 +153,14 @@ const PlaygroundContent = () => {
</AnimatePresence>
)
}
export const PlaygroundIod = () => {
return (
<div className="w-[36%] h-full pt-16 pr-5 pb-0">
<PlaygroundIodProvider>
<PlaygroundContent />
</PlaygroundIodProvider>
</div>
)
}