@gingkoo/pandora-metabase 1.0.125 → 1.0.127

package/lib/cjs/components/dialog/formula-list/index.js

@@ -11,8 +11,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = _interopRequireWildcard(require("react"));
 require("./index.less");
@@ -40,12 +40,102 @@ var _storage = _interopRequireDefault(require("../../../utils/storage"));
 var _helperDom = require("../../../utils/helper-dom");
 var _CaseWhenGroup = _interopRequireDefault(require("./CaseWhenGroup"));
 var _LogicGroup = _interopRequireDefault(require("./LogicGroup"));
+var _helper = require("../../../store/helper");
 var _excluded = ["notExistsToolbar", "toolbar"],
   _excluded2 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var CASE_FIXED_OPERATORS = ['case', 'when', 'then', 'else', 'end'];
 var LOGIC_FIXED_OPERATORS = ['(', ')'];
 var LOGIC_REQUIRED_OPERATORS = ['(', ')'];
+var TOKEN_DELETE_ICON_SIZE = 10;
+var ADD_TRIGGER_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: 28,
+  minWidth: 36,
+  padding: '4px 7px',
+  border: '1px solid transparent',
+  borderRadius: 5,
+  boxSizing: 'border-box',
+  color: '#fff',
+  backgroundColor: 'rgb(147, 161, 171)',
+  fontSize: 13,
+  lineHeight: '18px',
+  cursor: 'pointer'
+};
+var ZOOM_FOOTER_BUTTON_STYLE = {
+  minWidth: 72,
+  height: 30,
+  borderRadius: 6
+};
+var ZOOM_FOOTER_CANCEL_STYLE = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, ZOOM_FOOTER_BUTTON_STYLE), {}, {
+  borderColor: 'rgba(83, 92, 112, 0.18)',
+  background: '#fff',
+  color: 'rgba(83, 92, 112, 0.82)'
+});
+var ZOOM_FOOTER_CONFIRM_STYLE = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, ZOOM_FOOTER_BUTTON_STYLE), {}, {
+  borderColor: 'rgb(80, 158, 227)',
+  background: 'rgb(80, 158, 227)',
+  color: '#fff'
+});
+var FORMULA_LIST_ZOOM_BUTTON_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 22,
+  minWidth: 22,
+  height: 22,
+  margin: 0,
+  padding: 0,
+  border: 'none',
+  borderRadius: 999,
+  background: 'transparent',
+  color: 'rgba(83, 92, 112, 0.58)',
+  cursor: 'pointer',
+  lineHeight: 0
+};
+var TOKEN_BASE_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  minHeight: 28,
+  padding: '4px 7px',
+  border: '1px solid transparent',
+  borderRadius: 5,
+  boxSizing: 'border-box',
+  fontSize: 13,
+  lineHeight: '18px',
+  cursor: 'pointer'
+};
+var TOKEN_PALETTE = {
+  blue: 'rgb(80, 158, 227)',
+  purple: 'rgb(113, 114, 173)',
+  gray: 'rgb(147, 161, 171)',
+  green: 'rgb(136, 191, 77)'
+};
+var getTokenStyleByClassName = function getTokenStyleByClassName(className, extraStyle) {
+  var names = " ".concat(className || '', " ");
+  var color = TOKEN_PALETTE.blue;
+  if (names.includes(' purple-name ')) {
+    color = TOKEN_PALETTE.purple;
+  } else if (names.includes(' gray-name ')) {
+    color = TOKEN_PALETTE.gray;
+  } else if (names.includes(' green-name ')) {
+    color = TOKEN_PALETTE.green;
+  }
+  var selectedStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, TOKEN_BASE_STYLE), {}, {
+    color: '#fff',
+    backgroundColor: color
+  });
+  var notSelectedStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, TOKEN_BASE_STYLE), {}, {
+    borderColor: color.replace('rgb', 'rgba').replace(')', ', 0.25)'),
+    color: color,
+    backgroundColor: 'transparent'
+  });
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, names.includes(' notSelected ') ? notSelectedStyle : selectedStyle), names.includes(' operator-trigger ') ? {
+    padding: '4px 7px'
+  } : {}), extraStyle);
+};
 var FormulaList = (0, _react.forwardRef)(function (props, ref) {
   var _storage$_metabaseCop;
   var _useState = (0, _react.useState)((_storage["default"] === null || _storage["default"] === void 0 || (_storage$_metabaseCop = _storage["default"]._metabaseCopyItems) === null || _storage$_metabaseCop === void 0 ? void 0 : _storage$_metabaseCop.length) || 0),
@@ -85,6 +175,8 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     embedded = _props$embedded === void 0 ? false : _props$embedded,
     _props$enableCopy = props.enableCopy,
     enableCopy = _props$enableCopy === void 0 ? true : _props$enableCopy,
+    _props$enableZoom = props.enableZoom,
+    enableZoom = _props$enableZoom === void 0 ? true : _props$enableZoom,
     parentPopupChannel = props.parentPopupChannel;
   var parentPopupLockCountRef = (0, _react.useRef)(0);
   var parentPopupUnlockTimerRef = (0, _react.useRef)(null);
@@ -225,21 +317,6 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
     filterVal = _useState0[0],
     setFilterVal = _useState0[1];
-  var setCaseList = function setCaseList(data) {
-    var quotes = data.map(function (v) {
-      if (v !== null && v !== void 0 && v.quotes) return v.quotes;
-      if (v !== null && v !== void 0 && v.fieldName) return v.fieldName;
-      return v === null || v === void 0 ? void 0 : v.val;
-    }).join(' ');
-    caseList = data;
-    caseListRef.current = data;
-    onChange === null || onChange === void 0 || onChange(data, quotes);
-  };
-  var updateAtomAt = function updateAtomAt(index, nextItem) {
-    var nextList = caseList.slice();
-    nextList[index] = nextItem;
-    setCaseList(nextList);
-  };
   function getSelectDisplayText(item) {
     var displayField = item.displayField || 'value';
     var getOptionText = function getOptionText(value) {
@@ -257,36 +334,42 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     }
     return getOptionText(String(item.val || ''));
   }
+  function getFieldDisplayName(field) {
+    if (!field) return '';
+    if (field.tableId === _helper.SummarizeAlias) {
+      return field.fieldAlias || field.fieldName || '';
+    }
+    return field.fieldName || field.fieldAlias || '';
+  }
   function getItemDisplayText(v) {
     if (!v) return '';
     if (v.quotes) return v.quotes;
+    if (v.type === _types.AtomsTypeEnum.FIELD) return getFieldDisplayName(v);
     if (v.fieldName) return v.fieldName;
     if (v.type === _types.AtomsTypeEnum.FORMULA) {
       return v.name ? (0, _utils.getQuotes)(v, v.args, formulaList) : '';
     }
     if (v.type === _types.AtomsTypeEnum.CASE_WHEN) {
-      var caseValueText = (v.caseValue || []).map(function (item) {
+      var caseAtomsText = (v.caseAtoms || []).map(function (item) {
         return getItemDisplayText(item);
       }).join(' ');
-      var branchText = (v.branches || []).map(function (branch) {
-        var whenText = (branch.when || []).map(function (item) {
-          return getItemDisplayText(item);
-        }).join(' ');
-        var thenText = (branch.then || []).map(function (item) {
-          return getItemDisplayText(item);
-        }).join(' ');
+      var whenClausesText = (v.whenClauses || []).map(function (branch) {
+        var whenText = (branch.whenAtoms || []).map(getItemDisplayText).join(' ');
+        var thenText = (branch.thenAtoms || []).map(getItemDisplayText).join(' ');
         return "when ".concat(whenText, " then ").concat(thenText).trim();
       }).join(' ');
-      var elseText = (v.elseValue || []).length ? " else ".concat((v.elseValue || []).map(function (item) {
-        return getItemDisplayText(item);
-      }).join(' ')) : '';
-      return "case ".concat(caseValueText, " ").concat(branchText).concat(elseText, " end").replace(/\s+/g, ' ').trim();
+      var elseAtomsText = (v.elseAtoms || []).length ? " else ".concat((v.elseAtoms || []).map(getItemDisplayText).join(' ')) : '';
+      return "case ".concat(caseAtomsText, " ").concat(whenClausesText).concat(elseAtomsText, " end").replace(/\s+/g, ' ').trim();
     }
     if (v.type === _types.AtomsTypeEnum.AND_OR) {
-      var listText = (v.list || []).map(function (item) {
-        return getItemDisplayText(item);
-      }).join(' ');
-      return "".concat(v.operator || 'and', " ( ").concat(listText, " )").replace(/\s+/g, ' ').trim();
+      var hasBinarySides = Array.isArray(v.leftAtoms) || Array.isArray(v.rightAtoms);
+      if (hasBinarySides) {
+        var leftText = (v.leftAtoms || []).map(getItemDisplayText).join(' ');
+        var rightText = (v.rightAtoms || []).map(getItemDisplayText).join(' ');
+        return "( ".concat(leftText, " ").concat(v.operator || 'and', " ").concat(rightText, " )").replace(/\s+/g, ' ').trim();
+      }
+      var atomsText = (v.atoms || []).map(getItemDisplayText).join(' ');
+      return "".concat(v.operator || 'and', " ( ").concat(atomsText, " )").replace(/\s+/g, ' ').trim();
     }
     if (v.type === _types.AtomsTypeEnum.SELECT) {
       return getSelectDisplayText(v);
@@ -296,6 +379,73 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     }
     return v.val || '';
   }
+  var getItemQuotes = function getItemQuotes(item) {
+    return getItemDisplayText((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item), {}, {
+      quotes: ''
+    }));
+  };
+  var _withSyncedQuotes = function withSyncedQuotes(item) {
+    if (item.type === _types.AtomsTypeEnum.CASE_WHEN) {
+      var _item$elseAtoms;
+      var nextItem = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item), {}, {
+        caseAtoms: (item.caseAtoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        }),
+        whenClauses: (item.whenClauses || []).map(function (clause) {
+          return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, clause), {}, {
+            whenAtoms: (clause.whenAtoms || []).map(function (currentItem) {
+              return _withSyncedQuotes(currentItem);
+            }),
+            thenAtoms: (clause.thenAtoms || []).map(function (currentItem) {
+              return _withSyncedQuotes(currentItem);
+            })
+          });
+        }),
+        elseAtoms: (_item$elseAtoms = item.elseAtoms) === null || _item$elseAtoms === void 0 ? void 0 : _item$elseAtoms.map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        })
+      });
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItem), {}, {
+        quotes: getItemQuotes(nextItem)
+      });
+    }
+    if (item.type === _types.AtomsTypeEnum.AND_OR) {
+      var hasBinarySides = Array.isArray(item.leftAtoms) || Array.isArray(item.rightAtoms);
+      var _nextItem = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item), hasBinarySides ? {
+        atoms: undefined,
+        leftAtoms: (item.leftAtoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        }),
+        rightAtoms: (item.rightAtoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        })
+      } : {
+        atoms: (item.atoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        })
+      });
+      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _nextItem), {}, {
+        quotes: getItemQuotes(_nextItem)
+      });
+    }
+    return item;
+  };
+  var setCaseList = function setCaseList(data) {
+    var nextData = data.map(function (item) {
+      return _withSyncedQuotes(item);
+    });
+    var quotes = nextData.map(function (item) {
+      return getItemDisplayText(item);
+    }).join(' ');
+    caseList = nextData;
+    caseListRef.current = nextData;
+    onChange === null || onChange === void 0 || onChange(nextData, quotes);
+  };
+  var updateAtomAt = function updateAtomAt(index, nextItem) {
+    var nextList = caseList.slice();
+    nextList[index] = nextItem;
+    setCaseList(nextList);
+  };
   var getPreviewStr = function getPreviewStr() {
     var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return data.map(function (v) {
@@ -317,9 +467,256 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       children: children
     });
   };
