@gingkoo/pandora-metabase 1.0.126 → 1.0.128

package/lib/cjs/components/dialog/expression/index.js

@@ -18,6 +18,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _locale = require("../../../locale");
 var _enum = require("../../../store/enum");
+var _helper = require("../../../store/helper");
 var _types = require("../../../store/types");
 var _const = require("../const");
 var _selectList = _interopRequireDefault(require("../select-list"));
@@ -117,6 +118,13 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
     return popupContainer || document.body;
   };
   var table2Selected = Boolean(rhsVal && (rhsVal === null || rhsVal === void 0 ? void 0 : rhsVal.length) > 0);
+  function getFieldDisplayName(field) {
+    if (!field) return '';
+    if (field.tableId === _helper.SummarizeAlias) {
+      return field.fieldAlias || field.fieldName || '';
+    }
+    return field.fieldName || field.fieldAlias || '';
+  }
   var disabled = (0, _react.useMemo)(function () {
     if (!condition) return true;
     if (~['无需结果'].indexOf(condition)) {
@@ -135,7 +143,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         });
       }
       if (v.type === _types.AtomsTypeEnum.FIELD) {
-        return v.fieldName;
+        return getFieldDisplayName(v);
       }
     });
     return !isOk;
@@ -147,7 +155,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
   var getAtomsQuotesName = function getAtomsQuotesName(items) {
     var names = items.map(function (v) {
       if ((v === null || v === void 0 ? void 0 : v.type) === _types.AtomsTypeEnum.FIELD) {
-        return v.fieldName;
+        return getFieldDisplayName(v);
       } else {
         return v.val;
       }
@@ -636,6 +644,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
               tableUuid: '',
               datasourceName: '',
               datasourceId: '',
+              datasourceType: '',
               type: _types.AtomsTypeEnum.FIELD
             }]);
           }
@@ -694,7 +703,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         curColumn.lhs.filter(function (v) {
           return v.type === _types.AtomsTypeEnum.FIELD;
         }).map(function (v) {
-          names.push(v.fieldName);
+          names.push(getFieldDisplayName(v));
         });
         params[0] = names.join(' || ');
       }
