@nocobase/client-v2 2.2.0-beta.14 → 2.2.0-beta.16

package/src/flow/actions/linkageRules.tsx

@@ -68,6 +68,12 @@ interface LinkageRule {
   }[];
 }
 
+export function updateLinkageRules<T>(rules: T[], updater: (nextRules: T[]) => void): T[] {
+  const nextRules = _.cloneDeep(rules);
+  updater(nextRules);
+  return nextRules;
+}
+
 const previewValueForLog = (value: any) => {
   if (value == null) return value;
   const t = typeof value;
@@ -731,6 +737,41 @@ export const linkageSetMenuItemProps = defineAction({
   },
 });
 
+export const linkageSetTabProps = defineAction({
+  name: 'linkageSetTabProps',
+  title: tExpr('Set tab state'),
+  scene: ActionScene.TAB_LINKAGE_RULES,
+  sort: 100,
+  uiSchema: {
+    value: {
+      type: 'string',
+      'x-component': (props) => {
+        const { value, onChange } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const ctx = useFlowContext();
+        const t = ctx.model.translate.bind(ctx.model);
+
+        return (
+          <Select
+            value={value}
+            onChange={onChange}
+            placeholder={t('Please select state')}
+            style={{ width: '100%' }}
+            options={[
+              { label: t('Visible'), value: 'visible' },
+              { label: t('Hidden'), value: 'hidden' },
+            ]}
+            allowClear
+          />
+        );
+      },
+    },
+  },
+  handler(ctx, { value, setProps }) {
+    setProps(ctx.model, { hiddenModel: value === 'hidden' });
+  },
+});
+
 export const linkageSetFieldProps = defineAction({
   name: 'linkageSetFieldProps',
   title: tExpr('Set field state'),
@@ -1339,6 +1380,7 @@ export const linkageRunjs = defineAction({
     ActionScene.FIELD_LINKAGE_RULES,
     ActionScene.ACTION_LINKAGE_RULES,
     ActionScene.MENU_LINKAGE_RULES,
+    ActionScene.TAB_LINKAGE_RULES,
     ActionScene.DETAILS_FIELD_LINKAGE_RULES,
     ActionScene.SUB_FORM_FIELD_LINKAGE_RULES,
   ],
@@ -1464,13 +1506,26 @@ async function resolveLinkageRulesParamsPreservingRunJsScripts(ctx: FlowContext,
 }
 
 const LinkageRulesUI = observer(
-  (props: { readonly value: LinkageRule[]; supportedActions: string[]; title?: string }) => {
-    const { value: rules, supportedActions } = props;
+  (props: {
+    readonly value: LinkageRule[];
+    onChange?: (value: LinkageRule[]) => void;
+    supportedActions: string[];
+    title?: string;
+  }) => {
+    const { value: rules = [], onChange, supportedActions } = props;
     const ctx = useFlowContext();
     const flowEngine = useFlowEngine();
     const t = ctx.model.translate.bind(ctx.model);
     const assignPriorityTip = t('Assignment takes precedence over form field assignment');
 
+    const replaceRules = (updater: (nextRules: LinkageRule[]) => void) => {
+      if (onChange) {
+        onChange(updateLinkageRules(rules, updater));
+      } else {
+        updater(rules);
+      }
+    };
+
     // 创建新规则的默认值
     const createNewRule = (): LinkageRule => ({
       key: uid(),
@@ -1487,7 +1542,7 @@ const LinkageRulesUI = observer(
 
     // 删除规则
     const handleDeleteRule = (index: number) => {
-      rules.splice(index, 1);
+      replaceRules((nextRules) => nextRules.splice(index, 1));
     };
 
     // 上移规则
@@ -1526,7 +1581,9 @@ const LinkageRulesUI = observer(
 
     // 切换规则启用状态
     const handleToggleEnable = (index: number, enable: boolean) => {
-      rules[index].enable = enable;
+      replaceRules((nextRules) => {
+        nextRules[index].enable = enable;
+      });
     };
 
     // 获取可用的动作类型
@@ -2169,17 +2226,30 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
               }
             : props;
 
-        // 存储原始值，用于恢复
-        if (!model.__originalProps) {
-          model.__originalProps = {
-            hiddenModel: model.hidden,
-            hiddenText: undefined,
-            disabled: undefined,
-            required: undefined,
-            hidden: undefined,
-            ...model.props,
-          };
-        }
+        // 只记录联动实际控制的属性，避免之后恢复状态时把标题、路由等无关的新配置回滚到旧快照。
+        const originalProps = model.__originalProps || (model.__originalProps = {});
+        const rememberOriginalProp = (key: string, value: unknown) => {
+          if (!Object.prototype.hasOwnProperty.call(originalProps, key)) {
+            originalProps[key] = value;
+          }
+        };
+        Object.keys(normalizedProps || {}).forEach((key) => {
+          if (key === 'hiddenModel') {
+            rememberOriginalProp(
+              key,
+              Object.prototype.hasOwnProperty.call(model.props || {}, key) ? model.props?.[key] : model.hidden,
+            );
+            return;
+          }
+
+          rememberOriginalProp(key, model.props?.[key]);
+          if (key === 'hiddenText' && normalizedProps[key]) {
+            rememberOriginalProp('title', model.props?.title);
+          }
+          if (key === 'required') {
+            rememberOriginalProp('rules', model.props?.rules);
+          }
+        });
 
         // 临时存起来，遍历完所有规则后，再统一处理
         patchPropsByModel.set(model, {
@@ -2237,7 +2307,6 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     const newProps = { ...model.__originalProps, ...patchProps };
     const prevHidden = !!model.hidden;
     const nextHidden = !!newProps.hiddenModel;
-
     model.setProps(_.omit(newProps, ['hiddenModel', 'value', 'hiddenText', LINKAGE_ASSIGN_MODE_PROP]));
     syncFieldOptionsToForks(model, patchProps);
     if (typeof model.setHidden === 'function') {
@@ -2463,6 +2532,32 @@ export const menuLinkageRules = defineAction({
   },
 });
 
+export const tabLinkageRules = defineAction({
+  name: 'tabLinkageRules',
+  title: tExpr('Tab linkage rules'),
+  uiMode: 'embed',
+  uiSchema(ctx) {
+    return {
+      value: {
+        type: 'array',
+        'x-component': LinkageRulesUI,
+        'x-component-props': {
+          supportedActions: getSupportedActions(ctx, ActionScene.TAB_LINKAGE_RULES),
+          title: tExpr('Tab linkage rules'),
+        },
+      },
+    };
+  },
+  defaultParams: {
+    value: [],
+  },
+  useRawParams: true,
+  handler: async (ctx, params) => {
+    const resolved = await resolveLinkageRulesParamsPreservingRunJsScripts(ctx, params);
+    return commonLinkageRulesHandler(ctx, resolved);
+  },
+});
+
 export const fieldLinkageRules = defineAction({
   name: 'fieldLinkageRules',
   title: tExpr('Field linkage rules'),

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -712,7 +712,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutComponent.test.tsx

@@ -11,23 +11,58 @@ import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import React, { useEffect } from 'react';
 import { createMemoryRouter, RouterProvider, useParams } from 'react-router-dom';
-import { describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../../flow-compat';
 import type { LayoutDefinition } from '../../../../layout-manager/types';
 import { AdminLayoutComponent } from '../AdminLayoutComponent';
 import { AdminLayoutModel } from '../AdminLayoutModel';
+import { AdminLayoutMenuItemModel } from '../AdminLayoutMenuModels';
 import { AdminLayoutContent } from '../AdminLayoutSlotModels';
 
+const proLayoutLifecycle = vi.hoisted(() => ({
+  events: [] as string[],
+  routes: [] as Array<{ children?: Array<{ name?: React.ReactNode }> }>,
+}));
+
 vi.mock('@ant-design/pro-layout', async () => {
   const ReactModule = await import('react');
   const RouteContext = ReactModule.createContext({ isMobile: false });
+  const ProLayoutMock = (props: {
+    children?: React.ReactNode;
+    route?: { children?: Array<{ name?: React.ReactNode }> };
+  }) => {
+    ReactModule.useEffect(() => {
+      proLayoutLifecycle.events.push('pro-layout:mount');
+      return () => {
+        proLayoutLifecycle.events.push('pro-layout:unmount');
+      };
+    }, []);
+    proLayoutLifecycle.routes.push(props.route || {});
 
-  return {
-    default: (props: { children?: React.ReactNode }) =>
+    return ReactModule.createElement(
+      RouteContext.Provider,
+      { value: { isMobile: false } },
       ReactModule.createElement(
-        RouteContext.Provider,
-        { value: { isMobile: false } },
-        ReactModule.createElement('div', { 'data-testid': 'pro-layout' }, props.children),
+        'div',
+        { 'data-testid': 'pro-layout' },
+        ReactModule.createElement(
+          'nav',
+          { 'data-testid': 'pro-layout-menu' },
+          (props.route?.children || []).map((item) =>
+            ReactModule.createElement(
+              'span',
+              { key: String(item.name), 'data-testid': 'pro-layout-menu-item' },
+              item.name,
+            ),
+          ),
+        ),
+        props.children,
       ),
+    );
+  };
+
+  return {
+    default: ProLayoutMock,
     RouteContext,
   };
 });
@@ -53,6 +88,10 @@ vi.mock('../AppListRender', () => ({
   useAppListRender: () => undefined,
 }));
 
+afterEach(() => {
+  delete (window as Window & { __nocobase_modern_client_prefix__?: string }).__nocobase_modern_client_prefix__;
+});
+
 describe('AdminLayoutComponent', () => {
   it('keeps custom admin layout pages alive by layout route name', async () => {
     const layout: LayoutDefinition = {
@@ -185,4 +224,212 @@ describe('AdminLayoutComponent', () => {
 
     expect(deactivateLayout).toHaveBeenCalledTimes(1);
   });
+
+  it('keeps layout content mounted when the menu route tree refreshes', async () => {
+    proLayoutLifecycle.events = [];
+    proLayoutLifecycle.routes = [];
+    const layout: LayoutDefinition = {
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      uid: 'admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout: vi.fn(() => vi.fn()),
+        ensureAccessibleLoaded: vi.fn(async () => []),
+        listAccessible: () => [],
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const Page = () => {
+      useEffect(() => {
+        events.push('page:mount');
+        return () => {
+          events.push('page:unmount');
+        };
+      }, []);
+
+      return <div data-testid="custom-admin-route">Workflow tasks</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+          children: [
+            {
+              id: 'admin.workflow.tasks',
+              path: 'workflow/tasks/:taskType?/:status?/:popupId?',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/workflow/tasks/approval-apply/pending'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+
+    act(() => {
+      model.refreshMenuRouteTree();
+    });
+
+    await act(async () => {
+      await router.navigate('/admin/workflow/tasks/approval-apply/pending/1');
+    });
+
+    expect(screen.getByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+    expect(events).toEqual(['page:mount']);
+  });
+
+  it('updates ProLayout menu routes after accessible routes change without remounting the layout', async () => {
+    proLayoutLifecycle.events = [];
+    proLayoutLifecycle.routes = [];
+    (window as Window & { __nocobase_modern_client_prefix__?: string }).__nocobase_modern_client_prefix__ = 'v2';
+    const layout: LayoutDefinition = {
+      routeName: 'admin',
+      routePath: '/admin',
+      rootRouteName: 'admin',
+      uid: 'admin-layout-model',
+      layoutModelClass: 'AdminLayoutModel',
+      rootPageModelClass: 'RootPageModel',
+      childPageModelClass: 'ChildPageModel',
+      authCheck: true,
+    };
+    let accessibleRoutes: NocoBaseDesktopRoute[] = [
+      {
+        id: 1,
+        title: 'Visible page',
+        schemaUid: 'visible-page',
+        type: NocoBaseDesktopRouteType.flowPage,
+      },
+    ];
+    let routeRepositorySubscriber: (() => void) | undefined;
+    const events: string[] = [];
+    const engine = new FlowEngine();
+    engine.registerModels({
+      AdminLayoutMenuItemModel,
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        activateLayout: vi.fn(() => vi.fn()),
+        ensureAccessibleLoaded: vi.fn(async () => accessibleRoutes),
+        listAccessible: () => accessibleRoutes,
+        subscribe: vi.fn((subscriber: () => void) => {
+          routeRepositorySubscriber = subscriber;
+        }),
+        unsubscribe: vi.fn(),
+      },
+    });
+    engine.context.defineProperty('app', {
+      value: {
+        getPublicPath: () => '/v/',
+        router: {
+          getBasename: () => '/v',
+        },
+      },
+    });
+    engine.context.defineProperty('t', {
+      value: (key: string) => key,
+    });
+    const model = engine.createModel<AdminLayoutModel>({
+      uid: layout.uid,
+      use: AdminLayoutModel,
+      props: {
+        layout,
+      },
+    });
+
+    const Page = () => {
+      useEffect(() => {
+        events.push('page:mount');
+        return () => {
+          events.push('page:unmount');
+        };
+      }, []);
+
+      return <div data-testid="custom-admin-route">Workflow tasks</div>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <AdminLayoutComponent model={model} />,
+          children: [
+            {
+              id: 'admin.workflow.tasks',
+              path: 'workflow/tasks/:taskType?/:status?/:popupId?',
+              element: <Page />,
+            },
+          ],
+        },
+      ],
+      {
+        initialEntries: ['/admin/workflow/tasks/approval-apply/pending'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByText('Visible page')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+
+    act(() => {
+      accessibleRoutes = [];
+      routeRepositorySubscriber?.();
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Visible page')).not.toBeInTheDocument();
+    });
+
+    await act(async () => {
+      await router.navigate('/admin/workflow/tasks/approval-apply/pending/1');
+    });
+
+    expect(screen.getByTestId('custom-admin-route')).toBeInTheDocument();
+    expect(proLayoutLifecycle.events).toEqual(['pro-layout:mount']);
+    expect(events).toEqual(['page:mount']);
+    expect(
+      proLayoutLifecycle.routes.some((route) => route.children?.some((item) => item.name === 'Visible page')),
+    ).toBe(true);
+    expect(proLayoutLifecycle.routes.at(-1)?.children?.some((item) => item.name === 'Visible page')).toBe(false);
+  });
 });

package/src/flow/common/Markdown/style.ts

@@ -26,6 +26,10 @@ export default function useStyle() {
     () => ({
       [`.${COMPONENT_CLS}`]: {
         '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset' },
+        '.vditor-reset h2': {
+          borderBottom: 'none !important',
+          boxShadow: 'none !important',
+        },
         '.vditor': {
           borderRadius: 8,
         },

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/FieldAssignExactDatePicker.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { DatePicker, Select, Space } from 'antd';
 import { inferPickerType } from '../../flow-compat';
 import { dayjs, getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
@@ -29,6 +29,7 @@ export interface FieldAssignExactDatePickerProps {
   isRange?: boolean;
   onChange?: (value: ExactDatePickerValue) => void;
   style?: React.CSSProperties;
+  disabled?: boolean;
 }
 
 function getRawSingleValue(value: unknown, isRange: boolean): unknown {
@@ -114,7 +115,7 @@ function parseRangeValue(value: unknown, format: string): [dayjs.Dayjs, dayjs.Da
 }
 
 export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProps> = (props) => {
-  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style } = props;
+  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style, disabled } = props;
   const flowCtx = useFlowContext();
   const t = flowCtx.model.translate.bind(flowCtx.model);
 
@@ -124,17 +125,17 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     return inferPickerFromRawValue(rawSingleValue, picker);
   });
 
-  const getResolvedFormat = (nextPicker: ExactDatePickerMode) => {
-    const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
-    const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
-    return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
-  };
-
-  const resolvedFormat = useMemo(
-    () => getResolvedFormat(targetPicker),
-    [targetPicker, format, picker, showTime, timeFormat],
+  const getResolvedFormat = useCallback(
+    (nextPicker: ExactDatePickerMode) => {
+      const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
+      const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
+      return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
+    },
+    [format, picker, showTime, timeFormat],
   );
 
+  const resolvedFormat = useMemo(() => getResolvedFormat(targetPicker), [getResolvedFormat, targetPicker]);
+
   const singleValue = useMemo(() => {
     if (isRange) return null;
     return parseDateFromRawValue(value, resolvedFormat);
@@ -156,6 +157,10 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
   );
 
   const handlePickerTypeChange = (nextPicker: ExactDatePickerMode) => {
+    if (disabled) {
+      return;
+    }
+
     setTargetPicker(nextPicker);
 
     if (!onChange) {
@@ -182,7 +187,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
     value: singleValue,
+    disabled,
     onChange: (nextDate: dayjs.Dayjs | null) => {
+      if (disabled) {
+        return;
+      }
       if (nextDate && dayjs.isDayjs(nextDate)) {
         onChange?.(nextDate);
         return;
@@ -200,7 +209,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] } : false,
     value: rangeValue,
+    disabled,
     onChange: (nextDates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
+      if (disabled) {
+        return;
+      }
       if (Array.isArray(nextDates) && nextDates[0] && nextDates[1]) {
         onChange?.([nextDates[0], nextDates[1]]);
         return;
@@ -218,6 +231,7 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
         value={targetPicker}
         options={pickerOptions}
         onChange={handlePickerTypeChange}
+        disabled={disabled}
       />
       {isRange ? <DatePicker.RangePicker {...rangePickerProps} /> : <DatePicker {...singlePickerProps} />}
     </Space.Compact>