@nocobase/client-v2 2.1.0-beta.33 → 2.1.0-beta.35

package/src/components/form/table/dnd/SortableRow.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 { MenuOutlined } from '@ant-design/icons';
+import { TinyColor } from '@ctrl/tinycolor';
+import { useSortable } from '@dnd-kit/sortable';
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import type { DraggableAttributes } from '@dnd-kit/core';
+import { css } from '@emotion/css';
+import { theme } from 'antd';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+
+type DragSortRowContextValue = {
+  attributes?: DraggableAttributes;
+  listeners?: SyntheticListenerMap;
+  setActivatorNodeRef?: (node: HTMLElement | null) => void;
+};
+
+export const DragSortRowContext = React.createContext<DragSortRowContextValue | null>(null);
+
+const sortHandleClass = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+`;
+
+/**
+ * Activator handle that initiates a row drag. Reads `attributes` / `listeners`
+ * / `setActivatorNodeRef` from the surrounding `DragSortRowContext` provided
+ * by `SortableRow`, so the handle can sit anywhere within the row's cells
+ * (typically a dedicated first column).
+ */
+export const SortHandle: React.FC<{ id?: string | number; style?: React.CSSProperties }> = (props) => {
+  const { id: _id, ...otherProps } = props;
+  const dragSortContext = React.useContext(DragSortRowContext);
+  return (
+    <span
+      ref={dragSortContext?.setActivatorNodeRef}
+      {...dragSortContext?.attributes}
+      {...dragSortContext?.listeners}
+      {...otherProps}
+      className={classNames(sortHandleClass)}
+    >
+      <MenuOutlined />
+    </span>
+  );
+};
+
+/**
+ * Drop-in replacement for antd Table's `<tr>` body row that wires `useSortable`
+ * keyed by the `data-row-key` attribute antd injects. Pass via
+ * `Table.components.body.row` and wrap the `<tbody>` with `DndContext` +
+ * `SortableContext`. The `DragSortRowContext` it provides lets `SortHandle`
+ * be placed anywhere inside the row, not just on the row itself.
+ */
+export const SortableRow: React.FC<{
+  rowIndex?: number;
+  className?: string;
+  [key: string]: any;
+}> = (props) => {
+  const { token }: any = theme.useToken();
+  const id = props['data-row-key']?.toString();
+  const { setNodeRef, setActivatorNodeRef, attributes, listeners, active, over } = useSortable({
+    id,
+  });
+  const { rowIndex, ...others } = props;
+  const isOver = over?.id === id;
+  const classObj = useMemo(() => {
+    const borderColor = new TinyColor(token.colorPrimary).setAlpha(0.6).toHex8String();
+    return {
+      topActiveClass: css`
+        & > td {
+          border-top: 2px solid ${borderColor} !important;
+        }
+      `,
+      bottomActiveClass: css`
+        & > td {
+          border-bottom: 2px solid ${borderColor} !important;
+        }
+      `,
+    };
+  }, [token.colorPrimary]);
+
+  const className =
+    (active?.data.current?.sortable.index ?? -1) > rowIndex ? classObj.topActiveClass : classObj.bottomActiveClass;
+
+  return (
+    <DragSortRowContext.Provider value={{ listeners, attributes, setActivatorNodeRef }}>
+      <tr
+        ref={(node) => {
+          setNodeRef(node);
+        }}
+        {...others}
+        className={classNames(props.className, { [className]: active && isOver })}
+      />
+    </DragSortRowContext.Provider>
+  );
+};

package/src/components/form/table/dnd/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+export * from './SortableRow';

package/src/components/form/table/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+// Public surface of the v2 table primitive. Internal helpers (utils, styles,
+// SelectionCell, RowOverlayPreview, etc.) stay unexported — they're
+// implementation details of `Table` and are not part of the package API.
+export * from './Table';

package/src/components/form/table/styles.ts

@@ -0,0 +1,110 @@
+/**
+ * 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 { css } from '@emotion/css';
+import { SORT_HANDLE_GUTTER } from './constants';
+
+/**
+ * Reserve a `SORT_HANDLE_GUTTER`-wide gap on the left of the rowSelection
+ * column so the handle's `left:0` lands inside a `position:relative` cell.
+ * Padding is mirrored on both the header `<th>` and body `<td>` so the
+ * "select all" checkbox stays vertically aligned with body checkboxes.
+ *
+ * The class is a module-level constant — emotion's hash is stable across
+ * re-renders, so the caller doesn't need a `useMemo` to keep referential
+ * equality.
+ */
+export const selectionGutterClassName = css`
+  .ant-table-thead > tr > th.ant-table-selection-column,
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    padding-left: ${SORT_HANDLE_GUTTER}px !important;
+    position: relative;
+  }
+`;
+
+/**
+ * Index ↔ checkbox hover swap CSS. Both `.nb-table-index` and the antd
+ * checkbox (wrapped in `.nb-origin-node`) are absolutely positioned and
+ * centered inside `.nb-row-selection-cell`, so they share the same anchor
+ * without one displacing the other. `display: none/flex` flips so they never
+ * overlap mid-transition.
+ */
+export const indexSwapClassName = css`
+  .ant-table-tbody > tr > td.ant-table-selection-column {
+    .nb-row-selection-cell {
+      position: relative;
+      display: inline-block;
+      min-width: 22px;
+      min-height: 22px;
+      vertical-align: middle;
+    }
+    .nb-row-selection-cell .nb-table-index,
+    .nb-row-selection-cell .nb-origin-node {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .nb-row-selection-cell .nb-origin-node {
+      display: none;
+    }
+    .nb-row-selection-cell.checked .nb-table-index {
+      display: none;
+    }
+    .nb-row-selection-cell.checked .nb-origin-node {
+      display: flex;
+    }
+  }
+  .ant-table-tbody > tr:hover > td.ant-table-selection-column {
+    .nb-row-selection-cell .nb-table-index {
+      display: none;
+    }
+    .nb-row-selection-cell .nb-origin-node {
+      display: flex;
+    }
+  }
+`;
+
+/**
+ * Self-contained styles for the drag-overlay clone. The runtime
+ * `selectionGutterClassName` + `indexSwapClassName` are scoped to AntdTable's
+ * emotion hash, so they don't reach the cloned `<tr>` injected via
+ * `dangerouslySetInnerHTML`. This class replays the minimal subset that the
+ * clone needs:
+ *   - selection column gutter + `position: relative` so the absolute handle
+ *     lands correctly
+ *   - hide the row index inside the overlay (drag preview shouldn't carry
+ *     a stale ordinal)
+ *   - force the checkbox (`.nb-origin-node`) absolute-centered and visible
+ *     regardless of hover/checked state, so the selection cell isn't empty
+ */
+export const overlayCellStylesClassName = css`
+  .ant-table-cell.ant-table-selection-column {
+    padding-left: ${SORT_HANDLE_GUTTER}px !important;
+    position: relative;
+  }
+  .nb-table-index {
+    display: none !important;
+  }
+  .nb-row-selection-cell {
+    position: relative;
+    display: inline-block;
+    min-width: 22px;
+    min-height: 22px;
+    vertical-align: middle;
+  }
+  .nb-row-selection-cell .nb-origin-node {
+    position: absolute;
+    inset: 0;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+`;

package/src/components/form/table/utils.ts

@@ -0,0 +1,75 @@
+/**
+ * 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 React from 'react';
+
+/**
+ * Same shape as antd Table's `rowKey` prop — either a record key name or a
+ * function. Hoisted here so utilities and `Table.tsx` agree on the contract.
+ */
+export type RowKey<RecordType extends object> =
+  | (keyof RecordType & (string | number))
+  | ((record: RecordType, index?: number) => React.Key);
+
+/**
+ * Read a stable row id off a record. Mirrors antd Table's rowKey resolution
+ * but normalises non-primitive ids to strings so `data-row-key` attributes
+ * and `useSortable({ id })` agree on equality.
+ */
+export function readRowKey<RecordType extends object>(
+  record: RecordType,
+  rowKey: RowKey<RecordType>,
+  index?: number,
+): React.Key | undefined {
+  if (typeof rowKey === 'function') {
+    return rowKey(record, index);
+  }
+  const value = record[rowKey] as unknown;
+  if (value == null) return undefined;
+  return typeof value === 'string' || typeof value === 'number' ? value : String(value);
+}
+
+/**
+ * Pixel-perfect snapshot of a rendered `<tr>` for the drag overlay clone.
+ * Contains everything needed to rebuild a visually identical floating row
+ * without re-running antd's column layout pass.
+ */
+export type RowSnapshot = {
+  /** outerHTML of the source `<tr>`, captured at drag start. */
+  html: string;
+  /** Per-cell pixel widths (in DOM order) so the clone can fix them via `<col>`. */
+  cellWidths: number[];
+  /** Total row width — used as the wrapper width so the clone matches source horizontally. */
+  totalWidth: number;
+  /** Total row height — applied to the clone so cell padding matches the source row exactly. */
+  totalHeight: number;
+};
+
+/**
+ * Snapshot the source `<tr>` so the drag overlay can render a pixel-accurate
+ * floating clone. We can't reliably recompute the layout from `columns` alone
+ * — antd auto-sizes columns at runtime based on content + the surrounding
+ * container — so we read the rendered widths off the DOM at drag start. The
+ * row height is captured too because antd's cell padding rules are scoped to
+ * a selector chain we strip in the clone.
+ */
+export function snapshotSourceRow(rowKey: string): RowSnapshot | null {
+  if (typeof document === 'undefined') return null;
+  // `CSS.escape` is in lib.dom and shipped in every browser we target; the
+  // guard is purely a belt-and-suspenders against exotic test environments
+  // where `window.CSS` may be absent.
+  const cssGlobal: { escape?: (value: string) => string } | undefined =
+    typeof window !== 'undefined' ? window.CSS : undefined;
+  const escaped = cssGlobal?.escape ? cssGlobal.escape(rowKey) : rowKey;
+  const sourceRow = document.querySelector(`tr[data-row-key="${escaped}"]`) as HTMLTableRowElement | null;
+  if (!sourceRow) return null;
+  const cellWidths = Array.from(sourceRow.cells).map((cell) => cell.getBoundingClientRect().width);
+  const rect = sourceRow.getBoundingClientRect();
+  return { html: sourceRow.outerHTML, cellWidths, totalWidth: rect.width, totalHeight: rect.height };
+}

package/src/components/index.ts

@@ -9,6 +9,8 @@
 
 export * from './AppComponents';
 export * from './BlankComponent';
+export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
 export * from './RouterContextCleaner';
+export * from './form/table';

package/src/css-variable/CSSVariableProvider.tsx

@@ -9,8 +9,8 @@
 
 import { TinyColor } from '@ctrl/tinycolor';
 import { useEffect } from 'react';
-import { CustomToken, defaultTheme } from '@nocobase/client-v2';
 import { theme } from 'antd';
+import { type CustomToken, defaultTheme } from '../theme';
 
 interface Result extends ReturnType<typeof theme.useToken> {
   token: CustomToken;

package/src/flow/actions/filterFormDefaultValues.tsx

@@ -122,12 +122,11 @@ const FilterFormDefaultValuesUI = observer(
         rootCollection={getCollectionFromModel(ctx.model)}
         value={value}
         onChange={handleChange}
-        fixedMode="default"
-        showCondition={false}
         showValueEditorWhenNoField
         getValueInputProps={getValueInputProps}
         isTitleFieldCandidate={isTitleFieldCandidate}
         onSyncAssociationTitleField={onSyncAssociationTitleField}
+        enableDateVariableAsConstant
       />
     );
   },

package/src/flow/admin-shell/admin-layout/AdminLayoutMenuModels.tsx

@@ -681,6 +681,7 @@ export class AdminLayoutMenuItemModel extends FlowModel<AdminLayoutMenuItemStruc
 AdminLayoutMenuItemModel.registerFlow({
   key: 'menuCreation',
   title: 'Add menu item',
+  manual: true,
   steps: {
     basic: {
       title: 'Add menu item',
@@ -697,6 +698,7 @@ AdminLayoutMenuItemModel.registerFlow({
 AdminLayoutMenuItemModel.registerFlow({
   key: 'menuSettings',
   title: 'Menu settings',
+  manual: true,
   steps: {
     edit: {
       title: 'Edit',

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.test.ts

@@ -249,4 +249,115 @@ describe('resolveAdminRouteRuntimeTarget', () => {
     expect(toRouterNavigationPath('/nocobase/v2/admin/page-1', '/nocobase/v2')).toBe('/admin/page-1');
     expect(toRouterNavigationPath('/admin/page-1', '/nocobase/v2')).toBe('/admin/page-1');
   });
+
+  describe('v2 sub-app context (router basename contains /apps/<id>/)', () => {
+    const subApp = {
+      getPublicPath: () => '/nocobase/v2/',
+      router: {
+        getBasename: () => '/nocobase/v2/apps/test-app/',
+      },
+    } as any;
+
+    it('should resolve flowPage runtime path under sub-app basename', () => {
+      expect(
+        resolveAdminRouteRuntimeTarget({
+          app: subApp,
+          route: {
+            type: NocoBaseDesktopRouteType.flowPage,
+            schemaUid: 'fp1',
+          },
+        }),
+      ).toEqual({
+        runtimePath: '/nocobase/v2/apps/test-app/admin/fp1',
+        navigationMode: 'spa',
+        isLegacy: false,
+        reason: 'ok',
+      });
+    });
+
+    it('should resolve group DFS to first flowPage under sub-app basename', () => {
+      const route: NocoBaseDesktopRoute = {
+        type: NocoBaseDesktopRouteType.group,
+        children: [
+          {
+            type: NocoBaseDesktopRouteType.tabs,
+            schemaUid: 'tabs-1',
+          },
+          {
+            type: NocoBaseDesktopRouteType.group,
+            children: [
+              {
+                type: NocoBaseDesktopRouteType.page,
+                schemaUid: 'legacy-2',
+              },
+              {
+                type: NocoBaseDesktopRouteType.flowPage,
+                schemaUid: 'nested-fp',
+              },
+            ],
+          },
+        ],
+      };
+
+      expect(resolveAdminRouteRuntimeTarget({ app: subApp, route })).toEqual({
+        runtimePath: '/nocobase/v2/apps/test-app/admin/nested-fp',
+        navigationMode: 'spa',
+        isLegacy: false,
+        reason: 'ok',
+      });
+    });
+
+    it('should strip sub-app basename when converting to router internal path', () => {
+      expect(toRouterNavigationPath('/nocobase/v2/apps/test-app/admin/page-1', '/nocobase/v2/apps/test-app')).toBe(
+        '/admin/page-1',
+      );
+      expect(toRouterNavigationPath('/nocobase/v2/apps/test-app/admin/page-1', '/nocobase/v2/apps/test-app/')).toBe(
+        '/admin/page-1',
+      );
+    });
+  });
+
+  describe('fallback when router basename is missing', () => {
+    it('should fall back to publicPath when router is undefined', () => {
+      const appNoRouter = {
+        getPublicPath: () => '/nocobase/v2/',
+        router: undefined,
+      } as any;
+
+      expect(
+        resolveAdminRouteRuntimeTarget({
+          app: appNoRouter,
+          route: {
+            type: NocoBaseDesktopRouteType.flowPage,
+            schemaUid: 'fp1',
+          },
+        }),
+      ).toMatchObject({
+        runtimePath: '/nocobase/v2/admin/fp1',
+        reason: 'ok',
+      });
+    });
+
+    it('should fall back to publicPath when getBasename returns undefined', () => {
+      const appNoBasename = {
+        getPublicPath: () => '/nocobase/v2/',
+        router: {
+          getBasename: () => undefined,
+        },
+      } as any;
+
+      expect(
+        resolveAdminRouteRuntimeTarget({
+          app: appNoBasename,
+          route: {
+            type: NocoBaseDesktopRouteType.flowPage,
+            schemaUid: 'fp1',
+          },
+        }),
+      ).toMatchObject({
+        runtimePath: '/nocobase/v2/admin/fp1',
+        reason: 'ok',
+      });
+    });
+  });
 });

package/src/flow/admin-shell/admin-layout/resolveAdminRouteRuntimeTarget.ts

@@ -7,6 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { getV2EffectiveBasePath } from '../../../authRedirect';
 import type { BaseApplication } from '../../../BaseApplication';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 
@@ -106,7 +107,7 @@ function joinRootRelativePath(basePath: string, pathname: string) {
 }
 
 function getV2AdminPath(app: ResolveAdminRouteRuntimeTargetOptions['app'], schemaUid: string) {
-  return joinRootRelativePath(app.getPublicPath(), `/admin/${schemaUid}`);
+  return joinRootRelativePath(getV2EffectiveBasePath(app), `/admin/${schemaUid}`);
 }
 
 function appendLocationState(pathname: string, location?: LocationLike) {

package/src/flow/components/TextAreaWithContextSelector.tsx

@@ -20,7 +20,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Input } from 'antd';
 import { css } from '@emotion/css';
 import type { TextAreaRef } from 'antd/es/input/TextArea';
-import { FlowContextSelector, useFlowContext } from '@nocobase/flow-engine';
+import { FlowContextSelector, useFlowContext, type MetaTreeNode } from '@nocobase/flow-engine';
 
 export interface TextAreaWithContextSelectorProps {
   value?: string;
@@ -29,6 +29,20 @@ export interface TextAreaWithContextSelectorProps {
   rows?: number;
   maxRows?: number;
   style?: React.CSSProperties;
+  disabled?: boolean;
+  /**
+   * Custom meta tree for the variable picker. Accepts an array, a sync getter,
+   * or an async getter — same shape as `FlowContextSelector`'s `metaTree`. If
+   * omitted, the full `ctx.getPropertyMetaTree()` is used (legacy default).
+   */
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  /**
+   * Format a picked meta node into the string inserted at the caret. When
+   * omitted, the FlowContextSelector default (`{{ ctx.X.Y }}`) is used.
+   * Override to match a different storage convention — e.g. NocoBase server
+   * templates use `{{$X.Y}}` without the `ctx.` prefix.
+   */
+  formatPathToValue?: (meta: MetaTreeNode) => string;
 }
 
 /**
@@ -41,6 +55,9 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
   rows = 3,
   maxRows = 24,
   style,
+  disabled,
+  metaTree,
+  formatPathToValue,
 }) => {
   const flowCtx = useFlowContext();
   const [innerValue, setInnerValue] = useState<string>(value || '');
@@ -76,10 +93,11 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
       const next = prev.slice(0, start) + toInsert + prev.slice(end);
       setInnerValue(next);
       onChange?.(next);
-      // 恢复光标位置并聚焦
+      // 插入后选中刚插入的变量文本，与 v1 RawTextArea 行为一致：
+      // 用户可立即按删除键移除整段变量，或继续输入直接替换。
       requestAnimationFrame(() => {
         const pos = start + (toInsert?.length || 0);
-        el.setSelectionRange(pos, pos);
+        el.setSelectionRange(start, pos);
         el.focus();
       });
     },
@@ -94,8 +112,8 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
     [insertAtCaret],
   );
 
-  // 使用函数形式提供变量树，保证与运行时上下文一致
-  const metaTree = useMemo(() => () => flowCtx.getPropertyMetaTree?.(), [flowCtx]);
+  // 使用函数形式提供变量树，保证与运行时上下文一致；当外部传入则尊重外部值。
+  const resolvedMetaTree = useMemo(() => metaTree ?? (() => flowCtx.getPropertyMetaTree?.()), [flowCtx, metaTree]);
 
   return (
     <div style={{ position: 'relative', width: '100%', ...style }}>
@@ -105,6 +123,7 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
         onChange={handleTextChange}
         autoSize={{ minRows: rows, maxRows }}
         placeholder={placeholder}
+        disabled={disabled}
         style={{ width: '100%' }}
       />
       <div
@@ -116,7 +135,12 @@ export const TextAreaWithContextSelector: React.FC<TextAreaWithContextSelectorPr
           lineHeight: 0,
         }}
       >
-        <FlowContextSelector metaTree={metaTree} onChange={(val) => handleVariableSelected(val)}>
+        <FlowContextSelector
+          metaTree={resolvedMetaTree}
+          disabled={disabled}
+          formatPathToValue={formatPathToValue}
+          onChange={(val) => handleVariableSelected(val)}
+        >
           <Button
             type="default"
             style={{ fontStyle: 'italic', fontFamily: 'New York, Times New Roman, Times, serif' }}