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

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

@@ -0,0 +1,168 @@
+/**
+ * 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 { 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 } from '../AdminLayoutRouteCoordinator';
+import {
+  BaseLayoutModel,
+  getLayoutModel,
+  type BaseLayoutStructure,
+  type GetLayoutModelOptions,
+} from '../BaseLayoutModel';
+import { ADMIN_LAYOUT_MODEL_UID } from './constants';
+import { type AdminLayoutMenuItemModel } from './AdminLayoutMenuModels';
+import {
+  getAdminLayoutMenuInitializerButton,
+  reconcileAdminLayoutMenuItems,
+  type AdminLayoutMenuRouteOptions,
+} from './AdminLayoutMenuUtils';
+import { AdminLayoutComponent } from './AdminLayoutComponent';
+import { TopbarActionModel } from '../../models/topbar/TopbarActionModel';
+import { TopbarActionsBar } from './TopbarActionsBar';
+import { AdminLayoutEntryGuard } from './AdminLayoutEntryGuard';
+
+export type AdminLayoutStructure = BaseLayoutStructure & {
+  subModels: {
+    menuItems?: AdminLayoutMenuItemModel[];
+  };
+};
+
+type GetAdminLayoutModelOptions<TModel extends FlowModel = AdminLayoutModel> = GetLayoutModelOptions<TModel>;
+
+/**
+ * Admin Layout 的纯运行时 host model。
+ *
+ * 该模型只负责菜单树、页面路由桥接和上下文注入，
+ * 不负责任何 React 渲染。
+ *
+ * @example
+ * ```typescript
+ * const model = getAdminLayoutModel(flowEngine, { required: true });
+ * model.syncMenuRoutes(routes);
+ * ```
+ */
+export class AdminLayoutModel extends BaseLayoutModel<AdminLayoutStructure> {
+  menuRouteRefreshVersion = 0;
+
+  constructor(options: any) {
+    super(options);
+    define(this, {
+      menuRouteRefreshVersion: observable.ref,
+    });
+  }
+
+  /**
+   * 通知 Layout 重新生成 ProLayout 菜单路由。
+   *
+   * @returns {void}
+   */
+  refreshMenuRouteTree() {
+    this.menuRouteRefreshVersion += 1;
+  }
+
+  /**
+   * 使用当前可访问菜单路由刷新 Layout 菜单树。
+   *
+   * @param {NocoBaseDesktopRoute[]} routes 当前用户可访问的桌面路由
+   * @returns {void}
+   */
+  syncMenuRoutes(routes: NocoBaseDesktopRoute[]) {
+    reconcileAdminLayoutMenuItems(this, Array.isArray(routes) ? routes : []);
+  }
+
+  /**
+   * 将菜单模型转换为 ProLayout 路由树。
+   *
+   * @param {Omit<AdminLayoutMenuRouteOptions, 'depth'>} options 路由转换参数
+   * @returns {{ path: string; children: any[] }} ProLayout 路由树
+   */
+  toProLayoutRoute(options: Omit<AdminLayoutMenuRouteOptions, 'depth'>) {
+    const result =
+      (this.subModels.menuItems || [])
+        .map((item) =>
+          item.toProLayoutRoute({
+            ...options,
+            depth: 0,
+          }),
+        )
+        .filter(Boolean) || [];
+
+    if (options.designable) {
+      options.isMobile
+        ? result.push(getAdminLayoutMenuInitializerButton('schema-initializer-Menu-header', this))
+        : result.unshift(getAdminLayoutMenuInitializerButton('schema-initializer-Menu-header', this));
+    }
+
+    return {
+      path: '/',
+      children: result,
+    };
+  }
+
+  protected createRouteCoordinator() {
+    return new AdminLayoutRouteCoordinator(this.flowEngine, this.getRouteCoordinatorOptions());
+  }
+
+  render() {
+    return (
+      <AdminLayoutEntryGuard>
+        <AdminLayoutComponent {...this.props} model={this} />
+      </AdminLayoutEntryGuard>
+    );
+  }
+}
+
+AdminLayoutModel.registerFlow({
+  key: 'topbarAction',
+  steps: {
+    step1: {
+      handler: async (ctx, params) => {
+        const topbarActionModels = await ctx.engine.getSubclassesOfAsync('TopbarActionModel');
+        const actions = [...topbarActionModels.keys()].map<TopbarActionModel>((name) => {
+          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} />];
+        };
+      },
+    },
+  },
+});
+
+/**
+ * 获取或创建 admin-layout host model。
+ *
+ * @param {FlowEngine} flowEngine FlowEngine 实例
+ * @param {GetAdminLayoutModelOptions<TModel>} options 获取选项
+ * @returns {TModel | undefined} 命中的 admin-layout model
+ * @throws {Error} 当 required 为 true 且模型不存在时抛错
+ */
+export function getAdminLayoutModel<TModel extends FlowModel = AdminLayoutModel>(
+  flowEngine: FlowEngine,
+  options: GetAdminLayoutModelOptions<TModel> = {},
+) {
+  const model = getLayoutModel<TModel>(flowEngine, ADMIN_LAYOUT_MODEL_UID, {
+    ...options,
+    use: (options.use || AdminLayoutModel) as any,
+  });
+
+  if (!model && options.required) {
+    throw new Error('[NocoBase] FlowRoute requires admin-layout-model. Please render FlowRoute under AdminLayout.');
+  }
+
+  return model;
+}

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

