@gingkoo/pandora-metabase 1.0.0-alpha.2 → 1.0.0-alpha.21

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.2
+ * @gingkoo/pandora-metabase v1.0.0-alpha.21
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -8,12 +8,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import cx from 'classnames';
 import { Tooltip, Button, Modal, Input, DatePicker, Dropdown, InputNumber, Select, Modal2, Toast } from '@gingkoo/pandora';
 import Styled from 'styled-components';
+import { ChevronODown, Repeat, Function, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
+import isEqual from 'lodash/isEqual';
 import 'underscore';
 import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
-import { ChevronODown, Repeat, Function, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
 import moment from 'dayjs';
-import isEqual from 'lodash/isEqual';
 
 // 创建 Context
 const Context = /*#__PURE__*/createContext({});
@@ -89,7 +89,7 @@ var TypeEnum;
   TypeEnum["summarize"] = "summarize";
   TypeEnum["sort"] = "sort";
   TypeEnum["rowLimit"] = "rowLimit";
-  TypeEnum["group"] = "group";
+  TypeEnum["union"] = "union";
 })(TypeEnum || (TypeEnum = {}));
 var JoinEnum;
 (function (JoinEnum) {
@@ -278,7 +278,6 @@ const summarizeToSql = (arr, record) => {
     condition,
     alias,
     name,
-    fieldAlias,
     realName = ''
   } = record;
   let index = arr.indexOf(record);
@@ -339,9 +338,10 @@ const summarizeToSql = (arr, record) => {
       count++;
     }
   });
-  as = fieldAlias || as + (count ? '_' + (count + 1) : '');
+  as = as + (count ? '_' + (count + 1) : '');
   return {
-    sql: sql + ' AS ' + as,
+    sql: sql,
+    // + ' AS ' + as,
     fieldAlias: as
   };
 };
@@ -467,15 +467,15 @@ const handleNesting = data => {
   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;
-        })
+        alias: v.name
+        // formula: v.formula.replace(/\[.*?\]/g, (column: string): string => {
+        //   let str = column.substr(1, column.length - 2);
+        //   if (~str.indexOf('->')) {
+        //     let _str = str.replace(/ /g, '').split('->');
+        //     return `${_str[0]}.${_str[1]}`;
+        //   }
+        //   return str;
+        // }),
       };
     });
   }
