@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellPhone/PisellPhone.stories.js

@@ -0,0 +1,363 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { PisellPhone } from "./PisellPhone";
+import React from 'react';
+
+/**
+ * PisellPhone 是一个电话号码输入/展示组件。
+ * 
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 国家码选择（预设24个常见国家）
+ * - 自动格式化
+ * - 格式校验
+ * - 移动端拨号
+ * - 号码脱敏
+ */
+var meta = {
+  title: '表单/PisellPhone',
+  component: PisellPhone,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '电话号码输入/展示组件，支持国家码选择和自动格式化。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['read', 'edit'],
+      description: '状态模式'
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    countryCode: {
+      control: 'text',
+      description: '国家码'
+    },
+    showCountrySelector: {
+      control: 'boolean',
+      description: '显示国家码选择器'
+    },
+    autoFormat: {
+      control: 'boolean',
+      description: '自动格式化'
+    },
+    enableDial: {
+      control: 'boolean',
+      description: '启用拨号（移动端）'
+    },
+    enableMasking: {
+      control: 'boolean',
+      description: '启用脱敏'
+    },
+    showFlag: {
+      control: 'boolean',
+      description: '显示国旗图标'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础编辑态（中国手机号）
+ */
+export var Basic = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入手机号',
+    countryCode: '+86'
+  }
+};
+
+/**
+ * 国家码选择器（显示所有国家）
+ */
+export var WithCountrySelector = {
+  args: {
+    mode: 'edit',
+    showCountrySelector: true,
+    placeholder: '请输入电话号码'
+  }
+};
+
+/**
+ * 国家码选择器（过滤显示）
+ */
+export var FilteredCountries = {
+  args: {
+    mode: 'edit',
+    showCountrySelector: true,
+    availableCountryCodes: ['+86', '+852', '+1', '+44'],
+    placeholder: '请输入电话号码'
+  }
+};
+
+/**
+ * 国家码选择器（常用国家置顶）
+ */
+export var CommonCountriesTop = {
+  args: {
+    mode: 'edit',
+    showCountrySelector: true,
+    commonCountryCodes: ['+86', '+1'],
+    placeholder: '请输入电话号码'
+  }
+};
+
+/**
+ * 只读态 - 格式化显示
+ */
+export var ReadMode = {
+  args: {
+    mode: 'read',
+    value: '13800000000',
+    countryCode: '+86'
+  }
+};
+
+/**
+ * 只读态 - 脱敏显示（中间）
+ */
+export var ReadModeMaskedMiddle = {
+  args: {
+    mode: 'read',
+    value: '13800000000',
+    countryCode: '+86',
+    enableMasking: true,
+    maskPattern: 'middle'
+  }
+};
+
+/**
+ * 只读态 - 脱敏显示（末尾）
+ */
+export var ReadModeMaskedLast = {
+  args: {
+    mode: 'read',
+    value: '13800000000',
+    countryCode: '+86',
+    enableMasking: true,
+    maskPattern: 'last'
+  }
+};
+
+/**
+ * 只读态 - 可拨号（移动端）
+ */
+export var ReadModeDialable = {
+  args: {
+    mode: 'read',
+    value: '13800000000',
+    countryCode: '+86',
+    enableDial: true,
+    showDialIcon: true
+  }
+};
+
+/**
+ * 禁用态
+ */
+export var Disabled = {
+  args: {
+    mode: 'edit',
+    value: '13800000000',
+    disabled: true
+  }
+};
+
+/**
+ * 必填校验
+ */
+export var Required = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入手机号（必填）',
+    required: true,
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 格式校验
+ */
+export var FormatValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入手机号',
+    countryCode: '+86',
+    validateFormat: true,
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 美国号码
+ */
+export var USPhone = {
+  args: {
+    mode: 'edit',
+    countryCode: '+1',
+    showCountrySelector: false,
+    placeholder: '请输入电话号码'
+  }
+};
+
+/**
+ * 自动格式化对比
+ */
+export var AutoFormatComparison = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        width: '400px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u81EA\u52A8\u683C\u5F0F\u5316\uFF08\u5F00\u542F\uFF09"), /*#__PURE__*/React.createElement(PisellPhone, {
+      defaultValue: "13800000000",
+      countryCode: "+86",
+      autoFormat: true,
+      showCountrySelector: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u81EA\u52A8\u683C\u5F0F\u5316\uFF08\u5173\u95ED\uFF09"), /*#__PURE__*/React.createElement(PisellPhone, {
+      defaultValue: "13800000000",
+      countryCode: "+86",
+      autoFormat: false,
+      showCountrySelector: false
+    })));
+  }
+};
+
+/**
+ * 多国号码展示
+ */
+export var MultiCountryDisplay = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        width: '400px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u4E2D\u56FD (+86):"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "13800000000",
+      countryCode: "+86"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u7F8E\u56FD (+1):"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "5551234567",
+      countryCode: "+1"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u82F1\u56FD (+44):"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "2012345678",
+      countryCode: "+44"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u9999\u6E2F (+852):"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "12345678",
+      countryCode: "+852"
+    })));
+  }
+};
+
+/**
+ * 脱敏模式对比
+ */
+export var MaskingComparison = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        width: '400px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u4E0D\u8131\u654F:"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "13800000000",
+      enableMasking: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u4E2D\u95F4\u8131\u654F:"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "13800000000",
+      enableMasking: true,
+      maskPattern: "middle"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u672B\u5C3E\u8131\u654F:"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: "13800000000",
+      enableMasking: true,
+      maskPattern: "last"
+    })));
+  }
+};
+
+/**
+ * 完整功能示例
+ */
+export var CompleteExample = {
+  render: function render() {
+    var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1];
+    var _React$useState3 = React.useState('+86'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      countryCode = _React$useState4[0],
+      setCountryCode = _React$useState4[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '500px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001 - \u5B8C\u6574\u529F\u80FD"), /*#__PURE__*/React.createElement(PisellPhone, {
+      value: value,
+      onChange: setValue,
+      countryCode: countryCode,
+      showCountrySelector: true,
+      commonCountryCodes: ['+86', '+1', '+44'],
+      onCountryCodeChange: function onCountryCodeChange(code) {
+        setCountryCode(code);
+        console.log('国家码变更:', code);
+      },
+      placeholder: "\u8BF7\u8F93\u5165\u7535\u8BDD\u53F7\u7801",
+      required: true,
+      validateFormat: true,
+      validateTrigger: "both",
+      allowClear: true,
+      onValidate: function onValidate(isValid, errors) {
+        console.log('校验结果:', isValid, errors);
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: '8px',
+        color: '#667085',
+        fontSize: '12px'
+      }
+    }, "\u5F53\u524D\u56FD\u5BB6\u7801\uFF1A", countryCode)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u683C\u5F0F\u5316\u663E\u793A"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: value || '13800000000',
+      countryCode: countryCode,
+      enableDial: true,
+      showDialIcon: true,
+      onDial: function onDial(phone) {
+        console.log('拨号:', phone);
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u8131\u654F\u663E\u793A"), /*#__PURE__*/React.createElement(PisellPhone, {
+      mode: "read",
+      value: value || '13800000000',
+      countryCode: countryCode,
+      enableMasking: true,
+      maskPattern: "middle"
+    })));
+  }
+};

