Feat: Make the scroll bar of the DatasetSettings page appear inside #3221 (#4548)

### What problem does this PR solve?

Feat: Make the scroll bar of the DatasetSettings page appear inside
#3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2025-01-21 10:19:38 +08:00 committed by GitHub
parent db80376427
commit fc35821f81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 44 additions and 39 deletions

View File

@ -2,6 +2,7 @@
html {
height: 100%;
overflow: hidden; // The content of the DatasetSettings page is too high, which will cause scroll bars to appear on the html tags. Setting the maximum height in DatasetSettings does not work either. I don't understand.
}
body {

View File

@ -3,7 +3,7 @@ import { SideBar } from './sidebar';
export default function DatasetWrapper() {
return (
<div className="text-foreground flex flex-1">
<div className="flex flex-1">
<SideBar></SideBar>
<div className="flex-1">
<Outlet />

View File

@ -1,20 +1,24 @@
import { Card } from '@/components/ui/card';
import { Card, CardContent } from '@/components/ui/card';
import AdvancedSettingForm from './advanced-setting-form';
import BasicSettingForm from './basic-setting-form';
export default function DatasetSettings() {
return (
<section className="flex flex-col p-8 overflow-auto h-[80vh]">
<div className="text-3xl font-bold mb-6">Basic settings</div>
<Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
<div className="w-2/5">
<BasicSettingForm></BasicSettingForm>
</div>
<section className="p-8 overflow-y-scroll max-h-[90vh]">
<div className="text-3xl font-bold pb-6">Basic settings</div>
<Card className="border-0 p-6 bg-colors-background-inverse-weak">
<CardContent>
<div className="w-2/5">
<BasicSettingForm></BasicSettingForm>
</div>
</CardContent>
</Card>
<div className="text-3xl font-bold mb-6">Advanced settings</div>
<Card className="border-0 p-6 mb-8 bg-colors-background-inverse-weak">
<AdvancedSettingForm></AdvancedSettingForm>
<div className="text-3xl font-bold pb-6 pt-8">Advanced settings</div>
<Card className="border-0 p-6 bg-colors-background-inverse-weak">
<CardContent>
<AdvancedSettingForm></AdvancedSettingForm>
</CardContent>
</Card>
</section>
);

View File

@ -16,7 +16,7 @@ export default function RetrievalTesting() {
<h2 className="text-3xl font-bold mb-8 px-[10%]">
15 Results from 3 files
</h2>
<section className="flex flex-col gap-4 overflow-auto h-[85vh] px-[10%]">
<section className="flex flex-col gap-4 overflow-auto h-[83vh] px-[10%]">
{list.map((x, idx) => (
<Card
key={idx}

View File

@ -12,36 +12,36 @@ const modelLibraryList = new Array(4).fill(1);
export default function ModelManagement() {
return (
<section className="p-8 space-y-8">
<section className="p-8 space-y-8 ">
<div className="flex justify-between items-center ">
<h1 className="text-4xl font-bold">Team management</h1>
<Button className="hover:bg-[#6B4FD8] text-white bg-colors-background-core-standard">
Unfinished
</Button>
<Button>Unfinished</Button>
</div>
<div className="max-h-[84vh] overflow-auto">
<SystemModelSetting></SystemModelSetting>
<section className="mt-6">
<h2 className="text-2xl font-semibold mb-3">Added model</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
{addedModelList.map((x, idx) => (
<AddModelCard key={idx}></AddModelCard>
))}
</div>
</section>
<section className="mt-6">
<div className="flex justify-between items-center mb-3">
<h2 className="text-2xl font-semibold ">Model library</h2>
<Input
placeholder="search"
className="bg-colors-background-inverse-weak w-1/5"
></Input>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
{modelLibraryList.map((x, idx) => (
<ModelLibraryCard key={idx}></ModelLibraryCard>
))}
</div>
</section>
</div>
<SystemModelSetting></SystemModelSetting>
<section>
<h2 className="text-2xl font-semibold mb-3">Added model</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-4 gap-4">
{addedModelList.map((x, idx) => (
<AddModelCard key={idx}></AddModelCard>
))}
</div>
</section>
<section>
<div className="flex justify-between items-center mb-3">
<h2 className="text-2xl font-semibold ">Model library</h2>
<Input
placeholder="search"
className="bg-colors-background-inverse-weak w-1/5"
></Input>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-4">
{modelLibraryList.map((x, idx) => (
<ModelLibraryCard key={idx}></ModelLibraryCard>
))}
</div>
</section>
</section>
);
}