@@ -626,9 +626,8 @@ const getSubColumns = metaList => {
     metaKey: -1,
     type: TypeEnum.customColumn,
     customColumn: [{
-      name: '',
-      // 用户起的别名
-      formula: '' // 公式}];
+      name: '' // 用户起的别名
+      // formula: '', // 公式}];
     }]
   };
   let {
@@ -650,7 +649,7 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.quotes,
+          name: v.fieldAlias,
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -664,7 +663,7 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.quotes,
+          name: v.fieldAlias,
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -726,18 +725,25 @@ const changeTableAlias = (list, curObj) => {
     alias
   } = cloneDeep(curObj);
   const newList = cloneDeep(list);
-  newList.map(v => {
-    if (v.type === TypeEnum.data) ;
+  newList?.map(v => {
+    if (v.type === TypeEnum.data) {
+      if (v.table.tableUuid === tableUuid) {
+        v.table.alias = alias;
+      }
+    }
     if (v.type === TypeEnum.joinData) {
       if (v.table1.tableUuid === tableUuid) {
         v.table1.alias = alias;
       }
+      if (v.table2.tableUuid === tableUuid) {
+        v.table2.alias = alias;
+      }
     }
     if (v.type === TypeEnum.customColumn) {
       v.customColumn.map(item => {
         item.formulaList?.map(formula => {
-          if (formula.tableUuid === tableUuid) {
-            formula.alias = alias;
+          if (formula.expression && formula.expression.tableUuid === tableUuid) {
+            formula.expression.alias = alias;
           }
         });
       });
@@ -775,27 +781,48 @@ const changeTableAlias = (list, curObj) => {
     if (v.type === TypeEnum.filter) {
       v.filter.map(item => {
         if (item.tableUuid === tableUuid) {
-          if (item.alias === SummarizeAlias$1) {
-            //有groupBy 特殊处理
-            const {
-              prevGroupBy
-            } = getHelper(list, v);
-            let groupBy = prevGroupBy?.by.filter(v => v.fieldUuid === item.fieldUuid)[0] || prevGroupBy?.group.filter(v => v.fieldUuid === item.fieldUuid)[0] || null;
-            groupBy.alias = alias;
-            const sql = groupBy.sql;
-            if (groupBy) {
-              item.sql = sql;
-              item.groupSql = sql;
-            }
-          } else {
-            item.alias = alias;
-            item.sql = '';
-          }
+          // if (item.alias === SummarizeAlias) {
+          //   //有groupBy 特殊处理
+          //   const { prevGroupBy } = getHelper(list, v);
+          //   let groupBy: any =
+          //     prevGroupBy?.by.filter((v) => v.fieldUuid === item.fieldUuid)[0] ||
+          //     prevGroupBy?.group.filter((v) => v.fieldUuid === item.fieldUuid)[0] ||
+          //     null;
+          //   groupBy.alias = alias;
+          //   const sql = groupBy.sql;
+          //   if (groupBy) {
+          //     item.sql = sql;
+          //     item.groupSql = sql;
+          //   }
+          // }
+          item.alias = alias;
+          item.sql = '';
+        }
+        if (item.table2 && item.table2.tableUuid === tableUuid) {
+          // if (item.table2.alias === SummarizeAlias) {
+          //   //有groupBy 特殊处理
+          //   const { prevGroupBy } = getHelper(list, v);
+          //   let groupBy: any =
+          //     prevGroupBy?.by.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     prevGroupBy?.group.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     null;
+          //   groupBy.alias = alias;
+          //   const sql = groupBy.sql;
+          //   if (groupBy) {
+          //     item.table2.sql = sql;
+          //     item.table2.groupSql = sql;
+          //   }
+          // }
+          item.table2.alias = alias;
+          // item.table2.sql = '';
         }
       });
     }
+    if (v.subquery) {
+      v.subquery = changeTableAlias(v.subquery || [], curObj);
+    }
   });
-  return newList;
+  return newList || [];
 };
 const changeFieldAlias = (list, curObj) => {
   const {
@@ -805,12 +832,30 @@ const changeFieldAlias = (list, curObj) => {
   const newList = cloneDeep(list);
   newList.map(v => {
     if (v.type === TypeEnum.data) ;
-    if (v.type === TypeEnum.joinData) ;
+    if (v.type === TypeEnum.joinData) {
+      if (v.table1.fieldUuid === fieldUuid) {
+        v.table1.fieldAlias = fieldAlias;
+      }
+      if (v.table2.fieldUuid === fieldUuid) {
+        v.table2.fieldAlias = fieldAlias;
+      }
+      v.expressions.map(column => {
+        if (column.left_fieldUuid === fieldUuid) {
+          column.left_fieldAlias = fieldAlias;
+        }
+        if (column.right_fieldUuid === fieldUuid) {
+          column.right_fieldAlias = fieldAlias;
+        }
+      });
+      // if (v.table1.tableUuid === tableUuid) {
+      //   v.table1.alias = alias;
+      // }
+    }
     if (v.type === TypeEnum.customColumn) {
       v.customColumn.map(item => {
         item.formulaList?.map(formula => {
-          if (formula.fieldUuid === fieldUuid) {
-            formula.fieldAlias = fieldAlias;
+          if (formula.expression && formula.expression.fieldUuid === fieldUuid) {
+            formula.expression.fieldAlias = fieldAlias;
           }
         });
       });
@@ -864,11 +909,196 @@ const changeFieldAlias = (list, curObj) => {
             }
           }
         }
+        if (item.table2 && item.table2.fieldUuid === fieldUuid) {
+          item.table2.fieldAlias = fieldAlias;
+          // if (item.table2.alias === SummarizeAlias) {
+          //   //有groupBy 特殊处理
+          //   const { prevGroupBy } = getHelper(list, v);
+          //   let groupBy: any =
+          //     prevGroupBy?.by.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     prevGroupBy?.group.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     null;
+          //   groupBy.fieldAlias = fieldAlias;
+          //   const sql = groupBy.sql;
+          //   if (groupBy) {
+          //     item.table2.sql = sql;
+          //     item.table2.groupSql = sql;
+          //   }
+          // }
+        }
       });
     }
   });
   return newList;
 };
+function splitByUnion(data) {
+  if (!data) return [];
+  const original = cloneDeep(data);
+  const result = [];
+  let i = 0;
+  while (i < original.length) {
+    const item = original[i];
+    if (item.type === 'group') {
+      // group.list 中每一项原样推入结果
+      for (const subItem of item.list) {
+        result.push(subItem);
+      }
+      i++;
+    } else if (item.type === 'union') {
+      const {
+        list,
+        ...otehr
+      } = item;
+      // 查找下一个 group，并将其 list 转成 subquery
+      const nextItem = original[i + 1];
+      if (nextItem && nextItem.type === 'group') {
+        result.push({
+          ...otehr,
+          subquery: nextItem.list.map(subItem => subItem)
+        });
+        i += 2;
+      } else {
+        result.push({
+          ...otehr,
+          subquery: []
+        });
+        i++;
+      }
+    }
+  }
+  return result;
+}
+function reassembleByUnion(target = []) {
+  if (!target) return [];
+  const result = [];
+  let i = 0;
+  const len = target.length;
+  // 如果没有任何 union，直接放入一个 group.list
+  const hasUnion = target.some(item => item.type === 'union');
+  if (!hasUnion) {
+    return [{
+      type: 'group',
+      name: 'default',
+      list: [...target]
+    }];
+  }
+  // 否则正常处理
+  while (i < len) {
+    const item = target[i];
+    if (item.type !== 'union') {
+      // 收集连续非 union 的 item，统一放入一个 group.list
+      const groupList = [];
+      while (i < len && target[i].type !== 'union') {
+        groupList.push(target[i]);
+        i++;
+      }
+      result.push({
+        type: 'group',
+        name: 'default',
+        list: groupList
+      });
+    } else {
+      // 处理 union
+      result.push({
+        type: 'union',
+        name: 'union',
+        union: item.union ?? 'UNION',
+        list: []
+      });
+      const subquery = item.subquery || [];
+      const convertedSubquery = reassembleByUnion(subquery);
+      result.push(...convertedSubquery);
+      i++; // 跳过当前 union
+    }
+  }
+  return result;
+}
+// export const buildSqlQuery = (data?: MetaListType[]): string => {
+//   if (!data || data.length === 0) return '';
+//   let sqlClauses: string[] = ['not exitis ( '];
+//   data.forEach((item) => {
+//     if (item.type === TypeEnum.data) {
+//       const meta = item as MetaData;
+//       const tableName = meta.table.name;
+//       const alias = meta.table.alias ? `AS ${meta.table.alias}` : '';
+//       const dataSource = meta.table.datasourceName;
+//       sqlClauses.push(`SELECT 1 FROM ${dataSource}.${tableName} ${alias}`);
+//     }
+//        if (item.type === TypeEnum.joinData) {
+//       const meta = item as MetaJoin;
+//       const table1 = meta.table1.alias ? meta.table1.alias : meta.table1.name;
+//       const table2 = `${meta.table2.datasourceName}.${meta.table2.name}`;
+//       const alias2 = meta.table2.alias ? meta.table2.alias : '';
+//       joins.push(`LEFT JOIN ${table2} ${alias2} ON ${table1}.${meta.columns[0]?.name} = ${alias2}.${meta.columns[0]?.name}`);
+//        }
+//     if (item.type === TypeEnum.filter) {
+//       const filterStrings = (item as MetaFilter).filter.map((f) => f.quotes).filter(Boolean); // 排除空条件
+//       if (filterStrings.length > 0) {
+//         sqlClauses.push(`WHERE ${filterStrings.join(' AND ')}`);
+//       }
+//     }
+//   });
+//   // 简单拼接 SQL 片段
+//   return sqlClauses.join(' ') + ' )' + ';';
+// };
+const buildSqlQuery = data => {
+  if (!data || data.length === 0) return '';
+  let sqlClauses = ['NOT EXISTS ('];
+  let tables = [];
+  let joins = [];
+  let wheres = [];
+  data.forEach(item => {
+    if (item.type === TypeEnum.data) {
+      const meta = item;
+      const tableName = `${meta.table.name}`;
+      const alias = meta.table.alias ? ` AS ${meta.table.alias}` : '';
+      tables.push(`${tableName}${alias}`);
+    }
+    if (item.type === TypeEnum.joinData) {
+      const meta = item;
+      const table2Name = `${meta.table2.name}`;
+      const alias2 = meta.table2.alias ? ` AS ${meta.table2.alias}` : '';
+      const table2 = `${meta.table2.alias || meta.table2.name}`;
+      const table1 = `${meta.table1.alias || meta.table1.name}`;
+      joins.push(`LEFT JOIN ${table2Name}${alias2} ON ${table1}.${meta.table1.fieldAlias} = ${table2}.${meta.table2.fieldAlias}`);
+      if (Array.isArray(item.expressions) && item.expressions.length > 0) {
+        item.expressions.forEach(expression => {
+          let left = '',
+            right = '';
+          if (expression.left_type === 'field') {
+            left = `${table1}.${expression.left_fieldAlias}`;
+          } else {
+            left = expression.left_string;
+          }
+          if (expression.right_type === 'field') {
+            right = `${table2}.${expression.right_fieldAlias}`;
+          } else {
+            right = expression.right_string;
+          }
+          joins.push(`AND ${left} = ${right}`);
+        });
+      }
+    }
+    if (item.type === TypeEnum.filter) {
+      const filterStrings = item.filter.map(f => f.quotes).filter(Boolean);
+      if (filterStrings.length > 0) {
+        wheres.push(...filterStrings);
+      }
+    }
+  });
+  // 构建子查询
+  if (tables.length > 0) {
+    sqlClauses.push(`SELECT 1 FROM ${tables[0]}`);
+    if (joins.length > 0) {
+      sqlClauses.push(joins.join(' '));
+    }
+    if (wheres.length > 0) {
+      sqlClauses.push(`WHERE ${wheres.join(' AND ')}`);
+    }
+  }
+  sqlClauses.push(')');
+  return sqlClauses.join(' ') + ';';
+};
 
 let metaKey = 1;
 const SummarizeAlias = 'source';
@@ -893,9 +1123,9 @@ const useStore = () => {
     list: defaultMetaList
   }];
   const defaultOperator = {
-    type: 'group',
-    name: 'group',
-    operator: UnionEnum.union,
+    type: 'union',
+    name: 'union',
+    union: UnionEnum.union,
     list: []
   };
   const [showFields, setShowFields] = useState(true); //显示字段
@@ -921,6 +1151,8 @@ const useStore = () => {
   }); //弹窗
   const [popupClosable, setClosable] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
   const [popupClosable2, setClosable2] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
+  // 外层ref
+  const popupContainer = useRef();
   // const [fetchDatasetFn, setFetchDatasetFn] = useState<(id: string) => Promise<any>>(
   //   async () => {},
   // ); //fn
@@ -938,18 +1170,18 @@ const useStore = () => {
   };
   // 是否显示主表后面的字段按钮 （如果下面 没有聚合，或者选了聚合但是聚合里面没有选值的时候显示 主表字段按钮）
   const showMainColumn = useMemo(() => {
-    // 先将二维数组拍平为一维数组
-    const flatMetaList = metaList.flatMap(group => group.list);
-    // 过滤出所有汇总类型的项
-    const summarizeItems = flatMetaList.filter(v => v.type === TypeEnum.summarize);
-    // 如果没有汇总项，默认显示主列
-    if (summarizeItems.length === 0) {
-      return true;
-    }
-    // 如果只有一个汇总项，并且 group 和 by 都为空，则也显示主列
-    const onlyItem = summarizeItems[0];
-    const hasGroupOrBy = Array.isArray(onlyItem.group) && onlyItem.group.length > 0 || Array.isArray(onlyItem.by) && onlyItem.by.length > 0;
-    return !hasGroupOrBy;
+    return metaList?.map((item, groupIndex) => {
+      // 过滤出所有汇总类型的项
+      const summarizeItems = item.list.filter(v => v.type === TypeEnum.summarize);
+      // 如果没有汇总项，默认显示主列
+      if (summarizeItems.length === 0) {
+        return true;
+      }
+      // 如果只有一个汇总项，并且 group 和 by 都为空，则也显示主列
+      const onlyItem = summarizeItems[0];
+      const hasGroupOrBy = Array.isArray(onlyItem.group) && onlyItem.group.length > 0 || Array.isArray(onlyItem.by) && onlyItem.by.length > 0;
+      return !hasGroupOrBy;
+    });
   }, [metaList]);
   // const showMainColumn = useMemo(() => {
   //   let summarizeList = metaList.filter((v) => v.type === TypeEnum.summarize);
@@ -993,7 +1225,7 @@ const useStore = () => {
       columns = await fetchColumnsFn.current(extra, datasourceId);
       setColumns(tableName, columns);
     }
-    const _columns = columns.map(v => {
+    const _columns = columns?.map(v => {
       return {
         ...v,
         fieldUuid: v.fieldAlias || uuidv4('field')
@@ -1007,21 +1239,56 @@ const useStore = () => {
     _setMeta(newMeta);
   };
   // 回显
-  const setPreData = async data => {
+  // 设置column
+  const setQuotes = newMeta => {
+    newMeta.table1 = {
+      ...newMeta.table1,
+      fieldAlias: newMeta.table1.fieldAlias || newMeta.table1.column,
+      fieldUuid: newMeta.table1.fieldUuid || uuidv4('field'),
+      quotes: newMeta.table1.quotes || newMeta.table1.column,
+      tableUuid: newMeta.table1.tableUuid || uuidv4('table')
+    };
+    newMeta.table2 = {
+      ...newMeta.table2,
+      fieldAlias: newMeta.table2.fieldAlias || newMeta.table2.column,
+      fieldUuid: newMeta.table2.fieldUuid || uuidv4('field'),
+      quotes: newMeta.table2.quotes || newMeta.table2.column,
+      tableUuid: newMeta.table2.tableUuid || uuidv4('table')
+    };
+    newMeta.expressions = newMeta.expressions?.map(v => {
+      return {
+        ...v,
+        left_fieldAlias: v.left_fieldAlias || v.left_column,
+        left_fieldUuid: v.left_fieldUuid || uuidv4('field'),
+        left_quotes: v.left_quotes || v.left_column,
+        right_fieldAlias: v.right_fieldAlias || v.right_column,
+        right_fieldUuid: v.right_fieldUuid || uuidv4('field'),
+        right_quotes: v.right_quotes || v.right_column
+      };
+    });
+    return newMeta;
+  };
+  const setPreData = data => {
     if (data.length) {
-      let _metaList = data.map((item, groupIndex) => {
+      let _metaList = data?.map((item, groupIndex) => {
         let newList = item.list?.map((v, i) => {
-          let newMeta = cloneDeep(item.list);
+          let newMeta = item.list;
+          if (v.table) {
+            v.table.tableUuid = v.table.tableUuid || uuidv4('table');
+          }
+          if (v.type === TypeEnum.joinData) {
+            newMeta[i] = setQuotes(newMeta[i]);
+          }
           // 设置右侧column
           if (v.table2?.datasourceId && v.columns.length < 1) {
-            fetchColumns(newMeta[i].table2, newMeta[i].table2.datasourceId, columns => {
+            fetchColumns(newMeta[i].table2, newMeta[i].table2.datasourceId, (columns = []) => {
               if (v.isSubquery) {
                 let newColumns = [];
                 const items = getSubColumns(v.subquery);
-                newColumns = items.flatMap(item => item.columns);
-                newMeta[i].columns = newColumns;
+                newColumns = items?.flatMap(item => item.columns);
+                newMeta[i].columns = newColumns || [];
               } else {
-                newMeta[i].columns = columns;
+                newMeta[i].columns = columns || [];
               }
               setMeta(newMeta, groupIndex);
             });
@@ -1031,15 +1298,18 @@ const useStore = () => {
           }
           // 设置column
           if (v.table?.datasourceId && v.columns.length < 1) {
-            fetchColumns(newMeta[i].table, newMeta[i].table.datasourceId, columns => {
+            fetchColumns(newMeta[i].table, newMeta[i].table.datasourceId, (columns = []) => {
               if (v.isSubquery) {
                 let newColumns = [];
                 const items = getSubColumns(v.subquery);
                 newColumns = items.flatMap(item => item.columns);
-                newMeta[i].columns = newColumns;
+                newMeta[i].columns = newColumns || [];
               } else {
-                newMeta[i].columns = columns;
+                newMeta[i].columns = columns || [];
               }
+              // if (v.type === TypeEnum.joinData) {
+              //   newMeta[i] = setQuotes(newMeta[i]);
+              // }
               setMeta(newMeta, groupIndex);
             });
             return {
@@ -1053,7 +1323,8 @@ const useStore = () => {
         return {
           name: item.name || 'default',
           list: newList.length < 1 ? defaultMetaList : newList,
-          type: item.type || 'group'
+          type: item.type || 'group',
+          union: item.union
         };
       });
       const validMetaKeys = _metaList.flatMap(group => group.list).map(v => Number(v.metaKey)).filter(num => !isNaN(num));
@@ -1076,8 +1347,8 @@ const useStore = () => {
         tableUuid: '',
         datasourceId: '',
         datasourceName: '',
-        column: '',
-        column_id: ''
+        fieldAlias: '',
+        fieldUuid: ''
       };
       if (index === 1) {
         table1 = {
@@ -1086,8 +1357,8 @@ const useStore = () => {
           alias: mainTable.table.alias,
           datasourceId: mainTable.table.datasourceId,
           datasourceName: mainTable.table.datasourceName,
-          column: '',
-          column_id: ''
+          fieldAlias: '',
+          fieldUuid: ''
         };
       }
       item = {
@@ -1102,8 +1373,8 @@ const useStore = () => {
           tableUuid: '',
           datasourceId: '',
           datasourceName: '',
-          column: '',
-          column_id: ''
+          fieldAlias: '',
+          fieldUuid: ''
         },
         columns: [],
         expressions: []
@@ -1161,7 +1432,7 @@ const useStore = () => {
         }
       };
     }
-    if (type === TypeEnum.group) {
+    if (type === TypeEnum.union) {
       // 添加分组
       let newMetaList = metaList.slice();
       newMetaList.splice(groupIndex + 1, 0, defaultOperator, ...defaultMeta);
@@ -1212,7 +1483,7 @@ const useStore = () => {
     setMeta(_metaList, groupIndex);
   };
   const setColumns = (tableId, columns) => {
-    const _columns = columns.map(v => {
+    const _columns = columns?.map(v => {
       return {
         ...v,
         fieldUuid: v.fieldUuid || uuidv4('field')
@@ -1237,46 +1508,10 @@ const useStore = () => {
   const getDataset = datasourceId => {
     return _cacheSource2TableMap[datasourceId] || [];
   };
-  const changeAlias = (groupIndex, alias) => {
-    let newMetaList = metaList.slice();
-    const _list = newMetaList[groupIndex].list;
-    if (_list.length > 0) {
-      _list.forEach(item => {
-        if (item.type === TypeEnum.joinData && item.table2.alias === alias) {
-          item.table2.alias = alias;
-        } else if (item.type === TypeEnum.data && item.table.alias === alias) {
-          item.table.alias = alias;
-        } else if (item.type === TypeEnum.filter) {
-          //过滤器
-          item.filter.forEach(filterItem => {
-            if (filterItem.alias === alias) {
-              filterItem.alias = alias;
-            }
-          });
-        } else if (item.type === TypeEnum.summarize) {
-          // 汇总
-          item.alias = alias;
-          item.by.forEach(byItem => {
-            if (byItem.alias === alias) {
-              byItem.alias = alias;
-            }
-          });
-          item.group.forEach(groupItem => {
-            if (groupItem.alias === alias) {
-              groupItem.alias = alias;
-              groupItem.sql = alias;
-            }
-          });
-        }
-      });
-      newMetaList[groupIndex].list = _list;
-      _setMeta(newMetaList);
-    }
-  };
   const reset = () => {
     // setSourceList([]);
     _setMeta(defaultMeta);
-    setToolbar(defaultToolbar);
+    // setToolbar(defaultToolbar);
     set_cacheSource2TableMap({});
     set_cacheColumnsMap({});
   };
@@ -1330,7 +1565,7 @@ const useStore = () => {
     _setShowSubquery,
     constantList,
     setConstantList,
-    changeAlias
+    popupContainer
   };
 };
 
@@ -1700,7 +1935,7 @@ const Loading = ({
   });
 };
 
-var css_248z$d = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-Filter-item {\n  position: relative;\n  margin: 0 10px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow,\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  position: absolute;\n  top: 0;\n  height: 40px;\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.4;\n  cursor: pointer;\n  transform: scale(0);\n  transition: all 0.3s;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow img,\n.Sqb-item--content .Sqb-Filter-item .left-arrow img {\n  transform: scale(0.8);\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow:hover,\n.Sqb-item--content .Sqb-Filter-item .left-arrow:hover {\n  opacity: 1;\n}\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  transform: rotate(180deg) scale(0);\n  transform-origin: 50% 50%;\n  left: -30px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow {\n  right: -20px;\n}\n.Sqb-item--content .Sqb-Filter-item.hover .left-arrow {\n  transform: rotate(180deg) scale(1);\n}\n.Sqb-item--content .Sqb-Filter-item.hover .right-arrow {\n  transform: scale(1);\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell-preview {\n  flex-shrink: 0;\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  position: relative;\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-as {\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(50%, -50%);\n  margin: 0;\n  border: none;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  font-size: 12px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background-color: #509ee3 !important;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
+var css_248z$d = ".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.p-1 {\n  padding: 0.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-Filter-item {\n  position: relative;\n  margin: 0 10px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow,\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  position: absolute;\n  top: 0;\n  height: 40px;\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.4;\n  cursor: pointer;\n  transform: scale(0);\n  transition: all 0.3s;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow img,\n.Sqb-item--content .Sqb-Filter-item .left-arrow img {\n  transform: scale(0.8);\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow:hover,\n.Sqb-item--content .Sqb-Filter-item .left-arrow:hover {\n  opacity: 1;\n}\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  transform: rotate(180deg) scale(0);\n  transform-origin: 50% 50%;\n  left: -30px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow {\n  right: -20px;\n}\n.Sqb-item--content .Sqb-Filter-item.hover .left-arrow {\n  transform: rotate(180deg) scale(1);\n}\n.Sqb-item--content .Sqb-Filter-item.hover .right-arrow {\n  transform: scale(1);\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell-preview {\n  flex-shrink: 0;\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  position: relative;\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-as {\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(50%, -50%);\n  margin: 0;\n  border: none;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  font-size: 12px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background-color: #509ee3 !important;\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$d);
 
 // 获取元素translate x y值
@@ -1732,6 +1967,7 @@ const getComputedTranslate = obj => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementTop = elem => {
+  if (!elem) return 0;
   let elemTop = elem.offsetTop;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1745,6 +1981,7 @@ const getElementTop = elem => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementLeft = elem => {
+  if (!elem) return 0;
   let elemLeft = elem.offsetLeft;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1756,8 +1993,23 @@ const getElementLeft = elem => {
   }
   return elemLeft;
 };
-const getScrollTop = () => {
-  return document.documentElement.scrollTop;
+// 获取元素可见范围内高度
+const getContainerVisibleHeight = container => {
+  if (!container) return 0;
+  const rect = container.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  // 元素顶部在视口上方 -> 不可见
+  if (rect.bottom < 0) return 0;
+  // 元素底部在视口下方 -> 不可见
+  if (rect.top > windowHeight) return 0;
+  // 可见区域的 top 和 bottom
+  const visibleTop = Math.max(rect.top, 0);
+  const visibleBottom = Math.min(rect.bottom, windowHeight);
+  // 可见高度
+  return visibleBottom - visibleTop;
+};
+const getScrollTop = elem => {
+  return elem?.scrollTop || document.documentElement.scrollTop;
 };
 // 浏览器可视宽高
 const getWindowSize = () => {
@@ -2236,7 +2488,7 @@ const List = [{
 const RowLimit$1 = props => {
   const {
     meta,
-    operator,
+    union,
     groupIndex
   } = props;
   const store = useStore$1();
@@ -2246,10 +2498,10 @@ const RowLimit$1 = props => {
       node: e.currentTarget,
       content: jsx(SelectList, {
         list: List,
-        value: operator,
+        value: union,
         onChange: type => {
           let newMeta = store.metaList.slice();
-          newMeta[groupIndex].operator = type;
+          newMeta[groupIndex].union = type;
           store._setMeta(newMeta);
           store.setPopup({
             visible: false
@@ -2272,7 +2524,7 @@ const RowLimit$1 = props => {
           children: jsx("div", {
             className: `Sqb-TableName`,
             onClick: e => selectOperator(e),
-            children: operator
+            children: union
           })
         })
       })]
@@ -3328,6 +3580,7 @@ function returnDocument(element) {
 const outSpacing = 10;
 function generateTrigger(PortalComponent) {
   class Trigger extends React.Component {
+    resizeObserver = null; // 显式声明 resizeObserver 属性
     resetId = -1; // 监听窗口改变事件id 用于组件销毁的时候清除事件
     static defaultProps = {
       visible: false,
@@ -3342,11 +3595,39 @@ function generateTrigger(PortalComponent) {
       this.resetId = winResetEvent.addEvent(this.didUpdate, this, 300);
       this.props.container && this.props.container.addEventListener('scroll', this.didUpdate);
       this.bindEvent();
+      // 延迟绑定 ResizeObserver 到 ensure the element is ready
+      this.initResizeObserver();
+    }
+    componentDidUpdate(prevProps) {
+      // 如果 children 发生变化，重新初始化观察器
+      if (prevProps.children !== this.props.children) {
+        this.initResizeObserver();
+      }
     }
     componentWillUnmount() {
       winResetEvent.removeEvent(this.resetId);
       this.props.container && this.props.container.removeEventListener('scroll', this.didUpdate);
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
     }
+    // children高度变化后，从新计算高度
+    initResizeObserver = () => {
+      const targetNode = this.ref.current;
+      if (!targetNode) return;
+      // 如果已经存在 ResizeObserver，先断开连接
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      // 初始化 ResizeObserver 并开始观察目标节点
+      this.resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.didUpdate();
+        });
+      });
+      this.resizeObserver.observe(targetNode);
+    };
     bindEvent = () => {
       let that = this;
       returnDocument().body.addEventListener('click', function (e) {
@@ -3364,7 +3645,7 @@ function generateTrigger(PortalComponent) {
       this.props.visible && this.props.closable && this.props.hideVisible();
     };
     attachParent = popupContainer => {
-      let mountNode = returnDocument().body;
+      let mountNode = this.props.container || returnDocument().body;
       mountNode.appendChild(popupContainer);
     };
     getCurrentNodePos = () => {
@@ -3373,8 +3654,9 @@ function generateTrigger(PortalComponent) {
         container
       } = this.props;
       return {
-        x: getElementLeft(node),
-        y: getElementTop(node) - (container?.scrollTop || 0),
+        x: getElementLeft(node) - getElementLeft(container),
+        y: getElementTop(node) - getElementTop(container),
+        t: getElementTop(container),
         h: node.offsetHeight
       };
     };
@@ -3417,19 +3699,21 @@ function generateTrigger(PortalComponent) {
     didUpdate = () => {
       if (!this.props.node) return false;
       let {
-        innerSpacing = 10
+        innerSpacing = 10,
+        container
       } = this.props;
       let pos = this.getCurrentNodePos();
-      let posY = pos.y - getScrollTop();
+      let posY = pos.y - getScrollTop(container);
       if (!this.ref) return false;
       let realHeight = this.ref?.current?.childNodes?.[0]?.offsetHeight || 0;
       if (!realHeight) return false;
       let {
         height: winH
       } = getWindowSize();
-      let downH = winH - posY - pos.h; // 元素下面可用高度
+      let containerH = getContainerVisibleHeight(container);
+      let downH = (containerH || winH) - posY - pos.h; // 元素下面可用高度
       let maxHeight = 0;
-      let topHeight = getScrollTop();
+      let topHeight = getScrollTop(container);
       if (downH >= posY || realHeight <= downH - innerSpacing - outSpacing) {
         // 下面比上面宽敞 或 下面足够放下所有 放下面
         maxHeight = Math.min(realHeight, downH - innerSpacing - outSpacing);
@@ -3465,7 +3749,7 @@ styleInject(css_248z$9);
 var css_248z$8 = ".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$8);
 
-var css_248z$7 = ".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.Sqb-SelectColumn--box > div .Sqb-TableName-as {\n  margin-left: auto;\n}\n";
+var css_248z$7 = ".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.Sqb-SelectColumn--box > div .Sqb-TableName-as {\n  margin-left: auto;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-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-SelectColumn--box .Sqb-SelectColumn-search span {\n  line-height: 0;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1em;\n  font-weight: 600;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n";
 styleInject(css_248z$7);
 
 // 选择表中参数
@@ -3474,11 +3758,21 @@ const SelectColumn = ({
   groupIndex,
   onChange
 }) => {
-  const [columns, setColumns] = useState(_data.slice());
+  const [columns, setColumns] = useState([]);
+  const [originList, setOriginList] = useState(_data.slice());
   const store = useStore$1();
+  const [filterVal, setFilterVal] = useState('');
+  useEffect(() => {
+    let newList = cloneDeep(originList.slice());
+    setColumns(newList.filter(v => ~(v.name + (v.name_zh || '')).toLocaleLowerCase().indexOf(filterVal.toLocaleLowerCase())));
+  }, [filterVal, originList]);
+  function onInput(e) {
+    let val = e.target.value;
+    setFilterVal(val);
+  }
   const isAllSelect = useMemo(() => {
-    return columns.filter(v => v.select).length === columns.length;
-  }, [columns]);
+    return originList.filter(v => v.select).length === originList.length;
+  }, [originList]);
   const AllSelectElement = useMemo(() => {
     if (isAllSelect) {
       return jsxs(Fragment, {
@@ -3497,8 +3791,14 @@ const SelectColumn = ({
     }
   }, [isAllSelect]);
   function onSelect(columns) {
+    const originalData = cloneDeep(originList); // 原始数据
+    const mergedColumns = originalData.map(item => {
+      const match = columns.find(col => col.fieldUuid === item.fieldUuid);
+      return match ? cloneDeep(match) : item; // 可选：是否需要深拷贝 match
+    });
     setColumns(columns);
-    typeof onChange === 'function' && onChange(columns);
+    setOriginList(mergedColumns);
+    typeof onChange === 'function' && onChange(mergedColumns);
   }
   const onChangeFieldAlias = (val, i) => {
     let fieldAlias = val || '';
@@ -3542,6 +3842,18 @@ const SelectColumn = ({
           onSelect(newColumns);
         },
         children: AllSelectElement
+      }), jsxs("div", {
+        className: cx(`Sqb-SelectColumn-search m-2 rounded-lg`),
+        children: [jsx("span", {
+          className: 'px-2',
+          children: jsx(SearchIcon, {})
+        }), jsx("input", {
+          type: 'text',
+          autoFocus: true,
+          className: 'p-1',
+          placeholder: __('data.search'),
+          onInput: onInput
+        })]
       }), Array.isArray(columns) && columns.map((v, i) => {
         return jsxs("div", {
           className: 'pb-2 px-2 flex items-center',
@@ -3579,7 +3891,7 @@ const SelectColumn = ({
   });
 };
 
-var css_248z$6 = ".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";
+var css_248z$6 = ".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 .List-item {\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 .List-item {\n  flex: auto;\n  cursor: pointer;\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 .List-item {\n  cursor: pointer;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.shrink:hover .List-item {\n  color: #509ee3;\n}\n.Sqb-SelectColumns--box .Sqb-List-title.shrink:hover .List-item .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$6);
 
 const NUMBER_GROUP = [SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
@@ -3697,7 +4009,8 @@ const SelectJoinColumn = ({
                   })));
                 }
               },
-              children: jsxs("a", {
+              children: jsxs("div", {
+                className: 'List-item',
                 children: [jsx("span", {
                   className: 'List-item-icon',
                   children: jsx(TableIcon, {})
@@ -3716,7 +4029,7 @@ const SelectJoinColumn = ({
                 })]
               })
             })
-          }), open && jsxs(Fragment, {
+          }), (open || isSummarize) && jsxs(Fragment, {
             children: [!isSummarize && jsx("div", {
               className: cx(`Sqb-List-section`),
               children: jsxs("div", {
@@ -3762,7 +4075,7 @@ const SelectJoinColumn = ({
                       let quotes = name;
                       return onGroup({
                         ..._value,
-                        tableUuid: _value.tableUuid || tableUuid,
+                        tableUuid: tableUuid || _value.tableUuid,
                         ...v,
                         table,
                         tableId,
@@ -3776,7 +4089,7 @@ const SelectJoinColumn = ({
                     }
                     typeof onSelect === 'function' && onSelect({
                       ..._value,
-                      tableUuid: _value.tableUuid || tableUuid,
+                      tableUuid: tableUuid || _value.tableUuid,
                       ...v,
                       table,
                       tableId,
@@ -3789,8 +4102,8 @@ const SelectJoinColumn = ({
                       realName
                     });
                   },
-                  children: [jsxs("a", {
-                    className: 'p-2',
+                  children: [jsxs("div", {
+                    className: 'p-2 List-item',
                     children: [jsx("span", {
                       className: 'List-item-icon',
                       children: IconMap[special_type || database_type] || jsx(LetterAaIcon, {})
@@ -3829,7 +4142,8 @@ const SelectFilterColumn = ({
   value,
   onChange,
   didUpdate,
-  isCustom: _isCustom = false
+  isCustom: _isCustom = false,
+  container: _container = null
 }) => {
   const [curColumn, setCurColumn] = useState(value);
   const [condition, setCondition] = useState(value.condition);
@@ -4246,6 +4560,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectList, {
         value: valType,
         list: store.constantList || [],
@@ -4268,6 +4583,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectList, {
         value: valType,
         list: [{
@@ -4302,6 +4618,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectJoinColumn, {
         data: [..._data],
         value: value,
@@ -4610,7 +4927,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.includes(o.database_type) || (condition === '最大值' || condition === '最小值') && DATE_GROUP.includes(o.database_type)))
         };
       }).filter(v => v.columns.length);
     }
@@ -5015,17 +5332,17 @@ const IconTypeMap = new Map([[TypeEnum.filter, {
   name: __('SqlQueryBuilder.rowLimit'),
   icon: jsx(RowLimitIcon, {}),
   className: 'rowLimit'
-}], [TypeEnum.group, {
+}], [TypeEnum.union, {
   name: __('SqlQueryBuilder.union'),
   icon: jsx(GroupIcon, {}),
   className: 'union'
 }]]);
 // 前端展示的icon顺序 随便改不影响逻辑
-const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
 // js逻辑顺序 正常顺序
-const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
 // js逻辑顺序 聚合下面的顺序是这个样子
-const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
 const metaIcon = (size, handleClick) => {
   return ({
     type
@@ -5130,7 +5447,7 @@ const findNextIcon = (store, props) => {
       if (meta.table2.name) {
         available = OrderType.slice(curLocation + 1);
       } else {
-        available = [TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+        available = [TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
       }
     } else {
       if (isLast) {
@@ -5152,7 +5469,7 @@ const findNextIcon = (store, props) => {
       if (meta.customColumn.length || ~joinIndex && prevList[joinIndex].table2.name) {
         available = OrderType.slice(curLocation + 1);
       } else {
-        available = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+        available = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
       }
     } else {
       if (isLast) {
@@ -5185,7 +5502,7 @@ const findNextIcon = (store, props) => {
     if (isLast) {
       if (!ExistAboveGroupBy) {
         if (meta.group.length && !meta.by.length) ; else if (!meta.group.length && !meta.by.length) {
-          available = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+          available = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
         } else {
           available = OrderNewType;
         }
@@ -5293,6 +5610,7 @@ const TableData = props => {
   } = props;
   const store = useStore$1();
   let selected = Boolean(meta.table.name);
+  let subQuerySelected = Boolean(meta.subquery?.[0]?.table?.name);
   function selectTable(e) {
     !meta.readonly && store.setPopup({
       visible: true,
@@ -5358,6 +5676,77 @@ const TableData = props => {
       onCancel: () => {}
     });
   };
+  // 子查询弹窗
+  const showSubQuery = (val = []) => {
+    const {
+      subToolbar,
+      toolbar,
+      ...other
+    } = store.preProps;
+    let newMetaList = store.metaList[groupIndex].list.slice()[0];
+    let oldList = cloneDeep(newMetaList.subquery);
+    let _toolbar = subToolbar || toolbar;
+    _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
+    let o = Modal2.openModal({
+      title: __('SqlQueryBuilder.subquery'),
+      transparentMask: true,
+      zIndex: Number(zIndex),
+      content: jsx(Fragment, {
+        children: jsx(SqlVisionBuilder, {
+          ...other,
+          showSubquery: store._showSubquery,
+          toolbar: _toolbar,
+          btnText: __('SqlQueryBuilder.confirm'),
+          value: val,
+          onOk: newList => {
+            try {
+              // 子查询未改变不做操作
+              if (isEqual(newList, oldList)) {
+                o.close();
+                return;
+              }
+              newMetaList.subquery = newList;
+              newMetaList.table = {
+                ...newList[0].table
+              };
+              const items = getSubColumns(newList);
+              const newColumns = items.flatMap(item => item.columns);
+              newMetaList.columns = newColumns;
+              // (newMeta[index] as MetaJoin).expressions = [];
+              store.setMeta([newMetaList], groupIndex);
+              o.close();
+            } catch (e) {
+              console.warn(e);
+            } finally {
+              o.close();
+            }
+          }
+        })
+      }),
+      onClose: () => {}
+    });
+  };
+  // 切换子查询
+  const switchSubQuery = () => {
+    let newMetaList = store.metaList[groupIndex].list.slice()[0];
+    newMetaList.isSubquery = !newMetaList.isSubquery;
+    //重置表数据
+    newMetaList.subquery = [];
+    newMetaList.table = {
+      name: '',
+      // 表名
+      tableUuid: '',
+      id: '',
+      // 表名
+      alias: '',
+      // 表别名
+      datasourceName: '',
+      // 数据源名
+      datasourceId: '' // 数据源id
+    };
+    store.setMeta([newMetaList], groupIndex);
+  };
   return jsx(Wrapper, {
     className: `Sqb-item`,
     children: jsxs("div", {
@@ -5368,7 +5757,29 @@ const TableData = props => {
         className: `Sqb-item--content`,
         children: jsxs("div", {
           className: `Sqb-NotebookCell`,
-          children: [jsxs("div", {
+          children: [meta.isSubquery ? jsxs("div", {
+            className: cx(`Sqb-TableName`, {
+              notSelected: !subQuerySelected
+            }),
+            onClick: () => {
+              showSubQuery(meta.subquery);
+            },
+            children: [subQuerySelected && jsx(Tooltip, {
+              title: __('SqlQueryBuilder.alias'),
+              children: jsx(Button, {
+                className: ':Sqb-TableName-as',
+                shape: 'circle',
+                iconOnly: true,
+                primary: true,
+                icon: 'As',
+                size: 'small',
+                onClick: e => {
+                  e.stopPropagation();
+                  onChangeTableAlias(meta.table?.alias || '');
+                }
+              })
+            }), subQuerySelected ? `${(meta.subquery?.[0]).table.datasourceName}.${(meta.subquery?.[0]).table.name} ${meta.table?.alias ? `as ${meta.table?.alias}` : ''} ` : __('SqlQueryBuilder.setSubQuery')]
+          }) : jsxs("div", {
             className: cx(`Sqb-TableName`, {
               notSelected: !selected
             }),
@@ -5388,7 +5799,19 @@ const TableData = props => {
                 }
               })
             }), selected ? `${meta.table.datasourceName}.${meta.table.name} ${meta.table?.alias ? `as ${meta.table?.alias}` : ''}` : __('SqlQueryBuilder.pickTable')]
-          }), selected && store.showMainColumn && store.showFields && jsx("div", {
+          }), store.showSubquery && jsx(Tooltip, {
+            title: __('SqlQueryBuilder.switchSubQuery'),
+            children: jsx(Button, {
+              disabled: meta.readonly,
+              primary: meta.isSubquery,
+              ghost: true,
+              className: cx('mr-2 operator-icon', {
+                ['subquery-icon']: !meta.isSubquery
+              }),
+              icon: jsx(RelatedWork, {}),
+              onClick: switchSubQuery
+            })
+          }), selected && store.showFields && jsx("div", {
             className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
@@ -5410,8 +5833,8 @@ var FlagLocation;
 })(FlagLocation || (FlagLocation = {}));
 var ExpressionsEnum;
 (function (ExpressionsEnum) {
-  ExpressionsEnum["LEFT"] = "left_column";
-  ExpressionsEnum["RIGHT"] = "right_column";
+  ExpressionsEnum["LEFT"] = "left";
+  ExpressionsEnum["RIGHT"] = "right";
 })(ExpressionsEnum || (ExpressionsEnum = {}));
 const JoinData = props => {
   const {
@@ -5426,7 +5849,12 @@ const JoinData = props => {
   let table1Selected = Boolean(meta.table1.name);
   let table2Selected = Boolean(meta.table2.name);
   let subQuerySelected = Boolean(meta.subquery?.[0]?.table?.name);
-  let columnsSelected = meta.table1.column && meta.table2.column;
+  let columnsSelected = meta.table1.quotes && meta.table2.quotes;
+  // useEffect(() => {
+  //   let newMetaList = store.metaList[groupIndex].list.slice();
+  //   newMetaList[index] = setQuotes(meta);
+  //   store.setMeta(newMetaList, groupIndex);
+  // }, []);
   function selectColumns(e) {
     let columns = meta.columns;
     !meta.readonly && store.setPopup({
@@ -5495,8 +5923,9 @@ const JoinData = props => {
               name: tableName,
               tableUuid: data.tableUuid || uuidv4('table'),
               alias,
-              column: '',
-              column_id: '',
+              fieldAlias: '',
+              fieldUuid: '',
+              quotes: '',
               datasourceId: data.datasourceId,
               datasourceName: data.datasourceName
             };
@@ -5539,8 +5968,9 @@ const JoinData = props => {
     let type = node.getAttribute('v-data');
     let data = [];
     let value = {
-      name: meta[type].column,
-      id: meta[type].column_id,
+      name: meta[type].quotes || meta[type].fieldAlias,
+      quotes: meta[type].quotes,
+      id: meta[type].fieldUuid,
       table: meta[type].name,
       tableId: meta[type].id,
       fieldUuid: meta[type].fieldUuid || uuidv4('field'),
@@ -5658,15 +6088,27 @@ const JoinData = props => {
             sql,
             datasourceId,
             datasourceName,
-            id = ''
+            id = '',
+            fieldAlias = '',
+            fieldUuid = '',
+            quotes,
+            tableUuid
           } = record;
           let newMeta = store.metaList[groupIndex].list.slice();
-          newMeta[index][type].column = name;
-          newMeta[index][type].column_id = id;
+          if (alias === SummarizeAlias$1) {
+            newMeta[index][type].fieldAlias = fieldAlias;
+            newMeta[index][type].fieldUuid = fieldUuid;
+            newMeta[index][type].quotes = quotes;
+          } else {
+            newMeta[index][type].fieldAlias = name;
+            newMeta[index][type].fieldUuid = id;
+            newMeta[index][type].quotes = name;
+          }
           if (type === FlagLocation.TABLE_1) {
             if (newMeta[index][type].alias !== alias) {
               newMeta[index][type].alias = alias;
               newMeta[index][type].name = table;
+              newMeta[index][type].tableUuid = tableUuid;
               newMeta[index][type].datasourceId = datasourceId;
               newMeta[index][type].datasourceName = datasourceName;
               newMeta[index].expressions = [];
@@ -5690,8 +6132,8 @@ const JoinData = props => {
     let index = findIndex(store.metaList[groupIndex].list, meta);
     let table_type = type === ExpressionsEnum.LEFT ? FlagLocation.TABLE_1 : FlagLocation.TABLE_2;
     let value = {
-      name: meta.expressions[_ind][type],
-      id: meta.expressions[_ind][`${type}_id`],
+      name: meta.expressions[_ind][`${type}_quotes`] || meta.expressions[_ind][`${type}_fieldAlias`],
+      id: meta.expressions[_ind][`${type}_fieldUuid`],
       table: meta[table_type].name,
       fieldUuid: meta[table_type].fieldUuid || uuidv4('field'),
       fieldAlias: meta[table_type].fieldAlias || '',
@@ -5816,11 +6258,23 @@ const JoinData = props => {
             sql,
             datasourceId,
             datasourceName,
-            id = ''
+            id = '',
+            fieldAlias,
+            fieldUuid,
+            quotes = ''
           } = record;
           let newMeta = store.metaList[groupIndex].list.slice();
-          newMeta[index].expressions[_ind][type] = name;
-          newMeta[index].expressions[_ind][`${type}_id`] = id;
+          if (alias === SummarizeAlias$1) {
+            newMeta[index].expressions[_ind][`${type}_fieldAlias`] = fieldAlias;
+            newMeta[index].expressions[_ind][`${type}_fieldUuid`] = fieldUuid;
+            newMeta[index].expressions[_ind][`${type}_quotes`] = quotes;
+          } else {
+            newMeta[index].expressions[_ind][`${type}_fieldAlias`] = name;
+            newMeta[index].expressions[_ind][`${type}_fieldUuid`] = id;
+            newMeta[index].expressions[_ind][`${type}_quotes`] = name;
+          }
+          // (newMeta[index] as MetaJoin).expressions[_ind][type] = name;
+          // (newMeta[index] as MetaJoin).expressions[_ind][`${type}_id`] = id;
           store.setMeta(newMeta, groupIndex);
           store.setPopup({
             visible: false
@@ -5902,10 +6356,11 @@ const JoinData = props => {
     let oldList = cloneDeep(newMeta[index].subquery);
     let _toolbar = subToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
     let o = Modal2.openModal({
       title: __('SqlQueryBuilder.subquery'),
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
@@ -5923,8 +6378,8 @@ const JoinData = props => {
               newMeta[index].subquery = newList;
               newMeta[index].table2 = {
                 ...newList[0].table,
-                column: '',
-                column_id: ''
+                fieldAlias: '',
+                fieldUuid: ''
               };
               const items = getSubColumns(newList);
               const newColumns = items.flatMap(item => item.columns);
@@ -5949,8 +6404,9 @@ const JoinData = props => {
     let newMeta = store.metaList[groupIndex].list.slice();
     newMeta[index].isSubquery = !newMeta[index].isSubquery;
     newMeta[index].table2 = {
-      column: '',
-      column_id: '',
+      quotes: '',
+      fieldAlias: '',
+      fieldUuid: '',
       name: '',
       // 表名
       tableUuid: '',
@@ -6043,7 +6499,7 @@ const JoinData = props => {
                   onChangeTableAlias(meta.table2?.alias || '');
                 }
               })
-            }), subQuerySelected ? `${meta.subquery?.[0].table.datasourceName}.${meta.subquery?.[0].table.name} ${meta.table2?.alias ? `as ${meta.table2?.alias}` : ''} ` : __('SqlQueryBuilder.setSubQuery')]
+            }), subQuerySelected ? `${(meta.subquery?.[0]).table.datasourceName}.${(meta.subquery?.[0]).table.name} ${meta.table2?.alias ? `as ${meta.table2?.alias}` : ''} ` : __('SqlQueryBuilder.setSubQuery')]
           }) : jsxs("div", {
             className: cx(`Sqb-TableName`, {
               notSelected: !table2Selected
@@ -6083,23 +6539,23 @@ const JoinData = props => {
               children: "on"
             }), jsx("div", {
               className: cx(`Sqb-TableName`, {
-                notSelected: !meta.table1.column
+                notSelected: !meta.table1.quotes
               }),
               "v-data": FlagLocation.TABLE_1,
               onClick: selectJoinColumn,
-              children: meta.table1.column ? meta.table1.column : __('SqlQueryBuilder.pickTable')
+              children: meta.table1.quotes ? meta.table1.quotes : __('SqlQueryBuilder.pickTable')
             }), jsx("span", {
               className: 'mr-2 text-gray-500',
               children: "="
             }), jsx("div", {
               className: cx(`Sqb-TableName`, {
-                notSelected: !meta.table2.column
+                notSelected: !meta.table2.quotes
               }),
               "v-data": FlagLocation.TABLE_2,
               onClick: selectJoinColumn,
-              children: meta.table2.column ? meta.table2.column : __('SqlQueryBuilder.pickTable')
+              children: meta.table2.quotes ? meta.table2.quotes : __('SqlQueryBuilder.pickTable')
             })]
-          }), meta.table1.column_id && meta.table2.column_id && meta.expressions?.map((v, i) => {
+          }), meta.table1.fieldUuid && meta.table2.fieldUuid && meta.expressions?.map((v, i) => {
             return jsxs("div", {
               className: cx(`Sqb-where block`),
               children: [jsx("span", {
@@ -6128,12 +6584,12 @@ const JoinData = props => {
                 children: v.left_constant ? v.left_constant : __('SqlQueryBuilder.pickConstant')
               }), (!v.left_type || v.left_type === 'field') && jsx("div", {
                 className: cx(`Sqb-TableName`, {
-                  notSelected: !v.left_column
+                  notSelected: !v.left_quotes
                 }),
                 "v-data": ExpressionsEnum.LEFT,
                 "v-index": i,
                 onClick: selectMoreJoinColumn,
-                children: v.left_column ? v.left_column : __('SqlQueryBuilder.pickTable')
+                children: v.left_quotes ? v.left_quotes : __('SqlQueryBuilder.pickTable')
               }), jsx(Tooltip, {
                 title: __('SqlQueryBuilder.switch'),
                 children: jsx(Button, {
@@ -6172,12 +6628,12 @@ const JoinData = props => {
                 children: v.right_constant ? v.right_constant : __('SqlQueryBuilder.pickConstant')
               }), (!v.right_type || v.right_type === 'field') && jsx("div", {
                 className: cx(`Sqb-TableName`, {
-                  notSelected: !v.right_column
+                  notSelected: !v.right_quotes
                 }),
                 "v-data": ExpressionsEnum.RIGHT,
                 "v-index": i,
                 onClick: selectMoreJoinColumn,
-                children: v.right_column ? v.right_column : __('SqlQueryBuilder.pickTable')
+                children: v.right_quotes ? v.right_quotes : __('SqlQueryBuilder.pickTable')
               }), jsx(Tooltip, {
                 title: __('SqlQueryBuilder.switch'),
                 children: jsx(Button, {
@@ -6203,16 +6659,17 @@ const JoinData = props => {
                     let newMeta = store.metaList[groupIndex].list.slice();
                     newMeta[index].expressions.splice(i + 1, 0, {
                       operator: 'and',
-                      left_column: '',
-                      left_column_id: '',
+                      left_fieldAlias: '',
+                      left_fieldUuid: '',
+                      left_quotes: '',
                       left_string: '',
-                      left_isString: false,
                       left_type: 'field',
                       left_constant: '',
-                      right_column: '',
-                      right_column_id: '',
+                      right_fieldAlias: '',
+                      right_fieldUuid: '',
+                      right_quotes: '',
                       right_string: '',
-                      right_isString: false,
+                      // right_isString: false,
                       right_type: 'field',
                       right_constant: ''
                     });
@@ -6235,7 +6692,7 @@ const JoinData = props => {
                 })
               })]
             }, i);
-          }), meta.table1.column_id && meta.table2.column_id && (meta.expressions?.length || 0) < 1 && jsx(Tooltip, {
+          }), meta.table1.fieldUuid && meta.table2.fieldUuid && (meta.expressions?.length || 0) < 1 && jsx(Tooltip, {
             title: __('SqlQueryBuilder.add'),
             children: jsx(Button, {
               disabled: meta.readonly,
@@ -6248,16 +6705,17 @@ const JoinData = props => {
                 let newMeta = store.metaList[groupIndex].list.slice();
                 newMeta[index].expressions = [{
                   operator: 'and',
-                  left_column: '',
-                  left_column_id: '',
+                  left_fieldAlias: '',
+                  left_fieldUuid: '',
+                  left_quotes: '',
                   left_string: '',
-                  left_isString: false,
                   left_type: 'field',
                   left_constant: '',
-                  right_column: '',
-                  right_column_id: '',
+                  right_fieldAlias: '',
+                  right_fieldUuid: '',
+                  right_quotes: '',
                   right_string: '',
-                  right_isString: false,
+                  // right_isString: false,
                   right_constant: '',
                   right_type: 'field'
                 }];
@@ -6406,12 +6864,12 @@ const CaseEditor = props => {
     onOk,
     onCancel
   } = props;
-  const [popup, setPopup] = useState({
-    visible: false
-  }); // 弹框信息
+  // const [popup, setPopup] = useState<PopupType>({ visible: false }); // 弹框信息
   const [caseList, setCaseList] = useState(value.formulaList || []);
   const [name, setName] = useState(value?.name || ''); // 表达式名字
   const [ind, setInd] = useState(-1);
+  const ref = useRef(null);
+  const store = useStore$1();
   const filterCase = useMemo(() => {
     const hasCase = caseList.some(item => item.type === OptionsTypeEnum.OTHER && item.operator === 'case');
     if (hasCase) {
@@ -6423,24 +6881,22 @@ const CaseEditor = props => {
   const usable = useMemo(() => {
     return Array.from(caseList).length > 0 && name;
   }, [caseList, name]);
-  const popupContent = useMemo(() => {
-    let {
-      visible,
-      content
-    } = popup;
-    if (!visible) return null;
-    return content;
-  }, [popup]);
+  // const popupContent = useMemo(() => {
+  //   let { visible, content } = popup;
+  //   if (!visible) return null;
+  //   return content;
+  // }, [popup]);
   function closePopup() {
-    setPopup({
+    store.setPopup({
       visible: false
     });
   }
   // 字段
   function handleField(e, i, val) {
-    setPopup({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
+      container: ref.current,
       content: jsx(SelectJoinColumn, {
         data: data,
         value: val,
@@ -6448,8 +6904,13 @@ const CaseEditor = props => {
         isGroup: true,
         // @ts-ignore
         onGroup: data => {
+          let _data = cloneDeep(data);
+          if (_data.alias != SummarizeAlias$1) {
+            _data.fieldAlias = _data.name;
+            _data.fieldUuid = uuidv4('field');
+          }
           const _caseList = caseList.slice();
-          _caseList[i].expression = data;
+          _caseList[i].expression = _data;
           setCaseList(_caseList);
           closePopup();
         }
@@ -6465,16 +6926,23 @@ const CaseEditor = props => {
   };
   // 表达式
   function handleExpression(e, i, val) {
-    setPopup({
+    store.setPopup({
       visible: true,
       node: e.currentTarget,
+      container: ref.current,
       content: jsx(SelectFilter, {
         isCustom: true,
+        container: ref.current,
         data: data,
         value: val,
         onChange: data => {
+          let _data = cloneDeep(data);
+          if (_data.alias != SummarizeAlias$1) {
+            _data.fieldAlias = _data.name;
+            _data.fieldUuid = uuidv4('field');
+          }
           const _caseList = caseList.slice();
-          _caseList[i].expression = data;
+          _caseList[i].expression = _data;
           setCaseList(_caseList);
           closePopup();
         }
@@ -6517,8 +6985,7 @@ const CaseEditor = props => {
   const _onOk = () => {
     typeof onOk === 'function' && onOk?.({
       name,
-      formulaList: caseList,
-      formula: ''
+      formulaList: caseList
     });
   };
   // 分段
@@ -6666,6 +7133,7 @@ const CaseEditor = props => {
   };
   return jsxs("div", {
     className: 'custom-box',
+    ref: ref,
     children: [jsx(VisualBox$1, {
       children: jsx("div", {
         className: `Sqb-item Sqb-case-editor mb-2 mt-2`,
@@ -6803,13 +7271,6 @@ const CaseEditor = props => {
           })]
         })
       })
-    }), jsx(Popup, {
-      visible: popup.visible,
-      closable: true,
-      node: popup.node,
-      innerSpacing: popup.innerSpacing,
-      hideVisible: closePopup,
-      children: popupContent
     }), jsx("div", {
       className: `btns p-4`,
       children: jsxs("div", {
@@ -6941,14 +7402,15 @@ const CustomColumn = props => {
     }
     return data;
   }
-  // 子查询弹窗
+  // 自定义弹窗
   const showSubQuery = (e, i) => {
     let newMeta = store.metaList[groupIndex].list.slice();
     const _value = newMeta[index].customColumn[i] || [];
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
     let o = Modal2.openModal({
       title: __('SqlQueryBuilder.customExpression'),
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(Provider, {
           value: store,
@@ -7208,7 +7670,7 @@ const Filter = props => {
     let newMeta = store.metaList[groupIndex].list.slice();
     let val = filter[i];
     if (val.type === Filter_TypeEnum.NOT_EXISTS) {
-      showSubQuery(i, '');
+      showNotExists(i, '');
       return;
     }
     let data = getColumns();
@@ -7307,10 +7769,10 @@ const Filter = props => {
     newMeta[index].filter = [..._filter];
     setInd(-1);
   };
-  // 子查询弹窗
-  const showSubQuery = (i, position) => {
+  // NotExists 窗口
+  const showNotExists = (i, position) => {
     const {
-      subToolbar,
+      notExistsToolbar,
       toolbar,
       ...other
     } = store.preProps;
@@ -7318,12 +7780,13 @@ const Filter = props => {
     let index = findIndex(store.metaList[groupIndex].list, meta);
     let _value = position ? [] : newMeta[index].filter[i]?.subquery || [];
     let oldList = position ? [] : cloneDeep(newMeta[index].filter[i]?.subquery || []);
-    let _toolbar = subToolbar || toolbar;
+    let _toolbar = notExistsToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
     let o = Modal2.openModal({
       title: 'NOT EXISTS',
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
@@ -7341,7 +7804,7 @@ const Filter = props => {
               }
               const _tem = {
                 subquery: newList,
-                quotes: `${newList?.[0].table.datasourceName}.${newList?.[0].table.alias || newList?.[0].table.name}`,
+                quotes: buildSqlQuery(newList),
                 condition: '',
                 table: '',
                 tableId: '',
@@ -7416,7 +7879,7 @@ const Filter = props => {
           if (type === Filter_TypeEnum.EXPRESSION) {
             handleAdd(_e);
           } else if (type === Filter_TypeEnum.NOT_EXISTS) {
-            showSubQuery(_index, _type);
+            showNotExists(_index, _type);
           }
         }
       })
@@ -7483,7 +7946,7 @@ const Filter = props => {
               }, i) : jsxs("div", {
                 className: `Sqb-TableName purple-name`,
                 onClick: e => handleUpdate(e, i),
-                children: [v.quotes, jsx("span", {
+                children: [v.type === Filter_TypeEnum.NOT_EXISTS ? 'not exitis ( * )' : v.quotes, jsx("span", {
                   style: {
                     fontSize: 0
                   },
@@ -7527,7 +7990,7 @@ const Filter = props => {
               if (typeof v === 'string') {
                 return v;
               } else if (v.type === Filter_TypeEnum.NOT_EXISTS) {
-                return 'not exitis ( * )';
+                return `${buildSqlQuery(v.subquery)}`;
               } else {
                 return v.quotes;
               }
@@ -7659,10 +8122,10 @@ const GroupBy = props => {
           newMeta[index].by.splice(i, 1, data);
           // @ts-ignore
           newMeta[index].by = newMeta[index].by.map(v => {
-            const fieldAlias = v.fieldAlias || `${v.alias}__${v.name}`;
+            const fieldAlias = `${v.alias}__${v.name}`;
             return {
               ...v,
-              sql: `${v.alias}.${v.realName || v.name} AS ${fieldAlias}`,
+              sql: `${v.alias}.${v.realName || v.name}`,
               fieldAlias: fieldAlias
             };
           });
@@ -7693,8 +8156,8 @@ const GroupBy = props => {
       quotes: '',
       datasourceId: '',
       datasourceName: '',
-      column: '',
-      column_id: '',
+      // column: '',
+      // column_id: '',
       summarizeType: MetaSummarize_Enum.BY
     };
     store.setPopup({
@@ -7711,10 +8174,10 @@ const GroupBy = props => {
           newMeta[index].by.push(data);
           // @ts-ignore
           newMeta[index].by = newMeta[index].by.map(v => {
-            const fieldAlias = v.fieldAlias || `${v.alias}__${v.name}`;
+            const fieldAlias = `${v.alias}__${v.name}`;
             return {
               ...v,
-              sql: `${v.alias}.${v.realName || v.name} AS ${fieldAlias}`,
+              sql: `${v.alias}.${v.realName || v.name}`,
               fieldAlias: fieldAlias,
               fieldUuid: uuidv4('field'),
               summarizeType: MetaSummarize_Enum.BY
@@ -7955,8 +8418,8 @@ const SelectIndex = props => {
       quotes: '',
       datasourceId: '',
       datasourceName: '',
-      column: '',
-      column_id: '',
+      // column: '',
+      // column_id: '',
       summarizeType: MetaSummarize_Enum.GROUP
     };
     store.setPopup({
@@ -8526,7 +8989,8 @@ const Metabase = props => {
   } = props;
   const store = useStore$1();
   const [saveLoading, setSaveLoading] = useState(false);
-  const popupContainer = useRef();
+  // const popupContainer = useRef();
+  // store.setPopupContainer(popupContainer);
   const popupContent = useMemo(() => {
     let {
       visible,
@@ -8545,40 +9009,35 @@ const Metabase = props => {
   }, [store.popupData2]);
   const onSave = async () => {
     let intercept = false; // 是否返回
+    const _metaList = splitByUnion(store.metaList);
     store.metaList.map(v => {
-      if (v.type !== 'group' && !(v.list?.[0]).table.name) {
+      if (v.type !== 'union' && !(v.list?.[0]).table.name) {
         intercept = true;
         return Toast.warning(__('data.pleaseSelectDataTable'));
       }
     });
     if (saveLoading || intercept) return null;
     setSaveLoading(true);
-    if (store.toolbar.includes('group')) {
-      // 分组
-      await onOk?.(store.metaList);
-    } else {
-      // 非分组
-      await onOk?.(store.metaList[0].list);
-    }
+    await onOk?.(_metaList);
     setSaveLoading(false);
   };
-  let zIndex = popupContainer.current ? getMaxZIndexInParents(popupContainer.current) : null;
+  let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
   return (
     // @ts-ignore
     jsx(VisualBox, {
-      ref: popupContainer,
+      ref: store.popupContainer,
       children: jsxs("div", {
         className: 'Sqb',
         children: [store.metaList.map((v, index) => {
-          if (v.type === 'group' && v.operator) {
+          if (v.type === 'union' && v.union) {
             return jsx("div", {
               className: cx(`Sqb-list`),
               children: jsx(RowLimit$1, {
-                operator: v.operator,
+                union: v.union,
                 meta: v,
                 groupIndex: index
               })
-            }, 'group' + index);
+            }, 'union' + index);
           }
           return jsx("div", {
             className: cx(`Sqb-list`),
@@ -8603,8 +9062,8 @@ const Metabase = props => {
           disabled: saveLoading,
           onClick: onSave,
           children: btnText || __('SqlQueryBuilder.visualize')
-        }) : null, popupContainer.current && jsx(Popup, {
-          container: popupContainer.current,
+        }) : null, store.popupContainer.current && jsx(Popup, {
+          container: store.popupData.container || store.popupContainer.current,
           visible: store.popupData.visible,
           node: store.popupData.node,
           closable: store.popupClosable,
@@ -8615,8 +9074,8 @@ const Metabase = props => {
             });
           },
           children: popupContent
-        }), popupContainer.current && jsx(Popup, {
-          container: popupContainer.current,
+        }), store.popupContainer.current && jsx(Popup, {
+          container: store.popupData2.container || store.popupContainer.current,
           visible: store.popupData2.visible,
           node: store.popupData2.node,
           closable: store.popupClosable2,
@@ -8665,15 +9124,9 @@ const SqlVisionBuilder = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     store.setProps(props);
   }, [props]);
   useEffect(() => {
-    if (toolbar.includes('group')) {
-      store.setPreData(value);
-    } else {
-      store.setPreData([{
-        name: 'default',
-        list: value
-      }]);
-    }
-  }, [value, toolbar]);
+    const _value = reassembleByUnion(value);
+    store.setPreData(_value);
+  }, [value]);
   useEffect(() => {
     store.setSourceList(sourceList);
   }, [sourceList]);