From 50af75d347aa3b4c444edf1bdfbcc2ac44bb4cfa Mon Sep 17 00:00:00 2001
From: zhaoweijie <zwjCheer@163.com>
Date: Sat, 23 Aug 2025 20:22:01 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E9=87=8D=E6=9E=84=20Pl?=
 =?UTF-8?q?ayground=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=9A=84=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-移除了 useEffect 钩用，改用函数式组件的按需渲染
- 优化了 Header组件的点击事件处理，提高代码复用性
- 统一了数据加载和展示的逻辑，提升组件可维护性
---
 src/components/Common/Playground/Data.tsx  | 15 +++++++--------
 src/components/Common/Playground/Scene.tsx | 13 +++++++++----
 src/components/Common/Playground/Team.tsx  | 12 ++++++------
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/Common/Playground/Data.tsx b/src/components/Common/Playground/Data.tsx
index d883570..185daec 100644
--- a/src/components/Common/Playground/Data.tsx
+++ b/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>
diff --git a/src/components/Common/Playground/Scene.tsx b/src/components/Common/Playground/Scene.tsx
index 5ec7cc3..264db8b 100644
--- a/src/components/Common/Playground/Scene.tsx
+++ b/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)} />
diff --git a/src/components/Common/Playground/Team.tsx b/src/components/Common/Playground/Team.tsx
index e9b49be..f94a13c 100644
--- a/src/components/Common/Playground/Team.tsx
+++ b/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>