@gingkoo/pandora-metabase 0.0.27 → 0.0.29

package/lib/es/index.js

@@ -1,19 +1,19 @@
 /**
- * @gingkoo/pandora-metabase v0.0.27
+ * @gingkoo/pandora-metabase v0.0.29
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useContext, createContext, useState, useRef, useMemo, forwardRef, useImperativeHandle, useEffect } from 'react';
 import cx from 'classnames';
-import { Button, Tooltip, Input, Modal2, Toast } from '@gingkoo/pandora';
-import { DatePicker, Dropdown, Tooltip as Tooltip$1, InputNumber, Button as Button$1 } from 'antd';
+import { Button, Tooltip, InputNumber, Input, Select, Modal2, Toast } from '@gingkoo/pandora';
+import { DatePicker, Dropdown, Tooltip as Tooltip$1, InputNumber as InputNumber$1, Button as Button$1 } from 'antd';
 import { DownOutlined, LoadingOutlined } from '@ant-design/icons';
 import Styled from 'styled-components';
 import _$2 from 'underscore';
 import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 import cloneDeep from 'lodash/cloneDeep';
-import { Repeat, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
+import { Repeat, Function, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
 import moment from 'dayjs';
 import isEqual from 'lodash/isEqual';
 
@@ -1105,6 +1105,8 @@ register('en', {
   'filter.contain': 'contain',
   'filter.notInclude': 'not include',
   'filter.startWith': 'start with',
+  'filter.within': 'IN',
+  'filter.withnotin': 'NOT IN',
   'filter.endWith': 'end with',
   'filter.earlierThan': 'earlier than',
   'filter.laterThan': 'later than',
@@ -1233,6 +1235,8 @@ register('zh', {
   'filter.contain': '包含',
   'filter.notInclude': '不包含',
   'filter.startWith': '以...开始',
+  'filter.within': 'IN',
+  'filter.withnotin': 'NOT IN',
   'filter.endWith': '以...结束',
   'filter.earlierThan': '早于',
   'filter.laterThan': '晚于',
@@ -1334,7 +1338,7 @@ const Loading = ({
   });
 };
 
-var css_248z$b = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s,\n            border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
+var css_248z$b = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-Filter-item {\n  position: relative;\n  margin: 0 10px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow,\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  position: absolute;\n  top: 0;\n  height: 40px;\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.4;\n  cursor: pointer;\n  transform: scale(0);\n  transition: all 0.3s;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow img,\n.Sqb-item--content .Sqb-Filter-item .left-arrow img {\n  transform: scale(0.8);\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow:hover,\n.Sqb-item--content .Sqb-Filter-item .left-arrow:hover {\n  opacity: 1;\n}\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  transform: rotate(180deg) scale(0);\n  transform-origin: 50% 50%;\n  left: -30px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow {\n  right: -20px;\n}\n.Sqb-item--content .Sqb-Filter-item.hover .left-arrow {\n  transform: rotate(180deg) scale(1);\n}\n.Sqb-item--content .Sqb-Filter-item.hover .right-arrow {\n  transform: scale(1);\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell-preview {\n  flex-shrink: 0;\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s,\n            border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
 styleInject(css_248z$b);
 
 var css_248z$a = ".Sqb-CustomColumn--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-CustomColumn--box .input {\n  color: #4c5773;\n  font-size: 1.12em;\n  padding: 0.75rem 0.75rem;\n  border: 1px solid #f0f0f0;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  font-family: Monaco, monospace;\n  font-weight: 700;\n  -webkit-font-smoothing: antialiased;\n}\n.Sqb-CustomColumn--box .input:focus {\n  outline: none;\n  border: 1px solid #509ee3;\n  transition: border 0.3s linear;\n  color: #4c5773;\n}\n.Sqb-CustomColumn--box .input::-webkit-input-placeholder {\n  color: #949aab;\n}\n.Sqb-CustomColumn--box .input::-ms-input-placeholder {\n  color: #949aab;\n}\n.Sqb-CustomColumn--box .input.border-error {\n  border-color: #ed6e6e !important;\n}\n.Sqb-CustomColumn--box .text-error {\n  color: #ed6e6e;\n}\n.Sqb-CustomColumn--box .btns {\n  flex-direction: row;\n  align-items: center;\n  display: flex;\n  border-top: 1px solid #f0f0f0;\n}\n.Sqb-CustomColumn--box .btns .btn {\n  padding: 0.75rem 1rem;\n  display: inline-block;\n  box-sizing: border-box;\n  background: transparent;\n  border: 1px solid #e4e4e4;\n  color: #4c5773;\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: bold;\n  font-family: 'Lato', sans-serif;\n  border-radius: 6px;\n  outline: none;\n}\n.Sqb-CustomColumn--box .btns .btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.Sqb-CustomColumn--box .btns .btn:not(:disabled):hover {\n  color: #509ee3;\n  border-color: #d6d6d6;\n  background: #f9fbfc;\n  transition: all 200ms linear;\n}\n.Sqb-CustomColumn--box .btns .btn.usable {\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb-CustomColumn--box .btns .btn.usable:hover {\n  color: #ffffff;\n  border-color: #509ee3;\n  background-color: rgba(80, 158, 227, 0.88);\n}\n";
@@ -4026,14 +4030,14 @@ const SelectJoinColumn = ({
   });
 };
 
-var css_248z$4 = ".filter-page {\n  min-width: 300px;\n}\n.filter-page .header {\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  display: flex;\n  align-items: center;\n  color: #949aab;\n  border-bottom: 1px solid #f0f0f0;\n}\n.filter-page .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.filter-page .header .left-info span {\n  font-weight: 900;\n  font-size: 16px;\n  color: #4c5773;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-family: 'Lato', sans-serif;\n}\n.filter-page .header .left-info span svg {\n  margin-right: 0.5rem;\n}\n.filter-page .header .left-info span:hover {\n  color: #509ee3;\n}\n.filter-page .header .right-info {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n.filter-page .content {\n  padding: 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.filter-page .content_l {\n  flex: 1;\n}\n.filter-page .content .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .content .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s;\n  box-sizing: border-box;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.filter-page .content .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.filter-page .content .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.filter-page .content .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.noClick {\n  cursor: default;\n}\n.filter-page .content .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.filter-page .content .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.filter-page .content .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.filter-page .content .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.filter-page .content .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.filter-page .content .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .w_300 {\n  width: 300px;\n}\n.filter-page .content .input {\n  border: 1px solid #f0f0f0;\n  font-size: 16px;\n  color: #4c5773;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  padding: 9px 20px;\n  height: 40px;\n  outline: none;\n}\n.filter-page .content .input::placeholder {\n  color: #ccc;\n}\n.filter-page .content .input + .input {\n  margin-top: 10px;\n}\n.filter-page .content .input.inline {\n  display: inline-block;\n  flex: 1;\n  margin-right: 15px;\n  padding: 5px 20px;\n}\n.filter-page .footer {\n  padding: 0 0.5rem 0.5rem;\n  display: flex;\n  align-items: center;\n}\n.filter-page .footer .button--purple {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: white;\n  background-color: #7172ad;\n  border: 1px solid #7172ad;\n  padding: 6px 14px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.filter-page .footer .button--purple.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.filter-page .footer .button--purple:hover {\n  color: white;\n  background-color: rgba(113, 114, 173, 0.88);\n  border-color: rgba(113, 114, 173, 0.88);\n}\n.operator-btn {\n  height: 38px !important;\n  padding: 8px !important;\n  text-align: left !important;\n  display: flex !important;\n  align-items: center !important;\n}\n.operator-btn > .anticon {\n  margin-left: auto !important;\n}\n";
+var css_248z$4 = ".filter-page {\n  min-width: 300px;\n}\n.filter-page .header {\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  display: flex;\n  align-items: center;\n  color: #949aab;\n  border-bottom: 1px solid #f0f0f0;\n}\n.filter-page .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n  flex: 1;\n}\n.filter-page .header .left-info-formula {\n  display: flex;\n  margin: 0 5px;\n  gap: 5px;\n}\n.filter-page .header .left-info-formula .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .header .left-info-formula-input {\n  width: 25px;\n  margin: 0 5px;\n}\n.filter-page .header .left-info-formula-input .pd-Input-inner-wrapper {\n  border-top: 0;\n  border-left: 0;\n  border-right: 0;\n  border-radius: 0;\n  padding: 0 3px;\n}\n.filter-page .header .left-info-formula-input .pd-Input-inner-wrapper input {\n  text-align: center;\n}\n.filter-page .header .left-info .span-name {\n  font-weight: 900;\n  font-size: 16px;\n  color: #4c5773;\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-family: 'Lato', sans-serif;\n}\n.filter-page .header .left-info .span-name svg {\n  margin-right: 0.5rem;\n}\n.filter-page .header .left-info .span-name:hover {\n  color: #509ee3;\n}\n.filter-page .header .right-info {\n  display: flex;\n  align-items: center;\n}\n.filter-page .content {\n  padding: 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.filter-page .content_l {\n  flex: 1;\n}\n.filter-page .content .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .content .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s;\n  box-sizing: border-box;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.filter-page .content .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.filter-page .content .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.filter-page .content .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.noClick {\n  cursor: default;\n}\n.filter-page .content .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.filter-page .content .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.filter-page .content .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.filter-page .content .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.filter-page .content .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.filter-page .content .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .w_300 {\n  width: 300px;\n}\n.filter-page .content .input {\n  border: 1px solid #f0f0f0;\n  font-size: 16px;\n  color: #4c5773;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  padding: 9px 20px;\n  height: 40px;\n  outline: none;\n}\n.filter-page .content .input::placeholder {\n  color: #ccc;\n}\n.filter-page .content .input + .input {\n  margin-top: 10px;\n}\n.filter-page .content .input.inline {\n  display: inline-block;\n  flex: 1;\n  margin-right: 15px;\n  padding: 5px 20px;\n}\n.filter-page .footer {\n  padding: 0 0.5rem 0.5rem;\n  display: flex;\n  align-items: center;\n}\n.filter-page .footer .button--purple {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: white;\n  background-color: #7172ad;\n  border: 1px solid #7172ad;\n  padding: 6px 14px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.filter-page .footer .button--purple.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.filter-page .footer .button--purple:hover {\n  color: white;\n  background-color: rgba(113, 114, 173, 0.88);\n  border-color: rgba(113, 114, 173, 0.88);\n}\n.operator-btn {\n  height: 38px !important;\n  padding: 8px !important;\n  text-align: left !important;\n  display: flex !important;\n  align-items: center !important;\n}\n.operator-btn > .anticon {\n  margin-left: auto !important;\n}\n";
 styleInject(css_248z$4);
 
 const {
   RangePicker
 } = DatePicker;
-const NUMBER_LIST = ['等于', '不等于', '大于', '小于', '介于之间', '大于或等于', '小于或等于', '为空', '不为空'];
-const STRING_LIST = ['是', '不是', '包含', '不包含', '为空', '不为空', '以...开始', '以...结束'];
+const NUMBER_LIST = ['等于', '不等于', '大于', '小于', '介于之间', '大于或等于', '小于或等于', '为空', '不为空', 'In', 'Not In'];
+const STRING_LIST = ['等于', '不等于', '包含', '不包含', '为空', '不为空', '以...开始', '以...结束', 'In', 'Not In'];
 const DATE_LIST = [
 // '前', '下一个', '当前',
 '早于', '晚于',
@@ -4049,11 +4053,12 @@ const SelectFilterColumn = ({
   const [condition, setCondition] = useState(value.condition);
   const [isField, setIsField] = useState(value.isField || false);
   const [curVal, setVal] = useState(value.val);
+  const [formula, setFormula] = useState(value.formula || {});
   const store = useStore$1();
   let table2Selected = Boolean(curColumn.table2?.name);
   const disabled = useMemo(() => {
     if (!condition) return true;
-    if (curColumn.table2?.id && ~['是', '不是'].indexOf(condition)) {
+    if (curColumn.table2?.id && ~['等于', '不等于'].indexOf(condition)) {
       return false;
     }
     if (~['为空', '不为空', '是空的', '不是空的'].indexOf(condition)) {
@@ -4070,71 +4075,86 @@ const SelectFilterColumn = ({
   useEffect(() => {
     didUpdate?.();
   }, [condition]);
+  const getQuotesName = name => {
+    switch (formula.type) {
+      case 'SUBSTR':
+        // let str = formula.params?.join(',');
+        return `SUBSTR(${name},${formula?.params?.[1]},${formula?.params?.[2]})`;
+      default:
+        return name;
+    }
+  };
   function generateQuotes(val, curColumn) {
     let [firstVal = '', secondVal = ''] = val;
     let quotes = '';
     if (condition === '以...开始') {
       if (isEn) {
-        quotes = curColumn.name + ' ' + `startWith ${firstVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `startWith ${firstVal}`;
       } else {
-        quotes = curColumn.name + ' ' + `以 ${firstVal} 开始`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `以 ${firstVal} 开始`;
       }
     } else if (condition === '以...结束') {
       if (isEn) {
-        quotes = curColumn.name + ' ' + `endWith ${firstVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `endWith ${firstVal}`;
       } else {
-        quotes = curColumn.name + ' ' + `以 ${firstVal} 结束`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `以 ${firstVal} 结束`;
       }
     } else if (condition === '介于之间') {
       if (isEn) {
-        quotes = curColumn.name + ' ' + `Between ${firstVal} and ${secondVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `Between ${firstVal} and ${secondVal}`;
       } else {
-        quotes = curColumn.name + ' ' + `介于${firstVal}和${secondVal}之间`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `介于${firstVal}和${secondVal}之间`;
       }
     } else if (condition === '前') {
       if (isEn) {
-        quotes = curColumn.name + ' ' + `previous ${firstVal}${secondVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `previous ${firstVal}${secondVal}`;
       } else {
-        quotes = curColumn.name + ' ' + `上一个${firstVal}${secondVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `上一个${firstVal}${secondVal}`;
       }
     } else if (condition === '下一个') {
       if (isEn) {
-        quotes = curColumn.name + ' ' + `next ${firstVal}${secondVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `next ${firstVal}${secondVal}`;
       } else {
-        quotes = curColumn.name + ' ' + `下一个${firstVal}${secondVal}`;
+        quotes = getQuotesName(curColumn.name) + ' ' + `下一个${firstVal}${secondVal}`;
       }
     } else if (condition === '在') {
       if (isEn) {
-        quotes = curColumn.name + ' is ' + firstVal;
+        quotes = getQuotesName(curColumn.name) + ' is ' + firstVal;
       } else {
-        quotes = curColumn.name + ' 是 ' + firstVal;
+        quotes = getQuotesName(curColumn.name) + ' 是 ' + firstVal;
       }
     } else if (condition === '是空的') {
       if (isEn) {
-        quotes = curColumn.name + ' is empty';
+        quotes = getQuotesName(curColumn.name) + ' is empty';
       } else {
-        quotes = curColumn.name + ' 为空';
+        quotes = getQuotesName(curColumn.name) + ' 为空';
       }
     } else if (condition === '不是空的') {
       if (isEn) {
-        quotes = curColumn.name + ' not empty';
+        quotes = getQuotesName(curColumn.name) + ' not empty';
       } else {
-        quotes = curColumn.name + ' 不为空';
+        quotes = getQuotesName(curColumn.name) + ' 不为空';
       }
     } else if (condition === '当前') {
       if (firstVal === '天') {
         if (isEn) {
-          quotes = curColumn.name + ' ' + `today`;
+          quotes = getQuotesName(curColumn.name) + ' ' + `today`;
         } else {
-          quotes = curColumn.name + ' ' + `今天`;
+          quotes = getQuotesName(curColumn.name) + ' ' + `今天`;
         }
       } else {
         if (isEn) {
-          quotes = curColumn.name + ' ' + `this is ${firstVal}`;
+          quotes = getQuotesName(curColumn.name) + ' ' + `this is ${firstVal}`;
         } else {
-          quotes = curColumn.name + ' ' + `这个${firstVal}`;
+          quotes = getQuotesName(curColumn.name) + ' ' + `这个${firstVal}`;
         }
       }
+    } else if (condition === 'In') {
+      let cond = __('filter.within');
+      quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + `(${firstVal})`;
+    } else if (condition === 'Not In') {
+      let cond = __('filter.withnotin');
+      quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + `(${firstVal})`;
     } else {
       let cond = __({
         等于: 'filter.equal',
@@ -4146,8 +4166,6 @@ const SelectFilterColumn = ({
         小于或等于: 'filter.lessThanOrEqualTo',
         为空: 'filter.empty',
         不为空: 'filter.notEmpty',
-        是: 'filter.is',
-        不是: 'filter.isNo',
         包含: 'filter.contain',
         不包含: 'filter.notInclude',
         '以...开始': 'filter.startWith',
@@ -4157,9 +4175,9 @@ const SelectFilterColumn = ({
         是空的: 'filter.isEmpty'
       }[condition]);
       if (curColumn.table2?.id) {
-        quotes = curColumn.name + ' ' + cond + ' ' + curColumn.table2.name;
+        quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + curColumn.table2.name;
       } else {
-        quotes = curColumn.name + ' ' + cond + ' ' + firstVal;
+        quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + firstVal;
       }
     }
     return quotes;
@@ -4169,6 +4187,7 @@ const SelectFilterColumn = ({
     let quotes = generateQuotes(curVal, curColumn);
     typeof onChange === 'function' && onChange({
       ...curColumn,
+      formula: formula,
       val: curVal,
       // 选择结果 如果有两个 长度就为2
       isField: isField,
@@ -4198,6 +4217,7 @@ const SelectFilterColumn = ({
       database_type: '' // 字段类型
     });
     setCondition('');
+    setFormula({});
     setVal([]);
   }
   function getData(data) {
@@ -4371,7 +4391,25 @@ const SelectFilterColumn = ({
           }
         })
       });
-    } else if (~['等于', '不等于', '大于', '小于', '大于或等于', '小于或等于', '是', '不是', '包含', '不包含', '以...开始', '以...结束'].indexOf(conditionText)) {
+    } else if (~['In', 'Not In'].indexOf(conditionText)) {
+      const options = firstVal?.split(',') || [];
+      return jsx("div", {
+        children: jsx(Select, {
+          size: 'large',
+          placeholder: '\u53EF\u8F93\u5165\u56DE\u8F66\u65B0\u589E\u4E0B\u62C9\u9009\u9879',
+          allowCreate: true,
+          multiple: true,
+          value: options,
+          onChange: val => {
+            setVal([val.join(',')]);
+          },
+          children: options.map(option => jsx(Select.Option, {
+            value: option,
+            children: option
+          }, option))
+        })
+      });
+    } else if (~['等于', '不等于', '大于', '小于', '大于或等于', '小于或等于', '包含', '不包含', '以...开始', '以...结束'].indexOf(conditionText)) {
       return jsx("div", {
         children: jsx(Input, {
           className: 'input',
@@ -4437,28 +4475,111 @@ const SelectFilterColumn = ({
           小于或等于: 'filter.lessThanOrEqualTo',
           为空: 'filter.empty',
           不为空: 'filter.notEmpty',
-          是: 'filter.is',
-          不是: 'filter.isNo',
           包含: 'filter.contain',
           不包含: 'filter.notInclude',
           '以...开始': 'filter.startWith',
           '以...结束': 'filter.endWith',
           早于: 'filter.earlierThan',
           晚于: 'filter.laterThan',
-          是空的: 'filter.isEmpty'
+          是空的: 'filter.isEmpty',
+          In: 'filter.within',
+          'Not In': 'filter.withnotin'
         }[v])
       };
     });
+    const changeFormula = val => {
+      let params = [];
+      if (val === 'SUBSTR') {
+        params[0] = curColumn.name;
+      }
+      setFormula({
+        type: val,
+        params: params
+      });
+    };
+    const changeParams = (val, i) => {
+      const _formula = {
+        ...formula
+      };
+      if (_formula.params) {
+        _formula.params[i] = val;
+        setFormula({
+          ..._formula
+        });
+      }
+    };
+    let formulas = [{
+      key: 'SUBSTR',
+      label: 'SUBSTR'
+    }];
+    const leftFormula = () => {
+      return jsx("div", {
+        className: 'left-info-formula',
+        children: jsx(Dropdown, {
+          menu: {
+            items: formulas,
+            onClick: ({
+              key
+            }) => {
+              changeFormula(key);
+            }
+          },
+          trigger: ['click'],
+          children: jsx(Button, {
+            className: 'operator-icon',
+            icon: jsx(Function, {})
+          })
+        })
+      });
+    };
+    const getName = name => {
+      switch (formula.type) {
+        case 'SUBSTR':
+          return jsxs("div", {
+            children: ["SUBSTR(", name, ",", jsx(InputNumber, {
+              className: 'left-info-formula-input',
+              hideControl: true,
+              placeholder: '',
+              onClick: e => {
+                e.stopPropagation();
+                return false;
+              },
+              size: 'small',
+              value: formula?.params?.[1],
+              onChange: val => {
+                changeParams(val, 1);
+              }
+            }), ",", jsx(InputNumber, {
+              className: 'left-info-formula-input',
+              hideControl: true,
+              quickEdit: true,
+              placeholder: '',
+              onClick: e => {
+                e.stopPropagation();
+                return false;
+              },
+              size: 'small',
+              value: formula?.params?.[2],
+              onChange: val => {
+                changeParams(val, 2);
+              }
+            }), ")"]
+          });
+        default:
+          return name;
+      }
+    };
     return jsxs("div", {
       className: 'filter-page',
       children: [jsxs("div", {
         className: 'header',
-        children: [jsx("div", {
+        children: [jsxs("div", {
           className: 'left-info',
-          children: jsxs("span", {
+          children: [jsxs("span", {
+            className: 'span-name',
             onClick: goPrevPage,
-            children: [jsx(LeftArrowIcon, {}), curColumn.name]
-          })
+            children: [jsx(LeftArrowIcon, {}), getName(curColumn.name)]
+          }), leftFormula()]
         }), jsx("div", {
           className: 'right-info',
           children: jsx(Dropdown, {
@@ -4494,15 +4615,15 @@ const SelectFilterColumn = ({
                 小于或等于: 'filter.lessThanOrEqualTo',
                 为空: 'filter.empty',
                 不为空: 'filter.notEmpty',
-                是: 'filter.is',
-                不是: 'filter.isNo',
                 包含: 'filter.contain',
                 不包含: 'filter.notInclude',
                 '以...开始': 'filter.startWith',
                 '以...结束': 'filter.endWith',
                 早于: 'filter.earlierThan',
                 晚于: 'filter.laterThan',
-                是空的: 'filter.isEmpty'
+                是空的: 'filter.isEmpty',
+                In: 'filter.within',
+                'Not In': 'filter.withnotin'
               }[condition]), jsx(DownOutlined, {})]
             })
           })
@@ -4518,7 +4639,7 @@ const SelectFilterColumn = ({
         }) : jsx("div", {
           className: 'content_l',
           children: renderFilter(type, condition)
-        }), ~['是', '不是'].indexOf(condition) ? jsx(Tooltip, {
+        }), ~['等于', '不等于'].indexOf(condition) ? jsx(Tooltip, {
           title: __('SqlQueryBuilder.switch'),
           children: jsx(Button, {
             primary: true,
@@ -6317,6 +6438,8 @@ const CustomColumn = props => {
   });
 };
 
+var img = "data:image/svg+xml,%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='26px' height='18px' version='1.1'%3e%3cpath d='m 1 6 L 14 6 L 14 1 L 26 9 L 14 18 L 14 12 L 1 12 z' stroke='white' fill='%2329b6f2'/%3e%3c/svg%3e";
+
 const Filter = props => {
   const {
     meta
@@ -6327,6 +6450,7 @@ const Filter = props => {
   } = meta;
   let index = findIndex(store.metaList, meta);
   let notSelected = !meta.filter.length;
+  const [ind, setInd] = useState(-1);
   function getColumns() {
     let {
       ExistAboveGroupBy,
@@ -6439,8 +6563,11 @@ const Filter = props => {
     });
   }
   function handleAdd(e) {
+    let node = e.currentTarget;
     let newMeta = store.metaList.slice();
     let data = getColumns();
+    let _index = node.getAttribute('v-index');
+    let _type = node.getAttribute('v-type');
     let value = {
       table: '',
       // 表名
@@ -6470,7 +6597,15 @@ const Filter = props => {
         data: data,
         value: value,
         onChange: data => {
-          newMeta[index].filter.push(data);
+          if (_type) {
+            if (_type === 'before') {
+              newMeta[index].filter.splice(_index, 0, data);
+            } else {
+              newMeta[index].filter.splice(_index + 1, 0, data);
+            }
+          } else {
+            newMeta[index].filter.push(data);
+          }
           store.setMeta(newMeta);
           closePopup();
         }
@@ -6490,6 +6625,18 @@ const Filter = props => {
       visible: false
     });
   }
+  const options = ['(', ')', 'AND', 'OR'];
+  const addOperator = (val, i, type) => {
+    let newMeta = store.metaList.slice();
+    let _filter = filter.slice();
+    if (type === 'before') {
+      _filter.splice(i, 0, val);
+    } else {
+      _filter.splice(i + 1, 0, val);
+    }
+    newMeta[index].filter = [..._filter];
+    setInd(-1);
+  };
   return jsx(Wrapper, {
     className: `Sqb-item`,
     children: jsxs("div", {
@@ -6507,14 +6654,80 @@ const Filter = props => {
           className: `Sqb-NotebookCell gray-bg`,
           children: [filter.map((v, i) => {
             return jsxs("div", {
-              className: `Sqb-TableName purple-name`,
-              onClick: e => handleUpdate(e, i),
-              children: [v.quotes, jsx("span", {
-                style: {
-                  fontSize: 0
+              className: cx('Sqb-Filter-item', {
+                hover: ind === i
+              }),
+              onMouseEnter: e => {
+                setInd(i);
+              },
+              onMouseLeave: () => {
+                setInd(-1);
+              },
+              children: [jsx(Select, {
+                trigger: 'hover',
+                triggerProps: {
+                  clickToClose: true
                 },
-                onClick: e => handleDel(e, i),
-                children: jsx(CloseIcon, {})
+                triggerElement: () => {
+                  return jsx("div", {
+                    className: 'left-arrow',
+                    onClick: handleAdd,
+                    "v-index": i,
+                    "v-type": 'before',
+                    children: jsx("img", {
+                      src: img
+                    })
+                  });
+                },
+                onChange: val => {
+                  addOperator(val, i, 'before');
+                },
+                children: options.map(option => jsx(Select.Option, {
+                  value: option,
+                  children: option
+                }, option))
+              }), typeof v === 'string' ? jsxs("div", {
+                className: `Sqb-TableName purple-name`,
+                children: [v, jsx("span", {
+                  style: {
+                    fontSize: 0
+                  },
+                  onClick: e => handleDel(e, i),
+                  children: jsx(CloseIcon, {})
+                })]
+              }, i) : jsxs("div", {
+                className: `Sqb-TableName purple-name`,
+                onClick: e => handleUpdate(e, i),
+                children: [v.quotes, jsx("span", {
+                  style: {
+                    fontSize: 0
+                  },
+                  onClick: e => handleDel(e, i),
+                  children: jsx(CloseIcon, {})
+                })]
+              }, i), jsx(Select, {
+                trigger: 'hover',
+                triggerProps: {
+                  clickToClose: true
+                },
+                triggerElement: value => {
+                  return jsx("div", {
+                    className: 'right-arrow',
+                    onClick: handleAdd,
+                    "v-index": i,
+                    "v-type": 'after',
+                    children: jsx("img", {
+                      src: img
+                    })
+                  });
+                },
+                onChange: val => {
+                  addOperator(val, i, 'after');
+                },
+                children: options.map(option => jsx(Select.Option, {
+                  value: option,
+                  children: option
+                }, option))
               })]
             }, i);
           }), jsx("div", {
@@ -6523,6 +6736,15 @@ const Filter = props => {
             }),
             onClick: handleAdd,
             children: notSelected ? __('filter.addFiltersToNarrowDownYourAnswers') : jsx(AddIcon, {})
+          }), Array.from(filter).length > 0 && jsxs("p", {
+            className: 'Sqb-NotebookCell-preview',
+            children: ["\u9884\u89C8\uFF1A", filter.map((v, i) => {
+              if (typeof v === 'string') {
+                return v;
+              } else {
+                return v.quotes;
+              }
+            }).join(' ')]
           })]
         })
       }), jsx(NextDom, {
@@ -7229,7 +7451,7 @@ const RowLimit = props => {
         className: cx(`Sqb-item--content`),
         children: jsx("div", {
           className: cx(`Sqb-NotebookCell gray-bg`),
-          children: jsx(InputNumber, {
+          children: jsx(InputNumber$1, {
             value: meta.limit,
             min: 1,
             style: {