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

package/src/components/form/PasswordInput.tsx

@@ -0,0 +1,211 @@
+/**
+ * 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 { Input, type InputProps } from 'antd';
+import type { PasswordProps as AntdPasswordProps } from 'antd/es/input';
+import React from 'react';
+
+// --- Strength scoring -------------------------------------------------------
+// Pure scoring function ported from the v1 client's password utils. Returns a
+// bucketed score in `[20, 40, 60, 80, 100]` based on character-class diversity,
+// length, repeated / sequential / consecutive character penalties, and a
+// "middle non-letter / non-symbol" bonus. No external dependencies — safe to
+// run on any string.
+//
+// Kept private to this module on purpose. Callers consume the visual strength
+// bar via `<PasswordInput checkStrength>`; they shouldn't need to compute the
+// raw score themselves.
+
+const isNum = (c: number) => c >= 48 && c <= 57;
+const isLower = (c: number) => c >= 97 && c <= 122;
+const isUpper = (c: number) => c >= 65 && c <= 90;
+const isSymbol = (c: number) => !(isLower(c) || isUpper(c) || isNum(c));
+const isLetter = (c: number) => isLower(c) || isUpper(c);
+
+function getStrength(val: string): number {
+  if (!val) return 0;
+  let num = 0;
+  let lower = 0;
+  let upper = 0;
+  let symbol = 0;
+  let MNS = 0;
+  let rep = 0;
+  let repC = 0;
+  let consecutive = 0;
+  let sequential = 0;
+  const len = () => num + lower + upper + symbol;
+  const callMe = () => {
+    let re = num > 0 ? 1 : 0;
+    re += lower > 0 ? 1 : 0;
+    re += upper > 0 ? 1 : 0;
+    re += symbol > 0 ? 1 : 0;
+    return re > 2 && len() >= 8 ? re + 1 : 0;
+  };
+  for (let i = 0; i < val.length; i++) {
+    const c = val.charCodeAt(i);
+    if (isNum(c)) {
+      num++;
+      if (i !== 0 && i !== val.length - 1) MNS++;
+      if (i > 0 && isNum(val.charCodeAt(i - 1))) consecutive++;
+    } else if (isLower(c)) {
+      lower++;
+      if (i > 0 && isLower(val.charCodeAt(i - 1))) consecutive++;
+    } else if (isUpper(c)) {
+      upper++;
+      if (i > 0 && isUpper(val.charCodeAt(i - 1))) consecutive++;
+    } else {
+      symbol++;
+      if (i !== 0 && i !== val.length - 1) MNS++;
+    }
+    let exists = false;
+    for (let j = 0; j < val.length; j++) {
+      if (val[i] === val[j] && i !== j) {
+        exists = true;
+        repC += Math.abs(val.length / (j - i));
+      }
+    }
+    if (exists) {
+      rep++;
+      const unique = val.length - rep;
+      repC = unique ? Math.ceil(repC / unique) : Math.ceil(repC);
+    }
+    if (i > 1) {
+      const last1 = val.charCodeAt(i - 1);
+      const last2 = val.charCodeAt(i - 2);
+      if (isLetter(c)) {
+        if (isLetter(last1) && isLetter(last2)) {
+          const v = val.toLowerCase();
+          const vi = v.charCodeAt(i);
+          const vi1 = v.charCodeAt(i - 1);
+          const vi2 = v.charCodeAt(i - 2);
+          if (vi - vi1 === vi1 - vi2 && Math.abs(vi - vi1) === 1) sequential++;
+        }
+      } else if (isNum(c)) {
+        if (isNum(last1) && isNum(last2)) {
+          if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) sequential++;
+        }
+      } else if (isSymbol(last1) && isSymbol(last2)) {
+        if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) sequential++;
+      }
+    }
+  }
+  let sum = 0;
+  const length = len();
+  sum += 4 * length;
+  if (lower > 0) sum += 2 * (length - lower);
+  if (upper > 0) sum += 2 * (length - upper);
+  if (num !== length) sum += 4 * num;
+  sum += 6 * symbol;
+  sum += 2 * MNS;
+  sum += 2 * callMe();
+  if (length === lower + upper) sum -= length;
+  if (length === num) sum -= num;
+  sum -= repC;
+  sum -= 2 * consecutive;
+  sum -= 3 * sequential;
+  sum = Math.max(0, Math.min(100, sum));
+
+  if (sum >= 80) return 100;
+  if (sum >= 60) return 80;
+  if (sum >= 40) return 60;
+  if (sum >= 20) return 40;
+  return 20;
+}
+
+// --- Strength bar UI --------------------------------------------------------
+// Colours and pixel sizes are intentionally kept identical to v1's
+// `PasswordStrength` so the visual remains unchanged across the v1 → v2
+// migration. When the design system formalises tokens for "strength signal"
+// colours, swap these literals for the matching token expressions.
+
+const segmentDividerStyle: React.CSSProperties = {
+  position: 'absolute',
+  zIndex: 1,
+  height: 8,
+  top: 0,
+  background: '#fff',
+  width: 1,
+  transform: 'translate(-50%, 0)',
+};
+
+function StrengthBar({ score }: { score: number }) {
+  return (
+    <div
+      style={{
+        background: '#e0e0e0',
+        marginBottom: 3,
+        position: 'relative',
+      }}
+    >
+      {/* Four white dividers split the bar into five strength brackets that
+          line up with the bucketed scoring in `getStrength`. */}
+      <div style={{ ...segmentDividerStyle, left: '20%' }} />
+      <div style={{ ...segmentDividerStyle, left: '40%' }} />
+      <div style={{ ...segmentDividerStyle, left: '60%' }} />
+      <div style={{ ...segmentDividerStyle, left: '80%' }} />
+      {/* The full gradient is always laid down, then `clip-path` trims it back
+          to the current score percentage — gives a smooth fill animation on
+          value change without re-painting the gradient on every render. */}
+      <div
+        style={{
+          position: 'relative',
+          backgroundImage: '-webkit-linear-gradient(left, #ff5500, #ff9300)',
+          transition: 'all 0.35s ease-in-out',
+          height: 8,
+          width: '100%',
+          marginTop: 5,
+          clipPath: `polygon(0 0,${score}% 0,${score}% 100%,0 100%)`,
+        }}
+      />
+    </div>
+  );
+}
+
+// --- Public component -------------------------------------------------------
+
+export interface PasswordInputProps extends AntdPasswordProps {
+  /**
+   * Render a visual strength bar beneath the input. Defaults to `false`. The
+   * score is computed locally — opting in does NOT add any form validation;
+   * use a separate `Form.Item.rules` entry for that (or wire the entry up to
+   * a cross-plugin password-validator extension point if your project
+   * provides one).
+   */
+  checkStrength?: boolean;
+}
+
+/**
+ * `Input.Password` plus an optional strength meter, ported from the v1
+ * `Password` component. The strength scoring and bar UI are identical to v1,
+ * so users who switch from a v1 page to a v2 page see the same visual signal.
+ *
+ * The component is value-shape compatible with antd `Input.Password` — drop
+ * it into any existing `Form.Item<password>` and toggle the meter with
+ * `checkStrength`.
+ *
+ * Caveats:
+ *
+ * - Strength scoring is purely a UX hint, not validation. Submitting a weak
+ *   password is still allowed unless the server (or a separately installed
+ *   password-policy plugin) rejects it.
+ * - The meter swallows the gap between `<Input.Password>` and the next form
+ *   element. If your `Form.Item` already adds vertical rhythm, the meter
+ *   inherits it; no extra spacing is added.
+ */
+export function PasswordInput(props: PasswordInputProps) {
+  const { value, checkStrength, ...rest } = props;
+  return (
+    <span>
+      <Input.Password {...(rest as InputProps)} value={value} />
+      {checkStrength ? <StrengthBar score={getStrength(String(value || ''))} /> : null}
+    </span>
+  );
+}
+
+export default PasswordInput;

