@nocobase/client-v2 2.2.0-beta.8 → 2.2.0

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

@@ -285,13 +285,44 @@ function SetIsMobileLayout(props: { isMobile: boolean; children: any; model?: Ad
   const flowEngine = useFlowEngine();
   const adminLayoutModel = props.model || flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     adminLayoutModel?.setIsMobileLayout(props.isMobile);
   }, [adminLayoutModel, props.isMobile]);
 
   return props.children;
 }
 
+function AdminLayoutContentWithMobileState(props: {
+  isMobile: boolean;
+  model?: AdminLayoutModel;
+  designable?: boolean;
+  layout?: AdminLayoutModel['layout'];
+  onContentElementChange?: (element: HTMLDivElement | null) => void;
+}) {
+  const modelRef = useRef(props.model);
+  const isMobileRef = useRef(props.isMobile);
+  const onContentElementChangeRef = useRef(props.onContentElementChange);
+
+  modelRef.current = props.model;
+  isMobileRef.current = props.isMobile;
+  onContentElementChangeRef.current = props.onContentElementChange;
+
+  const handleContentElementChange = useCallback((element: HTMLDivElement | null) => {
+    if (element) {
+      modelRef.current?.setIsMobileLayout(isMobileRef.current);
+    }
+    onContentElementChangeRef.current?.(element);
+  }, []);
+
+  return (
+    <AdminLayoutContent
+      designable={props.designable}
+      layout={props.layout}
+      onContentElementChange={handleContentElementChange}
+    />
+  );
+}
+
 const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRoute?: NocoBaseDesktopRoute }> = (
   props,
 ) => {
@@ -410,8 +441,8 @@ export const AdminLayoutComponent = observer((props: any) => {
   );
   const designable = !isMobileSider && preferredFlowSettingsEnabled;
   const { styles } = useHeaderStyle();
-  const { appList } = useApplications();
-  const appListRender = useAppListRender();
+  const { appList, appSwitcherModel } = useApplications(adminLayoutModel);
+  const appListRender = useAppListRender(appSwitcherModel);
   const flowSettingsSyncRef = useRef(0);
   const desiredFlowSettingsEnabledRef = useRef(false);
   const handleLayoutContentElementChange = useCallback(
@@ -634,6 +665,10 @@ export const AdminLayoutComponent = observer((props: any) => {
         z-index: 2000 !important;
       }
 
+      .ant-pro-layout-apps-popover .ant-popover-content {
+        margin-top: 12px;
+      }
+
       .ant-pro-layout-apps-icon {
         color: ${customToken.colorTextHeaderMenu || 'rgba(255, 255, 255, 0.85)'};
       }
@@ -677,7 +712,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}
@@ -717,7 +751,9 @@ export const AdminLayoutComponent = observer((props: any) => {
                     <SetIsMobileLayout isMobile={isMobile} model={adminLayoutModel}>
                       <ConfigProvider theme={isMobile ? mobileTheme : theme}>
                         <GlobalStyle />
-                        <AdminLayoutContent
+                        <AdminLayoutContentWithMobileState
+                          isMobile={isMobile}
+                          model={adminLayoutModel}
                           designable={designable}
                           layout={adminLayoutModel?.layout}
                           onContentElementChange={handleLayoutContentElementChange}

package/src/flow/admin-shell/admin-layout/AdminLayoutEntryGuard.test.tsx

@@ -10,8 +10,9 @@
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import { createMemoryRouter, Outlet, RouterProvider } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
+import { NocoBaseDesktopRouteType } from '../../../flow-compat';
 import { RouteRepository } from '../../../RouteRepository';
 import { AdminLayoutEntryGuard } from './AdminLayoutEntryGuard';
 import type { AdminLayoutModel } from './AdminLayoutModel';
@@ -307,4 +308,179 @@ describe('AdminLayoutEntryGuard', () => {
     expect(activateLayout).toHaveBeenCalledTimes(2);
     expect(activateLayout).toHaveBeenLastCalledWith(expect.objectContaining({ uid: 'admin-layout-next' }));
   });
+
+  it('should redirect group id paths to the first v2 landing route', async () => {
+    const modernWindow = window as Window & { __nocobase_modern_client_prefix__?: string };
+    modernWindow.__nocobase_modern_client_prefix__ = 'v2';
+    const engine = new FlowEngine();
+    const request = vi.fn().mockResolvedValue({
+      data: {
+        data: [],
+      },
+    });
+    const routeRepository = new RouteRepository({
+      api: {
+        request,
+        resource: vi.fn(),
+      },
+    } as never);
+    routeRepository.setRoutes([
+      {
+        id: 1,
+        title: 'Group',
+        type: NocoBaseDesktopRouteType.group,
+        children: [
+          {
+            id: 11,
+            title: 'Flow page',
+            schemaUid: 'flow-page-1',
+            type: NocoBaseDesktopRouteType.flowPage,
+          },
+        ],
+      },
+    ]);
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/apps/demo/v2/',
+        router: {
+          getBasename: () => '/apps/demo/v2',
+        },
+      },
+    });
+
+    const model = {
+      layout: {
+        routeName: 'admin',
+        routePath: '/admin',
+        uid: 'admin-layout-model',
+      },
+    } as AdminLayoutModel;
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/admin',
+          id: 'admin',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <AdminLayoutEntryGuard model={model}>
+                <Outlet />
+              </AdminLayoutEntryGuard>
+            </FlowEngineProvider>
+          ),
+          children: [
+            {
+              path: ':name',
+              id: 'admin.__page',
+              element: <div>Admin page shell</div>,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/1'],
+      },
+    );
+
+    try {
+      render(<RouterProvider router={router} />);
+
+      await waitFor(() => {
+        expect(router.state.location.pathname).toBe('/admin/flow-page-1');
+      });
+      expect(await screen.findByText('Admin page shell')).toBeInTheDocument();
+    } finally {
+      delete modernWindow.__nocobase_modern_client_prefix__;
+    }
+  });
+
+  it('should prefer schema uid routes before resolving numeric group ids', async () => {
+    const modernWindow = window as Window & { __nocobase_modern_client_prefix__?: string };
+    modernWindow.__nocobase_modern_client_prefix__ = 'v2';
+    const engine = new FlowEngine();
+    const routeRepository = {
+      activateLayout: vi.fn(() => vi.fn()),
+      ensureAccessibleLoaded: vi.fn().mockResolvedValue([]),
+      isAccessibleLoaded: vi.fn(() => true),
+      getRouteBySchemaUid: vi.fn((pageUid: string) =>
+        pageUid === '1'
+          ? {
+              schemaUid: '1',
+              type: NocoBaseDesktopRouteType.flowPage,
+            }
+          : undefined,
+      ),
+      getRouteById: vi.fn((routeId: string) =>
+        routeId === '1'
+          ? {
+              id: 1,
+              type: NocoBaseDesktopRouteType.group,
+              children: [
+                {
+                  schemaUid: 'flow-page-1',
+                  type: NocoBaseDesktopRouteType.flowPage,
+                },
+              ],
+            }
+          : undefined,
+      ),
+      listAccessible: vi.fn(() => []),
+    };
+    engine.context.defineProperty('routeRepository', {
+      value: routeRepository,
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/apps/demo/v2/',
+        router: {
+          getBasename: () => '/apps/demo/v2',
+        },
+      },
+    });
+
+    const model = {
+      layout: {
+        routeName: 'admin',
+        routePath: '/admin',
+        uid: 'admin-layout-model',
+      },
+    } as AdminLayoutModel;
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/admin',
+          id: 'admin',
+          element: (
+            <FlowEngineProvider engine={engine}>
+              <AdminLayoutEntryGuard model={model}>
+                <Outlet />
+              </AdminLayoutEntryGuard>
+            </FlowEngineProvider>
+          ),
+          children: [
+            {
+              path: ':name',
+              id: 'admin.__page',
+              element: <div>Admin page shell</div>,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/1'],
+      },
+    );
+
+    try {
+      render(<RouterProvider router={router} />);
+
+      await screen.findByText('Admin page shell');
+      expect(router.state.location.pathname).toBe('/admin/1');
+      expect(routeRepository.getRouteById).not.toHaveBeenCalled();
+    } finally {
+      delete modernWindow.__nocobase_modern_client_prefix__;
+    }
+  });
 });

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

