@nocobase/client-v2 2.1.26 → 2.1.28

package/lib/locale/languageCodes.js

@@ -64,6 +64,7 @@ const languageCodes = {
   "ml-IN": { label: "\u0D2E\u0D32\u0D2F\u0D3E\u0D33\u0D02" },
   "mn-MN": { label: "\u041C\u043E\u043D\u0433\u043E\u043B \u0445\u044D\u043B" },
   "ms-MY": { label: "\u0628\u0647\u0627\u0633 \u0645\u0644\u0627\u064A\u0648" },
+  "my-MM": { label: "\u1019\u103C\u1014\u103A\u1019\u102C\u1018\u102C\u101E\u102C" },
   "nb-NO": { label: "Norsk bokm\xE5l" },
   "ne-NP": { label: "\u0928\u0947\u092A\u093E\u0932\u0940" },
   "nl-BE": { label: "Vlaams" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.26",
+  "version": "2.1.28",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.26",
-    "@nocobase/flow-engine": "2.1.26",
-    "@nocobase/sdk": "2.1.26",
-    "@nocobase/shared": "2.1.26",
-    "@nocobase/utils": "2.1.26",
+    "@nocobase/evaluators": "2.1.28",
+    "@nocobase/flow-engine": "2.1.28",
+    "@nocobase/sdk": "2.1.28",
+    "@nocobase/shared": "2.1.28",
+    "@nocobase/utils": "2.1.28",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -44,8 +44,9 @@
     "json5": "^2.2.3",
     "jsqr": "^1.4.0",
     "lodash": "4.17.21",
+    "react-device-detect": "2.2.3",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "b25700115794487b342ac33a63a1a988c75c112c"
+  "gitHead": "584c0c0e69d32fe502014a6836b3fcb669e89525"
 }

package/src/flow/__tests__/FlowRoute.test.tsx

@@ -112,6 +112,7 @@ describe('FlowRoute', () => {
         }),
       );
     });
