fixed: 组件面板搜索功能优化

baidu · Nov 2, 2023 · 5ece1f3 · 5ece1f3
1 parent ac11417
commit 5ece1f3
Show file tree

Hide file tree

Showing 16 changed files with 55 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,6 +21,7 @@ export class ImagePlugin extends BasePlugin {
   isBaseComponent = true;
   description =
     '可以用来展示一张图片，支持静态设置图片地址，也可以配置 <code>name</code> 与变量关联。';
+  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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),