@nocobase/client-v2 2.1.31 → 2.2.0-alpha.10

package/src/flow/components/FieldAssignValueInput.tsx

@@ -42,6 +42,12 @@ import { normalizeFilterValueByOperator } from '../models/blocks/filter-form/val
 import { FieldAssignExactDatePicker, type ExactDatePickerMode } from './FieldAssignExactDatePicker';
 import { limitAssociationMetaTree } from './filter/metaTreeAssociationDepth';
 
+type VariableInputConverters = {
+  renderInputComponent?: (metaTreeNode: MetaTreeNode | null) => React.ComponentType<any> | null;
+  resolvePathFromValue?: (value: any) => string[] | undefined;
+  resolveValueFromPath?: (metaTreeNode: MetaTreeNode) => any;
+};
+
 const DATE_FIELD_INTERFACES = new Set(['date', 'datetime', 'datetimeNoTz', 'createdAt', 'updatedAt', 'unixTimestamp']);
 
 const TZ_AWARE_DATE_INTERFACES = new Set(['datetime', 'createdAt', 'updatedAt', 'unixTimestamp']);
@@ -341,7 +347,11 @@ interface Props {
    * 默认 false，保持历史行为。
    */
   enableDateVariableAsConstant?: boolean;
+  /** 是否允许在变量选择器中使用 RunJS。默认 true，保持历史行为。 */
+  allowRunJS?: boolean;
   maxAssociationFieldDepth?: number;
+  disabled?: boolean;
+  variableConverters?: VariableInputConverters;
 }
 
 type ResolvedFieldContext = {
@@ -712,7 +722,10 @@ export const FieldAssignValueInput: React.FC<Props> = ({
   preferFormItemFieldModel,
   associationFieldNamesOverride,
   enableDateVariableAsConstant = false,
+  allowRunJS = true,
   maxAssociationFieldDepth = 2,
+  disabled = false,
+  variableConverters,
 }) => {
   const flowCtx = useFlowContext<FlowModelContext>();
   const normalizeEventValue = React.useCallback((eventOrValue: unknown) => {
@@ -1077,7 +1090,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       fm.setStepParams('selectSettings', 'fieldNames', { label: overrideLabel });
     }
     fm?.setProps?.({
-      disabled: false,
+      disabled,
       readPretty: false,
       pattern: 'editable',
       updateAssociation: false,
@@ -1140,6 +1153,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
     preferFormItemFieldModel,
     associationFieldNamesOverride?.label,
     associationFieldNamesOverride?.value,
+    disabled,
   ]);
 
   // 当传入 operator / operatorMetaList 时，按 operator schema 适配临时字段的输入组件与 props。
@@ -1192,6 +1206,9 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       React.useEffect(() => {
         const coercedValue = coerceEmptyValueForRenderer(inputProps?.value);
         const handleChange = (ev: any) => {
+          if (inputProps?.disabled) {
+            return;
+          }
           const nextRaw = normalizeEventValue(ev);
           const normalizedForStore = operator ? normalizeFilterValueByOperator(operator, nextRaw) : nextRaw;
           const nextValue = coerceEmptyValueForRenderer(normalizedForStore);
@@ -1223,6 +1240,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
             value={inputProps?.value}
             onChange={(e) => inputProps?.onChange?.(normalizeEventValue(e))}
             placeholder={placeholder}
+            disabled={inputProps?.disabled}
             style={withFullWidthStyle(wrapperStyle)}
           />
         );
@@ -1241,6 +1259,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
     const C: React.FC<any> = (inputProps) => {
       const wrapperStyle = pickStyle(inputProps?.style);
       const raw = inputProps?.value;
+      const isDisabled = Boolean(inputProps?.disabled);
       const parsed = isCtxDateExpression(raw) ? parseCtxDateExpression(raw) : raw;
       const parsedValue = typeof parsed === 'undefined' ? undefined : parsed;
       const { token } = theme.useToken();
@@ -1265,6 +1284,9 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       });
 
       const handleSelect = (val: string) => {
+        if (isDisabled) {
+          return;
+        }
         setOpen(false);
         if (val === 'exact') {
           inputProps?.onChange?.('');
@@ -1279,10 +1301,16 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       };
 
       const handleExactSingleChange = (nextValue: any) => {
+        if (isDisabled) {
+          return;
+        }
         inputProps?.onChange?.(nextValue || '');
       };
 
       const handleExactRangeChange = (nextValue: any) => {
+        if (isDisabled) {
+          return;
+        }
         inputProps?.onChange?.(nextValue || '');
       };
 
@@ -1327,7 +1355,11 @@ export const FieldAssignValueInput: React.FC<Props> = ({
           <Select
             options={options}
             open={open}
-            onDropdownVisibleChange={setOpen}
+            onDropdownVisibleChange={(nextOpen) => {
+              if (!isDisabled) {
+                setOpen(nextOpen);
+              }
+            }}
             allowClear={false}
             style={{
               width: '100%',
@@ -1337,13 +1369,18 @@ export const FieldAssignValueInput: React.FC<Props> = ({
             value={selectedType}
             onChange={handleSelect}
             dropdownRender={dropdownRender}
+            disabled={isDisabled}
           />
           {['past', 'next'].includes(selectedType) && [
             <InputNumber
               key="number"
               style={{ flex: 1 }}
               value={(parsedValue as any)?.number}
+              disabled={isDisabled}
               onChange={(nextNumber) => {
+                if (isDisabled) {
+                  return;
+                }
                 inputProps?.onChange?.({
                   ...(parsedValue as any),
                   type: selectedType,
@@ -1356,7 +1393,11 @@ export const FieldAssignValueInput: React.FC<Props> = ({
               key="unit"
               value={(parsedValue as any)?.unit}
               style={{ minWidth: 130, maxWidth: 140 }}
+              disabled={isDisabled}
               onChange={(nextUnit) => {
+                if (isDisabled) {
+                  return;
+                }
                 inputProps?.onChange?.({
                   ...(parsedValue as any),
                   type: selectedType,
@@ -1379,6 +1420,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
               isRange={isRange}
               value={isRange ? exactRangeValue : exactSingleValue}
               onChange={isRange ? handleExactRangeChange : handleExactSingleChange}
+              disabled={isDisabled}
               style={{ flex: 1 }}
             />
           )}
@@ -1398,7 +1440,12 @@ export const FieldAssignValueInput: React.FC<Props> = ({
 
   const RunJSComponent = React.useMemo(() => {
     const C: React.FC<any> = (inputProps) => (
-      <RunJSValueEditor t={flowCtx.t} value={inputProps?.value} onChange={inputProps?.onChange} />
+      <RunJSValueEditor
+        t={flowCtx.t}
+        value={inputProps?.value}
+        onChange={inputProps?.onChange}
+        disabled={inputProps?.disabled}
+      />
     );
     return C;
   }, [flowCtx]);
@@ -1421,11 +1468,13 @@ export const FieldAssignValueInput: React.FC<Props> = ({
           render: ConstantEditor,
         },
         { title: tExpr('Null'), name: 'null', type: 'object', paths: ['null'], render: NullComponent },
-        { title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent },
+        ...(allowRunJS
+          ? [{ title: tExpr('RunJS'), name: 'runjs', type: 'object', paths: ['runjs'], render: RunJSComponent }]
+          : []),
         ...limitedBase,
       ];
     };
-  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, maxAssociationFieldDepth]);
+  }, [flowCtx, ConstantEditor, NullComponent, RunJSComponent, allowRunJS, maxAssociationFieldDepth]);
 
   const displayValue = React.useMemo(() => {
     if (!useDateVariableConstant) {
@@ -1442,6 +1491,10 @@ export const FieldAssignValueInput: React.FC<Props> = ({
 
   const handleVariableInputChange = React.useCallback(
     (nextValue: any) => {
+      if (disabled) {
+        return;
+      }
+
       if (!useDateVariableConstant) {
         onChange(nextValue);
         return;
@@ -1449,7 +1502,7 @@ export const FieldAssignValueInput: React.FC<Props> = ({
 
       onChange(normalizeDateVariableOutput(nextValue, dateVariableComponentProps));
     },
-    [dateVariableComponentProps, onChange, useDateVariableConstant],
+    [dateVariableComponentProps, disabled, onChange, useDateVariableConstant],
   );
 
   if (!fieldPath) {
@@ -1464,26 +1517,40 @@ export const FieldAssignValueInput: React.FC<Props> = ({
       metaTree={metaTree}
       style={{ width: '100%' }}
       clearValue={''}
+      disabled={disabled}
       converters={{
+        ...variableConverters,
         renderInputComponent: (meta) => {
+          const external = variableConverters?.renderInputComponent?.(meta ?? null);
+          if (external) {
+            return external;
+          }
           const firstPath = meta?.paths?.[0];
           if (firstPath === 'constant') return ConstantEditor;
           if (firstPath === 'null') return NullComponent;
-          if (firstPath === 'runjs') return RunJSComponent;
+          if (allowRunJS && firstPath === 'runjs') return RunJSComponent;
           return null;
         },
         resolveValueFromPath: (item) => {
+          const external = variableConverters?.resolveValueFromPath?.(item);
+          if (external !== undefined) {
+            return external;
+          }
           const firstPath = item?.paths?.[0];
           if (firstPath === 'constant') {
             return useDateVariableConstant ? { type: 'today' } : '';
           }
           if (firstPath === 'null') return null;
-          if (firstPath === 'runjs') return { code: '', version: 'v2' };
+          if (allowRunJS && firstPath === 'runjs') return { code: '', version: 'v2' };
           return undefined;
         },
         resolvePathFromValue: (currentValue) => {
+          const external = variableConverters?.resolvePathFromValue?.(currentValue);
+          if (external !== undefined) {
+            return external;
+          }
           if (currentValue === null) return ['null'];
-          if (isRunJSValue(currentValue)) return ['runjs'];
+          if (allowRunJS && isRunJSValue(currentValue)) return ['runjs'];
           if (useDateVariableConstant && isCtxDateExpression(currentValue)) {
             return ['constant'];
           }

package/src/flow/components/FlowRoute.tsx

@@ -11,11 +11,14 @@ import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-e
 import { Button, Result } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { getModernClientPrefix, stripModernClientPrefix } from '../../authRedirect';
 import { useApp } from '../../hooks/useApp';
-import { NocoBaseDesktopRouteType } from '../../flow-compat';
-import { resolveAdminRouteRuntimeTarget } from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
+import {
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
 import { getAdminLayoutModel, type AdminLayoutModel } from '../admin-shell/admin-layout/AdminLayoutModel';
 import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutModel';
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
@@ -24,6 +27,7 @@ import { useKeepAlive } from '../../components/KeepAlive';
 import { registerDeviceTypeContext } from '../internal/registerDeviceTypeContext';
 
 type FlowRouteGuardState = {
+  pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
@@ -32,6 +36,21 @@ type FlowRouteGuardState = {
 
 export type LegacyPageBehavior = 'redirect' | 'notFound' | 'bridge';
 
+type FlowRouteLayoutContext = {
+  authCheck?: boolean;
+  routePath?: string;
+  routeName?: string;
+  uid?: string;
+};
+
+type FlowRouteRepositoryLike = {
+  refreshAccessible?: () => Promise<unknown>;
+  isAccessibleLoaded?: () => boolean;
+  ensureAccessibleLoaded?: () => Promise<unknown>;
+  getRouteBySchemaUid?: (schemaUid: string) => NocoBaseDesktopRoute | undefined;
+  listAccessible?: () => NocoBaseDesktopRoute[];
+};
+
 export type FlowRouteProps = {
   pageUid?: string;
   active?: boolean;
@@ -42,7 +61,7 @@ export type FlowRouteProps = {
 const getDefaultAdminLayoutModel = (flowEngine: FlowEngine) =>
   getAdminLayoutModel<AdminLayoutModel>(flowEngine, { required: true });
 
-const getDefaultLayoutModel = (flowEngine: FlowEngine, contextLayout?: any) => {
+const getDefaultLayoutModel = (flowEngine: FlowEngine, contextLayout?: FlowRouteLayoutContext) => {
   const layout = contextLayout || flowEngine.context.layout;
 
   if (layout?.uid) {
@@ -52,7 +71,10 @@ const getDefaultLayoutModel = (flowEngine: FlowEngine, contextLayout?: any) => {
   return getDefaultAdminLayoutModel(flowEngine);
 };
 
-const getDefaultLegacyPageBehavior = (flowEngine: FlowEngine, contextLayout?: any): LegacyPageBehavior => {
+const getDefaultLegacyPageBehavior = (
+  flowEngine: FlowEngine,
+  contextLayout?: FlowRouteLayoutContext,
+): LegacyPageBehavior => {
   const layout = contextLayout || flowEngine.context.layout;
 
   if (layout?.routeName && layout.routeName !== 'admin') {
@@ -62,6 +84,46 @@ const getDefaultLegacyPageBehavior = (flowEngine: FlowEngine, contextLayout?: an
   return 'redirect';
 };
 
+const shouldRequireAccessibleRoute = (contextLayout?: FlowRouteLayoutContext) => contextLayout?.authCheck !== false;
+
+const findAccessibleRouteByIdentity = (
+  routes: NocoBaseDesktopRoute[] | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  if (!Array.isArray(routes)) {
+    return undefined;
+  }
+
+  for (const route of routes) {
+    if (
+      (route.type !== NocoBaseDesktopRouteType.group && route.schemaUid === pageUid) ||
+      (route.type === NocoBaseDesktopRouteType.group && route.id != null && String(route.id) === pageUid)
+    ) {
+      return route;
+    }
+
+    const matched = findAccessibleRouteByIdentity(route.children, pageUid);
+    if (matched) {
+      return matched;
+    }
+  }
+
+  return undefined;
+};
+
+const getAccessibleRouteByPageUid = (
+  routeRepository: FlowRouteRepositoryLike | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  const routeBySchemaUid = routeRepository?.getRouteBySchemaUid?.(pageUid);
+
+  if (routeBySchemaUid && routeBySchemaUid.type !== NocoBaseDesktopRouteType.group) {
+    return routeBySchemaUid;
+  }
+
+  return findAccessibleRouteByIdentity(routeRepository?.listAccessible?.(), pageUid);
+};
+
 const hasFlowModel = async (flowEngine: FlowEngine, pageUid: string) => {
   if (flowEngine.getModel(pageUid)) {
     return true;
@@ -177,21 +239,52 @@ const LegacyPageUnsupported = ({
  * @throws {Error} 当缺少 `route.params.name` 时抛出异常
  */
 const FlowRoute = (props: FlowRouteProps = {}) => {
+  const {
+    active,
+    getLayoutModel: getLayoutModelProp,
+    legacyPageBehavior: legacyPageBehaviorProp,
+    pageUid: pageUidProp,
+  } = props;
   const flowEngine = useFlowEngine();
-  const flowContext = useFlowContext<any>();
+  const flowContext = useFlowContext<{ layout?: FlowRouteLayoutContext }>();
   const contextLayout = flowContext?.layout;
+  const propsLayoutModel = useMemo(() => getLayoutModelProp?.(flowEngine), [flowEngine, getLayoutModelProp]);
+  const rawRouteLayout = contextLayout || propsLayoutModel?.layout;
+  const routeLayoutUid = rawRouteLayout?.uid;
+  const routeLayoutRouteName = rawRouteLayout?.routeName;
+  const routeLayoutRoutePath = rawRouteLayout?.routePath;
+  const routeLayoutAuthCheck = rawRouteLayout?.authCheck;
+  const routeLayout = useMemo(() => {
+    if (
+      !routeLayoutUid &&
+      !routeLayoutRouteName &&
+      !routeLayoutRoutePath &&
+      typeof routeLayoutAuthCheck === 'undefined'
+    ) {
+      return undefined;
+    }
+    return {
+      authCheck: routeLayoutAuthCheck,
+      routeName: routeLayoutRouteName,
+      routePath: routeLayoutRoutePath,
+      uid: routeLayoutUid,
+    };
+  }, [routeLayoutAuthCheck, routeLayoutRouteName, routeLayoutRoutePath, routeLayoutUid]);
   const getLayoutModel = useMemo(
-    () => props.getLayoutModel || ((engine: FlowEngine) => getDefaultLayoutModel(engine, contextLayout)),
-    [contextLayout, props.getLayoutModel],
+    () => getLayoutModelProp || ((engine: FlowEngine) => getDefaultLayoutModel(engine, routeLayout)),
+    [getLayoutModelProp, routeLayout],
   );
-  const legacyPageBehavior = props.legacyPageBehavior || getDefaultLegacyPageBehavior(flowEngine, contextLayout);
+  const legacyPageBehavior = legacyPageBehaviorProp || getDefaultLegacyPageBehavior(flowEngine, routeLayout);
   const app = useApp();
-  const routeRepository = flowEngine.context.routeRepository;
   const location = useLocation();
+  const navigate = useNavigate();
+  const routeRepository = flowEngine.context.routeRepository as FlowRouteRepositoryLike | undefined;
   const params = useParams();
-  const pageUid = props.pageUid || params?.name;
+  const pageUid = pageUidProp || params?.name;
+  const hasNestedRoutePath = typeof params?.tabUid !== 'undefined' || typeof params?.['*'] !== 'undefined';
   const skipRouteRepositoryCheck = !routeRepository;
   const [guardState, setGuardState] = useState<FlowRouteGuardState>({
+    pageUid: undefined,
     pending: true,
     allowBridge: false,
     notFound: false,
@@ -203,19 +296,24 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     throw new Error('[NocoBase] FlowRoute requires pageUid or route.params.name.');
   }
 
+  useEffect(() => {
+    replaceTriggeredRef.current = false;
+  }, [location.hash, location.pathname, location.search, pageUid]);
+
   useEffect(() => {
     let active = true;
     const requestId = ++requestIdRef.current;
+    const requiresAccessibleRoute = shouldRequireAccessibleRoute(routeLayout);
 
     const run = async () => {
-      setGuardState({ pending: true, allowBridge: false, notFound: false });
+      setGuardState({ pageUid, pending: true, allowBridge: false, notFound: false });
 
-      if (!skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
+      if (requiresAccessibleRoute && !skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
         try {
           await routeRepository?.ensureAccessibleLoaded?.();
         } catch (_error) {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: true, notFound: false });
+            setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           }
           return;
         }
@@ -225,25 +323,67 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
         return;
       }
 
-      const route = skipRouteRepositoryCheck ? undefined : routeRepository?.getRouteBySchemaUid?.(pageUid);
-      const shouldCheckFlowModel =
-        legacyPageBehavior === 'notFound' || (!skipRouteRepositoryCheck && legacyPageBehavior === 'redirect');
-      if (!route && shouldCheckFlowModel) {
+      const route =
+        skipRouteRepositoryCheck || !requiresAccessibleRoute
+          ? undefined
+          : getAccessibleRouteByPageUid(routeRepository, pageUid);
+      if (!route && !skipRouteRepositoryCheck && requiresAccessibleRoute) {
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+        return;
+      }
+
+      if (!route && legacyPageBehavior === 'notFound') {
         const flowModelExists = await hasFlowModel(flowEngine, pageUid);
         if (active && requestId === requestIdRef.current) {
-          setGuardState({ pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+          setGuardState({ pageUid, pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
         }
         return;
       }
 
+      if (route?.type === NocoBaseDesktopRouteType.group) {
+        if (hasNestedRoutePath) {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+          return;
+        }
+
+        const target = resolveAdminRouteRuntimeTarget({
+          app,
+          route,
+          layout: routeLayout,
+        });
+
+        if (target.reason === 'emptyGroup') {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+          return;
+        }
+
+        if (target.runtimePath) {
+          if (replaceTriggeredRef.current) {
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+            return;
+          }
+
+          replaceTriggeredRef.current = true;
+          if (target.navigationMode === 'document') {
+            window.location.replace(target.runtimePath);
+            return;
+          }
+          navigate(toRouterNavigationPath(target.runtimePath, app.router?.getBasename?.()), { replace: true });
+          return;
+        }
+
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+        return;
+      }
+
       if (route?.type === NocoBaseDesktopRouteType.page) {
         if (legacyPageBehavior === 'notFound') {
-          setGuardState({ pending: false, allowBridge: false, notFound: true });
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           return;
         }
 
         if (legacyPageBehavior === 'bridge') {
-          setGuardState({ pending: false, allowBridge: true, notFound: false });
+          setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           return;
         }
 
@@ -266,26 +406,42 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: false, notFound: false, legacyPageUnsupported: true });
+            setGuardState({
+              pageUid,
+              pending: false,
+              allowBridge: false,
+              notFound: false,
+              legacyPageUnsupported: true,
+            });
           }
           return;
         }
       }
 
       if (active && requestId === requestIdRef.current) {
-        setGuardState({ pending: false, allowBridge: true, notFound: false });
+        setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
       }
     };
 
-    void run();
+    run();
 
     return () => {
       active = false;
     };
-  }, [app, flowEngine, legacyPageBehavior, pageUid, routeRepository, skipRouteRepositoryCheck]);
+  }, [
+    app,
+    flowEngine,
+    hasNestedRoutePath,
+    legacyPageBehavior,
+    navigate,
+    pageUid,
+    routeLayout,
+    routeRepository,
+    skipRouteRepositoryCheck,
+  ]);
 
   const content = useMemo(() => {
-    if (guardState.pending) {
+    if (guardState.pageUid !== pageUid || guardState.pending) {
       return null;
     }
 
@@ -301,17 +457,18 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
       return null;
     }
 
-    return <BridgeFlowRoute pageUid={pageUid} active={props.active} getLayoutModel={getLayoutModel} />;
+    return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
   }, [
+    active,
     app,
     getLayoutModel,
     guardState.allowBridge,
     guardState.legacyPageUnsupported,
     guardState.notFound,
+    guardState.pageUid,
     guardState.pending,
     location,
     pageUid,
-    props.active,
   ]);
 
   return content;

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}