@gingkoo/pandora-metabase 1.0.0-alpha.1 → 1.0.0-alpha.10

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.1
+ * @gingkoo/pandora-metabase v1.0.0-alpha.10
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -89,7 +89,7 @@ var TypeEnum;
   TypeEnum["summarize"] = "summarize";
   TypeEnum["sort"] = "sort";
   TypeEnum["rowLimit"] = "rowLimit";
-  TypeEnum["group"] = "group";
+  TypeEnum["union"] = "union";
 })(TypeEnum || (TypeEnum = {}));
 var JoinEnum;
 (function (JoinEnum) {
@@ -278,7 +278,6 @@ const summarizeToSql = (arr, record) => {
     condition,
     alias,
     name,
-    fieldAlias,
     realName = ''
   } = record;
   let index = arr.indexOf(record);
@@ -339,7 +338,7 @@ const summarizeToSql = (arr, record) => {
       count++;
     }
   });
-  as = fieldAlias || as + (count ? '_' + (count + 1) : '');
+  as = as + (count ? '_' + (count + 1) : '');
   return {
     sql: sql + ' AS ' + as,
     fieldAlias: as
@@ -467,15 +466,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 +625,8 @@ const getSubColumns = metaList => {
     metaKey: -1,
     type: TypeEnum.customColumn,
     customColumn: [{
-      name: '',
-      // 用户起的别名
-      formula: '' // 公式}];
+      name: '' // 用户起的别名
+      // formula: '', // 公式}];
     }]
   };
   let {
@@ -650,7 +648,7 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.quotes,
+          name: v.fieldAlias,
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -664,7 +662,7 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.quotes,
+          name: v.fieldAlias,
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -732,12 +730,15 @@ const changeTableAlias = (list, curObj) => {
       if (v.table1.tableUuid === tableUuid) {
         v.table1.alias = alias;
       }
+      if (v.table2.tableUuid === tableUuid) {
+        v.table2.alias = alias;
+      }
     }
     if (v.type === TypeEnum.customColumn) {
       v.customColumn.map(item => {
         item.formulaList?.map(formula => {
-          if (formula.tableUuid === tableUuid) {
-            formula.alias = alias;
+          if (formula.expression && formula.expression.tableUuid === tableUuid) {
+            formula.expression.alias = alias;
           }
         });
       });
@@ -775,22 +776,40 @@ const changeTableAlias = (list, curObj) => {
     if (v.type === TypeEnum.filter) {
       v.filter.map(item => {
         if (item.tableUuid === tableUuid) {
-          if (item.alias === SummarizeAlias$1) {
-            //有groupBy 特殊处理
-            const {
-              prevGroupBy
-            } = getHelper(list, v);
-            let groupBy = prevGroupBy?.by.filter(v => v.fieldUuid === item.fieldUuid)[0] || prevGroupBy?.group.filter(v => v.fieldUuid === item.fieldUuid)[0] || null;
-            groupBy.alias = alias;
-            const sql = groupBy.sql;
-            if (groupBy) {
-              item.sql = sql;
-              item.groupSql = sql;
-            }
-          } else {
-            item.alias = alias;
-            item.sql = '';
-          }
+          // if (item.alias === SummarizeAlias) {
+          //   //有groupBy 特殊处理
+          //   const { prevGroupBy } = getHelper(list, v);
+          //   let groupBy: any =
+          //     prevGroupBy?.by.filter((v) => v.fieldUuid === item.fieldUuid)[0] ||
+          //     prevGroupBy?.group.filter((v) => v.fieldUuid === item.fieldUuid)[0] ||
+          //     null;
+          //   groupBy.alias = alias;
+          //   const sql = groupBy.sql;
+          //   if (groupBy) {
+          //     item.sql = sql;
+          //     item.groupSql = sql;
+          //   }
+          // }
+          item.alias = alias;
+          item.sql = '';
+        }
+        if (item.table2 && item.table2.tableUuid === tableUuid) {
+          // if (item.table2.alias === SummarizeAlias) {
+          //   //有groupBy 特殊处理
+          //   const { prevGroupBy } = getHelper(list, v);
+          //   let groupBy: any =
+          //     prevGroupBy?.by.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     prevGroupBy?.group.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     null;
+          //   groupBy.alias = alias;
+          //   const sql = groupBy.sql;
+          //   if (groupBy) {
+          //     item.table2.sql = sql;
+          //     item.table2.groupSql = sql;
+          //   }
+          // }
+          item.table2.alias = alias;
+          item.table2.sql = '';
         }
       });
     }
@@ -805,12 +824,30 @@ const changeFieldAlias = (list, curObj) => {
   const newList = cloneDeep(list);
   newList.map(v => {
     if (v.type === TypeEnum.data) ;
-    if (v.type === TypeEnum.joinData) ;
+    if (v.type === TypeEnum.joinData) {
+      if (v.table1.fieldUuid === fieldUuid) {
+        v.table1.fieldAlias = fieldAlias;
+      }
+      if (v.table2.fieldUuid === fieldUuid) {
+        v.table2.fieldAlias = fieldAlias;
+      }
+      v.expressions.map(column => {
+        if (column.left_fieldUuid === fieldUuid) {
+          column.left_fieldAlias = fieldAlias;
+        }
+        if (column.right_fieldUuid === fieldUuid) {
+          column.right_fieldAlias = fieldAlias;
+        }
+      });
+      // if (v.table1.tableUuid === tableUuid) {
+      //   v.table1.alias = alias;
+      // }
+    }
     if (v.type === TypeEnum.customColumn) {
       v.customColumn.map(item => {
         item.formulaList?.map(formula => {
-          if (formula.fieldUuid === fieldUuid) {
-            formula.fieldAlias = fieldAlias;
+          if (formula.expression && formula.expression.fieldUuid === fieldUuid) {
+            formula.expression.fieldAlias = fieldAlias;
           }
         });
       });
@@ -864,11 +901,108 @@ const changeFieldAlias = (list, curObj) => {
             }
           }
         }
+        if (item.table2 && item.table2.fieldUuid === fieldUuid) {
+          item.table2.fieldAlias = fieldAlias;
+          // if (item.table2.alias === SummarizeAlias) {
+          //   //有groupBy 特殊处理
+          //   const { prevGroupBy } = getHelper(list, v);
+          //   let groupBy: any =
+          //     prevGroupBy?.by.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     prevGroupBy?.group.filter((v) => v.fieldUuid === item.table2?.fieldUuid)[0] ||
+          //     null;
+          //   groupBy.fieldAlias = fieldAlias;
+          //   const sql = groupBy.sql;
+          //   if (groupBy) {
+          //     item.table2.sql = sql;
+          //     item.table2.groupSql = sql;
+          //   }
+          // }
+        }
       });
     }
   });
   return newList;
 };
+function splitByUnion(data) {
+  const original = cloneDeep(data);
+  const result = [];
+  let i = 0;
+  while (i < original.length) {
+    const item = original[i];
+    if (item.type === 'group') {
+      // group.list 中每一项原样推入结果
+      for (const subItem of item.list) {
+        result.push(subItem);
+      }
+      i++;
+    } else if (item.type === 'union') {
+      const {
+        list,
+        ...otehr
+      } = item;
+      // 查找下一个 group，并将其 list 转成 subquery
+      const nextItem = original[i + 1];
+      if (nextItem && nextItem.type === 'group') {
+        result.push({
+          ...otehr,
+          subquery: nextItem.list.map(subItem => subItem)
+        });
+        i += 2;
+      } else {
+        result.push({
+          ...otehr,
+          subquery: []
+        });
+        i++;
+      }
+    }
+  }
+  return result;
+}
+function reassembleByUnion(target) {
+  const result = [];
+  let i = 0;
+  const len = target.length;
+  // 如果没有任何 union，直接放入一个 group.list
+  const hasUnion = target.some(item => item.type === 'union');
+  if (!hasUnion) {
+    return [{
+      type: 'group',
+      name: 'default',
+      list: [...target]
+    }];
+  }
+  // 否则正常处理
+  while (i < len) {
+    const item = target[i];
+    if (item.type !== 'union') {
+      // 收集连续非 union 的 item，统一放入一个 group.list
+      const groupList = [];
+      while (i < len && target[i].type !== 'union') {
+        groupList.push(target[i]);
+        i++;
+      }
+      result.push({
+        type: 'group',
+        name: 'default',
+        list: groupList
+      });
+    } else {
+      // 处理 union
+      result.push({
+        type: 'union',
+        name: 'union',
+        union: item.union ?? 'UNION',
+        list: []
+      });
+      const subquery = item.subquery || [];
+      const convertedSubquery = reassembleByUnion(subquery);
+      result.push(...convertedSubquery);
+      i++; // 跳过当前 union
+    }
+  }
+  return result;
+}
 
 let metaKey = 1;
 const SummarizeAlias = 'source';
@@ -893,9 +1027,9 @@ const useStore = () => {
     list: defaultMetaList
   }];
   const defaultOperator = {
-    type: 'group',
-    name: 'group',
-    operator: UnionEnum.union,
+    type: 'union',
+    name: 'union',
+    union: UnionEnum.union,
     list: []
   };
   const [showFields, setShowFields] = useState(true); //显示字段
@@ -921,6 +1055,8 @@ const useStore = () => {
   }); //弹窗
   const [popupClosable, setClosable] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
   const [popupClosable2, setClosable2] = useState(true); //是否可关闭 如果弹框里面再弹框 则不可关闭
