@luck-design-biz/luckda 0.0.25-2 → 0.0.25-21

package/lib/lowcode/painter/panel-section/SplitDisplay.js

@@ -13,14 +13,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _antd = require("luck-design/antd");
 var _utils = require("@luck-design-biz/base/utils");
 var _RuleInput = _interopRequireDefault(require("../components/RuleInput"));
 var _PanelItem = _interopRequireDefault(require("../components/PanelItem"));
 var _splitDisplay = _interopRequireDefault(require("../style/split-display.less"));
-var _TYPES_ = ['normal', 'lr', 'lmr', 'ltb'];
 var _OPTIONS_ = [{
   label: (0, _utils.formatMessage)({
     id: 'luckda.lowcode.painter.panel-section.splitdisplay.splitVertical',
@@ -37,10 +35,10 @@ var _OPTIONS_ = [{
 var _RULES_ = [{
   func: function func(value) {
     // 首先，检查value是否为字符串
-    if (!(0, _lodash.isString)(value)) return false;
+    if (!(0, _lodash.isString)(value) || value === '') return false;
 
     // 使用正则表达式检查字符串是否只包含数字和冒号，并且不以冒号开始或结束
-    return /^[0-9]+(:[0-9]+)*$/.test(value);
+    return /^[1-9]+(:[1-9]+)+$/.test(value);
   },
   err: (0, _utils.formatMessage)({
     id: 'luckda.lowcode.painter.panel-section.splitdisplay.err',
@@ -61,47 +59,27 @@ var SplitDisplay = function SplitDisplay(_ref) {
   var defaultValue = _ref.defaultValue,
     onChange = _ref.onChange;
   var valueRef = (0, _react.useRef)(defaultValue);
-  var _useState = (0, _react.useState)(defaultValue.type || 'normal'),
+  var _useState = (0, _react.useState)(defaultValue.split || 'vertical'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    activeType = _useState2[0],
-    setActiveType = _useState2[1];
-  var _useState3 = (0, _react.useState)(defaultValue.split || 'vertical'),
+    split = _useState2[0],
+    setSplit = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultValue.ratio || '1:1'),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    split = _useState4[0],
-    setSplit = _useState4[1];
-  var _useState5 = (0, _react.useState)(defaultValue.ratio || '1:1'),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    ratio = _useState6[0],
-    setRatio = _useState6[1];
+    ratio = _useState4[0],
+    setRatio = _useState4[1];
   var ratioArr = (0, _ahooks.useCreation)(function () {
     return ratio.split(':').map(function (r) {
       return parseInt(r);
     });
   }, [ratio]);
-  var _useState7 = (0, _react.useState)(function () {
+  var _useState5 = (0, _react.useState)(function () {
       return (0, _lodash.drop)(ratioArr).map(function () {
         return split === 'vertical' ? 'right' : 'down';
       });
     }),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    fastTo = _useState8[0],
-    setFastTo = _useState8[1];
-  var handleTypeChange = (0, _ahooks.useMemoizedFn)(function (value) {
-    setActiveType(value);
-    if (value === 'normal') {
-      valueRef.current = {
-        type: value,
-        fastTo: fastTo,
-        split: split,
-        ratio: ratio
-      };
-    } else {
-      valueRef.current = {
-        type: value
-      };
-    }
-    onChange(valueRef.current);
-  });
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    fastTo = _useState6[0],
+    setFastTo = _useState6[1];
   var handleFastToItemClick = (0, _ahooks.useMemoizedFn)(function (d, i) {
     var _fastTo = (0, _toConsumableArray2.default)(fastTo);
     _fastTo[i] = _FAST_TO_MAPPING_[d];
@@ -120,6 +98,7 @@ var SplitDisplay = function SplitDisplay(_ref) {
     onChange((0, _objectSpread2.default)({}, valueRef.current));
   });
   var handleInputChange = (0, _ahooks.useMemoizedFn)(function (_, value) {
+    console.log('handleInputChange', value);
     var _fastTo = (0, _lodash.drop)(value.split(':')).map(function () {
       return split === 'vertical' ? 'right' : 'down';
     });
@@ -133,84 +112,20 @@ var SplitDisplay = function SplitDisplay(_ref) {
     className: _splitDisplay.default['lc-painter-panel-section-splitdisplay']
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _splitDisplay.default['display-type-box']
-  }, _TYPES_.map(function (_type) {
-    return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
-      key: _type,
-      title: _type
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(_splitDisplay.default['display-type-item'], (0, _defineProperty2.default)({}, _splitDisplay.default.active, activeType === _type)),
-      style: {
-        flexDirection: _type === 'normal' && split === 'horizontal' ? 'column' : 'row'
-      },
-      onClick: function onClick() {
-        return handleTypeChange(_type);
-      }
-    }, _type === 'normal' && ratioArr.map(function (r, i) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: i,
-        style: (0, _defineProperty2.default)({
-          flex: r
-        }, split === 'horizontal' ? 'borderBottom' : 'borderRight', i < ratioArr.length - 1 ? '1px solid #eee' : 'none'),
-        className: _splitDisplay.default['item-block']
-      });
-    }), _type === 'lr' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 1,
-        marginRight: 4
-      },
-      className: _splitDisplay.default['item-block']
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 3
-      },
-      className: _splitDisplay.default['item-block']
-    })), _type === 'lmr' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 1,
-        marginRight: 4
-      },
-      className: _splitDisplay.default['item-block']
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 3,
-        display: 'flex'
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: '50%',
-        borderRight: '1px solid #eee'
-      },
-      className: _splitDisplay.default['item-block']
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        width: '50%'
-      },
-      className: _splitDisplay.default['item-block']
-    }))), _type === 'ltb' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 1,
-        marginRight: 4
-      },
-      className: _splitDisplay.default['item-block']
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        flex: 3,
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        height: '50%',
-        borderBottom: '1px solid #eee'
-      },
-      className: _splitDisplay.default['item-block']
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        height: '50%'
-      },
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _splitDisplay.default['display-type-item'],
+    style: {
+      flexDirection: split === 'horizontal' ? 'column' : 'row'
+    }
+  }, ratioArr.map(function (r, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      style: (0, _defineProperty2.default)({
+        flex: r
+      }, split === 'horizontal' ? 'borderBottom' : 'borderRight', i < ratioArr.length - 1 ? '1px solid #eee' : 'none'),
       className: _splitDisplay.default['item-block']
-    })))));
-  })), activeType === 'normal' && /*#__PURE__*/_react.default.createElement("div", {
+    });
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginTop: 8
     }
