@cniot/mdd-editor 0.2.0-beta.9 → 0.3.0

package/src/template/detail/components/DetailColumns.jsx

@@ -1,16 +1,27 @@
 import React from 'react';
-import { Select, Form, CnNumberPicker, Dialog, CnSwitch, CnRadioGroup, CnRadio, Collapse, Icon, Balloon, } from '@cainiaofe/cn-ui';
+import {
+  Select,
+  Form,
+  CnNumberPicker,
+  CnTooltip,
+  Dialog,
+  CnSwitch,
+  CnRadioGroup,
+  CnRadio,
+  Collapse,
+  Icon,
+  Balloon,
+} from '@cainiaofe/cn-ui';
 
-import MddTableForm from '@src/components/mdd-table-form';
+import MddTableForm from '$src/components/mdd-table-form';
 import MultiAjaxSchemaForm from './MultiAjaxSchemaForm';
 import ActionPanel from './Actions';
-import useSwagger from '@src/hooks/useSwagger';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
-import MddTableSimpleArray from '@src/components/mdd-table-simple-array';
-import FormilySelect from '@src/components/formily-select';
-import TableFormProxy from '@src/components/ajax-schema-form/formily-table-form-proxy';
-import { columnsTypeOptions } from '../../const';
+import useSwagger from '$src/hooks/useSwagger';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import MddTableSimpleArray from '$src/components/mdd-table-simple-array';
+import FormilySelect from '$src/components/formily-select';
+import TableFormProxy from '$src/components/ajax-schema-form/formily-table-form-proxy';
 import styles from './DetailColumns.module.scss';
 
 const { Panel } = Collapse;
