feat(flow-view): add zIndex management for views

packages/core/flow-engine/src/views/FlowView.tsx

@@ -48,7 +48,11 @@ type ViewProps = {
 
 type PopoverProps = AntdPopoverProps & {} & ViewProps & TargetProps;
 
+let zIndex = 0;
+
 export class FlowViewer {
+  public zIndex;
+
   constructor(
     protected ctx: FlowContext,
     protected types: {
@@ -57,10 +61,25 @@ export class FlowViewer {
       dialog: any;
       embed: any;
     },
-  ) {}
+  ) {
+    this.zIndex = zIndex + (ctx.themeToken.zIndexPopupBase || 1000);
+  }
+
+  getNextZIndex() {
+    return this.zIndex + 1;
+  }
+
   open(props: ViewProps & { type: ViewType } & TargetProps) {
     const { type, ...others } = props;
     if (this.types[type]) {
+      zIndex += 1;
+      const onClose = others.onClose;
+      const _zIndex = others.zIndex;
+      others.onClose = (...args) => {
+        onClose?.(...args);
+        zIndex -= 1;
+      };
+      others.zIndex = _zIndex ?? this.getNextZIndex();
       return this.types[type].open(others, this.ctx);
     } else {
       throw new Error(`Unknown view type: ${type}`);

packages/core/flow-engine/src/views/PageComponent.tsx

@@ -24,6 +24,7 @@ export const PageComponent = forwardRef((props: any, ref) => {
     hidden,
     title: _title,
     styles = {},
+    zIndex,
   } = mergedProps;
   const closedRef = useRef(false);
   const flowEngine = useFlowEngine();
@@ -58,8 +59,9 @@ export const PageComponent = forwardRef((props: any, ref) => {
       display: hidden ? 'none' : 'flex',
       flexDirection: 'column',
       height: '100%',
+      zIndex,
     }),
-    [hidden],
+    [hidden, zIndex],
   );
 
   // Header 组件