package/es/components/pisellPhone/components/DisabledView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellPhoneProps } from '../types';
+/**
+ * PisellPhone 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为（包括拨号）
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellPhoneProps>;
+export default DisabledView;

package/es/components/pisellPhone/components/DisabledView.js

@@ -0,0 +1,53 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import ReadOnlyView from "./ReadOnlyView";
+import EditView from "./EditView";
+/**
+ * PisellPhone 禁用态视图组件
+ * 
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ * 
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为（包括拨号）
+ * 
+ * @param props 组件 Props
+ */
+var DisabledView = function DisabledView(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode;
+
+  // 禁用态样式（透明度 40%）
+  var disabledStyle = _objectSpread({
+    opacity: 0.4,
+    pointerEvents: 'none',
+    cursor: 'not-allowed'
+  }, props.style);
+
+  // 根据原始 mode 决定渲染哪种视图
+  if (mode === 'read') {
+    // 基于只读态的禁用视图（禁用拨号功能）
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-phone-disabled",
+      style: disabledStyle
+    }, /*#__PURE__*/React.createElement(ReadOnlyView, _extends({}, props, {
+      enableDial: false
+    })));
+  }
+
+  // 基于编辑态的禁用视图（默认）
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-phone-disabled",
+    style: disabledStyle
+  }, /*#__PURE__*/React.createElement(EditView, _extends({}, props, {
+    disabled: true
+  })));
+};
+export default DisabledView;

