amis-saas-7948:log组件配置面板

Change-Id: Ie8a9bf06264b22b2829859d7033cdc735b2fbca6

packages/amis-editor/src/plugin/Log.tsx

@@ -3,7 +3,7 @@
  */
 import {registerEditorPlugin} from 'amis-editor-core';
 import {BaseEventContext, BasePlugin} from 'amis-editor-core';
-import {getSchemaTpl} from 'amis-editor-core';
+import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
 
 export class LogPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -20,31 +20,123 @@ export class LogPlugin extends BasePlugin {
   tags = ['展示'];
   previewSchema = {
     type: 'log',
-    height: 120
+    height: 120,
+    autoScroll: true
   };
   scaffold: any = {
-    type: 'log'
+    type: 'log',
+    autoScroll: true,
+    height: 500,
+    encoding: 'utf-8'
   };
-
+  panelJustify = true;
   panelTitle = '日志';
   panelBodyCreator = (context: BaseEventContext) => {
+    const renderer: any = context.info.renderer;
     return getSchemaTpl('tabs', [
       {
-        title: '常规',
-        body: [
-          getSchemaTpl('api', {
-            label: '日志数据源',
-            name: 'source'
-          })
-        ]
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('apiControl', {
+                required: true,
+                name: 'source',
+                renderLabel: true,
+                label: tipedLabel('数据源', `返回日志信息的服务，后端需要通过流的方式返回结果。
+                  可参考<a target="_blank" href="https://baidu.github.io/amis/zh-CN/components/log#%E5%90%8E%E7%AB%AF%E5%AE%9E%E7%8E%B0%E5%8F%82%E8%80%83">示例</a>`)
+              }),
+              {
+                type: 'input-text',
+                label: tipedLabel('文本编码', '返回内容的字符编码，例如 UTF-8、ISO-8859-2、KOI8-R、GBK等等。默认UTF-8'),
+                name: 'encoding'
+              },
+              getSchemaTpl('placeholder', {
+                label: '加载提示',
+                placeholder: '加载中'
+              }),
+              {
+                type: 'switch',
+                label: tipedLabel('跟随底部', '自动滚动到底部，方便查看最新日志内容'),
+                name: 'autoScroll',
+                value: true,
+                inputClassName: 'is-inline'
+              },
+              {
+                label: tipedLabel('操作', '可在日志顶部添加以下操作按钮'),
+                type: 'checkboxes',
+                name: 'operation',
+                inline: false,
+                options: [
+                  {
+                    label: '停止',
+                    value: 'stop'
+                  },
+                  {
+                    label: '刷新',
+                    value: 'restart'
+                  },
+                  {
+                    label: '清空',
+                    value: 'clear'
+                  },
+                  {
+                    label: '隐藏行号',
+                    value: 'showLineNumber'
+                  },
+                  {
+                    label: '查询',
+                    value: 'filter'
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            title: '性能优化',
+            body: [
+              {
+                type: 'input-number',
+                label: tipedLabel('每行高度', `设置每行高度，这时就会默认启用虚拟渲染，避免渲染卡顿。
+                    <ul><li>优点：仍然可以查看所有日志</li>
+                    <li>缺点：如果某一行日志很长也不会自动折行，会出现水平滚动条</li></ul>
+                `),
+                name: 'rowHeight',
+                min: 1
+              },
+              {
+                type: 'input-number',
+                label: tipedLabel('显示行数', `限制最大显示行数，避免渲染卡顿，默认不限制。
+                    <ul><li>优点：某一行日志很长的时候会自动折行</li>
+                    <li>缺点：无法查看之前的日志</li></ul>
+                `),
+                name: 'maxLength',
+                min: 1
+              }
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: false})
+        ])
       },
       {
         title: '外观',
-        body: [getSchemaTpl('className')]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              {
+                type: 'input-number',
+                label: tipedLabel('高度', '展示区域高度'),
+                name: 'height',
+                min: 1
+              }
+            ]
+          },
+          getSchemaTpl('style:classNames', {
+            isFormItem: false
+          })
+        ])
       }
     ]);
   };

packages/amis-editor/src/renderer/APIControl.tsx

@@ -985,7 +985,8 @@ export default class APIControl extends React.Component<
       labelField = 'label',
       useMobileUI,
       popOverContainer,
-      env
+      env,
+      renderLabel
     } = this.props;
     let {apiStr, selectedItem, loading} = this.state;
     selectedItem =
@@ -1003,7 +1004,7 @@ export default class APIControl extends React.Component<
             })
           ) : (
             <>
-              {this.renderHeader()}
+              {!renderLabel && this.renderHeader()}
 
               <div className="ae-ApiControl-content" key="content">
                 <div className={cx('ae-ApiControl-input')}>