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

package/src/flow/models/blocks/table/TableBlockModel.tsx

@@ -55,6 +55,7 @@ import {
   useDragSortRowComponent,
   dragSortSettings,
   dragSortBySettings,
+  hasSortField,
 } from './dragSort';
 
 const MemoizedTable = React.memo(Table);
@@ -179,11 +180,21 @@ const AddFieldColumn = ({ model }: { model: TableBlockModel }) => {
       ].filter(Boolean)}
       keepDropdownOpen
     >
-      <FlowSettingsButton icon={<SettingOutlined />}>{model.translate('Fields')}</FlowSettingsButton>
+      {renderTableSettingsButton(model, 'Fields')}
     </AddSubModelButton>
   );
 };
 
+function renderTableSettingsButton(model: TableBlockModel, title: string) {
+  const label = model.translate(title);
+
+  return (
+    <FlowSettingsButton aria-label={label} icon={<SettingOutlined />}>
+      {model.context.isMobileLayout ? null : label}
+    </FlowSettingsButton>
+  );
+}
+
 type CustomTableBlockModelClassesEnum = {
   CollectionActionGroupModel?: string;
   RecordActionGroupModel?: string;
@@ -265,7 +276,7 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
       cols.push({
         key: 'addColumn',
         fixed: 'right',
-        width: 100,
+        ...(this.context.isMobileLayout ? {} : { width: 100 }),
         title: <AddFieldColumn model={this} />,
       } as any);
     }
@@ -419,9 +430,18 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     return nextIndex;
   }
 
+  getDragSortFieldName(): string | undefined {
+    const dragSortBy = this.props.dragSortBy;
+    if (!this.props.dragSort || typeof dragSortBy !== 'string' || !hasSortField(this.collection, dragSortBy)) {
+      return undefined;
+    }
+
+    return dragSortBy;
+  }
+
   getLeftAuxiliaryColumn() {
     const showIndex = this.isShowIndexEnabled();
-    const showDragHandle = this.props.dragSort && this.props.dragSortBy;
+    const showDragHandle = !!this.getDragSortFieldName();
     if (!showIndex && !showDragHandle) {
       return null;
     }
@@ -467,7 +487,7 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
     index = this.getRecordIndex(record, index);
     const rowKey = getRowKey(record, this.collection.filterTargetKey);
     const rowKeyString = rowKey == null ? rowKey : String(rowKey);
-    const showDragHandle = this.props.dragSort && this.props.dragSortBy;
+    const showDragHandle = !!this.getDragSortFieldName();
     return (
       <div
         role="button"
@@ -508,7 +528,7 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
         subModelBaseClass={this.getModelClassName('CollectionActionGroupModel')}
         subModelKey="actions"
       >
-        <FlowSettingsButton icon={<SettingOutlined />}>{this.translate('Actions')}</FlowSettingsButton>
+        {renderTableSettingsButton(this, 'Actions')}
       </AddSubModelButton>
     );
   }
@@ -1072,11 +1092,13 @@ const HighPerformanceTable = React.memo(
       };
     }, [rowKeys]);
 
+    const dragSortFieldName = model.getDragSortFieldName();
+
     // 拖拽相关的 Body Wrapper 组件
-    const BodyWrapperComponent = useDragSortBodyWrapper(model, dataSourceRef, getRowKeyFunc);
+    const BodyWrapperComponent = useDragSortBodyWrapper(model, dataSourceRef, getRowKeyFunc, dragSortFieldName);
 
     // 行组件