+  // 外层ref
+  const popupContainer = useRef();
   // const [fetchDatasetFn, setFetchDatasetFn] = useState<(id: string) => Promise<any>>(
   //   async () => {},
   // ); //fn
@@ -938,18 +1074,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);
@@ -978,7 +1114,7 @@ const useStore = () => {
   // 查询表字段
   const fetchColumns = async (table, datasourceId, callback) => {
     let {
-      alias,
+      alias = '',
       datasourceName,
       datasourceId: did,
       // @ts-ignore
@@ -1011,9 +1147,9 @@ const useStore = () => {
     if (data.length) {
       let _metaList = data.map((item, groupIndex) => {
         let newList = item.list?.map((v, i) => {
+          let newMeta = cloneDeep(item.list);
           // 设置右侧column
           if (v.table2?.datasourceId && v.columns.length < 1) {
-            let newMeta = v.slice();
             fetchColumns(newMeta[i].table2, newMeta[i].table2.datasourceId, columns => {
               if (v.isSubquery) {
                 let newColumns = [];
@@ -1031,7 +1167,6 @@ const useStore = () => {
           }
           // 设置column
           if (v.table?.datasourceId && v.columns.length < 1) {
-            let newMeta = v.slice();
             fetchColumns(newMeta[i].table, newMeta[i].table.datasourceId, columns => {
               if (v.isSubquery) {
                 let newColumns = [];
@@ -1054,7 +1189,8 @@ const useStore = () => {
         return {
           name: item.name || 'default',
           list: newList.length < 1 ? defaultMetaList : newList,
-          type: item.type || 'group'
+          type: item.type || 'group',
+          union: item.union
         };
       });
       const validMetaKeys = _metaList.flatMap(group => group.list).map(v => Number(v.metaKey)).filter(num => !isNaN(num));
@@ -1077,8 +1213,8 @@ const useStore = () => {
         tableUuid: '',
         datasourceId: '',
         datasourceName: '',
-        column: '',
-        column_id: ''
+        fieldAlias: '',
+        fieldUuid: ''
       };
       if (index === 1) {
         table1 = {
@@ -1087,8 +1223,8 @@ const useStore = () => {
           alias: mainTable.table.alias,
           datasourceId: mainTable.table.datasourceId,
           datasourceName: mainTable.table.datasourceName,
-          column: '',
-          column_id: ''
+          fieldAlias: '',
+          fieldUuid: ''
         };
       }
       item = {
@@ -1103,8 +1239,8 @@ const useStore = () => {
           tableUuid: '',
           datasourceId: '',
           datasourceName: '',
-          column: '',
-          column_id: ''
+          fieldAlias: '',
+          fieldUuid: ''
         },
         columns: [],
         expressions: []
@@ -1162,7 +1298,7 @@ const useStore = () => {
         }
       };
     }
-    if (type === TypeEnum.group) {
+    if (type === TypeEnum.union) {
       // 添加分组
       let newMetaList = metaList.slice();
       newMetaList.splice(groupIndex + 1, 0, defaultOperator, ...defaultMeta);
@@ -1331,7 +1467,8 @@ const useStore = () => {
     _setShowSubquery,
     constantList,
     setConstantList,
-    changeAlias
+    changeAlias,
+    popupContainer
   };
 };
 
@@ -1733,6 +1870,7 @@ const getComputedTranslate = obj => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementTop = elem => {
+  if (!elem) return 0;
   let elemTop = elem.offsetTop;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1746,6 +1884,7 @@ const getElementTop = elem => {
 };
 // 获取元素距离浏览器顶部的距离
 const getElementLeft = elem => {
+  if (!elem) return 0;
   let elemLeft = elem.offsetLeft;
   let pElem = elem.offsetParent;
   while (pElem != null) {
@@ -1757,8 +1896,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 = () => {
@@ -2237,7 +2391,7 @@ const List = [{
 const RowLimit$1 = props => {
   const {
     meta,
-    operator,
+    union,
     groupIndex
   } = props;
   const store = useStore$1();
@@ -2247,10 +2401,10 @@ const RowLimit$1 = props => {
       node: e.currentTarget,
       content: jsx(SelectList, {
         list: List,
-        value: operator,
+        value: union,
         onChange: type => {
           let newMeta = store.metaList.slice();
-          newMeta[groupIndex].operator = type;
+          newMeta[groupIndex].union = type;
           store._setMeta(newMeta);
           store.setPopup({
             visible: false
@@ -2273,7 +2427,7 @@ const RowLimit$1 = props => {
           children: jsx("div", {
             className: `Sqb-TableName`,
             onClick: e => selectOperator(e),
-            children: operator
+            children: union
           })
         })
       })]
@@ -3329,6 +3483,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,
@@ -3343,11 +3498,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) {
@@ -3365,7 +3548,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 = () => {
@@ -3374,8 +3557,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
       };
     };
@@ -3418,19 +3602,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);
@@ -3580,7 +3766,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];
@@ -3698,7 +3884,8 @@ const SelectJoinColumn = ({
                   })));
                 }
               },
-              children: jsxs("a", {
+              children: jsxs("div", {
+                className: 'List-item',
                 children: [jsx("span", {
                   className: 'List-item-icon',
                   children: jsx(TableIcon, {})
@@ -3717,7 +3904,7 @@ const SelectJoinColumn = ({
                 })]
               })
             })
-          }), open && jsxs(Fragment, {
+          }), (open || isSummarize) && jsxs(Fragment, {
             children: [!isSummarize && jsx("div", {
               className: cx(`Sqb-List-section`),
               children: jsxs("div", {
@@ -3790,8 +3977,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, {})
@@ -3830,7 +4017,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);
@@ -4247,6 +4435,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectList, {
         value: valType,
         list: store.constantList || [],
@@ -4269,6 +4458,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectList, {
         value: valType,
         list: [{
@@ -4303,6 +4493,7 @@ const SelectFilterColumn = ({
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
+      container: _container,
       content: jsx(SelectJoinColumn, {
         data: [..._data],
         value: value,
@@ -5016,17 +5207,17 @@ const IconTypeMap = new Map([[TypeEnum.filter, {
   name: __('SqlQueryBuilder.rowLimit'),
   icon: jsx(RowLimitIcon, {}),
   className: 'rowLimit'
-}], [TypeEnum.group, {
+}], [TypeEnum.union, {
   name: __('SqlQueryBuilder.union'),
   icon: jsx(GroupIcon, {}),
   className: 'union'
 }]]);
 // 前端展示的icon顺序 随便改不影响逻辑
-const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+const DisplayOrder = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
 // js逻辑顺序 正常顺序
-const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+const OrderType = [TypeEnum.data, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
 // js逻辑顺序 聚合下面的顺序是这个样子
-const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+const OrderNewType = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.joinData, TypeEnum.permissionTable, TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
 const metaIcon = (size, handleClick) => {
   return ({
     type
@@ -5131,7 +5322,7 @@ const findNextIcon = (store, props) => {
       if (meta.table2.name) {
         available = OrderType.slice(curLocation + 1);
       } else {
-        available = [TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+        available = [TypeEnum.customColumn, TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
       }
     } else {
       if (isLast) {
@@ -5153,7 +5344,7 @@ const findNextIcon = (store, props) => {
       if (meta.customColumn.length || ~joinIndex && prevList[joinIndex].table2.name) {
         available = OrderType.slice(curLocation + 1);
       } else {
-        available = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.group];
+        available = [TypeEnum.filter, TypeEnum.summarize, TypeEnum.union];
       }
     } else {
       if (isLast) {
@@ -5186,7 +5377,7 @@ const findNextIcon = (store, props) => {
     if (isLast) {
       if (!ExistAboveGroupBy) {
         if (meta.group.length && !meta.by.length) ; else if (!meta.group.length && !meta.by.length) {
-          available = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.group];
+          available = [TypeEnum.sort, TypeEnum.rowLimit, TypeEnum.union];
         } else {
           available = OrderNewType;
         }
@@ -5389,7 +5580,7 @@ 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", {
+          }), selected && store.showMainColumn[groupIndex] && store.showFields && jsx("div", {
             className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
@@ -5404,6 +5595,33 @@ const TableData = props => {
 };
 
 const PrevResult$1 = 'Previous results';
+function setQuotes(_meta) {
+  let newMeta = cloneDeep(_meta);
+  newMeta.table1 = {
+    ...newMeta.table1,
+    fieldAlias: newMeta.table1.fieldAlias || newMeta.table1.column,
+    fieldUuid: newMeta.table1.fieldUuid || newMeta.table1.column_id,
+    quotes: newMeta.table1.quotes || newMeta.table1.column
+  };
+  newMeta.table2 = {
+    ...newMeta.table2,
+    fieldAlias: newMeta.table2.fieldAlias || newMeta.table2.column,
+    fieldUuid: newMeta.table2.fieldUuid || newMeta.table2.column_id,
+    quotes: newMeta.table2.quotes || newMeta.table2.column
+  };
+  newMeta.expressions = newMeta.expressions.map(v => {
+    return {
+      ...v,
+      left_fieldAlias: v.fieldAlias || v.left_column,
+      left_fieldUuid: v.fieldUuid || v.left_column_id,
+      left_quotes: v.left_quotes || v.left_column,
+      right_fieldAlias: v.right_fieldAlias || v.right_column,
+      right_fieldUuid: v.right_fieldUuid || v.right_column_id,
+      right_quotes: v.right_quotes || v.right_column
+    };
+  });
+  return newMeta;
+}
 var FlagLocation;
 (function (FlagLocation) {
   FlagLocation["TABLE_1"] = "table1";
@@ -5411,8 +5629,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 {
@@ -5427,7 +5645,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);
+  }, [metaKey]);
   function selectColumns(e) {
     let columns = meta.columns;
     !meta.readonly && store.setPopup({
@@ -5496,8 +5719,9 @@ const JoinData = props => {
               name: tableName,
               tableUuid: data.tableUuid || uuidv4('table'),
               alias,
-              column: '',
-              column_id: '',
+              fieldAlias: '',
+              fieldUuid: '',
+              quotes: '',
               datasourceId: data.datasourceId,
               datasourceName: data.datasourceName
             };
@@ -5540,8 +5764,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'),
@@ -5659,11 +5884,21 @@ const JoinData = props => {
             sql,
             datasourceId,
             datasourceName,
-            id = ''
+            id = '',
+            fieldAlias = '',
+            fieldUuid = '',
+            quotes
           } = 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;
@@ -5691,8 +5926,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 || '',
@@ -5817,11 +6052,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
@@ -5903,10 +6150,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,
@@ -5924,8 +6172,8 @@ const JoinData = props => {
               newMeta[index].subquery = newList;
               newMeta[index].table2 = {
                 ...newList[0].table,
-                column: '',
-                column_id: ''
+                fieldAlias: '',
+                fieldUuid: ''
               };
               const items = getSubColumns(newList);
               const newColumns = items.flatMap(item => item.columns);
@@ -5950,8 +6198,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: '',
@@ -6084,23 +6333,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", {
@@ -6129,12 +6378,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, {
@@ -6173,12 +6422,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, {
@@ -6204,14 +6453,15 @@ 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_type: 'field',
@@ -6236,7 +6486,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,
@@ -6249,14 +6499,15 @@ 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_constant: '',
@@ -6407,12 +6658,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) {
@@ -6424,24 +6675,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,
@@ -6449,8 +6698,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();
         }
@@ -6466,16 +6720,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();
         }
@@ -6518,8 +6779,7 @@ const CaseEditor = props => {
   const _onOk = () => {
     typeof onOk === 'function' && onOk?.({
       name,
-      formulaList: caseList,
-      formula: ''
+      formulaList: caseList
     });
   };
   // 分段
@@ -6667,6 +6927,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`,
@@ -6804,13 +7065,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", {
@@ -6942,14 +7196,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,
@@ -7209,7 +7464,7 @@ const Filter = props => {
     let newMeta = store.metaList[groupIndex].list.slice();
     let val = filter[i];
     if (val.type === Filter_TypeEnum.NOT_EXISTS) {
-      showSubQuery(i, '');
+      showNotExists(i, '');
       return;
     }
     let data = getColumns();
@@ -7308,10 +7563,10 @@ const Filter = props => {
     newMeta[index].filter = [..._filter];
     setInd(-1);
   };
-  // 子查询弹窗
-  const showSubQuery = (i, position) => {
+  // NotExists 窗口
+  const showNotExists = (i, position) => {
     const {
-      subToolbar,
+      notExistsToolbar,
       toolbar,
       ...other
     } = store.preProps;
@@ -7319,12 +7574,13 @@ const Filter = props => {
     let index = findIndex(store.metaList[groupIndex].list, meta);
     let _value = position ? [] : newMeta[index].filter[i]?.subquery || [];
     let oldList = position ? [] : cloneDeep(newMeta[index].filter[i]?.subquery || []);
-    let _toolbar = subToolbar || toolbar;
+    let _toolbar = notExistsToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
     let o = Modal2.openModal({
       title: 'NOT EXISTS',
       transparentMask: true,
-      zIndex: 200,
+      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
@@ -7417,7 +7673,7 @@ const Filter = props => {
           if (type === Filter_TypeEnum.EXPRESSION) {
             handleAdd(_e);
           } else if (type === Filter_TypeEnum.NOT_EXISTS) {
-            showSubQuery(_index, _type);
+            showNotExists(_index, _type);
           }
         }
       })
@@ -7484,7 +7740,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
                   },
@@ -7660,7 +7916,7 @@ 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}`,
@@ -7694,8 +7950,8 @@ const GroupBy = props => {
       quotes: '',
       datasourceId: '',
       datasourceName: '',
-      column: '',
-      column_id: '',
+      // column: '',
+      // column_id: '',
       summarizeType: MetaSummarize_Enum.BY
     };
     store.setPopup({
@@ -7712,7 +7968,7 @@ 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}`,
@@ -7956,8 +8212,8 @@ const SelectIndex = props => {
       quotes: '',
       datasourceId: '',
       datasourceName: '',
-      column: '',
-      column_id: '',
+      // column: '',
+      // column_id: '',
       summarizeType: MetaSummarize_Enum.GROUP
     };
     store.setPopup({
@@ -8527,7 +8783,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,
@@ -8546,40 +8803,35 @@ const Metabase = props => {
   }, [store.popupData2]);
   const onSave = async () => {
     let intercept = false; // 是否返回
+    const _metaList = splitByUnion(store.metaList);
     store.metaList.map(v => {
-      if (v.type !== 'group' && !(v.list?.[0]).table.name) {
+      if (v.type !== 'union' && !(v.list?.[0]).table.name) {
         intercept = true;
         return Toast.warning(__('data.pleaseSelectDataTable'));
       }
     });
     if (saveLoading || intercept) return null;
     setSaveLoading(true);
-    if (store.toolbar.includes('group')) {
-      // 分组
-      await onOk?.(store.metaList);
-    } else {
-      // 非分组
-      await onOk?.(store.metaList[0].list);
-    }
+    await onOk?.(_metaList);
     setSaveLoading(false);
   };
-  let zIndex = popupContainer.current ? getMaxZIndexInParents(popupContainer.current) : null;
+  let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
   return (
     // @ts-ignore
     jsx(VisualBox, {
-      ref: popupContainer,
+      ref: store.popupContainer,
       children: jsxs("div", {
         className: 'Sqb',
         children: [store.metaList.map((v, index) => {
-          if (v.type === 'group' && v.operator) {
+          if (v.type === 'union' && v.union) {
             return jsx("div", {
               className: cx(`Sqb-list`),
               children: jsx(RowLimit$1, {
-                operator: v.operator,
+                union: v.union,
                 meta: v,
                 groupIndex: index
               })
-            }, 'group' + index);
+            }, 'union' + index);
           }
           return jsx("div", {
             className: cx(`Sqb-list`),
@@ -8604,8 +8856,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,
@@ -8616,8 +8868,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,
@@ -8666,15 +8918,9 @@ const SqlVisionBuilder = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     store.setProps(props);
   }, [props]);
   useEffect(() => {
-    if (toolbar.includes('group')) {
-      store.setPreData(value);
-    } else {
-      store.setPreData([{
-        name: 'default',
-        list: value
-      }]);
-    }
-  }, [value, toolbar]);
+    const _value = reassembleByUnion(value);
+    store.setPreData(_value);
+  }, [value]);
   useEffect(() => {
     store.setSourceList(sourceList);
   }, [sourceList]);