@nocobase/client-v2 2.2.0-alpha.1 → 2.2.0-alpha.11

package/src/flow/models/fields/__tests__/VariableFieldFormModel.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { InputFieldModel } from '../InputFieldModel';
+import { VariableFieldFormModel } from '../VariableFieldFormModel';
+
+describe('VariableFieldFormModel', () => {
+  it('uses DOM-safe name and id for temporary controls created from reserved form property names', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ InputFieldModel, VariableFieldFormModel });
+    const model = engine.createModel<VariableFieldFormModel>({
+      use: 'VariableFieldFormModel',
+      subModels: {
+        fields: [
+          {
+            use: 'InputFieldModel',
+            stepParams: {
+              fieldSettings: {
+                init: {
+                  fieldPath: 'nodeName',
+                },
+              },
+            },
+          },
+        ],
+      },
+    });
+    const field = model.subModels.fields[0];
+
+    render(<FlowEngineProvider engine={engine}>{model.render()}</FlowEngineProvider>);
+
+    const input = await screen.findByRole('textbox');
+    await waitFor(() => {
+      expect(field.props.name).toEqual(['__nb_variable_field_nodeName']);
+    });
+    expect(input).toHaveAttribute('name', '__nb_variable_field_nodeName');
+    expect(input).toHaveAttribute('id', '__nb_variable_field_nodeName');
+    expect(field.props.id).toEqual(['__nb_variable_field_nodeName']);
+    expect(field.getStepParams('fieldSettings', 'init')).toEqual({ fieldPath: 'nodeName' });
+  });
+});

package/src/flow/models/fields/mobile-components/MobileLazySelect.tsx

@@ -23,6 +23,20 @@ import {
 } from '../AssociationFieldModel/recordSelectShared';
 import _ from 'lodash';
 
