style: 优化form flex模式下样式问题 (#10438)

* style: 优化form flex模式下样式问题

* style: 优化form flex模式下remark位置

* fix: 修复标题\控件提交数据不更新问题

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

packages/amis-core/src/renderers/Item.tsx

@@ -1898,23 +1898,25 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               </label>
             ) : null}
 
-            {renderControl()}
+            <div className={cx(`Form-value`)}>
+              {renderControl()}
 
-            {caption
-              ? render('caption', caption, {
-                  className: cx(`Form-caption`, captionClassName)
-                })
-              : null}
+              {caption
+                ? render('caption', caption, {
+                    className: cx(`Form-caption`, captionClassName)
+                  })
+                : null}
 
-            {remark
-              ? render('remark', {
-                  type: 'remark',
-                  icon: remark.icon || 'warning-mark',
-                  className: cx(`Form-remark`),
-                  tooltip: remark,
-                  container: props.popOverContainer || env.getModalContainer
-                })
-              : null}
+              {remark
+                ? render('remark', {
+                    type: 'remark',
+                    icon: remark.icon || 'warning-mark',
+                    className: cx(`Form-remark`),
+                    tooltip: remark,
+                    container: props.popOverContainer || env.getModalContainer
+                  })
+                : null}
+            </div>
           </div>
 
           {hint && model && model.isFocused

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

@@ -488,6 +488,7 @@ export default class SwitchMore extends React.Component<
 }
 
 @FormItem({
-  type: 'ae-switch-more'
+  type: 'ae-switch-more',
+  strictMode: false
 })
 export class SwitchMoreRenderer extends SwitchMore {}

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

@@ -1,8 +1,7 @@
 import {setSchemaTpl} from 'amis-editor-core';
 import {remarkTpl} from '../component/BaseControl';
 
-setSchemaTpl(
-  'remark',
+setSchemaTpl('remark', () =>
   remarkTpl({
     name: 'remark',
     label: '控件提示',
@@ -11,8 +10,7 @@ setSchemaTpl(
   })
 );
 
-setSchemaTpl(
-  'labelRemark',
+setSchemaTpl('labelRemark', () =>
   remarkTpl({
     name: 'labelRemark',
     label: '标题提示',

packages/amis-ui/scss/components/form/_form.scss

@@ -438,17 +438,27 @@
       vertical-align: top;
       padding-top: var(--Form-label-paddingTop);
       margin-right: var(--Form-row-gutterWidth);
+      .#{$ns}Remark {
+        vertical-align: initial;
+      }
     }
 
-    > .#{$ns}Form-control {
+    > .#{$ns}Form-value {
       flex-basis: 0;
       flex-grow: 1;
       min-width: 0;
+      .#{$ns}Remark {
+        vertical-align: initial;
+        margin-left: 0;
+      }
     }
   }
 
   .#{$ns}Form-flexInner--label-top {
     flex-direction: column;
+    > .#{$ns}Form-value {
+      flex-basis: auto;
+    }
   }
   .#{$ns}Form-flexInner--label-left {
     > .#{$ns}Form-label {