feat: 移动端支持单独配置属性

packages/amis-core/src/envOverwrite.ts

@@ -23,6 +23,8 @@ export const envOverwrite = (schema: any, locale?: string, device?: string) => {
         delete newValue[locale];
         return newValue;
       } else if (isMobileDevice && value.mobile) {
+        // 这里会merge mobile 的配置到顶层，但$$id是不期望被merge的，所以需要删除
+        delete value.mobile.$$id;
         const newValue = Object.assign({}, value, value.mobile);
         delete newValue.mobile;
         return newValue;

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

@@ -1301,6 +1301,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   }`]: horizontal.leftFixed,
                   [`Form-itemColumn--${left}`]: !horizontal.leftFixed,
                   'Form-label--left': labelAlign === 'left',
+                  'Form-label--right': labelAlign === 'right',
                   'Form-label-noLabel': label === ''
                 },
                 getItemLabelClassName(props)
@@ -1421,6 +1422,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
       } = props;
 
       description = description || desc;
+      const labelAlign =
+        (props.labelAlign !== 'inherit' && props.labelAlign) ||
+        props.formLabelAlign;
 
       return (
         <div
@@ -1434,6 +1438,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               [`is-required`]: required
             },
             model?.errClassNames,
+            labelAlign === 'top' && 'Form-item--labelTop',
             setThemeClassName({
               ...props,
               name: 'wrapperCustomStyle',

packages/amis-editor-core/src/component/Panel/RightPanels.tsx

@@ -86,7 +86,7 @@ export class RightPanels extends React.Component<
           info: node?.info,
           path: node?.path,
           node: node,
-          value: store.value,
+          value: store.panelsValue,
           onChange: this.handlePanelChangeValue,
           store: store,
           manager: manager,

packages/amis-editor-core/src/store/editor.ts

@@ -589,6 +589,14 @@ export const MainStore = types
         return this.getValueOf(self.activeId);
       },
 
+      get panelsValue() {
+        let newValue = this.value;
+        if (self.isMobile && newValue && newValue.mobile) {
+          newValue = Object.assign({}, newValue, newValue.mobile);
+        }
+        return newValue;
+      },
+
       getValueOf(id: string) {
         const schema = JSONGetById(self.schema, id);
         const data = JSONPipeOut(schema, false);
@@ -1601,7 +1609,7 @@ export const MainStore = types
 
         // 通常 Panel 和 codeEditor 过来都有 diff 信息
         if (diff) {
-          const result = patchDiff(origin, diff);
+          const result = patchDiff(origin, diff, self.isMobile);
           let schema = JSONUpdate(self.schema, id, JSONPipeIn(result), true);
           schema = changeFilter?.(schema, value, id, diff) || schema;
           this.traceableSetSchema(schema, noTrace);

packages/amis-editor-core/src/store/node.ts

@@ -717,7 +717,7 @@ export const EditorNode = types
         let schema = root.getSchema(info.id);
         let patched = schema;
 
-        if (!patched?.id) {
+        if (!patched?.id && patched?.type) {
           patched = {...patched, id: 'u:' + guid()};
         }
 

packages/amis-editor-core/src/util.ts

@@ -930,21 +930,34 @@ export function diff(
   return DeepDiff.diff(left, right, prefilter);
 }
 
-export function patchDiff(left: any, changes: Array<DiffChange> | undefined) {
+export function patchDiff(
+  left: any,
+  changes: Array<DiffChange> | undefined,
+  isMobile: boolean = false
+): any {
   if (!changes) {
     return left;
   }
 
   return changes.reduce(
-    (target: any, change: DiffChange) => applyChange(target, left, change),
+    (target: any, change: DiffChange) =>
+      applyChange(target, left, change, isMobile),
     left
   );
 }
 
+// 移动端需要写入 mobile.schema 的属性
+export const MOBILE_SCHEMA_KEYS = ['mode', 'labelAlign'];
+
 /**
  * 因为左侧是个不可变动的对象，所以先 copy 了对应的属性，再传给 DeepDiff.applyChange
  */
-function applyChange(target: any, source: any, change: DiffChange) {
+function applyChange(
+  target: any,
+  source: any,
+  change: DiffChange,
+  isMobile: boolean = false
+): any {
   if (target && Array.isArray(change?.path)) {
     target = target === source ? {...target} : target;
 
@@ -977,7 +990,18 @@ function applyChange(target: any, source: any, change: DiffChange) {
       }
     );
 
-    DeepDiff.applyChange(target, source, change);
+    let changePath = change.path.concat();
+    if (isMobile) {
+      const lastKey = changePath[changePath.length - 1];
+      if (MOBILE_SCHEMA_KEYS.includes(lastKey)) {
+        changePath = ['mobile', ...changePath];
+      }
+    }
+
+    DeepDiff.applyChange(target, source, {
+      ...change,
+      path: changePath
+    });
   }
 
   return target;

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

@@ -592,8 +592,7 @@
     }
 
     .#{$ns}Form-label {
-      flex: 0 0 28%;
-      max-width: 28%;
+      width: 28%;
       min-height: 1px;
       text-align: left;
       padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
@@ -614,6 +613,9 @@
         }
       }
     }
+    .#{$ns}Form-label--right {
+      text-align: right;
+    }
 
     .#{$ns}Form-description {
       font-size: var(--fontSizeBase);
@@ -833,6 +835,9 @@
       min-height: 0;
     }
   }
+  .#{$ns}Form-item--labelTop {
+    flex-direction: column;
+  }
 
   .#{$ns}Form-groupColumn {
     margin-bottom: 0;