+const mobileSelectSafeAreaPaddingBottom = 'calc(12px + env(safe-area-inset-bottom, 0px))';
+
+const mobileSelectConfirmFooterStyle: CSSProperties = {
+  paddingBottom: mobileSelectSafeAreaPaddingBottom,
+};
+
+function getMobileSelectListStyle(hasConfirmFooter: boolean): CSSProperties {
+  return {
+    maxHeight: '60vh',
+    overflowY: 'auto',
+    paddingBottom: hasConfirmFooter ? undefined : mobileSelectSafeAreaPaddingBottom,
+  };
+}
+
 const labelClassName = css`
   div {
     white-space: nowrap !important;
@@ -280,13 +294,7 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
             showCancelButton
           />
         </div>
-        <div
-          style={{
-            maxHeight: '60vh',
-            overflowY: 'auto',
-          }}
-          onScroll={handleScroll}
-        >
+        <div style={getMobileSelectListStyle(isMultiple)} onScroll={handleScroll}>
           <CheckList multiple={isMultiple} value={selectedValueIds} onChange={handleListChange}>
             {realOptions.map((item) => {
               const optionValue = item?.[valueKey];
@@ -311,9 +319,11 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
           )}
         </div>
         {isMultiple && (
-          <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
-            {t('Confirm')}
-          </Button>
+          <div style={mobileSelectConfirmFooterStyle}>
+            <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
+              {t('Confirm')}
+            </Button>
+          </div>
         )}
       </Popup>
     </>

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -12,8 +12,23 @@ import { Select } from 'antd';
 import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
+const mobileSelectSafeAreaPaddingBottom = 'calc(12px + env(safe-area-inset-bottom, 0px))';
+
+const mobileSelectConfirmFooterStyle: React.CSSProperties = {
+  paddingBottom: mobileSelectSafeAreaPaddingBottom,
+};
+
+function getMobileSelectListStyle(hasConfirmFooter: boolean): React.CSSProperties {
+  return {
+    maxHeight: '60vh',
+    overflowY: 'auto',
+    paddingBottom: hasConfirmFooter ? undefined : mobileSelectSafeAreaPaddingBottom,
+  };
+}
+
 export function MobileSelect(props) {
   const { value, displayValue, onChange, onChangeComplete, disabled, options = [], mode } = props;
+  const isMultiple = ['multiple', 'tags'].includes(mode);
   const ctx = useFlowModelContext();
   const t = ctx.t;
   const [visible, setVisible] = useState(false);
@@ -64,17 +79,12 @@ export function MobileSelect(props) {
         <div style={{ margin: '10px' }}>
           <SearchBar placeholder={t('search')} value={searchText} onChange={(v) => setSearchText(v)} showCancelButton />
         </div>
-        <div
-          style={{
-            maxHeight: '60vh',
-            overflowY: 'auto',
-          }}
-        >
+        <div style={getMobileSelectListStyle(isMultiple)}>
           <CheckList
-            multiple={['multiple', 'tags'].includes(mode)}
+            multiple={isMultiple}
             value={Array.isArray(selected) ? selected : [selected]}
             onChange={(val) => {
-              if (['multiple', 'tags'].includes(mode)) {
+              if (isMultiple) {
                 setSelected(val);
               } else {
                 setSelected(val[0]);
@@ -91,10 +101,12 @@ export function MobileSelect(props) {
             ))}
           </CheckList>
         </div>
-        {['multiple', 'tags'].includes(mode) && (
-          <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
-            {t('Confirm')}
-          </Button>
+        {isMultiple && (
+          <div style={mobileSelectConfirmFooterStyle}>
+            <Button block color="primary" onClick={handleConfirm} style={{ marginTop: '16px' }}>
+              {t('Confirm')}
+            </Button>
+          </div>
         )}
       </Popup>
     </>

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -14,9 +14,11 @@ import { Button, Dropdown, theme, Tooltip, type ButtonProps, type MenuProps } fr
 import React, { useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useACLRoleContext } from '../../../acl';
+import type { BaseApplication } from '../../../BaseApplication';
 import type { PluginSettingsPageType } from '../../../PluginSettingsManager';
+import { shouldOpenAdminRouteInNewWindow } from '../../../RouterManager';
 import { useApp } from '../../../hooks/useApp';
 import {
   filterRenderableSettings,
@@ -64,6 +66,163 @@ const topbarActionTriggerClassName = css`
   height: 100%;
 `;
 
+type TopbarSettingsAppLike = Pick<
+  BaseApplication<any>,
+  'name' | 'router' | 'getPublicPath' | 'getHref' | 'layoutManager'
+>;
+
+const normalizeTopbarPath = (pathname?: string) => {
+  const trimmed = pathname?.trim();
+  if (!trimmed || trimmed === '/') {
+    return '/';
+  }
+  return `/${trimmed.replace(/^\/+/, '')}`;
+};
+
+const normalizeTopbarBasePath = (pathname?: string) => {
+  const normalized = normalizeTopbarPath(pathname).replace(/\/+$/, '');
+  return normalized === '' || normalized === '/' ? '' : normalized;
+};
+
+const getTopbarRouterBasePath = (app: TopbarSettingsAppLike | undefined) => {
+  return app?.router?.getBasename?.() || app?.router?.basename || app?.getPublicPath?.() || '';
+};
+
+const stripTopbarRouterBasePath = (pathname: string, basename?: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+  const normalizedBase = normalizeTopbarBasePath(basename);
+
+  if (!normalizedBase) {
+    return normalizedPath;
+  }
+
+  if (normalizedPath === normalizedBase) {
+    return '/';
+  }
+
+  if (normalizedPath.startsWith(`${normalizedBase}/`)) {
+    return normalizeTopbarPath(normalizedPath.slice(normalizedBase.length));
+  }
+
+  return normalizedPath;
+};
+
+const getTopbarAppPath = (pathname: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+  const match = /^(.*?\/(?:apps|_app)\/[^/]+)(?=\/|$)/.exec(normalizedPath);
+  const appPath = match?.[1] || '';
+
+  return {
+    appPath,
+    routePath: appPath ? normalizeTopbarPath(normalizedPath.slice(appPath.length)) : normalizedPath,
+  };
+};
+
+const getTopbarContextAppPath = (app: TopbarSettingsAppLike | undefined, basename?: string) => {
+  const basenameAppPath = getTopbarAppPath(basename || '').appPath;
+  if (basenameAppPath) {
+    return basenameAppPath;
+  }
+
+  const publicPathAppPath = getTopbarAppPath(app?.getPublicPath?.() || '').appPath;
+  if (publicPathAppPath) {
+    return publicPathAppPath;
+  }
+
+  if (app?.name && app.name !== 'main' && app.getHref) {
+    return normalizeTopbarBasePath(app.getHref('/'));
+  }
+
+  return '';
+};
+
+const prependTopbarAppPath = (pathname: string, appPath: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+
+  if (!appPath || normalizedPath === appPath || normalizedPath.startsWith(`${appPath}/`)) {
+    return normalizedPath;
+  }
+
+  return `${appPath}${normalizedPath}`;
+};
+
+const isAdminRuntimePath = (pathname: string) => {
+  return pathname === '/admin' || pathname.startsWith('/admin/');
+};
+
+const getTopbarAdminRoutePath = (app: TopbarSettingsAppLike | undefined) => {
+  try {
+    return app?.layoutManager?.getLayout?.('admin')?.routePath;
+  } catch {
+    return undefined;
+  }
+};
+
+const buildTopbarDocumentHref = (targetPath: string, basename?: string) => {
+  const normalizedTarget = normalizeTopbarPath(targetPath);
+  const normalizedBase = normalizeTopbarBasePath(basename);
+
+  if (!normalizedBase || normalizedTarget === normalizedBase || normalizedTarget.startsWith(`${normalizedBase}/`)) {
+    return normalizedTarget;
+  }
+
+  return `${normalizedBase}${normalizedTarget}`;
+};
+
+function TopbarExternalSettingsLabel(props: { title: React.ReactNode; link: string }) {
+  return (
+    <div
+      onClick={() => {
+        window.open(props.link, '_blank', 'noopener,noreferrer');
+      }}
+    >
+      {props.title}
+    </div>
+  );
+}
+
+function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: string }) {
+  const app = useApp();
+  const location = useLocation();
+  const targetPath = props.path || '/admin/settings';
+  const basename = getTopbarRouterBasePath(app);
+  const currentPath = stripTopbarRouterBasePath(location.pathname, basename);
+  const currentLocationAppPath = getTopbarAppPath(currentPath);
+  const currentAppPath = currentLocationAppPath.appPath || getTopbarContextAppPath(app, basename);
+  const currentRoutePath = currentLocationAppPath.appPath ? currentLocationAppPath.routePath : currentPath;
+  const targetPathInCurrentApp = prependTopbarAppPath(stripTopbarRouterBasePath(targetPath, basename), currentAppPath);
+
+  if (currentAppPath) {
+    const href = buildTopbarDocumentHref(targetPathInCurrentApp, basename);
+    const shouldOpenInNewWindow = shouldOpenAdminRouteInNewWindow({
+      currentPathname: currentPath,
+      targetPathname: targetPathInCurrentApp,
+      basePath: basename,
+      adminRoutePath: getTopbarAdminRoutePath(app),
+    });
+
+    return (
+      <a
+        href={href}
+        target={shouldOpenInNewWindow ? '_blank' : undefined}
+        rel={shouldOpenInNewWindow ? 'noopener noreferrer' : undefined}
+      >
+        {props.title}
+      </a>
+    );
+  }
+
+  if (isAdminRuntimePath(currentRoutePath)) {
+    return <Link to={targetPathInCurrentApp}>{props.title}</Link>;
+  }
+
+  return (
+    <a href={buildTopbarDocumentHref(targetPath, basename)} target="_blank" rel="noopener noreferrer">
+      {props.title}
+    </a>
+  );
+}
+
 /**
  * 将 settings 顶部菜单转换成右上角 dropdown items。
  *
@@ -112,15 +271,9 @@ export function getTopbarPluginSettingsItems(options: {
       title: targetTitle,
       icon: item.icon,
       label: targetLink ? (
-        <div
-          onClick={() => {
-            window.open(targetLink, '_blank', 'noopener,noreferrer');
-          }}
-        >
-          {targetTitle}
-        </div>
+        <TopbarExternalSettingsLabel title={targetTitle} link={targetLink} />
       ) : (
-        <Link to={targetPath || '/admin/settings'}>{targetTitle}</Link>
+        <TopbarInternalSettingsLabel title={targetTitle} path={targetPath} />
       ),
     };
   });
@@ -131,7 +284,12 @@ export function getTopbarPluginSettingsItems(options: {
     items.push({
       key: pluginManagerSetting.key,
       icon: pluginManagerSetting.icon || <ApiOutlined />,
-      label: <Link to={pluginManagerSetting.path}>{pluginManagerSetting.title || t('Plugin manager')}</Link>,
+      label: (
+        <TopbarInternalSettingsLabel
+          title={pluginManagerSetting.title || t('Plugin manager')}
+          path={pluginManagerSetting.path}
+        />
+      ),
     });
   }
 

package/src/flow/resolveViewParamsToViewList.tsx

@@ -49,12 +49,12 @@ export function resolveViewParamsToViewList(
   return viewItems;
 }
 
-export function updateViewListHidden(viewItems: ViewItem[]) {
+export function updateViewListHidden(viewItems: ViewItem[], isMobileLayout = false) {
   // Calculate hidden values based on view types and positions
   let hasEmbedAfter = false;
   for (let i = viewItems.length - 1; i >= 0; i--) {
     const viewItem = viewItems[i];
-    const viewType = getViewType(viewItem);
+    const viewType = getViewType(viewItem, isMobileLayout);
 
     if (viewType === 'embed' && !hasEmbedAfter) {
       hasEmbedAfter = true;
@@ -65,15 +65,23 @@ export function updateViewListHidden(viewItems: ViewItem[]) {
   }
 }
 
-function getViewType(viewItem: ViewItem): string {
+function getViewType(viewItem: ViewItem, isMobileLayout = false): string {
   if (viewItem.model instanceof RouteModel) {
     return 'embed';
   }
 
+  if (isMobileLayout && viewItem.index > 0) {
+    return 'embed';
+  }
+
   if (!viewItem.model) {
     return 'drawer';
   }
 
+  if (viewItem.params.openViewRouteState?.mode) {
+    return viewItem.params.openViewRouteState.mode;
+  }
+
   const params = viewItem.model.getStepParams('popupSettings', 'openView');
   return params?.mode || 'drawer';
 }

package/src/flow/routeTransientInputArgs.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+export const ROUTE_TRANSIENT_INPUT_ARGS_KEY = '__nocobaseOpenViewInputArgs';
+
+export type RouteTransientInputArgsState = {
+  [ROUTE_TRANSIENT_INPUT_ARGS_KEY]?: Record<string, Record<string, unknown>>;
+  usr?: RouteTransientInputArgsState;
+};
+
+export const getRouteTransientInputArgs = (state: unknown, viewUid?: string) => {
+  if (!viewUid || !state || typeof state !== 'object') {
+    return {};
+  }
+
+  const stateValue = state as RouteTransientInputArgsState;
+  const values = (stateValue[ROUTE_TRANSIENT_INPUT_ARGS_KEY] || stateValue.usr?.[ROUTE_TRANSIENT_INPUT_ARGS_KEY])?.[
+    viewUid
+  ];
+  return values && typeof values === 'object' ? values : {};
+};