@nocobase/client-v2 2.2.0-beta.7 → 2.2.0-beta.9

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)'};
       }
@@ -717,7 +752,10 @@ 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/AdminLayoutSlotModels.tsx

@@ -26,6 +26,7 @@ import {
 type AdminLayoutContentProps = {
   onContentElementChange?: (element: HTMLDivElement | null) => void;
   layout?: (AdminLayoutRoutePathLike & { routeName?: string }) | null;
+  designable?: boolean;
 };
 
 const layoutContentClass = css`
@@ -70,7 +71,7 @@ function isDvhSupported() {
   return testEl.style.height === '1dvh';
 }
 
-const ShowTipWhenNoPages = observer((props: { layout?: AdminLayoutRoutePathLike | null }) => {
+const ShowTipWhenNoPages = observer((props: { designable?: boolean; layout?: AdminLayoutRoutePathLike | null }) => {
   const flowEngine = useFlowEngine();
   const { token } = antdTheme.useToken();
   const { t } = useTranslation();
@@ -79,7 +80,7 @@ const ShowTipWhenNoPages = observer((props: { layout?: AdminLayoutRoutePathLike
   const visibleRoutes = isV2AdminRuntime(flowEngine.context.app)
     ? allAccessRoutes.filter((route) => isV2MenuRoute(route))
     : allAccessRoutes;
-  const designable = !!flowEngine.context.flowSettingsEnabled;
+  const designable = !!props.designable || !!flowEngine.context.flowSettingsEnabled;
   const layoutRoutePath = getAdminLayoutRoutePath(props.layout);
 
   if (
@@ -104,7 +105,7 @@ const ShowTipWhenNoPages = observer((props: { layout?: AdminLayoutRoutePathLike
  *
  * 内容区不再依赖独立 FlowModel，而是通过回调把挂载目标同步给 root model。
  */
-export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ onContentElementChange, layout }) => {
+export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ designable, onContentElementChange, layout }) => {
   const style = useMemo(() => (isDvhSupported() ? mobileHeight : undefined), []);
   const params = useParams();
   const matches = useMatches();
@@ -131,7 +132,7 @@ export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ onContentEleme
     >
       <div style={pageContentStyle}>
         {shouldKeepAlive && pageUid ? <KeepAlive uid={pageUid}>{() => <Outlet />}</KeepAlive> : <Outlet />}
-        <ShowTipWhenNoPages layout={layout} />
+        <ShowTipWhenNoPages designable={designable} layout={layout} />
       </div>
     </div>
   );

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],
   );
 }

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

@@ -0,0 +1,289 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { SettingOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { Icon } from '../../../components';
+import { ActionModel } from '../../models/base';
+import {
+  AddSubModelButton,
+  DndProvider,
+  DragHandler,
+  Droppable,
+  FlowModel,
+  FlowModelRenderer,
+  FlowSettingsButton,
+  mergeSubModelItems,
+  observer,
+  type SubModelItem,
+  type SubModelItemsType,
+} from '@nocobase/flow-engine';
+import { Avatar, Button, Card, Tooltip, Typography } from 'antd';
+import React from 'react';
+
+const defaultIconColors = ['#3d8bff', '#00a8b5', '#35b26b', '#f5a623', '#ff7a45', '#e85d75', '#9254de', '#597ef7'];
+
+function getDefaultIconColor(title?: React.ReactNode) {
+  const source = typeof title === 'string' ? title : '';
+  const hash = Array.from(source).reduce((sum, char) => sum + char.charCodeAt(0), 0);
+  return defaultIconColors[hash % defaultIconColors.length];
+}
+
+type AppSwitcherActionPanelStructure = {
+  subModels: {
+    actions?: ActionModel[];
+  };
+};
+
+function isRenderableActionModel(action: unknown): action is ActionModel {
+  if (!action || typeof action !== 'object') {
+    return false;
+  }
+
+  const candidate = action as Partial<ActionModel>;
+  return typeof candidate.getTitle === 'function' && typeof candidate.onClick === 'function';
+}
+
+type EntryActionAvailability = {
+  isEntryActionAvailable?: () => boolean;
+  getEntryActionUnavailableMessage?: () => string | undefined;
+};
+
+function isEntryActionUnavailable(action: ActionModel) {
+  const candidate = action as ActionModel & EntryActionAvailability;
+  return typeof candidate.isEntryActionAvailable === 'function' && !candidate.isEntryActionAvailable();
+}
+
+function getEntryActionUnavailableMessage(action: ActionModel) {
+  const candidate = action as ActionModel & EntryActionAvailability;
+  return candidate.getEntryActionUnavailableMessage?.();
+}
+
+export class AppSwitcherActionPanelModel extends FlowModel<AppSwitcherActionPanelStructure> {
+  getConfigureActionsItems(): SubModelItemsType {
+    const linkAction: SubModelItem = {
+      key: 'app-switcher:link',
+      label: this.context.t('Link'),
+      createModelOptions: {
+        use: 'LinkActionModel',
+      },
+    };
+    const jsAction: SubModelItem = {
+      key: 'app-switcher:js-action',
+      label: this.context.t('JS action'),
+      createModelOptions: {
+        use: 'JSActionModel',
+      },
+    };
+
+    return mergeSubModelItems([[linkAction], this.context.app.entryActionManager.getItems('app-switcher'), [jsAction]]);
+  }
+
+  renderConfigureActions() {
+    return <AppSwitcherConfigureActionsButton model={this} />;
+  }
+
+  private getRenderableActions(options: { includeHidden?: boolean; includeUnavailable?: boolean } = {}) {
+    return this.mapSubModels('actions', (action) => action)
+      .filter(isRenderableActionModel)
+      .filter((action) => options.includeUnavailable || !isEntryActionUnavailable(action))
+      .filter((action) => options.includeHidden || !action.hidden);
+  }
+
+  hasActions() {
+    return this.getRenderableActions().length > 0;
+  }
+
+  renderContent() {
+    const token = this.context.themeToken;
+    const designable = !!this.context.flowSettingsEnabled;
+    const actions = this.getRenderableActions({ includeHidden: designable, includeUnavailable: designable });
+    const columnCount = Math.min(Math.max(actions.length || 1, 1), 2);
+    const buttonResetClass = css`
+      &.ant-btn {
+        display: block;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        border: none;
+        box-shadow: none;
+        background: none;
+        color: ${token.colorText};
+        text-align: left;
+      }
+      &.ant-btn > span {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .ant-btn-icon {
+        display: none;
+      }
+    `;
+    const contentClass = css`
+      max-width: calc(100vw - 48px);
+      max-height: calc(100vh - 48px);
+      overflow: auto;
+      padding: ${token.paddingXS}px;
+    `;
+    const listClass = css`
+      display: grid;
+      grid-template-columns: repeat(${columnCount}, 260px);
+      gap: ${token.marginXXS}px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    `;
+
+    return (
+      <div className={contentClass}>
+        {actions.length ? (
+          <DndProvider>
+            <ul className={listClass}>
+              {actions.map((action) => {
+                const { icon = 'AppstoreOutlined', color } = action.props;
+                const title = action.getTitle();
+                const entryActionUnavailable = isEntryActionUnavailable(action);
+                const renderActionContent = (compact = false) => (
+                  <Card
+                    bordered={false}
+                    className={css`
+                      height: 56px;
+                      border-radius: ${token.borderRadius}px;
+                      box-shadow: none !important;
+                      opacity: ${compact ? token.opacityLoading : 1};
+
+                      &:hover {
+                        background: ${token.colorBgTextHover};
+                        box-shadow: none !important;
+                      }
+
+                      .ant-card-body {
+                        height: 100%;
+                        padding: ${token.paddingXS}px;
+                        display: flex;
+                        align-items: center;
+                        gap: ${token.marginXS}px;
+                      }
+                    `}
+                    styles={{ body: { background: 'transparent' } }}
+                  >
+                    <Avatar
+                      size={32}
+                      shape="square"
+                      icon={<Icon type={icon as string} />}
+                      style={{
+                        flex: '0 0 auto',
+                        borderRadius: 6,
+                        background: color || getDefaultIconColor(title),
+                      }}
+                    />
+                    <Typography.Text
+                      ellipsis
+                      title={typeof title === 'string' ? title : undefined}
+                      style={{
+                        minWidth: 0,
+                        color: token.colorText,
+                        fontSize: token.fontSize,
+                        lineHeight: token.lineHeight,
+                      }}
+                    >
+                      {title}
+                    </Typography.Text>
+                  </Card>
+                );
+                action.enableEditDanger = false;
+                action.enableEditType = false;
+                action.enableEditIconOnly = false;
+                action.enableEditColor = true;
+                action.renderButton = () => {
+                  if (entryActionUnavailable) {
+                    return (
+                      <Tooltip title={getEntryActionUnavailableMessage(action)}>
+                        <Button className={buttonResetClass} onClick={action.onClick.bind(action)}>
+                          {renderActionContent(true)}
+                        </Button>
+                      </Tooltip>
+                    );
+                  }
+                  return (
+                    <Button className={buttonResetClass} onClick={action.onClick.bind(action)}>
+                      {renderActionContent()}
+                    </Button>
+                  );
+                };
+                action.renderHiddenInConfig = () => (
+                  <Tooltip
+                    title={
+                      entryActionUnavailable
+                        ? getEntryActionUnavailableMessage(action)
+                        : this.context.t('The button is hidden and only visible when the UI Editor is active')
+                    }
+                  >
+                    <Button className={buttonResetClass} onClick={action.onClick.bind(action)}>
+                      {renderActionContent(true)}
+                    </Button>
+                  </Tooltip>
+                );
+
+                return (
+                  <li key={action.uid} style={{ width: 260, height: 56, listStyle: 'none' }}>
+                    <Droppable model={action}>
+                      <FlowModelRenderer
+                        model={action}
+                        showFlowSettings={{ showBackground: false, showBorder: false, toolbarPosition: 'above' }}
+                        extraToolbarItems={
+                          designable
+                            ? [
+                                {
+                                  key: 'drag-handler',
+                                  component: DragHandler,
+                                  sort: 1,
+                                },
+                              ]
+                            : []
+                        }
+                      />
+                    </Droppable>
+                  </li>
+                );
+              })}
+            </ul>
+          </DndProvider>
+        ) : (
+          <div style={{ width: 260, minHeight: token.marginXS }} />
+        )}
+        {designable && <div style={{ marginTop: token.marginXS }}>{this.renderConfigureActions()}</div>}
+      </div>
+    );
+  }
+}
+
+AppSwitcherActionPanelModel.define({
+  label: 'App switcher actions',
+  children: false,
+  createModelOptions: {
+    use: 'AppSwitcherActionPanelModel',
+  },
+});
+
+const AppSwitcherConfigureActionsButton = observer(({ model }: { model: AppSwitcherActionPanelModel }) => {
+  const entryActionsRevision = model.context.app.entryActionManager.revision;
+  return (
+    <AddSubModelButton
+      key={`app-switcher-add-actions-${entryActionsRevision}`}
+      model={model}
+      items={model.getConfigureActionsItems()}
+      subModelKey="actions"
+      keepDropdownOpen
+    >
+      <FlowSettingsButton icon={<SettingOutlined />}>{model.context.t('Actions')}</FlowSettingsButton>
+    </AddSubModelButton>
+  );
+});