@pisell/materials 1.0.1051 → 1.0.1053

package/lib/components/dataSourceComponents/dataSourceSubForm/types.d.ts

@@ -0,0 +1,121 @@
+import { ModeType } from "../dataSourceForm/type.js";
+import React from "react";
+
+//#region src/components/dataSourceComponents/dataSourceSubForm/types.d.ts
+/**
+ * @title 字段选项接口
+ * @description 用于下拉框、单选框等组件的选项配置
+ */
+interface DataSourceSubFormOption {
+  label?: React.ReactNode;
+  value: string | number;
+}
+/**
+ * @title 字段 Schema 接口
+ * @description 定义表单字段的结构和配置
+ */
+interface DataSourceSubFormFieldSchema {
+  /** 字段名称（必填） */
+  name: string;
+  /** 字段标签 */
+  label?: React.ReactNode;
+  /** 组件类型（兼容多种命名方式） */
+  component?: string;
+  componentName?: string;
+  /** 字段数据类型 */
+  type?: string;
+  /** 接口类型，用于映射到具体组件（如 Select、Input 等） */
+  interface?: string;
+  /** 字段选项列表（用于 Select、Radio 等） */
+  options?: DataSourceSubFormOption[];
+  /** 组件额外配置 */
+  props?: Record<string, any>;
+  /** 子字段（用于嵌套结构，如 Input.JSON） */
+  children?: DataSourceSubFormFieldSchema[];
+  _children?: DataSourceSubFormFieldSchema[];
+  /** 字段 Schema 配置 */
+  schema?: Record<string, any>;
+  /** UI Schema 配置（支持低代码平台的各种配置项） */
+  uiSchema?: {
+    title?: React.ReactNode;
+    enum?: DataSourceSubFormOption[];
+    'x-component'?: string;
+    'x-component-props'?: Record<string, any>;
+    'x-read-pretty'?: boolean;
+    'x-validator'?: string;
+    'x-display'?: 'visible' | 'hidden' | 'none';
+    'x-pattern'?: 'editable' | 'disabled' | 'readPretty';
+    'x-data-source'?: {
+      type?: string;
+      options?: Array<{
+        id?: string;
+        label: string | Record<string, any>;
+        value: string;
+        color?: string;
+      }>;
+      labelField?: string;
+      valueField?: string;
+      dataSource?: any;
+      extraParams?: Record<string, any>;
+    };
+    'x-record-schema'?: DataSourceSubFormSchema | DataSourceSubFormFieldSchema[] | string;
+    default?: any;
+    type?: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
+  };
+}
+/**
+ * @title Schema 接口
+ * @description 表单字段集合的结构定义
+ */
+interface DataSourceSubFormSchema {
+  /** 字段列表 */
+  fields?: DataSourceSubFormFieldSchema[];
+  /** 属性映射（key-value 形式） */
+  properties?: Record<string, any>;
+  /** 子字段列表 */
+  children?: DataSourceSubFormFieldSchema[];
+}
+/**
+ * @title DataSourceSubForm 组件 Props
+ * @description
+ * 独立的子表单组件，用于渲染一组表单字段。
+ * 支持通过 xRecordSchema 配置字段，或直接传入 children 低代码子组件。
+ */
+interface DataSourceSubFormProps {
+  /** 渲染模式：edit（编辑）、disabled（禁用）、preview（预览） */
+  renderMode?: ModeType;
+  /**
+   * 表单值对象
+   * @example { "fieldName1": "value1", "fieldName2": "value2" }
+   */
+  value?: Record<string, any>;
+  /**
+   * 值变化回调
+   * @param value 更新后的表单值对象
+   */
+  onChange?: (value: Record<string, any>) => void;
+  /**
+   * xRecordSchema：定义表单字段结构
+   * 支持三种格式：
+   * 1. JSON 字符串
+   * 2. Schema 对象（包含 fields/properties/children）
+   * 3. 字段数组
+   */
+  xRecordSchema?: string | DataSourceSubFormSchema | DataSourceSubFormFieldSchema[];
+  /**
+   * 容器 children：低代码引擎渲染的子组件节点
+   * 优先使用 children，如果没有则回退到 xRecordSchema 渲染
+   */
+  children?: React.ReactNode;
+  /** 低代码设计模式标识 */
+  __designMode?: string;
+  /** 表单布局方式 */
+  layout?: 'horizontal' | 'vertical' | 'inline';
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  [key: string]: any;
+}
+//#endregion
+export { DataSourceSubFormProps };