@@ -132,6 +132,26 @@ export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode; model?: Admi
           }
         }
 
+        const groupRoute = currentRoute ? undefined : routeRepository?.getRouteById?.(pageUid);
+        if (!currentRoute && groupRoute?.type === NocoBaseDesktopRouteType.group) {
+          const target = resolveAdminRouteRuntimeTarget({
+            app,
+            route: groupRoute,
+            layout: layoutRuntime,
+          });
+
+          if (target.runtimePath) {
+            replaceTriggeredRef.current = true;
+            if (target.navigationMode === 'document') {
+              window.location.replace(target.runtimePath);
+              return;
+            }
+
+            navigate(toRouterNavigationPath(target.runtimePath, app.router.getBasename()), { replace: true });
+            return;
+          }
+        }
+
         if (active) {
           setReady(true);
         }

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

@@ -17,7 +17,7 @@ import {
   FlowSettingsButton,
   observer,
 } from '@nocobase/flow-engine';
-import { Badge, Tooltip } from 'antd';
+import { Badge } from 'antd';
 import qs from 'qs';
 import React, { FC, useCallback, useContext, useEffect } from 'react';
 import { Link, useLocation, type NavigateFunction } from 'react-router-dom';
@@ -153,6 +153,24 @@ const getLayoutRoutePathFromModel = (model: FlowModel): AdminLayoutRoutePathLike
 };
 
 const menuItemStyle = { display: 'flex', alignItems: 'center', justifyContent: 'space-between' };