@@ -831,13 +840,14 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         className: 'content',
         children: [rhsVal === null || rhsVal === void 0 ? void 0 : rhsVal.map(function (v, i) {
           if (v.type === _types.AtomsTypeEnum.FIELD) {
+            var displayName = getFieldDisplayName(v);
             return (0, _jsxRuntime.jsx)("div", {
               className: (0, _classnames["default"])("Sqb-TableName purple-name", {
-                notSelected: !v.fieldName
+                notSelected: !displayName
               }),
               "v-index": i,
               onClick: selectTable,
-              children: v.fieldName || (0, _locale.__)('SqlQueryBuilder.pickTable')
+              children: displayName || (0, _locale.__)('SqlQueryBuilder.pickTable')
             }, i);
           }
           if (v.type === _types.AtomsTypeEnum.CONSTANT) {

package/lib/cjs/components/dialog/expression/index.less

@@ -66,27 +66,33 @@
       flex: 1;
     }
     .operator-icon {
-      font-size: 18px !important;
+      min-width: 28px !important;
+      height: 28px !important;
+      padding: 0 7px !important;
+      font-size: 14px !important;
     }
     .Sqb-TableName {
-      border: 2px solid transparent;
-      border-radius: 6px;
+      border: 1px solid transparent;
+      border-radius: 5px;
       color: white;
       background-color: rgb(80, 158, 227);
       transition: background 300ms linear 0s;
       box-sizing: border-box;
       // margin-bottom: 8px;
       // margin-right: 8px;
-      padding: 8px;
+      padding: 4px 7px;
       display: flex;
       -webkit-box-align: center;
       align-items: center;
       cursor: pointer;
+      min-height: 28px;
+      font-size: 13px;
+      line-height: 18px;
       &-input {
         //输入框样式，稍微小了一点
-        margin-bottom: 9px;
-        margin-right: 8px;
-        padding: 9px;
+        margin-bottom: 6px;
+        margin-right: 6px;
+        padding: 5px 7px;
       }
       &::selection {
         color: #ffffff;
@@ -103,7 +109,7 @@
         }
       }
       &.notSelected {
-        border: 2px solid rgba(80, 158, 227, 0.25);
+        border: 1px solid rgba(80, 158, 227, 0.25);
         color: rgb(80, 158, 227);
         background-color: transparent;
         &:hover {
@@ -118,10 +124,12 @@
         }
         svg.closeIcon {
           opacity: 0.6;
-          margin-left: 8px;
+          margin-left: 5px;
+          width: 12px;
+          height: 12px;
         }
         &.notSelected {
-          border: 2px solid rgba(113, 114, 173, 0.25);
+          border: 1px solid rgba(113, 114, 173, 0.25);
           color: rgb(113, 114, 173);
           background-color: transparent;
           &:hover {
@@ -136,11 +144,15 @@
           background-color: rgba(147, 161, 171, 0.8);
         }
         svg.sort-arrow {
-          margin-right: 0.5rem;
+          margin-right: 0.35rem;
+          width: 12px;
+          height: 12px;
         }
         svg.closeIcon {
           opacity: 0.6;
-          margin-left: 8px;
+          margin-left: 5px;
+          width: 12px;
+          height: 12px;
         }
       }
       &.green-name {
@@ -151,10 +163,12 @@
         }
         svg.closeIcon {
           opacity: 0.6;
-          margin-left: 8px;
+          margin-left: 5px;
+          width: 12px;
+          height: 12px;
         }
         &.notSelected {
-          border: 2px solid rgba(136, 191, 77, 0.25);
+          border: 1px solid rgba(136, 191, 77, 0.25);
           color: rgb(136, 191, 77);
           background-color: transparent;
           &:hover {
@@ -221,11 +235,12 @@
 }
 
 .operator-btn {
-  height: 38px !important;
-  padding: 8px !important;
+  height: 32px !important;
+  padding: 4px 8px !important;
   text-align: left !important;
   display: flex !important;
   align-items: center !important;
+  font-size: 13px !important;
   & > .pd-Icon {
     margin-left: auto !important;
   }

package/lib/cjs/components/dialog/formula-list/CaseWhenGroup.d.ts

@@ -1,19 +1,28 @@
 import React from 'react';
-export type CaseWhenBranchView = {
+export type CaseWhenClauseView = {
     key: string;
     whenContent: React.ReactNode;
     thenContent: React.ReactNode;
+    canDelete?: boolean;
     onAddAfter: (e: any) => void;
     onDelete: (e: any) => void;
 };
 type Props = {
-    caseValueContent: React.ReactNode;
-    branches: CaseWhenBranchView[];
+    caseAtomsContent: React.ReactNode;
+    whenClauses: CaseWhenClauseView[];
     elseContent?: React.ReactNode;
     onAddBranch: (e: any) => void;
     onAddElse: (e: any) => void;
     onRemoveElse: (e: any) => void;
-    onDeleteCase: (e: any) => void;
+    onZoomCase?: (e: any) => void;
+    onDeleteCase?: (e: any) => void;
+    showTools?: boolean;
+    isNested?: boolean;
+    useBranchScrollInner?: boolean;
+    caseRegionKey?: string;
+    elseRegionKey?: string;
+    activeRegionKey?: string | null;
+    onActivateRegion?: (key: string) => void;
 };
-declare const CaseWhenGroup: ({ caseValueContent, branches, elseContent, onAddBranch, onAddElse, onRemoveElse, onDeleteCase, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const CaseWhenGroup: ({ caseAtomsContent, whenClauses, elseContent, onAddBranch, onAddElse, onRemoveElse, onZoomCase, onDeleteCase, showTools, isNested, useBranchScrollInner, caseRegionKey, elseRegionKey, activeRegionKey, onActivateRegion, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default CaseWhenGroup;

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

@@ -5,98 +5,272 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _pandora = require("@gingkoo/pandora");
 var _pandoraIcons = require("@gingkoo/pandora-icons");
 var _icons = require("../../icons");
+var CASE_ICON_SIZE = 10;
+var caseButtonBaseStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '0 0 auto',
+  width: 20,
+  minWidth: 20,
+  height: 20,
+  margin: 0,
+  padding: 0,
+  border: '1px solid transparent',
+  borderRadius: 6,
+  cursor: 'pointer',
+  lineHeight: 0,
+  boxShadow: '0 1px 2px rgba(83, 92, 112, 0.08)'
+};
+var addButtonStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, caseButtonBaseStyle), {}, {
+  borderColor: 'rgba(80, 158, 227, 0.28)',
+  background: 'rgba(80, 158, 227, 0.12)',
+  color: 'rgb(80, 158, 227)'
+});
+var removeButtonStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, caseButtonBaseStyle), {}, {
+  borderColor: 'rgba(245, 63, 63, 0.2)',
+  background: 'rgba(245, 63, 63, 0.06)',
+  color: 'rgba(220, 38, 38, 0.72)'
+});
+var removeDisabledButtonStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, removeButtonStyle), {}, {
+  cursor: 'not-allowed',
+  opacity: 0.4,
+  boxShadow: 'none'
+});
+var zoomButtonStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, caseButtonBaseStyle), {}, {
+  border: 'none',
+  borderRadius: 999,
+  background: 'transparent',
+  color: 'rgba(83, 92, 112, 0.58)',
+  boxShadow: 'none'
+});
+var recoverButtonStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  minHeight: 22,
+  margin: 0,
+  padding: '0 7px',
+  border: '1px dashed rgba(80, 158, 227, 0.35)',
+  borderRadius: 7,
+  background: 'rgba(80, 158, 227, 0.06)',
+  color: 'rgb(80, 158, 227)',
+  cursor: 'pointer',
+  fontSize: 11,
+  lineHeight: 1
+};
 var CaseWhenGroup = function CaseWhenGroup(_ref) {
-  var caseValueContent = _ref.caseValueContent,
-    branches = _ref.branches,
+  var caseAtomsContent = _ref.caseAtomsContent,
+    whenClauses = _ref.whenClauses,
     elseContent = _ref.elseContent,
     onAddBranch = _ref.onAddBranch,
     onAddElse = _ref.onAddElse,
     onRemoveElse = _ref.onRemoveElse,
-    onDeleteCase = _ref.onDeleteCase;
+    onZoomCase = _ref.onZoomCase,
+    onDeleteCase = _ref.onDeleteCase,
+    _ref$showTools = _ref.showTools,
+    showTools = _ref$showTools === void 0 ? true : _ref$showTools,
+    _ref$isNested = _ref.isNested,
+    isNested = _ref$isNested === void 0 ? false : _ref$isNested,
+    _ref$useBranchScrollI = _ref.useBranchScrollInner,
+    useBranchScrollInner = _ref$useBranchScrollI === void 0 ? false : _ref$useBranchScrollI,
+    _ref$caseRegionKey = _ref.caseRegionKey,
+    caseRegionKey = _ref$caseRegionKey === void 0 ? 'case' : _ref$caseRegionKey,
+    _ref$elseRegionKey = _ref.elseRegionKey,
+    elseRegionKey = _ref$elseRegionKey === void 0 ? 'else' : _ref$elseRegionKey,
+    activeRegionKey = _ref.activeRegionKey,
+    onActivateRegion = _ref.onActivateRegion;
+  var renderBranchContent = function renderBranchContent(children) {
+    if (isNested || !useBranchScrollInner) return children;
+    return (0, _jsxRuntime.jsx)("div", {
+      className: 'Sqb-CaseBranch-scrollInner',
+      children: children
+    });
+  };
+  var getRegionClassName = function getRegionClassName(regionKey) {
+    for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      classNames[_key - 1] = arguments[_key];
+    }
+    return _classnames["default"].apply(void 0, ['Sqb-FormulaGroup-row'].concat(classNames, [{
+      'Sqb-CaseRegion--active': activeRegionKey === regionKey
+    }]));
+  };
+  var handleActivateRegion = function handleActivateRegion(e, regionKey) {
+    var _target$closest;
+    var target = e.target;
+    var currentRegion = target === null || target === void 0 || (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, '.Sqb-FormulaGroup-row');
+    if (currentRegion !== e.currentTarget) return;
+    onActivateRegion === null || onActivateRegion === void 0 || onActivateRegion(regionKey);
+  };
   return (0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames["default"])('Sqb-FormulaGroup', 'flow-group', 'formula-node-group'),
-    children: [(0, _jsxRuntime.jsx)("button", {
-      type: 'button',
-      className: 'Sqb-CaseRow-remove formula-node-remove',
-      onClick: onDeleteCase,
-      children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+    className: (0, _classnames["default"])('Sqb-FormulaGroup', 'flow-group', 'formula-node-group', 'Sqb-CaseWhenGroup', {
+      'Sqb-CaseWhenGroup--nested': isNested
+    }),
+    children: [showTools && (0, _jsxRuntime.jsxs)("div", {
+      className: 'Sqb-CaseWhenTools',
+      children: [onZoomCase && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+        title: "\u7F16\u8F91 caseWhen",
+        children: (0, _jsxRuntime.jsx)("button", {
+          type: 'button',
+          className: 'Sqb-CaseRow-zoom formula-node-tool',
+          style: zoomButtonStyle,
+          onClick: onZoomCase,
+          children: (0, _jsxRuntime.jsx)(_pandoraIcons.FullscreenOExpand, {})
+        })
+      }), onDeleteCase && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+        title: "\u5220\u9664 caseWhen",
+        children: (0, _jsxRuntime.jsx)("button", {
+          type: 'button',
+          className: 'Sqb-CaseRow-remove formula-node-remove',
+          style: removeButtonStyle,
+          onClick: onDeleteCase,
+          children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {
+            width: CASE_ICON_SIZE,
+            height: CASE_ICON_SIZE
+          })
+        })
+      })]
     }), (0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames["default"])('Sqb-FormulaGroup-row', 'row-case'),
