@nocobase/flow-engine 2.0.0-alpha.4 → 2.0.0-alpha.41

package/src/components/MobilePopup.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 { ConfigProvider } from 'antd';
+import { Popup } from 'antd-mobile';
+import React, { FC, ReactNode, useMemo } from 'react';
+import { CloseOutline } from 'antd-mobile-icons';
+import { useMobileActionDrawerStyle } from './MobilePopup.style';
+import { useTranslation } from 'react-i18next';
+
+interface MobilePopupProps {
+  title?: string;
+  visible: boolean;
+  minHeight?: number | string;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+  footer?: ReactNode;
+}
+
+export const MobilePopup: FC<MobilePopupProps> = (props) => {
+  const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
+  const { t } = useTranslation();
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  const style = useMemo(() => {
+    return {
+      minHeight,
+    };
+  }, [minHeight]);
+
+  const theme = useMemo(() => {
+    return {
+      token: {
+        paddingPageHorizontal: 8,
+        paddingPageVertical: 8,
+        marginBlock: 12,
+        borderRadiusBlock: 8,
+        fontSize: 14,
+      },
+    };
+  }, []);
+
+  return (
+    <ConfigProvider theme={theme}>
+      <Popup
+        className={`${componentCls} ${hashId} ${className || ''}`}
+        visible={visible}
+        onClose={closePopup}
+        onMaskClick={closePopup}
+        bodyClassName="nb-mobile-action-drawer-body"
+        bodyStyle={{
+          padding: 0,
+        }}
+        maskStyle={style}
+        style={style}
+        destroyOnClose
+      >
+        <div className="nb-mobile-action-drawer-header">
+          {/* used to make the title center */}
+          <span className="nb-mobile-action-drawer-placeholder">
+            <CloseOutline />
+          </span>
+          <span>{title}</span>
+          <span
+            className="nb-mobile-action-drawer-close-icon"
+            onClick={closePopup}
+            role="button"
+            tabIndex={0}
+            aria-label={t('Close')}
+          >
+            <CloseOutline />
+          </span>
+        </div>
+        {children}
+        {footer && <div className="nb-mobile-action-drawer-footer">{footer}</div>}
+      </Popup>
+    </ConfigProvider>
+  );
+};

package/src/components/__tests__/flow-model-render-error-fallback.test.tsx

@@ -13,7 +13,6 @@ import { render, cleanup, waitFor } from '@testing-library/react';
 import { App, ConfigProvider } from 'antd';
 import { FlowEngine } from '../../flowEngine';
 import { FlowModel, ModelRenderMode } from '../../models/flowModel';
-import { DefaultSettingsIcon } from '../settings/wrappers/contextual/DefaultSettingsIcon';
 import { FlowEngineProvider } from '../../provider';
 import { FlowModelRenderer } from '../FlowModelRenderer';
 
@@ -81,6 +80,7 @@ vi.mock('antd', () => {
     Alert,
     Skeleton,
     Spin,
+    theme: { useToken: () => ({}) },
   } as any;
 });
 
@@ -124,7 +124,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
-            <FlowModelRenderer model={model} showFlowSettings showErrorFallback skipApplyAutoFlows />
+            <FlowModelRenderer model={model} showFlowSettings showErrorFallback />
           </FlowEngineProvider>
         </App>
       </ConfigProvider>,
@@ -141,7 +141,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
         return (
           <div>
             {items.map((m: FlowModel) => (
-              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback skipApplyAutoFlows />
+              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback />
             ))}
           </div>
         );
@@ -167,7 +167,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
-            <FlowModelRenderer model={parent} skipApplyAutoFlows />
+            <FlowModelRenderer model={parent} />
           </FlowEngineProvider>
         </App>
       </ConfigProvider>,
@@ -186,7 +186,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
         return (
           <div>
             {cells.map((m: FlowModel) => (
-              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback skipApplyAutoFlows />
+              <FlowModelRenderer key={m.uid} model={m} showFlowSettings showErrorFallback />
             ))}
           </div>
         );
