@hi-ui/schema-fields 4.0.0-experimental.7 → 4.0.0-experimental.9

package/lib/fields/basic/tree-select/index.js

@@ -0,0 +1,47 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import TreeSelect from '@hi-ui/tree-select';
+import { AsyncOptsDataInjector } from '@hi-ui/schema-option-injector';
+import { ProSelectableField } from '../../../extensible/selectable/index.js';
+var ProTreeSelect = /*#__PURE__*/function (_ProSelectableField) {
+  _inheritsLoose(ProTreeSelect, _ProSelectableField);
+  function ProTreeSelect() {
+    return _ProSelectableField.apply(this, arguments) || this;
+  }
+  var _proto = ProTreeSelect.prototype;
+  _proto.render = function render(data, ctx) {
+    var title = this.getOptionTitle(ctx);
+    return _ProSelectableField.prototype.render.call(this, title, ctx);
+  };
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var _a, _b;
+    var fieldProps = this.getFieldProps({
+      overlay: (_a = ctx.field.extra) === null || _a === void 0 ? void 0 : _a.popperProps
+    }, ctx);
+    // NOTE 实测 searchMode 不传时，无法开启搜索
+    // 考虑到是有接口搜索时，会按照关键字过滤，因此默认采用 filter 模式
+    if (fieldProps.request) fieldProps.searchMode = 'filter';
+    return /*#__PURE__*/React.createElement(AsyncOptsDataInjector, Object.assign({}, fieldProps, {
+      renderCtx: ctx,
+      setSelectedRawOption: (_b = ctx.field.payload) === null || _b === void 0 ? void 0 : _b.setSelectedRawOption
+    }), /*#__PURE__*/React.createElement(TreeSelect, null));
+  };
+  _proto.renderEditable = function renderEditable(data, ctx) {
+    var dataKey = ctx.dataKey;
+    var title = this.getOptionTitle(ctx, dataKey);
+    return _ProSelectableField.prototype.renderEditable.call(this, title, ctx, {
+      suffix: this.suffixEl
+    });
+  };
+  return ProTreeSelect;
+}(ProSelectableField);
+export { ProTreeSelect };

package/lib/fields/basic/upload/custom.d.ts

@@ -0,0 +1,3 @@
+import { type UploadBridgeProps } from '../../../components/upload-bridge';
+export type CommonUploadProps = UploadBridgeProps;
+export declare function CommonUpload(props: CommonUploadProps): JSX.Element;

package/lib/fields/basic/upload/custom.js

@@ -0,0 +1,16 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import Upload from '@hi-ui/upload';
+import { UploadBridge } from '../../../components/upload-bridge/index.js';
+function CommonUpload(props) {
+  return /*#__PURE__*/React.createElement(UploadBridge, Object.assign({}, props), /*#__PURE__*/React.createElement(Upload, null));
+}
+export { CommonUpload };

package/lib/fields/basic/upload/index.d.ts

@@ -0,0 +1,8 @@
+import { ProField } from '../../../base';
+import type { ProFieldRenderFormItemCtx } from '../../../base';
+import { CommonUpload, type CommonUploadProps } from './custom';
+export { CommonUpload, CommonUploadProps };
+export type ProUploadProps = CommonUploadProps & {};
+export declare class ProUpload extends ProField {
+    renderFormItem(_: null, ctx: ProFieldRenderFormItemCtx<ProUploadProps>): JSX.Element;
+}

package/lib/fields/basic/upload/index.js

@@ -0,0 +1,34 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { cx } from '@hi-ui/classname';
+import { ProField } from '../../../base.js';
+import { CommonUpload } from './custom.js';
+var ProUpload = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProUpload, _ProField);
+  function ProUpload() {
+    return _ProField.apply(this, arguments) || this;
+  }
+  var _proto = ProUpload.prototype;
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var fieldProps = this.getFieldProps({
+      value: undefined
+    }, ctx);
+    var className = cx('pro-upload', fieldProps.className);
+    return /*#__PURE__*/React.createElement(CommonUpload
+    // pro-upload
+    , Object.assign({}, fieldProps, {
+      className: className
+    }));
+  };
+  return ProUpload;
+}(ProField);
+export { CommonUpload, ProUpload };

