@nocobase/client-v2 2.1.0-alpha.40 → 2.1.0-alpha.45

package/src/flow/admin-shell/__tests__/AdminLayoutRouteCoordinator.test.ts

@@ -7,12 +7,13 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FlowContext, FlowEngine } from '@nocobase/flow-engine';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { getViewDiffAndUpdateHidden } from '../../getViewDiffAndUpdateHidden';
 import { getOpenViewStepParams } from '../../flows/openViewFlow';
-import { resolveViewParamsToViewList } from '../../resolveViewParamsToViewList';
+import { resolveViewParamsToViewList, updateViewListHidden } from '../../resolveViewParamsToViewList';
 import { AdminLayoutRouteCoordinator } from '../AdminLayoutRouteCoordinator';
+import { BaseLayoutRouteCoordinator, toViewStack } from '../BaseLayoutRouteCoordinator';
 import { RouteModel } from '../../models/base/RouteModel';
 
 vi.mock('../../resolveViewParamsToViewList', () => ({
@@ -36,6 +37,7 @@ vi.mock('../../flows/openViewFlow', async (importOriginal) => {
 const mockResolveViewParamsToViewList = vi.mocked(resolveViewParamsToViewList);
 const mockGetViewDiffAndUpdateHidden = vi.mocked(getViewDiffAndUpdateHidden);
 const mockGetOpenViewStepParams = vi.mocked(getOpenViewStepParams);
+const mockUpdateViewListHidden = vi.mocked(updateViewListHidden);
 
 function setupRouteReplay(viewParams: Record<string, any>) {
   const engine = new FlowEngine();
@@ -52,7 +54,7 @@ function setupRouteReplay(viewParams: Record<string, any>) {
     },
   });
 
-  const dispatchEvent = vi.fn(() => Promise.resolve());
+  const dispatchEvent = vi.fn((_eventName: string, _payload: any) => Promise.resolve());
   const viewItem = {
     params: {
       viewUid: 'popup',
@@ -81,6 +83,10 @@ function setupRouteReplay(viewParams: Record<string, any>) {
     active: true,
     layoutContentElement: document.createElement('div'),
   });
+  coordinator.syncRoute({
+    params: { name: 'test-route' },
+    pathname: '/admin/popup/filterbytk/member',
+  });
 
   return { dispatchEvent };
 }
@@ -114,4 +120,542 @@ describe('AdminLayoutRouteCoordinator', () => {
       triggerByRouter: true,
     });
   });
+
+  it('uses layout content element before route page placeholder as view target', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {},
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    const layoutContentElement = document.createElement('div');
+    const routePageElement = document.createElement('div');
+    const dispatchEvent = vi.fn((_eventName: string, _payload: any) => Promise.resolve());
+    const viewItem = {
+      params: { viewUid: 'test-route' },
+      modelUid: 'test-route',
+      model: { uid: 'test-route', dispatchEvent } as any,
+      hidden: { value: false },
+      index: 0,
+    };
+    mockResolveViewParamsToViewList.mockReturnValue([viewItem]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [viewItem],
+    });
+    mockGetOpenViewStepParams.mockReturnValue({} as any);
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/admin' });
+    coordinator.setLayoutContentElement(layoutContentElement);
+    coordinator.registerPage('test-route', {
+      active: true,
+      layoutContentElement: routePageElement,
+    });
+    coordinator.syncRoute({
+      pageUid: 'test-route',
+      pathname: '/admin/test-route',
+    });
+
+    expect(dispatchEvent.mock.calls[0][1].target).toBe(layoutContentElement);
+  });
+
+  it('replaces stale non-route model before registering route page', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    const staleModel = engine.createModel({
+      uid: 'test-route',
+      use: 'FlowModel',
+    });
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/admin' });
+
+    const routeModel = coordinator.registerPage('test-route', {
+      active: true,
+      layoutContentElement: document.createElement('div'),
+    });
+
+    expect(routeModel).toBeInstanceOf(RouteModel);
+    expect(engine.getModel('test-route')).toBe(routeModel);
+    expect(engine.getModel('test-route')).not.toBe(staleModel);
+  });
+
+  it('parses view stack with custom layout prefix', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-route' },
+        pathname: '/embed/test-route/view/popup/filterbytk/member',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    mockResolveViewParamsToViewList.mockReturnValue([]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/embed' });
+    coordinator.registerPage('test-route', {
+      active: true,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.syncRoute({
+      params: { name: 'test-route' },
+      pathname: '/embed/test-route/view/popup/filterbytk/member',
+    });
+
+    expect(mockResolveViewParamsToViewList).toHaveBeenCalledWith(
+      engine,
+      [{ viewUid: 'test-route' }, { viewUid: 'popup', filterByTk: 'member' }],
+      expect.anything(),
+    );
+  });
+
+  it('syncs view stack from layout route pageUid', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {},
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    mockResolveViewParamsToViewList.mockReturnValue([]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/embed' });
+    coordinator.registerPage('test-route', {
+      active: false,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.syncRoute({
+      pageUid: 'test-route',
+      pathname: '/embed/test-route/view/popup/filterbytk/member',
+    });
+
+    expect(mockResolveViewParamsToViewList).toHaveBeenLastCalledWith(
+      engine,
+      [{ viewUid: 'test-route' }, { viewUid: 'popup', filterByTk: 'member' }],
+      expect.anything(),
+    );
+  });
+
+  it('notifies cached route page activation when switching pages', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {},
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    const dispatchEvent = vi.fn((_eventName: string, payload: any) => {
+      payload.activateRef.current = vi.fn();
+      payload.deactivateRef.current = vi.fn();
+      return Promise.resolve();
+    });
+    const viewItem = {
+      params: { viewUid: 'test-route' },
+      modelUid: 'test-route',
+      model: { uid: 'test-route', dispatchEvent } as any,
+      hidden: { value: false },
+      index: 0,
+    };
+    mockResolveViewParamsToViewList.mockReturnValue([viewItem]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValueOnce({
+      viewsToClose: [],
+      viewsToOpen: [viewItem],
+    });
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/admin' });
+    coordinator.registerPage('test-route', {
+      active: false,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.syncRoute({
+      pageUid: 'test-route',
+      pathname: '/admin/test-route',
+    });
+
+    const payload = dispatchEvent.mock.calls[0][1];
+    expect(payload.pageActive).toBe(true);
+    expect(payload.activationControlledByLayout).toBe(true);
+
+    coordinator.syncRoute({
+      pageUid: 'other-route',
+      pathname: '/admin/other-route',
+    });
+    coordinator.syncRoute({
+      pageUid: 'test-route',
+      pathname: '/admin/test-route',
+    });
+
+    expect(payload.deactivateRef.current).toHaveBeenCalledTimes(1);
+    expect(payload.activateRef.current).toHaveBeenCalledWith(true);
+  });
+
+  it('syncs cached embed page visibility when switching pages', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {},
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    const viewItemsByPageUid = new Map<string, any>();
+    const createViewItem = (pageUid: string) => {
+      const dispatchEvent = vi.fn((_eventName: string, payload: any) => {
+        payload.activateRef.current = vi.fn();
+        payload.deactivateRef.current = vi.fn();
+        return Promise.resolve();
+      });
+      return {
+        params: { viewUid: pageUid },
+        modelUid: pageUid,
+        model: { uid: pageUid, dispatchEvent } as any,
+        hidden: { value: false },
+        index: 0,
+      };
+    };
+
+    mockResolveViewParamsToViewList.mockImplementation((_engine, viewParams) => {
+      const pageUid = viewParams[0].viewUid;
+      if (!viewItemsByPageUid.has(pageUid)) {
+        viewItemsByPageUid.set(pageUid, createViewItem(pageUid));
+      }
+      return [viewItemsByPageUid.get(pageUid)];
+    });
+    mockGetViewDiffAndUpdateHidden.mockImplementation((prevViewList, currentViewList) => ({
+      viewsToClose: prevViewList.filter((prevViewItem) => !currentViewList.includes(prevViewItem)),
+      viewsToOpen: currentViewList.filter((currentViewItem) => !prevViewList.includes(currentViewItem)),
+    }));
+    mockUpdateViewListHidden.mockImplementation((viewItems) => {
+      viewItems.forEach((viewItem) => {
+        viewItem.hidden.value = false;
+      });
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/admin' });
+    coordinator.registerPage('page-1', {
+      active: false,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.registerPage('page-3', {
+      active: false,
+      layoutContentElement: document.createElement('div'),
+    });
+
+    coordinator.syncRoute({
+      pageUid: 'page-3',
+      pathname: '/admin/page-3',
+    });
+    const page3ViewItem = viewItemsByPageUid.get('page-3');
+    expect(page3ViewItem.hidden.value).toBe(false);
+
+    coordinator.syncRoute({
+      pageUid: 'page-1',
+      pathname: '/admin/page-1',
+    });
+    const page1ViewItem = viewItemsByPageUid.get('page-1');
+    expect(page1ViewItem.hidden.value).toBe(false);
+    expect(page3ViewItem.hidden.value).toBe(true);
+
+    coordinator.syncRoute({
+      pageUid: 'page-3',
+      pathname: '/admin/page-3',
+    });
+    expect(page3ViewItem.hidden.value).toBe(false);
+    expect(page1ViewItem.hidden.value).toBe(true);
+  });
+
+  it('notifies cached route page activation when page meta active changes', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {},
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    const dispatchEvent = vi.fn((_eventName: string, payload: any) => {
+      payload.activateRef.current = vi.fn();
+      payload.deactivateRef.current = vi.fn();
+      return Promise.resolve();
+    });
+    const viewItem = {
+      params: { viewUid: 'test-route' },
+      modelUid: 'test-route',
+      model: { uid: 'test-route', dispatchEvent } as any,
+      hidden: { value: false },
+      index: 0,
+    };
+    mockResolveViewParamsToViewList.mockReturnValue([viewItem]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValueOnce({
+      viewsToClose: [],
+      viewsToOpen: [viewItem],
+    });
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/admin' });
+    coordinator.registerPage('test-route', {
+      active: true,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.syncRoute({
+      pageUid: 'test-route',
+      pathname: '/admin/test-route',
+    });
+
+    const payload = dispatchEvent.mock.calls[0][1];
+
+    coordinator.syncPageMeta('test-route', { active: false });
+    coordinator.syncPageMeta('test-route', { active: true });
+
+    expect(payload.deactivateRef.current).toHaveBeenCalledTimes(1);
+    expect(payload.activateRef.current).toHaveBeenCalledWith(true);
+  });
+
+  it('replays an initial deep link when step navigation does not trigger another route sync', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    const navigate = vi.fn();
+    engine.context.defineProperty('router', {
+      value: {
+        navigate,
+      },
+    });
+    engine.context.defineProperty('route', {
+      value: {},
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    const popupViewItem = {
+      params: { viewUid: 'popup', filterByTk: '1' },
+      modelUid: 'popup',
+      model: { uid: 'popup', dispatchEvent: vi.fn() } as any,
+      hidden: { value: false },
+      index: 1,
+    };
+    mockResolveViewParamsToViewList.mockImplementation((_engine, viewParams, routeModel) => [
+      {
+        params: viewParams[0],
+        modelUid: routeModel.uid,
+        model: routeModel,
+        hidden: { value: false },
+        index: 0,
+      },
+      popupViewItem,
+    ]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/admin' });
+    coordinator.registerPage('test-route', {
+      active: false,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.syncRoute({
+      pageUid: 'test-route',
+      pathname: '/admin/test-route/view/popup/filterbytk/1',
+    });
+
+    expect(navigate).toHaveBeenCalledWith('/admin/test-route', { replace: true });
+    expect(mockGetViewDiffAndUpdateHidden).not.toHaveBeenCalled();
+
+    await Promise.resolve();
+
+    expect(mockResolveViewParamsToViewList).toHaveBeenCalledTimes(2);
+    expect(mockGetViewDiffAndUpdateHidden).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not replay global route when a route page registers', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-route' },
+        pathname: '/embed/test-route/view/popup',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    mockResolveViewParamsToViewList.mockReturnValue([]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { basePathname: '/embed' });
+    coordinator.registerPage('test-route', {
+      active: false,
+      layoutContentElement: document.createElement('div'),
+    });
+
+    expect(mockResolveViewParamsToViewList).not.toHaveBeenCalled();
+    expect(engine.getModel('test-route')?.context.pageActive.value).toBe(false);
+  });
+
+  it('parses view stack with nested basePath', () => {
+    expect(
+      toViewStack('/admin/settings/public-forms/form-1/view/popup', {
+        basePathname: '/admin/settings/public-forms',
+      }),
+    ).toEqual([{ viewUid: 'form-1' }, { viewUid: 'popup' }]);
+  });
+
+  it('parses view stack for empty nested routePath from runtime basePathname', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'form-1' },
+        pathname: '/admin/settings/public-forms/form-1/view/popup/filterbytk/member',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    mockResolveViewParamsToViewList.mockReturnValue([]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, {
+      layout: {
+        routeName: 'admin.settings.publicForms.layout',
+        routePath: '',
+        rootRouteName: 'admin',
+        uid: 'public-form-layout-model',
+        layoutModelClass: 'PublicFormLayoutModel',
+        rootPageModelClass: 'RootPageModel',
+        childPageModelClass: 'ChildPageModel',
+        authCheck: true,
+      },
+    });
+    coordinator.registerPage('form-1', {
+      active: true,
+      layoutContentElement: document.createElement('div'),
+    });
+    coordinator.syncRoute({
+      layoutRouteName: 'admin.settings.publicForms.layout',
+      params: { name: 'form-1' },
+      pathname: '/admin/settings/public-forms/form-1/view/popup/filterbytk/member',
+      layoutBasePathname: '/admin/settings/public-forms',
+    });
+
+    expect(mockResolveViewParamsToViewList).toHaveBeenCalledWith(
+      engine,
+      [{ viewUid: 'form-1' }, { viewUid: 'popup', filterByTk: 'member' }],
+      expect.anything(),
+    );
+  });
+
+  it('does not parse relative layout routePath without runtime basePathname', () => {
+    expect(
+      toViewStack('/admin/settings/public-forms/form-1/view/popup', {
+        layout: {
+          routeName: 'admin.settings.publicForms',
+          routePath: 'public-forms',
+          rootRouteName: 'admin',
+          uid: 'public-form-layout-model',
+          layoutModelClass: 'PublicFormLayoutModel',
+          rootPageModelClass: 'RootPageModel',
+          childPageModelClass: 'ChildPageModel',
+          authCheck: true,
+        },
+      }),
+    ).toEqual([]);
+  });
+
+  it('exposes current layout on route model context', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RouteModel });
+    engine.context.defineProperty('route', {
+      value: {
+        params: { name: 'test-route' },
+        pathname: '/embed/test-route',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: vi.fn(() => ({})),
+      },
+    });
+
+    mockResolveViewParamsToViewList.mockReturnValue([]);
+    mockGetViewDiffAndUpdateHidden.mockReturnValue({
+      viewsToClose: [],
+      viewsToOpen: [],
+    });
+
+    const layout = {
+      routeName: 'embed',
+      routePath: '/embed',
+      rootRouteName: 'embed',
+      uid: 'embed-layout-model',
+      layoutModelClass: 'EmbedLayoutModelV2',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const layoutContext = new FlowContext();
+    layoutContext.defineProperty('layoutMarker', { value: 'layout-context' });
+
+    const coordinator = new BaseLayoutRouteCoordinator(engine, { layout, layoutContext });
+    coordinator.registerPage('test-route', {
+      active: true,
+      layoutContentElement: document.createElement('div'),
+    });
+
+    expect(engine.getModel('test-route')?.context.layout).toBe(layout);
+    expect(engine.getModel('test-route')?.context.layoutContext).toBe(layoutContext);
+    expect(engine.getModel('test-route')?.context.layoutMarker).toBe('layout-context');
+  });
 });

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -42,6 +42,7 @@ import {
   FLOW_SETTINGS_PREFERENCE_STORAGE_KEY,
   readFlowSettingsPreference,
 } from './flowSettingsPreference';
+import { useAppListRender } from './AppListRender';
 
 const className1 = css`
   height: var(--nb-header-height);
@@ -279,9 +280,9 @@ const MobileActions: FC = () => {
  * @param props
  * @returns
  */
-function SetIsMobileLayout(props: { isMobile: boolean; children: any }) {
+function SetIsMobileLayout(props: { isMobile: boolean; children: any; model?: AdminLayoutModel }) {
   const flowEngine = useFlowEngine();
-  const adminLayoutModel = flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
+  const adminLayoutModel = props.model || flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
 
   useEffect(() => {
     adminLayoutModel?.setIsMobileLayout(props.isMobile);
@@ -367,7 +368,7 @@ const renderMenuNodeWithModel = (
 
 export const AdminLayoutComponent = observer((props: any) => {
   const flowEngine = useFlowEngine();
-  const adminLayoutModel = flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
+  const adminLayoutModel = props.model || flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
   const [allAccessRoutes, setAllAccessRoutes] = useState<NocoBaseDesktopRoute[]>(
     () => flowEngine.context.routeRepository?.listAccessible?.() || [],
   );
@@ -391,7 +392,8 @@ export const AdminLayoutComponent = observer((props: any) => {
   );
   const designable = !isMobileSider && preferredFlowSettingsEnabled;
   const { styles } = useHeaderStyle();
-  const { Component: AppsComponent } = useApplications();
+  const { appList } = useApplications();
+  const appListRender = useAppListRender();
   const flowSettingsSyncRef = useRef(0);
   const desiredFlowSettingsEnabledRef = useRef(false);
   const handleLayoutContentElementChange = useCallback(
@@ -601,6 +603,31 @@ export const AdminLayoutComponent = observer((props: any) => {
       overflowedIndicatorPopupClassName: styles.headerPopup,
     };
   }, [styles.headerPopup]);
+  const appSwitcherStyle = useMemo(
+    () => css`
+      .ant-layout-header.ant-pro-layout-header,
+      .ant-pro-top-nav-header {
+        z-index: 101 !important;
+      }
+
+      .ant-pro-layout-apps-popover {
+        z-index: 2000 !important;
+      }
+
+      .ant-pro-layout-apps-icon {
+        color: ${customToken.colorTextHeaderMenu || 'rgba(255, 255, 255, 0.85)'};
+      }
+
+      .ant-pro-layout-apps-icon:hover,
+      .ant-pro-layout-apps-icon-active {
+        color: ${customToken.colorTextHeaderMenuHover ||
+        customToken.colorTextHeaderMenu ||
+        'rgba(255, 255, 255, 0.85)'};
+        background: ${customToken.colorBgHeaderMenuHover || 'rgba(255, 255, 255, 0.12)'};
+      }
+    `,
+    [customToken.colorBgHeaderMenuHover, customToken.colorTextHeaderMenu, customToken.colorTextHeaderMenuHover],
+  );
 
   const closeMobileMenu = useCallback(() => {
     if (!isMobileSider) {
@@ -634,16 +661,17 @@ export const AdminLayoutComponent = observer((props: any) => {
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}
-              className={resetStyle}
+              className={`${resetStyle} ${appSwitcherStyle}`}
               location={location}
               route={route}
               actionsRender={props.actionsRender || actionsRender}
               logo={
                 <div style={{ display: 'flex', alignItems: 'center' }}>
-                  {AppsComponent && <AppsComponent />}
                   <NocoBaseLogo />
                 </div>
               }
+              appList={appList}
+              appListRender={appListRender}
               title={''}
               layout="mix"
               splitMenus
@@ -666,7 +694,7 @@ export const AdminLayoutComponent = observer((props: any) => {
                   const { isMobile } = value;
 
                   return (
-                    <SetIsMobileLayout isMobile={isMobile}>
+                    <SetIsMobileLayout isMobile={isMobile} model={adminLayoutModel}>
                       <ConfigProvider theme={isMobile ? mobileTheme : theme}>
                         <GlobalStyle />
                         <AdminLayoutContent onContentElementChange={handleLayoutContentElementChange} />