refactor(components): 重构 playground组件

- 移除 Data、Scene 和 IodRelevant 组件中的 Drawer
- 优化 Data、Scene 和 IodRelevant 组件的结构
- 添加 Header 组件用于展示标题和关闭按钮
- 使用 Main 组件替代原来的 ShowCard 组件
- 调整样式和布局，提高组件的可复用性和可维护性

src/libs/playground.tsx

@@ -1,14 +1,12 @@
-import RocketSvg from "@/assets/icons/rocket.svg"
-import BulbSvg from "@/assets/icons/bulb.svg"
-import EyeSvg from "@/assets/icons/eye.svg"
-import ASvg from "@/assets/icons/a.svg"
-import BSvg from "@/assets/icons/b.svg"
-import CSvg from "@/assets/icons/c.svg"
-import DSvg from "@/assets/icons/d.svg"
-import ESvg from "@/assets/icons/e.svg"
-import FSvg from "@/assets/icons/f.svg"
+import { Avatar } from "antd"
+import { MedicineBottleFillIcon } from "@/components/Icons/MedicineBottleFill.tsx"
+import { CheckIcon } from "@/components/Icons/Check.tsx"
+import { NewBottleIcon } from "@/components/Icons/NewBottle.tsx"
+import { BatteryIcon } from "@/components/Icons/Battery.tsx"
+import { ShipIcon } from "@/components/Icons/Ship.tsx"
+import { Ship1Icon } from "@/components/Icons/Ship1.tsx"
 
-export const qaPrompt =[
+export const qaPrompt = [
   // {
   //   title: "如何开发一个适合超大型城市的碳普惠方法学？",
   //   icon: <img src={RocketSvg} alt="Rocket" className="w-10 my-0" />,
@@ -23,29 +21,71 @@ export const qaPrompt =[
   // },
   {
     title: "新药临床研究如何提升实验安全性？",
-    icon: <img src={ASvg} alt="Rocket" className="w-10 my-0" />,
+    icon: (
+      <Avatar
+        className="!bg-[#3581e3b3]"
+        shape="square"
+        size={40}
+        icon={<MedicineBottleFillIcon className="w-7" />}
+      />
+    )
   },
   {
     title: "如何加速新药申报和审批？",
-    icon: <img src={BSvg} alt="Rocket" className="w-10 my-0" />,
+    icon: (
+      <Avatar
+        className="!bg-[#3581e3b3]"
+        shape="square"
+        size={40}
+        icon={<CheckIcon className="w-7" />}
+      />
+    )
   },
   {
     title: "如何研制与司美格鲁肽相似的新药？",
-    icon: <img src={CSvg} alt="Rocket" className="w-10 my-0" />,
+    icon: (
+      <Avatar
+        className="!bg-[#3581e3b3]"
+        shape="square"
+        size={40}
+        icon={<NewBottleIcon className="w-7" />}
+      />
+    )
   },
   {
     title: "如何解决固态电池的成本和寿命难题？",
-    icon: <img src={DSvg} alt="Rocket" className="w-10 my-0" />,
+    icon: (
+      <Avatar
+        className="!bg-[#3581e3b3]"
+        shape="square"
+        size={40}
+        icon={<BatteryIcon className="w-7" />}
+      />
+    )
   },
   {
     title: "如何解决船舶制造中的材料腐蚀难题？",
-    icon: <img src={ESvg} alt="Rocket" className="w-10 my-0" />,
+    icon: (
+      <Avatar
+        className="!bg-[#3581e3b3]"
+        shape="square"
+        size={40}
+        icon={<ShipIcon className="w-7" />}
+      />
+    )
   },
   {
     title: "如何解决船舶制造中流体模拟和建模优化难题？",
-    icon: <img src={FSvg} alt="Rocket" className="w-10 my-0" />,
-  },
+    icon: (
+      <Avatar
+        className="!bg-[#3581e3b3]"
+        shape="square"
+        size={40}
+        icon={<Ship1Icon className="w-7" />}
+      />
+    )
+  }
 ].map((item, index) => ({
   ...item,
-  id: index.toString(),
+  id: index.toString()
 }))