package/lib/fields/enhance/number-range/index.d.ts

@@ -0,0 +1,7 @@
+import type { NumberRangeProps } from '@hi-ui/number-range';
+import { ProField } from '../../../base';
+import type { ProFieldRenderFormItemCtx } from '../../../base';
+export type ProNumberRangeProps = NumberRangeProps & {};
+export declare class ProNumberRange extends ProField {
+    renderFormItem(_: null, ctx: ProFieldRenderFormItemCtx<ProNumberRangeProps>): JSX.Element;
+}

package/lib/fields/enhance/number-range/index.js

@@ -0,0 +1,26 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { NumberRange } from '@hi-ui/number-range';
+import { ProField } from '../../../base.js';
+var ProNumberRange = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProNumberRange, _ProField);
+  function ProNumberRange() {
+    return _ProField.apply(this, arguments) || this;
+  }
+  var _proto = ProNumberRange.prototype;
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var fieldProps = this.getFieldProps({}, ctx);
+    return /*#__PURE__*/React.createElement(NumberRange, Object.assign({}, fieldProps));
+  };
+  return ProNumberRange;
+}(ProField);
+export { ProNumberRange };

package/lib/fields/semantic/date/index.d.ts

@@ -0,0 +1,15 @@
+import { Dayjs } from 'dayjs';
+import { type DatePickerProps } from '@hi-ui/date-picker';
+import { ProField } from '../../../base';
+import type { ProFieldRenderFormItemCtx, ProFieldRenderCtx, ProFieldRenderEditableCtx } from '../../../base';
+export type ProDateProps = Omit<DatePickerProps, 'format'> & {
+    format?: string | ((date: Dayjs) => string);
+};
+export declare class ProDate extends ProField {
+    dftFieldProps: ProDateProps;
+    render(data: string, ctx: ProFieldRenderCtx<ProDateProps>): JSX.Element;
+    renderFormItem(_: null, ctx: ProFieldRenderFormItemCtx<ProDateProps>): JSX.Element;
+    protected getFormattedText(date: Dayjs, fieldProps: ProDateProps): string;
+    protected getEditablePlaceholder(data: string | number | Date, ctx: ProFieldRenderEditableCtx<ProDateProps>): string;
+    renderEditable(data: string, ctx: ProFieldRenderEditableCtx<ProDateProps>): JSX.Element;
+}

package/lib/fields/semantic/date/index.js

@@ -0,0 +1,67 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { isNil } from 'lodash-es';
+import dayjs from 'dayjs';
+import EllipsisTooltip from '@hi-ui/ellipsis-tooltip';
+import { DatePicker } from '@hi-ui/date-picker';
+import { CalendarOutlined } from '@hi-ui/icons';
+import { getPrefixStyleVar } from '@hi-ui/classname';
+import { ProField } from '../../../base.js';
+import { ReadonlyWrapper } from '../../../components/span/index.js';
+var defaultFormat = 'YYYY-MM-DD HH:mm:ss';
+var ProDate = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProDate, _ProField);
+  function ProDate() {
+    var _this;
+    _this = _ProField.apply(this, arguments) || this;
+    _this.dftFieldProps = {
+      format: defaultFormat
+    };
+    return _this;
+  }
+  var _proto = ProDate.prototype;
+  _proto.render = function render(data, ctx) {
+    if (!data) return this.dftDom;
+    var date = dayjs(data);
+    var fieldProps = this.getFieldProps(this.dftFieldProps, ctx);
+    var formatted = this.getFormattedText(date, fieldProps);
+    // 无效日期展示 -
+    if (formatted === 'Invalid Date') return this.dftDom;
+    return /*#__PURE__*/React.createElement(ReadonlyWrapper, null, /*#__PURE__*/React.createElement(EllipsisTooltip, null, formatted));
+  };
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var _a;
+    var fieldProps = this.getFieldProps(Object.assign(Object.assign({}, this.dftFieldProps), {
+      overlay: (_a = ctx.field.extra) === null || _a === void 0 ? void 0 : _a.popperProps
+    }), ctx);
+    return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, fieldProps));
+  };
+  _proto.getFormattedText = function getFormattedText(date, fieldProps) {
+    var formatted = typeof fieldProps.format === 'function' ? fieldProps.format(date) : date.format(fieldProps.format || defaultFormat);
+    return formatted;
+  };
+  _proto.getEditablePlaceholder = function getEditablePlaceholder(data, ctx) {
+    if (isNil(data)) return '';
+    var fieldProps = this.getFieldProps(this.dftFieldProps, ctx);
+    return this.getFormattedText(dayjs(data), fieldProps);
+  };
+  _proto.renderEditable = function renderEditable(data, ctx) {
+    return _ProField.prototype.renderEditable.call(this, data, ctx, {
+      suffix: ( /*#__PURE__*/React.createElement(CalendarOutlined, {
+        size: 16,
+        color: "var(" + getPrefixStyleVar('color-gray-500') + ", #929aa6)"
+      }))
+    });
+  };
+  return ProDate;
+}(ProField);
+export { ProDate };

