|
|
@@ -1,25 +1,25 @@
|
|
|
import React, { useState, useEffect, useCallback } from 'react';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
import {
|
|
|
- Space,
|
|
|
Button,
|
|
|
Form,
|
|
|
- Card,
|
|
|
Typography,
|
|
|
Banner,
|
|
|
- Row,
|
|
|
- Col,
|
|
|
+ Tabs,
|
|
|
+ TabPane,
|
|
|
+ Card,
|
|
|
+ Input,
|
|
|
InputNumber,
|
|
|
Switch,
|
|
|
- Select,
|
|
|
- Input,
|
|
|
+ TextArea,
|
|
|
+ Row,
|
|
|
+ Col,
|
|
|
} from '@douyinfe/semi-ui';
|
|
|
import {
|
|
|
IconCode,
|
|
|
- IconEdit,
|
|
|
IconPlus,
|
|
|
IconDelete,
|
|
|
- IconSetting,
|
|
|
+ IconRefresh,
|
|
|
} from '@douyinfe/semi-icons';
|
|
|
|
|
|
const { Text } = Typography;
|
|
|
@@ -34,18 +34,17 @@ const JSONEditor = ({
|
|
|
showClear = true,
|
|
|
template,
|
|
|
templateLabel,
|
|
|
- editorType = 'keyValue', // keyValue, object, region
|
|
|
- autosize = true,
|
|
|
+ editorType = 'keyValue',
|
|
|
rules = [],
|
|
|
formApi = null,
|
|
|
...props
|
|
|
}) => {
|
|
|
const { t } = useTranslation();
|
|
|
-
|
|
|
+
|
|
|
// 初始化JSON数据
|
|
|
const [jsonData, setJsonData] = useState(() => {
|
|
|
// 初始化时解析JSON数据
|
|
|
- if (value && value.trim()) {
|
|
|
+ if (typeof value === 'string' && value.trim()) {
|
|
|
try {
|
|
|
const parsed = JSON.parse(value);
|
|
|
return parsed;
|
|
|
@@ -53,13 +52,16 @@ const JSONEditor = ({
|
|
|
return {};
|
|
|
}
|
|
|
}
|
|
|
+ if (typeof value === 'object' && value !== null) {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
return {};
|
|
|
});
|
|
|
-
|
|
|
+
|
|
|
// 根据键数量决定默认编辑模式
|
|
|
const [editMode, setEditMode] = useState(() => {
|
|
|
// 如果初始JSON数据的键数量大于10个,则默认使用手动模式
|
|
|
- if (value && value.trim()) {
|
|
|
+ if (typeof value === 'string' && value.trim()) {
|
|
|
try {
|
|
|
const parsed = JSON.parse(value);
|
|
|
const keyCount = Object.keys(parsed).length;
|
|
|
@@ -76,7 +78,12 @@ const JSONEditor = ({
|
|
|
// 数据同步 - 当value变化时总是更新jsonData(如果JSON有效)
|
|
|
useEffect(() => {
|
|
|
try {
|
|
|
- const parsed = value && value.trim() ? JSON.parse(value) : {};
|
|
|
+ let parsed = {};
|
|
|
+ if (typeof value === 'string' && value.trim()) {
|
|
|
+ parsed = JSON.parse(value);
|
|
|
+ } else if (typeof value === 'object' && value !== null) {
|
|
|
+ parsed = value;
|
|
|
+ }
|
|
|
setJsonData(parsed);
|
|
|
setJsonError('');
|
|
|
} catch (error) {
|
|
|
@@ -86,18 +93,17 @@ const JSONEditor = ({
|
|
|
}
|
|
|
}, [value]);
|
|
|
|
|
|
-
|
|
|
// 处理可视化编辑的数据变化
|
|
|
const handleVisualChange = useCallback((newData) => {
|
|
|
setJsonData(newData);
|
|
|
setJsonError('');
|
|
|
const jsonString = Object.keys(newData).length === 0 ? '' : JSON.stringify(newData, null, 2);
|
|
|
-
|
|
|
+
|
|
|
// 通过formApi设置值(如果提供的话)
|
|
|
if (formApi && field) {
|
|
|
formApi.setValue(field, jsonString);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
onChange?.(jsonString);
|
|
|
}, [onChange, formApi, field]);
|
|
|
|
|
|
@@ -127,7 +133,12 @@ const JSONEditor = ({
|
|
|
} else {
|
|
|
// 从手动模式切换到可视化模式,需要验证JSON
|
|
|
try {
|
|
|
- const parsed = value && value.trim() ? JSON.parse(value) : {};
|
|
|
+ let parsed = {};
|
|
|
+ if (typeof value === 'string' && value.trim()) {
|
|
|
+ parsed = JSON.parse(value);
|
|
|
+ } else if (typeof value === 'object' && value !== null) {
|
|
|
+ parsed = value;
|
|
|
+ }
|
|
|
setJsonData(parsed);
|
|
|
setJsonError('');
|
|
|
setEditMode('visual');
|
|
|
@@ -143,11 +154,11 @@ const JSONEditor = ({
|
|
|
const addKeyValue = useCallback(() => {
|
|
|
const newData = { ...jsonData };
|
|
|
const keys = Object.keys(newData);
|
|
|
- let newKey = 'key';
|
|
|
let counter = 1;
|
|
|
+ let newKey = `field_${counter}`;
|
|
|
while (newData.hasOwnProperty(newKey)) {
|
|
|
- newKey = `key${counter}`;
|
|
|
- counter++;
|
|
|
+ counter += 1;
|
|
|
+ newKey = `field_${counter}`;
|
|
|
}
|
|
|
newData[newKey] = '';
|
|
|
handleVisualChange(newData);
|
|
|
@@ -162,11 +173,15 @@ const JSONEditor = ({
|
|
|
|
|
|
// 更新键名
|
|
|
const updateKey = useCallback((oldKey, newKey) => {
|
|
|
- if (oldKey === newKey) return;
|
|
|
- const newData = { ...jsonData };
|
|
|
- const value = newData[oldKey];
|
|
|
- delete newData[oldKey];
|
|
|
- newData[newKey] = value;
|
|
|
+ if (oldKey === newKey || !newKey) return;
|
|
|
+ const newData = {};
|
|
|
+ Object.entries(jsonData).forEach(([k, v]) => {
|
|
|
+ if (k === oldKey) {
|
|
|
+ newData[newKey] = v;
|
|
|
+ } else {
|
|
|
+ newData[k] = v;
|
|
|
+ }
|
|
|
+ });
|
|
|
handleVisualChange(newData);
|
|
|
}, [jsonData, handleVisualChange]);
|
|
|
|
|
|
@@ -181,20 +196,20 @@ const JSONEditor = ({
|
|
|
const fillTemplate = useCallback(() => {
|
|
|
if (template) {
|
|
|
const templateString = JSON.stringify(template, null, 2);
|
|
|
-
|
|
|
+
|
|
|
// 通过formApi设置值(如果提供的话)
|
|
|
if (formApi && field) {
|
|
|
formApi.setValue(field, templateString);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 无论哪种模式都要更新值
|
|
|
onChange?.(templateString);
|
|
|
-
|
|
|
+
|
|
|
// 如果是可视化模式,同时更新jsonData
|
|
|
if (editMode === 'visual') {
|
|
|
setJsonData(template);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 清除错误状态
|
|
|
setJsonError('');
|
|
|
}
|
|
|
@@ -215,69 +230,47 @@ const JSONEditor = ({
|
|
|
);
|
|
|
}
|
|
|
const entries = Object.entries(jsonData);
|
|
|
-
|
|
|
+
|
|
|
return (
|
|
|
<div className="space-y-1">
|
|
|
{entries.length === 0 && (
|
|
|
<div className="text-center py-6 px-4">
|
|
|
- <div className="text-gray-400 mb-2">
|
|
|
- <IconCode size={32} />
|
|
|
- </div>
|
|
|
<Text type="tertiary" className="text-gray-500 text-sm">
|
|
|
{t('暂无数据,点击下方按钮添加键值对')}
|
|
|
</Text>
|
|
|
</div>
|
|
|
)}
|
|
|
-
|
|
|
+
|
|
|
{entries.map(([key, value], index) => (
|
|
|
- <Card key={index} className="!p-3 !border-gray-200 !rounded-md hover:shadow-sm transition-shadow duration-200">
|
|
|
- <Row gutter={12} align="middle">
|
|
|
- <Col span={10}>
|
|
|
- <div className="space-y-1">
|
|
|
- <Text type="tertiary" size="small">{t('键名')}</Text>
|
|
|
- <Input
|
|
|
- placeholder={t('键名')}
|
|
|
- value={key}
|
|
|
- onChange={(newKey) => updateKey(key, newKey)}
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col span={11}>
|
|
|
- <div className="space-y-1">
|
|
|
- <Text type="tertiary" size="small">{t('值')}</Text>
|
|
|
- <Input
|
|
|
- placeholder={t('值')}
|
|
|
- value={value}
|
|
|
- onChange={(newValue) => updateValue(key, newValue)}
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col span={3}>
|
|
|
- <div className="flex justify-center pt-4">
|
|
|
- <Button
|
|
|
- icon={<IconDelete />}
|
|
|
- type="danger"
|
|
|
- theme="borderless"
|
|
|
- size="small"
|
|
|
- onClick={() => removeKeyValue(key)}
|
|
|
- className="hover:bg-red-50"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Card>
|
|
|
+ <Row key={index} gutter={8} align="middle">
|
|
|
+ <Col span={6}>
|
|
|
+ <Input
|
|
|
+ placeholder={t('键名')}
|
|
|
+ value={key}
|
|
|
+ onChange={(newKey) => updateKey(key, newKey)}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ <Col span={16}>
|
|
|
+ {renderValueInput(key, value)}
|
|
|
+ </Col>
|
|
|
+ <Col span={2}>
|
|
|
+ <Button
|
|
|
+ icon={<IconDelete />}
|
|
|
+ type="danger"
|
|
|
+ theme="borderless"
|
|
|
+ onClick={() => removeKeyValue(key)}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
))}
|
|
|
-
|
|
|
- <div className="flex justify-center pt-1">
|
|
|
+
|
|
|
+ <div className="mt-2 flex justify-center">
|
|
|
<Button
|
|
|
icon={<IconPlus />}
|
|
|
- onClick={addKeyValue}
|
|
|
- size="small"
|
|
|
- theme="solid"
|
|
|
type="primary"
|
|
|
- className="shadow-sm hover:shadow-md transition-shadow px-4"
|
|
|
+ theme="outline"
|
|
|
+ onClick={addKeyValue}
|
|
|
>
|
|
|
{t('添加键值对')}
|
|
|
</Button>
|
|
|
@@ -286,100 +279,61 @@ const JSONEditor = ({
|
|
|
);
|
|
|
};
|
|
|
|
|
|
- // 渲染对象编辑器(用于复杂JSON)
|
|
|
- const renderObjectEditor = () => {
|
|
|
- const entries = Object.entries(jsonData);
|
|
|
-
|
|
|
- return (
|
|
|
- <div className="space-y-1">
|
|
|
- {entries.length === 0 && (
|
|
|
- <div className="text-center py-6 px-4">
|
|
|
- <div className="text-gray-400 mb-2">
|
|
|
- <IconSetting size={32} />
|
|
|
- </div>
|
|
|
- <Text type="tertiary" className="text-gray-500 text-sm">
|
|
|
- {t('暂无参数,点击下方按钮添加请求参数')}
|
|
|
- </Text>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {entries.map(([key, value], index) => (
|
|
|
- <Card key={index} className="!p-3 !border-gray-200 !rounded-md hover:shadow-sm transition-shadow duration-200">
|
|
|
- <Row gutter={12} align="middle">
|
|
|
- <Col span={8}>
|
|
|
- <div className="space-y-1">
|
|
|
- <Text type="tertiary" size="small">{t('参数名')}</Text>
|
|
|
- <Input
|
|
|
- placeholder={t('参数名')}
|
|
|
- value={key}
|
|
|
- onChange={(newKey) => updateKey(key, newKey)}
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col span={13}>
|
|
|
- <div className="space-y-1">
|
|
|
- <Text type="tertiary" size="small">{t('参数值')} ({typeof value})</Text>
|
|
|
- {renderValueInput(key, value)}
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- <Col span={3}>
|
|
|
- <div className="flex justify-center pt-4">
|
|
|
- <Button
|
|
|
- icon={<IconDelete />}
|
|
|
- type="danger"
|
|
|
- theme="borderless"
|
|
|
- size="small"
|
|
|
- onClick={() => removeKeyValue(key)}
|
|
|
- className="hover:bg-red-50"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </Card>
|
|
|
- ))}
|
|
|
-
|
|
|
- <div className="flex justify-center pt-1">
|
|
|
- <Button
|
|
|
- icon={<IconPlus />}
|
|
|
- onClick={addKeyValue}
|
|
|
- size="small"
|
|
|
- theme="solid"
|
|
|
- type="primary"
|
|
|
- className="shadow-sm hover:shadow-md transition-shadow px-4"
|
|
|
- >
|
|
|
- {t('添加参数')}
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- };
|
|
|
+ // 添加嵌套对象
|
|
|
+ const flattenObject = useCallback((parentKey) => {
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ let primitive = '';
|
|
|
+ const obj = newData[parentKey];
|
|
|
+ if (obj && typeof obj === 'object') {
|
|
|
+ const firstKey = Object.keys(obj)[0];
|
|
|
+ if (firstKey !== undefined) {
|
|
|
+ const firstVal = obj[firstKey];
|
|
|
+ if (typeof firstVal !== 'object') primitive = firstVal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ newData[parentKey] = primitive;
|
|
|
+ handleVisualChange(newData);
|
|
|
+ }, [jsonData, handleVisualChange]);
|
|
|
+
|
|
|
+ const addNestedObject = useCallback((parentKey) => {
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ if (typeof newData[parentKey] !== 'object' || newData[parentKey] === null) {
|
|
|
+ newData[parentKey] = {};
|
|
|
+ }
|
|
|
+ const existingKeys = Object.keys(newData[parentKey]);
|
|
|
+ let counter = 1;
|
|
|
+ let newKey = `field_${counter}`;
|
|
|
+ while (newData[parentKey].hasOwnProperty(newKey)) {
|
|
|
+ counter += 1;
|
|
|
+ newKey = `field_${counter}`;
|
|
|
+ }
|
|
|
+ newData[parentKey][newKey] = '';
|
|
|
+ handleVisualChange(newData);
|
|
|
+ }, [jsonData, handleVisualChange]);
|
|
|
|
|
|
- // 渲染参数值输入控件
|
|
|
+ // 渲染参数值输入控件(支持嵌套)
|
|
|
const renderValueInput = (key, value) => {
|
|
|
const valueType = typeof value;
|
|
|
-
|
|
|
+
|
|
|
if (valueType === 'boolean') {
|
|
|
return (
|
|
|
<div className="flex items-center">
|
|
|
<Switch
|
|
|
checked={value}
|
|
|
onChange={(newValue) => updateValue(key, newValue)}
|
|
|
- size="small"
|
|
|
/>
|
|
|
- <Text type="tertiary" size="small" className="ml-2">
|
|
|
+ <Text type="tertiary" className="ml-2">
|
|
|
{value ? t('true') : t('false')}
|
|
|
</Text>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (valueType === 'number') {
|
|
|
return (
|
|
|
<InputNumber
|
|
|
value={value}
|
|
|
onChange={(newValue) => updateValue(key, newValue)}
|
|
|
- size="small"
|
|
|
style={{ width: '100%' }}
|
|
|
step={key === 'temperature' ? 0.1 : 1}
|
|
|
precision={key === 'temperature' ? 2 : 0}
|
|
|
@@ -387,25 +341,137 @@ const JSONEditor = ({
|
|
|
/>
|
|
|
);
|
|
|
}
|
|
|
-
|
|
|
- // 字符串类型或其他类型
|
|
|
+
|
|
|
+ if (valueType === 'object' && value !== null) {
|
|
|
+ // 渲染嵌套对象
|
|
|
+ const entries = Object.entries(value);
|
|
|
+ return (
|
|
|
+ <Card className="!rounded-2xl">
|
|
|
+ {entries.length === 0 && (
|
|
|
+ <Text type="tertiary" className="text-gray-500 text-xs">
|
|
|
+ {t('空对象,点击下方加号添加字段')}
|
|
|
+ </Text>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {entries.map(([nestedKey, nestedValue], index) => (
|
|
|
+ <Row key={index} gutter={4} align="middle" className="mb-1">
|
|
|
+ <Col span={8}>
|
|
|
+ <Input
|
|
|
+ size="small"
|
|
|
+ placeholder={t('键名')}
|
|
|
+ value={nestedKey}
|
|
|
+ onChange={(newKey) => {
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ const oldValue = newData[key][nestedKey];
|
|
|
+ delete newData[key][nestedKey];
|
|
|
+ newData[key][newKey] = oldValue;
|
|
|
+ handleVisualChange(newData);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ <Col span={14}>
|
|
|
+ {typeof nestedValue === 'object' && nestedValue !== null ? (
|
|
|
+ <TextArea
|
|
|
+ size="small"
|
|
|
+ rows={2}
|
|
|
+ value={JSON.stringify(nestedValue, null, 2)}
|
|
|
+ onChange={(txt) => {
|
|
|
+ try {
|
|
|
+ const obj = txt.trim() ? JSON.parse(txt) : {};
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ newData[key][nestedKey] = obj;
|
|
|
+ handleVisualChange(newData);
|
|
|
+ } catch {
|
|
|
+ // ignore parse error
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ) : (
|
|
|
+ <Input
|
|
|
+ size="small"
|
|
|
+ placeholder={t('值')}
|
|
|
+ value={String(nestedValue)}
|
|
|
+ onChange={(newValue) => {
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ let convertedValue = newValue;
|
|
|
+ if (newValue === 'true') convertedValue = true;
|
|
|
+ else if (newValue === 'false') convertedValue = false;
|
|
|
+ else if (!isNaN(newValue) && newValue !== '' && newValue !== '0') {
|
|
|
+ convertedValue = Number(newValue);
|
|
|
+ }
|
|
|
+ newData[key][nestedKey] = convertedValue;
|
|
|
+ handleVisualChange(newData);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Col>
|
|
|
+ <Col span={2}>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ icon={<IconDelete />}
|
|
|
+ type="danger"
|
|
|
+ theme="borderless"
|
|
|
+ onClick={() => {
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ delete newData[key][nestedKey];
|
|
|
+ handleVisualChange(newData);
|
|
|
+ }}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ <div className="flex justify-center mt-1 gap-2">
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ icon={<IconPlus />}
|
|
|
+ type="tertiary"
|
|
|
+ onClick={() => addNestedObject(key)}
|
|
|
+ >
|
|
|
+ {t('添加字段')}
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ size="small"
|
|
|
+ icon={<IconRefresh />}
|
|
|
+ type="tertiary"
|
|
|
+ onClick={() => flattenObject(key)}
|
|
|
+ >
|
|
|
+ {t('转换为值')}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 字符串或其他原始类型
|
|
|
return (
|
|
|
- <Input
|
|
|
- placeholder={t('参数值')}
|
|
|
- value={String(value)}
|
|
|
- onChange={(newValue) => {
|
|
|
- // 尝试转换为适当的类型
|
|
|
- let convertedValue = newValue;
|
|
|
- if (newValue === 'true') convertedValue = true;
|
|
|
- else if (newValue === 'false') convertedValue = false;
|
|
|
- else if (!isNaN(newValue) && newValue !== '' && newValue !== '0') {
|
|
|
- convertedValue = Number(newValue);
|
|
|
- }
|
|
|
-
|
|
|
- updateValue(key, convertedValue);
|
|
|
- }}
|
|
|
- size="small"
|
|
|
- />
|
|
|
+ <div className="flex items-center gap-1">
|
|
|
+ <Input
|
|
|
+ placeholder={t('参数值')}
|
|
|
+ value={String(value)}
|
|
|
+ onChange={(newValue) => {
|
|
|
+ let convertedValue = newValue;
|
|
|
+ if (newValue === 'true') convertedValue = true;
|
|
|
+ else if (newValue === 'false') convertedValue = false;
|
|
|
+ else if (!isNaN(newValue) && newValue !== '' && newValue !== '0') {
|
|
|
+ convertedValue = Number(newValue);
|
|
|
+ }
|
|
|
+ updateValue(key, convertedValue);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <Button
|
|
|
+ icon={<IconPlus />}
|
|
|
+ type="tertiary"
|
|
|
+ onClick={() => {
|
|
|
+ // 将当前值转换为对象
|
|
|
+ const newData = { ...jsonData };
|
|
|
+ newData[key] = { '1': value };
|
|
|
+ handleVisualChange(newData);
|
|
|
+ }}
|
|
|
+ title={t('转换为对象')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
@@ -414,79 +480,61 @@ const JSONEditor = ({
|
|
|
const entries = Object.entries(jsonData);
|
|
|
const defaultEntry = entries.find(([key]) => key === 'default');
|
|
|
const modelEntries = entries.filter(([key]) => key !== 'default');
|
|
|
-
|
|
|
+
|
|
|
return (
|
|
|
- <div className="space-y-1">
|
|
|
+ <div className="space-y-2">
|
|
|
{/* 默认区域 */}
|
|
|
- <Card className="!p-2 !border-blue-200 !bg-blue-50">
|
|
|
- <div className="flex items-center mb-1">
|
|
|
- <Text strong size="small" className="text-blue-700">{t('默认区域')}</Text>
|
|
|
- </div>
|
|
|
+ <Form.Slot label={t('默认区域')}>
|
|
|
<Input
|
|
|
placeholder={t('默认区域,如: us-central1')}
|
|
|
value={defaultEntry ? defaultEntry[1] : ''}
|
|
|
onChange={(value) => updateValue('default', value)}
|
|
|
- size="small"
|
|
|
/>
|
|
|
- </Card>
|
|
|
-
|
|
|
+ </Form.Slot>
|
|
|
+
|
|
|
{/* 模型专用区域 */}
|
|
|
- <div className="space-y-1">
|
|
|
- <Text strong size="small">{t('模型专用区域')}</Text>
|
|
|
- {modelEntries.map(([modelName, region], index) => (
|
|
|
- <Card key={index} className="!p-3 !border-gray-200 !rounded-md hover:shadow-sm transition-shadow duration-200">
|
|
|
- <Row gutter={12} align="middle">
|
|
|
+ <Form.Slot label={t('模型专用区域')}>
|
|
|
+ <div>
|
|
|
+ {modelEntries.map(([modelName, region], index) => (
|
|
|
+ <Row key={index} gutter={8} align="middle" className="mb-2">
|
|
|
<Col span={10}>
|
|
|
- <div className="space-y-1">
|
|
|
- <Text type="tertiary" size="small">{t('模型名称')}</Text>
|
|
|
- <Input
|
|
|
- placeholder={t('模型名称')}
|
|
|
- value={modelName}
|
|
|
- onChange={(newKey) => updateKey(modelName, newKey)}
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <Input
|
|
|
+ placeholder={t('模型名称')}
|
|
|
+ value={modelName}
|
|
|
+ onChange={(newKey) => updateKey(modelName, newKey)}
|
|
|
+ />
|
|
|
</Col>
|
|
|
- <Col span={11}>
|
|
|
- <div className="space-y-1">
|
|
|
- <Text type="tertiary" size="small">{t('区域')}</Text>
|
|
|
- <Input
|
|
|
- placeholder={t('区域')}
|
|
|
- value={region}
|
|
|
- onChange={(newValue) => updateValue(modelName, newValue)}
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <Col span={12}>
|
|
|
+ <Input
|
|
|
+ placeholder={t('区域')}
|
|
|
+ value={region}
|
|
|
+ onChange={(newValue) => updateValue(modelName, newValue)}
|
|
|
+ />
|
|
|
</Col>
|
|
|
- <Col span={3}>
|
|
|
- <div className="flex justify-center pt-4">
|
|
|
- <Button
|
|
|
- icon={<IconDelete />}
|
|
|
- type="danger"
|
|
|
- theme="borderless"
|
|
|
- size="small"
|
|
|
- onClick={() => removeKeyValue(modelName)}
|
|
|
- className="hover:bg-red-50"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <Col span={2}>
|
|
|
+ <Button
|
|
|
+ icon={<IconDelete />}
|
|
|
+ type="danger"
|
|
|
+ theme="borderless"
|
|
|
+ onClick={() => removeKeyValue(modelName)}
|
|
|
+ style={{ width: '100%' }}
|
|
|
+ />
|
|
|
</Col>
|
|
|
</Row>
|
|
|
- </Card>
|
|
|
- ))}
|
|
|
-
|
|
|
- <div className="flex justify-center pt-1">
|
|
|
- <Button
|
|
|
- icon={<IconPlus />}
|
|
|
- onClick={addKeyValue}
|
|
|
- size="small"
|
|
|
- theme="solid"
|
|
|
- type="primary"
|
|
|
- className="shadow-sm hover:shadow-md transition-shadow px-4"
|
|
|
- >
|
|
|
- {t('添加模型区域')}
|
|
|
- </Button>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ <div className="mt-2 flex justify-center">
|
|
|
+ <Button
|
|
|
+ icon={<IconPlus />}
|
|
|
+ onClick={addKeyValue}
|
|
|
+ type="primary"
|
|
|
+ theme="outline"
|
|
|
+ >
|
|
|
+ {t('添加模型区域')}
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </Form.Slot>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
@@ -497,7 +545,6 @@ const JSONEditor = ({
|
|
|
case 'region':
|
|
|
return renderRegionEditor();
|
|
|
case 'object':
|
|
|
- return renderObjectEditor();
|
|
|
case 'keyValue':
|
|
|
default:
|
|
|
return renderKeyValueEditor();
|
|
|
@@ -507,115 +554,92 @@ const JSONEditor = ({
|
|
|
const hasJsonError = jsonError && jsonError.trim() !== '';
|
|
|
|
|
|
return (
|
|
|
- <div className="space-y-1">
|
|
|
- {/* Label统一显示在上方 */}
|
|
|
- {label && (
|
|
|
- <div className="flex items-center">
|
|
|
- <Text className="text-sm font-medium text-gray-900">{label}</Text>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {/* 编辑模式切换 */}
|
|
|
- <div className="flex items-center justify-between p-2 bg-gray-50 rounded-md">
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- {editMode === 'visual' && (
|
|
|
- <Text type="tertiary" size="small" className="bg-blue-100 text-blue-700 px-2 py-0.5 rounded text-xs">
|
|
|
- {t('可视化模式')}
|
|
|
- </Text>
|
|
|
- )}
|
|
|
- {editMode === 'manual' && (
|
|
|
- <Text type="tertiary" size="small" className="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs">
|
|
|
- {t('手动编辑模式')}
|
|
|
- </Text>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div className="flex items-center gap-2">
|
|
|
- {template && templateLabel && (
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- type="tertiary"
|
|
|
- onClick={fillTemplate}
|
|
|
- className="!text-semi-color-primary hover:bg-blue-50 text-xs"
|
|
|
- >
|
|
|
- {templateLabel}
|
|
|
- </Button>
|
|
|
- )}
|
|
|
- <Space size="tight">
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- type={editMode === 'visual' ? 'primary' : 'tertiary'}
|
|
|
- icon={<IconEdit />}
|
|
|
- onClick={toggleEditMode}
|
|
|
- disabled={editMode === 'manual' && hasJsonError}
|
|
|
- className={editMode === 'visual' ? 'shadow-sm' : ''}
|
|
|
- >
|
|
|
- {t('可视化')}
|
|
|
- </Button>
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- type={editMode === 'manual' ? 'primary' : 'tertiary'}
|
|
|
- icon={<IconCode />}
|
|
|
- onClick={toggleEditMode}
|
|
|
- className={editMode === 'manual' ? 'shadow-sm' : ''}
|
|
|
+ <Form.Slot label={label}>
|
|
|
+ <Card
|
|
|
+ header={
|
|
|
+ <div className="flex justify-between items-center">
|
|
|
+ <Tabs
|
|
|
+ type="slash"
|
|
|
+ activeKey={editMode}
|
|
|
+ onChange={(key) => {
|
|
|
+ if (key === 'manual' && editMode === 'visual') {
|
|
|
+ setEditMode('manual');
|
|
|
+ } else if (key === 'visual' && editMode === 'manual') {
|
|
|
+ toggleEditMode();
|
|
|
+ }
|
|
|
+ }}
|
|
|
>
|
|
|
- {t('手动编辑')}
|
|
|
- </Button>
|
|
|
- </Space>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <TabPane tab={t('可视化')} itemKey="visual" />
|
|
|
+ <TabPane tab={t('手动编辑')} itemKey="manual" />
|
|
|
+ </Tabs>
|
|
|
|
|
|
- {/* JSON错误提示 */}
|
|
|
- {hasJsonError && (
|
|
|
- <Banner
|
|
|
- type="danger"
|
|
|
- description={`JSON 格式错误: ${jsonError}`}
|
|
|
- className="!rounded-md text-sm"
|
|
|
- />
|
|
|
- )}
|
|
|
+ {template && templateLabel && (
|
|
|
+ <Button
|
|
|
+ type="tertiary"
|
|
|
+ onClick={fillTemplate}
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ {templateLabel}
|
|
|
+ </Button>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ headerStyle={{ padding: '12px 16px' }}
|
|
|
+ bodyStyle={{ padding: '16px' }}
|
|
|
+ className="!rounded-2xl"
|
|
|
+ >
|
|
|
+ {/* JSON错误提示 */}
|
|
|
+ {hasJsonError && (
|
|
|
+ <Banner
|
|
|
+ type="danger"
|
|
|
+ description={`JSON 格式错误: ${jsonError}`}
|
|
|
+ className="mb-3"
|
|
|
+ />
|
|
|
+ )}
|
|
|
|
|
|
- {/* 编辑器内容 */}
|
|
|
- {editMode === 'visual' ? (
|
|
|
- <div>
|
|
|
- <Card className="!p-3 !border-gray-200 !shadow-sm !rounded-md bg-white">
|
|
|
+ {/* 编辑器内容 */}
|
|
|
+ {editMode === 'visual' ? (
|
|
|
+ <div>
|
|
|
{renderVisualEditor()}
|
|
|
- </Card>
|
|
|
- {/* 可视化模式下的额外文本显示在下方 */}
|
|
|
- {extraText && (
|
|
|
- <div className="text-xs text-gray-600 mt-0.5">
|
|
|
- {extraText}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {/* 隐藏的Form字段用于验证和数据绑定 */}
|
|
|
- <Form.Input
|
|
|
- field={field}
|
|
|
- value={value}
|
|
|
- rules={rules}
|
|
|
- style={{ display: 'none' }}
|
|
|
- noLabel={true}
|
|
|
- {...props}
|
|
|
- />
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <Form.TextArea
|
|
|
- field={field}
|
|
|
- placeholder={placeholder}
|
|
|
- value={value}
|
|
|
- onChange={handleManualChange}
|
|
|
- showClear={showClear}
|
|
|
- rows={Math.max(8, value ? value.split('\n').length : 8)}
|
|
|
- rules={rules}
|
|
|
- noLabel={true}
|
|
|
- {...props}
|
|
|
- />
|
|
|
- )}
|
|
|
+ {/* 隐藏的Form字段用于验证和数据绑定 */}
|
|
|
+ <Form.Input
|
|
|
+ field={field}
|
|
|
+ value={value}
|
|
|
+ rules={rules}
|
|
|
+ style={{ display: 'none' }}
|
|
|
+ noLabel={true}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <div>
|
|
|
+ <TextArea
|
|
|
+ placeholder={placeholder}
|
|
|
+ value={value}
|
|
|
+ onChange={handleManualChange}
|
|
|
+ showClear={showClear}
|
|
|
+ rows={Math.max(8, value ? value.split('\n').length : 8)}
|
|
|
+ />
|
|
|
+ {/* 隐藏的Form字段用于验证和数据绑定 */}
|
|
|
+ <Form.Input
|
|
|
+ field={field}
|
|
|
+ value={value}
|
|
|
+ rules={rules}
|
|
|
+ style={{ display: 'none' }}
|
|
|
+ noLabel={true}
|
|
|
+ {...props}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
|
|
|
- {/* 额外文本在手动编辑模式下显示 */}
|
|
|
- {extraText && editMode === 'manual' && (
|
|
|
- <div className="text-xs text-gray-600">
|
|
|
- {extraText}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
+ {/* 额外文本显示在卡片底部 */}
|
|
|
+ {extraText && (
|
|
|
+ <div className="text-gray-600 mt-3 pt-3">
|
|
|
+ {extraText}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </Card>
|
|
|
+ </Form.Slot>
|
|
|
);
|
|
|
};
|
|
|
|