@nocobase/client-v2 2.3.0-alpha.1 → 3.0.0-alpha.2

package/src/flow/models/fields/DateTimeFieldModel/dateLimit.ts

@@ -8,140 +8,176 @@
  */
 
 import { autorun } from '@formily/reactive';
-import { Form } from 'antd';
-import { useFlowContext } from '@nocobase/flow-engine';
+import { Form, type FormInstance } from 'antd';
+import { resolveRunJSObjectValues, useFlowContext } from '@nocobase/flow-engine';
 import { dayjs } from '@nocobase/utils/client';
+import type { ConfigType, Dayjs } from 'dayjs';
 import { first, last } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 type DateLimitProps = {
-  _minDate?: any;
-  _maxDate?: any;
-  currentForm?: any;
+  _minDate?: unknown;
+  _maxDate?: unknown;
+  currentForm?: unknown;
 };
 
-export function useDateLimit(props: DateLimitProps) {
-  const ctx = useFlowContext();
-  const isAntdFormInstance = typeof props.currentForm?.getFieldsValue === 'function';
-  const currentFormValues = Form.useWatch([], isAntdFormInstance ? props.currentForm : undefined);
-  const [minDate, setMinDate] = useState<dayjs.Dayjs | null>(null);
-  const [maxDate, setMaxDate] = useState<dayjs.Dayjs | null>(null);
-  const [disabledDate, setDisabledDate] = useState<any>(null);
-  const [disabledTime, setDisabledTime] = useState<any>(null);
-  const disposeRef = useRef<any>(null);
+type DisabledTimeConfig = {
+  disabledHours: () => number[];
+  disabledMinutes: (selectedHour: number) => number[];
+  disabledSeconds: (selectedHour: number, selectedMinute: number) => number[];
+};
 
-  useEffect(() => {
-    if (disposeRef.current) {
-      disposeRef.current();
-    }
+type DisabledDate = (current: Dayjs) => boolean;
+type DisabledTime = (current: Dayjs | null) => DisabledTimeConfig;
 
-    disposeRef.current = autorun(() => {
-      void limitDate();
-    });
+function isAntdFormInstance(value: unknown): value is FormInstance {
+  if (!value || typeof value !== 'object') return false;
+  return typeof (value as Partial<FormInstance>).getFieldsValue === 'function';
+}
 
-    return () => {
-      disposeRef.current?.();
-    };
-  }, [ctx, currentFormValues, props._maxDate, props._minDate]);
+function parseDateLimitValue(value: unknown): Dayjs | null {
+  if (!value) return null;
+  const parsed = dayjs(value as ConfigType);
+  return parsed.isValid() ? parsed : null;
+}
 
-  const limitDate = async () => {
-    const resolvedParams = await ctx.resolveJsonTemplate({
-      _minDate: props._minDate,
-      _maxDate: props._maxDate,
-    });
+export function useDateLimit(props: DateLimitProps) {
+  const ctx = useFlowContext();
+  const currentForm = isAntdFormInstance(props.currentForm) ? props.currentForm : undefined;
+  const currentFormValues = Form.useWatch([], currentForm);
+  const [minDate, setMinDate] = useState<Dayjs | null>(null);
+  const [maxDate, setMaxDate] = useState<Dayjs | null>(null);
+  const [disabledDate, setDisabledDate] = useState<DisabledDate | null>(null);
+  const [disabledTime, setDisabledTime] = useState<DisabledTime | null>(null);
+  const evaluationIdRef = useRef(0);
+
+  const limitDate = useCallback(async () => {
+    const evaluationId = ++evaluationIdRef.current;
+
+    try {
+      const runJSResolvedParams = await resolveRunJSObjectValues(ctx, {
+        _minDate: props._minDate,
+        _maxDate: props._maxDate,
+      });
+      const resolvedParams = (await ctx.resolveJsonTemplate({
+        _minDate: runJSResolvedParams._minDate,
+        _maxDate: runJSResolvedParams._maxDate,
+      })) as { _minDate?: unknown; _maxDate?: unknown };
+
+      if (evaluationId !== evaluationIdRef.current) return;
+
+      const nextMinRaw = Array.isArray(resolvedParams?._minDate)
+        ? first(resolvedParams._minDate)
+        : resolvedParams?._minDate;
+      const nextMaxRaw = Array.isArray(resolvedParams?._maxDate)
+        ? last(resolvedParams._maxDate)
+        : resolvedParams?._maxDate;
+      const nextMinDate = parseDateLimitValue(nextMinRaw);
+      const nextMaxDate = parseDateLimitValue(nextMaxRaw);
+
+      setMinDate(nextMinDate);
+      setMaxDate(nextMaxDate);
+
+      const fullTimeArr = Array.from({ length: 60 }, (_, i) => i);
+
+      const nextDisabledDate: DisabledDate = (current) => {
+        if (!dayjs.isDayjs(current)) return false;
+
+        const min = nextMinDate?.startOf('day') || null;
+        const max = nextMaxDate?.endOf('day') || null;
+
+        if (min && current.startOf('day').isBefore(min)) {
+          return true;
+        }
+        if (max && current.startOf('day').isAfter(max)) {
+          return true;
+        }
+        return false;
+      };
 
-    const nextMinRaw = Array.isArray(resolvedParams?._minDate)
-      ? first(resolvedParams._minDate)
-      : resolvedParams?._minDate;
-    const nextMaxRaw = Array.isArray(resolvedParams?._maxDate)
-      ? last(resolvedParams._maxDate)
-      : resolvedParams?._maxDate;
-    const nextMinDate = nextMinRaw ? dayjs(nextMinRaw) : null;
-    const nextMaxDate = nextMaxRaw ? dayjs(nextMaxRaw) : null;
-
-    setMinDate(nextMinDate?.isValid?.() ? nextMinDate : null);
-    setMaxDate(nextMaxDate?.isValid?.() ? nextMaxDate : null);
-
-    const fullTimeArr = Array.from({ length: 60 }, (_, i) => i);
-
-    const nextDisabledDate = (current: dayjs.Dayjs) => {
-      if (!dayjs.isDayjs(current)) return false;
-
-      const min = nextMinDate?.isValid?.() ? nextMinDate.startOf('day') : null;
-      const max = nextMaxDate?.isValid?.() ? nextMaxDate.endOf('day') : null;
-
-      if (min && current.startOf('day').isBefore(min)) {
-        return true;
-      }
-      if (max && current.startOf('day').isAfter(max)) {
-        return true;
-      }
-      return false;
-    };
+      const nextDisabledTime: DisabledTime = (current) => {
+        if (!current || (!nextMinDate && !nextMaxDate)) {
+          return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] };
+        }
 
-    const nextDisabledTime = (current: dayjs.Dayjs) => {
-      if (!current || (!nextMinDate?.isValid?.() && !nextMaxDate?.isValid?.())) {
-        return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] };
-      }
+        const isCurrentMinDay = !!nextMinDate && current.isSame(nextMinDate, 'day');
+        const isCurrentMaxDay = !!nextMaxDate && current.isSame(nextMaxDate, 'day');
 
-      const isCurrentMinDay = !!nextMinDate?.isValid?.() && current.isSame(nextMinDate, 'day');
-      const isCurrentMaxDay = !!nextMaxDate?.isValid?.() && current.isSame(nextMaxDate, 'day');
+        const disabledHours = () => {
+          const hours = [];
+          if (isCurrentMinDay && nextMinDate) {
+            for (let hour = 0; hour < nextMinDate.hour(); hour++) {
+              hours.push(hour);
+            }
+          }
+          if (isCurrentMaxDay && nextMaxDate) {
+            for (let hour = nextMaxDate.hour() + 1; hour < 24; hour++) {
+              hours.push(hour);
+            }
+          }
+          return hours;
+        };
 
-      const disabledHours = () => {
-        const hours = [];
-        if (isCurrentMinDay && nextMinDate) {
-          for (let hour = 0; hour < nextMinDate.hour(); hour++) {
-            hours.push(hour);
+        const disabledMinutes = (selectedHour: number) => {
+          if (isCurrentMinDay && nextMinDate && selectedHour === nextMinDate.hour()) {
+            return fullTimeArr.filter((minute) => minute < nextMinDate.minute());
           }
-        }
-        if (isCurrentMaxDay && nextMaxDate) {
-          for (let hour = nextMaxDate.hour() + 1; hour < 24; hour++) {
-            hours.push(hour);
+          if (isCurrentMaxDay && nextMaxDate && selectedHour === nextMaxDate.hour()) {
+            return fullTimeArr.filter((minute) => minute > nextMaxDate.minute());
           }
-        }
-        return hours;
+          return [];
+        };
+
+        const disabledSeconds = (selectedHour: number, selectedMinute: number) => {
+          if (
+            isCurrentMinDay &&
+            nextMinDate &&
+            selectedHour === nextMinDate.hour() &&
+            selectedMinute === nextMinDate.minute()
+          ) {
+            return fullTimeArr.filter((second) => second < nextMinDate.second());
+          }
+          if (
+            isCurrentMaxDay &&
+            nextMaxDate &&
+            selectedHour === nextMaxDate.hour() &&
+            selectedMinute === nextMaxDate.minute()
+          ) {
+            return fullTimeArr.filter((second) => second > nextMaxDate.second());
+          }
+          return [];
+        };
+
+        return {
+          disabledHours,
+          disabledMinutes,
+          disabledSeconds,
+        };
       };
 
-      const disabledMinutes = (selectedHour: number) => {
-        if (isCurrentMinDay && nextMinDate && selectedHour === nextMinDate.hour()) {
-          return fullTimeArr.filter((minute) => minute < nextMinDate.minute());
-        }
-        if (isCurrentMaxDay && nextMaxDate && selectedHour === nextMaxDate.hour()) {
-          return fullTimeArr.filter((minute) => minute > nextMaxDate.minute());
-        }
-        return [];
-      };
+      setDisabledDate(() => nextDisabledDate);
+      setDisabledTime(() => nextDisabledTime);
+    } catch (error) {
+      if (evaluationId !== evaluationIdRef.current) return;
 
-      const disabledSeconds = (selectedHour: number, selectedMinute: number) => {
-        if (
-          isCurrentMinDay &&
-          nextMinDate &&
-          selectedHour === nextMinDate.hour() &&
-          selectedMinute === nextMinDate.minute()
-        ) {
-          return fullTimeArr.filter((second) => second < nextMinDate.second());
-        }
-        if (
-          isCurrentMaxDay &&
-          nextMaxDate &&
-          selectedHour === nextMaxDate.hour() &&
-          selectedMinute === nextMaxDate.minute()
-        ) {
-          return fullTimeArr.filter((second) => second > nextMaxDate.second());
-        }
-        return [];
-      };
+      ctx.logger?.warn?.({ err: error }, 'Failed to resolve date range limit');
+      setMinDate(null);
+      setMaxDate(null);
+      setDisabledDate(null);
+      setDisabledTime(null);
+    }
+  }, [ctx, props._maxDate, props._minDate]);
 
-      return {
-        disabledHours,
-        disabledMinutes,
-        disabledSeconds,
-      };
-    };
+  useEffect(() => {
+    const dispose = autorun(() => {
+      limitDate();
+    });
 
-    setDisabledDate(() => nextDisabledDate);
-    setDisabledTime(() => nextDisabledTime);
-  };
+    return () => {
+      evaluationIdRef.current += 1;
+      dispose();
+    };
+  }, [currentFormValues, limitDate]);
 
   return {
     minDate,

package/src/flow/models/fields/JsonFieldModel.tsx

@@ -13,6 +13,22 @@ import JSON5 from 'json5';
 import React, { useState, useEffect, useRef } from 'react';
 import { FieldModel } from '../base/FieldModel';
 
+const jsonValidationRuleMarker = '__jsonSyntaxValidation';
+
+interface JsonValidationRule {
+  [jsonValidationRuleMarker]: true;
+  type: 'any';
+  validator?: (_rule: unknown, value: unknown) => Promise<void>;
+}
+
+function isRuleObject(rule: unknown): rule is Record<string, unknown> {
+  return typeof rule === 'object' && rule !== null;
+}
+
+function isJsonValidationRule(rule: unknown): rule is JsonValidationRule {
+  return isRuleObject(rule) && rule[jsonValidationRuleMarker] === true;
+}
+
 const jsonCss = css`
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 14px;
@@ -40,7 +56,7 @@ export const JsonInput = observer((props: any) => {
     }
 
     internalChange.current = false;
-  }, [value]);
+  }, [_JSON, space, value]);
 
   // 用户输入时
   const handleChange = (ev) => {
@@ -91,23 +107,30 @@ JsonFieldModel.registerFlow({
   key: 'jsonInitSetting',
   steps: {
     initValidation: {
-      handler(ctx, params) {
-        const rules = ctx.model.parent.props.rules || [];
+      handler(ctx) {
+        const currentRules = Array.isArray(ctx.model.parent.props.rules) ? ctx.model.parent.props.rules : [];
+        const rules = currentRules.filter((rule: unknown) => {
+          return (!isRuleObject(rule) || Object.keys(rule).length > 0) && !isJsonValidationRule(rule);
+        });
         // 添加 JSON 语法校验规则
         rules.push({
-          validator: (_, value) => {
+          // validator 函数序列化后会被丢弃；保留 any 类型可避免持久化规则退化为默认字符串校验。
+          type: 'any',
+          [jsonValidationRuleMarker]: true,
+          validator: (_rule: unknown, value: unknown) => {
             // 允许空
             if (value === null || value === undefined || value === '') return Promise.resolve();
             // 如果已经是对象/数组，直接通过
             if (typeof value === 'object') return Promise.resolve();
             try {
-              JSON.parse(value);
+              JSON.parse(String(value));
               return Promise.resolve();
-            } catch (err) {
-              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + err.message);
+            } catch (error) {
+              const message = error instanceof Error ? error.message : String(error);
+              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + message);
             }
           },
-        });
+        } satisfies JsonValidationRule);
         ctx.model.parent.setProps({
           rules,
         });

package/src/flow/models/fields/__tests__/JsonFieldModel.test.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import { JsonFieldModel } from '../JsonFieldModel';
+
+interface ValidationRule {
+  required?: boolean;
+  type?: string;
+  validator?: (_rule: unknown, value: unknown) => Promise<void>;
+}
+
+function createModels(rules: ValidationRule[]) {
+  const engine = new FlowEngine();
+  engine.registerModels({ JsonFieldModel });
+  const parent = engine.createModel<FlowModel<{ subModels: { field: JsonFieldModel } }>>({
+    use: FlowModel,
+    uid: 'json-form-item',
+    props: { rules },
+    subModels: {
+      field: {
+        use: JsonFieldModel,
+        uid: 'json-field',
+      },
+    },
+  });
+
+  return { field: parent.subModels.field, parent };
+}
+
+function initializeJsonValidation(field: JsonFieldModel) {
+  const step = field.getFlow('jsonInitSetting')?.steps.initValidation;
+  if (!step) {
+    throw new Error('JSON validation step is not registered');
+  }
+  step.handler(field.context, {});
+}
+
+describe('JsonFieldModel validation', () => {
+  it('replaces legacy empty rules with one serializable JSON validation rule', async () => {
+    const { field, parent } = createModels([{}, { required: true }]);
+
+    initializeJsonValidation(field);
+
+    const rules = parent.props.rules as ValidationRule[];
+    expect(rules).toHaveLength(2);
+    expect(rules[0]).toEqual({ required: true });
+    expect(rules[1]).toMatchObject({ type: 'any' });
+    expect(rules[1].validator).toBeTypeOf('function');
+    if (!rules[1].validator) {
+      throw new Error('JSON validator is missing');
+    }
+    await expect(rules[1].validator({}, { name: 'NocoBase' })).resolves.toBeUndefined();
+    await expect(rules[1].validator({}, '{"name":')).rejects.toContain('Invalid JSON format');
+
+    const persistedRules = JSON.parse(JSON.stringify(parent.serialize())).props.rules as ValidationRule[];
+    expect(persistedRules).toHaveLength(2);
+    expect(persistedRules[1]).toMatchObject({ type: 'any' });
+    expect(persistedRules[1].validator).toBeUndefined();
+  });
+
+  it('re-registers the runtime validator without duplicating its persisted placeholder', () => {
+    const { field, parent } = createModels([{}]);
+    initializeJsonValidation(field);
+    const persistedRules = JSON.parse(JSON.stringify(parent.serialize())).props.rules as ValidationRule[];
+    parent.setProps({ rules: persistedRules });
+
+    initializeJsonValidation(field);
+
+    const rules = parent.props.rules as ValidationRule[];
+    expect(rules).toHaveLength(1);
+    expect(rules[0]).toMatchObject({ type: 'any' });
+    expect(rules[0].validator).toBeTypeOf('function');
+  });
+});