@nocobase/client-v2 2.1.0-beta.23 → 2.1.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.23",
+  "version": "2.1.0-beta.24",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -24,9 +24,9 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/flow-engine": "2.1.0-beta.23",
-    "@nocobase/sdk": "2.1.0-beta.23",
-    "@nocobase/shared": "2.1.0-beta.23",
+    "@nocobase/flow-engine": "2.1.0-beta.24",
+    "@nocobase/sdk": "2.1.0-beta.24",
+    "@nocobase/shared": "2.1.0-beta.24",
     "antd": "5.24.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
@@ -35,5 +35,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "bb4c0d3551bf9eff505b63756dd24a0813231f16"
+  "gitHead": "f77b85530a2d127d9bfe4dca3a26fbb02c1139ba"
 }

package/src/flow/components/Grid/index.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { EMPTY_COLUMN_UID } from '@nocobase/flow-engine';
+import { EMPTY_COLUMN_UID, GridLayoutPath, GridLayoutV2, normalizeGridLayout } from '@nocobase/flow-engine';
 import { Col, Row } from 'antd';
 import React from 'react';
 
@@ -16,37 +16,63 @@ interface DragOverlayRect {
   readonly left: number;
   readonly width: number;
   readonly height: number;
-  readonly type: 'column' | 'column-edge' | 'row-gap' | 'empty-row' | 'empty-column';
+  readonly type: 'column' | 'column-edge' | 'row-gap' | 'empty-row' | 'empty-column' | 'item-edge';
 }
 
 interface GridProps {
-  readonly rows: Record<string, string[][]>;
+  readonly rows?: Record<string, string[][]>;
   readonly sizes?: Record<string, number[]>;
+  readonly layout?: GridLayoutV2;
   readonly renderItem: (uid: string) => React.ReactNode;
   readonly rowGap?: number;
   readonly colGap?: number;
   readonly dragOverlayRect?: DragOverlayRect | null;
 }
 
-export function Grid({ rows, sizes = {}, renderItem, rowGap = 16, colGap = 16, dragOverlayRect }: GridProps) {
-  if (Object.keys(rows || {}).length === 0) {
+export function Grid({
+  rows = {},
+  sizes = {},
+  layout,
+  renderItem,
+  rowGap = 16,
+  colGap = 16,
+  dragOverlayRect,
+}: GridProps) {
+  const normalizedLayout = layout || normalizeGridLayout({ rows, sizes });
+  if (!normalizedLayout.rows.length) {
     return (
-      <div style={{ position: 'relative' }} data-grid-empty-container>
+      <div style={{ position: 'relative' }} data-grid-root data-grid-empty-container>
         {dragOverlayRect && <GridDragOverlay rect={dragOverlayRect} />}
       </div>
     );
   }
 
   return (
-    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: rowGap }}>
+    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: rowGap }} data-grid-root>
       {dragOverlayRect && <GridDragOverlay rect={dragOverlayRect} />}
