refactor(app): 优化 AI编辑器测试页布局

- 使用 flex 布局实现页面高度自适应
- 将测试用例展示区域高度设置为屏幕高度的 1/3
- DiffEditor 容器占据剩余的 2/3 屏幕高度
This commit is contained in:
fly6516 2025-05-16 10:10:53 +08:00
parent faf6a60821
commit a89864e70e

View File

@ -18,22 +18,22 @@ export default function TestAiEditorPage() {
};
return (
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">AI </h1>
{/* 测试用例展示 */}
<div className="mb-6">
<div className="flex flex-col h-screen mx-auto p-4">
{/* 测试用例展示区域 - 固定高度1/3 */}
<div className="mb-6 h-1/3">
<h2 className="text-xl font-semibold mb-2"></h2>
<pre className="bg-muted p-4 rounded-md overflow-x-auto">
{testInput.code}
</pre>
</div>
{/* 测试组件 */}
<AIProblemEditor
initialCode={testInput.code}
problemId={testInput.problemId}
/>
{/* DiffEditor容器 - 占据剩余2/3高度 */}
<div className="flex-grow">
<AIProblemEditor
initialCode={testInput.code}
problemId={testInput.problemId}
/>
</div>
</div>
);
}