@pisell/materials 6.3.25 → 6.3.27

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

@@ -0,0 +1,290 @@
+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/pisellPhone/PisellPhone.stories.tsx
+var PisellPhone_stories_exports = {};
+__export(PisellPhone_stories_exports, {
+  AutoFormatComparison: () => AutoFormatComparison,
+  Basic: () => Basic,
+  CommonCountriesTop: () => CommonCountriesTop,
+  CompleteExample: () => CompleteExample,
+  Disabled: () => Disabled,
+  FilteredCountries: () => FilteredCountries,
+  FormatValidation: () => FormatValidation,
+  MaskingComparison: () => MaskingComparison,
+  MultiCountryDisplay: () => MultiCountryDisplay,
+  ReadMode: () => ReadMode,
+  ReadModeDialable: () => ReadModeDialable,
+  ReadModeMaskedLast: () => ReadModeMaskedLast,
+  ReadModeMaskedMiddle: () => ReadModeMaskedMiddle,
+  Required: () => Required,
+  USPhone: () => USPhone,
+  WithCountrySelector: () => WithCountrySelector,
+  default: () => PisellPhone_stories_default
+});
+module.exports = __toCommonJS(PisellPhone_stories_exports);
+var import_PisellPhone = require("./PisellPhone");
+var import_react = __toESM(require("react"));
+var meta = {
+  title: "表单/PisellPhone",
+  component: import_PisellPhone.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: "显示国旗图标"
+    }
+  }
+};
+var PisellPhone_stories_default = meta;
+var Basic = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入手机号",
+    countryCode: "+86"
+  }
+};
+var WithCountrySelector = {
+  args: {
+    mode: "edit",
+    showCountrySelector: true,
+    placeholder: "请输入电话号码"
+  }
+};
+var FilteredCountries = {
+  args: {
+    mode: "edit",
+    showCountrySelector: true,
+    availableCountryCodes: ["+86", "+852", "+1", "+44"],
+    placeholder: "请输入电话号码"
+  }
+};
+var CommonCountriesTop = {
+  args: {
+    mode: "edit",
+    showCountrySelector: true,
+    commonCountryCodes: ["+86", "+1"],
+    placeholder: "请输入电话号码"
+  }
+};
+var ReadMode = {
+  args: {
+    mode: "read",
+    value: "13800000000",
+    countryCode: "+86"
+  }
+};
+var ReadModeMaskedMiddle = {
+  args: {
+    mode: "read",
+    value: "13800000000",
+    countryCode: "+86",
+    enableMasking: true,
+    maskPattern: "middle"
+  }
+};
+var ReadModeMaskedLast = {
+  args: {
+    mode: "read",
+    value: "13800000000",
+    countryCode: "+86",
+    enableMasking: true,
+    maskPattern: "last"
+  }
+};
+var ReadModeDialable = {
+  args: {
+    mode: "read",
+    value: "13800000000",
+    countryCode: "+86",
+    enableDial: true,
+    showDialIcon: true
+  }
+};
+var Disabled = {
+  args: {
+    mode: "edit",
+    value: "13800000000",
+    disabled: true
+  }
+};
+var Required = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入手机号（必填）",
+    required: true,
+    validateTrigger: "onBlur"
+  }
+};
+var FormatValidation = {
+  args: {
+    mode: "edit",
+    placeholder: "请输入手机号",
+    countryCode: "+86",
+    validateFormat: true,
+    validateTrigger: "onChange"
+  }
+};
+var USPhone = {
+  args: {
+    mode: "edit",
+    countryCode: "+1",
+    showCountrySelector: false,
+    placeholder: "请输入电话号码"
+  }
+};
+var AutoFormatComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "20px", width: "400px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "自动格式化（开启）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellPhone.PisellPhone,
+    {
+      defaultValue: "13800000000",
+      countryCode: "+86",
+      autoFormat: true,
+      showCountrySelector: false
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h4", null, "自动格式化（关闭）"), /* @__PURE__ */ import_react.default.createElement(
+    import_PisellPhone.PisellPhone,
+    {
+      defaultValue: "13800000000",
+      countryCode: "+86",
+      autoFormat: false,
+      showCountrySelector: false
+    }
+  )))
+};
+var MultiCountryDisplay = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "400px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "中国 (+86):"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "13800000000", countryCode: "+86" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "美国 (+1):"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "5551234567", countryCode: "+1" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "英国 (+44):"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "2012345678", countryCode: "+44" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "香港 (+852):"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "12345678", countryCode: "+852" })))
+};
+var MaskingComparison = {
+  render: () => /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "400px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "不脱敏:"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "13800000000", enableMasking: false })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "中间脱敏:"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "13800000000", enableMasking: true, maskPattern: "middle" })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("strong", null, "末尾脱敏:"), /* @__PURE__ */ import_react.default.createElement(import_PisellPhone.PisellPhone, { mode: "read", value: "13800000000", enableMasking: true, maskPattern: "last" })))
+};
+var CompleteExample = {
+  render: () => {
+    const [value, setValue] = import_react.default.useState("");
+    const [countryCode, setCountryCode] = import_react.default.useState("+86");
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "500px", display: "flex", flexDirection: "column", gap: "24px" } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "编辑态 - 完整功能"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellPhone.PisellPhone,
+      {
+        value,
+        onChange: setValue,
+        countryCode,
+        showCountrySelector: true,
+        commonCountryCodes: ["+86", "+1", "+44"],
+        onCountryCodeChange: (code) => {
+          setCountryCode(code);
+          console.log("国家码变更:", code);
+        },
+        placeholder: "请输入电话号码",
+        required: true,
+        validateFormat: true,
+        validateTrigger: "both",
+        allowClear: true,
+        onValidate: (isValid, errors) => {
+          console.log("校验结果:", isValid, errors);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("p", { style: { marginTop: "8px", color: "#667085", fontSize: "12px" } }, "当前国家码：", countryCode)), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 格式化显示"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellPhone.PisellPhone,
+      {
+        mode: "read",
+        value: value || "13800000000",
+        countryCode,
+        enableDial: true,
+        showDialIcon: true,
+        onDial: (phone) => {
+          console.log("拨号:", phone);
+        }
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "只读态 - 脱敏显示"), /* @__PURE__ */ import_react.default.createElement(
+      import_PisellPhone.PisellPhone,
+      {
+        mode: "read",
+        value: value || "13800000000",
+        countryCode,
+        enableMasking: true,
+        maskPattern: "middle"
+      }
+    )));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoFormatComparison,
+  Basic,
+  CommonCountriesTop,
+  CompleteExample,
+  Disabled,
+  FilteredCountries,
+  FormatValidation,
+  MaskingComparison,
+  MultiCountryDisplay,
+  ReadMode,
+  ReadModeDialable,
+  ReadModeMaskedLast,
+  ReadModeMaskedMiddle,
+  Required,
+  USPhone,
+  WithCountrySelector
+});

