q792602257/DataMate
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update data synthesis page ui (#60)

Browse Source 
* feat: Update site name to DataMate and refine text for AI data processing

* feat: Refactor settings page and implement model access functionality

- Created a new ModelAccess component for managing model configurations.
- Removed the old Settings component and replaced it with a new SettingsPage component that integrates ModelAccess, SystemConfig, and WebhookConfig.
- Added SystemConfig component for managing system settings.
- Implemented WebhookConfig component for managing webhook configurations.
- Updated API functions for model management in settings.apis.ts.
- Adjusted routing to point to the new SettingsPage component.

* feat: Implement Data Collection Page with Task Management and Execution Log

- Created DataCollectionPage component to manage data collection tasks.
- Added TaskManagement and ExecutionLog components for task handling and logging.
- Integrated task operations including start, stop, edit, and delete functionalities.
- Implemented filtering and searching capabilities in task management.
- Introduced SimpleCronScheduler for scheduling tasks with cron expressions.
- Updated CreateTask component to utilize new scheduling and template features.
- Enhanced BasicInformation component to conditionally render fields based on visibility settings.
- Refactored ImportConfiguration component to remove NAS import section.

* feat: Update task creation API endpoint and enhance task creation form with new fields and validation

* Refactor file upload and operator management components

- Removed unnecessary console logs from file download and export functions.
- Added size property to TaskItem interface for better task management.
- Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic.
- Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently.
- Updated ConfigureStep component to use Ant Design Form for better data handling and validation.
- Improved PreviewStep component to navigate back to the operator market.
- Added support for additional file types in UploadStep component.
- Implemented delete operator functionality in OperatorMarketPage with confirmation prompts.
- Cleaned up unused API functions in operator.api.ts to streamline the codebase.
- Fixed number formatting utility to handle zero values correctly.

* Refactor Knowledge Generation to Knowledge Base

- Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files.
- Added constants for Knowledge Base status and type mappings.
- Defined models for Knowledge Base and related files.
- Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure.
- Updated routing to reflect the new Knowledge Base paths.
- Adjusted menu items to align with the new Knowledge Base terminology.
- Modified ModelAccess interface to include modelName and type properties.

* feat: Implement Knowledge Base Page with CRUD operations and data management

- Added KnowledgeBasePage component for displaying and managing knowledge bases.
- Integrated search and filter functionalities with SearchControls component.
- Implemented CreateKnowledgeBase component for creating and editing knowledge bases.
- Enhanced AddDataDialog for file uploads and dataset selections.
- Introduced TableTransfer component for managing data transfers between tables.
- Updated API functions for knowledge base operations, including file management.
- Refactored knowledge base model to include file status and metadata.
- Adjusted routing to point to the new KnowledgeBasePage.

* feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates

* refactor: remove unused components and clean up API logging in KnowledgeBase

* feat: update icons in various components and improve styling for better UI consistency

* fix: adjust upload step handling and improve error display in configuration step

* feat: Add RatioTransfer component for dataset selection and configuration

- Implemented RatioTransfer component to manage dataset selection and ratio configuration.
- Integrated dataset fetching with search and filter capabilities.
- Added RatioConfig component for displaying and updating selected datasets' configurations.
- Enhanced SelectDataset component with improved UI and functionality for dataset selection.
- Updated RatioTasksPage to utilize new ratio task status mapping and improved error handling for task deletion.
- Refactored ratio model and constants for better type safety and clarity.
- Changed Vite configuration to use local backend service for development.
This commit is contained in:
chenghh-9609
2025-11-06 15:39:06 +08:00
committed by GitHub
parent 1686f56641
commit d84152b45f
11 changed files with 857 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/pages/RatioTask/Create/components/BasicInformation.tsx
View File

@@ -7,9 +7,11 @@ interface BasicInformationProps {
totalTargetCount: number;
}
const BasicInformation: React.FC<BasicInformationProps> = ({ totalTargetCount }) => {
const BasicInformation: React.FC<BasicInformationProps> = ({
totalTargetCount,
}) => {
return (
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="grid grid-cols-2 gap-2">
<Form.Item
label="任务名称"
name="name"

354
frontend/src/pages/RatioTask/Create/components/RatioConfig.tsx
View File

@@ -1,5 +1,5 @@
import React from "react";
import { Badge, Card, Input, Progress } from "antd";
import React, { useMemo, useState } from "react";
import { Badge, Card, Input, Progress, Button, Divider } from "antd";
import { BarChart3 } from "lucide-react";
import type { Dataset } from "@/pages/DataManagement/dataset.model.ts";
@@ -16,32 +16,150 @@ interface RatioConfigProps {
ratioType: "dataset" | "label";
selectedDatasets: string[];
datasets: Dataset[];
ratioConfigs: RatioConfigItem[];
totalTargetCount: number;
distributions: Record<string, Record<string, number>>;
onUpdateDatasetQuantity: (datasetId: string, quantity: number) => void;
onUpdateLabelQuantity: (datasetId: string, label: string, quantity: number) => void;
onChange?: (configs: RatioConfigItem[]) => void;
}
const RatioConfig: React.FC<RatioConfigProps> = ({
ratioType,
selectedDatasets,
datasets,
ratioConfigs,
totalTargetCount,
distributions,
onUpdateDatasetQuantity,
onUpdateLabelQuantity,
onChange,
}) => {
const totalConfigured = ratioConfigs.reduce((sum, c) => sum + (c.quantity || 0), 0);
const [ratioConfigs, setRatioConfigs] = useState<RatioConfigItem[]>([]);
// 配比项总数
const totalConfigured = useMemo(
() => ratioConfigs.reduce((sum, c) => sum + (c.quantity || 0), 0),
[ratioConfigs]
);
// 更新数据集配比项
const updateDatasetQuantity = (datasetId: string, quantity: number) => {
setRatioConfigs((prev) => {
const existingIndex = prev.findIndex(
(config) => config.source === datasetId
);
const totalOtherQuantity = prev
.filter((config) => config.source !== datasetId)
.reduce((sum, config) => sum + config.quantity, 0);
const dataset = datasets.find((d) => String(d.id) === datasetId);
const newConfig: RatioConfigItem = {
id: datasetId,
name: dataset?.name || datasetId,
type: ratioType,
quantity: Math.min(quantity, totalTargetCount - totalOtherQuantity),
percentage: Math.round((quantity / totalTargetCount) * 100),
source: datasetId,
};
let newConfigs;
if (existingIndex >= 0) {
newConfigs = [...prev];
newConfigs[existingIndex] = newConfig;
} else {
newConfigs = [...prev, newConfig];
}
onChange?.(newConfigs);
return newConfigs;
});
};
// 自动平均分配
const generateAutoRatio = () => {
const selectedCount = selectedDatasets.length;
if (selectedCount === 0) return;
const baseQuantity = Math.floor(totalTargetCount / selectedCount);
const remainder = totalTargetCount % selectedCount;
const newConfigs = selectedDatasets.map((datasetId, index) => {
const dataset = datasets.find((d) => String(d.id) === datasetId);
const quantity = baseQuantity + (index < remainder ? 1 : 0);
return {
id: datasetId,
name: dataset?.name || datasetId,
type: ratioType,
quantity,
percentage: Math.round((quantity / totalTargetCount) * 100),
source: datasetId,
};
});
setRatioConfigs(newConfigs);
onChange?.(newConfigs);
};
// 标签模式下，更新某数据集的某个标签的数量
const updateLabelQuantity = (
datasetId: string,
label: string,
quantity: number
) => {
const sourceKey = `${datasetId}_${label}`;
setRatioConfigs((prev) => {
const existingIndex = prev.findIndex((c) => c.source === sourceKey);
const totalOtherQuantity = prev
.filter((c) => c.source !== sourceKey)
.reduce((sum, c) => sum + c.quantity, 0);
const dist = distributions[datasetId] || {};
const labelMax = dist[label] ?? Infinity;
const cappedQuantity = Math.max(
0,
Math.min(quantity, totalTargetCount - totalOtherQuantity, labelMax)
);
const newConfig: RatioConfigItem = {
id: sourceKey,
name: label,
type: "label",
quantity: cappedQuantity,
percentage: Math.round((cappedQuantity / totalTargetCount) * 100),
source: sourceKey,
};
let newConfigs;
if (existingIndex >= 0) {
newConfigs = [...prev];
newConfigs[existingIndex] = newConfig;
} else {
newConfigs = [...prev, newConfig];
}
onChange?.(newConfigs);
return newConfigs;
});
};
// 选中数据集变化时，移除未选中的配比项
React.useEffect(() => {
setRatioConfigs((prev) => {
const next = prev.filter((c) => {
const id = String(c.source);
const dsId = id.includes("_") ? id.split("_")[0] : id;
return selectedDatasets.includes(dsId);
});
if (next !== prev) onChange?.(next);
return next;
});
// eslint-disable-next-line
}, [selectedDatasets]);
return (
<div className="mb-4">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">配比设置</span>
<span className="text-xs text-gray-500">
已配置: {totalConfigured} / {totalTargetCount}
<div className="border-card flex-1 flex flex-col min-w-[320px]">
<div className="flex items-center justify-between p-4 border-bottom">
<span className="text-sm font-bold">
配比配置
<span className="text-xs text-gray-500">
(已配置:{totalConfigured}/{totalTargetCount}条)
</span>
</span>
<Button
type="link"
size="small"
onClick={generateAutoRatio}
disabled={selectedDatasets.length === 0}
>
平均分配
</Button>
</div>
{selectedDatasets.length === 0 ? (
<div className="text-center py-8 text-gray-500">
@@ -49,80 +167,150 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
<p className="text-sm">请先选择数据集</p>
</div>
) : (
<div style={{ maxHeight: 500, overflowY: "auto" }}>
{selectedDatasets.map((datasetId) => {
const dataset = datasets.find((d) => String(d.id) === datasetId);
const config = ratioConfigs.find((c) => c.source === datasetId);
const currentQuantity = config?.quantity || 0;
if (!dataset) return null;
return (
<Card key={datasetId} size="small" className="mb-2">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">{dataset.name}</span>
<Badge color="gray">{dataset.fileCount}条</Badge>
<div className="flex-overflow-auto gap-4 p-4">
{/* 配比预览 */}
{ratioConfigs.length > 0 && (
<div>
<div className="p-3 bg-gray-50 rounded-lg">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-gray-500">总配比数量:</span>
<span className="ml-2 font-medium">
{ratioConfigs
.reduce((sum, config) => sum + config.quantity, 0)
.toLocaleString()}
</span>
</div>
<div>
<span className="text-gray-500">目标数量:</span>
<span className="ml-2 font-medium">
{totalTargetCount.toLocaleString()}
</span>
</div>
<div>
<span className="text-gray-500">配比项目:</span>
<span className="ml-2 font-medium">
{ratioConfigs.length}个
</span>
</div>
<div className="text-xs text-gray-500">{config?.percentage || 0}%</div>
</div>
{ratioType === "dataset" ? (
<div>
<div className="flex items-center gap-2 mb-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={currentQuantity}
onChange={(e) => onUpdateDatasetQuantity(datasetId, Number(e.target.value))}
style={{ width: 80 }}
min={0}
max={Math.min(dataset.fileCount || 0, totalTargetCount)}
/>
<span className="text-xs text-gray-500">条</span>
</div>
</div>
)}
<div className="flex-1 overflow-auto">
{selectedDatasets.map((datasetId) => {
const dataset = datasets.find((d) => String(d.id) === datasetId);
const config = ratioConfigs.find((c) => c.source === datasetId);
const currentQuantity = config?.quantity || 0;
if (!dataset) return null;
return (
<Card key={datasetId} size="small" className="mb-2">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<span className="font-medium text-sm">
{dataset.name}
</span>
<Badge color="gray">{dataset.fileCount}条</Badge>
</div>
<div className="text-xs text-gray-500">
{config?.percentage || 0}%
</div>
<Progress
percent={Math.round((currentQuantity / totalTargetCount) * 100)}
size="small"
/>
</div>
) : (
<div>
{!distributions[String(dataset.id)] ? (
<div className="text-xs text-gray-400">加载标签分布...</div>
) : Object.entries(distributions[String(dataset.id)]).length === 0 ? (
<div className="text-xs text-gray-400">该数据集暂无标签</div>
) : (
<div className="flex flex-col gap-2">
{Object.entries(distributions[String(dataset.id)]).map(([label, count]) => {
const sourceKey = `${datasetId}_${label}`;
const labelConfig = ratioConfigs.find((c) => c.source === sourceKey);
const labelQuantity = labelConfig?.quantity || 0;
return (
<div key={label} className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<Badge color="gray">{label}</Badge>
<span className="text-xs text-gray-500">{count}条</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={labelQuantity}
onChange={(e) => onUpdateLabelQuantity(datasetId, label, Number(e.target.value))}
style={{ width: 80 }}
min={0}
max={Math.min(Number(count) || 0, totalTargetCount)}
/>
<span className="text-xs text-gray-500">条</span>
</div>
</div>
);
})}
{ratioType === "dataset" ? (
<div>
<div className="flex items-center gap-2 mb-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={currentQuantity}
onChange={(e) =>
updateDatasetQuantity(
datasetId,
Number(e.target.value)
)
}
style={{ width: 80 }}
min={0}
max={Math.min(
dataset.fileCount || 0,
totalTargetCount
)}
/>
<span className="text-xs text-gray-500">条</span>
</div>
)}
</div>
)}
</Card>
);
})}
<Progress
percent={Math.round(
(currentQuantity / totalTargetCount) * 100
)}
size="small"
/>
</div>
) : (
<div>
{!distributions[String(dataset.id)] ? (
<div className="text-xs text-gray-400">
加载标签分布...
</div>
) : Object.entries(distributions[String(dataset.id)])
.length === 0 ? (
<div className="text-xs text-gray-400">
该数据集暂无标签
</div>
) : (
<div className="flex flex-col gap-2">
{Object.entries(
distributions[String(dataset.id)]
).map(([label, count]) => {
const sourceKey = `${datasetId}_${label}`;
const labelConfig = ratioConfigs.find(
(c) => c.source === sourceKey
);
const labelQuantity = labelConfig?.quantity || 0;
return (
<div
key={label}
className="flex items-center justify-between gap-2"
>
<div className="flex items-center gap-2">
<Badge color="gray">{label}</Badge>
<span className="text-xs text-gray-500">
{count}条
</span>
</div>
<div className="flex items-center gap-2">
<span className="text-xs">数量:</span>
<Input
type="number"
value={labelQuantity}
onChange={(e) =>
updateLabelQuantity(
datasetId,
label,
Number(e.target.value)
)
}
style={{ width: 80 }}
min={0}
max={Math.min(
Number(count) || 0,
totalTargetCount
)}
/>
<span className="text-xs text-gray-500">
条
</span>
</div>
</div>
);
})}
</div>
)}
</div>
)}
</Card>
);
})}
</div>
</div>
)}
</div>

169
frontend/src/pages/RatioTask/Create/components/RatioTransfer.tsx Normal file
View File

@@ -0,0 +1,169 @@
import React, { useMemo } from "react";
import { Table } from "antd";
import { TransferItem } from "antd/es/transfer";
import RatioConfig from "./RatioConfig";
import useFetchData from "@/hooks/useFetchData";
import { queryDatasetsUsingGet } from "@/pages/DataManagement/dataset.api";
import {
datasetTypeMap,
mapDataset,
} from "@/pages/DataManagement/dataset.const";
import { SearchControls } from "@/components/SearchControls";
const leftColumns = [
{
dataIndex: "name",
title: "名称",
ellipsis: true,
},
{
dataIndex: "datasetType",
title: "类型",
ellipsis: true,
width: 100,
render: (type: string) => datasetTypeMap[type].label,
},
{
dataIndex: "size",
title: "大小",
width: 100,
ellipsis: true,
},
];
export default function RatioTransfer(props: {
distributions: Record<string, Record<string, number>>;
ratioTaskForm: any;
updateRatioConfig: (datasetId: string, quantity: number) => void;
updateLabelRatioConfig: (
datasetId: string,
label: string,
quantity: number
) => void;
}) {
const {
updateLabelRatioConfig,
updateRatioConfig,
ratioTaskForm,
distributions,
} = props;
const {
tableData: datasets,
loading,
pagination,
searchParams,
setSearchParams,
handleFiltersChange,
} = useFetchData(queryDatasetsUsingGet, mapDataset);
const [selectedDatasets, setSelectedDatasets] = React.useState<
TransferItem[]
>([]);
const selectedRowKeys = useMemo(() => {
return selectedDatasets.map((item) => item.key);
}, [selectedDatasets]);
const [listDisabled, setListDisabled] = React.useState(false);
const generateAutoRatio = () => {
const selectedCount = ratioTaskForm.selectedDatasets.length;
if (selectedCount === 0) return;
const baseQuantity = Math.floor(
ratioTaskForm.totalTargetCount / selectedCount
);
const remainder = ratioTaskForm.totalTargetCount % selectedCount;
const newConfigs = ratioTaskForm.selectedDatasets.map(
(datasetId, index) => {
const quantity = baseQuantity + (index < remainder ? 1 : 0);
return {
id: datasetId,
name: datasetId,
type: ratioTaskForm.ratioType,
quantity,
percentage: Math.round(
(quantity / ratioTaskForm.totalTargetCount) * 100
),
source: datasetId,
};
}
);
setRatioTaskForm((prev) => ({ ...prev, ratioConfigs: newConfigs }));
};
return (
<div className="flex">
<div className="border-card flex-1 mr-4">
<h3 className="p-2 border-bottom">{`${selectedDatasets.length} / ${datasets.length} 项`}</h3>
<SearchControls
searchTerm={searchParams.keyword}
onSearchChange={(keyword) =>
setSearchParams({ ...searchParams, keyword })
}
searchPlaceholder="搜索数据集名称..."
filters={[
{
key: "type",
label: "数据集类型",
options: [
{ value: "dataset", label: "按数据集" },
{ value: "tag", label: "按标签" },
],
},
]}
onFiltersChange={handleFiltersChange}
onClearFilters={() =>
setSearchParams({ ...searchParams, filter: {} })
}
showViewToggle={false}
showReload={false}
className="m-4"
/>
<Table
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedDatasets(selectedRows);
},
selectedRowKeys,
selections: [
Table.SELECTION_ALL,
Table.SELECTION_INVERT,
Table.SELECTION_NONE,
],
}}
columns={leftColumns}
dataSource={datasets}
loading={loading}
pagination={pagination}
size="small"
rowKey="id"
style={{ pointerEvents: listDisabled ? "none" : undefined }}
onRow={(record) => ({
onClick: () => {
if (record.disabled || listDisabled) {
return;
}
setSelectedDatasets((prev) => {
if (prev.includes(record.key)) {
return prev.filter((k) => k !== record.key);
}
return [...prev, record.key];
});
},
})}
/>
</div>
<div className="border-card flex-1">
<RatioConfig
datasets={selectedDatasets}
ratioTaskForm={ratioTaskForm}
distributions={distributions}
onUpdateDatasetQuantity={updateRatioConfig}
onUpdateLabelQuantity={updateLabelRatioConfig}
/>
</div>
</div>
);
}

143
frontend/src/pages/RatioTask/Create/components/SelectDataset.tsx
View File

@@ -1,15 +1,21 @@
import React, { useEffect, useState } from "react";
import { Badge, Button, Card, Checkbox, Input, Pagination, Select } from "antd";
import { Database, Search as SearchIcon } from "lucide-react";
import { Search as SearchIcon } from "lucide-react";
import type { Dataset } from "@/pages/DataManagement/dataset.model.ts";
import { queryDatasetsUsingGet, queryDatasetByIdUsingGet, queryDatasetStatisticsByIdUsingGet } from "@/pages/DataManagement/dataset.api.ts";
import {
queryDatasetsUsingGet,
queryDatasetByIdUsingGet,
queryDatasetStatisticsByIdUsingGet,
} from "@/pages/DataManagement/dataset.api.ts";
interface SelectDatasetProps {
selectedDatasets: string[];
ratioType: "dataset" | "label";
onRatioTypeChange: (val: "dataset" | "label") => void;
onSelectedDatasetsChange: (next: string[]) => void;
onDistributionsChange?: (next: Record<string, Record<string, number>>) => void;
onDistributionsChange?: (
next: Record<string, Record<string, number>>
) => void;
onDatasetsChange?: (list: Dataset[]) => void;
}
@@ -25,7 +31,9 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
const [loading, setLoading] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [pagination, setPagination] = useState({ page: 1, size: 10, total: 0 });
const [distributions, setDistributions] = useState<Record<string, Record<string, number>>>({});
const [distributions, setDistributions] = useState<
Record<string, Record<string, number>>
>({});
// Fetch dataset list
useEffect(() => {
@@ -40,7 +48,10 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
const list = data?.content || data?.data || [];
setDatasets(list);
onDatasetsChange?.(list);
setPagination((prev) => ({ ...prev, total: data?.totalElements ?? data?.total ?? 0 }));
setPagination((prev) => ({
...prev,
total: data?.totalElements ?? data?.total ?? 0,
}));
} finally {
setLoading(false);
}
@@ -52,7 +63,9 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
useEffect(() => {
const fetchDistributions = async () => {
if (ratioType !== "label" || !datasets?.length) return;
const idsToFetch = datasets.map((d) => String(d.id)).filter((id) => !distributions[id]);
const idsToFetch = datasets
.map((d) => String(d.id))
.filter((id) => !distributions[id]);
if (!idsToFetch.length) return;
try {
const results = await Promise.all(
@@ -66,7 +79,9 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
})
);
const next: Record<string, Record<string, number>> = { ...distributions };
const next: Record<string, Record<string, number>> = {
...distributions,
};
for (const { id, stats } of results) {
let dist: Record<string, number> | undefined = undefined;
if (stats) {
@@ -77,13 +92,16 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
(stats as any).labels,
(stats as any).distribution,
];
let picked = candidates.find((c) => c && (typeof c === "object" || Array.isArray(c)));
let picked = candidates.find(
(c) => c && (typeof c === "object" || Array.isArray(c))
);
if (Array.isArray(picked)) {
const obj: Record<string, number> = {};
picked.forEach((it: any) => {
const key = it?.label ?? it?.name ?? it?.tag ?? it?.key;
const val = it?.count ?? it?.value ?? it?.num ?? it?.total;
if (key != null && typeof val === "number") obj[String(key)] = val;
if (key != null && typeof val === "number")
obj[String(key)] = val;
});
dist = obj;
} else if (picked && typeof picked === "object") {
@@ -107,7 +125,8 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
picked.forEach((it: any) => {
const key = it?.label ?? it?.name ?? it?.tag ?? it?.key;
const val = it?.count ?? it?.value ?? it?.num ?? it?.total;
if (key != null && typeof val === "number") obj[String(key)] = val;
if (key != null && typeof val === "number")
obj[String(key)] = val;
});
dist = obj;
} else if (picked && typeof picked === "object") {
@@ -135,7 +154,9 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
const next = Array.from(new Set([...selectedDatasets, datasetId]));
onSelectedDatasetsChange(next);
} else {
onSelectedDatasetsChange(selectedDatasets.filter((id) => id !== datasetId));
onSelectedDatasetsChange(
selectedDatasets.filter((id) => id !== datasetId)
);
}
};
@@ -144,36 +165,47 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
};
return (
<div className="col-span-5">
<h2 className="font-medium text-gray-900 text-lg mb-2 flex items-center gap-2">
<Database className="w-5 h-5" />
数据集选择
</h2>
<Card>
<div className="flex items-center gap-4 mb-4">
<span className="text-sm">配比方式:</span>
<Select
style={{ width: 120 }}
value={ratioType}
onChange={(v) => onRatioTypeChange(v)}
options={[
{ label: "按数据集", value: "dataset" },
{ label: "按标签", value: "label" },
]}
/>
<div className="border-card flex-1 flex flex-col min-w-[320px]">
<div className="flex items-center justify-between p-4 border-bottom">
<div className="flex items-center gap-4">
<span className="text-sm font-medium">
选择数据集
<span className="text-xs text-gray-500">
(已选择: {selectedDatasets.length}/{pagination.total})
</span>
</span>
</div>
<Input
prefix={<SearchIcon className="text-gray-400" />}
placeholder="搜索数据集"
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
setPagination((p) => ({ ...p, page: 1 }));
}}
<Button type="link" size="small" onClick={onClearSelection}>
清空选择
</Button>
</div>
<div className="flex-overflow-auto gap-4 p-4">
<div className="flex items-center gap-4">
<span className="text-sm">配比方式:</span>
<Select
className="flex-1 min-w-[120px]"
value={ratioType}
onChange={(v) => onRatioTypeChange(v)}
options={[
{ label: "按数据集", value: "dataset" },
{ label: "按标签", value: "label" },
]}
/>
<div style={{ maxHeight: 500, overflowY: "auto" }}>
</div>
<Input
prefix={<SearchIcon className="text-gray-400" />}
placeholder="搜索数据集"
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
setPagination((p) => ({ ...p, page: 1 }));
}}
/>
<div className="flex-1 overflow-auto">
{loading && (
<div className="text-center text-gray-500 py-8">正在加载数据集...</div>
<div className="text-center text-gray-500 py-8">
正在加载数据集...
</div>
)}
{!loading &&
datasets.map((dataset) => {
@@ -183,7 +215,9 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
<Card
key={dataset.id}
size="small"
className={`mb-2 cursor-pointer ${checked ? "border-blue-500" : "hover:border-blue-200"}`}
className={`cursor-pointer ${
checked ? "border-blue-500" : "hover:border-blue-200"
}`}
onClick={() => onToggleDataset(idStr, !checked)}
>
<div className="flex items-start gap-3">
@@ -193,10 +227,14 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
/>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="font-medium text-sm truncate">{dataset.name}</span>
<span className="font-medium text-sm truncate">
{dataset.name}
</span>
<Badge color="blue">{dataset.datasetType}</Badge>
</div>
<div className="text-xs text-gray-500 mt-1">{dataset.description}</div>
<div className="text-xs text-gray-500 mt-1">
{dataset.description}
</div>
<div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
<span>{dataset.fileCount}条</span>
<span>{dataset.size}</span>
@@ -209,14 +247,21 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
{Object.entries(distributions[idStr])
.slice(0, 8)
.map(([tag, count]) => (
<Badge key={tag} color="gray">{`${tag}: ${count}`}</Badge>
<Badge
key={tag}
color="gray"
>{`${tag}: ${count}`}</Badge>
))}
</div>
) : (
<div className="text-xs text-gray-400">未检测到标签分布</div>
<div className="text-xs text-gray-400">
未检测到标签分布
</div>
)
) : (
<div className="text-xs text-gray-400">加载标签分布...</div>
<div className="text-xs text-gray-400">
加载标签分布...
</div>
)}
</div>
)}
@@ -227,22 +272,20 @@ const SelectDataset: React.FC<SelectDatasetProps> = ({
})}
</div>
<div className="flex justify-between mt-3 items-center">
<span className="text-sm text-gray-600">已选择 {selectedDatasets.length} 个数据集</span>
<div className="flex items-center gap-3">
<Button size="small" onClick={onClearSelection}>
清空选择
</Button>
<Pagination
size="small"
current={pagination.page}
pageSize={pagination.size}
total={pagination.total}
showSizeChanger
onChange={(p, ps) => setPagination((prev) => ({ ...prev, page: p, size: ps }))}
onChange={(p, ps) =>
setPagination((prev) => ({ ...prev, page: p, size: ps }))
}
/>
</div>
</div>
</Card>
</div>
</div>
);
};