amis-saas-6892 [Feature] 编辑器fx 交互优化

Change-Id: Ia669d4abaed1ac0c19ebb0d09df6ac20f0a9a307

packages/amis-editor/src/plugin/Form/Switch.tsx

@@ -182,6 +182,7 @@ export class SwitchControlPlugin extends BasePlugin {
               */
               getSchemaTpl('valueFormula', {
                 rendererSchema: context?.schema,
+                needDeleteProps: ['option'],
                 rendererWrapper: true, // 浅色线框包裹一下，增加边界感
                 valueType: 'boolean',
                 pipeIn: (value: any, data: any) => {

packages/amis-editor/src/renderer/FormulaControl.tsx

@@ -210,13 +210,17 @@ export default class FormulaControl extends React.Component<
    * 备注: 手动编辑时，自动处理掉 ${xx}，避免识别成 公式表达式
    */
   @autobind
-  replaceExpression(expression: any): any {
+  outReplaceExpression(expression: any): any {
     if (expression && isString(expression) && isExpression(expression)) {
       return expression.replace(/(^|[^\\])\$\{/g, '\\${');
     }
     return expression;
   }
 
+  inReplaceExpression(expression: any): any {
+    return expression.replace(/\\\$\{/g, '${');
+  }
+
   // 根据 name 值 判断当前表达式是否 存在循环引用问题
   @autobind
   isLoopExpression(expression: any, selfName: string): boolean {
@@ -365,7 +369,7 @@ export default class FormulaControl extends React.Component<
   }
 
   handleSimpleInputChange = (value: any) => {
-    const curValue = this.replaceExpression(value);
+    const curValue = this.outReplaceExpression(value);
     this.props?.onChange?.(curValue);
   };
 
@@ -432,22 +436,17 @@ export default class FormulaControl extends React.Component<
       }
       curRendererSchema = omit(curRendererSchema, deleteProps);
 
-      // 避免没有清空icon
-      if (
-        curRendererSchema.clearable !== undefined &&
-        !curRendererSchema.clearable
-      ) {
-        curRendererSchema.clearable = true;
-      }
+      // 设置可清空
+      curRendererSchema.clearable = true;
 
       // 设置统一的占位提示
       if (curRendererSchema.type === 'select') {
         !curRendererSchema.placeholder &&
-          (curRendererSchema.placeholder = '请选择默认值');
+          (curRendererSchema.placeholder = '请选择静态值');
         curRendererSchema.inputClassName =
           'ae-editor-FormulaControl-select-style';
       } else if (!curRendererSchema.placeholder) {
-        curRendererSchema.placeholder = '请输入静态默认值';
+        curRendererSchema.placeholder = '请输入静态值';
       }
 
       // 设置popOverContainer
@@ -536,7 +535,7 @@ export default class FormulaControl extends React.Component<
           !rendererSchema && (
             <InputBox
               className="ae-editor-FormulaControl-input"
-              value={value}
+              value={this.inReplaceExpression(value)}
               clearable={true}
               placeholder={placeholder}
               onChange={this.handleSimpleInputChange}
@@ -555,7 +554,7 @@ export default class FormulaControl extends React.Component<
             >
               {render('inner', this.filterCustomRendererProps(rendererSchema), {
                 inputOnly: true,
-                value: value,
+                value: this.inReplaceExpression(value),
                 data: useExternalFormData
                   ? {
                       ...this.props.data

packages/amis-editor/src/tpl/common.tsx

@@ -353,7 +353,7 @@ setSchemaTpl(
     header?: string; // 表达式弹窗标题
     rendererSchema?: any;
     rendererWrapper?: boolean; // 自定义渲染器 是否需要浅色边框包裹
-    needDeleteValue?: boolean; // 是否需要剔除默认值
+    needDeleteProps?: string[]; // 需要剔除的其他属性，默认 deleteProps 中包含一些通用属性
     useSelectMode?: boolean; // 是否使用Select选择设置模式，需要确保 rendererSchema.options 不为 undefined
     valueType?: string; // 用于设置期望数值类型
     visibleOn?: string; // 用于控制显示的表达式
@@ -384,7 +384,7 @@ setSchemaTpl(
             name: config?.name || 'value',
             rendererSchema: curRendererSchema,
             rendererWrapper: config?.rendererWrapper,
-            needDeleteValue: config?.needDeleteValue,
+            needDeleteProps: config?.needDeleteProps,
             valueType: config?.valueType,
             header: config.header ?? '表达式',
             DateTimeType: config.DateTimeType ?? FormulaDateType.NotDate
@@ -399,7 +399,7 @@ setSchemaTpl(
         name: config?.name || 'value',
         rendererSchema: curRendererSchema,
         rendererWrapper: config?.rendererWrapper,
-        needDeleteValue: config?.needDeleteValue,
+        needDeleteProps: config?.needDeleteProps,
         valueType: config?.valueType,
         visibleOn: config?.visibleOn,
         header: config?.header ?? '表达式',
@@ -621,8 +621,8 @@ setSchemaTpl(
       body: [
         getSchemaTpl('newVisible'),
         getSchemaTpl('hidden'),
-        !config?.unsupportStatic && config?.isFormItem 
-          ? getSchemaTpl('static') 
+        !config?.unsupportStatic && config?.isFormItem
+          ? getSchemaTpl('static')
           : null,
         config?.readonly ? getSchemaTpl('readonly') : null,
         config?.disabled || config?.isFormItem
@@ -696,7 +696,6 @@ setSchemaTpl('visible', {
   expressionName: 'visibleOn'
 });
 
-
 setSchemaTpl('static', {
   type: 'ae-StatusControl',
   label: '静态展示',
@@ -1101,4 +1100,4 @@ setSchemaTpl(
       description: ''
     });
   }
-);
+);