@@ -222,6 +137,7 @@ var SplitDisplay = function SplitDisplay(_ref) {
     suppressPadding: true
   }, /*#__PURE__*/_react.default.createElement(FastToBox, null, fastTo.map(function (d, i) {
     return /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+      key: i,
       type: "arrow-".concat(d),
       onClick: function onClick() {
         return handleFastToItemClick(d, i);

package/lib/lowcode/painter/panel-section/StylePanel/BackGround.js

@@ -16,8 +16,8 @@ var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var _HightLightSvg = _interopRequireDefault(require("./HightLightSvg"));
 var textRelatedStyles = ['background-color'];
 
-/**
- * 背景设置控件
+/**
+ * 背景设置控件
  */
 function _default() {
   return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {

package/lib/lowcode/painter/panel-section/StylePanel/Border.js

@@ -25,8 +25,8 @@ var getPropName = function getPropName(str) {
   return str.split('-').pop();
 };
 
-/**
- * 边框样式设置控件
+/**
+ * 边框样式设置控件
  */
 function _default() {
   return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {

package/lib/lowcode/painter/panel-section/StylePanel/BorderRadius.js

@@ -19,8 +19,8 @@ var borderMainProps = ['border-radius'];
 var borderSideProps = ['border-top-right-radius', 'border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'];
 var textRelatedStyles = [].concat(borderMainProps, borderSideProps);
 
-/**
- * 圆角样式设置控件
+/**
+ * 圆角样式设置控件
  */
 function _default() {
   return /*#__PURE__*/_react.default.createElement(_HighLightPanel.default, {

package/lib/lowcode/painter/panel-section/StylePanel/BorderRadiusSelector.js

@@ -9,8 +9,8 @@ exports.default = _default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _borderRadiusSelector = _interopRequireDefault(require("../../style/border-radius-selector.less"));
-/**
- * 圆角设置组件
+/**
+ * 圆角设置组件
  */
 function _default(_ref) {
   var onChange = _ref.onChange;

package/lib/lowcode/painter/panel-section/StylePanel/BorderSelector.js

@@ -9,8 +9,8 @@ exports.default = _default;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _borderSelector = _interopRequireDefault(require("../../style/border-selector.less"));
-/**
- * 边框选择组件
+/**
+ * 边框选择组件
  */
 function _default(_ref) {
   var onChange = _ref.onChange;

package/lib/lowcode/painter/panel-section/StylePanel/Display.js

@@ -15,8 +15,8 @@ var _StyleContext = require("./StyleContext");
 var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var textRelatedStyles = ['display', 'flex-direction', 'align-items', 'justify-content'];
 
-/**
- * 显示样式设置控件
+/**
+ * 显示样式设置控件
  */
 function _default(_ref) {
   var label = _ref.label;

package/lib/lowcode/painter/panel-section/StylePanel/Font.js

@@ -18,8 +18,8 @@ var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var Option = _antd.Select.Option;
 var textRelatedStyles = ['font-weight', 'font-style', 'color', 'font-size', 'line-height', 'text-align', 'text-decoration'];
 
-/**
- * 文字设置组件
+/**
+ * 文字设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();

package/lib/lowcode/painter/panel-section/StylePanel/FontEditor.js

@@ -18,8 +18,8 @@ var _Size = _interopRequireDefault(require("./Size"));
 var _HightLightSvg = _interopRequireDefault(require("./HightLightSvg"));
 var Option = _antd.Select.Option;
 
-/**
- * 文字详细编辑组件
+/**
+ * 文字详细编辑组件
  */
 function _default() {
   var _style$fontWeight;

package/lib/lowcode/painter/panel-section/StylePanel/GapSelector.js

@@ -11,8 +11,8 @@ var _StyleContext = require("./StyleContext");
 var _antd = require("luck-design/antd");
 var Option = _antd.Select.Option;
 
-/**
- * 间距选择组件
+/**
+ * 间距选择组件
  */
 function _default(_ref) {
   var _style$field;

package/lib/lowcode/painter/panel-section/StylePanel/HighLightPanel.js

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _PanelItem = _interopRequireDefault(require("../../components/PanelItem"));
 var _HighLigthtSpan = _interopRequireDefault(require("./HighLigthtSpan"));
 var _excluded = ["children", "label", "highLightFields", "customStyle"];
-/**
- * 标签自动高亮控件
+/**
+ * 标签自动高亮控件
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/panel-section/StylePanel/HighLigthtSpan.js

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _StyleContext = require("./StyleContext");
 var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
 var _excluded = ["children", "highLightFields", "customStyle"];
-/**
- * 标签自动高亮控件
+/**
+ * 标签自动高亮控件
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/panel-section/StylePanel/HightLightSvg.js

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _StyleContext = require("./StyleContext");
 var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
 var _excluded = ["children", "field", "label", "highLightFields"];
-/**
- * 标签自动高亮SVG
+/**
+ * 标签自动高亮SVG
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -26,8 +26,8 @@ var _BorderRadius = _interopRequireDefault(require("./BorderRadius"));
 var _Shadow = _interopRequireDefault(require("./Shadow"));
 var _Opacity = _interopRequireDefault(require("./Opacity"));
 var _Pointer = _interopRequireDefault(require("./Pointer"));
-/**
- * 主样式面板
+/**
+ * 主样式面板
  */
 var MainPanel = function MainPanel() {
   var style = (0, _StyleContext.useStyle)();
@@ -86,11 +86,11 @@ var MainPanel = function MainPanel() {
   }), /*#__PURE__*/_react.default.createElement(_WidthHeight.default, {
     field: "height",
     label: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
+      id: 'luckda.lowcode.painter.panel-section.style-panel.height',
       label: '高'
     }),
     placeholder: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
+      id: 'luckda.lowcode.painter.panel-section.style-panel.height',
       label: '请输入宽高度'
     })
   }), /*#__PURE__*/_react.default.createElement(_Display.default, {

package/lib/lowcode/painter/panel-section/StylePanel/Margin.js

@@ -22,8 +22,8 @@ function _default() {
   }));
 }
 
-/**
- * 边距样式设置组件
+/**
+ * 边距样式设置组件
  */
 var MarginGroup = function MarginGroup() {
   var style = (0, _StyleContext.useStyle)();

package/lib/lowcode/painter/panel-section/StylePanel/Opacity.js

@@ -13,8 +13,8 @@ var _lodash = require("lodash");
 var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var field = 'opacity';
 
-/**
- * 透明度设置组件
+/**
+ * 透明度设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();

package/lib/lowcode/painter/panel-section/StylePanel/Padding.js

@@ -13,8 +13,8 @@ var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var textRelatedStyles = ['padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'];
 var field = 'padding';
 
-/**
- * 间距样式设置组件
+/**
+ * 间距样式设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();

package/lib/lowcode/painter/panel-section/StylePanel/Pointer.js

@@ -12,8 +12,8 @@ var _antd = require("luck-design/antd");
 var _HighLightPanel = _interopRequireDefault(require("./HighLightPanel"));
 var Option = _antd.Select.Option;
 var field = 'cursor';
-/**
- * 指针样式设置组件
+/**
+ * 指针样式设置组件
  */
 function _default() {
   var _style$field;

package/lib/lowcode/painter/panel-section/StylePanel/Shadow.js

@@ -28,8 +28,8 @@ var presetsShadowStyle = [{
   value: 'rgba(31, 56, 88, 0.2) 1px 1px 4px 0px'
 }];
 
-/**
- * 阴影样式设置组件
+/**
+ * 阴影样式设置组件
  */
 function _default() {
   var style = (0, _StyleContext.useStyle)();

package/lib/lowcode/painter/panel-section/StylePanel/Size.js

@@ -11,8 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 var _StyleContext = require("./StyleContext");
 var _NumberInput = _interopRequireDefault(require("../../components/NumberInput"));
 var _excluded = ["field", "onChange", "placeholder", "customValue", "customOption"];
-/**
- * Size设置通用组件
+/**
+ * Size设置通用组件
  */
 function _default(_ref) {
   var field = _ref.field,

package/lib/lowcode/painter/panel-section/StylePanel/StyleContext.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -12,7 +13,7 @@ exports.useStyleDispatch = useStyleDispatch;
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _postcss = _interopRequireDefault(require("postcss"));
 var _lodash = require("lodash");
 var _ahooks = require("ahooks");
@@ -21,8 +22,8 @@ var StyleContext = /*#__PURE__*/(0, _react.createContext)(null);
 var StyleDispatchContext = /*#__PURE__*/(0, _react.createContext)(null);
 var EditorContext = /*#__PURE__*/(0, _react.createContext)(null);
 
-/**
- * 样式上下文组件
+/**
+ * 样式上下文组件
  */
 function StyleProvider(_ref) {
   var onChange = _ref.onChange,
@@ -66,11 +67,11 @@ function StyleProvider(_ref) {
       if (onChange) onChange(style, removeRootBrackets(css));
     }
   }, [style]);
-  return /*#__PURE__*/React.createElement(StyleContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(StyleContext.Provider, {
     value: style
-  }, /*#__PURE__*/React.createElement(EditorContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(EditorContext.Provider, {
     value: editorRef
-  }, /*#__PURE__*/React.createElement(StyleDispatchContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(StyleDispatchContext.Provider, {
     value: dispatch
   }, children)));
 }

package/lib/lowcode/painter/panel-section/StylePanel/StyleRow.js

@@ -10,8 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _stylePanel = _interopRequireDefault(require("../../style/style-panel.less"));
 var _excluded = ["children"];
-/**
- * 样式行通用组件
+/**
+ * 样式行通用组件
  */
 function _default(_ref) {
   var children = _ref.children,

package/lib/lowcode/painter/panel-section/StylePanel/WidthHeight.js

@@ -23,8 +23,8 @@ var options = [{
   value: 'auto'
 }];
 
-/**
- * 宽高设置控件
+/**
+ * 宽高设置控件
  */
 function _default(_ref) {
   var field = _ref.field,

package/lib/lowcode/painter/panel-section/StylePanel/index.js

@@ -6,30 +6,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _ContextProvider = require("../../../engine/provider/ContextProvider");
 var _StyleContext = require("./StyleContext");
 var _MainPanel = _interopRequireDefault(require("./MainPanel"));
-/**
- * StylePanel 组件是一个 React 组件，用于提供样式设置主面板。
- * 该组件通过 StyleProvider 将样式变更和当前样式值传递给其子组件。
- * 
- * @component
- * @example
- * const handleChange = (newValue) => console.log(newValue);
- * const initialValue = "dark";
- * <StylePanel onChange={handleChange} value={initialValue} />
- * 
- * @param {Object} props - 组件的属性。
- * @param {Function} props.onChange - 当样式变更时调用的函数，该函数接受新的样式值作为参数。
- * @param {any} props.value - 样式字符串
- * 
- * @returns {ReactElement} 返回一个 React 元素，其中包含了 StyleProvider 和 MainPanel 组件。
+/**
+ * StylePanel 组件是一个 React 组件，用于提供样式设置主面板。
+ * 该组件通过 StyleProvider 将样式变更和当前样式值传递给其子组件。
+ *
+ * @component
+ * @example
+ * const handleChange = (newValue) => console.log(newValue);
+ * const initialValue = "dark";
+ * <StylePanel onChange={handleChange} value={initialValue} />
+ *
+ * @param {Object} props - 组件的属性。
+ * @param {Function} props.onChange - 当样式变更时调用的函数，该函数接受新的样式值作为参数。
+ * @param {any} props.value - 样式字符串
+ *
+ * @returns {ReactElement} 返回一个 React 元素，其中包含了 StyleProvider 和 MainPanel 组件。
  */
 var StylePanel = function StylePanel(_ref) {
   var onChange = _ref.onChange,
+    nodeId = _ref.nodeId,
     value = _ref.value;
+  var _value = (0, _ContextProvider.useGet)({
+    id: nodeId,
+    path: 'props.css'
+  });
   return /*#__PURE__*/_react.default.createElement(_StyleContext.StyleProvider, {
     onChange: onChange,
-    value: value
+    value: value || _value
   }, /*#__PURE__*/_react.default.createElement(_MainPanel.default, null));
 };
 var _default = exports.default = StylePanel;

package/lib/lowcode/painter/panel-section/TableTopFilter.js

@@ -13,6 +13,7 @@ var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _lodash = require("lodash");
 var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../../engine/provider/ContextProvider");
 var _SortBox = require("../components/SortBox");
 var _ListEditor = require("../components/ListEditor");
 var _PopConfirm = _interopRequireDefault(require("../components/PopConfirm"));
@@ -27,7 +28,9 @@ var _RADIO_STYLE_ = {
 };
 var TableTopFilter = function TableTopFilter(_ref) {
   var defaultValue = _ref.defaultValue,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    nodeId = _ref.nodeId;
+  var ctx = (0, _ContextProvider.useContext)();
   var _useState = (0, _react.useState)(function () {
       if ((0, _lodash.isNil)(defaultValue)) return 'nil';
       if ((0, _lodash.isString)(defaultValue)) return 'customApi';
@@ -49,6 +52,17 @@ var TableTopFilter = function TableTopFilter(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     apiUrl = _useState4[0],
     setApiUrl = _useState4[1];
+  var _useDebounceFn = (0, _ahooks.useDebounceFn)(function (val) {
+      setDict({
+        key: val
+      });
+      if (dict !== null && dict !== void 0 && dict.field) _onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dict), {}, {
+        key: val
+      }));
+    }, {
+      wait: 400
+    }),
+    handleDictChange = _useDebounceFn.run;
   var handleAdd = (0, _ahooks.useMemoizedFn)(function () {
     var id = (0, _utils.suid)();
     dispatch({
@@ -56,7 +70,7 @@ var TableTopFilter = function TableTopFilter(_ref) {
       payload: {
         id: id,
         value: id,
-        field: id,
+        field: void 0,
         label: "\u8FC7\u6EE4\u9879".concat(options.length + 1)
       },
       callback: function callback(newOptions) {
@@ -145,9 +159,10 @@ var TableTopFilter = function TableTopFilter(_ref) {
         id: "".concat(_I18N_PREFIX_, ".field"),
         label: '字段'
       })), /*#__PURE__*/_react.default.createElement(_PopForm.PopFormItemRight, null, /*#__PURE__*/_react.default.createElement(_FieldSelector.default, {
+        dsid: ctx.componentMap.get(nodeId).api.getSelfData().props.dataset.uid,
         defaultValue: opt.field,
         style: {
-          width: '50%'
+          width: '100%'
         },
         placeholder: (0, _utils.formatMessage)({
           id: "".concat(_I18N_PREFIX_, ".field.placeholder"),
@@ -211,7 +226,7 @@ var TableTopFilter = function TableTopFilter(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
     size: "small",
-    value: dict === null || dict === void 0 ? void 0 : dict.key,
+    defaultValue: dict === null || dict === void 0 ? void 0 : dict.key,
     style: {
       width: '50%'
     },
@@ -220,15 +235,10 @@ var TableTopFilter = function TableTopFilter(_ref) {
       label: '请输入字典key'
     }),
     onChange: function onChange(e) {
-      var key = e.target.value;
-      setDict({
-        key: key
-      });
-      if (dict !== null && dict !== void 0 && dict.field) _onChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dict), {}, {
-        key: key
-      }));
+      return handleDictChange(e.target.value);
     }
   }), /*#__PURE__*/_react.default.createElement(_FieldSelector.default, {
+    dsid: ctx.componentMap.get(nodeId).api.getSelfData().props.dataset.uid,
     style: {
       width: '50%'
     },
@@ -286,7 +296,7 @@ var TableTopFilter = function TableTopFilter(_ref) {
     size: "small",
     value: apiUrl,
     placeholder: (0, _utils.formatMessage)({
-      id: "".concat(_I18N_PREFIX_, ".dict.placeholder"),
+      id: "".concat(_I18N_PREFIX_, ".customApi.placeholder"),
       label: '请输入接口地址'
     }),
     style: {