diff --git a/packages/amis-editor-core/scss/_renderers.scss b/packages/amis-editor-core/scss/_renderers.scss index 034f2d540dd..a263f8693c0 100644 --- a/packages/amis-editor-core/scss/_renderers.scss +++ b/packages/amis-editor-core/scss/_renderers.scss @@ -244,7 +244,7 @@ // 左侧组件面板/info提示弹窗 .ae-RendererThumb { max-width: 328px; - min-height: 120px; + min-height: 70px; padding: 5px; font-size: 12px; color: #151b26; @@ -271,7 +271,7 @@ .ae-Renderer-preview { position: relative; max-height: 200px; - overflow: hidden; + // overflow: hidden; } } diff --git a/packages/amis-editor/src/plugin/Audio.tsx b/packages/amis-editor/src/plugin/Audio.tsx index 126d903aa14..8c397849efa 100644 --- a/packages/amis-editor/src/plugin/Audio.tsx +++ b/packages/amis-editor/src/plugin/Audio.tsx @@ -13,6 +13,7 @@ export class AudioPlugin extends BasePlugin { name = '音频'; isBaseComponent = true; description = '音频控件,可以用来播放各种音频文件。'; + docLink = '/amis/zh-CN/components/audio'; tags = ['功能']; icon = 'fa fa-music'; pluginIcon = 'audio-plugin'; diff --git a/packages/amis-editor/src/plugin/CollapseGroup.tsx b/packages/amis-editor/src/plugin/CollapseGroup.tsx index ead458a1d29..26ff862903d 100644 --- a/packages/amis-editor/src/plugin/CollapseGroup.tsx +++ b/packages/amis-editor/src/plugin/CollapseGroup.tsx @@ -21,6 +21,7 @@ export class CollapseGroupPlugin extends BasePlugin { isBaseComponent = true; description = '折叠面板,当信息量较大且分类较多时,可使用折叠面板进行分类收纳。'; + docLink = '/amis/zh-CN/components/collapse'; tags = ['布局容器']; icon = 'fa fa-align-justify'; pluginIcon = 'collapse-plugin'; diff --git a/packages/amis-editor/src/plugin/Container.tsx b/packages/amis-editor/src/plugin/Container.tsx index af37db808bf..3eb368d4afc 100644 --- a/packages/amis-editor/src/plugin/Container.tsx +++ b/packages/amis-editor/src/plugin/Container.tsx @@ -23,6 +23,7 @@ export class ContainerPlugin extends LayoutBasePlugin { name = '容器'; isBaseComponent = true; description = '一个简单的容器,可以将多个渲染器放置在一起。'; + docLink = '/amis/zh-CN/components/container'; tags = ['布局容器']; order = -2; icon = 'fa fa-square-o'; diff --git a/packages/amis-editor/src/plugin/Date.tsx b/packages/amis-editor/src/plugin/Date.tsx index ee85afa97d6..7d232a0d9df 100644 --- a/packages/amis-editor/src/plugin/Date.tsx +++ b/packages/amis-editor/src/plugin/Date.tsx @@ -42,6 +42,7 @@ export class DatePlugin extends BasePlugin { isBaseComponent = true; description = '主要用来关联字段名做日期展示,支持各种格式如:X(时间戳),YYYY-MM-DD HH:mm:ss。'; + docLink = '/amis/zh-CN/components/date'; tags = ['展示']; icon = 'fa fa-calendar'; pluginIcon = 'date-plugin'; diff --git a/packages/amis-editor/src/plugin/Datetime.tsx b/packages/amis-editor/src/plugin/Datetime.tsx index 76b398260c4..cc1c101a498 100644 --- a/packages/amis-editor/src/plugin/Datetime.tsx +++ b/packages/amis-editor/src/plugin/Datetime.tsx @@ -45,7 +45,7 @@ export class DatetimePlugin extends DatePlugin { name = '日期时间展示'; isBaseComponent = true; pluginIcon = 'datetime-plugin'; - + docLink = '/amis/zh-CN/components/date'; previewSchema = { ...this.scaffold, format: 'YYYY-MM-DD HH:mm:ss', diff --git a/packages/amis-editor/src/plugin/Divider.tsx b/packages/amis-editor/src/plugin/Divider.tsx index 268bbffe30a..01824291b28 100644 --- a/packages/amis-editor/src/plugin/Divider.tsx +++ b/packages/amis-editor/src/plugin/Divider.tsx @@ -22,6 +22,7 @@ export class DividerPlugin extends BasePlugin { icon = 'fa fa-minus'; pluginIcon = 'divider-plugin'; description = '用来展示一个分割线,可用来做视觉上的隔离。'; + docLink = '/amis/zh-CN/components/divider'; scaffold = { type: 'divider' }; diff --git a/packages/amis-editor/src/plugin/Each.tsx b/packages/amis-editor/src/plugin/Each.tsx index dfb94205102..f8f4851f150 100644 --- a/packages/amis-editor/src/plugin/Each.tsx +++ b/packages/amis-editor/src/plugin/Each.tsx @@ -20,6 +20,7 @@ export class EachPlugin extends BasePlugin { memberImmutable = true; description = '功能渲染器,可以基于现有变量循环输出渲染器。'; searchKeywords = '循环渲染器'; + docLink = '/amis/zh-CN/components/each'; tags = ['功能']; icon = 'fa fa-repeat'; pluginIcon = 'each-plugin'; diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx index 64aa31b9851..8ab46bab4ff 100644 --- a/packages/amis-editor/src/plugin/Form/InputText.tsx +++ b/packages/amis-editor/src/plugin/Form/InputText.tsx @@ -41,7 +41,7 @@ export class TextControlPlugin extends BasePlugin { description = '文本输入框,支持普通文本、密码、URL、邮箱等多种内容输入'; - docLink = '/amis/zh-CN/components/form/text'; + docLink = '/amis/zh-CN/components/form/input-text'; tags = ['表单项']; diff --git a/packages/amis-editor/src/plugin/IFrame.tsx b/packages/amis-editor/src/plugin/IFrame.tsx index 20d2e95b4cc..fd68dd296eb 100644 --- a/packages/amis-editor/src/plugin/IFrame.tsx +++ b/packages/amis-editor/src/plugin/IFrame.tsx @@ -18,6 +18,7 @@ export class IFramePlugin extends BasePlugin { name = 'iFrame'; isBaseComponent = true; description = '可以用来嵌入现有页面。'; + docLink = '/amis/zh-CN/components/iframe'; tags = ['功能']; icon = 'fa fa-window-maximize'; pluginIcon = 'iframe-plugin'; diff --git a/packages/amis-editor/src/plugin/Image.tsx b/packages/amis-editor/src/plugin/Image.tsx index bda049678de..7daef8a26cc 100644 --- a/packages/amis-editor/src/plugin/Image.tsx +++ b/packages/amis-editor/src/plugin/Image.tsx @@ -21,6 +21,7 @@ export class ImagePlugin extends BasePlugin { isBaseComponent = true; description = '可以用来展示一张图片,支持静态设置图片地址,也可以配置 name 与变量关联。'; + docLink = '/amis/zh-CN/components/image'; tags = ['展示']; icon = 'fa fa-photo'; pluginIcon = 'image-plugin'; diff --git a/packages/amis-editor/src/plugin/Images.tsx b/packages/amis-editor/src/plugin/Images.tsx index 2cc571fe078..1e0349b9145 100644 --- a/packages/amis-editor/src/plugin/Images.tsx +++ b/packages/amis-editor/src/plugin/Images.tsx @@ -14,6 +14,7 @@ export class ImagesPlugin extends BasePlugin { name = '图片集'; isBaseComponent = true; description = '展示多张图片'; + docLink = '/amis/zh-CN/components/images'; tags = ['展示']; icon = 'fa fa-clone'; pluginIcon = 'images-plugin'; diff --git a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx index 8b6ecedd704..a7ad8d11094 100644 --- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx +++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx @@ -30,19 +30,39 @@ export const defaultFlexColumnSchema = (title?: string) => { isFixedWidth: false }; }; + +const defaultFlexPreviewSchema = (title?: string) => { + return { + type: 'tpl', + tpl: title, + wrapperComponent: '', + className: 'bg-light center', + style: { + display: 'block', + flex: '1 1 auto', + flexBasis: 'auto', + textAlign: 'center', + marginRight: 10 + }, + inline: false + }; +}; + // 默认的布局容器Schema -const defaultFlexContainerSchema = { +const defaultFlexContainerSchema = ( + flexItemSchema: (title?: string) => any = defaultFlexColumnSchema +) => ({ type: 'flex', className: 'p-1', items: [ - defaultFlexColumnSchema('第一列'), - defaultFlexColumnSchema('第二列'), - defaultFlexColumnSchema('第三列') + flexItemSchema('第一列'), + flexItemSchema('第二列'), + flexItemSchema('第三列') ], style: { position: 'relative' } -}; +}); export class FlexPluginBase extends LayoutBasePlugin { static id = 'FlexPluginBase'; @@ -59,10 +79,8 @@ export class FlexPluginBase extends LayoutBasePlugin { '布局容器 是基于 CSS Flex 实现的布局效果,它比 Grid 和 HBox 对子节点位置的可控性更强,比用 CSS 类的方式更易用'; docLink = '/amis/zh-CN/components/flex'; tags = ['布局容器']; - scaffold: any = defaultFlexContainerSchema; - previewSchema = { - ...this.scaffold - }; + scaffold: any = defaultFlexContainerSchema(); + previewSchema = defaultFlexContainerSchema(defaultFlexPreviewSchema); panelTitle = '布局容器'; @@ -266,7 +284,7 @@ export class FlexPluginBase extends LayoutBasePlugin { className: 'ae-InsertBefore is-vertical', onClick: () => this.manager.appendSiblingSchema( - defaultFlexContainerSchema, + defaultFlexContainerSchema(), true, true ) @@ -279,7 +297,7 @@ export class FlexPluginBase extends LayoutBasePlugin { className: 'ae-InsertAfter is-vertical', onClick: () => this.manager.appendSiblingSchema( - defaultFlexContainerSchema, + defaultFlexContainerSchema(), false, true ) diff --git a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx index 4937696e9d8..cbaf38fe33a 100644 --- a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx +++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx @@ -8,7 +8,7 @@ export default class Layout_fixed extends FlexPluginBase { name = '悬浮容器'; isBaseComponent = true; pluginIcon = 'layout-fixed-plugin'; - description = '悬浮容器: 基于 CSS Flex 实现的特殊布局容器。'; + description = '悬浮容器: 基于 CSS Fixed 实现的特殊布局容器。'; order = 0; scaffold: any = { type: 'container', @@ -25,6 +25,16 @@ export default class Layout_fixed extends FlexPluginBase { wrapperBody: false, originPosition: 'right-bottom' }; + previewSchema: any = { + type: 'container', + body: [], + style: { + position: 'static', + display: 'block' + }, + size: 'none', + wrapperBody: false + }; panelTitle = '悬浮容器'; } diff --git a/packages/amis-editor/src/plugin/Pagination.tsx b/packages/amis-editor/src/plugin/Pagination.tsx index 6c22895b0e9..949bc7ed76f 100644 --- a/packages/amis-editor/src/plugin/Pagination.tsx +++ b/packages/amis-editor/src/plugin/Pagination.tsx @@ -21,6 +21,7 @@ export class PaginationPlugin extends BasePlugin { name = '分页组件'; isBaseComponent = true; description = '分页组件,可以对列表进行分页展示,提高页面性能'; + docLink = '/amis/zh-CN/components/pagination'; tags = ['展示']; icon = 'fa fa-window-minimize'; lastLayoutSetting = ['pager']; diff --git a/packages/amis-editor/src/plugin/Time.tsx b/packages/amis-editor/src/plugin/Time.tsx index 9b9963a753f..b35d9d97b44 100644 --- a/packages/amis-editor/src/plugin/Time.tsx +++ b/packages/amis-editor/src/plugin/Time.tsx @@ -40,7 +40,7 @@ export class TimePlugin extends DatePlugin { isBaseComponent = true; pluginIcon = 'time-plugin'; - + docLink = '/amis/zh-CN/components/date'; scaffold = { type: 'time', value: Math.round(Date.now() / 1000),