package/lib/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/lib/components/pisellPhone/components/DisabledView.js

@@ -0,0 +1,51 @@
+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/pisellPhone/components/DisabledView.tsx
+var DisabledView_exports = {};
+__export(DisabledView_exports, {
+  default: () => DisabledView_default
+});
+module.exports = __toCommonJS(DisabledView_exports);
+var import_react = __toESM(require("react"));
+var import_ReadOnlyView = __toESM(require("./ReadOnlyView"));
+var import_EditView = __toESM(require("./EditView"));
+var DisabledView = (props) => {
+  const { mode = "edit" } = props;
+  const disabledStyle = {
+    opacity: 0.4,
+    pointerEvents: "none",
+    cursor: "not-allowed",
+    ...props.style
+  };
+  if (mode === "read") {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-disabled", style: disabledStyle }, /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props, enableDial: false }));
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-disabled", style: disabledStyle }, /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props, disabled: true }));
+};
+var DisabledView_default = DisabledView;

package/lib/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/lib/components/pisellPhone/components/EditView.js

@@ -0,0 +1,101 @@
+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/pisellPhone/components/EditView.tsx
+var EditView_exports = {};
+__export(EditView_exports, {
+  default: () => EditView_default
+});
+module.exports = __toCommonJS(EditView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_utils2 = require("../utils");
+var EditView = (props) => {
+  const [countryCode, setCountryCode] = (0, import_react.useState)(
+    props.countryCode || props.defaultCountryCode || "+86"
+  );
+  const countryCodes = (0, import_react.useMemo)(() => (0, import_utils2.getCountryCodes)(props), [props]);
+  const { value, isValid, errors, handleChange, handleBlur, handleFocus } = (0, import_utils.useTextInputState)(props);
+  const handlePhoneChange = (e) => {
+    const inputValue = e.target.value;
+    const cleaned = inputValue.replace(/\D/g, "");
+    if (props.autoFormat !== false) {
+      const formatted = (0, import_utils2.formatPhone)(cleaned, countryCode);
+      handleChange(formatted);
+    } else {
+      handleChange(cleaned);
+    }
+  };
+  const handleCountryCodeChange = (code) => {
+    var _a;
+    setCountryCode(code);
+    (_a = props.onCountryCodeChange) == null ? void 0 : _a.call(props, code);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-edit" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { style: { width: "100%" } }, props.showCountrySelector !== false && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      value: countryCode,
+      onChange: handleCountryCodeChange,
+      style: { width: 100, height: 50 },
+      showSearch: true,
+      optionFilterProp: "children",
+      className: "pisell-phone-country-select",
+      optionLabelProp: "value",
+      popupMatchSelectWidth: false,
+      dropdownStyle: { minWidth: 200 }
+    },
+    countryCodes.map((country, index) => /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Select.Option,
+      {
+        key: `${country.code}-${country.name}-${index}`,
+        value: country.code
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, /* @__PURE__ */ import_react.default.createElement("span", null, country.flag), /* @__PURE__ */ import_react.default.createElement("span", null, country.code), /* @__PURE__ */ import_react.default.createElement("span", null, country.name))
+    ))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Input,
+    {
+      value,
+      onChange: handlePhoneChange,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      placeholder: props.placeholder || "请输入电话号码",
+      maxLength: props.maxLength || (0, import_utils2.getMaxLength)(countryCode, countryCodes),
+      allowClear: props.allowClear,
+      disabled: props.disabled,
+      autoFocus: props.autoFocus,
+      status: isValid ? void 0 : "error",
+      className: props.className,
+      style: props.style,
+      "aria-label": props["aria-label"],
+      "aria-describedby": props["aria-describedby"]
+    }
+  )), !isValid && errors.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-phone-error" }, errors[0]));
+};
+var EditView_default = EditView;

