@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.11

package/src/flow/internal/components/Markdown/DisplayMarkdown.tsx

@@ -7,16 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useRef, useState, useEffect } from 'react';
-import { useParseMarkdown, convertToText } from './util';
-import { useMarkdownStyles } from './style';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
+import { useMarkdownStyles } from './style';
+import { convertToText, useParseMarkdown } from './util';
 
 export const DisplayMarkdown = (props) => {
-  const { textOnly, overflowMode, style } = props;
+  const { textOnly, overflowMode, sanitizeHtml, style } = props;
   const markdownClass = useMarkdownStyles();
   const { html = '' } = useParseMarkdown(props.value);
-  const text: any = convertToText(html);
+  const displayHtml = sanitizeHtml ? sanitizeHtml(html) : html;
+  const text = convertToText(displayHtml);
   const isEllipsis = overflowMode === 'ellipsis';
 
   const contentRef = useRef<HTMLDivElement>(null);
@@ -29,7 +30,7 @@ export const DisplayMarkdown = (props) => {
       const overflowed = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
       setIsOverflowed(overflowed);
     }
-  }, [html, style, overflowMode]);
+  }, [displayHtml, style, overflowMode]);
 
   // 通用样式（用于 ellipsis 模式）
   const baseStyle: React.CSSProperties = {
@@ -48,11 +49,15 @@ export const DisplayMarkdown = (props) => {
       : {}),
   };
 
