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

package/src/components/form/filter/useFilterActionProps.ts

@@ -0,0 +1,200 @@
+/**
+ * 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 { Collection, observable } from '@nocobase/flow-engine';
+import { useMemoizedFn } from 'ahooks';
+import { useMemo, useRef } from 'react';
+import { FilterOption, useFilterOptions, UseFilterOptionsArgs } from '../../../flow/components/filter/useFilterOptions';
+import { CollectionFilterItemValue, createCollectionFilterItem } from './CollectionFilterItem';
+
+/** A single condition row (`{ path, operator, value }`) or a nested group. */
+export type FilterGroupItem = CollectionFilterItemValue | FilterGroupValue;
+
+/**
+ * Reactive shape consumed by `FilterContainer` / `FilterGroup`. `logic` is the join (`$and` / `$or`) and `items` is a heterogeneous list of leaf conditions and nested groups.
+ */
+export type FilterGroupValue = {
+  logic: '$and' | '$or';
+  items: FilterGroupItem[];
+};
+
+/** Compiled filter param accepted by NocoBase resource `list`. */
+export type CompiledFilter = Record<string, unknown> | undefined;
+
+interface FilterCtxModel {
+  translate: (key: string) => string;
+  dispatchEvent: (event: 'submit' | 'reset' | (string & {})) => void;
+}
+
+export interface FilterCtx {
+  model: FilterCtxModel;
+}
+
+const isGroup = (item: FilterGroupItem): item is FilterGroupValue =>
+  Array.isArray((item as FilterGroupValue).items) && typeof (item as FilterGroupValue).logic === 'string';
+
+const isCondition = (item: FilterGroupItem): item is CollectionFilterItemValue =>
+  typeof (item as CollectionFilterItemValue).path === 'string' &&
+  Object.prototype.hasOwnProperty.call(item, 'operator');
+
+/**
+ * `true` when the rhs of a condition is "no real value yet" — covers `undefined` / `null` / empty string / empty array / empty plain object. Mirrors v1's `removeNullCondition` `isEmpty` predicate so half-filled rows ("Locked time → is → (no date picked yet)") get dropped on Submit instead of being sent to the server as `{lockedTs:{}}` and triggering a 500.
+ */
+const isEmptyFilterValue = (value: unknown): boolean => {
+  if (value === undefined || value === null || value === '') return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') {
+    // Plain `{}` only — descriptor shapes like `{ type: 'today' }` have own keys and survive this check.
+    return Object.keys(value as Record<string, unknown>).length === 0;
+  }
+  return false;
+};
+
+/**
+ * Build a nested object from a dotted path. `'user.createdBy.password'` + `{ $includes: '123' }` becomes `{ user: { createdBy: { password: { $includes: '123' } } } }`. Matches v1's filter payload shape so server-side filter resolution sees the same association chain whether the request came from a v1 or v2 page.
+ */
+const nestPath = (path: string, leaf: unknown): Record<string, unknown> => {
+  const segments = path.split('.');
+  let result: unknown = leaf;
+  for (let i = segments.length - 1; i >= 0; i--) {
+    result = { [segments[i]]: result };
+  }
+  return result as Record<string, unknown>;
+};
+
+/**
+ * Compile a reactive filter group into the `{ $and: [{ path: { op: val } }] }` envelope accepted by NocoBase's resource `list` filter param. Returns `undefined` when the group is empty so callers can drop the param.
+ *
+ * Mirrors v1's `removeNullCondition` + filter compile path, but works on the v2 `{ logic, items }` group structure rather than v1's Formily-bracketed `$and.0.path.$eq` shape:
+ *
+ * - Rows missing `path` or `operator` are dropped (still mid-edit).
+ * - Rows whose `value` is empty (`undefined`, `''`, `[]`, `{}`) are dropped — matches v1, which sends `filter={}` for a row with only a field/operator picked. Sending `{lockedTs:{}}` would 500.
+ * - Dotted association paths (`user.createdBy.password`) are expanded into nested objects — matches v1's payload shape, which the server resolves along the association chain rather than treating the dotted string as a single key.
+ * - Empty groups (after pruning) propagate as `undefined` so the outermost caller can drop the whole `filter` param.
+ */
+export function compileFilterGroup(group: FilterGroupValue | undefined): CompiledFilter {
+  if (!group?.items?.length) return undefined;
+  const compiled = group.items
+    .map((entry) => {
+      if (isGroup(entry)) return compileFilterGroup(entry);
+      if (!isCondition(entry) || !entry.path || !entry.operator) return undefined;
+      if (isEmptyFilterValue(entry.value)) return undefined;
+      return nestPath(entry.path, { [entry.operator]: entry.value });
+    })
+    .filter((v): v is Record<string, unknown> => !!v);
+  if (!compiled.length) return undefined;
+  return { [group.logic]: compiled };
+}
+
+const createEmptyGroup = (): FilterGroupValue => ({ logic: '$and', items: [] });
+
+/** Which footer button triggered the apply — useful for closing a popover on Submit but keeping it open on Reset. */
+export type FilterApplyAction = 'submit' | 'reset';
+
+export interface UseFilterActionPropsArgs extends UseFilterOptionsArgs {
+  /** Collection whose fields populate the filter row's field picker. */
+  collection: Collection | undefined;
+  /**
+   * Called when the user submits or resets the filter popover. Receives the compiled filter param (`undefined` when cleared) and which footer button triggered the call. Typical implementation: `(filter, action) => { listRequest.run(filter); if (action === 'submit') closePopover(); }`.
+   */
+  onApply: (filter: CompiledFilter, action: FilterApplyAction) => void;
+}
+
+export interface UseFilterActionPropsResult {
+  /**
+   * Reactive filter group state. Pass directly to `<FilterContent value={...}>`. Stable across renders.
+   */
+  value: FilterGroupValue;
+  /** Field-option tree (for inspection or custom badges). */
+  options: FilterOption[];
+  /** Bound `FilterItem` component to plug into `<FilterContent FilterItem={...}>`. */
+  FilterItem: ReturnType<typeof createCollectionFilterItem> | undefined;
+  /**
+   * Ready-to-use `ctx` for `<FilterContent ctx={...}>`. Wires Submit / Reset buttons to `onSubmit` / `onReset` below.
+   */
+  ctx: FilterCtx;
+  /** Imperative trigger — submit current group as a compiled filter. */
+  onSubmit: () => void;
+  /** Imperative trigger — clear the group and emit an empty filter. */
+  onReset: () => void;
+  /**
+   * Count of top-level condition rows. Useful for showing a badge like `Filter (3)` on the trigger button — matches v1's `field.title = t('{{count}} filter items', { count })`.
+   */
+  conditionCount: number;
+}
+
+/**
+ * v2 equivalent of v1's `useFilterActionProps` for non-schema surfaces (settings pages, panels, side drawers). Bundles three things v1's hook returned implicitly through schema:
+ *
+ * - A reactive `{ logic, items }` group state that `<FilterContent>` reads.
+ * - A bound `FilterItem` component (driven by `createCollectionFilterItem`).
+ * - A `ctx` object that turns `<FilterContent>`'s `dispatchEvent('submit' | 'reset')` into a compiled filter param passed to `onApply`.
+ *
+ * Pair with antd `Popover` to recreate the legacy `Filter.Action` UX:
+ *
+ * ```tsx
+ * const { value, ctx, FilterItem, onSubmit, conditionCount } = useFilterActionProps({
+ *   collection,
+ *   onApply: (filter) => listRequest.run(filter),
+ *   t,
+ * });
+ * return (
+ *   <Popover content={<FilterContent value={value} ctx={ctx} FilterItem={FilterItem} />}>
+ *     <Button>{t('Filter')}{conditionCount ? ` (${conditionCount})` : ''}</Button>
+ *   </Popover>
+ * );
+ * ```
+ */
+export function useFilterActionProps(args: UseFilterActionPropsArgs): UseFilterActionPropsResult {
+  const { collection, onApply, filterableFieldNames, noIgnore, t } = args;
+
+  // Held in a ref so the group object identity is stable for the lifetime of the host component — `<FilterContent>` mutates this object directly (push/splice on `items`, swap `logic`), and a fresh observable on every render would reset that internal state.
+  const valueRef = useRef<FilterGroupValue>();
+  if (!valueRef.current) {
+    valueRef.current = observable(createEmptyGroup()) as FilterGroupValue;
+  }
+  const value = valueRef.current;
+
+  const options = useFilterOptions(collection, { filterableFieldNames, noIgnore, t });
+
+  const FilterItem = useMemo(
+    () => (collection ? createCollectionFilterItem(collection, { filterableFieldNames, noIgnore, t }) : undefined),
+    [collection, filterableFieldNames, noIgnore, t],
+  );
+
+  const onSubmit = useMemoizedFn(() => {
+    onApply(compileFilterGroup(value), 'submit');
+  });
+
+  const onReset = useMemoizedFn(() => {
+    value.logic = '$and';
+    value.items = [];
+    onApply(undefined, 'reset');
+  });
+
+  const translate = useMemoizedFn((key: string) => (t ? t(key) : key));
+
+  const ctx = useMemo<FilterCtx>(
+    () => ({
+      model: {
+        translate,
+        dispatchEvent: (event: string) => {
+          if (event === 'submit') onSubmit();
+          else if (event === 'reset') onReset();
+        },
+      },
+    }),
+    [translate, onSubmit, onReset],
+  );
+
+  // Re-read on each render so `observer`-wrapped hosts re-render when the reactive `items` array length changes. No useMemo needed — the `value` object's identity is stable (held in a ref), but its observable `items.length` is what we actually care about, and the eslint exhaustive-deps rule rightly complains about depending on a mutable property of a stable ref.
+  const conditionCount = value.items.length;
+
+  return { value, options, FilterItem, ctx, onSubmit, onReset, conditionCount };
+}