package/lib/fields/semantic/image/index.d.ts

@@ -0,0 +1,11 @@
+import { ProField } from '../../../base';
+import type { ProFieldRenderCtx, ProFieldRenderFormItemCtx } from '../../../base';
+import { ImageUpload, type ImageUploadProps } from './upload';
+export type ProImageProps = UnknownObject & {
+    customImages?: (data: string[], ctx: ProFieldRenderCtx<ProImageProps>) => string[];
+};
+export { ImageUpload, ImageUploadProps };
+export declare class ProImage extends ProField {
+    render(data: unknown, ctx: ProFieldRenderCtx<ProImageProps>): JSX.Element;
+    renderFormItem(_: null, ctx: ProFieldRenderFormItemCtx<ImageUploadProps>): JSX.Element;
+}

package/lib/fields/semantic/image/index.js

@@ -0,0 +1,51 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { cx } from '@hi-ui/classname';
+import { ImagePreview } from '../../../components/image-preview/index.js';
+import { ProField } from '../../../base.js';
+import { ReadonlyWrapper } from '../../../components/span/index.js';
+import { ImageUpload } from './upload.js';
+var ProImage = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProImage, _ProField);
+  function ProImage() {
+    return _ProField.apply(this, arguments) || this;
+  }
+  var _proto = ProImage.prototype;
+  _proto.render = function render(data, ctx) {
+    var _a;
+    if (!data) return this.dftDom;
+    if (Array.isArray(data) && data.length === 0) return this.dftDom;
+    var dftImages = Array.isArray(data) ? data : [data];
+    var fieldProps = this.getFieldProps({}, ctx);
+    var images = ((_a = fieldProps.customImages) === null || _a === void 0 ? void 0 : _a.call(fieldProps, dftImages, ctx)) || dftImages;
+    return /*#__PURE__*/React.createElement(ReadonlyWrapper, {
+      dataSet: {
+        fieldType: ctx.field.valueType
+      }
+    }, /*#__PURE__*/React.createElement(ImagePreview, {
+      images: images
+    }));
+  };
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var fieldProps = this.getFieldProps({
+      value: undefined
+    }, ctx);
+    var className = cx('pro-image-upload', fieldProps.className);
+    return /*#__PURE__*/React.createElement(ImageUpload
+    // pro-upload
+    , Object.assign({}, fieldProps, {
+      className: className
+    }));
+  };
+  return ProImage;
+}(ProField);
+export { ImageUpload, ProImage };

package/lib/fields/semantic/image/upload.d.ts

@@ -0,0 +1,3 @@
+import { type UploadBridgeProps } from '../../../components/upload-bridge';
+export type ImageUploadProps = Omit<UploadBridgeProps, 'type'>;
+export declare function ImageUpload(props: ImageUploadProps): JSX.Element;

package/lib/fields/semantic/image/upload.js