+const siderMenuItemStyle: React.CSSProperties = { ...menuItemStyle, width: '100%', minWidth: 0 };
+const siderMenuItemContentStyle: React.CSSProperties = { flex: 1, minWidth: 0, overflow: 'hidden' };
+const siderMenuItemLinkStyle: React.CSSProperties = {
+  display: 'block',
+  flex: 1,
+  width: '100%',
+  minWidth: 0,
+  overflow: 'hidden',
+};
+const getMenuItemText = (name: React.ReactNode) => {
+  if (typeof name === 'string' || typeof name === 'number') {
+    return String(name);
+  }
+
+  if (React.isValidElement<{ title?: unknown }>(name) && typeof name.props.title === 'string') {
+    return name.props.title;
+  }
+};
 const groupLandingEntryStyle = {
   display: 'inline-flex',
   alignItems: 'center',
@@ -553,16 +571,16 @@ export function resolveAdminLayoutMenuDragMoveOptionsFromEvent(
 
 const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
+  const { inHeader } = useContext(HeaderContext);
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
   const navigate = useNavigateNoUpdate();
   const routerBasename = useRouterBasename();
   const { closeMobileMenu } = useContext(MobileMenuControlContext);
   const ariaLabel =
-    typeof item.name === 'string' || typeof item.name === 'number'
-      ? String(item.name)
-      : typeof item._route?.title === 'string' || typeof item._route?.title === 'number'
-        ? String(item._route.title)
-        : undefined;
+    getMenuItemText(item.name) ??
+    (typeof item._route?.title === 'string' || typeof item._route?.title === 'number'
+      ? String(item._route.title)
+      : undefined);
   const runtimePath = item._runtimePath;
   const spaRuntimePath = runtimePath ? toRouterNavigationPath(runtimePath, routerBasename) : runtimePath;
 
@@ -633,7 +651,12 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
   return (
     <ParentRouteContext.Provider value={item._parentRoute}>
       <NocoBaseRouteContext.Provider value={item._route}>
-        <div aria-label={ariaLabel} role="none" style={menuItemStyle}>
+        <div
+          aria-label={ariaLabel}
+          title={inHeader || item._route?.tooltip ? undefined : ariaLabel}
+          role="none"
+          style={inHeader ? menuItemStyle : siderMenuItemStyle}
+        >
           {content}
           {landingEntry}
           {badgeCount != null && (
@@ -650,24 +673,9 @@ const GroupItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRender
   );
 };
 
-const WithTooltip: FC<{ title: React.ReactNode; hidden: boolean; badgeProps: any }> = (props) => {
-  const { inHeader } = useContext(HeaderContext);
-
-  if (props.hidden || inHeader) {
-    return props.children;
-  }
-
-  return (
-    <Tooltip title={props.title} placement="right">
-      <Badge {...props.badgeProps} style={{ transform: 'none', maxWidth: '10em' }} dot={false}>
-        {props.children}
-      </Badge>
-    </Tooltip>
-  );
-};
-
 const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderOptions }> = (props) => {
   const { item } = props;
+  const { inHeader } = useContext(HeaderContext);
   const location = useLocation();
   const badgeCount = useEvaluatedExpression(item._route.options?.badge?.count, item._model?.context);
   const navigate = useNavigateNoUpdate();
@@ -677,7 +685,10 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
   const runtimePath = item._runtimePath || path;
   const spaRuntimePath = runtimePath ? toRouterNavigationPath(runtimePath, basenameOfCurrentRouter) : runtimePath;
   const isDocumentNavigation = item._navigationMode === 'document';
-  const badgeProps = { ...item._route.options?.badge, count: badgeCount };
+  const { textColor: badgeTextColor, ...antdBadgeOptions } = item._route.options?.badge || {};
+  const badgeProps = { ...antdBadgeOptions, count: badgeCount };
+  const menuItemText = getMenuItemText(item.name);
+  const nativeTitle = inHeader || item._route?.tooltip ? undefined : menuItemText;
 
   const canUseNativeAnchor = !!runtimePath && isDocumentNavigation;
 
@@ -767,17 +778,25 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
     return (
       <ParentRouteContext.Provider value={item._parentRoute}>
         <NocoBaseRouteContext.Provider value={item._route}>
-          <div role="none" style={menuItemStyle}>
-            <div onClick={handleClickLink}>
-              <Link to={location.pathname} aria-label={typeof item.name === 'string' ? item.name : undefined}>
+          <div role="none" style={inHeader ? menuItemStyle : siderMenuItemStyle}>
+            <div onClick={handleClickLink} style={inHeader ? undefined : siderMenuItemContentStyle}>
+              <Link
+                to={location.pathname}
+                aria-label={menuItemText}
+                title={nativeTitle}
+                style={inHeader ? undefined : siderMenuItemLinkStyle}
+              >
                 {props.children}
               </Link>
             </div>
             {badgeCount != null && (
               <Badge
-                {...item._route.options?.badge}
-                count={badgeCount}
-                style={{ marginLeft: 4, color: item._route.options?.badge?.textColor, maxWidth: '10em' }}
+                {...badgeProps}
+                style={{
+                  marginLeft: 4,
+                  ...(badgeTextColor == null ? {} : { color: badgeTextColor }),
+                  maxWidth: '10em',
+                }}
                 dot={false}
               ></Badge>
             )}
@@ -787,45 +806,45 @@ const MenuItem: FC<{ item: AdminLayoutMenuNode; options?: AdminLayoutMenuRenderO
     );
   }
 
-  const itemContent = (
-    <WithTooltip
-      title={item.name}
-      hidden={
-        item._route.type === NocoBaseDesktopRouteType.group || (item._depth || 0) > 0 || !props.options?.collapsed
-      }
-      badgeProps={badgeProps}
+  const itemContent = canUseNativeAnchor ? (
+    <a
+      href={runtimePath}
+      aria-label={menuItemText}
+      title={nativeTitle}
+      onClick={handleClickMenuItem}
+      style={inHeader ? undefined : siderMenuItemLinkStyle}
     >
-      {canUseNativeAnchor ? (
-        <a
-          href={runtimePath}
-          aria-label={typeof item.name === 'string' ? item.name : undefined}
-          onClick={handleClickMenuItem as any}
-        >
-          {props.children}
-        </a>
-      ) : runtimePath ? (
-        <Link
-          to={spaRuntimePath}
-          aria-label={typeof item.name === 'string' ? item.name : undefined}
-          onClick={handleClickMenuItem}
-        >
-          {props.children}
-        </Link>
-      ) : (
-        <span aria-label={typeof item.name === 'string' ? item.name : undefined}>{props.children}</span>
-      )}
-    </WithTooltip>
+      {props.children}
+    </a>
+  ) : runtimePath ? (
+    <Link
+      to={spaRuntimePath}
+      aria-label={menuItemText}
+      title={nativeTitle}
+      onClick={handleClickMenuItem}
+      style={inHeader ? undefined : siderMenuItemLinkStyle}
+    >
+      {props.children}
+    </Link>
+  ) : (
+    <span aria-label={menuItemText} title={nativeTitle} style={inHeader ? undefined : siderMenuItemLinkStyle}>
+      {props.children}
+    </span>
   );
 
   return (
     <ParentRouteContext.Provider value={item._parentRoute}>
       <NocoBaseRouteContext.Provider value={item._route}>
-        <div role="none" style={menuItemStyle}>
+        <div role="none" style={inHeader ? menuItemStyle : siderMenuItemStyle}>
           {itemContent}
           {badgeCount != null && (
             <Badge
               {...badgeProps}
-              style={{ marginLeft: 4, color: item._route.options?.badge?.textColor, maxWidth: '10em' }}
+              style={{
+                marginLeft: 4,
+                ...(badgeTextColor == null ? {} : { color: badgeTextColor }),
+                maxWidth: '10em',
+              }}
               dot={false}
             ></Badge>
           )}

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

@@ -10,17 +10,28 @@
 import type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
 import { css } from '@emotion/css';
 import { Card, Typography, theme } from 'antd';
+import { observer } from '@nocobase/flow-engine';
 import React from 'react';
+import type { AppSwitcherActionPanelModel } from './AppSwitcherActionPanelModel';
 
 function renderIcon(icon: React.ReactNode | (() => React.ReactNode)) {
   return typeof icon === 'function' ? icon() : icon;
 }
 
-export function useAppListRender() {
+const AppSwitcherActionsContent = observer(
+  (props: { model: AppSwitcherActionPanelModel }) => <>{props.model.renderContent()}</>,
+  { displayName: 'AppSwitcherActionsContent' },
+);
+
+export function useAppListRender(appSwitcherModel?: AppSwitcherActionPanelModel) {
   const { token } = theme.useToken();
 
   return React.useCallback(
     (appList: AppListProps) => {
+      if (appSwitcherModel?.hasActions() || appSwitcherModel?.context.flowSettingsEnabled) {
+        return <AppSwitcherActionsContent model={appSwitcherModel} />;
+      }
+
       const columnCount = Math.min(Math.max(appList.length, 1), 2);
 
       return (
@@ -134,6 +145,6 @@ export function useAppListRender() {
         </div>
       );
     },
-    [token],
+    [appSwitcherModel, token],
   );
 }