@nocobase/flow-engine 2.0.0-alpha.2

package/src/components/FlowContextSelector.tsx

@@ -0,0 +1,255 @@
+/**
+ * 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 React, { useCallback, useRef, useMemo, useState, useEffect } from 'react';
+import { Button, Cascader, Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import type { ContextSelectorItem, FlowContextSelectorProps } from './variables/types';
+import {
+  buildContextSelectorItems,
+  formatPathToValue,
+  parseValueToPath,
+  preloadContextSelectorPath,
+} from './variables/utils';
+import { useResolvedMetaTree } from './variables/useResolvedMetaTree';
+import { useFlowContext } from '../FlowContextProvider';
+
+const defaultButtonStyle = {
+  fontStyle: 'italic' as const,
+  fontFamily: 'New York, Times New Roman, Times, serif',
+};
+
+const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
+  value,
+  onChange,
+  children,
+  metaTree,
+  showSearch = false,
+  parseValueToPath: customParseValueToPath = parseValueToPath,
+  formatPathToValue: customFormatPathToValue,
+  open,
+  onlyLeafSelectable = false,
+  ...cascaderProps
+}) => {
+  // 记录最后点击的路径，用于双击检测
+  const lastSelectedRef = useRef<{ path: string; time: number } | null>(null);
+
+  const { resolvedMetaTree, loading } = useResolvedMetaTree(metaTree);
+
+  // 获取引擎上下文中的翻译函数，若不可用则回退为原文
+  const flowCtx = useFlowContext<any>();
+
+  const translateOptions = useCallback(
+    (items: ContextSelectorItem[] | undefined): ContextSelectorItem[] => {
+      if (!items) return [];
+      return items.map((o) => {
+        // 计算禁用状态与提示
+        const meta = o.meta;
+        const disabled = meta ? !!(typeof meta.disabled === 'function' ? meta.disabled() : meta.disabled) : false;
+        const disabledReason = meta
+          ? ((typeof meta.disabledReason === 'function' ? meta.disabledReason() : meta.disabledReason) as any)
+          : undefined;
+
+        // 文本国际化：仅当 label 为字符串时进行翻译
+        const baseLabel = typeof o.label === 'string' ? flowCtx.t(o.label) : o.label;
+
+        const label = disabled ? (
+          <span>
+            {baseLabel}
+            <Tooltip
+              title={disabledReason || flowCtx.t('This variable is not available')}
+              placement="right"
+              overlayClassName="flow-variable-disabled-tip"
+              destroyTooltipOnHide
+            >
+              <QuestionCircleOutlined style={{ marginLeft: 6, color: 'rgba(0,0,0,0.35)' }} />
+            </Tooltip>
+          </span>
+        ) : (
+          baseLabel
+        );
+
+        return {
+          ...o,
+          label,
+          disabled,
+          children: Array.isArray(o.children) ? translateOptions(o.children) : o.children,
+        };
+      });
+    },
+    [flowCtx],
+  );
+
+  // 用于强制重新渲染的状态
+  const [updateFlag, setUpdateFlag] = useState(0);
+  const triggerUpdate = useCallback(() => setUpdateFlag((prev) => prev + 1), []);
+
+  // 构建选项
+  // 注意：rc-cascader 内部对 options 做了基于引用的缓存（useEntities）。
+  // 懒加载 children 时我们会原位修改 metaTree；此处依赖 updateFlag 以确保 options 引用变化，
+  // 触发 rc-cascader 重新构建 pathKeyEntities，避免二级节点未被索引导致的报错。
+  const options = useMemo(() => {
+    if (!resolvedMetaTree) return [];
+    const base = buildContextSelectorItems(resolvedMetaTree);
+    return translateOptions(base);
+  }, [resolvedMetaTree, updateFlag, translateOptions]);
+
+  // 内部展开路径：在 onlyLeafSelectable=true 时，点击父节点不会触发 onChange，
+  // 但会触发 loadData。我们在此记录路径以在懒加载后保持展开。
+  const [tempSelectedPath, setTempSelectedPath] = useState<string[]>([]);
+
+  // 处理异步加载子节点
+  const handleLoadData = useCallback(
+    async (selectedOptions: ContextSelectorItem[]) => {
+      const targetOption = selectedOptions[selectedOptions.length - 1];
+      if (!targetOption || targetOption.children || targetOption.isLeaf) {
+        return;
+      }
+
+      const targetMetaNode = targetOption.meta;
+      if (!targetMetaNode || !targetMetaNode.children) {
+        return;
+      }
+
+      // 若 children 已在其他地方加载为数组（非函数），直接补齐到 options，避免卡在加载态
+      if (Array.isArray(targetMetaNode.children)) {
+        const childNodes = targetMetaNode.children;
+        const childOptions = translateOptions(buildContextSelectorItems(childNodes));
+        targetOption.children = childOptions;
+        targetOption.isLeaf = !childOptions || childOptions.length === 0;
+        triggerUpdate();
+        return;
+      }
+
+      try {
+        // 记录当前点击的路径，保证 options 重建后仍能维持展开并展示子级
+        setTempSelectedPath(selectedOptions.map((o) => String(o.value)));
+        targetOption.loading = true;
+        triggerUpdate();
+        const childNodes = await targetMetaNode.children();
+        targetMetaNode.children = childNodes;
+        // 立即把 options 树也补上 children，避免等待下一次重算
+        const childOptions = translateOptions(buildContextSelectorItems(childNodes));
+        targetOption.children = childOptions;
+        targetOption.isLeaf = !childOptions || childOptions.length === 0;
+      } catch (error) {
+        console.error('Failed to load children:', error);
+      } finally {
+        targetOption.loading = false;
+        triggerUpdate();
+      }
+    },
+    [triggerUpdate],
+  );
+
+  const currentPath = useMemo(() => {
+    return customParseValueToPath(value);
+  }, [value, customParseValueToPath]);
+
+  // 当 metaTree 为子层（如 getPropertyMetaTree('{{ ctx.collection }}') 返回的是 collection 的子节点）
+  // 而 value path 仍包含根键（如 ['collection', 'field']）时，自动丢弃不存在的首段，确保级联能正确对齐。
+  const effectivePath = useMemo(() => {
+    if (!currentPath || currentPath.length === 0) return currentPath;
+    const topValues = new Set(options.map((o) => String(o.value)));
+    const needTrim = !topValues.has(String(currentPath[0]));
+    const fixed = needTrim ? currentPath.slice(1) : currentPath;
+    return fixed;
+  }, [currentPath, options]);
+
+  // 预加载：当存在有效路径时，按路径逐级加载 children，保证默认展开和选中路径可用
+  const pathToPreload = useMemo(() => {
+    const finalPath = effectivePath && effectivePath.length > 0 ? effectivePath : tempSelectedPath;
+    return Array.isArray(finalPath) ? finalPath : [];
+  }, [effectivePath, tempSelectedPath]);
+
+  useEffect(() => {
+    if (pathToPreload.length === 0 || !options?.length) return;
+    preloadContextSelectorPath(options, pathToPreload, triggerUpdate);
+  }, [options, pathToPreload, triggerUpdate]);
+
+  // 默认按钮组件
+  const defaultChildren = useMemo(() => {
+    const hasSelected = currentPath && currentPath.length > 0;
+    return (
+      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
+        x
+      </Button>
+    );
+  }, [currentPath]);
+
+  // 处理选择变化事件
+  const handleChange = useCallback(
+    (selectedValues: (string | number)[], selectedOptions?: ContextSelectorItem[]) => {
+      const lastOption = selectedOptions?.[selectedOptions.length - 1];
+      if (!selectedValues || selectedValues.length === 0) {
+        onChange?.('', lastOption?.meta);
+        setTempSelectedPath([]);
+        return;
+      }
+
+      const path = selectedValues.map(String);
+      const pathString = path.join('.');
+      const isLeaf = lastOption?.isLeaf;
+      const now = Date.now();
+
+      // 使用自定义格式化函数或默认函数
+      let formattedValue: string;
+      if (customFormatPathToValue) {
+        formattedValue = customFormatPathToValue(lastOption?.meta);
+        if (formattedValue === undefined) {
+          formattedValue = formatPathToValue(lastOption?.meta);
+        }
+      } else {
+        formattedValue = formatPathToValue(lastOption?.meta);
+      }
+
+      if (isLeaf) {
+        onChange?.(formattedValue, lastOption?.meta);
+        // 选中叶子节点后，可清空内部临时路径（外部 value 将驱动级联）
+        setTempSelectedPath([]);
+        return;
+      }
+
+      // 非叶子节点：检查双击
+      const lastSelected = lastSelectedRef.current;
+      const isDoubleClick = !onlyLeafSelectable && lastSelected?.path === pathString && now - lastSelected.time < 300;
+
+      if (isDoubleClick) {
+        // 双击：选中非叶子节点
+        onChange?.(formattedValue, lastOption?.meta);
+        lastSelectedRef.current = null;
+      } else {
+        // 单击：记录状态，仅展开
+        lastSelectedRef.current = { path: pathString, time: now };
+        // 同时记录内部路径，保证懒加载后 options 重建也能维持展开
+        setTempSelectedPath(path);
+      }
+    },
+    [onChange, customFormatPathToValue, onlyLeafSelectable],
+  );
+
+  return (
+    <Cascader
+      {...cascaderProps}
+      options={options}
+      value={tempSelectedPath && tempSelectedPath.length > 0 ? tempSelectedPath : effectivePath}
+      onChange={handleChange}
+      loadData={handleLoadData}
+      loading={loading}
+      changeOnSelect={!onlyLeafSelectable}
+      expandTrigger="click"
+      open={open}
+      showSearch={children === null}
+    >
+      {children === null ? null : children || defaultChildren}
+    </Cascader>
+  );
+};
+
+export const FlowContextSelector = React.memo(FlowContextSelectorComponent);

package/src/components/FlowErrorFallback.tsx

@@ -0,0 +1,316 @@
+/**
+ * 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 { Button, Result, Typography } from 'antd';
+import React, { FC, useState } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { useFlowModel } from '../hooks/useFlowModel';
+import { getT } from '../utils';
+
+const { Paragraph, Text } = Typography;
+
+/**
+ * 内部组件，用于获取 FlowModel
+ */
+const FlowErrorFallbackInner: FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
+  const [loading, setLoading] = useState(false);
+  const model = useFlowModel(); // 在这里安全地使用 Hook
+  const t = getT(model);
+
+  const handleCopyError = async () => {
+    setLoading(true);
+    try {
+      const errorInfo = {
+        message: error.message,
+        stack: error.stack,
+        modelInfo: model
+          ? {
+              uid: model.uid,
+              className: model.constructor.name,
+              props: model.props,
+              stepParams: model.stepParams,
+            }
+          : null,
+        timestamp: new Date().toISOString(),
+      };
+
+      await navigator.clipboard.writeText(JSON.stringify(errorInfo, null, 2));
+      console.log('Error information copied to clipboard');
+    } catch (err) {
+      console.error('Failed to copy error information:', err);
+    }
+    setLoading(false);
+  };
+
+  // 检查是否可以下载日志
+  const canDownloadLogs = model?.context?.api;
+
+  const handleDownloadLogs = async () => {
+    if (!canDownloadLogs) {
+      console.error('API client not available');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // 从 model.context.api 获取 apiClient
+      const apiClient = model.context.api;
+
+      // 从 window 对象获取位置信息
+      const location = {
+        pathname: window.location.pathname,
+        search: window.location.search,
+        hash: window.location.hash,
+        href: window.location.href,
+      };
+
+      const res = await apiClient.request({
+        url: 'logger:collect',
+        method: 'post',
+        responseType: 'blob',
+        data: {
+          error: {
+            message: error.message,
+            stack: error.stack,
+          },
+          location,
+          modelInfo: model
+            ? {
+                uid: model.uid,
+                className: model.constructor.name,
+                props: model.props,
+                stepParams: model.stepParams,
+              }
+            : null,
+        },
+      });
+
+      const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/gzip' }));
+      const link = document.createElement('a');
+      link.setAttribute('href', url);
+      link.setAttribute('download', 'logs.tar.gz');
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Failed to download logs:', err);
+    }
+    setLoading(false);
+  };
+
+  const subTitle = (
+    <span>
+      {t('This is likely a NocoBase internals bug. Please open an issue at')}{' '}
+      <a href="https://github.com/nocobase/nocobase/issues" target="_blank" rel="noopener noreferrer">
+        {t('here')}
+      </a>
+      {model && (
+        <div style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
+          Model: {model.constructor.name} (uid: {model.uid})
+        </div>
+      )}
+    </span>
+  );
+
+  return (
+    <div style={{ backgroundColor: 'white' }}>
+      <Result
+        style={{ maxWidth: '60vw', margin: 'auto' }}
+        status="error"
+        title={t('Render failed')}
+        subTitle={subTitle}
+        extra={[
+          <Button type="primary" key="feedback" href="https://github.com/nocobase/nocobase/issues" target="_blank">
+            {t('Feedback')}
+          </Button>,
+          canDownloadLogs && (
+            <Button key="log" loading={loading} onClick={handleDownloadLogs}>
+              {t('Download logs')}
+            </Button>
+          ),
+          <Button key="copy" loading={loading} onClick={handleCopyError}>
+            {t('Copy error info')}
+          </Button>,
+          resetErrorBoundary && (
+            <Button key="retry" danger onClick={resetErrorBoundary}>
+              {t('Try again')}
+            </Button>
+          ),
+        ].filter(Boolean)}
+      >
+        <Paragraph copyable={{ text: error.stack }}>
+          <Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>
+            {error.stack}
+          </Text>
+        </Paragraph>
+      </Result>
+    </div>
+  );
+};
+
+/**
+ * 简化版的错误回退组件，专为 flow-engine 设计
+ * 保持与原始 ErrorFallback 相同的样式和结构
+ */
+export const FlowErrorFallback: FC<FallbackProps> & {
+  Modal: FC<FallbackProps & { children?: React.ReactNode }>;
+} = ({ error, resetErrorBoundary }) => {
+  const [loading, setLoading] = useState(false);
+
+  // 尝试渲染内部组件，如果不在 FlowModelProvider 中则显示简化版本
+  try {
+    return <FlowErrorFallbackInner error={error} resetErrorBoundary={resetErrorBoundary} />;
+  } catch {
+    // 如果不在 FlowModelProvider 中，显示简化版本（不包含 model 信息）
+    const handleCopyError = async () => {
+      setLoading(true);
+      try {
+        const errorInfo = {
+          message: error.message,
+          stack: error.stack,
+          timestamp: new Date().toISOString(),
+        };
+
+        await navigator.clipboard.writeText(JSON.stringify(errorInfo, null, 2));
+        console.log('Error information copied to clipboard');
+      } catch (err) {
+        console.error('Failed to copy error information:', err);
+      }
+      setLoading(false);
+    };
+
+    const subTitle = (
+      <span>
+        {'This is likely a NocoBase internals bug. Please open an issue at '}
+        <a href="https://github.com/nocobase/nocobase/issues" target="_blank" rel="noopener noreferrer">
+          here
+        </a>
+      </span>
+    );
+
+    return (
+      <div style={{ backgroundColor: 'white' }}>
+        <Result
+          style={{ maxWidth: '60vw', margin: 'auto' }}
+          status="error"
+          title="Render failed"
+          subTitle={subTitle}
+          extra={[
+            <Button type="primary" key="feedback" href="https://github.com/nocobase/nocobase/issues" target="_blank">
+              Feedback
+            </Button>,
+            <Button key="copy" loading={loading} onClick={handleCopyError}>
+              Copy error info
+            </Button>,
+            resetErrorBoundary && (
+              <Button key="retry" danger onClick={resetErrorBoundary}>
+                Try again
+              </Button>
+            ),
+          ].filter(Boolean)}
+        >
+          <Paragraph copyable={{ text: error.stack }}>
+            <Text type="danger" style={{ whiteSpace: 'pre-line', textAlign: 'center' }}>
+              {error.stack}
+            </Text>
+          </Paragraph>
+        </Result>
+      </div>
+    );
+  }
+};
+
+/**
+ * 模态框版本的错误回退组件
+ */
+export const FlowErrorFallbackModal: FC<FallbackProps & { children?: React.ReactNode }> = ({
+  error,
+  resetErrorBoundary,
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  const defaultChildren = (
+    <Paragraph
+      style={{
+        display: 'flex',
+        marginBottom: 0,
+      }}
+      copyable={{ text: error.message }}
+    >
+      <Text
+        type="danger"
+        style={{
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          display: 'inline-block',
+          maxWidth: '200px',
+        }}
+      >
+        Error: {error.message}
+      </Text>
+    </Paragraph>
+  );
+
+  return (
+    <>
+      <div onMouseOver={() => setOpen(true)}>{children || defaultChildren}</div>
+      {open && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 10000,
+          }}
+          onClick={() => setOpen(false)}
+        >
+          <div
+            style={{
+              backgroundColor: '#fff',
+              borderRadius: '8px',
+              padding: '24px',
+              maxWidth: '60vw',
+              maxHeight: '80vh',
+              overflow: 'auto',
+              position: 'relative',
+            }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              style={{
+                position: 'absolute',
+                top: '8px',
+                right: '12px',
+                background: 'none',
+                border: 'none',
+                fontSize: '18px',
+                cursor: 'pointer',
+                color: '#999',
+              }}
+              onClick={() => setOpen(false)}
+            >
+              ×
+            </button>
+            <FlowErrorFallback error={error} resetErrorBoundary={resetErrorBoundary} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+FlowErrorFallback.Modal = FlowErrorFallbackModal;