+      className: getRegionClassName(caseRegionKey, 'row-case'),
+      onMouseDown: function onMouseDown(e) {
+        return handleActivateRegion(e, caseRegionKey);
+      },
       children: [(0, _jsxRuntime.jsx)("span", {
         className: 'Sqb-CaseKeyword keyword-case',
         children: "case"
       }), (0, _jsxRuntime.jsx)("div", {
         className: 'Sqb-CaseSection Sqb-CaseSection-case',
-        children: caseValueContent
+        children: (0, _jsxRuntime.jsx)("div", {
+          className: 'Sqb-CaseSection-content',
+          children: caseAtomsContent
+        })
       })]
-    }), branches.map(function (branch) {
-      return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-        children: (0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames["default"])('Sqb-FormulaGroup-row', 'row-when'),
-          children: [(0, _jsxRuntime.jsxs)("div", {
-            className: 'Sqb-CaseSection Sqb-CaseSection-condition',
-            children: [(0, _jsxRuntime.jsx)("span", {
-              className: 'Sqb-CaseKeyword keyword-branch',
-              children: "when"
-            }), branch.whenContent]
-          }), (0, _jsxRuntime.jsxs)("div", {
-            className: 'Sqb-CaseSection Sqb-CaseSection-result',
-            children: [(0, _jsxRuntime.jsx)("span", {
-              className: 'Sqb-CaseKeyword keyword-branch',
-              children: "then"
-            }), branch.thenContent]
-          }), (0, _jsxRuntime.jsxs)("div", {
-            className: 'Sqb-CaseRow-actions when-row-actions',
-            children: [(0, _jsxRuntime.jsx)("button", {
+    }), whenClauses.map(function (branch, branchIndex) {
+      var canDeleteBranch = branch.canDelete !== false;
+      return (0, _jsxRuntime.jsxs)("div", {
+        className: getRegionClassName(branch.key, 'row-when'),
+        onMouseDown: function onMouseDown(e) {
+          return handleActivateRegion(e, branch.key);
+        },
+        children: [(0, _jsxRuntime.jsx)("span", {
+          className: 'Sqb-CaseBranchIndex',
+          children: branchIndex + 1
+        }), (0, _jsxRuntime.jsx)("div", {
+          className: 'Sqb-CaseBranch-body',
+          children: renderBranchContent((0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [(0, _jsxRuntime.jsxs)("div", {
+              className: 'Sqb-CaseSection Sqb-CaseSection-condition',
+              children: [(0, _jsxRuntime.jsx)("span", {
+                className: 'Sqb-CaseKeyword keyword-branch keyword-when',
+                children: "when"
+              }), (0, _jsxRuntime.jsx)("div", {
+                className: 'Sqb-CaseSection-content Sqb-CaseSection-content--wrap',
+                children: branch.whenContent
+              })]
+            }), (0, _jsxRuntime.jsxs)("div", {
+              className: 'Sqb-CaseSection Sqb-CaseSection-result',
+              children: [(0, _jsxRuntime.jsx)("span", {
+                className: 'Sqb-CaseKeyword keyword-branch keyword-then',
+                children: "then"
+              }), (0, _jsxRuntime.jsx)("div", {
+                className: 'Sqb-CaseSection-content Sqb-CaseSection-content--wrap',
+                children: branch.thenContent
+              })]
+            })]
+          }))
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: 'Sqb-CaseRow-actions when-row-actions',
+          children: [(0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            title: "\u65B0\u589E when",
+            children: (0, _jsxRuntime.jsx)("button", {
               type: 'button',
               className: 'Sqb-CaseRow-add',
+              style: addButtonStyle,
               onClick: branch.onAddAfter,
               children: (0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {})
-            }), (0, _jsxRuntime.jsx)("button", {
+            })
+          }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            title: canDeleteBranch ? '删除 when' : '至少保留一个 when / then',
+            children: (0, _jsxRuntime.jsx)("button", {
               type: 'button',
-              className: 'Sqb-CaseRow-remove',
+              className: (0, _classnames["default"])('Sqb-CaseRow-remove', {
+                disabled: !canDeleteBranch
+              }),
+              disabled: !canDeleteBranch,
+              style: canDeleteBranch ? removeButtonStyle : removeDisabledButtonStyle,
               onClick: branch.onDelete,
-              children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
-            })]
+              children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {
+                width: CASE_ICON_SIZE,
+                height: CASE_ICON_SIZE
+              })
+            })
           })]
-        })
+        })]
       }, branch.key);
