@nocobase/client-v2 2.2.0-alpha.8 → 2.2.0-alpha.9

package/src/flow/components/filter/VariableFilterItem.tsx

@@ -131,6 +131,10 @@ export interface VariableFilterItemProps {
    * 默认使用整棵 ctx 的 metaTree：model.context.getPropertyMetaTree()
    */
   rightMetaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  /**
+   * 右侧变量的领域转换器。常量和空值仍由 VariableFilterItem 处理，未匹配的值回退到 FlowEngine 默认转换器。
+   */
+  rightVariableConverters?: Pick<Converters, 'resolvePathFromValue' | 'resolveValueFromPath'>;
   ignoreFieldNames?: string[];
   maxAssociationFieldDepth?: number;
 }
@@ -352,7 +356,16 @@ function findMetaTreeNodeByPath(metaTree: MetaTreeNode[], targetPath: string[]):
  * 上下文筛选项组件
  */
 export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
-  ({ value, model, disabled = false, rightAsVariable, rightMetaTree, ignoreFieldNames, maxAssociationFieldDepth }) => {
+  ({
+    value,
+    model,
+    disabled = false,
+    rightAsVariable,
+    rightMetaTree,
+    rightVariableConverters,
+    ignoreFieldNames,
+    maxAssociationFieldDepth,
+  }) => {
     // 使用 View 上下文，确保可访问 ctx.view 的异步子树
     const ctx = useFlowViewContext();
     const t = model.translate;
@@ -684,17 +697,19 @@ export const VariableFilterItem: React.FC<VariableFilterItemProps> = observer(
           const first = meta?.paths?.[0];
           if (first === 'constant') return '';
           if (first === 'null') return null;
-          return undefined; // 交给默认逻辑格式化变量表达式
+          return rightVariableConverters?.resolveValueFromPath?.(meta);
         },
         resolvePathFromValue: (val) => {
           if (val === null) return ['null'];
-          // 变量表达式：使用内置解析；其他静态值走 constant
-          const parsed = typeof val === 'string' ? parseValueToPath(val) : undefined;
+          // 变量表达式：优先使用领域转换器，再回退内置解析；其他静态值走 constant
+          const parsed =
+            rightVariableConverters?.resolvePathFromValue?.(val) ??
+            (typeof val === 'string' ? parseValueToPath(val) : undefined);
           if (parsed) return parsed;
           return ['constant'];
         },
       };
-    }, [NullComponent, staticInputRenderer]);
+    }, [NullComponent, rightVariableConverters, staticInputRenderer]);
 
     // 为 2.0 左侧字段选择器追加“接口 filterable.children”定义（如 chinaRegion 的“省市区名称”子项），
     // 以恢复 1.0 左侧子菜单的能力。

