feat(页面布局): 重构工具详情页表单布局并添加复制功能

重构PendingToolsDetail、ToolsLibraryDetail和AutoAccessTaskDetail页面的表单布局，使用Row和Col组件实现响应式布局
为参数定义和API文档添加复制按钮功能，提升用户体验
调整表单字段顺序和描述信息显示样式

src/pages/AutoAccessTaskDetail.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { Form, Input, Select, Button, Card, Descriptions, Tag, message, Spin } from "antd";
+import { Form, Input, Select, Button, Card, Descriptions, Tag, message, Spin, Row, Col, Tooltip } from "antd";
 import { useParams, useNavigate, useLocation } from "react-router-dom";
-import { ArrowLeftOutlined } from "@ant-design/icons";
+import { ArrowLeftOutlined, CopyOutlined } from "@ant-design/icons";
 import { autoAccessTasksApi } from "../services/api";
 import moment from "moment";
 
@@ -74,6 +74,19 @@ const AutoAccessTaskDetail = () => {
     }
   };
 
+  const handleCopyApiDoc = () => {
+    const apiDoc = form.getFieldValue('api_doc');
+    if (apiDoc) {
+      navigator.clipboard.writeText(apiDoc).then(() => {
+        message.success("API文档已复制到剪贴板");
+      }).catch(() => {
+        message.error("复制失败，请手动复制");
+      });
+    } else {
+      message.warning("API文档为空，无法复制");
+    }
+  };
+
   useEffect(() => {
     fetchData();
   }, [id]);
