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

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

@@ -0,0 +1,160 @@
+/**
+ * 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 { parsePathnameToViewParams, useFlowEngine } from '@nocobase/flow-engine';
+import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useMatches, useNavigate } from 'react-router-dom';
+import { NocoBaseDesktopRouteType } from '../../../flow-compat';
+import { useApp } from '../../../hooks/useApp';
+import { isLayoutContentRouteName } from '../../../layout-manager/utils';
+import {
+  findFirstV2LandingRoute,
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from './resolveAdminRouteRuntimeTarget';
+
+export const AdminLayoutEntryGuard: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const flowEngine = useFlowEngine();
+  const app = useApp();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const matches = useMatches();
+  const [ready, setReady] = useState(false);
+  const replaceTriggeredRef = useRef(false);
+  const routeRepository = flowEngine.context.routeRepository;
+  const isAdminRoot = useMemo(() => {
+    const pathname = toRouterNavigationPath(location.pathname, app.router.getBasename());
+    return pathname === '/admin';
+  }, [app, location.pathname]);
+  const pageUid = useMemo(() => {
+    const lastMatch = matches[matches.length - 1];
+    if (!isLayoutContentRouteName('admin', lastMatch?.id)) {
+      return '';
+    }
+    const adminMatch = matches.find((match) => match.id === 'admin');
+    return (
+      (lastMatch.params?.name as string) ||
+      parsePathnameToViewParams(location.pathname, {
+        basePath: adminMatch?.pathname || '/admin',
+      })[0]?.viewUid ||
+      ''
+    );
+  }, [location.pathname, matches]);
+
+  useEffect(() => {
+    replaceTriggeredRef.current = false;
+  }, [location.pathname, location.search, location.hash, pageUid]);
+
+  useEffect(() => {
+    let active = true;
+
+    const run = async () => {
+      setReady(false);
+
+      if (!isAdminRoot && !pageUid) {
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      if (!routeRepository?.isAccessibleLoaded?.()) {
+        try {
+          await routeRepository?.ensureAccessibleLoaded?.();
+        } catch (_error) {
+          if (active) {
+            setReady(true);
+          }
+          return;
+        }
+      }
+
+      if (!active || replaceTriggeredRef.current) {
+        return;
+      }
+
+      if (pageUid) {
+        const currentRoute = routeRepository?.getRouteBySchemaUid?.(pageUid);
+        if (currentRoute?.type === NocoBaseDesktopRouteType.page) {
+          const target = resolveAdminRouteRuntimeTarget({
+            app,
+            route: currentRoute,
+            location: {
+              pathname: window.location.pathname,
+              search: window.location.search,
+              hash: window.location.hash,
+            },
+            preserveLocationState: true,
+          });
+
+          if (target.navigationMode === 'document' && target.runtimePath) {
+            replaceTriggeredRef.current = true;
+            window.location.replace(target.runtimePath);
+            return;
+          }
+        }
+
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      const firstAccessibleRoute = findFirstV2LandingRoute(routeRepository?.listAccessible?.() || []);
+      if (!firstAccessibleRoute) {
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      const target = resolveAdminRouteRuntimeTarget({
+        app,
+        route: firstAccessibleRoute,
+      });
+
+      if (!target.runtimePath) {
+        if (active) {
+          setReady(true);
+        }
+        return;
+      }
+
+      replaceTriggeredRef.current = true;
+      if (target.navigationMode === 'document') {
+        window.location.replace(target.runtimePath);
+        return;
+      }
+
+      navigate(toRouterNavigationPath(target.runtimePath, app.router.getBasename()), { replace: true });
+    };
+
+    void run();
+
+    return () => {
+      active = false;
+    };
+  }, [
+    app,
+    flowEngine,
+    isAdminRoot,
+    location.hash,
+    location.pathname,
+    location.search,
+    navigate,
+    pageUid,
+    routeRepository,
+  ]);
+
+  if (!ready) {
+    return null;
+  }
+
+  return <>{children}</>;
+};

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

@@ -747,18 +747,6 @@ AdminLayoutMenuItemModel.registerFlow({
         });
       },
     },
-    hidden: {
-      title: 'Hidden',
-      uiMode: { type: 'switch', key: 'hideInMenu' },
-      defaultParams: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>) => ({
-        hideInMenu: !!ctx.model.getRoute()?.hideInMenu,
-      }),
-      beforeParamsSave: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>, params) => {
-        await ctx.model.updateMenuRoute({
-          hideInMenu: !!params.hideInMenu,
-        });
-      },
-    },
     linkageRules: {
       use: 'menuLinkageRules',
       hideInSettings: async (ctx: FlowSettingsContext<AdminLayoutMenuItemModel>) => ctx.model.isCreationSession(),

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

@@ -7,10 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { define, observable, reaction } from '@formily/reactive';
+import { define, observable } from '@formily/reactive';
 import { type FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import React from 'react';
 import type { NocoBaseDesktopRoute } from '../../../flow-compat';
-import { AdminLayoutRouteCoordinator, type RoutePageMeta } from '../AdminLayoutRouteCoordinator';
+import { AdminLayoutRouteCoordinator } from '../AdminLayoutRouteCoordinator';
+import {
+  BaseLayoutModel,
+  getLayoutModel,
+  type BaseLayoutStructure,
+  type GetLayoutModelOptions,
+} from '../BaseLayoutModel';
 import { ADMIN_LAYOUT_MODEL_UID } from './constants';
 import { type AdminLayoutMenuItemModel } from './AdminLayoutMenuModels';
 import {
@@ -19,22 +26,17 @@ import {
   type AdminLayoutMenuRouteOptions,
 } from './AdminLayoutMenuUtils';
 import { AdminLayoutComponent } from './AdminLayoutComponent';
-import React from 'react';
 import { TopbarActionModel } from '../../models/topbar/TopbarActionModel';
 import { TopbarActionsBar } from './TopbarActionsBar';
+import { AdminLayoutEntryGuard } from './AdminLayoutEntryGuard';
 
-export type AdminLayoutStructure = {
+export type AdminLayoutStructure = BaseLayoutStructure & {
   subModels: {
     menuItems?: AdminLayoutMenuItemModel[];
   };
 };
 
-type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = {
-  required?: boolean;
-  create?: boolean;
-  props?: any;
-  use?: new (...args: any[]) => TModel;
-};
+type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = GetLayoutModelOptions<TModel>;
 
 /**
  * Admin Layout 的纯运行时 host model。
@@ -48,19 +50,12 @@ type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = {
  * model.syncMenuRoutes(routes);
  * ```
  */