@@ -0,0 +1,20 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { PictureUpload } from '@hi-ui/upload';
+import { mergeProps } from '@hi-ui/schema-utils';
+import { UploadBridge } from '../../../components/upload-bridge/index.js';
+function ImageUpload(props) {
+  var finalProps = mergeProps({
+    accept: '.png,.jpg,.jpeg,.gif,.webp,.svg'
+  }, props);
+  return /*#__PURE__*/React.createElement(UploadBridge, Object.assign({}, finalProps), /*#__PURE__*/React.createElement(PictureUpload, null));
+}
+export { ImageUpload };

package/lib/fields/semantic/link/index.d.ts

@@ -0,0 +1,31 @@
+import { ProField } from '../../../base';
+import type { ProFieldRenderCtx } from '../../../base';
+export type ProLinkProps = UnknownObject & {
+    /** 是否使用href跳转，默认使用Link组件跳转 */
+    isHref?: boolean;
+    /**
+     * 链接字段，优先级低于 customLink
+     * @desc 支持路径字符串，例如 user.avatar
+     */
+    linkField?: string;
+    /** 自定义链接地址，优先级高于 linkField */
+    customLink?: (data: string, ctx: CustomLinkCtx) => string;
+    /** 额外传递给Link组件的state，模型会自动将rowData注入 */
+    extraLinkState?: AnyObject;
+};
+export type CustomLinkCtx = ProFieldRenderCtx<ProLinkProps>;
+export declare class ProLink extends ProField {
+    renderCtx: ProFieldRenderCtx<ProLinkProps>;
+    fieldProps: ProLinkProps;
+    render(data: string, ctx: ProFieldRenderCtx<ProLinkProps>): JSX.Element;
+    /**
+     * renderHref
+     * @desc 是指固定的链接地址，直接跳转出系统 */
+    renderHref(href: string): JSX.Element;
+    /**
+     * renderLink
+     * @desc 是指链接地址是动态的，需要根据数据进行拼接
+     * @desc 通常用于链接到系统其他页面 */
+    renderLink(data: unknown): JSX.Element;
+    getGoTo(data: unknown): any;
+}

package/lib/fields/semantic/link/index.js

@@ -0,0 +1,82 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { get } from 'lodash-es';
+import EllipsisTooltip from '@hi-ui/ellipsis-tooltip';
+import { mergeProps } from '@hi-ui/schema-utils';
+import { ProField } from '../../../base.js';
+import { ReadonlyWrapper } from '../../../components/span/index.js';
+var ProLink = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProLink, _ProField);
+  function ProLink() {
+    return _ProField.apply(this, arguments) || this;
+  }
+  var _proto = ProLink.prototype;
+  _proto.render = function render(data, ctx) {
+    if (!data) return this.dftDom;
+    this.renderCtx = ctx;
+    var fieldProps = this.getFieldProps({
+      linkField: ''
+    }, ctx);
+    this.fieldProps = fieldProps;
+    var _fieldProps$isHref = fieldProps.isHref,
+      isHref = _fieldProps$isHref === void 0 ? true : _fieldProps$isHref;
+    if (isHref) return this.renderHref(data);else return this.renderLink(data);
+  }
+  /**
+   * renderHref
+   * @desc 是指固定的链接地址，直接跳转出系统 */;
+  _proto.renderHref = function renderHref(href) {
+    var to = this.getGoTo(href);
+    return /*#__PURE__*/React.createElement(ReadonlyWrapper, null, /*#__PURE__*/React.createElement("a", {
+      href: to,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      // TODO color 放这里不是很好，待优化
+      style: {
+        color: '#237ffa',
+        textDecoration: 'underline'
+      }
+    }, /*#__PURE__*/React.createElement(EllipsisTooltip, null, href)));
+  }
+  /**
+   * renderLink
+   * @desc 是指链接地址是动态的，需要根据数据进行拼接
+   * @desc 通常用于链接到系统其他页面 */;
+  _proto.renderLink = function renderLink(data) {
+    var _a;
+    var rowData = this.renderCtx.rowData;
+    var to = this.getGoTo(data);
+    var state = mergeProps(rowData, (_a = this.fieldProps) === null || _a === void 0 ? void 0 : _a.extraLinkState);
+    return /*#__PURE__*/React.createElement(ReadonlyWrapper, null, /*#__PURE__*/React.createElement(Link, {
+      to: to,
+      state: state,
+      style: {
+        color: '#237ffa'
+      }
+    }, /*#__PURE__*/React.createElement(EllipsisTooltip, null, data)));
+  };
+  _proto.getGoTo = function getGoTo(data) {
+    var rowData = this.renderCtx.rowData;
+    var _this$fieldProps = this.fieldProps,
+      linkField = _this$fieldProps.linkField,
+      customLink = _this$fieldProps.customLink;
+    // customLink 优先级最高
+    if (customLink) return customLink(data, this.renderCtx);
+    // linkField 存在，则使用 linkField 拼接
+    if (linkField) return get(rowData, linkField);
+    // 最后使用本字段的值
+    return data;
+  };
+  return ProLink;
+}(ProField);
+export { ProLink };

