fix: 上传文件时任务中心立即显示

问题描述：
在数据管理的数据集详情页上传文件时，点击确认后，弹窗消失，但是需要等待文件处理（特别是启用按行分割时）后任务中心才弹出来，用户体验不好。

修改内容：
1. useSliceUpload.tsx: 在 createTask 函数中添加立即显示任务中心的逻辑，确保任务创建后立即显示
2. ImportConfiguration.tsx: 在 handleImportData 函数中，在执行耗时的文件处理操作（如文件分割）之前，立即触发 show:task-popover 事件显示任务中心

效果：
- 修改前：点击确认 → 弹窗消失 → （等待文件处理）→ 任务中心弹出
- 修改后：点击确认 → 弹窗消失 + 任务中心立即弹出 → 文件开始处理

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

@@ -1,13 +1,13 @@
-import { Select, Input, Form, Radio, Modal, Button, UploadFile, Switch, Tooltip } from "antd";
-import { InboxOutlined, QuestionCircleOutlined } from "@ant-design/icons";
-import { dataSourceOptions } from "../../dataset.const";
+import { Select, Input, Form, Radio, Modal, Button, UploadFile, Switch, Tooltip } from "antd";
+import { InboxOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+import { dataSourceOptions } from "../../dataset.const";
 import { Dataset, DatasetType, DataSource } from "../../dataset.model";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { queryTasksUsingGet } from "@/pages/DataCollection/collection.apis";
-import { updateDatasetByIdUsingPut } from "../../dataset.api";
-import { sliceFile } from "@/utils/file.util";
-import Dragger from "antd/es/upload/Dragger";
-
+import { queryTasksUsingGet } from "@/pages/DataCollection/collection.apis";
+import { updateDatasetByIdUsingPut } from "../../dataset.api";
+import { sliceFile } from "@/utils/file.util";
+import Dragger from "antd/es/upload/Dragger";
+
 const TEXT_FILE_MIME_PREFIX = "text/";
 const TEXT_FILE_MIME_TYPES = new Set([
   "application/json",
@@ -131,18 +131,18 @@ type ImportConfig = {
 };
 
 export default function ImportConfiguration({
-  data,
-  open,
-  onClose,
-  updateEvent = "update:dataset",
-  prefix,
-}: {
-  data: Dataset | null;
-  open: boolean;
-  onClose: () => void;
-  updateEvent?: string;
-  prefix?: string;
-}) {
+  data,
+  open,
+  onClose,
+  updateEvent = "update:dataset",
+  prefix,
+}: {
+  data: Dataset | null;
+  open: boolean;
+  onClose: () => void;
+  updateEvent?: string;
+  prefix?: string;
+}) {
   const [form] = Form.useForm();
   const [collectionOptions, setCollectionOptions] = useState<SelectOption[]>([]);
   const availableSourceOptions = dataSourceOptions.filter(
@@ -160,13 +160,13 @@ export default function ImportConfiguration({
     return files.some((file) => !isTextUploadFile(file));
   }, [importConfig.files]);
   const isTextDataset = data?.datasetType === DatasetType.TEXT;
-
-  // 本地上传文件相关逻辑
-
-  const handleUpload = async (dataset: Dataset) => {
+
+  // 本地上传文件相关逻辑
+
+  const handleUpload = async (dataset: Dataset) => {
     let filesToUpload =
       (form.getFieldValue("files") as UploadFile[] | undefined) || [];
-
+
     // 如果启用分行分割，处理文件
     if (importConfig.splitByLine && !hasNonTextFile) {
       const splitResults = await Promise.all(
@@ -174,9 +174,9 @@ export default function ImportConfiguration({
       );
       filesToUpload = splitResults.flat();
     }
-
-    // 计算分片列表
-    const sliceList = filesToUpload.map((file) => {
+
+    // 计算分片列表
+    const sliceList = filesToUpload.map((file) => {
       const originFile = (file.originFileObj ?? file) as Blob;
       const slices = sliceFile(originFile);
       return {
@@ -185,22 +185,22 @@ export default function ImportConfiguration({
         name: file.name,
         size: originFile.size || 0,
       };
-    });
-
-    console.log("[ImportConfiguration] Uploading with currentPrefix:", currentPrefix);
-    window.dispatchEvent(
-      new CustomEvent("upload:dataset", {
-        detail: {
-          dataset,
-          files: sliceList,
-          updateEvent,
-          hasArchive: importConfig.hasArchive,
-          prefix: currentPrefix,
-        },
-      })
-    );
-  };
-
+    });
+
+    console.log("[ImportConfiguration] Uploading with currentPrefix:", currentPrefix);
+    window.dispatchEvent(
+      new CustomEvent("upload:dataset", {
+        detail: {
+          dataset,
+          files: sliceList,
+          updateEvent,
+          hasArchive: importConfig.hasArchive,
+          prefix: currentPrefix,
+        },
+      })
+    );
+  };
+
   const fetchCollectionTasks = useCallback(async () => {
     if (importConfig.source !== DataSource.COLLECTION) return;
     try {
@@ -212,7 +212,7 @@ export default function ImportConfiguration({
         label: task.name,
         value: task.id,
       }));
-      setCollectionOptions(options);
+      setCollectionOptions(options);
     } catch (error) {
       console.error("Error fetching collection tasks:", error);
     }
@@ -229,27 +229,31 @@ export default function ImportConfiguration({
     });
     console.log('[ImportConfiguration] resetState done, currentPrefix still:', currentPrefix);
   }, [currentPrefix, form]);
-
-  const handleImportData = async () => {
-    if (!data) return;
-    console.log('[ImportConfiguration] handleImportData called, currentPrefix:', currentPrefix);
-    if (importConfig.source === DataSource.UPLOAD) {
-      await handleUpload(data);
-    } else if (importConfig.source === DataSource.COLLECTION) {
-      await updateDatasetByIdUsingPut(data.id, {
-        ...importConfig,
-      });
-    }
-    onClose();
-  };
-
+
+  const handleImportData = async () => {
+    if (!data) return;
+    console.log('[ImportConfiguration] handleImportData called, currentPrefix:', currentPrefix);
+    if (importConfig.source === DataSource.UPLOAD) {
+      // 立即显示任务中心，让用户感知上传已开始（在文件分割等耗时操作之前）
+      window.dispatchEvent(
+        new CustomEvent("show:task-popover", { detail: { show: true } })
+      );
+      await handleUpload(data);
+    } else if (importConfig.source === DataSource.COLLECTION) {
+      await updateDatasetByIdUsingPut(data.id, {
+        ...importConfig,
+      });
+    }
+    onClose();
+  };
+
   useEffect(() => {
     if (open) {
       setCurrentPrefix(prefix || "");
-      console.log('[ImportConfiguration] Modal opened with prefix:', prefix);
-      resetState();
-      fetchCollectionTasks();
-    }
+      console.log('[ImportConfiguration] Modal opened with prefix:', prefix);
+      resetState();
+      fetchCollectionTasks();
+    }
   }, [fetchCollectionTasks, open, prefix, resetState]);
 
   useEffect(() => {
@@ -259,111 +263,111 @@ export default function ImportConfiguration({
     form.setFieldsValue({ splitByLine: false });
     setImportConfig((prev) => ({ ...prev, splitByLine: false }));
   }, [form, hasNonTextFile, importConfig.files, importConfig.splitByLine]);
-
-  // Separate effect for fetching collection tasks when source changes
-  useEffect(() => {
-    if (open && importConfig.source === DataSource.COLLECTION) {
-      fetchCollectionTasks();
-    }
+
+  // Separate effect for fetching collection tasks when source changes
+  useEffect(() => {
+    if (open && importConfig.source === DataSource.COLLECTION) {
+      fetchCollectionTasks();
+    }
   }, [fetchCollectionTasks, importConfig.source, open]);
-
-  return (
-    <Modal
-      title="导入数据"
-      open={open}
-      width={600}
-      onCancel={() => {
-        onClose();
-        resetState();
-      }}
-      maskClosable={false}
-      footer={
-        <>
-          <Button onClick={onClose}>取消</Button>
-          <Button
-            type="primary"
-            disabled={!importConfig?.files?.length && !importConfig.dataSource}
-            onClick={handleImportData}
-          >
-            确定
-          </Button>
-        </>
-      }
-    >
-      <Form
-        form={form}
-        layout="vertical"
-        initialValues={importConfig || {}}
-        onValuesChange={(_, allValues) => setImportConfig(allValues)}
-      >
-        <Form.Item
-          label="数据源"
-          name="source"
-          rules={[{ required: true, message: "请选择数据源" }]}
-        >
+
+  return (
+    <Modal
+      title="导入数据"
+      open={open}
+      width={600}
+      onCancel={() => {
+        onClose();
+        resetState();
+      }}
+      maskClosable={false}
+      footer={
+        <>
+          <Button onClick={onClose}>取消</Button>
+          <Button
+            type="primary"
+            disabled={!importConfig?.files?.length && !importConfig.dataSource}
+            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={availableSourceOptions}
               optionType="button"
             />
           </Form.Item>
-        {importConfig?.source === DataSource.COLLECTION && (
-          <Form.Item name="dataSource" label="归集任务" required>
-            <Select placeholder="请选择归集任务" options={collectionOptions} />
-          </Form.Item>
-        )}
-
-        {/* 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="hasArchive"
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
+        {importConfig?.source === DataSource.COLLECTION && (
+          <Form.Item name="dataSource" label="归集任务" required>
+            <Select placeholder="请选择归集任务" options={collectionOptions} />
+          </Form.Item>
+        )}
+
+        {/* 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="hasArchive"
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
             {isTextDataset && (
               <Form.Item
                 label={
@@ -386,10 +390,10 @@ export default function ImportConfiguration({
                 <Switch disabled={hasNonTextFile} />
               </Form.Item>
             )}
-            <Form.Item
-              label="上传文件"
-              name="files"
-              valuePropName="fileList"
+            <Form.Item
+              label="上传文件"
+              name="files"
+              valuePropName="fileList"
               getValueFromEvent={(
                 event: { fileList?: UploadFile[] } | UploadFile[]
               ) => {
@@ -398,69 +402,69 @@ export default function ImportConfiguration({
                 }
                 return event?.fileList;
               }}
-              rules={[
-                {
-                  required: true,
-                  message: "请上传文件",
-                },
-              ]}
-            >
-              <Dragger
-                className="w-full"
-                beforeUpload={() => false}
-                multiple
-              >
-                <p className="ant-upload-drag-icon">
-                  <InboxOutlined />
-                </p>
-                <p className="ant-upload-text">本地文件上传</p>
-                <p className="ant-upload-hint">拖拽文件到此处或点击选择文件</p>
-              </Dragger>
-            </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>
-  );
-}
+              rules={[
+                {
+                  required: true,
+                  message: "请上传文件",
+                },
+              ]}
+            >
+              <Dragger
+                className="w-full"
+                beforeUpload={() => false}
+                multiple
+              >
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">本地文件上传</p>
+                <p className="ant-upload-hint">拖拽文件到此处或点击选择文件</p>
+              </Dragger>
+            </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>
+  );
+}