-export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
-  isMobileLayout = false;
+export class AdminLayoutModel extends BaseLayoutModel<AdminLayoutStructure> {
   menuRouteRefreshVersion = 0;
-  private routeCoordinator?: AdminLayoutRouteCoordinator;
-  private routeDisposer?: () => void;
-  private activePageUid = '';
-  private layoutContentElement: HTMLElement | null = null;
-  private readonly routePageMetaMap = new Map<string, RoutePageMeta>();
 
   constructor(options: any) {
     super(options);
     define(this, {
-      isMobileLayout: observable.ref,
       menuRouteRefreshVersion: observable.ref,
     });
   }
@@ -74,50 +69,6 @@ export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
     this.menuRouteRefreshVersion += 1;
   }
 
-  /**
-   * 注册页面运行时信息。
-   *
-   * @param {string} pageUid 页面 UID
-   * @param {RoutePageMeta} meta 页面运行时元数据
-   * @returns {FlowModel} 对应的页面模型
-   */
-  registerRoutePage(pageUid: string, meta: RoutePageMeta) {
-    this.routePageMetaMap.set(pageUid, meta);
-    return this.getCoordinator().registerPage(pageUid, meta);
-  }
-
-  /**
-   * 更新页面运行时信息。
-   *
-   * @param {string} pageUid 页面 UID
-   * @param {Partial<RoutePageMeta>} meta 待更新的页面元数据
-   * @returns {void}
-   */
-  updateRoutePage(pageUid: string, meta: Partial<RoutePageMeta>) {
-    const prev = this.routePageMetaMap.get(pageUid) || { active: false };
-    const next = {
-      ...prev,
-      ...meta,
-      active: typeof meta.active === 'boolean' ? meta.active : prev.active,
-    };
-    this.routePageMetaMap.set(pageUid, next);
-    this.getCoordinator().syncPageMeta(pageUid, meta);
-  }
-
-  /**
-   * 注销页面运行时信息。
-   *
-   * @param {string} pageUid 页面 UID
-   * @returns {void}
-   */
-  unregisterRoutePage(pageUid: string) {
-    this.routePageMetaMap.delete(pageUid);
-    if (this.activePageUid === pageUid) {
-      this.activePageUid = '';
-    }
-    this.getCoordinator().unregisterPage(pageUid);
-  }
-
   /**
    * 使用当前可访问菜单路由刷新 Layout 菜单树。
    *
@@ -157,131 +108,16 @@ export class AdminLayoutModel extends FlowModel<AdminLayoutStructure> {
     };
   }
 
-  /**
-   * 设置布局内容容器元素。
-   *
-   * @param {HTMLElement | null} element 布局内容容器
-   * @returns {void}
-   */
-  setLayoutContentElement(element: HTMLElement | null) {
-    this.layoutContentElement = element;
-    this.getCoordinator().setLayoutContentElement(element);
-  }
-
-  /**
-   * 设置是否为移动端布局。
-   *
-   * @param {boolean} isMobileLayout 是否为移动端布局
-   * @returns {void}
-   */
-  setIsMobileLayout(isMobileLayout: boolean) {
-    this.isMobileLayout = !!isMobileLayout;
-  }
-
-  protected onMount(): void {
-    super.onMount();
-    this.setupContextBindings();
-    this.setupRouteReaction();
-  }
-
-  protected onUnmount(): void {
-    this.teardownRuntime();
-    super.onUnmount();
-  }
-
-  /**
-   * 安装运行时上下文属性。
-   *
-   * @returns {void}
-   */
-  private setupContextBindings() {
-    this.flowEngine.context.defineProperty('currentRoute', {
-      get: () => this.getCurrentRouteByActivePage(),
-      // 切页后需要立即读取当前激活页面的路由，不能复用首次访问时的缓存值。
-      cache: false,
-    });
-    this.flowEngine.context.defineProperty('layoutContentElement', {
-      get: () => this.layoutContentElement,
-      // 布局容器 ref 会在挂载和卸载时变化，这里必须实时读取。
-      cache: false,
-    });
-    this.flowEngine.context.defineProperty('isMobileLayout', {
-      get: () => this.isMobileLayout,
-      observable: true,
-      cache: false,
-    });
-  }
-
-  /**
-   * 安装路由同步 reaction。
-   *
-   * @returns {void}
-   */
-  private setupRouteReaction() {
-    if (this.routeDisposer) {
-      return;
-    }
-
-    this.routeDisposer = reaction(
-      () => this.flowEngine.context.route,
-      (route) => {
-        this.activePageUid = route?.params?.name || '';
-        this.getCoordinator().syncRoute(route || {});
-      },
-      {
-        fireImmediately: true,
-      },
-    );
-  }
-
-  /**
-   * 释放运行时状态。
-   *
-   * @returns {void}
-   */
-  private teardownRuntime() {
-    this.routeDisposer?.();
-    this.routeDisposer = undefined;
-    this.routeCoordinator?.destroy();
-    this.routeCoordinator = undefined;
-    this.routePageMetaMap.clear();
-    this.activePageUid = '';
-    this.layoutContentElement = null;
-  }
-
-  /**
-   * 获取当前激活页面对应的路由对象。
-   *
-   * @returns {any} 当前激活页面对应的路由对象
-   */
-  private getCurrentRouteByActivePage() {
-    return this.getCurrentRouteByPageUid(this.activePageUid);
-  }
-
-  /**
-   * 根据页面 UID 获取路由对象。
-   *
-   * @param {string} pageUid 页面 UID
-   * @returns {any} 路由对象
-   */
-  private getCurrentRouteByPageUid(pageUid: string) {
-    return this.flowEngine.context.routeRepository?.getRouteBySchemaUid?.(pageUid) || {};
-  }
-
-  /**
-   * 懒加载页面路由协调器。
-   *
-   * @returns {AdminLayoutRouteCoordinator} 路由协调器实例
-   */
-  private getCoordinator() {
-    if (!this.routeCoordinator) {
-      this.routeCoordinator = new AdminLayoutRouteCoordinator(this.flowEngine);
-    }
-    return this.routeCoordinator;
+  protected createRouteCoordinator() {
+    return new AdminLayoutRouteCoordinator(this.flowEngine, this.getRouteCoordinatorOptions());
   }
 
   render() {
-    return <AdminLayoutComponent {...this.props} />;
+    return (
+      <AdminLayoutEntryGuard>
+        <AdminLayoutComponent {...this.props} model={this} />
+      </AdminLayoutEntryGuard>
+    );
   }
 }
 
