@pisell/materials 1.0.488 → 1.0.490

package/es/components/checkbox/index.js

@@ -15,10 +15,10 @@ var Group = function Group(props) {
   var checkbox = useMemo(function () {
     return options.map(function (option) {
       return /*#__PURE__*/React.createElement(OriginalCheckbok, {
-        key: option.value,
-        value: option.value,
-        disabled: option.disabled
-      }, option.label);
+        key: option === null || option === void 0 ? void 0 : option.value,
+        value: option === null || option === void 0 ? void 0 : option.value,
+        disabled: option === null || option === void 0 ? void 0 : option.disabled
+      }, option === null || option === void 0 ? void 0 : option.label);
     });
   }, [options]);
   return /*#__PURE__*/React.createElement(OriginalCheckbok.Group, others, /*#__PURE__*/React.createElement(Space, {

package/es/components/dataSourceComponents/dataSourceForm/style.less

@@ -0,0 +1,5 @@
+.pisell-lowcode-form-vertical {
+    .pisell-data-source-form-item .pisell-lowcode-form-item-label>label {
+        height: auto;
+    }
+}

package/es/components/dataSourceComponents/dataSourceForm/utils.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ModeType } from './type';
+import "./style.less";
 export interface WithModeProps {
     renderMode?: ModeType;
     value?: any;

package/es/components/dataSourceComponents/dataSourceForm/utils.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _excluded = ["renderMode", "value", "onChange"],
-  _excluded2 = ["name", "label", "mode", "renderMode", "tooltip", "noStyle", "extra", "required", "requiredobj", "minLengthobj", "maxLengthobj", "typeobj", "maxobj", "minobj", "normalize", "getValueProps", "validator", "style", "validateTrigger", "__designMode", "labelCol"];
+  _excluded2 = ["name", "label", "mode", "renderMode", "tooltip", "noStyle", "extra", "required", "requiredobj", "minLengthobj", "maxLengthobj", "typeobj", "maxobj", "minobj", "normalize", "getValueProps", "validator", "style", "validateTrigger", "__designMode", "labelCol", "hideLabel", "innerStyle"];
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -26,6 +26,7 @@ import useDataSource from "../hooks/useDataSource";
 import useFormSetting from "./provider/hooks/useFormSetting";
 import useJsonPrefixPath from "./provider/hooks/useJsonPrefixPath";
 import DataSourceProvider from "../provider/dataSource/DataSourceProvider";
+import "./style.less";
 /**
  * @title: 增加renderMode属性
  * @description: 基于renderMode属性控制渲染模式
@@ -102,7 +103,9 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
       style = _ref2.style,
       validateTrigger = _ref2.validateTrigger,
       __designMode = _ref2.__designMode,
-      labelCol = _ref2.labelCol,
+      propsLabelCol = _ref2.labelCol,
+      hideLabel = _ref2.hideLabel,
+      innerStyle = _ref2.innerStyle,
       otherProps = _objectWithoutProperties(_ref2, _excluded2);
     var _useJsonPrefixPath = useJsonPrefixPath(),
       _useJsonPrefixPath$pa = _useJsonPrefixPath.path,
@@ -130,11 +133,11 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
         mode: propsMode,
         renderMode: effectiveMode
       }, overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.innerProps, {
-        style: _objectSpread({}, (overlayProps === null || overlayProps === void 0 ? void 0 : (_overlayProps$innerPr = overlayProps.innerProps) === null || _overlayProps$innerPr === void 0 ? void 0 : _overlayProps$innerPr.style) || {}),
+        style: _objectSpread(_objectSpread({}, innerStyle || {}), (overlayProps === null || overlayProps === void 0 ? void 0 : (_overlayProps$innerPr = overlayProps.innerProps) === null || _overlayProps$innerPr === void 0 ? void 0 : _overlayProps$innerPr.style) || {}),
         isVerification: typeobj === null || typeobj === void 0 ? void 0 : typeobj.enabled,
         size: size
       }));
-    }, [effectiveMode, otherProps, propsMode, overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.innerProps, typeobj === null || typeobj === void 0 ? void 0 : typeobj.enabled, size]);
+    }, [effectiveMode, otherProps, propsMode, overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.innerProps, typeobj === null || typeobj === void 0 ? void 0 : typeobj.enabled, size, innerStyle]);
     var isDesignMode = __designMode === 'design';
     var isHidden = effectiveMode === 'hidden';
 
@@ -169,24 +172,36 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
     }
     if (maxLengthobj && maxLengthobj.enabled) {
       rules.push(_objectSpread(_objectSpread({}, maxLengthobj), {}, {
+        type: "string",
         message: maxLengthobj.message || getText('pisell-data-source-form-max-length-message')(maxLengthobj === null || maxLengthobj === void 0 ? void 0 : maxLengthobj.max)
       }));
     }
     if (minLengthobj && minLengthobj.enabled) {
       rules.push(_objectSpread(_objectSpread({}, minLengthobj), {}, {
+        type: "string",
         message: minLengthobj.message || getText('pisell-data-source-form-min-length-message')(minLengthobj === null || minLengthobj === void 0 ? void 0 : minLengthobj.min)
       }));
     }
     if (maxobj && maxobj.enabled) {
       rules.push(_objectSpread(_objectSpread({}, maxobj), {}, {
+        type: "number",
         message: maxobj.message || getText('pisell-data-source-form-max-value-message')(maxobj === null || maxobj === void 0 ? void 0 : maxobj.max)
       }));
     }
     if (minobj && minobj.enabled) {
       rules.push(_objectSpread(_objectSpread({}, minobj), {}, {
+        type: "number",
         message: minobj.message || getText('pisell-data-source-form-min-value-message')(minobj === null || minobj === void 0 ? void 0 : minobj.min)
       }));
     }
+    var labelCol = useMemo(function () {
+      if (hideLabel) {
+        return {
+          span: 0
+        };
+      }
+      return propsLabelCol;
+    }, [hideLabel, propsLabelCol]);
     return /*#__PURE__*/React.createElement(Form.Item, _extends({
       required: required,
       style: _objectSpread(_objectSpread({
@@ -206,7 +221,8 @@ export var withFormItem = function withFormItem(WrappedComponent, overlayProps)
       validator: validator,
       validateTrigger: validateTrigger,
       labelCol: labelCol,
-      initialValue: otherProps === null || otherProps === void 0 ? void 0 : otherProps.defaultValue
+      initialValue: otherProps === null || otherProps === void 0 ? void 0 : otherProps.defaultValue,
+      className: "pisell-data-source-form-item"
     }, overlayProps === null || overlayProps === void 0 ? void 0 : overlayProps.otherFormItemProps), renderComponent);
   };
 };

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -40,7 +40,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         width: number;
         align: "center" | "left" | "right";
         fixed: false | "left" | "right";
-        type: "button" | "link";
+        type: "link" | "button";
         items: OperationItem[];
     } | undefined;
     operationContent?: {

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

@@ -9,15 +9,17 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 import React, { useMemo } from 'react';
-import { Button, Space, message, Modal } from 'antd';
+import { Button, Space, Modal } from 'antd';
 import { isString } from '@pisell/utils';
+import { useMemoizedFn } from 'ahooks';
 import Filter from "../filter";
 import usePagination from "./usePagination";
 import useColumns from "./useColumns";
 import useVariables from "../../hooks/useVariables";
 import useComponentId from "../../hooks/useComponentId";
 import useDataSource from "../../hooks/useDataSource";
-import { useMemoizedFn } from 'ahooks';
+import PisellToast from "../../../pisellToast";
+import { getText } from "../../../../locales";
 /**
  * 处理table的props
  * 转换title
@@ -113,7 +115,9 @@ var useTableProps = function useTableProps(props) {
               })));
             } catch (error) {
               console.error(error);
-              message.error('删除失败,请重试');
+              PisellToast({
+                content: getText('pisell-action-delete-failed')
+              });
             }
           case 1:
           case "end":

package/es/components/dataSourceComponents/fields/Checkbox/ReadPretty.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CheckboxProps, CheckboxGroupProps } from './type';
+import './ReadPretty.less';
 declare type CheckboxReadPrettyType = React.FC<CheckboxProps> & {
     Group: React.FC<CheckboxGroupProps>;
 };

package/es/components/dataSourceComponents/fields/Checkbox/ReadPretty.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { CheckOutlined } from '@ant-design/icons';
 import useValueMap from "../../hooks/useValueMap";
 import { renderValueWithMap } from "../../dataSourceForm/utils";
+import "./ReadPretty.less";
 var CheckboxReadPretty = function CheckboxReadPretty(props) {
   var value = props.value;
   return value ? /*#__PURE__*/React.createElement(CheckOutlined, {

package/es/components/dataSourceComponents/fields/ColorPicker/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { ColorPickerProps } from './type';
+import './ReadPretty.less';
 declare const ColorPickerReadPretty: (props: ColorPickerProps) => React.JSX.Element;
 export default ColorPickerReadPretty;

package/es/components/dataSourceComponents/fields/ColorPicker/ReadPretty.js

@@ -1,9 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { ColorPicker } from 'antd';
+import "./ReadPretty.less";
 var ColorPickerReadPretty = function ColorPickerReadPretty(props) {
   return /*#__PURE__*/React.createElement(ColorPicker, _extends({}, props, {
-    open: false
+    open: false,
+    className: "pisell-color-picker-read-pretty"
   }));
 };
 export default ColorPickerReadPretty;

package/es/components/dataSourceComponents/fields/ColorPicker/WithMode.js

@@ -2,37 +2,17 @@ var _excluded = ["renderMode"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
-import { ColorPicker as AntColorPicker, theme } from 'antd';
-import { generate, green, presetPalettes, red } from '@ant-design/colors';
-var genPresets = function genPresets() {
-  var presets = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : presetPalettes;
-  return Object.entries(presets).map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      label = _ref2[0],
-      colors = _ref2[1];
-    return {
-      label: label,
-      colors: colors
-    };
-  });
-};
+import { ColorPicker as AntColorPicker } from 'antd';
+import { red, volcano, orange, gold, yellow, lime, green, cyan, blue, geekblue, purple, magenta } from '@ant-design/colors';
+import { getText } from "../../../../locales";
 import ReadPretty from "./ReadPretty";
 import { withMode } from "../../dataSourceForm/utils";
 var ColorPicker = function ColorPicker(props) {
-  var _theme$useToken = theme.useToken(),
-    token = _theme$useToken.token;
-  var presets = genPresets({
-    primary: generate(token.colorPrimary),
-    red: red,
-    green: green
-  });
+  var presets = [{
+    label: getText('pisell-color-picker-default'),
+    colors: [red.primary || red[5], volcano.primary || volcano[5], orange.primary || orange[5], gold.primary || gold[5], yellow.primary || yellow[5], lime.primary || lime[5], green.primary || green[5], cyan.primary || cyan[5], blue.primary || blue[5], geekblue.primary || geekblue[5], purple.primary || purple[5], magenta.primary || magenta[5]]
+  }];
   var renderMode = props.renderMode,
     restProps = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(AntColorPicker, _extends({}, restProps, {

package/es/components/dataSourceComponents/fields/DatePicker/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { DatePickerProps } from './type';
+import './ReadPretty.less';
 declare const DatePickerReadPretty: (props: DatePickerProps) => React.JSX.Element;
 export default DatePickerReadPretty;

package/es/components/dataSourceComponents/fields/DatePicker/ReadPretty.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import dayjs from 'dayjs';
+import "./ReadPretty.less";
 var DatePickerReadPretty = function DatePickerReadPretty(props) {
   var value = props.value;
-  return /*#__PURE__*/React.createElement("span", null, value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '');
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-date-picker-read-pretty"
+  }, value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '');
 };
 export default DatePickerReadPretty;

package/es/components/dataSourceComponents/fields/DatePicker/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-date-picker-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { DateRangePickerProps } from './type';
+import './ReadPretty.less';
 declare const DateRangePickerReadPretty: (props: DateRangePickerProps) => React.JSX.Element;
 export default DateRangePickerReadPretty;

package/es/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import dayjs from 'dayjs';
+import "./ReadPretty.less";
 var DateRangePickerReadPretty = function DateRangePickerReadPretty(props) {
   var value = props.value;
-  return /*#__PURE__*/React.createElement("span", null, value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '');
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-date-range-picker-read-pretty"
+  }, value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '');
 };
 export default DateRangePickerReadPretty;

package/es/components/dataSourceComponents/fields/DateRangePicker/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-date-range-picker-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/Input/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { InputProps } from "./type";
+import { InputProps } from './type';
+import './ReadPretty.less';
 declare const InputReadPretty: (props: InputProps) => React.JSX.Element;
 export default InputReadPretty;

package/es/components/dataSourceComponents/fields/Input/ReadPretty.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import "./ReadPretty.less";
 var InputReadPretty = function InputReadPretty(props) {
-  return /*#__PURE__*/React.createElement("span", null, props.value);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-input-read-pretty"
+  }, props.value);
 };
 export default InputReadPretty;

package/es/components/dataSourceComponents/fields/Input/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-input-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/Input.Email/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { InputProps } from "./type";
+import { InputProps } from './type';
+import './ReadPretty.less';
 declare const InputReadPretty: (props: InputProps) => React.JSX.Element;
 export default InputReadPretty;

package/es/components/dataSourceComponents/fields/Input.Email/ReadPretty.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import "./ReadPretty.less";
 var InputReadPretty = function InputReadPretty(props) {
-  return /*#__PURE__*/React.createElement("span", null, props.value);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-input-email-read-pretty"
+  }, props.value);
 };
 export default InputReadPretty;

package/es/components/dataSourceComponents/fields/Input.Email/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-input-email-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/Input.Json/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { JsonProps } from "./type";
+import "./ReadPretty.less";
 declare const JsonReadPretty: (props: JsonProps) => React.JSX.Element | null;
 export default JsonReadPretty;

package/es/components/dataSourceComponents/fields/Input.Json/ReadPretty.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { isString, isPlainObject } from '@pisell/utils';
+import "./ReadPretty.less";
 var JsonReadPretty = function JsonReadPretty(props) {
   if (isString(props.value)) {
-    return /*#__PURE__*/React.createElement("pre", null, props.value);
+    return /*#__PURE__*/React.createElement("pre", {
+      className: "pisell-json-read-pretty"
+    }, props.value);
   } else if (isPlainObject(props.value)) {
     return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(props.value, null, 2));
   }

package/es/components/dataSourceComponents/fields/Input.Json/ReadPretty.less

@@ -0,0 +1,3 @@
+.pisell-json-read-pretty {
+    
+}

package/es/components/dataSourceComponents/fields/Input.Password/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { PasswordProps } from './type';
+import './ReadPretty.less';
 declare const PasswordReadPretty: (props: PasswordProps) => React.JSX.Element;
 export default PasswordReadPretty;

package/es/components/dataSourceComponents/fields/Input.Password/ReadPretty.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import { isString } from '@pisell/utils';
+import "./ReadPretty.less";
 var PasswordReadPretty = function PasswordReadPretty(props) {
   if (props.value && isString(props.value)) {
     var _props$value, _props$value$split;
-    return /*#__PURE__*/React.createElement("span", null, (_props$value = props.value) === null || _props$value === void 0 ? void 0 : (_props$value$split = _props$value.split) === null || _props$value$split === void 0 ? void 0 : _props$value$split.call(_props$value, '').map(function () {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "pisell-password-read-pretty"
+    }, (_props$value = props.value) === null || _props$value === void 0 ? void 0 : (_props$value$split = _props$value.split) === null || _props$value$split === void 0 ? void 0 : _props$value$split.call(_props$value, '').map(function () {
       return '•';
     }));
   }
-  return /*#__PURE__*/React.createElement("span", null, '••••••');
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-password-read-pretty"
+  }, '••••••');
 };
 export default PasswordReadPretty;

