32 lines
943 B
TypeScript
32 lines
943 B
TypeScript
import { Input } from 'antd';
|
||
import React from 'react';
|
||
|
||
interface JsonEditorProps {
|
||
/** JSON 文本内容 */
|
||
value: string;
|
||
/** 内容变化回调 */
|
||
onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
||
}
|
||
|
||
/**
|
||
* JSON 编辑区域。
|
||
* 用户可直接粘贴或编辑完整的工具集配置 JSON，修改会自动同步到可视化表单。
|
||
*/
|
||
export default function JsonEditor({ value, onChange }: JsonEditorProps) {
|
||
return (
|
||
<div style={{ padding: '4px 0 16px' }}>
|
||
<div style={{ marginBottom: 8, color: '#666', fontSize: 12 }}>
|
||
提示：您可以直接编辑下方 JSON 内容，可视化表单将自动同步更新。
|
||
</div>
|
||
<Input.TextArea
|
||
value={value}
|
||
onChange={onChange}
|
||
rows={25}
|
||
className="agent-editor-code-input"
|
||
placeholder="请输入完整的工具集配置 JSON"
|
||
style={{ fontFamily: 'monospace' }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|