@@ -292,10 +128,12 @@ AdminLayoutModel.registerFlow({
       handler: async (ctx, params) => {
         const topbarActionModels = await ctx.engine.getSubclassesOfAsync('TopbarActionModel');
         const actions = [...topbarActionModels.keys()].map<TopbarActionModel>((name) => {
-          return ctx.engine.createModel({
+          const action = ctx.engine.createModel<TopbarActionModel>({
             use: name,
             uid: `topbar-action-${name}`,
           });
+          action.setParent(ctx.model);
+          return action;
         });
         ctx.model.props.actionsRender = (props) => {
           return [<TopbarActionsBar key="topbar-actions" actions={actions} isMobile={props?.isMobile} />];
@@ -317,23 +155,12 @@ export function getAdminLayoutModel<TModel extends FlowModel = AdminLayoutModel>
   flowEngine: FlowEngine,
   options: GetAdminLayoutModelOptions<TModel> = {},
 ) {
-  const { required = false, create = false, props, use } = options;
-  let model = flowEngine.getModel<TModel>(ADMIN_LAYOUT_MODEL_UID);
-
-  if (!model && create) {
-    const ModelClass = (use || AdminLayoutModel) as new (...args: any[]) => TModel;
-    model = flowEngine.createModel<TModel>({
-      uid: ADMIN_LAYOUT_MODEL_UID,
-      use: ModelClass,
-      props,
-    });
-  }
-
-  if (model && props) {
-    model.setProps(props);
-  }
+  const model = getLayoutModel<TModel>(flowEngine, ADMIN_LAYOUT_MODEL_UID, {
+    ...options,
+    use: (options.use || AdminLayoutModel) as any,
+  });
 
-  if (!model && required) {
+  if (!model && options.required) {
     throw new Error('[NocoBase] FlowRoute requires admin-layout-model. Please render FlowRoute under AdminLayout.');
   }
 

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

@@ -13,7 +13,9 @@ import { observer, useFlowEngine } from '@nocobase/flow-engine';
 import { Result, theme as antdTheme } from 'antd';
 import React, { FC, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet, useLocation, useMatches, useParams } from 'react-router-dom';
+import { KeepAlive } from '../../../components/KeepAlive';
+import { getLayoutContentRouteNames } from '../../../layout-manager/utils';
 import { isV2AdminRuntime, isV2MenuRoute } from './resolveAdminRouteRuntimeTarget';
 
 type AdminLayoutContentProps = {
@@ -47,6 +49,8 @@ const mobileHeight = {
   height: `calc(100dvh - var(--nb-header-height))`,
 };
 
+const adminLayoutContentRouteNames = getLayoutContentRouteNames('admin');
+
 /**
  * 检测当前浏览器是否支持 dvh，移动端支持时优先使用它计算可视区域高度。
  *
@@ -93,6 +97,11 @@ const ShowTipWhenNoPages = observer(() => {
  */
 export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ onContentElementChange }) => {
   const style = useMemo(() => (isDvhSupported() ? mobileHeight : undefined), []);
+  const params = useParams();
+  const matches = useMatches();
+  const pageUid = params.name;
+  const currentRouteId = matches.at(-1)?.id;
+  const shouldKeepAlive = !!pageUid && adminLayoutContentRouteNames.includes(currentRouteId || '');
   const bindLayoutContentRef = useCallback(
     (node: HTMLDivElement | null) => {
       // shell 直接渲染内容区时，仍需把挂载目标同步给 root model。
@@ -108,7 +117,7 @@ export const AdminLayoutContent: FC<AdminLayoutContentProps> = ({ onContentEleme
       style={style}
     >
       <div style={pageContentStyle}>
-        <Outlet />
+        {shouldKeepAlive && pageUid ? <KeepAlive uid={pageUid}>{() => <Outlet />}</KeepAlive> : <Outlet />}
         <ShowTipWhenNoPages />
       </div>
     </div>

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

@@ -0,0 +1,139 @@
+/**
+ * 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 type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
+import { css } from '@emotion/css';
+import { Card, Typography, theme } from 'antd';
+import React from 'react';
+
+function renderIcon(icon: React.ReactNode | (() => React.ReactNode)) {
+  return typeof icon === 'function' ? icon() : icon;
+}
+
+export function useAppListRender() {
+  const { token } = theme.useToken();
+
+  return React.useCallback(
+    (appList: AppListProps) => {
+      const columnCount = Math.min(Math.max(appList.length, 1), 2);
+
+      return (
+        <div
+          className={css`
+            max-width: calc(100vw - 48px);
+            max-height: calc(100vh - 48px);
+            overflow: auto;
+            padding: ${token.paddingXS}px;
+          `}
+        >
+          <ul
+            className={css`
+              display: grid;
+              grid-template-columns: repeat(${columnCount}, 260px);
+              gap: ${token.marginXXS}px;
+              margin: 0;
+              padding: 0;
+              list-style: none;
+            `}
+          >
+            {appList.map((app, index) => (
+              <li
+                key={`${app.url || ''}-${index}`}
+                className={css`
+                  width: 260px;
+                  height: 56px;
+                  list-style: none;
+                `}
+              >
+                <a
+                  href={app.url}
+                  target={app.target}
+                  rel="noreferrer"
+                  className={css`
+                    display: block;
+                    height: 100%;
+                    color: ${token.colorText};
+                    text-decoration: none;
+
+                    &:hover {
+                      color: ${token.colorText};
+                    }
+                  `}
+                >
+                  <Card
+                    bordered={false}
+                    style={{
+                      height: '100%',
+                      borderRadius: token.borderRadius,
+                      boxShadow: 'none',
+                    }}
+                    className={css`
+                      height: 100%;
+                      border-radius: ${token.borderRadius}px;
+                      box-shadow: none;
+
+                      &:hover {
+                        background: ${token.colorBgTextHover};
+                        box-shadow: none;
+                      }
+
+                      .ant-card-body {
+                        height: 100%;
+                        padding: ${token.paddingXS}px;
+                        display: flex;
+                        align-items: center;
+                        gap: ${token.marginXS}px;
+                      }
+                    `}
+                    styles={{
+                      body: {
+                        background: 'transparent',
+                      },
+                    }}
+                  >
+                    <span
+                      className={css`
+                        display: inline-flex;
+                        flex: 0 0 auto;
+                        width: 32px;
+                        height: 32px;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                          max-width: 32px;
+                          max-height: 32px;
+                        }
+                      `}
+                    >
+                      {renderIcon(app.icon)}
+                    </span>
+                    <Typography.Text
+                      ellipsis
+                      title={typeof app.title === 'string' ? app.title : undefined}
+                      className={css`
+                        min-width: 0;
+                        color: ${token.colorText};
+                        font-size: ${token.fontSize}px;
+                        line-height: ${token.lineHeight};
+                      `}
+                    >
+                      {app.title}
+                    </Typography.Text>
+                  </Card>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    },
+    [token],
+  );
+}

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -891,34 +891,9 @@ describe('AdminLayoutModel menu items', () => {
     });
   });
 
-  it('should persist hidden setting through route repository', async () => {
-    const updateRoute = vi.fn().mockResolvedValue(undefined);
-    engine.context.routeRepository.updateRoute = updateRoute;
-
-    const model = engine.createModel<AdminLayoutMenuItemModel>({
-      uid: 'menu-item-hidden',
-      use: AdminLayoutMenuItemModel,
-      props: {
-        route: {
-          id: 1,
-          title: 'Page 1',
-          schemaUid: 'current-page',
-          type: NocoBaseDesktopRouteType.page,
-          hideInMenu: false,
-        },
-      },
-    });
-
-    const menuSettingsFlow = AdminLayoutMenuItemModel.globalFlowRegistry.getFlow('menuSettings');
-    await menuSettingsFlow?.steps?.hidden?.beforeParamsSave?.({ model } as any, { hideInMenu: true }, {});
-
-    expect(updateRoute).toHaveBeenCalledWith(1, {
-      hideInMenu: true,
-    });
-  });
-
   it('should expose menu linkage rules only for existing menu items', async () => {
     const menuSettingsFlow = AdminLayoutMenuItemModel.globalFlowRegistry.getFlow('menuSettings');
+    expect(menuSettingsFlow?.steps?.hidden).toBeUndefined();
     expect(menuSettingsFlow?.steps?.linkageRules?.use).toBe('menuLinkageRules');
 
     const model = engine.createModel<AdminLayoutMenuItemModel>({