package/es/components/dataSourceComponents/fields/Input.Password/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-password-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/Input.Phone/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { PhoneInputProps } from './WithMode';
+import './ReadPretty.less';
 declare const ReadPretty: React.FC<Omit<PhoneInputProps, 'onChange'>>;
 export default ReadPretty;

package/es/components/dataSourceComponents/fields/Input.Phone/ReadPretty.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { parsePhoneNumberFromString as parsePhoneNumber } from 'libphonenumber-js';
+import "./ReadPretty.less";
 var ReadPretty = function ReadPretty(_ref) {
   var value = _ref.value;
   if (!value) return null;
@@ -7,10 +8,14 @@ var ReadPretty = function ReadPretty(_ref) {
     var phoneNumber = parsePhoneNumber(value);
     if (!phoneNumber) return /*#__PURE__*/React.createElement("span", null, value);
     var formattedValue = "(".concat(phoneNumber.formatInternational().split(' ')[0], ") ").concat(phoneNumber.formatNational());
-    return /*#__PURE__*/React.createElement("span", null, formattedValue);
+    return /*#__PURE__*/React.createElement("span", {
+      className: "pisell-phone-read-pretty"
+    }, formattedValue);
   } catch (error) {
     // 如果解析失败，直接显示原始值
-    return /*#__PURE__*/React.createElement("span", null, value);
+    return /*#__PURE__*/React.createElement("span", {
+      className: "pisell-phone-read-pretty"
+    }, value);
   }
 };
 export default ReadPretty;

