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} />
{output && ( <ScrollArea className="h-full bg-[#272B33]">
<SyntaxHighlighter language="bash" style={oneDark}> {output && (
{output} <SyntaxHighlighter language="bash" style={oneDark}>
</SyntaxHighlighter> {output}
)} </SyntaxHighlighter>
</ScrollArea> )}
</ScrollArea>
</>
)} )}
</> </>
); );