feature: multiple ratio configurations can be set for the data set. (#103)

feature: multiple ratio configurations can be set for the data set.

frontend/src/pages/RatioTask/Create/components/RatioConfig.tsx

@@ -1,11 +1,16 @@
-import React, { useMemo, useState } from "react";
-import { Badge, Card, Input, Progress, Button, DatePicker, Select } from "antd";
-import { BarChart3, Filter, Clock } from "lucide-react";
+import React, { useMemo, useState, useEffect, FC } from "react";
+import {
+  Badge,
+  Card,
+  Progress,
+  Button,
+  Select,
+  Table,
+  InputNumber,
+  Space,
+} from "antd";
+import { BarChart3, Filter } from "lucide-react";
 import type { Dataset } from "@/pages/DataManagement/dataset.model.ts";
-import dayjs from 'dayjs';
-
-const { RangePicker } = DatePicker;
-const { Option } = Select;
 
 const TIME_RANGE_OPTIONS = [
   { label: '最近1天', value: 1 },
@@ -21,9 +26,9 @@ interface RatioConfigItem {
   type: "dataset" | "label";
   quantity: number;
   percentage: number;
-  source: string;
+  source: string; // dataset id
   labelFilter?: string;
-  dateRange?: string;
+  dateRange?: number;
 }
 
 interface RatioConfigProps {
@@ -35,169 +40,113 @@ interface RatioConfigProps {
   onChange?: (configs: RatioConfigItem[]) => void;
 }
 
-const RatioConfig: React.FC<RatioConfigProps> = ({
-                                                   ratioType,
-                                                   selectedDatasets,
-                                                   datasets,
-                                                   totalTargetCount,
-                                                   distributions,
-                                                   onChange,
-                                                 }) => {
-  const [ratioConfigs, setRatioConfigs] = useState<RatioConfigItem[]>([]);
-  const [datasetFilters, setDatasetFilters] = useState<Record<string, {
-    labelFilter?: string;
-    dateRange?: string;
-  }>>({});
+const genId = (datasetId: string) =>
+  `${datasetId}-${Math.random().toString(36).slice(2, 9)}`;
+
+const RatioConfig: FC<RatioConfigProps> = ({
+                                             ratioType,
+                                             selectedDatasets,
+                                             datasets,
+                                             totalTargetCount,
+                                             distributions,
+                                             onChange,
+                                           }) => {
+  const [ratioConfigs, setRatioConfigs] = useState<RatioConfigItem[]>([]);
 
-  // 配比项总数
   const totalConfigured = useMemo(
     () => ratioConfigs.reduce((sum, c) => sum + (c.quantity || 0), 0),
     [ratioConfigs]
   );
 
-  // 获取数据集的标签列表
   const getDatasetLabels = (datasetId: string): string[] => {
     const dist = distributions[String(datasetId)] || {};
     return Object.keys(dist);
   };
 
-  // 自动平均分配
+  const addConfig = (datasetId: string) => {
+    const dataset = datasets.find((d) => String(d.id) === datasetId);
+    const newConfig: RatioConfigItem = {
+      id: genId(datasetId),
+      name: dataset?.name || datasetId,
+      type: ratioType,
+      quantity: 0,
+      percentage: 0,
+      source: datasetId,
+    };
+    const newConfigs = [...ratioConfigs, newConfig];
+    setRatioConfigs(newConfigs);
+    onChange?.(newConfigs);
+  };
+
+  const removeConfig = (configId: string) => {
+    const newConfigs = ratioConfigs.filter((c) => c.id !== configId);
+    const adjusted = recomputePercentages(newConfigs);
+    setRatioConfigs(adjusted);
+    onChange?.(adjusted);
+  };
+
+  const updateConfig = (
+    configId: string,
+    updates: Partial<
+      Pick<RatioConfigItem, "quantity" | "labelFilter" | "dateRange">
+    >
+  ) => {
+    const newConfigs = ratioConfigs.map((c) =>
+      c.id === configId ? { ...c, ...updates } : c
+    );
+    const adjusted = recomputePercentages(newConfigs);
+    setRatioConfigs(adjusted);
+    onChange?.(adjusted);
+  };
+
+  const recomputePercentages = (configs: RatioConfigItem[]) => {
+    return configs.map((c) => ({
+      ...c,
+      percentage:
+        totalTargetCount > 0
+          ? Math.round((c.quantity / totalTargetCount) * 100)
+          : 0,
+    }));
+  };
+
   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) => {
+
+    let newConfigs: RatioConfigItem[] = ratioConfigs.filter(
+      (c) => !selectedDatasets.includes(c.source)
+    );
+
+    selectedDatasets.forEach((datasetId, index) => {
       const dataset = datasets.find((d) => String(d.id) === datasetId);
       const quantity = baseQuantity + (index < remainder ? 1 : 0);
-      return {
-        id: datasetId,
+      const config: RatioConfigItem = {
+        id: genId(datasetId),
         name: dataset?.name || datasetId,
         type: ratioType,
         quantity,
         percentage: Math.round((quantity / totalTargetCount) * 100),
         source: datasetId,
-        labelFilter: datasetFilters[datasetId]?.labelFilter,
-        dateRange: datasetFilters[datasetId]?.dateRange,
       };
+      newConfigs.push(config);
     });
+
     setRatioConfigs(newConfigs);
     onChange?.(newConfigs);
   };
 
-  // 更新数据集配比项
-  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,
-        labelFilter: datasetFilters[datasetId]?.labelFilter,
-        dateRange: datasetFilters[datasetId]?.dateRange,
-      };
-
-      let newConfigs;
-      if (existingIndex >= 0) {
-        newConfigs = [...prev];
-        newConfigs[existingIndex] = newConfig;
-      } else {
-        newConfigs = [...prev, newConfig];
-      }
-      onChange?.(newConfigs);
-      return newConfigs;
-    });
-  };
-
-  // 更新筛选条件
-  const updateFilters = (datasetId: string, updates: {
-    labelFilter?: string;
-    dateRange?: [string, string];
-  }) => {
-    setDatasetFilters(prev => ({
-      ...prev,
-      [datasetId]: {
-        ...prev[datasetId],
-        ...updates,
-      }
-    }));
-  };
-
-  // 渲染筛选器
-  const renderFilters = (datasetId: string) => {
-    const labels = getDatasetLabels(datasetId);
-    const config = ratioConfigs.find(c => c.source === datasetId);
-    const filters = datasetFilters[datasetId] || {};
-
-    return (
-      <div className="mb-3 p-2 bg-gray-50 rounded">
-        <div className="flex items-center gap-2 mb-2">
-          <Filter size={14} className="text-gray-400" />
-          <span className="text-xs font-medium">筛选条件</span>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-          <div>
-            <div className="text-xs text-gray-500 mb-1">标签筛选</div>
-            <Select
-              style={{ width: '100%' }}
-              placeholder="选择标签"
-              value={filters.labelFilter}
-              onChange={(value) => updateFilters(datasetId, { labelFilter: value })}
-              allowClear
-              onClear={() => updateFilters(datasetId, { labelFilter: undefined })}
-            >
-              {labels.map(label => (
-                <Option key={label} value={label}>{label}</Option>
-              ))}
-            </Select>
-          </div>
-
-          <div>
-            <div className="text-xs text-gray-500 mb-1">标签更新时间</div>
-            <Select
-              style={{ width: '100%' }}
-              placeholder="选择标签更新时间"
-              value={filters.dateRange}
-              onChange={(dates) => updateFilters(datasetId, { dateRange: dates })}
-              allowClear
-              onClear={() => updateFilters(datasetId, { dateRange: undefined })}
-            >
-              {TIME_RANGE_OPTIONS.map(option => (
-                <Option key={option.value} value={option.value}>
-                  {option.label}
-                </Option>
-              ))}
-            </Select>
-          </div>
-        </div>
-      </div>
+  useEffect(() => {
+    const keep = ratioConfigs.filter((c) =>
+      selectedDatasets.includes(c.source)
     );
-  };
-
-  // 选中数据集变化时，初始化筛选条件
-  React.useEffect(() => {
-    const initialFilters: Record<string, any> = {};
-    selectedDatasets.forEach(datasetId => {
-      const config = ratioConfigs.find(c => c.source === datasetId);
-      if (config) {
-        initialFilters[datasetId] = {
-          labelFilter: config.labelFilter,
-          dateRange: config.dateRange,
-        };
-      }
-    });
-    setDatasetFilters(prev => ({ ...prev, ...initialFilters }));
+    if (keep.length !== ratioConfigs.length) {
+      const adjusted = recomputePercentages(keep);
+      setRatioConfigs(adjusted);
+      onChange?.(adjusted);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDatasets]);
 
   return (
@@ -209,15 +158,18 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
             (已配置:{totalConfigured}/{totalTargetCount}条)
           </span>
         </span>
-        <Button
-          type="link"
-          size="small"
-          onClick={generateAutoRatio}
-          disabled={selectedDatasets.length === 0}
-        >
-          平均分配
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            type="link"
+            size="small"
+            onClick={generateAutoRatio}
+            disabled={selectedDatasets.length === 0}
+          >
+            平均分配
+          </Button>
+        </div>
       </div>
+
       {selectedDatasets.length === 0 ? (
         <div className="text-center py-8 text-gray-500">
           <BarChart3 className="w-12 h-12 mx-auto mb-2 text-gray-300" />
@@ -225,7 +177,6 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
         </div>
       ) : (
         <div className="flex-overflow-auto gap-4 p-4">
-          {/* 配比预览 */}
           {ratioConfigs.length > 0 && (
             <div className="p-3 bg-gray-50 rounded-lg mb-4">
               <div className="grid grid-cols-2 gap-4 text-sm">
@@ -250,54 +201,146 @@ const RatioConfig: React.FC<RatioConfigProps> = ({
           <div className="flex-1 overflow-auto space-y-4">
             {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;
 
+              const datasetConfigs = ratioConfigs.filter(
+                (c) => c.source === datasetId
+              );
+
+              const labels = getDatasetLabels(datasetId);
+              const usedLabels = datasetConfigs
+                .map((c) => c.labelFilter)
+                .filter(Boolean) as string[];
+
+              const columns = [
+                {
+                  title: "配比项",
+                  dataIndex: "id",
+                  key: "id",
+                  render: (_: any, record: RatioConfigItem) => (
+                    <Space>
+                      <Filter size={14} className="text-gray-400" />
+                      <span className="text-sm">{record.name}</span>
+                    </Space>
+                  ),
+                },
+                {
+                  title: "标签筛选",
+                  dataIndex: "labelFilter",
+                  key: "labelFilter",
+                  render: (_: any, record: RatioConfigItem) => {
+                    const availableLabels = labels
+                      .map((l) => ({ label: l, value: l }))
+                      .filter(
+                        (opt) =>
+                          opt.value === record.labelFilter ||
+                          !usedLabels.includes(opt.value)
+                      );
+                    return (
+                      <Select
+                        style={{ width: "160px" }}
+                        placeholder="选择标签"
+                        value={record.labelFilter}
+                        options={availableLabels}
+                        allowClear
+                        onChange={(value) =>
+                          updateConfig(record.id, {
+                            labelFilter: value || undefined,
+                          })
+                        }
+                      />
+                    );
+                  },
+                },
+                {
+                  title: "标签更新时间",
+                  dataIndex: "dateRange",
+                  key: "dateRange",
+                  render: (_: any, record: RatioConfigItem) => (
+                    <Select
+                      style={{ width: "140px" }}
+                      placeholder="选择标签更新时间"
+                      value={record.dateRange}
+                      options={TIME_RANGE_OPTIONS}
+                      allowClear
+                      onChange={(value) =>
+                        updateConfig(record.id, {
+                          dateRange: value || undefined,
+                        })
+                      }
+                    />
+                  ),
+                },
+                {
+                  title: "数量",
+                  dataIndex: "quantity",
+                  key: "quantity",
+                  render: (_: any, record: RatioConfigItem) => (
+                    <InputNumber
+                      min={0}
+                      max={Math.min(dataset.fileCount || 0, totalTargetCount)}
+                      value={record.quantity}
+                      onChange={(v) =>
+                        updateConfig(record.id, { quantity: Number(v || 0) })
+                      }
+                    />
+                  ),
+                },
+                {
+                  title: "占比",
+                  dataIndex: "percentage",
+                  key: "percentage",
+                  render: (_: any, record: RatioConfigItem) => (
+                    <div style={{ minWidth: 140 }}>
+                      <div className="text-xs mb-1">
+                        {record.percentage ?? 0}%
+                      </div>
+                      <Progress
+                        percent={record.percentage ?? 0}
+                        size="small"
+                        showInfo={false}
+                      />
+                    </div>
+                  ),
+                },
+                {
+                  title: "操作",
+                  dataIndex: "actions",
+                  key: "actions",
+                  render: (_: any, record: RatioConfigItem) => (
+                    <Button danger size="small" onClick={() => removeConfig(record.id)}>
+                      删除
+                    </Button>
+                  ),
+                },
+              ];
+
               return (
                 <Card key={datasetId} size="small" className="mb-4">
                   <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>
+                      <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}%
+                      {datasetConfigs.reduce((s, c) => s + (c.percentage || 0), 0)}%
                     </div>
                   </div>
 
-                  {/* 筛选条件 */}
-                  {renderFilters(datasetId)}
-
-                  <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: 100 }}
-                      min={0}
-                      max={Math.min(
-                        dataset.fileCount || 0,
-                        totalTargetCount
-                      )}
-                    />
-                    <span className="text-xs text-gray-500">条</span>
-                  </div>
-                  <Progress
-                    percent={Math.round(
-                      (currentQuantity / totalTargetCount) * 100
-                    )}
+                  <Table
+                    dataSource={datasetConfigs}
+                    columns={columns}
+                    pagination={false}
+                    rowKey="id"
                     size="small"
+                    locale={{ emptyText: "暂无配比项，请添加" }}
                   />
+
+                  <div className="flex justify-end mt-3">
+                    <Button size="small" onClick={() => addConfig(datasetId)}>
+                      添加配比项
+                    </Button>
+                  </div>
                 </Card>
               );
             })}