@nocobase/client-v2 2.1.0-beta.43 → 2.1.0-beta.45

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

@@ -0,0 +1,139 @@
+/**
+ * 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 type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
+import { css } from '@emotion/css';
+import { Card, Typography, theme } from 'antd';
+import React from 'react';
+
+function renderIcon(icon: React.ReactNode | (() => React.ReactNode)) {
+  return typeof icon === 'function' ? icon() : icon;
+}
+
+export function useAppListRender() {
+  const { token } = theme.useToken();
+
+  return React.useCallback(
+    (appList: AppListProps) => {
+      const columnCount = Math.min(Math.max(appList.length, 1), 2);
+
+      return (
+        <div
+          className={css`
+            max-width: calc(100vw - 48px);
+            max-height: calc(100vh - 48px);
+            overflow: auto;
+            padding: ${token.paddingXS}px;
+          `}
+        >
+          <ul
+            className={css`
+              display: grid;
+              grid-template-columns: repeat(${columnCount}, 260px);
+              gap: ${token.marginXXS}px;
+              margin: 0;
+              padding: 0;
+              list-style: none;
+            `}
+          >
+            {appList.map((app, index) => (
+              <li
+                key={`${app.url || ''}-${index}`}
+                className={css`
+                  width: 260px;
+                  height: 56px;
+                  list-style: none;
+                `}
+              >
+                <a
+                  href={app.url}
+                  target={app.target}
+                  rel="noreferrer"
+                  className={css`
+                    display: block;
+                    height: 100%;
+                    color: ${token.colorText};
+                    text-decoration: none;
+
+                    &:hover {
+                      color: ${token.colorText};
+                    }
+                  `}
+                >
+                  <Card
+                    bordered={false}
+                    style={{
+                      height: '100%',
+                      borderRadius: token.borderRadius,
+                      boxShadow: 'none',
+                    }}
+                    className={css`
+                      height: 100%;
+                      border-radius: ${token.borderRadius}px;
+                      box-shadow: none;
+
+                      &:hover {
+                        background: ${token.colorBgTextHover};
+                        box-shadow: none;
+                      }
+
+                      .ant-card-body {
+                        height: 100%;
+                        padding: ${token.paddingXS}px;
+                        display: flex;
+                        align-items: center;
+                        gap: ${token.marginXS}px;
+                      }
+                    `}
+                    styles={{
+                      body: {
+                        background: 'transparent',
+                      },
+                    }}
+                  >
+                    <span
+                      className={css`
+                        display: inline-flex;
+                        flex: 0 0 auto;
+                        width: 32px;
+                        height: 32px;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                          max-width: 32px;
+                          max-height: 32px;
+                        }
+                      `}
+                    >
+                      {renderIcon(app.icon)}
+                    </span>
+                    <Typography.Text
+                      ellipsis
+                      title={typeof app.title === 'string' ? app.title : undefined}
+                      className={css`
+                        min-width: 0;
+                        color: ${token.colorText};
+                        font-size: ${token.fontSize}px;
+                        line-height: ${token.lineHeight};
+                      `}
+                    >
+                      {app.title}
+                    </Typography.Text>
+                  </Card>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      );
+    },
+    [token],
+  );
+}

package/src/flow/admin-shell/admin-layout/__tests__/AdminLayoutMenuModels.test.ts

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { observer } from '@nocobase/flow-engine';
 import { MemoryRouter } from 'react-router-dom';
@@ -45,6 +45,9 @@ describe('AdminLayoutModel menu items', () => {
   let modalConfirmMock: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
+    // Fixtures mount the modern client under the `v2` segment; tell the
+    // runtime-prefix helper so v2-runtime detection matches.
+    (globalThis.window as any).__nocobase_modern_client_prefix__ = 'v2';
     engine = new FlowEngine();
     modalConfirmMock = vi.fn().mockResolvedValue(true);
     engine.registerModels({
@@ -104,6 +107,10 @@ describe('AdminLayoutModel menu items', () => {
     vi.spyOn(window, 'open').mockImplementation(() => null);
   });
 
+  afterEach(() => {
+    delete (globalThis.window as any).__nocobase_modern_client_prefix__;
+  });
+
   const createRoute = (options?: Partial<import('../../../../flow-compat').NocoBaseDesktopRoute>) => ({
     id: 1,
     title: 'Page 1',
@@ -950,6 +957,73 @@ describe('AdminLayoutModel menu items', () => {
     });
   });
 
+  it('should save menu linkage rules without serializing runtime render props', async () => {
+    type SerializedFlowModel = Record<string, unknown> & {
+      props?: Record<string, unknown>;
+      subModels?: unknown;
+    };
+    const save = vi.fn(
+      async (targetModel: { serialize: () => SerializedFlowModel }, options?: { onlyStepParams?: boolean }) => {
+        const data = targetModel.serialize();
+        if (options?.onlyStepParams) {
+          delete data.subModels;
+        }
+
+        expect(data.props?.item).toBeUndefined();
+        expect(data.props?.dom).toBeUndefined();
+        expect(data.props?.options).toBeUndefined();
+        expect(data.props?.renderType).toBeUndefined();
+        expect(() => JSON.stringify(data)).not.toThrow();
+        return data;
+      },
+    );
+    const updateRoute = vi.fn().mockResolvedValue(undefined);
+    engine.setModelRepository({ save } as Parameters<FlowEngine['setModelRepository']>[0]);
+    engine.context.routeRepository.updateRoute = updateRoute;
+
+    const route = createRoute();
+    const model = engine.createModel<AdminLayoutMenuItemModel>({
+      uid: 'menu-item-linkage-runtime-props',
+      use: AdminLayoutMenuItemModel,
+      props: {
+        route,
+      },
+    });
+    const item = {
+      name: 'Page 1',
+      path: '/admin/page-1',
+      _route: route,
+      _model: model,
+    };
+
+    model.setProps({
+      item,
+      dom: React.createElement('span', null, 'Page 1'),
+      renderType: 'item',
+      options: { collapsed: false },
+    });
+    model.setStepParams('menuSettings', 'linkageRules', {
+      value: [
+        {
+          key: 'r1',
+          title: 'Hide menu item',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ key: 'a1', name: 'linkageSetMenuItemProps', params: { value: 'hidden' } }],
+        },
+      ],
+    });
+
+    await model.saveStepParams();
+
+    expect(save).toHaveBeenCalledWith(model, { onlyStepParams: true });
+    expect(updateRoute).toHaveBeenCalledWith(1, {
+      options: {
+        hasPersistedMenuInstanceFlow: true,
+      },
+    });
+  });
+
   it('should clear persisted menu linkage rules when no persisted state remains', async () => {
     const saveModel = vi.spyOn(engine, 'saveModel').mockResolvedValue(undefined as any);
     const destroy = vi.fn().mockResolvedValue(true);

package/src/flow/admin-shell/admin-layout/index.ts

@@ -18,5 +18,6 @@ export * from './resolveAdminRouteRuntimeTarget';
 export * from './constants';
 export * from './ResetThemeTokenAndKeepAlgorithm';
 export * from './useApplications';
+export * from './AppListRender';
 export * from './PinnedPluginListLite';
 export * from './mobile-layout';

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.test.ts

@@ -23,6 +23,17 @@ const app = {
   },
 } as any;
 
+// These fixtures mount the modern client under the `v2` segment; tell the
+// runtime-prefix helper so `isV2AdminRuntime` detects it (the server injects
+// this in production).
+beforeAll(() => {
+  (window as any).__nocobase_modern_client_prefix__ = 'v2';
+});
+
+afterAll(() => {
+  delete (window as any).__nocobase_modern_client_prefix__;
+});
+
 describe('resolveAdminRouteRuntimeTarget', () => {
   it('should resolve flowPage to v2 spa runtime target', () => {
     expect(

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { getV2EffectiveBasePath } from '../../../authRedirect';
+import { getModernClientPrefix, getV2EffectiveBasePath } from '../../../authRedirect';
 import type { BaseApplication } from '../../../BaseApplication';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 
@@ -26,8 +26,6 @@ export type AdminRouteRuntimeTarget = {
   reason: AdminRouteRuntimeTargetReason;
 };
 
-const V2_PUBLIC_PATH_SUFFIX = '/v2/';
-
 type LocationLike = {
   pathname: string;
   search?: string;
@@ -69,7 +67,7 @@ function normalizePublicPath(value = '/') {
 }
 
 export function isV2AdminRuntime(app?: ResolveAdminRouteRuntimeTargetOptions['app']) {
-  return !!app?.getPublicPath && normalizePublicPath(app.getPublicPath()).endsWith(V2_PUBLIC_PATH_SUFFIX);
+  return !!app?.getPublicPath && normalizePublicPath(app.getPublicPath()).endsWith(`/${getModernClientPrefix()}/`);
 }
 
 export function toRouterNavigationPath(pathname: string, basename?: string) {

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

@@ -8,8 +8,41 @@
  */
 
 import { useApp } from '../../../flow-compat';