package/es/components/pisellPhone/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellPhoneProps } from '../types';
+/**
+ * PisellPhone 编辑态视图组件
+ *
+ * 负责渲染编辑态的电话号码输入，包含国家码选择器和号码输入框
+ *
+ * 功能：
+ * - 国家码选择器（下拉，支持搜索）
+ * - 电话号码输入（只保留数字）
+ * - 自动格式化（根据国家码）
+ * - 动态设置最大长度（根据国家码）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellPhoneProps>;
+export default EditView;

package/es/components/pisellPhone/components/EditView.js

@@ -0,0 +1,116 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useMemo } from 'react';
+import { Input, Select, Space } from 'antd';
+import { useTextInputState } from '@pisell/utils';
+import { formatPhone, getCountryCodes, getMaxLength } from "../utils";
+/**
+ * PisellPhone 编辑态视图组件
+ *
+ * 负责渲染编辑态的电话号码输入，包含国家码选择器和号码输入框
+ *
+ * 功能：
+ * - 国家码选择器（下拉，支持搜索）
+ * - 电话号码输入（只保留数字）
+ * - 自动格式化（根据国家码）
+ * - 动态设置最大长度（根据国家码）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ *
+ * @param props 组件 Props
+ */
+var EditView = function EditView(props) {
+  var _useState = useState(props.countryCode || props.defaultCountryCode || '+86'),
+    _useState2 = _slicedToArray(_useState, 2),
+    countryCode = _useState2[0],
+    setCountryCode = _useState2[1];
+
+  // 获取国家码列表（根据配置过滤和排序）
+  var countryCodes = useMemo(function () {
+    return getCountryCodes(props);
+  }, [props]);
+
+  // 状态管理（复用）
+  var _useTextInputState = useTextInputState(props),
+    value = _useTextInputState.value,
+    isValid = _useTextInputState.isValid,
+    errors = _useTextInputState.errors,
+    handleChange = _useTextInputState.handleChange,
+    handleBlur = _useTextInputState.handleBlur,
+    handleFocus = _useTextInputState.handleFocus;
+
+  // 处理输入（只保留数字，自动格式化）
+  var handlePhoneChange = function handlePhoneChange(e) {
+    var inputValue = e.target.value;
+    var cleaned = inputValue.replace(/\D/g, ''); // 只保留数字
+
+    if (props.autoFormat !== false) {
+      var formatted = formatPhone(cleaned, countryCode);
+      handleChange(formatted);
+    } else {
+      handleChange(cleaned);
+    }
+  };
+
+  // 国家码变更
+  var handleCountryCodeChange = function handleCountryCodeChange(code) {
+    var _props$onCountryCodeC;
+    setCountryCode(code);
+    (_props$onCountryCodeC = props.onCountryCodeChange) === null || _props$onCountryCodeC === void 0 || _props$onCountryCodeC.call(props, code);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-phone-edit"
+  }, /*#__PURE__*/React.createElement(Space.Compact, {
+    style: {
+      width: '100%'
+    }
+  }, props.showCountrySelector !== false && /*#__PURE__*/React.createElement(Select, {
+    value: countryCode,
+    onChange: handleCountryCodeChange,
+    style: {
+      width: 100,
+      height: 50
+    },
+    showSearch: true,
+    optionFilterProp: "children",
+    className: "pisell-phone-country-select"
+    // 自定义选中后的显示内容（只显示 +xx）
+    ,
+    optionLabelProp: "value"
+    // 下拉选项宽度（比选择器本身宽）
+    ,
+    popupMatchSelectWidth: false,
+    dropdownStyle: {
+      minWidth: 200
+    }
+  }, countryCodes.map(function (country, index) {
+    return /*#__PURE__*/React.createElement(Select.Option, {
+      key: "".concat(country.code, "-").concat(country.name, "-").concat(index),
+      value: country.code
+    }, /*#__PURE__*/React.createElement(Space, {
+      size: 4
+    }, /*#__PURE__*/React.createElement("span", null, country.flag), /*#__PURE__*/React.createElement("span", null, country.code), /*#__PURE__*/React.createElement("span", null, country.name)));
+  })), /*#__PURE__*/React.createElement(Input, {
+    value: value,
+    onChange: handlePhoneChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    placeholder: props.placeholder || '请输入电话号码',
+    maxLength: props.maxLength || getMaxLength(countryCode, countryCodes),
+    allowClear: props.allowClear,
+    disabled: props.disabled,
+    autoFocus: props.autoFocus,
+    status: isValid ? undefined : 'error',
+    className: props.className,
+    style: props.style,
+    "aria-label": props['aria-label'],
+    "aria-describedby": props['aria-describedby']
+  })), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-phone-error"
+  }, errors[0]));
+};
+export default EditView;