package/lib/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/lib/components/pisellPhone/components/ReadOnlyView.js

@@ -0,0 +1,79 @@
+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/pisellPhone/components/ReadOnlyView.tsx
+var ReadOnlyView_exports = {};
+__export(ReadOnlyView_exports, {
+  default: () => ReadOnlyView_default
+});
+module.exports = __toCommonJS(ReadOnlyView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_utils = require("../utils");
+var ReadOnlyView = (props) => {
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  const countryCode = props.countryCode || "+86";
+  let displayValue;
+  if (props.enableMasking) {
+    if (props.maskPattern === "custom" && props.customMask) {
+      displayValue = props.customMask(props.value || "");
+    } else {
+      displayValue = (0, import_utils.maskPhone)(props.value || "", props.maskPattern);
+    }
+  } else {
+    displayValue = (0, import_utils.formatPhone)(props.value || "", countryCode);
+  }
+  const handleDial = () => {
+    var _a;
+    if (props.enableDial !== false && isMobile) {
+      const cleaned = (props.value || "").replace(/\D/g, "");
+      const fullNumber = countryCode + cleaned;
+      (_a = props.onDial) == null ? void 0 : _a.call(props, fullNumber);
+      window.location.href = `tel:${fullNumber}`;
+    }
+  };
+  const canDial = props.enableDial !== false && isMobile;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-phone-read ${props.className || ""}` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: "small" }, props.showFlag !== false && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-phone-flag" }, (0, import_utils.getCountryFlag)(countryCode)), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Typography.Text,
+    {
+      className: canDial ? "pisell-phone-clickable" : "",
+      onClick: canDial ? handleDial : void 0,
+      style: {
+        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__ */ import_react.default.createElement(import_antd.Button, { type: "link", size: "small", icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PhoneOutlined, null), onClick: handleDial })));
+};
+var ReadOnlyView_default = ReadOnlyView;

package/lib/components/pisellPhone/constants/countryCodes.d.ts

@@ -0,0 +1,20 @@
+import type { CountryCode } from '../types';
+/**
+ * 预设的国家码列表（24个常见国家）
+ *
+ * 包含：
+ * - 亚洲：中国、香港、澳门、台湾、日本、韩国、新加坡、马来西亚、泰国、印度
+ * - 欧洲：英国、法国、德国、意大利、西班牙、俄罗斯
+ * - 美洲：美国、加拿大、墨西哥、巴西
+ * - 大洋洲：澳大利亚、新西兰
+ * - 中东：阿联酋、沙特阿拉伯
+ */
+export declare const PRESET_COUNTRY_CODES: CountryCode[];
+/**
+ * 默认国家码
+ */
+export declare const DEFAULT_COUNTRY_CODE = "+86";
+/**
+ * 常用国家码（可作为默认的 commonCountryCodes）
+ */
+export declare const COMMON_COUNTRY_CODES: string[];