package/lib/components/dataSourceComponents/dataSourceTable/BaseTable.js

@@ -2,8 +2,8 @@ const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js'
 const require_objectSpread2 = require('../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
 const require_objectWithoutProperties = require('../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js');
 const require_asyncToGenerator = require('../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/asyncToGenerator.js');
-const require_useDataSource = require('../hooks/useDataSource.js');
 const require_useVariables = require('../hooks/useVariables.js');
+const require_useDataSource = require('../hooks/useDataSource.js');
 const require_index = require('../../table/index.js');
 const require_ActionsProvider = require('../provider/actions/ActionsProvider.js');
 const require_useDrawerState = require('./hooks/useDrawerState.js');

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.js

@@ -3,9 +3,9 @@ const require_index = require('../../../../locales/index.js');
 const require_objectSpread2 = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
 const require_index$1 = require('../../../pisellModal/index.js');
 const require_asyncToGenerator = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/asyncToGenerator.js');
-const require_useDataSource = require('../../hooks/useDataSource.js');
 const require_index$2 = require('../../../pisellToast/index.js');
 const require_useVariables = require('../../hooks/useVariables.js');
+const require_useDataSource = require('../../hooks/useDataSource.js');
 const require_useComponentId = require('../../hooks/useComponentId.js');
 const require_index$3 = require('../filter/index.js');
 const require_usePagination = require('./usePagination.js');

package/lib/components/dataSourceComponents/dataSourceTable/type.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LocalSettingsType } from "../../table/types.js";
 import { DataSourceType } from "../provider/dataSource/DataSourceContext.js";
+import { LocalSettingsType } from "../../table/types.js";
 import { ColumnType } from "antd/es/table";
 
 //#region src/components/dataSourceComponents/dataSourceTable/type.d.ts

package/lib/components/dataSourceComponents/dataSourceWrapper/BaseWrapper.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.js');
-const require_useDataSource = require('../hooks/useDataSource.js');
 const require_useVariables = require('../hooks/useVariables.js');
+const require_useDataSource = require('../hooks/useDataSource.js');
 const require_useComponentId = require('../hooks/useComponentId.js');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);

package/lib/components/dataSourceComponents/fields/Checkbox/WithMode.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-import { CheckboxGroupProps } from "./type.js";
 import { WithModeProps } from "../../dataSourceForm/utils.js";
-import * as react48 from "react";
+import { CheckboxGroupProps } from "./type.js";
+import * as react50 from "react";
 
 //#region src/components/dataSourceComponents/fields/Checkbox/WithMode.d.ts
 type CheckboxComponent = React.FC & {
   Group: typeof CheckboxGroupWithMode;
 };
 declare const CheckboxWithMode: CheckboxComponent;
-declare const CheckboxGroupWithMode: react48.FC<CheckboxGroupProps & WithModeProps>;
+declare const CheckboxGroupWithMode: react50.FC<CheckboxGroupProps & WithModeProps>;
 //#endregion
 export { CheckboxWithMode };

package/lib/components/dataSourceComponents/fields/DateRangePicker/WithMode.js

@@ -1,5 +1,5 @@
-const require_index = require('../../../date-picker/index.js');
 const require_utils = require('../../dataSourceForm/utils.js');
+const require_index = require('../../../date-picker/index.js');
 const require_ReadPretty = require('./ReadPretty.js');
 
 //#region src/components/dataSourceComponents/fields/DateRangePicker/WithMode.ts

package/lib/components/dataSourceComponents/fields/Input.Mobile/WithMode.js

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
 const require_objectSpread2 = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
 const require_objectWithoutProperties = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js');
-const require_index = require('../../../select/index.js');
 const require_useSetRequest = require('../../../../hooks/useSetRequest.js');
 const require_useTranslationOriginal = require('../../../../hooks/useTranslationOriginal.js');
 const require_utils = require('../../dataSourceForm/utils.js');
+const require_index = require('../../../select/index.js');
 const require_serve = require('../Input.Phone/serve.js');
 const require_ReadPretty = require('./ReadPretty.js');
 let react = require("react");

package/lib/components/dataSourceComponents/fields/Input.Password/index.d.ts

@@ -1,9 +1,9 @@
 import { WithFormItemProps, WithModeProps } from "../../dataSourceForm/utils.js";
 import React from "react";
 import * as antd23 from "antd";
