@nocobase/client-v2 2.1.0-alpha.4 → 2.1.0-alpha.40

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,129 @@
+/**
+ * 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';
+
+/**
+ * Restore horizontal scrolling on `.ant-table-content` so wide tables in
+ * narrow containers (drawer / settings panel) scroll their inner `<table>`
+ * instead of getting clipped or forcing the outer container to grow.
+ *
+ * `width: max-content` on the inner `<table>` lets columns size to their
+ * natural width; `min-width: 100%` keeps the table filling the viewport
+ * when total column width is smaller than the container.
+ */
+export const tableScrollClassName = css`
+  &.ant-table-wrapper .ant-table-content {
+    overflow: auto hidden;
+  }
+  &.ant-table-wrapper .ant-table-content > table {
+    width: max-content;
+    min-width: 100%;
+  }
+`;
+
+/**
+ * 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

@@ -7,5 +7,12 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+export * from './AppComponents';
 export * from './BlankComponent';
+export * from './form/table/dnd';
+export * from './form';
+export * from './Icon';
+export * from './PoweredBy';
 export * from './RouterContextCleaner';
+export * from './SwitchLanguage';
+export * from './form/table';

package/src/css-variable/CSSVariableProvider.tsx

@@ -0,0 +1,117 @@
+/**
+ * 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 { TinyColor } from '@ctrl/tinycolor';
+import { useEffect } from 'react';
+import { theme } from 'antd';
+import { defaultTheme } from '../theme';
+import type { CustomToken } from '../theme';
+
+interface Result extends ReturnType<typeof theme.useToken> {
+  token: CustomToken;
+}
+
+export const CSSVariableProvider = ({ children }) => {
+  const { token } = theme.useToken() as Result;
+
+  const colorBgScrollTrack = token.colorFillTertiary;
+  const colorBgScrollBar = new TinyColor(token.colorFill).onBackground(token.colorFillSecondary).toHexShortString();
+  const colorBgScrollBarHover = new TinyColor(token.colorFill).onBackground(token.colorFill).toHexShortString();
+  const colorBgScrollBarActive = new TinyColor(token.colorFill)
+    .onBackground(token.colorFill)
+    .onBackground(token.colorFill)
+    .toHexShortString();
+
+  useEffect(() => {
+    document.body.style.setProperty('--nb-spacing', `${token.marginLG}px`);
+    document.body.style.setProperty('--nb-designer-offset', `${token.marginXS}px`);
+    document.body.style.setProperty('--nb-header-height', `${token.sizeXXL - 2}px`);
+    document.body.style.setProperty('--nb-box-bg', token.colorBgLayout);
+    document.body.style.setProperty('--colorBgLayout', token.colorBgLayout);
+    document.body.style.setProperty('--colorBgContainer', token.colorBgContainer);
+    document.body.style.setProperty('--controlHeightLG', `${token.controlHeightLG}px`);
+    document.body.style.setProperty('--paddingContentVerticalSM', `${token.paddingContentVerticalSM}px`);
+    document.body.style.setProperty('--marginSM', `${token.marginSM}px`);
+    document.body.style.setProperty('--colorInfoBg', token.colorInfoBg);
+    document.body.style.setProperty('--colorInfoBorder', token.colorInfoBorder);
+    document.body.style.setProperty('--colorWarningBg', token.colorWarningBg);
+    document.body.style.setProperty('--colorWarningBorder', token.colorWarningBorder);
+    document.body.style.setProperty('--colorText', token.colorText);
+    document.body.style.setProperty('--colorTextDescription', token.colorTextDescription);
+    document.body.style.setProperty('--colorBgTextHover', token.colorBgTextHover);
+    document.body.style.setProperty('--colorSplit', token.colorSplit);
+    document.body.style.setProperty('--borderRadiusOuter', `${token.borderRadiusOuter}px`);
+    document.body.style.setProperty('--colorTextHeaderMenu', token.colorTextHeaderMenu);
+    document.body.style.setProperty('--colorPrimaryText', token.colorPrimaryText);
+    document.body.style.setProperty('--colorPrimaryTextActive', token.colorPrimaryTextActive);
+    document.body.style.setProperty('--colorPrimaryTextHover', token.colorPrimaryTextHover);
+    // 侧边菜单栏相关CSS变量
+    document.body.style.setProperty('--colorBgSider', token.colorBgSider);
+    document.body.style.setProperty('--colorBgSiderMenuHover', token.colorBgSiderMenuHover);
+    document.body.style.setProperty('--colorBgSiderMenuActive', token.colorBgSiderMenuActive);
+    document.body.style.setProperty('--colorTextSiderMenu', token.colorTextSiderMenu);
+    document.body.style.setProperty('--colorTextSiderMenuHover', token.colorTextSiderMenuHover);
+    document.body.style.setProperty('--colorTextSiderMenuActive', token.colorTextSiderMenuActive);
+    document.body.style.setProperty('--colorBgScrollTrack', colorBgScrollTrack);
+    document.body.style.setProperty('--colorBgScrollBar', colorBgScrollBar);
+    document.body.style.setProperty('--colorBgScrollBarHover', colorBgScrollBarHover);
+    document.body.style.setProperty('--colorBgScrollBarActive', colorBgScrollBarActive);
+    document.body.style.setProperty('--colorSettings', token.colorSettings || defaultTheme.token.colorSettings);
+    document.body.style.setProperty('--colorBgSettingsHover', token.colorBgSettingsHover);
+    document.body.style.setProperty('--colorTemplateBgSettingsHover', token.colorTemplateBgSettingsHover);
+    document.body.style.setProperty('--colorBorderSettingsHover', token.colorBorderSettingsHover);
+    document.body.style.setProperty('--colorBgMenuItemSelected', token.colorBgHeaderMenuActive);
+
+    // 设置登录页面的背景色
+    document.body.style.setProperty('background-color', token.colorBgContainer);
+  }, [
+    colorBgScrollBar,
+    colorBgScrollBarActive,
+    colorBgScrollBarHover,
+    colorBgScrollTrack,
+    token.colorBgContainer,
+    token.colorBgLayout,
+    token.colorBgSettingsHover,
+    token.colorTemplateBgSettingsHover,
+    token.colorBorderSettingsHover,
+    token.colorInfoBg,
+    token.colorInfoBorder,
+    token.colorPrimaryText,
+    token.colorPrimaryTextActive,
+    token.colorPrimaryTextHover,
+    token.colorSettings,
+    token.colorBgTextHover,
+    token.colorSplit,
+    token.colorText,
+    token.colorTextDescription,
+    token.colorWarningBg,
+    token.colorWarningBorder,
+    token.borderRadiusOuter,
+    token.controlHeightLG,
+    token.marginLG,
+    token.marginSM,
+    token.marginXS,
+    token.paddingContentVerticalSM,
+    token.sizeXXL,
+    token.colorTextHeaderMenu,
+    token.colorBgSider,
+    token.colorBgSiderMenuHover,
+    token.colorBgSiderMenuActive,
+    token.colorTextSiderMenu,
+    token.colorTextSiderMenuHover,
+    token.colorTextSiderMenuActive,
+    token.colorBgHeaderMenuActive,
+  ]);
+
+  return children;
+};
+
+CSSVariableProvider.displayName = 'CSSVariableProvider';
+
+export default CSSVariableProvider;

package/src/flow/FlowModelRepository.ts

@@ -0,0 +1,222 @@
+/**
+ * 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 { FlowModel, IFlowModelRepository } from '@nocobase/flow-engine';
+import type { BaseApplication } from '../BaseApplication';
+import _ from 'lodash';
+
+export class MockFlowModelRepository implements IFlowModelRepository<FlowModel> {
+  constructor(protected prefix = '') {}
+  get models() {
+    const models = new Map();
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && key.startsWith(`${this.prefix}flow-model:`)) {
+        const data = localStorage.getItem(key);
+        if (data) {
+          const model = JSON.parse(data);
+          models.set(model.uid, model);
+        }
+      }
+    }
+    return models;
+  }
+
+  async findOne(query) {
+    const { uid, parentId } = query;
+    if (uid) {
+      return this.load(uid);
+    } else if (parentId) {
+      return this.loadByParentId(parentId);
+    }
+    return null;
+  }
+
+  async loadByParentId(parentId: string) {
+    for (const model of this.models.values()) {
+      if (model.parentId == parentId) {
+        console.log('Loading model by parentId:', parentId, model);
+        return this.load(model.uid);
+      }
+    }
+    return null;
+  }
+
+  // 从本地存储加载模型数据
+  async load(uid: string) {
+    const data = localStorage.getItem(`${this.prefix}flow-model:${uid}`);
+    if (!data) {
+      console.warn(`Model with uid ${uid} not found in localStorage.`);
+      return null;
+    }
+    const json = JSON.parse(data);
+    for (const model of [...this.models.values()]) {
+      if (model.parentId === uid) {
+        json.subModels = json.subModels || {};
+        if (model.subType === 'array') {
+          json.subModels[model.subKey] = json.subModels[model.subKey] || [];
+          const subModel = await this.load(model.uid);
+          json.subModels[model.subKey].push(subModel);
+        } else if (model.subType === 'object') {
+          const subModel = await this.load(model.uid);
+          if (subModel) {
+            json.subModels[model.subKey] = subModel;
+          }
+        }
+      }
+    }
+    console.log('Loading model:', uid, JSON.stringify(json, null, 2));
+    return json;
+  }
+
+  // 将模型数据保存到本地存储
+  async save(model: FlowModel) {
+    const data = model.serialize();
+    const currentData = _.omit(data, ['subModels', 'flowEngine']);
+    localStorage.setItem(`${this.prefix}flow-model:${model.uid}`, JSON.stringify(currentData));
+    console.log('Saving model:', model.uid, currentData);
+    for (const subModelKey of Object.keys(model.subModels || {})) {
+      const subModelValue = model.subModels[subModelKey];
+      if (!subModelValue) continue;
+      if (Array.isArray(subModelValue)) {
+        for (const subModel of subModelValue) {
+          await this.save(subModel);
+        }
+      } else if (subModelValue instanceof FlowModel) {
+        await this.save(subModelValue);
+      }
+    }
+    return data;
+  }
+
+  // 从本地存储中删除模型数据
+  async destroy(uid: string) {
+    localStorage.removeItem(`${this.prefix}flow-model:${uid}`);
+    return true;
+  }
+
+  async clear() {
+    for (const key of Object.keys(localStorage)) {
+      if (key.startsWith(`${this.prefix}flow-model:`)) {
+        localStorage.removeItem(key);
+      }
+    }
+    return true;
+  }
+
+  async move(sourceId: string, targetId: string, position: 'before' | 'after' = 'after') {
+    // TODO
+  }
+
+  async duplicate(uid: string) {
+    const source = await this.load(uid);
+    if (!source) return null;
+
+    const genUid = () => `dup_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
+
+    const cloneTree = (node: any, newParentUid?: string): any => {
+      const { subModels, flowEngine, ...rest } = node || {};
+      const cloned: any = { ...rest };
+      cloned.uid = genUid();
+      if (newParentUid) cloned.parentId = newParentUid;
+
+      if (subModels && typeof subModels === 'object') {
+        cloned.subModels = {} as Record<string, any>;
+        for (const key of Object.keys(subModels)) {
+          const value = (subModels as any)[key];
+          if (Array.isArray(value)) {
+            cloned.subModels[key] = value.map((child) => cloneTree(child, cloned.uid));
+          } else if (value && typeof value === 'object') {
+            cloned.subModels[key] = cloneTree(value, cloned.uid);
+          }
+        }
+      }
+      return cloned;
+    };
+
+    // 返回深拷贝的模型树（不直接写入本地存储）
+    return cloneTree(source);
+  }
+}
+
+export class FlowModelRepository implements IFlowModelRepository<FlowModel> {
+  constructor(private app: BaseApplication) {}
+
+  private inFlightFindOne = new Map<string, Promise<any>>();
+
+  private buildFindOneKey(query: any) {
+    const uid = query?.uid ?? '';
+    const parentId = query?.parentId ?? '';
+    const subKey = query?.subKey ?? '';
+    return `uid:${uid}|parentId:${parentId}|subKey:${subKey}`;
+  }
+
+  async findOne(query) {
+    const key = this.buildFindOneKey(query);
+    const existing = this.inFlightFindOne.get(key);
+    if (existing) {
+      const data = await existing;
+      return data ? _.cloneDeep(data) : data;
+    }
+
+    const promise = this.app.apiClient
+      .request({
+        url: 'flowModels:findOne',
+        params: _.pick(query, ['uid', 'parentId', 'subKey']),
+      })
+      .then((response) => response.data?.data)
+      .finally(() => {
+        this.inFlightFindOne.delete(key);
+      });
+
+    this.inFlightFindOne.set(key, promise);
+    const data = await promise;
+    return data ? _.cloneDeep(data) : data;
+  }
+
+  async save(model: FlowModel, options?: { onlyStepParams?: boolean }) {
+    const data = model.serialize();
+    if (options?.onlyStepParams) {
+      delete data.subModels;
+    }
+    const response = await this.app.apiClient.request({
+      method: 'POST',
+      url: 'flowModels:save',
+      data,
+    });
+    return response.data?.data;
+  }
+
+  async destroy(uid: string) {
+    await this.app.apiClient.request({
+      method: 'POST',
+      url: 'flowModels:destroy',
+      params: { filterByTk: uid },
+    });
+    return true;
+  }
+
+  async move(sourceId: string, targetId: string, position: 'before' | 'after' = 'after') {
+    const response = await this.app.apiClient.request({
+      method: 'POST',
+      url: 'flowModels:move',
+      params: { sourceId, targetId, position },
+    });
+    return response.data?.data;
+  }
+
+  async duplicate(uid: string) {
+    const response = await this.app.apiClient.request({
+      method: 'POST',
+      url: 'flowModels:duplicate',
+      params: { uid },
+    });
+    return response.data?.data;
+  }
+}