@nocobase/client-v2 2.1.11 → 2.1.12

package/src/flow/models/blocks/js-block/JSBlock.tsx

@@ -16,24 +16,238 @@ import { CodeEditor } from '../../../components/code-editor';
 
 const NAMESPACE = 'client';
 
+const getRootElement = (element: HTMLElement | null) => {
+  if (!element) return document.documentElement;
+  return (
+    (element.closest('.nb-block-grid') as HTMLElement | null) ||
+    (element.closest('.nb-page-wrapper') as HTMLElement | null) ||
+    (element.closest('.nb-page') as HTMLElement | null) ||
+    document.documentElement
+  );
+};
+
+const getOuterHeight = (element?: HTMLElement | null) => {
+  if (!element) return 0;
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const marginTop = parseFloat(style.marginTop) || 0;
+  const marginBottom = parseFloat(style.marginBottom) || 0;
+  return rect.height + marginTop + marginBottom;
+};
+
+const getPadding = (element: HTMLElement | null) => {
+  if (!element || element === document.documentElement) {
+    return { top: 0, bottom: 0 };
+  }
+  const style = window.getComputedStyle(element);
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+  };
+};
+
+const getPageHeader = (root: HTMLElement) => {
+  const page = root.closest('.nb-page') as HTMLElement | null;
+  if (!page) return null;
+  return (
+    (page.querySelector('.ant-page-header') as HTMLElement | null) ||
+    (page.querySelector('.pageHeaderCss') as HTMLElement | null)
+  );
+};
+
+const getAddBlockContainer = (root: HTMLElement) => {
+  const button = root.querySelector('[data-flow-add-block]') as HTMLElement | null;
+  if (!button) return null;
+  return (button.parentElement as HTMLElement | null) || button;
+};
+
+function getValidPageTop(a: number, b: number) {
+  const aValid = a > 0;
+  const bValid = b > 0;
+
+  if (aValid) return a;
+  if (bValid) return b;
+  return 0;
+}
+
+const usePlainHostHeight = ({
+  height,
+  heightMode,
+  hostRef,
+  marginBlock,
+}: {
+  height?: number;
+  heightMode?: string;
+  hostRef: React.RefObject<HTMLDivElement>;
+  marginBlock: number;
+}) => {
+  const [fullHeight, setFullHeight] = React.useState<number>();
+  const updateFullHeight = React.useCallback(() => {
+    if (heightMode !== 'fullHeight' || typeof window === 'undefined') {
+      setFullHeight((prev) => (prev === undefined ? prev : undefined));
+      return;
+    }
+    const hostEl = hostRef.current;
+    if (!hostEl) return;
+    const root = getRootElement(hostEl);
+    const hostRect = hostEl.getBoundingClientRect();
+    const rootRect = root === document.documentElement ? { top: 0 } : root.getBoundingClientRect();
+    const padding = getPadding(root);
+    const addBlockContainer = getAddBlockContainer(root);
+    const pageTop = rootRect.top + padding.top;
+    const topOffset = Math.max(0, hostRect.top - pageTop);
+    let bottomOffset = padding.bottom + marginBlock;
+    if (addBlockContainer) {
+      const gapBetween = marginBlock;
+      bottomOffset = gapBetween + getOuterHeight(addBlockContainer) + padding.bottom;
+    }
+    const nextHeight = Math.max(
+      0,
+      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset - 1),
+    );
+    setFullHeight((prev) => (prev === nextHeight ? prev : nextHeight));
+  }, [heightMode, hostRef, marginBlock]);
+
+  React.useLayoutEffect(() => {
+    updateFullHeight();
+  }, [updateFullHeight]);
+
+  React.useEffect(() => {
+    if (heightMode !== 'fullHeight' || typeof window === 'undefined') return;
+    const hostEl = hostRef.current;
+    if (!hostEl || typeof ResizeObserver === 'undefined') return;
+    const root = getRootElement(hostEl);
+    const pageHeader = getPageHeader(root);
+    const addBlockContainer = getAddBlockContainer(root);
+    const observer = new ResizeObserver(() => updateFullHeight());
+    observer.observe(hostEl);
+    if (root instanceof HTMLElement) {
+      observer.observe(root);
+    }
+    if (pageHeader) observer.observe(pageHeader);
+    if (addBlockContainer) observer.observe(addBlockContainer);
+    window.addEventListener('resize', updateFullHeight);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', updateFullHeight);
+    };
+  }, [heightMode, hostRef, updateFullHeight]);
+
+  if (heightMode === 'specifyValue') {
+    return height;
+  }
+  if (heightMode === 'fullHeight') {
+    return fullHeight;
+  }
+  return null;
+};
+
+const JSBlockPlainHost = ({
+  uid,
+  className,
+  heightMode,
+  height,
+  style,
+  beforeContent,
+  afterContent,
+  contentRef,
+  marginBlock,
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement> & {
+  uid: string;
+  heightMode?: string;
+  height?: number;
+  beforeContent?: React.ReactNode;
+  afterContent?: React.ReactNode;
+  contentRef: React.RefObject<HTMLDivElement>;
+  marginBlock: number;
+}) => {
+  const hostRef = React.useRef<HTMLDivElement | null>(null);
+  const resolvedHeight = usePlainHostHeight({ height, heightMode, hostRef, marginBlock });
+
+  return (
+    <div
+      {...rest}
+      ref={hostRef}
+      id={`model-${uid}`}
+      className={className}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: resolvedHeight ?? undefined,
+        minHeight: 0,
+        overflow: 'auto',
+        ...(style || {}),
+      }}
+    >
+      {beforeContent}
+      <div ref={contentRef} />
+      {afterContent}
+    </div>
+  );
+};
+
 export class JSBlockModel extends BlockModel {
   // Avoid double-run on first mount; only rerun after remounts
   private _mountedOnce = false;
+
+  get showBlockCard() {
+    return this.getStepParams('jsSettings', 'showBlockCard')?.showBlockCard !== false;
+  }
+
   renderComponent(): React.ReactNode {
     return <div ref={this.context.ref} />;
   }
   render() {
     const decoratorProps = this.decoratorProps || {};
-    const { className, id: _ignoredId, title, description, ...rest } = decoratorProps;
+    const {
+      className,
+      id: _ignoredId,
+      title,
+      description,
+      showCard: _ignoredShowCard,
+      heightMode,
+      height,
+      style,
+      beforeContent,
+      afterContent,
+      ...rest
+    } = decoratorProps;
     const mergedClassName = ['code-block', className].filter(Boolean).join(' ');
 
+    if (!this.showBlockCard) {
+      return (
+        <JSBlockPlainHost
+          {...rest}
+          uid={this.uid}
+          className={mergedClassName}
+          heightMode={heightMode}
+          height={height}
+          style={style}
+          beforeContent={beforeContent}
+          afterContent={afterContent}
+          contentRef={this.context.ref}
+          marginBlock={this.context.themeToken?.marginBlock ?? 0}
+        />
+      );
+    }
+
+    const cardProps = {
+      ...rest,
+      height,
+      style,
+      ...(beforeContent === undefined ? {} : { beforeContent }),
+      ...(afterContent === undefined ? {} : { afterContent }),
+    };
+
     return (
       <BlockItemCard
         id={`model-${this.uid}`}
         className={mergedClassName}
         title={title}
         description={description}
-        {...rest}
+        heightMode={heightMode}
+        {...cardProps}
       >
         <div ref={this.context.ref} />
       </BlockItemCard>
@@ -61,6 +275,13 @@ JSBlockModel.registerFlow({
   key: 'jsSettings',
   title: 'JavaScript settings',
   steps: {
+    showBlockCard: {
+      title: tExpr('Show block card'),
+      uiMode: { type: 'switch', key: 'showBlockCard' },
+      defaultParams: {
+        showBlockCard: true,
+      },
+    },
     runJs: {
       title: tExpr('Write JavaScript'),
       useRawParams: true,

package/src/flow/models/blocks/js-block/__tests__/JSBlockModel.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 React from 'react';
+import { App, ConfigProvider } from 'antd';
+import { render } from '@nocobase/test/client';
+import { describe, expect, it, vi } from 'vitest';
+import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
+import { JSBlockModel } from '../JSBlock';
+
+function createJSBlock(uid: string, showBlockCard?: boolean, decoratorProps?: Record<string, unknown>) {
+  const engine = new FlowEngine();
+  engine.registerModels({ JSBlockModel });
+  const model = engine.createModel<JSBlockModel>({
+    use: 'JSBlockModel',
+    uid,
+    stepParams:
+      typeof showBlockCard === 'boolean'
+        ? {
+            jsSettings: {
+              showBlockCard: {
+                showBlockCard,
+              },
+            },
+          }
+        : undefined,
+  });
+  model.setDecoratorProps({
+    className: 'custom-js-block-shell',
+    style: {
+      minHeight: 120,
+    },
+    ...(decoratorProps || {}),
+  });
+  return { engine, model };
+}
+
+function renderBlock(engine: FlowEngine, model: JSBlockModel) {
+  return render(
+    <FlowEngineProvider engine={engine}>
+      <ConfigProvider>
+        <App>{model.render()}</App>
+      </ConfigProvider>
+    </FlowEngineProvider>,
+  );
+}
+
+describe('JSBlockModel', () => {
+  it('renders with the outer block card by default', () => {
+    const { engine, model } = createJSBlock('js-block-with-card');
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-with-card');
+
+    expect(host).toBeTruthy();
+    expect(host?.classList.contains('ant-card')).toBe(true);
+    expect(host?.classList.contains('code-block')).toBe(true);
+    expect(host?.classList.contains('custom-js-block-shell')).toBe(true);
+  });
+
+  it('renders a plain host without the outer card when showBlockCard is false', () => {
+    const { engine, model } = createJSBlock('js-block-without-card', false, {
+      showCard: true,
+    });
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-without-card') as HTMLElement | null;
+
+    expect(container.querySelector('.ant-card')).toBeNull();
+    expect(host).toBeInstanceOf(HTMLDivElement);
+    expect(host?.classList.contains('code-block')).toBe(true);
+    expect(host?.classList.contains('custom-js-block-shell')).toBe(true);
+    expect(host?.style.minHeight).toBe('120px');
+    expect(model.context.ref.current).toBe(host?.firstElementChild);
+  });
+
+  it('keeps cardless specified-height content scrollable inside the plain host', () => {
+    const { engine, model } = createJSBlock('js-block-without-card-height', false, {
+      heightMode: 'specifyValue',
+      height: 80,
+      style: undefined,
+    });
+    const { container } = renderBlock(engine, model);
+    const host = container.querySelector('#model-js-block-without-card-height') as HTMLElement | null;
+    const overflowContent = document.createElement('div');
+    overflowContent.style.height = '200px';
+    model.context.ref.current?.appendChild(overflowContent);
+
+    expect(host?.style.height).toBe('80px');
+    expect(host?.style.minHeight).toBe('0');
+    expect(host?.style.overflow).toBe('auto');
+    expect(model.context.ref.current?.firstElementChild).toBe(overflowContent);
+  });
+
+  it('calculates cardless full-height on the plain host', () => {
+    const originalInnerHeight = window.innerHeight;
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: 500,
+    });
+    const rectSpy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      if ((this as HTMLElement).id === 'model-js-block-without-card-full-height') {
+        return {
+          x: 0,
+          y: 150,
+          top: 150,
+          left: 0,
+          bottom: 150,
+          right: 0,
+          width: 0,
+          height: 0,
+          toJSON: () => ({}),
+        } as DOMRect;
+      }
+      return {
+        x: 0,
+        y: 0,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0,
+        toJSON: () => ({}),
+      } as DOMRect;
+    });
+
+    try {
+      const { engine, model } = createJSBlock('js-block-without-card-full-height', false, {
+        heightMode: 'fullHeight',
+        style: undefined,
+      });
+      const { container } = renderBlock(engine, model);
+      const host = container.querySelector('#model-js-block-without-card-full-height') as HTMLElement | null;
+
+      expect(parseInt(host?.style.height || '0', 10)).toBeGreaterThan(0);
+      expect(host?.style.overflow).toBe('auto');
+    } finally {
+      rectSpy.mockRestore();
+      Object.defineProperty(window, 'innerHeight', {
+        configurable: true,
+        value: originalInnerHeight,
+      });
+    }
+  });
+});

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

@@ -22,6 +22,7 @@ import {
   observer,
 } from '@nocobase/flow-engine';
 import { Skeleton, Tooltip } from 'antd';
+import classNames from 'classnames';
 import React from 'react';
 import { ActionModel } from '../../base/ActionModel';
 import { TableCustomColumnModel } from './TableCustomColumnModel';
@@ -33,6 +34,33 @@ const rowActionButtonTypeOptions = [
   { value: 'link', label: '{{t("Link")}}' },
   { value: 'text', label: '{{t("Text")}}' },
 ];
+export const tableRowActionsClassName = css`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: inherit;
+  > div:empty {
+    display: none;
+  }
+
+  .nb-table-row-action-button.ant-btn-link,
+  .nb-table-row-action-button.ant-btn-text {
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    height: auto;
+    line-height: inherit;
+    padding: 0;
+    border: 0;
+    box-shadow: none;
+    vertical-align: baseline;
+  }
+
+  .nb-table-row-action-button.ant-btn-link > span,
+  .nb-table-row-action-button.ant-btn-text > span {
+    line-height: inherit;
+  }
+`;
 
 const Columns = observer<any>(({ record, model, index }) => {
   const isConfigMode = !!model.context.flowSettingsEnabled;
@@ -42,17 +70,7 @@ const Columns = observer<any>(({ record, model, index }) => {
     <DndProvider>
       <div
         style={{ gap: model.context?.themeToken?.marginSM ?? 16 }}
-        className={css`
-          display: flex;
-          flex-wrap: wrap;
-          align-items: center;
-          > div:empty {
-            display: none;
-          }
-          button {
-            padding: 0;
-          }
-        `}
+        className={`nb-table-row-actions ${tableRowActionsClassName}`}
       >
         {model.mapSubModels('actions', (action: ActionModel) => {
           // Static hidden can be skipped safely; dynamic hidden is handled by fork.beforeRender + model.render wrapper.
@@ -68,7 +86,12 @@ const Columns = observer<any>(({ record, model, index }) => {
             cachedFork.dispose();
           }
 
-          const fork = action.createFork({}, slotKey);
+          const fork = action.createFork(
+            {
+              className: classNames(action.props?.className, 'nb-table-row-action-button'),
+            },
+            slotKey,
+          );
           (fork as any).buttonTypeOptions = rowActionButtonTypeOptions;
           recordIdentityByFork.set(fork, recordIdentity);
 

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

@@ -55,6 +55,7 @@ import {
   useDragSortRowComponent,
   dragSortSettings,
   dragSortBySettings,
+  hasSortField,
 } from './dragSort';
 
 const MemoizedTable = React.memo(Table);
@@ -419,9 +420,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 +477,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"
@@ -1072,11 +1082,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 +1111,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 +1129,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/__tests__/TableActionsColumnModel.test.tsx

@@ -13,7 +13,7 @@ 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[] = [];
@@ -61,6 +61,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 +162,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', () => {