@gingkoo/pandora-metabase 1.0.0-alpha.3 → 1.0.0-alpha.30

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.3
+ * @gingkoo/pandora-metabase v1.0.0-alpha.30
  */
 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({});
@@ -154,6 +154,36 @@ var EleComponentEnum;
   EleComponentEnum["select"] = "select";
 })(EleComponentEnum || (EleComponentEnum = {}));
 
+//获取指定名称的cookie值
+function getCookie(name) {
+  // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
+  var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
+  if (arr != null) {
+    console.log(arr);
+    return arr[2];
+  }
+  return null;
+}
+
+const locales = {};
+const activeLocale = getCookie('LOCALE') || 'zh';
+const isEn = activeLocale === 'en';
+const register = (name, data) => {
+  if (name in locales) {
+    console.warn(`[i18n] ${name} has been registered`);
+  } else {
+    locales[name] = data;
+  }
+};
+const __ = name => {
+  if (activeLocale in locales) {
+    return locales[activeLocale][name] || '';
+  } else {
+    console.warn(`[i18n] locale not found`);
+    return '';
+  }
+};
+
 // import { SummarizeAlias } from './index';
 const SummarizeAlias$1 = 'source';
 const NUMBER_GROUP$1 = [SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
@@ -278,7 +308,6 @@ const summarizeToSql = (arr, record) => {
     condition,
     alias,
     name,
-    fieldAlias,
     realName = ''
   } = record;
   let index = arr.indexOf(record);
@@ -339,9 +368,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 +497,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 +656,8 @@ const getSubColumns = metaList => {
     metaKey: -1,
     type: TypeEnum.customColumn,
     customColumn: [{
-      name: '',
-      // 用户起的别名
-      formula: '' // 公式}];
+      name: '' // 用户起的别名
+      // formula: '', // 公式}];
     }]
   };
   let {
@@ -650,7 +679,9 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.quotes,
+          name: v.fieldAlias || v.name,
+          fieldAlias: '',
+          // fieldUuid: uuidv4('field'),
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -664,7 +695,9 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.quotes,
+          name: v.fieldAlias || v.name,
+          fieldAlias: '',
+          // fieldUuid: uuidv4('field'),
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -681,10 +714,18 @@ const getSubColumns = metaList => {
       data = data.concat(
       // @ts-ignore
       joinData.map(v => {
+        const columns = v.columns.map(column => {
+          return {
+            ...column,
+            name: column.fieldAlias || column.name,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        });
         return {
           alias: v.table2.alias,
           table: v.table2.name,
-          columns: v.columns
+          columns: columns
         };
       }));
     }
@@ -692,16 +733,51 @@ const getSubColumns = metaList => {
     // @ts-ignore
     data = metaList.slice().map(v => {
       if (v.type === TypeEnum.data) {
+        const columns = v.columns.map(column => {
+          return {
+            ...column,
+            name: column.fieldAlias || column.name,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        }).filter(item => item.select);
         return {
           alias: v.table.alias,
           table: v.table.name,
-          columns: v.columns
+          columns: columns
         };
       } else if (v.type === TypeEnum.joinData) {
+        const columns = v.columns.map(column => {
+          return {
+            ...column,
+            name: column.fieldAlias || column.name,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        }).filter(item => item.select);
         return {
           alias: v.table2.alias,
           table: v.table2.name,
-          columns: v.columns
+          columns: columns
+        };
+      } else if (v.type === TypeEnum.customColumn) {
+        const {
+          customColumn
+        } = v;
+        const columns = customColumn.map(v => {
+          return {
+            database_type: SQL_COLUMN_TYPE.STRING,
+            name_zh: v.name,
+            name: v.name,
+            select: true,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        });
+        return {
+          columns: columns,
+          alias: '',
+          table: __('SqlQueryBuilder.customColumn')
         };
       } else {
         return {
@@ -726,18 +802,25 @@ const changeTableAlias = (list, curObj) => {
     alias
   } = cloneDeep(curObj);
   const newList = cloneDeep(list);
-  newList.map(v => {
-    if (v.type === TypeEnum.data) ;
+  return 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;
           }
         });
       });
@@ -768,34 +851,61 @@ const changeTableAlias = (list, curObj) => {
       v.by.map(by => {
         if (by.tableUuid === tableUuid) {
           by.alias = alias;
-          by.sql = `${by.alias}.${by.realName || by.name} AS ${by.fieldAlias}`;
+          by.sql = `${by.alias}.${by.realName || by.name}`;
         }
       });
     }
     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 (item.subquery) {
+        //   item.subquery = changeTableAlias(item.subquery || [], curObj);
+        // }
       });
     }
-  });
-  return newList;
+    // if ((v as MetaData | MetaJoin).subquery) {
+    //   (v as MetaData | MetaJoin).subquery = changeTableAlias(
+    //     (v as MetaData | MetaJoin).subquery || [],
+    //     curObj,
+    //   );
+    // }
+    return v;
+  }) || [];
 };
 const changeFieldAlias = (list, curObj) => {
   const {
@@ -803,14 +913,32 @@ const changeFieldAlias = (list, curObj) => {
     fieldAlias
   } = cloneDeep(curObj);
   const newList = cloneDeep(list);
-  newList.map(v => {
+  return 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;
           }
         });
       });
