@gingkoo/pandora-metabase 0.0.1-alpha.2 → 0.0.1-alpha.3

package/lib/es/index.js

@@ -1,133 +1,185 @@
 /**
- * @gingkoo/pandora-metabase v0.0.1-alpha.2
+ * @gingkoo/pandora-metabase v0.0.1-alpha.3
  */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, useRef, useImperativeHandle, useEffect, useState, useMemo } from 'react';
+import { DatePicker, Menu, Dropdown, Button, Input, Tooltip, InputNumber, ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
 import cx from 'classnames';
-import { DatePicker, Menu, Dropdown, Button, Input, Tooltip, InputNumber, Spinner } from '@gingkoo/pandora';
+import { Toast } from '@gingkoo/pandora';
+import { configure, makeAutoObservable, runInAction, toJS } from 'mobx';
+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 { configure, makeAutoObservable } from 'mobx';
-import 'mobx-react';
-import { DownArrow } from '@gingkoo/pandora-icons';
+import { useLocalObservable, observer } from 'mobx-react';
+import _$3 from 'lodash';
 import moment from 'dayjs';
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
+//获取指定名称的cookie值
+function getCookie(name) {
+  // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
+  var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
+  if (arr != null) {
+    console.log(arr);
+    return arr[2];
+  }
+  return null;
+}
 
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
+const locales = {};
+const activeLocale = getCookie('LOCALE') || 'zh';
+const isEn = activeLocale === 'en';
+const register = (name, data) => {
+  if (name in locales) {
+    console.warn(`[i18n] ${name} has been registered`);
   } else {
-    head.appendChild(style);
+    locales[name] = data;
   }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
+};
+const __ = name => {
+  if (activeLocale in locales) {
+    return locales[activeLocale][name] || '';
   } else {
-    style.appendChild(document.createTextNode(css));
+    console.warn(`[i18n] locale not found`);
+    return '';
   }
-}
-
-var css_248z$a = ".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::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-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.join-data {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.sqb-item--func .sqb-button.join-data: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$a);
+};
 
-var SortEnum$1;
-(function (SortEnum) {
-  SortEnum["desc"] = "DESC";
-  SortEnum["asc"] = "ASC";
-})(SortEnum$1 || (SortEnum$1 = {}));
-var TypeEnum$1;
-(function (TypeEnum) {
-  TypeEnum["data"] = "data";
-  TypeEnum["joinData"] = "joinData";
-  TypeEnum["customColumn"] = "customColumn";
-  TypeEnum["filter"] = "filter";
-  TypeEnum["summarize"] = "summarize";
-  TypeEnum["sort"] = "sort";
-  TypeEnum["rowLimit"] = "rowLimit";
-})(TypeEnum$1 || (TypeEnum$1 = {}));
-var JoinEnum$1;
-(function (JoinEnum) {
-  JoinEnum["left"] = "LEFT JOIN";
-  JoinEnum["right"] = "RIGHT JOIN";
-  JoinEnum["inner"] = "INNER JOIN";
-})(JoinEnum$1 || (JoinEnum$1 = {}));
-var ColumnsPopupThemeEnum$1;
-(function (ColumnsPopupThemeEnum) {
-  ColumnsPopupThemeEnum["skyBlue"] = "skyBlue";
-  ColumnsPopupThemeEnum["greenGrass"] = "greenGrass";
-  ColumnsPopupThemeEnum["purple"] = "purple";
-})(ColumnsPopupThemeEnum$1 || (ColumnsPopupThemeEnum$1 = {}));
-var SpecialType$1;
-(function (SpecialType) {
-  SpecialType["PK"] = "pk";
-  SpecialType["FK"] = "fk";
-})(SpecialType$1 || (SpecialType$1 = {}));
-var SQL_COLUMN_TYPE$1;
-(function (SQL_COLUMN_TYPE) {
-  SQL_COLUMN_TYPE["STRING"] = "STRING";
-  SQL_COLUMN_TYPE["DATE"] = "DATE";
-  SQL_COLUMN_TYPE["FLOAT"] = "FLOAT";
-  SQL_COLUMN_TYPE["LONG"] = "LONG";
-  SQL_COLUMN_TYPE["CURRENCY"] = "CURRENCY";
-})(SQL_COLUMN_TYPE$1 || (SQL_COLUMN_TYPE$1 = {}));
-// 之前的 SQL_COLUMN_TYPE
-// export enum SQL_COLUMN_TYPE {
-//   BIGINT = 'BIGINT',
-//   SMALLINT = 'SMALLINT',
-//   DOUBLE = 'DOUBLE',
-//   INTEGER = 'INTEGER',
-//   CLOB = 'CLOB',
-//   CHAR = 'CHAR',
-//   VARCHAR = 'VARCHAR',
-//   TIMESTAMP = 'TIMESTAMP',
-// }
-var SQL_GROUP_TYPE$1;
-(function (SQL_GROUP_TYPE) {
-  SQL_GROUP_TYPE["NUMBER"] = "number";
-  SQL_GROUP_TYPE["STRING"] = "string";
-  SQL_GROUP_TYPE["DATE"] = "date";
-})(SQL_GROUP_TYPE$1 || (SQL_GROUP_TYPE$1 = {}));
-// 字段数据类型
-var DataTypeEnum$1;
-(function (DataTypeEnum) {
-  DataTypeEnum["float"] = "float";
-  DataTypeEnum["string"] = "string";
-  DataTypeEnum["date"] = "date";
-  DataTypeEnum["long"] = "long";
-  DataTypeEnum["currency"] = "currency";
-})(DataTypeEnum$1 || (DataTypeEnum$1 = {}));
-// 字段控件类型
-var EleComponentEnum$1;
-(function (EleComponentEnum) {
-  EleComponentEnum["text"] = "text";
-  EleComponentEnum["select"] = "select";
-})(EleComponentEnum$1 || (EleComponentEnum$1 = {}));
-// 静态tab
-var TabEnum$1;
-(function (TabEnum) {
-  TabEnum["RESULT"] = "RESULT";
-  TabEnum["FIELD"] = "FIELD";
-})(TabEnum$1 || (TabEnum$1 = {}));
+register('en', {
+  'data.pleaseSelectDataTable': 'please select data table',
+  'data.calculatingNow': 'calculating now...',
+  loading: 'loading',
+  'data.search': 'search...',
+  'data.del': 'delete',
+  'data.saveFailed': 'save failed',
+  'data.savedSuccessfully': 'saved successfully',
+  'data.deletedSuccessfully': 'deleted successfully',
+  'SqlQueryBuilder.data': 'Data',
+  'SqlQueryBuilder.joinData': 'Join Data',
+  'SqlQueryBuilder.permissionTable': 'Permission Table',
+  'SqlQueryBuilder.filter': 'Filter',
+  'SqlQueryBuilder.summarize': 'Summarize',
+  'SqlQueryBuilder.sort': 'Sort',
+  'SqlQueryBuilder.rowLimit': 'Row Limit',
+  'SqlQueryBuilder.columns': 'columns',
+  'SqlQueryBuilder.tipsLimit': 'Tips Limit',
+  'SqlQueryBuilder.customColumn': 'Custom Column',
+  'SqlQueryBuilder.by': 'by',
+  'SqlQueryBuilder.basicMetrics': 'basicMetrics',
+  'SqlQueryBuilder.countOfRows': 'countOfRows',
+  'SqlQueryBuilder.sumOf': 'sumOf',
+  'SqlQueryBuilder.averageOf': 'averageOf',
+  'SqlQueryBuilder.numberOfDistinctValuesOf': 'numberOfDistinctValuesOf',
+  'SqlQueryBuilder.cumulativeSumOf': 'cumulativeSumOf',
+  'SqlQueryBuilder.cumulativeCountOfRows': 'cumulativeCountOfRows',
+  'SqlQueryBuilder.standardDeviationOf': 'standardDeviationOf',
+  'SqlQueryBuilder.minimumOf': 'minimumOf',
+  'SqlQueryBuilder.maximumOf': 'maximumOf',
+  'SqlQueryBuilder.customExpression': 'customExpression',
+  'SqlQueryBuilder.pickTable': 'Select data table...',
+  'SqlQueryBuilder.pickPermissionTable': 'Select permission table...',
+  'SqlQueryBuilder.visualize': 'visualize',
+  'SqlQueryBuilder.selectColumnAll': 'select all',
+  'customColumn.operator': 'operator',
+  'customColumn.field': 'field',
+  'customColumn.other': 'other',
+  'customColumn.update': 'update',
+  'customColumn.complete': 'complete',
+  'customColumn.fieldFormula': 'field formula',
+  'customColumn.giveItAName': 'give it a name',
+  'customColumn.cancel': 'cancel',
+  'customColumn.somethingAwesomeToDocument': 'something awesome to document',
+  'filter.addFilter': 'add filter',
+  'filter.pleaseEnter': 'please enter',
+  'filter.enterANumber': 'enter a number',
+  'filter.minute': 'minute',
+  'filter.hour': 'hour',
+  'filter.day': 'day',
+  'filter.week': 'week',
+  'filter.month': 'month',
+  'filter.year': 'year',
+  'filter.equal': 'equal',
+  'filter.notEqual': 'not equal',
+  'filter.greaterThan': 'greater than',
+  'filter.lessThan': 'less than',
+  'filter.inBetween': 'in between',
+  'filter.greaterThanOrEqualTo': 'greater than or equal to',
+  'filter.lessThanOrEqualTo': 'less than or equal to',
+  'filter.empty': 'empty',
+  'filter.notEmpty': 'not empty',
+  'filter.is': 'is',
+  'filter.isNo': 'is no',
+  'filter.contain': 'contain',
+  'filter.notInclude': 'not include',
+  'filter.startWith': 'start with',
+  'filter.endWith': 'end with',
+  'filter.earlierThan': 'earlier than',
+  'filter.laterThan': 'later than',
+  'filter.isEmpty': 'is empty',
+  'filter.addFiltersToNarrowDownYourAnswers': 'add filters to narrow down your answers',
+  'joinData.automaticGrouping': 'automatic grouping',
+  'joinData.byTheHour': '[[timestamp]]by the hour',
+  'joinData.search': 'search...',
+  'summarize.basicIndicators': 'basic indicators',
+  'summarize.selectTheColumnsForGrouping': 'select columns for grouping',
+  'summarize.selectTheMetricsYouWantToView': 'select the metrics you want to view',
+  'summarize.totalNumberOfRows': 'total number of rows',
+  'summarize.count': 'count',
+  'summarize.sum': 'sum',
+  'summarize.sumOf': 'sum, of',
+  'summarize.average': 'average',
+  'summarize.onAverageOf': 'on average, of',
+  'summarize.totalNumberOfUniqueValues': 'total number of unique values',
+  'summarize.non-repeatingValueOf': 'non-repeating value, of',
+  'summarize.cumulativeSummation': 'cumulative summation',
+  'summarize.cumulativeSumOf': 'cumulative sum, of',
+  'summarize.cumulativeNumberOfRows': 'cumulative number of rows',
+  'summarize.cumulativeCount': 'cumulative count',
+  'summarize.standardDeviation': 'standard deviation',
+  'summarize.standardDeviationOf': 'standard deviation, of',
+  'summarize.minimumCalue': 'minimum value',
+  'summarize.theSmallestYes': 'the smallest, yes',
+  'summarize.maximumCalue': 'maximum value',
+  'summarize.biggestYes': 'biggest, yes',
+  'summarize.totalNumberOfRowsOfData': 'total number of rows of data',
+  'summarize.theSumOfAllValuesInAField': 'the sum of all values in a field',
+  'summarize.theAverageOfAllValuesInAfield': 'the average of all values in a field',
+  'summarize.theTotalNumberOfUniqueValuesInAfield': 'the total number of unique values in a field',
+  'summarize.theSumOfAllTheValuesInAcolumnForExample': 'the sum of all the values in a column. For example, the total income of x over a period of time',
+  'summarize.additiveStatisticsOfTheNumberOfRows': 'additive statistics of the number of rows. For example; total sales over a period of x',
+  'summarize.theStandardDeviationOfAllValuesInAfield': 'the standard deviation of all values in a field',
+  'summarize.theMinimumValueOfAfield': 'the minimum value of a field',
+  'summarize.TheMaximumValueOfAfield': 'the maximum value of a field',
+  'rowLimit.pleaseEnter': 'please enter',
+  'result.TheSQLStatementForThisQuery': 'The SQL statement for this query',
+  'result.closePanel': 'close panel',
+  'result.maximizePanelSize': 'maximize panel size',
+  'result.restorePanelSize': 'restore panel size',
+  'result.showSql': 'show sql',
+  'result.save': 'save',
+  'result.executeSql': 'execute sql',
+  'result.reExecute': 're-execute',
+  'result.inProgress': 'in progress',
+  'result.yourResultsWillAppearHere': 'your results will appear here',
+  'result.queryResult': 'query result',
+  'result.fieldOperations': 'field operations'
+});
 