package/es/components/dataSourceComponents/fields/Input.Phone/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-phone-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

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

@@ -9,27 +9,33 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useState, useEffect, useMemo } from 'react';
-import { Input, Select } from 'antd';
+import { Input, Select, Space } from 'antd';
 import { isValidPhoneNumber, parsePhoneNumberFromString } from 'libphonenumber-js';
 import useEngineContext from "../../../../hooks/useEngineContext";
 import { useCountries } from "./serve";
 import ReadPretty from "./ReadPretty";
 import { withMode } from "../../dataSourceForm/utils";
+import { isNumber } from '@pisell/utils';
 var Option = Select.Option;
 var translationOriginal = function translationOriginal(val) {
   return val.original;
 };
 var PhoneInput = function PhoneInput(_ref) {
-  var value = _ref.value,
+  var propsValue = _ref.value,
     onChange = _ref.onChange,
     isVerification = _ref.isVerification,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useCountries = useCountries(),
     _useCountries$data = _useCountries.data,
     countries = _useCountries$data === void 0 ? [] : _useCountries$data;
-  console.log(value, 'valuevaluevalue');
   var context = useEngineContext();
   translationOriginal = context.appHelper.utils.translationOriginal || translationOriginal;
+  var value = useMemo(function () {
+    if (isNumber(propsValue)) {
+      return "".concat(propsValue);
+    }
+    return propsValue;
+  }, [propsValue]);
 
   // 解析外部传入的value
   var parseExternalValue = function parseExternalValue(val) {
@@ -96,24 +102,25 @@ var PhoneInput = function PhoneInput(_ref) {
     }
     return isValidPhoneNumber(concatenatedNumber) && (_parsePhoneNumberFrom = parsePhoneNumberFromString(concatenatedNumber)) !== null && _parsePhoneNumberFrom !== void 0 && _parsePhoneNumberFrom.isValid() ? undefined : 'error';
   }, [concatenatedNumber, phoneNumber, isVerification]);