@@ -842,7 +970,7 @@ const changeFieldAlias = (list, curObj) => {
       v.by.map(by => {
         if (by.fieldUuid === fieldUuid) {
           by.fieldAlias = fieldAlias;
-          by.sql = `${by.alias}.${by.realName || by.name} AS ${by.fieldAlias}`;
+          by.sql = `${by.alias}.${by.realName || by.name}`;
         }
       });
     }
@@ -856,20 +984,43 @@ const changeFieldAlias = (list, curObj) => {
               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.fieldAlias = fieldAlias;
-            const sql = groupBy.sql;
             if (groupBy) {
+              groupBy.fieldAlias = fieldAlias;
+              const sql = groupBy.sql;
               item.sql = sql;
               item.groupSql = sql;
             }
           }
         }
+        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;
+          //   }
+          // }
+        }
+        if (item.notExists) {
+          item.notExists = changeFieldAlias(item.notExists || [], curObj);
+        }
       });
     }
-  });
-  return newList;
+    return {
+      ...v
+    };
+  }) || [];
 };
 function splitByUnion(data) {
+  if (!data) return [];
   const original = cloneDeep(data);
   const result = [];
   let i = 0;
@@ -905,7 +1056,8 @@ function splitByUnion(data) {
   }
   return result;
 }
-function reassembleByUnion(target) {
+function reassembleByUnion(target = []) {
+  if (!target) return [];
   const result = [];
   let i = 0;
   const len = target.length;
@@ -949,6 +1101,92 @@ function reassembleByUnion(target) {
   }
   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';
@@ -1001,6 +1239,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
@@ -1018,18 +1258,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);
@@ -1073,7 +1313,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')
@@ -1087,21 +1327,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);
             });