+  var openCaseWhenFormulaModal = function openCaseWhenFormulaModal(e, value, index) {
+    e.preventDefault();
+    e.stopPropagation();
+    var childModalZIndex = (0, _helperDom.getTopLayerZIndex)() + 1;
+    var modalInstance;
+    var CaseWhenZoomEditor = function CaseWhenZoomEditor() {
+      var _useState1 = (0, _react.useState)(function () {
+          return (0, _cloneDeep["default"])(value);
+        }),
+        _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+        draftValue = _useState10[0],
+        setDraftValue = _useState10[1];
+      var _useState11 = (0, _react.useState)(null),
+        _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+        activeZoomRegionKey = _useState12[0],
+        setActiveZoomRegionKey = _useState12[1];
+      var updateDraftValue = function updateDraftValue(nextValue) {
+        setDraftValue(_withSyncedQuotes(nextValue));
+      };
+      var handleOk = function handleOk() {
+        var _modalInstance2, _modalInstance2$close;
+        updateAtomAt(index, (0, _cloneDeep["default"])(draftValue));
+        (_modalInstance2 = modalInstance) === null || _modalInstance2 === void 0 || (_modalInstance2$close = _modalInstance2.close) === null || _modalInstance2$close === void 0 || _modalInstance2$close.call(_modalInstance2);
+      };
+      return (0, _jsxRuntime.jsx)(_useProvider.Provider, {
+        value: store,
+        children: (0, _jsxRuntime.jsxs)("div", {
+          className: 'Sqb-FormulaListZoomEditor',
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: 'Sqb-FormulaListZoomEditor-body',
+            children: (0, _jsxRuntime.jsx)("div", {
+              className: 'Sqb-NotebookCell Sqb-FormulaListZoomEditor-cell',
+              children: (0, _jsxRuntime.jsx)(_CaseWhenGroup["default"], {
+                showTools: false,
+                useBranchScrollInner: true,
+                caseRegionKey: 'case-zoom-case',
+                elseRegionKey: 'case-zoom-else',
+                activeRegionKey: activeZoomRegionKey,
+                onActivateRegion: setActiveZoomRegionKey,
+                caseAtomsContent: renderNestedFormulaList(draftValue.caseAtoms || [], function (nextList) {
+                  updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                    caseAtoms: nextList
+                  }));
+                }),
+                whenClauses: (draftValue.whenClauses || []).map(function (branch, branchIndex) {
+                  return {
+                    key: "case-zoom-".concat(branchIndex),
+                    canDelete: (draftValue.whenClauses || []).length > 1,
+                    whenContent: renderNestedFormulaList(branch.whenAtoms || [], function (nextList) {
+                      var nextWhenClauses = (draftValue.whenClauses || []).slice();
+                      nextWhenClauses[branchIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, branch), {}, {
+                        whenAtoms: nextList
+                      });
+                      updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                        whenClauses: nextWhenClauses
+                      }));
+                    }),
+                    thenContent: renderNestedFormulaList(branch.thenAtoms || [], function (nextList) {
+                      var nextWhenClauses = (draftValue.whenClauses || []).slice();
+                      nextWhenClauses[branchIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, branch), {}, {
+                        thenAtoms: nextList
+                      });
+                      updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                        whenClauses: nextWhenClauses
+                      }));
+                    }),
+                    onAddAfter: function onAddAfter(event) {
+                      event.stopPropagation();
+                      var nextWhenClauses = (draftValue.whenClauses || []).slice();
+                      nextWhenClauses.splice(branchIndex + 1, 0, {
+                        whenAtoms: [{
+                          val: '',
+                          type: _types.AtomsTypeEnum.UNKNOWN
+                        }],
+                        thenAtoms: [{
+                          val: '',
+                          type: _types.AtomsTypeEnum.UNKNOWN
+                        }]
+                      });
+                      updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                        whenClauses: nextWhenClauses
+                      }));
+                    },
+                    onDelete: function onDelete(event) {
+                      event.stopPropagation();
+                      var whenClauses = draftValue.whenClauses || [];
+                      if (whenClauses.length <= 1) return;
+                      updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                        whenClauses: whenClauses.filter(function (_, currentIndex) {
+                          return currentIndex !== branchIndex;
+                        })
+                      }));
+                    }
+                  };
+                }),
+                elseContent: draftValue.elseAtoms ? renderNestedFormulaList(draftValue.elseAtoms || [], function (nextList) {
+                  updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                    elseAtoms: nextList
+                  }));
+                }) : undefined,
+                onAddBranch: function onAddBranch(event) {
+                  event.stopPropagation();
+                  updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                    whenClauses: [].concat((0, _toConsumableArray2["default"])(draftValue.whenClauses || []), [{
+                      whenAtoms: [{
+                        val: '',
+                        type: _types.AtomsTypeEnum.UNKNOWN
+                      }],
+                      thenAtoms: [{
+                        val: '',
+                        type: _types.AtomsTypeEnum.UNKNOWN
+                      }]
+                    }])
+                  }));
+                },
+                onAddElse: function onAddElse(event) {
+                  event.stopPropagation();
+                  updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                    elseAtoms: [{
+                      val: '',
+                      type: _types.AtomsTypeEnum.UNKNOWN
+                    }]
+                  }));
+                },
+                onRemoveElse: function onRemoveElse(event) {
+                  event.stopPropagation();
+                  updateDraftValue((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, draftValue), {}, {
+                    elseAtoms: undefined
+                  }));
+                }
+              })
+            })
+          }), (0, _jsxRuntime.jsxs)("div", {
+            className: 'Sqb-FormulaListZoomEditor-footer',
+            children: [(0, _jsxRuntime.jsx)(_pandora.Button, {
+              className: 'sqb-formula-list-zoom-editor-cancel',
+              style: ZOOM_FOOTER_CANCEL_STYLE,
+              onClick: function onClick() {
+                var _modalInstance3, _modalInstance3$close;
+                return (_modalInstance3 = modalInstance) === null || _modalInstance3 === void 0 || (_modalInstance3$close = _modalInstance3.close) === null || _modalInstance3$close === void 0 ? void 0 : _modalInstance3$close.call(_modalInstance3);
+              },
+              children: "\u53D6\u6D88"
+            }), (0, _jsxRuntime.jsx)(_pandora.Button, {
+              className: 'sqb-formula-list-zoom-editor-confirm',
+              primary: true,
+              style: ZOOM_FOOTER_CONFIRM_STYLE,
+              onClick: handleOk,
+              children: "\u786E\u5B9A"
+            })]
+          })]
+        })
+      });
+    };
+    modalInstance = openChildModal({
+      zIndex: childModalZIndex,
+      className: 'sqb-formula-list-zoom-modal',
+      title: '编辑',
+      transparentMask: true,
+      modalWidth: 1180,
+      modalHeight: 680,
+      content: (0, _jsxRuntime.jsx)(CaseWhenZoomEditor, {}),
+      onClose: function onClose() {}
+    });
+  };
+  var openFormulaListModal = function openFormulaListModal(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var childModalZIndex = (0, _helperDom.getTopLayerZIndex)() + 1;
+    var modalInstance;
+    var FormulaListZoomEditor = function FormulaListZoomEditor() {
+      var _useState13 = (0, _react.useState)(function () {
+          return (0, _cloneDeep["default"])(caseList || []);
+        }),
+        _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+        draftList = _useState14[0],
+        setDraftList = _useState14[1];
+      var updateDraftList = function updateDraftList(nextList) {
+        setDraftList(nextList.map(function (item) {
+          return _withSyncedQuotes(item);
+        }));
+      };
+      var handleOk = function handleOk() {
+        var _modalInstance4, _modalInstance4$close;
+        setCaseList((0, _cloneDeep["default"])(draftList));
+        (_modalInstance4 = modalInstance) === null || _modalInstance4 === void 0 || (_modalInstance4$close = _modalInstance4.close) === null || _modalInstance4$close === void 0 || _modalInstance4$close.call(_modalInstance4);
+      };
+      return (0, _jsxRuntime.jsx)(_useProvider.Provider, {
+        value: store,
+        children: (0, _jsxRuntime.jsxs)("div", {
+          className: 'Sqb-FormulaListZoomEditor',
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: 'Sqb-FormulaListZoomEditor-body Sqb-FormulaListZoomEditor-body--formulaList',
+            children: (0, _jsxRuntime.jsx)(FormulaList, {
+              ref: ref,
+              value: draftList,
+              data: data,
+              exitData: exitData,
+              onChange: function onChange(atoms) {
+                return updateDraftList(atoms);
+              },
+              customTypes: _customTypes,
+              otherTypes: otherTypes,
+              isCustom: isCustom,
+              showPreview: showPreview,
+              check: check,
+              _type: _type,
+              enableCopy: false,
+              enableZoom: false,
+              parentPopupChannel: parentPopupChannel
+            })
+          }), (0, _jsxRuntime.jsxs)("div", {
+            className: 'Sqb-FormulaListZoomEditor-footer',
+            children: [(0, _jsxRuntime.jsx)(_pandora.Button, {
+              className: 'sqb-formula-list-zoom-editor-cancel',
+              style: ZOOM_FOOTER_CANCEL_STYLE,
+              onClick: function onClick() {
+                var _modalInstance5, _modalInstance5$close;
+                return (_modalInstance5 = modalInstance) === null || _modalInstance5 === void 0 || (_modalInstance5$close = _modalInstance5.close) === null || _modalInstance5$close === void 0 ? void 0 : _modalInstance5$close.call(_modalInstance5);
+              },
+              children: "\u53D6\u6D88"
+            }), (0, _jsxRuntime.jsx)(_pandora.Button, {
+              className: 'sqb-formula-list-zoom-editor-confirm',
+              primary: true,
+              style: ZOOM_FOOTER_CONFIRM_STYLE,
+              onClick: handleOk,
+              children: "\u786E\u5B9A"
+            })]
+          })]
+        })
+      });
+    };
+    modalInstance = openChildModal({
+      zIndex: childModalZIndex,
+      className: 'sqb-formula-list-zoom-modal',
+      title: '编辑',
+      transparentMask: true,
+      modalWidth: 1180,
+      modalHeight: 680,
+      content: (0, _jsxRuntime.jsx)(FormulaListZoomEditor, {}),
+      onClose: function onClose() {}
+    });
+  };
   var renderNestedFormulaList = function renderNestedFormulaList(list, onNestedChange) {
+    var hasNestedCaseWhen = list.some(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.type) === _types.AtomsTypeEnum.CASE_WHEN;
+    });
     return (0, _jsxRuntime.jsx)("div", {
-      className: 'Sqb-NestedFormulaList',
+      className: (0, _classnames["default"])('Sqb-NestedFormulaList', {
+        'Sqb-NestedFormulaList--hasCaseWhen': hasNestedCaseWhen
+      }),
       children: (0, _jsxRuntime.jsx)(FormulaList, {
         ref: ref,
         embedded: true,
@@ -335,80 +732,94 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         showPreview: false,
         check: check,
         _type: _type,
+        enableZoom: false,
         parentPopupChannel: parentPopupChannel
       })
     });
   };
   var renderCaseWhenEditor = function renderCaseWhenEditor(value, index) {
+    var caseAtoms = value.caseAtoms || [];
+    var whenClauses = value.whenClauses || [];
+    var elseAtoms = value.elseAtoms;
+    var caseRegionKey = "case-".concat(index, "-case");
+    var elseRegionKey = "case-".concat(index, "-else");
     return (0, _jsxRuntime.jsx)(_CaseWhenGroup["default"], {
-      caseValueContent: renderNestedFormulaList(value.caseValue || [], function (nextList) {
+      isNested: embedded,
+      useBranchScrollInner: !embedded,
+      caseRegionKey: caseRegionKey,
+      elseRegionKey: elseRegionKey,
+      activeRegionKey: hoveredCaseGroupKey,
+      onActivateRegion: setHoveredCaseGroupKey,
+      caseAtomsContent: renderNestedFormulaList(caseAtoms, function (nextList) {
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          caseValue: nextList
+          caseAtoms: nextList
         }));
       }),
-      branches: (value.branches || []).map(function (branch, branchIndex) {
+      whenClauses: whenClauses.map(function (branch, branchIndex) {
         return {
           key: "case-".concat(index, "-branch-").concat(branchIndex),
-          whenContent: renderNestedFormulaList(branch.when || [], function (nextList) {
-            var nextBranches = (value.branches || []).slice();
-            nextBranches[branchIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, branch), {}, {
-              when: nextList
+          canDelete: whenClauses.length > 1,
+          whenContent: renderNestedFormulaList(branch.whenAtoms || [], function (nextList) {
+            var nextWhenClauses = whenClauses.slice();
+            nextWhenClauses[branchIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, branch), {}, {
+              whenAtoms: nextList
             });
             updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           }),
-          thenContent: renderNestedFormulaList(branch.then || [], function (nextList) {
-            var nextBranches = (value.branches || []).slice();
-            nextBranches[branchIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, branch), {}, {
-              then: nextList
+          thenContent: renderNestedFormulaList(branch.thenAtoms || [], function (nextList) {
+            var nextWhenClauses = whenClauses.slice();
+            nextWhenClauses[branchIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, branch), {}, {
+              thenAtoms: nextList
             });
             updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           }),
           onAddAfter: function onAddAfter(e) {
             e.stopPropagation();
-            var nextBranches = (value.branches || []).slice();
-            nextBranches.splice(branchIndex + 1, 0, {
-              when: [{
+            var nextWhenClauses = whenClauses.slice();
+            nextWhenClauses.splice(branchIndex + 1, 0, {
+              whenAtoms: [{
                 val: '',
                 type: _types.AtomsTypeEnum.UNKNOWN
               }],
-              then: [{
+              thenAtoms: [{
                 val: '',
                 type: _types.AtomsTypeEnum.UNKNOWN
               }]
             });
             updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           },
           onDelete: function onDelete(e) {
             e.stopPropagation();
-            var nextBranches = (value.branches || []).filter(function (_, currentIndex) {
+            if (whenClauses.length <= 1) return;
+            var nextWhenClauses = whenClauses.filter(function (_, currentIndex) {
               return currentIndex !== branchIndex;
             });
             updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           }
         };
       }),
-      elseContent: value.elseValue ? renderNestedFormulaList(value.elseValue || [], function (nextList) {
+      elseContent: elseAtoms ? renderNestedFormulaList(elseAtoms || [], function (nextList) {
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          elseValue: nextList
+          elseAtoms: nextList
         }));
       }) : undefined,
       onAddBranch: function onAddBranch(e) {
         e.stopPropagation();
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          branches: [].concat((0, _toConsumableArray2["default"])(value.branches || []), [{
-            when: [{
+          whenClauses: [].concat((0, _toConsumableArray2["default"])(whenClauses), [{
+            whenAtoms: [{
               val: '',
               type: _types.AtomsTypeEnum.UNKNOWN
             }],
-            then: [{
+            thenAtoms: [{
               val: '',
               type: _types.AtomsTypeEnum.UNKNOWN
             }]
@@ -418,7 +829,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       onAddElse: function onAddElse(e) {
         e.stopPropagation();
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          elseValue: [{
+          elseAtoms: [{
             val: '',
             type: _types.AtomsTypeEnum.UNKNOWN
           }]
@@ -427,25 +838,48 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       onRemoveElse: function onRemoveElse(e) {
         e.stopPropagation();
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          elseValue: undefined
+          elseAtoms: undefined
         }));
       },
+      onZoomCase: function onZoomCase(e) {
+        return openCaseWhenFormulaModal(e, value, index);
+      },
       onDeleteCase: function onDeleteCase(e) {
         return handleDel(e, index);
       }
     });
   };
   var renderAndOrEditor = function renderAndOrEditor(value, index) {
+    var createUnknownAtom = function createUnknownAtom() {
+      return {
+        val: '',
+        type: _types.AtomsTypeEnum.UNKNOWN
+      };
+    };
+    var leftAtoms = Array.isArray(value.leftAtoms) ? value.leftAtoms : value.atoms || [createUnknownAtom()];
+    var rightAtoms = Array.isArray(value.rightAtoms) ? value.rightAtoms : [createUnknownAtom()];
     return (0, _jsxRuntime.jsx)(_LogicGroup["default"], {
       operator: value.operator || 'and',
       onToggleOperator: function onToggleOperator() {
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
+          atoms: undefined,
+          leftAtoms: leftAtoms,
+          rightAtoms: rightAtoms,
           operator: value.operator === 'or' ? 'and' : 'or'
         }));
       },
-      content: renderNestedFormulaList(value.list || [], function (nextList) {
+      leftContent: renderNestedFormulaList(leftAtoms, function (nextList) {
+        updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
+          atoms: undefined,
+          rightAtoms: rightAtoms,
+          leftAtoms: nextList
+        }));
+      }),
+      rightContent: renderNestedFormulaList(rightAtoms, function (nextList) {
         updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          list: nextList
+          atoms: undefined,
+          leftAtoms: leftAtoms,
+          rightAtoms: nextList
         }));
       }),
       onDelete: function onDelete(e) {
@@ -453,43 +887,43 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       }
     });
   };
-  var _useState1 = (0, _react.useState)(-1),
-    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
-    ind = _useState10[0],
-    setInd = _useState10[1];
+  var _useState15 = (0, _react.useState)(-1),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    ind = _useState16[0],
+    setInd = _useState16[1];
   var filterCustomType = store.filterCustomType;
   var _ref = (0, _react.useRef)(null);
-  var _useState11 = (0, _react.useState)({
+  var _useState17 = (0, _react.useState)({
       isError: false
     }),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    errorInfo = _useState12[0],
-    setErrorInfo = _useState12[1];
-  var _useState13 = (0, _react.useState)(false),
-    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    isCheck = _useState14[0],
-    setIsCheck = _useState14[1];
-  var myInstanceIdRef = (0, _react.useRef)(Math.random().toString(36).slice(2));
-  var _useState15 = (0, _react.useState)(null),
-    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-    hoveredCaseGroupKey = _useState16[0],
-    setHoveredCaseGroupKey = _useState16[1];
-  var _useState17 = (0, _react.useState)(!!window.__sqb_selection_active__),
     _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-    globalSelectionActive = _useState18[0],
-    setGlobalSelectionActive = _useState18[1];
-  var _useState19 = (0, _react.useState)(window.__sqb_selection_owner__ || null),
+    errorInfo = _useState18[0],
+    setErrorInfo = _useState18[1];
+  var _useState19 = (0, _react.useState)(false),
     _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
-    globalSelectionOwner = _useState20[0],
-    setGlobalSelectionOwner = _useState20[1];
-  var _useState21 = (0, _react.useState)([]),
+    isCheck = _useState20[0],
+    setIsCheck = _useState20[1];
+  var myInstanceIdRef = (0, _react.useRef)(Math.random().toString(36).slice(2));
+  var _useState21 = (0, _react.useState)(null),
     _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
-    selectedIndices = _useState22[0],
-    setSelectedIndices = _useState22[1];
-  var _useState23 = (0, _react.useState)(null),
+    hoveredCaseGroupKey = _useState22[0],
+    setHoveredCaseGroupKey = _useState22[1];
+  var _useState23 = (0, _react.useState)(!!window.__sqb_selection_active__),
     _useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
-    hoveredCopyIndex = _useState24[0],
-    setHoveredCopyIndex = _useState24[1];
+    globalSelectionActive = _useState24[0],
+    setGlobalSelectionActive = _useState24[1];
+  var _useState25 = (0, _react.useState)(window.__sqb_selection_owner__ || null),
+    _useState26 = (0, _slicedToArray2["default"])(_useState25, 2),
+    globalSelectionOwner = _useState26[0],
+    setGlobalSelectionOwner = _useState26[1];
+  var _useState27 = (0, _react.useState)([]),
+    _useState28 = (0, _slicedToArray2["default"])(_useState27, 2),
+    selectedIndices = _useState28[0],
+    setSelectedIndices = _useState28[1];
+  var _useState29 = (0, _react.useState)(null),
+    _useState30 = (0, _slicedToArray2["default"])(_useState29, 2),
+    hoveredCopyIndex = _useState30[0],
+    setHoveredCopyIndex = _useState30[1];
   var getCaseGroupEnd = function getCaseGroupEnd(list, startIndex) {
     var depth = 0;
     for (var index = startIndex; index < list.length; index++) {
@@ -644,6 +1078,9 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     }
     return true;
   };
+  var canShowItemInsertArrows = function canShowItemInsertArrows(item, groupType) {
+    return canShowInsertArrows(item, groupType);
+  };
   (0, _react.useEffect)(function () {
     var _errorInfo = (0, _utils3.validateExpressionIntegrity)(caseList);
     setErrorInfo(_errorInfo);
@@ -1192,15 +1629,16 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       };
     }
     if (type === _types.AtomsTypeEnum.FIELD) {
+      var displayName = getFieldDisplayName(v);
       return {
         className: (0, _classnames["default"])({
-          notSelected: !(v !== null && v !== void 0 && v.fieldName)
+          notSelected: !displayName
         }),
         onClick: function onClick(e) {
           return handleField(e, index, v);
         },
         node: (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [!(v !== null && v !== void 0 && v.fieldName) && (0, _locale.__)('customColumn.selectField'), v.fieldName, renderDeleteIcon(v, index, groupType)]
+          children: [!displayName && (0, _locale.__)('customColumn.selectField'), displayName, renderDeleteIcon(v, index, groupType)]
         })
       };
     }
@@ -1368,32 +1806,41 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     if (groupType === 'logic') {
       return {
         className: (0, _classnames["default"])('gray-name', 'notSelected'),
-        style: {
-          minWidth: 44,
-          justifyContent: 'center'
-        },
+        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, ADD_TRIGGER_STYLE), {}, {
+          minWidth: 44
+        }),
         node: selectOperator({
           triggerElement: function triggerElement() {
-            return renderTokenContent((0, _jsxRuntime.jsx)(_icons.AddIcon, {}));
+            return renderTokenContent((0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+              title: "\u6DFB\u52A0",
+              children: (0, _jsxRuntime.jsx)(_icons.AddIcon, {})
+            }));
           },
           ind: index,
           position: ''
         })
       };
     }
+    var customInputClassName = (0, _classnames["default"])({
+      notSelected: true
+    });
     return {
-      className: (0, _classnames["default"])({
-        notSelected: true
-      }),
-      node: selectOperator({
-        triggerElement: function triggerElement() {
-          return renderTokenContent((0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [(0, _locale.__)('customColumn.selectCustomInput'), renderDeleteIcon(v, index, groupType)]
-          }));
-        },
-        ind: index,
-        position: ''
-      })
+      raw: true,
+      node: (0, _jsxRuntime.jsx)(_itemName["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, getItemNameProps(v)), {}, {
+        children: selectOperator({
+          triggerElement: function triggerElement() {
+            return (0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])('Sqb-TableName', customInputClassName),
+              style: getTokenStyleByClassName(customInputClassName),
+              children: renderTokenContent((0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [(0, _locale.__)('customColumn.selectCustomInput'), renderDeleteIcon(v, index, groupType)]
+              }))
+            });
+          },
+          ind: index,
+          position: ''
+        })
+      }))
     };
   };
   var copyDom = function copyDom() {
@@ -1431,6 +1878,8 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     var showCheckbox = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
     var itemContent = itemDom(v, i, groupType);
     var isCompositeAtom = v.type === _types.AtomsTypeEnum.CASE_WHEN || v.type === _types.AtomsTypeEnum.AND_OR;
+    var showAfterArrow = canShowItemInsertArrows(v, groupType);
+    var showBeforeArrow = canShowItemInsertArrows(v, groupType);
     return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
       children: (0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames["default"])('Sqb-Filter-item', (0, _defineProperty2["default"])({
@@ -1438,6 +1887,8 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           'item-fixed': v.fixed || false,
           'item-selected': isCheck,
           'item-composite': isCompositeAtom,
+          'has-left-arrow': showBeforeArrow,
+          'has-right-arrow': showAfterArrow,
           'group-child': groupType !== 'single',
           'group-flow-child': groupType === 'caseWhen',
           'group-logic-child': groupType === 'logic'
@@ -1450,7 +1901,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           if (isCheck) return;
           setInd(-1);
         },
-        children: [copyDom(i), canShowInsertArrows(v, groupType) && selectOperator({
+        children: [copyDom(i), showBeforeArrow && selectOperator({
           triggerElement: function triggerElement() {
             return (0, _jsxRuntime.jsx)("div", {
               className: 'left-arrow',
@@ -1479,19 +1930,19 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           style: {
             pointerEvents: isCheck || store.isMetabaseCopy ? 'none' : 'auto'
           },
-          className: (0, _classnames["default"])({
-            openCheck: isCheck
+          className: (0, _classnames["default"])('Sqb-Filter-item-node', {
+            openCheck: isCheck && !isCompositeAtom
           }),
-          children: (0, _jsxRuntime.jsx)(_itemName["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, getItemNameProps(v)), {}, {
-            children: itemContent.raw ? itemContent.node : (0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          children: itemContent.raw ? itemContent.node : (0, _jsxRuntime.jsx)(_itemName["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, getItemNameProps(v)), {}, {
+            children: (0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
               className: (0, _classnames["default"])('Sqb-TableName', itemContent.className),
               onClick: itemContent.onClick,
-              style: itemContent.style
+              style: getTokenStyleByClassName(itemContent.className, itemContent.style)
             }, itemContent.attrs || {}), {}, {
               children: itemContent.node
             }))
           }))
-        }), canShowInsertArrows(v, groupType) && selectOperator({
+        }), showAfterArrow && selectOperator({
           triggerElement: function triggerElement(value) {
             return (0, _jsxRuntime.jsx)("div", {
               className: 'right-arrow',
@@ -1519,25 +1970,34 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
   };
   var renderDeleteIcon = function renderDeleteIcon(item, index, groupType) {
     if (!canDeleteItem(item, groupType)) return null;
-    return (0, _jsxRuntime.jsx)("span", {
-      className: 'item-del',
-      style: {
-        fontSize: 0
-      },
-      onClick: function onClick(e) {
-        return handleDel(e, index);
-      },
-      children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+    return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: "\u5220\u9664",
+      children: (0, _jsxRuntime.jsx)("span", {
+        className: 'item-del',
+        style: {
+          fontSize: 0
+        },
+        onClick: function onClick(e) {
+          return handleDel(e, index);
+        },
+        children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {
+          width: TOKEN_DELETE_ICON_SIZE,
+          height: TOKEN_DELETE_ICON_SIZE
+        })
+      })
     });
   };
   var renderCaseRecoverButton = function renderCaseRecoverButton(onClick, className, label) {
-    return (0, _jsxRuntime.jsxs)("button", {
-      type: 'button',
-      className: (0, _classnames["default"])('Sqb-CaseRecover', className),
-      onClick: onClick,
-      children: [(0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {}), (0, _jsxRuntime.jsx)("span", {
-        children: label
-      })]
+    return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: label,
+      children: (0, _jsxRuntime.jsxs)("button", {
+        type: 'button',
+        className: (0, _classnames["default"])('Sqb-CaseRecover', className),
+        onClick: onClick,
+        children: [(0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {}), (0, _jsxRuntime.jsx)("span", {
+          children: label
+        })]
+      })
     });
   };
   var renderGroupInsertArrow = function renderGroupInsertArrow(index, position) {
@@ -1561,57 +2021,81 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       trigger: 'hover'
     });
   };
+  var showFormulaListZoom = !embedded && enableZoom;
+  var showCopyTools = !embedded && isCopy && caseList.length > 0;
+  var renderFormulaListZoomButton = function renderFormulaListZoomButton() {
+    return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: "\u7F16\u8F91",
+      children: (0, _jsxRuntime.jsx)("button", {
+        type: 'button',
+        className: 'Sqb-FormulaList-zoom formula-node-tool',
+        style: FORMULA_LIST_ZOOM_BUTTON_STYLE,
+        onClick: openFormulaListModal,
+        children: (0, _jsxRuntime.jsx)(_pandoraIcons.FullscreenOExpand, {})
+      })
+    });
+  };
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: (0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames["default"])('Sqb-NotebookCell', {
         'Sqb-NotebookCell--embedded': embedded
       }),
-      children: [!embedded && isCopy && caseList.length > 0 && (0, _jsxRuntime.jsxs)(_pandora.Space, {
-        size: 'small',
-        direction: 'vertical',
-        className: (0, _classnames["default"])('item-isCheck', {
-          isCheck: isCheck
-        }),
-        children: [(0, _jsxRuntime.jsx)(_pandora.Button, {
-          className: (0, _classnames["default"])('primary-color', {}),
-          size: 'small',
-          onClick: function onClick() {
-            return _setIsCheck(!isCheck);
-          },
-          primary: true,
-          children: isCheck ? (0, _locale.__)('customColumn.closeCopy') : (0, _locale.__)('customColumn.openCopy')
-        }), (0, _jsxRuntime.jsx)(_pandora.Button, {
-          className: (0, _classnames["default"])('', 'primary-color', {}),
-          size: 'small',
-          onClick: function onClick() {
-            return copyAll();
-          },
-          primary: true,
-          children: (0, _locale.__)('customColumn.copyAll')
-        }), selectedIndices.length > 0 && (0, _jsxRuntime.jsx)(_pandora.Button, {
-          primary: true,
-          danger: true,
-          size: 'small',
-          onClick: function onClick() {
-            return delSelect();
-          },
-          children: (0, _locale.__)('customColumn.delSelect')
-        }), !isCheck && checkedItemsCount > 0 && (0, _jsxRuntime.jsx)(_pandora.Button, {
-          primary: true,
-          warning: true,
+      children: [showCopyTools ? (0, _jsxRuntime.jsxs)("div", {
+        className: 'Sqb-FormulaListTopTools',
+        children: [(0, _jsxRuntime.jsxs)(_pandora.Space, {
           size: 'small',
-          onClick: function onClick() {
-            return initPaste();
-          },
-          children: "\u6E05\u9664\u590D\u5236"
-        })]
+          direction: 'horizontal',
+          className: (0, _classnames["default"])('item-isCheck', {
+            isCheck: isCheck
+          }),
+          children: [(0, _jsxRuntime.jsx)(_pandora.Button, {
+            className: (0, _classnames["default"])('primary-color', {}),
+            size: 'small',
+            onClick: function onClick() {
+              return _setIsCheck(!isCheck);
+            },
+            primary: true,
+            children: isCheck ? (0, _locale.__)('customColumn.closeCopy') : (0, _locale.__)('customColumn.openCopy')
+          }), (0, _jsxRuntime.jsx)(_pandora.Button, {
+            className: (0, _classnames["default"])('', 'primary-color', {}),
+            size: 'small',
+            onClick: function onClick() {
+              return copyAll();
+            },
+            primary: true,
+            children: (0, _locale.__)('customColumn.copyAll')
+          }), selectedIndices.length > 0 && (0, _jsxRuntime.jsx)(_pandora.Button, {
+            primary: true,
+            danger: true,
+            size: 'small',
+            onClick: function onClick() {
+              return delSelect();
+            },
+            children: (0, _locale.__)('customColumn.delSelect')
+          }), !isCheck && checkedItemsCount > 0 && (0, _jsxRuntime.jsx)(_pandora.Button, {
+            primary: true,
+            warning: true,
+            size: 'small',
+            onClick: function onClick() {
+              return initPaste();
+            },
+            children: "\u6E05\u9664\u590D\u5236"
+          })]
+        }), showFormulaListZoom && renderFormulaListZoomButton()]
+      }) : showFormulaListZoom && (0, _jsxRuntime.jsx)("div", {
+        className: 'Sqb-FormulaListFloatingTools',
+        children: renderFormulaListZoomButton()
       }), caseList.map(function (item, itemIndex) {
         return renderItemShell(item, itemIndex, 'single');
       }), Array.from(caseList).length < 1 && selectOperator({
         triggerElement: function triggerElement() {
-          return (0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames["default"])("Sqb-TableName gray-name"),
-            children: (0, _jsxRuntime.jsx)(_icons.AddIcon, {})
+          return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            title: "\u6DFB\u52A0",
+            children: (0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames["default"])("Sqb-TableName gray-name"),
+              style: ADD_TRIGGER_STYLE,
+              children: (0, _jsxRuntime.jsx)(_icons.AddIcon, {})
+            })
           });
         },
         ind: -1,