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

- 优化 IodRelevant 组件中的加载状态和计数器动画
- 重构 PlaygroundIod 组件，使用新的 PlaygroundIodProvider 组件
- 改进 Context 提供的数据结构，使用更准确的命名

src/components/Common/Playground/IodRelevant.tsx

@@ -235,25 +235,28 @@ export const PlaygroundIodRelevant: React.FC<Props> = ({ className }) => {
       (message) => message.id === currentMessageId
     )
 
-    const text = (iodSearch && iodLoading) ? '正' : '已'
+    const loading = (iodSearch && iodLoading)
-    const text2 = (iodSearch && iodLoading) ?  '进行' : '完成'
+    const text = loading ? '正' : '已'
-    const text3 = (iodSearch && iodLoading) ?  '……' : ''
+    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>

src/components/Option/Playground/PlaygroundIod.tsx

@@ -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">
+      {children}
-        <PlaygroundContent />
-      </div>
     </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>
+  )
+}