@nocobase/client-v2 2.1.0-alpha.22 → 2.1.0-alpha.24

package/src/flow/models/fields/DisplayTitleFieldModel.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 { CollectionField, tExpr } from '@nocobase/flow-engine';
+import { Typography } from 'antd';
+import { castArray } from 'lodash';
+import { css } from '@emotion/css';
+import React from 'react';
+import { FieldModel } from '../base/FieldModel';
+
+export class DisplayTitleFieldModel extends FieldModel {
+  get collectionField(): CollectionField {
+    return this.context.collectionField;
+  }
+
+  renderComponent(value) {
+    return value;
+  }
+
+  /**
+   * 基类统一渲染逻辑
+   */
+  render(): any {
+    const { value, fieldNames, overflowMode, width, style, className } = this.props;
+    const titleField = this.props.titleField || fieldNames?.label;
+    const typographyProps = {
+      className,
+      ellipsis:
+        overflowMode === 'ellipsis'
+          ? {
+              tooltip: {
+                rootClassName: css`
+                  .ant-tooltip-inner {
+                    color: #000;
+                    max-height: 500px;
+                    overflow-y: auto;
+                    padding: 10px;
+                  }
+                `,
+                color: '#fff',
+              },
+            }
+          : false, // 处理省略显示
+      style: {
+        ...(style || {}),
+        whiteSpace: overflowMode === 'wrap' ? 'normal' : 'nowrap', // 控制换行
+        width: width || 'auto',
+      },
+    };
+    if (titleField) {
+      const result = castArray(value).flatMap((v, idx) => {
+        const result = this.renderComponent(v?.[titleField]);
+        const node = v?.[titleField] ? result : 'N/A';
+        return idx === 0 ? [node] : [<span key={`sep-${idx}`}>, </span>, node];
+      });
+      return <Typography.Text {...typographyProps}>{result}</Typography.Text>;
+    } else {
+      const textContent = <Typography.Text {...typographyProps}>{this.renderComponent(value)}</Typography.Text>;
+      return textContent;
+    }
+  }
+}
+
+DisplayTitleFieldModel.registerFlow({
+  key: 'displayFieldSettings',
+  title: tExpr('Display Field settings'),
+  sort: 200,
+  steps: {
+    overflowMode: {
+      use: 'overflowMode',
+    },
+  },
+});

package/src/flow/models/fields/DisplayURLFieldModel.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import React from 'react';
+import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
+
+export class DisplayURLFieldModel extends DisplayTitleFieldModel {
+  public renderComponent(value) {
+    const { style, className } = this.props;
+    const content = value && (
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href={value}
+        className={className}
+        style={{ ...(style || {}), overflowWrap: 'anywhere' }}
+      >
+        {value}
+      </a>
+    );
+    return <>{content}</>;
+  }
+}
+
+DisplayURLFieldModel.define({
+  label: tExpr('URL'),
+});
+
+DisplayItemModel.bindModelToInterface('DisplayURLFieldModel', ['url'], {
+  isDefault: true,
+  when: (ctx) => {
+    return true;
+  },
+});

package/src/flow/models/fields/DividerItemModel.tsx

