@pisell/materials 3.3.86 → 3.3.88

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

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ModeType } from '../dataSourceForm/type';
+/**
+ * @title 字段选项接口
+ * @description 用于下拉框、单选框等组件的选项配置
+ */
+export interface DataSourceSubFormOption {
+    label?: React.ReactNode;
+    value: string | number;
+}
+/**
+ * @title 字段 Schema 接口
+ * @description 定义表单字段的结构和配置
+ */
+export 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 表单字段集合的结构定义
+ */
+export interface DataSourceSubFormSchema {
+    /** 字段列表 */
+    fields?: DataSourceSubFormFieldSchema[];
+    /** 属性映射（key-value 形式） */
+    properties?: Record<string, any>;
+    /** 子字段列表 */
+    children?: DataSourceSubFormFieldSchema[];
+}
+/**
+ * @title DataSourceSubForm 组件 Props
+ * @description
+ * 独立的子表单组件，用于渲染一组表单字段。
+ * 支持通过 xRecordSchema 配置字段，或直接传入 children 低代码子组件。
+ */
+export 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;
+}

package/lib/components/dataSourceComponents/dataSourceSubForm/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/dataSourceSubForm/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const useDataSourceKey: () => {
     dataSourceKey: string | undefined;
     dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const useDrawerState: (operationContent?: {
     [key: string]: import("react").ReactNode;
 } | undefined) => any;

package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableQuery.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataSourceTableProps } from '../type';
 declare type Params = {
     pagination?: {

package/lib/components/dataSourceComponents/fields/RecordListWrapper/ReadPretty.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RecordListWrapperProps } from './type';
+/**
+ * @title: RecordListWrapper 只读态
+ * @description: 低代码详情模式下展示每个 option 对应的 record 数据。
+ *   值结构: { optionValue: { field1: v1, field2: v2 } }
+ */
+declare const RecordListWrapperReadPretty: React.FC<RecordListWrapperProps>;
+export default RecordListWrapperReadPretty;

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

@@ -0,0 +1,64 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/RecordListWrapper/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_react = __toESM(require("react"));
+var RecordListWrapperReadPretty = (props) => {
+  const { value, options = [] } = props;
+  const safeValue = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+  const entries = Object.entries(safeValue);
+  if (!entries.length) {
+    return /* @__PURE__ */ import_react.default.createElement("span", null, "-");
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_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 ? void 0 : option.label) || key;
+    const displayLabel = typeof label === "object" ? JSON.stringify(label) : label;
+    return /* @__PURE__ */ import_react.default.createElement("div", { key, style: { marginBottom: 8 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontWeight: 500, marginBottom: 4 } }, displayLabel), /* @__PURE__ */ import_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;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RecordListWrapperProps } from './type';
+declare const RecordListWrapperWithMode: React.FC<RecordListWrapperProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default RecordListWrapperWithMode;

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

@@ -0,0 +1,157 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/RecordListWrapper/WithMode.tsx
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("../../dataSourceForm/utils");
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_Tabs = __toESM(require("../Tabs/Tabs"));
+var import_dataSourceSubForm = __toESM(require("../../dataSourceSubForm"));
+var RecordListWrapperBase = (props) => {
+  const {
+    value,
+    onChange,
+    options = [],
+    children,
+    xRecordSchema,
+    topSlot,
+    slot,
+    renderMode,
+    __designMode,
+    defaultValue
+  } = props;
+  const isMounted = (0, import_react.useRef)(false);
+  const dataSourceSubFormRef = (0, import_react.useRef)(null);
+  const safeValue = (0, import_react.useMemo)(() => {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return value;
+    }
+    return {};
+  }, [value]);
+  const [activeKey, setActiveKey] = (0, import_react.useState)(() => {
+    var _a;
+    if (defaultValue != null) return String(defaultValue);
+    return String(((_a = options[0]) == null ? void 0 : _a.value) || "");
+  });
+  (0, import_react.useEffect)(() => {
+    if (defaultValue != null) {
+      setActiveKey(String(defaultValue));
+    }
+  }, [defaultValue]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (options.length && !options.find((o) => String(o.value) === activeKey)) {
+      setActiveKey(
+        defaultValue != null ? String(defaultValue) : String(((_a = options[0]) == null ? void 0 : _a.value) || "")
+      );
+    }
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    if (isMounted.current) {
+      return;
+    }
+    if ((options == null ? void 0 : options.length) > 0 && dataSourceSubFormRef.current) {
+      const defaultValues = ((_b = (_a = dataSourceSubFormRef.current).getFieldsValue) == null ? void 0 : _b.call(_a)) ?? {};
+      const completeValue = options.reduce(
+        (acc, option) => {
+          if (option.value === null || option.value === void 0) return acc;
+          acc[String(option.value)] = {
+            ...defaultValues,
+            ...safeValue[String(option.value)] || {}
+          };
+          return acc;
+        },
+        {}
+      );
+      onChange == null ? void 0 : onChange(completeValue);
+      isMounted.current = true;
+    }
+  }, [options, safeValue]);
+  const renderTopSlot = () => {
+    const slotElement = topSlot || slot;
+    if (slotElement && import_react.default.isValidElement(slotElement)) {
+      return import_react.default.cloneElement(slotElement, {
+        options,
+        value: activeKey,
+        onChange: setActiveKey
+      });
+    }
+    const tabOptions = options.map((o) => ({
+      ...o,
+      label: o.label ?? String(o.value)
+    }));
+    if (!options.length) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 16 } }, "暂无选项，请配置数据源。");
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Tabs.default,
+      {
+        options: tabOptions,
+        value: activeKey,
+        onChange: (key) => setActiveKey(String(key)),
+        disabled: renderMode === "disabled"
+      }
+    );
+  };
+  const renderBottom = () => {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_dataSourceSubForm.default,
+      {
+        activeKey,
+        value: safeValue[activeKey],
+        onChange: (recordValue) => onChange == null ? void 0 : onChange({ ...safeValue || {}, [activeKey]: recordValue || {} }),
+        xRecordSchema,
+        renderMode,
+        __designMode
+      },
+      children
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", height: 0, visibility: "hidden", overflow: "hidden" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_dataSourceSubForm.default,
+      {
+        key: "record-list-wrapper-default-value-form",
+        ref: dataSourceSubFormRef,
+        xRecordSchema,
+        renderMode,
+        __designMode
+      },
+      children
+    )));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 12 } }, renderTopSlot()), renderBottom());
+};
+var RecordListWrapperWithMode = (0, import_utils.withMode)(
+  RecordListWrapperBase,
+  import_ReadPretty.default
+);
+var WithMode_default = RecordListWrapperWithMode;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const RecordListWrapperWithDataSource: (props: import("./type").RecordListWrapperProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps & {
+    options?: any;
+    optionSourceType?: "default" | "custom" | "api" | undefined;
+    labelField: string;
+    valueField: string;
+    extraParams?: Record<string, any> | undefined;
+} & {
+    dataSource?: any;
+    extraParams?: Record<string, any> | undefined;
+}) => React.JSX.Element;
+export default RecordListWrapperWithDataSource;

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

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/RecordListWrapper/index.tsx
+var RecordListWrapper_exports = {};
+__export(RecordListWrapper_exports, {
+  default: () => RecordListWrapper_default
+});
+module.exports = __toCommonJS(RecordListWrapper_exports);
+var import_utils = require("../../dataSourceForm/utils");
+var import_WithMode = __toESM(require("./WithMode"));
+var RecordListWrapperWithFormItem = (0, import_utils.withFormItem)(import_WithMode.default);
+var RecordListWrapperWithOptions = (0, import_utils.withOptions)(RecordListWrapperWithFormItem);
+var RecordListWrapperWithDataSource = (0, import_utils.withDataSource)(RecordListWrapperWithOptions);
+var RecordListWrapper_default = RecordListWrapperWithDataSource;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/type.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { ModeType } from '../../dataSourceForm/type';
+export interface RecordListWrapperOption {
+    label?: React.ReactNode;
+    value: string | number;
+}
+export interface RecordListWrapperFieldSchema {
+    name: string;
+    label?: React.ReactNode;
+    component?: string;
+    componentName?: string;
+    type?: string;
+    /** 接口类型，用于映射到具体组件（如 Select、Input 等） */
+    interface?: string;
+    options?: RecordListWrapperOption[];
+    props?: Record<string, any>;
+    /** 子字段（用于嵌套结构，如 Input.JSON） */
+    children?: RecordListWrapperFieldSchema[];
+    _children?: RecordListWrapperFieldSchema[];
+    schema?: Record<string, any>;
+    uiSchema?: {
+        title?: React.ReactNode;
+        enum?: RecordListWrapperOption[];
+        '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'?: RecordListWrapperSchema | RecordListWrapperFieldSchema[] | string;
+        default?: any;
+        type?: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
+    };
+}
+export interface RecordListWrapperSchema {
+    fields?: RecordListWrapperFieldSchema[];
+    properties?: Record<string, any>;
+    children?: RecordListWrapperFieldSchema[];
+}
+/**
+ * @title RecordListWrapper 组件 Props
+ * @description
+ * 值结构为 Map：key 是 xDataSource option 的 value，value 是该 option 对应的表单字段值。
+ * 例如：{ "5": { "code": "xxx", "type": "yyy" }, "3": { "code": "aaa" } }
+ */
+export interface RecordListWrapperProps {
+    renderMode: ModeType;
+    /**
+     * 值: Map 结构
+     * - key: xDataSource option 的 value
+     * - value: 该 option 对应的 xRecordSchema 字段值对象
+     */
+    value?: Record<string, Record<string, any>>;
+    onChange?: (value: Record<string, Record<string, any>>) => void;
+    /** xDataSource 选项列表，驱动 tabs 导航和 records 结构 */
+    options?: RecordListWrapperOption[];
+    /**
+     * 上部插槽：用户可在低代码平台拖入自定义导航组件。
+     * RecordListWrapper 会通过 cloneElement 注入 options、value（activeKey）、onChange。
+     */
+    topSlot?: React.ReactNode;
+    slot?: React.ReactNode;
+    /** xRecordSchema：定义每条记录的子字段结构 */
+    xRecordSchema?: string | RecordListWrapperSchema | RecordListWrapperFieldSchema[];
+    /** 容器 children：低代码引擎渲染的子组件节点 */
+    children?: React.ReactNode;
+    /** 低代码设计模式标识 */
+    __designMode?: string;
+    /**
+     * 默认激活的 Tab key，外部传入时优先于 options[0].value
+     */
+    defaultValue?: string;
+    [key: string]: any;
+}

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

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/RecordListWrapper/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/lib/components/dataSourceComponents/fields/Tabs/ReadPretty.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TabsReadPrettyProps } from './type';
+/**
+ * Tabs 只读展示组件
+ *
+ * @description 在 view / tableView 模式下展示选中的标签名称文本。
+ */
+declare const TabsReadPretty: React.FC<TabsReadPrettyProps>;
+export default TabsReadPretty;

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

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/fields/Tabs/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_useValueMap = __toESM(require("../../hooks/useValueMap"));
+var import_utils = require("../../dataSourceForm/utils");
+var TabsReadPretty = ({
+  value,
+  options,
+  renderMode
+}) => {
+  const valueMap = (0, import_useValueMap.default)(options || []);
+  return (0, import_utils.renderValueWithMap)(value, valueMap, renderMode);
+};
+var ReadPretty_default = TabsReadPretty;

package/lib/components/dataSourceComponents/fields/Tabs/Tabs.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TabsProps } from './type';
+import './Tabs.less';
+/**
+ * Tabs 胶囊风格选项卡组件
+ *
+ * @description 提供类似 Segmented 控件的胶囊风格选项卡，支持受控与非受控模式。
+ * 用于表单中替代 Radio.Group，展示更为直观的标签页切换交互。
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   value={current}
+ *   options={[
+ *     { label: '校区', value: 'campus' },
+ *     { label: '场地', value: 'venue' },
+ *   ]}
+ *   onChange={(val) => setCurrent(val)}
+ * />
+ * ```
+ */
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;