@@ -24,14 +35,17 @@ export default function DetailColumns(props) {
     data.set('hideCardTitle', true);
     forceUpdate();
 
-    return () => { data.set('hideCardTitle', false); forceUpdate(); };
-  }, [])
+    return () => {
+      data.set('hideCardTitle', false);
+      forceUpdate();
+    };
+  }, []);
 
   const onAddHandle = () => {
     data.add(
       {
         moduleName: '',
-        cols: 1,
+        hideSelfCard: true,
         params: [],
         canUpdateOtherColumns: true,
         canBeUpdated: true,
@@ -66,9 +80,18 @@ export default function DetailColumns(props) {
           <CnRadio value="column">上下布局</CnRadio>
         </CnRadioGroup>
       </Form.Item>
-      <Form.Item labelAlign="left" label="隐藏卡片头部" name="hideCardTitle">
-        <CnSwitch checked={data.get('hideCardTitle')} />
+      <Form.Item labelAlign="left" label="高度" name="height">
+        <CnNumberPicker defaultValue={data.get('height')} min={0} max={100} innerAfter="%" style={{ width: 90 }} />
+        <CnTooltip trigger={<Icon type="prompt" style={{ marginLeft: 6 }} />}>0-100 的整数，0 表示自动高度</CnTooltip>
       </Form.Item>
+      <Form.Item labelAlign="left" label="隐藏父级卡片" name="hideCard">
+        <CnSwitch checked={data.get('hideCard')} />
+      </Form.Item>
+      {!data.get('hideCard') && (
+        <Form.Item labelAlign="left" label="隐藏父级卡片头部" name="hideCardTitle">
+          <CnSwitch checked={data.get('hideCardTitle')} />
+        </Form.Item>
+      )}
       <Form.Item labelAlign="top" label="">
         <MddTableSimpleArray
           data={data.get('columnsBoxes')}
@@ -83,7 +106,8 @@ export default function DetailColumns(props) {
           }}
           onAdd={onAddHandle}
           onRemove={(index) => onRemoveHandle(index)}
-        // onRemove={onRemoveHandle}
+          otherInfo={{ columnsDirection: data.get('columnsDirection') }}
+          // onRemove={onRemoveHandle}
         />
       </Form.Item>
       {data.get('hideCardTitle') ? null : <ActionPanel schema={data} />}
@@ -91,100 +115,143 @@ export default function DetailColumns(props) {
   );
 }
 
-
 function customTitleRender(props) {
-  const { data, index, onChange, moduleDataSource } = props;
+  const { data, index, onChange, moduleDataSource, otherInfo = {} } = props;
 
-  return <div className={styles.title}>
-    <div className={styles.titleItem} >
-      <label className={styles.titleItemLabel}>模块地址</label>
-      <Select.AutoComplete
-        placeholder='请选择或者输入模块地址'
-        hasClear
-        size='small'
-        style={{
-          minWidth: 280,
-        }}
-        dataSource={moduleDataSource?.l4ModuleOptions || moduleDataSource || []}
-
-        value={data?.moduleName}
-        onChange={(v) => onChange({ ...data, moduleName: v })}
-      />
-    </div>
-    <div className={styles.titleItem}>
-      <label className={styles.titleItemLabel}>
-        <Balloon trigger={<div style={{ display: 'flex', alignItems: 'center' }}>占列数 <Icon type="help" size="small" /></div>} align="t">
-          <b>左右布局时，占列数之和应为24</b>
-        </Balloon>
-      </label>
-      <CnNumberPicker
-        size="small"
-        min={0}
-        max={24}
-        value={data?.cols}
-        onChange={(v) => onChange({ ...data, cols: v })}
-        placeholder="占列数 之和应为24"
-      />
+  return (
+    <div className={styles.title}>
+      <div className={styles.titleItem}>
+        <label className={styles.titleItemLabel}>模块地址</label>
+        <Select.AutoComplete
+          placeholder="请选择或者输入模块地址"
+          hasClear
+          size="small"
+          style={{
+            minWidth: 280,
+          }}
+          dataSource={moduleDataSource?.l4ModuleOptions || moduleDataSource || []}
+          value={data?.moduleName}
+          onChange={(v) => onChange({ ...data, moduleName: v })}
+        />
+      </div>
+      {otherInfo?.columnsDirection === 'row' && (
+        <div className={styles.titleItem}>
+          <label className={styles.titleItemLabel}>
+            <Balloon
+              trigger={
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  占列数 <Icon type="help" size="small" />
+                </div>
+              }
+              align="t"
+            >
+              <b>左右布局时，占列数之和应为24</b>
+            </Balloon>
+          </label>
+          <CnNumberPicker
+            size="small"
+            min={0}
+            max={24}
+            value={data?.cols}
+            onChange={(v) => onChange({ ...data, cols: v })}
+            placeholder="占列数 之和应为24"
+          />
+        </div>
+      )}
     </div>
-  </div>
+  );
 }
 
 const layoutConfig = {
   wrapperCol: { span: 16 },
-  labelCol: { span: 8 }
-}
+  labelCol: { span: 8 },
+};
 
 function contentRender(props) {
-  return <ContentRender {...props} />
+  return <ContentRender {...props} />;
 }
 
 const ContentRender = (props) => {
-  const { data, index, onChange } = props;
+  const { data, index, onChange, otherInfo = {} } = props;
   // const [_, forceUpdate] = React.useState({});
 
-  return <>
-    <Form.Item name=""
-      wrapperCol={{ span: 22 }}
-      labelCol={{ span: 2 }}
-      style={{ position: 'relative' }}
-      label={
-        <div>
-          参数
-          <a
-            rel="noreferrer"
-            target="_blank"
-            href="https://yuque.antfin.com/docs/share/b146be2b-dec0-4f0d-80e4-c11a34a701bc"
-            title="在vscode插件中按住ctrl再点击查看"
-            className="help-link"
-          >
-            帮助
-          </a>
-        </div>
-      }
-    >
-      <TableFormProxy
-        keyTitle={'key(参数名)'}
-        valueTitle={'value(参数值) - .$ALL 可获取整个动态对象'}
-        value={data?.params}
-        onChange={(v) => onChange({ index, record: { ...data, params: v } })}
-      />
-    </Form.Item>
-    <Collapse accordion>
-      <Panel
-        title={
-          <Balloon trigger={<div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>其他配置：<Icon type="help" size="small" /></div>} align="t">
-            配置以下属性后，方可在每个分栏中 使用【触发其他分栏刷新】事件，引擎会监听 并自动更新其他分栏（触发一个 detail:updateColumns 事件。若分栏为 FTP 类型 则支持自动刷新，其他页面类型暂不支持）。
-            <div><b>建议在每个分栏模块中写胶水代码，手动控制其他分栏刷新。</b></div>
-          </Balloon>
-        }
-      >
-        <Form.Item {...layoutConfig} label="可以触发其他分栏刷新" name="">
-          <CnSwitch
-            defaultChecked={data?.canUpdateOtherColumns}
-            onChange={(v) => onChange({ index, record: { ...data, canUpdateOtherColumns: v } })}
+  return (
+    <>
+      {otherInfo?.columnsDirection === 'column' && (
+        <Form.Item wrapperCol={{ span: 20 }} labelCol={{ span: 4 }} label="高度" name="">
+          <CnNumberPicker
+            min={0}
+            max={100}
+            innerAfter="%"
+            style={{ width: 90 }}
+            defaultValue={data?.height}
+            onChange={(v) => onChange({ index, record: { ...data, height: v } })}
           />
+          <CnTooltip trigger={<Icon type="prompt" style={{ marginLeft: 6 }} />}>
+            仅在上下布局中生效：0-100 的整数，0 表示自动高度
+          </CnTooltip>
         </Form.Item>
-        {/* <Form.Item {...layoutConfig} label={
+      )}
+      <Form.Item
+        name=""
+        wrapperCol={{ span: 20 }}
+        labelCol={{ span: 4 }}
+        style={{ position: 'relative' }}
+        label={
+          <div>
+            参数
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href="https://yuque.antfin.com/docs/share/b146be2b-dec0-4f0d-80e4-c11a34a701bc"
+              title="在vscode插件中按住ctrl再点击查看"
+              className="help-link"
+            >
+              帮助
+            </a>
+          </div>
+        }
+      >
+        <TableFormProxy
+          keyTitle={'key(参数名)'}
+          valueTitle={'value(参数值) - .$ALL 可获取整个动态对象'}
+          value={data?.params}
+          onChange={(v) => onChange({ index, record: { ...data, params: v } })}
+        />
+      </Form.Item>
+      <Form.Item wrapperCol={{ span: 20 }} labelCol={{ span: 4 }} label="隐藏 当前栏 卡片" name="">
+        <CnSwitch
+          defaultChecked={data?.hideSelfCard}
+          onChange={(v) => onChange({ index, record: { ...data, hideSelfCard: v } })}
+        />
+      </Form.Item>
+      <Collapse accordion>
+        <Panel
+          title={
+            <Balloon
+              trigger={
+                <div style={{ width: 'fit-content', display: 'flex', alignItems: 'center' }}>
+                  其他配置：
+                  <Icon type="help" size="small" />
+                </div>
+              }
+              align="t"
+            >
+              配置以下属性后，方可在每个分栏中 使用【触发其他分栏刷新】事件，引擎会监听 并自动更新其他分栏（触发一个
+              detail:updateColumns 事件。若分栏为 FTP 类型 则支持自动刷新，其他页面类型暂不支持）。
+              <div>
+                <b>建议在每个分栏模块中写胶水代码，手动控制其他分栏刷新。</b>
+              </div>
+            </Balloon>
+          }
+        >
+          <Form.Item {...layoutConfig} label="可以触发其他分栏刷新" name="">
+            <CnSwitch
+              defaultChecked={data?.canUpdateOtherColumns}
+              onChange={(v) => onChange({ index, record: { ...data, canUpdateOtherColumns: v } })}
+            />
+          </Form.Item>
+          {/* <Form.Item {...layoutConfig} label={
           <Balloon trigger={<div>可被其他分栏刷新<Icon type="help" size="small" /></div>} align="t">
             <b>以FTP页面格式 被更新，其他页面类型暂不支持</b>
           </Balloon>
@@ -194,23 +261,36 @@ const ContentRender = (props) => {
             onChange={(v) => onChange({ index, record: { ...data, canBeUpdated: v } })}
           />
         </Form.Item> */}
-        <Form.Item {...layoutConfig} label={'可被其他分栏刷新'} name="">
-          <CnSwitch
-            defaultChecked={data?.canBeUpdated}
-            onChange={(v) => onChange({ index, record: { ...data, canBeUpdated: v } })}
-          />
-        </Form.Item>
-        <Form.Item {...layoutConfig} label={
-          <Balloon trigger={<div >当前分栏为FTP时自动刷新<Icon type="help" size="small" /></div>} align="t">
-            <b>以FTP页面格式 被更新，其他页面类型暂不支持</b>
-          </Balloon>
-        } name="">
-          <CnSwitch
-            defaultChecked={data?.autoUpdateWhenIsFTP}
-            onChange={(v) => onChange({ index, record: { ...data, autoUpdateWhenIsFTP: v } })}
-          />
-        </Form.Item>
-      </Panel>
-    </Collapse>
-  </>
-}
+          <Form.Item {...layoutConfig} label={'可被其他分栏刷新'} name="">
+            <CnSwitch
+              defaultChecked={data?.canBeUpdated}
+              onChange={(v) => onChange({ index, record: { ...data, canBeUpdated: v } })}
+            />
+          </Form.Item>
+          <Form.Item
+            {...layoutConfig}
+            label={
+              <Balloon
+                trigger={
+                  <div>
+                    当前分栏为FTP时自动刷新
+                    <Icon type="help" size="small" />
+                  </div>
+                }
+                align="t"
+              >
+                <b>以FTP页面格式 被更新，其他页面类型暂不支持</b>
+              </Balloon>
+            }
+            name=""
+          >
+            <CnSwitch
+              defaultChecked={data?.autoUpdateWhenIsFTP}
+              onChange={(v) => onChange({ index, record: { ...data, autoUpdateWhenIsFTP: v } })}
+            />
+          </Form.Item>
+        </Panel>
+      </Collapse>
+    </>
+  );
+};

package/src/template/detail/components/DetailCustom.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Form, Input, Switch, Select } from '@cainiaofe/cn-ui';
 import ActionPanel from './Actions';
-import TableFormProxy from '@src/components/ajax-schema-form/table-form-proxy';
-import useModule from '@src/hooks/useModule';
+import TableFormProxy from '$src/components/ajax-schema-form/table-form-proxy';
+import useModule from '$src/hooks/useModule';
 
 /**
  * 自定义详情内容， 引入源码、其他页面等

package/src/template/detail/components/DetailTable.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Form, Dialog, Switch, CnMessage, Input, Icon } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
+import { Form, Dialog, Switch, CnMessage, Input, Icon, NumberPicker } from '@cainiaofe/cn-ui';
+import MddTableForm from '$src/components/mdd-table-form';
 import MultiAjaxSchemaForm from './MultiAjaxSchemaForm';
-import useSwagger from '@src/hooks/useSwagger';
-import buildSwaggerApiJson from '@src/utils/buildSwaggerApiJson';
-import buildFieldsToCompJson from '@src/utils/buildFieldsToCompJson';
-import MddForm from '@src/components/mdd-form';
+import useSwagger from '$src/hooks/useSwagger';
+import buildSwaggerApiJson from '$src/utils/buildSwaggerApiJson';
+import buildFieldsToCompJson from '$src/utils/buildFieldsToCompJson';
+import MddForm from '$src/components/mdd-form';
 import ActionPanel from './Actions';
 import { columnsTypeOptionsWithCnTable } from '../../const';
 
@@ -141,13 +141,18 @@ export default function DetailTable(props) {
         onChange={({ index, record }) => onPaginationChangeHandle({ index, record })}
       />
 
-      <Form.Item labelAlign="left" label="是否影藏通用顶部操作区:" name="hideCommonToolbar">
+      <Form.Item labelAlign="left" label="是否隐藏通用顶部操作区:" name="hideCommonToolbar">
         <Switch autoWidth size="small" defaultChecked={data.get('hideCommonToolbar')} />
       </Form.Item>
 
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>最大高度：</label>
-        <Input value={data.get('maxHeight')} size="small" onChange={(v) => tablePropsChange('maxHeight', v)} />
+        <NumberPicker
+          value={data.get('maxHeight')}
+          size="small"
+          onChange={(v) => tablePropsChange('maxHeight', v)}
+          min={0}
+        />
         <span className="mdd-tip">
           <Icon type="prompt" /> 该属性可以实现一屏展示，支持calc函数,eg： calc(100vh - 100px)
         </span>

package/src/template/detail/components/MultiAjaxSchemaForm.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon, Button, Box } from '@cainiaofe/cn-ui';
-import AjaxSchemaForm from '@src/components/ajax-schema-form';
+import AjaxSchemaForm from '$src/components/ajax-schema-form';
 
 // schema 是 detail-item 对象
 /**

package/src/template/edit-table/HeaderToolbar.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import MddTableForm from '@src/components/mdd-table-form';
+import MddTableForm from '$src/components/mdd-table-form';
 
 export default function HeaderToolbarPanel({ schema }) {
   const mddFormRef = React.useRef();
@@ -19,7 +19,8 @@ export default function HeaderToolbarPanel({ schema }) {
   const onAddHandle = () => {
     schema.add(
       {
-        type: 'batch-add',
+        // type: 'batch-add',
+        type: 'editButton',
         label: '批量新增',
         action: {
           type: 'drawer', // 目前必须是 drawer

package/src/template/edit-table/Table.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input, Switch, Icon } from '@cainiaofe/cn-ui';
-import MddTableForm from '@src/components/mdd-table-form';
+import { Input, Switch, Icon, NumberPicker } from '@cainiaofe/cn-ui';
+import MddTableForm from '$src/components/mdd-table-form';
 import { columnsTypeOptionsWithEditCnTable } from '../const';
 
 export default function TablePanel({ schema, swaggerFields = [] }) {
@@ -15,6 +15,8 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
   const primaryKey = schema.get('primaryKey');
   // 批量操作
   const columns = schema.get('columns');
+  // 显示序号
+  const showIndex = schema.get('showIndex');
 
   const onAddHandle = (key) => {
     switch (key) {
@@ -47,6 +49,11 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
     schema.update('', value, 'primaryKey');
   };
 
+  // 基础属性变更
+  const onBaseInfoChange = (key, value) => {
+    schema.update('', value, key);
+  };
+
   return (
     <div>
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
@@ -69,11 +76,57 @@ export default function TablePanel({ schema, swaggerFields = [] }) {
 
       <div style={{ marginLeft: '10px', marginBottom: 8 }}>
         <label>最大高度：</label>
-        <Input value={schema.get('maxHeight')} size="small" onChange={(v) => schema.update('', v, 'maxHeight')} />
+        <NumberPicker
+          value={schema.get('maxHeight')}
+          size="small"
+          onChange={(v) => schema.update('', v, 'maxHeight')}
+          min={0}
+        />
         <span className="mdd-tip">
           <Icon type="prompt" /> 该属性可以实现一屏展示，支持calc函数,eg： calc(100vh - 100px)
         </span>
       </div>
+
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否显示序号：</label>
+        <Switch autoWidth checked={showIndex} size="small" onChange={(v) => onBaseInfoChange('showIndex', v)} />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 纯前端自动序号{' '}
+        </span>
+      </div>
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否开启虚拟滚动：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('useVirtual')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('useVirtual', v)}
+        />
+      </div>
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否开启自动列宽：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('columnsAutoWidth')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('columnsAutoWidth', v)}
+        />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 如果有性能问题可以关闭该属性，同时手动设置列宽
+        </span>
+      </div>
+      <div style={{ marginLeft: '10px', marginBottom: 8 }}>
+        <label>是否隐藏通用顶部操作区：</label>
+        <Switch
+          autoWidth
+          checked={schema.get('hideCommonToolbar')}
+          size="small"
+          onChange={(v) => onBaseInfoChange('hideCommonToolbar', v)}
+        />
+        <span className="mdd-tip">
+          <Icon type="prompt" /> 是否隐藏table顶部操作区的通用操作按钮，比如全屏、斑马线、列设置、尺寸等
+        </span>
+      </div>
     </div>
   );
 }

package/src/template/formily-form-v2/FormInfo.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Form, NumberPicker, Select, Switch, Input } from '@cainiaofe/cn-ui';
-import MddForm from '@src/components/mdd-form';
+import MddForm from '$src/components/mdd-form';
 
 const labelDataSource = [
   {

package/src/template/formily-form-v2/FormItems.jsx

@@ -1,11 +1,7 @@
 import React from 'react';
-import MddTableForm, { PenetrateTypes } from '@src/components/mdd-table-form';
-import { componentOptions } from '../const';
-import { propFields } from '@src/common/comp-schema/fields/propFields';
-
-const FormComponentOptions = [...componentOptions];
-FormComponentOptions.splice(3, 0, { value: 'input-password', label: '密码输入框' });
-// FormComponentOptions.splice(8, 1); // 表单去除级联选择器
+import MddTableForm, { PenetrateTypes } from '$src/components/mdd-table-form';
+import { FormComponentOptions } from '../const';
+import { propFields } from '$src/common/comp-schema/fields/propFields';
 
 export default function FormItemsPanel({ schema, swaggerFields = [] }) {
   const mddFormRef = React.useRef();
@@ -56,7 +52,7 @@ export default function FormItemsPanel({ schema, swaggerFields = [] }) {
         ref={mddFormRef}
         data={fields || []}
         penetrateType={PenetrateTypes.FORM}
-        componentOptions={FormComponentOptions}
+        componentOptions={[...FormComponentOptions, , { value: 'blocks-form', label: '表单区块' }]}
         swaggerFieldDataSource={swaggerFields}
         title="配置表单项"
         onAdd={onAddHandle}

package/src/template/formilyform/components/AsyncDataSourceSetter/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 // import { Modal, Button } from 'antd';
 
-import DataSourceSelect from '@src/components/data-source-select';
+import DataSourceSelect from '$src/components/data-source-select';
 
 // const AsyncDataSourceSetter = observer((props) => {
 //   const [visible, setVisible] = useState(false);

package/src/template/formilyform/components/SubmitActionSetter/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 // import { Modal, Button } from 'antd';
 
-import ParamsSelect from '@src/components/params-select';
+import ParamsSelect from '$src/components/params-select';
 
 // const SubmitActionSetter = observer((props) => {
 //   const [visible, setVisible] = useState(false);

package/src/template/ftp/DataSource.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import DataSourceSelect from '@src/components/data-source-select';
+import DataSourceSelect from '$src/components/data-source-select';
 
 function DataSource({ schema }) {
   const [_, forceUpdate] = React.useState({});

package/src/template/ftp/Filter.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Form, NumberPicker, Select, Input, Switch } from '@cainiaofe/cn-ui';
-import MddTableForm, { PenetrateTypes } from '@src/components/mdd-table-form';
-import MddForm from '@src/components/mdd-form';
+import MddTableForm, { PenetrateTypes } from '$src/components/mdd-table-form';
+import MddForm from '$src/components/mdd-form';
 import { componentOptions } from '../const';
 
-import { propFields } from '@src/common/comp-schema/fields/propFields';
+import { propFields } from '$src/common/comp-schema/fields/propFields';
 
 const labelDataSource = [
   {
@@ -83,10 +83,14 @@ export default function FilterPanel({ schema, swaggerFields = [] }) {
   const mddFormRef = React.useRef();
   const [_, forceUpdate] = React.useState({});
   React.useEffect(() => {
-    schema.on('$updated', (changeData, ignoreUpdate) => {
+    const handleUpdated = (changeData, ignoreUpdate) => {
       !ignoreUpdate && forceUpdate({});
-    });
-  }, []);
+    };
+    schema.on('$updated', handleUpdated);
+    return () => {
+      schema.off('$updated', handleUpdated);
+    };
+  }, [schema]);
 
   const fields = schema.get('fields');
 
@@ -121,7 +125,7 @@ export default function FilterPanel({ schema, swaggerFields = [] }) {
         ref={mddFormRef}
         data={fields}
         penetrateType={PenetrateTypes.FILTER}
-        componentOptions={componentOptions}
+        componentOptions={[...componentOptions, { value: 'blocks-filter', label: '筛选项区块' }]}
         title="配置查询条件"
         onAdd={onAddHandle}
         onRemove={onRemoveHandle}
@@ -140,6 +144,9 @@ export default function FilterPanel({ schema, swaggerFields = [] }) {
             schema.set(item.name, item.value);
           }}
         >
+          <Form.Item label="默认展开:" name="defaultExpand" help="仅在 新版布局中生效">
+            <Switch defaultChecked={schema.get('defaultExpand')} />
+          </Form.Item>
           <Form.Item label="文本位置:" name="labelAlign">
             <Select dataSource={labelDataSource} defaultValue={schema.get('labelAlign')} />
           </Form.Item>