feat(playground): adjust layout sizes for panels and improve result display structure

This commit is contained in:
ngc2207 2025-01-08 20:41:06 +08:00
parent c0a8240008
commit 9af363dbdb
2 changed files with 14 additions and 12 deletions

View File

@ -18,17 +18,13 @@ export default function PlaygroundLayout() {
<ResizablePanelGroup direction="horizontal"> <ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={25}>One</ResizablePanel> <ResizablePanel defaultSize={25}>One</ResizablePanel>
<ResizableHandle className="bg-[#3e4452]" /> <ResizableHandle className="bg-[#3e4452]" />
<ResizablePanel defaultSize={75}> <ResizablePanel defaultSize={50}>
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup direction="vertical">
<ResizablePanel defaultSize={75}> <ResizablePanel defaultSize={75}>
<ResizablePanelGroup direction="horizontal"> <ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={75}> <ResizablePanel defaultSize={75}>
<EditorPanel /> <EditorPanel />
</ResizablePanel> </ResizablePanel>
<ResizableHandle className="bg-[#3e4452]" />
<ResizablePanel defaultSize={25}>
<Chat />
</ResizablePanel>
</ResizablePanelGroup> </ResizablePanelGroup>
</ResizablePanel> </ResizablePanel>
<ResizableHandle className="bg-[#3e4452]" /> <ResizableHandle className="bg-[#3e4452]" />
@ -37,6 +33,10 @@ export default function PlaygroundLayout() {
</ResizablePanel> </ResizablePanel>
</ResizablePanelGroup> </ResizablePanelGroup>
</ResizablePanel> </ResizablePanel>
<ResizableHandle className="bg-[#3e4452]" />
<ResizablePanel defaultSize={25}>
<Chat />
</ResizablePanel>
</ResizablePanelGroup> </ResizablePanelGroup>
</div> </div>
</div> </div>

View File

@ -12,14 +12,16 @@ export default function ResultPage() {
return ( return (
<> <>
{type && message && ( {type && message && (
<ScrollArea className="h-full bg-[#272B33]"> <>
<Message type={type} message={message} /> <Message type={type} message={message} />
<ScrollArea className="h-full bg-[#272B33]">
{output && ( {output && (
<SyntaxHighlighter language="bash" style={oneDark}> <SyntaxHighlighter language="bash" style={oneDark}>
{output} {output}
</SyntaxHighlighter> </SyntaxHighlighter>
)} )}
</ScrollArea> </ScrollArea>
</>
)} )}
</> </>
); );