@nocobase/client-v2 2.1.0-alpha.3 → 2.1.0-alpha.30

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 },
+          );
+        });
+      },
+    },
+  },
+});

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

@@ -0,0 +1,224 @@
+/**
+ * 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, createSafeWindow, createSafeDocument, createSafeNavigator } from '@nocobase/flow-engine';
+import React, { useEffect } from 'react';
+import { FieldModel } from '../base/FieldModel';
+import { resolveRunJsParams } from '../utils/resolveRunJsParams';
+import { CodeEditor } from '../../components/code-editor';
+
+const DEFAULT_CODE = `
+function JsReadonlyField() {
+  const React = ctx.React;
+  const { prefix, suffix, overflowMode } = ctx.model?.props || {};
+  const text = String(ctx.value ?? '');
+  const whiteSpace = overflowMode === 'wrap' ? 'pre-line' : 'nowrap';
+
+  return (
+    <span style={{ whiteSpace }}>
+      {prefix}
+      {text}
+      {suffix}
+    </span>
+  );
+}
+
+ctx.render(<JsReadonlyField />);
+`.trim();
+
+/**
+ * JS 字段（只读形态）：
+ * - 通过 jsSettings.runJs 配置并执行 JS 代码；
+ * - 支持在表格列/详情项中作为字段子模型使用；
+ * - 在只读场景下可通过 ctx.value 读取当前值，ctx.record 读取当前行记录；
+ * - 通过 ctx.element 直接操作渲染容器（经过 ElementProxy 包裹，带 XSS 保护）。
+ */
+export class JSFieldModel extends FieldModel {
+  private _mountedOnce = false; // prevent first-mount double-run
+  private _lastRenderedElement?: HTMLSpanElement | null;
+  private _pendingRenderedElement?: HTMLSpanElement | null;
+  private _lastRunJs?: { code: string; value: any; element: HTMLSpanElement | null };
+
+  getInputArgs() {
+    const field = this.context.collectionField;
+    if (field?.isAssociationField?.()) {
+      const targetCollection = field.targetCollection;
+      const sourceCollection = this.context.blockModel?.collection;
+      const sourceKey = field.sourceKey || sourceCollection?.filterTargetKey;
+      const targetKey = field?.targetKey;
+      const currentRecord = this.props?.value;
+
+      return {
+        collectionName: targetCollection?.name,
+        associationName: sourceCollection?.name && field?.name ? `${sourceCollection.name}.${field.name}` : undefined,
+        sourceId: this.context.record?.[sourceKey],
+        filterByTk:
+          currentRecord && typeof currentRecord === 'object' && !Array.isArray(currentRecord)
+            ? currentRecord?.[targetKey]
+            : undefined,
+      };
+    }
+
+    return {
+      sourceId: this.context.resource?.getSourceId?.(),
+      filterByTk:
+        this.context.collection && this.context.record
+          ? this.context.collection.getFilterByTK(this.context.record)
+          : undefined,
+    };
+  }
+
+  /**
+   * 在渲染前注入副作用：当 props.value 变化时，重新执行 jsSettings
+   * 说明：fork 实例在表格逐行渲染时会复用该逻辑，确保按值更新。
+   */
+  useHooksBeforeRender() {
+    const codeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      this.refreshRenderedElement(this.context.ref?.current as HTMLSpanElement | null);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [codeParam, this.props.value]);
+  }
+
+  /**
+   * 渲染一个占位容器，供 JS 脚本写入内容
+   */
+  private getRunJsCode() {
+    const codeParam = this.getStepParams('jsSettings', 'runJs')?.code as string | undefined;
+    return (typeof codeParam === 'string' && codeParam.trim().length ? codeParam : DEFAULT_CODE).trim();
+  }
+
+  private refreshRenderedElement(element: HTMLSpanElement | null) {
+    if (!element || this._pendingRenderedElement === element) {
+      return;
+    }
+
+    this._pendingRenderedElement = element;
+    const ref = this.context.ref as React.MutableRefObject<HTMLSpanElement | null>;
+
+    queueMicrotask(() => {
+      if (this._pendingRenderedElement === element) {
+        this._pendingRenderedElement = null;
+      }
+      if (ref.current !== element) {
+        return;
+      }
+      const code = this.getRunJsCode();
+      const value = this.props.value;
+      const last = this._lastRunJs;
+      if (last && last.element === element && last.code === code && Object.is(last.value, value)) {
+        return;
+      }
+      this._lastRunJs = { code, value, element };
+      void this.applyFlow('jsSettings');
+    });
+  }
+
+  render() {
+    const ref = this.context.ref as React.MutableRefObject<HTMLSpanElement | null>;
+    const assignRef = (element: HTMLSpanElement | null) => {
+      ref.current = element;
+      if (!element) {
+        return;
+      }
+
+      const elementChanged = this._lastRenderedElement && this._lastRenderedElement !== element;
+      this._lastRenderedElement = element;
+      if (elementChanged || !this._mountedOnce) {
+        this.refreshRenderedElement(element);
+      }
+    };
+    return <span ref={assignRef} style={{ display: 'inline-block', maxWidth: '100%' }} />;
+  }
+
+  /**
+   * 组件挂载后，如果容器引用已就绪，强制重跑一次 beforeRender flows 以把 HTML 写入当前 DOM。
+   * 解决新增后因命中缓存或执行时机导致内容未写入的问题（与 JSBlock/JSItem 一致处理）。
+   */
+  protected onMount() {
+    if (this._mountedOnce) {
+      if (this.context.ref?.current) {
+        this.refreshRenderedElement(this.context.ref.current as HTMLSpanElement);
+      }
+    }
+    this._mountedOnce = true;
+  }
+}
+
+JSFieldModel.define({
+  label: tExpr('JS field'),
+  createModelOptions: {
+    use: 'JSFieldModel',
+  },
+});
+
+JSFieldModel.registerFlow({
+  key: 'jsSettings',
+  title: tExpr('JavaScript settings'),
+  manual: true,
+  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) {
+        return {
+          version: 'v2',
+          code: DEFAULT_CODE,
+        };
+      },
+      async handler(ctx, params) {
+        const { code, version } = resolveRunJsParams(ctx, params);
+        // 暴露 element 与 value 到运行上下文
+        ctx.onRefReady(ctx.ref, async (element) => {
+          ctx.defineProperty('element', {
+            get: () => new ElementProxy((ctx.ref?.current as HTMLElement | null) || element),
+            cache: false,
+          });
+          ctx.defineProperty('value', {
+            get: () => ctx.model.props?.value,
+            cache: false,
+          });
+          const navigator = createSafeNavigator();
+          await ctx.runjs(
+            code,
+            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
+            { version },
+          );
+        });
+      },
+    },
+  },
+});

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

