1410 lines
48 KiB
React
1410 lines
48 KiB
React
|
/*
|
|||
|
|
Copyright (C) 2025 QuantumNous
|
|||
|
|
|
|||
|
|
This program is free software: you can redistribute it and/or modify
|
|||
|
|
it under the terms of the GNU Affero General Public License as
|
|||
|
|
published by the Free Software Foundation, either version 3 of the
|
|||
|
|
License, or (at your option) any later version.
|
|||
|
|
|
|||
|
|
This program is distributed in the hope that it will be useful,
|
|||
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|||
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|||
|
|
GNU Affero General Public License for more details.
|
|||
|
|
|
|||
|
|
You should have received a copy of the GNU Affero General Public License
|
|||
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|||
|
|
|
|||
|
|
For commercial licensing, please contact support@quantumnous.com
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|||
|
|
import MonacoEditor from '@monaco-editor/react';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
import {
|
|||
|
|
Banner,
|
|||
|
|
Button,
|
|||
|
|
Card,
|
|||
|
|
Col,
|
|||
|
|
Input,
|
|||
|
|
Modal,
|
|||
|
|
Row,
|
|||
|
|
Select,
|
|||
|
|
Space,
|
|||
|
|
Switch,
|
|||
|
|
Tag,
|
|||
|
|
Typography,
|
|||
|
|
} from '@douyinfe/semi-ui';
|
|||
|
|
import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
|
|||
|
|
import { showError, verifyJSON } from '../../../../helpers';
|
|||
|
|
import JSONEditor from '../../../common/ui/JSONEditor';
|
|||
|
|
|
|||
|
|
const { Text } = Typography;
|
|||
|
|
|
|||
|
|
const OPERATION_MODE_OPTIONS = [
|
|||
|
|
{ label: 'JSON · set', value: 'set' },
|
|||
|
|
{ label: 'JSON · delete', value: 'delete' },
|
|||
|
|
{ label: 'JSON · append', value: 'append' },
|
|||
|
|
{ label: 'JSON · prepend', value: 'prepend' },
|
|||
|
|
{ label: 'JSON · copy', value: 'copy' },
|
|||
|
|
{ label: 'JSON · move', value: 'move' },
|
|||
|
|
{ label: 'JSON · replace', value: 'replace' },
|
|||
|
|
{ label: 'JSON · regex_replace', value: 'regex_replace' },
|
|||
|
|
{ label: 'JSON · trim_prefix', value: 'trim_prefix' },
|
|||
|
|
{ label: 'JSON · trim_suffix', value: 'trim_suffix' },
|
|||
|
|
{ label: 'JSON · ensure_prefix', value: 'ensure_prefix' },
|
|||
|
|
{ label: 'JSON · ensure_suffix', value: 'ensure_suffix' },
|
|||
|
|
{ label: 'JSON · trim_space', value: 'trim_space' },
|
|||
|
|
{ label: 'JSON · to_lower', value: 'to_lower' },
|
|||
|
|
{ label: 'JSON · to_upper', value: 'to_upper' },
|
|||
|
|
{ label: 'Control · return_error', value: 'return_error' },
|
|||
|
|
{ label: 'Control · prune_objects', value: 'prune_objects' },
|
|||
|
|
{ label: 'Header · set_header', value: 'set_header' },
|
|||
|
|
{ label: 'Header · delete_header', value: 'delete_header' },
|
|||
|
|
{ label: 'Header · copy_header', value: 'copy_header' },
|
|||
|
|
{ label: 'Header · move_header', value: 'move_header' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const OPERATION_MODE_VALUES = new Set(
|
|||
|
|
OPERATION_MODE_OPTIONS.map((item) => item.value),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const CONDITION_MODE_OPTIONS = [
|
|||
|
|
{ label: 'full', value: 'full' },
|
|||
|
|
{ label: 'prefix', value: 'prefix' },
|
|||
|
|
{ label: 'suffix', value: 'suffix' },
|
|||
|
|
{ label: 'contains', value: 'contains' },
|
|||
|
|
{ label: 'gt', value: 'gt' },
|
|||
|
|
{ label: 'gte', value: 'gte' },
|
|||
|
|
{ label: 'lt', value: 'lt' },
|
|||
|
|
{ label: 'lte', value: 'lte' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const CONDITION_MODE_VALUES = new Set(
|
|||
|
|
CONDITION_MODE_OPTIONS.map((item) => item.value),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const MODE_META = {
|
|||
|
|
delete: { path: true },
|
|||
|
|
set: { path: true, value: true, keepOrigin: true },
|
|||
|
|
append: { path: true, value: true, keepOrigin: true },
|
|||
|
|
prepend: { path: true, value: true, keepOrigin: true },
|
|||
|
|
copy: { from: true, to: true },
|
|||
|
|
move: { from: true, to: true },
|
|||
|
|
replace: { path: true, from: true, to: false },
|
|||
|
|
regex_replace: { path: true, from: true, to: false },
|
|||
|
|
trim_prefix: { path: true, value: true },
|
|||
|
|
trim_suffix: { path: true, value: true },
|
|||
|
|
ensure_prefix: { path: true, value: true },
|
|||
|
|
ensure_suffix: { path: true, value: true },
|
|||
|
|
trim_space: { path: true },
|
|||
|
|
to_lower: { path: true },
|
|||
|
|
to_upper: { path: true },
|
|||
|
|
return_error: { value: true },
|
|||
|
|
prune_objects: { pathOptional: true, value: true },
|
|||
|
|
set_header: { path: true, value: true, keepOrigin: true },
|
|||
|
|
delete_header: { path: true },
|
|||
|
|
copy_header: { from: true, to: true, keepOrigin: true, pathAlias: true },
|
|||
|
|
move_header: { from: true, to: true, keepOrigin: true, pathAlias: true },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const VALUE_REQUIRED_MODES = new Set([
|
|||
|
|
'trim_prefix',
|
|||
|
|
'trim_suffix',
|
|||
|
|
'ensure_prefix',
|
|||
|
|
'ensure_suffix',
|
|||
|
|
'set_header',
|
|||
|
|
'return_error',
|
|||
|
|
'prune_objects',
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const FROM_REQUIRED_MODES = new Set([
|
|||
|
|
'copy',
|
|||
|
|
'move',
|
|||
|
|
'replace',
|
|||
|
|
'regex_replace',
|
|||
|
|
'copy_header',
|
|||
|
|
'move_header',
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const TO_REQUIRED_MODES = new Set(['copy', 'move', 'copy_header', 'move_header']);
|
|||
|
|
|
|||
|
|
const MODE_DESCRIPTIONS = {
|
|||
|
|
set: 'Set JSON value at path',
|
|||
|
|
delete: 'Delete JSON field at path',
|
|||
|
|
append: 'Append value to array/string/object',
|
|||
|
|
prepend: 'Prepend value to array/string/object',
|
|||
|
|
copy: 'Copy JSON value from from -> to',
|
|||
|
|
move: 'Move JSON value from from -> to',
|
|||
|
|
replace: 'String replace on target path',
|
|||
|
|
regex_replace: 'Regex replace on target path',
|
|||
|
|
trim_prefix: 'Trim prefix on string value',
|
|||
|
|
trim_suffix: 'Trim suffix on string value',
|
|||
|
|
ensure_prefix: 'Ensure string starts with prefix',
|
|||
|
|
ensure_suffix: 'Ensure string ends with suffix',
|
|||
|
|
trim_space: 'Trim spaces/newlines on string value',
|
|||
|
|
to_lower: 'Convert string to lower case',
|
|||
|
|
to_upper: 'Convert string to upper case',
|
|||
|
|
return_error: 'Stop processing and return custom error',
|
|||
|
|
prune_objects: 'Remove objects matching conditions',
|
|||
|
|
set_header: 'Set runtime override header',
|
|||
|
|
delete_header: 'Delete runtime override header',
|
|||
|
|
copy_header: 'Copy header from from -> to',
|
|||
|
|
move_header: 'Move header from from -> to',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const OPERATION_PATH_SUGGESTIONS = [
|
|||
|
|
'model',
|
|||
|
|
'temperature',
|
|||
|
|
'max_tokens',
|
|||
|
|
'messages.-1.content',
|
|||
|
|
'metadata.conversation_id',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const CONDITION_PATH_SUGGESTIONS = [
|
|||
|
|
'model',
|
|||
|
|
'retry.is_retry',
|
|||
|
|
'last_error.code',
|
|||
|
|
'request_headers.authorization',
|
|||
|
|
'header_override_normalized.x_debug_mode',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const LEGACY_TEMPLATE = {
|
|||
|
|
temperature: 0,
|
|||
|
|
max_tokens: 1000,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const OPERATION_TEMPLATE = {
|
|||
|
|
operations: [
|
|||
|
|
{
|
|||
|
|
path: 'temperature',
|
|||
|
|
mode: 'set',
|
|||
|
|
value: 0.7,
|
|||
|
|
conditions: [
|
|||
|
|
{
|
|||
|
|
path: 'model',
|
|||
|
|
mode: 'prefix',
|
|||
|
|
value: 'gpt',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
logic: 'AND',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const MONACO_SCHEMA_URI = 'https://new-api.local/schemas/param-override.schema.json';
|
|||
|
|
const MONACO_MODEL_URI = 'inmemory://new-api/param-override.json';
|
|||
|
|
|
|||
|
|
const JSON_SCALAR_SCHEMA = {
|
|||
|
|
oneOf: [
|
|||
|
|
{ type: 'string' },
|
|||
|
|
{ type: 'number' },
|
|||
|
|
{ type: 'boolean' },
|
|||
|
|
{ type: 'null' },
|
|||
|
|
{ type: 'array' },
|
|||
|
|
{ type: 'object' },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const PARAM_OVERRIDE_JSON_SCHEMA = {
|
|||
|
|
$schema: 'http://json-schema.org/draft-07/schema#',
|
|||
|
|
type: 'object',
|
|||
|
|
properties: {
|
|||
|
|
operations: {
|
|||
|
|
type: 'array',
|
|||
|
|
description: 'Operation pipeline for new param override format.',
|
|||
|
|
items: {
|
|||
|
|
type: 'object',
|
|||
|
|
properties: {
|
|||
|
|
mode: {
|
|||
|
|
type: 'string',
|
|||
|
|
enum: OPERATION_MODE_OPTIONS.map((item) => item.value),
|
|||
|
|
},
|
|||
|
|
path: { type: 'string' },
|
|||
|
|
from: { type: 'string' },
|
|||
|
|
to: { type: 'string' },
|
|||
|
|
keep_origin: { type: 'boolean' },
|
|||
|
|
value: JSON_SCALAR_SCHEMA,
|
|||
|
|
logic: { type: 'string', enum: ['AND', 'OR'] },
|
|||
|
|
conditions: {
|
|||
|
|
oneOf: [
|
|||
|
|
{
|
|||
|
|
type: 'array',
|
|||
|
|
items: {
|
|||
|
|
type: 'object',
|
|||
|
|
properties: {
|
|||
|
|
path: { type: 'string' },
|
|||
|
|
mode: {
|
|||
|
|
type: 'string',
|
|||
|
|
enum: CONDITION_MODE_OPTIONS.map((item) => item.value),
|
|||
|
|
},
|
|||
|
|
value: JSON_SCALAR_SCHEMA,
|
|||
|
|
invert: { type: 'boolean' },
|
|||
|
|
pass_missing_key: { type: 'boolean' },
|
|||
|
|
},
|
|||
|
|
required: ['path', 'mode'],
|
|||
|
|
additionalProperties: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'object',
|
|||
|
|
additionalProperties: JSON_SCALAR_SCHEMA,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
required: ['mode'],
|
|||
|
|
additionalProperties: false,
|
|||
|
|
allOf: [
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'set' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'delete' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'append' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'prepend' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'copy' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['from', 'to'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'move' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['from', 'to'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: { properties: { mode: { const: 'replace' } }, required: ['mode'] },
|
|||
|
|
then: { required: ['path', 'from'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'regex_replace' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path', 'from'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'trim_prefix' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path', 'value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'trim_suffix' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path', 'value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'ensure_prefix' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path', 'value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'ensure_suffix' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path', 'value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'trim_space' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'to_lower' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'to_upper' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'return_error' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'prune_objects' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'set_header' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path', 'value'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'delete_header' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: { required: ['path'] },
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'copy_header' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: {
|
|||
|
|
anyOf: [{ required: ['path'] }, { required: ['from', 'to'] }],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
if: {
|
|||
|
|
properties: { mode: { const: 'move_header' } },
|
|||
|
|
required: ['mode'],
|
|||
|
|
},
|
|||
|
|
then: {
|
|||
|
|
anyOf: [{ required: ['path'] }, { required: ['from', 'to'] }],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
additionalProperties: true,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let localIdSeed = 0;
|
|||
|
|
const nextLocalId = () => `param_override_${Date.now()}_${localIdSeed++}`;
|
|||
|
|
|
|||
|
|
const toValueText = (value) => {
|
|||
|
|
if (value === undefined) return '';
|
|||
|
|
if (typeof value === 'string') return value;
|
|||
|
|
try {
|
|||
|
|
return JSON.stringify(value);
|
|||
|
|
} catch (error) {
|
|||
|
|
return String(value);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const parseLooseValue = (valueText) => {
|
|||
|
|
const raw = String(valueText ?? '');
|
|||
|
|
if (raw.trim() === '') return '';
|
|||
|
|
try {
|
|||
|
|
return JSON.parse(raw);
|
|||
|
|
} catch (error) {
|
|||
|
|
return raw;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const normalizeCondition = (condition = {}) => ({
|
|||
|
|
id: nextLocalId(),
|
|||
|
|
path: typeof condition.path === 'string' ? condition.path : '',
|
|||
|
|
mode: CONDITION_MODE_VALUES.has(condition.mode) ? condition.mode : 'full',
|
|||
|
|
value_text: toValueText(condition.value),
|
|||
|
|
invert: condition.invert === true,
|
|||
|
|
pass_missing_key: condition.pass_missing_key === true,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const createDefaultCondition = () => normalizeCondition({});
|
|||
|
|
|
|||
|
|
const normalizeOperation = (operation = {}) => ({
|
|||
|
|
id: nextLocalId(),
|
|||
|
|
path: typeof operation.path === 'string' ? operation.path : '',
|
|||
|
|
mode: OPERATION_MODE_VALUES.has(operation.mode) ? operation.mode : 'set',
|
|||
|
|
value_text: toValueText(operation.value),
|
|||
|
|
keep_origin: operation.keep_origin === true,
|
|||
|
|
from: typeof operation.from === 'string' ? operation.from : '',
|
|||
|
|
to: typeof operation.to === 'string' ? operation.to : '',
|
|||
|
|
logic: String(operation.logic || 'OR').toUpperCase() === 'AND' ? 'AND' : 'OR',
|
|||
|
|
conditions: Array.isArray(operation.conditions)
|
|||
|
|
? operation.conditions.map(normalizeCondition)
|
|||
|
|
: [],
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const createDefaultOperation = () => normalizeOperation({ mode: 'set' });
|
|||
|
|
|
|||
|
|
const parseInitialState = (rawValue) => {
|
|||
|
|
const text = typeof rawValue === 'string' ? rawValue : '';
|
|||
|
|
const trimmed = text.trim();
|
|||
|
|
if (!trimmed) {
|
|||
|
|
return {
|
|||
|
|
editMode: 'visual',
|
|||
|
|
visualMode: 'operations',
|
|||
|
|
legacyValue: '',
|
|||
|
|
operations: [createDefaultOperation()],
|
|||
|
|
jsonText: '',
|
|||
|
|
jsonError: '',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!verifyJSON(trimmed)) {
|
|||
|
|
return {
|
|||
|
|
editMode: 'json',
|
|||
|
|
visualMode: 'operations',
|
|||
|
|
legacyValue: '',
|
|||
|
|
operations: [createDefaultOperation()],
|
|||
|
|
jsonText: text,
|
|||
|
|
jsonError: 'JSON format is invalid',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const parsed = JSON.parse(trimmed);
|
|||
|
|
const pretty = JSON.stringify(parsed, null, 2);
|
|||
|
|
|
|||
|
|
if (
|
|||
|
|
parsed &&
|
|||
|
|
typeof parsed === 'object' &&
|
|||
|
|
!Array.isArray(parsed) &&
|
|||
|
|
Array.isArray(parsed.operations)
|
|||
|
|
) {
|
|||
|
|
return {
|
|||
|
|
editMode: 'visual',
|
|||
|
|
visualMode: 'operations',
|
|||
|
|
legacyValue: '',
|
|||
|
|
operations:
|
|||
|
|
parsed.operations.length > 0
|
|||
|
|
? parsed.operations.map(normalizeOperation)
|
|||
|
|
: [createDefaultOperation()],
|
|||
|
|
jsonText: pretty,
|
|||
|
|
jsonError: '',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
|
|||
|
|
return {
|
|||
|
|
editMode: 'visual',
|
|||
|
|
visualMode: 'legacy',
|
|||
|
|
legacyValue: pretty,
|
|||
|
|
operations: [createDefaultOperation()],
|
|||
|
|
jsonText: pretty,
|
|||
|
|
jsonError: '',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
editMode: 'json',
|
|||
|
|
visualMode: 'operations',
|
|||
|
|
legacyValue: '',
|
|||
|
|
operations: [createDefaultOperation()],
|
|||
|
|
jsonText: pretty,
|
|||
|
|
jsonError: '',
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const isOperationBlank = (operation) => {
|
|||
|
|
const hasCondition = (operation.conditions || []).some(
|
|||
|
|
(condition) =>
|
|||
|
|
condition.path.trim() ||
|
|||
|
|
String(condition.value_text ?? '').trim() ||
|
|||
|
|
condition.mode !== 'full' ||
|
|||
|
|
condition.invert ||
|
|||
|
|
condition.pass_missing_key,
|
|||
|
|
);
|
|||
|
|
return (
|
|||
|
|
operation.mode === 'set' &&
|
|||
|
|
!operation.path.trim() &&
|
|||
|
|
!operation.from.trim() &&
|
|||
|
|
!operation.to.trim() &&
|
|||
|
|
String(operation.value_text ?? '').trim() === '' &&
|
|||
|
|
!operation.keep_origin &&
|
|||
|
|
!hasCondition
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const buildConditionPayload = (condition) => {
|
|||
|
|
const path = condition.path.trim();
|
|||
|
|
if (!path) return null;
|
|||
|
|
const payload = {
|
|||
|
|
path,
|
|||
|
|
mode: condition.mode || 'full',
|
|||
|
|
value: parseLooseValue(condition.value_text),
|
|||
|
|
};
|
|||
|
|
if (condition.invert) payload.invert = true;
|
|||
|
|
if (condition.pass_missing_key) payload.pass_missing_key = true;
|
|||
|
|
return payload;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const validateOperations = (operations, t) => {
|
|||
|
|
for (let i = 0; i < operations.length; i++) {
|
|||
|
|
const op = operations[i];
|
|||
|
|
const mode = op.mode || 'set';
|
|||
|
|
const meta = MODE_META[mode] || MODE_META.set;
|
|||
|
|
const line = i + 1;
|
|||
|
|
const pathValue = op.path.trim();
|
|||
|
|
const fromValue = op.from.trim();
|
|||
|
|
const toValue = op.to.trim();
|
|||
|
|
|
|||
|
|
if (meta.path && !pathValue) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 path', { line });
|
|||
|
|
}
|
|||
|
|
if (FROM_REQUIRED_MODES.has(mode) && !fromValue) {
|
|||
|
|
if (!(meta.pathAlias && pathValue)) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 from', { line });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (TO_REQUIRED_MODES.has(mode) && !toValue) {
|
|||
|
|
if (!(meta.pathAlias && pathValue)) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 to', { line });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (meta.from && !fromValue) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 from', { line });
|
|||
|
|
}
|
|||
|
|
if (meta.to && !toValue) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 to', { line });
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
VALUE_REQUIRED_MODES.has(mode) &&
|
|||
|
|
String(op.value_text ?? '').trim() === ''
|
|||
|
|
) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 value', { line });
|
|||
|
|
}
|
|||
|
|
if (mode === 'return_error') {
|
|||
|
|
const raw = String(op.value_text ?? '').trim();
|
|||
|
|
if (!raw) {
|
|||
|
|
return t('第 {{line}} 条操作缺少 value', { line });
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const parsed = JSON.parse(raw);
|
|||
|
|
if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
|
|||
|
|
if (!String(parsed.message || '').trim()) {
|
|||
|
|
return t('第 {{line}} 条 return_error 需要 message', { line });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
// plain string value is allowed
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return '';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
|
|||
|
|
const [editMode, setEditMode] = useState('visual');
|
|||
|
|
const [visualMode, setVisualMode] = useState('operations');
|
|||
|
|
const [legacyValue, setLegacyValue] = useState('');
|
|||
|
|
const [operations, setOperations] = useState([createDefaultOperation()]);
|
|||
|
|
const [jsonText, setJsonText] = useState('');
|
|||
|
|
const [jsonError, setJsonError] = useState('');
|
|||
|
|
const monacoConfiguredRef = useRef(false);
|
|||
|
|
|
|||
|
|
const configureMonaco = useCallback((monaco) => {
|
|||
|
|
if (monacoConfiguredRef.current) return;
|
|||
|
|
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
|||
|
|
validate: true,
|
|||
|
|
allowComments: false,
|
|||
|
|
enableSchemaRequest: false,
|
|||
|
|
schemas: [
|
|||
|
|
{
|
|||
|
|
uri: MONACO_SCHEMA_URI,
|
|||
|
|
fileMatch: [MONACO_MODEL_URI, '*param-override*.json'],
|
|||
|
|
schema: PARAM_OVERRIDE_JSON_SCHEMA,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
monacoConfiguredRef.current = true;
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!visible) return;
|
|||
|
|
const nextState = parseInitialState(value);
|
|||
|
|
setEditMode(nextState.editMode);
|
|||
|
|
setVisualMode(nextState.visualMode);
|
|||
|
|
setLegacyValue(nextState.legacyValue);
|
|||
|
|
setOperations(nextState.operations);
|
|||
|
|
setJsonText(nextState.jsonText);
|
|||
|
|
setJsonError(nextState.jsonError);
|
|||
|
|
}, [visible, value]);
|
|||
|
|
|
|||
|
|
const operationCount = useMemo(
|
|||
|
|
() => operations.filter((item) => !isOperationBlank(item)).length,
|
|||
|
|
[operations],
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const buildVisualJson = useCallback(() => {
|
|||
|
|
if (visualMode === 'legacy') {
|
|||
|
|
const trimmed = legacyValue.trim();
|
|||
|
|
if (!trimmed) return '';
|
|||
|
|
if (!verifyJSON(trimmed)) {
|
|||
|
|
throw new Error(t('参数覆盖必须是合法的 JSON 格式！'));
|
|||
|
|
}
|
|||
|
|
const parsed = JSON.parse(trimmed);
|
|||
|
|
if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
|
|||
|
|
throw new Error(t('旧格式必须是 JSON 对象'));
|
|||
|
|
}
|
|||
|
|
return JSON.stringify(parsed, null, 2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const filteredOps = operations.filter((item) => !isOperationBlank(item));
|
|||
|
|
if (filteredOps.length === 0) return '';
|
|||
|
|
|
|||
|
|
const message = validateOperations(filteredOps, t);
|
|||
|
|
if (message) {
|
|||
|
|
throw new Error(message);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payloadOps = filteredOps.map((operation) => {
|
|||
|
|
const mode = operation.mode || 'set';
|
|||
|
|
const meta = MODE_META[mode] || MODE_META.set;
|
|||
|
|
const pathValue = operation.path.trim();
|
|||
|
|
const fromValue = operation.from.trim();
|
|||
|
|
const toValue = operation.to.trim();
|
|||
|
|
const payload = { mode };
|
|||
|
|
if (meta.path) {
|
|||
|
|
payload.path = pathValue;
|
|||
|
|
}
|
|||
|
|
if (meta.pathOptional && pathValue) {
|
|||
|
|
payload.path = pathValue;
|
|||
|
|
}
|
|||
|
|
if (meta.value) {
|
|||
|
|
payload.value = parseLooseValue(operation.value_text);
|
|||
|
|
}
|
|||
|
|
if (meta.keepOrigin && operation.keep_origin) {
|
|||
|
|
payload.keep_origin = true;
|
|||
|
|
}
|
|||
|
|
if (meta.from) {
|
|||
|
|
payload.from = fromValue;
|
|||
|
|
}
|
|||
|
|
if (!meta.to && operation.to.trim()) {
|
|||
|
|
payload.to = toValue;
|
|||
|
|
}
|
|||
|
|
if (meta.to) {
|
|||
|
|
payload.to = toValue;
|
|||
|
|
}
|
|||
|
|
if (meta.pathAlias) {
|
|||
|
|
if (!payload.from && pathValue) {
|
|||
|
|
payload.from = pathValue;
|
|||
|
|
}
|
|||
|
|
if (!payload.to && pathValue) {
|
|||
|
|
payload.to = pathValue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const conditions = (operation.conditions || [])
|
|||
|
|
.map(buildConditionPayload)
|
|||
|
|
.filter(Boolean);
|
|||
|
|
|
|||
|
|
if (conditions.length > 0) {
|
|||
|
|
payload.conditions = conditions;
|
|||
|
|
payload.logic = operation.logic === 'AND' ? 'AND' : 'OR';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return payload;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return JSON.stringify({ operations: payloadOps }, null, 2);
|
|||
|
|
}, [legacyValue, operations, t, visualMode]);
|
|||
|
|
|
|||
|
|
const switchToJsonMode = () => {
|
|||
|
|
if (editMode === 'json') return;
|
|||
|
|
try {
|
|||
|
|
setJsonText(buildVisualJson());
|
|||
|
|
setJsonError('');
|
|||
|
|
setEditMode('json');
|
|||
|
|
} catch (error) {
|
|||
|
|
showError(error.message);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const switchToVisualMode = () => {
|
|||
|
|
if (editMode === 'visual') return;
|
|||
|
|
const trimmed = jsonText.trim();
|
|||
|
|
if (!trimmed) {
|
|||
|
|
setVisualMode('operations');
|
|||
|
|
setOperations([createDefaultOperation()]);
|
|||
|
|
setLegacyValue('');
|
|||
|
|
setJsonError('');
|
|||
|
|
setEditMode('visual');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!verifyJSON(trimmed)) {
|
|||
|
|
showError(t('参数覆盖必须是合法的 JSON 格式！'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const parsed = JSON.parse(trimmed);
|
|||
|
|
if (
|
|||
|
|
parsed &&
|
|||
|
|
typeof parsed === 'object' &&
|
|||
|
|
!Array.isArray(parsed) &&
|
|||
|
|
Array.isArray(parsed.operations)
|
|||
|
|
) {
|
|||
|
|
setVisualMode('operations');
|
|||
|
|
setOperations(
|
|||
|
|
parsed.operations.length > 0
|
|||
|
|
? parsed.operations.map(normalizeOperation)
|
|||
|
|
: [createDefaultOperation()],
|
|||
|
|
);
|
|||
|
|
setLegacyValue('');
|
|||
|
|
setJsonError('');
|
|||
|
|
setEditMode('visual');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
|
|||
|
|
setVisualMode('legacy');
|
|||
|
|
setLegacyValue(JSON.stringify(parsed, null, 2));
|
|||
|
|
setOperations([createDefaultOperation()]);
|
|||
|
|
setJsonError('');
|
|||
|
|
setEditMode('visual');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showError(t('参数覆盖必须是合法的 JSON 对象'));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const setOldTemplate = () => {
|
|||
|
|
const text = JSON.stringify(LEGACY_TEMPLATE, null, 2);
|
|||
|
|
setVisualMode('legacy');
|
|||
|
|
setLegacyValue(text);
|
|||
|
|
setJsonText(text);
|
|||
|
|
setJsonError('');
|
|||
|
|
setEditMode('visual');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const setNewTemplate = () => {
|
|||
|
|
setVisualMode('operations');
|
|||
|
|
setOperations(OPERATION_TEMPLATE.operations.map(normalizeOperation));
|
|||
|
|
setJsonText(JSON.stringify(OPERATION_TEMPLATE, null, 2));
|
|||
|
|
setJsonError('');
|
|||
|
|
setEditMode('visual');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const clearValue = () => {
|
|||
|
|
setVisualMode('operations');
|
|||
|
|
setLegacyValue('');
|
|||
|
|
setOperations([createDefaultOperation()]);
|
|||
|
|
setJsonText('');
|
|||
|
|
setJsonError('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const updateOperation = (operationId, patch) => {
|
|||
|
|
setOperations((prev) =>
|
|||
|
|
prev.map((item) =>
|
|||
|
|
item.id === operationId ? { ...item, ...patch } : item,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const addOperation = () => {
|
|||
|
|
setOperations((prev) => [...prev, createDefaultOperation()]);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const duplicateOperation = (operationId) => {
|
|||
|
|
setOperations((prev) => {
|
|||
|
|
const index = prev.findIndex((item) => item.id === operationId);
|
|||
|
|
if (index < 0) return prev;
|
|||
|
|
const source = prev[index];
|
|||
|
|
const cloned = normalizeOperation({
|
|||
|
|
path: source.path,
|
|||
|
|
mode: source.mode,
|
|||
|
|
value: parseLooseValue(source.value_text),
|
|||
|
|
keep_origin: source.keep_origin,
|
|||
|
|
from: source.from,
|
|||
|
|
to: source.to,
|
|||
|
|
logic: source.logic,
|
|||
|
|
conditions: (source.conditions || []).map((condition) => ({
|
|||
|
|
path: condition.path,
|
|||
|
|
mode: condition.mode,
|
|||
|
|
value: parseLooseValue(condition.value_text),
|
|||
|
|
invert: condition.invert,
|
|||
|
|
pass_missing_key: condition.pass_missing_key,
|
|||
|
|
})),
|
|||
|
|
});
|
|||
|
|
const next = [...prev];
|
|||
|
|
next.splice(index + 1, 0, cloned);
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeOperation = (operationId) => {
|
|||
|
|
setOperations((prev) => {
|
|||
|
|
if (prev.length <= 1) return [createDefaultOperation()];
|
|||
|
|
return prev.filter((item) => item.id !== operationId);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const addCondition = (operationId) => {
|
|||
|
|
setOperations((prev) =>
|
|||
|
|
prev.map((operation) =>
|
|||
|
|
operation.id === operationId
|
|||
|
|
? {
|
|||
|
|
...operation,
|
|||
|
|
conditions: [...(operation.conditions || []), createDefaultCondition()],
|
|||
|
|
}
|
|||
|
|
: operation,
|
|||
|
|
),
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const updateCondition = (operationId, conditionId, patch) => {
|
|||
|
|
setOperations((prev) =>
|
|||
|
|
prev.map((operation) => {
|
|||
|
|
if (operation.id !== operationId) return operation;
|
|||
|
|
return {
|
|||
|
|
...operation,
|
|||
|
|
conditions: (operation.conditions || []).map((condition) =>
|
|||
|
|
condition.id === conditionId
|
|||
|
|
? { ...condition, ...patch }
|
|||
|
|
: condition,
|
|||
|
|
),
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const removeCondition = (operationId, conditionId) => {
|
|||
|
|
setOperations((prev) =>
|
|||
|
|
prev.map((operation) => {
|
|||
|
|
if (operation.id !== operationId) return operation;
|
|||
|
|
return {
|
|||
|
|
...operation,
|
|||
|
|
conditions: (operation.conditions || []).filter(
|
|||
|
|
(condition) => condition.id !== conditionId,
|
|||
|
|
),
|
|||
|
|
};
|
|||
|
|
}),
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleJsonChange = (nextValue) => {
|
|||
|
|
setJsonText(nextValue);
|
|||
|
|
const trimmed = String(nextValue || '').trim();
|
|||
|
|
if (!trimmed) {
|
|||
|
|
setJsonError('');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!verifyJSON(trimmed)) {
|
|||
|
|
setJsonError(t('JSON格式错误'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setJsonError('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatJson = () => {
|
|||
|
|
const trimmed = jsonText.trim();
|
|||
|
|
if (!trimmed) return;
|
|||
|
|
if (!verifyJSON(trimmed)) {
|
|||
|
|
showError(t('参数覆盖必须是合法的 JSON 格式！'));
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setJsonText(JSON.stringify(JSON.parse(trimmed), null, 2));
|
|||
|
|
setJsonError('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const visualPreview = useMemo(() => {
|
|||
|
|
if (editMode !== 'visual' || visualMode !== 'operations') {
|
|||
|
|
return '';
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
return buildVisualJson() || '';
|
|||
|
|
} catch (error) {
|
|||
|
|
return `// ${error.message}`;
|
|||
|
|
}
|
|||
|
|
}, [buildVisualJson, editMode, visualMode]);
|
|||
|
|
|
|||
|
|
const handleSave = () => {
|
|||
|
|
try {
|
|||
|
|
let result = '';
|
|||
|
|
if (editMode === 'json') {
|
|||
|
|
const trimmed = jsonText.trim();
|
|||
|
|
if (!trimmed) {
|
|||
|
|
result = '';
|
|||
|
|
} else {
|
|||
|
|
if (!verifyJSON(trimmed)) {
|
|||
|
|
throw new Error(t('参数覆盖必须是合法的 JSON 格式！'));
|
|||
|
|
}
|
|||
|
|
result = JSON.stringify(JSON.parse(trimmed), null, 2);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
result = buildVisualJson();
|
|||
|
|
}
|
|||
|
|
onSave?.(result);
|
|||
|
|
} catch (error) {
|
|||
|
|
showError(error.message);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal
|
|||
|
|
title={t('参数覆盖')}
|
|||
|
|
visible={visible}
|
|||
|
|
width={980}
|
|||
|
|
onCancel={onCancel}
|
|||
|
|
onOk={handleSave}
|
|||
|
|
okText={t('保存')}
|
|||
|
|
cancelText={t('取消')}
|
|||
|
|
>
|
|||
|
|
<Space vertical align='start' spacing={12} style={{ width: '100%' }}>
|
|||
|
|
<Banner
|
|||
|
|
fullMode={false}
|
|||
|
|
type='info'
|
|||
|
|
description={t(
|
|||
|
|
'支持旧格式直接覆盖，也支持新格式 operations 条件编辑；可在可视化和 JSON 之间双向切换。',
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Space wrap>
|
|||
|
|
<Button
|
|||
|
|
type={editMode === 'visual' ? 'primary' : 'tertiary'}
|
|||
|
|
onClick={switchToVisualMode}
|
|||
|
|
>
|
|||
|
|
{t('可视化')}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
type={editMode === 'json' ? 'primary' : 'tertiary'}
|
|||
|
|
onClick={switchToJsonMode}
|
|||
|
|
>
|
|||
|
|
{t('JSON 模式')}
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={setOldTemplate}>{t('旧格式模板')}</Button>
|
|||
|
|
<Button onClick={setNewTemplate}>{t('新格式模板')}</Button>
|
|||
|
|
<Button onClick={clearValue}>{t('不更改')}</Button>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
{editMode === 'visual' ? (
|
|||
|
|
<div style={{ width: '100%' }}>
|
|||
|
|
<Space wrap style={{ marginBottom: 12 }}>
|
|||
|
|
<Button
|
|||
|
|
type={visualMode === 'operations' ? 'primary' : 'tertiary'}
|
|||
|
|
onClick={() => setVisualMode('operations')}
|
|||
|
|
>
|
|||
|
|
{t('新格式模板')}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
type={visualMode === 'legacy' ? 'primary' : 'tertiary'}
|
|||
|
|
onClick={() => setVisualMode('legacy')}
|
|||
|
|
>
|
|||
|
|
{t('旧格式模板')}
|
|||
|
|
</Button>
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
{visualMode === 'legacy' ? (
|
|||
|
|
<JSONEditor
|
|||
|
|
field='param_override_legacy'
|
|||
|
|
label={t('旧格式（直接覆盖）：')}
|
|||
|
|
placeholder={JSON.stringify(LEGACY_TEMPLATE, null, 2)}
|
|||
|
|
value={legacyValue}
|
|||
|
|
onChange={setLegacyValue}
|
|||
|
|
template={LEGACY_TEMPLATE}
|
|||
|
|
templateLabel={t('填入模板')}
|
|||
|
|
editorType='keyValue'
|
|||
|
|
showClear
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div>
|
|||
|
|
<div className='flex items-center justify-between mb-3'>
|
|||
|
|
<Space>
|
|||
|
|
<Text>{t('新格式（支持条件判断与json自定义）：')}</Text>
|
|||
|
|
<Tag color='cyan'>
|
|||
|
|
{`${t('规则')}: ${operationCount}`}
|
|||
|
|
</Tag>
|
|||
|
|
</Space>
|
|||
|
|
<Button icon={<IconPlus />} onClick={addOperation}>
|
|||
|
|
{t('新增规则')}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Space vertical spacing={8} style={{ width: '100%' }}>
|
|||
|
|
{operations.map((operation, index) => {
|
|||
|
|
const mode = operation.mode || 'set';
|
|||
|
|
const meta = MODE_META[mode] || MODE_META.set;
|
|||
|
|
const conditions = operation.conditions || [];
|
|||
|
|
return (
|
|||
|
|
<Card key={operation.id} className='!rounded-xl border'>
|
|||
|
|
<div className='flex items-center justify-between mb-2'>
|
|||
|
|
<Space>
|
|||
|
|
<Tag>{`#${index + 1}`}</Tag>
|
|||
|
|
<Text>{mode}</Text>
|
|||
|
|
</Space>
|
|||
|
|
<Space>
|
|||
|
|
<Button
|
|||
|
|
size='small'
|
|||
|
|
type='tertiary'
|
|||
|
|
onClick={() => duplicateOperation(operation.id)}
|
|||
|
|
>
|
|||
|
|
{t('复制')}
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
theme='borderless'
|
|||
|
|
type='danger'
|
|||
|
|
icon={<IconDelete />}
|
|||
|
|
onClick={() => removeOperation(operation.id)}
|
|||
|
|
/>
|
|||
|
|
</Space>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Row gutter={12}>
|
|||
|
|
<Col xs={24} md={8}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
mode
|
|||
|
|
</Text>
|
|||
|
|
<Select
|
|||
|
|
value={mode}
|
|||
|
|
optionList={OPERATION_MODE_OPTIONS}
|
|||
|
|
onChange={(nextMode) =>
|
|||
|
|
updateOperation(operation.id, { mode: nextMode })
|
|||
|
|
}
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
{meta.path || meta.pathOptional ? (
|
|||
|
|
<Col xs={24} md={16}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
{meta.pathOptional ? 'path (optional)' : 'path'}
|
|||
|
|
</Text>
|
|||
|
|
<Input
|
|||
|
|
value={operation.path}
|
|||
|
|
placeholder={
|
|||
|
|
mode.includes('header')
|
|||
|
|
? 'X-Debug-Mode'
|
|||
|
|
: mode === 'prune_objects'
|
|||
|
|
? 'messages (optional)'
|
|||
|
|
: 'temperature'
|
|||
|
|
}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateOperation(operation.id, {
|
|||
|
|
path: nextValue,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Space wrap style={{ marginTop: 6 }}>
|
|||
|
|
{OPERATION_PATH_SUGGESTIONS.map((pathItem) => (
|
|||
|
|
<Tag
|
|||
|
|
key={`${operation.id}_${pathItem}`}
|
|||
|
|
size='small'
|
|||
|
|
color='grey'
|
|||
|
|
className='cursor-pointer'
|
|||
|
|
onClick={() =>
|
|||
|
|
updateOperation(operation.id, {
|
|||
|
|
path: pathItem,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{pathItem}
|
|||
|
|
</Tag>
|
|||
|
|
))}
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
) : null}
|
|||
|
|
</Row>
|
|||
|
|
<Text type='tertiary' size='small' className='mt-1 block'>
|
|||
|
|
{MODE_DESCRIPTIONS[mode] || ''}
|
|||
|
|
</Text>
|
|||
|
|
|
|||
|
|
{meta.value ? (
|
|||
|
|
<div className='mt-2'>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
value (JSON or plain text)
|
|||
|
|
</Text>
|
|||
|
|
<Input.TextArea
|
|||
|
|
value={operation.value_text}
|
|||
|
|
autosize={{ minRows: 1, maxRows: 4 }}
|
|||
|
|
placeholder='0.7'
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateOperation(operation.id, {
|
|||
|
|
value_text: nextValue,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{meta.keepOrigin ? (
|
|||
|
|
<div className='mt-2'>
|
|||
|
|
<Switch
|
|||
|
|
checked={operation.keep_origin}
|
|||
|
|
checkedText={t('开')}
|
|||
|
|
uncheckedText={t('关')}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateOperation(operation.id, {
|
|||
|
|
keep_origin: nextValue,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Text type='tertiary' size='small' className='ml-2'>
|
|||
|
|
keep_origin
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
{meta.from || meta.to === false || meta.to ? (
|
|||
|
|
<Row gutter={12} style={{ marginTop: 8 }}>
|
|||
|
|
{meta.from || meta.to === false ? (
|
|||
|
|
<Col xs={24} md={12}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
from
|
|||
|
|
</Text>
|
|||
|
|
<Input
|
|||
|
|
value={operation.from}
|
|||
|
|
placeholder={
|
|||
|
|
mode.includes('header')
|
|||
|
|
? 'Authorization'
|
|||
|
|
: 'model'
|
|||
|
|
}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateOperation(operation.id, {
|
|||
|
|
from: nextValue,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
) : null}
|
|||
|
|
{meta.to || meta.to === false ? (
|
|||
|
|
<Col xs={24} md={12}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
to
|
|||
|
|
</Text>
|
|||
|
|
<Input
|
|||
|
|
value={operation.to}
|
|||
|
|
placeholder={
|
|||
|
|
mode.includes('header')
|
|||
|
|
? 'X-Upstream-Auth'
|
|||
|
|
: 'original_model'
|
|||
|
|
}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateOperation(operation.id, { to: nextValue })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
) : null}
|
|||
|
|
</Row>
|
|||
|
|
) : null}
|
|||
|
|
|
|||
|
|
<div className='mt-3 border rounded-lg p-2'>
|
|||
|
|
<div className='flex items-center justify-between mb-2'>
|
|||
|
|
<Space>
|
|||
|
|
<Text>{t('条件')}</Text>
|
|||
|
|
<Select
|
|||
|
|
value={operation.logic || 'OR'}
|
|||
|
|
optionList={[
|
|||
|
|
{ label: 'OR', value: 'OR' },
|
|||
|
|
{ label: 'AND', value: 'AND' },
|
|||
|
|
]}
|
|||
|
|
style={{ width: 96 }}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateOperation(operation.id, {
|
|||
|
|
logic: nextValue,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Space>
|
|||
|
|
<Button
|
|||
|
|
icon={<IconPlus />}
|
|||
|
|
size='small'
|
|||
|
|
onClick={() => addCondition(operation.id)}
|
|||
|
|
>
|
|||
|
|
{t('新增条件')}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{conditions.length === 0 ? (
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
{t('没有条件时，默认总是执行该操作。')}
|
|||
|
|
</Text>
|
|||
|
|
) : (
|
|||
|
|
<Space vertical spacing={8} style={{ width: '100%' }}>
|
|||
|
|
{conditions.map((condition, conditionIndex) => (
|
|||
|
|
<Card
|
|||
|
|
key={condition.id}
|
|||
|
|
bodyStyle={{ padding: 10 }}
|
|||
|
|
className='!rounded-lg'
|
|||
|
|
>
|
|||
|
|
<div className='flex items-center justify-between mb-2'>
|
|||
|
|
<Tag size='small'>{`C${conditionIndex + 1}`}</Tag>
|
|||
|
|
<Button
|
|||
|
|
theme='borderless'
|
|||
|
|
type='danger'
|
|||
|
|
icon={<IconDelete />}
|
|||
|
|
size='small'
|
|||
|
|
onClick={() =>
|
|||
|
|
removeCondition(operation.id, condition.id)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<Row gutter={12}>
|
|||
|
|
<Col xs={24} md={10}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
path
|
|||
|
|
</Text>
|
|||
|
|
<Input
|
|||
|
|
value={condition.path}
|
|||
|
|
placeholder='model'
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateCondition(
|
|||
|
|
operation.id,
|
|||
|
|
condition.id,
|
|||
|
|
{ path: nextValue },
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Space wrap style={{ marginTop: 6 }}>
|
|||
|
|
{CONDITION_PATH_SUGGESTIONS.map(
|
|||
|
|
(pathItem) => (
|
|||
|
|
<Tag
|
|||
|
|
key={`${condition.id}_${pathItem}`}
|
|||
|
|
size='small'
|
|||
|
|
color='grey'
|
|||
|
|
className='cursor-pointer'
|
|||
|
|
onClick={() =>
|
|||
|
|
updateCondition(
|
|||
|
|
operation.id,
|
|||
|
|
condition.id,
|
|||
|
|
{ path: pathItem },
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{pathItem}
|
|||
|
|
</Tag>
|
|||
|
|
),
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} md={8}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
mode
|
|||
|
|
</Text>
|
|||
|
|
<Select
|
|||
|
|
value={condition.mode}
|
|||
|
|
optionList={CONDITION_MODE_OPTIONS}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateCondition(
|
|||
|
|
operation.id,
|
|||
|
|
condition.id,
|
|||
|
|
{ mode: nextValue },
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
style={{ width: '100%' }}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
<Col xs={24} md={6}>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
value
|
|||
|
|
</Text>
|
|||
|
|
<Input
|
|||
|
|
value={condition.value_text}
|
|||
|
|
placeholder='gpt'
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateCondition(
|
|||
|
|
operation.id,
|
|||
|
|
condition.id,
|
|||
|
|
{ value_text: nextValue },
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
<Space style={{ marginTop: 8 }}>
|
|||
|
|
<Switch
|
|||
|
|
checked={condition.invert}
|
|||
|
|
checkedText={t('开')}
|
|||
|
|
uncheckedText={t('关')}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateCondition(
|
|||
|
|
operation.id,
|
|||
|
|
condition.id,
|
|||
|
|
{ invert: nextValue },
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
invert
|
|||
|
|
</Text>
|
|||
|
|
<Switch
|
|||
|
|
checked={condition.pass_missing_key}
|
|||
|
|
checkedText={t('开')}
|
|||
|
|
uncheckedText={t('关')}
|
|||
|
|
onChange={(nextValue) =>
|
|||
|
|
updateCondition(
|
|||
|
|
operation.id,
|
|||
|
|
condition.id,
|
|||
|
|
{ pass_missing_key: nextValue },
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Text type='tertiary' size='small'>
|
|||
|
|
pass_missing_key
|
|||
|
|
</Text>
|
|||
|
|
</Space>
|
|||
|
|
</Card>
|
|||
|
|
))}
|
|||
|
|
</Space>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</Space>
|
|||
|
|
<Card className='!rounded-xl border mt-3'>
|
|||
|
|
<div className='flex items-center justify-between mb-2'>
|
|||
|
|
<Text>{t('实时 JSON 预览')}</Text>
|
|||
|
|
<Tag color='grey'>{t('预览')}</Tag>
|
|||
|
|
</div>
|
|||
|
|
<pre className='mb-0 text-xs leading-5 whitespace-pre-wrap break-all max-h-64 overflow-auto'>
|
|||
|
|
{visualPreview || '{}'}
|
|||
|
|
</pre>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div style={{ width: '100%' }}>
|
|||
|
|
<Space style={{ marginBottom: 8 }} wrap>
|
|||
|
|
<Button onClick={formatJson}>{t('格式化')}</Button>
|
|||
|
|
<Tag color='cyan'>{t('JSON 智能提示')}</Tag>
|
|||
|
|
</Space>
|
|||
|
|
<div className='border rounded-lg overflow-hidden'>
|
|||
|
|
<MonacoEditor
|
|||
|
|
beforeMount={configureMonaco}
|
|||
|
|
path={MONACO_MODEL_URI}
|
|||
|
|
language='json'
|
|||
|
|
value={jsonText}
|
|||
|
|
onChange={(nextValue) => handleJsonChange(nextValue ?? '')}
|
|||
|
|
height='460px'
|
|||
|
|
options={{
|
|||
|
|
minimap: { enabled: false },
|
|||
|
|
fontSize: 13,
|
|||
|
|
lineNumbers: 'on',
|
|||
|
|
automaticLayout: true,
|
|||
|
|
scrollBeyondLastLine: false,
|
|||
|
|
tabSize: 2,
|
|||
|
|
insertSpaces: true,
|
|||
|
|
wordWrap: 'on',
|
|||
|
|
formatOnPaste: true,
|
|||
|
|
formatOnType: true,
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<Text type='tertiary' size='small' className='mt-2 block'>
|
|||
|
|
{t('支持 mode/conditions 字段补全与 JSON Schema 校验')}
|
|||
|
|
</Text>
|
|||
|
|
{jsonError ? (
|
|||
|
|
<Text className='text-red-500 text-xs mt-2'>{jsonError}</Text>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Space>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ParamOverrideEditorModal;
|