@yuku123/z-agent-frontend-component 0.1.1

package/src/pages/script/ApiBridgeEditor.jsx

@@ -0,0 +1,255 @@
+import {useCallback, useEffect, useState} from 'react'
+import {Button, Card, Input, Select, Space, Switch, Table, Tag, Tooltip, Typography} from 'antd'
+import {DeleteOutlined, PlusOutlined} from '@ant-design/icons'
+import FieldMappingEditor from './FieldMappingEditor'
+
+const {Text, Paragraph} = Typography
+
+const METHOD_OPTIONS = [
+    {value: 'GET', label: 'GET'},
+    {value: 'POST', label: 'POST'},
+    {value: 'PUT', label: 'PUT'},
+    {value: 'DELETE', label: 'DELETE'},
+    {value: 'PATCH', label: 'PATCH'},
+    {value: 'HEAD', label: 'HEAD'},
+    {value: 'OPTIONS', label: 'OPTIONS'},
+]
+
+const IN_OPTIONS = [
+    {value: 'path', label: 'path'},
+    {value: 'query', label: 'query'},
+    {value: 'header', label: 'header'},
+    {value: 'body', label: 'body'},
+]
+
+/**
+ * API Bridge 结构化编辑器
+ *
+ * value: string (sourceCode JSON — ApiBridgeDefinition)
+ * onChange: (newSourceCode: string) => void
+ */
+export default function ApiBridgeEditor({value, onChange, readonly = false}) {
+    const [def, setDef] = useState(null)
+    const [parseError, setParseError] = useState(null)
+
+    // Parse sourceCode JSON on mount / value change
+    useEffect(() => {
+        if (!value) {
+            setDef({
+                request: {
+                    httpRequestLine: {url: '', requestMethod: 'GET'},
+                    httpRequestHeader: {headers: {}},
+                    httpRequestBody: {body: null},
+                },
+                inputParams: [],
+                outputMapping: [],
+            })
+            setParseError(null)
+            return
+        }
+        try {
+            const parsed = typeof value === 'string' ? JSON.parse(value) : value
+            // Normalize structure
+            if (!parsed.request) parsed.request = {}
+            if (!parsed.request.httpRequestLine) parsed.request.httpRequestLine = {}
+            if (!parsed.request.httpRequestHeader) parsed.request.httpRequestHeader = {}
+            if (!parsed.request.httpRequestBody) parsed.request.httpRequestBody = {}
+            if (!parsed.inputParams) parsed.inputParams = []
+            if (!parsed.outputMapping) parsed.outputMapping = []
+            setDef(parsed)
+            setParseError(null)
+        } catch (e) {
+            setParseError('JSON 解析失败: ' + e.message)
+        }
+    }, [value])
+
+    // Emit change
+    const emit = useCallback((next) => {
+        setDef(next)
+        onChange?.(JSON.stringify(next, null, 2))
+    }, [onChange])
+
+    if (parseError) {
+        return (
+            <Card size="small" style={{borderColor: '#ff4d4f'}}>
+                <Text type="danger">{parseError}</Text>
+                <pre style={{fontFamily: 'monospace', fontSize: 12, marginTop: 8, maxHeight: 200, overflow: 'auto'}}>
+          {typeof value === 'string' ? value.substring(0, 500) : String(value)}
+        </pre>
+            </Card>
+        )
+    }
+
+    if (!def) return null
+
+    const line = def.request?.httpRequestLine || {}
+    const headers = def.request?.httpRequestHeader?.headers || {}
+
+    // --- Request info update ---
+    const updateMethod = (m) => {
+        const next = JSON.parse(JSON.stringify(def))
+        next.request.httpRequestLine.requestMethod = m
+        emit(next)
+    }
+
+    const updateUrl = (u) => {
+        const next = JSON.parse(JSON.stringify(def))
+        next.request.httpRequestLine.url = u
+        emit(next)
+    }
+
+    // --- Input params ---
+    const updateParam = (index, field, val) => {
+        const next = JSON.parse(JSON.stringify(def))
+        next.inputParams[index][field] = val
+        emit(next)
+    }
+
+    const removeParam = (index) => {
+        const next = JSON.parse(JSON.stringify(def))
+        next.inputParams = next.inputParams.filter((_, i) => i !== index)
+        emit(next)
+    }
+
+    const addParam = () => {
+        const next = JSON.parse(JSON.stringify(def))
+        next.inputParams.push({name: '', in: 'query', required: false, description: '', defaultValue: ''})
+        emit(next)
+    }
+
+    // --- Output mapping ---
+    const updateOutputMapping = (list) => {
+        const next = JSON.parse(JSON.stringify(def))
+        next.outputMapping = list
+        emit(next)
+    }
+
+    const paramColumns = [
+        {
+            title: '参数名',
+            dataIndex: 'name',
+            width: 140,
+            render: (v, _, i) => readonly ? <Text code>{v}</Text> : (
+                <Input size="small" value={v} onChange={e => updateParam(i, 'name', e.target.value)}
+                       placeholder="param name"/>
+            ),
+        },
+        {
+            title: '位置',
+            dataIndex: 'in',
+            width: 100,
+            render: (v, _, i) => readonly ? <Tag>{v}</Tag> : (
+                <Select size="small" value={v} onChange={v2 => updateParam(i, 'in', v2)} options={IN_OPTIONS}
+                        style={{width: '100%'}}/>
+            ),
+        },
+        {
+            title: '必填',
+            dataIndex: 'required',
+            width: 70,
+            render: (v, _, i) => readonly ? (
+                <span style={{color: v ? '#ff4d4f' : '#999'}}>{v ? '是' : '否'}</span>
+            ) : (
+                <Switch size="small" checked={v} onChange={v2 => updateParam(i, 'required', v2)}/>
+            ),
+        },
+        {
+            title: '默认值',
+            dataIndex: 'defaultValue',
+            width: 120,
+            render: (v, _, i) => readonly ? <span>{v || '-'}</span> : (
+                <Input size="small" value={v || ''} onChange={e => updateParam(i, 'defaultValue', e.target.value)}
+                       placeholder="default"/>
+            ),
+        },
+        {
+            title: '描述',
+            dataIndex: 'description',
+            render: (v, _, i) => readonly ? <span style={{color: '#666'}}>{v}</span> : (
+                <Input size="small" value={v} onChange={e => updateParam(i, 'description', e.target.value)}
+                       placeholder="描述"/>
+            ),
+        },
+        ...(!readonly ? [{
+            title: '',
+            key: 'action',
+            width: 50,
+            render: (_, __, i) => (
+                <Tooltip title="删除">
+                    <Button size="small" type="text" danger icon={<DeleteOutlined/>} onClick={() => removeParam(i)}/>
+                </Tooltip>
+            ),
+        }] : []),
+    ]
+
+    return (
+        <div>
+            {/* Request Info */}
+            <Card size="small" title="请求配置" style={{marginBottom: 16}}>
+                <Space style={{width: '100%'}} direction="vertical" size="small">
+                    <Space align="center" style={{width: '100%'}}>
+                        {readonly ? (
+                            <Tag color="blue"
+                                 style={{fontSize: 14, padding: '2px 12px'}}>{line.requestMethod || 'GET'}</Tag>
+                        ) : (
+                            <Select
+                                value={line.requestMethod || 'GET'}
+                                onChange={updateMethod}
+                                options={METHOD_OPTIONS}
+                                style={{width: 120}}
+                            />
+                        )}
+                        {readonly ? (
+                            <Text code style={{fontSize: 13, wordBreak: 'break-all'}}>{line.url}</Text>
+                        ) : (
+                            <Input
+                                value={line.url || ''}
+                                onChange={e => updateUrl(e.target.value)}
+                                placeholder="https://api.example.com/resource/{id}?key=${key}"
+                                style={{fontFamily: 'monospace', flex: 1}}
+                            />
+                        )}
+                    </Space>
+                    {Object.keys(headers).length > 0 && (
+                        <div>
+                            <Text type="secondary" style={{fontSize: 12}}>请求头: </Text>
+                            {Object.entries(headers).map(([k, v]) => (
+                                <Tag key={k} style={{fontFamily: 'monospace', fontSize: 11}}>
+                                    {k}: {String(v).substring(0, 50)}
+                                </Tag>
+                            ))}
+                        </div>
+                    )}
+                </Space>
+            </Card>
+
+            {/* Input Params */}
+            <Card
+                size="small"
+                title={`输入参数 (${def.inputParams?.length || 0})`}
+                style={{marginBottom: 16}}
+                extra={!readonly && (
+                    <Button size="small" type="link" icon={<PlusOutlined/>} onClick={addParam}>添加</Button>
+                )}
+            >
+                <Table
+                    dataSource={def.inputParams || []}
+                    columns={paramColumns}
+                    rowKey={(_, i) => i}
+                    pagination={false}
+                    size="small"
+                    locale={{emptyText: '暂无输入参数'}}
+                />
+            </Card>
+
+            {/* Output Mapping */}
+            <Card size="small" title={`输出字段映射 (${def.outputMapping?.length || 0})`}>
+                <FieldMappingEditor
+                    value={def.outputMapping || []}
+                    onChange={updateOutputMapping}
+                    readonly={readonly}
+                />
+            </Card>
+        </div>
+    )
+}