+import React from 'react';
 
 export const useApplications = () => {
   const app = useApp();
-  return { Component: app.apps.Component };
+  const loadAppList = app.apps.loadAppList;
+  const [appList, setAppList] = React.useState([]);
+
+  React.useEffect(() => {
+    let canceled = false;
+
+    if (!loadAppList) {
+      setAppList([]);
+      return;
+    }
+
+    void Promise.resolve(loadAppList(app))
+      .then((list) => {
+        if (!canceled) {
+          setAppList(Array.isArray(list) ? list : []);
+        }
+      })
+      .catch((error) => {
+        console.error('[NocoBase] Failed to load application switcher list.', error);
+        if (!canceled) {
+          setAppList([]);
+        }
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [app, loadAppList]);
+
+  return {
+    Component: app.apps.Component,
+    appList,
+  };
 };

package/src/flow/common/Markdown/Edit.tsx

@@ -34,13 +34,41 @@ const defaultToolbar = [
   'code',
   'inline-code',
   'upload',
-  'fullscreen',
 ];
 
 const NAMESPACE = 'block-markdown';
 
 const locales = ['en_US', 'fr_FR', 'pt_BR', 'ja_JP', 'ko_KR', 'ru_RU', 'sv_SE', 'zh_CN', 'zh_TW'];
 
+type MarkdownToolbarItem =
+  | string
+  | {
+      name: string;
+      tipPosition?: string;
+      toolbar?: MarkdownToolbarItem[];
+      [key: string]: unknown;
+    };
+
+function placeToolbarTooltipsBelow(toolbar: MarkdownToolbarItem[]) {
+  return toolbar.map((item) => {
+    if (typeof item === 'string') {
+      if (item === '|' || item === 'br') {
+        return item;
+      }
+      return {
+        name: item,
+        tipPosition: 's',
+      };
+    }
+
+    return {
+      ...item,
+      tipPosition: 's',
+      toolbar: item.toolbar ? placeToolbarTooltipsBelow(item.toolbar) : item.toolbar,
+    };
+  });
+}
+
 const Edit = (props) => {
   const { disabled, onChange, value, fileCollection, toolbar, vditorRef } = props;
   const flowCtx = useFlowContext();
@@ -73,7 +101,7 @@ const Edit = (props) => {
   useEffect(() => {
     if (!containerRef.current) return;
 
-    const toolbarConfig = toolbar ?? defaultToolbar;
+    const toolbarConfig = placeToolbarTooltipsBelow(toolbar ?? defaultToolbar);
     const vditor = new Vditor(containerRef.current, {
       value: value ?? '',
       lang,
@@ -321,7 +349,7 @@ export const MarkdownWithContextSelector: React.FC<MarkdownWithContextSelectorPr
     if (quoteFlag !== false) {
       setInnerValue(value);
     }
-  }, [value]);
+  }, [quoteFlag, value]);
   const handleTextChange = useCallback(
     (e) => {
       const val = e ?? '';
@@ -375,7 +403,7 @@ export const MarkdownWithContextSelector: React.FC<MarkdownWithContextSelectorPr
         editor.focus();
       });
     },
-    [innerValue, onChange],
+    [onChange],
   );
 
   const handleVariableSelected = useCallback(

package/src/flow/components/ConditionBuilder.tsx

@@ -13,14 +13,24 @@ import { FilterGroup, LinkageFilterItem } from './filter';
 import { evaluateConditions, FilterGroupType, removeInvalidFilterItems } from '@nocobase/utils/client';
 
 export const ConditionBuilder = observer(
-  (props: { value: FilterGroupType; onChange: (value: FilterGroupType) => void; extraMetaTree?: MetaTreeNode[] }) => {
+  (props: {
+    value: FilterGroupType;
+    onChange: (value: FilterGroupType) => void;
+    extraMetaTree?: MetaTreeNode[];
+    maxAssociationFieldDepth?: number;
+  }) => {
     const ctx = useFlowContext();
 
     return (
       <FilterGroup
         value={props.value || { logic: '$and', items: [] }}
         FilterItem={(itemProps) => (
-          <LinkageFilterItem model={ctx.model} value={itemProps.value} extraMetaTree={props.extraMetaTree} />
+          <LinkageFilterItem
+            model={ctx.model}
+            value={itemProps.value}
+            extraMetaTree={props.extraMetaTree}
+            maxAssociationFieldDepth={props.maxAssociationFieldDepth}
+          />
         )}
         onChange={props.onChange}
       />

package/src/flow/components/DefaultValue.tsx

@@ -31,7 +31,7 @@ import { FieldModel } from '../models';
 import { RecordSelectFieldModel } from '../models/fields/AssociationFieldModel';
 import { InputFieldModel } from '../models/fields/InputFieldModel';
 import { ensureOptionsFromUiSchemaEnumIfAbsent } from '../internal/utils/enumOptionsUtils';
-import { resolveOperatorComponent } from '../internal/utils/operatorSchemaHelper';
+import { pickOperatorStyle as pickStyle, resolveOperatorComponent } from '../internal/utils/operatorSchemaHelper';
 import { RunJSValueEditor } from './RunJSValueEditor';
 import { buildDynamicNamePath } from '../models/blocks/form/dynamicNamePath';
 
@@ -592,7 +592,7 @@ export const DefaultValue = connect((props: Props) => {
             }
           }
         }
-      }, [inputProps, value]);
+      }, [inputProps]);
       return (
         <div style={{ flexGrow: 1 }}>
           <FlowModelRenderer model={tempRoot} showFlowSettings={false} />
@@ -600,11 +600,13 @@ export const DefaultValue = connect((props: Props) => {
       );
     };
     return ConstantValueEditor;
-  }, [tempRoot]);
+  }, [tempRoot, value]);
+
+  const modelOperator = (model as { operator?: string })?.operator;
 
   // 文本类多关键词：根据已注册的 operator schema 渲染（用于默认值配置）
   React.useEffect(() => {
-    const operator = (model as any)?.operator;
+    const operator = modelOperator;
     const fieldModel = tempRoot?.subModels?.fields?.[0];
     if (!operator || !fieldModel) return;
     const originalRender = fieldModel['__originalRender'] || fieldModel.render;
@@ -622,17 +624,21 @@ export const DefaultValue = connect((props: Props) => {
         <Comp
           {...fieldModel.props}
           {...xProps}
-          style={{ width: '100%', ...(fieldModel.props as any)?.style, ...xProps?.style }}
+          style={{
+            width: '100%',
+            ...pickStyle((fieldModel.props as Record<string, unknown>)?.style),
+            ...pickStyle(xProps?.style),
+          }}
         />
       );
     } else if (typeof originalRender === 'function') {
       fieldModel.render = originalRender;
     }
-  }, [model, tempRoot, (model as any)?.operator]);
+  }, [model, tempRoot, modelOperator]);
 
   // 根据操作符 schema 的 x-component-props 补全临时字段的输入属性（如多选）
   React.useEffect(() => {
-    const operator = (model as any)?.operator;
+    const operator = modelOperator;
     const fieldModel = tempRoot?.subModels?.fields?.[0];
     if (!fieldModel || !operator) return;
     const ops = model.collectionField?.filterable?.operators || [];
@@ -641,7 +647,7 @@ export const DefaultValue = connect((props: Props) => {
     if (xComponentProps) {
       fieldModel.setProps(xComponentProps);
     }
-  }, [model, tempRoot, (model as any)?.operator]);
+  }, [model, tempRoot, modelOperator]);
 
   const NullComponent = useMemo(() => {
     function NullValuePlaceholder() {