@nocobase/client-v2 2.2.0-beta.9 → 2.2.0

package/src/flow/components/FlowRoute.tsx

@@ -8,9 +8,11 @@
  */
 
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
+import { Button, Result } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { deviceType } from 'react-device-detect';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { getModernClientPrefix, stripModernClientPrefix } from '../../authRedirect';
 import { useApp } from '../../hooks/useApp';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
 import {
@@ -22,12 +24,14 @@ 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 = {
   pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
+  legacyPageUnsupported?: boolean;
 };
 
 export type LegacyPageBehavior = 'redirect' | 'notFound' | 'bridge';
@@ -156,31 +160,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({
@@ -195,11 +177,58 @@ const BridgeFlowRoute = ({
   return <div ref={layoutContentRef} />;
 };
 
+type RouteLocation = {
+  pathname: string;
+  search: string;
+  hash: string;
+};
+
+const getLegacyPageHref = (app: { getPublicPath: () => string }, location: RouteLocation) => {
+  const modernPublicPath = app.getPublicPath();
+  const browserLocationMatchesPublicPath = window.location.pathname.startsWith(modernPublicPath);
+  const currentLocation = browserLocationMatchesPublicPath ? window.location : location;
+  const pathWithinModernClient = currentLocation.pathname.startsWith(modernPublicPath)
+    ? currentLocation.pathname.slice(modernPublicPath.length)
+    : currentLocation.pathname.replace(/^\/+/, '');
+  return `${stripModernClientPrefix(modernPublicPath)}${pathWithinModernClient}${currentLocation.search}${
+    currentLocation.hash
+  }`;
+};
+
+const LegacyPageUnsupported = ({
+  app,
+  location,
+}: {
+  app: { getPublicPath: () => string };
+  location: RouteLocation;
+}) => {
+  const { t } = useTranslation();
+  const modernClientPath = `/${getModernClientPrefix()}/`;
+  const withModernClientPath = (message: string) => message.replaceAll('{{modernClientPath}}', modernClientPath);
+
+  return (
+    <Result
+      status="warning"
+      title={withModernClientPath(t('This page is not supported in the {{modernClientPath}} branch'))}
+      subTitle={withModernClientPath(
+        t(
+          'The {{modernClientPath}} branch only supports new pages. This page is a legacy page. Please open it from the original entry.',
+        ),
+      )}
+      extra={
+        <Button href={getLegacyPageHref(app, location)} type="primary">
+          {t('Open from the original entry')}
+        </Button>
+      }
+    />
+  );
+};
+
 /**
  * 管理后台动态页面路由组件。
  *
- * 负责读取当前路由页面 UID，补充运行时设备变量，
- * 并把页面生命周期桥接到 AdminLayout host model。
+ * 负责读取当前路由页面 UID，并把页面生命周期桥接到 AdminLayout host model。
+ * 设备变量通常由 PluginFlowEngine 共享初始化提供；独立渲染时会在挂载后补充注册。
  *
  * @example
  * ```tsx
@@ -274,11 +303,12 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
   useEffect(() => {
     let active = true;
     const requestId = ++requestIdRef.current;
+    const requiresAccessibleRoute = shouldRequireAccessibleRoute(routeLayout);
 
     const run = async () => {
       setGuardState({ pageUid, pending: true, allowBridge: false, notFound: false });
 
-      if (!skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
+      if (requiresAccessibleRoute && !skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
         try {
           await routeRepository?.ensureAccessibleLoaded?.();
         } catch (_error) {
@@ -293,8 +323,11 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
         return;
       }
 
-      const route = skipRouteRepositoryCheck ? undefined : getAccessibleRouteByPageUid(routeRepository, pageUid);
-      if (!route && !skipRouteRepositoryCheck && shouldRequireAccessibleRoute(routeLayout)) {
+      const route =
+        skipRouteRepositoryCheck || !requiresAccessibleRoute
+          ? undefined
+          : getAccessibleRouteByPageUid(routeRepository, pageUid);
+      if (!route && !skipRouteRepositoryCheck && requiresAccessibleRoute) {
         setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
@@ -373,7 +406,13 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+            setGuardState({
+              pageUid,
+              pending: false,
+              allowBridge: false,
+              notFound: false,
+              legacyPageUnsupported: true,
+            });
           }
           return;
         }
@@ -410,6 +449,10 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       return <AppNotFound />;
     }
 
+    if (guardState.legacyPageUnsupported) {
+      return <LegacyPageUnsupported app={app} location={location} />;
+    }
+
     if (!guardState.allowBridge) {
       return null;
     }
@@ -417,11 +460,14 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
   }, [
     active,
+    app,
     getLayoutModel,
     guardState.allowBridge,
+    guardState.legacyPageUnsupported,
     guardState.notFound,
     guardState.pageUid,
     guardState.pending,
+    location,
     pageUid,
   ]);
 

package/src/flow/components/RunJSValueEditor.tsx

@@ -15,6 +15,7 @@ export interface RunJSValueEditorProps {
   t?: (key: string) => string;
   value?: unknown;
   onChange?: (value: RunJSValue) => void;
+  disabled?: boolean;
   height?: string;
   scene?: string;
   containerStyle?: React.CSSProperties;
@@ -25,6 +26,7 @@ export const RunJSValueEditor: React.FC<RunJSValueEditorProps> = (props) => {
     t,
     value,
     onChange,
+    disabled,
     height = '200px',
     scene = 'formValue',
     containerStyle = { flex: 1, minWidth: 0 },
@@ -38,9 +40,15 @@ export const RunJSValueEditor: React.FC<RunJSValueEditorProps> = (props) => {
     <div style={containerStyle}>
       <CodeEditor
         value={current.code}
-        onChange={(code) => onChange?.({ ...current, code })}
+        onChange={(code) => {
+          if (disabled) {
+            return;
+          }
+          onChange?.({ ...current, code });
+        }}
         version={current.version}
         height={height}
+        readonly={disabled}
         enableLinter
         placeholder={placeholderText}
         scene={scene}

package/src/flow/components/__tests__/FieldAssignValueInput.context.test.tsx

@@ -0,0 +1,216 @@
+/**
+ * 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 React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@nocobase/test/client';
+import { FieldAssignValueInput } from '../FieldAssignValueInput';
+
+const { mockUseFlowContext, mockGetDefaultBindingByField, mockVariableInput } = vi.hoisted(() => ({
+  mockUseFlowContext: vi.fn(),
+  mockGetDefaultBindingByField: vi.fn(),
+  mockVariableInput: vi.fn(() => <div data-testid="variable-input" />),
+}));
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<typeof import('@nocobase/flow-engine')>('@nocobase/flow-engine');
+  class MockEditableItemModel extends actual.EditableItemModel {}
+  MockEditableItemModel.getDefaultBindingByField = mockGetDefaultBindingByField;
+
+  return {
+    ...actual,
+    useFlowContext: () => mockUseFlowContext(),
+    VariableInput: mockVariableInput,
+    FlowModelRenderer: () => <div data-testid="flow-model-renderer" />,
+    EditableItemModel: MockEditableItemModel,
+  };
+});
+
+describe('FieldAssignValueInput context', () => {
+  it('delegates temporary field model context to the source form context', async () => {
+    type MockContext = {
+      dataSourceManager: { getDataSource: ReturnType<typeof vi.fn> };
+      t: (key: string) => string;
+      engine?: { createModel: ReturnType<typeof vi.fn> };
+      collection?: MockCollection;
+      blockModel?: MockFormModel;
+    };
+    type MockFieldModel = {
+      props: Record<string, unknown>;
+      setProps: ReturnType<typeof vi.fn>;
+      dispatchEvent: ReturnType<typeof vi.fn>;
+      remove: ReturnType<typeof vi.fn>;
+    };
+    type MockCollectionField = {
+      name: string;
+      interface: string;
+      uiSchema: { enum: Array<{ label: string; value: string }> };
+      isAssociationField: () => boolean;
+      getComponentProps: () => Record<string, unknown>;
+    };
+    type MockCollection = {
+      dataSourceKey: string;
+      name: string;
+      getField: (name: string) => MockCollectionField | null;
+      getFields: () => MockCollectionField[];
+    };
+    type MockFormModel = {
+      context: MockContext;
+      collection: MockCollection;
+      subModels: Record<string, unknown>;
+    };
+
+    const sourceContext: MockContext = {
+      dataSourceManager: {
+        getDataSource: vi.fn(() => ({})),
+      },
+      t: (key: string) => key,
+    };
+    const fieldModel: MockFieldModel = {
+      props: {},
+      setProps: vi.fn((props: Record<string, unknown>) => {
+        fieldModel.props = { ...fieldModel.props, ...props };
+      }),
+      dispatchEvent: vi.fn(),
+      remove: vi.fn(),
+    };
+    const tempRoot = {
+      context: {
+        defineProperty: vi.fn(),
+      },
+      subModels: {
+        fields: [fieldModel],
+      },
+      setProps: vi.fn(),
+      remove: vi.fn(),
+    };
+    const engine = {
+      createModel: vi.fn(() => tempRoot),
+    };
+    sourceContext.engine = engine;
+
+    const collectionField: MockCollectionField = {
+      name: 'status',
+      interface: 'select',
+      uiSchema: {
+        enum: [{ label: 'Open', value: 'open' }],
+      },
+      isAssociationField: () => false,
+      getComponentProps: () => ({}),
+    };
+    const collection: MockCollection = {
+      dataSourceKey: 'main',
+      name: 'tasks',
+      getField: (name: string) => (name === 'status' ? collectionField : null),
+      getFields: () => [collectionField],
+    };
+    const formModel: MockFormModel = {
+      context: sourceContext,
+      collection,
+      subModels: {},
+    };
+    sourceContext.collection = collection;
+    sourceContext.blockModel = formModel;
+
+    mockGetDefaultBindingByField.mockReturnValue({ modelName: 'SelectFieldModel' });
+    mockUseFlowContext.mockReturnValue({
+      model: formModel,
+      t: (key: string) => key,
+      getPropertyMetaTree: vi.fn(async () => []),
+    });
+
+    render(<FieldAssignValueInput targetPath="status" value="" onChange={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(engine.createModel).toHaveBeenCalled();
+    });
+    expect(engine.createModel).toHaveBeenCalledWith(expect.any(Object), { delegate: sourceContext });
+  });
+
+  it('lets callers override variable path parsing for domain-specific stored formats', async () => {
+    mockVariableInput.mockClear();
+    const sourceContext = {
+      dataSourceManager: {
+        getDataSource: vi.fn(() => ({})),
+      },
+      t: (key: string) => key,
+    };
+    const fieldModel = {
+      props: {},
+      setProps: vi.fn(),
+      dispatchEvent: vi.fn(),
+      remove: vi.fn(),
+    };
+    const tempRoot = {
+      context: {
+        defineProperty: vi.fn(),
+      },
+      subModels: {
+        fields: [fieldModel],
+      },
+      setProps: vi.fn(),
+      remove: vi.fn(),
+    };
+    const engine = {
+      createModel: vi.fn(() => tempRoot),
+    };
+    const collectionField = {
+      name: 'status',
+      interface: 'input',
+      uiSchema: { 'x-component': 'Input' },
+      isAssociationField: () => false,
+      getComponentProps: () => ({}),
+    };
+    const collection = {
+      dataSourceKey: 'main',
+      name: 'tasks',
+      getField: (name: string) => (name === 'status' ? collectionField : null),
+      getFields: () => [collectionField],
+    };
+    const formModel = {
+      context: { ...sourceContext, engine, collection, blockModel: null as any },
+      collection,
+      subModels: {},
+    };
+    formModel.context.blockModel = formModel;
+
+    mockGetDefaultBindingByField.mockReturnValue({ modelName: 'InputFieldModel' });
+    mockUseFlowContext.mockReturnValue({
+      model: formModel,
+      t: (key: string) => key,
+      getPropertyMetaTree: vi.fn(async () => []),
+    });
+
+    const variableConverters = {
+      resolvePathFromValue: vi.fn((value: string) =>
+        value === '{{$context.data.updatedAt}}' ? ['$context', 'data', 'updatedAt'] : undefined,
+      ),
+      resolveValueFromPath: vi.fn(() => undefined),
+    };
+
+    render(
+      <FieldAssignValueInput
+        targetPath="status"
+        value="{{$context.data.updatedAt}}"
+        onChange={vi.fn()}
+        variableConverters={variableConverters}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(engine.createModel).toHaveBeenCalled();
+    });
+    const latestVariableInputCall = mockVariableInput.mock.calls.at(-1)?.[0];
+    expect(latestVariableInputCall.converters.resolvePathFromValue('{{$context.data.updatedAt}}')).toEqual([
+      '$context',
+      'data',
+      'updatedAt',
+    ]);
+  });
+});

package/src/flow/components/field-value-variable/DateVariableEditor.tsx

@@ -0,0 +1,181 @@
+/**
+ * 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 { useFlowContext, type CtxDateExpressionConfig, type CtxDateRelativeUnit } from '@nocobase/flow-engine';
+import { AutoComplete, Input, InputNumber, Select, Space } from 'antd';
+import type { Dayjs } from 'dayjs';
+import React from 'react';
+import { FieldAssignExactDatePicker, type ExactDatePickerValue } from '../FieldAssignExactDatePicker';
+import { toExactPickerDisplayValue, type DateVariableComponentProps } from './dateValue';
+
+const DATE_FORMAT_OPTIONS = [
+  'YYYY-MM-DD',
+  'YYYY-MM-DD HH:mm:ss',
+  'YYYY/MM/DD',
+  'MM/DD/YYYY',
+  'DD/MM/YYYY',
+  'YYYYMMDD',
+].map((value) => ({ value }));
+
+const PRESET_LABELS: Record<string, string> = {
+  now: 'Now',
+  today: 'Today',
+  yesterday: 'Yesterday',
+  tomorrow: 'Tomorrow',
+  thisWeek: 'This Week',
+  lastWeek: 'Last Week',
+  nextWeek: 'Next Week',
+  thisMonth: 'This Month',
+  lastMonth: 'Last Month',
+  nextMonth: 'Next Month',
+  thisQuarter: 'This Quarter',
+  lastQuarter: 'Last Quarter',
+  nextQuarter: 'Next Quarter',
+  thisYear: 'This Year',
+  lastYear: 'Last Year',
+  nextYear: 'Next Year',
+};
+
+export function getDefaultDateVariableFormat(config: CtxDateExpressionConfig): string {
+  return config.kind === 'preset' && config.preset === 'now' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+}
+
+export function serializeExactDatePickerValue(
+  value: ExactDatePickerValue,
+  showTime: boolean,
+): string | [string, string] {
+  const serialize = (item: Dayjs) => (showTime ? item.toISOString() : item.format('YYYY-MM-DD'));
+  if (Array.isArray(value)) {
+    return [serialize(value[0]), serialize(value[1])];
+  }
+  return value ? serialize(value) : '';
+}
+
+type DateVariableEditorProps = {
+  value?: CtxDateExpressionConfig;
+  onChange?: (value: CtxDateExpressionConfig) => void;
+  isDateLikeField: boolean;
+  dateComponentProps: DateVariableComponentProps;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+};
+
+const DateFormatEditor: React.FC<{
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}> = ({ value, placeholder, onChange, disabled }) => {
+  const ctx = useFlowContext();
+  return (
+    <Space.Compact style={{ width: '100%' }}>
+      <Input
+        value={ctx.t('Format')}
+        readOnly
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden
+        style={{ width: 88, pointerEvents: 'none' }}
+      />
+      <AutoComplete
+        value={value}
+        placeholder={placeholder}
+        options={DATE_FORMAT_OPTIONS}
+        onChange={(nextValue) => onChange(nextValue.slice(0, 128))}
+        disabled={disabled}
+        style={{ flex: 1, minWidth: 0 }}
+        aria-label={ctx.t('Format')}
+      />
+    </Space.Compact>
+  );
+};
+
+export const DateVariableEditor: React.FC<DateVariableEditorProps> = ({
+  value,
+  onChange,
+  isDateLikeField,
+  dateComponentProps,
+  style,
+  disabled = false,
+}) => {
+  const ctx = useFlowContext();
+  if (!value) return null;
+
+  const updateFormat = (format: string) => onChange?.({ ...value, format });
+  const format = value.format || '';
+
+  const renderValueEditor = () => {
+    if (value.kind === 'exact') {
+      const isRange = Array.isArray(value.value);
+      return (
+        <FieldAssignExactDatePicker
+          picker={dateComponentProps.picker}
+          showTime={dateComponentProps.showTime}
+          timeFormat={dateComponentProps.timeFormat}
+          format={dateComponentProps.format}
+          isRange={isRange}
+          value={toExactPickerDisplayValue(value.value, {
+            format: dateComponentProps.format,
+            isRange,
+          })}
+          onChange={(nextValue) => {
+            onChange?.({ ...value, value: serializeExactDatePickerValue(nextValue, dateComponentProps.showTime) });
+          }}
+          disabled={disabled}
+          style={{ width: '100%' }}
+        />
+      );
+    }
+
+    if (value.kind === 'relative') {
+      return (
+        <Space.Compact style={{ width: '100%' }}>
+          <InputNumber
+            min={1}
+            precision={0}
+            value={value.amount}
+            disabled={disabled}
+            onChange={(amount) => onChange?.({ ...value, amount: typeof amount === 'number' ? amount : 1 })}
+            aria-label={ctx.t(value.direction === 'past' ? 'Past' : 'Next')}
+            style={{ flex: '1 1 auto', minWidth: 80 }}
+          />
+          <Select
+            value={value.unit}
+            disabled={disabled}
+            onChange={(unit: CtxDateRelativeUnit) => onChange?.({ ...value, unit })}
+            aria-label={ctx.t('Unit')}
+            style={{ flex: '0 0 130px', minWidth: 130 }}
+            options={[
+              { value: 'day', label: ctx.t('Day') },
+              { value: 'week', label: ctx.t('Calendar week') },
+              { value: 'month', label: ctx.t('Calendar Month') },
+              { value: 'year', label: ctx.t('Calendar Year') },
+            ]}
+          />
+        </Space.Compact>
+      );
+    }
+
+    return <Input value={ctx.t(PRESET_LABELS[value.preset] || value.preset)} readOnly disabled={disabled} />;
+  };
+
+  return (
+    <div style={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 8, width: '100%', minWidth: 0, ...style }}>
+      {renderValueEditor()}
+      {!isDateLikeField && (
+        <DateFormatEditor
+          value={format}
+          placeholder={getDefaultDateVariableFormat(value)}
+          onChange={updateFormat}
+          disabled={disabled}
+        />
+      )}
+    </div>
+  );
+};