tools_auto_web/src/pages/AutoAccessTaskAdd.js

import React, { useState } from "react";
import { Form, Input, Button, Card, message, Space, Select } from "antd";
import { ArrowLeftOutlined, SaveOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { autoAccessTasksApi } from "../services/api";
import { generateSearchTaskId } from "./PendingToolsAdd";
import { WEBSITE_LOCATION_OPTIONS } from "./ToolsLibraryDetail";

const { TextArea } = Input;
const { Option } = Select;
export const ACCESS_PROVIDER_OPTIONS = [
  { value: "official", label: "official" },
  { value: "302ai", label: "302ai" },
];
const AutoAccessTaskAdd = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [accessType, setAccessType] = useState(undefined);
  const navigate = useNavigate();

  // 接入方式选项
  const ACCESS_TYPE_OPTIONS = [
    { value: "api_no_crack", label: "API无破解" },
    { value: "api_crack", label: "API破解" },
    { value: "browser_auto_operate", label: "浏览器自动操作" },
  ];

  const handleSubmit = async (values) => {
    try {
      setLoading(true);

      const submitData = {
        access_task_id: generateSearchTaskId(),
        tools_name: values.toolsName,
        tools_function_name: values.toolsFunctionName,
        tools_function_desc: values.toolsFunctionDesc,
        access_type: values.accessType,
        api_provider: values.apiProvider || null,
        api_doc: values.apiDoc || null,
        operate_path_data: values.operatePathData || null,
        website_location: values.websiteLocation || null,
      };

      await autoAccessTasksApi.create(submitData);
      message.success("新增接入任务成功！");
      navigate("/auto-access-tasks");
    } catch (error) {
      console.error("新增接入任务失败:", error);
      message.error("新增接入任务失败，请重试");
    } finally {
      setLoading(false);
    }
  };

  const handleBack = () => {
    navigate("/auto-access-tasks");
  };

  const handleAccessTypeChange = (value) => {
    setAccessType(value);
    // 清空相关字段
    form.setFieldsValue({
      apiProvider: undefined,
      apiDoc: undefined,
      operatePathData: undefined,
    });
  };

  return (
    <div className="p-6">
      <Card
        title={
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }}>
            <Button
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={handleBack}
            >
              返回列表
            </Button>
            <span style={{ fontSize: "18px", fontWeight: "bold", flex: 1, textAlign: "center" }}>新增接入任务</span>
            <div style={{ width: "80px" }}></div>
          </div>
        }
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          autoComplete="off"
        >
          <Form.Item
            label="工具名称"
            name="toolsName"
            rules={[
              { required: true, message: "请输入工具名称" },
              { max: 100, message: "工具名称不能超过100个字符" },
            ]}
          >
            <Input placeholder="请输入工具名称" />
          </Form.Item>

          <Form.Item
            label="接入方式"
            name="accessType"
            rules={[{ required: true, message: "请选择接入方式" }]}
          >
            <Select
              placeholder="请选择接入方式"
              onChange={handleAccessTypeChange}
            >
              {ACCESS_TYPE_OPTIONS.map((option) => (
                <Option
                  key={option.value}
                  value={option.value}
                >
                  {option.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          {/* API接入方式时显示的字段 */}
          {(accessType === "api_no_crack" || accessType === "api_crack") && (
            <>
              <Form.Item
                label="API提供方"
                name="apiProvider"
                rules={[{ required: true, message: "请选择API提供方" }]}
              >
                <Select placeholder="请选择API提供方">
                  {ACCESS_PROVIDER_OPTIONS.map((option) => (
                    <Option
                      key={option.value}
                      value={option.value}
                    >
                      {option.label}
                    </Option>
                  ))}
                </Select>
              </Form.Item>

              <Form.Item
                label="API文档"
                name="apiDoc"
                rules={[
                  { required: true, message: "请输入API文档" },
                  { max: 500, message: "API文档不能超过500个字符" },
                ]}
              >
                <TextArea
                  rows={4}
                  placeholder="请输入API文档内容或链接"
                  showCount
                  maxLength={500}
                />
              </Form.Item>
            </>
          )}

          {/* 浏览器自动操作接入方式时显示的字段 */}
          {accessType === "browser_auto_operate" && (
            <Form.Item
              label="操作路径数据"
              name="operatePathData"
              rules={[
                { required: true, message: "请输入操作路径数据" },
                { max: 1000, message: "操作路径数据不能超过1000个字符" },
              ]}
            >
              <TextArea
                rows={6}
                placeholder="请输入浏览器自动操作的路径数据"
                showCount
                maxLength={1000}
              />
            </Form.Item>
          )}

          <Form.Item
            label="网站位置"
            name="websiteLocation"
            rules={[{ max: 200, message: "网站位置不能超过200个字符" }]}
          >
            <Select placeholder="请选择网站位置">
              {WEBSITE_LOCATION_OPTIONS.map((option) => (
                <Option
                  key={option.value}
                  value={option.value}
                >
                  {option.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            label="工具功能名称"
            name="toolsFunctionName"
            rules={[{ max: 100, message: "工具功能名称不能超过100个字符" }]}
          >
            <Input placeholder="请输入工具功能名称" />
          </Form.Item>

          <Form.Item
            label="工具功能描述"
            name="toolsFunctionDesc"
            rules={[{ max: 500, message: "工具功能描述不能超过500个字符" }]}
          >
            <TextArea
              rows={4}
              placeholder="请输入工具功能描述"
              showCount
              maxLength={500}
            />
          </Form.Item>

          <Form.Item style={{ textAlign: "center" }}>
            <Space>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                icon={<SaveOutlined />}
              >
                保存
              </Button>
              <Button onClick={handleBack}>取消</Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default AutoAccessTaskAdd;