@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.21

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -94,6 +94,10 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
   );
 }
 
+const LARGE_FIELD_TEXT_INTERFACES = ['textarea', 'richText', 'json', 'markdown', 'vditor'];
+
+const LARGE_FIELD_INTERACTIVE_SELECTOR = 'a, button, input, textarea, select, [role="button"], [role="link"]';
+
 const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultValue, disabled, ...others }: any) => {
   const flowEngine = useFlowEngine();
   const ref = useRef(null);
@@ -116,17 +120,32 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
 
     return <FieldModelRenderer model={model} {...rest} onChange={handleChange} />;
   };
-  const handleClick = async (e) => {
+  const handleClick = async (e: React.MouseEvent<HTMLDivElement>) => {
     if (disabled) {
       return;
     }
+    const target = e.target as HTMLElement;
+    // 预览弹窗等通过 portal 渲染的内容，其点击事件也会沿 React 树冒泡到这里，不应触发编辑
+    if (!ref.current?.contains(target)) {
+      return;
+    }
+    // 只读组件自身可交互的部分（如附件缩略图点击预览）交给只读组件处理，不打开编辑弹窗
+    if (target.closest(LARGE_FIELD_INTERACTIVE_SELECTOR)) {
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
+    // 默认挂在 #nocobase-app-container 上，它带 transform 会形成独立层叠上下文；当子表格位于挂在 body 上的弹窗（如审批处理弹窗）里时，
+    // 编辑弹层会被弹窗遮住无法操作，此时改挂到 body
+    const appContainer = document.querySelector('#nocobase-app-container');
+    const getLargeFieldPopupContainer = () =>
+      appContainer && appContainer.contains(ref.current) ? (appContainer as HTMLElement) : document.body;
     try {
       await flowEngine.context.viewer.open({
         type: 'popover',
-        target: e.target,
+        target,
         placement: 'rightTop',
+        getPopupContainer: getLargeFieldPopupContainer,
         styles: {
           body: {
             minWidth: 400,
@@ -141,9 +160,10 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
     }
   };
   const collectionField = model.context.collectionField;
+  const isTextLike = LARGE_FIELD_TEXT_INTERFACES.includes(collectionField.interface);
 
   const content = useMemo(() => {
-    if (['textarea', 'richText', 'json', 'markdown', 'vditor'].includes(collectionField.interface)) {
+    if (isTextLike) {
       const inputValue =
         collectionField.interface === 'json' && defaultValue
           ? JSON.stringify(defaultValue, null, 2)
@@ -151,13 +171,15 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
 
       return <Input value={inputValue} disabled={disabled} style={{ width: '100%' }} />;
     } else {
+      // 只读组件保持可交互：禁用时仍可点击附件缩略图预览，与 client v1 一致
       return (
         <Space>
-          <FlowModelRenderer model={fieldModel} uid={fieldModel?.uid} /> <EditOutlined className="edit-icon" />
+          <FlowModelRenderer model={fieldModel} uid={fieldModel?.uid} />
+          {disabled ? null : <EditOutlined className="edit-icon" />}
         </Space>
       );
     }
-  }, [collectionField.interface, defaultValue, disabled, fieldModel]);
+  }, [collectionField.interface, defaultValue, disabled, fieldModel, isTextLike]);
   return (
     <div
       ref={ref}
@@ -170,11 +192,12 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
         width: '100%',
         maxHeight: 300,
         overflowY: 'auto',
-        cursor: 'pointer',
+        cursor: disabled ? 'default' : 'pointer',
       }}
     >
       <span
-        style={{ pointerEvents: 'none', display: 'block', width: '100%' }} // 不拦截点击
+        // 文本类大字段只是占位展示，不拦截点击，由外层统一打开编辑弹窗
+        style={{ pointerEvents: isTextLike ? 'none' : undefined, display: 'block', width: '100%' }}
       >
         {content}
       </span>
@@ -209,7 +232,7 @@ function hasFormValueDrivenDataScopeField(fieldModel: any) {
 }
 
 const MemoFieldRenderer = React.memo(FieldModelRenderer, (prev, next) => {
-  return prev.value === next.value && prev.model === next.model;
+  return prev.value === next.value && prev.model === next.model && prev.disabled === next.disabled;
 });
 
 export function buildRowPathFromFieldIndex(fieldIndex: unknown): Array<string | number> | null {
@@ -345,11 +368,14 @@ interface CellProps {
   memoKey?: string;
   width?: number;
   commitOnChange?: boolean;
+  disabled?: boolean;
 }
 
 const MemoCell: React.FC<CellProps> = React.memo(
-  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange }) => {
+  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange, disabled }) => {
     const isNew = record?.__is_new__;
+    // 子表格整体被禁用时，列上的显示模式可能仍是“可编辑”，这里需要把父级的禁用状态一并合并进来，否则单元格仍可编辑。
+    const columnDisabled = disabled || parent.props.disabled;
     return (
       <div
         style={{
@@ -442,9 +468,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
               style={{ marginBottom: 0 }}
               showLabel={false}
               disabled={
-                parent.props.disabled ||
-                (!isNew && parent.props.aclDisabled) ||
-                (isNew && parent.props.aclCreateDisabled)
+                columnDisabled || (!isNew && parent.props.aclDisabled) || (isNew && parent.props.aclCreateDisabled)
               }
             >
               {fork.constructor.isLargeField ? (
@@ -456,9 +480,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
                   }}
                   defaultValue={value}
                   disabled={
-                    parent.props.disabled ||
-                    (!isNew && parent.props.aclDisabled) ||
-                    (isNew && parent.props.aclCreateDisabled)
+                    columnDisabled || (!isNew && parent.props.aclDisabled) || (isNew && parent.props.aclCreateDisabled)
                   }
                 />
               ) : (
@@ -481,7 +503,8 @@ const MemoCell: React.FC<CellProps> = React.memo(
       prev.memoKey === next.memoKey &&
       prev.width === next.width &&
       prev.commitOnChange === next.commitOnChange &&
-      prev.rowIdx === next.rowIdx
+      prev.rowIdx === next.rowIdx &&
+      prev.disabled === next.disabled
     );
   },
 );
@@ -620,6 +643,11 @@ export class SubTableColumnModel<
 
   onInit(options: any): void {
     super.onInit(options);
+    const resource = this.context.blockModel?.context?.resource;
+    const fieldPath = this.context.fieldPath;
+    if (resource?.addUpdateAssociationValues && fieldPath && this.collectionField?.isAssociationField?.()) {
+      resource.addUpdateAssociationValues(fieldPath);
+    }
     this.context.defineProperty('resourceName', {
       get: () => {
         return this.context.collectionField.collection.name;
@@ -740,7 +768,7 @@ export class SubTableColumnModel<
   }
   renderItem(): any {
     return (props) => {
-      const { value, id, rowIdx, record, parentFieldIndex, parentItem } = props || {};
+      const { value, id, rowIdx, record, parentFieldIndex, parentItem, disabled: subTableDisabled } = props || {};
       // 子表格列模型本身没有行级 fieldIndex，上下文中无法把 `roles.name` 解析成 `roles[0].name`，
       // 导致“默认值/赋值规则”在对多关系字段下无法生效。
       // 这里为每一行创建一个 column fork，并注入 fieldIndex，让规则引擎能够按行解析与写入。
@@ -754,6 +782,7 @@ export class SubTableColumnModel<
       const fieldModel: any = this.subModels.field;
       const cellModeKey = [
         rowForkKey,
+        subTableDisabled ? 'disabled' : 'enabled',
         this.props.pattern,
         this.props.readPretty,
         this.props.titleField,
@@ -828,6 +857,7 @@ export class SubTableColumnModel<
           parentItem={parentItem}
           rowFork={rowFork}
           memoKey={cellModeKey}
+          disabled={subTableDisabled}
           width={this.props.width}
           commitOnChange={this.hasFormulaColumn || this.hasFormValueDrivenDataScopeColumn}
         />

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -8,7 +8,7 @@
  */
 
 import { CloseOutlined, ZoomInOutlined } from '@ant-design/icons';
-import { Table, Form, Space, Button } from 'antd';
+import { Table, Form, Space, Button, theme } from 'antd';
 import { css } from '@emotion/css';
 import { useTranslation } from 'react-i18next';
 import { PlusOutlined } from '@ant-design/icons';
@@ -51,6 +51,7 @@ function shouldRefreshForChangedPaths(fieldPath: unknown, changedPaths: unknown)
 
 export function SubTableField(props) {
   const { t } = useTranslation();
+  const { token } = theme.useToken();
   const {
     onChange,
     columns,
@@ -180,6 +181,9 @@ export function SubTableField(props) {
         // the current array index so Form.Item can rebind after reordering/removal.
         const rowBindingKey = `${rowIdentity}:${pageRowIdx}`;
         const columnKey = col.dataIndex ?? col.key ?? 'cell';
+        if (col.key === '_empty') {
+          return <div style={{ minHeight: token.controlHeight }} />;
+        }
         if (!col.render) {
           return;
         }
@@ -188,6 +192,7 @@ export function SubTableField(props) {
           rowIdx: pageRowIdx,
           id: `field-${String(columnKey)}-${rowBindingKey}`,
           value: text,
+          disabled,
           parentFieldIndex,
           parentItem,
           onChange: (value) => {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableColumnModel.largeField.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * 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 from 'react';
+import { createPortal } from 'react-dom';
+import { describe, expect, it, vi } from 'vitest';
+import { render, fireEvent } from '@nocobase/test/client';
+import { FlowEngine, FlowModel, FlowEngineProvider, largeField } from '@nocobase/flow-engine';
+import { SubTableColumnModel } from '../SubTableColumnModel';
+
+const previewClicked = vi.fn();
+
+class FakePreviewModel extends FlowModel {
+  render() {
+    return (
+      <span>
+        <div role="button" tabIndex={0} data-testid="thumb" onClick={previewClicked}>
+          file.png
+        </div>
+        {createPortal(<div data-testid="portal">preview modal</div>, document.body)}
+      </span>
+    );
+  }
+}
+
+@largeField()
+class FakeUploadModel extends FlowModel {
+  render() {
+    return <div data-testid="uploader">uploader</div>;
+  }
+}
+
+type CellRenderer = React.FC<Record<string, unknown>>;
+
+function setup({
+  disabled,
+  fieldInterface = 'attachment',
+  container,
+}: {
+  disabled: boolean;
+  fieldInterface?: string;
+  container?: HTMLElement;
+}) {
+  previewClicked.mockClear();
+  const engine = new FlowEngine();
+  engine.registerModels({ FakePreviewModel, FakeUploadModel });
+  const open = vi.fn();
+  engine.context.defineProperty('viewer', { value: { open } });
+
+  const field = engine.createModel<FakeUploadModel>({ use: 'FakeUploadModel', uid: 'f1' });
+  field.context.defineProperty('fieldPath', { value: 'items.files' });
+  field.context.defineProperty('collectionField', { value: { interface: fieldInterface } });
+  field.setSubModel('readPrettyField', { use: 'FakePreviewModel', uid: 'p1' });
+
+  const column = Object.create(SubTableColumnModel.prototype);
+  const ctx: Record<string, unknown> = {};
+  ctx.defineProperty = (key: string, options: PropertyDescriptor) =>
+    Object.defineProperty(ctx, key, { ...options, configurable: true });
+  Object.defineProperties(column, {
+    parent: {
+      value: {
+        context: { fieldIndex: [], collectionField: { name: 'items' } },
+        collection: { filterTargetKey: 'id' },
+        props: { value: [{ id: 1 }] },
+      },
+    },
+    subModels: { value: { field } },
+    props: { value: { disabled: false } },
+    context: { value: { fieldIndex: [], t: (s: string) => s } },
+    hasFormulaColumn: { value: false },
+    hasFormValueDrivenDataScopeColumn: { value: false },
+  });
+  column.mapSubModels = (_key: string, fn: (m: FlowModel) => React.ReactNode) => [fn(field)];
+  column.createFork = () => ({ context: ctx, uid: 'rowfork', flowEngine: undefined });
+  column.createRowItemContextPropertyOptions = () => ({});
+
+  const Cell: CellRenderer = SubTableColumnModel.prototype.renderItem.call(column);
+  const utils = render(
+    <FlowEngineProvider engine={engine}>
+      <Cell value={[{ id: 1, url: '/file.png' }]} id={1} rowIdx={0} record={{ id: 1 }} disabled={disabled} />
+    </FlowEngineProvider>,
+    container ? { container } : undefined,
+  );
+  return { ...utils, open };
+}
+
+function getCellTrigger(element: HTMLElement) {
+  return element.closest('div[style*="cursor"]') as HTMLElement;
+}
+
+describe('SubTableColumnModel large field cell', () => {
+  it('previews the attachment instead of opening the editor when the thumbnail is clicked', async () => {
+    const { findByTestId, open } = setup({ disabled: false });
+    const thumb = await findByTestId('thumb');
+
+    expect(thumb.closest('span[style*="pointer-events: none"]')).toBeNull();
+    fireEvent.click(thumb);
+
+    expect(previewClicked).toHaveBeenCalledTimes(1);
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it('opens the editor when the editable cell itself is clicked', async () => {
+    const { findByTestId, open, container } = setup({ disabled: false });
+    const thumb = await findByTestId('thumb');
+
+    expect(container.querySelector('.edit-icon')).not.toBeNull();
+    fireEvent.click(getCellTrigger(thumb));
+
+    expect(open).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignores clicks bubbling from portal content such as the preview modal', async () => {
+    const { findByTestId, open } = setup({ disabled: false });
+    fireEvent.click(await findByTestId('portal'));
+
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it('still allows previewing but never editing when the cell is disabled', async () => {
+    const { findByTestId, open, container } = setup({ disabled: true });
+    const thumb = await findByTestId('thumb');
+    const trigger = getCellTrigger(thumb);
+
+    expect(trigger.style.cursor).toBe('default');
+    expect(container.querySelector('.edit-icon')).toBeNull();
+
+    fireEvent.click(thumb);
+    fireEvent.click(trigger);
+
+    expect(previewClicked).toHaveBeenCalledTimes(1);
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it('mounts the editor popover on body when the cell is rendered outside the app container (e.g. in a body-level modal)', async () => {
+    const appContainer = document.createElement('div');
+    appContainer.id = 'nocobase-app-container';
+    document.body.appendChild(appContainer);
+    try {
+      const { findByTestId, open } = setup({ disabled: false });
+      fireEvent.click(getCellTrigger(await findByTestId('thumb')));
+
+      expect(open.mock.calls[0][0].getPopupContainer()).toBe(document.body);
+    } finally {
+      appContainer.remove();
+    }
+  });
+
+  it('keeps the editor popover in the app container when the cell is rendered inside it', async () => {
+    const appContainer = document.createElement('div');
+    appContainer.id = 'nocobase-app-container';
+    document.body.appendChild(appContainer);
+    try {
+      const { findByTestId, open } = setup({ disabled: false, container: appContainer });
+      fireEvent.click(getCellTrigger(await findByTestId('thumb')));
+
+      expect(open.mock.calls[0][0].getPopupContainer()).toBe(appContainer);
+    } finally {
+      appContainer.remove();
+    }
+  });
+
+  it('keeps text-like large fields as a click-through placeholder that opens the editor', async () => {
+    const { container, open } = setup({ disabled: false, fieldInterface: 'textarea' });
+    const input = container.querySelector('input') as HTMLInputElement;
+
+    expect(input.closest('span[style*="pointer-events: none"]')).not.toBeNull();
+    fireEvent.click(getCellTrigger(input));
+
+    expect(open).toHaveBeenCalledTimes(1);
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableField.disabled.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@nocobase/test/client';
+import { SubTableField } from '../SubTableField';
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useTranslation: () => ({
+    t: (value: string) => value,
+  }),
+}));
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<any>('antd');
+  return {
+    ...actual,
+    Table: ({ dataSource = [], columns = [] }: any) => (
+      <div data-testid="subtable">
+        <div data-testid="column-keys">{columns.map((column: any) => String(column.key)).join(',')}</div>
+        {dataSource.map((record: any, rowIdx: number) => (
+          <div data-testid={`row-${rowIdx}`} key={record.__index__ || rowIdx}>
+            {columns.map((column: any) => (
+              <div data-testid={`cell-${rowIdx}-${String(column.dataIndex || column.key)}`} key={column.key}>
+                {column.render?.(record[column.dataIndex], record, rowIdx)}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    ),
+  };
+});
+
+function renderSubTableField(disabled?: boolean) {
+  const renderArgs: any[] = [];
+  const columns = [
+    {
+      key: 'name',
+      dataIndex: 'name',
+      render: (args: any) => {
+        renderArgs.push(args);
+        return <span>{args.value || 'empty'}</span>;
+      },
+    },
+  ];
+
+  render(
+    <SubTableField
+      columns={columns}
+      disabled={disabled}
+      pageSize={10}
+      filterTargetKey="id"
+      fieldPathArray={['roles']}
+      getCurrentValue={() => [{ __index__: 'row-1', id: 1, name: 'admin' }]}
+    />,
+  );
+
+  return renderArgs;
+}
+
+describe('SubTableField disabled', () => {
+  it('passes the disabled state down to every column cell', () => {
+    const renderArgs = renderSubTableField(true);
+
+    expect(renderArgs).toHaveLength(1);
+    expect(renderArgs[0].disabled).toBe(true);
+  });
+
+  it('keeps cells editable when the sub-table is not disabled', () => {
+    const renderArgs = renderSubTableField(false);
+
+    expect(renderArgs).toHaveLength(1);
+    expect(renderArgs[0].disabled).toBe(false);
+  });
+
+  it('hides the remove column when the sub-table is disabled', () => {
+    renderSubTableField(true);
+
+    expect(screen.getByTestId('column-keys')).not.toHaveTextContent('delete');
+  });
+});

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordPickerFieldModel.itemContext.test.ts

@@ -7,8 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowContext, FlowEngine, FlowModel } from '@nocobase/flow-engine';
-import { renderHook, waitFor } from '@testing-library/react';
+import React from 'react';
+import { FlowContext, FlowEngine, FlowModel, FlowModelProvider } from '@nocobase/flow-engine';
+import { render, renderHook, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import {
   buildCurrentItemTitle,
@@ -84,6 +85,29 @@ describe('RecordPickerFieldModel item context', () => {
     expect(normalizeRecordPickerValue(undefined, fieldNames, false)).toBeUndefined();
   });
 
+  it('renders existing values before field names are initialized', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ RecordPickerFieldModel });
+    const field = engine.createModel<RecordPickerFieldModel>({
+      use: 'RecordPickerFieldModel',
+      uid: 'record-picker-without-field-names',
+    });
+    field.context.defineProperty('collectionField', {
+      value: {
+        type: 'hasMany',
+        targetCollection: {
+          filterTargetKey: 'id',
+          titleCollectionField: { name: 'name' },
+        },
+      },
+    });
+    field.setProps({ value: [{ id: 1, name: 'Alice' }], onClick: vi.fn(), onChange: vi.fn() });
+
+    const result = render(React.createElement(FlowModelProvider, { model: field }, field.render()));
+
+    expect(result.getByRole('combobox')).toBeTruthy();
+  });
+
   it('queues ID-only picker values for association label hydration', () => {
     const statusMap = new Map<string, 'pending' | 'done'>();
     const fieldNames = { label: 'name', value: 'id' };