-  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Space.Compact, {
+    block: true
+  }, /*#__PURE__*/React.createElement(Select, {
+    value: countryCode,
+    onChange: handleCountryChange,
+    style: {
+      width: '90px'
+    },
+    onBlur: handleBlur,
+    popupMatchSelectWidth: false,
+    optionLabelProp: "label"
+  }, countries.map(function (country) {
+    return /*#__PURE__*/React.createElement(Option, {
+      key: country.code,
+      value: country.code,
+      label: country.prefix
+    }, translationOriginal(country.name), " (", country.prefix, ")");
+  })), /*#__PURE__*/React.createElement(Input, _extends({}, props, {
     status: status,
-    addonBefore: /*#__PURE__*/React.createElement(Select, {
-      value: countryCode,
-      onChange: handleCountryChange,
-      style: {
-        width: '80px'
-      },
-      onBlur: handleBlur,
-      popupMatchSelectWidth: false,
-      optionLabelProp: "label"
-    }, countries.map(function (country) {
-      return /*#__PURE__*/React.createElement(Option, {
-        key: country.code,
-        value: country.code,
-        label: country.prefix
-      }, translationOriginal(country.name), " (", country.prefix, ")");
-    })),
     type: "tel",
     value: phoneNumber,
     onChange: handlePhoneNumberChange,
@@ -121,7 +128,7 @@ var PhoneInput = function PhoneInput(_ref) {
     style: {
       flex: 1
     }
-  }));
+  })));
 };
 var PhoneWithMode = withMode(PhoneInput, ReadPretty);
 export default PhoneWithMode;