-    }), branches.length < 1 && (0, _jsxRuntime.jsxs)("button", {
-      type: 'button',
-      className: (0, _classnames["default"])('Sqb-CaseRecover', 'recover-row', 'inline-after-case'),
-      onClick: onAddBranch,
-      children: [(0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {}), (0, _jsxRuntime.jsx)("span", {
-        children: "\u65B0\u589E when"
-      })]
+    }), whenClauses.length < 1 && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: "\u65B0\u589E when",
+      children: (0, _jsxRuntime.jsxs)("button", {
+        type: 'button',
+        className: (0, _classnames["default"])('Sqb-CaseRecover', 'recover-row', 'inline-after-case'),
+        style: recoverButtonStyle,
+        onClick: onAddBranch,
+        children: [(0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {}), (0, _jsxRuntime.jsx)("span", {
+          children: "\u65B0\u589E when"
+        })]
+      })
     }), elseContent && (0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames["default"])('Sqb-FormulaGroup-row', 'row-else'),
-      children: [(0, _jsxRuntime.jsxs)("div", {
-        className: 'Sqb-CaseSection Sqb-CaseSection-result',
-        children: [(0, _jsxRuntime.jsx)("span", {
-          className: 'Sqb-CaseKeyword keyword-branch',
-          children: "else"
-        }), elseContent]
+      className: getRegionClassName(elseRegionKey, 'row-else'),
+      onMouseDown: function onMouseDown(e) {
+        return handleActivateRegion(e, elseRegionKey);
+      },
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: 'Sqb-CaseBranchIndex Sqb-CaseBranchIndex--else',
+        "aria-hidden": 'true'
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: 'Sqb-CaseBranch-body',
+        children: renderBranchContent((0, _jsxRuntime.jsxs)("div", {
+          className: 'Sqb-CaseSection Sqb-CaseSection-result Sqb-CaseSection-else',
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: 'Sqb-CaseKeyword keyword-branch keyword-else',
+            children: "else"
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: 'Sqb-CaseSection-content Sqb-CaseSection-content--wrap',
+            children: elseContent
+          })]
+        }))
       }), (0, _jsxRuntime.jsx)("div", {
         className: 'Sqb-CaseRow-actions when-row-actions',
-        children: (0, _jsxRuntime.jsx)("button", {
-          type: 'button',
-          className: 'Sqb-CaseRow-remove',
-          onClick: onRemoveElse,
-          children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+        children: (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+          title: "\u5220\u9664 else",
+          children: (0, _jsxRuntime.jsx)("button", {
+            type: 'button',
+            className: 'Sqb-CaseRow-remove',
+            style: removeButtonStyle,
+            onClick: onRemoveElse,
+            children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {
+              width: CASE_ICON_SIZE,
+              height: CASE_ICON_SIZE
+            })
+          })
         })
       })]