package/src/components/form/index.tsx

@@ -8,8 +8,12 @@
  */
 
 export * from './createFormRegistry';
+export * from './filter';
+export * from './DialogFormLayout';
 export * from './DrawerFormLayout';
 export * from './EnvVariableInput';
 export * from './FileSizeInput';
 export * from './JsonTextArea';
+export * from './PasswordInput';
+export * from './RemoteSelect';
 export * from './VariableInput';

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

@@ -19,7 +19,7 @@ import React, { useMemo, useState } from 'react';
 import { SortableRow, SortHandle } from './dnd/SortableRow';
 import { RowOverlayPreview } from './RowOverlayPreview';
 import { SelectionCell } from './SelectionCell';
-import { indexSwapClassName, selectionGutterClassName } from './styles';
+import { indexSwapClassName, selectionGutterClassName, tableScrollClassName } from './styles';
 import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './utils';
 
 type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
@@ -227,6 +227,7 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
 
   const tableClassName = cx(
     className,
+    tableScrollClassName,
     showHandleInSelection && selectionGutterClassName,
     showIndex && rowSelection && indexSwapClassName,
   );

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

@@ -10,6 +10,25 @@
 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.

package/src/components/index.ts

@@ -12,5 +12,7 @@ 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

@@ -10,7 +10,8 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import { useEffect } from 'react';
 import { theme } from 'antd';