-const localeMap = {
+register('zh', {
+  'data.pleaseSelectDataTable': '请选择数据表',
+  'data.calculatingNow': '正在计算...',
+  loading: '加载中',
+  'data.search': '查找...',
+  'data.del': '删除',
+  'data.saveFailed': '保存失败',
+  'data.savedSuccessfully': '保存成功',
+  'data.deletedSuccessfully': '删除成功',
   'SqlQueryBuilder.data': '数据',
   'SqlQueryBuilder.joinData': '关联',
+  'SqlQueryBuilder.permissionTable': '权限表',
   'SqlQueryBuilder.filter': '过滤器',
   'SqlQueryBuilder.summarize': '聚合',
   'SqlQueryBuilder.sort': '排序',
@@ -148,12 +200,145 @@ const localeMap = {
   'SqlQueryBuilder.maximumOf': '最大值',
   'SqlQueryBuilder.customExpression': '自定义表达方式',
   'SqlQueryBuilder.pickTable': '选择数据表...',
-  'SqlQueryBuilder.visualize': '可视化'
-};
-const __ = function (str) {
-  return localeMap[str];
+  'SqlQueryBuilder.pickPermissionTable': '选择权限数据表...',
+  'SqlQueryBuilder.visualize': '可视化',
+  'SqlQueryBuilder.selectColumnAll': '全选',
+  'customColumn.operator': '运算符',
+  'customColumn.field': '字段',
+  'customColumn.other': '其他',
+  'customColumn.update': '更新',
+  'customColumn.complete': '完成',
+  'customColumn.fieldFormula': '字段公式',
+  'customColumn.giveItAName': '给它一个名字吧',
+  'customColumn.cancel': '取消',
+  'customColumn.somethingAwesomeToDocument': '一些超棒的、值得记录的东西',
+  'filter.addFilter': '添加过滤器',
+  'filter.pleaseEnter': '请输入',
+  'filter.enterANumber': '输入一个数字',
+  'filter.minute': '分',
+  'filter.hour': '时',
+  'filter.day': '天',
+  'filter.week': '周',
+  'filter.month': '月',
+  'filter.year': '年',
+  'filter.equal': '等于',
+  'filter.notEqual': '不等于',
+  'filter.greaterThan': '大于',
+  'filter.lessThan': '小于',
+  'filter.inBetween': '介于之间',
+  'filter.greaterThanOrEqualTo': '大于或等于',
+  '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.addFiltersToNarrowDownYourAnswers': '添加筛选条件来缩小你的答案范围',
+  'joinData.automaticGrouping': '自动分组',
+  'joinData.byTheHour': '[[时间戳]]按小时计数',
+  'joinData.search': '查找...',
+  'summarize.basicIndicators': '基础指标',
+  'summarize.selectTheColumnsForGrouping': '选择分组的列',
+  'summarize.selectTheMetricsYouWantToView': '选择你要查看的指标',
+  'summarize.totalNumberOfRows': '总行数',
+  'summarize.count': '计数',
+  'summarize.sum': '总和',
+  'summarize.sumOf': '求和 的',
+  'summarize.average': '平均值',
+  'summarize.onAverageOf': '平均 的',
+  'summarize.totalNumberOfUniqueValues': '不重复值的总数',
+  'summarize.non-repeatingValueOf': '不重复的值 的',
+  'summarize.cumulativeSummation': '累积求和',
+  'summarize.cumulativeSumOf': '累积和 的',
+  'summarize.cumulativeNumberOfRows': '累积行数',
+  'summarize.cumulativeCount': '累积计数',
+  'summarize.standardDeviation': '标准差',
+  'summarize.standardDeviationOf': '标准偏差 的',
+  'summarize.minimumCalue': '最小值',
+  'summarize.theSmallestYes': '最小 的',
+  'summarize.maximumCalue': '最大值',
+  'summarize.biggestYes': '最大 的',
+  'summarize.totalNumberOfRowsOfData': '总的数据行数',
+  'summarize.theSumOfAllValuesInAField': '一个字段所有数值的总和',
+  'summarize.theAverageOfAllValuesInAfield': '一个字段所有数值的平均值',
+  'summarize.theTotalNumberOfUniqueValuesInAfield': '一个字段所有互不重复的值的总数',
+  'summarize.theSumOfAllTheValuesInAcolumnForExample': '一个列的所有值的加和。如：x一段时间内的总收入',
+  'summarize.additiveStatisticsOfTheNumberOfRows': '行数的加法统计。如；x段时间内的销售总额',
+  'summarize.theStandardDeviationOfAllValuesInAfield': '一个字段所有数值的标准差',
+  'summarize.theMinimumValueOfAfield': '一个字段的最小值',
+  'summarize.TheMaximumValueOfAfield': '一个字段的最大值',
+  'rowLimit.pleaseEnter': '请输入',
+  'result.TheSQLStatementForThisQuery': '这个查询的SQL语句',
+  'result.closePanel': '关闭面板',
+  'result.maximizePanelSize': '最大化面板大小',
+  'result.restorePanelSize': '恢复面板大小',
+  'result.showSql': '显示sql',
+  'result.save': '保存',
+  'result.executeSql': '执行sql',
+  'result.reExecute': '重新执行',
+  'result.inProgress': '执行中',
+  'result.yourResultsWillAppearHere': '您的结果将会在这出现',
+  'result.queryResult': '查询结果',
+  'result.fieldOperations': '字段操作'
+});
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$c = ".loading-container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: #509ee3;\n  background-color: rgba(255, 255, 255, 0.72);\n  transition: opacity 0.5s;\n  z-index: 2;\n}\n.loading-container .LoadingSpinner {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 32px;\n  height: 32px;\n  border: 4px solid transparent;\n  border-top-color: currentColor;\n  border-radius: 99px;\n  animation: LoadingSpinner-transition 1.3s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n.loading-container .LoadingSpinner::after {\n  content: '';\n  display: inherit;\n  box-sizing: inherit;\n  width: inherit;\n  height: inherit;\n  border: inherit;\n  border-color: currentColor;\n  border-radius: inherit;\n  opacity: 0.25;\n  position: relative;\n  top: -4px;\n  left: -4px;\n}\n.loading-container .loading-message {\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  margin: 1.5rem 0;\n  font-weight: 700;\n  color: #509ee3;\n}\n@keyframes LoadingSpinner-transition {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z$c);
+
+const Loading = ({
+  show,
+  msg: _msg = '正在计算...'
+}) => {
+  if (!show) return null;
+  return jsxs("div", {
+    className: 'loading-container',
+    children: [jsx("div", {
+      children: jsx("div", {
+        className: 'LoadingSpinner'
+      })
+    }), jsx("h2", {
+      className: 'loading-message',
+      children: _msg
+    })]
+  });
 };
 
+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, 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::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-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.join-data {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.join-data: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 SortEnum;
 (function (SortEnum) {
   SortEnum["desc"] = "DESC";
@@ -163,6 +348,7 @@ var TypeEnum;
 (function (TypeEnum) {
   TypeEnum["data"] = "data";
   TypeEnum["joinData"] = "joinData";
+  TypeEnum["permissionTable"] = "permissionTable";
   TypeEnum["customColumn"] = "customColumn";
   TypeEnum["filter"] = "filter";
   TypeEnum["summarize"] = "summarize";
@@ -226,15 +412,9 @@ var EleComponentEnum;
   EleComponentEnum["text"] = "text";
   EleComponentEnum["select"] = "select";
 })(EleComponentEnum || (EleComponentEnum = {}));
-// 静态tab
-var TabEnum;
-(function (TabEnum) {
-  TabEnum["RESULT"] = "RESULT";
-  TabEnum["FIELD"] = "FIELD";
-})(TabEnum || (TabEnum = {}));
 
-var css_248z$9 = ".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";
-styleInject(css_248z$9);
+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";
+styleInject(css_248z$a);
 
 function getTextNodeAtPosition(root, index) {
   try {
@@ -1013,7 +1193,7 @@ class Suggest {
         return {
           type: SelectPopupTypeEnum.SELECT_LIST,
           data: [{
-            name: '运算符',
+            name: __('customColumn.operator'),
             type: OptionsTypeEnum.OPERATOR,
             list: Operator
           }]
@@ -1027,7 +1207,7 @@ class Suggest {
           return {
             type: SelectPopupTypeEnum.SELECT_LIST,
             data: [{
-              name: '运算符',
+              name: __('customColumn.operator'),
               type: OptionsTypeEnum.OPERATOR,
               list: Operator
             }]
@@ -1036,7 +1216,7 @@ class Suggest {
           return {
             type: SelectPopupTypeEnum.SELECT_LIST,
             data: [{
-              name: '字段',
+              name: __('customColumn.field'),
               type: OptionsTypeEnum.FIELD,
               list: _fields
             }, {
@@ -1044,7 +1224,7 @@ class Suggest {
               type: OptionsTypeEnum.FUNCTION,
               list: Object.keys(functions)
             }, {
-              name: '其他',
+              name: __('customColumn.other'),
               type: OptionsTypeEnum.OTHER,
               list: ['(']
             }]
@@ -1058,7 +1238,7 @@ class Suggest {
     if (_$2.first(matchPrefix) !== '[') {
       let data = [];
       fieldList.length && data.push({
-        name: '字段',
+        name: __('customColumn.field'),
         type: OptionsTypeEnum.FIELD,
         list: fieldList
       });
@@ -1081,7 +1261,7 @@ class Suggest {
         return {
           type: SelectPopupTypeEnum.SELECT_LIST,
           data: [{
-            name: '字段',
+            name: __('customColumn.field'),
             type: OptionsTypeEnum.FIELD,
             list: fieldList
           }]
@@ -1130,8 +1310,8 @@ function enclosingFunction(expression) {
   return null;
 }
 
-var css_248z$8 = "/* DIMENSION */\n.Expression-dimension {\n  color: #509ee3;\n}\n/* METRIC */\n.Expression-metric {\n  color: #88bf4d;\n}\n/* SEGMENT */\n.Expression-segment {\n  color: #a989c5;\n}\n/* UNKNOWN IDENTIFIER */\n.Expression-identifier {\n  color: #949aab;\n}\n/* STRING LITERAL */\n.Expression-string-literal {\n  color: #f2a86f;\n}\n/* AGGREGATION */\n.Expression-aggregation > .Expression-function-name,\n.Expression-aggregation > .Expression-open-paren,\n.Expression-aggregation > .Expression-close-paren {\n  color: #88bf4d;\n}\n/* BOOLEAN (FILTER) FUNCTION */\n.Expression-boolean > .Expression-function-name,\n.Expression-boolean > .Expression-open-paren,\n.Expression-boolean > .Expression-close-paren {\n  color: #a989c5;\n}\n/* SELECTED (currently unused) */\n.Expression-selected > .Expression-identifier {\n  color: white;\n  background-color: currentColor;\n}\n";
-styleInject(css_248z$8);
+var css_248z$9 = "/* DIMENSION */\n.Expression-dimension {\n  color: #509ee3;\n}\n/* METRIC */\n.Expression-metric {\n  color: #88bf4d;\n}\n/* SEGMENT */\n.Expression-segment {\n  color: #a989c5;\n}\n/* UNKNOWN IDENTIFIER */\n.Expression-identifier {\n  color: #949aab;\n}\n/* STRING LITERAL */\n.Expression-string-literal {\n  color: #f2a86f;\n}\n/* AGGREGATION */\n.Expression-aggregation > .Expression-function-name,\n.Expression-aggregation > .Expression-open-paren,\n.Expression-aggregation > .Expression-close-paren {\n  color: #88bf4d;\n}\n/* BOOLEAN (FILTER) FUNCTION */\n.Expression-boolean > .Expression-function-name,\n.Expression-boolean > .Expression-open-paren,\n.Expression-boolean > .Expression-close-paren {\n  color: #a989c5;\n}\n/* SELECTED (currently unused) */\n.Expression-selected > .Expression-identifier {\n  color: white;\n  background-color: currentColor;\n}\n";
+styleInject(css_248z$9);
 
 // @ts-nocheck
 const MBQL_CLAUSES = {
@@ -1711,17 +1891,6 @@ const throttle = (fn, wait = 200) => {
     }
   };
 };
-const getUrlParams = (url = location.href) => {
-  let params = {};
-  let index = url.lastIndexOf('?');
-  if (~index) {
-    url.slice(index + 1).split('&').forEach(v => {
-      let item = v.split('=');
-      params[item[0]] = item[1];
-    });
-  }
-  return params;
-};
 const sleep = (wait = 0) => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
@@ -1917,8 +2086,8 @@ function generateTrigger(PortalComponent) {
 }
 var Popup = generateTrigger(Portal);
 
-var css_248z$7 = ".select-list__container {\n  width: 168px;\n}\n.select-list__container .title {\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  margin: 0 1rem;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  font-size: 12px;\n  color: #949aab;\n}\n.select-list__container .option {\n  padding: 5px 1rem;\n  cursor: pointer;\n  font-weight: 400;\n  font-style: normal;\n  color: #4c5773;\n}\n.select-list__container .option:hover,\n.select-list__container .option.active {\n  background-color: #509ee3;\n  color: #fff;\n}\n";
-styleInject(css_248z$7);
+var css_248z$8 = ".select-list__container {\n  width: 168px;\n}\n.select-list__container .title {\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  margin: 0 1rem;\n  padding-top: 1rem;\n  padding-bottom: 0.5rem;\n  font-size: 12px;\n  color: #949aab;\n}\n.select-list__container .option {\n  padding: 5px 1rem;\n  cursor: pointer;\n  font-weight: 400;\n  font-style: normal;\n  color: #4c5773;\n}\n.select-list__container .option:hover,\n.select-list__container .option.active {\n  background-color: #509ee3;\n  color: #fff;\n}\n";
+styleInject(css_248z$8);
 
 const SelectList = ({
   data,
@@ -1945,8 +2114,8 @@ const SelectList = ({
   });
 };
 
-var css_248z$6 = ".function-tip__container {\n  width: 448px;\n  font-size: 14px;\n  color: #4c5773;\n}\n.function-tip__container .function-name {\n  background: #fffcf2;\n  font-weight: 700;\n  padding: 1rem;\n  font-size: 14px;\n}\n.function-tip__container .function-desc {\n  padding: 1rem;\n  border-top: 1px solid #f0f0f0;\n}\n.function-tip__container .function-desc .desc {\n  font-weight: 700;\n}\n.function-tip__container .function-desc .case {\n  font-family: monospace;\n  color: #949aab;\n  background-color: #edf2f5;\n  border-radius: 2px;\n  padding: 0.2em 0.4em;\n  line-height: 1.4em;\n  white-space: pre-wrap;\n}\n.function-tip__container .funciton-parameter {\n  padding: 1rem;\n  border-top: 1px solid #f0f0f0;\n}\n.function-tip__container .funciton-parameter .key {\n  color: #949aab;\n}\n.function-tip__container .funciton-parameter .explain {\n  font-weight: 700;\n  margin-top: 0.5rem;\n}\n";
-styleInject(css_248z$6);
+var css_248z$7 = ".function-tip__container {\n  width: 448px;\n  font-size: 14px;\n  color: #4c5773;\n}\n.function-tip__container .function-name {\n  background: #fffcf2;\n  font-weight: 700;\n  padding: 1rem;\n  font-size: 14px;\n}\n.function-tip__container .function-desc {\n  padding: 1rem;\n  border-top: 1px solid #f0f0f0;\n}\n.function-tip__container .function-desc .desc {\n  font-weight: 700;\n}\n.function-tip__container .function-desc .case {\n  font-family: monospace;\n  color: #949aab;\n  background-color: #edf2f5;\n  border-radius: 2px;\n  padding: 0.2em 0.4em;\n  line-height: 1.4em;\n  white-space: pre-wrap;\n}\n.function-tip__container .funciton-parameter {\n  padding: 1rem;\n  border-top: 1px solid #f0f0f0;\n}\n.function-tip__container .funciton-parameter .key {\n  color: #949aab;\n}\n.function-tip__container .funciton-parameter .explain {\n  font-weight: 700;\n  margin-top: 0.5rem;\n}\n";
+styleInject(css_248z$7);
 
 const FunctionTip = ({
   funcName
@@ -1984,6 +2153,231 @@ const FunctionTip = ({
   });
 };
 
+configure({
+  useProxies: 'never',
+  // 使用该配置，可以将 Proxy 降级为 Object.defineProperty
+  isolateGlobalState: true // 锁版本
+});
+let metaKey = 1;
+const SummarizeAlias = 'source';
+class SqlVisionStore {
+  constructor() {
+    makeAutoObservable(this);
+  }
+  showPermissionTable = false; // 开启权限表
+  sourceList = []; // 数据源列表
+  _cacheSource2TableMap = {}; // 数据源id 对应数据集列表
+  _cacheColumnsMap = {};
+  metaList = [{
+    metaKey,
+    type: TypeEnum.data,
+    table: {
+      name: '',
+      alias: '',
+      datasourceId: '',
+      datasourceName: ''
+    },
+    columns: []
+  }];
+  popupData = {
+    visible: false,
+    node: null,
+    content: null
+  };
+  popupClosable = true; // 是否可关闭 如果弹框里面再弹框 则不可关闭
+  // 是否显示主表后面的字段按钮 （如果下面 没有聚合，或者选了聚合但是聚合里面没有选值的时候显示 主表字段按钮）
+  get showMainColumn() {
+    let summarizeList = this.metaList.filter(v => v.type === TypeEnum.summarize);
+    if (!summarizeList.length || summarizeList.length === 1 && !summarizeList[0].group.length && !summarizeList[0].by.length) {
+      return true;
+    }
+    return false;
+  }
+  fetchDatasetFn = async () => {};
+  fetchColumnsFn = async () => {};
+  setFetchDatasetFn(fn) {
+    this.fetchDatasetFn = fn;
+  }
+  setFetchColumnsFn(fn) {
+    this.fetchColumnsFn = fn;
+  }
+  // 根据数据源id查询集合列表
+  async fetchDataset(datasourceId) {
+    let tables = this.getDataset(datasourceId);
+    if (tables.length) return tables;
+    let _tables = await this.fetchDatasetFn(datasourceId);
+    runInAction(() => {
+      this.setDataset(datasourceId, _tables);
+    });
+    return _tables;
+  }
+  // 查询表字段
+  async fetchColumns(tableName, datasourceId, callback) {
+    let columns = this.getColumns(tableName);
+    if (!columns.length) {
+      columns = await this.fetchColumnsFn(tableName, datasourceId);
+      runInAction(() => {
+        this.setColumns(tableName, columns);
+      });
+    }
+    typeof callback === 'function' && callback(columns);
+  }
+  // 回显
+  async setPreData(data) {
+    if (data.length) {
+      this.metaList = data;
+      metaKey = Math.max.apply(null, this.metaList.map(v => Number(v.metaKey)));
+    }
+  }
+  setSourceList(list) {
+    this.sourceList = list;
+  }
+  addMeta(type, index) {
+    let newMeta = this.metaList.slice();
+    let item;
+    let mainTable = newMeta[0];
+    metaKey += 1;
+    if (type === TypeEnum.joinData) {
+      let table1 = {
+        name: '',
+        alias: '',
+        datasourceId: '',
+        datasourceName: '',
+        column: ''
+      };
+      if (index === 1) {
+        table1 = {
+          name: mainTable.table.name,
+          alias: mainTable.table.alias,
+          datasourceId: mainTable.table.datasourceId,
+          datasourceName: mainTable.table.datasourceName,
+          column: ''
+        };
+      }
+      item = {
+        metaKey,
+        type: TypeEnum.joinData,
+        joinType: JoinEnum.left,
+        table1,
+        table2: {
+          name: '',
+          alias: '',
+          datasourceId: '',
+          datasourceName: '',
+          column: ''
+        },
+        columns: []
+      };
+    }
+    if (type === TypeEnum.customColumn) {
+      item = {
+        metaKey,
+        type: TypeEnum.customColumn,
+        customColumn: []
+      };
+    }
+    if (type === TypeEnum.filter) {
+      item = {
+        metaKey,
+        type: TypeEnum.filter,
+        filter: []
+      };
+    }
+    if (type === TypeEnum.summarize) {
+      item = {
+        metaKey,
+        type: TypeEnum.summarize,
+        alias: SummarizeAlias,
+        group: [],
+        by: []
+      };
+    }
+    if (type === TypeEnum.sort) {
+      item = {
+        metaKey,
+        type: TypeEnum.sort,
+        sort: []
+      };
+    }
+    if (type === TypeEnum.rowLimit) {
+      item = {
+        metaKey,
+        type: TypeEnum.rowLimit,
+        limit: ''
+      };
+    }
+    if (type === TypeEnum.permissionTable) {
+      item = {
+        metaKey,
+        type: TypeEnum.permissionTable,
+        table: {
+          name: '',
+          alias: '',
+          datasourceId: '',
+          datasourceName: ''
+        }
+      };
+    }
+    // @ts-ignore
+    newMeta.splice(index, 0, item);
+    this.metaList = newMeta;
+  }
+  delMeta(meta) {
+    // TIPS 自定义列删除了后面都得删除 暂时不删除 因为过滤器和组合包括自定义列都没用到自定义列
+    let index = this.metaList.indexOf(meta);
+    let newMeta = this.metaList.slice();
+    if (meta.type === TypeEnum.joinData) {
+      if (meta.table2.name) {
+        this.metaList = newMeta.filter((v, i) => i < index);
+        return void 0;
+      }
+    }
+    if (meta.type === TypeEnum.summarize) {
+      if (meta.by.length || meta.group.length) {
+        this.metaList = newMeta.filter((v, i) => i < index);
+        return void 0;
+      }
+    }
+    this.metaList = newMeta.filter(v => v !== meta);
+  }
+  setMeta(payload) {
+    this.metaList = payload;
+  }
+  setColumns(tableId, columns) {
+    this._cacheColumnsMap[tableId] = columns;
+  }
+  getColumns(tableId) {
+    return this._cacheColumnsMap[tableId] || [];
+  }
+  setDataset(datasourceId, tables) {
+    this._cacheSource2TableMap[datasourceId] = tables;
+  }
+  getDataset(datasourceId) {
+    return this._cacheSource2TableMap[datasourceId] || [];
+  }
+  setPopup(payload) {
+    this.popupData = payload;
+  }
+  setClosable(payload) {
+    this.popupClosable = payload;
+  }
+  setShowPermissionTable(show) {
+    this.showPermissionTable = show;
+  }
+}
+const sqlVisionStore = new SqlVisionStore();
+const Store = /*#__PURE__*/React__default.createContext(sqlVisionStore);
+const StoreProvide = props => {
+  let store = useLocalObservable(() => sqlVisionStore);
+  return jsx(Store.Provider, {
+    value: store,
+    children: props.children
+  });
+};
+const useStore = () => {
+  return React__default.useContext(Store);
+};
+
 const ErrorMessage = ({
   msg
 }) => {
@@ -1998,9 +2392,9 @@ const ErrorMessage = ({
 const ExpressionEditor = props => {
   const {
     data,
-    expression,
-    setPopupClosable
+    expression
   } = props;
+  const store = useStore();
   const [popup, setPopup] = useState({
     visible: false
   }); // 弹框信息
@@ -2027,7 +2421,7 @@ const ExpressionEditor = props => {
     setPopup({
       visible: false
     });
-    setPopupClosable(true);
+    store.setClosable(true);
   }
   // 设置关闭位置
   function _setCaretPosition(position, autosuggest) {
@@ -2110,7 +2504,7 @@ const ExpressionEditor = props => {
       visible: true,
       content
     });
-    setPopupClosable(false);
+    store.setClosable(false);
   }
   // 键盘点击 方向键 & 回车 & esc
   function onInputKeyDown(e) {
@@ -2195,14 +2589,13 @@ const ExpressionEditor = props => {
     })]
   });
 };
+var ExpressionEditor$1 = observer(ExpressionEditor);
 
 const WIDTH = 480;
 // 自定义列
-const CustomColumn$1 = ({
+const CustomColumn$2 = ({
   value,
   data: _data = [],
-  popupClosable,
-  setPopupClosable,
   onChange,
   onClose: _onClose = () => {}
 }) => {
@@ -2219,9 +2612,9 @@ const CustomColumn$1 = ({
       formula: expression
     });
   }
-  let buttonText = isUpdate ? '更新' : '完成';
+  let buttonText = isUpdate ? __('customColumn.update') : __('customColumn.complete');
   return jsx("div", {
-    className: cx(`sqb-CustomColumn--box`),
+    className: cx(`Sqb-CustomColumn--box`),
     children: jsxs("div", {
       style: {
         width: WIDTH
@@ -2234,11 +2627,9 @@ const CustomColumn$1 = ({
             fontSize: 12,
             color: '#949aab'
           },
-          children: "\u5B57\u6BB5\u516C\u5F0F"
+          children: __('customColumn.fieldFormula')
         }), jsx("div", {
-          children: jsx(ExpressionEditor, {
-            popupClosable: popupClosable,
-            setPopupClosable: setPopupClosable,
+          children: jsx(ExpressionEditor$1, {
             data: _data,
             expression: value?.formula || '',
             onChange: str => {
@@ -2251,13 +2642,13 @@ const CustomColumn$1 = ({
             fontSize: 12,
             color: '#949aab'
           },
-          children: "\u7ED9\u5B83\u4E00\u4E2A\u540D\u5B57\u5427"
+          children: __('customColumn.giveItAName')
         }), jsx("div", {
           children: jsx("input", {
             type: 'text',
             value: name,
             className: `input mt-2 mb-2 w-full block`,
-            placeholder: '一些超棒的、值得记录的东西',
+            placeholder: __('customColumn.somethingAwesomeToDocument'),
             onInput: e => {
               setName(e.target.value);
             }
@@ -2272,7 +2663,7 @@ const CustomColumn$1 = ({
           children: [jsx("button", {
             className: `btn`,
             onClick: () => _onClose(),
-            children: "\u53D6\u6D88"
+            children: __('customColumn.cancel')
           }), jsx("button", {
             className: cx(`btn ml-4`, {
               usable
@@ -2287,8 +2678,8 @@ const CustomColumn$1 = ({
   });
 };
 
-var css_248z$5 = ".sqb-SelectColumn--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 300px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.sqb-SelectColumn--box .SelectColumn-border {\n  border-bottom: 1px solid #f0f0f0;\n}\n.sqb-SelectColumn--box .SelectColumn-border.events-none {\n  pointer-events: none;\n  opacity: 0.4;\n}\n.sqb-SelectColumn--box > div {\n  cursor: pointer;\n  color: #4c5773;\n}\n.sqb-SelectColumn--box > div .selected {\n  width: 16px;\n  height: 16px;\n  background-color: #509ee3;\n  border: 2px solid #509ee3;\n  border-radius: 4px;\n  color: #fff;\n}\n.sqb-SelectColumn--box > div .no-select {\n  width: 16px;\n  height: 16px;\n  background-color: white;\n  border: 2px solid #b8bbc3;\n  border-radius: 4px;\n  color: #b8bbc3;\n}\n";
-styleInject(css_248z$5);
+var css_248z$6 = ".Sqb-SelectColumn--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 300px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectColumn--box .SelectColumn-border {\n  border-bottom: 1px solid #f0f0f0;\n}\n.Sqb-SelectColumn--box .SelectColumn-border.events-none {\n  pointer-events: none;\n  opacity: 0.4;\n}\n.Sqb-SelectColumn--box > div {\n  cursor: pointer;\n  color: #4c5773;\n}\n.Sqb-SelectColumn--box > div .selected {\n  width: 16px;\n  height: 16px;\n  background-color: #509ee3;\n  border: 2px solid #509ee3;\n  border-radius: 4px;\n  color: #fff;\n}\n.Sqb-SelectColumn--box > div .no-select {\n  width: 16px;\n  height: 16px;\n  background-color: white;\n  border: 2px solid #b8bbc3;\n  border-radius: 4px;\n  color: #b8bbc3;\n}\n";
+styleInject(css_248z$6);
 
 const CloseIcon2 = reset => jsx("svg", {
   viewBox: '0 0 32 32',
@@ -2342,21 +2733,21 @@ const JoinDataIcon = ({
     d: 'M17.077 7.148A10.285 10.285 0 0 1 21.818 6C27.441 6 32 10.477 32 16s-4.559 10-10.182 10c-2.038 0-3.936-.588-5.528-1.6l.454-.31c.283-.194.555-.4.816-.617a8.842 8.842 0 0 0 4.258 1.083c4.832 0 8.738-3.836 8.738-8.556 0-4.72-3.906-8.556-8.738-8.556a8.865 8.865 0 0 0-3.546.733 10.65 10.65 0 0 0-1.195-1.03zM15.71 24.399A10.268 10.268 0 0 1 10.182 26C4.559 26 0 21.523 0 16S4.559 6 10.182 6c1.712 0 3.325.415 4.74 1.148-2.643 1.957-4.241 5.022-4.241 8.352 0 3.468 1.733 6.649 4.575 8.59l.454.31zM16 8c2.418 1.651 4 4.395 4 7.5 0 3.105-1.582 5.849-4 7.5-2.418-1.651-4-4.395-4-7.5 0-3.105 1.582-5.849 4-7.5z'
   })
 });
-const CustomColumnIcon = ({
+const PermissionTableIcon = ({
   width: _width4 = 18,
   height: _height4 = 18
 }) => jsx("svg", {
-  viewBox: '0 0 32 32',
+  viewBox: '0 0 1024 1024',
   width: _width4,
   height: _height4,
   fill: 'currentcolor',
   role: 'img',
-  "aria-label": 'add_data icon',
+  "aria-label": 'permission_table icon',
   children: jsx("path", {
-    d: 'M0 8h5.926v6.208H0V8zm7.704 0h5.926v6.208H7.704V8zM0 16.07h5.926v6.209H0V16.07zm7.704 0h5.926v6.209H7.704V16.07zm7.703 0h5.926v6.209h-5.926V16.07zM0 24.142h5.926v6.208H0v-6.208zm7.704 0h5.926v6.208H7.704v-6.208zm7.703 0h5.926v6.208h-5.926v-6.208zM23.08 8.08V3h4.064v5.08h5.08v4.063h-5.08v5.08h-4.064v-5.08H18V8.079h5.08z'
+    d: 'M768 416.914c43.886-43.885 43.886-109.714 0-153.6C724.114 219.43 650.971 219.43 607.086 256s-43.886 109.714 0 153.6S724.114 460.8 768 416.914z m-109.714-51.2c-14.629-14.628-14.629-36.571 0-51.2 14.628-14.628 36.571-14.628 51.2 0 14.628 14.629 14.628 36.572 0 51.2s-36.572 14.629-51.2 0z m-512 563.2c-14.629 14.629-36.572 14.629-51.2 0s-14.629-36.571 0-51.2l387.657-387.657-14.629-21.943C409.6 365.714 424.23 241.371 504.686 153.6c102.4-102.4 263.314-102.4 358.4 0s102.4 263.314 0 358.4c-80.457 87.771-204.8 102.4-307.2 43.886l-21.943-14.629-160.914 160.914 80.457 80.458c14.628 14.628 36.571 14.628 51.2 0 14.628-14.629 14.628-36.572 0-51.2l-21.943-29.258 65.828-65.828c124.343 58.514 277.943 36.571 373.029-65.829 131.657-131.657 131.657-336.457 0-468.114s-336.457-124.343-468.114 0C358.4 204.8 329.143 351.086 387.657 475.429L36.571 826.514c-43.885 43.886-43.885 109.715 0 153.6 43.886 43.886 109.715 43.886 153.6 0l80.458-80.457-51.2-43.886-73.143 73.143z m307.2-51.2L321.829 746.057l-51.2 58.514L402.286 936.23c14.628 14.628 36.571 14.628 51.2 0 14.628-21.943 14.628-43.886 0-58.515z'
   })
 });
-const SortIcon = ({
+const CustomColumnIcon = ({
   width: _width5 = 18,
   height: _height5 = 18
 }) => jsx("svg", {
@@ -2365,12 +2756,12 @@ const SortIcon = ({
   height: _height5,
   fill: 'currentcolor',
   role: 'img',
-  "aria-label": 'smartscalar icon',
+  "aria-label": 'add_data icon',
   children: jsx("path", {
-    d: 'M9.806 9.347v13.016h-2.79V9.593L3.502 14.12a1.405 1.405 0 0 1-1.957.254 1.372 1.372 0 0 1-.256-1.937L7.418 4.54a1.404 1.404 0 0 1 2.219.008l6.08 7.953a1.372 1.372 0 0 1-.27 1.935c-.615.46-1.49.34-1.955-.268l-3.686-4.82zM24.806 23.016V13h-2.79v9.77l-3.514-4.527a1.405 1.405 0 0 0-1.957-.254 1.372 1.372 0 0 0-.256 1.937l6.129 7.897c.56.723 1.663.72 2.219-.008l6.08-7.953a1.372 1.372 0 0 0-.27-1.935 1.405 1.405 0 0 0-1.955.268l-3.686 4.82z'
+    d: 'M0 8h5.926v6.208H0V8zm7.704 0h5.926v6.208H7.704V8zM0 16.07h5.926v6.209H0V16.07zm7.704 0h5.926v6.209H7.704V16.07zm7.703 0h5.926v6.209h-5.926V16.07zM0 24.142h5.926v6.208H0v-6.208zm7.704 0h5.926v6.208H7.704v-6.208zm7.703 0h5.926v6.208h-5.926v-6.208zM23.08 8.08V3h4.064v5.08h5.08v4.063h-5.08v5.08h-4.064v-5.08H18V8.079h5.08z'
   })
 });
-const RowLimitIcon = ({
+const SortIcon = ({
   width: _width6 = 18,
   height: _height6 = 18
 }) => jsx("svg", {
@@ -2379,19 +2770,33 @@ const RowLimitIcon = ({
   height: _height6,
   fill: 'currentcolor',
   role: 'img',
+  "aria-label": 'smartscalar icon',
+  children: jsx("path", {
+    d: 'M9.806 9.347v13.016h-2.79V9.593L3.502 14.12a1.405 1.405 0 0 1-1.957.254 1.372 1.372 0 0 1-.256-1.937L7.418 4.54a1.404 1.404 0 0 1 2.219.008l6.08 7.953a1.372 1.372 0 0 1-.27 1.935c-.615.46-1.49.34-1.955-.268l-3.686-4.82zM24.806 23.016V13h-2.79v9.77l-3.514-4.527a1.405 1.405 0 0 0-1.957-.254 1.372 1.372 0 0 0-.256 1.937l6.129 7.897c.56.723 1.663.72 2.219-.008l6.08-7.953a1.372 1.372 0 0 0-.27-1.935 1.405 1.405 0 0 0-1.955.268l-3.686 4.82z'
+  })
+});
+const RowLimitIcon = ({
+  width: _width7 = 18,
+  height: _height7 = 18
+}) => jsx("svg", {
+  viewBox: '0 0 32 32',
+  width: _width7,
+  height: _height7,
+  fill: 'currentcolor',
+  role: 'img',
   "aria-label": 'list icon',
   children: jsx("path", {
     d: 'M3 8 A3 3 0 0 0 9 8 A3 3 0 0 0 3 8 M12 6 L28 6 L28 10 L12 10z M3 16 A3 3 0 0 0 9 16 A3 3 0 0 0 3 16 M12 14 L28 14 L28 18 L12 18z M3 24 A3 3 0 0 0 9 24 A3 3 0 0 0 3 24 M12 22 L28 22 L28 26 L12 26z'
   })
 });
 const LeftJoinIcon = ({
-  width: _width7 = 32,
-  height: _height7 = 32,
+  width: _width8 = 32,
+  height: _height8 = 32,
   style
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width7,
-  height: _height7,
+  width: _width8,
+  height: _height8,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'join_right_outer icon',
@@ -2401,13 +2806,13 @@ const LeftJoinIcon = ({
   })
 });
 const InnerJoinIcon = ({
-  width: _width8 = 32,
-  height: _height8 = 32,
+  width: _width9 = 32,
+  height: _height9 = 32,
   style
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width8,
-  height: _height8,
+  width: _width9,
+  height: _height9,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'join_inner icon',
@@ -2417,13 +2822,13 @@ const InnerJoinIcon = ({
   })
 });
 const UpArrowIcon = ({
-  width: _width9 = 16,
-  height: _height9 = 17
+  width: _width10 = 16,
+  height: _height10 = 17
 }) => jsx("svg", {
   className: 'sort-arrow',
   viewBox: '0 0 32 34',
-  width: _width9,
-  height: _height9,
+  width: _width10,
+  height: _height10,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'arrow_up icon',
@@ -2432,13 +2837,13 @@ const UpArrowIcon = ({
   })
 });
 const DownArrowIcon = ({
-  width: _width10 = 16,
-  height: _height10 = 17
+  width: _width11 = 16,
+  height: _height11 = 17
 }) => jsx("svg", {
   className: 'sort-arrow',
   viewBox: '0 0 32 34',
-  width: _width10,
-  height: _height10,
+  width: _width11,
+  height: _height11,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'arrow_down icon',
@@ -2447,13 +2852,13 @@ const DownArrowIcon = ({
   })
 });
 const CloseIcon = ({
-  width: _width11 = 16,
-  height: _height11 = 16
+  width: _width12 = 16,
+  height: _height12 = 16
 }) => jsx("svg", {
   className: 'closeIcon',
   viewBox: '0 0 32 32',
-  width: _width11,
-  height: _height11,
+  width: _width12,
+  height: _height12,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'close icon',
@@ -2462,12 +2867,12 @@ const CloseIcon = ({
   })
 });
 const AddIcon = ({
-  width: _width12 = 16,
-  height: _height12 = 16
+  width: _width13 = 16,
+  height: _height13 = 16
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width12,
-  height: _height12,
+  width: _width13,
+  height: _height13,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'add icon',
@@ -2476,12 +2881,12 @@ const AddIcon = ({
   })
 });
 const TableIcon = ({
-  width: _width13 = 18,
-  height: _height13 = 18
+  width: _width14 = 18,
+  height: _height14 = 18
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width13,
-  height: _height13,
+  width: _width14,
+  height: _height14,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'table2 icon',
@@ -2490,12 +2895,12 @@ const TableIcon = ({
   })
 });
 const SearchIcon = ({
-  width: _width14 = 16,
-  height: _height14 = 16
+  width: _width15 = 16,
+  height: _height15 = 16
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width14,
-  height: _height14,
+  width: _width15,
+  height: _height15,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'search icon',
@@ -2613,6 +3018,17 @@ const LeftArrowIcon = () => jsx("svg", {
     d: 'M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z'
   })
 });
+const DataSourceIcon = () => jsx("svg", {
+  viewBox: '0 0 32 32',
+  width: '18',
+  height: '18',
+  fill: 'currentcolor',
+  role: 'img',
+  "aria-label": 'database icon',
+  children: jsx("path", {
+    d: 'M0 9.32V4.054S1.584 0 15.657 0C29.731 0 31.89 3.669 31.89 4.054v5.24s-1.445 4.125-15.424 4.125S0 10.138 0 9.32zm.305 12.93s2.044 3.692 15.727 3.692 15.63-3.72 15.63-3.72.338.099.338.632v5S30.463 32 15.964 32C1.465 32 .041 27.817.041 27.817V22.9c0-.582.264-.65.264-.65zm0-9.368s2.044 3.692 15.727 3.692 15.63-3.72 15.63-3.72.338.099.338.632v5.001s-1.537 4.145-16.036 4.145C1.465 22.632.041 18.45.041 18.45v-4.918c0-.583.264-.65.264-.65z'
+  })
+});
 
 // 选择表中参数
 const SelectColumn = ({
@@ -2629,14 +3045,14 @@ const SelectColumn = ({
         children: [jsx("div", {
           className: 'selected mr-2 flex iteams-center justify-center',
           children: jsx(SelectIcon, {})
-        }), "\u5168\u9009"]
+        }), __('SqlQueryBuilder.selectColumnAll')]
       });
     } else {
       return jsxs(Fragment, {
         children: [jsx("div", {
           className: 'no-select mr-2 flex iteams-center justify-center',
           children: jsx(NotSelectIcon, {})
-        }), "\u5168\u9009"]
+        }), __('SqlQueryBuilder.selectColumnAll')]
       });
     }
   }, [isAllSelect]);
@@ -2645,7 +3061,7 @@ const SelectColumn = ({
     typeof onChange === 'function' && onChange(columns);
   }
   return jsx("div", {
-    className: `sqb-SelectColumn--box`,
+    className: `Sqb-SelectColumn--box`,
     children: jsxs("div", {
       className: 'pt-2',
       children: [jsx("div", {
@@ -2664,7 +3080,7 @@ const SelectColumn = ({
         return jsxs("div", {
           className: 'pb-2 px-2 flex items-center',
           onClick: () => {
-            let newColumns = cloneDeep(columns);
+            let newColumns = _$3.cloneDeep(columns);
             newColumns[i].select = !v.select;
             onSelect(newColumns);
           },
@@ -2680,141 +3096,12 @@ const SelectColumn = ({
   });
 };
 
-var css_248z$4 = ".sqb-SelectColumns--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.sqb-SelectColumns--box .sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.sqb-SelectColumns--box .sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.sqb-SelectColumns--box .sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.sqb-SelectColumns--box .sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n}\n.sqb-SelectColumns--box .sqb-List-item .Field-extra {\n  display: flex;\n  align-items: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  border-left: 2px solid rgba(113, 114, 173, 0.1);\n  color: rgba(255, 255, 255, 0.5);\n  visibility: hidden;\n}\n.sqb-SelectColumns--box .sqb-List-item .Field-extra h4 {\n  margin-bottom: 0;\n  color: inherit;\n}\n.sqb-SelectColumns--box .sqb-List-item .Field-extra svg {\n  color: #fff;\n  margin-left: 0.5rem;\n}\n.sqb-SelectColumns--box .sqb-List-item .Field-extra:hover {\n  color: #fff;\n}\n.sqb-SelectColumns--box .sqb-List-item:not(.disabled):hover,\n.sqb-SelectColumns--box .sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.sqb-SelectColumns--box .sqb-List-item:not(.disabled):hover .List-item-icon,\n.sqb-SelectColumns--box .sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.sqb-SelectColumns--box .sqb-List-item:not(.disabled):hover .List-item-title,\n.sqb-SelectColumns--box .sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.sqb-SelectColumns--box .sqb-List-item:not(.disabled):hover .Field-extra,\n.sqb-SelectColumns--box .sqb-List-item.active .Field-extra {\n  visibility: visible;\n}\n.sqb-SelectColumns--box .sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.sqb-SelectColumns--box .sqb-List-title {\n  display: flex;\n  border-radius: 4px;\n}\n.sqb-SelectColumns--box .sqb-List-title a {\n  flex: auto;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  color: #4c5773;\n}\n.sqb-SelectColumns--box .sqb-List-title .List-item-icon {\n  display: flex;\n  align-items: center;\n}\n.sqb-SelectColumns--box .sqb-List-title .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 16px;\n  font-weight: 600;\n}\n.sqb-SelectColumns--box .sqb-List-title .List-title-arrow {\n  margin-left: auto;\n}\n.sqb-SelectColumns--box .sqb-List-title.active .List-item-icon {\n  color: #509ee3;\n}\n.sqb-SelectColumns--box .sqb-List-title.shrink {\n  cursor: pointer;\n}\n.sqb-SelectColumns--box .sqb-List-title.shrink a {\n  cursor: pointer;\n}\n.sqb-SelectColumns--box .sqb-List-title.shrink:hover a {\n  color: #509ee3;\n}\n.sqb-SelectColumns--box .sqb-List-title.shrink:hover a .List-item-title {\n  color: #509ee3;\n}\n.sqb-SelectColumns--box .sqb-List-search {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n  color: #b8bbc3;\n  background-color: #fff;\n  border: 1px solid #f0f0f0;\n  font-size: 14px;\n}\n.sqb-SelectColumns--box .sqb-List-search span {\n  line-height: 0;\n}\n.sqb-SelectColumns--box .sqb-List-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1.12em;\n  font-weight: 600;\n}\n.sqb-SelectColumns--box .sqb-List-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.sqb-SelectColumns--box .sqb-List-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n.sqb-SelectColumns--box.greenGrass .sqb-List-item:not(.disabled):hover,\n.sqb-SelectColumns--box.greenGrass .sqb-List-item.active {\n  background-color: #88bf4d;\n}\n.sqb-SelectColumns--box.greenGrass .sqb-List-title.active .List-item-icon {\n  color: #88bf4d;\n}\n.sqb-SelectColumns--box.greenGrass .sqb-List-title.shrink:hover a {\n  color: #88bf4d;\n}\n.sqb-SelectColumns--box.greenGrass .sqb-List-title.shrink:hover a .List-item-title {\n  color: #88bf4d;\n}\n.sqb-SelectColumns--box.purple .sqb-List-item:not(.disabled):hover,\n.sqb-SelectColumns--box.purple .sqb-List-item.active {\n  background-color: #7172ad;\n}\n.sqb-SelectColumns--box.purple .sqb-List-title.active .List-item-icon {\n  color: #7172ad;\n}\n.sqb-SelectColumns--box.purple .sqb-List-title.shrink:hover a {\n  color: #7172ad;\n}\n.sqb-SelectColumns--box.purple .sqb-List-title.shrink:hover a .List-item-title {\n  color: #7172ad;\n}\n.menu-list {\n  border: none !important;\n}\n.menu-list .ant-menu-item:hover {\n  color: #88bf4d !important;\n}\n.menu-list .ant-menu-item-selected {\n  background-color: #88bf4d !important;\n  color: #fff !important;\n  border-radius: 4px !important;\n}\n";
-styleInject(css_248z$4);
-
-configure({
-  useProxies: 'never',
-  // 使用该配置，可以将 Proxy 降级为 Object.defineProperty
-  isolateGlobalState: true // 锁版本
-});
-getUrlParams();
-const SummarizeAlias$1 = 'source';
-class SqlVisionStore {
-  constructor() {
-    makeAutoObservable(this);
-  }
-  // tableData: MetaData_TableType[] = []; // 表列表
-  _cacheColumnsMap = {}; // 缓存
-  // metaList: MetaListType[] = [
-  //   { metaKey, type: TypeEnum.data, table: { name: '', alias: '' }, columns: [] },
-  // ]; //metaBase 回显数据
-  // popupData: PopupData = {
-  //   visible: false,
-  //   node: null,
-  //   content: null,
-  // }; //弹窗选择数据
-  // popupClosable = true; // 是否可关闭 如果弹框里面再弹框 则不可关闭
-  // get showMainColumn() {
-  //   let summarizeList = this.metaList.filter((v) => v.type === TypeEnum.summarize);
-  //   if (
-  //     !summarizeList.length ||
-  //     (summarizeList.length === 1 &&
-  //       !(summarizeList[0] as MetaSummarize).group.length &&
-  //       !(summarizeList[0] as MetaSummarize).by.length)
-  //   ) {
-  //     return true;
-  //   }
-  //   return false;
-  // }
-  // todo 动态查询表字段
-  async fetchColumns(tableName, callback) {
-    let columns = this.getColumns(tableName);
-    // if (!columns.length) {
-    //   let [err, res] = await api.getDataSetField(tableName);
-    //   columns = res?.data;
-    //   if (err || !Array.isArray(columns)) return false;
-    //   columns = columns.map((v: any) => {
-    //     return {
-    //       database_type: v.dataType?.toLocaleUpperCase?.() || '',
-    //       name: v.fieldId,
-    //       name_zh: v.fieldName || '',
-    //       special_type: '', // 这里永远是空 因为后端没返回这个字段
-    //     };
-    //   });
-    //   runInAction((): any => {
-    //     this.setColumns(tableName, columns);
-    //   });
-    // }
-    typeof callback === 'function' && callback(columns.map(v => ({
-      ...v,
-      select: true
-    }))); // 默认所有字段都是勾上的 所以select写死true
-  }
-  // addMeta(type: string, index: number) {
-  //   let newMeta: MetaListType[] = this.metaList.slice();
-  //   let item: MetaListType;
-  //   let mainTable: MetaData = newMeta[0] as MetaData;
-  //   metaKey += 1;
-  //   if (type === TypeEnum.joinData) {
-  //     let name = index === 1 ? mainTable.table.name : '';
-  //     item = {
-  //       metaKey,
-  //       type: TypeEnum.joinData,
-  //       joinType: JoinEnum.left,
-  //       table1: { name, alias: name, column: '' },
-  //       table2: { name: '', alias: '', column: '' },
-  //       columns: [],
-  //     };
-  //   }
-  //   if (type === TypeEnum.customColumn) {
-  //     item = { metaKey, type: TypeEnum.customColumn, customColumn: [] };
-  //   }
-  //   if (type === TypeEnum.filter) {
-  //     item = { metaKey, type: TypeEnum.filter, filter: [] };
-  //   }
-  //   if (type === TypeEnum.summarize) {
-  //     item = { metaKey, type: TypeEnum.summarize, alias: SummarizeAlias, group: [], by: [] };
-  //   }
-  //   if (type === TypeEnum.sort) {
-  //     item = { metaKey, type: TypeEnum.sort, sort: [] };
-  //   }
-  //   if (type === TypeEnum.rowLimit) {
-  //     item = { metaKey, type: TypeEnum.rowLimit, limit: '' };
-  //   }
-  //   // @ts-ignore
-  //   newMeta.splice(index, 0, item);
-  //   this.metaList = newMeta;
-  // }
-  // delMeta(meta: any): void {
-  //   // TIPS 自定义列删除了后面都得删除 暂时不删除 因为过滤器和组合包括自定义列都没用到自定义列
-  //   let index = this.metaList.indexOf(meta);
-  //   let newMeta = this.metaList.slice();
-  //   if (meta.type === TypeEnum.joinData) {
-  //     if ((meta as MetaJoin).table2.name) {
-  //       this.metaList = newMeta.filter((v: MetaListType, i: number) => i < index);
-  //       return void 0;
-  //     }
-  //   }
-  //   if (meta.type === TypeEnum.summarize) {
-  //     if ((meta as MetaSummarize).by.length || (meta as MetaSummarize).group.length) {
-  //       this.metaList = newMeta.filter((v: MetaListType, i: number) => i < index);
-  //       return void 0;
-  //     }
-  //   }
-  //   this.metaList = newMeta.filter((v) => v !== meta);
-  // }
-  // setMeta(payload: any) {
-  //   this.metaList = payload;
-  // }
-  // setTableData(payload: any) {
-  //   this.tableData = payload;
-  // }
-  // setPopup(payload: PopupData) {
-  //   this.popupData = payload;
-  // }
-  setColumns(tableId, columns) {
-    this._cacheColumnsMap[tableId] = columns;
-  }
-  getColumns(tableId) {
-    return this._cacheColumnsMap[tableId] || [];
-  }
-}
-new SqlVisionStore();
+var css_248z$5 = ".Sqb-SelectColumns--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectColumns--box .Sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.Sqb-SelectColumns--box .Sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectColumns--box .Sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.Sqb-SelectColumns--box .Sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n}\n.Sqb-SelectColumns--box .Sqb-List-item .Field-extra {\n  display: flex;\n  align-items: center;\n  padding: 0.5rem;\n  cursor: pointer;\n  border-left: 2px solid rgba(113, 114, 173, 0.1);\n  color: rgba(255, 255, 255, 0.5);\n  visibility: hidden;\n}\n.Sqb-SelectColumns--box .Sqb-List-item .Field-extra h4 {\n  margin-bottom: 0;\n  color: inherit;\n}\n.Sqb-SelectColumns--box .Sqb-List-item .Field-extra svg {\n  color: #fff;\n  margin-left: 0.5rem;\n}\n.Sqb-SelectColumns--box .Sqb-List-item .Field-extra:hover {\n  color: #fff;\n}\n.Sqb-SelectColumns--box .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectColumns--box .Sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.Sqb-SelectColumns--box .Sqb-List-item:not(.disabled):hover .List-item-icon,\n.Sqb-SelectColumns--box .Sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.Sqb-SelectColumns--box .Sqb-List-item:not(.disabled):hover .List-item-title,\n.Sqb-SelectColumns--box .Sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.Sqb-SelectColumns--box .Sqb-List-item:not(.disabled):hover .Field-extra,\n.Sqb-SelectColumns--box .Sqb-List-item.active .Field-extra {\n  visibility: visible;\n}\n.Sqb-SelectColumns--box .Sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.Sqb-SelectColumns--box .Sqb-List-title {\n  display: flex;\n  border-radius: 4px;\n}\n.Sqb-SelectColumns--box .Sqb-List-title a {\n  flex: auto;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  color: #4c5773;\n  overflow: hidden;\n}\n.Sqb-SelectColumns--box .Sqb-List-title .List-item-icon {\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectColumns--box .Sqb-List-title .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 16px;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.Sqb-SelectColumns--box .Sqb-List-title .List-title-arrow {\n  margin-left: auto;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.active .List-item-icon {\n  color: #509ee3;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.shrink {\n  cursor: pointer;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.shrink a {\n  cursor: pointer;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.shrink:hover a {\n  color: #509ee3;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.shrink:hover a .List-item-title {\n  color: #509ee3;\n}\n.Sqb-SelectColumns--box .Sqb-List-search {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n  color: #b8bbc3;\n  background-color: #fff;\n  border: 1px solid #f0f0f0;\n  font-size: 14px;\n}\n.Sqb-SelectColumns--box .Sqb-List-search span {\n  line-height: 0;\n}\n.Sqb-SelectColumns--box .Sqb-List-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1.12em;\n  font-weight: 600;\n}\n.Sqb-SelectColumns--box .Sqb-List-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.Sqb-SelectColumns--box .Sqb-List-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n.Sqb-SelectColumns--box.greenGrass .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectColumns--box.greenGrass .Sqb-List-item.active {\n  background-color: #88bf4d;\n}\n.Sqb-SelectColumns--box.greenGrass .Sqb-List-title.active .List-item-icon {\n  color: #88bf4d;\n}\n.Sqb-SelectColumns--box.greenGrass .Sqb-List-title.shrink:hover a {\n  color: #88bf4d;\n}\n.Sqb-SelectColumns--box.greenGrass .Sqb-List-title.shrink:hover a .List-item-title {\n  color: #88bf4d;\n}\n.Sqb-SelectColumns--box.purple .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectColumns--box.purple .Sqb-List-item.active {\n  background-color: #7172ad;\n}\n.Sqb-SelectColumns--box.purple .Sqb-List-title.active .List-item-icon {\n  color: #7172ad;\n}\n.Sqb-SelectColumns--box.purple .Sqb-List-title.shrink:hover a {\n  color: #7172ad;\n}\n.Sqb-SelectColumns--box.purple .Sqb-List-title.shrink:hover a .List-item-title {\n  color: #7172ad;\n}\n.menu-list {\n  border: none !important;\n}\n.menu-list .ant-menu-item:hover {\n  color: #88bf4d !important;\n}\n.menu-list .ant-menu-item-selected {\n  background-color: #88bf4d !important;\n  color: #fff !important;\n  border-radius: 4px !important;\n}\n";
+styleInject(css_248z$5);
 
-const NUMBER_GROUP = [SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
+const NUMBER_GROUP$1 = [SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
 [SQL_COLUMN_TYPE.STRING];
-const DATE_GROUP = [SQL_COLUMN_TYPE.DATE];
+const DATE_GROUP$1 = [SQL_COLUMN_TYPE.DATE];
 
 const IconMap = {
   CHAR: jsx(LetterAaIcon, {}),
@@ -2836,13 +3123,13 @@ const SelectJoinColumn = ({
   onSelect,
   isGroup,
   onGroup,
-  didUpdate,
-  setPopupClosable
+  didUpdate
 }) => {
+  useStore();
   const [curTable, setCurTable] = useState(value.alias); // 当前选择的表
   const [curColumn, setCurColumn] = useState(value.name); // 当前选择的字段
   const [tableList, setTableList] = useState(_data.map((v, i) => {
-    let open = !i && !curTable ? true : v.alias === curTable;
+    let open = !i && !curTable ? true : v.alias === curTable; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
     return {
       ...v,
       open,
@@ -2854,7 +3141,7 @@ const SelectJoinColumn = ({
     didUpdate?.();
   }, [tableList]);
   function onInput(val, tableAlias) {
-    let newData = cloneDeep(tableList).map((v, i) => {
+    let newData = _$3.cloneDeep(tableList).map((v, i) => {
       if (v.alias === tableAlias) {
         return {
           ...v,
@@ -2868,7 +3155,7 @@ const SelectJoinColumn = ({
   }
   value?.condition || '';
   return jsx("div", {
-    className: cx(`sqb-SelectColumns--box ${_theme}`),
+    className: cx(`Sqb-SelectColumns--box ${_theme}`),
     children: jsx("div", {
       style: {
         width: 300
@@ -2879,21 +3166,23 @@ const SelectJoinColumn = ({
           table,
           columns,
           open,
-          searchText
+          searchText,
+          datasourceId = '',
+          datasourceName = ''
         } = tableItem;
         let isMultiple = tableList.length > 1;
-        let isSummarize = tableAlias === SummarizeAlias$1;
+        let isSummarize = tableAlias === SummarizeAlias;
         return jsxs("div", {
           children: [!isSummarize && jsx("div", {
-            className: cx(`sqb-List-section`),
+            className: cx(`Sqb-List-section`),
             children: jsx("div", {
-              className: cx(`sqb-List-title mx-4 pb-4 pt-4`, {
+              className: cx(`Sqb-List-title mx-4 pb-4 pt-4`, {
                 shrink: isMultiple,
                 active: open
               }),
               onClick: () => {
                 if (!isMultiple) return void 0;
-                let newTables = cloneDeep(tableList);
+                let newTables = _$3.cloneDeep(tableList);
                 if (open) {
                   setTableList(newTables.map(v => ({
                     ...v,
@@ -2902,7 +3191,7 @@ const SelectJoinColumn = ({
                 } else {
                   setTableList(newTables.map(v => ({
                     ...v,
-                    open: tableAlias === v.alias || v.alias === SummarizeAlias$1
+                    open: tableAlias === v.alias || v.alias === SummarizeAlias
                   })));
                 }
               },
@@ -2911,9 +3200,13 @@ const SelectJoinColumn = ({
                   className: 'List-item-icon',
                   children: jsx(TableIcon, {})
                 }), jsx("div", {
+                  style: {
+                    overflow: 'hidden'
+                  },
                   children: jsx("h3", {
                     className: 'List-item-title ml-2',
-                    children: tableAlias
+                    title: datasourceName ? `${datasourceName}.${table || tableAlias}` : table || tableAlias,
+                    children: datasourceName ? `${datasourceName}.${table || tableAlias}` : table || tableAlias
                   })
                 }), isMultiple && jsx("span", {
                   className: 'List-title-arrow',
@@ -2923,9 +3216,9 @@ const SelectJoinColumn = ({
             })
           }), open && jsxs(Fragment, {
             children: [!isSummarize && jsx("div", {
-              className: cx(`sqb-List-section`),
+              className: cx(`Sqb-List-section`),
               children: jsxs("div", {
-                className: cx(`sqb-List-search m-2 rounded-lg`),
+                className: cx(`Sqb-List-search m-2 rounded-lg`),
                 children: [jsx("span", {
                   className: 'px-2',
                   children: jsx(SearchIcon, {})
@@ -2934,7 +3227,7 @@ const SelectJoinColumn = ({
                   className: 'p-2',
                   autoFocus: true,
                   value: searchText,
-                  placeholder: '\u67E5\u627E...',
+                  placeholder: __('joinData.search'),
                   onChange: () => {},
                   onInput: e => onInput(e.target.value, tableAlias)
                 })]
@@ -2943,21 +3236,22 @@ const SelectJoinColumn = ({
               let {
                 special_type,
                 database_type,
-                name
+                name,
+                realName = ''
               } = v;
               SQL_GROUP_TYPE.STRING;
               // @ts-ignore
-              if (~NUMBER_GROUP.indexOf(database_type)) {
+              if (~NUMBER_GROUP$1.indexOf(database_type)) {
                 SQL_GROUP_TYPE.NUMBER;
               }
               // @ts-ignore
-              if (~DATE_GROUP.indexOf(database_type)) {
+              if (~DATE_GROUP$1.indexOf(database_type)) {
                 SQL_GROUP_TYPE.DATE;
               }
               return jsx("div", {
-                className: cx(`sqb-List-section`),
+                className: cx(`Sqb-List-section`),
                 children: jsxs("div", {
-                  className: cx(`sqb-List-item mx-2`, {
+                  className: cx(`Sqb-List-item mx-2`, {
                     active: curColumn === name && curTable === tableAlias
                   }),
                   onClick: () => {
@@ -2970,7 +3264,8 @@ const SelectJoinColumn = ({
                         name,
                         database_type,
                         condition,
-                        quotes
+                        quotes,
+                        realName
                       });
                     }
                     typeof onSelect === 'function' && onSelect({
@@ -2978,7 +3273,10 @@ const SelectJoinColumn = ({
                       alias: tableAlias,
                       name,
                       database_type,
-                      sql: v.sql || ''
+                      sql: v.sql || '',
+                      datasourceId,
+                      datasourceName,
+                      realName
                     });
                   },
                   children: [jsxs("a", {
@@ -3002,9 +3300,10 @@ const SelectJoinColumn = ({
     })
   });
 };
+var SelectJoinColumn$1 = observer(SelectJoinColumn);
 
-var css_248z$3 = ".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}\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  width: 300px;\n  height: 46px;\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$3);
+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}\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  width: 300px;\n  height: 46px;\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
@@ -3020,8 +3319,7 @@ const SelectFilterColumn = ({
   data: _data = [],
   value,
   onChange,
-  didUpdate,
-  setPopupClosable
+  didUpdate
 }) => {
   const [curColumn, setCurColumn] = useState(value);
   const [condition, setCondition] = useState(value.condition);
@@ -3046,29 +3344,89 @@ const SelectFilterColumn = ({
     let [firstVal = '', secondVal = ''] = val;
     let quotes = '';
     if (condition === '以...开始') {
-      quotes = curColumn.name + ' ' + `以 ${firstVal} 开始`;
+      if (isEn) {
+        quotes = curColumn.name + ' ' + `startWith ${firstVal}`;
+      } else {
+        quotes = curColumn.name + ' ' + `以 ${firstVal} 开始`;
+      }
     } else if (condition === '以...结束') {
-      quotes = curColumn.name + ' ' + `以 ${firstVal} 开始`;
+      if (isEn) {
+        quotes = curColumn.name + ' ' + `endWith ${firstVal}`;
+      } else {
+        quotes = curColumn.name + ' ' + `以 ${firstVal} 结束`;
+      }
     } else if (condition === '介于之间') {
-      quotes = curColumn.name + ' ' + `介于${firstVal}和${secondVal}之间`;
+      if (isEn) {
+        quotes = curColumn.name + ' ' + `Between ${firstVal} and ${secondVal}`;
+      } else {
+        quotes = curColumn.name + ' ' + `介于${firstVal}和${secondVal}之间`;
+      }
     } else if (condition === '前') {
-      quotes = curColumn.name + ' ' + `上一个${firstVal}${secondVal}`;
+      if (isEn) {
+        quotes = curColumn.name + ' ' + `previous ${firstVal}${secondVal}`;
+      } else {
+        quotes = curColumn.name + ' ' + `上一个${firstVal}${secondVal}`;
+      }
     } else if (condition === '下一个') {
-      quotes = curColumn.name + ' ' + `下一个${firstVal}${secondVal}`;
+      if (isEn) {
+        quotes = curColumn.name + ' ' + `next ${firstVal}${secondVal}`;
+      } else {
+        quotes = curColumn.name + ' ' + `下一个${firstVal}${secondVal}`;
+      }
     } else if (condition === '在') {
-      quotes = curColumn.name + ' 是 ' + firstVal;
+      if (isEn) {
+        quotes = curColumn.name + ' is ' + firstVal;
+      } else {
+        quotes = curColumn.name + ' 是 ' + firstVal;
+      }
     } else if (condition === '是空的') {
-      quotes = curColumn.name + ' 为空';
+      if (isEn) {
+        quotes = curColumn.name + ' is empty';
+      } else {
+        quotes = curColumn.name + ' 为空';
+      }
     } else if (condition === '不是空的') {
-      quotes = curColumn.name + ' 不为空';
+      if (isEn) {
+        quotes = curColumn.name + ' not empty';
+      } else {
+        quotes = curColumn.name + ' 不为空';
+      }
     } else if (condition === '当前') {
       if (firstVal === '天') {
-        quotes = curColumn.name + ' ' + `今天`;
+        if (isEn) {
+          quotes = curColumn.name + ' ' + `today`;
+        } else {
+          quotes = curColumn.name + ' ' + `今天`;
+        }
       } else {
-        quotes = curColumn.name + ' ' + `这个${firstVal}`;
+        if (isEn) {
+          quotes = curColumn.name + ' ' + `this is ${firstVal}`;
+        } else {
+          quotes = curColumn.name + ' ' + `这个${firstVal}`;
+        }
       }
     } else {
-      quotes = curColumn.name + ' ' + condition + ' ' + firstVal;
+      let cond = __({
+        等于: 'filter.equal',
+        不等于: 'filter.notEqual',
+        大于: 'filter.greaterThan',
+        小于: 'filter.lessThan',
+        介于之间: 'filter.inBetween',
+        大于或等于: 'filter.greaterThanOrEqualTo',
+        小于或等于: 'filter.lessThanOrEqualTo',
+        为空: 'filter.empty',
+        不为空: 'filter.notEmpty',
+        是: 'filter.is',
+        不是: 'filter.isNo',
+        包含: 'filter.contain',
+        不包含: 'filter.notInclude',
+        '以...开始': 'filter.startWith',
+        '以...结束': 'filter.endWith',
+        早于: 'filter.earlierThan',
+        晚于: 'filter.laterThan',
+        是空的: 'filter.isEmpty'
+      }[condition]);
+      quotes = curColumn.name + ' ' + cond + ' ' + firstVal;
     }
     return quotes;
   }
@@ -3083,7 +3441,7 @@ const SelectFilterColumn = ({
       // 选择条件
       quotes,
       // 前端显示用户看的文字
-      groupSql: curColumn.alias === SummarizeAlias$1 ? curColumn.sql : ''
+      groupSql: curColumn.alias === SummarizeAlias ? curColumn.sql : ''
     });
   }
   function goPrevPage() {
@@ -3107,10 +3465,10 @@ const SelectFilterColumn = ({
     let columnType = database_type.toUpperCase();
     let conditions = STRING_LIST;
     let type = SQL_GROUP_TYPE.STRING;
-    if (NUMBER_GROUP.includes(columnType)) {
+    if (NUMBER_GROUP$1.includes(columnType)) {
       conditions = NUMBER_LIST;
       type = SQL_GROUP_TYPE.NUMBER;
-    } else if (DATE_GROUP.includes(columnType)) {
+    } else if (DATE_GROUP$1.includes(columnType)) {
       conditions = DATE_LIST;
       type = SQL_GROUP_TYPE.DATE;
     }
@@ -3133,7 +3491,7 @@ const SelectFilterColumn = ({
           },
           children: [jsx(Input, {
             className: 'input',
-            placeholder: '\u8F93\u5165\u4E00\u4E2A\u6570\u5B57',
+            placeholder: __('filter.enterANumber'),
             value: firstVal || '',
             onInput: e => {
               let newVal = curVal.slice();
@@ -3142,7 +3500,7 @@ const SelectFilterColumn = ({
             }
           }), jsx(Input, {
             className: 'input',
-            placeholder: '\u8F93\u5165\u4E00\u4E2A\u6570\u5B57',
+            placeholder: __('filter.enterANumber'),
             value: secondVal || '',
             onInput: e => {
               let newVal = curVal.slice();
@@ -3173,16 +3531,18 @@ const SelectFilterColumn = ({
       return jsx("div", {
         children: jsx(Dropdown, {
           trigger: ['click'],
-          droplist: jsxs(Menu, {
-            onClickMenuItem: key => setVal([key]),
+          overlay: jsxs(Menu, {
+            onClick: ({
+              key
+            }) => setVal([key]),
             children: [jsx(Menu.Item, {
-              children: "\u5929"
+              children: __('filter.day')
             }, '\u5929'), jsx(Menu.Item, {
-              children: "\u5468"
+              children: __('filter.week')
             }, '\u5468'), jsx(Menu.Item, {
-              children: "\u6708"
+              children: __('filter.month')
             }, '\u6708'), jsx(Menu.Item, {
-              children: "\u5E74"
+              children: __('filter.year')
             }, '\u5E74')]
           }),
           children: jsxs(Button, {
@@ -3190,7 +3550,7 @@ const SelectFilterColumn = ({
             style: {
               width: 300
             },
-            children: [firstVal, " ", jsx(DownArrow, {})]
+            children: [firstVal, " ", jsx(DownOutlined, {})]
           })
         })
       });
@@ -3199,7 +3559,7 @@ const SelectFilterColumn = ({
         className: 'flex w_300',
         children: [jsx(Input, {
           className: 'input inline',
-          placeholder: '\u8F93\u5165\u4E00\u4E2A\u6570\u5B57',
+          placeholder: __('filter.enterANumber'),
           value: firstVal || '',
           onInput: e => {
             let newVal = curVal.slice();
@@ -3208,24 +3568,26 @@ const SelectFilterColumn = ({
           }
         }), jsx(Dropdown, {
           trigger: ['click'],
-          droplist: jsxs(Menu, {
-            onClickMenuItem: key => {
+          overlay: jsxs(Menu, {
+            onClick: ({
+              key
+            }) => {
               let newVal = curVal.slice();
               newVal[1] = key;
               setVal(newVal);
             },
             children: [jsx(Menu.Item, {
-              children: "\u5206"
+              children: __('filter.minute')
             }, '\u5206'), jsx(Menu.Item, {
-              children: "\u65F6"
+              children: __('filter.hour')
             }, '\u65F6'), jsx(Menu.Item, {
-              children: "\u5929"
+              children: __('filter.day')
             }, '\u5929'), jsx(Menu.Item, {
-              children: "\u5468"
+              children: __('filter.week')
             }, '\u5468'), jsx(Menu.Item, {
-              children: "\u6708"
+              children: __('filter.month')
             }, '\u6708'), jsx(Menu.Item, {
-              children: "\u5E74"
+              children: __('filter.year')
             }, '\u5E74')]
           }),
           children: jsxs(Button, {
@@ -3233,7 +3595,7 @@ const SelectFilterColumn = ({
             style: {
               width: 104
             },
-            children: [secondVal, " ", jsx(DownArrow, {})]
+            children: [secondVal, " ", jsx(DownOutlined, {})]
           })
         })]
       });
@@ -3259,7 +3621,7 @@ const SelectFilterColumn = ({
       return jsx("div", {
         children: jsx(Input, {
           className: 'input',
-          placeholder: '\u8BF7\u8F93\u5165',
+          placeholder: __('filter.pleaseEnter'),
           value: firstVal || '',
           onInput: e => {
             let newVal = curVal.slice();
@@ -3278,12 +3640,33 @@ const SelectFilterColumn = ({
       conditions
     } = getData(curColumn);
     const menu = jsx(Menu, {
-      onClickMenuItem: key => {
+      onClick: ({
+        key
+      }) => {
         setDefaultVal(key);
       },
       children: conditions.map(v => {
         return jsx(Menu.Item, {
-          children: v
+          children: __({
+            等于: 'filter.equal',
+            不等于: 'filter.notEqual',
+            大于: 'filter.greaterThan',
+            小于: 'filter.lessThan',
+            介于之间: 'filter.inBetween',
+            大于或等于: 'filter.greaterThanOrEqualTo',
+            小于或等于: 'filter.lessThanOrEqualTo',
+            为空: 'filter.empty',
+            不为空: 'filter.notEmpty',
+            是: 'filter.is',
+            不是: 'filter.isNo',
+            包含: 'filter.contain',
+            不包含: 'filter.notInclude',
+            '以...开始': 'filter.startWith',
+            '以...结束': 'filter.endWith',
+            早于: 'filter.earlierThan',
+            晚于: 'filter.laterThan',
+            是空的: 'filter.isEmpty'
+          }[v])
         }, v);
       })
     });
@@ -3300,14 +3683,33 @@ const SelectFilterColumn = ({
         }), jsx("div", {
           className: 'right-info',
           children: jsx(Dropdown, {
-            droplist: menu,
+            overlay: menu,
             trigger: ['click'],
             children: jsxs(Button, {
               className: 'operator-btn',
               style: {
                 width: 104
               },
-              children: [condition, jsx(DownArrow, {})]
+              children: [__({
+                等于: 'filter.equal',
+                不等于: 'filter.notEqual',
+                大于: 'filter.greaterThan',
+                小于: 'filter.lessThan',
+                介于之间: 'filter.inBetween',
+                大于或等于: 'filter.greaterThanOrEqualTo',
+                小于或等于: 'filter.lessThanOrEqualTo',
+                为空: 'filter.empty',
+                不为空: 'filter.notEmpty',
+                是: 'filter.is',
+                不是: 'filter.isNo',
+                包含: 'filter.contain',
+                不包含: 'filter.notInclude',
+                '以...开始': 'filter.startWith',
+                '以...结束': 'filter.endWith',
+                早于: 'filter.earlierThan',
+                晚于: 'filter.laterThan',
+                是空的: 'filter.isEmpty'
+              }[condition]), jsx(DownOutlined, {})]
             })
           })
         })]
@@ -3322,7 +3724,7 @@ const SelectFilterColumn = ({
           }),
           onClick: addFilter,
           children: jsx("span", {
-            children: "\u6DFB\u52A0\u8FC7\u6EE4\u5668"
+            children: __('filter.addFilter')
           })
         })
       })]
@@ -3341,8 +3743,7 @@ const SelectFilterColumn = ({
     }
   }
   return jsx("div", {
-    children: jsx(SelectJoinColumn, {
-      setPopupClosable: setPopupClosable,
+    children: jsx(SelectJoinColumn$1, {
       data: _data,
       value: value,
       theme: ColumnsPopupThemeEnum.purple,
@@ -3363,17 +3764,13 @@ const SelectFilterColumn = ({
   });
 };
 var SelectFilter = props => {
-  return (
-    // <ConfigProvider locale={zhCN}>
-    jsx(SelectFilterColumn, {
-      ...props
-    })
-    // </ConfigProvider>
-  );
+  return jsx(SelectFilterColumn, {
+    ...props
+  });
 };
 
-var css_248z$2 = ".sqb-SelectSummarize-group--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item .tips {\n  color: #b8bbc3;\n  border: 2px solid currentColor;\n  border-radius: 99px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.7;\n  cursor: pointer;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item .tips::after {\n  content: '?';\n  font-size: 13px;\n  font-weight: bold;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item:not(.disabled):hover,\n.sqb-SelectSummarize-group--box .sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.sqb-SelectSummarize-group--box .sqb-List-item:not(.disabled):hover .List-item-icon,\n.sqb-SelectSummarize-group--box .sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item:not(.disabled):hover .List-item-title,\n.sqb-SelectSummarize-group--box .sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item:not(.disabled):hover .tips,\n.sqb-SelectSummarize-group--box .sqb-List-item.active .tips {\n  color: #fff;\n}\n.sqb-SelectSummarize-group--box .sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title {\n  display: flex;\n  border-radius: 4px;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title a {\n  flex: auto;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  color: #4c5773;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title .List-item-icon {\n  display: flex;\n  align-items: center;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 16px;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title .List-title-arrow {\n  margin-left: auto;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title.active .List-item-icon {\n  color: #509ee3;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title.shrink {\n  cursor: pointer;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title.shrink a {\n  cursor: pointer;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title.shrink:hover a {\n  color: #509ee3;\n}\n.sqb-SelectSummarize-group--box .sqb-List-title.shrink:hover a .List-item-title {\n  color: #509ee3;\n}\n.sqb-SelectSummarize-group--box.greenGrass .sqb-List-item:not(.disabled):hover,\n.sqb-SelectSummarize-group--box.greenGrass .sqb-List-item.active {\n  background-color: #88bf4d;\n}\n.sqb-SelectSummarize-group--box.greenGrass .sqb-List-title .List-item-icon {\n  color: #88bf4d;\n}\n.back-title {\n  padding: 1rem 0.5rem;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #f0f0f0;\n}\n.back-title > div {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: #949aab;\n}\n.back-title > div h3 {\n  padding-left: 0.5rem;\n  display: inline-block;\n  margin: 0;\n  color: #949aab;\n}\n";
-styleInject(css_248z$2);
+var css_248z$3 = ".Sqb-SelectSummarize-group--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item .tips {\n  color: #b8bbc3;\n  border: 2px solid currentColor;\n  border-radius: 99px;\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.7;\n  cursor: pointer;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item .tips::after {\n  content: '?';\n  font-size: 13px;\n  font-weight: bold;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectSummarize-group--box .Sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item:not(.disabled):hover .List-item-icon,\n.Sqb-SelectSummarize-group--box .Sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item:not(.disabled):hover .List-item-title,\n.Sqb-SelectSummarize-group--box .Sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item:not(.disabled):hover .tips,\n.Sqb-SelectSummarize-group--box .Sqb-List-item.active .tips {\n  color: #fff;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title {\n  display: flex;\n  border-radius: 4px;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title a {\n  flex: auto;\n  cursor: default;\n  display: flex;\n  align-items: center;\n  color: #4c5773;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title .List-item-icon {\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 16px;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title .List-title-arrow {\n  margin-left: auto;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title.active .List-item-icon {\n  color: #509ee3;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title.shrink {\n  cursor: pointer;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title.shrink a {\n  cursor: pointer;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title.shrink:hover a {\n  color: #509ee3;\n}\n.Sqb-SelectSummarize-group--box .Sqb-List-title.shrink:hover a .List-item-title {\n  color: #509ee3;\n}\n.Sqb-SelectSummarize-group--box.greenGrass .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectSummarize-group--box.greenGrass .Sqb-List-item.active {\n  background-color: #88bf4d;\n}\n.Sqb-SelectSummarize-group--box.greenGrass .Sqb-List-title .List-item-icon {\n  color: #88bf4d;\n}\n.back-title {\n  padding: 1rem 0.5rem;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid #f0f0f0;\n}\n.back-title > div {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: #949aab;\n}\n.back-title > div h3 {\n  padding-left: 0.5rem;\n  display: inline-block;\n  margin: 0;\n  color: #949aab;\n}\n";
+styleInject(css_248z$3);
 
 const theme = ColumnsPopupThemeEnum.greenGrass;
 const FormulaList = [{
@@ -3404,21 +3801,49 @@ const FormulaList = [{
   name: '最大值',
   tip: '一个字段的最大值'
 }];
-const QuotesMap = new Map([['总行数', '计数'], ['总和', '求和 的 '], ['平均值', '平均 的 '], ['不重复值的总数', '不重复的值 的 '], ['累积求和', '累积和 的 '], ['累积行数', '累积计数'], ['标准差', '标准偏差 的 '], ['最小值', '最小 的 '], ['最大值', '最大 的 ']]);
+const QuotesMap = new Map([['总行数', '计数'], ['总和', '求和 的'], ['平均值', '平均 的'], ['不重复值的总数', '不重复的值 的'], ['累积求和', '累积和 的'], ['累积行数', '累积计数'], ['标准差', '标准偏差 的'], ['最小值', '最小 的'], ['最大值', '最大 的']]);
+const localeMap = {
+  总行数: 'summarize.totalNumberOfRows',
+  计数: 'summarize.count',
+  总和: 'summarize.sum',
+  '求和 的': 'summarize.sumOf',
+  平均值: 'summarize.average',
+  '平均 的': 'summarize.onAverageOf',
+  不重复值的总数: 'summarize.totalNumberOfUniqueValues',
+  '不重复的值 的': 'summarize.non-repeatingValueOf',
+  累积求和: 'summarize.cumulativeSummation',
+  '累积和 的': 'summarize.cumulativeSumOf',
+  累积行数: 'summarize.cumulativeNumberOfRows',
+  累积计数: 'summarize.cumulativeCount',
+  标准差: 'summarize.standardDeviation',
+  '标准偏差 的': 'summarize.standardDeviationOf',
+  最小值: 'summarize.minimumCalue',
+  '最小 的': 'summarize.theSmallestYes',
+  最大值: 'summarize.maximumCalue',
+  '最大 的': 'summarize.biggestYes',
+  总的数据行数: 'summarize.totalNumberOfRowsOfData',
+  一个字段所有数值的总和: 'summarize.theSumOfAllValuesInAField',
+  一个字段所有数值的平均值: 'summarize.theAverageOfAllValuesInAfield',
+  一个字段所有互不重复的值的总数: 'summarize.theTotalNumberOfUniqueValuesInAfield',
+  '一个列的所有值的加和。如：x一段时间内的总收入': 'summarize.theSumOfAllTheValuesInAcolumnForExample',
+  '行数的加法统计。如；x段时间内的销售总额': 'summarize.additiveStatisticsOfTheNumberOfRows',
+  一个字段所有数值的标准差: 'summarize.theStandardDeviationOfAllValuesInAfield',
+  一个字段的最小值: 'summarize.theMinimumValueOfAfield',
+  一个字段的最大值: 'summarize.TheMaximumValueOfAfield'
+};
 const Special = ['总行数', '累积行数'];
 const SelectSummarize = ({
   data,
   value,
   onChange,
-  didUpdate,
-  setPopupClosable
+  didUpdate
 }) => {
   const [condition, setCondition] = useState(value.condition);
   function goPrevPage() {
     setCondition('');
   }
   function handleSelect(condition, record) {
-    const quotes = QuotesMap.get(condition) + (record?.name || '');
+    const quotes = __(localeMap[QuotesMap.get(condition)]) + ' ' + (record?.name || '');
     onChange({
       ...record,
       condition,
@@ -3432,7 +3857,7 @@ const SelectSummarize = ({
       availableData = data.map(v => {
         return {
           ...v,
-          columns: v.columns.filter(o => o.database_type && NUMBER_GROUP.includes(o.database_type))
+          columns: v.columns.filter(o => o.database_type && NUMBER_GROUP$1.includes(o.database_type))
         };
       }).filter(v => v.columns.length);
     }
@@ -3441,12 +3866,11 @@ const SelectSummarize = ({
         className: 'back-title',
         children: jsxs("div", {
           onClick: goPrevPage,
-          children: [jsx(LeftArrowIcon, {}), jsx("h3", {
-            children: condition
+          children: [jsx(LeftArrowIcon, {}), jsxs("h3", {
+            children: [" ", __(localeMap[condition]), " "]
           })]
         })
-      }), jsx(SelectJoinColumn, {
-        setPopupClosable: setPopupClosable,
+      }), jsx(SelectJoinColumn$1, {
         data: availableData,
         value: value,
         theme: ColumnsPopupThemeEnum.greenGrass,
@@ -3458,16 +3882,16 @@ const SelectSummarize = ({
     });
   }
   return jsx("div", {
-    className: cx(`sqb-SelectSummarize-group--box ${theme}`),
+    className: cx(`Sqb-SelectSummarize-group--box ${theme}`),
     children: jsx("div", {
       style: {
         width: 300
       },
       children: jsxs("div", {
         children: [jsx("div", {
-          className: cx(`sqb-List-section`),
+          className: cx(`Sqb-List-section`),
           children: jsx("div", {
-            className: cx(`sqb-List-title mx-4 pb-4 pt-4`),
+            className: cx(`Sqb-List-title mx-4 pb-4 pt-4`),
             children: jsxs("a", {
               children: [jsx("span", {
                 className: 'List-item-icon',
@@ -3475,16 +3899,16 @@ const SelectSummarize = ({
               }), jsx("div", {
                 children: jsx("h3", {
                   className: 'List-item-title ml-2',
-                  children: "\u57FA\u7840\u6307\u6807"
+                  children: __('summarize.basicIndicators')
                 })
               })]
             })
           })
         }), FormulaList.map((v, i) => {
           return jsx("div", {
-            className: cx(`sqb-List-section`),
+            className: cx(`Sqb-List-section`),
             children: jsx("div", {
-              className: cx(`sqb-List-item mx-2`, {
+              className: cx(`Sqb-List-item mx-2`, {
                 active: condition === v.name
               }),
               onClick: () => {
@@ -3499,13 +3923,13 @@ const SelectSummarize = ({
                 children: [jsx("div", {
                   children: jsx("h4", {
                     className: 'List-item-title ml-2',
-                    children: v.name
+                    children: __(localeMap[v.name])
                   })
                 }), jsx("div", {
                   onClick: e => e.stopPropagation(),
                   children: jsx(Tooltip, {
-                    placement: 'rt',
-                    title: v.tip,
+                    placement: 'rightTop',
+                    title: __(localeMap[v.tip]),
                     children: jsx("span", {
                       className: 'tips'
                     })
@@ -3520,8 +3944,8 @@ const SelectSummarize = ({
   });
 };
 
-var css_248z$1 = ".sqb-SelectJoin--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.sqb-SelectJoin--box .sqb-List-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  cursor: pointer;\n}\n.sqb-SelectJoin--box .sqb-List-item svg {\n  color: #509ee3;\n}\n.sqb-SelectJoin--box .sqb-List-item:hover,\n.sqb-SelectJoin--box .sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n  color: #fff !important;\n}\n.sqb-SelectJoin--box .sqb-List-item:hover svg,\n.sqb-SelectJoin--box .sqb-List-item.active svg {\n  color: #fff !important;\n}\n";
-styleInject(css_248z$1);
+var css_248z$2 = ".Sqb-SelectJoin--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectJoin--box .Sqb-List-item {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  border-radius: 8px;\n  cursor: pointer;\n}\n.Sqb-SelectJoin--box .Sqb-List-item svg {\n  color: #509ee3;\n}\n.Sqb-SelectJoin--box .Sqb-List-item:hover,\n.Sqb-SelectJoin--box .Sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n  color: #fff !important;\n}\n.Sqb-SelectJoin--box .Sqb-List-item:hover svg,\n.Sqb-SelectJoin--box .Sqb-List-item.active svg {\n  color: #fff !important;\n}\n";
+styleInject(css_248z$2);
 
 const JoinList = [{
   type: JoinEnum.left,
@@ -3563,12 +3987,12 @@ const SelectJoin = ({
   onChange: _onChange = () => {}
 }) => {
   return jsx("div", {
-    className: `sqb-SelectJoin--box`,
+    className: `Sqb-SelectJoin--box`,
     children: jsx("div", {
       className: 'p-2',
       children: JoinList.map((v, i) => {
         return jsxs("div", {
-          className: cx(`sqb-List-item p-2`, {
+          className: cx(`Sqb-List-item p-2`, {
             active: value === v.type,
             'mb-2': i !== JoinList.length - 1
           }),
@@ -3582,8 +4006,8 @@ const SelectJoin = ({
   });
 };
 
-var css_248z = ".sqb-SelectTable--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.sqb-SelectTable--box .sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.sqb-SelectTable--box .sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.sqb-SelectTable--box .sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.sqb-SelectTable--box .sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.sqb-SelectTable--box .sqb-List-item:not(.disabled):hover,\n.sqb-SelectTable--box .sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.sqb-SelectTable--box .sqb-List-item:not(.disabled):hover .List-item-icon,\n.sqb-SelectTable--box .sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.sqb-SelectTable--box .sqb-List-item:not(.disabled):hover .List-item-title,\n.sqb-SelectTable--box .sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.sqb-SelectTable--box .sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.sqb-SelectTable--box .sqb-List-search {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n  color: #b8bbc3;\n  background-color: #fff;\n  border: 1px solid #f0f0f0;\n  font-size: 14px;\n}\n.sqb-SelectTable--box .sqb-List-search span {\n  line-height: 0;\n}\n.sqb-SelectTable--box .sqb-List-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1.12em;\n  font-weight: 600;\n}\n.sqb-SelectTable--box .sqb-List-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.sqb-SelectTable--box .sqb-List-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n";
-styleInject(css_248z);
+var css_248z$1 = ".Sqb-SelectDataSource--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #4c5773;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item:not(.disabled):hover .List-item-icon,\n.Sqb-SelectDataSource--box .Sqb-List-item.active .List-item-icon {\n  color: #509ee3 !important;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item:not(.disabled):hover .List-item-title,\n.Sqb-SelectDataSource--box .Sqb-List-item.active .List-item-title {\n  color: #509ee3 !important;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.Sqb-SelectTable--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectTable--box .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.Sqb-SelectTable--box .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectTable--box .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  line-height: 1;\n}\n.Sqb-SelectTable--box .header .left-info span svg {\n  margin-right: 0.5rem;\n}\n.Sqb-SelectTable--box .header .left-info span:hover {\n  color: #509ee3;\n}\n.Sqb-SelectTable--box .Sqb-SelectTable-loading {\n  position: relative;\n  width: 100%;\n  height: 200px;\n}\n.Sqb-SelectTable--box .Sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.Sqb-SelectTable--box .Sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectTable--box .Sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.Sqb-SelectTable--box .Sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.Sqb-SelectTable--box .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectTable--box .Sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.Sqb-SelectTable--box .Sqb-List-item:not(.disabled):hover .List-item-icon,\n.Sqb-SelectTable--box .Sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.Sqb-SelectTable--box .Sqb-List-item:not(.disabled):hover .List-item-title,\n.Sqb-SelectTable--box .Sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.Sqb-SelectTable--box .Sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.Sqb-SelectTable--box .Sqb-List-search {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n  color: #b8bbc3;\n  background-color: #fff;\n  border: 1px solid #f0f0f0;\n  font-size: 14px;\n}\n.Sqb-SelectTable--box .Sqb-List-search span {\n  line-height: 0;\n}\n.Sqb-SelectTable--box .Sqb-List-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1.12em;\n  font-weight: 600;\n}\n.Sqb-SelectTable--box .Sqb-List-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.Sqb-SelectTable--box .Sqb-List-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n";
+styleInject(css_248z$1);
 
 const SelectTable = ({
   data: _data = [],
@@ -3591,17 +4015,90 @@ const SelectTable = ({
   onChange: _onChange = () => {},
   didUpdate
 }) => {
-  const [list, setList] = useState(_data.slice());
+  const store = useStore();
+  const [loading, setLoading] = useState(false);
+  const [datasource] = useState(_data.slice());
+  const [list, setList] = useState([]);
+  const [originList, setOriginList] = useState([]);
+  const [val, setVal] = useState(value);
+  useEffect(() => {
+    if (value.datasourceId) {
+      getTables(value.datasourceId);
+    }
+  }, []);
+  async function getTables(datasourceId) {
+    setLoading(true);
+    let tables = await store.fetchDataset(datasourceId);
+    setLoading(false);
+    setList(tables);
+    setOriginList(tables);
+  }
   useEffect(() => {
     didUpdate?.();
-  }, [list]);
+  }, [list, loading, datasource]);
   function onInput(e) {
     let val = e.target.value;
-    let newList = cloneDeep(_data.slice());
+    let newList = _$3.cloneDeep(originList.slice());
     setList(newList.filter(v => ~v.name.toLocaleLowerCase().indexOf(val.toLocaleLowerCase())));
   }
+  function goPrevPage() {
+    setVal({
+      datasourceId: '',
+      datasourceName: '',
+      name: '',
+      alias: ''
+    });
+  }
+  const nextPage = !val.datasourceId;
+  // 没有选 数据源 先选数据源
+  if (nextPage) {
+    return jsx("div", {
+      className: cx(`Sqb-SelectDataSource--box pb-2 pt-2`),
+      children: jsx("div", {
+        style: {
+          width: 300
+        },
+        children: jsx("div", {
+          style: {
+            width: '100%'
+          },
+          children: Array.isArray(datasource) && datasource.map(v => {
+            return jsx("div", {
+              className: cx(`Sqb-List-section`),
+              children: jsx("div", {
+                className: cx(`Sqb-List-item mx-2`, {
+                  active: val.datasourceId === v.datasourceId
+                }),
+                onClick: () => {
+                  setVal({
+                    datasourceId: v.datasourceId,
+                    datasourceName: v.datasourceName,
+                    name: '',
+                    alias: ''
+                  });
+                  getTables(v.datasourceId);
+                },
+                children: jsxs("a", {
+                  className: 'p-2',
+                  children: [jsx("span", {
+                    className: 'List-item-icon',
+                    children: jsx(DataSourceIcon, {})
+                  }), jsx("div", {
+                    children: jsx("h4", {
+                      className: 'List-item-title ml-2',
+                      children: v.datasourceName
+                    })
+                  })]
+                })
+              })
+            }, v.datasourceId);
+          })
+        })
+      })
+    });
+  }
   return jsx("div", {
-    className: cx(`sqb-SelectTable--box pb-2`),
+    className: cx(`Sqb-SelectTable--box pb-2`),
     children: jsx("div", {
       style: {
         width: 300
@@ -3611,24 +4108,99 @@ const SelectTable = ({
           width: '100%'
         },
         children: [jsx("div", {
-          className: cx(`sqb-List-section`),
-          children: jsxs("div", {
-            className: cx(`sqb-List-search m-2 rounded-lg`),
-            children: [jsx("span", {
-              className: 'px-2',
-              children: jsx(SearchIcon, {})
-            }), jsx("input", {
-              type: 'text',
-              className: 'p-2',
-              placeholder: '\u67E5\u627E...',
-              onInput: onInput
-            })]
+          className: 'header',
+          children: jsx("div", {
+            className: 'left-info',
+            children: jsxs("span", {
+              onClick: goPrevPage,
+              children: [jsx(LeftArrowIcon, {}), val.datasourceName]
+            })
           })
-        }), Array.isArray(list) && list.map(v => {
+        }), loading ? jsx("div", {
+          className: 'Sqb-SelectTable-loading',
+          children: jsx(Loading, {
+            show: true,
+            msg: ''
+          })
+        }) : jsxs(Fragment, {
+          children: [jsx("div", {
+            className: cx(`Sqb-List-section`),
+            children: jsxs("div", {
+              className: cx(`Sqb-List-search m-2 rounded-lg`),
+              children: [jsx("span", {
+                className: 'px-2',
+                children: jsx(SearchIcon, {})
+              }), jsx("input", {
+                type: 'text',
+                className: 'p-2',
+                placeholder: __('data.search'),
+                onInput: onInput
+              })]
+            })
+          }), Array.isArray(list) && list.map(v => {
+            return jsx("div", {
+              className: cx(`Sqb-List-section`),
+              children: jsx("div", {
+                className: cx(`Sqb-List-item mx-2`, {
+                  active: value.name === v.name
+                }),
+                onClick: () => {
+                  _onChange({
+                    ...val,
+                    ...v
+                  });
+                },
+                children: jsxs("a", {
+                  className: 'p-2',
+                  children: [jsx("span", {
+                    className: 'List-item-icon',
+                    children: jsx(TableIcon, {})
+                  }), jsx("div", {
+                    children: jsx("h4", {
+                      className: 'List-item-title ml-2',
+                      children: v.name
+                    })
+                  })]
+                })
+              })
+            }, v.name);
+          })]
+        })]
+      })
+    })
+  });
+};
+var SelectTable$1 = observer(SelectTable);
+
+var css_248z = ".Sqb-SelectDataSource--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #4c5773;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item:not(.disabled):hover .List-item-icon,\n.Sqb-SelectDataSource--box .Sqb-List-item.active .List-item-icon {\n  color: #509ee3 !important;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item:not(.disabled):hover .List-item-title,\n.Sqb-SelectDataSource--box .Sqb-List-item.active .List-item-title {\n  color: #509ee3 !important;\n}\n.Sqb-SelectDataSource--box .Sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.Sqb-SelectTable--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectTable--box .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.Sqb-SelectTable--box .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectTable--box .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  line-height: 1;\n}\n.Sqb-SelectTable--box .header .left-info span svg {\n  margin-right: 0.5rem;\n}\n.Sqb-SelectTable--box .header .left-info span:hover {\n  color: #509ee3;\n}\n.Sqb-SelectTable--box .Sqb-SelectTable-loading {\n  position: relative;\n  width: 100%;\n  height: 200px;\n}\n.Sqb-SelectTable--box .Sqb-List-item {\n  display: flex;\n  border-radius: 4px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n.Sqb-SelectTable--box .Sqb-List-item a {\n  flex: auto;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.Sqb-SelectTable--box .Sqb-List-item .List-item-icon {\n  display: flex;\n  align-items: center;\n  color: #b8bbc3;\n}\n.Sqb-SelectTable--box .Sqb-List-item .List-item-title {\n  word-break: break-word;\n  word-wrap: anywhere;\n  color: #4c5773;\n  margin-top: 0;\n  margin-bottom: 0;\n  font-size: 14px;\n  font-weight: 600;\n}\n.Sqb-SelectTable--box .Sqb-List-item:not(.disabled):hover,\n.Sqb-SelectTable--box .Sqb-List-item.active {\n  background-color: #509ee3;\n  border-color: rgba(169, 137, 197, 0.2);\n}\n.Sqb-SelectTable--box .Sqb-List-item:not(.disabled):hover .List-item-icon,\n.Sqb-SelectTable--box .Sqb-List-item.active .List-item-icon {\n  color: #fff !important;\n}\n.Sqb-SelectTable--box .Sqb-List-item:not(.disabled):hover .List-item-title,\n.Sqb-SelectTable--box .Sqb-List-item.active .List-item-title {\n  color: #fff !important;\n}\n.Sqb-SelectTable--box .Sqb-List-item.disabled .List-item-title {\n  color: #949aab !important;\n}\n.Sqb-SelectTable--box .Sqb-List-search {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n  color: #b8bbc3;\n  background-color: #fff;\n  border: 1px solid #f0f0f0;\n  font-size: 14px;\n}\n.Sqb-SelectTable--box .Sqb-List-search span {\n  line-height: 0;\n}\n.Sqb-SelectTable--box .Sqb-List-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1.12em;\n  font-weight: 600;\n}\n.Sqb-SelectTable--box .Sqb-List-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.Sqb-SelectTable--box .Sqb-List-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n";
+styleInject(css_248z);
+
+const PrevResult$2 = 'Previous results';
+const SelectPermissionTable = ({
+  data: _data = [],
+  value,
+  onChange: _onChange = () => {},
+  didUpdate
+}) => {
+  const [datasource] = useState(_data.slice());
+  useEffect(() => {
+    didUpdate?.();
+  }, [datasource]);
+  return jsx("div", {
+    className: cx(`Sqb-SelectTable--box pb-2 pt-2`),
+    children: jsx("div", {
+      style: {
+        width: 300
+      },
+      children: jsx("div", {
+        style: {
+          width: '100%'
+        },
+        children: Array.isArray(datasource) && datasource.map(v => {
           return jsx("div", {
-            className: cx(`sqb-List-section`),
+            className: cx(`Sqb-List-section`),
             children: jsx("div", {
-              className: cx(`sqb-List-item mx-2`, {
+              className: cx(`Sqb-List-item mx-2`, {
                 active: value.name === v.name
               }),
               onClick: () => {
@@ -3640,21 +4212,22 @@ const SelectTable = ({
                   className: 'List-item-icon',
                   children: jsx(TableIcon, {})
                 }), jsx("div", {
-                  children: jsx("h4", {
+                  children: jsxs("h4", {
                     className: 'List-item-title ml-2',
-                    children: v.name
+                    children: [v.datasourceName ? `${v.datasourceName}.` : '', v.name === 'source' ? PrevResult$2 : v.name]
                   })
                 })]
               })
             })
           }, v.name);
-        })]
+        })
       })
     })
   });
 };
+var SelectPermissionTable$1 = observer(SelectPermissionTable);
 
-const Wrapper$1 = ({
+const Wrapper = ({
   children,
   className
 }) => {
@@ -3667,7 +4240,7 @@ const Wrapper$1 = ({
   async function animation() {
     await sleep(10);
     setOpacity(1);
-    setMaxHeight(couterRef.current.childNodes[0].clientHeight + 16);
+    couterRef.current?.childNodes?.length && setMaxHeight(couterRef.current.childNodes[0].clientHeight + 16);
     await sleep(500);
     setMaxHeight('auto');
   }
@@ -3745,6 +4318,9 @@ const IconTypeMap = new Map([[TypeEnum.filter, {
   name: __('SqlQueryBuilder.joinData'),
   icon: jsx(JoinDataIcon, {}),
   className: 'join-data'
+}], [TypeEnum.permissionTable, {
+  name: __('SqlQueryBuilder.permissionTable'),
+  icon: jsx(PermissionTableIcon, {})
 }], [TypeEnum.customColumn, {
   name: __('SqlQueryBuilder.customColumn'),
   icon: jsx(CustomColumnIcon, {})
@@ -3756,26 +4332,26 @@ const IconTypeMap = new Map([[TypeEnum.filter, {
   icon: jsx(RowLimitIcon, {})
 }]]);
 // 前端展示的icon顺序 随便改不影响逻辑
-const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit];
+const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit];
 // js逻辑顺序 正常顺序
-const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit];
+const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit];
 // js逻辑顺序 聚合下面的顺序是这个样子
-const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize];
+const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize];
 const metaIcon = (size, handleClick) => {
   return ({
     type
   }) => {
     let info = IconTypeMap.get(type);
     return jsx("button", {
-      className: cx(`sqb-button ${info.className || ''}`, {
+      className: cx(`Sqb-button ${info.className || ''}`, {
         small: size === IconSIzeEnum.SMALL,
         large: size === IconSIzeEnum.LARGE
       }),
       onClick: () => handleClick(type),
       children: jsxs("div", {
-        children: [info.icon, size === IconSIzeEnum.LARGE && jsx("div", {
+        children: [info.icon, size === IconSIzeEnum.LARGE ? jsx("div", {
           children: info.name
-        })]
+        }) : '']
       })
     });
   };
@@ -3803,10 +4379,11 @@ const judgeSize = (props, nextLen) => {
   let {
     meta
   } = props;
+  const store = useStore();
   let {
     type
   } = meta;
-  let isLast = props.metaList.indexOf(meta) === props.metaList.length - 1;
+  let isLast = store.metaList.indexOf(meta) === store.metaList.length - 1;
   let size = IconSIzeEnum.SMALL;
   if (isLast) {
     if (type !== TypeEnum.sort) {
@@ -3830,17 +4407,18 @@ const findNextIcon = props => {
   const {
     meta
   } = props;
+  const store = useStore();
   let {
     type
   } = meta;
-  let index = props.metaList.indexOf(meta);
+  let index = store.metaList.indexOf(meta);
   let {
     ExistAboveGroupBy,
     ExistBelowGroupBy,
     prevTypes,
     prevList,
-    prevGroupBy} = getHelper(props.metaList, meta);
-  let nextType = props.metaList[index + 1]?.type || '';
+    prevGroupBy} = getHelper(store.metaList, meta);
+  let nextType = store.metaList[index + 1]?.type || '';
   // @ts-ignore
   let isLast = nextType === '';
   let available = [];
@@ -3973,6 +4551,18 @@ const findNextIcon = props => {
       available = OrderNewType.slice(curNewLocation + 1, OrderNewType.indexOf(nextType));
     }
   }
+  if (type === TypeEnum.permissionTable) {
+    let curNewLocation = OrderNewType.indexOf(type);
+    if (isLast) {
+      if (!ExistAboveGroupBy || !prevGroupBy?.by?.length) {
+        available = OrderType.slice(curLocation + 1);
+      } else {
+        available = OrderNewType.slice(curNewLocation + 1);
+      }
+    } else {
+      available = OrderNewType.slice(curNewLocation + 1, OrderNewType.indexOf(nextType));
+    }
+  }
   return available;
 };
 const sortList = arr => {
@@ -3982,31 +4572,36 @@ const NextDom = props => {
   const {
     meta
   } = props;
+  const store = useStore();
   // @ts-ignore
-  if (!props.metaList[0].table.name) return null;
+  if (!store.metaList[0].table.name) return null;
   let available = findNextIcon(props);
+  if (!store.showPermissionTable) {
+    available = available.filter(v => v !== TypeEnum.permissionTable);
+  }
   let size = judgeSize(props, available.length);
   function handleClick(type) {
-    let index = props.metaList.indexOf(meta);
-    props.addMeta(type, index + 1);
+    let index = store.metaList.indexOf(meta);
+    store.addMeta(type, index + 1);
   }
   const MetaIconDom = metaIcon(size, handleClick);
   return jsx("div", {
-    className: `sqb-item--func`,
+    className: `Sqb-item--func`,
     children: sortList(available).map(v => jsx(MetaIconDom, {
       type: v
     }, v))
   });
 };
+var NextDom$1 = observer(NextDom);
 
 const Header = props => {
   return jsxs("div", {
-    className: `sqb-item--text ${props.className}`,
+    className: `Sqb-item--text ${props.className || ''}`,
     children: [props.title, props.onClose && jsx(Tooltip, {
       placement: 'bottom',
-      title: '\u5220\u9664',
+      title: __('data.del'),
       children: jsx(CloseIcon2, {
-        className: `sqb-item-close`,
+        className: `Sqb-item-close`,
         onClick: props.onClose
       })
     })]
@@ -4015,35 +4610,29 @@ const Header = props => {
 
 const TableData = props => {
   const {
-    meta,
-    fetchColumns,
-    setPopupData,
-    tableData,
-    showMainColumn
+    meta
   } = props;
+  const store = useStore();
   let selected = Boolean(meta.table.name);
   function selectTable(e) {
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
-      content: jsx(SelectTable, {
-        setPopupClosable: props.setPopupClosable,
-        data: tableData,
+      content: jsx(SelectTable$1, {
+        data: store.sourceList,
         value: meta.table,
-        onChange: async data => {
-          if (meta.table !== data) {
-            let newMetaList = props.metaList.slice();
+        onChange: data => {
+          if (meta.table.datasourceId !== data.datasourceId || meta.table.name !== data.name) {
+            let newMetaList = store.metaList.slice()[0];
             let tableName = data.name;
-            // @ts-ignore
-            newMetaList[0].table = data;
-            fetchColumns(tableName, columns => {
-              // @ts-ignore
-              newMetaList[0].columns = columns;
+            newMetaList.table = data;
+            store.fetchColumns(tableName, data.datasourceId, columns => {
+              newMetaList.columns = columns;
               // ① 主表动了 其他都得重新选
-              props.onChangeValue(newMetaList.splice(0, 1));
+              store.setMeta([newMetaList]);
             });
           }
-          setPopupData({
+          store.setPopup({
             visible: false
           });
         }
@@ -4052,80 +4641,51 @@ const TableData = props => {
   }
   function selectColumns(e) {
     let columns = meta.columns;
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget || e.target,
       content: jsx(SelectColumn, {
-        setPopupClosable: props.setPopupClosable,
         data: columns,
         onChange: data => {
-          let newMetaList = props.metaList.slice();
+          let newMetaList = store.metaList.slice();
           // @ts-ignore
           newMetaList[0].columns = data;
-          props.onChangeValue(newMetaList);
+          store.setMeta(newMetaList);
         }
       })
     });
   }
-  return jsx(Wrapper$1, {
-    className: `sqb-item`,
+  return jsx(Wrapper, {
+    className: `Sqb-item`,
     children: jsxs("div", {
-      className: `sqb-hover-parent`,
+      className: `Sqb-hover-parent`,
       children: [jsx(Header, {
         title: __('SqlQueryBuilder.data')
       }), jsx("div", {
-        className: `sqb-item--content`,
+        className: `Sqb-item--content`,
         children: jsxs("div", {
-          className: `sqb-NotebookCell`,
+          className: `Sqb-NotebookCell`,
           children: [jsx("div", {
-            className: cx(`sqb-TableName`, {
+            className: cx(`Sqb-TableName`, {
               notSelected: !selected
             }),
             onClick: selectTable,
-            children: selected ? meta.table.name : __('SqlQueryBuilder.pickTable')
-          }), selected && showMainColumn && jsx("div", {
-            className: `sqb-TableColumns`,
+            children: selected ? `${meta.table.datasourceName}.${meta.table.name}` : __('SqlQueryBuilder.pickTable')
+          }), selected && store.showMainColumn && jsx("div", {
+            className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
           })]
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   });
 };
+var TableData$1 = observer(TableData);
 
-const Wrapper = ({
-  children,
-  className
-}) => {
-  const [opacity, setOpacity] = useState(0);
-  const [maxHeight, setMaxHeight] = useState(0);
-  const couterRef = useRef();
-  useEffect(() => {
-    animation();
-  }, []);
-  async function animation() {
-    await sleep(10);
-    setOpacity(1);
-    setMaxHeight(couterRef.current.childNodes[0].clientHeight + 16);
-    await sleep(500);
-    setMaxHeight('auto');
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: className,
-    ref: couterRef,
-    style: {
-      transition: 'all .3s ease 0s',
-      opacity,
-      height: maxHeight,
-      overflow: 'hidden'
-    }
-  }, children);
-};
-
-const PrevResult = 'Previous results';
+const PrevResult$1 = 'Previous results';
 var FlagLocation;
 (function (FlagLocation) {
   FlagLocation["TABLE_1"] = "table1";
@@ -4133,31 +4693,27 @@ var FlagLocation;
 })(FlagLocation || (FlagLocation = {}));
 const JoinData = props => {
   const {
-    meta,
-    fetchColumns,
-    setPopupData,
-    tableData,
-    metaList
+    meta
   } = props;
+  const store = useStore();
   let {
     metaKey
   } = meta;
-  let index = findIndex(metaList, meta);
+  let index = findIndex(store.metaList, meta);
   let table1Selected = Boolean(meta.table1.name);
   let table2Selected = Boolean(meta.table2.name);
   let columnsSelected = meta.table1.column && meta.table2.column;
   function selectColumns(e) {
     let columns = meta.columns;
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
       content: jsx(SelectColumn, {
-        setPopupClosable: props.setPopupClosable,
         data: columns,
         onChange: data => {
-          let newMetaList = metaList.slice();
+          let newMetaList = store.metaList.slice();
           newMetaList[index].columns = data;
-          props.onChangeValue(newMetaList);
+          store.setMeta(newMetaList);
         }
       })
     });
@@ -4165,23 +4721,29 @@ const JoinData = props => {
   function selectTable(e) {
     let value = {
       name: meta.table2.name,
-      alias: meta.table2.alias
+      alias: meta.table2.alias,
+      datasourceId: meta.table2.datasourceId,
+      datasourceName: meta.table2.datasourceName
     };
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
-      content: jsx(SelectTable, {
-        setPopupClosable: props.setPopupClosable,
-        data: tableData,
+      content: jsx(SelectTable$1, {
+        data: store.sourceList,
         value: value,
-        onChange: async data => {
+        onChange: data => {
           let tableName = data.name;
-          if (meta.table2.name !== tableName) {
-            let newMeta = metaList.slice();
+          if (meta.table2.name !== tableName || meta.table2.datasourceId !== data.datasourceId) {
+            let newMeta = store.metaList.slice();
+            /**
+             * ExistAboveGroupBy: boolean; // 当前元素上面是否存在 聚合
+             * prevList: MetaListType[]; // 同 prevTypes 但是放的是 meta[]
+             * prevTypes: TypeEnum[]; // 当前元素和上面最近的聚合 中间的types列表
+             */
             let {
               ExistAboveGroupBy,
               prevList
-            } = getHelper(metaList, meta);
+            } = getHelper(store.metaList, meta);
             let alias = tableName;
             let joins = [];
             let mainTable = newMeta[0];
@@ -4204,16 +4766,18 @@ const JoinData = props => {
             newMeta[index].table2 = {
               name: tableName,
               alias,
-              column: ''
+              column: '',
+              datasourceId: data.datasourceId,
+              datasourceName: data.datasourceName
             };
-            fetchColumns?.(tableName, columns => {
+            store.fetchColumns(tableName, data.datasourceId, columns => {
               newMeta[index].columns = columns;
               // 关联表变了 下面模块全部删除
               newMeta = newMeta.filter((v, i) => i <= index);
-              props.onChangeValue(newMeta);
+              store.setMeta(newMeta);
             });
           }
-          setPopupData({
+          store.setPopup({
             visible: false
           });
         }
@@ -4221,18 +4785,17 @@ const JoinData = props => {
     });
   }
   function selectJoin(e) {
-    let newMeta = props.metaList.slice();
-    setPopupData({
+    let newMeta = store.metaList.slice();
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
       content: jsx(SelectJoin, {
-        setPopupClosable: props.setPopupClosable,
         value: newMeta[index].joinType,
         onChange: type => {
-          let newMeta = props.metaList.slice();
+          let newMeta = store.metaList.slice();
           newMeta[index].joinType = type;
-          props.onChangeValue(newMeta);
-          setPopupData({
+          store.setMeta(newMeta);
+          store.setPopup({
             visible: false
           });
         }
@@ -4253,12 +4816,14 @@ const JoinData = props => {
       ExistAboveGroupBy,
       prevList,
       prevGroupBy
-    } = getHelper(props.metaList, meta);
+    } = getHelper(store.metaList, meta);
     if (type === FlagLocation.TABLE_1) {
       if (ExistAboveGroupBy) {
         let _data = {
           table: prevGroupBy.alias,
           alias: prevGroupBy.alias,
+          datasourceId: '',
+          datasourceName: '',
           columns: []
         };
         if (prevGroupBy?.group?.length) {
@@ -4284,53 +4849,53 @@ const JoinData = props => {
           }));
         }
         data = [_data];
-        let joinData = prevList.filter(v => v.type === TypeEnum.joinData)
-        // @ts-ignore
-        .filter(v => v && v.table2.name);
+        let joinData = prevList.filter(v => v.type === TypeEnum.joinData).filter(v => v && v.table2.name);
         if (joinData.length) {
-          data = data.concat(
-          // @ts-ignore
-          joinData.map(v => {
+          data = data.concat(joinData.map(v => {
             return {
               alias: v.table2.alias,
               table: v.table2.name,
+              datasourceId: v.table2.datasourceId,
+              datasourceName: v.table2.datasourceName,
               columns: v.columns
             };
           }));
         }
       } else {
-        data = props.metaList.slice(0, index).map(v => {
+        data = store.metaList.slice(0, index).reduce((mo, v) => {
           if (v.type === TypeEnum.data) {
-            return {
+            mo.push({
               alias: v.table.alias,
               table: v.table.name,
-              columns: v.columns
-            };
+              columns: v.columns,
+              datasourceId: v.table.datasourceId,
+              datasourceName: v.table.datasourceName
+            });
           } else if (v.type === TypeEnum.joinData) {
-            return {
+            mo.push({
               alias: v.table2.alias,
               table: v.table2.name,
-              columns: v.columns
-            };
-          } else {
-            return {
-              table: null
-            };
+              columns: v.columns,
+              datasourceId: v.table2.datasourceId,
+              datasourceName: v.table2.datasourceName
+            });
           }
-        }).filter(v => v.table);
+          return mo;
+        }, []);
       }
     } else {
       data = [{
         alias: meta.table2.alias,
         table: meta.table2.name,
+        datasourceId: meta.table2.datasourceId,
+        datasourceName: meta.table2.datasourceName,
         columns: meta.columns
       }];
     }
-    setPopupData({
+    store.setPopup({
       visible: true,
       node,
-      content: jsx(SelectJoinColumn, {
-        setPopupClosable: props.setPopupClosable,
+      content: jsx(SelectJoinColumn$1, {
         data: data,
         value: value,
         theme: ColumnsPopupThemeEnum.skyBlue,
@@ -4339,21 +4904,25 @@ const JoinData = props => {
             table,
             alias,
             name,
-            sql
+            sql,
+            datasourceId,
+            datasourceName
           } = record;
-          let newMeta = props.metaList.slice();
+          let newMeta = store.metaList.slice();
           newMeta[index][type].column = name;
           if (type === FlagLocation.TABLE_1) {
             if (newMeta[index][type].alias !== alias) {
               newMeta[index][type].alias = alias;
               newMeta[index][type].name = table;
-              if (alias === SummarizeAlias$1) {
+              newMeta[index][type].datasourceId = datasourceId;
+              newMeta[index][type].datasourceName = datasourceName;
+              if (alias === SummarizeAlias) {
                 newMeta[index][type].groupSql = sql?.split(' AS ')?.[1] || '';
               }
             }
           }
-          props.onChangeValue(newMeta);
-          setPopupData({
+          store.setMeta(newMeta);
+          store.setPopup({
             visible: false
           });
         }
@@ -4361,19 +4930,19 @@ const JoinData = props => {
     });
   }
   return jsx(Wrapper, {
-    className: cx(`sqb-item`),
+    className: cx(`Sqb-item`),
     children: jsxs("div", {
-      className: cx(`sqb-hover-parent`),
+      className: cx(`Sqb-hover-parent`),
       children: [jsx(Header, {
         title: __('SqlQueryBuilder.joinData'),
-        onClose: () => props.delMeta(meta)
+        onClose: () => store.delMeta(meta)
       }), jsx("div", {
-        className: cx(`sqb-item--content`),
+        className: cx(`Sqb-item--content`),
         children: jsxs("div", {
-          className: cx(`sqb-NotebookCell`),
+          className: cx(`Sqb-NotebookCell`),
           children: [jsx("div", {
-            className: cx(`sqb-TableName noClick`),
-            children: !table1Selected || meta.table1.name === SummarizeAlias$1 ? PrevResult : meta.table1.name
+            className: cx(`Sqb-TableName noClick`),
+            children: !table1Selected || meta.table1.name === SummarizeAlias ? PrevResult$1 : `${meta.table1.datasourceName}.${meta.table1.name}`
           }), jsx("div", {
             onClick: selectJoin,
             children: meta.joinType === JoinEnum.left ? jsx(LeftJoinIcon, {
@@ -4394,18 +4963,18 @@ const JoinData = props => {
               }
             })
           }), jsx("div", {
-            className: cx(`sqb-TableName`, {
+            className: cx(`Sqb-TableName`, {
               notSelected: !table2Selected
             }),
             onClick: selectTable,
-            children: table2Selected ? meta.table2.name : __('SqlQueryBuilder.pickTable')
+            children: table2Selected ? `${meta.table2.datasourceName}.${meta.table2.name}` : __('SqlQueryBuilder.pickTable')
           }), table2Selected && jsxs("div", {
-            className: cx(`sqb-where`),
+            className: cx(`Sqb-where`),
             children: [jsx("span", {
               className: 'ml-2 mr-4 text-gray-500',
               children: "on"
             }), jsx("div", {
-              className: cx(`sqb-TableName`, {
+              className: cx(`Sqb-TableName`, {
                 notSelected: !meta.table1.column
               }),
               "v-data": FlagLocation.TABLE_1,
@@ -4415,7 +4984,7 @@ const JoinData = props => {
               className: 'mr-2 text-gray-500',
               children: "="
             }), jsx("div", {
-              className: cx(`sqb-TableName`, {
+              className: cx(`Sqb-TableName`, {
                 notSelected: !meta.table2.column
               }),
               "v-data": FlagLocation.TABLE_2,
@@ -4423,35 +4992,35 @@ const JoinData = props => {
               children: meta.table2.column ? meta.table2.column : __('SqlQueryBuilder.pickTable')
             })]
           }), columnsSelected && jsx("div", {
-            className: `sqb-TableColumns`,
+            className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
           })]
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   }, metaKey);
 };
+var JoinData$1 = observer(JoinData);
 
 const CustomColumn = props => {
   const {
-    meta,
-    popupData,
-    setPopupData
+    meta
   } = props;
+  const store = useStore();
   let {
     customColumn
   } = meta;
-  let index = findIndex(props.metaList, meta);
+  let index = findIndex(store.metaList, meta);
   function getAvailableColumns() {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let columns = [];
     let {
       ExistAboveGroupBy,
       prevList
-    } = getHelper(props.metaList, meta);
+    } = getHelper(store.metaList, meta);
     // TIPS metabase 将自定义列也放进去了 但是他们拼sql的时候又没有实现 这里我们也暂时不加进来
     // TIPS metabase 将聚合的参数也弄进来了
     if (ExistAboveGroupBy) {
@@ -4463,7 +5032,7 @@ const CustomColumn = props => {
       }))));
     } else {
       let mainTable = newMeta[0];
-      columns = flatArray(props.metaList.slice(0, index).filter(v => v.type === TypeEnum.joinData).map(v => v.columns.map(o => ({
+      columns = flatArray(store.metaList.slice(0, index).filter(v => v.type === TypeEnum.joinData).map(v => v.columns.map(o => ({
         ...o,
         name: `${v.table2.alias} -> ${o.name}`
       }))));
@@ -4480,15 +5049,13 @@ const CustomColumn = props => {
     const node = e.currentTarget;
     closePopup();
     await sleep(100);
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let value = customColumn[i];
     let columns = getAvailableColumns();
-    setPopupData({
+    store.setPopup({
       visible: true,
       node,
-      content: jsx(CustomColumn$1, {
-        popupClosable: props.popupClosable,
-        setPopupClosable: props.setPopupClosable,
+      content: jsx(CustomColumn$2, {
         data: columns,
         value: value,
         onChange: data => {
@@ -4497,7 +5064,7 @@ const CustomColumn = props => {
           // if(data.name !== value.name){
           //   newMeta = newMeta.filter((v: MetaListType, _i: number)=> _i<=index)
           // }
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         },
         onClose: closePopup
@@ -4505,19 +5072,17 @@ const CustomColumn = props => {
     });
   }
   function handleAdd(e) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let columns = getAvailableColumns();
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
-      content: jsx(CustomColumn$1, {
-        popupClosable: props.popupClosable,
-        setPopupClosable: props.setPopupClosable,
+      content: jsx(CustomColumn$2, {
         data: columns,
         value: null,
         onChange: data => {
           newMeta[index].customColumn.push(data);
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         },
         onClose: closePopup
@@ -4527,34 +5092,34 @@ const CustomColumn = props => {
   function handleDel(e, itemId) {
     e.stopPropagation();
     closePopup();
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     // TIPS 删除了后面都得删除 暂时不删除 因为过滤器和组合都没用到自定义列
     newMeta[index].customColumn = customColumn.filter((_, i) => i !== itemId);
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
   function closePopup() {
-    popupData.visible && setPopupData({
+    store.popupData.visible && store.setPopup({
       visible: false
     });
   }
   return jsx(Wrapper, {
-    className: `sqb-item`,
+    className: `Sqb-item`,
     children: jsxs("div", {
-      className: `sqb-hover-parent`,
+      className: `Sqb-hover-parent`,
       children: [jsx(Header, {
         className: 'gray-text',
         title: __('SqlQueryBuilder.customColumn'),
         onClose: () => {
           closePopup();
-          props.delMeta(meta);
+          store.delMeta(meta);
         }
       }), jsx("div", {
-        className: `sqb-item--content`,
+        className: `Sqb-item--content`,
         children: jsxs("div", {
-          className: `sqb-NotebookCell gray-bg`,
+          className: `Sqb-NotebookCell gray-bg`,
           children: [meta.customColumn.map((v, i) => {
             return jsxs("div", {
-              className: `sqb-TableName gray-name`,
+              className: `Sqb-TableName gray-name`,
               onClick: e => handleUpdate(e, i),
               children: [v.name, jsx("span", {
                 style: {
@@ -4565,35 +5130,35 @@ const CustomColumn = props => {
               })]
             }, i);
           }), jsx("div", {
-            className: `sqb-TableName gray-name`,
+            className: `Sqb-TableName gray-name`,
             onClick: handleAdd,
             children: jsx(AddIcon, {})
           })]
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   });
 };
+var CustomColumn$1 = observer(CustomColumn);
 
 const Filter = props => {
   const {
-    meta,
-    popupData,
-    setPopupData
+    meta
   } = props;
+  const store = useStore();
   let {
     filter
   } = meta;
-  let index = findIndex(props.metaList, meta);
+  let index = findIndex(store.metaList, meta);
   let notSelected = !meta.filter.length;
   function getColumns() {
     let {
       ExistAboveGroupBy,
       prevList,
       prevGroupBy
-    } = getHelper(props.metaList, meta);
+    } = getHelper(store.metaList, meta);
     let data;
     if (ExistAboveGroupBy) {
       let _data = {
@@ -4642,7 +5207,7 @@ const Filter = props => {
       }
     } else {
       // @ts-ignore
-      data = props.metaList.slice(0, index).map(v => {
+      data = store.metaList.slice(0, index).map(v => {
         if (v.type === TypeEnum.data) {
           return {
             alias: v.table.alias,
@@ -4665,25 +5230,24 @@ const Filter = props => {
     return data;
   }
   function handleUpdate(e, i) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let data = getColumns();
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
       content: jsx(SelectFilter, {
-        setPopupClosable: props.setPopupClosable,
         data: data,
         value: filter[i],
         onChange: data => {
           newMeta[index].filter.splice(i, 1, data);
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         }
       })
     });
   }
   function handleAdd(e) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let data = getColumns();
     let value = {
       table: '',
@@ -4700,16 +5264,15 @@ const Filter = props => {
       // 选择结果 如果有两个 长度就为2
       quotes: '' // 前端显示用户看的文字
     };
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
       content: jsx(SelectFilter, {
-        setPopupClosable: props.setPopupClosable,
         data: data,
         value: value,
         onChange: data => {
           newMeta[index].filter.push(data);
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         }
       })
@@ -4718,34 +5281,34 @@ const Filter = props => {
   function handleDel(e, itemId) {
     e.stopPropagation();
     closePopup();
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     // @ts-ignore
     newMeta[index].filter = filter.filter((_, i) => i !== itemId);
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
   function closePopup() {
-    popupData.visible && setPopupData({
+    store.popupData.visible && store.setPopup({
       visible: false
     });
   }
-  return jsx(Wrapper$1, {
-    className: `sqb-item`,
+  return jsx(Wrapper, {
+    className: `Sqb-item`,
     children: jsxs("div", {
-      className: `sqb-hover-parent`,
+      className: `Sqb-hover-parent`,
       children: [jsx(Header, {
         className: 'purple-text',
         title: __('SqlQueryBuilder.filter'),
         onClose: () => {
           closePopup();
-          props.delMeta(meta);
+          store.delMeta(meta);
         }
       }), jsx("div", {
-        className: `sqb-item--content`,
+        className: `Sqb-item--content`,
         children: jsxs("div", {
-          className: `sqb-NotebookCell gray-bg`,
+          className: `Sqb-NotebookCell gray-bg`,
           children: [filter.map((v, i) => {
             return jsxs("div", {
-              className: `sqb-TableName purple-name`,
+              className: `Sqb-TableName purple-name`,
               onClick: e => handleUpdate(e, i),
               children: [v.quotes, jsx("span", {
                 style: {
@@ -4756,37 +5319,37 @@ const Filter = props => {
               })]
             }, i);
           }), jsx("div", {
-            className: cx(`sqb-TableName purple-name`, {
+            className: cx(`Sqb-TableName purple-name`, {
               notSelected
             }),
             onClick: handleAdd,
-            children: notSelected ? '添加筛选条件来缩小你的答案范围' : jsx(AddIcon, {})
+            children: notSelected ? __('filter.addFiltersToNarrowDownYourAnswers') : jsx(AddIcon, {})
           })]
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   });
 };
+var Filter$1 = observer(Filter);
 
 const GroupBy = props => {
   const {
-    meta,
-    popupData,
-    setPopupData
+    meta
   } = props;
+  const store = useStore();
   let {
     by
   } = meta;
-  let index = findIndex(props.metaList, meta);
+  let index = findIndex(store.metaList, meta);
   let notBySelected = !meta.by.length;
   function getColumns() {
     let {
       ExistAboveGroupBy,
       prevList,
       prevGroupBy
-    } = getHelper(props.metaList, meta);
+    } = getHelper(store.metaList, meta);
     let data;
     if (ExistAboveGroupBy) {
       let _data = {
@@ -4798,6 +5361,7 @@ const GroupBy = props => {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
             name: v.quotes,
+            realName: v.sql?.split(' AS ')?.[1] || '',
             name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
@@ -4809,6 +5373,7 @@ const GroupBy = props => {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
             name: v.quotes,
+            realName: v.sql?.split(' AS ')?.[1] || '',
             name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
@@ -4833,7 +5398,7 @@ const GroupBy = props => {
       }
     } else {
       // @ts-ignore
-      data = props.metaList.slice(0, index).map(v => {
+      data = store.metaList.slice(0, index).map(v => {
         if (v.type === TypeEnum.data) {
           return {
             alias: v.table.alias,
@@ -4856,14 +5421,13 @@ const GroupBy = props => {
     return data;
   }
   function handleUpdate(e, i) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let data = getColumns();
     let value = by[i];
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
-      content: jsx(SelectJoinColumn, {
-        setPopupClosable: props.setPopupClosable,
+      content: jsx(SelectJoinColumn$1, {
         data: data,
         value: value,
         theme: ColumnsPopupThemeEnum.greenGrass,
@@ -4876,20 +5440,20 @@ const GroupBy = props => {
           newMeta[index].by = newMeta[index].by.map(v => {
             return {
               ...v,
-              sql: `${v.alias}.${v.name} AS ${v.alias}__${v.name}`
+              sql: `${v.alias}.${v.realName || v.name} AS ${v.alias}__${v.name}`
             };
           });
           if (value.quotes !== data.quotes) {
             newMeta = newMeta.filter((_, _i) => _i <= index);
           }
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         }
       })
     });
   }
   function handleAdd(e) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let data = getColumns();
     let value = {
       table: '',
@@ -4900,11 +5464,10 @@ const GroupBy = props => {
       condition: '',
       quotes: ''
     };
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
-      content: jsx(SelectJoinColumn, {
-        setPopupClosable: props.setPopupClosable,
+      content: jsx(SelectJoinColumn$1, {
         data: data,
         value: value,
         theme: ColumnsPopupThemeEnum.greenGrass,
@@ -4917,10 +5480,10 @@ const GroupBy = props => {
           newMeta[index].by = newMeta[index].by.map(v => {
             return {
               ...v,
-              sql: `${v.alias}.${v.name} AS ${v.alias}__${v.name}`
+              sql: `${v.alias}.${v.realName || v.name} AS ${v.alias}__${v.name}`
             };
           });
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         }
       })
@@ -4929,21 +5492,21 @@ const GroupBy = props => {
   function handleDel(e, itemId) {
     e.stopPropagation();
     closePopup();
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     // @ts-ignore
     newMeta[index].by = by.filter((_, i) => i !== itemId);
     newMeta = newMeta.filter((_, _i) => _i <= index);
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
   function closePopup() {
-    popupData.visible && setPopupData({
+    store.popupData.visible && store.setPopup({
       visible: false
     });
   }
   return jsxs(Fragment, {
     children: [meta.by.map((v, i) => {
       return jsxs("div", {
-        className: `sqb-TableName green-name`,
+        className: `Sqb-TableName green-name`,
         onClick: e => handleUpdate(e, i),
         children: [v.quotes, jsx("span", {
           style: {
@@ -4954,29 +5517,145 @@ const GroupBy = props => {
         })]
       }, i);
     }), jsx("div", {
-      className: cx(`sqb-TableName green-name`, {
+      className: cx(`Sqb-TableName green-name`, {
         notSelected: notBySelected
       }),
       onClick: handleAdd,
-      children: notBySelected ? '选择分组的列' : jsx(AddIcon, {})
+      children: notBySelected ? __('summarize.selectTheColumnsForGrouping') : jsx(AddIcon, {})
     })]
   });
 };
+var GroupBy$1 = observer(GroupBy);
 
-[SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
+const NUMBER_GROUP = [SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
 [SQL_COLUMN_TYPE.STRING];
-[SQL_COLUMN_TYPE.DATE];
+const DATE_GROUP = [SQL_COLUMN_TYPE.DATE];
+// 过滤器对象转sql语句
+const filterToSql = record => {
+  let {
+    alias,
+    name,
+    condition,
+    val,
+    groupSql,
+    database_type
+  } = record;
+  let [condition_1, condition_2] = val;
+  let columnName;
+  if (alias === SummarizeAlias) {
+    columnName = `${alias}.${groupSql?.split(' AS ')?.[1] || ''}`;
+  } else {
+    columnName = `${alias}.${name}`;
+  }
+  let sql = '';
+  let group = SQL_GROUP_TYPE.STRING;
+  if (~NUMBER_GROUP.indexOf(database_type)) {
+    group = SQL_GROUP_TYPE.NUMBER;
+  }
+  if (~DATE_GROUP.indexOf(database_type)) {
+    group = SQL_GROUP_TYPE.DATE;
+  }
+  if (group === SQL_GROUP_TYPE.STRING) {
+    switch (condition) {
+      // string
+      case '是':
+        sql = `${columnName} = '${condition_1}'`;
+        break;
+      case '不是':
+        sql = `${columnName} <> '${condition_1}'`;
+        break;
+      case '包含':
+        sql = `(${columnName} like '%${condition_1}%')`;
+        break;
+      case '不包含':
+        sql = `(NOT ${columnName} like '%${condition_1}%')`;
+        break;
+      case '为空':
+        sql = `${columnName} IS NULL`;
+        break;
+      case '不为空':
+        sql = `${columnName} IS NOT NULL`;
+        break;
+      case '以...开始':
+        sql = `(${columnName} like '${condition_1}%')`;
+        break;
+      case '以...结束':
+        sql = `(${columnName} like '%${condition_1}')`;
+        break;
+    }
+  }
+  if (group === SQL_GROUP_TYPE.NUMBER) {
+    switch (condition) {
+      // number
+      case '等于':
+        sql = `${columnName} = ${condition_1}`;
+        break;
+      case '不等于':
+        sql = `${columnName} <> ${condition_1}`;
+        break;
+      case '大于':
+        sql = `${columnName} > ${condition_1}`;
+        break;
+      case '小于':
+        sql = `${columnName} < ${condition_1}`;
+        break;
+      case '介于之间':
+        sql = `${columnName} BETWEEN ${condition_1} AND ${condition_2}`;
+        break;
+      case '大于或等于':
+        sql = `${columnName} >= ${condition_1}`;
+        break;
+      case '小于或等于':
+        sql = `${columnName} <= ${condition_1}`;
+        break;
+      case '为空':
+        sql = `${columnName} IS NULL`;
+        break;
+      case '不为空':
+        sql = `${columnName} IS NOT NULL`;
+        break;
+    }
+  }
+  if (group === SQL_GROUP_TYPE.DATE) {
+    function transformDate(dataStr) {
+      return dataStr.replace(/-/g, '').replace(/:/g, '').replace(' ', '') + '00';
+    }
+    let c_1 = transformDate(condition_1 || '');
+    let c_2 = transformDate(condition_2 || '');
+    switch (condition) {
+      // date
+      case '早于':
+        sql = `${columnName} < '${c_1}'`;
+        break;
+      case '晚于':
+        sql = `${columnName} >= '${c_1}'`;
+        break;
+      case '介于之间':
+        sql = `(${columnName} >= '${c_1}' AND ${columnName} < '${c_2}')`;
+        break;
+      case '是空的':
+        sql = `${columnName} IS NULL`;
+        break;
+      case '不是空的':
+        sql = `${columnName} IS NOT NULL`;
+        break;
+    }
+  }
+  return sql;
+};
 // 聚合转sql语句
 const summarizeToSql = (arr, record) => {
   let {
     condition,
     alias,
-    name
+    name,
+    realName = ''
   } = record;
   let index = arr.indexOf(record);
   let prevList = arr.slice(0, index);
   let sql = '';
   let as = '';
+  let field = `${alias}.${realName || name}`;
   switch (condition) {
     case '总行数':
     case '累积行数':
@@ -4984,28 +5663,28 @@ const summarizeToSql = (arr, record) => {
       as = 'count';
       break;
     case '不重复值的总数':
-      sql = `count(distinct ${alias}.${name})`;
+      sql = `count(distinct ${field})`;
       as = 'count';
       break;
     case '累积求和':
     case '总和':
-      sql = `sum(${alias}.${name})`;
+      sql = `sum(${field})`;
       as = 'sum';
       break;
     case '平均值':
-      sql = `avg(${alias}.${name})`;
+      sql = `avg(${field})`;
       as = 'avg';
       break;
     case '标准差':
-      sql = `stddev_pop(${alias}.${name})`;
+      sql = `stddev_pop(${field})`;
       as = 'stddev';
       break;
     case '最小值':
-      sql = `min(${alias}.${name})`;
+      sql = `min(${field})`;
       as = 'min';
       break;
     case '最大值':
-      sql = `max(${alias}.${name})`;
+      sql = `max(${field})`;
       as = 'max';
       break;
   }
@@ -5032,24 +5711,254 @@ const summarizeToSql = (arr, record) => {
   });
   return sql + ' AS ' + as + (count ? '_' + (count + 1) : '');
 };
+const _flatArr = (data, arr) => {
+  let {
+    children,
+    ...res
+  } = data;
+  arr.push(res);
+  if (children) {
+    _flatArr(children, arr);
+  }
+};
+const _recursionArr = arr => {
+  let obj = {
+    ...arr[0]
+  };
+  if (arr.length > 1) {
+    obj.children = _recursionArr(arr.slice(1));
+  }
+  return obj;
+};
+// 反转顺序 - （将原本嵌套的顺序完全反转 最内层变成最外层）别问为什么 问就是接口需要
+const reverseData = data => {
+  let arr = [];
+  _flatArr(data, arr);
+  return _recursionArr(arr.reverse());
+};
+// 分层 - （将原本平铺的格式转成 嵌套的格式）
+const layeredData = list => {
+  let res = {};
+  for (var i = 0; i < list.length; i++) {
+    let meta = list[i];
+    // @ts-ignore
+    if (meta.type === TypeEnum.joinData) {
+      if (res[meta.type]) {
+        res[meta.type].push(meta);
+      } else {
+        res[meta.type] = [meta];
+      }
+    } else {
+      // @ts-ignore
+      res[meta.type] = meta;
+    }
+    if (meta.type === TypeEnum.summarize) {
+      let nextMeta = list[i + 1];
+      let nextNextMeta = list[i + 2];
+      let nextNextNextMeta = list[i + 3];
+      // 将sort 和 rowLimit 归到上一层 （虽然他们两在 summarize 后面）
+      // 处理完 sort 和 rowLimit 之后 如果数组后面还有元素则进入下一层循环
+      if (nextMeta) {
+        if (nextMeta.type === TypeEnum.rowLimit) {
+          res[nextMeta.type] = nextMeta;
+          if (nextNextMeta) {
+            res.children = layeredData(list.slice(i + 2));
+          }
+        } else if (nextMeta.type === TypeEnum.sort) {
+          res[nextMeta.type] = nextMeta;
+          if (nextNextMeta) {
+            if (nextNextMeta.type === TypeEnum.rowLimit) {
+              res[nextNextMeta.type] = nextNextMeta;
+              if (nextNextNextMeta) {
+                res.children = layeredData(list.slice(i + 3));
+              }
+            } else {
+              res.children = layeredData(list.slice(i + 2));
+            }
+          }
+        } else {
+          res.children = layeredData(list.slice(i + 1));
+        }
+      }
+      break;
+    }
+  }
+  return res;
+};
+// 处理数据格式 - (这里才是真正处理成后端需要的格式 前面两步都是准备工作)
+const handleNesting = data => {
+  let hasInnerSql = Boolean(data.children);
+  let obj = {
+    hasInnerSql,
+    innerSqlStruct: hasInnerSql ? handleNesting(data.children) : null
+  };
+  let tableData = data[TypeEnum.data];
+  let joinData = data[TypeEnum.joinData] || [];
+  let permissionTable = data[TypeEnum.permissionTable];
+  let customColumn = data[TypeEnum.customColumn];
+  let filterData = data[TypeEnum.filter];
+  let summarize = data[TypeEnum.summarize];
+  let sortData = data[TypeEnum.sort];
+  let rowLimit = data[TypeEnum.rowLimit];
+  if (tableData) {
+    obj.alias = tableData.table.alias;
+    obj.tableName = tableData.table.name;
+    obj.datasourceId = tableData.table.datasourceId;
+    if (!summarize || !summarize.group.length && !summarize.by.length) {
+      obj.queryColumns = tableData.columns.filter(v => v.select).map(v => `${tableData?.table?.alias}.${v.name}`);
+    }
+  } else {
+    if (!summarize || !summarize.group.length && !summarize.by.length) {
+      obj.alias = SummarizeAlias;
+    }
+  }
+  if (joinData.length) {
+    obj.joinTables = joinData.filter(v => v.table2.name).map(v => {
+      let joinCondition;
+      if (v.table1.alias === SummarizeAlias) {
+        joinCondition = `ON ${SummarizeAlias}.${v.table1.groupSql} = ${v.table2.alias}.${v.table2.column}`;
+      } else {
+        joinCondition = `ON ${v.table1.alias}.${v.table1.column} = ${v.table2.alias}.${v.table2.column}`;
+      }
+      return {
+        alias: v.table2.alias,
+        tableName: v.table2.name,
+        datasourceId: v.table2.datasourceId || '',
+        joinCondition,
+        joinType: v.joinType,
+        queryColumns: v.columns.filter(o => o.select).map(o => `${v.table2.alias}.${o.name}`)
+      };
+    });
+  }
+  if (customColumn && customColumn.customColumn.length) {
+    obj.customColumns = customColumn.customColumn.map(v => {
+      return {
+        alias: v.name,
+        formula: v.formula.replace(/\[.*?\]/g, column => {
+          let str = column.substr(1, column.length - 2);
+          if (~str.indexOf('->')) {
+            let _str = str.replace(/ /g, '').split('->');
+            return `${_str[0]}.${_str[1]}`;
+          }
+          return str;
+        })
+      };
+    });
+  }
+  if (filterData && filterData.filter.length) {
+    obj.filters = 'WHERE ' + filterData.filter.map(v => filterToSql(v)).join(' AND ');
+    if (permissionTable) {
+      obj.filters += ` @{_DATA_I_PRIV_COND:${permissionTable.table.alias}}`;
+    }
+  }
+  if (summarize && (summarize.group.length || summarize.by.length)) {
+    obj.groupBy = {
+      calcColumns: [],
+      groupColumns: []
+    };
+    let queryColumns = [];
+    if (summarize.group.length) {
+      obj.groupBy.calcColumns = summarize.group.map(v => {
+        return v.sql;
+      });
+      queryColumns = [...obj.groupBy.calcColumns];
+    }
+    if (summarize.by.length) {
+      obj.groupBy.groupColumns = summarize.by.map(v => {
+        queryColumns.push(`${v.sql}`);
+        return `${v.alias}.${v.realName || v.name}`;
+      });
+    }
+    obj.queryColumns = queryColumns;
+    if (!tableData) {
+      obj.alias = summarize.alias;
+    }
+  }
+  if (sortData && sortData.sort.length) {
+    obj.orderInfos = `ORDER BY ${sortData.sort.map(v => `${v.sql} ${v.sort}`).join(', ')}`;
+  }
+  if (rowLimit) {
+    obj.limit = Number(rowLimit.limit);
+  }
+  if (permissionTable) {
+    obj.privilegeTable = `@{_DATA_I_PRIV_COND:${permissionTable.table.alias}}`;
+  }
+  return obj;
+};
+const handleSqlStruct = list => handleNesting(reverseData(layeredData(list)));
+// 压缩结构
+const compressionStructure = data => {
+  let _data = JSON.parse(JSON.stringify(data)).map(v => {
+    let {
+      metaKey,
+      ...record
+    } = v;
+    if (record.type === TypeEnum.data || record.type === TypeEnum.joinData) {
+      return {
+        ...record,
+        columns: record.columns.map(o => {
+          return {
+            d: o.database_type,
+            n: o.name,
+            s: o.select,
+            c: o.name_zh
+          };
+        })
+      };
+    } else {
+      return record;
+    }
+  });
+  return JSON.stringify(_data);
+};
+const restoreStructure = data => {
+  try {
+    let _data = JSON.parse(data);
+    let list = _data.map((v, i) => {
+      let metaKey = i + 1;
+      if (v.type === TypeEnum.data || v.type === TypeEnum.joinData) {
+        return {
+          metaKey,
+          ...v,
+          columns: v.columns.map(o => {
+            return {
+              database_type: o.d,
+              name: o.n,
+              select: o.s,
+              special_type: '',
+              name_zh: o.c
+            };
+          })
+        };
+      } else {
+        return {
+          metaKey,
+          ...v
+        };
+      }
+    });
+    return list;
+  } catch (e) {
+    return [];
+  }
+};
 
 const SelectIndex = props => {
   const {
-    meta,
-    popupData,
-    setPopupData
+    meta
   } = props;
+  const store = useStore();
   let {
     group
   } = meta;
-  let index = findIndex(props.metaList, meta);
+  let index = findIndex(store.metaList, meta);
   let notGroupSelected = !group.length;
   function getColumns() {
     let {
       ExistAboveGroupBy,
       prevList,
       prevGroupBy
-    } = getHelper(props.metaList, meta);
+    } = getHelper(store.metaList, meta);
     let data;
     if (ExistAboveGroupBy) {
       let _data = {
@@ -5061,6 +5970,7 @@ const SelectIndex = props => {
         _data.columns = _data.columns.concat(prevGroupBy.group.map(v => {
           return {
             name: v.quotes,
+            realName: v.sql?.split(' AS ')?.[1] || '',
             name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
@@ -5072,6 +5982,7 @@ const SelectIndex = props => {
         _data.columns = _data.columns.concat(prevGroupBy.by.map(v => {
           return {
             name: v.quotes,
+            realName: v.sql?.split(' AS ')?.[1] || '',
             name_zh: '',
             database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
             special_type: '',
@@ -5096,7 +6007,7 @@ const SelectIndex = props => {
       }
     } else {
       // @ts-ignore
-      data = props.metaList.slice(0, index).map(v => {
+      data = store.metaList.slice(0, index).map(v => {
         if (v.type === TypeEnum.data) {
           return {
             alias: v.table.alias,
@@ -5119,14 +6030,13 @@ const SelectIndex = props => {
     return data;
   }
   function handleUpdate(e, i) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let data = getColumns();
     let value = group[i];
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
       content: jsx(SelectSummarize, {
-        setPopupClosable: props.setPopupClosable,
         data: data,
         value: value,
         onChange: data => {
@@ -5143,14 +6053,14 @@ const SelectIndex = props => {
           if (value.quotes !== data.quotes) {
             newMeta = newMeta.filter((_, _i) => _i <= index);
           }
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         }
       })
     });
   }
   function handleAdd(e) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let data = getColumns();
     let value = {
       table: '',
@@ -5161,11 +6071,10 @@ const SelectIndex = props => {
       condition: '',
       quotes: ''
     };
-    setPopupData({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
       content: jsx(SelectSummarize, {
-        setPopupClosable: props.setPopupClosable,
         data: data,
         value: value,
         onChange: data => {
@@ -5179,7 +6088,7 @@ const SelectIndex = props => {
               sql: summarizeToSql(newMeta[index].group, v)
             };
           });
-          props.onChangeValue(newMeta);
+          store.setMeta(newMeta);
           closePopup();
         }
       })
@@ -5188,21 +6097,21 @@ const SelectIndex = props => {
   function handleDel(e, itemId) {
     e.stopPropagation();
     closePopup();
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     // @ts-ignore
     newMeta[index].group = group.filter((_, i) => i !== itemId);
     newMeta = newMeta.filter((_, _i) => _i <= index);
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
   function closePopup() {
-    popupData.visible && setPopupData({
+    store.popupData.visible && store.setPopup({
       visible: false
     });
   }
   return jsxs(Fragment, {
     children: [meta.group.map((v, i) => {
       return jsxs("div", {
-        className: `sqb-TableName green-name`,
+        className: `Sqb-TableName green-name`,
         onClick: e => handleUpdate(e, i),
         children: [v.quotes, jsx("span", {
           style: {
@@ -5213,74 +6122,75 @@ const SelectIndex = props => {
         })]
       }, i);
     }), jsx("div", {
-      className: cx(`sqb-TableName green-name`, {
+      className: cx(`Sqb-TableName green-name`, {
         notSelected: notGroupSelected
       }),
       onClick: handleAdd,
-      children: notGroupSelected ? '选择你要查看的指标' : jsx(AddIcon, {})
+      children: notGroupSelected ? __('summarize.selectTheMetricsYouWantToView') : jsx(AddIcon, {})
     })]
   });
 };
+var SelectIndex$1 = observer(SelectIndex);
 
 const Summarize = props => {
   const {
-    meta,
-    popupData,
-    setPopupData
+    meta
   } = props;
-  return jsx(Wrapper$1, {
-    className: cx(`sqb-item`),
+  const store = useStore();
+  return jsx(Wrapper, {
+    className: cx(`Sqb-item`),
     children: jsxs("div", {
-      className: cx(`sqb-hover-parent`),
+      className: cx(`Sqb-hover-parent`),
       children: [jsx(Header, {
         className: 'green-text',
         title: __('SqlQueryBuilder.summarize'),
         onClose: () => {
-          popupData.visible && setPopupData({
+          store.popupData.visible && store.setPopup({
             visible: false
           });
-          props.delMeta(meta);
+          store.delMeta(meta);
         }
       }), jsx("div", {
-        className: cx(`sqb-item--content`),
+        className: cx(`Sqb-item--content`),
         children: jsxs("div", {
           className: 'flex-row',
           children: [jsx("div", {
-            className: `sqb-NotebookCell green-bg`,
-            children: jsx(SelectIndex, {
-              ...props
+            className: `Sqb-NotebookCell green-bg`,
+            children: jsx(SelectIndex$1, {
+              meta: meta
             })
           }), jsx("div", {
             className: 'pass',
             children: __('SqlQueryBuilder.by')
           }), jsx("div", {
-            className: `sqb-NotebookCell green-bg`,
-            children: jsx(GroupBy, {
-              ...props
+            className: `Sqb-NotebookCell green-bg`,
+            children: jsx(GroupBy$1, {
+              meta: meta
             })
           })]
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   });
 };
+var Summarize$1 = observer(Summarize);
 
 const Sort = props => {
   const {
-    meta,
-    setPopupData
+    meta
   } = props;
+  const store = useStore();
   let {
     sort
   } = meta;
-  let index = findIndex(props.metaList, meta);
+  let index = findIndex(store.metaList, meta);
   function getColumns() {
     let {
       ExistAboveGroupBy,
       prevGroupBy
-    } = getHelper(props.metaList, meta);
+    } = getHelper(store.metaList, meta);
     let data;
     if (ExistAboveGroupBy) {
       let _data = {
@@ -5315,7 +6225,7 @@ const Sort = props => {
       data = [_data];
     } else {
       //@ts-ignore
-      data = props.metaList.slice(0, index).map(v => {
+      data = store.metaList.slice(0, index).map(v => {
         if (v.type === TypeEnum.data) {
           return {
             alias: v.table.alias,
@@ -5339,7 +6249,7 @@ const Sort = props => {
   }
   function addSortColumn(e) {
     let node = e.currentTarget || e.target;
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     let value = {
       table: '',
       alias: '',
@@ -5366,11 +6276,10 @@ const Sort = props => {
       }
       return v;
     });
-    setPopupData({
+    store.setPopup({
       visible: true,
       node,
-      content: jsx(SelectJoinColumn, {
-        setPopupClosable: props.setPopupClosable,
+      content: jsx(SelectJoinColumn$1, {
         data: data,
         value: value,
         theme: ColumnsPopupThemeEnum.greenGrass,
@@ -5381,9 +6290,9 @@ const Sort = props => {
             alias,
             sql
           } = record;
-          if (alias === SummarizeAlias$1) {
+          if (alias === SummarizeAlias) {
             let aliasColumns = sql?.split(' AS ')?.[1] || '';
-            if (props.metaList[index - 1].type === TypeEnum.summarize) {
+            if (store.metaList[index - 1].type === TypeEnum.summarize) {
               //@ts-ignore
               newMeta[index].sort = [
               //@ts-ignore
@@ -5403,7 +6312,7 @@ const Sort = props => {
                 alias,
                 name,
                 sort: SortEnum.asc,
-                sql: `${SummarizeAlias$1}.${aliasColumns}`
+                sql: `${SummarizeAlias}.${aliasColumns}`
               }];
             }
           } else {
@@ -5418,8 +6327,8 @@ const Sort = props => {
               sql: `${alias}.${name}`
             }];
           }
-          props.onChangeValue(newMeta);
-          setPopupData({
+          store.setMeta(newMeta);
+          store.setPopup({
             visible: false
           });
         }
@@ -5427,7 +6336,7 @@ const Sort = props => {
     });
   }
   function handleSort(itemIndex) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     //@ts-ignore
     newMeta[index].sort = sort.map((v, i) => {
       if (i === itemIndex) {
@@ -5438,30 +6347,30 @@ const Sort = props => {
       }
       return v;
     });
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
   function delSortColumn(e, itemIndex) {
     e.stopPropagation();
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     //@ts-ignore
     newMeta[index].sort = sort.filter((_, i) => i !== itemIndex);
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
-  return jsx(Wrapper$1, {
-    className: cx(`sqb-item`),
+  return jsx(Wrapper, {
+    className: cx(`Sqb-item`),
     children: jsxs("div", {
-      className: cx(`sqb-hover-parent`),
+      className: cx(`Sqb-hover-parent`),
       children: [jsx(Header, {
         className: 'gray-text',
         title: __('SqlQueryBuilder.sort'),
-        onClose: () => props.delMeta(meta)
+        onClose: () => store.delMeta(meta)
       }), jsx("div", {
-        className: cx(`sqb-item--content`),
+        className: cx(`Sqb-item--content`),
         children: jsxs("div", {
-          className: cx(`sqb-NotebookCell gray-bg`),
+          className: cx(`Sqb-NotebookCell gray-bg`),
           children: [sort.map((v, i) => {
             return jsxs("div", {
-              className: `sqb-TableName gray-name`,
+              className: `Sqb-TableName gray-name`,
               onClick: () => handleSort(i),
               children: [v.sort === SortEnum.asc ? jsx(UpArrowIcon, {}) : jsx(DownArrowIcon, {}), v.name, jsx("span", {
                 style: {
@@ -5472,41 +6381,43 @@ const Sort = props => {
               })]
             }, i);
           }), jsx("div", {
-            className: `sqb-TableName gray-name`,
+            className: `Sqb-TableName gray-name`,
             onClick: addSortColumn,
             children: jsx(AddIcon, {})
           })]
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   });
 };
+var Sort$1 = observer(Sort);
 
-const RowLimit = props => {
+const RowLimit = observer(props => {
   const {
     meta
   } = props;
-  let index = findIndex(props.metaList, meta);
+  const store = useStore();
+  let index = findIndex(store.metaList, meta);
   function handleChange(inputValue) {
-    let newMeta = props.metaList.slice();
+    let newMeta = store.metaList.slice();
     // @ts-ignore
     newMeta[index].limit = inputValue;
-    props.onChangeValue(newMeta);
+    store.setMeta(newMeta);
   }
-  return jsx(Wrapper$1, {
-    className: cx(`sqb-item`),
+  return jsx(Wrapper, {
+    className: cx(`Sqb-item`),
     children: jsxs("div", {
-      className: cx(`sqb-hover-parent`),
+      className: cx(`Sqb-hover-parent`),
       children: [jsx(Header, {
         className: 'gray-text',
         title: __('SqlQueryBuilder.rowLimit'),
-        onClose: () => props.delMeta(meta)
+        onClose: () => store.delMeta(meta)
       }), jsx("div", {
-        className: cx(`sqb-item--content`),
+        className: cx(`Sqb-item--content`),
         children: jsx("div", {
-          className: cx(`sqb-NotebookCell gray-bg`),
+          className: cx(`Sqb-NotebookCell gray-bg`),
           children: jsx(InputNumber, {
             value: meta.limit,
             min: 1,
@@ -5514,238 +6425,179 @@ const RowLimit = props => {
               width: 200
             },
             onChange: handleChange,
-            placeholder: '请输入',
+            placeholder: __('rowLimit.pleaseEnter'),
             precision: 0
           })
         })
-      }), jsx(NextDom, {
-        ...props
+      }), jsx(NextDom$1, {
+        meta: meta
+      })]
+    })
+  });
+});
+
+const PrevResult = 'Previous results';
+const PermissionTable = props => {
+  const {
+    meta
+  } = props;
+  const store = useStore();
+  let index = findIndex(store.metaList, meta);
+  function selectTable(e) {
+    let {
+      ExistAboveGroupBy,
+      prevList,
+      prevGroupBy
+    } = getHelper(store.metaList, meta);
+    let data = [];
+    if (ExistAboveGroupBy) {
+      let _data = {
+        name: prevGroupBy.alias,
+        alias: prevGroupBy.alias,
+        datasourceId: '',
+        datasourceName: ''
+      };
+      data = [_data];
+      let joinData = prevList.filter(v => v.type === TypeEnum.joinData).filter(v => v && v.table2.name);
+      if (joinData.length) {
+        data = data.concat(joinData.map(v => {
+          return {
+            alias: v.table2.alias,
+            name: v.table2.name,
+            datasourceId: v.table2.datasourceId,
+            datasourceName: v.table2.datasourceName
+          };
+        }));
+      }
+    } else {
+      data = store.metaList.slice(0, index).reduce((mo, v) => {
+        if (v.type === TypeEnum.data) {
+          mo.push({
+            alias: v.table.alias,
+            name: v.table.name,
+            datasourceId: v.table.datasourceId,
+            datasourceName: v.table.datasourceName
+          });
+        } else if (v.type === TypeEnum.joinData) {
+          mo.push({
+            alias: v.table2.alias,
+            name: v.table2.name,
+            datasourceId: v.table2.datasourceId,
+            datasourceName: v.table2.datasourceName
+          });
+        }
+        return mo;
+      }, []);
+    }
+    store.setPopup({
+      visible: true,
+      node: e.currentTarget,
+      content: jsx(SelectPermissionTable$1, {
+        data: data,
+        value: meta.table,
+        onChange: data => {
+          if (meta.table.datasourceId !== data.datasourceId || meta.table.name !== data.name) {
+            meta.table = data;
+          }
+          store.setPopup({
+            visible: false
+          });
+        }
+      })
+    });
+  }
+  let selected = Boolean(meta.table.name);
+  return jsx(Wrapper, {
+    className: `Sqb-item`,
+    children: jsxs("div", {
+      className: `Sqb-hover-parent`,
+      children: [jsx(Header, {
+        className: 'gray-text',
+        title: __('SqlQueryBuilder.permissionTable'),
+        onClose: () => store.delMeta(meta)
+      }), jsx("div", {
+        className: `Sqb-item--content`,
+        children: jsx("div", {
+          className: `Sqb-NotebookCell gray-bg`,
+          children: jsx("div", {
+            className: cx(`Sqb-TableName`, {
+              notSelected: !selected
+            }),
+            onClick: selectTable,
+            children: selected ? `${meta.table.datasourceName ? `${meta.table.datasourceName}.` : ''}${meta.table.name === 'source' ? PrevResult : meta.table.name}` : __('SqlQueryBuilder.pickPermissionTable')
+          })
+        })
+      }), jsx(NextDom$1, {
+        meta: meta
       })]
     })
   });
 };
+var PermissionTable$1 = observer(PermissionTable);
 
-// @ts-ignore
-var modulesMap = new Map([[TypeEnum.data, TableData], [TypeEnum.joinData, JoinData], [TypeEnum.customColumn, CustomColumn], [TypeEnum.filter, Filter], [TypeEnum.summarize, Summarize], [TypeEnum.sort, Sort], [TypeEnum.rowLimit, RowLimit]]);
+var modulesMap = new Map([[TypeEnum.data, TableData$1], [TypeEnum.joinData, JoinData$1], [TypeEnum.customColumn, CustomColumn$1], [TypeEnum.filter, Filter$1], [TypeEnum.summarize, Summarize$1], [TypeEnum.sort, Sort$1], [TypeEnum.rowLimit, RowLimit], [TypeEnum.permissionTable, PermissionTable$1]]);
 
 let _ = t => t,
   _t;
-const SummarizeAlias = 'source';
 const VisualBox = Styled.div.attrs({
   className: 'visual-box'
 })(_t || (_t = _``));
-let metaKey = 1;
-const MetaBase = props => {
-  const popupContainer = useRef();
-  const {
-    loading,
-    showExecute = true,
-    onExecute,
-    isCacheColumns = true,
-    value,
-    tableData: _tableData,
-    getTableColumns,
-    onChange
+const Metabase = observer(props => {
+  let {
+    btnText = '',
+    onOk
   } = props;
-  const [popupData, setPopupData] = useState({
-    visible: false,
-    node: null,
-    content: null
-  }); //弹窗选择数据
-  const [tableData, setTableData] = useState([]); //弹窗选择数据
-  const [metaList, setMetaList] = useState([{
-    metaKey,
-    type: TypeEnum$1.data,
-    table: {
-      name: '',
-      alias: ''
-    },
-    columns: []
-  }]); //metaBase 回显数据
-  const [popupClosable, setPopupClosable] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
-  const [_cacheColumnsMap, set_cacheColumnsMap] = useState({});
-  const onChangeValue = val => {
-    setPopupData({
-      ...popupData
-    });
-    setMetaList(val);
-    onChange?.(val);
-  };
-  useEffect(() => {
-    value && value.length > 0 && onChangeValue(value);
-  }, [value]);
-  useEffect(() => {
-    setTableData(_tableData || []);
-  }, [_tableData]);
+  const store = useStore();
+  const [saveLoading, setSaveLoading] = useState(false);
+  const popupContainer = useRef();
   const popupContent = useMemo(() => {
     let {
       visible,
       content
-    } = popupData;
+    } = store.popupData;
     if (!visible) return null;
     return content;
-  }, [popupData]);
-  async function fetchColumns(tableName, callback) {
-    let columns = isCacheColumns ? _cacheColumnsMap[tableName] || [] : [];
-    if (!columns.length) {
-      let columnsData = await getTableColumns?.(tableName);
-      if (!columnsData || !Array.isArray(columnsData)) return false;
-      columns = columnsData;
-      set_cacheColumnsMap({
-        ..._cacheColumnsMap,
-        [tableName]: columns
-      });
-    }
-    typeof callback === 'function' && callback(columns.map(v => ({
-      ...v,
-      select: true
-    }))); // 默认所有字段都是勾上的 所以select写死true
-  }
-  const addMeta = (type, index) => {
-    let newMeta = metaList.slice();
-    let item;
-    let mainTable = newMeta[0];
-    metaKey += 1;
-    if (type === TypeEnum$1.joinData) {
-      let name = index === 1 ? mainTable.table.name : '';
-      item = {
-        metaKey,
-        type: TypeEnum$1.joinData,
-        joinType: JoinEnum$1.left,
-        table1: {
-          name,
-          alias: name,
-          column: ''
-        },
-        table2: {
-          name: '',
-          alias: '',
-          column: ''
-        },
-        columns: []
-      };
-    }
-    if (type === TypeEnum$1.customColumn) {
-      item = {
-        metaKey,
-        type: TypeEnum$1.customColumn,
-        customColumn: []
-      };
-    }
-    if (type === TypeEnum$1.filter) {
-      item = {
-        metaKey,
-        type: TypeEnum$1.filter,
-        filter: []
-      };
-    }
-    if (type === TypeEnum$1.summarize) {
-      item = {
-        metaKey,
-        type: TypeEnum$1.summarize,
-        alias: SummarizeAlias,
-        group: [],
-        by: []
-      };
-    }
-    if (type === TypeEnum$1.sort) {
-      item = {
-        metaKey,
-        type: TypeEnum$1.sort,
-        sort: []
-      };
-    }
-    if (type === TypeEnum$1.rowLimit) {
-      item = {
-        metaKey,
-        type: TypeEnum$1.rowLimit,
-        limit: ''
-      };
-    }
+  }, [store.popupData]);
+  return (
     // @ts-ignore
-    newMeta.splice(index, 0, item);
-    setMetaList(newMeta);
-  };
-  const delMeta = meta => {
-    // TIPS 自定义列删除了后面都得删除 暂时不删除 因为过滤器和组合包括自定义列都没用到自定义列
-    let index = metaList.indexOf(meta);
-    let newMeta = metaList.slice();
-    if (meta.type === TypeEnum$1.joinData) {
-      if (meta.table2.name) {
-        let _metaList2 = newMeta.filter((v, i) => i < index);
-        setMetaList(_metaList2);
-        return void 0;
-      }
-    }
-    if (meta.type === TypeEnum$1.summarize) {
-      if (meta.by.length || meta.group.length) {
-        let _metaList3 = newMeta.filter((v, i) => i < index);
-        setMetaList(_metaList3);
-        return void 0;
-      }
-    }
-    let _metaList = newMeta.filter(v => v !== meta);
-    setMetaList(_metaList);
-  };
-  const showMainColumn = useMemo(() => {
-    let summarizeList = metaList.filter(v => v.type === TypeEnum$1.summarize);
-    if (!summarizeList.length || summarizeList.length === 1 && !summarizeList[0].group.length && !summarizeList[0].by.length) {
-      return true;
-    }
-    return false;
-  }, [metaList]);
-  // if (loading) return null;
-  return jsx(Spinner, {
-    loading: loading,
-    style: {
-      display: 'block'
-    },
-    children: jsx(VisualBox, {
+    jsx(VisualBox, {
       ref: popupContainer,
       children: jsxs("div", {
-        className: 'sqb',
+        className: 'Sqb',
         children: [jsx("div", {
-          className: cx(`sqb-list`),
-          children: metaList?.map(meta => {
+          className: cx(`Sqb-list`),
+          children: store.metaList.map(meta => {
             let {
               type: metaType,
               metaKey
             } = meta;
             let Component = modulesMap.get(metaType);
             return jsx(Component, {
-              meta: meta,
-              addMeta: addMeta,
-              delMeta: delMeta,
-              fetchColumns: fetchColumns,
-              popupData: popupData,
-              setPopupData: setPopupData,
-              tableData: tableData,
-              metaList: metaList,
-              onChangeValue: onChangeValue,
-              popupClosable: popupClosable,
-              setPopupClosable: setPopupClosable,
-              showMainColumn: showMainColumn
+              meta: meta
             }, metaKey);
           })
-        }), showExecute && jsx(Button, {
+        }), jsx(Button, {
           type: 'primary',
-          loading: loading,
-          className: `sqb-btn`,
-          // icon={loading ? <Spinner /> : null}
-          disabled: loading,
-          onClick: () => {
-            onExecute?.(metaList);
-            // store.execute();
-            // props.openResult();
+          className: `Sqb-btn`,
+          icon: saveLoading ? jsx(LoadingOutlined, {}) : null,
+          disabled: saveLoading,
+          onClick: async () => {
+            if (!store.metaList[0].table.name) {
+              return Toast.warning(__('data.pleaseSelectDataTable'));
+            }
+            if (saveLoading) return null;
+            setSaveLoading(true);
+            await onOk?.(toJS(store.metaList));
+            setSaveLoading(false);
           },
-          children: __('SqlQueryBuilder.visualize')
+          children: btnText || __('SqlQueryBuilder.visualize')
         }), popupContainer.current && jsx(Popup, {
           container: popupContainer.current,
-          visible: popupData.visible,
-          node: popupData.node,
-          closable: popupClosable,
+          visible: store.popupData.visible,
+          node: store.popupData.node,
+          closable: store.popupClosable,
           hideVisible: () => {
-            setPopupData({
+            store.setPopup({
               visible: false
             });
           },
@@ -5753,8 +6605,55 @@ const MetaBase = props => {
         })]
       })
     })
+  );
+});
+
+/**
+ * 规则
+ * 1、主表一换 下面全部删除
+ * 2、关联如果动了表或者删除了 下面的关联都删除
+ * 3、关联如果动了表或者删除了 下面对应排序用到的对应的字段也删除 todo. 未完成 因为有可能关联里面选一样的表 还不知道怎么搞
+ */
+const SqlVisionBuilder = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  let {
+    loading = false,
+    showPermissionTable,
+    getTables,
+    getColumns
+  } = props;
+  const store = useStore();
+  useEffect(() => {
+    getTables && store.setFetchDatasetFn(getTables);
+    getColumns && store.setFetchColumnsFn(getColumns);
+    if (showPermissionTable) {
+      store.setShowPermissionTable(showPermissionTable);
+    }
+  }, []);
+  React__default.useImperativeHandle(ref, () => ({
+    // 设置数据源列表
+    setDatasource: list => {
+      store.setSourceList(list);
+    },
+    // 设置回显数据
+    setPreData: data => {
+      store.setPreData(data);
+    }
+  }));
+  // ② 表集合没有查出来前 不加载页面
+  if (loading) return jsx(Loading, {
+    show: loading,
+    msg: __('loading')
   });
-};
+  return jsx(ConfigProvider, {
+    locale: zhCN,
+    children: jsx(StoreProvide, {
+      children: jsx(Metabase, {
+        ...props
+      })
+    })
+  });
+});
+var metabase = observer(SqlVisionBuilder);
 
-export { MetaBase };
+export { metabase as Metabase, compressionStructure, filterToSql, handleSqlStruct, restoreStructure, summarizeToSql };
 //# sourceMappingURL=index.js.map