package/lib/fields/semantic/number/index.d.ts

@@ -0,0 +1,21 @@
+import { type NumberInputProps } from '@hi-ui/number-input';
+import { ProField } from '../../../base';
+import type { ProFieldRenderCtx, ProFieldRenderEditableCtx, ProFieldRenderFormItemCtx } from '../../../base';
+import type { NormalFieldCtxType } from '../../../utils';
+export type ProNumberProps = NumberInputProps & {
+    /**
+     * 指定数字变化的精度
+     * @desc 可编辑模式时，指定数字变化的精度
+     * @desc 内部使用 HiUI 的 formatter 方法实现四舍五入精度处理
+     * @desc 如需更复杂的格式化逻辑精度处理，请结合 NumberUtil 自行实现 formatter 方法
+     */
+    precision?: number;
+};
+export declare class ProNumber extends ProField {
+    protected _getFieldProps(ctx: NormalFieldCtxType<ProNumberProps>): ProNumberProps;
+    render(data: unknown, ctx: ProFieldRenderCtx<ProNumberProps>): JSX.Element;
+    renderFormItem(_: null, ctx: ProFieldRenderFormItemCtx<ProNumberProps>): JSX.Element;
+    protected getEditablePlaceholder(data: unknown): number | null;
+    renderEditable(data: unknown, ctx: ProFieldRenderEditableCtx<ProNumberProps>): JSX.Element;
+    toFormatted(data: number, ctx: NormalFieldCtxType<ProNumberProps>): string;
+}

package/lib/fields/semantic/number/index.js

