init datamate

frontend/src/pages/DataManagement/Detail/components/DataLineageFlow.tsx

@@ -0,0 +1,52 @@
+import DevelopmentInProgress from "@/components/DevelopmentInProgress";
+import { Dataset } from "../../dataset.model";
+
+export default function DataLineageFlow(dataset: Dataset) {
+  return <DevelopmentInProgress showHome={false} />
+  const lineage = dataset.lineage;
+  if (!lineage) return null;
+
+  const steps = [
+    { name: "数据源", value: lineage.source, icon: Database },
+    ...lineage.processing.map((step, index) => ({
+      name: `处理${index + 1}`,
+      value: step,
+      icon: GitBranch,
+    })),
+  ];
+
+  if (lineage.training) {
+    steps.push({
+      name: "模型训练",
+      value: `${lineage.training.model} (准确率: ${lineage.training.accuracy}%)`,
+      icon: Target,
+    });
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        {steps.map((step, index) => (
+          <div key={index} className="flex items-start gap-4 pb-8 last:pb-0">
+            <div className="flex flex-col items-center">
+              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg">
+                <step.icon className="w-6 h-6 text-white" />
+              </div>
+              {index < steps.length - 1 && (
+                <div className="w-0.5 h-12 bg-gradient-to-b from-blue-200 to-indigo-200 mt-2"></div>
+              )}
+            </div>
+            <div className="flex-1 pt-3">
+              <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm hover:shadow-md transition-shadow">
+                <h5 className="font-semibold text-gray-900 mb-1">
+                  {step.name}
+                </h5>
+                <p className="text-sm text-gray-600">{step.value}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/DataManagement/Detail/components/DataQuality.tsx

@@ -0,0 +1,77 @@
+import DevelopmentInProgress from "@/components/DevelopmentInProgress";
+import { Card } from "antd";
+import { AlertTriangle } from "lucide-react";
+
+export default function DataQuality() {
+  return <DevelopmentInProgress showHome={false} />
+  return (
+    <div className=" mt-0">
+      <div className="grid md:grid-cols-2 gap-6">
+        <Card title="质量分布">
+          {[
+            { metric: "图像清晰度", value: 96.2, color: "bg-green-500" },
+            { metric: "色彩一致性", value: 94.8, color: "bg-blue-500" },
+            { metric: "标注完整性", value: 98.1, color: "bg-purple-500" },
+          ].map((item, index) => (
+            <div key={index} className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>{item.metric}</span>
+                <span className="font-semibold">{item.value}%</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-3">
+                <div
+                  className={`${item.color} h-3 rounded-full transition-all duration-500`}
+                  style={{ width: `${item.value}%` }}
+                ></div>
+              </div>
+            </div>
+          ))}
+        </Card>
+
+        <Card title="数据完整性">
+          {[
+            { metric: "文件完整性", value: 99.7, color: "bg-green-500" },
+            { metric: "元数据完整性", value: 97.3, color: "bg-blue-500" },
+            { metric: "标签一致性", value: 95.6, color: "bg-purple-500" },
+          ].map((item, index) => (
+            <div key={index} className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>{item.metric}</span>
+                <span className="font-semibold">{item.value}%</span>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-3">
+                <div
+                  className={`${item.color} h-3 rounded-full transition-all duration-500`}
+                  style={{ width: `${item.value}%` }}
+                ></div>
+              </div>
+            </div>
+          ))}
+        </Card>
+      </div>
+
+      <Card className="bg-gradient-to-r from-yellow-50 to-orange-50 border-yellow-200">
+        <div className="flex items-start gap-4">
+          <AlertTriangle className="w-6 h-6 text-yellow-600 mt-1 flex-shrink-0" />
+          <div>
+            <h4 className="font-semibold text-yellow-800 mb-2">质量改进建议</h4>
+            <ul className="text-sm text-yellow-700 space-y-2">
+              <li className="flex items-start gap-2">
+                <span className="w-1.5 h-1.5 bg-yellow-600 rounded-full mt-2 flex-shrink-0"></span>
+                建议对42张图像进行重新标注以提高准确性
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="w-1.5 h-1.5 bg-yellow-600 rounded-full mt-2 flex-shrink-0"></span>
+                检查并补充缺失的病理分级信息
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="w-1.5 h-1.5 bg-yellow-600 rounded-full mt-2 flex-shrink-0"></span>
+                考虑增加更多低分化样本以平衡数据分布
+              </li>
+            </ul>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/pages/DataManagement/Detail/components/ImportConfiguration.tsx

@@ -0,0 +1,235 @@
+import { Select, Input, Form, Radio, Modal, Button } from "antd";
+import { dataSourceOptions } from "../../dataset.const";
+import { Dataset, DataSource } from "../../dataset.model";
+import { useEffect, useState } from "react";
+import { queryTasksUsingGet } from "@/pages/DataCollection/collection.apis";
+import { useImportFile } from "../../hooks";
+import { updateDatasetByIdUsingPut } from "../../dataset.api";
+
+export default function ImportConfiguration({
+  data,
+  open,
+  onClose,
+  onRefresh,
+}: {
+  data?: Dataset;
+  open: boolean;
+  onClose: () => void;
+  onRefresh?: () => void;
+}) {
+  const [form] = Form.useForm();
+  const [collectionOptions, setCollectionOptions] = useState([]);
+  const [importConfig, setImportConfig] = useState<any>({
+    source: DataSource.UPLOAD,
+  });
+  const { importFileRender, handleUpload } = useImportFile();
+
+  // 获取归集任务列表
+  const fetchCollectionTasks = async () => {
+    try {
+      const res = await queryTasksUsingGet({ page: 0, size: 100 });
+      const options = res.data.content.map((task: any) => ({
+        label: task.name,
+        value: task.id,
+      }));
+      setCollectionOptions(options);
+    } catch (error) {
+      console.error("Error fetching collection tasks:", error);
+    }
+  };
+
+  const resetState = () => {
+    form.resetFields();
+    setImportConfig({ source: DataSource.UPLOAD });
+  };
+
+  const handleImportData = async () => {
+    if (importConfig.source === DataSource.UPLOAD) {
+      await handleUpload(data);
+    } else if (importConfig.source === DataSource.COLLECTION) {
+      await updateDatasetByIdUsingPut(data?.id!, {
+        ...importConfig,
+      });
+    }
+    resetState();
+    onRefresh?.();
+    onClose();
+  };
+
+  useEffect(() => {
+    if (open) fetchCollectionTasks();
+  }, [open]);
+
+  return (
+    <Modal
+      title="导入数据"
+      open={open}
+      width={600}
+      onCancel={onClose}
+      maskClosable={false}
+      footer={
+        <>
+          <Button onClick={onClose}>取消</Button>
+          <Button type="primary" onClick={handleImportData}>
+            确定
+          </Button>
+        </>
+      }
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={importConfig || {}}
+        onValuesChange={(_, allValues) => setImportConfig(allValues)}
+      >
+        <Form.Item
+          label="数据源"
+          name="source"
+          rules={[{ required: true, message: "请选择数据源" }]}
+        >
+          <Radio.Group
+            buttonStyle="solid"
+            options={dataSourceOptions}
+            optionType="button"
+          />
+        </Form.Item>
+        {importConfig?.source === DataSource.COLLECTION && (
+          <Form.Item name="dataSource" label="归集任务" required>
+            <Select placeholder="请选择归集任务" options={collectionOptions} />
+          </Form.Item>
+        )}
+
+        {/* nas import */}
+        {importConfig?.source === DataSource.NAS && (
+          <div className="grid grid-cols-2 gap-3 p-4 bg-blue-50 rounded-lg">
+            <Form.Item
+              name="nasPath"
+              rules={[{ required: true }]}
+              label="NAS地址"
+            >
+              <Input placeholder="192.168.1.100" />
+            </Form.Item>
+            <Form.Item
+              name="sharePath"
+              rules={[{ required: true }]}
+              label="共享路径"
+            >
+              <Input placeholder="/share/importConfig" />
+            </Form.Item>
+            <Form.Item
+              name="username"
+              rules={[{ required: true }]}
+              label="用户名"
+            >
+              <Input placeholder="用户名" />
+            </Form.Item>
+            <Form.Item
+              name="password"
+              rules={[{ required: true }]}
+              label="密码"
+            >
+              <Input type="password" placeholder="密码" />
+            </Form.Item>
+          </div>
+        )}
+        {/* obs import */}
+        {importConfig?.source === DataSource.OBS && (
+          <div className="grid grid-cols-2 gap-3 p-4 bg-blue-50 rounded-lg">
+            <Form.Item
+              name="endpoint"
+              rules={[{ required: true }]}
+              label="Endpoint"
+            >
+              <Input
+                className="h-8 text-xs"
+                placeholder="obs.cn-north-4.myhuaweicloud.com"
+              />
+            </Form.Item>
+            <Form.Item
+              name="bucket"
+              rules={[{ required: true }]}
+              label="Bucket"
+            >
+              <Input className="h-8 text-xs" placeholder="my-bucket" />
+            </Form.Item>
+            <Form.Item
+              name="accessKey"
+              rules={[{ required: true }]}
+              label="Access Key"
+            >
+              <Input className="h-8 text-xs" placeholder="Access Key" />
+            </Form.Item>
+            <Form.Item
+              name="secretKey"
+              rules={[{ required: true }]}
+              label="Secret Key"
+            >
+              <Input
+                type="password"
+                className="h-8 text-xs"
+                placeholder="Secret Key"
+              />
+            </Form.Item>
+          </div>
+        )}
+
+        {/* Local Upload Component */}
+        {importConfig?.source === DataSource.UPLOAD && (
+          <Form.Item
+            label="上传文件"
+            name="files"
+            rules={[
+              {
+                required: true,
+                message: "请上传文件",
+              },
+            ]}
+          >
+            {importFileRender()}
+          </Form.Item>
+        )}
+
+        {/* Target Configuration */}
+        {importConfig?.target && importConfig?.target !== DataSource.UPLOAD && (
+          <div className="space-y-3 p-4 bg-blue-50 rounded-lg">
+            {importConfig?.target === DataSource.DATABASE && (
+              <div className="grid grid-cols-2 gap-3">
+                <Form.Item
+                  name="databaseType"
+                  rules={[{ required: true }]}
+                  label="数据库类型"
+                >
+                  <Select
+                    className="w-full"
+                    options={[
+                      { label: "MySQL", value: "mysql" },
+                      { label: "PostgreSQL", value: "postgresql" },
+                      { label: "MongoDB", value: "mongodb" },
+                    ]}
+                  ></Select>
+                </Form.Item>
+                <Form.Item
+                  name="tableName"
+                  rules={[{ required: true }]}
+                  label="表名"
+                >
+                  <Input className="h-8 text-xs" placeholder="dataset_table" />
+                </Form.Item>
+                <Form.Item
+                  name="connectionString"
+                  rules={[{ required: true }]}
+                  label="连接字符串"
+                >
+                  <Input
+                    className="h-8 text-xs col-span-2"
+                    placeholder="数据库连接字符串"
+                  />
+                </Form.Item>
+              </div>
+            )}
+          </div>
+        )}
+      </Form>
+    </Modal>
+  );
+}

frontend/src/pages/DataManagement/Detail/components/Overview.tsx

@@ -0,0 +1,211 @@
+import { Button, Descriptions, DescriptionsProps, Modal, Table } from "antd";
+import { formatBytes, formatDateTime } from "@/utils/unit";
+import { Download, Trash2 } from "lucide-react";
+import { datasetTypeMap } from "../../dataset.const";
+
+export default function Overview({ dataset, filesOperation }) {
+  const {
+    fileList,
+    selectedFiles,
+    setSelectedFiles,
+    previewVisible,
+    previewFileName,
+    previewContent,
+    setPreviewVisible,
+    handleDeleteFile,
+    handleDownloadFile,
+    handleBatchDeleteFiles,
+    handleBatchExport,
+  } = filesOperation;
+
+  // 文件列表多选配置
+  const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
+      setSelectedFiles(selectedRowKeys as number[]);
+      console.log(
+        `selectedRowKeys: ${selectedRowKeys}`,
+        "selectedRows: ",
+        selectedRows
+      );
+    },
+  };
+  // 基本信息
+  const items: DescriptionsProps["items"] = [
+    {
+      key: "id",
+      label: "ID",
+      children: dataset.id,
+    },
+    {
+      key: "name",
+      label: "名称",
+      children: dataset.name,
+    },
+    {
+      key: "fileCount",
+      label: "文件数",
+      children: dataset.fileCount || 0,
+    },
+    {
+      key: "size",
+      label: "数据大小",
+      children: dataset.size || "0 B",
+    },
+
+    {
+      key: "datasetType",
+      label: "类型",
+      children: datasetTypeMap[dataset?.datasetType]?.label || "未知",
+    },
+    {
+      key: "status",
+      label: "状态",
+      children: dataset?.status?.label || "未知",
+    },
+    {
+      key: "createdBy",
+      label: "创建者",
+      children: dataset.createdBy || "未知",
+    },
+    {
+      key: "targetLocation",
+      label: "存储路径",
+      children: dataset.targetLocation || "未知",
+    },
+    {
+      key: "createdAt",
+      label: "创建时间",
+      children: dataset.createdAt,
+    },
+    {
+      key: "updatedAt",
+      label: "更新时间",
+      children: dataset.updatedAt,
+    },
+    {
+      key: "dataSource",
+      label: "数据源",
+      children: dataset.dataSource || "未知",
+    },
+    {
+      key: "description",
+      label: "描述",
+      children: dataset.description || "无",
+    },
+  ];
+
+  // 文件列表列定义
+  const columns = [
+    {
+      title: "文件名",
+      dataIndex: "fileName",
+      key: "fileName",
+      fixed: "left",
+    },
+    {
+      title: "大小",
+      dataIndex: "fileSize",
+      key: "fileSize",
+      width: 150,
+      render: (text) => formatBytes(text),
+    },
+    {
+      title: "上传时间",
+      dataIndex: "uploadTime",
+      key: "uploadTime",
+      width: 200,
+      render: (text) => formatDateTime(text),
+    },
+    {
+      title: "操作",
+      key: "action",
+      width: 180,
+      fixed: "right",
+      render: (_, record) => (
+        <div className="flex">
+          <Button
+            size="small"
+            type="link"
+            onClick={() => handleDownloadFile(record)}
+          >
+            下载
+          </Button>
+          <Button
+            size="small"
+            type="link"
+            onClick={() => handleDeleteFile(record)}
+          >
+            删除
+          </Button>
+        </div>
+      ),
+    },
+  ];
+  return (
+    <>
+      <div className=" flex flex-col gap-4">
+        {/* 基本信息 */}
+        <Descriptions
+          title="基本信息"
+          layout="vertical"
+          size="small"
+          items={items}
+          column={5}
+        />
+
+        {/* 文件列表 */}
+        <h2 className="text-base font-semibold mt-8">文件列表</h2>
+        {selectedFiles.length > 0 && (
+          <div className="flex items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200">
+            <span className="text-sm text-blue-700 font-medium">
+              已选择 {selectedFiles.length} 个文件
+            </span>
+            <Button
+              onClick={handleBatchExport}
+              className="ml-auto bg-transparent"
+            >
+              <Download className="w-4 h-4 mr-2" />
+              批量导出
+            </Button>
+            <Button
+              onClick={handleBatchDeleteFiles}
+              className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              批量删除
+            </Button>
+          </div>
+        )}
+        <div className="overflow-x-auto">
+          <Table
+            size="middle"
+            rowKey="id"
+            columns={columns}
+            dataSource={fileList}
+            // rowSelection={rowSelection}
+            scroll={{ x: "max-content", y: 600 }}
+          />
+        </div>
+      </div>
+      {/* 文件预览弹窗 */}
+      <Modal
+        title={`文件预览：${previewFileName}`}
+        open={previewVisible}
+        onCancel={() => setPreviewVisible(false)}
+        footer={null}
+        width={700}
+      >
+        <pre
+          style={{
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-all",
+            fontSize: 14,
+            color: "#222",
+          }}
+        >
+          {previewContent}
+        </pre>
+      </Modal>
+    </>
+  );
+}