@nocobase/client-v2 2.1.0-alpha.26 → 2.1.0-alpha.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-alpha.26",
+  "version": "2.1.0-alpha.28",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,9 +24,9 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-alpha.26",
-    "@nocobase/sdk": "2.1.0-alpha.26",
-    "@nocobase/shared": "2.1.0-alpha.26",
+    "@nocobase/flow-engine": "2.1.0-alpha.28",
+    "@nocobase/sdk": "2.1.0-alpha.28",
+    "@nocobase/shared": "2.1.0-alpha.28",
     "antd": "5.24.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
@@ -35,5 +35,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "e6e6518030175b58080218bb4357642398bcb54a"
+  "gitHead": "e38293c4a1ce4d043d2b17a3067fd4f0341a7a2d"
 }

package/src/BaseApplication.tsx

@@ -189,6 +189,7 @@ export abstract class BaseApplication<
     this.configureContext();
     this.addBaseProviders();
     this.addCustomProviders();
+    this.addFinalProviders();
     this.addReactRouterComponents();
     this.addProviders(options.providers || []);
     this.ws = this.createWebSocketClient(options);
@@ -338,6 +339,9 @@ export abstract class BaseApplication<
     this.use(FlowEngineProvider, { engine: this.flowEngine });
     this.use(GlobalThemeProvider);
     this.use(AntdAppProvider);
+  }
+
+  protected addFinalProviders() {
     this.use(FlowEngineGlobalsContextProvider);
   }
 

package/src/flow/actions/__tests__/dataScopeFilter.test.ts

