@gingkoo/pandora-metabase 1.0.118 → 1.0.120

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

@@ -1,7 +1,8 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["notExistsToolbar", "toolbar"],
   _excluded2 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
@@ -11,7 +12,6 @@ import React, { useEffect, useState, useMemo, useRef, forwardRef } from 'react';
 import './index.less';
 import { FieldString, FieldNumber, FfPlus } from '@gingkoo/pandora-icons';
 import cx from 'classnames';
-// import './index.less';
 import Metabase from '../../../index';
 import { __ } from '../../../locale';
 import isEqual from 'lodash/isEqual';
@@ -31,22 +31,25 @@ import { useStore, Provider } from '../../../hooks/use-provider';
 import ItemName from '../../modules/components/item-name';
 import DiffViewer from '../diff-viewer';
 import storage from '../../../utils/storage';
+import { getTopLayerZIndex } from '../../../utils/helper-dom';
+import CaseWhenGroup from './CaseWhenGroup';
+import LogicGroup from './LogicGroup';
+var CASE_FIXED_OPERATORS = ['case', 'when', 'then', 'else', 'end'];
+var LOGIC_FIXED_OPERATORS = ['(', ')'];
+var LOGIC_REQUIRED_OPERATORS = ['(', ')'];
 var FormulaList = forwardRef(function (props, ref) {
-  var _storage$_metabaseCop, _caseList2;
-  // 响应 storage._metabaseCopyItems 变化，保证粘贴按钮能实时显示
+  var _storage$_metabaseCop;
   var _useState = useState((storage === null || storage === void 0 || (_storage$_metabaseCop = storage._metabaseCopyItems) === null || _storage$_metabaseCop === void 0 ? void 0 : _storage$_metabaseCop.length) || 0),
     _useState2 = _slicedToArray(_useState, 2),
     checkedItemsCount = _useState2[0],
     setCheckedItemsCount = _useState2[1];
   useEffect(function () {
     var _storage$_metabaseCop3;
-    // 监听 _metabaseCopyItems 变化（自定义事件）
     var handler = function handler() {
       var _storage$_metabaseCop2;
       setCheckedItemsCount((storage === null || storage === void 0 || (_storage$_metabaseCop2 = storage._metabaseCopyItems) === null || _storage$_metabaseCop2 === void 0 ? void 0 : _storage$_metabaseCop2.length) || 0);
     };
     window.addEventListener('sqb-checked-items-changed', handler);
-    // 初始化
     setCheckedItemsCount((storage === null || storage === void 0 || (_storage$_metabaseCop3 = storage._metabaseCopyItems) === null || _storage$_metabaseCop3 === void 0 ? void 0 : _storage$_metabaseCop3.length) || 0);
     return function () {
       window.removeEventListener('sqb-checked-items-changed', handler);
@@ -68,7 +71,96 @@ var FormulaList = forwardRef(function (props, ref) {
     showPreview = _props$showPreview === void 0 ? true : _props$showPreview,
     check = props.check,
     _props$_type = props._type,
-    _type = _props$_type === void 0 ? 'filter' : _props$_type;
+    _type = _props$_type === void 0 ? 'filter' : _props$_type,
+    _props$embedded = props.embedded,
+    embedded = _props$embedded === void 0 ? false : _props$embedded,
+    _props$enableCopy = props.enableCopy,
+    enableCopy = _props$enableCopy === void 0 ? true : _props$enableCopy,
+    parentPopupChannel = props.parentPopupChannel;
+  var parentPopupLockCountRef = useRef(0);
+  var parentPopupUnlockTimerRef = useRef(null);
+  var setParentClosable = function setParentClosable(closable) {
+    if (!parentPopupChannel) return;
+    if (parentPopupChannel === 'secondary') {
+      store.setClosable2(closable);
+      return;
+    }
+    store.setClosable(closable);
+  };
+  var lockParentPopup = function lockParentPopup() {
+    if (!parentPopupChannel) return;
+    if (parentPopupUnlockTimerRef.current) {
+      window.clearTimeout(parentPopupUnlockTimerRef.current);
+      parentPopupUnlockTimerRef.current = null;
+    }
+    parentPopupLockCountRef.current += 1;
+    if (parentPopupLockCountRef.current === 1) {
+      setParentClosable(false);
+    }
+  };
+  var unlockParentPopup = function unlockParentPopup() {
+    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    if (!parentPopupChannel) return;
+    var runUnlock = function runUnlock() {
+      parentPopupUnlockTimerRef.current = null;
+      parentPopupLockCountRef.current = Math.max(0, parentPopupLockCountRef.current - 1);
+      if (parentPopupLockCountRef.current === 0) {
+        setParentClosable(true);
+      }
+    };
+    if (delay > 0) {
+      if (parentPopupUnlockTimerRef.current) {
+        window.clearTimeout(parentPopupUnlockTimerRef.current);
+      }
+      parentPopupUnlockTimerRef.current = window.setTimeout(runUnlock, delay);
+      return;
+    }
+    runUnlock();
+  };
+  var openChildModal = function openChildModal(options) {
+    var _options$zIndex, _modalInstance;
+    var lockDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 120;
+    if (parentPopupChannel) {
+      lockParentPopup();
+    }
+    var modalZIndex = (_options$zIndex = options.zIndex) !== null && _options$zIndex !== void 0 ? _options$zIndex : getTopLayerZIndex() + 1;
+    var closed = false;
+    var modalInstance;
+    var releaseParentPopup = function releaseParentPopup() {
+      if (!parentPopupChannel || closed) return;
+      closed = true;
+      unlockParentPopup(lockDelay);
+    };
+    modalInstance = Modal2.openModal(_objectSpread(_objectSpread({
+      zIndex: modalZIndex
+    }, options), {}, {
+      onClose: function onClose() {
+        var _options$onClose;
+        releaseParentPopup();
+        (_options$onClose = options.onClose) === null || _options$onClose === void 0 || _options$onClose.call(options);
+      }
+    }));
+    var originalClose = (_modalInstance = modalInstance) === null || _modalInstance === void 0 || (_modalInstance = _modalInstance.close) === null || _modalInstance === void 0 ? void 0 : _modalInstance.bind(modalInstance);
+    if (originalClose) {
+      modalInstance.close = function () {
+        releaseParentPopup();
+        return originalClose.apply(void 0, arguments);
+      };
+    }
+    return modalInstance;
+  };
+  useEffect(function () {
+    return function () {
+      if (parentPopupUnlockTimerRef.current) {
+        window.clearTimeout(parentPopupUnlockTimerRef.current);
+        parentPopupUnlockTimerRef.current = null;
+      }
+      if (parentPopupLockCountRef.current > 0) {
+        parentPopupLockCountRef.current = 0;
+        setParentClosable(true);
+      }
+    };
+  }, [parentPopupChannel]);
   var mergedTypes = useMemo(function () {
     var map = new Map();
     [].concat(_toConsumableArray(_customTypes), _toConsumableArray(otherTypes)).forEach(function (item) {
@@ -90,14 +182,12 @@ var FormulaList = forwardRef(function (props, ref) {
     return map;
   }, [otherTypes]);
   var caseList = value || [];
-  // const [caseList, setCaseListState] = useState<AtomsItem[]>(cloneDeep(value));
   var caseListRef = useRef(caseList);
   var operatorList = useMemo(function () {
     if (store.operatorList.length > 0) {
       return store.operatorList;
-    } else {
-      return __operatorList;
     }
+    return __operatorList;
   }, [store.operatorList]);
   var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -108,6 +198,9 @@ var FormulaList = forwardRef(function (props, ref) {
     previewMode = _useState6[0],
     setPreviewMode = _useState6[1];
   var _useState7 = useState(function () {
+      if (!enableCopy) {
+        return false;
+      }
       if (store.copyType.includes(FormulaTypeEnum.ALL)) {
         return true;
       }
@@ -116,33 +209,221 @@ var FormulaList = forwardRef(function (props, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isCopy = _useState8[0],
     setIsCopy = _useState8[1];
-  // const [formulaList, setFunctionList] = useState<{ [params: string]: FormulaTemplatesItem }>(
-  // );
   var formulaList = useMemo(function () {
     return getObjTem(store.formulaTemplates);
   }, [store.formulaTemplates]);
-  useEffect(function () {
-    setOldCode(getPreviewStr(caseList));
-  }, []);
   var _useState9 = useState(''),
     _useState0 = _slicedToArray(_useState9, 2),
     filterVal = _useState0[0],
     setFilterVal = _useState0[1];
   var setCaseList = function setCaseList(data) {
-    var quotes = data.map(function (v, i) {
-      if (v !== null && v !== void 0 && v.quotes) {
-        return v === null || v === void 0 ? void 0 : v.quotes;
-      } else if (v !== null && v !== void 0 && v.fieldName) {
-        return v === null || v === void 0 ? void 0 : v.fieldName;
-      } else {
-        return v.val;
-      }
+    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(' ');
-    // setCaseListState(data);
     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 getItemDisplayText(v) {
+    if (!v) return '';
+    if (v.quotes) return v.quotes;
+    if (v.fieldName) return v.fieldName;
+    if (v.type === AtomsTypeEnum.FORMULA) {
+      return v.name ? getQuotes(v, v.args, formulaList) : '';
+    }
+    if (v.type === AtomsTypeEnum.CASE_WHEN) {
+      var caseValueText = (v.caseValue || []).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(' ');
+        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();
+    }
+    if (v.type === 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();
+    }
+    if (Array.isArray(v.val)) {
+      return v.val.join(', ');
+    }
+    return v.val || '';
+  }
+  var getPreviewStr = function getPreviewStr() {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return data.map(function (v) {
+      if (v.type === AtomsTypeEnum.OPERATOR && (v.val === 'and' || v.val === 'or')) {
+        return "\r".concat(v.val, "\r");
+      }
+      if (v.type === AtomsTypeEnum.OPERATOR && (v.val === '(' || v.val === ')')) {
+        return "".concat(v.val);
+      }
+      return getItemDisplayText(v);
+    }).join(' ');
+  };
+  useEffect(function () {
+    setOldCode(getPreviewStr(caseList));
+  }, []);
+  var renderTokenContent = function renderTokenContent(children) {
+    return _jsx("span", {
+      className: 'Sqb-TokenContent',
+      children: children
+    });
+  };
+  var renderNestedFormulaList = function renderNestedFormulaList(list, onNestedChange) {
+    return _jsx("div", {
+      className: 'Sqb-NestedFormulaList',
+      children: _jsx(FormulaList, {
+        ref: ref,
+        embedded: true,
+        value: list,
+        data: data,
+        exitData: exitData,
+        onChange: function onChange(atoms) {
+          return onNestedChange(atoms);
+        },
+        customTypes: _customTypes,
+        otherTypes: otherTypes,
+        isCustom: isCustom,
+        showPreview: false,
+        check: check,
+        _type: _type,
+        parentPopupChannel: parentPopupChannel
+      })
+    });
+  };
+  var renderCaseWhenEditor = function renderCaseWhenEditor(value, index) {
+    return _jsx(CaseWhenGroup, {
+      caseValueContent: renderNestedFormulaList(value.caseValue || [], function (nextList) {
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          caseValue: nextList
+        }));
+      }),
+      branches: (value.branches || []).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] = _objectSpread(_objectSpread({}, branch), {}, {
+              when: nextList
+            });
+            updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+              branches: nextBranches
+            }));
+          }),
+          thenContent: renderNestedFormulaList(branch.then || [], function (nextList) {
+            var nextBranches = (value.branches || []).slice();
+            nextBranches[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
+              then: nextList
+            });
+            updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+              branches: nextBranches
+            }));
+          }),
+          onAddAfter: function onAddAfter(e) {
+            e.stopPropagation();
+            var nextBranches = (value.branches || []).slice();
+            nextBranches.splice(branchIndex + 1, 0, {
+              when: [{
+                val: '',
+                type: AtomsTypeEnum.UNKNOWN
+              }],
+              then: [{
+                val: '',
+                type: AtomsTypeEnum.UNKNOWN
+              }]
+            });
+            updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+              branches: nextBranches
+            }));
+          },
+          onDelete: function onDelete(e) {
+            e.stopPropagation();
+            var nextBranches = (value.branches || []).filter(function (_, currentIndex) {
+              return currentIndex !== branchIndex;
+            });
+            updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+              branches: nextBranches
+            }));
+          }
+        };
+      }),
+      elseContent: value.elseValue ? renderNestedFormulaList(value.elseValue || [], function (nextList) {
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          elseValue: nextList
+        }));
+      }) : undefined,
+      onAddBranch: function onAddBranch(e) {
+        e.stopPropagation();
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          branches: [].concat(_toConsumableArray(value.branches || []), [{
+            when: [{
+              val: '',
+              type: AtomsTypeEnum.UNKNOWN
+            }],
+            then: [{
+              val: '',
+              type: AtomsTypeEnum.UNKNOWN
+            }]
+          }])
+        }));
+      },
+      onAddElse: function onAddElse(e) {
+        e.stopPropagation();
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          elseValue: [{
+            val: '',
+            type: AtomsTypeEnum.UNKNOWN
+          }]
+        }));
+      },
+      onRemoveElse: function onRemoveElse(e) {
+        e.stopPropagation();
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          elseValue: undefined
+        }));
+      },
+      onDeleteCase: function onDeleteCase(e) {
+        return handleDel(e, index);
+      }
+    });
+  };
+  var renderAndOrEditor = function renderAndOrEditor(value, index) {
+    return _jsx(LogicGroup, {
+      operator: value.operator || 'and',
+      onToggleOperator: function onToggleOperator() {
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          operator: value.operator === 'or' ? 'and' : 'or'
+        }));
+      },
+      content: renderNestedFormulaList(value.list || [], function (nextList) {
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          list: nextList
+        }));
+      }),
+      onDelete: function onDelete(e) {
+        return handleDel(e, index);
+      }
+    });
+  };
   var _useState1 = useState(-1),
     _useState10 = _slicedToArray(_useState1, 2),
     ind = _useState10[0],