package/src/pages/script/CurlImportModal.jsx

@@ -0,0 +1,263 @@
+import {useState} from 'react'
+import {Alert, Button, Card, Descriptions, Input, message, Modal, Space, Steps, Tabs, Tag} from 'antd'
+import {ApiOutlined, CodeOutlined, ExperimentOutlined} from '@ant-design/icons'
+import {scriptApi} from '../../api'
+import FieldMappingEditor from './FieldMappingEditor'
+
+const {TextArea} = Input
+const {Step} = Steps
+
+export default function CurlImportModal({open, onClose, onSuccess}) {
+    const [current, setCurrent] = useState(0)
+    const [loading, setLoading] = useState(false)
+    const [previewLoading, setPreviewLoading] = useState(false)
+    const [curl, setCurl] = useState('')
+    const [parsed, setParsed] = useState(null)       // 解析结果
+    const [outputMapping, setOutputMapping] = useState([])
+    const [previewResult, setPreviewResult] = useState(null)
+    const [activeTab, setActiveTab] = useState('mapping')
+
+    // 重置状态
+    const reset = () => {
+        setCurrent(0)
+        setCurl('')
+        setParsed(null)
+        setOutputMapping([])
+        setPreviewResult(null)
+        setActiveTab('mapping')
+    }
+
+    const handleClose = () => {
+        reset()
+        onClose()
+    }
+
+    // Step 1: 解析 curl
+    const handleParse = async () => {
+        if (!curl.trim()) {
+            message.warning('请粘贴 curl 命令')
+            return
+        }
+        setLoading(true)
+        try {
+            const res = await scriptApi.importCurl({curl})
+            if (res?.success) {
+                setParsed(res)
+                // 默认从 outputMapping 恢复，如果没有则为空
+                setOutputMapping(res.outputMapping || [])
+                setCurrent(1)
+            } else {
+                message.error(res?.message || '解析失败')
+            }
+        } catch (e) {
+            message.error('解析失败: ' + (e?.message || '网络错误'))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    // Step 2: 预览执行
+    const handlePreview = async () => {
+        setPreviewLoading(true)
+        try {
+            const res = await scriptApi.previewMapping({
+                curl,
+                outputMapping: outputMapping.filter(m => m.name && m.jsonPath),
+            })
+            setPreviewResult(res)
+            setActiveTab('result')
+        } catch (e) {
+            message.error('预览失败: ' + (e?.message || '网络错误'))
+        } finally {
+            setPreviewLoading(false)
+        }
+    }
+
+    // Step 3: 确认创建
+    const handleCreate = async () => {
+        setLoading(true)
+        try {
+            const res = await scriptApi.importCurl({
+                curl,
+                outputMapping: outputMapping.filter(m => m.name && m.jsonPath),
+            })
+            if (res?.success) {
+                message.success(`脚本 [${res.scriptCode}] 创建成功`)
+                reset()
+                onSuccess?.()
+                onClose()
+            } else {
+                message.error(res?.message || '创建失败')
+            }
+        } catch (e) {
+            message.error('创建失败: ' + (e?.message || '网络错误'))
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const requestDescr = parsed?.request?.httpRequestLine
+    const headers = parsed?.request?.httpRequestHeader?.headers
+
+    return (
+        <Modal
+            title={<Space><ApiOutlined/>从 Curl 导入 API Bridge 脚本</Space>}
+            open={open}
+            onCancel={handleClose}
+            width={900}
+            footer={null}
+            destroyOnClose
+        >
+            <Steps current={current} size="small" style={{marginBottom: 24}}>
+                <Step title="粘贴 curl" description="输入 curl 命令"/>
+                <Step title="配置映射" description="设置字段映射"/>
+                <Step title="确认创建" description="保存脚本"/>
+            </Steps>
+
+            {/* Step 0: 粘贴 curl */}
+            {current === 0 && (
+                <div>
+                    <p style={{color: '#666', marginBottom: 8}}>
+                        粘贴任意 HTTP curl 命令，系统将自动解析并生成 API_BRIDGE 脚本
+                    </p>
+                    <TextArea
+                        rows={8}
+                        value={curl}
+                        onChange={e => setCurl(e.target.value)}
+                        placeholder={`curl -X POST https://api.example.com/users \\
+  -H "Authorization: Bearer \${token}" \\
+  -H "Content-Type: application/json" \\
+  -d '{"name": "\${name}", "email": "\${email}"}'`}
+                        style={{fontFamily: 'monospace', fontSize: 13, marginBottom: 12}}
+                    />
+                    <Button type="primary" icon={<CodeOutlined/>} onClick={handleParse} loading={loading} block>
+                        解析 curl
+                    </Button>
+                </div>
+            )}
+
+            {/* Step 1: 配置映射 */}
+            {current === 1 && parsed && (
+                <div>
+                    {/* 请求概览 */}
+                    <Card size="small" title="请求信息" style={{marginBottom: 16}}>
+                        <Descriptions column={3} size="small">
+                            <Descriptions.Item label="方法"><Tag
+                                color="blue">{requestDescr?.method || 'GET'}</Tag></Descriptions.Item>
+                            <Descriptions.Item label="URL" span={2}>
+                                <Text copyable
+                                      style={{fontFamily: 'monospace', fontSize: 12}}>{requestDescr?.url}</Text>
+                            </Descriptions.Item>
+                        </Descriptions>
+                        {headers && Object.keys(headers).length > 0 && (
+                            <div style={{marginTop: 8}}>
+                                <span style={{fontSize: 12, color: '#666', fontWeight: 500}}>请求头: </span>
+                                {Object.entries(headers).map(([k, v]) => (
+                                    <Tag key={k} style={{
+                                        fontFamily: 'monospace',
+                                        fontSize: 11
+                                    }}>{k}: {String(v).substring(0, 40)}</Tag>
+                                ))}
+                            </div>
+                        )}
+                        {parsed.inputParams?.length > 0 && (
+                            <div style={{marginTop: 8}}>
+                                <span style={{fontSize: 12, color: '#666', fontWeight: 500}}>输入参数: </span>
+                                {parsed.inputParams.map(p => (
+                                    <Tag key={p.name} color={p.required ? 'orange' : 'default'}
+                                         style={{fontFamily: 'monospace'}}>
+                                        {p.name}{' '}
+                                        <span style={{fontSize: 10}}>({p.in})</span>
+                                    </Tag>
+                                ))}
+                            </div>
+                        )}
+                    </Card>
+
+                    {/* 字段映射 + 预览 */}
+                    <Tabs activeKey={activeTab} onChange={setActiveTab} items={[
+                        {
+                            key: 'mapping',
+                            label: '输出字段映射',
+                            children: (
+                                <div>
+                                    <p style={{fontSize: 12, color: '#666', marginBottom: 8}}>
+                                        配置 JSONPath 从响应中抽取字段。MCP 工具只返回映射后的字段。
+                                    </p>
+                                    <FieldMappingEditor value={outputMapping} onChange={setOutputMapping}/>
+                                </div>
+                            ),
+                        },
+                        {
+                            key: 'result',
+                            label: '试运行结果',
+                            children: (
+                                <div>
+                                    <Button icon={<ExperimentOutlined/>} onClick={handlePreview}
+                                            loading={previewLoading} style={{marginBottom: 12}}>
+                                        试运行并查看映射结果
+                                    </Button>
+                                    {previewResult && (
+                                        <div>
+                                            {previewResult.error ? (
+                                                <Alert type="error" message={previewResult.error}
+                                                       style={{marginBottom: 12}}/>
+                                            ) : (
+                                                <Descriptions column={3} size="small" bordered
+                                                              style={{marginBottom: 12}}>
+                                                    <Descriptions.Item
+                                                        label="状态码">{previewResult.status}</Descriptions.Item>
+                                                    <Descriptions.Item
+                                                        label="耗时">{previewResult.durationMs}ms</Descriptions.Item>
+                                                    <Descriptions.Item
+                                                        label="响应体大小">{(previewResult.bodyRaw?.length || 0).toLocaleString()} chars</Descriptions.Item>
+                                                </Descriptions>
+                                            )}
+                                            {previewResult.mapped && Object.keys(previewResult.mapped).length > 0 && (
+                                                <Card size="small" title="映射结果" style={{marginBottom: 12}}>
+                          <pre style={{fontFamily: 'monospace', fontSize: 12, margin: 0, whiteSpace: 'pre-wrap'}}>
+                            {JSON.stringify(previewResult.mapped, null, 2)}
+                          </pre>
+                                                </Card>
+                                            )}
+                                            {previewResult.bodyObject && (
+                                                <Card size="small" title="原始响应 (JSON)" style={{marginBottom: 12}}>
+                          <pre style={{
+                              fontFamily: 'monospace',
+                              fontSize: 12,
+                              margin: 0,
+                              maxHeight: 300,
+                              overflow: 'auto',
+                              whiteSpace: 'pre-wrap'
+                          }}>
+                            {JSON.stringify(previewResult.bodyObject, null, 2)}
+                          </pre>
+                                                </Card>
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            ),
+                        },
+                    ]}/>
+                </div>
+            )}
+
+            {/* Step 2: 确认创建 (在当前步骤合并) */}
+            {current === 1 && parsed && (
+                <div style={{marginTop: 16, textAlign: 'right'}}>
+                    <Space>
+                        <Button onClick={() => {
+                            setCurrent(0);
+                            setParsed(null)
+                        }}>返回</Button>
+                        <Button onClick={handlePreview} loading={previewLoading}>试运行</Button>
+                        <Button type="primary" onClick={handleCreate} loading={loading}>
+                            创建脚本
+                        </Button>
+                    </Space>
+                </div>
+            )}
+        </Modal>
+    )
+}

package/src/pages/script/FieldMappingEditor.jsx

@@ -0,0 +1,131 @@
+import {Button, Input, Select, Space, Switch, Table, Tooltip} from 'antd'
+import {ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined} from '@ant-design/icons'
+
+const TYPE_OPTIONS = [
+    {value: 'string', label: 'string'},
+    {value: 'number', label: 'number'},
+    {value: 'boolean', label: 'boolean'},
+    {value: 'object', label: 'object'},
+    {value: 'array', label: 'array'},
+]
+
+/**
+ * 字段映射编辑器
+ * value: Array<{ name, type, jsonPath, required, description }>
+ * onChange: (newList) => void
+ */
+export default function FieldMappingEditor({value = [], onChange, readonly = false}) {
+    const update = (index, field, val) => {
+        const next = [...value]
+        next[index] = {...next[index], [field]: val}
+        onChange(next)
+    }
+
+    const remove = (index) => {
+        const next = value.filter((_, i) => i !== index)
+        onChange(next)
+    }
+
+    const move = (index, dir) => {
+        const target = index + dir
+        if (target < 0 || target >= value.length) return
+        const next = [...value]
+        const tmp = next[index]
+        next[index] = next[target]
+        next[target] = tmp
+        onChange(next)
+    }
+
+    const add = () => {
+        onChange([...value, {name: '', type: 'string', jsonPath: '', required: false, description: ''}])
+    }
+
+    const columns = [
+        {
+            title: '输出字段名',
+            dataIndex: 'name',
+            width: 150,
+            render: (_v, _r, i) => readonly ? <span style={{fontFamily: 'monospace'}}>{_v}</span> : (
+                <Input size="small" value={_v} onChange={e => update(i, 'name', e.target.value)}
+                       placeholder="e.g. user_name"/>
+            ),
+        },
+        {
+            title: '类型',
+            dataIndex: 'type',
+            width: 100,
+            render: (_v, _r, i) => readonly ? <span>{_v}</span> : (
+                <Select size="small" value={_v} onChange={v => update(i, 'type', v)} options={TYPE_OPTIONS}
+                        style={{width: '100%'}}/>
+            ),
+        },
+        {
+            title: 'JSONPath',
+            dataIndex: 'jsonPath',
+            width: 220,
+            render: (_v, _r, i) => readonly ? <span style={{fontFamily: 'monospace', color: '#0958d9'}}>{_v}</span> : (
+                <Input size="small" value={_v} onChange={e => update(i, 'jsonPath', e.target.value)}
+                       placeholder="$.data.user.name" style={{fontFamily: 'monospace'}}/>
+            ),
+        },
+        {
+            title: '必填',
+            dataIndex: 'required',
+            width: 60,
+            render: (_v, _r, i) => readonly ? (
+                <span style={{color: _v ? '#ff4d4f' : '#999'}}>{_v ? '是' : '否'}</span>
+            ) : (
+                <Switch size="small" checked={_v} onChange={v => update(i, 'required', v)}/>
+            ),
+        },
+        {
+            title: '描述',
+            dataIndex: 'description',
+            width: 160,
+            render: (_v, _r, i) => readonly ? <span style={{color: '#666'}}>{_v}</span> : (
+                <Input size="small" value={_v} onChange={e => update(i, 'description', e.target.value)}
+                       placeholder="字段说明"/>
+            ),
+        },
+        ...(readonly ? [] : [{
+            title: '操作',
+            key: 'action',
+            width: 100,
+            render: (_v, _r, i) => (
+                <Space size="small">
+                    <Tooltip title="上移"><Button size="small" type="text" icon={<ArrowUpOutlined/>} disabled={i === 0}
+                                                  onClick={() => move(i, -1)}/></Tooltip>
+                    <Tooltip title="下移"><Button size="small" type="text" icon={<ArrowDownOutlined/>}
+                                                  disabled={i === value.length - 1}
+                                                  onClick={() => move(i, 1)}/></Tooltip>
+                    <Tooltip title="删除"><Button size="small" type="text" danger icon={<DeleteOutlined/>}
+                                                  onClick={() => remove(i)}/></Tooltip>
+                </Space>
+            ),
+        }]),
+    ]
+
+    return (
+        <div>
+            <Table
+                dataSource={value}
+                columns={columns}
+                rowKey={(_, i) => i}
+                pagination={false}
+                size="small"
+                bordered
+                style={{marginBottom: 8}}
+            />
+            {!readonly && (
+                <Button size="small" type="dashed" icon={<PlusOutlined/>} onClick={add} block>
+                    添加字段映射
+                </Button>
+            )}
+            {value.length === 0 && !readonly && (
+                <div style={{textAlign: 'center', color: '#999', padding: 12}}>
+                    暂未配置输出字段映射。发布后 MCP 工具将返回原始响应体。
+                </div>
+            )}
+        </div>
+    )
+}