@@ -212,7 +212,7 @@ describe('Delete problematic model via FlowSettings menu', () => {
       <ConfigProvider>
         <App>
           <FlowEngineProvider engine={engine}>
-            <FlowModelRenderer model={parent} skipApplyAutoFlows />
+            <FlowModelRenderer model={parent} />
           </FlowEngineProvider>
         </App>
       </ConfigProvider>,

package/src/components/index.ts

@@ -17,4 +17,5 @@ export * from './FormItem';
 export * from './settings';
 export * from './subModel';
 export * from './variables';
+export * from './MobilePopup';
 //

package/src/components/settings/independents/dropdown/FlowsDropdownButton.tsx

@@ -132,7 +132,7 @@ const FlowsDropdownButtonWithModel: React.FC<ModelProvidedProps> = observer(
                 // 如果step使用了action，也获取action的uiSchema
                 let actionUiSchema = {};
                 if (actionStep.use) {
-                  const action = model.flowEngine?.getAction?.(actionStep.use);
+                  const action = model.getAction?.(actionStep.use);
                   if (action && action.uiSchema) {
                     actionUiSchema = action.uiSchema;
                   }

package/src/components/settings/wrappers/contextual/DefaultSettingsIcon.tsx

@@ -126,7 +126,19 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
         message.success(t('UID copied to clipboard'));
       } catch (error) {
         console.error(t('Copy failed'), ':', error);
-        message.error(t('Copy failed, please copy [{{uid}}] manually.', { uid }));
+        // 如果不是 HTTPS 协议，给出更具体的提示：HTTP 下剪贴板 API 不可用
+        const isHttps = typeof window !== 'undefined' && window.location?.protocol === 'https:';
+        if (!isHttps) {
+          message.error(
+            t(
+              'Copy failed under HTTP. Clipboard API is unavailable on non-HTTPS pages. Please copy [{{uid}}] manually.',
+              { uid },
+            ),
+          );
+          return;
+        } else {
+          message.error(t('Copy failed, please copy [{{uid}}] manually.', { uid }));
+        }
       }
     },
     [message, t],
@@ -255,7 +267,8 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
   const getModelConfigurableFlowsAndSteps = useCallback(
     async (targetModel: FlowModel, modelKey?: string): Promise<FlowInfo[]> => {
       try {
-        const flows = targetModel.getFlows();
+        // 仅使用静态流（类级全局注册的 flows），排除实例动态流
+        const flows = (targetModel.constructor as typeof FlowModel).globalFlowRegistry.getFlows();
 
         const flowsArray = Array.from(flows.values());
 
@@ -278,9 +291,9 @@ export const DefaultSettingsIcon: React.FC<DefaultSettingsIconProps> = ({
                 let stepTitle = actionStep.title;
                 if (actionStep.use) {
                   try {
-                    const action = targetModel.flowEngine?.getAction?.(actionStep.use);
+                    const action = targetModel.getAction?.(actionStep.use);
                     hasActionUiSchema = action && action.uiSchema != null;
-                    stepTitle = stepTitle || action.title;
+                    stepTitle = stepTitle || action?.title;
                   } catch (error) {
                     console.warn(t('Failed to get action {{action}}', { action: actionStep.use }), ':', error);
                   }

package/src/components/settings/wrappers/contextual/FlowsContextMenu.tsx

@@ -162,7 +162,7 @@ const FlowsContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
                 // 如果step使用了action，也获取action的uiSchema
                 let actionUiSchema = {};
                 if (actionStep.use) {
-                  const action = model.flowEngine?.getAction?.(actionStep.use);
+                  const action = model.getAction?.(actionStep.use);
                   if (action && action.uiSchema) {
                     actionUiSchema = action.uiSchema;
                   }

package/src/components/settings/wrappers/contextual/FlowsFloatContextMenu.tsx

@@ -80,8 +80,29 @@ const renderToolbarItems = (
     });
 };
 
+// Width in pixels per toolbar item (icon width + spacing)
+const TOOLBAR_ITEM_WIDTH = 19;
+
+const toolbarPositionToCSS = {
+  inside: `
+    top: 2px;
+  `,
+  above: `
+    top: 0px;
+    transform: translateY(-100%);
+    padding-bottom: 0px;
+    margin-bottom: -2px;
+  `,
+  below: `
+    top: 0px;
+    transform: translateY(100%);
+    padding-top: 2px;
+    margin-top: -2px;
+  `,
+};
+
 // 使用与 NocoBase 一致的悬浮工具栏样式
-const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition }) => css`
+const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition = 'inside', toolbarCount }) => css`
   position: relative;
   display: inline;
 
@@ -117,6 +138,7 @@ const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition
     border: ${showBorder ? '2px solid var(--colorBorderSettingsHover)' : ''};
     border-radius: ${ctx.themeToken.borderRadiusLG}px;
     pointer-events: none;
+    min-width: ${TOOLBAR_ITEM_WIDTH * toolbarCount}px;
 
     &.nb-in-template {
       background: var(--colorTemplateBgSettingsHover);
@@ -147,10 +169,7 @@ const floatContainerStyles = ({ showBackground, showBorder, ctx, toolbarPosition
       display: none; // 防止遮挡其它 icons
       position: absolute;
       right: 2px;
-      top: ${toolbarPosition === 'above' ? '0px' : '2px'};
-      ${toolbarPosition === 'above' ? 'transform: translateY(-100%);' : ''}
-      ${toolbarPosition === 'above' ? 'padding-bottom: 2px;' : ''}
-      ${toolbarPosition === 'above' ? 'margin-bottom: -2px;' : ''}
+      ${toolbarPositionToCSS[toolbarPosition] || ''}
       line-height: 16px;
       pointer-events: all;
 
@@ -297,7 +316,7 @@ interface ModelProvidedProps {
   /**
    * @default 'inside'
    */
-  toolbarPosition?: 'inside' | 'above';
+  toolbarPosition?: 'inside' | 'above' | 'below';
 }
 
 interface ModelByIdProps {
@@ -332,7 +351,7 @@ interface ModelByIdProps {
   /**
    * @default 'inside'
    */
-  toolbarPosition?: 'inside' | 'above';
+  toolbarPosition?: 'inside' | 'above' | 'below';
 }
 
 type FlowsFloatContextMenuProps = ModelProvidedProps | ModelByIdProps;
@@ -565,9 +584,13 @@ const FlowsFloatContextMenuWithModel: React.FC<ModelProvidedProps> = observer(
     return (
       <div
         ref={containerRef}
-        className={`${floatContainerStyles({ showBackground, showBorder, ctx: model.context, toolbarPosition })} ${
-          hideMenu ? 'hide-parent-menu' : ''
-        } ${hasButton ? 'has-button-child' : ''} ${className || ''}`}
+        className={`${floatContainerStyles({
+          showBackground,
+          showBorder,
+          ctx: model.context,
+          toolbarPosition,
+          toolbarCount: getToolbarCount(flowEngine, extraToolbarItems),
+        })} ${hideMenu ? 'hide-parent-menu' : ''} ${hasButton ? 'has-button-child' : ''} ${className || ''}`}
         style={containerStyle}
         data-has-float-menu="true"
         onMouseMove={handleChildHover}
@@ -653,3 +676,9 @@ const FlowsFloatContextMenuWithModelById: React.FC<ModelByIdProps> = observer(
 );
 
 export { FlowsFloatContextMenu };
+
+function getToolbarCount(flowEngine, extraToolbarItems) {
+  const toolbarItems = flowEngine?.flowSettings?.getToolbarItems?.() || [];
+  const allToolbarItems = [...toolbarItems, ...(extraToolbarItems || [])];
+  return allToolbarItems.length;
+}

package/src/components/settings/wrappers/contextual/StepSettingsDialog.tsx

@@ -14,7 +14,14 @@ import { Button, Space } from 'antd';
 import React, { useEffect } from 'react';
 import { FlowSettingsContextProvider, useFlowSettingsContext } from '../../../../hooks/useFlowSettingsContext';
 import { StepSettingsDialogProps } from '../../../../types';
-import { compileUiSchema, FlowExitException, getT, resolveDefaultParams, resolveStepUiSchema } from '../../../../utils';
+import {
+  compileUiSchema,
+  FlowExitException,
+  getT,
+  resolveDefaultParams,
+  resolveStepUiSchema,
+  buildSettingsViewInputArgs,
+} from '../../../../utils';
 
 const SchemaField = createSchemaField();
 
@@ -135,6 +142,12 @@ const openStepSettingsDialog = async ({
     width: dialogWidth,
     destroyOnClose: true,
     ...toJS(uiModeProps),
+    // 透传 navigation，便于变量元信息根据真实视图栈推断父级弹窗
+    inputArgs: buildSettingsViewInputArgs(
+      model as any,
+      { ...(toJS(uiModeProps)?.inputArgs || {}), __isSettingsPopup: true },
+      { navigationOverride: ctx?.view?.navigation },
+    ),
     onClose: () => {
       if (cleanup) {
         cleanup();