tools_auto_web/src/pages/ToolsLibraryDetail.js

import React, { useState, useEffect } from "react";
import { Form, Input, Select, Button, Card, Descriptions, Tag, message, Spin } from "antd";
import { useParams, useNavigate, useLocation } from "react-router-dom";
import { ArrowLeftOutlined } from "@ant-design/icons";
import { toolsLibraryApi } from "../services/api";
import moment from "moment";

const { TextArea } = Input;
const { Option } = Select;

const ToolsLibraryDetail = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const { id } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const isEditMode = location.search.includes("mode=edit");

  const getStatusColor = (status) => {
    const statusMap = {
      normal: "success",
      offline: "default",
      unpublished: "default",
      published: "success",
    };
    return statusMap[status] || "warning";
  };

  const getStatusText = (status) => {
    const statusMap = {
      normal: "正常",
      offline: "已下线",
      unpublished: "待发布",
      published: "已发布",
    };
    return statusMap[status] || status;
  };

  const getCallTypeText = (type) => {
    const typeMap = {
      api: "API调用",
      browser_auto_operate: "浏览器自动操作",
    };
    return typeMap[type] || type;
  };

  const getApiProviderText = (provider) => {
    const providerMap = {
      official: "官方",
      "302ai": "302AI",
      official_api: "官方API",
    };
    return providerMap[provider] || provider;
  };

  const fetchData = async () => {
    try {
      const response = await toolsLibraryApi.getDetail(id);
      setData(response.data);
      form.setFieldsValue(response.data);
    } catch (error) {
      message.error("获取详情失败");
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async (values) => {
    setSaving(true);
    try {
      await toolsLibraryApi.update(id, values);
      message.success("更新成功");
      navigate("/tools-library");
    } catch (error) {
      message.error("更新失败");
    } finally {
      setSaving(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [id]);

  if (loading) {
    return (
      <div style={{ textAlign: "center", padding: "50px" }}>
        <Spin size="large" />
      </div>
    );
  }

  if (!data) {
    return <div>数据不存在</div>;
  }

  return (
    <div className="detail-container">
      <Button
        icon={<ArrowLeftOutlined />}
        onClick={() => navigate("/tools-library")}
        style={{ marginBottom: 16 }}
      >
        返回列表
      </Button>

      {isEditMode ? (
        <Card
          title="编辑工具"
          style={{ marginBottom: 24 }}
        >
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSave}
            className="form-container"
          >
            <Form.Item
              label="工具名称"
              name="tools_name"
              rules={[{ required: true, message: "请输入工具名称" }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="工具功能名称"
              name="tools_function_name"
              rules={[{ required: true, message: "请输入工具功能名称" }]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="工具全称"
              name="tools_full_name"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="工具描述"
              name="tools_desc"
            >
              <TextArea rows={4} />
            </Form.Item>

            <Form.Item
              label="工具版本"
              name="tools_version"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="自动接入任务ID"
              name="access_task_id"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="状态"
              name="status"
              rules={[{ required: true, message: "请选择状态" }]}
            >
              <Select>
                <Option value="normal">正常</Option>
                <Option value="offline">已下线</Option>
                <Option value="unpublished">待发布</Option>
                <Option value="published">已发布</Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="调用方式"
              name="call_type"
            >
              <Select>
                <Option value="api">API调用</Option>
                <Option value="browser_auto_operate">浏览器自动操作</Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="API提供方"
              name="api_provider"
            >
              <Select>
                <Option value="official">官方</Option>
                <Option value="302ai">302AI</Option>
                <Option value="official_api">官方API</Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="API路径"
              name="api_url_path"
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="操作路径数据"
              name="operate_path_data"
            >
              <TextArea rows={4} />
            </Form.Item>

            <Form.Item
              label="参数定义"
              name="params_definition"
            >
              <TextArea rows={6} />
            </Form.Item>

            <Form.Item
              label="响应数据说明"
              name="response_desc"
            >
              <TextArea rows={4} />
            </Form.Item>

            <div className="button-group">
              <Button onClick={() => navigate("/tools-library")}>取消</Button>
              <Button
                type="primary"
                htmlType="submit"
                loading={saving}
              >
                保存
              </Button>
            </div>
          </Form>
        </Card>
      ) : (
        <Card title="工具详情">
          <Descriptions
            column={2}
            bordered
          >
            <Descriptions.Item label="工具ID">{data.tools_id}</Descriptions.Item>
            <Descriptions.Item label="工具名称">{data.tools_name}</Descriptions.Item>
            <Descriptions.Item label="工具功能名称">{data.tools_function_name}</Descriptions.Item>
            <Descriptions.Item label="工具全称">{data.tools_full_name}</Descriptions.Item>
            <Descriptions.Item label="工具版本">
              <Tag color="geekblue">{data.tools_version}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="自动接入任务ID">{data.access_task_id}</Descriptions.Item>
            <Descriptions.Item label="状态">
              <Tag color={getStatusColor(data.status)}>{getStatusText(data.status)}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="调用方式">
              <Tag color="blue">{getCallTypeText(data.call_type)}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="API提供方">
              <Tag color="purple">{getApiProviderText(data.api_provider)}</Tag>
            </Descriptions.Item>
            <Descriptions.Item label="API路径">{data.api_url_path}</Descriptions.Item>
            <Descriptions.Item
              label="工具描述"
              span={2}
            >
              {data.tools_desc}
            </Descriptions.Item>
            <Descriptions.Item
              label="操作路径数据"
              span={2}
            >
              <div style={{ maxHeight: "200px", overflow: "auto" }}>
                <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{data.operate_path_data || "无"}</pre>
              </div>
            </Descriptions.Item>
            <Descriptions.Item
              label="参数定义"
              span={2}
            >
              <div style={{ maxHeight: "200px", overflow: "auto" }}>
                <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{data.params_definition || "无"}</pre>
              </div>
            </Descriptions.Item>
            <Descriptions.Item
              label="响应数据说明"
              span={2}
            >
              <div style={{ maxHeight: "200px", overflow: "auto" }}>
                <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{data.response_desc || "无"}</pre>
              </div>
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {moment(data.create_time).format("YYYY-MM-DD HH:mm:ss")}
            </Descriptions.Item>
            <Descriptions.Item label="更新时间">
              {moment(data.update_time).format("YYYY-MM-DD HH:mm:ss")}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}
    </div>
  );
};

export default ToolsLibraryDetail;