data collection page (#31)

* 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.

frontend/src/pages/DataCollection/Create/CreateTask.tsx

@@ -1,20 +1,9 @@
 import { useState } from "react";
-import {
-  Card,
-  Input,
-  Button,
-  Select,
-  Radio,
-  Form,
-  Divider,
-  InputNumber,
-  TimePicker,
-  App,
-} from "antd";
+import { Input, Button, Radio, Form, InputNumber, App, Select } from "antd";
 import { Link, useNavigate } from "react-router";
 import { ArrowLeft } from "lucide-react";
 import { createTaskUsingPost } from "../collection.apis";
-import DevelopmentInProgress from "@/components/DevelopmentInProgress";
+import SimpleCronScheduler from "@/pages/DataCollection/Create/SimpleCronScheduler";
 
 const { TextArea } = Input;
 
@@ -30,16 +19,16 @@ interface ScheduleConfig {
 
 const defaultTemplates = [
   {
-    id: "nas-to-local",
+    id: "nas",
     name: "NAS到本地",
     description: "从NAS文件系统导入数据到本地文件系统",
     config: {
-      reader: "nasreader",
+      reader: "nfsreader",
       writer: "localwriter",
     },
   },
   {
-    id: "obs-to-local",
+    id: "obs",
     name: "OBS到本地",
     description: "从OBS文件系统导入数据到本地文件系统",
     config: {
@@ -48,7 +37,7 @@ const defaultTemplates = [
     },
   },
   {
-    id: "web-tolocal",
+    id: "web",
     name: "Web到本地",
     description: "从Web URL导入数据到本地文件系统",
     config: {
@@ -58,9 +47,13 @@ const defaultTemplates = [
   },
 ];
 
-export default function CollectionTaskCreate() {
-  return <DevelopmentInProgress showTime="2025.10.30" />;
+enum TemplateType {
+  NAS = "nas",
+  OBS = "obs",
+  WEB = "web",
+}
 
+export default function CollectionTaskCreate() {
   const navigate = useNavigate();
   const [form] = Form.useForm();
   const { message } = App.useApp();
@@ -68,7 +61,7 @@ export default function CollectionTaskCreate() {
   const [templateType, setTemplateType] = useState<"default" | "custom">(
     "default"
   );
-  const [selectedTemplate, setSelectedTemplate] = useState("");
+  const [selectedTemplate, setSelectedTemplate] = useState("nas");
   const [customConfig, setCustomConfig] = useState("");
 
   const [scheduleConfig, setScheduleConfig] = useState<ScheduleConfig>({
@@ -104,7 +97,7 @@ export default function CollectionTaskCreate() {
   };
 
   return (
-    <div className="min-h-screen">
+    <div className="h-full flex flex-col">
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center">
           <Link to="/data/collection">
@@ -116,244 +109,234 @@ export default function CollectionTaskCreate() {
         </div>
       </div>
 
-      <Card>
-        <Form
-          form={form}
-          layout="vertical"
-          initialValues={{
-            name: "",
-            datasetName: "",
-            fileFormat: "",
-            description: "",
-            cronExpression: "",
-            retryCount: 3,
-            timeout: 3600,
-            incrementalField: "",
-          }}
-          onValuesChange={(_, allValues) => {
-            // 文件格式变化时重置模板选择
-            if (_.fileFormat !== undefined) setSelectedTemplate("");
-          }}
-        >
-          {/* 基本信息 */}
-          <h2 className="font-medium text-gray-900 text-lg mb-4">基本信息</h2>
-
-          <Form.Item
-            label="任务名称"
-            name="name"
-            rules={[{ required: true, message: "请输入任务名称" }]}
+      <div className="flex-overflow-auto border-card">
+        <div className="flex-1 overflow-auto p-6">
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={scheduleConfig}
+            onValuesChange={(_, allValues) => {
+              // 文件格式变化时重置模板选择
+              if (_.fileFormat !== undefined) setSelectedTemplate("");
+            }}
           >
-            <Input placeholder="请输入任务名称" />
-          </Form.Item>
-          <Form.Item label="描述" name="description">
-            <TextArea placeholder="请输入任务描述" rows={3} />
-          </Form.Item>
-          <Form.Item label="文件格式" name="fileFormat">
-            <Input placeholder="请填写文件格式，使用正则表达式" />
-          </Form.Item>
+            {/* 基本信息 */}
+            <h2 className="font-medium text-gray-900 text-lg mb-2">基本信息</h2>
 
-          {/* 同步配置 */}
-          <h2 className="font-medium text-gray-900 my-4 text-lg">同步配置</h2>
-          <Form.Item label="同步方式">
-            <Radio.Group
-              value={scheduleConfig.type}
-              onChange={(e) =>
-                setScheduleConfig({
-                  type: e.target.value as ScheduleConfig["type"],
-                })
-              }
+            <Form.Item
+              label="任务名称"
+              name="name"
+              rules={[{ required: true, message: "请输入任务名称" }]}
             >
-              <Radio value="immediate">立即同步</Radio>
-              <Radio value="scheduled">定时同步</Radio>
-            </Radio.Group>
-          </Form.Item>
-          {scheduleConfig.type === "scheduled" && (
-            <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-4">
-              <Form.Item label="调度类型">
-                <Select
-                  options={[
-                    { label: "每日", value: "day" },
-                    { label: "每周", value: "week" },
-                    { label: "每月", value: "month" },
-                    { label: "自定义Cron", value: "custom" },
-                  ]}
-                  value={scheduleConfig.scheduleType}
+              <Input placeholder="请输入任务名称" />
+            </Form.Item>
+            <Form.Item label="描述" name="description">
+              <TextArea placeholder="请输入任务描述" rows={3} />
+            </Form.Item>
+
+            {/* 同步配置 */}
+            <h2 className="font-medium text-gray-900 pt-6 mb-2 text-lg">
+              同步配置
+            </h2>
+            <Form.Item label="同步方式">
+              <Radio.Group
+                value={scheduleConfig.type}
+                onChange={(e) =>
+                  setScheduleConfig({
+                    type: e.target.value as ScheduleConfig["type"],
+                  })
+                }
+              >
+                <Radio value="immediate">立即同步</Radio>
+                <Radio value="scheduled">定时同步</Radio>
+              </Radio.Group>
+            </Form.Item>
+            {scheduleConfig.type === "scheduled" && (
+              <Form.Item
+                label=""
+                name="cronExpression"
+                rules={[{ required: true, message: "请输入Cron表达式" }]}
+              >
+                <SimpleCronScheduler
+                  className="px-2 rounded"
+                  value={scheduleConfig.cronExpression || "* * * * *"}
+                  showYear
                   onChange={(value) =>
-                    setScheduleConfig((prev) => ({
-                      ...prev,
-                      scheduleType: value as ScheduleConfig["scheduleType"],
-                    }))
+                    setScheduleConfig({ ...scheduleConfig, cron: value })
                   }
                 />
               </Form.Item>
-              {scheduleConfig.scheduleType === "custom" ? (
-                <Form.Item
-                  label="Cron表达式"
-                  name="cronExpression"
-                  rules={[{ required: true, message: "请输入Cron表达式" }]}
-                >
-                  <Input
-                    placeholder="例如：0 0 * * * 表示每天午夜执行"
-                    value={scheduleConfig.cronExpression}
-                    onChange={(e) =>
-                      setScheduleConfig((prev) => ({
-                        ...prev,
-                        cronExpression: e.target.value,
-                      }))
-                    }
-                  />
-                </Form.Item>
-              ) : (
-                <Form.Item label="执行时间" className="w-full">
-                  {scheduleConfig.scheduleType === "day" ? (
-                    <TimePicker />
-                  ) : (
-                    <Select
-                      options={
-                        scheduleConfig.scheduleType === "week"
-                          ? [
-                              { label: "周一", value: "1" },
-                              { label: "周二", value: "2" },
-                              { label: "周三", value: "3" },
-                              { label: "周四", value: "4" },
-                              { label: "周五", value: "5" },
-                              { label: "周六", value: "6" },
-                              { label: "周日", value: "0" },
-                            ]
-                          : [
-                              { label: "每月1日", value: "1" },
-                              { label: "每月5日", value: "5" },
-                              { label: "每月10日", value: "10" },
-                              { label: "每月15日", value: "15" },
-                              { label: "每月20日", value: "20" },
-                              { label: "每月25日", value: "25" },
-                              { label: "每月30日", value: "30" },
-                            ]
-                      }
-                      placeholder={
-                        scheduleConfig.scheduleType === "week"
-                          ? "选择星期几"
-                          : "选择日期"
-                      }
-                      value={scheduleConfig.dayOfWeek}
-                      onChange={(value) =>
-                        setScheduleConfig((prev) => ({
-                          ...prev,
-                          dayOfWeek: value as string,
-                        }))
-                      }
-                    />
-                  )}
-                </Form.Item>
-              )}
-            </div>
-          )}
-          <Form.Item label="最大执行次数">
-            <InputNumber
-              min={1}
-              value={scheduleConfig.maxRetries}
-              onChange={(value) =>
-                setScheduleConfig((prev) => ({
-                  ...prev,
-                  maxRetries: value,
-                }))
-              }
-              className="w-full"
-              style={{ width: "100%" }}
-            />
-          </Form.Item>
-
-          {/* 模板配置 */}
-          <h2 className="font-medium text-gray-900 my-4 text-lg">模板配置</h2>
-          <Form.Item label="模板类型">
-            <Radio.Group
-              value={templateType}
-              onChange={(e) => setTemplateType(e.target.value)}
-            >
-              <Radio value="default">使用默认模板</Radio>
-              <Radio value="custom">自定义DataX JSON配置</Radio>
-            </Radio.Group>
-          </Form.Item>
-          {templateType === "default" && (
-            <Form.Item label="选择模板">
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-                {defaultTemplates.map((template) => (
-                  <div
-                    key={template.id}
-                    className={`border p-4 rounded-md hover:shadow-lg transition-shadow ${
-                      selectedTemplate === template.id
-                        ? "border-blue-500"
-                        : "border-gray-300"
-                    }`}
-                    onClick={() => setSelectedTemplate(template.id)}
-                  >
-                    <div className="font-medium">{template.name}</div>
-                    <div className="text-gray-500">{template.description}</div>
-                    <div className="text-gray-400">
-                      {template.config.reader} → {template.config.writer}
-                    </div>
-                  </div>
-                ))}
-              </div>
+            )}
+            <Form.Item name="maxRetries" label="最大执行次数">
+              <InputNumber min={1} style={{ width: "100%" }} />
             </Form.Item>
-          )}
 
-          {templateType === "custom" && (
-            <Form.Item label="DataX JSON配置">
-              <TextArea
-                placeholder="请输入DataX JSON配置..."
-                value={customConfig}
-                onChange={(e) => setCustomConfig(e.target.value)}
-                rows={12}
-                className="w-full"
-              />
-            </Form.Item>
-          )}
-
-          {/* 数据集配置 */}
-          {templateType === "default" && (
-            <>
-              <h2 className="font-medium text-gray-900 my-4 text-lg">
-                数据集配置
-              </h2>
-              <Form.Item
-                label="是否创建数据集"
-                name="createDataset"
-                required
-                rules={[{ required: true, message: "请选择是否创建数据集" }]}
+            {/* 模板配置 */}
+            <h2 className="font-medium text-gray-900 pt-6 mb-2 text-lg">
+              模板配置
+            </h2>
+            {/* <Form.Item label="模板类型">
+              <Radio.Group
+                value={templateType}
+                onChange={(e) => setTemplateType(e.target.value)}
               >
-                <Radio.Group
-                  value={isCreateDataset}
-                  onChange={(e) => setIsCreateDataset(e.target.value)}
-                >
-                  <Radio value={true}>是</Radio>
-                  <Radio value={false}>否</Radio>
-                </Radio.Group>
-              </Form.Item>
-              {isCreateDataset && (
-                <>
-                  <Form.Item
-                    label="数据集名称"
-                    name="datasetName"
-                    rules={[{ required: true, message: "请输入数据集名称" }]}
-                  >
-                    <Input placeholder="请输入数据集名称" />
-                  </Form.Item>
-                </>
-              )}
-            </>
-          )}
+                <Radio value="default">使用默认模板</Radio>
+                <Radio value="custom">自定义DataX JSON配置</Radio>
+              </Radio.Group>
+            </Form.Item> */}
+            {templateType === "default" && (
+              <>
+                {/* <Form.Item label="选择模板">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+                    {defaultTemplates.map((template) => (
+                      <div
+                        key={template.id}
+                        className={`border p-4 rounded-md hover:shadow-lg transition-shadow ${
+                          selectedTemplate === template.id
+                            ? "border-blue-500"
+                            : "border-gray-300"
+                        }`}
+                        onClick={() => setSelectedTemplate(template.id)}
+                      >
+                        <div className="font-medium">{template.name}</div>
+                        <div className="text-gray-500">
+                          {template.description}
+                        </div>
+                        <div className="text-gray-400">
+                          {template.config.reader} → {template.config.writer}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </Form.Item> */}
+                {/* nas import */}
+                {selectedTemplate === TemplateType.NAS && (
+                  <div className="grid grid-cols-2 gap-3 px-2 rounded">
+                    <Form.Item
+                      name="nasPath"
+                      rules={[{ required: true, message: "请输入NAS地址" }]}
+                      label="NAS地址"
+                    >
+                      <Input placeholder="192.168.1.100" />
+                    </Form.Item>
+                    <Form.Item
+                      name="sharePath"
+                      rules={[{ required: true, message: "请输入共享路径" }]}
+                      label="共享路径"
+                    >
+                      <Input placeholder="/share/importConfig" />
+                    </Form.Item>
+                    <Form.Item
+                      name="fileList"
+                      label="文件列表"
+                      className="col-span-2"
+                    >
+                      <Select
+                        placeholder="请选择文件列表"
+                        mode="tags"
+                        multiple
+                      />
+                    </Form.Item>
+                  </div>
+                )}
 
-          {/* 提交按钮 */}
-          <Divider />
-          <div className="flex gap-2 justify-end">
-            <Button onClick={() => navigate("/data/collection")}>取消</Button>
-            <Button type="primary" onClick={handleSubmit}>
-              创建任务
-            </Button>
-          </div>
-        </Form>
-      </Card>
+                {/* obs import */}
+                {selectedTemplate === TemplateType.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>
+                )}
+              </>
+            )}
+
+            {templateType === "custom" && (
+              <Form.Item label="DataX JSON配置">
+                <TextArea
+                  placeholder="请输入DataX JSON配置..."
+                  value={customConfig}
+                  onChange={(e) => setCustomConfig(e.target.value)}
+                  rows={12}
+                  className="w-full"
+                />
+              </Form.Item>
+            )}
+
+            {/* 数据集配置 */}
+            {templateType === "default" && (
+              <>
+                <h2 className="font-medium text-gray-900 my-4 text-lg">
+                  数据集配置
+                </h2>
+                <Form.Item
+                  label="是否创建数据集"
+                  name="createDataset"
+                  required
+                  rules={[{ required: true, message: "请选择是否创建数据集" }]}
+                >
+                  <Radio.Group
+                    value={isCreateDataset}
+                    onChange={(e) => setIsCreateDataset(e.target.value)}
+                  >
+                    <Radio value={true}>是</Radio>
+                    <Radio value={false}>否</Radio>
+                  </Radio.Group>
+                </Form.Item>
+                {isCreateDataset && (
+                  <>
+                    <Form.Item
+                      label="数据集名称"
+                      name="datasetName"
+                      rules={[{ required: true, message: "请输入数据集名称" }]}
+                    >
+                      <Input placeholder="请输入数据集名称" />
+                    </Form.Item>
+                  </>
+                )}
+              </>
+            )}
+          </Form>
+        </div>
+        <div className="flex gap-2 justify-end border-top p-6">
+          <Button onClick={() => navigate("/data/collection")}>取消</Button>
+          <Button type="primary" onClick={handleSubmit}>
+            创建任务
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/pages/DataCollection/Create/SimpleCronScheduler.tsx

@@ -0,0 +1,207 @@
+import React, { useState, useCallback } from "react";
+import {
+  Card,
+  Radio,
+  Select,
+  Space,
+  Typography,
+  TimePicker,
+  Button,
+  Input,
+  Form,
+} from "antd";
+import type { RadioChangeEvent } from "antd";
+import type { Dayjs } from "dayjs";
+import dayjs from "dayjs";
+
+const { Text } = Typography;
+const { Option } = Select;
+
+export interface SimpleCronConfig {
+  type: "once" | "daily" | "weekly" | "monthly";
+  time?: string; // HH:mm 格式
+  weekDay?: number; // 0-6, 0 表示周日
+  monthDay?: number; // 1-31
+  cronExpression: string;
+}
+
+interface SimpleCronSchedulerProps {
+  value?: SimpleCronConfig;
+  onChange?: (config: SimpleCronConfig) => void;
+  className?: string;
+}
+
+const defaultConfig: SimpleCronConfig = {
+  type: "once",
+  time: "00:00",
+  cronExpression: "0 0 0 * * ?",
+};
+
+// 生成周几选项
+const weekDayOptions = [
+  { label: "周日", value: 0 },
+  { label: "周一", value: 1 },
+  { label: "周二", value: 2 },
+  { label: "周三", value: 3 },
+  { label: "周四", value: 4 },
+  { label: "周五", value: 5 },
+  { label: "周六", value: 6 },
+];
+
+// 生成月份日期选项
+const monthDayOptions = Array.from({ length: 31 }, (_, i) => ({
+  label: `${i + 1}日`,
+  value: i + 1,
+}));
+
+// 常用时间预设
+const commonTimePresets = [
+  { label: "上午 9:00", value: "09:00" },
+  { label: "中午 12:00", value: "12:00" },
+  { label: "下午 2:00", value: "14:00" },
+  { label: "下午 6:00", value: "18:00" },
+  { label: "晚上 8:00", value: "20:00" },
+  { label: "午夜 0:00", value: "00:00" },
+];
+
+const SimpleCronScheduler: React.FC<SimpleCronSchedulerProps> = ({
+  value = defaultConfig,
+  onChange,
+  className,
+}) => {
+  const [config, setConfig] = useState<SimpleCronConfig>(value);
+
+  // 更新配置并生成 cron 表达式
+  const updateConfig = useCallback(
+    (updates: Partial<SimpleCronConfig>) => {
+      const newConfig = { ...config, ...updates };
+      const [hour, minute] = (newConfig.time || "00:00").split(":");
+
+      // 根据不同类型生成 cron 表达式
+      let cronExpression = "";
+      switch (newConfig.type) {
+        case "once":
+          cronExpression = `0 ${minute} ${hour} * * ?`;
+          break;
+        case "daily":
+          cronExpression = `0 ${minute} ${hour} * * ?`;
+          break;
+        case "weekly":
+          cronExpression = `0 ${minute} ${hour} ? * ${newConfig.weekDay}`;
+          break;
+        case "monthly":
+          cronExpression = `0 ${minute} ${hour} ${newConfig.monthDay} * ?`;
+          break;
+      }
+
+      newConfig.cronExpression = cronExpression;
+      setConfig(newConfig);
+      onChange?.(newConfig);
+    },
+    [config, onChange]
+  );
+
+  // 处理类型改变
+  const handleTypeChange = (type) => {
+    const updates: Partial<SimpleCronConfig> = { type };
+
+    // 设置默认值
+    if (type === "weekly" && !config.weekDay) {
+      updates.weekDay = 1; // 默认周一
+    } else if (type === "monthly" && !config.monthDay) {
+      updates.monthDay = 1; // 默认每月1号
+    }
+
+    updateConfig(updates);
+  };
+
+  // 处理时间改变
+  const handleTimeChange = (value: Dayjs | null) => {
+    if (value) {
+      updateConfig({ time: value.format("HH:mm") });
+    }
+  };
+
+  // 快速设置预设时间
+  const handleTimePreset = (time: string) => {
+    updateConfig({ time });
+  };
+
+  return (
+    <Space direction="vertical" className={`w-full ${className || ""}`}>
+      {/* 执行周期选择 */}
+      <Form.Item label="执行周期" required>
+        <Select value={config.type} onChange={handleTypeChange}>
+          <Select.Option value="once">仅执行一次</Select.Option>
+          <Select.Option value="daily">每天执行</Select.Option>
+          <Select.Option value="weekly">每周执行</Select.Option>
+          <Select.Option value="monthly">每月执行</Select.Option>
+        </Select>
+      </Form.Item>
+
+      {/* 时间选择 */}
+      <Form.Item label="执行时间" required>
+        <Space wrap>
+          <TimePicker
+            format="HH:mm"
+            value={config.time ? dayjs(config.time, "HH:mm") : null}
+            onChange={handleTimeChange}
+            placeholder="选择时间"
+          />
+          <Space wrap className="mt-2">
+            {commonTimePresets.map((preset) => (
+              <Button
+                key={preset.value}
+                size="small"
+                className={
+                  config.time === preset.value ? "ant-btn-primary" : ""
+                }
+                onClick={() => handleTimePreset(preset.value)}
+              >
+                {preset.label}
+              </Button>
+            ))}
+          </Space>
+        </Space>
+      </Form.Item>
+
+      {/* 周几选择 */}
+      {config.type === "weekly" && (
+        <Form.Item label="执行日期" required>
+          <Select
+            className="w-32"
+            value={config.weekDay}
+            onChange={(weekDay) => updateConfig({ weekDay })}
+            placeholder="选择周几"
+            options={weekDayOptions}
+          ></Select>
+        </Form.Item>
+      )}
+
+      {/* 月份日期选择 */}
+      {config.type === "monthly" && (
+        <Form.Item label="执行日期" required>
+          <Select
+            className="w-32"
+            value={config.monthDay}
+            onChange={(monthDay) => updateConfig({ monthDay })}
+            placeholder="选择日期"
+            options={monthDayOptions}
+          ></Select>
+        </Form.Item>
+      )}
+
+      {/* Cron 表达式预览 */}
+      {/* <div className="mt-4 pt-4 border-t border-gray-200">
+        <Text>生成的 Cron 表达式</Text>
+        <Input
+          className="mt-2 bg-gray-100"
+          value={config.cronExpression}
+          readOnly
+        />
+      </div> */}
+    </Space>
+  );
+};
+
+export default SimpleCronScheduler;

frontend/src/pages/DataCollection/Home/DataCollectionPage.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { Button, Tabs } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
-import TaskManagement from "./components/TaskManagement";
-import ExecutionLog from "./components/ExecutionLog";
+import TaskManagement from "./TaskManagement";
+import ExecutionLog from "./ExecutionLog";
 import { useNavigate } from "react-router";
 import DevelopmentInProgress from "@/components/DevelopmentInProgress";
 
@@ -10,10 +10,10 @@ export default function DataCollection() {
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState("task-management");
 
-  return <DevelopmentInProgress showTime="2025.10.30" />;
+  // return <DevelopmentInProgress showTime="2025.10.30" />;
 
   return (
-    <div>
+    <div className="gap-4 h-full flex flex-col">
       <div className="flex justify-between items-end">
         <div>
           <h1 className="text-xl font-bold text-gray-900 mb-2">数据归集</h1>

frontend/src/pages/DataCollection/Home/ExecutionLog.tsx

@@ -2,8 +2,8 @@ import { Card, Badge, Table } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { SearchControls } from "@/components/SearchControls";
 import type { CollectionLog } from "@/pages/DataCollection/collection.model";
-import { queryExecutionLogUsingPost } from "../../collection.apis";
-import { LogStatusMap, LogTriggerTypeMap } from "../../collection.const";
+import { queryExecutionLogUsingPost } from "../collection.apis";
+import { LogStatusMap, LogTriggerTypeMap } from "../collection.const";
 import useFetchData from "@/hooks/useFetchData";
 
 const filterOptions = [

frontend/src/pages/DataCollection/Home/TaskManagement.tsx

@@ -1,16 +1,34 @@
-import { Card, Button, Badge, Table, Dropdown, App } from "antd";
-import { EllipsisOutlined } from "@ant-design/icons";
+import {
+  Card,
+  Button,
+  Badge,
+  Table,
+  Dropdown,
+  App,
+  Tooltip,
+  Popconfirm,
+} from "antd";
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+  PauseCircleOutlined,
+  PauseOutlined,
+  PlayCircleOutlined,
+  StopOutlined,
+} from "@ant-design/icons";
 import { SearchControls } from "@/components/SearchControls";
 import {
   deleteTaskByIdUsingDelete,
   executeTaskByIdUsingPost,
   queryTasksUsingGet,
   stopTaskByIdUsingPost,
-} from "../../collection.apis";
-import { TaskStatus, type CollectionTask } from "../../collection.model";
-import { StatusMap, SyncModeMap } from "../../collection.const";
+} from "../collection.apis";
+import { TaskStatus, type CollectionTask } from "../collection.model";
+import { StatusMap, SyncModeMap } from "../collection.const";
 import useFetchData from "@/hooks/useFetchData";
 import { useNavigate } from "react-router";
+import { mapCollectionTask } from "../collection.const";
 
 export default function TaskManagement() {
   const { message } = App.useApp();
@@ -34,7 +52,7 @@ export default function TaskManagement() {
     setSearchParams,
     fetchData,
     handleFiltersChange,
-  } = useFetchData(queryTasksUsingGet);
+  } = useFetchData(queryTasksUsingGet, mapCollectionTask);
 
   const handleStartTask = async (taskId: string) => {
     await executeTaskByIdUsingPost(taskId);
@@ -54,35 +72,61 @@ export default function TaskManagement() {
     fetchData();
   };
 
+  const taskOperations = (record: CollectionTask) => {
+    const isStopped = record.status === TaskStatus.STOPPED;
+    const startButton = {
+      key: "start",
+      label: "启动",
+      icon: <PlayCircleOutlined />,
+      onClick: () => handleStartTask(record.id),
+    };
+    const stopButton = {
+      key: "stop",
+      label: "停止",
+      icon: <PauseCircleOutlined />,
+      onClick: () => handleStopTask(record.id),
+    };
+    const items = [
+      isStopped ? startButton : stopButton,
+      {
+        key: "edit",
+        label: "编辑",
+        icon: <EditOutlined />,
+        onClick: () => {
+          showEditTaskModal(record);
+        },
+      },
+      {
+        key: "delete",
+        label: "删除",
+        danger: true,
+        icon: <DeleteOutlined />,
+        confirm: {
+          title: "确定要删除该任务吗？此操作不可撤销。",
+          okText: "删除",
+          cancelText: "取消",
+          okType: "danger",
+        },
+        onClick: () => handleDeleteTask(record.id),
+      },
+    ];
+    return items;
+  };
+
   const columns = [
     {
       title: "任务名称",
       dataIndex: "name",
       key: "name",
       fixed: "left",
-      render: (text: string, record: CollectionTask) => (
-        <Button
-          type="link"
-          onClick={() => navigate("`/data-collection/tasks/${record.id}`)}>")}
-        >
-          {text}
-        </Button>
-      ),
     },
-
     {
       title: "状态",
       dataIndex: "status",
       key: "status",
-      render: (status: string) =>
-        StatusMap[status] ? (
-          <Badge
-            color={StatusMap[status].color}
-            text={StatusMap[status].label}
-          />
-        ) : (
-          <Badge text={status} />
-        ),
+      render: (status: string) => (
+        <Badge text={status.label} color={status.color} />
+      ),
     },
     {
       title: "同步方式",
@@ -115,47 +159,42 @@ export default function TaskManagement() {
       title: "操作",
       key: "action",
       fixed: "right" as const,
-      render: (_: any, record: Task) => (
-        <Dropdown
-          menu={{
-            items: [
-              record.status === TaskStatus.STOPPED
-                ? {
-                    key: "start",
-                    label: "启动",
-                    onClick: () => handleStartTask(record.id),
-                  }
-                : {
-                    key: "stop",
-                    label: "停止",
-                    onClick: () => handleStopTask(record.id),
-                  },
-              {
-                key: "edit",
-                label: "编辑",
-                onClick: () => handleViewDetail(record),
-              },
-              {
-                key: "delete",
-                label: "删除",
-                danger: true,
-                onClick: () => handleDeleteTask(record.id),
-              },
-            ],
-          }}
-          trigger={["click"]}
-        >
-          <Button
-            type="text"
-            icon={<EllipsisOutlined style={{ fontSize: 20 }} />}
-          />
-        </Dropdown>
-      ),
+      render: (_: any, record: CollectionTask) => {
+        return taskOperations(record).map((op) => {
+          const button = (
+            <Tooltip key={op.key} title={op.label}>
+              <Button
+                type="text"
+                icon={op.icon}
+                danger={op?.danger}
+                onClick={() => op.onClick(record)}
+              />
+            </Tooltip>
+          );
+          if (op.confirm) {
+            return (
+              <Popconfirm
+                key={op.key}
+                title={op.confirm.title}
+                okText={op.confirm.okText}
+                cancelText={op.confirm.cancelText}
+                okType={op.danger ? "danger" : "primary"}
+                onConfirm={() => op.onClick(record)}
+              >
+                <Tooltip key={op.key} title={op.label}>
+                  <Button type="text" icon={op.icon} danger={op?.danger} />
+                </Tooltip>
+              </Popconfirm>
+            );
+          }
+          return button;
+        });
+      },
     },
   ];
 
   return (
-    <div>
+    <div className="space-y-4">
       {/* Header Actions */}
       <SearchControls
         searchTerm={searchParams.keyword}
@@ -176,7 +215,6 @@ export default function TaskManagement() {
             filters: {},
           }))
         }
-        className="mb-4"
       />
 
       {/* Tasks Table */}
@@ -192,7 +230,7 @@ export default function TaskManagement() {
             pageSize: searchParams.pageSize,
             total: pagination.total,
           }}
-          scroll={{ x: "max-content" }}
+          scroll={{ x: "max-content", y: "calc(100vh - 25rem)" }}
         />
       </Card>
     </div>

frontend/src/pages/DataCollection/collection.const.ts

@@ -1,4 +1,9 @@
-import { LogStatus, SyncMode, TaskStatus, TriggerType } from "./collection.model";
+import {
+  LogStatus,
+  SyncMode,
+  TaskStatus,
+  TriggerType,
+} from "./collection.model";
 
 export const StatusMap: Record<
   TaskStatus,
@@ -67,3 +72,10 @@ export const LogTriggerTypeMap: Record<
   [TriggerType.SCHEDULED]: { label: "定时", value: TriggerType.SCHEDULED },
   [TriggerType.API]: { label: "API", value: TriggerType.API },
 };
+
+export function mapCollectionTask(task: CollectionTask): CollectionTask {
+  return {
+    ...task,
+    status: StatusMap[task.status],
+  };
+}