@nocobase/client-v2 2.2.0-beta.1 → 2.2.0-beta.10

package/src/flow/models/blocks/filter-form/fields/FilterFormCustomFieldModel.tsx

@@ -210,7 +210,7 @@ FilterFormCustomFieldModel.registerFlow({
           'x-decorator': 'FormItem',
           required: true,
           description:
-            '{{t("Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.")}}',
+            '{{t("Randomly generated and can be modified. Support letters, numbers and underscores, must start with a letter.")}}',
         },
         source: {
           type: 'array',

package/src/flow/models/blocks/filter-manager/flow-actions/__tests__/customizeFilterRender.test.tsx

@@ -18,12 +18,23 @@ type TestFieldModel = {
   setupReactiveRender: ReturnType<typeof vi.fn>;
   _reactiveWrapperCache?: unknown;
   __originalRender?: () => React.ReactNode;
+  translate?: (text: string) => string;
 };
 
 const MultipleKeywordsInput = (props: Record<string, unknown>) => {
   return <div data-testid="multiple-keywords-input" {...props} />;
 };
 
+const Select = (props: Record<string, unknown>) => {
+  return <div data-testid="select" {...props} />;
+};
+
+function mockT(text: string) {
+  if (text === '{{t("Yes")}}') return '是';
+  if (text === '{{t("No")}}') return '否';
+  return text;
+}
+
 function createFieldModel() {
   return {
     props: {
@@ -52,7 +63,10 @@ function createFilterItemModel({
     collectionField,
     context: {
       app: {
-        getComponent: (name: string) => (name === 'MultipleKeywordsInput' ? MultipleKeywordsInput : undefined),
+        getComponent: (name: string) => {
+          if (name === 'MultipleKeywordsInput') return MultipleKeywordsInput;
+          if (name === 'Select') return Select;
+        },
       },
       collectionField,
     },
@@ -112,6 +126,47 @@ describe('customizeFilterRender action', () => {
     expect((rerenderedElement as React.ReactElement).props.placeholder).toBe('updated runtime placeholder');
   });
 
+  it('translates operator schema select options', () => {
+    const fieldModel = {
+      ...createFieldModel(),
+      translate: mockT,
+    };
+    const model = createFilterItemModel({
+      fieldModel,
+      operator: '$isTruly',
+      collectionField: {
+        interface: 'checkbox',
+        type: 'boolean',
+        filterable: {
+          operators: [
+            {
+              label: '{{t("Yes")}}',
+              value: '$isTruly',
+              schema: {
+                'x-component': 'Select',
+                'x-component-props': {
+                  options: [
+                    { label: '{{t("Yes")}}', value: true },
+                    { label: '{{t("No")}}', value: false },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      },
+    });
+
+    customizeFilterRender.handler?.({ model } as any);
+
+    const element = fieldModel.render();
+    expect((element as React.ReactElement).type).toBe(Select);
+    expect((element as React.ReactElement).props.options).toEqual([
+      { label: '是', value: true },
+      { label: '否', value: false },
+    ]);
+  });
+
   it('restores original render when switching to an operator without a schema component', () => {
     const fieldModel = createFieldModel();
     const originalRender = fieldModel.render;

package/src/flow/models/blocks/form/EditFormModel.tsx

@@ -239,6 +239,7 @@ EditFormModel.registerFlow({
           // 切换记录（翻页等）时，清理“用户改动标记”，避免把上一条记录的编辑状态带到下一条
           if (recordChanged) {
             ctx.model.resetUserModifiedFields?.();
+            ctx.model.resetRuntimeUserEditedState?.();
           }
 
           ctx.form.setFieldsValue(currentRecord);

package/src/flow/models/blocks/form/FormActionModel.tsx

@@ -117,7 +117,7 @@ FormSubmitActionModel.registerFlow({
         try {
           ctx.model.setProps('loading', true);
           const { submitHandler } = await import('./submitHandler');
-          await submitHandler(ctx, params);
+          return await submitHandler(ctx, params);
         } catch (error) {
           ctx.model.setProps('loading', false);
           if (error instanceof FlowExitAllException) {

package/src/flow/models/blocks/form/FormBlockModel.tsx

@@ -166,6 +166,13 @@ export class FormBlockModel<
     this.userModifiedTopLevelFields.clear();
   }
 
+  /**
+   * @internal
+   */
+  resetRuntimeUserEditedState(): void {
+    this.formValueRuntime?.resetUserEditedState?.();
+  }
+
   public async onDispatchEventStart(eventName: string, options?: any, inputArgs?: Record<string, any>): Promise<void> {
     if (eventName === 'beforeRender') {
       const grid = this.subModels.grid;

package/src/flow/models/blocks/form/JSFormActionModel.tsx

@@ -10,7 +10,7 @@
 /**
  * JS Form Action：表单工具栏按钮点击执行 JS。
  */
-import { tExpr, createSafeWindow, createSafeDocument, createSafeNavigator } from '@nocobase/flow-engine';
+import { tExpr } from '@nocobase/flow-engine';
 import { CodeEditor } from '../../../components/code-editor';
 import { FormActionModel } from './FormActionModel';
 import { resolveRunJsParams } from '../../utils/resolveRunJsParams';
@@ -73,12 +73,7 @@ ctx.message.success('Current form values: ' + JSON.stringify(values));
             await ctx.resource.refresh();
           }
         });
-        const navigator = createSafeNavigator();
-        await ctx.runjs(
-          code,
-          { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-          { version },
-        );
+        await ctx.runjs(code, undefined, { version });
       },
     },
   },

package/src/flow/models/blocks/form/QuickEditFormModel.tsx

@@ -22,7 +22,6 @@ import {
   createRecordResolveOnServerWithLocal,
 } from '@nocobase/flow-engine';
 import { Button, Form, Skeleton, Space } from 'antd';
-import _ from 'lodash';
 import React from 'react';
 import { FieldModel } from '../../base/FieldModel';
 import { FormComponent } from './FormBlockModel';
@@ -31,6 +30,37 @@ import { FormItemModel } from './FormItemModel';
 export const QUICK_EDIT_POPOVER_MAX_HEIGHT = 'calc(100vh - 96px)';
 export const QUICK_EDIT_FORM_MAX_HEIGHT = 'calc(100vh - 160px)';
 export const QUICK_EDIT_MARKDOWN_HEIGHT = 'min(480px, calc(100vh - 320px))';
+const QUICK_EDIT_MOBILE_DRAWER_HEIGHT = '50vh';
+const QUICK_EDIT_MOBILE_FORM_MAX_HEIGHT = 'calc(50vh - var(--nb-mobile-page-header-height, 40px) - 132px)';
+const QUICK_EDIT_MOBILE_CONTENT_PADDING = '8px var(--nb-mobile-page-tabs-content-padding, 12px) 0';
+const QUICK_EDIT_MOBILE_ACTIONS_PADDING =
+  '8px var(--nb-mobile-page-tabs-content-padding, 12px) calc(80px + env(safe-area-inset-bottom, 0px))';
+const QUICK_EDIT_MOBILE_MEDIA_QUERY = '(max-width: 768px)';
+
+type QuickEditViewBeforeClosePayload = {
+  result?: unknown;
+  force?: boolean;
+  [key: string]: unknown;
+};
+
+type QuickEditViewBeforeCloseHandler = (
+  payload: QuickEditViewBeforeClosePayload,
+) => Promise<boolean | void> | boolean | void;
+
+type QuickEditViewUpdateConfig = {
+  preventClose?: boolean;
+  [key: string]: unknown;
+};
+
+type QuickEditViewContainer = {
+  close: (result?: unknown, force?: boolean) => Promise<boolean | void> | boolean | void;
+  update?: (newConfig: QuickEditViewUpdateConfig) => unknown;
+  beforeClose?: QuickEditViewBeforeCloseHandler;
+};
+
+type QuickEditViewContext = {
+  defineProperty?: (key: string, options: { value: unknown }) => void;
+};
 
 export function getQuickEditFieldProps(collectionField: CollectionField, fieldProps?: Record<string, any>) {
   const nextProps = { ...collectionField.getComponentProps(), ...(fieldProps || {}) };
@@ -40,15 +70,92 @@ export function getQuickEditFieldProps(collectionField: CollectionField, fieldPr
   return nextProps;
 }
 
+function getQuickEditMobileLayoutState(flowEngine: FlowEngine, sourceFieldModel?: FlowModel) {
+  const sourceMobileLayout = sourceFieldModel?.context?.isMobileLayout;
+  if (typeof sourceMobileLayout === 'boolean') {
+    return { isMobileLayout: sourceMobileLayout, inheritsMobileContext: sourceMobileLayout };
+  }
+
+  const engineMobileLayout = flowEngine.context?.isMobileLayout;
+  if (typeof engineMobileLayout === 'boolean') {
+    return { isMobileLayout: engineMobileLayout, inheritsMobileContext: engineMobileLayout };
+  }
+
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return { isMobileLayout: false, inheritsMobileContext: false };
+  }
+
+  return {
+    isMobileLayout: window.matchMedia(QUICK_EDIT_MOBILE_MEDIA_QUERY).matches,
+    inheritsMobileContext: false,
+  };
+}
+
+function getQuickEditTitle(
+  flowEngine: FlowEngine,
+  dataSourceKey: string,
+  collectionName: string,
+  fieldPath: string,
+  sourceFieldModel?: FlowModel,
+  fieldProps?: Record<string, unknown>,
+): React.ReactNode {
+  const sourceColumnTitle = sourceFieldModel?.parent?.props?.title;
+  if (sourceColumnTitle) {
+    return sourceColumnTitle;
+  }
+
+  const fieldPropsTitle = fieldProps?.title;
+  if (fieldPropsTitle) {
+    return fieldPropsTitle as React.ReactNode;
+  }
+
+  const collectionField = flowEngine.context.dataSourceManager.getCollectionField(
+    `${dataSourceKey}.${collectionName}.${fieldPath}`,
+  ) as CollectionField | undefined;
+  return collectionField?.title || fieldPath;
+}
+
+function createQuickEditViewContainer(view: QuickEditViewContainer): QuickEditViewContainer {
+  let preventClose = false;
+  let nextBeforeClose = view.beforeClose;
+  const beforeClose: QuickEditViewBeforeCloseHandler = async (payload) => {
+    if (preventClose && !payload?.force) {
+      return false;
+    }
+
+    const result = await nextBeforeClose?.(payload);
+    return result !== false;
+  };
+  view.beforeClose = beforeClose;
+
+  return {
+    ...view,
+    close(result, force) {
+      return view.close(result, force);
+    },
+    update(newConfig) {
+      if (Object.prototype.hasOwnProperty.call(newConfig, 'preventClose')) {
+        preventClose = !!newConfig.preventClose;
+      }
+      return view.update?.(newConfig);
+    },
+    get beforeClose() {
+      return view.beforeClose;
+    },
+    set beforeClose(value) {
+      nextBeforeClose = value;
+      view.beforeClose = beforeClose;
+    },
+  };
+}
+
 export class QuickEditFormModel extends FlowModel {
   fieldPath: string;
 
   declare resource: SingleRecordResource;
   declare collection: Collection;
 
-  now: number = Date.now();
-
-  viewContainer: any;
+  declare viewContainer: QuickEditViewContainer;
   __onSubmitSuccess;
   _fieldProps: any;
   _onOk: any;
@@ -89,21 +196,75 @@ export class QuickEditFormModel extends FlowModel {
       onOk,
       sourceFieldModelUid,
     } = options;
-    const model = flowEngine.createModel({
-      use: 'QuickEditFormModel',
-      stepParams: {
-        quickEditFormSettings: {
-          init: {
-            dataSourceKey,
-            collectionName,
-            fieldPath,
+    const sourceFieldModel = sourceFieldModelUid ? flowEngine.getModel<FlowModel>(sourceFieldModelUid) : undefined;
+    const model = flowEngine.createModel(
+      {
+        use: 'QuickEditFormModel',
+        stepParams: {
+          quickEditFormSettings: {
+            init: {
+              dataSourceKey,
+              collectionName,
+              fieldPath,
+            },
           },
         },
       },
-    }) as QuickEditFormModel;
+      sourceFieldModel ? { delegate: sourceFieldModel.context } : undefined,
+    ) as QuickEditFormModel;
 
-    console.log('QuickEditFormModel.open2', Date.now() - model.now);
-    model.now = Date.now();
+    const bodyStyles = {
+      maxHeight: QUICK_EDIT_POPOVER_MAX_HEIGHT,
+      overflowY: 'auto',
+      overscrollBehavior: 'contain',
+    };
+    const mobileBodyStyles = {
+      ...bodyStyles,
+      maxHeight: QUICK_EDIT_MOBILE_DRAWER_HEIGHT,
+    };
+    const content = (view: QuickEditViewContainer, viewContext?: QuickEditViewContext) => {
+      if (mobileLayoutState.isMobileLayout) {
+        viewContext?.defineProperty?.('isMobileLayout', { value: true });
+      }
+      model.viewContainer = createQuickEditViewContainer(view);
+      model.__onSubmitSuccess = onSuccess;
+      model._fieldProps = fieldProps;
+      model._onOk = onOk;
+      return (
+        <FlowModelRenderer
+          fallback={<Skeleton.Input size="small" />}
+          model={model}
+          inputArgs={{ filterByTk, record, sourceFieldModelUid }}
+        />
+      );
+    };
+    const mobileLayoutState = getQuickEditMobileLayoutState(flowEngine, sourceFieldModel);
+    if (mobileLayoutState.isMobileLayout) {
+      model.context.defineProperty('isMobileLayout', { value: true });
+      const viewer = sourceFieldModel?.context?.viewer || flowEngine.context.viewer;
+      const title = getQuickEditTitle(
+        flowEngine,
+        dataSourceKey,
+        collectionName,
+        fieldPath,
+        sourceFieldModel,
+        fieldProps,
+      );
+      await viewer.open({
+        type: 'drawer',
+        title,
+        closable: true,
+        placement: 'bottom',
+        inputArgs: {
+          isMobileLayout: true,
+        },
+        styles: {
+          body: mobileBodyStyles,
+        },
+        content,
+      });
+      return;
+    }
 
     await flowEngine.context.viewer.open({
       type: 'popover',
@@ -112,25 +273,10 @@ export class QuickEditFormModel extends FlowModel {
       styles: {
         body: {
           width: 420,
-          maxHeight: QUICK_EDIT_POPOVER_MAX_HEIGHT,
-          overflowY: 'auto',
-          overscrollBehavior: 'contain',
+          ...bodyStyles,
         },
       },
-      content: (popover) => {
-        model.viewContainer = popover;
-        model.__onSubmitSuccess = onSuccess;
-        model._fieldProps = fieldProps;
-        model._onOk = onOk;
-        console.log('QuickEditFormModel.open3', Date.now() - model.now);
-        return (
-          <FlowModelRenderer
-            fallback={<Skeleton.Input size="small" />}
-            model={model}
-            inputArgs={{ filterByTk, record, sourceFieldModelUid }}
-          />
-        );
-      },
+      content,
     });
   }
 
@@ -171,15 +317,15 @@ export class QuickEditFormModel extends FlowModel {
   }
 
   render() {
-    console.log('QuickEditFormModel.open4', Date.now() - this.now);
-
+    const isMobileLayout = this.context.isMobileLayout;
     return (
       <FormComponent model={this}>
         <div
           style={{
             minHeight: 0,
             overflowY: 'auto',
-            maxHeight: QUICK_EDIT_FORM_MAX_HEIGHT,
+            maxHeight: isMobileLayout ? QUICK_EDIT_MOBILE_FORM_MAX_HEIGHT : QUICK_EDIT_FORM_MAX_HEIGHT,
+            padding: isMobileLayout ? QUICK_EDIT_MOBILE_CONTENT_PADDING : undefined,
           }}
         >
           {this.mapSubModels('fields', (field) => {
@@ -196,7 +342,14 @@ export class QuickEditFormModel extends FlowModel {
             );
           })}
         </div>
-        <Space style={{ display: 'flex', justifyContent: 'flex-end', flexShrink: 0 }}>
+        <Space
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flexShrink: 0,
+            padding: isMobileLayout ? QUICK_EDIT_MOBILE_ACTIONS_PADDING : undefined,
+          }}
+        >
           <Button
             onClick={() => {
               this.viewContainer.close();

package/src/flow/models/blocks/form/__tests__/FormBlockModel.test.tsx

@@ -420,6 +420,23 @@ describe('FormBlockModel (form/formValues injection & server resolve anchors)',
     expect(savedUids).toContain('grid-1');
   });
 
+  it('keeps dirty reset separate from runtime user-edited reset', async () => {
+    const model = await setupFormModel();
+    const resetUserEditedState = vi.fn();
+    model.formValueRuntime = { resetUserEditedState } as any;
+
+    model.markUserModifiedFields({ status: 'draft' });
+    expect(model.getUserModifiedFields().has('status')).toBe(true);
+
+    model.resetUserModifiedFields();
+
+    expect(model.getUserModifiedFields().size).toBe(0);
+    expect(resetUserEditedState).not.toHaveBeenCalled();
+
+    model.resetRuntimeUserEditedState();
+    expect(resetUserEditedState).toHaveBeenCalledTimes(1);
+  });
+
   it('re-syncs delegated assignRules when grid submodel is added after block init', async () => {
     const model = await setupFormModel();
     const syncAssignRules = vi.fn();