refactor(components): 重构 Playground组件中的数据展示逻辑

-移除了 useEffect 钩用，改用函数式组件的按需渲染
- 优化了 Header组件的点击事件处理，提高代码复用性
- 统一了数据加载和展示的逻辑，提升组件可维护性

src/components/Common/Playground/Data.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react"
+import React, { useMemo } from "react"
 import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
 import { Card, Skeleton } from "antd"
 import { useMessageOption } from "@/hooks/useMessageOption.tsx"
@@ -109,7 +109,7 @@ const Main: React.FC<MainProps> = ({ data, loading, truncate = true }) => (
 type Props = {
   className?: string
 }
-export const PlaygroundData: React.FC<Props> = ({className}) => {
+export const PlaygroundData: React.FC<Props> = ({ className }) => {
   const { messages, iodLoading, currentMessageId, iodSearch } =
     useMessageOption()
 
@@ -136,7 +136,8 @@ export const PlaygroundData: React.FC<Props> = ({className}) => {
     return messages.length > 0 ? "推荐数据" : "热点数据"
   }, [messages])
 
-  useEffect(() => {
+  const showMore = () => {
+    setShowPlayground(false)
     setDetailHeader(
       <Header
         title={title}
@@ -145,15 +146,13 @@ export const PlaygroundData: React.FC<Props> = ({className}) => {
       />
     )
     setDetailMain(<Main loading={iodLoading} data={data} truncate={false} />)
-  }, [title, iodLoading, data])
+  }
 
   return (
-    <Card
-      className={`${className}`}
-      hoverable>
+    <Card className={`${className}`} hoverable>
       <div className="h-full flex flex-col gap-2 relative">
         {/* 数据导航 */}
-        <Header title={title} onClick={() => setShowPlayground(false)} />
+        <Header title={title} onClick={showMore} />
         {/* 数据列表 */}
         <Main loading={iodLoading} data={data.slice(0, 3)} />
       </div>

src/components/Common/Playground/Scene.tsx

@@ -128,12 +128,17 @@ export const PlaygroundScene: React.FC<Props> = ({ className }) => {
     return messages.length > 0 ? "推荐场景" : "热点场景"
   }, [messages])
 
-  useEffect(() => {
+  const showMore = () => {
+    setShowPlayground(false)
     setDetailHeader(
-      <Header title={title} showButton={false} onClick={() => setShowPlayground(false)} />
+      <Header
+        title={title}
+        showButton={false}
+        onClick={() => setShowPlayground(false)}
+      />
     )
     setDetailMain(<Main loading={iodLoading} data={data} truncate={false} />)
-  }, [title, iodLoading, data])
+  }
 
   return (
     <Card
@@ -141,7 +146,7 @@ export const PlaygroundScene: React.FC<Props> = ({ className }) => {
       hoverable>
       <div className="h-full flex flex-col gap-2 relative">
         {/* 数据导航 */}
-        <Header title={title} onClick={() => setShowPlayground(false)} />
+        <Header title={title} onClick={showMore} />
 
         {/* 数据列表 */}
         <Main loading={iodLoading} data={data.slice(0, 3)} />

src/components/Common/Playground/Team.tsx

@@ -138,7 +138,8 @@ export const PlaygroundTeam: React.FC<Props> = ({ className }) => {
     return messages.length > 0 ? "推荐团队" : "热点团队"
   }, [messages])
 
-  useEffect(() => {
+  const showMore = () => {
+    setShowPlayground(false)
     setDetailHeader(
       <Header
         title={title}
@@ -146,16 +147,15 @@ export const PlaygroundTeam: React.FC<Props> = ({ className }) => {
         onClick={() => setShowPlayground(false)}
       />
     )
-    setDetailMain(
-      <Main loading={iodLoading} data={data} truncate={false} flat={false} />
-    )
-  }, [title, iodLoading, data])
+    setDetailMain(<Main loading={iodLoading} data={data} truncate={false} flat={false} />)
+  }
+
 
   return (
     <Card className={`${className}`} hoverable>
       <div className="h-full flex flex-col gap-2 relative">
         {/* 数据导航 */}
-        <Header title={title} onClick={() => setShowPlayground(false)} />
+        <Header title={title} onClick={showMore} />
         {/* 数据列表 */}
         <Main loading={iodLoading} data={data.slice(0, 3)} />
       </div>