@@ -1111,15 +1386,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 {
@@ -1157,8 +1435,8 @@ const useStore = () => {
         tableUuid: '',
         datasourceId: '',
         datasourceName: '',
-        column: '',
-        column_id: ''
+        fieldAlias: '',
+        fieldUuid: ''
       };
       if (index === 1) {
         table1 = {
@@ -1167,8 +1445,8 @@ const useStore = () => {
           alias: mainTable.table.alias,
           datasourceId: mainTable.table.datasourceId,
           datasourceName: mainTable.table.datasourceName,
-          column: '',
-          column_id: ''
+          fieldAlias: '',
+          fieldUuid: ''
         };
       }
       item = {
@@ -1183,8 +1461,8 @@ const useStore = () => {
           tableUuid: '',
           datasourceId: '',
           datasourceName: '',
-          column: '',
-          column_id: ''
+          fieldAlias: '',
+          fieldUuid: ''
         },
         columns: [],
         expressions: []
@@ -1293,7 +1571,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')
@@ -1318,46 +1596,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({});
   };
@@ -1411,40 +1653,10 @@ const useStore = () => {
     _setShowSubquery,
     constantList,
     setConstantList,
-    changeAlias
+    popupContainer
   };
 };
 
-//获取指定名称的cookie值
-function getCookie(name) {
-  // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
-  var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
-  if (arr != null) {
-    console.log(arr);
-    return arr[2];
-  }
-  return null;
-}
-
-const locales = {};
-const activeLocale = getCookie('LOCALE') || 'zh';
-const isEn = activeLocale === 'en';
-const register = (name, data) => {
-  if (name in locales) {
-    console.warn(`[i18n] ${name} has been registered`);
-  } else {
-    locales[name] = data;
-  }
-};
-const __ = name => {
-  if (activeLocale in locales) {
-    return locales[activeLocale][name] || '';
-  } else {
-    console.warn(`[i18n] locale not found`);
-    return '';
-  }
-};
-
 register('en', {
   'data.pleaseSelectDataTable': 'please select data table',
   'data.calculatingNow': 'calculating now...',
@@ -1781,7 +1993,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值
@@ -1813,6 +2025,7 @@ const getComputedTranslate = obj => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementTop = elem => {
+  if (!elem) return 0;
   let elemTop = elem.offsetTop;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1826,6 +2039,7 @@ const getElementTop = elem => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementLeft = elem => {
+  if (!elem) return 0;
   let elemLeft = elem.offsetLeft;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1837,8 +2051,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 = () => {
@@ -3393,7 +3622,9 @@ const Portal = /*#__PURE__*/forwardRef((props, ref) => {
     initRef.current = true;
   }
   useEffect(() => {
-    didUpdate?.(props, containerRef.current);
+    setTimeout(() => {
+      didUpdate?.(props, containerRef.current);
+    }, 0);
   });
   useEffect(() => {
     return () => {
@@ -3409,6 +3640,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,
@@ -3423,11 +3655,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) {
@@ -3445,7 +3705,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 = () => {
@@ -3454,8 +3714,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
       };
     };
@@ -3489,6 +3750,7 @@ function generateTrigger(PortalComponent) {
           borderRadius: 6
         },
         onClick: e => this.props.closable && e.stopPropagation(),
+        onMouseDown: e => e.stopPropagation(),
         children: /*#__PURE__*/React.cloneElement(this.props.children, {
           key: posKey,
           didUpdate: this.didUpdate
@@ -3498,19 +3760,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);
@@ -3546,7 +3810,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);
 
 // 选择表中参数
@@ -3555,11 +3819,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, {
@@ -3578,8 +3852,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 || '';
@@ -3600,10 +3880,14 @@ const SelectColumn = ({
         newMetaList = changeFieldAlias(newMetaList, newColumns[i]);
         store.setMeta(newMetaList, groupIndex);
         onSelect(newColumns);
-        store.setClosable(true);
+        setTimeout(() => {
+          store.setClosable(true);
+        }, 0);
       },
       onCancel: () => {
-        store.setClosable(true);
+        setTimeout(() => {
+          store.setClosable(true);
+        }, 0);
       }
     });
   };
@@ -3623,6 +3907,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',
@@ -3660,7 +3956,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];
@@ -3691,10 +3987,10 @@ const SelectJoinColumn = ({
 }) => {
   const store = useStore$1();
   const [value, setValue] = useState(_value); // 当前选择的字段
-  const [curTable, setCurTable] = useState(_value.alias); // 当前选择的表
+  const [curTable, setCurTable] = useState(_value.tableUuid); // 当前选择的表
   const [curColumn, setCurColumn] = useState(_value.name); // 当前选择的字段
   const [tableList, setTableList] = useState(_data.map((v, i) => {
-    let open = !i && !_value.alias ? true : v.alias === _value.alias; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
+    let open = !i && !_value.tableUuid ? true : v.tableUuid === _value.tableUuid; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
     return {
       ...v,
       open,
@@ -3704,12 +4000,12 @@ const SelectJoinColumn = ({
   }));
   useEffect(() => {
     setValue(_value);
-    setCurTable(_value.alias);
+    setCurTable(_value.tableUuid);
     setCurColumn(_value.name);
   }, [_value]);
   useEffect(() => {
     setTableList(_data.map((v, i) => {
-      let open = !i && !_value.alias ? true : v.alias === _value.alias; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
+      let open = !i && !_value.tableUuid ? true : v.tableUuid === _value.tableUuid; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
       return {
         ...v,
         open,
@@ -3769,16 +4065,17 @@ const SelectJoinColumn = ({
                 if (open) {
                   setTableList(newTables.map(v => ({
                     ...v,
-                    open: tableAlias === v.alias ? false : v.open
+                    open: tableUuid === v.tableUuid ? false : v.open
                   })));
                 } else {
                   setTableList(newTables.map(v => ({
                     ...v,
-                    open: tableAlias === v.alias || v.alias === SummarizeAlias$1
+                    open: tableUuid === v.tableUuid || v.alias === SummarizeAlias$1
                   })));
                 }
               },
-              children: jsxs("a", {
+              children: jsxs("div", {
+                className: 'List-item',
                 children: [jsx("span", {
                   className: 'List-item-icon',
                   children: jsx(TableIcon, {})
@@ -3797,7 +4094,7 @@ const SelectJoinColumn = ({
                 })]
               })
             })
-          }), open && jsxs(Fragment, {
+          }), (open || isSummarize) && jsxs(Fragment, {
             children: [!isSummarize && jsx("div", {
               className: cx(`Sqb-List-section`),
               children: jsxs("div", {
@@ -3835,7 +4132,7 @@ const SelectJoinColumn = ({
                 className: cx(`Sqb-List-section`),
                 children: jsxs("div", {
                   className: cx(`Sqb-List-item mx-2`, {
-                    active: curColumn === name && curTable === tableAlias
+                    active: curColumn === name && curTable === tableUuid
                   }),
                   onClick: () => {
                     if (isGroup && typeof onGroup === 'function') {
@@ -3843,7 +4140,7 @@ const SelectJoinColumn = ({
                       let quotes = name;
                       return onGroup({
                         ..._value,
-                        tableUuid: _value.tableUuid || tableUuid,
+                        tableUuid: tableUuid || _value.tableUuid,
                         ...v,
                         table,
                         tableId,
@@ -3857,7 +4154,7 @@ const SelectJoinColumn = ({
                     }
                     typeof onSelect === 'function' && onSelect({
                       ..._value,
-                      tableUuid: _value.tableUuid || tableUuid,
+                      tableUuid: tableUuid || _value.tableUuid,
                       ...v,
                       table,
                       tableId,
@@ -3870,8 +4167,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, {})
@@ -3910,7 +4207,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);
@@ -4327,6 +4625,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectList, {
         value: valType,
         list: store.constantList || [],
@@ -4349,6 +4648,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectList, {
         value: valType,
         list: [{
@@ -4383,6 +4683,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectJoinColumn, {
         data: [..._data],
         value: value,
@@ -4691,7 +4992,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);
     }
@@ -5374,6 +5675,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,
@@ -5439,6 +5741,79 @@ 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,
+                alias: newMetaList.table.alias || '',
+                tableUuid: uuidv4('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", {
@@ -5449,7 +5824,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
             }),
@@ -5469,7 +5866,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')
@@ -5491,8 +5900,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 {
@@ -5507,7 +5916,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({
@@ -5576,8 +5990,9 @@ const JoinData = props => {
               name: tableName,
               tableUuid: data.tableUuid || uuidv4('table'),
               alias,
-              column: '',
-              column_id: '',
+              fieldAlias: '',
+              fieldUuid: '',
+              quotes: '',
               datasourceId: data.datasourceId,
               datasourceName: data.datasourceName
             };
@@ -5620,8 +6035,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'),
@@ -5739,15 +6155,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 = [];
@@ -5771,8 +6199,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 || '',
@@ -5897,11 +6325,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
@@ -5983,10 +6423,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,
@@ -6003,14 +6444,14 @@ const JoinData = props => {
               }
               newMeta[index].subquery = newList;
               newMeta[index].table2 = {
-                ...newList[0].table,
-                column: '',
-                column_id: ''
+                ...newList[0].table
               };
               const items = getSubColumns(newList);
               const newColumns = items.flatMap(item => item.columns);
               newMeta[index].columns = newColumns;
               newMeta[index].expressions = [];
+              // 关联表变了 下面模块全部删除
+              newMeta = newMeta.filter((v, i) => i <= index);
               store.setMeta(newMeta, groupIndex);
               o.close();
             } catch (e) {
@@ -6030,8 +6471,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: '',
@@ -6124,7 +6566,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
@@ -6164,23 +6606,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", {
@@ -6209,12 +6651,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, {
@@ -6253,12 +6695,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, {
@@ -6284,16 +6726,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: ''
                     });
@@ -6316,7 +6759,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,
@@ -6329,16 +6772,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'
                 }];
@@ -6487,12 +6931,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) {
@@ -6504,24 +6948,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,
@@ -6529,8 +6971,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();
         }
@@ -6546,16 +6993,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();
         }
@@ -6598,8 +7052,7 @@ const CaseEditor = props => {
   const _onOk = () => {
     typeof onOk === 'function' && onOk?.({
       name,
-      formulaList: caseList,
-      formula: ''
+      formulaList: caseList
     });
   };
   // 分段
@@ -6747,6 +7200,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`,
@@ -6884,13 +7338,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", {
@@ -7022,14 +7469,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,
@@ -7183,6 +7631,9 @@ const Filter = props => {
   let {
     filter
   } = meta;
+  const {
+    notExistsColumns
+  } = store.preProps;
   React__default.useRef(null);
   let index = findIndex(store.metaList[groupIndex].list, meta);
   let notSelected = !meta.filter.length;
@@ -7289,10 +7740,10 @@ 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();
+    let data = [...getColumns(), ...cloneDeep(notExistsColumns || [])];
     store.setPopup({
       visible: true,
       node: e.currentTarget,
@@ -7310,8 +7761,8 @@ const Filter = props => {
   function handleAdd(e) {
     let node = e.currentTarget;
     let newMeta = store.metaList[groupIndex].list.slice();
-    let data = getColumns();
-    let _index = node.getAttribute('v-index');
+    let data = [...getColumns(), ...cloneDeep(notExistsColumns || [])];
+    let _index = Number(node.getAttribute('v-index'));
     let _type = node.getAttribute('v-type');
     let value = {
       table: '',
@@ -7347,15 +7798,16 @@ const Filter = props => {
       content: jsx(SelectFilter, {
         data: data,
         value: value,
-        onChange: data => {
+        onChange: val => {
           if (_type) {
             if (_type === 'before') {
-              newMeta[index].filter.splice(_index, 0, data);
+              newMeta[index].filter.splice(_index, 0, val);
             } else {
-              newMeta[index].filter.splice(_index + 1, 0, data);
+              console.log('🚀 ~ ', newMeta[index].filter);
+              newMeta[index].filter.splice(_index + 1, 0, val);
             }
           } else {
-            newMeta[index].filter.push(data);
+            newMeta[index].filter.push(val);
           }
           store.setMeta(newMeta, groupIndex);
           closePopup();
@@ -7388,26 +7840,29 @@ 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;
     let newMeta = store.metaList[groupIndex].list.slice();
     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 _value = position ? [] : newMeta[index].filter[i]?.notExists || [];
+    let oldList = position ? [] : cloneDeep(newMeta[index].filter[i]?.notExists || []);
+    let _toolbar = notExistsToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
+    let notExistsColumns = getColumns();
     let o = Modal2.openModal({
       title: 'NOT EXISTS',
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
+          notExistsColumns: notExistsColumns,
           showFields: false,
           showSubquery: false,
           toolbar: _toolbar,
@@ -7421,8 +7876,8 @@ const Filter = props => {
                 return;
               }
               const _tem = {
-                subquery: newList,
-                quotes: `${newList?.[0].table.datasourceName}.${newList?.[0].table.alias || newList?.[0].table.name}`,
+                notExists: newList,
+                quotes: buildSqlQuery(newList),
                 condition: '',
                 table: '',
                 tableId: '',
@@ -7497,7 +7952,7 @@ const Filter = props => {
           if (type === Filter_TypeEnum.EXPRESSION) {
             handleAdd(_e);
           } else if (type === Filter_TypeEnum.NOT_EXISTS) {
-            showSubQuery(_index, _type);
+            showNotExists(_index, _type);
           }
         }
       })
@@ -7564,7 +8019,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
                   },
@@ -7608,7 +8063,7 @@ const Filter = props => {
               if (typeof v === 'string') {
                 return v;
               } else if (v.type === Filter_TypeEnum.NOT_EXISTS) {
-                return 'not exitis ( * )';
+                return `${buildSqlQuery(v.notExists)}`;
               } else {
                 return v.quotes;
               }
@@ -7740,10 +8195,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
             };
           });
@@ -7774,8 +8229,8 @@ const GroupBy = props => {
       quotes: '',
       datasourceId: '',
       datasourceName: '',
-      column: '',
-      column_id: '',
+      // column: '',
+      // column_id: '',
       summarizeType: MetaSummarize_Enum.BY
     };
     store.setPopup({
@@ -7792,10 +8247,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
@@ -8036,8 +8491,8 @@ const SelectIndex = props => {
       quotes: '',
       datasourceId: '',
       datasourceName: '',
-      column: '',
-      column_id: '',
+      // column: '',
+      // column_id: '',
       summarizeType: MetaSummarize_Enum.GROUP
     };
     store.setPopup({
@@ -8279,8 +8734,8 @@ const Sort = props => {
     let value = {
       table: '',
       tableId: '',
-      tableUuid: uuidv4('table'),
-      fieldUuid: uuidv4('field'),
+      tableUuid: '',
+      fieldUuid: '',
       fieldAlias: '',
       alias: '',
       name: '',
@@ -8607,7 +9062,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,
@@ -8638,11 +9094,11 @@ const Metabase = props => {
     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) => {
@@ -8679,8 +9135,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,
@@ -8691,8 +9147,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,