-    const RowComponent = useDragSortRowComponent(model.props.dragSort);
+    const RowComponent = useDragSortRowComponent(!!dragSortFieldName);
 
     const components = useMemo(() => {
       return {
@@ -1099,15 +1121,14 @@ const HighPerformanceTable = React.memo(
         }
       `;
 
-      const selectionPaddingClass =
-        model.props.dragSort && model.props.dragSortBy
-          ? css`
-              .ant-table-thead > tr > th.ant-table-selection-column,
-              .ant-table-tbody > tr > td.ant-table-selection-column {
-                padding-left: 32px !important;
-              }
-            `
-          : undefined;
+      const selectionPaddingClass = dragSortFieldName
+        ? css`
+            .ant-table-thead > tr > th.ant-table-selection-column,
+            .ant-table-tbody > tr > td.ant-table-selection-column {
+              padding-left: 32px !important;
+            }
+          `
+        : undefined;
 
       const tableBodyMinHeightClass = tableScroll?.y
         ? css`
@@ -1118,7 +1139,7 @@ const HighPerformanceTable = React.memo(
         : undefined;
 
       return classNames(baseClass, selectionPaddingClass, tableBodyMinHeightClass);
-    }, [model.props.dragSort, model.props.dragSortBy, tableScroll?.y]);
+    }, [dragSortFieldName, tableScroll?.y]);
 
     return (
       <MemoizedTable

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -35,6 +35,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { getRowKey } from './utils';
 import { getSavedAssociationTitleField, getTableColumnSortField } from './sortUtils';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../internal/utils/rebuildFieldSubModel';
+import { getSavedDateTimeFormatParams, resolveDateTimeDisplayProps } from '../../../utils/dateTimeDisplayProps';
 
 export function FieldDeletePlaceholder(props: any) {
   const { t } = useTranslation();
@@ -128,6 +129,15 @@ export const CustomWidth = ({ setOpen, t, handleChange, defaultValue }) => {
   );
 };
 
+const resetDateTimeDisplayProps = {
+  dateOnly: undefined,
+  dateFormat: undefined,
+  format: undefined,
+  picker: undefined,
+  showTime: undefined,
+  timeFormat: undefined,
+};
+
 export class TableColumnModel extends DisplayItemModel {
   // 标记：该类的 render 返回函数， 避免错误的reactive封装
   static renderMode: ModelRenderMode = ModelRenderMode.RenderFunction;
@@ -353,11 +363,22 @@ TableColumnModel.registerFlow({
           return;
         }
         const titleField = getSavedAssociationTitleField(ctx.model);
+        const fieldModel = Array.isArray(ctx.model.subModels.field) ? undefined : ctx.model.subModels.field;
+        const targetCollectionField = collectionField.targetCollection?.getField?.(titleField);
+        const savedDateTimeDisplayProps = getSavedDateTimeFormatParams(fieldModel)
+          ? resolveDateTimeDisplayProps({
+              model: fieldModel,
+              collectionField,
+              titleField,
+              currentProps: ctx.model.props,
+            })
+          : undefined;
         const componentProps =
           collectionField.isAssociationField() && titleField
             ? {
                 ...collectionField.getComponentProps(),
-                ...collectionField.targetCollection?.getField?.(titleField)?.getComponentProps?.(),
+                ...targetCollectionField?.getComponentProps?.(),
+                ...savedDateTimeDisplayProps,
               }
             : collectionField.getComponentProps();
         ctx.model.setProps('title', collectionField.title);
@@ -539,21 +560,33 @@ TableColumnModel.registerFlow({
           typeof binding?.defaultProps === 'function'
             ? binding.defaultProps(ctx, targetCollectionField)
             : binding?.defaultProps;
+        const componentProps = targetCollectionField.getComponentProps?.() || {};
+        const nextFieldProps = {
+          ...(defaultProps || {}),
+          ...componentProps,
+          titleField: params.label,
+        };
+        const nextColumnProps = {
+          ...resetDateTimeDisplayProps,
+          ...nextFieldProps,
+        };
         if (targetUse && targetUse !== currentUse) {
           await rebuildFieldSubModel({
             parentModel: ctx.model as any,
             targetUse,
-            defaultProps,
+            defaultProps: nextFieldProps,
             fieldSettingsInit,
           });
         } else if (fieldModel) {
+          fieldModel.setProps(nextColumnProps);
           fieldModel.setStepParams('fieldSettings', 'init', fieldSettingsInit);
           await fieldModel.dispatchEvent('beforeRender', undefined, { useCache: false });
+          await fieldModel.save();
         }
         if (targetUse) {
           ctx.model.setStepParams('tableColumnSettings', 'model', { use: targetUse });
         }
-        ctx.model.setProps(targetCollectionField.getComponentProps());
+        ctx.model.setProps(nextColumnProps);
       },
       defaultParams: (ctx: any) => {
         const titleField = ctx.model?.context?.collectionField?.targetCollectionTitleFieldName;

package/src/flow/models/blocks/table/__tests__/TableActionsColumnModel.test.tsx

@@ -13,17 +13,22 @@ import { App, ConfigProvider } from 'antd';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { ActionModel } from '../../../base/ActionModel';
-import { TableActionsColumnModel } from '../TableActionsColumnModel';
+import { TableActionsColumnModel, tableRowActionsClassName } from '../TableActionsColumnModel';
 
 const capturedDroppableUids: string[] = [];
 const capturedRendererProps: any[] = [];
 let latestOnDragEnd: ((event: any) => void) | undefined;
 const capturedDndProviders: Array<{ persist: boolean }> = [];
+const capturedAddSubModelButtonProps: any[] = [];
 
 vi.mock('@nocobase/flow-engine', async () => {
   const actual = await vi.importActual<any>('@nocobase/flow-engine');
   return {
     ...actual,
+    AddSubModelButton: (props) => {
+      capturedAddSubModelButtonProps.push(props);
+      return <button data-testid="add-sub-model-button">{props.children}</button>;
+    },
     DndProvider: ({ children, onDragEnd, persist = true, ...restProps }) => {
       const engine = actual.useFlowEngine();
       const handleDragEnd = (event: any) => {
@@ -50,6 +55,17 @@ vi.mock('@nocobase/flow-engine', async () => {
       const ActualFlowModelRenderer = actual.FlowModelRenderer;
       return <ActualFlowModelRenderer {...props} />;
     },
+    FlowsFloatContextMenu: ({ children, extraToolbarItems = [], model }) => {
+      return (
+        <div data-test-flow-context-menu>
+          {children}
+          {extraToolbarItems.map((item) => {
+            const Component = item.component;
+            return <Component key={item.key} model={model} />;
+          })}
+        </div>
+      );
+    },
   };
 });
 
@@ -61,6 +77,10 @@ class TestAlwaysActionModel extends ActionModel {
   defaultProps: any = { type: 'link', title: 'Always' };
 }
 
+class TestTextActionModel extends ActionModel {
+  defaultProps: any = { type: 'text', title: 'Text action' };
+}
+
 // 在 beforeRender 中，根据 inputArgs（即当前行 record）决定是否隐藏按钮
 TestViewActionModel.registerFlow({
   key: 'autoHideByPhone',
@@ -158,6 +178,58 @@ describe('TableActionsColumnModel: hidden action layout', () => {
     expect(wrappers).toHaveLength(0);
     expect(secondUid).toBeTruthy();
   });
+
+  it('renders row link and text actions with compact button styles', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TableActionsColumnModel, TestViewActionModel, TestTextActionModel });
+
+    const actionsCol = engine.createModel<TableActionsColumnModel>({
+      use: 'TableActionsColumnModel',
+      props: { width: 200, title: 'Actions' },
+      subModels: { actions: [{ use: 'TestViewActionModel' }, { use: 'TestTextActionModel' }] },
+    });
+
+    const colProps = actionsCol.getColumnProps();
+    const record = { id: 1, phone: '000000' } as any;
+
+    const { container } = render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{colProps.render?.(undefined, record, 0) as any}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('View')).toBeInTheDocument();
+      expect(screen.getByText('Text action')).toBeInTheDocument();
+    });
+
+    const actions = container.querySelector('.nb-table-row-actions');
+    expect(actions).toBeInTheDocument();
+    expect(actions).toHaveClass(tableRowActionsClassName);
+
+    const linkButton = actions?.querySelector('.ant-btn-link') as HTMLButtonElement;
+    const textButton = actions?.querySelector('.ant-btn-text') as HTMLButtonElement;
+
+    expect(linkButton).toBeInTheDocument();
+    expect(textButton).toBeInTheDocument();
+    expect(linkButton).toHaveClass('nb-table-row-action-button');
+    expect(textButton).toHaveClass('nb-table-row-action-button');
+
+    const actionButtonStyleText = Array.from(document.querySelectorAll('style'))
+      .map((style) => style.textContent || '')
+      .find((styleText) => styleText.includes('.nb-table-row-action-button.ant-btn-link'));
+    expect(actionButtonStyleText).toContain(tableRowActionsClassName);
+    expect(actionButtonStyleText).toContain('font:inherit');
+    expect(actionButtonStyleText).toContain('height:auto');
+    expect(actionButtonStyleText).toContain('line-height:inherit');
+    expect(actionButtonStyleText).toContain('padding:0');
+    expect(actionButtonStyleText).toContain('border:0');
+    expect(actionButtonStyleText).toContain('box-shadow:none');
+    expect(actionButtonStyleText).not.toContain('1.5714285714285714');
+    expect(actionButtonStyleText).not.toContain('!important');
+  });
 });
 
 describe('TableActionsColumnModel: drag integration', () => {
@@ -165,6 +237,7 @@ describe('TableActionsColumnModel: drag integration', () => {
     capturedDroppableUids.length = 0;
     capturedRendererProps.length = 0;
     capturedDndProviders.length = 0;
+    capturedAddSubModelButtonProps.length = 0;
     latestOnDragEnd = undefined;
   });
 
@@ -177,6 +250,7 @@ describe('TableActionsColumnModel: drag integration', () => {
       props: { width: 200, title: 'Actions' },
       subModels: { actions: [{ use: 'TestViewActionModel' }, { use: 'TestViewActionModel' }] },
     });
+    actionsCol.context.defineMethod('getModelClassName', (className: string) => className);
 
     const colProps = actionsCol.getColumnProps();
     const record = { id: 1, phone: '000000' } as any;
@@ -279,4 +353,40 @@ describe('TableActionsColumnModel: drag integration', () => {
 
     expect(moveModelSpy).toHaveBeenCalledWith(firstUid, secondUid, { persist: true });
   });
+
+  it('disables icon-only mode when adding row actions without icons', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ TableActionsColumnModel, TestViewActionModel });
+
+    const actionsCol = engine.createModel<TableActionsColumnModel>({
+      use: 'TableActionsColumnModel',
+      props: { width: 200, title: 'Actions' },
+    });
+    actionsCol.context.defineMethod('getModelClassName', (className: string) => className);
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>{actionsCol.getColumnProps().title as React.ReactNode}</App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const addButtonProps = capturedAddSubModelButtonProps.find(
+      (props) => props.subModelKey === 'actions' && props.subModelBaseClass === 'RecordActionGroupModel',
+    );
+    expect(addButtonProps).toBeDefined();
+    expect(addButtonProps.afterSubModelInit).toBeTypeOf('function');
+
+    const actionModel = {
+      setStepParams: vi.fn(),
+    };
+    await addButtonProps.afterSubModelInit(actionModel);
+
+    expect(actionModel.setStepParams).toHaveBeenCalledWith('buttonSettings', 'general', {
+      type: 'link',
+      icon: null,
+      iconOnly: false,
+    });
+  });
 });

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' },
     ],
   });