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

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

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DefaultStructure, FlowModel, tExpr, useFlowModel } from '@nocobase/flow-engine';
+import { FlowModel, tExpr, useFlowModel } from '@nocobase/flow-engine';
+import type { DefaultStructure, FlowModelOptions } from '@nocobase/flow-engine';
 import { Icon } from '../../../components';
 import { Button, Tooltip } from 'antd';
 import type { ButtonProps } from 'antd/es/button';
@@ -87,8 +88,10 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return null;
   }
 
-  onInit(options: any): void {
+  onInit(options: FlowModelOptions<T>): void {
     super.onInit(options);
+    // Action disabled state is computed at runtime and must never be restored from persisted props.
+    delete this.props.disabled;
     this.context.defineProperty('actionName', {
       get: () => {
         return this.getAclActionName();
@@ -97,6 +100,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     });
   }
 
+  serialize() {
+    const data = super.serialize();
+    delete data.props.disabled;
+    return data;
+  }
+
   getInputArgs() {
     const inputArgs: Record<string, any> = {};
     const defaultKeys: string[] = [];

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

@@ -14,8 +14,10 @@ import {
   FlowSettingsButton,
   buildSubModelGroups,
   buildSubModelItems,
+  type FlowModel,
   type SubModelItem,
   type SubModelItemsType,
+  VIEW_ACTIVATED_EVENT,
 } from '@nocobase/flow-engine';
 import React from 'react';
 import { FilterManager } from '../blocks/filter-manager/FilterManager';
@@ -24,6 +26,8 @@ import { GridModel } from './GridModel';
 const SELECT_SCENE_ALLOWED_OTHER_BLOCK_MODELS = ['JSBlockModel', 'IframeBlockModel', 'MarkdownBlockModel'] as const;
 
 export class BlockGridModel extends GridModel {
+  private viewActivatedListener?: () => void;
+
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
@@ -50,6 +54,28 @@ export class BlockGridModel extends GridModel {
     });
   }
 
+  onMount() {
+    super.onMount();
+    if (this.context.view?.inputArgs?.scene !== 'select' || this.viewActivatedListener) {
+      return;
+    }
+
+    this.viewActivatedListener = () => {
+      this.mapSubModels('items', (item) => {
+        (item as FlowModel & { onActive?: () => void }).onActive?.();
+      });
+    };
+    this.flowEngine.emitter.on(VIEW_ACTIVATED_EVENT, this.viewActivatedListener);
+  }
+
+  protected onUnmount() {
+    if (this.viewActivatedListener) {
+      this.flowEngine.emitter.off(VIEW_ACTIVATED_EVENT, this.viewActivatedListener);
+      this.viewActivatedListener = undefined;
+    }
+    super.onUnmount();
+  }
+
   get subModelBaseClasses() {
     const inputArgs = this.context.view?.inputArgs ?? {};
     if (inputArgs.collectionName && !inputArgs.filterByTk) {

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, type ParamObject, tExpr } from '@nocobase/flow-engine';
 import { Icon, type NocoBaseDesktopRoute } from '../../../../flow-compat';
+import type { RouteRepository } from '../../../../RouteRepository';
 import { useRequest } from 'ahooks';
 import _ from 'lodash';
 import React from 'react';
@@ -71,6 +72,25 @@ function isLinkageRulesStepParams(value: unknown): value is LinkageRulesStepPara
   return isRecord(value);
 }
 
+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;
@@ -282,23 +302,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: {
-          ...(this.props.route?.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，拖拽排序会直接依赖它。
@@ -312,6 +345,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',
+      );
+    }
   }
 
   private buildAnchorPayload(latestAnchor: PersistedFlowModelAnchor | undefined, linkageRules: LinkageRulesStepParams) {
@@ -359,8 +406,11 @@ export class RootPageTabModel extends BasePageTabModel {
       throw new Error('Route repository is unavailable while persisting the page tab FlowModel marker.');
     }
 
+    const currentRoute = route.schemaUid
+      ? this.context.routeRepository.getRouteBySchemaUid?.(route.schemaUid)
+      : undefined;
     const nextOptions = {
-      ...(route.options || {}),
+      ...(currentRoute?.options || route.options || {}),
     };
     if (hasRules) {
       nextOptions.hasPersistedPageTabFlowModel = true;