@@ -0,0 +1,100 @@
+/**
+ * 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 { FormItem } from '@nocobase/flow-engine';
+import { Divider } from 'antd';
+import React from 'react';
+import { CommonItemModel } from '../base/CommonItemModel';
+import { NBColorPicker } from './ColorFieldModel';
+
+export class DividerItemModel extends CommonItemModel {
+  render() {
+    const { color, borderColor, label, orientation, dashed } = this.props;
+    return (
+      <FormItem shouldUpdate showLabel={false}>
+        <Divider
+          type="horizontal"
+          style={{ color, borderColor }}
+          orientationMargin="0"
+          orientation={orientation}
+          dashed={dashed}
+        >
+          {label}
+        </Divider>
+      </FormItem>
+    );
+  }
+}
+
+DividerItemModel.registerFlow({
+  key: 'markdownItemSetting',
+  title: '{{t("Divider settings")}}',
+  steps: {
+    title: {
+      title: '{{t("Edit divider")}}',
+      defaultParams: {
+        label: '{{t("Text")}}',
+        orientation: 'left',
+        color: 'rgba(0, 0, 0, 0.88)',
+        borderColor: 'rgba(5, 5, 5, 0.06)',
+      },
+      uiSchema(ctx) {
+        return {
+          label: {
+            title: '{{t("Divider label")}}',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+              autoSize: true,
+            },
+          },
+          orientation: {
+            'x-component': 'Radio.Group',
+            'x-decorator': 'FormItem',
+            title: '{{t("Label position")}}',
+            enum: [
+              { label: ctx.t('Left'), value: 'left' },
+              { label: ctx.t('Center'), value: 'center' },
+              { label: ctx.t('Right'), value: 'right' },
+            ],
+          },
+          dashed: {
+            title: '{{t("Dashed")}}',
+            'x-component': 'Switch',
+            'x-decorator': 'FormItem',
+          },
+          color: {
+            title: '{{t("Color")}}',
+            'x-component': NBColorPicker,
+            'x-decorator': 'FormItem',
+          },
+          borderColor: {
+            title: '{{t("Divider line color")}}',
+            'x-component': NBColorPicker,
+            'x-decorator': 'FormItem',
+          },
+        };
+      },
+      handler(ctx, params) {
+        let label = params.label;
+        if (label && label !== ctx.t('Text')) {
+          label = ctx.t(label, { ns: 'lm-flow-engine' });
+        }
+        ctx.model.setProps({
+          ...params,
+          label,
+        });
+      },
+    },
+  },
+});
+
+DividerItemModel.define({
+  label: '{{t("Divider")}}',
+});

package/src/flow/models/fields/IconFieldModel.tsx

@@ -0,0 +1,172 @@
+/**
+ * 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 { CloseOutlined } from '@ant-design/icons';
+import { useFormLayout } from '@formily/antd-v5';
+import { hasIcon, Icon, icons } from '../../../flow-compat';
+import { Button, Empty, Flex, Input, Popover, Radio, Space, theme } from 'antd';
+import { debounce, groupBy } from 'lodash';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EditableItemModel } from '@nocobase/flow-engine';
+import { FieldModel } from '../base/FieldModel';
+
+const { Search } = Input;
+interface IconPickerProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  suffix?: React.ReactNode;
+  iconSize?: number;
+  searchable?: boolean;
+  onChangeComplete?: (value: string) => void;
+}
+
+const groupByIconName = (data) => {
+  return groupBy(data, (str) => {
+    if (str.endsWith('outlined')) return 'Outlined';
+    if (str.endsWith('filled')) return 'Filled';
+    if (str.endsWith('twotone')) return 'TwoTone';
+  });
+};
+
+function IconPicker(props: IconPickerProps) {
+  const { fontSizeXL } = theme.useToken().token;
+  const availableIcons = [...icons.keys()];
+  const layout = useFormLayout();
+  const { value, onChange, disabled, iconSize = fontSizeXL, searchable = true, onChangeComplete } = props;
+  const [visible, setVisible] = useState(false);
+  const [filteredIcons, setFilteredIcons] = useState(availableIcons);
+  const [type, setType] = useState('Outlined');
+  const { t } = useTranslation();
+  const groupIconData = groupByIconName(availableIcons);
+
+  const style: any = {
+    width: '26em',
+    [`${searchable ? 'height' : 'maxHeight'}`]: '20em',
+    overflowY: 'auto',
+  };
+
+  const filterIcons = debounce((value) => {
+    const searchValue = value?.trim() ?? '';
+    setFilteredIcons(
+      searchValue.length
+        ? availableIcons.filter((i) => i.split(' ').some((val) => val.includes(searchValue)))
+        : availableIcons,
+    );
+  }, 250);
+
+  const IconContent = () => {
+    return (
+      <Flex vertical gap="middle">
+        <Radio.Group
+          options={[
+            {
+              label: t('Outlined'),
+              value: 'Outlined',
+            },
+            {
+              label: t('Filled'),
+              value: 'Filled',
+            },
+            {
+              label: t('Two tone'),
+              value: 'TwoTone',
+            },
+          ]}
+          value={type}
+          optionType="button"
+          onChange={(e) => {
+            setType(e.target.value);
+          }}
+        />
+        <div>
+          {groupIconData[type].map((key) => {
+            if (filteredIcons.includes(key)) {
+              return (
+                <span
+                  key={key}
+                  title={key.replace(/outlined|filled|twotone$/i, '')}
+                  style={{ fontSize: iconSize, marginRight: 10, cursor: 'pointer' }}
+                  onClick={() => {
+                    onChange(key);
+                    setVisible(false);
+                    onChangeComplete?.(key); // 提交最终值
+                  }}
+                >
+                  <Icon type={key} />
+                </span>
+              );
+            }
+          })}
+        </div>
+      </Flex>
+    );
+  };
+  return (
+    <div>
+      <Space.Compact>
+        <Popover
+          placement={'bottom'}
+          open={visible}
+          onOpenChange={(val) => {
+            if (disabled) {
+              return;
+            }
+            setVisible(val);
+          }}
+          content={
+            <div style={style}>
+              {filteredIcons.length === 0 ? <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : <IconContent />}
+            </div>
+          }
+          title={
+            <div>
+              {searchable && (
+                <Search
+                  style={{ marginTop: 8 }}
+                  role="search"
+                  name="icon-search"
+                  placeholder={t('Search')}
+                  allowClear
+                  onSearch={filterIcons}
+                  onChange={(event) => filterIcons(event.target?.value)}
+                />
+              )}
+            </div>
+          }
+          trigger="click"
+        >
+          <Button size={layout.size as any} disabled={disabled}>
+            {hasIcon(value) ? <Icon type={value} /> : t('Select icon')}
+          </Button>
+        </Popover>
+        {value && !disabled && (
+          <Button
+            size={layout.size as any}
+            icon={<CloseOutlined />}
+            onClick={(e) => {
+              onChange(null);
+            }}
+          ></Button>
+        )}
+      </Space.Compact>
+    </div>
+  );
+}
+
+export class IconFieldModel extends FieldModel {
+  render() {
+    return <IconPicker {...this.props} />;
+  }
+}
+
+EditableItemModel.bindModelToInterface('IconFieldModel', ['icon'], {
+  isDefault: true,
+});

package/src/flow/models/fields/InputFieldModel.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 { EditableItemModel, FilterableItemModel, tExpr } from '@nocobase/flow-engine';
+import { Input } from 'antd';
+import React from 'react';
+import { customAlphabet as Alphabet } from 'nanoid';
+import { FieldModel } from '../base/FieldModel';
+
+export class InputFieldModel extends FieldModel {
+  render() {
+    return <Input {...this.props} />;
+  }
+}
+
+InputFieldModel.registerFlow({
+  key: 'defaultValueForNanoid',
+  steps: {
+    generateNanoid: {
+      handler(ctx, params) {
+        // 监听表单reset
+        ctx.blockModel?.emitter?.on('onFieldReset', () => {
+          if (ctx.collectionField.interface === 'nanoid' && ctx.collectionField.options.autoFill !== false) {
+            const { size, customAlphabet } = ctx.collectionField.options || { size: 21 };
+            ctx.model.props.onChange(Alphabet(customAlphabet, size)());
+          }
+        });
+      },
+    },
+  },
+});
+
+InputFieldModel.define({
+  label: tExpr('Input'),
+});
+EditableItemModel.bindModelToInterface('InputFieldModel', ['input', 'email', 'phone', 'uuid', 'url', 'nanoid'], {
+  isDefault: true,
+});
+
+FilterableItemModel.bindModelToInterface(
+  'InputFieldModel',
+  [
+    'input',
+    'email',
+    'phone',
+    'uuid',
+    'url',
+    'nanoid',
+    'textarea',
+    'markdown',
+    'vditor',
+    'richText',
+    'password',
+    'color',
+  ],
+  {
+    isDefault: true,
+  },
+);

package/src/flow/models/fields/JSEditableFieldModel.tsx

@@ -0,0 +1,219 @@
+/**
+ * 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 { ElementProxy, tExpr, createSafeDocument, createSafeWindow, createSafeNavigator } from '@nocobase/flow-engine';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Input } from 'antd';
+import { FieldModel } from '../base/FieldModel';
+import { CodeEditor } from '../../components/code-editor';
+import { resolveRunJsParams } from '../utils/resolveRunJsParams';
+
+const DEFAULT_CODE = `
+// Render an editable antd Input via JSX and keep it in sync with form value.
+// - Uses ctx.getValue/ctx.setValue for two-way binding
+// - Listens to external value changes via 'js-field:value-change'
+function JsEditableField() {
+  const React = ctx.React;
+  const { Input } = ctx.antd;
+  const [value, setValue] = React.useState(ctx.getValue?.() ?? '');
+
+  React.useEffect(() => {
+    const handler = (ev) => setValue(ev?.detail ?? '');
+    ctx.element?.addEventListener('js-field:value-change', handler);
+    return () => ctx.element?.removeEventListener('js-field:value-change', handler);
+  }, []);
+
+  const onChange = (e) => {
+    const v = e?.target?.value ?? '';
+    setValue(v);
+    ctx.setValue?.(v);
+  };
+
+  return (
+    <Input
+      {...ctx.model.props}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+
+// Mount to the field container
+ctx.render(<JsEditableField />);
+`;
+
+const JSFormRuntime: React.FC<{
+  model: JSEditableFieldModel;
+  value?: any;
+  onChange?: (v: any) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+}> = ({ model, value, onChange, disabled, readOnly }) => {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const externalRef = model.context?.ref as React.RefObject<HTMLSpanElement>;
+  const assignRefs = (el: HTMLSpanElement | null) => {
+    (containerRef as any).current = el as any;
+    if (externalRef && typeof externalRef === 'object') {
+      (externalRef as any).current = el as any;
+    }
+  };
+  // 统一获取&裁剪脚本代码，直接依赖具体 code 字符串，避免顶层 stepParams 引用未变化导致不更新
+  const codeParam = model.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+  const scriptCode = useMemo(() => {
+    const raw = codeParam ?? DEFAULT_CODE;
+    return typeof raw === 'string' ? raw.trim() : '';
+  }, [codeParam]);
+
+  useEffect(() => {
+    if (!containerRef.current || !scriptCode) return;
+    const event = new CustomEvent('js-field:value-change', { detail: value });
+    containerRef.current.dispatchEvent(event);
+  }, [value, scriptCode]);
+
+  // 无自定义 JS 时默认渲染 Input，保持可用性
+  if (!scriptCode) {
+    return (
+      <Input
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        readOnly={readOnly}
+        style={{ width: '100%' }}
+      />
+    );
+  }
+
+  return <span ref={assignRefs} style={{ display: 'inline-block', width: '100%' }} />;
+};
+
+/**
+ * JS 可编辑字段（表单项）：
+ * - 通过 jsSettings.runJs 运行 JS 代码；
+ * - 在运行时提供 ctx.getValue/ctx.setValue，实现与表单的双向交互；
+ * - 子节点由脚本渲染（DOM 操作），用于完全自定义输入体验。
+ */
+export class JSEditableFieldModel extends FieldModel {
+  private _mountedOnce = false;
+  render() {
+    return (
+      <JSFormRuntime
+        model={this as JSEditableFieldModel}
+        value={this.props?.value}
+        onChange={this.props?.onChange}
+        disabled={this.props?.disabled}
+        readOnly={this.props?.readOnly}
+      />
+    );
+  }
+
+  /**
+   * 在 CreateForm / 提交后重置等场景下，字段可能被卸载并重新挂载。
+   * 由于 beforeRender 命中缓存，新挂载的容器不会自动写入 JS 渲染内容。
+   * 这里在二次挂载时检测容器已就绪，主动触发 rerender 来刷新 beforeRender（禁用缓存），
+   * 保证输入框不会因为容器变更而空白。
+   */
+  protected onMount() {
+    if (this._mountedOnce) {
+      if (this.context.ref?.current) {
+        this.rerender();
+      }
+    }
+    this._mountedOnce = true;
+  }
+}
+
+JSEditableFieldModel.define({
+  label: tExpr('JS field'),
+});
+
+JSEditableFieldModel.registerFlow({
+  key: 'jsSettings',
+  title: tExpr('JavaScript settings'),
+  steps: {
+    runJs: {
+      title: tExpr('Write JavaScript'),
+      useRawParams: true,
+      uiSchema: {
+        code: {
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': CodeEditor,
+          'x-component-props': {
+            minHeight: '320px',
+            theme: 'light',
+            enableLinter: true,
+            wrapperStyle: {
+              position: 'fixed',
+              inset: 8,
+            },
+          },
+        },
+      },
+      uiMode: {
+        type: 'embed',
+        props: {
+          styles: {
+            body: {
+              transform: 'translateX(0)',
+            },
+          },
+        },
+      },
+      defaultParams(ctx) {
+        const fieldTitle = ctx.collectionField?.title || 'field';
+        return {
+          version: 'v2',
+          code: DEFAULT_CODE,
+        };
+      },
+      async handler(ctx, params) {
+        const { code, version } = resolveRunJsParams(ctx, params);
+        ctx.onRefReady(ctx.ref, async (element) => {
+          // 暴露容器与读写能力（使用动态 getter 绑定 ref.current，避免容器变更失效）
+          ctx.defineProperty('element', {
+            get: () => new ElementProxy((ctx.ref?.current as HTMLSpanElement | null) || element),
+            cache: false,
+          });
+          ctx.defineMethod('getValue', () => {
+            const name = ctx.model.props?.name;
+            if (name !== undefined && name !== null) {
+              const fv = ctx.form?.getFieldValue?.(name);
+              return fv !== undefined ? fv : ctx.model.props?.value;
+            }
+            return ctx.model.props?.value;
+          });
+          ctx.defineMethod('setValue', (v) => {
+            try {
+              ctx.model.setProps('value', v);
+              const name = ctx.model.props?.name;
+              if (name !== undefined && name !== null) {
+                ctx.form?.setFieldValue?.(name, v);
+              }
+            } catch (_) {
+              // ignore
+            }
+          });
+          ctx.defineProperty('namePath', { get: () => ctx.model.props?.name, cache: false });
+          ctx.defineProperty('disabled', { get: () => !!ctx.model.props?.disabled, cache: false });
+          ctx.defineProperty('readOnly', { get: () => !!ctx.model.props?.readOnly, cache: false });
+          const navigator = createSafeNavigator();
+          await ctx.runjs(
+            code,
+            {
+              window: createSafeWindow({ navigator }),
+              document: createSafeDocument(),
+              navigator,
+            },
+            { version },
+          );
+        });
+      },
+    },
+  },
+});