-import { type CustomToken, defaultTheme } from '../theme';
+import { defaultTheme } from '../theme';
+import type { CustomToken } from '../theme';
 
 interface Result extends ReturnType<typeof theme.useToken> {
   token: CustomToken;
@@ -42,6 +43,10 @@ export const CSSVariableProvider = ({ children }) => {
     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);
@@ -81,9 +86,13 @@ export const CSSVariableProvider = ({ children }) => {
     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,

package/src/data-source/ExtendCollectionsProvider.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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 { CollectionOptions } from '@nocobase/flow-engine';
+import React, { FC, ReactNode, useEffect, useRef } from 'react';
+import { useApp } from '../hooks';
+
+export interface ExtendCollectionsProviderProps {
+  /** Data source key to extend. Defaults to `'main'`. */
+  dataSource?: string;
+  /** Collections to surface for the lifetime of this provider's subtree. */
+  collections: CollectionOptions[];
+  children?: ReactNode;
+}
+
+/**
+ * Mount-scoped collection injector. Adds the given `collections` to the target data source on mount and removes them on unmount. Survives mid-session reloads via `dataSource:loaded` events.
+ *
+ * Use this for client-only collections — e.g. a `schema-only` server collection that isn't auto-published to the v2 data source, or a pure UI-side mirror — so downstream components (like `<CollectionFilter>`) can resolve the collection by name.
+ */
+export const ExtendCollectionsProvider: FC<ExtendCollectionsProviderProps> = ({
+  dataSource = 'main',
+  collections,
+  children,
+}) => {
+  const app = useApp();
+  const ownedRef = useRef<Set<string>>(new Set());
+
+  const apply = () => {
+    const ds = app.dataSourceManager?.getDataSource?.(dataSource);
+    if (!ds) return;
+    for (const collection of collections) {
+      if (ds.getCollection?.(collection.name)) continue;
+      ds.addCollection?.(collection);
+      ownedRef.current.add(collection.name);
+    }
+  };
+
+  apply();
+
+  useEffect(() => {
+    const onLoaded = (event: Event) => {
+      const key = (event as CustomEvent<{ dataSourceKey: string }>).detail?.dataSourceKey;
+      if (key === dataSource || key === '*') apply();
+    };
+    app.eventBus?.addEventListener('dataSource:loaded', onLoaded);
+
+    return () => {
+      app.eventBus?.removeEventListener('dataSource:loaded', onLoaded);
+      const ds = app.dataSourceManager?.getDataSource?.(dataSource);
+      const owned = ownedRef.current;
+      ownedRef.current = new Set();
+      if (!ds) return;
+      for (const name of owned) {
+        ds.removeCollection?.(name);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [app, dataSource, collections]);
+
+  return <>{children}</>;
+};
+
+export default ExtendCollectionsProvider;

package/src/data-source/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 './ExtendCollectionsProvider';

package/src/flow/actions/__tests__/dataScopeFormValueClear.test.ts

@@ -0,0 +1,96 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { EventEmitter } from 'events';
+import { ensureFormValueDrivenDataScopeClear } from '../../utils/dataScopeFormValueClear';
+
+describe('ensureFormValueDrivenDataScopeClear', () => {
+  it('clears field value when referenced formValues dependency changes', () => {
+    const emitter = new EventEmitter();
+    const formBlock = {
+      uid: 'form-1',
+      disposed: false,
+      emitter,
+      context: { form: {} },
+    };
+
+    const onChange = vi.fn();
+    const model: any = {
+      disposed: false,
+      props: {
+        value: { id: 1 },
+        onChange,
+      },
+      context: {
+        blockModel: formBlock,
+      },
+    };
+
+    const ctx: any = {
+      model,
+      flowKey: 'selectSettings',
+    };
+
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'schoolId', operator: '$eq', value: '{{ ctx.formValues.school.id }}' }],
+    };
+
+    ensureFormValueDrivenDataScopeClear(ctx, filter);
+
+    emitter.emit('formValuesChange', {
+      changedValues: { school: { id: 2 } },
+      allValues: { school: { id: 2 }, class: { id: 1 } },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('does not clear when dependency did not change', () => {
+    const emitter = new EventEmitter();
+    const formBlock = {
+      uid: 'form-1',
+      disposed: false,
+      emitter,
+      context: { form: {} },
+    };
+
+    const onChange = vi.fn();
+    const model: any = {
+      disposed: false,
+      props: {
+        value: { id: 1 },
+        onChange,
+      },
+      context: {
+        blockModel: formBlock,
+      },
+    };
+
+    const ctx: any = {
+      model,
+      flowKey: 'selectSettings',
+    };
+
+    const filter = {
+      logic: '$and',
+      items: [{ path: 'schoolId', operator: '$eq', value: '{{ ctx.formValues.school.id }}' }],
+    };
+
+    ensureFormValueDrivenDataScopeClear(ctx, filter);
+
+    emitter.emit('formValuesChange', {
+      changedValues: { class: null },
+      allValues: { school: { id: 2 }, class: null },
+    });
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/flow/actions/dataScope.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import { FilterGroup, VariableFilterItem } from '../components/filter';
 import { FieldModel } from '../models/base/FieldModel';
 import { normalizeDataScopeFilter } from './dataScopeFilter';
+import { ensureFormValueDrivenDataScopeClear } from '../utils/dataScopeFormValueClear';
 
 export const dataScope = defineAction({
   name: 'dataScope',
@@ -54,6 +55,8 @@ export const dataScope = defineAction({
     const resolvedFilter = await ctx.resolveJsonTemplate(params.filter);
     const filter = normalizeDataScopeFilter(params.filter, resolvedFilter);
 
+    ensureFormValueDrivenDataScopeClear(ctx as any, params.filter);
+
     if (isEmptyFilter(filter)) {
       resource.removeFilterGroup(ctx.model.uid);
     } else {

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

@@ -371,15 +371,12 @@ export const AdminLayoutComponent = observer((props: any) => {
   const [allAccessRoutes, setAllAccessRoutes] = useState<NocoBaseDesktopRoute[]>(
     () => flowEngine.context.routeRepository?.listAccessible?.() || [],
   );
-  const screens = Grid.useBreakpoint();
-  const isMobileViewport =
-    screens.md === false || (screens.md === undefined && typeof window !== 'undefined' && window.innerWidth < 768);
   const location = useLocation();
   const { token } = antdTheme.useToken();
   const customToken = token as CustomToken;
   const isMobileLayout = !!adminLayoutModel?.isMobileLayout;
   const menuRouteRefreshVersion = adminLayoutModel?.menuRouteRefreshVersion || 0;
-  const isMobileSider = isMobileLayout || isMobileViewport;
+  const isMobileSider = isMobileLayout;
   const [collapsed, setCollapsed] = useState(isMobileSider);
   const [preferredFlowSettingsEnabled, setPreferredFlowSettingsEnabled] = useState(() => readFlowSettingsPreference());
   const [route, setRoute] = useState<{ path: string; children: AdminLayoutMenuNode[] }>({

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

@@ -9,45 +9,19 @@
 
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
-import { observer, useFlowEngine } from '@nocobase/flow-engine';
+import { observer } from '@nocobase/flow-engine';
 import { parseHTML } from '@nocobase/utils/client';
 import { Dropdown, Menu, Popover, theme as antdTheme } from 'antd';
 import type { MenuItemType, MenuDividerType } from 'antd/es/menu/interface';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePlugin } from '../../../flow-compat';
+import { useCurrentAppInfo } from '../../../hooks';
 import type { CustomToken } from '../../../theme';
+import { getAppVersionHTML } from '../../../utils';
 
 type SettingsMenuItemType = MenuItemType | MenuDividerType;
 
-/**
- * 读取当前应用信息，避免继续依赖旧的 CurrentAppInfoProvider。
- */
-function useCurrentAppInfoLite() {
-  const flowEngine = useFlowEngine();
-  const [data, setData] = useState<any>();
-
-  useEffect(() => {
-    let active = true;
-
-    Promise.resolve(flowEngine.context.appInfo)
-      .then((info) => {
-        if (active) {
-          setData(info);
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [flowEngine]);
-
-  return data;
-}
-
 const helpClassName = css`
   display: inline-block;
   vertical-align: top;
@@ -60,7 +34,7 @@ const helpClassName = css`
 
 const SettingsMenu: React.FC = () => {
   const { t } = useTranslation();
-  const appInfo = useCurrentAppInfoLite();
+  const appInfo = useCurrentAppInfo();
   const { token } = antdTheme.useToken();
   const isSimplifiedChinese = appInfo?.lang === 'zh-CN';
 
@@ -136,7 +110,7 @@ export const HelpLite = observer(
     const { token } = antdTheme.useToken();
     const customToken = token as CustomToken;
     const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand');
-    const appInfo = useCurrentAppInfoLite();
+    const appInfo = useCurrentAppInfo();
 
     const icon = (
       <span
@@ -156,7 +130,7 @@ export const HelpLite = observer(
     );
 
     if (customBrandPlugin?.options?.options?.about) {
-      const appVersion = `<span class="nb-app-version">v${appInfo?.version}</span>`;
+      const appVersion = getAppVersionHTML(appInfo?.version);
       const content = parseHTML(customBrandPlugin.options.options.about, { appVersion });
 
       return (

package/src/flow/components/BlockItemCard.tsx

@@ -91,7 +91,7 @@ const useBlockHeight = ({
     const padding = getPadding(root);
     const addBlockContainer = getAddBlockContainer(root);
     const pageTop = rootRect.top + padding.top;
-    const topOffset = Math.min(Math.max(0, cardRect.top - pageTop), 0);
+    const topOffset = Math.max(0, cardRect.top - pageTop);
     let bottomOffset = padding.bottom + ctx.themeToken.marginBlock;
     if (addBlockContainer) {
       const gapBetween = ctx.themeToken.marginBlock;
@@ -99,7 +99,7 @@ const useBlockHeight = ({
     }
     const nextHeight = Math.max(
       0,
-      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset),
+      Math.floor(window.innerHeight - getValidPageTop(pageTop, 110) - topOffset - bottomOffset - 1),
     );
     setFullHeight((prev) => (prev === nextHeight ? prev : nextHeight));
   }, [heightMode, cardRef]);

package/src/flow/components/filter/index.ts

@@ -15,3 +15,6 @@ export { VariableFilterItem } from './VariableFilterItem';
 export type { VariableFilterItemProps, VariableFilterItemValue } from './VariableFilterItem';
 export { LinkageFilterItem } from './LinkageFilterItem';
 export type { LinkageFilterItemProps, LinkageFilterItemValue } from './LinkageFilterItem';
+export { useFilterOptions } from './useFilterOptions';
+export type { FilterOption, UseFilterOptionsArgs } from './useFilterOptions';
+// Higher-level filter compositions (`CollectionFilterItem`, `useFilterActionProps`, `createCollectionFilterItem`) live under `src/components/form/filter/`. They compose these flow primitives on top of a `Collection` binding — the dependency direction is form/filter → flow/components/filter, never the reverse.