@nocobase/client-v2 2.2.0-beta.7 → 2.2.0-beta.9

package/src/flow/models/blocks/form/__tests__/submitHandler.test.ts

@@ -9,6 +9,7 @@
 
 import { SingleRecordResource } from '@nocobase/flow-engine';
 import { describe, expect, it, vi } from 'vitest';
+import { EditFormModel } from '../EditFormModel';
 import { submitHandler } from '../submitHandler';
 
 describe('submitHandler', () => {
@@ -52,13 +53,14 @@ describe('submitHandler', () => {
       t: (value: string) => value,
     };
 
-    await submitHandler(ctx, {
+    const responseRecord = await submitHandler(ctx, {
       assignedValues: {
         status: 'published',
         reviewer: 'Alice',
       },
     });
 
+    expect(responseRecord).toEqual({ id: 1 });
     expect(resource.save).toHaveBeenCalledWith(
       {
         title: 'Draft title',
@@ -68,4 +70,55 @@ describe('submitHandler', () => {
       undefined,
     );
   });
+
+  it('returns the refreshed record for edit forms when the save response is empty', async () => {
+    const refreshedRecord = { id: 2, title: 'Updated title' };
+    const resource = Object.create(SingleRecordResource.prototype);
+    resource.getMeta = vi.fn((key: string) => (key === 'currentFilterByTk' ? 2 : undefined));
+    resource.setFilterByTk = vi.fn(() => resource);
+    resource.save = vi.fn(async () => undefined);
+    resource.refresh = vi.fn(async () => undefined);
+    resource.getData = vi.fn(() => refreshedRecord);
+
+    const blockModel = Object.create(EditFormModel.prototype);
+    const form = {
+      validateFields: vi.fn(async () => undefined),
+      getFieldsValue: vi.fn(() => ({
+        title: 'Updated title',
+      })),
+    };
+    Object.defineProperty(blockModel, 'context', { value: { form } });
+    Object.defineProperty(blockModel, 'collection', {
+      value: {
+        name: 'posts',
+        getFilterByTK: (record: { id?: number }) => record.id,
+      },
+    });
+    blockModel.resetUserModifiedFields = vi.fn();
+
+    const responseRecord = await submitHandler(
+      {
+        resource,
+        blockModel,
+        model: {
+          getStepParams: vi.fn(),
+        },
+        message: {
+          error: vi.fn(),
+        },
+        t: (value: string) => value,
+      },
+      {},
+    );
+
+    expect(responseRecord).toBe(refreshedRecord);
+    expect(resource.setFilterByTk).toHaveBeenCalledWith(2);
+    expect(resource.save).toHaveBeenCalledWith(
+      {
+        title: 'Updated title',
+      },
+      undefined,
+    );
+    expect(resource.refresh).toHaveBeenCalled();
+  });
 });

package/src/flow/models/blocks/form/submitHandler.ts

@@ -12,6 +12,16 @@ import { mergeAssignFieldValues, resolveAssignFieldValues } from '../assign-form
 import type { FormBlockModel } from './FormBlockModel';
 import { omitHiddenModelValuesFromSubmit, shouldSkipSubmitValidation, validateSubmitForm } from './submitValues';
 
+function getResponseRecord(response: unknown) {
+  if (!response || typeof response !== 'object') {
+    return response;
+  }
+  if ('data' in response) {
+    return (response as { data?: unknown }).data;
+  }
+  return response;
+}
+
 export async function submitHandler(ctx, params, cb?: (values?: any, filterByTk?: any) => void) {
   const resource = ctx.resource;
   const blockModel = ctx.blockModel as FormBlockModel;
@@ -41,30 +51,34 @@ export async function submitHandler(ctx, params, cb?: (values?: any, filterByTk?
         resource.setFilterByTk(currentFilterByTk);
       }
     }
-    const data: any = cb ? await cb(values) : await resource.save(values, params.requestConfig);
+    const data: unknown = cb ? await cb(values) : await resource.save(values, params.requestConfig);
+    let responseRecord = getResponseRecord(data);
     if (isEditFormModel) {
       resource.isNewRecord = false;
       // 编辑表单保存成功后，表单应回到“已同步”状态：下一次刷新应允许覆盖为服务端值
       blockModel.resetUserModifiedFields?.();
       await resource.refresh();
+      responseRecord = responseRecord ?? resource.getData?.();
     } else {
       blockModel.form.resetFields();
       blockModel.emitter.emit('onFieldReset');
       blockModel.resetUserModifiedFields?.();
       blockModel.formValueRuntime?.resetAfterFormReset?.();
       if (ctx.view.inputArgs.collectionName === blockModel.collection.name && ctx.view.inputArgs.onChange) {
-        ctx.view.inputArgs.onChange(data?.data);
+        ctx.view.inputArgs.onChange(responseRecord);
       }
     }
+    return responseRecord;
   } else if (resource instanceof MultiRecordResource) {
     const currentFilterByTk = resource.getMeta('currentFilterByTk');
     if (!currentFilterByTk) {
       ctx.message.error(ctx.t('No filterByTk found for multi-record resource.'));
       return;
     }
-    (await cb)
+    const data = cb
       ? await cb(values, currentFilterByTk)
       : await resource.update(currentFilterByTk, values, params.requestConfig);
     blockModel.resetUserModifiedFields?.();
+    return getResponseRecord(data) ?? blockModel.getCurrentRecord?.();
   }
 }

package/src/flow/models/blocks/form/value-runtime/__tests__/runtime.test.ts

@@ -127,6 +127,93 @@ function createFieldContext(runtime: FormValueRuntime) {
 }
 
 describe('FormValueRuntime (default rules)', () => {
+  it('builds draft snapshots from current user-edited values only', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({});
+    const dispatchEvent = vi.fn();
+
+    const blockModel = {
+      uid: 'form-user-edited-draft-snapshot',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent,
+      getAclActionName: () => 'create',
+    } as ConstructorParameters<typeof FormValueRuntime>[0]['model'];
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as unknown as FormInstance });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    await runtime.setFormValues(blockCtx, [{ path: ['fixed'], value: 'Fixed auto value' }], { source: 'system' });
+    await runtime.setFormValues(blockCtx, [{ path: ['defaultTitle'], value: 'Default auto value' }], {
+      source: 'default',
+    });
+    await runtime.setFormValues(blockCtx, [{ path: ['overrideTitle'], value: 'Override auto value' }], {
+      source: 'override',
+    });
+
+    expect(runtime.getUserEditedValuePatches()).toEqual([]);
+    expect(runtime.getUserEditedValuesSnapshot()).toEqual({});
+
+    await runtime.setFormValues(
+      blockCtx,
+      [
+        { path: ['title'], value: 'Manual title' },
+        { path: ['roles', 0, 'roleName'], value: 'Manual role' },
+      ],
+      { source: 'user' },
+    );
+
+    expect(runtime.getUserEditedValuePatches()).toEqual([
+      { path: ['title'], value: 'Manual title' },
+      { path: ['roles', 0, 'roleName'], value: 'Manual role' },
+    ]);
+    expect(runtime.getUserEditedValuesSnapshot()).toEqual({
+      title: 'Manual title',
+      roles: [{ roleName: 'Manual role' }],
+    });
+
+    await runtime.setFormValues(blockCtx, [{ path: ['title'], value: 'Fixed title' }], { source: 'system' });
+
+    expect(runtime.getUserEditedValuesSnapshot()).toEqual({
+      roles: [{ roleName: 'Manual role' }],
+    });
+  });
+
+  it('omits non-user descendant values from parent user-edited draft patches', async () => {
+    const engineEmitter = new EventEmitter();
+    const blockEmitter = new EventEmitter();
+    const formStub = createFormStub({});
+    const dispatchEvent = vi.fn();
+
+    const blockModel = {
+      uid: 'form-user-edited-parent-draft-patch',
+      flowEngine: { emitter: engineEmitter },
+      emitter: blockEmitter,
+      dispatchEvent,
+      getAclActionName: () => 'create',
+    } as ConstructorParameters<typeof FormValueRuntime>[0]['model'];
+
+    const runtime = new FormValueRuntime({ model: blockModel, getForm: () => formStub as unknown as FormInstance });
+    runtime.mount({ sync: true });
+
+    const blockCtx = createFieldContext(runtime);
+    await runtime.setFormValues(
+      blockCtx,
+      [{ path: ['roles'], value: [{ roleName: 'Manual role', fixedRoleName: 'Initial fixed role' }] }],
+      { source: 'user' },
+    );
+    await runtime.setFormValues(blockCtx, [{ path: ['roles', 0, 'fixedRoleName'], value: 'System fixed role' }], {
+      source: 'system',
+    });
+
+    expect(runtime.getUserEditedValuePatches()).toEqual([{ path: ['roles'], value: [{ roleName: 'Manual role' }] }]);
+    expect(runtime.getUserEditedValuesSnapshot()).toEqual({
+      roles: [{ roleName: 'Manual role' }],
+    });
+  });
+
   it('skips object patches when values are unchanged', async () => {
     const engineEmitter = new EventEmitter();
     const blockEmitter = new EventEmitter();

package/src/flow/models/blocks/form/value-runtime/runtime.ts

@@ -38,6 +38,11 @@ type FormBlockModel = FlowModel & {
   getAclActionName?: () => string;
 };
 
+export type FormValuePatch = {
+  path: NamePath;
+  value: unknown;
+};
+
 export class FormValueRuntime {
   private readonly model: FormBlockModel;
   private readonly getForm: () => FormInstance;
@@ -142,6 +147,49 @@ export class FormValueRuntime {
     return this.getForm().getFieldsValue(true);
   }
 
+  getUserEditedValuePatches(): FormValuePatch[] {
+    const snapshot = this.getFormValuesSnapshot();
+    if (!snapshot || typeof snapshot !== 'object') {
+      return [];
+    }
+
+    const patches: FormValuePatch[] = [];
+    const pathKeys = Array.from(this.userEditedSet).sort(
+      (a, b) => pathKeyToNamePath(a).length - pathKeyToNamePath(b).length,
+    );
+
+    for (const pathKey of pathKeys) {
+      if (!this.isCurrentUserEditedPath(pathKey)) {
+        continue;
+      }
+
+      const namePath = pathKeyToNamePath(pathKey);
+      if (!namePath.length || !_.has(snapshot, namePath as any)) {
+        continue;
+      }
+
+      const value = _.get(snapshot, namePath as any);
+      if (typeof value === 'undefined') {
+        continue;
+      }
+
+      patches.push({
+        path: namePath,
+        value: this.omitNonUserDescendantValues(pathKey, this.toMirrorSnapshot(value)),
+      });
+    }
+
+    return patches;
+  }
+
+  getUserEditedValuesSnapshot(): Record<string, unknown> {
+    const values: Record<string, unknown> = {};
+    for (const patch of this.getUserEditedValuePatches()) {
+      _.set(values, patch.path as any, patch.value);
+    }
+    return values;
+  }
+
   private toMirrorSnapshot(value: any) {
     const raw = isObservable(value) ? toJS(value) : value;
     return _.cloneDeepWith(raw, (item) => {
@@ -1453,6 +1501,49 @@ export class FormValueRuntime {
     return null;
   }
 
+  private findLatestWriteMeta(pathKey: string): FormValueWriteMeta | undefined {
+    let latest: FormValueWriteMeta | undefined;
+    const namePath = pathKeyToNamePath(pathKey);
+    const prefix: NamePath = [];
+
+    for (let i = 0; i < namePath.length; i++) {
+      prefix.push(namePath[i]);
+      const meta = this.lastWriteMetaByPathKey.get(namePathToPathKey(prefix as any));
+      if (!meta) {
+        continue;
+      }
+      if (!latest || meta.writeSeq >= latest.writeSeq) {
+        latest = meta;
+      }
+    }
+
+    return latest;
+  }
+
+  private isCurrentUserEditedPath(pathKey: string) {
+    const lastWrite = this.findLatestWriteMeta(pathKey);
+    return !lastWrite || lastWrite.source === 'user';
+  }
+
+  private omitNonUserDescendantValues(pathKey: string, value: unknown) {
+    if (!value || typeof value !== 'object') {
+      return value;
+    }
+
+    const namePath = pathKeyToNamePath(pathKey);
+    for (const childKey of this.lastWriteMetaByPathKey.keys()) {
+      if (!this.isDescendantPathKey(childKey, pathKey)) {
+        continue;
+      }
+      if (this.isCurrentUserEditedPath(childKey)) {
+        continue;
+      }
+      _.unset(value as Record<string, unknown>, pathKeyToNamePath(childKey).slice(namePath.length) as any);
+    }
+
+    return value;
+  }
+
   private isDescendantPathKey(candidateKey: string, parentKey: string) {
     if (!candidateKey || !parentKey || candidateKey === parentKey) return false;
     const candidatePath = pathKeyToNamePath(candidateKey);

package/src/flow/models/blocks/js-block/JSBlock.tsx

@@ -16,24 +16,238 @@ import { CodeEditor } from '../../../components/code-editor';
 
 const NAMESPACE = 'client';
 
+const getRootElement = (element: HTMLElement | null) => {
+  if (!element) return document.documentElement;
+  return (
+    (element.closest('.nb-block-grid') as HTMLElement | null) ||
+    (element.closest('.nb-page-wrapper') as HTMLElement | null) ||
+    (element.closest('.nb-page') as HTMLElement | null) ||
+    document.documentElement
+  );
+};
+
+const getOuterHeight = (element?: HTMLElement | null) => {
+  if (!element) return 0;
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const marginTop = parseFloat(style.marginTop) || 0;
+  const marginBottom = parseFloat(style.marginBottom) || 0;
+  return rect.height + marginTop + marginBottom;
+};
+
+const getPadding = (element: HTMLElement | null) => {
+  if (!element || element === document.documentElement) {
+    return { top: 0, bottom: 0 };
+  }
+  const style = window.getComputedStyle(element);
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+  };
+};
+
+const getPageHeader = (root: HTMLElement) => {
+  const page = root.closest('.nb-page') as HTMLElement | null;
+  if (!page) return null;
+  return (
+    (page.querySelector('.ant-page-header') as HTMLElement | null) ||
+    (page.querySelector('.pageHeaderCss') as HTMLElement | null)
+  );
+};
+
+const getAddBlockContainer = (root: HTMLElement) => {
+  const button = root.querySelector('[data-flow-add-block]') as HTMLElement | null;
+  if (!button) return null;
+  return (button.parentElement as HTMLElement | null) || button;
+};
+
+function getValidPageTop(a: number, b: number) {
+  const aValid = a > 0;
+  const bValid = b > 0;
+
+  if (aValid) return a;
+  if (bValid) return b;
+  return 0;
+}
+
+const usePlainHostHeight = ({
+  height,
+  heightMode,
+  hostRef,
+  marginBlock,
+}: {
+  height?: number;
+  heightMode?: string;
+  hostRef: React.RefObject<HTMLDivElement>;
+  marginBlock: number;
+}) => {
+  const [fullHeight, setFullHeight] = React.useState<number>();
+  const updateFullHeight = React.useCallback(() => {
+    if (heightMode !== 'fullHeight' || typeof window === 'undefined') {
+      setFullHeight((prev) => (prev === undefined ? prev : undefined));
+      return;
+    }
+    const hostEl = hostRef.current;
+    if (!hostEl) return;
+    const root = getRootElement(hostEl);
+    const hostRect = hostEl.getBoundingClientRect();
+    const rootRect = root === document.documentElement ? { top: 0 } : root.getBoundingClientRect();
+    const padding = getPadding(root);
+    const addBlockContainer = getAddBlockContainer(root);
+    const pageTop = rootRect.top + padding.top;
+    const topOffset = Math.max(0, hostRect.top - pageTop);
+    let bottomOffset = padding.bottom + marginBlock;
+    if (addBlockContainer) {
+      const gapBetween = marginBlock;
+      bottomOffset = gapBetween + getOuterHeight(addBlockContainer) + padding.bottom;
+    }
+    const nextHeight = Math.max(
+      0,
+      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset - 1),
+    );
+    setFullHeight((prev) => (prev === nextHeight ? prev : nextHeight));
+  }, [heightMode, hostRef, marginBlock]);
+
+  React.useLayoutEffect(() => {
+    updateFullHeight();
+  }, [updateFullHeight]);
+
+  React.useEffect(() => {
+    if (heightMode !== 'fullHeight' || typeof window === 'undefined') return;
+    const hostEl = hostRef.current;
+    if (!hostEl || typeof ResizeObserver === 'undefined') return;
+    const root = getRootElement(hostEl);
+    const pageHeader = getPageHeader(root);
+    const addBlockContainer = getAddBlockContainer(root);
+    const observer = new ResizeObserver(() => updateFullHeight());
+    observer.observe(hostEl);
+    if (root instanceof HTMLElement) {
+      observer.observe(root);
+    }
+    if (pageHeader) observer.observe(pageHeader);
+    if (addBlockContainer) observer.observe(addBlockContainer);
+    window.addEventListener('resize', updateFullHeight);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateFullHeight);
+    };
+  }, [heightMode, hostRef, updateFullHeight]);
+
+  if (heightMode === 'specifyValue') {
+    return height;
+  }
+  if (heightMode === 'fullHeight') {
+    return fullHeight;
+  }
+  return null;
+};
+
+const JSBlockPlainHost = ({
+  uid,
+  className,
+  heightMode,
+  height,
+  style,
+  beforeContent,
+  afterContent,
+  contentRef,
+  marginBlock,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement> & {
+  uid: string;
+  heightMode?: string;
+  height?: number;
+  beforeContent?: React.ReactNode;
+  afterContent?: React.ReactNode;
+  contentRef: React.RefObject<HTMLDivElement>;
+  marginBlock: number;
+}) => {
+  const hostRef = React.useRef<HTMLDivElement | null>(null);
+  const resolvedHeight = usePlainHostHeight({ height, heightMode, hostRef, marginBlock });
+
+  return (
+    <div
+      {...rest}
+      ref={hostRef}
+      id={`model-${uid}`}
+      className={className}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: resolvedHeight ?? undefined,
+        minHeight: 0,
+        overflow: 'auto',
+        ...(style || {}),
+      }}
+    >
+      {beforeContent}
+      <div ref={contentRef} />
+      {afterContent}
+    </div>
+  );
+};
+
 export class JSBlockModel extends BlockModel {
   // Avoid double-run on first mount; only rerun after remounts
   private _mountedOnce = false;
+
+  get showBlockCard() {
+    return this.getStepParams('jsSettings', 'showBlockCard')?.showBlockCard !== false;
+  }
+
   renderComponent(): React.ReactNode {
     return <div ref={this.context.ref} />;
   }
   render() {
     const decoratorProps = this.decoratorProps || {};
-    const { className, id: _ignoredId, title, description, ...rest } = decoratorProps;
+    const {
+      className,
+      id: _ignoredId,
+      title,
+      description,
+      showCard: _ignoredShowCard,
+      heightMode,
+      height,
+      style,
+      beforeContent,
+      afterContent,
+      ...rest
+    } = decoratorProps;
     const mergedClassName = ['code-block', className].filter(Boolean).join(' ');
 
+    if (!this.showBlockCard) {
+      return (
+        <JSBlockPlainHost
+          {...rest}
+          uid={this.uid}
+          className={mergedClassName}
+          heightMode={heightMode}
+          height={height}
+          style={style}
+          beforeContent={beforeContent}
+          afterContent={afterContent}
+          contentRef={this.context.ref}
+          marginBlock={this.context.themeToken?.marginBlock ?? 0}
+        />
+      );
+    }
+
+    const cardProps = {
+      ...rest,
+      height,
+      style,
+      ...(beforeContent === undefined ? {} : { beforeContent }),
+      ...(afterContent === undefined ? {} : { afterContent }),
+    };
+
     return (
       <BlockItemCard
         id={`model-${this.uid}`}
         className={mergedClassName}
         title={title}
         description={description}
-        {...rest}
+        heightMode={heightMode}
+        {...cardProps}
       >
         <div ref={this.context.ref} />
       </BlockItemCard>
@@ -61,6 +275,13 @@ JSBlockModel.registerFlow({
   key: 'jsSettings',
   title: 'JavaScript settings',
   steps: {
+    showBlockCard: {
+      title: tExpr('Show block card'),
+      uiMode: { type: 'switch', key: 'showBlockCard' },
+      defaultParams: {
+        showBlockCard: true,
+      },
+    },
     runJs: {
       title: tExpr('Write JavaScript'),
       useRawParams: true,