这个issue:
https://github.com/apache/shenyu/issues/5966
其中提到由于没有填写handler导致无法提交,于是先临时添加一个必填标识
https://github.com/apache/shenyu-dashboard/pull/525
这里发现有两个Handler的表单项,一眼看过去好像是个BUG,本来是打算合二为一,发现由于此处的设计是两个FormItem,删掉下面的Handler的label,会导致被删除的表单项往左偏移而对不齐
此处介绍一下两个都称之为Handle的表单项的区别,第一个是组件独特的表单项,例如request插件就是request对应的xxx.js,表单项里包含填写多个params、headers、cookies等,如果是其他组件则是填写其他的东西;第二个是在PluginTemplate动态配置出来的
目前的代码逻辑比较绕,大概介绍一下:
src/routes/Plugin/Common/Rule.js是一个AddModal的组件,也就是我pr里截图的弹窗表单
其中有这样一段代码
let RuleHandleComponent;
if (customRulePage) {
RuleHandleComponent = ComposeRuleHandle;
} else if (pluginHandleList) {
RuleHandleComponent = CommonRuleHandle;
}其中customRulePage
const customPluginNames = Object.keys(PluginRuleHandle);
this.state = {
customRulePage: customPluginNames.includes(props.pluginName),
};而PluginRuleHandle
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import RequestRuleHandle from "./RequestRuleHandle";
import HystrixRuleHandle from "./HystrixRuleHandle";
import ParamPluginRuleHandle from "./ParamPluginRuleHandle";
import ResponseRuleHandle from "./ResponseRuleHandle";
import GeneralContextRuleHandle from "./GeneralContextRuleHandle";
export default {
request: RequestRuleHandle,
generalContext: GeneralContextRuleHandle,
modifyResponse: ResponseRuleHandle,
hystrix: HystrixRuleHandle,
paramMapping: ParamPluginRuleHandle,
};看到上面三个就知道这么一个逻辑:
如果
PluginRuleHandle中自定义了一些对应组件的handler,就用ComposeRuleHandle,否则有pluginHandleList就用CommonRuleHandle,此处pluginHandleList是通过pluginId查询网页对应PluginTemlate菜单配置的表单项得到
接下来介绍ComposeRuleHandle,这个组件包含两个组件,一个是PluginRuleHandle中配置的对应组件的Handle,还有一个是刚刚提到的CommonRuleHandle,每一个组件都是一个FormItem,因此才有两个FormItem
Rule.js:弹窗里的表单,包含下面所有组件
PluginRuleHandle.js:配置项,配置预设插件与定制化handle组件
ComposeRuleHandle.js:在PluginRuleHandle.js中配置了定制化handle组件的,使用定制化+CommonRuleHandle.js俩表单项
CommonRuleHandle.js:在网页菜单PluginTemplate动态配置生成的表单项