@@ -109,98 +122,148 @@ const AutoAccessTaskDetail = () => {
             form={form}
             layout="vertical"
             onFinish={handleSave}
-            className="form-container"
+            className="w-full"
           >
-            <Form.Item
-              label="检索任务ID"
-              name="search_task_id"
-            >
-              <Input />
-            </Form.Item>
-
-            <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="access_type"
-              rules={[{ required: true, message: "请选择接入方式" }]}
-            >
-              <Select>
-                <Option value="api_no_crack">API无破解</Option>
-                <Option value="api_crack">API破解</Option>
-                <Option value="browser_auto_operate">浏览器自动操作</Option>
-              </Select>
-            </Form.Item>
-
-            <Form.Item
-              label="工具功能描述"
-              name="tools_function_desc"
-            >
-              <TextArea rows={4} />
-            </Form.Item>
-
-            <Form.Item
-              label="API文档"
-              name="api_doc"
-            >
-              <TextArea rows={6} />
-            </Form.Item>
-
-            <Form.Item
-              label="API类名"
-              name="api_class_name"
-            >
-              <Input />
-            </Form.Item>
-
-            <Form.Item
-              label="操作路径数据"
-              name="operate_path_data"
-            >
-              <TextArea rows={4} />
-            </Form.Item>
-
-            <Form.Item
-              label="源内容链接"
-              name="origin_content_link"
-            >
-              <Input />
-            </Form.Item>
-
-            <Form.Item
-              label="状态"
-              name="status"
-              rules={[{ required: true, message: "请选择状态" }]}
-            >
-              <Select>
-                <Option value={0}>待处理</Option>
-                <Option value={1}>处理中</Option>
-                <Option value={2}>已完成</Option>
-                <Option value={3}>失败</Option>
-                <Option value={4}>异常</Option>
-              </Select>
-            </Form.Item>
-
-            <Form.Item
-              label="失败原因"
-              name="fail_reason"
-            >
-              <TextArea rows={3} />
-            </Form.Item>
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item
+                  label="检索任务ID"
+                  name="search_task_id"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                {" "}
+                <Form.Item
+                  label="工具名称"
+                  name="tools_name"
+                  rules={[{ required: true, message: "请输入工具名称" }]}
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item
+                  label="状态"
+                  name="status"
+                  rules={[{ required: true, message: "请选择状态" }]}
+                >
+                  <Select>
+                    <Option value={0}>待处理</Option>
+                    <Option value={1}>处理中</Option>
+                    <Option value={2}>已完成</Option>
+                    <Option value={3}>失败</Option>
+                    <Option value={4}>异常</Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  label="补充ApiKey"
+                  name="api_key"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item
+                  label="工具功能名称"
+                  name="tools_function_name"
+                  rules={[{ required: true, message: "请输入工具功能名称" }]}
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  label="接入方式"
+                  name="access_type"
+                  rules={[{ required: true, message: "请选择接入方式" }]}
+                >
+                  <Select>
+                    <Option value="api_no_crack">API无破解</Option>
+                    <Option value="api_crack">API破解</Option>
+                    <Option value="browser_auto_operate">浏览器自动操作</Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item
+                  label="API类名"
+                  name="api_class_name"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  label="源内容链接"
+                  name="origin_content_link"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={24}>
+                <Form.Item
+                  label={
+                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                      API文档
+                      <Tooltip title="点击复制API文档">
+                        <Button
+                          type="text"
+                          style={{ color: "blue" }}
+                          size="small"
+                          icon={<CopyOutlined />}
+                          onClick={handleCopyApiDoc}
+                        />
+                      </Tooltip>
+                    </div>
+                  }
+                  name="api_doc"
+                >
+                  <TextArea rows={6} />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={24}>
+                <Form.Item
+                  label="操作路径数据"
+                  name="operate_path_data"
+                >
+                  <TextArea rows={4} />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={24}>
+                <Form.Item
+                  label="工具功能描述"
+                  name="tools_function_desc"
+                >
+                  <TextArea rows={4} />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={24}>
+                <Form.Item
+                  label="失败原因"
+                  name="fail_reason"
+                >
+                  <TextArea rows={3} />
+                </Form.Item>
+              </Col>
+            </Row>
 
             <div className="button-group">
               <Button onClick={() => navigate("/auto-access-tasks")}>取消</Button>
@@ -219,6 +282,7 @@ const AutoAccessTaskDetail = () => {
           <Descriptions
             column={2}
             bordered
+            labelStyle={{ width: "140px", minWidth: "120px" }}
           >
             <Descriptions.Item label="接入任务ID">{data.access_task_id}</Descriptions.Item>
             <Descriptions.Item label="检索任务ID">{data.search_task_id}</Descriptions.Item>
@@ -230,6 +294,12 @@ const AutoAccessTaskDetail = () => {
             <Descriptions.Item label="状态">
               <Tag color={getStatusColor(data.status)}>{getStatusText(data.status)}</Tag>
             </Descriptions.Item>
+            <Descriptions.Item
+              label="补充ApiKey"
+              span={2}
+            >
+              {data.api_key || "无"}
+            </Descriptions.Item>
             <Descriptions.Item
               label="工具功能描述"
               span={2}
@@ -237,7 +307,31 @@ const AutoAccessTaskDetail = () => {
               {data.tools_function_desc}
             </Descriptions.Item>
             <Descriptions.Item
-              label="API文档"
+              label={
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  API文档
+                  <Tooltip title="点击复制API文档">
+                    <Button
+                      type="text"
+                      style={{ color: "blue" }}
+                      size="small"
+                      icon={<CopyOutlined />}
+                      onClick={() => {
+                        const apiDoc = data.api_doc;
+                        if (apiDoc) {
+                          navigator.clipboard.writeText(apiDoc).then(() => {
+                            message.success("API文档已复制到剪贴板");
+                          }).catch(() => {
+                            message.error("复制失败，请手动复制");
+                          });
+                        } else {
+                          message.warning("API文档为空，无法复制");
+                        }
+                      }}
+                    />
+                  </Tooltip>
+                </div>
+              }
               span={2}
             >
               <div style={{ maxHeight: "200px", overflow: "auto" }}>

src/pages/PendingToolsDetail.js

@@ -126,14 +126,6 @@ const PendingToolsDetail = () => {
             >
               <Input />
             </Form.Item>
-
-            <Form.Item
-              label="工具功能描述"
-              name="tools_function_desc"
-            >
-              <TextArea rows={4} />
-            </Form.Item>
-
             <Form.Item
               label="状态"
               name="status"
@@ -148,6 +140,13 @@ const PendingToolsDetail = () => {
               </Select>
             </Form.Item>
 
+            <Form.Item
+              label="工具功能描述"
+              name="tools_function_desc"
+            >
+              <TextArea rows={4} />
+            </Form.Item>
+
             <Form.Item
               label="失败原因"
               name="fail_reason"

src/pages/ToolsLibraryDetail.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { Form, Input, Select, Button, Card, Descriptions, Tag, message, Spin } from "antd";
+import { Form, Input, Select, Button, Card, Descriptions, Tag, message, Spin, Row, Col, Tooltip } from "antd";
 import { useParams, useNavigate, useLocation } from "react-router-dom";
-import { ArrowLeftOutlined } from "@ant-design/icons";
+import { ArrowLeftOutlined, CopyOutlined } from "@ant-design/icons";
 import { toolsLibraryApi } from "../services/api";
 import moment from "moment";
 
@@ -80,6 +80,22 @@ const ToolsLibraryDetail = () => {
     }
   };
 
+  const handleCopyParams = () => {
+    const paramsDefinition = form.getFieldValue("params_definition");
+    if (paramsDefinition) {
+      navigator.clipboard
+        .writeText(paramsDefinition)
+        .then(() => {
+          message.success("参数定义已复制到剪贴板");
+        })
+        .catch(() => {
+          message.error("复制失败");
+        });
+    } else {
+      message.warning("参数定义为空");
+    }
+  };
+
   useEffect(() => {
     fetchData();
   }, [id]);
@@ -115,31 +131,100 @@ const ToolsLibraryDetail = () => {
             form={form}
             layout="vertical"
             onFinish={handleSave}
-            className="form-container"
+            className="w-full"
           >
-            <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>
+            <Row gutter={24}>
+              <Col span={12}>
+                <Form.Item
+                  label="工具名称"
+                  name="tools_name"
+                  rules={[{ required: true, message: "请输入工具名称" }]}
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                {" "}
+                <Form.Item
+                  label="工具功能名称"
+                  name="tools_function_name"
+                  rules={[{ required: true, message: "请输入工具功能名称" }]}
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={12}>
+                <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>
+              </Col>
+              <Col span={12}>
+                <Form.Item
+                  label="调用方式"
+                  name="call_type"
+                >
+                  <Select>
+                    <Option value="api">API调用</Option>
+                    <Option value="browser_auto_operate">浏览器自动操作</Option>
+                  </Select>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row gutter={24}>
+              <Col span={12}>
+                {" "}
+                <Form.Item
+                  label="工具全称"
+                  name="tools_full_name"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                {" "}
+                <Form.Item
+                  label="工具版本"
+                  name="tools_version"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+            </Row>
 
+            <Row gutter={24}>
+              <Col span={12}>
+                <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>
+              </Col>
+              <Col span={12}>
+                {" "}
+                <Form.Item
+                  label="API路径"
+                  name="api_url_path"
+                >
+                  <Input />
+                </Form.Item>
+              </Col>
+            </Row>
             <Form.Item
               label="工具描述"
               name="tools_desc"
@@ -147,61 +232,6 @@ const ToolsLibraryDetail = () => {
               <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"
@@ -210,7 +240,20 @@ const ToolsLibraryDetail = () => {
             </Form.Item>
 
             <Form.Item
-              label="参数定义"
+              label={
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  参数定义
+                  <Tooltip title="点击复制参数定义">
+                    <Button
+                      type="text"
+                      style={{ color: "blue" }}
+                      size="small"
+                      icon={<CopyOutlined />}
+                      onClick={handleCopyParams}
+                    />
+                  </Tooltip>
+                </div>
+              }
               name="params_definition"
             >
               <TextArea rows={6} />
@@ -240,6 +283,7 @@ const ToolsLibraryDetail = () => {
           <Descriptions
             column={2}
             bordered
+            labelStyle={{ width: "150px" }}
           >
             <Descriptions.Item label="工具ID">{data.tools_id}</Descriptions.Item>
             <Descriptions.Item label="工具名称">{data.tools_name}</Descriptions.Item>
@@ -274,7 +318,31 @@ const ToolsLibraryDetail = () => {
               </div>
             </Descriptions.Item>
             <Descriptions.Item
-              label="参数定义"
+              label={
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  参数定义
+                  <Tooltip title="点击复制参数定义">
+                    <Button
+                      type="text"
+                      style={{ color: "blue" }}
+                      size="small"
+                      icon={<CopyOutlined />}
+                      onClick={() => {
+                        const paramsDefinition = data.params_definition;
+                        if (paramsDefinition) {
+                          navigator.clipboard.writeText(paramsDefinition).then(() => {
+                            message.success("参数定义已复制到剪贴板");
+                          }).catch(() => {
+                            message.error("复制失败，请手动复制");
+                          });
+                        } else {
+                          message.warning("参数定义为空，无法复制");
+                        }
+                      }}
+                    />
+                  </Tooltip>
+                </div>
+              }
               span={2}
             >
               <div style={{ maxHeight: "200px", overflow: "auto" }}>