@@ -160,51 +441,194 @@ var FormulaList = forwardRef(function (props, ref) {
     isCheck = _useState14[0],
     setIsCheck = _useState14[1];
   var myInstanceIdRef = useRef(Math.random().toString(36).slice(2));
-  var _useState15 = useState(!!window.__sqb_selection_active__),
+  var _useState15 = useState(null),
     _useState16 = _slicedToArray(_useState15, 2),
-    globalSelectionActive = _useState16[0],
-    setGlobalSelectionActive = _useState16[1];
-  var _useState17 = useState(window.__sqb_selection_owner__ || null),
+    hoveredCaseGroupKey = _useState16[0],
+    setHoveredCaseGroupKey = _useState16[1];
+  var _useState17 = useState(!!window.__sqb_selection_active__),
     _useState18 = _slicedToArray(_useState17, 2),
-    globalSelectionOwner = _useState18[0],
-    setGlobalSelectionOwner = _useState18[1];
-  var _useState19 = useState([]),
+    globalSelectionActive = _useState18[0],
+    setGlobalSelectionActive = _useState18[1];
+  var _useState19 = useState(window.__sqb_selection_owner__ || null),
     _useState20 = _slicedToArray(_useState19, 2),
-    selectedIndices = _useState20[0],
-    setSelectedIndices = _useState20[1];
-  var _useState21 = useState(null),
+    globalSelectionOwner = _useState20[0],
+    setGlobalSelectionOwner = _useState20[1];
+  var _useState21 = useState([]),
     _useState22 = _slicedToArray(_useState21, 2),
-    hoveredCopyIndex = _useState22[0],
-    setHoveredCopyIndex = _useState22[1];
-  useEffect(function () {
-    var _errorInfo = validateExpressionIntegrity(caseList);
-    setErrorInfo(_errorInfo);
+    selectedIndices = _useState22[0],
+    setSelectedIndices = _useState22[1];
+  var _useState23 = useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    hoveredCopyIndex = _useState24[0],
+    setHoveredCopyIndex = _useState24[1];
+  var getCaseGroupEnd = function getCaseGroupEnd(list, startIndex) {
+    var depth = 0;
+    for (var index = startIndex; index < list.length; index++) {
+      var item = list[index];
+      if (item.type !== AtomsTypeEnum.OPERATOR) continue;
+      if (item.val === 'case') depth += 1;
+      if (item.val === 'end') {
+        depth -= 1;
+        if (depth === 0) {
+          return index;
+        }
+      }
+    }
+    return startIndex;
+  };
+  var getLogicGroupIndices = function getLogicGroupIndices(list, startIndex) {
+    var _list, _list2;
+    var prevItem = list[startIndex - 1];
+    var currentItem = list[startIndex];
+    if (!currentItem) return [];
+    if (currentItem.type === AtomsTypeEnum.OPERATOR && ['and', 'or'].includes(currentItem.val) && ((_list = list[startIndex + 1]) === null || _list === void 0 ? void 0 : _list.type) === AtomsTypeEnum.OPERATOR && ((_list2 = list[startIndex + 1]) === null || _list2 === void 0 ? void 0 : _list2.val) === '(') {
+      var depth = 0;
+      var _indices = [];
+      for (var index = startIndex; index < list.length; index++) {
+        var item = list[index];
+        _indices.push(index);
+        if ((item === null || item === void 0 ? void 0 : item.type) !== AtomsTypeEnum.OPERATOR) continue;
+        if (item.val === '(') depth += 1;
+        if (item.val === ')') {
+          depth -= 1;
+          if (depth === 0) {
+            return _indices;
+          }
+        }
+      }
+      return _indices;
+    }
+    if (currentItem.type === AtomsTypeEnum.OPERATOR) return [];
+    if ((prevItem === null || prevItem === void 0 ? void 0 : prevItem.type) === AtomsTypeEnum.OPERATOR && ['and', 'or'].includes((prevItem === null || prevItem === void 0 ? void 0 : prevItem.val) || '')) {
+      return [];
+    }
+    var indices = [startIndex];
+    var cursor = startIndex;
+    while (cursor + 2 < list.length) {
+      var operatorItem = list[cursor + 1];
+      var nextItem = list[cursor + 2];
+      if ((operatorItem === null || operatorItem === void 0 ? void 0 : operatorItem.type) !== AtomsTypeEnum.OPERATOR || !['and', 'or'].includes((operatorItem === null || operatorItem === void 0 ? void 0 : operatorItem.val) || '') || !nextItem || nextItem.type === AtomsTypeEnum.OPERATOR) {
+        break;
+      }
+      indices.push(cursor + 1, cursor + 2);
+      cursor += 2;
+    }
+    return indices.length >= 3 ? indices : [];
+  };
+  var renderGroups = useMemo(function () {
+    var groups = [];
+    var index = 0;
+    while (index < caseList.length) {
+      var item = caseList[index];
+      if ((item === null || item === void 0 ? void 0 : item.type) === AtomsTypeEnum.OPERATOR && (item === null || item === void 0 ? void 0 : item.val) === 'case') {
+        var endIndex = getCaseGroupEnd(caseList, index);
+        groups.push({
+          type: 'caseWhen',
+          indices: Array.from({
+            length: endIndex - index + 1
+          }, function (_, offset) {
+            return index + offset;
+          })
+        });
+        index = endIndex + 1;
+        continue;
+      }
+      var logicIndices = getLogicGroupIndices(caseList, index);
+      if (logicIndices.length > 0) {
+        groups.push({
+          type: 'logic',
+          indices: logicIndices
+        });
+        index = logicIndices[logicIndices.length - 1] + 1;
+        continue;
+      }
+      groups.push({
+        type: 'single',
+        indices: [index]
+      });
+      index += 1;
+    }
+    return groups;
   }, [caseList]);
-  // 获取预览字符串
-  var getPreviewStr = function getPreviewStr() {
-    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    return data.map(function (v, i) {
-      if (v !== null && v !== void 0 && v.quotes) {
-        return v === null || v === void 0 ? void 0 : v.quotes;
-      } else if (v !== null && v !== void 0 && v.fieldName) {
-        return v === null || v === void 0 ? void 0 : v.fieldName;
-      } else {
-        if (v.type === AtomsTypeEnum.OPERATOR && (v.val === 'and' || v.val === 'or')) {
-          return "\r".concat(v.val, "\r");
+  var getCaseGroupRows = function getCaseGroupRows(indices) {
+    var rows = [];
+    var currentRow = [];
+    var depth = 0;
+    indices.forEach(function (itemIndex) {
+      var item = caseList[itemIndex];
+      if ((item === null || item === void 0 ? void 0 : item.type) === AtomsTypeEnum.OPERATOR) {
+        if (item.val === 'case') {
+          if (depth === 0) {
+            if (currentRow.length > 0) rows.push(currentRow);
+            currentRow = [itemIndex];
+            depth = 1;
+            return;
+          }
+          depth += 1;
         }
-        if (v.type === AtomsTypeEnum.OPERATOR && (v.val === '(' || v.val === ')')) {
-          return "".concat(v.val);
+        if (depth === 1 && (item.val === 'when' || item.val === 'else')) {
+          if (currentRow.length > 0) rows.push(currentRow);
+          currentRow = [itemIndex];
+          return;
+        }
+        if (item.val === 'end') {
+          depth -= 1;
+          if (depth === 0) {
+            if (currentRow.length > 0) rows.push(currentRow);
+            rows.push([itemIndex]);
+            currentRow = [];
+            return;
+          }
         }
-        return v.val;
       }
-    }).join(' ');
+      currentRow.push(itemIndex);
+    });
+    if (currentRow.length > 0) {
+      rows.push(currentRow);
+    }
+    return rows;
   };
+  var isFixedCaseOperator = function isFixedCaseOperator(item) {
+    return item.type === AtomsTypeEnum.OPERATOR && CASE_FIXED_OPERATORS.includes(item.val || '');
+  };
+  var isFixedLogicOperator = function isFixedLogicOperator(item) {
+    return item.type === AtomsTypeEnum.OPERATOR && LOGIC_FIXED_OPERATORS.includes(item.val || '');
+  };
+  var isRequiredLogicOperator = function isRequiredLogicOperator(item) {
+    return item.type === AtomsTypeEnum.OPERATOR && LOGIC_REQUIRED_OPERATORS.includes(item.val || '');
+  };
+  var canDeleteItem = function canDeleteItem(item, groupType) {
+    if (groupType === 'logic') {
+      return !isRequiredLogicOperator(item);
+    }
+    return !isFixedCaseOperator(item);
+  };
+  var canShowInsertArrows = function canShowInsertArrows(item, groupType) {
+    if (groupType === 'caseWhen') {
+      return !isFixedCaseOperator(item);
+    }
+    if (groupType === 'logic') {
+      return !isRequiredLogicOperator(item);
+    }
+    return !(item.type === AtomsTypeEnum.OPERATOR && ['case', 'end'].includes(item.val));
+  };
+  useEffect(function () {
+    var _errorInfo = validateExpressionIntegrity(caseList);
+    setErrorInfo(_errorInfo);
+  }, [caseList]);
   function closePopup() {
     store.setPopup({
       visible: false
     });
   }
-  // 连接符
+  var getSelectTriggerProps = function getSelectTriggerProps() {
+    return {
+      clickToClose: true,
+      style: {
+        zIndex: getTopLayerZIndex() + 1
+      }
+    };
+  };
   var selectOperator = function selectOperator(props) {
     var triggerElement = props.triggerElement,
       ind = props.ind,
@@ -220,9 +644,7 @@ var FormulaList = forwardRef(function (props, ref) {
       },
       showSearch: true,
       trigger: trigger,
-      triggerProps: {
-        clickToClose: true
-      },
+      triggerProps: getSelectTriggerProps(),
       virtualListProps: {
         threshold: null
       },
@@ -239,6 +661,9 @@ var FormulaList = forwardRef(function (props, ref) {
       onVisibleChange: function onVisibleChange(visible) {
         if (visible) {
           setFilterVal('');
+          lockParentPopup();
+        } else {
+          unlockParentPopup(300);
         }
       },
       value: '',
@@ -252,7 +677,6 @@ var FormulaList = forwardRef(function (props, ref) {
           },
           value: filterVal,
           placeholder: __('SqlQueryBuilder.pleaseEnter'),
-          // size='large'
           onChange: function onChange(val) {
             setFilterVal(val);
           }
@@ -270,7 +694,6 @@ var FormulaList = forwardRef(function (props, ref) {
       })]
     });
   };
-  // 字段
   function handleField(e, i, val) {
     store.setPopup({
       visible: true,
@@ -281,7 +704,7 @@ var FormulaList = forwardRef(function (props, ref) {
         multiple: false,
         value: [val],
         theme: ColumnsPopupThemeEnum.skyBlue,
-        onSelect: function onSelect(fields, quotes) {
+        onSelect: function onSelect(fields) {
           var _caseList = caseList.slice();
           _caseList[i] = fields[0];
           setCaseList(_caseList);
@@ -290,7 +713,6 @@ var FormulaList = forwardRef(function (props, ref) {
       })
     });
   }
-  // 常量
   var handleConstant = function handleConstant(val, i) {
     var _caseList = caseList.slice();
     var currentItem = _caseList[i];
@@ -310,7 +732,6 @@ var FormulaList = forwardRef(function (props, ref) {
     _caseList = insertTemplateAt(oldVal, val, _caseList, i);
     setCaseList(_caseList);
   };
-  // 表达式
   function handleExpression(e, i, val) {
     store.setPopup({
       visible: true,
@@ -331,7 +752,6 @@ var FormulaList = forwardRef(function (props, ref) {
       })
     });
   }
-  // 删除
   function handleDel(e, index) {
     e.stopPropagation();
     var _caseList = caseList.slice();
@@ -339,13 +759,21 @@ var FormulaList = forwardRef(function (props, ref) {
     setCaseList(_caseList);
     closePopup();
   }
-  // 重置粘贴状态
+  function handleDelItems(e, indices) {
+    e.stopPropagation();
+    if (!indices.length) return;
+    var indexSet = new Set(indices);
+    var _caseList = caseList.filter(function (_, itemIndex) {
+      return !indexSet.has(itemIndex);
+    });
+    setCaseList(_caseList);
+    closePopup();
+  }
   function initPaste() {
     var isDispatch = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     setSelectedIndices([]);
     setLocalItem([]);
     setIsCheck(false);
-    //有些事不需要通知别的过滤器重置勾选状态
     if (isDispatch) {
       window.dispatchEvent(new CustomEvent('sqb-check-active', {
         detail: {
@@ -354,11 +782,9 @@ var FormulaList = forwardRef(function (props, ref) {
       }));
     }
   }
-  // 粘贴到末尾并清除勾选
   function handlePaste() {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
     var _caseList = caseList.slice();
-    // determine items to paste (selected items have priority)
     var itemsToPaste = storage._metabaseCopyItems || [];
     itemsToPaste = changeCopyField(itemsToPaste, data);
     if (itemsToPaste.length) {
@@ -371,13 +797,10 @@ var FormulaList = forwardRef(function (props, ref) {
     }
     initPaste();
   }
-  // 将值存在 localStorage
   function setLocalItem(next) {
     var _caseList = caseList.slice();
-    // determine items to paste (selected items have priority)
     var itemsToPaste = [];
     if (next.length > 0) {
-      // paste all selected items
       itemsToPaste = next.map(function (i) {
         return _caseList[i] ? cloneDeep(_caseList[i]) : null;
       }).filter(Boolean);
@@ -399,11 +822,33 @@ var FormulaList = forwardRef(function (props, ref) {
     });
     setSelectedIndices(next);
     setLocalItem(next);
-    // const active = next.length > 0;
   }
+  function toggleSelectGroup(indices, checked) {
+    var next = selectedIndices.slice();
+    if (checked) {
+      indices.forEach(function (index) {
+        if (!next.includes(index)) next.push(index);
+      });
+    } else {
+      var indexSet = new Set(indices);
+      next = next.filter(function (index) {
+        return !indexSet.has(index);
+      });
+    }
+    next = next.sort(function (a, b) {
+      return a - b;
+    });
+    setSelectedIndices(next);
+    setLocalItem(next);
+  }
+  var isGroupSelected = function isGroupSelected(indices) {
+    return indices.length > 0 && indices.every(function (index) {
+      return selectedIndices.includes(index);
+    });
+  };
   var copyAll = function copyAll() {
     _setIsCheck(true);
-    var allIndices = caseList.map(function (v, i) {
+    var allIndices = caseList.map(function (_, i) {
       return i;
     });
     setSelectedIndices(allIndices);
@@ -412,11 +857,9 @@ var FormulaList = forwardRef(function (props, ref) {
   var delSelect = function delSelect() {
     Modal.confirm({
       title: __('metabase.prompt'),
-      // 提示
       content: __('customColumn.confirmDelete'),
-      // 确认删除吗
       onOk: function () {
-        var _onOk = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _onOk = _asyncToGenerator(_regeneratorRuntime.mark(function _callee() {
           var selectedIndexSet, _caseList;
           return _regeneratorRuntime.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
@@ -441,7 +884,6 @@ var FormulaList = forwardRef(function (props, ref) {
       onCancel: function onCancel() {}
     });
   };
-  // 开启关闭勾选，清除别的过滤器勾选
   var _setIsCheck = function _setIsCheck(val) {
     initPaste();
     setIsCheck(val);
@@ -459,7 +901,6 @@ var FormulaList = forwardRef(function (props, ref) {
       window.removeEventListener('sqb-check-active', onCheckActive);
     };
   }, []);
-  // 添加
   var addOperator = function addOperator(type, index, position) {
     var _caseList = caseList.slice() || [];
     var _ind = index;
@@ -479,14 +920,59 @@ var FormulaList = forwardRef(function (props, ref) {
       _caseList.splice(index + 1, 0, temItem);
       _ind = index + 1;
     } else {
-      //替换
       _caseList.splice(index, 1, temItem);
       _ind = index;
     }
     setCaseList(_caseList);
     return _ind < 0 ? 0 : _ind;
   };
-  // NotExists 窗口
+  var getItemNameProps = function getItemNameProps(v) {
+    if (v.type === AtomsTypeEnum.NOT_EXISTS || v.type === AtomsTypeEnum.EXISTS) {
+      return {
+        isError: isExistsError(v.notExists, store.existsError)
+      };
+    }
+    if (v.type === AtomsTypeEnum.SUB_QUERY) {
+      return {
+        isError: isExistsError(v.subQuery, store.existsError)
+      };
+    }
+    if (v.type === AtomsTypeEnum.FIELD) {
+      return {
+        isError: isError(v, data)
+      };
+    }
+    if (v.type === AtomsTypeEnum.CONSTANT) {
+      return {
+        isError: !!(v.id || v.val) && !getConstantLabel(store.constantList, v.id || v.val),
+        message: '常量丢失'
+      };
+    }
+    if (otherTypeMap.has(String(v.type))) {
+      var currentOtherType = otherTypeMap.get(String(v.type));
+      var listSource = (currentOtherType === null || currentOtherType === void 0 ? void 0 : currentOtherType.list) || [];
+      return {
+        isError: !!(v.id || v.val) && !getConstantLabel(listSource, v.id || v.val),
+        message: "".concat(currentOtherType === null || currentOtherType === void 0 ? void 0 : currentOtherType.label, "\u4E22\u5931")
+      };
+    }
+    if (v.type === AtomsTypeEnum.EXPRESSION) {
+      return {
+        isError: isError(v, data)
+      };
+    }
+    if (v.type === AtomsTypeEnum.FORMULA) {
+      var formulaMissing = formulaIsError(v, formulaList);
+      return {
+        isError: isError(v, data) || formulaMissing,
+        message: formulaMissing ? '公式丢失' : ''
+      };
+    }
+    return {
+      isError: false,
+      message: ''
+    };
+  };
   var showNotExists = function showNotExists(i) {
     var _caseList$i, _caseList$i2;
     var _store$preProps = store.preProps,
@@ -495,23 +981,22 @@ var FormulaList = forwardRef(function (props, ref) {
       other = _objectWithoutProperties(_store$preProps, _excluded);
     var _value = ((_caseList$i = caseList[i]) === null || _caseList$i === void 0 ? void 0 : _caseList$i.notExists) || [];
     var oldList = cloneDeep(((_caseList$i2 = caseList[i]) === null || _caseList$i2 === void 0 ? void 0 : _caseList$i2.notExists) || []);
+    var childModalZIndex = getTopLayerZIndex() + 1;
     var _toolbar = notExistsToolbar || toolbar;
-    // _toolbar = _toolbar.filter((v: string) => v !== 'group'); // 子查询不需要分组
-    var o = Modal2.openModal({
+    var o = openChildModal({
+      zIndex: childModalZIndex,
       title: caseList[i].type,
-      transparentMask: true,
+      transparentMask: false,
       content: _jsx(_Fragment, {
         children: _jsx(Metabase, _objectSpread(_objectSpread({}, other), {}, {
+          popupZIndex: childModalZIndex + 1,
           notExistsColumns: exitData,
-          // showFields={false}
           isExit: true,
-          // showSubquery={subShowSubquery}
           toolbar: _toolbar,
           btnText: __('SqlQueryBuilder.confirm'),
           value: cloneDeep(_value),
           onOk: function onOk(newList) {
             try {
-              // 子查询未改变不做操作
               if (isEqual(newList, oldList)) {
                 o.close();
                 return;
@@ -525,18 +1010,14 @@ var FormulaList = forwardRef(function (props, ref) {
               onChange === null || onChange === void 0 || onChange(caseList, '');
               setCaseList(_toConsumableArray(caseList));
               o.close();
-            } catch (e) {
-              console.warn(e);
-            } finally {
+            } catch (e) {} finally {
               o.close();
             }
           }
         }))
-      }),
-      onClose: function onClose() {}
+      })
     });
   };
-  // 子查询 窗口
   var showSubQuery = function showSubQuery(i) {
     var _caseList$i3, _caseList$i4;
     var _store$preProps2 = store.preProps,
@@ -548,12 +1029,15 @@ var FormulaList = forwardRef(function (props, ref) {
       other = _objectWithoutProperties(_store$preProps2, _excluded2);
     var _value = ((_caseList$i3 = caseList[i]) === null || _caseList$i3 === void 0 ? void 0 : _caseList$i3.subQuery) || [];
     var oldList = cloneDeep(((_caseList$i4 = caseList[i]) === null || _caseList$i4 === void 0 ? void 0 : _caseList$i4.subQuery) || []);
+    var childModalZIndex = getTopLayerZIndex() + 1;
     var _toolbar = subToolbar || toolbar;
-    var o = Modal2.openModal({
+    var o = openChildModal({
+      zIndex: childModalZIndex,
       title: __('SqlQueryBuilder.subquery'),
-      transparentMask: true,
+      transparentMask: false,
       content: _jsx(_Fragment, {
         children: _jsx(Metabase, _objectSpread(_objectSpread({}, other), {}, {
+          popupZIndex: childModalZIndex + 1,
           isExit: true,
           isSubquery: true,
           notExistsColumns: exitData,
@@ -563,7 +1047,6 @@ var FormulaList = forwardRef(function (props, ref) {
           value: cloneDeep(_value),
           onOk: function onOk(newList) {
             try {
-              // 子查询未改变不做操作
               if (isEqual(newList, oldList)) {
                 o.close();
                 return;
@@ -577,15 +1060,12 @@ var FormulaList = forwardRef(function (props, ref) {
               onChange === null || onChange === void 0 || onChange(caseList, '');
               setCaseList(_toConsumableArray(caseList));
               o.close();
-            } catch (e) {
-              console.warn(e);
-            } finally {
+            } catch (e) {} finally {
               o.close();
             }
           }
         }))
-      }),
-      onClose: function onClose() {}
+      })
     });
   };
   function selectConstant(e) {
@@ -610,10 +1090,11 @@ var FormulaList = forwardRef(function (props, ref) {
       })
     });
   }
-  // 函数弹窗
   var showFunction = function showFunction(e, i) {
     var _value = caseList[i];
-    var o = Modal2.openModal({
+    var childModalZIndex = getTopLayerZIndex() + 1;
+    var o = openChildModal({
+      zIndex: childModalZIndex,
       title: __('customColumn.formula'),
       transparentMask: true,
       content: _jsx(_Fragment, {
@@ -647,317 +1128,275 @@ var FormulaList = forwardRef(function (props, ref) {
       onClose: function onClose() {}
     });
   };
-  // 分段
-  var itemDom = function itemDom(v, index) {
+  var itemDom = function itemDom(v, index, groupType) {
     var type = v.type;
     if (v.type === AtomsTypeEnum.NOT_EXISTS || v.type === AtomsTypeEnum.EXISTS) {
-      return _jsx(ItemName, {
-        isError: isExistsError(v.notExists, store.existsError),
-        children: _jsxs("div", {
-          className: "Sqb-TableName purple-name",
-          onClick: function onClick(e) {
-            return showNotExists(index);
-          },
-          children: [v.type, " ( * )", _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
-        }, index)
-      }, index);
-    } else if (v.type === AtomsTypeEnum.SUB_QUERY) {
-      return _jsx(ItemName, {
-        isError: isExistsError(v.subQuery, store.existsError),
-        children: _jsxs("div", {
-          className: "Sqb-TableName purple-name",
-          onClick: function onClick(e) {
-            return showSubQuery(index);
-          },
-          children: [v.label || __('SqlQueryBuilder.subquery'), _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
-        }, index)
-      }, index);
-    } else if (type === AtomsTypeEnum.FIELD) {
-      // 字段
-      return _jsx(ItemName, {
-        isError: isError(v, data),
-        children: _jsxs("div", {
-          className: cx("Sqb-TableName ", {
-            notSelected: !(v !== null && v !== void 0 && v.fieldName)
+      return {
+        className: 'purple-name',
+        onClick: function onClick() {
+          return showNotExists(index);
+        },
+        node: _jsxs(_Fragment, {
+          children: [v.type, " ( * )", renderDeleteIcon(v, index, groupType)]
+        })
+      };
+    }
+    if (v.type === AtomsTypeEnum.SUB_QUERY) {
+      return {
+        className: 'purple-name',
+        onClick: function onClick() {
+          return showSubQuery(index);
+        },
+        node: _jsxs(_Fragment, {
+          children: [v.label || __('SqlQueryBuilder.subquery'), renderDeleteIcon(v, index, groupType)]
+        })
+      };
+    }
+    if (type === AtomsTypeEnum.FIELD) {
+      return {
+        className: cx({
+          notSelected: !(v !== null && v !== void 0 && v.fieldName)
+        }),
+        onClick: function onClick(e) {
+          return handleField(e, index, v);
+        },
+        node: _jsxs(_Fragment, {
+          children: [!(v !== null && v !== void 0 && v.fieldName) && __('customColumn.selectField'), v.fieldName, renderDeleteIcon(v, index, groupType)]
+        })
+      };
+    }
+    if (type === AtomsTypeEnum.INPUT_STRING) {
+      return {
+        className: 'notSelected',
+        node: _jsxs(_Fragment, {
+          children: [_jsx(FieldString, {}), _jsx(Input, {
+            className: ':sqb-Custom-input',
+            value: v.val,
+            placeholder: __('SqlQueryBuilder.pleaseEnter'),
+            size: 'large',
+            onChange: function onChange(val) {
+              handleConstant(val, index);
+            }
+          }), renderDeleteIcon(v, index, groupType)]
+        })
+      };
+    }
+    if (type === AtomsTypeEnum.INPUT_NUMBER) {
+      return {
+        className: 'notSelected',
+        node: _jsxs(_Fragment, {
+          children: [_jsx(FieldNumber, {}), _jsx(InputNumber, {
+            className: ':sqb-Custom-input',
+            value: v.val,
+            placeholder: __('SqlQueryBuilder.pleaseEnter'),
+            size: 'large',
+            onChange: function onChange(val) {
+              handleConstant(val, index);
+            }
+          }), renderDeleteIcon(v, index, groupType)]
+        })
+      };
+    }
+    if (type === AtomsTypeEnum.OPERATOR) {
+      if (isFixedCaseOperator(v)) {
+        return {
+          raw: true,
+          node: _jsx("span", {
+            className: 'Sqb-CaseKeyword',
+            children: v.val
+          })
+        };
+      }
+      if (groupType === 'logic' && isFixedLogicOperator(v)) {
+        return {
+          raw: true,
+          node: _jsx("span", {
+            className: 'Sqb-CaseKeyword',
+            children: v.val
+          })
+        };
+      }
+      if (groupType === 'logic' && ['and', 'or'].includes(v.val)) {
+        var nextLogicOperator = v.val === 'and' ? 'or' : 'and';
+        return {
+          className: cx({
+            'logic-operator': true,
+            'logic-and': v.val === 'and',
+            'logic-or': v.val === 'or'
           }),
-          onClick: function onClick(e) {
-            return handleField(e, index, v);
+          onClick: function onClick() {
+            handleConstant(nextLogicOperator, index);
           },
-          children: [!(v !== null && v !== void 0 && v.fieldName) && __('customColumn.selectField'), v.fieldName, _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
-        })
-      }, index);
-    } else if (type === AtomsTypeEnum.INPUT_STRING) {
-      // 输入框
-      return _jsxs("div", {
-        className: cx("Sqb-TableName notSelected "),
-        children: [_jsx(FieldString, {}), _jsx(Input, {
-          className: ':Sqb-Custom-input',
+          node: renderTokenContent(v.val)
+        };
+      }
+      return {
+        className: cx('operator-trigger', {
+          notSelected: !v.val,
+          'flow-operator': ['case', 'when', 'then', 'else', 'end'].includes(v.val),
+          'logic-operator': ['and', 'or'].includes(v.val),
+          'logic-and': v.val === 'and',
+          'logic-or': v.val === 'or'
+        }),
+        node: _jsx(Select, {
+          triggerProps: getSelectTriggerProps(),
           value: v.val,
-          placeholder: __('SqlQueryBuilder.pleaseEnter'),
-          size: 'large',
-          onChange: function onChange(val) {
-            handleConstant(val, index);
-          }
-        }), _jsx("span", {
-          className: 'item-del',
-          style: {
-            fontSize: 0
+          triggerElement: function triggerElement() {
+            return renderTokenContent(_jsxs(_Fragment, {
+              children: [!v.val && __('customColumn.selectOperator'), v.val, renderDeleteIcon(v, index)]
+            }));
           },
-          onClick: function onClick(e) {
-            return handleDel(e, index);
-          },
-          children: _jsx(CloseIcon, {})
-        })]
-      });
-    } else if (type === AtomsTypeEnum.INPUT_NUMBER) {
-      // 输入框
-      return _jsxs("div", {
-        className: cx("Sqb-TableName notSelected "),
-        children: [_jsx(FieldNumber, {}), _jsx(InputNumber, {
-          className: ':sqb-Custom-input',
-          value: v.val,
-          placeholder: __('SqlQueryBuilder.pleaseEnter'),
-          size: 'large',
           onChange: function onChange(val) {
             handleConstant(val, index);
-          }
-        }), _jsx("span", {
-          className: 'item-del',
-          style: {
-            fontSize: 0
-          },
-          onClick: function onClick(e) {
-            return handleDel(e, index);
           },
-          children: _jsx(CloseIcon, {})
-        })]
-      });
-    } else if (type === AtomsTypeEnum.OPERATOR) {
-      //连接符
-      return _jsx(Select, {
-        triggerProps: {
-          clickToClose: true
-        },
-        value: v.val,
-        triggerElement: function triggerElement(value) {
-          return _jsxs("div", {
-            className: cx("Sqb-TableName Sqb-TableName-OPERATOR", {
-              notSelected: !v.val
-            }),
-            children: [!v.val && __('customColumn.selectOperator'), v.val, _jsx("span", {
-              className: 'item-del',
-              style: {
-                fontSize: 0
-              },
-              onClick: function onClick(e) {
-                return handleDel(e, index);
-              },
-              children: _jsx(CloseIcon, {})
-            })]
-          });
-        },
-        onChange: function onChange(val) {
-          handleConstant(val, index);
-        },
-        children: operatorList.map(function (option, index) {
-          return _jsx(Select.Option, {
-            value: option,
-            children: option
-          }, index + '' + ind);
+          children: operatorList.map(function (option, optionIndex) {
+            return _jsx(Select.Option, {
+              value: option,
+              children: option
+            }, optionIndex + '' + ind);
+          })
         })
-      });
-    } else if (type === AtomsTypeEnum.CONSTANT) {
-      //常量
-      return _jsx(ItemName, {
-        isError: !!(v.id || v.val) && !getConstantLabel(store.constantList, v.id || v.val),
-        message: "\u5E38\u91CF\u4E22\u5931",
-        children: _jsxs("div", {
-          className: cx("Sqb-TableName", {
-            notSelected: !v.val
-          }),
-          "v-index": index,
-          "v-val": v.id || v.val,
-          onClick: selectConstant,
-          children: [getConstantLabel(store.constantList, v.id || v.val, v.val) || __('SqlQueryBuilder.pickConstant'), _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
+      };
+    }
+    if (type === AtomsTypeEnum.CONSTANT) {
+      return {
+        className: cx({
+          notSelected: !v.val
+        }),
+        attrs: {
+          'v-index': index,
+          'v-val': v.id || v.val
+        },
+        onClick: selectConstant,
+        node: _jsxs(_Fragment, {
+          children: [getConstantLabel(store.constantList, v.id || v.val, v.val) || __('SqlQueryBuilder.pickConstant'), renderDeleteIcon(v, index, groupType)]
         })
-      }, index);
-    } else if (otherTypeMap.has(String(type))) {
-      // 业务自定义常量类型（otherTypes）
+      };
+    }
+    if (otherTypeMap.has(String(type))) {
       var currentOtherType = otherTypeMap.get(String(type));
       var listSource = (currentOtherType === null || currentOtherType === void 0 ? void 0 : currentOtherType.list) || [];
-      return _jsx(ItemName, {
-        isError: !!(v.id || v.val) && !getConstantLabel(listSource, v.id || v.val),
-        message: "".concat(currentOtherType === null || currentOtherType === void 0 ? void 0 : currentOtherType.label, "\u4E22\u5931"),
-        children: _jsxs("div", {
-          className: cx("Sqb-TableName", {
-            notSelected: !v.val
-          }),
-          "v-index": index,
-          "v-val": v.id || v.val,
-          "v-type": type,
-          onClick: selectConstant,
-          children: [getConstantLabel(listSource, v.id || v.val, v.val) || "\u8BF7\u9009\u62E9".concat(currentOtherType.label), _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
+      return {
+        className: cx({
+          notSelected: !v.val
+        }),
+        attrs: {
+          'v-index': index,
+          'v-val': v.id || v.val,
+          'v-type': type
+        },
+        onClick: selectConstant,
+        node: _jsxs(_Fragment, {
+          children: [getConstantLabel(listSource, v.id || v.val, v.val) || "\u8BF7\u9009\u62E9".concat(currentOtherType.label), renderDeleteIcon(v, index, groupType)]
         })
-      }, index);
-    } else if (type === AtomsTypeEnum.EXPRESSION) {
+      };
+    }
+    if (type === AtomsTypeEnum.EXPRESSION) {
       if (~['早于', '晚于', '在'].indexOf(v.condition) && v.rhs.length > 1) {
-        var _caseList$index$quote;
-        var _caseList = caseList.slice();
-        _caseList[index].rhs = [_caseList[index].rhs[0]];
-        _caseList[index].quotes = (_caseList$index$quote = _caseList[index].quotes.split(' || ')) === null || _caseList$index$quote === void 0 ? void 0 : _caseList$index$quote[0];
-        setCaseList(_caseList);
+        var _nextList$index$quote;
+        var nextList = caseList.slice();
+        nextList[index].rhs = [nextList[index].rhs[0]];
+        nextList[index].quotes = (_nextList$index$quote = nextList[index].quotes.split(' || ')) === null || _nextList$index$quote === void 0 ? void 0 : _nextList$index$quote[0];
+        setCaseList(nextList);
       }
-      // 表达式
-      return _jsx(ItemName, {
-        isError: isError(v, data),
-        children: _jsxs("div", {
-          className: cx("Sqb-TableName purple-name", {
-            notSelected: !v.quotes
-          }),
-          onClick: function onClick(e) {
-            return handleExpression(e, index, v);
-          },
-          children: [v.quotes ? v.quotes : __('customColumn.selectExpression'), _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
+      return {
+        className: cx('purple-name', {
+          notSelected: !v.quotes
+        }),
+        onClick: function onClick(e) {
+          return handleExpression(e, index, v);
+        },
+        node: _jsxs(_Fragment, {
+          children: [v.quotes ? v.quotes : __('customColumn.selectExpression'), renderDeleteIcon(v, index, groupType)]
         })
-      }, index);
-    } else if (type === AtomsTypeEnum.FORMULA) {
-      // 公式
-      return _jsx(ItemName, {
-        isError: isError(v, data) || formulaIsError(v, formulaList),
-        message: formulaIsError(v, formulaList) ? '公式丢失' : '',
-        children: _jsxs("div", {
-          className: cx("Sqb-TableName gray-name"),
-          onClick: function onClick(e) {
-            return showFunction(e, index);
+      };
+    }
+    if (type === AtomsTypeEnum.CASE_WHEN) {
+      return {
+        raw: true,
+        node: renderCaseWhenEditor(v, index)
+      };
+    }
+    if (type === AtomsTypeEnum.AND_OR) {
+      return {
+        raw: true,
+        node: renderAndOrEditor(v, index)
+      };
+    }
+    if (type === AtomsTypeEnum.FORMULA) {
+      return {
+        className: 'gray-name',
+        onClick: function onClick(e) {
+          return showFunction(e, index);
+        },
+        node: _jsxs(_Fragment, {
+          children: [v.name ? getQuotes(v, v.args, formulaList) : __('customColumn.selectFormula'), renderDeleteIcon(v, index, groupType)]
+        })
+      };
+    }
+    if (type === AtomsTypeEnum.SELECT) {
+      return {
+        className: cx('operator-trigger', {
+          notSelected: !v.val,
+          'flow-operator': v.val === 'caseWhen',
+          'logic-operator': v.val === 'andOr'
+        }),
+        node: _jsx(Select, {
+          triggerProps: getSelectTriggerProps(),
+          multiple: v.multiple,
+          value: v.val,
+          triggerElement: function triggerElement() {
+            return renderTokenContent(_jsxs(_Fragment, {
+              children: [!v.val && __('customColumn.selectOperator'), v.val, !v.fixed && renderDeleteIcon(v, index, groupType)]
+            }));
           },
-          children: [v.name ? getQuotes(v, v.args, formulaList) : __('customColumn.selectFormula'), _jsx("span", {
-            className: 'item-del',
-            style: {
-              fontSize: 0
-            },
-            onClick: function onClick(e) {
-              return handleDel(e, index);
-            },
-            children: _jsx(CloseIcon, {})
-          })]
+          onChange: function onChange(val) {
+            handleConstant(val, index);
+          },
+          children: v.options.map(function (option, optionIndex) {
+            return _jsx(Select.Option, {
+              value: option.value,
+              children: option.label
+            }, optionIndex + '' + ind);
+          })
         })
-      }, index);
-    } else if (type === AtomsTypeEnum.SELECT) {
-      // 选择框
-      return _jsx(Select, {
-        triggerProps: {
-          clickToClose: true
-        },
-        multiple: v.multiple,
-        value: v.val,
-        triggerElement: function triggerElement(value) {
-          return _jsxs("div", {
-            className: cx("Sqb-TableName Sqb-TableName-OPERATOR", {
-              notSelected: !v.val
-            }),
-            children: [!v.val && __('customColumn.selectOperator'), v.val, !v.fixed && _jsx("span", {
-              className: 'item-del',
-              style: {
-                fontSize: 0
-              },
-              onClick: function onClick(e) {
-                return handleDel(e, index);
-              },
-              children: _jsx(CloseIcon, {})
-            })]
-          });
-        },
-        onChange: function onChange(val) {
-          handleConstant(val, index);
+      };
+    }
+    if (groupType === 'logic') {
+      return {
+        className: cx('gray-name', 'notSelected'),
+        style: {
+          minWidth: 44,
+          justifyContent: 'center'
         },
-        children: v.options.map(function (option, index) {
-          return _jsx(Select.Option, {
-            value: option.value,
-            children: option.label
-          }, index + '' + ind);
+        node: selectOperator({
+          triggerElement: function triggerElement() {
+            return renderTokenContent(_jsx(AddIcon, {}));
+          },
+          ind: index,
+          position: ''
         })
-      });
-    } else {
-      return selectOperator({
+      };
+    }
+    return {
+      className: cx({
+        notSelected: true
+      }),
+      node: selectOperator({
         triggerElement: function triggerElement() {
-          return _jsxs("div", {
-            className: cx("Sqb-TableName ", {
-              notSelected: true
-            }),
-            children: [__('customColumn.selectCustomInput'), _jsx("span", {
-              className: 'item-del',
-              style: {
-                fontSize: 0
-              },
-              onClick: function onClick(e) {
-                return handleDel(e, index);
-              },
-              children: _jsx(CloseIcon, {})
-            })]
-          });
+          return renderTokenContent(_jsxs(_Fragment, {
+            children: [__('customColumn.selectCustomInput'), renderDeleteIcon(v, index, groupType)]
+          }));
         },
         ind: index,
         position: ''
-      });
-    }
+      })
+    };
   };
   var copyDom = function copyDom() {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
     var positioned = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (embedded) return null;
     if (!isCopy || selectedIndices.length === 0 && checkedItemsCount === 0) return null;
     return _jsx("div", {
       className: cx('Sqb-Filter-item-copy', {
@@ -985,10 +1424,147 @@ var FormulaList = forwardRef(function (props, ref) {
       })
     });
   };
+  var renderItemShell = function renderItemShell(v, i, groupType, extraClassName) {
+    var showCheckbox = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+    var itemContent = itemDom(v, i, groupType);
+    var isCompositeAtom = v.type === AtomsTypeEnum.CASE_WHEN || v.type === AtomsTypeEnum.AND_OR;
+    var isPassiveCaseKeyword = groupType === 'caseWhen' && isFixedCaseOperator(v) || groupType === 'logic' && isFixedLogicOperator(v);
+    return _jsx(React.Fragment, {
+      children: _jsxs("div", {
+        className: cx('Sqb-Filter-item', _defineProperty({
+          hover: ind === i && hoveredCopyIndex !== i,
+          'item-fixed': v.fixed || false,
+          'item-selected': isCheck,
+          'item-composite': isCompositeAtom,
+          'group-child': groupType !== 'single',
+          'group-flow-child': groupType === 'caseWhen',
+          'group-logic-child': groupType === 'logic'
+        }, extraClassName || '', !!extraClassName)),
+        onMouseEnter: function onMouseEnter(e) {
+          if (isCheck || isPassiveCaseKeyword) return;
+          setInd(i);
+        },
+        onMouseLeave: function onMouseLeave() {
+          if (isCheck || isPassiveCaseKeyword) return;
+          setInd(-1);
+        },
+        children: [copyDom(i), canShowInsertArrows(v, groupType) && selectOperator({
+          triggerElement: function triggerElement() {
+            return _jsx("div", {
+              className: 'left-arrow',
+              "v-index": i,
+              "v-type": 'before',
+              onClick: function onClick() {
+                if (!selectedIndices.length) addOperator(AtomsTypeEnum.UNKNOWN, i, 'before');
+              },
+              children: _jsx("img", {
+                src: arrow
+              })
+            });
+          },
+          ind: i,
+          position: 'before',
+          trigger: 'hover'
+        }), !embedded && showCheckbox && v.type !== AtomsTypeEnum.UNKNOWN && _jsx(Checkbox, {
+          className: 'item-check',
+          checked: selectedIndices.includes(i),
+          disabled: globalSelectionActive && globalSelectionOwner !== myInstanceIdRef.current,
+          onChange: function onChange(e) {
+            var _e$target$checked, _e$target;
+            return toggleSelect(i, (_e$target$checked = e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.checked) !== null && _e$target$checked !== void 0 ? _e$target$checked : !selectedIndices.includes(i));
+          }
+        }), _jsx("div", {
+          style: {
+            pointerEvents: isCheck || store.isMetabaseCopy ? 'none' : 'auto'
+          },
+          className: cx({
+            openCheck: isCheck
+          }),
+          children: _jsx(ItemName, _objectSpread(_objectSpread({}, getItemNameProps(v)), {}, {
+            children: itemContent.raw ? itemContent.node : _jsx("div", _objectSpread(_objectSpread({
+              className: cx('Sqb-TableName', itemContent.className),
+              onClick: itemContent.onClick,
+              style: itemContent.style
+            }, itemContent.attrs || {}), {}, {
+              children: itemContent.node
+            }))
+          }))
+        }), canShowInsertArrows(v, groupType) && selectOperator({
+          triggerElement: function triggerElement(value) {
+            return _jsx("div", {
+              className: 'right-arrow',
+              "v-index": i,
+              "v-type": 'after',
+              onClick: function onClick() {
+                addOperator(AtomsTypeEnum.UNKNOWN, i, 'after');
+              },
+              children: _jsx("img", {
+                src: arrow
+              })
+            });
+          },
+          ind: i,
+          position: 'after',
+          trigger: 'hover'
+        })]
+      })
+    }, i);
+  };
+  var renderCaseSection = function renderCaseSection(itemIndices, groupType, sectionClassName) {
+    return itemIndices.map(function (itemIndex) {
+      return renderItemShell(caseList[itemIndex], itemIndex, groupType, "case-row-item ".concat(sectionClassName), false);
+    });
+  };
+  var renderDeleteIcon = function renderDeleteIcon(item, index, groupType) {
+    if (!canDeleteItem(item, groupType)) return null;
+    return _jsx("span", {
+      className: 'item-del',
+      style: {
+        fontSize: 0
+      },
+      onClick: function onClick(e) {
+        return handleDel(e, index);
+      },
+      children: _jsx(CloseIcon, {})
+    });
+  };
+  var renderCaseRecoverButton = function renderCaseRecoverButton(onClick, className, label) {
+    return _jsxs("button", {
+      type: 'button',
+      className: cx('Sqb-CaseRecover', className),
+      onClick: onClick,
+      children: [_jsx(FfPlus, {}), _jsx("span", {
+        children: label
+      })]
+    });
+  };
+  var renderGroupInsertArrow = function renderGroupInsertArrow(index, position) {
+    return selectOperator({
+      triggerElement: function triggerElement() {
+        return _jsx("div", {
+          className: position === 'before' ? 'left-arrow' : 'right-arrow',
+          "v-index": index,
+          "v-type": position,
+          onClick: function onClick() {
+            if (position === 'before' && selectedIndices.length) return;
+            addOperator(AtomsTypeEnum.UNKNOWN, index, position);
+          },
+          children: _jsx("img", {
+            src: arrow
+          })
+        });
+      },
+      ind: index,
+      position: position,
+      trigger: 'hover'
+    });
+  };
   return _jsx(_Fragment, {
     children: _jsxs("div", {
-      className: "Sqb-NotebookCell",
-      children: [isCopy && caseList.length > 0 && _jsxs(Space, {
+      className: cx('Sqb-NotebookCell', {
+        'Sqb-NotebookCell--embedded': embedded
+      }),
+      children: [!embedded && isCopy && caseList.length > 0 && _jsxs(Space, {
         size: 'small',
         direction: 'vertical',
         className: cx('item-isCheck', {
@@ -1027,75 +1603,8 @@ var FormulaList = forwardRef(function (props, ref) {
           },
           children: "\u6E05\u9664\u590D\u5236"
         })]
-      }), (_caseList2 = caseList) === null || _caseList2 === void 0 ? void 0 : _caseList2.map(function (v, i) {
-        return _jsx(React.Fragment, {
-          children: _jsxs("div", {
-            className: cx('Sqb-Filter-item', {
-              hover: ind === i && hoveredCopyIndex !== i,
-              'item-fixed': v.fixed || false,
-              'item-selected': isCheck
-            }),
-            onMouseEnter: function onMouseEnter(e) {
-              if (isCheck) return;
-              setInd(i);
-            },
-            onMouseLeave: function onMouseLeave() {
-              if (isCheck) return;
-              setInd(-1);
-            },
-            children: [copyDom(i), selectOperator({
-              triggerElement: function triggerElement() {
-                return _jsx("div", {
-                  className: 'left-arrow',
-                  "v-index": i,
-                  "v-type": 'before',
-                  onClick: function onClick() {
-                    if (!selectedIndices.length) addOperator(AtomsTypeEnum.UNKNOWN, i, 'before');
-                  },
-                  children: _jsx("img", {
-                    src: arrow
-                  })
-                });
-              },
-              ind: i,
-              position: 'before',
-              trigger: 'hover'
-            }), v.type !== AtomsTypeEnum.UNKNOWN && _jsx(Checkbox, {
-              className: 'item-check',
-              checked: selectedIndices.includes(i),
-              disabled: globalSelectionActive && globalSelectionOwner !== myInstanceIdRef.current,
-              onChange: function onChange(e) {
-                var _e$target$checked, _e$target;
-                return toggleSelect(i, (_e$target$checked = e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.checked) !== null && _e$target$checked !== void 0 ? _e$target$checked : !selectedIndices.includes(i));
-              }
-            }), _jsx("div", {
-              style: {
-                pointerEvents: isCheck || store.isMetabaseCopy ? 'none' : 'auto'
-              },
-              className: cx('Sqb-Filter-item-content', {
-                openCheck: isCheck
-              }),
-              children: itemDom(v, i)
-            }), selectOperator({
-              triggerElement: function triggerElement(value) {
-                return _jsx("div", {
-                  className: 'right-arrow',
-                  "v-index": i,
-                  "v-type": 'after',
-                  onClick: function onClick() {
-                    addOperator(AtomsTypeEnum.UNKNOWN, i, 'after');
-                  },
-                  children: _jsx("img", {
-                    src: arrow
-                  })
-                });
-              },
-              ind: i,
-              position: 'after',
-              trigger: 'hover'
-            })]
-          }, i)
-        }, i);
+      }), caseList.map(function (item, itemIndex) {
+        return renderItemShell(item, itemIndex, 'single');
       }), Array.from(caseList).length < 1 && selectOperator({
         triggerElement: function triggerElement() {
           return _jsx("div", {
@@ -1106,7 +1615,7 @@ var FormulaList = forwardRef(function (props, ref) {
         ind: -1,
         position: 'add',
         trigger: 'click'
-      }), copyDom(-1, false), showPreview && _jsx("div", {
+      }), !embedded && copyDom(-1, false), !embedded && showPreview && _jsx("div", {
         className: cx("mb-2 font-bold uppercase tracking-wider preview-box"),
         style: {
           fontSize: 12,
@@ -1149,54 +1658,10 @@ var FormulaList = forwardRef(function (props, ref) {
                 isSqlError: errorInfo.isError
               }),
               children: caseList.map(function (v, i) {
-                if (v !== null && v !== void 0 && v.quotes) {
-                  return _jsx("span", {
-                    className: 'mr-1',
-                    children: v === null || v === void 0 ? void 0 : v.quotes
-                  }, i);
-                } else if (v !== null && v !== void 0 && v.fieldName) {
-                  return _jsx("span", {
-                    className: 'mr-1',
-                    children: v === null || v === void 0 ? void 0 : v.fieldName
-                  }, i);
-                } else {
-                  if (v.type === AtomsTypeEnum.OPERATOR && (v.val === 'and' || v.val === 'or')) {
-                    return _jsxs("span", {
-                      className: 'mr-1',
-                      children: [_jsx("br", {}), v.val, _jsx("br", {})]
-                    }, i);
-                  }
-                  if (v.type === AtomsTypeEnum.OPERATOR) {
-                    if (v.val === '(' || v.val === ')') {
-                      return _jsx("span", {
-                        className: cx('mr-1', {
-                          error: errorInfo.isBracket
-                        }),
-                        children: v.val
-                      }, i);
-                    }
-                    if (v.val === 'case' || v.val === 'end' || v.val === 'when' || v.val === 'then') {
-                      return _jsx("span", {
-                        className: cx('mr-1', {
-                          error: errorInfo.isCase
-                        }),
-                        children: v.val
-                      }, i);
-                    }
-                    if (v.val === 'over') {
-                      return _jsx("span", {
-                        className: cx('mr-1', {
-                          error: errorInfo.isOver
-                        }),
-                        children: v.val
-                      }, i);
-                    }
-                  }
-                  return _jsx("span", {
-                    className: 'mr-1',
-                    children: v.val
-                  }, i);
-                }
+                return _jsx("span", {
+                  className: 'mr-1',
+                  children: getItemDisplayText(v)
+                }, i);
               })
             }), _jsx("div", {
               className: 'errorMsg mt-2',