-import * as antd_es_input3 from "antd/es/input";
+import * as antd_es_input4 from "antd/es/input";
 
 //#region src/components/dataSourceComponents/fields/Input.Password/index.d.ts
-declare const Password: React.FC<antd_es_input3.PasswordProps & React.RefAttributes<antd23.InputRef> & WithModeProps & WithFormItemProps>;
+declare const Password: React.FC<antd_es_input4.PasswordProps & React.RefAttributes<antd23.InputRef> & WithModeProps & WithFormItemProps>;
 //#endregion
 export { Password };

package/lib/components/dataSourceComponents/fields/Input.Phone/WithMode.js

@@ -1,10 +1,10 @@
 const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
 const require_objectSpread2 = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
 const require_objectWithoutProperties = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js');
-const require_index = require('../../../select/index.js');
 const require_useSetRequest = require('../../../../hooks/useSetRequest.js');
 const require_useTranslationOriginal = require('../../../../hooks/useTranslationOriginal.js');
 const require_utils = require('../../dataSourceForm/utils.js');
+const require_index = require('../../../select/index.js');
 const require_serve = require('./serve.js');
 const require_ReadPretty = require('./ReadPretty.js');
 let react = require("react");

package/lib/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts

@@ -1,9 +1,9 @@
 import { WithFormItemProps, WithModeProps } from "../../dataSourceForm/utils.js";
 import React from "react";
-import * as antd24 from "antd";
+import * as antd19 from "antd";
 
 //#region src/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts
-declare const Subdomain: React.FC<antd24.InputProps & {
+declare const Subdomain: React.FC<antd19.InputProps & {
   onChange: (value: string) => void;
   onBlur?: ((e: React.FocusEvent<HTMLInputElement, Element>) => void) | undefined;
   rootDomain: "custom" | "saas" | "xzero";

package/lib/components/dataSourceComponents/fields/Input.TextArea/index.d.ts

@@ -1,9 +1,9 @@
 import { WithFormItemProps, WithModeProps } from "../../dataSourceForm/utils.js";
 import React from "react";
-import * as antd_es_input4 from "antd/es/input";
+import * as antd_es_input3 from "antd/es/input";
 import * as antd_es_input_TextArea0 from "antd/es/input/TextArea";
 
 //#region src/components/dataSourceComponents/fields/Input.TextArea/index.d.ts
-declare const TextArea: React.FC<antd_es_input4.TextAreaProps & React.RefAttributes<antd_es_input_TextArea0.TextAreaRef> & WithModeProps & WithFormItemProps>;
+declare const TextArea: React.FC<antd_es_input3.TextAreaProps & React.RefAttributes<antd_es_input_TextArea0.TextAreaRef> & WithModeProps & WithFormItemProps>;
 //#endregion
 export { TextArea };

package/lib/components/dataSourceComponents/fields/Radio/WithMode.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { WithModeProps } from "../../dataSourceForm/utils.js";
 import { RadioGroupProps } from "./type.js";
-import * as react49 from "react";
+import * as react48 from "react";
 
 //#region src/components/dataSourceComponents/fields/Radio/WithMode.d.ts
 type RadioComponent = React.FC & {
   Group: typeof RadioGroupWithMode;
 };
 declare const RadioWithMode: RadioComponent;
-declare const RadioGroupWithMode: react49.FC<RadioGroupProps & WithModeProps>;
+declare const RadioGroupWithMode: react48.FC<RadioGroupProps & WithModeProps>;
 //#endregion
 export { RadioWithMode };

package/lib/components/dataSourceComponents/fields/Radio/WithMode.js

@@ -1,5 +1,5 @@
-const require_index = require('../../../radio/index.js');
 const require_utils = require('../../dataSourceForm/utils.js');
+const require_index = require('../../../radio/index.js');
 const require_ReadPretty = require('./ReadPretty.js');
 
 //#region src/components/dataSourceComponents/fields/Radio/WithMode.ts

package/lib/components/dataSourceComponents/fields/RecordListWrapper/README.md

@@ -0,0 +1,247 @@
+# RecordListWrapper 增强说明
+
+## 概述
+
+`RecordListWrapper` 是一个增强的表单组件，用于管理多个记录的表单数据。它支持：
+
+1. **Tab 导航**：通过 `options` 驱动多个记录的切换
+2. **动态表单**：支持低代码引擎动态添加表单字段
+3. **Schema 驱动**：通过 `xRecordSchema` 配置字段结构
+4. **完整的表单能力**：复用 DataSourceForm 的所有能力（验证、格式化、多语言等）
+
+## 核心增强
+
+### 1. 数据源上下文支持
+
+现在 RecordListWrapper 会为子组件提供完整的 Provider 链：
+
+- `FormSettingProvider`：提供表单设置（renderMode、size 等）
+- `DataSourceProvider`：提供模拟数据源，让子组件能正常工作
+- `JsonWrapperContext`：提供 JSON 嵌套路径支持
+
+### 2. 字段自动渲染
+
+当配置 `xRecordSchema` 时：
+
+```typescript
+const xRecordSchema = [
+  {
+    name: 'code',
+    uiSchema: {
+      title: '代码',
+      'x-component': 'Input',
+      'x-component-props': {
+        placeholder: '请输入代码'
+      }
+    }
+  },
+  {
+    name: 'type',
+    interface: 'Select',
+    uiSchema: {
+      title: '类型',
+      enum: [
+        { label: '类型A', value: 'a' },
+        { label: '类型B', value: 'b' }
+      ]
+    }
+  }
+];
+```
+
+### 3. 低代码集成
+
+在低代码平台上：
+
+1. **配置 xRecordSchema**：
+   - 打开组件配置面板
+   - 找到 "Schema" 分组
+   - 在 "记录字段配置" 中输入 JSON 配置
+   - 系统会自动解析并生成表单字段
+
+2. **手动添加组件**：
+   - RecordListWrapper 是容器组件（`isContainer: true`）
+   - 可以直接拖拽表单项到容器中
+   - 子组件会自动获得正确的上下文
+
+3. **自定义 Tab 导航**：
+   - 可以拖拽自定义组件到 "Tab 区域" 插槽
+   - 组件会自动接收 `options`、`value`、`onChange` 属性
+
+## 值结构
+
+```typescript
+// RecordListWrapper 的值是一个 Map 结构：
+{
+  // key: option 的 value
+  // value: 该 option 对应的表单字段值
+  "option1": {
+    "code": "ABC",
+    "type": "a",
+    "name": "名称1"
+  },
+  "option2": {
+    "code": "DEF",
+    "type": "b",
+    "name": "名称2"
+  }
+}
+```
+
+## 使用示例
+
+### 基础用法
+
+```tsx
+import { FormItemRecordListWrapper } from '@pisell/materials';
+
+const options = [
+  { label: '记录1', value: '1' },
+  { label: '记录2', value: '2' },
+];
+
+const xRecordSchema = [
+  {
+    name: 'code',
+    uiSchema: {
+      title: '代码',
+      'x-component': 'Input',
+    }
+  },
+  {
+    name: 'name',
+    uiSchema: {
+      title: '名称',
+      'x-component': 'Input',
+    }
+  }
+];
+
+<FormItemRecordListWrapper
+  name="records"
+  label="记录列表"
+  options={options}
+  xRecordSchema={xRecordSchema}
+  renderMode="edit"
+/>
+```
+
+### 在 DataSourceForm 中使用
+
+```tsx
+<DataSourceForm renderMode="add">
+  <FormItemRecordListWrapper
+    name="channelRecords"
+    label="渠道配置"
+    options={channelOptions}
+    xRecordSchema={channelFieldSchema}
+  />
+</DataSourceForm>
+```
+
+### 低代码平台配置示例
+
+1. **配置选项数据源**：
+   - optionSourceType: `api`
+   - dataSource: 选择一个表
+   - labelField: `name`
+   - valueField: `id`
+
+2. **配置 xRecordSchema**：
+```json
+[
+  {
+    "name": "productCode",
+    "uiSchema": {
+      "title": "产品代码",
+      "x-component": "Input",
+      "x-component-props": {
+        "placeholder": "请输入产品代码"
+      }
+    }
+  },
+  {
+    "name": "priority",
+    "uiSchema": {
+      "title": "优先级",
+      "x-component": "InputNumber",
+      "x-component-props": {
+        "min": 0,
+        "max": 100
+      }
+    }
+  }
+]
+```
+
+## 注意事项
+
+1. **字段命名**：
+   - xRecordSchema 中的字段名会成为最终提交的 key
+   - 避免使用系统保留字段（createdAt、updatedAt 等）
+
+2. **验证规则**：
+   - 支持所有 DataSourceForm 的验证规则
+   - 可以通过 `uiSchema['x-component-props'].requiredobj` 配置必填
+
+3. **性能优化**：
+   - 切换 tab 时不会清空表单，只是切换显示的数据
+   - 所有 tab 的数据都会保存在 value 中
+
+4. **嵌套结构**：
+   - 支持嵌套的 JSON 字段（通过 Input.JSON 组件）
+   - 可以配置 children 来定义嵌套结构
+
+## 常见问题
+
+### Q: 如何动态增减 option？
+
+A: 通过修改 `options` prop，RecordListWrapper 会自动更新 tab 导航。新增的 option 会创建空的表单数据。
+
+### Q: 如何验证所有 tab 的数据？
+
+A: 将 RecordListWrapper 放在 Form 中，调用 `form.validateFields()` 会自动验证所有 tab 的数据。
+
+### Q: 如何获取所有 tab 的数据？
+
+A: 通过 `onChange` 回调或 Form 的 `getFieldValue('fieldName')` 获取完整的 Map 结构。
+
+### Q: 支持哪些字段组件？
+
+A: 支持所有 DataSourceForm 支持的组件，但**渲染方式有两种**：
+
+#### 方式一：完整支持（推荐）- 在低代码平台配置 xRecordSchema
+在低代码平台上配置 `xRecordSchema` 后，系统会自动调用 `createFormItemSchema` 生成完整的表单组件，**完全支持**所有类型：
+- ✅ Input 系列（Input、TextArea、Email、Phone、Mobile、URL、Password、Subdomain）
+- ✅ Select、Radio、Radio.Group、Checkbox、Checkbox.Group、Switch
+- ✅ InputNumber、Percent
+- ✅ DatePicker、TimePicker
+- ✅ ColorPicker
+- ✅ Upload
+- ✅ Translation（多语言输入）
+- ✅ Input.JSON（JSON 编辑器）
+- ✅ IconPicker（图标选择器）
+- ✅ RecordListWrapper（支持嵌套）
+
+#### 方式二：简化支持（回退方案）- 直接传入 xRecordSchema 不通过低代码平台
+如果直接在代码中使用 xRecordSchema，会使用简化的 `renderFallbackField` 回退渲染：
+- ✅ Input 系列（基础支持）
+- ✅ Select、Radio.Group、Checkbox.Group、Switch、Checkbox
+- ✅ InputNumber、Percent
+- ✅ DatePicker、TimePicker
+- ✅ ColorPicker
+- ✅ Upload（基础支持）
+- ⚠️ Translation、IconPicker（使用 Input 代替）
+- ⚠️ Input.JSON（使用 TextArea 代替）
+
+**推荐做法：**
+在低代码平台配置 xRecordSchema，让系统自动生成完整的表单组件，这样可以获得最佳体验和完整功能。
+
+## 更新日志
+
+### v1.0.0
+- ✅ 增强渲染能力，支持完整的 Provider 链
+- ✅ 支持低代码引擎动态添加组件
+- ✅ 复用 DataSourceForm 的所有表单能力
+- ✅ 支持 xRecordSchema 配置驱动
+- ✅ 自动提供数据源上下文给子组件

package/lib/components/dataSourceComponents/fields/RecordListWrapper/ReadPretty.js

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/dataSourceComponents/fields/RecordListWrapper/ReadPretty.tsx
+/**
+* @title: RecordListWrapper 只读态
+* @description: 低代码详情模式下展示每个 option 对应的 record 数据。
+*   值结构: { optionValue: { field1: v1, field2: v2 } }
+*/
+const RecordListWrapperReadPretty = (props) => {
+	const { value, options = [] } = props;
+	/** 安全获取 Map 值 */
+	const safeValue = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+	const entries = Object.entries(safeValue);
+	if (!entries.length) return /* @__PURE__ */ react.default.createElement("span", null, "-");
+	return /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { style: { marginBottom: 8 } }, "Records: ", entries.length), entries.map(([key, record]) => {
+		const option = options.find((o) => String(o.value) === key);
+		const label = (option === null || option === void 0 ? void 0 : option.label) || key;
+		const displayLabel = typeof label === "object" ? JSON.stringify(label) : label;
+		return /* @__PURE__ */ react.default.createElement("div", {
+			key,
+			style: { marginBottom: 8 }
+		}, /* @__PURE__ */ react.default.createElement("div", { style: {
+			fontWeight: 500,
+			marginBottom: 4
+		} }, displayLabel), /* @__PURE__ */ react.default.createElement("pre", { style: {
+			margin: 0,
+			padding: 8,
+			background: "#f7f8fa",
+			borderRadius: 4,
+			fontSize: 12,
+			maxHeight: 200,
+			overflow: "auto"
+		} }, JSON.stringify(record, null, 2)));
+	}));
+};
+var ReadPretty_default = RecordListWrapperReadPretty;
+
+//#endregion
+exports.default = ReadPretty_default;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/WithMode.js