+    expect(engine.context.deviceType).toBe('computer');
 
     rerender(
       <FlowEngineProvider engine={engine}>

package/src/flow/__tests__/PluginFlowEngine.test.ts

@@ -0,0 +1,58 @@
+/**
+ * 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 { createMockClient, PluginFlowEngine } from '@nocobase/client-v2';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { detectedDeviceType } = vi.hoisted(() => ({
+  detectedDeviceType: { value: 'mobile' },
+}));
+
+vi.mock('react-device-detect', () => ({
+  get deviceType() {
+    return detectedDeviceType.value;
+  },
+}));
+
+describe('PluginFlowEngine', () => {
+  beforeEach(() => {
+    detectedDeviceType.value = 'mobile';
+  });
+
+  it('should register the current device type before shared flow components', async () => {
+    const app = createMockClient({
+      router: {
+        type: 'memory',
+        initialEntries: ['/'],
+      },
+    });
+    const plugin = new PluginFlowEngine({}, app);
+    const addComponents = app.addComponents.bind(app);
+    const deviceTypesBeforeComponentRegistration: string[] = [];
+    vi.spyOn(app, 'addComponents').mockImplementation((components) => {
+      deviceTypesBeforeComponentRegistration.push(app.flowEngine.context.deviceType);
+      return addComponents(components);
+    });
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('mobile');
+    expect(deviceTypesBeforeComponentRegistration).toEqual(['mobile']);
+  });
+
+  it('should normalize the browser device type to computer', async () => {
+    detectedDeviceType.value = 'browser';
+    const app = createMockClient();
+    const plugin = new PluginFlowEngine({}, app);
+
+    await plugin.load();
+
+    expect(app.flowEngine.context.deviceType).toBe('computer');
+  });
+});

package/src/flow/components/FlowRoute.tsx

@@ -9,7 +9,6 @@
 
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { deviceType } from 'react-device-detect';
 import { useParams } from 'react-router-dom';
 import { useApp } from '../../hooks/useApp';
 import { NocoBaseDesktopRouteType } from '../../flow-compat';
@@ -19,6 +18,7 @@ import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutM
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
 import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
+import { registerDeviceTypeContext } from '../internal/registerDeviceTypeContext';
 
 type FlowRouteGuardState = {
   pending: boolean;
@@ -94,31 +94,9 @@ const BridgeFlowRoute = ({
   const layoutContentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    flowEngine.context.defineProperty('deviceType', {
-      get: () => (deviceType === 'browser' ? 'computer' : deviceType),
-      cache: false,
-      meta: {
-        type: 'string',
-        title: flowEngine.translate('Current device type'),
-        interface: 'select',
-        uiSchema: {
-          enum: [
-            { label: flowEngine.translate('Computer'), value: 'computer' },
-            { label: flowEngine.translate('Mobile'), value: 'mobile' },
-            { label: flowEngine.translate('Tablet'), value: 'tablet' },
-            { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
-            { label: flowEngine.translate('Console'), value: 'console' },
-            { label: flowEngine.translate('Wearable'), value: 'wearable' },
-            { label: flowEngine.translate('Embedded'), value: 'embedded' },
-          ],
-          'x-component': 'Select',
-        },
-      },
-      info: {
-        description: 'Current device type (computer/mobile/tablet/...).',
-        detail: 'string',
-      },
-    });
+    if (!flowEngine.context.getPropertyOptions('deviceType')) {
+      registerDeviceTypeContext(flowEngine);
+    }
   }, [flowEngine]);
 
   useLayoutRoutePage({
@@ -136,8 +114,8 @@ const BridgeFlowRoute = ({
 /**
  * 管理后台动态页面路由组件。
  *
- * 负责读取当前路由页面 UID，补充运行时设备变量，
- * 并把页面生命周期桥接到 AdminLayout host model。
+ * 负责读取当前路由页面 UID，并把页面生命周期桥接到 AdminLayout host model。
+ * 设备变量通常由 PluginFlowEngine 共享初始化提供；独立渲染时会在挂载后补充注册。
  *
  * @example
  * ```tsx

package/src/flow/index.ts

@@ -22,12 +22,14 @@ import { Markdown } from './common/Markdown/Markdown';
 import { LiquidEngine } from './common/Liquid';
 import type { PreviewRunJSResult } from './components/code-editor/runjsDiagnostics';
 import { TextAreaWithContextSelector } from './components/TextAreaWithContextSelector';
+import { registerDeviceTypeContext } from './internal/registerDeviceTypeContext';
 
 export class PluginFlowEngine<TApp extends BaseApplication<any> = BaseApplication<any>> extends Plugin<
   PluginOptions<any>,
   TApp
 > {
   async load() {
+    registerDeviceTypeContext(this.flowEngine);
     this.app.addComponents({ FlowRoute });
     this.app.flowEngine.setModelRepository(new FlowModelRepository(this.app));
     const filteredModels = Object.fromEntries(

package/src/flow/internal/registerDeviceTypeContext.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { deviceType } from 'react-device-detect';
+
+export const registerDeviceTypeContext = (flowEngine: FlowEngine) => {
+  flowEngine.context.defineProperty('deviceType', {
+    get: () => (deviceType === 'browser' ? 'computer' : deviceType),
+    cache: false,
+    meta: {
+      type: 'string',
+      title: flowEngine.translate('Current device type'),
+      interface: 'select',
+      uiSchema: {
+        enum: [
+          { label: flowEngine.translate('Computer'), value: 'computer' },
+          { label: flowEngine.translate('Mobile'), value: 'mobile' },
+          { label: flowEngine.translate('Tablet'), value: 'tablet' },
+          { label: flowEngine.translate('SmartTv'), value: 'smarttv' },
+          { label: flowEngine.translate('Console'), value: 'console' },
+          { label: flowEngine.translate('Wearable'), value: 'wearable' },
+          { label: flowEngine.translate('Embedded'), value: 'embedded' },
+        ],
+        'x-component': 'Select',
+      },
+    },
+    info: {
+      description: 'Current device type (computer/mobile/tablet/...).',
+      detail: 'string',
+    },
+  });
+};

package/src/flow/models/base/CollectionBlockModel.tsx

@@ -569,9 +569,13 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
     }
     if (fieldPath.includes('.')) {
       // 关系数据
+      const collection = this.collection;
+      if (!collection) {
+        return;
+      }
       const [field1, field2] = fieldPath.split('.');
       const associationField = this.context.dataSourceManager.getCollectionField(
-        `${this.collection.dataSourceKey}.${this.collection.name}.${field1}`,
+        `${collection.dataSourceKey}.${collection.name}.${field1}`,
       ) as CollectionField;
       if (!associationField) {
         return;
@@ -583,7 +587,7 @@ export class CollectionBlockModel<T = DefaultStructure> extends DataBlockModel<T
       }
 
       const collectionField = this.context.dataSourceManager.getCollectionField(
-        `${this.collection.dataSourceKey}.${targetCollectionName}.${field2}`,
+        `${collection.dataSourceKey}.${targetCollectionName}.${field2}`,
       ) as CollectionField;
 
       if (collectionField && collectionField.isAssociationField()) {

package/src/flow/models/base/PageModel/PageTabModel.tsx

@@ -9,6 +9,7 @@
 
 import { FlowModel, FlowModelRenderer, observable, tExpr } from '@nocobase/flow-engine';
 import { Icon, type NocoBaseDesktopRoute } from '../../../../flow-compat';
+import type { RouteRepository } from '../../../../RouteRepository';
 import { useRequest } from 'ahooks';
 import React from 'react';
 import { SkeletonFallback } from '../../../components/SkeletonFallback';
@@ -52,6 +53,25 @@ function normalizePersistedRoute(payload: unknown): Partial<NocoBaseDesktopRoute
   return undefined;
 }
 
+type RefreshableRouteRepository = Pick<RouteRepository, 'refreshAccessible'>;
+
+const routeRefreshQueues = new WeakMap<RefreshableRouteRepository, Promise<unknown>>();
+
+async function refreshRouteRepository(repository: RefreshableRouteRepository) {
+  const previous = routeRefreshQueues.get(repository) || Promise.resolve();
+  const current = previous.catch(() => undefined).then(() => repository.refreshAccessible());
+
+  routeRefreshQueues.set(repository, current);
+
+  try {
+    await current;
+  } finally {
+    if (routeRefreshQueues.get(repository) === current) {
+      routeRefreshQueues.delete(repository);
+    }
+  }
+}
+
 export class BasePageTabModel extends FlowModel<{
   subModels: {
     grid: BlockGridModel;
@@ -168,22 +188,36 @@ export class RootPageTabModel extends BasePageTabModel {
   async save() {
     const json = this.serialize();
     const documentTitle = this.stepParams?.pageTabSettings?.tab?.documentTitle;
-    const response = await this.context.api.request({
-      method: 'post',
-      url: 'desktopRoutes:updateOrCreate',
-      params: {
-        filterKeys: ['schemaUid'],
+    const route = this.props.route || {};
+    const persisted = route.id != null;
+    const currentRoute =
+      persisted && route.schemaUid ? this.context.routeRepository?.getRouteBySchemaUid?.(route.schemaUid) : undefined;
+    const data = {
+      ...(persisted ? { schemaUid: route.schemaUid } : route),
+      title: this.getTabTitle(''),
+      icon: this.getTabIcon(),
+      options: {
+        ...(currentRoute ? currentRoute.options : route.options),
+        flowRegistry: json.flowRegistry,
+        documentTitle,
       },
-      data: {
-        ...this.props.route,
-        title: this.getTabTitle(''),
-        icon: this.getTabIcon(),
-        options: {
-          flowRegistry: json.flowRegistry,
-          documentTitle,
-        },
-      },
-    });
+    };
+    const response = await this.context.api.request(
+      persisted
+        ? {
+            method: 'post',
+            url: `desktopRoutes:update?filter[id]=${route.id}`,
+            data,
+          }
+        : {
+            method: 'post',
+            url: 'desktopRoutes:updateOrCreate',
+            params: {
+              filterKeys: ['schemaUid'],
+            },
+            data,
+          },
+    );
     const persistedRoute = normalizePersistedRoute(response?.data?.data);
 
     // 新建 tab 首次保存后需要立即拿到持久化 route id，拖拽排序会直接依赖它。
@@ -197,6 +231,20 @@ export class RootPageTabModel extends BasePageTabModel {
         },
       });
     }
+
+    // 后续保存会从 RouteRepository 读取扩展 options，当前写入完成后必须先同步最新路由快照。
+    try {
+      if (this.context.routeRepository?.refreshAccessible) {
+        await refreshRouteRepository(this.context.routeRepository);
+      } else {
+        await this.context.refreshDesktopRoutes?.();
+      }
+    } catch (error) {
+      this.context.logger?.warn?.(
+        { err: error },
+        '[client-v2] Failed to refresh desktop routes after saving a page tab',
+      );
+    }
   }
 
   async destroy() {