@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellUrl/PisellUrl.stories.js

@@ -0,0 +1,713 @@
+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 { PisellUrl } from "./PisellUrl";
+import React from 'react';
+
+/**
+ * PisellUrl 是一个 URL 地址输入/展示组件。
+ * 
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - URL 格式校验
+ * - 协议自动补全
+ * - 链接跳转（新窗口，安全性保障）
+ * - 协议/路径显示控制
+ * - 协议白名单限制
+ */
+var meta = {
+  title: '表单/PisellUrl',
+  component: PisellUrl,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'URL 地址输入/展示组件，支持格式校验、协议补全和链接跳转。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['read', 'edit'],
+      description: '状态模式'
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    strictValidation: {
+      control: 'boolean',
+      description: '是否使用严格校验'
+    },
+    autoCompleteProtocol: {
+      control: 'boolean',
+      description: '自动补全协议'
+    },
+    enableLinkClick: {
+      control: 'boolean',
+      description: '启用链接跳转（只读态）'
+    },
+    showProtocol: {
+      control: 'boolean',
+      description: '显示协议（只读态）'
+    },
+    showLinkIcon: {
+      control: 'boolean',
+      description: '显示链接图标'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础编辑态
+ */
+export var Basic = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入网址'
+  }
+};
+
+/**
+ * 协议自动补全
+ */
+export var WithProtocolAutoComplete = {
+  args: {
+    mode: 'edit',
+    autoCompleteProtocol: true,
+    defaultProtocol: 'https://',
+    placeholder: '输入网址，失焦后自动补全协议'
+  }
+};
+
+/**
+ * 只读态 - 可跳转
+ */
+export var ReadMode = {
+  args: {
+    mode: 'read',
+    value: 'https://www.example.com',
+    enableLinkClick: true,
+    openInNewWindow: true
+  }
+};
+
+/**
+ * 只读态 - 隐藏协议
+ */
+export var ReadModeHideProtocol = {
+  args: {
+    mode: 'read',
+    value: 'https://www.example.com/path',
+    showProtocol: false
+  }
+};
+
+/**
+ * 只读态 - 仅域名
+ */
+export var ReadModeDomainOnly = {
+  args: {
+    mode: 'read',
+    value: 'https://www.example.com/path/to/page',
+    displayFormat: 'domain'
+  }
+};
+
+/**
+ * 禁用态（编辑）
+ */
+export var DisabledEdit = {
+  args: {
+    mode: 'edit',
+    value: 'https://example.com',
+    disabled: true
+  }
+};
+
+/**
+ * 禁用态（只读）
+ */
+export var DisabledRead = {
+  args: {
+    mode: 'read',
+    value: 'https://example.com',
+    disabled: true
+  }
+};
+
+/**
+ * 必填校验
+ */
+export var Required = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入网址（必填）',
+    required: true,
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 格式校验（实时）
+ */
+export var FormatValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入网址',
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 协议限制（仅 HTTPS）
+ */
+export var HttpsOnly = {
+  args: {
+    mode: 'edit',
+    allowedProtocols: ['https'],
+    placeholder: '仅支持 HTTPS 协议',
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 协议必需
+ */
+export var RequireProtocol = {
+  args: {
+    mode: 'edit',
+    requireProtocol: true,
+    autoCompleteProtocol: false,
+    placeholder: '必须输入完整 URL（含协议）',
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 显示清空按钮
+ */
+export var WithClearButton = {
+  args: {
+    mode: 'edit',
+    defaultValue: 'https://example.com',
+    allowClear: true,
+    placeholder: '请输入网址'
+  }
+};
+
+/**
+ * 自动聚焦
+ */
+export var WithAutoFocus = {
+  args: {
+    mode: 'edit',
+    autoFocus: true,
+    placeholder: '自动获得焦点'
+  }
+};
+
+/**
+ * 自定义样式（只读态）
+ */
+export var CustomStyle = {
+  args: {
+    mode: 'read',
+    value: 'https://example.com',
+    fontSize: 18,
+    fontWeight: 600,
+    linkColor: '#FF5722'
+  }
+};
+
+/**
+ * 显示控制对比
+ */
+export var DisplayFormatComparison = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u5B8C\u6574 URL\uFF08\u542B\u534F\u8BAE\uFF09:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      displayFormat: "full",
+      showProtocol: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u9690\u85CF\u534F\u8BAE:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      showProtocol: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u9690\u85CF\u8DEF\u5F84\uFF08\u663E\u793A\u534F\u8BAE+\u57DF\u540D\uFF09:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      showProtocol: true,
+      showPathname: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, "\u4EC5\u57DF\u540D:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com/path/to/page",
+      displayFormat: "domain"
+    })));
+  }
+};
+
+/**
+ * 校验时机对比
+ */
+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(PisellUrl, {
+      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(PisellUrl, {
+      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(PisellUrl, {
+      placeholder: "\u8F93\u5165\u548C\u5931\u7126\u90FD\u6821\u9A8C",
+      required: true,
+      validateTrigger: "both"
+    })));
+  }
+};
+
+/**
+ * 所有状态展示
+ */
+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(PisellUrl, {
+      mode: "edit",
+      defaultValue: "https://example.com",
+      placeholder: "\u8BF7\u8F93\u5165\u7F51\u5740",
+      allowClear: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://example.com",
+      enableLinkClick: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001\uFF08\u7F16\u8F91\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "edit",
+      value: "https://example.com",
+      disabled: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u6001\uFF08\u53EA\u8BFB\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://example.com",
+      disabled: true
+    })));
+  }
+};
+
+/**
+ * 完整功能示例
+ */
+export var CompleteExample = {
+  render: function render() {
+    var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      url = _React$useState2[0],
+      setUrl = _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 - \u534F\u8BAE\u8865\u5168 + \u683C\u5F0F\u6821\u9A8C"), /*#__PURE__*/React.createElement(PisellUrl, {
+      value: url,
+      onChange: function onChange(val) {
+        setUrl(val);
+        console.log('URL 变化:', val);
+      },
+      placeholder: "\u8BF7\u8F93\u5165\u7F51\u5740\uFF08\u8BD5\u8BD5\u8F93\u5165 example.com\uFF09",
+      autoCompleteProtocol: true,
+      defaultProtocol: "https://",
+      required: true,
+      validateTrigger: "both",
+      allowClear: true,
+      onProtocolComplete: function onProtocolComplete(val) {
+        console.log('协议补全:', val);
+      },
+      onValidate: function onValidate(isValid, errors) {
+        console.log('校验结果:', isValid, errors);
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: '8px',
+        color: '#667085',
+        fontSize: '12px'
+      }
+    }, "\u5F53\u524D\u503C\uFF1A", url || '（未输入）')), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u53EF\u8DF3\u8F6C"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com',
+      enableLinkClick: true,
+      openInNewWindow: true,
+      showLinkIcon: true,
+      onLinkClick: function onLinkClick(val) {
+        console.log('点击链接:', val);
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u94FE\u63A5\u5C06\u5728\u65B0\u7A97\u53E3\u6253\u5F00")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u663E\u793A\u63A7\u5236"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '14px',
+        color: '#667085'
+      }
+    }, "\u5B8C\u6574 URL:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com/path',
+      showProtocol: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '14px',
+        color: '#667085'
+      }
+    }, "\u9690\u85CF\u534F\u8BAE:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com/path',
+      showProtocol: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: '14px',
+        color: '#667085'
+      }
+    }, "\u4EC5\u57DF\u540D:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com/path',
+      displayFormat: "domain"
+    })))));
+  }
+};
+
+/**
+ * 协议补全演示
+ */
+export var ProtocolCompleteDemo = {
+  render: function render() {
+    var _React$useState3 = React.useState(''),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      url = _React$useState4[0],
+      setUrl = _React$useState4[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u534F\u8BAE\u8865\u5168\u6F14\u793A"), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '14px',
+        marginBottom: '16px'
+      }
+    }, "\u8F93\u5165\u7F51\u5740\u540E\u5931\u7126\uFF0C\u4F1A\u81EA\u52A8\u8865\u5168 https:// \u534F\u8BAE"), /*#__PURE__*/React.createElement(PisellUrl, {
+      value: url,
+      onChange: setUrl,
+      autoCompleteProtocol: true,
+      defaultProtocol: "https://",
+      placeholder: "\u8BD5\u8BD5\u8F93\u5165 example.com \u7136\u540E\u5931\u7126",
+      onProtocolComplete: function onProtocolComplete(val) {
+        console.log('协议补全:', val);
+        alert("\u534F\u8BAE\u5DF2\u8865\u5168: ".concat(val));
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: '8px',
+        color: '#667085',
+        fontSize: '12px'
+      }
+    }, "\u5F53\u524D\u503C\uFF1A", url || '（未输入）'));
+  }
+};
+
+/**
+ * 链接跳转演示
+ */
+export var LinkClickDemo = {
+  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, "\u65B0\u7A97\u53E3\u6253\u5F00\uFF08\u9ED8\u8BA4\uFF09"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com",
+      enableLinkClick: true,
+      openInNewWindow: true,
+      showLinkIcon: true
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u540E\u5728\u65B0\u7A97\u53E3\u6253\u5F00\uFF08\u5E26 noopener,noreferrer\uFF09")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u5F53\u524D\u7A97\u53E3\u6253\u5F00"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com",
+      enableLinkClick: true,
+      openInNewWindow: false,
+      showLinkIcon: true
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u540E\u5728\u5F53\u524D\u7A97\u53E3\u6253\u5F00")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7981\u7528\u8DF3\u8F6C"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: "https://www.example.com",
+      enableLinkClick: false
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u4EC5\u5C55\u793A\uFF0C\u4E0D\u53EF\u70B9\u51FB")));
+  }
+};
+
+/**
+ * 协议限制演示
+ */
+export var ProtocolRestrictionDemo = {
+  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, "\u4EC5\u5141\u8BB8 HTTPS"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "edit",
+      allowedProtocols: ['https'],
+      placeholder: "\u4EC5\u652F\u6301 HTTPS \u534F\u8BAE",
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u53EA\u5141\u8BB8 https:// \u534F\u8BAE")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u5141\u8BB8 HTTP \u548C HTTPS"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "edit",
+      allowedProtocols: ['http', 'https'],
+      placeholder: "\u652F\u6301 HTTP \u548C HTTPS",
+      validateTrigger: "onBlur",
+      defaultValue: ""
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u5141\u8BB8 http:// \u548C https://")));
+  }
+};
+
+/**
+ * 完整交互示例
+ */
+export var InteractiveExample = {
+  render: function render() {
+    var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      url = _React$useState6[0],
+      setUrl = _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, "PisellUrl \u5B8C\u6574\u529F\u80FD\u6F14\u793A"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001 - \u534F\u8BAE\u8865\u5168 + \u683C\u5F0F\u6821\u9A8C"), /*#__PURE__*/React.createElement(PisellUrl, {
+      value: url,
+      onChange: setUrl,
+      placeholder: "\u8BD5\u8BD5\u8F93\u5165 example.com \u7136\u540E\u5931\u7126",
+      autoCompleteProtocol: true,
+      defaultProtocol: "https://",
+      required: true,
+      validateTrigger: "both",
+      allowClear: true,
+      onProtocolComplete: function onProtocolComplete(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:"), " ", url || '（未输入）'), /*#__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 - \u94FE\u63A5\u8DF3\u8F6C"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com',
+      enableLinkClick: true,
+      openInNewWindow: true,
+      showLinkIcon: true,
+      onLinkClick: function onLinkClick(val) {
+        console.log('准备打开链接:', val);
+        alert("\u51C6\u5907\u6253\u5F00\u94FE\u63A5: ".concat(val));
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#667085',
+        fontSize: '12px',
+        marginTop: '8px'
+      }
+    }, "\u70B9\u51FB\u94FE\u63A5\u5C06\u5728\u65B0\u7A97\u53E3\u6253\u5F00")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: '32px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u663E\u793A\u63A7\u5236"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '24px',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: '200px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '14px',
+        marginBottom: '8px'
+      }
+    }, "\u5B8C\u6574:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com/path',
+      showProtocol: true
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: '200px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '14px',
+        marginBottom: '8px'
+      }
+    }, "\u9690\u85CF\u534F\u8BAE:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com/path',
+      showProtocol: false
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        flex: 1,
+        minWidth: '200px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: {
+        fontSize: '14px',
+        marginBottom: '8px'
+      }
+    }, "\u4EC5\u57DF\u540D:"), /*#__PURE__*/React.createElement(PisellUrl, {
+      mode: "read",
+      value: url || 'https://www.example.com/path',
+      displayFormat: "domain"
+    })))));
+  }
+};
+
+/**
+ * 协议默认值对比
+ */
+export var ProtocolDefaultComparison = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        width: '500px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u9ED8\u8BA4 HTTPS"), /*#__PURE__*/React.createElement(PisellUrl, {
+      placeholder: "\u5931\u7126\u540E\u8865\u5168 https://",
+      autoCompleteProtocol: true,
+      defaultProtocol: "https://"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u9ED8\u8BA4 HTTP"), /*#__PURE__*/React.createElement(PisellUrl, {
+      placeholder: "\u5931\u7126\u540E\u8865\u5168 http://",
+      autoCompleteProtocol: true,
+      defaultProtocol: "http://"
+    })));
+  }
+};