-      {Object.entries(rows).map(([rowKey, cells]) => {
-        const colCount = cells.length;
-        const rowSizes = sizes[rowKey] || [];
+      <GridRows rows={normalizedLayout.rows} renderItem={renderItem} rowGap={rowGap} colGap={colGap} parentPath={[]} />
+    </div>
+  );
+}
+
+interface GridRowsProps {
+  readonly rows: GridLayoutV2['rows'];
+  readonly renderItem: (uid: string) => React.ReactNode;
+  readonly rowGap: number;
+  readonly colGap: number;
+  readonly parentPath: GridLayoutPath;
+}
+
+function GridRows({ rows, renderItem, rowGap, colGap, parentPath }: GridRowsProps) {
+  return (
+    <>
+      {rows.map((row) => {
+        const colCount = row.cells.length;
+        const rowSizes = row.sizes || [];
         const hasAnySize = rowSizes.some((v) => v != null && v !== undefined);
+        const rowPath = [...parentPath, { rowId: row.id }];
 
-        // 计算每个 cell 的 span
-        const spans = cells.map((_, cellIdx) => {
+        const spans = row.cells.map((_, cellIdx) => {
           if (hasAnySize) {
             const assigned = rowSizes.reduce((sum, v) => sum + (v || 0), 0);
             const unassignedCount = colCount - rowSizes.filter(Boolean).length;
@@ -58,22 +84,24 @@ export function Grid({ rows, sizes = {}, renderItem, rowGap = 16, colGap = 16, d
         });
 
         return (
-          <Row key={rowKey} gutter={colGap} data-grid-row-id={rowKey}>
-            {cells.map((cell, cellIdx) => (
+          <Row key={row.id} gutter={colGap} data-grid-row-id={row.id} data-grid-path={JSON.stringify(rowPath)}>
+            {row.cells.map((cell, cellIdx) => (
               <GridColumn
-                key={`${rowKey}:${cell.join('|') || 'empty'}`}
-                rowKey={rowKey}
+                key={cell.id}
+                rowKey={row.id}
                 columnIndex={cellIdx}
                 span={spans[cellIdx]}
                 rowGap={rowGap}
+                colGap={colGap}
                 cell={cell}
+                path={[...rowPath.slice(0, -1), { rowId: row.id, cellId: cell.id }]}
                 renderItem={renderItem}
               />
             ))}
           </Row>
         );
       })}
-    </div>
+    </>
   );
 }
 
@@ -82,7 +110,9 @@ interface GridColumnProps {
   readonly columnIndex: number;
   readonly span: number;
   readonly rowGap: number;
-  readonly cell: readonly string[];
+  readonly colGap: number;
+  readonly cell: GridLayoutV2['rows'][number]['cells'][number];
+  readonly path: GridLayoutPath;
   readonly renderItem: (uid: string) => React.ReactNode;
 }
 
@@ -91,13 +121,21 @@ const GridColumn = React.memo(function GridColumn({
   columnIndex,
   span,
   rowGap,
+  colGap,
   cell,
+  path,
   renderItem,
 }: GridColumnProps) {
+  const items = cell.items || [];
   return (
-    <Col span={span} data-grid-column-row-id={rowKey} data-grid-column-index={columnIndex}>
+    <Col
+      span={span}
+      data-grid-column-row-id={rowKey}
+      data-grid-column-index={columnIndex}
+      data-grid-path={JSON.stringify(path)}
+    >
       <div style={{ display: 'flex', flexDirection: 'column', gap: rowGap }}>
-        {cell.map((uid, itemIdx) => {
+        {items.map((uid, itemIdx) => {
           if (uid === EMPTY_COLUMN_UID) {
             return null;
           }
@@ -108,11 +146,15 @@ const GridColumn = React.memo(function GridColumn({
               data-grid-column-index={columnIndex}
               data-grid-item-index={itemIdx}
               data-grid-item-uid={uid}
+              data-grid-path={JSON.stringify(path)}
             >
               {renderItem(uid)}
             </div>
           );
         })}
+        {cell.rows?.length ? (
+          <GridRows rows={cell.rows} renderItem={renderItem} rowGap={rowGap} colGap={colGap} parentPath={path} />
+        ) : null}
       </div>
     </Col>
   );
@@ -152,6 +194,10 @@ function GridDragOverlay({ rect }: Readonly<{ rect: DragOverlayRect }>) {
       border: '2px dashed var(--colorPrimary)',
       backgroundColor: 'rgba(22, 119, 255, 0.04)',
     },
+    'item-edge': {
+      border: '2px solid var(--colorPrimary)',
+      backgroundColor: 'rgba(22, 119, 255, 0.12)',
+    },
   };
 
   return <div style={{ ...baseStyle, ...typeStyles[rect.type] }} />;

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

@@ -27,8 +27,8 @@ export class BlockGridModel extends GridModel {
   dragOverlayConfig: DragOverlayConfig = {
     // 列内插入
     columnInsert: {
-      before: { offsetTop: -24 },
-      after: { offsetTop: 24 },
+      before: { offsetTop: -12 },
+      after: { offsetTop: 12 },
     },
     // 列边缘
     columnEdge: {