@@ -0,0 +1,140 @@
+/**
+ * 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 { HighlightOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+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, useMatches, useParams } from 'react-router-dom';
+import { KeepAlive } from '../../../components/KeepAlive';
+import { getLayoutContentRouteNames } from '../../../layout-manager/utils';
+import { isV2AdminRuntime, isV2MenuRoute } from './resolveAdminRouteRuntimeTarget';
+
+type AdminLayoutContentProps = {
+  onContentElementChange?: (element: HTMLDivElement | null) => void;
+};
+
+const layoutContentClass = css`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: calc(100vh - var(--nb-header-height));
+  > div {
+    position: relative;
+  }
+  .ant-layout-footer {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    width: 100%;
+    z-index: 0;
+    padding: 0px 50px;
+  }
+`;
+
+const pageContentStyle: React.CSSProperties = {
+  flex: 1,
+  overflowY: 'auto',
+};
+
+const mobileHeight = {
+  height: `calc(100dvh - var(--nb-header-height))`,
+};
+
+const adminLayoutContentRouteNames = getLayoutContentRouteNames('admin');
+
+/**
+ * 检测当前浏览器是否支持 dvh，移动端支持时优先使用它计算可视区域高度。
+ *
+ * @returns {boolean} 是否支持 dvh 单位
+ */
+function isDvhSupported() {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  const testEl = document.createElement('div');
+  testEl.style.height = '1dvh';
+  return testEl.style.height === '1dvh';
+}
+
+const ShowTipWhenNoPages = observer(() => {
+  const flowEngine = useFlowEngine();
+  const { token } = antdTheme.useToken();
+  const { t } = useTranslation();
+  const location = useLocation();
+  const allAccessRoutes = flowEngine.context.routeRepository?.listAccessible?.() || [];
+  const visibleRoutes = isV2AdminRuntime(flowEngine.context.app)
+    ? allAccessRoutes.filter((route) => isV2MenuRoute(route))
+    : allAccessRoutes;
+  const designable = !!flowEngine.context.flowSettingsEnabled;
+
+  if (visibleRoutes.length === 0 && !designable && ['/admin', '/admin/'].includes(location.pathname)) {
+    return (
+      <Result
+        icon={<HighlightOutlined style={{ fontSize: '8em', color: token.colorText }} />}
+        title={t('No pages yet, please configure first')}
+        subTitle={t(`Click the "UI Editor" icon in the upper right corner to enter the UI Editor mode`)}
+      />
+    );
+  }
+
+  return null;
+});
+
+/**
+ * AdminLayout 内部使用的内容区容器。
+ *
+ * 内容区不再依赖独立 FlowModel，而是通过回调把挂载目标同步给 root model。
+ */
+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。
+      onContentElementChange?.(node);
+    },
+    [onContentElementChange],
+  );
+
+  return (
+    <div
+      ref={bindLayoutContentRef}
+      className={`${layoutContentClass} nb-subpages-slot-without-header-and-side`}
+      style={style}
+    >
+      <div style={pageContentStyle}>
+        {shouldKeepAlive && pageUid ? <KeepAlive uid={pageUid}>{() => <Outlet />}</KeepAlive> : <Outlet />}
+        <ShowTipWhenNoPages />
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 兼容旧 API 的独立 LayoutContent 组件。
+ *
+ * 旧调用方可能只需要一个不带顶部和侧边栏的内容容器，
+ * 这时不一定存在 AdminLayout root model，因此这里保留一个可独立渲染的版本。
+ *
+ * @example
+ * ```typescript
+ * <LayoutContent />
+ * ```
+ */
+export const LayoutContent: FC = () => {
+  return <AdminLayoutContent />;
+};

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/HelpLite.tsx

@@ -0,0 +1,167 @@
+/**
+ * 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 { QuestionCircleOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { observer } from '@nocobase/flow-engine';
+import { parseHTML } from '@nocobase/utils/client';
+import { Dropdown, Menu, Popover, theme as antdTheme } from 'antd';
+import type { MenuItemType, MenuDividerType } from 'antd/es/menu/interface';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePlugin } from '../../../flow-compat';
+import { useCurrentAppInfo } from '../../../hooks';
+import type { CustomToken } from '../../../theme';
+import { getAppVersionHTML } from '../../../utils';
+
+type SettingsMenuItemType = MenuItemType | MenuDividerType;
+
+const helpClassName = css`
+  display: inline-block;
+  vertical-align: top;
+  width: 46px;
+  height: 46px;
+  &:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+  }
+`;
+
+const SettingsMenu: React.FC = () => {
+  const { t } = useTranslation();
+  const appInfo = useCurrentAppInfo();
+  const { token } = antdTheme.useToken();
+  const isSimplifiedChinese = appInfo?.lang === 'zh-CN';
+
+  const items: SettingsMenuItemType[] = useMemo(
+    () => [
+      {
+        key: 'nocobase',
+        disabled: true,
+        label: (
+          <div style={{ cursor: 'text' }}>
+            <div style={{ color: token.colorText }}>NocoBase</div>
+            <div style={{ fontSize: '0.8em', color: token.colorTextDescription }}>v{appInfo?.version}</div>
+          </div>
+        ),
+      },
+      {
+        key: 'divider_1',
+        type: 'divider',
+      },
+      {
+        key: 'homePage',
+        label: (
+          <a
+            href={isSimplifiedChinese ? 'https://www.nocobase.com/cn/' : 'https://www.nocobase.com'}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('Home page')}
+          </a>
+        ),
+      },
+      {
+        key: 'userManual',
+        label: (
+          <a
+            href={
+              isSimplifiedChinese ? 'https://v2.docs.nocobase.com/cn/guide/' : 'https://v2.docs.nocobase.com/guide/'
+            }
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('Handbook')}
+          </a>
+        ),
+      },
+      {
+        key: 'license',
+        label: (
+          <a
+            href={
+              isSimplifiedChinese ? 'https://www.nocobase.com/cn/agreement' : 'https://www.nocobase.com/en/agreement'
+            }
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('License')}
+          </a>
+        ),
+      },
+    ],
+    [appInfo?.version, isSimplifiedChinese, t, token.colorText, token.colorTextDescription],
+  );
+
+  return <Menu items={items} />;
+};
+
+/**
+ * flow 内的轻量帮助入口。
+ */
+export const HelpLite = observer(
+  () => {
+    const [visible, setVisible] = useState(false);
+    const { token } = antdTheme.useToken();
+    const customToken = token as CustomToken;
+    const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand');
+    const appInfo = useCurrentAppInfo();
+
+    const icon = (
+      <span
+        data-testid="help-button"
+        className={css`
+          max-width: 160px;
+          overflow: hidden;
+          display: inline-block;
+          line-height: 12px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        `}
+        style={{ cursor: 'pointer', padding: '16px', color: customToken.colorTextHeaderMenu }}
+      >
+        <QuestionCircleOutlined />
+      </span>
+    );
+
+    if (customBrandPlugin?.options?.options?.about) {
+      const appVersion = getAppVersionHTML(appInfo?.version);
+      const content = parseHTML(customBrandPlugin.options.options.about, { appVersion });
+
+      return (
+        <div className={helpClassName}>
+          <Popover
+            rootClassName="nb-about"
+            placement="bottomRight"
+            arrow={false}
+            content={<div dangerouslySetInnerHTML={{ __html: content }}></div>}
+          >
+            {icon}
+          </Popover>
+        </div>
+      );
+    }
+
+    return (
+      <div className={helpClassName}>
+        <Dropdown
+          open={visible}
+          onOpenChange={(nextVisible) => {
+            setVisible(nextVisible);
+          }}
+          dropdownRender={() => {
+            return <SettingsMenu />;
+          }}
+        >
+          {icon}
+        </Dropdown>
+      </div>
+    );
+  },
+  { displayName: 'HelpLite' },
+);