package/es/components/pisellPhone/components/ReadOnlyView.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PisellPhoneProps } from '../types';
+/**
+ * PisellPhone 只读态视图组件
+ *
+ * 负责渲染只读态的电话号码展示和拨号功能
+ *
+ * 功能：
+ * - 格式化或脱敏显示
+ * - 显示国旗图标（可选）
+ * - 移动端可点击拨号（tel: 协议）
+ * - 拨号图标（可选）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellPhoneProps>;
+export default ReadOnlyView;

package/es/components/pisellPhone/components/ReadOnlyView.js

@@ -0,0 +1,76 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import { Typography, Button, Space } from 'antd';
+import { PhoneOutlined } from '@ant-design/icons';
+import { formatPhone, maskPhone, getCountryFlag } from "../utils";
+/**
+ * PisellPhone 只读态视图组件
+ * 
+ * 负责渲染只读态的电话号码展示和拨号功能
+ * 
+ * 功能：
+ * - 格式化或脱敏显示
+ * - 显示国旗图标（可选）
+ * - 移动端可点击拨号（tel: 协议）
+ * - 拨号图标（可选）
+ * 
+ * @param props 组件 Props
+ */
+var ReadOnlyView = function ReadOnlyView(props) {
+  var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  var countryCode = props.countryCode || '+86';
+
+  // 格式化或脱敏显示
+  var displayValue;
+  if (props.enableMasking) {
+    // 脱敏显示
+    if (props.maskPattern === 'custom' && props.customMask) {
+      displayValue = props.customMask(props.value || '');
+    } else {
+      displayValue = maskPhone(props.value || '', props.maskPattern);
+    }
+  } else {
+    // 格式化显示
+    displayValue = formatPhone(props.value || '', countryCode);
+  }
+
+  // 拨号处理
+  var handleDial = function handleDial() {
+    if (props.enableDial !== false && isMobile) {
+      var _props$onDial;
+      var cleaned = (props.value || '').replace(/\D/g, '');
+      var fullNumber = countryCode + cleaned;
+      (_props$onDial = props.onDial) === null || _props$onDial === void 0 || _props$onDial.call(props, fullNumber);
+      window.location.href = "tel:".concat(fullNumber);
+    }
+  };
+  var canDial = props.enableDial !== false && isMobile;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-phone-read ".concat(props.className || '')
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: "small"
+  }, props.showFlag !== false && /*#__PURE__*/React.createElement("span", {
+    className: "pisell-phone-flag"
+  }, getCountryFlag(countryCode)), /*#__PURE__*/React.createElement(Typography.Text, {
+    className: canDial ? 'pisell-phone-clickable' : '',
+    onClick: canDial ? handleDial : undefined,
+    style: _objectSpread({
+      fontSize: props.fontSize || 16,
+      fontWeight: props.fontWeight || 500,
+      color: canDial ? '#7F56DA' : props.color || '#101828',
+      cursor: canDial ? 'pointer' : 'default',
+      textDecoration: canDial ? 'underline' : 'none'
+    }, props.style)
+  }, displayValue), props.showDialIcon && canDial && /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(PhoneOutlined, null),
+    onClick: handleDial
+  })));
+};
+export default ReadOnlyView;