-    }), !elseContent && (0, _jsxRuntime.jsxs)("button", {
-      type: 'button',
-      className: (0, _classnames["default"])('Sqb-CaseRecover', 'recover-else-row'),
-      onClick: onAddElse,
-      children: [(0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {}), (0, _jsxRuntime.jsx)("span", {
-        children: "\u65B0\u589E else"
-      })]
+    }), !elseContent && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: "\u65B0\u589E else",
+      children: (0, _jsxRuntime.jsxs)("button", {
+        type: 'button',
+        className: (0, _classnames["default"])('Sqb-CaseRecover', 'recover-else-row'),
+        style: recoverButtonStyle,
+        onClick: onAddElse,
+        children: [(0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {}), (0, _jsxRuntime.jsx)("span", {
+          children: "\u65B0\u589E else"
+        })]
+      })
     }), (0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])('Sqb-FormulaGroup-row', 'row-end'),
       children: (0, _jsxRuntime.jsx)("span", {

package/lib/cjs/components/dialog/formula-list/LogicGroup.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 type Props = {
     operator: 'and' | 'or';
     onToggleOperator: () => void;
-    content: React.ReactNode;
+    leftContent: React.ReactNode;
+    rightContent: React.ReactNode;
     onDelete: (e: any) => void;
 };
-declare const LogicGroup: ({ operator, onToggleOperator, content, onDelete }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LogicGroup: ({ operator, onToggleOperator, leftContent, rightContent, onDelete, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default LogicGroup;

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

@@ -7,15 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _pandora = require("@gingkoo/pandora");
 var _icons = require("../../icons");
 var LogicGroup = function LogicGroup(_ref) {
   var operator = _ref.operator,
     onToggleOperator = _ref.onToggleOperator,
-    content = _ref.content,
+    leftContent = _ref.leftContent,
+    rightContent = _ref.rightContent,
     onDelete = _ref.onDelete;
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('Sqb-FormulaGroup', 'logic-group', 'formula-node-group'),
-    children: [(0, _jsxRuntime.jsx)("button", {
+    children: [(0, _jsxRuntime.jsx)("span", {
+      className: 'Sqb-CaseKeyword',
+      children: "("
+    }), (0, _jsxRuntime.jsx)("div", {
+      className: 'Sqb-LogicGroup-content',
+      children: leftContent
+    }), (0, _jsxRuntime.jsx)("button", {
       type: 'button',
       className: (0, _classnames["default"])('Sqb-TableName', 'operator-trigger', 'logic-operator', {
         'logic-and': operator === 'and',
@@ -23,20 +31,20 @@ var LogicGroup = function LogicGroup(_ref) {
       }),
       onClick: onToggleOperator,
       children: operator
-    }), (0, _jsxRuntime.jsx)("span", {
-      className: 'Sqb-CaseKeyword',
-      children: "("
     }), (0, _jsxRuntime.jsx)("div", {
       className: 'Sqb-LogicGroup-content',
-      children: content
+      children: rightContent
     }), (0, _jsxRuntime.jsx)("span", {
       className: 'Sqb-CaseKeyword',
       children: ")"
-    }), (0, _jsxRuntime.jsx)("button", {
-      type: 'button',
-      className: 'Sqb-CaseRow-remove formula-node-remove',
-      onClick: onDelete,
-      children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+    }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: "\u5220\u9664 and/or",
+      children: (0, _jsxRuntime.jsx)("button", {
+        type: 'button',
+        className: 'Sqb-CaseRow-remove formula-node-remove',
+        onClick: onDelete,
+        children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+      })
     })]
   });
 };

package/lib/cjs/components/dialog/formula-list/index.d.ts

@@ -15,6 +15,7 @@ interface PropsType {
     _type?: string;
     embedded?: boolean;
     enableCopy?: boolean;
+    enableZoom?: boolean;
     parentPopupChannel?: 'primary' | 'secondary';
 }
 declare const FormulaList: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<unknown>>;