refactor(layout): 重构布局组件并添加新功能

- 更新 Header 组件，增加项目标题和历史记录切换按钮
- 新增 DataNavigation 组件用于数据导航
- 添加 Playground 相关新组件，包括数据、场景、团队等信息展示
- 重构 Layout 组件，使用 Context 管理历史记录状态
- 更新 zh/option.json 文件，添加新的项目标题和对话相关翻译

src/components/Common/Playground/Team.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react"
+import { DataNavigation } from "@/components/Common/DataNavigation.tsx"
+import { Card, Drawer, List } from "antd"
+
+export const PlaygroundTeam = () => {
+  // 模拟数据
+  const data = [
+    {
+      title: "绿色化工工艺项目",
+      description:
+        "基于生物基原料，采用repeal2.0可降解材料技术，开发新型环保材料。",
+      demander: "奥赛康药业 供方：美国Propella公司"
+    },
+    {
+      title: "智能农业解决方案",
+      description: "利用物联网技术，实现精准农业管理，提高农作物产量。",
+      demander: "奥赛康药业 供方：美国Propella公司"
+    },
+    {
+      title: "新能源汽车电池技术",
+      description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
+      demander: "奥赛康药业 供方：美国Propella公司"
+    },
+    {
+      title: "碳捕集与封存技术",
+      description: "开发高效的碳捕集技术，减少工业排放，助力碳中和目标。",
+      demander: "奥赛康药业 供方：美国Propella公司"
+    }
+  ]
+
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      title: "开发新型电池材料",
+      description: "研发高能量密度、长寿命的新型电池材料，推动电动汽车发展。",
+      demander: "奥赛康药业 供方：美国Propella公司"
+    })
+  }
+
+  const [open, setOpen] = useState(false)
+
+  const showDrawer = () => {
+    setOpen(true)
+  }
+
+  const onClose = () => {
+    setOpen(false)
+  }
+
+  return (
+    <div className="h-full overflow-y-hidden flex flex-col">
+      {/* 数据导航 */}
+      <DataNavigation
+        Header={
+          <div className="flex items-center text-[#15803d] gap-1">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="styles__StyledSVGIconPathComponent-sc-i3aj97-0 bxMexi svg-icon-path-icon"
+              viewBox="0 0 32 32"
+              width="20"
+              height="20">
+              <defs></defs>
+              <g>
+                <path
+                  fill="rgb(21, 128, 61)"
+                  d="M16 18H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2M6 6v10h10V6zm20 6v4h-4v-4zm0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2m0 12v4h-4v-4zm0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2m-10 2v4h-4v-4zm0-2h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"></path>
+              </g>
+            </svg>
+            相关团队
+          </div>
+        }
+        onClick={showDrawer}
+      />
+
+      {/* 场景列表 */}
+      <div className="grid grid-cols-2 gap-3">
+        {data.slice(0,2).map((item, index) => (
+          <Card key={index} hoverable className="[&>*:first-child]:!p-3" >
+            <div className="flex flex-col gap-0.5">
+              <h3 className="text-sm font-medium text-gray-900 line-clamp-2">
+                {item.title}
+              </h3>
+              <p className="flex items-center gap-1.5">
+                <span className="inline-block bg-blue-100 text-green-800 text-xs px-2 py-1 rounded-full">
+                  技 术 应
+                </span>
+                <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                  制 造
+                </span>
+              </p>
+              <p className="text-xs text-gray-500 line-clamp-2">{item.description}</p>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* 抽屉 */}
+      <Drawer
+        title="相关团队"
+        closable={{ "aria-label": "Close Button" }}
+        onClose={onClose}
+        open={open}
+        width={600}>
+        <List
+          itemLayout="vertical"
+          dataSource={data}
+          renderItem={(item, index) => (
+            <List.Item>
+              <List.Item.Meta
+                title={
+                  <h3 className="text-sm font-medium text-gray-900">
+                    {item.title}
+                  </h3>
+                }
+                description={
+                  <div className="space-y-1">
+                    <p className="flex items-center gap-1.5">
+                      <span className="inline-block bg-blue-100 text-green-800 text-xs px-2 py-1 rounded-full">
+                        技 术 应
+                      </span>
+                      <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                        制 造
+                      </span>
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      {item.description}
+                    </p>
+                  </div>
+                }
+              />
+            </List.Item>
+          )}
+        />
+      </Drawer>
+    </div>
+  )
+}