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

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

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">
-        <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>
+  )
+}