diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx index 41480125e5..882a910c7a 100644 --- a/web/src/components/Plugin/PluginDetail.tsx +++ b/web/src/components/Plugin/PluginDetail.tsx @@ -107,6 +107,7 @@ const PluginDetail: React.FC = ({ const [UIForm] = Form.useForm(); const data = initialData[name] || {}; const pluginType = pluginList.find((item) => item.name === name)?.originType; + const pluginSchema = pluginList.find((item) => item.name === name)?.schema; const [content, setContent] = useState(JSON.stringify(data, null, 2)); const [monacoMode, setMonacoMode] = useState(monacoModeList.JSON); const modeOptions: { label: string; value: string }[] = [ @@ -411,7 +412,7 @@ const PluginDetail: React.FC = ({ ]} /> - {Boolean(monacoMode === monacoModeList.UIForm) && } + {Boolean(monacoMode === monacoModeList.UIForm) && }
| undefined; ref?: any; }; @@ -33,8 +34,9 @@ export const FORM_ITEM_LAYOUT = { }, }; -const LimitReq: React.FC = ({ form }) => { +const LimitReq: React.FC = ({ form, schema }) => { const { formatMessage } = useIntl(); + const propertires = schema?.properties; return (
= ({ form }) => { tooltip={formatMessage({ id: 'component.pluginForm.limit-req.rate.tooltip' })} validateTrigger={['onChange', 'onBlur', 'onClick']} > - + = ({ form }) => { tooltip={formatMessage({ id: 'component.pluginForm.limit-req.burst.tooltip' })} validateTrigger={['onChange', 'onBlur', 'onClick']} > - + = ({ form }) => { validateTrigger={['onChange', 'onBlur', 'onClick']} > @@ -83,10 +85,10 @@ const LimitReq: React.FC = ({ form }) => { - + ); diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx index 0d1a2b67b2..d937e2e025 100644 --- a/web/src/components/Plugin/UI/plugin.tsx +++ b/web/src/components/Plugin/UI/plugin.tsx @@ -30,13 +30,14 @@ import Cors from './cors'; type Props = { name: string, + schema: Record | undefined, form: FormInstance, renderForm: boolean } export const PLUGIN_UI_LIST = ['api-breaker', 'basic-auth', 'cors', 'limit-req', 'limit-conn', 'proxy-mirror', 'referer-restriction', 'limit-count']; -export const PluginForm: React.FC = ({ name, renderForm, form }) => { +export const PluginForm: React.FC = ({ name, schema, renderForm, form }) => { const { formatMessage } = useIntl(); @@ -52,7 +53,7 @@ export const PluginForm: React.FC = ({ name, renderForm, form }) => { case 'cors': return case 'limit-req': - return + return case 'proxy-mirror': return case 'limit-conn':