package/es/components/dataSourceComponents/fields/Input.TextArea/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { TextAreaProps } from "./type";
+import "./ReadPretty.less";
 declare const TextAreaReadPretty: (props: TextAreaProps) => React.JSX.Element;
 export default TextAreaReadPretty;

package/es/components/dataSourceComponents/fields/Input.TextArea/ReadPretty.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import "./ReadPretty.less";
 var TextAreaReadPretty = function TextAreaReadPretty(props) {
-  return /*#__PURE__*/React.createElement("span", null, props.value);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-input-textarea-read-pretty"
+  }, props.value);
 };
 export default TextAreaReadPretty;

package/es/components/dataSourceComponents/fields/Input.TextArea/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-input-textarea-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/Input.Url/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { UrlProps } from './type';
+import './ReadPretty.less';
 declare const UrlReadPretty: (props: UrlProps) => React.JSX.Element;
 export default UrlReadPretty;

package/es/components/dataSourceComponents/fields/Input.Url/ReadPretty.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Typography } from 'antd';
+import "./ReadPretty.less";
 var Link = Typography.Link;
 var UrlReadPretty = function UrlReadPretty(props) {
   return /*#__PURE__*/React.createElement(Link, {
+    className: "pisell-url-read-pretty",
     href: props.value
   }, props.value);
 };

package/es/components/dataSourceComponents/fields/Input.Url/ReadPretty.less

@@ -0,0 +1,6 @@
+.pisell-url-read-pretty {
+  color: var(--Gray-900, #101828);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px; /* 150% */
+}

package/es/components/dataSourceComponents/fields/InputNumber/ReadPretty.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { InputNumberProps } from './type';
+import './ReadPretty.less';
 declare const ReadPretty: React.FC<InputNumberProps>;
 export default ReadPretty;