feat(components): 新增 Drawer 组件并优化 Playground 页面

- 新增 Drawer 组件用于创建可滑动的抽屉式界面
-优化 Playground 页面布局和样式,增加 logo 和 frosted glass 效果
- 添加统计卡片组件和动画效果,提升用户体验
- 新增数据项目图标组件
This commit is contained in:
zhaoweijie
2025-08-22 21:28:40 +08:00
parent 37a11fbb8b
commit 6fb71b01f0
20 changed files with 672 additions and 126 deletions

View File

@@ -1,13 +1,9 @@
import React, { useContext } from "react"
import { Card } from "antd"
import React from "react"
import { PlaygroundForm } from "./PlaygroundForm"
import { PlaygroundChat } from "./PlaygroundChat"
import { useMessageOption } from "@/hooks/useMessageOption"
import { webUIResumeLastChat } from "@/services/app"
import { PlaygroundData } from "@/components/Common/Playground/Data.tsx"
import { PlaygroundScene } from "@/components/Common/Playground/Scene.tsx"
import {
formatToChatHistory,
@@ -19,9 +15,8 @@ import { getLastUsedChatSystemPrompt } from "@/services/model-settings"
import { useStoreChatModelSettings } from "@/store/model"
import { useSmartScroll } from "@/hooks/useSmartScroll"
import { ChevronDown } from "lucide-react"
import { PlaygroundTeam } from "@/components/Common/Playground/Team.tsx"
import { PlaygroundHistory } from "@/components/Common/Playground/History.tsx"
import { PlaygroundIodRelevant } from "@/components/Common/Playground/IodRelevant.tsx"
import { PlaygroundIod } from "@/components/Option/Playground/PlaygroundIod.tsx"
export const Playground = () => {
const drop = React.useRef<HTMLDivElement>(null)
@@ -165,21 +160,7 @@ export const Playground = () => {
<PlaygroundForm dropedFile={dropedFile} />
</div>
</div>
{/*auto_530px_165px*/}
<div
className="w-4/12 h-full grid grid-rows-12 gap-3 pt-16 pr-5 pb-0"
style={{ paddingTop: "4rem" }}>
<div className="w-full row-span-5">
<PlaygroundIodRelevant />
</div>
<div className="w-full row-span-4 grid grid-cols-2 gap-3 custom-scrollbar">
<PlaygroundData />
<PlaygroundScene />
</div>
<div className="w-full row-span-3 pb-3">
<PlaygroundTeam />
</div>
</div>
<PlaygroundIod />
</div>
)
}