diff --git a/packages/amis-core/src/envOverwrite.ts b/packages/amis-core/src/envOverwrite.ts index d49e93fd9a1..72f98d0bde9 100644 --- a/packages/amis-core/src/envOverwrite.ts +++ b/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; diff --git a/packages/amis-core/src/renderers/Item.tsx b/packages/amis-core/src/renderers/Item.tsx index 14f1959481c..33fdf0982df 100644 --- a/packages/amis-core/src/renderers/Item.tsx +++ b/packages/amis-core/src/renderers/Item.tsx @@ -1301,6 +1301,7 @@ export class FormItemWrap extends React.Component { }`]: 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 { } = props; description = description || desc; + const labelAlign = + (props.labelAlign !== 'inherit' && props.labelAlign) || + props.formLabelAlign; return (
{ [`is-required`]: required }, model?.errClassNames, + labelAlign === 'top' && 'Form-item--labelTop', setThemeClassName({ ...props, name: 'wrapperCustomStyle', diff --git a/packages/amis-editor-core/src/component/Panel/RightPanels.tsx b/packages/amis-editor-core/src/component/Panel/RightPanels.tsx index 436337c4a82..d12b6252b3c 100644 --- a/packages/amis-editor-core/src/component/Panel/RightPanels.tsx +++ b/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, diff --git a/packages/amis-editor-core/src/store/editor.ts b/packages/amis-editor-core/src/store/editor.ts index 02a4d2d0127..11f16398c9b 100644 --- a/packages/amis-editor-core/src/store/editor.ts +++ b/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); diff --git a/packages/amis-editor-core/src/store/node.ts b/packages/amis-editor-core/src/store/node.ts index 9df78a1f77c..ba54c25ab4c 100644 --- a/packages/amis-editor-core/src/store/node.ts +++ b/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()}; } diff --git a/packages/amis-editor-core/src/util.ts b/packages/amis-editor-core/src/util.ts index df30bf3039b..e379fcf7a9c 100644 --- a/packages/amis-editor-core/src/util.ts +++ b/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 | undefined) { +export function patchDiff( + left: any, + changes: Array | 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; diff --git a/packages/amis-ui/scss/components/form/_form.scss b/packages/amis-ui/scss/components/form/_form.scss index b9a736dd422..fd10db64c47 100644 --- a/packages/amis-ui/scss/components/form/_form.scss +++ b/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;