@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellEmail/PisellEmail.stories.js

@@ -0,0 +1,699 @@
+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 { PisellEmail } from "./PisellEmail";
+import React from 'react';
+
+/**
+ * PisellEmail 是一个邮箱地址输入/展示组件。
+ * 
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 邮箱格式校验（标准/严格）
+ * - 域名智能补全
+ * - mailto 邮件发送
+ * - 域名隐藏/脱敏
+ * - 白名单/黑名单域名限制
+ */
+var meta = {
+  title: '表单/PisellEmail',
+  component: PisellEmail,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '邮箱地址输入/展示组件，支持格式校验、域名补全和 mailto 发送。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['read', 'edit'],
+      description: '状态模式'
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    strictValidation: {
+      control: 'boolean',
+      description: '是否使用严格校验（RFC 5322）'
+    },
+    enableAutoComplete: {
+      control: 'boolean',
+      description: '启用域名补全'
+    },
+    enableMailto: {
+      control: 'boolean',
+      description: '启用 mailto（只读态）'
+    },
+    hideDomain: {
+      control: 'boolean',
+      description: '隐藏域名（只读态）'
+    },
+    displayAsLink: {
+      control: 'boolean',
+      description: '显示为链接（只读态）'
+    },
+    showEmailIcon: {
+      control: 'boolean',
+      description: '显示邮件图标'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础编辑态
+ */
+export var Basic = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入邮箱地址'
+  }
+};
+
+/**
+ * 域名智能补全
+ */
+export var WithAutoComplete = {
+  args: {
+    mode: 'edit',
+    enableAutoComplete: true,
+    placeholder: '输入@后自动提示域名'
+  }
+};
+
+/**
+ * 自定义补全域名
+ */
+export var CustomDomains = {
+  args: {
+    mode: 'edit',
+    enableAutoComplete: true,
+    autoCompleteDomains: ['gmail.com', 'company.com', 'custom.com'],
+    placeholder: '输入@查看自定义域名'
+  }
+};
+
+/**
+ * 只读态 - 可发邮件
+ */
+export var ReadMode = {
+  args: {
+    mode: 'read',
+    value: 'support@example.com',
+    enableMailto: true,
+    displayAsLink: true
+  }
+};
+
+/**
+ * 只读态 - 带邮件图标
+ */
+export var ReadModeWithIcon = {
+  args: {
+    mode: 'read',
+    value: 'support@example.com',
+    enableMailto: true,
+    showEmailIcon: true,
+    displayAsLink: true
+  }
+};
+
+/**
+ * 只读态 - 域名部分隐藏
+ */
+export var ReadModePartialMask = {
+  args: {
+    mode: 'read',
+    value: 'user@gmail.com',
+    hideDomain: true,
+    maskPattern: 'partial'
+  }
+};
+
+/**
+ * 只读态 - 域名完全隐藏
+ */
+export var ReadModeFullMask = {
+  args: {
+    mode: 'read',
+    value: 'user@gmail.com',
+    hideDomain: true,
+    maskPattern: 'full'
+  }
+};
+
+/**
+ * 禁用态（编辑）
+ */
+export var DisabledEdit = {
+  args: {
+    mode: 'edit',
+    value: 'user@example.com',
+    disabled: true
+  }
+};
+
+/**
+ * 禁用态（只读）
+ */
+export var DisabledRead = {
+  args: {
+    mode: 'read',
+    value: 'user@example.com',
+    disabled: true
+  }
+};
+
+/**
+ * 必填校验
+ */
+export var Required = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入邮箱地址（必填）',
+    required: true,
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 格式校验（实时）
+ */
+export var FormatValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入邮箱地址',
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 严格格式校验
+ */
+export var StrictValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入邮箱地址',
+    strictValidation: true,
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 白名单域名限制
+ */
+export var AllowedDomains = {
+  args: {
+    mode: 'edit',
+    placeholder: '请使用公司邮箱',
+    allowedDomains: ['company.com', 'partner.com'],
+    errorMessage: '只允许使用公司邮箱或合作伙伴邮箱',
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 黑名单域名限制
+ */
+export var BlockedDomains = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入邮箱地址',
+    blockedDomains: ['tempmail.com', '10minutemail.com'],
+    errorMessage: '不支持临时邮箱',
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 显示清空按钮
+ */
+export var WithClearButton = {
+  args: {
+    mode: 'edit',
+    defaultValue: 'user@example.com',
+    allowClear: true,
+    placeholder: '请输入邮箱地址'
+  }
+};
+
+/**
+ * 自动聚焦
+ */
+export var WithAutoFocus = {
+  args: {
+    mode: 'edit',
+    autoFocus: true,
+    placeholder: '自动获得焦点'
+  }
+};
+
+/**
+ * 自定义样式（只读态）
+ */
+export var CustomStyle = {
+  args: {
+    mode: 'read',
+    value: 'user@example.com',
+    fontSize: 18,
+    fontWeight: 600,
+    linkColor: '#FF5722'
+  }
+};
+
+/**
+ * 脱敏模式对比
+ */
+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(PisellEmail, {
+      mode: "read",
+      value: "user@gmail.com",
+      hideDomain: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u90E8\u5206\u9690\u85CF (u***@gmail.com):"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "user@gmail.com",
+      hideDomain: true,
+      maskPattern: "partial"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u5B8C\u5168\u9690\u85CF (user@***):"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "user@gmail.com",
+      hideDomain: true,
+      maskPattern: "full"
+    })));
+  }
+};
+
+/**
+ * 校验时机对比
+ */
+export var ValidateTriggerComparison = {
+  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, "\u8F93\u5165\u65F6\u6821\u9A8C\uFF08onChange\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      placeholder: "\u8F93\u5165\u65F6\u5373\u65F6\u6821\u9A8C",
+      required: true,
+      validateTrigger: "onChange"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u5931\u7126\u65F6\u6821\u9A8C\uFF08onBlur\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      placeholder: "\u5931\u7126\u540E\u6821\u9A8C",
+      required: true,
+      validateTrigger: "onBlur"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u4E24\u8005\u90FD\u6821\u9A8C\uFF08both\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      placeholder: "\u8F93\u5165\u548C\u5931\u7126\u90FD\u6821\u9A8C",
+      required: true,
+      validateTrigger: "both"
+    })));
+  }
+};
+
+/**
+ * 完整功能示例
+ */
+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];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '600px',
+        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(PisellEmail, {
+      value: value,
+      onChange: function onChange(val) {
+        setValue(val);
+        console.log('邮箱变化:', val);
+      },
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1\u5730\u5740",
+      enableAutoComplete: true,
+      autoCompleteDomains: ['gmail.com', 'qq.com', 'company.com'],
+      required: true,
+      validateTrigger: "both",
+      allowClear: true,
+      onSelect: function onSelect(email) {
+        console.log('选择补全:', email);
+      },
+      onValidate: function onValidate(isValid, errors) {
+        console.log('校验结果:', isValid, errors);
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: '8px',
+        color: '#667085',
+        fontSize: '12px'
+      }
+    }, "\u5F53\u524D\u503C\uFF1A", value || '（未输入）')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u53EF\u53D1\u90AE\u4EF6"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: value || 'support@example.com',
+      enableMailto: true,
+      displayAsLink: true,
+      showEmailIcon: true,
+      mailtoOptions: {
+        subject: '产品咨询',
+        body: '您好，我想咨询关于...'
+      },
+      onMailto: function onMailto(email) {
+        console.log('发送邮件至:', email);
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u57DF\u540D\u9690\u85CF"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: value || 'user@gmail.com',
+      hideDomain: true,
+      maskPattern: "partial",
+      enableMailto: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "edit",
+      value: value || 'user@example.com',
+      disabled: true
+    })));
+  }
+};
+
+/**
+ * 域名补全演示
+ */
+export var AutoCompleteDemo = {
+  render: function render() {
+    var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      value = _React$useState4[0],
+      setValue = _React$useState4[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u57DF\u540D\u8865\u5168\u6F14\u793A"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '14px',
+        marginBottom: '16px'
+      }
+    }, "\u8F93\u5165 @ \u540E\u4F1A\u81EA\u52A8\u663E\u793A\u5E38\u7528\u90AE\u7BB1\u57DF\u540D\u5EFA\u8BAE\uFF0C\u652F\u6301\u952E\u76D8\u4E0A\u4E0B\u952E\u9009\u62E9"), /*#__PURE__*/React.createElement(PisellEmail, {
+      value: value,
+      onChange: setValue,
+      enableAutoComplete: true,
+      placeholder: "\u8BD5\u8BD5\u8F93\u5165 user@ \u770B\u770B\u6548\u679C",
+      onSelect: function onSelect(email) {
+        console.log('选择了:', email);
+        alert("\u9009\u62E9\u4E86: ".concat(email));
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: '8px',
+        color: '#667085',
+        fontSize: '12px'
+      }
+    }, "\u5F53\u524D\u8F93\u5165\uFF1A", value || '（未输入）'));
+  }
+};
+
+/**
+ * mailto 功能演示
+ */
+export var MailtoDemo = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u57FA\u7840 mailto"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "support@example.com",
+      enableMailto: true,
+      displayAsLink: true
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u90AE\u7BB1\u5730\u5740\u5524\u8D77\u90AE\u4EF6\u5BA2\u6237\u7AEF")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u5E26\u9884\u8BBE\u53C2\u6570\u7684 mailto"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "sales@company.com",
+      enableMailto: true,
+      displayAsLink: true,
+      showEmailIcon: true,
+      mailtoOptions: {
+        subject: '产品咨询',
+        body: '您好，我想咨询关于贵公司的产品...'
+      },
+      onMailto: function onMailto(email) {
+        console.log('发送邮件至:', email);
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u540E\u90AE\u4EF6\u5BA2\u6237\u7AEF\u4F1A\u9884\u586B\u4E3B\u9898\u548C\u6B63\u6587")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u4E0D\u542F\u7528 mailto"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "readonly@example.com",
+      enableMailto: false
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u4EC5\u5C55\u793A\uFF0C\u4E0D\u53EF\u70B9\u51FB")));
+  }
+};
+
+/**
+ * 白名单/黑名单演示
+ */
+export var DomainRestrictionDemo = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u767D\u540D\u5355\u9650\u5236\uFF08\u4EC5\u5141\u8BB8\u516C\u53F8\u90AE\u7BB1\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "edit",
+      placeholder: "\u8BF7\u4F7F\u7528\u516C\u53F8\u90AE\u7BB1",
+      allowedDomains: ['company.com', 'partner.com'],
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u53EA\u5141\u8BB8 @company.com \u6216 @partner.com")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u9ED1\u540D\u5355\u9650\u5236\uFF08\u7981\u6B62\u4E34\u65F6\u90AE\u7BB1\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "edit",
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1\u5730\u5740",
+      blockedDomains: ['tempmail.com', '10minutemail.com', 'guerrillamail.com'],
+      errorMessage: "\u4E0D\u652F\u6301\u4E34\u65F6\u90AE\u7BB1",
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u7981\u6B62\u4F7F\u7528\u4E34\u65F6\u90AE\u7BB1\u57DF\u540D")));
+  }
+};
+
+/**
+ * 所有状态展示
+ */
+export var AllStates = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "edit",
+      defaultValue: "user@example.com",
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1\u5730\u5740",
+      allowClear: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "user@example.com",
+      enableMailto: true,
+      displayAsLink: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001\uFF08\u7F16\u8F91\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "edit",
+      value: "user@example.com",
+      disabled: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001\uFF08\u53EA\u8BFB\uFF09"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: "user@example.com",
+      disabled: true
+    })));
+  }
+};
+
+/**
+ * 完整交互示例
+ */
+export var InteractiveExample = {
+  render: function render() {
+    var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      email = _React$useState6[0],
+      setEmail = _React$useState6[1];
+    var _React$useState7 = React.useState(true),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      isValid = _React$useState8[0],
+      setIsValid = _React$useState8[1];
+    var _React$useState9 = React.useState([]),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      errors = _React$useState10[0],
+      setErrors = _React$useState10[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '600px'
+      }
+    }, /*#__PURE__*/React.createElement("h2", null, "PisellEmail \u5B8C\u6574\u529F\u80FD\u6F14\u793A"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001 - \u57DF\u540D\u8865\u5168 + \u683C\u5F0F\u6821\u9A8C"), /*#__PURE__*/React.createElement(PisellEmail, {
+      value: email,
+      onChange: setEmail,
+      placeholder: "\u8BD5\u8BD5\u8F93\u5165 user@ \u770B\u770B\u57DF\u540D\u8865\u5168\u6548\u679C",
+      enableAutoComplete: true,
+      autoCompleteDomains: ['gmail.com', 'qq.com', '163.com', 'company.com'],
+      required: true,
+      validateTrigger: "both",
+      allowClear: true,
+      onSelect: function onSelect(val) {
+        console.log('选择了补全建议:', val);
+      },
+      onValidate: function onValidate(valid, errs) {
+        setIsValid(valid);
+        setErrors(errs);
+        console.log('校验结果:', {
+          valid: valid,
+          errs: errs
+        });
+      },
+      onBlur: function onBlur(val) {
+        console.log('失焦，当前值:', val);
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '16px',
+        padding: '12px',
+        background: '#f5f5f5',
+        borderRadius: '4px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: '4px 0',
+        fontSize: '14px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, "\u5F53\u524D\u503C:"), " ", email || '（未输入）'), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: '4px 0',
+        fontSize: '14px'
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, "\u6821\u9A8C\u72B6\u6001:"), " ", isValid ? '✅ 通过' : '❌ 未通过'), !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: '4px 0',
+        fontSize: '14px',
+        color: '#ff4d4f'
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, "\u9519\u8BEF\u4FE1\u606F:"), " ", errors.join(', ')))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '32px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - mailto \u53D1\u9001"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: email || 'support@example.com',
+      enableMailto: true,
+      displayAsLink: true,
+      showEmailIcon: true,
+      mailtoOptions: {
+        subject: '来自 Pisell 的咨询',
+        body: "\u60A8\u597D\uFF0C\n\n\u6211\u60F3\u54A8\u8BE2\u5173\u4E8E...\n\n\u53D1\u4EF6\u4EBA: ".concat(email || 'support@example.com')
+      },
+      onMailto: function onMailto(val) {
+        console.log('准备发送邮件至:', val);
+        alert("\u51C6\u5907\u53D1\u9001\u90AE\u4EF6\u81F3: ".concat(val));
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u90AE\u7BB1\u5730\u5740\u6216\u56FE\u6807\u5524\u8D77\u90AE\u4EF6\u5BA2\u6237\u7AEF")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '32px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u57DF\u540D\u9690\u85CF"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '14px',
+        marginBottom: '8px'
+      }
+    }, "\u90E8\u5206\u9690\u85CF:"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: email || 'user@gmail.com',
+      hideDomain: true,
+      maskPattern: "partial"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '14px',
+        marginBottom: '8px'
+      }
+    }, "\u5B8C\u5168\u9690\u85CF:"), /*#__PURE__*/React.createElement(PisellEmail, {
+      mode: "read",
+      value: email || 'user@gmail.com',
+      hideDomain: true,
+      maskPattern: "full"
+    })))));
+  }
+};