@nocobase/client-v2 2.1.11 → 2.2.0-alpha.2

package/src/flow/models/blocks/table/__tests__/TableBlockModel.dragSort.test.ts

@@ -0,0 +1,127 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import '@nocobase/client';
+import { initDragSortParams } from '../dragSort';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel() {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+      { name: 'sort', type: 'sort', interface: 'sort' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: 'posts-table',
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+describe('TableBlockModel drag sorting settings', () => {
+  it('does not keep a deleted drag sort field in resource sort', () => {
+    const model = createTableModel();
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+    model.collection.fields.delete('sort');
+
+    initDragSortParams(model);
+
+    expect(model.getDragSortFieldName()).toBeUndefined();
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+
+  it('hides the drag handle when the configured sort field was deleted', () => {
+    const model = createTableModel();
+
+    model.setProps('enableRowSelection', false);
+    model.setProps('showIndex', false);
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.collection.fields.delete('sort');
+
+    expect(model.getLeftAuxiliaryColumn()).toBeNull();
+  });
+
+  it('allows clearing the configured drag sort field and restores default sorting', () => {
+    const model = createTableModel();
+    const dragSortByStep = model.getFlow('tableSettings')?.steps?.dragSortBy;
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+
+    const uiMode =
+      typeof dragSortByStep?.uiMode === 'function' ? dragSortByStep.uiMode({ model, t: (key: string) => key }) : null;
+    dragSortByStep?.handler({ model }, { dragSortBy: null });
+
+    expect(uiMode).toMatchObject({
+      type: 'select',
+      key: 'dragSortBy',
+      props: {
+        allowClear: true,
+      },
+    });
+    expect(model.props.dragSortBy).toBeNull();
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+
+  it('ignores a deleted drag sort field submitted by settings', () => {
+    const model = createTableModel();
+    const dragSortByStep = model.getFlow('tableSettings')?.steps?.dragSortBy;
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+    model.collection.fields.delete('sort');
+
+    dragSortByStep?.handler({ model }, { dragSortBy: 'sort' });
+
+    expect(model.props.dragSortBy).toBeNull();
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+
+  it('restores default sorting when drag sorting is disabled', () => {
+    const model = createTableModel();
+    const dragSortStep = model.getFlow('tableSettings')?.steps?.dragSort;
+
+    model.setProps('dragSort', true);
+    model.setProps('dragSortBy', 'sort');
+    model.setProps('globalSort', ['title']);
+    model.resource.setSort(['sort']);
+
+    dragSortStep?.handler({ model }, { dragSort: false });
+
+    expect(model.props.dragSort).toBe(false);
+    expect(model.resource.getSort()).toEqual(['title']);
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableBlockModel.mobileSettingsButtons.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import '@nocobase/client';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { TableBlockModel } from '../TableBlockModel';
+
+function createTableModel(options: { isMobileLayout?: boolean; flowSettingsEnabled?: boolean } = {}) {
+  const engine = new FlowEngine();
+  engine.registerModels({ TableBlockModel });
+  engine.context.defineProperty('isMobileLayout', { value: !!options.isMobileLayout });
+  engine.context.defineProperty('flowSettingsEnabled', { value: !!options.flowSettingsEnabled });
+
+  const ds = engine.dataSourceManager.getDataSource('main');
+  ds.addCollection({
+    name: 'posts',
+    filterTargetKey: 'id',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'number' },
+      { name: 'title', type: 'string', interface: 'input' },
+    ],
+  });
+
+  return engine.createModel<TableBlockModel>({
+    uid: `posts-table-${options.isMobileLayout ? 'mobile' : 'desktop'}`,
+    use: 'TableBlockModel',
+    stepParams: {
+      resourceSettings: {
+        init: {
+          dataSourceKey: 'main',
+          collectionName: 'posts',
+        },
+      },
+    },
+  });
+}
+
+function getSettingsButton(element: React.ReactElement) {
+  return element.props.children as React.ReactElement;
+}
+
+describe('TableBlockModel mobile settings buttons', () => {
+  it('renders table actions and fields settings as icon-only buttons in mobile layouts', () => {
+    const model = createTableModel({ isMobileLayout: true, flowSettingsEnabled: true });
+    const actionButton = getSettingsButton(model.renderConfigureActions() as React.ReactElement);
+    const addColumn = model.getColumns().find((column) => column.key === 'addColumn');
+    const fieldsButton = getSettingsButton(
+      (addColumn?.title as React.ReactElement).type({ model }) as React.ReactElement,
+    );
+
+    expect(actionButton.props.children).toBeNull();
+    expect(actionButton.props['aria-label']).toBe('Actions');
+    expect(fieldsButton.props.children).toBeNull();
+    expect(fieldsButton.props['aria-label']).toBe('Fields');
+    expect(addColumn?.width).toBeUndefined();
+  });
+
+  it('keeps table actions and fields settings labels outside mobile layouts', () => {
+    const model = createTableModel({ flowSettingsEnabled: true });
+    const actionButton = getSettingsButton(model.renderConfigureActions() as React.ReactElement);
+    const addColumn = model.getColumns().find((column) => column.key === 'addColumn');
+    const fieldsButton = getSettingsButton(
+      (addColumn?.title as React.ReactElement).type({ model }) as React.ReactElement,
+    );
+
+    expect(actionButton.props.children).toBe('Actions');
+    expect(fieldsButton.props.children).toBe('Fields');
+    expect(addColumn?.width).toBe(100);
+  });
+});

package/src/flow/models/blocks/table/__tests__/TableBlockModel.rowSelection.test.tsx

@@ -26,6 +26,7 @@ function createTableModel() {
     fields: [
       { name: 'id', type: 'integer', interface: 'number' },
       { name: 'title', type: 'string', interface: 'input' },
+      { name: 'sort', type: 'sort', interface: 'sort' },
     ],
   });
 

package/src/flow/models/blocks/table/dragSort/dragSortHooks.tsx

@@ -19,16 +19,23 @@ export function useDragSortBodyWrapper(
   model: TableBlockModel,
   dataSourceRef: React.MutableRefObject<any>,
   getRowKeyFunc: (record: any) => string | number,
+  dragSortFieldName?: string,
 ) {
+  const expandedRowKeys = model.props.expandedRowKeys;
+  const defaultExpandAllRows = model.props.defaultExpandAllRows;
+  const resource = model.resource;
+  const filterTargetKey = model.collection.filterTargetKey;
+  const message = (model as { ctx?: { message?: { error?: (content: string) => void } } }).ctx?.message;
+
   return useMemo(() => {
-    if (!model.props.dragSort) {
+    if (!dragSortFieldName) {
       return (props) => <tbody {...props} />;
     }
 
     const flattenTreeData = (data: any[]) => {
       const result: any[] = [];
-      const expandedKeys = new Set((model.props.expandedRowKeys || []).map((key) => (key == null ? key : String(key))));
-      const includeAll = !!model.props.defaultExpandAllRows;
+      const expandedKeys = new Set((expandedRowKeys || []).map((key) => (key == null ? key : String(key))));
+      const includeAll = !!defaultExpandAllRows;
 
       const walk = (nodes: any[]) => {
         if (!nodes?.length) return;
@@ -73,22 +80,22 @@ export function useDragSortBodyWrapper(
         }
 
         if (from && to) {
-          model.resource
+          resource
             .runAction('move', {
               method: 'post',
               params: {
-                sourceId: getRowKey(from, model.collection.filterTargetKey),
-                targetId: getRowKey(to, model.collection.filterTargetKey),
-                sortField: model.props.dragSort ? model.props.dragSortBy : undefined,
+                sourceId: getRowKey(from, filterTargetKey),
+                targetId: getRowKey(to, filterTargetKey),
+                sortField: dragSortFieldName,
               },
             })
             .then(() => {
-              model.resource.refresh();
+              resource.refresh();
             })
             .catch((error) => {
               console.error('Move failed:', error);
               // Show a user-facing error message if the message system is available
-              (model as any)?.ctx?.message?.error?.(error?.message || 'Move failed');
+              message?.error?.(error?.message || 'Move failed');
             });
         }
       };
@@ -104,13 +111,14 @@ export function useDragSortBodyWrapper(
       );
     };
   }, [
-    model.props.dragSort,
-    model.props.dragSortBy,
-    model.props.expandedRowKeys,
-    model.props.defaultExpandAllRows,
-    model.resource,
-    model.collection.filterTargetKey,
+    dataSourceRef,
+    defaultExpandAllRows,
+    dragSortFieldName,
+    expandedRowKeys,
+    filterTargetKey,
     getRowKeyFunc,
+    message,
+    resource,
   ]);
 }
 
@@ -124,7 +132,10 @@ export function useDragSortRowComponent(dragSort: boolean) {
 }
 
 export function initDragSortParams(model: TableBlockModel) {
-  if (model.props.dragSort && model.props.dragSortBy) {
-    model.resource.setSort([model.props.dragSortBy]);
+  const dragSortFieldName = model.getDragSortFieldName();
+  if (dragSortFieldName) {
+    model.resource.setSort([dragSortFieldName]);
+  } else if (model.props.dragSort && model.props.dragSortBy) {
+    model.resource.setSort(Array.isArray(model.props.globalSort) ? model.props.globalSort : []);
   }
 }

package/src/flow/models/blocks/table/dragSort/dragSortSettings.ts

@@ -9,7 +9,11 @@
 
 import { tExpr } from '@nocobase/flow-engine';
 import type { TableBlockModel } from '../TableBlockModel';
-import { convertFieldsToOptions, getSortFields } from './dragSortUtils';
+import { convertFieldsToOptions, getSortFields, hasSortField } from './dragSortUtils';
+
+function getFallbackSort(model: TableBlockModel): string[] {
+  return Array.isArray(model.props.globalSort) ? model.props.globalSort : [];
+}
 
 export const dragSortSettings = {
   title: tExpr('Enable drag and drop sorting'),
@@ -17,9 +21,12 @@ export const dragSortSettings = {
   defaultParams: {
     dragSort: false,
   },
-  async handler(ctx, params) {
+  handler(ctx, params) {
     const model = ctx.model as TableBlockModel;
     model.setProps('dragSort', params.dragSort);
+    if (!params.dragSort) {
+      model.resource.setSort(getFallbackSort(model));
+    }
 
     // Note: automatic configuration of the drag sort field has been removed;
     // users now configure `dragSortBy` explicitly via `dragSortBySettings`.
@@ -45,6 +52,7 @@ export const dragSortBySettings = {
       key: 'dragSortBy',
       props: {
         options,
+        allowClear: true,
         placeholder: ctx.t('Select field'),
       },
     };
@@ -54,9 +62,8 @@ export const dragSortBySettings = {
   },
   handler(ctx, params) {
     const model = ctx.model as TableBlockModel;
-    model.setProps('dragSortBy', params.dragSortBy);
-    if (params.dragSortBy) {
-      model.resource.setSort([params.dragSortBy]);
-    }
+    const dragSortBy = hasSortField(model.collection, params.dragSortBy) ? params.dragSortBy : null;
+    model.setProps('dragSortBy', dragSortBy);
+    model.resource.setSort(dragSortBy ? [dragSortBy] : getFallbackSort(model));
   },
 };

package/src/flow/models/blocks/table/dragSort/dragSortUtils.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import type { Collection } from '@nocobase/flow-engine';
+import type { Collection, CollectionField } from '@nocobase/flow-engine';
 
 /**
  * 从 collection 中获取所有 sort 类型的字段
@@ -24,6 +24,19 @@ export function getSortFields(collection: Collection | undefined) {
   });
 }
 
+export function getSortField(
+  collection: Collection | undefined,
+  fieldName?: string | null,
+): CollectionField | undefined {
+  if (!collection || !fieldName) return undefined;
+
+  return getSortFields(collection).find((field) => field.name === fieldName);
+}
+
+export function hasSortField(collection: Collection | undefined, fieldName?: string | null): boolean {
+  return !!getSortField(collection, fieldName);
+}
+
 /**
  * 获取 collection 中第一个可用的 sort 字段
  * @param collection - 集合对象
@@ -39,7 +52,7 @@ export function getFirstSortField(collection: Collection | undefined) {
  * @param fields - 字段数组
  * @returns 选项数组
  */
-export function convertFieldsToOptions(fields: any[]) {
+export function convertFieldsToOptions(fields: CollectionField[]) {
   return fields.map((field) => ({
     label: field?.uiSchema?.title || field?.name,
     value: field?.name,

package/src/flow/models/fields/JSEditableFieldModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ElementProxy, tExpr, createSafeDocument, createSafeWindow, createSafeNavigator } from '@nocobase/flow-engine';
+import { ElementProxy, tExpr } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Input } from 'antd';
 import { FieldModel } from '../base/FieldModel';
@@ -398,16 +398,7 @@ JSEditableFieldModel.registerFlow({
             get: () => isReadOnlyMode(ctx.model),
             cache: false,
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            {
-              window: createSafeWindow({ navigator }),
-              document: createSafeDocument(),
-              navigator,
-            },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/fields/JSFieldModel.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ElementProxy, tExpr, createSafeWindow, createSafeDocument, createSafeNavigator } from '@nocobase/flow-engine';
+import { ElementProxy, tExpr } from '@nocobase/flow-engine';
 import React, { useEffect } from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { resolveRunJsParams } from '../utils/resolveRunJsParams';
@@ -211,12 +211,7 @@ JSFieldModel.registerFlow({
             get: () => ctx.model.props?.value,
             cache: false,
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/fields/JSItemModel.tsx

@@ -7,14 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import {
-  ElementProxy,
-  FormItem,
-  createSafeDocument,
-  createSafeWindow,
-  createSafeNavigator,
-  tExpr,
-} from '@nocobase/flow-engine';
+import { ElementProxy, FormItem, tExpr } from '@nocobase/flow-engine';
 import React from 'react';
 import { CodeEditor } from '../../components/code-editor';
 import { CommonItemModel } from '../base/CommonItemModel';
@@ -150,12 +143,7 @@ ctx.render(<JsItem />);
           ctx.defineProperty('element', {
             get: () => new ElementProxy(element),
           });
-          const navigator = createSafeNavigator();
-          await ctx.runjs(
-            code,
-            { window: createSafeWindow({ navigator }), document: createSafeDocument(), navigator },
-            { version },
-          );
+          await ctx.runjs(code, undefined, { version });
         });
       },
     },

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -14,8 +14,9 @@ import { Button, Dropdown, theme, Tooltip, type ButtonProps, type MenuProps } fr
 import React, { useEffect, useMemo, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { useACLRoleContext } from '../../../acl';
+import type { BaseApplication } from '../../../BaseApplication';
 import type { PluginSettingsPageType } from '../../../PluginSettingsManager';
 import { useApp } from '../../../hooks/useApp';
 import {
@@ -64,6 +65,89 @@ const topbarActionTriggerClassName = css`
   height: 100%;
 `;
 
+type TopbarSettingsAppLike = Pick<BaseApplication<any>, 'router' | 'getPublicPath'>;
+
+const normalizeTopbarPath = (pathname?: string) => {
+  const trimmed = pathname?.trim();
+  if (!trimmed || trimmed === '/') {
+    return '/';
+  }
+  return `/${trimmed.replace(/^\/+/, '')}`;
+};
+
+const normalizeTopbarBasePath = (pathname?: string) => {
+  const normalized = normalizeTopbarPath(pathname).replace(/\/+$/, '');
+  return normalized === '' || normalized === '/' ? '' : normalized;
+};
+
+const getTopbarRouterBasePath = (app: TopbarSettingsAppLike | undefined) => {
+  return app?.router?.getBasename?.() || app?.router?.basename || app?.getPublicPath?.() || '';
+};
+
+const stripTopbarRouterBasePath = (pathname: string, basename?: string) => {
+  const normalizedPath = normalizeTopbarPath(pathname);
+  const normalizedBase = normalizeTopbarBasePath(basename);
+
+  if (!normalizedBase) {
+    return normalizedPath;
+  }
+
+  if (normalizedPath === normalizedBase) {
+    return '/';
+  }
+
+  if (normalizedPath.startsWith(`${normalizedBase}/`)) {
+    return normalizeTopbarPath(normalizedPath.slice(normalizedBase.length));
+  }
+
+  return normalizedPath;
+};
+
+const isAdminRuntimePath = (pathname: string) => {
+  return pathname === '/admin' || pathname.startsWith('/admin/');
+};
+
+const buildTopbarDocumentHref = (targetPath: string, basename?: string) => {
+  const normalizedTarget = normalizeTopbarPath(targetPath);
+  const normalizedBase = normalizeTopbarBasePath(basename);
+
+  if (!normalizedBase || normalizedTarget === normalizedBase || normalizedTarget.startsWith(`${normalizedBase}/`)) {
+    return normalizedTarget;
+  }
+
+  return `${normalizedBase}${normalizedTarget}`;
+};
+
+function TopbarExternalSettingsLabel(props: { title: React.ReactNode; link: string }) {
+  return (
+    <div
+      onClick={() => {
+        window.open(props.link, '_blank', 'noopener,noreferrer');
+      }}
+    >
+      {props.title}
+    </div>
+  );
+}
+
+function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: string }) {
+  const app = useApp();
+  const location = useLocation();
+  const targetPath = props.path || '/admin/settings';
+  const basename = getTopbarRouterBasePath(app);
+  const currentPath = stripTopbarRouterBasePath(location.pathname, basename);
+
+  if (isAdminRuntimePath(currentPath)) {
+    return <Link to={targetPath}>{props.title}</Link>;
+  }
+
+  return (
+    <a href={buildTopbarDocumentHref(targetPath, basename)} target="_blank" rel="noopener noreferrer">
+      {props.title}
+    </a>
+  );
+}
+
 /**
  * 将 settings 顶部菜单转换成右上角 dropdown items。
  *
@@ -112,15 +196,9 @@ export function getTopbarPluginSettingsItems(options: {
       title: targetTitle,
       icon: item.icon,
       label: targetLink ? (
-        <div
-          onClick={() => {
-            window.open(targetLink, '_blank', 'noopener,noreferrer');
-          }}
-        >
-          {targetTitle}
-        </div>
+        <TopbarExternalSettingsLabel title={targetTitle} link={targetLink} />
       ) : (
-        <Link to={targetPath || '/admin/settings'}>{targetTitle}</Link>
+        <TopbarInternalSettingsLabel title={targetTitle} path={targetPath} />
       ),
     };
   });
@@ -131,7 +209,12 @@ export function getTopbarPluginSettingsItems(options: {
     items.push({
       key: pluginManagerSetting.key,
       icon: pluginManagerSetting.icon || <ApiOutlined />,
-      label: <Link to={pluginManagerSetting.path}>{pluginManagerSetting.title || t('Plugin manager')}</Link>,
+      label: (
+        <TopbarInternalSettingsLabel
+          title={pluginManagerSetting.title || t('Plugin manager')}
+          path={pluginManagerSetting.path}
+        />
+      ),
     });
   }
 

package/src/flow/resolveViewParamsToViewList.tsx

@@ -49,12 +49,12 @@ export function resolveViewParamsToViewList(
   return viewItems;
 }
 
-export function updateViewListHidden(viewItems: ViewItem[]) {
+export function updateViewListHidden(viewItems: ViewItem[], isMobileLayout = false) {
   // Calculate hidden values based on view types and positions
   let hasEmbedAfter = false;
   for (let i = viewItems.length - 1; i >= 0; i--) {
     const viewItem = viewItems[i];
-    const viewType = getViewType(viewItem);
+    const viewType = getViewType(viewItem, isMobileLayout);
 
     if (viewType === 'embed' && !hasEmbedAfter) {
       hasEmbedAfter = true;
@@ -65,15 +65,23 @@ export function updateViewListHidden(viewItems: ViewItem[]) {
   }
 }
 
-function getViewType(viewItem: ViewItem): string {
+function getViewType(viewItem: ViewItem, isMobileLayout = false): string {
   if (viewItem.model instanceof RouteModel) {
     return 'embed';
   }
 
+  if (isMobileLayout && viewItem.index > 0) {
+    return 'embed';
+  }
+
   if (!viewItem.model) {
     return 'drawer';
   }
 
+  if (viewItem.params.openViewRouteState?.mode) {
+    return viewItem.params.openViewRouteState.mode;
+  }
+
   const params = viewItem.model.getStepParams('popupSettings', 'openView');
   return params?.mode || 'drawer';
 }