From 34280372c508770161ae9985b84e24857da206dc Mon Sep 17 00:00:00 2001 From: zhangtao07 Date: Thu, 4 Jan 2024 15:49:10 +0800 Subject: [PATCH 1/4] =?UTF-8?q?flex=E5=AE=B9=E5=99=A8=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/plugin/Layout/FlexPluginBase.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 4b35d1593..975cf2449 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -17,13 +17,13 @@ export const defaultFlexColumnSchema = (title?: string) => { return { type: 'container', body: [], - size: 'xs', + size: 'none', style: { position: 'static', display: 'block', flex: '1 1 auto', flexGrow: 1, - flexBasis: 'auto' + flexBasis: 0 }, wrapperBody: false, isFixedHeight: false, @@ -40,7 +40,7 @@ const defaultFlexPreviewSchema = (title?: string) => { style: { display: 'block', flex: '1 1 auto', - flexBasis: 'auto', + flexBasis: 0, textAlign: 'center', marginRight: 10 }, @@ -53,14 +53,15 @@ const defaultFlexContainerSchema = ( flexItemSchema: (title?: string) => any = defaultFlexColumnSchema ) => ({ type: 'flex', - className: 'p-1', items: [ flexItemSchema('第一列'), flexItemSchema('第二列'), flexItemSchema('第三列') ], style: { - position: 'relative' + position: 'relative', + rowGap: '10px', + columnGap: '10px' } }); @@ -131,6 +132,15 @@ export class FlexPluginBase extends LayoutBasePlugin { getSchemaTpl('layout:flex-wrap'), + getSchemaTpl('layout:flex-basis', { + label: '行间隔', + name: 'style.rowGap' + }), + getSchemaTpl('layout:flex-basis', { + label: '列间隔', + name: 'style.columnGap' + }), + ...(isFlexItem ? [ getSchemaTpl('layout:flex', { From 8d55b218474669def3642e6a4131360a2ee1e9dc Mon Sep 17 00:00:00 2001 From: zhangtao07 Date: Thu, 4 Jan 2024 16:56:20 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=B9=E5=99=A8=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=8D=E7=9B=B4=E6=8E=A5=E6=9B=BF=E6=8D=A2=20&=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E5=8F=B3=E9=94=AE=E6=B8=85=E7=A9=BA=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/src/manager.ts | 42 ++++++++++--------- .../src/plugin/BasicToolbar.tsx | 7 ++++ 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/packages/amis-editor-core/src/manager.ts b/packages/amis-editor-core/src/manager.ts index fc60f610d..83ec8a1b1 100644 --- a/packages/amis-editor-core/src/manager.ts +++ b/packages/amis-editor-core/src/manager.ts @@ -915,26 +915,28 @@ export class EditorManager { const curElemSchema = schemaData || subRenderer?.scaffold; const isSpecialLayout = this.isSpecialLayout(curElemSchema); - if ( - (node.type === 'wrapper' || node.type === 'container') && - node.schema?.body?.length === 0 && - curElemSchema?.type === 'flex' && - !node.schema?.isFreeContainer && - !isSpecialLayout - ) { - // 布局能力提升: 点击插入新元素，当wrapper为空插入布局容器时，自动改为置换，避免过多层级 - this.replaceChild( - curActiveId, - curElemSchema, - subRenderer, - store.insertRegion, - reGenerateId - ); - setTimeout(() => { - this.updateConfigPanel(); - }, 0); - return; - } + + // 不直接替换容器 + // if ( + // (node.type === 'wrapper' || node.type === 'container') && + // node.schema?.body?.length === 0 && + // curElemSchema?.type === 'flex' && + // !node.schema?.isFreeContainer && + // !isSpecialLayout + // ) { + // // 布局能力提升: 点击插入新元素，当wrapper为空插入布局容器时，自动改为置换，避免过多层级 + // this.replaceChild( + // curActiveId, + // curElemSchema, + // subRenderer, + // store.insertRegion, + // reGenerateId + // ); + // setTimeout(() => { + // this.updateConfigPanel(); + // }, 0); + // return; + // } const parentNode = node.parent as EditorNodeType; // 父级节点 diff --git a/packages/amis-editor-core/src/plugin/BasicToolbar.tsx b/packages/amis-editor-core/src/plugin/BasicToolbar.tsx index 8d9bdd215..5ac9fc1dd 100644 --- a/packages/amis-editor-core/src/plugin/BasicToolbar.tsx +++ b/packages/amis-editor-core/src/plugin/BasicToolbar.tsx @@ -518,6 +518,13 @@ export class BasicToolbarPlugin extends BasePlugin { }); } } + if (node.type === 'container') { + menus.push({ + label: '清空容器', + disabled: !node.schema.body?.length, + onSelect: () => manager.emptyRegion(id, 'body') + }); + } menus.push({ label: '替换组件', From f858f95bde05dcd98c026c65dd1c5583617c1527 Mon Sep 17 00:00:00 2001 From: zhangtao07 Date: Thu, 4 Jan 2024 20:07:17 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AD=90=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E8=BF=9B=E5=85=A5=E6=97=B6=E9=AB=98=E4=BA=AE?= =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E4=B8=8D=E5=87=86=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-editor-core/src/component/Editor.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/amis-editor-core/src/component/Editor.tsx b/packages/amis-editor-core/src/component/Editor.tsx index 222d6d1bb..2b79cdca7 100644 --- a/packages/amis-editor-core/src/component/Editor.tsx +++ b/packages/amis-editor-core/src/component/Editor.tsx @@ -210,7 +210,13 @@ export default class Editor extends Component { } componentDidMount() { - if (!this.props.isSubEditor) { + const store = this.manager.store; + if (this.props.isSubEditor) { + // 等待子编辑器动画结束重新获取高亮组件位置 + setTimeout(() => { + store.calculateHighlightBox(store.highlightNodes.map(node => node.id)); + }, 500); + } else { this.manager.trigger('init', { data: this.manager }); From ff94f7795a5cf4d68a31ad725f9c2a00c483481f Mon Sep 17 00:00:00 2001 From: zhangtao07 Date: Fri, 5 Jan 2024 17:50:40 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E5=A4=B4=E5=83=8F=E5=8D=A0?= =?UTF-8?q?=E4=BD=8D=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/avatar.md | 31 +++++++++++----------- packages/amis-editor-core/scss/_mixin.scss | 8 ++++++ packages/amis-editor/src/plugin/Avatar.tsx | 9 ++++++- packages/amis/src/renderers/Avatar.tsx | 8 +++++- 4 files changed, 39 insertions(+), 17 deletions(-) diff --git a/docs/zh-CN/components/avatar.md b/docs/zh-CN/components/avatar.md index 005630476..f840b0aa3 100644 --- a/docs/zh-CN/components/avatar.md +++ b/docs/zh-CN/components/avatar.md @@ -243,21 +243,22 @@ src、text 都支持变量，可以从上下文中动态获取图片或文字， ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ----------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| className | `string` | | 外层 dom 的类名 | -| style | `object` | | 外层 dom 的样式 | -| fit | `'contain'` \| `'cover'` \| `'fill'` \| `'none'` \| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN [文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) | -| src | `string` | | 图片地址 | -| text | `string` | | 文字 | -| icon | `string` | `'fa fa-user'` | 图标 | -| shape | `'circle'` \| `'square'` \| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） | -| size | `number` \| `'default'` \| `'normal'` \| `'small'` | `'default'` | `'default' \| 'normal' \| 'small'`三种字符串类型代表不同大小（分别是 48、40、32），也可以直接数字表示 | -| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 | -| alt | `number` | | 图像无法显示时的替代文本 | -| draggable | `boolean` | | 图片是否允许拖动 | -| crossOrigin | `'anonymous'` \| `'use-credentials'` \| `''` | | 图片的 `CORS` 属性设置 | -| onError | `string` | | 图片加载失败的字符串，这个字符串是一个 New Function 内部执行的字符串，参数是 event（使用 event.nativeEvent 获取原生 dom 事件），这个字符串需要返回 boolean 值。设置 `"return ture;"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 | +| 属性名 | 类型 | 默认值 | 说明 | +| ------------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| className | `string` | | 外层 dom 的类名 | +| style | `object` | | 外层 dom 的样式 | +| fit | `'contain'` \| `'cover'` \| `'fill'` \| `'none'` \| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN [文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) | +| src | `string` | | 图片地址 | +| defaultAvatar | `string` | | 占位图 | +| text | `string` | | 文字 | +| icon | `string` | `'fa fa-user'` | 图标 | +| shape | `'circle'` \| `'square'` \| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） | +| size | `number` \| `'default'` \| `'normal'` \| `'small'` | `'default'` | `'default' \| 'normal' \| 'small'`三种字符串类型代表不同大小（分别是 48、40、32），也可以直接数字表示 | +| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 | +| alt | `number` | | 图像无法显示时的替代文本 | +| draggable | `boolean` | | 图片是否允许拖动 | +| crossOrigin | `'anonymous'` \| `'use-credentials'` \| `''` | | 图片的 `CORS` 属性设置 | +| onError | `string` | | 图片加载失败的字符串，这个字符串是一个 New Function 内部执行的字符串，参数是 event（使用 event.nativeEvent 获取原生 dom 事件），这个字符串需要返回 boolean 值。设置 `"return ture;"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 | ## 事件表 diff --git a/packages/amis-editor-core/scss/_mixin.scss b/packages/amis-editor-core/scss/_mixin.scss index eb372f298..ef5a58a0d 100644 --- a/packages/amis-editor-core/scss/_mixin.scss +++ b/packages/amis-editor-core/scss/_mixin.scss @@ -81,6 +81,14 @@ background-color: #f7f7f9; } + fieldset { + margin-bottom: var(--Form-item-gap); + + .cxd-Collapse-content { + background-color: transparent; + } + } + &.right::after { right: 12px; left: auto; diff --git a/packages/amis-editor/src/plugin/Avatar.tsx b/packages/amis-editor/src/plugin/Avatar.tsx index 6de0cedc7..928a7e275 100644 --- a/packages/amis-editor/src/plugin/Avatar.tsx +++ b/packages/amis-editor/src/plugin/Avatar.tsx @@ -159,6 +159,7 @@ export class AvatarPlugin extends BasePlugin { onChange: (value: any, origin: any, item: any, form: any) => { form.setValues({ src: undefined, + defaultAvatar: undefined, fit: 'cover', text: undefined, gap: 4, @@ -182,7 +183,13 @@ export class AvatarPlugin extends BasePlugin { type: 'input-url' }, name: 'src', - label: '链接', + label: '头像地址', + visibleOn: 'data.showtype === "image"' + }), + // 占位图片 + getSchemaTpl('imageUrl', { + name: 'defaultAvatar', + label: '默认头像', visibleOn: 'data.showtype === "image"' }), { diff --git a/packages/amis/src/renderers/Avatar.tsx b/packages/amis/src/renderers/Avatar.tsx index 06d597ab9..d6fecb21f 100644 --- a/packages/amis/src/renderers/Avatar.tsx +++ b/packages/amis/src/renderers/Avatar.tsx @@ -34,6 +34,11 @@ export interface AvatarSchema extends BaseSchema { */ src?: string; + /** + * 默认头像 + */ + defaultAvatar?: string; + /** * 图标 */ @@ -113,6 +118,7 @@ export class AvatarField extends React.Component { className, classnames: cx, src, + defaultAvatar, icon = 'fa fa-user', fit, shape, @@ -153,7 +159,7 @@ export class AvatarField extends React.Component { style={style} className={className} classnames={cx} - src={src} + src={src || defaultAvatar} icon={icon} fit={fit} shape={shape}