776ea078a6
### What problem does this PR solve? Fix: Optimized the table of contents style and homepage card layout #3221 - Added background color, text color, and shadow styles to the Markdown table of contents - Optimized the date display style in the HomeCard component to prevent overflow - Standardized the translation of "dataset" to "knowledge base" to improve terminology consistency ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { IconFont } from '@/components/icon-font';
|
|
import { RenameDialog } from '@/components/rename-dialog';
|
|
import { CardSkeleton } from '@/components/ui/skeleton';
|
|
import { useFetchNextKnowledgeListByPage } from '@/hooks/use-knowledge-request';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { DatasetCard, SeeAllCard } from '../datasets/dataset-card';
|
|
import { useRenameDataset } from '../datasets/use-rename-dataset';
|
|
|
|
export function Datasets() {
|
|
const { t } = useTranslation();
|
|
const { kbs, loading } = useFetchNextKnowledgeListByPage();
|
|
const {
|
|
datasetRenameLoading,
|
|
initialDatasetName,
|
|
onDatasetRenameOk,
|
|
datasetRenameVisible,
|
|
hideDatasetRenameModal,
|
|
showDatasetRenameModal,
|
|
} = useRenameDataset();
|
|
|
|
return (
|
|
<section>
|
|
<h2 className="text-2xl font-bold mb-6 flex gap-2.5 items-center">
|
|
<IconFont name="data" className="size-8"></IconFont>
|
|
{t('header.dataset')}
|
|
</h2>
|
|
<div className="flex gap-6">
|
|
{loading ? (
|
|
<div className="flex-1">
|
|
<CardSkeleton />
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 3xl:grid-cols-7 max-h-[78vh] overflow-auto">
|
|
{kbs
|
|
?.slice(0, 6)
|
|
.map((dataset) => (
|
|
<DatasetCard
|
|
key={dataset.id}
|
|
dataset={dataset}
|
|
showDatasetRenameModal={showDatasetRenameModal}
|
|
></DatasetCard>
|
|
))}
|
|
<div className="min-h-24">
|
|
<SeeAllCard></SeeAllCard>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{datasetRenameVisible && (
|
|
<RenameDialog
|
|
hideModal={hideDatasetRenameModal}
|
|
onOk={onDatasetRenameOk}
|
|
initialName={initialDatasetName}
|
|
loading={datasetRenameLoading}
|
|
></RenameDialog>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|