refactor(layout): 优化团队页面布局和滚动

- 在 Team组件中添加 overflow-y-auto 以启用垂直滚动
- 在 Playground组件中调整网格布局,移除不必要的导入
- 优化消息列表布局,确保内容可以滚动
This commit is contained in:
zhaoweijie 2025-08-19 18:13:15 +08:00
parent 48404fb316
commit df0bf51bdf
2 changed files with 4 additions and 5 deletions

View File

@ -72,7 +72,7 @@ export const PlaygroundTeam = () => {
/> />
{/* 场景列表 */} {/* 场景列表 */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3 flex-1 overflow-y-auto">
{data.slice(0,2).map((item, index) => ( {data.slice(0,2).map((item, index) => (
<Card key={index} hoverable className="[&>*:first-child]:!p-3" > <Card key={index} hoverable className="[&>*:first-child]:!p-3" >
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">

View File

@ -141,8 +141,6 @@ export const Playground = () => {
setRecentMessagesOnLoad() setRecentMessagesOnLoad()
}, []) }, [])
const { show } = useContext(HistoryContext)
return ( return (
<div <div
ref={drop} ref={drop}
@ -169,9 +167,10 @@ export const Playground = () => {
<PlaygroundForm dropedFile={dropedFile} /> <PlaygroundForm dropedFile={dropedFile} />
</div> </div>
</div> </div>
{/*auto_530px_165px*/}
{messages.length && ( {messages.length && (
<div <div
className="w-1/4 h-full grid grid-rows-[auto_530px_165px] pt-16 pr-5 pb-0 border-l border-gray-200" className="w-1/4 h-full grid grid-rows-[1fr_2fr_175px] pt-16 pr-5 pb-0 border-l border-gray-200"
style={{ paddingTop: "4rem" }}> style={{ paddingTop: "4rem" }}>
<div className="w-full overflow-y-auto border-gray-200 border-b p-3"> <div className="w-full overflow-y-auto border-gray-200 border-b p-3">
<PlaygroundIodRelevant /> <PlaygroundIodRelevant />
@ -180,7 +179,7 @@ export const Playground = () => {
<PlaygroundData /> <PlaygroundData />
<PlaygroundScene /> <PlaygroundScene />
</div> </div>
<div className="w-full p-3 pb-0"> <div className="w-full p-3">
<PlaygroundTeam /> <PlaygroundTeam />
</div> </div>
</div> </div>