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

package/src/flow/actions/__tests__/linkageRules.tab.test.ts

@@ -0,0 +1,171 @@
+/**
+ * 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 { ActionScene } from '@nocobase/flow-engine';
+import { describe, expect, it, vi } from 'vitest';
+
+import * as registeredActions from '../index';
+import * as linkageActions from '../linkageRules';
+
+const tabLinkageRules = (linkageActions as Record<string, unknown>).tabLinkageRules as
+  | typeof linkageActions.menuLinkageRules
+  | undefined;
+const linkageSetTabProps = (linkageActions as Record<string, unknown>).linkageSetTabProps as
+  | typeof linkageActions.linkageSetMenuItemProps
+  | undefined;
+
+function createRuntime() {
+  let matched = true;
+  const setProps = vi.fn(function (this: { props: Record<string, unknown> }, props: Record<string, unknown>) {
+    this.props = {
+      ...this.props,
+      ...props,
+    };
+  });
+  const setHidden = vi.fn(function (this: { hidden: boolean }, value: boolean) {
+    this.hidden = value;
+  });
+  const model = {
+    uid: 'tab-1',
+    props: {} as Record<string, unknown>,
+    hidden: false,
+    __allModels: [],
+    setProps,
+    setHidden,
+  };
+  const ctx = {
+    app: { jsonLogic: { apply: () => matched } },
+    model,
+    t: (text: string) => text,
+    getAction: (name: string) => (name === 'linkageSetTabProps' ? linkageSetTabProps : undefined),
+    resolveJsonTemplate: vi.fn(async (value: unknown) => value),
+  };
+
+  return {
+    ctx,
+    model,
+    setMatched(value: boolean) {
+      matched = value;
+    },
+  };
+}
+
+const hideRule = {
+  value: [
+    {
+      key: 'rule-1',
+      title: 'Hide tab',
+      enable: true,
+      condition: {
+        logic: '$and',
+        items: [{ path: 'status', operator: '$eq', value: 'visible' }],
+      },
+      actions: [
+        {
+          key: 'action-1',
+          name: 'linkageSetTabProps',
+          params: { value: 'hidden' },
+        },
+      ],
+    },
+  ],
+};
+
+describe('tab linkage rules', () => {
+  it('should append the tab linkage scene without changing existing scene values', () => {
+    const scenes = ActionScene as unknown as Record<string, number>;
+
+    expect(scenes.MENU_LINKAGE_RULES).toBe(7);
+    expect(scenes.TAB_LINKAGE_RULES).toBe(8);
+    expect(scenes.TAB_LINKAGE_RULES).toBe(Math.max(...Object.values(scenes).filter(Number.isInteger)));
+  });
+
+  it('should register tab linkage actions from the actions entry', () => {
+    expect((registeredActions as Record<string, unknown>).tabLinkageRules).toBe(tabLinkageRules);
+    expect((registeredActions as Record<string, unknown>).linkageSetTabProps).toBe(linkageSetTabProps);
+    expect(tabLinkageRules).toBeDefined();
+    expect(linkageSetTabProps).toBeDefined();
+  });
+
+  it('should expose tab state and runjs actions in ui schema', () => {
+    expect(tabLinkageRules).toBeDefined();
+    expect(linkageSetTabProps).toBeDefined();
+
+    const schema = tabLinkageRules?.uiSchema?.({
+      getActions: () =>
+        new Map([
+          ['linkageSetTabProps', linkageSetTabProps],
+          ['linkageRunjs', linkageActions.linkageRunjs],
+          ['linkageSetMenuItemProps', linkageActions.linkageSetMenuItemProps],
+        ]),
+    } as never) as Record<string, Record<string, Record<string, unknown>>> | undefined;
+
+    expect(schema?.value?.['x-component-props']?.supportedActions).toEqual(['linkageSetTabProps', 'linkageRunjs']);
+    expect(linkageSetTabProps?.scene).toBe((ActionScene as unknown as Record<string, number>).TAB_LINKAGE_RULES);
+    expect(linkageActions.linkageRunjs.scene).toContain(
+      (ActionScene as unknown as Record<string, number>).TAB_LINKAGE_RULES,
+    );
+  });
+
+  it('should hide the tab when the condition matches and restore it when the condition misses', async () => {
+    expect(tabLinkageRules).toBeDefined();
+    const runtime = createRuntime();
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(true);
+
+    runtime.setMatched(false);
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(false);
+  });
+
+  it('should restore the tab when linkage rules are cleared', async () => {
+    expect(tabLinkageRules).toBeDefined();
+    const runtime = createRuntime();
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(true);
+
+    await tabLinkageRules?.handler(runtime.ctx as never, { value: [] });
+    expect(runtime.model.hidden).toBe(false);
+  });
+
+  it('should not restore stale tab props while applying or clearing visibility rules', async () => {
+    expect(tabLinkageRules).toBeDefined();
+    const runtime = createRuntime();
+    runtime.model.props = {
+      title: 'Original title',
+      icon: 'original-icon',
+      route: { options: { badge: 'original' } },
+    };
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.hidden).toBe(true);
+
+    const updatedProps = {
+      title: 'Updated title',
+      icon: 'updated-icon',
+      route: { options: { badge: 'updated' } },
+    };
+    runtime.model.props = updatedProps;
+
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.props).toMatchObject(updatedProps);
+    expect(runtime.model.hidden).toBe(true);
+
+    runtime.setMatched(false);
+    await tabLinkageRules?.handler(runtime.ctx as never, hideRule);
+    expect(runtime.model.props).toMatchObject(updatedProps);
+    expect(runtime.model.hidden).toBe(false);
+
+    await tabLinkageRules?.handler(runtime.ctx as never, { value: [] });
+    expect(runtime.model.props).toMatchObject(updatedProps);
+    expect(runtime.model.hidden).toBe(false);
+  });
+});

package/src/flow/actions/customVariable.tsx

@@ -12,7 +12,6 @@ import {
   defineAction,
   isRunJSValue,
   normalizeRunJSValue,
-  runjsWithSafeGlobals,
   tExpr,
   type RunJSValue,
   useFlowContext,
@@ -43,7 +42,7 @@ export const customVariable = defineAction({
       if (variable.type === 'runjs') {
         const getFunction = async () => {
           const { code, version } = normalizeRunJSValue(variable.runjs);
-          return runjsWithSafeGlobals(ctx, code, { version });
+          return ctx.runjs(code, undefined, { version });
         };
         const metaFunction = () => ({
           title: variable.title,

package/src/flow/actions/index.ts

@@ -43,10 +43,12 @@ export {
   linkageSetDetailsFieldProps,
   actionLinkageRules,
   menuLinkageRules,
+  tabLinkageRules,
   blockLinkageRules,
   linkageSetBlockProps,
   linkageSetActionProps,
   linkageSetMenuItemProps,
+  linkageSetTabProps,
   linkageSetFieldProps,
   subFormLinkageSetFieldProps,
   linkageAssignField,

package/src/flow/actions/linkageRules.tsx

@@ -16,13 +16,9 @@ import {
   FlowRuntimeContext,
   useFlowContext,
   useFlowEngine,
-  createSafeWindow,
-  createSafeDocument,
-  createSafeNavigator,
   observer,
   isRunJSValue,
   normalizeRunJSValue,
-  runjsWithSafeGlobals,
 } from '@nocobase/flow-engine';
 import { evaluateConditions, FilterGroupType, removeInvalidFilterItems } from '@nocobase/utils/client';
 import React from 'react';
@@ -492,7 +488,7 @@ async function resolveLinkageAssignRuntimeValue(ctx: FlowContext, rawValue: any)
 
   try {
     const { code, version } = normalizeRunJSValue(rawValue);
-    const ret = await runjsWithSafeGlobals(ctx, code, { version });
+    const ret = await ctx.runjs(code, undefined, { version });
     if (!ret?.success) {
       return SKIP_RUNJS_ASSIGN_VALUE;
     }
@@ -735,6 +731,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'),
@@ -1343,6 +1374,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,
   ],
@@ -1397,8 +1429,7 @@ export const linkageRunjs = defineAction({
     }
 
     try {
-      const navigator = createSafeNavigator();
-      await ctx.runjs(script, { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator });
+      await ctx.runjs(script);
     } catch (error) {
       console.error('Script execution error:', error);
       // 可以选择显示错误信息给用户
@@ -2174,7 +2205,7 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
               }
             : props;
 
-        // 只记录联动实际控制的属性，避免恢复状态时覆盖标题等无关的最新配置。
+        // 只记录联动实际控制的属性，避免之后恢复状态时把标题、路由等无关的新配置回滚到旧快照。
         const originalProps = model.__originalProps || (model.__originalProps = {});
         const rememberOriginalProp = (key: string, value: unknown) => {
           if (!Object.prototype.hasOwnProperty.call(originalProps, key)) {
@@ -2480,6 +2511,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/actions/runjs.tsx

@@ -7,14 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import {
-  ActionScene,
-  defineAction,
-  tExpr,
-  createSafeWindow,
-  createSafeDocument,
-  createSafeNavigator,
-} from '@nocobase/flow-engine';
+import { ActionScene, defineAction, tExpr } from '@nocobase/flow-engine';
 import { CodeEditor } from '../components/code-editor';
 
 export const runjs = defineAction({
@@ -38,11 +31,6 @@ export const runjs = defineAction({
     // 如果是 URL 触发的，则不执行代码
     if (ctx.inputArgs?.navigation) return;
 
-    const navigator = createSafeNavigator();
-    return ctx.runjs(params.code, {
-      window: createSafeWindow({ navigator }),
-      document: createSafeDocument(),
-      navigator,
-    });
+    return ctx.runjs(params.code);
   },
 });

package/src/flow/admin-shell/BaseLayoutModel.tsx

@@ -20,6 +20,7 @@ import {
   type BaseLayoutRouteCoordinatorOptions,
   type RoutePageMeta,
 } from './BaseLayoutRouteCoordinator';
+import { NocoBaseDesktopRouteType } from '../../flow-compat';
 import type { LayoutDefinition } from '../../layout-manager/types';
 import { isLayoutContentRouteName } from '../../layout-manager/utils';
 
@@ -334,6 +335,18 @@ export class BaseLayoutModel<
       };
     }
 
+    const routeRepository = this.flowEngine.context.routeRepository;
+    const schemaRoute = routeRepository?.getRouteBySchemaUid?.(pageUid);
+    const route = schemaRoute ? undefined : routeRepository?.getRouteById?.(pageUid);
+    if (!schemaRoute && route?.type === NocoBaseDesktopRouteType.group) {
+      return {
+        type: 'root',
+        pathname,
+        basePathname,
+        relativePath,
+      };
+    }
+
     return {
       type: 'page',
       pathname,

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

@@ -42,6 +42,7 @@ import {
   FLOW_SETTINGS_PREFERENCE_STORAGE_KEY,
   readFlowSettingsPreference,
 } from './flowSettingsPreference';
+import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
 
 const className1 = css`
@@ -294,6 +295,8 @@ function SetIsMobileLayout(props: { isMobile: boolean; children: any; model?: Ad
 function AdminLayoutContentWithMobileState(props: {
   isMobile: boolean;
   model?: AdminLayoutModel;
+  designable?: boolean;
+  layout?: AdminLayoutModel['layout'];
   onContentElementChange?: (element: HTMLDivElement | null) => void;
 }) {
   const modelRef = useRef(props.model);
@@ -311,7 +314,13 @@ function AdminLayoutContentWithMobileState(props: {
     onContentElementChangeRef.current?.(element);
   }, []);
 
-  return <AdminLayoutContent onContentElementChange={handleContentElementChange} />;
+  return (
+    <AdminLayoutContent
+      designable={props.designable}
+      layout={props.layout}
+      onContentElementChange={handleContentElementChange}
+    />
+  );
 }
 
 const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRoute?: NocoBaseDesktopRoute }> = (
@@ -337,25 +346,37 @@ const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRout
   );
 };
 
-const matchesRoutePath = (route: NocoBaseDesktopRoute | undefined, pathname: string): boolean => {
+const matchesRoutePath = (
+  route: NocoBaseDesktopRoute | undefined,
+  pathname: string,
+  layout?: AdminLayoutRoutePathLike | null,
+): boolean => {
   if (!route) {
     return false;
   }
 
   const candidates = [
-    route.id != null ? `/admin/${route.id}` : null,
-    route.schemaUid ? `/admin/${route.schemaUid}` : null,
+    route.id != null ? joinAdminLayoutRoutePath(layout, route.id) : null,
+    route.schemaUid ? joinAdminLayoutRoutePath(layout, route.schemaUid) : null,
   ].filter(Boolean) as string[];
 
   if (candidates.some((candidate) => pathname === candidate || pathname.startsWith(`${candidate}/`))) {
     return true;
   }
 
-  return Array.isArray(route.children) ? route.children.some((child) => matchesRoutePath(child, pathname)) : false;
+  return Array.isArray(route.children)
+    ? route.children.some((child) => matchesRoutePath(child, pathname, layout))
+    : false;
 };
 
-const findSelectedTopGroupRoute = (routes: NocoBaseDesktopRoute[], pathname: string) => {
-  return routes.find((route) => route.type === NocoBaseDesktopRouteType.group && matchesRoutePath(route, pathname));
+const findSelectedTopGroupRoute = (
+  routes: NocoBaseDesktopRoute[],
+  pathname: string,
+  layout?: AdminLayoutRoutePathLike | null,
+) => {
+  return routes.find(
+    (route) => route.type === NocoBaseDesktopRouteType.group && matchesRoutePath(route, pathname, layout),
+  );
 };
 
 const renderMenuNodeWithModel = (
@@ -399,6 +420,11 @@ export const AdminLayoutComponent = observer((props: any) => {
   const { token } = antdTheme.useToken();
   const customToken = token as CustomToken;
   const isMobileLayout = !!adminLayoutModel?.isMobileLayout;
+  const adminLayoutRoutePath = adminLayoutModel?.layout?.routePath;
+  const adminLayoutRoutePathLike = useMemo<AdminLayoutRoutePathLike | undefined>(
+    () => (adminLayoutRoutePath ? { routePath: adminLayoutRoutePath } : undefined),
+    [adminLayoutRoutePath],
+  );
   const menuRouteRefreshVersion = adminLayoutModel?.menuRouteRefreshVersion || 0;
   const isMobileSider = isMobileLayout;
   const [collapsed, setCollapsed] = useState(isMobileSider);
@@ -415,8 +441,8 @@ export const AdminLayoutComponent = observer((props: any) => {
   );
   const designable = !isMobileSider && preferredFlowSettingsEnabled;
   const { styles } = useHeaderStyle();
-  const { appList } = useApplications();
-  const appListRender = useAppListRender();
+  const { appList, appSwitcherModel } = useApplications(adminLayoutModel);
+  const appListRender = useAppListRender(appSwitcherModel);
   const flowSettingsSyncRef = useRef(0);
   const desiredFlowSettingsEnabledRef = useRef(false);
   const handleLayoutContentElementChange = useCallback(
@@ -426,8 +452,8 @@ export const AdminLayoutComponent = observer((props: any) => {
     [adminLayoutModel],
   );
   const selectedTopGroupRoute = useMemo(
-    () => findSelectedTopGroupRoute(allAccessRoutes, location.pathname),
-    [allAccessRoutes, location.pathname],
+    () => findSelectedTopGroupRoute(allAccessRoutes, location.pathname, adminLayoutRoutePathLike),
+    [adminLayoutRoutePathLike, allAccessRoutes, location.pathname],
   );
 
   const handleMenuDragEnd = useCallback(
@@ -481,6 +507,7 @@ export const AdminLayoutComponent = observer((props: any) => {
 
   useEffect(() => {
     const routeRepository = flowEngine.context.routeRepository;
+    const deactivateLayout = routeRepository?.activateLayout?.(adminLayoutModel?.layout);
     const subscriber = () => {
       const updatedRoutes = routeRepository?.listAccessible() || [];
       setAllAccessRoutes(updatedRoutes);
@@ -493,8 +520,9 @@ export const AdminLayoutComponent = observer((props: any) => {
 
     return () => {
       routeRepository?.unsubscribe(subscriber);
+      deactivateLayout?.();
     };
-  }, [flowEngine]);
+  }, [adminLayoutModel, adminLayoutModel?.layout?.uid, flowEngine]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -637,6 +665,10 @@ export const AdminLayoutComponent = observer((props: any) => {
         z-index: 2000 !important;
       }
 
+      .ant-pro-layout-apps-popover .ant-popover-content {
+        margin-top: 12px;
+      }
+
       .ant-pro-layout-apps-icon {
         color: ${customToken.colorTextHeaderMenu || 'rgba(255, 255, 255, 0.85)'};
       }
@@ -680,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}
@@ -723,6 +754,8 @@ export const AdminLayoutComponent = observer((props: any) => {
                         <AdminLayoutContentWithMobileState
                           isMobile={isMobile}
                           model={adminLayoutModel}
+                          designable={designable}
+                          layout={adminLayoutModel?.layout}
                           onContentElementChange={handleLayoutContentElementChange}
                         />
                       </ConfigProvider>