|
@@ -1,9 +1,9 @@
|
|
|
-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';
|
|
|
+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;
|
|
@@ -16,37 +16,41 @@ const ToolsLibraryDetail = () => {
|
|
|
const { id } = useParams();
|
|
|
const navigate = useNavigate();
|
|
|
const location = useLocation();
|
|
|
- const isEditMode = location.search.includes('mode=edit');
|
|
|
+ const isEditMode = location.search.includes("mode=edit");
|
|
|
|
|
|
const getStatusColor = (status) => {
|
|
|
const statusMap = {
|
|
|
- 'normal': 'success',
|
|
|
- 'offline': 'default',
|
|
|
+ normal: "success",
|
|
|
+ offline: "default",
|
|
|
+ unpublished: "default",
|
|
|
+ published: "success",
|
|
|
};
|
|
|
- return statusMap[status] || 'warning';
|
|
|
+ return statusMap[status] || "warning";
|
|
|
};
|
|
|
|
|
|
const getStatusText = (status) => {
|
|
|
const statusMap = {
|
|
|
- 'normal': '正常',
|
|
|
- 'offline': '已下线',
|
|
|
+ normal: "正常",
|
|
|
+ offline: "已下线",
|
|
|
+ unpublished: "待发布",
|
|
|
+ published: "已发布",
|
|
|
};
|
|
|
return statusMap[status] || status;
|
|
|
};
|
|
|
|
|
|
const getCallTypeText = (type) => {
|
|
|
const typeMap = {
|
|
|
- 'api': 'API调用',
|
|
|
- 'browser_auto_operate': '浏览器自动操作',
|
|
|
+ api: "API调用",
|
|
|
+ browser_auto_operate: "浏览器自动操作",
|
|
|
};
|
|
|
return typeMap[type] || type;
|
|
|
};
|
|
|
|
|
|
const getApiProviderText = (provider) => {
|
|
|
const providerMap = {
|
|
|
- 'official': '官方',
|
|
|
- '302ai': '302AI',
|
|
|
- 'official_api': '官方API',
|
|
|
+ official: "官方",
|
|
|
+ "302ai": "302AI",
|
|
|
+ official_api: "官方API",
|
|
|
};
|
|
|
return providerMap[provider] || provider;
|
|
|
};
|
|
@@ -57,7 +61,7 @@ const ToolsLibraryDetail = () => {
|
|
|
setData(response.data);
|
|
|
form.setFieldsValue(response.data);
|
|
|
} catch (error) {
|
|
|
- message.error('获取详情失败');
|
|
|
+ message.error("获取详情失败");
|
|
|
} finally {
|
|
|
setLoading(false);
|
|
|
}
|
|
@@ -67,10 +71,10 @@ const ToolsLibraryDetail = () => {
|
|
|
setSaving(true);
|
|
|
try {
|
|
|
await toolsLibraryApi.update(id, values);
|
|
|
- message.success('更新成功');
|
|
|
- navigate('/tools-library');
|
|
|
+ message.success("更新成功");
|
|
|
+ navigate("/tools-library");
|
|
|
} catch (error) {
|
|
|
- message.error('更新失败');
|
|
|
+ message.error("更新失败");
|
|
|
} finally {
|
|
|
setSaving(false);
|
|
|
}
|
|
@@ -82,7 +86,7 @@ const ToolsLibraryDetail = () => {
|
|
|
|
|
|
if (loading) {
|
|
|
return (
|
|
|
- <div style={{ textAlign: 'center', padding: '50px' }}>
|
|
|
+ <div style={{ textAlign: "center", padding: "50px" }}>
|
|
|
<Spin size="large" />
|
|
|
</div>
|
|
|
);
|
|
@@ -96,14 +100,17 @@ const ToolsLibraryDetail = () => {
|
|
|
<div className="detail-container">
|
|
|
<Button
|
|
|
icon={<ArrowLeftOutlined />}
|
|
|
- onClick={() => navigate('/tools-library')}
|
|
|
+ onClick={() => navigate("/tools-library")}
|
|
|
style={{ marginBottom: 16 }}
|
|
|
>
|
|
|
返回列表
|
|
|
</Button>
|
|
|
|
|
|
{isEditMode ? (
|
|
|
- <Card title="编辑工具" style={{ marginBottom: 24 }}>
|
|
|
+ <Card
|
|
|
+ title="编辑工具"
|
|
|
+ style={{ marginBottom: 24 }}
|
|
|
+ >
|
|
|
<Form
|
|
|
form={form}
|
|
|
layout="vertical"
|
|
@@ -113,7 +120,7 @@ const ToolsLibraryDetail = () => {
|
|
|
<Form.Item
|
|
|
label="工具名称"
|
|
|
name="tools_name"
|
|
|
- rules={[{ required: true, message: '请输入工具名称' }]}
|
|
|
+ rules={[{ required: true, message: "请输入工具名称" }]}
|
|
|
>
|
|
|
<Input />
|
|
|
</Form.Item>
|
|
@@ -121,7 +128,7 @@ const ToolsLibraryDetail = () => {
|
|
|
<Form.Item
|
|
|
label="工具功能名称"
|
|
|
name="tools_function_name"
|
|
|
- rules={[{ required: true, message: '请输入工具功能名称' }]}
|
|
|
+ rules={[{ required: true, message: "请输入工具功能名称" }]}
|
|
|
>
|
|
|
<Input />
|
|
|
</Form.Item>
|
|
@@ -157,11 +164,13 @@ const ToolsLibraryDetail = () => {
|
|
|
<Form.Item
|
|
|
label="状态"
|
|
|
name="status"
|
|
|
- rules={[{ required: true, message: '请选择状态' }]}
|
|
|
+ rules={[{ required: true, message: "请选择状态" }]}
|
|
|
>
|
|
|
<Select>
|
|
|
<Option value="normal">正常</Option>
|
|
|
<Option value="offline">已下线</Option>
|
|
|
+ <Option value="unpublished">待发布</Option>
|
|
|
+ <Option value="published">已发布</Option>
|
|
|
</Select>
|
|
|
</Form.Item>
|
|
|
|
|
@@ -215,10 +224,12 @@ const ToolsLibraryDetail = () => {
|
|
|
</Form.Item>
|
|
|
|
|
|
<div className="button-group">
|
|
|
- <Button onClick={() => navigate('/tools-library')}>
|
|
|
- 取消
|
|
|
- </Button>
|
|
|
- <Button type="primary" htmlType="submit" loading={saving}>
|
|
|
+ <Button onClick={() => navigate("/tools-library")}>取消</Button>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ htmlType="submit"
|
|
|
+ loading={saving}
|
|
|
+ >
|
|
|
保存
|
|
|
</Button>
|
|
|
</div>
|
|
@@ -226,29 +237,20 @@ const ToolsLibraryDetail = () => {
|
|
|
</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
|
|
|
+ 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="自动接入任务ID">{data.access_task_id}</Descriptions.Item>
|
|
|
<Descriptions.Item label="状态">
|
|
|
- <Tag color={getStatusColor(data.status)}>
|
|
|
- {getStatusText(data.status)}
|
|
|
- </Tag>
|
|
|
+ <Tag color={getStatusColor(data.status)}>{getStatusText(data.status)}</Tag>
|
|
|
</Descriptions.Item>
|
|
|
<Descriptions.Item label="调用方式">
|
|
|
<Tag color="blue">{getCallTypeText(data.call_type)}</Tag>
|
|
@@ -256,38 +258,42 @@ const ToolsLibraryDetail = () => {
|
|
|
<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}>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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')}
|
|
|
+ {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')}
|
|
|
+ {moment(data.update_time).format("YYYY-MM-DD HH:mm:ss")}
|
|
|
</Descriptions.Item>
|
|
|
</Descriptions>
|
|
|
</Card>
|
|
@@ -296,4 +302,4 @@ const ToolsLibraryDetail = () => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
-export default ToolsLibraryDetail;
|
|
|
+export default ToolsLibraryDetail;
|