@nocobase/client-v2 2.1.27 → 2.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.27",
+  "version": "2.1.29",
   "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.1.27",
-    "@nocobase/flow-engine": "2.1.27",
-    "@nocobase/sdk": "2.1.27",
-    "@nocobase/shared": "2.1.27",
-    "@nocobase/utils": "2.1.27",
+    "@nocobase/evaluators": "2.1.29",
+    "@nocobase/flow-engine": "2.1.29",
+    "@nocobase/sdk": "2.1.29",
+    "@nocobase/shared": "2.1.29",
+    "@nocobase/utils": "2.1.29",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -44,8 +44,9 @@
     "json5": "^2.2.3",
     "jsqr": "^1.4.0",
     "lodash": "4.17.21",
+    "react-device-detect": "2.2.3",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "c1311c48cf65f8eeac17411d3380ebdd0918f1e2"
+  "gitHead": "d9848c5df07cef806cb938bb14b3f4ef5f3d0129"
 }

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -112,6 +112,7 @@ describe('FlowRoute', () => {
         }),
       );
     });
+    expect(engine.context.deviceType).toBe('computer');
 
     rerender(
       <FlowEngineProvider engine={engine}>

package/src/flow/__tests__/PluginFlowEngine.test.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { createMockClient, PluginFlowEngine } from '@nocobase/client-v2';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { detectedDeviceType } = vi.hoisted(() => ({
+  detectedDeviceType: { value: 'mobile' },
+}));
+
+vi.mock('react-device-detect', () => ({
+  get deviceType() {
+    return detectedDeviceType.value;
+  },
+}));
+
+describe('PluginFlowEngine', () => {
+  beforeEach(() => {
+    detectedDeviceType.value = 'mobile';
+  });
+
+  it('should register the current device type before shared flow components', async () => {
+    const app = createMockClient({
+      router: {
+        type: 'memory',
+        initialEntries: ['/'],
+      },
+    });
+    const plugin = new PluginFlowEngine({}, app);
+    const addComponents = app.addComponents.bind(app);
+    const deviceTypesBeforeComponentRegistration: string[] = [];
+    vi.spyOn(app, 'addComponents').mockImplementation((components) => {
+      deviceTypesBeforeComponentRegistration.push(app.flowEngine.context.deviceType);
+      return addComponents(components);
+    });
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('mobile');
+    expect(deviceTypesBeforeComponentRegistration).toEqual(['mobile']);
+  });
+
+  it('should normalize the browser device type to computer', async () => {
+    detectedDeviceType.value = 'browser';
+    const app = createMockClient();
+    const plugin = new PluginFlowEngine({}, app);
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('computer');
+  });
+});

package/src/flow/components/BlockItemCard.tsx

@@ -150,7 +150,7 @@ export const BlockItemCard = React.forwardRef(
   ) => {
     const { t } = useTranslation();
     const { token } = theme.useToken();
-    const { title: blockTitle, description, children, className, heightMode, ...rest } = props;
+    const { title: blockTitle, description, children, className, heightMode, style, ...rest } = props;
     const cardRef = useRef<HTMLDivElement | null>(null);
     const setCardRef = useCallback(
       (node: HTMLDivElement | null) => {
@@ -185,7 +185,7 @@ export const BlockItemCard = React.forwardRef(
       <Card
         ref={setCardRef as any}
         title={title}
-        style={{ display: 'flex', flexDirection: 'column', height: height }}
+        style={{ display: 'flex', flexDirection: 'column', ...style, height: height ?? style?.height }}
         styles={{
           body: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' },
           header: {

package/src/flow/components/FlowRoute.tsx

@@ -9,7 +9,6 @@
 
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { deviceType } from 'react-device-detect';
 import { useParams } from 'react-router-dom';
 import { useApp } from '../../hooks/useApp';
 import { NocoBaseDesktopRouteType } from '../../flow-compat';
@@ -19,6 +18,7 @@ import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutM
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
 import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
+import { registerDeviceTypeContext } from '../internal/registerDeviceTypeContext';
 
 type FlowRouteGuardState = {
   pending: boolean;
@@ -94,31 +94,9 @@ const BridgeFlowRoute = ({
   const layoutContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    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',
-      },
-    });
+    if (!flowEngine.context.getPropertyOptions('deviceType')) {
+      registerDeviceTypeContext(flowEngine);
+    }
   }, [flowEngine]);
 
   useLayoutRoutePage({
@@ -136,8 +114,8 @@ const BridgeFlowRoute = ({
 /**
  * 管理后台动态页面路由组件。
  *
- * 负责读取当前路由页面 UID，补充运行时设备变量，
- * 并把页面生命周期桥接到 AdminLayout host model。
+ * 负责读取当前路由页面 UID，并把页面生命周期桥接到 AdminLayout host model。
+ * 设备变量通常由 PluginFlowEngine 共享初始化提供；独立渲染时会在挂载后补充注册。
  *
  * @example
  * ```tsx

package/src/flow/index.ts

@@ -22,12 +22,14 @@ import { Markdown } from './common/Markdown/Markdown';
 import { LiquidEngine } from './common/Liquid';
 import type { PreviewRunJSResult } from './components/code-editor/runjsDiagnostics';
 import { TextAreaWithContextSelector } from './components/TextAreaWithContextSelector';
+import { registerDeviceTypeContext } from './internal/registerDeviceTypeContext';
 
 export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplication<any>> extends Plugin<
   PluginOptions<any>,
   TApp
 > {
   async load() {
+    registerDeviceTypeContext(this.flowEngine);
     this.app.addComponents({ FlowRoute });
     this.app.flowEngine.setModelRepository(new FlowModelRepository(this.app));
     const filteredModels = Object.fromEntries(

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/models/blocks/filter-form/FilterFormBlockModel.tsx

@@ -15,8 +15,10 @@ import {
   DndProvider,
   DragHandler,
   Droppable,
+  isCtxDateExpression,
   isRunJSValue,
   normalizeRunJSValue,
+  parseCtxDateExpression,
   runjsWithSafeGlobals,
   tExpr,
   FlowModelRenderer,
@@ -45,6 +47,15 @@ import { normalizeFilterValueByOperator } from './valueNormalization';
 
 const RELATION_FIELD_TYPES = ['belongsTo', 'hasOne', 'hasMany', 'belongsToMany', 'belongsToArray'];
 const NUMERIC_FIELD_TYPES = ['integer', 'float', 'double', 'decimal'];
+const DATE_FILTER_OPERATORS = new Set([
+  '$dateOn',
+  '$dateNotOn',
+  '$dateBefore',
+  '$dateAfter',
+  '$dateNotBefore',
+  '$dateNotAfter',
+  '$dateBetween',
+]);
 
 function getFilterFormFieldMetaType(field: CollectionField) {
   if (RELATION_FIELD_TYPES.includes(field.type)) {
@@ -67,6 +78,14 @@ function getFilterFormFieldMetaType(field: CollectionField) {
   }
 }
 
+function parseDateFilterDefaultValue(operator: string | undefined, rawValue: unknown) {
+  if (!operator || !DATE_FILTER_OPERATORS.has(operator) || !isCtxDateExpression(rawValue)) {
+    return undefined;
+  }
+
+  return parseCtxDateExpression(rawValue);
+}
+
 function shouldShowFilterFormFieldMeta(field: CollectionField) {
   return Boolean(field?.interface);
 }
@@ -490,7 +509,7 @@ export class FilterFormBlockModel extends FilterBlockModel<{
     const rules = (params?.value || []) as any[];
     if (!Array.isArray(rules) || rules.length === 0) return appliedValues;
 
-    const resolveValue = async (raw: any) => {
+    const resolveValue = async (raw: any, operator?: string) => {
       // RunJS support
       if (isRunJSValue(raw)) {
         const { code, version } = normalizeRunJSValue(raw);
@@ -498,6 +517,11 @@ export class FilterFormBlockModel extends FilterBlockModel<{
         return ret?.success ? ret.value : undefined;
       }
 
+      const parsedDateFilterValue = parseDateFilterDefaultValue(operator, raw);
+      if (typeof parsedDateFilterValue !== 'undefined') {
+        return parsedDateFilterValue;
+      }
+
       return await (this.context as any).resolveJsonTemplate?.(raw);
     };
 
@@ -521,11 +545,11 @@ export class FilterFormBlockModel extends FilterBlockModel<{
 
       const current = (form as any).getFieldValue?.(name);
 
-      const resolved = await resolveValue(rule.value);
+      const operator = getDefaultOperator(itemModel as any);
+      const resolved = await resolveValue(rule.value, operator);
       if (options?.refreshSeq && options.refreshSeq !== this.defaultValuesRefreshSeq) return appliedValues;
       if (typeof resolved === 'undefined') continue;
 
-      const operator = getDefaultOperator(itemModel as any);
       const normalized = normalizeFilterValueByOperator(operator, resolved);
       const mode = this.normalizeFieldValueMode(rule.mode);
       if (mode === 'default' && !this.canApplyFormDefaultValue(String(name), current, force)) continue;

package/src/flow/models/blocks/filter-form/__tests__/defaultValues.wiring.test.ts

@@ -17,7 +17,15 @@ import { FilterFormBlockModel } from '../FilterFormBlockModel';
 function resolveTemplateValue(raw: any, values: Record<string, any>): any {
   if (typeof raw === 'string') {
     const matched = raw.match(/^\{\{\s*ctx\.formValues\.([^}]+?)\s*\}\}$/);
-    return matched ? values[matched[1]] : raw;
+    if (matched) {
+      return values[matched[1]];
+    }
+
+    if (/^\{\{\s*ctx\.date\.relative\.past\.day\.n7\s*\}\}$/.test(raw)) {
+      return '2026-06-15';
+    }
+
+    return raw;
   }
   if (Array.isArray(raw)) {
     return raw.map((item) => resolveTemplateValue(item, values));
@@ -30,7 +38,7 @@ function resolveTemplateValue(raw: any, values: Record<string, any>): any {
 
 function createFilterFormDefaultValuesModel(rules: any[], initialValues: Record<string, any> = {}) {
   const values = { ...initialValues };
-  const createItem = (fieldPath: string, uid: string) => ({
+  const createItem = (fieldPath: string, uid: string, operator?: string) => ({
     uid,
     fieldPath,
     props: { name: `${fieldPath}_${uid}` },
@@ -44,7 +52,7 @@ function createFilterFormDefaultValuesModel(rules: any[], initialValues: Record<
       return undefined;
     },
     subModels: {
-      field: {},
+      field: operator ? { operator } : {},
     },
   });
   const model = {
@@ -76,7 +84,11 @@ function createFilterFormDefaultValuesModel(rules: any[], initialValues: Record<
     subModels: {
       grid: {
         subModels: {
-          items: [createItem('nickname', 'nick'), createItem('username', 'user')],
+          items: [
+            createItem('nickname', 'nick'),
+            createItem('username', 'user'),
+            createItem('birthdate_tz', 'birthdate', '$dateOn'),
+          ],
         },
       },
     },
@@ -354,6 +366,22 @@ describe('filter-form defaultValues wiring', () => {
     expect(values.username_user).toBe('Bob');
   });
 
+  it('preserves relative date descriptors for date filter default values', async () => {
+    const { model, values } = createFilterFormDefaultValuesModel([
+      {
+        key: 'birthdate-default',
+        enable: true,
+        targetPath: 'birthdate_tz',
+        mode: 'assign',
+        value: '{{ ctx.date.relative.past.day.n7 }}',
+      },
+    ]);
+
+    await FilterFormBlockModel.prototype.applyFormDefaultValues.call(model as any);
+
+    expect(values.birthdate_tz_birthdate).toEqual({ type: 'past', unit: 'day', number: 7 });
+  });
+
   it('applies override values until the target filter field is changed by user', async () => {
     const { model, values } = createFilterFormDefaultValuesModel(
       [

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

@@ -235,7 +235,7 @@ export class JSBlockModel extends BlockModel {
     const cardProps = {
       ...rest,
       height,
-      style,
+      ...(style === undefined ? {} : { style }),
       ...(beforeContent === undefined ? {} : { beforeContent }),
       ...(afterContent === undefined ? {} : { afterContent }),
     };