-  const content = (
+  const content = textOnly ? (
+    <div ref={contentRef} className={`${markdownClass} nb-markdown`} style={baseStyle}>
+      {text}
+    </div>
+  ) : (
     <div
       ref={contentRef}
       className={`${markdownClass} nb-markdown`}
-      dangerouslySetInnerHTML={{ __html: textOnly ? text : html }}
+      dangerouslySetInnerHTML={{ __html: displayHtml }}
       style={baseStyle}
     />
   );
@@ -61,7 +66,7 @@ export const DisplayMarkdown = (props) => {
     <Tooltip
       title={
         <div
-          dangerouslySetInnerHTML={{ __html: html }}
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
           style={{
             maxHeight: 500,
             overflowY: 'auto',

package/src/flow/internal/components/Markdown/__tests__/DisplayMarkdown.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { DisplayMarkdown } from '../DisplayMarkdown';
+
+vi.mock('../util', () => ({
+  useParseMarkdown: (value: string) => ({ html: value }),
+  convertToText: (value: string) => {
+    const element = document.createElement('div');
+    element.innerHTML = value;
+    return element.textContent || '';
+  },
+}));
+
+describe('DisplayMarkdown', () => {
+  it('sanitizes HTML mode', () => {
+    const { container } = render(
+      <DisplayMarkdown
+        value={'<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>'}
+        sanitizeHtml={sanitizeRichTextHtml}
+        textOnly={false}
+      />,
+    );
+
+    expect(container.querySelector('p')).toHaveTextContent('safe');
+    expect(container.querySelector('img')).not.toHaveAttribute('onerror');
+    expect(container.querySelector('script')).toBeNull();
+  });
+
+  it('renders decoded text as a text node', () => {
+    const payload = '&lt;img src=x onerror=alert(document.domain)&gt;';
+    const { container } = render(<DisplayMarkdown value={payload} sanitizeHtml={sanitizeRichTextHtml} textOnly />);
+
+    expect(container).toHaveTextContent('<img src=x onerror=alert(document.domain)>');
+    expect(container.querySelector('img')).toBeNull();
+  });
+});

package/src/flow/internal/registerDeviceTypeContext.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 type { FlowEngine } from '@nocobase/flow-engine';
+import { deviceType } from 'react-device-detect';
+
+export const registerDeviceTypeContext = (flowEngine: FlowEngine) => {
+  flowEngine.context.defineProperty('deviceType', {
+    get: () => (deviceType === 'browser' ? 'computer' : deviceType),
+    cache: false,
+    meta: {
+      type: 'string',
+      title: flowEngine.translate('Current device type'),
+      interface: 'select',
+      uiSchema: {
+        enum: [
+          { label: flowEngine.translate('Computer'), value: 'computer' },
+          { label: flowEngine.translate('Mobile'), value: 'mobile' },
+          { label: flowEngine.translate('Tablet'), value: 'tablet' },
+          { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
+          { label: flowEngine.translate('Console'), value: 'console' },
+          { label: flowEngine.translate('Wearable'), value: 'wearable' },
+          { label: flowEngine.translate('Embedded'), value: 'embedded' },
+        ],
+        'x-component': 'Select',
+      },
+    },
+    info: {
+      description: 'Current device type (computer/mobile/tablet/...).',
+      detail: 'string',
+    },
+  });
+};

package/src/flow/internal/utils/operatorSchemaHelper.ts

@@ -20,7 +20,7 @@ type OperatorMeta = {
 };
 
 type ComponentRegistry = {
-  getComponent?: (name: string) => ComponentType<Record<string, unknown>> | undefined;
+  getComponent?: (name: string, isShowError?: boolean) => ComponentType<Record<string, unknown>> | undefined;
 };
 
 type OperatorComponentFieldModel = {
@@ -67,6 +67,7 @@ export function resolveOperatorComponent(
   app: ComponentRegistry | undefined,
   operator: string,
   operators?: OperatorMeta[],
+  isShowError = true,
 ) {
   if (!operators || !Array.isArray(operators)) return null;
   const op = operators.find((item) => item?.value === operator);
@@ -77,7 +78,7 @@ export function resolveOperatorComponent(
   if (xComp === 'DateFilterDynamicComponent') {
     Comp = DateFilterDynamicComponent as ComponentType<Record<string, unknown>>;
   } else {
-    Comp = app?.getComponent?.(xComp);
+    Comp = isShowError ? app?.getComponent?.(xComp) : app?.getComponent?.(xComp, false);
   }
   if (!Comp) return null;
   const props = isRecord(schema?.['x-component-props']) ? schema['x-component-props'] : {};

package/src/flow/models/actions/UpdateRecordActionModel.tsx

@@ -22,6 +22,11 @@ import { applyUpdateRecordAction } from './UpdateRecordActionUtils';
 // import { RemoteFlowModelRenderer } from '../../FlowPage';
 
 const SETTINGS_FLOW_KEY = 'assignSettings';
+const AFTER_SUCCESS_DEFAULT_PARAMS = {
+  successMessage: tExpr('Saved successfully'),
+  manualClose: false,
+  actionAfterSuccess: 'stay',
+};
 
 function Info() {
   const ctx = useFlowSettingsContext();
@@ -101,6 +106,10 @@ UpdateRecordActionModel.registerFlow({
       tipComponent: Info,
       validateBeforeSave: true,
     }),
+    afterSuccess: {
+      use: 'afterSuccess',
+      defaultParams: AFTER_SUCCESS_DEFAULT_PARAMS,
+    },
   },
 });
 
@@ -113,7 +122,15 @@ UpdateRecordActionModel.registerFlow({
         return getAssignFieldValuesDefaultParams(ctx, SETTINGS_FLOW_KEY);
       },
       async handler(ctx, params) {
-        await applyUpdateRecordAction(ctx, params, { settingsFlowKey: SETTINGS_FLOW_KEY });
+        const updated = await applyUpdateRecordAction(ctx, params, { settingsFlowKey: SETTINGS_FLOW_KEY });
+        if (!updated) {
+          return;
+        }
+        const savedAfterSuccess = ctx.model.getStepParams(SETTINGS_FLOW_KEY, 'afterSuccess') || {};
+        await ctx.runAction('afterSuccess', {
+          ...AFTER_SUCCESS_DEFAULT_PARAMS,
+          ...savedAfterSuccess,
+        });
       },
     },
   },

package/src/flow/models/actions/UpdateRecordActionUtils.ts

@@ -8,9 +8,15 @@
  */
 
 import { MultiRecordResource, SingleRecordResource } from '@nocobase/flow-engine';
+import type { AxiosRequestConfig } from 'axios';
 import { dispatchEventDeep } from '../../utils';
 import { resolveAssignFieldValues } from '../blocks/assign-form/assignFieldValuesFlow';
 
+type UpdateRecordActionParams = {
+  assignedValues?: unknown;
+  requestConfig?: AxiosRequestConfig;
+};
+
 export async function refreshLinkageRulesAfterUpdate(ctx: any) {
   const blockModel = ctx?.blockModel || ctx?.model?.context?.blockModel || ctx?.model;
   const actionModel = ctx?.model;
@@ -48,11 +54,11 @@ export async function refreshLinkageRulesAfterUpdate(ctx: any) {
 
 export async function applyUpdateRecordAction(
   ctx: any,
-  params: any,
+  params: UpdateRecordActionParams,
   options?: {
     settingsFlowKey?: string;
   },
-) {
+): Promise<boolean> {
   const settingsFlowKey = options?.settingsFlowKey || 'assignSettings';
 
   // 统一接入二次确认：如果启用则弹窗；未配置时默认不启用
@@ -62,25 +68,31 @@ export async function applyUpdateRecordAction(
 
   const assignedValues = await resolveAssignFieldValues(ctx, params?.assignedValues, 'UpdateRecordAction');
   if (!assignedValues) {
-    return;
+    return false;
   }
 
   if (!assignedValues || typeof assignedValues !== 'object' || !Object.keys(assignedValues).length) {
     ctx.message.warning(ctx.t('No assigned fields configured'));
-    return;
+    return false;
   }
   const collection = ctx.collection?.name;
   const filterByTk = ctx.collection?.getFilterByTK?.(ctx.record);
   if (!collection || typeof filterByTk === 'undefined' || filterByTk === null) {
     ctx.message.error(ctx.t('Record is required to perform this action'));
-    return;
+    return false;
   }
+  let updated = false;
   if (ctx.resource instanceof SingleRecordResource) {
     await ctx.resource.save(assignedValues, params.requestConfig);
+    updated = true;
   } else if (ctx.resource instanceof MultiRecordResource) {
     await ctx.resource.update(filterByTk, assignedValues, params.requestConfig);
+    updated = true;
+  }
+  if (!updated) {
+    return false;
   }
 
   await refreshLinkageRulesAfterUpdate(ctx);
-  ctx.message.success(ctx.t('Saved successfully'));
+  return true;
 }

package/src/flow/models/actions/__tests__/UpdateRecordActionModel.test.ts

@@ -8,8 +8,9 @@
  */
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { MultiRecordResource } from '@nocobase/flow-engine';
+import { FlowEngine, MultiRecordResource } from '@nocobase/flow-engine';
 import { applyUpdateRecordAction } from '../UpdateRecordActionUtils';
+import { UpdateRecordActionModel } from '../UpdateRecordActionModel';
 import { dispatchEventDeep } from '../../../utils';
 
 vi.mock('../../../utils', () => ({
@@ -21,7 +22,7 @@ describe('UpdateRecordActionModel apply action', () => {
     vi.clearAllMocks();
   });
 
-  it('dispatches paginationChange for action and block after successful update', async () => {
+  it('dispatches paginationChange and returns success after updating the record', async () => {
     const resource: any = Object.create(MultiRecordResource.prototype);
     resource.update = vi.fn(async () => ({}));
     resource.refresh = vi.fn(async () => {});
@@ -52,12 +53,13 @@ describe('UpdateRecordActionModel apply action', () => {
       t: (value: string) => value,
     };
 
-    await applyUpdateRecordAction(ctx, {
+    const updated = await applyUpdateRecordAction(ctx, {
       assignedValues: {
         marital_status: '已婚',
       },
     });
 
+    expect(updated).toBe(true);
     expect(resource.update).toHaveBeenCalledWith(1, { marital_status: '已婚' }, undefined);
     expect(resource.refresh).not.toHaveBeenCalled();
 
@@ -67,6 +69,76 @@ describe('UpdateRecordActionModel apply action', () => {
     expect(paginationCalls.length).toBeGreaterThan(0);
     expect(paginationCalls.some(([model]: [any]) => model === ctx.model)).toBe(true);
     expect(paginationCalls.some(([model]: [any]) => model === blockModel)).toBe(true);
-    expect(ctx.message.success).toHaveBeenCalledWith('Saved successfully');
+    expect(ctx.message.success).not.toHaveBeenCalled();
+  });
+
+  it('runs the configured after-success action only after a successful update', async () => {
+    const engine = new FlowEngine();
+    const action = new UpdateRecordActionModel({ uid: 'update-record-action', flowEngine: engine } as any);
+    action.setStepParams('assignSettings', 'confirm', { enable: false });
+    action.setStepParams('assignSettings', 'afterSuccess', {
+      successMessage: 'Record updated',
+    });
+
+    const resource: any = Object.create(MultiRecordResource.prototype);
+    resource.update = vi.fn(async () => ({}));
+    const blockModel: any = { uid: 'details-block' };
+    const runAction = vi.fn(async () => {});
+    const ctx: any = {
+      model: action,
+      blockModel,
+      runAction,
+      collection: {
+        name: 'users',
+        getFilterByTK: vi.fn(() => 1),
+      },
+      record: { id: 1 },
+      resource,
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+    const handler = action.getFlow('apply')?.getStep('apply')?.serialize().handler;
+
+    await handler(ctx, { assignedValues: { status: 'active' } });
+
+    expect(runAction).toHaveBeenNthCalledWith(1, 'confirm', { enable: false });
+    expect(runAction).toHaveBeenNthCalledWith(2, 'afterSuccess', {
+      successMessage: 'Record updated',
+      manualClose: false,
+      actionAfterSuccess: 'stay',
+    });
+  });
+
+  it('does not run the after-success action when no fields are assigned', async () => {
+    const engine = new FlowEngine();
+    const action = new UpdateRecordActionModel({ uid: 'update-record-action-empty', flowEngine: engine } as any);
+    const runAction = vi.fn(async () => {});
+    const ctx: any = {
+      model: action,
+      runAction,
+      collection: {
+        name: 'users',
+        getFilterByTK: vi.fn(() => 1),
+      },
+      record: { id: 1 },
+      resource: Object.create(MultiRecordResource.prototype),
+      message: {
+        success: vi.fn(),
+        warning: vi.fn(),
+        error: vi.fn(),
+      },
+      t: (value: string) => value,
+    };
+    const handler = action.getFlow('apply')?.getStep('apply')?.serialize().handler;
+
+    await handler(ctx, { assignedValues: {} });
+
+    expect(runAction).toHaveBeenCalledTimes(1);
+    expect(runAction).toHaveBeenCalledWith('confirm', { enable: false });
+    expect(ctx.message.warning).toHaveBeenCalledWith('No assigned fields configured');
   });
 });

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

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DefaultStructure, FlowModel, tExpr, useFlowModel } from '@nocobase/flow-engine';
+import { FlowModel, tExpr, useFlowModel } from '@nocobase/flow-engine';
+import type { DefaultStructure, FlowModelOptions } from '@nocobase/flow-engine';
 import { Icon } from '../../../components';
 import { Button, Tooltip } from 'antd';
 import type { ButtonProps } from 'antd/es/button';
@@ -87,8 +88,10 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return null;
   }
 
-  onInit(options: any): void {
+  onInit(options: FlowModelOptions<T>): void {
     super.onInit(options);
+    // Action disabled state is computed at runtime and must never be restored from persisted props.
+    delete this.props.disabled;
     this.context.defineProperty('actionName', {
       get: () => {
         return this.getAclActionName();
@@ -97,6 +100,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     });
   }
 
+  serialize() {
+    const data = super.serialize();
+    delete data.props.disabled;
+    return data;
+  }
+
   getInputArgs() {
     const inputArgs: Record<string, any> = {};
     const defaultKeys: string[] = [];

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

@@ -14,8 +14,10 @@ import {
   FlowSettingsButton,
   buildSubModelGroups,
   buildSubModelItems,
+  type FlowModel,
   type SubModelItem,
   type SubModelItemsType,
+  VIEW_ACTIVATED_EVENT,
 } from '@nocobase/flow-engine';
 import React from 'react';
 import { FilterManager } from '../blocks/filter-manager/FilterManager';
@@ -24,6 +26,8 @@ import { GridModel } from './GridModel';
 const SELECT_SCENE_ALLOWED_OTHER_BLOCK_MODELS = ['JSBlockModel', 'IframeBlockModel', 'MarkdownBlockModel'] as const;
 
 export class BlockGridModel extends GridModel {
+  private viewActivatedListener?: () => void;
+
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
@@ -50,6 +54,28 @@ export class BlockGridModel extends GridModel {
     });
   }
 
+  onMount() {
+    super.onMount();
+    if (this.context.view?.inputArgs?.scene !== 'select' || this.viewActivatedListener) {
+      return;
+    }
+
+    this.viewActivatedListener = () => {
+      this.mapSubModels('items', (item) => {
+        (item as FlowModel & { onActive?: () => void }).onActive?.();
+      });
+    };
+    this.flowEngine.emitter.on(VIEW_ACTIVATED_EVENT, this.viewActivatedListener);
+  }
+
+  protected onUnmount() {
+    if (this.viewActivatedListener) {
+      this.flowEngine.emitter.off(VIEW_ACTIVATED_EVENT, this.viewActivatedListener);
+      this.viewActivatedListener = undefined;
+    }
+    super.onUnmount();
+  }
+
   get subModelBaseClasses() {
     const inputArgs = this.context.view?.inputArgs ?? {};
     if (inputArgs.collectionName && !inputArgs.filterByTk) {

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

@@ -16,10 +16,13 @@ import {
   tExpr,
   FlowModelContext,
   MultiRecordResource,
+  ResourceError,
   SingleRecordResource,
 } from '@nocobase/flow-engine';
 import type { FlowEngine } from '@nocobase/flow-engine';
 import _ from 'lodash';
+import React from 'react';
+import { BlockResourceErrorPlaceholder } from '../../components/placeholders/BlockPlaceholder';
 import { createDefaultCollectionBlockTitle } from '../../utils/blockUtils';
 import { areCapabilitiesSupported, getBlockCapabilityNamesFromModelClass } from '../../utils/actionCapability';
 import { FilterManager } from '../blocks/filter-manager/FilterManager';
@@ -82,6 +85,15 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
     const engine = this.context.engine as FlowEngine;
     const currentVersion = this.getDirtyTrackingVersion(engine, dataSourceKey, resource, params);
 
+    if (resource instanceof MultiRecordResource && this.getDataLoadingMode() === 'manual' && !this.hasActiveFilters()) {
+      resource.setData([]);
+      resource.setMeta({ count: 0, hasNext: false });
+      resource.setPage(1);
+      resource.loading = false;
+      this.lastSeenDirtyVersion = currentVersion;
+      return;
+    }
+
     if (forceRefresh) {
       if (this.dirtyRefreshing) return;
       this.dirtyRefreshing = true;
@@ -539,6 +551,18 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
     return this.resource.refresh();
   }
 
+  isExternalDataSource() {
+    const dataSourceKey = this.getResourceSettingsInitParams()?.dataSourceKey;
+    return Boolean(dataSourceKey && dataSourceKey !== 'main');
+  }
+
+  render() {
+    if (this.isExternalDataSource() && this.collection && this.resource?.getError()) {
+      return <BlockResourceErrorPlaceholder />;
+    }
+    return super.render();
+  }
+
   protected defaultBlockTitle() {
     const blockLabel = this.translate(this.constructor['meta']?.label || this.constructor.name);
     const params = this.getResourceSettingsInitParams();
@@ -569,9 +593,13 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
     }
     if (fieldPath.includes('.')) {
       // 关系数据
+      const collection = this.collection;
+      if (!collection) {
+        return;
+      }
       const [field1, field2] = fieldPath.split('.');
       const associationField = this.context.dataSourceManager.getCollectionField(
-        `${this.collection.dataSourceKey}.${this.collection.name}.${field1}`,
+        `${collection.dataSourceKey}.${collection.name}.${field1}`,
       ) as CollectionField;
       if (!associationField) {
         return;
@@ -583,7 +611,7 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
       }
 
       const collectionField = this.context.dataSourceManager.getCollectionField(
-        `${this.collection.dataSourceKey}.${targetCollectionName}.${field2}`,
+        `${collection.dataSourceKey}.${targetCollectionName}.${field2}`,
       ) as CollectionField;
 
       if (collectionField && collectionField.isAssociationField()) {
@@ -693,7 +721,14 @@ CollectionBlockModel.registerFlow({
         if (ctx.model.isManualRefresh) {
           ctx.model.resource.loading = false;
         } else {
-          await ctx.model.resource.refresh();
+          try {
+            await resource.refresh();
+          } catch (error) {
+            if (blockModel.isExternalDataSource() && error instanceof ResourceError && resource.getError() === error) {
+              return;
+            }
+            throw error;
+          }
         }
       },
     },

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

@@ -922,7 +922,6 @@ export class GridModel<T extends { subModels: { items: FlowModel[] } } = Default
     const baseLayout = this.context.isMobileLayout
       ? normalizeGridLayout({
           rows: transformRowsToSingleColumn(projectLayoutToLegacyRows(rawLayout).rows),
-          itemUids: this.getItemUids(),
         })
       : rawLayout;
     const baseProjection = projectLayoutToLegacyRows(baseLayout);