@nocobase/client-v2 2.2.0-alpha.2 → 2.2.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-alpha.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.2.0-alpha.2",
-    "@nocobase/flow-engine": "2.2.0-alpha.2",
-    "@nocobase/sdk": "2.2.0-alpha.2",
-    "@nocobase/shared": "2.2.0-alpha.2",
-    "@nocobase/utils": "2.2.0-alpha.2",
+    "@nocobase/evaluators": "2.2.0-alpha.3",
+    "@nocobase/flow-engine": "2.2.0-alpha.3",
+    "@nocobase/sdk": "2.2.0-alpha.3",
+    "@nocobase/shared": "2.2.0-alpha.3",
+    "@nocobase/utils": "2.2.0-alpha.3",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -46,5 +46,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "9dd5224bb8f6c1ac12d766b9f175bdc29bddd845"
+  "gitHead": "e3ec19361fd7981af9fe2a7f24ad335025cbefcd"
 }

package/src/components/form/__tests__/TypedVariableInput.test.tsx

@@ -64,6 +64,7 @@ describe('TypedVariableInput - constant rendering', () => {
       const item = screen.getByText('True');
       expect(item).toBeInTheDocument();
     });
+    expect(screen.getByRole('button', { name: 'variable-switcher' }).className).not.toContain('ant-btn-primary');
   });
 
   it('renders the Null placeholder when value=null and nullable=true', async () => {
@@ -77,6 +78,7 @@ describe('TypedVariableInput - constant rendering', () => {
     const nullInput = await screen.findByPlaceholderText('<Null>');
     expect(nullInput).toBeInTheDocument();
     expect(nullInput.getAttribute('readonly')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'variable-switcher' }).className).not.toContain('ant-btn-primary');
   });
 
   it('defaults undefined to the first constant type', async () => {

package/src/flow/models/base/ActionModelCore.tsx

@@ -25,7 +25,7 @@ export function ActionWithoutPermission(props) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} ` : '';
     return `${dataSourcePrefix}${collectionPrefix}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, t]);
   const { actionName } = props?.forbidden || model.forbidden;
   const messageValue = useMemo(() => {
     return t(
@@ -143,10 +143,11 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderButton() {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
 
     return (
       <Button {...props} onClick={this.onClick.bind(this)} icon={icon}>
-        {iconOnly ? null : props.children || this.getTitle()}
+        {titleContent}
       </Button>
     );
   }
@@ -162,11 +163,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   renderHiddenInConfig(): React.ReactNode | undefined {
     const { iconOnly, ...props } = this.props;
     const icon = this.getIcon() ? <Icon type={this.getIcon() as any} /> : undefined;
+    const titleContent = iconOnly && icon ? null : props.children || this.getTitle();
     if (this.forbidden) {
       return (
         <ActionWithoutPermission>
           <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-            {iconOnly ? null : props.children || this.getTitle()}
+            {titleContent}
           </Button>
         </ActionWithoutPermission>
       );
@@ -174,7 +176,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return (
       <Tooltip title={this.context.t('The button is hidden and only visible when the UI Editor is active')}>
         <Button {...props} onClick={this.onClick.bind(this)} icon={icon} style={{ opacity: '0.3' }}>
-          {iconOnly ? null : props.children || this.getTitle()}
+          {titleContent}
         </Button>
       </Tooltip>
     );

package/src/flow/models/base/__tests__/ActionModelCore.render.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@nocobase/test/client';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { App, ConfigProvider } from 'antd';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { ActionModel } from '../ActionModel';
+
+class NoIconActionModel extends ActionModel {
+  defaultProps = {
+    type: 'link' as const,
+    title: 'Open details',
+  };
+}
+
+describe('ActionModel rendering', () => {
+  it('shows the title when iconOnly is true but no icon is configured', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: {
+        title: 'Open details',
+        iconOnly: true,
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{model.render()}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open details' })).toBeInTheDocument();
+  });
+});

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,