@@ -0,0 +1,91 @@
+/** @LICENSE
+ * @hi-ui/schema-fields
+ * https://github.com/XiaoMi/hiui/tree/master/packages/schema/schema-fields#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
+import React from 'react';
+import { isNil } from 'lodash-es';
+import NumberInput from '@hi-ui/number-input';
+import EllipsisTooltip from '@hi-ui/ellipsis-tooltip';
+import { NumberUtil } from '@hi-ui/schema-utils';
+import { ProField } from '../../../base.js';
+import { ReadonlyWrapper } from '../../../components/span/index.js';
+var ProNumber = /*#__PURE__*/function (_ProField) {
+  _inheritsLoose(ProNumber, _ProField);
+  function ProNumber() {
+    return _ProField.apply(this, arguments) || this;
+  }
+  var _proto = ProNumber.prototype;
+  _proto._getFieldProps = function _getFieldProps(ctx) {
+    var fieldProps = _ProField.prototype.getFieldProps.call(this, {
+      placeholder: this.getDftPlaceholder(ctx)
+    }, ctx);
+    // 增加精度处理逻辑
+    // 如果精度存在，且没有 formatter 方法，则增加精度处理逻辑
+    if (!isNil(fieldProps.precision) && isNil(fieldProps.formatter)) {
+      fieldProps.formatter = function ProNumberPrecisionFormatter(value) {
+        return NumberUtil.round(value, fieldProps.precision);
+      };
+    }
+    return fieldProps;
+  };
+  _proto.render = function render(data, ctx) {
+    // 不是数字
+    if (typeof data !== 'number') {
+      /** 且不存在 */if (!data) return this.dftDom;
+    }
+    // 或者是NaN
+    else if (isNaN(data)) return this.dftDom;
+    var num = Number(data);
+    if (isNaN(num)) return this.dftDom;
+    var formatted = this.toFormatted(num, ctx);
+    return /*#__PURE__*/React.createElement(ReadonlyWrapper, null, /*#__PURE__*/React.createElement(EllipsisTooltip, null, formatted));
+  };
+  _proto.renderFormItem = function renderFormItem(_, ctx) {
+    var fieldProps = this._getFieldProps(ctx);
+    return /*#__PURE__*/React.createElement(NumberInput, Object.assign({}, fieldProps));
+  };
+  _proto.getEditablePlaceholder = function getEditablePlaceholder(data) {
+    // 记录：返回undefined，会被转换为0，null则不会
+    if (isNil(data)) return null;
+    if (typeof data === 'number') return isNaN(data) ? null : data;
+    var num = Number(data);
+    return isNaN(num) ? null : num;
+  };
+  _proto.renderEditable = function renderEditable(data, ctx) {
+    var _a;
+    var fieldProps = this._getFieldProps(ctx);
+    return /*#__PURE__*/React.createElement(NumberInput, {
+      value: this.getEditablePlaceholder(data),
+      disabled: (_a = ctx.field.control) === null || _a === void 0 ? void 0 : _a.disabled,
+      onDoubleClick: ctx.onActivate,
+      onFocus: ctx.onActivate,
+      placeholder: fieldProps.placeholder,
+      formatter: fieldProps.formatter,
+      min: fieldProps.min,
+      max: fieldProps.max,
+      step: fieldProps.step,
+      onChange: ctx.onActivate
+    });
+  }
+  // 可能之后还有更复杂的格式化逻辑
+  ;
+
+  _proto.toFormatted = function toFormatted(data, ctx) {
+    var fieldProps = this._getFieldProps(ctx);
+    // 123456789 => 123,456,789
+    // 123.456789 => 123.4567 // precision: 4
+    return data.toLocaleString('zh-Hans', {
+      // 也是四舍五入进位
+      minimumFractionDigits: fieldProps.precision,
+      maximumFractionDigits: fieldProps.precision
+    });
+  };
+  return ProNumber;
+}(ProField);
+export { ProNumber };

package/lib/fields/semantic/tag/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type TagProps } from '@hi-ui/tag';
+import { ProField, type ProFieldRenderCtx } from '../../../base';
+import type { ColorPreset, BuiltinColorEnum, SCMColorEnumPreset } from './preset';
+import './index.scss';
+export type ProTagProps = TagProps & {
+    /** 是否显示边框 */
+    bordered?: boolean;
+    colorPreset: Record<string, LiteralUnion<BuiltinColorEnum | SCMColorEnumPreset> | ColorPreset>;
+    /** 文本映射
+     * - 例如：字段值为0/1，想要显示为 否/是
+     * - 可以配置为：textMap: { 0: '否', 1: '是' } 或 textMap: new Map([[0, '否'], [1, '是']])
+     * - Map 中 key 的类型可以是任意类型
+     * - Map 中 value 的类型需要是有效的 React 子元素类型，例如：string、number、React.ReactNode 等
+     */
+    textMap?: Record<string, string | number | React.ReactNode> | Map<unknown, string | number | React.ReactNode>;
+};
+export declare class ProTag extends ProField {
+    render(data: string | string[], ctx: ProFieldRenderCtx<ProTagProps>): JSX.Element;
+    renderTag(dataArray: string[], ctx: ProFieldRenderCtx<ProTagProps>): JSX.Element;
+    getTagProps(props: ProTagProps): Omit<ProTagProps, "bordered" | "colorPreset">;
+    getType(preset: ValueOf<ProTagProps['colorPreset']>): "default" | "yellow" | "purple" | "skyblue" | "primary" | "success" | "warning" | "danger" | "ultramarine" | "rosered" | undefined;
+    getColor(preset: ValueOf<ProTagProps['colorPreset']>): ColorPreset | undefined;
+    getText(data: string, textMap: ProTagProps['textMap']): {};
+}