@@ -0,0 +1,158 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { dataScope } from '../dataScope';
+import { normalizeDataScopeFilter } from '../dataScopeFilter';
+import { setTargetDataScope } from '../setTargetDataScope';
+
+describe('normalizeDataScopeFilter', () => {
+  it('keeps null when a right-side variable resolves to empty', () => {
+    const rawFilter = {
+      logic: '$and',
+      items: [{ path: 'departmentId', operator: '$eq', value: '{{ ctx.formValues.department.id }}' }],
+    };
+    const resolvedFilter = {
+      logic: '$and',
+      items: [{ path: 'departmentId', operator: '$eq', value: undefined }],
+    };
+
+    expect(normalizeDataScopeFilter(rawFilter, resolvedFilter)).toEqual({
+      $and: [{ departmentId: { $eq: null } }],
+    });
+  });
+
+  it('keeps null when a right-side variable resolves to an empty string', () => {
+    const rawFilter = {
+      logic: '$and',
+      items: [{ path: 'departmentId', operator: '$eq', value: '{{ ctx.formValues.department.id }}' }],
+    };
+    const resolvedFilter = {
+      logic: '$and',
+      items: [{ path: 'departmentId', operator: '$eq', value: '' }],
+    };
+
+    expect(normalizeDataScopeFilter(rawFilter, resolvedFilter)).toEqual({
+      $and: [{ departmentId: { $eq: null } }],
+    });
+  });
+
+  it('still prunes empty constant values', () => {
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'departmentId', operator: '$eq', value: undefined }],
+    };
+
+    expect(normalizeDataScopeFilter(filter, filter)).toBeUndefined();
+  });
+
+  it('handles nested groups and keeps non-empty values unchanged', () => {
+    const rawFilter = {
+      logic: '$and',
+      items: [
+        { path: 'status', operator: '$eq', value: 'active' },
+        {
+          logic: '$or',
+          items: [{ path: 'departmentId', operator: '$eq', value: '{{ ctx.formValues.department.id }}' }],
+        },
+      ],
+    };
+    const resolvedFilter = {
+      logic: '$and',
+      items: [
+        { path: 'status', operator: '$eq', value: 'active' },
+        {
+          logic: '$or',
+          items: [{ path: 'departmentId', operator: '$eq', value: null }],
+        },
+      ],
+    };
+
+    expect(normalizeDataScopeFilter(rawFilter, resolvedFilter)).toEqual({
+      $and: [{ status: { $eq: 'active' } }, { $or: [{ departmentId: { $eq: null } }] }],
+    });
+  });
+
+  it('does not preserve explicit null constants', () => {
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'departmentId', operator: '$eq', value: null }],
+    };
+
+    expect(normalizeDataScopeFilter(filter, filter)).toBeUndefined();
+  });
+
+  it('dataScope handler sends null for empty variable dependencies', async () => {
+    const resource = {
+      addFilterGroup: vi.fn(),
+      removeFilterGroup: vi.fn(),
+    };
+    const ctx = {
+      model: {
+        uid: 'field-1',
+        resource,
+      },
+      resolveJsonTemplate: vi.fn(async (template) => ({
+        ...template,
+        items: [{ ...template.items[0], value: undefined }],
+      })),
+    };
+    const params = {
+      filter: {
+        logic: '$and',
+        items: [{ path: 'departmentId', operator: '$eq', value: '{{ ctx.formValues.department.id }}' }],
+      },
+    };
+
+    await (dataScope as any).handler(ctx, params);
+
+    expect(resource.addFilterGroup).toHaveBeenCalledWith('field-1', {
+      $and: [{ departmentId: { $eq: null } }],
+    });
+    expect(resource.removeFilterGroup).not.toHaveBeenCalled();
+  });
+
+  it('setTargetDataScope handler sends null for empty variable dependencies', async () => {
+    const resource = {
+      addFilterGroup: vi.fn(),
+      removeFilterGroup: vi.fn(),
+      hasData: vi.fn(() => false),
+      refresh: vi.fn(),
+    };
+    const targetModel = { resource };
+    const ctx = {
+      model: {
+        uid: 'action-1',
+        scheduleModelOperation: vi.fn((_uid, callback) => callback(targetModel)),
+      },
+      resolveJsonTemplate: vi.fn(async (template) => ({
+        ...template,
+        filter: {
+          ...template.filter,
+          items: [{ ...template.filter.items[0], value: undefined }],
+        },
+      })),
+    };
+    const params = {
+      targetBlockUid: 'target-1',
+      filter: {
+        logic: '$and',
+        items: [{ path: 'departmentId', operator: '$eq', value: '{{ ctx.formValues.department.id }}' }],
+      },
+    };
+
+    await (setTargetDataScope as any).handler(ctx, params);
+
+    expect(ctx.model.scheduleModelOperation).toHaveBeenCalledWith('target-1', expect.any(Function));
+    expect(resource.addFilterGroup).toHaveBeenCalledWith('setTargetDataScope_action-1', {
+      $and: [{ departmentId: { $eq: null } }],
+    });
+    expect(resource.removeFilterGroup).not.toHaveBeenCalled();
+  });
+});

package/src/flow/actions/dataScope.tsx

@@ -7,12 +7,12 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { defineAction, MultiRecordResource, pruneFilter, tExpr, useFlowSettingsContext } from '@nocobase/flow-engine';
-import { isEmptyFilter, transformFilter } from '@nocobase/utils/client';
-import _ from 'lodash';
+import { defineAction, MultiRecordResource, tExpr, useFlowSettingsContext } from '@nocobase/flow-engine';
+import { isEmptyFilter } from '@nocobase/utils/client';
 import React from 'react';
 import { FilterGroup, VariableFilterItem } from '../components/filter';
 import { FieldModel } from '../models/base/FieldModel';