@@ -0,0 +1,86 @@
+const require_rolldown_runtime = require('../../../../_virtual/rolldown_runtime.js');
+const require_objectSpread2 = require('../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js');
+const require_index = require('../../dataSourceSubForm/index.js');
+const require_utils = require('../../dataSourceForm/utils.js');
+const require_ReadPretty = require('./ReadPretty.js');
+const require_Tabs = require('../Tabs/Tabs.js');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/components/dataSourceComponents/fields/RecordListWrapper/WithMode.tsx
+/**
+* @title RecordListWrapper 编辑器
+* @description
+*   上部为插槽区域（topSlot），通过 cloneElement 注入 options/value/onChange，默认展示 Tabs 导航。
+*   下部委托给 DataSourceSubForm 渲染当前 activeKey 对应的子表单。
+*   切换 tab 时通过 key={activeKey} 强制重新挂载 DataSourceSubForm，实现值自动同步。
+*
+*   值结构: { [optionValue]: { field1: v1, field2: v2 } }
+*/
+const RecordListWrapperBase = (props) => {
+	const { value, onChange, options = [], children, xRecordSchema, topSlot, slot, renderMode, __designMode, defaultValue } = props;
+	console.log("defaultActiveKey77777", defaultValue);
+	/** value 是 Map: { optionValue: { field1: v1 } } */
+	const safeValue = (0, react.useMemo)(() => {
+		if (value && typeof value === "object" && !Array.isArray(value)) return value;
+		return {};
+	}, [value]);
+	/**
+	* 当前选中的 option key
+	* 优先级：defaultActiveKey > options[0].value
+	*/
+	const [activeKey, setActiveKey] = (0, react.useState)(() => {
+		var _options$;
+		if (defaultValue != null) return String(defaultValue);
+		return String(((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value) || "");
+	});
+	/** defaultValue 变化时同步更新 activeKey */
+	(0, react.useEffect)(() => {
+		if (defaultValue != null) setActiveKey(String(defaultValue));
+	}, [defaultValue]);
+	/** options 变化时校正 activeKey（仅在无 defaultValue 且当前 key 不合法时回退） */
+	(0, react.useEffect)(() => {
+		if (options.length && !options.find((o) => String(o.value) === activeKey)) {
+			var _options$2;
+			setActiveKey(defaultValue != null ? String(defaultValue) : String(((_options$2 = options[0]) === null || _options$2 === void 0 ? void 0 : _options$2.value) || ""));
+		}
+	}, [options]);
+	const renderTopSlot = () => {
+		const slotElement = topSlot || slot;
+		if (slotElement && react.default.isValidElement(slotElement)) return react.default.cloneElement(slotElement, {
+			options,
+			value: activeKey,
+			onChange: setActiveKey
+		});
+		const tabOptions = options.map((o) => {
+			var _o$label;
+			return require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, o), {}, { label: (_o$label = o.label) !== null && _o$label !== void 0 ? _o$label : String(o.value) });
+		});
+		return /* @__PURE__ */ react.default.createElement(require_Tabs.default, {
+			options: tabOptions,
+			value: activeKey,
+			onChange: (key) => setActiveKey(String(key)),
+			disabled: renderMode === "disabled"
+		});
+	};
+	const renderBottom = () => {
+		if (!options.length) return /* @__PURE__ */ react.default.createElement("div", { style: {
+			color: "#999",
+			fontSize: 12
+		} }, "No options available. Configure xDataSource options first.");
+		return /* @__PURE__ */ react.default.createElement(require_index.default, {
+			key: activeKey,
+			value: safeValue[activeKey],
+			onChange: (recordValue) => onChange === null || onChange === void 0 ? void 0 : onChange(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, safeValue), {}, { [activeKey]: recordValue })),
+			xRecordSchema,
+			renderMode,
+			__designMode
+		}, children);
+	};
+	return /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { style: { marginBottom: 12 } }, renderTopSlot()), renderBottom());
+};
+const RecordListWrapperWithMode = require_utils.withMode(RecordListWrapperBase, require_ReadPretty.default);
+var WithMode_default = RecordListWrapperWithMode;
+
+//#endregion
+exports.default = WithMode_default;