@@ -0,0 +1,163 @@
+/**
+ * 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,
+  FormItem,
+  createSafeDocument,
+  createSafeWindow,
+  createSafeNavigator,
+  tExpr,
+} from '@nocobase/flow-engine';
+import React from 'react';
+import { CodeEditor } from '../../components/code-editor';
+import { CommonItemModel } from '../base/CommonItemModel';
+import { resolveRunJsParams } from '../utils/resolveRunJsParams';
+
+/**
+ * JSItemModel：表单里的自定义项（非字段绑定），可执行 JS 并渲染到容器中
+ * - 行为与 JSBlockModel 类似，但用于表单网格中的“其他”项
+ * - 默认提供 jsSettings.runJs 自动执行的步骤
+ */
+export class JSItemModel extends CommonItemModel {
+  private _offResourceRefresh?: () => void;
+  private _mountedOnce = false; // prevent first-mount double-run
+
+  getInputArgs() {
+    const inputArgs = {};
+    if (this.context.resource) {
+      const sourceId = this.context.resource.getSourceId();
+      if (sourceId) {
+        inputArgs['sourceId'] = sourceId;
+      }
+    }
+    if (this.context.collection && this.context.record) {
+      const filterByTk = this.context.collection.getFilterByTK(this.context.record);
+      if (filterByTk) {
+        inputArgs['filterByTk'] = filterByTk;
+      }
+    }
+    return inputArgs;
+  }
+
+  render() {
+    return (
+      <FormItem shouldUpdate showLabel={false}>
+        <div ref={this.context.ref} />
+      </FormItem>
+    );
+  }
+
+  /**
+   * 组件挂载后，如果容器引用已就绪，强制重跑一次 beforeRender 以把 HTML 写入当前 DOM。
+   * 解决某些情况下命中旧缓存导致新节点未写入而显示空白的问题。
+   */
+  protected onMount() {
+    const resource = this.context.resource;
+    if (resource) {
+      // 订阅 refresh：详情记录被编辑后通常会触发 refresh，需要重跑 jsSettings
+      const handler = () => {
+        this.applyFlow('jsSettings');
+      };
+      resource.on('refresh', handler);
+      this._offResourceRefresh = () => {
+        resource.off('refresh', handler);
+      };
+    }
+
+    if (this._mountedOnce) {
+      if (this.context.ref?.current) {
+        this.rerender();
+      }
+    }
+    this._mountedOnce = true;
+  }
+
+  protected onUnmount(): void {
+    this._offResourceRefresh?.();
+    this._offResourceRefresh = undefined;
+  }
+}
+
+JSItemModel.define({
+  label: tExpr('JS item'),
+  // 明确指定 createModelOptions，避免在构建压缩后通过类名推断失败
+  createModelOptions: {
+    use: 'JSItemModel',
+  },
+  sort: 120,
+});
+
+JSItemModel.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) {
+        return {
+          version: 'v2',
+          code: `
+function JsItem() {
+  return (
+    <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", lineHeight: 1.6 }}>
+      <h3 style={{ color: '#1890ff', margin: '0 0 12px 0', fontSize: 18, fontWeight: 600 }}>JS Item</h3>
+      <div style={{ color: '#555' }}>This area is rendered by your JavaScript code.</div>
+    </div>
+  );
+}
+
+ctx.render(<JsItem />);
+`.trim(),
+        };
+      },
+      async handler(ctx, params) {
+        const { code, version } = resolveRunJsParams(ctx, params);
+        ctx.onRefReady(ctx.ref, async (element) => {
+          ctx.defineProperty('element', {
+            get: () => new ElementProxy(element),
+          });
+          const navigator = createSafeNavigator();
+          await ctx.runjs(
+            code,
+            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
+            { version },
+          );
+        });
+      },
+    },
+  },
+});