+import { normalizeDataScopeFilter } from './dataScopeFilter';
 
 export const dataScope = defineAction({
   name: 'dataScope',
@@ -43,6 +43,7 @@ export const dataScope = defineAction({
       filter: { logic: '$and', items: [] },
     };
   },
+  useRawParams: true,
   async handler(ctx, params) {
     // @ts-ignore
     const resource = ctx.model?.resource as MultiRecordResource;
@@ -50,7 +51,8 @@ export const dataScope = defineAction({
       return;
     }
 
-    const filter = pruneFilter(transformFilter(params.filter));
+    const resolvedFilter = await ctx.resolveJsonTemplate(params.filter);
+    const filter = normalizeDataScopeFilter(params.filter, resolvedFilter);
 
     if (isEmptyFilter(filter)) {
       resource.removeFilterGroup(ctx.model.uid);

package/src/flow/actions/dataScopeFilter.ts

@@ -0,0 +1,70 @@
+/**
+ * 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 { isVariableExpression, pruneFilter } from '@nocobase/flow-engine';
+import { transformFilter } from '@nocobase/utils/client';
+import _ from 'lodash';
+
+const PRESERVE_NULL = { __nocobaseDataScopeNull__: true };
+
+function isPreserveNull(value: any) {
+  return (
+    value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    value.__nocobaseDataScopeNull__ === true &&
+    Object.keys(value).length === 1
+  );
+}
+
+function restorePreservedNull(value: any): any {
+  if (isPreserveNull(value)) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => restorePreservedNull(item));
+  }
+  if (value && typeof value === 'object') {
+    return Object.keys(value).reduce<Record<string, any>>((result, key) => {
+      result[key] = restorePreservedNull(value[key]);
+      return result;
+    }, {});
+  }
+  return value;
+}
+
+function markEmptyVariableValues(rawNode: any, resolvedNode: any) {
+  if (!rawNode || !resolvedNode || typeof rawNode !== 'object' || typeof resolvedNode !== 'object') {
+    return;
+  }
+
+  if ('path' in rawNode && 'operator' in rawNode) {
+    if (
+      isVariableExpression(rawNode.value) &&
+      (resolvedNode.value === undefined || resolvedNode.value === null || resolvedNode.value === '')
+    ) {
+      resolvedNode.value = PRESERVE_NULL;
+    }
+    return;
+  }
+
+  if (Array.isArray(rawNode.items) && Array.isArray(resolvedNode.items)) {
+    rawNode.items.forEach((rawItem, index) => {
+      markEmptyVariableValues(rawItem, resolvedNode.items[index]);
+    });
+  }
+}
+
+export function normalizeDataScopeFilter(rawFilter: any, resolvedFilter: any) {
+  const filterForTransform = _.cloneDeep(resolvedFilter);
+  markEmptyVariableValues(rawFilter, filterForTransform);
+
+  const filter = pruneFilter(transformFilter(filterForTransform));
+  return restorePreservedNull(filter);
+}

package/src/flow/actions/setTargetDataScope.tsx

@@ -12,14 +12,13 @@ import {
   defineAction,
   FlowModel,
   MultiRecordResource,
-  pruneFilter,
   useFlowContext,
   tExpr,
 } from '@nocobase/flow-engine';
-import { isEmptyFilter, transformFilter } from '@nocobase/utils/client';
-import _ from 'lodash';
+import { isEmptyFilter } from '@nocobase/utils/client';
 import React from 'react';
 import { FilterGroup, VariableFilterItem } from '../components/filter';
+import { normalizeDataScopeFilter } from './dataScopeFilter';
 
 export const setTargetDataScope = defineAction({
   name: 'setTargetDataScope',
@@ -62,8 +61,10 @@ export const setTargetDataScope = defineAction({
       filter: { logic: '$and', items: [] },
     };
   },
+  useRawParams: true,
   async handler(ctx, params) {
-    const targetBlockUid = params.targetBlockUid;
+    const resolvedParams = await ctx.resolveJsonTemplate(params);
+    const targetBlockUid = resolvedParams.targetBlockUid;
     if (!targetBlockUid) {
       return;
     }
@@ -74,7 +75,7 @@ export const setTargetDataScope = defineAction({
         return;
       }
 
-      const filter = pruneFilter(transformFilter(params.filter));
+      const filter = normalizeDataScopeFilter(params.filter, resolvedParams.filter);
 
       if (isEmptyFilter(filter)) {
         resource.removeFilterGroup(`setTargetDataScope_${ctx.model.uid}`);

package/src/flow/components/Grid/index.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { EMPTY_COLUMN_UID } from '@nocobase/flow-engine';
+import { EMPTY_COLUMN_UID, GridLayoutPath, GridLayoutV2, normalizeGridLayout } from '@nocobase/flow-engine';
 import { Col, Row } from 'antd';
 import React from 'react';
 
@@ -16,37 +16,63 @@ interface DragOverlayRect {
   readonly left: number;
   readonly width: number;
   readonly height: number;
-  readonly type: 'column' | 'column-edge' | 'row-gap' | 'empty-row' | 'empty-column';
+  readonly type: 'column' | 'column-edge' | 'row-gap' | 'empty-row' | 'empty-column' | 'item-edge';
 }
 
 interface GridProps {
-  readonly rows: Record<string, string[][]>;
+  readonly rows?: Record<string, string[][]>;
   readonly sizes?: Record<string, number[]>;
+  readonly layout?: GridLayoutV2;
   readonly renderItem: (uid: string) => React.ReactNode;
   readonly rowGap?: number;
   readonly colGap?: number;
   readonly dragOverlayRect?: DragOverlayRect | null;
 }
 
-export function Grid({ rows, sizes = {}, renderItem, rowGap = 16, colGap = 16, dragOverlayRect }: GridProps) {
-  if (Object.keys(rows || {}).length === 0) {
+export function Grid({
+  rows = {},
+  sizes = {},
+  layout,
+  renderItem,
+  rowGap = 16,
+  colGap = 16,
+  dragOverlayRect,
+}: GridProps) {
+  const normalizedLayout = layout || normalizeGridLayout({ rows, sizes });
+  if (!normalizedLayout.rows.length) {
     return (
-      <div style={{ position: 'relative' }} data-grid-empty-container>
+      <div style={{ position: 'relative' }} data-grid-root data-grid-empty-container>
         {dragOverlayRect && <GridDragOverlay rect={dragOverlayRect} />}
       </div>
     );
   }
 
   return (
-    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: rowGap }}>
+    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: rowGap }} data-grid-root>
       {dragOverlayRect && <GridDragOverlay rect={dragOverlayRect} />}
-      {Object.entries(rows).map(([rowKey, cells]) => {
-        const colCount = cells.length;
-        const rowSizes = sizes[rowKey] || [];
+      <GridRows rows={normalizedLayout.rows} renderItem={renderItem} rowGap={rowGap} colGap={colGap} parentPath={[]} />
+    </div>
+  );
+}
+
+interface GridRowsProps {
+  readonly rows: GridLayoutV2['rows'];
+  readonly renderItem: (uid: string) => React.ReactNode;
+  readonly rowGap: number;
+  readonly colGap: number;
+  readonly parentPath: GridLayoutPath;
+}
+
+function GridRows({ rows, renderItem, rowGap, colGap, parentPath }: GridRowsProps) {
+  return (
+    <>
+      {rows.map((row) => {
+        const colCount = row.cells.length;
+        const rowSizes = row.sizes || [];
         const hasAnySize = rowSizes.some((v) => v != null && v !== undefined);
+        const rowPath = [...parentPath, { rowId: row.id }];
 
-        // 计算每个 cell 的 span
-        const spans = cells.map((_, cellIdx) => {
+        const spans = row.cells.map((_, cellIdx) => {
           if (hasAnySize) {
             const assigned = rowSizes.reduce((sum, v) => sum + (v || 0), 0);
             const unassignedCount = colCount - rowSizes.filter(Boolean).length;
@@ -58,22 +84,24 @@ export function Grid({ rows, sizes = {}, renderItem, rowGap = 16, colGap = 16, d
         });
 
         return (
-          <Row key={rowKey} gutter={colGap} data-grid-row-id={rowKey}>
-            {cells.map((cell, cellIdx) => (
+          <Row key={row.id} gutter={colGap} data-grid-row-id={row.id} data-grid-path={JSON.stringify(rowPath)}>
+            {row.cells.map((cell, cellIdx) => (
               <GridColumn
-                key={`${rowKey}:${cell.join('|') || 'empty'}`}
-                rowKey={rowKey}
+                key={cell.id}
+                rowKey={row.id}
                 columnIndex={cellIdx}
                 span={spans[cellIdx]}
                 rowGap={rowGap}
+                colGap={colGap}
                 cell={cell}
+                path={[...rowPath.slice(0, -1), { rowId: row.id, cellId: cell.id }]}
                 renderItem={renderItem}
               />
             ))}
           </Row>
         );
       })}
-    </div>
+    </>
   );
 }
 
@@ -82,7 +110,9 @@ interface GridColumnProps {
   readonly columnIndex: number;
   readonly span: number;
   readonly rowGap: number;
-  readonly cell: readonly string[];
+  readonly colGap: number;
+  readonly cell: GridLayoutV2['rows'][number]['cells'][number];
+  readonly path: GridLayoutPath;
   readonly renderItem: (uid: string) => React.ReactNode;
 }
 
@@ -91,13 +121,21 @@ const GridColumn = React.memo(function GridColumn({
   columnIndex,
   span,
   rowGap,
+  colGap,
   cell,
+  path,
   renderItem,
 }: GridColumnProps) {
+  const items = cell.items || [];
   return (
-    <Col span={span} data-grid-column-row-id={rowKey} data-grid-column-index={columnIndex}>
+    <Col
+      span={span}
+      data-grid-column-row-id={rowKey}
+      data-grid-column-index={columnIndex}
+      data-grid-path={JSON.stringify(path)}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', gap: rowGap }}>
-        {cell.map((uid, itemIdx) => {
+        {items.map((uid, itemIdx) => {
           if (uid === EMPTY_COLUMN_UID) {
             return null;
           }
@@ -108,11 +146,15 @@ const GridColumn = React.memo(function GridColumn({
               data-grid-column-index={columnIndex}
               data-grid-item-index={itemIdx}
               data-grid-item-uid={uid}
+              data-grid-path={JSON.stringify(path)}
             >
               {renderItem(uid)}
             </div>
           );
         })}
+        {cell.rows?.length ? (
+          <GridRows rows={cell.rows} renderItem={renderItem} rowGap={rowGap} colGap={colGap} parentPath={path} />
+        ) : null}
       </div>
     </Col>
   );
@@ -152,6 +194,10 @@ function GridDragOverlay({ rect }: Readonly<{ rect: DragOverlayRect }>) {
       border: '2px dashed var(--colorPrimary)',
       backgroundColor: 'rgba(22, 119, 255, 0.04)',
     },
+    'item-edge': {
+      border: '2px solid var(--colorPrimary)',
+      backgroundColor: 'rgba(22, 119, 255, 0.12)',
+    },
   };
 
   return <div style={{ ...baseStyle, ...typeStyles[rect.type] }} />;

package/src/flow/components/code-editor/__tests__/linter.test.ts

@@ -39,6 +39,24 @@ describe('code-editor linter', () => {
     );
   });
 
+  it('does not warn for callback parameters used inside JSX', () => {
+    const code = `
+const columns = [
+  {
+    render: (roles, record) => (
+      <div>
+        {roles.map((role) => <Tag key={role.name}>{record.nickname || role.title}</Tag>)}
+      </div>
+    ),
+  },
+];
+`;
+    const diags = computeDiagnosticsFromText(code);
+    expect(diags.some((d) => d.message.includes('Possible undefined variable: roles'))).toBe(false);
+    expect(diags.some((d) => d.message.includes('Possible undefined variable: record'))).toBe(false);
+    expect(diags.some((d) => d.message.includes('Possible undefined variable: role'))).toBe(false);
+  });
+
   it('reports non-callable expression warning', () => {
     const code = `(1+2)()`;
     const diags = computeDiagnosticsFromText(code);

package/src/flow/components/code-editor/__tests__/runjsDiagnostics.test.ts

@@ -38,6 +38,29 @@ describe('runjsDiagnostics', () => {
     expect(res.issues.some((i) => i.type === 'lint' && i.ruleId === 'no-noncallable-call')).toBe(true);
   });
 
+  it('does not report JSX callback parameters as undefined variables', async () => {
+    const ctx = createTestCtx();
+    const code = `
+const { Tag } = ctx.libs.antd;
+const columns = [
+  {
+    render: (roles, record) => (
+      <div>
+        {roles.map((role) => <Tag key={role.name}>{record.nickname || role.title}</Tag>)}
+      </div>
+    ),
+  },
+];
+ctx.render(<div />);
+`;
+    const res = await diagnoseRunJS(code, ctx);
+    expect(
+      res.issues.some(
+        (i) => i.type === 'lint' && i.ruleId === 'possible-undefined-variable' && /roles|record|role/.test(i.message),
+      ),
+    ).toBe(false);
+  });
+
   it('reports suspicious short ctx member call as a lint issue', async () => {
     const ctx = createTestCtx();
     const res = await diagnoseRunJS('ctx.fw();', ctx);

package/src/flow/components/code-editor/index.tsx

@@ -133,6 +133,19 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
     return createRunJSCompletionSource({ hostCtx, staticOptions: finalExtra });
   }, [hostCtx, finalExtra]);
 
+  const runCurrentCode = useCallback(async () => {
+    const code = viewRef.current?.state.doc.toString() || '';
+    clearDiagnostics(viewRef.current);
+    const res = await run(code);
+    if (!res?.success) {
+      const rawErr = res?.error;
+      const errText = res?.timeout ? tr('Execution timed out') : String(rawErr || tr('Unknown error'));
+      const pos = parseErrorLineColumn(rawErr);
+      if (pos && viewRef.current) markErrorAt(viewRef.current, pos.line, pos.column, errText);
+    }
+    return res;
+  }, [run, tr]);
+
   // JSX 转换支持暂时移除：直接按原样运行代码
 
   // 错误标注相关工具已提取至 errorHelpers.ts
@@ -153,6 +166,9 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       const v = viewRef.current;
       return v ? v.state.doc.toString() : '';
     },
+    run() {
+      return Promise.resolve(undefined);
+    },
 
     buttonGroupHeight: 0,
     snippetEntries: [],
@@ -160,6 +176,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   });
   extraEditorRef.current.snippetEntries = snippetEntries;
   extraEditorRef.current.logs = logs;
+  extraEditorRef.current.run = runCurrentCode;
 
   // snippet group display handled in SnippetsDrawer
 
@@ -210,23 +227,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
                   {tr('Snippets')}
                 </Button>
                 <>
-                  <Button
-                    size="small"
-                    loading={running}
-                    onClick={async () => {
-                      const code = viewRef.current?.state.doc.toString() || '';
-                      clearDiagnostics(viewRef.current);
-                      const res = await run(code);
-                      if (!res?.success) {
-                        const rawErr = res?.error;
-                        const errText = res?.timeout
-                          ? tr('Execution timed out')
-                          : String(rawErr || tr('Unknown error'));
-                        const pos = parseErrorLineColumn(rawErr);
-                        if (pos && viewRef.current) markErrorAt(viewRef.current, pos.line, pos.column, errText);
-                      }
-                    }}
-                  >
+                  <Button size="small" loading={running} onClick={runCurrentCode}>
                     {tr('Run')}
                   </Button>
                 </>