package/src/flow/components/filter/__tests__/VariableFilterItem.test.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { VariableFilterItem, VariableFilterItemValue } from '../VariableFilterItem';
-import { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { FlowEngine, FlowModel, type Converters, type MetaTreeNode } from '@nocobase/flow-engine';
 import { observable } from '@formily/reactive';
 import { createMockFlowApp, TestCollectionFieldInterface } from '../../../__tests__/helpers/mockFlowApp';
 
@@ -179,6 +179,54 @@ describe('VariableFilterItem', () => {
     expect(operatorSelect).toHaveClass('ant-select-disabled');
   });
 
+  it('composes custom right variable converters with constant, null, and core fallbacks', () => {
+    const value: VariableFilterItemValue = {
+      path: 'name',
+      operator: '$eq',
+      value: '{{$context.data.id}}',
+    };
+    const model = CreateModel();
+    const rightVariableConverters: Pick<Converters, 'resolvePathFromValue' | 'resolveValueFromPath'> = {
+      resolvePathFromValue: (input) => (input === '{{$context.data.id}}' ? ['$context', 'data', 'id'] : undefined),
+      resolveValueFromPath: (metaTreeNode) =>
+        metaTreeNode.paths?.[0] === '$context' ? `{{${metaTreeNode.paths.join('.')}}}` : undefined,
+    };
+
+    render(
+      <VariableFilterItem
+        value={value}
+        model={model}
+        rightAsVariable
+        rightVariableConverters={rightVariableConverters}
+      />,
+    );
+
+    const variableInputProps = (
+      globalThis as {
+        __LAST_VARIABLE_INPUT_PROPS__?: {
+          converters?: Converters;
+          value?: unknown;
+        };
+      }
+    ).__LAST_VARIABLE_INPUT_PROPS__;
+    const converters = variableInputProps?.converters;
+    const constantNode: MetaTreeNode = { name: 'constant', title: 'Constant', type: 'string', paths: ['constant'] };
+    const nullNode: MetaTreeNode = { name: 'null', title: 'Null', type: 'object', paths: ['null'] };
+    const workflowNode: MetaTreeNode = {
+      name: 'id',
+      title: 'ID',
+      type: 'number',
+      paths: ['$context', 'data', 'id'],
+    };
+
+    expect(variableInputProps?.value).toBe('{{$context.data.id}}');
+    expect(converters?.resolvePathFromValue?.('{{$context.data.id}}')).toEqual(['$context', 'data', 'id']);
+    expect(converters?.resolvePathFromValue?.('{{ ctx.$context.data.id }}')).toEqual(['$context', 'data', 'id']);
+    expect(converters?.resolveValueFromPath?.(constantNode)).toBe('');
+    expect(converters?.resolveValueFromPath?.(nullNode)).toBeNull();
+    expect(converters?.resolveValueFromPath?.(workflowNode)).toBe('{{$context.data.id}}');
+  });
+
   it('uses scoped context dataSourceManager when app dataSourceManager has no field interface manager', async () => {
     const value = observable({ path: '', operator: '', value: '' }) as any;
     const model = CreateModel();

package/src/flow/models/base/PageModel/PageModel.tsx

@@ -33,6 +33,7 @@ import { commonConditionHandler, ConditionBuilder } from '../../../components/Co
 import { TextAreaWithContextSelector } from '../../../components/TextAreaWithContextSelector';
 import { confirmUnsavedChangesHandler } from './closeGuard';
 import { BasePageTabModel } from './PageTabModel';
+import { FilteredPageTabBar, NO_ACTIVE_PAGE_TAB_KEY } from './PageModelTabBar';
 
 type PageModelStructure = {
   subModels: {
@@ -49,6 +50,54 @@ type PageModelContextWithRoute = {
   currentRoute?: CurrentRouteWithTabs | null;
 };
 
+type RequestedTabKey = {
+  key?: string;
+  source: 'url' | 'implicit' | 'props' | 'none';
+};
+
+type TabActiveResolution = RequestedTabKey & {
+  status: 'unspecified' | 'visible' | 'hidden' | 'unknown';
+  effectiveKey?: string;
+  allTabs: BasePageTabModel[];
+  unhiddenTabs: BasePageTabModel[];
+};
+
+type TabActiveKeySyncState = {
+  previousEffectiveActiveKey?: string;
+  effectiveActiveKey?: string;
+  previousAllHidden: boolean;
+  lastCorrectionSignature?: string;
+};
+
+type TabActiveKeySyncProps = {
+  dependencyKey: string;
+  onSync: (state: TabActiveKeySyncState) => TabActiveKeySyncState;
+};
+
+type LocallyCommittedTabTransition = {
+  activeKey: string;
+  previousActiveKey?: string;
+};
+
+function TabActiveKeySync({ dependencyKey, onSync }: TabActiveKeySyncProps) {
+  const previousEffectiveActiveKey = React.useRef<string>();
+  const previousAllHidden = React.useRef(false);
+  const lastCorrectionSignature = React.useRef<string>();
+
+  React.useEffect(() => {
+    const nextState = onSync({
+      previousEffectiveActiveKey: previousEffectiveActiveKey.current,
+      previousAllHidden: previousAllHidden.current,
+      lastCorrectionSignature: lastCorrectionSignature.current,
+    });
+    previousEffectiveActiveKey.current = nextState.effectiveActiveKey;
+    previousAllHidden.current = nextState.previousAllHidden;
+    lastCorrectionSignature.current = nextState.lastCorrectionSignature;
+  }, [dependencyKey, onSync]);
+
+  return null;
+}
+
 export class PageModel extends FlowModel<PageModelStructure> {
   tabBarExtraContent: { left?: ReactNode; right?: ReactNode } = {};
   private viewActivatedListener?: (_payload?: unknown) => void;
@@ -57,6 +106,8 @@ export class PageModel extends FlowModel<PageModelStructure> {
   private dirtyRefreshScheduled = false;
   private unmounted = false;
   private documentTitleUpdateVersion = 0;
+  private implicitActiveKey?: string;
+  private locallyCommittedTabTransition?: LocallyCommittedTabTransition;
 
   /**
    * 根页面标签页开关以路由表为准，避免 flow model 里的旧配置覆盖路由管理设置。
@@ -75,14 +126,277 @@ export class PageModel extends FlowModel<PageModelStructure> {
     return !!this.props.enableTabs;
   }
 
-  private getActiveTabKey(): string | undefined {
+  private getAllTabs(): BasePageTabModel[] {
+    return this.subModels?.tabs || [];
+  }
+
+  private getUnhiddenTabs(): BasePageTabModel[] {
+    return this.getAllTabs().filter((tab) => !tab.hidden);
+  }
+
+  private getRequestedTabKey(): RequestedTabKey {
     const viewParams = this.context.view?.navigation?.viewParams;
     if (viewParams) {
-      return viewParams.tabUid || this.getFirstTab()?.uid;
+      const urlKey = typeof viewParams.tabUid === 'string' && viewParams.tabUid ? viewParams.tabUid : undefined;
+      if (urlKey) {
+        this.implicitActiveKey = undefined;
+        return { key: urlKey, source: 'url' };
+      }
+
+      const activeKey =
+        typeof this.props.tabActiveKey === 'string' && this.props.tabActiveKey ? this.props.tabActiveKey : undefined;
+      if (activeKey && activeKey === this.implicitActiveKey) {
+        return { key: activeKey, source: 'implicit' };
+      }
+      return { source: 'none' };
+    }
+
+    const activeKey =
+      typeof this.props.tabActiveKey === 'string' && this.props.tabActiveKey ? this.props.tabActiveKey : undefined;
+    if (!activeKey) {
+      return { source: 'none' };
+    }
+    return { key: activeKey, source: activeKey === this.implicitActiveKey ? 'implicit' : 'props' };
+  }
+
+  private resolveTabActiveState(): TabActiveResolution {
+    const allTabs = this.getAllTabs();
+    const unhiddenTabs = this.getUnhiddenTabs();
+    const requested = this.getRequestedTabKey();
+
+    if (!requested.key) {
+      return {
+        ...requested,
+        status: 'unspecified',
+        effectiveKey: unhiddenTabs[0]?.uid,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    const requestedTab = allTabs.find((tab) => tab.uid === requested.key);
+    if (requested.source === 'implicit' && (!requestedTab || requestedTab.hidden)) {
+      return {
+        ...requested,
+        status: 'unspecified',
+        effectiveKey: unhiddenTabs[0]?.uid,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    if (!requestedTab) {
+      return {
+        ...requested,
+        status: 'unknown',
+        effectiveKey: requested.key,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    if (unhiddenTabs.some((tab) => tab.uid === requested.key)) {
+      return {
+        ...requested,
+        status: 'visible',
+        effectiveKey: requested.key,
+        allTabs,
+        unhiddenTabs,
+      };
+    }
+
+    return {
+      ...requested,
+      status: 'hidden',
+      effectiveKey: requested.key,
+      allTabs,
+      unhiddenTabs,
+    };
+  }
+
+  private getActiveTabKey(): string | undefined {
+    if (!this.getEnableTabs()) {
+      const firstTabKey = this.getFirstTab()?.uid;
+      if (firstTabKey) {
+        return firstTabKey;
+      }
+    }
+    return this.resolveTabActiveState().effectiveKey;
+  }
+
+  private getTabActiveKeySyncDependency() {
+    const allTabs = this.getAllTabs();
+    const unhiddenTabs = this.getUnhiddenTabs();
+    const viewParams = this.context.view?.navigation?.viewParams;
+    return JSON.stringify([
+      !!this.context.flowSettingsEnabled,
+      viewParams ? viewParams.tabUid || null : null,
+      this.props.tabActiveKey || null,
+      allTabs.map((tab) => tab.uid),
+      unhiddenTabs.map((tab) => tab.uid),
+      this.implicitActiveKey || null,
+    ]);
+  }
+
+  private requestDocumentTitleUpdate(preferredActiveTabKey?: string, retryCount = 0) {
+    this.updateDocumentTitle(preferredActiveTabKey, retryCount).catch((error) => {
+      console.warn('[PageModel] Failed to update document title', error);
+    });
+  }
+
+  private rememberImplicitActiveKey(activeKey: string) {
+    this.implicitActiveKey = activeKey;
+    if (this.props.tabActiveKey !== activeKey) {
+      this.setProps('tabActiveKey', activeKey);
+    }
+  }
+
+  private commitTabActiveKey(
+    activeKey: string | undefined,
+    options: {
+      previousActiveKey?: string;
+      navigate: boolean;
+      preserveImplicitKey?: boolean;
+      rememberLocalTransition?: boolean;
+    },
+  ) {
+    const { previousActiveKey, navigate, preserveImplicitKey = false, rememberLocalTransition = false } = options;
+    if (rememberLocalTransition && activeKey) {
+      this.locallyCommittedTabTransition = { activeKey, previousActiveKey };
+    }
+    this.implicitActiveKey = activeKey && preserveImplicitKey ? activeKey : undefined;
+
+    if (navigate) {
+      this.context.view?.navigation?.changeTo?.({ tabUid: activeKey });
+    }
+
+    if (activeKey && activeKey !== previousActiveKey) {
+      this.invokeTabModelLifecycleMethod(activeKey, 'onActive');
+    }
+    if (previousActiveKey && previousActiveKey !== activeKey) {
+      this.invokeTabModelLifecycleMethod(previousActiveKey, 'onInactive');
+    }
+    this.setProps('tabActiveKey', activeKey);
+
+    if (!activeKey) {
+      this.requestDocumentTitleUpdate();
+    }
+  }
+
+  private consumeLocallyCommittedTabTransition(previousActiveKey: string | undefined, activeKey: string | undefined) {
+    const transition = this.locallyCommittedTabTransition;
+    if (!transition || !activeKey) {
+      return false;
+    }
+    if (transition.activeKey === activeKey && transition.previousActiveKey === previousActiveKey) {
+      this.locallyCommittedTabTransition = undefined;
+      return true;
     }
-    return this.props.tabActiveKey || this.getFirstTab()?.uid;
+    if (activeKey !== transition.previousActiveKey) {
+      this.locallyCommittedTabTransition = undefined;
+    }
+    return false;
   }
 
+  private synchronizeTabActiveKey = (state: TabActiveKeySyncState): TabActiveKeySyncState => {
+    const resolution = this.resolveTabActiveState();
+    const allHidden = resolution.allTabs.length > 0 && resolution.unhiddenTabs.length === 0;
+    const createNextState = (effectiveActiveKey: string | undefined, lastCorrectionSignature?: string) => ({
+      previousEffectiveActiveKey: effectiveActiveKey,
+      effectiveActiveKey,
+      previousAllHidden: allHidden,
+      lastCorrectionSignature,
+    });
+
+    if (resolution.status === 'unknown') {
+      return createNextState(resolution.effectiveKey);
+    }
+
+    if (resolution.status === 'visible') {
+      const activeKey = resolution.effectiveKey;
+      if (this.consumeLocallyCommittedTabTransition(state.previousEffectiveActiveKey, activeKey)) {
+        return createNextState(activeKey);
+      }
+      const shouldActivateAfterRestore = state.previousAllHidden && resolution.source !== 'url';
+      const shouldSyncChangedVisibleKey =
+        !!state.previousEffectiveActiveKey && state.previousEffectiveActiveKey !== activeKey;
+      if ((shouldActivateAfterRestore || shouldSyncChangedVisibleKey) && activeKey) {
+        const signature = `visible:${resolution.source}:${state.previousEffectiveActiveKey || ''}->${activeKey}`;
+        if (signature !== state.lastCorrectionSignature) {
+          this.commitTabActiveKey(activeKey, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+            preserveImplicitKey: resolution.source === 'implicit',
+          });
+        }
+        return createNextState(activeKey, signature);
+      }
+      return createNextState(activeKey);
+    }
+
+    if (resolution.status === 'hidden') {
+      const activeKey = resolution.effectiveKey;
+      if (this.consumeLocallyCommittedTabTransition(state.previousEffectiveActiveKey, activeKey)) {
+        return createNextState(activeKey);
+      }
+      if (activeKey && state.previousEffectiveActiveKey !== activeKey) {
+        const signature = `hidden:${resolution.source}:${state.previousEffectiveActiveKey || ''}->${activeKey}`;
+        if (signature !== state.lastCorrectionSignature) {
+          this.commitTabActiveKey(activeKey, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+          });
+        }
+        return createNextState(activeKey, signature);
+      }
+      return createNextState(activeKey);
+    }
+
+    const activeKey = resolution.effectiveKey;
+    if (!activeKey) {
+      if (!allHidden) {
+        if (resolution.source !== 'implicit' || !resolution.key) {
+          return createNextState(undefined);
+        }
+        const signature = `implicit-missing:${state.previousEffectiveActiveKey || ''}`;
+        if (signature !== state.lastCorrectionSignature) {
+          this.commitTabActiveKey(undefined, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+          });
+        }
+        return createNextState(undefined, signature);
+      }
+      const signature = `all-hidden:${state.previousEffectiveActiveKey || ''}`;
+      if (!state.previousAllHidden && signature !== state.lastCorrectionSignature) {
+        this.implicitActiveKey = undefined;
+        if (this.props.tabActiveKey || state.previousEffectiveActiveKey) {
+          this.commitTabActiveKey(undefined, {
+            previousActiveKey: state.previousEffectiveActiveKey,
+            navigate: false,
+          });
+        } else {
+          this.requestDocumentTitleUpdate();
+        }
+      }
+      return createNextState(undefined, signature);
+    }
+
+    const shouldSwitchImplicitActiveKey =
+      state.previousAllHidden || (!!state.previousEffectiveActiveKey && state.previousEffectiveActiveKey !== activeKey);
+    const signature = `implicit:${state.previousEffectiveActiveKey || ''}->${activeKey}`;
+    if (shouldSwitchImplicitActiveKey && signature !== state.lastCorrectionSignature) {
+      this.commitTabActiveKey(activeKey, {
+        previousActiveKey: state.previousEffectiveActiveKey,
+        navigate: false,
+        preserveImplicitKey: true,
+      });
+    } else {
+      this.rememberImplicitActiveKey(activeKey);
+    }
+    return createNextState(activeKey, shouldSwitchImplicitActiveKey ? signature : undefined);
+  };
+
   private scheduleActiveLifecycleRefresh(forceRefresh = false): void {
     if (this.dirtyRefreshScheduled) return;
     this.dirtyRefreshScheduled = true;
@@ -107,7 +421,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
   }
 
   deactivateCurrentTab() {
-    const activeKey = this.props.tabActiveKey || this.getFirstTab()?.uid;
+    const activeKey = this.getActiveTabKey();
     if (activeKey) {
       this.invokeTabModelLifecycleMethod(activeKey, 'onInactive');
     }
@@ -116,9 +430,10 @@ export class PageModel extends FlowModel<PageModelStructure> {
   onMount(): void {
     super.onMount();
     this.unmounted = false;
+    this.implicitActiveKey = undefined;
     this.setProps('tabActiveKey', this.context.view.inputArgs?.tabUid);
     if (this.context?.pageInfo) this.context.pageInfo.version = 'v2';
-    void this.updateDocumentTitle();
+    this.requestDocumentTitleUpdate();
 
     // When a nested view (popup/page) is closed, the opener view becomes active again.
     // We align this with the existing tab lifecycle by invoking `onActive` for the current tab blocks.
@@ -189,7 +504,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
     }
 
     if (method === 'onActive') {
-      void this.updateDocumentTitle(tabActiveKey);
+      this.requestDocumentTitleUpdate(tabActiveKey);
     }
   }
 
@@ -236,11 +551,15 @@ export class PageModel extends FlowModel<PageModelStructure> {
       }
     };
 
+    const unhiddenTabs = this.getUnhiddenTabs();
+    const activeTabKey = preferredActiveTabKey || this.getActiveTabKey();
+    const shouldUsePageTitle = !this.getEnableTabs() || (!activeTabKey && unhiddenTabs.length === 0);
+
     let nextTitle = '';
-    if (this.getEnableTabs()) {
-      const activeTabKey = preferredActiveTabKey || this.getActiveTabKey();
+    if (!shouldUsePageTitle) {
       const activeTabModel = activeTabKey
-        ? (this.flowEngine.getModel(activeTabKey) as BasePageTabModel | undefined)
+        ? this.findSubModel('tabs', (model) => model.uid === activeTabKey) ||
+          (this.flowEngine.getModel(activeTabKey) as BasePageTabModel | undefined)
         : this.getFirstTab();
       if (!activeTabModel && retryCount < 5) {
         window.setTimeout(() => {
@@ -251,7 +570,7 @@ export class PageModel extends FlowModel<PageModelStructure> {
           if (updateVersion !== this.documentTitleUpdateVersion) {
             return;
           }
-          void this.updateDocumentTitle(activeTabKey, retryCount + 1);
+          this.requestDocumentTitleUpdate(activeTabKey, retryCount + 1);
         }, 0);
         return;
       }
@@ -293,33 +612,31 @@ export class PageModel extends FlowModel<PageModelStructure> {
 
   mapTabs() {
     return this.mapSubModels('tabs', (model) => {
-      return !this.context.flowSettingsEnabled && model.hidden
-        ? null
-        : {
-            key: model.uid,
-            label: (
-              <Droppable model={model}>
-                <FlowModelRenderer
-                  model={model}
-                  showFlowSettings={{
-                    showBackground: true,
-                    showBorder: false,
-                    toolbarPosition: 'above',
-                    style: { transform: 'translateY(8px)' },
-                  }}
-                  extraToolbarItems={[
-                    {
-                      key: 'drag-handler',
-                      component: DragHandler,
-                      sort: 1,
-                    },
-                  ]}
-                />
-              </Droppable>
-            ),
-            children: model.renderChildren(),
-          };
-    }).filter(Boolean);
+      return {
+        key: model.uid,
+        label: (
+          <Droppable model={model}>
+            <FlowModelRenderer
+              model={model}
+              showFlowSettings={{
+                showBackground: true,
+                showBorder: false,
+                toolbarPosition: 'above',
+                style: { transform: 'translateY(8px)' },
+              }}
+              extraToolbarItems={[
+                {
+                  key: 'drag-handler',
+                  component: DragHandler,
+                  sort: 1,
+                },
+              ]}
+            />
+          </Droppable>
+        ),
+        children: model.renderChildren(),
+      };
+    });
   }
 
   getFirstTab() {
@@ -336,6 +653,17 @@ export class PageModel extends FlowModel<PageModelStructure> {
   }
 
   renderTabs() {
+    const activeState = this.resolveTabActiveState();
+    const tabItems = this.mapTabs();
+    const hiddenTabKeys = new Set(
+      this.context.flowSettingsEnabled ? [] : activeState.allTabs.filter((tab) => tab.hidden).map((tab) => tab.uid),
+    );
+    const hiddenActiveTabLabel =
+      activeState.status === 'hidden'
+        ? activeState.allTabs.find((tab) => tab.uid === activeState.effectiveKey)?.getTabTitle?.()
+        : undefined;
+    const tabsActiveKey =
+      activeState.effectiveKey || (activeState.allTabs.length > 0 ? NO_ACTIVE_PAGE_TAB_KEY : undefined);
     const tabNavPaddingInlineStart = this.context.themeToken?.paddingLG ?? 16;
     const leftExtraContent =
       this.tabBarExtraContent.left !== undefined ? (
@@ -366,25 +694,31 @@ export class PageModel extends FlowModel<PageModelStructure> {
 
     return (
       <DndProvider onDragEnd={this.handleDragEnd.bind(this)}>
+        <TabActiveKeySync dependencyKey={this.getTabActiveKeySyncDependency()} onSync={this.synchronizeTabActiveKey} />
         <Tabs
-          activeKey={
-            this.context.view?.navigation?.viewParams
-              ? this.context.view.navigation.viewParams.tabUid || this.getFirstTab()?.uid
-              : this.props.tabActiveKey
-          }
+          activeKey={tabsActiveKey}
           tabBarStyle={this.props.tabBarStyle}
-          items={this.mapTabs()}
+          items={tabItems}
+          renderTabBar={
+            hiddenTabKeys.size > 0
+              ? (tabBarProps) => (
+                  <FilteredPageTabBar
+                    hiddenTabKeys={hiddenTabKeys}
+                    hiddenActiveTabLabel={hiddenActiveTabLabel}
+                    items={tabItems}
+                    tabBarProps={tabBarProps}
+                  />
+                )
+              : undefined
+          }
           onChange={(activeKey) => {
-            const previousActiveKey = this.props.tabActiveKey || this.getActiveTabKey();
-            this.context.view.navigation?.changeTo?.({
-              tabUid: activeKey,
+            const previousActiveKey = this.getActiveTabKey();
+            this.implicitActiveKey = undefined;
+            this.commitTabActiveKey(activeKey, {
+              previousActiveKey,
+              navigate: !!this.context.view?.navigation,
+              rememberLocalTransition: true,
             });
-
-            this.invokeTabModelLifecycleMethod(activeKey, 'onActive');
-            if (previousActiveKey && previousActiveKey !== activeKey) {
-              this.invokeTabModelLifecycleMethod(previousActiveKey, 'onInactive');
-            }
-            this.setProps('tabActiveKey', activeKey);
           }}
           // destroyInactiveTabPane
           tabBarExtraContent={{
@@ -527,7 +861,7 @@ PageModel.registerFlow({
             marginBottom: 0,
           });
         }
-        void (ctx.model as PageModel).updateDocumentTitle();
+        await (ctx.model as PageModel).updateDocumentTitle();
       },
     },
   },