@nocobase/client-v2 2.2.0-beta.14 → 2.2.0-beta.16

package/lib/locale/languageCodes.js

@@ -64,6 +64,7 @@ const languageCodes = {
   "ml-IN": { label: "\u0D2E\u0D32\u0D2F\u0D3E\u0D33\u0D02" },
   "mn-MN": { label: "\u041C\u043E\u043D\u0433\u043E\u043B \u0445\u044D\u043B" },
   "ms-MY": { label: "\u0628\u0647\u0627\u0633 \u0645\u0644\u0627\u064A\u0648" },
+  "my-MM": { label: "\u1019\u103C\u1014\u103A\u1019\u102C\u1018\u102C\u101E\u102C" },
   "nb-NO": { label: "Norsk bokm\xE5l" },
   "ne-NP": { label: "\u0928\u0947\u092A\u093E\u0932\u0940" },
   "nl-BE": { label: "Vlaams" },
@@ -83,7 +84,8 @@ const languageCodes = {
   "tk-TK": { label: "Turkmen" },
   "tr-TR": { label: "T\xFCrk\xE7e" },
   "uk-UA": { label: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430" },
-  "ur-PK": { label: "O\u02BBzbekcha" },
+  "ur-PK": { label: "\u0627\u0631\u062F\u0648" },
+  "uz-UZ": { label: "O\u02BBzbekcha" },
   "vi-VN": { label: "Ti\u1EBFng Vi\u1EC7t" },
   "zh-CN": { label: "\u7B80\u4F53\u4E2D\u6587" },
   "zh-HK": { label: "\u7E41\u9AD4\u4E2D\u6587\uFF08\u9999\u6E2F\uFF09" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.2.0-beta.14",
+  "version": "2.2.0-beta.16",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.2.0-beta.14",
-    "@nocobase/flow-engine": "2.2.0-beta.14",
-    "@nocobase/sdk": "2.2.0-beta.14",
-    "@nocobase/shared": "2.2.0-beta.14",
-    "@nocobase/utils": "2.2.0-beta.14",
+    "@nocobase/evaluators": "2.2.0-beta.16",
+    "@nocobase/flow-engine": "2.2.0-beta.16",
+    "@nocobase/sdk": "2.2.0-beta.16",
+    "@nocobase/shared": "2.2.0-beta.16",
+    "@nocobase/utils": "2.2.0-beta.16",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -44,8 +44,9 @@
     "json5": "^2.2.3",
     "jsqr": "^1.4.0",
     "lodash": "4.17.21",
+    "react-device-detect": "2.2.3",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "1ef021f3ce0a84469e40f181a19551a50b6f850c"
+  "gitHead": "49d9bd2e21122eab9435f128375828b8c5bb4c07"
 }

package/src/__tests__/browserChecker.test.ts

@@ -15,6 +15,8 @@ import { fileURLToPath } from 'node:url';
 type BrowserCheckerCase = {
   pathname: string;
   publicPath: string;
+  modernClientPrefix?: string;
+  appClientEntryMode?: string;
   expectedRedirect?: string;
 };
 
@@ -40,6 +42,8 @@ function executeBrowserChecker(scriptPath: string, input: BrowserCheckerCase) {
     showLog: false,
     window: {
       __nocobase_public_path__: input.publicPath,
+      __nocobase_modern_client_prefix__: input.modernClientPrefix,
+      __nocobase_app_client_entry_mode__: input.appClientEntryMode,
       location: {
         origin: 'http://c.local.nocobase.com',
         pathname: input.pathname,
@@ -109,4 +113,61 @@ describe.each(browserCheckerCases)('$label', ({ scriptPath }) => {
 
     expect(replace).not.toHaveBeenCalled();
   });
+
+  if (scriptPath.includes('/app/client/public/')) {
+    it('redirects app root to modern entry for modern-default', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-default',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/v/');
+    });
+
+    it('does not redirect legacy deep links for modern-default', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/admin',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-default',
+      });
+
+      expect(replace).not.toHaveBeenCalled();
+    });
+
+    it('rewrites legacy document paths for modern-only', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/admin/settings/workflow',
+        publicPath: '/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-only',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/v/admin/settings/workflow');
+    });
+
+    it('redirects sub-path site root directly to final modern target', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/nocobase/',
+        publicPath: '/nocobase/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-default',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/nocobase/v/');
+    });
+
+    it('rewrites sub-app legacy deep links for modern-only without collapsing the sub-app segment', () => {
+      const replace = executeBrowserChecker(scriptPath, {
+        pathname: '/nocobase/apps/a_31itq60q4kg/admin/',
+        publicPath: '/nocobase/',
+        modernClientPrefix: 'v',
+        appClientEntryMode: 'modern-only',
+      });
+
+      expect(replace).toHaveBeenCalledWith('http://c.local.nocobase.com/nocobase/v/apps/a_31itq60q4kg/admin');
+    });
+  }
 });