package/src/components/form/RemoteSelect.tsx

@@ -0,0 +1,137 @@
+/**
+ * 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 { useRequest } from 'ahooks';
+import { Select, type SelectProps } from 'antd';
+import React, { useMemo } from 'react';
+
+export interface RemoteSelectFieldNames {
+  label?: string;
+  value?: string;
+}
+
+export interface RemoteSelectProps<RawItem = any, Resp = RawItem[], V = any>
+  extends Omit<SelectProps<V>, 'options' | 'loading'> {
+  /**
+   * Fetch the option source. Receives no arguments; caller closes over the
+   * `ctx.api.resource(...)` (or any other source) it needs. May resolve
+   * with either an array of raw items (the common case) or an arbitrary
+   * envelope object — in the latter case, supply `selectItems` to pluck
+   * the array out.
+   */
+  request: () => Promise<Resp | undefined>;
+  /**
+   * When `request` returns an envelope (object with metadata around the
+   * list), use this to extract the array of items that drives the
+   * dropdown. Defaults to identity, i.e. `request` itself returns the
+   * array.
+   */
+  selectItems?: (response: Resp) => RawItem[] | undefined;
+  /**
+   * Names of the raw item properties that hold the display label and the
+   * persisted value. Defaults to `{ label: 'label', value: 'value' }`.
+   * Ignored when `mapOptions` is supplied.
+   */
+  fieldNames?: RemoteSelectFieldNames;
+  /**
+   * Full custom mapping from a raw item to an antd `OptionType`. When
+   * provided, overrides `fieldNames`.
+   */
+  mapOptions?: (item: RawItem, index: number) => { label: React.ReactNode; value: any };
+  /**
+   * Stable cache key for ahooks `useRequest` so the dropdown doesn't re-fetch
+   * on every re-mount. Pass a value tied to the request's effective inputs.
+   */
+  cacheKey?: string;
+  /**
+   * Re-run the request when any of these values changes. Forwarded to
+   * `useRequest`'s `refreshDeps`.
+   */
+  refreshDeps?: unknown[];
+  /**
+   * Skip the auto-fetch on mount when `false`. Defaults to `true`.
+   */
+  ready?: boolean;
+  /**
+   * Notified once the request resolves. Receives both the mapped item
+   * array and the raw response envelope — useful when callers need to
+   * read sibling metadata (counts, availability hints, etc.) without
+   * issuing a second request.
+   */
+  onLoaded?: (items: RawItem[], response: Resp) => void;
+}
+
+/**
+ * Generic settings-page Select bound to an async option source. The
+ * component itself stays framework-agnostic — it knows nothing about
+ * NocoBase resources, data sources, or Formily. Pass any async `request`
+ * that resolves with an array, and supply `fieldNames` (or `mapOptions`)
+ * to map raw items to antd option shape.
+ *
+ * Search is local-only (antd's default `optionFilterProp="label"`). For
+ * server-side search, drive `request` from external state and pass the
+ * search input via `refreshDeps`.
+ */
+export function RemoteSelect<RawItem = any, Resp = RawItem[], V = any>(props: RemoteSelectProps<RawItem, Resp, V>) {
+  const {
+    request,
+    selectItems,
+    fieldNames,
+    mapOptions,
+    cacheKey,
+    refreshDeps,
+    ready = true,
+    onLoaded,
+    showSearch = true,
+    allowClear = true,
+    ...selectProps
+  } = props;
+
+  const { data: response, loading } = useRequest<Resp | undefined, []>(request, {
+    cacheKey,
+    refreshDeps,
+    ready,
+    onSuccess: (resp) => {
+      if (resp === undefined) return;
+      const items = (selectItems ? selectItems(resp) : (resp as unknown as RawItem[])) || [];
+      onLoaded?.(items, resp);
+    },
+  });
+
+  const items = useMemo<RawItem[]>(() => {
+    if (response === undefined) return [];
+    return (selectItems ? selectItems(response) : (response as unknown as RawItem[])) || [];
+  }, [response, selectItems]);
+
+  const labelKey = fieldNames?.label ?? 'label';
+  const valueKey = fieldNames?.value ?? 'value';
+
+  const options = useMemo(() => {
+    if (mapOptions) {
+      return items.map((item, index) => mapOptions(item, index));
+    }
+    return items.map((item: any) => ({
+      label: item?.[labelKey],
+      value: item?.[valueKey],
+    }));
+  }, [items, mapOptions, labelKey, valueKey]);
+
+  return (
+    <Select
+      {...selectProps}
+      showSearch={showSearch}
+      allowClear={allowClear}
+      optionFilterProp="label"
+      loading={loading}
+      options={options}
+    />
+  );
+}
+
+export default RemoteSelect;

package/src/components/form/index.tsx

@@ -8,8 +8,11 @@
  */
 
 export * from './createFormRegistry';
+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/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]);