package/src/__tests__/getRouteRuntimeVersion.test.ts

@@ -0,0 +1,68 @@
+/**
+ * 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 { afterEach, describe, expect, it } from 'vitest';
+import { getRouteRuntimeVersion } from '../utils/getRouteRuntimeVersion';
+
+function replacePathname(pathname: string) {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: {
+      ...window.location,
+      pathname,
+    },
+  });
+}
+
+describe('getRouteRuntimeVersion', () => {
+  afterEach(() => {
+    delete window.__nocobase_modern_client_prefix__;
+    delete window.__nocobase_public_path__;
+    replacePathname('/');
+  });
+
+  it('returns modern when the current pathname is inside the modern client prefix', () => {
+    window.__nocobase_modern_client_prefix__ = 'v';
+    window.__nocobase_public_path__ = '/nocobase/v/';
+    replacePathname('/nocobase/v/admin/settings/workflow');
+
+    expect(getRouteRuntimeVersion()).toBe('modern');
+  });
+
+  it('returns legacy when reused v2 components run under the v1 settings page', () => {
+    window.__nocobase_modern_client_prefix__ = 'v';
+    window.__nocobase_public_path__ = '/nocobase/';
+    replacePathname('/nocobase/admin/settings/workflow/workflows/123');
+
+    expect(getRouteRuntimeVersion()).toBe('legacy');
+  });
+
+  it('returns legacy when root public path is "/"', () => {
+    window.__nocobase_modern_client_prefix__ = 'v';
+    window.__nocobase_public_path__ = '/';
+    replacePathname('/admin/settings/workflow/workflows/123');
+
+    expect(getRouteRuntimeVersion()).toBe('legacy');
+  });
+
+  it('returns modern when root public path is "/v/"', () => {
+    window.__nocobase_modern_client_prefix__ = 'v';
+    window.__nocobase_public_path__ = '/v/';
+    replacePathname('/v/admin/workflow/workflows/123');
+
+    expect(getRouteRuntimeVersion()).toBe('modern');
+  });
+
+  it('falls back to pathname matching when public path is unavailable', () => {
+    window.__nocobase_modern_client_prefix__ = 'v';
+    replacePathname('/v/admin/workflow/workflows/123');
+
+    expect(getRouteRuntimeVersion()).toBe('modern');
+  });
+});

package/src/__tests__/nocobase-buildin-plugin-auth.test.tsx

@@ -415,7 +415,7 @@ describe('nocobase buildin plugin auth redirect', () => {
   });
 
   it.each(['/v2/admin/legacy-page/tab/tab-1', '/v2/admin/legacy-page/view/detail'])(
-    'should show 404 for authenticated direct v1-style v2 page access: %s',
+    'should explain authenticated direct v1-style v2 page access: %s',
     async (pathname) => {
       const app = createMockClient({
         publicPath: '/v2/',
@@ -441,7 +441,12 @@ describe('nocobase buildin plugin auth redirect', () => {
       const Root = app.getRootComponent();
       render(<Root />);
 
-      expect(await screen.findByText('404')).toBeInTheDocument();
+      expect(await screen.findByText('This page is not supported in the /v2/ branch')).toBeInTheDocument();
+      expect(screen.queryByText('404')).not.toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Open from the original entry' })).toHaveAttribute(
+        'href',
+        pathname.replace(/^\/v2/, ''),
+      );
       expect(app.router.router.state.location.pathname).toBe(pathname);
     },
   );

package/src/components/README.md

@@ -190,6 +190,10 @@ import { TypedVariableInput } from '@nocobase/client-v2';
 <Form.Item name={['options', 'secure']} label={t('Secure')} initialValue={true}>
   <TypedVariableInput types={['boolean']} namespaces={['$env']} />
 </Form.Item>
+
+// Inject a custom variable tree (e.g. a workflow node's upstream outputs,
+// which are not in the global registry)
+<TypedVariableInput types={['string', 'number']} metaTree={workflowMetaTree} />
 ```
 
 Key props:
@@ -197,6 +201,7 @@ Key props:
 - `types`: allowed constant types. Shape mirrors v1 `useTypedConstant` — pass bare type names (`['number', 'boolean']`) or `[type, editorProps]` tuples (`[['number', { min, max, step }]]`) to forward props to the underlying antd editor. Defaults to `['string', 'number', 'boolean', 'date']`. **Even when only one type is allowed, the `Constant` entry still expands into a typed submenu** (Number / Boolean / Date / String) — matches v1 so users can see what type the constant is
 - `namespaces`: restrict the variable picker to specific top-level namespaces (e.g. `['$env']`). Omit to expose every namespace registered on `flowEngine.context`
 - `extraNodes`: static leaves appended after the namespace-filtered nodes
+- `metaTree`: **inject the variable tree directly** instead of reading the global `flowEngine.context` meta tree. When set, `namespaces`/`extraNodes` are ignored and this tree is used verbatim — for context-scoped variable sources that are not in the global registry (typically a workflow node's upstream outputs, `$jobsMapByNodeKey`). Nodes whose `children` is a thunk (`() => Promise<MetaTreeNode[]>`) are **lazy-loaded on expand** (via flow-engine's `loadMetaTreeChildren`)
 - `nullable`: whether to expose the `Null` switcher entry. Default `true`. Combined with `Form.Item.rules={[{ required: true }]}`, the user can explicitly clear the field but submission is still blocked by validation — mirrors v1's "Null + required" pairing
 - `delimiters`: variable-token delimiters, default `['{{', '}}']` — same as `VariableInput`
 - `value` / `onChange` / `placeholder` / `disabled` / `style` / `className`: standard controlled-input props
@@ -212,9 +217,10 @@ When **not** to use it:
 - **Pure literal fields** (users will never pass a variable) → use the antd primitive directly (`InputNumber` / `Select` / `DatePicker` / `Input`) and skip the Cascader column overhead
 - **Pure variable fields** (users will never pass a literal) → use `EnvVariableInput` (`$env`-only, with optional password masking) or `VariableInput` (general-purpose)
 
+Supported constant types: `string` / `number` / `boolean` / `date` / `object`. The `object` (JSON) type renders an inline monospace textarea (2 rows by default, drag-resizable) — it keeps the raw text as a draft while editing and `JSON.parse`s it back into an object on blur. On a parse failure it shows the raw `JSON.parse` message (e.g. `Expected property name or '}' in JSON at position …`, matching v1) on its own row below the input, and does not emit. Mirrors v1 `useTypedConstant`'s object form (default value `{}`).
+
 Capabilities skipped (present in v1, not yet ported to v2):
 
-- `object` constant type (JSON editor) — v2 has no inline "JSON editor + Cascader switcher" yet; add when there's a concrete caller
 - Async `loadChildren` cascading — most MetaTree namespaces are already eagerly resolved by `useFilteredMetaTree`, so this hasn't been needed
 
 #### FileSizeInput

package/src/components/README.zh-CN.md

@@ -190,6 +190,9 @@ import { TypedVariableInput } from '@nocobase/client-v2';
 <Form.Item name={['options', 'secure']} label={t('安全模式')} initialValue={true}>
   <TypedVariableInput types={['boolean']} namespaces={['$env']} />
 </Form.Item>
+
+// 注入自定义变量树（如工作流节点的上游输出，不在全局注册表里）
+<TypedVariableInput types={['string', 'number']} metaTree={workflowMetaTree} />
 ```
 
 主要属性：
@@ -197,6 +200,7 @@ import { TypedVariableInput } from '@nocobase/client-v2';
 - `types`：允许的常量类型。形态对齐 v1 `useTypedConstant`，可以传裸类型名 `['number', 'boolean']`，也可以传 `[type, editorProps]` 元组 `[['number', { min, max, step }]]` 把 props 透传给底层 antd 编辑器。默认 `['string', 'number', 'boolean', 'date']`。**即使只允许一种类型，「常量」入口也会展开二级菜单**（数字 / 逻辑值 / 日期 / 字符串）——跟 v1 一致，让用户能直观看到当前常量是什么类型
 - `namespaces`：限定变量 picker 可选的顶层命名空间（如 `['$env']`）。不传就用 `flowEngine.context` 里所有已注册命名空间
 - `extraNodes`：在命名空间过滤后追加几条静态变量节点
+- `metaTree`：**直接注入变量树**，取代读取全局 `flowEngine.context` 的 MetaTree。传了它就**忽略** `namespaces`/`extraNodes`，原样使用这棵树——用于不在全局注册表里的、上下文相关的变量源（典型如工作流节点的上游节点输出 `$jobsMapByNodeKey`）。树里 `children` 为函数（`() => Promise<MetaTreeNode[]>`）的节点会在用户展开 Cascader 时**按需懒加载**（复用 flow-engine 的 `loadMetaTreeChildren`）
 - `nullable`：是否暴露「空值」入口，默认 `true`。配合 `Form.Item.rules={[{ required: true }]}` 可以让用户能手动清空、但提交时会被校验拦截——跟 v1 的「空值 + required」组合一致
 - `delimiters`：变量 token 开闭分隔符，默认 `['{{', '}}']`，跟 `VariableInput` 一致
 - `value` / `onChange` / `placeholder` / `disabled` / `style` / `className`：标准受控字段属性
@@ -212,9 +216,10 @@ import { TypedVariableInput } from '@nocobase/client-v2';
 - **纯字面量字段**（用户不会想填变量）→ 直接用 antd `InputNumber` / `Select` / `DatePicker` / `Input`，省掉 Cascader 那一格的视觉开销
 - **纯变量字段**（用户不会想填字面量）→ 用 `EnvVariableInput`（`$env` 专用，带 password mask）或 `VariableInput`（更通用）
 
+支持的常量类型：`string` / `number` / `boolean` / `date` / `object`。其中 `object`（即 JSON）渲染为一个等宽字体的内联 textarea（默认两行、可拖拽拉伸），编辑时保留原始文本草稿、失焦（blur）时 `JSON.parse` 回写为对象；解析失败则在输入框**下方单独一行**显示原生 `JSON.parse` 的错误信息（如 `Expected property name or '}' in JSON at position …`，对齐 v1）且不回写。对齐 v1 `useTypedConstant` 的 object 形态（默认值 `{}`）。
+
 跳过的能力（v1 有但 v2 还没补）：
 
-- `object` 类型（JSON 编辑器）——v2 还没对应的「内联 JSON 编辑器 + Cascader 切换」组件，等真有需求再补
 - 异步 `loadChildren` 分支——大多数命名空间的 MetaTree 已经由 `useFilteredMetaTree` 提前展平，没遇到刚需
 
 #### FileSizeInput

package/src/components/category-tabs/SortableCategoryTabs.tsx

@@ -0,0 +1,210 @@
+/**
+ * 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 {
+  DndContext,
+  DragOverlay,
+  MouseSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import { Badge, Button, Dropdown, Space, Tabs } from 'antd';
+import type { TabsProps } from 'antd';
+import React, { useCallback, useMemo, useState } from 'react';
+
+/**
+ * A category descriptor for {@link SortableCategoryTabs}. The component is
+ * i18n-agnostic: `label` is rendered verbatim, so consumers pass an
+ * already-compiled/translated node. `color` is an antd preset color name or a
+ * hex string; `'default'` / `undefined` renders no badge color.
+ */
+export type SortableCategoryTabItem = {
+  id: string | number;
+  label: React.ReactNode;
+  color?: string;
+};
+
+export type SortableCategoryTabsProps = {
+  activeKey: string;
+  onChange: (key: string) => void;
+  /** Draggable category tabs (the fixed leading tab is configured via `allTab`). */
+  categories: SortableCategoryTabItem[];
+  /** The fixed, non-draggable leading tab, e.g. "All". */
+  allTab: { key: string; label: React.ReactNode };
+  /** Show the "+" add button and handle its click. */
+  onAdd?: () => void;
+  /** Per-category edit menu item handler; menu is hidden when omitted. */
+  onEdit?: (id: string | number) => void;
+  /** Per-category delete menu item handler; menu is hidden when omitted. */
+  onDelete?: (id: string | number) => void;
+  /** Reorder handler. Receives the dragged and dropped category ids. */
+  onSort?: (sourceId: string | number, targetId: string | number) => void | Promise<void>;
+  /** Consumer-translated labels for the per-category dropdown menu. */
+  menuLabels?: { edit?: string; delete?: string };
+  className?: string;
+};
+
+function DraggableTab(props: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef } = useDraggable({ id: props.id });
+  return (
+    <div ref={setNodeRef} {...listeners} {...attributes}>
+      {props.children}
+    </div>
+  );
+}
+
+function DroppableTab(props: { id: string; children: React.ReactNode }) {
+  const { isOver, setNodeRef } = useDroppable({ id: props.id });
+  return (
+    <div ref={setNodeRef} style={isOver ? { color: 'green' } : undefined}>
+      {props.children}
+    </div>
+  );
+}
+
+function CategoryTabContent(props: {
+  item: SortableCategoryTabItem;
+  onEdit?: (id: string | number) => void;
+  onDelete?: (id: string | number) => void;
+  menuLabels?: { edit?: string; delete?: string };
+}) {
+  const { item, onEdit, onDelete, menuLabels } = props;
+  const hasMenu = Boolean(onEdit || onDelete);
+  const editLabel = menuLabels?.edit ?? 'Edit';
+  const deleteLabel = menuLabels?.delete ?? 'Delete';
+
+  return (
+    <Space size={6}>
+      <Badge color={item.color === 'default' ? undefined : item.color} />
+      {item.label}
+      {hasMenu ? (
+        <Dropdown
+          trigger={['click']}
+          menu={{
+            items: [
+              onEdit ? { key: 'edit', label: editLabel } : null,
+              onDelete ? { key: 'delete', label: deleteLabel } : null,
+            ].filter(Boolean) as { key: string; label: string }[],
+            onClick({ key, domEvent }) {
+              domEvent.stopPropagation();
+              if (key === 'edit') {
+                onEdit?.(item.id);
+                return;
+              }
+              onDelete?.(item.id);
+            },
+          }}
+        >
+          <Button
+            aria-label={editLabel}
+            icon={<MenuOutlined />}
+            size="small"
+            type="text"
+            onClick={(event) => event.stopPropagation()}
+          />
+        </Dropdown>
+      ) : null}
+    </Space>
+  );
+}
+
+/**
+ * A draggable, editable category tab bar. Renders only the tab bar (no content
+ * panes) — the page renders its content below and reacts to `activeKey`.
+ *
+ * Shared by settings pages that group records under reorderable categories
+ * (data-source collections, workflows, …). Drag-to-reorder is powered by
+ * `@dnd-kit`; the "+" / per-tab edit-delete affordances are optional.
+ */
+export function SortableCategoryTabs(props: SortableCategoryTabsProps) {
+  const { activeKey, onChange, categories, allTab, onAdd, onEdit, onDelete, onSort, menuLabels, className } = props;
+  const [activeDragId, setActiveDragId] = useState<string | null>(null);
+  const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 10 } }));
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    setActiveDragId(String(event.active.id));
+  }, []);
+
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveDragId(null);
+      if (!over || over.id === active.id) {
+        return;
+      }
+      await onSort?.(active.id as string | number, over.id as string | number);
+    },
+    [onSort],
+  );
+
+  const items = useMemo<TabsProps['items']>(
+    () => [
+      { key: allTab.key, label: allTab.label, closable: false },
+      ...categories.map((item) => ({
+        key: String(item.id),
+        closable: false,
+        label: onSort ? (
+          <DroppableTab id={String(item.id)}>
+            <DraggableTab id={String(item.id)}>
+              <CategoryTabContent item={item} onEdit={onEdit} onDelete={onDelete} menuLabels={menuLabels} />
+            </DraggableTab>
+          </DroppableTab>
+        ) : (
+          <CategoryTabContent item={item} onEdit={onEdit} onDelete={onDelete} menuLabels={menuLabels} />
+        ),
+      })),
+    ],
+    [allTab.key, allTab.label, categories, onSort, onEdit, onDelete, menuLabels],
+  );
+
+  const activeDragItem = useMemo(
+    () => categories.find((item) => String(item.id) === activeDragId),
+    [categories, activeDragId],
+  );
+
+  const tabs = (
+    <Tabs
+      className={className}
+      activeKey={activeKey}
+      type="editable-card"
+      hideAdd={!onAdd}
+      items={items}
+      onChange={onChange}
+      onEdit={(_, action) => {
+        if (action === 'add') {
+          onAdd?.();
+        }
+      }}
+    />
+  );
+
+  if (!onSort) {
+    return tabs;
+  }
+
+  return (
+    <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      {tabs}
+      <DragOverlay dropAnimation={null}>
+        {activeDragItem ? (
+          <span style={{ whiteSpace: 'nowrap' }}>
+            <CategoryTabContent item={activeDragItem} menuLabels={menuLabels} />
+          </span>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+
+export default SortableCategoryTabs;

package/src/components/category-tabs/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 './SortableCategoryTabs';

package/src/components/form/JsonTextArea.tsx

@@ -117,6 +117,10 @@ const JsonTextAreaComponent = React.forwardRef<TextAreaRef, JsonTextAreaProps>((
   return (
     <>
       <Input.TextArea
+        autoSize={{
+          minRows: 5,
+          maxRows: 10,
+        }}
         {...textAreaProps}
         ref={ref}
         value={text}

package/src/components/form/ScanInput/CodeScanner.tsx

@@ -11,7 +11,7 @@ import { FileImageOutlined, LeftOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { Button, message, theme } from 'antd';
 import { Html5Qrcode } from 'html5-qrcode';
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ScanBox } from './ScanBox';
@@ -26,6 +26,14 @@ type CodeScannerProps = {
 };
 
 const MAX_CODE_IMAGE_SIZE = 10 * 1024 * 1024;
+const SCANNER_RENDER_WIDTH = 1280;
+
+function getViewportSize() {
+  return {
+    width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
+    height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
+  };
+}
 
 function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess }: CodeScannerProps) {
   const { t } = useTranslation();
@@ -34,16 +42,15 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   const scannerElementId = `code-scanner-${inputId}`;
   const imgUploaderRef = useRef<HTMLInputElement>(null);
   const [cameraAvailable, setCameraAvailable] = useState(false);
+  const [scannerSize, setScannerSize] = useState({ width: 0, height: 0 });
+  const [viewport, setViewport] = useState(getViewportSize);
 
-  const viewport = useMemo(() => {
-    const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-    return { width, height };
-  }, []);
-  const scanBoxSize = useMemo(
-    () => getCodeScanBoxSize(viewport.width, viewport.height),
-    [viewport.height, viewport.width],
-  );
+  const previewScale = scannerSize.width
+    ? Math.max(viewport.width / scannerSize.width, viewport.height / scannerSize.height)
+    : Math.min(1, viewport.width / SCANNER_RENDER_WIDTH);
+  const visibleScanBoxSize = scannerSize.width
+    ? getCodeScanBoxSize(viewport.width, viewport.height)
+    : { width: 0, height: 0 };
 
   const showScanFailure = useCallback(() => {
     message.error(t('Code recognition failed, please scan again'));
@@ -76,12 +83,18 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     enabled: visible && cameraAvailable,
     elementId: scannerElementId,
     formatsToSupport,
-    scanBoxSize,
+    onScannerSizeChanged: setScannerSize,
     onScanSuccess: handleScanSuccess,
     onScanFailure: showScanFailure,
     onCameraStartFailure: showCameraStartFailure,
   });
 
+  useEffect(() => {
+    const handleResize = () => setViewport(getViewportSize());
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   useEffect(() => {
     if (!visible) {
       return;
@@ -152,18 +165,22 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     inset: 0;
     overflow: hidden;
   `;
+  const scannerSurfaceClass = css`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: center;
+  `;
   const scannerClass = css`
     position: relative;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
+    line-height: 0;
 
     video {
-      position: absolute !important;
-      inset: 0 !important;
       width: 100% !important;
-      height: 100% !important;
-      object-fit: cover !important;
+      height: auto !important;
+      max-width: none !important;
+      display: block !important;
     }
 
     #qr-shaded-region {
@@ -191,26 +208,36 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   return (
     <div className={rootClass}>
       <div className={scannerWrapperClass}>
-        <div id={scannerElementId} className={scannerClass} />
+        <div
+          className={scannerSurfaceClass}
+          style={{
+            width: `${SCANNER_RENDER_WIDTH}px`,
+            transform: `translate(-50%, -50%) scale(${previewScale})`,
+          }}
+        >
+          <div id={scannerElementId} className={scannerClass} />
+        </div>
       </div>
+      {cameraAvailable && scannerSize.width > 0 && (
+        <ScanBox
+          style={{
+            position: 'fixed',
+            top: `${(viewport.height - visibleScanBoxSize.height) / 2}px`,
+            left: `${(viewport.width - visibleScanBoxSize.width) / 2}px`,
+            width: `${visibleScanBoxSize.width}px`,
+            height: `${visibleScanBoxSize.height}px`,
+          }}
+        />
+      )}
+      <Button
+        aria-label={t('Close')}
+        className={closeButtonClass}
+        icon={<LeftOutlined />}
+        type="text"
+        onClick={onClose}
+      />
       {cameraAvailable && (
         <>
-          <ScanBox
-            style={{
-              position: 'fixed',
-              top: `${(viewport.height - scanBoxSize.height) / 2}px`,
-              left: `${(viewport.width - scanBoxSize.width) / 2}px`,
-              width: `${scanBoxSize.width}px`,
-              height: `${scanBoxSize.height}px`,
-            }}
-          />
-          <Button
-            aria-label={t('Close')}
-            className={closeButtonClass}
-            icon={<LeftOutlined />}
-            type="text"
-            onClick={onClose}
-          />
           <Button className={albumClass} icon={<FileImageOutlined />} type="text" onClick={handleImageButtonClick}>
             {t('Album')}
           </Button>